@charset "UTF-8";
/* ============================================================
   下層ページ共通（疾患 /disease/<slug>/・診療メニュー /services/<slug>/・一覧ハブ）
   column.css の記事スタイル（.cl-art 系）を前提に、単一カラムの器と
   LP 本文の生 HTML（治療の流れ .flow-*）、本文中の予約リンク、準備中チップを足す。
   色は style.css のトークンのみ（生 HEX は書かない）。
   ============================================================ */

/* 単一カラム（サイドバー無し） */
.cl-layout--single {
  grid-template-columns: minmax(0, 1fr);
  max-width: 920px;
}

/* 本文中の予約リンク（開院前は aria-disabled。lib/site.mjs の RESERVE に従う） */
.cl-art__cta-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  padding: 16px 22px;
  background: var(--bg-warm);
  border-radius: 18px;
}
.cl-art__cta-inline .reserve-link { font-size: 15px; letter-spacing: .12em; white-space: nowrap; }
.cl-art__cta-inline .cl-cta__divider { width: 1px; height: 24px; background: var(--band); }
/* SP（iPhone 幅）でも 2 本を横並びに保つ（折り返すと縦に積まれる・2026-08-23 オーナー指示） */
@media (max-width: 480px) {
  .cl-art__cta-inline { flex-wrap: nowrap; justify-content: space-between; gap: 8px; padding: 14px 12px; }
  .cl-art__cta-inline .reserve-link { font-size: 13.5px; letter-spacing: .03em; }
  .cl-art__cta-inline .cl-cta__divider { flex: none; }
}

/* 未公開ページへの導線（リンク切れを作らず「準備中」と明示） */
.cl-art__body .is-planned { color: var(--muted); }
.cl-art__body .is-planned small { margin-left: .4em; white-space: nowrap; display: inline-block; } /* チップを行末で分断しない（「準｜備中」） */

/* 治療の流れ（LP の生 HTML。保険診療／自費診療の 2 グループ） */
.cl-art__body .flow-group { margin-top: 1.6em; }
.cl-art__body .flow-group + .flow-group { margin-top: 1.2em; }
.cl-art__body .flow-label {
  display: inline-block;
  margin: 0 0 .9rem;
  padding: .3rem 1rem;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .12em;
}
.cl-art__body .flow-label--after { background: var(--red); }
.cl-art__body ol.flow-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .8rem;
}
.cl-art__body li.flow-step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 1rem;
  align-items: center;
  margin: 0;
  padding: 1rem 1.2rem;
  border: 1.5px solid var(--band);
  border-radius: 14px;
  background: #fff;
}
.cl-art__body .flow-ico {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-warm);
  color: var(--blue);
}
.cl-art__body .flow-ico svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cl-art__body .flow-num {
  display: block;
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--red);
  font-weight: 700;
}
.cl-art__body .flow-title { margin: .1rem 0 .25rem; font-weight: 700; font-size: 16px; letter-spacing: .08em; }
.cl-art__body .flow-desc { margin: 0; font-size: 14px; line-height: 1.9; }

/* 一覧ハブ（/disease/・/services/） */
.cl-hub__group { margin-top: 40px; }
.cl-hub__group:first-child { margin-top: 0; }
.cl-hub__group-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .22em;
  padding-bottom: .6em;
  border-bottom: 1.5px solid var(--band);
}
.cl-hub__group-title .cl-cat__count { margin-left: .8em; }

/* 疾患一覧: 分類ごとの開閉（#7665）。件数は閉じたままでも見えるので summary の中に置く。
   <summary> の中に <h2> を入れているのは見出し構造を壊さないため（HTML 仕様上 summary は heading content を許容する）。 */
.cl-hub__group-summary { cursor: pointer; list-style: none; }
.cl-hub__group-summary::-webkit-details-marker { display: none; }
.cl-hub__group-summary .cl-hub__group-title { margin: 0; display: flex; align-items: center; }
.cl-hub__group-summary .cl-hub__group-title::after {
  content: "";
  margin-left: auto;
  width: 8px; height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
  transition: transform .25s var(--ease-soft);
}
.cl-hub__group[open] > .cl-hub__group-summary .cl-hub__group-title::after {
  transform: translateY(1px) rotate(225deg);
}
.cl-hub__group-summary:hover .cl-hub__group-title { opacity: .65; }
.cl-hub__group-summary:focus-visible { outline: 2px solid var(--red); outline-offset: 6px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) {
  .cl-hub__group-summary .cl-hub__group-title::after { transition: none; }
}
.cl-hub__list { margin-top: 14px; display: grid; gap: 14px; }
.cl-hub__item {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  background: #fff;
  border-radius: 20px;
  padding: 16px 20px 16px 16px;
  transition: transform .3s var(--ease-soft), box-shadow .3s;
}
.cl-hub__item:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(43, 34, 31, .08); }
.cl-hub__item-title { font-size: 16px; font-weight: 700; letter-spacing: .08em; line-height: 1.8; }
.cl-hub__item-desc {
  margin-top: 4px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.9;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cl-hub__item--planned { cursor: default; }
.cl-hub__item--planned:hover { transform: none; box-shadow: none; }
.cl-hub__item--planned .cl-hub__item-title { color: var(--muted); }
.cl-hub__en {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--mustard);
}
.cl-hub__lead {
  font-size: 15px;
  color: var(--muted);
  letter-spacing: .1em;
  line-height: 2.1;
}
.cl-hub__foot { margin-top: 36px; text-align: center; }

@media (max-width: 820px) {
  .cl-art__cta-inline { padding: 12px 16px; gap: 8px 14px; }
  .cl-art__body li.flow-step { grid-template-columns: 44px 1fr; gap: .8rem; padding: .9rem 1rem; }
  .cl-art__body .flow-ico { width: 44px; height: 44px; }
  .cl-art__body .flow-ico svg { width: 22px; height: 22px; }
  .cl-hub__item { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 12px 14px 12px 12px; border-radius: 16px; }
  .cl-hub__item-desc { display: none; }
}

/* ============================================================
   単一カラム（診療メニュー・疾患・一覧）は中央の白い枠を持たない（#7054 オーナー指示）
   トップ・採用ページと同じ「地続きの面」に本文を置き、表・FAQ・目次などの塊だけを白いカードにする。
   ============================================================ */
.cl-layout--single { max-width: 880px; }
.cl-layout--single .cl-art {
  background: transparent;
  border-radius: 0;
  padding: 0;
}
/* 地色の上では --band の罫線が薄すぎるので、本文の罫線はインクを薄めて引く */
.cl-layout--single .cl-art__body h2,
.cl-layout--single .cl-art__related-title { border-bottom-color: color-mix(in srgb, var(--ink) 18%, transparent); }
/* 地色と同化する塊は白いカードに（トップのサービスカードと同じ） */
.cl-layout--single .cl-art__toc,
.cl-layout--single .cl-art__supervisor,
.cl-layout--single .cl-art__tablewrap,
/* background-color で指定する（shorthand だと column.css の表のスクロール影＝背景画像を消してしまう・#7736） */
.cl-layout--single .cl-art__cta-inline { background-color: #fff; }

/* ============================================================
   装飾レイヤー（キャラクター＋糸）— lib/deco.mjs が配置（#7054）
   採用ページと同じ手描き素材。キャラは h2 の罫線の右端に「座り」、糸はその足元（見出し文字の右の余白）にだけ敷く。
   タイトル脇の糸はパンくず行の右（見出しの上）に寝かせる（タイトルや日付の行に降りてこない）。
   単一カラムでは本文の左右余白にキャラと糸を浮かせ、トップページのように見せる（広い画面だけ）。
   文字には重ねない: 装飾した h2 には padding-right を足して、文字がキャラの下に入らないようにする。
   SP でも装飾は消さない（小さくするだけ）。はみ出す分は画面端で切れてよい（body は overflow-x hidden）。
   ============================================================ */
.cl-art { position: relative; }
.cl-art__deco-top {
  right: -20px;
  top: -78px;          /* パンくず行の右・見出しの上 */
  width: 200px;
  z-index: 2;
  opacity: .9;
}
.cl-art__body h2.has-deco { padding-right: 100px; }
.cl-art__body h2.has-deco--wide { padding-right: 160px; }
.cl-art__body > .cl-deco { margin-top: 0; }
.cl-deco {
  position: relative;
  height: 0;
  pointer-events: none;
  user-select: none;
}
.cl-deco__char {
  position: absolute;
  right: 6px;
  bottom: 1px;            /* 罫線（h2 の border-bottom）の上に足をのせる */
  height: 70px;
  width: auto;
  z-index: 1;
}
.cl-deco__char--wide { height: 50px; }
.cl-deco__thread {
  position: absolute;
  height: auto;
  opacity: .9;
}
/* キャラと糸を重ねない（2026-08-22 オーナー指示）。重ねてよいのは b 型＝左右反転した糸でキャラを囲む組み合わせだけ。
   a 型の糸は本文カラムの左の外側（罫線の高さ）に離して置く＝余白が取れる幅だけ表示 */
.cl-deco--a .cl-deco__thread { display: none; left: -210px; bottom: -10px; width: 150px; }
.cl-deco--b .cl-deco__thread { right: -70px; bottom: -2px; width: 170px; scale: -1 1; }
.has-deco--wide + .cl-deco--b .cl-deco__thread { right: -60px; width: 210px; }
.cl-deco__char.deco-sway { animation-duration: 7.5s; }
.cl-deco--b .cl-deco__char.deco-sway { animation-delay: 2.2s; }

/* 本文カラムの左右余白に浮かせるキャラ（カラムの外＝文字と重ならない。糸とも離す）。余白が取れる幅だけ */
.cl-deco__side { position: absolute; display: none; width: 84px; height: auto; }
.cl-deco--a .cl-deco__side { left: -150px; top: 96px; }     /* 左: a 型の糸（罫線の高さ）の下に離して */
.cl-deco--b .cl-deco__side { right: -150px; top: 28px; }    /* 右: 囲みの外 */
.cl-deco__side.deco-sway { animation-duration: 8.5s; animation-delay: 1.1s; }
@media (min-width: 1180px) {
  .cl-layout--single .cl-deco__side,
  .cl-layout--single .cl-deco--a .cl-deco__thread { display: block; }
}

@media (max-width: 820px) {
  .cl-art__deco-top { display: none; } /* SP はパンくず行が全幅で糸の置き場がない（採用ページと同じくタイトル脇の糸だけ隠す。見出しのキャラ・糸は出す） */
  .cl-art__body h2.has-deco { padding-right: 66px; }
  .cl-art__body h2.has-deco--wide { padding-right: 96px; }
  .cl-deco__char { height: 48px; right: 2px; }
  .cl-deco__char--wide { height: 36px; }
  .cl-deco--b .cl-deco__thread { right: -50px; bottom: -2px; width: 130px; }
  .has-deco--wide + .cl-deco--b .cl-deco__thread { right: -40px; width: 150px; }
}

/* ============================================================
   図版: 上から見た頭の形 3 タイプ（lib/figures.mjs が <figure class="fig-embed" data-fig="head-shape-types"> を展開）
   LP と疾患ページで共用。地色の上に 3 枚の白いカード（塊＝白カードの約束）。色はタイプごとに糸の 3 色。
   SP では 1 列にし、画像を左・文を右に並べて縦に長くしすぎない。
   ============================================================ */
.cl-art__body .hs-types { margin: 1.6em 0 0; }
.cl-art__body .hs-types__lead {
  margin: 0 0 .9em;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
}
.hs-types__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.cl-art__body .hs-type {
  margin: 0;
  padding: 18px 16px 16px;
  background: #fff;
  border-radius: 18px;
  text-align: center;
}
.cl-art__body .hs-type__name { margin: 0; line-height: 1.3; }
.hs-type__pill {
  display: inline-block;
  padding: .32em 1.1em;
  border-radius: 999px;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .12em;
}
.hs-type--plagio .hs-type__pill { background: var(--blue); }
.hs-type--brachy .hs-type__pill { background: var(--red); }
.hs-type--dolicho .hs-type__pill { background: var(--mustard); }
.hs-type__kana {
  display: block;
  margin-top: .45em;
  font-size: 11.5px;
  color: var(--muted);
  letter-spacing: .06em;
}
.cl-art__body .hs-type__img {
  display: block;
  width: min(100%, 168px);
  height: auto;
  margin: 10px auto 4px;
}
.cl-art__body .hs-type__desc {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.85;
  text-align: left;
}
/* 4 型（頭蓋骨縫合早期癒合症）は PC で 4 カラム、中間幅で 2×2 */
.hs-types--cols4 .hs-types__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.hs-types--cols4 .hs-type { padding: 16px 12px 14px; }
.hs-types--cols4 .hs-type .hs-type__pill { background: var(--blue); font-size: 14px; letter-spacing: .08em; padding: .3em .9em; } /* 4 型は同じ病気の亜型なので全部紺（青いギザギザと揃える） */
.hs-types--cols4 .hs-type__kana { font-size: 11px; }
.cl-art__body .hs-types--cols4 .hs-type__img { width: min(100%, 140px); }
.cl-art__body .hs-types--cols4 .hs-type__desc { font-size: 13px; }
@media (max-width: 900px) {
  .hs-types--cols4 .hs-types__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.cl-art__body .hs-type__link {
  margin: .6em 0 0;
  font-size: 13px;
  letter-spacing: .06em;
  text-align: right;
}
.cl-art__body .hs-types__note {
  margin: .8em 0 0;
  font-size: 12px;
  line-height: 1.7;
  color: var(--muted);
}
@media (max-width: 700px) {
  .hs-types__grid,
  .hs-types--cols4 .hs-types__grid { grid-template-columns: minmax(0, 1fr); gap: 10px; } /* cols4 の 2×2 指定（〜900px）より後に置いて勝たせる */
  .cl-art__body .hs-type {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    grid-template-areas: "img name" "img desc" "img link";
    align-items: center;
    column-gap: 14px;
    padding: 14px 14px 14px 10px;
    text-align: left;
  }
  .cl-art__body .hs-type__name { grid-area: name; align-self: end; }
  .cl-art__body .hs-type__img { grid-area: img; width: 112px; margin: 0; }
  .cl-art__body .hs-type__desc { grid-area: desc; align-self: start; margin-top: .4em; font-size: 13px; }
  .cl-art__body .hs-type__link { grid-area: link; align-self: start; margin-top: .3em; }
  .hs-type__pill { font-size: 14px; }
}

/* ヘルメット治療のしくみ図（#7297）。3 コマに割らず 1 枚の図で通しで再生し、
   説明が再生に合わせて順に立つ。SVG は埋め込み（外からクラスで再生を制御するため） */
.cl-art__body .hs-flow { margin: 1.6em 0 0; }
.cl-art__body .hs-flow__lead {
  margin: 0 0 .9em;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
}
.hs-flow__main {
  display: grid;
  grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  padding: 20px 22px;
  background: #fff;
  border-radius: 20px;
}
.hs-flow__stage { display: flex; justify-content: center; }
.cl-art__body .hs-flow__stage svg { width: min(100%, 230px); height: auto; display: block; }
.cl-art__body ol.hs-flow__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.cl-art__body li.hs-flow__step {
  margin: 0;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  opacity: 1;
}
.hs-flow__no {
  width: 22px;
  line-height: 22px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}
.hs-flow__body2 { font-size: 13.5px; line-height: 1.8; }
.hs-flow__body2 b { display: block; font-size: 14.5px; letter-spacing: .03em; }
/* 再生に合わせて順に立てる（4.8s のうちどこで自分の番かを keyframes で持つ） */
.hs-flow.is-playing .hs-flow__step { animation-duration: 6.4s; animation-delay: .15s; animation-fill-mode: forwards; animation-timing-function: linear; }
.hs-flow.is-playing .hs-flow__step:nth-child(1) { animation-name: hs-flow-s1; }
.hs-flow.is-playing .hs-flow__step:nth-child(2) { animation-name: hs-flow-s2; }
.hs-flow.is-playing .hs-flow__step:nth-child(3) { animation-name: hs-flow-s3; }
@keyframes hs-flow-s1 { 0%, 25% { opacity: 1 } 32%, 90% { opacity: .38 } 100% { opacity: 1 } }
@keyframes hs-flow-s2 { 0%, 25% { opacity: .38 } 32%, 56% { opacity: 1 } 64%, 90% { opacity: .38 } 100% { opacity: 1 } }
@keyframes hs-flow-s3 { 0%, 56% { opacity: .38 } 64%, 100% { opacity: 1 } }
.cl-art__body .hs-flow__ctl { margin: .9em 0 0; text-align: center; }
.hs-flow__btn {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  padding: .55em 1.35em;
  border: 0;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  cursor: pointer;
}
.hs-flow__btn:hover { opacity: .88; }
.hs-flow__btn:focus-visible { outline: 2.5px solid var(--red); outline-offset: 3px; }
.hs-flow__ico {
  width: 0; height: 0;
  border-left: 8px solid currentColor;
  border-top: 5.5px solid transparent;
  border-bottom: 5.5px solid transparent;
}
.cl-art__body .hs-flow__note {
  margin: .8em 0 0;
  font-size: 12px;
  line-height: 1.7;
  color: var(--muted);
}
@media (max-width: 700px) {
  .hs-flow__main { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 16px 14px; }
  .cl-art__body .hs-flow__stage svg { width: min(100%, 190px); }
}

/* 再生ボタンは一時停止も兼ねる。6.4 秒あり「5 秒を超える自動再生には停止手段が要る」ため（#7297） */
.hs-flow.is-paused .hs-flow__main *,
.hs-flow.is-paused .hs-flow__step { animation-play-state: paused !important; }
.hs-flow.is-playing:not(.is-paused):not(.is-done) .hs-flow__ico {
  width: 9px;
  height: 11px;
  border: 0;
  background:
    linear-gradient(currentColor 0 0) 0 / 3px 100% no-repeat,
    linear-gradient(currentColor 0 0) 100% / 3px 100% no-repeat;
}
/* 動きを減らす設定: 自動再生はしない（抑止は main.js）。ただし再生ボタンは残す。
   本人が押して見る分には問題がなく、隠すと見る手段そのものを奪ってしまうため（#7297）。
   静止しているあいだは最初から完成形を出す。 */
@media (prefers-reduced-motion: reduce) {
  .hs-flow:not(.is-playing) .hs-flow__step { animation: none; opacity: 1; }
}

/* ================= 固定ページ（/access/ 等）の地図 =================
   フッターの地図（.site-footer__map）と同じ見え方に揃える。API キー不要の cid 埋め込み。 */
.cl-art__body .cl-art__map {
  max-width: 620px;
  margin: 22px auto 0;
  aspect-ratio: 16 / 10;
  border-radius: 26px;   /* 写真・パネルと同じ丸み */
  overflow: hidden;
  background: var(--bg-warm);
}
.cl-art__body .cl-art__map iframe { display: block; width: 100%; height: 100%; border: 0; }
.cl-art__body .cl-art__maplink { margin-top: 12px; text-align: center; font-size: 13.5px; letter-spacing: .08em; }

/* ── 本文中の写真（#8071・figures.mjs の data-fig="photo"） ───────────────── */
.cl-art__body .hs-photo { margin: 1.6em 0 0; }
.hs-photo__img {
  width: 100%;
  height: auto;
  border-radius: 20px;   /* しくみ図（.hs-flow__main）と同じ丸み */
  display: block;
}
.cl-art__body .hs-photo__cap {
  margin: .8em 0 0;
  font-size: 12px;
  line-height: 1.7;
  color: var(--muted);
}
/* 出所は必ず出す。メーカー提供写真を「当院で撮った様子」に見せない（docs/design/photo-selection.md） */
.hs-photo__credit { display: block; margin-top: .2em; opacity: .8; }
/* 2機種の実物を対等に並べる。縦横比を揃えて cover で切るので、素材の比率が違っても揃って見える */
.hs-photo__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
/* メーカーごとに撮影の背景が違う（白い部屋／グレーのスタジオ）。白いカードに載せて枠を揃えると、
   背景差が「その写真の一部」に見えて 2 枚が並んでも違和感が出ない */
.hs-photo--pair .hs-photo__cell { background: #fff; border-radius: 20px; padding: 10px 10px 8px; }
.hs-photo--pair .hs-photo__img { aspect-ratio: 3 / 2; object-fit: cover; border-radius: 12px; }
.cl-art__body .hs-photo--pair .hs-photo__credit { margin: .5em 0 0; font-size: 11.5px; line-height: 1.6; color: var(--muted); }
.cl-art__body .hs-photo--pair .hs-photo__cap { text-align: center; }
@media (max-width: 560px) {
  .hs-photo__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
/* 装着写真は縦長。本文幅いっぱいだと顔が大きくなりすぎるので上限を置く。
   420px でも「主張が大きい」（オーナー 2026-09-03・#7136）→ 280px・列幅の 7 割まで */
.cl-art__body .hs-photo--portrait .hs-photo__img { width: min(70%, 280px); margin-inline: auto; }
.cl-art__body .hs-photo--portrait .hs-photo__cap { text-align: center; }

/* ── 3D ループ動画（#8107・figures.mjs の data-fig="video"） ─────────────────
   しくみ図の補足なので写真より一回り小さく。動画の地色はサイトの --bg で描画してあるので枠が浮かない */
.cl-art__body .hs-video { margin: 1.4em 0 0; }
.hs-video__frame { position: relative; width: min(100%, 520px); margin-inline: auto; border-radius: 20px; overflow: hidden; background: var(--bg); }
.hs-video__el { display: block; width: 100%; height: auto; }
.hs-video__btn {
  position: absolute; right: 10px; bottom: 10px;
  padding: .35em .9em; border: 1.5px solid var(--red); border-radius: 999px;
  background: rgba(255, 255, 255, .92); color: var(--red); font-size: 12px; letter-spacing: .08em; cursor: pointer;
}
.hs-video__btn:hover { background: var(--red); color: #fff; }
.cl-art__body .hs-video__cap { margin: .8em 0 0; font-size: 12px; line-height: 1.7; color: var(--muted); text-align: center; }
.cl-art__body .hs-video__cap b { color: var(--ink); font-weight: 700; }
@media print { .hs-video { display: none !important; } }

/* しくみ図の 3D 動画版（#8107・LP の 3 コマを置き換え）: コマの位置に動画、横の説明は再生時刻に合わせて点灯（main.js） */
.hs-flow--video .hs-flow__main { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); }
.hs-flow--video .hs-flow__stage .hs-video__frame { width: min(100%, 320px); margin: 0; }
.hs-flow--video .hs-flow__step { opacity: .38; transition: opacity .35s ease; }
.hs-flow--video .hs-flow__step.is-active { opacity: 1; }
@media (max-width: 700px) { .hs-flow--video .hs-flow__main { grid-template-columns: minmax(0, 1fr); } .hs-flow--video .hs-flow__stage .hs-video__frame { width: min(100%, 360px); } }
@media (prefers-reduced-motion: reduce) { .hs-flow--video .hs-flow__step { opacity: 1; transition: none; } }
@media print { .hs-flow--video .hs-flow__step { opacity: 1; } .hs-flow--video .hs-flow__stage { display: none; } }