@charset "utf-8";

/*
 * CSS for PC
 * @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 center top #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%;}

.sp { display: none !important;}

p.tip { margin: 48px auto; font-size: 14px; color: #777777; line-height: 18px;font-weight: 300;}
#widewrapper a:hover { text-decoration: none !important; opacity: 0.85;}

#keyVisual { width: 100%; height: 337px;display: flex; justify-content: center; align-items: center; margin: 0; padding: 0; overflow: hidden; background: url(https://img.travel.rakuten.co.jp/kaigai/special/summer/202305/images/kv_pc_bg.jpg) center center no-repeat; background-size:cover;}
#keyVisual h1 { display: block; margin: 0; padding: 0; text-indent: 0; }
#keyVisual img{ display: block; width: auto;}

nav    { display: block; width: 100%; overflow: hidden; box-shadow: 0 0 8px #C4C4C4; background: #fff;z-index: 999;}
nav ul { width: 950px; margin: 24px auto; 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: 24px; font-weight: bold; color: #626262 !important;}
nav ul li span { display:block; position: relative; padding:16px 0; font-size: 18px;}
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 25% 50%;}
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 20% 50%;}
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 25% 50%;}


section { width:1200px; overflow: hidden; margin: 48px auto 0; padding: 48px 0 0; position: relative;}
h2.title { display: block; padding-left: 48px; font-size: 36px;}
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;}
#SALEbox h2.title { background: url(https://img.travel.rakuten.co.jp/kaigai/special/summer/202305/images/icon_salel.png) no-repeat left center;}
#SEARCHbox h2.title { background: url(https://img.travel.rakuten.co.jp/kaigai/special/summer/202305/images/icon_searchl.png) no-repeat left center;}


#search-box { border: 0; padding: 0; background: none !important;}
#search-box .searchCategory{ background: none !important;}
#search-box.verB .number ul li.child a { width: 20px; display: inline-block;}
#search-box p.searchSubmit { padding: 0 !important;}
#search-box p.searchSubmit a { background:#e5382a !important; text-indent: 0;}
#search-box p.searchSubmit a:hover { color: #fff !important;}
#search-box #overseas-search-box .searchCategory li.on { background-color: #42ADC5 !important;}
#search-box #overseas-search-box .searchCategory li.on:after { top: 62px !important; border-top-color: #42ADC5 !important;}
#search-box #overseas-search-box .searchCategory li label img { margin: -12px 0 !important;}
#search-box.verB.test .grey.InpuDateBox, .line.InpuDateBox.clearfix ,#search-box.verB.test .dhAll{ background: #fff;}


.cpnholder    { background: #fff !important; justify-content: center !important; background: none !important;}
.cpnholder>li { min-height: auto !important;}
.cpnholder .btmarea{ padding: 16px 0 0;}
.cpnholder .char   { margin-bottom: 0 !important;}
.cpnholder .char span {padding:2px 0 2px 18px !important;}
.cpLinkwindow { position: absolute; top: 105px; left: 340px; padding: 0; margin: 0;}

ul.jdsTabNav { width: 100%; margin: 0 0 24px; overflow: hidden; display: flex; justify-content: center;}
ul.jdsTabNav li { padding: 16px 40px; font-size: 18px; margin: 8px; text-align: center; font-weight: bold;background: #fff; border: 1px solid #999; border-radius: 4px;}
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: 24px; padding:0 8px 16px; margin: 16px 0 32px; border-bottom: 3px dotted #000;}
.ss-hotelbox { display: block !important; margin-bottom: 16px; overflow: hidden;}
.ss-hotelbox .ss-hotel { width: calc( 23% - 2px); float: left; margin:0 1% 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 0; color: #666;}
.ss-hotelbox .hotel-name {font-size: 16px; font-weight: bold; padding: 0 10px; line-height: 20px; min-height: 88px;}
.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;}
.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% 30%/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: 10px;
      font-size: 24px;
      text-align: right;
      color: #bf0000;
      font-weight: bold;
 }
  
.ss-hotelbox .hotel-price a span.details em { font-size: 16px;}
.ss-hotelbox .jss_popOverInfo { display: none;}
.ss-hotelbox a:hover span.details > .jss_popOverInfo { 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 { display: block; position: relative;}
.ss-hotelbox .price-info:before { display: block; position: absolute; content: ""; bottom: -16px; right: 2px; 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: 0 8px 16px; min-height: 52px;}
.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{
background-color: #ff4d4d;
color: #fff;
line-height: 1.3;
}

.ss-hotelbox .chara .icon{
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%; z-index: -1;}
.ss-hotelbox img.pointX { position: absolute; left: 10px; width: 48px;}
.ss-hotelbox a.link { display: block; padding-bottom: 16px; text-align: center; font-weight: normal; font-size: 14px;}

.pagetop {
width: 112px;
position: fixed;
right: 32px !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: "";

}


.family1 { display: block; position: absolute; top: 848px; left:80px;}
.family2 { display: block; position: absolute;bottom: 700px; right:80px;}

.ss-hotelbox .chara .icon.HA { background-color: #463C8F; border-color: #463C8F; color: #fff;}