/*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,#main::before,#main::after {z-index:1;}
#main > .main-inner              {z-index:2;}
#main .section                   {z-index:2;}
#page-title                      {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:#383838; !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;}
button{background:transparent;}
select{
color:#090033;
background:#fff;
font-family:inherit;
font-size:100%;
line-height:1.15;
text-transform:none;
border-radius:0;
border:none;
margin:0;}

.no-show{display:none;}

/*
================================================================================================================
メイン
================================================================================================================
*//*
@media screen and (min-width:981px){#main{min-height:calc(100vh - 201px);}}
@media screen and (max-width:980px){#main{min-height:calc(100vh - 249px);}}*/

#main{display:block; position:relative; width:100%; height:auto; color:#090033; font-size:15px;}
@media screen and (max-width:800px){#main{font-size:14px;}}
@media screen and (max-width:640px){#main{font-size:13px;}}
@media screen and (max-width:480px){#main{font-size:12px;}}

#main > *{position:relative; z-index:3;}
.main-inner{
width:calc(100% - 40px);
max-width:1200px;
color:#090033;
border-left:1px solid rgba(9,0,51,.3);
border-right:1px solid rgba(9,0,51,.3);
padding:100px 0 50px;
margin:0 auto;}
@media screen and (max-width:640px){.main-inner{width:calc(100% - 20px); padding:70px 0 50px;}}

.main-inner.radius{border-top:1px solid rgba(9,0,51,.3); border-radius:50px 50px 0 0;}
@media screen and (max-width:640px){.main-inner.radius{border-radius:30px 30px 0 0;}}

/*共通背景*/
#main{background:rgba(254,249,0,1); /*overflow:hidden;*/}
#main::after{
display:block;
content:"";
position:absolute;
/*
top:-50%;
left:-50%;
width:300%;
height:300%;
*/
top:calc(50% - 300%);
left:calc(50% - 300%);
width:600%;
height:600%;
/* background-image:url(../img/top/bg.webp); */
transform:rotate(-10deg);
background-position:center;
filter:blur(0px);
opacity:.4;}
@media screen and (max-width:640px){
#main::after{
/*
top:-150%;
left:-150%;
width:400%;
height:400%;
background-size:120% auto;
*/
background-size:70% auto;}}

/*背景グラデ*/
#main.grd::before{
display:block;
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:60vh;
background:linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(255,75,0,1) 40%,rgba(255,75,0,0) 100%);}
@media screen and (max-width:640px){#main.grd::before{height:40vh;}}

/*リンク*/
a.link{font-weight:bold;color:#ff1493;text-decoration: underline;}

/*
================================================================================================================
共通
================================================================================================================
*/
/*
=========================
見出し
=========================
*/
#main h1,#main h2,#main h5{font-family:'Noto Sans JP', sans-serif;}
#main h3,#main h4{font-family:'Zen Kaku Gothic New', sans-serif;}

#main h1{
display:block;
position:relative;
width:100%;
background:#fefa2a;
font-size:13px;
font-weight:700;
border-bottom:1px solid #fff;
padding:5px 20px;
margin-top:50px;
z-index:3;}

#main h2{position:relative; font-size:70px; font-weight:900; line-height:120%; margin:0 auto 40px; padding-left:40px;}
#main h2:before{
display:block;
content:"";
position:absolute;
top:calc(50% - 7px);
left:-30px;
width:60px;
height:14px;
background:#090033;}
@media screen and (max-width:1200px){#main h2{font-size:50px;}}
@media screen and (max-width:700px){#main h2{font-size:40px; margin:0 auto 20px;}}

#main h3{color:#fff; background:#090033; font-size:20px; text-align:center; font-weight:700; border-radius:10px; padding:10px; margin:20px auto;}
#main h4{position:relative; font-size:20px; margin:20px auto;}
#main h4::before{
position:absolute;
display:block;
content:"";
top:calc(50% - 1px);
left:0;
width:100%;
height:1px;
border-bottom:1px dashed rgba(9,0,51,.3);}
#main h4 span{
position:relative;
display:inline-block;
min-width:270px;
color:#fff;
background:#090033;
font-weight:700;
letter-spacing:1px;
border-radius:0 20px 20px 0;
padding:10px;
z-index:3;}
@media screen and (max-width:480px){
#main h3,#main h4{font-size:16px;}
#main h3{padding:5px;}
#main h4{margin:10px auto;}
#main h4 span{min-width:200px;}}

#main h5{font-size:18px; font-weight:700; border-bottom:3px solid; padding-bottom:5px; margin:50px auto 10px;}
/*#main h5:first-of-type{margin:0 auto 10px;}*/
#main h5:first-child{margin:0 auto 10px;}
@media screen and (max-width:480px){#main h5{font-size:15px; margin:30px auto 10px;}}

#main .sub_title{
    width: 200px;
    color: #fff;
    background: #0088d5;
    font-size: 14px;
    text-align: center;
    font-weight:bold;
    /* font-weight: bold; */
    border-radius: 5px;}

/*
=========================
レイアウト
=========================
*/
#main .text{font-size:17px; line-height:180%; font-family:'Zen Kaku Gothic New', sans-serif; font-weight:900;}
@media screen and (max-width:1100px){#main .text{font-size:15px;}}
@media screen and (max-width:640px){#main .text{font-size:14px;}}

#main .box{padding:40px 30px;}
@media screen and (max-width:640px){#main .box{padding:30px 20px;}}
@media screen and (max-width:480px){#main .box{padding:20px 10px;}}

#main br.pc{display:block;}
#main br.sp{display:none;}
@media screen and (max-width:639px){
#main br.pc{display:none;}
#main br.sp{display:block;}
}

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

ul.dot,ul.ast,ul.num{line-height:180%;}
ul.dot > li,ul.ast > li,ul.num > li,ol.num2 > li,ol.num3 > li,span.ast{display:block; 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:""; top:10px; left:4px; width:5px; height:5px; background:#090033; border-radius:50%;}
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:"⑤";}
ul.num > li:nth-child(6)::before{content:"⑥";}

ul.ast.small > li,span.ast.small{padding-left:14px;}

ol.num2 > li,ol.num3 > li{padding-left:30px;}
ol.num2 > li:before,ol.num3 > li:before{position:absolute;left:0;counter-increment: listnum;}
ol.num2,ol.num3{
  counter-reset: listnum;
  list-style: none;
  }
ol.num2 > li:before {
   content: "("counter(listnum)")" ; /* カウントした数に応じて番号を表示 */
}

ol.num3 > li:before {
  content: counter(listnum)".";
}

/*
========================
動画
========================
*/
#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;}

/*
=========================
大会の流れ
=========================
*/
.step{display:flex; font-family:'Zen Kaku Gothic New', sans-serif; justify-content:space-between; align-items:stretch; margin:0 auto;}
.step .cat{position:relative; width:calc((100% / 3) - 2.5px); color:#fff; background:#2d00ff; overflow:hidden;}
.step .cat > *{width:100%;padding:10px 10px 15px;}
.step .cat > strong{display:block; width:100%; background:#090033; font-size:20px; text-align:center; font-weight:700;}
.step .cat > p{font-size:17px; line-height:150%;}
.step .cat > p em{display:block; color:#FFF; background:#0088d5; font-weight:700; font-size:13px; padding:0 5px; margin:0 auto 10px; border-radius:3px;}
.step .cat > p em:nth-child(2){margin-top:10px;}
.step .cat > p span.ast{display:block; margin-top:10px; font-weight:normal;}

.step .cat::before{
display:none;
position:absolute;
top:-5px;
left:5px;
font-weight:900;
font-size:60px;
filter:drop-shadow(-1px -1px 0 #090033) drop-shadow(-1px 1px 0 #090033) drop-shadow(1px -1px 0 #090033) drop-shadow(1px 1px 0 #090033);}
/*
.step .cat:first-child::before{content:"1";}
.step .cat:nth-child(2)::before{content:"2";}
.step .cat:nth-child(3)::before{content:"3";}*/

.step .cat:first-child{border-radius:10px 0 0 10px;}
.step .cat:nth-child(3){border-radius:0 10px 10px 0;}

@media screen and (max-width:800px){
.step{flex-wrap:wrap;}
.step .cat{width:100%; border-radius:10px !important;}
.step .cat + .cat{margin-top:20px;}}
@media screen and (max-width:480px){
.step .cat > strong{font-size:16px;}
.step .cat > p{font-size:15px;}
.step .cat > strong{padding:5px;}}

/*
================================================================================================================
ボタン
================================================================================================================
*/
.btn-link,.btn-back{
display:block;
position:relative;
width:90%;
max-width:300px;
font-size:18px;
font-family:'Noto Sans JP', sans-serif;
font-weight:700;
border-radius:30px;
cursor:pointer;
margin:0 auto;
transition:all .2s ease;
overflow:hidden;}
.btn-link:hover,.btn-back:hover{box-shadow:2px 3px 0 #ff1493;}
@media screen and (max-width:480px){.btn-link,.btn-back{font-size:15px;}}

/*
=========================
次のページへ
=========================
*/
.btn-link{color:#090033; border:4px solid;}
.btn-link::before{
display:block;
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:#ff1493;
transform-origin:left;
transform:scale(0,1);
opacity:0;
transition:all .2s ease;}

.btn-link p{display:flex; position:relative; width:100%; height:50px; padding:0 50px 0 20px; align-items:center;}
.btn-link p::before,
.btn-link p::after{display:block; content:""; position:absolute;}
.btn-link p::before{
top:calc(50% - 6px);
right:25px;
width:12px;
height:12px;
border-top:3px solid;
border-right:3px solid;
border-radius:2px;
transform:rotate(45deg);
transition:right .2s ease;}
.btn-link p::after{top:0; right:50px; width:1px; height:100%; background:#090033; transition:background .2s ease;}

.btn-link:hover{color:#fff;}
.btn-link:hover::before{transform:scale(1,1); opacity:1;}
.btn-link:hover p::before{right:20px;}
.btn-link:hover p::after{background:#fff;}

/*ボタン小*/
.btn-link.blunt{width:80%; border:2px solid; border-radius:10px;}
.btn-link.blunt::before{background:#ff1493;}
.btn-link.blunt p{height:40px;}
.btn-link.blunt:hover{box-shadow:none;}
@media screen and (max-width:480px){
.btn-link.blunt p{height:34px; padding:0 30px 0 20px;}
.btn-link.blunt p::before{right:12px;}
.btn-link.blunt p::after{right:30px;}
.btn-link.blunt:hover p::before{right:10px;}}

/*終了時*/
.btn-link.end{color:#999; background:#333; pointer-events:none; opacity:.8;}
.btn-link.end p{justify-content:center; padding:0;}
.btn-link.end p::before,
.btn-link.end p::after{display:none;}

/*
=========================
戻る
=========================
*/
.btn-back{color:#fff; background:#090033; text-align:center; padding:10px 0;}
.btn-back:hover{color:#090033; background:#fff;}

.btn-back.pink{background:#ff0054;}
.btn-back.pink:hover{color:#ff0054; background:#fff; box-shadow:2px 3px 0 #ff0054;}

/*
=========================
テキストリンク
=========================
*/
.btn-text{/*display:inline-block;*/ color:#290ed1; transition:color .2s ease; text-decoration:underline !important; margin:0 4px;}
.btn-text:hover{color:#f30062}

/*
================================================================================================================
TOPに戻るボタン
================================================================================================================
*/
#page-top{
position:fixed;
bottom:-15px;
right:15px;
background:#000;
font-size:13px;
font-weight:700;
font-family:'Noto Sans JP', sans-serif;
text-align:center;
border-radius:10px 10px 0 0;
transition:all .4s ease;
visibility:hidden;
opacity:0;}
#page-top a{display:block; position:relative; color:#fff; padding:10px; transition:opacity .4s ease; opacity:0;}
#page-top:hover a,#page-top a:hover{opacity:.8;}
#page-top a img{width:100%; max-width:60px;}
#page-top a > span{position:relative;}
#page-top a > span:first-child{display:block;}
#page-top a > span br{display:none;}

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

@media screen and (max-width:480px){
#page-top{font-size:11px; /*width:60px; right:-15px; bottom:-10px;  font-weight:400; line-height:130%;*/}}



/*
================================================================================================================
ページ遷移アニメ
================================================================================================================
*/
.fade{
animation-name:fadeIn;
animation-duration:1s;
animation-timing-function:ease-in-out;
animation-fill-mode:both;
animation-delay:.5s;}

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


/*
================================================================================================================
Teaser
================================================================================================================
*/
#tz{display:flex; justify-content:center;align-items:center;width:100%;height:calc(100vh - 200px);margin:0 auto;background-color:#000;}
#tz .visual{width:auto;height:100%;}
#tz .visual img{width:auto;height:100%;}

@media screen and (max-width:980px){
#tz{width:100%;height:auto; align-items: flex-start;overflow:hidden;}
#tz .visual{width:100%;height:auto;display:flex; justify-content:center;}
#tz .visual img{width:150%;height:auto;}
}