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

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

#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;
  text-align:center;
  padding:10px;
  margin:20px auto;
}

.pc-br {display:block;}
.sp-br{display:none;}
@media screen and (max-width:800px){#main-inner > h2{font-size:16px;}}
@media screen and (max-width:640px){.sp-br{display:block;}}
@media screen and (max-width:480px){#main-inner > h2{font-size:15px;}.pc-br {display:none;}}
#main-inner .paseli-use > h2{
  display:block;
  width:100%;
  color:#fff;
  background-color:#1bb367;
  font-weight:normal;
  font-size:18px;
  font-family:'Kosugi Maru', sans-serif;
  text-align:center;
  line-height:100%;
  padding:10px;
  margin:20px auto;
}
@media screen and (max-width:800px){#main-inner .paseli-use > h2{font-size:16px;}}
@media screen and (max-width:480px){#main-inner .paseli-use > h2{font-size:15px;}}
/*
=========================
リスト
========================
*/
#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{color:#1bb367; font-weight:bold; transition:all .2s ease;}
ul.dot li a:hover,ul.ast li a:hover{color:#ff008d;}

/*P23_02追加*/
div > ul.ast{
  width:100%; 
  font-size:18px; 
  padding:10px 0;
}

div > ul.ast.big{
  width:100%; 
  max-width:600px; 
  font-size:16px; 
  line-height:150%; 
  margin:40px auto; 
  padding:10px 0;
}

@media screen and (max-width:420px){
div > ul.ast{width:100%; font-size:14px;}
div > ul.ast.big{
  width:100%; 
  max-width:375px; 
  font-size:14px; 
  margin:20px auto;
}
}
/*
========================
TOP
========================
*/
.inner.top{display:flex; width:100%; justify-content:center;flex-wrap: wrap; margin:0 auto;}
.inner.top p{width:49.5%;}
.inner.top p img{width:100%; max-width:640px;}
.link-btn + .inner.top{margin-top:50px;}

.top_title{width:100%;max-width:790px;margin:20px auto;}
.top_twitter{width:50%;max-width:590px;margin:0 auto;}
.top_title img,.top_twitter img{width:100%;height:auto;}

@media screen and (max-width:640px){
.inner.top{flex-wrap:wrap;}
.inner.top p{width:100%;}
.top_twitter{width:100%;}
}
@media screen and (max-width:480px){
.link-btn + .inner.top{margin-top:30px;}}


/*
================================================================================================================
ステップ
================================================================================================================
*/
#step,
#twitter{font-family:'Noto Sans JP', sans-serif; font-size:22px; line-height:150%; font-weight:900;}
/*10~12限定*/
#campaign-area{font-family:'Noto Sans JP', sans-serif; font-size:30px; line-height:150%; font-weight:900;}

#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;}
#step h3 > span{width:24px; height:24px;}
}

#step .text{
position:relative;
background:#fff;
text-align:center;
border-radius:20px;
border:5px solid #1bb367;
padding:20px;
margin:0 auto;}

@media screen and (max-width:640px){
#step .text{border-radius:10px; border:3px solid #1bb367; padding:10px;}
}


/*pointup04からの引継ぎ追加部分*/
#step .in-img > p{font-size:30px; text-align:center;}
#step .text.in-img > p:nth-of-type(2){
  font-family:'Noto Sans JP', 
  sans-serif; 
  font-size:18px; 
  line-height:150%; 
  font-weight:900; 
  padding:10px 0;
}

#step .text.in-img{}
#step .text.in-img > p >span{color:#1bb367;}
#step .text.in-img > ul{display:flex; width:100%; max-width:800px; margin:40px auto 40px; justify-content:center; align-items:center;}
#step .text.in-img > ul li:nth-of-type(1){width:30%;}
#step .text.in-img > ul li:nth-of-type(2){width:70%;}
#step .text.in-img > ul li{display:flex; flex-wrap:wrap; justify-content:center;}
#step .text.in-img > ul li > img{padding:10px;}
#step .text.in-img > ul li:nth-of-type(1) > img{width:100%;}
#step .text.in-img > ul li:nth-of-type(2) > img{width:100%;}
#step .text.in-img > ul li > p{height:50px; font-size:14px; font-weight:normal; line-height:1.5; padding:10px 0;}
#step.main .inner .cat .text br{display:none;}
#paseli-point .text.in-img{font-size:18px;}

@media screen and (max-width:700px){
#paseli-point .text.in-img{font-size:16px;}
}

@media screen and (max-width:640px){
#step .text.in-img > ul{display:block; text-align:center;margin: 20px auto;}
#step .text.in-img > ul li:nth-of-type(1){display:block; width:100%;}
#step .text.in-img > ul li:nth-of-type(2){display:block; width:100%;}
#step .text.in-img > ul li:nth-of-type(1) > img{width:45%;}
#step .text.in-img > ul li:nth-of-type(2) > img{width:100%;}
#step .text.in-img > ul li > p{padding:0;}

#paseli-point .text.in-img{font-size:15px; text-align:left;}
}
@media screen and (max-width: 500px) {#step .text.in-img .title {font-size: 22px;}}
@media screen and (max-width:480px){
#step .text.in-img > p:nth-of-type(2){font-size:16px;}
#step .text.in-img > ul{margin:0 auto;}
}

@media screen and (max-width:365px){
/*
#step .text.in-img > ul li:nth-of-type(1){width:100%;}
#step .text.in-img > ul li:nth-of-type(2){width:100%;}
*/
}

/*ここまで*/


#step .text.entry{display:flex !important; font-size:30px; justify-content:center; align-items:center; margin:0 auto 60px;}
#step .text.entry p:first-child{}
#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;
border-radius:10px;
padding:5px 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/main/effect.png);}
#step .text.entry p:last-child::after{bottom:-60px; left:calc(50% - 35px); width:70px; height:75px; background-image:url(../img/main/hand.png);}
@media screen and (max-width:480px){
#step .text.entry,#step .text.entry p:last-child{font-size:20px;}
#step .text.entry p:first-child span{margin-right:5px;}
#step .text.entry p:last-child{padding:5px 10px; 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 .text:not(.entry) > span{color:#1bb367;}
@media screen and (max-width:980px){#step .text:not(.entry){font-size:16px;}}
@media screen and (max-width:420px){#step .text:not(.entry){text-align:left;}}

#step p.notice{font-size:22px; width:100%; max-width:615px; color:#f00; line-height:160%; font-weight:normal; margin:-20px auto 0;}
@media screen and (max-width:680px){#step p.notice{font-size:16px;}}
@media screen and (max-width:440px){#step p.notice{font-size:14px; max-width:390px; margin:-10px auto 0;}}

#step .inner .cat{width:100%;}
#step .inner .cat .text > img{display:inline-block; width:60px; margin:0 5px 5px 10px;}
#step .inner .cat .text > strong{color:#1bb367; font-size:24px;}

@media screen and (max-width:980px){#step .inner .cat .text > strong{font-size:20px;}}

#step .inner .cat .text::after{
display:block;
content:"";
position:absolute;
width:0;
height:0;
border-style:solid;}

#step .inner .cat .prize{
display:block;
line-height:1.2;
font-size:18px;
text-align:center; 
margin:60px auto 0; 
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 .inner .cat .prize > span{font-size:30px;}
#step .inner .cat .prize > img{display:inline-block; width:20px; margin:0 10px 5px 0;}
#step .inner .cat .prize > strong{color:#1bb367; font-size:34px;}
#step .inner .cat .prize > strong span{display:inline-block; font-size:40px; margin:10px auto;}
#step .inner .cat .prize p{width:100%; max-width:369px; margin:20px auto;}
#step .inner .cat .prize p > img{width:100%;}

@media screen and (min-width:921px){
/*#step.main .inner .cat .text::after{bottom:-50px; left:calc(50% - 70px); border-width:50px 70px 0 70px; border-color:#1bb367 transparent transparent transparent;}*/
#step .inner .cat .text::after{bottom:-30px !important; left:calc(50% - 50px) !important; border-width:30px 50px 0 50px !important; border-color:#1bb367 transparent transparent transparent;}
}

@media screen and (max-width:920px){
#step.main .inner{flex-wrap:wrap;}
#step.main .inner .cat{/*display:flex;*/display:block; width:100%; align-items:center;}
#step.main .inner .cat + .cat{margin-top:40px;}
#step.main .inner .cat .text{/*width:calc(100% - 330px);*/width:100%;font-size:17px;}
/*#step.main .inner .cat .text::after{bottom:-50px; left:calc(50% - 70px); border-width:50px 70px 0 70px; border-color:#1bb367 transparent transparent transparent;}*/
#step .inner .cat .text::after{bottom:-30px !important; left:calc(50% - 50px) !important; border-width:30px 50px 0 50px !important; border-color:#1bb367 transparent transparent transparent;}
#step.main .inner .cat .prize{/*width:270px; margin:0 auto;*/}
#step.main .inner .cat .prize{font-size:20px; margin: 60px auto 0;}
#step.main .inner .cat .prize > span{font-size:24px;}
#step.main .inner .cat .prize > strong{font-size:22px;}
#step.main .inner .cat .prize > strong span{font-size:28px;}
#step .inner .cat .prize p{width:60%; max-width:270px; margin:10px auto 0;}
}
@media screen and(max-width:800px){
#step.main .prize .sp-br{display:block;}
}
@media screen and (max-width:640px){
#step.main .inner .cat{flex-wrap:wrap;}
#step.main .inner .cat > *{width:100% !important;}
#step.main .inner .cat + .cat{margin-top:20px;}
#step.main .inner .cat .text{margin:0 auto 30px;}
#step .inner .cat .text::after{bottom:-30px !important; left:calc(50% - 50px) !important; border-width:30px 50px 0 50px !important; border-color:#1bb367 transparent transparent transparent;}
}
@media screen and (max-width:375px){
#step.main .inner .cat .prize{font-size:18px;}}
@media screen and (max-width:370px){
#step.main .inner .cat .text{text-align:center;}
#step.main .inner .cat .text br{display:none;}}

/*
========================
プライズ
========================
*/
#step .inner .cat .prize {
  display:block;
  font-size:28px;
  text-align:center;
  line-height:150%;
  margin:60px auto 0;
  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 .inner .cat .prize > img {
  display:inline-block; 
  width:30px; 
  margin:0 10px 5px 0;
}

#step .inner .cat .prize > span {
  font-size:34px; color:#fff; 
  text-shadow:2px 1px 3px #ff008d,
              -2px 1px 3px #ff008d,
              2px -1px 3px #ff008d,
              -2px -1px 3px #ff008d;
  line-height:150%;           
}  
                             
#step .inner .cat .prize > strong span {
    font-size: 45px;
    color: #fff;
    text-shadow: 2px 1px 3px #ffae4c, -2px 1px 3px #ffae4c, 2px -1px 3px #ffae4c, -2px -1px 3px #ffae4c;
}

#step .inner .cat .prize > span.green {
  font-size:34px; 
  color:#fff; 
  text-shadow:2px 1px 3px #16c391,
              -2px 1px 3px #16c391,
              2px -1px 3px #16c391,
              -2px -1px 3px #16c391;
}

#step .inner .cat .prize p {
  width:100%; 
  max-width:369px; 
  margin:20px auto 20px;
}
#step .inner .cat .prize p > img {width:100%;}

@media screen and (max-width:435px){
#step .inner .cat .prize > span,{font-size:24px;}
#step .inner .cat .prize > span.green {font-size:24px;}
#step .inner .cat .prize > strong span {font-size:30px;}
} 


/*
========================
PASELI利用方法
========================
*/

#step .text.entry.column{flex-flow: column;}

#step .s-text {
    display: flex;
    font-size: 15px;
    font-weight: 600;
    line-height: 150%;
    text-align: left;
    margin: 20px 0;
    justify-content: center;
    flex-wrap: wrap;
}
#step .s-text > p{width:100%; text-align:center; margin:0 auto;}
#step .s-text > ul{text-align:left; margin:20px 0 0 0;}
#step .s-text.no-br{display:block;}

#step .s-text .howto{color:rgb(41, 100, 41);font-weight:900;font-size:18px; line-height:180%; }
#step .s-text a.link-btn{color:#FFFFFF;}
#step .s-text a.link-btn:hover,
#step .s-text .green{color:#1bb367;}
#step .s-text .charge_left{margin-right:20px;display:flex;justify-content:flex-end;flex-flow: column;}
#step .s-text .images{width:160px;}


#app-dl {
    width: 100%;
    max-width:800px;
    display: flex;
    margin:0 auto;
    padding-bottom: 0;
    justify-content: center;
    align-items: center;
}
#app-dl img{ width:100%;}
#app-dl > * {
    width: 50%;
}
#app-dl .paseli_text{
    display: inline-block;
    position: relative;
    color: #1BB367;
    font-size: 30px;
    font-weight: 700;
    line-height: 150%;
    text-align: center;
    margin: 0 auto;
    }
#app-dl .paseli_text::before,
#app-dl .paseli_text::after{
display: block;
position: absolute;
bottom: 0px;
}    
#app-dl .paseli_text::before {content: "＼";left: -30px;}
#app-dl .paseli_text::after {content: "／";right: -30px;}    
#app-dl > .dl ul {
    display: flex;
    justify-content: center;
    margin: 20px auto 0;
}
#app-dl > .dl ul li + li {
    margin-left: 10px;
}
#app-dl > .dl ul li:first-child {
    width: 190px;
}
#app-dl > .dl ul li:last-child {
    width: 236px;
}

#app-dl > .dl .btn-link,
.step .btn-link {
    display: block;
    font-size: 20px;
    margin: 50px auto 0;
    padding: 10px 0;
    position: relative;
    color: #296429;
    background: #fff;
    font-weight: 700;
    text-align: center;
    line-height: 100%;
    border: 1px solid #296429;
    border-radius: 30px;
    transition: all .2s ease;
}
#app-dl > .dl .btn-link::after,
.step .btn-link::after{
    display: block;
    content: "";
    position: absolute;
    top: calc(50% - 7px);
    right: 20px;
    width: 14px;
    height: 14px;
    border-top: 2px solid;
    border-right: 2px solid;
    transform: rotate(45deg);
    transition: border .2s ease;
}
#app-dl > .dl .btn-link:hover,
.step .btn-link:hover{color:#fff; background:#296429;}
#app-dl > p_images{
    padding: 0 20px;
}

#app-dl > .dl .btn-link{max-width: 400px;}

.step {width:100%;max-width: 800px;margin:20px auto;}
.step .btn-link {max-width: 500px;margin:0 auto;}


@media screen and (max-width: 800px) {
#app-dl {
        flex-wrap: wrap;
        padding: 20px 20px 0;
    }
#app-dl > .dl{
        width: 100%;
        margin-bottom:20px;
    }
#app-dl > p_image{
        max-width: 400px;
    }        
}

@media screen and (max-width:480px){
#app-dl .paseli_text{
font-size: 20px;
}
#app-dl > .dl .btn-link,
.step .btn-link{
        font-size: 15px;
        margin: 10px auto 0;
    }
}

.section.green{margin:20px auto 0;padding:20px;color:#000;background-color:#E8F2ED;}
.section.green img{ width:100%;}
.section.green > .catch {
    width: 100%;
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    line-height: 150%;
    margin: 0 auto;
}

.section.green > #charge {
    display: flex;
    max-width: 800px;
    justify-content: space-between;
    margin: 30px auto;
}
.section.green > #charge li {
    width: calc(33.3333% - 10px);
    background: rgb(255, 255, 255);
    border-radius: 10px;
    padding: 20px;
}
.section.green > #charge li .means {
    font-size: 16px;
    margin: 10px auto 0px;
}

.section.green > .step{margin: 20px auto 0;}

@media screen and (max-width: 800px) {
.section.green > .catch {text-align: left;font-size: 16px;}
.section.green > #charge li .means{font-size: 13px;}  
}
@media screen and (max-width: 640px) {
.section.green{padding:10px;}
.section.green > #charge {flex-wrap: wrap;justify-content: center;}
.section.green > #charge li {
        width: calc(50% - 10px);
        padding: 10px 0px;
        margin: 10px 5px;
    }
}    
@media screen and (max-width: 480px) {
.section.green > .catch {font-size: 14px;}
.section.green > #charge {margin: 20px auto 0px;}
}
/*
========================
パセリポイント利用方法
========================
*/

#step #paseli-point > h2{
  display:block;
  width:100%;
  color:#fff;
  background-color:#1bb367;
  font-size:18px;
  font-family:'Kosugi Maru', sans-serif;
  text-align:center;
  padding:10px;
  margin:20px auto;
}

@media screen and (max-width:800px){#paseli-point > h2{font-size:16px;}}
@media screen and (max-width:480px){#paseli-point > h2{font-size:15px;}}

#step #paseli-point .text{
  position:relative;
  background:#fff;
  text-align:center;
  font-size:18px;
  font-family: 'Noto Sans JP', sans-serif;
  border-radius:20px;
  border:5px solid #1bb367;
  padding:20px;
  margin:0 auto;
}
#step #paseli-point .text > .s-text{font-size:15px; font-weight:bold;}

@media screen and (max-width:640px){
#step #paseli-point .text{
  text-align:left;
  font-size:16px;
  border-radius:10px; 
  border:3px solid #1bb367; 
  padding:10px;
}
}
@media screen and (max-width:420px){
#step #paseli-point .text{font-size:14px;}
}
/*
========================
*/
@media screen and (max-width:640px){
#step .text{border-radius:10px; border:3px solid #1bb367; padding:10px;}}

#step.main .inner .cat .text::after {
  bottom:-50px; 
  left:calc(50% - 70px); 
  border-width:50px 70px 0 70px; 
  border-color:#1bb367 transparent transparent transparent;
}
@media screen and (max-width:920px) {
  #step.main .inner {flex-wrap:wrap;}  
  #step.main .inner .cat {display:flex; width:100%; align-items:center; flex-wrap:wrap;}
  #step.main .inner .cat + .cat {margin-top:40px;}
  #step.main .inner .cat .text {width:100%; /*text-align:left;*/}
  #step.main .inner .cat .text br {display:none;}
  #step.main .inner .cat .prize {font-size:18px; margin-top:40px;}
  #step.main .inner .cat .prize > strong {font-size:22px; line-height:150%;}  
  #step .inner .cat .prize p {width:60%; max-width:270px; margin:10px auto 10px;}
}
@media screen and (max-width:640px) {
  #step.main .inner .cat {flex-wrap:wrap;}
  #step.main .inner .cat > * {width:100% ;}
  #step.main .inner .cat + .cat {margin-top:20px;}
  #step.main .inner .cat .text { margin:0 auto 0px;}
  #step .inner .cat .text::after {bottom:-30px !important; left:calc(50% - 50px) !important; border-width:30px 50px 0 50px !important; border-color:#1bb367 transparent transparent transparent;}
  #step.main .inner .cat .text br {display:block;}
}
@media screen and (max-width:375px){
  #step.main .inner .cat .text {text-align:left;}
  #step.main .inner .cat .text br {display:none;}
}

/*
========================
campaign-bnr導線
========================
*/
#campaign-bnr{text-align:center; margin:20px auto;}
#campaign-bnr strong{display:block; color:#1bb367;}
#campaign-bnr a{display:block; width:100%; max-width:700px; background:#fff; margin:20px auto 0;}
#campaign-bnr a img{width:100%; transition:opacity .2s ease;}
#campaign-bnr a:hover img{opacity:.6;}
#campaign-bnr span{color:#ff008d;}
@media screen and (max-width:800px){#campaign-bnr{font-size:18px;}}
@media screen and (max-width:480px){#campaign-bnr{font-size:16px; text-align:left; margin:30px auto 20px;}}

/*
========================
キャンペーン詳細
========================
*/
#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);}

#about-cell + ul.ast li{font-size:12px; /*margin-top:10px;*/}

@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 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.none-entry,
.main-info.checking,
.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.lottery,
.main-info.none-entry{text-align:center; font-size:20px; font-weight:bold; padding:60px 10px;}
.main-info.lottery span{font-weight:normal; font-size:15px;}
@media screen and (max-width:540px){
.main-info.lottery,.main-info.none-entry{font-size:15px;}
.main-info.lottery span{font-size:13px;}}
@media screen and (max-width:430px){.main-info.lottery,.main-info.none-entry{text-align:left;  padding:30px 20px;}}

/*
========================
当落
========================
*/
.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%;}
.main-info.result #code{max-width:800px; color:#fff; background:#000; font-weight:700; font-size:30px; padding:10px 0; margin:20px auto;}
.main-info.result .link{font-size:20px; font-weight:700; margin:20px auto;}
.main-info.result .link a{color:#00acee; transition:all .2s ease;}
.main-info.result .link a:hover{color:#ff008d;}
.main-info.result strong{display:block; color:#1bb367; font-size:22px; font-family:'Kosugi Maru', sans-serif; margin:20px auto 0;}
.main-info.result strong br{display:none;}
.main-info.result ul.ast{text-align:left; max-width:800px; margin:0 auto;}
.main-info.result ul.ast li:first-child{color:#f00; font-weight:bold;}
.main-info.result #entry-status p{display:none !important;}
@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:610px){.main-info.result strong{font-size:16px;}}
@media screen and (max-width:500px){.main-info.result #code{font-size:16px;}}
@media screen and (max-width:480px){
.main-info.checking .pic{margin:30px auto;}
.main-info.result .link{font-size:14px;}
.main-info.result strong br{display:block;}}

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

/*
========================
ステータス
========================
*/
.main-info #entry-status{
  width:100%;
  max-width:700px;
  font-weight:700;
  text-align:center;
  border:3px solid #1bb367;
  margin:0 auto;
}
.main-info #entry-status p{padding:20px;}
.main-info #entry-status p strong{display:block; color:#1bb367; font-size:22px; font-weight:700; margin-top:10px;}
.main-info #entry-status ul{
  color:#fff;
  background:#1bb367;
  font-size:22px;
  font-weight:700;
  padding:20px 0;
}
.main-info #entry-status ul li + li{margin-top:10px;}
.main-info #entry-status ul li > span:last-child{display:inline-block; margin-left:10px;}

@media screen and (max-width:640px){.main-info #entry-status ul{font-size:18px;}}
@media screen and (max-width:600px){
.main-info #entry-status p{text-align:left; padding:10px;}
.main-info #entry-status p br{display:none;}
.main-info #entry-status p strong{text-align:center;}
.main-info #entry-status ul{padding:10px 0;}
.main-info #entry-status ul li > span:last-child{display:block; margin:5px auto 0;}}
@media screen and (max-width:430px){.main-info #entry-status ul li > span:first-child{font-size:13px;}}

/*
========================
進捗
========================
*/
#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/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 > .bar,.process > .inner{margin:50px auto 0}
.process .inner{display:flex; position:relative; width:100%; align-items:center; justify-content:space-between;}
.process .inner .bar{width:calc(100% - 10px) !important;}

.process .bar p{background:#ff9c00;}
.process .inner .bar p{background:#1bb367;}

/*前後のバー*/
.process.back,.process.next{position:absolute; bottom:0;}
.process.back{left:-42%;}
.process.next{right:-46%; opacity:.8; z-index:1;}
.process.none{display:none;}

/*金額*/
.process > .bar::before,.process .inner .bar::before{
  display:block;
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  color:#fff;
  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 > .bar::before{content:"￥5000";}
.process .inner .bar::before{content:"PASELI ￥500"; font-size:20px;}
.process.next > .bar::before{text-align:left;}

/*バー名*/
.process:not(.next)::before,.process:not(.next) > .inner::before{display:block; position:absolute; top:-35px; left:0;}
/*.process:not(.next)::before{content:"A賞"; color:#ff9c00;}
.process:not(.next) > .inner::before{content:"B賞"; color:#1bb367;}*/

/*旗*/
.process .bar::after{
display:block;
content:"";
position:absolute;
right:-30px;
width:68px;
height:92px;}
.process > .bar::after{background-image:url(../img/status/flag_5000_0.png); z-index:2; top:-92px;}
.process > .bar.comp::after{background-image:url(../img/status/flag_5000_1.png);}
.process > .inner .bar::after{background-image:url(../img/status/flag_1000_0.png); z-index:5; bottom:0;}
.process > .inner .bar.comp::after{background-image:url(../img/status/flag_1000_1.png);}

/*バー満タン時*/
.process .bar.comp p{width:100% !important; border-radius:8px !important;}
.process > .bar.comp::before,.process .inner .bar.comp::before{color:#f0ff00 !important;}

/*
========================
PASELIくん
========================
*/
/*
.main-info #paseli{z-index:5;}
.main-info #paseli::after{
display:block;
content:"";
width:200px;
height:146px;
}
.main-info #paseli.step1::after{background-image:url(../img/status/paseli01.png);}
.main-info #paseli.step2::after{background-image:url(../img/status/paseli02.png);}
.main-info #paseli.step3::after{background-image:url(../img/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;}
.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:not(.back) > .bar.comp::after{right:60px;}
.process.back,.process.next{display:none !important;}}

@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/status/baloon.png);
padding-bottom:30px;
/*margin-left:-140px;*/
margin-left:-90px;
}}

@media screen and (max-width:480px){
#entry-process{padding:0; margin:30px auto 20px;}
/*.process > .bar,
.process:not(.next)::before,
.process > .inner{display:none;}*/
.process > .bar, .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;}}

/*
================================================================================================================
ボタン
================================================================================================================
*/
.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-color:#fff;}
.link-btn.tw{background-color:#00acee; border:2px solid #00acee;}
.link-btn.tw:hover{color:#00acee; background-color:#fff;}
.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:480px){.link-btn.top{font-size:24px;}}

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

/*色違い*/
.link-btn.yellow{
  display:block;
  width:100%;
  max-width:480px;
  color:#fff;
  background-color:#ffae4c;
  font-size:18px;
  font-family:'Kosugi Maru', sans-serif;
  text-align:center;
  line-height:130%;
  border-radius:10px;
  border:2px solid #ffae4c;
  padding:15px 10px;
  margin:20px auto;
  transition:all .2s ease;
}
.link-btn.yellow:hover{color:#ffae4c; background-color:#fff;}
.link-btn.yellow.tw{background-color:#00acee; border:2px solid #00acee;}
.link-btn.yellow.tw:hover{color:#00acee; background-color:#fff;}
.link-btn.yellow span{display:block; font-size:13px;}

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

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


/*
================================================================================================================
チェックボックス
================================================================================================================
*/
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;}

/*#step .comment01{width:55%; font-size:12px; line-height:16px; font-weight:300; margin:-55px auto 30px 10px;}*/
#step .comment01{width:38%; font-size:12px; line-height:16px; font-weight:300; margin:0 auto 0 10px;}

/*
================================================================================================================
コピーライト
================================================================================================================
*/
.copyright{width:100%; /*max-width:500px;*/max-width:650px; color:#1bb367; text-align:left; margin:0 auto;}
/*.copyright > p:nth-of-type(2){font-size:11px;}*/
.copyright > p{font-size:11px;}