/*
Theme Name: Arkhe Child（美肌治療ラボ）
Theme URI: https://bihada-chiryo-lab.com/
Author: 美肌治療ラボ編集部
Description: Arkhe（無料版）を親テーマに、承認済みデザイン design-system-v2 を移植した子テーマ。第1部＝デザインシステム正本を Arkhe のマークアップへ写像（.entry-content→.c-postContent 等の二重セレクタ）、第3部＝モバイル表組み、第4部＝強調レイヤー、末尾に Arkhe 適合レイヤー（ヘッダー／ナビ／フッター／カード等の構造クラス写像）を収録。
Template: arkhe
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: arkhe-child-bihada
*/

/* ============================================================
   収録構成
   [第1部] design-system-v2.css 正本（セレクタ写像つき）
   [第3部] モバイル表組みの実サイト修正（Cocoon子テーマから継承）
   [第4部] 強調レイヤー（価格/CTAの差し色。Cocoon子テーマから継承）
   [Arkhe適合レイヤー] ヘッダー／ナビ／パンくず／フッター／
     サイドバー／記事一覧カードの構造クラス写像＋SVG寸法ガード
   ※ [第2部] Cocoon適合レイヤーは Arkhe では不要なため収録しない。
   ============================================================ */

/* ============================================================
   美肌治療ラボ デザインシステム
   Cocoon「追加CSS」にそのまま貼るための完全版CSS
   方針：編集メディア風。白基調・余白広め・色は濃紺と医療ブルーの2色。
   装飾でなく「余白とタイポグラフィの階層」で見せる。
   グラデーションと強い影は、行動ボタン（緑）だけに許可する。
   ============================================================ */

/* ------------------------------------------------------------
   1. デザイントークン
   ------------------------------------------------------------ */
:root {
  /* 色 */
  --c-navy: #143C64;        /* 見出し・サイト名などの主色 */
  --c-blue: #2F6F9F;        /* リンク・アクセントの医療ブルー */
  --c-blue-dark: #23587F;   /* ホバー時のブルー */
  --c-blue-pale: #E9F1F7;   /* 薄いブルーの面（表ヘッダー等） */
  --c-blue-faint: #F4F8FB;  /* ごく薄い面（ボックス背景等） */
  --c-ink: #22303C;         /* 本文 */
  --c-ink-sub: #5D7182;     /* 補足テキスト・メタ情報 */
  --c-line: #D9E4EC;        /* 罫線 */
  --c-line-soft: #E8EFF4;   /* 弱い罫線 */
  --c-bg: #FFFFFF;
  --c-bg-soft: #F8FAFC;     /* ページ全体のごく薄い背景 */
  --c-green: #2E8B57;       /* CTA（行動）専用 */
  --c-green-dark: #1F7A4D;
  --c-green-shadow: rgba(31, 122, 77, .28);

  /* フォント */
  --font-base: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans CJK JP",
    "Noto Sans JP", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif;
  --fs-base: 17px;
  --fs-h1: 1.9rem;
  --fs-h2: 1.5rem;
  --fs-h3: 1.22rem;
  --fs-h4: 1.08rem;
  --fs-lead: 1.06rem;
  --fs-small: .82rem;
  --lh-body: 1.9;

  /* 余白スケール */
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-12: 3rem;
  --sp-16: 4rem;

  /* 角丸（役割で使い分ける。全部同じ丸さにしない） */
  --r-sm: 6px;    /* 画像・小物 */
  --r-md: 10px;   /* カード */
  --r-lg: 14px;   /* ボックス */
  --r-pill: 999px; /* ボタン専用 */

  /* 影（基本は罫線で区切る。影は浮き上がりの合図にだけ使う） */
  --sh-card: 0 1px 2px rgba(20, 60, 100, .04);
  --sh-lift: 0 2px 4px rgba(20, 60, 100, .05), 0 10px 28px rgba(20, 60, 100, .09);
  --sh-header: 0 1px 0 rgba(20, 60, 100, .05), 0 6px 20px rgba(20, 60, 100, .05);
}

/* ------------------------------------------------------------
   2. ベース
   ------------------------------------------------------------ */
body {
  font-family: var(--font-base);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--c-ink);
  letter-spacing: .02em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* 選択色も世界観に合わせる（細部まで手が入っている印象になる） */
::selection {
  background: var(--c-blue-pale);
  color: var(--c-navy);
}

a {
  color: var(--c-blue);
  text-decoration: none;
}
a:hover {
  color: var(--c-blue-dark);
}

/* 本文中のリンクは下線あり（メディアとしての標準作法） */
.entry-content a ,
.c-postContent a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(47, 111, 159, .45);
  text-decoration-thickness: 1px;
}
.entry-content a:hover ,
.c-postContent a:hover {
  text-decoration-color: var(--c-blue-dark);
}

/* ------------------------------------------------------------
   3. ヘッダー／グローバルナビ
   色帯でなく、白地＋下のヘアライン＋タイポグラフィで品を作る
   ------------------------------------------------------------ */
.header {
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-line);
  box-shadow: var(--sh-header);
}
.header-in {
  padding-top: var(--sp-4);
  padding-bottom: var(--sp-4);
}

/* サイト名：太さと字間でロゴらしく */
.site-name-text {
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--c-navy);
  line-height: 1.3;
}
.site-name-text-link:hover .site-name-text {
  color: var(--c-blue);
}

/* タグライン：主張させず、サイトの性格を添える */
.tagline {
  margin-top: var(--sp-1);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .14em;
  color: var(--c-ink-sub);
}

/* グローバルナビ：下線の伸びでホバーを示す（色ベタ塗りにしない） */
.navi-header .menu-item a,
#navi-header .menu-item a {
  padding: .55em 1em;
  font-size: .92rem;
  font-weight: 700;
  color: var(--c-navy);
  background-image: linear-gradient(var(--c-blue), var(--c-blue));
  background-repeat: no-repeat;
  background-size: 0% 2px;
  background-position: 50% 100%;
  transition: background-size .25s ease, color .25s ease;
}
.navi-header .menu-item a:hover,
#navi-header .menu-item a:hover {
  color: var(--c-blue);
  background-size: 70% 2px;
}
.navi-header .current-menu-item a,
#navi-header .current-menu-item a {
  color: var(--c-blue);
  background-size: 70% 2px;
}

/* ------------------------------------------------------------
   4. アピールエリア（ヒーロー）
   実写背景＋半透明の白パネル。写真の上に文字を直接載せない。
   ------------------------------------------------------------ */
.appeal {
  background-color: var(--c-blue-faint);
}
.appeal-in {
  padding-top: var(--sp-12);
  padding-bottom: var(--sp-12);
}
.appeal-content {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--sp-8);
  background: rgba(255, 255, 255, .93);
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: var(--r-lg);
  box-shadow: 0 12px 36px rgba(20, 60, 100, .12);
  text-align: center;
}
.appeal-title {
  font-size: 1.85rem;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: .03em;
  color: var(--c-navy);
}
.appeal-text {
  margin-top: var(--sp-4);
  font-size: .98rem;
  line-height: 1.95;
  color: var(--c-ink);
}
/* ヒーローのボタンは「サイト内の案内」なので紺。緑はアフィリエイト専用に温存 */
.appeal-button,
.appeal .button {
  display: inline-block;
  margin-top: var(--sp-6);
  padding: .85em 2.2em;
  border-radius: var(--r-pill);
  background: var(--c-navy);
  color: #fff;
  font-size: .98rem;
  font-weight: 700;
  letter-spacing: .05em;
  box-shadow: 0 6px 18px rgba(20, 60, 100, .25);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.appeal-button:hover,
.appeal .button:hover {
  background: var(--c-blue);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(20, 60, 100, .28);
}

/* ------------------------------------------------------------
   5. 記事カード（一覧）
   写真主体。影でなく罫線で区切り、ホバーでだけ少し浮かせる。
   ------------------------------------------------------------ */
.entry-card-wrap {
  margin-bottom: var(--sp-6);
}
.entry-card {
  height: 100%;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-card);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.entry-card:hover {
  transform: translateY(-3px);
  border-color: #BCD2E2;
  box-shadow: var(--sh-lift);
}
/* サムネイルは16:9で統一し、写真の比率のばらつきを見せない */
.entry-card-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--c-blue-faint);
}
.entry-card-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.entry-card:hover .entry-card-thumb img {
  transform: scale(1.03);
}

.entry-card-content {
  padding: var(--sp-4) var(--sp-6) var(--sp-6);
}
/* タイトルは2行までで省略し、カードの高さを揃える */
.entry-card-title {
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.55;
  color: var(--c-navy);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.entry-card-snippet {
  margin-top: var(--sp-2);
  font-size: var(--fs-small);
  line-height: 1.8;
  color: var(--c-ink-sub);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.entry-card-meta,
.entry-card-info {
  margin-top: var(--sp-3);
  font-size: var(--fs-small);
  color: var(--c-ink-sub);
}
/* カテゴリはベタ塗りラベルでなく、白地＋罫線の小さなチップに */
.entry-card-categorys .entry-category,
.entry-category {
  display: inline-block;
  margin: 0 var(--sp-1) var(--sp-2) 0;
  padding: .18em .7em;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--c-blue);
}

/* ------------------------------------------------------------
   6. 記事本文のタイポグラフィ
   見出しは帯（色ベタ）にしない。区切りは「上の余白＋書体の階層」。
   h2＝左に細い青線／h3＝下ヘアライン／h4＝小さな四角マーカー
   ------------------------------------------------------------ */
.entry-title ,
.c-pageTitle__main {
  font-size: var(--fs-h1);
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: .02em;
  color: var(--c-navy);
}
.article h2,
.p-entry h2,
.entry-content h2 ,
.c-postContent h2 {
  margin: 3em 0 1em;
  padding: 0 0 0 .6em;
  background: none;
  border: none;
  border-left: 4px solid var(--c-blue);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .02em;
  color: var(--c-navy);
}
.article h3,
.p-entry h3,
.entry-content h3 ,
.c-postContent h3 {
  margin: 2.4em 0 .9em;
  padding-bottom: .45em;
  border-bottom: 1px solid var(--c-line);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.55;
  color: var(--c-navy);
}
.article h4,
.p-entry h4,
.entry-content h4 ,
.c-postContent h4 {
  position: relative;
  margin: 2em 0 .7em;
  padding-left: 1.1em;
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: 1.6;
  color: var(--c-navy);
}
.article h4::before,
.p-entry h4::before,
.entry-content h4::before ,
.c-postContent h4::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--c-blue);
}

.entry-content p ,

.c-postContent p {
  margin: 0 0 1.6em;
}
.entry-content ul,
.c-postContent ul,
.entry-content ol ,
.c-postContent ol {
  margin: 0 0 1.6em;
  padding-left: 1.4em;
}
.entry-content li ,
.c-postContent li {
  margin-bottom: .45em;
}
.entry-content li:last-child ,
.c-postContent li:last-child {
  margin-bottom: 0;
}
.entry-content strong ,
.c-postContent strong {
  font-weight: 700;
}
.entry-content blockquote ,
.c-postContent blockquote {
  margin: 0 0 1.6em;
  padding: var(--sp-4) var(--sp-6);
  background: var(--c-blue-faint);
  border-left: 3px solid var(--c-line);
  font-size: .97em;
  color: var(--c-ink);
}
.entry-content blockquote p:last-child ,
.c-postContent blockquote p:last-child {
  margin-bottom: 0;
}
.entry-content img ,
.c-postContent img {
  border-radius: var(--r-sm);
}
.entry-content figure ,
.c-postContent figure {
  margin: 0 0 1.6em;
}
.entry-content figcaption ,
.c-postContent figcaption {
  margin-top: var(--sp-2);
  font-size: var(--fs-small);
  color: var(--c-ink-sub);
  text-align: center;
}

/* ------------------------------------------------------------
   7. 結論ボックス（記事冒頭の要約）
   薄ブルーの面＋小さなラベル。帯見出しにせず、面で静かに区切る。
   ------------------------------------------------------------ */
.conclusion-box {
  margin: var(--sp-6) 0 var(--sp-8);
  padding: var(--sp-6);
  background: var(--c-blue-faint);
  border: 1px solid var(--c-blue-pale);
  border-radius: var(--r-lg);
}
.conclusion-box .conclusion-title {
  margin: 0 0 var(--sp-3);
  font-size: .85rem;
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--c-blue);
}
.conclusion-box ul {
  margin: 0;
  padding-left: 1.3em;
}
.conclusion-box li {
  margin-bottom: .35em;
  font-weight: 500;
}
.conclusion-box li:last-child {
  margin-bottom: 0;
}
.conclusion-box p {
  margin: 0 0 .8em;
}
.conclusion-box p:last-child {
  margin-bottom: 0;
}

/* ------------------------------------------------------------
   8. 比較表
   料金比較はこのサイトの心臓部。数値は等幅数字で桁を揃え、
   先頭列（院名）は sticky で固定し、スマホでも見失わない。
   ------------------------------------------------------------ */
.entry-content table ,
.c-postContent table {
  width: 100%;
  margin: 0 0 var(--sp-8);
  border-collapse: collapse;
  font-size: .95rem;
  line-height: 1.7;
  font-variant-numeric: tabular-nums;
}
.entry-content table th,
.c-postContent table th,
.entry-content table td ,
.c-postContent table td {
  padding: .8em 1em;
  border-bottom: 1px solid var(--c-line-soft);
  text-align: left;
  vertical-align: top;
}
.entry-content table thead th ,
.c-postContent table thead th {
  background: var(--c-blue-pale);
  border-bottom: 1px solid var(--c-line);
  font-weight: 700;
  color: var(--c-navy);
  white-space: nowrap;
}
.entry-content table tbody tr:nth-child(even) ,
.c-postContent table tbody tr:nth-child(even) {
  background: var(--c-bg-soft);
}
.entry-content table tbody tr ,
.c-postContent table tbody tr {
  transition: background .2s ease;
}
.entry-content table tbody tr:hover ,
.c-postContent table tbody tr:hover {
  background: var(--c-blue-faint);
}
/* 数値セル：右寄せ＋等幅数字＋改行させない */
.entry-content table .num,
.c-postContent table .num,
.entry-content table td.num ,
.c-postContent table td.num {
  text-align: right;
  white-space: nowrap;
  font-weight: 700;
  color: var(--c-navy);
}
/* 先頭列を固定（背景は不透明にしてゼブラと揃える） */
.entry-content table th:first-child,
.c-postContent table th:first-child,
.entry-content table td:first-child ,
.c-postContent table td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--c-bg);
  font-weight: 700;
  color: var(--c-navy);
}
.entry-content table thead th:first-child ,
.c-postContent table thead th:first-child {
  z-index: 2;
  background: var(--c-blue-pale);
}
.entry-content table tbody tr:nth-child(even) td:first-child ,
.c-postContent table tbody tr:nth-child(even) td:first-child {
  background: var(--c-bg-soft);
}
.entry-content table tbody tr:hover td:first-child ,
.c-postContent table tbody tr:hover td:first-child {
  background: var(--c-blue-faint);
}

/* ------------------------------------------------------------
   9. FAQ
   絵文字やアイコンに頼らず、Q/Aの文字マーカーと罫線で信頼感を出す
   ------------------------------------------------------------ */
.faq-item {
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--c-line-soft);
}
.faq-item:first-of-type {
  border-top: 1px solid var(--c-line-soft);
}
.faq-q {
  position: relative;
  margin: 0 0 var(--sp-2);
  padding-left: 2em;
  font-weight: 700;
  line-height: 1.7;
  color: var(--c-navy);
}
.faq-q::before {
  content: "Q";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 800;
  color: var(--c-blue);
}
.faq-a {
  position: relative;
  margin: 0;
  padding-left: 2em;
  line-height: 1.85;
}
.faq-a::before {
  content: "A";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 800;
  color: var(--c-ink-sub);
}

/* ------------------------------------------------------------
   10. CTA（提携先のご案内）
   緑はここだけ。グラデーションと影を許可する唯一の部品。
   「押してほしい」は伝えるが、うるさくしない。パルスは呼吸程度。
   構造：.cta-wrap > .cta-lead + .cta-btn > a + .cta-note
   ------------------------------------------------------------ */
.cta-wrap {
  margin: var(--sp-8) 0;
  padding: var(--sp-6);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  text-align: center;
}
.cta-lead {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-lead);
  font-weight: 700;
  line-height: 1.7;
  color: var(--c-navy);
}
.cta-btn {
  margin: 0;
}
.cta-btn a,
.entry-content .cta-btn a ,
.c-postContent .cta-btn a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  max-width: 480px;
  min-height: 56px;
  padding: .9em 2em;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, #35A068, var(--c-green-dark));
  color: #fff;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-decoration: none;
  box-shadow: 0 8px 22px var(--c-green-shadow);
  animation: ctaPulse 2.6s ease-in-out infinite;
  transition: box-shadow .25s ease;
}
.cta-btn a:hover,
.entry-content .cta-btn a:hover ,
.c-postContent .cta-btn a:hover {
  animation: none;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(31, 122, 77, .38);
  color: #fff;
  text-decoration: none;
}
/* パルスは1.02倍まで。影の明滅で「呼吸」だけさせる */
@keyframes ctaPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 8px 22px rgba(31, 122, 77, .26);
  }
  50% {
    transform: scale(1.02);
    box-shadow: 0 10px 26px rgba(31, 122, 77, .36);
  }
}
.cta-note {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-small);
  line-height: 1.7;
  color: var(--c-ink-sub);
}

/* ------------------------------------------------------------
   11. パンくず／ページネーション／フッター
   ------------------------------------------------------------ */
.breadcrumb {
  font-size: var(--fs-small);
  color: var(--c-ink-sub);
}
.breadcrumb a {
  color: var(--c-ink-sub);
}
.breadcrumb a:hover {
  color: var(--c-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ページネーション：カードと同じ罫線チップ型で揃える */
.pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
  margin: var(--sp-8) 0;
}
.pagination a,
.pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 .6em;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  font-size: .92rem;
  font-weight: 700;
  color: var(--c-navy);
  font-variant-numeric: tabular-nums;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.pagination a:hover {
  border-color: var(--c-blue);
  color: var(--c-blue);
}
.pagination .current {
  background: var(--c-navy);
  border-color: var(--c-navy);
  color: #fff;
}

/* フッター：締めはブランドの紺で */
.footer {
  background: var(--c-navy);
  color: #DCE7F0;
}
.footer a {
  color: #fff;
}
.footer a:hover {
  color: var(--c-blue-pale);
}
.copyright {
  font-size: var(--fs-small);
  letter-spacing: .04em;
}

/* モバイルフッターメニュー：白地＋上ヘアラインで誤タップを防ぐ */
.mobile-footer-menu-buttons {
  background: var(--c-bg);
  border-top: 1px solid var(--c-line);
  box-shadow: 0 -4px 16px rgba(20, 60, 100, .06);
}
.mobile-footer-menu-buttons .menu-button-in {
  color: var(--c-navy);
}
.mobile-footer-menu-buttons .menu-caption {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.mobile-footer-menu-buttons .menu-icon {
  color: var(--c-blue);
}

/* ------------------------------------------------------------
   12. レスポンシブ
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  :root {
    --fs-base: 16px;
    --fs-h1: 1.55rem;
    --fs-h2: 1.32rem;
    --fs-h3: 1.15rem;
    --fs-h4: 1.05rem;
  }
  .site-name-text {
    font-size: 1.35rem;
  }
  .tagline {
    letter-spacing: .1em;
  }
  .appeal-in {
    padding: var(--sp-8) var(--sp-4);
  }
  .appeal-content {
    padding: var(--sp-6) var(--sp-4);
  }
  .appeal-title {
    font-size: 1.5rem;
  }
  .article h2,
  .p-entry h2,
  .entry-content h2 ,
  .c-postContent h2 {
    margin-top: 2.4em;
  }
  /* 比較表は横スクロールにし、先頭列の固定と合わせて使う。
     右端の内側の影で「まだ続きがある」ことを示唆する */
  .entry-content table ,
  .c-postContent table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: inset -18px 0 18px -18px rgba(20, 60, 100, .22);
  }
  .entry-content table th,
  .c-postContent table th,
  .entry-content table td ,
  .c-postContent table td {
    padding: .7em .8em;
  }
  .cta-wrap {
    padding: var(--sp-6) var(--sp-4);
  }
  .footer-in {
    padding-bottom: var(--sp-8);
  }
}

@media (max-width: 480px) {
  .appeal-title {
    font-size: 1.32rem;
    line-height: 1.55;
  }
  .appeal-button,
  .appeal .button {
    width: 100%;
    text-align: center;
  }
  .entry-card-content {
    padding: var(--sp-4);
  }
  .entry-card-title {
    font-size: 1.05rem;
  }
  .cta-btn a,
  .entry-content .cta-btn a ,
  .c-postContent .cta-btn a {
    padding: .9em 1em;
    font-size: 1rem;
  }
  .conclusion-box {
    padding: var(--sp-4);
  }
  .pagination {
    gap: 6px;
  }
  .pagination a,
  .pagination span {
    min-width: 38px;
    height: 38px;
  }
}

/* 動きが苦手な読者にはアニメーションを止める */
@media (prefers-reduced-motion: reduce) {
  .cta-btn a,
  .entry-content .cta-btn a ,
  .c-postContent .cta-btn a {
    animation: none;
  }
  .entry-card,
  .entry-card-thumb img,
  .appeal-button,
  .appeal .button,
  .navi-header .menu-item a,
  #navi-header .menu-item a {
    transition: none;
  }
}


/* ============================================================
   CTA v2 追補（2026-11-10）— cta-system-v2-2026-11-10.md の仕様。
   既存のCTAセクションより後に置くことで有効化する。
   ============================================================ */
.cta-wrap { background: #fff; border: 2px solid #2F6F9F; }
.cta-head { font-weight: 800; color: #143C64; font-size: 1.05em; margin-bottom: 8px; }
.cta-head .cta-badge { background: #2F6F9F; color: #fff; font-size: .72em; border-radius: 999px; padding: 2px 10px; margin-left: 8px; vertical-align: middle; font-weight: 700; }
.cta-points { list-style: none; margin: 10px 0; padding: 0; }
.cta-points li { margin: 4px 0; }
.cta-points li::before { content: "✓"; color: #1F7A4D; font-weight: 800; margin-right: .5em; }
.cta-price { font-size: 1.25em; font-weight: 800; color: #143C64; font-variant-numeric: tabular-nums; margin: 10px 0 2px; }
.cta-price small { font-size: .62em; font-weight: 600; color: #33566E; }
.cta-micro { font-size: .85em; color: #33566E; margin-top: 8px; }
.cta-btn a { min-height: 64px; font-size: 1.12em; padding: 18px 28px; }

/* ============================================================
   補足ルール（2026-11-11）— 実装時の所見から追加。
   ヒーロー見出しの改行（Cocoonが見出し欄の<br>を除去するため幅で実現）と、
   CTAブロック内の左揃え固定。
   ============================================================ */
.appeal-title { max-width: 14em; margin-left: auto; margin-right: auto; }
.cta-wrap { text-align: left; }
@media (max-width: 480px) { .appeal-title { max-width: none; font-size: 0.85rem; } }

/* === 競合分析2026-11-11 追加部品：信頼ストリップ／統計ストリップ／セルフチェック === */
.trust-strip{display:flex;flex-wrap:wrap;gap:6px 14px;background:#f4f7fb;border:1px solid #d7e3f2;border-radius:8px;padding:10px 14px;font-size:13px;color:#33475b;margin:0 0 18px;line-height:1.6}
.trust-strip b{color:#123a6d}
.stat-strip{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 20px}
.stat-strip .stat{flex:1 1 100px;background:#123a6d;color:#fff;border-radius:10px;padding:10px 12px;text-align:center}
.stat-strip .stat .num{display:block;font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}
.stat-strip .stat .lbl{display:block;font-size:11px;opacity:.85;margin-top:2px}
.selfcheck{border:2px solid #2f7fd0;border-radius:10px;padding:14px 16px;margin:18px 0;background:#f7fbff}
.selfcheck .sc-title{font-weight:700;color:#123a6d;margin-bottom:8px}


/* ============================================================
   v2 追補（2026-11-11 プレビュー）— 見た目の格上げ
   方針は v1 を継承：白基調・ネイビー＋医療ブルー・緑はCTA専用。
   追加するのは「ロゴマーク」「番号つき見出し」「カテゴリチップ」
   「比較カード」「図解」「サイドバー部品」。既存ルールは壊さない。
   ============================================================ */

/* ------------------------------------------------------------
   v2-a. ヘッダーロゴ（SVGマーク＋テキストロゴ）
   マークは「円（輪郭＝客観性・全体像）＋水滴（うるおい・肌）」。
   医療十字は使わない。線は太めにして小サイズでも潰れないように。
   ------------------------------------------------------------ */
.site-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.site-logo-mark {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
}
.site-logo-mark svg {
  display: block;
  width: 100%;
  height: 100%;
}
.site-logo-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.site-logo .site-name-text {
  line-height: 1.25;
}
.site-logo .tagline {
  margin-top: 0;
}
.site-logo:hover .site-name-text {
  color: var(--c-blue);
}
@media (max-width: 768px) {
  .site-logo-mark {
    width: 34px;
    height: 34px;
  }
  .site-logo {
    gap: 9px;
  }
}

/* ------------------------------------------------------------
   v2-f1. 見出しの格上げ：左ボーダー＋通し番号
   記事内 h2 に 01 / 02 … の番号チップを付け、雑誌の章立ての
   リズムにする。番号は CSS カウンタで自動付与（HTML変更不要）。
   ------------------------------------------------------------ */
.entry-content ,
.c-postContent {
  counter-reset: v2h2;
}
.article h2,
.p-entry h2,
.entry-content h2 ,
.c-postContent h2 {
  position: relative;
  counter-increment: v2h2;
  padding-left: 2.9em;
  min-height: 1.5em;
}
.article h2::before,
.p-entry h2::before,
.entry-content h2::before ,
.c-postContent h2::before {
  content: counter(v2h2, decimal-leading-zero);
  position: absolute;
  left: .55em;
  top: .08em;
  font-size: .62em;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1.9;
  color: var(--c-blue);
  font-variant-numeric: tabular-nums;
}
/* セクション見出し（トップ等）も同じ作法に寄せる */
.section-title {
  display: flex;
  align-items: baseline;
  gap: .6em;
}
.section-title .section-title-en {
  font-size: .62em;
  font-weight: 800;
  letter-spacing: .18em;
  color: var(--c-blue);
}

/* ------------------------------------------------------------
   v2-b. カテゴリチップ（目的から探す）
   インラインSVGアイコン＋ラベルのピル型チップ。
   白地＋罫線でカード類と作法を揃え、ホバーでだけ浮かせる。
   ------------------------------------------------------------ */
.cat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cat-chip a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px 10px 13px;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--c-navy);
  box-shadow: var(--sh-card);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.cat-chip a:hover {
  transform: translateY(-2px);
  border-color: var(--c-blue);
  color: var(--c-blue-dark);
  box-shadow: var(--sh-lift);
  text-decoration: none;
}
.cat-chip-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--c-blue-pale);
}
.cat-chip-icon svg {
  width: 17px;
  height: 17px;
}
.cat-chip-note {
  display: block;
  margin-top: var(--sp-3);
  font-size: var(--fs-small);
  color: var(--c-ink-sub);
}
@media (max-width: 560px) {
  .cat-chips {
    gap: 8px;
  }
  .cat-chip a {
    padding: 8px 14px 8px 10px;
    font-size: .88rem;
  }
}

/* ------------------------------------------------------------
   v2-c. 比較カード（掲載順番号つき）
   番号は「比較表の掲載順」を示すもので、優劣の順位ではない。
   星評価は使わない。価格は等幅数字で大きく、条件は小さく正直に。
   ------------------------------------------------------------ */
.compare-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 0 0 var(--sp-4);
}
.compare-card {
  position: relative;
  padding: 20px 18px 16px;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-card);
}
.compare-card-num {
  position: absolute;
  top: -11px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 10px;
  background: var(--c-navy);
  border-radius: var(--r-pill);
  color: #fff;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
}
.compare-card-name {
  margin: 4px 0 2px;
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.5;
  color: var(--c-navy);
}
.compare-card-plan {
  margin: 0 0 10px;
  font-size: .8rem;
  line-height: 1.6;
  color: var(--c-ink-sub);
}
.compare-card-price {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--c-navy);
  font-variant-numeric: tabular-nums;
}
.compare-card-price small {
  font-size: .68em;
  font-weight: 700;
  color: var(--c-ink-sub);
}
.compare-card-meta {
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--c-line-soft);
  font-size: .76rem;
  line-height: 1.7;
  color: var(--c-ink-sub);
}
.compare-order-note {
  margin: 0 0 var(--sp-8);
  font-size: var(--fs-small);
  line-height: 1.7;
  color: var(--c-ink-sub);
}
@media (max-width: 900px) {
  .compare-cards {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* ------------------------------------------------------------
   v2-d. メカニズム図解（インラインSVG用フレーム）
   図そのものはHTML側のSVGで描く。ここでは「図版」としての
   体裁（面・罫線・キャプション）だけを担う。
   ------------------------------------------------------------ */
.mechanism-figure {
  margin: 0 0 var(--sp-8);
  padding: var(--sp-6) var(--sp-6) var(--sp-4);
  background: var(--c-blue-faint);
  border: 1px solid var(--c-blue-pale);
  border-radius: var(--r-lg);
  text-align: center;
}
.mechanism-figure svg {
  width: 100%;
  max-width: 560px;
  height: auto;
}
.mechanism-figure figcaption {
  margin-top: var(--sp-3);
  font-size: var(--fs-small);
  line-height: 1.8;
  color: var(--c-ink-sub);
  text-align: center;
}
@media (max-width: 560px) {
  .mechanism-figure {
    padding: var(--sp-4) var(--sp-3) var(--sp-3);
  }
}

/* ------------------------------------------------------------
   v2-e. サイドバー：プロフィールカード／人気記事リスト
   「誰が書いているか」を常時見せるのが医療メディアの作法。
   カードの影・角丸は記事カードと統一する。
   ------------------------------------------------------------ */
.sidebar-widget {
  margin-bottom: var(--sp-8);
}
.sidebar-title {
  margin: 0 0 var(--sp-4);
  padding-left: 12px;
  border-left: 4px solid var(--c-blue);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1.5;
  color: var(--c-navy);
}
.profile-card {
  padding: var(--sp-6);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-card);
  text-align: center;
}
.profile-card-mark {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--sp-3);
}
.profile-card-mark svg {
  display: block;
  width: 100%;
  height: 100%;
}
.profile-card-name {
  margin: 0 0 var(--sp-2);
  font-size: 1rem;
  font-weight: 800;
  color: var(--c-navy);
}
.profile-card-text {
  margin: 0 0 var(--sp-4);
  font-size: .82rem;
  line-height: 1.85;
  color: var(--c-ink-sub);
  text-align: left;
}
.profile-card-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.profile-card-links a {
  display: block;
  padding: 8px 12px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  font-size: .82rem;
  font-weight: 700;
  color: var(--c-blue);
  transition: border-color .2s ease, background .2s ease;
}
.profile-card-links a:hover {
  border-color: var(--c-blue);
  background: var(--c-blue-faint);
  text-decoration: none;
}
/* 人気記事：順位でなく「よく読まれている記事」の番号リスト */
.popular-list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: v2pop;
}
.popular-list li {
  counter-increment: v2pop;
  border-bottom: 1px solid var(--c-line-soft);
}
.popular-list li:first-child {
  border-top: 1px solid var(--c-line-soft);
}
.popular-list a {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 2px;
  color: var(--c-ink);
  line-height: 1.6;
  font-size: .9rem;
  font-weight: 500;
}
.popular-list a::before {
  content: counter(v2pop, decimal-leading-zero);
  flex: 0 0 auto;
  font-size: .78rem;
  font-weight: 800;
  line-height: 2;
  color: var(--c-blue);
  font-variant-numeric: tabular-nums;
}
.popular-list a:hover {
  color: var(--c-blue-dark);
  text-decoration: none;
}

/* フッターにロゴマークを置けるようにする（紺地用に線色を反転） */
.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--sp-4);
}
.footer-logo .site-name-text {
  color: #fff;
  font-size: 1.25rem;
}
.footer-logo-mark {
  width: 34px;
  height: 34px;
}

/* ------------------------------------------------------------
   v2-f2. 全体の仕上げ：余白リズムと「素性消し」
   - セクション間の余白を広げ、1画面に1テーマの呼吸にする
   - カードの影は v1 の作法（罫線主体・ホバーで浮く）を維持しつつ
     角丸を r-md に統一済みであることを明示（追加変更なし）
   ------------------------------------------------------------ */
.appeal-in {
  padding-top: var(--sp-16);
  padding-bottom: var(--sp-16);
}
.entry-card-content {
  padding-bottom: var(--sp-6);
}
.footer {
  border-top: 4px solid var(--c-blue);
}
@media (max-width: 768px) {
  .appeal-in {
    padding-top: var(--sp-8);
    padding-bottom: var(--sp-8);
  }
}
@media (prefers-reduced-motion: reduce) {
  .cat-chip a,
  .profile-card-links a {
    transition: none;
  }
}

/* ============================================================
   [第3部] モバイル表組みの実サイト修正（第1部 §12 の上書き）
   正本の「table を display:block でスクロールさせる」方式は、
   Gutenberg の表（figure 包み）と組み合わさると table-layout が
   崩れることが実サイトで確認済み。検証済みの方式
   （figure をスクロールコンテナにし、table は display:table に戻す）
   に、後に置くことで差し替える。
   ============================================================ */
@media (max-width: 768px) {
  .entry-content figure.wp-block-table ,
  .c-postContent figure.wp-block-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: inset -18px 0 18px -18px rgba(20, 60, 100, .22);
  }
  .entry-content table ,
  .c-postContent table {
    display: table;
    min-width: 600px;
  }
}

/* ============================================================
   [第4部] 強調レイヤー（2026-11-11 オーナー方針「強調の階層」）
   清潔な地（紺＋ブルー）は正本のまま、価格とCTAまわりにだけ
   差し色（コーラル〜オレンジ系）を限定使用し、平坦さをなくす。
   統計ストリップ／信頼ストリップ／比較バッジ／ヒーローボタンの色は
   仕様（design-v2-implementation-spec.md §12）どおり変更しない。
   ============================================================ */
:root {
  --c-accent: #E4572E;       /* 差し色：価格の強調専用 */
  --c-accent-dark: #C7431F;
  --c-accent-pale: #FDEEE7;  /* 最安セルの地色 */
}

/* CTA内の価格：差し色＋大きめにして本文の平坦さから抜けさせる
   （第1部の CTA v2 追補 .cta-price への上書き） */
.cta-price {
  color: var(--c-accent);
  font-size: 1.5em;
}
.cta-price small {
  color: var(--c-ink-sub);
}

/* 比較表の「最安」セル（記事側で is-best を付けた場合のみ効く） */
.entry-content table td.is-best ,
.c-postContent table td.is-best {
  background: var(--c-accent-pale);
  color: var(--c-accent-dark);
  font-weight: 800;
}

/* 比較カードで最安を指す場合の価格色（記事側の任意クラス） */
.compare-card.is-best .compare-card-price {
  color: var(--c-accent);
}

/* 大きな数字のためのユーティリティ */
.price-big {
  font-size: 1.55em;
  font-weight: 800;
  line-height: 1.3;
  color: var(--c-navy);
  font-variant-numeric: tabular-nums;
}
.accent {
  color: var(--c-accent);
}
/* ============================================================
   [Arkhe適合レイヤー] テーマ構造クラスへの写像
   design-system-v2.css（第1部）は .header / .navi-header /
   .footer / .sidebar-title 等の Cocoon 前提クラスで書かれている。
   Arkhe ではそれらが存在しないため、同じ設計値（色・余白・書体）を
   Arkhe の実マークアップ（GitHub loos/arkhe master で確認）へ
   写し替えたレイヤーをここに置く。第1部側の旧クラス指定は
   トップページ（固定ページ369）の静的HTML等で使われるため温存する。
   ============================================================ */

/* ------------------------------------------------------------
   A2-1. ヘッダー
   Arkhe: <header id="header" class="l-header">
          <div class="l-header__body l-container">
   ------------------------------------------------------------ */
.l-header {
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-line);
  box-shadow: var(--sh-header);
}
.l-header__body {
  padding-top: var(--sp-4);
  padding-bottom: var(--sp-4);
}
/* ナビをヘッダー下段に置く設定（move_gnav_under）の場合も同じ作法 */
.l-headerUnder {
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-line);
}

/* テキストロゴ：サイト名タイポグラフィ（仕様§3 .site-name-text と同一値）
   マークは ::before のインラインSVGで付ける（テンプレート改変なし） */
.l-header__logo.has-text .c-headLogo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1.3;
  color: var(--c-navy);
  text-decoration: none;
}
.l-header__logo.has-text .c-headLogo::before {
  content: "";
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Ccircle cx='22' cy='22' r='19' fill='none' stroke='%23143C64' stroke-width='3'/%3E%3Cpath d='M22 10.5c0 0-7.2 8.8-7.2 13.1a7.2 7.2 0 0 0 14.4 0C29.2 19.3 22 10.5 22 10.5Z' fill='%232F6F9F'/%3E%3Ccircle cx='19.3' cy='23.6' r='1.7' fill='%23FFFFFF' opacity='.85'/%3E%3C/svg%3E") center / contain no-repeat;
}
.l-header__logo.has-text .c-headLogo:hover {
  color: var(--c-blue);
}
/* 画像ロゴを使う場合（カスタマイザーでロゴ画像を設定したとき）の高さ */
.c-headLogo__img {
  width: auto;
  height: 42px;
}

/* タグライン（仕様§3 .tagline と同一値） */
.c-tagline {
  margin-top: var(--sp-1);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .14em;
  color: var(--c-ink-sub);
}

/* ------------------------------------------------------------
   A2-2. グローバルナビ
   Arkhe: <nav id="gnav" class="c-gnavWrap"><ul class="c-gnav">
          <li class="c-gnav__li"><a class="c-gnav__a">
   メニュー位置: header_menu
   ------------------------------------------------------------ */
.c-gnav .c-gnav__li > a {
  padding: .55em 1em;
  font-size: .92rem;
  font-weight: 700;
  color: var(--c-navy);
  background-image: linear-gradient(var(--c-blue), var(--c-blue));
  background-repeat: no-repeat;
  background-size: 0% 2px;
  background-position: 50% 100%;
  transition: background-size .25s ease, color .25s ease;
}
.c-gnav .c-gnav__li > a:hover {
  color: var(--c-blue);
  background-size: 70% 2px;
}
.c-gnav .current-menu-item > a,
.c-gnav .current_page_item > a {
  color: var(--c-blue);
  background-size: 70% 2px;
}
/* サブメニューは白地＋罫線のカード（下線アニメーションは付けない） */
.c-gnav .sub-menu {
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lift);
}
.c-gnav .sub-menu a {
  background-image: none;
  font-size: .88rem;
}

/* ------------------------------------------------------------
   A2-3. パンくず
   Arkhe: <nav id="breadcrumb" class="p-breadcrumb">
          <ol class="p-breadcrumb__list"><li class="p-breadcrumb__item">
          <a|span class="p-breadcrumb__text">
   ------------------------------------------------------------ */
.p-breadcrumb__list {
  font-size: var(--fs-small);
  color: var(--c-ink-sub);
}
.p-breadcrumb a .p-breadcrumb__text,
a.p-breadcrumb__text {
  color: var(--c-ink-sub);
}
a.p-breadcrumb__text:hover {
  color: var(--c-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ------------------------------------------------------------
   A2-4. フッター
   Arkhe: <footer id="footer" class="l-footer">
          .l-footer__inner / .l-footer__widgets / .l-footer__foot
          フッターナビ <ul class="l-footer__nav">（位置: footer_menu）
          コピーライト <p class="c-copyright">（Arkhe設定 copyright）
   ------------------------------------------------------------ */
.l-footer {
  background: var(--c-navy);
  border-top: 4px solid var(--c-blue);
  color: #DCE7F0;
}
.l-footer a {
  color: #fff;
}
.l-footer a:hover {
  color: var(--c-blue-pale);
}
.l-footer__nav a {
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: .04em;
}
.c-copyright {
  font-size: var(--fs-small);
  letter-spacing: .04em;
}

/* ------------------------------------------------------------
   A2-5. サイドバーウィジェット
   Arkhe: エリア sidebar-1、ラッパー <div class="c-widget ...">、
          タイトル <div class="c-widget__title -side">
   値は仕様 v2-e（.sidebar-title）と同一。
   ------------------------------------------------------------ */
.c-widget {
  margin-bottom: var(--sp-8);
}
.c-widget__title.-side {
  margin: 0 0 var(--sp-4);
  padding-left: 12px;
  border-left: 4px solid var(--c-blue);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1.5;
  color: var(--c-navy);
}

/* ------------------------------------------------------------
   A2-6. 記事一覧カード（Arkhe標準の投稿リスト → 仕様§5の写像）
   Arkhe: <ul class="p-postList -type-card|-type-list">
          <li class="p-postList__item"><a class="p-postList__link">
          サムネイル .p-postList__thumb.c-postThumb > figure > img
          本文 .p-postList__body（タイトル .p-postList__title、
          抜粋 .p-postList__excerpt、メタ .p-postList__meta）
   ------------------------------------------------------------ */
.p-postList.-type-card .p-postList__item {
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-card);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.p-postList.-type-card .p-postList__item:hover {
  transform: translateY(-3px);
  border-color: #BCD2E2;
  box-shadow: var(--sh-lift);
}
.p-postList__link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.p-postList__thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.p-postList.-type-card .p-postList__body {
  padding: var(--sp-4) var(--sp-6) var(--sp-6);
}
.p-postList__title {
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.55;
  color: var(--c-navy);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.p-postList__excerpt {
  margin-top: var(--sp-2);
  font-size: var(--fs-small);
  line-height: 1.8;
  color: var(--c-ink-sub);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.p-postList__meta {
  margin-top: var(--sp-3);
  font-size: var(--fs-small);
  color: var(--c-ink-sub);
}

/* ------------------------------------------------------------
   A2-7. インラインSVGの寸法ガード（アイコン巨大化対策）
   テーマ移行直後のプレビューで、寸法指定のないインラインSVGが
   巨大化する現象を確認済み。該当クラスには必ず寸法を効かせる。
   ------------------------------------------------------------ */
.cat-chip-icon svg,
.c-postContent .cat-chip-icon svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}
.site-logo-mark svg,
.profile-card-mark svg {
  display: block;
  width: 100%;
  height: 100%;
}
.footer-logo-mark svg {
  display: block;
  width: 34px;
  height: 34px;
}
.mechanism-figure svg {
  display: block;
  width: 100%;
  height: auto;
}
/* クラスなしで本文に置かれたSVGが横幅をはみ出さないための保険 */
.c-postContent svg {
  max-width: 100%;
}

/* ------------------------------------------------------------
   A2-8. レスポンシブ（仕様§12のモバイル値を Arkhe 構造へ）
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  .l-header__logo.has-text .c-headLogo {
    font-size: 1.35rem;
  }
  .l-header__logo.has-text .c-headLogo::before {
    width: 34px;
    height: 34px;
  }
  .c-headLogo__img {
    height: 34px;
  }
  .c-tagline {
    letter-spacing: .1em;
  }
}