/* =========================================================
   Hachinoya — Static Site Styles
   Design tokens from design.md 
   ========================================================= */

/* ---------- Design tokens ---------- */
:root {
  /* Colors — 全体ダーク（濃すぎない中間ダーク＋真鍮ゴールド） */
  --color-primary: #f2ece1;   /* ink（見出し・強調）＝明るいオフホワイト */
  --color-accent:  #c9a86a;   /* 真鍮ゴールド */
  --color-grey:    #b1a793;   /* 補助テキスト */
  --color-bg:      #221c16;   /* メイン：中間ダーク（黒すぎない） */
  --color-text:    #e8e1d4;   /* 本文（明るい） */
  --color-hairline: rgba(242, 236, 225, 0.16);
  --color-bg-soft: #2a231b;   /* 補助背景（少し明るい） */
  --color-dark:    #17120d;   /* さらに濃い（帯・フッター） */
  --color-on-dark: #f2ece1;
  --color-on-dark-soft: #d4cbbc;
  --color-gold: #c9a86a;
  --color-bg-light: #ebe7df;    /* 明るいグレー（バランス用） */
  --color-bg-mid:  #35302a;     /* 濃いグレー（バランス用） */
  --color-gold-dk: #9a7b3f;     /* 明るい背景用の濃いゴールド */

  /* Typography */
  --font-heading: "Readex Pro", "Zen Kaku Gothic New", sans-serif;
  --font-body: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --fs-base: 16px;
  --lh-body: 1.8;
  --lh-heading: 1.4;

  /* Spacing (8px grid) */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-5: 40px;
  --sp-6: 48px;
  --sp-7: 56px;
  --sp-8: 64px;
  --sp-12: 96px;

  --content-max: 1120px;
  --section-y: 96px;   /* PC */
  --radius-btn: 2px;
}

/* =========================================================
   Japanese Language Overrides (html[lang="ja"])
   ========================================================= */
html[lang="ja"] {
  --font-heading: "Readex Pro", "Noto Sans JP", sans-serif;
  --font-body: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
html[lang="ja"] body { font-weight: 400; }
html[lang="ja"] .section-title { font-weight: 500; }

html[lang="ja"] .eyebrow { font-family: "Roboto", sans-serif; font-weight: 200; }
html[lang="ja"] .jp-beauty { font-family: "Noto Sans JP", sans-serif; font-style: normal; font-weight: 500; }
html[lang="ja"] .rooms-spec { letter-spacing: 0.04em; }

/* ---------- Reset-ish ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--color-text);
  background: var(--color-bg);
  font-weight: 300;   /* Roboto Light（本文の可読性向上。eyebrowは200を維持） */
}

img { max-width: 100%; height: auto; display: block; }

/* スクリーンリーダー専用（画面には見えないが読み上げ・SEO上は存在する） */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: var(--lh-heading);
  color: var(--color-primary);
  margin: 0 0 var(--sp-3);
  letter-spacing: 0.01em;
}

h1 { font-size: clamp(2rem, 5vw, 3.25rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 2.4vw, 1.5rem); }

p { margin: 0 0 var(--sp-3); }

/* ---------- Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--sp-3);
}

/* ★画像をひとまわり大きくするためのラッパー追加 */
.container--large {
  max-width: 1400px;
}

.section { padding-block: var(--section-y); }
.section--soft { background: var(--color-bg-soft); }
.section--mid  { background: var(--color-bg-mid); }

/* 明るいグレーのセクション（全体が真っ黒にならないようバランス） */
.section--light { background: var(--color-bg-light); color: #3a3229; }
.section--light h1, .section--light h2, .section--light h3, .section--light h4,
.section--light .section-title { color: #1a140f; }
.section--light p { color: #4c4438; }
.section--light em { color: #1a140f; }
.section--light .eyebrow { color: var(--color-gold-dk); }
.section--light .section-title::after { background: var(--color-gold-dk); }
.section--light .lead { color: #4c4438; }

.section--light .access-list li { color: #4c4438; border-color: rgba(0, 0, 0, 0.12); }
.section--light .access-list li strong { color: #1a140f; }
.section--light .access-list li a { color: #4c4438; }
.section--light .access-list li a:hover,
.section--light .access-list li a:hover strong { color: var(--color-gold-dk); }
.section--light .news-titles li { border-color: rgba(0, 0, 0, 0.12); }
.section--light .news-titles a, .section--light .news-titles span { color: #1a140f; }
.section--light .news-titles a:hover { color: var(--color-gold-dk); }
.section--light .news-titles time { color: #6a5327; font-weight: 500; }

/* Text badge button (base). Scoped variants below only override colors. */
.badge-link {
  display: inline-block;
  font-family: "Roboto", var(--font-body);
  font-weight: 400;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  padding: 13px 26px;
  border: 1px solid var(--color-gold);
  border-radius: var(--radius-btn);
  background: transparent;
  color: var(--color-gold);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
/* ページ内CTA（.badge-link 全バリアント --cta/--solid/--dark）は英語・日本語とも 400 に統一 */
.badge-link:hover {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: #221c16;
  text-decoration: none;
}

.section--light .badge-link { background: transparent; border-color: #1a140f; color: #1a140f; }
.section--light .badge-link:hover { background: #1a140f; border-color: #1a140f; color: var(--color-bg-light); }
/* 通常時と hover の配色を入れ替えたボタン（既定＝塗り、hover＝アウトライン） */
.badge-link--solid { background: var(--color-gold); border-color: var(--color-gold); color: #221c16; }
.badge-link--solid:hover { background: transparent; border-color: var(--color-gold); color: var(--color-gold); }
.section--light .badge-link--solid { background: #1a140f; border-color: #1a140f; color: var(--color-bg-light); }
.section--light .badge-link--solid:hover { background: transparent; border-color: #1a140f; color: #1a140f; }

/* 黒塗りCTA（About The Area）：既定＝黒、hover＝明るいゴールド */
.badge-link.badge-link--dark,
.section--light .badge-link.badge-link--dark {
  background: #1a140f;
  border-color: #1a140f;
  color: var(--color-bg-light);
}
.badge-link.badge-link--dark:hover,
.section--light .badge-link.badge-link--dark:hover {
  background: var(--color-bg-light);
  border-color: #1a140f;
  color: #1a140f;
}

/* 一部だけダーク：焼杉テクスチャ(IMG_1764-EDIT2)＋暗幕で高級感 */
.section--dark {
  /* 背景テクスチャ(showcase-bg)は縦が短く、縦に伸びるセクションでは拡大され粗く見えるため、
     暗いオーバーレイを強めにかけて低画質を目立たなくする（テクスチャはうっすら残す） */
  background-color: var(--color-dark);
  background-image:
    linear-gradient(rgba(18, 13, 9, 0.72), rgba(18, 13, 9, 0.82)),
    url('../img/showcase-bg.webp');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: var(--color-on-dark-soft);
}
/* 860px以下はセクションが縦積みで最も拡大されるため、さらに暗くして粗さを隠す */
@media (max-width: 860px) {
  .section--dark {
    background-image:
      linear-gradient(rgba(18, 13, 9, 0.82), rgba(18, 13, 9, 0.9)),
      url('../img/showcase-bg.webp');
  }
  /* Aboutセクションは、写真(home-about-a)の右・下に粗い壁テクスチャが出ないよう、
     レスポンシブ時はテクスチャを外して単色のダーク(--color-dark)にする */
  .section--dark:has(.split--about) { background-image: none; }
}
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4,
.section--dark .section-title { color: var(--color-on-dark); }
.section--dark p { color: var(--color-on-dark-soft); }
.section--dark em { color: var(--color-on-dark); }
.section--dark .eyebrow { color: var(--color-gold); }
.section--dark .jp-beauty { color: var(--color-on-dark); }
.section--dark .section-title::after { background: var(--color-gold); }
.section--dark .badge-link {
  background: transparent;
  border-color: var(--color-gold);
  color: var(--color-gold);
}
.section--dark .badge-link:hover { background: var(--color-gold); border-color: var(--color-gold); color: #17120c; }

/* 強調CTA（About The Rooms / Shiturae / Cultural Experiences）：濃色塗りで目立たせる */
.badge-link.badge-link--cta {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #1a140f;
  font-family: "Roboto", sans-serif;
  padding: 15px 34px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
}
.badge-link.badge-link--cta:hover { background: #d8bd88; border-color: #d8bd88; color: #1a140f; }

.eyebrow {
  font-family: var(--font-body);
  font-weight: 200;   /* eyebrowは細いまま維持（本文300化の対象外） */
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 1.5rem;   /* 2x */
  color: var(--color-accent);
  margin-bottom: var(--sp-2);
}

.section-title { position: relative; margin-bottom: var(--sp-6); }
.section-title::after {
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  background: var(--color-accent);
  margin-top: var(--sp-2);
}

/* ===== 文化体験（index-ja：写真一枚の編集的レイアウト） ===== */
.exp-cul { text-align: left; }
.exp-cul .eyebrow { display: block; }
.exp-cul__lead { max-width: 52ch; margin: var(--sp-6) 0 var(--sp-5); font-size: 1.08rem; line-height: 2; }
.exp-cul__cta { margin: 0; }

/* しつらえ帯の写真と結びの文章の間に、文字1行分の余白を追加 */
.shitsurae-foot { margin-top: 2rem; }

/* 文化体験：画面いっぱいの3枚ギャラリー */
.exp-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; width: 100%; margin: var(--sp-6) 0; }
.exp-gallery figure { margin: 0; overflow: hidden; }
.exp-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
@media (max-width: 700px) { .exp-gallery { grid-template-columns: 1fr; } }

/* 蜂の屋の周辺：写真タイル（3×2） */
.tile-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: var(--sp-6) 0 0; }
.tile-gallery figure { margin: 0; overflow: hidden; border-radius: 0; }
.tile-gallery img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
@media (max-width: 720px) { .tile-gallery { grid-template-columns: 1fr 1fr; gap: 0; } }
/* 横幅600px以下：周辺・観光ガイドの6枚を上下左右の余白なし（隙間ゼロ＋画面いっぱい）に */
@media (max-width: 600px) {
  .tile-gallery { gap: 0; margin-inline: calc(-1 * var(--sp-3)); }
  .tile-gallery figure { border-radius: 0; }
}

.lead { font-size: 1.125rem; color: var(--color-grey); max-width: 60ch; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  padding: 14px 28px;
  border-radius: var(--radius-btn);
  background: var(--color-accent);
  color: #221c16;
  border: 1px solid var(--color-accent);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.btn:hover { background: #d8bd88; border-color: #d8bd88; text-decoration: none; }

.btn--lg { padding: 18px 40px; font-size: 1.05rem; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(23, 18, 13, 0.82);
  backdrop-filter: saturate(120%) blur(8px);
  border-bottom: 1px solid var(--color-hairline);
}
.site-header .container { max-width: 1440px; }
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 122px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.18rem;
  color: var(--color-primary);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.brand:hover { text-decoration: none; color: var(--color-primary); }
.brand-mark { height: clamp(72px, 6.4vw, 88px); width: auto; flex-shrink: 0; display: block; }
.brand-tag {
  display: inline-flex; align-items: center;
  font-family: var(--font-body); font-weight: 400;
  font-size: 0.9rem; letter-spacing: 0.14em;
  color: var(--color-on-dark-soft); white-space: nowrap;
  margin-right: 32px; margin-left: 16px;
}
.brand-div {
  display: inline-block; width: 6px; height: 7px; margin: 0 0.55em;
  background: var(--color-accent);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.nav { display: flex; align-items: center; gap: var(--sp-3); }
.nav__links { display: flex; gap: 20px; list-style: none; margin: 0; padding: 0; }
.nav__links a {
  color: var(--color-primary);
  font-family: var(--font-body);
  font-weight: 400;               /* Roboto Regular */
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.nav__links a:hover { color: var(--color-accent); text-decoration: none; }
.nav__actions { display: flex; align-items: center; gap: var(--sp-2); }
.lang-switch { font-size: 0.82rem; color: var(--color-grey); letter-spacing: 0.08em; white-space: nowrap; }
.lang-switch a { color: var(--color-grey); }
.lang-switch .is-active { color: var(--color-primary); font-weight: 600; }

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  width: 44px;
  height: 44px;
  cursor: pointer;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-primary);
  position: relative;
  transition: transform 0.25s ease;
}
.nav-toggle span::before { position: absolute; top: -7px; }
.nav-toggle span::after { position: absolute; top: 7px; }

/* ---------- Media / cards ---------- */
.figure { margin: 0; }
.figure img { width: 100%; object-fit: cover; }

.ratio-3-4  { aspect-ratio: 3 / 4; }
.figure img.cover { width: 100%; height: 100%; object-fit: cover; }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
  align-items: center;
}

/* Media image shown large, filling the section height beside the text (e.g. Coffee) */
@media (min-width: 861px) {
  .split--fill { align-items: center; }
  .split--fill .split__media .figure { aspect-ratio: auto; height: 540px; }
  .split--fill .split__media .figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
}
@media (max-width: 860px) {
  .split--fill .split__media .figure { aspect-ratio: 3 / 2; }
}

.grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(3, 1fr);
}

/* ---------- Booking CTA banner ---------- */

/* CTA Overrides (Black background, no borders on logo) */

/* ---------- Booking buttons (book page) ---------- */

/* Hover info panel on the reservation buttons */

.book-tip {
  position: absolute;
  left: 50%; top: calc(100% + 12px);
  transform: translate(-50%, -6px);
  width: min(440px, 92vw);
  background: #2c241b;
  border: 1px solid var(--color-hairline);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5);
  border-radius: var(--radius-btn);
  padding: 6px 18px;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 30;
}

.book-tip__r {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 12px;
  padding: 10px 0;
  font-size: 0.85rem;
  line-height: 1.5;
}
.book-tip__r + .book-tip__r { border-top: 1px solid var(--color-hairline); }
.book-tip__r b { color: var(--color-gold); font-weight: 400; }
.book-tip__r i { color: var(--color-on-dark-soft); font-style: normal; }

.note {
  border-left: 3px solid var(--color-accent);
  background: var(--color-bg-soft);
  padding: var(--sp-3);
  color: var(--color-grey);
  font-size: 0.95rem;
}

/* ---------- 法務テキスト（プライバシーポリシー等） ---------- */
.legal { max-width: 780px; margin-top: var(--sp-4); }
.legal__intro { line-height: 1.9; margin: 0 0 var(--sp-4); }
.legal h2 { font-family: var(--font-heading); font-weight: 500; font-size: 1.18rem; margin: var(--sp-7) 0 var(--sp-3); padding-top: var(--sp-4); border-top: 1px solid var(--color-hairline); }
.legal > .legal__intro + h2 { margin-top: var(--sp-4); }
.legal p { line-height: 1.9; margin: 0 0 var(--sp-3); }
.legal ul { margin: 0 0 var(--sp-3); padding-left: 1.25em; }
.legal li { line-height: 1.85; margin-bottom: 8px; }
.legal li strong { display: block; margin-bottom: 2px; color: var(--color-on-dark); }
.legal a { color: var(--color-accent); border-bottom: 1px solid transparent; }
.legal a:hover { border-bottom-color: currentColor; text-decoration: none; }

/* Tabelog フィード＋写真つきカード */
.feed { display: flex; flex-direction: column; gap: var(--sp-5); margin-top: var(--sp-6); }
.feed-card { display: block; background: #fffdf9; border: 1px solid rgba(26, 20, 15, 0.12); border-radius: 5px; overflow: hidden; box-shadow: 0 10px 26px rgba(26, 20, 15, 0.06); }
.feed-card.is-filtered-out { display: none; }   /* エリアガイドのカテゴリー絞り込みで非表示（inline JS が is-filtered-out を付与） */
.feed-card__media--empty { display: flex; align-items: center; justify-content: center; background: #efece6; }
.feed-card__media--empty::after { content: "＋ 写真"; color: #b7ad9c; font-size: 0.85rem; letter-spacing: 0.12em; }
.feed-card__media { position: relative; width: 100%; aspect-ratio: 16 / 10; display: block; background: #ece7dd; }
.feed-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feed-card__body { padding: var(--sp-4) var(--sp-5); }
.feed-card__head { display: block; }
.feed-card .feed-card__type { font-family: "Roboto", var(--font-body); font-weight: 300; text-transform: uppercase; color: var(--color-gold-dk); font-size: 0.7rem; letter-spacing: 0.16em; margin: 0 0 6px; }
.feed-card__name { font-family: var(--font-heading); font-weight: 500; font-size: 1.28rem; color: #1a140f; margin: 0; }

/* 食事・カフェ：ジャンル別サブカテゴリー（絞り込みチップ） */
.subcat { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--sp-4); }
.subcat__chip { font-family: var(--font-body); font-size: 0.85rem; letter-spacing: 0.04em; color: #4c4438; background: transparent; border: 1px solid rgba(26, 20, 15, 0.2); border-radius: 999px; padding: 7px 16px; cursor: pointer; transition: background 0.2s, border-color 0.2s, color 0.2s; }
.subcat__chip:hover { border-color: var(--color-gold-dk); color: #1a140f; }
.subcat__chip.is-active { background: #876a35; border-color: #876a35; color: #fff; } /* 白文字コントラスト確保(5.07:1) */

.feed-card__desc { color: #4c4438; line-height: 1.8; margin: 0 0 var(--sp-3); }
.staff-rec { background: rgba(154, 123, 63, 0.09); border: 1px solid rgba(154, 123, 63, 0.22); border-radius: 3px; padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-3); }
.staff-rec__title { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-gold-dk); margin: 0 0 8px; font-weight: 500; }
.staff-rec__list > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); padding: 3px 0; }
.staff-rec__list dt { color: #4c4438; font-size: 0.9rem; margin: 0; }
.staff-rec__list dt span { color: #8a8175; font-size: 0.72rem; margin-left: 5px; }
.staff-rec__list dd { margin: 0; color: var(--color-gold-dk); letter-spacing: 2px; font-size: 0.95rem; }
.staff-rec__walk { margin: 9px 0 0; padding-top: 8px; border-top: 1px solid rgba(154, 123, 63, 0.2); font-size: 0.9rem; color: #4c4438; }
.staff-rec__walk strong { color: #1a140f; font-weight: 500; }
/* 井筒食堂：Instagram 3投稿を横並び */
.feed-card--ig { display: block; }
.ig-embeds { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); margin: var(--sp-4) 0; align-items: start; }
.ig-embeds .instagram-media { min-width: 0 !important; width: 100% !important; margin: 0 !important; }
@media (max-width: 900px) { .ig-embeds { grid-template-columns: 1fr; max-width: 460px; } }

.feed-card__links { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
/* すべての導線を枠線つきボタンに（Instagram・Tabelog・Google Map など） */
.feed-card__links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border: 1px solid currentColor;
  border-radius: var(--radius-btn);
  color: var(--color-gold-dk);
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.feed-card__links a:hover {
  background: var(--color-gold-dk);
  border-color: var(--color-gold-dk);
  color: #fff;
  text-decoration: none;
}
html[lang="en"] .feed-card__links a:hover { background: #7a5c1c; border-color: #7a5c1c; color: #fff; }
@media (max-width: 720px) {
  .feed-card { grid-template-columns: 1fr; }
  .feed-card__media { min-height: 200px; position: relative; aspect-ratio: 16 / 10; }
}

/* ---------- Feature list (craft gallery) ---------- */

/* ---------- Page hero (interior pages) ---------- */
.page-hero {
  background: var(--color-bg-soft);
  padding-block: var(--sp-8);
  border-bottom: 1px solid var(--color-hairline);
}
.page-hero .lead { margin-bottom: 0; }

/* ---------- News list ---------- */

/* ---------- 日本語お知らせ（news-ja：本文全文を縦に連続表示） ---------- */
.container--narrow { max-width: 900px; }
/* エリアガイドは幅狭の1カラム（feedとして読ませる）＋右にカテゴリー列 */
.area-guide { background: var(--color-bg-light); }
.area-guide .container { max-width: 600px; }
/* ページヒーローだけは通常幅にして、左端を投稿ページ・文化体験とそろえる */
.area-guide .page-hero .container { max-width: var(--content-max); }
.area-body { max-width: 960px; margin-inline: auto; padding-inline: var(--sp-3); display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: var(--sp-6); align-items: start; }
.area-body__main { min-width: 0; }
.area-side { position: sticky; top: 132px; padding-top: var(--sp-8); }
#cat-food, #cat-healing, #cat-sightseeing, #cat-culture { scroll-margin-top: 132px; }
@media (max-width: 820px) {
  .area-body { grid-template-columns: 1fr; gap: 0; }
  /* カテゴリーは左端に寄せ、フッターの列と同じ見え方に。レスポンシブでは本文より上（ページ上部）に */
  .area-side { position: static; padding-top: 0; max-width: none; margin: var(--sp-5) 0 var(--sp-6); text-align: left; order: -1; }
}
/* リード文の可読性を高めるため、やや濃いめの文字色に */
.area-guide .page-hero .lead { color: #3a3229; }
/* 写真をあとから入れるためのプレースホルダー枠（カルチャー等） */

/* お知らせ：本文フィード＋右カテゴリー列 */
.news-layout { display: grid; grid-template-columns: 1fr 220px; gap: var(--sp-8); align-items: start; }
.news-main { min-width: 0; }
.news-side { position: sticky; top: 140px; }
.news-side__title { font-family: var(--font-heading); font-weight: 500; font-size: 1rem; letter-spacing: 0.08em; margin: 0 0 var(--sp-2); padding-bottom: var(--sp-2); border-bottom: 1px solid rgba(26, 20, 15, 0.22); color: #1a140f; }
.news-cats { list-style: none; margin: 0; padding: 0; }
.news-cats li { border-bottom: 1px solid rgba(26, 20, 15, 0.12); }
.news-cats a { display: block; padding: 11px 2px; font-size: 0.92rem; color: #4c4438; }
.news-cats a:hover { color: var(--color-gold-dk); text-decoration: none; cursor: pointer; }
.news-cats a.is-active { color: var(--color-gold-dk); font-weight: 500; }
/* 横幅1010px以下：お知らせのカテゴリーを本文より上（ページ上部）へ */
@media (max-width: 1010px) {
  .news-layout { grid-template-columns: 1fr; gap: var(--sp-6); }
  .news-side { position: static; order: -1; margin: var(--sp-4) 0 var(--sp-5); }
}
/* お知らせ：最初の記事の日付の前の余白を大幅に縮小（セクション上部パディングを詰める） */
.page-hero--news + .section { padding-top: var(--sp-3); }
/* 横幅800px以下は h1 直後の余白もさらに縮小 */
@media (max-width: 800px) {
  .page-hero--news { padding-block-end: var(--sp-3); }
  .page-hero--news + .section { padding-top: var(--sp-2); }
}
.postfeed { margin: var(--sp-3) 0 0; }
/* 最初の記事の日付の前の余白を大幅に縮小（元の約20%＝80%削減） */
.postfeed .post:first-child { padding-top: 0; }
/* 横幅510px以下：news 写真を画面端までフルブリード表示 */
@media (max-width: 510px) {
  .postfeed .post__cover { margin-inline: calc(-1 * var(--sp-3)); }
  .postfeed .post__cover img { border-radius: 0; }
}

/* iPhone SE など極小幅：index-ja の見出しを2行に */

/* about-hero リード文：狭い画面では手動の改行を解除して自然に流す */
@media (max-width: 820px) { .br-lead { display: none; } }

/* 横幅496px以下：about-hero リード文と Contact 説明文を左揃えに */
@media (max-width: 496px) {
  .about-hero__lead { text-align: left; }
  .contact__lead { text-align: left; }
}

/* 横幅620px以下：area-guide の各フィード（食事・カフェ／癒し／観光／カルチャー）を画面端までフルブリード表示 */
@media (max-width: 620px) {
  .area-guide .feed { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
  .area-guide .feed-card { border-radius: 0; border-left: 0; border-right: 0; }
}
.post { padding: var(--sp-8) 0; border-bottom: 1px solid var(--color-hairline); }
.post:first-child { padding-top: var(--sp-4); }
.post__meta { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.post time { color: var(--color-accent); font-size: 0.85rem; letter-spacing: 0.06em; }
.post__cat {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  color: #cbb489;
  border: 1px solid rgba(201, 168, 106, 0.5);
  border-radius: 2px;
  padding: 3px 10px;
  white-space: nowrap;
}
.post__title { font-size: 1.7rem; font-weight: 500; line-height: 1.45; margin-bottom: var(--sp-4); }
.post__title a { color: inherit; }
.post__title a:hover { color: var(--color-accent); text-decoration: none; }
.post__cover { margin: 0 0 var(--sp-5); }
/* 一覧のサムネイルも記事ページと同じく元の縦横比のまま表示（トリミングしない） */
.post__cover img { width: 100%; height: auto; display: block; border-radius: 2px; }

/* 記事ページの写真は、どんな縦横比でもトリミングせず全体を表示
   （縦長・横長・正方形のどれでも、未加工のままアップしてもきれいに収まる） */
/* 記事本文：テキストと写真の列幅をそろえる（読みやすい約720px幅に統一） */
#js-article .post--single { max-width: 720px; margin-inline: auto; }
.post--single .post__body p { max-width: none; }           /* テキストを列幅いっぱい＝写真と同じ幅に */
.post--single .post__cover { margin: var(--sp-6) auto; text-align: center; }  /* 写真の上下に余白 */
/* 本文末のリンク（公式サイト等） */
/* Instagram埋め込み（記事内） */
.post--single .post__ig { margin: var(--sp-6) auto; display: flex; justify-content: center; }
.post--single .post__ig .instagram-media { margin: 0 auto !important; max-width: 540px !important; width: 100% !important; }
.post--single .post__link { margin-top: var(--sp-6); }
/* エリアガイドのリンクと同じ「枠線つきボタン」デザイン */
.post--single .post__link a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border: 1px solid currentColor;
  border-radius: var(--radius-btn);
  color: var(--color-gold-dk);
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.post--single .post__link a:hover { background: var(--color-gold-dk); border-color: var(--color-gold-dk); color: #fff; text-decoration: none; }
html[lang="en"] .post--single .post__link a { color: #7a5c1c; }
html[lang="en"] .post--single .post__link a:hover { background: #7a5c1c; border-color: #7a5c1c; color: #fff; }
.post--single .post__cover img {
  width: 100%;             /* 全写真を列幅いっぱいに＝本文・他の写真と端がそろう */
  height: auto;            /* 元の比率を維持（トリミングしない。縦長は縦に伸びる） */
  aspect-ratio: auto;
  display: block;
  margin: 0 auto;
}
.post__body p { max-width: 72ch; line-height: 1.95; margin-bottom: var(--sp-3); color: var(--color-on-dark-soft); }
.post__body p:last-child { margin-bottom: 0; }

/* ページネーション */
.pagination { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-8); }
.pagination a, .pagination span {
  min-width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 14px;
  border: 1px solid var(--color-hairline);
  border-radius: 2px;
  font-size: 0.9rem; letter-spacing: 0.04em;
}
.pagination a { color: var(--color-text); }
.pagination a:hover { border-color: var(--color-accent); color: var(--color-accent); text-decoration: none; }
.pagination .is-current { background: var(--color-accent); border-color: var(--color-accent); color: #221c16; font-weight: 500; }
.pagination__next { font-weight: 500; }
@media (max-width: 720px) {
  .post__title { font-size: 1.35rem; }
}

/* news-ja：明るい背景で軽やかに（真っ黒を避ける） */
.page-hero--light { background: var(--color-bg-light); border-bottom-color: rgba(26, 20, 15, 0.12); }
.page-hero--light .eyebrow { color: var(--color-gold-dk); }
.page-hero--light h1 { color: #1a140f; }
.section--light .post { border-bottom-color: rgba(26, 20, 15, 0.12); }
.section--light .post time { color: var(--color-gold-dk); }
.section--light .post__cat { color: var(--color-gold-dk); border-color: rgba(154, 123, 63, 0.5); }
.section--light .post__title { color: #1a140f; }
.section--light .post__title a:hover { color: var(--color-gold-dk); }
.section--light .post__body p { color: #4c4438; }
.section--light .pagination a, .section--light .pagination span { border-color: rgba(26, 20, 15, 0.18); }
.section--light .pagination a { color: #3a3229; }
.section--light .pagination a:hover { border-color: var(--color-gold-dk); color: var(--color-gold-dk); }
.section--light .pagination .is-current { background: var(--color-gold-dk); border-color: var(--color-gold-dk); color: #fff; }

/* ---------- Info table ---------- */

/* ---------- Footer (New Redesign) ---------- */
.site-footer {
  background: #191919 url('../img/showcase-bg.webp') center/cover;
  position: relative;
  padding-block: var(--sp-8) var(--sp-4);
  font-size: 0.9rem;
  color: rgba(242, 235, 224, 0.78);
}
.site-footer::before {
  content: ""; position: absolute; inset: 0; background: rgba(18, 18, 18, 0.9);
}
.site-footer .container { position: relative; z-index: 2; }

.footer-grid {
  display: grid;
  grid-template-columns: 320px 180px 180px auto;
  gap: 40px;
  align-items: flex-start;
  margin-bottom: var(--sp-6);
}

.footer-brand-area .footer-logo { height: 50.4px; width: auto; margin: 0 0 24px -10px; display: block; } /* 1.2倍 (42→50.4)。左のmargin-10pxは画像の透明余白を打ち消して文字・ハニカムロゴと左端を揃える */
.footer-brand-area p { color: rgba(255,255,255,0.7); font-size: 0.85rem; line-height: 1.6; margin-bottom: 24px; }
.footer-oplogo { display: inline-block; margin: var(--sp-1) 0 var(--sp-2); }
.footer-oplogo img { width: 140px; height: auto; display: block; opacity: 0.72; transition: opacity 0.2s ease; }
.footer-oplogo:hover img { opacity: 1; }

.footer-action-area {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 24px;
}
.footer-book { margin-top: 0; position: relative; display: inline-block; }
.footer-book__toggle {
  background: #cba86e; color: #1a1a1a;
  border: none; padding: 14px 28px;
  font-weight: 400; font-size: 0.95rem;
  cursor: pointer; border-radius: 2px;
  transition: background 0.2s ease;
  font-family: var(--font-body);
  letter-spacing: 0.04em;
}
.footer-book__toggle:hover { background: #dfbe84; }

.footer-social-inline { display: inline-flex; align-items: center; justify-content: flex-end; }
.footer-social-inline a { display: inline-flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.85); transition: color 0.2s ease; }
.footer-social-inline a:hover { color: var(--color-accent); text-decoration: none; }
.footer-social-inline svg { width: 28px; height: 28px; }

/* フッターの予約ドロップダウン */
.footer-book__menu {
  position: absolute; right: 0; bottom: 100%; margin-bottom: 8px; margin-top: 0;
  background: #2c241b; border: 1px solid rgba(242,236,225,0.16);
  border-radius: 2px; box-shadow: 0 -12px 30px rgba(0,0,0,0.5);
  min-width: 190px; padding: 6px; display: none; transform: none; opacity: 1; visibility: visible;
  flex-direction: column; gap: 4px; z-index: 60;
}
.footer-book::after {
  content: ""; position: absolute; right: 0; bottom: 100%; width: 100%; height: 12px;
}
.footer-book:hover .footer-book__menu, .footer-book:focus-within .footer-book__menu { display: flex; }
.footer-book__menu a {
  display: flex; align-items: center; gap: 12px; /* ロゴとテキストの隙間 */
  padding: 10px 14px; color: #f2ece1; font-size: 0.9rem;
  border-radius: 2px; border: none; background: transparent;
}
.footer-book__menu a:hover { background: rgba(255, 255, 255, 0.08); color: var(--color-accent); text-decoration: none; }
/* SVGロゴを大きくはっきり表示 */
.footer-book__menu svg { width: auto; height: 24px; flex: none; }

.footer-col h3 { color: #fff; font-family: var(--font-body); font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: var(--sp-2); }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: var(--sp-1); }

/* フッター内のリンクホバーをナビバーと同じゴールドに */
.site-footer a { color: rgba(242, 235, 224, 0.72); transition: color 0.2s ease; }
.site-footer a:hover { color: var(--color-accent); text-decoration: none; }

.footer-bottom {
  padding-top: var(--sp-3);
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  font-size: 0.82rem; color: rgba(242, 235, 224, 0.78);
}

/* ---------- Fade-in animation ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Responsive ---------- */
/* 予約リンクはメニュー内専用（PCではナビバーの book-dd を使う） */
.nav__book-m { display: none; }
/* お問い合わせは通常時は隠し、レスポンシブのハンバーガーメニュー内だけに表示 */
.nav__contact-m { display: none; }
/* FAQ（よくあるご質問）もハンバーガーメニュー内のみ（PCナビバーには出さない） */
.nav__faq-m { display: none; }

/* ナビ：ハンバーガー切替（EN/JA・ご予約はメニュー内＝nav__links に配置し、
   ナビバーはロゴ＋ハンバーガーのみに。ロゴの表示比率を保つため） */
@media (max-width: 1360px) {
  .nav__links { display: none; }
  .nav__actions { display: none; }   /* 予約CTAはハンバーガー横に出さない（メニュー内のみ） */
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .brand-tag { font-size: 0.82rem; margin-left: 12px; margin-right: 14px; }  /* バナー文言は残す（入り切らなくなったら下で非表示） */

  .nav.is-open .nav__links {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    position: absolute;
    left: 0; right: 0; top: 100%;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-hairline);
    padding: var(--sp-3);
  }
  /* メニュー内の EN/JA を区切って下部に */
  .nav.is-open .nav__lang {
    margin-top: 4px;
    padding-top: var(--sp-2);
    border-top: 1px solid var(--color-hairline);
  }
  /* メニュー内のご予約リンク（Airbnb / Booking.com） */
  .nav.is-open .nav__contact-m { display: block; }
  .nav.is-open .nav__faq-m { display: block; }
  .nav.is-open .nav__book-m { display: block; }
  .nav.is-open .nav__book-m a { color: var(--color-gold); }
  .nav.is-open .nav__lang + .nav__book-m { margin-top: 4px; padding-top: var(--sp-2); border-top: 1px solid var(--color-hairline); }
}

@media (max-width: 860px) {
  :root { --section-y: 56px; }

  .split,
  .feature,
  .feature--reverse { grid-template-columns: 1fr; gap: var(--sp-4); }
  

  .grid{ grid-template-columns: 1fr; }
  
  
  
  
  .site-header__inner { min-height: 98px; }
  .brand-mark { height: 68px; }
}

@media (min-width: 861px) and (max-width: 1024px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1160px) { .nav__links { gap: 14px; } }
/* バナー文言：横幅が足りなくなったら非表示（ロゴ下配置・スクロール隠しはしない） */
@media (max-width: 580px) { html[lang="ja"] .brand-tag { display: none; } }
@media (max-width: 540px) { html[lang="en"] .brand-tag { display: none; } }

@media (max-width: 1010px) {
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-action-area { align-items: flex-start; }
  .footer-book__menu { right: auto; left: 0; }
}
/* 横幅655〜1010px：ブランド全幅 → DISCOVER・INFORMATION 2列 → ボタン全幅（4カラムのはみ出し解消） */
@media (min-width: 655px) and (max-width: 1010px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 40px; }
  .footer-brand-area { grid-column: 1 / -1; }
  .footer-action-area { grid-column: 1 / -1; }
}
/* 英語ページのフッターの可読性を高める（文字を少し濃く・太く） */
html[lang="en"] .footer-brand-area p { color: rgba(255, 255, 255, 0.85); font-weight: 400; }
html[lang="en"] .site-footer a { color: rgba(242, 235, 224, 0.9); font-weight: 400; }
html[lang="en"] .footer-bottom { color: rgba(242, 235, 224, 0.85); }

/* ---------- Book Now dropdown ---------- */
.book-dd { position: relative; }
.book-dd__toggle { cursor: pointer; white-space: nowrap; }  /* 「宿泊のご予約」が縦1文字ずつに崩れないよう1行固定 */
.book-dd__menu {
  position: absolute;
  right: 0;
  top: 100%;                 /* 隙間をなくしてホバーが途切れないように */
  margin-top: 8px;
  min-width: 190px;
  background: #2c241b;
  border: 1px solid var(--color-hairline);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  border-radius: var(--radius-btn);
  padding: 6px;
  display: none;
  z-index: 60;
}
/* ボタンとメニューの間の透明なブリッジ（ホバーが切れない） */
.book-dd::after {
  content: "";
  position: absolute;
  right: 0;
  top: 100%;
  width: 100%;
  height: 12px;
}
.book-dd.is-open .book-dd__menu,
.book-dd:hover .book-dd__menu,
.book-dd:focus-within .book-dd__menu { display: block; }
.book-dd__menu a {
  display: block;
  padding: 11px 14px;
  color: var(--color-primary);
  font-size: 0.92rem;
  border-radius: 2px;
}
.book-dd__menu a:hover { background: rgba(255, 255, 255, 0.08); color: var(--color-gold); text-decoration: none; }

/* ---------- Hero heading (gothic, smaller{ align-items: flex-end; }
@media (max-width: 860px) {
}

/* ---------- Intro splash (logo, total 2.6s) ---------- */
.no-splash .intro-splash { display: none; }   /* 訪問から24時間はスプラッシュを出さない（index の inline JS が no-splash を付与） */
.intro-splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-dark);
  /* 1.04秒待機後、1.56秒かけてじんわり消える（合計2.6秒 = 従来の30%増） */
  animation: splashOut 1.56s ease-in-out 1.04s forwards;   
}

.intro-splash img {
  width: min(360px, 62vw);
  opacity: 0;
  /* 大きさを変えずに表示 */
  transform: none;
  /* 0.65秒かけてすっとフェードイン */
  animation: splashIn 0.65s ease-in-out forwards;
}
@keyframes splashIn { 
  to { 
    opacity: 1; 
  } 
}
@keyframes splashOut { 
  to { 
    opacity: 0; 
    visibility: hidden; 
  } 
}
@media (prefers-reduced-motion: reduce) {
  .intro-splash { animation: splashOut 0.65s ease 0.65s forwards; }
}

/* ---------- Hero coverflow carousel ---------- */
.hero-carousel {
  position: relative;
  width: 100%;
  height: min(82vh, 720px);   /* 画像を大きく */
  overflow: hidden;
  background: #0d0906;
}
.carousel {                    /* 横に流れるトラック（左へスライド） */
  display: flex;
  height: 100%;
  will-change: transform;
}
.carousel__slide {
  flex: 0 0 auto;
  height: 100%;
  aspect-ratio: 3 / 2;         /* 横長・元の比率を維持（正方形にしない） */
  background-size: cover;
  background-position: center;
}

/* (Removed) .hero-heading — カルーセルに見出しテキストは無いため削除（Outfit除去） */
.carousel__dots {
  position: absolute;
  left: 0; right: 0; bottom: var(--sp-4);
  z-index: 5;
  display: flex;
  justify-content: center;
  gap: 9px;
}
.carousel__dots span {
  width: 30px; /* 9pxから横長に変更 */
  height: 2px; /* 丸ではなくバーにするために高さを低く（元は9px） */
  border-radius: 2px; /* 50%から2pxに変更し、少し角を丸める程度に */
  background: rgba(255,255,255,0.55);
  box-shadow: 0 1px 4px rgba(0,0,0,0.5);
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
}
/* 横長のバーに合わせて、アクティブ時の拡大アニメーション(transform)を削除 */
.carousel__dots span.is-active { background: #fff; }

@media (max-width: 860px) {
  .hero-carousel { height: 66.7vw; }   /* スマホは1枚が全幅の3:2 */
}
@media (prefers-reduced-motion: reduce) {
  .carousel__slide { transition: opacity 0.5s ease; }
}

/* ---------- News titles (text only) ---------- */
.news-titles { list-style: none; margin: 0; padding: 0; }
.news-titles li { border-bottom: 1px solid var(--color-hairline); }
.news-titles li:first-child { border-top: 1px solid var(--color-hairline); }
.news-titles a,
.news-titles span {
  display: block;
  padding: var(--sp-3) 0;
  font-family: var(--font-heading);
  font-size: 1.2rem;
  color: var(--color-primary);
}
.news-titles time {
  display: block;
  font-family: var(--font-body);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--color-accent);
  margin-bottom: 6px;
}
.news-titles a:hover { color: var(--color-accent); text-decoration: none; }

/* ---------- Around: larger, dynamic photo cards ---------- */

   /* 大きく縦長に */

/* Central of Osaka City — 黒っぽい背景の上に地図 */
.osaka-city {
  position: relative;
  padding-block: var(--section-y);
  text-align: center;
  color: var(--color-on-dark-soft);
  background:
    linear-gradient(rgba(10, 7, 5, 0.62), rgba(10, 7, 5, 0.42)), /* 上部(文字が乗る空)を濃いめにして可読性を確保 */
    var(--color-dark) url('../img/home-around-1.webp') center / cover no-repeat;
}
.osaka-city .eyebrow { color: #ffffff; }
.osaka-city .section-title { color: var(--color-on-dark); }
.osaka-city .section-title::after { margin-inline: auto; background: var(--color-gold); }
.osaka-city p { color: #ffffff; max-width: 52ch; margin-inline: auto; }
.osaka-city__map { margin: var(--sp-6) auto var(--sp-4); max-width: 500px; }
.osaka-city__map img { width: 100%; height: auto; display: block; }
.osaka-city .address { color: var(--color-on-dark); letter-spacing: 0.05em; }
/* 背景の濃さは変えず、文字影＋ボタン塗りで可読性を確保 */
.osaka-city .eyebrow,
.osaka-city .section-title,
.osaka-city p,
.osaka-city .address {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 8px rgba(0, 0, 0, 0.85), 0 2px 16px rgba(0, 0, 0, 0.6);
}
.osaka-city .badge-link {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: #17120c;
  text-shadow: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
.osaka-city .badge-link:hover { background: #dcc290; border-color: #dcc290; }

/* Tablet/mobile: image below the text in the Where section */
@media (max-width: 860px) {
  .split--wheremobile .split__media { order: 2; }
}
.address {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-primary);
  margin: var(--sp-2) 0 var(--sp-3);
}

/* ---------- Access overlap section ---------- */
.access-section {
  position: relative;
  padding-block: clamp(64px, 10vw, 77px);  /* 上下パディングを詰めて縦幅を約10%縮小（120→77） */
  display: flex;
  align-items: center;
  min-height: 72vh;                         /* 80vh × 0.90（高い画面向けの下限も10%縮小） */
}
.access-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 1;
  filter: grayscale(1);
}
.access-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.3));
}
.access-container {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: flex-end; /* コンテナ内で右側に寄せる */
  width: 100%;
}
.access-card {
  background: var(--color-bg-light);
  padding: var(--sp-8);
  max-width: 500px;
  width: 100%;
}
.access-card .eyebrow { color: var(--color-gold-dk); }
.access-card .section-title { color: #1a140f; }
.access-card .section-title::after { background: var(--color-gold-dk); }
.access-card .access-list li { border-color: rgba(0, 0, 0, 0.12); color: #4c4438; }
.access-card .access-list li strong { color: #1a140f; }
.access-card .access-list li a { color: #4c4438; display: block; }
.access-card .access-list li a:hover { color: var(--color-gold-dk); }
.access-card .access-list li a:hover strong { color: var(--color-gold-dk); }
.access-card .badge-link { background: #1a140f; border-color: #1a140f; color: #fff; }
.access-card .badge-link:hover { background: #fff; border-color: #1a140f; color: #1a140f; }

@media (max-width: 860px) {
  .access-section { min-height: auto; padding-block: var(--sp-4); }
  .access-container { justify-content: center; }
  .access-card { padding: var(--sp-4); }
}

/* スマホ: カードを半透明にして背景の白黒写真を透けさせる（可読性優先） */
@media (max-width: 630px) {
  .access-card {
    background: rgba(235, 231, 223, 0.82);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
  }
}

/* ---------- Shitsurae Band ---------- */
.shitsurae-band { display: flex; flex-wrap: wrap; gap: 0; width: 100%; }
.shitsurae-band figure { flex: 1 1 25%; min-width: 0; aspect-ratio: 36 / 54; height: auto; overflow: hidden; margin: 0; }
.shitsurae-band img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1s ease; }
.shitsurae-band figure:hover img { transform: scale(1.04); }
@media (max-width: 1024px) { .shitsurae-band figure { flex: 1 1 50%; } }

/* ---------- Floating brand logo (always visible{
  position: fixed;
  right: clamp(12px, 2.2vw, 30px);
  bottom: clamp(12px, 2.2vw, 30px);
  z-index: 45;
  background: #fbf9f4;
  border-radius: 10px;
  padding: 12px 18px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.38);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
@media (max-width: 860px) {
}

/* ---------- CTA reservation buttons: hover info panel (opens upward) ---------- */
        /* legacy: allow the hover panel to escape the banner */
section.contact--reserve { overflow: visible; }  /* let the hover cards escape the about-style section box */
.cta-book { position: relative; display: inline-block; }
/* Left-anchored so the card opens down-right and never spills past the left edge
   of the left-aligned CTA (about-style layout). */
.cta-book .book-tip {
  left: 0;
  top: calc(100% + 12px);
  bottom: auto;
  transform: translateY(-6px);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.55);
  z-index: 40;
}
.cta-book:hover .book-tip { opacity: 1; visibility: visible; transform: translateY(0); }

/* On tablet/phone widths, center the card in the viewport so its edges are never
   clipped by the screen (requested behaviour). */
@media (max-width: 860px) {
  .cta-book .book-tip {
    position: fixed;
    left: 50%;
    top: 50%;
    right: auto;
    bottom: auto;
    width: min(440px, calc(100vw - 32px));
    max-height: 80vh;
    overflow-y: auto;
    transform: translate(-50%, -50%) translateY(10px);
  }
  .cta-book:hover .book-tip { transform: translate(-50%, -50%); }
}

/* =========================================================
   About Page Specific Styles
   ========================================================= */

.about-hero { position: relative; overflow: hidden; text-align: center; color: #fff; }
.about-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.02); }
.about-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(18,13,9,0.62), rgba(18,13,9,0.8)); }
.about-hero__inner { position: relative; z-index: 2; padding-block: clamp(104px, 17vh, 220px); }
.about-hero .eyebrow { color: var(--color-gold); }
/* eyebrowだけを主役に。ゴシック（サンセリフ）で大きく、モダンに見せる */
.about-hero__eyebrow {
  font-family: "Roboto", sans-serif;
  font-style: normal;
  font-weight: 200;
  text-transform: uppercase;
  color: #fff;
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  line-height: 1.12;
  letter-spacing: 0.1em;
  margin: 0;
}
.about-hero__rule { display: block; width: 56px; height: 2px; background: var(--color-gold); margin: var(--sp-4) auto; }
.about-hero__lead { color: rgba(255,255,255,0.9); max-width: 52ch; margin: 0 auto; line-height: 1.95; text-shadow: 0 1px 3px rgba(0,0,0,0.4); }
/* リード文を左揃えに（日英とも／ユーザー指示） */
.about-hero__lead { text-align: left; }

/* ===== 英語ページのみの可読性強化（日本語版の可読性は据え置き） ===== */
html[lang="en"] .shi-item .sub { color: var(--color-gold); font-size: 1rem; font-weight: 400; }
html[lang="en"] .shi-item .desc { color: var(--color-on-dark-soft); font-size: 1rem; font-weight: 300; line-height: 1.95; }
html[lang="en"] .amenity-col li { font-weight: 300; }
html[lang="en"] .about-hero__lead { font-size: 1.3em; }
/* 幅630以下：about 先頭リード文を0.8倍・行間をつめる（日英とも） */
@media (max-width: 630px) {
  .about-hero__lead { line-height: 1.6; }
  html[lang="en"] .about-hero__lead { font-size: 1.04em; }  /* 1.3em × 0.8 */
  html[lang="ja"] .about-hero__lead { font-size: 0.8em; }   /* 1em × 0.8 */
}
html[lang="en"] .access-dl dt { font-weight: 600; font-size: 0.95rem; }
html[lang="en"] .access-dl dd { font-size: 0.95rem; font-weight: 300; color: #3a3229; }
html[lang="en"] .access-note { font-weight: 300; line-height: 1.85; color: #3a3229; }
html[lang="en"] .access-route figcaption,
html[lang="en"] .access-area figcaption { font-size: 0.95rem; color: #4c4438; font-weight: 400; }
html[lang="en"] .note { color: var(--color-on-dark-soft); font-size: 1.05rem; font-weight: 400; line-height: 1.85; }
html[lang="en"] .news-cats a { font-size: 0.95rem; color: #2f2820; font-weight: 400; }

html[lang="en"] .feed-card .feed-card__type { color: #7a5c1c; font-weight: 400; font-size: 0.72rem; }
/* 日本語のエリアページのみ：店種別ラベル(Japanese Diner等)を1.3倍＋濃いめで読みやすく */
html[lang="ja"] .feed-card .feed-card__type { font-size: 0.91rem; color: #7a5c1c; }
html[lang="en"] .feed-card__links a { color: #7a5c1c; font-size: 0.9rem; }
html[lang="en"] .section--light .post time { color: #7a5c1c; font-size: 0.92rem; font-weight: 500; }
html[lang="en"] .section--light .post__cat { color: #5a3f12; border-color: rgba(90, 63, 18, 0.7); font-size: 0.78rem; font-weight: 500; }
/* 日本語のお知らせ：カテゴリーの囲み文字(イベント等)の可読性を高める */
html[lang="ja"] .section--light .post__cat { color: #5a3f12; border-color: rgba(90, 63, 18, 0.7); font-size: 0.78rem; font-weight: 500; }
html[lang="en"] .page-hero--light .eyebrow { color: #7a5c1c; }

.room-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px var(--sp-4); margin-top: var(--sp-6); }
/* 横幅1080px以下：部屋グリッドの余白を半分に */
@media (max-width: 1080px) { .room-grid { gap: 6px var(--sp-2); } }
.room-card { margin: 0; }
.room-card figure { margin: 0; aspect-ratio: 3 / 2; overflow: hidden; }
.room-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.9s ease; }
.room-card:hover img { transform: scale(1.04); }
/* 余白調整：上部を4px(元の半分)、下部を64px(元の倍) */
.room-card figcaption { margin-top: 7.5px; margin-bottom: 8px; font-family: var(--font-heading); font-weight: 500; font-size: 1.15rem; letter-spacing: 0.04em; }
.room-card figcaption .en { font-family: var(--font-heading); font-weight: 400; font-size: 0.72em; letter-spacing: 0.12em; margin-left: 0.6em; color: var(--color-accent); }
.section--light .room-card figcaption .en { color: var(--color-gold-dk); }
@media (max-width: 620px) { .room-grid { grid-template-columns: 1fr; gap: 12px; } }
/* 横幅520px以下：お部屋の写真を左右の余白なし（画面いっぱい）に */
@media (max-width: 520px) {
  .room-grid { margin-inline: calc(-1 * var(--sp-3)); }
  .room-card figcaption { padding-inline: var(--sp-3); }
}
/* 横幅621〜1100px：お部屋の写真を左右余白なし＋中央の余白もゼロにして大きく見せる */
@media (min-width: 621px) and (max-width: 1100px) {
  .room-grid { margin-inline: calc(-1 * var(--sp-3)); gap: 6px 0; }
  /* キャプションと「その写真」の間は狭く（半分）、「次の写真」との間は広く（倍）して所属を明確に */
  .room-card figcaption { padding-inline: var(--sp-3); margin-top: 4px; margin-bottom: 22px; }
}

/* WMF「TASTE MATTERS」風：写真のまわりに余白をもうけたグリッド */
.facil-band { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-5); width: 100%; margin-top: var(--sp-6); padding-inline: clamp(16px, 4vw, 56px); box-sizing: border-box; }
.facil-band figure { margin: 0; }
.facil-band .ph { aspect-ratio: 2 / 3; overflow: hidden; border-radius: 2px; }
.facil-band img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.9s ease; }
.facil-band figure:hover img { transform: scale(1.04); }
.facil-band figcaption { text-align: center; padding: 12px 8px 4px; font-size: 0.95rem; letter-spacing: 0.02em; line-height: 1.4; }
.facil-band figcaption .en,
.kit-grid figcaption .en {
  display: block;
  margin-top: 4px;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
}
@media (max-width: 1000px) { .facil-band { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .facil-band { grid-template-columns: repeat(2, 1fr); padding-inline: 0; gap: var(--sp-5) 0; } }
/* 幅1730以下：写真の左右余白(外側＋列間)を消す。上下(行間)は残す */
@media (max-width: 1730px) { .facil-band { padding-inline: 0; column-gap: 0; } }

.plan-stats { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-8); margin: var(--sp-4) 0 var(--sp-6); padding-bottom: var(--sp-4); border-bottom: 1px solid rgba(0,0,0,0.12); }
.plan-stats .st { display: flex; flex-direction: column; gap: 3px; }
.plan-stats .k { color: #4c4438; font-size: 0.82rem; letter-spacing: 0.08em; }
.plan-stats .v { font-family: var(--font-heading); font-weight: 500; font-size: 1.15rem; color: #1a140f; }
.plan-figure { margin: 0; background: #fbf9f4; padding: clamp(20px, 3.2vw, 52px); border-radius: 2px; box-shadow: 0 16px 44px rgba(0,0,0,0.2); }
.plan-figure img { width: 100%; height: auto; display: block; }
/* 横幅900px以下：間取り図は余白・影なしで横幅いっぱいに */
@media (max-width: 900px) {
  .plan-figure { padding: 0; background: transparent; box-shadow: none; border-radius: 0; }
}
.plan-floors2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4) var(--sp-6); margin-top: var(--sp-6); }
.plan-floors2 .fl { margin: 0; padding-top: var(--sp-2); border-top: 2px solid var(--color-gold-dk); }
.plan-floors2 .fl b { display: block; font-family: var(--font-heading); font-weight: 500; color: var(--color-gold-dk); font-size: 1.05rem; letter-spacing: 0.06em; margin-bottom: 6px; }
.plan-floors2 .fl span { display: block; font-size: 0.95rem; color: #4c4438; line-height: 1.95; }
/* 英語版のみ、間取りの説明文を通常ウェイト(400)に（日本語は据え置き） */
html[lang="en"] .plan-floors2 .fl span { font-weight: 400; }
@media (max-width: 720px) { .plan-floors2 { grid-template-columns: 1fr; gap: var(--sp-3); } }

.kit-note { max-width: 56ch; }
.kit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); margin-top: var(--sp-6); }
.kit-grid figure { margin: 0; }
.kit-grid .ph { aspect-ratio: 3 / 2; overflow: hidden; }
.kit-grid img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.9s ease; }
.kit-grid figure:hover img { transform: scale(1.05); }
/* 余白調整：上部を2px(概ね半分)、下部を40px(元の倍) */
.kit-grid figcaption { margin-top: 8px; margin-bottom: 40px; text-align: center; font-size: 0.95rem; letter-spacing: 0.02em; line-height: 1.4; }
/* 後から写真を追加するための白いプレースホルダー */

@media (max-width: 920px) { .kit-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .kit-grid { grid-template-columns: 1fr; } }
/* 横幅496px以下：キャプションと次の写真の余白を半分に */
@media (max-width: 496px) {
  .kit-grid { gap: var(--sp-2); }
  .kit-grid figcaption { margin-bottom: 20px; }
}

.amenity-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: var(--sp-6) var(--sp-8); margin-top: var(--sp-6); align-items: start; }
.amenity-col h3 { font-family: var(--font-heading); font-weight: 500; font-size: 1.1rem; margin: 0 0 var(--sp-2); padding-bottom: 9px; border-bottom: 2px solid var(--color-gold-dk); }
.amenity-col h3 .en { color: var(--color-gold-dk); font-weight: 400; font-size: 0.68em; letter-spacing: 0.12em; margin-left: 0.6em; }
.amenity-col ul { list-style: none; margin: 0; padding: 0; }
.amenity-col li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); padding: 9px 0; border-bottom: 1px solid rgba(0,0,0,0.1); }
.amenity-col li .ja { font-size: 0.95rem; color: #3a3229; }
.amenity-col li .en { color: #8a8175; font-size: 0.76rem; letter-spacing: 0.03em; text-align: right; white-space: nowrap; }
.amenity-stay { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-12); margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid rgba(0,0,0,0.14); }
.amenity-stay .st .k { color: #4c4438; font-size: 0.82rem; letter-spacing: 0.08em; }
.amenity-stay .st .k .en { margin-left: 0.5em; }
.amenity-stay .st .v { font-family: var(--font-heading); font-weight: 500; font-size: 1.3rem; color: #1a140f; margin-left: var(--sp-3); }
@media (max-width: 760px) { .amenity-grid { grid-template-columns: 1fr; gap: var(--sp-5); } }

#rooms, #shitsurae, #access, #faq, #contact { scroll-margin-top: 132px; }

/* ===== アクセス セクション ===== */
.access-info { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--sp-6) var(--sp-8); margin-top: var(--sp-6); align-items: start; }
.access-dl { margin: 0; }
.access-dl > div { padding: 16px 0; border-bottom: 1px solid rgba(26, 20, 15, 0.14); }
.access-dl > div:first-child { border-top: 1px solid rgba(26, 20, 15, 0.14); }
.access-dl dt { margin-bottom: 5px; font-weight: 500; color: #1a140f; letter-spacing: 0.06em; font-size: 0.9rem; }
.access-dl dd { margin: 0; line-height: 1.8; }
.access-dl dd a { color: inherit; border-bottom: 1px solid currentColor; }
.access-note { margin: 0; max-width: 46ch; }
/* 住所の下に入れる日本語の住所カード画像 */
.access-addr-card { margin: var(--sp-3) 0 0; max-width: 460px; }
.access-addr-card img { width: 100%; height: auto; display: block; border-radius: 4px; }
.access-side .badge-link { margin-top: var(--sp-4); }
/* 路線図・地図は透過PNG。カードを外し、地の色になじませて直接配置 */
.access-route, .access-area { margin: var(--sp-8) auto 0; }
.access-route { max-width: 820px; }
.access-area { max-width: 1040px; }
.access-route img, .access-area img { width: 100%; height: auto; display: block; }
.access-route figcaption, .access-area figcaption { margin-top: var(--sp-4); text-align: center; font-size: 0.85rem; letter-spacing: 0.04em; color: #6a6152; }
@media (max-width: 760px) {
  .access-info { grid-template-columns: 1fr; gap: var(--sp-5); }
  .access-route { margin-top: var(--sp-6); }
}
/* 横幅720px以下：路線図(access-route)を余白なしで画面いっぱいに大きく表示 */
@media (max-width: 720px) {
  .access-route { max-width: none; margin-inline: calc(-1 * var(--sp-3)); }
  .access-route figcaption { padding-inline: var(--sp-3); }
}

/* ===== 文化体験（experiences-ja）：WMF stories 風の分割バナー ===== */

/* reverse も「画像=小(0.7fr)・テキスト=大(1.3fr)」の比率をそろえる（画像だけ巨大化・文章の窮屈さを回避） */

/* home-exp-3 を切り取らず native 比率(3:2)で見せる（余白は明るいパネル色に馴染ませる） */

/* ===== Cultural Experiences: light page theme (match the rest of the site) ===== */
.exp-light { background: var(--color-bg-light); }
.exp-light .page-hero { background: #f3efe8; border-bottom: none; }
.exp-light .page-hero .eyebrow,
.exp-light .eyebrow { color: var(--color-gold-dk); }
.exp-light .page-hero h1,
.exp-light .section-title { color: #1a140f; }
.exp-light .page-hero .lead,
.exp-light p { color: #4c4438; }
.exp-light em { color: #1a140f; }
.exp-light .section-title::after { background: var(--color-gold-dk); }
.exp-light .section { background: transparent; }
.exp-light .section--soft { background: #e6e1d7; }
main.exp-light .note { background: #efece6; border-left-color: var(--color-gold-dk); color: #4c4438; }

/* The Contact section stays dark (about-page design) even on the light Experiences page */
.exp-light .contact { background-color: #1a140f; background-image: url('../img/home-wabisabi-garden.webp'); background-size: cover; background-position: center 30%; }
.exp-light .contact .eyebrow { color: var(--color-gold); }
.exp-light .contact .section-title { color: var(--color-on-dark); }
.exp-light .contact .section-title::after { background: var(--color-gold); }
.exp-light .contact p,
.exp-light .contact .contact__lead { color: var(--color-on-dark-soft); }

/* Experience meta (duration / fee / set) — clean editorial rows */
.exp-meta { margin: var(--sp-6) 0 0; max-width: 440px; }
.exp-meta__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); padding: 14px 0; }
.exp-meta__row + .exp-meta__row { border-top: 1px solid rgba(26, 20, 15, 0.12); }
.exp-meta dt { margin: 0; font-family: "Roboto", var(--font-body); font-weight: 400; font-size: 1rem; letter-spacing: 0.06em; text-transform: uppercase; color: #7b6232; }
.exp-meta dd { margin: 0; font-family: "Roboto", var(--font-body); font-weight: 300; font-size: 1rem; line-height: 1.3; color: #7b6232; white-space: nowrap; }
.exp-meta__u { margin-left: 0.5em; font-size: 0.8rem; font-weight: 300; letter-spacing: 0; text-transform: none; color: #7b6232; }

/* Full-bleed alternating experience cards (image edge-to-edge, equal height as the text panel) */
.exp-fb { display: grid; grid-template-columns: 45% 55%; align-items: stretch; }
.exp-fb--reverse { grid-template-columns: 55% 45%; }
.exp-fb--reverse .exp-fb__media { order: 2; }
.exp-fb__media { position: relative; min-height: 520px; overflow: hidden; }
.exp-fb__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.exp-fb__body { display: flex; align-items: center; padding: clamp(40px, 6vw, 104px); }
.exp-fb__inner { max-width: 560px; width: 100%; }
/* Accent card (Sado): panel a touch darker than the others */
.exp-fb--accent .exp-fb__body { background: #E6E1D7; }
.exp-fb--accent .exp-meta__row + .exp-meta__row { border-top-color: rgba(26, 20, 15, 0.16); }
/* Below 1580px: stack — text on top, photo full-width below */
@media (max-width: 1580px) {
  .exp-fb, .exp-fb--reverse { grid-template-columns: 1fr; }
  .exp-fb__media, .exp-fb--reverse .exp-fb__media { order: 2; }
  .exp-fb__media { position: static; min-height: 0; aspect-ratio: auto; height: clamp(280px, 45vw, 560px); }
  .exp-fb__media img { position: static; }
  .exp-fb__body { padding: clamp(32px, 5vw, 72px) clamp(20px, 5vw, 72px); }
}

/* ===== Contact（予約・お問い合わせ） ===== */
.contact {
  text-align: left;
  position: relative;
  background-color: #1a140f;
  background-image: url('../img/home-wabisabi-garden.webp');
  background-size: cover;
  background-position: center 30%;
  overflow: hidden;
}
/* 写真の上に暗めのグラデーション（左＝濃く文字が読みやすく、右＝庭が見える） */
.contact::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(18, 13, 9, 0.9) 0%, rgba(18, 13, 9, 0.8) 45%, rgba(18, 13, 9, 0.5) 100%);
}
.contact > .container { position: relative; z-index: 1; }
.contact .eyebrow { display: block; }
.contact__lead { max-width: 60ch; margin: var(--sp-4) 0 var(--sp-6); line-height: 1.95; }

/* よくあるご質問（FAQ・アコーディオン） */
.faq-list { max-width: 760px; margin-top: var(--sp-6); }
.faq-item { border-bottom: 1px solid var(--color-hairline); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4) 0; font-family: var(--font-heading); font-weight: 500; font-size: 1.08rem; color: var(--color-on-dark); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "＋"; font-size: 1.2rem; line-height: 1; color: var(--color-gold); transition: transform 0.25s ease; flex-shrink: 0; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item__a { padding: 0 0 var(--sp-4); }
.faq-item__a p { margin: 0; line-height: 1.95; color: var(--color-on-dark-soft); max-width: 68ch; }
.contact__actions { display: flex; justify-content: flex-start; flex-wrap: wrap; gap: var(--sp-3); }
.contact__btn { display: inline-flex; align-items: center; gap: 10px; }
.contact__btn svg { width: auto; height: 20px; flex: 0 0 auto; }

/* ===== 運営会社 セクション ===== */
.company { display: grid; grid-template-columns: 260px 1fr; gap: var(--sp-7); margin-top: var(--sp-6); align-items: start; }
.company__logo { display: block; }
.company__logo img { width: 100%; max-width: 220px; height: auto; opacity: 0.95; }
.company__body p { max-width: 66ch; line-height: 1.9; }
.company__body .badge-link { margin-top: var(--sp-4); }
@media (max-width: 760px) {
  .company { grid-template-columns: 1fr; gap: var(--sp-5); }
  .company__logo img { max-width: 180px; }
}

.shi-lead { max-width: 62ch; }
.shi-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-8) var(--sp-6); margin-top: var(--sp-8); }
.shi-item .ph { aspect-ratio: 4 / 3; overflow: hidden; margin-bottom: 20px; }
.shi-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.9s ease; }
.shi-item:hover img { transform: scale(1.04); }

.shi-item h3 { font-family: var(--font-heading); font-weight: 500; font-size: 1.25rem; margin: 0 0 5px; }
.shi-item .sub { color: var(--color-accent); font-size: 0.92rem; margin: 0 0 11px; }
.shi-item .desc { margin: 0; color: var(--color-grey); font-size: 0.92rem; line-height: 1.9; }
@media (max-width: 720px) { .shi-list { grid-template-columns: 1fr; gap: var(--sp-6); } }

/* =========================================================
   Index / shared components (merged from styleforindex-ja)
   ========================================================= */
/* Short note under the Wabi-Sabi heading */
.jp-beauty {
  margin: var(--sp-2) 0 var(--sp-6);
  max-width: 46ch;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: clamp(1.2rem, 2.2vw, 1.7rem);
  line-height: 1.5;
  color: var(--color-primary);
}

/* About Hachinoya: all text grouped in the left column, image tall on the right */
.split--about { align-items: center; }
.split--about .split__body { align-self: center; }
.split--about .split__body p:not(.eyebrow) { line-height: 1.95; }
.split--about .split__body p:not(.eyebrow) + p { margin-top: var(--sp-4); }
.split--about .split__media { position: static; }
/* ドア写真は本来の縦長比率(1006:1202)で表示＝テキスト列の高さに引き伸ばさず、横長トリミングしない */
.split--about .split__media .figure { position: static; inset: auto; aspect-ratio: 1006 / 1202; margin: 0; overflow: hidden; height: auto; }
.split--about .split__media .figure img.cover { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 860px) {
  .split--about .split__media .figure { aspect-ratio: 1006 / 1202; }
}

/* Tablet/mobile: image below the text in the Where section */
@media (max-width: 860px) {
  .split--wheremobile .split__media { order: 2; }
}
.address {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-primary);
  margin: var(--sp-2) 0 var(--sp-3);
}

/* ---------- Access feature list ---------- */
.access-list { list-style: none; margin: 0 0 var(--sp-4); padding: 0; }
.access-list li {
  padding: 12px 0;
  border-bottom: 1px solid var(--color-hairline);
  color: var(--color-grey);
}
.access-list li strong { color: var(--color-primary); font-weight: 600; }
.access-list li a { color: var(--color-grey); display: block; }
.access-list li a:hover { text-decoration: none; color: var(--color-accent); }
.access-list li a:hover strong { color: var(--color-accent); }

/* ---------- Rooms spec subheading ---------- */
.rooms-spec {
  font-family: var(--font-body);
  letter-spacing: 0.06em;
  font-size: 1rem;
  color: var(--color-grey);
  margin: calc(-1 * var(--sp-3)) 0 var(--sp-6);
}
.rooms-spec strong { color: var(--color-primary); font-weight: 600; }
.section--light .rooms-spec { color: #4c4438; }
.section--light .rooms-spec strong { color: #1a140f; }

/* ---------- Rooms tiles (clean grid) ---------- */
.rooms-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}
.rooms-tiles figure { margin: 0; overflow: hidden; aspect-ratio: 4 / 3; }
.rooms-tiles img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s ease; }
.rooms-tiles figure:hover img { transform: scale(1.045); }
@media (max-width: 860px) {
  /* SHITSURAE のように余白なしで全幅に（写真間の隙間・左右余白をなくす） */
  .rooms-tiles { grid-template-columns: repeat(2, 1fr); gap: 0; width: 100vw; margin-left: calc(50% - 50vw); }
}
@media (max-width: 520px) {
  .rooms-tiles { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Rooms detail note (kitchen / bath / laundry) ---------- */
.rooms-note { max-width: 60ch; color: var(--color-grey); }
.section--light .rooms-note { color: #4c4438; }

/* ---------- Instagram feed (static preview, 3 across) ---------- */
/* ===== Instagram CTA（大きな1枚＋重ねCTA／フィードは出さない） ===== */
.ig-cta { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 7; }
.ig-cta__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.1s ease; }
.ig-cta:hover .ig-cta__img { transform: scale(1.04); }
.ig-cta__overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; gap: var(--sp-2);
  padding: var(--sp-4); color: #fff;
  background: linear-gradient(to bottom, rgba(20, 16, 12, 0.46), rgba(20, 16, 12, 0.54));
  transition: background 0.3s ease;
}
.ig-cta:hover .ig-cta__overlay { background: linear-gradient(to bottom, rgba(20, 16, 12, 0.52), rgba(20, 16, 12, 0.6)); }
.ig-cta__icon { width: 38px; height: 38px; }
.ig-cta__name { font-size: 1.45rem; letter-spacing: 0.04em; }

.ig-cta__btn {
  margin-top: var(--sp-2); display: inline-block; padding: 0.75em 1.8em;
  border: 1px solid rgba(255, 255, 255, 0.85); color: #fff;
  font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase;
  transition: background 0.25s ease, color 0.25s ease;
}
.ig-cta:hover .ig-cta__btn { background: #fff; color: #1a140f; }
@media (max-width: 640px) {
  .ig-cta { aspect-ratio: 4 / 3; }
  .ig-cta__name { font-size: 1.2rem; }
  
}

/* ===== News「続きを読む / Read more」可読性 ===== */
.post__more { margin-top: var(--sp-3); }
.post__more a {
  display: inline-flex; align-items: center; gap: 0.35em;
  font-weight: 600; letter-spacing: 0.03em;
  color: var(--color-accent);
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.post__more a:hover { color: #fff; text-decoration: none; }   /* ホバーは色を濃くするだけ（追加の下線なし／下線は本文と同じまま） */
.section--light .post__more a { color: #6d551f; }       /* 明るい背景で十分なコントラスト */
.section--light .post__more a:hover { color: #463714; text-decoration: none; }  /* ホバーは色を濃くするだけ */
html[lang="ja"] .post__more a { font-weight: 400; }     /* 日本語の「続きを読む」は細字（本文と同じ太さ） */

/* ===== Legacy footer (英語ページ index.html等の旧フッター用・追加のみ) ===== */
/* ---------- Footer logo ---------- */
.footer-logo { height: 56px; width: auto; margin-bottom: var(--sp-3); display: block; }

/* ---------- Footer social icons (column right of Information) ---------- */
.site-footer { position: relative; }