/* =========================================================
   離れの宿 月白 — のれんの入口・湯けむりと雲・月乃が答える「よくある質問」
   ========================================================= */

/* ---------- 入口：のれん（丸窓の画面の上に重なり、めくれると下の画面が出る） ---------- */
.hero { position: relative; }
.hero-stage.is-cinematic { height: 210vh; }   /* のれん（時間でめくれる）のあと、丸窓の画面 → 丸窓が広がる */
.noren-scene {
  position: absolute;
  inset: 0;
  z-index: 5;
  overflow: hidden;
}
/* のれんの奥の暗がり（めくれると晴れて、丸窓の画面が見えてくる） */
.noren-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 35%, #2a211a 0%, var(--sumi) 70%);
  opacity: var(--veil, 1);
}
.noren-scene.is-gone, .noren-scene.is-off { display: none; }
.noren-scene__glow {
  position: absolute;
  left: 50%; top: 40%;
  width: 70vmin; height: 70vmin;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 196, 120, .45), rgba(255, 170, 90, .1) 45%, transparent 70%);
  opacity: calc(var(--veil, 1) * (.35 + var(--lift, 0) * .65));
  filter: blur(10px);
}
/* 画面を止める演出を使わない画面：ボタンか少しのスクロールで、のれんが自動でめくれる */
.noren-scene.is-open { --lift: 1; --gate: 0; --veil: 0; --pass: 1; pointer-events: none; }
.hero-stage:not(.is-cinematic) .noren__panel { transition: transform 1.8s cubic-bezier(.25, .7, .2, 1); }
.hero-stage:not(.is-cinematic) .noren { transition: transform 1.6s .9s cubic-bezier(.45, 0, .55, 1), opacity 1.6s .9s; }
.hero-stage:not(.is-cinematic) .noren-gate { transition: opacity .5s; }
.hero-stage:not(.is-cinematic) .noren-scene::before,
.hero-stage:not(.is-cinematic) .noren-scene__glow { transition: opacity 1.4s .3s; }
.hero-stage:not(.is-cinematic) .noren { top: 24px; }
.hero-stage:not(.is-cinematic) .noren-gate { bottom: auto; top: calc(24px + min(60svh, 560px) + 28px); }
.noren {
  position: absolute;
  top: 5%;
  left: 50%;
  display: flex;
  flex-direction: row-reverse;   /* 右の布から読む（縦書き） */
  gap: 6px;
  width: min(74vw, 620px);
  height: min(60svh, 560px);
  padding-top: 14px;
  /* くぐる動き（--pass: 0→1）。布を分けたあと、のれんが手前に近づきながら頭の上へ抜け、薄れて見えなくなる */
  transform-origin: 50% 0;
  transform: translateX(-50%) translateY(calc(var(--pass, 0) * -55%)) scale(calc(1 + var(--pass, 0) * .7));
  opacity: calc(1 - var(--pass, 0));
}
.noren__rod {
  position: absolute;
  top: 0; left: -7%; right: -7%;
  height: 14px;
  border-radius: 7px;
  background: linear-gradient(180deg, #7a5636, #3e2a1a);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .5);
  z-index: 2;
}
.noren__panel { position: relative; flex: 1; transform-origin: 50% 0; }
/* めくれる動き（--lift: 0→1）。右の布は右へ、左の布は左へ持ち上がる */
.noren__panel--r { transform: translate(calc(var(--lift, 0) * 62%), calc(var(--lift, 0) * -18%)) rotate(calc(var(--lift, 0) * -14deg)); }
.noren__panel--l { transform: translate(calc(var(--lift, 0) * -62%), calc(var(--lift, 0) * -18%)) rotate(calc(var(--lift, 0) * 14deg)); }
.noren__cloth {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 0 0 6px 6px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, #27355a 0%, #1d2848 60%, #172038 100%);
  box-shadow: inset 0 -40px 50px rgba(0, 0, 0, .3), 0 24px 50px rgba(0, 0, 0, .45);
  transform-origin: 50% 0;
}
/* 布のすそが風でゆれる */
@media (prefers-reduced-motion: no-preference) {
  .noren__cloth { animation: sway 6s ease-in-out infinite; }
  .noren__panel--l .noren__cloth { animation-delay: -2.6s; }
}
@keyframes sway {
  0%, 100% { transform: rotate(0deg) skewX(0deg); }
  30% { transform: rotate(.7deg) skewX(.6deg); }
  70% { transform: rotate(-.6deg) skewX(-.5deg); }
}
/* 2枚の布にまたがる、月白の紋（三日月） */
.noren__crest {
  position: absolute;
  top: 14%;
  width: 116px; height: 116px;
  border-radius: 50%;
  border: 3px solid var(--kinari);
}
.noren__crest::after {
  content: "";
  position: absolute;
  inset: 22px;
  border-radius: 50%;
  box-shadow: inset 20px -12px 0 0 var(--kinari);
}
.noren__panel--r .noren__crest { left: -61px; }
.noren__panel--l .noren__crest { right: -61px; }
.noren__text {
  position: absolute;
  top: 38%;
  left: 50%;
  margin: 0;
  transform: translateX(-50%);
  writing-mode: vertical-rl;
  font-family: var(--font-mincho);
  font-size: clamp(16px, min(2.6vw, 3.3vh), 30px);   /* 低い画面でも布からはみ出さない大きさ */
  letter-spacing: .26em;
  color: var(--kinari);
  white-space: nowrap;
}
.noren-gate {
  position: absolute;
  left: 0; right: 0;
  bottom: 5%;
  padding: 0 var(--gutter);
  text-align: center;
  opacity: var(--gate, 1);
}
.noren-gate__name { margin: 0 0 6px; font-size: 12px; letter-spacing: .3em; color: var(--biwa); }
.noren-gate__ask { margin: 0 0 16px; font-family: var(--font-mincho); font-size: clamp(17px, 2vw, 21px); letter-spacing: .12em; }
.noren-gate__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.noren-gate__hint { margin: 14px 0 0; font-size: 11px; color: var(--muted); letter-spacing: .14em; }

/* 演出中のファーストビュー：ノートパソコンの低い画面でも収まるよう、画面の高さに合わせて縮める */
@media (min-width: 861px) {
  .hero-stage.is-cinematic .hero { padding-top: 3vh; padding-bottom: 3vh; align-content: center; }
  .hero-stage.is-cinematic .hero__window { width: min(100%, 560px, calc(100svh - var(--header-h) - 14vh)); }
  .hero-stage.is-cinematic .hero__title { font-size: clamp(28px, min(5.4vw, 7.2vh), 64px); margin-bottom: 2.6vh; }
  .hero-stage.is-cinematic .hero__lead { margin-bottom: 3.2vh; }
  .hero-stage.is-cinematic .hero__actions { margin-bottom: 3.6vh; }
  .hero-stage.is-cinematic .eyebrow { margin-bottom: 1.6vh; }
  .hero-stage.is-cinematic .hero__facts { padding-top: 1.8vh; }
  .hero-stage.is-cinematic .hero__facts b { font-size: clamp(17px, 2.8vh, 22px); }
  .noren { top: 3%; height: min(60svh, 560px, calc(100svh - var(--header-h) - 210px)); }
  .noren-gate { bottom: 3%; }
  .noren-gate__ask { margin-bottom: 1.6vh; }
  .noren-gate__hint { margin-top: 1.2vh; }
}
@media (min-width: 861px) and (max-height: 720px) {
  /* ノートパソコンの低い画面：説明の行間と小さな数字の欄をつめる */
  .hero-stage.is-cinematic .hero__lead { line-height: 1.8; }
  .hero-stage.is-cinematic .hero__facts li { font-size: 11px; line-height: 1.6; }
  .noren-gate__name { display: none; }
}

/* ---------- ゆらゆら立ちのぼる湯けむり／流れる雲 ---------- */
.mist { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.mist span {
  position: absolute;
  bottom: -20%;
  width: 45%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(242, 236, 225, .22), rgba(242, 236, 225, .08) 40%, transparent 68%);
  filter: blur(18px);
  opacity: 0;
}
.mist span:nth-child(1) { left: 5%; }
.mist span:nth-child(2) { left: 25%; width: 55%; }
.mist span:nth-child(3) { left: 48%; }
.mist span:nth-child(4) { left: 64%; width: 38%; }
.mist span:nth-child(5) { left: 34%; width: 30%; }
.sky-clouds { position: absolute; inset: 0 0 45% 0; overflow: hidden; pointer-events: none; }
.sky-clouds span {
  position: absolute;
  top: 8%;
  left: -40%;
  width: 60%;
  height: 34%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(150, 160, 190, .22), rgba(150, 160, 190, .06) 55%, transparent 72%);
  filter: blur(14px);
}
.sky-clouds span:nth-child(2) { top: 22%; height: 26%; width: 45%; }
.sky-clouds span:nth-child(3) { top: 2%; height: 22%; width: 70%; }
@media (prefers-reduced-motion: no-preference) {
  .mist span { animation: rise 14s ease-in-out infinite; }
  .mist span:nth-child(2) { animation-duration: 18s; animation-delay: -4s; }
  .mist span:nth-child(3) { animation-duration: 15s; animation-delay: -9s; }
  .mist span:nth-child(4) { animation-duration: 20s; animation-delay: -2s; }
  .mist span:nth-child(5) { animation-duration: 16s; animation-delay: -12s; }
  .sky-clouds span { animation: drift 70s linear infinite; }
  .sky-clouds span:nth-child(2) { animation-duration: 95s; animation-delay: -40s; }
  .sky-clouds span:nth-child(3) { animation-duration: 120s; animation-delay: -75s; }
}
@media (prefers-reduced-motion: reduce) { .mist span { opacity: .6; bottom: 0; } }
@keyframes rise {
  0% { transform: translate(0, 10%) scale(.8); opacity: 0; }
  25% { opacity: 1; }
  50% { transform: translate(6%, -35%) scale(1.05); }
  100% { transform: translate(-4%, -85%) scale(1.35); opacity: 0; }
}
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(240%); } }
.closing .mist, .closing .sky-clouds { z-index: 0; }
.closing__inner { z-index: 1; }
.hero__reveal .mist { opacity: calc(.4 + var(--after, 0) * .6); }

/* ---------- よくある質問：月乃が答える ---------- */
.faq { display: block; }
.faq__head { max-width: 640px; margin-bottom: 40px; }
.faq-talk {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  grid-template-areas: "okami bubble" "tiles tiles";
  gap: 28px 32px;
  align-items: start;
}
.faq-talk__okami { grid-area: okami; margin: 0; text-align: center; }
.faq-talk__okami img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: 50% 20%;
  border-radius: 50%;
  border: 3px solid var(--biwa);
  background: #fff;
}
.faq-talk__okami figcaption { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 12px; font-family: var(--font-mincho); letter-spacing: .14em; }
.voice-toggle {
  min-height: 34px;
  padding: 0 12px;
  font-size: 12px;
  font-family: var(--font-sans);
  letter-spacing: .04em;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}
.voice-toggle[aria-pressed="true"] { color: var(--sumi); background: var(--biwa); border-color: var(--biwa); }
.faq-talk__bubble {
  grid-area: bubble;
  position: relative;
  align-self: center;
  min-height: 150px;
  padding: 26px 30px;
  background: var(--kinari);
  color: var(--kinari-ink);
  border-radius: 18px;
}
.faq-talk__bubble::before {   /* 吹き出しのしっぽ */
  content: "";
  position: absolute;
  left: -14px; top: 50%;
  border: 10px solid transparent;
  border-right: 16px solid var(--kinari);
  border-left: 0;
  transform: translateY(-50%);
}
.faq-talk__q { margin: 0 0 6px; font-size: 13px; color: var(--biwa-deep); }
.faq-talk__q:empty { display: none; }
.faq-talk__a { margin: 0; font-family: var(--font-mincho); font-size: 18px; line-height: 1.9; min-height: 1.9em; }
.faq-talk__bubble.is-pop { animation: pop .35s ease-out; }
@keyframes pop { 0% { transform: scale(.96); opacity: .4; } 100% { transform: none; opacity: 1; } }
.faq-tiles { grid-area: tiles; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; }
.faq-tile {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 10px;
  min-height: 132px;
  padding: 16px 8px;
  color: var(--kinari);
  background: var(--sumi-3);
  border: 1px solid rgba(242, 236, 225, .08);
  border-radius: 12px;
  cursor: pointer;
  transition: transform .25s, border-color .25s, background-color .25s;
}
.faq-tile svg { width: 44px; height: 44px; fill: none; stroke: var(--biwa); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.faq-tile span { font-size: 13px; letter-spacing: .06em; }
.faq-tile:hover { transform: translateY(-3px); border-color: rgba(214, 164, 108, .6); }
.faq-tile[aria-pressed="true"] { background: var(--kinari); color: var(--kinari-ink); border-color: var(--kinari); }
.faq-tile[aria-pressed="true"] svg { stroke: var(--biwa-deep); }
.faq-all { margin-top: 36px; border-top: 1px solid var(--line); }
.faq-all > summary {
  padding: 18px 0;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  list-style: none;
}
.faq-all > summary::-webkit-details-marker { display: none; }
.faq-all > summary::after { content: "＋"; margin-left: 10px; color: var(--biwa); }
.faq-all[open] > summary::after { content: "－"; }
.faq .note { margin-top: 12px; }

/* 月乃が話しているあいだ、少しうなずく */
@media (prefers-reduced-motion: no-preference) {
  .okami-speaking .faq-talk__okami img,
  .okami-speaking .concierge__face { animation: talk 1.6s ease-in-out infinite; }
}
@keyframes talk { 0%, 100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-3px) rotate(-1.5deg); } 60% { transform: translateY(0) rotate(1deg); } }

/* ---------- スマホ ---------- */
@media (max-width: 860px) {
  .noren { width: 86vw; height: min(46svh, 420px); top: 4%; }
  .noren-gate { bottom: calc(92px + env(safe-area-inset-bottom)); }   /* 画面下の固定ボタンに隠れないように */
  .hero-stage:not(.is-cinematic) .noren-gate { top: calc(24px + min(46svh, 420px) + 24px); }
  .noren__crest { width: 84px; height: 84px; }
  .noren__crest::after { inset: 16px; box-shadow: inset 14px -9px 0 0 var(--kinari); }
  .noren__panel--r .noren__crest { left: -45px; }
  .noren__panel--l .noren__crest { right: -45px; }
  .noren__text { font-size: 19px; top: 34%; letter-spacing: .2em; }
  .noren-gate__actions .btn { flex: 1 1 0; min-height: 48px; padding: 0 10px; }

  .faq-talk { grid-template-columns: 96px minmax(0, 1fr); grid-template-areas: "okami bubble" "tiles tiles"; gap: 18px 16px; }
  .faq-talk__okami figcaption { flex-direction: column; gap: 6px; font-size: 12px; }
  .faq-talk__bubble { padding: 16px 18px; min-height: 120px; border-radius: 14px; }
  .faq-talk__bubble::before { left: -12px; }
  .faq-talk__a { font-size: 15px; line-height: 1.8; }
  .faq-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .faq-tile { min-height: 100px; padding: 12px 4px; }
  .faq-tile svg { width: 34px; height: 34px; }
  .faq-tile span { font-size: 11px; }
}

/* ---------- 配置図：離れの絵 ---------- */
.map-trees > path { fill: #1a1612; }
.map-bamboo path { stroke: rgba(120, 150, 110, .35); stroke-width: 2; stroke-linecap: round; }
.map-rooms .villa__shadow { fill: rgba(0, 0, 0, .45); }
.map-rooms .villa__body { fill: #3a2c20; stroke: none; }
.map-rooms .villa__window { fill: #f2b56b; filter: drop-shadow(0 0 4px rgba(255, 190, 110, .9)); }
.map-rooms .villa__lattice { stroke: #5a3f26; stroke-width: .8; fill: none; }
.map-rooms .villa__deck { stroke: #8a6a48; stroke-width: 2; }
.map-rooms .villa__roof { fill: #2b2f36; stroke: #4a505a; stroke-width: 1; }
.map-rooms .villa__ridge { stroke: #6a717c; stroke-width: 1.5; }
.map-rooms rect { stroke: none; }
/* 灯りの印は、離れの屋根の上に小さく */
.map-pin { display: flex; flex-direction: column-reverse; align-items: center; gap: 3px; padding: 0; transform: translate(-50%, -140%); }   /* 灯りは屋根の上に浮かべる */
.map-rooms use { filter: drop-shadow(0 0 6px rgba(255, 180, 100, .35)); }

/* ---------- 部屋カード：写真と予約ボタン ---------- */
.room-card.has-room { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 20px; align-items: start; }
.room-card__photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; }
.room-card__photo + div > :first-child { margin-top: 0; }
.room-card__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.room-card__actions .btn { min-height: 42px; padding: 0 18px; font-size: 13px; }
@media (max-width: 860px) {
  .room-card.has-room { grid-template-columns: 1fr; }
  .room-card__photo { aspect-ratio: 16 / 9; }
}

/* ---------- 宿について：写真を塗りつぶさない ---------- */
.about__image { width: 86%; }
.about__body {
  width: min(460px, 86%);
  margin-top: -110px;
  padding: 40px 40px;
  background: rgba(31, 26, 22, .82);
  backdrop-filter: blur(6px);
}
@media (max-width: 860px) {
  .about__image { width: 100%; }
  .about__body { width: auto; margin-top: -40px; padding: 30px 24px; }
}