@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:#d4d4d6 !important;}
header#id_nav_menu_1{z-index:10 !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%; height:100%; overflow-wrap:break-word}
body{
min-width:320px !important;
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;}

a img{transition:opacity .3s ease;}

input{outline:0; border:none;}
input[type="submit"]{cursor:pointer;}

/*
================================================================================================================
MAIN
================================================================================================================
*/
#main{
position:relative;
color:#fff;
font-size:15px;
font-family:'Noto Sans JP', sans-serif;
z-index:2;}
@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::before,
#main::after{
display:block;
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:1;}
#main::before{
background-color:#fff2fe;
background-image:url(../img/common/bg_top.png) , url(../img/common/bg_bottom.png) , url(../img/common/bg.png) , url(../img/common/bg_under.jpg);
background-position:right top , left bottom , top , top center;
background-size:80% auto , 80% auto , 40% , 100% auto;
background-repeat:no-repeat , no-repeat , repeat , no-repeat;
position: fixed;
}
#main::after{
background-image:url(../img/common/top02_pc.webp) , url(../img/common/top01_pc.webp);
background-position:center top , center top;
background-repeat:no-repeat , no-repeat;}

@media screen and (max-width:1200px){
#main::after{background-image:url(../img/common/top02_sp.webp) , url(../img/common/top01_sp.webp); 
background-size:100% auto , 100% auto;}}

@media screen and (min-width:981px){
#main::before{background-attachment:fixed , fixed , scroll;}}

@media screen and (max-width:980px){
#main::before{position:fixed; background-size:80% auto , 80% auto , 40% , 100% auto;}}

@media screen and (max-width:640px){
#main::before{background-size:100% auto;}}

@media screen and (max-width:460px){
#main::before{
background-position:right top , left bottom , top , 50% 100%;
background-size:150% auto , 150% auto , 50% , 100% auto;
}}

@media screen and (max-width:375px){
#main::before{
background-position:right top , left bottom , top , 100%;
background-size:180% auto , 180% auto , 50% , 100% auto;
}}

#main-inner{
position:relative;
width:100%;
max-width:1200px;
padding:400px 20px 50px;
margin:0 auto;
z-index:3;}
@media screen and (max-width:1200px){#main-inner{padding-top:calc(1 / 3 * 100%);}}

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

/*
========================
共通項目
========================
*/
#main h1{
display:block;
position:relative;
background:linear-gradient(to bottom, #ee8d12 0%,#fbe100 100%);
font-size:24px;
font-weight:700;
text-align:center;
border-top:4px solid;
border-bottom:4px solid;
padding:20px 10px;
margin:0 auto 10px;
filter:drop-shadow(0 -6px 0 #262c64) drop-shadow(0 6px 0 #262c64);
text-shadow:1px 1px 0 #262c64 , 1px 0 0 #262c64 , 0 1px 0 #262c64 ,
            2px 2px 0 #262c64 , 2px 0 0 #262c64 , 0 2px 0 #262c64 ,
            0 0 2px #262c64;}
#main h1 br{display:none;}
@media screen and (max-width:1100px){#main h1{font-size:20px;}}
@media screen and (max-width:900px){#main h1{line-height:150%; padding:10px;} #main h1 br{display:block;}}
@media screen and (max-width:540px){#main h1{font-size:17px; margin:10px auto;}}
@media screen and (max-width:470px){#main h1{text-align:left;} #main h1 br{display:none;}}
@media screen and (max-width:420px){#main h1{font-size:15px;}}

/*ページ見出し*/
#main h2{
display:block;
position:relative;
background:linear-gradient(to right, rgba(235,88,21,1) 0%,rgba(31,38,40,0) 100%);
font-size:20px;
font-weight:700;
border-left:10px solid #000;
border-bottom:3px solid #000;
text-shadow:1px 1px 0 rgba(0,0,0,.5) , 2px 2px 0 rgba(0,0,0,.5);
padding:15px;
color:#fff;}
ul.date + h2{margin:80px auto 0;}
@media screen and (max-width:1100px){#main h2{font-size:18px;}}
@media screen and (max-width:480px){#main h2{font-size:16px;} ul.date + h2{margin:40px auto 0;}}

#main .text{padding:20px; line-height:150%;}
#main .text > a{color:#e2640c; font-weight:bold;}
#main .text > a:hover{text-decoration:underline;}
@media screen and (max-width:800px){#main .text{padding:20px 10px;}}

/*エラーテキスト部分色替え*/
.text,
#main-inner > p,
.select > span{
text-shadow:0 0 3px #000,0 0 3px #000,0 0 3px #000,
            0 0 6px #000,0 0 6px #000,0 0 10px #000;}
.text > span > a{color:#e2640c; font-weight:bold;}
/*
========================
リストスタイル
========================
*/
.small{font-size:12px;}
@media screen and (max-width:400px){.small{font-size:11px;}}
ul.dot li,ul.ast li,span.dot,span.ast{display:block; position:relative; padding-left:15px;}
ul.dot li::before,ul.ast li::before,span.dot::before,span.ast::before{display:block; position:absolute; top:0; left:0;}
ul.dot > li::before,span.dot::before{content:"・";}
ul.ast > li::before,span.ast::before{content:"※";}

/*
========================
フレーム
========================
*/
.step,
.item > .inner,
.step .change_box,
.select{
position:relative;
background:linear-gradient(to bottom, rgba(245,222,30,.9) 0%,rgba(240,115,10,.9) 100%);
box-shadow:5px 5px 0 rgba(0,0,0,.3);
border:3px solid #000;
padding:20px;}

.step .change_box{padding:10px;}

/*キャンペーン3追加箇所*/
.change_box > h4{background-color:#eb5815; padding:10px;}
.change_box + .change_box{margin-top:40px;}
.change_box > p{color:#000; text-shadow:none; margin-top:20px;}
.change_box p:nth-of-type(2){width:100%; max-width:500px; margin:0 auto;}
.change_box p:nth-of-type(2) img{width:100%;}

.link-bnr{
display:block;
width:90%;
max-width:290px;
margin:40px auto 0;}
.link-bnr img{width:100%}
.link-bnr:hover img{opacity:.5}

@media screen and (max-width:480px){.link-bnr{max-width:200px;}}

/*
================================================================================================================
ボタン
================================================================================================================
*/
.link-btn{
display:block;
position:relative;
width:calc(100% - 40px);
max-width:400px;
height:50px;
color:#fff;
background-color:#eb5815;
font-size:17px;
font-weight:700;
text-align:center;
line-height:50px;
margin:40px auto 0;}
.link-btn br{display:none;}
.link-btn.blue{background-color:#000;}
.link-btn.over{background-color:#666;}

.link-btn + .link-btn{margin:20px auto 0;}

a.link-btn{transition:all .2s ease;}
a.link-btn:hover{background-color:#5c434b; filter:drop-shadow(-10px 0 0 #ff4f1b) drop-shadow(10px 0 0 #ff4f1b);}

.link-btn::before,
.link-btn::after{
display:block;
content:"";
position:absolute;
top:0;
width:0;
height:0;
border-style:solid;
transition:all .2s ease;}
.link-btn::before{left:-20px; border-width:25px 20px 25px 0; border-color:transparent #eb5815 transparent transparent;}
.link-btn::after{right:-20px; border-width:25px 0 25px 20px; border-color:transparent transparent transparent #eb5815;}

a.link-btn:hover::before{border-color:transparent #5c434b transparent transparent;}
a.link-btn:hover::after{border-color:transparent transparent transparent #5c434b;}

.link-btn.blue::before{border-color:transparent #000 transparent transparent;}
.link-btn.blue::after{border-color:transparent transparent transparent #000;}
.link-btn.over::before{border-color:transparent #666 transparent transparent;}
.link-btn.over::after{border-color:transparent transparent transparent #666;}

@media screen and (max-width:480px){
.link-btn{height:40px; line-height:40px;}
.link-btn.long{font-size:14px;}
.link-btn::before{left:-15px; border-width:20px 15px 20px 0;}
.link-btn::after{right:-15px; border-width:20px 0 20px 15px;}
a.link-btn:hover{filter:drop-shadow(-6px 0 0 #ff0096) drop-shadow(6px 0 0 #ff0096);}}
@media screen and (max-width:400px){
.link-btn.long{font-size:15px; line-height:18px; padding-top:2px;}
.link-btn.long br{display:block;}}
@media screen and (max-width:370px){.link-btn{font-size:16px;}}

/*
================================================================================================================
日付
================================================================================================================
*/
ul.date{display:flex; position:relative; width:calc(100% - 40px); align-items:center; justify-content:center; padding:20px 0; margin:20px auto;}
ul.date::before,
ul.date::after{display:block; content:""; position:absolute; width:100%; transform:skew(-20deg);}
ul.date::before{top:0; left:0; height:100%; background-color:#fff; z-index:2;filter:drop-shadow(-2px 0 0 #fff) drop-shadow(2px 0 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(2px 2px 5px #000);}
ul.date::after{bottom:10px; left:-9px; height:3px; background-color:#eb5815; z-index:3;}

ul.date li{text-shadow:none; position:relative; z-index:3;}
ul.date li:first-child{color:#fff; background-color:#eb5815; font-weight:700; padding:5px 10px;}
ul.date li:not(:first-child){color:#000; font-size:30px; font-weight:900;}
ul.date li:not(:first-child) span{font-size:20px; font-weight:700;}
ul.date li:nth-child(2){margin:0 40px 0 10px;}
ul.date li:nth-child(3)::before{
display:block;
content:"";
position:absolute;
left:-25px;
top:5px;
width:0;
height:0;
border-style:solid;
border-width:10px 0 10px 15px;
border-color:transparent transparent transparent #000;}

@media screen and (max-width:800px){
ul.date{margin:40px auto 20px;}
ul.date li:first-child{position:absolute; top:-25px; left:-10px;}}
@media screen and (max-width:740px){
ul.date li:not(:first-child){font-size:24px;}}
@media screen and (max-width:650px){
ul.date li:not(:first-child){font-size:22px;}
ul.date li:not(:first-child) span{font-size:15px;}
ul.date li:nth-child(2){margin:0 20px 0 0;}
ul.date li:nth-child(3)::before{top:10px; left:-15px; border-width:5px 0 5px 10px;}}
@media screen and (max-width:540px){
ul.date{flex-wrap:wrap;}
ul.date::after{left:-12px;}
ul.date li:not(:first-child){width:100%; text-align:center;}
ul.date li:nth-child(2){margin:0;}
ul.date li:nth-child(3)::before{left:calc(50% - 125px);}
ul.date li:nth-child(3)::before{top:5px;}}
@media screen and (max-width:370px){
ul.date{width:100%;}
ul.date::before,ul.date::after{transform:skew(0deg);}
ul.date::after{left:0;}}

/*
================================================================================================================
キャンペーン概要
================================================================================================================
*/
.step::before{
text-shadow:1px 1px 0 #000 , 1px 0 0 #000 , 0 1px 0 #000 ,
            2px 2px 0 #000 , 2px 0 0 #000 , 0 2px 0 #000 ,
            0 0 2px #000;}
.step > h3{
text-shadow:1px 1px 0 #000 , 1px 0 0 #000 , 0 1px 0 #000 ,
            2px 2px 0 #000 , 2px 0 0 #000 , 0 2px 0 #003238 ,
            0 0 2px #000;}

.step{padding:40px 20px 20px; margin:60px auto 0;}
.step::before{
display:block;
content:"1";
position:absolute;
top:-40px;
left:-20px;
width:80px;
height:80px;
font-weight:900;
background-image:url(../img/common/hex.png);
background-size:100% auto;
background-position:center;
background-repeat:no-repeat;
font-size:40px;
line-height:80px;
text-align:center;
filter:drop-shadow(-2px 0 0 #fff) drop-shadow(2px 0 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(2px 2px 5px #000);}
.step:nth-of-type(2)::before{content:"2";}

.step > h3{
background-color:#eb5815;
font-size:20px;
font-weight:700;
line-height:150%;
text-align:center;
/*box-shadow:6px 5px 0 #000;*/
padding:10px;
margin:0 auto 30px;}
.step > h3 br{display:none;}
@media screen and (max-width:1200px){.step > h3 br{display:block;}}
@media screen and (max-width:800px){.step > h3{font-size:16px;}}
@media screen and (max-width:600px){.step > h3{text-align:left;}.step > h3 br{display:none;}}
@media screen and (max-width:480px){.step > h3{font-size:14px;}}

.step > p{width:100%; max-width:400px; margin:0 auto;}
.step > p img{width:100%;}
.step:nth-of-type(2) > p{max-width:500px;}

.step ul.num{
width:100%;
max-width:600px;
background-color:rgba(0,0,0,.8);
border-radius:5px;
padding:0 10px;
margin:20px auto;}
.step ul.num li{display:flex; padding:10px 5px; flex-wrap:wrap; align-items:center;}
.step ul.num li + li{border-top:1px solid #fff;}
.step ul.num li span{font-size:12px;}
.step ul.num li p:nth-child(odd){width:calc(100% - 100px);}
.step ul.num li p:nth-child(even){width:100px; font-size:24px; font-weight:700; letter-spacing:1px; text-align:center;}
.step ul.num li p:nth-child(even)::after{content:"BG"; font-size:14px;}
@media screen and (max-width:620px){.step ul.num li span{display:block;}}
@media screen and (max-width:440px){
.step ul.num li p{width:100% !important; text-align:center;}
.step ul.num li p:nth-child(odd){margin-bottom:10px;}}

/*
================================================================================================================
アイテム一覧
================================================================================================================
*/
#item-list{display:flex; width:100%; justify-content:space-between; flex-wrap:wrap; margin:60px auto 0;}
.item{position:relative; width:calc(100% - 0px); margin-bottom:80px;}
.item img{width:100%;}

/*景品の種類と特徴*/
.item > .inner > .comment{display:flex; width:140px; font-size:14px; margin-left:auto;}
.item > .inner > .comment > p{background-color:#000; border:2px #fff solid; text-align:center; margin:10px auto; padding:5px;}
.item > .inner > .comment > p > span{font-size:10px;}

@media screen and (max-width:1100px){
/*#item-list{width:calc(100% - 30px); max-width:500px;}2分割の時に復活*/
.item{width:100%; margin-bottom:60px;}
.item img{max-width:400px;}}
@media screen and (max-width:480px){.item:last-child{margin-bottom:40px;}}

/*
================================================================================================================
アイテム-交換必要BG･アイテム名
================================================================================================================
*/
.item > ul{
display:flex;
position:absolute;
top:-50px;
/*left:-25px;*/
left:-15px;
align-items:center;
filter:drop-shadow(-2px 0 0 #fff) drop-shadow(2px 0 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(2px 2px 5px #000);
z-index:2;}
.item > ul li{
position:relative;
font-weight:700;
text-shadow:1px 1px 0 #000 , 1px 0 0 #000 , 0 1px 0 #000 ,
            2px 2px 0 #000 , 2px 0 0 #000 , 0 2px 0 #000 ,
            0 0 2px #000;}


/*〇〇BGで交換*/
.item > ul li:first-child{
display:block;
position:relative;
width:100px;
height:100px;
font-weight:900;
/*
background-image:url(../img/common/hex_blue.png);
background-size:100% auto;
background-position:center;
background-repeat:no-repeat;
*/
/*filter:drop-shadow(1px 1px 1px #fff);*/
font-size:30px;
line-height:80px;
text-align:center;
z-index:3;}
.item > ul li:first-child span{font-size:16px; font-weight:700;}
.item > ul li:first-child::before{
display:block;
position:absolute;
bottom:30px;
content:"BGで交換";
width:100%;
font-weight:700;
line-height:100%;
text-align:center;
font-size:13px;}

/*hex色分け*/
#item01.item > ul li:first-child,
#item02.item > ul li:first-child,
#item03.item > ul li:first-child{
background-image:url(../img/common/hex_pink.png);
background-size:100% auto;
background-position:center;
background-repeat:no-repeat;
}
#item06.item > ul li:first-child{
background-image:url(../img/common/hex_blue.png);
background-size:100% auto;
background-position:center;
background-repeat:no-repeat;
}
#item05.item > ul li:first-child,
#item08.item > ul li:first-child{
background-image:url(../img/common/hex_orange.png);
background-size:100% auto;
background-position:center;
background-repeat:no-repeat;
}
#item04.item > ul li:first-child,
#item07.item > ul li:first-child{
background-image:url(../img/common/hex_green.png);
background-size:100% auto;
background-position:center;
background-repeat:no-repeat;
}

/*アイテム名*/
.item > ul li:nth-child(2){z-index:2;}
.item > ul li:nth-child(2) p{
display:inline-block;
position:relative;
height:30px;
background-color:#000;
font-size:15px;
line-height:30px;
padding:0 10px 0 20px;
margin-left:-20px;}
.item > ul li:nth-child(2) p span{font-size:13px;}
.item > ul li:nth-child(2) p br{display:none;}
.item > ul li:nth-child(2) p::after{
display:block;
content:"";
position:absolute;
top:0;
right:-30px;
width:0;
height:0;
border-style:solid;
border-width:30px 30px 0 0;
border-color:#000 transparent transparent transparent;}

@media screen and (max-width:480px){
.item > ul li:nth-child(2) p br{display:block;}
.item > ul li.long p{height:46px; line-height:18px; padding-top:4px;}
.item > ul li.long p::after{border-width:46px 30px 0 0;}}
@media screen and (max-width:370px){
.item > ul li:nth-child(2) p{font-size:13px;}
.item > ul li:nth-child(2) p span{font-size:11px;}}

/*
================================================================================================================
アイテム-アイテム内容
================================================================================================================
*/
.item > .inner{
display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;
padding:30px 20px 20px;}
@media screen and (max-width:480px){.item > .inner{padding:30px 10px 10px;}}

/*.item > .inner > p,*/
.item > .inner > .main,
.item > .inner ul.sub,
.item > .inner ul.sub > li:first-child,
.item > .inner ul.sub::after{filter:drop-shadow(4px 4px 1px rgba(0,0,0,.3));}

/*デジタルアイテム 2並び*/
.item > .inner > p{width:100%; text-align:center;}
/*.item > .inner > .digital_item{display:flex;}
.item > .inner > .digital_item p{max-width:350px;}*/
.item > .inner > .digital_item > .digi_text{color:#000; margin:20px 0;}

@media screen and (max-width:480px){
.item > .inner > .digital_item{display:inline;}
}


/*
========================
デジタルアイテムあり
========================
*/
.item > .inner .main{width:calc(100% - 200px); text-align:center;}

/*サブアイテム*/
.item > .inner ul.sub{
position:relative;
display:flex;
width:200px;
height:200px;
background-color:rgba(0,4,40,.5);
box-shadow:0 0 10px #00eaff;
align-items:center;
justify-content:center;
border-radius:50%;}
.item > .inner ul.sub > li:first-child{
position:absolute;
top:-10px;
color:#fff;
font-weight:700;
text-align:center;
padding:0 20px;}
.item > .inner ul.sub > li:first-child::before{
display:block;
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-color:#e44291;
transform:skew(-20deg);
z-index:2;}
.item > .inner ul.sub > li:first-child p{position:relative; z-index:3;}
.item > .inner ul.sub > li:first-child span{display:block; font-size:12px;}
.item > .inner ul.sub > li:last-child{width:100%; padding:20px;}
@media screen and (max-width:400px){
.item > .inner ul.sub{width:180px; height:180px;}}

/*プラス装飾*/
.item > .inner ul.sub::after{
display:block;
content:"";
position:absolute;
left:-20px;
width:40px;
height:40px;
background-image:url(../img/common/cross.png);
background-position:center;
background-repeat:no-repeat;}

@media screen and (max-width:600px){
.item > .inner .main{width:100%;}
.item > .inner .main img{max-width:300px;}}


/*
========================
アイテム注釈-上
========================
*/

.item > .inner p.explain{
  position:relative;
  color: #000;
  text-align: left;
  margin-top: 1em;
  margin-bottom: 0.5em;
  filter: none;
}
/*横のポップアップ*/
.item > .inner p.explain.popup01::after,
.item > .inner p.explain.popup02::after{
position:absolute;
  content:"";
  display:block;
  width:145px;
  height:89px;
  right:0;
  z-index:5;
}
.item > .inner p.explain.popup01::after{
  background-image:url("../img/common/popup_1.png");
  background-repeat:no-repeat;
  top:-45px;
}
.item > .inner p.explain.popup02::after{
  background-image:url("../img/common/popup_2.png");
  background-repeat:no-repeat;
  top:-35px;
}
@media screen and (max-width:460px){
.item > .inner p.explain.popup01::after,
.item > .inner p.explain.popup02::after{
  background-size:80%;
  right:-38px;
}
.item > .inner p.explain.popup01::after{top:-30px;}
.item > .inner p.explain.popup02::after{top:-10px;}
}
@media screen and (max-width:375px){
.item > .inner p.explain.popup01::after,
.item > .inner p.explain.popup02::after{
  background-size:60%;
  right:-70px;
}
.item > .inner p.explain.popup01::after{top:18px;}
.item > .inner p.explain.popup02::after{top:25px;}
}

.item > .inner em{
display:block;
position:relative;
width:80%;
color:#fff;
font-size:14px;
text-align:center;
font-weight:700;
padding:5px 20px;
margin-bottom:10px;}
.item > .inner em p{position:relative; z-index:3;}
@media screen and (max-width:540px){.item > .inner em br{display:none;}}
@media screen and (max-width:430px){.item > .inner em{width:calc(100% - 20px); font-size:13px; margin-top:20px;}}

/*背景帯*/
.item > .inner em::before{
display:block;
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-color:#e44291;
transform:skew(-20deg);
z-index:2;}

/*
========================
アイテム注釈-下
========================
*/
.item > .inner strong{
display:block;
width:100%;
font-size:13px;
font-weight:400;
text-align:center;
background-color:#000;
padding:3px;
margin:20px auto 0;}
/*
.item > .inner strong br{display:none;}
*/

@media screen and (max-width:480px){.item > .inner strong{font-size:10px;}}
@media screen and (max-width:370px){.item > .inner strong br{display:block;}}

/*アイテム回転*/
.rotate{transform:rotate(-5deg); padding:10px 0;}

/*アイテム折り返し*/
.item > .inner.wrap .main{width:100%;}

/*クプロセット内容*/
ul.qpro{
width:100%;
font-size:12px;
background-color:#00b4ff;
padding:5px 10px;}
ul.qpro li{display:block; position:relative; padding-left:15px;}
ul.qpro li::before{display:block; content:"・"; position:absolute; top:0; left:0;}
ul.qpro li:last-child::before{content:"※";}
@media screen and (max-width:480px){ul.qpro{font-size:11px;}}

/*
========================
アイテム調整
========================
*/
/*.item > .inner > p img{max-width:350px;}*/
.item > .inner > p img{max-width:688px;}
#item03.item > .inner > p img{max-width:390px;}
/*.item > .inner > p img{max-width:310px;}*/
/*#item03.item > .inner > p img{max-width:350px;}*/
/*
#item02.item > .inner > p img,
#item03.item > .inner > p img,
#item04.item > .inner > p img,
#item05.item > .inner > p img{max-width:350px;}
#item07.item > .inner > p img{max-width:380px;}
#item08.item > .inner > p img{max-width:470px;}
*/
/*
#item03.item > .inner > p img{max-width:310px;}
#item05.item > .inner > p img{max-width:400px;}
#item06.item > .inner .main{width:140px;}
#item06.item > .inner .main img{max-width:75px;}
.qpro.item > .inner > p{margin:30px 0;}
.qpro.item > .inner > p img{max-width:350px;}

@media screen and (max-width:600px){
#item01.item > .inner .main img,
#item02.item > .inner .main img{max-width:250px;}}
@media screen and (max-width:460px){
#item06.item > .inner .main{margin:0 0 20px;}
#item06.item > .inner .main img{max-width:50px;}}*/

#item07.item > .inner > ul.cd{
  width:100%;
  background-color:rgba(0,0,0,.8);
  font-size:12px;
  font-weight:400;
  text-align:left;
  padding:5px;
}
#item07.item > .inner > ul.cd .sp-br{display:none;}

@media screen and (max-width:460px){
#item07.item > .inner > ul.cd{font-size:11px;}
#item07.item > .inner > ul.cd .sp-br{display:block;}
}
@media screen and (max-width:375px){
#item07.item > .inner > ul.cd{font-size:10px;}
}


/*
================================================================================================================
epass
================================================================================================================
*/
#epass{
width:100%;
max-width:980px;
background-color:rgba(0,0,0,.5);
font-size:13px;
text-align:center;
padding:5px;
margin:20px auto 0;}
#epass > span{display:inline-block; background-color:#ee8d12; border-radius:3px; padding:0 10px; margin-left:10px;}

/*
================================================================================================================
実施店舗リスト
================================================================================================================
*/
#facility{width:100%; max-width:1200px; color:#000; background:#fff; padding:10px; margin:20px auto 0;}

#facility .toggle{
position:relative;
height:40px;
color:#fff;
background:#d77f17;
font-size:18px;
font-weight:bold;
text-align:center;
border-radius:4px;
padding:10px;
margin:10px auto 0;
transition:opacity .2s ease;}
#facility .toggle:hover{cursor:pointer; opacity:.7;}
#facility .toggle:first-of-type{margin:0 auto;}
@media screen and (max-width:480px){#facility .toggle{font-size:16px;}}

#facility .list{display:none; max-width:1200px !important; margin:10px auto;}
#facility .list > strong{display:block; position:relative; color:#28248c; background-color:#e4e3ff; padding:5px 10px; transition:opacity .2s ease;}
#facility .list > strong:hover{cursor:pointer; opacity:.7;}
#facility .list > strong:not(:first-child){margin:15px auto 0;}

#facility .list > strong::before{
display:block;
position:absolute;
content:"▼";
top:5px;
right:10px;}
#facility .list > strong.open::before{content:"▲";}

.toggle::before,
.toggle::after{
display:block;
content:"";
position:absolute;
background-color:#fff;}
.toggle::before{top:8px; right:23px; width:4px; height:24px; transition:all .3s ease;}
.toggle::after{top:18px; right:13px; width:24px; height:4px;}
.toggle.open{background-color:#db2a32;}
.toggle.open::before{opacity:0; transform:rotate(90deg);}
@media screen and (max-width:480px){
.toggle::before{top:10px; right:23px; width:4px; height:20px;}
.toggle::after{top:18px; right:15px; width:20px; height:4px;}}

#facility ul{display:none; border:1px solid #ccc; border-radius:2px; padding:5px; margin:5px auto 0;}
#facility ul li{padding:5px;}
#facility ul li:nth-child(odd){background-color:#fccbe3;}

/*
================================================================================================================
BG確認ページ
================================================================================================================
*/
.head,.list{width:100%; max-width:980px;}
.head p,.list p{padding:10px 5px;}
.head p:first-child,.list p:first-child{width:calc(100% - 100px);}
.head p:last-child,.list p:last-child{width:100px; text-align:center;}

.head{display:flex; background-color:#000; text-align:center; margin:20px auto 0;}
.list{background-color:#fff; margin:0 auto 20px;}

.list > a{display:flex; width:100%; justify-content:space-between; align-items:center; transition:all .2s ease;}
.list > a:hover{color:#eb5815;}
.list > a > p:last-child{font-weight:700;}
.list > a > p:last-child::after{content:"BG";}
.list > a + a{border-top:1px solid #ccc;}
.list > a.none{pointer-events:none;}

.list > a:nth-child(even){background-color:#e4e3ff;}
.list > a:nth-child(even):hover{background-color:#fccbe3;}
.list > a:nth-child(odd):hover{background-color:#fcef90;}

.list > a.disabled{pointer-events:none; color:#999 !important;}

/*
================================================================================================================
アイテムセレクト
================================================================================================================
*/
.select{display:block; width:100%; max-width:980px; margin:0 auto 40px;}
@media screen and (max-width:480px){.select{padding:10px;}}

.select > p{background-color:#000; padding:10px;}

.select > select{display:block; width:100%; max-width:980px; font-size:15px; padding:10px; margin:0 auto 20px; cursor:pointer;}
@media screen and (max-width:480px){.select > select{font-size:11px;}}
ul.select-item{max-width:500px; background-color:rgba(255,255,255,.4); padding:10px; margin:20px auto; box-shadow:0 0 5px rgba(0,0,0,.4)}
ul.select-item li{width:100%; color:#fff; text-align:center;}
ul.select-item li:first-child{background-color:#000; font-weight:700; padding:5px; margin:0 auto 10px;}
ul.select-item li:first-child p{font-size:20px;}
ul.select-item li:first-child p::after{content:"BG"; font-size:16px;}
ul.select-item li:nth-child(3){margin:30px 0; filter:drop-shadow(4px 4px 1px rgba(0,0,0,.3));}
ul.select-item li:nth-child(3) img{width:100%; max-width:223px;}
ul.select-item li:nth-child(even){
background-color:rgba(64,61,121,.7);
font-size:17px;
border-radius:5px;
padding:5px;
margin:0 auto;}
ul.select-item li#time::before{display:block; content:"現在時刻"; font-size:12px;}
ul.select-item li#code::before{display:block; content:"交換コード"; font-size:12px;}
@media screen and (max-width:370px){ul.select-item li:first-child{font-size:12px;}}

.notice{background-color:#d21159; border-radius:5px; padding:10px; margin:0 auto;}
.notice > b{display:block; color:#d21159; background-color:#fff; padding:5px 10px; margin:0 auto 10px}

.select a.link-btn:hover{background-color:#eb5815; filter:drop-shadow(-10px 0 0 #fff) drop-shadow(10px 0 0 #fff);}
.select a.link-btn:hover::before{border-color:transparent #eb5815 transparent transparent;}
.select a.link-btn:hover::after{border-color:transparent transparent transparent #eb5815;}
@media screen and (max-width:480px){.select a.link-btn{margin:20px auto 10px;}}

/*注意事項 TOP*/

.notice#top{
width:calc(100% - 40px);
background-color:rgba(0,0,0,.7);
border:1px solid #ffab00;
margin:0 auto 20px;}
.notice#top > b{color:#ff4f1b;}
.notice#top ul li{font-size:14px; line-height:150%;}
@media screen and (max-width:480px){
.notice#top{width:calc(100% - 20px);}
.notice#top ul li{font-size:12px;}}

/*
================================================================================================================
ページャー
================================================================================================================
*/
.t_left{
display:inline-block;
width:0;
height:0;
border-top:10px solid transparent;
border-right:10px solid #12a7b0;
border-bottom:10px solid transparent;
transition:border .2s ease;}
a:hover .t_left{border-right:10px solid #ff0096;}

.t_right{
display:inline-block;
width:0;
height:0;
border-top:10px solid transparent;
border-left:10px solid #12a7b0;
border-bottom:10px solid transparent;
transition:border .2s ease;}
a:hover .t_right{border-left:10px solid #ff0096;}

.t_left_none{
display:inline-block;
width:0;
height:0;
border-top:10px solid transparent;
border-right:10px solid #ccc;
border-bottom:10px solid transparent;}

.t_right_none{
display:inline-block;
width:0;
height:0;
border-top:10px solid transparent;
border-left:10px solid #ccc;
border-bottom:10px solid transparent;}

#page ul{width:300px; text-align:center; margin:20px auto 0;}
#page ul li{display:inline-block; padding:0px 5px; vertical-align:middle;}
#page select#page_select{min-width:60px; font-size:14px; border:1px solid #000; cursor:pointer; padding:5px;}

/*
================================================================================================================
log
================================================================================================================
*/
.log_head,.log_list{width:100%; max-width:980px;}
.log_head p,.log_list p{padding:10px 5px;}
.log_head p:last-child,.log_list p:last-child{width:150px;text-align:center;}
.log_head p,.log_list p{width:calc(50% - 75px);}
.log_head{display:flex; background-color:#000; text-align:center; margin:20px auto 0;align-items: center;}
.log_list{background-color:#fff; margin:0 auto 20px;color:#000;}
.log_list > div{display:flex; width:100%; justify-content:space-between; align-items:center; transition:all .2s ease;}
.log_list > div:nth-child(even){background-color:#e4e3ff;}
@media screen and (max-width:500px){
.log_head p,.log_list p{width:33% !important;}
}