@charset "Shift-JIS";

/*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-color:#fff;}
header#id_nav_menu_1{z-index:9999 !important;}
footer{z-index:2 !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%; max-width:2000px; height:100%; margin:0 auto;}
body{
width:100%;
min-width:320px !important;
height:100%;
background-color:#000;
margin:0;
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;}
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:bold; font-style:normal;}
table{width:100%; color:#000; border-collapse:collapse; border-spacing:0; margin:0 auto;}
tr,td,th{border-collapse:collapse;}

a img{transition:opacity .2s ease;}
a:hover img{opacity:.7;}

.wbr{word-break: keep-all; white-space: pre-line;}
.wbr-force{word-break: keep-all; white-space: nowrap;}

/*
================================================================================================================
MAIN
================================================================================================================
*/
#main{
position:relative;
width:100%;
background-image:url(/game/eacsdvx/vi/pre/img/bg_common.png) , url(/game/eacsdvx/vi/pre/img/bg_main.png);
background-repeat:repeat-x , repeat;
z-index:1;}
#main::before,
#main::after{display:block; content:""; position:absolute; left:0; width:100%; z-index:1;}
#main::before{background:linear-gradient(to bottom, rgba(0,155,169,.4) 0%,rgba(0,155,169,0) 100%); top:0; height:50vh;}
#main::after{background:linear-gradient(to bottom, rgba(0,155,169,0) 0%,rgba(145,228,255,.3) 100%); bottom:0; height:30vh;}

#main > .inner{
position:relative;
width:96%;
max-width:980px;
margin:0 auto;
z-index:2;}

@media screen and (min-width:981px){#main{min-height:calc(100vh - 177px);}}
@media screen and (max-width:980px){#main{min-height:calc(100vh - 225px);}}
@media screen and (max-width:640px){#main > .inner{}}

/*
================================================================================================================
フレーム
================================================================================================================
*/
#main > .inner > .frame{
position:relative;
width:100%;
color:#fff;
background-color:#1f222b;
background-image:url(/game/eacsdvx/vi/img/common/frame/01/01.png) , url(/game/eacsdvx/vi/img/common/frame/01/02.png),
                 url(/game/eacsdvx/vi/img/common/frame/01/bar02.png) , url(/game/eacsdvx/vi/img/common/frame/01/bar01.png) , url(/game/eacsdvx/vi/img/common/frame/01/bar01.png);
background-repeat:no-repeat , no-repeat,
                  repeat-x , repeat-y , repeat-y;
background-position:left bottom , right bottom,
                    bottom , left , right;
box-shadow:0 0 10px rgba(3,3,77,.7);
padding-bottom: 5px;
margin:0 auto;
}

#main > .inner > .frame img{width:100%;}
#main > .inner > .frame + .frame{margin:50px auto 0;}
#main > .inner > .frame > .inner{position:relative; padding:20px; z-index:2;}

@media screen and (max-width:480px){
#main > .inner > .frame + .frame{margin:30px auto 0;}
#main > .inner > .frame > .inner{padding:10px 15px;}}

/*キャンペーン*/
#main > .inner > .frame.camp{background-color:#0d275a;}

/*
========================
フレーム装飾
========================
*/
#main > .inner > .frame::before,
#main > .inner > .frame::after{
display:block;
content:"";
position:absolute;
z-index:1;}

#main > .inner > .frame::before{top:3px; left:0; width:100%; height:10px; background:linear-gradient(to right, #98f4ff 20%,#1c3f4f 40%,#1c3f4f 60%,#ff63eb 80%);}
#main > .inner > .frame::after{z-index:0; bottom:5px; left:5px; width:calc(100% - 10px); height:30vh; background:linear-gradient(to bottom, rgba(52,65,122,0) 0%,rgba(52,65,122,1) 100%);}

#main > .inner > .frame > .frame-head{
display:block;
position:absolute;
top:-2px;
left:320px;
width:calc(100% - 640px);
height:22px;
background-image:url(/game/eacsdvx/vi/img/common/frame/01/head/bg.png);
background-repeat:repeat-x;
z-index:2;}
#main > .inner > .frame > .frame-head::before,
#main > .inner > .frame > .frame-head::after{display:block; content:""; position:absolute; top:0; width:320px; height:22px; z-index:2;}
#main > .inner > .frame > .frame-head::before{background-image:url(/game/eacsdvx/vi/img/common/frame/01/head/left.png); left:-320px;}
#main > .inner > .frame > .frame-head::after{background-image:url(/game/eacsdvx/vi/img/common/frame/01/head/right.png); background-position:right; right:-320px;}

@media screen and (max-width:800px){
#main > .inner > .frame > .frame-head{width:calc(100% - 320px); left:160px;}
#main > .inner > .frame > .frame-head::before,
#main > .inner > .frame > .frame-head::after{width:160px;}
#main > .inner > .frame > .frame-head::before{background-image:url(/game/eacsdvx/vi/img/common/frame/01/head/left_sp.png); left:-160px;}
#main > .inner > .frame > .frame-head::after{background-image:url(/game/eacsdvx/vi/img/common/frame/01/head/right_sp.png); right:-160px;}}
@media screen and (max-width:480px){
#main > .inner > .frame > .frame-head{width:calc(100% - 200px); left:100px;}
#main > .inner > .frame > .frame-head::before,
#main > .inner > .frame > .frame-head::after{width:100px;}
#main > .inner > .frame > .frame-head::before{background-image:url(/game/eacsdvx/vi/img/common/frame/01/head/left_min.png); left:-100px;}
#main > .inner > .frame > .frame-head::after{background-image:url(/game/eacsdvx/vi/img/common/frame/01/head/right_min.png); right:-100px;}}

/*
================================================================================================================
見出し
================================================================================================================
*/
.frame .title{
position:relative;
width:100%;
text-align:center;
border-radius:8px;
background-image:url(/game/eacsdvx/vi/pre/img/frame/02.png) , url(/game/eacsdvx/vi/pre/img/frame/03.png) , url(/game/eacsdvx/vi/pre/img/frame/04.png) , 
                 url(/game/eacsdvx/vi/pre/img/frame/bar03.png) , url(/game/eacsdvx/vi/pre/img/frame/bar04.png) , url(/game/eacsdvx/vi/pre/img/frame/bar01.png) , url(/game/eacsdvx/vi/pre/img/frame/bar02.png) ,
                 url(/game/eacsdvx/vi/pre/img/frame/eff01.png) , url(/game/eacsdvx/vi/pre/img/frame/eff02.png) , url(/game/eacsdvx/vi/pre/img/frame/bg.png);
background-position:right top , right bottom , left bottom ,
                    left , right , top , bottom ,
                    top center , bottom center , center;
background-repeat:no-repeat , no-repeat , no-repeat ,
                  repeat-y , repeat-y , repeat-x , repeat-x ,
                  no-repeat , no-repeat , no-repeat;
background-size:auto , auto , auto ,
                auto , auto , auto , auto ,
                100% 11px , 100% 10px , cover;
margin:40px auto 20px;}
.frame .title::before{
display:block;
content:"";
position:absolute;
top:0;
left:0;
width:56px;
height:33px;
background-image:url(/game/eacsdvx/vi/pre/img/frame/01.png);}

.frame .title:first-of-type {margin-top: 0;}

.frame .title > h2{
display:flex;
height:68px;
max-height:68px;
background-image:url(/game/eacsdvx/vi/pre/img/frame/left_short.png) , url(/game/eacsdvx/vi/pre/img/frame/right_short.png);
background-repeat:no-repeat , no-repeat;
background-position:left center , right center;
align-items:center;
justify-content:center;
padding:12px 70px;}

.frame .title > h2 > span{
display:block;
color:#e1fcff;
font-size:24px;
line-height:24px;
font-weight:700;
font-family:'M PLUS Rounded 1c', sans-serif;
letter-spacing:1px;
transform:rotate(0.05deg);
text-shadow:1px  1px 1px #00a2b1,
            -1px  1px 1px #00a2b1,
             1px -1px 1px #00a2b1,
            -1px -1px 1px #00a2b1,
             1px  0px 1px #00a2b1,
             0px  1px 1px #00a2b1,
            -1px  0px 1px #00a2b1,
             0px -1px 1px #00a2b1,
             3px  3px 1px #000,
            -3px  3px 1px #000,
             3px -3px 1px #000,
            -3px -3px 1px #000,
             3px  0px 1px #000,
             0px  3px 1px #000,
            -3px  0px 1px #000,
             0px -3px 1px #000,
             1px  1px 5px #000,
            -1px  1px 5px #000,
             1px -1px 5px #000,
            -1px -1px 5px #000,
             1px  0px 5px #000,
             0px  1px 5px #000,
            -1px  0px 5px #000,
             0px -1px 5px #000,
             0px  0px 10px rgba(0,255,246,.8),
             0px  0px 20px rgba(0,255,246,.6);}

@media screen and (max-width:600px){
.frame .title > h2{background-size:70px auto , 70px auto; background-position:left -5px center , right -5px center; padding:12px 40px;}
.frame .title > h2 > span{font-size:18px; line-height:20px;}}

@media screen and (max-width:480px){
.frame .title > h2{padding:12px 34px;}}

@media screen and (max-width:370px){
.frame .title > h2{background-image:none; padding:11px;}}

/*
================================================================================================================
本文
================================================================================================================
*/
.frame > .top-img{width:calc(100% - 10px); padding-top:15px; margin:0 auto; position:relative; z-index: 1;}
.frame > .top-img img{position:relative;}
.frame > .top-img a.maplink{display: block; position: absolute;}

.frame .text{
width:90%;
background-color:rgba(0,0,0,.6);
background-color:#101422;
font-size:14px;
border:1px solid #009ba9;
box-shadow:0 0 8px #009ba9 , inset 0 0 8px #009ba9;
padding:20px;
margin:20px auto;}
.frame .link-text{color:#ffea35; text-decoration:underline;}

@media screen and (max-width:800px){
.frame .text{width:100%; font-size:13px;}}
@media screen and (max-width:480px){
.frame .text{padding:10px; font-size:12px;}}

/*
========================
テキスト装飾-見出し
========================
*/
.frame .text.date{font-weight:700; font-family:'Noto Sans JP', sans-serif;}
.frame .text.date strong{
display:block;
width:150px;
background-color:#009ba9;
font-size:15px;
text-align:center;
padding:5px 0;
margin:0 auto;}
.frame .text.date p{font-size:22px; text-align:center; margin:10px auto 30px;}
.frame .text.date p:last-child{margin:10px auto 0;}

.frame .text > em{
display:block;
background-color:#ff2dc6;
font-size:16px;
font-weight:700;
font-family:'Noto Sans JP', sans-serif;
text-align:center;
text-shadow:0 0 5px #fff;
padding:7px 0;
margin:0 auto 10px;}
.frame .text > em.entry{background-color:#009ba9; text-shadow:none;}

@media screen and (max-width:560px){
.frame .text.date{padding:20px 10px;}
.frame .text.date p{font-size:18px; margin:10px auto 20px;}}
@media screen and (max-width:480px){
.frame .text > em,
.frame .text.date strong{font-size:14px;}
.frame .text.date p{font-size:15px;}}
@media screen and (max-width:380px){
.frame .text.date strong{font-size:13px; padding:3px 0;}
.frame .text.date p{font-size:13px;}}
@media screen and (max-width:370px){.frame .text.date p{font-size:12px;}}

.frame .inner > strong.notice{display:block; width:90%; background-color:#05b7ac; text-align:center; padding:10px; margin:40px auto;}
@media screen and (max-width:800px){.frame .inner > strong.notice{width:100%;}}
@media screen and (max-width:480px){.frame .inner > strong.notice{font-size:14px;}}
@media screen and (max-width:380px){.frame .inner > strong.notice{font-size:13px;}}

.frame .inner .text.notice em{color:#ff2dc6;}

/*
========================
テキスト装飾-リスト
========================
*/

ul.flow{
font-weight:700;
font-family:'Noto Sans JP', sans-serif;
text-shadow:0 0 8px #009ba9;}
ul.flow li{position:relative; font-size:18px; padding-left:25px; margin-bottom:.4em;}
ul.flow li em{display:inline-block; color:#ff2dc6; border-bottom:1px solid #ff2dc6; text-shadow:0 0 8px #ff2dc6;}
ul.flow li::before{display:block; position:absolute; top:0; left:0;}

ul.flow > li:first-child::before{content:"①";}
ul.flow > li:nth-child(2)::before{content:"②";}
ul.flow > li:nth-child(3)::before{content:"③";}

ul.flow.last-arrow > li:last-child::before{content:"⇒";}

ul.ast > li,
ul.dot > li{position:relative; font-size:13px; padding-left:18px; line-height:1.2; margin-bottom:3px;}

ul.ast > li > ul.dot,
ul.dot > li > ul.ast{margin-top: 3px;}

ul.ast > li em,
ul.dot > li em{color:#ff2dc6;}

ul.ast > li::before,
ul.dot > li::before{display:block; position:absolute; top:0; left:0;}
ul.ast > li::before{content:"※";}
ul.dot > li::before{content:"・";}

@media screen and (max-width:800px){ul.flow li{font-size:16px;}}
@media screen and (max-width:640px){
ul.flow li{font-size:14px; padding-left:20px;}
ul.ast li,ul.dot li{font-size:12px;}}
@media screen and (max-width:480px){ul.ast li,ul.dot li{font-size:11px; padding-left:15px;}}

ul.flow > li > ul.dot{margin-top: 12px; margin-bottom: 12px;}
ul.flow > li > ul.dot > li{margin-bottom: 1em;}

b.title-sub{display:block; color:#05b7ac; margin:20px auto 3px;}
b.title-sub:first-of-type{margin:0 auto 3px;}

/*
========================
リンクボタン
========================
*/
a.link-btn{
display:block;
width:90%;
max-width:640px;
color:#fff;
border:2px solid #feffff;
box-shadow:0 0 3px #000 , 0 0 3px #000 , 0 0 2px #000 , 0 0 2px #000 ,
           inset 0 0 3px #000 , inset 0 0 3px #000 ,  inset 0 0 2px #000 ,  inset 0 0 2px #000;
padding:3px;
margin:40px auto;
transition:all .2s ease;}

a.link-btn > span{
display:block;
background-color:rgba(0,0,0,.6);
background-color:#101422;
font-family:'M PLUS Rounded 1c', sans-serif;
transform:rotate(0.05deg);
text-align:center;
text-shadow:1px  1px 1px #00a2b1,
            -1px  1px 1px #00a2b1,
             1px -1px 1px #00a2b1,
            -1px -1px 1px #00a2b1,
             1px  0px 1px #00a2b1,
             0px  1px 1px #00a2b1,
            -1px  0px 1px #00a2b1,
             0px -1px 1px #00a2b1;
border:2px solid #205663;
padding:10px 20px;
transition:all .2s ease;}

a.link-btn:hover > span{
background-color:rgba(71,254,249,.3);
box-shadow:inset 0 0 5px #009ba9;
text-shadow:1px  1px 1px #00a2b1,
            -1px  1px 1px #00a2b1,
             1px -1px 1px #00a2b1,
            -1px -1px 1px #00a2b1,
             1px  0px 1px #00a2b1,
             0px  1px 1px #00a2b1,
            -1px  0px 1px #00a2b1,
             0px -1px 1px #00a2b1,
             0px  0px 10px rgba(0,255,246,.8),
             0px  0px 20px rgba(0,255,246,.6);}

@media screen and (max-width:480px){
a.link-btn{width:100%; font-size:14px; margin:20px auto;}
a.link-btn > span{padding:6px 10px;}}

/*非アクティブ*/
a.link-btn.none{position:relative; opacity:.5; pointer-events:none;}
a.link-btn.none::after{display:block; content:""; width:100%; height:100%; position:absolute; top:0; left:0; background-color:rgba(0,0,0,.5);}

/*エントリー済*/
a.link-btn.done{pointer-events:none;}
a.link-btn.done > span{
background:linear-gradient(to bottom, rgba(0,0,0,0.6) 0%,rgba(255,45,198,0.3) 100%);
border:2px solid #ff2dc6;
text-shadow:1px  1px 1px #ff2dc6,
            -1px  1px 1px #ff2dc6,
             1px -1px 1px #ff2dc6,
            -1px -1px 1px #ff2dc6,
             1px  0px 1px #ff2dc6,
             0px  1px 1px #ff2dc6,
            -1px  0px 1px #ff2dc6,
             0px -1px 1px #ff2dc6;}

.inner > a.link-btn:last-child{margin-bottom: 20px;}

.text > a.link-btn{margin-top: 20px; margin-bottom: 20px;}
.text > a.link-btn:last-child{margin-bottom: 0;}

/*
========================
epass
========================
*/
#epass{
width:100%;
background:linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 30%,rgba(0,0,0,0.7) 70%,rgba(0,0,0,0) 100%);
text-align:center;
font-size:13px;
padding:5px 0;
margin:0; auto 20px;}
#epass > p::before{display:inline-block; content:"e-amusement passカードナンバー"; color:#47fff8; font-size:11px; padding-right:20px;}
@media screen and (max-width:480px){
#epass{margin:0 auto 20px;}
#epass > p::before{display:block; padding-right:0;}}

/*
================================================================================================================
チェックボックス
================================================================================================================
*/
input[type="checkbox"]{display:none !important; border:0 !important; margin:0 !important;}

.input-checkbox{
position:relative;
width:260px;
color:#fff;
font-size:16px;
font-weight:700;
font-family:'Noto Sans JP', sans-serif;
line-height:30px;
letter-spacing:2px;
padding:0 0 0 40px;
margin:30px auto;
z-index:5;}

.input-checkbox label{display:inline-block; cursor:pointer;}

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

.input-checkbox label:before{
top:0;
left:0;
width:30px;
height:30px;
background-color:#fff;
border:2px solid #009ba9;
border-radius:5px;
opacity:.5;}

.input-checkbox label:after{
top:-4px;
left:10px;
width:10px;
height:30px;
border-right:4px solid transparent;
border-bottom:4px solid transparent;
transform:rotate(45deg);
transition:border-bottom-color,border-right-color .2s ease;}

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

@media screen and (max-width:480px){
.input-checkbox{width:230px; font-size:14px; line-height:24px; padding:0 0 0 30px;}
.input-checkbox label:before{width:24px; height:24px;}
.input-checkbox label:after{top:-8px;}}


.coop_bnr{
text-align:center;
margin-top:20px;
margin-bottom:20px;
font-size:small;}

.coop_bnr img{
width:80%;
max-width:640px;}

.text + .coop_bnr{margin-top:40px;}

img.grayout{filter: brightness(0.5);}