@charset "utf-8";

/*
 * CSS for SmartPhone
 * @date     2022.11
 */
#widewrapper  { width: 100%; margin: 0; padding: 0; overflow: hidden; position: relative;
font-family: 'Noto Sans Japanese';
font-style: normal;
font-weight: 500;
background: url(https://img.travel.rakuten.co.jp/kaigai/special/summer/202305/images/top_bg.png) no-repeat 50% 15% #41E998;
background-size: 100%;
}
#contentsArea {background: url(https://img.travel.rakuten.co.jp/kaigai/special/summer/202305/images/bottom_bg.png) no-repeat center bottom; background-size: 100%;}
#contentsArea a:hover {text-decoration: none !important;} 
.pc { display: none !important;}
p.tip { margin: 32px 8px; font-size: 12px; color: #777777; line-height: 18px;font-weight: 300;}


#keyVisual { width: 100%; margin: 0; padding: 0; overflow: hidden;}
#keyVisual h1 { margin: 0; padding: 0; text-indent: 0; text-align: center;}
#keyVisual img{ display: block; width:100%; margin: 0 auto;}


nav    { display: block; width: 100%; overflow: hidden; box-shadow: 0 0 8px #C4C4C4; background: #fff; z-index: 999;}
nav ul { margin: 24px 0; display: flex; justify-content: center;}
nav ul li { width: 30%; align-items: center; border-left: 1px solid #C4C4C4;}
nav ul li a { text-align: center; font-size: 16px; font-weight: bold; color: #626262 !important;}
nav ul li span { display:block; position: relative; padding:32px 0 0;}
nav ul li:nth-child(1){ border-left: 1px solid #fff !important;}
nav ul li:nth-child(1) span { background: url(https://img.travel.rakuten.co.jp/kaigai/special/summer/202305/images/icon_coupon.png) no-repeat 50% 0%;}
nav ul li:nth-child(2) span { background: url(https://img.travel.rakuten.co.jp/kaigai/special/summer/202305/images/icon_sale.png) no-repeat 50% 0%;}
nav ul li:nth-child(3) span { background: url(https://img.travel.rakuten.co.jp/kaigai/special/summer/202305/images/icon_search.png) no-repeat 50% 0%;}


section { overflow: hidden; margin: 16px 8px 0; padding: 16px 0 0; position: relative;}
h2.title { display: block; padding-left: 40px; font-size: 24px;}
h2.title span { display: block; margin: 16px 0 0; padding:16px 0;}
#COUPONbox h2.title { background: url(https://img.travel.rakuten.co.jp/kaigai/special/summer/202305/images/icon_couponl.png) no-repeat left center; background-size: 32px;}
#SALEbox h2.title { background: url(https://img.travel.rakuten.co.jp/kaigai/special/summer/202305/images/icon_salel.png) no-repeat left center; background-size: 32px;}
#SEARCHbox h2.title { background: url(https://img.travel.rakuten.co.jp/kaigai/special/summer/202305/images/icon_searchl.png) no-repeat left center; background-size: 32px;}

.cpnholder    { background: #fff !important; padding-bottom: 0 !important;}
.cpnholder>li { border: 0 !important; width: calc(50% - 16px); float: left; padding: 0 !important; margin: 0 8px 16px !important;}
.cpnholder .char span{ display: none;}
.cpnholder .couponimg p:after {
    width: 30px !important;
    height: 30px !important;
    content: "";
    top: -70px !important;
    left: 10px;
    background-size: 30px 30px !important;
}
.cpnholder .couponimg img {
    width: 100% !important;}
ul.svs li{ width: 100% !important;}
ul.svs li span.user { text-align: right !important; padding-right: 40px;}

ul.jdsTabNav { width: 100%; margin: 0 8px 16px; overflow: hidden; display: flex; justify-content: center;}
ul.jdsTabNav li { padding: 16px; font-size: 16px; margin: 8px; text-align: center; font-weight: bold; border: 1px solid #999; border-radius: 4px; background: #fff;}
ul.jdsTabNav li.active,ul.jdsTabNav li:hover {background: #42ADC5; color: #fff; cursor: pointer;border: 1px solid #42ADC5}

#SALEbox h3.subtitle { display: inline-block; font-size: 18px; padding:0 8px 16px; margin:16px 0 32px; border-bottom: 3px dotted #000;}
.ss-hotelbox { margin-bottom: 16px;}
.ss-hotelbox .ss-hotel { width: calc( 23% - 2px); float: left; margin-bottom:16px; overflow: hidden; background: #fff;}
.ss-hotelbox .hotel-img a.htlInfo { display: block; position: relative; overflow: hidden;}
.ss-hotelbox .hotel-img a.htlInfo span { display: block; position: absolute; right: 10px; bottom: 8px; color: #fff; font-size: 12px; padding: 6px; border-radius: 4px; background: rgb(0, 0, 0,0.6)}
.ss-hotelbox .hotel-img img { width: 100%; float: left;}
.ss-hotelbox .area-name { font-size: 12px; padding: 16px 6px; color: #666;}
.ss-hotelbox .hotel-name {font-size: 16px; font-weight: bold; padding: 0 10px; line-height: 20px; min-height: 84px;}
.ss-hotelbox .ss-button { display: block; margin: 0 10px 16px; overflow: hidden; background: #42ADC5; border:1px solid #42ADC5; color: #fff !important; border-radius: 40px; text-align: center; font-weight: bold; padding: 14px 0;}
.ss-hotelbox .hotel-price {text-align:right;position:relative;clear:both; z-index: 99;}
.ss-hotelbox .hotel-price a { display: block;}
.ss-hotelbox .hotel-price a:hover { text-decoration: none !important;}
.htlplan .hotel-price a span.details {
    display: block;
    position: relative;
    background: url(https://img.travel.rakuten.co.jp/kaigai/special/summer/202305/images/detail.png) 100% 35%/16px 16px no-repeat;
    padding:0 16px 16px 0;
    margin-right: 10px;
    font-size: 24px;
    text-align: right;
    color: #bf0000;
    font-weight: bold;
}
.dpplan  .hotel-price a span.details {
    display: block;
    position: relative;
    background: url(https://img.travel.rakuten.co.jp/kaigai/special/summer/202305/images/detail.png) 100% 65%/16px 16px no-repeat;
    padding:0 16px 16px 0;
    margin-right:4px;
    font-size: 24px;
    text-align: right;
    color: #bf0000;
    font-weight: bold;
}
.ss-hotelbox .hotel-price a span.details em { font-size: 14px;}
.ss-hotelbox .jss_popOverInfo { display: none;}
.ss-hotelbox .price-info { display: block;width: 80%; position: absolute; bottom: 48px; right: 0; font-size: 12px; font-weight: normal; text-align: left; color: #fff; line-height: 16px; background:#000; opacity: 0.85; padding: 8px; border-radius: 4px;}
.ss-hotelbox .price-info:before { display: block; position: absolute; content: ""; bottom: -8px; right: 8px; opacity: 0.85;
    width: 0;
    height: 0;
    border-top: 8px solid #000;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
}
.ss-hotelbox .chara { margin:8px;}
.ss-hotelbox .chara li {
margin-right: 5px;
padding: 3px 5px;
border-radius: 3px;
font-size: 10.5px;
border: 1px solid #ff4d4d;
display: inline-block;
margin-bottom: 4px;
}

.ss-hotelbox .chara .icon-reverse{
    display: none;
background-color: #ff4d4d;
color: #fff;
line-height: 1.3;
}

.ss-hotelbox .chara .icon{
    display: none;
background-color: #fff;
color: #ff4d4d;
line-height: 1.3;
}
.ss-hotelbox .hotel-price a span.details em.duration { font-style: normal; display: block; padding: 5px 0; font-size: 14px !important;}
.ss-hotelbox .hotel-price a span.details img { display: block; position: absolute;top:-10px; left:1%; width: 20%;}
.ss-hotelbox img.pointX { display: none; position: absolute; left: 10px; width: 60px;}
.swiper-container.dpplan { margin-bottom: 16px !important;}
.ss-hotelbox a.link { display: block; padding-bottom: 16px; text-align: center; font-weight: normal; font-size: 13px;}

#search-box { border: 0; padding: 0;}
#search-box p.searchSubmit { padding: 0 !important;}
#search-box p.searchSubmit a { background:#e5382a !important; text-indent: 0; margin-bottom: 10px;}
#search-box p.searchSubmit a:hover { color: #fff !important;}
#search-box p.searchSubmit a:after { display: none !important;}
#search-box #overseas-search-box .searchCategory li{ width: 30% !important;}
#search-box .searchNavi { padding: 10px !important;}
#search-box .searchNavi li.on label { background: #42ADC5 !important;border: 1px solid #42ADC5 !important;}
#search-box #overseas-search-box .searchCategory li.on:after { top: 60px !important; border-top-color: #42ADC5 !important;}
#search-box.verB.test #searchForeignSwitchArea3 dl.fltDl dd { margin: 0 !important; padding: 0 !important;}
#search-box dl.structure.fltDl.heya .dmArea:before{ display: none !important;}
#search-box dl.structure.fltDl.heya .dmArea span.sp { margin-top: 25px !important;}
#search-box dl.structure.fltDl.heya select { margin-top: 0 !important;}
.searchNavi li span.dp {
    background: url(https://img.travel.rakuten.co.jp/kaigai/special/summer/202305/images/srch_tour.png) no-repeat center !important;
    background-size:35px !important;
}
.searchNavi li span.hotel {
    background: url(https://img.travel.rakuten.co.jp/kaigai/special/summer/202305/images/srch_htl.png) no-repeat center !important;
    background-size:35px !important;
}
.searchNavi li.on span.dp {
    background: url(https://img.travel.rakuten.co.jp/kaigai/special/summer/202305/images/srch_tour_w.png) no-repeat center !important;
    background-size:35px !important;
}
.searchNavi li.on span.hotel {
    background: url(https://img.travel.rakuten.co.jp/kaigai/special/summer/202305/images/srch_htl_w.png) no-repeat center !important;
    background-size:35px !important;
}


.pagetop {
    width: 112px;
    position: fixed;
    right:0 !important;
    bottom: 0 !important;
    font-size: 0;
    z-index: 1;
    }
    .pagetop a {
    background-color: #42ADC5;
    border-radius: 5px 5px 0 0;
    display: block;
    line-height: 0;
    font-size: 0;
    height: 35px;
    right: 12px;
    position: relative;
    }
    
    .pagetop a::after {
    display: block;
    position: absolute;
    top: 50%;
    right: 50%;
    width: 10px;
    height: 10px;
    margin-top: -2px;
    margin-right: -7px;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    content: "";
    
    }

    .ss-hotelbox .chara .icon.HA { display: inline-block !important; background-color: #463C8F; border-color: #463C8F; color: #fff;}