/*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:#fff;}

/*z-index*/
#main,#main::before,#main::after {z-index:1;}
#main > #main-inner              {z-index:2;}
#main > #main-inner > #frame     {z-index:3;}

header#id_nav_menu_1 {z-index:9999 !important;}
footer               {z-index:10 !important;}
#page-top            {z-index:20 !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;}

.no-show{display:none;}/*タブ切替*/
.red{color:#cb0715;}

/*
================================================================================================================
COMMON
================================================================================================================
*/
@media screen and (min-width:981px){#frame{min-height:calc(100vh - 201px);}}
@media screen and (max-width:980px){#frame{min-height:calc(100vh - 249px);}}
#main{position:relative; width:100%; height:100%;}
#main::before{
display:block;
content:"";
top:0;
left:0;
position:fixed;
width:100%;
height:100%;
background-color:#fff;
background-image:url(../img/common/bg/page/pc.jpg);
background-position:center;
background-size:cover;
background-repeat:no-repeat;}

#main-inner{position:relative; width:100%; max-width:1500px; margin:0 auto;}
@media screen and (min-width:1101px){#main-inner{display:flex; padding-right:30px;}}

#frame{
position:relative;
width:50%;
max-width:900px;
color:#376e9e;
background:#fff;
font-family:'Noto Sans JP', sans-serif;
margin-left:50%;
padding:0;}
#frame::before,
#frame::after{
display:block;
content:"";
width:20px;
height:100%;
position:absolute;
top:0;
background:linear-gradient(to bottom, #bef4ff 0%,#beddfe 50%,#69e6ff 100%);
pointer-events:none;
z-index:3;}
#frame::before{left:-20px;}
#frame::after{right:-20px;}
@media screen and (max-width:1300px){
#frame::before,#frame::after{width:10px;}
#frame::before{left:-10px;}
#frame::after{right:-10px;}}
@media screen and (max-width:1100px){#frame{width:100%; max-width:480px; padding-top:85px; margin:0 auto;}}
@media screen and (max-width:480px){#frame{padding-top:65px;}}

#frame img{width:100%;}

/*
=========================
リスト
========================
*/
#main .small{font-size:12px;}
@media screen and (max-width:640px){#main .small{font-size:11px;}}

/*リスト関連*/
ul.list{width:100%; text-align:left; margin:0 auto;}
ul.list > li{display:block; position:relative; padding-left:18px; line-height:150%;}
ul.list > li + li{margin-top:5px;}
ul.list > li::before{display:block; position:absolute; top:0; left:0;}
ul.list > li > a{color:#ff6a7a; text-decoration:underline;}
ul.list > li > a:hover{text-decoration:none;}

ul.list.ast{font-family:'Noto Sans JP', sans-serif;}

ul.list.dot > li::before{content:""; top:10px; left:4px; width:5px; height:5px; background:#000; border-radius:50%;}
ul.list.ast > li::before{content:"※";}
ul.list.sq > li::before{content:"■";}

ul.list.num > li:first-child::before{content:"1.";}
ul.list.num > li:nth-child(2)::before{content:"2.";}
ul.list.num > li:nth-child(3)::before{content:"3.";}
ul.list.num > li:nth-child(4)::before{content:"4.";}
ul.list.num > li:nth-child(5)::before{content:"5.";}
ul.list.num > li:nth-child(6)::before{content:"6.";}

ul.list.ast.small > li{padding-left:14px; font-weight:500;}

ul.list.dot > li > a{color:#e26086; transition:all .2s ease-in-out;}
ul.list.dot > li > a:hover{color:#df0031; text-decoration:underline;}

ul.list.box{background:#181818; padding:20px; margin:20px auto;}

/*
========================
見出し
========================
*/
#frame h2{
display:flex;
position:relative;
width:100%;
max-width:300px;
color:#fffc00;
background-color:#ffb403;
background-image:url(../img/common/bg/head.png);
background-size:50% 100%;
background-position:left bottom;
background-repeat:no-repeat;
font-family:pragmatica, m-plus-1c, sans-serif;
font-size:clamp(1.625rem, 1.307rem + 1.59vw, 2.5rem);/*40-26*/
font-weight:900;
line-height:100%;
text-align:center;
border:4px solid #fc8012;
border-radius:30px;
padding:10px 0 5px;
margin:0 auto;
justify-content:center;
align-items:center;}
#frame h2 > p{filter:drop-shadow(1px 1px 0 #ff9847) drop-shadow(-1px -1px 0 #ff9847) drop-shadow(-1px 1px 0 #ff9847) drop-shadow(1px -1px 0 #ff9847) drop-shadow(1px 0 0 #ff9847) drop-shadow(-1px 0 0 #ff9847) drop-shadow(0 1px 0 #ff9847) drop-shadow(0 -1px 0 #ff9847) drop-shadow(0 0 1px #ff9847); transform:translateZ(0);}
#frame h2.long{max-width:500px;}

#frame h3{
display:block;
color:#fff;
background:#4cd2fc;
font-size:clamp(1rem, 0.909rem + 0.45vw, 1.25rem);/*20-16*/
font-weight:900;
text-align:center;
border-radius:5px;
padding:5px;
margin:30px auto 10px;}
@media screen and (max-width:480px){#frame h3{margin:20px auto 5px;}}

/*
========================
メインビジュアル以下
========================
*/
#inner{
background-image:url(../img/common/bg/page/main.jpg);
background-size:100% auto;
background-repeat:repeat-y;
padding:40px 20px;}
@media screen and (max-width:640px){#inner{padding:40px 10px;}}

#inner .bnr{display:block; width:100%; max-width:600px; margin:0 auto 40px; transition:opacity .2s ease;}
#inner .bnr:hover{opacity:.5;}

.box{
width:100%;
color:#376e9e;
background:#dafcff;
border:4px solid #3aa9df;
border-radius:10px;
padding:20px;
margin:0 auto;
box-shadow:inset 0 4px 0 #f8feff;}
.box + .box{margin-top:40px;}
@media screen and (min-width:801px){.box.short{width:80%;}}
@media screen and (max-width:800px){.box{padding:10px;}}

.bar{
width:100%;
max-width:618px;
aspect-ratio:618 / 13;
background-image:url(../img/common/bg/bar.png);
background-size:100% auto;
background-position:center;
background-repeat:no-repeat;
margin:20px auto;}

/*
================================================================================================================
ボタン
================================================================================================================
*/
.btn-apply,.btn-back{
display:block;
position:relative;
color:#fff;
font-family:m-plus-1c, sans-serif;
font-size:clamp(1.25rem, 1.205rem + 0.23vw, 1.375rem);/*22-20*/
font-weight:900;
text-align:center;
border:4px solid #fc8012;
border-radius:15px;
padding:5px;
margin:0 auto 10px;
cursor:pointer;
transition:all .2s ease;}
.btn-apply p,.btn-back p{border-radius:7px; padding:10px;}
.btn-apply:hover,.btn-back:hover{transform:translateY(5px);}
@media screen and (max-width:480px){
.btn-apply,.btn-back{border:3px solid; padding:3px; margin:0 auto 5px;}
.btn-apply p,.btn-back p{border-radius:10px; padding:7px;}
.btn-apply:hover,.btn-back:hover{transform:translateY(2px);}}

/*
========================
応募する
========================
*/
.btn-apply{background:#ffd46f; border-color:#fc8012; box-shadow:0 5px 0 #fc8012;}
.btn-apply p{background:#ffb403;}
.btn-apply p::before{content:"交換する";}
.btn-apply:hover{background:#fffc00; box-shadow:0 0 0 #fc8012;}

.btn-apply.login p::before{content:"ログインする";}

/*
========================
応募する-非アクティブ系
========================
*/
.btn-apply.done{background:#6fe1f8; border-color:#21aafd; pointer-events:none; box-shadow:0 5px 0 #21aafd;}
.btn-apply.done p{background:#4cd2fc;}
.btn-apply.done p::before{content:"交換済";}

.btn-apply.disable,
.btn-apply.end,
.btn-apply.none{background:#e1e1e1; border-color:#c4c4c4; pointer-events:none; box-shadow:0 5px 0 rgba(0,0,0,.1);}
.btn-apply.disable p,
.btn-apply.end p,
.btn-apply.none p{background:#c4c4c4;}

.btn-apply.end{font-family:'Noto Sans JP', sans-serif; font-size:clamp(0.938rem, 0.869rem + 0.34vw, 1.125rem);/*18-15*/}
.btn-apply.end p::before{content:"キャンペーンは終了しました" !important;}

.iidx .btn-apply.none p::before{content:"BDが不足しています";}
.ddr .btn-apply.none p::before{content:"DDが不足しています";}
.gd .btn-apply.none p::before{content:"GDが不足しています";}
.jb .btn-apply.none p::before{content:"JDが不足しています";}
.pp .btn-apply.none p::before{content:"PDが不足しています";}
.sdvx .btn-apply.none p::before{content:"VDが不足しています";}
.pc .btn-apply.none p::before{content:"CDが不足しています";}

@media screen and (max-width:480px){
.btn-apply{box-shadow:0 2px 0 #fc8012;}
.btn-apply.done{box-shadow:0 2px 0 #21aafd;}
.btn-apply.disable,.btn-apply.none,.btn-apply.end{box-shadow:0 2px 0 rgba(0,0,0,.1);}}

/*
========================
戻る
========================
*/
.btn-back{max-width:400px; color:#3d73a2; background:#7ce6f7; border-color:#21aaff; box-shadow:0 5px 0 #21aaff; margin:20px auto;}
.btn-back p{background:#fff;}
.btn-back:hover{color:#fc8012; background:#fffc00; border-color:#fc8012; box-shadow:0 0 0 #fc8012;}
.btn-back::before{
display:block;
content:"";
position:absolute;
top:calc(50% - 10px);
left:25px;
width:0;
height:0;
border-style:solid;
border-top:10px solid transparent;
border-bottom:10px solid transparent;
border-right:20px solid #3d73a2;
border-left:0;
transition:all .2s ease;}
.btn-back:hover::before{left:20px; border-right:20px solid #fc8012;}

/*
================================================================================================================
TOPに戻る
================================================================================================================
*/
#page-top{
position:fixed;
display:block;
right:10px;
bottom:20px;
width:70px;
height:70px;
background-image:url(../img/common/logo/back.png);
background-position:center;
background-size:100% auto;
background-repeat:no-repeat;
border-radius:50%;
box-shadow:0 5px 1px rgba(0,0,0,.2);
visibility:hidden;
transition:all .4s ease;
opacity:0;}
#page-top.scroll:hover{opacity:.7;}
#page-top.scroll{bottom:10px; opacity:1; visibility:visible;}

/*
================================================================================================================
FOOTER
================================================================================================================
*/
#footer{font-weight:700;}
#copyrights{
  color:#dafcff; background:#3aa9df; font-size:clamp(0.75rem, 0.614rem + 0.68vw, 1.125rem);/*18-12*/ padding:10px 20px 20px;
  ul{
    display:flex; border-bottom:2px solid #beddfe; padding:0 0 10px; justify-content:center; transform:rotate(0.03deg);
    li{filter:drop-shadow(1px 1px 0 #228bbe) drop-shadow(-1px -1px 0 #228bbe) drop-shadow(-1px 1px 0 #228bbe) drop-shadow(1px -1px 0 #228bbe) drop-shadow(1px 0 0 #228bbe) drop-shadow(-1px 0 0 #228bbe) drop-shadow(0 1px 0 #228bbe) drop-shadow(0 -1px 0 #228bbe) drop-shadow(0 0 1px #228bbe); transform:translateZ(0);}
    li + li{margin-left:10px;}
  }
}