/* 宿泊ページ（/stay）— docs/mockup/stay.html より */

/* ---- 時間帯トーン：スクロールに応じて body の色が遷移する ---- */
body[data-tone="day"]   { --bg: #F5F1E9; --fg: #1C1A17; --fg-sub: #857C71; --line: #D6CCBF; }
body[data-tone="dusk"]  { --bg: #E8DCC8; --fg: #2A221B; --fg-sub: #7D6A58; --line: #CDBBA3; }
body[data-tone="ember"] { --bg: #2B1A11; --fg: #F6E7D8; --fg-sub: rgba(246,231,216,.55); --line: rgba(246,231,216,.16); }
body[data-tone="fire"]  { --bg: #1C120C; --fg: #F6E7D8; --fg-sub: rgba(246,231,216,.55); --line: rgba(246,231,216,.16); }
body[data-tone="night"] { --bg: #0E0E11; --fg: #E9E6DF; --fg-sub: rgba(233,230,223,.5); --line: rgba(233,230,223,.14); }
body[data-tone="dawn"]  { --bg: #EDEFEC; --fg: #1E2220; --fg-sub: #7A817C; --line: #CBD1CC; }

/* ---- Hero ---- */
.hero { position: relative; height: 100vh; min-height: 640px; overflow: hidden; color: #F5F1E9; }
.hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.7); }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, transparent 35%, rgba(0,0,0,.65) 100%); }
.hero .in { position: absolute; z-index: 2; left: var(--gutter); right: var(--gutter); bottom: clamp(56px, 10vh, 110px); }
.hero .eyebrow { color: rgba(245,241,233,.7); }
.hero .h-xl { max-width: 860px; }
.hero .lead { margin-top: 20px; opacity: .85; }
.hero .btn-row { margin-top: 36px; }
.hero .btn { color: #F5F1E9; }

/* ---- Key facts bar ---- */
.keybar { display: grid; grid-template-columns: repeat(6, 1fr); border-bottom: 1px solid var(--line); }
.keybar div { padding: 26px 18px; text-align: center; border-right: 1px solid var(--line); }
.keybar div:last-child { border-right: 0; }
.keybar b { display: block; font-family: var(--serif-jp); font-weight: 400; font-size: 18px; }
.keybar span { font-size: 11px; letter-spacing: .12em; color: var(--fg-sub); }

/* ---- Chapter（時刻付きの章） ---- */
.chapter { display: grid; grid-template-columns: minmax(120px, 180px) minmax(0,1fr); gap: clamp(24px, 4vw, 64px); max-width: 1320px; margin: 0 auto; padding: clamp(90px, 13vw, 170px) var(--gutter); }
.clock { position: sticky; top: 38vh; align-self: start; }
.clock .time { font-family: var(--serif-en); font-weight: 300; font-size: clamp(44px, 5vw, 76px); line-height: 1; letter-spacing: .02em; }
.clock .label { font-size: 11px; letter-spacing: .3em; color: var(--fg-sub); margin-top: 12px; }
.clock .bar { width: 1px; height: 80px; background: var(--fg-sub); opacity: .5; margin-top: 18px; }
.ch-body .h-lg { max-width: 760px; }
.ch-body .lead { max-width: 620px; }

.mosaic { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: clamp(14px, 2vw, 28px); margin-top: 56px; }
/* 比率つきの写真が行の高さを決め、.fill の写真はその高さに合わせて切り抜く */
.mosaic .frame { min-width: 0; }
.mosaic .frame.fill { position: relative; }
.mosaic .frame.fill img { position: absolute; inset: 0; }
.m-8 { grid-column: span 8; } .m-4 { grid-column: span 4; } .m-7 { grid-column: span 7; } .m-5 { grid-column: span 5; } .m-6 { grid-column: span 6; } .m-12 { grid-column: span 12; }
.ratio-23 { aspect-ratio: 2/3; }

.feat { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 56px; }
.feat div { background: var(--bg); padding: 28px 22px; transition: background-color 1.2s ease; }
.feat .k { font-family: var(--serif-en); font-style: italic; font-size: 18px; color: #E9A77A; }
.feat .v { font-family: var(--serif-jp); font-size: 15px; margin: 8px 0 6px; }
.feat p { font-size: 12px; line-height: 1.9; color: var(--fg-sub); }

.quote { font-family: var(--serif-jp); font-weight: 300; font-size: clamp(22px, 2.8vw, 38px); line-height: 1.9; letter-spacing: .08em; }
.quote em { font-style: normal; color: #E9A77A; }
.gift { display: flex; gap: 20px; align-items: center; margin-top: 40px; padding: 22px 26px; border: 1px solid var(--line); max-width: 560px; }
.gift .icon { font-family: var(--serif-en); font-size: 36px; color: #E9A77A; line-height: 1; }
.gift p { font-size: 13px; line-height: 1.9; }

/* ---- Details ---- */
.details { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(32px, 5vw, 80px); }
.amen { columns: 2; column-gap: 32px; list-style: none; font-size: 13px; }
.amen li { break-inside: avoid; padding: 9px 0; border-bottom: 1px solid var(--line); }
.amen li::before { content: "◦"; color: var(--umber); margin-right: 10px; }
.price-box { border: 1px solid var(--line); padding: 32px; margin-top: 32px; }
.price-box .h-md small { font-size: 13px; color: var(--fg-sub); margin-left: 8px; }
.price-box .body { color: var(--fg-sub); }
.price-box .btn-row { margin-top: 20px; }

/* ---- 沢井の自然（明るい背景なので見出し色を焦茶に）---- */
#nature .feat { margin-top: 48px; }
#nature .feat .k { color: var(--umber); }

/* ---- ゲストの声 ---- */
/* 枚数が列数で割り切れなくても空きマスが出ないよう、罫線はカード側に引く */
.voices { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); margin-top: 48px; }
.voice { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 32px 28px; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; transition: background-color 1.2s ease; }
.voice blockquote p { font-family: var(--serif-jp); font-size: 15px; line-height: 2.1; }
.voice blockquote p::before { content: "“"; display: block; font-family: var(--serif-en); font-size: 44px; line-height: .8; color: var(--umber); margin-bottom: 8px; }
.voice figcaption { font-size: 12px; letter-spacing: .1em; color: var(--fg-sub); }
.voice figcaption::before { content: "— "; }
.honest { margin-top: 56px; }
.honest ul { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 clamp(32px, 4vw, 56px); margin-top: 8px; }
.honest li { display: grid; grid-template-columns: 10em minmax(0,1fr) auto; gap: 16px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.honest b { font-family: var(--serif-jp); font-weight: 400; font-size: 14px; }
.honest span { color: var(--fg-sub); line-height: 1.9; }
.honest a { font-size: 12px; white-space: nowrap; color: var(--umber); }

/* ---- FAQ のカテゴリ見出し ---- */
.faq-cat { font-size: 12px; font-weight: 500; letter-spacing: .2em; color: var(--umber); margin: 56px 0 4px; padding-bottom: 12px; border-bottom: 1px solid var(--fg); }
.faq-cat:first-child { margin-top: 0; }

/* ---- Corporate ---- */
.corp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(245,241,233,.12); border: 1px solid rgba(245,241,233,.12); margin-top: 48px; }
.corp-grid div { background: var(--sumi); padding: 32px 26px; }
.corp-grid .k { font-family: var(--serif-en); font-size: 13px; letter-spacing: .24em; color: #E9A77A; }
.corp-grid h3 { font-family: var(--serif-jp); font-weight: 400; font-size: 17px; margin: 10px 0 10px; }
.corp-grid p { font-size: 13px; opacity: .65; line-height: 2; }

/* ---- Cross-sell ---- */
.cross { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); min-height: 70vh; }
.cross .frame { min-height: 360px; }
.cross .in { display: flex; flex-direction: column; justify-content: center; padding: clamp(40px, 6vw, 96px); background: var(--paper2); color: var(--ink); }

/* ---- Access ---- */
.access { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.access .map { aspect-ratio: 4/3; background: var(--paper); }
.access .map iframe { width: 100%; height: 100%; border: 0; display: block; }
.access dl { display: grid; gap: 14px; font-size: 14px; margin-top: 28px; }
.access dt { font-size: 11px; letter-spacing: .16em; color: var(--fg-sub); }

@media (max-width: 860px) {
  .keybar { grid-template-columns: repeat(3, 1fr); }
  .keybar div:nth-child(3) { border-right: 0; }
  .keybar div:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
  .chapter { grid-template-columns: minmax(0,1fr); }
  .clock { position: relative; top: auto; display: flex; align-items: baseline; gap: 16px; }
  .clock .bar { display: none; }
  .mosaic > * { grid-column: span 12 !important; }
  .mosaic .frame.fill { aspect-ratio: 4/3; }
  .feat, .corp-grid { grid-template-columns: 1fr 1fr; }
  .details, .cross, .access { grid-template-columns: minmax(0,1fr); }
  .hero .h-xl { font-size: 30px; }
  .amen { columns: 1; }
  .honest ul { grid-template-columns: minmax(0,1fr); }
  .honest li { grid-template-columns: minmax(0,1fr) auto; }
  .honest li span { grid-column: 1 / -1; grid-row: 2; }
}

/* ---- Japanese（英字ラベル用の書体を和文向けに）---- */
html[lang="ja"] .clock .label,
html[lang="ja"] .corp-grid .k { font-family: var(--serif-jp); letter-spacing: .2em; }
html[lang="ja"] .feat .k { font-family: var(--serif-jp); font-style: normal; }

/* ---- English（/en/stay）---- */
html[lang="en"] .keybar b { font-size: 20px; font-weight: 500; }
html[lang="en"] .feat .v { font-size: 18px; font-weight: 500; }
html[lang="en"] .quote { font-size: clamp(26px, 3.2vw, 44px); line-height: 1.4; letter-spacing: .005em; }
html[lang="en"] .corp-grid h3 { font-size: 20px; font-weight: 500; line-height: 1.35; }
html[lang="en"] .voice blockquote p { font-size: 19px; line-height: 1.6; }
html[lang="en"] .honest b { font-size: 17px; font-weight: 500; }
html[lang="en"] .honest li { font-size: 14px; }
html[lang="en"] .faq-cat { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }