/* とも整体院（架空の見本）  6ページ・共通のデザイン
   仕掛けは1つ：スクロールで「シャボン玉が下から上へ上がってはじける」＋「葉っぱの札が上から降りてくる」。
   ほかの動き（線が描かれていく・縦書き・波）は控えめ。 */

:root {
  --bg: #FCFBF8;
  --ink: #3B3F4F;
  --ink-soft: #565B6C;
  --lav: #CFC9E8;
  --lav-mid: #DAD5EE;
  --lav-ink: #655C94;
  --honey: #F3DDA4;
  --honey-deep: #EFD289;
  --deep: #4B3F72;       /* 見出しの文字（濃い紫・1色）と、院長の段の濃い面 */
  --deep-2: #5A4D86;

  --f-round: "Quicksand", "Noto Sans JP", sans-serif;
  --f-mincho: "Shippori Mincho", "Noto Serif JP", serif;
  --f-body: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  --f-hand: "Yomogi", "Noto Sans JP", sans-serif;

  --wave-h: clamp(36px, 7vw, 84px);
  --hh: 64px; /* 上のメニューの高さ */
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 2;
  letter-spacing: .03em;
  overflow-x: clip;
  line-break: strict;
}
@supports (word-break: auto-phrase) {
  main p, main li, main dd, main summary { word-break: auto-phrase; }
}
img { max-width: 100%; display: block; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: inherit; }
ul, ol, dl { margin: 0; padding: 0; }
li { list-style: none; }
section[id] { scroll-margin-top: 76px; }

.nw { white-space: nowrap; }
.nb { display: inline-block; }
.small { font-size: 14px; }

/* 色の強調（トップの2か所だけ：ファーストと最後の一言） */
.hl {
  font-style: normal;
  font-weight: 500;
  background: linear-gradient(transparent 62%, var(--honey) 62%);
  padding: 0 .08em;
}

/* ---------- 一番上の帯 ---------- */
.sample-band {
  background: var(--honey);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.6;
  text-align: center;
  padding: 8px 14px;
  letter-spacing: .02em;
}

/* ---------- ヘッダー・メニュー ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: rgba(252, 251, 248, .92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.logo {
  margin-right: auto;
  font-family: var(--f-mincho);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: .06em;
  text-decoration: none;
  white-space: nowrap;
}
.burger {
  width: 44px; height: 44px;
  border: 0; background: none; padding: 0;
  display: grid; place-content: center; gap: 6px;
  cursor: pointer;
}
.burger span {
  display: block; width: 24px; height: 2px; border-radius: 2px;
  background: var(--ink);
  transition: transform .3s, opacity .3s;
}
.nav-open .burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-open .burger span:nth-child(2) { opacity: 0; }
.nav-open .burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.nav {
  display: none;
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: var(--bg);
  border-top: 1px solid rgba(59, 63, 79, .12);
  padding: 4px 24px 18px;
  box-shadow: 0 12px 24px rgba(101, 92, 148, .08);
}
.nav-open .nav { display: block; }
.nav a {
  display: flex;
  align-items: center;
  min-height: 56px;
  text-decoration: none;
  font-size: 17px;
  border-bottom: 1px solid rgba(59, 63, 79, .1);
}
.nav a[aria-current="page"] { color: var(--lav-ink); font-weight: 700; }

/* ---------- ボタン ---------- */
.btns { display: flex; flex-direction: column; gap: 14px; }
.btns--center { align-items: center; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 34px;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .06em;
  text-decoration: none;
  white-space: nowrap;
  border: 1.5px solid var(--ink);
  transition: transform .25s, background .25s;
}
.btn:hover { transform: translateY(-2px); }
.btn--honey { background: var(--honey-deep); border-color: var(--honey-deep); color: var(--ink); }
.btn--line { background: #fff; color: var(--ink); }
.btn--small { min-height: 44px; padding: 0 20px; font-size: 15px; }
.btns .btn { width: 100%; max-width: 340px; }

/* ---------- にじみの下地・波 ---------- */
.bleed { position: relative; isolation: isolate; overflow-x: clip; }
.bleed::before, .bleed::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}
.bleed::before { width: 90vw; height: 90vw; max-width: 680px; max-height: 680px; top: 0; right: -30%; background: radial-gradient(closest-side, var(--b1, rgba(207, 201, 232, .6)), transparent); }
.bleed::after  { width: 80vw; height: 80vw; max-width: 600px; max-height: 600px; bottom: 0; left: -30%; background: radial-gradient(closest-side, var(--b2, rgba(243, 221, 164, .5)), transparent); }
.bleed--honey { --b1: rgba(243, 221, 164, .5); --b2: rgba(207, 201, 232, .4); }
.bleed--lav   { --b1: rgba(207, 201, 232, .5); --b2: rgba(243, 221, 164, .35); }
.bleed--lav2  { --b1: rgba(243, 221, 164, .3); --b2: rgba(207, 201, 232, .5); }
.bleed--honey2{ --b1: rgba(207, 201, 232, .35); --b2: rgba(243, 221, 164, .6); }
.bleed--left::before  { right: auto; left: -34%; }
.bleed--left::after   { left: auto; right: -30%; }

.has-wave { position: relative; overflow-x: clip; }
.wave {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(100% - 1px);
  height: var(--wave-h);
  color: var(--c1);
  pointer-events: none;
  z-index: 2;
}
.wave svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.js .wave svg {
  transform: scaleY(.15);
  transform-origin: 50% 100%;
  transition: transform 2s cubic-bezier(.2, .7, .2, 1);
}
.js .is-in > .wave svg { transform: none; }

/* 段ごとの下地（ベタ塗りにしない：上から下へ色が移る） */
.bg-white  { --c1: var(--bg); background: var(--bg); }
.bg-lav    { --c1: #E4DFF4; --c2: #F3F1FA; background: linear-gradient(180deg, var(--c1), var(--c2)); }
.bg-honey  { --c1: #FBF1D6; --c2: var(--bg); background: linear-gradient(180deg, var(--c1), var(--c2)); }
.bg-lav2   { --c1: #EDEAF8; --c2: #F6F4FC; background: linear-gradient(180deg, var(--c1), var(--c2)); }
.bg-honey2 { --c1: #FAEFCB; --c2: #FCF6E3; background: linear-gradient(180deg, var(--c1), var(--c2)); }
.bg-final  { --c1: #D8D2EE; --c2: #ECE8F8; background: linear-gradient(180deg, var(--c1), var(--c2)); }

section { padding: 96px 0 104px; }
.wrap { width: 100%; max-width: 1040px; margin: 0 auto; padding: 0 28px; }
.wrap--narrow { max-width: 720px; }
.wrap--wide { max-width: 1120px; }

/* ページが見えたら、ふわっと出る（降る動きは使わない） */
.js .rv { opacity: 0; transform: translateY(14px); transition: opacity .9s, transform .9s; }
.js .rv.is-in { opacity: 1; transform: none; }

/* ---------- 見出し ---------- */
.sec-head { margin-bottom: 36px; }
.sec-sub { font-size: 15px; font-weight: 500; color: var(--lav-ink); letter-spacing: .1em; line-height: 1.6; }
.sec-title {
  font-family: var(--f-round);
  font-weight: 600;
  font-size: clamp(48px, 13vw, 72px);
  line-height: 1.1;
  letter-spacing: .02em;
  color: var(--lav-ink);
}
.q-title {
  font-family: var(--f-mincho);
  font-weight: 700;
  font-size: clamp(27px, 7.4vw, 38px);
  line-height: 1.6;
  letter-spacing: .06em;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.plain-title {
  font-weight: 500;
  font-size: clamp(24px, 6.4vw, 32px);
  line-height: 1.5;
  letter-spacing: .08em;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.note { margin-top: 28px; font-size: 14px; color: var(--ink-soft); line-height: 1.8; }

/* ページの見出し（サブページ） */
.page-head { padding: 72px 0 120px; }
.page-head .sec-title { font-size: clamp(56px, 16vw, 96px); }
.page-head .sec-head { margin-bottom: 20px; }
.page-lead { font-size: 17px; line-height: 2; max-width: 30em; }
.page-head--center { text-align: center; }
.page-head--center .page-lead { margin-left: auto; margin-right: auto; }
.page-head--right { text-align: right; }
.page-head--right .page-lead { margin-left: auto; }
.page-art { margin-top: 22px; width: 130px; }
.page-head--right .page-art { margin-left: auto; }
.page-head--center .page-art { margin-left: auto; margin-right: auto; }

/* ---------- 絵のシートの切り抜き（シートは白地なので multiply で白を消す） ---------- */
/* --sw＝シートの幅(px)、--bx --by --bw --bh＝切り抜く四角（シート上のpx） */
.crop {
  --sw: 1600;
  display: block;
  background-repeat: no-repeat;
  background-size: calc(var(--sw) * 100% / var(--bw)) auto;
  background-position: calc(var(--bx) / (var(--sw) - var(--bw)) * 100%) calc(var(--by) / (var(--shh, var(--sw)) - var(--bh)) * 100%);
  aspect-ratio: var(--bw) / var(--bh);
  mix-blend-mode: multiply;
  pointer-events: none;
}
.crop--menu    { --shh: 1066; background-image: url("img/line-menu-sheet.jpg"); filter: brightness(1.05); }
.crop--sprout  { --sw: 800; --shh: 533; background-image: url("img/sprout2-alpha.png"); mix-blend-mode: normal; }
.crop--line    { background-image: url("img/line-small-sheet.jpg"); filter: brightness(1.05); }
.crop--bubbles { --sw: 1254; background-image: url("img/bubble-sheet.jpg"); }

/* ---------- 1. ファーストビュー＝ほどける線画（スクロールでほどく） ---------- */
/* 既定（JS が動かない・動きを減らす設定）＝止まった形：のびをする人（S4）を大きく1枚、言葉3つ、ボタン2つ */
.unravel { background: var(--bg); position: relative; padding: 0; }
.unravel-stage { position: relative; padding: 18px 0 104px; }
.u-frame { display: none; }
.u-frame--last { display: block; width: min(92%, 380px); margin: 0 auto; mix-blend-mode: multiply; }
.u-frame img { display: block; width: 100%; height: auto; filter: brightness(1.05); }
.u-bottom { padding: 8px 28px 0; text-align: center; }
.u-words {
  font-family: var(--f-mincho);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: .08em;
  word-break: keep-all;
}
.uw { display: block; }
.uw1 { font-size: clamp(16px, 4.4vw, 20px); font-weight: 500; color: var(--ink-soft); letter-spacing: .12em; }
.uw2, .uw3 { font-size: clamp(26px, 7.2vw, 40px); }
.hero-en { display: none; font-family: var(--f-round); font-weight: 500; font-size: 14px; letter-spacing: .24em; color: var(--lav-ink); margin-bottom: 6px; }
.u-lead { margin-top: 14px; font-size: 16px; line-height: 1.8; }
.u-bottom .btns { margin-top: 16px; align-items: center; }
.uw2, .uw3 { display: inline-block; white-space: nowrap; }
.uw2 + .uw3 { margin-left: .35em; }
.u-bottom .btn { width: 100%; max-width: 340px; min-height: 52px; }

.scroll {
  position: absolute;
  left: 28px; bottom: 26px;
  display: none; gap: 8px;
  height: 80px;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--f-round);
  font-size: 13px;
  letter-spacing: .22em;
}
.scroll span { writing-mode: vertical-rl; }
.scroll::after {
  content: "";
  width: 1px; height: 100%;
  background: var(--ink);
  transform-origin: top;
  animation: scrollline 2.6s ease-in-out infinite;
}
@keyframes scrollline {
  0% { transform: scaleY(0); }
  60% { transform: scaleY(1); }
  100% { transform: scaleY(1); opacity: 0; }
}

/* 動く形（script.js が付ける）：画面に貼りつき、スクロール量 p で絵がほどけていく */
.unravel--live .unravel-track { height: 340vh; height: 340svh; position: relative; }
.unravel--live .unravel-stage {
  position: sticky;
  top: var(--hh);
  height: calc(100vh - var(--hh) - var(--bh, 0px));
  height: calc(100svh - var(--hh) - var(--bh, 0px));
  padding: 0;
  overflow: hidden;
  background: var(--bg);   /* 絵の白地を multiply で消すため、枠自身に下地を持たせる */
}
.unravel--live .u-frame {
  display: block;
  position: absolute; inset: 0 0 auto 0; height: 96%;   /* スマホ：絵は上の約96%（下の言葉の置き場に絵がかぶらないよう、縦長の絵の下の空きは言葉に使う） */
  width: auto; margin: 0;
  opacity: 0;
  will-change: opacity, transform;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.unravel--live .u-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 0; }
.unravel--live .u-frame.is-off { visibility: hidden; }
.unravel--live .u-frame--first { opacity: 1; }
/* 読み込み直後の「描かれていく」マスクは script.js が付ける（円が中心から広がる・1回だけ。描き終わったら外す） */
.unravel--live .u-bottom {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding-bottom: calc(var(--wave-h) + 2px);
}
.unravel--live .uw { opacity: 0; will-change: opacity; }
.unravel--live .uw1 { transition: opacity .6s; }
.unravel--live.u-ready .uw1 { opacity: 1; }
.unravel--live .u-end { opacity: 0; will-change: opacity; }
.unravel--live .u-lead { margin-top: 10px; font-size: 14.5px; line-height: 1.7; animation: u-fade .9s .3s both; }
@keyframes u-fade { from { opacity: 0; } to { opacity: 1; } }
.unravel--live .u-bottom .btns { flex-direction: row; gap: 10px; margin-top: 14px; }
.unravel--live .u-bottom .btn { flex: 1 1 0; min-width: 0; width: auto; padding: 0 8px; min-height: 50px; font-size: 15px; letter-spacing: .02em; }
.unravel--live .u-bottom { background: linear-gradient(180deg, rgba(252, 251, 248, 0), rgba(252, 251, 248, .92) 26%); padding-top: 28px; }
.unravel--live .scroll { display: flex; opacity: 0; transition: opacity .6s; }
.unravel--live.u-ready .scroll { opacity: 1; }
.unravel--live.u-moved .scroll { opacity: 0; }

/* ---------- 2. シャボン玉（大きく・次々に・スクロールで下から上へ上がって、見出しの下ではじける。はじけるたびに新芽） ---------- */
/* 既定（JS が動かない・動きを減らす設定）＝止まった形で、見出し・12個ぜんぶ・新芽12本 */
.bubbles { --c1: #EDEAF8; padding: 0; background: linear-gradient(180deg, #EDEAF8, #F6F4FC); }
.bubbles-stage { position: relative; padding: 112px 0 0; }
.bubbles-head { padding: 0 28px; text-align: center; margin-bottom: 36px; }
.bubbles-head h2 {
  font-family: var(--f-mincho); font-weight: 700;
  font-size: clamp(28px, 7.6vw, 36px); line-height: 1.5; letter-spacing: .06em; word-break: keep-all;
}
.bubble-list { max-width: 560px; margin: 0 auto; padding: 0 20px; }
.bubble {
  --base: clamp(170px, 50vw, 190px);
  --d: calc(var(--k, 1) * var(--base));
  --edge: rgba(150, 140, 205, .75);
  position: relative;
  display: grid;
  place-items: center;
  width: var(--d);
  height: var(--d);
  margin-left: calc((100% - var(--d)) * var(--xf, 0));
  margin-bottom: calc(var(--d) * -.2);
  z-index: var(--z, 1);
  mix-blend-mode: multiply;
}
.bubble--honey { --edge: rgba(214, 178, 90, .85); }
.bubble--clear { --edge: rgba(130, 150, 205, .7); }
.bubble-body { position: absolute; inset: 0; mix-blend-mode: normal; opacity: var(--o, 1); transform: var(--bt, none); }
.bubble-text {
  position: relative; z-index: 1; width: 66%; text-align: center;
  font-size: 15px; font-weight: 500; line-height: 1.55; letter-spacing: .02em; word-break: keep-all;
}
.bubble-text .nb { display: block; }
.pop { display: none; }

/* 新芽の庭（丘＋新芽12本）。既定は、丘のふちに横一列で立つ */
.garden { position: relative; display: flex; justify-content: center; align-items: flex-end; flex-wrap: nowrap; padding: 44px 6px 0; margin-top: 40px; }
.garden-hill {
  position: absolute; left: 0; right: 0; bottom: 0; height: 74px;
  background: #DDD7F0;
  border-radius: 56% 44% 0 0 / 44px 30px 0 0;
}
.sprout-g { position: relative; flex: 0 0 auto; height: var(--spx, 54px); margin: 0 -3px; z-index: 1; filter: saturate(1.15); }

/* 動く形（script.js が付ける） */
.bubbles--live .bubbles-track { height: 440vh; height: 440svh; position: relative; }
.bubbles--live .bubbles-stage {
  position: sticky; top: var(--hh);
  height: calc(100vh - var(--hh)); height: calc(100svh - var(--hh));
  padding: 0; overflow: hidden;
  background:
    radial-gradient(circle 60vmax at 92% 8%, rgba(207, 201, 232, .5), transparent),
    radial-gradient(circle 55vmax at 4% 96%, rgba(243, 221, 164, .4), transparent),
    linear-gradient(180deg, #EDEAF8, #F6F4FC);
}
.bubbles--live .bubbles-head { position: absolute; top: 5%; left: 0; right: 0; margin: 0; z-index: 30; }
.bubbles--live .bubble-list { display: block; position: static; max-width: none; padding: 0; margin: 0; }
.bubbles--live .bubble { position: absolute; left: 0; top: 0; margin: 0; will-change: transform; }
.bubbles--live .bubble.is-wait { visibility: hidden; }
.bubbles--live .bubble.is-popped { visibility: hidden; transition: visibility 0s .6s; }
.bubbles--live .bubble-body, .bubbles--live .bubble-text { transition: transform .3s ease-out, opacity .3s ease-out; }
.bubbles--live .bubble.is-popped .bubble-body { transform: var(--bt, none) scale(1.22); opacity: 0; }
.bubbles--live .bubble.is-popped .bubble-text { opacity: 0; transition-duration: .18s; }
.bubbles--live .pop { display: block; position: absolute; inset: 0; pointer-events: none; }
.pop-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--edge); opacity: 0; }
.bubble.is-popped .pop-ring { animation: ring .45s ease-out forwards; }
@keyframes ring { from { opacity: .8; transform: scale(.95); } to { opacity: 0; transform: scale(1.65); } }
.pop-dot { position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--edge); opacity: 0; }
.pop-dot:nth-child(even) { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--honey-deep); }
.bubble.is-popped .pop-dot { animation: dot .55s ease-out forwards; }
@keyframes dot {
  from { opacity: 1; transform: translate(0, 0) scale(1); }
  to   { opacity: 0; transform: translate(calc(var(--cx) * var(--d) * .5), calc(var(--cy) * var(--d) * .5 + var(--d) * .3)) scale(.3); }
}
@media (max-width: 700px) { .pop-dot:nth-child(n+8) { display: none; } }

.bubbles--live .garden {
  position: absolute; left: 0; right: 0; bottom: 0; height: 16%;
  display: block; padding: 0; margin: 0; z-index: 40;
  will-change: transform;
}
.bubbles--live .garden-hill { height: 100%; }
.bubbles--live .sprout-g {
  position: absolute; margin: 0; bottom: calc(100% - 12px); left: 50%;
  transform: translateX(-50%) scale(0); transform-origin: 50% 100%;
  opacity: 0;
  transition: transform .5s cubic-bezier(.3, 1.4, .5, 1), opacity .3s;
}
.bubbles--live .sprout-g.is-up { transform: translateX(-50%) scale(1); opacity: 1; }
.bubbles--live .sprout-g.is-off { visibility: hidden; }

/* ---------- 3. ほどく（写真と一言）：新芽の丘のつづき ---------- */
.treat { background: linear-gradient(180deg, #DDD7F0 0, #E9E5F6 22%, var(--bg) 100%); padding: 6px 0 104px; text-align: center; overflow: hidden; }
.treat .bubbles-treat {
  margin: 0 auto;
  width: min(86%, 400px);
  aspect-ratio: 3 / 2;
  border-radius: 32px;
  -webkit-mask-image: radial-gradient(closest-side, #000 74%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 74%, transparent 100%);
  overflow: hidden;
}
.treat .bubbles-treat img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bubbles-end {
  margin-top: 36px; padding: 0 28px; text-align: center;
  font-family: var(--f-mincho); font-weight: 700;
  font-size: clamp(22px, 6.2vw, 30px); line-height: 1.7; letter-spacing: .08em; word-break: keep-all;
}

/* ---------- 3. 縦書きのキャッチ ---------- */
.catch { padding: 140px 0 150px; background: var(--bg); }
.catch-inner { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; }
.vtext {
  writing-mode: vertical-rl;
  font-family: var(--f-mincho);
  font-weight: 700;
  font-size: clamp(30px, 8.2vw, 46px);
  line-height: 1.9;
  letter-spacing: .14em;
  word-break: keep-all;
  white-space: nowrap;
}
.vline { display: block; }
/* 1文字ずつ、上から墨がのるように現れる（script.js が文字を分けて、スクロールに合わせて opacity・blur・clip-path を動かす）。
   動きを減らす設定の人は、script.js が文字を分けないので、最初から全部見える */
.vtext .ch { display: inline-block; }
.vtext.ink-on .ch { opacity: 0; }

/* ---------- 4. 入口：絵を大きく入れた5つの入口（箱にしない。切り抜きの形・大きさ・左右を変える） ---------- */
.entrance { padding-bottom: 120px; }
.entrance .q-title { margin-bottom: 40px; }
.doors { display: grid; gap: 64px; }
.door { display: block; position: relative; text-decoration: none; color: var(--ink); }
.door-fig { position: relative; overflow: hidden; background: #E4DFF4; }
.door-fig > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.door-fig--line { background: #EAE6F6; }
.door-fig--line > img { mix-blend-mode: multiply; }
.door-body { padding-top: 18px; }
.door-name { font-family: var(--f-mincho); font-weight: 700; font-size: 24px; line-height: 1.4; letter-spacing: .06em; word-break: keep-all; }
.door-desc { margin-top: 4px; font-size: 15px; line-height: 1.8; }
.door-more {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 48px; margin-top: 6px;
  font-size: 14px; font-weight: 500; letter-spacing: .1em;
  color: var(--lav-ink);
}
.door-more i { position: relative; display: block; width: 44px; height: 1.5px; background: currentColor; transition: width .3s; }
.door-more i::after {
  content: ""; position: absolute; right: 0; top: -3.5px;
  width: 7px; height: 7px;
  border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor;
  transform: rotate(45deg); transform-origin: 70% 30%;
}
.door:hover .door-more i, .door:focus-visible .door-more i { width: 64px; }

/* 形：入口ごとに変える */
.shape-arch   { border-radius: 999px 999px 24px 24px; }
.shape-pill   { border-radius: 999px; }
.shape-circle { border-radius: 50%; }
.shape-egg    { border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; }
.shape-bowl   { border-radius: 0 0 50% 50% / 0 0 22% 22%; }
.shape-blob   { border-radius: 62% 38% 52% 48% / 46% 56% 44% 54%; }
.shape-wave {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0,7 C12,1 22,11 36,6 C52,0 64,11 78,6 C88,2 95,6 100,5 L100,94 C90,99 80,90 66,95 C50,101 38,91 24,96 C12,100 5,95 0,96 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0,7 C12,1 22,11 36,6 C52,0 64,11 78,6 C88,2 95,6 100,5 L100,94 C90,99 80,90 66,95 C50,101 38,91 24,96 C12,100 5,95 0,96 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* スマホ：縦1列。絵は幅いっぱいに近く、左右にずらす */
.door--1 .door-fig { width: min(100%, 360px); height: 232px; }
.door--2 .door-fig { width: min(100%, 340px); height: 214px; margin-left: auto; }
.door--3 .door-fig { width: 232px; height: 232px; margin-left: 4%; }
.door--4 .door-fig { width: 188px; height: 240px; margin-left: auto; margin-right: 8%; }
.door--5 .door-fig { width: min(100%, 340px); height: 214px; }
.door--2 .door-body { text-align: right; }
.door--4 .door-body { text-align: right; padding-right: 8%; }
.door--3 .door-body { padding-left: 4%; }

/* ---------- メニューのページ：絵つきの大きな行 ---------- */
.menu-rows { border-top: 1px solid rgba(59, 63, 79, .28); }
.menu-row {
  display: grid; justify-items: center; gap: 22px;
  padding: 44px 0;
  border-bottom: 1px solid rgba(59, 63, 79, .28);
  text-align: center;
}
.menu-pic {
  position: relative; width: 204px; aspect-ratio: var(--ar, 1);
  overflow: hidden; isolation: isolate;
  background: radial-gradient(circle at 50% 40%, #fff, #EDE9F8 92%);
}
.menu-pic > .crop { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
.menu-pic--circle { border-radius: 50%; }
.menu-pic--egg { --ar: .511; width: 190px; border-radius: 50% 50% 50% 50% / 56% 56% 44% 44%; }
.menu-name { font-size: 21px; font-weight: 700; line-height: 1.55; letter-spacing: .04em; }
.menu-desc { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); }
.menu-meta { margin-top: 8px; display: flex; gap: 16px; align-items: baseline; justify-content: center; font-size: 16px; }
.menu-price { font-family: var(--f-round); font-weight: 700; font-size: 30px; letter-spacing: .02em; }

/* ---------- 頭の大きな絵（サブページ） ---------- */
.head-pic { margin-top: 34px; }
.head-pic > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.head-pic--photo { overflow: hidden; aspect-ratio: 4 / 3; }
.head-pic--line { width: min(100%, 300px); margin-left: auto; margin-right: auto; }
.head-pic--line > img { object-fit: contain; mix-blend-mode: multiply; height: auto; }
.page-head--right .head-pic--line { margin-right: 0; }

.head-pic--egg { width: 190px; height: 250px; margin-left: auto; margin-right: auto; overflow: hidden; }
.head-pic--wave { width: min(100%, 460px); aspect-ratio: 4 / 3; margin-left: auto; margin-right: auto; overflow: hidden; }
.head-pic--circle { width: 240px; aspect-ratio: 1; margin-left: auto; margin-right: auto; overflow: hidden; }
.head-pic--egg > img, .head-pic--wave > img, .head-pic--circle > img { display: block; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.page-head--right .head-pic--circle { margin-right: 0; }
.menu-text { max-width: 30em; }

/* ---------- 仮の枠（画像が届くまで。最終版には残さない） ---------- */
.ph {
  display: grid; place-items: center;
  width: 100%; height: 100%; min-height: 120px;
  background: #e4e4e4; border: 1.5px dashed #999;
  color: #777; font-size: 14px; text-align: center;
}

/* ---------- 最後のひと押し ---------- */
.final { padding: 112px 0 112px; text-align: center; }
.final-title {
  font-family: var(--f-mincho);
  font-weight: 700;
  font-size: clamp(30px, 8.4vw, 46px);
  line-height: 1.6;
  letter-spacing: .08em;
  word-break: keep-all;
}
.final-lead { margin-top: 20px; font-size: 16px; }
.final .btns { margin-top: 36px; }
.final-note { margin-top: 26px; font-size: 14px; color: var(--ink-soft); line-height: 1.8; }

/* ---------- サブページの中身 ---------- */
.block-title { margin-bottom: 18px; }
.prose p { font-size: 16px; line-height: 2.1; }
.prose p + p { margin-top: 1.1em; }
.prose .small { color: var(--ink-soft); }

/* はじめての流れ */
.steps { position: relative; margin: 8px 0 36px; }
.steps li {
  position: relative;
  display: flex; align-items: center; gap: 20px;
  padding: 16px 0;
}
.steps li::before {
  content: "";
  position: absolute;
  left: 14px; top: 0; bottom: 0;
  width: 1.5px;
  background: var(--lav-ink);
}
.steps li:first-child::before { top: 50%; }
.steps li:last-child::before { bottom: 50%; }
.dot {
  position: relative; z-index: 1;
  flex: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  background: var(--lav);
}
.dot--honey { background: var(--honey); }
.step-text { font-size: 18px; font-weight: 500; line-height: 1.6; word-break: keep-all; }

/* 気をつけてほしいこと */
.care { padding: 24px 0 0; }
.care .plain-title { margin-bottom: 10px; }
.care p { font-size: 17px; line-height: 1.95; }

/* 写真 */
.photo { overflow: hidden; }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo--1 {
  width: 80%; margin-left: auto;
  aspect-ratio: 4 / 5;
  border-radius: 62% 38% 52% 48% / 46% 56% 44% 54%;
}
.photo--2 {
  aspect-ratio: 4 / 3;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0,7 C12,1 22,11 36,6 C52,0 64,11 78,6 C88,2 95,6 100,5 L100,94 C90,99 80,90 66,95 C50,101 38,91 24,96 C12,100 5,95 0,96 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0,7 C12,1 22,11 36,6 C52,0 64,11 78,6 C88,2 95,6 100,5 L100,94 C90,99 80,90 66,95 C50,101 38,91 24,96 C12,100 5,95 0,96 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.caption {
  margin-top: 20px;
  font-family: var(--f-hand);
  font-size: 17px;
  color: var(--lav-ink);
  text-align: center;
}
.about-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }

/* こんな方へ */
.worry-list { margin-top: 28px; border-bottom: 1px solid rgba(59, 63, 79, .28); }
.worry-list li {
  position: relative;
  padding: 22px 0 22px 36px;
  border-top: 1px solid rgba(59, 63, 79, .28);
  font-size: 17px;
  line-height: 1.9;
}
.worry-list li::before {  /* 小さな丸の印 */
  content: "";
  position: absolute; left: 3px; top: 36px;
  width: 12px; height: 12px;
  border: 1.2px solid var(--ink);
  border-radius: 50%;
  background: var(--lav);
}
.worry-close { margin-top: 28px; font-size: 16px; }

/* 営業時間・場所 */
.info { border-top: 1px solid rgba(59, 63, 79, .28); }
.info > div {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 12px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(59, 63, 79, .28);
}
.info dt { font-size: 15px; font-weight: 500; color: var(--lav-ink); line-height: 1.9; }
.info dd { margin: 0; font-size: 17px; line-height: 1.8; }

/* よくある質問 */
.qa { margin-bottom: 14px; }
.qa summary {
  position: relative;
  display: block;
  min-height: 56px;
  padding: 14px 64px 14px 24px;
  background: #fff;
  border: 1.5px solid var(--lav-ink);
  border-radius: 999px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  cursor: pointer;
  list-style: none;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {  /* ＋ */
  content: "";
  position: absolute; right: 16px; top: 50%;
  width: 32px; height: 32px;
  margin-top: -16px;
  border-radius: 50%;
  border: 1.5px solid var(--lav-ink);
  background:
    linear-gradient(var(--lav-ink), var(--lav-ink)) center / 12px 1.5px no-repeat,
    linear-gradient(var(--lav-ink), var(--lav-ink)) center / 1.5px 12px no-repeat;
}
.qa[open] summary::after {
  background:
    linear-gradient(var(--lav-ink), var(--lav-ink)) center / 12px 1.5px no-repeat,
    linear-gradient(var(--lav-ink), var(--lav-ink)) center / 1.5px 0 no-repeat;
}
.qa p { padding: 16px 24px 4px; font-size: 16px; line-height: 1.95; }
.page-end { padding: 64px 0 80px; }
.page-end .btns { margin-top: 0; }
.care + .btns { margin-top: 36px; }

/* 若葉・新芽の飾り（小さく・端に1つ・動かさない） */
.sprout { position: absolute; z-index: 1; pointer-events: none; }
.final { isolation: isolate; }
.final .wrap, .page-head .wrap { position: relative; }
.final .sprout { right: 6px; top: auto; bottom: calc(100% + 6px); width: 64px; filter: brightness(1.06); }
.sprout--l { left: auto; }

/* ---------- フッター ---------- */
.site-footer {
  padding: 48px 28px 56px;
  background: #F4F2FA;
  text-align: center;
}
.footer-art { width: 150px; margin: 0 auto 16px; }
.footer-name { font-family: var(--f-mincho); font-weight: 700; font-size: 22px; letter-spacing: .14em; }
.footer-place { margin-top: 2px; font-size: 15px; }
.footer-nav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 8px; margin: 18px auto 10px; max-width: 520px; }
.footer-nav a {
  display: inline-flex; align-items: center;
  min-height: 48px; padding: 0 10px;
  font-size: 15px;
  text-decoration: none;
}
.footer-nav a:hover { color: var(--lav-ink); }
.footer-note { margin-top: 8px; font-size: 14px; color: var(--ink-soft); }

/* ---------- パソコン ---------- */
@media (min-width: 960px) {
  :root { --hh: 68px; }
  body { font-size: 17px; }
  .sample-band { font-size: 14px; }
  .site-header { padding: 12px 40px; gap: 24px; }
  .burger { display: none; }
  .nav {
    display: block; position: static;
    background: none; border: 0; box-shadow: none; padding: 0;
  }
  .nav ul { display: flex; gap: 22px; }
  .nav a { min-height: 0; padding: 4px 0; border: 0; font-size: 14px; white-space: nowrap; }
  .nav a:hover { color: var(--lav-ink); }

  section { padding: 128px 0 140px; }
  .wrap { padding: 0 48px; }
  .btns { flex-direction: row; gap: 18px; }
  .btns .btn { width: auto; }

  /* ファーストビュー（パソコン）：横長の絵を画面いっぱいに。言葉は絵の下の余白（左：言葉／右：本文とボタン） */
  .u-frame--last { width: min(78%, 1100px); }
  .unravel-stage { padding: 40px 0 120px; }
  .unravel--live .unravel-track { height: 360vh; }
  .unravel--live .u-frame { inset: 0; height: auto; }
  .unravel--live .u-frame img { object-position: 50% 0; }
  .unravel--live .u-bottom .btns { flex-direction: row; margin-top: 12px; }
  .unravel--live .u-bottom .btn { flex: 0 0 auto; padding: 0 34px; font-size: 17px; min-height: 56px; }
  .unravel--live .u-lead { font-size: 17px; margin-top: 0; }
  .u-bottom { padding: 0 48px; }
  .unravel--live .u-bottom {
    right: 0; top: auto; width: auto;
    display: grid; grid-template-columns: 1.2fr 1fr; column-gap: 40px; align-items: end; text-align: left;
    padding: 0 56px calc(var(--wave-h) + 10px);
    background: none;
  }
  .unravel--live .u-words { grid-column: 1; grid-row: 1 / 3; }
  .unravel--live .u-lead { grid-column: 2; grid-row: 1; align-self: end; }
  .unravel--live .u-end { grid-column: 2; grid-row: 2; }
  .hero-en { display: none; }
  .u-bottom .btns { align-items: flex-start; flex-direction: row; flex-wrap: wrap; margin-top: 12px; }
  .u-bottom .btn { width: auto; }
  .uw1 { font-size: 22px; }
  .uw2, .uw3 { display: inline; font-size: clamp(44px, 4.6vw, 64px); }
  .uw2 + .uw3 { margin-left: .3em; }
  .u-lead { font-size: 17px; max-width: 24em; margin-top: 0; }
  .scroll { left: 48px; bottom: calc(var(--wave-h) + 8px); height: 60px; }

  /* シャボン玉・新芽（パソコン） */
  .bubble { --base: clamp(210px, 18.5vw, 250px); }
  .bubble-text { font-size: 17px; }
  .bubble-list { max-width: 1040px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 24px; padding: 0 48px; }
  .bubble { margin-bottom: calc(var(--d) * -.1); }
  .bubbles--live .bubbles-track { height: 400vh; }
  .bubbles-head h2 { font-size: clamp(40px, 3.8vw, 52px); }
  .bubbles--live .bubbles-head { top: 6%; }
  .sprout-g { height: var(--spd, 80px); }
  .garden-hill { height: 90px; }
  .treat { padding: 36px 0 128px; }
  .treat .bubbles-treat { width: min(52%, 560px); }
  .bubbles-end { font-size: clamp(30px, 3vw, 38px); margin-top: 44px; }

  .catch { padding: 160px 0 170px; }

  .entrance .q-title { text-align: center; margin-bottom: 64px; }
  .doors { grid-template-columns: repeat(6, 1fr); gap: 88px 40px; align-items: start; }
  .door--1, .door--2 { grid-column: 1 / 7; display: grid; align-items: center; gap: 64px; }
  .door--1 { grid-template-columns: 1.1fr .9fr; }
  .door--2 { grid-template-columns: .9fr 1.1fr; }
  .door--2 .door-body { order: -1; text-align: right; }
  .door--2 .door-more { flex-direction: row; }
  .door--1 .door-fig { width: 100%; height: 440px; }
  .door--2 .door-fig { width: 100%; height: 380px; margin: 0; }
  .door-body { padding-top: 0; }
  .door-name { font-size: 32px; }
  .door-desc { font-size: 17px; }
  .door--3 { grid-column: 1 / 3; }
  .door--4 { grid-column: 3 / 5; margin-top: 64px; }
  .door--5 { grid-column: 5 / 7; margin-top: 24px; }
  .door--3 .door-fig { width: min(100%, 300px); height: auto; aspect-ratio: 1; margin: 0; }
  .door--4 .door-fig { width: min(76%, 250px); height: auto; aspect-ratio: 3 / 4; margin: 0 auto 0 0; }
  .door--5 .door-fig { width: 100%; height: auto; aspect-ratio: 4 / 3; }
  .door--3 .door-body { padding: 18px 0 0; }
  .door--4 .door-body { text-align: left; padding: 18px 0 0; }
  .door--5 .door-body { padding-top: 18px; }

  .menu-row { grid-template-columns: 260px 1fr; justify-items: start; gap: 56px; text-align: left; padding: 56px 0; }
  .menu-row .menu-pic { width: 240px; }
  .menu-row .menu-pic--egg { width: 200px; }
  .menu-row .menu-meta { justify-content: flex-start; }
  .menu-row:nth-child(even) { grid-template-columns: 1fr 260px; }
  .menu-row:nth-child(even) .menu-pic { order: 2; justify-self: end; }
  .menu-row:nth-child(even) .menu-text { text-align: right; justify-self: end; }
  .menu-row:nth-child(even) .menu-meta { justify-content: flex-end; }
  .head-pic--photo { aspect-ratio: 16 / 7; }
  .head-pic--line { width: 340px; }

  .page-head { padding: 96px 0 150px; }
  .page-art { width: 160px; }
  .prose p { font-size: 17px; }
  .about-grid { grid-template-columns: 1.15fr .85fr; gap: 72px; align-items: center; }
  .photo--1 { width: 100%; margin: 0; }
  .photo--2 { aspect-ratio: 16 / 7; }

  .steps { display: grid; grid-template-columns: repeat(5, 1fr); margin: 40px 0 56px; }
  .steps li { flex-direction: column; text-align: center; gap: 16px; padding: 0 6px; }
  .steps li::before { left: 0; right: 0; top: 14px; bottom: auto; width: auto; height: 1.5px; }
  .steps li:first-child::before { top: 14px; left: 50%; }
  .steps li:last-child::before { bottom: auto; right: 50%; }

  .worry-list li { font-size: 19px; padding: 26px 0 26px 44px; }
  .worry-list li::before { top: 40px; }
  .info > div { grid-template-columns: 140px 1fr; padding: 22px 0; }
  .qa summary { font-size: 17px; padding: 16px 72px 16px 30px; }
  .final-title { font-size: clamp(40px, 4.4vw, 54px); }
  .final .sprout { right: 0; bottom: calc(100% + 6px); width: 84px; }
  .final .btns { justify-content: center; }
}

/* ---------- 動きを減らす設定 ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scroll::after { animation: none; }
  .js .rv { opacity: 1; transform: none; transition: none; }
  .js .wave svg { transform: none; transition: none; }
  .btn, .door-more i { transition: none; }
}


/* ---------- 直し5回目 E：見出しの文字を、濃い紫の1色にして、太さを上げる ---------- */
.sec-title { color: var(--deep); font-weight: 700; }
.sec-sub { color: var(--deep); font-weight: 700; }
.q-title, .plain-title, .bubbles-head h2, .final-title, .door-name, .footer-name { color: var(--deep); }
.q-title, .bubbles-head h2, .final-title, .door-name { font-weight: 800; }
.plain-title { font-weight: 700; }
.menu-name { color: var(--deep); font-weight: 800; }
.uw2, .uw3 { color: var(--deep); font-weight: 800; }
.uw1 { color: var(--deep); font-weight: 700; }
.label { color: var(--deep); border-color: var(--deep); font-weight: 700; }
.info dt { color: var(--deep); font-weight: 700; }
.door-more { color: var(--deep); }
.vtext { color: var(--deep); font-weight: 800; }
.bubbles-end { color: var(--deep); font-weight: 800; }


/* ---------- 直し5回目 D：院長のひとこと（濃い紫の面は、この段だけ） ---------- */
.director {
  --c1: var(--deep);
  padding: 72px 0 96px;
  background: linear-gradient(180deg, var(--deep) 0, var(--deep-2) 55%, #7A6EAC 100%);   /* 下は少し明るくして、入口の黄色い面への切り替えをやわらげる */
  color: #fff;
  overflow: hidden;
}
.director-inner { max-width: 1120px; margin: 0 auto; padding: 0 28px; }
.director-photo {
  margin: 0 0 36px;
  width: min(100%, 320px);
  aspect-ratio: 4 / 5;
  border-radius: 56% 44% 52% 48% / 46% 52% 48% 54%;
  overflow: hidden;
  background: #6B5FA0;
}
.director-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.director-hello { font-family: var(--f-round); font-weight: 700; font-size: 15px; letter-spacing: .28em; color: var(--honey); }
.director-say {
  margin-top: 14px;
  font-family: var(--f-mincho); font-weight: 800;
  font-size: clamp(26px, 7.2vw, 34px); line-height: 1.6; letter-spacing: .06em; word-break: keep-all;
}
.director-say2 { margin-top: 18px; font-size: 17px; line-height: 2; color: rgba(255, 255, 255, .92); }
.director-sign { margin-top: 26px; display: flex; align-items: center; gap: 14px; font-family: var(--f-mincho); font-weight: 700; font-size: 17px; letter-spacing: .3em; }
.director-sign span { display: block; width: 44px; height: 1px; background: rgba(255, 255, 255, .7); }

@media (min-width: 960px) {
  .director { padding: 128px 0 140px; }
  .director-inner { max-width: none; padding: 0; display: grid; grid-template-columns: 5fr 6fr; gap: 72px; align-items: center; }
  .director-photo { width: 100%; max-width: 640px; margin: 0; justify-self: start; border-radius: 0 58% 46% 0 / 0 50% 52% 0; aspect-ratio: 4 / 5; max-height: 640px; }
  .director-text { padding-right: 64px; max-width: 600px; }
  .director-say { font-size: clamp(34px, 3.2vw, 46px); }
  .director-say2 { font-size: 18px; }
}

/* 院のこと：院長の写真（不ぞろいな丸み・キャプションは「院長」だけ） */
.about-director { margin: 34px 0 0; width: 220px; }
.about-director-pic { width: 220px; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 56% 44% 52% 48% / 46% 52% 48% 54%; }
.about-director-pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.about-director figcaption { margin-top: 10px; font-family: var(--f-mincho); font-weight: 700; font-size: 16px; letter-spacing: .3em; color: var(--deep); }
.page-head--right .about-director { margin-left: auto; }
@media (min-width: 960px) { .about-director, .about-director-pic { width: 260px; } }

/* アクセス・予約のつぼみ（縦に長い）：段の上の波をまたがないよう、細くして、見出しの上・波の下に収める */
.final .sprout--tall { width: 30px; bottom: calc(100% + 8px); }
@media (min-width: 960px) { .final .sprout--tall { width: 38px; } }