@charset "UTF-8";

/*———————————–———————————————–———————–———————–——–
		LINEポイントラリー
———————————–————————————————–———————–—————–————–*/
#shopcard,#howto{
  text-align: center;
  padding:50px 0 150px 0;
}

.rally-logo{
  width:85%;
  max-width:630px;
}

@media screen and (max-width:1199px) {
  #shopcard,#howto{
    width:90%;
  }
}

@media screen and (max-width:1023px) {
  #shopcard,#howto{
    width:85%;
  }

  .rally-logo{
    width:85%;
    max-width:500px;
  }
}

@media screen and (max-width:743px) {
  .rally-logo{
    width:100%;
  }
}

/* 期間外 ========================================*/
#shopcard.not_ready p,
#shopcard.already p,
#shopcard p.accesserror{
  border: solid 3px #C81528;
  background-color:#fff2f4;
  color:#C81528;
  width:85%;
  max-width:600px;
  margin: 50px auto 0 auto;
  border-radius:15px;
  padding: 50px 0;
  font-weight:bold;
  letter-spacing: 1px;
}

@media screen and (max-width:743px) {
  #shopcard.not_ready p,
  #shopcard.already p,
  #shopcard p.accesserror{
    font-size:15px;
    letter-spacing: 0;
    padding: 40px 0;
    width:90%;
  }
}


/* 上限取得済み ===================================*/
#shopcard.already{

}


/*———————————–———————————————–———————–———————–——–
		獲得方法と注意事項
———————————–————————————————–———————–—————–————–*/
#howto {
  max-width:1000px;
  margin: 0 auto;
}

#howto h5{
  width:100%;
  font-size:22px;
  margin: 20px 0;
}

#howto h5 + p{
  text-align: center;
  margin:20px 0;
  font-weight:600;
}

@media screen and (max-width:743px) {
  #howto h5{
    font-size:18px;
    margin: 20px 0 10px 0 ;
  }

  #howto h5 + p{
    margin:0;
    font-size:14px;
    letter-spacing: 0;
    text-align: justify;
    line-height:20px;
  }

  #howto h5 + p br{
    display:none;
  }

  #howto h5 + p br.br_ok{
    display:inline-block;
  }
}

/* wi-fi OFF */
#howto .settings{
  border:solid 3px #c30d23;
  background-color: rgba(195, 13, 35, 0.15);
  border-radius:10px;
  max-width:700px;
  margin: 20px auto 50px auto;
  padding: 20px 0;
}

#howto .settings img{
  width:45px;
  display:inline-block;
  vertical-align: middle;
  margin-right:10px;
  position:relative;
  top:-3px;
}

#howto .settings p{
  font-weight:600;
  display:inline-block;
  width:auto;
  font-size:20px;
  display:inline-block;
  vertical-align: middle;
}

#howto .settings p br{
  display:none;
}

#howto .settings p strong{
  font-weight:900;
  color:#c30d23;
  font-size:20px;
  margin: 0 5px;
}

.marker{
  position: relative;
  z-index: 1;
  padding: 0 .1em .1em;
  background: linear-gradient(transparent 60%, #ffff66 60%);
}

@media screen and (max-width:743px) {
  #howto .settings{
    margin: 20px auto 50px auto;
    padding: 10px 0;
  }

  #howto .settings img{
    width:40px;
  }

  #howto .settings p{
    font-size:15px;
    line-height:28px;
  }

  #howto .settings p br{
    display:inline-block;
  }

  #howto .settings p strong{
    font-size:17px;
    margin: 0 3px;
  }
}



/* ポイント獲得の手順 =============================================*/
#howto .flow-box{
  display:flex;
  flex-wrap:wrap;
  align-items:start;
  margin-bottom:20px;
}

#howto .flow-box .flow-img{
  width:40%;
}

#howto .flow-box .flow-txt{
  width:60%;
  box-sizing:border-box;
  padding-left:25px;
}

#howto .flow-txt h6{
  font-size:22px;
  margin:35px 0 15px 0;
  text-align: left;
}

#howto .flow-txt h6 br{
  display:none;
}

#howto .flow-txt p{
  text-align: justify;
  font-weight:600;
}

#howto .flow-txt p span{
  color:#c30d23;
  font-weight:600;
}

#howto .indent{
  display:block;
  text-indent: -1em;
  padding-left:1em;
}

@media screen and (max-width:743px) {
  #howto .flow-box .flow-img{
    width:100%;
  }

  #howto .flow-box .flow-txt{
    width:100%;
    padding-left:0;
  }

  #howto .flow-txt h6{
    font-size:20px;
    margin:15px 0 15px 0;
    text-align: center;
  }

  #howto .flow-txt p,
  #howto .flow-txt p span{
    font-size:15px;
    letter-spacing: 0;
    line-height:22px;
  }

  #howto .flow-txt p span.indent br{
    display:none;
  }

  #howto .indent{
    display:block;
    text-indent: -1em;
    padding-left:1em;
    font-size:13px!important;
    line-height:15px!important;
    margin-bottom:5px;
  }
}


/* 01
===================================*/
#howto .flow-box.flow01 .flow-txt p img{ /* nfcアイコン */
  width:2em;
  margin-top:-10px;
  position:relative;
  top:15px;
  margin-bottom:10px;
}

#howto .flow-box.flow01 .flow-txt p img.unlock{ /* 鍵アイコン */
  width:2em;
  margin-top:-10px;
  position:relative;
  top:12px;
  margin-bottom:10px;
}

/* 注意事項
===================================*/
#howto .flow-box.flow01 .caution-box{
  margin: 30px 0 10px 0;
  border:solid 3px #000;
  border-radius:10px;
  padding:25px 10px 15px 10px;
  position:relative;
  font-weight:600;
}

#howto .flow-box.flow01 .caution-box .caution-icon{
  width:45px;
  position:absolute;
  top:-20px;
  left:0;
  right:0;
  margin:auto;
  background-color:#fff;
}

@media screen and (max-width:743px) {
  #howto .flow-box.flow01 .caution-box{
    margin: 30px 0 10px 0;
    padding:20px 5px 10px 5px;
    font-size:14px;
    letter-spacing: 0;
    line-height:22px;
  }

  #howto .flow-box.flow01 .caution-box .caution-icon{
    width:40px;
    position:absolute;
    top:-20px;
    left:0;
    right:0;
    margin:auto;
    background-color:#fff;
  }
}

/* 賞品
===================================*/
#howto .prize{
  border-radius:10px;
  margin:10px auto;
  max-width:800px;
  font-size:26px;
  font-weight:600;
  -webkit-text-stroke: 8px #fff;
  text-stroke: 8px  #fff;
  paint-order: stroke fill;
}

#howto .prize.pt20{ background-color:#F5B1A0;color:#e03022;}
#howto .prize.pt40{ background-color:#9CD5D7;color:#0f9ab6;}

#howto .prize img{
  width:150px;
  vertical-align: middle;
}

@media screen and (max-width:1023px) {
  #howto .prize{
    font-size:22px;
  }

  #howto .prize img{
    width:120px;
    vertical-align: middle;
  }
}

@media screen and (max-width:743px) {
  #howto .prize{
    margin:60px auto 10px auto;
    font-size:16px;
    letter-spacing: 0;
    -webkit-text-stroke: 6px #fff;
    text-stroke: 6px  #fff;
    position:relative;
    padding:60px 5px 20px 0 ;
  }

  #howto .prize img{
    width:100px;
    border-radius:100px;
    margin-top:-50px;
    position:absolute;
    top:-40px;
    left:0;
    right:0;
    margin:auto;
  }
}



/* 引換締切
===================================*/
#howto .closing{
  display:flex;
  flex-wrap:wrap;
  max-width:800px;
  margin:20px auto;
}

#howto .closing li{
  border:solid 3px #cf3023;
  padding: 10px 0;
  margin-bottom:10px;
  font-weight:600;
}

#howto .closing li:nth-child(odd){
  background-color:#cf3023;
  color:#fff;
  width:150px;
  border-top-left-radius:100px;
  border-bottom-left-radius:100px;
  letter-spacing: 2px;
  padding-left:13px;
}

#howto .closing li:nth-child(even){
  width:calc(100% - 150px);
  border-top-right-radius:100px;
  border-bottom-right-radius:100px;
  font-size:17px;
}

#howto .closing li br{
  display:none;
}

@media screen and (max-width:1023px) {
  #howto .closing li:nth-child(odd){
    width:110px;
    letter-spacing: 0;
    padding-left:13px;
    font-size:15px;
  }

  #howto .closing li:nth-child(even){
    width:calc(100% - 110px);
    font-size:15px;
  }
}

@media screen and (max-width:743px) {
  #howto .closing{
    display:flex;
    flex-wrap:wrap;
    max-width:800px;
    margin:20px auto;
  }

  #howto .closing li{
    padding: 5px 0;
    margin-bottom:10px;
    width:100%!important;
  }

  #howto .closing li:nth-child(odd){
    background-color:#cf3023;
    color:#fff;
    width:110px;
    letter-spacing: 0;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
    border-bottom-left-radius:0;
    letter-spacing: 1px;
    padding:3px 0 0 0;
    margin-bottom:0;
    font-size:14px;
  }

  #howto .closing li:nth-child(even){
    width:calc(100% - 110px);
    border-top-right-radius:0;
    border-bottom-right-radius:10px;
    border-bottom-left-radius:10px;
    font-size:14px;
    line-height:22px;
  }

  #howto .closing li br{
    display:inline-block;
  }
}






/* タブ切り替え ===================================*/

/* 回答後の結果*/

/* 解説表示枠 ===================================*/


























/**/