@charset "utf-8";
/* ===============
article header
================= */
.main {
    padding: 50px 0px 0px;
    background-image: url(../images/green_haikei.png);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: left top;
}

.article__header {
    margin-top: 0px;
    position: relative;
}

.work__all {
    font-family: "Zen Maru Gothic";
    font-size: 1rem;
    font-weight: 700;
    line-height: 2;
    margin: 30px 0 0 11%;
}

.work {
    color: var(--primary-black);
    font-family: "Zen Maru Gothic";
    font-size: 1.62rem;
    font-weight: 700;
    text-align: center;
    margin: 25px auto 0;
}

.work::after {
    background-image: url(../images/work1_dots.png);
    content: '';
    display: block;
    background-repeat: no-repeat;
    background-size: contain;
    width: 236px;
    height: 8px;
    margin: 0 auto;
}

.workTopics {
    margin-top: 46px;
    text-align: right;
}

.workTopics img {
    border-radius: 20px;
    /* margin: 0px 0 0 30px; */
}

.work__title::after {
    background-image: url(../images/work1_rogo.png);
    content: '';
    display: block;
    background-repeat: no-repeat;
    background-size: contain;
    width: 90px;
    height: 91px;
    position: absolute;
    left: 44%;
    bottom: 140px;
}

.work__title {
    color: var(--primary-black);
    font-family: "Zen Maru Gothic";
    font-size: 1.62rem;
    font-weight: 700;
    text-align: left;
    line-height: 1.5;
    margin: 140px auto 0;
    padding: 0 4%;
    width: max-content;
    position: relative;
}

.orange {
    color: #FDA923;
}


/* .article header pc */
@media screen and (min-width: 900px) {
    .nav__item2 a{
        text-align: center;
        font-size: 1rem;
        display: flex; 
        flex-direction: column; 
        margin-top: 0px;
        padding-right: 0px;
        border-bottom: none;
        color: #FDA923;
    }

    .nav__item3 a{
        color: #4F4844;
    }

    .nav__item3 a:hover {
        color: #FDA923;
    }
    
    .main {
        padding-top: 160px;
        padding-bottom: 0px;
        padding: 80px 9.7% 0px;
        background-image: url(../images/green_haikei.png);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: left top;
        
    }
    
    .article__header {
        margin-top: 0px;
        position: relative;
    }
    
    .work__all {
        font-family: "Zen Maru Gothic";
        font-size: 1.1rem;
        font-weight: 700;
        line-height: 2;
        margin: 25px 0 0 0;
    }

    .work {
        color: var(--primary-black);
        font-family: "Zen Maru Gothic";
        font-size: 2rem;
        font-weight: 700;
        text-align: center;
        margin: 80px auto 0;
       
    }

    .work br {
       display: none;
    }
    
    .work::after {
        background-image: url(../images/pc_dots_green.png);
        content: '';
        display: block;
        background-repeat: no-repeat;
        background-size: contain;
        width: 639px;
        height: 8px;
        margin: 0 auto;
    }
    
    .workTopics {
        margin-top: 46px;
        text-align: right;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        flex-wrap: wrap;
    }
    
    .workTopics img {
        border-radius: 20px;
        margin: 0px 0 0 30px;
        width: 473px;
    }
    
    .work__title::after {
        background-image: url(../images/work1_rogo.png);
        content: '';
        display: block;
        background-repeat: no-repeat;
        background-size: contain;
        width: 90px;
        height: 91px;
        position: absolute;
        left: 50%;
        bottom: 50%;
        transform: translate(-50%, -100%);
    }
    
    .work__title {
        color: var(--primary-black);
        font-family: "Zen Maru Gothic";
        font-size: 2rem;
        font-weight: 700;
        text-align: left;
        line-height: 1.5;
        margin: 140px 0 0 40px;
        padding: 0 4%;
        width: max-content;
        position: relative;
    }
    
    .orange {
        color: #FDA923;
    }
    /* pc 900px */
}
/* ===============
topics
================= */
.section--topics {
    padding: 50px 4% 0px;
}

.work__Secondtitle {
    color: var(--primary-black);
    font-family: "Zen Maru Gothic";
    font-size: 1.62rem;
    font-weight: 700;
    text-align: left;
    line-height: 1.5;
    margin: 0 auto;
    padding: 0 4%;
    width: max-content;
    position: relative;
}

.work__Secondtitle::after {
    background-image: url(../images/work1_asirai.png);
    content: '';
    display: block;
    background-repeat: no-repeat;
    background-size: contain;
    width: 69px;
    height: 28px;
    position: absolute;
    left: -6%;
    top: -24px;
}

.work__txt {
    font-family: "Noto Sans JP";
    font-size: 1rem;
    line-height: 2; 
    text-align: left;
    margin: 25px auto 0;
    padding: 0 4%;
} 

.section--topics img {
    border-radius: 20px;
    margin: 25px auto 0;
    text-align: center;
} 

/* .topics pc */
@media screen and (min-width: 900px) {
    .section--topics {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 20px;
        flex-wrap: wrap;
        margin-top: 80px;
    }
    
    .topics__title {
        width: 417px;
    }

    .work__Secondtitle {
        color: var(--primary-black);
        font-family: "Zen Maru Gothic";
        font-size: 2rem;
        font-weight: 700;
        text-align: left;
        line-height: 1.5;
        margin: 0 auto;
        padding: 0 9.7%;
        width: max-content;
        position: relative;
    }
    
    .work__Secondtitle::after {
        background-image: url(../images/work1_asirai.png);
        content: '';
        display: block;
        background-repeat: no-repeat;
        background-size: contain;
        width: 69px;
        height: 28px;
        position: absolute;
        left: 4%;
        top: -29px;
    }
    
    .work__txt {
        font-family: "Noto Sans JP";
        font-size: 1.1rem;
        line-height: 2; 
        text-align: left;
        margin: 25px auto 0;
        padding: 0 4%;
    } 
    
    .section--topics img {
        width: 473px;
        border-radius: 20px;
        /* text-align: center; */
    }
} 


/* ===============
service
================= */
.section--service {
    padding: 50px 4% 0px;
}

.service__sheet {
    border-radius: 20px;
    background-color: #FFFCEB;
    padding: 40px 18px;
}

.service__title {
    color: var(--primary-black);
    font-family: "Zen Maru Gothic";
    font-size: 1.62rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.5;
    margin: 0 auto 0;
    padding: 0 4%;
    width: max-content;
}

.service__list {
    position: relative;
}

.service__item {
    font-family: "Noto Sans JP";
    font-size: 1rem;
    line-height: 2;
    margin-top: 15px;
}
.service__item:first-of-type {
    margin-top: 30px;
}

.service__txt {
    font-family: "Noto Sans JP";
    font-size: 1rem;
    line-height: 2;
    margin-top: 157px;
}

.service__list::after {
    background-image: url(../images/work1_sheet.png);
    content: '';
    display: block;
    background-repeat: no-repeat;
    background-size: contain;
    width: 100px;
    height: 125px;
    position: absolute;
    left: 50%;
    bottom: -138px;
    transform: translateX(-50%);
}

/* .service pc */
@media screen and (min-width: 900px) {
    .section--service {
        padding: 50px 4% 0px;
    }

    .service__sheet {
        border-radius: 20px;
        background-color: #FFFCEB;
        padding: 40px 77px;
    }

    .service__title {
        color: var(--primary-black);
        font-family: "Zen Maru Gothic";
        font-size: 2rem;
        font-weight: 700;
        text-align: center;
        line-height: 1.5;
        margin-left: 37px;
        padding: 0 4%;
        width: max-content;
    }

    .service__box {
        display: flex;
        padding: 38px 0;
        position: relative;
    }

    .service__item {
        font-family: "Noto Sans JP";
        font-size: 1rem;
        line-height: 2;
        margin-top: 15px;
    }
    .service__item:first-of-type {
        margin-top: 30px;
    }

    .service__txt {
        font-family: "Noto Sans JP";
        font-size: 1rem;
        line-height: 2;
        margin: 30px 0 0 58px;
    }

    .service__box::after {
        background-image: url(../images/work1_sheet.png);
        content: '';
        display: block;
        background-repeat: no-repeat;
        background-size: contain;
        width: 179px;
        height: 224px;
        position: absolute;
        /* left: 62%; */
        bottom: 36px;
        right: 8%;
    }

    .service__list::after {
        display: none;
    }

}
/* pc 900px*/

/* ===============
open
================= */
.section--open {
    padding: 50px 4% 0px;
}

.open__sheet {
    border-radius: 20px;
    background-color: rgba(214, 250, 210, 0.50);
    padding: 18px 60px;
}

.open__title {
    color: var(--primary-black);
    font-family: "Zen Maru Gothic";
    font-size: 1.62rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.5;
    margin: 0 auto 0;
    padding: 0 4%;
    width: max-content;
}

.open__list {
    margin-top: 25px;
    /* justify-content: center; */
    /* padding-left: 32%; */
}

.open__item {
    font-size: 1rem;
    margin-top: 16px;
}   

/* .open pc */
@media screen and (min-width: 900px) {
    .section--open {
        padding: 0;
        flex-basis: 29%;
    }
    
    .open__sheet {
        border-radius: 20px;
        background-color: rgba(214, 250, 210, 0.50);
        padding: 41px 60px 72px;
        width: 374px;
    }
    
    .open__title {
        color: var(--primary-black);
        font-family: "Zen Maru Gothic";
        font-size: 2rem;
        font-weight: 700;
        text-align: center;
        margin: 0;
        width: max-content;
    }
    
    .open__list {
        margin-top: 28px;
    }
    
    .open__item {
        font-size: 1.1rem;
        margin-top: 16px;
    }  
    
    .open__box {
        display: flex;
        padding: 0;
        justify-content: center;
        flex-wrap: wrap;
        gap: 22px;
        margin-bottom: 80px;
        margin-top: 80px;
    }
}

/* pc 900px*/

/* ===============
place
================= */
.section--place {
    padding: 50px 4% 0;
}

.place__sheet {
    border-radius: 20px;
    background-color: rgba(214, 250, 210, 0.50);
    padding: 18px 60px;
}

.place__title {
    color: var(--primary-black);
    font-family: "Zen Maru Gothic";
    font-size: 1.62rem;
    font-weight: 700;
    text-align: left;
    line-height: 1.5;
    margin: 0 auto 0;
    padding: 0 4%;
    width: max-content;
}

.place__list {
    margin-top: 25px;
    position: relative;
  
}

.place__item {
    font-size: 1rem;
    margin: 16px auto 0;
    text-align: left;
    width: max-content;
    
}  

.place__item:last-of-type {
    margin: 159px auto 0;
}   

.place__list::after {
    display: block;
    content: "";
    background-image: url(../images/work1_place.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 179px;
    height: 127px;
    left: 50%;
    bottom: 86px;
    right: 12%;
    position: absolute;
    transform: translateX(-50%);
}

/* .place pc */
@media screen and (min-width: 900px) {
    .section--place {
        padding:0;
    }
    
    .place__sheet {
        border-radius: 20px;
        background-color: rgba(214, 250, 210, 0.50);
        padding: 41px 100px 41px 44px;
    }
    
    .place__title {
        color: var(--primary-black);
        font-family: "Zen Maru Gothic";
        font-size: 2rem;
        font-weight: 700;
        text-align: left;
        line-height: 1.5;
        margin: 0;
        padding: 0;
        width: max-content;
    }
    
    .place__list {
        margin-top: 20px;
        position: relative;
      
    }
    
    .place__item {
        font-size: 1.1rem;
        margin: 16px 0 0 38px;
        text-align: left;
        width: max-content;
    }  

    .place__Pcbr {
       display: none;
    }  
    
    .place__item:last-of-type {
        margin: 16px auto 0;
    }   
    
    .place__list::after {
        display: block;
        content: "";
        background-image: url(../images/work1_place.png);
        background-repeat: no-repeat;
        background-size: contain;
        width: 199px;
        height: 141px;
        left: 89%;
        bottom: 53px;
        position: absolute;
    }
}

 /* ===============
other
================= */
.section--other {
    padding: 50px 4%;
}


.other__title {
    color: var(--primary-black);
    font-family: "Zen Maru Gothic";
    font-size: 1.62rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.5;
    margin: 0 auto 0;
    padding: 0 4%;
    width: max-content;
}

.other__title::after {
    background-image: url(../images/pc_dots_orange.png);
    content: '';
    display: block;
    background-repeat: no-repeat;
    background-size: cover;
    width: 160px;
    height: 8px;
    margin: 0 auto;
}

.other__list {
    margin-top: 30px;
}


.other__img {
    width: 300px;
    margin: 8px auto;
}

.btn_n2 {
    display: block;
    content: '';
    width: 345px;
    height: 69px;
    padding: 5px 13px; 
    border-radius: 50px;
    background: var(--primary-blue);
    /* border: 3px solid #E8F9D2 ; */
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25 );
    color: var(--primary-black);
    font-size: 1.8rem;
    font-family: "Zen Maru Gothic";
    text-align: center;
    margin: 0px auto;
    position: relative;
} 

.btn_n2::after {
    content: '';
    display: block;
    width: 7px;
    height: 14px;
    background-image: url(../images/about2_arrow.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    right: 20px; 
    top: 50%; 
    transform: translateY(-50%) 
}

.btn_n3 {
    display: block;
    content: '';
    width: 345px;
    height: 69px;
    padding: 5px 13px; 
    border-radius: 50px;
    background: var(--primary-pink);
    /* border: 3px solid #E8F9D2 ; */
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25 );
    color: var(--primary-black);
    font-size: 1.8rem;
    font-family: "Zen Maru Gothic";
    text-align: center;
    margin: 50px auto 0;
    position: relative;
} 

.btn_n3::after {
    content: '';
    display: block;
    width: 7px;
    height: 14px;
    background-image: url(../images/about2_arrow.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    right: 60px; 
    top: 50%; 
    transform: translateY(-50%) 
}

/* .other pc */
@media screen and (min-width: 900px) {
    .section--other {
        padding: 0px 0px 80px;
    }
    
    
    .other__title {
        color: var(--primary-black);
        font-family: "Zen Maru Gothic";
        font-size: 2rem;
        font-weight: 700;
        text-align: center;
        line-height: 1.5;
        padding: 0;
        width: max-content;
    }
    
    .other__title::after {
        background-image: url(../images/pc_dots_orange.png);
        content: '';
        display: block;
        background-repeat: no-repeat;
        background-size: cover;
        width: 160px;
        height: 8px;
        margin: 0 auto;
    }
    
    .other__list {
        margin-top: 50px;
        display: flex;
        justify-content: space-evenly;
    }
    
    
    .other__img {
        width: 300px;
        margin: 8px auto;
    }
    
    .btn_n2 {
        display: block;
        content: '';
        width: 345px;
        height: 69px;
        padding: 5px 13px; 
        border-radius: 50px;
        background: var(--primary-blue);
        /* border: 3px solid #E8F9D2 ; */
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25 );
        color: var(--primary-black);
        font-size: 1.8rem;
        font-family: "Zen Maru Gothic";
        text-align: center;
        margin: 0px auto;
        position: relative;
    } 
    
    .btn_n2::after {
        content: '';
        display: block;
        width: 7px;
        height: 14px;
        background-image: url(../images/about2_arrow.svg);
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        position: absolute;
        right: 20px; 
        top: 50%; 
        transform: translateY(-50%) 
    }
    
    .btn_n3 {
        margin: 0px auto 0;
        position: relative;
    } 
    
    .btn_n3::after {
        content: '';
        display: block;
        width: 7px;
        height: 14px;
        background-image: url(../images/about2_arrow.svg);
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        position: absolute;
        right: 60px; 
        top: 50%; 
        transform: translateY(-50%) 
    }
}