@charset "utf-8";
/**
 * style.css 1.0.1
 * Released on: 6,2026
 */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  --blue-deep:#1a5fa8;--blue-mid:#2e89d4;--blue-light:#d6eaf8;--blue-pale:#eaf4fb;
  --teal:#4fb3c8;--teal-light:#d0eef4;--pink:#e8457a;--orange:#f07a2a;
  --yellow:#f9d040;--green:#3aaa6b;--white:#ffffff;
  --gray-bg:#f5f8fc;--gray-text:#555;--text:#333;
  --radius:12px;--radius-lg:10px;--hh:90px;
}
body{font-family:'Noto Sans JP',sans-serif;background:#fff;color:var(--text);font-size:14px;line-height:1.7;}
a{text-decoration:none;color:inherit;}
img{max-width:100%;display:block;}

/* HEADER */
.site-header{
  background:#fff9e8;
  height:var(--hh);display:flex;align-items:center;justify-content:center;
  position:sticky;top:0;z-index:200;box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.pc-nav{display:flex;align-items:center;}
.pc-nav a{
  height:var(--hh);display:flex;align-items:center;
  border-right:1px dashed #b8cfe8;transition:opacity .15s;
  padding:0;
}
.pc-nav a:first-child{border-left:1px dashed #b8cfe8;}
.pc-nav a:hover{opacity:.8;}
.pc-nav a img{width:200px;height:90px;display:block;}

.sp-header-logo{
  display:none;
}
.hamburger-btn{
  display:none;position:absolute;right:14px;top:50%;transform:translateY(-50%);
  background:none;border:none;cursor:pointer;padding:6px;z-index:300;
}
.hamburger-btn span{
  display:block;width:24px;height:2px;background:var(--blue-deep);
  margin:5px 0;border-radius:2px;transition:all .3s;
}
.hamburger-btn.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger-btn.open span:nth-child(2){opacity:0;}
.hamburger-btn.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.sp-drawer{
  display:none;position:fixed;top:var(--hh);right:0;width:260px;
  background:#fff;box-shadow:-4px 0 20px rgba(0,0,0,.15);z-index:190;
  transform:translateX(100%);transition:transform .3s ease;border-top:1px solid #e0eaf5;
}
.sp-drawer.open{display:block;transform:translateX(0);}
.sp-drawer a{
  display:block;padding:14px 20px;font-size:13px;font-weight:700;
  color:var(--blue-deep);border-bottom:1px solid #f0f4f8;transition:background .15s;
}
.sp-drawer a:hover{background:var(--blue-pale);}
.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:180;}
.overlay.open{display:block;}

@media(max-width:768px){
  /* PC画像ナビを隠してハンバーガーを表示 */
  .pc-nav{ display:none; }
  .hamburger-btn{ display:block; }
  .sp-header-logo{
    display: block;
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    max-width: 80%;
    padding-top: 10px;
    padding-bottom: 10px;
  }
    .sp-header-logo img{
    width: 100%;
        
    }
  /* 追従ヘッダー（スクロール後に出現） */
  .site-header{
    position:fixed;
    top:0;left:0;right:0;
    transform:translateY(-110%);
    transition:transform .35s ease;
    height:var(--hh);
  }
  .site-header.sp-visible{
    transform:translateY(0);
  }
}

/* HERO SLIDER
   構造:
   .hero-slider-wrap  → 外枠（overflow:hidden, position:relative）
     .hero-bg-track   → 背景だけがスライド（PC:2枚表示, SP:1枚表示）
       .hero-bg-slide  → 背景色パネル（テキストなし）
     .hero-title-overlay → タイトル画像・テキストは常に中央固定
     .slider-btn / .slider-dots / .hero-waves → 操作UI
*/
/* ヒーロー全体：グリッドで重ね合わせ。高さはタイトル画像+padding が決定 */
.hero-slider-wrap{
  position:relative;overflow:hidden;background:#0d2d5e;
  display:grid;
}

/* ── 背景スライドトラック：グリッド同セルに重ねて高さに追従 ── */
.hero-bg-track{
  grid-row:1;grid-column:1;
  align-self:stretch;
  display:flex;
  transition:transform .6s cubic-bezier(.4,0,.2,1);
  will-change:transform;
}
.hero-bg-slide{
  flex:0 0 50%; /* PC:2枚同時表示 */
  position:relative;
  overflow:hidden;
  background:#0d2d5e;
}
.hero-bg-slide img{
  width:100%;height:100%;object-fit:cover;display:block;
  position:absolute;inset:0;
}

/* ── タイトルオーバーレイ：インフローでheightを支配 ── */
.hero-title-overlay{
    grid-row: 1;
    grid-column: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 5;
    padding: 55px 20px 85px;
    text-align: center;
}
.hero-title-overlay img.title-img{
  max-width:min(760px, 88vw);
  width:100%;
  height:auto;
  pointer-events:auto;
  filter:drop-shadow(0 4px 16px rgba(0,0,0,.5));
}

/* ── スライダー操作UI ── */
.slider-btn{
  position:absolute;top:50%;transform:translateY(-50%);
  background:rgba(255,255,255,.85);border:none;border-radius:50%;
  width:40px;height:40px;font-size:0;cursor:pointer;z-index:10;
  display:flex;align-items:center;justify-content:center;
  padding:0;
  box-shadow:0 2px 8px rgba(0,0,0,.2);transition:background .2s;
}
.slider-btn:hover{background:#fff;}
.slider-btn.prev{left:10px;}
.slider-btn.next{right:10px;}
.slider-btn::before{
  content:'';
  display:block;
  width:10px;height:10px;
  border-top:2px solid var(--blue-deep);
  border-right:2px solid var(--blue-deep);
  flex-shrink:0;
}
.slider-btn.prev::before{ transform:rotate(-135deg) translate(-2px,2px); }
.slider-btn.next::before{ transform:rotate(45deg) translate(-2px,2px); }
.slider-dots{
  position:absolute;bottom:14px;left:50%;transform:translateX(-50%);
  display:flex;gap:6px;z-index:10;
}
.slider-dot{
  width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.5);
  border:none;cursor:pointer;transition:background .2s,transform .2s;padding:0;
}
.slider-dot.active{background:#fff;transform:scale(1.3);}
.hero-waves{position:absolute;bottom:-2px;left:0;width:100%;overflow:hidden;line-height:0;pointer-events:none;z-index:6;}
.hero-waves svg{display:block;width:100%;height:50px;}

/* SP: 1枚表示 */
@media(max-width:768px){
  .hero-bg-slide{flex:0 0 100%;}
  .hero-title-overlay{padding:75px 16px;}
  .hero-title-overlay img.title-img{max-width:min(300px,80vw);}
}

/* BG WRAP（lead + coupon の共通背景） */
.bg-wrap{
    background-position: center -150px;
    background-image: url('../images/common/bg.png');
    background-repeat: repeat-y!important;
    background-size: contain;
}

/* LEAD TEXT */
.lead-section{
  padding:60px 20px;
  text-align:center;
}
.lead-inner{max-width:860px;margin:0 auto;}
.lead-text{
  font-size:clamp(14px,1.8vw,24px);
  line-height:2.2;
  color:var(--text);
  text-align:center;
}
@media(max-width:768px){
  .lead-text{
    text-align:justify;
  }
  br.pc-br{display:none;}
.lead-section{
    padding: 30px 20px 0px;
    text-align: center;
}
}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:6px;padding:10px 26px;border-radius:30px;font-weight:700;font-size:13px;cursor:pointer;transition:all .2s;border:none;}
.btn-pink{background:linear-gradient(135deg,var(--pink),#c0396a);color:#fff;box-shadow:0 4px 12px rgba(232,69,122,.35);}
.btn-pink:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(232,69,122,.45);}
.btn-blue{background:linear-gradient(135deg,var(--blue-mid),var(--blue-deep));color:#fff;box-shadow:0 4px 12px rgba(46,137,212,.35);}
.btn-blue:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(46,137,212,.45);}
.btn-outline{background:#fff;color:var(--blue-deep);border:2px solid var(--blue-deep);}
.btn-outline:hover{background:var(--blue-pale);}

/* 大型ピンクボタン（クーポン・過ごし方 共通） */
.btn-lg-pink{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  width:100%;max-width:680px;margin:0 auto;
  padding:20px 48px;
  background:#ff6ba4;color:#fff!important;
  font-size:20px;font-weight:700;
  border-radius:10px;border:none;cursor:pointer;
  transition:background .2s;
  text-decoration:none;
}
.btn-lg-pink::after{
  content:'›';
  position:absolute;
  right:10px;top:45%;
  transform:translateY(-50%);
  color:#fff;font-size:30px;
  line-height:1;z-index:1;
}
.btn-lg-pink:hover{background:#ff1e64;}

/* SECTIONS */
.section-label{display:inline-flex;align-items:center;gap:6px;background:var(--blue-deep);color:#fff;font-size:11px;font-weight:700;padding:3px 14px;border-radius:20px;margin-bottom:8px;}
.section-title{font-family:'Noto Serif JP',serif;font-size:clamp(19px,3.5vw,27px);font-weight:700;color:var(--blue-deep);display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:22px;}
.wave-top{display:block;width:100%;overflow:hidden;line-height:0;margin-bottom:-1px;}
.wave-top svg{display:block;width:100%;}

/* COUPON */
.coupon-section{
    padding: 56px 20px 40px;
    text-align: center;
}
.coupon-inner{max-width:1200px;margin:0 auto;}
.coupon-title-img{margin-bottom:40px;}
.coupon-title-img img{max-width:80%;height:auto;margin:0 auto;}
.coupon-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin:0 auto 36px;
  align-items:start;
}
.coupon-card img{width:100%;height:auto;display:block;}
.coupon-offset{margin-top:40px;}
.coupon-btn-wrap{text-align:center;}
@media(max-width:1024px){
  .coupon-grid{grid-template-columns:repeat(2,1fr);}
  .coupon-offset{margin-top:0;}
}
@media(max-width:600px){
.coupon-grid{grid-template-columns:1fr;}
.coupon-title-img{margin-bottom:0px;}
.sp-hide{ display:none !important; }
}
@media(max-width:768px){
.coupon-title-img img{max-width:100%;height:auto;margin:0 auto;}
.coupon-section{
    padding: 56px 20px 0px;
    text-align: center;
}

.spend-card-body .btn-lg-pink{
  padding:15px 30px;
  font-size:18px;font-weight:700;
}
    
}

/* SPEND */
.spend-section{
  background-color:#ceeef7;
  background-image:url('../images/contents/bg.png');
  background-repeat:repeat;
  text-align:center;
    padding: 40px 0px 40px;
}


/* wave dividers（インラインSVG） 共通 */
.spend-wave-top,.hotel-wave-top{
    display: block;
    width: 100%;
    height: 250px;
    background-color: #ceeef7;
    background-image: url('../images/contents/bg.png');
    background-repeat: repeat;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 150' preserveAspectRatio='none'%3E%3Cpath d='M0,100 C120,60 240,140 360,100 C480,60 600,140 720,100 C840,60 960,140 1080,100 C1200,60 1320,140 1440,100 L1440,150 L0,150 Z' fill='white'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 150' preserveAspectRatio='none'%3E%3Cpath d='M0,100 C120,60 240,140 360,100 C480,60 600,140 720,100 C840,60 960,140 1080,100 C1200,60 1320,140 1440,100 L1440,150 L0,150 Z' fill='white'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    margin-bottom: -2px;
}
.spend-wave-bottom,.hotel-wave-bottom{
    display: block;
    width: 100%;
    height: 250px;
    background-color: #ceeef7;
    background-image: url('../images/contents/bg.png');
    background-repeat: repeat;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 150' preserveAspectRatio='none'%3E%3Cpath d='M0,50 C120,90 240,10 360,50 C480,90 600,10 720,50 C840,90 960,10 1080,50 C1200,90 1320,10 1440,50 L1440,0 L0,0 Z' fill='white'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 150' preserveAspectRatio='none'%3E%3Cpath d='M0,50 C120,90 240,10 360,50 C480,90 600,10 720,50 C840,90 960,10 1080,50 C1200,90 1320,10 1440,50 L1440,0 L0,0 Z' fill='white'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    margin-top: -2px;
}
.spend-wave-top svg,.spend-wave-bottom svg,
.hotel-wave-top svg,.hotel-wave-bottom svg{
    display: block;
    width: 100%;
    height: 100%;
}
@media(max-width:768px){
    .spend-wave-top,.hotel-wave-top{
    display: block;
    width: 100%;
    height: 100px;
}
.spend-wave-bottom,.hotel-wave-bottom{
    display: block;
    width: 100%;
    height: 100px;
}
    
}

.spend-inner{max-width:1200px;margin:0 auto;padding:40px 20px 56px;}
.spend-section-title{margin-bottom:28px;}
.spend-section-title img{max-width:80%;height:auto;margin:0 auto;}
.spend-note{font-size:12px;color:var(--gray-text);margin:-8px 0 28px;}
.spend-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
}
.spend-card{
  background:#92b8e2;border-radius:var(--radius-lg);
  overflow:hidden;
  text-align:left;display:flex;flex-direction:column;
}
.spend-card-head{
    flex-shrink: 0;
    margin-left: auto;
    margin-right: auto;
    padding-top: 20px;
    padding-bottom: 20px;
}
.spend-card-head img{
    width: 100%;
    height: auto;
    display: block;
    max-width: 300px;
}
/* 白い内側エリア（写真 + 本文） */
.spend-card-inner{
  background:#fff;
  margin:0 10px 10px;
  border-radius:0 0 calc(var(--radius-lg) - 4px) calc(var(--radius-lg) - 4px);
  overflow:hidden;
  flex:1;display:flex;flex-direction:column;
}
.spend-card-photo {
    padding-top: 15px;
    padding-left: 15px;
    padding-right: 15px;
}

.spend-card-photo img{width:100%;height:auto;display:block;}
.spend-card-body{padding:16px;flex:1;display:flex;flex-direction:column;}
.spend-card-main{
    background: #e8f2ff;
    color: #333;
    font-weight: 700;
    text-align: center;
    font-size: 24px;
    line-height: 1.2;
    padding-top: 20px;
    padding-bottom: 20px;
    border-radius: 8px;
    margin-bottom: 14px;
}
.spend-card-main small{font-size:80%;font-weight:400;color:var(--gray-text);}
.spend-card-notes{
  list-style:none;font-size:16px;color:var(--gray-text);
  line-height:1.9;margin-bottom:20px;flex:1;
}
.spend-card-notes li+li{margin-top:4px;}
@media(max-width:768px){
.spend-grid{
    width: 95%;
    grid-template-columns: 1fr;
    margin-left: auto;
    margin-right: auto;
}
.spend-inner{max-width:1200px;margin:0 auto;padding:0px 20px 56px;}
.spend-section-title{margin-bottom:28px;}
.spend-section-title img{max-width:100%;height:auto;margin:0 auto;}
    .spend-section{
    padding: 40px 0px 0px;
}

.spend-card-head img{
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}
   .spend-card-notes{
font-size:14px;color:var(--gray-text);
  line-height:1.4;margin-bottom:20px;flex:1;
}
.spend-card-main{
    font-size: 20px;
    line-height: 1.2;
}
}

/* HOTELS */

/* HOTEL SLIDER */
/* HOTELS */
.hotel-section{
  background-color:#ceeef7;
  background-image:url('../images/contents/bg.png');
  background-repeat:repeat;
  text-align:center;
    padding: 80px 0px 80px;
}
/* hotel-wave は上の共通スタイルに統合 */
.hotel-inner{max-width:1200px;margin:0 auto;padding:00px 20px 56px;}
.hotel-section-title{margin-bottom:32px;}
.hotel-section-title img{max-width:80%;height:auto;margin:0 auto;}
.hotel-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
  margin-bottom:36px;
  text-align:left;
}
@media(max-width:768px){.hotel-grid{grid-template-columns:1fr;}


.hotel-inner{max-width:1200px;margin:0 auto;padding:0px 20px 0px;}
.hotel-section-title{margin-bottom:32px;}
.hotel-section-title img{max-width:100%;height:auto;margin:0 auto;}
    
}
/* カード */
.hotel-card{
  background:#fff;border-radius:15px;
  box-shadow:0 4px 20px rgba(0,0,0,.12);
  overflow:hidden;position:relative;
  display:flex;flex-direction:column;
}
.hotel-card-top{
  position:relative;
  padding:10px 16px 8px;
  text-align:center;
}
.yumepa-icon{
  position:absolute;top:6px;left:8px;
  width:120px;height:auto;z-index:2;
}
.hotel-area{
    font-size: 26px;
    color: #333;
    font-weight: 700;
    padding-top: 10px;
    padding-bottom: 5px;
}
.hotel-name{
    background: #45b035;
    color: #fff;
    font-size: 35px;
    font-weight: 700;
    text-align: center;
    padding-top: 15px;
    padding-bottom: 15px;
}
/* カード内画像スライドショー */
.hotel-card-img-slider{
    position: relative;
    overflow: hidden;
    margin: 20px 25px 8px;
    border-radius: 10px;
    aspect-ratio: 11/7;
}
.hotel-card-img-track{
  display:flex;height:100%;
  transition:transform .5s cubic-bezier(.4,0,.2,1);
  will-change:transform;
}
.hotel-card-img-frame{
  flex:0 0 100%;height:100%;overflow:hidden;
}
.hotel-card-img-frame img{
  width:100%;height:100%;object-fit:cover;display:block;
}
/* 矢印ボタン（黒丸・白矢印） */
.himg-btn{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,.6);
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    font-size: 0;
    cursor: pointer;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background .15s;
}
.himg-btn::before{
    content:'';
    display:block;
    width:7px;height:7px;
    border-top:2px solid #fff;
    border-right:2px solid #fff;
    flex-shrink:0;
}
.himg-btn.hp::before{ transform:rotate(-135deg) translate(-1px,1px); }
.himg-btn.hn::before{ transform:rotate(45deg) translate(-1px,1px); }
.himg-btn:hover{background:rgba(0,0,0,.85);}
.himg-btn.hp{left:6px;}
.himg-btn.hn{right:6px;}
/* ドット */
.himg-dots{
  position:absolute;bottom:6px;left:50%;transform:translateX(-50%);
  display:flex;gap:4px;z-index:4;
}
.himg-dot{
  width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.55);
  border:none;cursor:pointer;transition:background .2s;padding:0;
}
.himg-dot.active{background:#fff;}
/* カード本文 */
.hotel-card-body{padding:0 25px 25px;flex:1;display:flex;flex-direction:column;}
.hotel-desc{
    line-height: 1.9;
    font-size: 16px;
    color: #333;
    text-align: justify;
    margin-bottom: 16px;
    flex: 1;
    font-feature-settings: "palt"!important;
}
/* 全体「もっと見る」ボタンラップ */
.hotel-btn-wrap{text-align:center;}
/* オレンジボタン */
.btn-lg-orange{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  width:100%;max-width:680px;margin:0 auto;
  padding:20px 48px;
  background:#ff9e00;color:#fff!important;
  font-size:20px;font-weight:700;
  border-radius:50px;border:none;cursor:pointer;
  transition:background .2s;text-decoration:none;
}

.btn-lg-orange::after{
  content:'\203A';position:absolute;
  right:20px;top:50%;transform:translateY(-50%);
  color:#fff;font-size:22px;line-height:1;z-index:1;
}
.btn-lg-orange:hover{background:#e08800;}
/* 青ボタン（プランをもっと見る） */
.btn-lg-blue{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  width:100%;max-width:680px;margin:0 auto;
  padding:20px 48px;
  background:#0071d4;color:#fff!important;
font-size:clamp(13px,4.2vw,20px);    
font-weight:700;
  border-radius:10px;border:none;cursor:pointer;
  transition:background .2s;text-decoration:none;
}
.btn-lg-blue::after{
  content:'\203A';position:absolute;
  right:20px;top:50%;transform:translateY(-50%);
  color:#fff;font-size:22px;line-height:1;z-index:1;
}
.btn-lg-blue:hover{background:#0056a0;}

@media(max-width:1030px){
.hotel-name{
    font-size: 24px;
}
}

@media(max-width:768px){
.hotel-name{
    font-size: 30px;
}
.hotel-card{
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}
}
@media(max-width:580px){
.hotel-name{
    font-size: 24px;
}
.hotel-card{
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}
    .hotel-desc{
    line-height: 1.6;
    font-size: 14px;
}
.hotel-area{
    font-size: 20px;
}
.yumepa-icon{
  position:absolute;top:6px;left:8px;
  width:100px;height:auto;z-index:2;
}
}
@media(max-width:420px){
.hotel-name{
    font-size: 20px;
}
.hotel-card{
    width: 95%;
    margin-left: auto;
    margin-right: auto;
}
    .hotel-desc{
    line-height: 1.6;
    font-size: 14px;
}
.hotel-area{
    font-size: 16px;
}
.yumepa-icon{
  position:absolute;top:6px;left:8px;
  width:80px;height:auto;z-index:2;
}   .btn-lg-orange{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  width:100%;max-width:680px;margin:0 auto;
  padding:10px 28px;
  background:#ff9e00;color:#fff!important;
  font-size:16px;font-weight:700;
  border-radius:20px;border:none;cursor:pointer;
  transition:background .2s;text-decoration:none;
}
}
/* MAP */
.map-section{
  text-align:center;
  padding:40px 20px 40px;
}
.map-inner{max-width:1300px;margin:0 auto;}
.map-section-title{margin-bottom:32px;}
.map-section-title img{max-width:80%;height:auto;margin:0 auto;display:block;}
/* 外枠フレーム（最大1300px、背景#eff8fe） */
.map-frame{
  max-width:1300px;
  margin:0 auto;
  background:#eff8fe;
  border-radius:16px;
  padding:24px;
  box-sizing:border-box;
}
/* スクロールラッパー（画像が収まらない場合は横スクロール） */
.map-scroll-wrap{
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  border-radius:10px;
}
.map-img{
  display:block;
  width:1418px; /* 実寸固定：SP でも縮小せずスクロール */
  height:auto;
  border-radius:10px;
  min-width:1100px;
}
/* スポットラッパー（マーカー絶対配置の基準） */
.map-spot-wrapper{
  position:relative;
  display:inline-block;
  line-height:0;
  min-width:1100px;
  width:100%;
}
/* スポット名ボタン（地図上に絶対配置） */
.map-spot-marker{
  position:absolute;
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
  transform:translate(-50%,-50%);
  z-index:5;
  transition:transform .15s;
}
.map-spot-marker:hover{transform:translate(-50%,-50%) scale(1.08);}
/* imgはbuttonの高さに追従・横は自動（アスペクト比維持） */
.map-spot-marker img{
    display: block;
    height: 100%;
    width: auto;
}
/* ---- 個別サイズ（buttonにheight固定 → 端でも欠けない） ---- */
.mname01,
.mname02,
.mname03,
.mname04,
.mname05,
.mname06,
.mname08,
.mname09,
.mname10,
.mname11,
.mname12,
.mname13,
.mname14,
.mname15,
.mname16{height: 40px;box-shadow: 0 0 8px gray;} /* 地蔵湯                      95px */
.mname17{height: 65px;box-shadow: 0 0 8px gray;} /* 西村屋ホテル招月庭         139px */
.mname18{
    box-shadow: 0 0 8px gray;
    height: 66px!important;
    width: 197px!important;
} /* 川口屋城崎リバーサイドホテル 192px */
.mname19{height: 41px;box-shadow: 0 0 8px gray;} /* 山本屋                      89px */
.mname20{height: 40px;box-shadow: 0 0 8px gray;} /* ホテル金波楼               138px */

@media(max-width:768px){
  .mname01,.mname02,.mname03,.mname04,.mname05,.mname06,
  .mname08,.mname09,.mname10,.mname11,.mname12,.mname13,
  .mname14,.mname15,.mname16,.mname17,.mname18,.mname19,.mname20{
    transform: translate(-50%,-50%) scale(0.9);
  }
.map-section{
  text-align:center;
  padding:0px 20px 0px;
}
.map-section-title img{max-width:100%;height:auto;margin:0 auto;display:block;}
.map-frame{
  max-width:1300px;
  margin:0 auto;
  background:#eff8fe;
  border-radius:8px;
  padding:0px;
  box-sizing:border-box;
}
    
}
/* ScrollHint アイコンをマーカーより前面に */
.scroll-hint-icon-wrap{ z-index:10; }

/* ====== SPOT POPUP ====== */
.spot-popup-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);
  z-index:10000;
  align-items:center;
  justify-content:center;
  padding:16px;
}
.spot-popup-overlay.is-active{ display:flex; }
body.popup-open{ overflow:hidden; }

.spot-popup-content{
  position:relative;
  width:100%;
  max-width:680px;
  animation:popupIn .25s ease;
  max-height:90vh;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
@keyframes popupIn{
  from{opacity:0;transform:scale(.92);}
  to{opacity:1;transform:scale(1);}
}
.spot-popup-close{
  position:absolute;
  top:10px;right:10px;
  background:rgba(255,255,255,.9);
  border:none;border-radius:50%;
  font-size:20px;line-height:1;
  cursor:pointer;color:#333;
  z-index:20;
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,.3);
}

/* new_popup カード */
.new_popup{
  font-size:0; /* 画像間の隙間を消す */
  width:100%;
}
.new_popup-top{
  width:100%;
  display:block;
}
.new_popup-body{
  width:100%;
  background-image:url('../images/map/map_spot_body.png');
  background-repeat:repeat-y;
  background-size:100% auto;
  padding:0% 10% 4%;
  font-size:16px;
}
.new_popup-body p{
  font-size:clamp(16px,2.5vw,20px);
  line-height:2;
  color:#333;
  margin-bottom:clamp(16px,3vw,28px);
}
.new_popup-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  width:100%;
  padding:clamp(15px,2.2vw,25px) 20px;
  border-radius:8px;
  font-size:clamp(16px,2.6vw,20px);
  font-weight:bold;
  color:#fff!important;
  text-decoration:none;
  letter-spacing:.06em;
  line-height:1.2;
  transition:opacity .2s;
}
.new_popup-btn:hover{ opacity:.85; }
.new_popup-btn .arrow{
  position:absolute;
  right:clamp(14px,2.5vw,22px);
  font-size:1.3em;line-height:1;
}
.btn-pink{ background:#f07ab0; }
.btn-navy{ background:#2d3380;font-size:clamp(14px,2.2vw,18px); }
.new_popup_nimotsu{
    display: inline-block;
    background-color: #D6D6D6;
    color: #000;
    font-weight: bold;
    font-size: clamp(14px,1.8vw,18px);
    padding: 3px 14px;
    border-radius: 3px;
    margin: 12px 0 8px;
    letter-spacing: .05em;
    width: 100%;
    text-align: center!important;
}
.new_popup-bottom{
  width:100%;
  display:block;
}
.spot-popup-footer{ margin-top:0; }
    
/* NEWS / 注目情報 */
.news-section{
  text-align:center;
  padding: 0px 20px 150px;
}
.news-inner{max-width:1200px;margin:0 auto;}
.news-section-title{margin-bottom:32px;}
.news-section-title img{max-width:80%;height:auto;margin:0 auto;}

/* ── 夢花火カード ── */
.firework-card{
  background:
    url('../images/information/firework_bg.png') no-repeat top right / auto 100%,
    linear-gradient(45deg,#13004b,#000083,#13004b);
  border-radius:16px;overflow:hidden;color:#fff;
  margin:0 auto 28px;
}
.firework-header{
  padding:32px 32px 24px;
  min-height:200px;
  text-align:left;
}
.firework-title-img{max-width:55%;height:auto;display:block;margin-bottom:16px;}
.firework-lead{font-size:24px;line-height:2;color:#fff;}
.firework-cal-wrap{
  background:rgba(255,255,255,.97);
  margin:0 40px 40px;border-radius:5px;
  padding:10px;color:#333;
}
/* カレンダー */
.firework-cal{width:100%;border-collapse:collapse;table-layout:fixed;}
.firework-cal th{
  background:#aaa;color:#fff;
  padding:7px 2px;font-size:14px;font-weight:700;text-align:center;
}
.firework-cal th.cal-sun{background:#e03030;}
.firework-cal th.cal-sat{background:#3360cc;}
.firework-cal td{
  border:1px solid #ddd;padding:6px 4px;
  font-size:13px;vertical-align:top;height:56px;
}
.firework-cal td.cal-sun{background:#ffe8e8;}
.firework-cal td.cal-sat{background:#ddeaff;}
.cal-date{
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: #333;
    text-align: left;
    padding: 2%;
}
.firework-cal td.cal-sun .cal-date{color:#e03030;}
.firework-cal td.cal-sat .cal-date{color:#3360cc;}
.cal-hanabi{
    display: block;
    font-size: 30px;
    color: #e8457a;
    text-align: center;
    font-weight: 700;
    margin-top: 2px;
    padding-bottom: 15px;
}
.cal-mark-star{color:#e05a00;font-size:13px;}
.cal-mark-dia {color:#e05a00;font-size:13px;}
.cal-legend-day{
    font-size: 18px;
    margin-top: 5px;
    margin-bottom: 10px;
    color: #666;
    text-align: left;
    font-weight: bold;
}
.cal-legend{font-size:12px;margin-top:10px;color:#555;text-align:left;}
.firework-btn-wrap{padding:0 20px 24px;}

/* ── ゆめぱカード ── */
.yumepa-info-card{
  background:#ff9e00;
  border-radius:16px;overflow:hidden;
  margin:0 auto;text-align:left;
}
.yumepa-info-title{
    display: block;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 25px;
}
.yumepa-info-title img{width:100%;display:block;}
.yumepa-info-main{
    background: #fff;
    margin: 16px 16px 0;
    padding-top: 30px;
    padding-right: 30px;
    padding-left: 30px;
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 20px;
}
.yumepa-info-bx{
    background: #fff;
    margin: 0px 16px 0;
    padding: 5px 30px 30px;
}
@media(max-width:768px){
  .yumepa-info-main{
    display: block;
    grid-template-columns: 1fr;
}
  .yumepa-logo-img{max-width:280px;margin:0 auto;}
.news-section{
  text-align:center;
  padding: 0px 20px 80px;
}
.news-section-title img{max-width:100%;height:auto;margin:0 auto;}
.firework-lead{font-size:18px;line-height:2;color:#fff;}
    
}
.yumepa-logo-col{display:flex;flex-direction:column;align-items:center;gap:10px;}

.yumepa-logo-col img{
    width: 100%;
}
.yumepa-logo-img{max-width:570px;height:auto;}
.yumepa-logo-note{font-size:11px;color:#555;text-align:center;line-height:1.7;}
.yumepa-method-title{
    background: #ff9e00;
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    text-align: center;
    padding: 15px 12px 15px;
    border-radius: 2px;
    margin-bottom: 15px;
}
.yumepa-method-body{
    font-size: 18px;
    color: #333;
    line-height: 2;
    text-align: justify;
}
.yumepa-mark-box{
  background:#ffedd3;margin:20px 16px 0;border-radius:10px;
  padding:25px 25px;display:flex;gap:16px;align-items:flex-start;
}
.yumepa-mark-img{
    width: 250px;
    height: auto;
    flex-shrink: 0;
    margin-left: 20px;
    margin-right: 20px;
}
.yumepa-mark-text{flex:1;}
.yumepa-mark-catch{color:#af5d7b;font-size:24px;font-weight:700;line-height:1.9;margin-bottom:8px;}
.yumepa-mark-note{font-size:16px;color:#555;line-height:1.8;}
.yumepa-footer-note{font-size:14px;color:#000;padding:10px 20px 0;display:block;}
@media(max-width:768px){
    .yumepa-method-title{
    margin-top: 30px;
}
    .cal-hanabi{
    display: block;
    font-size: 14px;
    color: #e8457a;
}
    .cal-date{
    display: block;
    font-size: 14px;
}
    
.yumepa-mark-catch{
    color: #af5d7b;
    font-size: 20px;
    line-height: 1.5;
}
  .yumepa-mark-box{
    flex-direction: column;
    align-items: center;
    padding: 15px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}.yumepa-method-body{
    font-size: 16px;
    color: #333;
    line-height: 1.7;
    text-align: justify;
}
  .yumepa-mark-img{margin:0 auto;width:200px;}
}
@media(max-width:420px){
        .cal-date{
    display: block;
    font-size: 12px;
}
    .cal-hanabi{
    display: block;
    font-size: 12px;
    color: #e8457a;
}.yumepa-method-body{
    font-size: 14px;
    color: #333;
    line-height: 1.4;
    text-align: justify;
}
    .yumepa-method-title{
    margin-top: 20px;
}
    
}
.yumepa-btn-wrap{padding:14px 20px 24px;}

/* 大型ピンクボタン（クーポン・過ごし方 共通） */
.btn-lg-white{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  width:100%;max-width:680px;margin:0 auto;
  padding:20px 48px;
  background:#fff;color:#ff9e00!important;
  font-size:20px;font-weight:700;
  border-radius:10px;border:none;cursor:pointer;
  transition:background .2s;
  text-decoration:none;
}
.btn-lg-white::after{
  content:'›';
  position:absolute;
  right:10px;top:45%;
  transform:translateY(-50%);
  color:#ff9e00;font-size:30px;
  line-height:1;z-index:1;
}
.btn-lg-white:hover{background:#ffff89;}

/* DETOUR */
.detour-section{overflow:hidden;}
.detour-title-bar{
  width:100%;
  background-color:#7bc3ff;
  background-image:url('../images/other/bg.png');
  background-repeat:no-repeat;
  background-position:right center;
  background-size:auto 100%;
}
.detour-title-inner{
  max-width:1200px;
  margin:0 auto;
  padding:100px 20px;
  text-align:left;
}
.detour-title-inner img{
  height:auto;
  max-width:100%;
  display:block;
}
.detour-content{
    background-image: url('../images/other/other_bg.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center top;
    padding: 0;
}
/* 各スポット：画像全幅＋タイトル＆本文を絶対配置 */
.detour-item{
    position: relative;
    line-height: 0;
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 45px;
    padding-bottom: 40px;
}
.detour-item picture{display:block;}
.detour-item>picture img{
  width:100%;height:auto;display:block;
}
/* タイトル（画像の上に重ねる） */
.detour-item-name{
  position:absolute;
  top:16px;
  font-size:clamp(24px,3.8vw,46px);
  font-weight:900;
  line-height:1.2;
  z-index:2;
  -webkit-text-stroke:3px #fff;
  paint-order:stroke fill;
  filter:drop-shadow(1px 2px 4px rgba(0,0,0,.15));
}
.di-left{left:20px;}
.di-right{right:20px;text-align:right;}
.di-teal{color:#00b8cc;}
.di-green{color:#5ab535;}
/* 本文ボックス（画像の上に重ねる） */
.detour-item-body{
  position:absolute;
  bottom:40px;
  width:50%;
  background:#fef4aa;
  border-radius:10px;
  padding:18px 22px;
  z-index:2;
  line-height:1;
}
.di-body-right{right:0px;}
.di-body-left{
    left: 0px;
}
.detour-item-text{
  font-size:16px;color:#333;
  text-align:justify;line-height:1.8;
  margin:0;
}
/* SP */
@media(max-width:768px){
    .detour-item{
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}
    .detour-title-bar{
    width: 100%;
    background-color: #7bc3ff;
    background-image: none;
}
  .detour-title-inner{padding:60px 20px;}
  .detour-item-name{
    font-size:clamp(18px,5.5vw,28px);
    top:10px;
    -webkit-text-stroke:2px #fff;
  }
  .detour-item-body{
    position:static;
    width:100%;
    border-radius:0;
    padding:16px 20px;
    line-height:1;
  }
  .detour-item-text{font-size:15px;}
}

/* PAGE TOP */
#page-top{
  position:fixed;
  bottom:20px;right:20px;
  z-index:9999;
  opacity:0;
  pointer-events:none;
  transform:translateY(20px);
  transition:opacity .5s ease, transform .5s ease;
  display:block!important; /* common.css の display:none を上書き */
}
#page-top.is-visible{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}
#page-top a{
  display:block;
  background:none;
  border-radius:0;
  width:auto;height:auto;
}
#page-top a img{
  width:160px;height:auto;
  display:block;
}

@media(max-width:768px){
#page-top{
  position:fixed;
  bottom:56px;right:10px; /* CTAバーの高さ分上にずらす */
}
#page-top a img{
  width:120px;height:auto;
  display:block;
}
}


/* フッターノートセクション（日帰りボタン＋注意書き） */
.footer-note-section{
  background:#ceeef7;
  padding:40px 20px 48px;
  text-align:center;
background-image: url('../images/contents/bg.png');
}
.footer-note-btn-wrap{
  margin-bottom:24px;
}
.footer-note-btn{
  max-width:680px;
}
.footer-note-text{
  font-size:14px;
  color:#555;
  text-align:center;
}
@media(max-width:768px){
  .footer-note-btn{
    width:90%;
    max-width:90%;
    margin-left:auto;
    margin-right:auto;
  }
  .footer-note-text{
    font-size:14px;
    text-align:justify;
    text-justify:inter-ideograph;
  }
}

/* SP固定フッターCTA */
.sp-cta-bar{ display:none; }
@media(max-width:768px){
  .sp-cta-bar{
    display:block;
    position:fixed;
    bottom:0;left:0;right:0;
    z-index:250;
    box-shadow:0 -2px 10px rgba(0,0,0,.15);
  }
  .sp-cta-btn{
    display:block;
    width:100%;
    background:#0071d4;
    color:#fff!important;
    text-align:center;
    font-weight:700;
    font-size:clamp(13px,4.2vw,18px);
    padding:15px 16px;
    text-decoration:none;
    white-space:nowrap;
    letter-spacing:.05em;
    line-height:1.2;
  }
  .sp-cta-btn:active{ background:#0056a0; }
  /* コンテンツがCTAバーで隠れないよう余白 */
  body{ padding-bottom:54px; }
}
/* OTHER HOTELS */
.other-hotel-section{
  background:#fff;
  padding:56px 20px;
  text-align:center;
  overflow:hidden;
  max-width:100%;
  box-sizing:border-box;
}
.other-hotel-inner{max-width:1200px;margin:0 auto;overflow:hidden;}
.other-hotel-title{margin-bottom:36px;}
.other-hotel-title img{max-width:100%;height:auto;margin:0 auto;display:block;}
.other-hotel-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:32px;
  text-align:left;
}
@media(max-width:768px){
.other-hotel-grid{
    grid-template-columns: 1fr;
    width: 100%;
    max-width:100%;
    box-sizing:border-box;
    margin-left: auto;
    margin-right: auto;
}
}
.other-hotel-card{
  border:6px solid var(--hcolor);
  border-radius:15px;
  padding:20px 20px 24px;
  display:flex;flex-direction:column;
  max-width:100%;
  box-sizing:border-box;
  overflow:hidden;
}
.ohc-area{
  font-size:20px;color:#333;font-weight:700;
  text-align:center;margin-bottom:4px;
}
.ohc-name{
  font-size:clamp(22px,2.8vw,40px);
  font-weight:900;
  color:var(--hcolor);
  text-align:center;
  margin-bottom:16px;
  line-height:1.2;
}
.ohc-desc{
    font-size: 16px;
    color: #333;
    text-align: justify;
    line-height: 1.9;
    margin: 12px auto 20px;
    flex: 1;
    width: 95%;
}
.btn-lg-other{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  padding:20px 48px;
  background:var(--hcolor);color:#fff!important;
  font-size:20px;font-weight:700;
  border-radius:10px;text-decoration:none;
  transition:opacity .2s;
}
.btn-lg-other::after{
  content:'\203A';position:absolute;
  right:20px;top:50%;transform:translateY(-50%);
  color:#fff;font-size:22px;line-height:1;
}
.btn-lg-other:hover{opacity:.85;}

/* RENTAL */
.rental-section{background:#fff;padding:0 20px 64px;}
.rental-inner{max-width:1200px;margin:0 auto;}
.rental-title{text-align:center;margin-bottom:40px;}
.rental-title img{max-width:100%;height:auto;margin:0 auto;display:block;}
.rental-body{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:48px;
  align-items:center;
}
.rental-logo-col{
  display:flex;flex-direction:column;
  align-items:center;
  gap:0;
}
.rental-bar{
  display:block;
  width:100%;height:8px;
  background:#ff9e00;
  border-radius:4px;
  margin-bottom:20px;
}
.rental-logo-img{
  display:block;
  max-width:600px;height:auto;
}
.rental-text-col{
  display:flex;flex-direction:column;
  gap:12px;
}
.rental-catch{
  font-size:clamp(24px,2.4vw,28px);
  font-weight:700;color:#333;
  text-align:center;line-height:1.5;
  margin:0;
}
.rental-note{
  font-size:16px;color:#666;
  text-align:center;line-height:1.8;
  margin:0;
}
.rental-btn-wrap{margin-top:8px;}

.rental-btn-wrap .btn-lg-orange{
  border-radius:10px;
}


@media(max-width:768px){
  .rental-body{
    grid-template-columns:1fr;
    gap:24px;
  }
.other-hotel-card{
  border:6px solid var(--hcolor);
  border-radius:15px;
  padding:10px 15px 20px;
  display:flex;flex-direction:column;
}
    
.ohc-desc{
    font-size: 14px;
    line-height: 1.5;
    margin: 12px auto 20px;
    flex: 1;
    width: 95%;
}
  .rental-logo-img{max-width:240px;}
  .rental-catch{font-size:18px;}
    .rental-note{
    font-size: 12px;
    color: #666;
    text-align: justify;
    line-height: 1.8;
    margin: 0;
}
.btn-lg-other{
  padding:15px 25px;
  background:var(--hcolor);color:#fff!important;
  font-size:16px;font-weight:700;
}
    
    
}


/* JTBグローバルフッターの上余白を除去 */
#JTBGF-ly_footer { margin-top: 0 !important; }