@charset "UTF-8";
/*
Theme Name: Cocoon Child (Pet Disease Search)
Template:   cocoon-master
Version:    2.0.0
Description: 犬猫の病気検索。トップ・一覧はラシーク風（薄いグレー地に白いカード・オレンジと緑の2色）、記事ページは Airbnb 風の色合い（改善計画 3-2）
*/

/* ==========================================================================
   基本
   - トップ・一覧・検索: 青みのある薄いグレーの地に白いカード、下だけに落ちる影、オレンジ（ロゴ）と緑（ロゴの葉）
   - 記事・固定ページ・404（body.pet-article）: 白地・濃いグレーの文字・細い灰色の線（.article-layout の中）
   ========================================================================== */

:root {
  --text: #424952;
  --muted: #94a3a9;
  --line: #d6e3e5;
  --bg: #f3f7f7;
  --white: #ffffff;
  --orange: #f0743a;
  --orange-dark: #d65a20;
  --orange-pale: #ffe9dc;
  --orange-soft: #fff4ec;
  --green: #14a888;
  --green-dark: #0f8a70;
  --green-pale: #e2f4ef;
  --urgent: #e0483e;
  --radius: 6px;
  --shadow: 0 4px 0 0 rgba(66, 73, 82, 0.1);
  --shadow-sm: 0 2px 0 0 rgba(66, 73, 82, 0.1);
  /* 日本語Webフォントは1〜3MB級のため読み込まず、OS標準の日本語ゴシックを使う */
  --font: "游ゴシック体", YuGothic, "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --font-ui: system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif;
  --font-en: Futura, "Century Gothic", "Trebuchet MS", sans-serif;

  /* 記事ページ（Airbnb 風の色合い） */
  --a-ink: #222222;
  --a-sub: #6a6a6a;
  --a-line: #dddddd;
  --a-line-soft: #ebebeb;
  --a-bg: #f7f7f7;
  --a-grad: linear-gradient(90deg, #ee8a43 0%, #e2662a 50%, #d24f1a 100%);
  --a-urgent: #c13515;
}

* { box-sizing: border-box; }
body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-weight: 500; font-size: 15px; line-height: 1.8; letter-spacing: 0.03em; }
body.pet-article { background: var(--white); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }
button { font: inherit; color: inherit; }
svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.visually-hidden, .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* 丸いアイコン */
.ico { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--green); color: #fff; font-style: normal; }
.ico svg { width: 14px; height: 14px; stroke-width: 2.4; }
.ico-char { font-size: 0.7rem; font-weight: 700; line-height: 1; letter-spacing: 0; }
.ico-orange { background: var(--orange); }
.ico-line svg { width: 26px; height: 26px; stroke-width: 1.5; color: var(--text); }

/* ==========================================================================
   ヘッダー（追従）
   ========================================================================== */
.site-header { position: sticky; top: 0; z-index: 60; background: var(--white); box-shadow: 0 2px 0 rgba(66, 73, 82, 0.06); }
.admin-bar .site-header { top: 32px; }
.header-top { display: flex; align-items: center; height: 80px; padding-left: 28px; }
.site-logo { flex: none; }
.site-logo img { display: block; height: 56px; width: auto; }
.header-brand { flex: 1; padding-left: 24px; }
.header-catch { margin: 0; font-size: 0.72rem; font-weight: 700; line-height: 1.5; color: var(--orange-dark); }
.header-count { margin: 0 24px 0 0; text-align: right; font-size: 0.7rem; line-height: 1.5; }
.header-count span { font-size: 0.75rem; }
.header-count b { font-family: var(--font-en); font-size: 1.5rem; font-weight: 500; color: var(--orange-dark); letter-spacing: 0; }
.header-btn { display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; border: 0; cursor: pointer; }
.header-btn-search { background: var(--green); color: #fff; }
.header-btn-search[aria-expanded="true"] { background: var(--green-dark); }
.header-btn-search svg { width: 26px; height: 26px; stroke-width: 2.6; }

.header-nav { display: flex; justify-content: center; background: var(--bg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.header-nav a { display: flex; align-items: center; gap: 10px; padding: 12px 34px; font-size: 0.86rem; font-weight: 700; border-left: 1px solid var(--line); }
.header-nav a:last-child { border-right: 1px solid var(--line); }

/* 検索窓（ヘッダーの検索ボタンで開く） */
.header-search { padding: 14px 20px; background: var(--white); border-bottom: 1px solid var(--line); }
.header-search-form, .page-search { display: flex; max-width: 640px; margin: 0 auto; }
.header-search-form input, .page-search input { flex: 1; min-width: 0; height: 46px; padding: 0 14px; border: 1px solid var(--line); border-right: 0; border-radius: 4px 0 0 4px; background: var(--bg); font: inherit; font-size: 16px; }
.header-search-form button, .page-search button { width: 52px; border: 0; border-radius: 0 4px 4px 0; background: var(--green); color: #fff; cursor: pointer; }
.header-search-form svg, .page-search svg { width: 20px; height: 20px; stroke-width: 2.4; }

/* スマホのハンバーガーメニュー（PCでは出さない） */
.header-menu, .sp-menu { display: none; }
.header-menu { flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 56px; height: 56px; margin-left: auto; border: 0; background: none; cursor: pointer; }
.header-menu span { display: block; width: 22px; height: 2px; border-radius: 1px; background: var(--text); transition: transform 0.2s, opacity 0.2s; }
.header-menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.header-menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.header-menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   犬・猫フィルタ（トップの各ブロック。footer.php のスクリプトで切り替える）
   ========================================================================== */
.pet-filter, .pet-tabs { display: inline-flex; padding: 3px; background: var(--bg); border: 1px solid var(--line); border-radius: 20px; }
.pet-filter button, .pet-tab { white-space: nowrap; min-width: 3.6em; padding: 2px 12px; border: 0; border-radius: 16px; background: transparent; color: var(--text); font-size: 0.78rem; font-weight: 700; line-height: 1.8; text-align: center; cursor: pointer; }
.pet-filter button[aria-pressed="true"], .pet-tab.active { background: var(--green); color: #fff; }
[data-filter-scope] [data-for] { display: none; }
[data-filter-scope][data-pet="all"] [data-for="all"],
[data-filter-scope][data-pet="dog"] [data-for="dog"],
[data-filter-scope][data-pet="cat"] [data-for="cat"] { display: grid; }

/* ==========================================================================
   トップ
   ========================================================================== */
.hero { background: var(--orange-pale); padding: 40px 20px 120px; }
.hero-panel { position: relative; max-width: 520px; margin: 30px auto 0; padding: 30px 34px 34px; background: var(--white); border: 2px solid var(--orange); border-radius: var(--radius); text-align: center; }
/* 上のつまみ（タブの形） */
.hero-panel::before { content: ""; position: absolute; left: 50%; top: -30px; width: 62%; height: 32px; transform: translateX(-50%); background: var(--white); border: 2px solid var(--orange); border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; }
.hero-selects { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 22px; background: var(--orange-pale); border-radius: var(--radius); }
/* 選択カード：中の select を全面に透明で重ね、押すと端末の選択画面が開く */
.hero-select { position: relative; display: flex; flex-direction: column; align-items: center; padding-top: 14px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; color: var(--orange-dark); cursor: pointer; }
.hero-select select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.hero-select:focus-within { border-color: currentColor; outline: 2px solid currentColor; outline-offset: 2px; }
.hero-select-ico { display: flex; align-items: center; justify-content: center; width: 80%; height: 30px; padding-bottom: 8px; border-bottom: 1px dotted var(--line); }
.hero-select-ico svg { width: 22px; height: 22px; }
.hero-select b { margin-top: 8px; padding: 0 6px; font-size: 1.35rem; line-height: 1.3; }
.hero-select span { font-size: 0.75rem; font-weight: 700; }
.hero-select em { display: block; width: 100%; margin-top: 12px; padding: 4px 0; background: var(--line); color: #fff; font-style: normal; font-weight: 700; }
.hero-select.is-selected em { background: currentColor; }
.hero-select.is-selected b { font-size: 1.1rem; }
.hero-select.is-green { color: var(--green-dark); }
.hero-go { display: flex; align-items: center; justify-content: center; gap: 8px; width: 78%; margin: 22px auto 0; height: 52px; border: 3px solid #ffc3a3; border-radius: 30px; background: var(--orange); color: #fff; font-size: 1.05rem; font-weight: 700; letter-spacing: 0.1em; cursor: pointer; }
.hero-go svg { width: 18px; height: 18px; stroke-width: 2.6; }
.hero-illust { position: absolute; left: -210px; bottom: -40px; width: 230px; pointer-events: none; }

.quick { display: grid; grid-template-columns: 1.8fr 1fr; gap: 24px; margin-top: -86px; position: relative; }
.quick-card { padding: 22px 26px 26px; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); }
.quick-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.quick-title { flex: 1; display: flex; align-items: center; gap: 10px; margin: 0; font-size: 1rem; letter-spacing: 0.1em; white-space: nowrap; }
.quick-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.quick-chips a, .archive-layout .widget-chips a { padding: 4px 16px; border: 1px solid var(--line); border-radius: 3px; background: var(--bg); color: var(--green-dark); font-size: 0.8rem; font-weight: 700; }
.quick-text { margin: 0 0 12px; font-size: 0.8rem; }
.quick-form { display: flex; }
.quick-form input[type="search"] { flex: 1; min-width: 0; height: 42px; border: 0; border-radius: 3px 0 0 3px; background: var(--bg); padding: 0 12px; font: inherit; font-size: 16px; }
.quick-form button { width: 44px; border: 0; border-radius: 0 3px 3px 0; background: var(--green); color: #fff; cursor: pointer; }
.quick-form button svg { width: 18px; height: 18px; stroke-width: 2.4; }

.section { padding-top: 56px; scroll-margin-top: 130px; }
.section-head { display: flex; flex-direction: column; align-items: center; margin-bottom: 28px; padding-bottom: 14px; border-bottom: 2px dotted var(--text); }
.section-icon { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin-bottom: 8px; border: 2px solid var(--text); border-radius: 50%; background: var(--white); }
.section-icon img { width: 36px; }
.section-head h2 { margin: 0; font-size: 1.15rem; letter-spacing: 0.12em; }
.section-head .pet-filter { margin-top: 12px; }

.symptom-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.symptom-grid li { display: flex; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); }
.symptom-grid a { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 16px 18px; }
.symptom-grid b { font-size: 0.98rem; line-height: 1.5; }
.symptom-grid a > span { font-family: var(--font-en); font-size: 0.8rem; color: var(--orange-dark); }

.section-band { margin-top: 56px; padding-bottom: 56px; background: var(--white); }

.feature { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.feature h2 { margin: 0 0 14px; color: var(--orange-dark); font-size: 1.6rem; line-height: 1.5; letter-spacing: 0.06em; }
.feature p { margin: 0; font-size: 0.85rem; }
.feature-link { color: var(--green-dark); text-decoration: underline; text-underline-offset: 3px; }
.feature-photo { position: relative; }
.feature-photo::before { content: ""; position: absolute; left: 24px; top: 24px; right: -24px; bottom: -24px; background: #e6eeee; border-radius: var(--radius); }
.feature-photo img { position: relative; display: block; border-radius: var(--radius); }

.organ-chips { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.organ-chips a { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-sm); font-weight: 700; font-size: 0.9rem; }
.organ-chips span { font-family: var(--font-en); font-size: 0.8rem; color: var(--green-dark); }

.pill-btn { position: relative; display: inline-block; min-width: 280px; margin-top: 36px; padding: 13px 56px 13px 40px; border-radius: 30px; background: var(--orange); box-shadow: 0 4px 0 0 #f8c2a6; color: #fff; font-size: 0.9rem; font-weight: 700; text-align: center; }
.pill-btn-sm { min-width: 0; margin-top: 18px; padding: 10px 52px 10px 26px; font-family: var(--font-en); letter-spacing: 0.15em; }

/* ==========================================================================
   病気のカード（トップの「よく見られている病気」・一覧・検索結果）
   ========================================================================== */
.card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px 28px; }
.post-card { position: relative; display: flex; flex-direction: column; padding-top: 14px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.post-card-head { position: absolute; top: -13px; left: 0; right: 0; text-align: center; }
.card-badge { display: inline-block; padding: 1px 18px; border: 2px solid var(--urgent); border-radius: 20px; background: var(--white); color: var(--urgent); font-size: 0.75rem; font-weight: 700; }
.post-card-title { display: block; margin: 8px 22px 0; padding-bottom: 12px; border-bottom: 1px dotted var(--line); color: var(--orange-dark); font-size: 1.02rem; font-weight: 700; line-height: 1.6; }
.post-card-body { display: grid; grid-template-columns: 44% 1fr; gap: 18px; margin: 16px 22px 0; }
.post-card-thumb { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 4px; background: var(--bg); }
.post-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-card-info { margin: 0; display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.post-card-info div { display: flex; align-items: center; min-width: 0; background: var(--bg); border-radius: 20px; overflow: hidden; font-size: 0.78rem; }
.post-card-info dt { flex: none; padding: 3px 8px; background: var(--green); color: #fff; font-weight: 700; letter-spacing: 0; }
.post-card-info dd { min-width: 0; margin: 0; padding: 3px 8px; font-weight: 700; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.post-card-tags { flex: 1; margin: 12px 22px 16px; font-size: 0.75rem; color: var(--muted); line-height: 1.6; }
.post-card-more { position: relative; display: block; padding: 10px; background: var(--orange); border-radius: 0 0 var(--radius) var(--radius); color: #fff; text-align: center; font-family: var(--font-en); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.15em; }
.post-card-more::after, .pill-btn::after { content: "›"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: #fff; color: var(--orange); font-family: var(--font); font-size: 0.9rem; line-height: 1; letter-spacing: 0; }

/* ==========================================================================
   一覧（カテゴリ・症状タグ）・検索結果
   ========================================================================== */
.archive-layout { display: flex; gap: 40px; padding-top: 20px; padding-bottom: 40px; }
.main-column { flex: 1; min-width: 0; }
.site-sidebar { width: 300px; flex: none; }
.sidebar-inner { position: sticky; top: 140px; }
.archive-layout .breadcrumb ol { color: var(--muted); }
.archive-layout .breadcrumb a { color: var(--green-dark); }
.archive-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 2px dotted var(--text); }
.archive-title { margin: 0; font-size: 1.4rem; letter-spacing: 0.06em; }
.archive-count { margin: 0; font-size: 0.85rem; color: var(--muted); }
.archive-count span { font-family: var(--font-en); font-size: 1.1rem; color: var(--orange-dark); }
.archive-layout .pet-tabs { margin-bottom: 36px; }
.archive-layout .card-grid { transition: opacity 0.2s; }
.archive-empty { grid-column: 1 / -1; padding: 40px 0; text-align: center; color: var(--muted); }

.pagination { margin-top: 40px; text-align: center; }
.pagination .nav-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.pagination .page-numbers { width: auto !important; display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; background: var(--white); border-radius: 20px; box-shadow: var(--shadow-sm); font-family: var(--font-en); font-weight: 700; }
.pagination .page-numbers.current { background: var(--orange); color: #fff; }
.pagination .page-numbers::before, .pagination .page-numbers::after { content: none !important; display: none !important; }

/* 一覧のサイドバー：白い箱 */
.archive-layout .widget { padding: 18px 20px; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); }
.archive-layout .sidebar-banners { padding: 0; background: none; box-shadow: none; }
.archive-layout .widget-title { padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.archive-layout .ranking-list li { border-bottom: 1px dotted var(--line); }
.archive-layout .ranking-list a::before { display: flex; align-items: center; justify-content: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--bg); color: var(--muted); font-family: var(--font-en); font-size: 0.75rem; }
.archive-layout .ranking-list li:nth-child(-n+3) a::before { background: var(--orange); color: #fff; }

/* ==========================================================================
   症状ハブ（/symptom/dog-vomiting/。改善計画 3-1）
   導入 → 受診の目安（3段階）→ 考えられる病気（部位ごとの行）→ よくある質問 → ほかの症状
   ========================================================================== */
.hub-head { padding: 26px 32px 22px; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); }
.hub-kicker { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--green-dark); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; }
.hub-kicker .ico { width: 22px; height: 22px; }
.hub-h1 { margin: 8px 0 14px; font-size: 1.5rem; line-height: 1.5; letter-spacing: 0.04em; word-break: auto-phrase; }
.archive-layout .hub-switch { margin-bottom: 18px; }
.hub-switch span.pet-tab { cursor: default; }
.hub-intro { margin: 0; font-size: 0.92rem; line-height: 2; }
.hub-jump { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 24px; margin: 18px 0 0; padding: 14px 0 0; border-top: 1px dotted var(--line); }
.hub-jump a { display: inline-flex; align-items: center; gap: 6px; color: var(--green-dark); font-size: 0.85rem; font-weight: 700; }
.hub-jump a::before { content: "›"; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--green-pale); font-size: 0.85rem; line-height: 1; transform: rotate(90deg); }
.hub-jump span { font-family: var(--font-en); color: var(--orange-dark); }

.hub-section { margin-top: 44px; scroll-margin-top: 130px; }
.hub-title { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; padding-bottom: 12px; border-bottom: 2px dotted var(--text); font-size: 1.15rem; letter-spacing: 0.08em; }
.hub-title-count { margin-left: auto; font-size: 0.8rem; color: var(--muted); letter-spacing: 0.03em; }
.hub-title-count b { margin-right: 2px; font-family: var(--font-en); font-size: 1.1rem; font-weight: 500; color: var(--orange-dark); }

/* 受診の目安：左に段階の名前、右に当てはまる様子 */
.hub-guide { display: flex; flex-direction: column; gap: 12px; }
.hub-level { --c: var(--urgent); --pale: #fdecea; display: grid; grid-template-columns: 190px 1fr; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.hub-level-soon { --c: var(--orange-dark); --pale: var(--orange-soft); }
.hub-level-watch { --c: var(--green-dark); --pale: var(--green-pale); }
.hub-level h3 { display: flex; flex-direction: column; justify-content: center; margin: 0; padding: 16px 20px; background: var(--pale); border-left: 5px solid var(--c); color: var(--c); font-size: 1rem; line-height: 1.5; }
.hub-level h3 small { font-size: 0.75rem; font-weight: 700; color: var(--text); }
.hub-level ul { list-style: none; margin: 0; padding: 12px 22px; }
.hub-level li { position: relative; padding: 6px 0 6px 22px; font-size: 0.9rem; line-height: 1.7; }
.hub-level li + li { border-top: 1px dotted var(--line); }
.hub-level li::before { content: ""; position: absolute; left: 2px; top: calc(6px + 0.85em - 5px); width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--c); }
.hub-check { position: relative; display: block; margin-top: 16px; padding: 14px 52px 14px 20px; border: 2px solid var(--orange); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-sm); }
.hub-check b { display: block; color: var(--orange-dark); font-size: 1rem; line-height: 1.5; }
.hub-check span { font-size: 0.8rem; line-height: 1.6; }
.hub-check::after { content: "›"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--orange); color: #fff; font-size: 1rem; line-height: 1; }
.hub-note { margin: 16px 0 0; font-size: 0.82rem; line-height: 1.9; }
.hub-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; color: var(--green-dark); font-size: 0.85rem; font-weight: 700; }
.hub-more::after { content: "›"; font-size: 1.1rem; line-height: 1; }

/* 考えられる病気：部位ごとの見出しと、写真つきの行 */
.hub-lead { margin: 0 0 6px; font-size: 0.85rem; }
.hub-lead-sign, .hub-row-sign b { display: inline-block; margin-right: 6px; padding: 0 8px; border: 1px solid var(--urgent); border-radius: 20px; color: var(--urgent); font-size: 0.7rem; font-weight: 700; line-height: 1.7; letter-spacing: 0; white-space: nowrap; }
.hub-group { display: flex; align-items: center; gap: 8px; margin: 26px 0 10px; font-size: 0.95rem; letter-spacing: 0.06em; }
.hub-group::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.hub-group span { font-family: var(--font-en); font-size: 0.85rem; font-weight: 500; color: var(--orange-dark); }
.hub-rows { list-style: none; margin: 0; padding: 0 20px; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); }
.hub-rows li + li { border-top: 1px dotted var(--line); }
.hub-row { position: relative; display: grid; grid-template-columns: 112px 1fr; gap: 18px; align-items: center; padding: 14px 26px 14px 0; }
.hub-row::after { content: "›"; position: absolute; right: 2px; top: 50%; margin-top: -0.65em; color: var(--orange); font-size: 1.3rem; line-height: 1; }
.hub-row-thumb { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 4px; background: var(--bg); }
.hub-row-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hub-row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hub-row-name { color: var(--orange-dark); font-size: 1rem; line-height: 1.5; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; }
.hub-row-tail { font-size: 0.78rem; line-height: 1.6; color: var(--muted); }
.hub-row-sign { margin-top: 4px; font-size: 0.8rem; line-height: 1.6; }

/* よくある質問 */
.hub-faq { margin: 0; padding: 4px 26px; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); }
.hub-faq div { padding: 18px 0; }
.hub-faq div + div { border-top: 1px dotted var(--line); }
.hub-faq dt, .hub-faq dd { position: relative; padding-left: 36px; }
.hub-faq dt { font-size: 0.98rem; font-weight: 700; line-height: 1.6; }
.hub-faq dd { margin: 8px 0 0; font-size: 0.88rem; line-height: 1.9; }
.hub-faq dt::before, .hub-faq dd::before { position: absolute; left: 0; top: 0; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; font-family: var(--font-en); font-size: 0.8rem; line-height: 1; color: #fff; }
.hub-faq dt::before { content: "Q"; background: var(--orange); }
.hub-faq dd::before { content: "A"; top: 2px; background: var(--green); }

.hub-disclaimer { margin: 40px 0 0; font-size: 0.78rem; color: var(--muted); text-align: center; }

/* ==========================================================================
   「今すぐ病院？」チェッカー（/check/。page-check.php。改善計画 3-3）
   見出し・病気の行は症状ハブの部品（.hub-head / .hub-rows）を使う
   ========================================================================== */
.check-layout { max-width: 820px; padding-top: 20px; padding-bottom: 40px; }
.check-layout .breadcrumb ol { color: var(--muted); }
.check-layout .breadcrumb a { color: var(--green-dark); }
.check-progress { list-style: none; display: flex; margin: 20px 0 0; padding: 16px 0 0; border-top: 1px dotted var(--line); counter-reset: step; }
.check-progress li { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--muted); font-size: 0.75rem; font-weight: 700; counter-increment: step; }
.check-progress li::before { content: counter(step); position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--white); border: 2px solid var(--line); font-family: var(--font-en); font-size: 0.85rem; }
.check-progress li + li::after { content: ""; position: absolute; top: 13px; right: 50%; width: 100%; height: 2px; background: var(--line); }
.check-progress li.is-done { color: var(--green-dark); }
.check-progress li.is-done::before { border-color: var(--green); background: var(--green); color: #fff; }
.check-progress li.is-done::after, .check-progress li.is-current::after { background: var(--green); }
.check-progress li.is-current { color: var(--orange-dark); }
.check-progress li.is-current::before { border-color: var(--orange); background: var(--orange); color: #fff; }

.check-tool { margin-top: 24px; }
.check-step { padding: 26px 32px 28px; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); scroll-margin-top: 110px; }
.check-step-no { margin: 0; color: var(--orange-dark); font-family: var(--font-en); font-size: 0.8rem; letter-spacing: 0.18em; }
.check-q { margin: 2px 0 18px; font-size: 1.2rem; line-height: 1.5; letter-spacing: 0.04em; }
.check-sub { margin: -8px 0 18px; font-size: 0.85rem; }
.check-noscript { padding: 16px 20px; background: var(--white); border-radius: var(--radius); }
.check-noscript a { color: var(--green-dark); text-decoration: underline; }

/* STEP 1: 犬・猫 */
.check-pets { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.check-pet { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 0 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-sm); color: var(--orange-dark); cursor: pointer; }
.check-pet[data-pet="cat"] { color: var(--green-dark); }
.check-pet b { font-size: 1.6rem; line-height: 1.3; }

/* STEP 2: 症状 */
.check-symptoms { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0; padding: 0; }
.check-symptom { position: relative; width: 100%; height: 100%; padding: 12px 32px 12px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-sm); font-size: 0.9rem; font-weight: 700; line-height: 1.5; text-align: left; cursor: pointer; }
.check-symptom::after { content: "›"; position: absolute; right: 12px; top: 50%; margin-top: -0.65em; color: var(--orange); font-size: 1.2rem; line-height: 1; }

/* STEP 3: 様子 */
.check-group { margin: 0 0 20px; padding: 0; border: 0; }
.check-group legend { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding: 0; font-size: 0.92rem; font-weight: 700; }
.check-group legend::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.check-items { display: flex; flex-direction: column; gap: 8px; }
.check-item { display: flex; align-items: flex-start; gap: 12px; padding: 11px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); font-size: 0.9rem; line-height: 1.7; cursor: pointer; }
.check-item input { flex: none; width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--orange); cursor: pointer; }
.check-item:has(input:checked) { border-color: var(--orange); background: var(--orange-soft); }
.check-go { width: 100%; max-width: 360px; margin: 8px auto 0; }
.check-back { display: block; margin: 16px auto 0; padding: 4px 8px; border: 0; background: none; color: var(--green-dark); font-size: 0.85rem; font-weight: 700; cursor: pointer; }
.check-back::before { content: "‹"; margin-right: 6px; }
.check-step[data-step="2"] .check-back { margin-top: 20px; }

/* 結果 */
.check-verdict { --c: var(--urgent); --pale: #fdecea; margin-top: 6px; padding: 18px 24px 20px; border-left: 6px solid var(--c); border-radius: var(--radius); background: var(--pale); }
.check-verdict.is-soon { --c: var(--orange-dark); --pale: var(--orange-soft); }
.check-verdict.is-watch { --c: var(--green-dark); --pale: var(--green-pale); }
.check-verdict-for { margin: 0; font-size: 0.78rem; font-weight: 700; }
.check-verdict h2 { margin: 2px 0 6px; color: var(--c); font-size: 1.45rem; line-height: 1.5; letter-spacing: 0.06em; }
.check-verdict p:last-child { margin: 0; font-size: 0.88rem; line-height: 1.9; }
.check-h3 { display: flex; align-items: center; gap: 8px; margin: 26px 0 8px; font-size: 0.95rem; letter-spacing: 0.04em; }
.check-h3::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.check-signs { list-style: none; margin: 0; padding: 0; }
.check-signs li { position: relative; padding: 7px 0 7px 22px; font-size: 0.9rem; line-height: 1.7; }
.check-signs li + li { border-top: 1px dotted var(--line); }
.check-signs li::before { content: ""; position: absolute; left: 2px; top: calc(7px + 0.85em - 5px); width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--orange); }
.check-tip { margin: 22px 0 0; padding: 12px 16px; border-radius: var(--radius); background: var(--bg); font-size: 0.82rem; line-height: 1.9; }
.check-result .hub-rows { border: 1px solid var(--line); box-shadow: none; }
.check-result .hub-more { margin-top: 12px; }
.check-again { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px; margin-top: 26px; padding-top: 14px; border-top: 1px dotted var(--line); }
.check-again .check-back { margin: 0; }

/* ツールの下の説明（pages/check.html） */
.check-content { margin-top: 40px; padding: 26px 32px; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); font-size: 0.9rem; line-height: 1.9; }
.check-content h2 { margin: 28px 0 10px; padding-bottom: 8px; border-bottom: 2px dotted var(--text); font-size: 1.05rem; letter-spacing: 0.06em; }
.check-content h2:first-child { margin-top: 0; }
.check-content p { margin: 0 0 12px; }
.check-content ul { margin: 0 0 12px; padding-left: 1.4em; }
.check-content li { margin: 4px 0; }
.check-content a { color: var(--green-dark); text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   サイドバー（共通）
   ========================================================================== */
.widget { margin-bottom: 28px; }
.sidebar-banners { display: flex; flex-direction: column; gap: 10px; }
.sidebar-banner-link { display: block; border-radius: var(--radius); }
.sidebar-banner-img { display: block; width: 100%; border-radius: var(--radius); }
.site-sidebar .widget-title { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 1rem; font-weight: 700; letter-spacing: 0.06em; }
.widget-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ranking-list { list-style: none; margin: 0; padding: 0; counter-reset: rank; }
.ranking-list li { counter-increment: rank; }
.ranking-list a { display: flex; align-items: center; gap: 12px; padding: 9px 0; font-size: 0.9rem; font-weight: 700; }
.ranking-list a::before { content: counter(rank); }

/* ==========================================================================
   記事・固定ページ・404（Airbnb 風の色合い）
   ========================================================================== */
.article-layout { display: flex; gap: 56px; padding-top: 20px; padding-bottom: 40px; color: var(--a-ink); font-family: var(--font-ui); font-weight: 400; letter-spacing: 0; line-height: 1.8; font-size: 16px; }
.article-layout .site-sidebar { width: 340px; }
.entry-content [id] { scroll-margin-top: 150px; }

.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; margin: 0 0 12px; padding: 0; font-size: 0.8rem; color: var(--a-sub); }
.breadcrumb li + li::before { content: "›"; margin: 0 8px; }
.breadcrumb a { text-decoration: underline; }

.single-post-wrapper { padding: 0; background: none; }
.entry-header { margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--a-line); }
.entry-title { margin: 0; font-size: 1.65rem; font-weight: 700; line-height: 1.45; }
.entry-meta { margin: 8px 0 0; font-size: 0.88rem; color: var(--a-sub); }
.entry-meta a { color: var(--a-ink); font-weight: 600; text-decoration: underline; }
.affiliate-disclosure { margin: 4px 0 0; font-size: 0.75rem; color: var(--a-sub); }

/* Cocoon の初期化で段落・リストの余白が 0 になるため、ここで付け直す */
.entry-content p { margin: 0 0 1.4em; }
.entry-content ul, .entry-content ol { margin: 0 0 1.4em; padding-left: 1.5em; }
.entry-content li { margin-bottom: 0.3em; }
.entry-content > p:first-child { margin-top: 0; }
.entry-content a { text-decoration: underline; text-underline-offset: 3px; }
.entry-content img { border-radius: 12px !important; }
.entry-content h2 { margin: 48px 0 16px; padding: 40px 0 0; border: 0; border-top: 1px solid var(--a-line); background: none; font-size: 1.4rem; font-weight: 700; line-height: 1.45; }
.entry-content h3 { margin: 32px 0 10px; padding: 0; border: 0; background: none; font-size: 1.12rem; font-weight: 700; }
.entry-content table { width: 100%; border-collapse: separate !important; border-spacing: 0; margin: 20px 0 !important; border: 1px solid var(--a-line); border-radius: 12px; overflow: hidden; font-size: 0.92rem; line-height: 1.65; }
.entry-content th, .entry-content td { padding: 12px 14px; border: 0 !important; border-bottom: 1px solid var(--a-line-soft) !important; text-align: left; vertical-align: top; }
.entry-content tr:last-child td { border-bottom: 0 !important; }
.entry-content thead tr, .entry-content th { background: var(--a-bg) !important; font-weight: 700; }
.entry-content a.disease-link, .entry-content .common-care-more a { font-weight: 600; }

/* 目次（Cocoon が出力） */
.entry-content .toc { display: block; width: auto; margin: 28px 0; padding: 20px 24px; border: 1px solid var(--a-line); border-radius: 12px; background: none; font-size: 1rem; }
.toc-checkbox { display: none; }
.toc .toc-title { display: block; margin: 0 0 6px; padding: 0; border: 0; text-align: left; font-size: 1.05rem; font-weight: 700; }
.toc-list, .toc-list ul { list-style: none; margin: 0; padding: 0; }
.toc-list ul { padding-left: 1.2em; }
.toc-list a { font-size: 0.92rem; line-height: 2; text-decoration: underline; text-decoration-color: var(--a-line); text-underline-offset: 4px; }
.toc-list ul a { color: var(--a-sub); }

/* よくある質問（本文の dl。dt に直接書かれた青い線は打ち消す） */
.entry-content dl { margin: 16px 0; }
.entry-content dl dt { margin: 0 !important; padding: 18px 0 0 !important; border: 0 !important; border-top: 1px solid var(--a-line) !important; font-weight: 700; }
.entry-content dl dt:first-child { border-top: 0 !important; }
.entry-content dl dd { margin: 4px 0 0; padding-bottom: 18px; color: #3f3f3f; line-height: 1.8 !important; }

/* 記事冒頭の「受診の目安」ボックス（functions.php の pet_insert_visit_guide）。
   PCでは画面左下のカード（pet_visit_guide_float_html）に出すので本文内では隠す。スマホでは本文内に出す */
.entry-content .visit-guide { display: none; }

/* 記事末尾の共通パーツ（pet_common_care_html）・参考文献（pet_append_references） */
.entry-content .common-care { margin: 40px 0 24px; padding: 24px; border: 1px solid var(--a-line); border-radius: 12px; }
.entry-content .common-care-title { margin: 0 0 8px; padding: 0; border: 0; background: none; font-size: 1.1rem; font-weight: 700; color: var(--a-urgent); }
.entry-content .common-care ul { margin: 10px 0; }
.entry-content .common-care-more { margin: 10px 0 0; font-weight: 700; }
.entry-content .references { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--a-line); font-size: 0.85rem; }
.entry-content .references-title { margin: 0; font-size: 1.1rem; font-weight: 700; }
.entry-content .references-note { margin: 0 0 12px; color: var(--a-sub); }
.entry-content .references ol { padding-left: 1.3em; }
.entry-content .references li { margin-bottom: 8px; overflow-wrap: anywhere; }
.entry-content .references a { text-decoration-color: #b0b0b0; }
.entry-content .references-kind { display: inline-block; margin-right: 6px; padding: 0 8px; border-radius: 10px; background: var(--a-bg); font-size: 0.72rem; color: var(--a-sub); }

/* まとめの後のバナー（inject_summary_banners） */
.article-banners { display: flex; flex-direction: column; gap: 12px; max-width: 50%; margin: 40px 0 30px; }
.article-banner-link { display: block; text-decoration: none !important; border-radius: 8px; }
.article-banner-img { display: block; width: 100%; height: auto; }

.entry-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--a-line); }
.entry-tags p { width: 100%; margin: 0 0 4px; font-weight: 700; }
.entry-tags a, .article-layout .widget-chips a { display: inline-block; padding: 6px 14px; border: 1px solid var(--a-line); border-radius: 30px; font-size: 0.85rem; }

/* 関連する病気：写真＋3行（記事と同じ動物の記事だけ） */
.related { margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--a-line); }
.related-title { margin: 0 0 16px; font-size: 1.35rem; font-weight: 700; }
.mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 20px; }
.mini-card { display: block; min-width: 0; }
.mini-card-thumb { position: relative; aspect-ratio: 1 / 1; border-radius: 16px; overflow: hidden; background: var(--a-bg); }
.mini-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mini-card .card-badge { position: absolute; top: 12px; left: 12px; padding: 4px 10px; border: 0; border-radius: 20px; background: rgba(255, 255, 255, 0.95); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); font-size: 0.72rem; line-height: 1.4; color: var(--a-urgent); }
.mini-card-title { margin: 10px 0 0; font-size: 0.95rem; font-weight: 700; line-height: 1.4; }
.mini-card-sub, .mini-card-meta { margin: 2px 0 0; font-size: 0.85rem; line-height: 1.45; color: var(--a-sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 記事ページのサイドバー */
.article-layout .widget-title { font-size: 1.05rem; letter-spacing: 0; }
.article-layout .widget-title .ico { display: none; }
.article-layout .sidebar-banner-img { border-radius: 12px; }
.article-layout .ranking-list li { border-bottom: 1px solid var(--a-line-soft); }
.article-layout .ranking-list a { font-weight: 400; font-size: 0.92rem; }
.article-layout .ranking-list a::before { width: 1.2em; color: var(--a-sub); font-weight: 700; }

/* 受診の目安：画面の左下に追従するカード（右上の × で閉じる。PCのみ） */
.guide-float { position: fixed; left: 24px; bottom: 24px; z-index: 55; width: 330px; padding: 22px 22px 18px; border: 1px solid var(--a-line); border-radius: 12px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18); background: #fff; color: var(--a-ink); font-family: var(--font-ui); font-weight: 400; letter-spacing: 0; line-height: 1.7; }
.guide-close { position: absolute; top: 10px; right: 10px; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--a-bg); color: var(--a-ink); cursor: pointer; }
.guide-close svg { width: 16px; height: 16px; stroke-width: 2.2; }
.guide-float-title { margin: 0 36px 12px 0; font-size: 1.1rem; font-weight: 700; }
.guide-float dl { margin: 0; border: 1px solid #b0b0b0; border-radius: 10px; overflow: hidden; }
.guide-float .visit-guide-row { padding: 10px 14px; }
.guide-float .visit-guide-row + .visit-guide-row { border-top: 1px solid #b0b0b0; }
.guide-float dt { font-size: 0.72rem; font-weight: 800; }
.guide-float dt small { margin-left: 6px; font-weight: 400; color: var(--a-sub); }
.guide-float dd { margin: 2px 0 0; font-size: 0.88rem; line-height: 1.6; }
.guide-float .visit-guide-urgent dt { color: var(--a-urgent); }
.guide-float-btn { display: block; margin-top: 16px; padding: 14px; border-radius: 10px; background: var(--a-grad); color: #fff; font-weight: 700; text-align: center; }
.guide-float-note { margin: 10px 0 0; font-size: 0.8rem; color: var(--a-sub); text-align: center; }
.guide-reopen { position: fixed; left: 24px; bottom: 24px; z-index: 55; padding: 10px 18px; border: 1px solid var(--a-line); border-radius: 30px; background: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); color: var(--a-ink); font-family: var(--font-ui); font-size: 0.85rem; font-weight: 700; cursor: pointer; }

/* 404 */
.page-search { margin: 30px 0; }

/* ==========================================================================
   フッター・下部ナビ・ページの先頭へ
   ========================================================================== */
.site-footer { margin-top: 64px; padding: 40px 0 0; background: var(--text); color: #e3eaec; font-size: 0.82rem; }
body.pet-article .site-footer { margin-top: 24px; }
.footer-inner { display: flex; gap: 48px; padding-bottom: 32px; }
.footer-brand { flex: 1; max-width: 400px; }
.footer-brand img { display: block; width: 180px; margin-bottom: 10px; padding: 6px 10px; background: #fff; border-radius: var(--radius); }
.footer-links { flex: 1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 24px; align-content: start; }
.footer-links a::before { content: "›"; margin-right: 8px; color: var(--orange); }
.copyright { margin: 0; padding: 14px; background: #373d45; text-align: center; font-family: var(--font-en); font-size: 0.72rem; letter-spacing: 0.1em; }

.bottom-nav { display: none; }

#js-scroll-top { position: fixed; right: 24px; bottom: 24px; z-index: 50; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--green); color: #fff; box-shadow: var(--shadow); opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; }
#js-scroll-top::after { content: "↑"; font-size: 1.3rem; font-weight: 700; }
#js-scroll-top.is-visible { opacity: 1; visibility: visible; }

/* ==========================================================================
   動き（ホバー・押したとき・キーボード操作）
   - Cocoon 親テーマの a:hover { color: #e53900 } を打ち消し、部品ごとに色を決める
     （これが残っていると、オレンジ地の MORE などの文字が背景と同じ色になって見えなくなる）
   - トップ・一覧（ラシーク風）: 浮き上がる・押し込む（下の影が縮む）・矢印が右へ動く
   - 記事（Airbnb 風）: 下線の濃さ・写真のゆっくりした拡大・ボタンの光がカーソルを追う
   - ホバーはマウス操作の端末だけ（@media (hover: hover)）。スマホは押したときの変化だけ
   ========================================================================== */
:root {
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.28s;
}

a:hover { color: inherit; }
a, button, label { -webkit-tap-highlight-color: transparent; }

/* キーボード操作の位置を見やすく */
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.article-layout :focus-visible, .guide-float :focus-visible { outline-color: var(--a-ink); }
.post-card-more:focus-visible, .pill-btn:focus-visible, .hero-go:focus-visible { outline-color: var(--orange-dark); }

/* 変化をなめらかにする部品 */
.header-nav a, .header-nav a::after, .header-nav .ico, .header-btn, .header-btn svg, .site-logo img,
.pet-filter button, .pet-tab,
.hero-select, .hero-select em, .hero-select-ico svg, .hero-go, .pill-btn, .pill-btn::after,
.quick-chips a, .widget-chips a, .entry-tags a, .quick-form button, .header-search-form button, .page-search button,
.symptom-grid li, .symptom-grid a, .symptom-grid a::after, .symptom-grid b, .organ-chips a, .organ-chips span,
.post-card, .post-card-thumb img, .post-card-title, .post-card-more, .post-card-more::after,
.hub-jump a::before, .hub-more::after, .hub-row, .hub-row::after, .hub-row-thumb img, .hub-row-name,
.check-pet, .check-pet svg, .check-symptom, .check-symptom::after, .check-item, .check-back, .hub-check, .hub-check::after,
.pagination .page-numbers, .ranking-list a, .ranking-list a::before, .sidebar-banner-link, .article-banner-link,
.breadcrumb a, .entry-meta a, .toc-list a, .entry-content a, .mini-card-thumb img, .mini-card-title,
.guide-float-btn, .guide-close, .guide-close svg, .guide-reopen,
.footer-links a, .footer-links a::before, .sp-menu > a, .sp-menu > a::after, .bottom-nav a, .bottom-nav .ico, .bottom-nav .bn-search {
  transition-property: color, background-color, background-size, border-color, box-shadow, transform, opacity, text-decoration-color, letter-spacing, filter;
  transition-duration: var(--dur);
  transition-timing-function: var(--ease);
}
.post-card-thumb img, .mini-card-thumb img, .hub-row-thumb img { transition-duration: 0.6s; }
#js-scroll-top { transition: opacity 0.3s, visibility 0.3s, transform var(--dur) var(--ease), background-color var(--dur) var(--ease); }

/* ---------- 部品の準備（矢印・下線・光） ---------- */
.header-nav a { position: relative; }
.header-nav a::after { content: ""; position: absolute; left: 24px; right: 24px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--orange); transform: scaleX(0); }

.hero-go { box-shadow: 0 4px 0 0 #e9a27c; }
.footer-links a::before { display: inline-block; }

/* 症状・部位のタイル：左の色の帯と、右から出てくる矢印 */
.symptom-grid li { overflow: hidden; }
.symptom-grid a { position: relative; padding-right: 34px; box-shadow: inset 0 0 0 0 var(--orange); }
.symptom-grid a::after { content: "›"; position: absolute; right: 14px; top: 50%; margin-top: -0.65em; font-size: 1.3rem; line-height: 1; color: var(--orange); opacity: 0; transform: translateX(-8px); }
.organ-chips a { box-shadow: var(--shadow-sm), inset 0 0 0 0 var(--green); }

/* カードの題名：下線を透明にしておき、ホバーで色を付ける */
.post-card-title { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.mini-card-title { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; }

/* 本文の病名リンク：蛍光ペンのように下から色が引かれる */
.entry-content a.disease-link { text-decoration-color: rgba(34, 34, 34, 0.35); background: linear-gradient(transparent 62%, #ffe2cf 62%) no-repeat 0 0 / 0% 100%; }
.entry-content a { text-decoration-color: rgba(34, 34, 34, 0.35); }

/* 受診の目安ボタン：カーソルの位置に柔らかい光（Airbnb の予約ボタンのような動き。位置は footer.php のスクリプト） */
.guide-float-btn { background-image: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 60%), var(--a-grad); }

/* ---------- ホバー（マウス操作の端末だけ） ---------- */
@media (hover: hover) {
  /* ヘッダー */
  .site-logo:hover img { opacity: 0.8; }
  .header-nav a:hover { background: var(--white); color: var(--orange-dark); }
  .header-nav a:hover::after { transform: scaleX(1); }
  .header-nav a:hover .ico { transform: scale(1.12) rotate(-8deg); }
  .header-btn-search:hover { background: var(--green-dark); }
  .header-btn-search:hover svg { transform: scale(1.12) rotate(-8deg); }

  /* 犬・猫フィルタ */
  .pet-filter button:not([aria-pressed="true"]):hover, .pet-tab:not(.active):hover { background: var(--green-pale); color: var(--green-dark); }

  /* トップ最上部 */
  .hero-select:hover { transform: translateY(-3px); border-color: currentColor; box-shadow: 0 6px 0 0 rgba(66, 73, 82, 0.08); }
  .hero-select:hover em { background: currentColor; }
  .hero-select:hover .hero-select-ico svg { transform: scale(1.15) rotate(-6deg); }

  /* 押し込むボタン（下の影が縮み、矢印が右へ） */
  .hero-go:hover, .pill-btn:hover { background: var(--orange-dark); color: #fff; transform: translateY(2px); }
  .hero-go:hover { box-shadow: 0 2px 0 0 #e9a27c; }
  .pill-btn:hover { box-shadow: 0 2px 0 0 #f8c2a6; }
  .pill-btn:hover::after { transform: translate(4px, -50%); }

  /* 緑のチップ */
  .quick-chips a:hover, .archive-layout .widget-chips a:hover { background: var(--green); border-color: var(--green); color: #fff; transform: translateY(-2px); box-shadow: 0 2px 0 0 var(--green-dark); }
  .quick-form button:hover, .header-search-form button:hover, .page-search button:hover { background: var(--green-dark); }

  /* 症状・部位のタイル */
  .symptom-grid li:hover { transform: translateY(-3px); box-shadow: 0 7px 0 0 rgba(66, 73, 82, 0.08); }
  .symptom-grid a:hover { background: var(--orange-soft); box-shadow: inset 4px 0 0 0 var(--orange); }
  .symptom-grid a:hover b { color: var(--orange-dark); }
  .symptom-grid a:hover::after { opacity: 1; transform: translateX(0); }
  .organ-chips a:hover { color: var(--green-dark); background: var(--green-pale); transform: translateY(-2px); box-shadow: 0 4px 0 0 rgba(66, 73, 82, 0.08), inset 4px 0 0 0 var(--green); }

  /* 病気のカード：浮き上がり、写真が少し寄り、題名に下線、MORE の矢印が右へ */
  .post-card:hover { transform: translateY(-4px); border-color: #f3c4a8; box-shadow: 0 8px 0 0 rgba(66, 73, 82, 0.07), 0 16px 28px -12px rgba(66, 73, 82, 0.3); }
  .post-card:hover .post-card-thumb img { transform: scale(1.07); }
  .post-card:hover .post-card-title { text-decoration-color: currentColor; }
  .post-card-title:hover { color: #b8471a; }
  .post-card:hover .post-card-more::after { transform: translate(4px, -50%); }
  .post-card-more:hover { background: var(--orange-dark); color: #fff; letter-spacing: 0.25em; }
  .post-card-more:hover::after { transform: translate(8px, -50%); }

  /* 症状ハブ：行は背景が薄く色づき、写真が少し寄り、病名に下線、矢印が右へ */
  .hub-jump a:hover::before { background: var(--green); color: #fff; }
  .hub-more:hover::after { transform: translateX(3px); }
  .hub-row:hover { background: var(--orange-soft); box-shadow: -20px 0 0 0 var(--orange-soft), 20px 0 0 0 var(--orange-soft); }
  .hub-row:hover .hub-row-thumb img { transform: scale(1.07); }
  .hub-row:hover .hub-row-name { text-decoration-color: currentColor; }
  .hub-row:hover::after { transform: translateX(4px); }

  /* チェッカー：犬・猫は浮き上がる、症状は左に色の帯と矢印、様子は枠がオレンジに */
  .check-pet:hover { transform: translateY(-3px); border-color: currentColor; box-shadow: 0 6px 0 0 rgba(66, 73, 82, 0.08); }
  .check-pet:hover svg { transform: scale(1.15) rotate(-6deg); }
  .check-symptom:hover { background: var(--orange-soft); border-color: #f3c4a8; box-shadow: var(--shadow-sm), inset 4px 0 0 0 var(--orange); color: var(--orange-dark); }
  .check-symptom:hover::after { transform: translateX(3px); }
  .check-item:hover { border-color: var(--orange); }
  .check-back:hover { color: var(--orange-dark); }
  .hub-check:hover { background: var(--orange-soft); transform: translateY(-2px); box-shadow: 0 4px 0 0 rgba(66, 73, 82, 0.1); }
  .hub-check:hover::after { transform: translate(4px, -50%); }
  .feature-link:hover { color: var(--orange-dark); }

  /* 一覧のページ送り */
  .pagination a.page-numbers:hover { background: var(--white); color: var(--orange-dark); transform: translateY(-2px); box-shadow: 0 4px 0 0 rgba(66, 73, 82, 0.1); }

  /* サイドバー */
  .sidebar-banner-link:hover, .article-banner-link:hover { transform: translateY(-3px); box-shadow: 0 10px 20px -10px rgba(66, 73, 82, 0.45); filter: brightness(1.03); }
  .ranking-list a:hover { color: var(--orange-dark); transform: translateX(3px); }
  .archive-layout .ranking-list a:hover::before { background: var(--orange); color: #fff; transform: scale(1.1); }

  /* パンくず・フッター */
  .breadcrumb a:hover { color: var(--orange-dark); }
  .article-layout .breadcrumb a:hover, .entry-meta a:hover { color: var(--a-ink); text-decoration-thickness: 2px; }
  .footer-links a:hover { color: #fff; }
  .footer-links a:hover::before { transform: translateX(3px); }
  #js-scroll-top:hover { background: var(--green-dark); transform: translateY(-3px); }

  /* 記事（Airbnb 風）：リンクは下線を濃く、病名リンクは蛍光ペン */
  .entry-content a:hover { color: var(--orange-dark); text-decoration-color: currentColor; }
  .entry-content a.disease-link:hover { color: var(--a-ink); background-size: 100% 100%; }
  .toc-list a:hover { color: var(--a-ink); text-decoration-color: var(--a-ink); }
  .entry-tags a:hover, .article-layout .widget-chips a:hover { border-color: var(--a-ink); background: var(--a-bg); color: var(--a-ink); }
  .article-layout .ranking-list a:hover { color: var(--a-ink); transform: none; text-decoration: underline; text-underline-offset: 4px; }
  .mini-card:hover .mini-card-thumb img { transform: scale(1.05); }
  .mini-card:hover .mini-card-title { text-decoration-color: currentColor; }

  /* 受診の目安カード */
  .guide-float-btn:hover { background-image: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 60%), var(--a-grad); color: #fff; box-shadow: 0 6px 14px -6px rgba(210, 79, 26, 0.6); }
  .guide-close:hover { background: var(--a-line-soft); }
  .guide-close:hover svg { transform: rotate(90deg); }
  .guide-reopen:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18); }

  /* スマホのメニュー（タブレットでマウスを使う場合） */
  .sp-menu > a:hover { color: var(--orange-dark); }
  .sp-menu > a:hover::after { transform: translateX(3px); }
}

/* ---------- 押したとき（スマホでも出る） ---------- */
.post-card:active { transform: translateY(-1px); }
.post-card-more:active { background: #bf4f1b; }
.hero-go:active, .pill-btn:active { transform: translateY(4px); box-shadow: 0 0 0 0 transparent; }
.symptom-grid a:active, .organ-chips a:active, .hub-row:active, .check-symptom:active { background: var(--orange-soft); }
.check-pet:active { transform: scale(0.98); }
.quick-chips a:active, .widget-chips a:active, .entry-tags a:active, .pet-filter button:active, .pet-tab:active, .pagination .page-numbers:active { transform: scale(0.96); }
.hero-select:active { transform: translateY(0) scale(0.98); }
.mini-card:active .mini-card-thumb img { transform: scale(0.98); }
.guide-float-btn:active, .guide-close:active { transform: scale(0.96); }
.bottom-nav a:active, .bottom-nav .bn-search:active { background: var(--bg); }
.bottom-nav a:active .ico { transform: scale(0.88); }
.bottom-nav .bn-search:active { background: var(--green-dark); }
.sp-menu > a:active { background: var(--bg); }

/* 動きを減らす設定の端末では、変化を一瞬にする */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   タブレット
   ========================================================================== */
@media (max-width: 1000px) {
  .header-catch, .header-count { display: none; }
  .header-top { padding-left: 20px; }
  .header-nav a { padding: 12px 16px; }
  .hero-illust { left: -150px; width: 170px; }
  .symptom-grid, .organ-chips { grid-template-columns: repeat(3, 1fr); }
  .archive-layout { gap: 28px; }
  .archive-layout .card-grid { grid-template-columns: 1fr; }
  .article-layout { gap: 32px; }
  .article-layout .site-sidebar { width: 300px; }
  .mini-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   スマホ
   ========================================================================== */
@media (max-width: 767px) {
  body { font-size: 14px; padding-bottom: 66px; }
  .admin-bar .site-header { top: 0; }

  /* ヘッダー：ロゴ（左）とハンバーガーメニュー（右）だけ。検索・受診の目安は下部ナビから */
  .header-top { height: 56px; padding: 0 0 0 16px; }
  .header-btn, .header-brand { display: none; }
  .header-menu { display: flex; }
  .site-logo img { height: 40px; }
  .header-nav { display: none; }
  .sp-menu { display: block; position: absolute; left: 0; right: 0; top: 56px; max-height: calc(100vh - 56px); overflow-y: auto; padding: 8px 16px 20px; background: var(--white); border-top: 1px solid var(--line); box-shadow: 0 8px 16px rgba(66, 73, 82, 0.15); }
  .sp-menu > a { display: block; padding: 13px 4px; border-bottom: 1px dotted var(--line); font-weight: 700; }
  .sp-menu > a::after { content: "›"; float: right; color: var(--orange); }
  .sp-menu-search { display: flex; margin: 8px 0 6px; }
  .sp-menu-search input { flex: 1; min-width: 0; height: 44px; padding: 0 12px; border: 1px solid var(--line); border-right: 0; border-radius: 4px 0 0 4px; background: var(--bg); font: inherit; font-size: 16px; }
  .sp-menu-search button { width: 48px; border: 0; border-radius: 0 4px 4px 0; background: var(--green); color: #fff; }
  .sp-menu-search svg { width: 20px; height: 20px; stroke-width: 2.4; }
  .sp-menu-sub { display: flex; flex-wrap: wrap; gap: 4px 18px; padding-top: 14px; font-size: 0.8rem; color: var(--muted); }
  .header-search { padding: 12px 16px; }

  /* トップ */
  .hero { padding: 36px 16px 64px; }
  .hero-panel { padding: 22px 16px; }
  .hero-selects { padding: 14px; gap: 10px; }
  .hero-select b { font-size: 1.1rem; }
  .hero-select.is-selected b { font-size: 0.95rem; }
  .hero-illust { display: none; }
  .hero-go { width: 100%; }
  .quick { grid-template-columns: 1fr; gap: 16px; margin-top: -40px; }
  .quick-card { padding: 18px; }
  .quick-title { font-size: 0.95rem; }
  .section { padding-top: 44px; scroll-margin-top: 60px; }
  .section-icon { width: 54px; height: 54px; }
  .section-icon img { width: 30px; }
  .symptom-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .symptom-grid a { padding: 12px; }
  .symptom-grid b { font-size: 0.88rem; }
  .card-grid, [data-filter-scope][data-pet] .card-grid[data-for] { grid-template-columns: 1fr; gap: 30px; }
  .post-card-title { margin: 8px 16px 0; font-size: 0.95rem; }
  .post-card-body { margin: 14px 16px 0; gap: 12px; }
  .post-card-tags { margin: 10px 16px 14px; }
  .pill-btn { min-width: 0; width: 100%; }
  .pill-btn-sm { width: auto; }
  .feature { grid-template-columns: 1fr; gap: 24px; }
  .feature h2 { font-size: 1.3rem; }
  .feature-photo { margin-right: 16px; }
  .organ-chips { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .organ-chips a { padding: 10px 12px; font-size: 0.82rem; }

  /* 一覧 */
  .archive-layout { display: block; padding-top: 14px; }
  .archive-layout .site-sidebar { width: auto; margin-top: 40px; }
  .archive-title { font-size: 1.2rem; }

  /* 症状ハブ */
  .hub-head { padding: 20px 18px 18px; }
  .hub-h1 { font-size: 1.25rem; }
  .hub-intro { font-size: 0.88rem; line-height: 1.9; }
  .hub-jump { gap: 6px 16px; }
  .hub-jump a { font-size: 0.8rem; }
  .hub-section { margin-top: 36px; scroll-margin-top: 70px; }
  .hub-title { font-size: 1.05rem; }
  .hub-level { grid-template-columns: 1fr; }
  .hub-level h3 { flex-direction: row; justify-content: flex-start; align-items: baseline; gap: 10px; padding: 10px 16px; font-size: 0.95rem; }
  .hub-level ul { padding: 8px 16px; }
  .hub-level li { font-size: 0.86rem; }
  .hub-rows { padding: 0 14px; }
  .hub-row { grid-template-columns: 84px 1fr; gap: 12px; padding: 12px 18px 12px 0; }
  .hub-row-name { font-size: 0.92rem; }
  .hub-row-tail { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .hub-row-sign { font-size: 0.76rem; }
  .hub-faq { padding: 2px 16px; }
  .hub-faq dt { font-size: 0.92rem; }
  .hub-faq dd { font-size: 0.85rem; }

  /* チェッカー */
  .check-layout { padding-top: 14px; }
  .check-progress li { font-size: 0.7rem; }
  .check-step { padding: 20px 16px 22px; scroll-margin-top: 66px; }
  .check-q { font-size: 1.05rem; }
  .check-symptoms { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .check-symptom { padding: 11px 26px 11px 12px; font-size: 0.84rem; }
  .check-symptom::after { right: 8px; }
  .check-item { padding: 10px 12px; font-size: 0.86rem; }
  .check-verdict { padding: 16px 18px; }
  .check-verdict h2 { font-size: 1.2rem; }
  .check-content { padding: 20px 18px; }

  /* 記事 */
  .article-layout { display: block; padding: 14px 20px 32px; font-size: 15px; }
  .article-layout .site-sidebar { width: auto; margin-top: 40px; }
  .sidebar-inner { position: static; }
  .guide-float, .guide-reopen { display: none !important; }
  .entry-content [id] { scroll-margin-top: 70px; }
  .entry-title { font-size: 1.3rem; }
  .entry-content h2 { margin-top: 36px; padding-top: 28px; font-size: 1.2rem; }
  .entry-content table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .entry-content th, .entry-content td { min-width: 7em; white-space: normal; }
  .entry-content .visit-guide { display: block; margin: 20px 0 28px; padding: 18px; border: 1px solid var(--a-line); border-radius: 12px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); }
  .entry-content .visit-guide-title { margin: 0 0 10px; font-weight: 700; font-size: 1.05rem; }
  .entry-content .visit-guide dl { margin: 0; border: 1px solid #b0b0b0; border-radius: 10px; overflow: hidden; }
  .entry-content .visit-guide-row { padding: 10px 14px; }
  .entry-content .visit-guide-row + .visit-guide-row { border-top: 1px solid #b0b0b0 !important; }
  .entry-content .visit-guide-row dt { padding: 0 !important; border: 0 !important; font-size: 0.72rem; font-weight: 800; }
  .entry-content .visit-guide-row dt small { margin-left: 6px; font-weight: 400; color: var(--a-sub); }
  .entry-content .visit-guide-row dd { margin: 2px 0 0; padding: 0; font-size: 0.9rem; line-height: 1.6 !important; }
  .entry-content .visit-guide-urgent dt { color: var(--a-urgent); }
  .entry-content .visit-guide-note { margin: 10px 0 0; font-size: 0.82rem; color: var(--a-sub); }
  .article-banners { max-width: 100%; }
  .mini-grid { grid-template-columns: repeat(2, 1fr); gap: 20px 12px; }
  .mini-card-thumb { border-radius: 12px; }
  .mini-card-title { font-size: 0.88rem; }
  .mini-card-sub, .mini-card-meta { font-size: 0.78rem; }
  .mini-card .card-badge { top: 8px; left: 8px; padding: 3px 8px; font-size: 0.64rem; }

  /* フッター・下部ナビ */
  .footer-inner { flex-direction: column; gap: 24px; }
  .bottom-nav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; height: 60px; background: var(--white); border-top: 1px solid var(--line); box-shadow: 0 -2px 0 rgba(66, 73, 82, 0.05); padding-bottom: env(safe-area-inset-bottom); }
  .bottom-nav a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 0.64rem; font-weight: 700; }
  .bottom-nav .bn-search { flex: 0 0 60px; display: flex; align-items: center; justify-content: center; border: 0; background: var(--green); color: #fff; cursor: pointer; }
  .bottom-nav .bn-search svg { width: 24px; height: 24px; stroke-width: 2.6; }
  #js-scroll-top { display: none; }
}