@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; }
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;
margin:0 auto;
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;}
a.t_link{color: #000;text-decoration: underline;}

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:#000;
background-color:#ff9ece;
background-image:url(../img/bg.png);
line-height:180%;
font-size:14px;
z-index:2;}
#main::before,
#main::after{
display:block;
content:"";
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
/*
background: linear-gradient(to bottom, rgba(255,255,255,.9) 0%,rgba(255,255,255,0) 60%);*/
background: linear-gradient(to bottom, rgba(255, 64, 105) 0%,#ffffff00 100%);
}
z-index:1;}
#main::before{background:linear-gradient(to bottom, rgba(42, 178, 230, 0) 50%,rgba(42, 178, 230, 0.5) 100%);}
/*
#main::after{background:linear-gradient(to bottom, rgba(255,255,255,.9) 0%,rgba(255,255,255,0) 60%);}*/
@media screen and (max-width:640px){#main{font-size:13px;}}
@media screen and (max-width:480px){#main{font-size:12px;}}

#main-inner{
position:relative;
width:100%;
max-width:980px;
padding:0 20px 20px;
margin:0 auto;
z-index:2;}

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

@media screen and (max-width:640px){#main-inner{padding:0 20px;}}
@media screen and (max-width:480px){#main-inner{padding:0 20px 10px;}}

/*権利表記*/
#main > #copy{
position:relative;
font-size:13px;
text-align:center;
background-color:rgba(255,255,255,.8);
padding:5px;}
#main > #copy p{position:relative; display:inline-block; padding-left:15px;}
#main > #copy p > span{
display:block;
position:absolute;
left:0;
font-size:16px;
font-family:Arial, Helvetica, serif;}
@media screen and (max-width:370px){
#main > #copy{font-size:11px;}
#main > #copy p > span{font-size:14px;}}

/*
========================
リストスタイル
========================
*/
.small{font-size:12px;}
@media screen and (max-width:400px){.small{font-size:11px;}}

ul.dot li,ul.ast li,span.dot,span.ast,ul.num li{display:block; position:relative; padding-left:18px;}
ul.dot li::before,ul.ast li::before,span.dot::before,span.ast::before,ul.num li::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:"※";}
ul.num li:first-child::before{content:"①";}
ul.num li:nth-child(2)::before{content:"②";}
ul.num li:nth-child(3)::before{content:"③";}
ul.num li:nth-child(4)::before{content:"④";}
ul.num li:nth-child(5)::before{content:"⑤";}

.red{color:#ff4068; font-weight:bold;}

/*
========================
見出し
========================
*/
#main h1,#main h2,#main h3,.link-btn,.small-btn,#end{color:#fff; text-align:center;}
#main h1,#main h2,.link-btn,#end{
font-weight:bold;
letter-spacing:2px;
text-shadow:2px 2px 0 #000 , -2px -2px 0 #000 , 2px -2px 0 #000 , -2px 2px 0 #000 ,
            1px 1px 0 #000 , -1px -1px 0 #000 , -1px 1px 0 #000 , 1px -1px 0 #000 ,
            0 2px 0 #000 , 2px 0 0 #000 , 0 -2px 0 #000 , -2px 0 0 #000 ,
            0 3px 1px #000 , 0 4px 1px #000 , 0 5px 1px #000 ,
            -1px 3px 1px #000 , -1px 4px 1px #000 , -1px 5px 1px #000 ,
            1px 3px 1px #000 , 1px 4px 1px #000 , 1px 5px 1px #000;}
#main h3,#date,.step > .inner p.text,.small-btn,#mf li:last-child{font-family:'Noto Sans JP', sans-serif; letter-spacing:1px;}

#main h1{font-size:28px; line-height:200%;}
#main h2{
display:block;
font-size:24px;
/*
border-top:4px solid #000;
border-bottom:4px solid #000;*/
margin:40px auto 20px;}
#main h2 > span{
display:block;
background-color:#fff;
padding:15px 10px 15px;
border-top:4px solid #ff4068;
border-bottom:4px solid #ff4068;}
#main h3{background-color:#000; font-size:16px; line-height:150%; padding:10px; border-radius:20px; margin: 20px auto;}

@media screen and (max-width:670px){
#main h1,#top h3{text-align:left;}
#main h1 br,#top h3 br{display:none;}
#main h2{font-size:20px;}
#main h3{padding:10px 20px;}}
@media screen and (max-width:480px){
#main h1{font-size:16px; line-height:160%;}
#main h2{font-size:18px;}
#main h3{font-size:13px;}}

/*
========================
リンクボタン
========================
*/
.link-btn + h2,
.step + .link-btn{margin:40px auto 20px !important;}

.link-btn{
display:block;
width:100%;
max-width:320px;
font-size:18px;
border-radius:40px;
border:1px solid #000;
box-shadow:0 5px 2px rgba(0,0,0,.3);
margin:20px auto;}

.link-btn > span{
display:block;
background-color:#ff4068;
border-radius:40px;
border:2px solid #fff3a2;
box-shadow:inset 0 0 5px rgba(0,0,0,.3);
padding:15px 0 20px;
transition:background .2s ease;}
.link-btn:hover > span{background-color:#000;}
@media screen and (max-width:420px){.link-btn > span{padding:10px 0 15px;}}
@media screen and (max-width:370px){.link-btn{font-size:16px;}}

.step .link-btn > span{background:#ff7800; cursor:pointer;}
.step .link-btn:hover > span{background:#ffba00;}

.link-btn.none{filter:grayscale(100%); pointer-events:none; opacity:.5;}

.small-btn{
display:block;
width:100%;
max-width:320px;
background-color:#000;
font-size:16px;
border-radius:40px;
border:1px solid #000;
padding:5px;
margin:20px auto;
transition:background .2s ease;}
.small-btn:hover{background-color:#ff4068;}
@media screen and (max-width:370px){.small-btn{font-size:14px;}}

/*
================================================================================================================
概要
================================================================================================================
*/
#top{text-align:center;}
#top > p:first-of-type{margin:0px auto;}
#top > p:first-of-type img{width:100%; }
@media screen and (max-width:540px){#top > p:first-of-type{margin:0px auto;}}

/*終了*/
#end{
display:block;
width:100%;
font-size:18px;
border:1px solid #000;
box-shadow:0 5px 2px rgba(0,0,0,.3);
margin:20px auto 40px;}
#end > span{
display:block;
background-color:#ff4068;
border:2px solid #fff3a2;
box-shadow:inset 0 0 5px rgba(0,0,0,.3);
padding:15px 0 20px;}
@media screen and (max-width:480px){#end{margin:20px auto;}}
@media screen and (max-width:370px){#end{font-size:16px;}}

/*
================================================================================================================
日付
================================================================================================================
*/
#date{background-color:#fff; border-radius:20px; border:1px solid #ff4068; padding:0 10px; margin:20px auto;padding-bottom: 20px;text-align: center;}

ul.date{display:flex; position:relative; align-items:center; justify-content:center; padding:20px 0;}
ul.date + ul.date{border-top:1px solid #ff4068;}

ul.date li{position:relative; z-index:3;}
ul.date li:first-child{color:#fff; background-color:#ff4068; font-weight:700; border-radius:5px; 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 #ff4068;}

@media screen and (max-width:800px){
ul.date{padding:60px 0 20px;}
ul.date li:first-child{position:absolute; width:150px; top:10px; left:calc(50% - 75px);}}
@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:7px; left:-15px; border-width:5px 0 5px 10px;}}
@media screen and (max-width:540px){
#date{margin:20px auto;padding-bottom: 10px;}
ul.date{flex-wrap:wrap;}
ul.date li:not(:first-child){width:100%; text-align:center;}
ul.date li:nth-child(2){margin:0;}
ul.date li#okada:nth-child(3)::before{left:calc(50% - 115px);}
ul.date li:nth-child(3)::before{left:calc(50% - 110px);}}


@media screen and (max-width:370px){
ul.date{width:100%; padding:50px 0 10px;}
ul.date::before,ul.date::after{transform:skew(0deg);}
ul.date::after{left:0;}}

/*
================================================================================================================
応募方法
================================================================================================================
*/
.step{border:1px solid #000; background-color:rgba(255,255,255,.9); /*background-image:url(../img/bg02.png);*/ margin:20px auto 0;}
.step > .inner{border:2px solid #fff3a2; padding:15px; box-shadow:inset 0 0 5px rgba(0,0,0,.3);}

.step > .inner p.text{position:relative; color:#000; font-size:18px; font-weight:bold; padding-left:30px; margin:0 auto 10px;}
.step > .inner p.text::before{display:block;  position:absolute; top:0; left:0; font-size:24px; font-weight:900;}
.step#id1 > .inner p.text::before{content:"①";}
.step#id2 > .inner p.text::before{content:"②";}
.step#id3 > .inner p.text::before{content:"③";}

.step > .inner p.text2{position: relative; padding-left: 15px; font-weight:bold; color:blue;}
.step > .inner p.text2::before {
    content: "■";
    position: absolute;
    display: block;
    font-size: 13px;
    top: 0;
    left: 0;
}

@media screen and (max-width:640px){.step > .inner p.text{font-size:16px;}}
@media screen and (max-width:480px){.step > .inner p.text{font-size:14px;}}



.step > .inner p > em{display:inline-block; color:#ff4068; font-size:22px; font-weight:900; border-bottom:2px solid #ff4068; padding:0 0 4px 0; margin:0 3px;}
.step > .inner p > em > span{font-size:32px;}
@media screen and (max-width:640px){.step > .inner p > em{font-size:18px;}.step > .inner p > em > span{font-size:28px;}}
@media screen and (max-width:480px){.step > .inner p > em > span{font-size:24px;}}

.step > .inner > b{display:block; color:#fff; background-color:#ff4068; text-align:center; border-radius:5px; padding:5px;}

p.epass{width:90%; max-width:max-content; text-align:center; font-weight:bold; margin:20px auto;}

p.epass img{width:100%; max-height:350px;}
p.epass.wide img{width:100%; max-width:350px;}


p.epass_all{width:90%; max-width:700px; text-align:center; font-weight:bold; margin:20px auto;}
p.epass_all img{width:100%;}

p.none{text-align:center;}
p.none::before{display:none !important;}

/*抽せん個数選択*/
.step select{display:block; min-width:120px; font-size:15px; font-weight:bold; border:1px solid #000; padding:5px; margin:10px auto 20px;}
.step select.none{display:none;}


/*エラー用*/
#error > a{color:#000; text-decoration:underline;}
#error > a:hover{text-decoration:none;}
.err_msg {color:red; text-align:center; display:none;}
.err_msg.arrival_zero {display:block;}


/*
================================================================================================================
応募ページ/固定表示
================================================================================================================
*/
#epass,#mf,#mf2,#log{
width:100%;
max-width:980px;
background-color:#fff;
text-align:center;
border:1px solid #ccc;
border-radius:5px;
padding:5px;}

#epass{font-size:13px; margin:20px auto 0;}
#epass > span{display:inline-block; color:#fff; background-color:#000; border-radius:3px; padding:0 10px; margin-left:10px;}

#mf{display:flex; justify-content:center; align-items:center; margin:10px auto 10px;}
#mf li:last-child{font-size:26px; font-weight:900; padding-left:10px;}
#mf li:last-child::after{content:"EP-X"; font-size:14px; font-weight:700;}

#mf2{display:flex; justify-content:center; align-items:center; margin:10px auto 10px;}
#mf2 li:last-child{font-size:26px; font-weight:900; padding-left:10px;}
#mf2 li:last-child::after{content:"EP-Y"; font-size:14px; font-weight:700;}

#log{align-items:center; margin:10px auto 0;}

/*
================================================================================================================
チェックボックス
================================================================================================================
*/
#notice{
border:1px solid #ff4068;
border-radius:5px;
padding:10px;}

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;
font-family:'Noto Sans JP', sans-serif;
line-height:30px;
letter-spacing:2px;
padding:0 0 0 40px;
margin:20px auto 0;
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 #444;
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:#ff4068;}

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


/*
================================================================================================================
おまけ
================================================================================================================
*/
a#ac-link {
    display: block;
    width: 100%;
    max-width: 480px;
    background: #fff;
    margin: 10px auto;
}
a#ac-link img {
    width: 100%;
}


.item-list{
  display:flex;  
  flex-wrap: wrap;
  margin-bottom: 10px;
  justify-content: space-around;
}


.item-list .item{
  margin-bottom: 10px;
  display: block;
  font-weight: bold;
  padding: 10px 0px;  
  width: calc(100%/2.5 - 20px);
  margin:0 5px;
  text-align:center;
}

.item-list .item img{
  max-width: 100%;
}

/*
.item-list .item:nth-child(1) img,.item-list .item:nth-child(3) img{
  max-width: calc(100% * 446 / 709);
}*/

.attention{
text-align:center;
}

/*TOP用*/
#goods .item-list  .item{pointer-events: none;}



/*ステータス別*/
.item-list  div.item,
.item-list  .item.none,
.item-list  .item.done,
.item-list  .item.outofterm,
.item-list  .item.end{pointer-events:none;}
.item-list  .item:hover{background:#d6f3f9;}
.item-list  .item:hover img{transform:scale(1.03);}

/*景品一覧 ボタン 応募用*/
.inner .item-list#exchange .item p.btn::before{content:"交換する";}


/*景品一覧 ボタン*/
.item-list  .item p.btn,.item-list  .item p.end{display: block;background-color: #ff4068;border-radius: 40px;border: 2px solid #fff3a2;padding: 15px 0 20px; transition:all .2s ease;}

.item-list  .item:hover p.btn{background-color:#ff7800;}
.item-list  .item p.end{color:red;};
.item-list  .item:hover p.btn{color:#ff7800;}
.item-list  .item p.btn::before{content:"応募する";}

.item-list  .item.none p.btn{color:#ccc; background:#555; opacity:.7;}
.item-list #mf_area .item.none p.btn::before{content:"CCが不足しています";}

.item-list  .item.done p.btn{color:#fff; background:#fb56a8; }
.item-list  .item.done p.btn::before{content:"交換済";}

.item-list  .item.end p.btn{color:#fff; background:#555; }
.item-list  .item.end p.btn::before{content:"応募数が上限に達しました";}

.item-list  .item#entry p.btn::before{content:"エントリーする";}
.item-list  .item#entry.none p.btn{color:#555; background:#ccc; opacity:.7;}
.item-list  .item#entry.none p.btn::before{content:"エントリー不可";}
.item-list  .item#entry.done p.btn{color:#fff; background:#fb56a8; border-color:#fb56a8;}
.item-list  .item#entry.done p.btn::before{content:"エントリー済";}

.item-list  .item.outofterm p.btn{display:none;}


/*応募済ステータス*/
.item-list  .item p.log{color:#fb56a8; font-size:18px;}
.item-list  .item p.log::after{content:"個 交換済"; font-size:13px;}
.item-list:nth-child(3) .item p.log::after{content:"口 応募済"; font-size:13px;}

.item-list .inner .item p.log{color:#fb56a8; font-size:18px;}


@media screen and (max-width:640px){

.item-list  .item{
  width:100%;  
}

}



table{
  margin: 1em auto;
  max-width:600px;
}

td{
  border:solid 1px;
  padding:4px;
  text-align:center;
}

th{
  border:solid 1px;
  padding:4px;
  font-weight:bold;
  background-color: gray;
  text-align:center;
  width:calc(100%/6);
  font-size:smaller;
}


/*対象機種*/
.lineup {
    display: flex;
    width: 100%;
    margin: 0 auto;
    flex-wrap: wrap;
    justify-content: center;
}

.lineup li {
    width: 30%;
    padding: 5px;
}

@media screen and (max-width:480px){
.lineup li {
    width: 50%;
}
}


.lineup li img {
    width: 100%;
    max-width:max-content;
}


/*
=============================
見出し-トグルボタン
=============================
*/
.btn-toggle{
position:relative;
background:#ff4068;
color:#fff;
font-family:vdl-gigag !important;
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:#fff; 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%;max-width: 600px; margin:auto; 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% max-width: max-content; !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;}}

/*
================================================================================================================
お知らせ
================================================================================================================
*/
#info{background:#fff; text-align:left; border:4px solid #f00; padding:10px; margin:20px auto 0;}
#info > strong{
display:block;
color:#fff;
background:#f00;
font-size:20px;
text-align:center;
padding:10px 5px 5px;
margin:0 auto 10px;}
#info > strong > span{display:block; font-weight:normal; font-size:13px;}

#info > ul{margin:20px auto;}
#info > ul li{background:#a7e3ff; padding:10px; border-radius:5px;}
#info > ul li + li{margin-top:10px;}
#info > ul li b,
#info > ul li strong{display:block; width:100px; color:#fff; background:#004eff; font-size:16px; text-align:center; border-radius:5px; margin:0 auto 10px 0;}
#info > ul li strong{width:60px; background:#000; font-size:14px; margin:20px auto 0 0;}
#info > ul li b + strong{margin-top:0;}
#info > ul li em{color:#004eff; text-decoration:underline;}

#info > ul li:nth-child(2){background:#ffcded;}
#info > ul li:nth-child(2) b{background:#ff1dc2;}
#info > ul li:nth-child(2) em{color:#ff1dc2;}

@media screen and (min-width:561px){#info > ul li span::after{content:"：";}}
@media screen and (max-width:560px){
#info > ul li span{display:block; font-weight:bold;}
#info > ul li span::before{content:"▼";}}
@media screen and (max-width:480px){
#info > strong{font-size:16px;}
#info > ul{margin:10px auto;}
#info > ul li b{width:100% !important; margin:0 auto 5px;}
#info > ul li strong{margin:10px auto 0 0;}}