@charset "utf-8";

/*
* ★★CSS for SP
*
* @date 2020.xx.xx
* @author HeChengHao
*/


/* -- Reset -- */
#contentsArea{background:#fff;}
#contentsArea #contents{background:none;padding:0;color:#333;overflow:hidden; font-family: 'Noto Sans JP', sans-serif;}
.pc{display:none;}
a{-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out;-ms-transition:all .3s ease-out}
a:active{text-decoration:none!important;opacity:.7}
  

/* -- Top -- */


/* -- nav -- */
.spnav{ position:fixed; right:10px;  bottom:10px;  z-index:99; opacity:0.95;}
.spnav input{ display: none;}
.spnav label{ position: relative;z-index: 10;  cursor: pointer; display: block; width:55px; height: 55px; text-indent: -9999px; background: url(https://img.travel.rakuten.co.jp/special/goto/202007-3/images/menu.png) no-repeat; background-size: 100%;}
.spnav input:checked+label{
    background: url(https://img.travel.rakuten.co.jp/special/goto/202007-3/images/menu_off.png) no-repeat;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  background-size: 100%;
}
.spnav ul{ overflow: hidden;}
.spnav ul {
    overflow: hidden;
    position: absolute;
    right: -10px;
    bottom: 10px;
    width: 0px;
    height: 220px;
}
.spnav input:checked+label+ul{width: 190px;}
.spnav ul li{ opacity: 0; position: absolute; right: -190px; bottom: 110px;}
.spnav ul li:nth-child(2){ bottom: 145px;}
.spnav ul li:nth-child(3){ bottom: 180px;}
.spnav ul li:nth-child(4){ bottom: 215px;}
.spnav ul li:nth-child(5){ bottom: 250px;}
.spnav ul li:nth-child(6){ bottom: 285px;}
.spnav ul li:nth-child(7){bottom: 339px;height: 2em;}
.spnav ul li:nth-child(8){ bottom: 305px;}
.spnav ul li:nth-child(9){ bottom: 340px;}
.spnav ul li:nth-child(10){ bottom: 375px;}
.spnav input:checked+label+ul li{ opacity:1; right: -10px; 
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;}
.spnav input:checked+label+ul li:nth-child(2){
-webkit-transition: all 0.35s;
-moz-transition: all 0.35s;
-ms-transition: all 0.35s;
-o-transition: all 0.35s;
transition: all 0.35s;}
.spnav input:checked+label+ul li:nth-child(3){
-webkit-transition: all 0.45s;
-moz-transition: all 0.45s;
-ms-transition: all 0.45s;
-o-transition: all 0.45s;
transition: all 0.45s;}
.spnav input:checked+label+ul li:nth-child(4){
-webkit-transition: all 0.50s;
-moz-transition: all 0.50s;
-ms-transition: all 0.50s;
-o-transition: all 0.50s;
transition: all 0.50s;}
.spnav input:checked+label+ul li:nth-child(5){
-webkit-transition: all 0.55s;
-moz-transition: all 0.55s;
-ms-transition: all 0.55s;
-o-transition: all 0.55s;
transition: all 0.55s;}
.spnav input:checked+label+ul li:nth-child(6){
-webkit-transition: all 0.60s;
-moz-transition: all 0.60s;
-ms-transition: all 0.60s;
-o-transition: all 0.60s;
transition: all 0.60s;}
.spnav input:checked+label+ul li:nth-child(7){
-webkit-transition: all 0.65s;
-moz-transition: all 0.65s;
-ms-transition: all 0.65s;
-o-transition: all 0.65s;
transition: all 0.65s;}
.spnav input:checked+label+ul li:nth-child(8){
-webkit-transition: all 0.70s;
-moz-transition: all 0.70s;
-ms-transition: all 0.70s;
-o-transition: all 0.70s;
transition: all 0.70s;}
.spnav input:checked+label+ul li:nth-child(9){
-webkit-transition: all 0.75s;
-moz-transition: all 0.75s;
-ms-transition: all 0.75s;
-o-transition: all 0.75s;
transition: all 0.75s;}
.spnav ul li a{ display: block; font-size: 12px; color: #fff !important; font-weight: bold; background:#55C7F2; border-radius:5px 0 0 5px; margin-bottom:3px; padding:8px 20px; width: 200px; box-sizing: border-box; text-align: center;}
.spnav ul li a br{ display: none;}
/* .spnav ul li:first-child a{ background: #6FCF97;} */
.spnav input+label+ul+.spnavBg{display: none !important;}
.spnav input:checked+label+ul+.spnavBg{display: block !important;}
.spnav .top{ width: 55px; margin-top: 4px; }
.spnav .top a{ display: flex; font-size: 16px; font-weight: bold; color: #fff !important; justify-content: center; align-items: center; width: 55px; height: 55px; line-height: 1; background: #6FCF97; border-radius: 5px; }

/* -- Contents -- */
.wBox{position:relative;clear:both;overflow:hidden;width:100%; margin-top: 48px;}
.mBox{position:relative;clear:both;overflow:hidden; margin:0 8px;}
.ttl{ font-size: 19px; font-weight: bold; text-align: center; line-height: 1;}
.tpr{ margin: 16px; font-size: 13px; line-height: 2; }
.tpr a{ color: #2EB8FF !important;}

*[class^=btn] a{ color: #333 !important; text-decoration: none !important;}
/* .jdsCoponSwitch{ background: url(../images/iconP.png) 98% center no-repeat ;}
.jdsCoponSwitch.active-submenu{background: url(../images/iconM.png) 98% center no-repeat;} */

.btnTop{ margin: 40px 24px;}
.btnTop a{ display: block; padding: 13px 0; background: #55C7F2; border-radius: 3px; font-weight:bold; text-align: center; font-size: 16px; color: #fff !important; position: relative; }

/* -- whats -- */
#whats {margin-top: 0;}
#whats .ttl{ color: #2EB8FF;margin-top: 24px;}
#whats dl{ margin: 24px 16px 0; overflow: hidden; border-radius: 14px;}
#whats dl dt{ margin-top: 16px; padding-bottom: 24px;}
#whats dl dd{ font-size: 16px; line-height: 2; position: relative;width: 300px;margin: 0 auto;}
@media screen and (max-width:321px) {

  #whats dl dd{ font-size: 14px; }
}

#whats dl dd::before{ content: url(../images/checkbox-selected.png); margin-right: 10px; vertical-align: -6px;}
#whats .ttls{ font-size: 18px;  color: #fff; padding: 8px;  margin: 32px auto 0;}
#whats .ttls + .tpr{ margin-top: 10px; padding: 8px; border: 1px solid #BF0000; margin: 0;margin-top: 8px;}
#whats .ttls + .tpr a{ display: block; margin: 32px auto 16px;  padding: 12px 0; text-align: center; font-size: 16px; color: #000 !important; font-weight: bold; border: 1px solid #b5b5b5; border-radius: 8px; line-height: 1.2;}
#whats .ttls + .tpr a:hover{ text-decoration: none !important;}

/* -- step -- */
#step{ background: #DEF5FF; padding-bottom: 40px;}
#step .ttl{ color: #2EB8FF; padding-top: 48px;}
#step .mBox{ background: #fff; padding: 0 0 48px; margin-top: 32px; overflow: hidden;}
#step .step1{ background: #DEF5FF url(../images/imgStepBg.png) center bottom no-repeat; background-size: 100%; padding-bottom: 48px; box-sizing: border-box; margin: 24px 16px 0;}
#step .step1 dt{ padding-top: 16px; text-align: center;}
#step .step2{ background: #DCF9DC; box-sizing: border-box; margin: 0 16px;}
#step .step2 dt{ padding-top: 16px; text-align: center;}
#step .stepgo{ margin: 0 16px;}
#step .stepgo img{ width: 100%;}
#step .step1 dd{ border-radius: 8px; border:4px solid #2EB8FF; box-sizing: border-box; background: #fff; overflow: hidden; margin: 8px 8px 0;}
#step .step2 dd{ border-radius: 8px; border:4px solid #00B900; box-sizing: border-box; background: #fff; overflow: hidden; margin: 8px 8px 0;}
#step .step1 .tit{ background: #2EB8FF; text-align: center; padding: 0 0 4px;}
#step .step2 .tit{ background: #00B900; text-align: center; padding: 0 0 4px;}
#step .cts{ background: #fff; padding:16px; display: flex; justify-content: space-between; position: relative;}
#step .cts .photo{ width: 70px; margin-right: 8px;}
#step .cts .photo img{ width: 100%;}
#step .cts .name{ font-size: 13px; line-height: 1.6; width: calc( 100% - 78px);}
#step .cts .name b{ font-size: 20px; display: block; }
#step .tpr{margin: 24px 16px 0;}


/* bnrBox */
.bnrBox .ttl{ line-height: 1.6; margin: 0 32px;}
.slideBox .jdsSwiperPlus{ margin: 16px 16px 0; padding-bottom: 9px;}
.slideBox .jdsSwiperPlus .swiper-slide{ width: calc( 95% - 16px) !important; line-height: 0; overflow: hidden; margin-bottom: 12px;
  border: 1px solid #eee;
box-sizing: border-box;

}
.slideBox .jdsSwiperPlus .swiper-slide img{ width: 100%;}


/* -- useful -- */
#useful .mBox{ background: #FFF8E4; margin: 0; padding-bottom: 50px;}
.safe{ padding: 0 24px ;}
.safe dt{ font-weight: bold; margin: 40px 0 0;}
.safe dt span{ display: block; font-weight: normal; font-size: 16px; margin-top: 10px;}
.safe dd{ margin: 16px 0 0; background: #fff; }
.safe dd a{ margin-left: 8px; padding:0 50px 0 36px; height: 135px; display: flex; align-items: center; line-height: 1.6; color: #0D67B2 !important; background:  url(../images/open_bk_15_14.png) right 50% no-repeat, url(../images/iconPlane.png) left center no-repeat;}
.safe dd a:hover{ text-decoration: none !important;}
.safe dd.tpr{ background: none;}


#keyVisual {


  background: url(../images/topBg_sp.jpg) center center no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 30px;
  padding-bottom: 0;

}

.topbtn {
width: 260px;
  height: 60px;
  margin-top: 24px;

}

.topbtn a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  color: #fff !important;
  font-size: 18px;
  font-weight: bold;
  text-decoration: none;
  border-radius: 5px;
  line-height: 1;
  background: #2eb8ff url(../images/icon.svg) right 10px center no-repeat;
}
.topbtn a:hover {
  text-decoration: none !important;
}

.date {
  font-size: 14px;
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px 5px 0 0;
  line-height: 1;
  background-color: #fff;
  padding: 8px;
 

}

/**/
.ttls.jdsCoponSwitch {
  background: #bf0000 url(../images/plus_s.svg) no-repeat right 20px center;
  background-size: 20px auto;
  display: flex;
  
}
.ttls.jdsCoponSwitch  span {display: inline-block;}
.ttls.jdsCoponSwitch.active-submenu {
    background: #bf0000 url(../images/minus_s.svg) no-repeat right 20px center;
      background-size: 20px auto;
}

#step  .cts .name span{
    font-size: 10px;display: block;
}