/* 共通 -------------------------- */
:root{
    --white: #FFFFFF;
    --gray: #777777;
    --green: #43B6A3;
    --blue: #27AAE0;
    --text-blue: #2A79B0;
    --text-navy: #173E59;
    --title-dec: linear-gradient(90deg, #E9F6FC 0%, #E9F5F3 100%);
    --right-blue: #F5FAFC;
    --dark-blue: #4A8DBC;
    --gradient: linear-gradient(90deg, #27AAE0 0%, #43B6A3 100%);
    --gradient-blue: linear-gradient(0deg, #E9F6FC 65%, rgba(255, 255, 255, 0) 100%);
    --gradient-green: linear-gradient(180deg, #E9F5F3 65%, #FFFFFF 100%);
    --gradient-right: linear-gradient(90deg, #E9F6FC 0%, #E9F5F3 100%);
    --shadow-S: 5px 5px 5px 0px rgba(0, 0, 0, 0.25);
    --shadow-L: 0 0 20px 0px rgba(0, 0, 0, 0.25);
    --hov-tran: all 0.3s ease-in-out;
    --radius-S: 8px;
    --radius-L: 100px;
    --radius-circle: 50%;
    --l-spacing: 0.15em;
}

html{
    scroll-behavior: smooth;
}

body{
    font-family: "M PLUS 1", system-ui;
    color: var(--text-navy);
    font-weight: 500;
    letter-spacing: var(--l-spacing);
    font-size: clamp(0.875rem, 0.85rem + 0.13vw, 1rem);
}

.sp{
    display: none;
}

.title, .subtitle{
    font-family: "Zen Kaku Gothic New", system-ui;
    text-align: center;
    font-weight: 700;
    letter-spacing: var(--l-spacing);
}

img{
    width: 100%;
    height: auto;
    display: block;
}

li{
    list-style: none;
}

.fv-wrapper, .wrapper, footer{
    overflow: hidden;
}

/* Chrome、Safari以外 */
summary{
    display: block;
}

/* Chrome、Safari */
summary::-webkit-details-marker{
    display: none;
}

.wrapper{
    max-width: 1120px;
    margin: 0 auto;
    padding: 128px 16px 0;
    box-sizing: content-box;
}

.wrapper *{
    box-sizing: border-box;
}

.flex{
    display: flex;
    align-items: center;
}

.grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.title{
    font-size: clamp(1.875rem, 1.8rem + 0.38vw, 2.25rem);
    position: relative;
    margin-bottom: 64px;
}

.title::before{
    content: attr(data-subtitle);
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background: var(--title-dec);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    z-index: -1;
    font-size: clamp(4rem, 3.6rem + 2vw, 6rem);
}

.subtitle{
    font-size: clamp(1.125rem, 1.05rem + 0.38vw, 1.5rem);
}

.text-L{
    font-size: clamp(1rem, 0.975rem + 0.13vw, 1.125rem);
    letter-spacing: var(--l-spacing);
}

/* Swiper */
.swiper-button-next, .swiper-button-prev{
    width: 32px;
    height: 32px;
    background: var(--green);
    color: var(--white);
    border-radius: var(--radius-circle);
}

.swiper-button-next::before,
.swiper-button-prev::before,
.swiper-button-next::after,
.swiper-button-prev::after{
    content: "";
    display: block;
    width: 6.25%;
    height: 37.5%;
    background: var(--white);
    position: absolute;
    right: 30%;
    border-radius: var(--radius-L);
}

.swiper-button-next::before,
.swiper-button-prev::before{
    top: 12%;
    transform-origin: bottom right;
    transform: rotate(-52deg);
}

.swiper-button-next::after,
.swiper-button-prev::after{
    bottom: 12%;
    transform-origin: top right;
    transform: rotate(52deg);
}

@media(scripting: none){
    .swiper-wrapper{
        overflow: auto;
        gap: 16px;
    }

    .corse .swiper-wrapper{
        padding: 20px;
    }
}
/* 共通 ここまで -------------------------- */

/* ボタン -------------------------- */
.btn{
    font-size: clamp(1.5rem, 1.4rem + 0.5vw, 2rem);
    text-align: center;
    display: block;
    width: fit-content;
    background: var(--gradient);
    color: var(--white);
    text-decoration: none;
    padding: 16px min(12.14%, 136px) 16px min(6.96%, 78px);
    border-radius: var(--radius-L);
    letter-spacing: var(--l-spacing);
    position: relative;
    box-shadow: var(--shadow-S);
	overflow: hidden;
    margin-inline: auto;
    margin-bottom: 16px;
}

.btn::after{
	animation: 4s 0s shine linear infinite;
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.4) 100%);
	content: '';
	height: 100%;
	left: -100%;
	position: absolute;
	top: 0;
	transform: skewX(-25deg);
	width: 50%;
}

@keyframes shine{
	20%{
		left: 150%;
	}
	100%{
		left: 150%;
	}
}

.btn-arrow{
    display: block;
    width: 10.18%;
    aspect-ratio: 1;
    background: var(--white);
    border-radius: var(--radius-circle);
    position: absolute;
    top: 50%;
    right: min(15%, 5vw);
    transform: translateY(-50%);
    transition: var(--hov-tran);
}

.btn:hover .btn-arrow{
    transform: translateY(-50%) rotate(360deg);
}

.btn-arrow::before, .btn-arrow::after{
    content: "";
    display: block;
    width: 6.25%;
    height: 37.5%;
    background: var(--gradient);
    position: absolute;
    right: 30%;
    border-radius: var(--radius-L);
}

.btn-arrow::before{
    top: 12%;
    transform-origin: bottom right;
    transform: rotate(-52deg);
}

.btn-arrow::after{
    bottom: 12%;
    transform-origin: top right;
    transform: rotate(52deg);
}

.btn .btn-copy{
    font-size: clamp(0.75rem, 0.738rem + 0.06vw, 0.813rem);
    display: block;
}

.btn .btn-copy::before{
    content: "＼";
}

.btn .btn-copy::after{
    content: "／";
}

.following-btn{
    position: fixed;
    right: 0;
    top: 28.5%;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    white-space: nowrap;
    padding: 40px clamp(1rem, 0.95rem + 0.25vw, 1.25rem) 78px;
    background: var(--gradient);
    color: var(--white);
    text-decoration: none;
    border-radius: 8px 0 0 8px;
    font-size: 1.125rem;
    letter-spacing: 0.3em;
    z-index: 10;
}

.following-btn .btn-arrow{
    top: auto;
    width: 1.1em;
    right: 50%;
    bottom: 40px;
    transform: translateX(50%);
}

.following-btn:hover .btn-arrow{
    transform: translateX(50%) rotate(360deg);
}

.to-top-btn{
    position: fixed;
    right: 1.67vw;
    bottom: 1.67vw;
    display: block;
    width: 56px;
    aspect-ratio: 1;
    background: var(--blue);
    border-radius: var(--radius-circle);
    transform: rotate(-90deg);
    z-index: 10;
}

.to-top-btn::before, .to-top-btn::after{
    content: "";
    display: block;
    width: 6.25%;
    height: 37.5%;
    background: var(--white);
    position: absolute;
    right: 30%;
    border-radius: var(--radius-L);
}

.to-top-btn::before{
    top: 12%;
    transform-origin: bottom right;
    transform: rotate(-52deg);
}

.to-top-btn::after{
    bottom: 12%;
    transform-origin: top right;
    transform: rotate(52deg);
}
/* ボタン ここまで -------------------------- */

/* fv -------------------------- */
.fv{
    background-image: url(../img/mv_pc.webp), url(../img/mv_pc_bg.webp);
    background-size: 68.42%, 100%;
    aspect-ratio: 1920 / 958;
    animation: fvAnimation 1000ms cubic-bezier(.51,-0.01,.12,1) forwards;
}

@keyframes fvAnimation{
    0%{
        background-position: right 8.8% top -100vh, left 100vw top -100vh;
    }

    100%{
        background-position: right 8.8% top, left top;
    }
}

.fv-wrapper{
    padding-top: 1.67%;
}

.fv .header-logo{
    margin-left: 5%;
}

.fv .header-logo img{
    width: auto;
    height: 45px;
}

.fv .fv-copy{
    font-family: "Zen Kaku Gothic New", system-ui;
    font-size: clamp(1.563rem, 1.375rem + 0.94vw, 2.5rem);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.19em;
    margin-left: 12.08%;
    margin-top: 6.4%;
    filter: drop-shadow(1px 1px 5px #FFFFFF);
}

.fv .fv-copy span{
    font-size: clamp(2.25rem, 1.975rem + 1.38vw, 3.625rem);
    color: var(--text-blue);
}

.fv p{
    line-height: 1.8;
    letter-spacing: var(--l-spacing);
    margin-left: 12.08%;
    margin-top: 1.67%;
    filter: drop-shadow(1px 1px 5px #FFFFFF);
}

.fv .btn{
    margin-left: 12.08%;
    margin-top: 5%;
}
/* FV ここまで -------------------------- */

/* 体験レッスン -------------------------- */
.trial-lesson .banner{
    max-width: 800px;
    margin: 0 auto 32px;
}

.line-btn{
    background: #02C756;
    padding: 16px min(6.96%, 78px) 16px min(12.14%, 136px);
}

.line-btn-icon{
    width: 1.8em;
    position: absolute;
    top: 50%;
    left: 8%;
    transform: translateY(-50%);
    transition: var(--hov-tran);
}
/* 体験レッスン ここまで -------------------------- */

/* お悩み -------------------------- */
.worry{
    background: var(--gradient-blue);
    padding: 64px 0;
    position: relative;
}

.worry::after{
    content: "";
    position: absolute;
    bottom: -48px;
    left: 50%;
    transform: translateX(-50%);
    background-image: url(../img/arrow.svg);
    background-size: contain;
    width: 64px;
    aspect-ratio: 64 / 96;
}

.worry .wrapper{
    padding-top: 0;
}

.worry .title, .worry .subtitle{
    color: var(--text-blue);
}

.worry .flex:has(>.flex-item){
    justify-content: center;
    gap: 32px 6.56%;
}

.worry .flex-item{
    flex-basis: 41.07%;
}

.worry .flex-item:has(>img){
    flex-basis: 40.27%;
}

.worry li{
    margin-bottom: 32px;
    align-items: baseline;
}

.worry li:last-of-type{
    margin-bottom: 0;
}

.worry li img{
    width: 1em;
    margin-right: 0.5em;
}
/* お悩み ここまで -------------------------- */

/* 解決できます -------------------------- */
.solution{
    padding-top: 64px;
    background-image:
        url(../img/solution_decoration_1.webp),
        url(../img/solution_decoration_2.webp)
    ;
    background-size:
        min(403.07px, 20.99%),
        min(163.44px, 8.51%)
    ;
    background-position:
        top 64px left 1.67%,
        bottom right 6.67%
    ;
}

.solution .wrapper{
    padding-top: 0;
}

.solution .title{
    color: var(--text-blue);
}

.solution .flex{
    text-align: center;
    gap: 32px 2.86%;
}

.solution .flex-item{
    flex-basis: 31.43%;
}

.solution .flex img{
    border-radius: var(--radius-S);
    box-shadow: var(--shadow-S);
    margin-bottom: 16px;
}

.solution .gradient-line{
    background: var(--gradient);
    color: var(--white);
    width: fit-content;
    margin: 64px auto 0;
    padding: 0 8px;
    word-break: keep-all;
}
/* 解決できます ここまで -------------------------- */

/* 選ばれる理由 -------------------------- */
.reasons{
    padding-top: 0;
    background-image:
        url(../img/reasons_decoration_1.webp),
        url(../img/reasons_decoration_2.webp),
        url(../img/reasons_decoration_3.webp),
        url(../img/reasons_decoration_4.webp)
    ;
    background-size:
        min(385px, 20.05%),
        min(391px, 20.36%),
        min(427px, 22.24%),
        min(402px, 20.94%)
    ;
    background-position:
        top 192px left,
        top 37.29% right,
        bottom 40% left,
        bottom 10.1% right
    ;
}

.reasons .flex:nth-of-type(even){
    flex-direction: row-reverse;
}

.reasons .flex{
    margin-bottom: 64px;
}

.reasons .flex-item{
    flex-basis: 48.57%;
}

.reasons .flex-item:last-of-type{
    flex-basis: 57.14%;
    margin-left: -2.86%;
    background: var(--dark-blue);
    color: var(--white);
    padding: 2.86% 5.71%;
    z-index: 1;
    border-radius: var(--radius-S);
    box-shadow: var(--shadow-S);
}

.reasons .flex:nth-of-type(even) .flex-item:last-of-type{
    margin-left: 0;
    margin-right: -2.86%;
}

.reasons .subtitle{
    text-align: left;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--white);
}

.reasons p{
    font-weight: 400;
}

.reasons .flex-item img{
    border-radius: var(--radius-S);
}
/* 選ばれる理由 ここまで -------------------------- */

/* スケジュール -------------------------- */
.schedule{
    padding-top: 0;
    background-image:
        url(../img/schedule_decoration_1.webp),
        url(../img/schedule_decoration_2.webp)
    ;
    background-size:
        min(322px, 16.77%),
        min(237px, 12.34%)
    ;
    background-position:
        top 192px left 2.5%,
        bottom 32px right 3.33%
    ;
}

.schedule .wrapper{
    overflow: hidden;
    padding-bottom: 10px;
    padding-top: 128px;
}

/* swiper */
.schedule .schedule-swiper{
    overflow: visible;
}

.schedule .container{
    border-radius: var(--radius-S);
    box-shadow: var(--shadow-S);
    overflow: hidden;
    white-space: nowrap;
}

.schedule .swiper-button-next{
    right: -14px;
}

.schedule .swiper-button-prev{
    transform: rotate(180deg);
    left: -14px;
}
/* swiper ここまで */

.schedule .flex.profile{
    background: var(--dark-blue);
    padding: 16px 9.09%;
    color: var(--white);
    gap: 9.09%;
    text-align: center;
}

.schedule .profile img{
    width: 28.98%;
    border-radius: var(--radius-circle);
}

.schedule .time-table{
    padding: 9.09%;
    margin-inline: auto;
    background: var(--right-blue);
    position: relative;
}

.schedule .time-table .flex{
    margin-bottom: 9.09%;
    gap: 48px;
}

.schedule .time-table .flex:last-of-type{
    margin-bottom: 0;
}

.schedule .time-table .flex p{
    position: relative;
}

.schedule .time-table .flex p:first-of-type::before{
    content: "";
    display: block;
    width: 1em;
    aspect-ratio: 1;
    background: var(--dark-blue);
    border-radius: var(--radius-circle);
    position: absolute;
    top: 50%;
    right: calc(-24px - 0.5em);
    transform: translateY(-50%);
}

.schedule .time-table::before{
    content: "";
    display: block;
    width: 2px;
    height: 78%;
    background: var(--dark-blue);
    position: absolute;
    top: calc(9.09% + 0.5em);
    left: calc(9.09% + (0.85em * 4) + 27px);
}

.schedule .study{
    background: var(--gradient);
    color: var(--white);
    padding-inline: 4px;
}
/* スケジュール ここまで -------------------------- */

/* コース紹介 -------------------------- */
.corse{
    overflow: hidden;
    padding-bottom: 64px;
    background-image:
        url(../img/corse_decoration_1.webp),
        url(../img/corse_decoration_2.webp)
    ;
    background-size:
        min(545.81px, 28.43%),
        min(368px, 19.17%)
    ;
    background-position:
        top 128px left -1.67%,
        bottom 64px right 1.67%
    ;
}

.corse .wrapper{
    overflow: visible;
}

.corse .container{
    box-shadow: var(--shadow-L);
    border-radius: 16px;
    background: var(--white);
    padding-block: 32px;
    overflow: hidden;
}

.corse .container *{
    text-align: left;
}

.corse .container .comment{
    width: 72.41%;
    background: var(--dark-blue);
    color: var(--white);
    padding: 16px 16px 16px 6.9%;
    margin-bottom: 32px;
}

.corse .container .flex{
    justify-content: space-between;
    align-items: stretch;
    padding: 0 6.9%;
}

.corse .container .campaign{
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
    margin-top: 8px;
}

.corse .price{
    font-family: "Zen Kaku Gothic New", system-ui;
}

.corse .price .regular-price{
    text-decoration: line-through;
    font-size: clamp(0.75rem, 0.6rem + 0.75vw, 1.5rem);
    letter-spacing: 0.2em;
    color: var(--gray);
}

.corse .campaign+ .price .campaign-price::before{
    content: "";
    width: clamp(1.625rem, 1.5rem + 0.63vw, 2.25rem);
    aspect-ratio: 1;
    background-image: url(../img/course_campaign_arrow.webp);
    background-size: contain;
    background-position: left top;
    display: inline-block;
    margin-left: 4px;
    margin-bottom: -3px;
}

.corse .price .campaign-price{
    font-size: clamp(1.625rem, 1.5rem + 0.63vw, 2.25rem);
    letter-spacing: 0.2em;
}

.corse .container .campaign span{
    font-size: 2em;
}

.corse .skills{
    margin-block: 16px;
    gap: 8px;
}

.corse .skills p{
    border-radius: var(--radius-L);
    border: 1px solid var(--text-navy);
    text-align: center;
    padding: 8px;
}

.corse .features li{
    list-style: "・";
    list-style-position: inside;
    margin-bottom: 8px;
    text-indent: -1em;
    padding-left: 1em;
}

.corse .features li:last-of-type{
    margin-bottom: 0;
}

.corse .container .sample{
    flex-basis: 34.48%;
    background-image: url(../img/course_web.webp);
    background-position: top left;
    background-size: cover;
}

/* swiper */
.corse .corse-swiper{
    overflow: visible;
    margin-bottom: 64px;
}

.corse .corse-swiper .swiper-slide-active{
    transform: scale(1);
    transition: transform 0.4s ease-in-out;
    z-index: 2;
}

.corse .corse-swiper .swiper-slide-prev{
    transform: scale(0.6) translate(33.3%, 32px);
    transform-origin: bottom;
}

.corse .corse-swiper .swiper-slide-active + .swiper-slide-next{
    transform: scale(0.6) translate(-33.3%, 32px);
    transform-origin: bottom;
}

.corse .swiper-button-next{
    right: 3%;
}

.corse .swiper-button-prev{
    transform: rotate(180deg);
    left: 3%;
}
/* swiper ここまで */
/* コース紹介 ここまで -------------------------- */

/* お得 -------------------------- */
.good-deal{
    padding: 64px 0;
    background: var(--gradient-right);
}

.good-deal .wrapper{
    padding-top: 0;
}

.good-deal .table-container{
    overflow-x: auto;
    margin: 0 auto 64px;
    width: fit-content;
    max-width: 100%;
}

.good-deal .comparison-table{
    border-spacing: 8px;
    white-space: nowrap;
    text-align: center;
    table-layout: fixed;
    min-width: 83.21%;
}

.good-deal .comparison-table caption{
    caption-side: bottom;
    text-align: left;
    padding-left: 8px;
    margin-top: 8px;
}

.good-deal .comparison-table th, .good-deal .comparison-table td{
    padding: 32px;
    border-radius: var(--radius-S);
    box-shadow: var(--shadow-S);
    width: 25%;
}

.good-deal .comparison-table th{
    background: var(--gray);
    color: var(--white);
    font-weight: 500;
}

.good-deal .comparison-table td{
    background: var(--white);
    color: var(--gray);
}

.good-deal .comparison-table th:nth-of-type(2){
    background: var(--gradient);
}

.good-deal .comparison-table td{
    background: var(--white);
    color: var(--gray);
}

.good-deal .comparison-table td span{
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.good-deal .flex{
    align-items: stretch;
}

.good-deal .present{
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.good-deal .present::before, .good-deal .present::after{
    content: "＼";
    display: inline-block;
    position: initial;
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    z-index: 0;
    font-size: 1em;
    transform: none;

}

.good-deal .present::after{
    content: "／";
}

.good-deal .present-items{
    gap: 32px 2.86%;
    padding-bottom: 16px;
    justify-content: center;
}

.good-deal .present-items .flex-item{
    border-radius: var(--radius-S);
    box-shadow: var(--shadow-S);
    padding: 2.86%;
    position: relative;
    flex: 1;
}

.good-deal .present-items .flex-item::before{
    content: attr(data-present);
    position: absolute;
    top: -16px;
    left: -16px;
    transform: rotate(-15deg);
    font-size: clamp(1.25rem, 1.2rem + 0.25vw, 1.5rem);
    padding: 2px 16px;
    background: var(--green);
    color: var(--white);
    border-radius: var(--radius-L);
}

.good-deal .present-items .flex-item .subtitle{
    margin-bottom: 16px;
    color: var(--text-blue);
    font-size: clamp(1rem, 0.666rem + 0.7vw, 1.5rem);
}

.good-deal .present-items .flex-item:nth-of-type(1){
    background: var(--white) url(../img/present1.webp) bottom right / auto 150px no-repeat;
}

.good-deal .present-items .flex-item:nth-of-type(2){
    background: var(--white) url(../img/present2.webp) bottom right / auto 150px no-repeat;
}

.good-deal .present-items .flex-item:nth-of-type(3){
    background: var(--white) url(../img/present3.webp) bottom right / auto 150px no-repeat;
}
/* お得 ここまで -------------------------- */

/* 卒業生の声 -------------------------- */
.voice{
    background-image:
        url(../img/voice_decoration_1.webp),
        url(../img/voice_decoration_2.webp)
    ;
    background-size:
        min(165px, 14.73%),
        min(373.56px, 33.35%)
    ;
    background-position:
        top 174px right 5.71%,
        bottom 64px left
    ;
}

.voice .wrapper{
    max-width: 992px;
}

.voice .grid{
    gap: 2.86%;
}

.voice .student-container{
    background: var(--right-blue);
    border-radius: var(--radius-S);
    box-shadow: var(--shadow-S);
    margin-bottom: 112px;
    padding: 24px 6.67% 32px;
    position: relative;
}

.voice .student-container .student{
    position: absolute;
    top: calc(100% - 16px);
    right: 32px;
    width: 100%;
    justify-content: flex-end;
    gap: 16px;
}

.voice .student-container .student img{
    width: 96px;
    /* filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.25)); */
}

.voice .flex-item:nth-of-type(2){
    padding-top: 25%;
}
/* 卒業生の声 ここまで -------------------------- */

/* よくある質問 -------------------------- */
.faq{
    background-image:
        url(../img/faq_decoration_1.webp),
        url(../img/faq_decoration_2.webp)
    ;
    background-size:
        min(359.38px, 32.09%),
        min(332px, 29.64%)
    ;
    background-position:
        top 192px right,
        bottom 32px left 2.86%
    ;
}

.faq .wrapper{
    max-width: 928px;
}

.faq details{
    margin: 0 auto;
    box-shadow: var(--shadow-S);
    border-radius: var(--radius-S);
    background-color: var(--white);
    margin-bottom: 32px;
    padding-inline: 2.86%;
    word-break: break-all;
}

.faq details summary{
    padding: 16px 40px;
    position: relative;
    font-weight: 400;
}

.faq details summary::before{
    content: "Q.";
    font-family: "Zen Kaku Gothic New", system-ui;
    font-weight: 700;
    font-size: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
    color: var(--green);
    margin-right: 16px;
    position: absolute;
    top: calc(50% - 0.2em);
    left: 0;
    transform: translateY(-50%);
}

.faq details summary .plus-btn{
    display: block;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    background: var(--gradient);
    border-radius: var(--radius-circle);
    width: 32px;
    aspect-ratio: 1;
    transition: var(--hov-tran);
}

.faq details summary .plus-btn::before{
    content: "";
    position: absolute;
    inset: 50%;
    transform: translate(-50%, -50%);
    border-radius: var(--radius-L);
    display: block;
    width: 50%;
    height: 3px;
    background: var(--white);
}

.faq details summary .plus-btn::after{
    content: "";
    position: absolute;
    inset: 50%;
    transform: translate(-50%, -50%);
    border-radius: var(--radius-L);
    display: block;
    width: 3px;
    height: 50%;
    background: var(--white);
    transition: var(--hov-tran);
}

.faq details[open] summary .plus-btn{
    transform: translateY(-50%) rotate(360deg);
}

.faq details[open] summary .plus-btn::after{
    opacity: 0;
}

.faq details .answer{
    padding: 16px 40px;
    border-top: 2px solid var(--blue);
    position: relative;
    font-weight: 400;
}

.faq details .answer::before{
    content: "A.";
    font-family: "Zen Kaku Gothic New", system-ui;
    font-weight: 700;
    font-size: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
    color: var(--blue);
    margin-right: 16px;
    position: absolute;
    top: calc(50% - 0.2em);
    left: 0;
    transform: translateY(-50%);
}
/* よくある質問 ここまで -------------------------- */

/* 説明会申し込み -------------------------- */
.contact{
    background: var(--gradient-green);
    padding-top: 64px;
    margin-top: 64px;
}

.contact .wrapper{
    max-width: 640px;
    padding-top: 0;
    padding-bottom: 128px;
}

.contact .g-forms{
    height: 90dvh;
}
/* よくある質問 ここまで -------------------------- */

/* フッター -------------------------- */
footer{
    background: var(--text-navy);
    color: var(--white);
    padding-block: 64px;
    font-size: 0.75rem;
}

footer .wrapper{
    padding-top: 0;
}

footer small{
    font-size: 100%;
}

footer a{
    text-decoration: none;
    color: var(--white);
}

footer .footer-logo img{
    width: auto;
    height: 35px;
}

footer .sns img{
    width: auto;
    height: 35px;
}

footer .flex{
    justify-content: space-between;
}

footer .sns{
    justify-content: flex-end;
    gap: 32px;
}

footer .flex-item{
    gap: 32px;
}

footer ul.flex{
    gap: 32px;
}

footer .wrapper > .flex:nth-of-type(1){
    margin-bottom: 64px;
}
/* フッター ここまで -------------------------- */

/**
 * SP
 */
@media(max-width: 768px){
    :root{
        --m-1: 16px;
    }

    /* 共通 -------------------------- */
    .pc{
        display: none;
    }

    .sp{
        display: initial;
    }

    .flex{
        flex-direction: column;
    }

    .title{
        margin-bottom: 32px;
    }

    body{
        padding-bottom: 85px;
    }

    .wrapper{
        padding-top: 96px;
    }

    .solution, .reasons, .schedule, .corse, .voice, .faq{
        background-image: none;
    }

    .inner{
        max-width: 500px;
        margin: 0 auto;
    }
    /* 共通 ここまで -------------------------- */

    /* ボタン ここまで -------------------------- */
    .btn{
        width: 100%;
    }

    .following-btn{
        right: 0;
        top: auto;
        bottom: 0;
        width: 100%;
        -ms-writing-mode: initial;
        writing-mode: initial;
        padding: 16px;
        border-radius: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 32px;
        font-size: 24px;
        letter-spacing: 0.15em;
        text-align: center;
    }

    .following-btn .btn-copy{
        font-size: 12px;
        display: block;
    }

    .following-btn .btn-copy::before{
        content: "＼";
    }
    
    .following-btn .btn-copy::after{
        content: "／";
    }

    .following-btn .btn-arrow{
        width: 36.8px;
        right: 0;
        bottom: 0;
        position: relative;
        transform: none;
    }

    .following-btn:hover .btn-arrow{
        transform: rotate(360deg);
    }

    .to-top-btn{
        bottom: 96px;
    }
    /* ボタン ここまで -------------------------- */

    /* FV -------------------------- */
    .fv{
        background-image: url(../img/mv_sp.webp), url(../img/mv_sp_bg.webp);
        background-size: 63.08%, 100%;
        background-position: right 0.77% top, left top;
        aspect-ratio: auto;
        padding-top: 0;
    }

    @keyframes fvAnimation{
        0%{
            background-position: right 0.77% top -100vh, left 100vw top -100vh;
        }
    
        100%{
            background-position: right 0.77% top, left top;
        }
    }

    .fv-wrapper{
        padding-bottom: 16px;
        padding-top: 16px;
    }

    .fv .fv-inner{
        width: fit-content;
        margin-inline: auto;
    }

    .fv .header-logo{
        margin-left: var(--m-1);
    }

    .fv .header-logo img{
        height: 30px;
    }

    .fv .fv-copy{
        margin-inline: var(--m-1);
        margin-top: 34.62%;
        max-width: 450px;
    }

    .fv p{
        margin-inline: var(--m-1);
        margin-block: 32px;
        max-width: 450px;
    }

    .fv .btn{
        margin-inline: var(--m-1);
        width: 91.8%;
        max-width: 450px;
    }
    /* FV ここまで -------------------------- */

    /* 無料レッスン -------------------------- */
    .line-btn-icon{
        width: 2em;
        position: absolute;
    }
    /* 無料レッスン ここまで -------------------------- */

    /* お悩み -------------------------- */
    .worry .flex{
        flex-direction: column-reverse;
    }

    .worry li.flex{
        flex-direction: row;
    }

    .worry li{
        margin-bottom: 16px;
    }

    .worry img{
        max-width: 320px;
    }
    /* お悩み ここまで -------------------------- */

    /* 選ばれる理由 -------------------------- */
    .reasons .flex:nth-of-type(even){
        flex-direction: column;
    }

    .reasons .flex-item:last-of-type{
        margin-left: 0;
        margin-top: -16px;
    }

    .reasons .flex:nth-of-type(even) .flex-item:last-of-type{
        margin-right: 0;
    }

    .reasons .subtitle{
        padding-bottom: 8px;
        margin-bottom: 8px;
    }
    /* 選ばれる理由 ここまで -------------------------- */

    /* スケジュール -------------------------- */
    .schedule .wrapper{
        padding-top: 96px;
        max-width: 320px;
    }

    .schedule .flex{
        flex-direction: row;
    }
    /* スケジュール ここまで -------------------------- */

    /* コース紹介 -------------------------- */
    .corse .container{
        padding-top: 0;
    }

    .corse .container .comment{
        width: 100%;
        font-size: 0.875rem;
    }

    .corse .price .regular-price{
        position: relative;
        top: -0.3em;
    }

    .corse .price .campaign-price{
        letter-spacing: 0.15em;
    }

    .corse .skills, .corse .features{
        font-size: 0.75rem;
    }

    .corse .container .sample{
        aspect-ratio: 1;
        margin-top: 16px;
    }

    .corse .corse-swiper{
        margin-bottom: 48px;
    }

    .corse .swiper-button-prev{
        left: -14px;
    }

    .corse .swiper-button-next{
        right: -14px;
    }

    .corse .corse-swiper .swiper-slide-prev{
        transform: scale(0.85) translate(20%, 8px);
    }

    .corse .corse-swiper .swiper-slide-active + .swiper-slide-next{
        transform: scale(0.85) translate(-20%, 8px);
    }
    /* コース紹介 ここまで -------------------------- */

    /* お得 -------------------------- */
    .good-deal .flex{
        max-width: 320px;
        margin-inline: auto;
    }

    .good-deal .comparison-table th, .good-deal .comparison-table td{
        padding: 8px;
    }

    .good-deal .present::before, .good-deal .present::after{
        content: "";
    }

    .good-deal .present-items .flex-item{
        padding: 9.09%;
    }

    .good-deal .present-items .flex-item .subtitle{
        font-size: clamp(1.125rem, 1.05rem + 0.38vw, 1.5rem);
    }
    /* お得 ここまで -------------------------- */

    /* 卒業生の声 -------------------------- */
    .voice .flex{
        flex-direction: row;
    }

    .voice .grid{
        grid-template-columns: 1fr;
    }

    .voice .grid{
        gap: 0;
    }

    .voice .student-container .student img{
        width: 64px;
    }

    .voice .student-container{
        margin-bottom: 80px;
    }

    .voice .flex-item:nth-of-type(2){
        padding-top: 0;
    }
    /* 卒業生の声 ここまで -------------------------- */

    /* フッター -------------------------- */
    footer .flex-item{
        margin-bottom: 64px;
        gap: 64px;
    }

    footer .wrapper > .flex:nth-of-type(1){
        margin-bottom: 0;
    }

    footer .wrapper > .flex:nth-of-type(2){
        flex-direction: column-reverse;
        gap: 64px;
    }

    footer .sns{
        flex-direction: row;
    }
    /* フッター ここまで -------------------------- */
}


/* //////////////////////
プライバシーポリシー ページ
////////////////////// */
.page-privacy{
    background: var(--gradient-right);
}

.page-privacy main{
    background-color: var(--white);
    max-width: 800px;
    margin: 32px auto;
    padding: 64px 16px;
    border-radius: var(--radius-S);
}

.page-privacy h1, .page-privacy h2, .page-privacy p{
    margin-bottom: 16px;
}

.page-privacy h2{
    margin-top: 32px;
}

.page-privacy ol{
    margin-block: 8px;
}

.page-privacy ol li{
    list-style-type: decimal;
    margin-left: 2em;
}

dl{
    margin-bottom: 16px;
}

dt, dd{
    display: inline;
}