@charset "utf-8";
/* ============================================================
   page-common.css ― 汎用ページ（固定ページ／投稿一覧・詳細など）の
   本文を 2026リニューアルのトンマナに合わせる共通スタイル。
   トップ／カーポート／パーツ集 以外の全ページで読み込む（body.sc-page）。
   共通枠（左サイドバー・ヘッダーバー・新フッター）と
   .fp-sec-ttl / .fp-btn-list 等のパーツは front-page.css 側で提供される。
   既存 style.css / sunexterior.css の旧2カラム・旧配色を .sc-page 配下で上書きする。
   ============================================================ */

/* ============================================================
   レイアウト（旧2カラム → 新1カラム・右サイドバー廃止）
   ============================================================ */
/* 本文カラム：#fp-main 内で 1200px 中央寄せ（--fp-gut はトップと共通） */
.sc-page #primary,
.sc-page .content-area {
  position: relative;
  float: none;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 48px var(--fp-gut) 100px;
  box-sizing: border-box;
}

/* 旧・固定ヘッダー分の上余白や絶対配置パンくずをリセット */
.sc-page .content-area { padding-top: 48px; }
.sc-page .pg_ctArea { position: static; top: auto; left: auto; }
.sc-page #content { min-height: 0; width: auto; float: none; }

/* 右ウィジェットサイドバー（2カラム目）は新デザインでは非表示 */
.sc-page #tertiary,
.sc-page .sidebar-container,
.sc-page .widget-area { display: none !important; }

/* SP用の重複パンくずは隠し、PC/SP共通で #breadcrumb_list を使う */
.sc-page #breadcrumb_list_sp { display: none; }

/* 本文画像のみ max-width 制限（ヘッダーバー/サイドバー/フッターのアイコンには触れない。
   全体の img は front-page.css の .fp-body img が担当。#primary に限定して
   .fp-hb-reserve img 等のコンポーネント指定を打ち消さないようにする） */
.sc-page #primary img { max-width: 100%; height: auto; }

/* ヘッダーバーのアイコンサイズを明示固定（万一 img 系ルールに巻き込まれても肥大化させず、
   予約ボタンの「無料相談のご予約」テキストが押し出されないようにする保険） */
.sc-page .fp-headbar .fp-hb-reserve img { width: auto; height: 26px; max-width: none; }
.sc-page .fp-headbar .fp-hb-tel .fp-hb-ico img { width: auto; height: 45px; max-width: none; }

/* ============================================================
   パンくず
   ============================================================ */
.sc-page #breadcrumb_list {
  font-size: 13px;
  color: var(--fp-text-weak);
  letter-spacing: .04em;
  line-height: 1.6;
  margin-bottom: 28px;
}
.sc-page #breadcrumb_list a { color: var(--fp-text-weak); }
.sc-page #breadcrumb_list a:hover { color: var(--fp-green); text-decoration: underline; }

/* ============================================================
   ページタイトル見出し（.page-title-header / .archive-header）
   サブ（英字スラッグ等）を上に、和文をNoto Serifで中央寄せ
   ============================================================ */
.sc-page .page-title-header,
.sc-page .archive-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 0 56px;
}
.sc-page .page-title-header .page-sub-title,
.sc-page .archive-header .subttl {
  order: -1;
  margin: 0 0 14px;
  font-size: 15px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--fp-green);
  line-height: 1;
}
.sc-page .page-title-header .page-sub-title:empty { display: none; margin: 0; }
.sc-page .page-title,
.sc-page .archive-header .page-title {
  margin: 0;
  padding: 0;
  font-family: "Noto Serif JP", serif;
  font-size: 36px;
  font-weight: 500;
  letter-spacing: .08em;
  line-height: 1.3;
  color: #000;
  font-style: normal;
  max-width: 100%;
}
.sc-page .page-title-header::after,
.sc-page .archive-header::after {
  content: "";
  display: block;
  width: 60px;
  height: 2px;
  margin: 24px auto 0;
  background: linear-gradient(to right, var(--fp-green) 0 30px, var(--fp-text-weak) 30px 60px);
}

/* ============================================================
   本文タイポグラフィ（.entry-content / .page-content）
   ============================================================ */
.sc-page .entry-content,
.sc-page .page-content {
  font-size: 16px;
  line-height: 2;
  color: var(--fp-text);
  letter-spacing: .04em;
}
.sc-page .entry-content > *:first-child { margin-top: 0; }

.sc-page .entry-content p { margin: 0 0 24px; }

.sc-page .entry-content h2:not(.title-greenline),
.sc-page .page-content h2:not(.title-greenline) {
  display: flex;               /* バーとテキストを縦中央で揃える（旧 display:flex のズレも解消） */
  align-items: center;
  margin: 56px 0 24px;
  padding: 0 0 16px;
  text-indent: 0;              /* 旧 style.css のぶら下げ text-indent を打ち消す */
  background: none;            /* 旧 .page-content h2 のクリーム背景(#fffef0)を打ち消す */
  border: none;
  border-bottom: 2px solid var(--fp-line);
  font-family: "Noto Serif JP", serif;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: .05em;
  line-height: 1.45;
  color: #1d1d1d;
}
.sc-page .entry-content h2:not(.title-greenline)::before,
.sc-page .page-content h2:not(.title-greenline)::before {
  content: "";
  display: block;
  flex: 0 0 auto;
  width: 6px;
  height: 1.1em;
  margin-right: 14px;
  background: var(--fp-green);
  border-radius: 1px;
}
.sc-page .entry-content h3,
.sc-page .page-content h3 {
  display: flex;               /* 緑バーとテキストを縦中央で揃え、重なり・ズレを防ぐ */
  align-items: center;
  margin: 40px 0 16px;
  padding: 0;
  text-indent: 0;              /* 旧 style.css .page-content h3 の text-indent:-1.4em（ぶら下げ）を打ち消す */
  border: none;
  font-family: "Noto Serif JP", serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1.5;
  color: #1d1d1d;
}
.sc-page .entry-content h3::before,
.sc-page .page-content h3::before {
  content: "";
  display: block;
  flex: 0 0 auto;
  width: 4px;
  height: 1.15em;
  margin-right: 12px;
  background: var(--fp-green);
  border-radius: 1px;
}
.sc-page .entry-content h4,
.sc-page .page-content h4 {
  margin: 32px 0 12px;
  padding-left: 0;            /* 旧 .page-content h4 の padding-left:1em を打ち消す */
  text-indent: 0;            /* 旧 style.css のぶら下げ text-indent を打ち消す */
  border-bottom: none;        /* 旧 .page-content h4 の黄緑ダッシュ下線を打ち消す */
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #222;
}
.sc-page .entry-content a {
  color: var(--fp-green-dark);
  text-decoration: underline;
}
.sc-page .entry-content a:hover { color: var(--fp-green); }

/* リスト（現行サイトの方式に合わせクラスで出し分け）。
   ・通常の ul …… 黒い中点（ブラウザ標準のディスク）
   ・ul.checktype … 緑のチェック（求人ページ等）
   ・ul.arrowtype … 緑の丸＋矢印（サイトマップ等）
   ・フォーム内 … マーカー無し
   ※構造的なリスト（アンカーナビ・アイコン一覧）は各テンプレCSSの list-style:none をそのまま活かす（ここでは触らない）。 */
.sc-page .entry-content ul,
.sc-page .page-content ul { margin: 0 0 24px; }
.sc-page .entry-content ol,
.sc-page .page-content ol { margin: 0 0 24px; list-style: decimal; padding-left: 1.5em; }
.sc-page .entry-content ol li,
.sc-page .page-content ol li { margin-bottom: 8px; line-height: 1.85; }
.sc-page .page-content ol li::marker { text-decoration: 1px dashed #ccc; }

/* チェックリスト（ul.checktype）→ 緑チェック */
.sc-page .entry-content ul.checktype,
.sc-page .page-content ul.checktype { list-style: none; padding-left: 0; }
.sc-page .entry-content ul.checktype > li,
.sc-page .page-content ul.checktype > li { position: relative; padding-left: 26px; margin-bottom: 8px; line-height: 1.85; }
.sc-page .entry-content ul.checktype > li::before,
.sc-page .page-content ul.checktype > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .3em;
  width: 17px;
  height: 17px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23099339' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3 8.4l3.3 3.3L13 4'/%3E%3C/svg%3E") no-repeat center center / contain;
}

/* 丸＋矢印リスト（ul.arrowtype・サイトマップ等）→ 緑の丸＋矢印 */
.sc-page .entry-content ul.arrowtype,
.sc-page .page-content ul.arrowtype { list-style: none; padding-left: 0; }
.sc-page .entry-content ul.arrowtype > li,
.sc-page .page-content ul.arrowtype > li { position: relative; padding-left: 26px; margin-bottom: 8px; line-height: 1.85; }
.sc-page .entry-content ul.arrowtype > li::before,
.sc-page .page-content ul.arrowtype > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .3em;
  width: 17px;
  height: 17px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7.5' fill='%23099339'/%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M4.6 8h6M7.9 5.4 10.6 8 7.9 10.6'/%3E%3C/svg%3E") no-repeat center center / contain;
}

/* 問い合わせフォーム（MW WP Form）内のリストはマーカー非表示（現行サイトに合わせる） */
.sc-page .mw_wp_form ul { list-style: none; padding-left: 0; }
.sc-page .mw_wp_form ul li { padding-left: 0; }

/* 引用 */
.sc-page .entry-content blockquote {
  margin: 28px 0;
  padding: 20px 24px;
  background: var(--fp-bg-soft);
  border-left: 4px solid var(--fp-green);
  color: #444;
}
.sc-page .entry-content blockquote p:last-child { margin-bottom: 0; }

/* 表 */
.sc-page .entry-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 28px;
  font-size: 15px;
  line-height: 1.8;
}
.sc-page .entry-content table th,
.sc-page .entry-content table td {
  border: 1px solid var(--fp-line);
  padding: 14px 18px;
  text-align: left;
  vertical-align: top;
}
.sc-page .entry-content table th {
  width: 30%;
  background: var(--fp-bg-soft);
  font-weight: 700;
  color: #1d1d1d;
}
/* セル内テキストの視認性確保（旧CSSの薄いグレー文字を打ち消し、黒寄りのグレーに） */
.sc-page .entry-content table td,
.sc-page .entry-content table td li,
.sc-page .entry-content table td p,
.sc-page .page-content table td,
.sc-page .page-content table td li,
.sc-page .page-content table td p {
  color: #444;
}

/* ============================================================
   見出しボックス（.title-greenline）― 新グリーンに更新
   ============================================================ */
.sc-page .title-greenline,
.sc-page .page-content .title-greenline {
  display: block;
  border: 1px solid var(--fp-green);
  background: transparent;
  color: var(--fp-green-dark);
  text-align: center;
  padding: 18px 16px;
  margin: 56px 0 32px;
  font-family: "Noto Serif JP", serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1.4;
}
.sc-page .title-greenline::before { content: none; }

/* ============================================================
   ボタン（汎用 .btn / 「続きを読む」.more / アンカー .anchor-btn 等）
   トップの .fp-btn-list（緑枠＋はみ出し矢印）に寄せる
   ============================================================ */
.sc-page .entry-content a.btn,
.sc-page a.button,
.sc-page .wp-block-button__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 240px;
  height: 56px;
  padding: 0 40px;
  background: var(--fp-green);
  color: #fff !important;
  font-size: 16px;
  letter-spacing: .04em;
  text-decoration: none !important;
  border-radius: 4px;
  transition: background .2s, opacity .2s;
}
.sc-page .entry-content a.btn:hover,
.sc-page a.button:hover,
.sc-page .wp-block-button__link:hover { background: var(--fp-green-dark); color: #fff !important; }

/* 中央寄せボタン行（テーマ既存の使い回し用） */
.sc-page .btn-center,
.sc-page .more-center { text-align: center; }

/* ============================================================
   アーカイブ／投稿一覧（.blog-box）
   ============================================================ */
.sc-page .blog-content { margin: 0; }
.sc-page .blog-box {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  padding: 28px 4px !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--fp-line);
}
.sc-page .blog-box_l { flex: 0 0 220px; }
.sc-page .blog-box_l a { display: block; }
.sc-page .blog-box_l img {
  display: block;
  width: 220px;
  height: 150px;
  object-fit: cover;
}
.sc-page .blog-box_r { flex: 1 1 auto; min-width: 0; }
.sc-page .blog-box .post_date {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--fp-text-weak);
  letter-spacing: .08em;
}
.sc-page .blog-box h2 {
  margin: 0 0 12px;
  font-family: "Noto Serif JP", serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .04em;
  color: #1d1d1d;
}
.sc-page .blog-box h2 a { color: #1d1d1d; text-decoration: none; }
.sc-page .blog-box h2 a:hover { color: var(--fp-green); }
.sc-page .blog-box .more { padding: 0 20px 0 0; margin-top: 6px; }  /* 矢印をカード右端から離す */
.sc-page .blog-box .more a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--fp-green);
  font-size: 14px;
  text-decoration: none;
}
.sc-page .blog-box .more a::after {
  content: "";
  display: inline-block;
  width: 26px;
  height: 7px;
  border: none;          /* 旧 .archive .blog-box .more a::after の枠線シェブロンを打ち消す */
  transform: none;       /* 旧 rotate(45deg) を打ち消す */
  background: url("../img/top/arrow-green-long.svg") no-repeat right center / contain;
}

/* ページネーション（wp-pagenavi） */
.sc-page .wp-pagenavi {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 48px 0 0;
}
.sc-page .wp-pagenavi a,
.sc-page .wp-pagenavi span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 8px;
  border: 1px solid var(--fp-line);
  color: var(--fp-text);
  text-decoration: none;
  box-sizing: border-box;
}
.sc-page .wp-pagenavi a:hover { border-color: var(--fp-green); color: var(--fp-green); }
.sc-page .wp-pagenavi span.current {
  background: var(--fp-green);
  border-color: var(--fp-green);
  color: #fff;
}

/* 投稿メタ（編集リンク等）は控えめに */
.sc-page .entry-meta { margin-top: 32px; font-size: 13px; color: var(--fp-text-weak); }

/* ============================================================
   投稿詳細（single：日付・タグ・前後ナビ・記事タイトル・関連一覧）
   ============================================================ */
/* 投稿日 */
.sc-page .post_date,
.sc-page .entry-content .post_date {
  margin: 0 0 16px;
  color: var(--fp-text-weak);
  font-size: 14px;
  letter-spacing: .06em;
}

/* タグ（#タグ のチップ） */
.sc-page .entry-tags { margin: 0 0 28px; }
.sc-page .post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.sc-page .post-tags li { margin: 0; padding-left: 0; }
.sc-page .post-tags li::before { content: none; }
.sc-page .post-tags a {
  display: inline-block;
  padding: 4px 14px;
  border: 1px solid var(--fp-green);
  border-radius: 999px;
  color: var(--fp-green-dark);
  font-size: 13px;
  line-height: 1.6;
  text-decoration: none;
}
.sc-page .post-tags a:hover { background: var(--fp-green); color: #fff; }

/* 記事タイトルブロック（content.php：日付＋タイトル） */
.sc-page .post_ttl_wrap {
  display: flex;
  align-items: baseline;
  gap: 22px;
  margin: 0 0 28px;
  padding: 0 0 20px;
  border-bottom: 2px solid var(--fp-line);
}
.sc-page .post_ttl_l { flex: 0 0 auto; text-align: center; color: var(--fp-text-weak); }
.sc-page .post_ttl_l .pst_date { margin: 0; font-family: "Noto Serif JP", serif; font-size: 22px; line-height: 1; color: var(--fp-green); }
.sc-page .post_ttl_l .pst_year { margin: 4px 0 0; font-size: 13px; }
.sc-page .post_ttl_r .entry-title {
  margin: 0;
  font-family: "Noto Serif JP", serif;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1.45;
  color: #1d1d1d;
}
.sc-page .post_ttl_r .entry-title a { color: #1d1d1d; text-decoration: none; }
.sc-page .post_ttl_r .entry-title a:hover { color: var(--fp-green); }

/* 前後の記事ナビ（.post-navigation：手動版＋twentythirteen_post_nav 版） */
.sc-page .post-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin: 56px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--fp-line);
}
.sc-page .post-navigation .nav-links { display: flex; justify-content: space-between; gap: 16px; width: 100%; }
.sc-page .post-navigation a { color: var(--fp-text); text-decoration: none; }
.sc-page .post-navigation a:hover { color: var(--fp-green); }
.sc-page .post-navigation .nav-text {
  display: block;
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--fp-text-weak);
}
.sc-page .post-navigation .nav-btn.prev-post,
.sc-page .post-navigation .nav-btn.next-post { border-color: var(--fp-line); }

/* スタッフブログ下部の関連リスト（.acv_list_wrap：NEWS / BLOG / ARCHIVE） */
.sc-page .acv_list_wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  float: none;          /* 旧 style.css .acv_list_wrap{float:left} を打ち消す（フッターがセクションに重なる不具合の原因） */
  clear: both;
  width: auto;
  margin-top: 64px;
  padding-top: 44px;
  border-top: 1px solid var(--fp-line);
}
/* 旧 style.css の `.acv_list_wrap > div{ display:table-cell; width:33.33%; float; padding }` を打ち消し、
   グリッドセルいっぱいに広げる。列間は border-right の区切り線で表現（最後の列は無し）。 */
.sc-page .acv_list_wrap > div {
  display: block;
  width: auto;
  float: none;
  padding: 0 32px;
  border-right: 1px solid var(--fp-line);
  box-sizing: border-box;
}
.sc-page .acv_list_wrap > div:first-child { padding-left: 0; }
.sc-page .acv_list_wrap > div:last-child { padding-right: 0; border-right: none; }
.sc-page .acv_list_wrap > div h3 {
  margin: 0 0 16px;
  padding: 0 0 12px;
  border-bottom: 2px solid var(--fp-line);
  font-family: "Noto Serif JP", serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  color: #1d1d1d;
}
/* dt(サムネ)＋dd(日付・タイトル)を行ごとにペアにする2カラムグリッド。
   旧 float レイアウトは grid内で dd 幅が潰れて高さが暴走するため使わない。 */
.sc-page .acv_list_wrap dl {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 12px 12px;
  align-items: center;
  margin: 0;
}
.sc-page .acv_list_wrap dl dt { width: 60px; margin: 0; float: none; }
.sc-page .acv_list_wrap dl dt img { width: 60px; height: 60px; object-fit: cover; display: block; }
.sc-page .acv_list_wrap dl dd {
  min-width: 0;               /* グリッド内で幅が縮みすぎないように（テキスト折返し暴走防止） */
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--fp-text);
}
.sc-page .acv_list_wrap dl dd .widget_date { color: var(--fp-text-weak); font-size: 12px; }
.sc-page .acv_list_wrap dl dd a { color: var(--fp-text); text-decoration: none; }
.sc-page .acv_list_wrap dl dd a:hover { color: var(--fp-green); }
/* 「記事一覧へ」ボタン：トップページの .fp-btn-list 風（緑枠＋はみ出し矢印） */
.sc-page .list_more,
.sc-page .blog_btn { text-align: center; margin-top: 24px; }
.sc-page .list_more a,
.sc-page .blog_btn a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 170px;
  max-width: 100%;
  height: 44px;
  padding: 0 40px 0 22px;
  border: 1px solid var(--fp-green);
  background: #fff !important;
  color: var(--fp-green);
  font-size: 14px;
  letter-spacing: .04em;
  text-decoration: none;
  box-sizing: border-box;
  transition: background .2s, color .2s;
}
.sc-page .list_more a::after,
.sc-page .blog_btn a::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -16px;
  transform: translateY(-50%);
  width: 32px;
  height: 7px;
  border: none;
  background: url("../img/top/arrow-green-long.svg") no-repeat right center / contain;
}
.sc-page .list_more a:hover,
.sc-page .blog_btn a:hover { background: var(--fp-green) !important; color: #fff; }

/* ============================================================
   SP（≤768px）
   ============================================================ */
@media (max-width: 768px) {
  /* SP固定ヘッダー（高さ75px）の分だけ本文上部を確保（#fp-mainの既定padding-topは
     幅に比例して縮むため、汎用ページでは固定値で重なりを防ぐ） */
  .sc-page #fp-main { padding-top: 75px; }

  .sc-page #primary,
  .sc-page .content-area {
    padding: 20px 4px 56px;
  }
  .sc-page #breadcrumb_list {
    font-size: 12px;
    margin-bottom: 18px;
    white-space: nowrap;
    overflow-x: auto;
  }

  .sc-page .page-title-header,
  .sc-page .archive-header { margin-bottom: 36px; }
  .sc-page .page-title-header .page-sub-title,
  .sc-page .archive-header .subttl { font-size: 13px; letter-spacing: .25em; }
  .sc-page .page-title,
  .sc-page .archive-header .page-title { font-size: 26px; }

  .sc-page .entry-content,
  .sc-page .page-content { font-size: 15px; line-height: 1.95; }
  .sc-page .entry-content h2 { font-size: 21px; margin-top: 44px; }
  .sc-page .entry-content h3 { font-size: 18px; }
  .sc-page .entry-content h4 { font-size: 16px; }
  .sc-page .title-greenline { font-size: 18px; padding: 16px 14px; margin: 44px 0 24px; }

  /* 表は横スクロール許容（潰れ防止） */
  .sc-page .entry-content table { font-size: 14px; }
  .sc-page .entry-content table th { width: 34%; }
  .sc-page .entry-content table th,
  .sc-page .entry-content table td { padding: 10px 12px; }

  .sc-page .entry-content a.btn,
  .sc-page a.button,
  .sc-page .wp-block-button__link { width: 100%; max-width: 320px; }

  /* アーカイブ：2列カードグリッド。.blog-box自体は幅47.5%のflexコンテナ(内部は画像+文字を縦積み)
     だが、親要素(archive.php の <article>／category-case.php の .archive-case-flex)が
     display:block のままだと兄弟同士は横に並ばずそれぞれ改行して縦に積み重なってしまう
     （float はflexコンテナ自身には効かないため .blog-box に float:left は使えない）。
     親をflex-wrapにして初めて2列グリッドとして折り返す。 */
  .sc-page .blog-content article,
  .sc-page .archive-case-flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .sc-page .blog-box { flex-direction: column; gap: 16px; margin: 8px 4px !important; padding: 0 !important; width: 47.5% !important; }
  .sc-page .blog-box_l { flex-basis: 110px; }
  .sc-page .blog-box_l img { width: 110px; height: 84px; }
  .sc-page .blog-box h2 { font-size: 17px; margin-bottom: 8px; }
  .sc-page .blog-box_r { min-height: 140px; }

  /* archive.php / category-case.php は is_mymobile()（UA判定）で出力を分岐しており、
     実機スマホでは抜粋・「続きを読む」を出力しないためこの幅の狭いカードでも崩れない。
     一方PCブラウザの幅を768px未満まで狭めた場合はUA判定がfalseのままのため、
     このメディアクエリ（幅判定）だけが先に効いて、PC用の抜粋付きマークアップが
     そのまま47.5%幅に押し込まれて崩れて見える。実機スマホには存在しない要素なので
     ここで非表示にしても実害はなく、両者の見た目を統一する。 */
  .sc-page .blog-box_r > p:not(.post_date),
  .sc-page .blog-box .more { display: none; }

  .sc-page .wp-pagenavi a,
  .sc-page .wp-pagenavi span { min-width: 40px; height: 40px; }

  /* 投稿詳細 SP */
  .sc-page .post_ttl_wrap { gap: 14px; }
  .sc-page .post_ttl_l .pst_date { font-size: 18px; }
  .sc-page .post_ttl_r .entry-title { font-size: 20px; }
  .sc-page .acv_list_wrap { grid-template-columns: 1fr; gap: 28px; margin-top: 48px; }
}