@charset "utf-8";
/* CSS Document */

/* anchor */
#anchor { margin-bottom: 40px;}
#anchor ul { display: table; table-layout: fixed; width: 100%;}
#anchor ul li { display: table-cell; padding: 0 2.5%;}
#anchor ul li a { position: relative; display: block; width: 100%; height: 46px; border: 1px #999 solid; border-radius: 23px; color: #333; font-size: 1.125rem; font-weight: bold; text-decoration: none; line-height: 46px;}
#anchor ul li a::before { position: absolute; top: calc( 50% + 3px); right: 10px; width: 20px; height: 0; border-bottom: 2px #333 solid; content: '';}
#anchor ul li a::after { position: absolute; top: calc( 50% - 4px); right: 13px; width: 0; height: 8px; border-right: 2px #333 solid; content: ''; transform: rotate(-35deg);}

.h1box { margin-bottom: 40px;}
.h1box h1 .en { font-size: 1.75rem; font-weight: bold; line-height: 150%;}
.h1box h1 .jp { font-size: 0.75rem; font-weight: bold;}

@media screen and (min-width: 769px){
    #anchor { width: 100%; max-width: 1400px; margin-left: auto; margin-right: auto;}
}


/* price */
#price { width: 100%;}

#price .h2wrap { width: 100%; padding-bottom: 10px; border-bottom: 1px #333 solid;}
#price .h2wrap h2 { font-weight: bold; line-height: 150%;}

#price .lead p { font-size: 0.75rem; line-height: 150%;}
#price .lead p span.orange { color: #ff8400; font-size: 0.75rem; font-weight: bold;}

#price .list { margin-bottom: 10px;}
#price .list ul { width: 100%;}
#price .list ul li { width: 100%; padding: 0 2.5%;}
#price .list ul li + li { margin-top: 20px;}
#price .list ul li dl { display: table; width: 100%; height: 60px; border: 1px #3d3d3d solid;}
#price .list ul li dl dt { display: table-cell; width: 45%; background: #3d3d3d; color: #fff; font-weight: bold; vertical-align: middle;}
#price .list ul li dl dd { display: table-cell; padding: 20px 0; font-weight: bold; vertical-align: middle;}
#price .list ul li .box { padding: 10px; color: #fff; font-weight: bold; line-height: 125%;}
#price .list .notice { width: 100%; height: 60px; padding: 0 2.5%; text-align: right; font-size: 0.75rem;}

#price .oyako img { margin: 0 auto;}
#price .oyako img.pc { display: none;}

@media screen and (min-width: 769px){
    #price .h2wrap h2 { font-size: 1.25rem;}

    #price .lead, #price .list { width: 100%; max-width: 1400px; margin-left: auto; margin-right: auto;}
    #price .lead p, #price .lead p span.orange { font-size: 1rem;}

    #price .list ul li { width: 50%; margin-bottom: 20px; float: left;}
    #price .list ul li:nth-child(2n+1) { clear: bot; }
    #price .list ul li + li { margin-top: 0;}
    #price .list ul li:last-child { margin-bottom: 0;}
    #price .list, #price .lead { clear: both;}

    #price .oyako img.mb { display: none;}
    #price .oyako img.pc { display: block;}
}

#price .list.orange ul li:nth-child(1) dl { border: 1px #FFC750 solid;}
#price .list.orange ul li:nth-child(1) dl dt { background: #FFC750;}
#price .list.orange ul li:nth-child(2) dl { border: 1px #FAAF2F solid;}
#price .list.orange ul li:nth-child(2) dl dt { background: #FAAF2F;}
#price .list.orange ul li:nth-child(3) dl { border: 1px #FF9C00 solid;}
#price .list.orange ul li:nth-child(3) dl dt { background: #FF9C00;}
#price .list.orange ul li:nth-child(4) dl { border: 1px #FF7E00 solid;}
#price .list.orange ul li:nth-child(4) dl dt { background: #FF7E00;}

#price .list.blue ul li:nth-child(1) .box { width: 100%; background: #2A60A8;}
#price .list.blue ul li:nth-child(2) dl { border: 1px #76A4E0 solid;}
#price .list.blue ul li:nth-child(2) dl dt { background: #76A4E0;}
#price .list.blue ul li:nth-child(3) dl { border: 1px #4E8EE5 solid;}
#price .list.blue ul li:nth-child(3) dl dt { background: #4E8EE5;}
#price .list.blue ul li:nth-child(4) dl { border: 1px #2B6CC0 solid;}
#price .list.blue ul li:nth-child(4) dl dt { background: #2B6CC0;}

#price .list.green ul li:nth-child(1) .box { width: 100%; background: #46753F;}
#price .list.green ul li:nth-child(2) dl { border: 1px #83BC78 solid;}
#price .list.green ul li:nth-child(2) dl dt { background: #83BC78;}
#price .list.green ul li:nth-child(3) dl { border: 1px #5EC34D solid;}
#price .list.green ul li:nth-child(3) dl dt { background: #5EC34D;}
#price .list.green ul li:nth-child(4) dl { border: 1px #2FA31C solid;}
#price .list.green ul li:nth-child(4) dl dt { background: #2FA31C;}

#price .banner ul li { width: 100%; margin-top: 20px; padding: 0 2.5%;}
#price .banner ul li a { position: relative; display: block; width: 100%; padding: 0 10px; background: #6CC3E3; color: #fff;}
#price .banner ul li:last-child a { background: #FEAB61;}
#price .banner ul li a figure { display: table; width: 100%; height: 104px; text-align: left;}
#price .banner ul li a figure .img { display: table-cell; width: 25%; padding-right: 5%; vertical-align: middle;}
#price .banner ul li a figure .img .fit { position: absolute; bottom: -5px; left: 0;}
#price .banner ul li a figure .img .fit img { width: 45%;}
#price .banner ul li a figure figcaption { display: table-cell; width: 75%; vertical-align: middle;}
#price .banner ul li a figure figcaption dl dt { padding-bottom: 5px; margin-bottom: 5px; border-bottom: 1px #fff solid; font-size: 1rem; font-weight: bold;}
#price .banner ul li a figure figcaption dl dd { font-size: 0.75rem; line-height: 150%;}

#price .banner ul li a::before { position: absolute; top: calc( 100% - 10px ); right: 10px; width: 30px; height: 0; border-bottom: 2px #fff solid; content: '';}
#price .banner ul li a::after { position: absolute; top: calc( 100% - 20px ); right: 14px; width: 0; height: 12px; border-right: 2px #fff solid; content: ''; transform: rotate(-35deg);}

@media screen and (min-width: 481px){
    #price .banner ul li a figure figcaption dl dt { font-size: 1.25rem; line-height: 150%;}
    #price .banner ul li a figure figcaption dl dd { font-size: 0.865rem; line-height: 150%;}

}
@media screen and (min-width: 769px){
    #price .banner { width: 100%; max-width: 1400px; margin-left: auto; margin-right: auto;}
    #price .banner ul { display: table; table-layout: fixed; width: 100%;}
    #price .banner ul li { display: table-cell; width: 50%; vertical-align: top;}
}
@media screen and (min-width: 1081px){
    #price .banner ul li a figure figcaption dl dt { font-size: 1.5rem; line-height: 120%;}
    #price .banner ul li a figure figcaption dl dd { font-size: 1rem; line-height: 120%;}

}


/* class */

#class .h2wrap h2 .pc { display: none;}

#class .list ul li .text { font-size: 0.875rem;; text-align: left;}
#class .list ul li .movie h3 { margin-bottom: 15px; font-weight: bold;}

#class .banner a { position: relative; display: block; width: 100%; height: 60px; line-height: 60px; border-radius: 30px; font-size: 1.25rem; font-weight: bold;}
#class .banner a::before { position: absolute; top: calc( 50% + 3px); right: 20px; width: 20px; height: 0; content: '';}
#class .banner a::after { position: absolute; top: calc( 50% - 4px); right: 23px; width: 0; height: 8px; content: ''; transform: rotate(-35deg);}

#class .banner .trial a { background: #FCFF00; border: 2px #5FB0E7 solid; color: #5FB0E7;}
#class .banner .trial a::before { border-bottom: 2px #5FB0E7 solid;}
#class .banner .trial a::after { border-right: 2px #5FB0E7 solid;}

#class .banner .schedule a { background: #83C0EA; color: #fff;}
#class .banner .schedule a::before { border-bottom: 2px #fff solid;}
#class .banner .schedule a::after { border-right: 2px #fff solid;}

@media screen and (min-width: 769px){
    #class .h2wrap h2 .mb { display: none;}
    #class .h2wrap h2 .pc { display: block;}
    #class .boxOuter { display: table; table-layout: fixed; width: 100%; max-width: 1400px; margin-left: auto; margin-right: auto;}
    #class .boxOuter .text, #class .boxOuter .movie{ display: table-cell; padding: 0 10px;}
    #class .list ul li { margin-bottom: 60px;}
    #class .list ul li .text { font-size: 1rem; line-height: 150%;}
    #class .list ul li .movie h3 { font-size: 1rem;}

    #class .banner { display: table; table-layout: fixed; width: 100%; max-width: 1400px; margin-left: auto; margin-right: auto;}
    #class .banner .trial, #class .banner .schedule { display: table-cell; padding: 0 20px;}
}
@media screen and (min-width: 1081px){
    #class .list ul li { margin-bottom: 120px;}
    #class .list ul li .text { font-size: 1.25rem; line-height: 150%;}
    #class .list ul li .movie h3 { font-size: 1.25rem;}
}



/* blog detail */








/* CSS memo

Font Awesome
https://fontawesome.com/icons?d=gallery&m=free

Solid 			 font-family: "Font Awesome 5 Free"; content: "\";
Regular, Light	 font-family: "Font Awesome 5 Pro"; content: "\";
Duotone 		 font-family: "Awesome 5 Duotone"; content: "\";
Brands           font-family: "Font Awesome 5 Brands"; content: "\";

width計算
width: -webkit-calc(100% - 420px); width: calc(100% - 420px);

角丸
border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px;

テキストシャドウ
text-shadow:1px 1px 3px #666;
text-shadow:1px 1px 3px #666; text-shadow:-1px 1px 3px #666; text-shadow:1px -1px 3px #666; text-shadow:-1px -1px 3px #666;

ボックスシャドウ
-moz-box-shadow: 1px 1px 3px #666; -webkit-box-shadow: 1px 1px 3px #666; box-shadow: 1px 1px 3px #666;

ボックスシャドウ内側
-moz-box-shadow: inset 1px 1px 3px #666; -webkit-box-shadow: inset 1px 1px 3px #666; box-shadow: inset 1px 1px 3px #666;

グラデーション
background: -moz-linear-gradient(top, #FFC778, #FFF); background: -webkit-linear-gradient(top, #FFC778, #FFF); background: linear-gradient(to bottom, #FFC778, #FFF);

トランジション
-webkit-transition: 1.5s; -moz-transition: 1.5s; -o-transition: 1.5s; transition: 1.5s;

要素全部を透明
filter: alpha(opacity=25); -moz-opacity:0.25; opacity:0.25;

背景のみ透明
background-color:rgba(255,255,255,0.2);

明朝体
.mincho { font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}

テキスト省略
.container { overflow: hidden; width: 100%;}
.container  p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

可変Youtube埋め込み
.youtube { position: relative; width: 100%; padding-top: 56.25%;}
.youtube iframe { position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important;}

要素を横スクロール
.scroll { width: 100%; padding-bottom: 10px; overflow-y: hidden; overflow-x: auto; -ms-overflow-style: -ms-autohiding-scrollbar; -webkit-overflow-scrolling: touch;}

画像の縦長自動調整
img { min-width: 100%; max-height: 100%; height: 100vh; width: auto\9; margin: 0 auto;}
object-fit: cover;

背景を左右で分ける（左から0～50％と50％～100％）
background:linear-gradient(90deg,blue 0%,blue 50%,red 50%,red 100%);

その他メモ JavaScript
javascript:void(0);
javascript:history.back();

CSS memo */