@charset "UTF-8";
/*
Theme Name: E&N Blog
Theme URI: https://iso-rescue.jp/
Author: 株式会社イーアンドエヌ
Author URI: https://iso-rescue.jp/
Description: 株式会社イーアンドエヌ コーポレートサイトとデザインを完全に統一したブログ専用テーマ。ヘッダー・フッター・デザイントークンはサイトルートの /css/style.css を共有し、本ファイルはブログ固有（記事本文・一覧）のスタイルのみを定義します。
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: en-blog
Tags: blog, corporate, japanese, custom-colors, responsive-layout
*/

/* =============================================================
   E&N Blog — ブログ固有スタイル

   ＜前提＞
   このファイルは、コーポレートサイトの /css/style.css を読み込んだ «後» に
   読み込まれる（functions.php の en_enqueue_assets を参照）。
   したがって、以下のデザイントークンはすべて継承済みで、そのまま使える。

     ネイビー … --c-navy-950 〜 --c-navy-500  （ベース）
     ブルー   … --c-sky-700 〜 --c-sky-50     （メイン／信頼感）
     オレンジ … --c-cv-700 〜 --c-cv-50       （アクセント／CV・一点強調）
     無彩色   … --c-text / --c-text-weak / --c-line / --c-white
     影       … --shadow-sm / --shadow-md / --shadow-lg
     角丸     … --radius (3px) / --radius-lg (4px)
     余白     … --gutter / --header-h

   ＜ルール＞
   ・生のカラーコードを新規に書かない。必ず上記の変数を使う。
   ・コーポレートサイト側のクラス（.header / .footer / .btn / .container /
     .section / .page-hero / .breadcrumb 等）は «上書きしない»。
     ブログ固有の要素だけをここで定義する。
============================================================= */

/* -------------------------------------------------------------
   0. ブログ固有トークン
------------------------------------------------------------- */
:root {
  /* 記事本文の基準（読み物としての可読性を最優先） */
  --article-font-size: 1rem;      /* 16px */
  --article-line-height: 1.95;
  --article-measure: 100%;        /* 行長は .container--narrow (860px) が担保 */
  --article-space: 1.6em;         /* 段落間の標準余白 */
}

/* -------------------------------------------------------------
   1. 共通ユーティリティ
------------------------------------------------------------- */
.blog-main {
  /* ヘッダーは position: fixed。各ページ先頭の .page-hero が
     calc(var(--header-h) + 64px) の上余白を持つため、ここでは何も足さない。 */
  display: block;
}

/* 検索フォームのラベル等で使う（コーポレート側に .sr-only がある前提だが、
   読み込み順に依存しないよう保険として再定義） */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* -------------------------------------------------------------
   2. ブログのページヒーロー
------------------------------------------------------------- */
.blog-hero .page-hero__lead {
  max-width: 720px;
}

/* -------------------------------------------------------------
   3. 記事一覧（カードグリッド）
------------------------------------------------------------- */
.post-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}

.post-card {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease);
}
.post-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
  border-color: var(--c-sky-200);
}

.post-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.post-card__thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--c-sky-50);
}
.post-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
.post-card:hover .post-card__img { transform: scale(1.04); }

/* アイキャッチ未設定時のプレースホルダ（ネイビー地＋カテゴリー名） */
.post-card__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: linear-gradient(135deg, var(--c-navy-800) 0%, var(--c-sky-700) 100%);
  color: var(--c-white);
  font-family: var(--font-num);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-align: center;
}

.post-card__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  padding: 22px 22px 24px;
}

.post-card__cat {
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: var(--radius);
  background: var(--c-sky-100);
  color: var(--c-sky-700);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
}

.post-card__title {
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--c-navy-900);
  transition: color .25s var(--ease);
}
.post-card:hover .post-card__title { color: var(--c-sky-600); }

.post-card__excerpt {
  font-size: .88rem;
  line-height: 1.85;
  color: var(--c-text-weak);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--c-line);
  font-size: .74rem;
  color: var(--c-text-mute);
  font-family: var(--font-num);
  letter-spacing: .06em;
}
.post-card__read { font-family: var(--font-base); letter-spacing: 0; }

@media (min-width: 600px) {
  .post-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .post-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; }
}

/* -------------------------------------------------------------
   4. ページネーション
------------------------------------------------------------- */
.blog-pagination {
  margin-top: 56px;
}
.blog-pagination ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  list-style: none;
}
.blog-pagination a,
.blog-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-white);
  color: var(--c-navy-700);
  font-family: var(--font-num);
  font-size: .9rem;
  text-decoration: none;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.blog-pagination a:hover {
  background: var(--c-sky-50);
  border-color: var(--c-sky-300);
  color: var(--c-sky-700);
}
.blog-pagination .current {
  background: var(--c-navy-800);
  border-color: var(--c-navy-800);
  color: var(--c-white);
  font-weight: 700;
}
.blog-pagination .dots { border-color: transparent; background: transparent; }

/* -------------------------------------------------------------
   5. 記事詳細：ヒーロー
------------------------------------------------------------- */
.article-hero__cat {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.article-hero__cat a {
  padding: 4px 12px;
  border-radius: var(--radius);
  background: var(--c-cv-500);
  color: var(--c-white);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none;
  transition: background .25s var(--ease);
}
.article-hero__cat a:hover { background: var(--c-cv-700); }

.article-hero__title {
  font-size: 1.55rem;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: .01em;
  color: var(--c-navy-900);
}

.article-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 18px;
  font-size: .78rem;
  color: var(--c-text-weak);
  font-family: var(--font-num);
  letter-spacing: .06em;
}
.article-hero__meta span { font-family: var(--font-base); letter-spacing: 0; }

@media (min-width: 768px) {
  .article-hero__title { font-size: 2.15rem; }
}

/* -------------------------------------------------------------
   6. 記事詳細：外枠
------------------------------------------------------------- */
.article { padding-top: 44px; }

.article__eyecatch {
  margin-bottom: 36px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.article__eyecatch img {
  display: block;
  width: 100%;
  height: auto;
}

/* -------------------------------------------------------------
   7. 目次
------------------------------------------------------------- */
.toc {
  margin: 0 0 40px;
  padding: 24px 22px;
  background: var(--c-sky-50);
  border: 1px solid var(--c-sky-200);
  border-radius: var(--radius-lg);
}
.toc__title {
  position: relative;
  margin-bottom: 14px;
  padding-left: 14px;
  font-size: .95rem;
  font-weight: 700;
  color: var(--c-navy-900);
  letter-spacing: .06em;
}
.toc__title::before {
  content: "";
  position: absolute;
  left: 0;
  top: .35em;
  width: 4px;
  height: 1em;
  background: var(--c-cv-500);
  border-radius: 2px;
}
.toc__list { list-style: none; }
.toc__item + .toc__item { margin-top: 8px; }
.toc__item a {
  color: var(--c-navy-700);
  font-size: .88rem;
  line-height: 1.7;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.toc__item a:hover {
  color: var(--c-sky-600);
  border-bottom-color: var(--c-sky-300);
}
.toc__item--h2 { font-weight: 700; }
.toc__item--h2 a::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 10px;
  vertical-align: middle;
  background: var(--c-sky-500);
  border-radius: 50%;
}
.toc__item--h3 {
  padding-left: 26px;
  font-weight: 400;
}
.toc__item--h3 a::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 1px;
  margin-right: 10px;
  vertical-align: middle;
  background: var(--c-sky-300);
}

/* =============================================================
   8. 記事本文（最重要）
   AIが生成する h2/h3/p/ul/ol/table 中心のHTMLを、
   コンサルタントらしい «信頼感・清潔感» のある紙面に整える。
============================================================= */
.article-body {
  font-size: var(--article-font-size);
  line-height: var(--article-line-height);
  color: var(--c-text);
  word-break: normal;
  overflow-wrap: anywhere;
  line-break: strict;
}

/* --- 段落 --- */
.article-body p {
  margin-bottom: var(--article-space);
}
.article-body > *:first-child { margin-top: 0; }
.article-body > *:last-child { margin-bottom: 0; }

/* --- 見出し h2：オレンジの縦バー＋淡いブルー地 --- */
.article-body h2 {
  position: relative;
  margin: 3.4em 0 1.2em;
  padding: 18px 20px 18px 22px;
  background: linear-gradient(90deg, var(--c-sky-50) 0%, rgba(242, 248, 253, 0) 100%);
  border-top: 1px solid var(--c-sky-200);
  border-bottom: 1px solid var(--c-sky-200);
  font-size: 1.32rem;
  font-weight: 900;
  line-height: 1.55;
  letter-spacing: .01em;
  color: var(--c-navy-900);
  scroll-margin-top: calc(var(--header-h) + 20px);
}
.article-body h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: calc(100% - 24px);
  background: var(--c-cv-grad);
  border-radius: 2px;
}
.article-body > h2:first-child { margin-top: 0; }

/* --- 見出し h3：ブルーの下線 --- */
.article-body h3 {
  position: relative;
  margin: 2.6em 0 1em;
  padding: 0 0 10px 16px;
  border-bottom: 2px solid var(--c-sky-100);
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--c-navy-800);
  scroll-margin-top: calc(var(--header-h) + 20px);
}
.article-body h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: .28em;
  width: 4px;
  height: 1.05em;
  background: var(--c-sky-500);
  border-radius: 2px;
}

/* --- 見出し h4 --- */
.article-body h4 {
  margin: 2.2em 0 .9em;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--c-navy-700);
}
.article-body h4::before {
  content: "◆";
  margin-right: .5em;
  color: var(--c-sky-400);
  font-size: .8em;
}

/* --- 強調 --- */
.article-body strong,
.article-body b {
  font-weight: 700;
  color: var(--c-navy-900);
  background: linear-gradient(transparent 62%, var(--c-cv-100) 62%);
  padding: 0 .1em;
}
.article-body em {
  font-style: normal;
  font-weight: 700;
  color: var(--c-cv-700);
}
.article-body mark {
  background: var(--c-cv-50);
  color: var(--c-cv-700);
  padding: .1em .3em;
  border-radius: var(--radius);
}

/* --- リンク --- */
.article-body a {
  color: var(--c-sky-700);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.article-body a:hover {
  color: var(--c-cv-600);
  background: var(--c-cv-50);
}

/* --- リスト --- */
.article-body ul,
.article-body ol {
  margin: 0 0 var(--article-space);
  padding: 22px 24px 22px 26px;
  background: var(--c-sky-50);
  border-left: 3px solid var(--c-sky-300);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  list-style: none;
  counter-reset: en-ol;
}
.article-body li {
  position: relative;
  padding-left: 1.5em;
  line-height: 1.85;
}
.article-body li + li { margin-top: .7em; }

/* 箇条書き：ブルーの小さな菱形 */
.article-body ul > li::before {
  content: "";
  position: absolute;
  left: .15em;
  top: .72em;
  width: 7px;
  height: 7px;
  background: var(--c-sky-500);
  transform: rotate(45deg);
}
/* 番号付き：オレンジの丸数字 */
.article-body ol > li::before {
  counter-increment: en-ol;
  content: counter(en-ol);
  position: absolute;
  left: 0;
  top: .38em;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.35em;
  height: 1.35em;
  background: var(--c-cv-500);
  color: var(--c-white);
  border-radius: 50%;
  font-family: var(--font-num);
  font-size: .78em;
  font-weight: 600;
  line-height: 1;
}
.article-body ol > li { padding-left: 2em; }

/* 入れ子のリストは «囲み» を外して素の見た目に戻す */
.article-body li > ul,
.article-body li > ol {
  margin: .7em 0 0;
  padding: 0 0 0 4px;
  background: transparent;
  border-left: 0;
}
.article-body li > ul > li::before { background: var(--c-sky-300); }

/* --- テーブル --- */
/* 横スクロールのラッパー（functions.php の en_wrap_tables が自動で付与） */
.table-scroll {
  margin: 0 0 var(--article-space);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
}
.article-body table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: .92rem;
  background: var(--c-white);
}
.article-body thead th {
  background: var(--c-navy-800);
  color: var(--c-white);
  font-weight: 700;
  letter-spacing: .02em;
}
.article-body th,
.article-body td {
  padding: 13px 16px;
  border: 1px solid var(--c-line);
  text-align: left;
  vertical-align: top;
  line-height: 1.75;
}
/* 行見出し（1列目が th のパターン） */
.article-body tbody th {
  background: var(--c-sky-50);
  color: var(--c-navy-800);
  font-weight: 700;
  white-space: nowrap;
}
.article-body tbody tr:nth-child(even) td { background: var(--c-sky-50); }
.article-body tbody tr:hover td { background: var(--c-sky-100); }
.article-body caption {
  caption-side: bottom;
  padding: 10px 4px 0;
  font-size: .78rem;
  color: var(--c-text-weak);
  text-align: left;
}

/* --- 引用 --- */
.article-body blockquote {
  position: relative;
  margin: 0 0 var(--article-space);
  padding: 26px 24px 22px 28px;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-left: 4px solid var(--c-navy-700);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  color: var(--c-text-weak);
  font-size: .95rem;
}
.article-body blockquote::before {
  content: "\201C";
  position: absolute;
  left: 16px;
  top: 2px;
  color: var(--c-sky-200);
  font-family: var(--font-num);
  font-size: 2.4rem;
  line-height: 1;
}
.article-body blockquote p:last-child { margin-bottom: 0; }
.article-body blockquote cite {
  display: block;
  margin-top: 10px;
  font-size: .8rem;
  font-style: normal;
  color: var(--c-text-mute);
}

/* --- 画像・図版 --- */
.article-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}
.article-body figure {
  margin: 0 0 var(--article-space);
}
.article-body figcaption {
  margin-top: 10px;
  font-size: .78rem;
  color: var(--c-text-weak);
  text-align: center;
}
.article-body .wp-caption { max-width: 100%; }

/* --- 区切り線 --- */
.article-body hr {
  margin: 3em 0;
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--c-sky-200), var(--c-line) 60%, transparent);
}

/* --- コード --- */
.article-body code {
  padding: .15em .45em;
  background: var(--c-navy-950);
  color: var(--c-sky-200);
  border-radius: var(--radius);
  font-size: .86em;
  font-family: "SFMono-Regular", Consolas, "Courier New", monospace;
}
.article-body pre {
  margin: 0 0 var(--article-space);
  padding: 18px 20px;
  background: var(--c-navy-950);
  border-radius: var(--radius-lg);
  overflow-x: auto;
}
.article-body pre code {
  padding: 0;
  background: transparent;
  font-size: .84rem;
  line-height: 1.75;
}

/* --- 定義リスト --- */
.article-body dl {
  margin: 0 0 var(--article-space);
  padding: 20px 22px;
  background: var(--c-sky-50);
  border-radius: var(--radius-lg);
}
.article-body dt {
  font-weight: 700;
  color: var(--c-navy-800);
}
.article-body dd {
  margin: .3em 0 1.1em;
  padding-left: 1em;
  border-left: 2px solid var(--c-sky-200);
}
.article-body dd:last-child { margin-bottom: 0; }

/* --- WordPress 標準の埋め込み --- */
.article-body iframe,
.article-body video {
  max-width: 100%;
  border-radius: var(--radius-lg);
}
.article-body .wp-block-embed { margin-bottom: var(--article-space); }

/* --- デスクトップでの本文（行長と余白を最適化） --- */
@media (min-width: 768px) {
  .article-body {
    --article-font-size: 1.05rem;   /* 約17px */
    --article-line-height: 2.0;
  }
  .article-body h2 {
    font-size: 1.55rem;
    padding: 20px 24px 20px 26px;
  }
  .article-body h3 { font-size: 1.24rem; }
  .article-body h4 { font-size: 1.08rem; }
  .article-body ul,
  .article-body ol { padding: 26px 30px 26px 32px; }
  .article-body table { min-width: 0; font-size: .95rem; }
}

/* --- スマートフォンでの最適化 --- */
@media (max-width: 599px) {
  .article-body {
    --article-font-size: .97rem;    /* 約15.5px：スマホでの1行文字数を確保 */
    --article-line-height: 1.9;
    --article-space: 1.5em;
  }
  .article-body h2 {
    margin: 2.6em 0 1em;
    padding: 14px 14px 14px 18px;
    font-size: 1.14rem;
  }
  .article-body h3 {
    margin: 2.1em 0 .9em;
    padding-left: 13px;
    font-size: 1.02rem;
  }
  .article-body ul,
  .article-body ol {
    padding: 18px 16px 18px 18px;
  }
  .article-body blockquote { padding: 22px 16px 18px 20px; }
  .article-body th,
  .article-body td { padding: 11px 12px; }
  /* スマホでは «横スクロールできる» ことを視覚的に示す */
  .table-scroll {
    position: relative;
    background:
      linear-gradient(to right, var(--c-white) 30%, rgba(255, 255, 255, 0)) left center / 24px 100% no-repeat,
      linear-gradient(to left, var(--c-white) 30%, rgba(255, 255, 255, 0)) right center / 24px 100% no-repeat,
      radial-gradient(farthest-side at 0 50%, rgba(8, 26, 53, .12), transparent) left center / 12px 100% no-repeat,
      radial-gradient(farthest-side at 100% 50%, rgba(8, 26, 53, .12), transparent) right center / 12px 100% no-repeat;
    background-attachment: local, local, scroll, scroll;
  }
}

/* -------------------------------------------------------------
   9. 記事下（タグ・注記・前後リンク）
------------------------------------------------------------- */
.article__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 44px;
  list-style: none;
}
.article__tags a {
  display: inline-block;
  padding: 5px 12px;
  border: 1px solid var(--c-sky-200);
  border-radius: var(--radius);
  background: var(--c-white);
  color: var(--c-sky-700);
  font-size: .78rem;
  text-decoration: none;
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.article__tags a:hover {
  background: var(--c-sky-50);
  border-color: var(--c-sky-400);
}

.article__disclaimer {
  margin-top: 32px;
  padding: 16px 18px;
  background: var(--c-white);
  border: 1px dashed var(--c-line);
  border-radius: var(--radius);
  font-size: .8rem;
  line-height: 1.8;
  color: var(--c-text-weak);
}

.article-nav {
  display: grid;
  gap: 14px;
  margin-top: 44px;
}
.article-nav__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.article-nav__item:hover {
  border-color: var(--c-sky-300);
  box-shadow: var(--shadow-sm);
}
.article-nav__label {
  font-family: var(--font-num);
  font-size: .72rem;
  letter-spacing: .12em;
  color: var(--c-cv-600);
}
.article-nav__title {
  font-size: .92rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--c-navy-800);
}
.article-nav__item--next { text-align: right; }

@media (min-width: 768px) {
  .article-nav { grid-template-columns: 1fr 1fr; }
  .article-nav__item--next { grid-column: 2; }
}

/* -------------------------------------------------------------
   10. 関連記事
------------------------------------------------------------- */
.blog-related {
  background: var(--c-sky-50);
}

/* -------------------------------------------------------------
   11. 記事下CTA
------------------------------------------------------------- */
.blog-cta {
  padding: 64px 0;
  background: linear-gradient(135deg, var(--c-navy-900) 0%, var(--c-navy-700) 60%, var(--c-sky-700) 100%);
  color: var(--c-white);
}
.blog-cta__inner {
  width: 100%;
  max-width: calc(860px + var(--gutter) * 2);
  padding-inline: var(--gutter);
  margin-inline: auto;
  text-align: center;
}
.blog-cta__en {
  font-family: var(--font-num);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .28em;
  color: var(--c-cv-300);
  margin-bottom: 12px;
}
.blog-cta__title {
  font-size: 1.3rem;
  font-weight: 900;
  line-height: 1.6;
  margin-bottom: 16px;
}
.blog-cta__desc {
  font-size: .92rem;
  line-height: 1.95;
  color: rgba(255, 255, 255, .82);
  margin-bottom: 28px;
}
.blog-cta__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.blog-cta__tel {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--c-white);
  text-decoration: none;
  font-family: var(--font-num);
  font-size: 1.25rem;
  letter-spacing: .04em;
}
.blog-cta__tel .icon { width: 22px; height: 22px; fill: var(--c-cv-300); }
.blog-cta__tel small {
  display: block;
  font-family: var(--font-base);
  font-size: .68rem;
  letter-spacing: 0;
  color: rgba(255, 255, 255, .7);
}

@media (min-width: 768px) {
  .blog-cta { padding: 80px 0; }
  .blog-cta__title { font-size: 1.7rem; }
  .blog-cta__actions { flex-direction: row; justify-content: center; gap: 28px; }
}

/* -------------------------------------------------------------
   12. 検索フォーム／記事なしの表示
------------------------------------------------------------- */
.blog-searchform { margin-bottom: 40px; }

.search-form {
  display: flex;
  gap: 8px;
  max-width: 520px;
  margin-inline: auto;
}
.search-form__input {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-white);
  font-family: inherit;
  font-size: .92rem;
  color: var(--c-text);
}
.search-form__input:focus {
  outline: 2px solid var(--c-sky-300);
  outline-offset: 1px;
  border-color: var(--c-sky-400);
}
.search-form__submit {
  padding: 12px 22px;
  border: 0;
  border-radius: var(--radius);
  background: var(--c-navy-800);
  color: var(--c-white);
  font-family: inherit;
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .25s var(--ease);
}
.search-form__submit:hover { background: var(--c-sky-700); }

.blog-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 56px 20px;
  text-align: center;
}
.blog-empty__title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--c-navy-900);
}
.blog-empty__desc {
  font-size: .9rem;
  color: var(--c-text-weak);
  margin-bottom: 8px;
}

/* -------------------------------------------------------------
   13. コメント（有効化した場合のみ使用）
------------------------------------------------------------- */
.comments { margin-top: 8px; }
.comments__title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--c-navy-900);
  margin-bottom: 20px;
}
.comments__list { list-style: none; }
.comments__list .comment-body {
  padding: 18px 20px;
  margin-bottom: 14px;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  font-size: .9rem;
}
.comments__closed {
  font-size: .85rem;
  color: var(--c-text-weak);
}

/* -------------------------------------------------------------
   14. 印刷
------------------------------------------------------------- */
@media print {
  .header,
  .footer,
  .fixed-cta,
  .float-cta,
  .to-top,
  .blog-cta,
  .blog-related,
  .article-nav,
  .toc { display: none !important; }

  .article-body { font-size: 11pt; line-height: 1.7; color: #000; }
  .article-body h2,
  .article-body h3 { break-after: avoid; }
  .article-body table { break-inside: avoid; }
}