/*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*/
#bg                  {z-index:1;}
#main                {z-index:1;}
#main > #main-inner  {z-index:2;}
#menu                {z-index:3;}

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{
-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;
color:#000;
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;}

/*
================================================================================================================
メニュー
================================================================================================================
*/
#menu{
display:flex;
position:relative;
width:calc(100% + 40px);
background:#231815;
justify-content:center;
margin:0 0 0 -20px;}

#menu > ul{display:flex;}
#menu > ul li{position:relative;}
#menu > ul li a{
display:block;
position:relative;
color:#fff;
font-size:24px;
font-family:'M PLUS Rounded 1c', sans-serif;
transform:rotate(-0.03deg);
padding:20px;}

#menu > ul li a:hover{color:#231815!important;}

#menu > ul li::before{
display:block;
width:100%;
height:100%;
content:"";
position:absolute;
top:0;
left:0;
background:linear-gradient(135deg, #8cfffe 0%,#bdfc5b 100%);
transform-origin:center;
transform:scaleX(0);
opacity:0;
transition:all .2s ease;}
#menu > ul li.select::before,
#menu > ul li:hover::before{opacity:1; transform:scaleX(1); color:#A35100!important;}
@media screen and (max-width:1100px){#menu > ul li a{font-size:20px;}}
@media screen and (max-width:900px){#menu > ul li a{font-size:18px;}}
@media screen and (max-width:850px){
#menu > ul{width:100%; flex-wrap:wrap; justify-content:space-between;}
#menu > ul li{width:calc(50% - 3px); background:#231815; text-align:center; margin:3px 0;}
#menu > ul li a{width:100%; font-size:18px; padding:10px 0;}}

/*
================================================================================================================
メイン
================================================================================================================
*/
#main{position:relative; width:100%; max-width:800px; font-family:'Noto Sans JP', sans-serif; padding:0 20px; margin:0 auto;}
#main::before,
#main::after{
position:fixed;
top:0;
display:block;
content:"";
width:10px;
height:100vh;
background:#ff9235;
border-left:2px solid #231815;
border-right:2px solid #231815;}
#main::before{right:calc(50% - 400px);}
#main::after{left:calc(50% - 400px);}
@media screen and (max-width:480px){#main{padding:0 10px;}}

/*
========================
メインロゴ
========================
*/
#main #top{
width:100%;
height:0;
background-image:url(../img/common/logo/top.png);
background-repeat:no-repeat;
background-position:center;
background-size:100% auto;
padding-top:calc(2 / 5 * 100%);
margin:20px auto;}
@media screen and (max-width:640px){#main #top{background-image:url(../img/common/logo/top_sp.png); padding-top:calc(9.5 / 20 * 100%);}}

/*
========================
メイン入れ子
========================
*/
#main > #main-inner{width:100%; padding:20px 0 0; margin:0 auto;}
#main > #main-inner > .section{
width:100%;
background:#fff;
border:2px solid #231815;
border-bottom:none;
border-radius:30px 30px 0 0;
padding:30px 20px;
margin:0 auto;}
@media screen and (min-width:981px){#main > #main-inner > .section{min-height:calc(100vh - 533px);}}
@media screen and (max-width:980px){#main > #main-inner > .section{min-height:calc(100vh - 527px);}}
@media screen and (max-width:480px){#main > #main-inner > .section{padding:20px 10px;}}

/*
================================================================================================================
汎用
================================================================================================================
*/
#main h2,
#main h3{display:block; position:relative; font-family:'M PLUS Rounded 1c', sans-serif; line-height:100%; transform:rotate(-0.03deg);}

#main h2{font-size:28px; padding-left:20px; margin:50px auto 20px;}
#main h2::before{
display:block;
content:"";
width:50px;
height:16px;
position:absolute;
top:calc(50% - 8px);
left:-35px;
background:#32ddff;
border-radius:0 7px 7px 0;}
#main > #main-inner > .section > h2:first-child{margin-top:0 !important;}
@media screen and (max-width:640px){#main h2{font-size:25px;}}
@media screen and (max-width:480px){#main h2{font-size:22px; margin:30px auto 10px;}}

#main h3{
display:block;
font-weight:900;
font-size:20px;
line-height:140%;
margin:10px auto;}
#main h3 p{display:inline-block; background:linear-gradient(135deg, #ff6d00 0%,#ffff00 100%); border-radius:3px; padding:5px 15px;}
@media screen and (max-width:640px){#main h3 p{font-size:18px;}}
@media screen and (max-width:480px){#main h3 p{font-size:16px;}}

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

ul.dot > li,ul.ast > li,span.ast{position:relative; padding-left:16px;}
ul.num > li{position:relative; padding-left:22px;}

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:"⑤";}

@media screen and (max-width:640px){
ul.dot.small li,ul.ast.small li,span.ast.small{padding-left:14px;}
ul.num > li{padding-left:18px;}}

ul.ast > li a{color:#ff9235; text-decoration:underline; font-weight:bold;}
ul.ast > li a:hover{text-decoration:none;}
ul.ast > li.alert{color:#ff0072; font-weight:bold;}

/*
========================
動画
========================
*/
#movie,
.movie{
position:relative;
width:100%;
margin:0 auto;}
#movie{max-width:1200px;}
.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;}

/*開催概要*/
.about{line-height:180%; letter-spacing:1px;}
.about strong{display:block; font-size:18px;}
@media screen and (max-width:640px){
.about{font-size:13px;}
.about strong{font-size:15px;}}
@media screen and (max-width:480px){.about{font-size:12px;}}

/*
================================================================================================================
LINK
================================================================================================================
*/
.btn-link{
display:block;
position:relative;
width:100%;
max-width:480px;
color:#fff;
background:rgba(0,0,0,1);
font-family:'M PLUS Rounded 1c', sans-serif;
font-size:22px;
border-radius:40px;
overflow:hidden;
padding:20px;
margin:0 auto;
transition:all .2s ease;
z-index:3;}
.btn-link > p{position:relative; transform:rotate(-0.03deg); z-index:4;}

.btn-link::before,
.btn-link::after,
.btn-link > p::before,
.btn-link > p::after{display:block; content:""; position:absolute; transition:all .3s ease;}

.btn-link::before{
top:0;
left:0;
width:100%;
height:100%;
background:#32ddff;
/*background:linear-gradient(to right, #ff96e0 0%,#00d2ff 100%);*/
transform-origin:left;
transform:scaleX(0);
opacity:0;}
.btn-link::after{
top:calc(50% - 17px);
right:20px;
width:34px;
height:34px;
background:#fff;
border-radius:50%;}

.btn-link > p::before{
top:calc(50% - 1px);
right:13px;
width:20px;
height:3px;
background:#000;
opacity:0;}
.btn-link > p::after{
top:calc(50% - 7px);
right:13px;
width:14px;
height:14px;
border-top:3px solid #000;
border-right:3px solid #000;
transform:rotate(45deg);}

.btn-link:hover{background:rgba(0,0,0,0); box-shadow:2px 2px 3px rgba(0,0,0,.4);}
.btn-link:hover::before{opacity:1; transform:scaleX(1);}
.btn-link:hover > p::before{right:8px; background:#ff00b4; opacity:1;}
.btn-link:hover > p::after{right:8px; border-color:#ff00b4;}

@media screen and (max-width:640px){
.btn-link{width:80%; font-size:18px; padding:10px 20px;}
.btn-link::after{top:calc(50% - 12px); width:24px; height:24px;}
.btn-link > p::before{right:11px; width:13px; height:2px;}
.btn-link > p::after{top:calc(50% - 5px); right:10px; width:10px; height:10px; border-top:2px solid #000; border-right:2px solid #000;}}

@media screen and (max-width:420px){
.btn-link{width:100%;}}

/*
================================================================================================================
パララックス用共通背景
================================================================================================================
*/
#bg{
display:block;
position:fixed;
top:0;
left:0;
width:100%;
height:120vh;
background-image:url(../img/common/bg/top.jpg);
background-position:center;
background-size:cover;}

#bg > div{
display:block;
position:fixed;
top:0;
left:0;
width:100%;
height:120vh;
background-repeat:repeat;}
#bg > div:not(.triangle){background-size:86% auto; transition:all .4s ease; opacity:.5;}
#bg > div.triangle{background-position:center; mix-blend-mode:overlay; background-size:50% auto;}
@media screen and (max-width:480px){
#bg > div:not(.triangle){background-size:100% auto;}
#bg > div.triangle{background-size:80% auto;}}

#bg > .bg01{background-image:url(../img/common/bg/01.png); background-position:top right;}
#bg > .bg02{background-image:url(../img/common/bg/02.png); background-position:top left;}
#bg > .bg03{background-image:url(../img/common/bg/03.png); animation:5s float infinite;}
#bg > .bg04{background-image:url(../img/common/bg/04.png); animation:9s float infinite;}
#bg > .bg05{background-image:url(../img/common/bg/05.png); animation:7s float infinite;}

@keyframes float{
0%,100%{top:0;}
50%{top:-20px;}}
@media screen and (max-width:480px){
@keyframes float{
0%,100%{top:0;}
50%{top:-10px;}}
}

/*
================================================================================================================
ページ遷移アニメ
================================================================================================================
*/
#bg.fade{animation-delay:1s;}
#main.fade{animation-delay:.5s;}

.fade{
animation-name:fadeIn;
animation-duration:1s;
animation-timing-function:ease-in-out;
animation-fill-mode:both;}

@keyframes fadeIn{
0%{opacity:0;}
100%{opacity:1;}}

/*
================================================================================================================
TOPに戻るボタン
================================================================================================================
*/
#page-top{
position:fixed;
bottom:-15px;
right:15px;
transition:all .4s ease;
visibility:hidden;
opacity:0;}
#page-top a{
display:flex;
width:70px;
height:70px;
color:#fff;
background:#000;
font-size:13px;
font-weight:700;
font-family:'Noto Sans JP', sans-serif;
text-align:center;
align-items:center;
justify-content:center;
border-radius:50%;
transition:all .4s ease;
opacity:0;}
#page-top a:hover{/*background:#ff5fd0;*/ background:#ff9235;}
#page-top a > span{position:relative; display:block; line-height:130%;}

#page-top.scroll{bottom:10px; right:15px; opacity:1; visibility:visible;}
#page-top.scroll a{opacity:1;}

@media screen and (max-width:640px){#page-top a{width:50px; height:50px; font-size:11px;}}