/* B案「ほのか」— さいとうレディスクリニック TOP のデザイン案（2026-10-30）
   参考＝okamoto-dental.clinic（借りる物＝並びと構成・書体・動き・写真の使い方）。
   ・並び＝左に電話・真ん中にロゴ・右にメニューのヘッダー／画面いっぱいの角の丸い淡い色の枠に絵と縦書きの白い札／枠で囲んだご案内／淡い桃色の面のお知らせ／
     2 枚の絵に縦の札の診療科目／横長の札／フッターにロゴ・電話・診療時間・地図。右の端に予約の札（スマホは下の帯）。
   ・書体＝字間を空けたゴシック（参考は Gothic BBB）を、もっと丸く＝Zen Maru Gothic。欧文は細い丸みの Quicksand（参考は Abel）。
   ・動き＝白い札が上から開く・見出しに蛍光ペンの線が引かれる・絵が線で描き上がる・きらめき。
   ・写真の使い方＝写真が無いので、参考の真ん中の絵（白い形＋桃色）と同じく、白い丸の上に線で描いた女性。参考よりも丸く柔らかく。
   色＝ロゴの桃色（#f84878 前後）を淡くした地と蛍光ペン、線は深い薔薇色、字は温かい灰色。 */
@import url("cal-skin.css");

:root {
  --white: #fff; --base: #fffdfc; --blush: #fbe2e7; --pale: #fff4f6; --marker: #fccbd7;
  --rose: #ec6f92; --rose-deep: #c2506f; --line-ink: #a2516f;
  --ink: #4d4246; --muted: #8d7f84; --line: #f1dfe4;
  --goth: 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', sans-serif;
  --en: 'Quicksand', 'Zen Maru Gothic', sans-serif;
  --ease: cubic-bezier(.65, 0, .25, 1);
  --fx-backtop-ink: var(--rose-deep); --fx-backtop-surface: #fff; --fx-backtop-size: 54px; --fx-backtop-right: 22px; --fx-backtop-bottom: 22px;
  --anim-draw-color: var(--line-ink); --anim-draw-soft: #e2a6b8; --anim-draw-width: 1.5; --anim-draw-width-bold: 2.2; --anim-draw-width-thin: .9;
  --anim-draw-dur: 3s; --anim-draw-ease: linear;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--base); color: var(--ink); font-family: var(--goth); font-weight: 500; font-size: 15px; line-height: 2; letter-spacing: .1em; font-variant-numeric: lining-nums; -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; }

/* 蛍光ペンの線（見出しが見えたら左から引かれる＝親の anim-fade-up が is-inview になった時） */
.mk { background: linear-gradient(transparent 58%, var(--marker) 58%, var(--marker) 90%, transparent 90%) no-repeat 0 0 / 0% 100%; transition: background-size 1.1s var(--ease) .35s; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.is-inview .mk, .mk.is-inview, html:not(.anim-on) .mk, html.is-shot .mk { background-size: 100% 100%; }
.mk-title { font-size: 22px; font-weight: 700; line-height: 1.9; letter-spacing: .2em; }
.mk-title.is-center { text-align: center; }
.label { font: 500 13px/1 var(--en); letter-spacing: .14em; color: var(--rose); margin-bottom: 10px; }
.btn { display: inline-flex; align-items: center; gap: 22px; margin-top: 28px; padding: 11px 0 11px 30px; background: var(--blush); font-size: 13px; letter-spacing: .16em; line-height: 1.4; transition: background-color .35s; }
.btn i { position: relative; display: block; width: 64px; height: 1px; margin-right: -30px; background: var(--ink); transition: width .45s var(--ease); }
.btn i::after { content: ''; position: absolute; right: 0; top: -4px; width: 9px; height: 1px; background: var(--ink); transform: rotate(30deg); transform-origin: right; }
.btn:hover { background: var(--marker); }
.btn:hover i { width: 80px; }

/* ── ヘッダー ─────────────────────────────── */
.site-header { position: relative; display: grid; grid-template-columns: 1fr auto 1fr auto; align-items: center; gap: 24px; padding: 26px 60px 22px 80px; }
.sh-tel { justify-self: start; display: flex; flex-direction: column; align-items: flex-end; }
.sh-tel-ruby { font-size: 10px; line-height: 1.2; letter-spacing: .3em; color: var(--muted); }
.sh-tel-num { font: 600 21px/1.2 var(--en); letter-spacing: .06em; }
.sh-brand { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.sh-brand img { width: 300px; }
.sh-brand span { font-size: 12px; line-height: 1; letter-spacing: .3em; color: var(--ink); }
.sh-hours { justify-self: end; font-size: 12.5px; letter-spacing: .12em; transition: color .3s; }
.sh-hours:hover { color: var(--rose-deep); }
.sh-menu { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 50px; }
.sh-menu span { display: block; width: 46px; height: 1.5px; background: var(--ink); border-radius: 2px; transition: transform .4s var(--ease); }
.sh-menu:hover span:nth-child(2) { transform: translateX(6px); }
.sh-menu em { margin-top: 4px; font: 500 10px/1 var(--en); font-style: normal; letter-spacing: .16em; }

/* ── メインビジュアル ─────────────────────────── */
.hero { padding: 0 50px; }
.hero-frame { position: relative; height: calc(100vh - 150px); min-height: 560px; max-height: 900px; border-radius: 22px; background: var(--blush); overflow: hidden; container-type: size; }
.hero-frame::before { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 70% at 50% 46%, rgba(255, 255, 255, .55), transparent 70%); pointer-events: none; }
.hero-circle { position: absolute; left: 50%; top: 47%; width: min(62cqh, 46cqw); aspect-ratio: 1; margin: calc(min(62cqh, 46cqw) / -2) 0 0 calc(min(62cqh, 46cqw) / -2); border-radius: 50%; background: #fff; box-shadow: 0 30px 60px rgba(194, 80, 111, .08); }
/* 白い細い輪（小さな桃色の玉がゆっくり回る）・淡い緑の丸・小枝の線画 */
.hero-ring { --rw: min(84cqh, 62cqw); position: absolute; left: 50%; top: 47%; width: var(--rw); aspect-ratio: 1; margin: calc(var(--rw) * -.52) 0 0 calc(var(--rw) * -.44); border: 1px solid rgba(255, 255, 255, .95); border-radius: 50%; animation: spin 36s linear infinite; }
.hero-ring i { position: absolute; left: 50%; top: -6px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--rose); opacity: .7; }
@keyframes spin { to { rotate: 360deg; } }
.hero-blob { position: absolute; left: calc(50% + min(14cqh, 10cqw)); top: calc(47% + min(10cqh, 7cqw)); width: min(30cqh, 22cqw); aspect-ratio: 1; border-radius: 54% 46% 50% 50% / 50% 56% 44% 50%; background: #e3ecdf; }
.hero-sprig { position: absolute; z-index: 0; left: calc(50% - min(54cqh, 40cqw)); top: calc(47% + min(19cqh, 14cqw)); width: min(36cqh, 26cqw); max-width: 300px; transform: rotate(-12deg); }
.hero-circle { z-index: 1; } .hero-art { z-index: 2; } .tabs { z-index: 3; }
html.is-shot .hero-ring { animation: none; }
.hero-art { position: absolute; left: 50%; top: 47%; height: 84cqh; aspect-ratio: 5 / 6; transform: translate(-46%, -50%); max-height: 600px; }
.hero-art img, .hero-art svg { width: 100%; height: 100%; }
.plan-honoka .hero-art svg path[fill], .plan-honoka .med-pic svg path[fill], .plan-honoka .hours-art svg path[fill] { fill: #fff; }
/* きらめき（4 本の光） */
.spark { position: absolute; width: 30px; height: 30px; background: #fff; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0C10.8 6.4 13.6 9.2 20 10 13.6 10.8 10.8 13.6 10 20 9.2 13.6 6.4 10.8 0 10 6.4 9.2 9.2 6.4 10 0Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0C10.8 6.4 13.6 9.2 20 10 13.6 10.8 10.8 13.6 10 20 9.2 13.6 6.4 10.8 0 10 6.4 9.2 9.2 6.4 10 0Z'/%3E%3C/svg%3E") center / contain no-repeat; animation: twinkle 3.2s ease-in-out infinite; }
.spark.s1 { left: calc(50% + min(24cqh, 18cqw)); top: 14%; width: 36px; height: 36px; }
.spark.s2 { left: calc(50% + min(31cqh, 23cqw)); top: 25%; width: 20px; height: 20px; animation-delay: 1.1s; background: var(--rose); }
.spark.s3 { left: calc(50% - min(30cqh, 22cqw)); top: 22%; width: 26px; height: 26px; animation-delay: 2s; }
@keyframes twinkle { 0%, 100% { opacity: .2; transform: scale(.6) rotate(0); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }
.dot { position: absolute; border-radius: 50%; background: #fff; opacity: .8; animation: floaty 7s ease-in-out infinite; }
.dot.d1 { width: 14px; height: 14px; left: 22%; top: 24%; }
.dot.d2 { width: 9px; height: 9px; left: 72%; top: 72%; animation-delay: 1.5s; background: var(--rose); opacity: .45; }
.dot.d3 { width: 20px; height: 20px; left: 80%; top: 52%; animation-delay: 3s; }
@keyframes floaty { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
/* 縦書きの白い札 */
.tabs { position: absolute; z-index: 2; }
.tabs p, .tabs-sub { display: flex; flex-direction: row-reverse; align-items: flex-start; gap: 12px; }
.tab { writing-mode: vertical-rl; display: inline-block; padding: 14px 7px; background: #fff; border-radius: 4px; letter-spacing: .14em; line-height: 1; }
.tabs-catch { right: 70px; top: 70px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.tabs-catch .tab { font-size: 24px; font-weight: 700; padding: 18px 9px; }
.tabs-sub { left: 60px; bottom: 64px; }
.tabs-sub .tab { font-size: 18px; font-weight: 500; padding: 16px 9px; }
.hero-scroll { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; z-index: 2; }
.hero-scroll span { padding: 5px 9px 4px; background: #fff; border-radius: 4px; font: 500 10px/1 var(--en); letter-spacing: .3em; }
.hero-scroll::after { content: ''; width: 1px; height: 46px; background: var(--ink); transform-origin: top; animation: drip 2.4s var(--ease) infinite; }
@keyframes drip { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ── 区画 ─────────────────────────────────── */
.sec { width: min(1080px, calc(100% - 80px)); margin: 0 auto; padding: 110px 0 0; }
.sec-hello { text-align: center; padding-top: 100px; }
.hello-lead { font-size: 15px; letter-spacing: .14em; }
.notice { max-width: 780px; margin: 22px auto 22px; padding: 30px 32px; border: 2px solid #f6c3d0; border-radius: 14px; background: var(--white); font-size: 16px; font-weight: 700; line-height: 2.1; letter-spacing: .14em; }
.hello-foot { font-size: 14px; color: var(--muted); }

.hours-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.hours-lead { margin: 14px 0 22px; font-size: 14px; color: var(--muted); }
.hours-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.4; text-align: center; }
.hours-table th, .hours-table td { padding: 14px 2px; border-bottom: 1px dashed #ebcfd7; font-weight: 500; }
.hours-table thead th { padding: 10px 2px; border-bottom: 0; background: var(--pale); font-size: 13px; letter-spacing: .1em; }
.hours-table thead th:first-child { border-radius: 999px 0 0 999px; }
.hours-table thead th:last-child { border-radius: 0 999px 999px 0; }
.hours-table thead th:first-child, .hours-table tbody th { text-align: left; padding-left: 16px; white-space: nowrap; }
.hours-table tbody th { font: 500 16px/1.2 var(--en); letter-spacing: .04em; }
.hours-table .is-sun { color: var(--rose-deep); }
.hours-table .o { color: var(--rose); font-size: 16px; font-weight: 700; }
.hours-table sup { font-size: 10px; color: var(--rose-deep); }
.hours-table .is-off { color: #c3b3b8; font-size: 12px; }
.hours-note { margin-top: 12px; font-size: 13px; color: var(--muted); }
.hours-side { position: relative; display: grid; justify-items: center; padding: 36px 30px 40px; border-radius: 22px; background: var(--blush); }
.today-card { position: relative; z-index: 1; width: fit-content; max-width: 100%; padding: 4px; background: #fff; border-radius: 16px; box-shadow: 0 14px 34px rgba(194, 80, 111, .1); }
.hours-art { position: absolute; right: -36px; bottom: -40px; width: 170px; z-index: 2; display: block; }
body.plan-honoka .asbcala-today-schedule-wrapper { display: block !important; }
body.plan-honoka .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(--goth) !important; color: var(--ink) !important; }
body.plan-honoka .asbcala-today-schedule-wrapper .asbcala-today-schedule-widget .asbcala-today-title { margin: 0 0 6px !important; font: 600 13px/1 var(--en) !important; letter-spacing: .3em !important; text-align: left !important; color: var(--rose) !important; }
body.plan-honoka .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 dashed #ebcfd7 !important; font: 700 17px/1.4 var(--goth) !important; text-align: left !important; }
body.plan-honoka .asbcala-today-schedule-wrapper .asbcala-today-schedule-widget .asbcala-today-calendar-icon { color: var(--rose); margin-left: auto !important; }
body.plan-honoka .asbcala-today-schedule-wrapper .asbcala-today-schedule-widget .asbcala-today-hours { margin: 0 !important; }
body.plan-honoka .asbcala-today-schedule-wrapper .asbcala-today-schedule-widget .asbcala-today-hours-label,
body.plan-honoka .asbcala-today-schedule-wrapper .asbcala-today-schedule-widget .asbcala-today-events-label { font: 500 11px/1 var(--goth) !important; letter-spacing: .2em !important; opacity: 1 !important; color: var(--muted); text-transform: none !important; margin-bottom: 8px !important; }
body.plan-honoka .asbcala-today-schedule-wrapper .asbcala-today-schedule-widget .asbcala-today-hours-value { padding: 0 !important; background: none !important; text-align: left !important; font: 600 20px/1.75 var(--en) !important; letter-spacing: .04em; white-space: nowrap; max-height: none !important; overflow: visible !important; color: var(--ink) !important; }
body.plan-honoka .asbcala-today-schedule-widget[data-kind="closed"] .asbcala-today-hours-value { font: 700 18px/1.75 var(--goth) !important; color: var(--rose-deep) !important; letter-spacing: .2em !important; }
body.plan-honoka .asbcala-today-schedule-wrapper .asbcala-today-hours-value .sl-ampm { display: inline-block; margin-right: 12px; padding: 4px 9px 3px; border-radius: 999px; background: var(--pale); font: 700 11.5px/1 var(--goth); color: var(--rose-deep); letter-spacing: .12em; vertical-align: 3px; }
body.plan-honoka .asbcala-today-schedule-wrapper .asbcala-today-schedule-widget .asbcala-today-events { margin: 12px 0 0 !important; }
body.plan-honoka .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: #f3eefa !important; color: var(--ink) !important; }
body.plan-honoka .asbcala-today-schedule-wrapper .asbcala-today-schedule-widget .asbcala-today-event-category-line { color: var(--muted) !important; font-size: 11px !important; }

.news-panel { position: relative; padding: 56px 64px 60px; border-radius: 22px; background: var(--pale); }
.news-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 48px; margin-top: 26px; }
.news-list a { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 18px; align-items: center; padding: 14px 0; }
.nd { display: grid; place-items: center; align-content: center; width: 70px; height: 70px; border-radius: 50%; background: #fff; line-height: 1.1; transition: background-color .35s, color .35s; }
.nd b { font: 600 17px/1 var(--en); letter-spacing: .04em; }
.nd small { margin-top: 4px; font: 500 10.5px/1 var(--en); letter-spacing: .1em; color: var(--muted); }
.nt-title { display: block; font-size: 14.5px; line-height: 1.8; text-decoration: underline; text-decoration-color: rgba(77, 66, 70, .35); text-underline-offset: 5px; transition: color .3s; }
.nt-cat { display: block; font-size: 11px; color: var(--muted); letter-spacing: .14em; }
.news-list a:hover .nd { background: var(--rose); color: #fff; }
.news-list a:hover .nd small { color: #fff; }
.news-list a:hover .nt-title { color: var(--rose-deep); }
.btn-right { position: absolute; right: 64px; bottom: 30px; margin: 0; }

.med-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 44px; }
.med-pic { position: relative; height: 330px; border-radius: 18px; overflow: hidden; display: grid; place-items: center; }
.med-pic.is-a { background: var(--blush); }
.med-pic.is-b { background: #e9efe6; }
.med-art { display: block; width: 250px; }
.med-tab { position: absolute; right: 26px; top: 0; writing-mode: vertical-rl; padding: 16px 9px 14px; background: #fff; font-size: 18px; font-weight: 700; letter-spacing: .2em; line-height: 1; border-radius: 0 0 4px 4px; }
.med-tab::before { content: ''; position: absolute; left: 50%; top: -14px; width: 1px; height: 0; }
.med-sub { margin-top: 22px; text-align: center; font-size: 17px; font-weight: 700; letter-spacing: .2em; }
.med-text { margin-top: 10px; font-size: 13.5px; line-height: 2; color: var(--muted); word-break: break-all; }

.cal-box { margin-top: 40px; padding: 40px 44px 36px; border-radius: 22px; background: #fff; border: 1px solid var(--line); }
.plan-honoka .asbcala-shortcode-wrapper {
  --cal-font: var(--goth); --cal-num: var(--en); --cal-ink: var(--ink); --cal-muted: var(--muted);
  --cal-line: #f1e1e5; --cal-rule: var(--rose); --cal-sun: #d9557e; --cal-sat: #5f86b3;
  --cal-today-bg: var(--rose); --cal-today-ink: #fff; --cal-info: #e0789a;
  --cal-nav-line: #efc5d1; --cal-nav-hover-bg: var(--rose); --cal-nav-hover-ink: #fff; --cal-num-weight: 600; --cal-head-weight: 700;
}
.plan-honoka .asbcala-shortcode-wrapper[data-cal-title] .asbcala-calendar .calendar-header h2 { display: flex; align-items: baseline; gap: 12px; font: 600 30px/1 var(--en); letter-spacing: .04em; }
.plan-honoka .asbcala-calendar .calendar-header h2 small { font: 500 13px/1 var(--en); letter-spacing: .16em; color: var(--rose); }
.plan-honoka .asbcala-tip { border-radius: 12px; font-family: var(--goth); font-size: 13px; letter-spacing: .04em; }
.plan-honoka .asbcala-tip .tooltip-event-title { color: var(--rose-deep); font-weight: 700; }

.sec-links { padding-top: 90px; }
.link-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.link-cards a { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 46%; align-items: stretch; min-height: 130px; background: #fff; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; transition: box-shadow .4s, transform .4s var(--ease); }
.link-cards a::before { content: ''; position: absolute; left: -1px; top: 50%; width: 30px; height: 1px; background: var(--ink); }
.link-cards a:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(194, 80, 111, .1); }
.lc-body { display: flex; flex-direction: column; justify-content: center; padding: 18px 20px 18px 46px; }
.lc-name { font-size: 15px; font-weight: 700; letter-spacing: .16em; line-height: 1.6; }
.lc-text { margin-top: 4px; font-size: 12px; line-height: 1.7; color: var(--muted); }
.lc-pic { display: grid; place-items: center; }
.lc-pic.is-a { background: var(--blush); }
.lc-art { display: block; width: 82%; }
.lc-pic.is-b { background: #e9efe6; }
.lc-p { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: #fff; font: 600 30px/1 var(--en); color: var(--line-ink); }

/* ── フッター＝アクセス ───────────────────────── */
.site-footer { width: min(1080px, calc(100% - 80px)); margin: 120px auto 0; padding: 0 0 40px; }
.ft-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.ft-brand-row { display: flex; align-items: center; gap: 22px; }
.ft-brand img { width: 300px; }
.ft-badge { display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; border: 1px solid #efc5d1; font-size: 13px; line-height: 1.4; letter-spacing: .14em; text-align: center; }
.ft-addr { margin-top: 18px; font-size: 13.5px; }
.ft-tel { display: inline-flex; flex-direction: column; margin-top: 4px; font: 600 26px/1.2 var(--en); letter-spacing: .04em; }
.ft-tel-ruby { font: 500 10px/1.4 var(--goth); letter-spacing: .3em; color: var(--muted); }
.ft-fax { font-size: 13px; color: var(--muted); }
.ft-hours { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13.5px; }
.ft-hours div { display: grid; grid-template-columns: 112px minmax(0, 1fr); padding: 6px 0; }
.ft-hours dt { font-weight: 700; letter-spacing: .1em; }
.ft-hours .mk { background-size: 100% 100%; }
.map-frame { position: relative; aspect-ratio: 1 / 1; border-radius: 18px; overflow: hidden; background: #eee; }
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.ft-nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 30px; margin-top: 56px; padding-top: 26px; border-top: 1px solid var(--line); font-size: 13px; letter-spacing: .14em; }
.ft-copy { margin-top: 18px; text-align: center; font: 500 11px/1.6 var(--en); letter-spacing: .14em; color: var(--muted); }

/* 右の端の札・スマホの下の帯 */
.side-card { position: fixed; right: 0; top: 50%; z-index: 50; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 104px; padding: 18px 8px 14px; margin-top: -70px; background: #fff; border-radius: 12px 0 0 12px; box-shadow: 0 6px 24px rgba(77, 66, 70, .1); text-align: center; transition: transform .4s var(--ease), background-color .35s; }
.side-card svg { width: 26px; height: 26px; fill: var(--rose); }
.side-card b { font-size: 13px; line-height: 1.5; letter-spacing: .14em; }
.side-card small { font: 500 9px/1 var(--en); letter-spacing: .2em; color: var(--muted); }
.side-card:hover { transform: translateX(-6px); background: var(--pale); }
.sp-bar { display: none; }
html.is-shot .side-card { display: none; }
html.is-shot { --anim-draw-dur: .05s; --anim-draw-fill-dur: .05s; }

/* ── タブレット ─────────────────────────────── */
/* ★本日の診療の幅はプラグインの「大きさ」で決まる（medium＝400px）＝横に並べるのは 400px が入る幅だけ */
@media (max-width: 1180px) {
  .site-header { padding: 22px 30px 18px 40px; gap: 16px; }
  .sh-brand img { width: 250px; }
  .hero { padding: 0 24px; }
  .hours-grid { grid-template-columns: 1fr; gap: 40px; }
  .news-panel { padding: 46px 40px 90px; }
  .btn-right { right: 40px; }
}
/* ── スマホ ─────────────────────────────────── */
@media (max-width: 760px) {
  body { padding-bottom: 64px; }
  .site-header { grid-template-columns: 1fr auto; padding: 14px 16px 12px 18px; gap: 10px; }
  .sh-tel, .sh-hours { display: none; }
  .sh-brand { align-items: flex-start; gap: 6px; }
  .sh-brand img { width: 214px; }
  .sh-brand span { font-size: 10.5px; letter-spacing: .18em; }
  .sh-menu span { width: 36px; }
  .hero { padding: 0 10px; }
  .hero-frame { height: calc(100svh - 160px); min-height: 520px; border-radius: 16px; }
  .hero-circle { width: 74cqw; margin: -37cqw 0 0 -37cqw; top: 50%; left: 56%; }
  .hero-art { height: 60cqh; top: 51%; left: 56%; }
  .tabs-catch { right: 18px; top: 22px; }
  .tabs-catch .tab { font-size: 18px; padding: 13px 7px; }
  .tabs-sub { left: 16px; bottom: 54px; gap: 8px; }
  .tabs-sub .tab { font-size: 14px; padding: 12px 6px; }
  .spark.s1 { left: auto; right: 22%; top: 30%; }
  .spark.s2 { left: auto; right: 14%; top: 37%; }
  .spark.s3 { left: 12%; top: 40%; }
  .hero-ring { --rw: 92cqw; top: 50%; left: 56%; }
  .hero-blob { width: 34cqw; left: calc(50% + 14cqw); top: calc(50% + 12cqw); }
  .hero-sprig { width: 40cqw; left: 2cqw; top: calc(50% + 28cqw); }
  .sec { width: calc(100% - 40px); padding-top: 72px; }
  .sec-hello { text-align: left; }
  .notice { padding: 22px 20px; font-size: 15px; }
  .mk-title { font-size: 20px; }
  .hours-side { padding: 26px 18px 30px; }
  .hours-art { width: 110px; right: -10px; bottom: -34px; }
  .hours-table { font-size: 12.5px; }
  .hours-table thead th:first-child, .hours-table tbody th { padding-left: 10px; font-size: 13.5px; }
  .news-panel { padding: 36px 20px 84px; border-radius: 18px; }
  .news-list { grid-template-columns: 1fr; }
  .news-list a { grid-template-columns: 60px minmax(0, 1fr); gap: 14px; }
  .nd { width: 60px; height: 60px; }
  .btn-right { right: 20px; bottom: 26px; }
  .med-grid { grid-template-columns: 1fr; gap: 40px; margin-top: 30px; }
  .med-pic { height: 250px; }
  .med-art { width: 200px; }
  .cal-box { padding: 22px 12px 20px; margin-left: -8px; margin-right: -8px; }
  .plan-honoka .asbcala-shortcode-wrapper[data-cal-title] .asbcala-calendar .calendar-header h2 { font-size: 24px; }
  .link-cards { grid-template-columns: 1fr; gap: 18px; }
  .lc-body { padding-left: 40px; }
  .site-footer { width: calc(100% - 40px); margin-top: 80px; }
  .ft-grid { grid-template-columns: 1fr; gap: 32px; }
  .ft-brand img { width: 220px; }
  .ft-badge { width: 60px; height: 60px; font-size: 11.5px; }
  .ft-hours div { grid-template-columns: 1fr; padding: 4px 0 8px; }
  .side-card { display: none; }
  .sp-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: 38% 62%; height: 64px; background: #fff; box-shadow: 0 -4px 16px rgba(77, 66, 70, .08); }
  .sp-bar a { display: flex; flex-direction: column; justify-content: center; align-items: center; line-height: 1.3; }
  .sp-bar-hours { margin: 10px; background: var(--blush); font-size: 14px; font-weight: 700; letter-spacing: .14em; }
  .sp-bar-tel { font: 600 19px/1.2 var(--en); letter-spacing: .04em; }
  .sp-bar-tel small { font: 500 10px/1.4 var(--goth); letter-spacing: .16em; }
  :root { --fx-backtop-bottom: 78px; --fx-backtop-right: 12px; --fx-backtop-size: 46px; }
  html.is-shot .sp-bar { position: relative; } /* 撮影の 1 枚の絵では、ページのいちばん下に置く */
}