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

/*
================================================================================================================
MAIN
================================================================================================================
*/
#main{
position:relative;
width:100%;
z-index:1;}
#main::before{
display:block;
content:"";
position:fixed;
width:100%;
height:110vh;
top:0;
left:0;
background-image:url(/game/sdvx/vii/images/common/bg.jpg);
background-position:top center;
background-repeat:no-repeat;
background-size:cover;
z-index:1;}

#main > .inner{
position:relative;
width:96%;
max-width:980px;
padding:50px 0;
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{padding:30px 0;}}

/*
================================================================================================================
フレーム
================================================================================================================
*/
#main > .inner > .frame{
position:relative;
width:100%;
color:#fff;
background:rgba(0,0,0,.7);
border-radius:20px;
border:3px solid #118e2e;
padding:20px;
margin:0 auto;}

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

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

#main > .inner > .frame > .frame-head{display:none;}

/*
================================================================================================================
見出し
================================================================================================================
*/
.frame .title{
position:relative;
width:100%;
text-align:center;
color:#1c2d2a;
background-color:#b4dc87;
background-image:linear-gradient(#a7d782 1px, transparent 1px), linear-gradient(90deg, #a7d782 1px, transparent 1px);
background-size:10px 10px;
background-position:top -5px left -5px;
border:1px solid #72a400;
margin:40px auto 20px;}
.frame .title:first-of-type {margin-top:0;}
@media screen and (max-width:640px){.frame .title{margin:30px auto 10px;}}

.frame .title > h2{display:flex; width:100%; align-items:center; justify-content:center;}
.frame .title > h2 > span{
display:block;
font-size:24px;
font-weight:700;
line-height:1.5rem;
font-family:'M PLUS Rounded 1c', sans-serif;
letter-spacing:1px;
transform:rotate(0.05deg);
padding:10px;}
@media screen and (max-width:640px){.frame .title > h2 > span{font-size:18px; line-height:1.2rem;}}
@media screen and (max-width:480px){.frame .title > h2 > span{font-size:15px;}}

/*
================================================================================================================
本文
================================================================================================================
*/
.frame > .top-img{width:100%; background:#eaf2e5; border-radius:17px; padding:20px; margin:0 auto;}
.frame > .top-img + .inner{margin-top:20px;}
@media screen and (max-width:480px){.frame > .top-img{padding:20px 10px;}}

.frame .text{width:100%; background:#01160f; font-size:14px; padding:20px 10px; margin:20px auto; border-radius:5px;}
@media screen and (max-width:800px){.frame .text{width:100%; font-size:13px; margin:10px auto;}}
@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.date a{color:#ffea35;}

.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:0 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;}}

/*
========================
テキスト装飾-リスト
========================
*/
ul.flow{
font-weight:700;
font-family:'Noto Sans JP', sans-serif;
line-height:200%;
text-shadow:0 0 8px #009ba9;}
ul.flow li{position:relative; font-size:18px; padding-left:25px;}
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:"③";}

#second ul.flow li:first-child::before{content:"②";}

ul.ast li,ul.dot li{position:relative; font-size:13px; padding-left:18px;}
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:"・";}

ul.ast li > .indent{padding:5px 0;}
ul.ast li > .indent p{position:relative; padding-left:14px;}
ul.ast li > .indent p::before{display:block; content:"・"; position:absolute; top:0; left:0;}

@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;}}

dl.dl-tbl {
  font-size:13px;
  margin-left:18px;
  em{display:inline-block; color:#ff2dc6;}

  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  border: solid #fff;
  border-width: 1px 0 0 1px;

  dt {
    width: 250px;
    padding: 5px;
    text-align: center;
    border: solid #fff;
    border-width: 0 1px 1px 0;
  }
  dd {
    padding: 5px;
    width: calc(100% - 250px);
    text-align: left;
    border: solid #fff;
    border-width: 0 1px 1px 0;
  }

  @media screen and (max-width:800px){
    dt {
      width: 100px;
    }
    dd {
      width: calc(100% - 100px);
    }
  }
}

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:100%;
max-width:400px;
color:#fff;
background:linear-gradient(to bottom, #000000 0%,#005100 100%);
text-align:center;
text-shadow:0 0 2px #3a5607 , 1px 1px 0 #3a5607 , -1px -1px 0 #3a5607 , -1px 1px 0 #3a5607 , 1px -1px 0 #3a5607;
border-radius:0px 15px 0px 15px;
border:1px solid #118e2e;
padding:10px;
margin:0 auto;
cursor:pointer;
transition:all .2s ease;}
a.link-btn:hover{
border:1px solid #ffffb1;
text-shadow:0 0 3px #ffffb1 , 0 0 10px #ffffb1;
box-shadow:0 0 5px #ffffb1 , inset 0 0 5px #ffffb1;}
@media screen and (max-width:480px){a.link-btn{width:100%; font-size:14px;}}

/*非アクティブ*/
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); border-radius:0px 15px 0px 15px;}

/*エントリー済*/
a.link-btn.done{pointer-events:none; background:linear-gradient(to bottom, #000000 0%, #8d003b 100%); border:1px solid #ff05c9; text-shadow:0 0 3px #ff91e1 , 0 0 10px #ff91e1;}

a.link-btn + a.link-btn{margin-top:20px;}
.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;}
@media screen and (max-width:480px){
a.link-btn + a.link-btn{margin-top:10px;}
.inner > a.link-btn:last-child{margin-bottom:10px;}
.text > a.link-btn{margin-top:10px; margin-bottom:10px;}}

/*
========================
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 40px;}
#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:#000;
font-size:16px;
font-weight:700;
line-height:16px;
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:16px; padding:0 0 0 30px;}
.input-checkbox label:before{width:24px; height:24px;}
.input-checkbox label:after{top:-8px;}}


/*
================================================
内容を理解した
================================================
*/
.input-checkbox{
display:block;
position:relative;
width:230px;
padding:0 10px 0 22px;
margin:20px auto 0;}

.input-checkbox label{
display:inline-block;
font-size:16px;
font-weight:bold;
cursor:pointer;
padding-top:3px;}

.input-checkbox label:before{
top:4px;
left:0;
width:16px;
height:16px;
border:1px solid #333;}

.input-checkbox label:before{
background-color:rgba(255,255,255,0.7);}

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

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

.input-checkbox label:after{
top:5px;
left:4px;
width:8px;
height:17px;
margin-top:-5.5px;
border-right:3px solid transparent;
border-bottom:3px solid transparent;
border-radius:1.5px;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
transform:rotate(45deg);
transition:border-bottom-color,border-right-color .2s ease;}

@media screen and (max-width:480px){
.input-checkbox{width:220px; padding:0 10px 0 20px; margin:10px auto 0;}
.input-checkbox label{font-size:14px;}}
@media screen and (max-width:320px){.input-checkbox{width:185px; padding:0 10px 0 20px; margin:10px auto 0;}}

/*
================================================
応募口
================================================
*/
#id_lottery_entry{
width:100%;
max-width:980px;
color:#fff;
background-color:#000;
text-align:center;
border-radius:10px;
padding:15px;
margin:20px auto;}

#id_lottery_entry_num{
font-size:32px;
font-weight:bold;
color:#ffc801;
margin:0 2px;}

/*
================================================
店舗在庫
================================================
*/
.cl_mount{
display:flex;
width:100%;
max-width:980px;
background-color:#ffc801;
flex-wrap:wrap;
border:5px solid #000;
padding:0 10px;
margin:10px auto 10px;}

.cl_mount_hide{
display:none;}

.cl_mount_top{
display:flex;
align-items:stretch;
position:relative;
width:100%;
flex-wrap:wrap;}

.cl_location_inner{
flex-basis:60%;
color:#fff;
background-color:#000;
font-size:18px;
font-weight:bold;
line-height:24px;
border-bottom:3px solid #000;}
.cl_mount_location{padding:5px 10px;}
.cl_mount_location:hover{
color:#000;
background-color:#f96001;
cursor:pointer;}

.cl_mount_point{
flex-basis:40%;
background-color:#fff;
font-size:26px;
text-align:center;
line-height:34px;
border-bottom:3px solid #000;}

.cl_mount_inner{
background:#009ba9;  
margin:10px auto 20px; 
border:solid 1px; 
padding:10px 80px;
width:100%;
max-width:700px;}

.cl_mount_pass{flex-basis:50%; text-align:center;}
.cl_mount_lottery{flex-basis:50%; text-align:center;}
.cl_mount_pass_inner{padding:10px; display:flex;}
.cl_mount_l{width:100%;}
.cl_mount_r{width:100%;}
.cl_mount_passimg img{width:100%;max-width:128px;}

.cl_mount_pass.cl_mount_lottery{
margin-right:0;
margin-left:auto;}

.cl_mount_passimg{
margin:0 auto 5px;}

.cl_mount_name{
background-color:#fff;
padding:2px 6px;
margin:0 auto 5px;
text-align:left;
color:black;}

.cl_mount_remain{
position:relative;
width:100%;
max-width:128px;
color:#fff;
background-color:#474e63;
font-size:16px;
text-align:center;
border:1px solid #000;
padding:2px 6px;
margin:0 auto 5px;}

.cl_mount_arrival{
position:relative;
width:100%;
color:#000;
background-color:#fff;
font-size:16px;
text-align:center;
border:1px solid #000;
padding:4px;
margin:0 auto 5px;}

@media screen and (max-width:640px){
.cl_mount_pass_inner{display:block;}
.cl_mount_inner {width:100%; padding:0px;}
.cl_location_inner{font-size:13px;}
.cl_mount_point{font-size:18px;}
.cl_mount_pass{flex-basis:50%;}
.cl_mount_lottery{flex-basis:50%;}
.cl_mount_remain{width:100%; font-size:12px;}}

/*
================================================
ボタン
================================================
*/
.cl_mount_button{
position:relative;
top:0;
width:100%;
color:#ffc801;
background-color:#000;
text-align:center;
box-shadow:3px 3px #bb9200;
padding:4px;
margin:auto;
cursor:pointer;}

.cl_mount_button:hover{
background-color:#000;
box-shadow:3px 3px #ff0055;
color:#ff0055;}

.cl_mount_button.cl_disable{
background-color:#2e2e2e;
box-shadow:3px 3px #bb9200;
color:#777;
cursor:auto;}

.cl_mount_pass.cl_mount_lottery .cl_mount_button{top:31px;}

@media screen and (max-width:640px){
.cl_mount_button{font-size:13px;}}

/*
================================================
引換え
================================================
*/
.cl_mess_exchange{
width:100%;
display:block;}
.cl_mess_lottery{
width:100%;
display:block;}

#id_confirm_location{
width:100%;
max-width:980px;
color:#fff;
background-color:#000;
font-weight:bold;
font-size:30px;
line-height:100%;
text-align:center;
border-radius:10px;
padding:10px;
margin:20px auto;}

#id_pass_wrap{
width:100%;
max-width:980px;
background-color:#009ba9;
text-align:center;
border:5px solid #000;
padding:20px;
margin:10px auto;}

#id_confirm_pass{
text-align:center;}

#id_confirm_curpoint{
display:block;
position:relative;
width:80%;
max-width:600px;
color:#fff;
background-color:#000;
padding:10px;
margin:20px auto;}

#id_confirm_caution{
width:80%;
max-width:600px;
background-color:#fff;
border:solid 1px #000;
padding:20px;
margin:20px auto;}

#id_confirm_caution strong{
display:block;
width:100%;
background-color:#f96001;
font-weight:bold;
font-size:18px;
padding:5px;}

#id_confirm_caution ul#id_change_notice{
color:#000;
width:100%;
background-color:#fff;
margin:20px auto;}

#id_confirm_caution ul#id_change_notice li{
font-size:14px;
text-align:left;
border-bottom:dotted 1px #000;
padding:8px 0;}
#id_confirm_caution ul#id_change_notice li:first-child{border-top:dotted 1px #000;}

#id_pass_wrap .cl_mount_button{
width:80%;
max-width:600px;
font-size:20px !important;
font-weight:bold;
padding:10px;}

#id_entry_done{
width:100%;
max-width:980px;
color:#fff;
background-color:#ff00ff;
font-size:22px;
line-height:100%;
text-align:center;
border-radius:20px;
padding:10px;
margin:30px auto;}

#id_confirm_message div{
width:100%;
margin:auto;}

#id_confirm_history{
width:100%;
max-width:980px;
background-color:#ccc;
font-size:13px;
text-align:center;
border-radius:10px;
padding:10px;
margin:20px auto 0;}

#id_confirm_illegal div,.info_box{
width:100%;
color:#fff;
background-color:#ff0000;
font-size:18px;
font-weight:bold;
text-align:center;
border-radius:10px;
padding:20px;
margin:20px auto;}

#id_confirm_explain br{display:none;}

#id_point_cost,#id_point_having,#id_point_consumed,.cl_mount_point{
font-size:22px;
font-weight:bold;
color:#ffc801;}

@media screen and (max-width:640px){
#id_confirm_location{font-size:18px;}
#id_pass_wrap{padding:10px;}
#id_confirm_pass{width:100%;}
#id_confirm_caution,#id_pass_wrap .cl_mount_button{width:100%;}
#id_confirm_caution{margin:10px auto;}
#id_confirm_caution ul#id_change_notice li{font-size:13px;}
#id_confirm_curpoint,#id_confirm_explain,
#id_confirm_curpoint span,#id_confirm_explain span{font-size:14px;}
#id_confirm_explain br{display:block;}
#id_confirm_message div{width:100%;}
#id_entry_done{font-size:16px; font-weight:bold;}
#id_confirm_illegal div{font-size:13px; padding:15px 8px;}}

/*
========================
残り枚数
========================
*/
.last_num{
display:flex;
text-align:center;
margin:auto;
max-width:360px;
}

.toggle{
color:white;
text-decoration:underline;
}

.cat{
width:100%;
max-width:580px;
}
.cat table{
color:white;
}
.cat th{
border:1px solid #0096A8;
padding:2px;
text-align:center;
font-weight:bold;
}
.cat td{
border:1px solid #0096A8;
padding:2px;
}
.tbl{
width:100%;
max-width:750px;
}
.tbl table{
color:white;
}
.tbl th{
border:1px solid #0096A8;
padding:2px;
text-align:center;
font-weight:bold;
}
.tbl td{
border:1px solid #0096A8;
padding:2px;
}
.th1{
width:80%;
}
.vp{
text-align:right;
}

/*
================================================================================================================
e-apss
================================================================================================================
*/
@media screen and (min-width:981px){#epass{top:118px;}}
@media screen and (max-width:980px){#epass{top:100px;}}

#epass{
position:absolute;
left:0;
width:100%;
color:#fff;
background:linear-gradient(to right, rgba(200,236,250,0.8) 0%,rgba(96,157,201,0.8) 20%,rgba(66,96,163,0.8) 33%,rgba(66,80,118,0.8) 45%,rgba(66,80,118,0.8) 55%,rgba(66,96,163,0.8) 67%,rgba(96,157,201,0.8) 80%,rgba(200,236,250,0.8) 100%);
font-size:14px;
text-align:center;
border-bottom:1px solid #fff;
padding:5px 0;
z-index:4;}
#epass > p a{color:#fff;}
#epass > p a:hover{text-decoration:underline;}
#epass > p::before{display:inline-block; content:"e-amusement passカードナンバー"; font-size:12px; padding-right:30px;}
@media screen and (max-width:480px){
#epass{font-size:12px; background:linear-gradient(to right,rgba(96,157,201,0.8) 0%,rgba(66,96,163,0.8) 20%,rgba(66,80,118,0.8) 35%,rgba(66,80,118,0.8) 65%,rgba(66,96,163,0.8) 80%,rgba(96,157,201,0.8) 100%);}
#epass > p::before{font-size:11px; padding-right:10px;}}
@media screen and (max-width:330px){
#epass{font-size:11px;}
#epass > p::before{font-size:10px; padding-right:5px;}}