/* =========================================================
   pages.css — ページ固有スタイル
   依存: tokens.css / base.css / components.css

   対応Figma: 01_TOP 14:2 / 02_About 50:2 / 03_Services 52:76 /
   08_Cases 56:379 / 09_Case_Detail 57:460 / 10_Contact 57:576 /
   10b_Error 186:1650 / 10c_Thanks 186:1719 / 11_Privacy 95:1191 / 12_404 95:1267
   ＋各SP版
   ========================================================= */

/* =========================================================
   共通: ページタイトル・セクションリズム
   ========================================================= */
.page-title {
  padding: var(--space-6xl) 0 var(--space-lg);
}

.page-title .breadcrumb {
  margin-bottom: var(--space-lg);
}

.page-title__en {
  color: var(--color-text-primary);
}

.page-title__jp {
  margin-top: var(--space-lg);
  font-size: var(--text-label-s);
  font-weight: 500;
  color: var(--color-text-secondary);
}

.page-title__lead {
  margin-top: var(--space-3xl);
  font-size: var(--text-body);
  color: var(--color-text-primary);
  max-width: 1215px;
}

.section-block {
  padding-block: var(--space-3xl);
}

/* =========================================================
   TOP: 緑の曲線背景（Figma: Subtract 219:1827）
   Hero下部からServicesセクションまでを覆い、その上に
   WPセンターバナーとサービスカードが乗る
   ========================================================= */
.front-page {
  position: relative;
  overflow-x: clip; /* 曲線が横にはみ出しても横スクロールさせない */
}

/* 上下のカーブは高さ固定・中央は単色で伸縮させる（縦に引き伸ばすと曲線が歪むため3層で構成） */
.top-curve {
  position: absolute;
  top: 296px; /* Figma: Subtract y=372 − ヘッダー76（Heroはmain先頭） */
  left: 0;
  width: 100%;
  height: 848px;
  background:
    url("../img/top-curve-top.svg") top center / 100% 122px no-repeat,
    url("../img/top-curve-bottom.svg") bottom center / 100% 128px no-repeat,
    linear-gradient(var(--color-accent-primary), var(--color-accent-primary))
      center 122px / 100% calc(100% - 250px) no-repeat;
  z-index: 0;
  pointer-events: none;
}

/* --- 上端カーブのドリフト（2026-08-14追加 / assets/js/curve-drift.js）---
   窪みの最下点と左右端の高さをゆっくり動かすため、上端カーブだけを
   インラインSVGで描き直す。JSの初期化に成功したときだけ .is-drift が付き、
   背景レイヤーからは上端カーブを外す（JS無効・モーション低減時は上の静止版のまま）。

   ベタ塗りの開始位置を 122px → 148px に下げているのがポイント。
   最下点が下がったとき、122pxからベタ塗りを敷いていると窪みの底が水平に
   切られてしまう。最下点は最大で 121.5+18=139.5px まで下がり、SVG側は
   122+foot(32)=154px まで描いているので、6px重ねた148pxから敷けば
   底も切られず継ぎ目も出ない。
   ※ 276px = 148px（上）＋128px（下カーブ）。JS側の foot / move を変えたらここも見直すこと。 */
.top-curve.is-drift {
  background:
    url("../img/top-curve-bottom.svg") bottom center / 100% 128px no-repeat,
    linear-gradient(var(--color-accent-primary), var(--color-accent-primary))
      center 148px / 100% calc(100% - 276px) no-repeat;
}

/* 上下にはみ出すぶんの余白を含む top / height は JS がインライン指定する */
.top-curve__drift {
  position: absolute;
  left: 0;
  width: 100%;
  display: block;
}

.top-curve__drift path {
  fill: var(--color-accent-primary, #6db99a);
}

/* コンテンツは曲線より前面に */
.front-page > .hero,
.front-page > .top-wpcenter,
.front-page > .top-services,
.front-page > .top-news,
.front-page > .top-cases {
  position: relative;
  z-index: 1;
}

/* 緑の上に乗るServicesセクションは白文字（Figma準拠） */
.front-page .top-services .section-head,
.front-page .top-services .section-head__star,
.front-page .top-services .section-lead {
  color: var(--color-text-inverse);
}

/* =========================================================
   TOP: セクション間の余白（Figma準拠・上パディングで間隔を作る）
   WPCenter=44 / Services=88 / News=88 / Cases=88（いずれも下0）
   ※ News は2026-08-14追加。汎用の .section-block（32/32）のままだと
     Services→News が32px・News→Cases が120pxとバラついたため、
     他セクションと同じ「上88・下0」に揃えている。
   ========================================================= */
.front-page .top-wpcenter {
  padding: 44px 0 0;
}

.front-page .top-services,
.front-page .top-news,
.front-page .top-cases {
  padding: var(--space-section) 0 0; /* 88 */
}

/* セクション見出し直下のリード文（Figma: Services/Cases 218:1809・219:1810） */
.section-lead {
  margin-top: var(--space-2xl); /* 28（SectionHeadとのgap） */
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text-primary);
}

/* リード文がある場合、見出し直後のマージンは .section-lead 側で持つ */
.top-services .section-head,
.top-cases__head {
  margin-bottom: 0;
}

.section-lead + .top-services__grid,
.section-lead + .cases-grid {
  margin-top: var(--space-2xl); /* 28 */
}

/* =========================================================
   TOP: WPセンター
   ========================================================= */
/* 2026-08-03: セクション見出し・バナー内タイトル・チップを廃止（ロゴ＋説明＋外部アイコンのみ）
   左右余白48px（SP16px）はデザインどおり維持し、1440pxの上限だけ解除。
   → ワイドモニターでも余白が広がらず、常に「画面幅 − 96px」で伸びる */
.top-wpcenter > .container {
  max-width: none; /* 1440px制限を解除（左右パディングは .container の48px/16pxのまま） */
}

.solution-row {
  position: relative; /* 下の「カード全体をリンクにする」当たり判定の基準 */
  display: flex;
  align-items: center;
  justify-content: space-between; /* Figma 16:6 と同じ両端揃え（余白は画面幅に応じて伸びる） */
  gap: var(--space-3xl);
  width: 100%;
  padding: var(--space-2xl); /* 28 */
  background: var(--color-bg-surface);
  border-radius: var(--radius-lg); /* 10 */
  color: var(--color-text-primary);
  cursor: pointer; /* カードのどこを押してもリンクになるため */
}

/* 2026-08-17: カード全体を wpcenter.jp へのリンクにする（ユーザー要望）。
   行を <a> で囲うとボタン（これも <a>）が入れ子になって不正なHTMLになるので、
   ボタンの擬似要素をカード全面に広げる方式にしている（stretched link）。
   リンクは1つのまま＝読み上げも「wpcenter.jp」の1リンクとして扱われる。 */
.solution-row__btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1; /* ロゴ・説明文より前面に置いて、どこを押しても反応するように */
  border-radius: var(--radius-lg);
}

.solution-row__logo {
  width: 150px;
  flex: none;
}

/* 2026-08-06: max-width（520px）による折り返しを廃止し、PCでは常に1行 */
.solution-row__desc {
  flex: none;
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--color-text-secondary);
}

/* 折り返し禁止。本文1行（実測約741px）が確実に収まる900px以上でのみ適用する */
@media (min-width: 900px) {
  .solution-row__desc {
    white-space: nowrap;
  }
}

/* 1行を保つため、3要素の横並びが破綻する1279px以下は縦積みに切り替える
   （ロゴ150 + 本文741 + ボタン143 + gap64 + padding56 + 左右余白96 = 1250px） */
@media (max-width: 1279px) {
  .solution-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-lg);
  }
}

/* 2026-08-06: Figma 232:1860 のピルボタン（wpcenter.jp＋外部リンク）
   アイコン18px／ラベルとのgap 4px（サービスページの20px/8pxとは別指定） */
.solution-row__btn {
  flex: none;
}

.solution-row__btn .btn__ext-icon {
  width: 18px;
  height: 18px;
  margin-left: var(--space-xs); /* 4 */
}

/* =========================================================
   TOP: サービス4カード（写真＋ダークオーバーレイ）
   ========================================================= */
.top-services .section-head {
  margin-bottom: var(--space-2xl);
}

.top-services__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md); /* 12 */
}

.svc-photo-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 440px;
  padding: var(--space-3xl) var(--space-2xl) var(--space-2xl);
  border-radius: var(--radius-xl);
  background-size: cover;
  background-position: center;
  color: var(--color-text-inverse);
  overflow: hidden;
  isolation: isolate;
}

/* オーバーレイ（2026-08-04: PC/SPとも全カード一律30%） */
.svc-photo-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 0.3);
  z-index: -1;
}

.svc-photo-card__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.svc-photo-card__en {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-display-s); /* 36 */
  line-height: 1.25;
}

.svc-photo-card__jp {
  font-size: var(--text-body-s);
  font-weight: 700; /* Figma: Noto Sans JP Bold */
}

.svc-photo-card__foot {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.svc-photo-card__desc {
  font-size: var(--text-body-s);
  font-weight: 700; /* Figma: Noto Sans JP Bold */
  line-height: 1.7;
}

.svc-photo-card__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start; /* 親がcolumn flexなので、ラベル版が横に伸びないように */
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  font-size: 14px;
  font-weight: 500;
}

/* 2026-08-06: WP Opsカードのみ外部リンク（WPセンター）なので矢印→外部リンクアイコン */
.svc-photo-card__arrow--ext svg {
  width: 18px;
  height: 18px;
}

/* 2026-08-06: 矢印（→）→「View Cases」ラベルのピルに変更（Figma 15:14 = w87×h40） */
.svc-photo-card__arrow--label {
  width: auto;
  padding-inline: var(--space-md); /* 12 */
  font-size: var(--text-button); /* 12.5 */
  white-space: nowrap;
}

/* =========================================================
   TOP: Cases セクション見出し行
   ========================================================= */
.top-cases__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2xl);
}

/* =========================================================
   Services ページ（4行・交互レイアウト）
   ========================================================= */
.service-list .svc-row {
  display: flex;
  align-items: center;
  gap: var(--space-6xl);
  padding: 40px;
  margin-bottom: var(--space-lg);
  background: var(--color-bg-surface);
  border-radius: var(--radius-xl);
  scroll-margin-top: 100px; /* アンカー遷移時にヘッダーへ隠れない */
}

/* 2026-08-06: row-reverse だけだと余りスペースが左側に寄り、WP Ops / Branding の
   本文だけ左端が約200pxまで押し出されていた（Figma 52:106 / 52:124 は copy x=40）。
   row-reverse の main-end は「左」なので justify-content: flex-end で左詰めにし、
   4枚すべてカード左端から40pxで揃える（余りは右側に出る＝Figmaと同じ） */
.svc-row--reverse {
  flex-direction: row-reverse;
  justify-content: flex-end;
}

.svc-row__visual {
  width: 480px;
  aspect-ratio: 480 / 300;
  object-fit: cover;
  border-radius: var(--radius-lg);
  flex: none;
}

.svc-row__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-lg);
  max-width: 560px;
}

.svc-row__num {
  color: var(--color-text-tertiary);
}

.svc-row__jp {
  color: var(--color-text-secondary);
}

.svc-row__desc {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
}

/* =========================================================
   Cases 一覧（フィルタ・グリッド・ページネーション）
   ========================================================= */
.cases-filter {
  padding-block: var(--space-sm) 0;
}

.cases-filter__row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.chip--active {
  border-color: var(--color-text-primary);
  color: var(--color-text-primary);
}

.cases-grid {
  display: grid;
  gap: var(--space-lg);
}

.cases-grid--three {
  grid-template-columns: repeat(3, 1fr);
}

/* WPページネーション（.page-numbers） */
.pagination {
  margin-top: var(--space-4xl);
}

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

.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  font-size: var(--text-body);
}

.pagination .page-numbers.current {
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
}

/* =========================================================
   事例詳細
   ========================================================= */
.page-title--case .chip {
  margin-bottom: var(--space-lg);
}

.case-title {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-text-primary);
}

.case-client {
  margin-top: var(--space-lg);
}

/* =========================================================
   メディアフレーム（アイキャッチ／事例サブ画像）
   2026-08-06: アップ画像を切らずに全体を表示し、余った領域は
   同じ画像をぼかしたもので埋める（縦長なら左右、横長なら上下がぼかしになる）。
   背景は標準の medium サイズを使うため、既存画像でも再生成なしで機能する。
   フレームの縦横比は用途別クラス側で指定する。
   ========================================================= */
.media-frame {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-gray-100);
}

.media-frame__backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(24px);
  transform: scale(1.2); /* ぼかしで端が透けるのを防ぐため少し拡大 */
  pointer-events: none;
}

/* 画像は縦横どちらも切らない。フレームに収まる最大サイズで中央に置き、
   余った領域（横でも縦でも）は背景のぼかしが埋める。
   2026-08-06: 当初は height:100% 固定にしていたが、フレームより横長の画像で
   左右が見切れたため「収める」方式に変更した */
.media-frame__img {
  position: relative;
  z-index: 1;
  flex: none;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

.case-visual__frame {
  aspect-ratio: 1344 / 520;
}

.case-summary__card {
  padding: var(--space-lg) var(--space-5xl);
}

.case-body__card {
  padding: var(--space-5xl);
}

.case-block {
  margin-bottom: var(--space-2xl);
}

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

.case-block__body {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  max-width: 1100px;
}

/* ---- サブ画像スライダー（ドットのみ・最大10枚） ---- */
.case-slider {
  margin-top: var(--space-3xl);
}

/* 矢印ボタンの基準（ドットを含めない＝画像の縦中央に置くため、トラックだけを包む） */
.case-slider__viewport {
  position: relative;
}

.case-slider__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: var(--space-lg);
  scrollbar-width: none; /* Firefox */
  border-radius: var(--radius-lg);
}

.case-slider__track::-webkit-scrollbar {
  display: none;
}

.case-slider__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
}

/* 2026-08-06: 1120/380（約2.95:1）は縦横比が特殊だったため16:9へ変更。
   画像自体は .media-frame により縦100%表示（余りはぼかし） */
.case-slider__frame {
  aspect-ratio: 16 / 9;
}

/* 2026-08-06: 画像左右の矢印ボタン（ユーザー要望で追加。Figmaはドットのみ＝差分あり）
   見た目はSPメニューの閉じるボタンと同じ「白い丸＋濃色アイコン」に揃える */
.case-slider__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.15);
  cursor: pointer;
  transition: opacity 0.2s;
}

.case-slider__nav svg {
  width: 20px;
  height: 20px;
}

.case-slider__nav--prev {
  left: var(--space-lg); /* 16 */
}

.case-slider__nav--next {
  right: var(--space-lg);
}

.case-slider__nav:hover {
  opacity: 0.85;
}

/* 端に到達したら押せないことが分かるように（JSが disabled を付与） */
.case-slider__nav:disabled {
  opacity: 0.35;
  cursor: default;
}

.case-slider__dots {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.case-slider__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--color-border-default);
  cursor: pointer;
}

.case-slider__dot.is-active {
  background: var(--color-accent-primary);
}

/* ---- サブ画像：Webサイト（縦長）パターン ----
   2026-08-14追加（ユーザー要望・Figma未反映＝コード先行）。
   Webサイトのキャプチャは縦長になるため、16:9スライダーだとぼかし背景に
   埋もれて中身が読めなかった。ここでは横幅を枠いっぱいに使い、はみ出す下側は
   ブラウザ枠の中でスクロールして見せる。複数枚は横送りではなく縦に並べる。
   ========================================================= */
.case-sites {
  display: flex;
  flex-direction: column;
  gap: var(--space-4xl); /* 48 — 枠どうしがくっついて見えないだけの間隔 */
  margin-top: var(--space-3xl);
}

.browser-frame {
  margin: 0;
}

/* 「ウィンドウ」に見える部分。ヒントの絶対配置の基準でもある
   （figcaptionを含めると位置がズレるので、キャプションはこの外に置く） */
.browser-frame__window {
  position: relative;
  overflow: hidden;
  /* ビューポートの上限高さを「枠の横幅 × 比率」で決めるための基準
     （cqw ＝ このコンテナの幅の1%）。aspect-ratio で固定すると、
     背の低い画像のときに下側が白く余ってしまうため使っていない */
  container-type: inline-size;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  background: var(--color-bg-surface);
  box-shadow: 0 2px 12px rgb(0 0 0 / 0.08);
}

/* アドレスバー（装飾。実際のブラウザUIではないので aria-hidden） */
.browser-frame__bar {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-gray-200);
  border-bottom: 1px solid var(--color-border-default);
}

.browser-frame__dots {
  display: flex;
  flex: none;
  gap: 6px;
}

.browser-frame__dots i {
  width: 9px;
  height: 9px;
  border-radius: var(--radius-full);
  background: var(--color-border-default);
}

.browser-frame__url {
  flex: 1;
  min-width: 0;
  padding: 3px var(--space-md);
  border-radius: var(--radius-full);
  background: var(--color-bg-surface);
  color: var(--color-text-tertiary);
  font-size: var(--text-tag);
  line-height: 1.6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* キャプチャの表示領域。画像は横100%・縦は原寸比のまま流し込み、
   はみ出した分はここでスクロールさせる（＝上下を切らずに全部見せられる） */
.browser-frame__viewport {
  /* 16:10 相当（幅の62.5%）を上限にする。画像がこれより短ければ枠も短くなり、
     長ければここで頭打ちになって続きは枠内スクロールになる */
  max-height: 62.5cqw;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  /* overscroll-behavior は既定（auto）のまま。枠の下端まで来たらそのまま
     ページ側のスクロールに continue させたいため（contain にするとSPで
     指が枠の上にあるあいだページが動かせず「詰まった」感じになる） */
  scrollbar-width: thin;
}

.browser-frame__viewport:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: -2px;
}

.browser-frame__img {
  display: block;
  width: 100%;
  height: auto;
}

/* スクロールの余地があるときだけ表示（JSが .is-scrollable / .is-bottom を付与）。
   JSが動かない環境では出ないだけで、スクロール自体は問題なくできる */
.browser-frame__hint {
  position: absolute;
  left: 50%;
  bottom: var(--space-md);
  transform: translateX(-50%);
  z-index: 1;
  padding: 4px var(--space-md);
  border-radius: var(--radius-full);
  background: rgb(38 38 38 / 0.72);
  color: var(--color-text-inverse);
  font-size: var(--text-tag);
  line-height: 1.6;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}

.browser-frame.is-scrollable .browser-frame__hint {
  opacity: 1;
}

.browser-frame.is-bottom .browser-frame__hint {
  opacity: 0;
}

.browser-frame__caption {
  margin-top: var(--space-md);
  text-align: center;
}

/* ---- サブ画像：PDFパターン ----
   2026-08-14追加（ユーザー要望・Figma未反映＝コード先行）。
   PDF 1本 = 1スライダー（ページ送り）、複数本は縦に並べる。
   ページはPDF.jsがcanvasに描画する（assets/js/case-pdf.js）。
   A4縦などページの比率がまちまちなので、幅ではなく**高さ**を決め打ちにして、
   ページはその中に収める（＝紙が机に置かれているような見え方にする）。
   ========================================================= */
.case-pdfs {
  display: flex;
  flex-direction: column;
  gap: var(--space-4xl);
  margin-top: var(--space-3xl);
}

.pdf-doc {
  margin: 0;
}

/* 矢印ボタンの基準。ページの外側は地色にして紙とのコントラストを付ける */
.pdf-doc__stage {
  position: relative;
  height: min(78vh, 860px);
  border-radius: var(--radius-lg);
  background: var(--color-gray-200);
  overflow: hidden;
}

.pdf-doc__track {
  display: flex;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; /* Firefox */
}

.pdf-doc__track::-webkit-scrollbar {
  display: none;
}

.pdf-doc__page {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: var(--space-xl);
  scroll-snap-align: start;
}

/* 実解像度はJSが決める。ここでは「ステージに収まる最大」に効かせるだけ */
.pdf-doc__canvas {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  background: var(--color-bg-surface);
  box-shadow: 0 2px 12px rgb(0 0 0 / 0.12);
}

.pdf-doc__track:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: -2px;
}

/* 読み込み中・失敗時の一行（JSが hidden を切り替える） */
.pdf-doc__status {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-size: var(--text-body-s);
  color: var(--color-text-secondary);
}

.pdf-doc__status[hidden] {
  display: none;
}

/* ページ番号「3 / 12」。ドットにしないのはページ数が2桁になるため */
.pdf-doc__counter {
  margin: var(--space-md) 0 0;
  text-align: center;
  font-size: var(--text-body-s);
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
}

.pdf-doc__caption {
  margin-top: var(--space-xs);
  text-align: center;
}

/* 矢印は事例スライダー（.case-slider__nav）と同じ見た目を流用している */

@media (prefers-reduced-motion: reduce) {
  .browser-frame__hint {
    transition: none;
  }
}

.other-cases .section-head {
  margin-bottom: var(--space-2xl);
}

/* =========================================================
   About
   ========================================================= */
/* 2026-08-06: 2カラム（.about-cols__grid）を廃止し、Figma 174:1445 と同じ
   「全幅カードの縦積み」に変更。代表者／会社概要／主な取引先の3カードが
   すべて .container 基準で左右に揃う */
.about-members .section-head,
.about-profile .section-head,
.about-clients .section-head {
  margin-bottom: var(--space-2xl);
}

/* 2026-08-17: メンバーは人数分のカードが縦に積まれる（CPT member）。
   カード間はカード内パディング(24)より広げて、1人ぶんの区切りが分かるようにする */
.members-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl); /* 24 */
}

/* メンバーカード（Figma messageCard 50:24）: 写真を左、コピーを右に縦中央揃え */
.message-card {
  display: flex;
  align-items: center;
  gap: var(--space-4xl); /* 48 */
  padding: var(--space-xl); /* 24 */
}

/* 顔写真が未設定のときは写真の枠を出さず、テキストを全幅で使う */
.message-card--no-photo .message-card__copy {
  max-width: none;
}

/* 2026-08-06: プレースホルダー → 実写真（assets/img/director.jpg）。
   Figma photo 50:25 / SP 66:720 とも scaleMode=FILL・変形なし＝ object-fit: cover 相当 */
.message-card__photo {
  display: block;
  flex: none;
  width: 301px;
  aspect-ratio: 301 / 237; /* Figma photo 50:25 */
  border-radius: var(--radius-lg);
  background: var(--color-border-default); /* 読み込み前のプレースホルダー */
  object-fit: cover;
  object-position: center;
}

.message-card__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg); /* 16 */
  flex: 1;
  max-width: 720px; /* 可読性のための最大行長（Figma copy 50:26 と同値） */
}

/* 2026-08-17: 役職を氏名と別フィールドにしたので、1行の中で並べる。
   見た目は従来の「代表取締役　井上 雅尭」と同じ（役職だけ少し小さく・弱く） */
.message-card__name {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.25em 1em;
}

.message-card__role {
  font-size: var(--text-label-s); /* 12 */
  font-weight: 500;
  color: var(--color-text-secondary);
}

.profile-card {
  padding: var(--space-xl) var(--space-5xl);
}

.clients-card {
  padding: 40px;
}

.clients-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
}

/* 2026-08-17: タイルの地色をグレー（gray/100）から白に変更。
   ロゴ画像には「背景が透過のPNG」と「白地が焼き込まれたJPG」が混在しており、
   グレー地だと後者だけ白い四角が浮いて見え、並びの印象が揃わなかったため。
   カード（.surface-card）と同じ白にすることで、どちらの入稿形式でも同じ見え方になる。 */
.client-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 88px;
  padding: var(--space-lg); /* ロゴがタイル端に触れないように */
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
  overflow: hidden;
}

/* 2026-08-06: 管理画面から登録したロゴ。縦横比を保ったままタイル内に収める */
.client-logo__img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* =========================================================
   Contact フォーム（CF7）＋ エラー表示（10b準拠）
   ========================================================= */
/* 2026-08-06: 幅の持たせ方をFigmaに合わせて修正。
   Figma `Form` 57:593 は全幅・counterAxisAlignItems=CENTER、`formCard` 57:594 は
   幅HUG=912px（中身800 ＋ padding 56×2）。つまり「カード自体が912pxで中央」が正。
   従来は カード＝コンテナ全幅（1440pxで1344／1920pxで1824）のまま中身だけ800pxで
   左に寄っていたため、ワイドモニターで右側が大きく空いていた。
   → カードに max-width 912＋中央寄せを持たせ、中身側の800px上限は撤去する */
.form-card {
  max-width: 912px;
  margin-inline: auto;
  padding: var(--space-5xl); /* 56 */
}

.form-card__lead {
  font-size: var(--text-body);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2xl);
}

.form-field {
  margin-bottom: var(--space-2xl);
}

.form-label {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-label-s);
  font-weight: 500;
  color: var(--color-text-primary);
  margin-bottom: var(--space-sm);
}

/* CF7は入力欄を span.wpcf7-form-control-wrap で包む（inline要素）ため
   ブロック化しないと width:100% が効かない */
.form-card .wpcf7-form-control-wrap {
  display: block;
}

/* CF7デフォルト構造（フォーム全体が1つの<p>＋<br>区切り）で貼られた場合の保険。
   雛形（assets/cf7-contact-form.html）を使えば .form-field が付き、この指定は不要 */
.form-card .wpcf7-form > p {
  font-size: var(--text-label-s);
  font-weight: 500;
  line-height: 2.2;
  color: var(--color-text-primary);
}

.form-card .wpcf7-form > p .wpcf7-form-control-wrap {
  margin: var(--space-sm) 0 var(--space-xl);
}

/* 必須バッジ（Figma: req — radius5・padding 2/8・bg inverse・Tag 10.5） */
.form-label .req {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-sm);
  border-radius: var(--radius-sm); /* 5 */
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
  font-size: var(--text-tag); /* 10.5 */
  font-weight: 500;
  line-height: 1.4;
}

/* 入力欄（Figma: input — h48・radius5・bg gray/100・border default 1px・padding 14/16・text 12） */
.form-card input[type="text"],
.form-card input[type="email"],
.form-card input[type="tel"],
.form-card textarea {
  width: 100%;
  padding: 13px var(--space-lg); /* 上下13＋line-height20＋border2 = 48 */
  background: var(--color-gray-100);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm); /* 5 */
  font-size: var(--text-body-s); /* 12 */
  line-height: 20px;
  color: var(--color-text-primary);
}

.form-card input::placeholder,
.form-card textarea::placeholder {
  color: var(--color-text-tertiary);
}

.form-card textarea {
  min-height: 160px;
  resize: vertical;
}

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

/* ---- ラジオ（お問い合わせ種別）: CF7は .wpcf7-radio > .wpcf7-list-item > label ---- */
.form-card .wpcf7-radio {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg) var(--space-xl);
  margin-top: var(--space-xs);
}

.form-card .wpcf7-list-item {
  margin: 0; /* CF7デフォルトの margin-left:1em を打ち消す */
}

.form-card .wpcf7-list-item label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-body-s); /* 12（Figma: 選択肢ラベル） */
  font-weight: 400;
  color: var(--color-text-secondary);
  cursor: pointer;
}

.form-card .wpcf7-list-item-label {
  line-height: 1;
}

.form-card input[type="radio"],
.form-card input[type="checkbox"] {
  accent-color: var(--color-text-primary);
  width: 16px;
  height: 16px;
  margin: 0;
  flex: none;
}

/* ---- 同意チェック（Figma: agree — gap8・Body-S） ---- */
.form-agree {
  margin: var(--space-2xl) 0;
}

.form-card .wpcf7-acceptance .wpcf7-list-item label {
  font-size: var(--text-body-s); /* 12 */
  color: var(--color-text-primary);
}

/* ---- 送信ボタン（Figma: Button Dark/L — h55・radius full・padding 16/32・Label-L 15） ----
   .form-submit ラッパーの有無に関わらず当たるよう .wpcf7-submit にも直接指定
   （CF7デフォルト構造で貼られた場合の保険） */
/* Figma sendWrap 57:651 は幅FILL＋中央揃え（＝カード内容幅いっぱいの中で中央） */
.form-submit {
  display: flex;
  justify-content: center;
  margin-top: var(--space-3xl);
}

.form-card .wpcf7-submit,
.form-submit input[type="submit"] {
  display: block;
  margin: var(--space-3xl) auto 0; /* ラッパーが無くても中央寄せ */
  padding: var(--space-lg) var(--space-3xl); /* 16 / 32 */
  width: auto;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
  font-family: var(--font-body);
  font-size: var(--text-label-l); /* 15 */
  font-weight: 500;
  line-height: 23px;
  text-align: center;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* .form-submit で囲まれている場合は二重マージンを避ける */
.form-submit input[type="submit"] {
  margin-top: 0;
}

.form-card .wpcf7-submit:hover {
  opacity: 0.85;
}

/* 送信処理中（CF7がdisabledを付与）は押せないことを見た目でも示す */
.form-card .wpcf7-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* CF7の送信中スピナー位置 */
.form-card .wpcf7-spinner {
  margin: 0 0 0 var(--space-md);
}

/* ---- CF7 エラー表示（10b_Contact_Error_Design 186:1650 準拠） ---- */
.form-card .wpcf7-not-valid {
  border: 1.5px solid var(--color-feedback-error);
}

/* ラジオ（お問い合わせ種別）は選択肢の並び全体を赤枠で囲むため、余白と角丸を足す */
.form-card .wpcf7-radio.wpcf7-not-valid {
  padding: var(--space-md);
  border-radius: var(--radius-md);
}

.form-card .wpcf7-not-valid-tip {
  display: block;
  margin-top: var(--space-sm);
  font-size: var(--text-body-s);
  color: var(--color-feedback-error);
}

.form-card .wpcf7 form .wpcf7-response-output {
  margin: var(--space-2xl) 0 0;
  padding: var(--space-lg) var(--space-xl);
  border: 1px solid var(--color-feedback-error);
  border-radius: var(--radius-md);
  color: var(--color-feedback-error);
  font-size: var(--text-body);
  text-align: center;
}

.form-card .wpcf7 form.sent .wpcf7-response-output {
  border-color: var(--color-accent-primary);
  color: var(--color-text-primary);
}

/* =========================================================
   送信完了（10c_Contact_Thanks_Design 186:1719）
   ========================================================= */
.thanks-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3xl);
  padding: 96px var(--space-5xl);
  text-align: center;
}

.thanks-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  background: var(--color-accent-primary);
  color: var(--color-text-inverse);
}

.thanks-card__icon svg {
  width: 28px;
  height: 28px;
}

.thanks-card__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

.thanks-card__body {
  font-size: var(--text-body);
}

/* =========================================================
   プライバシーポリシー／汎用ページ本文
   ========================================================= */
.policy-card {
  padding: var(--space-5xl);
}

.policy-content > p {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  max-width: 1100px;
}

.policy-content h2 {
  font-size: var(--text-jp-heading);
  font-weight: 700;
  color: var(--color-text-primary);
  margin: var(--space-3xl) 0 var(--space-md);
}

.policy-content__date {
  margin-top: var(--space-4xl);
}

.search-results__item {
  padding-block: var(--space-md);
  border-bottom: 1px solid var(--color-border-default);
}

/* =========================================================
   404（12_404_Design 95:1267）
   ========================================================= */
.not-found {
  padding: 120px 0;
}

.not-found__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xl);
  text-align: center;
}

.not-found__code {
  color: var(--color-text-primary);
}

.not-found__title {
  color: var(--color-text-primary);
}

/* =========================================================
   レスポンシブ（〜1023px: タブレット調整）
   ========================================================= */
@media (max-width: 1023px) {
  .top-services__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cases-grid--three {
    grid-template-columns: repeat(2, 1fr);
  }

  /* 代表者カード: 写真とコピーを縦積みに（横並びだとコピーが狭くなりすぎるため） */
  .message-card {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xl);
  }

  .message-card__photo {
    width: 100%;
    max-width: 420px;
  }

  .message-card__copy {
    max-width: none;
  }

  .svc-row,
  .svc-row--reverse {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start; /* 縦積み時はPC用のflex-endを打ち消す */
    gap: var(--space-xl);
  }

  .svc-row__visual {
    width: 100%;
  }
}

/* =========================================================
   レスポンシブ（〜767px: SP各デザイン準拠）
   ========================================================= */
@media (max-width: 767px) {
  .page-title {
    padding: var(--space-3xl) 0 var(--space-sm);
  }

  .page-title__en {
    font-size: var(--text-display-l); /* SPも64ベース（SP実デザイン準拠） */
  }

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

  /* TOP: 緑の曲線背景（Figma SP: Subtract 219:1850 — PCより浅いカーブの専用形状） */
  .top-curve {
    top: 240px; /* Figma SP: y=304（Hero上端64からの相対＝240） */
    height: 1665px;
    background:
      url("../img/sp-curve-top.svg") top center / 100% 49px no-repeat,
      url("../img/sp-curve-bottom.svg") bottom center / 100% 47px no-repeat,
      linear-gradient(var(--color-accent-primary), var(--color-accent-primary))
        center 49px / 100% calc(100% - 96px) no-repeat;
  }

  /* ドリフト有効時：SPも上端カーブだけ背景から外す（形状はJS側のSP定義に切替）。
     ベタ塗りの開始位置は 49px → 62px（最下点は最大 48.95+7.2=56.2px、
     SVGは 49+foot(18)=67px まで描くので5px重ねる）。
     109px = 62px（上）＋47px（下カーブ）。 */
  .top-curve.is-drift {
    background:
      url("../img/sp-curve-bottom.svg") bottom center / 100% 47px no-repeat,
      linear-gradient(var(--color-accent-primary), var(--color-accent-primary))
        center 62px / 100% calc(100% - 109px) no-repeat;
  }


  /* TOP: SPのセクション余白（Figma: 上40 / 下8） */
  .front-page .top-wpcenter,
  .front-page .top-services,
  .front-page .top-news,
  .front-page .top-cases {
    padding: 40px 0 var(--space-sm);
  }

  /* リード文はSPで14px（Figma SP_01_TOP準拠） */
  .section-lead {
    margin-top: var(--space-lg); /* 16 */
    font-size: var(--text-body); /* 14 */
  }

  .section-lead + .top-services__grid,
  .section-lead + .cases-grid {
    margin-top: var(--space-lg); /* 16 */
  }

  .solution-row {
    gap: var(--space-md);
    padding: var(--space-xl);
  }

  .solution-row__desc {
    font-size: var(--text-caption);
  }

  .top-services__grid {
    grid-template-columns: 1fr;
  }

  .svc-photo-card {
    min-height: 300px;
  }

  /* Cases */
  .cases-grid--three {
    grid-template-columns: 1fr;
  }

  /* 事例詳細 */
  .case-title {
    font-size: 22px;
  }

  .case-visual__frame {
    aspect-ratio: 343 / 220;
  }

  .case-summary__card {
    padding: var(--space-sm) var(--space-xl);
  }

  .case-body__card {
    padding: var(--space-xl);
  }

  /* 2026-08-06: SPも16:9に統一（PCと見え方がズレないように） */
  .case-slider__frame {
    aspect-ratio: 16 / 9;
  }

  .case-slider__dot {
    width: 6px;
    height: 6px;
  }

  /* SPは画像が小さいので矢印も縮小し、画像端に寄せる */
  .case-slider__nav {
    width: 32px;
    height: 32px;
  }

  .case-slider__nav svg {
    width: 16px;
    height: 16px;
  }

  .case-slider__nav--prev {
    left: var(--space-sm); /* 8 */
  }

  .case-slider__nav--next {
    right: var(--space-sm);
  }

  /* 2026-08-14: Webサイトパターン（ブラウザ枠）のSP調整。
     画面が狭いぶん枠を縦長（4:3）にして、一度に見える範囲を稼ぐ */
  .case-sites {
    gap: var(--space-3xl);
  }

  /* SPは4:3相当（幅の75%）まで許して、一度に見える範囲を稼ぐ */
  .browser-frame__viewport {
    max-height: 75cqw;
  }

  .browser-frame__bar {
    gap: var(--space-sm);
    padding: 6px var(--space-sm);
  }

  .browser-frame__dots i {
    width: 7px;
    height: 7px;
  }

  /* SPは枠が小さいので、ヒントがキャプチャを覆いすぎないよう控えめに */
  .browser-frame__hint {
    bottom: var(--space-sm);
    padding: 3px var(--space-sm);
  }

  /* 2026-08-14: PDFパターンのSP調整。ステージを低くして、ページの左右余白も詰める */
  .case-pdfs {
    gap: var(--space-3xl);
  }

  .pdf-doc__stage {
    height: min(64vh, 520px);
  }

  .pdf-doc__page {
    padding: var(--space-md) var(--space-3xl); /* 矢印とページが重ならない幅を確保 */
  }

  /* About */
  /* 代表者カード SP（Figma SP_02_About messageCard 66:719）: 写真は全幅・やや縦長 */
  .message-card {
    gap: var(--space-lg);
  }

  .message-card__photo {
    max-width: none;
    aspect-ratio: 303 / 320;
  }

  .profile-card {
    padding: var(--space-sm) var(--space-xl);
  }

  .clients-card {
    padding: var(--space-xl);
  }

  .clients-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Contact */
  .form-card {
    padding: var(--space-xl) var(--space-xl) var(--space-3xl);
  }

  .form-field--radio .wpcf7-radio {
    flex-direction: column;
    gap: var(--space-md);
  }

  /* Thanks */
  .thanks-card {
    padding: var(--space-6xl) var(--space-xl);
    gap: var(--space-xl);
  }

  .thanks-card__icon {
    width: 56px;
    height: 56px;
  }

  .thanks-card__en {
    font-size: var(--text-display-m);
  }

  /* Privacy / 汎用 */
  .policy-card {
    padding: var(--space-xl);
  }

  /* 404 */
  .not-found {
    padding: var(--space-6xl) 0;
  }

  .not-found__code {
    font-size: 64px;
  }
}

/* =========================================================
   News（お知らせ）— 2026-08-14追加
   Figmaにデザインが無いため、既存の白カード＋TableRowの
   罫線ルール（行間のみ・最終行は無し）に合わせて組んでいる。
   使用箇所: TOPの最新3件 / /news/ 一覧 / お知らせ詳細
   ========================================================= */

/* TOP: 見出し行（SectionHead ＋ View All）。事例セクションと同じ組み方 */
.top-news__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2xl);
}

/* 白カードの中に「日付＋タイトル」の行を積む。

   2026-08-17: カード（.news-list = .surface-card）側のパディングを全て 0 にし、
   余白は行（.news-row）側に持たせた。
   こうしないと行がカードより一回り小さくなり、ホバーの影が
   「カードの中に浮いた別の四角」に見えてしまう（左右56px・上下8pxぶん内側だった）。
   行がカードとぴったり重なるので、影もカードの形をそのままなぞる。 */
.news-list {
  padding: 0;
}

.news-row {
  position: relative; /* 罫線の擬似要素の基準 */
  display: grid;
  grid-template-columns: auto 1fr auto; /* 日付 / タイトル / 矢印 */
  align-items: baseline;
  gap: var(--space-3xl);
  padding: var(--space-xl) var(--space-5xl);
  color: var(--color-text-primary);
}

/* 上下端の行は、カードから外した8pxぶんを足して従来の見た目の間隔を保つ */
.news-row:first-child {
  padding-top: calc(var(--space-xl) + var(--space-sm));
}

.news-row:last-child {
  padding-bottom: calc(var(--space-xl) + var(--space-sm));
}

/* 角丸もカードに合わせる（影がカードの角からはみ出さないように）。
   1件だけのときは first と last の両方が効いて四隅とも丸くなる */
.news-row:first-child {
  border-top-left-radius: var(--radius-xl);
  border-top-right-radius: var(--radius-xl);
}

.news-row:last-child {
  border-bottom-left-radius: var(--radius-xl);
  border-bottom-right-radius: var(--radius-xl);
}

/* 罫線は行間のみ（.table-row と同じ考え方）。
   行そのものは全幅にしたいので、罫線だけ左右56px内側に引く
   （border-bottom だと全幅になり、これまでの見た目と変わってしまう） */
.news-row::after {
  content: "";
  position: absolute;
  right: var(--space-5xl);
  bottom: 0;
  left: var(--space-5xl);
  border-bottom: 1px solid var(--color-border-default);
}

.news-row:last-child::after {
  content: none;
}

.news-row__date {
  font-family: var(--font-display); /* 数字はLoraで事例の日付表記と揃える */
  font-size: var(--text-label-l);   /* 15 */
  line-height: 1.5;
  color: var(--color-text-secondary);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.news-row__title {
  font-size: var(--text-body);
  font-weight: 500;
  line-height: 1.7;
}

.news-row__arrow {
  align-self: center;
  font-size: var(--text-body);
  color: var(--color-text-secondary);
}

/* =========================================================
   お知らせ詳細
   ========================================================= */
.news-detail__date {
  display: block;
  margin-bottom: var(--space-sm);
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
}

.news-detail__title {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.5;
  margin: 0;
}

.news-detail__card {
  padding: var(--space-5xl);
}

/* アイキャッチ（2026-09-28追加）
   事例詳細と同じ .case-visual / .case-visual__frame を共用している（single-news.php）。
   お知らせ固有の調整が必要になったら .news-visual / .news-visual__frame に書く。 */

.news-detail__back {
  padding-bottom: var(--space-3xl);
}

/* 一覧のページネーションと詳細の「戻る」ボタンの位置を揃える */
.news-detail__back .btn {
  margin-inline: auto;
  display: inline-flex;
}

.news-detail__back .container {
  text-align: center;
}

/* 他のお知らせ */
.other-news .section-head {
  margin-bottom: var(--space-2xl);
}

/* =========================================================
   本文（クラシックエディタが出力するHTML）
   .policy-content と同じ方針。ここだけはエディタ任せのタグに
   直接スタイルを当てる必要があるため、要素セレクタを使う。
   ========================================================= */
.news-content > p {
  font-size: var(--text-body);
  line-height: 1.8;
  color: var(--color-text-secondary);
  margin-block: 0 var(--space-xl);
}

.news-content > p:last-child {
  margin-bottom: 0;
}

.news-content h2 {
  font-size: var(--text-jp-heading);
  font-weight: 700;
  line-height: 1.6;
  color: var(--color-text-primary);
  margin: var(--space-4xl) 0 var(--space-md);
}

.news-content h3 {
  font-size: var(--text-label-l);
  font-weight: 700;
  line-height: 1.6;
  color: var(--color-text-primary);
  margin: var(--space-3xl) 0 var(--space-sm);
}

.news-content > *:first-child {
  margin-top: 0;
}

.news-content ul,
.news-content ol {
  margin: 0 0 var(--space-xl);
  padding-left: 1.5em;
  font-size: var(--text-body);
  line-height: 1.8;
  color: var(--color-text-secondary);
}

.news-content ul { list-style: disc; }
.news-content ol { list-style: decimal; }

.news-content li::marker {
  color: var(--color-text-tertiary);
}

.news-content a {
  color: var(--color-text-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  overflow-wrap: anywhere;
}

.news-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

.news-content figure {
  margin: 0 0 var(--space-xl);
}

.news-content figcaption {
  margin-top: var(--space-sm);
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
}

.news-content blockquote {
  margin: 0 0 var(--space-xl);
  padding: var(--space-lg) var(--space-xl);
  border-left: 3px solid var(--color-accent-primary);
  background: var(--color-gray-100);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
}

.news-content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-xl);
  font-size: var(--text-body-s);
}

.news-content th,
.news-content td {
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--color-border-default);
  text-align: left;
  vertical-align: top;
}

.news-content th {
  background: var(--color-gray-100);
  font-weight: 700;
}

.news-content hr {
  margin: var(--space-4xl) 0;
  border: 0;
  border-top: 1px solid var(--color-border-default);
}

.news-content__pages {
  margin-top: var(--space-3xl);
  display: flex;
  gap: var(--space-md);
  font-size: var(--text-body-s);
}

/* ---- SP（〜767px） ---- */
@media (max-width: 767px) {
  /* 2026-08-14: SPは縦積み・左寄せにしていたが「View Allは右寄せ」の指示により
     事例セクション（.top-cases__head）と同じ「見出し左／ボタン右」の1行に戻した。
     見出しが折り返しても最下行のベースラインでボタンと揃うよう align-items は flex-end。 */
  .top-news__head {
    align-items: flex-end;
    gap: var(--space-md);
  }

  /* PC同様、余白は行側に持たせる（ホバー範囲をカード全体にするため） */
  .news-list {
    padding: 0;
  }

  /* 日付とタイトルを縦積みにして、狭い幅でもタイトルを折り返しやすくする */
  .news-row {
    grid-template-columns: 1fr auto;
    gap: var(--space-xs) var(--space-lg);
    padding: var(--space-lg) var(--space-xl);
  }

  .news-row:first-child {
    padding-top: calc(var(--space-lg) + var(--space-xs));
  }

  .news-row:last-child {
    padding-bottom: calc(var(--space-lg) + var(--space-xs));
  }

  .news-row::after {
    right: var(--space-xl);
    left: var(--space-xl);
  }

  .news-row__date {
    grid-column: 1 / -1;
    font-size: var(--text-body-s);
  }

  .news-detail__title {
    font-size: 22px; /* 2026-09-28: 28→22。事例詳細の .case-title（SP）に揃える */
  }

  .news-detail__card {
    padding: var(--space-xl);
  }
}