/*
================================================================================================================
グッズ一覧
================================================================================================================
*/
#frame .box.goods > ul > li + li{margin-top:20px;}
#frame .box.goods > ul > li{text-align:center;}
#frame .box.goods > ul > li:nth-child(2) img{border-radius:5px;}
#frame .box.goods > ul > li:nth-last-child(2){color:#fff; background:#000; font-size:13px; font-weight:500; border-radius:5px; padding:0 5px;}
@media screen and (max-width:640px){
#frame .box.goods{padding:40px 10px 20px !important;}}
@media screen and (max-width:480px){
#frame .box.goods > ul > li + li{margin-top:10px;}
#frame .box.goods > ul > li:nth-last-child(2){font-size:11px;}}

/*CD*/
#frame .box.goods.cd > ul > li:nth-child(2) img{border-radius:5px 5px 0 0;}
#frame .box.goods.cd > ul > li:nth-child(3){background:#e5e5e5; border-radius:0 0 5px 5px; padding:20px 10px; margin-top:0 !important;}
#frame .box.goods.cd > ul > li:nth-child(3) > ul li{display:flex; font-size:14px; text-align:left; align-items:center; justify-content:space-between;}
#frame .box.goods.cd > ul > li:nth-child(3) > ul li p:nth-child(2){width:220px; font-weight:500; font-size:12px;}
#frame .box.goods.cd > ul > li:nth-child(3) > ul li + li{margin-top:5px;}
@media screen and (max-width:540px){
#frame .box.goods.cd > ul > li:nth-child(3) > ul li{flex-wrap:wrap;}
#frame .box.goods.cd > ul > li:nth-child(3) > ul li p{width:100% !important;}}

#frame .box.goods::before{
display:block;
content:"";
position:absolute;
top:-15px;
left:-15px;
width:60px;
height:60px;
background-image:url(../img/goods/get01.png);
background-size:100% auto;
background-position:left top;
background-repeat:no-repeat;}
#frame .box.goods.lottery::before{background-image:url(../img/goods/get02.png);}
@media screen and (max-width:640px){#frame .box.goods::before{left:-10px; width:50px; height:50px;}}

.howto{
background:rgba(159,159,255,.4);
border-radius:10px;
border:1px solid #fff;
padding:10px;}
.catch{
color:#000;
font-size:20px;
text-align:center;
line-height:150%;
margin:10px auto;}
@media screen and (max-width:440px){.catch{font-size:18px;}}
@media screen and (max-width:380px){.catch{font-size:16px;}}

/*
================================================================================================================
実施店舗リスト
================================================================================================================
*/
#facility .toggle{
position:relative;
height:40px;
color:#fff;
background:#000;
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 div.list{display:none; max-width:1200px !important; margin:10px auto;}
#facility div.list > strong{display:block; position:relative; color:#fff; background:#df0031; padding:5px 10px; transition:opacity .2s ease;}
#facility div.list > strong:hover{cursor:pointer; opacity:.7;}
#facility div.list > strong:not(:first-child){margin:15px auto 0;}

#facility div.list > strong::before{
display:block;
position:absolute;
content:"▼";
top:5px;
right:10px;}
#facility div.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 .list > ul{display:none; border:1px solid #ccc; border-radius:2px; padding:5px; margin:5px auto 0;}
#facility .list > ul li{padding:5px;}
#facility .list > ul li:nth-child(odd){background-color:#e8f5f8;}

/*
================================================================================================================
参照中epass
================================================================================================================
*/
#epass{background:linear-gradient(to right, #ffa5d6 0%,#9ce3ed 33%,#ffd86f 66%,#ffa5d6 100%); padding:2px 0; margin:20px auto 0;}
#epass ul{
color:#fff;
background:#000;
font-size:13px;
border-top:3px solid #fff;
border-bottom:3px solid #fff;
padding:10px;
text-align:center;}
#epass ul li:nth-child(2){
display:inline-block;
background:#df0031;
font-size:12px;
font-weight:500;
line-height:150%;
border-radius:5px;
padding:0 10px;
margin-top:5px;}

/*
================================================================================================================
履歴関連
================================================================================================================
*/
.log{border:3px solid #979797; margin:10px auto 0;}
.log > *{display:flex; text-align:center;}
.log > *:nth-child(1){color:#fff; background:#000; font-size:13px;}
.log > *:not(:nth-child(1)){background:#fff; font-size:12px; font-weight:500;}
.log > * > *{display:flex; justify-content:center; align-items:center; padding:5px;}
.log > * > * + *{border-left:1px solid #999;}
.log > *:not(:nth-child(1)) + *{border-top:1px solid #999;}
.log .none{pointer-events:none;}

@media screen and (max-width:480px){
.log > *{flex-wrap:wrap;}
.log > * > *{width:100% !important;}
.log > * > * + *{border-left:none;}
.log > *:nth-child(1) > *:not(:nth-child(1)){display:none;}
.log > *:not(:nth-child(1)) > *:nth-child(1){padding-bottom:0;}
.log > *:not(:nth-child(1)) > *:last-child::before{display:inline-block; color:#fff; background:#666; font-size:11px; border-radius:3px; padding:0 5px 2px; margin-right:5px;}}

/*交換履歴*/
.log.cell3 ul li{width:calc(100% / 3); line-height:150%;}
@media screen and (max-width:480px){
.log.cell3 > ul:not(:nth-child(1)) > *:nth-child(2){padding-bottom:0;}
.log.cell3 > ul:not(:nth-child(1)) > *:last-child::before{content:"交換コード";}}

/*応募抽選履歴*/
@media screen and (min-width:481px){.log.lottery > ul:not(:nth-child(1)) > li{padding:10px 5px;}}
@media screen and (max-width:480px){.log.cell3.lottery > ul:not(:nth-child(1)) > li:last-child::before{content:"応募口数";}}
.log.cell1 ul li{width:100%;}
.log.cell1.lottery ul:not(:nth-child(1)) > li{font-size:18px;}

/*所持RG確認*/
.log.cell2 > * > *{line-height:120%; padding:10px 5px;}
.log.cell2 > * > *:nth-child(1){width:calc(100% - 150px);}
.log.cell2 > * > *:nth-child(2){width:150px;}
.log.cell2 a{color:#6b6b6b; transition:all .2s ease;}
.log.cell2 a:hover{color:#df0031; background:#ffd7e5; font-weight:700;}
@media screen and (max-width:480px){
.log.cell2 > *:not(:nth-child(1)) > *:last-child{padding-top:5px;}
.log.cell2 > *:not(:nth-child(1)) > *:last-child::before{content:"所持RG";}}

.box .log{border:1px solid #979797; overflow:hidden; border-radius:10px; margin:0 auto;}
.box .log > * > * + *{border-left:none;}

/*グッズ交換 グッズ選択*/
#select-goods{background:#8383ff; padding:20px; border:1px solid #979797; border-radius:10px;}

/*
================================================================================================================
交換確認
================================================================================================================
*/
.confirm{background:linear-gradient(to right, #ffa5d6 0%,#9ce3ed 33%,#ffd86f 66%,#ffa5d6 100%); border-radius:12px; padding:2px;}
.confirm > ul{background:#c9dae2; font-weight:900; text-align:center; border-radius:10px; border:3px solid #fff;}
.confirm > ul li + li{margin-top:10px;}
.confirm > ul li:nth-child(1){color:#fff; background:#000; font-size:18px; padding:10px 5px; border-radius:10px 10px 0 0;}
.confirm > ul li:nth-child(3){padding:20px 0 10px;}
@media screen and (max-width:480px){
.confirm > ul li:nth-child(1){font-size:15px;}
.confirm > ul li:nth-child(2) p{font-size:22px;}
.confirm > ul li:nth-child(2) p::after{font-size:14px;}}
@media screen and (max-width:370px){.confirm > ul li:nth-child(1){font-size:13px;}}

.confirm:not(.done) > ul li:nth-child(2){display:inline-block; width:140px; border:3px solid #000; border-radius:15px;}
.confirm:not(.done) > ul li:nth-child(2) p{color:#000; background:#fff; font-size:30px; padding:5px; border:1px solid #df0031; border-radius:12px;}
.confirm:not(.done) > ul li:nth-child(2) p::before{display:block; content:"交換に必要なRG"; color:#fff; background:#000; font-size:11px; font-weight:500; border-radius:5px; margin:0 auto 5px;}
.confirm:not(.done) > ul li:nth-child(2) p::after{display:inline-block; content:"RG"; color:#df0031; font-size:16px; margin-left:5px;}

.confirm.done > ul{padding:0 0 10px;}
.confirm.done > ul li:nth-child(2),
.confirm.done > ul li:nth-child(4){width:calc(100% - 20px); color:#fff; background:#df0031; font-size:18px; font-weight:700; border-radius:5px; padding:5px; margin-left:10px;}
.confirm.done > ul li:nth-child(2)::before,
.confirm.done > ul li:nth-child(4)::before{display:block; font-weight:500; font-size:12px;}
.confirm.done > ul li:nth-child(2)::before{content:"現在時刻";}
.confirm.done > ul li:nth-child(4)::before{content:"交換コード";}

.confirm.done.lottery > ul li:nth-child(2){display:none;}
.confirm.done.lottery > ul li:nth-child(4)::before{content:"応募口数";}

/*スタッフの方へ 見出し*/
.staff{color:#fff; text-align:center; font-size:24px; font-weight:900; padding:10px 0 !important;}
@media screen and (max-width:480px){.staff{font-size:20px;}}
@media screen and (max-width:370px){.staff{font-size:16px;}}

/*
================================================================================================================
抽選応募
================================================================================================================
*/
#apply{transition:all .2s ease;}
#apply.none{filter:grayscale(100%); pointer-events:none; opacity:.6;}
#apply #select-goods{margin:0 auto 20px;}

/*
================================================================================================================
ゲージ獲得ポイント
================================================================================================================
*/

/*
=============================
見出し-トグルボタン
=============================
*/
.btn-toggle{
position:relative;
color:#fff;
background:#90acb0;
font-size:20px;
line-height:140%;
text-align:center;
border:2px solid #fff;
border-radius:10px;
padding:3px 5px;
margin:20px auto 10px;
cursor:pointer;
transition:opacity .2s ease;}

.btn-toggle:hover{opacity:.7;}
.btn-toggle::before,
.btn-toggle::after{display:block; content:""; position:absolute; background:#434343; transition:all .2s ease;}
.btn-toggle::before{width:20px; height:2px; top:calc(50% - 1px); right:20px;}
.btn-toggle::after{width:2px; height:20px; top:calc(50% - 10px); right:29px;}
.btn-toggle.open::before,
.btn-toggle.open::after{transform:rotate(225deg);}
@media screen and (max-width:640px){
.btn-toggle{font-size:16px;}
.btn-toggle::before{width:14px; top:calc(50% - 1px); right:15px;}
.btn-toggle::after{height:14px; top:calc(50% - 7px); right:21px;}}

/*
=============================
獲得量リスト
=============================
*/
#gage-point{display:none; background:#90acb0; border:2px solid #fff; border-radius:10px; padding:0 10px; margin:0 auto 10px;}
#gage-point .cat{width:100%; color:#333; font-size:12px; padding:0 0 20px;}

#gage-point .cat > p{width:100%; text-align:center; padding:10px 20px 40px;}
#gage-point .cat > p img{width:60% !important;}
#gage-point .cat > ul{position:relative; width:100%;}
#gage-point .cat > ul li{display:flex; flex-wrap:wrap; align-items:center; font-weight:700;}
#gage-point .cat > ul li + li{border-top:1px dotted #bccdd0;}
#gage-point .cat > ul li p{padding:5px 2.5px;}
#gage-point .cat > ul li p:first-child{width:calc(100% - 50px);}
#gage-point .cat > ul li p:last-child{width:50px; text-align:center;}

#gage-point .cat > ul li span{display:block; color:#f4f7f7; font-size:11px; font-weight:400 !important;}

#gage-point .cat > ul::before,
#gage-point .cat > ul::after{
display:block;
color:#fff;
height:24px;
position:absolute;
top:-24px;
background:#666;
font-size:11px;
text-align:center;
border-radius:5px;
padding:2px 0;}
#gage-point .cat > ul::before{width:calc((100% - 50px) -  2.5px); content:"詳細"; left:0;}
#gage-point .cat > ul::after{width:calc(50px - 2.5px); content:"獲得量"; right:0;}

#gage-point .cat > ul li.pfree{position:relative; border-bottom:none;}
#gage-point .cat > ul li.pfree .btn{
position:relative;
width:100%;
background:#e1feff;
border-radius:20px;
text-align:center;
padding:5px;
margin:20px auto 0;
cursor:pointer;
transition:opacity .2s ease;}
#gage-point .cat > ul li.pfree .btn:hover{opacity:.7;}
#gage-point .cat > ul li.pfree .btn::after{display:block; content:"＋"; position:absolute; top:5px; right:20px;}
#gage-point .cat > ul li.pfree .btn.open::after{content:"×";}
#gage-point .cat > ul li.pfree .inner{display:none; width:100%;}

/*コナクレ*/
#gage-point .cat > ul#kc li{padding:5px;}
#gage-point .cat > ul#kc::after{display:none !important;}
#gage-point .cat > ul#kc::before{width:100% !important;}

@media screen and (max-width:420px){
#gage-point .cat > p img{width:70% !important;}
#gage-point .cat{font-size:11px;}
#gage-point .cat > ul li span{font-size:10px;}}

/*
================================================================================================================
エラー
================================================================================================================
*/
.error{display:flex !important; min-height:200px; align-items:center;}
.error > p > a{color:#e26086; transition:all .2s ease;}
.error > p > a:hover{color:#df0031; text-decoration:underline;}
@media screen and (max-width:480px){.error{min-height:120px;}}

/*
================================================================================================================
ページャー
================================================================================================================
*/
ul.pager{width:300px; text-align:center; margin:20px auto;}
ul.pager > li{display:inline-block; vertical-align:middle;}
ul.pager > li + li {margin-left:10px;}
ul.pager > li > a{cursor:pointer;}
ul.pager > li > a:hover .back{border-right:10px solid #ffa5d6;}
ul.pager > li > a:hover .next{border-left:10px solid #ffa5d6;}

ul.pager > li div{display:inline-block; width:0; height:0; transition:border .2s ease;}
ul.pager > li .back{border-top:10px solid transparent; border-right:10px solid #68b6dd; border-bottom:10px solid transparent; cursor: pointer;}
ul.pager > li .next{border-top:10px solid transparent; border-left:10px solid #68b6dd; border-bottom:10px solid transparent; cursor: pointer;}
ul.pager > li .none{filter:grayscale(100%); pointer-events:none;}

ul.pager > li #select{width:60px;}

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

.input-checkbox{
position:relative;
width:260px;
font-size:18px;
font-weight:700;
font-family:'Noto Sans JP', sans-serif;
line-height:30px;
letter-spacing:2px;
padding:0 0 0 40px;
margin:30px auto !important;
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:#fffbf3;
border:2px solid;
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:#de0011;}

@media screen and (max-width:480px){
.input-checkbox{width:210px; 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;}}