/*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:#fff;}

/*z-index*/
#main,#main::before,#main::after  {z-index:1;}
#main > *                         {position:relative; z-index:2;}
#page-top,#page-top a             {z-index:20 !important;}
footer                            {z-index:2 !important;}

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

html{width:100%; height:100%; overflow-wrap:break-word;}
body{
min-width:320px !important;
background:#000 !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;}

.no-show{display:none;}/*タブ切替*/

/*
================================================================================================================
RESET
================================================================================================================
*/
*,::before,::after{box-sizing:border-box; border-style:solid; border-width:0; min-width:0;}
html{line-height:1.15; -webkit-text-size-adjust:100%; -webkit-tap-highlight-color:transparent;}
body{margin:0;}
table,blockquote,address,pre,iframe,form,figure,dl{margin:0;}
h1,h2,h3,h4,h5,h6{font-size:inherit; font-weight:inherit; margin:0;}
ul,ol{margin:0; padding:0; list-style:none;}
a{background-color:transparent; text-decoration:none; color:inherit;}
sub,sup{font-size:75%; line-height:0; position:relative; vertical-align:baseline;}
sub{bottom:-0.25em;}
sup{top:-0.5em;}
summary{display:list-item;}
[contenteditable]:focus{outline:auto;}

/*
================================================================================================================
テンプレート
================================================================================================================
*/
@media screen and (min-width:981px){#main,#main-inner{min-height:calc(100vh - 401px);}}
@media screen and (max-width:980px){#main,#main-inner{min-height:calc(100vh - 449px);}}
@media screen and (max-width:800px){#main,#main-inner{min-height:calc(100vh - 419px);}}
#main{
position:relative;
width:100%;
height:100%;
background-image:url(../img/common/bg.jpg);
background-position:top center;
background-repeat:repeat;
background-size:100% auto;}

#main::before,
#main::after{
display:block;
content:"";
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
background-position:top center;
background-repeat:repeat;
background-size:100% auto;
z-index:1;}
#main::before{background-image:url(../img/common/bg01.png);}
#main::after{background-image:url(../img/common/bg02.png);}

#main-inner{
width:100%;
max-width:980px;
font-family:'M PLUS 1', sans-serif;
font-size:16px;
padding:50px 20px;
margin:0 auto;}
@media screen and (min-width:981px){#main-inner:not(.wide){display:flex; align-items:flex-start; justify-content:flex-end;}}
@media screen and (max-width:980px){#main-inner{padding:0 0 20px;}}
@media screen and (max-width:800px){#main-inner{font-size:15px;}}
@media screen and (max-width:480px){#main-inner{font-size:13px;}}

#main-inner.wide{display:block;}
#main-inner.wide #frame{width:100% !important;}

/*
=========================
サブメニュー
=========================
*/
@media screen and (min-width:981px){
#menu-sub{
width:250px;
border:3px solid #fff;
border-radius:0 20px 20px  20px;
margin-right:30px;}
#menu-sub > *{
position:relative;
width:100%;
background-image:url(../img/menu/sub/bg01.png), url(../img/menu/sub/bg02.png);
background-position:top left, top left;
background-repeat:repeat-x , repeat;
background-size:auto , 100% auto;
border:3px solid #a0d6ff;
border-radius:0 17px 17px  17px;
padding:50px 10px 10px;}
#menu-sub > *::before{
display:block;
content:"";
position:absolute;
top:5px;
left:0;
width:100%;
height:30px;
background-image:url(../img/menu/sub/head.png);
background-position:top left;
background-repeat:no-repeat;}
#menu-sub > * > *{
min-height:200px;
background:rgba(255,255,255,.8);
border-radius:10px;
padding:10px;}
#menu-sub.fixed{position:fixed; top:120px; margin-right:690px;}}
@media screen and (max-width:980px){#menu-sub{width:100%; background:#fff; margin:0 auto;}}

#menu-sub:not(.news) ul{margin:0 auto;}
#menu-sub:not(.news) ul li a{
display:block;
width:100%;
aspect-ratio:9 / 2;
background-color:#fff;
background-size:100% auto;
border-radius:10px;
transition:all .2s ease;}
@media screen and (min-width:981px){
#menu-sub:not(.news) ul{max-width:180px;}
#menu-sub:not(.news) ul li + li{margin-top:10px;}}
@media screen and (max-width:980px){
#menu-sub:not(.news) ul{display:flex; padding:10px; align-items:center; justify-content:center;}
#menu-sub:not(.news) ul li{width:20%;}
#menu-sub:not(.news) ul li + li{margin-left:5px;}}

#menu-sub ul li.hide a{pointer-events:none; opacity:.8; filter:grayscale(.4);}
#menu-sub ul li.select a{pointer-events:none;}

/*
=========================
メインフレーム
=========================
*/
#frame{
position:relative;
width:calc(100% - 280px);
color:#0c2d57;
background-image:url(../img/common/bg_line.png), url(../img/common/bg_line.png), url(../img/common/bg_main.png);
background-position:bottom left , top left, top left;
background-repeat:repeat-x , repeat-x , repeat;
padding:70px 20px;}
@media screen and (min-width:981px){#frame{border-radius:20px; border:3px solid #fff;}}
@media screen and (max-width:980px){#frame{width:100%; margin:20px auto 0;}}
@media screen and (max-width:800px){#frame{background-size:auto 25px , auto 25px , 12px auto; padding:50px 10px;}}

/*見出し*/
#frame > h1{
display:block;
position:absolute;
top:-5px;
left:20px;}
#frame > h2{
display:block;
background:#ffd552;
font-weight:700;
border-radius:20px;
padding:5px 20px;}
@media screen and (max-width:800px){#frame > h1 img{width:130px;}}
#frame h3{
display:block;
background-image:url(../img/common/line02.png);
background-position:left center;
background-repeat:no-repeat;
font-size:20px;
font-weight:700;
text-shadow:2px 2px 1px rgba(71,152,255,.3);
border-bottom:3px solid #ffd552;
padding:0 5px 5px 30px;
margin:40px auto 10px;}
@media screen and (max-width:640px){#frame h3{font-size:16px;}}

/*
================================================================================================================
汎用
================================================================================================================
*/
.small{font-size:12px;}
@media screen and (max-width:480px){.small{font-size:11px;}}

/*リスト関連*/
ul.list{width:100%; margin:0 auto;}
ul.list > li{display:block; position:relative; padding-left:18px; line-height:150%;}
ul.list > li::before{display:block; position:absolute; top:0; left:0;}
ul.list > li > a{color:#ff6a7a; text-decoration:underline;}
ul.list > li > a:hover{text-decoration:none;}

ul.list.ast{font-family:'Noto Sans JP', sans-serif;}

ul.list.dot > li::before{content:""; top:10px; left:4px; width:5px; height:5px; background:#0c2d57; border-radius:50%;}
ul.list.dot > li.red::before{background:#df0031;}
ul.list.ast > li::before{content:"※";}

ul.list.num > li:first-child::before{content:"1.";}
ul.list.num > li:nth-child(2)::before{content:"2.";}
ul.list.num > li:nth-child(3)::before{content:"3.";}
ul.list.num > li:nth-child(4)::before{content:"4.";}
ul.list.num > li:nth-child(5)::before{content:"5.";}
ul.list.num > li:nth-child(6)::before{content:"6.";}

ul.list.ast.small > li{padding-left:14px; font-weight:500;}

ul.list.dot > li > a{color:#e26086; transition:all .2s ease;}
ul.list.dot > li > a:hover{color:#df0031; text-decoration:underline;}

/*
================================================================================================================
リンクボタン
================================================================================================================
*/
.btn-link{
display:block;
position:relative;
width:100%;
max-width:480px;
font-family:'M PLUS 1', sans-serif;
font-weight:700;
text-align:center;
border-radius:20px;
box-shadow:4px 4px 0 #4798ff;
margin:30px auto;
transition:all .2s ease;}
.btn-link + .btn-link{margin-top:0;}
.btn-link:last-of-type{margin-bottom:0;}
.btn-link p{position:relative; border-radius:16px; z-index:3;}

.btn-link:hover{transform:translateY(5px); box-shadow:4px 4px 0 transparent;}
.btn-link.none{pointer-events:none; filter:grayscale(1.5); opacity:.7;}

/*汎用ボタン*/
.btn-link:not(.back){
background:#ffd552;
font-size:20px;
border:6px solid #0c2d57;
text-shadow:2px 2px 1px rgba(255,255,255,.7) , 1px 1px 1px rgba(255,255,255,.7);
overflow:hidden;}
.btn-link:not(.back) p{padding:20px; border:3px solid #fff;}
.btn-link:not(.back)::before,
.btn-link:not(.back)::after{
display:block;
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
border-radius:20px;
z-index:2;}
.btn-link:not(.back)::before{
background:#ff6a7a;
transform-origin:left;
transform:scaleX(0);
transition:all .3s ease;}
.btn-link:not(.back)::after{
background-image:url(../img/common/bg_btn.png);
background-position:bottom left;
background-repeat:repeat-x;
opacity:0;}
.btn-link:not(.back):hover{color:#fff; text-shadow:2px 2px 1px #ff2c3a , 1px 1px 1px #ff2c3a;}
.btn-link:not(.back):hover::before{transform:scaleX(1);}
.btn-link:not(.back):hover::after{opacity:1;}
.btn-link:not(.back) p::before,
.btn-link:not(.back) p::after{display:block; content:""; position:absolute;}
.btn-link:not(.back) p::before{
top:calc(50% - 15px);
right:10px;
width:30px;
height:30px;
background:#fff;
border-radius:50%;}
.btn-link:not(.back) p::after{
top:calc(50% - 10px);
right:15px;
width:0;
height:0;
border-style:solid;
border-color:transparent transparent transparent #ff6a7a;
border-width:10px 0px 10px 17.32px;
transition:all .3s ease;}
.btn-link:not(.back):hover p::after{border-color:transparent transparent transparent #0c2d57;}
@media screen and (max-width:480px){
.btn-link:not(.back){font-size:18px; border:4px solid #0c2d57;}
.btn-link:not(.back) p{text-align:left; padding:15px 50px 15px 10px;}}
@media screen and (max-width:370px){.btn-link:not(.back){font-size:16px;}}

/*戻るボタン*/
.btn-link.back{
max-width:200px;
color:#603964;
background:#d0aad4;
font-size:17px;
border:3px solid #0c2d57;}
.btn-link.back p{padding:10px; border:2px solid #fff;}
.btn-link.back:hover{color:#fff; background:#da9098;}
@media screen and (max-width:480px){
.btn-link.back{font-size:15px;}
.btn-link.back p{padding:5px;}}
@media screen and (max-width:370px){.btn-link.back{font-size:14px;}}

/*
================================================================================================================
FOOTER
================================================================================================================
*/
#footer{background:#ff6a7a; padding:20px; margin-bottom:25px;}
#footer::after{
display:block;
content:"";
position:absolute;
left:0;
bottom:-25px;
width:100%;
height:25px;
background:#0c2d57;}
@media screen and (max-width:480px){#footer{padding:20px 10px;}}

#footer ul{display:flex; justify-content:center;}
#footer ul li{max-width:145px; background:#fff;}
#footer ul li + li{margin-left:5px;}
#footer ul li img{width:100%;}
#footer ul li a:hover img{opacity:.7;}
@media screen and (max-width:370px){
#footer ul{flex-wrap:wrap;}
#footer ul li{width:calc(50% - 10px); margin:5px;}}

/*
================================================================================================================
TOPに戻るボタン
================================================================================================================
*/
#page-top{
position:fixed;
display:block;
bottom:-10px;
right:10px;
width:118px;
height:107px;
background-image:url(../img/common/btn_top.png);
background-size:100% auto;
background-position:center;
background-repeat:no-repeat;
visibility:hidden;
transition:all .4s ease;
opacity:0;}
#page-top:hover{opacity:.7;}
#page-top.scroll{bottom:10px; opacity:1; visibility:visible;}
@media screen and (max-width:800px){#page-top{width:70px; height:63px;}}