@charset "utf-8";
/* ====================
common
==================== */
html {
    font-size: 62.5%;
}

body {
    font-family:
        'Noto Sans JP',
        'Noto Sans',
        'Noto Serif JP';
    font-style: normal;
    color: #2F2F2F;
    background-color: #fff;
    line-height: 1.5;
}

img {
    max-width: 100%;
    height: auto;
}

/* ====================
header
==================== */

.header{
    display: flex;
    width: 375px;
    height: 60px;
    padding: 10px;
    justify-content: space-between;
    align-items: center;
}

/* nav 初期表示 */
.nav {
    background: #FFFCF3;
    width: 100%;
    height: 100vh;
    padding: 24px 6.4%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform 0.4s;
}

.nav__header {
    display: flex;
    height: 50px;
    padding: 10px;
    justify-content: space-between;
    align-items: center;
}

.nav__list {
    margin-top: 29px;
}

.nav__item {
    display: flex;
    height: 45px;
    align-items: center;
    margin-top: 40px;
    gap: 30px;
}

.nav__item img {
    display: inline-block;
    width: 19px;
    height: 33px;
    margin-right: 30px;
}

.nav__txt{
    color: #C75437;
    font-family: "Noto Sans";
    font-size: 3.2rem;
    font-weight: 400;
}

.nav__subtxt{
    display: none;
}

/* nav.active表示 */
.nav.active {
    transform: translateX(0);
}

.logo__pc{
    display: none;
}

.header__btn {
    display: block;
    width: 50px;
    height: 50px;
    cursor: pointer;
    position: absolute;
    margin-top: 5px;
    right: 6.4%;
}

/* .header pc */
@media screen and (min-width:769px) {
    .header {
        display: flex;
        width: 1335px;
        height: 120px;
        padding: 40px;
        justify-content: space-between;
        align-items: center;
    }

    .logo__sp {
        display: none;
    }

    .logo__pc{
        display: block;
    }

    .nav {
        background: transparent;
        width: auto;
        height: auto;
        position: static;
        transform: translate(0);
        display: flex;
        padding: 10px;
        gap: 10px;
    }

    .nav__list {
        margin-top: 0;
        display: flex;
    }

    .nav__item {
        margin-top: 0;
        margin-left: 40px;
        font-weight: 400;
        color: #C75437;
        font-size: 3.2rem;
        line-height: normal;
        display: flex;
        flex-direction: column;
    }

    .nav__subtxt{
        display: block;
        color:#053820;
        font-family: "Noto Serif JP";
        font-size: 1.6rem;
        margin-top: -20px;
    }

    .nav__header {
        display: none;
    }

    .nav__item img {
        display: none;
        margin-right: 0;
    }

    .header__btn {
        display: none;
    }

}/* pc 769px */

/* ==================
main
================= */
/* article header */
.article__header{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.mainImg{
    width: 100%;
}

.mainImg__pc{
    display: none;
}

.mainImg__sp{
    width: 100%;
    margin-top: 20px;
}

.mainTopics{
    background-color:#F2FFEE;
    padding: 20px 0px;
    margin-top: 5px;
}

.mainTopics__txt{
    margin-left: 12px;
    color:#053820;
    text-shadow: 0px 2px 4px rgba(3, 33, 19, 0.51);
    font-size: 1.6rem;
    font-family: "Noto Serif JP";
    line-height: 40px;
}

.btn__trial{
    border: 5px solid #D8AD04;
    background-color:#AA1616;
    box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    width: 350px;
    height: 60px;
    padding: 15px 26px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    color: #FFF;
    font-family: "Noto Serif JP";
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 50px;
    margin: 12px 5px;
}

/* article header pc */
@media screen and (min-width:769px){
    .mainImg .mainImg__pc {
        display: block;
        margin-top: 41px;
        width: 100%;
    }

    .mainImg .mainImg__sp {
        display: none;
    }

    .spBr{
        display: none;
    }

    .mainTopics{
        display: flex;
        padding: 40px 0px;
        justify-content: center;
        align-items: center;
        width: 1440px;
        margin: 30px;
    }

    .mainTopics__txt{
        margin: 70px 213px;
        text-align: center;
        font-size: 2.4rem;
        line-height: 50px;
    }

    .btn__trial{
        width: 452px;
        height: 80px;
        font-size: 3.6rem;
        font-weight: 700;
    }
}

/* about */
.section--about{
    display: flex;
    height: 850px;
    padding: 0px 10px;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.aboutTitle{
    display: flex;
    width: 300px;
    height: 50px;
    padding: 9px;
    background-color: #79BD25;
    margin-top: 20px;
    margin-left: -50px;
    align-items: center;    
}

.aboutTitle__txt{
    color: #FFF;
    text-align: center;
    font-family: "Noto Serif JP";
    font-size: 2rem;
}

.highlight{
    color:#FEF968;
    font-family: "Noto Serif JP";
    font-size: 3.2rem;
    font-weight: 600;
    line-height: 50px;
}

.about__list{
    border: 1px solid #C75437;
    background-color:#FFFCF3;
    display: flex;
    width: 350px;
    height: 750px;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.aboutItem__topic{
    display: flex;
    gap: 10px;
}

.number{
    display: flex;
    width: 50px;
    height: 50px;
    justify-content: center;
    align-items: center;
    background-color:#C75437;
    color: #EDDB59;
    font-family: "Noto Serif JP";
    font-size: 2.4rem;
    font-style: normal;
    font-weight: 700;
    line-height: 50px;
}

.aboutItem__title{
    color:#D8AD04;
    font-family: "Noto Serif JP";
    font-size: 2rem;
    font-weight: 700;
    line-height: 50px;
}

.aboutItem__txt{
    color: #000;
    font-family: "Noto Sans JP";
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 25px;
    margin: 0 20px;
}

/* about pc */
@media screen and (min-width:769px){
    .section--about{
        display: flex;
        padding: 10px 0px;
        align-items: flex-start;
        gap: 20px;
    }

    .aboutTitle{
        margin-top: 60px;
        margin-left: 20px;
        width: 400px;
        height: 60px;
    }

    .aboutTitle__txt{
        font-size: 2.4rem;
    }

    .highlight{
        font-size: 4.8rem;
    }

    .about__list{
        width: 1400px;
        padding: 0px 10px;
        margin: 20px 10px;
        align-items: flex-start;
    }

    .aboutItem{
        display: flex;
        width: 1000px;
        height: 170px;
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .aboutItem__topic{
        display: flex;
        width: 906px;
        padding: 0px 8px;
        gap: 42px;
    }

    .number{
        font-size: 3.6rem;
    }

    .aboutItem__title{
        width: 700px;
        font-size: 3.6rem;
    }

    .aboutItem__txt{
        font-size: 2rem;
        width: 1000px;
    }
    

}

/* trial */
.section--trial{
    display: flex;
    width: 375px;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin: 0 auto;
}

.trial__subtitle{
    border: 1px solid #C75437;
    background-color: #FFF;
    color: #C75437;
    font-family: "Noto Sans JP";
    font-size: 1.5rem;
    line-height: 30px;
    display: flex;
    width: 300px;
    justify-content: center;
    align-items: center;
}

.trial__title{
    display: flex;
    width: 360px;
    justify-content: center;
    align-items: center;
    gap: 30px;
}

.trial__category{
    background-color: #D8AD04;
    color: #FFF;
    font-family: "Noto Serif JP";
    font-size: 2rem;
    font-weight: 700;
    line-height: 50px;
    display: flex;
    width: 120px;
    padding: 0px 2px;
    justify-content: center;
    align-items: center;
}

.trial__titletxt{
    color: var(--about-btn, #AA1616);
    font-family: "Noto Serif JP";
    font-size: 2rem;
    font-weight: 700;
    line-height: 50px;
}

.trial__list{
    display: flex;
    height: 1100px;
    flex-direction: column;
    align-items: center;
}

.trial__item{
    padding: 13px 15px;
    align-items: center;
    gap: 25px;
}

.trialImg__pc{
    display: none;
}

.trial__location{
    margin-top: 25px;
}

.trial__location,
.trial__price{
    color: #053820;
    font-family: "Noto Sans JP";
    font-size: 1.5rem;
    font-style: normal;
    line-height: 50px;
}

.trial__txt{
    color: #053820;
    font-family: "Noto Serif JP";
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 40px;
    border-bottom: 1px solid #053820;
}

/* trial pc */
@media screen and (min-width:769px) {
    .section--trial{
        margin: 0 auto;
        margin-top: 39px;
        display: flex;
        width: 1440px;
        padding: 4px 20px;
        gap: 15px;
    }

    .trial__subtitle{
        font-family: Inter;
        font-size: 2rem;
        display: flex;
        width: 600px;
        justify-content: center;
        align-items: center;
    }

    .trial__title{
        display: flex;
        align-items: center;
        gap: 50px;
        width: 700px;
    }

    .trial__category{
        display: flex;
        width: 250px;
        font-size: 3.2rem;
    }

    .trial__titletxt{
        font-size: 3.2rem;
        font-weight: 600;
    }

    .trial__list{
        flex-direction: row;
        width: 1400px;
        height: 569px;
        justify-content: space-between;
    }

    .trial__item{
        display: flex;
        width: 700px;
        padding: 0px 40px;
        flex-direction: column;
        justify-content: center;
        gap: 28px;
    }

    .trialImg__sp{
        display: none;
    }

    .trialImg__pc{
        display: block;
    }

    .trial__content{
        display: flex;
        height: 160px;
        padding: 12px 0px;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: -149px;
        align-self: stretch;
    }

    .trial__location,
    .trial__price{
        font-size: 1.6rem;
    }

    .trial__txt{
        font-size: 2rem;
        line-height: 50px; /* 250% */
    }
}

/* description 1 */
.section--description1{
    display: flex;
    width: 375px;
    padding: 0px 10px;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    background-color:#FFFCF3;
    margin: 0 auto;
    margin-top: 20px;
}

.desc1__subtitle{
    width: 290px;
    height: 50px;
    justify-content: center;
    align-items: center;
    border: 1px solid #C75437;
    background-color: #FFF;
    color: #C75437;
    text-align: center;
    font-family: Inter;
    font-size: 1.5rem;
    font-weight: 400;
    margin-top: 10px;
}

.desc1__titletxt{
    color: var(--about-btn, #AA1616);
    text-align: center;
    font-family: "Noto Serif JP";
    font-size: 3.2rem;
    font-weight: 600;
    line-height: 50px;
}

.desc1Img__pc{
    display: none;
}

.desc1__txt{
    font-family: "Noto Sans JP";
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 30px;
}

/* desc1 pc */
@media screen and (min-width:769px){
    .desc1Img__sp{
        display: none;
    }

    .desc1Img__pc{
        display: block;
    }

    .section--description1{
        width: 1386px;
    }

    .desc1__subtitle{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 800px;
        font-size: 2rem;
        font-weight: 400;
    }

    .desc1__titletxt{
        color: var(--about-btn, #AA1616);
        font-size: 4.8rem;
        font-weight: 600;
    }

    .spBr{
        display: none;
    }

    .desc1__topic{
        display: flex;
    }

    .desc1__txt{
        font-size: 2rem;
        font-weight: 400;
        line-height: 30px;
        display: flex;
        width: 840px;
        height: 318px;
        flex-direction: column;
        justify-content: center;
    }
}

/* description 2 */
.section--description2{
    display: flex;
    width: 375px;
    padding: 15px 0px;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 0 auto;
    margin-top: 10px;
}

.desc2__title{
    border: 5px solid #FEFA83;
    background:#1BB86F;
    display: flex;
    width: 350px;
    justify-content: center;
    align-items: center;
    color: #FFF;
    font-family: "Noto Sans JP";
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 50px;
}

.desc2__list{
    background-color: #F2FFEE;
    display: flex;
    padding: 20px 0px;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.desc2__item1{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.desc2__topic1{
    background-color: #B6FADA;
    display: flex;
    width: 172px;
    height: 172px;
    padding: 10px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.desc2__title1{
    color:#053820;
    text-align: center;
    font-family: "Noto Sans JP";
    font-size: 2rem;
    font-weight: 400;
    line-height: 50px;
}

.desc2__txt1{
    display: flex;
    width: 140px;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    background-color:#F2FFF9;;
    color:#000;;
    font-family: "Noto Sans JP";
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 30px; 
}

.desc2__subtxt1{
    border: 1px solid #053820;
    background-color: #FFF;
    padding: 0 16px;
    color: #053820;
    text-align: center;
    font-family: "Noto Sans JP";
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 30px;
}

.desc2__item2{
    display: flex;
    width: 374px;
    justify-content: center;
    align-items: flex-start;
    align-content: flex-start;
    gap: 10px;
    flex-wrap: wrap;
}

.desc2__topic2{
    background-color:#F9C556;
    display: flex;
    width: 172px;
    height: 172px;
    padding: 10px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.desc2__title2{
    color:#C05438;
    font-family: "Noto Sans JP";
    font-size: 2rem;
    font-style: normal;
    line-height: 50px;
}

.desc2__txt2{
    display: flex;
    width: 140px;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    background-color: #FFF1D3;
    color:  #C05438;
    font-family: "Noto Sans JP";
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 30px; 
}

.desc2__topic3{
    display: flex;
    width: 172px;
    height: 172px;
    padding: 10px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color:#FFB8B8;
}

.desc2__title3{
    color: #DE1717;
    text-align: center;
    font-family: "Noto Sans JP";
    font-size: 2rem;
    font-weight: 400;
    line-height: 50px;
}

.desc2__txt3{
    border-radius: 20px;
    background-color:#FFE6E6;
    display: flex;
    height: 30px;
    justify-content: center;
    align-items: center;
    color: #DE1717;
    text-align: center;
    font-family: "Noto Sans JP";
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 30px; 
    width: 140px;
}

.desc2__subtxt2{
    border: 1px solid #053820;
    background-color: #FFF;
    display: flex;
    width: 310px;
    height: 30px;
    padding: 10px 6px;
    justify-content: center;
    align-items: center;
    color: #053820;
    text-align: center;
    font-family: "Noto Sans JP";
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 30px;
}

.desc2__item3{
    display: flex;
    width: 374px;
    justify-content: center;
    align-items: flex-start;
    align-content: flex-start;
    gap: 10px;
    flex-wrap: wrap;
}

.desc2__topic4{
    background-color:#FEF968;
    display: flex;
    width: 172px;
    height: 172px;
    padding: 10px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.desc2__title4{
    color:#888401;
    font-family: "Noto Sans JP";
    font-size: 2rem;
    font-style: normal;
    line-height: 50px;
}

.desc2__txt4{
    display: flex;
    width: 140px;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    background-color: #FFFEE5;
    color:  #888401;
    font-family: "Noto Sans JP";
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 30px; 
}

.desc2__topic5{
    display: flex;
    width: 172px;
    height: 172px;
    padding: 10px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #E1BEFF;
}

.desc2__title5{
    color: #6400BC;
    text-align: center;
    font-family: "Noto Sans JP";
    font-size: 2rem;
    font-weight: 400;
    line-height: 50px;
}

.desc2__txt5{
    border-radius: 20px;
    background-color:#F8EFFF;
    display: flex;
    height: 30px;
    justify-content: center;
    align-items: center;
    color: #6400BC;
    text-align: center;
    font-family: "Noto Sans JP";
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 30px; 
    width: 140px;
}

.desc2__subtxt3{
    display: flex;
    padding: 10px 6px;
    justify-content: center;
    align-items: center;
    border: 1px solid #053820;
    background: #FFF;
    color: var(--053820, #053820);
    text-align: center;
    font-family: "Noto Sans JP";
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 30px;
}

.desc2__check{
    background-color: #ffF;
}

/* desc2 pc */
@media screen and (min-width:769px) {
    .section--description2{
        display: flex;
        width: 1440px;
        padding: 26px 20px;
        align-items: center;
        gap: 10px;
    }

    .desc2__title{
        display: flex;
        width: 600px;
        height: 60px;
        font-family: Inter;
        font-size: 2.4rem;
        justify-content: center;
        align-items: center;
    }

    .desc2__list{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        padding: 10px 0px;
        gap: 13px;
        width: 1400px;
    }

    .desc2__item1{
        display: flex;
        width: 270px;
        height: 430px;
        padding: 25px 0px;
        flex-direction: column;
        align-items: center;
        gap: 60px;
    }
    
    .desc2__topic1,
    .desc2__topic2,
    .desc2__topic3,
    .desc2__topic4,
    .desc2__topic5{
        display: flex;
        width: 250px;
        height: 250px;
        padding: 10px 16px;
        gap: 18px;
    }
    
    .desc2__title1,
    .desc2__title2,
    .desc2__title3,
    .desc2__title4,
    .desc2__title5{
        font-size: 3.2rem;
        line-height: 50px;
    }
    
    .desc2__txt1,
    .desc2__txt2,
    .desc2__txt3,
    .desc2__txt4,
    .desc2__txt5{
        display: flex;
        width: 218px;
        font-size: 2rem;
        line-height: 50px;
    }

    .desc2__item2,
    .desc2__item3{
        display: flex;
        width: 540px;
        height: 430px;
        padding: 25px 0px;
        justify-content: center;
        align-items: flex-start;
        align-content: flex-start;
        gap: 60px 30px;
    }
    
    .desc2__subtxt1{
        display: flex;
        width: 220px;
        padding: 10px 6px;
        justify-content: center;
        align-items: center;
        font-size: 2rem;
    }

    .desc2__subtxt2{
        display: flex;
        width: 500px;
        padding: 10px 6px;
        justify-content: center;
        font-size: 2rem;
        height: 50px;
    }

    .desc2__subtxt3{
        font-family: Inter;
        font-size: 2rem;
        line-height: 1.4;
    }

}

/* Q&A */
.section--QA{
    display: flex;
    margin: 0 auto;
    margin-top: 28px;
    width: 375px;
    padding: 25px 10px;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    background-color:#FFFCF3;
}

.QA__title{
    color:  #AA1616;
    text-align: center;
    font-family: "Noto Serif JP";
    font-size: 4rem;
    font-style: normal;
    font-weight: 600;
    line-height: 50px; 
}

.QA__list{
    display: flex;
    width: 375px;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.QA__item{
    background: #FFF;
    box-shadow: 0px 2px 4px 0px rgba(3, 33, 19, 0.51);
    display: flex;
    width: 360px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.Q{
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 348px;
}

.Q__title{
    background-color:#D8AD04;
    display: flex;
    width: 50px;
    height: 50px;
    padding: 12px 0px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #000;
    text-align: center;
    font-family: "Noto Sans";
    font-size: 2.4rem;
    font-weight: 400;
    line-height: 50px;
}

.Q__txt{
    color: #000;
    font-family: "Noto Serif JP";
    font-size: 2.4rem;
    font-weight: 600;
    line-height: 50px;
    width: 288px;
}

.A{
    display: flex;
    align-items: center;
    gap: 10px;
}

.A__logo{
    border-radius: 50px;
    background-color: #AA1616;
    display: flex;
    width: 50px;
    height: 50px;
    padding: 12px 0px;
    justify-content: center;
    align-items: center;
    color: #FFF;
    text-align: center;
    font-family: "Noto Sans";
    font-size: 2.4rem;
    font-weight: 400;
    line-height: 50px;
}

.A__title{
    color: #000;
    font-family: "Noto Serif JP";
    font-size: 2.4rem;
    font-weight: 600;
    line-height: 50px;
}

.A__txt{
    color: #000;
    font-family: "Noto Sans JP";
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 30px;
    margin: 0 auto;
}

.A:last-of-type{
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.A__title:last-of-type{
    font-size: 2rem;
}

/* Q&A pc */
@media screen and (min-width:769px) {
    .section--QA{
        display:flex;
        height: 800px;
        width: 1420px;
        padding: 19px 35px;
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .QA__title{
        font-size: 6.4rem;
        margin-top: 39px;
    }
    
    .QA__list{
        display: flex;
        align-items: center;
        gap: 23px;
        margin-top: 48px;
    }

    .QA__item{
        height: 300px;
        width: 1350px;
        align-items: flex-start;
        gap: 23px;
    }

    .Q,
    .A{
        display: flex;
        padding: 0px 20px;
        align-items: center;
        gap: 30px;
        width: 1055px;
    }

    .Q__title{
        font-size: 3.6rem;
        width: 70px;
        height: 70px;
    }

    .Q__txt{
        font-size: 3.2rem;
        width: 955px;
        height: 55px;
        justify-content: center;
    }

    .A__logo{
        height: 70px;
        width: 70px;
        font-size: 3.6rem;
    }

    .A__title{
        font-size: 3.2rem;
        line-height: 50px; /* 156.25% */
    }

    .A__txt{
        font-size: 2rem;
        margin-left: 20px;
    }
}

/* ====================
footer
==================== */
.footer{
    display: flex;
    width: 240px;
    margin-top: 65px;
    padding: 8px 10px;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
}

.copy{
    color: #91806C;
    text-align: center;
    font-family: "Noto Sans JP";
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1
}

/* footer pc */
@media screen and (min-width:769px) {
    .footer{
        display: flex;
        flex-direction: row;
        width: 1330px;
        padding: 20px 40px;
        justify-content: space-between;
        align-items: center;
    }


}