@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;
}
@media screen and (max-width:800px){#main-inner > h2{font-size:16px;}}
@media screen and (max-width:480px){#main-inner > h2{font-size:15px;}}
#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;}}

/*
========================
アンケート
========================
*/
.q{line-height:180%;}
strong.q{display:block; color:#1bb367; margin:20px auto;}
div.q-box{text-align:center; margin:0 auto 40px;}
div.q-box .link-btn{background:#ff007e; border:2px solid #ff007e;}
div.q-box .link-btn:hover{color:#ff007e !important; background:#fff;}
div.q{background-color:#fff; border-radius:10px; padding:20px;}
div.q a{color:#1bb367; font-weight:bold; transition:all .2s ease;}
div.q a:hover{color:#ff008d;}

/*
================================================================================================================
PASELIとは？
================================================================================================================
*/
#whats.main > p{
  width:100%; 
  max-width:1000px; 
  background-color:#fff;
  border:2px solid #000;
  font-family: 'Noto Sans JP', sans-serif; 
  font-weight:bold; 
  text-align:left; 
  padding:20px; 
  margin:0 auto;
}

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

.text > p{font-size:18px;}
.text > p > a,
.s-text > a{color:#004484; transition:all .2s ease;}
.text > p > a:hover,
.s-text > a:hover{color:#ff008d;}

.pc-br{display:block;}

/*pointup04追加部分*/
#step .text.in-img{}
#step .text.in-img > p{}
#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 > p >span{color:#1bb367;}
#step .text.in-img > ul{
  display:flex; 
  width:100%; 
  max-width:800px; 
  margin:20px auto; 
  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 .text.in-img > ul li:nth-of-type(2) .sp-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;}
.pc-br{display:none;}
}

@media screen and (max-width:640px){
.text > p{font-size:16px;}
#step .text.in-img > p:nth-of-type(2){font-size:16px; text-align:left; padding:0 50px;}
#step .text.in-img > ul{display:block;}
#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; margin-bottom:10px;}
#step .text.in-img > ul li:nth-of-type(2) .sp-br{display:block;}

#paseli-point .text.in-img{font-size:15px; text-align:left;}
}

@media screen and (max-width:420px){
.text > p{font-size:14px; text-align:left;}
.pc-br{display:none;}
}

/*ここまで*/

#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{
  border-radius:10px; 
  border:3px solid #1bb367; 
  padding:10px;
}
}

#step .text,.text2{
  position:relative;
  background:#fff;
  text-align:center;
  border-radius:20px;
  border:5px solid #1bb367;
  padding:20px;
  margin:0 auto;
}
#step .text.entry{
  display:flex !important; 
  justify-content:center; 
  align-items:center; 
  flex-wrap:wrap; 
  margin:0 auto 60px;
}
#step .text.entry .title,
#step .text2.entry .title,
#step .text.in-img .title{
  display:inline-block; 
  font-size:30px; 
  padding:0 10px;
}

/*pc改行なし*/
.sp-br,.sp-980{display:none;}

@media screen and (max-width:980px){
#step .text.entry .title,
#step .text2.entry .title,
#step .text.in-img .title{text-align:center; margin:0;}
/*sp980改行*/
.sp-980{display:block;}
}
@media screen and (max-width:800px){
#step .text.entry .title,
#step .text2.entry .title,
#step .text.in-img .title{font-size:30px; text-align:left;}
}
@media screen and (max-width:640px){
/*sp改行*/
.sp-br{display:block;}
}

@media screen and (max-width:500px){
#step .text.entry .title,
#step .text2.entry .title,
#step .text.in-img .title{font-size:22px;}
#step .s-text.left > p{text-align:left;}
}

@media screen and (max-width:375px){
#step .text.entry .title,
#step .text2.entry .title,
#step .text.in-img .title{font-size:18px; margin:0;}
}

#step .text.entry p:first-child span{display:inline-block; color:#b60014; /*margin-right:10px;*/}
#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;}

@media screen and (max-width:640px){
#step .s-text .charge_left{margin:0;}
}

@media screen and (max-width:375px){#step .s-text{font-size:14px;}
}
/*
=======
step1
=======
*/
#step .box{
  position:relative;
  width:100%; 
  max-width:900px;
  background-color:#1bb367;
  border-radius:10px; 
  padding:15px 0;
}
#step .box{display:flex; flex-wrap:wrap; align-items:center; padding:10px;}
#step .box > div{width:100%; max-width:800px; margin:0 auto;}
#step .box > p{width:20%; text-align:left;}
#step .box > p > img{width:100%; filter:drop-shadow(5px 2px 2px rgba(108,111,108,0.8));}
#step .box > div{width:80%;}
#step .box > div > p:nth-of-type(1){font-size:25px; color:yellow; text-align:center; margin:10px 0;}
#step .box > div > p:nth-of-type(2){font-size:20px; font-family:'Kosugi Maru', sans-serif;}
#step .box > div > p:nth-of-type(2),
#step .box > div > p:nth-of-type(3),
#step .box > div > p:nth-of-type(4){width:100%; color:#fff; text-align:left; padding-top:10px;}

@media screen and (max-width:980px){
#step .box{display:flex; flex-wrap:wrap; align-items:center;}
#step .box > div{width:100%;}
#step .box > div > p:nth-of-type(1){font-size:25px; color:yellow; text-align:left; margin:10px 0;}
#step .box > div > p:nth-of-type(2){font-size:16px;}
#step .box > p{width:100%; text-align:center;}
#step .box > p > img{width:60%;}
}
@media screen and (max-width:640px){
#step .box > div > p:nth-of-type(1){font-size:22px;}
}
@media screen and (max-width:420px){
#step .box > div > p:nth-of-type(1){font-size:16px;}
#step .box > div > p:nth-of-type(2){font-size:12px;}
#step .box > div > p:nth-of-type(3),
#step .box > div > p:nth-of-type(4){font-size:14px;}
}

/*
=======
step2
=======
*/
#step .inner{display:flex; justify-content:center; flex-wrap:wrap;}
#step .inner .cat{width:100%;}
#step .inner .cat .text > img{display:inline-block; width:60px; margin:0 5px 5px 10px;}
#step .inner .cat .text::after{
  display:block;
  content:"";
  position:absolute;
  width:0;
  height:0;
  border-style:solid;
}
#step .inner .cat .text > .img-box{
  width:100%; 
  max-width:650px; 
  display:flex; 
  justify-content:center; 
  text-align:center; 
  margin:20px 0;
}   
#step .inner .cat .text > .img-box > p{width:calc(100% / 2);}
#step .inner .cat .text > .img-box > p > span{
  display:block; 
  display:flex;  
  font-size:12px; 
  font-weight:200;
  color:#000;
  line-height:1.5; 
  text-align:left;
  justify-content:center; 
  flex-wrap:wrap;
}
#step .inner .cat .text > .img-box > p:nth-of-type(2){font-size:12px;}
#step .inner .cat .text > .img-box > p > img{max-width:200px;}

@media screen and (min-width:981px){
img.pc{display:block;}
img.sp{display:none;}
}
@media screen and (max-width:980px){
img.pc{display:none;}
img.sp{display:inline-block;}
}
@media screen and (max-width:465px){
#step .inner .cat .text > .img-box > p > img{max-width:90%;}
}
/*
=====================
step2-矢印付けないver
=====================
*/
#step .inner{display:flex; justify-content:center; flex-wrap:wrap;}
#step .inner .cat{width:100%;}
#step .inner .cat .text2 > img{display:inline-block; width:60px; margin:0 5px 5px 10px;}
/*
#step .inner .cat .text::after{
  display:block;
  content:"";
  position:absolute;
  width:0;
  height:0;
  border-style:solid;
}
*/
#step .inner .cat .text2 > .img-box{
  width:100%; /*max-width:650px;*/ 
  display:flex; 
  justify-content:center; 
  text-align:center; 
  margin:20px 0;
}   
#step .inner .cat .text2 > .img-box > p{/*width:calc(100% / 2);*/ margin:10px;}
#step .inner .cat .text2 > .img-box > p > span{
  display:block; 
  display:flex;  
  font-size:12px; 
  font-weight:200;
  color:#000;
  line-height:1.5; 
  text-align:left;
  justify-content:center; 
  flex-wrap:wrap;
}
#step .inner .cat .text2 > .img-box > p:nth-of-type(2){font-size:12px;}
#step .inner .cat .text2 > .img-box > p > img{max-width:200px;}

@media screen and (min-width:981px){
img.pc{display:block;}
img.sp{display:none;}
}
@media screen and (max-width:980px){
img.pc{display:none;}
img.sp{display:inline-block;}
}
@media screen and (max-width:465px){
#step .inner .cat .text2 > .img-box > p > img{max-width:90%;}
}
/*
========================
プライズ
========================
*/
#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 > span:nth-of-type(2),
#step .inner .cat .prize > span:nth-of-type(3) {
  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 > 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 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:nth-of-type(2),
#step .inner .cat .prize > span:nth-of-type(3) {font-size:24px;}
#step .inner .cat .prize > strong span {font-size:30px;}
} 

/*
========================
PASELIアプリ登場
========================
*/
#step .section.green{color:#000;background-color:#E8F2ED;}
#step .section.green img{ width:100%;}
#step .section.green > .inner{padding:20px;text-align: center;}
#step .section.green > .inner + .inner{padding-top:0;}
#step .section.green > .inner .catch {
    width: 100%;
    font-size: 22px;
    font-weight: 400;
    line-height: 150%;
    margin: 0 auto;
}
#step .section.green > .inner .box {
position: relative;
    background: #fff;
    font-size: 20px;
    line-height: 150%;
    border-radius: 20px;
    padding: 30px;
    margin: 20px auto; 
 }
#step .section.green > .inner #app-dl {
    display: flex;
    padding-bottom: 0;
    align-items: center;
}
#step .section.green > .inner #app-dl > * {
    width: 50%;
}

#step .section.green > .inner #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;
    }
#step .section.green > .inner #app-dl .paseli_text::before,
#step .section.green > .inner #app-dl .paseli_text::after{
display: block;
position: absolute;
bottom: 0px;
}    
#step .section.green > .inner #app-dl .paseli_text::before {content: "＼";left: -30px;}
#step .section.green > .inner #app-dl .paseli_text::after {content: "／";right: -30px;}    

#step .section.green > .inner #app-dl > .dl ul {
    display: flex;
    justify-content: center;
    margin: 20px auto 0;
}
#step .section.green > .inner #app-dl > .dl ul li + li {
    margin-left: 10px;
}
#step .section.green > .inner #app-dl > .dl ul li:first-child {
    width: 190px;
}
#step .section.green > .inner #app-dl > .dl ul li:last-child {
    width: 236px;
}
#step .section.green > .inner #app-dl > .dl .btn-link {
    display: block;
    font-size: 20px;
    max-width: 400px;
    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;
}
#step .section.green > .inner #app-dl > .dl .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;
}
#step .section.green > .inner #app-dl > .dl .btn-link:hover{color:#fff; background:#296429;}

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

@media screen and (max-width: 640px) {
#step .section.green > .inner .catch {
        font-size: 18px;
    }
}

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


/*
========================
パセリポイント利用方法
========================
*/

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

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

@media screen and (max-width:640px){
#paseli-point .text > .s-text{
  text-align:left;
}
#paseli-point .text{
  border-radius:10px; 
  border:3px solid #1bb367; 
  padding:10px;
}
}

/*
========================
*/
@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;*/ font-size:25px;}
  #step.main .inner .cat .text br {display:none;}
  #step.main .inner .cat .prize {width:500px; margin:0 auto;}
  #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 {text-align:center; 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;}
}

/*
========================
Twitterキャンペーン
========================
*/
#step.twitter .inner .cat .text::after{
  bottom:-50px; 
  left:calc(50% - 70px); 
  border-width:50px 70px 0 70px; 
  border-color:#1bb367 transparent transparent transparent;
}
#step.twitter > .text > a{color:#00acee; transition:all .2s ease;}
#step.twitter > .text > a:hover{color:#ff008d;}
#step.twitter .inner .cat{width:100%;}

#step.twitter h3:nth-of-type(1) + .inner{padding-bottom:30px;}

#step.twitter .inner .cat .link-btn{font-size:30px;}

@media screen and (max-width:800px){
#step.twitter .text{font-size:20px;}
#step.twitter .inner .cat .link-btn{font-size:16px; margin:20px auto 0;}}
@media screen and (max-width:710px){#step.twitter .text{text-align:left;}}
@media screen and (max-width:640px){#step.twitter .inner .cat .prize{margin:40px auto 0;}}
@media screen and (max-width:480px){#step.twitter .text{font-size:16px;}}
/*
========================
例
========================
*/
#step-sample{width:100%; max-width:700px; margin:50px auto;}
#step-sample p{width:100%; background:#fff; border:1px solid; padding:20px; margin:0 auto 20px;}

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