/* IDATSUKA — トップページ（刷新②）。css/tokens.css の変数を使う。
   最初の一画面は写真の上に白。その下は昼・夜の色に従う。箱・角丸・影は使わない。 */
body.home { background: var(--c-bg); color: var(--c-fg); font-family: var(--f-sans); font-weight: 300; }
body.home::before, body.home::after { display: none !important; }   /* 古い紙の粒・光の層は使わない */

/* ── ① 最初の一画面：層を重ねる ── */
.hx { position: relative; height: 100vh; height: 100svh; min-height: 720px; overflow: hidden; color: #fff; background: #1a1916; isolation: isolate; }
.hx-layer { position: absolute; inset: 0; pointer-events: none; }
.hx-move { position: absolute; inset: -70px; transition: transform var(--d-3) var(--ease-calm); will-change: transform; }

/* 背景：5つの景色を重ね、ゆっくり入れ替える（2.4 秒のフェード）。写真が無いあいだは深い色のまま */
.hx-bg { z-index: 0; background: radial-gradient(120% 90% at 30% 20%, #3a342b 0%, #1d1b18 55%, #121110 100%); }
.hx-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 2.4s var(--ease-calm); }
.hx-slide.is-on { opacity: 1; }
.hx-slide img { width: 100%; height: 100%; object-fit: cover; display: block; animation: hx-drift 24s ease-in-out infinite alternate; }
@keyframes hx-drift { from { transform: scale(1.08); } to { transform: scale(1.14); } }

/* 霧：薄い帯を2本、左右にゆっくり流す */
.hx-fog { z-index: 1; }
.hx-mist { position: absolute; left: -30%; width: 160%; height: 34%; border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255,255,255,.16) 0%, rgba(255,255,255,.06) 45%, rgba(255,255,255,0) 72%);
  filter: blur(10px); opacity: .85; }
.hx-mist--a { top: 38%; animation: hx-mist-a 70s ease-in-out infinite alternate; }
.hx-mist--b { top: 58%; height: 26%; opacity: .6; animation: hx-mist-b 95s ease-in-out infinite alternate; }
@keyframes hx-mist-a { from { transform: translateX(-12%); } to { transform: translateX(12%); } }
@keyframes hx-mist-b { from { transform: translateX(10%); } to { transform: translateX(-14%); } }

/* 上下に暗いグラデーション：白い文字が読めるように */
.hx-shade { z-index: 2; background:
  linear-gradient(180deg, rgba(10,9,8,.55) 0%, rgba(10,9,8,0) 26%),
  linear-gradient(0deg, rgba(10,9,8,.72) 0%, rgba(10,9,8,.28) 34%, rgba(10,9,8,0) 60%); }

/* 光：マウスの位置に、柔らかい白（PC のみ。js/home-hero.js が --x / --y を動かす） */
.hx-light { z-index: 3; opacity: 0; transition: opacity var(--d-3) var(--ease-calm); }
.hx.is-pointer .hx-light { opacity: 1; }
.hx-glow { position: absolute; left: 0; top: 0; width: 920px; height: 920px; margin: -460px 0 0 -460px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.13) 0%, rgba(255,255,255,.05) 38%, rgba(255,255,255,0) 70%);
  transform: translate(var(--x, 50vw), var(--y, 50vh)); transition: transform var(--d-3) var(--ease-calm); mix-blend-mode: soft-light; }

/* 波紋：クリックした場所から細い輪が広がって消える（1.8 秒） */
.hx-ripples { z-index: 4; }
.hx-ring { position: absolute; width: 0; height: 0; border: 1px solid rgba(255,255,255,.75); border-radius: 50%; transform: translate(-50%, -50%);
  animation: hx-ring 1.8s var(--ease-calm) forwards; }
@keyframes hx-ring { from { width: 0; height: 0; opacity: .9; } to { width: 420px; height: 420px; opacity: 0; } }

/* 文字の層 */
.hx-text { z-index: 5; pointer-events: none; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-5);
  padding: calc(var(--head-h) + var(--s-4)) var(--gutter) clamp(40px, 8vh, 88px); }
.hx-text a, .hx-text button { pointer-events: auto; }
.hx-copy { max-width: 720px; }
.hx-kicker { font-family: var(--f-serif); font-style: italic; font-weight: 300; font-size: clamp(16px, 1.5vw, 21px); letter-spacing: var(--ls-en); margin: 0 0 var(--s-3); opacity: .9; }
.hx-title { font-family: var(--f-mincho); font-weight: 400; font-size: clamp(40px, 5.6vw, 84px); line-height: 1.32; letter-spacing: .1em; margin: 0 0 var(--s-3); }
.hx-lead { font-family: var(--f-sans); font-weight: 300; font-size: clamp(13px, 1.05vw, 15px); line-height: 2.1; letter-spacing: .14em; margin: 0; opacity: .88; max-width: 34em; }

.hx-ui { display: grid; justify-items: end; gap: var(--s-4); flex: none; }
.hx-picks { display: grid; gap: 10px; }
.hx-picks button { appearance: none; background: none; border: 0; padding: 4px 0; color: #fff; cursor: pointer;
  display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 14px; justify-items: start; opacity: .62;
  transition: opacity var(--d-1) var(--ease-calm); }
.hx-picks i { font-family: var(--f-serif); font-style: normal; font-size: 13px; letter-spacing: .2em; }
.hx-picks b { font-family: var(--f-mincho); font-weight: 400; font-size: 13px; letter-spacing: .22em; min-width: 4.5em; text-align: left; }
.hx-line { display: block; width: 18px; height: 1px; background: currentColor; transition: width var(--d-3) var(--ease-calm); }
.hx-picks button[aria-pressed="true"] { opacity: 1; }
.hx-picks button[aria-pressed="true"] .hx-line { width: 64px; }
.hx-picks button:hover { opacity: 1; }
.hx-picks button:focus-visible { outline: 1px solid #fff; outline-offset: 4px; }
.hx-scroll { display: inline-flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; opacity: .8;
  font-family: var(--f-serif); font-size: 12px; letter-spacing: var(--ls-en-wide); text-transform: uppercase; }
.hx-scroll i { display: block; width: 1px; height: 40px; background: linear-gradient(#fff, rgba(255,255,255,0)); animation: hx-scroll 2.4s var(--ease-calm) infinite; transform-origin: top; }
@keyframes hx-scroll { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

@media (max-width: 760px) {
  .hx-text { flex-direction: column; align-items: stretch; justify-content: flex-end; gap: var(--s-4); }
  .hx-ui { justify-items: start; grid-auto-flow: row; }
  .hx-picks { grid-template-columns: repeat(5, auto); gap: 6px 14px; }
  .hx-picks button { grid-template-columns: auto; gap: 4px; justify-items: start; }
  .hx-picks b { min-width: 0; font-size: 12px; letter-spacing: .14em; }
  .hx-picks button[aria-pressed="true"] .hx-line { width: 28px; }
  .hx-scroll { display: none; }
  .hx-title { font-size: clamp(32px, 9.4vw, 44px); }
}

/* ── ②③ その下：昼・夜の色に従う ── */
.home-main { padding: 0 var(--gutter); }
body.home { font-size: 16px; line-height: 1.95; }   /* 旧 style.css の本文の大きさのまま */
:where(body.home) section { padding: 8rem 0; }   /* 旧 style.css の section の余白を、ここで引き継ぐ */
@media (max-width: 900px) { :where(body.home) section { padding: 5rem 0; } }
body.home .hx button { font-size: 13.3333px; line-height: normal; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-6) 0 var(--s-3); border-bottom: 1px solid var(--c-line); }
.sec-head h2 { font-family: var(--f-mincho); font-weight: 400; font-size: clamp(22px, 2vw, 28px); letter-spacing: .24em; margin: 0; }
.sec-en { margin: 0; font-family: var(--f-serif); font-size: 13px; letter-spacing: var(--ls-en-wide); text-transform: uppercase; color: var(--c-sub); }

/* 部屋 */
.rm-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-5); padding: var(--s-4) 0 var(--s-2); align-items: end; }
.rm a { color: inherit; text-decoration: none; }
.rm-main { display: grid; gap: var(--s-2); padding-bottom: var(--s-2); }
.rm-main i, .rm-list i { font-family: var(--f-serif); font-style: normal; font-size: 14px; letter-spacing: .24em; color: var(--c-accent); }
.rm-main b { font-family: var(--f-mincho); font-weight: 400; font-size: clamp(56px, 6.4vw, 92px); line-height: 1.1; letter-spacing: .08em; transition: letter-spacing var(--d-3) var(--ease-calm); }
.rm-main:hover b { letter-spacing: .12em; }
.rm-en { font-family: var(--f-serif); font-size: 13px; letter-spacing: var(--ls-en); text-transform: uppercase; color: var(--c-sub); }
.rm-en span { text-transform: none; }
.rm-desc { font-size: 13px; line-height: 2; letter-spacing: .1em; color: var(--c-sub); max-width: 30em; }
.rm-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-left: 1px solid var(--c-line); }
.rm-list li { border-right: 1px solid var(--c-line); }
.rm-list a { display: grid; gap: 12px; padding: var(--s-3) 14px var(--s-2); align-content: end; transition: color var(--d-1) var(--ease-calm); }
.rm-list b { font-family: var(--f-mincho); font-weight: 400; font-size: 16px; letter-spacing: .1em; white-space: nowrap; }
.rm-list .rm-en { font-size: 11px; letter-spacing: .2em; line-height: 1.7; }
.rm-list a:hover b { color: var(--c-accent); }
@media (max-width: 960px) {
  .rm-grid { grid-template-columns: 1fr; gap: var(--s-4); }
  .rm-list { grid-template-columns: 1fr; border-left: 0; border-top: 1px solid var(--c-line); }
  .rm-list li { border-right: 0; border-bottom: 1px solid var(--c-line); }
  .rm-list a { grid-template-columns: 3.4em 6.4em 1fr; align-items: baseline; min-height: 0; padding: 18px 2px; gap: 12px; }
  .rm-list b { font-size: 16px; letter-spacing: .16em; }
}

/* お知らせ：日付・部屋・タイトルを1行ずつ */
.nw { padding-bottom: var(--s-6); }
.nw-list { list-style: none; margin: 0; padding: 0; }
.nw-list li { border-bottom: 1px solid var(--c-line); }
.nw-list li[hidden] { display: none; }
.nw-list a { display: grid; grid-template-columns: 7.5em 9em 1fr; gap: var(--s-3); align-items: baseline; padding: 20px 2px; color: inherit; text-decoration: none; transition: color var(--d-1) var(--ease-calm); }
.nw-list time { font-family: var(--f-serif); font-size: 15px; letter-spacing: .14em; color: var(--c-sub); font-variant-numeric: lining-nums; }
.nw-room { font-family: var(--f-mincho); font-size: 12px; letter-spacing: .2em; color: var(--c-accent); }
.nw-title { font-family: var(--f-mincho); font-size: 15px; letter-spacing: .08em; line-height: 1.7; }
.nw-list a:hover .nw-title { color: var(--c-accent); }
.nw-more { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin: var(--s-4) 0 0; }
.nw-more a { font-family: var(--f-mincho); font-size: 13px; letter-spacing: .2em; color: var(--c-fg); text-decoration: none; border-bottom: 1px solid var(--c-line); padding-bottom: 4px; transition: border-color var(--d-1) var(--ease-calm); }
.nw-more a:hover { border-color: var(--c-fg); }
@media (max-width: 760px) {
  .nw-list a { grid-template-columns: 1fr; gap: 4px; padding: 18px 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .hx-slide { transition: none; }
  .hx-slide img, .hx-mist, .hx-scroll i { animation: none; }
  .hx-slide img { transform: scale(1.08); }
  .hx-move, .hx-glow, .hx-light, .hx-line, .rm-main b { transition: none; }
}