@charset "utf-8";

/*
 * CSS for SmartPhone
 * @date     2025.12
 */
#widewrapper{ width: 100%; margin: 0; padding: 0; overflow: hidden; position: relative; }
.pc { display: none !important;}
#keyVisual { width: 100%; margin: 0; padding: 0; overflow: hidden;}
#keyVisual h1 { margin: 0; padding: 0; text-align: center; text-indent: 0;}
a:hover{ text-decoration: none !important;}

nav { width: 100%; overflow: hidden; background: #fff; z-index: 9;}
nav ul { margin:0 auto; display: flex; justify-content: center;}
nav ul li { width: 48%; align-items: center; margin: 4px 0;}
nav ul li a { display: block; text-align: center; padding: 8px 0; font-weight: bold; color: #00808E !important;}
nav ul li a span { display:block; width: 100%;}
nav ul li a span.icon { height: 20px; margin-bottom: 4px;}
/* nav ul li:nth-child() a span.icon { height: 21px; margin: 3px 0 0;} */
nav ul li a span.icon img { height: 100%;}
nav ul li a:hover ,nav ul li.here a{ border-bottom: 2px solid #00808E;}

.cpnbox { overflow: hidden; margin:0; padding: 24px 0 0;position: relative;}
h2.title { text-align: center; margin: 0 auto;}
h2.title img { width:100% !important;}

.imgfr,.imgfl,.imgtl  { display: none;}

#COUPON { background: #FFF1CE;}
.coupon__filter__guide { margin-top: 0;}
.coupon__filter__box ,.coupon__filter__box .coupon__filter__btn__bg{ background-color:#FFF1CE !important;}
.coupon__filter__box .coupon__filter__btn-sp { background: #fff;}

#CAMPAIGN { background: #E2F5F8;}
ul.campaign { width: auto; padding: 0 2% 4%; display: flex; flex-wrap: wrap; justify-content: start; margin-top: 16px;}
ul.campaign li { width: 46%; margin:0 2% 4%;}
ul.campaign li img { width: 100%;}

#SEARCH { background: #FFE2E5;}
#search-box { margin:24px 0; border: 0; background: #D3D2D2 !important; padding: 10px; border-radius: 0;}
#search-box .searchNavi { padding: 10px !important; background: none !important;}
#search-box .searchNavi li { width: 31% !important; margin: 0 1.16% !important;}
#search-box .searchNavi li label { width: 100%;}
#search-box.verB.test #searchForeignSwitchArea2 .InpuDateBox.num dl dd.number { margin-bottom: 0 !important; margin-top: 5px !important;}
#search-box #oap-search-form .adult { width: 50% !important;}
#search-box dl.structure { min-height: 0 !important;}
#oap-search-form .structure dd { margin: 0 ; padding: 0;}
#search-box.verB select { line-height: normal;}

.trigger {
  display: block;
  width: 50px;
  height: 50px;
  cursor: pointer;
  margin: 10px 0 10px 46px;
  background: url(https://img.travel.rakuten.co.jp/special/sales/images/new/menu_open.png) center center/50px auto no-repeat;
}

#sRight {
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 999;
}
#sRight .jss_switchMenu.active .trigger {
  background: url(https://img.travel.rakuten.co.jp/special/sales/images/new/menu_close.png) center center no-repeat;
  background-size: 50px auto
}

#sRight .jss_switchMenu.active dl {
  right: 1px
}
#sRight .jss_switchMenu { position: relative ;}
#sRight .jss_switchMenu dl {
  position: relative;
  width: 96px;
  right: -130px;
  bottom: 52px;
}
.ss-right dd ul {
  position:absolute ;
  border: 1px solid #00808E;
  border-radius: 5px 5px 5px 5px;
  overflow: hidden;
  bottom: -50px;
  right: 0;
}

.ss-right dd li {
  position: relative;
  border-bottom: 1px solid #00808E;
  font-size: 75%;
  font-weight: 700;
  text-align: center;
  line-height: 2;
}

.ss-right dd li:last-child {
  border-bottom: none
}

.ss-right dd li a {
  padding: 25px 5px 2px;
  color: #00808E !important;
  display: block;
  background: #fff;
  text-decoration: none
}


.ttlicon_w:after {
  width: 30px;
  height: 26px;
  left: 50%;
  margin-left: -15px;
  top: 3px;
  display: block;
  content: "";
  position: absolute ;
}

.ttlicon_w.coupon-icon:after {
  background: url(../images/icon_coupon.svg) no-repeat; background-size: 30px;
}
.ttlicon_w.couponlimit-icon:after {
  background: url(../images/icon_couponlimit.svg) no-repeat; background-size: 28px; top: 6px; margin-left: -9px;
}
.ttlicon_w.search-icon:after {
  background: url(../images/icon_search.svg) no-repeat; background-size: 30px;
}
.ttlicon_w.campaign-icon:after {
  background: url(../images/icon_campaign.svg) no-repeat; background-size: 30px;
}

.pagetop {
  width: 50px;
  margin: 0;
  float: right;
}

.pagetop a {
  background-color: #00808E;
  border-radius: 5px 5px 0 0;
  display: block;
  line-height: 0;
  font-size: 0;
  height: 32px;
  position: relative
}

.pagetop a:after {
  display: block;
  position: absolute;
  top: 50%;
  right: 50%;
  width: 6px;
  height: 6px;
  margin-top: -2px;
  margin-right: -4px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  content: ""
}

.moreCoupon {
    display: flex;
    justify-content: center;
    position: relative;
    margin: 0;
    padding: 0 20px;
}

.moreCoupon:before {
    position: absolute;
    content: '';
    left: 0;
    right: 0;
    bottom: 0;
    height: 140px;
    background: linear-gradient(to bottom, rgba(255, 241, 206, 0) 0, rgba(255, 241, 206, 1) 50%);
    z-index: 0;
}

.moreCoupon.disable:before {
    display: none;
}

.moreCoupon .moreCouponBtn {
    height: auto;
    background: #FFF;
    padding: 16px 0;
    color: #009700;
    font-weight: bold;
    border-radius: 4px;
    border: 1px solid #009700;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    flex: 100% 0 0;
    margin-bottom: 16px;
}

.moreCoupon .moreCouponBtn:hover {
    opacity: .8;
}

.moreCoupon .moreCouponBtn::before {
    content: ""!important;
    position: static;
    transform: translateX(-5px);
    width: 32px;
    height: 32px;
    background: url(https://img.travel.rakuten.co.jp/special/sales/202601/images/btnIconCoupon.svg) no-repeat;
}

.moreCoupon .moreCouponBtn::after {
    content: "";
    position: absolute;
    right: 5%;
    top: 50%;
    transform: translateY(-65%) rotate(135deg);
    width: 13px;
    height: 13px;
    border: 1px solid #009700;
    border-bottom: none;
    border-left: none;
    display: block;
}

.moreCoupon .moreCouponBtn.active::after {
    transform: translateY(-25%) rotate(-45deg);
}

.coupon__box {max-height:360px;}
.coupon__box.show-all {
    max-height: none;
    overflow: visible;
  }