/*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 > .inner{
position:relative;
width:100%;
max-width:980px;
font-family:"Noto Sans JP", sans-serif;
font-optical-sizing:auto;
margin:0 auto;
z-index:2;}

/*
================================================================================================================
フレーム
================================================================================================================
*/
#main > .inner > .frame{
position:relative;
width:100%;
max-width:1200px;
color:#fff;
background:rgba(0,0,0,.7);
border-radius:20px;
border:3px solid #118e2e;
padding:40px;
margin:0 auto;}
#main > .inner > .frame::before{
display:block;
content:"";
position:absolute;
top:20px;
left:20px;
width:calc(100% - 40px);
height:calc(100% - 40px);
background:#eaf2e5;
border-radius:17px;
z-index:3;}

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

@media screen and (max-width:640px){
#main > .inner > .frame{padding:20px;}
#main > .inner > .frame::before{top:10px; left:10px; width:calc(100% - 20px); height:calc(100% - 20px);}
#main > .inner > .frame + .frame{margin:20px auto 0;}}

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

/*
================================================================================================================
見出し
================================================================================================================
*/
.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%; margin:0 auto;}
.frame > .top-img img{position:relative;}
.frame > .top-img a.maplink{display: block; position: absolute;}

.frame .text{width:100%; background:#01160f; font-size:14px; padding:20px 10px; margin:20px auto; border-radius:5px;}
.frame .link-text{color:#ffea35; text-decoration:underline; transition:all .2s ease;}
.frame .link-text:hover{color:#ffae00;}
@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;}
.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:#ff91e1;
font-size:16px;
font-weight:700;
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:100%; background-color:#05b7ac; text-align:center; padding:10px; margin:40px auto;}
@media screen and (max-width:480px){.frame .inner > strong.notice{font-size:14px; margin:20px auto;}}
@media screen and (max-width:380px){.frame .inner > strong.notice{font-size:12px;}}

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

/*
========================
テキスト装飾-リスト
========================
*/
ul.flow li{position:relative; font-size:18px; padding-left:25px; margin-bottom:.4em;}
ul.flow li em{display:inline-block; color:#ff91e1; border-bottom:1px solid;}
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:"⇒";}
@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;}}
@media screen and (max-width:480px){ul.flow li{font-size:13px;}}

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:#ff91e1;}
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:640px){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: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 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;
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);}