/* ============================================================
   なごみの宿 いい田 — トップページ
   2026/10/2 いただいたカンプ（幅1366px）に沿って組んだもの
   ============================================================ */
:root {
  /* 色：カンプから実測 */
  --rail-bg: rgba(182, 42, 34, .5);  /* 左の帯。白の上で #da938f、濃い地の上で #6f201c になる */
  --pink: #da938f;                   /* SNS・お知らせの箱 */
  --dark: #261818;                   /* 網元の記憶・ご予約ボタン */
  --wine: #310305;                   /* サウナ・温泉 */
  --beige: #f4f0e7;                  /* 一棟貸し */
  --ink: #261818;                    /* 本文 */
  --logo: #5c1511;                   /* ロゴの色 */
  --line: #6e5a58;                   /* 「詳しくはこちら」の下線 */
  --rail: clamp(56px, 8.42vw, 115px);/* カンプ 115 / 1366 */
  --col: 37.4vw;                     /* 左の文章列（帯の右端〜画像の左端）カンプ 511 / 1366 */
  --mincho: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
}
[hidden] { display: none !important; }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: #fff; color: var(--ink);
  font-family: var(--mincho); font-size: 15px; line-height: 2; letter-spacing: .05em;
  font-feature-settings: "palt" 0; -webkit-font-smoothing: antialiased;
  line-break: strict; word-break: auto-phrase;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.bw { filter: grayscale(1) contrast(1.05); }

/* ---------- 左の固定帯 ---------- */
.rail { position: fixed; z-index: 50; left: 0; top: 0; bottom: 0; width: var(--rail); background: var(--rail-bg); pointer-events: none; }
.rail-logo { pointer-events: auto; display: block; width: 46%; margin: clamp(20px, 2.8vw, 38px) auto 0; }
.rail-logo img { width: 100%; height: auto; }

/* ---------- 右上の固定ボタン ---------- */
.topbar { position: fixed; z-index: 60; top: clamp(14px, 2.2vw, 30px); right: clamp(14px, 2.2vw, 30px); display: flex; align-items: center; gap: clamp(10px, 2.6vw, 36px); }
.btn-reserve {
  display: inline-flex; align-items: center; justify-content: center; height: 58px; padding: 0 clamp(18px, 3.3vw, 46px);
  background: var(--dark); color: #fff; font-size: clamp(15px, 1.6vw, 22px); letter-spacing: .12em; transition: background .3s;
}
.btn-reserve:hover { background: #4a2a2a; }
.btn-menu { width: 70px; height: 70px; background: #fff; display: grid; place-content: center; gap: 15px; }
.btn-menu span { display: block; width: 34px; height: 1px; background: var(--ink); transition: transform .3s, opacity .3s; }
.btn-menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(16px) rotate(45deg); }
.btn-menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.btn-menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-16px) rotate(-45deg); }
.lang { display: flex; gap: 2px; font-size: 13px; letter-spacing: .1em; color: #fff; text-shadow: 0 0 8px rgba(0,0,0,.5); }
.lang button { padding: 4px 7px; opacity: .7; border-bottom: 1px solid transparent; }
.lang button[aria-pressed="true"] { opacity: 1; border-bottom-color: currentColor; }
body.is-scrolled .lang { color: var(--ink); text-shadow: none; }

.drawer {
  position: fixed; z-index: 55; top: 0; right: 0; bottom: 0; width: min(420px, 88vw); background: #fff;
  padding: 120px 44px 40px; box-shadow: -10px 0 40px rgba(0,0,0,.12); overflow-y: auto;
}
.drawer li { border-bottom: 1px solid #e6dedc; }
.drawer a { display: flex; align-items: baseline; gap: 18px; padding: 16px 0; font-size: 17px; letter-spacing: .15em; }
.drawer small { min-width: 96px; font-size: 11px; letter-spacing: .12em; color: #b62a22; }
.drawer .drawer-reserve { justify-content: center; margin-top: 28px; padding: 16px; background: var(--dark); color: #fff; border: 0; }

/* ---------- 冒頭（フル動画） ---------- */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; background: #000; }
.hero-stage { position: absolute; inset: 0; }
.shot { position: absolute; inset: -2%; background: center / cover no-repeat; opacity: 0; will-change: transform, opacity, filter; }
.hero-shade { position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(270deg, rgba(0,0,0,.4) 0%, rgba(0,0,0,0) 38%),
  linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 70%, rgba(0,0,0,.45) 100%); }
.hero-copy {
  position: absolute; z-index: 3; right: clamp(40px, 11vw, 170px); top: 54%; transform: translateY(-50%); margin: 0;
  writing-mode: vertical-rl; color: #fff; font-weight: 500; font-size: clamp(26px, 3vw, 42px); line-height: 1.9; letter-spacing: .3em;
  text-shadow: 0 0 28px rgba(0,0,0,.55), 0 0 3px rgba(0,0,0,.4); max-height: 76vh;
}
.hero-copy > span { display: block; transition: opacity 1.1s ease, transform 1.4s ease; }
.hero-copy.is-out > span { opacity: 0; transform: translateY(-14px); }
html[lang="en"] .hero-copy, html[lang="zh-Hans"] .hero-copy {
  writing-mode: horizontal-tb; top: auto; bottom: 130px; right: auto; left: calc(var(--rail) + clamp(24px, 4vw, 60px)); transform: none;
  max-width: min(640px, 75vw); letter-spacing: .06em; line-height: 1.4;
}
.hero-copy .tcy, .tcy { display: inline; text-combine-upright: all; letter-spacing: 0; font-feature-settings: "hwid" 1; }
.hero-tmp { position: absolute; z-index: 4; left: calc(var(--rail) + 20px); top: 24px; margin: 0; padding: 3px 10px; border: 1px solid rgba(255,255,255,.6); background: rgba(0,0,0,.25); color: #fff; font-family: "Hiragino Sans", sans-serif; font-size: 11px; line-height: 1.6; }
.hero-foot { position: absolute; z-index: 4; left: calc(var(--rail) + clamp(20px, 3vw, 44px)); right: clamp(20px, 3vw, 44px); bottom: 30px; display: flex; align-items: center; gap: 24px; color: #fff; }
.hero-scene { margin: 0; font-size: 13px; letter-spacing: .2em; white-space: nowrap; min-width: 180px; }
.hero-scene em { font-style: normal; margin-right: 12px; opacity: .8; }
.hero-bar { flex: 1; display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; max-width: 480px; }
.hero-bar button { display: block; width: 100%; padding: 10px 0; }
.hero-bar i { display: block; height: 2px; background: rgba(255,255,255,.3); position: relative; overflow: hidden; }
.hero-bar i::after { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: left; transform: scaleX(var(--p, 0)); }
.hero-pause { width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.6); border-radius: 50%; display: grid; place-items: center; flex: none; }
.hero-pause span { width: 8px; height: 10px; border-left: 2px solid #fff; border-right: 2px solid #fff; }
.hero-pause.is-paused span { width: 0; height: 0; border: 0; border-left: 9px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-left: 3px; }
/* SCENE 06：家紋 → ロゴ */
.hero-mon { position: absolute; z-index: 2; inset: 0; display: grid; place-items: center; background: #f4f0e7; opacity: 0; transition: opacity 1.1s ease; pointer-events: none; }
.hero-mon.is-on { opacity: 1; }
.hero-mon-logo { height: min(52vh, 420px); width: auto; clip-path: inset(0 0 78% 0); transform: scale(1.08); transition: clip-path 1.8s cubic-bezier(.6,0,.2,1) .2s, transform 2.4s ease; }
.hero-mon.is-logo .hero-mon-logo { clip-path: inset(0 0 0 0); transform: scale(1); }

/* ---------- 共通：見出し・本文 ---------- */
.label { margin: 0 0 clamp(18px, 2.4vw, 32px); font-size: clamp(15px, 1.5vw, 20px); font-weight: 600; letter-spacing: .06em; }
.ttl { margin: 0 0 clamp(26px, 3.6vw, 50px); font-size: clamp(22px, 2.2vw, 30px); font-weight: 600; line-height: 1.75; letter-spacing: .1em; }
.ttl-s { margin: 0 0 24px; font-size: clamp(18px, 1.6vw, 22px); font-weight: 600; letter-spacing: .08em; }
.body { margin: 0; font-size: clamp(13px, 1.1vw, 15px); font-weight: 600; line-height: 2.05; letter-spacing: .06em; }
.link-line {
  display: inline-block; min-width: min(100%, 425px); margin-top: clamp(28px, 3vw, 44px); padding: 0 10px 12px;
  border-bottom: 1px solid var(--line); font-size: clamp(15px, 1.5vw, 20px); font-weight: 600; letter-spacing: .1em; transition: letter-spacing .4s, border-color .3s;
}
.link-line::after { content: "→"; float: right; margin-left: 20px; opacity: 0; transform: translateX(-8px); transition: opacity .3s, transform .3s; }
.link-line:hover { border-color: currentColor; }
.link-line:hover::after { opacity: 1; transform: none; }
.tmp-note { margin: 14px 0 0; font-family: "Hiragino Sans", sans-serif; font-size: 11px; color: #b62a22; letter-spacing: .04em; }
.is-dark .tmp-note, .is-wine .tmp-note { color: #f0b3ad; }

/* ---------- 2列の行（左：文章／右：飾り金具の枠つき写真） ---------- */
.row { display: grid; grid-template-columns: var(--col) 1fr; padding-left: var(--rail); min-height: clamp(520px, 49.8vw, 680px); }
.row-text { padding: clamp(48px, 5.2vw, 72px) clamp(20px, 2.4vw, 34px) clamp(56px, 6vw, 82px) clamp(24px, 2.8vw, 38px); }
.row.is-dark { background: var(--dark); color: #fff; }
.row.is-dark .link-line { border-color: rgba(255,255,255,.55); }
.row.is-wine { background: var(--wine); color: #fff; }
.toc { padding-top: clamp(10px, 1.2vw, 16px); }
.toc li + li { margin-top: clamp(30px, 4.3vw, 58px); }
.toc a { font-size: clamp(18px, 1.9vw, 26px); font-weight: 600; letter-spacing: .06em; transition: color .3s, padding .3s; }
.toc a:hover { color: #b62a22; padding-left: 8px; }

.frame { position: relative; margin: 0; background: #cecece; overflow: hidden; }
.frame > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.frame::before, .frame::after, .frame > .k3, .frame > .k4 { content: ""; position: absolute; z-index: 2; width: clamp(48px, 6.8vw, 93px); aspect-ratio: 93 / 87; background: url(../images/kanagu.svg) no-repeat center / contain; pointer-events: none; }
.frame::before { left: 0; top: 0; }
.frame::after { right: 0; top: 0; transform: scaleX(-1); }
.frame > .k3 { left: 0; bottom: 0; transform: scaleY(-1); }
.frame > .k4 { right: 0; bottom: 0; transform: scale(-1, -1); }

/* ---------- パララックス ---------- */
.para { position: relative; height: clamp(460px, 49.7vw, 680px); overflow: hidden; color: #fff; }
.para-bg { position: absolute; inset: -18% 0; }
.para-bg img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.para::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,24,48,.72) 0%, rgba(8,24,48,.5) 38%, rgba(8,24,48,.08) 62%, rgba(0,0,0,0) 75%); pointer-events: none; }
.para-text { position: relative; z-index: 1; padding: clamp(110px, 14vw, 190px) 30px 60px calc(var(--rail) + clamp(24px, 2.9vw, 40px)); max-width: calc(var(--rail) + 640px); text-shadow: 0 0 18px rgba(0,0,0,.35); }
.para-end { height: clamp(380px, 49.7vw, 680px); }
.para-end::after { display: none; }

/* ---------- 一棟貸し ---------- */
.whole { background: var(--beige); padding: clamp(60px, 7.5vw, 104px) clamp(20px, 7vw, 100px) clamp(70px, 8.8vw, 120px) calc(var(--rail) + clamp(24px, 4.8vw, 66px)); }
.whole-ttl { margin: 0 0 clamp(26px, 2.6vw, 36px); font-size: clamp(22px, 2.2vw, 30px); font-weight: 600; letter-spacing: .1em; }
.whole-list { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4.4vw, 60px); padding-left: clamp(0px, 1vw, 14px); }
.whole-list img { width: 100%; aspect-ratio: 507 / 318; object-fit: cover; }
.whole-list h3 { margin: 22px 0 14px; font-size: clamp(19px, 2vw, 27px); font-weight: 600; letter-spacing: .06em; }
.whole-list p { margin: 0; font-size: clamp(13px, 1.1vw, 15px); font-weight: 600; line-height: 2.05; }
.whole-list .cap { margin-top: 22px; font-size: clamp(15px, 1.5vw, 20px); }

/* ---------- 客室 ---------- */
.rooms { margin-top: clamp(40px, 6vw, 82px); display: grid; gap: clamp(24px, 3vw, 40px); max-width: 352px; }
.rooms img { width: 100%; aspect-ratio: 352 / 262; object-fit: cover; transition: opacity .3s; }
.rooms a:hover img { opacity: .85; }
.rooms span { display: block; margin-top: 14px; font-size: clamp(15px, 1.5vw, 20px); font-weight: 600; letter-spacing: .04em; }

/* ---------- 文化に泊まる ---------- */
.culture { padding: clamp(70px, 8vw, 110px) clamp(20px, 7vw, 100px) clamp(60px, 7vw, 96px) calc(var(--rail) + clamp(24px, 4.8vw, 66px)); }
.culture-head { margin-bottom: clamp(26px, 3vw, 40px); }
.culture-head .ttl { margin-bottom: 0; }
.culture-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.8vw, 24px); }
.culture-list a { display: block; }
.culture-list img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 1.2s ease; }
.culture-list a:hover img { transform: scale(1.04); }
.culture-list li { overflow: hidden; }
.culture-list b { display: block; margin-top: 14px; font-size: clamp(15px, 1.4vw, 19px); font-weight: 600; letter-spacing: .1em; }
.culture-list span { display: block; font-size: 13px; color: #6a5b59; }

/* ---------- SNS・YouTube・お知らせ・Googleマップ（ピンクの箱） ---------- */
.info { padding: clamp(40px, 6vw, 82px) clamp(16px, 7vw, 100px) clamp(70px, 7.6vw, 104px) calc(var(--rail) + clamp(16px, 4.8vw, 66px)); }
.info-box { background: var(--pink); padding: clamp(32px, 6vw, 84px) clamp(18px, 6.4vw, 88px); display: grid; gap: clamp(48px, 6vw, 80px); }
.info-block h2 { margin: 0 0 20px; font-size: clamp(20px, 2vw, 27px); font-weight: 600; letter-spacing: .04em; display: flex; align-items: center; gap: 16px; }
.info-block h2::after { content: ""; flex: 1; height: 1px; background: rgba(38,24,24,.35); }
.info-lead, .voices-lead { margin: -6px 0 18px; font-size: 13.5px; font-weight: 600; }

/* Instagram */
.ig-head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.ig-avatar { width: 58px; height: 58px; padding: 9px; background: #fff; border-radius: 50%; flex: none; }
.ig-head p { margin: 0; flex: 1; display: grid; line-height: 1.6; }
.ig-head b { font-size: 17px; letter-spacing: .04em; }
.ig-head span { font-size: 12.5px; }
.ig-follow { flex: none; padding: 10px 22px; background: var(--dark); color: #fff; font-size: 13px; letter-spacing: .1em; transition: background .3s; }
.ig-follow:hover { background: #4a2a2a; }
.ig { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.ig a { display: block; overflow: hidden; }
.ig img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .8s ease, opacity .3s; }
.ig a:hover img { transform: scale(1.06); opacity: .9; }

/* お客様の声 */
.voices { margin-top: clamp(36px, 4vw, 52px); }
.voices h3 { margin: 0 0 8px; font-size: clamp(17px, 1.6vw, 21px); font-weight: 600; letter-spacing: .06em; }
.voices-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.voices-list li { background: #fff; padding: 8px; box-shadow: 0 6px 18px rgba(38,24,24,.14); transform: rotate(-1.2deg); transition: transform .4s; }
.voices-list li:nth-child(even) { transform: rotate(1.1deg); }
.voices-list li:hover { transform: rotate(0) scale(1.03); }
.voices-list img { width: 100%; aspect-ratio: 800 / 683; object-fit: cover; }

/* YouTube */
.yt-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.yt-list a { display: block; }
.yt-thumb { position: relative; display: block; overflow: hidden; background: #000; }
.yt-thumb img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .8s ease; }
.yt-list a:hover .yt-thumb img { transform: scale(1.05); }
.yt-thumb i { position: absolute; left: 50%; top: 50%; width: 52px; height: 36px; margin: -18px 0 0 -26px; background: rgba(38,24,24,.85); border-radius: 9px; transition: background .3s; }
.yt-thumb i::after { content: ""; position: absolute; left: 21px; top: 10px; border-left: 13px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.yt-list a:hover .yt-thumb i { background: #c4302b; }
.yt-list b { display: block; margin-top: 10px; font-size: 13px; line-height: 1.7; font-weight: 600; }
.yt-list small { display: block; margin-top: 2px; font-size: 11.5px; opacity: .8; }

/* お知らせ・地図 */
.info-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); }
.news li { display: grid; gap: 2px; padding: 14px 0; border-bottom: 1px solid rgba(38,24,24,.3); }
.news time { font-size: 13px; letter-spacing: .1em; }
.news p { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.8; }
.map { position: relative; aspect-ratio: 16 / 10; background: #fff; }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(.4); }
.addr { margin: 12px 0 0; font-size: 13px; line-height: 1.8; }
.info-note { margin: 10px 0 0; font-size: 12px; }

/* 写真枠の「仮素材」表示 */
.frame-tmp { position: absolute; z-index: 3; right: clamp(56px, 7.6vw, 104px); bottom: 14px; padding: 2px 9px; background: rgba(0,0,0,.45); color: #fff; font-family: "Hiragino Sans", sans-serif; font-size: 11px; }

/* ---------- フッター ---------- */
.foot { padding: clamp(56px, 6vw, 80px) clamp(20px, 7vw, 100px) 30px calc(var(--rail) + clamp(24px, 4.8vw, 66px)); background: #fff; }
.foot-in { display: grid; grid-template-columns: auto 1fr auto; gap: clamp(28px, 5vw, 70px); align-items: start; }
.foot-logo { width: 40px; height: auto; }
.foot-addr p { margin: 0; font-size: 14px; line-height: 2; }
.foot-addr .btn-reserve { margin-top: 20px; height: 50px; font-size: 16px; }
.foot-nav { display: grid; grid-template-columns: repeat(2, auto); gap: 8px 36px; font-size: 14px; letter-spacing: .1em; }
.foot-nav a:hover { color: #b62a22; }
.copy { margin: 50px 0 0; font-size: 11px; letter-spacing: .15em; color: #8a7a78; }

/* ---------- 表示アニメーション ---------- */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 1.1s ease, transform 1.1s ease; }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .frame.reveal { transform: none; clip-path: inset(0 0 100% 0); transition: clip-path 1.4s cubic-bezier(.6,0,.2,1), opacity .2s; opacity: 1; }
.js .frame.reveal.is-in { clip-path: inset(0 0 0 0); }

/* ============ タブレット ============ */
@media (max-width: 1000px) {
  :root { --col: 46vw; }
  .culture-list { grid-template-columns: repeat(2, 1fr); }
  .ig { grid-template-columns: repeat(3, 1fr); }
  .yt-list { grid-template-columns: repeat(2, 1fr); }
  .voices-list { grid-template-columns: repeat(2, 1fr); }
  .info-row { grid-template-columns: 1fr; }
}

/* ============ スマートフォン ============ */
@media (max-width: 700px) {
  :root { --rail: 48px; }
  body { font-size: 14px; }
  .body br, .ttl br.pc, .whole-list p br { display: none; }
  .rail-logo { width: 62%; margin-top: 14px; }
  .topbar { top: 10px; right: 10px; gap: 8px; }
  .lang { display: none; }
  .btn-reserve { height: 46px; padding: 0 16px; font-size: 14px; }
  .btn-menu { width: 46px; height: 46px; gap: 9px; }
  .btn-menu span { width: 24px; }
  .btn-menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
  .btn-menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }
  .hero-copy { right: 24px; font-size: 25px; }
  .hero-foot { left: calc(var(--rail) + 14px); right: 14px; bottom: 22px; flex-wrap: wrap; gap: 4px 12px; }
  .hero-scene { width: 100%; min-width: 0; font-size: 12px; }
  .hero-tmp { top: 66px; }

  .row { grid-template-columns: 1fr; min-height: 0; }
  .row .frame { order: -1; aspect-ratio: 4 / 3; }
  .row-text { padding: 40px 20px 56px 20px; }
  #toc .frame { display: none; }
  .toc li + li { margin-top: 22px; }
  .para { height: 560px; }
  .para-text { padding: 90px 20px 40px calc(var(--rail) + 20px); }
  .para-end { height: 300px; }
  .whole { padding: 56px 20px 64px calc(var(--rail) + 20px); }
  .whole-list { grid-template-columns: 1fr; gap: 44px; padding-left: 0; }
  .culture { padding: 56px 20px 50px calc(var(--rail) + 20px); }
  .info { padding: 30px 12px 50px calc(var(--rail) + 12px); }
  .info-box { padding: 30px 16px; }
  .ig-head { flex-wrap: wrap; }
  .ig-follow { width: 100%; text-align: center; }
  .yt-list { gap: 14px; }
  .foot { padding: 50px 20px 26px calc(var(--rail) + 20px); }
  .foot-in { grid-template-columns: auto 1fr; }
  .foot-nav { grid-column: 1 / -1; }
  .link-line { min-width: 0; width: 100%; }
  .rooms { max-width: none; grid-template-columns: 1fr 1fr; gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal, .js .frame.reveal { opacity: 1; transform: none; clip-path: none; transition: none; }
}

/* ---------- 下層ページ（仮） ---------- */
.sub .demo-bar { position: relative; z-index: 40; display: flex; gap: 16px; justify-content: space-between; padding: 9px 20px 9px calc(var(--rail) + 20px); background: var(--beige); font-family: "Hiragino Sans", sans-serif; font-size: 12px; line-height: 1.7; }
.sub .demo-bar p { margin: 0; } .sub .demo-bar a { border-bottom: 1px solid currentColor; font-weight: 600; flex: none; }
.sub-hero { position: relative; height: 56vh; min-height: 360px; overflow: hidden; color: #fff; }
.sub-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sub-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.5), rgba(0,0,0,.1)); }
.sub-ttl { position: absolute; z-index: 1; left: calc(var(--rail) + clamp(24px, 4.8vw, 66px)); bottom: 48px; }
.sub-ttl small { font-size: 13px; letter-spacing: .3em; }
.sub-ttl h1 { margin: 6px 0 4px; font-size: clamp(26px, 2.6vw, 36px); font-weight: 600; letter-spacing: .15em; }
.sub-ttl p { margin: 0; font-size: 14px; }
.sub-body { max-width: calc(var(--rail) + 860px); padding: 64px 20px 100px calc(var(--rail) + clamp(24px, 4.8vw, 66px)); }
.sub-note { margin: 0 0 14px; font-size: 12px; letter-spacing: .15em; color: #8a7a78; }
.sub-list li { display: grid; gap: 2px; padding: 18px 0; border-bottom: 1px solid #e6dedc; }
.sub-list li:first-child { border-top: 1px solid #e6dedc; }
.sub-list b { font-size: 17px; letter-spacing: .1em; }
.sub-list span { font-size: 13px; line-height: 1.8; color: #6a5b59; }

/* 冒頭コピーの下に、ふちのぼけた暗い影を敷く（白壁・灯りなど明るいカットでも読めるように） */
.hero-copy::before { content: ""; position: absolute; z-index: -1; inset: -34% -60%; background: radial-gradient(closest-side, rgba(0,0,0,.5), rgba(0,0,0,.28) 55%, rgba(0,0,0,0)); pointer-events: none; transition: opacity 1.1s ease; }
.hero-copy.is-out::before { opacity: 0; }
html[lang="en"] .hero-copy::before, html[lang="zh-Hans"] .hero-copy::before { inset: -40% -18%; }

/* 本文の改行はカンプ幅（1300px超）だけで固定し、それより狭い画面では自然に折り返す */
@media (max-width: 1300px) {
  .body br, .whole-list p br { display: none; }
}
/* 狭いスマホ */
@media (max-width: 480px) {
  .yt-list { grid-template-columns: 1fr; }
  .yt-list a { display: grid; grid-template-columns: 42% 1fr; gap: 12px; align-items: start; }
  .yt-list b { margin-top: 0; }
  .yt-list small { grid-column: 2; }
  .culture-list b { font-size: 14px; letter-spacing: .04em; word-break: keep-all; overflow-wrap: anywhere; }
  .culture-list span { font-size: 12px; }
}
@media (max-width: 480px) {
  .yt-list a { grid-template-columns: 42% minmax(0, 1fr); }
  .yt-list b, .yt-list small { min-width: 0; word-break: normal; overflow-wrap: anywhere; }
}

/* ---------- 別案：交互配置と、写真を大きく見せる行 ---------- */
.row.is-rev { grid-template-columns: 1fr var(--col); }
.row.is-rev .frame { order: -1; }
.band { margin: 0 0 0 var(--rail); height: clamp(380px, 46vw, 640px); }
.band figcaption { position: absolute; z-index: 3; left: clamp(24px, 5vw, 70px); bottom: clamp(24px, 4vw, 52px); color: #fff; font-size: clamp(18px, 2vw, 26px); font-weight: 600; letter-spacing: .14em; text-shadow: 0 0 20px rgba(0,0,0,.6); }
.band::after { box-shadow: none; }
.band > img { transform: scale(1.04); transition: transform 6s ease-out; }
.band.is-in > img { transform: scale(1); }
@media (max-width: 700px) {
  .row.is-rev { grid-template-columns: 1fr; }
  .band { height: 300px; }
}

/* ============================================================
   C案：百楽荘の「左にテキスト・右に画像固定」を土台に、
   それ以外は左右分割にしない行を挟む（10/3 先方テキスト指示）
   カンプのピンク・赤は指示の色だったので使わない
   ============================================================ */
.rail { background: #fff; border-right: 1px solid #e6dedc; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.label .no { display: inline-block; margin-right: 14px; font-size: .78em; letter-spacing: .12em; color: #a8463b; font-weight: 500; }
.is-dark .label .no, .over .label .no, .para .label .no { color: #f0b3ad; }

/* 目次（中央寄せ） */
.intro { padding: clamp(80px, 9vw, 130px) 24px clamp(70px, 8vw, 110px) calc(var(--rail) + 24px); text-align: center; }
.intro-mon { width: 46px; height: 46px; margin: 0 auto 26px; }
.intro-lead { margin: 0 0 clamp(40px, 5vw, 64px); font-size: clamp(17px, 1.8vw, 24px); font-weight: 600; line-height: 2; letter-spacing: .14em; }
.intro-toc { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px clamp(20px, 3vw, 44px); max-width: 980px; margin: 0 auto; }
.intro-toc a { display: grid; justify-items: center; gap: 2px; padding: 6px 4px; font-size: clamp(15px, 1.4vw, 18px); font-weight: 600; letter-spacing: .08em; border-bottom: 1px solid transparent; transition: border-color .3s, color .3s; }
.intro-toc small { font-size: 12px; color: #a8463b; letter-spacing: .15em; }
.intro-toc a:hover { border-color: currentColor; }

/* 左にテキスト・右に画像固定 */
.fixed-group { display: grid; grid-template-columns: var(--col) 1fr; padding-left: var(--rail); }
.fg-text { grid-column: 1; grid-row: 1; }
.fg-ch { min-height: 100vh; padding: clamp(80px, 9vw, 130px) clamp(20px, 2.4vw, 34px) clamp(80px, 9vw, 130px) clamp(24px, 2.8vw, 38px); }
.fg-ch.is-dark { background: var(--dark); color: #fff; }
.fg-ch.is-dark .link-line { border-color: rgba(255,255,255,.55); }
.fg-sp { display: none; }
.fg-media.frame { grid-column: 2; grid-row: 1; align-self: start; position: sticky; top: 0; height: 100vh; }
.fg-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.05); transition: opacity 1s ease, transform 6s ease-out; }
.fg-media > img.is-on { opacity: 1; transform: scale(1); }

/* 写真の上に文章（余別を楽しむ） */
.over { margin: 0 0 0 var(--rail); height: clamp(520px, 52vw, 720px); color: #fff; }
.over::after { box-shadow: none; }
.over-text { position: absolute; z-index: 2; left: clamp(24px, 5vw, 80px); bottom: clamp(36px, 6vw, 90px); max-width: 520px; padding: clamp(24px, 3vw, 40px); background: rgba(49,3,5,.78); }
.over > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* SNS・YouTube・お知らせ：ピンクをやめる */
.info-box { background: var(--beige); }

/* フッターの写真＋地図イラスト */
.mapzone { position: relative; margin-left: var(--rail); padding: clamp(70px, 9vw, 130px) clamp(16px, 5vw, 70px); overflow: hidden; }
.mapzone .para-bg { inset: -18% 0; }
.mapzone::after { content: ""; position: absolute; inset: 0; background: rgba(20,30,40,.25); pointer-events: none; }
.map-card { position: relative; z-index: 1; display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(20px, 3vw, 44px); align-items: center; max-width: 1100px; margin: 0 auto; padding: clamp(18px, 2.4vw, 34px); background: rgba(255,255,255,.95); }
.map-illust { width: 100%; height: auto; }
.map-info .addr { margin: 0 0 22px; font-size: 14px; line-height: 2; }
.map-btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 54px; background: var(--dark); color: #fff; font-size: 15px; letter-spacing: .12em; transition: background .3s; }
.map-btn:hover { background: #4a2a2a; }
.map-info .link-line { min-width: 0; width: 100%; margin-top: 18px; }

@media (max-width: 1000px) {
  .map-card { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .fixed-group { grid-template-columns: 1fr; }
  .fg-media.frame { display: none; }
  .fg-ch { min-height: 0; padding: 0 20px 64px; }
  .fg-ch .fg-sp { display: block; margin: 0 -20px 36px; aspect-ratio: 4 / 3; }
  .fg-ch .fg-sp > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .over { height: auto; min-height: 520px; display: flex; align-items: flex-end; }
  .over-text { position: relative; left: auto; bottom: auto; margin: 0 14px 20px; }
  .mapzone { padding: 50px 12px; }
  .intro-toc { display: grid; grid-template-columns: 1fr 1fr; }
}
.over .tmp-note { color: #f0b3ad; }
/* パララックスをはっきり見せる：写真を上下に大きく敷き、動く幅を広げる */
.para-bg, .mapzone .para-bg { inset: -45% 0; }

/* お客様の声：クリックで拡大 */
.voice-btn { display: block; width: 100%; cursor: zoom-in; }
.lightbox { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 60px 70px; background: rgba(20,12,12,.88); }
.lb-img { max-width: min(1100px, 100%); max-height: 100%; width: auto; height: auto; background: #fff; padding: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.lb-close, .lb-prev, .lb-next { position: absolute; color: #fff; font-size: 34px; line-height: 1; width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; transition: background .3s; }
.lb-close:hover, .lb-prev:hover, .lb-next:hover { background: rgba(255,255,255,.15); }
.lb-close { top: 16px; right: 16px; font-size: 28px; }
.lb-prev { left: 12px; top: 50%; margin-top: -26px; }
.lb-next { right: 12px; top: 50%; margin-top: -26px; }
@media (max-width: 700px) { .lightbox { padding: 70px 10px; } .lb-prev, .lb-next { top: auto; bottom: 12px; margin: 0; } .lb-prev { left: calc(50% - 64px); } .lb-next { right: calc(50% - 64px); } }
.lb-img { max-height: calc(100vh - 140px); max-height: calc(100svh - 140px); object-fit: contain; }

/* 地図カード（道のりの地図＋周辺の拡大図＋交通案内） */
.map-card { display: block; max-width: 1180px; }
.map-route { width: 100%; height: auto; display: block; }
.map-sub { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(18px, 2.6vw, 36px); margin-top: clamp(16px, 2vw, 26px); align-items: start; }
.map-zoom { width: 100%; height: auto; display: block; }
.route-list { margin: 0 0 20px; border-top: 1px solid #e6dedc; }
.route-list li { display: grid; grid-template-columns: auto 1fr; gap: 0 12px; padding: 10px 0; border-bottom: 1px solid #e6dedc; font-size: 14px; font-weight: 600; }
.route-list b { color: #5c1511; }
.route-list span { grid-column: 1 / -1; font-size: 12px; font-weight: 400; color: #6a5b59; }
.map-info .addr { margin-bottom: 14px; }
@media (max-width: 760px) { .map-sub { grid-template-columns: 1fr; } }
.map-open { position: relative; display: block; }
.map-hint { display: none; }
@media (max-width: 760px) { .map-hint { display: block; position: absolute; right: 6px; bottom: 6px; padding: 2px 8px; background: rgba(38,24,24,.8); color: #fff; font-family: "Hiragino Sans", sans-serif; font-size: 11px; } }

/* ---------- ボタン：和紙の質感＋細い内枠（色はカンプの焦げ茶・白のまま） ---------- */
.btn-reserve, .map-btn, .drawer .drawer-reserve, .ig-follow {
  position: relative; background: #261818 url(../images/washi_dark.jpg) center / 300px; color: #f7f2e8;
  box-shadow: 0 6px 18px rgba(38,24,24,.22); transition: box-shadow .4s, transform .4s, letter-spacing .4s;
}
.btn-reserve::before, .map-btn::before, .drawer .drawer-reserve::before, .ig-follow::before {
  content: ""; position: absolute; inset: 4px; border: 1px solid rgba(239,230,216,.35); pointer-events: none; transition: inset .4s, border-color .4s;
}
.btn-reserve:hover, .map-btn:hover, .drawer .drawer-reserve:hover, .ig-follow:hover { background-color: #261818; box-shadow: 0 10px 26px rgba(38,24,24,.32); transform: translateY(-1px); }
.btn-reserve:hover::before, .map-btn:hover::before, .drawer .drawer-reserve:hover::before, .ig-follow:hover::before { inset: 6px; border-color: rgba(239,230,216,.6); }
.topbar .btn-reserve { height: 64px; gap: 14px; padding: 0 clamp(20px, 2.4vw, 34px) 0 clamp(18px, 2vw, 26px); }
.br-mon { width: 22px; height: 22px; opacity: .9; }
.br-txt { display: grid; line-height: 1.25; font-size: clamp(14px, 1.2vw, 17px); letter-spacing: .2em; }
.br-txt small { font-family: "Cormorant Garamond", "Times New Roman", serif; font-size: 10px; letter-spacing: .32em; opacity: .7; }
.btn-menu { width: 64px; height: 64px; background: #fff url(../images/washi_light.jpg) center / 300px; box-shadow: 0 6px 18px rgba(38,24,24,.14); position: relative; display: grid; place-content: center; justify-items: center; gap: 7px; }
.btn-menu::before { content: ""; position: absolute; inset: 4px; border: 1px solid rgba(38,24,24,.18); pointer-events: none; }
.bm-lines { display: grid; gap: 7px; }
.bm-lines span { display: block; width: 26px; height: 1px; background: #261818; transition: transform .3s, opacity .3s, width .3s; }
.bm-lines span:nth-child(2) { width: 18px; justify-self: end; }
.btn-menu:hover .bm-lines span:nth-child(2) { width: 26px; }
.bm-txt { font-family: "Cormorant Garamond", "Times New Roman", serif; font-size: 10px; letter-spacing: .3em; color: #261818; margin-right: -.3em; }
.btn-menu[aria-expanded="true"] .bm-lines span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.btn-menu[aria-expanded="true"] .bm-lines span:nth-child(2) { opacity: 0; }
.btn-menu[aria-expanded="true"] .bm-lines span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.map-btn { letter-spacing: .2em; }
.ig-follow { padding: 12px 24px; }

/* ---------- 地図カード：地図とアクセスを左右に（高さを約2/3に） ---------- */
.mapzone { padding: clamp(50px, 6vw, 84px) clamp(16px, 4vw, 56px); }
.map-card { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr); gap: clamp(18px, 2.4vw, 34px); align-items: center; max-width: 1180px; }
.map-info .label { margin-bottom: 10px; }
.map-info .addr { margin: 0 0 10px; font-size: 13px; line-height: 1.8; }
.route-list { margin: 0 0 16px; }
.route-list li { padding: 7px 0; font-size: 13px; }
.route-list span { font-size: 11.5px; }
.map-btn { height: 50px; }
@media (max-width: 900px) { .map-card { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  .topbar .btn-reserve { height: 48px; gap: 8px; padding: 0 14px; }
  .br-mon { width: 16px; height: 16px; }
  .br-txt { font-size: 13px; letter-spacing: .12em; } .br-txt small { font-size: 8px; }
  .btn-menu { width: 48px; height: 48px; gap: 4px; }
  .bm-lines { gap: 5px; } .bm-lines span { width: 20px; } .bm-lines span:nth-child(2) { width: 14px; }
  .btn-menu[aria-expanded="true"] .bm-lines span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .btn-menu[aria-expanded="true"] .bm-lines span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .bm-txt { font-size: 8px; }
}



/* ============================================================
   豪華に：アイコン・墨絵の飾り・動き・写真の角
   ============================================================ */
.ic { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.25em; margin-right: .45em; flex: none; }
.label { display: flex; align-items: center; flex-wrap: wrap; }
.label .ic { color: #a8463b; width: 1.4em; height: 1.4em; }
.is-dark .label .ic, .over .label .ic, .para .label .ic { color: #f0b3ad; }
.label::after { content: ""; width: 0; height: 1px; margin-left: 16px; background: currentColor; opacity: .5; transition: width 1.2s cubic-bezier(.2,.7,.2,1) .2s; }
.label.is-in::after, .js .label:not(.reveal)::after { width: clamp(40px, 6vw, 90px); }
.intro-toc .ic { display: block; width: 26px; height: 26px; margin: 0 auto 4px; color: #a8463b; transition: transform .5s; }
.intro-toc a:hover .ic { transform: translateY(-3px); }
.info-block h2 .ic, .voices h3 .ic { color: #a8463b; }
.route-list li { grid-template-columns: auto auto 1fr; align-items: center; }
.route-list li .ic { color: #a8463b; margin-right: 0; }
.route-list span { grid-column: 2 / -1; }
.map-info .label .ic { color: #a8463b; }

/* 墨絵の飾り：うっすら置いて、スクロールでゆっくり漂う */
.intro, .fg-ch, .culture { position: relative; overflow: hidden; }
.deco { position: absolute; z-index: 0; pointer-events: none; opacity: .14; will-change: transform; }
.fg-ch > *:not(.deco), .intro > *:not(.deco), .culture > *:not(.deco) { position: relative; z-index: 1; }
.deco-intro { width: min(760px, 70vw); left: 50%; bottom: -30px; transform: translateX(-50%); opacity: .12; }
.deco-uni { width: clamp(180px, 20vw, 300px); right: -40px; bottom: 30px; }
.deco-boat { width: clamp(240px, 28vw, 420px); right: -60px; bottom: 20px; opacity: .13; }
.deco-nishin { width: clamp(200px, 22vw, 330px); right: -30px; top: 90px; opacity: .12; }
.deco-culture { width: min(640px, 60vw); right: -80px; top: 30px; opacity: .1; }
@keyframes drift { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
.deco { animation: drift 9s ease-in-out infinite; }

/* 英字の帯 */
.marquee { margin-left: var(--rail); overflow: hidden; padding: clamp(18px, 2.4vw, 30px) 0; border-top: 1px solid #ece4da; border-bottom: 1px solid #ece4da; }
.mq-track { display: flex; width: max-content; animation: mq 48s linear infinite; }
.marquee.is-rev .mq-track { animation-direction: reverse; }
.mq-track span { font-family: "Cormorant Garamond", "Times New Roman", serif; font-style: italic; font-size: clamp(34px, 5.6vw, 84px); line-height: 1.1; letter-spacing: .04em; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px rgba(38,24,24,.32); padding-right: .5em; }
@keyframes mq { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* 冒頭の SCROLL と左帯の進み具合 */
.hero-scroll { position: absolute; z-index: 4; right: clamp(20px, 3vw, 44px); bottom: 90px; display: grid; justify-items: center; gap: 10px; color: #fff; font-family: "Cormorant Garamond", serif; font-size: 12px; letter-spacing: .3em; }
.hero-scroll span { writing-mode: vertical-rl; }
.hero-scroll::after { content: ""; width: 1px; height: 64px; background: linear-gradient(#fff 50%, rgba(255,255,255,.25) 50%); background-size: 1px 200%; animation: sdrop 2.2s cubic-bezier(.6,0,.3,1) infinite; }
@keyframes sdrop { from { background-position: 0 100%; } to { background-position: 0 -100%; } }
.rail-progress { position: absolute; left: 50%; bottom: 40px; width: 1px; height: 120px; background: #e6dedc; }
.rail-progress i { position: absolute; inset: 0 0 auto 0; height: 0; background: #a8463b; }

/* 見出しが一行ずつ浮かぶ */
.ttl .ln, .ttl-s .ln { display: block; overflow: hidden; padding-bottom: .06em; }
.ttl .ln > span, .ttl-s .ln > span { display: block; transform: translateY(105%); transition: transform 1.1s cubic-bezier(.2,.7,.2,1); }
.ttl.is-in .ln > span, .ttl-s.is-in .ln > span { transform: none; }
.ttl .ln:nth-child(2) > span { transition-delay: .14s; }
.ttl .ln:nth-child(3) > span { transition-delay: .28s; }
.js .ttl.reveal, .js .ttl-s.reveal { opacity: 1; transform: none; }

/* 写真の角：角ばった印象をやわらげる */
.soft { position: relative; display: block; }
.soft::before { content: ""; position: absolute; inset: 0; transform: translate(10px, 10px); border: 1px solid #c9b8a6; border-radius: 18px; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.soft img { position: relative; border-radius: 18px; box-shadow: 0 10px 24px rgba(38,24,24,.12); }
.rooms a:hover .soft::before { transform: translate(5px, 5px); }
.rooms a:hover .soft img { opacity: 1; }
.rooms { gap: clamp(30px, 3.6vw, 48px); }
.whole-list img, .culture-list li, .yt-thumb, .voices-list li, .ig a, .map-route, .info-box { border-radius: 10px; }
.culture-list li { overflow: hidden; }
.voices-list img { border-radius: 6px; }
.map-card { border-radius: 14px; }
.over-text { border-radius: 10px; }
.whole-list li img { box-shadow: 0 12px 28px rgba(38,24,24,.12); transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.whole-list li:hover img { transform: translateY(-4px); }

@media (prefers-reduced-motion: reduce) {
  .deco, .mq-track, .hero-scroll::after { animation: none; }
  .ttl .ln > span, .ttl-s .ln > span { transform: none; transition: none; }
}
@media (max-width: 700px) {
  .deco-uni, .deco-boat, .deco-nishin { width: 170px; right: -30px; }
  .rail-progress { height: 80px; bottom: 24px; }
  .hero-scroll { display: none; }
}

/* D案：金具はいぶし真鍮（Image2の質感、焦げ茶寄り）、大きさは約6割。透過PNGなのでフォルダを直接開いても表示される */
.frame::before, .frame::after, .frame > .k3, .frame > .k4 {
  width: clamp(30px, 4.1vw, 56px);
  aspect-ratio: 378 / 354;
  background: url(../images/kanagu_brass.png) no-repeat left top / contain;
}


/* ---------- スマホ：左の縦帯をやめ、上部にロゴ（左）・予約とメニュー（右）を並べる ---------- */
.sp-logo { display: none; }
@media (max-width: 700px) {
  :root { --rail: 0px; }
  .rail { display: none; }
  .sp-logo { display: block; position: fixed; z-index: 61; top: 0; left: 0; right: 0; height: 64px; padding: 9px 12px; background: rgba(255,255,255,.94); box-shadow: 0 1px 0 #ece4da; pointer-events: none; }
  .sp-logo a { display: inline-block; height: 46px; pointer-events: auto; }
  .sp-logo img { height: 100%; width: auto; }
  .topbar { top: 8px; right: 10px; z-index: 62; }
  .topbar .btn-reserve { height: 48px; }
  .btn-menu { width: 48px; height: 48px; }
  .hero { height: calc(100svh - 64px); margin-top: 64px; min-height: 480px; }
  .drawer { padding-top: 90px; }
  .hero-tmp { top: 12px; left: 12px; }
}

@media (max-width: 700px) {
  .sp-logo a { height: 40px; margin-top: 3px; }
  .topbar .btn-reserve { padding: 0 16px; gap: 0; }
  .topbar .br-mon, .topbar .br-txt small, .topbar .br-more { display: none; }
  .topbar .br-txt { font-size: 14px; letter-spacing: .2em; }
}

.br-main { white-space: nowrap; }

/* ============================================================
   10/5 先方の微調整（18項目）
   ============================================================ */
/* 2. ご挨拶 */
.greeting { max-width: 720px; margin: 0 auto clamp(44px, 5vw, 70px); }
.g-kicker { margin: 0 0 10px; font-size: 13px; letter-spacing: .4em; color: #a8463b; }
.g-lead { margin: 0 0 22px; font-size: clamp(20px, 2.2vw, 30px); font-weight: 600; letter-spacing: .14em; line-height: 1.7; }
.g-body { margin: 0 0 26px; font-size: clamp(14px, 1.15vw, 16px); line-height: 2.2; letter-spacing: .08em; color: #3d2f2d; }
.g-sign { margin: 0; display: flex; align-items: center; justify-content: center; gap: 18px; font-size: 14px; letter-spacing: .2em; }
.g-hand { display: inline-grid; place-items: center; min-width: 190px; padding: 10px 18px; border: 1px dashed #b9a796; color: #8a7a78; font-size: 13px; letter-spacing: .08em; line-height: 1.5; border-radius: 6px; }
.g-hand small { font-size: 11px; }

/* 8. 02〜04の左側をつなげ、上から色を乗せる（文字は黒のまま読める範囲） */
.fg-text { background: linear-gradient(180deg, #ffffff 0%, #fbf8f2 30%, #f3ebdd 65%, #e9dcc8 100%); }
.fg-ch, .fg-ch.is-dark { background: transparent; color: var(--ink); }

/* 4. 客室タイプ：横スライド（右を見切れさせる） */
.rooms-ttl { margin: clamp(36px, 4vw, 52px) 0 18px; font-size: clamp(16px, 1.4vw, 19px); font-weight: 600; letter-spacing: .12em; display: flex; align-items: center; gap: 14px; }
.rooms-ttl::after { content: ""; flex: 1; height: 1px; background: #d9cbb8; }
.rtype { margin-bottom: 28px; }
.rslide { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin-right: calc(-1 * clamp(20px, 2.4vw, 34px)); padding-right: clamp(20px, 2.4vw, 34px); scrollbar-width: none; cursor: grab; }
.rslide::-webkit-scrollbar { display: none; }
.rslide img { flex: 0 0 78%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 10px; scroll-snap-align: start; box-shadow: 0 8px 20px rgba(38,24,24,.12); }
.rmeta { margin: 12px 0 6px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; font-size: 14px; letter-spacing: .08em; }
.rmeta b { font-size: 17px; letter-spacing: .14em; }
.amen { display: flex; flex-wrap: wrap; gap: 8px; }
.amen li { display: inline-flex; align-items: center; padding: 4px 12px 4px 8px; border: 1px solid #d3c2ad; border-radius: 99px; font-size: 12px; letter-spacing: .06em; background: rgba(255,255,255,.6); }
.amen li .ic { color: #a8463b; margin-right: .35em; }
.amen li.is-off { display: none; }

/* 7. 歴史の写真：クリック／ホバーで右の大きな写真に表示 */
.hist-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 26px 0 0; max-width: 420px; }
.ht { display: block; width: 100%; padding: 0; border-radius: 8px; overflow: hidden; outline: 2px solid transparent; outline-offset: 2px; transition: outline-color .3s, transform .3s; cursor: pointer; }
.ht img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .6s; }
.ht:hover img { transform: scale(1.06); }
.ht.is-on { outline-color: #a8463b; }

/* 3段目の本文 */
.body-2 { margin-top: 1.2em; }

/* 5. 温泉・サウナ：本文が長いので箱を広げる */
#bath .over-text { max-width: 640px; }
#bath .body { font-size: clamp(13px, 1.05vw, 15px); }

/* 9. 余別を楽しむ */
#enjoy .culture-head .body { margin-top: 18px; }

/* 10〜14. メディア情報 */
.media-ttl { margin: 0; font-size: clamp(24px, 2.4vw, 34px); font-weight: 600; letter-spacing: .2em; text-align: center; }
.info-fb .voices-list { grid-template-columns: repeat(4, 1fr); }
.info-fb .voices-lead { margin: 12px 0 0; }

/* 15. アクセスの背景は色のグラデーション */
.mapzone.is-grad { background: linear-gradient(160deg, #f4f0e7 0%, #ece3d6 45%, #dfe8ea 100%); }
.mapzone.is-grad::after { display: none; }

/* 16. おかえりなさい。 */
.welcome { position: relative; margin-left: var(--rail); height: clamp(460px, 78vh, 820px); overflow: hidden; color: #fff; }
.welcome .para-bg { inset: -45% 0; }
.welcome::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.45)); }
.welcome-in { position: absolute; z-index: 1; inset: 0; display: flex; flex-direction: row-reverse; align-items: center; justify-content: center; gap: clamp(30px, 5vw, 70px); }
.welcome-txt { margin: 0; writing-mode: vertical-rl; font-size: clamp(28px, 3.4vw, 48px); letter-spacing: .4em; text-shadow: 0 0 24px rgba(0,0,0,.5); }
.welcome-logo { width: clamp(46px, 4.6vw, 66px); height: auto; filter: drop-shadow(0 0 12px rgba(0,0,0,.45)); }

/* 17・18. フッター：メニューと同じリンクだけ */
.foot { padding: 34px 20px 28px calc(var(--rail) + 20px); text-align: center; }
.foot .foot-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; }
.foot .copy { margin-top: 22px; }

@media (max-width: 1000px) { .info-fb .voices-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) {
  .g-sign { flex-direction: column; gap: 10px; }
  .g-body br { display: none; }
  .rslide { margin-right: -20px; padding-right: 20px; }
  .rslide img { flex-basis: 82%; }
  .hist-thumbs { max-width: none; }
  .welcome { height: 70vh; }
}
.rslide img { flex-basis: 70%; } @media (max-width: 700px) { .rslide img { flex-basis: 82%; } }

/* ---------- 10/6 追加調整 ---------- */
/* 4. スライドできることを見せる */
.rooms-ttl .rhint { order: 3; font-size: 12px; font-weight: 400; letter-spacing: .1em; color: #a8463b; animation: nudge 1.8s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
.rwrap { position: relative; }
.rnav { position: absolute; top: calc(50% - 22px); width: 40px; height: 40px; border-radius: 50%; background: rgba(38,24,24,.72); color: #fff; font-size: 24px; line-height: 1; display: grid; place-items: center; box-shadow: 0 4px 12px rgba(0,0,0,.2); transition: opacity .3s, background .3s; z-index: 2; }
.rnav:hover { background: rgba(38,24,24,.9); }
.rprev { left: 8px; } .rnext { right: calc(30% - 4px); }
.rnav[disabled] { opacity: 0; pointer-events: none; }
.rcount { position: absolute; z-index: 2; left: 10px; top: 10px; padding: 2px 10px; border-radius: 99px; background: rgba(38,24,24,.65); color: #fff; font-family: "Hiragino Sans", sans-serif; font-size: 11px; letter-spacing: .1em; }
@media (max-width: 700px) { .rnext { right: calc(18% + 4px); } }
/* 9. サクラマスは魚全体が見える位置で */
.culture-list img.pos-right { object-position: 100% 50%; }
/* 12. Facebookは4枚を1列に */
.info-fb .voices-list { grid-template-columns: repeat(4, 1fr); }
/* 15. グラデーションをはっきり */
.mapzone.is-grad { background: linear-gradient(160deg, #f1e7d6 0%, #dcc8ab 38%, #9fbcc4 78%, #6f98a4 100%); }
/* 16. おかえりなさい：横書き、高さは60% */
.welcome { height: clamp(276px, 47vh, 492px); }
.welcome-in { flex-direction: column; gap: clamp(16px, 2vw, 24px); }
.welcome-txt { writing-mode: horizontal-tb; font-size: clamp(26px, 3vw, 42px); letter-spacing: .3em; margin-right: -.3em; }
.welcome-logo { width: clamp(150px, 15vw, 220px); }
@media (max-width: 700px) { .welcome { height: 44vh; } .info-fb .voices-list { grid-template-columns: repeat(2, 1fr); } }
.rnav { width: 48px; height: 48px; background: rgba(255,255,255,.95); color: #261818; font-size: 30px; border: 1px solid #d3c2ad; box-shadow: 0 6px 16px rgba(38,24,24,.28); }
.rnav:hover { background: #fff; }
.rnext { animation: nudge 1.8s ease-in-out infinite; }
.rcount { font-size: 12px; padding: 3px 12px; }

/* ---------- 10/6 追加調整2 ---------- */
/* 4. 送りボタンは1枚目の写真の右端を基準に */
.rwrap { --w1: 70%; }
.rnext { right: auto; left: calc(var(--w1) - 24px); }
@media (max-width: 700px) { .rwrap { --w1: 82%; } }
/* 16. おかえりなさい：高さを20%大きく */
.welcome { height: clamp(331px, 56.4vh, 590px); }
@media (max-width: 700px) { .welcome { height: 52.8vh; } }
/* 地図の背景の終わりの色を、おかえりなさいの写真の上端（夕暮れの灰色）に合わせ、継ぎ目をぼかす */
.mapzone.is-grad { background: linear-gradient(180deg, #f1e7d6 0%, #dcc8ab 35%, #a9b8bb 72%, #9e9b9a 100%); }
.welcome::before { content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 90px; background: linear-gradient(180deg, #9e9b9a, rgba(158,155,154,0)); pointer-events: none; }
/* 4. 写真は縮むように（画像の元の幅で横に広がらない） */
.rslide img { min-width: 0; width: 70%; }
@media (max-width: 700px) { .rslide img { width: 82%; } }
.credit { margin: 14px 0 0; font-family: "Hiragino Sans", sans-serif; font-size: 10.5px; color: #8a7a78; letter-spacing: .02em; }
/* 手描きの指示どおり：1枚目を大きく、2枚目は右端に細く見切れる。ボタンは1枚目の右端の線上 */
.rslide { gap: 14px; }
.rslide img { width: 86%; flex-basis: auto; }
@media (max-width: 700px) { .rslide img { width: 86%; } }
.rslide img, .rslide img { width: calc(100% - 46px); } .rslide { gap: 12px; }
/* 余別を楽しむ→メディア情報の間の余白を詰める */
#enjoy { padding-bottom: clamp(24px, 2.6vw, 36px); }
#info { padding-top: clamp(16px, 2vw, 28px); }

/* ============================================================
   10/7 先方の修正（14項目＋確認事項）
   ============================================================ */
/* 1. 冒頭は動画 */
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* 署名 */
.g-sign { align-items: center; }
.g-sign-img { width: clamp(150px, 16vw, 210px); height: auto; }
/* 3・5. 客室：タイトル行（右端に部屋数）＋定員、写真はインスタのサムネ程度で3枚＋4枚目が見切れ */
.rtype { margin-bottom: 30px; }
.rmeta { display: flex; justify-content: space-between; align-items: baseline; margin: 0; padding-bottom: 6px; border-bottom: 1px solid #ddcfbd; }
.rmeta b { font-size: 17px; letter-spacing: .14em; }
.rmeta .rcnt { font-size: 14px; letter-spacing: .1em; }
.rcap { margin: 6px 0 12px; font-size: 13px; letter-spacing: .08em; color: #5c4b48; }
.rslide { gap: 10px; }
.rslide img, .rslide img { flex: 0 0 auto; width: calc((100% - 20px) / 3.35); min-width: 0; aspect-ratio: 1; border-radius: 8px; }
.rnav { width: 40px; height: 40px; font-size: 24px; }
/* 6. 1日限定一組のバナー */
.kashikiri { position: relative; display: block; margin-top: 30px; height: 150px; border-radius: 12px; overflow: hidden; color: #fff; box-shadow: 0 10px 24px rgba(38,24,24,.18); }
.kashikiri img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s ease; }
.kashikiri::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(38,24,24,.82), rgba(38,24,24,.25)); }
.kashikiri:hover img { transform: scale(1.05); }
.kk-in { position: absolute; z-index: 1; inset: 0; display: grid; align-content: center; padding: 0 26px; }
.kk-in small { font-size: 12px; letter-spacing: .3em; color: #f6d27a; }
.kk-in b { font-size: clamp(18px, 1.7vw, 23px); letter-spacing: .14em; margin-top: 4px; }
.kk-in i { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 22px; transition: transform .4s; }
.kashikiri:hover .kk-in i { transform: translate(6px, -50%); }
/* 7. 詳しくはこちら：矢印は常に表示、hoverで山吹色のグラデーションが左から右へ */
.link-line { position: relative; padding-right: 44px; background: linear-gradient(90deg, #f8b500, #fbd56b 60%, rgba(251,213,107,0)) no-repeat left / 0% 100%; transition: background-size .55s cubic-bezier(.2,.7,.2,1), color .3s, border-color .3s; }
.link-line::after { content: "→"; float: none; position: absolute; right: 12px; top: 0; margin: 0; opacity: 1; transform: none; transition: transform .35s; }
.link-line:hover { background-size: 100% 100%; letter-spacing: .1em; color: #261818; }
.link-line:hover::after { opacity: 1; transform: translateX(4px); }
/* 8. 板長の写真 */
.chef { margin: 26px 0 0; }
.chef img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; box-shadow: 0 10px 24px rgba(38,24,24,.14); }
.chef figcaption { margin-top: 6px; font-family: "Hiragino Sans", sans-serif; font-size: 11px; color: #a8463b; }
/* 10. 余別を楽しむ：カードはリンクなし、中央にボタン */
#enjoy .culture-list li { overflow: hidden; }
.center-btn { text-align: center; margin-top: clamp(26px, 3vw, 40px); }
.center-btn .link-line { min-width: min(100%, 320px); }
/* 12・13. 温泉・サウナ：背景スライドショー */
.bath-slide { position: relative; margin: 0 0 0 var(--rail); height: clamp(560px, 56vw, 760px); overflow: hidden; color: #fff; }
.bs-bg, .bs-bg img { position: absolute; inset: 0; width: 100%; height: 100%; }
.bs-bg img { object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 1.4s ease, transform 6s ease-out; }
.bs-bg img.is-on { opacity: 1; transform: scale(1); }
.bath-slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.45), rgba(0,0,0,.05) 60%); pointer-events: none; }
.bath-slide .over-text { z-index: 2; }
.bath-ttl { display: flex; align-items: center; gap: 16px; }
.bath-ttl::after { content: ""; width: clamp(40px, 6vw, 90px); height: 1px; background: currentColor; opacity: .6; }
.bs-dots { position: absolute; z-index: 2; right: clamp(20px, 4vw, 50px); bottom: 24px; display: flex; gap: 8px; }
.bs-dots li { width: 26px; height: 2px; background: rgba(255,255,255,.4); }
.bs-dots li.is-on { background: #fff; }
/* 14. おかえりなさい削除に合わせ、地図の背景の終わりを元の青系に戻す */
.mapzone.is-grad { background: linear-gradient(160deg, #f1e7d6 0%, #dcc8ab 38%, #9fbcc4 78%, #6f98a4 100%); }
@media (max-width: 700px) {
  .rslide img, .rslide img { width: calc((100% - 20px) / 3.35); }
  .bath-slide { height: auto; min-height: 620px; display: flex; align-items: flex-end; }
  .kashikiri { height: 130px; }
}

/* ---------- 10/7 追加調整 ---------- */
/* トップ動画の高さは70% */
.hero { height: 70vh; height: 70svh; min-height: 420px; }
@media (max-width: 700px) { .hero { height: 70svh; min-height: 360px; } }
/* 特別室は2枚なので、送りボタンは不要 */
.rwrap:has(.rslide img:nth-child(3):last-child) .rnext, .rwrap:not(:has(.rslide img:nth-child(4))) .rnext { display: none; }
/* 1日限定1組を目立たせる */
.kashikiri { height: 170px; }
.kashikiri img { object-position: 50% 60%; }
.kashikiri::after { background: linear-gradient(90deg, rgba(38,24,24,.86) 0%, rgba(38,24,24,.55) 55%, rgba(38,24,24,.15)); }
.kk-badge { justify-self: start; display: inline-flex; align-items: baseline; gap: 2px; padding: 5px 16px 6px; border-radius: 99px; background: linear-gradient(90deg, #f8b500, #fcd36b); color: #261818; font-size: 14px; font-weight: 700; letter-spacing: .2em; box-shadow: 0 4px 12px rgba(0,0,0,.25); }
.kk-badge em { font-style: normal; font-size: 22px; line-height: 1; margin: 0 2px; }
.kk-in b { margin-top: 10px; }
/* 「詳しくはこちら」：山吹色の帯が左端から右端へ伸びる */
.link-line { background-image: linear-gradient(90deg, #f8b500 0%, #fcd36b 100%); background-repeat: no-repeat; background-position: 0 0; background-size: 0% 100%; transition: background-size .6s cubic-bezier(.65,0,.35,1), color .3s; }
.link-line:hover, .link-line:focus-visible { background-size: 100% 100%; color: #261818; letter-spacing: .1em; }
.row.is-dark .link-line:hover, .fg-ch.is-dark .link-line:hover { color: #261818; }
/* フェードイン用の transition に上書きされていたので、帯の伸びも一緒に指定 */
.js .link-line.reveal, .link-line { transition: opacity 1.1s ease, transform 1.1s ease, background-size .6s cubic-bezier(.65,0,.35,1), color .3s, letter-spacing .4s; }

/* ---------- 10/7 追加調整2 ---------- */
/* バナー：文字は元のまま、写真はコテージ */
.kashikiri img { object-position: 50% 55%; }
.kk-tmp { position: absolute; z-index: 1; right: 12px; bottom: 8px; font-family: "Hiragino Sans", sans-serif; font-size: 10px; color: rgba(255,255,255,.75); }
/* 02〜04 の各章：中身の後ろに大きな余白を残さない */
.fg-ch { min-height: 0; padding-bottom: clamp(56px, 6vw, 84px); }
.fg-ch + .fg-ch { padding-top: clamp(56px, 6vw, 84px); }
/* 「詳しくはこちら」：細い枠のボタン＋丸い矢印。hoverで山吹色のグラデーションが左から右へ */
.link-line {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 24px;
  min-width: min(100%, 300px); margin-top: clamp(26px, 3vw, 40px); padding: 10px 10px 10px 22px;
  border: 1px solid rgba(38,24,24,.55); border-radius: 999px; color: #261818;
  font-size: 14px; font-weight: 600; letter-spacing: .16em; line-height: 1.6;
  background-image: linear-gradient(90deg, #c98a00 0%, #f8b500 45%, #ffd968 100%);
  background-repeat: no-repeat; background-position: 0 0; background-size: 0% 100%;
  transition: background-size .7s cubic-bezier(.65,0,.35,1), color .4s, border-color .4s, box-shadow .4s, opacity 1.1s ease, transform 1.1s ease;
}
.link-line::after {
  content: "→"; position: static; float: none; flex: none; display: grid; place-items: center;
  width: 34px; height: 34px; margin: 0; border-radius: 50%; background: #261818; color: #fff;
  font-size: 15px; letter-spacing: 0; opacity: 1; transform: none; transition: transform .45s cubic-bezier(.65,0,.35,1), background .4s, color .4s;
}
.link-line:hover, .link-line:focus-visible { background-size: 100% 100%; border-color: #c98a00; color: #261818; letter-spacing: .16em; box-shadow: 0 8px 22px rgba(201,138,0,.35); }
.link-line:hover::after, .link-line:focus-visible::after { transform: translateX(4px) rotate(-45deg); background: #fff; color: #c98a00; }
.js .link-line.reveal { transition: background-size .7s cubic-bezier(.65,0,.35,1), color .4s, border-color .4s, box-shadow .4s, opacity 1.1s ease, transform 1.1s ease; }
.fg-ch.is-dark .link-line, .row.is-dark .link-line { color: #261818; }
.info-block .link-line, .map-info .link-line { width: auto; }
/* ヒーロー動画：高さを15%大きく（70% → 80.5%） */
.hero { height: 80.5vh; height: 80.5svh; }
@media (max-width: 700px) { .hero { height: 80.5svh; } }
/* 詳しくはこちら：少し明るく */
.link-line { border-color: rgba(122,96,80,.45); color: #4a3a36; background-image: linear-gradient(90deg, #e2a200 0%, #f8b500 45%, #ffdf7e 100%); }
.link-line::after { background: #8a6d55; }
.link-line:hover, .link-line:focus-visible { border-color: #e2a200; box-shadow: 0 8px 22px rgba(226,162,0,.32); }
.fg-ch.is-dark .link-line, .row.is-dark .link-line { color: #4a3a36; }
.deco-uni { bottom: -110px; right: -30px; width: clamp(170px, 18vw, 260px); }
/* 詳しくはこちら：さらに明るく */
.link-line { border-color: rgba(150,122,100,.4); color: #5e4b44; background-color: rgba(255,255,255,.55); background-image: linear-gradient(90deg, #f0ae00 0%, #f8b500 40%, #ffe28c 100%); }
.link-line::after { background: #b08a63; }
.link-line:hover, .link-line:focus-visible { color: #3d2f2b; }
.fg-ch.is-dark .link-line, .row.is-dark .link-line { color: #5e4b44; }
/* 雲丹：見切れないよう章の中に収め、板長の写真とも重ねない */
.deco-uni { bottom: 14px; right: 6px; width: clamp(140px, 12.5vw, 190px); transform: none !important; }
/* 右の固定写真にゆっくりした動き（寄り＋わずかな横移動）を常にかける */
@keyframes kenburns { 0% { transform: scale(1.02) translate(0, 0); } 50% { transform: scale(1.1) translate(-1.5%, -1%); } 100% { transform: scale(1.02) translate(0, 0); } }
.fg-media > img.is-on { animation: kenburns 18s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .fg-media > img.is-on { animation: none; } }

/* ============================================================
   スマホのレスポンシブ調整（10/7）
   ============================================================ */
@media (max-width: 700px) {
  body { font-size: 14px; }
  /* ご挨拶：見出しの1文字だけの改行をなくす */
  .intro { padding: 56px 20px 48px; }
  .greeting { margin-bottom: 36px; }
  .g-lead { font-size: clamp(17px, 4.8vw, 21px); letter-spacing: .08em; word-break: keep-all; overflow-wrap: anywhere; line-height: 1.8; }
  .g-body { font-size: 13.5px; line-height: 2; text-align: left; display: inline-block; }
  .g-sign { flex-direction: row; gap: 14px; }
  .g-sign-img { width: 150px; }
  /* 目次：2列で最後が余る形をやめ、1列の行にする */
  .intro-toc { display: grid; grid-template-columns: 1fr; gap: 0; max-width: 340px; margin: 0 auto; border-top: 1px solid #ece4da; }
  .intro-toc li { border-bottom: 1px solid #ece4da; }
  .intro-toc a { display: flex; align-items: center; gap: 12px; justify-items: start; padding: 13px 6px; font-size: 15px; text-align: left; }
  .intro-toc .ic { margin: 0; width: 22px; height: 22px; }
  .intro-toc small { min-width: 22px; }
  .intro-toc a::after { content: "↓"; margin-left: auto; color: #b9a796; font-size: 13px; }
  /* 墨絵の飾りはスマホでは本文と重なるので出さない（目次の波だけ残す） */
  .deco:not(.deco-intro) { display: none; }
  /* 章の余白 */
  .fg-ch { padding: 0 20px 56px; }
  .fg-ch .fg-sp { margin: 0 -20px 30px; }
  .ttl { font-size: clamp(20px, 5.6vw, 24px); letter-spacing: .08em; }
  .label { font-size: 14px; }
  .body { font-size: 13.5px; line-height: 2; }
  /* 客室 */
  .rmeta b { font-size: 16px; }
  .rslide img, .rslide img { width: calc((100% - 20px) / 2.6); }
  /* 詳しくはこちら：画面幅いっぱいにしない */
  .link-line { min-width: 0; width: 100%; max-width: 340px; font-size: 13.5px; }
  .center-btn .link-line { margin-left: auto; margin-right: auto; }
  /* バナー */
  .kashikiri { height: 120px; }
  .kk-in { padding: 0 18px; }
  .kk-in b { font-size: 16px; letter-spacing: .08em; }
  .kk-in i { right: 16px; }
  /* 余別を楽しむ */
  .culture { padding: 48px 20px 40px; }
  .culture-list { gap: 12px; }
  .culture-list b { font-size: 14px; letter-spacing: .06em; }
  .credit { font-size: 10px; }
  /* 温泉・サウナ */
  .bath-slide { min-height: 0; padding: 260px 0 0; display: block; }
  .bath-slide .over-text { position: relative; margin: 0 12px 16px; padding: 22px 18px; }
  .bath-slide .body { font-size: 13px; }
  .bs-dots { top: 230px; bottom: auto; right: 20px; }
  /* メディア情報 */
  .info { padding: 24px 12px 44px; }
  .info-box { padding: 30px 16px; gap: 44px; }
  .media-ttl { font-size: 22px; letter-spacing: .14em; }
  .info-block h2 { font-size: 19px; }
  .yt-list a { grid-template-columns: 40% minmax(0, 1fr); gap: 12px; }
  .yt-list b { font-size: 12.5px; }
  .yt-list small { grid-column: 2; margin-top: 4px; }
  /* アクセス */
  .mapzone { padding: 36px 12px; }
  .map-card { padding: 14px; }
}
@media (max-width: 360px) {
  .sp-logo a { height: 34px; }
  .topbar .btn-reserve { padding: 0 12px; font-size: 13px; letter-spacing: .1em; }
  .rslide img, .rslide img { width: calc((100% - 10px) / 2.3); }
}

/* ============================================================
   10/9 最終調整
   ============================================================ */
/* 1・2. SCROLL：スマホでも表示。位置は「ご予約」とメニューのすき間の下（JSで合わせる） */
.hero-scroll { right: auto; left: var(--sx, auto); transform: translateX(-50%); bottom: 70px; }
@media (max-width: 700px) { .hero-scroll { display: grid; bottom: 40px; font-size: 10px; } .hero-scroll::after { height: 48px; } }
/* 3. 左のゲージ：縦線＋章のアイコン。章が表示されたらアイコンが現れる */
.rail-progress { display: none; }
.rail-gauge { position: absolute; left: 50%; transform: translateX(-50%); top: clamp(300px, 36vh, 360px); bottom: 40px; width: 30px; margin: 0; padding: 14px 0 0; list-style: none; display: flex; flex-direction: column; align-items: center; gap: clamp(10px, 2.2vh, 22px); pointer-events: auto; }
.rail-gauge::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: #d9cbb8; }
.rail-gauge li { position: relative; z-index: 1; opacity: 0; transform: translateY(8px) scale(.7); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.rail-gauge li.is-seen { opacity: 1; transform: none; }
.rail-gauge a { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #fff; color: #c7a7a0; transition: color .3s, background .3s; }
.rail-gauge .ic { width: 18px; height: 18px; margin: 0; }
.rail-gauge li.is-current a { color: #fff; background: #a8463b; }
.rail-gauge a:hover { color: #a8463b; }
/* 4. 貸切バナーを2つ */
.kashikiri + .kashikiri { margin-top: 14px; }
/* 5. フッター：前回の背景写真の上に白文字 */
.foot-photo { position: relative; margin-left: var(--rail); padding: 0; height: clamp(331px, 56.4vh, 590px); overflow: hidden; color: #fff; text-align: center; background: #222; }
.foot-photo .para-bg { inset: -45% 0; }
.foot-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(158,155,154,1) 0, rgba(0,0,0,.15) 90px, rgba(0,0,0,.35) 55%, rgba(0,0,0,.7) 100%); pointer-events: none; }
.foot-photo-in { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: 0 20px 30px; }
.foot-photo .foot-nav a { color: #fff; opacity: .92; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.foot-photo .foot-nav a:hover { opacity: 1; color: #fcd36b; }
.foot-photo .copy { color: rgba(255,255,255,.75); }
/* 地図の背景の終わりを、フッター写真の上端の色に合わせる */
.mapzone.is-grad { background: linear-gradient(180deg, #f1e7d6 0%, #dcc8ab 35%, #a9b8bb 72%, #9e9b9a 100%); }
@media (max-width: 700px) { .foot-photo { height: 52vh; min-height: 340px; } }
/* 10/9 追加：情報アイコン、地図下の余白、フッター文字 */
.ic .dotf { fill: currentColor; stroke: none; }
.media-ttl { display: flex; align-items: center; justify-content: center; gap: 12px; }
.media-ttl .ic { width: 1.1em; height: 1.1em; margin: 0; color: #a8463b; }
.mapzone.is-grad { padding-bottom: clamp(24px, 3vw, 40px); }
.foot-photo-in { padding-bottom: 38px; }
.foot-photo::after { background: linear-gradient(180deg, rgba(158,155,154,1) 0, rgba(0,0,0,.18) 80px, rgba(0,0,0,.4) 50%, rgba(0,0,0,.78) 100%); }
.foot-photo .foot-nav { font-size: 15px; font-weight: 600; gap: 10px 30px; letter-spacing: .14em; }
.foot-photo .foot-nav a { opacity: 1; text-shadow: 0 1px 3px rgba(0,0,0,.7), 0 0 14px rgba(0,0,0,.55); }
.foot-photo .copy { color: rgba(255,255,255,.88); font-size: 12px; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
@media (max-width: 700px) { .foot-photo .foot-nav { font-size: 14px; } .mapzone.is-grad { padding-bottom: 20px; } }