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

/*z-index*/
#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-image:url(/game/common/campaign/P21_02/img/p_back.png); */
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 > #top-img img{width:100%;}

#main-inner h2{
display:block;
width:100%;
color:#fff;
background-color:#1bb367;
font-size:18px;
font-family:'Kosugi Maru', sans-serif;
/*font-weight:bold;*/
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;}}

/*
=========================
リスト
========================
*/
#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 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%;}
.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;}

/*
================================================================================================================
ステップ
================================================================================================================
*/
#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/top/step/effect.png);}
#step .text.entry p:last-child::after{bottom:-45px; right:calc(50% - 27px); width:50px; height:54px; background-image:url(../img/top/step/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;}}

/*
========================
終了時
========================
*/
#end-date{
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,
.main-info.entry,
.main-info.entry-info,
.main-info.entry-process,
.main-info.entry-only,
.main-info.checking,
.main-info.lottery,
.main-info.win,
.main-info.lose{display:none;} */

/*
========================
エラー
========================
*/
.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/lottery/status/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/lottery/status/paseli.png);}
.main-info #paseli.step1::after{background-image:url(../img/lottery/status/paseli01.png);}
.main-info #paseli.step2::after{background-image:url(../img/lottery/status/paseli02.png);}
.main-info #paseli.step3::after{background-image:url(../img/lottery/status/paseli03.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/lottery/status/baloon.png);
padding-bottom:30px;
margin-left:-90px;}}

@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 > .link-lottery{display:block;}
.main-info.lottery > .link-lottery > p:nth-child(1){display:block;}
.main-info.lottery > .link-lottery > p:nth-child(2){display:none;}
.main-info.lottery > .link-lottery > p img{width:100%; transition:opacity .2s ease;}
@media screen and (max-width:800px){
.main-info.lottery > .link-lottery > p:nth-child(1){display:none;}
.main-info.lottery > .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;}}

/*見出し*/
#head{position:relative; display:flex; font-size:13px; font-weight:bold; border:1px solid; margin-bottom:-1px; z-index:2;}
#head p{width:50%; height:30px; text-align:center; line-height:30px; background:#ccc;}
#head p + p{border-left:1px solid;}
#head p:nth-child(1)::before{content:"抽選日時";}
#head p:nth-child(2)::before{content:"結果";}
@media screen and (max-width:400px){
#head{font-size:11px;}
#head p:nth-child(1){width:calc(100% - 100px);}
#head p:nth-child(2){width:100px;}}

/*ページャー*/
#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;}