/* ============================================================
   トップ（index.html）スマホ改修ぶん（2026-10-13・534回目で draft から移植）
   読込順: v3-home.css → cta-bar.css → 本ファイル。
   構成: ①FV・診療時間の差分 ②当院について〜コラムのスマホ改修 ③イラスト・セクション境界・動き（.home-illustrated）
         ④症状セクション ⑤診療案内（.care-*）
   本文の基準値は docs/design-rules.md。移植元: drafts/fv-mobile-20261005/{fv-draft,illustrated-home,symptoms-entry,services-section}.css
   FV・お知らせ・診療時間の大半は 523回目に v3-home.css へ移植済みのため、ここには差分のみ置く。
   ============================================================ */
.draft-sp-only { display: none; }

/* ① FV・診療時間の差分（523回目移植後に draft で変えたぶん） */
@media (max-width: 767px) {
  .fv { padding: calc(var(--gap-sm) * .75) var(--container-sp) 0; }
  .visit-hours { margin-top: var(--gap-sm); }
  .visit-hours .hours-table-main .visit-info-heading { margin-bottom: 14px; }
  .visit-hours .hours-table thead th {
    border-bottom: 0;
    background: var(--color-main);
    color: var(--color-surface);
  }
  .visit-hours .hours-table thead tr th:first-child::before { color: var(--color-surface); }
  .visit-hours .hours-table thead th.is-today { background: var(--color-accent); }
  .visit-hours .hours-table th.is-today,
  .visit-hours .hours-table td.is-today { background: rgba(201, 146, 63, .16); }
  /* 表の面だけ白にして、背景から浮かせる。今日の列だけをゴールドで目立たせる。 */
  .visit-hours .hours-table {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    overflow: hidden;
  }
  .visit-hours .hours-table tbody tr:last-child th,
  .visit-hours .hours-table tbody tr:last-child td { border-bottom: 0; }
  .visit-hours .hours-info { padding: 0 0 0 calc(var(--gap-sm) / 2); } /* 表の下の文字を少し右へ */
}

/* ② 当院について〜コラム（移植元: fv-draft.css） */

/* 強みセクション：イントロのみスマホ調整（カードは本番と同じ） */
@media (max-width: 767px) {
  .draft-pc-only { display: none; }
  .draft-sp-only { display: inline; }
  .reasons-intro { text-align: center; } /* 基底SPは左揃え。イントロ（見出し・本文）を中央揃えにする */
  .reasons-intro__title,
  .reasons-intro__text { word-break: auto-phrase; } /* 「動／物病院」のような語の途中での折り返しを避ける（非対応ブラウザは従来どおり） */
}

/* 初めての方へ（スマホ）：「受付へ続く手引き」。箱を外し、3つの見出しを画面左端から差し込む濃色の帯に（長さ3→5→7字で伸びる）。
   最後に受付写真（右上だけ大きい角丸＋ずらした金の細枠）を置き、右下の切り欠きを「詳しく見る」にする。PCは不変（全て≤767px内）。 */
@media (max-width: 767px) {
  .first-visit-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "sub" "title" "text" "points" "photo";
    gap: 0;
    isolation: isolate; /* 金枠(::before, z-index:-1)を地色より上・写真より下に描く（診療案内と同じ） */
  }
  .first-visit-lead { display: contents; } /* motion-reveal--left のフェードは効かなくなる（診療案内と同じ扱い） */
  .first-visit-lead-sub { grid-area: sub; }
  .first-visit-lead h2 { grid-area: title; margin-bottom: 0; }
  .first-visit-lead-text {
    grid-area: text;
    margin: var(--gap-md) 0 var(--gap-lg);
    color: var(--color-text);
    font-size: 16px;
    line-height: 1.9;
  }
  .first-visit-cta { display: none; } /* 「詳しく見る」は写真の切り欠きに一本化（リンク先は同じ） */

  .first-visit-points { grid-area: points; display: grid; gap: var(--gap-lg); }
  .first-visit-point {
    grid-template-columns: minmax(0, 1fr) 52px;
    grid-template-areas: "title icon" "text text";
    column-gap: var(--gap-sm);
    row-gap: 12px; /* 帯と説明文の間。--gap-sm だと離れすぎる */
    align-items: center;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .first-visit-point-body { display: contents; }
  .first-visit-point-title {
    grid-area: title;
    justify-self: start;
    margin: 0 0 0 calc(-1 * var(--container-sp)); /* 画面の左端から差し込む */
    padding: 4px 16px 5px var(--container-sp);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: var(--color-main);
    color: var(--color-text-light);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: .06em;
    white-space: nowrap;
  }
  .first-visit-point-text {
    grid-area: text;
    margin: 0;
    color: var(--color-text);
    font-size: 16px;
    line-height: 1.8;
  }
  .first-visit-point-icon {
    grid-area: icon;
    width: 52px;
    height: 52px;
    border: 0;
    background: var(--color-bg-section);
  }
  .first-visit-point-icon img { width: 40px; height: 40px; }

  .first-visit-mobile-photo {
    grid-area: photo;
    position: relative;
    margin: var(--gap-lg) 0 0 calc(-1 * var(--container-sp));
    aspect-ratio: 4 / 3;
    overflow: visible;
    border: 0;
    border-radius: 0 64px 0 0; /* 右下は切り欠きで覆う（強みと同じ考え方）。64pxは強み・診療案内と同値 */
    background: none;
    box-shadow: none;
  }
  .first-visit-mobile-photo img { display: block; border-radius: inherit; }
  .first-visit-mobile-photo::before {
    content: '';
    position: absolute;
    inset: 10px -10px -10px 10px; /* 強み・診療案内と同値 */
    border: 1px solid rgba(201, 146, 63, .45);
    border-radius: inherit;
    z-index: -1;
    pointer-events: none;
  }

  /* 「詳しく見る」＝写真右下の切り欠き（地色 --color-bg）。基本CSSの display:none（0,2,0）に勝つため 0,3,0 で指定 */
  .first-visit .first-visit-lead > .first-visit-lead-btn {
    grid-area: photo;
    justify-self: end;
    align-self: end;
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: auto;
    height: auto;
    min-height: 44px;
    margin: 0;
    padding: 0 var(--gap-sm) 0 28px;
    border-radius: 0;
    color: var(--color-main);
    font-size: 14px;
    white-space: nowrap;
    background:
      radial-gradient(circle at 0 0, transparent 15.5px, var(--color-bg) 16px) left bottom / 16px 16px no-repeat,
      radial-gradient(circle at 100% 100%, var(--color-bg) 15.5px, transparent 16px) 16px 0 / 16px 16px no-repeat,
      linear-gradient(var(--color-bg), var(--color-bg)) 31px 0 / calc(100% - 31px) 100% no-repeat,
      linear-gradient(var(--color-bg), var(--color-bg)) 16px 15px / 16px calc(100% - 15px) no-repeat;
  }
  .first-visit .first-visit-lead > .first-visit-lead-btn::before {
    content: '';
    position: absolute;
    right: 0;
    top: -16px;
    width: 16px;
    height: 16px;
    background: radial-gradient(circle at 0 0, transparent 15.5px, var(--color-bg) 16px);
    pointer-events: none;
  }
  .first-visit .first-visit-lead > .first-visit-lead-btn::after {
    content: '';
    width: 16px;
    height: 16px;
    background: url('../images/icons/paw-large-warm-gold.png') center / contain no-repeat;
    opacity: .7;
    transform: translateY(.5px);
    transition: transform .25s cubic-bezier(.22, 1, .36, 1), opacity .2s ease;
  }
  .first-visit .first-visit-lead > .first-visit-lead-btn:hover { opacity: 1; text-decoration: underline; text-underline-offset: .3em; }
  .first-visit .first-visit-lead > .first-visit-lead-btn:active::after { opacity: .95; transform: translate(3px, .5px); }
  .first-visit .first-visit-lead > .first-visit-lead-btn:focus-visible { outline: 2px solid var(--color-main); outline-offset: 2px; }

  /* 動き：帯が左から出る。JSが動いたとき（body.motion-ready）だけ隠す＝JS無効でも見出しは消えない */
  body.motion-ready .first-visit-point .first-visit-point-title {
    clip-path: inset(0 100% 0 0);
    transition: clip-path .8s cubic-bezier(.22, 1, .36, 1);
    transition-delay: calc(var(--motion-delay, 0s) + .15s);
  }
  body.motion-ready .first-visit-point.is-visible .first-visit-point-title { clip-path: inset(0); }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  body.motion-ready .first-visit-point .first-visit-point-title { clip-path: none; transition: none; }
  .first-visit .first-visit-lead > .first-visit-lead-btn::after,
  .first-visit .first-visit-lead > .first-visit-lead-btn:active::after { transform: translateY(.5px); transition: none; }
}

/* 初めての方へ：大きめのスマホ〜タブレット幅では写真を横長にし、縦に伸びすぎないようにする。 */
@media (min-width: 560px) and (max-width: 767px) {
  .first-visit-mobile-photo { aspect-ratio: 16 / 9; }
}

/* トリミング（スマホ）：「かかりつけの診察券」。写真は右端へ裁ち落とし（初めての方へ＝左の裁ち落としを反転）、
   「ご利用について」は濃色ヘッダー＋金の肉球を持つ白いカードにして写真の下端へ重ねる。
   リンクは切り欠きではなく行＋丸矢印（4セクション連続の切り欠きを避ける）。PCは不変（全て≤767px内）。 */
@media (max-width: 767px) {
  .trimming-section {
    padding-block: var(--section-y-sp);
    background: var(--color-bg-section); /* 白カードの縁を立てるため単色に（基底SPのグラデーションを上書き） */
  }
  .trimming-layout {
    padding-inline: var(--container-sp);
    gap: 0;
  }
  /* h2スマホ値24px。320px幅で「かかりつけ医ならではの、」(12字)が1行に収まらず3行になるため、最狭幅のみ縮める */
  .trimming-head h2 { font-size: clamp(21px, 6.6vw, 24px); }

  .trimming-photo {
    position: relative;
    margin: var(--gap-lg) calc(-1 * var(--container-sp)) 0 var(--gap-lg); /* 左は字下げ、右は画面端まで裁ち落とし */
    aspect-ratio: 4 / 3;
    overflow: visible; /* ずらした金枠を見せる */
    border: 0;
    border-radius: 64px 0 0 0; /* 初めての方へ（右上64px）の反転。64pxは強み・診療案内と同値 */
    box-shadow: none;
  }
  .trimming-photo img,
  .trimming-photo::after { border-radius: inherit; }
  .trimming-photo::before {
    content: '';
    position: absolute;
    inset: 10px 10px -10px -10px; /* 強みの金枠(10px -10px -10px 10px)を左右反転 */
    border: 1px solid rgba(201, 146, 63, .45);
    border-radius: inherit;
    z-index: -1;
    pointer-events: none;
  }

  .trimming-body {
    margin: calc(-1 * var(--gap-lg)) var(--gap-md) 0 0; /* 写真の下端に40px重ねる */
    padding: 0;
    overflow: hidden;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
  }
  .trimming-card-title {
    margin: 0;
    padding: 12px calc(var(--gap-md) + 32px) 12px var(--gap-md); /* 右32px＝肉球の逃げ */
    background: var(--color-main);
    color: var(--color-text-light);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: .06em;
  }
  .trimming-paw {
    display: block;
    position: absolute;
    top: 14px; /* ヘッダー高53pxの中央 */
    right: var(--gap-md);
    width: 24px;
    height: 24px;
    background: url('../images/icons/paw-large-warm-gold.png') center / contain no-repeat;
    opacity: .9;
    pointer-events: none;
  }
  .trimming-lead {
    margin: 0;
    padding: var(--gap-md) var(--gap-md) var(--gap-sm);
    color: var(--color-text);
    font-size: 16px;
    line-height: 1.9;
    word-break: auto-phrase; /* 対応ブラウザでは文節で折り返す（非対応は通常の折り返し） */
  }
  .trimming-actions {
    display: block;
    margin: 0 var(--gap-md);
    border-top: 1px solid var(--color-border);
  }
  .trimming-section .trimming-actions .first-visit-lead-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: auto;
    min-height: 56px;
    padding: 0;
    background: transparent;
    border-radius: 0;
    color: var(--color-main);
    font-size: 16px;
    letter-spacing: .04em;
  }
  .trimming-section .trimming-actions .first-visit-lead-btn::after {
    content: '→';
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--color-main);
    color: var(--color-text-light);
    font-size: 14px;
    line-height: 1;
    transition: transform .25s cubic-bezier(.22, 1, .36, 1);
  }
  .trimming-section .trimming-actions .first-visit-lead-btn:hover { opacity: 1; }
  .trimming-section .trimming-actions .first-visit-lead-btn:hover::after,
  .trimming-section .trimming-actions .first-visit-lead-btn:active::after { transform: translateX(3px); }
  .trimming-section .trimming-actions .first-visit-lead-btn:focus-visible { outline: 2px solid var(--color-main); outline-offset: -2px; }

  /* 動き：写真が裁ち落とし側（右端）から現れる。JSが動いたとき（body.motion-ready）だけ隠す */
  body.motion-ready .trimming-photo img {
    clip-path: inset(0 0 0 100%);
    transition: clip-path 1s cubic-bezier(.22, 1, .36, 1) .1s;
  }
  body.motion-ready .trimming-photo.is-visible img { clip-path: inset(0); }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  body.motion-ready .trimming-photo img { clip-path: none; transition: none; }
  .trimming-section .trimming-actions .first-visit-lead-btn::after { transition: none; }
  .trimming-section .trimming-actions .first-visit-lead-btn:hover::after,
  .trimming-section .trimming-actions .first-visit-lead-btn:active::after { transform: none; }
}

/* トリミング：最狭幅では説明文の行長を確保するためカード右の空きをなくす */
@media (max-width: 360px) {
  .trimming-body { margin-right: 0; }
}

/* トリミング：大きめのスマホ〜タブレット幅は写真を横長に（初めての方へと同じ） */
@media (min-width: 560px) and (max-width: 767px) {
  .trimming-photo { aspect-ratio: 16 / 9; }
}

/* アクセス（スマホ）：「来院のしおり」。地図を額装した主役にし（右上だけ64pxの角丸＋ずらした金の細枠＝強み・診療案内と同じ語彙）、
   その下に住所、最も濃い面として電話、静かな目録として駐車場・交通、最後に右端から差し込む帯の「詳しく見る」を置く。
   実用情報（住所・電話・駐車場・交通）は動かさない。iframeには触れない。PCは不変（全て≤767px内）。 */
@media (max-width: 767px) {
  .access-section .access-layout {
    grid-template-areas: "head" "map" "address" "tel" "parking" "transit" "link";
  }
  .access-section .access-section-head { margin-bottom: 0; }
  .access-section .access-info { display: contents; } /* 各行をレイアウトのグリッドに直接並べる */
  .access-section .access-info-title { display: none; } /* ヘッダーのロゴと重複するため */


  .access-section .access-info-block {
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: var(--gap-sm);
    align-items: start;
    padding: var(--gap-sm) 0;
    border-bottom: 1px solid var(--color-border);
  }
  .access-section .access-info-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin: 0;
    border-radius: 50%;
    background: var(--color-bg-section);
  }
  .access-section .access-info-icon img { width: 22px; height: 22px; }
  .access-section .access-info-copy { gap: 2px; padding-top: 1px; }
  .access-section .access-info-label { font-size: 14px; letter-spacing: .08em; }
  .access-section .access-info-value {
    font-size: 16px;
    line-height: 1.75;
    word-break: auto-phrase;
  }
  .access-section .access-info-block--address {
    grid-area: address;
    border-bottom: 0;
  }
  .access-section .access-info-block--address .access-info-value { font-size: 18px; line-height: 1.7; }
  .access-section .access-info-block--parking { grid-area: parking; }
  .access-section .access-info-block--transit { grid-area: transit; border-bottom: 0; }

  /* 電話も他の行（住所・駐車場・交通）と同じ見た目にする（ユーザー指示：電話だけ強調しない）。hrefは変えない */
  .access-section .access-info-block--tel { grid-area: tel; }
  .access-section .access-tel {
    display: inline-flex;
    align-items: center;
    min-height: 44px; /* タップ領域 */
    font-size: 20px;
    letter-spacing: .06em;
    white-space: nowrap;
  }
  .access-section .access-tel:focus-visible { outline: 2px solid var(--color-main); outline-offset: 2px; }

  /* 「詳しく見る」＝画面右端から差し込む濃色の帯（初めての方への左端の帯を反転）＋金の肉球 */
  .access-section .access-layout > .first-visit-lead-btn {
    grid-area: link;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: auto;
    height: auto;
    min-height: 48px;
    margin: var(--gap-md) calc(-1 * var(--container-sp)) 0 0;
    padding: 0 var(--container-sp) 0 var(--gap-md);
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    background: var(--color-main);
    color: var(--color-text-light);
    font-size: 16px;
    letter-spacing: .06em;
    white-space: nowrap;
  }
  .access-section .access-layout > .first-visit-lead-btn::after {
    content: '';
    width: 18px;
    height: 18px;
    background: url('../images/icons/paw-large-warm-gold.png') center / contain no-repeat;
    opacity: .9;
    transform: translateY(.5px);
    transition: transform .25s cubic-bezier(.22, 1, .36, 1);
  }
  .access-section .access-layout > .first-visit-lead-btn:hover { opacity: 1; background: var(--color-main-dark); }
  .access-section .access-layout > .first-visit-lead-btn:active::after { transform: translate(3px, .5px); }
  .access-section .access-layout > .first-visit-lead-btn:focus-visible { outline: 2px solid var(--color-main); outline-offset: 3px; }

  /* 動き（JSが動いたときだけ＝body.motion-ready）。実用情報は動かさない */
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .access-section .access-layout > .first-visit-lead-btn::after { transition: none; }
  .access-section .access-layout > .first-visit-lead-btn:active::after { transform: translateY(.5px); }
}


/* よくあるご質問（スマホ）：リスト・質問・答えの見た目は現行サイト（v3-home.css）と同じ。見出し周りの調整のみ試作側で持つ。 */
@media (max-width: 767px) {
  .faq-section { scroll-margin-top: 76px; } /* 固定ヘッダー73px。メニューの #faq で見出しが隠れないように */
  .faq-section .faq-layout { gap: var(--gap-lg); }
  .faq-section .faq-lead {
    color: var(--color-text);
    line-height: 1.9;
    word-break: auto-phrase;
  }
}

/* コラム（スマホ）：「読みものの目次」。最新1件＝写真全幅の表紙（右上だけ32pxの角＝FAQで開いた紙・電話カードと同値）、
   2・3件目＝文字左・写真右の目次の行、最後に「コラム一覧を見る」の行。押せる合図はFAQのトグルと同じ32pxの細い輪。
   HTMLは不変（teaserの<li>構造は docs/column-operations.md の運用対象）。表紙は :first-child なので記事追加で自動的に繰り上がる。
   地色は基底の白のまま（FAQ＝ベージュ→コラム＝白）。PCは不変（全て≤767px内）。 */
@media (max-width: 767px) {
  .column-section .column-section-head { text-align: center; margin-bottom: var(--gap-lg); } /* タイトル・イントロは中央揃え（ユーザー指示 2026-10-12） */
  .column-section .column-section-head .sec-line--center { margin-inline: auto; }
  .column-section .column-section-head__lead {
    max-width: none;
    margin: var(--gap-md) 0 0;
    color: var(--color-text);
    font-size: 16px;
    line-height: 1.9;
    word-break: auto-phrase;
  }

  .column-section .column-teaser-list { max-width: none; border-top: 0; }
  .column-section .column-teaser-item { position: relative; border-bottom: 0; }
  .column-section .column-teaser-item + .column-teaser-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--color-border);
    transform-origin: left center;
    pointer-events: none;
  }
  .column-section .column-teaser-link {
    gap: 6px 12px; /* 6px＝日付行とタイトルの間。--gap-sm だと離れすぎる */
    align-items: start;
    padding-block: var(--gap-md);
    color: var(--color-main);
    -webkit-tap-highlight-color: transparent;
  }
  .column-section .column-teaser-link:hover { color: var(--color-main); } /* 基底の金文字ホバーを止める */

  .column-section .column-teaser-item:first-child .column-teaser-link {
    grid-template-columns: auto minmax(0, 1fr) 32px; /* 32px＝矢印の輪（FAQのトグルと同寸） */
    grid-template-areas:
      "thumb thumb thumb"
      "date  cat   ."
      "title title arrow";
    padding-top: 0;
  }
  .column-section .column-teaser-item:not(:first-child) .column-teaser-link {
    grid-template-columns: auto minmax(0, 1fr) clamp(88px, 28vw, 120px); /* 写真幅：320px級で88px〜大きめのスマホで120px */
    grid-template-areas:
      "date  cat   thumb"
      "title title thumb"
      "title title arrow";
    grid-template-rows: auto auto 1fr;
  }
  .column-section .column-teaser-thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    background: var(--color-bg-soft);
  }
  .column-section .column-teaser-item:first-child .column-teaser-thumb {
    margin-bottom: 10px; /* 写真と日付行の間（gap 6px と合わせて16px） */
    border-radius: 0; /* 32px＝FAQで開いた紙・電話カードと同値 */
  }
  .column-section .column-teaser-item:not(:first-child) .column-teaser-thumb {
    border-radius: var(--radius-sm) 16px var(--radius-sm) var(--radius-sm); /* 表紙の32pxを小写真用に半分 */
  }
  .column-section .column-teaser-date {
    grid-area: date;
    align-self: center;
    font-size: 13px; /* 数値ラベル（お知らせ日付13pxと同じ扱い） */
    color: var(--color-text-body); /* muted(3.9:1)→6.4:1 */
    letter-spacing: .06em;
  }
  .column-section .column-teaser-cat {
    grid-area: cat;
    align-self: center;
    justify-self: start;
    margin-left: 0; /* 基底SPの margin-left:78px を解除 */
    padding: 1px 8px;
    font-size: 11px; /* チップの既存値・SP下限 */
  }
  .column-section .column-teaser-title {
    grid-area: title;
    margin-top: 2px;
    font-family: 'Noto Serif JP', serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.7;
    letter-spacing: .02em;
    color: var(--color-main);
    word-break: auto-phrase;
  }
  .column-section .column-teaser-item:first-child .column-teaser-title { font-size: 18px; line-height: 1.65; } /* h3のSP値 */
  .column-section .column-teaser-list > .column-teaser-item:first-child .column-teaser-title::before {
    top: -2px;
    margin-right: 8px;
    padding: 3px 7px;
    font-size: 11px;
  }
  .column-section .column-teaser-arrow {
    grid-area: arrow;
    align-self: end;
    justify-self: end;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(90, 56, 56, .28); /* FAQのトグルと同値 */
    border-radius: 50%;
    color: var(--color-main);
    font-size: 14px;
    line-height: 1;
    transition: background-color .25s ease, border-color .25s ease, color .25s ease, transform .25s cubic-bezier(.22, 1, .36, 1);
  }
  .column-section .column-teaser-link:hover .column-teaser-title {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .3em;
  }
  .column-section .column-teaser-link:hover .column-teaser-arrow,
  .column-section .column-teaser-link:active .column-teaser-arrow {
    background: var(--color-main);
    border-color: var(--color-main);
    color: var(--color-text-light);
    transform: none; /* 基底の translateX(3px) は輪が揺れて見えるため止める */
  }
  .column-section .column-teaser-link:focus-visible { outline: 2px solid var(--color-main); outline-offset: 4px; border-radius: var(--radius-sm); }

  .column-section .column-section-foot { margin-top: 0; text-align: left; border-top: 1px solid var(--color-border); }
  .column-section .column-section-foot .column-section-more {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    min-height: 64px; /* FAQの1問の行と同じ高さ */
    margin: 0;
    color: var(--color-main);
    font-size: 16px;
    letter-spacing: .04em;
  }
  .column-section .column-section-foot .column-section-more::after {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--color-main);
    background-size: 16px 16px; /* 肉球は基底と同寸。background一括指定はパスがずれるため使わない */
    opacity: 1;
    transform: none;
    transition: background-color .2s ease;
  }
  .column-section .column-section-foot .column-section-more:hover { color: var(--color-main); text-decoration: underline; text-underline-offset: .3em; }
  .column-section .column-section-foot .column-section-more:hover::after { background-color: var(--color-main-dark); transform: none; }
  .column-section .column-section-foot .column-section-more:focus-visible { outline: 2px solid var(--color-main); outline-offset: -2px; }
}

/* コラム：320px前後では行の文字幅が178pxしか取れず4行に崩れるため、写真＋日付・カテゴリを上段、タイトルを全幅の下段にする */
@media (max-width: 360px) {
  .column-section .column-teaser-item:not(:first-child) .column-teaser-link {
    grid-template-columns: 112px minmax(0, 1fr) 32px; /* 112px＝3:2で高さ75px。日付＋チップの2段とつり合う */
    grid-template-areas:
      "thumb date  date"
      "thumb cat   cat"
      "title title arrow";
    grid-template-rows: auto 1fr auto;
    row-gap: 4px;
  }
  .column-section .column-teaser-item:not(:first-child) .column-teaser-date { align-self: end; }
  .column-section .column-teaser-item:not(:first-child) .column-teaser-cat { align-self: start; }
  .column-section .column-teaser-item:not(:first-child) .column-teaser-title { margin-top: 10px; }
}

/* コラム：大きめのスマホ〜タブレット幅は表紙写真を横長に（初めての方へ・トリミング・アクセスと同じ） */
@media (min-width: 560px) and (max-width: 767px) {
  .column-section .column-teaser-item:first-child .column-teaser-thumb { aspect-ratio: 16 / 9; }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .column-section .column-teaser-arrow,
  .column-section .column-section-foot .column-section-more::after { transition: none; }
}


/* ③ イラスト・セクション境界・動き（移植元: illustrated-home.css） */

/* 2026-10-07: 写真と透過イラストを組み合わせたスマホ用draft。
   共通CSS・PC版には影響させず、このファイルで今回の変更を管理する。
   2026-10-09: 強みをaboutの4項目と1対1に（care/facility/dogrun/parking）。 */
:root {
  --color-notice: #B86E4B; /* 緊急時カードの注意アイコン専用（ユーザー指定・2026-10-12） */
  --color-bg-sand: #F5F0E7;  /* スマホ限定のセクション背景（当院について）。--color-bg と --color-bg-section の中間（承認 2026-10-13） */
  --color-bg-peach: #F5E8DF; /* スマホ限定のセクション背景（トリミング）。やわらかい桃色（承認 2026-10-13） */
}
.draft-urgent-phone,
.draft-urgent-notice,
.draft-illustration,
.draft-about-scene,
.draft-faq-scene { display: none; }

.home-illustrated .reason-card-heading { display: contents; }
.reason-card--care img { object-position: center 58%; }
.reason-card--dogrun img { object-position: 60% 50%; }

@media (max-width: 767px) {
  .home-illustrated {
    --illustrated-photo-radius: 24px;
  }
  .home-illustrated .draft-illustration {
    display: block;
    height: auto;
    object-fit: contain;
    pointer-events: none;
  }
  .home-illustrated .fv__frame { border-radius: var(--radius-lg); }
  .home-illustrated .visit-info-section { padding-bottom: calc(var(--section-y-sp) + var(--gap-md)); }
  .home-illustrated .visit-hours { position: relative; }

  /* 広めの導入余白と1つの場面。 */
  .home-illustrated .reasons {
    position: relative;
    padding-block: var(--section-y-sp) calc(var(--section-y-sp) + var(--gap-md));
  }
  .home-illustrated .reasons::after { display: none; }
  .home-illustrated .reasons-intro__title { font-size: 22px; line-height: 1.8; font-weight: 600; letter-spacing: .02em; }
  .home-illustrated .reasons-intro__text { max-width: 30em; margin: var(--gap-md) auto 0; color: var(--color-text-body); font-size: 16px; line-height: 2; }
  .home-illustrated .draft-about-scene { display: block; position: absolute; z-index: 1; right: calc(var(--container-sp) - 16px); top: -84px; margin: 0; }
  .home-illustrated .draft-about-play { width: 208px; }
  .home-illustrated .reasons { padding-top: calc(var(--section-y-sp) + var(--gap-lg)); }
  .home-illustrated .reasons-intro { margin-bottom: var(--gap-lg); }

  /* 強み：数字と見出しをブラウンの帯にまとめ、写真下端で左右交互に配置。 */
  .home-illustrated .reason-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--gap-sm);
  }
  .home-illustrated .reason-card-body { display: contents; }
  .home-illustrated .reason-card-photo,
  .home-illustrated .reason-card:nth-child(even) .reason-card-photo {
    grid-area: 1 / 1;
    justify-self: center;
    align-self: stretch;
    transform: none;
  }
  .home-illustrated .reason-card-photo > img { position: absolute; inset: 0; }
  .home-illustrated .reason-card-photo::after { background: var(--photo-tone-overlay); }
  .home-illustrated .reason-card-heading {
    grid-area: 1 / 1;
    display: flex;
    align-items: center;
    align-self: end;
    justify-self: start;
    z-index: 1;
    gap: calc(var(--gap-md) / 2);
    max-width: calc(100% - 10px);
    margin: 0 5px var(--gap-sm);
    padding: calc(var(--gap-sm) / 2) var(--gap-sm);
    background: var(--color-main);
    /* 帯を少し透かして写真になじませる（白文字のコントラストは写真が白でも約5.7:1）。 */
    background: color-mix(in srgb, var(--color-main) 80%, transparent);
    color: var(--color-surface);
  }
  /* 番号は枠なしの大きな白い数字にして、写真の上の角に重ねる（奇数＝左上、偶数＝右上）。
     写真が明るくても読めるよう、影を付ける。全カード共通。 */
  .home-illustrated .reason-card-num {
    position: absolute;
    z-index: 2;
    top: calc(var(--gap-sm) / 2);
    left: calc(var(--gap-sm) * .75);
    margin: 0;
    padding: 0;
    background: none;
    color: var(--color-surface);
    font-family: 'Lora', serif;
    font-size: 44px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: .02em;
    text-shadow: 0 1px 10px rgba(44, 32, 23, .6), 0 0 3px rgba(44, 32, 23, .4);
  }
  .home-illustrated .reason-card:nth-child(even) .reason-card-num {
    left: auto;
    right: calc(var(--gap-sm) * .75);
  }
  .home-illustrated .reason-card-num::after { display: none; }
  .home-illustrated .reason-card-title {
    margin: 0;
    color: inherit;
    /* 写真の帯見出しは、ユーザー指定により柔らかいゴシック体に。 */
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    /* 見出しは改行せず1行。最長（13字）が最狭幅でも収まるよう、画面幅が狭いときだけ縮める。 */
    font-size: min(18px, 4.8vw);
    white-space: nowrap;
    line-height: 1.6;
    text-shadow: none;
  }
  .home-illustrated .reason-card:nth-child(even) .reason-card-heading {
    justify-self: end;
  }
  .home-illustrated .reason-card-text { grid-area: 2 / 1; text-align: left; }
  .home-illustrated .reason-card-link {
    grid-area: 3 / 1;
    justify-self: start;
    margin-top: 0;
    min-height: 44px;
  }
  /* 写真・帯見出し・リンク行をタップ領域にする（リンクは1つのまま）。本文は押せない範囲。 */
  .home-illustrated .reason-card { position: relative; }
  .home-illustrated .reason-card-link {
    -webkit-tap-highlight-color: transparent;
  }
  .home-illustrated .reason-card-link::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
  }
  .home-illustrated .reason-card-text { position: relative; z-index: 3; }
  .home-illustrated .reason-card-link:focus-visible { outline: none; }
  .home-illustrated .reason-card-link:focus-visible::before {
    outline: 2px solid var(--color-main);
    outline-offset: 4px;
    border-radius: var(--illustrated-photo-radius);
  }
  .home-illustrated .reason-card:active .reason-card-link::after {
    opacity: .95;
    transform: translate(3px, .5px);
  }

  /* 診療案内の上下余白 */
  .home-illustrated .care-section {
    padding-block: var(--section-y-sp) calc(var(--section-y-sp) + var(--gap-md));
  }
  /* 症状→診療案内は挿絵ぶん広くなるため、診療案内の上を少し詰めて他の境目（約185px）に近づける */
  .home-illustrated .care-section { padding-top: calc(var(--section-y-sp) - var(--gap-sm)); }

  /* 来院の手引きは軽い罫線と写真。見出しの濃い帯を外す。 */
  .home-illustrated .first-visit { padding-block: calc(var(--section-y-sp) + var(--gap-sm)) calc(var(--section-y-sp) + var(--gap-md)); }
  .home-illustrated .first-visit-layout { grid-template-columns: minmax(0, 1fr) clamp(106px, calc(100vw - 212px), 160px); grid-template-areas: 'sub guest' 'title guest' 'text text' 'points points' 'photo photo'; column-gap: var(--gap-sm); }
  .home-illustrated .draft-first-visitor { grid-area: guest; width: 100%; align-self: center; }
  .home-illustrated .first-visit-lead-sub { align-self: end; }
  .home-illustrated .first-visit-lead-text { margin-block: var(--gap-md) var(--gap-lg); }
  .home-illustrated .first-visit-lead-text br { display: none; }
  .home-illustrated .first-visit-points { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-md) var(--gap-sm); }
  .home-illustrated .first-visit-point { display: block; min-width: 0; padding: var(--gap-sm); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
  .home-illustrated .first-visit-point-icon { display: block; width: 100px; height: 100px; max-width: 100%; margin: 0 auto var(--gap-sm); background: none; border-radius: 0; }
  .home-illustrated .first-visit-point-icon picture { display: block; }
  .home-illustrated .first-visit-point-icon img { width: 100%; height: 100px; object-fit: contain; }
  .home-illustrated .first-visit-point:nth-child(2) .first-visit-point-icon { width: 128px; }
  .home-illustrated .first-visit-point-title { width: 100%; justify-self: stretch; text-align: center; }
  .home-illustrated .first-visit-point-text { margin-top: 12px; font-size: 14px; line-height: 1.85; }
  /* 緊急時の案内：本文を読みやすくし、電話の操作を独立したボタンにする。 */
  .home-illustrated .first-visit-point--urgent {
    grid-column: 1 / -1;
    background: var(--color-surface);
    border: 1px solid color-mix(in srgb, var(--color-main) 20%, transparent);
    padding: var(--gap-md) var(--gap-sm) var(--gap-sm);
  }
  .home-illustrated .first-visit-point--urgent .first-visit-point-icon { display: none; }
  .home-illustrated .first-visit-point--urgent .first-visit-point-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--gap-sm) / 2);
    text-align: center;
  }
  /* ユーザー指定：注意アイコンは茶色以外。くすみオレンジを小さな装飾に限定（--color-notice は本ファイルの :root で定義）。 */
  .home-illustrated .draft-urgent-notice {
    position: relative;
    display: inline-block;
    flex: 0 0 var(--gap-md);
    width: var(--gap-md);
    height: var(--gap-md);
    border: 0;
    border-radius: 50%;
    background: var(--color-notice);
  }
  /* 記号を図形で描き、フォントのベースラインによる中心のずれを避ける。 */
  .home-illustrated .draft-urgent-notice::before,
  .home-illustrated .draft-urgent-notice::after {
    content: '';
    position: absolute;
    left: 50%;
    width: 10%;
    background: var(--color-text-light);
    transform: translateX(-50%);
  }
  .home-illustrated .draft-urgent-notice::before { top: 25%; height: 33.333%; border-radius: var(--radius-sm); }
  .home-illustrated .draft-urgent-notice::after { bottom: 25%; height: 10%; border-radius: 50%; }
  .home-illustrated .first-visit-point--urgent .first-visit-point-text {
    margin-top: calc(var(--gap-sm) / 2);
    font-size: 16px;
    line-height: 1.8;
    text-align: center;
    text-wrap: balance;
  }
  .home-illustrated .draft-urgent-instruction {
    display: inline;
    color: var(--color-main);
    font-weight: 500;
  }
  .home-illustrated .draft-urgent-phone {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--gap-sm) / 2);
    min-height: 44px;
    margin-top: var(--gap-sm);
    padding: calc(var(--gap-sm) / 2) var(--gap-sm);
    border-radius: var(--radius-md);
    background: var(--color-main);
    color: var(--color-text-light);
    text-decoration: none;
  }
  /* アイコンは左端に置き、番号をボタンの中央に揃える。 */
  .home-illustrated .draft-urgent-phone-icon {
    position: absolute;
    left: var(--gap-sm);
    top: 50%;
    transform: translateY(-50%);
    flex: 0 0 2rem;
    width: 2rem;
    height: 2rem;
    background: currentColor;
    -webkit-mask: url('../images/icons/icon-access-phone.png') center / contain no-repeat;
    mask: url('../images/icons/icon-access-phone.png') center / contain no-repeat;
  }
  .home-illustrated .draft-urgent-phone-copy { display: grid; text-align: center; }
  .home-illustrated .draft-urgent-phone-label { font: 400 12px/1.7 'Noto Sans JP', sans-serif; }
  .home-illustrated .draft-urgent-phone-number { font: 400 24px/1.6 'Lora', serif; letter-spacing: 0; white-space: nowrap; }
  .home-illustrated .draft-urgent-phone:hover { background: var(--color-main-dark); }
  .home-illustrated .draft-urgent-phone:focus-visible { outline: 2px solid var(--color-main); outline-offset: 4px; }
  .home-illustrated .first-visit-point-title { margin: 0; padding: 0; background: none; color: var(--color-main); }
  .home-illustrated .first-visit-mobile-photo { margin: var(--gap-lg) 0 0; border-radius: var(--illustrated-photo-radius); overflow: hidden; }
  .home-illustrated .first-visit-mobile-photo::before { display: none; }
  .home-illustrated .first-visit .first-visit-lead > .first-visit-lead-btn { border-radius: var(--radius-lg) 0 0 0; background: var(--color-bg); padding-inline: var(--gap-sm); }
  .home-illustrated .first-visit .first-visit-lead > .first-visit-lead-btn::before { display: none; }

  .home-illustrated .trimming-section { padding-block: calc(var(--section-y-sp) + var(--gap-lg)) calc(var(--section-y-sp) + var(--gap-md)); } /* 上96／下80px */
  .home-illustrated .trimming-head { position: relative; }
  .home-illustrated .draft-trimming-dog { position: absolute; z-index: 1; right: var(--container-sp); top: calc(-1 * (var(--gap-lg) + var(--gap-md))); width: 164px; margin: 0; }
  .home-illustrated .trimming-photo { margin: var(--gap-md) 0 0; border-radius: var(--illustrated-photo-radius); }
  .home-illustrated .trimming-photo::before { display: none; }
  .home-illustrated .trimming-body { margin: calc(-1 * var(--gap-sm)) var(--gap-sm) 0; overflow: visible; background: var(--color-surface); }
  .home-illustrated .trimming-card-title { padding: var(--gap-md) var(--gap-md) 0; color: var(--color-main); background: transparent; }
  .home-illustrated .trimming-paw { display: none; }
  .home-illustrated .trimming-lead { padding-top: var(--gap-sm); }
  .home-illustrated .access-section-head { position: relative; min-height: 148px; padding-block: var(--gap-lg) var(--gap-md); }
  .home-illustrated .draft-access-walk { position: absolute; right: 0; bottom: 0; width: 176px; }
  .home-illustrated .access-map-frame { border-radius: var(--illustrated-photo-radius); }
  .home-illustrated .access-map::before { display: none; }
  .home-illustrated .draft-faq-scene { display: block; position: absolute; z-index: 1; left: var(--container-sp); top: -80px; margin: 0; }
  .home-illustrated .access-section { padding-bottom: calc(var(--section-y-sp) + var(--gap-lg)); }
  .home-illustrated .faq-section { padding-top: calc(var(--section-y-sp) + var(--gap-lg) + var(--gap-md)); padding-bottom: calc(var(--section-y-sp) + var(--gap-md)); }
  .home-illustrated .draft-faq-explanation { width: 176px; }
}

@media (max-width: 767px) {
  .home-illustrated .column-section .column-teaser-item:first-child .column-teaser-thumb { border-radius: var(--radius-lg); }
  .home-illustrated .column-section .column-teaser-item:not(:first-child) .column-teaser-thumb { border-radius: var(--radius-sm); }
}

/* セクション境界：面の色と浅い波形でつなぐ。線や角丸の輪郭は残さない。 */
@media (max-width: 767px) {
  .home-illustrated {
    --section-wave-height: var(--gap-lg);
  }
  .home-illustrated .visit-info-section { background: var(--color-bg); border: 0; }
  .home-illustrated .reasons { --section-surface: var(--color-bg-sand); }
  .home-illustrated .first-visit { --section-surface: var(--color-bg); }
  .home-illustrated .trimming-section { --section-surface: var(--color-bg-peach); }
  .home-illustrated .access-section { --section-surface: var(--color-bg); }
  .home-illustrated .faq-section { --section-surface: var(--color-bg-section); }
  .home-illustrated .column-section { --section-surface: var(--color-bg); }

  .home-illustrated :is(.reasons, .first-visit, .trimming-section, .access-section, .faq-section, .column-section) {
    position: relative;
    isolation: isolate;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: var(--section-surface);
  }
  .home-illustrated :is(.reasons, .first-visit, .trimming-section, .access-section, .faq-section, .column-section)::before {
    content: '';
    display: block;
    position: absolute;
    inset: auto 0 calc(100% - 1px);
    width: 100%;
    height: var(--section-wave-height);
    background: var(--section-surface);
    border: 0;
    border-radius: 0;
    pointer-events: none;
    -webkit-mask: url('../images/decor/wave-soft.svg') center / 100% 100% no-repeat;
    mask: url('../images/decor/wave-soft.svg') center / 100% 100% no-repeat;
  }
  .home-illustrated :is(.trimming-section, .faq-section)::before {
    -webkit-mask-image: url('../images/decor/wave-return.svg');
    mask-image: url('../images/decor/wave-return.svg');
  }
  /* アイボリー面に抜ける写真リンクもセクション背景と揃える。 */
  .home-illustrated .first-visit .first-visit-lead > .first-visit-lead-btn { background: var(--section-surface); }
  .home-illustrated .site-footer { border-top: 0; background: var(--color-bg-section); }
}

/* 小さな診療アイコンは画像生成した丸い線端の透過PNGで統一。 */

/* =====================================================
   スマホの動きを統一（2026-10-12・draft）
   文章・カード＝下から12px＋フェード(.7s) ／ 線・帯・ボタン＝左から引く(.8s) ／ 写真＝絞った状態から開く(.9s)
   順次表示の間隔は .08s・最大3段。JS無効・動きを減らす設定では全て静止して表示される。
   ===================================================== */
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  :root {
    --mo-rise: 12px;
    --mo-ease: cubic-bezier(.22, 1, .36, 1);
  }

  /* 文章・カード：種類を1つに（左右スライド・拡大は廃止） */
  body.motion-ready .motion-reveal,
  body.motion-ready .motion-reveal--left,
  body.motion-ready .motion-reveal--right,
  body.motion-ready .motion-reveal--scale,
  body.motion-ready .trimming-section .motion-reveal,
  body.motion-ready .trimming-section .motion-reveal--left,
  body.motion-ready .trimming-section .motion-reveal--right,
  body.motion-ready .trimming-section .motion-reveal--scale {
    transform: translateY(var(--mo-rise));
    transition: opacity .7s ease, transform .7s var(--mo-ease);
    transition-delay: var(--motion-delay, 0s);
  }
  body.motion-ready .motion-reveal--fade { transform: none; transition: opacity .7s ease; transition-delay: var(--motion-delay, 0s); }
  body.motion-ready .motion-reveal.is-visible,
  body.motion-ready .trimming-section .motion-reveal.is-visible { transform: none; }

  .home-illustrated .reason-card { transform: translateY(var(--mo-rise)); transition: opacity .7s ease, transform .7s var(--mo-ease); }
  .home-illustrated .reason-card.is-visible { transform: none; }
  .home-illustrated .reason-card-body { transform: none; transition: none; }

  /* 線：左から引く（時間 .8s・同じイージング） */
  /* 初めての方への見出しは左ワイプをやめ、カードと一緒に下からフェード（他セクションと同じ） */
  body.motion-ready .first-visit-point .first-visit-point-title { clip-path: none; transition: none; }
  /* アクセスの「詳しく見る」は clip-path で全面を切ると IntersectionObserver が交差を検知できず出なくなるため、他と同じ下からフェードにする */

  /* 写真：少し絞った状態から開く（強み・初めての方へ・トリミング・コラム共通） */
  body.motion-ready .trimming-photo img,
  body.motion-ready .first-visit-visual img,
  .home-illustrated .reason-card-photo > img,
  body.motion-ready .column-section .column-teaser-item.motion-reveal:first-child .column-teaser-thumb {
    clip-path: inset(4% 4% 4% 4% round var(--radius-lg));
    transition: clip-path .9s var(--mo-ease);
  }
  body.motion-ready .trimming-photo.is-visible img,
  body.motion-ready .first-visit-visual.is-visible img,
  .home-illustrated .reason-card.is-visible .reason-card-photo > img,
  body.motion-ready .column-section .column-teaser-item.motion-reveal.is-visible:first-child .column-teaser-thumb { clip-path: inset(0 round var(--radius-lg)); }

  /* コラム：スクロール連動をやめ、他と同じ「出たら1回」に。motion-reveal を付けていない <li>（旧ひな形で追加した記事）は動かさず静止表示にする */
  body.motion-ready .column-section .column-teaser-item + .column-teaser-item.motion-reveal::before {
    transform: scaleX(0);
    transition: transform .8s var(--mo-ease);
    transition-delay: calc(var(--motion-delay, 0s) + .1s);
  }
  body.motion-ready .column-section .column-teaser-item.motion-reveal.is-visible::before { transform: scaleX(1); }
}


/* ④ 症状セクション（移植元: symptoms-entry.css） */

/* 症状検索のトップ入口：draftと比較モックで共用。 */
.symptom-entry{position:relative;isolation:isolate;background:var(--color-bg);padding-block:var(--section-y-pc);color:var(--color-main)}
.entry-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-areas:'heading visual' 'actions visual';column-gap:var(--gap-lg);max-width:calc(var(--container-max) - var(--gap-lg)*4);padding-inline:var(--gap-lg);align-items:center}
.entry-heading{grid-area:heading}.entry-kicker{display:block;font:11px 'Lora',serif;letter-spacing:.22em;color:var(--color-accent);margin-bottom:var(--gap-sm)}
.entry-heading h2{font-weight:500;line-height:1.7;letter-spacing:.05em}.entry-heading p{font-size:inherit;line-height:1.9;color:var(--color-text);margin-top:var(--gap-md)}.entry-sp{display:none}
.entry-visual{grid-area:visual;position:relative;isolation:isolate;aspect-ratio:1.25;min-width:0;margin-block:var(--gap-sm)}
.entry-backdrop{position:absolute;inset:23% 0 5%;border-radius:50%;background:var(--color-bg-section);z-index:-1}
.entry-visual img{position:absolute;object-fit:contain;height:auto}.entry-dog{width:70%;left:-8%;bottom:0}.entry-cat{width:58%;right:-5%;bottom:1%}
.entry-note{position:absolute;z-index:1;font-size:inherit;line-height:1.6;letter-spacing:.04em;text-align:center;color:var(--color-main);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--gap-sm);padding:calc(var(--gap-sm)/2) calc(var(--gap-sm)*.75);min-height:calc(var(--gap-lg) + var(--gap-sm)/2);display:flex;align-items:center;gap:calc(var(--gap-sm)/4);white-space:nowrap}

.entry-note--dog{left:4%;top:0}.entry-note--cat{right:4%;top:10%}
.entry-actions{grid-area:actions;margin-top:var(--gap-md)}
.entry-search{display:flex;align-items:center;justify-content:center;gap:var(--gap-sm);width:100%;min-height:calc(var(--gap-lg) + var(--gap-md));padding:var(--gap-sm) var(--gap-md);border:1px solid var(--color-main);border-radius:100vmax;background:var(--color-main);color:var(--color-surface);font:inherit;cursor:pointer}
.entry-search:hover{background:var(--color-main-dark)}.entry-search-icon{width:1em;height:1em;border:1.5px solid currentColor;border-radius:50%;position:relative;margin-right:.2em}.entry-search-icon::after{content:'';position:absolute;left:85%;top:85%;width:.45em;height:1.5px;transform:rotate(45deg);transform-origin:left;background:currentColor}
.entry-search{margin-top:var(--gap-md)}.entry-direct{margin-top:0}.entry-direct p{font:inherit;color:var(--color-text);margin-bottom:calc(var(--gap-sm)/2)}
.entry-direct ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(var(--gap-sm)/2);list-style:none;padding:0;margin:0}
.entry-direct li{min-width:0}
.entry-direct a,.entry-direct button{display:flex;justify-content:center;gap:calc(var(--gap-sm)/2);align-items:center;width:100%;height:100%;min-height:calc(var(--gap-lg) + var(--gap-sm)/2);padding:calc(var(--gap-sm)/2) calc(var(--gap-sm)*.75);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface);color:var(--color-main);font:inherit;text-align:left;line-height:1.6;cursor:pointer}

.entry-direct a:hover,.entry-direct button:hover,.entry-note:hover{background:var(--color-bg-section)}
.entry-search:focus-visible,.entry-direct a:focus-visible,.entry-direct button:focus-visible,.entry-note:focus-visible{outline:2px solid var(--color-main);outline-offset:4px}
@media(max-width:767px){
 .symptom-entry{padding-block:calc(var(--section-y-sp) + var(--gap-lg)) calc(var(--section-y-sp) + var(--gap-md))}
 .entry-layout{grid-template-columns:minmax(0,1fr);grid-template-areas:'heading' 'visual' 'actions';padding-inline:var(--container-sp);max-width:32rem}
 .entry-heading{text-align:center}.entry-heading p{margin-top:var(--gap-sm)}.entry-sp{display:block}
 .entry-visual{width:100%;max-width:18rem;margin:var(--gap-sm) auto 0;aspect-ratio:1.25}
 .entry-note{font-size:16px}.entry-note--dog{top:0;left:0}.entry-note--cat{top:10%;right:0}
 .entry-dog{width:60%;left:-1%}.entry-cat{width:50%;right:0}
 .entry-actions{margin-top:var(--gap-sm)}.entry-search{min-height:calc(var(--gap-lg) + var(--gap-sm))}
 .entry-direct p{text-align:center}.entry-direct a,.entry-direct button{padding-inline:calc(var(--gap-sm)/2)}
 .symptom-entry::before{content:'';position:absolute;inset:auto 0 calc(100% - 1px);height:var(--gap-lg);background:var(--color-bg);mask:url('../images/decor/wave-return.svg') center/100% 100% no-repeat;-webkit-mask:url('../images/decor/wave-return.svg') center/100% 100% no-repeat}
}



/* 専用ページへの入口：虫眼鏡・中央の文字・矢印でリンクを示す。 */
.entry-search-label{grid-column:2;text-align:center;text-decoration:none}
.entry-search-arrow{grid-column:3;justify-self:end;margin-left:0;font-size:1.2em;line-height:1}
.entry-search-icon{grid-column:1;justify-self:start;flex-shrink:0}
.entry-search{display:grid;grid-template-columns:1.25em minmax(0,1fr) 1.25em;gap:calc(var(--gap-sm)/2)}

/* 症状ラベルとイラストをつなぐ折れ線。 */
.entry-note{border-radius:var(--radius-lg)}
.entry-pointer{position:absolute;inset:0;pointer-events:none;z-index:0;color:color-mix(in srgb,var(--color-main) 55%,var(--color-bg))}
.entry-pointer-vertical,.entry-pointer-horizontal{position:absolute;background:currentColor;border-radius:var(--radius-sm)}
.entry-pointer-vertical{width:1px}.entry-pointer-horizontal{height:1px}
.entry-pointer-dot{position:absolute;width:calc(var(--gap-sm)/3);height:calc(var(--gap-sm)/3);background:currentColor;border:1px solid var(--color-bg);border-radius:50%;transform:translate(-50%,-50%)}

/* draftへ挿入した後の境界と仮案内。 */
/* ボタンをリンク（a）にしたため、下線・文字色を明示 */
a.entry-search{text-decoration:none;color:var(--color-surface)}


/* ⑤ 診療案内（移植元: services-section.css） */

/* 採用B案と比較モックで共有する診療案内。既存の余白トークンを使用。 */
.care-section { --care-tap: calc(var(--gap-lg) + var(--gap-sm)/4); }
.care-heading h2 { font-size: 1.875rem; line-height: 1.6; font-weight: 500; }
.care-section { position: relative; background: var(--color-bg-section); margin-top: var(--gap-lg); }
.care-section::before { content: ''; position: absolute; inset: auto 0 calc(100% - 1px); height: var(--gap-lg); background: inherit; mask: url('../images/decor/wave-soft.svg') center / 100% 100% no-repeat; -webkit-mask: url('../images/decor/wave-soft.svg') center / 100% 100% no-repeat; }
.care-layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: calc(var(--gap-lg)*2); max-width: calc(var(--container-max) - var(--gap-lg)*4); padding-inline: var(--gap-lg); align-items: start; }
.care-lead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--gap-md); }
.care-heading :is(h1, h2) { color: var(--color-main); }
.care-heading { grid-column: 1 / -1; }
.care-kicker { display: block; font: .875rem 'Lora', serif; letter-spacing: .22em; color: var(--color-accent); margin-bottom: calc(var(--gap-sm)/2); }
.care-intro { grid-column: 1 / -1; max-width: 40em; line-height: 1.8; }
.care-illustration { grid-column: 1 / -1; grid-row: 3; width: 65%; height: auto; justify-self: center; }
.care-portal { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-sm); min-height: var(--care-tap); color: var(--color-main); }
.care-portal-title { display: block; font: 500 1.25rem/1.6 'Noto Serif JP', serif; }
.care-portal-caption { display: block; color: var(--color-text-body); font-size: .875rem; margin-top: calc(var(--gap-sm)/4); }
.care-portal--b { padding: var(--gap-md); margin-bottom: var(--gap-md); border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg); background: var(--color-surface); }
.care-portal--b > span:first-of-type { flex: 1; }
.care-portal--b img { width: calc(var(--gap-lg) + var(--gap-sm)); height: auto; }
.care-panel { background: var(--color-surface); border-radius: var(--radius-lg); }
.care-list { list-style: none; padding: calc(var(--gap-sm)/2) var(--gap-md); margin: 0; }
.care-list li + li { border-top: 1px solid var(--color-border); }
.care-row { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--gap-sm)/2); min-height: calc(var(--gap-lg) + var(--gap-md)); padding-block: var(--gap-sm); color: var(--color-text); }
.care-arrow { flex: 0 0 auto; color: inherit; font-family: 'Lora', serif; }
.care-row[href]:hover { color: var(--color-main); background: var(--color-bg); }
.care-portal:hover { color: var(--color-main); background: var(--color-bg); }
.care-portal--b { transition: background-color .2s; }
.care-section a:focus-visible { outline: 2px solid var(--color-main); outline-offset: var(--radius-sm); }

/* 現行draftの線画アイコンを、対応する項目に残す。
   未制作の項目は空き列で文字位置をそろえ、別の診療を示す絵を流用しない。 */
.care-section .care-row { display: grid; grid-template-columns: calc(var(--gap-lg) + var(--gap-md)/2) minmax(0, 1fr) max-content; column-gap: calc(var(--gap-sm)/2); min-height: calc(var(--gap-lg) + var(--gap-sm)*2); padding-block: calc(var(--gap-sm)/2); }
.care-row-icon { width: calc(var(--gap-lg) + var(--gap-md)/2); height: calc(var(--gap-lg) + var(--gap-md)/2); padding: var(--radius-md); object-fit: contain; }
.care-row-label { min-width: 0; line-height: 1.6; }
.care-row > .care-arrow { justify-self: end; }
.home-illustrated .care-section { margin-top: 0; }
@media (max-width: 767px) {
 .care-heading h2 { font-size: 1.5rem; }
 .care-layout { display: block; padding-inline: var(--container-sp); }
 .care-lead { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-md) var(--gap-sm); margin-bottom: var(--gap-md); }
 .care-heading { grid-column: 1; grid-row: 1; }
 .care-illustration { grid-column: 2; grid-row: 1; width: 100%; }
 .care-intro { grid-row: 2; }
  .care-portal-title { font-size: 1.125rem; }
 .care-portal--b { padding: var(--gap-sm); }
 .care-list { padding-inline: var(--gap-sm); }
}