:root{
    --blue:#10378E;
    --yellow: #FFF100;
    --white: #FFF;
    --red: #F00000!important;
    --black: #000;
}

html,body{ overflow-x: hidden; }

html.is-fixed,html.is-fixed body{ height: 100%; overflow-y: hidden; }

.point{ 
    font-family: 'vdl-penletter', sans-serif;
    font-style: normal;
    font-weight: 500; }

section h1,section h2,section h3{ font-weight: 600; }

section h2{ font-size: 7.467vw; text-align: center; }

span,strong{ color: inherit; font-weight: inherit; font-family: inherit; }

.eng,.number{ font-family: 'Times New Roman', Times, serif; font-weight: bold; }

.pc{ display: none; }

.attention{ font-size: 0.8em; }

section:not(.key,.rate,.form) > div{ width: 92%; margin: 0 4%; }

header{ 
    display: flex; 
    align-items: center; 
    justify-content: space-between;
    width: 94%;
    height: 11.733vw;
    padding: 0 4.267vw;
    z-index: 10000;
    position: fixed;
    top: 3%;
    left: 3%;
    background: var(--white);
    border-radius: 16vw;
    transition: all .3s ease-in-out;
    box-shadow: 0 3px 11px #00000040!important;
    opacity: 0;
    pointer-events: none;
}

header.active{ opacity: 1; pointer-events: all; }

header .logo { display: inline-block; margin: 0 0 0.533vw 1.6vw; }

header nav {
    position: fixed;
    z-index: 999;
    top: 0;
    right: -120%;
    width: 100%;
    height: 100vh;
    background: rgb(16, 55, 142,0.95);
    transition: all 0.6s ease-in-out;
}

header nav.panelactive {
    right: 0;
}

header nav ul {
    width: 88.533vw;
    position: absolute;
    z-index: 999;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -51%);
}

header nav li {
    list-style: none;
    text-align: center;
}

header nav li a {
    display: block;
    padding: 3.733vw;
    font-weight: bold;
    letter-spacing: 0.05em;
    text-align: center;
    color: var(--white);
    border-bottom: 1px solid var(--white);
}

header nav li.curriculum-menu{ border-bottom: 1px solid var(--white); }

header nav .cv a,
header nav li:nth-last-child(2) a ,
header nav li.curriculum-menu a{
    border-bottom: none;
}

header nav .cv {
    margin-top: 6.4vw;
}

header nav .cv a {
    background: var(--yellow);
    color: #000;
    border-radius: 16vw;
}

header .sub-menu ul{ display: flex; justify-content: space-between; position: unset; transform: unset; }

header nav li.curriculum-menu > a{ padding-bottom: 1.6vw; }

header .sub-menu ul li a{ font-size: 3.2vw; padding: 2.133vw 2.667vw 3.733vw; }

.openbtn {
    position: relative;
    z-index: 9999;
    top: 0;
    right: 0;
    cursor: pointer;
    width: 6.4vw;
    height: 4.267vw;
}

.openbtn span {
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 0;
    height: 0.4vw;
    background-color: var(--blue);
    width: 100%;
}

.openbtn span:nth-of-type(1) {
    top: 0;
}

.openbtn span:nth-of-type(2) {
    top: 0;
    bottom: 0;
    margin: auto 0;
}

.openbtn span:nth-of-type(3) {
    bottom: 0;
}

.openbtn.active span {
    background: var(--white);
}

.openbtn.active span:nth-of-type(1) {
    top: 0.667vw;
    transform: translateY(6px) rotate(-45deg);
}

.openbtn.active span:nth-of-type(2) {
    opacity: 0;
}

.openbtn.active span:nth-of-type(3) {
    transform: translateY(-6px) rotate(45deg);
}

/* snow */
.snow-box{
    height: 100%;
    position: relative;
    overflow: hidden;
}

.snow {
    background-color: rgb(255, 255, 255,0.5); /* 雪の色 */
    border-radius: 50%;
    position: absolute;
    animation: animate-snow 18s linear;
}

@keyframes animate-snow {
    0% {
    opacity: 0;
    top: 0;
    }

    10% {
    opacity: 1;
    }

    90% {
    opacity: 1;
    }

    100% {
    opacity: 0;
    top: 100vh;
    }
}

.snow-img{ position: absolute; z-index: 20; }
.snow-img.snow02{ width: 10.667vw; height: 10.667vw; top: 48.533vw; right: 19.2vw; opacity: 0.7; }
.snow-img.snow03{ width: 19.2vw; height: 19.2vw; top: 64vw; left: 10.667vw;  }
.snow-img.snow04{ width: 7.467vw; height: 7.467vw; top: 96vw; right: -2.133vw; }
.snow-img.snow05{ width: 12.667vw; height: 12.667vw; top: 126.667vw; left: 1.433vw; }
.snow-img.snow06{ width: 7.467vw; height: 7.467vw; top: 56.533vw; right: 11.733vw; }

.snow-img img{
    animation-duration: 6s; 
    animation-timing-function: ease-in-out; 
    /* animation-iteration-count: infinite;  */
    animation-direction: alternate;
    opacity: 0.8;
}

.snow02 img{ animation-name: auto-fade02;  }
.snow06 img{ animation-name: auto-fade06; animation-duration: 6s; }
.snow03 img{ animation-name: auto-fade03; animation-duration: 7s; }
.snow04 img{ animation-name: auto-fade04; animation-duration: 5s; opacity: 0.5; }
.snow05 img{ animation-name: auto-fade05; animation-duration: 8s; }

@keyframes auto-fade02 {
    0% {
        opacity: 0;
        transform: translateY(-32px); 
    }
    
    72% {
        opacity: 1;
    }
    
    100% {
        opacity: 0.7;
        transform: translateY(0);
    }
}

@keyframes auto-fade06 {
    0% {
        opacity: 0;
        transform: translateY(-56px); 
    }
    
    72% {
        opacity: 1;
    }
    
    100% {
        opacity: 0.8;
        transform: translateY(0);
    }
}

@keyframes auto-fade03 {
    0% {
        opacity: 0;
        transform: translateY(-96px); 
    }
    
    15% {
        opacity: 1;
    }
    
    100% {
        opacity: 0.8;
        transform: translateY(0);
    }
}

@keyframes auto-fade04 {
    0% {
        opacity: 0;
        transform: translateY(-96px); 
    }
    
    45% {
        opacity: 1;
    }
    
    100% {
        opacity: 0.5;
        transform: translateY(0);
    }
}

@keyframes auto-fade05 {
    0% {
        opacity: 0;
        transform: translateY(-120px); 
    }
    
    75% {
        opacity: 1;
    }
    
    100% {
        opacity: 0.8;
        transform: translateY(0);
    }
}

/* key */
.key{ padding: 6.4vw 5.333vw 8.533vw; background-color: var(--blue); }

.key.snow-box>div{ padding-bottom: 8.533vw; }

.key .copy{ background: rgb(16, 55, 142,0.7); position: relative; }

.key .copy::before{ content: ''; width: 14.133vw; height: 14.133vw; background: url(../assets/img/winter/snow01.svg) no-repeat; position: absolute; top: -1.067vw; right: 10.667vw; transform: rotate(63deg); opacity: 0.5; }

.key .copy p{ border-top-right-radius: 2.133vw; padding: 1.333vw 1.6vw 1.867vw; margin: 3.2vw auto 4.267vw; background: var(--white); text-align: center; font-size: 3.2vw; font-weight: 600; line-height: 1; letter-spacing: 0.08em; color: var(--blue); }

.key .copy span{ font-size: 4.533vw; }

.key .img img{ z-index: 10; position: relative; }

.key .img .sp{ border-bottom-left-radius: 5.333vw }

.key .ttl{ display: grid; column-gap: 2.133vw; margin-top: 6.4vw; position: relative; }

.key .ttl::before{ content: ''; width: 100vw; height: 40vw; background: linear-gradient(182deg, rgba(16, 55, 142, 1), rgba(8, 43, 121, 1) 50%, rgba(16, 55, 142, 1)); position: absolute; bottom: -5.333vw; left: 0; right: 0; margin: 0 calc(50% - 50vw); }

.key .ttl *{ color: var(--white); position: relative; z-index: 10; }

.key h1 p{ margin-top: 1vw; }

.key .start{ margin-top: 2.933vw; }

.key h1{ grid-area: 1/1/3/2; font-weight: 600; letter-spacing: 0.05em; text-align: center; }

.key h1 span{ font-size: 5.333vw; line-height: 1; }

.key h1 p{ font-size: 11.2vw; line-height: 1; }

.key .target{ grid-area: 1/2/2/3; height: fit-content; padding: 0.667vw; border:1px solid var(--white); font-size: 3.467vw; line-height: 1; letter-spacing: 0.1em; text-align: center; color: var(--white); }

.key .start{ grid-area: 2/2/3/3; line-height: 1; }

.key .start strong,.key .start strong span{ color: var(--yellow); }

.key .start strong{ font-size: 12.267vw; letter-spacing: 0.05em; }

.key .start strong span{ font-size: 8vw; font-weight: 400; }

.key .benefit{ display: flex; justify-content: space-between; margin-top: 5.333vw; }

.key .benefit li{ display: flex; flex-direction: column; justify-content: space-between; width: 43.2vw; padding: 2.933vw 3.2vw 4vw; border: 1px solid var(--white); border-radius: 2.667vw; background: repeating-linear-gradient(-45deg, #295ADE, #295ADE 4px, #284AE1 4px, #284AE1 8px); text-align: right; position: relative; z-index: 20; }

.key .benefit li::before,.key .benefit li::after{ content: ''; position: absolute; }
.key .benefit li::before{ width: 1.333vw; height: 100%; top: 0; left: 4.667vw; background: #ffee7e; }
.key .benefit li::after{ width: 15.2vw; height: 13.333vw; background: url(../assets/img/winter/kei_ribbon.svg) no-repeat; background-size: contain; top: 2.133vw; left: -1.6vw; }

.key .benefit li p{ color: var(--white); font-size: 4.8vw; font-weight: 600; line-height: 1; letter-spacing: 0.08em; }

.key .benefit li .grade{ font-size: 3.2vw; position: relative; }
.key .benefit .free .grade{ margin-right: -1.6vw; }

.key .benefit li .grade::before{ content: ''; width: 42.933vw; height: 1.333vw; background: #ffee7e; position: absolute; top: 5.333vw; right: -3.2vw; }
.key .benefit .free .grade::before{ right: -1.733vw; }

.key .benefit li .plan{ margin: 6vw 0 1.6vw; font-size: 2.933vw; }

.key .benefit li p strong{ font-size: 7.467vw; }

/* CTA */
.cta{ padding: 8.533vw 0 4.267vw; background-color: var(--blue); background-image: url(../assets/img/winter/cta_bg.webp); background-repeat: no-repeat; background-size: cover; text-align: center; }

.cta .copy{ margin-bottom: 2.133vw; font-size: 6.4vw; font-weight: 600; }

.cta p{ color: var(--white); }

.cta ul{ display: flex; justify-content: center; gap: 4.267vw; margin: 4.267vw 0; }

.cta li{ width: 39.467vw; padding: 2.933vw 0; border-radius: 10vw; background: var(--yellow); font-size: 4.267vw; font-weight: 600; line-height: 1; letter-spacing: 0.02em; position: relative; overflow: hidden; box-shadow: 0 0.533vw 0.533vw rgba(0, 0, 0, .25); cursor: pointer; }

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

.cta .attention{ font-size: 2.667vw; }

.top-cta { width: 100vw; position: fixed; bottom: -21.333vw; left: 0; z-index: 1000; transition: all .2s ease-in-out; }

.top-cta.active { bottom: 0; }

.top-cta .cta{ padding: 4.267vw 0; }

.top-cta .cta ul{ margin: 0; }

.top-cta .cta li{ width: 80vw; padding: 4.267vw 0; }

.top-cta .cta li strong{ font-size: 1.1rem; }

.top-cta .cta li span{ margin: 0 1.067vw; }

@keyframes shine {
	0% {
		left: 100%;
	}
	100% {
		left: 100%;
	}
}

/* lead */
.lead{ padding: 10.667vw 0 13.867vw; margin-top: -8.533vw; background-color: #f8f8f8;background-image: radial-gradient(circle, #d9d9d9 2px, transparent 2px); background-position: 0 0; background-size: 32px 32px; z-index: 10; position: relative; }

.lead h2{ margin-bottom: 2.133vw; line-height: 1.4; color: var(--blue); }

.lead .copy{ margin-bottom: 14.933vw; font-size: 4.8vw; line-height: 2; text-align: center; text-decoration: underline; text-underline-offset: -3.2vw; text-decoration-color: #EFF4FF; text-decoration-thickness: 5.333vw; text-decoration-skip-ink: none; }

.lead .list{ display: flex; flex-direction: column; gap: 24.533vw; margin-top: 7.467vw; }

.lead .list li{ position: relative; }

.lead .list li:before{ content: ''; width: 94vw; height: 35.2vw; position: absolute; top: -6.4vw; left: 0; background-repeat: no-repeat; background-size: contain; }
.lead .list li:nth-child(odd)::before{ background-image: url(../assets/img/winter/lead01.webp); }
.lead .list li:nth-child(even)::before{ background-image: url(../assets/img/winter/lead02.webp); left: -1.867vw; top: -8.533vw; }

.lead .list li:first-child{ margin-bottom: 4.267vw; }
.lead .list li:first-child::after,.lead .list li:last-child::after{ content: ''; background-size: contain; background-repeat: no-repeat; position: absolute; z-index: 20; }
.lead .list li:first-child::after{ width: 26.933vw; height: 24.4vw; background-image: url(../assets/img/winter/lead_parent01.svg); left: 1.6vw; bottom: -26.667vw; }
.lead .list li:last-child::after{ width: 23.733vw; height: 23.867vw; background-image: url(../assets/img/winter/lead_parent02.svg); right: -2.667vw; top: -26.667vw; }

.lead .list li p{ width: 69.867vw; margin: 0 auto; font-size: 4.267vw; font-weight: 600; line-height: 1.5; letter-spacing: 0.02em; position: relative; z-index: 10; }

.lead .list li p span{ color: var(--red); }

.lead .push{ width: fit-content; margin: 20.267vw auto 4.267vw; font-size: 6.4vw; font-weight: 600; text-align: center; position: relative; }

.lead .push::before{ content: ''; width: 6.933vw; height: 6.933vw; background: url(../assets/img/winter/push.svg) no-repeat; background-size: contain; position: absolute; top: -4.267vw; right: -4.267vw; }

.lead .oricon{ padding: 6.4vw 0 9.6vw; border-radius: 10.667vw; background: var(--white); box-shadow: 0 0.533vw 0.533vw rgba(0, 0, 0, 0.25); text-align: center; }

.lead .oricon > p{ font-size: 4.8vw; font-weight: 600; line-height: 2; }

.lead .oricon >p strong{ font-size: 6.4vw; line-height: 1.5; text-decoration: underline; text-underline-offset: -2.133vw; text-decoration-color: var(--yellow); text-decoration-thickness: 3.733vw; text-decoration-skip-ink: none; }

.lead .oricon div{ margin-top: 5.333vw; }

.lead .satisfy{ font-size: 3.733vw; font-weight: 600; letter-spacing: 0.02em; }

.lead .rank{ font-weight: 600; line-height: 1.6; font-size: 5.333vw; color: var(--blue); }

.lead .rank strong{ font-size: 5.333vw; }

.lead .oricon ul{ display: flex; justify-content: center; gap: 4.267vw; width: 74.667vw; margin: 0 auto; }

/* promise */
.promise{ padding: 16vw 0 5.333vw; margin-top: -5.333vw; border-top-left-radius: 5.333vw; border-top-right-radius: 5.333vw; background: #5190DD; }

.promise h2{ position: relative; }

.promise h2::before{ content: ''; width: 18.133vw; height: 12.8vw; background: url(../assets/img/winter/promise.svg) no-repeat; background-size: contain; position: absolute; top: -7.467vw; left: 0; right: 0; margin: 0 auto; }

.promise h2 p{ line-height: 1; }

.promise > div > .attention{ margin-top: 6.4vw; text-align: center; }

.promise h2 .ruiplus{ width: fit-content; margin: 0 0 5.333vw 5.067vw; font-size: 3.2vw; position: relative; transform: rotate(-4deg); }
.promise h2 .ruiplus::before{ content: ''; width: 24.8vw; height: 9.6vw; background: url(../assets/img/winter/rui_comment.svg) no-repeat; background-size: contain; position: absolute; top: -2.4vw; left: -2.933vw; transform: rotate(6deg); }

.promise h2 .ruiplus strong{ position: relative; z-index: 10; }
.promise h2 .ruiplus span{ font-size: 2.667vw; }

.promise h2 .rui{ margin-bottom: 10.667vw; color: var(--yellow); -webkit-text-stroke: 2px var(--black); paint-order: stroke; }

.promise h2 .parents{ color: var(--blue); -webkit-text-stroke: 1px var(--white); paint-order: stroke; position: relative; }

.promise h2 .parents::before,.promise h2 .parents::after{ content: ''; width: 1.067vw; height: 8.533vw; position: absolute; top: -9.2vw; left: 0; right: 0; margin: 0 auto; }
.promise h2 .parents::before{ background: var(--yellow); border: 1px solid var(--black); transform: rotate(135deg); }
.promise h2 .parents::after{ background: var(--blue); border: 1px solid var(--white); transform: rotate(-135deg); }

.promise li{ margin-top: 7.467vw; position: relative; }

.promise li:first-child:before,.promise li::after{ content: '';  position: absolute; background-repeat: no-repeat; background-size: contain; }

.promise li:first-child::before{ width: 15.6vw; height: 17.867vw; top: -17.867vw; left: 0.667vw; background-image: url(../assets/img/winter/promise_teacher01.svg); }

.promise li::after{ width: 11.733vw; height: 11.733vw; right: -2.667vw; bottom: -3.2vw; }

.promise li:nth-child(1)::after{ background-image: url(../assets/img/winter/promise_parent01.svg); }
.promise li:nth-child(2)::after{ background-image: url(../assets/img/winter/promise_parent02.svg); }
.promise li:nth-child(3)::after{ background-image: url(../assets/img/winter/promise_parent03.svg); }
.promise li:nth-child(4)::after{ background-image: url(../assets/img/winter/promise_parent04.svg); }
.promise li:nth-child(5)::after{ background-image: url(../assets/img/winter/promise_parent05.svg); }

.promise li h3{ width: 100%; padding: 1.067vw 1.6vw; margin-bottom: 1.067vw; background: var(--yellow); border: 1px solid var(--black); text-align: center; }

.promise li h3 strong{ font-size: 3.733vw; }

.promise li .img{ width: 40.533vw; height: 27.733vw; border: 1px solid var(--black); }

.promise li .img img{ width: 100%; height: 100%; object-fit: cover; }

.promise li .txt{ width: 51.133vw; padding: 3.2vw; background: var(--white); border: 1px solid var(--black); position: relative; }

.promise li .txt p{ font-size: 3.2vw; font-weight: 600; line-height: 1.6; }

.promise li .txt p span{ color: var(--red); }

.result{ margin-top: 10.667vw; padding: 4.267vw; background: #458500; border: 2px solid var(--black); position: relative; border-radius: 5.333vw; }
.result::before{ content: ''; width: 47.467vw; height: 14.933vw; background: url(../assets/img/winter/board.svg) no-repeat; background-size: contain; position: absolute; top: 0; left: 0; right: 0; margin: 0 auto; }

.result .board{ padding: 18.133vw 4.8vw 8.533vw; background-color: var(--white); border: 2px solid var(--black); border-radius: 4.267vw; }

.result .board > div{ width: 72.533vw; margin: 0 auto; background: repeating-linear-gradient(0deg, var(--white), var(--white) 32px, #f8f8f8 2px, #f8f8f8 34px); text-align: center; }

.result .board h3{ margin-top: -1.333vw; text-align: center; position: relative; }

.result .board h3::before{ position: absolute; content: ''; width: 37.333vw; height: 12vw; background: url(../assets/img/winter/comment.svg) no-repeat; background-size: contain; top: -2.133vw; left: 17.067vw; }

.result .board h3 span{ position: relative; z-index: 10; }

.result .board h3 p{ margin-top: 3.2vw; font-size: 6.4vw; line-height: 1.5; color: var(--blue); }

.result .graph{ width: 57.067vw; height: 41.867vw; margin: 4.267vw auto 6.4vw; position: relative; }

.result .graph .img{ width: 35.2vw; height: 35.2vw; position: absolute; top: 0; left: 0; }

.result .graph .txt{ text-align: right; position: absolute; bottom: 0; right: 0; }

.result .graph .txt p{ font-size: 4.8vw; font-weight: 600; -webkit-text-stroke: 2px var(--white); paint-order: stroke; }
.result .graph .txt .number{ -webkit-text-stroke: 2px var(--black); paint-order: stroke;  font-size: 9.6vw; color: var(--yellow); }
.result .graph .txt .number strong{ font-size: 14.933vw; line-height: 1; } 
.result .graph .txt .number span{ font-size: 4.267vw; } 

.result .board > div>p:not(.attention){ margin: 2.133vw auto; font-weight: 600; line-height: 2; } 

.result .graph::before,.result .graph::after{ content: ''; position: absolute; background-repeat: no-repeat; background-size: contain; }
.result .graph::before{ width: 14.933vw; height: 14.933vw; background-image: url(../assets/img/winter/star01.svg); top: 0; right: 2.667vw; }
.result .graph::after{ width: 11.2vw; height: 12.667vw; background-image: url(../assets/img/winter/star02.svg); bottom: -1.6vw; left: -5.333vw; }

/* feature */
.feature{ padding: 18.133vw 0 7.467vw; background: #ECF5FF; position: relative; }

.feature::before{ content: ''; width: 100vw; height: 10.667vw; background: linear-gradient(to bottom left, #5190DD 50%, transparent 50%) top left/ 50.1% 100% no-repeat, linear-gradient(to bottom right, #5190DD 50%, transparent 50%) top right / 50.1% 100% no-repeat; position: absolute; top: -0.02%; left: 0; }

.feature h2{ display: flex; flex-wrap: wrap; justify-content: center; align-items: center; font-size: 5.333vw; letter-spacing: 0.05em; position: relative; z-index: 10; }

.feature h2 .reason{ width: 100%; color: var(--blue); }

.feature h2 .dot{ text-emphasis: filled; }

.feature h2 .comment{ position: relative; color: var(--black); }

.feature h2 .comment::before{ content: ''; width: 41.6vw; height: 14.933vw; background: url(../assets/img/winter/feature_comment.svg) no-repeat; background-size: contain; position: absolute; top: -2.133vw; left: -5.6vw; }

.feature h2 .comment strong,.feature h2 .comment span{ z-index: 10; position: relative; margin-top: 1.067vw; }

.feature h2 .comment span{ font-size: 3.733vw; } 

.feature h2 .five{ margin-left: 6.4vw; color: var(--yellow); -webkit-text-stroke: 2px var(--black); paint-order: stroke; font-size: 7.467vw; line-height: 1.3; letter-spacing: 0.08em; }

.feature h2 .five strong{ font-size: 14.933vw; }

.feature ul{ display: flex; flex-direction: column; gap: 14.933vw; margin-top: 12.8vw; position: relative; }

.feature ul::before,.feature ul::after{ content: ''; position: absolute; background-repeat: no-repeat; background-size: contain; }
.feature ul::before{ width: 45.333vw; height: 12vw; top: -12vw; left: -18%; background-image: url(../assets/img/winter/feature_ttl01.svg); }
.feature ul::after{ width: 22.4vw; height: 22.933vw; top: -22.933vw; right: -4.5%; background-image: url(../assets/img/winter/feature_ttl02.svg); }

.feature li{ padding: 9.6vw 0; background: var(--white); box-shadow: 0 0.533vw 0.533vw rgba(0, 0, 0, 0.25); position: relative; }

.feature li > div{ width: 82.4vw; margin: 0 auto; }

.feature .point{ width: 29.867vw; padding: 2.133vw 0; background: #FEE4DA; font-size: 5.333vw;  letter-spacing: 0.05em; color: var(--red); text-align: center; position: absolute; top: -4.267vw; left: 0; right: 0; margin: 0 auto; }

.feature li .ttl{ display: grid; grid-template-columns: min-content 1fr; }

.feature li .ttl .number{ grid-area: 1/1/3/2; margin-right: 2.933vw; font-size: 19.2vw; line-height: 1; color: var(--yellow); -webkit-text-stroke: 2px var(--black); paint-order: stroke; }

.feature li .ttl p{ height: auto; line-height: 1; }

.feature li .ttl .copy{ grid-area: 1/2/2/3; margin: auto 0 2.133vw; font-size: 4.267vw; }

.feature li .ttl p:last-child{ grid-area: 2/2/3/3; font-size: 5.333vw; }
.feature li:nth-child(2) .ttl p:last-child{ font-size: 5.067vw; }
.feature li:nth-child(2) .ttl p:last-child span{ font-size: 3.733vw; }
.feature li:nth-child(5) .ttl p:last-child{ font-size: 4.8vw; }

.feature li .ttl p strong{ text-decoration: underline; text-underline-offset: -2.133vw; text-decoration-color: var(--yellow); text-decoration-thickness: 3.733vw; text-decoration-skip-ink: none; }

.feature li .img{ margin: 3.2vw 0; border: 1px solid #f8f8f8; }

.feature li div > p{ line-height: 1.8; }

.feature li div > p.attention{ font-size: 0.75em; line-height: 1.6; } 

/* rate */

.rate *:not(h2,h2 p,li){ text-align: center; }

.rate>div {
    padding-bottom: 5.333vw;
    border: 6px solid var(--blue);
    position: relative;
    background: #fff;
}

.rate .jh { border-bottom: none; }

.rate h3 {
    width: 20vw;
    padding: 3.733vw 0;
    background: var(--yellow);
    position: absolute;
    text-align: center;
}

.rate h3::before {
    content: '';
    width: 100%;
    height: 5.333vw;
    background: linear-gradient(to bottom left, var(--yellow) 50%, transparent 50%) top left / 50.1% 100% no-repeat, linear-gradient(to bottom right, var(--yellow) 50%, transparent 50%) top right / 50.1% 100% no-repeat;
    position: absolute;
    bottom: -5.3vw;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 10;
}

.rate h3 span {
    font-size: 4.267vw;
    line-height: 1;
    letter-spacing: 0.05em;
}

.rate h3 p {
    margin-top: 0.533vw;
    font-size: 3.467vw;
    font-weight: 600;
    line-height: 1;
}

.rate h2 {
    padding-top: 4.267vw;
    margin-left: 24.533vw;
    text-align: left;
    line-height: 1;
}

.rate .jh h2 span { font-size: 3.733vw; }

.rate .jh h2 strong { font-size: 4.533vw; }

.rate .jh h2 p {
    margin-top: 1.6vw;
    font-size: 6.533vw;
    font-weight: bold;
}

.rate .jh .rate-percent{ display: flex; justify-content: center; align-items: flex-end; gap: 0 6.4vw; }

.rate .jh .rate-percent p {
    margin-top: 6.4vw;
    font-size: 23.467vw;
    font-weight: 600;
    line-height: 0.7;
    color: var(--blue);
}

.rate div .rate-percent > p {
    text-decoration: underline;
    text-underline-offset: -5.333vw;
    text-decoration-color: var(--yellow);
    text-decoration-thickness: 6.4vw;
    text-decoration-skip-ink: none;
}

.rate .jh .rate-percent p span {
    font-size: 19.2vw;
}

.rate .jh .rate-percent p span.symbol {
    font-size: 9.6vw;
}

.rate .jh .rate-percent .sub {
    position: relative;
}

.rate .jh .rate-percent .sub::before {
    content: '';
    width: 3.2vw;
    height: 7.467vw;
    background: url(../assets/img/summer/arrow.svg) no-repeat;
    background-size: contain;
    position: absolute;
    bottom: 0;
    left: -2.667vw;
}

.rate .jh .rate-percent .sub p {
    font-size: 8.533vw;
    color: #5e5e5e;
}

.rate .jh .rate-percent .sub .eng { margin-top: 4.267vw;}

.rate .jh .rate-percent .sub .attention { font-size: 3.2vw;}

.rate .jh div .sub span { font-size: 7.467vw; }

.rate .jh .rate-percent .sub .symbol { font-size: 4.267vw; }

.rate .detail {
    font-size: 3.733vw;
}

.rate .detail span {
    text-decoration: underline;
    text-underline-offset: -2.667vw;
    text-decoration-color: var(--yellow);
    text-decoration-thickness: 3.2vw;
    text-decoration-skip-ink: none;
}

.rate h4 {
    font-weight: 400;
    font-size: 3.2vw;
}

.rate .jh .flex{ width: 83.2vw; margin: 7.467vw auto 2.133vw; }

.rate .jh .flex th{ width: 20.267vw; background: #e7e7e7; border: 2px solid #e7e7e7; text-align: center; }

.rate .jh .flex td{ background: var(--white); padding: 2.133vw 0 2.133vw 2.133vw; border: 2px solid #e7e7e7; }


.rate .txt {
    font-size: 3.733vw;
}

.rate .list {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.533vw;
    width: fit-content;
    font-size: 2.667vw;
    font-weight: bold;
    text-align: left;
}

.rate .list li::before {
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--blue);
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto 0;
}

.rate .list li {
    width: 41.867vw;
    padding-left: 2.133vw;
    position: relative;
    font-size: 3.733vw;
}

.rate .jh .list li,.rate .ele .list:last-child li {
    width: 14vw;
    font-size: 2.667vw;
    font-weight: 400;
}

.rate .person{ margin: 8.533vw auto 4.267vw; }

.rate .person p{ font-size: 4.267vw; font-weight: 600; line-height: 1; letter-spacing: 0.1em; }

.rate .person .main-number{
    margin: 2.133vw auto 3.2vw;
    text-decoration: underline;
    text-underline-offset: -2.133vw;
    text-decoration-color: var(--yellow);
    text-decoration-thickness: 4.267vw;
    text-decoration-skip-ink: none;
}

.rate .person .sub-number{ font-size: 16vw; font-weight: 600; }

.rate .person strong{ font-size: 21.333vw; }

.rate .person .main-number{ color: var(--blue); }

.rate .person p:last-child{ line-height: 1.5; }

.rate .ele .list{ width: 85.333vw; margin: 0 auto; }

.rate .ele .txt{ margin: 7.467vw auto 2.133vw; }

.rate .ele .list:last-child{ padding: 2.133vw 1.067vw; border: 2px solid #e7e7e7; }

.rate .ele .list:last-child li{ width: 20vw; }

.rate .ele .list:last-child li:nth-last-child(2){ width: 28vw; }

/* message */
.message{ margin-top: -7.467vw; padding: 17.067vw 0 8.533vw; background: #9EC2FF; }

.message >div > p,.message .flex p{ margin-bottom: 6.4vw; font-size: 3.733vw; line-height: 2; }

.message > div{ position: relative; }

.message > div::before{ content: ''; width: 32.4vw; height: 34.133vw; background: url(../assets/img/winter/message04.webp) no-repeat; background-size: contain; position: absolute; top: 2.133vw; right: 0; }

.message .flex{ gap: 6.4vw; }

.message .flex .img{ width: 38.4vw; }

.message .flex p{ width: 45.333vw; }

.message .line{ font-size: 4.267vw; font-weight: 600; line-height: 2; }

.message .line span{ width: fit-content; text-decoration: underline; text-underline-offset: -4.267vw; text-decoration-color: var(--yellow); text-decoration-thickness: 5.333vw; text-decoration-skip-ink: none;  }

.message ul{ display: flex; flex-direction: column; gap: 5.333vw;  }

.message li{ display: flex; align-items: center; gap: 2.133vw; box-shadow: 0 0.533vw 0.533vw rgba(0, 0, 0, 0.25); background: var(--white); border-top-right-radius: 5.333vw; position: relative; }

.message li .img{ width: 25.6vw; }

.message li p{ font-size: 4vw; font-weight: 600; line-height: 2.13; z-index: 10; }

.message li .eng{ font-size: 26.667vw; font-weight: 600; line-height: 1; color: #eee; position: absolute; top: 0; bottom: 0; right: 3.6vw; margin: auto 0; }

.message .recommend{ margin-top: 5.333vw; font-size: 4.8vw; font-weight: 600; line-height: 1.8; color: var(--blue); text-align: center; }

/* curriculum */

.curriculum{ background-image: linear-gradient(0deg, transparent 31px, #d9d9d9 32px), linear-gradient(90deg, transparent 31px, #d9d9d9 32px); background-color: var(--white); background-size: 32px 32px; border: 1px solid var(--black); border-top-left-radius: 5.333vw; border-top-right-radius: 5.333vw; padding: 7.467vw 0; margin-top: -5.333vw; }

.curriculum h2{ margin-bottom: 5.333vw; color: var(--blue); }

.tabs input[type="radio"] {
    display: none;
}

.tabs label {
    display: inline-flex;
    justify-content: center;
    width: auto;
    min-width: 19.467vw;
    padding: 1.067vw 2.133vw;
    margin: 2.133vw auto 0;
    background-color: var(--white);
    border: 2px solid var(--blue);
    border-radius: 13.333vw;
    cursor: pointer;
    transition: background-color 0.3s;
    font-weight: 600;
    color: var(--blue);
}

.tabs label:is(:nth-child(2),:nth-child(10),:nth-child(12),:nth-child(14)){ width: 29.867vw; }

.tabs label:hover,
.tabs input[type="radio"]:checked+label {
    background-color: var(--blue);
    color: var(--white);
}

.tab-content {
    display: none;
    width: 91.333vw;
    background: var(--white);
    padding: 7.467vw 6.4vw 6.4vw;
    margin-top: 4.267vw;
    box-shadow: 0 0.533vw 0.533vw rgba(0, 0, 0, 0.25);
}

#tab1:checked~#content1,
#tab2:checked~#content2,
#tab3:checked~#content3,
#tab4:checked~#content4,
#tab5:checked~#content5,
#tab6:checked~#content6 {
    display: block;
}

.tab-content h3,.tab-content h4{ margin-bottom: 5.333vw; font-size: 5.067vw; font-weight: 600; letter-spacing: 0.02em; text-align: center; text-decoration: underline; text-underline-offset: -2.133vw; text-decoration-color: var(--yellow); text-decoration-thickness: 3.733vw; text-decoration-skip-ink: none; }

.tab-content h4{ margin-bottom: 4.267vw; }

.tab-content h5{ margin: 0 0 2.133vw 1.067vw; font-weight: 600; }

.tab-content > div:not(.price){ margin-bottom: 7.467vw; }

.tab-content .img{ margin-bottom: 3.2vw; }

.tab-content table { width: 100%; border-collapse: separate; border: 1px solid var(--blue); }

.tab-content th{ width: 15.733vw; font-weight: 400; background: var(--blue); color: var(--white); }

.tab-content tr:not(:first-child) th,.tab-content tr:not(:first-child) td{ border-top: 1px solid var(--blue); }

.tab-content td{ padding: 3.2vw 2.667vw; background: var(--white); text-align: left; }

.tab-content td:last-child{ border-left: 1px solid var(--blue); }

.tab-content td p{ font-size: 2.667vw; }

.tab-content td .copy{ font-size: 3.2vw; font-weight: 600; }

.tab-content .option{ background: var(--white); font-size: 3.2vw; }

.tab-content .chujyu{ margin-top: 4.267vw; }

.tab-content .price td:nth-last-child(2){ border-left: 1px solid var(--blue); }

.tab-content .price th{ width: 21.333vw; font-size: 3.733vw; }

.tab-content .price td:last-child{ font-size: 3.2vw; }

.tab-content .price .attention{ font-size: 0.75em; }

.tab-content .price .attention:nth-last-child(2){ margin: 1.6vw 0 0.533vw; }

.tab-content .price .special span:first-child{ text-decoration: line-through; }
.tab-content .price .special span:last-child{ font-size: 1.1em; color: var(--red); font-weight: 600; }


/* school */

.school {
    background: #FFFCEA;
    padding: 11.733vw 0 12.8vw;
    overflow-y: unset;
}

.school h2{ position: relative; }

.school h2::before,.school h2::after{ content: ''; position: absolute; background-repeat: no-repeat; background-size: contain; }
.school h2::before{ width: 23.467vw; height: 16vw; background-image: url(../assets/img/winter/school01.svg); bottom: 0; left: -4.1%; }
.school h2::after{ width: 15.2vw; height: 10.667vw; background-image: url(../assets/img/winter/school02.svg); bottom: 0; right: -2%; }

.school .attention {
    margin: 5.333vw auto;
    text-align: center;
}

.school .attention span {
    font-size: 3.2vw;
}

.school ul {
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: 3.733vw;
}

.briefing{ 
    display: block;
    width: 64vw;
    padding: 4.267vw 0;
    margin: 9.6vw auto 0;
    border-radius: 10.667vw;
    border: 2px solid var(--yellow);
    background: var(--yellow);
    font-size: 4.267vw;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    letter-spacing: 0.02em;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0.533vw 0.533vw rgba(0, 0, 0, .25);
    cursor: pointer;
    transition: all .3s ease-in-out;
}

.briefing:hover{ border: 2px solid var(--black); background: var(--white); } 

.mordal-trigers {
    display: block;
    width: 43.733vw;
    height: 12vw;
    font-weight: bold;
    line-height: 12vw;
    background: var(--blue);
    color: var(--white);
    box-shadow: 0 0.533vw 0.533vw 0 rgba(0, 0, 0, .25);
}

.school .modal-overlay {
    display: none;
    background: rgba(0, 0, 0, .5);
    width: 100%;
    height: 100%;
    margin: 0;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
}

.modal-style {
    display: none;
    width: 92vw;
    padding: 5.333vw 0;
    background: white;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10001;
}

.modal-style div {
    margin: 0 4.267vw;
}

.modal-style h3 {
    justify-content: space-between;
    font-size: 4.8vw;
}

.modal-style h3 span {
    padding: 1.2vw 1.867vw;
    margin: 0 auto 0 2.667vw;
    background: var(--yellow);
    font-size: 3.2vw;
    color: var(--blue);
}

.modal-style h3 button {
    line-height: 1;
    padding: 1.067vw 2.133vw;
    border: 1px solid #000;
    font-size: 2.667vw;
}

.modal-style iframe {
    width: 100%;
    margin: 3.2vw auto 5.333vw;
}

.modal-style p {
    font-size: 3.733vw;
    line-height: 1.6;
    text-align: left;
}

.modal-style .direction {
    margin: 4.267vw auto;
}

.modal-style a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 4.267vw 0;
    text-align: center;
    background: var(--blue);
}

.modal-style a span {
    margin-left: 1.333vw;
    color: var(--white);
    font-weight: bold;
    line-height: 1;
    position: relative;
}

.online-modal>div>img { margin-top: 3.2vw; }

.online-modal a:last-child { margin-top: 4.267vw; }

.question { padding: 8.533vw 0 6.4vw; }

.question h2 { margin-bottom: 8.533vw; color: var(--blue); }

.question dl { margin-bottom: 3.2vw; box-shadow: 0 0.533vw 0.533vw 0 rgba(0, 0, 0, .25); }

.question dt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 16.533vw;
    padding: 0 4.267vw;
    border: 2px solid var(--blue);
    background: var(--white);
    position: relative;
    font-weight: 600;
    text-align: left;
    line-height: 1.4;
    cursor: pointer;
}

.question dt::before {
    content: "＋";
    font-weight: bold;
    position: absolute;
    right: 4.267vw;
}

.question dt.active::before {
    content: "－";
}

.question dd {
    display: none;
    padding: 4.267vw;
    border: 2px solid var(--blue);
    border-top: none;
    font-size: 3.733vw;
    text-align: left;
}

/* benefits */
.benefits { padding: 26.667vw 0 10.667vw; background: repeating-linear-gradient(-45deg, #173C9F, #173C9F 10px, var(--blue) 10px, var(--blue) 20px); border-radius: 5.333vw; z-index: 10; position: relative; }

.benefits h2{ color: var(--white); position: relative; }

.benefits h2::before,.benefits h2::after{ content: ''; position: absolute; }

.benefits h2::before{ width: auto; height: 2.133vw; margin: 0 calc(50% - 50vw); background: #ffee7e; top: -12.8vw; left: 0; right: 0; }

.benefits h2::after{ width: 21.333vw; height: 12.8vw; background: url(../assets/img/winter/benefits_ribbon.svg) no-repeat; background-size: contain; top: -18.133vw; left: 0; right: 0; margin: 0 auto; }

.benefits ul{ display: flex; flex-wrap: wrap; justify-content: space-between; row-gap: 6.4vw; margin-top: 8.533vw; }

.benefits li{ width: 43.733vw; height: 58vw; background: url(../assets/img/winter/banner.svg) no-repeat; background-size: contain; }

.benefits li h3{ display: flex; align-items: center; justify-content: center; min-height: 13.067vw; margin-top: 4.267vw; font-size: 4.8vw; line-height: 1.4; text-align: center; margin-bottom: 2.133vw; }

.benefits li p{ padding: 0 3.2vw; font-size: 3.2vw; text-align: justify; }

.benefits li p strong{ color: var(--red); }

/* flow */
.flow{ padding: 16vw 0 16vw; margin-top: -5.333vw; background: #F2F2F2; }

.flow h2{ margin-bottom: 8.533vw; color: var(--blue); } 

.flow ul{ display: flex; flex-direction: column; gap: 13.867vw; }

.flow li{ background: var(--white); border: 2px solid var(--blue); box-shadow: 0 0.533vw 0.533vw rgba(0, 0, 0, 0.25); text-align: center; position: relative; }

.flow li:not(:last-child):after{ content: ''; width: 9.6vw; height: 3.2vw; background: linear-gradient(to bottom left, #CFCFCF 50%, transparent 50%) top left / 50.1% 100% no-repeat, linear-gradient(to bottom right, #CFCFCF 50%, transparent 50%) top right / 50.1% 100% no-repeat; position: absolute; bottom: -8.533vw; left: 0; right: 0; margin: 0 auto; }

.flow h3{ display: flex; justify-content: center; border-bottom: 2px solid var(--blue); font-size: 4.8vw; }

.flow h3 span{ width: 24.8vw; background: var(--yellow); color: var(--blue); border-right: 2px solid var(--blue); }

.flow h3 p{ width: 66.667vw; text-align: center; }

.flow h3 span,.flow h3 p{ padding: 3.2vw 0; line-height: 1; }

.flow img{ height: 14.933vw; margin: 5.333vw auto 4.267vw; }

.flow li:nth-last-child(2) img{ height: 12.8vw; }

.flow li > p{ padding: 0 7.467vw 5.333vw; }

.flow li .attention{ display: block; margin-top: 2.133vw; }

.flow li:last-child h3{ padding: 3.733vw 0; color: var(--blue); }

.flow li:last-child::before,.flow li:last-child::after{ content: ''; position: absolute; background-repeat: no-repeat; background-size: contain; width: 25.6vw; height: 35.467vw; bottom: -12.267vw; }

.flow li:last-child::before{ background-image: url(../assets/img/winter/form04.webp); left: -4%; }

.flow li:last-child::after{ background-image: url(../assets/img/winter/form05.webp); right: -4%; }

/* form */

.form-wrap{ margin-top: -5.333vw; background: var(--blue); }

form {
    overflow: hidden;
}

.form {
    padding: 7.467vw 0 6.4vw;
    background: var(--blue);
    overflow: hidden;
    position: relative;
}

.form h2 {
    margin-bottom: 4.267vw;
    color: var(--white);
}

.form>div {
    background: var(--white);
    padding: 6.4vw 0 5.333vw;
    position: relative;
    z-index: 20;
    border-top-right-radius: 5.333vw;
}

.form table {
    border: none;
    margin: 0 6.4vw;
}

.form tr {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.form th,
.form td {
    width: 79.2vw;
    padding: 0;
    background: unset;
    text-align: left;
}

.form th {
    margin-bottom: 1.067vw;
}

.form th p {
    font-weight: 600;
}

.form th strong,
.form th span {
    margin-left: 1.067vw;
    font-size: 3.2vw;
    vertical-align: text-bottom;
}

.form th strong {
    color: #FF3000;
}

.form th span {
    font-weight: 400;
}

.form .wpcf7-list-item {
    display: block;
    margin: 0;
}

.form td {
    margin-bottom: 6.4vw;
    position: relative;
}

.form tr:first-child td .wpcf7-list-item {
    margin-bottom: 2.133vw;
}

.form td input {
    max-width: 100%;
}

.form td span>input,
.form td span>textarea,
.form td span>select {
    border-radius: 0;
    -webkit-appearance: none;
    appearance: none;
    border: 1px solid var(--blue);
    padding: 0.533vw 1.6vw;
}

.form td span>select {
    width: 100%;
    background: var(--white);
}

.form tr:nth-child(2) td span::after,
.form tr:nth-child(4) td span::after {
    content: '';
    width: 2.667vw;
    height: 2.133vw;
    position: absolute;
    top: 2.133vw;
    right: 2.133vw;
    background: linear-gradient(to bottom left, var(--blue) 50%, transparent 50%) top left/ 50% 100% no-repeat,
        linear-gradient(to bottom right, var(--blue) 50%, transparent 50%) top right / 50% 100% no-repeat;
    margin: auto 0;
}

.form td textarea {
    width: 100%;
    height: 21.333vw;
    resize: vertical;
}

.form td a {
    color: var(--blue);
    text-decoration: underline;
}

.form tr:last-child td p:last-child {
    margin-top: 4.267vw;
}

.form .btn { border-radius: 0; }

.form .btn input {
    width: 82.667vw;
    padding: 4.267vw 0;
    background: var(--yellow);
    line-height: 1;
    font-weight: bold;
    border-radius: 10.667vw;
    box-shadow: 0 0.533vw 0.533vw rgba(0, 0, 0, .25);
    cursor: pointer;
}

.confirm .btn input:first-child {
    background: #d3d3d3;
    margin-bottom: 4.267vw;
}

.confirm .form > div{ width: 92%; margin: 0 auto; }

.form .btn span {
    display: none;
}

.form .wpcf7-not-valid-tip {
    font-size: 0.8em;
}

.wpcf7 form .wpcf7-response-output {
    display: none;
}

.complete {
    height: calc(100svh - 17.2vw);
    padding: 12.8vw 0;
    background: #f2f2f2;
}

.complete h2 {
    font-size: 5.333vw;
}

.complete p {
    margin: 5.333vw auto;
    line-height: 2;
    text-align: center;
}

.complete a {
    border-radius: 50vw;
}

footer{ padding: 3.2vw 0; background: #02154b; }

footer p{ color: var(--white); }

footer p:first-child{ margin-bottom: 2.133vw; }

footer a{ text-decoration: underline; }

/*　＝＝＝＝＝＝＝＝＝＝＝＝　PC　＝＝＝＝＝＝＝＝＝＝＝＝　*/

@media screen and (min-width:979px) {

    .pc{ display: block; }
    .sp{ display: none; }

    section:not(.key,.cta)> div:not(.modal-overlay){ max-width: 800px; margin: 0 auto; }
    
    header { height: 80px; padding: 24px 24px 24px 32px; }

    header .logo{ margin: 0 0 4px 12px; }

    header .logo img { width: 104px; }

    header nav,header nav.active { width: fit-content; background: none; position: unset;  }

    header nav ul { display: flex; align-items: center; justify-content: flex-end; height: 100%; }

    header nav .cv { margin: -2px -1.333vw 0 0; }

    header nav .cv a{ width: 192px; padding: 16px 12px; margin: auto 0 auto 0.8vw; border: 1px solid var(--yellow); transition: all .3s ease-in-out; }

    header nav .cv a:hover{ background: var(--white); border-color: var(--black); }

    header .lp_nav li:not(.cv){ height: 100%; }

    header .lp_nav > ul li:not(.cv) a { display: flex; align-items: center; width: fit-content; height: 100%; padding: 0 1.067vw; color: var(--black); font-size: 14px; }

    .openbtn { display: none; width: 40px; height: 32px; }

    .openbtn span { height: 4px; }

    .openbtn.active span:nth-of-type(1) { top: 16px; }

    header .curriculum-menu{ position: relative; }
    header .sub-menu{ position: absolute; top: calc(3% + 224px); left: 56px; }
    header nav .sub-menu ul{ display: block; width: 144px; height: auto; padding: 16px; background: var(--white); transform: translate(-50%, -50%); }
    header .sub-menu *{ pointer-events: none; }
    header .sub-menu.active *{ pointer-events: all; }
    header .sub-menu.active{ display: block; }

    header nav .sub-menu li{ position: relative; }
    header nav.lp_nav .sub-menu li { height: 40px; }
    header nav.lp_nav .sub-menu li a{ height: 40px; margin: 0 auto; position: relative; } 

    header nav .sub-menu li a span{ z-index: 50; }

    header nav .sub-menu li:hover a::before{ content: ''; width: 100%; height: 4px; background: var(--yellow); bottom: 8px; left: 0; position: absolute; }

    .key{ padding: 2.4vw 0 0 2.4vw; }

    .key .ttl::before{ content: none; }

    .snow-img.snow02{ width: 5.3vw; height: 5.3vw; top: 8vw; right: 9.6vw; }
    .snow-img.snow03{ width: 9.6vw; height: 9.6vw; top: 23vw; left: 42.3vw;  }
    .snow-img.snow04{ width: 3.8vw; height: 3.8vw; top: 27vw; right: -1.05vw; }
    .snow-img.snow05{ display: none; }
    .snow-img.snow06{ width: 3.8vw; height: 3.8vw; top: 14vw; right: 6vw; }

    .key > div{ display: grid; column-gap: 2vw; }

    .key.snow-box>div{ padding-bottom: 6.4vw; }

    .key .copy{ grid-area: 1/1/2/2; }
    .key .copy p{ padding: 0.6vw; margin: 2vw auto 2.4vw; font-size: 1.2vw; border-top-right-radius: 0.533vw; }
    .key .copy span{ font-size: 1.4vw; }
    .key .copy::before{ width: 5.4vw; height: 5.4vw; top: -0.067vw; right: 4.667vw; opacity: 0.3; }

    .key .img{ grid-area: 1/2/4/3; width: 59vw; }
    .key .img .pc{ border-top-left-radius: 2.667vw; }

    .key .ttl{ grid-area: 2/1/3/2; column-gap: 1.333vw; margin-top: 0; }
    .key .ttl h1{ margin-top: 0.4vw; }
    .key .ttl h1 span{font-size: 2vw; }
    .key .ttl h1 p{ margin-top: 0.667vw; font-size: 4.8vw; }
    .key .target{ margin-top: 0.3vw; font-size: 1.3vw; }

    .key .start{ margin-top: 0.6vw; }
    .key .start strong{ font-size: 4.8vw; }
    .key .start strong span{ font-size: 3vw; }
    .key .start span{ font-size: 1.4vw; }

    .key .benefit{ grid-area: 3/1/4/2; margin-top: 2.8vw; }

    .key .benefit li{ width: 17.2vw; padding: 1.2vw; border-radius: 1vw; }
    .key .benefit li::before{ width: 0.6vw; left: 1.867vw; }
    .key .benefit li .grade::before{ width: 17.1vw; height: 0.6vw; right: -1.28vw; top: 2.3vw; }
    .key .benefit .free .grade::before{ right: 0.35vw; }
    .key .benefit li::after{ width: 5.4vw; height: 5.4vw; top: 1.5vw; left: -0.4vw; }
    .key .benefit li .grade{ font-size: 1.2vw; }
    .key .benefit li p{ font-size: 1.8vw; }
    .key .benefit li p strong{ font-size: 2.8vw; }
    .key .benefit li .plan{ margin: 2.4vw 0 0.5vw; font-size: 1.1vw; }

    .top-cta .cta,.top-cta .cta li{ padding: 16px 0; }
    
    .top-cta .cta li{ width: 560px; font-size: 18px; }

    .top-cta .cta li strong{ font-size: 22px; }

    .top-cta .cta li span{ margin: 0 4px; }

    .cta{ padding: 48px 0 40px; background-image: none; background-size: contain; position: relative; }

    .cta::before{ content: ''; width: 240px; height: 100%; right: 0; top: 0; background: url(../assets/img/winter/cta_r.webp) no-repeat; background-size: cover; position: absolute; }

    .cta::before{ content: none; }

    .cta ul { gap: 32px; margin: 32px auto; }

    .cta li{ width: 320px; padding: 24px 0; font-size: 22px; box-shadow: 0 4px 4px rgba(0, 0, 0, .25); }

    .form .btn input, .cta li{ transition: all .3s ease-in-out; border: 2px solid var(--yellow); }

    .form .btn input:hover,.confirm .btn input:first-child:hover,.cta li:hover{ background: var(--white); border: 2px solid var(--black); box-shadow: 0 2px 2px rgba(0, 0, 0, .25); }

    .cta p{ font-size: 20px; }

    .cta .copy { margin-bottom: 16px; font-size: 32px;}

    .cta .attention{ font-size: 14px; }

    section h2{ font-size: 32px; }

    .lead{ padding: 80px 0 104px; margin-top: -40px; }

    .lead h2{ margin-bottom: 24px; }

    .lead .copy{ margin-bottom: 112px; font-size: 20px; font-weight: 600; text-underline-offset: -8px; text-decoration-thickness: 24px; }

    .lead .list{ width: 600px; margin: 0 auto; gap: 136px; }

    .lead .list li p { width: 386px; margin: 0 auto; font-size: 20px; line-height: 2; }

    .lead .list li:before,.lead .list li:nth-child(even)::before{ width: 600px; height: 256px; top: -56px; }
    .lead .list li:nth-child(3)::before{ top: -44px; }

    .lead .list li:first-child::after{ width: 136px; height: 136px; left: 12px; bottom: -174px; }

    .lead .list li:last-child::after{ width: 136px; height: 136px; right: -20px; top: -160px; }

    .lead .push{ margin: 136px auto 24px;
    font-size: 32px; }

    .lead .push::before{ width: 51.998px; height: 51.998px; top: -32.003px; right: -32.003px; }

    .lead .oricon{ padding: 56px 0; border-radius: 2.667vw;  }

    .lead .oricon > p{ font-size: 18px; letter-spacing: 0.08em; }

    .lead .oricon >p strong{ font-size: 24px; line-height: 1.5; text-underline-offset: -8px; text-decoration-thickness: 14px; }

    .lead .oricon div{ margin-top: 40px; }

    .lead .satisfy{ font-size: 20px; } 

    .lead .rank{ margin-top: 8px; font-size: 24px; }

    .lead .rank strong{ font-size: 20px; }

    .lead .oricon ul{ gap: 32.003px; width: 560.003px; }

    .lead .oricon li{ width: 200px; }

    .promise{ padding: 128px 0 40px; margin-top: -40px; border-top-left-radius: 2.667vw; border-top-right-radius: 40px; }

    section.promise > div{ width: 800px; margin: 0 auto; }

    .promise h2::before{ width: 88px; height: 80px; top: -40px; }

    .promise h2 .ruiplus{ margin: 0 0 40px 128px; font-size: 20px; }
    
    .promise h2 .ruiplus::before{ width: 186px; height: 72px; top: -20px; left: -32px; }

    .promise h2 .ruiplus span{ font-size: 16px; }

    .promise > div > .attention{ font-size: 16px; line-height: 1.8; margin: 40px 0 0 56px; }

    .promise h2 .rui{ margin-bottom: 80.002px; }

    .promise h2 .parents::before,.promise h2 .parents::after{ width: 8.002px; height: 63.997px; top: -69px; }

    .promise li{ margin-top: 56px; }
    .promise li:first-child{ margin-top: 32px; }
    
    .promise li:first-child::before{ width: 117px; height: 134.002px; top: -134.002px; left: 5.003px; }

    .promise li::after{ width: 120px; height: 120px; right: 8px; bottom: 0px; }

    .promise li:nth-child(2)::after{ width: 136px; height: 136px; bottom: -20px; }

    .promise li h3{ padding: 6px 12px; margin-bottom: 8.002px; font-size: 20px; }

    .promise li h3 strong{ font-size: 23px; }

    .promise li .number{ margin-right: 20.002px; font-size: 32px; }

    .promise li .strong{ font-size: 14px; }

    .promise li .img{ width: 320px; height: 240px; }

    .promise li .txt{ width: 472px; padding: 24px; margin-left: 8px; }

    .promise li .txt p{ margin: auto 0; font-size: 18px; line-height: 2; }

    .result{ margin-top: 80.002px; padding: 32.003px; border-radius: 2.667vw; }
    
    .result::before{ width: 356px; height: 120px; }

    .result .board{ padding: 144px 36px 63.997px; border-radius: 2.133vw; }

    .result .board > div{ width: 543.998px; }

    .result .board h3{ margin-top: -9.998px; }

    .result h3 span{ font-size: 20px; }

    .result .board h3::before{ width: 200px; height: 56px; top: -10px; left: 176px; }

    .result .board h3 p{ margin-top: 24px; font-size: 32px; }

    .result .graph{ width: 428.002px; height: 314.002px; margin: 32.003px auto 48px; }

    .result .graph .img{ width: 264px; height: 264px; }

    .result .graph .txt p{ font-size: 18px; }
    .result .graph .txt .number{ font-size: 72px; }
    .result .graph .txt .number strong{ font-size: 120px; } 
    .result .graph .txt .number span{ font-size: 16px; } 

    .result .board > div>p:not(.attention){ margin: 16px auto; } 

    .result .graph::before{ width: 80px; height: 80px; right: 72px; }
    .result .graph::after{ width: 64px; height: 72px;  bottom: 16px; left: -40px; }

    /* feature */
    .feature{ padding: 135.998px 0 56px; }

    .feature::before{ width: 100%; height: 80.002px; top: -0.02%; }

    .feature h2{ font-size: 28px; }

    .feature h2 .comment::before{ width: 240px; height: 72px; top: -10px; left: -40px; }

    .feature h2 .comment strong,.feature h2 .comment span{ margin-top: 8.002px; }

    .feature h2 .comment span{ font-size: 20px; } 

    .feature h2 .five{ margin-left: 40px; font-size: 32px; letter-spacing: 0.1em; }

    .feature h2 .five strong{ font-size: 72px; }

    .feature ul{ gap: 120px; margin-top: 96px; }

    .feature ul::before{ width: 340px; height: 120px; top: -80px; left: 0; }
    .feature ul::after{ width: 168px; height: 176px; top: -174px; right: 0; }

    .feature li{ padding: 72px 0; }

    .feature li > div{ width: 618px; }

    .feature .point{ width: 186px; padding: 8px 0; font-size: 24px; top: -24px; }

    .feature li .ttl .number{ margin-right: 21.997px; font-size: 120px; }

    .feature li .ttl .copy{ margin: auto 0 16px; font-size: 20px; }

    .feature li .ttl p:last-child{ font-size: 32px; }
    .feature li:nth-child(2) .ttl p:last-child{ font-size: 38.002px; }
    .feature li:nth-child(2) .ttl p:last-child span{ font-size: 27.998px; }
    .feature li:nth-child(5) .ttl p:last-child{ font-size: 36px; }

    .feature li .ttl p strong{ text-underline-offset: -15.998px; text-decoration-thickness: 27.998px; }

    .feature li .img{ margin: 32px 0; }

    .feature li div > p{ line-height: 2; }

    .feature li div .attention{ margin-top: 8px; }

    .rate{ display: flex; gap: 48px; justify-content: center; padding: 80px 0; background-color: #F2F2F2; }

    section.rate >div.ele,section.rate >div.jh { width: 480px; margin: 0; padding-bottom: 40px; border-top-right-radius: 2.667vw; border: 2px solid var(--blue); background: #fff;
        box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25) }

    .rate h3 { width: 128px; padding: 28px 0 20px;}

    .rate h3::before { height: 40px; bottom: -39.75px; }

    .rate h3 span { font-size: 22px; }

    .rate h3 p { margin-top: 4px; font-size: 18px; }

    .rate h2 { padding-top: 32.003px; margin-left: 183.998px; }

    .rate .jh h2 span { font-size: 14px; }

    .rate .jh h2 strong { font-size: 16px; }

    .rate .jh h2 p { margin-top: 12px; font-size: 24px; }

    .rate .jh .rate-percent{ gap: 0 48px; }

    .rate .jh .rate-percent p {
    margin-top: 48px;
    font-size: 88px;}

    .rate div .rate-percent > p { text-underline-offset: -20px; text-decoration-thickness: 28px; }

    .rate .jh .rate-percent p span { font-size: 72px; }

    .rate .jh .rate-percent p span.symbol { font-size: 36px; }

    .rate .jh .rate-percent .sub::before { width: 24px; height: 56px; left: -32px; }

    .rate .jh .rate-percent .sub p { font-size: 32px; }

    .rate .jh .rate-percent .sub .eng { margin-top: 32.003px;}

    .rate .jh .rate-percent .sub .attention { font-size: 12px;}

    .rate .jh div .sub span { font-size: 28px; }

    .rate .jh .rate-percent .sub .symbol { font-size: 16px; }

    .rate .detail { font-size: 18px; line-height: 1.8; }

    .rate .detail span { text-underline-offset: -10px; text-decoration-thickness: 12px; }

    .rate h4 { font-size: 16px; }

    .rate .jh .flex{ width: 384px; margin: 48px auto 16px; }

    .rate .jh .flex:nth-last-child(2){ margin-top: 32px; }

    .rate .jh .flex th{ width: 112px; }
    .rate .jh .flex td{ padding: 16px 0 16px 32px; }

    .rate .txt { font-size: 16px; }

    .rate .list { gap: 4px; font-size: 10px; }

    .rate .list li { width: 192px; padding-left: 16px; font-size: 16px; }

    .rate .jh .list li,.rate .ele .list:last-child li { width: 112px; font-size: 14px; }

    .rate .person{ margin: 63.997px auto 16px; }

    .rate .person p{ font-size: 20px; }

    .rate .person .main-number{ margin: 16px auto 24px; text-underline-offset: -8px; text-decoration-thickness: 16px; }

    .rate .person .sub-number{ font-size: 56px;}

    .rate .person strong{ font-size: 88px; }

    .rate .ele .list{ width: 400px; }

    .rate .ele .txt{ margin: 24px auto 16px; }

    .rate .ele .list:last-child{ padding: 16px 8.002px; }

    .rate .ele .list:last-child li{ width: 104px; }

    .rate .ele .list:last-child li:nth-last-child(2){ width: 210px; }

    /* message */
    .message{ margin-top: 0; padding: 80px 0 63.997px;}

    .message >div > p,.message .flex p{ margin-bottom: 48px; font-size: 18px; }

    .message > div::before{ width: 216px; height: 216px; top: -24px; right: 80px; }

    .message .flex{ gap: 48px; }

    .message .flex .img{ width: 288px; }

    .message .flex p{ width: 400px; margin-top: 40px; }

    .message .line{ margin-top: 40px; font-size: 32.003px; }

    .message .line span{ text-underline-offset: -32.003px; text-decoration-thickness: 40px; }

    .message ul{ gap: 40px; }

    .message li{ padding-left: 32px; gap: 40px; box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25); border-top-right-radius: 20px;}

    .message li .img{ width: 160px; }

    .message li p{ font-size: 24px; }

    .message li .eng{ font-size: 162px; right: 27px; }

    .message .recommend{ margin-top: 40px; font-size: 32px; }

    /* curriculum */

    .curriculum{ border-top-left-radius: 2.667vw; border-top-right-radius: 2.667vw; padding: 56px 0; margin-top: -40px; }

    .curriculum h2{ margin-bottom: 40px; }

    .tabs label,.tabs label:is(:nth-child(2),:nth-child(10),:nth-child(12),:nth-child(14)) {
    min-width: unset;
    width: 104px;
    padding: 8.002px 16px;
    margin: 16px 2px 0;
    }
    
    .tabs label:nth-child(2){ width: 112px; }

    .tab-content {
    width: 800px;
    padding: 56px 48px;
    margin-top: 32.003px;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    }

    .tab-content h3,.tab-content h4{ margin-bottom: 40px; font-size: 28px;  text-underline-offset: -8px; text-decoration-thickness: 16px; }

    .tab-content h4{ margin-bottom: 32.003px; }

    .tab-content h5{ margin: 0 0 16px 8.002px; font-size: 20px; }

    .tab-content > div:not(.price){ margin-bottom: 56px; }

    .tab-content >div >p{ font-size: 18px; line-height: 2; }

    .tab-content .img{ margin-bottom: 24px; }

    .tab-content th{ width: 117.998px; font-size: 18px; }

    .tab-content td{ padding: 16px 20px; }

    .tab-content td p,.tab-content .price td:last-child{ font-size: 14px; }

    .tab-content td .copy{ margin-bottom: 4px; }

    .tab-content td .copy,.tab-content .option{ font-size: 16px;  }

    .tab-content .price th{ width: 176.002px; font-size: 18px; }

    .tab-content .price .attention:nth-last-child(2) { margin: 12px auto 2px; }

    .school {
        padding: 88px 0 96px;
    }

    .school h2::before,.school h2::after { bottom: -132px; }

    .school h2::before {
    width: 176.002px;
    height: 120px;
    left: 0;}

    .school h2::after {
    width: 114px;
    height: 80.002px;
    right: 0;
    }

    .school .attention {
        position: relative;
        z-index: 10;
        font-size: 22px;
        margin: 40px auto;
    }

    .school .attention span {
        font-size: 16px;
    }

    .school ul {
        gap: 32px 24px;
        justify-content: center;
    }

    .briefing{ width: 320px; padding: 24px 0; margin-top: 64px; font-size: 20px; box-shadow: 0 4px 4px rgba(0, 0, 0, .25); }

    .mordal-trigers {
        width: 248px;
        height: 88px;
        line-height: 88px;
        font-size: 18px;
        box-shadow: 0 4px 4px 0 rgba(0, 0, 0, .25);
    }

    .modal-style {
        width: 560px;
        padding: 32px 0;
        top: 50%;
    }

    .modal-style div {
        width: 480px;
        margin: 0 auto;
        overflow: visible;
    }

    .modal-style h3 {
        font-size: 32px;
    }

    .modal-style h3 span {
        padding: 9px 14px;
        margin: 0 auto 0 20px;
        font-size: 20px;
    }

    .modal-style h3 button {
        height: 40px;
        padding: 0px 10px;
        margin-top: 6px;
        font-size: 20px;
    }

    .modal-style iframe {
        margin: 16px auto;
    }

    .online-modal>div>img,
    .online-modal a:last-child {
        margin-top: 16px;
    }

    .modal-style p {
        font-size: 16px;
    }

    .modal-style .direction {
        margin: 16px auto;
    }

    .modal-style a {
        padding: 16px 0;
    }

    .modal-style a span {
        margin-left: 10px;
    }

    .question {
        padding: 64px 0 48px;
    }

    .question h2 {
        margin-bottom: 64px;
    }

    .question dl {
        margin-bottom: 24px;
        box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
    }

    .question dt {
        height: 64px;
        padding: 0 32px;
    }

    .question dt br {
        display: none;
    }

    .question dt::before {
        right: 32px;
    }

    .question dd {
        padding: 16px 32px;
        font-size: 16px;
    }

    .benefits { padding: 200.003px 0 80.002px;border-radius: 2.667vw; }

    .benefits h2::before{ height: 16px; top: -96px; }

    .benefits h2::after{ width: 128px; height: 80px;  top: -120px; }

    .benefits ul{ justify-content: center; gap: 48px; margin-top: 63.997px; }

    .benefits li{ width: 327.998px; height: 435px; }

    .benefits li h3{ min-height: 88px; margin-top: 32px; font-size: 24px; margin-bottom: 16px; }

    .benefits li p{ padding: 0 24px; font-size: 20px; line-height: 2; text-align: left; }

    /* flow */
    .flow{ padding: 120px 0 ; margin-top: -40px; }

    .flow h2{ margin-bottom: 63.997px; } 

    .flow ul{ gap: 104.003px; }

    .flow li{ box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25); }

    .flow li:not(:last-child):after{ width: 72px; height: 24px; bottom: -63.997px; }
    
    .flow h3{ font-size: 28px; }

    .flow h3 span{ width: 30%; }

    .flow h3 p{ width: 70%; }

    .flow h3 span,.flow h3 p{ padding: 24px 0; }

    .flow img{ height: 120px; margin: 40px auto 32.003px; }

    .flow li:nth-last-child(2) img{ height: 96px; }

    .flow li > p{ padding: 0 72px 40px; font-size: 18px; }

    .flow li:last-child h3{ padding: 27.998px 0; }

    .flow li:last-child::before,.flow li:last-child::after{ width: 192px; height: 192px; bottom: -92.002px; }
    
    .flow li:last-child::before{ left: 4%; }

    .flow li:last-child::after{ right: -4%; }

    .flow li .attention{ margin-top: 12px; }

    /* form */

    .form { padding: 120px 0; }

    .form h2 { margin-bottom: 32px; }

    .form>div { border-top-right-radius: 2.667vw; padding: 48px; width: 800px; margin: 0; }

    .form table { margin: 0; }

    .form th,.form td { width: 100%; }

    .form th { margin-bottom: 8px; }

    .form th p{ font-size: 20px; }

    .form th strong,.form th span { margin-left: 8px; font-size: 18px; }

    .form td { margin-bottom: 48px; }

    .form td .wpcf7-select,.form td .wpcf7-text { width: 100%; }

    .form tr:first-child td .wpcf7-list-item { margin-bottom: 8px; font-size: 18px; }

    .form td span>input,.form td span>textarea,.form td span>select { padding: 4px 12px; }

    .form td span input[type="checkbox"] {
        width: 18px;
        height: 18px;
    }

    .form tr:nth-child(2) td span::after,
    .form tr:nth-child(4) td span::after {
        width: 16px;
        height: 12px;
        top: 4px;
        right: 16px;
    }

    .form td textarea { height: 160px; }

    .form tr:last-child td p:last-child{ margin-top: 32px; }

    .form .btn{ display: block; margin: 0 auto; }

    .form .btn input { width: 640px; padding: 32px 0; box-shadow: 0 3.998px 3.998px rgba(0, 0, 0, .25); font-size: 20px; }

    .confirm .form{ padding: 80px; }

    .confirm .form tr:last-child td p:last-child { margin-top: 8px; }

    .confirm .btn input:first-child { border: 2px solid #d3d3d3; margin-bottom: 32px; }

    .complete { height: calc(100svh - 72px); padding: 120px 0; }

    .complete h2 { font-size: 40px; }

    .complete p { margin: 40px auto; }

    .complete a { width: 400px; margin: auto; }

    #page-top a { width: 40px; height: 40px; }

    footer { padding: 16px; height: 72px; }
    
    footer p:first-child{ margin-bottom: 8px; }

}