/*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*/
#id_ea_common_content > *      {z-index:1;}
#id_ea_common_content > * > *  {z-index:2;}
#main .section                   {z-index:3;}
#page-title                      {z-index:4;}

header#id_nav_menu_1              {z-index:9999 !important;}
footer                            {z-index:2 !important;}
#page-top,#page-top a             {z-index:10 !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;}
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;}

/*
================================================================================================================
テンプレート
================================================================================================================
*/
#id_ea_common_content > *{position:relative; font-family:'Noto Sans JP', sans-serif;}

/*背景*/
#bg{
display:block;
position:fixed;
width:100%;
height:110vh;
top:0;
left:0;
background-color:#000;
background-image:url(../img/common/bg.jpg);
background-position:top center;
background-repeat:no-repeat;
background-size:100% auto;}
@media screen and (max-width:800px){#bg{background-size:180% auto;}}

/*メインビジュアル*/
#title{
display:block;
width:100%;
aspect-ratio:96 / 35;
background-image:url(../img/common/main.webp);
background-position:center;
background-repeat:repeat;
background-size:100% auto;}
@media screen and (max-width:800px){#title{aspect-ratio:3 / 1.7; background-size:170% auto;}}

/*イベント期間*/
#date{
display:flex;
width:100%;
background:linear-gradient(to right, #cc6d13 0%,#ffb900 25%,#fcf698 50%,#ffb900 75%,#cc6d13 100%);
line-height:1.5rem;
padding:10px 0;
justify-content:center;
align-items:center;
flex-wrap:wrap;}
@media screen and (min-width:801px){#date{margin-top:-60px;}}

#date p{color:#fcef87; background:#000; border-radius:5px; padding:5px 20px; margin:0 20px;}
#date ul{
display:flex;
color:#000;
height:100%;
font-size:28px;
font-weight:900;
text-align:center;
filter:drop-shadow(1px 1px 0 #fff) drop-shadow(-1px -1px 0 #fff) drop-shadow(-1px 1px 0 #fff) drop-shadow(1px -1px 0 #fff);
transform:translateZ(0);
justify-content:center;
align-items:center;
flex-wrap:wrap;}
#date ul li:last-child{font-size:20px; padding:5px 0 0 10px;}
@media screen and (max-width:740px){
#date ul,
#date ul li{width:100%;}
#date ul li:first-child{margin:15px 0 10px;}
#date ul li:last-child{padding:0;}}
@media screen and (max-width:480px){
#date ul{font-size:20px;}
#date ul li:first-child{margin:10px 0 5px;}
#date ul li:last-child{font-size:15px;}}

/*メイン*/
#main{padding:50px 20px;}
#main #main-inner{position:relative; width:100%; max-width:1200px; margin:0 auto;}
@media screen and (max-width:800px){#main{padding:30px 10px;}}

/*
================================================================================================================
汎用
================================================================================================================
*/
.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;}

/*
========================
動画埋め込み
========================
*/
.movie{
position:relative;
width:100%;
margin:0 auto;}
.movie-inner{
position:relative;
padding-bottom:56.25%;
height:0;
overflow:hidden;}
.movie-inner iframe{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
margin:0 auto;
z-index:2;}

/*
========================
ボタン
========================
*/
.btn-link{
display:block;
position:relative;
width:90%;
max-width:800px;
color:#fff;
background:linear-gradient(to bottom,  #ffe700 0%,#ffae00 100%);
font-size:20px;
font-weight:700;
text-align:center;
border-radius:30px;
border:2px solid #fcf698;
box-shadow:inset 0 0 5px rgba(0,0,0,.3) , 0 5px 0 #562900;
padding:15px 0;
margin:0 auto;
transition:all .2s ease;
cursor:pointer;}
.btn-link:hover{box-shadow:inset 0 0 5px rgba(0,0,0,.3) , 0 5px 0 transparent; transform:translateY(5px);}
.btn-link + .btn-link{margin-top:25px;}

.btn-link::before,
.btn-link::after{display:block; content:""; position:absolute; transition:all .2s ease;}
.btn-link::before{
top:calc(50% - 15px);
right:20px;
width:30px;
height:30px;
background:#fff;
border-radius:50%;}
.btn-link::after{
top:calc(50% - 8px);
right:26px;
width:0;
height:0;
border-style:solid;
border-top:8px solid transparent;
border-bottom:8px solid transparent;
border-left:14px solid #fbb618;
border-right:0;}
.btn-link:hover::before{right:15px;}
.btn-link:hover::after{right:21px; border-left:14px solid #f00;}

.btn-link p{
filter:drop-shadow(1px 1px 0 #311700) drop-shadow(-1px -1px 0 #311700) drop-shadow(-1px 1px 0 #311700) drop-shadow(1px -1px 0 #311700) drop-shadow(0 2px 0 #311700);
transform:translateZ(0);}

@media screen and (max-width:480px){.btn-link{font-size:16px; text-align:left; padding:10px 0 10px 30px;}}

.btn-link.none{pointer-events:none; filter:grayscale(1); opacity:.8;}

/*
================================================================================================================
汎用-入れ子
================================================================================================================
*/
.box{
position:relative;
color:#f8f0d1;
background:rgba(0,0,0,.5);
border:2px solid #fcb718;
line-height:1.8rem;
padding:70px 40px 40px;
margin:80px auto 0;}
.box::before{
display:block;
content:"";
position:absolute;
top:4px;
left:4px;
width:calc(100% - 8px);
height:calc(100% - 8px);
border:2px solid #fcb718;
pointer-events:none;}
@media screen and (max-width:800px){.box{padding:50px 25px 30px; margin:60px auto 0;}}
@media screen and (max-width:480px){
.box{font-size:13px; line-height:1.5rem; border:1px solid #fcb718; padding:40px 15px 20px;}
.box::before{
top:2px;
left:2px;
width:calc(100% - 4px);
height:calc(100% - 4px);
border:1px solid #fcb718;}}
#main-inner > .box:first-child{margin-top:40px;}
@media screen and (max-width:800px){#main-inner > .box:first-child{margin-top:10px;}}

/*
========================
見出し-大
========================
*/
.box h2{
position:absolute;
top:-36px;
left:calc(50% - 240px);
width:calc(100% - 120px);
max-width:480px;
height:72px;
background-image:url(../img/common/bar/pat.png);
background-position:top center;
background-repeat:repeat-x;
background-size:auto 100%;
z-index:3;}
.box h2::before{
display:block;
content:"";
position:absolute;
top:4px;
width:100%;
height:calc(100% - 8px);
background-image:url(../img/common/bar/grd.png);
background-position:top center;
background-repeat:repeat-y;
background-size:100% auto;}

.box h2 > p{
position:relative;
display:flex;
width:100%;
height:100%;
color:#f8efcd;
background:-webkit-linear-gradient(top, #f8efcd 10%, #ffd473 90%);
font-size:28px;
font-weight:900;
justify-content:center;
align-items:center;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;}
.box h2 > p::before,
.box h2 > p::after{
display:block;
content:"";
position:absolute;
top:0;
width:60px;
height:72px;
background-position:top center;
background-repeat:no-repeat;
background-size:auto 100%;}
.box h2 > p::before{left:-60px; background-image:url(../img/common/bar/left.png);}
.box h2 > p::after{right:-60px; background-image:url(../img/common/bar/right.png);}
@media screen and (max-width:800px){
.box h2{width:70%; height:50px; top:-25px; left:15%;}
.box h2 > p{font-size:18px;}
.box h2 > p::before,
.box h2 > p::after{width:42px; height:50px;}
.box h2 > p::before{left:-42px;}
.box h2 > p::after{right:-42px;}}
@media screen and (max-width:480px){
.box h2{height:40px; top:-20px;}
.box h2::before{top:2px; height:calc(100% - 4px);}
.box h2 > p{font-size:15px;}
.box h2 > p::before,
.box h2 > p::after{width:33px; height:40px;}
.box h2 > p::before{left:-33px;}
.box h2 > p::after{right:-33px;}}

/*
========================
見出し-小
========================
*/
.box h3{
position:relative;
width:100%;
color:#fbb618;
border-bottom:1px dashed;
padding:10px 0 10px 25px;
margin:20px auto 10px;}
.box h2 + h3{margin-top:0;}
.box h3::before{
display:block;
content:"◆";
position:absolute;
top:10px;
left:0;}
@media screen and (max-width:480px){
.box h3{padding:5px 0 5px 20px;}
.box h3::before{top:5px;}}

/*
================================================================================================================
FOOTER
================================================================================================================
*/
#footer{background:#150f00; padding:20px;}
#footer #link{display:flex; justify-content:center; align-items:center;}
#footer #link a{display:block;}
#footer #link a + a{margin-left:20px;}
#footer #link a img{width:100%;}
#footer #link a:hover img{opacity:.7;}

/*
================================================================================================================
TOPに戻るボタン
================================================================================================================
*/
#page-top{
position:fixed;
bottom:10px;
right:10px;
width:60px;
height:60px;
border-radius:50%;
box-shadow:0 5px 2px rgba(0,0,0,.6);
z-index:10;}
#page-top a{
display:block;
width:100%;
height:100%;
color:#fff;
background:#311e00;
font-size:13px;
text-align:center;
border-radius:50%;
padding:10px 0 0 0;
transition:.2s ease-in-out;}
#page-top a span{
display:block;
width:0;
height:0;
border-right:10px solid transparent;
border-bottom:16px solid #fff;
border-left:10px solid transparent;
transition:.2s ease-in-out;
margin:0 auto 3px;}
#page-top a:hover{color:#fbb618; background:#fff;}
#page-top a:hover span{border-bottom:16px solid #fbb618;}