@charset "UTF-8";
@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Roboto:wght@300;400;700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Zen+Old+Mincho:wght@400;500;600;700;900&display=swap);
:root {
    --whitecolor: #ffffff;
    --blackcolor: #000000;
    --color1: #ce573f;
    --color2: #f6f6f2;
    --color3: #272626;
    --color4: #e2cfce;
    --color5: #d77a75;
    --contents-width: 980px;
    --contents-width2: 860px;
}
.text-white{
    color: var(--whitecolor);
}
.text-black{
    color: var(--blackcolor);
}
.bg-white{
    background-color: var(--whitecolor);
}
.bg-black{
    background-color: var(--blackcolor);
}

body {
	width: 100%;
    font-family: "Zen Old Mincho", "Noto Sans JP", sans-serif, "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", "Osaka", "ＭＳ Ｐゴシック", "MS PGothic", Arial, Helvetica, Verdana;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--color3);
    background-color: var(--color2);
}
html{
    font-size: 62.5%;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
@media screen and (max-width:980px){
	html{
		font-size: 1vw;
	}
}
@media screen and (max-width:750px){
	html{
        /*
		font-size: 1.3333vw;
        */
        font-size: 1.8vw;
	}
}
@media screen and (max-width:480px){
    /*
	html{
		font-size: 2.25vw;
	}
    */
}
/*************
文字関連
*************/
.mincho{
    font-family: "Zen Old Mincho", serif;
    font-weight: 400;
    font-style: normal;
}
/*************
画像関連
*************/
picture{
    display: block;
}
img{
    max-width: 100%;
    height:auto;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}
.image img{
    display: block;
    margin-left: auto;
    margin-right: auto;
}
video{
    display: block;
    filter: drop-shadow(0px 0px rgba(0, 0, 0, 0));
    border: none;
    outline: none;
}
/*************
横並び
*************/
/**flex**/
.flex-wrap{
    display: flex;
    flex-wrap: wrap;
}
.flex-wrap.reverse{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
}
.flex-wrap.align-center{
    align-items: center;
}
.flex-wrap.align-stretch{
    align-items: stretch;
}
/**grid**/
.grid-wrap{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
/**float**/
.float-wrap::after{
    content: "";
    display: block;
    clear: both;
}
.float-wrap .float-left{
    float: left;
}
.float-wrap .float-right{
    float: right;
}
/*************
accordion-wrap
*************/
.accordion-wrap dt{
    position: relative;
    cursor: pointer;
}
.accordion-wrap dt:after{
    content: "+";
}
.accordion-wrap dt.active:after{
    content: "-";
}
.accordion-wrap dd{
    display: none;
}
/*************
scroll-wrap
*************/
.scroll-wrap{
	opacity: 0;
	transition: all 1s ease-in-out;
}
.scroll-wrap.slow{
	transition: all 1.5s ease-in-out;
}
.scroll-wrap.fast{
	transition: all 0.5s ease-in-out;
}
.scroll-wrap.is-active{
	opacity: 1;
}
/**left-right**/
.scroll-wrap.left-right{
	transform: translateX(-25%);
}
.scroll-wrap.left-right.is-active{
	transform: translateX(0%);
}
/**right-left**/
.scroll-wrap.right-left{
	transform: translateX(25%);
}
.scroll-wrap.right-left.is-active{
	transform: translateX(0%);
}
/**bottom-top**/
.scroll-wrap.bottom-top{
	transform: translateY(2.5rem);
}
.scroll-wrap.bottom-top.is-active{
	transform: translateY(0%);
}
/**top-bottom**/
.scroll-wrap.top-bottom{
	transform: translateY(-25%);
}
.scroll-wrap.top-bottom.is-active{
	transform: translateY(0%);
}

/*************

*************/
.full-none{
    display: none;
}
.xs-block{
    display: none;
}
.brackets-start{
    margin-left: -0.5em;
}
.brackets-end{
    margin-right: -0.5em;
}
.box-shadow{
    box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.16);
}
/*************
floating-banner
*************/
.floating-banner{
    position: fixed;
    bottom: -27rem;
    left: 0;
    right: 0;
    transition: all 0.75s ease-in-out;
    z-index: 9999999;
}
.floating-banner.UpMove{
    bottom: 0;
}
/*************
btn
*************/
.cta-wrap .btn{
    display: block;
    position: relative;
    height: auto;
    overflow: hidden;
    border-radius: 100vh;
    padding: 0;
    box-sizing: border-box;
    font-size: 4.2rem;
    color: var(--whitecolor);
    text-align: center;
    padding: 1.2em 0.5em;
    margin: 0.75em 0;
    font-weight: 600;
    letter-spacing: 0.05em;
    width: 630px;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    transition: .3s;
    font-family: "Noto Sans JP";
}
.cta-wrap .btn:hover{
    box-shadow: unset !important;
    transform: translateY(4px);
}
.cta-wrap .btn::before{
    content: "";
    display: block;
    transform: rotate(45deg);
    position: absolute;
    top: calc(50% - 2px);
    right: 1.25em;
    width: 0.5em;
    height: 0.15em;
    border-radius: 9999px;
    transform-origin: calc(100% - 2px) 50%;
    background-color: var(--whitecolor);
}
.cta-wrap .btn::after{
    content: "";
    display: block;
    transform: rotate(-45deg);
    position: absolute;
    top: calc(50% - 2px);
    right: 1.25em;
    width: 0.5em;
    height: 0.15em;
    border-radius: 9999px;
    transform-origin: calc(100% - 2px) 50%;
    background-color: var(--whitecolor);

}
.cta-wrap .btn.btn-apply{
    background-color: var(--color1);
    box-shadow: 0px 5px 0px color-mix(in srgb, var(--color1) 80%, #000000);
}
.cta-wrap .btn.btn-shop{
    background-color: var(--whitecolor);
    box-shadow: 0px 5px 0px color-mix(in srgb, var(--whitecolor) 80%, #000000);
    color: var(--blackcolor);
}
.cta-wrap .btn.btn-shop::before{
    background-color: var(--blackcolor);
}
.cta-wrap .btn.btn-shop::after{
    background-color: var(--blackcolor);
}
/*************
header
*************/
header{
    /*width: 1920px;*/
    width: 1536px;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 0 2%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    max-width: 80%;
    position: fixed;
    z-index: 999999;
}
header h1{

}
header .cta-wrap{

}
header .cta-wrap .btn{
    /*
    font-size: 3rem;
    padding: 0.5em;
    width: 400px;
    margin: 0.75em 0;
    margin-left: auto;
    margin-right: 0;
    */
    font-size: 2rem;
    padding: 0.75em 0.5em;
    width: 300px;
    margin: 0.75em 0;
    margin-left: auto;
    margin-right: 0;
}
header .cta-wrap .btn:hover{
    transform: none;
    opacity: 0.8;
}
header .cta-wrap .btn.btn-apply{
    box-shadow: none;
    outline: 0.2rem solid #ffffff;
}
header .cta-wrap .btn:before{
    display: none;
}
header .cta-wrap .btn:after{
    display: none;
}
/*************
main
*************/
main{
    overflow-x: hidden;
}
/*************
section
*************/
section:not(#kv) h2{
    font-size: 3.6rem;
    box-sizing: border-box;
    font-weight: 700;
}
section:not(#kv,.cta-block) h2{
    width: var(--contents-width2);
    max-width: 100%;
    padding-top: 5rem;
    padding-bottom: 5rem;
    margin-bottom: 2rem;
    line-height: 1.333333;
    margin-left: auto;
    margin-right: auto;
}
section p{
    font-size: 1.6rem;
    line-height: 1.75;
    font-weight: 600;
}
section .text-wrap p{
    margin-bottom: 1em;
}
section .text-wrap p:last-of-type{
    margin-bottom: 0;
}
section time{
    font-size: 1.2rem;
    font-family: "Roboto", sans-serif;
    color: var(--color11);
}
section .contents{
    width: var(--contents-width);
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}
/*************
cta-block
*************/
.cta-block{
    padding-top: 2rem;
    padding-bottom: 2rem;
}
.cta-block:not(footer .cta-block){
    margin-top: 5rem;
    margin-bottom: 2rem;
}
#kv + .cta-block{
    margin-top: -3rem;
    max-width: 95%;
    margin-left: auto;
    margin-right: auto;
}
.cta-block .contents{
    width: var(--contents-width);
}
.cta-block.cta-block2{
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0;
}
.cta-block.cta-block2 .contents{
    background-image: url(../img/cta2_bg_pc.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-sizing: border-box;
    padding: 8rem 2rem;
    position: relative;
}
.cta-block.cta-block2 .ic001{
    position: absolute;
    right: 5%;
    top: -15%;
}
.cta-block.cta-block2 h2{
    width: max-content;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    margin-bottom: 8rem;
}
/*************
kv
*************/
#kv{
    position: relative;
    /*height: calc(100dvh - 550px);*/
    max-height: 80dvh;
    overflow: hidden;
    width: 1920px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}
@media(min-aspect-ratio: 1280 / 631){
    #kv{
        max-height: 100dvh;
    }
}
#kv > video{
    /* width: 80%;
    margin-left: auto;
    margin-right: auto; */
}

#kv .main_kv video{
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

#kv .text-wrap{
    /*
    position: absolute;
    top: 0;
    left: 55%;
    bottom: 0;
    margin-top: auto;
    margin-bottom: 3%;
    height: max-content;
    max-width: 45%;
    z-index: 1;
    */
    position: absolute;
    top: 0;
    left: 60%;
    bottom: 0;
    margin-top: auto;
    margin-bottom: 3%;
    height: max-content;
    max-width: 45%;
    z-index: 1;
}
#kv .text-wrap h2{
    width: max-content;
    /*
    max-width: 85%;
    */
    max-width: 61%;
}
#kv .text-wrap h3{
    width: max-content;
    /*max-width: 55%;*/
    max-width: 50%;
    margin-top: 2rem;
    margin-bottom: 2rem;
}
#kv .text-wrap .price{
    width: max-content;
    /*max-width: 40%;*/
    max-width: 35%;
}
#kv .wave{
    position: absolute;
    height: 8vw;
    width: 100%;
    bottom: 0;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='1932px' height='160px'%3E%3Cpath fill-rule='evenodd' fill='rgb(246, 246, 242)' d='M3.1000,116.001 C3.1000,116.001 97.644,48.317 243.1000,81.999 C390.356,115.683 409.644,116.316 527.1000,87.999 C646.356,59.683 693.644,72.316 812.000,97.1000 C930.356,123.681 1007.644,94.313 1116.000,41.998 C1224.356,-10.314 1315.644,-15.682 1447.1000,41.998 C1580.356,99.682 1603.644,112.316 1728.000,89.999 C1852.356,67.685 1931.1000,105.999 1931.1000,105.999 L1931.1000,160.000 L0.000,160.000 L3.1000,116.001 Z'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: repeat-x;
    background-size: cover;
}

/*************
landscape
*************/
#landscape{

}
#landscape .contents{
    position: relative;

}
#landscape h2{

}
#landscape .item-contents{
    background-image: url(../img/landscape_bg_pc.png);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: contain;
}
#landscape .item-contents .item{
    width: max-content;
    max-width: 100%;
    margin-left: 0;
    margin-right: auto;
}
#landscape .item-contents .item:nth-last-of-type(2n){
    margin-left: auto;
    margin-right: 0;
}

/*************
new-experience
*************/
#new-experience{
    overflow-x: hidden;
}
#new-experience .contents{
    background-image: url(../img/new-experience_bg_pc.png);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-bottom: 25rem;
}
#new-experience h2{

}
#new-experience .item-contents{
    width: var(--contents-width2);
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}
#new-experience .item-contents .item{
    margin-bottom: 10rem;
}
#new-experience .item-contents .item h3{
    font-size: 4rem;
    margin-bottom: 0.5em;
    font-weight: 600;
}
#new-experience .item-contents .item p{
    font-size: 2.4rem;
}
#new-experience .item-contents .item:nth-of-type(1){
    width: max-content;
    max-width: calc(100% - 7em);
    margin-left: 10rem;
    border-left: 0.3rem solid #cf5e46;
    padding-left: 2em;
    padding-top: 2em;
    padding-bottom: 2em;
}
#new-experience .item-contents .item:nth-of-type(2){
    width: max-content;
    max-width: 100%;
    margin-right: auto;
    margin-left: 0;
}
#new-experience .item-contents .item:nth-of-type(3){
    width: max-content;
    max-width: 100%;
    margin-right: 0;
    margin-left: auto;

}
#new-experience .item-contents .item:nth-of-type(4){
    width: max-content;
    max-width: 100%;
    margin-right: auto;
    margin-left: 0;
}
#new-experience .item-contents2{
    position: relative;
    width: var(--contents-width2);
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    margin-bottom: 5rem;
}
#new-experience .item-contents2 .item:nth-of-type(1){
    width: max-content;
    max-width: 100%;
    margin-right: 0;
    margin-left: auto;
}
#new-experience .item-contents2 .item:nth-of-type(2){
    width: max-content;
    max-width: 100%;
    margin-right: auto;
    margin-left: 0;
    margin-top: -30rem;
}
#new-experience .item-contents2 .item:nth-of-type(3){
    width: max-content;
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
}
#new-experience .merit-contents{
    width: var(--contents-width2);
    margin-left: auto;
    margin-right: auto;
    max-width: 95%;
    background-color: rgb(from var(--whitecolor) r g b / 0.5);;
    border: 2px solid var(--whitecolor);
    box-sizing: border-box;
    padding: 5rem 3rem;
    margin-top: 15rem;
    margin-bottom: 7rem;
    position: relative;
    counter-reset: mycounter;

}
#new-experience .merit-contents::before{
    content: "";
    display: block;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    background-color: var(--color1);
    position: absolute;
    top: -2.5rem;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}
#new-experience .merit-contents h3{
    text-align: center;
    font-size: 6rem;
    font-weight: 600;
    line-height: 1.35;
}
#new-experience .merit-contents .merit{
    display: flex;
    margin-top: 5rem;
    margin-bottom: 5rem;
    width: 700px;
    max-width: 95%;
    margin-left: auto;
    margin-right: auto;
}
#new-experience .merit-contents .merit h4{
    font-size: 4rem;
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 1em;
    letter-spacing: 0.25em;
}
#new-experience .merit-contents .merit h4::before{
    counter-increment: mycounter;
    content: counter(mycounter, decimal-leading-zero);
    display: block;
    color: #c3b54f;
    font-size: 15rem;
    font-weight: 400;
    line-height: 1;
    margin-bottom: 0.1em;
    letter-spacing: normal;
}
#new-experience .merit-contents .merit p{
    font-size: 2.4rem;
}
#new-experience .merit-contents h3 span{
    font-size: 65%;
    display: block;
}
#new-experience .merit-contents .merit:nth-of-type(2n){
    flex-flow: row-reverse;
    text-align: end;
}
#new-experience .merit-contents .merit .text-wrap{
    width: 100%;
    margin-top: 5rem;
    position: relative;
    z-index: 1;
}
#new-experience .merit-contents .merit .img-wrap{
    width: max-content;
    position: absolute;
}
#new-experience .merit-contents .merit:nth-of-type(2n+1) .img-wrap{
    right: -13%;
    width: 64%;
}
#new-experience .merit-contents .merit:nth-of-type(2n) .img-wrap{
    left: -11%;
    width: 66%;
}
/*************
culture
*************/
#culture{

}
#culture .contents{
    background-image: url(../img/culture_bg_pc.png);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: contain;
    margin-top: -36rem;
    padding-top: 35rem;
}
#culture h2{

}
#culture .item-contents{
    width: 100%;
}
#culture .item-contents2{
    width: var(--contents-width2);
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    margin-top: 10rem;
}
#culture .item-contents2 .item{
    margin-bottom: 10rem;
    position: relative;
    padding-left: 10rem;
    padding-top: 1rem;
}
#culture .item-contents2 .item::before{
    content: "";
    display: block;
    background-image: url(../img/culture_img002-001_pc.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 6.4rem;
    aspect-ratio: 1 / 1;
    position: absolute;
    top: 0;
    left: 0;
}
#culture .item-contents2 .item::after{
    content: "";
    display: block;
    /*border-left: 0.6rem dotted #d6c2b5;*/
    background-image: radial-gradient(circle, #d6c2b5 2px, transparent 2px), radial-gradient(circle, #d6c2b5 2px, transparent 2px), radial-gradient(circle, #d6c2b5 2px, transparent 2px), radial-gradient(circle, #d6c2b5 2px, transparent 2px);
    background-position: left top, right top, left bottom, left top;
    background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
    background-size: 2.1rem 0.6rem, 0.6rem 2.1rem, 2.1rem 0.6rem, 0.6rem 2.1rem;
    width: 0.6rem;
    position: absolute;
    top: 9rem;
    left: 3rem;
    height: calc(100% - 5rem);
}
#culture .item-contents2 .item h3{
    font-size: 4rem;
    font-weight: 700;
    margin-bottom: 1em;
}
#culture .item-contents2 .item h4{
    font-size: 3.6rem;
    display: inline;
    background-color: var(--color1);
    color: var(--whitecolor);
    line-height: 2;
    font-weight: 500;
}
#culture .item-contents2 .item p{
    font-size: 2.4rem;
    margin-top: 1em;
}
/*************
experience
*************/
#experience{

}
#experience .contents{
    max-width: 95%;
}
#experience h2{

}
#experience .item-contents{
    width: max-content;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}
#experience #lesson{
    background-image: url(../img/experience_bg_pc.png);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: 5rem;
    padding-top: 15rem;
    padding-bottom: 30rem;
}
#experience #lesson h3{
    font-size: 6rem;
    line-height: 1.5;
    width: var(--contents-width2);
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    margin-bottom: 0.5em;
}
#experience #lesson h3 span{
    display: block;
    font-size: 3.6rem;
    color: var(--color1);
    letter-spacing: 0.25em;
}
#experience #lesson > p{
    font-size: 2.4rem;
    width: var(--contents-width2);
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}
#experience #lesson .lesson-wrap{
    width: var(--contents-width2);
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    margin-top: 7rem;
}
#experience #lesson .lesson-wrap .top-wrap{
    background-color: var(--color4);
    border-radius: 2rem 2rem 0 0;
    padding: 3rem 5rem;
}
#experience #lesson .lesson-wrap .top-wrap h4{
    font-size: 3.6rem;
    line-height: 1.75;
    letter-spacing: 0.1em;
    font-weight: 700;
}
#experience #lesson .lesson-wrap .top-wrap .grid-wrap{
    align-items: center;
}
#experience #lesson .lesson-wrap .top-wrap .grid-wrap .left-wrap{

}
#experience #lesson .lesson-wrap .top-wrap .grid-wrap .right-wrap{
    background-color: var(--whitecolor);
    border-radius: 1rem;
    box-sizing: border-box;
    padding: 3rem;
}
#experience #lesson .lesson-wrap .top-wrap .grid-wrap .left-wrap .price{
    font-size: 6rem;
    font-weight: normal;
}
#experience #lesson .lesson-wrap .top-wrap .grid-wrap .left-wrap p:not(.price){
    font-size: 2.4rem;
    letter-spacing: 0.1em;
    font-family: "Noto Sans JP";
}
#experience #lesson .lesson-wrap .top-wrap .grid-wrap .left-wrap .price::before{
    content: "￥";
    font-size: 80%;
}
#experience #lesson .lesson-wrap .top-wrap .grid-wrap .left-wrap .price::after{
    content: "（税込）";
    font-size: 35%;
}
#experience #lesson .lesson-wrap .top-wrap .grid-wrap .right-wrap h5{
    font-size: 2.4rem;
    text-align: center;
    margin-bottom: 0.5em;
    font-weight: 600;
    letter-spacing: 0.1em;
    position: relative;
}
#experience #lesson .lesson-wrap .top-wrap .grid-wrap .right-wrap h5::before{
    content: "";
    display: block;
    width: calc(50% - 2em);
    height: 0.2rem;
    background-color: var(--color5);
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
}
#experience #lesson .lesson-wrap .top-wrap .grid-wrap .right-wrap h5::after{
    content: "";
    display: block;
    width: calc(50% - 2em);
    height: 0.2rem;
    background-color: var(--color5);
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
}
#experience #lesson .lesson-wrap .top-wrap .grid-wrap .right-wrap p{
    color: var(--color5);
    font-size: 2.4rem;
    text-align: center;
    line-height: 1.25;
    font-weight: 600;
    font-family: "Noto Sans JP";

}
#experience #lesson .lesson-wrap .top-wrap .grid-wrap .right-wrap p span{
    font-size: 1.8rem;
}
#experience #lesson .lesson-wrap .top-wrap .grid-wrap .right-wrap ul{
    margin-top: 1rem;
    margin-top: 2.5rem;
    width: max-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}
#experience #lesson .lesson-wrap .top-wrap .grid-wrap .right-wrap ul li{
    font-size: 2rem;
    font-family: "Noto Sans JP";
    font-weight: 500;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}
#experience #lesson .lesson-wrap .top-wrap .grid-wrap .right-wrap ul li::before{
    content: "";
    display: inline-block;
    vertical-align: middle;
    background-image: url(../img/experience_img003-001_pc.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 2.5rem;
    aspect-ratio: 25 / 26;
    margin-right: 1rem;
    margin-bottom: 0.15em;
}
#experience #lesson .lesson-wrap .top-wrap .grid-wrap .right-wrap ul li:first-of-type{
    margin-top: 0;
}
#experience #lesson .lesson-wrap .top-wrap .grid-wrap .right-wrap ul li:last-of-type{
    margin-bottom: 0;
}
#experience #lesson .lesson-wrap .bottom-wrap{
    background-color: var(--whitecolor);
    padding: 3rem 5rem;
    border-radius: 0 0 2rem 2rem;
}
#experience #lesson .lesson-wrap .bottom-wrap h5{
    font-size: 2.4rem;
    text-align: center;
    margin-bottom: 1em;
}
#experience #lesson .lesson-wrap .bottom-wrap > p{
    font-size: 2rem;
}
#experience #lesson .lesson-wrap .bottom-wrap .set-wrap{
    margin-top: 3rem;
}
#experience #lesson .lesson-wrap .bottom-wrap .set-wrap h6{
    font-size: 2.4rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 1em;
    font-family: "Noto Sans JP";
}
#experience #lesson .lesson-wrap .bottom-wrap .set-wrap h6 .price{
    font-size: 3.6rem;
    color: var(--color5);
    margin-left: 0.5rem;
    font-family: "Zen Old Mincho";
}
#experience #lesson .lesson-wrap .bottom-wrap .set-wrap h6 .price::after{
    content: "（税込）";
    font-size: 35%;
}
#experience #lesson .lesson-wrap .bottom-wrap .set-wrap .img-wrap{

}
#experience #lesson .lesson-wrap .bottom-wrap .set-wrap .text-wrap{
    margin-top: 2rem;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
}
#experience #lesson .lesson-wrap .bottom-wrap .set-wrap .text-wrap h7{
    background-color: var(--color5);
    color: var(--whitecolor);
    width: max-content;
    max-width: 100%;
    border-radius: 2rem;
    font-size: 2rem;
    display: block;
    box-sizing: border-box;
    padding: 0.5em 0.75em;
    margin-bottom: 0.5em;
}
#experience #lesson .lesson-wrap .bottom-wrap .set-wrap .text-wrap p{
    font-size: 2rem;
}
#experience #lesson .lesson-wrap .bottom-wrap .set-wrap .text-wrap p span{
    font-size: 80%;
}
#experience .item-contents3{
    width: max-content;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    margin-top: 10rem;
}
/*************
voice
*************/
#voice{

}
#voice .contents{

}
#voice .contents .item-contents{
    margin-bottom: -12rem;
    margin-top: 15rem;
}
#voice .contents .item-contents2{
    width: var(--contents-width2);
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}
#voice .contents .item-contents3{
    background-image: url(../img/voice_bg_pc.png);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: 5rem;
    padding-top: 10rem;
    padding-bottom: 15rem;
}
#voice .contents .item-contents3 .sub-contents{
    width: var(--contents-width2);
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}
#voice .contents .item-contents3 .sub-contents .item:nth-of-type(1){
    position: relative;
    width: max-content;
    max-width: 100%;
    margin-left: 0;
    margin-right: auto;
    z-index: 1;
}
#voice .contents .item-contents3 .sub-contents .item:nth-of-type(2){
    position: relative;
    width: max-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: 0;
    margin-top: -30rem;
}
#voice .contents .item-contents3 .sub-contents .item:nth-of-type(3){
    position: relative;
    width: max-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: -13rem;
}
#voice .contents .item-contents3 .sub-contents .text-wrap{
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
}


/*************
footer
*************/
footer{

}
footer .sub-contents{
    padding-top: 7rem;
    padding-bottom: 7rem;
    text-align: center;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
}
footer #copyright {
    background-color: var(--color3);
}
footer #copyright p{
    text-align: center;
    color: var(--whitecolor);
    font-size: 2.4rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

@media screen and (max-width:980px){
    header{
        max-width: 100%;
    }
    /*************
    kv
    *************/
    #kv > video{
        width: 100%;
    }

    #kv .main_kv{
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    #kv .text-wrap h2{
        max-width: 85%;
    }
    #kv .text-wrap h3{
        max-width: 55%;
    }
    #kv .text-wrap .price{
        max-width: 40%;
    }

}

@media screen and (max-width:750px){
    .full-none{
        display: block;
    }
    .sp-none{
        display: none;
    }
    /*************
    btn
    *************/
    .cta-wrap .btn{
        font-size: 3.25rem;
        padding: 1.2em 0.5em;
        margin: 0.75em 0;
        font-weight: 600;
        margin-left: auto;
        margin-right: auto;
        max-width: 100%;
    }
    /*************
    header
    *************/
    header{
        padding: 0 5%;
        background-color: var(--color2);
    }
    header h1 {
        max-width: 46%;
    }
    header .cta-wrap{
        width: 45%;
    }
    header .cta-wrap .btn{
        width: 100%;
        max-width: 100%;
        font-size: 1.8rem;
        padding: 1em;
    }
    /*************
    cta-block
    *************/
    .cta-block.cta-block2 .contents{
        background-image: url(../img/cta2_bg_sp.png);
        background-size: cover;
        padding: 8rem 2rem;
        max-width: 100%;
    }
    .cta-block.cta-block2 h2{
        margin-left: 5%;
        max-width: 85%;
    }
    .cta-block.cta-block2 .ic001{
        max-width: 30%;
    }
    /*************
    kv
    *************/
    #kv{
        max-height: 110dvh;
        min-height: 1280px;
        padding-top: 33rem;
    }
    #kv > video{
        width: auto;
        height: 100%;
        margin-left: -50%;
    }
    #kv .text-wrap{
        position: static
    }
    #kv .text-wrap h2{
        width: 95%;
        position: absolute;
        left: 0;
        right: 0;
        top: 12rem;
        margin-left: auto;
        margin-right: auto;
    }
    #kv .text-wrap h3{
        position: absolute;
        top: 45rem;
        right: 5%;
    }
    #kv .text-wrap .price{
        position: absolute;
        bottom: 8rem;
        right: 5%;
        z-index: 1;
        max-width: 50%;
    }
    #kv .wave{
        height: 20vw;
    }
    /*************
    section
    *************/
    section:not(#kv,.cta-block) h2{
        padding-top: 0rem;
    }
    /*************
    landscape
    *************/
    #landscape{

    }
    #landscape .contents{
        max-width: 100%;
    }
    #landscape h2{
        max-width: 90% !important;
        margin-left: 0 !important;
    }
    #landscape .item-contents{
        background-image: url(../img/landscape_bg_sp.png);
        background-size: cover;
    }
    #landscape .item-contents .item{
        width: max-content;
        max-width: 100%;
        margin-left: 0;
        margin-right: auto;
    }
    #landscape .item-contents .item:nth-last-of-type(2n){
        margin-top: -10rem;
        max-width: 80%;
    }
    /*************
    new-experience
    *************/
    #new-experience{
        margin-top: 15rem;
        overflow-x: hidden;
    }
    #new-experience h2{
        max-width: 90% !important;
    }
    #new-experience .contents{
        background-image: url(../img/new-experience_bg_sp.png);
        max-width: 100%;
        padding-left: 2.5%;
        padding-right: 2.5%;
        background-position-y: 3rem;
    }
    #new-experience .item-contents{
        max-width: 90%;
    }
    #new-experience .item-contents .item h3{
        font-weight: bold;
        line-height: 1.5;
    }
    #new-experience .item-contents .item p{
        font-size: 2.3rem;
    }
    #new-experience .item-contents .item:nth-of-type(1){
        padding-top: 1em;
        padding-bottom: 1em;
        margin-bottom: 2em;
        max-width: calc(100% - 5em);
        margin-left: 8rem;
    }
    #new-experience .item-contents .item:nth-of-type(1) p{
        font-size: 3.2rem;
    }
    #new-experience .item-contents .item:nth-of-type(1) p br{
        display: none;
    }
    #new-experience .item-contents2{
        max-width: 95%;
    }
    #new-experience .item-contents2 .item:nth-of-type(2){
        margin-top: -13rem;
    }
    #new-experience .item-contents2 .item:nth-of-type(3) {
        margin-right: -2.5%;
        margin-left: auto;
        margin-top: -3rem;
    }
    #new-experience .merit-contents{
        padding: 5rem 2rem;
    }
    #new-experience .merit-contents h3 {
        font-size: 3.25rem;
        line-height: 1.75;
    }
    #new-experience .merit-contents h3 span{
        font-size: 85%;
    }
    #new-experience .merit-contents .merit{
        margin-top: 2rem;
        margin-bottom: 2rem;
    }
    #new-experience .merit-contents .merit .text-wrap {
        margin-top: 0rem;
    }
    #new-experience .merit-contents .merit:nth-of-type(2n+1) .img-wrap {
        right: -6%;
        width: 60%;
    }
    #new-experience .merit-contents .merit:nth-of-type(2n) .img-wrap {
        left: -6%;
        width: 70%;
    }
    #new-experience .merit-contents .merit h4{
        font-size: 3.5rem;
    }
    #new-experience .merit-contents .merit:nth-of-type(2n) h4{
        width: max-content;
        margin-left: auto;
        margin-right: 0;
        text-align: left;
    }
    #new-experience .merit-contents .merit h4::before{
        font-size: 12rem;
    }
    #new-experience .merit-contents .merit:nth-of-type(2n) h4::before{
        text-align: right;
    }
    #new-experience .merit-contents .merit:nth-of-type(2n) p{
        text-align: left;
    }
    #new-experience .merit-contents .merit p br{
        display: none;
    }
    /*************
    culture
    *************/
    #culture{

    }
    #culture h2 {
        max-width: 90% !important;
    }
    #culture .contents{
        background-image: url(../img/culture_bg_sp.png);
        margin-top: -26rem;
        padding-top: 35rem;
        max-width: 100%;
        padding-left: 2.5%;
        padding-right: 2.5%;
    }
    #culture .item-contents2{
        max-width: 90%;
    }
    #culture .item-contents2 .item{
        padding-left: 8rem;
    }
    #culture .item-contents2 .item h3{
        line-height: 1.35;
    }
    #culture .item-contents2 .item h4 {
        font-size: 3rem;
        line-height: 1.75;
    }
    #culture .item-contents2 .item p br{
        display: none;
    }

    /*************
    experience
    *************/
    #experience {
        margin-top: 15rem;
    }
    #experience h2{
        max-width: 90% !important;
    }
    #experience .item-contents{
        width: 90%;
    }
    #experience #lesson{
        background-image: url(../img/experience_bg_sp.png);
        background-size: cover;
        width: 100vw;
        margin-left: -5%;
        padding-left: 5%;
        padding-right: 2.5%;
        padding-top: 10rem;
    }
    #experience #lesson h3{
        font-size: 5rem;
        width: 90%;
    }
    #experience #lesson h3 span{
        margin-bottom: 0.5em;
    }
    #experience #lesson > p{
        width: 90%;
    }
    #experience #lesson > p br{
        display: none;
    }
    #experience #lesson .lesson-wrap .top-wrap{
        padding: 3rem;
    }
    #experience #lesson .lesson-wrap .top-wrap h4 {
        font-size: 3rem;
        text-align: center;
    }
    #experience #lesson .lesson-wrap .top-wrap .grid-wrap{
        display: block;
    }
    #experience #lesson .lesson-wrap .top-wrap .grid-wrap .left-wrap .price{
        text-align: center;
    }
    #experience #lesson .lesson-wrap .top-wrap .grid-wrap .left-wrap p:not(.price){
        text-align: center;
    }
    #experience #lesson .lesson-wrap .top-wrap .grid-wrap .left-wrap p:not(.price) br{
        display: none;
    }
    #experience #lesson .lesson-wrap .top-wrap .grid-wrap .right-wrap{
        position: relative;
        margin-top: 10rem;
        border-radius: 0 0 1rem 1rem;
        padding-top: 0;
    }
    #experience #lesson .lesson-wrap .top-wrap .grid-wrap .right-wrap:before{
        content: "";
        display: block;
        width: 100%;
        height: 8rem;
        background-color: var(--whitecolor);
        position: absolute;
        top: -8rem;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        z-index: 0;
        border-radius: 50% / 100% 100% 0 0;
    }
    #experience #lesson .lesson-wrap .top-wrap .grid-wrap .right-wrap h5{
        font-size: 3rem;
    }
    #experience #lesson .lesson-wrap .top-wrap .grid-wrap .right-wrap p{
        font-size: 3.5rem;
        line-height: 1.1;
    }
    #experience #lesson .lesson-wrap .top-wrap .grid-wrap .right-wrap p span{
        font-size: 2.4rem;
        letter-spacing: 0.1em;
    }
    #experience #lesson .lesson-wrap .top-wrap .grid-wrap .right-wrap ul li{
        font-size: 2.8rem;
        font-weight: bold;
    }
    #experience #lesson .lesson-wrap .top-wrap .grid-wrap .right-wrap ul li::before{
        background-image: url(../img/experience_img003-001_sp.png);
        width: 4.8rem;
        aspect-ratio: 1 / 1;
    }
    #experience #lesson .lesson-wrap .bottom-wrap{
        padding: 3rem;
    }
    #experience #lesson .lesson-wrap .bottom-wrap h5{
        font-size: 3rem;
        font-weight: bold;
    }
    #experience .item-contents3{
        margin-right: -7.5%;
    }
    #voice .contents {
        padding-left: 2.5%;
        padding-right: 2.5%;
    }
    #voice .contents .item-contents {
        margin-bottom: -8rem;
        margin-top: 10rem;
        width: 100vw;
        margin-left: -2.5%;
    }
    #voice .contents .item-contents2{
        max-width: 90%;
    }
    #voice .contents .item-contents3{
        background-image: url(../img/voice_bg_sp.png);
        background-size: cover;
        padding-top: 30rem;
        width: 100vw;
        margin-left: -2.5%;
        padding-left: 2.5%;
        padding-right: 2.5%;
        margin-top: -3rem;
    }
    #voice .contents .item-contents3 .sub-contents .item:nth-of-type(1){
        top: -13rem;
        left: -2.5%;
        max-width: 75%;
    }
    #voice .contents .item-contents3 .sub-contents .item:nth-of-type(2){
        right: 2.5%;
        max-width: 60%;
    }
    #voice .contents .item-contents3 .sub-contents .item:nth-of-type(3){
        margin-top: -5rem;
        margin-bottom: 5rem;
        max-width: 85%;
    }
    #voice .contents .item-contents3 .sub-contents .text-wrap{
        margin-left: 5%;
        margin-right: auto;
        max-width: 85%;
    }
}
@media screen and (max-width:480px){
    /*************

    *************/
    .xs-block{
        display: block;
    }
    .xs-none{
        display: none;
    }
    /*************
    kv
    *************/
    #kv {
        height: 95dvh;
        min-height: 760px;
    }
    #kv > video {
        width: auto;
        max-width: none;
        height: 100%;
    }
}


/* モバイル：動画非表示・画像表示 */
.main_kv--pc {
  display: none;
}
.main_kv--sp {
  display: block;
}

/* PC表示時：動画表示・画像非表示 */
@media screen and (min-width: 751px) {
  .main_kv--pc {
    display: block;
  }
  .main_kv--sp {
    display: none;
  }
}