@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:#fff;}
header#id_nav_menu_1{z-index:9999 !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%; max-width:2000px; height:100%; margin:0 auto;}
body{
width:100%;
min-width:320px !important;
height:100%;
background-color:#000;
margin:0;
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;}
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:bold; font-style:normal;}
table{width:100%; color:#000; border-collapse:collapse; border-spacing:0; margin:0 auto;}
tr,td,th{border-collapse:collapse;}

a img{transition:opacity .2s ease;}
a:hover img{opacity:.7;}

/*
================================================================================================================
MAIN
================================================================================================================
*/
#main{
position:relative;
width:100%;
background-image:url(../img/bg_common.png) , url(../img/bg_main.png);
background-repeat:repeat-x , repeat;
z-index:1;}
#main::before,
#main::after{display:block; content:""; position:absolute; left:0; width:100%; z-index:1;}
#main::before{background:linear-gradient(to bottom, rgba(0,155,169,.4) 0%,rgba(0,155,169,0) 100%); top:0; height:50vh;}
#main::after{background:linear-gradient(to bottom, rgba(0,155,169,0) 0%,rgba(145,228,255,.3) 100%); bottom:0; height:30vh;}

#main > .inner{
position:relative;
width:96%;
max-width:980px;
padding:50px 0;
margin:0 auto;
z-index:2;}
@media screen and (min-width:981px){#main{min-height:calc(100vh - 177px);}}
@media screen and (max-width:980px){#main{min-height:calc(100vh - 225px);}}
@media screen and (max-width:640px){#main > .inner{padding:30px 0;}}

/*
================================================================================================================
フレーム
================================================================================================================
*/
#main > .inner > .frame{
position:relative;
width:100%;
color:#fff;
background-color:#1f222b;
background-image:url(../img/common/frame/01/01.png) , url(../img/common/frame/01/02.png),
                 url(../img/common/frame/01/bar02.png) , url(../img/common/frame/01/bar01.png) , url(../img/common/frame/01/bar01.png);
background-repeat:no-repeat , no-repeat,
                  repeat-x , repeat-y , repeat-y;
background-position:left bottom , right bottom,
                    bottom , left , right;
box-shadow:0 0 10px rgba(3,3,77,.7);
margin:0 auto;}

#main > .inner > .frame img{width:100%;}
#main > .inner > .frame + .frame{margin:50px auto 0;}
#main > .inner > .frame > .inner{position:relative; padding:20px; z-index:2;}

@media screen and (max-width:480px){
#main > .inner > .frame + .frame{margin:30px auto 0;}
#main > .inner > .frame > .inner{padding:10px 15px;}}

/*楽曲パックキャンペーン*/
#main > .inner > #mp.frame{background-color:#0d275a;}

/*
========================
フレーム装飾
========================
*/
#main > .inner > .frame::before,
#main > .inner > .frame::after{
display:block;
content:"";
position:absolute;
z-index:1;}

#main > .inner > .frame::before{top:3px; left:0; width:100%; height:10px; background:linear-gradient(to right, #98f4ff 20%,#1c3f4f 40%,#1c3f4f 60%,#ff63eb 80%);}
#main > .inner > .frame::after{bottom:5px; left:5px; width:calc(100% - 10px); height:30vh; background:linear-gradient(to bottom, rgba(52,65,122,0) 0%,rgba(52,65,122,1) 100%);}

#main > .inner > .frame > .frame-head{
display:block;
position:absolute;
top:-2px;
left:320px;
width:calc(100% - 640px);
height:22px;
background-image:url(../img/common/frame/01/head/bg.png);
background-repeat:repeat-x;
z-index:2;}
#main > .inner > .frame > .frame-head::before,
#main > .inner > .frame > .frame-head::after{display:block; content:""; position:absolute; top:0; width:320px; height:22px; z-index:2;}
#main > .inner > .frame > .frame-head::before{background-image:url(../img/common/frame/01/head/left.png); left:-320px;}
#main > .inner > .frame > .frame-head::after{background-image:url(../img/common/frame/01/head/right.png); background-position:right; right:-320px;}

@media screen and (max-width:800px){
#main > .inner > .frame > .frame-head{width:calc(100% - 320px); left:160px;}
#main > .inner > .frame > .frame-head::before,
#main > .inner > .frame > .frame-head::after{width:160px;}
#main > .inner > .frame > .frame-head::before{background-image:url(../img/common/frame/01/head/left_sp.png); left:-160px;}
#main > .inner > .frame > .frame-head::after{background-image:url(../img/common/frame/01/head/right_sp.png); right:-160px;}}
@media screen and (max-width:480px){
#main > .inner > .frame > .frame-head{width:calc(100% - 200px); left:100px;}
#main > .inner > .frame > .frame-head::before,
#main > .inner > .frame > .frame-head::after{width:100px;}
#main > .inner > .frame > .frame-head::before{background-image:url(../img/common/frame/01/head/left_min.png); left:-100px;}
#main > .inner > .frame > .frame-head::after{background-image:url(../img/common/frame/01/head/right_min.png); right:-100px;}}

/*
================================================================================================================
見出し
================================================================================================================
*/
.frame .title{
position:relative;
width:100%;
text-align:center;
border-radius:8px;
background-image:url(../img/frame/02.png) , url(../img/frame/03.png) , url(../img/frame/04.png) , 
                 url(../img/frame/bar03.png) , url(../img/frame/bar04.png) , url(../img/frame/bar01.png) , url(../img/frame/bar02.png) ,
                 url(../img/frame/eff01.png) , url(../img/frame/eff02.png) , url(../img/frame/bg.png);
background-position:right top , right bottom , left bottom ,
                    left , right , top , bottom ,
                    top center , bottom center , center;
background-repeat:no-repeat , no-repeat , no-repeat ,
                  repeat-y , repeat-y , repeat-x , repeat-x ,
                  no-repeat , no-repeat , no-repeat;
background-size:auto , auto , auto ,
                auto , auto , auto , auto ,
                100% 11px , 100% 10px , cover;
margin:0 auto;}
.frame .title::before{
display:block;
content:"";
position:absolute;
top:0;
left:0;
width:56px;
height:33px;
background-image:url(../img/frame/01.png);}

.frame .title > h2{
display:flex;
height:68px;
max-height:68px;
background-image:url(../img/frame/left_short.png) , url(../img/frame/right_short.png);
background-repeat:no-repeat , no-repeat;
background-position:left center , right center;
align-items:center;
justify-content:center;
padding:5px 70px 0;}

.frame .title > h2 > span{
display:block;
color:#e1fcff;
font-size:24px;
font-weight:700;
font-family:'M PLUS Rounded 1c', sans-serif;
letter-spacing:1px;
transform:rotate(0.05deg);
text-shadow:1px  1px 1px #00a2b1,
            -1px  1px 1px #00a2b1,
             1px -1px 1px #00a2b1,
            -1px -1px 1px #00a2b1,
             1px  0px 1px #00a2b1,
             0px  1px 1px #00a2b1,
            -1px  0px 1px #00a2b1,
             0px -1px 1px #00a2b1,
             3px  3px 1px #000,
            -3px  3px 1px #000,
             3px -3px 1px #000,
            -3px -3px 1px #000,
             3px  0px 1px #000,
             0px  3px 1px #000,
            -3px  0px 1px #000,
             0px -3px 1px #000,
             1px  1px 5px #000,
            -1px  1px 5px #000,
             1px -1px 5px #000,
            -1px -1px 5px #000,
             1px  0px 5px #000,
             0px  1px 5px #000,
            -1px  0px 5px #000,
             0px -1px 5px #000,
             0px  0px 10px rgba(0,255,246,.8),
             0px  0px 20px rgba(0,255,246,.6);}

.frame .title > h2 > span br.sp-br{display:none;}

@media screen and (max-width:600px){
.frame .title > h2{background-size:70px auto , 70px auto; background-position:left -5px center , right -5px center; padding:0 40px;}
.frame .title > h2 > span{font-size:18px;}}

@media screen and (max-width:480px){
.frame .title > h2{padding:15px 0;}
.frame .title > h2 > span br.sp-br{display:block;}}
@media screen and (max-width:370px){
.frame .title > h2{background-image:none; padding:0;}
.frame .title.imp > h2{padding:20px;}}

/*
================================================================================================================
本文
================================================================================================================
*/
.frame > .top-img{width:calc(100% - 10px); padding-top:15px; margin:0 auto;}

.frame .text{
width:90%;
background-color:rgba(0,0,0,.6);
background-color:#101422;
font-size:14px;
border:1px solid #009ba9;
box-shadow:0 0 8px #009ba9 , inset 0 0 8px #009ba9;
padding:20px;
margin:0 auto;}
/*
.frame .title + .text{margin:20px auto 40px;}
.frame .text#second{margin:20px auto 40px;}*/
.frame .text{margin:20px auto 40px;}


@media screen and (max-width:800px){.frame .text{width:100%; font-size:13px;}}
@media screen and (max-width:480px){
.frame .text{padding:10px; font-size:12px;}
/*
.frame .title + .text{margin:10px auto 30px;}
.frame .text#second{margin:10px auto 30px;}*/
.frame .text{margin:10px auto 30px;}

}

/*
========================
テキスト装飾-見出し
========================
*/
.frame .text.date{font-weight:700; font-family:'Noto Sans JP', sans-serif;}
.frame .text.date strong{
display:block;
width:150px;
background-color:#009ba9;
font-size:15px;
text-align:center;
padding:5px 0;
margin:0 auto;}
.frame .text.date p{font-size:22px; text-align:center; margin:10px auto 30px;}
.frame .text.date p:last-child{margin:10px auto 0;}

.frame .text.date a{color: #ffea35;}

.frame .text em{display:inline-block; color:#ff2dc6;}

.frame .text > em{
display:block;
background-color:#ff2dc6;
font-size:16px;
font-weight:700;
font-family:'Noto Sans JP', sans-serif;
text-align:center;
text-shadow:0 0 5px #fff;
padding:7px 0;
margin:0 auto 10px;}
.frame .text > em.entry{background-color:#009ba9; text-shadow:none;}

@media screen and (max-width:560px){
.frame .text.date{padding:20px 10px;}
.frame .text.date p{font-size:18px; margin:10px auto 20px;}}
@media screen and (max-width:480px){
.frame .text > em,
.frame .text.date strong{font-size:14px;}
.frame .text.date p{font-size:15px;}}
@media screen and (max-width:380px){
.frame .text.date strong{font-size:13px; padding:3px 0;}
.frame .text.date p{font-size:13px;}}
@media screen and (max-width:370px){.frame .text.date p{font-size:12px;}}

.frame .inner > strong.notice{display:block; width:90%; background-color:#05b7ac; text-align:center; padding:10px; margin:0 auto;}
@media screen and (max-width:800px){.frame .inner > strong.notice{width:100%;}}
@media screen and (max-width:480px){.frame .inner > strong.notice{font-size:14px;}}
@media screen and (max-width:380px){.frame .inner > strong.notice{font-size:13px;}}

/*
========================
テキスト装飾-リスト
========================
*/
ul.flow{
font-weight:700;
font-family:'Noto Sans JP', sans-serif;
line-height:200%;
text-shadow:0 0 8px #009ba9;}
ul.flow li{position:relative; font-size:18px; padding-left:25px;}
ul.flow li em{display:inline-block; color:#ff2dc6; border-bottom:1px solid #ff2dc6; text-shadow:0 0 8px #ff2dc6;}
ul.flow li::before{display:block; position:absolute; top:0; left:0;}
ul.flow li:first-child::before{content:"①";}
ul.flow li:nth-child(2)::before{content:"②";}
ul.flow li:nth-child(3)::before{content:"③";}

#second ul.flow li:first-child::before{content:"②";}

ul.ast li,ul.dot li{position:relative; font-size:13px; padding-left:18px;}
ul.ast li::before,ul.dot li::before{display:block; position:absolute; top:0; left:0;}
ul.ast li::before{content:"※";}
ul.dot li::before{content:"・";}

ul.ast li > .indent{padding:5px 0;}
ul.ast li > .indent p{position:relative; padding-left:14px;}
ul.ast li > .indent p::before{display:block; content:"・"; position:absolute; top:0; left:0;}

dl.dl-tbl {
  font-size:13px;
  margin-left:18px;
  em{display:inline-block; color:#ff2dc6;}

  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  border: solid #fff;
  border-width: 1px 0 0 1px;

  dt {
    width: 250px;
    padding: 5px;
    text-align: center;
    border: solid #fff;
    border-width: 0 1px 1px 0;
  }
  dd {
    padding: 5px;
    width: calc(100% - 250px);
    text-align: left;
    border: solid #fff;
    border-width: 0 1px 1px 0;
  }
}

@media screen and (max-width:800px){
  ul.flow li{font-size:16px;}
  dl.dl-tbl {dt{width: 100px;} dd{width: calc(100% - 100px);}}
}
@media screen and (max-width:640px){
  ul.flow li{font-size:14px; padding-left:20px;}
  ul.ast li,ul.dot li{font-size:12px;}
  dl.dl-tbl {dt{width: 100px;} dd{width: calc(100% - 100px);}}
}
@media screen and (max-width:480px){
  ul.ast li,ul.dot li{font-size:11px; padding-left:15px;}
  dl.dl-tbl {dt{width: 100px;} dd{width: calc(100% - 100px);}}
}

b.title-sub{display:block; color:#05b7ac; margin:20px auto 3px;}
b.title-sub:first-of-type{margin:0 auto 3px;}

/*
========================
リンクボタン
========================
*/
a.link-btn{
display:block;
width:90%;
max-width:640px;
color:#fff;
border:2px solid #feffff;
box-shadow:0 0 3px #000 , 0 0 3px #000 , 0 0 2px #000 , 0 0 2px #000 ,
           inset 0 0 3px #000 , inset 0 0 3px #000 ,  inset 0 0 2px #000 ,  inset 0 0 2px #000;
padding:3px;
margin:40px auto 20px;
transition:all .2s ease;}

a.link-btn > span{
display:block;
background-color:rgba(0,0,0,.6);
background-color:#101422;
font-family:'M PLUS Rounded 1c', sans-serif;
transform:rotate(0.05deg);
text-align:center;
text-shadow:1px  1px 1px #00a2b1,
            -1px  1px 1px #00a2b1,
             1px -1px 1px #00a2b1,
            -1px -1px 1px #00a2b1,
             1px  0px 1px #00a2b1,
             0px  1px 1px #00a2b1,
            -1px  0px 1px #00a2b1,
             0px -1px 1px #00a2b1;
border:2px solid #205663;
padding:10px 20px;
transition:all .2s ease;}

a.link-btn:hover > span{
background-color:rgba(71,254,249,.3);
box-shadow:inset 0 0 5px #009ba9;
text-shadow:1px  1px 1px #00a2b1,
            -1px  1px 1px #00a2b1,
             1px -1px 1px #00a2b1,
            -1px -1px 1px #00a2b1,
             1px  0px 1px #00a2b1,
             0px  1px 1px #00a2b1,
            -1px  0px 1px #00a2b1,
             0px -1px 1px #00a2b1,
             0px  0px 10px rgba(0,255,246,.8),
             0px  0px 20px rgba(0,255,246,.6);}

@media screen and (max-width:480px){
a.link-btn{width:100%; font-size:14px; margin:20px auto 10px;}
a.link-btn > span{padding:6px 10px;}}

/*非アクティブ*/
a.link-btn.none{position:relative; opacity:.5; pointer-events:none;}
a.link-btn.none::after{display:block; content:""; width:100%; height:100%; position:absolute; top:0; left:0; background-color:rgba(0,0,0,.5);}

/*エントリー済*/
a.link-btn.done{pointer-events:none;}
a.link-btn.done > span{
background:linear-gradient(to bottom, rgba(0,0,0,0.6) 0%,rgba(255,45,198,0.3) 100%);
border:2px solid #ff2dc6;
text-shadow:1px  1px 1px #ff2dc6,
            -1px  1px 1px #ff2dc6,
             1px -1px 1px #ff2dc6,
            -1px -1px 1px #ff2dc6,
             1px  0px 1px #ff2dc6,
             0px  1px 1px #ff2dc6,
            -1px  0px 1px #ff2dc6,
             0px -1px 1px #ff2dc6;}

/*
========================
epass
========================
*/
#epass{
width:100%;
background:linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 30%,rgba(0,0,0,0.7) 70%,rgba(0,0,0,0) 100%);
text-align:center;
font-size:13px;
padding:5px 0;
margin:0 auto 40px;}
#epass > p::before{display:inline-block; content:"e-amusement passカードナンバー"; color:#47fff8; font-size:11px; padding-right:20px;}
@media screen and (max-width:480px){
#epass{margin:0 auto 20px;}
#epass > p::before{display:block; padding-right:0;}}

/*
================================================================================================================
チェックボックス
================================================================================================================
*/
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:16px;
letter-spacing:2px;
padding:0 0 0 40px;
margin:30px auto;
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 #009ba9;
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:#ed1e79;}

@media screen and (max-width:480px){
.input-checkbox{width:230px; font-size:14px; line-height:16px; padding:0 0 0 30px;}
.input-checkbox label:before{width:24px; height:24px;}
.input-checkbox label:after{top:-8px;}}



/*
================================================
応募口
================================================
*/
#id_lottery_entry{
width:100%;
max-width:980px;
color:#fff;
background-color:#000;
text-align:center;
border-radius:10px;
padding:15px;
margin:20px auto;}

#id_lottery_entry_num{
font-size:32px;
font-weight:bold;
color:#ffc801;
margin:0 2px;}

/*
================================================
店舗在庫
================================================
*/
.cl_mount{
display:flex;
width:100%;
max-width:980px;
background-color:#ffc801;
flex-wrap:wrap;
border:5px solid #000;
padding:0 10px;
margin:10px auto 10px;}


.cl_mount_hide{
display:none;}

.cl_mount_top{
display:flex;
align-items:stretch;
position:relative;
width:100%;
flex-wrap:wrap;}

.cl_location_inner{
flex-basis:60%;
color:#fff;
background-color:#000;
font-size:18px;
font-weight:bold;
line-height:24px;
/*border-right:3px solid #000;*/
border-bottom:3px solid #000;}
.cl_mount_location{padding:5px 10px;}
.cl_mount_location:hover{
color:#000;
background-color:#f96001;
cursor:pointer;}

.cl_mount_point{
flex-basis:40%;
background-color:#fff;
font-size:26px;
text-align:center;
line-height:34px;
border-bottom:3px solid #000;}

.cl_mount_inner{
background: #009ba9;  
margin:10px auto 20px; 
border:solid 1px; 
padding: 10px 80px;
width: 100%;
max-width: 700px;
}

.cl_mount_pass{
flex-basis:50%;
text-align:center;}
.cl_mount_lottery{
flex-basis:50%;
text-align:center;}

.cl_mount_pass_inner{padding:10px;
display:flex;
}

.cl_mount_l{
width:100%;
}

.cl_mount_r{
width:100%;
}


.cl_mount_passimg img{
width:100%;max-width:128px;
}

.cl_mount_pass.cl_mount_lottery{
margin-right:0;
margin-left:auto;}

.cl_mount_passimg{
margin:0 auto 5px;}

.cl_mount_name{
    background-color: #fff;
    padding: 2px 6px;
    margin: 0 auto 5px;
    text-align: left;
    color: black;
}

.cl_mount_remain{
position:relative;
width:100%;
max-width:128px;
color:#fff;
background-color:#474e63;
font-size:16px;
text-align:center;
border:1px solid #000;
/*
border-radius:20px;*/
padding:2px 6px;
margin:0 auto 5px;}

.cl_mount_arrival{
position:relative;
width:100%;
color:#000;
background-color:#fff;
font-size:16px;
text-align:center;
border:1px solid #000;
padding: 4px;
margin:0 auto 5px;}


@media screen and (max-width:640px){
.cl_mount_pass_inner{
display:block;
}
.cl_mount_inner {width:100%; padding: 0px;}
.cl_location_inner{font-size:13px;}
.cl_mount_point{font-size:18px;}
.cl_mount_pass{flex-basis:50%;}
.cl_mount_lottery{flex-basis:50%;}
.cl_mount_remain{width:100%; font-size:12px;}}

/*
================================================
ボタン
================================================
*/
.cl_mount_button{
position:relative;
top:0;
width:100%;
color:#ffc801;
background-color:#000;
text-align:center;
box-shadow:3px 3px #bb9200;
padding:4px;
margin:auto;
cursor:pointer;}

.cl_mount_button:hover{
background-color:#000;
box-shadow:3px 3px #ff0055;
color:#ff0055;}

.cl_mount_button.cl_disable{
background-color:#2e2e2e;
box-shadow:3px 3px #bb9200;
color:#777;
cursor:auto;}

.cl_mount_pass.cl_mount_lottery .cl_mount_button{top:31px;}

@media screen and (max-width:640px){
.cl_mount_button{font-size:13px;}}

/*
================================================
引換え
================================================
*/

.cl_mess_exchange{
width:100%;
display:block;
}
.cl_mess_lottery{
width:100%;
display:block;
}


#id_confirm_location{
width:100%;
max-width:980px;
color:#fff;
background-color:#000;
font-weight:bold;
font-size:30px;
line-height:100%;
text-align:center;
border-radius:10px;
padding:10px;
margin:20px auto;}

#id_pass_wrap{
width:100%;
max-width:980px;
background-color:#009ba9;
text-align:center;
border:5px solid #000;
padding:20px;
margin: 10px auto;
}

#id_confirm_pass{
text-align:center;}

#id_confirm_curpoint{
display:block;
position:relative;
width:80%;
max-width:600px;
color:#fff;
background-color:#000;
padding:10px;
margin:20px auto;}

#id_confirm_caution{
width:80%;
max-width:600px;
background-color:#fff;
border:solid 1px #000;
padding:20px;
margin:20px auto;}

#id_confirm_caution strong{
display:block;
width:100%;
background-color:#f96001;
font-weight:bold;
font-size:18px;
padding:5px;}

#id_confirm_caution ul#id_change_notice{
color:#000;
width:100%;
background-color:#fff;
margin:20px auto;}

#id_confirm_caution ul#id_change_notice li{
font-size:14px;
text-align:left;
border-bottom:dotted 1px #000;
padding:8px 0;}
#id_confirm_caution ul#id_change_notice li:first-child{border-top:dotted 1px #000;}

#id_pass_wrap .cl_mount_button{
width:80%;
max-width:600px;
font-size:20px !important;
font-weight:bold;
padding:10px;}

/*
.cl_mount_button a{
color: #ffc801;
text-decoration: initial;
}*/

#id_entry_done{
width:100%;
max-width:980px;
color:#fff;
background-color:#ff00ff;
font-size:22px;
line-height:100%;
text-align:center;
border-radius:20px;
padding:10px;
margin:30px auto;}

#id_confirm_message div{
width:100%;
margin:auto;}

#id_confirm_history{
width:100%;
max-width:980px;
background-color:#ccc;
font-size:13px;
text-align:center;
border-radius:10px;
padding:10px;
margin:20px auto 0;}

#id_confirm_illegal div,.info_box{
width:100%;
color:#fff;
background-color:#ff0000;
font-size:18px;
font-weight:bold;
text-align:center;
border-radius:10px;
padding:20px;
margin:20px auto;}

#id_confirm_explain br{display:none;}

#id_point_cost,#id_point_having,#id_point_consumed,.cl_mount_point{
font-size:22px;
font-weight:bold;
color:#ffc801;}

@media screen and (max-width:640px){
#id_confirm_location{font-size:18px;}
#id_pass_wrap{padding:10px;}
#id_confirm_pass{width:100%;}
#id_confirm_caution,#id_pass_wrap .cl_mount_button{width:100%;}
#id_confirm_caution{margin:10px auto;}
#id_confirm_caution ul#id_change_notice li{font-size:13px;}
#id_confirm_curpoint,#id_confirm_explain,
#id_confirm_curpoint span,#id_confirm_explain span{font-size:14px;}
#id_confirm_explain br{display:block;}
#id_confirm_message div{width:100%;}
#id_entry_done{font-size:16px; font-weight:bold;}
#id_confirm_illegal div{font-size:13px; padding:15px 8px;}}


/*
================================================
内容を理解した
================================================
*/
input[type="checkbox"]{display:none !important; border:0 !important; margin:0 !important;}

.input-checkbox{
display:block;
position:relative;
width:230px;
padding:0 10px 0 22px;
margin:20px auto 0;}

.input-checkbox label{
display:inline-block;
font-size:16px;
font-weight:bold;
cursor:pointer;
padding-top:3px;}

.input-checkbox label:before{
top:4px;
left:0;
width:16px;
height:16px;
border:1px solid #333;}

.input-checkbox label:before{
background-color:rgba(255,255,255,0.7);}

.input-checkbox label:before,
.input-checkbox label:after{
content:"";
position:absolute;
display:inline-block;
transition:transform .2s ease;}

.input-checkbox input[type="checkbox"]:checked + label:after{border-color:#f96001;}

.input-checkbox label:after{
top:5px;
left:4px;
width:8px;
height:17px;
margin-top:-5.5px;
border-right:3px solid transparent;
border-bottom:3px solid transparent;
border-radius:1.5px;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
transform:rotate(45deg);
transition:border-bottom-color,border-right-color .2s ease;}

@media screen and (max-width:480px){
.input-checkbox{width:220px; padding:0 10px 0 20px; margin:10px auto 0;}
.input-checkbox label{font-size:14px;}
}

@media screen and (max-width:320px){
.input-checkbox{width:185px; padding:0 10px 0 20px; margin:10px auto 0;}
}

/*
========================
残り枚数
========================
*/

.last_num{
display:flex;
justify-content: center;
text-align:center;
margin:auto;
max-width:360px;
}

.toggle{
color:white;
text-decoration: underline;
}

.cat{
 width:100%;
 max-width:580px;
}
.cat table{
 color:white;
}
.cat th{
 border:1px solid #0096A8;
 padding:2px;
 text-align:center;
 font-weight:bold;
}
.cat td{
 border:1px solid #0096A8;
 padding:2px;
}
.tbl{
 width:100%;
 max-width:680px;
}
.tbl table{
 color:white;
}
.tbl th{
 border:1px solid #0096A8;
 padding:2px;
 text-align:center;
 font-weight:bold;
}
.tbl td{
 border:1px solid #0096A8;
 padding:2px;
}
.tbl thead th{
 width:10%;
}
.tbl thead th.th1{
 width:80%;
}
.vp{
 text-align:right;
}