/* A案「うつろい」— さいとうレディスクリニック TOP のデザイン案（2026-10-30）
   参考＝toono.or.jp（借りる物＝並びと構成・書体・動き・写真の使い方）。
   ・並び＝左に細い帯／真ん中に止まったままの大きな絵／右で読む（参考と同じ 3 つの縦の列）。スマホは上に絵・下に読む。
   ・書体＝明朝（Zen Old Mincho）＋細い欧文のセリフ（Cormorant Garamond）＝参考の游明朝と細い欧文。
   ・動き＝右の区画が変わるたびに、左の絵の丸い色の形が形と色を変えて動き、線画が描き変わる（参考は区画ごとに絵が替わる）。
   ・写真の使い方＝写真が無いので、参考の「大きな 1 枚の絵」を、丸い色の形（紙のざらつき）＋線画の女性・月・花で作った。参考よりも角を無くして丸く。
   色＝ロゴの桃色を少し落ち着かせた薔薇色・くすんだ桃・灰緑・薄紫・砂色に、文字と帯は深い葡萄色。 */
@import url("cal-skin.css");

:root {
  --paper: #f7f2ef; --stage: #ede4e0; --white: #fff;
  --ink: #4b3441; --muted: #86717c; --line: rgba(75, 52, 65, .14);
  --plum: #6e4258; --plum-deep: #55303f;
  --rose: #d98fa3; --blush: #f1cfd6; --sage: #b3c3ac; --lilac: #cdc1dc; --sand: #e8d5c1; --coral: #ec8c95; --deep: #9c4f6c;
  --min: 'Zen Old Mincho', 'Yu Mincho', 'Hiragino Mincho ProN', serif;
  --en: 'Cormorant Garamond', 'Times New Roman', serif;
  --ease: cubic-bezier(.65, 0, .25, 1);
  --rail: 76px;
  --u: 1vh; /* 絵の中の大きさの単位（スマホは下で幅に合わせる） */
  --fx-backtop-ink: var(--plum); --fx-backtop-font: var(--en); --fx-backtop-rail: 64px;
  --anim-draw-color: var(--ink); --anim-draw-soft: #b48a9c; --anim-draw-width: 1.4; --anim-draw-width-bold: 2; --anim-draw-width-thin: .9;
  --anim-draw-dur: 2.6s; --anim-draw-ease: linear;
}
* { box-sizing: border-box; }
html { scroll-behavior: auto; }
body { margin: 0; font-variant-numeric: lining-nums; background: var(--paper); color: var(--ink); font-family: var(--min); font-weight: 500; font-size: 15px; line-height: 2.1; letter-spacing: .08em; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p, h2, h3, ul, dl, dd, figure { margin: 0; padding: 0; }
ul { list-style: none; }
.anim-draw svg path.fill { stroke: none !important; }

/* ── 3 つの縦の列 ─────────────────────────────── */
.layout { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr) minmax(520px, 38%); align-items: start; }
.sp-header { display: none; }

/* 左の細い帯（参考の紺の帯＝ここでは葡萄色） */
.rail { position: sticky; top: 0; height: 100vh; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 26px 0 22px; background: var(--plum); color: #fff; }
.rail-menu { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.rail-menu span { display: block; width: 26px; height: 1px; background: currentColor; transition: width .4s var(--ease); }
.rail-menu span:nth-child(2) { width: 18px; }
.rail-menu:hover span:nth-child(2) { width: 26px; }
.rail-menu em { margin-top: 6px; font: 400 11px/1 var(--en); font-style: normal; letter-spacing: .24em; }
.rail-tel { writing-mode: vertical-rl; display: flex; align-items: center; gap: 14px; font-size: 13px; letter-spacing: .3em; line-height: 1; transition: opacity .3s; }
.rail-tel:hover { opacity: .75; }
.rail-tel-num { font: 400 17px/1 var(--en); letter-spacing: .14em; }
.rail-hours { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .2em; line-height: 1; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .3); width: 52px; }
.rail-hours svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.2; }

/* ── 真ん中の大きな絵 ─────────────────────────── */
.stage { position: sticky; top: 0; height: 100vh; min-height: 600px; overflow: hidden; background: var(--stage); container-type: size; }
.stage-in { position: absolute; inset: 0; }
/* 紙のざらつき（shape-vocab の粒と同じ作り＝feTurbulence） */
.stage-in::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .32; mix-blend-mode: multiply;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E"); }
.blobs { position: absolute; inset: 0; }
.bl { position: absolute; display: block;
  box-shadow: inset 0 0 0 1.2px rgba(75, 52, 65, .14);
  transition: left 1.6s var(--ease), top 1.6s var(--ease), width 1.6s var(--ease), height 1.6s var(--ease), border-radius 1.6s var(--ease), background-color 1.6s var(--ease), transform 1.6s var(--ease);
  animation: blIn 1.4s var(--ease) both, blFloat 9s ease-in-out 1.4s infinite; }
.b1 { animation-delay: .05s, 1.4s; } .b2 { animation-delay: .15s, 2.2s; animation-duration: 1.4s, 11s; } .b3 { animation-delay: .25s, 1.8s; animation-duration: 1.4s, 8s; }
.b4 { animation-delay: .32s, 2.6s; animation-duration: 1.4s, 10s; } .b5 { animation-delay: .4s, 1.6s; animation-duration: 1.4s, 12s; } .b6 { animation-delay: .5s, 2s; animation-duration: 1.4s, 7s; } .b7 { animation-delay: .58s, 3s; animation-duration: 1.4s, 9.5s; }
@keyframes blIn { from { scale: .2; opacity: 0; } to { scale: 1; opacity: 1; } }
@keyframes blFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 calc(var(--u) * -1.4); } }
/* 場面ごとの形（left・top＝絵の中の位置／width・height＝--u）。1 女性 → 2 月 → 3 花瓶 → 4 葉の輪 → 5 女性（夕方の色） */
.b1 { left: 22%; top: 15%; width: calc(var(--u) * 58); height: calc(var(--u) * 62); border-radius: 58% 42% 47% 53% / 52% 46% 54% 48%; background: var(--blush); }
.b2 { left: 60%; top: 52%; width: calc(var(--u) * 30); height: calc(var(--u) * 34); border-radius: 50% 50% 46% 54% / 60% 44% 56% 40%; background: var(--sage); }
.b3 { left: 4%; top: 58%; width: calc(var(--u) * 28); height: calc(var(--u) * 25); border-radius: 46% 54% 60% 40% / 50% 48% 52% 50%; background: var(--lilac); }
.b4 { left: 66%; top: 9%; width: calc(var(--u) * 22); height: calc(var(--u) * 20); border-radius: 52% 48% 40% 60% / 56% 52% 48% 44%; background: var(--sand); }
.b5 { left: 34%; top: 74%; width: calc(var(--u) * 20); height: calc(var(--u) * 17); border-radius: 60% 40% 52% 48% / 46% 56% 44% 54%; background: var(--rose); }
.b6 { left: 76%; top: 36%; width: calc(var(--u) * 7); height: calc(var(--u) * 7); border-radius: 50%; background: var(--coral); }
.b7 { left: 10%; top: 36%; width: calc(var(--u) * 9); height: calc(var(--u) * 12); border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; background: var(--deep); transform: rotate(-18deg); }

[data-scene="2"] .blobs .b1 { left: 30%; top: 12%; width: calc(var(--u) * 52); height: calc(var(--u) * 52); border-radius: 50%; background: var(--lilac); }
[data-scene="2"] .blobs .b2 { left: 8%; top: 62%; width: calc(var(--u) * 40); height: calc(var(--u) * 22); border-radius: 60% 40% 46% 54% / 64% 58% 42% 36%; background: var(--sage); }
[data-scene="2"] .blobs .b3 { left: 66%; top: 58%; width: calc(var(--u) * 26); height: calc(var(--u) * 30); border-radius: 50% 50% 44% 56% / 44% 52% 48% 56%; background: var(--blush); }
[data-scene="2"] .blobs .b4 { left: 12%; top: 10%; width: calc(var(--u) * 16); height: calc(var(--u) * 16); border-radius: 50%; background: var(--sand); }
[data-scene="2"] .blobs .b5 { left: 54%; top: 78%; width: calc(var(--u) * 16); height: calc(var(--u) * 13); background: var(--deep); }
[data-scene="2"] .blobs .b6 { left: 72%; top: 18%; width: calc(var(--u) * 5); height: calc(var(--u) * 5); background: var(--coral); }
[data-scene="2"] .blobs .b7 { left: 22%; top: 44%; width: calc(var(--u) * 7); height: calc(var(--u) * 7); border-radius: 50%; background: var(--rose); transform: rotate(0); }

[data-scene="3"] .blobs .b1 { left: 26%; top: 30%; width: calc(var(--u) * 50); height: calc(var(--u) * 56); border-radius: 50% 50% 44% 56% / 40% 42% 58% 60%; background: var(--sage); }
[data-scene="3"] .blobs .b2 { left: 58%; top: 12%; width: calc(var(--u) * 26); height: calc(var(--u) * 26); border-radius: 50%; background: var(--blush); }
[data-scene="3"] .blobs .b3 { left: 6%; top: 18%; width: calc(var(--u) * 24); height: calc(var(--u) * 30); background: var(--sand); }
[data-scene="3"] .blobs .b4 { left: 70%; top: 62%; width: calc(var(--u) * 24); height: calc(var(--u) * 20); background: var(--lilac); }
[data-scene="3"] .blobs .b5 { left: 16%; top: 72%; width: calc(var(--u) * 22); height: calc(var(--u) * 16); background: var(--rose); }
[data-scene="3"] .blobs .b6 { left: 50%; top: 9%; width: calc(var(--u) * 6); height: calc(var(--u) * 6); background: var(--coral); }
[data-scene="3"] .blobs .b7 { left: 80%; top: 44%; width: calc(var(--u) * 8); height: calc(var(--u) * 11); background: var(--deep); transform: rotate(24deg); }

[data-scene="4"] .blobs .b1 { left: 27%; top: 18%; width: calc(var(--u) * 56); height: calc(var(--u) * 56); border-radius: 50%; background: var(--blush); }
[data-scene="4"] .blobs .b2 { left: 64%; top: 64%; width: calc(var(--u) * 24); height: calc(var(--u) * 24); border-radius: 50%; background: var(--sage); }
[data-scene="4"] .blobs .b3 { left: 6%; top: 44%; width: calc(var(--u) * 22); height: calc(var(--u) * 30); background: var(--lilac); }
[data-scene="4"] .blobs .b4 { left: 62%; top: 8%; width: calc(var(--u) * 20); height: calc(var(--u) * 18); background: var(--sand); }
[data-scene="4"] .blobs .b5 { left: 40%; top: 80%; width: calc(var(--u) * 14); height: calc(var(--u) * 12); background: var(--rose); }
[data-scene="4"] .blobs .b6 { left: 20%; top: 20%; width: calc(var(--u) * 8); height: calc(var(--u) * 8); background: var(--coral); }
[data-scene="4"] .blobs .b7 { left: 82%; top: 38%; width: calc(var(--u) * 6); height: calc(var(--u) * 6); border-radius: 50%; background: var(--deep); transform: rotate(0); }

[data-scene="5"] .blobs .b1 { left: 18%; top: 22%; width: calc(var(--u) * 60); height: calc(var(--u) * 58); border-radius: 44% 56% 52% 48% / 48% 54% 46% 52%; background: var(--sand); }
[data-scene="5"] .blobs .b2 { left: 62%; top: 16%; width: calc(var(--u) * 28); height: calc(var(--u) * 30); background: var(--blush); }
[data-scene="5"] .blobs .b3 { left: 8%; top: 8%; width: calc(var(--u) * 20); height: calc(var(--u) * 18); background: var(--sage); }
[data-scene="5"] .blobs .b4 { left: 64%; top: 64%; width: calc(var(--u) * 28); height: calc(var(--u) * 24); background: var(--rose); }
[data-scene="5"] .blobs .b5 { left: 10%; top: 70%; width: calc(var(--u) * 24); height: calc(var(--u) * 18); background: var(--lilac); }
[data-scene="5"] .blobs .b6 { left: 86%; top: 84%; width: calc(var(--u) * 6); height: calc(var(--u) * 6); background: var(--deep); }
[data-scene="5"] .blobs .b7 { left: 80%; top: 50%; width: calc(var(--u) * 9); height: calc(var(--u) * 9); border-radius: 50%; background: var(--coral); transform: rotate(0); }

/* 線画（場面ごとに重ねて置き、今の場面だけ見せる） */
.scenes { position: absolute; left: 50%; top: 55%; height: 80%; aspect-ratio: 5 / 6; transform: translate(-50%, -50%); }
.scene { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; }
.scene.is-on, .stage:not(.is-js) .scene[data-for="1"] { opacity: 1; }
.scene img, .scene svg { width: 100%; height: 100%; display: block; overflow: visible; }
.scene svg path { transition: none; }
.scene svg path.fill { transition: opacity .8s ease; }
/* 大きな欧文（参考の「TOONO OBSTETRICS…」と同じ置き方＝上の端と右の端） */
.stage-en { position: absolute; left: 0; right: 0; top: -.14em; text-align: center; white-space: nowrap; font: 300 9.4cqw/1 var(--en); letter-spacing: .02em; color: rgba(255, 255, 255, .94); animation: enIn 2s var(--ease) .2s both; }
.stage-en-v { position: absolute; right: -.1em; top: 15%; writing-mode: vertical-rl; white-space: nowrap; font: 300 min(calc(82cqh / 17), 5.4cqw)/1 var(--en); letter-spacing: .06em; color: rgba(255, 255, 255, .94); animation: enIn 2s var(--ease) .5s both; }
@keyframes enIn { from { opacity: 0; filter: blur(8px); letter-spacing: .14em; } to { opacity: 1; filter: blur(0); } }
.stage-scroll { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; font: italic 300 15px/1 var(--en); letter-spacing: .14em; color: var(--ink); }
.stage-scroll::after { content: ''; display: block; width: 1px; height: 56px; margin-top: 12px; background: linear-gradient(var(--ink) 50%, rgba(75, 52, 65, .2) 50%) 0 0 / 1px 200%; animation: scrollLine 2.4s var(--ease) infinite; }
@keyframes scrollLine { from { background-position: 0 100%; } to { background-position: 0 -100%; } }
/* 絵の上の札（ロゴ・キャッチ） */
.stage-tags { position: absolute; left: 28px; top: 28px; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.stage-logo { display: block; padding: 14px 18px 12px; background: rgba(255, 255, 255, .9); border-radius: 16px; box-shadow: 0 6px 24px rgba(75, 52, 65, .08); }
.stage-logo img { width: 250px; }
.stage-logo span { display: block; margin-top: 8px; font-size: 11.5px; line-height: 1.4; letter-spacing: .14em; color: var(--muted); }
.stage-catch { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; font-size: 16px; line-height: 1; letter-spacing: .36em; }
.stage-catch .sc-l { display: inline-block; padding: 12px 6px 12px 16px; background: rgba(255, 255, 255, .92); border-radius: 10px; }
.stage-catch .dm { margin: 0 0 2px; }

/* ── 右で読む ─────────────────────────────────── */
.flow { position: relative; overflow: hidden; background: var(--paper); }
.sec { position: relative; min-height: 92vh; display: flex; flex-direction: column; justify-content: center; padding: 120px 52px 120px 48px; }
.sec + .sec { border-top: 1px solid var(--line); }
.sec > * { position: relative; max-width: 420px; }
/* ★本日の診療の幅はプラグインの「大きさ」で決まる（medium＝400px・中に 20px の余白をインラインの !important で書く）＝器は 400px が入る幅にする */
.sec-mark { position: absolute !important; right: -.12em; top: 50%; transform: translateY(-50%); max-width: none !important; writing-mode: vertical-rl; white-space: nowrap; font: 300 128px/1 var(--en); letter-spacing: .04em; color: transparent; -webkit-text-stroke: 1px rgba(110, 66, 88, .2); pointer-events: none; user-select: none; }
.sec-art { display: none; }
.sec-title { margin-bottom: 30px; font-size: 23px; font-weight: 500; line-height: 1.6; letter-spacing: .18em; }
.sec-title .en { display: block; margin-bottom: 6px; font: italic 400 19px/1 var(--en); letter-spacing: .08em; color: var(--deep); }
.sec-lead { margin: -14px 0 24px; font-size: 14px; color: var(--muted); }
.sub-title { margin: 48px 0 16px; font-size: 18px; font-weight: 500; letter-spacing: .18em; display: flex; align-items: center; gap: 14px; }
.sub-title::before { content: ''; width: 22px; height: 22px; border-radius: 50% 50% 46% 54% / 56% 48% 52% 44%; background: var(--blush); box-shadow: inset 0 0 0 1px rgba(75, 52, 65, .14); }
.more { display: inline-flex; align-items: center; gap: 14px; margin-top: 30px; font-size: 13px; letter-spacing: .2em; }
.more i { position: relative; display: block; width: 34px; height: 1px; background: currentColor; transition: width .45s var(--ease); }
.more i::after { content: ''; position: absolute; right: 0; top: -3px; width: 7px; height: 1px; background: currentColor; transform: rotate(35deg); transform-origin: right; }
.more:hover i { width: 50px; }

/* 1 ごあいさつ */
.about-text p { margin-bottom: 1.6em; font-size: 16px; line-height: 2.35; letter-spacing: .16em; }
.about-text strong { font-weight: 600; background: linear-gradient(transparent 68%, rgba(217, 143, 163, .38) 68%); }
.btn-tel { display: inline-flex; flex-direction: column; align-items: center; align-self: flex-start; gap: 6px; margin-top: 8px; padding: 16px 40px 14px; border: 1px solid var(--plum); border-radius: 999px; transition: background-color .4s, color .4s; }
.btn-tel .bt-label { font-size: 12px; line-height: 1; letter-spacing: .24em; }
.btn-tel .bt-num { font: 400 28px/1 var(--en); letter-spacing: .1em; }
.btn-tel:hover { background: var(--plum); color: #fff; }

/* 2 お知らせ */
.news-list li { border-top: 1px solid var(--line); }
.news-list li:last-child { border-bottom: 1px solid var(--line); }
.news-list a { position: relative; display: block; padding: 18px 44px 18px 0; transition: color .3s; }
.news-list a::after { content: ''; position: absolute; right: 4px; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; border: 1px solid var(--line);
  background: no-repeat center / 10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='%234b3441' stroke-width='1'%3E%3Cpath d='M3.5 1.5L7 5l-3.5 3.5'/%3E%3C/svg%3E"); transition: transform .4s var(--ease), background-color .4s; }
.news-list a:hover { color: var(--deep); }
.news-list a:hover::after { transform: translateX(4px); background-color: var(--blush); }
.nl-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.nl-meta .tag { padding: 3px 9px 2px; border: 1px solid var(--rose); border-radius: 999px; font-size: 10.5px; line-height: 1.3; letter-spacing: .14em; color: var(--deep); }
.nl-meta time { font: 400 15px/1 var(--en); letter-spacing: .08em; color: var(--muted); }
.nl-title { display: block; font-size: 15px; line-height: 1.8; }

/* 3 診療時間・本日の診療・カレンダー */
.today-card { width: fit-content; max-width: 100%; margin-bottom: 26px; padding: 10px; background: var(--white); border-radius: 22px; box-shadow: 0 10px 30px rgba(75, 52, 65, .06); }
body.plan-utsuroi .asbcala-today-schedule-wrapper { display: block !important; }
body.plan-utsuroi .asbcala-today-schedule-wrapper .asbcala-today-schedule-widget { width: 100% !important; max-width: none !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; font-family: var(--min) !important; color: var(--ink) !important; }
body.plan-utsuroi .asbcala-today-schedule-wrapper .asbcala-today-schedule-widget .asbcala-today-title { margin: 0 0 6px !important; font: 600 13px/1 var(--min) !important; letter-spacing: .3em !important; text-align: left !important; color: var(--deep) !important; }
body.plan-utsuroi .asbcala-today-schedule-wrapper .asbcala-today-schedule-widget .asbcala-today-date { display: flex !important; justify-content: flex-start !important; align-items: center; gap: 2px; margin: 0 0 12px !important; padding: 0 0 12px !important; border-bottom: 1px solid var(--line) !important; font: 500 16px/1.4 var(--min) !important; text-align: left !important; }
body.plan-utsuroi .asbcala-today-schedule-wrapper .asbcala-today-schedule-widget .asbcala-today-calendar-icon { color: var(--deep); margin-left: auto !important; }
body.plan-utsuroi .asbcala-today-schedule-wrapper .asbcala-today-schedule-widget .asbcala-today-hours { margin: 0 0 12px !important; }
body.plan-utsuroi .asbcala-today-schedule-wrapper .asbcala-today-schedule-widget .asbcala-today-hours-label,
body.plan-utsuroi .asbcala-today-schedule-wrapper .asbcala-today-schedule-widget .asbcala-today-events-label { font: 400 11px/1 var(--min) !important; letter-spacing: .2em !important; opacity: 1 !important; color: var(--muted); text-transform: none !important; margin-bottom: 8px !important; }
body.plan-utsuroi .asbcala-today-schedule-wrapper .asbcala-today-schedule-widget .asbcala-today-hours-value { padding: 0 !important; background: none !important; text-align: left !important; font: 400 19px/1.75 var(--en) !important; letter-spacing: .06em; white-space: nowrap; max-height: none !important; overflow: visible !important; color: var(--ink) !important; }
body.plan-utsuroi .asbcala-today-schedule-widget[data-kind="closed"] .asbcala-today-hours-value { font: 500 17px/1.75 var(--min) !important; color: var(--deep) !important; letter-spacing: .2em !important; }
body.plan-utsuroi .asbcala-today-schedule-wrapper .asbcala-today-hours-value .sl-ampm { display: inline-block; margin-right: 12px; font: 500 12px/1 var(--min); color: var(--deep); letter-spacing: .14em; vertical-align: 2px; }
body.plan-utsuroi .asbcala-today-schedule-wrapper .asbcala-today-schedule-widget .asbcala-today-events { margin: 0 0 12px !important; }
body.plan-utsuroi .asbcala-today-schedule-wrapper .asbcala-today-schedule-widget .asbcala-today-event-item { border-radius: 10px !important; padding: 8px 12px !important; font-size: 13px !important; background: #f4ecf7 !important; color: var(--ink) !important; }
body.plan-utsuroi .asbcala-today-schedule-wrapper .asbcala-today-schedule-widget .asbcala-today-event-category-line { color: var(--muted) !important; font-size: 11px !important; }
body.plan-utsuroi .asbcala-today-schedule-wrapper .asbcala-today-schedule-widget .asbcala-today-cta { margin: 0 !important; padding: 0 !important; border: 0 !important; }
body.plan-utsuroi .asbcala-today-schedule-wrapper .asbcala-today-schedule-widget .asbcala-today-cta-button { display: flex !important; justify-content: center; padding: 10px 12px !important; border-radius: 999px !important; background: var(--white) !important; color: var(--plum) !important; border: 1px solid rgba(110, 66, 88, .4) !important; font: 500 12.5px/1 var(--min) !important; letter-spacing: .16em !important; text-decoration: none !important; transition: background-color .3s, color .3s; }
body.plan-utsuroi .asbcala-today-schedule-wrapper .asbcala-today-schedule-widget .asbcala-today-cta-button:hover { background: var(--plum) !important; color: #fff !important; }

.hours-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.4; text-align: center; }
.hours-table th, .hours-table td { padding: 13px 2px; border-bottom: 1px solid var(--line); font-weight: 500; }
.hours-table thead th { padding: 8px 2px 10px; border-bottom: 1px solid var(--plum); font-size: 13px; letter-spacing: .1em; }
.hours-table thead th:first-child, .hours-table tbody th { text-align: left; white-space: nowrap; font: 400 16px/1.2 var(--en); letter-spacing: .04em; padding-right: 8px; }
.hours-table thead th:first-child { font: 500 12px/1 var(--min); letter-spacing: .14em; }
.hours-table .is-sun { color: #c2577a; }
.hours-table .o { color: var(--deep); font-size: 15px; }
.hours-table sup { font-size: 10px; color: var(--deep); }
.hours-table .is-off { color: #b8a6ae; font-size: 12px; }
.hours-note { margin-top: 12px; font-size: 13px; color: var(--muted); }
.cal-box { padding: 4px 0 0; }
.plan-utsuroi .asbcala-shortcode-wrapper {
  --cal-font: var(--min); --cal-num: var(--en); --cal-ink: var(--ink); --cal-muted: var(--muted);
  --cal-line: rgba(75, 52, 65, .1); --cal-rule: var(--plum); --cal-sun: #c2577a; --cal-sat: #6c7ea3;
  --cal-today-bg: var(--plum); --cal-today-ink: #fff; --cal-info: #b9798f;
  --cal-nav-line: rgba(75, 52, 65, .3); --cal-nav-hover-bg: var(--plum); --cal-nav-hover-ink: #fff; --cal-num-weight: 400; --cal-num-size: 16px;
}
/* 列が細いので、凡例は見出しの下に */
.plan-utsuroi .asbcala-shortcode-wrapper[data-cal-title] .asbcala-calendar { grid-template-columns: minmax(0, 1fr); }
.plan-utsuroi .asbcala-shortcode-wrapper[data-cal-title] .asbcala-calendar .calendar-header { grid-column: 1; margin-bottom: 14px; }
.plan-utsuroi .asbcala-shortcode-wrapper[data-cal-title] .asbcala-legend { grid-column: 1; grid-row: 2; justify-content: flex-start; margin: 0 0 14px; font-size: 11.5px; }
.plan-utsuroi .asbcala-shortcode-wrapper[data-cal-title] .asbcala-calendar .asbcala-grid-container { grid-row: 3; }
.plan-utsuroi .asbcala-shortcode-wrapper[data-cal-title] .asbcala-calendar .calendar-header h2 { display: flex; align-items: baseline; gap: 2px; font: 500 15px/1 var(--min); letter-spacing: .1em; }
.plan-utsuroi .asbcala-calendar .calendar-header h2 small { margin-right: 12px; font: 400 15px/1 var(--en); letter-spacing: .1em; color: var(--muted); }
.plan-utsuroi .asbcala-calendar .calendar-header h2 .cal-m { font: 500 36px/.8 var(--min); letter-spacing: .02em; } /* Cormorant の 1 は I に見える */
.plan-utsuroi .asbcala-tip { border-radius: 12px; font-family: var(--min); font-size: 13px; letter-spacing: .04em; }
.plan-utsuroi .asbcala-tip .tooltip-event-title { color: var(--deep); font-weight: 600; }

/* 4 診療科目 */
.med-list li { border-top: 1px solid var(--line); }
.med-list li:last-child { border-bottom: 1px solid var(--line); }
.med-list a { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 4px 20px; padding: 24px 0; }
.ml-icon { grid-row: span 2; position: relative; width: 60px; height: 60px; margin-top: 4px; border-radius: 54% 46% 50% 50% / 50% 56% 44% 50%; background: var(--blush); box-shadow: inset 0 0 0 1.2px rgba(75, 52, 65, .14); transition: border-radius .8s var(--ease), transform .8s var(--ease); }
.ml-icon::before { content: ''; position: absolute; width: 26px; height: 26px; right: -6px; bottom: -4px; border-radius: 50%; background: var(--sage); mix-blend-mode: multiply; }
.ml-icon.i-2 { background: var(--lilac); }
.ml-icon.i-2::before { background: var(--sand); left: -6px; top: -4px; right: auto; bottom: auto; width: 22px; height: 22px; }
.med-list a:hover .ml-icon { border-radius: 42% 58% 46% 54% / 58% 44% 56% 42%; transform: rotate(-8deg); }
.ml-name { display: block; margin-bottom: 4px; font-size: 20px; font-weight: 600; letter-spacing: .24em; line-height: 1.5; }
.ml-text { display: block; font-size: 13.5px; line-height: 1.9; color: var(--muted); word-break: break-all; }
.ml-more { grid-column: 2; display: inline-flex; align-items: center; gap: 12px; margin-top: 6px; font-size: 12px; letter-spacing: .2em; }
.ml-more i { position: relative; display: block; width: 28px; height: 1px; background: currentColor; transition: width .45s var(--ease); }
.med-list a:hover .ml-more i { width: 44px; }
.link-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 30px; }
.link-cards a { position: relative; display: block; height: 100%; padding: 22px 20px 44px; background: var(--white); border-radius: 20px; box-shadow: 0 8px 24px rgba(75, 52, 65, .05); transition: transform .5s var(--ease), box-shadow .5s; }
.link-cards a:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(75, 52, 65, .1); }
.lc-name { display: block; font-size: 16px; font-weight: 600; letter-spacing: .16em; line-height: 1.6; }
.lc-text { display: block; margin-top: 4px; font-size: 12px; line-height: 1.7; color: var(--muted); }
.link-cards i { position: absolute; right: 16px; bottom: 14px; width: 24px; height: 24px; border-radius: 50%; background: var(--blush); }
.link-cards i::after { content: ''; position: absolute; left: 9px; top: 8.5px; width: 5px; height: 5px; border-top: 1px solid var(--ink); border-right: 1px solid var(--ink); transform: rotate(45deg); }

/* 5 アクセス */
.map-frame { position: relative; aspect-ratio: 4 / 3; margin-bottom: 26px; border-radius: 22px; overflow: hidden; background: #e8e2de; box-shadow: inset 0 0 0 1px var(--line); }
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; filter: saturate(.7) sepia(.08); }
.info div { display: grid; grid-template-columns: 84px minmax(0, 1fr); padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; line-height: 1.8; }
.info dt { font-size: 12.5px; letter-spacing: .14em; color: var(--muted); padding-top: 2px; }
.map-link { display: inline-block; margin-left: 10px; font-size: 12px; color: var(--deep); border-bottom: 1px solid currentColor; line-height: 1.4; }
.parking { margin-top: 28px; padding: 26px 26px 24px; background: var(--white); border-radius: 22px; font-size: 14px; line-height: 2; }
.parking-title { margin-bottom: 10px; font-size: 16px; font-weight: 600; letter-spacing: .16em; }
.parking ul { margin-bottom: 4px; }
.parking li { position: relative; padding-left: 18px; }
.parking li::before { content: ''; position: absolute; left: 2px; top: .8em; width: 7px; height: 7px; border-radius: 50%; background: var(--rose); }
.parking p + p { margin-top: 8px; }
.parking strong { font-weight: 600; background: linear-gradient(transparent 68%, rgba(217, 143, 163, .38) 68%); }
.parking-note { font-size: 12.5px; color: var(--muted); }
.parking .more { margin-top: 16px; }

/* 6 ページのご案内 */
.sec-guide { min-height: 0; padding-top: 72px; padding-bottom: 80px; }
.guide-box { padding: 30px 28px; background: var(--white); border-radius: 26px; }
.guide-title { margin-bottom: 16px; font-size: 16px; font-weight: 600; letter-spacing: .2em; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pills a { display: inline-block; padding: 7px 16px 6px; border: 1px solid var(--line); border-radius: 999px; font-size: 12.5px; line-height: 1.5; letter-spacing: .1em; transition: background-color .3s, border-color .3s; }
.pills a::after { content: ' ›'; color: var(--deep); }
.pills a:hover { background: var(--blush); border-color: var(--blush); }

/* フッター（右の列の下） */
.site-footer { padding: 64px 56px 36px; background: var(--plum); color: #fff; }
.ft-brand { display: inline-block; padding: 12px 16px 10px; background: #fff; border-radius: 14px; }
.ft-brand img { width: 230px; }
.ft-tag { margin-top: 16px; font-size: 13px; letter-spacing: .16em; }
.ft-addr { margin-top: 8px; font-size: 13px; line-height: 1.9; opacity: .9; }
.ft-nav { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 26px; font-size: 13px; letter-spacing: .12em; }
.ft-copy { margin-top: 36px; font: 400 12px/1.6 var(--en); letter-spacing: .1em; opacity: .7; }

/* 撮影（?shot=1）＝最初の場面を描き終えた形で止める */
html.is-shot .bl { animation: none; }
html.is-shot .stage-en, html.is-shot .stage-en-v { animation: none; }
html.is-shot { --anim-draw-dur: .05s; --anim-draw-fill-dur: .05s; }
/* 撮影の 1 枚の絵（パソコン）＝止まった絵の代わりに、区画ごとの場面を左の列に縦に並べる（utsuroi.js の stack） */
.stage.is-stack { position: relative; height: auto; align-self: stretch; }
.stage.is-stack > .stage-in { display: none; }
.stage-frame { position: absolute; left: 0; right: 0; overflow: hidden; }
.stage-frame .scene { opacity: 0; }
.stage-frame .scene.is-on { opacity: 1; }
.stage-frame + .stage-frame .stage-en, .stage-frame + .stage-frame .stage-en-v, .stage-frame + .stage-frame .stage-scroll { display: none; }
.stage-frame .scenes { height: min(80%, 80vh); top: min(55%, 50vh); }
.layout.is-stack .rail { position: relative; height: auto; align-self: stretch; justify-content: flex-start; gap: 34vh; }
.stage-frame .stage-scroll { display: none; }
.stage-frame .scenes { height: min(80%, 80vh); top: min(55%, 50vh); }
.layout.is-stack .rail { position: relative; height: auto; align-self: stretch; justify-content: flex-start; gap: 34vh; }

/* ── タブレット・スマホ＝上に絵・下に読む ───────────── */
@media (max-width: 1199px) {
  :root { --u: min(.82vh, 1.55vw); }
  .layout { display: block; }
  .rail { display: none; }
  .sp-header { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 10px; height: 64px; padding: 0 14px 0 18px; background: rgba(247, 242, 239, .94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
  .sp-brand { margin-right: auto; }
  .sp-brand img { width: 200px; }
  .sp-tel { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); }
  .sp-tel svg { width: 17px; height: 17px; fill: var(--plum); }
  .sp-menu { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 7px; width: 44px; height: 44px; border-radius: 50%; background: var(--plum); }
  .sp-menu span { display: block; width: 18px; height: 1px; background: #fff; }
  .stage { position: relative; height: calc(100svh - 64px); min-height: 540px; max-height: 860px; }
  .scenes { top: 57%; height: auto; width: min(94cqw, 62cqh); }
  .stage-logo { display: none; }
  .stage-tags { left: 18px; top: 50px; }
  .stage-catch { position: relative; flex-direction: column; align-items: flex-start; gap: 6px; writing-mode: vertical-rl; font-size: 15px; }
  .stage-catch .sc-l { padding: 16px 10px 10px; }
  .stage-catch .dm { position: absolute; right: 0; top: -28px; writing-mode: horizontal-tb; margin: 0; }
  .stage-en { left: auto; right: -.08em; top: 10px; writing-mode: vertical-rl; font-size: min(calc(96cqh / 10.6), 13cqw); text-align: left; }
  .stage-en-v { display: none; }
  .sec { min-height: 0; padding: 72px 28px 76px; }
  .sec > * { max-width: 620px; margin-left: auto; margin-right: auto; width: 100%; }
  .sec-art { display: block; width: 150px; margin-bottom: 18px !important; }
  .sec-mark { font-size: 76px; top: 44px; transform: none; }
  .btn-tel { align-self: center; }
  .site-footer { padding: 56px 28px 96px; }
}
@media (max-width: 600px) {
  .sp-brand img { width: 176px; }
  .sec { padding: 60px 22px 64px; }
  .about-text p { font-size: 15px; letter-spacing: .12em; }
  .sec-title { font-size: 19px; letter-spacing: .1em; }
  :root { --fx-backtop-right: 3px; --fx-backtop-rail: 40px; }
  .link-cards { grid-template-columns: 1fr; }
  .hours-table { font-size: 13px; }
  .hours-table thead th:first-child, .hours-table tbody th { font-size: 14px; }
  .today-card { padding: 6px; }
  .parking { padding: 22px 20px 20px; }
  .guide-box { padding: 26px 20px; }
}