@charset "UTF-8";

/* 400のウェイトを適用するクラス */
.zen-maru-gothic-regular {
    font-family: "Zen Maru Gothic", sans-serif; /* sans-serifに変更 */
    font-weight: 400;
    font-style: normal;
}

/* 500のウェイトを適用するクラス */
.zen-maru-gothic-medium {
    font-family: "Zen Maru Gothic", sans-serif; /* sans-serifに変更 */
    font-weight: 500;
    font-style: normal;
}

/* 全体にフォント指定 */
body {
    font-family: "Zen Maru Gothic", sans-serif;
    font-weight: 400; /* デフォルトのフォントウェイト指定 */
    color: #4b4b4b;
    background-color: #FFFFFF;
    margin: 0;
}

.siteheader{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
}

.fv_logo{
    width: auto;
    height: 50px;
}

@media screen and (min-width:1000px) {
    .fv_logo{
        width:auto;
        height: 60px;
    }
}

.fv__inner{
    max-width: 1440px;
    margin: 0 auto;
    background-image: url(../img/lpdark/fv/fv_back.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center top;
}
@media screen and (min-width:1000px) {
    .fv__inner{
    background-size: cover;
    height: 880px;
    }
}

.fv__title{
    display: flex;
    flex-direction: column;
}

.fv_kidsdesign {    
    padding-top: 16px; /* スマホ用の上パディング */
    padding-left: 16px;
    padding-bottom: 64px;
    order: 2;
}

.fv_catch {
    padding-top: 87px; /* スマホ用の上パディング */
    padding-left: 8px;
    order: 1;
}

/* PC用のスタイル */
@media (min-width: 1000px) {
    .fv__title{
        flex-direction: column-reverse;
    }
    .fv_kidsdesign {
        padding-top:29px ;
        padding-left: 56px;
        padding-bottom: 0;
    }

    .fv_catch {
        padding-top: 16px;
        padding-left: 56px;
        padding-bottom: 56px;
    }
}

.fv_kidsdesign img{
    height: auto;
    width: 80px;
}
@media screen and (min-width:1000px) {
    .fv_kidsdesign img{
        width: 90px;
    }
}

.fv_catch img{
    width: 170px;
    height: auto;
}
@media screen and (min-width:1000px) {
    .fv_catch img{
    height: auto;
    width: 400px;
    }
}

.fv__pr{
    display: flex;
    justify-content: center;
    align-items: center;
}
@media screen and (min-width:1000px) {
    .fv__pr{
    display: block;
    padding-left: 48px;
    }
}

.fv__pr img{
    width: 80px;
    height: auto;
    margin: 8px 8px 16px;
}

@media screen and (min-width:420px) {
    .fv__pr img{
        margin-top: 32px;
    }
}
@media screen and (min-width:1000px) {
    .fv__pr img{
    width: 150px;
    height: auto;
    margin: 0 4px 56px;
    }
}

.fv__feature{
    display: flex;
    justify-content: center;
    align-items: center;
}
@media screen and (min-width:1000px) {
    .fv__feature{
    display: block;
    padding-left: 56px;
    }
}

.fv__feature ul{
    list-style-type: none;
}

.fv__feature li{
    display: flex;
    align-items: center;
    font-size: 16px;
    padding: 4px 0px 8px 40px;
    background-image: url(../img/lpdark/fv/check.png);
    background-repeat: no-repeat;
    background-position: 8px center;
    background-size: 25px 25px;
    height: 32px;
}
@media screen and (min-width:1000px) {
    .fv__feature li{
    font-size: 20px;
    background-size: 32px 32px;
    background-position: 0 center;
    padding-bottom: 10px;
    height: 40px;
    }
}

.fv__line{
    display: flex;
    justify-content: center;
    padding: 24px 0 40px;
}
@media screen and  (min-width:1000px){
    .fv__line{
    padding-top: 144px;
    }
}

.fv__line a{
    background-color: #06C755;
    font-size: 20px;
    color: #FFFFFF;
    font-weight: bold;
    text-decoration: none;
    border-radius: 50px;
    height: 60px;
    width: 320px;
    display: flex;
    column-gap: 8px;
    justify-content: center;
    align-items: center;
}
@media screen and (min-width:1000px) {
    .fv__line a{
        font-size: 28px;
        width: 474px;
        column-gap: 20px;
    }
}

.fv__line img{
    width: 35px;
    height: auto;
}

@media screen and (min-width:1000px) {
    .fv__line img{
    width: 40px;
    height:auto;
    }
}

.worry{
    text-align: center;
}

.worry h1{
    font-size: 20px;
    font-weight: 400;
    color: #4b4b4b;
    display: flex;
    justify-content: center;
    text-align: center;
}
@media screen and (min-width:1000px) {
    .worry h1{
        font-size: 32px;
    }
}

.worry figure{
    display: inline-block;
    margin: 0 auto;
}

.worry picture img {
    display: block; 
    margin: 0 auto; 
    padding-top: 40px;
}

@media (max-width: 999px) {
    .worry {
        background: linear-gradient(to bottom, #FFFFFF, #B9B9B9); /* 上から下へのグラデーション */
    }
}

.help{
    padding: 40px 0 24px;
    background: linear-gradient(to bottom, #FFFFFF, #FBFEEF);;
    text-align: center;
}

.help h1{
    font-size: 20px;
    font-weight: 400;
    color: #EF8F91;
    padding-bottom: 32px;
}
@media screen and (min-width:1000px) {
    .help h1{
    font-size: 32px;
    padding-bottom: 24px;
    }
}

.help p{
    font-size: 16px;
}
@media screen and (min-width:1000px) {
    .help p{
        font-size: 24px;
    }
    .help__break{
        display: none;
    }
}

.underline_1{
    background-image: url(../img/lpdark/help/underlline.svg);
    background-repeat: no-repeat;
    background-size: 100% 40px;
    display: inline-block;
}
.underline_2{
    background-image: url(../img/lpdark/help/underlline.svg);
    background-repeat: no-repeat;
    background-size: 200% 37px;
    display: inline-block;
}


.help__omoi{
    padding-bottom: 16px;
}

@media screen and (min-width:1000px) {
    .underline_1{
        background-size: 100% 56px;
    }
    .underline_2 {
        display: inline; /* spanをインライン表示にして1行にまとめる */
        background-image: none; /* 各spanの背景画像を解除 */
    }
}

.whats{
    padding: 24px 0;
    text-align: center;
    background-color: #FDEEF2;
}

.whats h1{
    font-size: 20px;
    padding-left: 16px;
    padding-bottom: 24px;
    font-weight: 400;
    display: flex;
    column-gap: 8px;
    align-items: center;
}

.whats h1 img{
    width: 27px;
    height: auto;
}
@media screen and (min-width:1000px) {
    .whats h1{
    font-size: 24px;
    padding-left: 56px;
    }
}

.whats p{
    font-size: 20px;
    font-weight: 500;
    text-align: center;
    padding-bottom: 20px;
}

@media screen and (min-width:1000px) {
    .whats__break{
        display: none;
    }
}

.whats figure{
    display: block;
    margin: 0 auto;
    padding-bottom: 8px;
}

.whats picture img {
    display: block; 
    margin: 0 auto;
    padding-bottom: 8px;
}

.whats__line{
    display: flex;
    justify-content: center;
    padding-top: 16px;
}

.whats__line a{
    background-color: #06C755;
    font-size: 20px;
    color: #FFFFFF;
    font-weight: bold;
    text-decoration: none;
    border-radius: 50px;
    height: 60px;
    width: 320px;
    display: flex;
    column-gap: 8px;
    justify-content: center;
    align-items: center;
}
@media screen and (min-width:1000px) {
    .whats__line a{
        font-size: 28px;
        width: 474px;
        column-gap: 20px;
    }
}

.whats__line img{
    width: 35px;
    height: auto;
}

@media screen and (min-width:1000px) {
    .whats__line img{
    width: 40px;
    height:auto;
    }
}

.scene{
    padding: 24px 0;
    text-align: center;
    background-color: #FBFFEF;
}

.scene h1{
    font-size: 20px;
    padding-left: 16px;
    padding-bottom: 24px;
    font-weight: 400;
    display: flex;
    column-gap: 8px;
    align-items: center;
}

.scene h1 img{
    width: 27px;
    height: auto;
}
@media screen and (min-width:1000px) {
    .scene h1{
    font-size: 24px;
    padding-left: 56px;
    }
}

.pc__only{
    font-size: 20px;
    font-weight: 400;
    padding-bottom: 24px;
}
@media screen and (max-width:999px) {
    .pc__only{
        display: none;
    }
}

.growup{
    padding: 20px 0 40px;
    text-align: center;
}
@media screen and (min-width:1000px) {
    .growup{
    padding-top: 40px;
    }
}

.growup h1{
    font-size: 20px;
    font-weight: 400;
    color: #EF8F91;
    padding-bottom: 32px;
}
@media screen and (min-width:1000px) {
    .growup h1{
        font-size: 32px;
        padding-bottom: 32px;
    }
}

.voice{
    text-align: center;
    padding-bottom: 40px;
}

.voice h1{
    font-size: 20px;
    padding-left: 16px;
    padding-bottom: 24px;
    font-weight: 400;
    display: flex;
    column-gap: 8px;
    align-items: center;
}

.voice h1 img{
    width: 27px;
    height: auto;
}

@media screen and (min-width:1000px) {
    .voice h1{
    font-size: 24px;
    padding-left: 56px;
    }
}

.voice h2{
    font-size: 20px;
    font-weight: 400;
    padding-bottom: 40px;
}

.voice figure{
    padding-bottom: 32px;
}

.voice picture img {
    padding-bottom: 32px;
}

.voice p{
    font-size: 16px;
}

@media screen and (min-width:1000px){
    .voice__break{
        display: none;
    }
}

.teacher{
    padding-bottom:24px ;
    text-align: center;
}
@media screen and (min-width:1000px) {
    .teacher{
    padding-bottom: 40px;
    }
}

.teacher__img img{
    text-align: center;
    width: 120px;
    height: auto;
    padding: 24px 0 10px;
}

.teacher figcaption{
    font-size: 16px;
    padding-bottom: 24px;
}

.teacher p{
    font-size: 20px;
    text-align: left;
    margin: 0 auto;
    padding: 0 19px;
}

@media screen and (min-width:1000px) {
    .teacher__img{
        display: none;
    }
    figcaption{
        display: none;
    }
    .teacher__message{
        display: none;
    }
}

.only_pc{
    display: block;
    margin: 0 auto;
}
@media screen and (max-width:999px) {
    .only_pc{
        display: none;
    }
}

.faq{
    background-color: #FDEEF2;
    padding: 24px 0 34px;
}

.faq__title_heading{
    font-size: 20px;
    padding-left: 16px;
    padding-bottom: 24px;
    font-weight: 400;
    display: flex;
    column-gap: 8px;
    align-items: center;
}

.faq h1 img{
    width: 27px;
    height: auto;
}

@media screen and (min-width:1000px) {
    .faq h1{
    font-size: 24px;
    padding-left: 56px;
    }
}

.faq__list{
    max-width: 292px;
    margin: 0 auto;
}
@media screen and (min-width:1000px) {
    .faq__list{
        max-width: 421px;
    }
}
.faq__list li{
    list-style-type: none;
    background-color: #FFFFFF;
    border-radius: 40px;
    margin-bottom: 18px;
    padding-block: 12px 12px;
    transition-duration: 500ms;
    &:last-of-type{
        margin-bottom: 0;
    }
    input{
        display: none;
    }
    label{
        display: block;
        position: relative;
        border-radius: 25px 25px 0 0;
        padding: 0 52px 0 68px;
        font-size: 16px;
        text-align: justify;
            &::before{
            content: "Q";
            color: #EF8F91;
            font-size: 18px;
            position: absolute;
            inset: 0 auto 0 30px;
            margin: auto;
            font-weight: 500;
            }
            &::after{
                content: "";
                display: block;
                width: 20px;
                height: 20px;
                background-image: url(../img/lpdark/faq/migi.png);
                background-repeat: no-repeat;
                background-size: contain;
                background-position: center;
                transition-duration: 500ms;
                transform: rotate(90deg);
                position: absolute;
                inset: 0 16px 0 auto;
                margin: auto;
            }
        }
        input:checked + label{
            &::after{
                transform: rotate(-90deg);
            }
        }
        div{
            position: relative;
            padding: 0 18px 0 68px;
            max-height: 0;
            overflow: hidden;
            transition-duration: 500ms;
            text-align: justify;
            &::before{
                content: "A";
                color: #EF8F91;
                font-size: 18px;
                position: absolute;
                inset: 0 auto auto 30px;
                font-weight: 500;
            }
        }
        input:checked ~ div{
            margin-top: 26px;
            max-height: 400px;
        }
}

.cta{
    padding: 36px 0 16px;
    text-align: center;
    background-image: url(../img/lpdark/cta/cta_back.svg);
    background-color: #FCD8E3;
    background-repeat: no-repeat;
    background-size: cover;
}

.cta__text1{
    font-size: 20px;
    font-weight: 500;
    padding-bottom: 20px;
}

.cta__text2{
    font-size: 20px;
    font-weight: 500;
    padding-bottom: 32px;
}

@media screen and (min-width:1000px) {
    .cta br{
        display: none;
    }
    .cta__text1,.cta__text2{
        font-size: 24px;
    }
}

.cta__attention{
    font-size: 16px;
    padding-top: 8px;
}

.sitefooter{
    background-color: #E7E5E5;
    padding: 24px 0 8px 16px;
}



.sitefooter__copy{
    text-align: center;
    font-size: 12px;
}

.sitefooter ul{
    list-style-type: none ;
}

.sitefooter__sns {
    text-align: left; 
    margin-bottom: 24px; 
}

@media screen and (min-width:1000px) {
    .sitefooter__sns{
        margin-left: 80px;
    }
}

.sitefooter__snsmenu {
    padding: 0;
    display: flex; 
    justify-content: flex-start;
    gap: 20px; /* アイテム間のスペースを設定 */
}

.sitefooter__snsmenu li {
    display: inline-block;
}

.sitefooter__snsmenu img {
    width: 24px; 
    height: auto
}

/* スマホ用のスタイル（縦並び） */
.sitefooter__linkitem {
    display: flex;
    flex-direction: column; /* 縦に並べる */
    padding: 0;
    padding-left: 24px;
    margin: 0;
    list-style: none;
}

/* リンクアイテムの余白を設定 */
.sitefooter__linkitem li {
    margin-bottom: 8px; /* リンクアイテム間の余白 */
}

.sitefooter__linkitem a{
    text-decoration: none;
    color: #4b4b4b;
    font-size: 14px;
}

/* PC用のスタイル（1000px以上で2つずつ3列にする） */
@media screen and (min-width: 1000px) {
    .sitefooter__linkitem {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 3列レイアウト */
        column-gap: 24px; /* 各列間の余白 */
        row-gap: 16px; /* 各行間の余白 */
        padding-left: 80px;
    }
}