/* 一乗谷 燈｜AKARI デモ版 案A ― 墨が主の夜 */
:root {
  --sumi: #17140f;      /* 墨：地の色 */
  --susu: #241d16;      /* 煤竹：格子の面 */
  --akari: #e8a54b;     /* 灯：差し色（ボタン・灯り・細線だけ） */
  --kinari: #ebe3d3;    /* 生成り：文字 */
  --hai: #a39784;       /* 灰：補足の文字 */
  --line: rgba(235, 227, 211, .14);
  --mincho: "Shippori Mincho B1", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --gothic: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif;
  --gutter: clamp(16px, 4vw, 56px);
  --head-h: 60px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + 8px); }
body {
  margin: 0; background: var(--sumi); color: var(--kinari);
  font-family: var(--gothic); font-size: 16px; line-height: 1.9; letter-spacing: .04em;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--akari); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
h1, h2, h3 { font-family: var(--mincho); font-weight: 700; letter-spacing: .08em; line-height: 1.5; margin: 0; }

/* デモ用の帯と札 */
.demo-bar { background: #3a2a14; color: #f3d9a8; font-size: 12px; line-height: 1.5; padding: 6px var(--gutter); display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.demo-bar button { background: none; border: 1px solid #f3d9a8; color: inherit; font: inherit; padding: 2px 10px; border-radius: 3px; cursor: pointer; white-space: nowrap; }
.tag { position: absolute; left: 8px; top: 8px; z-index: 3; font: 500 11px/1.4 var(--gothic); letter-spacing: .02em; padding: 2px 7px; border-radius: 2px; background: rgba(20, 16, 10, .78); color: #f3d9a8; pointer-events: none; }
.tag[data-kind="have"] { color: #bcd3c2; }
body.hide-tags .tag { display: none; }
/* 画像がまだ無いときの仮の枠 */
.ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px; background: repeating-linear-gradient(135deg, #1c2533 0 14px, #1a2230 14px 28px); color: #b9c3d3; font-size: 13px; line-height: 1.6; }

/* ヘッダー */
.site-head { position: sticky; top: 0; z-index: 20; height: var(--head-h); display: flex; align-items: center; gap: 20px; padding: 0 var(--gutter); background: rgba(23, 20, 15, .82); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img { filter: invert(1) brightness(.92); }
.brand-name { font-family: var(--mincho); font-size: 18px; letter-spacing: .14em; }
.brand-en { font-size: 11px; color: var(--hai); letter-spacing: .3em; }
.head-nav { display: flex; gap: 22px; margin-left: auto; font-size: 14px; }
.head-nav a { text-decoration: none; color: var(--hai); }
.head-nav a:hover { color: var(--kinari); }
.head-tools { display: flex; align-items: center; gap: 12px; }
.lang select { background: transparent; color: var(--kinari); border: 1px solid var(--line); border-radius: 3px; font: inherit; font-size: 13px; padding: 4px 6px; }
.lang option { color: #000; }
.btn-akari { display: inline-block; background: var(--akari); color: #1c1407; text-decoration: none; font-weight: 500; padding: 9px 20px; border-radius: 3px; letter-spacing: .08em; line-height: 1.4; border: 0; }
.btn-akari:hover { background: #f1b866; }
.btn-ghost { display: inline-block; border: 1px solid var(--line); text-decoration: none; padding: 8px 16px; border-radius: 3px; font-size: 14px; line-height: 1.4; }
.btn-ghost:hover { border-color: var(--akari); }
.link-line { color: var(--akari); text-underline-offset: 4px; font-size: 14px; }
.news-line { margin: 0; padding: 8px var(--gutter); font-size: 13px; color: var(--hai); border-bottom: 1px solid var(--line); }
.news-date { color: var(--akari); margin-right: 1em; }

/* 0 最初の画面 */
.hero { position: relative; height: calc(100svh - var(--head-h) - 38px); min-height: 520px; overflow: hidden; background: var(--sumi); }
.hero-stage, .hero-img, .hero-img img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-img img { object-fit: cover; }
.hero-on { clip-path: circle(0% at var(--lx, 64%) var(--ly, 56%)); transition: clip-path 2.4s cubic-bezier(.3, .1, .2, 1); }
.hero.is-lit .hero-on { clip-path: circle(150% at var(--lx, 64%) var(--ly, 56%)); }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 14, 22, .55) 0%, rgba(10, 14, 22, 0) 38%, rgba(10, 8, 5, .7) 100%); pointer-events: none; }
.hero-copy { position: absolute; z-index: 2; top: clamp(28px, 8vh, 90px); left: var(--gutter); }
.hero-name { font-size: clamp(40px, 7vw, 88px); letter-spacing: .22em; writing-mode: vertical-rl; display: block; line-height: 1.15; text-shadow: 0 2px 30px rgba(0, 0, 0, .5); }
.hero-lead { font-family: var(--mincho); margin: 18px 0 0; font-size: clamp(15px, 1.6vw, 18px); letter-spacing: .16em; text-shadow: 0 1px 12px rgba(0, 0, 0, .6); }
.light-switch { margin-top: 26px; display: inline-flex; align-items: center; gap: 12px; background: rgba(23, 20, 15, .55); border: 1px solid rgba(232, 165, 75, .6); color: var(--kinari); border-radius: 40px; padding: 7px 18px 7px 8px; font: inherit; font-size: 14px; cursor: pointer; }
.ls-knob { width: 34px; height: 18px; border-radius: 9px; background: #3b342a; position: relative; transition: background .4s; }
.ls-knob::after { content: ""; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #8d8270; transition: transform .4s, background .4s, box-shadow .4s; }
.hero.is-lit .ls-knob { background: #6b4a1c; }
.hero.is-lit .ls-knob::after { transform: translateX(16px); background: var(--akari); box-shadow: 0 0 12px var(--akari); }
.hero-foot { position: absolute; z-index: 2; right: var(--gutter); bottom: clamp(20px, 5vh, 48px); display: flex; align-items: center; gap: 18px; text-align: right; }
.hero-price { margin: 0; font-family: var(--mincho); font-size: 18px; letter-spacing: .08em; text-shadow: 0 1px 10px rgba(0, 0, 0, .7); }
.hero-price small { display: block; font-family: var(--gothic); font-size: 12px; color: #d8cfbf; }

/* 欄の共通 */
main > section { padding: clamp(64px, 10vw, 120px) var(--gutter); position: relative; }
.sec-head { display: flex; align-items: flex-start; gap: 24px; margin-bottom: clamp(28px, 4vw, 48px); }
.v-title { writing-mode: vertical-rl; font-size: clamp(24px, 2.6vw, 32px); letter-spacing: .3em; border-right: 1px solid var(--akari); padding-right: 10px; line-height: 1.3; }
.sec-note { margin: 0; color: var(--hai); max-width: 34em; font-size: 15px; align-self: flex-end; }
/* 障子の格子を薄く敷いた面（背景があることで写真と文が軽く見える） */
.lattice { background-color: var(--susu); background-image:
  linear-gradient(rgba(235, 227, 211, .035) 1px, transparent 1px),
  linear-gradient(90deg, rgba(235, 227, 211, .035) 1px, transparent 1px);
  background-size: 92px 128px; background-position: -1px -1px; }

/* 1 燈について（写真と文を左右に振る） */
.pair { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(24px, 5vw, 72px); align-items: center; max-width: 1180px; margin: 0 auto clamp(48px, 8vw, 96px); }
.pair-rev { grid-template-columns: 1fr 1.25fr; }
.pair-rev .pair-img { order: 2; }
.pair-img { position: relative; margin: 0; }
.pair-img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.pair-img-tall { max-width: 420px; justify-self: end; width: 100%; }
.pair-img-tall img { aspect-ratio: 2 / 3; }
.pair-text h3 { font-size: clamp(20px, 2vw, 26px); margin-bottom: 14px; }
.pair-text p { margin: 0; max-width: 30em; }
.facts { margin: 0; padding: 0; list-style: none; }
.facts li { padding: 8px 0 8px 18px; border-bottom: 1px solid var(--line); position: relative; }
.facts li::before { content: ""; position: absolute; left: 0; top: 1.15em; width: 6px; height: 6px; border-radius: 50%; background: var(--akari); }

/* 2 お部屋（2段・手でめくる） */
.rooms { background: var(--sumi); }
.rows { display: grid; gap: 16px; }
.row { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: thin; scrollbar-color: #3b4a60 transparent; }
.row-offset { padding-left: clamp(0px, 8vw, 120px); }
.room { flex: 0 0 clamp(260px, 30vw, 420px); scroll-snap-align: start; position: relative; }
.room figure { margin: 0; position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #111824; }
.room figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .8s; }
.room-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 16px 14px; background: linear-gradient(transparent, rgba(8, 10, 16, .85)); }
.room-cap h3 { font-size: 19px; }
.room-cap p { margin: 2px 0 0; font-size: 13px; color: #d4ccbd; line-height: 1.6; }
.daynight .dn-night { opacity: 0; }
.daynight.is-night .dn-night { opacity: 1; }
.dn-switch { position: absolute; right: 12px; bottom: 14px; display: flex; border: 1px solid rgba(232, 165, 75, .7); border-radius: 3px; overflow: hidden; }
.dn-switch button { background: rgba(10, 12, 18, .6); color: var(--kinari); border: 0; font: inherit; font-size: 13px; padding: 3px 12px; cursor: pointer; }
.dn-switch button[aria-pressed="true"] { background: var(--akari); color: #1c1407; }
.plan { max-width: 760px; margin: clamp(36px, 6vw, 64px) auto 0; }
.plan svg { width: 100%; height: auto; }
.pl-family { fill: #18202c; stroke: #2c3a4e; }
.pl-fam-t { fill: #6c7a8e; font-size: 14px; text-anchor: middle; }
.pl-glass { stroke: #8fb3d9; stroke-width: 2; stroke-dasharray: 6 4; }
.pl-guest rect, .pl-guest-s { fill: #2b3a50; stroke: var(--akari); stroke-width: 1; }
.pl-engawa { fill: #3a3022; stroke: var(--akari); }
.pl-t { fill: var(--kinari); font-size: 13px; text-anchor: middle; }
.pl-garden { fill: #8fae8f; font-size: 13px; text-anchor: middle; }
.plan-note { font-size: 13px; color: var(--hai); }

/* 3 過ごし方（横に流れる帯） */
.days { padding-left: 0 !important; padding-right: 0 !important; overflow: hidden; }
.days .sec-head, .meal { padding: 0 var(--gutter); }
.marquee-pause { margin-left: auto; align-self: flex-end; background: none; border: 1px solid var(--line); color: var(--hai); font: inherit; font-size: 13px; padding: 4px 12px; border-radius: 3px; cursor: pointer; }
.marquee { position: relative; }
.mq-words { position: absolute; inset: 0; display: flex; align-items: center; pointer-events: none; }
.mq-track { display: flex; width: max-content; }
.mq-slow { animation: mq 140s linear infinite; }
.mq-slow span { font-family: var(--mincho); font-size: clamp(90px, 14vw, 200px); color: rgba(235, 227, 211, .05); padding: 0 .4em; letter-spacing: .1em; }
.mq-cards { position: relative; overflow-x: auto; scrollbar-width: none; }
.mq-cards::-webkit-scrollbar { display: none; }
#mqCards { animation: mq 70s linear infinite; padding: 20px 0; gap: 20px; }
.marquee:hover #mqCards, .marquee.paused #mqCards, .marquee.paused .mq-slow { animation-play-state: paused; }
.mq-card { margin: 0; position: relative; width: clamp(240px, 26vw, 360px); flex: none; }
.mq-card:nth-child(even) { margin-top: 48px; }
.mq-card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.mq-card figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 50px 14px 12px; background: linear-gradient(transparent, rgba(10, 8, 5, .85)); font-size: 13px; line-height: 1.6; color: #d4ccbd; }
.mq-card figcaption b { display: block; font-family: var(--mincho); font-size: 18px; color: var(--kinari); }
@keyframes mq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.meal { max-width: 860px; margin: clamp(32px, 5vw, 56px) auto 0; }
.meal h3 { font-size: 22px; margin-bottom: 8px; }
.meal p { margin: 0 0 10px; }

/* 4 周辺と体験 */
.around-links { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 1180px; margin: 0 auto; }
.around-card { position: relative; display: block; text-decoration: none; aspect-ratio: 16 / 10; overflow: hidden; }
.around-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s; }
.around-card:hover img { transform: scale(1.04); }
.ac-text { position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 20px 18px; background: linear-gradient(transparent, rgba(10, 8, 5, .88)); font-size: 14px; color: #d4ccbd; }
.ac-text b { display: block; font-family: var(--mincho); font-size: 24px; color: var(--kinari); }

/* 5 宿泊案内（読む欄は少し明るい面） */
.stay { background: #221f1a; }
.stay-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); max-width: 1180px; margin: 0 auto; }
.spec { margin: 0; }
.spec div { display: grid; grid-template-columns: 7em 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.spec dt { color: var(--akari); font-family: var(--mincho); }
.spec dd { margin: 0; font-size: 15px; }
.rates-head { font-family: var(--mincho); font-size: 20px; margin: 0 0 10px; }
.rates-head small { display: block; font-family: var(--gothic); font-size: 12px; color: var(--hai); }
.rates-note { font-size: 12px; color: var(--hai); }
.book-links { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 12px; }
.rc-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.rc-btn { background: none; border: 1px solid var(--line); color: var(--kinari); font: inherit; font-size: 13px; padding: 3px 10px; border-radius: 3px; cursor: pointer; }
.rc-btn:disabled { opacity: .3; cursor: default; }
.rc-month { font-family: var(--mincho); }
.rc-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 13px; }
.rc-table th { color: var(--hai); font-weight: 400; padding: 4px 0; }
.rc-table td { text-align: center; padding: 5px 0; border: 1px solid rgba(235, 227, 211, .07); height: 52px; vertical-align: top; }
.rc-day { display: block; }
.rc-price { display: block; color: var(--akari); font-size: 12px; }
.rc-past, .rc-closed { color: #5a5348; }
.rc-sun .rc-day { color: #e48a7a; } .rc-sat .rc-day { color: #8fb3d9; }
.rc-today { outline: 1px solid var(--akari); outline-offset: -1px; }

/* 6 アクセス */
.access-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(24px, 5vw, 64px); max-width: 1180px; margin: 0 auto; align-items: center; }
.access-grid figure { margin: 0; position: relative; }
.access-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.addr { font-family: var(--mincho); font-size: 18px; margin: 0 0 12px; }

/* 7 よくある質問 */
.faq-list { max-width: 860px; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; padding: 16px 0; font-family: var(--mincho); font-size: 17px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::after { content: "＋"; color: var(--akari); }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 0 0 18px; color: #d4ccbd; }

/* 8 予約と一乗谷の宿 */
.reserve { padding: 0 !important; background: var(--sumi); }
.reserve-bg { position: relative; height: clamp(320px, 50vw, 560px); overflow: hidden; }
.reserve-bg img { width: 100%; height: 100%; object-fit: cover; }
.reserve-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23, 20, 15, .2), var(--sumi)); }
.reserve-body { position: relative; margin-top: -180px; text-align: center; padding: 0 var(--gutter) 64px; }
.reserve-body h2 { font-size: clamp(28px, 3vw, 40px); letter-spacing: .3em; }
.ota { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 18px; }
.family { border-top: 1px solid var(--line); padding: 36px var(--gutter) 48px; }
.family-t { text-align: center; font-family: var(--mincho); color: var(--hai); margin: 0 0 16px; }
.family-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; max-width: 980px; margin: 0 auto; background: var(--line); }
.family-list a { background: var(--sumi); padding: 18px 12px; text-align: center; text-decoration: none; font-size: 13px; color: var(--hai); }
.family-list b { display: block; font-family: var(--mincho); font-size: 20px; color: var(--kinari); }
.family-list a[aria-current] b { color: var(--akari); }

.site-foot { padding: 40px var(--gutter) 110px; text-align: center; font-size: 13px; color: var(--hai); border-top: 1px solid var(--line); }
.foot-name { font-family: var(--mincho); font-size: 16px; color: var(--kinari); display: flex; gap: 8px; justify-content: center; align-items: center; }
.foot-name img { filter: invert(1) brightness(.92); }
.sp-book { display: none; }

/* スマホ */
@media (max-width: 860px) {
  .head-nav { display: none; }
  .head-book { display: none; }
  .head-tools { margin-left: auto; }
  .brand-en { display: none; }
  .demo-bar span { font-size: 11px; }
  .pair, .pair-rev, .stay-grid, .access-grid, .around-links { grid-template-columns: 1fr; }
  .pair-rev .pair-img { order: 0; }
  .pair-img-tall { justify-self: start; max-width: 300px; }
  .hero-foot { left: var(--gutter); right: var(--gutter); justify-content: space-between; text-align: left; }
  .hero-foot .btn-akari { display: none; }
  .sec-head { gap: 14px; }
  .room { flex-basis: 78vw; }
  .row-offset { padding-left: 0; }
  .mq-card { width: 64vw; }
  .family-list { grid-template-columns: 1fr 1fr; }
  .spec div { grid-template-columns: 5.5em 1fr; }
  .sp-book { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; gap: 10px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(23, 20, 15, .94); border-top: 1px solid var(--line); }
  .sp-book a { flex: 1; text-align: center; padding: 10px; text-decoration: none; border: 1px solid var(--line); border-radius: 3px; font-size: 15px; }
  .sp-book .btn-akari { border: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-on, .room figure img, .around-card img { transition: none; }
  .mq-slow, #mqCards { animation: none; }
  .mq-cards { overflow-x: auto; }
}
.ota-note { font-size: 12px; color: var(--hai); margin: 12px 0 0; }
/* 昼夜カード：夜の絵がまだ無いときは、夜を選んだときだけ仮の枠を出す。切り替えボタンは説明の下に置く */
.daynight .ph-night { opacity: 0; transition: opacity .8s; }
.daynight.is-night .ph-night { opacity: 1; }
.room-cap .dn-switch { position: static; display: inline-flex; margin-top: 8px; }
/* 英語・韓国語は見出しを横書きに */
html[data-lang="en"] .hero-name, html[data-lang="ko"] .hero-name { writing-mode: horizontal-tb; letter-spacing: .06em; font-size: clamp(34px, 5.4vw, 72px); }
html[data-lang="en"] .v-title, html[data-lang="ko"] .v-title { writing-mode: horizontal-tb; border-right: 0; border-bottom: 1px solid var(--akari); padding: 0 0 6px; letter-spacing: .08em; }
html[data-lang="en"] body { letter-spacing: .01em; }
/* スマホ：最初の画面の料金が下の予約の帯に隠れないように */
@media (max-width: 860px) {
  .hero { height: calc(100svh - 250px); min-height: 460px; }
  .hero-foot { bottom: 18px; }
}

/* v2：Aの配置と面を保ち、情報と操作を補う。色の差分はこの変数群へ集約。 */
:root { --read-surface:#221f1a; --head-surface:rgba(23,20,15,.94); --demo-surface:#3a2a14; --demo-ink:#f3d9a8; --sumi:#17140f; --susu:#241d16;  --akari:#e8a54b; --kinari:#ebe3d3; --hai:#b6aa98; --line:rgba(235,227,211,.14); }
body { font-size:14px; }
p,li,dd { text-wrap:pretty; }
button,select,summary,a { min-width:44px; min-height:44px; }
button { cursor:pointer; font:inherit; }
a { display:inline-flex; align-items:center; }
button.link-line { background:none; border:0; text-decoration:underline; padding:8px 0; }
.arrow-link { background:none; border:0; color:var(--akari); text-decoration:underline; padding:8px 0; }
.demo-bar { background:var(--demo-surface); color:var(--demo-ink); flex-wrap:wrap; }
.demo-tools { display:flex; align-items:center; gap:8px; }
.site-head,.sp-book { background:var(--head-surface); }
.head-nav { gap:14px; }
.head-nav a { white-space:nowrap; }
.brand { flex-shrink:0; }
.lang select { min-width:84px; min-height:44px; }
#menuToggle { display:none; color:var(--kinari); background:transparent; border:1px solid var(--line); }
#mobileNav { position:fixed; top:60px; right:0; z-index:25; padding:16px; background:var(--susu); max-height:calc(100svh - 140px); overflow:auto; width:min(360px,100%); box-shadow:0 20px 50px #0008; }
#mobileNav a { display:flex; padding:8px 16px; text-decoration:none; border-bottom:1px solid var(--line); }
[hidden] { display:none !important; }
.stay-summary { display:grid; grid-template-columns:.7fr 1.2fr 1.4fr; gap:24px; padding:22px var(--gutter); border-bottom:1px solid var(--line); }
.stay-summary p { margin:0; }
.hero { padding:0; }
.hero-name { font-size:clamp(40px,7vw,88px); }
.light-history { margin:14px 0 0; max-width:24em; font-family:var(--mincho); text-shadow:0 2px 8px #000; }
.light-switch { margin-top:10px; }
.hero-price span,.hero-price strong { display:block; }
.hero-price strong { font-size:24px; }
.pair-text p { font-size:14px; max-width:34em; }
.pair-text p + p { margin-top:18px; }
.lamp-fact { font-family:var(--mincho); font-size:clamp(19px,2vw,25px) !important; }
.pair-img-tall { max-width:480px; }
.room-cap small { display:block; font-size:14px; }
.row-offset { padding-left:clamp(24px,8vw,120px); }
.room-more { max-width:1000px; margin:36px auto 0; }
details { border-bottom:1px solid var(--line); }
summary { display:flex; align-items:center; justify-content:space-between; cursor:pointer; padding:14px 0; font-family:var(--mincho); font-size:16px; }
.room-more summary::after { content:'＋'; color:var(--akari); }
.room-more[open] summary::after { content:'−'; }
.room-more .plan { margin-top:24px; }
.night-tag { display:none; }
.is-night .night-tag { display:block; }
.daynight.is-night .tag:not(.night-tag) { display:none; }
.days .sec-head { flex-wrap:wrap; align-items:center; }
#mqPrev,#mqNext { border:1px solid var(--line); background:none; color:var(--kinari); }
.marquee-pause { align-self:center; }
.mq-cards { touch-action:pan-x pan-y; }
#mqCards,.mq-slow { animation:none; will-change:transform; }
.mq-card figcaption { font-size:14px; }
.stay { background:var(--read-surface); }
.stay-times { display:flex; flex-direction:column; gap:8px; }
.keep-together,.heading-phrase { display:inline-block; }
.spec div { grid-template-columns:6em 1fr; }
.spec dd { font-size:14px; }
.rate-summary { border:1px solid var(--line); padding:24px; margin-top:30px; }
.rate-lines { display:flex; flex-direction:column; gap:8px; margin:0; }
.rate-primary { display:flex; flex-direction:column; font-family:var(--mincho); font-size:clamp(26px,3vw,36px); color:var(--akari); line-height:1.5; }
.rate-primary span:first-child { font-size:18px; }
.rate-note { font-size:14px; color:var(--hai); }
.rates-head { font-size:22px; }
.rates-note { font-size:14px; }
.around-card { width:100%; padding:0; color:inherit; border:0; font:inherit; text-align:left; background:none; }
.family-list button { border:0; background:var(--sumi); color:var(--hai); padding:18px 12px; }
.family-list a { display:block; }
.family-list small { display:block; }
.btn-ghost { background:transparent; color:var(--kinari); }
dialog { background:var(--susu); color:var(--kinari); border:1px solid var(--line); border-radius:4px; max-width:calc(100% - 32px); padding:30px; }
dialog::backdrop { background:#000a; }
dialog button { background:var(--akari); color:var(--sumi); border:0; padding:8px 20px; }
.footer-links { display:flex; justify-content:center; flex-wrap:wrap; gap:20px; }
@media (max-width:1100px) {
  .head-nav,.head-book { display:none; }
  #menuToggle { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
  .head-tools { margin-left:auto; }
  .brand-en { display:none; }
}
@media (max-width:860px) {
  .demo-bar { gap:8px; }
  .demo-bar > span { width:100%; }
  .stay-summary { grid-template-columns:1fr; gap:8px; padding:18px var(--gutter); }
  .hero { height:calc(100svh - 280px); min-height:460px; }
  .hero-copy { top:28px; }
  .hero-name { font-size:48px; }
  .hero-lead { font-size:15px; margin-top:14px; }
  .light-history { max-width:21em; font-size:14px; }
  .hero-foot { bottom:94px; }
  .pair-img-tall { max-width:100%; width:100%; }
  .pair-img-tall img { aspect-ratio:4 / 3; }
  .room { flex-basis:84vw; }
  .row-offset { padding-left:24px; }
  .sec-head:has(.sec-note) { flex-direction:column; }
  .rooms .sec-head .v-title { writing-mode:horizontal-tb; border-right:0; border-bottom:1px solid var(--akari); padding:0 0 8px; }
  .spec div { grid-template-columns:5.4em 1fr; gap:12px; }
  .sp-book { min-height:68px; }
}
@media (max-width:420px) {
  .site-head { gap:8px; }
  .brand { gap:6px; }
  .brand-name { font-size:16px; letter-spacing:.04em; }
  .lang select { width:84px; }
  #menuToggle { font-size:12px; padding:6px; }
  .days .sec-head { gap:10px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition:none !important; } }

/* Claude 11/04：スマホの最初の画面で、灯りのスイッチと料金が重ならないように（縦書きの宿名を少し小さく・すき間を詰める） */
@media (max-width:860px){
  .hero-copy{top:18px}
  .hero-name{font-size:34px;letter-spacing:.12em}
  .hero-lead{margin-top:10px}
  .light-switch{margin-top:12px}
}
/* Claude 11/04：パソコン幅で、最初の画面を画面の高さに収める（デモ用の帯・ヘッダー・お知らせの分を引く） */
@media (min-width:861px){ .hero{height:calc(100svh - 160px);min-height:560px} }
/* Claude 11/04：スマホで最初の画面の札（仮 N1 → N2）が宿名に重ならないよう右上へ */
@media (max-width:860px){ .hero > .hero-stage > .tag, .hero .tag{left:auto;right:8px;top:8px} }

/* 11/5：章の導入・予約・一枠のお部屋写真・見比べ */
.hero { --lx:28%; --ly:52%; }
main > section:not(.hero):not(.reserve) { padding-top:48px; padding-bottom:48px; }
.sec-head { align-items:center; margin-bottom:28px; }
.section-intro { max-width:42em; }
.section-intro h3 { font-size:clamp(20px,2vw,26px); }
.section-intro p { margin:10px 0 0; font-size:14px; }
.pair { margin-bottom:48px; }
.pair:last-child { margin-bottom:0; }
.pair-img-tall { width:68%; max-width:380px; }
.pair-img-tall img { aspect-ratio:3 / 4; object-fit:cover; }
.stay-summary { grid-template-columns:.8fr 1.4fr 1.2fr; gap:12px 24px; }
.stay-summary p:last-child { grid-column:3; }
.stay-info { max-width:1000px; margin:auto; }
.rate-summary { max-width:620px; }
.faq summary::after { flex-shrink:0; }
.demo-tools { flex-wrap:wrap; }
.demo-tools label { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.demo-tools select { background:var(--demo-surface); color:var(--demo-ink); font:inherit; padding:4px 8px; border:1px solid var(--demo-ink); max-width:100%; }
.head-book { white-space:nowrap; }
.room-showcase { max-width:1180px; margin:auto; touch-action:pan-y; }
.slide-stage { position:relative; }
.room-slide { position:relative; }
.room-slide figure { position:relative; margin:0; }
.room-slide figure > img { width:100%; height:clamp(350px,55vw,650px); object-fit:cover; }
.room-slide .dn-night { position:absolute; inset:0; opacity:0; }
.room-slide.is-night .dn-night { opacity:1; }
.room-slide.is-night .dn-day { opacity:0; }
.slide-caption { position:absolute; inset:auto 0 0; padding:70px 28px 24px; background:linear-gradient(transparent,rgba(23,20,15,.94)); color:#fff7ea; }
.slide-caption h3 { font-size:clamp(21px,3vw,32px); }
.slide-caption p { margin:8px 0 0; max-width:42em; font-size:14px; }
.slide-caption .dn-switch { position:static; display:flex; width:max-content; gap:8px; margin-top:12px; border:0; }
.dn-switch button { background:#241d16; border:1px solid var(--akari); color:#fff7ea; padding:8px 14px; }
.dn-switch button[aria-pressed="true"] { background:var(--akari); color:#17140f; }
.slide-controls { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px; padding-top:14px; }
.slide-controls button { background:none; color:var(--kinari); border:1px solid var(--line); font-size:20px; }
.slide-dots { display:flex; justify-content:center; flex-wrap:wrap; }
.slide-dots button { padding:0; border:0; font-size:10px; }
.slide-dots button[aria-pressed="true"] { color:var(--akari); }
#roomCount { min-width:52px; text-align:center; }
.room-detail-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; margin-top:24px; }
.room-detail-grid figure { position:relative; margin:0 0 12px; }
.room-detail-grid img { aspect-ratio:4/3; width:100%; object-fit:cover; }
.room-detail-grid h3 { font-size:17px; }
.room-detail-grid p { font-size:14px; }
html[data-background="plain"] .lattice { background-image:none; }
html[data-background="washi"] .lattice {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.35 .08' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' opacity='.045' filter='url(%23n)' d='M0 0h200v200H0z'/%3E%3C/svg%3E");
  background-size:200px 200px;
}
@media(max-width:1100px){
  .head-book { display:inline-flex !important; align-items:center; justify-content:center; padding:8px 12px; }
  .head-tools { gap:8px; }
}
@media(max-width:860px){
  .hero { --lx:40%; --ly:52%; }
  .sec-head:has(.sec-note) { flex-direction:row; }
  .rooms .sec-head .v-title { writing-mode:vertical-rl; border-right:1px solid var(--akari); border-bottom:0; padding:0 10px 0 0; }
  .v-title { font-size:22px; letter-spacing:.14em; flex-shrink:0; }
  main > section:not(.hero):not(.reserve) { padding-top:32px; padding-bottom:32px; }
  .sec-head { gap:18px; margin-bottom:24px; }
  .stay-summary { grid-template-columns:1fr; }
  .stay-summary p:last-child { grid-column:auto; }
  .pair { margin-bottom:32px; }
  .pair-img-tall { width:68%; max-width:340px; justify-self:center; }
  .pair-img-tall img { aspect-ratio:3/4; }
  .room-detail-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 14px; }
  .slide-caption { padding:60px 16px 18px; }
  .slide-dots { order:3; width:100%; }
  .site-head { gap:8px; padding:0 10px; }
  .brand-name { font-size:15px; letter-spacing:0; white-space:nowrap; }
  .brand img { width:24px; height:24px; }
  .lang select { width:72px; min-width:72px; }
  .hero { height:calc(100svh - 310px); }
}
@media(max-width:380px){ .brand img { display:none; } .head-book { font-size:12px; padding:6px 8px; } }
@media(max-width:600px){
  html { scroll-padding-top:124px; }
  .site-head { display:grid; grid-template-columns:1fr auto auto; height:auto; min-height:60px; gap:6px 10px; padding:6px 12px; }
  .head-tools { display:contents; }
  .site-head .brand { grid-column:1; grid-row:1; min-width:0; }
  .site-head .lang { grid-column:2; grid-row:1; }
  #menuToggle { grid-column:3; grid-row:1; }
  .head-book { grid-column:1 / -1; grid-row:2; width:100%; }
  .demo-tools { gap:8px 12px; }
  .section-intro,.sec-head > div { min-width:0; }
}
/* 開閉する補足欄も、表示中の状態を1つの記号で示す。 */
.stay-info summary::after,.access summary::after { content:'＋'; color:var(--akari); flex-shrink:0; }
.stay-info details[open] summary::after,.access details[open] summary::after { content:'−'; }

/* Claude 11/05：見出し・本文で1〜2文字だけの行を作らない（「した。」だけが落ちる等） */
h2,h3,p,li,dd,summary{text-wrap:pretty}
.lamp-fact,.sec-head h3,.pair-text h3{text-wrap:balance}

.around-embeds {
  display: grid; grid-template-columns: 1fr; gap: 14px;
  max-width: 1080px; margin: 26px auto 0;
}
/* 画面が広いときだけ左右に並べる */
@media (min-width: 1080px) { .around-embeds { grid-template-columns: 1fr 1fr; } }

.around-embed {
  display: block;
  border: 0.5px solid var(--line);
  background: var(--susu);
  color: inherit; text-decoration: none;
  transition: border-color 0.3s;
}
.around-embed:hover, .around-embed:focus-visible { border-color: var(--akari); }

/* 枠の幅に合わせて縮尺が決まる（コンテナクエリ）。
   先方は幅760px以下でスマホ表示に切り替わるため、必ず1280pxで読み込ませる。 */
.around-embed-view {
  display: block; position: relative; overflow: hidden;
  aspect-ratio: 1280 / 540;
  container-type: inline-size;
  background: var(--susu);
}
/* 地図アプリは重く、読み込みに数秒かかる。空白に見えないよう下に敷いておく */
.around-embed-loading {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 12px; letter-spacing: 0.08em; color: var(--hai);
}
.around-embed-view iframe {
  position: absolute; top: 0; left: 0;
  width: 1280px; height: 540px; border: 0;
  pointer-events: none;
  transform: scale(calc(100cqw / 1280px)); transform-origin: 0 0;
}
.around-embed-bar {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  padding: 12px 18px; border-top: 0.5px solid var(--line);
}
.around-embed-text { font-size: 14px; letter-spacing: 0.1em; }
.around-embed-text::after { content: " ↗"; color: var(--akari); font-size: 12px; }
.around-embed-sub { font-size: 12px; color: var(--hai); letter-spacing: 0.04em; }

/* 狭い画面では縮小すると文字が潰れるので、等倍のまま見どころを切り出す */
@media (max-width: 760px) {
  .around-embed-view { aspect-ratio: auto; height: 240px; container-type: normal; }
  .around-embed-view iframe { transform: none; }
  /* アクティビティ：左の一覧を外して地図を見せる */
  .around-embed[data-site="activity"] .around-embed-view iframe { left: -540px; top: -120px; width: 1280px; height: 640px; }
  /* 旅しおり：題字とカードが入る位置 */
  .around-embed[data-site="routes"] .around-embed-view iframe { left: -40px; top: -60px; width: 1280px; height: 700px; }
  .around-embed-bar { padding: 11px 14px; gap: 6px; }
  .around-embed-sub { font-size: 11.5px; }
}
/* 指定の墨茶三面：周辺 #17140f・アクセス #221f1a・FAQ #241d16。 */
.access,.rooms { background-color:var(--read-surface); }
.rooms::before,.access::before,.faq::before { content:''; position:absolute; inset:0 0 auto; height:22px; pointer-events:none; background:linear-gradient(#17140f18,transparent); }
.slide-stage { display:grid; }
.room-slide { grid-area:1 / 1; opacity:0; visibility:hidden; transition:opacity .85s ease,visibility .85s; }
.room-slide[hidden] { display:block !important; }
.room-slide.is-active { opacity:1; visibility:visible; z-index:1; }
#roomPause { font-size:14px; padding:8px 12px; }
.marquee { padding-top:0; }
.around-embed iframe { opacity:0; }
.around-embed.is-loaded iframe { opacity:1; }
.around-embed.is-loaded .around-embed-loading { visibility:hidden; }
.around-embed.is-fallback .around-embed-view { display:none; }
.around-embed-sub { font-size:14px; }
@media(max-width:760px) { .around-embed-sub { font-size:14px; } }
@media(prefers-reduced-motion:reduce) { .room-slide { transition:none; } }

/* 11/5：料金カード撤去後の宿泊案内と、交通・周辺一覧。 */
.stay-info > div { display:grid; grid-template-columns:1fr 1fr; gap:0 32px; align-items:start; }
.stay-info .spec { grid-column:1 / -1; margin-bottom:18px; }
.stay-info details:last-child { grid-column:1 / -1; }
.access .access-grid { grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); align-items:start; gap:32px; }
.access-info { min-width:0; }
.access-table { margin:0; }
.access-row { display:grid; grid-template-columns:5em minmax(0,1fr); gap:16px; padding:14px 0; border-bottom:1px solid var(--line); font-size:14px; }
.access-row dt { color:var(--hai); }
.access-row dd { margin:0; min-width:0; text-wrap:pretty; }
.access-address { display:block; }
.access a { color:var(--kinari); text-decoration-color:var(--akari); text-underline-offset:5px; }
.access .map-link { color:var(--akari); }
.access-nearby { margin-top:24px; }
.access-nearby h3 { font-size:18px; margin:0 0 8px; }
.access-nearby ul { list-style:none; padding:0; margin:0; }
.access-nearby li { display:flex; align-items:center; gap:12px; border-bottom:1px solid var(--line); }
.access-nearby a { flex:1; min-width:44px; padding:8px 0; }
.access-time { white-space:nowrap; font-size:14px; color:var(--hai); }
.access-route-note { font-size:14px; color:var(--hai); margin:14px 0 0; }
.access .access-photo { position:sticky; top:100px; }
@media(max-width:860px) {
  .stay-info > div { display:block; }
  .access .access-grid { grid-template-columns:1fr; gap:24px; }
  .access .access-photo { position:relative; top:auto; }
  .access-row { grid-template-columns:4em minmax(0,1fr); gap:12px; }
}

/* ===== Claude 11/05：背景の比較「流れる墨、寄り添う明かり」墨A・B・C（比較用の静止画を区画に敷く） =====
   区画1＝燈について（絵の上部）／区画2＝過ごし方・周辺と体験（中部）／区画3＝よくある質問・予約（下部）
   上下は地の墨へ溶かす。文字・写真は前景（z-index 1）。ほかの欄は無地で読みやすさ優先。 */
html[data-background^="sumi"] .lattice { background-image:none; }
html[data-background^="sumi"] :is(#about,#days,#around,#faq) { position:relative; isolation:isolate; }
html[data-background^="sumi"] :is(#about,#days,#around,#faq)::before {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-repeat:no-repeat; background-size:cover; opacity:.9;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 86%,transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 86%,transparent 100%);
}
html[data-background^="sumi"] :is(#about,#days,#around,#faq) > * { position:relative; z-index:1; }
html[data-background="sumi-a"] :is(#about,#days,#around,#faq)::before { background-image:url("../assets/sumi/blend-a.jpg"); }
html[data-background="sumi-b"] :is(#about,#days,#around,#faq)::before { background-image:url("../assets/sumi/blend-b.jpg"); }
html[data-background="sumi-c"] :is(#about,#days,#around,#faq)::before { background-image:url("../assets/sumi/blend-c.jpg"); }
/* 絵のどの高さを使うか（区画1＝上・区画2＝中・区画3＝下）。横は右寄せ（パソコンは文字が左に多いため） */
html[data-background^="sumi"] #about::before  { background-position:70% 0%; }
html[data-background^="sumi"] #days::before   { background-position:70% 45%; }
html[data-background^="sumi"] #around::before { background-position:70% 60%; }
html[data-background^="sumi"] #faq::before    { background-position:70% 100%; }
/* 墨の欄は地の色をそろえる（3色の茶の段差を消す） */
html[data-background^="sumi"] :is(#about,#days,#around,#faq) { background-color:#17140f; }
/* スマホ：絵の中央やや左の縦長の帯を使う */
@media (max-width:860px){
  html[data-background^="sumi"] :is(#about,#days,#around,#faq)::before { background-position-x:38%; opacity:.8; }
}
@media (prefers-reduced-motion: reduce){ html[data-background^="sumi"] :is(#about,#days,#around,#faq)::before { transition:none; } }
/* パソコン幅：絵の墨の流れ（絵の左寄り）が見出し・本文（左側）にかからないよう、左右反転して右側へ */
@media (min-width:861px){
  html[data-background^="sumi"] :is(#about,#days,#around,#faq)::before { transform:scaleX(-1); background-position-x:30%; }
}

/* ===== Claude 11/05：墨（A→B→C）＝上から A・B・C を順に混ぜ、墨の流れが「読んでほしい所」を通るように =====
   燈について＝墨A を3組（写真＋文）ごとに上・中・下の高さで敷き、文のある側（右→左→右）へ流れを寄せて蛇行させる
   過ごし方・周辺と体験＝墨B／よくある質問＝墨C */
html[data-background="sumi-mix"] #about { overflow-x:clip; }
html[data-background="sumi-mix"] #about::before { content:none; }
html[data-background="sumi-mix"] #about > .pair::before {
  content:""; position:absolute; z-index:0; pointer-events:none;
  top:-18%; bottom:-18%; left:calc(50% - 50vw); width:100vw;
  background:url("../assets/sumi/blend-a.jpg") no-repeat; background-size:100% auto; opacity:.95;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 22%,#000 78%,transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 22%,#000 78%,transparent 100%);
}
html[data-background="sumi-mix"] #about > .pair > * { position:relative; z-index:1; }
/* 1組目（文が右）：反転して流れを右へ／絵の上部 */
html[data-background="sumi-mix"] #about > .pair:nth-of-type(2)::before { transform:scaleX(-1); background-position:0 12%; }
/* 2組目（文が左）：そのまま左寄りの流れ／絵の中部 */
html[data-background="sumi-mix"] #about > .pair:nth-of-type(3)::before { transform:none; background-position:0 50%; }
/* 3組目（文が右）：反転して右へ／絵の下部 */
html[data-background="sumi-mix"] #about > .pair:nth-of-type(4)::before { transform:scaleX(-1); background-position:0 88%; }
html[data-background="sumi-mix"] :is(#days,#around)::before { background-image:url("../assets/sumi/blend-b.jpg"); }
html[data-background="sumi-mix"] #days::before   { background-position:70% 35%; }
html[data-background="sumi-mix"] #around::before { background-position:70% 75%; }
html[data-background="sumi-mix"] #faq::before    { background-image:url("../assets/sumi/blend-c.jpg"); background-position:70% 60%; }
@media (max-width:860px){
  html[data-background="sumi-mix"] #about > .pair::before { background-size:cover; top:-8%; bottom:-8%; }
  html[data-background="sumi-mix"] #about > .pair:nth-of-type(2)::before { background-position:30% 12%; }
  html[data-background="sumi-mix"] #about > .pair:nth-of-type(3)::before { background-position:30% 50%; }
  html[data-background="sumi-mix"] #about > .pair:nth-of-type(4)::before { background-position:30% 88%; }
}
/* スマホでは墨が見えにくいので、墨の濃淡を少し強める */
@media (max-width:860px){
  html[data-background="sumi-mix"] :is(#about > .pair, #days, #around, #faq)::before { filter:brightness(1.35); opacity:1; }
}

/* ===== Claude 11/05（2）：本人決定「墨で進める」。お部屋も墨／左側にも墨／欄のつなぎ目を自然に／蛍の光 ===== */
/* お部屋にも墨（A から B へ移る所＝墨B の上部） */
html[data-background="sumi-mix"] #rooms { position:relative; isolation:isolate; background-color:#17140f; }
html[data-background="sumi-mix"] #rooms::before {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:url("../assets/sumi/blend-b.jpg") no-repeat 70% 8%; background-size:cover; opacity:.85;
}
html[data-background="sumi-mix"] #rooms > * { position:relative; z-index:1; }
/* つなぎ目：墨の欄は地の色を1つにそろえ、上下のぼかしを長く（となりの欄へ溶けるように） */
html[data-background="sumi-mix"] :is(#about,#rooms,#days,#around,#faq) { background-color:#17140f; }
html[data-background="sumi-mix"] :is(#rooms,#days,#around,#faq)::before {
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 24%,#000 76%,transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 24%,#000 76%,transparent 100%);
}
/* 左側にも墨：パソコンでは右に寄せた流れと対になるよう、左の余白にもう1枚（反転せず・薄く・横は左3割だけ） */
@media (min-width:861px){
  html[data-background="sumi-mix"] :is(#rooms,#days,#around,#faq)::after {
    content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
    background:url("../assets/sumi/blend-c.jpg") no-repeat; background-size:100% auto; opacity:.7;
    -webkit-mask-image:linear-gradient(to right,#000 0,#000 18%,transparent 34%),linear-gradient(to bottom,transparent 0,#000 24%,#000 76%,transparent 100%);
    -webkit-mask-composite:source-in;
            mask-image:linear-gradient(to right,#000 0,#000 18%,transparent 34%),linear-gradient(to bottom,transparent 0,#000 24%,#000 76%,transparent 100%);
            mask-composite:intersect;
  }
  html[data-background="sumi-mix"] #rooms::after  { background-position:0 20%; }
  html[data-background="sumi-mix"] #days::after   { background-position:0 45%; }
  html[data-background="sumi-mix"] #around::after { background-image:url("../assets/sumi/blend-a.jpg"); background-position:0 70%; }
  html[data-background="sumi-mix"] #faq::after    { background-position:0 90%; }
}
/* 蛍の光（fireflies.part.js が各欄に置く）。墨のときだけ見せる */
.fireflies { display:none; }
html[data-background^="sumi"] .fireflies { display:block; position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.firefly {
  position:absolute; left:var(--x-pc); width:var(--s); height:var(--s); border-radius:50%;
  background:radial-gradient(circle, rgba(255,214,150,.95) 0, rgba(232,165,75,.55) 40%, rgba(232,165,75,0) 72%);
  box-shadow:0 0 calc(var(--s) * 3) rgba(232,165,75,.35);
  transform:translateY(var(--sy, 0px));
  animation:firefly-drift var(--d) ease-in-out var(--delay) infinite;
  will-change:transform, opacity;
}
@keyframes firefly-drift {
  0%   { translate:0 0;      opacity:.25; }
  30%  { translate:6px -10px; opacity:.85; }
  60%  { translate:-5px -4px; opacity:.45; }
  100% { translate:0 0;      opacity:.25; }
}
@media (max-width:860px){ .firefly { left:var(--x-sp); } }
@media (prefers-reduced-motion: reduce){ .firefly { animation:none; opacity:.6; transform:none; } }
/* 蛍の光の入れ物は、欄の中身を前に出す指定（> * に position:relative）から外し、欄いっぱいに重ねる */
html[data-background^="sumi"] :is(#about,#rooms,#days,#around,#faq) > .fireflies { position:absolute; inset:0; z-index:0; }

/* ===== Claude 11/05（3）：墨の道（新）。本人「墨が弱い・メインの墨の道を力強く・今の条件で最初から作り直す」
   ページの寸法に合わせて描き直した絵（assets/sumi/v2/ink-<欄>-pc|sp.jpg）を、欄ごとに1枚ずつ欄いっぱいに敷く。
   絵の端はもともと地の色（#17140f）なので、前の墨の重ね（左右反転・左の墨・3組ごとの切り出し）は使わない。 */
html[data-background="sumi-road"] :is(#about,#rooms,#days,#around,#faq) { position:relative; isolation:isolate; background-color:#17140f; overflow-x:clip; }
html[data-background="sumi-road"] :is(#about,#rooms,#days,#around,#faq)::before {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-repeat:no-repeat; background-position:0 0; background-size:100% 100%;
  opacity:1; transform:none; filter:none;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 4%,#000 96%,transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 4%,#000 96%,transparent 100%);
}
html[data-background="sumi-road"] :is(#about,#rooms,#days,#around,#faq)::after,
html[data-background="sumi-road"] #about > .pair::before { content:none; }
html[data-background="sumi-road"] :is(#about,#rooms,#days,#around,#faq) > * { position:relative; z-index:1; }
html[data-background="sumi-road"] #about::before  { background-image:url("../assets/sumi/v2/ink-about-pc.jpg"); }
html[data-background="sumi-road"] #rooms::before  { background-image:url("../assets/sumi/v2/ink-rooms-pc.jpg"); }
html[data-background="sumi-road"] #days::before   { background-image:url("../assets/sumi/v2/ink-days-pc.jpg"); }
html[data-background="sumi-road"] #around::before { background-image:url("../assets/sumi/v2/ink-around-pc.jpg"); }
html[data-background="sumi-road"] #faq::before    { background-image:url("../assets/sumi/v2/ink-faq-pc.jpg"); }
@media (max-width:860px){
  html[data-background="sumi-road"] #about::before  { background-image:url("../assets/sumi/v2/ink-about-sp.jpg"); }
  html[data-background="sumi-road"] #rooms::before  { background-image:url("../assets/sumi/v2/ink-rooms-sp.jpg"); }
  html[data-background="sumi-road"] #days::before   { background-image:url("../assets/sumi/v2/ink-days-sp.jpg"); }
  html[data-background="sumi-road"] #around::before { background-image:url("../assets/sumi/v2/ink-around-sp.jpg"); }
  html[data-background="sumi-road"] #faq::before    { background-image:url("../assets/sumi/v2/ink-faq-sp.jpg"); }
}
/* 蛍の光：墨の道に沿って流れる（位置は fireflies.part.js が --px/--py で決める）。端では --fade で消える */
html[data-background="sumi-road"] .firefly {
  left:0; top:0 !important; margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  transform:translate3d(var(--px, -99px), var(--py, -99px), 0);
  opacity:calc(var(--fade, 1) * .9);
  animation:firefly-glow var(--d) ease-in-out var(--delay) infinite;
}
@keyframes firefly-glow { 0%,100% { filter:brightness(.7); } 40% { filter:brightness(1.25); } }
.firefly-guide { display:none; }
html[data-background="sumi-road"] .firefly-guide {
  display:block;
  background:radial-gradient(circle, rgba(255,228,175,1) 0, rgba(240,178,90,.75) 38%, rgba(232,165,75,0) 72%);
  box-shadow:0 0 18px 4px rgba(240,170,80,.45), 0 0 46px 10px rgba(232,165,75,.18);
}
@media (prefers-reduced-motion: reduce){ html[data-background="sumi-road"] .firefly { animation:none; } }

/* 本人 11/05：アクセスの写真は固定（スクロールに付いてこない）。上空と入口の2枚を縦に並べる */
.access .access-photo { position:static; top:auto; display:grid; gap:24px; }
.access-shot figure { margin:0; }
.access-cap { margin:8px 0 0; font-size:13px; color:var(--hai); text-wrap:pretty; }
@media (max-width:860px){ .access .access-photo { grid-template-columns:1fr 1fr; gap:12px; } .access-cap { font-size:12px; } }

/* 本人 11/05：予約ボタンをもっと格好よく（安っぽい・文字が上にずれる・オレンジが薄い）。
   色味は今の琥珀のまま少し深く。文字は明朝で上下の真ん中に。細い線の矢印を添える */
.btn-akari {
  display:inline-flex; align-items:center; justify-content:center; gap:14px;
  min-height:44px; padding:0 26px; line-height:1; box-sizing:border-box;
  font-family:var(--mincho); font-weight:600; font-size:15px; letter-spacing:.2em; text-indent:.2em;
  color:#1a1206; text-decoration:none; border:0; border-radius:2px;
  background:linear-gradient(180deg,#eeac55 0%,#d8902f 100%);
  box-shadow:inset 0 0 0 1px rgba(255,238,205,.38), inset 0 -1px 0 rgba(90,50,10,.35), 0 8px 22px -12px rgba(236,160,60,.75);
  transition:background .25s ease, box-shadow .25s ease, transform .25s ease;
}
.btn-akari::after { content:""; width:18px; height:1px; background:currentColor; flex-shrink:0; box-shadow:0 0 0 0 currentColor; transition:width .25s ease; }
.btn-akari:hover { background:linear-gradient(180deg,#f4b866 0%,#df9838 100%); box-shadow:inset 0 0 0 1px rgba(255,238,205,.5), inset 0 -1px 0 rgba(90,50,10,.35), 0 10px 28px -10px rgba(240,170,70,.9); }
.btn-akari:hover::after { width:26px; }
.btn-akari:focus-visible { outline:2px solid #f6d7a4; outline-offset:3px; }
.head-book { min-height:40px; padding:0 18px; font-size:14px; gap:10px; }
.head-book::after { width:12px; }
.reserve .btn-cta { min-height:56px; padding:0 40px; font-size:17px; }
.reserve .cta-sub { margin:22px 0 0; font-size:14px; letter-spacing:.08em; }
.reserve .cta-sub a { color:var(--kinari); text-decoration:none; border-bottom:1px solid rgba(232,165,75,.6); padding-bottom:4px; }
.reserve .cta-sub a:hover { color:#f6d7a4; border-bottom-color:#f6d7a4; }
@media (prefers-reduced-motion: reduce){ .btn-akari, .btn-akari::after { transition:none; } }

/* 本人 11/05：右上の表示は「LANGUAGE」と三本線。言語の選択肢は今の5言語のまま（透明な選択の上に表示を重ねる） */
.lang { position:relative; display:inline-flex; }
.lang-face {
  display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:0 14px;
  border:1px solid var(--line); border-radius:2px; color:var(--kinari);
  font-size:11px; letter-spacing:.22em; white-space:nowrap; pointer-events:none;
}
.lang-face::after { content:""; width:6px; height:6px; border-right:1px solid currentColor; border-bottom:1px solid currentColor; transform:translateY(-2px) rotate(45deg); }
.lang select { position:absolute; inset:0; width:100% !important; min-width:0 !important; min-height:0; opacity:0; cursor:pointer; }
.lang:hover .lang-face, .lang:focus-within .lang-face { border-color:var(--akari); color:#f6d7a4; }
.lang:focus-within .lang-face { outline:2px solid #f6d7a4; outline-offset:2px; }
#menuToggle { width:44px; height:44px; padding:0; border:1px solid var(--line); border-radius:2px; }
.menu-bars { display:grid; gap:5px; width:20px; }
.menu-bars i { display:block; height:1px; background:var(--kinari); transition:transform .25s ease, opacity .25s ease; }
#menuToggle[aria-expanded="true"] .menu-bars i:nth-child(1) { transform:translateY(6px) rotate(45deg); }
#menuToggle[aria-expanded="true"] .menu-bars i:nth-child(2) { opacity:0; }
#menuToggle[aria-expanded="true"] .menu-bars i:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }
@media (max-width:860px){
  .lang-face { min-height:44px; padding:0 10px; font-size:10px; letter-spacing:.16em; }
  /* スマホ1：予約ボタンは画面下の帯だけ（上のヘッダーには出さない） */
  .head-book { display:none !important; }
  html { scroll-padding-top:76px; }
}
/* 線だけだと「予約するー」と伸ばし棒に読めるので、先に小さな矢じりを付ける。ヘッダーと画面下の帯は文字だけ */
.btn-akari::after {
  width:20px; height:8px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 8'%3E%3Cpath d='M0 4h19M15 .5 19 4l-4 3.5' fill='none' stroke='%231a1206' stroke-width='1.1'/%3E%3C/svg%3E") no-repeat right center / 20px 8px;
}
.btn-akari:hover::after { width:26px; background-size:26px 8px; }
.head-book::after, .sp-book .btn-akari::after { content:none; }
.head-book, .sp-book .btn-akari { text-indent:.2em; }
/* スマホ：ヘッダーが1段になった分（上の予約ボタンを外した）、最初の画面を高くし、背の低い画面でも料金と「灯りを消す」が重ならないように */
@media (max-width:860px){ .hero { height:calc(100svh - 250px); min-height:560px; } }

/* 本人 11/05：自動送りは記号だけ（「動かす／止める」「流す／流れを止める」の文字は出さない）。矢印の間に置く。
   ボタンの中の文字は読み上げ用にそのまま残し、画面では見えなくする。流れている時＝❚❚、止まっている時＝▶ */
#roomPause, #mqPause {
  position:relative; width:44px; height:44px; min-width:44px; padding:0; margin:0;
  font-size:0 !important; color:var(--kinari); background:none; border:1px solid var(--line); border-radius:2px; cursor:pointer;
}
#roomPause::before, #mqPause::before {
  content:""; position:absolute; left:50%; top:50%; width:10px; height:12px; transform:translate(-50%,-50%);
  background:linear-gradient(90deg,currentColor 0 34%,transparent 34% 66%,currentColor 66% 100%);
}
#roomPause[aria-pressed="true"]::before, #mqPause[aria-pressed="true"]::before {
  width:11px; height:13px; transform:translate(-40%,-50%); background:currentColor; clip-path:polygon(0 0,100% 50%,0 100%);
}
#roomPause:disabled { opacity:.45; cursor:default; }
#roomPause:hover, #mqPause:hover { border-color:var(--akari); color:#f6d7a4; }
.slide-controls #roomPrev { order:1; } .slide-controls #roomPause { order:2; } .slide-controls #roomNext { order:3; }
.slide-controls .slide-dots { order:4; } .slide-controls #roomCount { order:5; }
#days .sec-head #mqPrev { order:2; } #days .sec-head #mqPause { order:3; margin-left:0; } #days .sec-head #mqNext { order:4; }
#days .sec-head > :first-child { order:0; } #days .sec-head .section-intro, #days .sec-head > div { order:1; }
#days .sec-head #mqPrev { margin-left:auto; }

/* 本人 11/05（スマホ5）：アクティビティと旅しおりは、スマホでは小さく。地図の埋め込みはやめ、表紙の画像の上に文字を重ねる（お部屋の説明と同じ形） */
.around-embed-cover { display:none; }
@media (max-width:760px){
  .around-embeds { grid-template-columns:1fr 1fr; gap:10px; }
  .around-embed { position:relative; overflow:hidden; border-radius:2px; }
  .around-embed-view { height:124px !important; aspect-ratio:auto; }
  .around-embed-view iframe, .around-embed-loading { display:none !important; }
  .around-embed-cover { display:block; position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .around-embed[data-site="routes"] .around-embed-cover { object-position:30% 30%; }
  .around-embed.is-fallback .around-embed-view { display:block; }
  .around-embed-bar {
    position:absolute; left:0; right:0; bottom:0; display:flex; flex-direction:column; align-items:flex-start; gap:2px;
    padding:28px 10px 9px; border:0; background:linear-gradient(to top, rgba(18,14,9,.92) 0, rgba(18,14,9,.7) 55%, rgba(18,14,9,0) 100%);
  }
  .around-embed-text { font-size:13px; letter-spacing:.08em; color:#fff6e6; }
  .around-embed-sub { font-size:10.5px !important; line-height:1.45; color:#e6dccb; letter-spacing:.02em; }
}
@media (max-width:760px){
  .around-embed[data-site="routes"] .around-embed-cover { object-position:50% 20%; }
  .around-embed-sub { word-break:auto-phrase; text-wrap:balance; }
}