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

/*
=========================
PASELI2025birthday
=========================
*/
.birthday{margin-top:10px; line-height:100%;}
.birthday-img{
  position:relative;
  display:block;
  height:auto;
  margin:20px 0;
}
a.birthday-img::before{
  position:absolute;
  content:"";
  display:block;
  width:100%;
  height:100%;
  background:#fff;
  opacity:0;
  transition:0.3s;
  z-index:2;
}
a.birthday-img:hover::before{opacity: 0.2;}
.birthday-img img{width:100%;}

.birthday p{
  border:solid 4px #7f5046;
  border-radius:10px;
  background-color:#fff;
  font-size:26px;
  color:#ea4862;
  text-align:center;
  margin-top:10px;
  padding:20px;
}
.birthday p span{
  display:block; 
  font-size:16px;
  color:#7f5046;
  margin-top:10px;
}
.birthday p span:first-of-type{color:#1bb367; font-size:18px;}

@media screen and (max-width:710px){
.birthday p{text-align:left;}
}
@media screen and (max-width:480px){
.birthday p{font-size:20px;}
.birthday p span{font-size:14px;}
.birthday p span:first-of-type{font-size:16px;}
}
/*
========================
リンク
========================
*/
#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;}}

/*
================================================================================================================
ボタン
================================================================================================================
*/
.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;}

.main-info.lottery > .link-lottery:hover .link-btn,
.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;}


/*
================================================================================================================
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;}