#main{
  background:url(../images/campaign/premium/1/bg.webp);
  background-size:contain;
}
/*
#bg::before{
background:linear-gradient(180deg, rgba(245, 184, 39, 1), rgba(255, 255, 255, 1));
min-height:130px;height:412px;display:block;content:"";position:absolute;width:100%;left:0;margin-top:-25px;
}
*/
.container_inner{
/*background:none;*/
position:relative;
background:url(../images/campaign/premium/1/title.webp) no-repeat center top;
padding: 440px 20px 50px;/*z-index:2;*/
}
.container_inner > img{
max-width:100%;display:block;margin:0px auto;
}
@media (min-width: 1920px){
#main{
  background-size:auto;
}
}
@media (max-width: 1156px){
  .container_inner{
    background-size:100% auto;padding-top:calc((100vw / 2.8) + 10px);
  }
  #bg::before{
    height:calc(100vw / 2.8);
  }
}
@media (max-width: 979px){
  #bg::before{
  margin-top:0px;
  height:calc(100vw / 3.0);
  }
}
@media (max-width: 750px){
  #bg::before{
  margin-top:0px;
  height:calc(100vw / 3.1);
  }
}


.date_box{
margin:4% 0px;
}
.date_box img{
margin:0px auto;display:block;
}
ul.date{
display:flex;align-items:center;flex-wrap:wrap;justify-content:center;
background:#e62a87;font-size:30px;color:#fff;padding:10px;margin-top:-10px;
text-shadow: 1px 1px 0 #931658,-1px -1px 0 #931658,-1px 1px 0 #931658,1px -1px 0 #931658,0px 1px 0 #931658,0-1px 0 #931658,-1px 0 0 #931658,1px 0 0 #931658;
border-radius:50px;border:2px solid #418379;box-shadow: 0 0 0 2px #fff inset;
}

.cate.ct{
margin-top:10%;
}
.cate.ct > p{
position:absolute;top:-24px;width:100%;left:0px;text-align:center;
}
.cate.ct > p + div{
color:#87304c;
}
.cate.ct > strong {
display:block;background:#d52f82;color:#fff;text-align:center;padding:5px;
}

.cate .inner{
background:rgba(255,255,255,0.5);padding-bottom:5px;
}
.cate .inner > p{
padding:0px 16px;
}

.about img{
margin:0px auto;display:block;
}
dl.about > dt,
dl.about > dd{
width:100%;padding:20px 0px;
}
dl.about > dt > div{
color:#fff;background:#fb6b9a;box-shadow:6px 5px 0 #d52a62;padding:20px 10px;position:relative;
}
dl.about > dt > div > span{
font-size:30px;
}
dl.about > dd + dt{
margin-top:20px;
}

dl.about dd > table{
margin:0px auto;
}
dl.about dd > table > tbody > tr > th,
dl.about dd > table > tbody > tr > td{
padding:5px 10px;border-bottom:2px solid #a94a3b;border-left:2px solid #a94a3b;
}
dl.about dd > table > tbody > tr > th{
border-top:2px solid #a94a3b;
}
dl.about dd > table > tbody > tr > th:last-of-type,
dl.about dd > table > tbody > tr > td:last-of-type{
border-right:2px solid #a94a3b;
}
dl.about dd > table > tbody > tr > th{
background:#ffc5fd;color:#a94a3b;
}

dl.about dd ul.date{
padding:15px 10px;
}

p.ast{
position:relative;padding: 5px 0px 5px 20px;
}
p.ast::before {
content: "※";position: absolute;display: block;
font-size: 13px;top: 5px;left: 5px;
}

div.btn{
padding:10px 0px !important;cursor:default;
}
p.btn,
div.btn a{
width:calc(100% - 20px);max-width:730px;display:block;margin:0px auto 2px auto;
background:#348783;border:3px solid #348783;box-shadow:4px 4px 0 0 #1b736b, 0 0 0 3px #fff inset;
border-radius:20px;padding:10px;text-decoration:none;color:#fff;text-align:center;
font-size:16px;cursor:pointer;
}
p.btn:hover,
div.btn a:hover{
margin-top:6px;margin-bottom:0px;
background:#45bfb9;
border:1px solid #dbd5fe;box-shadow:0 0 0 3px #fff inset;
text-shadow:1px 1px 0 #3dd137, -1px -1px 0 #3dd137,-1px 1px 0 #3dd137, 1px -1px 0 #3dd137,
0px 1px 0 #3dd137,  -1px 0 #3dd137,-1px 0 0 #3dd137, 1px 0 0 #3dd137;
}
.btn.blue a{
background:#07b0fe;border:3px solid #07b0fe;box-shadow:4px 4px 0 0 #354980, 0 0 0 3px #fff inset;
border-radius:20px;padding:10px;text-decoration:none;color:#fff;text-align:center;
}
.btn.blue a:hover{
background:#6ccefb;
border:1px solid #dbd5fe;box-shadow:0 0 0 3px #fff inset;
text-shadow:1px 1px 0 #354980, -1px -1px 0 #354980,-1px 1px 0 #354980, 1px -1px 0 #354980,
0px 1px 0 #354980,  -1px 0 #354980,-1px 0 0 #354980, 1px 0 0 #354980;
}

.btn.none{
pointer-events:none;
}
p.btn.none,
div.btn.none a{
box-shadow:0 0 0 3px #a7a7a7 inset;color:#000;
text-shadow:1px 1px 0 #a7a7a7, -1px -1px 0 #a7a7a7,-1px 1px 0 #a7a7a7, 1px -1px 0 #a7a7a7,
0px 1px 0 #a7a7a7,  -1px 0 #a7a7a7,-1px 0 0 #a7a7a7, 1px 0 0 #a7a7a7;
background:#ccc;border:2px solid #ccc;
text-align:center;width:calc(100%);max-width:730px;margin:0px auto 2px auto;border-radius:20px;padding:10px;
}
#name{
text-align:center;margin-top:3%;background:#3776b1;color:#fff;padding:5px;
}
.sp_sm{
display:none;
}

h1{
font-size:30px;background:#e82c89;color:#fff;padding:10px;
text-align:center;margin-top:4%;
text-shadow: 1px 1px 0 #931658,-1px -1px 0 #931658,-1px 1px 0 #931658,1px -1px 0 #931658,0px 1px 0 #931658,0-1px 0 #931658,-1px 0 0 #931658,1px 0 0 #931658;
}


@media (max-width: 799px) {
  .cap.ct > p > img{
    width:13.64%;
  }
  h1,
  ul.date{
  font-size:22px;line-height:22px;
  }
  dl.about > dt > p > img{
  max-width:17.51%;
  }
  dl.about > dt > div > span{
  font-size:22px;
  }
}

@media (max-width: 795px){
  #howto1 > p > img{
    max-width:53.08%;
  }
  #howto2 > p > img{
    max-width:23.52%;
  }
  .cate.ct > p{
    top:-15px;
  }
}

@media (max-width: 600px) {
  .date_box img{
  width:31.16%;
  }
}
@media (max-width: 500px) {
  ul.date{
    font-size:15px;
  }
  dl.about > dt > div > span{
    font-size:15px;
  }
  .cate.ct > p{
    top:-5px;
  }
  .sp_sm{
    display:block;
  }
}

.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:#fb6b9a;color:#fff;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:"FP";
}
.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;
}

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

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

.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:180px;text-align:center;
}
.log_head p,
.log_list p{
width:calc(50% - 90px);
}
.log_head{
display:flex; background-color:#fb6b9a;color:#fff; 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;
  }
}
/*
================================================================================================================
アイテムセレクト
================================================================================================================
*/

.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:#fb6b9a;color:#fff;padding:10px;text-align:center;
}

.select > select{
display:block; width:100%; max-width:980px; font-size:15px; padding:10px; margin:0 auto; cursor:pointer;
}

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:#ff59d5; 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:"FP"; 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:400px;
}
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 (max-width: 799px) {
  ul.select-item li:first-child p{
  font-size:20px !important;
  }
}
@media screen and (max-width:370px){
  ul.select-item li:first-child{
    font-size:12px;
  }
}

#select_box .notice{
background-color:#fac801;color:#000;border-radius:5px; padding:10px; margin:0 auto;
}
#select_box .notice > b{
display:block; color:#fff; background-color:#000; padding:5px 10px; margin:0 auto 10px;text-align:center;font-weight:bold;
}

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

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

.text a{
border-bottom:1px solid #7069fe;color:#7069fe;
}
.text a:hover{
border-bottom:none;
}

/*
================================================================================================================
実施店舗リスト
================================================================================================================
*/

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