img { image-rendering: -webkit-optimize-contrast; }
#topBnrBox { width: 100%; height: 460px; display: flex; justify-content: center; align-items: center; margin-bottom: 0; background:#FFFAE8 url(../images/KvBg.png) center center no-repeat; background-size: cover; padding: 0; }
#topBnrBox h1{ text-align: center;}
#topBnrBox h1 img { width: 90%; max-width:1330px }
.ss-contents {font-family: 'Noto Sans JP', sans-serif; }
.ss-center { max-width: none; overflow: hidden;}
.ss-container { width: 100%; max-width: 1280px; margin: 40px auto 0; border: 0; }

.bgorange { background: #FFF4E9; padding: 60px 0; position: relative; }
.bgorange .ss-container { margin-top: 24px; }
.bggreen { background: #E8FEE8; padding: 60px 0; position: relative; }
.bggreen .ss-container { margin: 0 auto; padding: 0; background: none;}

#ETR{ margin-top: 30px; padding-top: 0;}
.termBox { width: 720px; margin: 0 auto 32px; font-size: 16px; line-height: 1.7; text-align: left; }
.termBox p { margin-top: 8px; line-height: 160%; }
.termBox p em{font-style: normal; font-size: 80%; line-height: 1.2; display: block; padding-top: 0; margin-top: 4px; }
.termBox p em:first-of-type { margin-top: 10px; }
.termBox span { border-radius: 3px; border: 1px solid #333; text-align: center; font-size: 14px; padding: 3px 8px; display: inline-block; margin-right: 10px;}

.campBox{ margin: 24px auto; width: 280px;}
.campBox a,.pLink a{text-decoration: none !important; color: #333 !important;}
.campBox a:hover,.pLink a:hover{opacity: 0.6 !important;}
.campBox .jds_detialPopUp { margin: 0 4px; background: #eaeaea; border-radius: 4px; padding: 8px 12px; font-size: 12px; color: #333; text-decoration: none !important; }
.entryLink { margin: 0 4px; background: #eaeaea; border-radius: 4px; padding: 8px 12px; font-size: 12px; color: #333; text-decoration: none !important; }
.entryLink:after { position: absolute; content: url(https://img.travel.rakuten.co.jp/camp/mobile/202207/images/iconOpen.png); margin-left: 20px; }

.black{width:100%; height:100%; background:rgba(0,0,0,.5); position:fixed; top:0; left:0; z-index:99999998}
.popUpplan{ width:1000px; position: fixed; left:calc(50% - 500px); top:10% !important; background:#fff; z-index:99999999; border-radius:12px}
.popUpplan p{padding:20px 40px; color:#000; font-size:15px; line-height:1.6; max-height: 600px; overflow:auto}
.popUpplan span{display:block; position:absolute; cursor:pointer; right:-10px; top:-10px; width:30px; height:30px; text-indent:-9999999px; background:url(https://img.travel.rakuten.co.jp/special/goto/202007-3/images/close_icon.png) no-repeat;background-size:30px 30px}
.popUpplan h2{background: #4B9BDC; color:#fff; text-align: center; font-size: 20px; padding: 5px 0 3px; margin-bottom: 10px;}
.popUpplan h2.pink { background: #FF008C; }
.popUpplan > p#popUpplan { overflow-y: auto !important; }
.campAt_con dt{ font-weight: bold; font-size: 16px; margin-top: 16px;}
.campAt_con dd{ font-size:14px; margin-top: 8px;}

.tosearchbtn { text-align: center; margin: 0 auto; }
.tosearchbtn a { display: inline-block; width: 640px; height: 80px; background: #00B900; box-shadow: 0px 3px 6.699999809265137px 1px rgba(0, 0, 0, 0.25); border-radius: 100px; color: #fff; font-size: 24px; font-weight: bold; text-decoration: none; line-height: 80px; text-align: center; transition: all 0.3s ease; position: relative;}
.tosearchbtn a:after { content: ''; position: absolute; right: 30px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 20px solid #fff; }
.tosearchbtn a:hover { opacity: 0.8; transform: translateY(-2px); box-shadow: 0px 5px 10px 2px rgba(0, 0, 0, 0.2); }

/* ==============================
    Flowchart Section
============================== */
.flowchart-wrapper { background: #fff; border-radius: 16px; box-shadow: 0 0 16px rgba(0, 0, 0, 0.08); padding: 40px 40px 28px; max-width: 880px; margin: 0 auto;  box-sizing: border-box; text-align: center; }
.flowchart-header { text-align: center; margin-bottom: 24px; }
.flowchart-sparkle { display: block; margin: 0 auto 15px; }
.flowchart-bubble-container { display: inline-block; position: relative; filter: drop-shadow(2px 2px 8px rgba(0, 0, 0, 0.20)); }
.flowchart-bubble { background: #FFDF5B; border-radius: 8px; padding: 14px 40px 16px; text-align: center; }
.flowchart-bubble-tail { position: absolute; right: 76px; bottom: -35px; }
.flowchart-bubble-subtitle { display: block; margin: 0 auto 6px; width: 164px; height: 22px; }
.flowchart-bubble-subtitle text { fill: #333333;  font-size: 22px; font-weight: bold; letter-spacing: 0em; }
.flowchart-bubble-title { font-size: 28px; font-weight: 700; color: #333; margin: 0; line-height: 1.4; white-space: nowrap; }
.flowchart-q-img1{ margin-top: -44px;}
.flowchart-q-img2{ margin-top: -31px;}
.flowchart-q-img .pc { width: 100%; display: block; border-radius: 8px; margin: 8px auto 0; }
.flowchart-between-row { display: flex; align-items: stretch; justify-content: center; gap: 50px; min-height: 280px; width: 720px; margin: 0 auto; }
.flowchart-final-row { display: flex; justify-content: center; align-items: center; gap: 50px; width: 720px; margin: 0 auto; }
.flowchart-path-col { min-width: 260px; }
.flowchart-path-col--continue { position: relative; padding: 0; margin-top: -40px;}
.flowchart-path-col--continue::before { content: ''; position: absolute; top: 0; bottom: 20px; left: 50%; width: 3px; background: #999; transform: translateX(-50%); }
.flowchart-path-col--continue::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 20px solid #999; }
.flowchart-arrow-down { width: 3px; height: 80px; background: #999; position: relative; margin: -40px auto 20px; }
.flowchart-arrow-down::after { content: ''; position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 20px solid #999; }
.flowchart-rec-card { width: 100%; max-width: 260px; border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.flowchart-rec-card--blue { border: 2px solid #15A0E6; }
.flowchart-rec-card--red { border: 2px solid #BF0000; }
.flowchart-rec-card-inner { border-radius: 6px; padding: 18px 16px 20px; display: flex; flex-direction: column; align-items: center; margin: 6px; }
.flowchart-rec-card--blue .flowchart-rec-card-inner { background: #15A0E6; }
.flowchart-rec-card--red .flowchart-rec-card-inner { background: #BF0000; }
.rec-service-name { color: #fff; font-size: 22px; font-weight: 700; line-height: 1; margin: 0; text-align: center; }
.rec-recommend-label { color: #fff; font-size: 19px; font-weight: 500; line-height: 1; margin: 8px 0 14px; text-align: center; }
.rec-description { background: #fff; border-radius: 100px; padding: 6px 12px; text-align: center; font-size: 14px; font-weight: 500; line-height: 1.6; width: 90%; }
.rec-description--blue { color: #15A0E6; font-weight: bold; }
.rec-description--red { color: #BF0000; font-weight: bold; }
.flowchart-note { font-size: 12px; color: #333; margin: 8px 0 0; text-align: left;}

/* ====== Ribbon Navigation Links ====== */
.ribbon-nav-item { margin: 0 auto; display:flex; align-items: center; gap: 12px; background: #00B900; color: #fff; font-size: 22px; font-weight: 700; text-decoration: none; padding: 15px 64px; clip-path: polygon(0% 0%, 100% 0%, calc(100% - 24px) 50%, 100% 100%, 0% 100%, 24px 50%); white-space: nowrap;  transition: opacity 0.2s ease; width: 380px; justify-content: center; }
.ribbon-nav-icon { flex-shrink: 0; }

/* ====== Campaign Banner Section ====== */
#CAMP { max-width: 1000px; margin: 0 auto; }
.camp-service-heading-wrapper { text-align: center; }
.camp-service-heading { display: inline-block; font-size: 22px; font-weight: 700; color: #333; margin: 24px 0 16px; padding-bottom: 6px; }
.camp-service-heading--rentacar { border-bottom: 4px solid #15A0E6; }
.camp-service-heading--carshare { border-bottom: 4px solid #BF0000; }
.camp-banner-row { display: flex; gap: 48px; align-items: center; margin-bottom: 24px; }
.camp-banner-item { flex: 1 1 0; box-sizing: border-box; }
.camp-banner-item a .camp-banner-item img{ display: block; width: 100%; height: auto; }
.camp-banner-item img { width: 100%; height: auto;}

.jdsTab{ margin: 32px auto 0;}
.jdsTabNav { display: flex; gap: 10px; margin-bottom: 24px; }
.jdsTabNav li{ font-size: 14px; font-weight: bold; color: #fff; background: #666 url(https://img.travel.rakuten.co.jp/cars/campaign/cross/carshare/images/icon4.svg) center 12px no-repeat; border-radius: 5px; text-align: center; padding: 46px 0 8px; width: 120px; position: relative; cursor: pointer;}
.jdsTabNav li.carshare{ background: #666 url(https://img.travel.rakuten.co.jp/cars/campaign/cross/carshare/images/icon5.svg) center 12px no-repeat;}
.jdsTabNav li.active { background-color: #15A0E6; }
.jdsTabNav li.active::after { content: ''; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid #15A0E6; }
.jdsTabNav li.carshare.active { background-color: #BF0000; }
.jdsTabNav li.carshare.active::after { border-top-color: #BF0000; }

.search-container{ width: 768px; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 24px; padding-bottom: 40px; text-align: center;}
.search-text{ font-size: 24px; font-weight: bold; text-align: center;}
.spot-search-button { color: #ffffff; text-decoration: none; cursor: pointer; }
.location-button { background-color: #BF0000; color: #ffffff; border: none; margin: 0 10px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; height: auto; font-size: 20px; font-weight: bold; border-radius: 6px; width: 215px; height: 45px; text-decoration: none; }
.location-button img { vertical-align: middle; width: 15px; }
.area-search-button-wrapper { text-align: center; position: relative; }
.area-search-button { display: inline-flex; align-items: center; justify-content: center; background-color: #BF0000; color: #ffffff !important; text-decoration: none; cursor: pointer; width: 480px; height: 58px; font-size: 20px; font-weight: bold; border-radius: 6px; position: relative; }
.area-search-button img{ width: 22px; padding: 0 8px;}
.area-search-button img:last-child { width: 12px; }
.spot-search-button:hover, .location-button:hover, .area-search-button:hover { opacity: 0.8; }

.bnr-swiper{ width:100%; max-width: 1280px; margin: 10px auto 24px; overflow: hidden; padding-bottom: 12px;}


/* ====== Footer Section ====== */
#pointcpn_footer ul {
    max-width: 100%; 
    width: 100%; 
    box-sizing: border-box;
}

#pointcpn_footer ul li img.pc {
    max-width: 100%;
    height: auto;
    display: block; 
}