@charset "UTF-8";

/*
以下
@media screen and (max-width: 899px) {
}
以上
@media screen and (min-width: 900px) {
}
*/

dl{
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content:flex-start;
}
dt{
margin-right: 10px;
}




/*------------------------------------------------*/
/*------------------- アンカーメニュー -------------------*/
/*------------------------------------------------*/
.anchor__nav .anchor__nav-list .item span{
border-radius: 20px;
color: var(--color-white);
padding: 3px 10px;
font-size: var(--s12);
margin: 3px;
}
.anchor__nav .anchor__nav-list .item span.type{background-color: #c7c7c7;}
.anchor__nav .anchor__nav-list .item span.language{background-color: #b3b3b3;}



/*------------------------------------------------*/
/*------------------- 全体説明 -------------------*/
/*------------------------------------------------*/
.lesson_op{
background-image:url(../img/school_op_main.webp);
background-size:contain;
background-position: top center;
padding-top: 32vw;
margin-top: 50px;
clip-path: inset(0px 100% 0px 0px round 0px);
}
.lesson_op .content{
background-color: var(--color-white);
padding: 40px;
}
/* アニメ */
.lesson_op.active{
transition: 0.5s cubic-bezier(0.83, 0, 0.17, 1);
clip-path: inset(0px 0px 0px 0px round 0px);
}





/* 説明 */
.lesson_op .lesson_op_info{
display: grid;
column-gap: 30px;
grid-template-columns:1fr 320px;
}
.lesson_op .lesson_op_info .title{
color: var(--color-blue);
font-size: var(--s30);
margin-bottom: 10px;
}
.lesson_op .lesson_op_info .lesson_op_entirety-list .item{
background: var(--color-blue);
color: var(--color-white);
display: inline-flex;
justify-content: center;
align-items: center;
border-radius: 50%;
flex-flow: column;
vertical-align: top;
text-align: center;
width: 150px;
height:150px;
}
/*アニメ */
.lesson_op .lesson_op_info .lesson_op_entirety-list li:last-child.item{
transition-delay: 0.5s;
}

.lesson_op .lesson_op_info .lesson_op_entirety-list .item h4{
font-size: var(--s18);
font-weight: 300;
}

.lesson_op hr{
background-color: var(--color-blue);
margin: 20px 0;
}

/* 詳細 */
.lesson_op .lesson_op_details{
  display: grid;
  gap: 0 30px;
  grid-template-areas:
    "areaA areaC"
    "areaB areaC";
}
.lesson_op .lesson_op_details .lesson_op_details-con{
grid-area: areaA;
}
.lesson_op .lesson_op_details .lesson_op_details-time{
grid-area: areaB;
}
.lesson_op .lesson_op_details .lesson_op_details-time h3{
background-color: var(--category-color-blue);
color: var(--color-white);
padding: 3px 10px;
margin: 20px 0 10px 0;
font-weight: 300;
}
.lesson_op .lesson_op_details .lesson_op_details-time dt{
color: var(--category-color-blue);
font-weight: 600;
font-size: var(--s18);
}
.lesson_op .lesson_op_details .lesson_op_details-list{
grid-area: areaC;
}

/* 支払い方法 */
.lesson_op .ac-box{
margin: 40px 0 40px 0;
}

/* インストラクター */
.lesson_op .lesson_op_instructor{
background-color: var(--color-blue);
column-gap: 10px 10px;
display: grid;
grid-template-columns: 60% 1fr;
}
.lesson_op .lesson_op_instructor .lesson_op_instructor_info{
margin: 30px 40px;
color: var(--color-white);
}
.lesson_op .lesson_op_instructor .lesson_op_instructor_info h3{
font-weight: 300;
line-height: 100%;
margin-top: 20px;
}
.lesson_op .lesson_op_instructor .lesson_op_instructor_info h3 span{
font-size: var(--s30);
font-weight: 400;
vertical-align: middle;
margin-left: 10px;
}
.lesson_op .lesson_op_instructor .lesson_op_instructor_info .border{
height: 1px;
background-color: var(--color-white);
margin: 20px 0 20px -30px;
}
.lesson_op .lesson_op_instructor .lesson_op_instructor_info h4{
background-color: var(--color-black);
display: inline-block;
padding: 3px 10px 5px 10px;
margin-bottom: 10px;
font-weight: 300;
}
.lesson_op .lesson_op_instructor .img{
background-image: url(../img/school_op_instructor.webp);
background-size: cover;
background-position: center;
}




/*------------------------------------------------*/
/*------------------- レッスン内容 -------------------*/
/*------------------------------------------------*/
.lesson .content{
border: 2px solid var(--color-blue);
margin: 120px auto;
}
.lesson .title01{
background-color: var(--color-blue);
padding: 10px;
color: var(--color-white);
margin-top: 0;
margin-bottom: 0;
}

/* レッスン 大枠 */
.lesson_info{
border-top: 2px solid var(--color-blue);
}

.lesson_info .lesson_title{
text-align: center;
margin: 60px 0 20px 0;
}
.lesson_info .lesson_title h3 {
  font-size: var(--s50);
  line-height: var(--s50);
  font-weight: 800;
}
.lesson_info .lesson_title p {
  font-size: var(--s14);
}
html:lang(en) .lesson_info .lesson_title p {
display: none;
}



/* スキー スノーボード */
.info_item{
width: 60%;
text-align: center;
margin: 0 auto 40px auto;
}
.info_item .item{
background-color: var(--color-red);
display: inline-block;
color: var(--color-white);
line-height: 100%;
padding: 5px 20px;
border-radius: 20px;
margin: 0 2px;
}

/* レッスン内容 コース */
.lesson .lesson_info_detail{
margin: 45px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(435px, 1fr));
gap:30px 30px;
}
/* 多言語プライベート */
html:lang(en) .lesson .lesson_info.pv_lesson .lesson_info_detail,
html:lang(ko) .lesson .lesson_info.pv_lesson .lesson_info_detail,
html:lang(zh-CN) .lesson .lesson_info.pv_lesson .lesson_info_detail,
html:lang(zh-TW) .lesson .lesson_info.pv_lesson .lesson_info_detail{
width: 435px;
margin: 45px auto;
}
/* プレミアム（多言語のみ） */
.lesson .lesson_info.pl_lesson .lesson_info_detail{
width: 435px;
margin: 45px auto;
}

.lesson .lesson_info_detail .lesson_info_detail-box{
background-color: var(--color-gray-light);
border-top: 3px solid var(--color-blue);
}
.lesson .lesson_info_detail .lesson_info_detail-box .img{
position: relative;
}
.lesson .lesson_info_detail .lesson_info_detail-box .img img{
width: 100%;
}
.lesson .lesson_info_detail .lesson_info_detail-box .img span{
background-color: var(--color-blue);
color: var(--color-white);
padding: 5px 10px;
position: absolute;
top: 0;
left: 0;
}
.lesson .lesson_info_detail .lesson_info_detail-box .wrap{
margin: 25px;
}
.lesson .lesson_info_detail .lesson_info_detail-box .wrap .title{
text-align: center;
font-size: var(--s24);
}
.lesson .lesson_info_detail .lesson_info_detail-box .wrap .lesson_info_detail-item{
margin: 20px 0 10px 0;
font-size: var(--s14);
}
.lesson .lesson_info_detail .lesson_info_detail-box .wrap .lesson_info_detail-item .item{
background-color: var(--color-blue);
display: inline-block;
color: var(--color-white);
line-height: 100%;
padding: 3px 10px;
margin: 0 5px 0 0;
}
.lesson .lesson_info_detail .lesson_info_detail-box .wrap .lesson_info_detail-time{
background-color: var(--color-white);
padding: 10px;
margin: 10px 0;
}

.lesson .lesson_info_detail .lesson_info_detail-box .wrap .lesson_info_detail-caution{
background-color: var(--color-red);
color: var(--color-white);
text-align: center;
padding: 5px 10px;
margin-top: 10px;
}
.lesson .lesson_info_detail .lesson_info_detail-box .wrap .bt05{margin-top: 10px;}


/* ご予約方法 */
.lesson_reservation{
margin: 45px;
background-color: var(--color-blue-light);
}
.lesson_reservation .title{text-align: center;}
.lesson_reservation .title span{
background-color: var(--color-blue);
color: var(--color-white);
text-align: center;
display: inline-block;
padding: 5px 30px;
font-weight: 300;
}
.lesson_reservation .lesson_reservation-table{
padding: 25px 35px;
  display: grid;
  place-content: center;/*gridの中央配置*/
  place-items: center;/*要素二つ以上ある場合に*/
}
.lesson_reservation .lesson_reservation-table th{
font-weight: 400;
vertical-align: top;
text-align:justify;
text-align-last:justify;
padding: 5px 0;
}
.lesson_reservation .lesson_reservation-table td{
padding: 5px 10px;
}
.lesson_reservation .tel{
font-size: var(--s24);
color: var(--color-black);
font-weight: 600;
}



/*------------------------------------------------*/
/*------------------- 流れ -------------------*/
/*------------------------------------------------*/
.flow .content{
background-color: var(--color-blue-light);
padding: 30px 40px min(20vw, 250px) 40px;
}
.flow .title{
color: var(--color-blue);
text-align: center;
margin-bottom: 30px;
}
.flow .flow_list{
display: grid;
grid-template-columns: 30% 30% 30%;
gap:15px 3%;
}
.flow .flow_list .item{
background-color: var(--color-white);
padding: 10px 20px min(10vw, 50px) 20px;
position: relative;
}
.flow .flow_list .item::before{
content: "";
position: absolute;
display: block;
width: 65%;
height: 3px;
background-color: var(--color-blue);
top: 0;
left: 0;
}
.flow .flow_list .item h3{
color: var(--color-blue);
font-weight: 400;
}
.flow .flow_list .item h3 span{
font-size: var(--s36);
margin-right: 5px;
font-weight: 600;
}

.flow .flow_list .item .img{
position: absolute;
bottom: max(-17vw, -200px);
text-align: center;
}
/*アニメ*/
.flow .flow_list .item.i-02 .img .bound{
animation-delay: 0.3s;
}
.flow .flow_list .item.i-03 .img .bound{
animation-delay: 0.5s;
}




/*------------------------------------------------*/
/*------------会員制スキースクール-------------*/
/*------------------------------------------------*/

.member .content{
border: 2px solid var(--color-blue);
margin: 120px auto;
}
.member .title01{
background-color: var(--color-blue);
padding: 10px;
color: var(--color-white);
margin-top: 0;
margin-bottom: 0;
}
.member .info_item{
margin-top: 20px;
margin-bottom: 20px;
}
.member .wrap{
padding: 40px;
}

/* member_info */
.member .member_info{
  display: grid;
  grid-template-columns: 60% calc(40% - 30px);
  grid-template-rows: auto 1fr;
  align-items: flex-start;
  gap: 10px 30px;
  grid-template-areas:
    "areaA areaA"
    "areaB areaC";
}

.member .member_info .txt{
width: 60%;
margin: 10px auto 30px auto;
  grid-area: areaA;
}

.member .member_info table.member_table {
border-collapse:collapse;
  grid-area: areaB;
}
.member .member_info table.member_table tr{
border:1px solid #dedede;
border-width: 0 0 1px 0;
margin-top: 10px;
padding-bottom: 10px;
display:block;
}
.member .member_info table.member_table th {
width: 110px;
text-align: center;
padding:7px 15px;
background: var(--color-blue-light);
font-weight:normal;
white-space: nowrap; /* 改行しない */
color: var(--color-blue);
text-align:justify;
text-align-last:justify;
}
.member .member_info table.member_table td {
padding:7px 10px;
text-align:left;
vertical-align:top;/*文字の垂直そろえを上揃えに*/
}
/* 申込開始日	*/
.member .member_info table.member_table .offer{
color: var(--color-red);
font-size: var(--s30);
font-weight: 600;
}

.member .member_info table.level th{
width: 200px;
background-color: inherit;
color: inherit;
padding: 0;
vertical-align: top;
}
.member .member_info table.level td{padding:3px 0px 3px 10px;}
.member .member_info table.level tr{
border:0px;
border-width: 0;
margin-top: 0;
padding-bottom: 0;
display:inline;
}

.member .member_info table.member_table .part dl{margin-bottom: 10px;}
.member .member_info table.member_table .part dt{
color: var(--color-blue);
font-size: var(--s20);
font-weight: 600;
margin-top: -5px;
}

.member .member_info .img{  grid-area: areaC;}
.member .member_info .img img{  width: 100%; margin-bottom: 10px;}




/*------------会員特典-------------*/
.member .member_benefit{
background-color: var(--color-blue);
margin: 40px 0;
border-radius: 15px;
padding: 30px 40px;
color: var(--color-white);
}
.member .member_benefit .title{
font-size: var(--s30);
text-align: center;
position: relative;
}
.member .member_benefit .title::after{
content: "";
width: 100px;
height: 2px;
display: block;
background-color: var(--color-red);
position: absolute;
left: 0;
right: 0;
margin: 7px auto 0 auto;
}

.member .member_benefit .member_benefit_li{
margin-top: 40px;
display: grid;
place-content: center;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap:30px 30px;
}
.member .member_benefit .member_benefit_li .item{
position: relative;
}
.member .member_benefit .member_benefit_li h4{
font-size: var(--s14);
position: absolute;
left: 0;
right: 0;
top: -20px;
margin: 0 auto;
display: inline-block;
text-align: center;
color: var(--color-blue);
z-index: 1;
}
.member .member_benefit .member_benefit_li h4 span{
font-size: var(--s30);
margin-left: 2px;
vertical-align:sub;
}
.member .member_benefit .member_benefit_li .txt{
text-align: center;
line-height: 1.3rem;
margin-top: 10px;
}
.member .member_benefit .member_benefit_li .txt span{
color: var(--color-orange);
display: block;
font-weight: 600;
font-size: var(--s18);
}
.member .member_benefit .member_benefit_li .img{
position: relative;
}
.member .member_benefit .member_benefit_li .img img{
width: 100%;
z-index: -1;
}
.member .member_benefit .member_benefit_li .img .img_txt{
position: absolute;
text-align: center;
font-size: var(--s34);
line-height: 2.0rem;
font-weight: 500;
top:32%;
left: 0;
right: 0;
margin: 0 auto;
}
@media screen and (max-width: 1000px) {
.member .member_benefit .member_benefit_li .img .img_txt{
top:36%;
}
}
.member .member_benefit .member_benefit_li .img .img_txt span{
font-size: var(--s20);
}




/*------------申込-------------*/
.member .lesson_reservation{margin: 0;}
.member .lesson_reservation .txt{margin-bottom: -15px;}




/*------------------------------------------------*/
/*-----------------バッジテスト------------------*/
/*------------------------------------------------*/
.badge .content{
background-color: var(--color-blue-light);
padding: 40px;
}
.badge .content .title{
text-align: center;
color: var(--color-blue);
margin-bottom: 20px;
}
.badge .content .txt{
width: 70%;
margin: 0 auto;
}
.badge .content .badge-list{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap:15px 3%;
margin-top: 30px;
}
.badge .content .badge-list .item{
background-color: var(--color-white);
padding: 20px;
position: relative;
}
.badge .content .badge-list .item::before{
content: "";
background-color: var(--color-blue);
height: 3px;
display: block;
width: 70%;
position: absolute;
top:0;
left:0;
}
.badge .content .badge-list .item h3{
color: var(--color-blue);
}
.badge .content .badge-list .item > ul{margin-top: 10px;}




/*------------------------------------------------*/
/*------------日本語か日本語以外か-------------*/
/*------------------------------------------------*/

/* 日本語（auto） */
html:lang(auto) .japan-only{
display: block;
}
html:lang(auto) .jp-other-only{
display: none;
}
/* 日本語 */
html:lang(ja) .japan-only{
display: block;
}
html:lang(ja) .jp-other-only{
display: none;
}

/* 日本語以外 */
html:lang(en) .jp-other-only,
html:lang(ko) .jp-other-only,
html:lang(zh-CN) .jp-other-only,
html:lang(zh-TW) .jp-other-only{
display: block;
}
html:lang(en) .japan-only,
html:lang(ko) .japan-only,
html:lang(zh-CN) .japan-only,
html:lang(zh-TW) .japan-only{
display: none;
}