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

#bg                             {z-index:1;}
#main,#main::before,#main::after{z-index:1;}
#main > #main-inner             {z-index:2;}

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

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

/*
================================================================================================================
MAIN
================================================================================================================
*/
#header{width:100%; background-color:#1bb367; padding:5px 10px;}
#header img{height:30px;}

#main{
display:block;
width:100%;
font-size:15px;
background-color:#E8F2ED;
background-position:top center;
background-repeat:repeat;
background-attachment:fixed;
padding:20px 0 50px;
margin:0 auto;}
@media screen and (max-width:800px){#main{font-size:14px;}}
@media screen and (max-width:480px){#main{font-size:13px; background-size:400% auto;}}

#main-inner{
width:100%;
max-width:1200px;
padding:0 20px;
margin:0 auto;}

#main-inner h2{
display:block;
width:100%;
color:#fff;
background-color:#1bb367;
font-size:18px;
font-family:'Kosugi Maru', sans-serif;
text-align:center;
border-radius:10px;
padding:10px;
margin:20px auto;}
@media screen and (max-width:800px){#main-inner h2{font-size:16px;}}
@media screen and (max-width:480px){#main-inner h2{font-size:15px; padding:5px; margin:20px auto 10px; border-radius:5px;}}

#id_title img{width:100%;}

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

ul.dot li,ul.ast li,ul.num li,span.ast{position:relative; padding-left:18px;}
ul.dot li::before,
ul.ast li::before,
ul.num li::before,
span.ast::before{display:block; position:absolute; top:0; left:0;}

ul.dot li::before{content:"・";}
ul.ast li::before,span.ast::before{content:"※";}

ul.dot li a,ul.ast li a,#about-cell a{color:#1bb367; font-weight:bold; transition:all .2s ease;}
ul.dot li a:hover,ul.ast li a:hover,,#about-cell a:hover{color:#ff008d;}

/*
========================
TOP
========================
*/
.inner.top{display:flex; width:100%; justify-content:center; flex-wrap:wrap; margin:0 auto;}
.inner.top div{width:calc(50% - 10px); margin:5px;}
.inner.top div{max-width:640px; aspect-ratio:590/319; height:auto;}
/* .inner.top p{width:calc(50% - 10px); margin:5px;}
.inner.top p img{width:100%; max-width:640px;}
.inner.top p:nth-of-type(5){margin-top:20px;} */
.link-btn + .inner.top{margin-top:50px;}

.top_title{width:100%;max-width:790px;margin:20px auto;}
.top_event{width:80%;max-width:900px; margin:30px auto 0;}
.top_title img,.top_twitter img,.top_event img{width:100%;height:auto;}

@media screen and (max-width:640px){
.inner.top{flex-wrap:wrap;}
/* .inner.top p{width:100%;} */
.inner.top div{width:100%;}
.top_event{width:100%;}}

@media screen and (max-width:480px){
.link-btn + .inner.top{margin-top:30px;}}

/* #top .inner.top p:nth-of-type(5){display:none;} */
#top .inner.top div:nth-of-type(5){display:none;}

/*
================================================================================================================
ステップ
================================================================================================================
*/
#step{font-family:'Noto Sans JP', sans-serif; font-size:22px; line-height:150%; font-weight:900; margin:0 auto 50px;}

#step h3{
display:block;
width:100%;
color:#1bb367;
font-size:22px;
line-height:28px;
text-align:center;
margin:20px auto 10px;}
#step h3 > span{
display:inline-block;
width:30px;
height:30px;
color:#fff;
background-color:#1bb367;
border-radius:50%;
margin-left:5px;}
@media screen and (max-width:640px){
#step h3{font-size:18px; line-height:22px; margin:20px auto 5px;}
#step h3 > span{width:24px; height:24px;}}

#step > *{width:100%;}
#step .text{position:relative; background:#fff; text-align:center; border-radius:20px; border:5px solid #1bb367; padding:20px; margin:0 auto;}
#step .text > ul {display:flex;align-items: center;justify-content: center;}
#step .text > ul.store li img{max-width:100%;max-height:50px;padding:0px 5px;}
#step .text > img{max-width:100%;}
#step .text div.ast {font-size:14px;font-weight:500;line-height:110%;text-align:left;margin-top:10px;}
#step .text.payment > img{display:inline-block; width:60px; margin:0 5px 5px 10px;}
@media screen and (max-width:640px){#step .text{border-radius:10px; border:3px solid #1bb367; padding:10px;}}
@media screen and (max-width:480px){#step .text{font-size:16px;}}

#step .text.entry{display:flex !important; font-size:30px; justify-content:center; align-items:center;}
#step .text.entry p:first-child span{display:inline-block; color:#b60014; margin-right:10px;}
#step .text.entry p:last-child{
position:relative;
color:#fff;
font-size:24px;
background-color:#1bb367;
line-height:100%;
border-radius:10px;
padding:10px 20px;
margin-left:10px;}
#step .text.entry p:last-child::before,#step .text.entry p:last-child::after{display:block; content:""; position:absolute;}
#step .text.entry p:last-child::before{top:-10px; right:-23px; width:23px; height:24px; background-image:url(../img/effect.png);}
#step .text.entry p:last-child::after{bottom:-45px; right:calc(50% - 27px); width:50px; height:54px; background-image:url(../img/hand.png); background-size:100% auto;}

@media screen and (max-width:640px){
#step .text.entry p:last-child::after{bottom:-25px; right:0; width:30px; height:32px;}}
@media screen and (max-width:480px){
#step .text.entry{font-size:20px;}
#step .text.entry p:first-child span{margin-right:5px;}
#step .text.entry p:last-child{font-size:18px; margin-left:5px;}}
@media screen and (max-width:370px){#step .text.entry p:last-child::before{display:none;}}
@media screen and (max-width:340px){
#step .text.entry{flex-wrap:wrap;}
#step .text.entry p{width:100%;}}

/*矢印あり*/
#step .arrow{position:relative; margin:0 auto 60px;}
#step .arrow::after{
display:block;
content:"";
position:absolute;
width:0;
height:0;
bottom:-50px;
left:calc(50% - 70px);
border-style:solid;
border-width:50px 70px 0 70px;
border-color:#1bb367 transparent transparent transparent;}
@media screen and (max-width:640px){
#step .arrow{margin:0 auto 20px;}
#step .arrow::after{bottom:-20px; left:calc(50% - 40px); border-width:20px 40px 0 40px;}}

/*キャンペーン*/
#step.repost .text > a:not(.link-btn){color:#00acee; transition:all .2s ease;}
#step.repost .text > a:not(.link-btn):hover{color:#ff008d;}
#step.repost .text > a.link-btn{margin-bottom:0;}
@media screen and (max-width:800px){#step.repost .text > a.link-btn{font-size:16px;}}
@media screen and (max-width:710px){#step.repost .text{text-align:left;}}

#step .done{display:block; width:50%; max-width:370px; margin:0 auto; filter:drop-shadow(-2px -2px 2px #fff) drop-shadow(2px 2px 1px #fff) drop-shadow(-2px 2px 1px #fff) drop-shadow(2px -2px 1px #fff);}
#step .done > img{width:100%;}

/*
================================================================================================================
スケジュール
================================================================================================================
*/
#schedule {font-family:'Noto Sans JP', sans-serif; font-size:14px; line-height:100%; font-weight:500; max-width:640px; margin:0 auto 50px;}
#schedule p{margin:5px 0px;text-align:center;}
#schedule img{width:100%;}

/*
========================
リンク
========================
*/
#link-bnr{
width:100%;
max-width:700px;
color:#1e2b54;
font-family:'Noto Sans JP', sans-serif;
font-size:24px;
font-weight:900;
line-height:140%;
text-align:center;
margin:50px auto;}

#link-bnr a{display:block; width:100%; background:#fff; border:1px solid; margin:10px auto 0;}
#link-bnr a img{width:100%;}
#link-bnr a:hover img{opacity:.6;}

@media screen and (max-width:700px){#link-bnr{font-size:18px;}}
@media screen and (max-width:420px){#link-bnr{font-size:14px;}}

/*
========================
キャンペーン対象商品
========================
*/
#about-item{background:#fff; font-family:'Noto Sans JP', sans-serif; border-radius:10px; padding:20px;}
#about-item img{width:100%;}
@media screen and (max-width:480px){#about-item{padding:10px;}}

#about-item > .box{display:flex; width:100%; max-width:600px; flex-wrap:wrap; justify-content:space-between; align-items:center; margin:0 auto;}
#about-item > .box a{
display:block;
width:calc(50% - 5px);
color:#1bb367;
font-weight:700;
font-size:16px;
text-align:center;
margin:10px 0;
transition:opacity .2s ease;}
#about-item > .box a:hover{opacity:.5;}
#about-item > .box a img{display:block; width:90%; max-width:280px; margin:0 auto 5px;}
#about-item > .box.place a img{max-width:200px;}
@media screen and (max-width:520px){
#about-item > .box{flex-direction:column;}
#about-item > .box a{width:100%;}}

#about-item > strong{
display:block;
width:100%;
color:#1bb367;
font-size:16px;
font-family:'Kosugi Maru', sans-serif;
font-weight:normal;
text-align:center;
border-radius:10px;
border:2px solid;
padding:5px;
margin:0 auto 10px;}
@media screen and (max-width:800px){#about-item > strong{font-size:14px;}}
@media screen and (max-width:480px){#about-item > strong{font-size:13px; border-radius:5px;}}
#about-item > .box + strong{margin-top:30px;}

#about-item > ul{display:flex; align-items:center;}
#about-item > ul > li:nth-child(1){width:30%;}
#about-item > ul > li:nth-child(2){width:70%; padding-left:10px;}
#about-item ul.ast li:nth-child(1){font-size:18px; margin-bottom:10px;}
@media screen and (max-width:840px){
#about-item > ul{flex-direction:column;}
#about-item > ul > li{width:100% !important;}
#about-item > ul > li:nth-child(1){max-width:240px;}}
@media screen and (max-width:640px){#about-item ul.ast li:nth-child(1){font-size:15px;}}
@media screen and (max-width:480px){#about-item ul.ast li:nth-child(1){font-size:14px;}}

/*
========================
キャンペーン詳細
========================
*/
#about-cell{display:flex; flex-wrap:wrap; font-size:13px; line-height:180%; border:1px solid; border-top:none;}
#about-cell > *{padding:10px; border-top:1px solid;}
#about-cell dt{width:180px; background:#90ffc7; font-weight:bold; border-right:1px solid;}
#about-cell dd{width:calc(100% - 180px); background:#fff;}
#about-cell dd b{display:block; margin:10px auto 0;}
#about-cell dd b:first-child{margin:0 auto;}
#about-cell dd ul.inner{display:flex; flex-wrap:wrap; /*border:1px solid #888; border-top:none;*/ border-bottom:1px dotted #888;}
#about-cell dd ul.inner li:nth-child(odd){font-weight:bold; /*background:#ccc;*/ border-right:1px dotted #888;}
#about-cell dd ul.inner li{padding:5px; border-top:1px dotted #888;}
#about-cell dd ul.inner.step{margin:10px auto 0;}
#about-cell dd ul.inner.step li:nth-child(odd){width:60px;}
#about-cell dd ul.inner.step li:nth-child(even){width:calc(100% - 60px);}
#about-cell dd ul.inner.benefit li:nth-child(odd){width:200px;}
#about-cell dd ul.inner.benefit li:nth-child(even){width:calc(100% - 200px);}
@media screen and (max-width:800px){
#about-cell > *{width:100% !important;}
#about-cell dt{text-align:center; border-right:none; padding:5px;}
#about-cell dt br{display:none;}}
@media screen and (max-width:480px){
#about-cell{font-size:11px;}
#about-cell dd ul.inner li{width:100% !important;}
#about-cell dd ul.inner li:nth-child(odd){border-right:none; padding:5px 5px 0 5px;}
#about-cell dd ul.inner li:nth-child(even){border-top:none; padding:0 5px 5px;}}

/*
========================
終了時
========================
*/
.cl_notyet_campaign,.cl_end_campaign div{
max-width:400px;
background:#fff;
font-family:'Noto Sans JP', sans-serif;
text-align:center;
border:2px solid;
border-radius:20px;
padding:20px 0;
margin:30px auto 10px;}
#end-date strong{display:block; font-size:22px; font-weight:900; /* margin-bottom:10px;*/}
@media screen and (max-width:480px){
#end-date{border-radius:10px;}
#end-date strong{font-size:15px;}}

/*
================================================================================================================
情報エリア
================================================================================================================
*/
.main-info{
display:block;
position:relative;
width:100%;
background-color:#fff;
font-family:'Noto Sans JP', sans-serif;
line-height:180%;
border:1px solid;
padding:20px;
margin:20px auto;
overflow:hidden;}
.main-info > p{text-align:center;}
.main-info > .link-btn{max-width:300px; padding:10px; margin:30px auto;}
.main-info > ul.dot{max-width:520px; margin:0 auto;}
@media screen and (max-width:480px){
.main-info{padding:10px;}
.main-info > p{text-align:left;}}

/*
========================
エラー
========================
*/
.main-info.error{color:#f00; font-weight:bold; text-align:center; padding:60px 10px;}
@media screen and (max-width:530px){.main-info.error{text-align:left; padding:30px 20px;}}

/*応募締切後*/
.main-info.none-entry{text-align:center; font-size:20px; font-weight:bold; padding:60px 10px;}
@media screen and (max-width:540px){.main-info.none-entry{font-size:15px;}}
@media screen and (max-width:430px){.main-info.none-entry{text-align:left; padding:30px 20px;}}

/*
================================================================================================================
進捗確認画面
================================================================================================================
*/

/*
========================
進捗
========================
*/
#entry-process{position:relative; padding-top:200px; margin:0 auto 20px;}
#entry-process::before{
display:block;
content:"";
position:absolute;
width:calc(100% + 40px);
height:100%;
left:-20px;
top:0;
background-image:url(../img/bg.png);
background-position:top center;
background-repeat:no-repeat;
z-index:1;}
.process{position:relative; width:60%; font-weight:900; font-size:30px; margin:0 auto; z-index:2;}
.process .bar{position:relative; width:100%; height:70px; background:#fff; border:2px solid #ccc; border-radius:10px; box-shadow:3px 3px 6px rgba(0,0,0,.2);}
.process .bar p{position:absolute; top:0; left:0; height:100%;text-align:center; border-radius:8px 0 0 8px;}
.process .inner{display:flex; position:relative; width:100%; align-items:center; justify-content:space-between; margin:50px auto 0;}
.process .inner .bar{width:calc(100% - 10px) !important;}
.process .inner .bar p{background:#ffe046;}
.process .inner .bar::before{
display:block;
content:"PASELI ￥500";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
color:#fff;
font-size:20px;
text-shadow:1px 1px 0 #666,-1px 1px 0 #666,1px -1px 0 #666,-1px -1px 0 #666,3px 3px 2px rgba(0,0,0,.4);
text-align:center;
line-height:60px;
letter-spacing:2px;
z-index:2;}
.process .inner .bar.comp::before{color:#f0ff00 !important;}
.process .inner .bar.comp p{width:100% !important; background:#ff4cc6; border-radius:8px !important;}

/*
========================
PASELIくん
========================
*/
.main-info #paseli{z-index:5;}
.main-info #paseli::after{
display:block;
content:"";
width:200px;
height:146px;
background-image:url(../img/paselikun.png);}
.main-info #paseli.step1::after{background-image:url(../img/paselikun01.png);}
.main-info #paseli.step2::after{background-image:url(../img/paselikun02.png);}
.main-info #paseli.step3::after{background-image:url(../img/paselikun03.png);}
.main-info #paseli ul{display:flex; position:relative; flex-direction:column; justify-content:center; filter:drop-shadow(3px 3px 2px rgba(0,0,0,.2));}
.main-info #paseli ul li{width:100%; text-align:center; font-size:18px; /*display:none;*/}
.main-info #paseli ul li span{font-size:22px; font-weight:700;}
.main-info #paseli ul li:first-child{color:#ff9c00; margin-bottom:5px;}
.main-info #paseli ul li:last-child{color:#1bb367;}

/*
========================
レスポンシブ
========================
*/
@media screen and (max-width:980px){
.process{width:calc(90% - 40px);}
.process > .bar.comp::after{right:60px;}}

@media screen and (min-width:981px){
.process{transform:skewX(-35deg);margin:100px auto 0;}
.process .bar::after{transform:skewX(35deg);}
.main-info #paseli{bottom:20px; transform:skewX(35deg);}}

@media screen and (max-width:980px){
#entry-process{margin:100px auto 20px;}
.process{width:100%;}
.process .bar::after{
top:-45px !important;
right:-20px !important;
width:40px;
height:54px;
background-size:100% auto;}}

@media screen and (min-width:481px) and (max-width:980px){
.main-info #paseli{bottom:80px !important; left:calc(50% - 100px) !important;}}

@media screen and (max-width:640px){
.process .inner .bar{width:calc(100% - 3px) !important;}
.process .inner .bar::before{font-size:13px;}}

@media screen and (min-width:481px){
.main-info #paseli{position:absolute;}
.main-info #paseli ul{
width:385px;
height:183px;
background-image:url(../img/baloon.png);
padding-bottom:30px;
margin-left:-120px;}}

@media screen and (max-width:480px){
#entry-process{padding:0; margin:30px auto 20px;}
.process > .inner{margin:0 auto;}
.main-info #paseli{position:relative !important; left:0 !important;}
.main-info #paseli ul{
width:100%;
background-color:#fff;
border:4px solid #96a0ff;
border-radius:10px;
padding:20px 0;}
.main-info #paseli ul::after{
display:block;
content:"";
position:absolute;
bottom:-30px;
left:calc(50% - 10px);
width:0;
height:0;
border-style:solid;
border-width:30px 20px 0 10px;
border-color:#96a0ff transparent transparent transparent;}
.main-info #paseli::after{position:relative; margin-top:30px; left:calc(50% - 100px);}}

@media screen and (max-width:370px){
.main-info #paseli ul li{font-size:13px;}
.main-info #paseli ul li span{font-size:18px;}}

/*
================================================================================================================
くじ引き会場
================================================================================================================
*/
.main-info.lottery{}
.main-info.lottery > .cl_in_period > .link-lottery{display:block;}
.main-info.lottery > .cl_in_period > .link-lottery > p:nth-child(1){display:block;}
.main-info.lottery > .cl_in_period > .link-lottery > p:nth-child(2){display:none;}
.main-info.lottery > .cl_in_period > .link-lottery > p img{width:100%; transition:opacity .2s ease;}
@media screen and (max-width:800px){
.main-info.lottery > .cl_in_period > .link-lottery > p:nth-child(1){display:none;}
.main-info.lottery > .cl_in_period > .link-lottery > p:nth-child(2){display:block;}}

.main-info.lottery .link-btn.top{cursor:pointer; margin-bottom:0;}

.main-info.lottery > .btn{
display:block;
width:100%;
max-width:480px;
color:#666;
border:1px solid;
font-weight:700;
text-align:center;
line-height:120%;
border-radius:10px;
padding:10px 0;
margin:0 auto;
transition:all .2s ease;}
.main-info.lottery > .btn + .btn{margin-top:10px;}
.main-info.lottery > .btn span{color:#ff4cc6; text-decoration:underline;}
.main-info.lottery > .btn:hover{color:#ff4cc6; background:#ffd4f1;}
.main-info.lottery > .btn:hover span{text-decoration:none;}
@media screen and (max-width:420px){.main-info.lottery > .btn{font-size:12px;}}

/*
========================
数字表示
========================
*/
.main-info .remain{text-align:center; font-size:30px; font-weight:900; margin:30px auto;}
.main-info .remain p::before,
.main-info .remain p::after{display:inline-block; font-size:20px;}
.main-info .remain p::before{margin-right:20px;}
.main-info .remain p::after{margin-left:5px;}
@media screen and (max-width:440px){
.main-info .remain{font-size:24px; margin:15px auto;}
.main-info .remain p::before,
.main-info .remain p::after{font-size:16px;}
.main-info .remain p::before{margin-right:10px;}
.main-info .remain p::after{margin-left:2px;}}

.main-info.lottery .remain p::before{content:"くじが引ける残り回数";}
.main-info.lottery .remain p::after{content:"回";}

.main-info.result .remain p::before{content:"くじ獲得予定ポイント";}
.main-info.result .remain p::after{content:"ポイント";}
@media screen and (max-width:480px){
.main-info.result .remain p::before{display:block; margin-right:0;}}

/*
========================
集計中
========================
*/
.history_none,
#entry-only > p{
display:flex;
width:100%;
height:200px;
align-items:center;
justify-content:center;
font-family:'Noto Sans JP', sans-serif;
font-size:30px;
font-weight:900;}
.history_none{height:100px; font-size:12px;}

/*
================================================================================================================
当落
================================================================================================================
*/
.main-info.result{text-align:center;}
.main-info.result .pic p:first-child{display:block;}
.main-info.result .pic p:last-child{display:none;}
.main-info.result .pic p img{width:100%;}
@media screen and (max-width:800px){
.main-info.result .pic{margin:30px auto 0;}
.main-info.result .pic p:first-child{display:none;}
.main-info.result .pic p:last-child{display:block;}}
@media screen and (max-width:480px){
.main-info.checking .pic{margin:30px auto;}}

.main-info.result > span{font-size:12px;}
@media screen and (max-width:420px){.main-info.result > span{font-size:11px;}}

@media screen and (min-width:641px){
.main-info.result > .link{display:flex; width:100%; max-width:800px; justify-content:space-between; margin:30px auto;}
.main-info.result > .link > *{width:calc(50% - 10px) !important; margin:0 !important;}}
@media screen and (max-width:640px){
.main-info.result > .link > *{margin:10px auto 0 !important;}}

.main-info.result .link-btn.tw{margin:10px auto 0 !important; display:none;}

/*
================================================================================================================
履歴
================================================================================================================
*/
#id_history_frame{width:100%; max-width:800px; margin:0 auto;}

#point{
display:flex;
background:#fff;
font-family:'Noto Sans JP', sans-serif;
border-radius:10px;
border:2px solid;
padding:5px 20px;
align-items:center;}
#point > p{width:160px;}
#point > p img{width:100%;}
/* #point > ul li.none, #point > ul li.win{display:none;} */
#point > ul{width:calc(100% - 160px); text-align:center;}
#point > ul li:nth-child(1){font-size:22px; font-weight:900; margin:0 0 10px;}
#point > ul li:nth-child(1) span{display:inline-block; font-size:40px; margin:0 5px;}
#point > ul li:nth-child(2){font-size:12px;}
#point > ul li:nth-child(3){font-size:12px;}
@media screen and (max-width:700px){
#point > p{width:120px;}
#point > ul{width:calc(100% - 120px);}
#point > ul li:nth-child(1){font-size:18px;}
#point > ul li:nth-child(1) span{font-size:30px;}}
@media screen and (max-width:560px){
#point{flex-direction:column; padding:0 0 20px;}
#point > p{width:80px;}
#point > ul{width:100%;}}
@media screen and (max-width:480px){
#point > ul li:nth-child(1){font-size:15px;}
#point > ul li:nth-child(1) span{font-size:22px;}
#point > ul li:nth-child(2){font-size:11px;}
#point > ul li:nth-child(3){font-size:11px;}}

#history{margin:0 auto 20px;}
#history .none{display:none;}
#history ul{display:flex; background:#fff; border:1px solid;}
#history ul + ul{border-top:none;}
#history ul li{position:relative; width:50%; text-align:center; padding:10px 0;}
#history ul li + li{border-left:1px solid;}
@media screen and (max-width:400px){
#history ul{font-size:12px;}
#history ul li:nth-child(1){width:calc(100% - 100px);}
#history ul li:nth-child(2){width:100px;}}

/* 見出し*/
.cl_history_head{position:relative; display:flex; font-size:13px; font-weight:bold; border:1px solid; margin-bottom:-1px; z-index:2;}
.cl_history_body{position:relative; display:flex; font-size:13px; border:1px solid; margin-bottom:-1px; z-index:2;}
.cl_history_head div{width:50%; height:30px; text-align:center; line-height:30px; background:#ccc;}
.cl_history_body div{width:50%; text-align:center; background:#fff;}
.cl_history_head div + div,.cl_history_body div + div{border-left:1px solid;}
.cl_history_head .cl_datetime::before{content:"抽選日時";}
.cl_history_head .cl_result::before{content:"くじ結果";}
.cl_history_head .cl_point::before{content:"ポイント";}
.cl_history_head .cl_added_state::before{content:"付与";}
@media screen and (max-width:400px){
.cl_history_head{font-size:11px;}
.cl_history_head .cl_datetime{width:calc(100% - 300px);}
.cl_history_head .cl_result{width:100px;}
.cl_history_head .cl_point{width:100px;}
.cl_history_head .cl_added_state{width:100px;}}

.cl_history {
  text-align : center;
}
.cl_history_list {
  margin : 10px auto;
}
.cl_history_column.cl_datetime {
  min-width : 150px;
  color:initial;
}
.cl_history_column.cl_result {
  min-width : 50px;
}
.cl_history_column.cl_point {
  min-width : 50px;
}
.cl_history_column.cl_added_state {
  min-width : 50px;
}
.cl_history_column {
  padding: 3px; 
}
.cl_history_head div {
  background-color: #f2f2f2;
}
.cl_more_btn {
  text-align : center;
  margin:10px auto;
  width: 200px;
  cursor: pointer;
}

/*ページャー*/
#pager{display:none; justify-content:center; align-items:center;}
#pager li:nth-child(1)::before,
#pager li:nth-child(3)::before{display:block; content:""; width:0; height:0; border-style:solid; transition:all .2s ease; cursor:pointer;}
#pager li:nth-child(1)::before{border-color:transparent #00bfb2 transparent transparent; border-width:10px 17.32px 10px 0px;}
#pager li:nth-child(3)::before{border-color:transparent transparent transparent #00bfb2; border-width:10px 0px 10px 17.32px;}
#pager li:nth-child(1):hover::before{border-color:transparent #ff4cc6 transparent transparent;}
#pager li:nth-child(3):hover::before{border-color:transparent transparent transparent #ff4cc6;}

#pager li:nth-child(2){margin:0 10px;}

/*
================================================================================================================
ボタン
================================================================================================================
*/
.link-btn{
display:block;
width:100%;
max-width:480px;
color:#fff;
background-color:#1bb367;
font-size:18px;
font-family:'Kosugi Maru', sans-serif;
text-align:center;
line-height:130%;
border-radius:10px;
border:2px solid #1bb367;
padding:15px 10px;
margin:20px auto;
transition:all .2s ease;}

.link-btn:hover{color:#1bb367; background:#fff !important;}

.link-btn.tw{background-color:#00acee; border:2px solid #00acee;}
.link-btn.tw:hover{color:#00acee;}

.link-btn.orange{background-color:#e45825; border:2px solid #e45825;}
.link-btn.orange:hover{color:#e45825;}

.link-btn span{display:block; font-size:13px;}
@media screen and (max-width:800px){.link-btn{font-size:15px; padding:10px;}}
@media screen and (max-width:480px){.link-btn{font-size:14px; padding:5px 10px !important;}}

.link-btn.top{font-size:30px;}
@media screen and (max-width:800px){.link-btn.top{font-size:24px;}}
@media screen and (max-width:480px){.link-btn.top{font-size:18px;}}

.none,
.gray{filter:grayscale(100%);}
.none{opacity:.8; pointer-events:none;}

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

.input-checkbox{
position:relative;
width:100%;
max-width:530px;
line-height:20px !important;
padding:0 0 0 25px;
margin:10px 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:20px;
height:20px;
background-color:#fff;
border:2px solid #333;
opacity:.5;}
.input-checkbox label:after{
top:-5px;
left:10px;
width:10px;
height:20px;
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;}

.input-checkbox label a{color:#1bb367; font-weight:bold; transition:all .2s ease;}
.input-checkbox label a:hover{color:#ff008d;}

/*
================================================================================================================
TOPに戻るボタン
================================================================================================================
*/
#page-top{
position:fixed;
bottom:20px;
right:20px;
width:50px;
height:50px;
z-index:10;}
#page-top a{
display:block;
width:50px;
height:50px;
color:#fff;
background-color:#1bb367;
font-size:9px;
font-weight:bold;
text-align:center;
border-radius:50%;
padding:5px 0 0 0;
transition:.2s ease-in-out;}
#page-top a span{
display:block;
width:20px;
height:20px;
border-right:10px solid transparent;
border-bottom:15px solid #fff;
border-left:10px solid transparent;
transition:.2s ease-in-out;
margin:0 auto;}
#page-top a:hover{color:#1bb367; background-color:#f0ff00;}
#page-top a:hover span{border-bottom:15px solid #1bb367;}

.cl_error_message {
  color: red;
  font-size: 22px;
  font-weight: bold;
  line-height: 120%;
}
 
#id_lottery_ui {
 text-align:center;
 border:solid 3px #f0f0f0;
}
#id_lottery_ui > em{
 display:block;
 font-size:18px;
}
#id_lottery_ui > em span{color:#ff9c00;}
@media screen and (max-width:400px){#id_lottery_ui > em{font-size:15px;}}
#id_lottery_ui > .cl_drawable{font-weight:bold; margin:10px auto;}
#id_lottery_ui > .cl_drawable .cl_draw_remain_num{display:inline-block; font-size:18px; margin-left:5px;}
#id_timelimit{font-weight:bold; font-size:24px; margin:10px auto 10px;}

.cl_lottery_button_mount {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
}

.cl_lottery_button_mount .link-btn{max-width:unset;}
.cl_lottery_button_mount > a{color:#1bb367; text-decoration:underline;}
.cl_lottery_button_mount > a:hover{text-decoration:none;}

.cl_lottery_button {
 font-size:24px;
 line-height:150%;
 margin:5px;
}

.cl_lottery_button:disabled{pointer-events:none !important; filter:grayscale(.8); opacity:.5;}

.cl_progress_meter {
 width:80%;
 margin:auto;
 height:2ex;
 background-color:#f0f0f0;
}

.cl_progress_meter_fill {
 height:100%;
 width:50%;
 background-color:#00ab2c;
}

.cl_total_consume{
 font-weight:bold;
 text-align:center;
 padding:20px 0;

}

#id_consume_calender {
 display: flex;
 flex-wrap: wrap;
 text-align:center;
}

.cl_consume_oneday {
 width:calc(100% / 4);
 margin-bottom:8px;
 padding:0 2px;
}
@media screen and (max-width:420px){.cl_consume_oneday{width:calc(100% / 3);}}

.cl_consume_date {
 background-color:#c0ffa0;
 text-align:center;
 border:solid 1px #f0f0f0;
}

.cl_consume_amount {
 background-color:#ffffff;
 text-align:right;
 border:solid 1px #f0f0f0;
 padding:5px;
}

.cl_consume_day_yen_blank {
 background-color:#ffffff;
 color:transparent;
}

.cl_kuji_list {
 padding:15px;
 max-width:300px;
 margin:auto;
}

.cl_kuji_result {
 background-size: 90%;
 background-repeat: no-repeat;
 background-position: center;
 height: 200px;
}

.cl_kuji_result.cl_kuji_none {
 display:none;
}
.cl_kuji_result.cl_kuji_loading:first-child {
 height:200px;
 background-image:url(../img/result_load_sp.gif);  
}

#id_history_frame {
 padding: 8px;
}

.cl_history_row.cl_history_template {
 display:none;
}

.cl_history_row.cl_history_head {
 display:flex;
}

.cl_history_pager {
 display:flex;
 justify-content:center;
 user-select: none;
}
.cl_goto_page {
 flex-basis:10%;
 max-width:4em;
 cursor:pointer;
 
}
.cl_goto_page.cl_cur_page {
 font-weight:bold;
 cursor:auto;
 pointer-events:none;
}

/** cl_prize **/
.cl_prize_image .cl_prize_name,
.cl_prize_image .cl_prize_point,
.cl_prize_image .cl_prize_zero_point {
  display: none;
}
.cl_prize_template {
  display: none;
}
.cl_prize_image .cl_kuji_PAK_3000 {
  background-image:url(../img/btn01.jpg);
  background-size: contain;
  background-repeat: no-repeat;
}
.cl_prize_image .cl_kuji_PAK_1000 {
  background-image:url(../img/btn02.jpg);
  background-size: contain;
  background-repeat: no-repeat;
}
.cl_prize_image .cl_kuji_PAK_0100 {
  background-image:url(../img/btn03.jpg);
  background-size: contain;
  background-repeat: no-repeat;
}
.cl_prize_image .cl_kuji_PAK_0003 {
  background-image:url(../img/btn04.jpg);
  background-size: contain;
  background-repeat: no-repeat;
}
.cl_prize_image .cl_kuji_PAK_0001 {
  background-image:url(../img/btn05.jpg);
  background-size: contain;
  background-repeat: no-repeat;
}
.cl_prize_image .cl_kuji_PAK_LOSE {
  background-image:url(../img/btn06.jpg);
  background-size: contain;
  background-repeat: no-repeat;
}

#id_lottery_main {
  margin: 5px;
  padding: 5px;
  background-color: white;
}

#id_error {
  color: #f00;
  font-weight: bold;
  text-align: center;
  padding: 60px 10px;
}

.cl_lottery_button {
  font-size:24px;
  line-height:150%;
  margin:5px;
}

.cl_progress_meter {
  width:80%;
  margin:auto;
  height:2ex;
  background-color:#f0f0f0;
}
.cl_progress_meter_fill {
  height:100%;
  background-color:#00ab2c;
}

#id_comsume_calender_container {
  margin: auto;
  max-width: 600px;
  overflow-x: auto;
  padding: 10px;
}

.cl_consume_template {
  display : none;
}

.cl_date_today .cl_consume_amount {
  background-color : yellow;
}

.cl_date_past {

}
.cl_date_future > .cl_consume_amount{
  color: transparent;
}

.cl_supply_content {
  width: 150px;
  margin: auto;
  border: 1px solid;
  padding: 5px;
}

.cl_kuji_result_template {
  display :none;
}

.cl_redraw_caution {
  display: none;
  font-size: large;
  color: red;
}

#id_kuji_history {
  .cl_hist_template,.cl_hidden {
    display: none;
  }
}