/* ホテルしみず — ページ固有の差分 (body.page-<name> 配下だけ) */

/* トップ: 特長カードの番号 */
.page-index .feature-list { counter-reset: feature; }
.page-index .feature-card__num { color: var(--role-caption); font-size: var(--fs-small); font-variant-numeric: tabular-nums; }

/* 2026-09-07 top visual refresh — SORANO-inspired immersive composition */
.page-index { --hero-white:#fff; --hero-ink:#172329; }
.page-index .quick-nav { display:none; }
/* 2026-09-23 トップのヘッダーを下層と同じ骨格にする（デザイナー指摘）
   以前はトップだけ 画面幅いっぱいの独自配置（1440px でロゴ左 58px / 下層 120px）、
   ロゴ 28px（下層 24px）、PC でもメニューボタン式、390px で高さ 95px（下層 65px）、
   メニューボタンも別デザインだった。
   ・骨格（段 .container・高さ・上段の営業時間と電話・ロゴ寸法・ナビ方式・
     メニューボタンの寸法と位置・ドロワー）は components.css C-01/C-02 をそのまま使う
   ・トップで変えるのは「写真に重ねる配色」だけ
   ・PC(≥1024) は下層と同じく追従する。写真の上では透明、写真を過ぎたら
     下層と同じ白いヘッダーになる（site.js §2b が .is-solid を付ける）
   ・JS 無効時は追従せず、写真の上に置いたまま（ページと一緒に流れる）
   🔴 写真は4秒ごとに切り替わる。どの写真でも白文字が読めるよう、ヘッダーの下地に
      暗いグラデーションを敷く（scripts/verify_header_contrast.py で全写真を実測）。 */
.page-index .site-header {
  position: absolute; inset: 0 0 auto; z-index: var(--z-header);
  border-bottom-color: transparent;
  background: transparent;
  color: #fff;
  --role-text: #fff; --role-heading: #fff; --role-muted: rgba(255,255,255,.92);
  --role-line: rgba(255,255,255,.62); --role-focus: var(--c-focus-dark);
  transition: background-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
/* 下地はヘッダー + その下 64px を1枚のグラデーションで覆う。
   ヘッダー本体と延長部を別々に塗ると、高さの端数で 1px の隙間ができ、
   写真の明るい線がヘッダーの下に出た（1440px で実際に出た）。
   ヘッダーは z-index を持つので、-1 の下地はヘッダーの中身の後ろに描かれる。 */
.page-index .site-header::before {
  content: ""; position: absolute; inset: 0 0 -64px; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(6,14,19,.84) 0%, rgba(6,14,19,.7) 45%, rgba(6,14,19,.4) 68%, rgba(6,14,19,0) 100%);
}
.page-index .site-header__hours,
.page-index .site-header__tel,
.page-index .brand, .page-index .brand:visited { color: #fff; }
.page-index .site-header__utility { text-shadow: 0 1px 6px rgba(0,0,0,.55); }
/* 白いロゴにも文字と同じ影（明るい写真の上で縁を保つ） */
.page-index .brand__logo--light { filter: drop-shadow(0 1px 4px rgba(0,0,0,.5)); }
.page-index .site-header__tel-label { background-color: rgba(255,255,255,.18); box-shadow: inset 0 0 0 1px rgba(255,255,255,.55); }
.page-index .nav-toggle { color: #fff; background-color: rgba(6,14,19,.28); border-color: rgba(255,255,255,.72); }
.page-index .nav-toggle:hover, .page-index .nav-toggle:focus-visible { color: #fff; background-color: rgba(255,255,255,.16); }
@media (min-width: 1024px) {
  html.js .page-index .site-header { position: fixed; }
  .page-index .site-nav { background-color: transparent; }
  .page-index .site-nav__list a { color: #fff; background-color: transparent; text-shadow: 0 1px 6px rgba(0,0,0,.55); }
  .page-index .site-nav__list a:hover,
  .page-index .site-nav__list a:focus-visible { color: #fff; background-color: rgba(255,255,255,.16); }
  /* 写真を過ぎたら下層と同じ白いヘッダー */
  .page-index .site-header.is-solid {
    background: var(--c-surface); color: var(--c-ink); border-bottom-color: var(--c-line);
    --role-text: var(--c-ink); --role-heading: var(--c-navy); --role-muted: var(--c-ink-2);
    --role-line: var(--c-line); --role-focus: var(--c-focus);
  }
  .page-index .site-header.is-solid::before { display: none; }
  .page-index .site-header.is-solid .site-header__hours { color: var(--c-ink-2); }
  .page-index .site-header.is-solid :is(.site-header__tel, .brand) { color: var(--c-navy); }
  .page-index .site-header.is-solid :is(.site-header__utility, .site-nav__list a) { text-shadow: none; }
  /* 白いヘッダーでは下層と同じ金のロゴ */
  .page-index .site-header.is-solid .brand__logo--light { display: none; }
  .page-index .site-header.is-solid .brand__logo--solid { display: block; }
  .page-index .site-header.is-solid .site-header__tel-label { background-color: var(--c-navy); box-shadow: none; }
  .page-index .site-header.is-solid .site-nav__list a { color: var(--c-navy); background-color: var(--c-surface); }
  .page-index .site-header.is-solid .site-nav__list a:hover,
  .page-index .site-header.is-solid .site-nav__list a:focus-visible { background-color: var(--c-mist); }
}
.hero--immersive { position:relative; min-height:min(920px,100svh); height:100svh; color:#fff; background:#243238; overflow:hidden; }
.hero-slides,.hero-slide,.hero-shade { position:absolute; inset:0; }
.hero-slide { opacity:0; transition:opacity 1.25s ease; }
.hero-slide.is-active { opacity:1; }
/* 2026-09-23 約4秒ごとのフェード切替。ゆっくりしたズームは「いま出ている1枚」と
   「フェードアウト中の1枚(.is-prev)」にだけ掛ける。以前は全写真で読み込み時に1回だけ
   動いたため、2枚目以降は止まった写真で出ていた。
   🔴 is-active → is-prev で animation-name を変えないこと。名前が変わると
   ズームが最初に戻り、フェードアウト中の写真が一瞬縮んで見える。 */
.hero-slide img { width:100%; height:100%; object-fit:cover; object-position:center; transform:scale(1.03); }
.hero-slide.is-active img, .hero-slide.is-prev img { animation:heroKen 6s ease-out both; }
/* 2026-09-22 追加したスライド。見せたい所が画面に残るよう、写真ごとに切り取り位置を決める。
   ヒーローの文字は左側に乗るので、人物の顔が文字の真下に来ないようにしている。 */
.hero-slide--irori img { object-position:center 62%; }
.hero-slide--kimono img { object-position:center 80%; }            /* 横長の画面では歩く人を中心に */
.hero-slide--art img { object-position:center 40%; }
.hero-slide--festival img { object-position:62% 45%; }
/* 縦長で原本が533pxしかない写真は、横長の広い画面では2.7倍に引き伸ばされて粗くなる。
   縦長の画面でだけ出す（JS はその時見えているスライドだけを回す）。 */
.hero-slide--narrow { display:none; }
/* 逆に、横長の写真に長い文字（作品クレジット）が焼き込まれているものは、
   縦長の画面では文字が左右で切れてロゴと重なり、主役の作品も画面外に出る。
   横長の画面でだけ出す。 */
@media (max-width:767px) {
  .hero-slide--narrow { display:block; }
  .hero-slide--wide { display:none; }
  .hero-slide--kimono img { object-position:center 55%; }         /* 縦長の画面では鯉のぼりまで入れる */
  .hero-slide--hasagake img { object-position:35% center; }       /* はさ掛けを中心に */
}
.hero-slide figcaption { position:absolute; right:clamp(20px,3vw,50px); bottom:28px; z-index:2; color:rgba(255,255,255,.86); font-size:.75rem; text-shadow:0 1px 4px #000; }
.hero-shade { background:linear-gradient(90deg,rgba(8,18,24,.72) 0%,rgba(8,18,24,.35) 48%,rgba(8,18,24,.1) 80%),linear-gradient(0deg,rgba(5,12,16,.48),transparent 55%); z-index:1; }
.hero-stage { position:relative; z-index:2; height:100%; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding-top:calc(var(--header-h-real, 112px) + 8px); }
.hero--immersive .hero__content { max-width:720px; padding:0; }
.hero--immersive .hero__eyebrow { color:#fff; letter-spacing:.32em; margin-bottom:20px; }
.hero--immersive .hero__title { gap:15px; }
.hero--immersive .hero__name { color:#fff; font-size:clamp(3rem,7vw,6.8rem); line-height:1.05; letter-spacing:.12em; text-shadow:0 3px 25px rgba(0,0,0,.25); }
.hero--immersive .hero__desc { color:#fff; font-size:clamp(1rem,1.7vw,1.35rem); max-width:40em; letter-spacing:.08em; line-height:1.9; }
.hero--immersive .hero__lead { font-family:var(--ff-display); font-size:clamp(1rem,1.5vw,1.25rem); letter-spacing:.08em; }
.btn--hero,.btn--hero-ghost { min-height:56px; padding:14px 28px; border-radius:0; display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; }
.btn--hero,.btn--hero:visited { background:#fff; color:#203036; }
.btn--hero-ghost,.btn--hero-ghost:visited { border:1px solid rgba(255,255,255,.7); color:#fff; background:rgba(12,28,34,.2); }
.hero-progress { display:flex; align-items:center; gap:12px; position:absolute; left:var(--gutter); bottom:36px; font-size:.7rem; letter-spacing:.16em; }
.hero-progress__line { width:110px; height:1px; background:rgba(255,255,255,.35); overflow:hidden; }
.hero-progress__line i { display:block; width:20%; height:100%; background:#fff; transition:transform .6s ease; transform-origin:left; }
.hero-credit { position:absolute; right:var(--gutter); bottom:52px; max-width:none; font-size:.65rem; color:rgba(255,255,255,.8); }
.hero-scroll { position:absolute; z-index:3; right:24px; top:50%; display:flex; flex-direction:column; align-items:center; gap:12px; color:#fff !important; text-decoration:none; font-size:.6rem; letter-spacing:.2em; writing-mode:vertical-rl; }
.hero-scroll i { width:1px; height:62px; background:rgba(255,255,255,.75); }
@keyframes heroKen { from{transform:scale(1.03)} to{transform:scale(1.10)} }
.feature-section { position:relative; overflow:hidden; background:#fbf8f0; padding-block:clamp(85px,10vw,150px); }
.feature-section__sketch { position:absolute; width:min(720px,65vw); right:-4vw; top:2%; opacity:.105; mix-blend-mode:multiply; pointer-events:none; }
.feature-section > .container { position:relative; z-index:1; }
.feature-section .section__head { max-width:800px; margin-bottom:clamp(45px,6vw,84px); }
.feature-list { gap:clamp(20px,3vw,42px); }
.feature-card { position:relative; overflow:hidden; min-height:430px; border:0; border-radius:0; background:rgba(255,255,255,.68); box-shadow:0 18px 55px rgba(74,62,41,.08); isolation:isolate; }
.feature-card__art { position:absolute; inset:auto -7% -5% auto; width:112%; height:68%; object-fit:contain; object-position:right bottom; opacity:.72; mix-blend-mode:multiply; z-index:-1; }
.feature-card .card__body { padding:clamp(26px,3vw,44px); min-height:430px; background:linear-gradient(180deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.75) 42%,rgba(255,255,255,.14) 100%); }
.feature-card .card__title { font-family:var(--ff-display); font-size:clamp(1.7rem,2.4vw,2.4rem); }
.feature-card .card__text { max-width:24em; line-height:1.9; }
.feature-card__num { letter-spacing:.18em; }
@media(max-width:767px){
 .hero--immersive{min-height:720px}.hero-stage{padding-top:66px;padding-bottom:80px}.hero--immersive .hero__name{font-size:clamp(2.65rem,14vw,4.4rem)}.hero--immersive .hero__desc{line-height:1.65}.hero--immersive .hero__lead{display:none}.hero__actions{gap:10px}.btn--hero,.btn--hero-ghost{min-height:50px;padding:11px 16px;font-size:.85rem}.hero-credit{bottom:62px}.hero-scroll{display:none}.hero-progress{bottom:28px}
 .feature-section__sketch{width:110vw;right:-28vw;top:0}.feature-card{min-height:380px}.feature-card .card__body{min-height:380px}.feature-card__art{height:64%;}
}
@media(prefers-reduced-motion:reduce){.hero-slide img,.hero-slide.is-active img,.hero-slide.is-prev img{animation:none}.hero-slide{transition:none}}
/* polish after visual inspection */
.hero--immersive .hero__desc { max-width:44em; word-break:keep-all; overflow-wrap:anywhere; }
.hero--immersive .hero__desc::first-line { word-break:normal; }
.hero--immersive .hero__name { white-space:nowrap; }
.hero-credit { font-size:.72rem; text-shadow:0 1px 5px rgba(0,0,0,.8); }
@media(max-width:767px){.hero--immersive .hero__desc{word-break:normal}.hero--immersive .hero__name{white-space:normal}}
/* mobile overflow and readability fix after 390px visual gate */
@media(max-width:767px){
 .hero-credit{right:16px;left:16px;bottom:64px;text-align:right;white-space:normal;line-height:1.35}
}
/* 2026-09-22: トップにも下層と同じ下部固定バーを出す（高橋さん指示）。
   以前は「ヒーロー内に予約・電話があるので二重になる」として隠していたが、
   導線が重複しないよう **ヒーロー内のボタンの方を隠す** 方針に変えた。
   ・JS有効 かつ <1024px … 固定バーを出し、ヒーロー内ボタンを隠す
   ・JS無効 … 固定バーは流し込みで最後に出る。ヒーロー内ボタンは残す
     （こちらを隠すと予約導線が消えてしまう）
   下部余白 padding-bottom は base.css の html.js body に任せる。
   ここで 0 に戻すと固定バーが本文の末尾を覆う。 */
@media(max-width:1023px){
 html.js .page-index .hero__actions{display:none}
 /* ヒーロー下端の要素を固定バーのぶんだけ持ち上げる */
 html.js .page-index .hero-credit{bottom:calc(25px + var(--sticky-h-real, 56px))}
 html.js .page-index .hero-progress{bottom:calc(24px + var(--sticky-h-real, 56px))}
}
@media(max-width:767px){
 /* スライド番号とクレジットが同じ行で重なっていた（以前から）。
    狭い幅ではクレジットを番号の1段上に、左揃えで置く。 */
 .page-index .hero-credit{left:20px;right:20px;text-align:left}
 html.js .page-index .hero-credit{bottom:calc(50px + var(--sticky-h-real, 56px))}
}
@media(max-width:767px){
 .hero-credit{left:20px;right:20px;bottom:25px;text-align:center;width:auto;font-size:.68rem}
}
@media(max-width:767px){
 .hero-slide figcaption{display:none}
 .hero-progress{left:20px;bottom:24px}
 .hero-credit{left:120px;right:20px;bottom:20px;text-align:right;overflow-wrap:anywhere}
}
@media(max-width:767px){
 .hero-credit{left:auto;right:16px;bottom:18px;width:210px;max-width:calc(100% - 140px);font-size:.6rem;line-height:1.25;text-align:right;white-space:normal;overflow:visible}
}
@media(max-width:767px){
 .hero-credit{left:20px;right:20px;bottom:60px;width:auto;max-width:none;text-align:left;font-size:.65rem;line-height:1.35;white-space:normal}
}

/* Q&A ページ導入文 — .section__lead は margin:0 のため、目次との間隔を補う */
.qa-lead { margin-block: 0 var(--sp-6); }
/* アクセス節の地図
   🔴 aspect-ratio の箱に min-height を足すと、高さから幅が逆算されて
      横溢れする (実測: min-height:260px → 幅 260*16/9 = 462px が 320px 画面を割る)。
      下限は付けず、狭い画面では比率そのものを縦長にする。 */
.embed--map .embed__frame { aspect-ratio: 4 / 3; }
@media (min-width: 768px) { .embed--map .embed__frame { aspect-ratio: 16 / 9; } }
.embed--map { margin-block: var(--sp-5); }

/* 動画パネル — 埋め込みをやめ、表紙画像からYouTubeへ送り出す。
   表示時点ではYouTubeへ一切接続しない（表紙画像は自サイト配信）。 */
.video-cards { list-style: none; }
.video-card { margin: 0; }
.video-card__link { position: relative; display: block; text-decoration: none; }
.video-card__thumb { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  object-fit: cover; border-radius: var(--radius-s); background: var(--c-mist); }
.video-card__play { position: absolute; inset-inline-start: 50%; inset-block-start: 50%;
  translate: -50% -50%; display: grid; place-items: center;
  inline-size: 64px; block-size: 64px; border-radius: 50%;
  background: rgb(0 0 0 / .62); color: #fff; }
.video-card__play .icon { inline-size: 26px; block-size: 26px; margin-inline-start: 3px; }
.video-card__link:hover .video-card__play,
.video-card__link:focus-visible .video-card__play { background: rgb(0 0 0 / .82); }
.video-card__label { display: block; margin-block-start: var(--sp-3); font-weight: 700; }
.video-card__caption { margin-block-start: var(--sp-2); font-size: var(--fs-small); color: var(--role-caption); }

/* 安心・安全、水と空気 — 水と空気を並べる。製品写真は元が小さい（187px / 205px）ので
   引き伸ばさず実寸で置き、文章側を主役にする。 */
.care-grid { display: grid; gap: var(--sp-6); }
@media (min-width: 768px) { .care-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-7, var(--sp-6)); } }
.care-item { margin: 0; }
.care-item__title { margin-block: 0 var(--sp-3); }
.care-item__figure { margin: 0 0 var(--sp-3); }
.care-item__figure img { display: block; max-width: 100%; height: auto; border-radius: var(--radius-s); }
.care-item__figure figcaption { margin-block-start: var(--sp-2); font-size: var(--fs-xs); color: var(--role-caption); }
.care-item p + p { margin-block-start: var(--sp-3); }

/* お知らせ・イベント（data/news.json から生成）
   イベントとお知らせを見出しで分け、画像があるものは横並びにする。 */
.news-group + .news-group { margin-block-start: var(--sp-7, var(--sp-6)); }
.news-group__title { margin-block: 0 var(--sp-4); }
.news-list { list-style: none; display: grid; gap: var(--sp-5); }
.news-item { padding-block-end: var(--sp-5); border-bottom: 1px solid var(--role-line); }
.news-item:last-child { border-bottom: 0; padding-block-end: 0; }
.news-item__date { margin: 0 0 var(--sp-2); font-size: var(--fs-small); color: var(--role-caption); }
.news-item__note { margin-inline-start: var(--sp-2); }
.news-item__title { margin: 0 0 var(--sp-3); font-size: var(--fs-h3); }
.news-item__text { margin: 0; }
.news-item__text + .news-item__text { margin-block-start: var(--sp-3); }
.news-item__figure { margin: 0 0 var(--sp-3); }
.news-item__figure img { display: block; width: 100%; max-width: 240px; height: auto;
  border-radius: var(--radius-s); }
.news-item__figure figcaption { margin-block-start: var(--sp-2); font-size: var(--fs-xs); color: var(--role-caption); }
.news-source { margin-block-start: var(--sp-6); font-size: var(--fs-small); }
.news-empty { margin: 0; }
@media (min-width: 768px) {
  /* 画像つきは figure を右に寄せて回り込ませる。max-width があるので溢れない */
  .news-item--media { display: grid; grid-template-columns: 1fr 240px; gap: 0 var(--sp-5); }
  .news-item--media .news-item__date,
  .news-item--media .news-item__title,
  .news-item--media .news-item__text { grid-column: 1; }
  .news-item--media .news-item__figure { grid-column: 2; grid-row: 1 / span 4; margin-block-end: 0; }
}

/* 周辺のおすすめ 4カードのアイコン（Codex納品後に scripts/apply_illustrations.py が貼る）
   🔴 .feature-card と違い、このカードの中にはリンクが入っている。
      そのため overflow: hidden を付けてはいけない（DESIGN R5-3: overflow が visible
      以外の祖先を持つフォーカス可能要素はリングが切れる。許されるのは
      .embed__frame / .site-nav.is-open / .table-scroll / .visually-hidden だけ）。
      はみ出させずに済むよう、絵をカードの内側に収める。 */
.nearby-card { position: relative; isolation: isolate; }
.nearby-card__art { position: absolute; inset: auto 0 0 auto; width: 44%; max-width: 150px;
  height: auto; object-fit: contain; object-position: right bottom;
  opacity: .5; mix-blend-mode: multiply; z-index: -1; pointer-events: none; }
@media (max-width: 767px) { .nearby-card__art { width: 36%; } }