/*
Theme Name: C&C 防災スペシャルサイト
Theme URI:
Author: C&C Partners
Description: C&C Partners 防災スペシャルサイト用のスクラッチテーマ
Version: 1.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: cc-bousai
*/

/* ==========================================================================
   1. デザイントークン（CSS変数）
   値の出典はすべて Figma の変数定義。Figma側は日本語名なので用途ベースの英語名に変換している。
   ========================================================================== */

:root {
  /* ---- 色 ---- */
  --color-primary: #009c42;                  /* Figma: メイン */
  --color-surface: #f6f8f7;                  /* Figma: サブ（ページ全体の背景） */
  --color-text: #171c1a;                     /* Figma: BLACK */
  --color-muted: #a5a5a5;                    /* Figma: グレー */
  --color-white: #fff;
  --color-news-bg: rgba(255, 255, 255, 0.8); /* MV内のお知らせボックス */
  --color-quote-bg: #f0f0f0;                 /* 本文中の引用 */
  --color-caption-bg: #e5f5ec;               /* 本文中の画像のキャプション */
  --color-btn-hover: #e5f5ec;                /* 白いボタンのホバー背景 */
  --color-error: #c44939;                    /* 必須マーク・入力エラー */
  --color-input-border: #e0e3e1;
  --color-placeholder: #6b6b6b;

  /* ---- フォント ---- */
  --font-base: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", meiryo, sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  /* ---- 文字サイズ（PC基準。SPはメディアクエリで変数ごと上書きする） ---- */
  --fs-display: clamp(48px, 6.94vw, 100px); /* セクション英字見出し（1440pxで100px） */
  --fs-catch: 60px;                          /* MVキャッチの強調語 */
  --fs-catch-sub: 50px;                      /* MVキャッチの助詞 */
  --fs-h2: 36px;
  --fs-lead: 26px;                           /* セクション見出しの日本語サブ */
  --fs-h3: 24px;
  --fs-h4: 22px;
  --fs-body: 20px;
  --fs-hero-title: clamp(32px, 4.17vw, 60px);      /* 個別記事のタイトル帯（1440pxで60px） */
  --fs-hero-title-lead: clamp(26px, 3.47vw, 50px); /* 同・前半のリード文（1440pxで50px） */
  --fs-content: 18px;                        /* 本文中のリスト・引用 */
  --fs-card-title: 28px;
  --fs-nav: 20px;
  --fs-btn: 16px;
  --fs-tag: 14px;
  --fs-small: 14px;
  --fs-caption: 12px;                        /* パンくずの区切り記号 */
  --fs-breadcrumb: 16px;
  --fs-page-title: clamp(40px, 5.56vw, 80px); /* 一覧ページの英字見出し（1440pxで80px） */
  --fs-page-title-ja: 26px;
  --lh-body: 1.8;                            /* 36px ÷ 20px */

  /* ---- レイアウト ---- */
  --content-width: 1220px;
  --gutter: 110px;                           /* 各セクションの左右余白 */
  --gutter-wide: 90px;                       /* ヘッダー・MV・パンくずの左右余白 */
  --mv-width: 1260px;
  --header-height: 116px;
  --band-pad: 30px;                          /* 帯の左右余白（個別記事タイトル帯など） */
  --catch-pad-block: 4px;                    /* 60px × 1.2 + 4px × 2 ＝ 帯の高さ80px */
  --card-gap: 30px;                          /* カードの横方向の間隔 */
  --card-gap-row: 60px;                      /* カードの縦方向の間隔 */
  --page-title-indent: 90px;                 /* 一覧ページ見出しのgutterからの追加インデント */

  /* ---- 余白 ---- */
  --space-2xs: 6px;
  --space-xs: 10px;
  --space-sm: 20px;
  --space-md: 30px;
  --space-lg: 60px;
  --space-xl: 80px;
  --space-2xl: 100px;

  /* ---- 装飾 ---- */
  --radius-card: 12px;
  --radius-news: 10px;
  --radius-mv: 50px;
  --radius-cta: 30px;
  --radius-pill: 42px;
  --shadow-card: 0 6px 2px rgba(0, 0, 0, 0.2);
  --shadow-btn: 0 6px 0 rgba(0, 0, 0, 0.2);
  --shadow-mv: inset 0 0 12px rgba(0, 0, 0, 0.2);
}

/* ==========================================================================
   2. リセット
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-base);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

img,
picture,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
}

/* キーボード操作時のフォーカスを可視化する */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* 視覚的には隠すがスクリーンリーダーには読ませる */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   3. レイアウト共通
   ========================================================================== */

/* セクションの内側コンテナ。1220px + 左右gutter で頭打ちにする */
.l-inner {
  width: 100%;
  max-width: calc(var(--content-width) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ヘッダー・MV・パンくず用の広めコンテナ */
.l-inner--wide {
  max-width: calc(var(--mv-width) + var(--gutter-wide) * 2);
  padding-inline: var(--gutter-wide);
}

.l-main {
  overflow-x: clip; /* 横スクロールの発生を抑える */
}

/* ==========================================================================
   4. 共通コンポーネント
   ========================================================================== */

/* ---- セクション見出し（英字 + 日本語サブ） ---- */
.section-title {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  color: var(--color-primary);
}

.section-title__en {
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  line-height: 1;
}

.section-title__ja {
  font-size: var(--fs-lead);
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: 0.02em;
}

/* 一覧ページ用。トップページのセクション見出し（100px）より一回り小さい */
.section-title--page .section-title__en {
  font-size: var(--fs-page-title);
  letter-spacing: 0.02em;
}

.section-title--page .section-title__ja {
  font-size: var(--fs-page-title-ja);
}

/* 英字見出しを持たない汎用の固定ページは、日本語をページタイトルとして大きく出す */
.section-title--ja-only .section-title__ja {
  font-size: var(--fs-h2);
}

/* ---- キーワードタグ（カード・個別記事のFVで共通） ---- */
.keywords {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}

.keywords__item {
  padding: var(--space-xs);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-primary);
  font-size: var(--fs-tag);
  font-weight: var(--fw-bold);
  line-height: 1;
}

/* ---- VIEW MORE ボタン ---- */
/* デザイン上、矢印が枠の右端を20pxはみ出す。枠230px + はみ出し20px = 250px */
.button {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 230px;
  height: 48px;
  padding-inline: var(--space-sm);
  border: 1px solid var(--color-primary);
  background: var(--color-white);
  color: var(--color-primary);
  font-size: var(--fs-btn);
  font-weight: var(--fw-bold);
  line-height: 1;
  transition: background-color 0.3s, color 0.3s;
}

.button__icon {
  position: absolute;
  top: 50%;
  left: 140px;
  width: 110px;
  height: auto;
  transform: translateY(-50%);
  transition: transform 0.3s;
}

/* リンクとして使う場合のみホバー効果を付ける */
a.button:hover,
a.button:focus-visible {
  background: var(--color-primary);
  color: var(--color-white);
}

a.button:hover .button__icon,
a.button:focus-visible .button__icon {
  transform: translate(6px, -50%);
}

/* セクション下部の中央配置ボタン */
.button-wrap {
  display: flex;
  justify-content: center;
  margin-top: var(--space-lg);
}

/* ---- カード（CASE / TOPICS 共通） ---- */
.card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: var(--radius-card);
  background: var(--color-white);
  box-shadow: var(--shadow-card);
}

.card__link {
  display: flex;
  flex: 1;
  flex-direction: column;
  border-radius: inherit;
}

/* サムネイルはOGPと同じ 1200:630 で固定する */
.card__thumb {
  overflow: hidden;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  aspect-ratio: 1200 / 630;
  background: var(--color-muted);
}

.card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.4s;
}

.card__link:hover .card__img,
.card__link:focus-visible .card__img {
  transform: scale(1.04);
}

.card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-sm) var(--space-sm);
  color: var(--color-primary);
}

.card__title {
  font-size: var(--fs-card-title);
  font-weight: var(--fw-bold);
  line-height: 1.4;
}

/* 実績紹介（case）詳細ページの「その他の実例」用の簡易カードだけ文字サイズを固定する */
.card--simple .card__title {
  font-size: 16px;
}

/* 説明文は行数で打ち切らず全文を表示する。文字数は投稿時に抜粋欄で調整する運用 */
.card__text {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* カード内では下端に寄せて、カードごとの高さの違いを吸収する */
.card .keywords {
  margin-top: auto;
}

/* カード全体がリンクなので、ボタンは見た目だけの要素にする（リンクの入れ子を避ける） */
/* 右余白が40pxなのは、はみ出す矢印(20px)の先端をカード右端から20px内側に収めるため */
.card__footer {
  display: flex;
  justify-content: flex-end;
  padding: 0 40px var(--space-sm) var(--space-sm);
}

.card__link:hover .button,
.card__link:focus-visible .button {
  background: var(--color-primary);
  color: var(--color-white);
}

/* ==========================================================================
   5. ヘッダー
   ========================================================================== */

.site-header {
  background: var(--color-white);
}

.site-header__inner {
  display: flex;
  align-items: center;
  height: var(--header-height);
}

.site-header__logo {
  flex-shrink: 0;
  width: 243px;
}

.site-header__logo img {
  width: 100%;
  height: auto;
}

.site-header__nav {
  margin-left: auto;
}

.site-header__list {
  display: flex;
  align-items: center;
  gap: 50px;
}

.site-header__link {
  font-size: var(--fs-nav);
  font-weight: var(--fw-bold);
  line-height: 1;
  transition: color 0.3s;
}

.site-header__link:hover,
.site-header__link--current,
.current-menu-item > .site-header__link {
  color: var(--color-primary);
}

/* ハンバーガーはSPのみ表示する */
.site-header__toggle {
  display: none;
}

/* ==========================================================================
   6. パンくず
   ========================================================================== */

.breadcrumb {
  padding-block: var(--space-sm);
  font-size: var(--fs-breadcrumb);
  line-height: 1;
  letter-spacing: 0.01em;
}

/* トップページのみ、MVから続けて背景を白で通す */
.breadcrumb--white {
  background: var(--color-white);
}

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

/* 現在地以外はリンク。デザイン通り常時下線を引く */
.breadcrumb__link {
  text-decoration: underline;
}

.breadcrumb__link:hover,
.breadcrumb__link:focus-visible {
  color: var(--color-primary);
}

/* 現在地はリンクではないので、グレーで一段落とす */
.breadcrumb__item[aria-current="page"] {
  color: var(--color-muted);
}

.breadcrumb__item::after {
  margin-left: 12px;
  color: var(--color-muted);
  content: "＞";
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
}

.breadcrumb__item:last-child::after {
  content: none;
}

/* ==========================================================================
   6-2. 一覧ページの見出し帯
   ========================================================================== */

/* 上下46px + 見出し80px + 間隔30px + サブ26px ＝ デザイン通り高さ228px になる */
.page-title {
  padding-block: 46px;
  background: var(--color-surface);
}

.page-title__body {
  padding-left: var(--page-title-indent);
}

/* ==========================================================================
   7. MV（メインビジュアル）
   ========================================================================== */

.mv {
  padding-top: var(--space-sm);
  background: var(--color-white);
}

.mv__body {
  position: relative;
  aspect-ratio: 1260 / 590;
  overflow: hidden;
  border-radius: var(--radius-mv);
}

.mv__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom;
}

/* 内側の影はデザイン指定。画像の上に重ねる */
.mv__body::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: var(--shadow-mv);
  content: "";
  pointer-events: none;
}

.mv__catch {
  position: absolute;
  top: 50px;
  left: 50px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
}

/* 帯（1行＝1つの緑の帯）。折り返しで帯がつながらないよう nowrap で1行に固定し、
   帯を分けたい箇所は要素そのものを分ける（box-decoration-break は使わない。
   padding-block を持つ帯を折り返すと上下の帯が重なって階段状になるため） */
.mv__catch-line {
  display: inline-block;
  padding-block: var(--catch-pad-block);
  padding-inline: var(--band-pad);
  background: var(--color-primary);
  color: var(--color-white);
  font-size: var(--fs-catch);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  white-space: nowrap;
}

/* 2つ目の見出し（施設の価値向上に／貢献。）のまとまり。
   PCでは横並びで1本の帯に見せ、SPでは縦積みで2本の別々の帯に分ける */
.mv__catch-group {
  display: inline-flex;
}

/* PCでは2つの帯を隙間なく連結して1本の帯に見せるため、内側の余白を消す */
.mv__catch-group .mv__catch-line:first-child {
  padding-right: 0;
}

.mv__catch-group .mv__catch-line:last-child {
  padding-left: 0;
}

/* 助詞は強調語より一回り小さい */
.mv__catch-sub {
  font-size: var(--fs-catch-sub);
}

/* 熟語が途中で切れないようにする */
.mv__catch-word {
  white-space: nowrap;
}

/* ---- MV内のお知らせボックス ---- */
.mv__news {
  position: absolute;
  right: 50px;
  bottom: 50px;
  width: 326px;
  padding: var(--space-sm) var(--band-pad);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-news);
  background: var(--color-news-bg);
  color: var(--color-primary);
  transition: background-color 0.3s;
}

.mv__news:hover {
  background: var(--color-white);
}

/* ラベル・日付・タイトルはそれぞれ独立した行にする（span と time は既定でインラインのため） */
.mv__news-label {
  display: block;
  font-size: var(--fs-nav);
  font-weight: var(--fw-bold);
  line-height: 1;
}

.mv__news-date {
  display: block;
  margin-top: var(--space-xs);
  font-size: var(--fs-small);
  line-height: 1.15;
}

.mv__news-title {
  display: -webkit-box;
  overflow: hidden;
  margin-top: var(--space-2xs);
  font-size: var(--fs-small);
  line-height: 1.15;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 2行を超えたら省略する */
}

/* ==========================================================================
   8. 01 ミッション文
   ========================================================================== */

.mission {
  padding-block: var(--space-lg);
}

.mission__text {
  color: var(--color-text);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  line-height: var(--lh-body);
  text-align: center;
}

.mission__highlight {
  color: var(--color-primary);
}

/* ==========================================================================
   9. 02 REASON
   ========================================================================== */

.reason {
  padding-block: var(--space-xl) var(--space-2xl);
  background: var(--color-white);
}

.reason__blocks {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
  margin-top: var(--space-xl);
}

.reason__heading {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: 1.4;
}

.reason__text {
  margin-top: var(--space-md);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* ---- ブロック1：ベン図 + 本文 ---- */
.reason__block--venn {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 50px;
  align-items: center;
}

/* 3つの円が重なるベン図。Figmaの座標を比率(%)に変換して再現している */
.reason__venn {
  position: relative;
  width: 100%;
  aspect-ratio: 340 / 300;
}

/* 背面の薄いリング */
.reason__venn::before {
  position: absolute;
  top: 13.3%;
  left: 11.8%;
  width: 76.5%;
  aspect-ratio: 1;
  border: 1px solid var(--color-muted);
  border-radius: 50%;
  content: "";
}

.reason__venn-item {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  width: 44.1%; /* 150 / 340 */
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-white);
  font-size: var(--fs-tag);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  text-align: center;
}

.reason__venn-item--interest {
  top: 0;
  left: 27.9%; /* 95 / 340 */
}

.reason__venn-item--communication {
  top: 49%; /* 147 / 300 */
  left: 0;
}

.reason__venn-item--creative {
  top: 49%;
  left: 55.9%; /* 190 / 340 */
}

.reason__venn-icon {
  width: 27.3%; /* 41 / 150 */
  height: auto;
}

/* 中央のC&Cバッジ */
.reason__venn-badge {
  position: absolute;
  top: 42.7%; /* 128 / 300 */
  left: 37.6%; /* 128 / 340 */
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 24.7%; /* 84 / 340 */
  aspect-ratio: 1;
  border: 2px solid var(--color-white);
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-white);
  line-height: 1.1;
}

.reason__venn-badge-name {
  font-size: 24px;
  font-weight: var(--fw-bold);
}

.reason__venn-badge-sub {
  font-size: 12px;
  font-weight: var(--fw-bold);
}

/* ---- ブロック2：カード + サービス一覧 ---- */
/* セクションの背景が白なので、カードとサービス項目の色は反転させている */
.reason__block--service {
  display: grid;
  grid-template-columns: 1fr 287px;
  gap: var(--space-lg);
  align-items: center;
  padding: var(--space-lg) 40px;
  border-radius: var(--radius-card);
  background: var(--color-surface);
}

.reason__service-list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 各項目を貫く縦のガイド線。項目の背景が不透明なので、隙間の部分だけが見える */
.reason__service-list::before {
  position: absolute;
  top: 25px;
  bottom: 25px;
  left: calc(50% - 1px);
  width: 2px;
  border-radius: 10px;
  background: var(--color-muted);
  content: "";
}

.reason__service {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  border: 2px solid var(--color-primary);
  border-radius: 10px;
  background: var(--color-white);
  color: var(--color-primary);
  font-size: var(--fs-tag);
  font-weight: var(--fw-bold);
  line-height: 1;
}

/* アイコンは左寄せの固定位置、ラベルは項目の中央に置く（28px / 287px） */
.reason__service-icon {
  position: absolute;
  left: 9.75%;
  width: 30px;
  height: 30px;
}

/* 太字で強調する一文 */
.reason__text strong {
  font-weight: var(--fw-bold);
}

/* ---- ブロック3：画像 + クライアント一覧 ---- */
.reason__block--client {
  display: grid;
  grid-template-columns: 268px 1fr;
  gap: 55px;
  align-items: start;
}

/* 画像は背景が透明なイラストなので、下地の色は敷かない。
   1カラムに落ちたときに引き伸ばされないよう、原寸で頭打ちにする */
.reason__figure {
  max-width: 268px;
  margin-inline: auto;
  aspect-ratio: 268 / 326;
}

.reason__figure img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.reason__subheading {
  margin-top: var(--space-sm);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: 1.4;
}

/* 「主要クライアント」ラベル */
.reason__label {
  display: inline-flex;
  align-items: center;
  margin-top: var(--space-md);
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--color-primary);
  border-radius: 4px;
  color: var(--color-primary);
  font-size: var(--fs-tag);
  font-weight: var(--fw-bold);
  line-height: 1;
}

.reason__clients {
  margin-top: var(--space-sm);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* 会社名はどんな横幅でも途中で改行されないようにする */
.reason__client {
  white-space: nowrap;
}

/* ==========================================================================
   10. 03 CASE STUDIES / 04 PREPAREDNESS TOPICS
   ========================================================================== */

.works {
  padding-block: var(--space-xl) var(--space-2xl);
}

/* CASEはページ背景（サブ色）のまま、TOPICSは白地にして交互に切り替える */
.works--topics {
  background: var(--color-white);
}

.works__lead {
  margin-top: var(--space-lg);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.works__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--card-gap);
  row-gap: var(--card-gap-row);
  margin-top: var(--space-lg);
}

/* 投稿が0件のときの表示 */
.works__empty {
  margin-top: var(--space-lg);
  color: var(--color-muted);
}

/* ==========================================================================
   10-2. 一覧ページ
   ========================================================================== */

/* 上の余白はグリッド側の margin-top（60px）が担うので、下だけ指定する */
.archive {
  padding-bottom: var(--space-2xl);
  background: var(--color-white);
}

/* ---- ページ送り（デザインには無いが、8件を超えたときに必要なので追加） ---- */
.pagination {
  margin-top: var(--space-lg);
}

.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xs);
}

.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px; /* タップ領域を44px確保する */
  height: 44px;
  padding-inline: var(--space-xs);
  border: 1px solid var(--color-primary);
  border-radius: 4px;
  background: var(--color-white);
  color: var(--color-primary);
  font-size: var(--fs-btn);
  font-weight: var(--fw-bold);
  line-height: 1;
  transition: background-color 0.3s, color 0.3s;
}

.pagination .page-numbers.current,
.pagination a.page-numbers:hover,
.pagination a.page-numbers:focus-visible {
  background: var(--color-primary);
  color: var(--color-white);
}

/* 「…」は枠を出さない */
.pagination .page-numbers.dots {
  border-color: transparent;
  background: none;
}

/* ==========================================================================
   10-3. 個別記事ページ
   ========================================================================== */

/* ---- FV ---- */
.entry-hero {
  position: relative;
  padding-top: var(--space-sm);
  background: var(--color-white);
}

/* 写真は画面の右端まで抜けて配置し、緑のタイトル帯をその上に重ねる */
.entry-hero__media {
  position: absolute;
  top: var(--space-sm);
  right: 0;
  width: 56%; /* 1440pxのとき約800px */
  height: 590px;
  overflow: hidden;
  border-radius: var(--radius-mv);
}

/* 枠（56%幅 × 高さ590px固定）は画面が広がるほど横長になり、object-fit: cover の
   左右の切り取り量が減る。基準を左端にしておくことで、画像の左端は常に枠の左端に
   貼り付いたまま、広がった分だけ画像の右側が見えてくる（タブレット・PC共通）。
   SP（max-width: 767px）は写真が本文下に全幅で入る別レイアウトなので、
   そちらだけ従来どおり中央基準（object-position: bottom）に戻している */
.entry-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left bottom;
}

/* PCでは写真が画面右端から出ているように見せたいので、右側の角丸は落とす。
   タブレット以下は写真の見え方が変わるため、4隅とも角丸のままにする */
@media (min-width: 1101px) {
  .entry-hero__media {
    border-radius: var(--radius-mv) 0 0 var(--radius-mv);
  }

  /* 実績紹介（case）詳細ページの「その他の実例」だけPCで4カラムにする。
     タブレット・SPは works__grid 本来の挙動（2カラム／1カラム）のまま */
  .works__grid--case-related {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* 幅はタイトル帯が1行に収まるかどうかで決まる。文字サイズが上限の60pxになる画面幅
   （1440px以上）では、帯1行に10.6文字分を収めるのに665px必要なため670pxにしている。
   630pxだと10文字目で折り返し、最後の1文字だけが次の帯に落ちる。
   本文（.entry-hero__excerpt）とタグ（.entry-hero__keywords）は下で別途
   max-width を持たせて写真に重ならないようにしているため、この値の影響は受けない */
.entry-hero__body {
  position: relative;
  z-index: 1;
  max-width: 670px;
  min-height: 590px;
  padding-top: var(--space-xl);
}

/* 帯は1行につき1つ。行内で折り返した場合も box-decoration-break で帯が分かれる。
   帯の高さは文字の実サイズ、帯どうしの間隔は line-height で作っている */
.entry-hero__line {
  display: block;
}

.entry-hero__title {
  display: inline;
  padding-inline: var(--band-pad);
  background: var(--color-primary);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  color: var(--color-white);
  font-size: var(--fs-hero-title);
  font-weight: var(--fw-bold);
  line-height: 1.75;
}

/* タイトルが2行に分かれるときの前半（リード文） */
.entry-hero__title--lead {
  font-size: var(--fs-hero-title-lead);
}

/* タイトルの帯は写真に重ねるデザインだが、本文とタグは重ならないよう
   写真の左端（画面の44%）より内側に収まる幅で頭打ちにする */
.entry-hero__excerpt {
  max-width: min(500px, 36vw);
  margin-top: 70px;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.entry-hero__keywords {
  max-width: min(500px, 36vw);
  margin-top: 40px;
}

/* ---- 本文 ---- */
.entry-body {
  padding-block: var(--space-xl) var(--space-2xl);
}

/* 汎用の固定ページ（プライバシーポリシー等）は、パンくずから下を白地にする */
.entry-body--page {
  background: var(--color-white);
}

.entry-content {
  max-width: 800px;
  margin-inline: auto;
}

.entry-content > * + * {
  margin-top: 40px;
}

/* パンくず直下の先頭要素（多くは見出し）は、h2/h3自体の margin-top（80px）を
   打ち消して余白をなくす。:first-child は要素セレクタ（h2/h3）より詳細度が
   高いので、見出し側の指定を上書きできる */
.entry-content > :first-child {
  margin-top: 0;
}

.entry-content p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.entry-content a {
  color: var(--color-primary);
  text-decoration: underline;
}

/* 見出し2：白地に緑文字、下に緑の罫線 */
.entry-content h2 {
  display: flex;
  align-items: center;
  min-height: 70px;
  margin-top: var(--space-xl);
  padding: var(--space-xs) var(--band-pad);
  border-bottom: 2px solid var(--color-primary);
  border-radius: 10px 10px 0 0;
  background: var(--color-white);
  color: var(--color-primary);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: 1.4;
}

.entry-content h2 + * {
  margin-top: 42px;
}

/* 見出し3：左に緑の縦棒 */
.entry-content h3 {
  position: relative;
  margin-top: var(--space-xl);
  padding-left: var(--band-pad);
  color: var(--color-primary);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: 1.6;
}

.entry-content h3::before {
  position: absolute;
  top: 0.2em;
  bottom: 0.2em;
  left: 0;
  width: 6px;
  border-radius: 1px;
  background: var(--color-primary);
  content: "";
}

.entry-content h4 {
  margin-top: var(--space-lg);
  padding-left: var(--band-pad);
  color: var(--color-primary);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  line-height: 1.6;
}

.entry-content ul,
.entry-content ol {
  padding-left: 1.5em;
  font-size: var(--fs-content);
  line-height: 2;
  letter-spacing: 0.32px;
}

.entry-content ul {
  list-style: disc;
}

.entry-content ol {
  list-style: decimal;
}

.entry-content li::marker {
  color: var(--color-primary);
}

.entry-content blockquote {
  padding: 40px;
  border-radius: 20px;
  background: var(--color-quote-bg);
  font-size: var(--fs-content);
  line-height: 1.8;
  letter-spacing: 0.36px;
}

.entry-content img {
  border-radius: var(--radius-card);
}

/* ---- 本文中の画像 ---- */

/* キャプションを入れたときだけ、緑の枠に薄緑のキャプション帯を添える（Figma 342:10908）。
   キャプションが無い画像は従来どおり角丸の画像だけ */
.entry-content figure.wp-block-image:has(figcaption) {
  overflow: hidden;
  border: 2px solid var(--color-primary);
  border-radius: 20px;
}

/* 枠の角丸で切り抜くので、画像自体の角丸は打ち消す */
.entry-content figure.wp-block-image:has(figcaption) img {
  width: 100%;
  border-radius: 0;
}

.entry-content figure.wp-block-image figcaption {
  margin: 0;
  padding: var(--space-xs);
  background: var(--color-caption-bg);
  color: var(--color-text);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  text-align: center;
}

/* 画像を2つ以上続けて置いたときは2列に並べる（functions.php でまとめている）。
   デザインでは本文（800px）より広いコンテンツ幅いっぱいに置く */
.entry-content__figure-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px var(--card-gap);
  width: min(var(--content-width), calc(100vw - var(--gutter) * 2));
  margin-left: 50%;
  transform: translateX(-50%);
}

/* 並べたときは高さを揃える（595 : 334 はデザインの画像枠の比率） */
.entry-content__figure-grid img {
  width: 100%;
  aspect-ratio: 595 / 334;
  object-fit: cover;
}

/* 本文（800px）より広く配置する要素。ギャラリーをコンテンツ幅いっぱいに広げる */
.entry-content .alignwide {
  width: min(var(--content-width), calc(100vw - var(--gutter) * 2));
  max-width: none;
  margin-left: 50%;
  transform: translateX(-50%);
}

/* ---- 本文中のギャラリー ---- */
.entry-content .wp-block-gallery.has-nested-images {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px var(--card-gap);
}

.entry-content .wp-block-gallery.has-nested-images figure.wp-block-image {
  display: flex;
  flex-direction: column;
  width: auto;
  margin: 0;
  overflow: hidden;
  border: 2px solid var(--color-primary);
  border-radius: 20px;
}

.entry-content .wp-block-gallery.has-nested-images figure.wp-block-image img {
  width: 100%;
  aspect-ratio: 595 / 334;
  border-radius: 0;
  object-fit: cover;
}

/* WordPress既定ではキャプションが画像に重なるので、下の帯として置き直す */
.entry-content .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
  position: static;
  max-width: none;
  margin: 0;
  padding: var(--space-xs);
  background: var(--color-caption-bg);
  color: var(--color-text);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  text-align: center;
}

/* ---- 本文下のお問い合わせボタン ---- */
.entry-body__contact {
  display: flex;
  justify-content: center;
  margin-top: var(--space-2xl);
}

/* ---- その他の記事 ---- */
.related {
  padding-block: var(--space-xl) var(--space-2xl);
  background: var(--color-white);
}

/* ==========================================================================
   10-5. 404ページ
   ========================================================================== */

.notfound {
  padding-block: var(--space-2xl);
  text-align: center;
}

.notfound__text {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* ==========================================================================
   10-4. お問い合わせページ
   フォーム本体は Contact Form 7 の出力。想定するショートコードの構成は log.md 参照。
   ========================================================================== */

.contact-page {
  padding-block: var(--space-xl) var(--space-2xl);
  background: var(--color-white);
}

.form-panel {
  max-width: 922px;
  margin-inline: auto;
  padding: 50px min(131px, 14%) 40px;
  border-radius: 10px;
  background: var(--color-surface);
}

.form-panel__notice {
  color: var(--color-error);
  font-size: var(--fs-tag);
  text-align: center;
}

/* Contact Form 7 はショートコード中の改行を <br> と <p> に変換する。
   余白はCSS側で作っているので、変換で生まれる行送りは打ち消す */
.form-panel br {
  display: none;
}

.form-panel p {
  margin: 0;
}

/* ---- 入力欄の共通スタイル ---- */
.form-panel input[type="text"],
.form-panel input[type="email"],
.form-panel input[type="tel"],
.form-panel input[type="url"],
.form-panel textarea {
  width: 100%;
  height: 56px;
  padding-inline: 14px;
  border: 2px solid var(--color-input-border);
  border-radius: 4px;
  background: var(--color-white);
  color: var(--color-text);
  font-family: inherit;
  font-size: 16px;
}

.form-panel textarea {
  height: 220px;
  padding-block: 14px;
  line-height: 1.8;
  resize: vertical;
}

.form-panel ::placeholder {
  color: var(--color-placeholder);
}

.form-panel input:focus,
.form-panel textarea:focus {
  border-color: var(--color-primary);
  outline: none;
}

/* ---- ラジオボタン（お問い合わせ種別） ---- */
/* Contact Form 7 はラジオの全項目を1つの span でまとめて出力するので、
   横並びの指定はその内側のコントロールに当てる */
.form__types {
  margin-bottom: 52px;
}

.form__types .wpcf7-form-control {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) 40px;
}

.form-panel .wpcf7-list-item {
  margin: 0;
}

.form-panel .wpcf7-list-item label {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  cursor: pointer;
}

.form-panel .wpcf7-list-item-label {
  font-size: 18px;
  font-weight: var(--fw-medium);
  letter-spacing: 1.37px;
}

.form-panel input[type="radio"],
.form-panel input[type="checkbox"] {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin: 0;
  border: 2px solid var(--color-muted);
  background: var(--color-white);
  appearance: none;
  cursor: pointer;
}

.form-panel input[type="radio"] {
  border-radius: 50%;
}

.form-panel input[type="checkbox"] {
  border-radius: 2px;
}

.form-panel input[type="radio"]:checked {
  border-color: var(--color-primary);
  background: radial-gradient(circle at center, var(--color-primary) 0 5px, var(--color-white) 5px);
}

.form-panel input[type="checkbox"]:checked {
  border-color: var(--color-primary);
  background: var(--color-primary)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.5' d='M3 8.5l3.5 3.5L13 5'/%3E%3C/svg%3E")
    center / 16px no-repeat;
}

/* ---- 各入力行 ---- */
.form__row + .form__row {
  margin-top: var(--space-md);
}

.form__label {
  display: block;
  margin-bottom: 8px;
  font-size: 18px;
  font-weight: var(--fw-bold);
  line-height: 1.2;
}

.form__required {
  margin-left: 4px;
  color: var(--color-error);
  font-size: var(--fs-tag);
}

/* ---- 同意チェック ---- */
/* CF7はチェックボックスを span で三重に包むため、その入れ子もすべて flex にして
   チェックボックスをテキストの行の中央に揃える（inline のままだとベースライン配置でずれる） */
.form__consent,
.form__consent > p,
.form__consent .wpcf7-form-control-wrap,
.form__consent .wpcf7-acceptance,
.form__consent .wpcf7-list-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
}

.form__consent {
  margin-top: 40px;
  font-size: var(--fs-tag);
}

.form__consent a {
  color: var(--color-primary);
  text-decoration: underline;
}

/* ---- 送信ボタン ---- */
/* デザイン上、矢印が枠の右端を約30pxはみ出す */
.form__submit {
  position: relative;
  width: 362px;
  max-width: 100%;
  margin: var(--space-md) auto 0;
}

/* 矢印は「送信ボタンの上下中央」に置きたい。ボタンの上にCloudflare Turnstileの
   ウィジェットが入るとコンテナ側が縦に伸びるため、コンテナ中央（top: 50%）を基準にすると
   矢印だけ上にずれる。下端を基準にし、ボタンと同じ高さ67pxの箱の中央に描くことで、
   ウィジェットの有無にかかわらずボタンの中央に揃う */
.form__submit::after {
  position: absolute;
  bottom: 0;
  left: 245px;
  width: 148px;
  height: 67px;
  background: url("assets/img/arrow.svg") center / contain no-repeat;
  content: "";
  pointer-events: none;
}

/* ---- Cloudflare Turnstile（スパム対策のウィジェット） ---- */
/* プラグインがウィジェットの外枠に margin-bottom: -15px をインラインで付けるため、
   打ち消さないと送信ボタンが15px上にずれて重なる。インライン指定の上書きには
   !important が必要。ウィジェットは300px固定幅なのでflexで中央に寄せる */
.form__submit .cf7-cf-turnstile {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-sm) !important;
}

.form-panel input[type="submit"] {
  display: block; /* インラインだと行ボックス分の高さが余計に付くため */
  width: 100%;
  height: 67px;
  padding-right: 130px; /* 矢印と文字が重ならないようにする */
  border: 2px solid var(--color-primary);
  border-radius: 0;
  background: var(--color-white);
  color: var(--color-primary);
  font-family: inherit;
  font-size: 18px;
  font-weight: var(--fw-bold);
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}

.form-panel input[type="submit"]:hover,
.form-panel input[type="submit"]:focus-visible {
  background: var(--color-primary);
  color: var(--color-white);
}

/* ---- Contact Form 7 のエラー表示 ---- */
.form-panel .wpcf7-not-valid-tip {
  margin-top: 6px;
  color: var(--color-error);
  font-size: var(--fs-tag);
}

.form-panel .wpcf7-not-valid {
  border-color: var(--color-error);
}

.form-panel .wpcf7-response-output {
  margin: var(--space-sm) 0 0;
  padding: 12px 16px;
  border-width: 2px;
  font-size: var(--fs-tag);
}

/* 送信中に出るスピナー。ボタンの高さに影響しないよう流れから外す */
.form__submit .wpcf7-spinner {
  position: absolute;
  bottom: -26px;
  left: 50%;
  margin: 0;
  transform: translateX(-50%);
}

/* ==========================================================================
   11. 05 CONTACT
   ========================================================================== */

.contact {
  padding-block: var(--space-xl) var(--space-2xl);
}

/* 見出し・本文を撤去したTOPページのCONTACTは、.cta共通の上マージン(100px)を打ち消す。
   一覧ページ（archive.php）側は直前にカード一覧があるため、.cta自体の余白はそのまま残す */
.contact .cta {
  margin-top: 0;
}

/* ---- CTAブロック ---- */
/* 背景画像は緑地に写真を重ねた状態で書き出されている（1220×232）。
   読み込み前と、画像より縦長になるSPでの余白用に、下地の緑も指定しておく */
.cta {
  margin-top: var(--space-2xl);
  padding: 4px; /* 外枠と内側の白ボーダーの間隔 */
  border-radius: var(--radius-cta);
  background: var(--color-primary) url("assets/img/cta.webp") center / cover no-repeat;
}

/* 上下44px + 見出し24px + 間隔18px + ボタン90px + 枠線 = デザイン通り高さ232px になる */
.cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 44px var(--space-sm);
  border: 2px solid var(--color-white);
  border-radius: var(--radius-cta);
}

.cta__text {
  color: var(--color-white);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: 0.48px;
}

/* 白い大きめのボタン。矢印は右端から42pxはみ出して緑地の上に抜ける。
   はみ出す分だけ右マージンを相殺し、矢印を含めた全体が中央に来るようにしている */
.cta__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 447px;
  height: 90px;
  margin-right: -42px;
  padding-inline: 40px;
  background: var(--color-white);
  box-shadow: var(--shadow-btn);
  color: var(--color-primary);
  font-size: 29px;
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: 1px;
  transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s;
}

/* ボタン内を走る線。白い矢印は白地に同化して見えないので、この緑の線が代わりに見える。
   矢印のボタン内側にあたる区間（右端から158px）にぴったり重ねている。
   矢印SVGにも同じ緑の帯が入っているが、200px幅に縮小される分だけ右端の手前（約2px）で
   途切れるので、線の太さ（4px）に合わせてボタンの右端まで緑で覆いきる */
.cta__btn::after {
  position: absolute;
  top: 50%;
  right: 0;
  z-index: 1;
  width: 158px;
  height: 4px;
  background: var(--color-primary);
  content: "";
  transform: translateY(-50%);
}

.cta__btn:hover,
.cta__btn:focus-visible {
  transform: translateY(3px);
  background: var(--color-btn-hover);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2);
}

/* 個別記事ページ用。ページ背景に直接置くので緑地に白文字で反転させる。
   矢印のはみ出し（margin-right の相殺）は白ボタンと同じ扱いなので打ち消さない。
   枠線は常に緑にしておき、地の色（緑→白）が変わるだけで枠が現れて見えるようにする。

   このボタンは幅が変わっても見た目を変えたくないので、矢印の寸法を変数にまとめてある。
   タブレット・SPではこの2つの値だけを差し替えれば、はみ出し量・切り落とし位置・
   margin の相殺がすべて連動する（--cta-arrow-out は矢印幅の約21%が基準） */
.cta__btn--solid {
  --cta-arrow-w: 200px;   /* 矢印の幅 */
  --cta-arrow-out: 42px;  /* ボタンからはみ出す量 */

  margin-right: calc(var(--cta-arrow-out) * -1);
  border: 1px solid var(--color-primary);
  background: var(--color-primary);
  box-shadow: none;
  color: var(--color-white);
  transition: background-color 0.3s, color 0.3s;
}

.cta__btn--solid .cta__icon {
  right: calc(var(--cta-arrow-out) * -1);
  width: var(--cta-arrow-w);
}

/* 白ボタン用の緑の線は不要。こちらは矢印そのものを白／緑で切り替える */
.cta__btn--solid::after {
  content: none;
}

.cta__btn--solid:hover,
.cta__btn--solid:focus-visible {
  transform: none;
  /* 白地に反転。文字・枠は緑のまま（.cta__btn--solid の border / color を継承） */
  background: var(--color-white);
  color: var(--color-primary);
  box-shadow: none;
}

/* 矢印は白1枚。ボタン上の線部分は白地に同化して見えず、
   はみ出した矢印の先端だけが緑地の上に白く出る */
.cta__icon {
  position: absolute;
  top: 50%;
  right: -42px;
  width: 200px;
  height: auto;
  transform: translateY(-50%);
}

/* 個別記事ページのボタンは矢印を2枚重ねている（下＝緑 / 上＝白）。
   ホバー前：上の白い矢印が見えるので、ボタン内は白い線になる。ボタンからはみ出す区間だけ
   clip-path で白を切り落とし、下の緑の矢印を見せる（ページ地は白いので緑でないと見えない）。
   ホバー後：上の白を透過させると下の緑がそのまま出るので、線も矢印の先端も緑になる。
   ※ 白い矢印に arrow-cta-white.svg（緑の帯入り）は使えない。あの帯は白いボタン用で、
     緑地に置くと帯が背景と同化して線の大半が消えるため、帯なしの
     arrow-cta-white-plain.svg を使う */
.cta__icon--white {
  clip-path: inset(0 var(--cta-arrow-out) 0 0); /* はみ出す分を切り落とす */
  transition: opacity 0.3s;
}

.cta__btn--solid:hover .cta__icon--white,
.cta__btn--solid:focus-visible .cta__icon--white {
  opacity: 0;
}

/* ==========================================================================
   12. フッター
   ========================================================================== */

.site-footer {
  padding-block: 40px var(--space-md);
  border-top: 2px solid var(--color-primary);
  background: var(--color-white);
}

.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  max-width: 800px;
  margin-inline: auto;
}

.site-footer__link {
  font-size: 18px;
  font-weight: var(--fw-bold);
  line-height: 30px;
  letter-spacing: 1px;
  transition: color 0.3s;
}

.site-footer__link:hover {
  color: var(--color-primary);
}

.site-footer__link--parent {
  color: var(--color-primary);
}

.site-footer__sub {
  margin-top: var(--space-xs);
}

/* 子リンクの先頭に短いダッシュを置く */
.site-footer__sub-item {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--fs-btn);
  font-weight: var(--fw-bold);
  line-height: 30px;
  letter-spacing: 1px;
}

.site-footer__sub-item::before {
  width: 12px;
  height: 2px;
  background: var(--color-primary);
  content: "";
  opacity: 0.5;
}

.site-footer__copyright {
  margin-top: var(--space-lg);
  color: var(--color-muted);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  line-height: 30px;
  letter-spacing: 1px;
  text-align: center;
}

/* ==========================================================================
   13. タブレット〜小型PC（デザイン未提供のため崩れ防止のみ）
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1100px) {
  :root {
    --gutter: 40px;
    --gutter-wide: 40px;
    --page-title-indent: 0px;
    --fs-catch: 40px;
    --fs-catch-sub: 34px;
    --fs-h2: 28px;
    --fs-body: 17px;
    --fs-card-title: 22px;
  }

  .site-header__list {
    gap: var(--space-sm);
  }

  .site-header__link {
    font-size: var(--fs-btn);
  }

  .reason__block--venn,
  .reason__block--client {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .cta__btn {
    width: 100%;
    max-width: 360px;
    margin-right: 0;
    font-size: 22px;
  }

  .cta__btn::after {
    content: none;
  }

  .cta__icon {
    right: 20px;
    width: 120px;
  }

  /* CONTACTの白ボタン：PCと同じ「ボタン内は緑の線／はみ出した先端は白い矢印」の仕組みを
     幅に合わせて縮小して維持する。矢印(arrow-cta-white.svg)は緑帯(幅の約78%)＋白い先端で
     できているので、緑帯の終わり＝白い先端の始まりがボタン右端に来るよう、
     はみ出し量を「矢印幅 × 0.221」、ボタン内の緑線(::after)を「矢印幅 × 0.779」にする */
  .cta__btn:not(.cta__btn--solid) {
    --cta-arrow-w: 150px;

    margin-right: calc(var(--cta-arrow-w) * -0.221);
  }

  .cta__btn:not(.cta__btn--solid) .cta__icon {
    right: calc(var(--cta-arrow-w) * -0.221);
    width: var(--cta-arrow-w);
    /* content で直接指定して遅延読み込みのプレースホルダーを回避する（PC同様に白い先端が出る） */
    content: url("assets/img/arrow-cta-white.svg");
  }

  .cta__btn:not(.cta__btn--solid)::after {
    width: calc(var(--cta-arrow-w) * 0.779);
    content: "";
  }

  /* 個別記事ページのボタンだけはPCと同じ見た目にしたいので、矢印をはみ出させたままにする。
     ボタン幅（447→360px）に合わせて矢印も同じ比率で縮める */
  .cta__btn--solid {
    --cta-arrow-w: 161px;
    --cta-arrow-out: 34px;

    margin-right: calc(var(--cta-arrow-out) * -1);
  }
}

/* ==========================================================================
   14. SP対応（ブレークポイント 768px）
   FigmaのSPアートボードは780px＝実寸390pxの2倍。アートボード値は必ず÷2して使う。
   ========================================================================== */

@media (max-width: 767px) {
  :root {
    /* レイアウト系はvw換算（アートボード値 ÷ 2 ÷ 390 × 100vw） */
    --gutter: calc(19 / 390 * 100vw);
    --gutter-wide: calc(19 / 390 * 100vw);
    --content-width: 100%;
    --mv-width: 100%;
    --header-height: 58px;
    --band-pad: 9px;
    --catch-pad-block: 6px;
    --radius-mv: 20px;
    --radius-cta: 16px;
    --card-gap: var(--space-md);
    --card-gap-row: var(--space-md);
    --page-title-indent: 9px;

    /* 文字サイズは可読性を優先して固定px */
    --fs-display: 40px;
    --fs-catch: clamp(26px, 9.2vw, 40px);
    --fs-catch-sub: clamp(22px, 7.7vw, 34px);
    --fs-h2: 24px;
    --fs-lead: 16px;
    --fs-h3: 18px;
    --fs-body: 15px;
    --fs-card-title: 20px;
    --fs-nav: 18px;
    --fs-btn: 14px;
    --fs-tag: 12px;
    --fs-small: 13px;
    /* 320px幅でも「PREPAREDNESS」のような長い単語が溢れないよう可変にしている */
    --fs-page-title: clamp(36px, 15.4vw, 60px);
    --fs-page-title-ja: 20px;
    --fs-hero-title: clamp(24px, 8.2vw, 36px);
    --fs-hero-title-lead: clamp(20px, 6.9vw, 30px);
    --fs-h4: 18px;
    --fs-content: 15px;

    --space-lg: 30px;
    --space-xl: 40px;
    --space-2xl: 50px;
  }

  .page-title {
    padding-block: var(--space-md);
  }

  /* ---- ヘッダー：ハンバーガー ---- */
  .site-header__logo {
    width: 180px;
  }

  .site-header__toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 44px; /* タップ領域は44px確保する */
    height: 44px;
    margin-left: auto;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
  }

  .site-header__toggle-bar {
    width: 24px;
    height: 2px;
    margin-inline: auto;
    background: var(--color-text);
    transition: transform 0.3s, opacity 0.3s;
  }

  /* 開いているときは×印に変形させる */
  .site-header__toggle[aria-expanded="true"] .site-header__toggle-bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .site-header__toggle[aria-expanded="true"] .site-header__toggle-bar:nth-child(2) {
    opacity: 0;
  }

  .site-header__toggle[aria-expanded="true"] .site-header__toggle-bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  .site-header__nav {
    position: fixed;
    inset: var(--header-height) 0 0;
    z-index: 100;
    margin-left: 0;
    overflow-y: auto;
    background: var(--color-white);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    visibility: hidden;
  }

  .is-nav-open .site-header__nav {
    transform: translateX(0);
    visibility: visible;
  }

  /* メニューを開いている間は背面のスクロールを止める */
  .is-nav-open {
    overflow: hidden;
  }

  .site-header__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .site-header__link {
    display: block;
    padding: var(--space-sm) var(--gutter);
    border-bottom: 1px solid var(--color-surface);
  }

  /* ---- MV ---- */
  .mv__body {
    aspect-ratio: 704 / 1022; /* SPは縦長 */
  }

  .mv__catch {
    top: var(--space-sm);
    left: var(--space-xs);
  }

  /* SPでは「施設の価値向上に」と「貢献。」を縦積みの2本の帯に分ける。
     PCで消していた内側の余白を戻して、各帯が独立して見えるようにする */
  .mv__catch-group {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
  }

  .mv__catch-group .mv__catch-line:first-child {
    padding-right: var(--band-pad);
  }

  .mv__catch-group .mv__catch-line:last-child {
    padding-left: var(--band-pad);
  }

  .mv__news {
    right: var(--space-xs);
    bottom: var(--space-xs);
    left: var(--space-xs);
    width: auto;
    padding: var(--space-xs) var(--space-sm);
  }

  /* ---- セクション見出し ---- */
  /* デスクトップの30pxはSPだと英字見出しに対して余白が広すぎるため詰める */
  .section-title {
    gap: var(--space-2xs);
  }

  /* ---- 各セクションを1カラムにする ---- */
  .reason__block--venn,
  .reason__block--service,
  .reason__block--client {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .reason__block--service {
    padding: var(--space-md) var(--space-sm);
  }

  .reason__venn {
    max-width: 340px;
    margin-inline: auto;
  }

  .reason__venn-badge-name {
    font-size: 20px;
  }

  .reason__venn-badge-sub {
    font-size: 10px;
  }

  .works__grid {
    grid-template-columns: 1fr;
  }

  /* ---- CONTACTのCTA ---- */
  .cta__inner {
    gap: var(--space-md);
    padding: var(--space-md) var(--space-sm);
  }

  .cta__text {
    text-align: center;
  }

  .cta__btn {
    width: 100%;
    max-width: 300px;
    height: 60px;
    margin-right: 0;
    padding-inline: var(--space-sm);
    font-size: 18px;
  }

  .cta__btn::after {
    content: none;
  }

  .cta__icon {
    right: var(--space-sm);
    width: 80px;
  }

  /* CONTACTの白ボタン：PCと同じ「ボタン内は緑の線／はみ出した先端は白い矢印」の仕組みを
     SP幅でも縮小して維持する（緑帯の終わり＝白い先端の始まりがボタン右端）。
     SPは横幅が狭く、マイナスマージンを付けると中央寄せの計算でボタンが右にずれ、
     白い先端が緑ブロックの白枠に隠れてしまう。そのためボタンは中央のまま
     （margin-right は打ち消さない）、矢印だけ右にはみ出させる。
     文言は左パディングを広げて少し右に寄せ、添付デザインに合わせる */
  .cta__btn:not(.cta__btn--solid) {
    --cta-arrow-w: 100px;

    max-width: 240px;
    padding-inline: var(--space-md);
  }

  .cta__btn:not(.cta__btn--solid) .cta__icon {
    right: calc(var(--cta-arrow-w) * -0.221);
    width: var(--cta-arrow-w);
    /* content で直接指定して遅延読み込みのプレースホルダーを回避する（PC同様に白い先端が出る） */
    content: url("assets/img/arrow-cta-white.svg");
  }

  .cta__btn:not(.cta__btn--solid)::after {
    width: calc(var(--cta-arrow-w) * 0.779);
    content: "";
  }

  /* 個別記事ページのボタンだけはPCと同じ見た目にしたいので、矢印をはみ出させたままにする。
     はみ出す分だけ画面幅が必要になるため、ボタン幅は300→260pxに詰めて
     矢印もその比率（PCと同じ 幅447:矢印200）に合わせている。
     こうしないと375px幅の端末で矢印の先端が画面外に切れる */
  .cta__btn--solid {
    --cta-arrow-w: 116px;
    --cta-arrow-out: 24px;

    max-width: 260px;
    margin-right: calc(var(--cta-arrow-out) * -1);
  }

  /* ---- 個別記事ページ：写真は本文の下に回して全幅で置く ---- */
  .entry-hero__media {
    position: static;
    width: auto;
    height: auto;
    margin-top: var(--space-md);
    margin-inline: var(--gutter);
    aspect-ratio: 704 / 361;
  }

  /* このレイアウトでは左揃えにする意味がない（枠が本文と同じ全幅なので、
     左に寄せると逆に右側だけが常に切れて不自然）ので、従来どおり中央基準に戻す */
  .entry-hero__img {
    object-position: bottom;
  }

  .entry-hero__body {
    max-width: none;
    min-height: 0;
    padding-top: var(--space-md);
  }

  .entry-hero__excerpt,
  .entry-hero__keywords {
    max-width: none;
  }

  .entry-hero__excerpt {
    margin-top: var(--space-md);
  }

  .entry-hero__keywords {
    margin-top: var(--space-sm);
  }

  /* 本文まわりの余白：PCの大きな余白（上下80/100px、見出し前80px）はSPだと
     間延びするので詰める。パンくず直下の先頭見出しの余白を消す指定は
     .entry-content の基本ルール（:first-child）で幅を問わず効いている */
  .entry-body {
    padding-block: var(--space-md) var(--space-xl);
  }

  .entry-content {
    max-width: none;
  }

  .entry-content > * + * {
    margin-top: var(--space-md);
  }

  .entry-content h2 {
    min-height: 0;
    margin-top: var(--space-lg);
    padding-block: var(--space-sm);
  }

  .entry-content h2 + * {
    margin-top: var(--space-md);
  }

  /* 段落の上の余白は 30px だと空きすぎるので 20px に詰める（見出し直後・段落どうし共通）。
     図版やリストなど段落以外のブロックの余白（30px）はそのまま */
  .entry-content .wp-block-paragraph {
    margin-top: var(--space-sm);
  }

  .entry-content blockquote {
    padding: var(--space-md);
  }

  /* SPでは本文幅いっぱいなので、広げる指定は打ち消す */
  .entry-content .alignwide,
  .entry-content__figure-grid {
    width: auto;
    margin-left: 0;
    transform: none;
  }

  /* 横に並べる余裕がないので縦に積む */
  .entry-content__figure-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .entry-content .wp-block-gallery.has-nested-images {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  /* ---- お問い合わせフォーム ---- */
  .form-panel {
    padding: var(--space-md) 21px;
  }

  .form__types {
    margin-bottom: var(--space-md);
  }

  .form__types .wpcf7-form-control {
    gap: var(--space-sm);
  }

  /* SPでは2列に折り返す */
  .form__types .wpcf7-list-item {
    width: calc(50% - var(--space-sm) / 2);
  }

  .form-panel .wpcf7-list-item-label,
  .form__label {
    font-size: var(--fs-content);
  }

  /* 2列に収めるため字送りは詰める（「パートナー協業」が折り返さない幅にする） */
  .form-panel .wpcf7-list-item-label {
    letter-spacing: 0;
  }

  .form-panel input[type="text"],
  .form-panel input[type="email"],
  .form-panel input[type="tel"],
  .form-panel input[type="url"],
  .form-panel textarea {
    height: 48px;
    font-size: 16px; /* iOSで拡大されないよう16px未満にしない */
  }

  .form-panel textarea {
    height: 200px;
  }

  /* SPでは矢印を出さず、ボタンいっぱいに文字を置く */
  .form__submit {
    width: 100%;
  }

  .form__submit::after {
    content: none;
  }

  .form-panel input[type="submit"] {
    height: 54px;
    padding-right: 0;
    font-size: 16px;
  }

  /* ---- フッター ---- */
  .site-footer__cols {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .site-footer__link {
    font-size: var(--fs-btn);
  }
}