/*e-amusementサイトテンプレート*/
header,footer,header#id_nav_menu_1{position:relative !important;}
header#id_nav_menu_1{background-color:#fff;}
#wrapper{position:relative !important;}
#container{background:transparent !important;}

header#id_nav_menu_1              {z-index:9999 !important;}
footer                            {z-index:2 !important;}
#page-top,#page-top a             {z-index:20 !important;}

/*
================================================================================================================
COMMON
================================================================================================================
*/
*{padding:0; margin:0; border:0;}
*, *:before, *:after{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;}

html{width:100%; height:100%; overflow-wrap:break-word}
body{
min-width:320px !important;
background:transparent !important;
margin:0 auto;
font-family:"メイリオ", "Meiryo", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
overflow-x:hidden;}
/*h1,h2,h3,h4,h5,h6{display:none;}*/
a{outline:none;}
a:link,a:visited,a:hover,a:active{text-decoration:none;}
a img{transition:opacity .3s ease;}
img{padding:0; margin:0; border:0; vertical-align:bottom;}
ul{margin:0; padding:0; border:0;}
li{list-style:none;}
strong,em,b{font-weight:700; font-style:normal;}
table{width:100%; /*color:#000;*/ border-collapse:collapse; border-spacing:0; margin:0 auto;}

br.pc{display:block;}/*PCサイズのみ有効な改行*/
br.sp{display:none;}/*SPサイズのみ有効な改行*/

@media screen and (max-width:900px){
body{min-width:320px;}
br.pc{display:none;}
br.sp{display:block;}}

/*警告文*/
.alert{font-weight:bold; line-height:150%; letter-spacing:1ox; color:#ff7e8d;}
.alert a{color:#fff;}

/*タブ表示・非表示*/
.no-show{display:none;}

/*楽曲権利表記*/
#music_data_copy{color:#eaffff; font-size:11px; margin:20px auto;}
@media screen and (max-width:480px){#music_data_copy{font-size:9px; letter-spacing:1px !important; line-height:150% !important;}}

/*エラー*/
#wrap.error .frame{text-align:center;}
#wrap.error .link-btn{max-width:300px; margin:40px auto 0;}
@media screen and (max-width:480px){#wrap.error .link-btn{margin:20px auto 0;}}

/*テキスト*/
#wrap .info_text{
width:100%;
color:#fff;
letter-spacing:2px;
line-height:180%;
text-align:center;
margin:0 auto;}
@media screen and (max-width:640px){#wrap .info_text{text-align:left;}}

/*楽曲タイムスタンプ*/
#wrap .info_time{width:100%; font-size:13px; letter-spacing:2px; text-align:right; margin:20px auto 10px;}

/*
================================================================================================================
MAIN
================================================================================================================
*/
#wrap{
position:relative;
width:100%;
font-size:16px;
font-family:'Noto Sans JP', sans-serif;
margin:0;
padding:0;
overflow:hidden;}
@media screen and (min-width:981px){#wrap{min-height:calc(100vh - 177px);}}
@media screen and (max-width:980px){#wrap{min-height:calc(100vh - 225px);}}
@media screen and (max-width:800px){#wrap{font-size:15px;}}
@media screen and (max-width:640px){#wrap{font-size:14px;}}
@media screen and (max-width:480px){#wrap{font-size:13px;}}
@media screen and (max-width:420px){#wrap{font-size:11px;}}

#wrap::before,
#wrap::after{
display:block;
content:"";
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:1;}
#wrap::before{background-image:url(../images/common/bg/bg.jpg);}
#wrap::after{/*position:absolute;*/ background:linear-gradient(to bottom, rgba(0,0,0,0.9) 0%,rgba(0,0,0,0) 40%,rgba(0,0,0,0) 60%,rgba(0,0,0,0.9) 100%); mix-blend-mode:soft-light;}
@media screen and (max-width:640px){#wrap::before{background-size:100% auto;}}

#contents_bg{
position:relative;
width:100%;
height:100%;
padding:0 20px;
margin:200px auto;
z-index:2;}
@media screen and (max-width:980px){#contents_bg{margin:150px auto;}}

#contents{
position:relative;
width:100%;
max-width:1200px;
color:#fff;
margin:0 auto;}

/*
=========================
リスト
=========================
*/
#wrap .small{font-size:12px;}
@media screen and (max-width:400px){#wrap .small{font-size:11px;}}

ul.dot li,ul.ast li,ul.num li,span.ast{position:relative; padding-left:18px;}
ul.dot li::before,
ul.ast li::before,
ul.num li::before,
span.ast::before{display:block; position:absolute; top:0; left:0;}

ul.dot li::before{content:"・";}
ul.ast li::before,span.ast::before{content:"※";}

ul.num li:first-child::before{content:"①";}
ul.num li:nth-child(2)::before{content:"②";}
ul.num li:nth-child(3)::before{content:"③";}
ul.num li:nth-child(4)::before{content:"④";}
ul.num li:nth-child(5)::before{content:"⑤";}

/*
================================================================================================================
ページタイトル
================================================================================================================
*/
#wrap h1{
width:100%;
color:#fff;
background-color:#001e26;
font-size:50px;
font-weight:700;
letter-spacing:10px;
line-height:100%;
text-align:center;
text-shadow:0 0 2px #19fcff , 0 0 5px #19fcff;
box-shadow:inset 0 0 3px rgba(255,255,255,.5), inset 0 0 5px rgba(172,255,234,.5), 0 5px 10px rgba(0,0,0,.5) , 0 20px 20px rgba(5,149,156,.3);
border:1px solid #fff;
padding:50px 0;
margin:0 auto 40px;}
@media screen and (max-width:980px){#wrap h1{font-size:40px;}}
@media screen and (max-width:640px){#wrap h1{font-size:30px; padding:40px 0;}}
@media screen and (max-width:480px){#wrap h1{font-size:20px; padding:30px 0;}}

#wrap h1.min{font-size:125.25% !important;}
@media screen and (max-width:1200px){#wrap h1.min{text-align:left; padding:30px 20px !important;}}
@media screen and (max-width:640px){#wrap h1.min{letter-spacing:4px !important; font-size:105.25% !important;}}

/*準備中*/
#wrap h3{
display:block;
color:#fff;
font-size:30px;
font-family:'Poppins', 'M PLUS Rounded 1c', sans-serif;
font-weight:300;
text-align:center;
letter-spacing:2px;
filter:drop-shadow(0 0 2px #19fcff);
transform:rotate(0.05deg);
margin:40px auto 0;}
@media screen and (max-width:480px){#wrap h3{font-size:20px; font-weight:500;}}

/*
=========================
サブタイトル
=========================
*/
#wrap .info_sub{
position:relative;
width:100%;
color:#eaffff;
font-size:30px;
font-weight:700;
line-height:200%;
letter-spacing:10px;
margin:0 auto 20px;}
#wrap .info_sub::after{
display:block;
content:"";
width:100%;
height:1px;
background-color:#98a9a9;
box-shadow:0 0 5px #19fcff;}
@media screen and (max-width:980px){#wrap .info_sub{font-size:20px;}}
@media screen and (max-width:640px){#wrap .info_sub{font-size:16px; letter-spacing:3px;}}

.toggle-inner + .info_sub{margin:20px auto !important;}

/*
================================================================================================================
フレーム
================================================================================================================
*/
#wrap .frame + .info_sub{margin-top:40px;}

#wrap .frame{
position:relative;
width:100%;
color:#eaffff;
background-color:rgba(83,134,148,.4);
box-shadow:0 5px 3px rgba(0,0,0,.4) , 0 10px 15px rgba(0,0,0,.7) , 0 0 10px rgba(0,0,0,.2) , inset 0 1px 1px rgba(255,255,255,.5);
letter-spacing:2px;
border-radius:10px;
padding:30px;
margin:0 auto;}

#wrap .frame::before,
#wrap .framet::after{
display:block;
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
border-radius:10px;
z-index:1;}
#wrap .frame::before{background:linear-gradient(to right, rgba(255,255,255,.1) 0%,rgba(255,255,255,0) 60%,rgba(255,255,255,0) 100%);}
#wrap .frame::after{background:linear-gradient(to bottom, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0) 50%);}
@media screen and (max-width:640px){#wrap .frame{padding:20px}}/*
@media screen and (max-width:480px){#wrap .frame{padding:20px 10px;}}*/

#wrap .frame > *{position:relative; z-index:2;}
#wrap .frame a:not(.link-btn){color:#ffd07e; transition:color .2s ease;}
#wrap .frame a:not(.link-btn):hover{color:#cdff7e; text-decoration:underline;}

#wrap .frame > h2{
display:block;
color:#fff;
font-size:25px;
font-family:'Poppins', 'M PLUS Rounded 1c', sans-serif;
font-weight:300;
text-align:center;
letter-spacing:2px;
border-bottom:1px solid #a0b3b5;
filter:drop-shadow(0 0 2px #19fcff);
transform:rotate(0.05deg);
padding-bottom:10px;
margin:0 auto 20px;}
@media screen and (max-width:980px){#wrap .frame > h2{font-size:22px;}}
@media screen and (max-width:800px){#wrap .frame > h2{font-size:20px;}}
@media screen and (max-width:640px){#wrap .frame > h2{font-size:18px; font-weight:bold;}}
@media screen and (max-width:480px){#wrap .frame > h2{font-size:16px;}}
@media screen and (max-width:420px){#wrap .frame > h2{font-size:14px;}}

/*
================================================================================================================
タブ切替
================================================================================================================
*/
#score-tab{display:flex; position:relative; justify-content:center; margin:20px auto;}
#score-tab::after{
display:block;
position:absolute;
bottom:0;
left:0;
content:"";
width:100%;
height:2px;
background-color:#98a9a9;
box-shadow:0 0 2px #19fcff ,0 0 5px #19fcff;}
#score-tab > *{
display:block;
position:relative;
width:30%;
color:#fff;
background-color:#001e26;
text-align:center;
border-radius:30px 30px 0 0;
border:2px solid #93a3a3;
border-bottom:none;
cursor:pointer;
padding:20px 0;
margin:0 10px;
transition:all .2s ease;}
#score-tab > *.active{font-weight:bold; pointer-events:none;}
#score-tab > * > p{position:relative; z-index:2;}

#score-tab > *::before{
display:block;
position:absolute;
top:0;
left:0;
content:"";
width:100%;
height:100%;
background:linear-gradient(to bottom, rgba(5,149,156,0) 2%,rgba(5,149,156,.9) 100%);
border-radius:30px 30px 0 0;
opacity:0;
transition:opacity .2s ease;}
#score-tab > *.active::before,
#score-tab > *:hover::before{opacity:1;}

@media screen and (max-width:480px){
#score-tab > *{margin:0 5px; border-radius:20px 20px 0 0; padding:10px 0;}
#score-tab > *::before{border-radius:20px 20px 0 0;}}

/*2つ*/
#score-tab:not(.three) > *:first-child > p::before{content:"通常 スコア"}
#score-tab:not(.three) > *:last-child > p::before{content:"HARD MODE スコア"}
@media screen and (max-width:800px){#score-tab:not(.three)  > *{width:50%;}}

/*3つ*/
@media screen and (max-width:640px){#score-tab.three > *{width:calc(100% / 3 - 10px); margin:0 5px;}}
@media screen and (max-width:480px){
#score-tab.three{flex-wrap:wrap;}
#score-tab.three::after{display:none;}
#score-tab.three > *{width:100%; border:2px solid #93a3a3 !important; border-radius:20px !important;}
#score-tab.three > *::before{border-radius:18px !important;}
#score-tab.three > * + *{margin-top:5px;}}

/*
=========================
メニューボタン/3つ
=========================
*/
#three-tab{display:flex; position:relative; justify-content:space-between; margin:20px auto; flex-wrap:wrap;}
#three-tab > *{
display:block;
position:relative;
width:calc(100% / 3 - 10px);
color:#fff;
background-color:#001e26;
text-align:center;
border-radius:20px;
border:2px solid #93a3a3;
cursor:pointer;
padding:15px 0;
transition:all .2s ease;}
#three-tab > *.active{font-weight:bold;}
#three-tab > * > p{position:relative; z-index:2;}

#three-tab > *::before{
display:block;
position:absolute;
top:0;
left:0;
content:"";
width:100%;
height:100%;
background:linear-gradient(to bottom, rgba(5,149,156,0) 2%,rgba(5,149,156,.9) 100%);
border-radius:18px;
opacity:0;
transition:opacity .2s ease;}
#three-tab > *.active::before,
#three-tab > *:hover::before{opacity:1;}
@media screen and (max-width:640px){
#three-tab > *{width:calc(100% / 3 - 5px); border-radius:10px;}
#three-tab > *::before{border-radius:8px;}}
@media screen and (max-width:480px){
#three-tab > *{width:100%; padding:10px 0;}
#three-tab > * + *{margin-top:5px;}}

/*
================================================================================================================
ボタン
================================================================================================================
*/
#wrap .link-btn{
display:block;
position:relative;
color:#fff;
background-color:rgba(0,0,0,.8);
font-family:'M PLUS Rounded 1c', sans-serif; 
font-size:16px;
text-align:center;
border-radius:40px;
border:solid 2px #fff; 
padding:8px 0;
transition:all .2s ease;
transform:rotate(0.05deg);
box-shadow:0 4px 4px 0 rgba(0,0,0,.5) , 0 0 2px #00bcd4 , 0 0 2px #00bcd4 ,
           0 0 2px #00bcd4 , 0 0 2px #00bcd4 , 0 0 2px #00bcd4 , 0 0 4px #00bcd4 , 
           0 0 4px #00bcd4 inset , 0 0 2px #00bcd4 inset , 0 0 2px #00bcd4 inset ,
           0 0 2px #00bcd4 inset , 0 0 4px #00bcd4 inset , 0 0 4px #00bcd4 inset;}

#wrap .link-btn:hover{
cursor:pointer;
box-shadow:0 4px 4px 0 rgba(0,0,0,.5) , 0 0 2px #00bcd4 , 0 0 2px #00bcd4 ,
           0 0 2px #00bcd4 , 0 0 2px #00bcd4 , 0 0 2px #00bcd4 , 0 0 10px #00bcd4 , 
           0 0 10px #00bcd4 inset , 0 0 2px #00bcd4 inset , 0 0 2px #00bcd4 inset ,
           0 0 2px #00bcd4 inset , 0 0 5px #00bcd4 inset , 0 0 5px #00bcd4 inset;}

@media screen and (max-width:480px){#wrap .link-btn{font-size:14px; padding:5px 0;}}

/*
================================================================================================================
トグル
================================================================================================================
*/
#wrap .toggle{
display:block;
position:relative;
width:100%;
color:#daf0f1;
background-color:#001e26;
background-image:url(../images/common/icn_info.png);
background-repeat:no-repeat;
background-size:auto 30px;
background-position:left 10px center;
font-size:20px;
font-weight:bold;
border:1px solid #93a3a3;
padding:10px 40px 10px 50px;
margin:0 auto;}
#wrap .toggle:hover{cursor:pointer;}
#wrap .toggle::after{
display:block;
content:"▼";
position:absolute;
top:calc(50% - 10px);
right:10px;
color:#93a3a3;
font-size:20px;}
#wrap .toggle.open::after{content:"▲";}

@media screen and (max-width:800px){#wrap .toggle{font-size:18px;}}
@media screen and (max-width:640px){#wrap .toggle{font-size:16px;}}
@media screen and (max-width:480px){
#wrap .toggle{font-size:14px; background-size:auto 20px; padding:10px 40px;}
#wrap .toggle::after{font-size:15px;}}

/*
=========================
トグル内容
=========================
*/
#wrap .toggle-inner{
width:100%;
color:#fff;
background:rgba(0,0,0,.6);
font-size:13px;
padding:20px;
margin:0 auto;}
#wrap .toggle-inner span{
display:block;
color:#daf0f1;
font-size:15px;
font-weight:bold;
line-height:180%;
border-bottom:1px solid;
padding-bottom:5px;
margin:20px auto 10px;}
#wrap .toggle-inner span:first-child{margin:0 auto 10px;}

#wrap .toggle-inner a{color:#56ffc5; font-weight:bold; padding:5px;}
#wrap .toggle-inner a:hover{text-decoration:underline;}

#wrap .toggle-inner #toggle-btn{
display:block;
width:100%;
max-width:300px;
color:#fff;
background-color:rgba(0,0,0,.8);
font-size:13px;
line-height:100%;
border-radius:40px;
border:solid 1px #fff;
text-align:center;
padding:10px;
margin:30px auto 0;
transition:all .2s ease;}
#wrap .toggle-inner #toggle-btn:hover{cursor:pointer; background-color:#001e26;
box-shadow:0 0 10px #00bcd4 , 0 0 5px #00bcd4 , inset 0 0 5px #00bcd4;}

@media screen and (max-width:480px){
#wrap .toggle-inner{font-size:12px;}
#wrap .toggle-inner span{font-size:14px;}}

/*
================================================================================================================
フォーム用 COMMON
================================================================================================================
*/
input[type="text"]{padding:5px !important;}

input[type="radio"],
input[type="checkbox"]{display:none !important; border:0 !important; margin:0 !important;}

.input-radio,
.input-checkbox,
.input-checkplay{
display:block;
position:relative;
padding:0 10px 0 22px;}

.input-radio label,
.input-checkbox label,
.input-checkplay label{
display:inline-block;
font-size:13px;
cursor:pointer;
padding-top:3px;}

.input-radio label:before,
.input-checkbox label:before,
.input-checkplay label:before{
top:4px;
left:0;
width:16px;
height:16px;
border:1px solid #000;}

.input-radio label:before,
.input-checkbox label:before{
background-color:rgba(255,255,255,1);}

@media screen and (max-width:480px){
.input-radio label,
.input-checkbox label,
.input-checkplay label{font-size:12px;}}

@media screen and (max-width:370px){
.input-radio label,
.input-checkbox label,
.input-checkplay label{font-size:11px;}}

/*
=========================
フォーム用 ラジオボタン
=========================
*/
.input-radio label:before,
.input-radio label:after{
content:"";
position:absolute;
display:inline-block;
border-radius:50%;
transition:transform .2s ease;}

.input-radio label:after{
top:8px;
left:4px;
width:8px;
height:8px;
background-color:transparent;
transform:scale(0);}

.input-radio input[type="radio"]:checked + label:after{
background-color:#000; transform:scale(1);}

/*
=========================
フォーム用 チェックボックス
=========================
*/
.input-checkbox label:before,
.input-checkbox label:after{
content:"";
position:absolute;
display:inline-block;
transition:transform .2s ease;}

.input-checkbox input[type="checkbox"]:checked + label:after{border-color:#000;}

/*
=========================
未プレイ用 チェックボックス
=========================
*/
.input-checkplay{width:145px; padding:0 0 0 22px; margin:0 0 20px auto;}
@media screen and (max-width:480px){.input-checkplay{width:130px;}}
@media screen and (max-width:370px){.input-checkplay{width:125px;}}

.input-checkplay label:before,
.input-checkplay label:after{
content:"";
position:absolute;
display:inline-block;
transition:transform .2s ease;}

.input-checkplay label:before{background-color:#fff;}

.input-checkbox label:after,
.input-checkplay label:after{
top:5px;
left:4px;
width:8px;
height:17px;
margin-top:-5.5px;
border-right:3px solid transparent;
border-bottom:3px solid transparent;
border-radius:1.5px;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
transform:rotate(45deg);
transition:border-bottom-color,border-right-color .2s ease;}

.input-checkplay input[type="checkbox"]:checked + label:after{border-color:#f88621;}

/*
=========================
フォーム用 セレクト
=========================
*/
select{
width:100%;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
background-color:#fff;
background-image:url(../images/common/icn_pull.png);
background-repeat:no-repeat;
background-position:right;
padding:5px !important;}

/*
================================================================================================================
ページナビゲーション
================================================================================================================
*/
.page_navi{
display:flex;
position:relative;
text-align:center;
align-items:center;
margin:30px auto 0 auto;}

.page_navi > div a{display:block; width:100%; height:100%; color:#eaffff; transition:color .3s ease;}
.page_navi > div a:hover{color:#fffde1; text-decoration:none;}
.page_navi div:not(.page){background-color:#003c4c; transition:background .3s ease; border-radius:4px;}
.page_navi div:not(.page):hover{background-color:#09a2a7;}

.page_navi .prev,
.page_navi .next{
width:100px;
font-size:14px;
text-align:center;}
.page_navi .prev a,
.page_navi .next a{height:30px; line-height:30px;}

.page_navi .page{
display:flex;
position:relative;
width:calc(100% - 200px);
flex-wrap:wrap;
justify-content:center;
padding:0 20px;}

.page_navi .page .cur{font-weight:bold;}
.page_navi .num{width:30px; height:30px; margin:5px;}
.page_navi .num > a{
display:flex;
font-size:12px;
justify-content:center;
align-items:center;
white-space:nowrap;}

/*セレクトタイプ*/
.page_navi.select{max-width:480px;}
.page_navi.select .prev,
.page_navi.select .next{width:60px;}
.page_navi.select .page{width:calc(100% - 260px);}
.page_navi.select .prev:nth-child(2){margin-left:10px;}
.page_navi.select .next:nth-child(4){margin-right:10px;}

@media screen and (max-width:800px){
.page_navi:not(.select){align-items:start;}
.page_navi:not(.select) .page{padding:0;}
.page_navi:not(.select) .num{margin:0 5px 10px;}}

@media screen and (max-width:640px){
.page_navi:not(.select){flex-wrap:wrap; justify-content:space-between;}
.page_navi > div a span{display:none;}
.page_navi .prev,
.page_navi .next{width:60px;}
.page_navi:not(.select) .prev{order:1; margin-left:10px;}
.page_navi:not(.select) .next{order:2; margin-right:10px;}
.page_navi:not(.select) .page{width:100%; order:3; margin-top:10px;}}

@media screen and (max-width:480px){
.page_navi.select .prev,
.page_navi.select .next{width:40px;}
.page_navi.select .page{width:calc(100% - 170px); padding:0 5px;}
.page_navi.select .prev:nth-child(2){margin-left:5px;}
.page_navi.select .next:nth-child(4){margin-right:5px;}}

/*
================================================================================================================
TOPに戻る
================================================================================================================
*/
#page-top{position:fixed; right:20px;}
#page-top > div{
display:flex;
width:90px;
height:90px;
color:#fff;
background-color:rgba(0,0,0,.3);
border-radius:50%;
border:5px solid;
font-size:15px;
font-family:'Poppins', sans-serif;
line-height:120%;
text-align:center;
align-items:center;
justify-content:center;
margin-bottom:20px;
transition:all .2s ease;
filter:drop-shadow(0 10px 5px rgba(0,0,0,.8));}
#page-top > div:hover{
cursor:pointer;
text-shadow:0 0 2px #19fcff , 0 0 4px #19fcff , 0 0 10px #19fcff;
box-shadow:0 0 2px #00bcd4 , 0 0 2px #00bcd4 , 0 0 2px #00bcd4 , 0 0 2px #00bcd4 , 0 0 2px #00bcd4 , 0 0 4px #00bcd4 , 0 0 10px #19fcff ,
           0 0 4px #00bcd4 inset , 0 0 2px #00bcd4 inset , 0 0 2px #00bcd4 inset , 0 0 2px #00bcd4 inset , 0 0 4px #00bcd4 inset , 0 0 4px #00bcd4 inset;}

@media screen and (max-width:800px){
#page-top{right:10px;}
#page-top > div{width:70px; height:70px; font-size:14px; border:3px solid; margin-bottom:10px;}}
@media screen and (max-width:480px){#page-top > div{width:50px; height:50px; font-size:12px; border:2px solid;}}

/*
================================================================================================================
ベーシックコース・プレミアムコース加入
================================================================================================================
*/
#ea-course{max-width:700px; margin:0 auto;}
#ea-course .frame{text-align:center; margin:40px auto !important;}
#ea-course .frame p{font-size:16px; line-height:200%; margin:0 auto 20px;}
#ea-course .frame p > b{font-size:20px;}
#ea-course .frame > img{width:100%; max-width:622px;}
#ea-course .frame > .link-btn{max-width:300px; margin:40px auto 0;}
#ea-course ul#basic_set{display:flex; justify-content:space-between; align-items:center; margin:20px auto;}
#ea-course ul#basic_set li{width:calc(100% / 3 - 20px); text-align:center;}
#ea-course ul#basic_set li img{width:100%; max-width:175px;}
@media screen and (max-width:480px){
#ea-course .frame p{font-size:14px;}
#ea-course .frame p > b{font-size:16px;}}
@media screen and (max-width:420px){
#ea-course .frame p{font-size:12px;}
#ea-course .frame p > b{font-size:14px;}}

/*
================================================================================================================
光彩帯
================================================================================================================
*/
#wrap-top{
display:block;
position:absolute;
left:0;
width:100%;
background:linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,252,255,1) 1%, rgba(25,252,255,.6) 2%, rgba(25,252,255,.4) 10%, rgba(25,252,255,0) 60%, rgba(25,252,255,0) 100%);
z-index:3 !important;
pointer-events:none;}
@media screen and (min-width:981px){#wrap-top{top:90px; height:180px;}}
@media screen and (max-width:980px){#wrap-top{top:76px; height:120px;}}

/*スクロール*/
#wrap-top.fixed{position:fixed; left:0; z-index:3 !important;}
@media screen and (min-width:981px){#wrap-top.fixed{top:90px;}}
@media screen and (max-width:980px){#wrap-top.fixed{top:76px;}}

#wrap-btm{
display:block;
position:fixed;
bottom:0;
width:100%;
height:160px;
background:linear-gradient(to bottom, rgba(25,252,255,0) 0%,rgba(25,252,255,0) 40%,rgba(25,252,255,.4) 90%,rgba(25,252,255,.6) 98%,rgba(255,255,255,1) 99%,rgba(255,255,255,1) 100%);
z-index:10;
pointer-events:none;}
@media screen and (max-width:980px){#wrap-btm{height:100px;}}