@charset "utf-8";
/* ===============
article header
================= */
.main {
    padding: 50px 0px 0px;
    background-image: url(../images/blue_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: 50px auto 0;
}

.work::after {
    background-image: url(../images/work2_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 0px; 
}

.work__title::after {
    transform: translateX(-50%);
    background-image: url(
    ../images/work2_rogo.png);
    content: '';
    display: block;
    background-repeat: no-repeat;
    background-size: contain;
    width: 120px;
    height: 95px;
    position: absolute;
    left: 50%;
    bottom: 136px;
}

.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: 125px 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: 80px 9% 0px;
        background-image: url(../images/blue_haikei_pc.png);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: left -10px 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/work2Pc_ordots.png);
        content: '';
        display: block;
        background-repeat: repeat;
        background-size: contain;
        width: 696px;
        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/work2_rogo.png);
        content: '';
        display: block;
        background-repeat: no-repeat;
        background-size: contain;
        width: 150px;
        height: 119px;
        position: absolute;
        left: 72%;
        /* bottom: 276px; */
        top: -1px;
        position: absolute;
        left: 50%;
        bottom: 50%;
        top: 0;
        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;
    position: relative;
}

.work2__orange {
    border-bottom: 2px solid #FDA923; 
    color: #FDA923;
}

.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;
}

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

.work__txt span {
    font-weight: 600;
}

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

/* .topics pc */
@media screen and (min-width: 900px) {
    .section--topics {
        padding: 80px 34px 0px;
        position: relative;
        display: flex;
        align-content: space-between;
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .topics__title {
        width: 470px;
    }

    .work2__orange {
        border-bottom: 2px solid #FDA923; 
        color: #FDA923;
    }

    .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: 10px; */
        width: max-content;
        padding-left: 10px;
    }

    .work__Secondtitle br{
        display: none;
    }
    
    .work__txt {
        font-family: "Noto Sans JP";
        font-size: 1.1rem;
        line-height: 2; 
        text-align: left;
        margin: 25px auto 0;
        padding: 0 4%;
    } 
    
    .work__txt span {
        font-weight: 600;
    }
    
    .section--topics img {
        width: 473px;
        height: 238px;
        border-radius: 20px;
        margin: 25px 0 0 42px;
        text-align: center;
    }
}


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

.service__sheet {
    border-radius: 20px;
    background-color: #FFFCEB;
    padding: 37px 22px 228px;
    position: relative;
    margin-top: 46px;
}

.service__sheet2 {
    border-radius: 20px;
    background-color: #FFFCEB;
    padding: 37px 22px 228px;
    position: relative;
    margin-top: 46px;
}

.service__sheet3,
.service__sheet4,
.service__sheet5 {
    border-radius: 20px;
    background-color: #FFFCEB;
    padding: 37px 22px 228px;
    position: relative;
    margin-top: 46px;
}

.service__sheet::before {
    left: 0px;
    top: -38px;
    display: block;
    content: "";
    background-image: url(../images/work1_no1.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 79px;
    height: 79px;
    position: absolute;
    background-position: left 0px, top 20px;
}

.service__sheet2::before {
    left: 0px;
    top: -38px;
    display: block;
    content: "";
    background-image: url(../images/work2_no2.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 79px;
    height: 79px;
    position: absolute;
    background-position: left 0px, top 20px;
}

.service__sheet3::before {
    left: 0px;
    top: -38px;
    display: block;
    content: "";
    background-image: url(../images/work2_no3.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 79px;
    height: 79px;
    position: absolute;
    background-position: left 0px, top 20px;
}

.service__sheet4::before {
    left: 0px;
    top: -38px;
    display: block;
    content: "";
    background-image: url(../images/work2_no4.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 79px;
    height: 79px;
    position: absolute;
    background-position: left 0px, top 20px;
}

.service__sheet5::before {
    left: 0px;
    top: -38px;
    display: block;
    content: "";
    background-image: url(../images/work2_no5.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 79px;
    height: 79px;
    position: absolute;
    background-position: left 0px, top 20px;
}

.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__Sitem {
    font-family: "Noto Sans JP";
    font-size: 1rem;
    line-height: 2;
}
.service__item:first-of-type {
    margin-top: 0px;
}

.service__list {
    color: #4F4844;
    font-family: "Noto Sans JP";
    font-size: 1.62rem;
    font-weight: 500;
    line-height: normal;
    text-align: center;
    position: relative;
}

.service__subtitle {
    font-size: 1.1rem;
    margin-top: 24px;
    text-align: center;
}

.service__sheet4 .service__subtitle, 
.service__sheet5 .service__subtitle {
    font-size: 1.1rem;
    margin-top: 24px;
    text-align: left;
}

.service__naiyou {
    margin-top: 35px;
} 

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

.brPc {
    display: none;
}

.service__list::after {
    background-image: url(../images/work2_1.png);
    content: '';
    display: block;
    background-repeat: no-repeat;
    background-size: contain;
    width: 180px;
    height: 164px;
    position: absolute;
    left: 50%;
    top: 333px;
    transform: translateX(-50%);
}

.service__list2,
.service__list3,
.service__list4, 
.service__list5 {
    color: #4F4844;
    font-family: "Noto Sans JP";
    font-size: 1.62rem;
    font-weight: 500;
    line-height: normal;
    text-align: center;
    position: relative;
}

.service__list2::after {
    background-image: url(../images/work2_2.png);
    content: '';
    display: block;
    background-repeat: no-repeat;
    background-size: contain;
    width: 207px;
    height: 159px;
    position: absolute;
    left: 50%;
    top: 333px;
    transform: translateX(-50%);
}

.service__setumei {
    color: #4F4844;
    font-family: "Noto Sans JP";
    font-size: 1.62rem;
    margin-top: 25px;
}

.service__setumeiS {
    font-size: 1.1rempx;
    margin-top: 12px;
}

.service__list3::after {
    background-image: url(../images/work2_3.png);
    content: '';
    display: block;
    background-repeat: no-repeat;
    background-size: contain;
    width: 261px;
    height: 185px;
    position: absolute;
    left: 50%;
    top: 338px;
    transform: translateX(-50%);
}

.service__list4::after {
    background-image: url(../images/work2_4.png);
    content: '';
    display: block;
    background-repeat: no-repeat;
    background-size: contain;
    width: 149px;
    height: 157px;
    position: absolute;
    left: 50%;
    top: 302px;
    transform: translateX(-50%);
}

.service__list5::after {
    background-image: url(../images/work2_5.png);
    content: '';
    display: block;
    background-repeat: no-repeat;
    background-size: contain;
    width: 200px;
    height: 185px;
    position: absolute;
    left: 50%;
    top: 270px;
    transform: translateX(-50%);
}

.service__txt:last-of-type {
    margin-top: 25px;
    padding: 0 4%;
}

/* .service pc */
@media screen and (min-width: 900px) {
    .section--service {
        padding: 80px 0px;
    }
    
    .service__all {
        display: flex;
        gap: 55px;
        margin-top: 40px;
        justify-content: space-around;
        flex-wrap: wrap;
    }

    .service__sheet {
        border-radius: 20px;
        background-color: #FFFCEB;
        padding: 37px 22px 228px;
        position: relative;
        margin-top: 46px;
        width: 338px;

    }
    
    .service__sheet2 {
        border-radius: 20px;
        background-color: #FFFCEB;
        padding: 37px 22px 228px;
        position: relative;
        margin-top: 46px;
        width: 338px;
    }
    
    .service__sheet3  {
        border-radius: 20px;
        background-color: #FFFCEB;
        padding: 37px 22px 228px;
        position: relative;
        margin-top: 46px;
        width: 338px;
    }

    .service__sheet4,
    .service__sheet5 {
        border-radius: 20px;
        background-color: #FFFCEB;
        padding: 37px 22px 228px;
        position: relative;
        margin-top: 46px;
        width: 338px;
    }
    
    .service__sheet::before {
        left: 0px;
        top: -38px;
        display: block;
        content: "";
        background-image: url(../images/work1_no1.png);
        background-repeat: no-repeat;
        background-size: contain;
        width: 79px;
        height: 79px;
        position: absolute;
        background-position: left 0px, top 20px;
    }
    
    .service__sheet2::before {
        left: 0px;
        top: -38px;
        display: block;
        content: "";
        background-image: url(../images/work2_no2.png);
        background-repeat: no-repeat;
        background-size: contain;
        width: 79px;
        height: 79px;
        position: absolute;
        background-position: left 0px, top 20px;
    }
    
    .service__sheet3::before {
        left: 0px;
        top: -38px;
        display: block;
        content: "";
        background-image: url(../images/work2_no3.png);
        background-repeat: no-repeat;
        background-size: contain;
        width: 79px;
        height: 79px;
        position: absolute;
        background-position: left 0px, top 20px;
    }
    
    .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: 0 auto 0;
        padding: 0 4%;
        width: max-content;
    }
    
    .service__Sitem {
        font-family: "Noto Sans JP";
        font-size: 1rem;
        line-height: 2;
        margin-top: 15px;
    }
    .service__item:first-of-type {
        margin-top: 0px;
    }
    
    .service__list {
        color: #4F4844;
        font-family: "Noto Sans JP";
        font-size: 1.62rem;
        font-weight: 500;
        line-height: normal;
        text-align: center;
    }
    
    .service__subtitle {
        font-size: 1.1rem;
        margin-top: 24px;
        text-align: center;
    }
    
    .service__naiyou {
        margin-top: 0;
    }

    .service__txt {
        font-family: "Noto Sans JP";
        font-size: 1rem;
        line-height: 2;
        margin-top: 35px auto 0;
        text-align: center;

    }
    
    .brPc {
        display: block;
    }

    .service__list2,
    .service__list3  {
        color: #4F4844;
        font-family: "Noto Sans JP";
        font-size: 1.62rem;
        font-weight: 500;
        line-height: normal;
        text-align: center;
    }

    .service__list::after {
        background-image: url(../images/work2_1.png);
        content: '';
        display: block;
        background-repeat: no-repeat;
        background-size: contain;
        width: 180px;
        height: 164px;
        position: absolute;
        left: 50%;
        top: 353px;
        transform: translateX(-50%);
    }   
    
    .service__list2::after {
        width: 207px;
        height: 159px;
        position: absolute;
        left: 50%;
        top: 356px;
        transform: translateX(-50%);
    }
    
    .service__setumei {
        color: #4F4844;
        font-family: "Noto Sans JP";
        font-size: 1.62rem;
        margin-top: 25px;
    }
    
    .service__setumeiS {
        font-size: 1.1rempx;
        margin-top: 12px;
    }
    
    .service__list3::after {
        background-image: url(../images/work2_3.png);
        content: '';
        display: block;
        background-repeat: no-repeat;
        background-size: contain;
        width: 261px;
        height: 185px;
        position: absolute;
        left: 50%;
        top: 327px;
    }
    
    .service__txt:last-of-type {
        margin-top: 25px;
        padding: 0 4%;
    }

    .service__list4::after {
        background-image: url(../images/work2_4.png);
        content: '';
        display: block;
        background-repeat: no-repeat;
        background-size: contain;
        width: 149px;
        height: 157px;
        position: absolute;
        left: 50%;
        top: 322px;
        transform: translateX(-50%);
    }

    .service__list5::after {
        background-image: url(../images/work2_5.png);
        content: '';
        display: block;
        background-repeat: no-repeat;
        background-size: contain;
        width: 200px;
        height: 185px;
        position: absolute;
        left: 50%;
        top: 305px;
        transform: translateX(-50%);
    }
}
/* pc 900px */


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

.open__sheet {
    border-radius: 20px;
    background-color: rgba(184, 219, 255, 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;
}

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

/* .open pc */
@media screen and (min-width: 900px) {
    .section--open {
        padding: 0;
    }
    
    .open__sheet {
        border-radius: 20px;
        background-color: rgba(184, 219, 255, 0.50);
        padding: 40px;
    }
    
    .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;
    }
}
/* pc 900px*/


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

.place__sheet {
    border-radius: 20px;
    background-color: rgba(184, 219, 255, 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: center;
    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;
    position: absolute;
    transform: translateX(-50%);
}

/* .open pc */
@media screen and (min-width: 900px) {
    .section--place {
        padding: 0px;
    }
    
    .place__sheet {
        border-radius: 20px;
        background-color: rgba(184, 219, 255, 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;
    }  
    
    .brSp {
        display: none;
    }

    .place__item:last-of-type {
        margin: 16px 0 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: 79%;
        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_n1 {
    display: block;
    content: '';
    width: 345px;
    height: 69px;
    padding: 5px 13px; 
    border-radius: 50px;
    background: var(--primary-green);
    /* 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;
    position: relative;
} 

.btn_n1::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: 50px; 
    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;
        margin-top: 80px;
    }
    
    .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_n1 {
        display: block;
        content: '';
        width: 345px;
        height: 69px;
        padding: 5px 13px; 
        border-radius: 50px;
        background: var(--primary-green);
        /* 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_n1::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: 50px; 
        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%) 
    }
}