/* ============================================================
   新トップ（front-page.php）専用 CSS

   modely-renewal リポジトリ public/css/style.css（public4−5 完成版）の移植。
   値の出典は同リポジトリ docs/design-tokens.md。
   全ページ共通の main.css の後に、トップページでだけ読む（inc/enqueue.php）。

   持ち込みの方針:
     - :root の変数は tokens.css に移した。値が既存と食い違う3つだけ .nt の中で上書き
     - リセット・ベースは .nt（<main>）の中だけに効かせる。
       共通ヘッダー（A案）と共通フッター（ご相談・お見積り）には触れない
     - モックのヘッダー・Contact・フッターのルールは持ち込まない（共通部品を使うため）
   ============================================================ */

.nt {
  --container-padding: 42px;
  --content-width: 1240px;
  --color-core-green: #17a673;
}

/* ===== リセット・ベース ===== */
.nt :where(*) {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html:has(.nt) {
  scroll-behavior: smooth;
  scroll-padding-top: var(--space-10);   /* sticky ヘッダー分。アンカー着地が隠れないように */
}
.nt {
  font-family: var(--font-base);
  font-size: var(--fs-16);
  line-height: var(--lh-base);
  color: var(--color-base-p-black);
  background: var(--color-base-white);
  /* 日本語を文節単位で折り返す。「はじ|めて」のような語中での改行を防ぐ。
     <html lang="ja"> が前提。未対応ブラウザは従来どおり文字単位で折り返すだけ */
  word-break: auto-phrase;
}
.nt :where(img, video) {
  max-width: 100%;
  height: auto;
  display: block;
}
.nt :where(a) {
  text-decoration: none;
  color: inherit;
}
.nt :where(ul) {
  list-style: none;
}
/* 見出しは family / weight / lh / color をここで一括。各所では font-size だけ指定する */
.nt :where(h1, h2, h3, h4) {
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  line-height: var(--lh-tight);
  color: var(--color-base-black);
}
.inner {
  width: min(var(--content-width), 100%);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}
/* セクションは上下対称に空ける。片側だけにすると地色帯（.works / .contact）との
   境界で末尾要素が次の帯に密着して破綻する（2026-08-19 指摘）。 */
.nt :where(section) {
  padding: var(--sec-pad-y) 0;
}
/* セクション見出しは左寄せ（本番 .section-header 準拠） */
.sec-title {
  font-size: var(--fs-40);
  text-align: center;
}
.sec-title em {
  font-style: normal;
  color: var(--color-core-light-blue);
}
.sec-lead {
  margin-top: var(--sec-lead-gap);
  font-size: var(--fs-16);
  line-height: var(--lh-base);
  color: var(--color-base-p-black);
  text-align: center;
  font-weight: var(--fw-bold);
}
/* 制作(c)=Blue / 開発(d)=Green の色分け。以降のセクションでも同じ 2 系統で統一する */
.sec-lead b.c {
  color: var(--color-core-blue);
  font-weight: var(--fw-bold);
}
.sec-lead b.d {
  color: var(--color-core-deep-green);
  font-weight: var(--fw-bold);
}

/* ===== ボタン共通（本番 .ui-button-main 準拠: radius 4px・弱いシャドウ・.2s） ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-s);
  font-weight: var(--fw-bold);
  font-size: var(--fs-14);
  line-height: var(--lh-tight);
  padding: var(--space-2) var(--space-3);
  white-space: nowrap;
  flex: 0 0 auto;
  transition: var(--transition-btn);
}
/* base.css の a:hover { opacity: .8 } を打ち消す。ボタンのホバーは地色・文字色・影だけで反応させる
   （本番 .ui-button-main と同じ。透けると地色の変化と重なって薄く見える） */
.btn:hover {
  opacity: 1;
}
.btn.primary {
  background: var(--color-core-blue);
  color: var(--color-base-white);
  box-shadow: var(--shadow-btn);
}
.btn.primary:hover {
  background: var(--color-core-light-blue);
  box-shadow: var(--shadow-btn-hover);
}
.btn.outline {
  background: var(--color-base-white);
  border: 1px solid var(--color-base-thin-black);
  color: var(--color-core-blue);
  box-shadow: var(--shadow-btn);
}
.btn.outline:hover {
  color: var(--color-core-light-blue);
  box-shadow: var(--shadow-btn-hover);
}
.btn.ghost {
  border: 1px solid var(--color-base-white);
  color: var(--color-base-white);
  background: transparent;
}
.btn.ghost:hover {
  background: rgba(255, 255, 255, .12);
}

/* ===== ファーストビュー =====
   左半分ブラー・横方向ネイビーグラデ・背景動画の比率は 2026-08-17 に
   「意図通り」と回答済みでトンマナ適用の対象外（docs §5-5）。
   ここで揃えるのはタイポグラフィと余白だけ。 */
.hero {
  position: relative;
  padding: 0;
  color: var(--color-base-white);
  overflow: hidden;
  background: var(--color-base-black);
}
/* 背景動画。読み込み中は静止画（hero-bg.jpg）がフォールバックで見える */
.hero-bg {
  position: absolute;
  inset: 0;
  background: url('../images/renewal/hero-bg.jpg') center / cover no-repeat;
}
.hero-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 左半分だけ映像をぼかす。グラデマスクで右に向かってブラーをフェードアウト */
.hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);   /* Safari */
  mask-image: linear-gradient(90deg, #000 0%, #000 20%, transparent 45%);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 20%, transparent 45%);
}
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;   /* videoの上にグラデを重ねる */
  /* 旧静止画に焼き込まれていたグラデの再現。暗めのネイビーブルーを左から右へ */
  background: linear-gradient(90deg, rgba(10,18,50,.82) 0%, rgba(10,18,50,.58) 50%, rgba(12,22,60,.34) 100%);
}
.hero .inner {
  position: relative;
  z-index: 1;
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
}
/* KV の3要素は本番と同じく詰め組み（font-feature-settings: palt） */
.hero .eyebrow,
.hero h1,
.hero .lead {
  font-feature-settings: "palt";
}
.hero .eyebrow {
  color: var(--color-core-light-green);
  font-weight: var(--fw-bold);
  font-size: var(--fs-18);
}
.hero h1 {
  margin-top: var(--space-2);
  font-size: var(--fs-48);
  color: var(--color-base-white);
}
.hero .lead {
  margin-top: var(--space-4);
  max-width: 620px;
  font-size: var(--fs-18);
  line-height: var(--lh-base);
  color: var(--color-base-gray2);
}
.hero .stats {
  margin-top: var(--space-6);
  display: flex;
  gap: 0;
}
.hero .stat {
  padding: 0 var(--space-4);
  border-left: 1px solid rgba(255, 255, 255, .35);
}
.hero .stat:first-child {
  padding-left: 0;
  border-left: none;
}
.hero .stat .lb {
  font-weight: var(--fw-bold);
  font-size: var(--fs-14);
}
.hero .stat .num {
  font-size: var(--fs-40);
  font-weight: var(--fw-heading);
  line-height: var(--lh-tight);
}
.hero .stat .num small {
  font-size: var(--fs-14);
  font-weight: var(--fw-bold);
  margin-left: 4px;
}
.hero .asof {
  margin-top: var(--space-1);
  font-size: var(--fs-12);
  color: var(--color-base-gray3);
}
.hero .ctas {
  margin-top: var(--space-4);
  display: flex;
  gap: var(--space-3);
}
.hero .ctas .btn {
  font-size: var(--fs-16);
  padding: var(--space-2) 42px;
}

/* ===== 実績サマリー（クライアントロゴ） ===== */
.clients h2 {
  font-size: var(--fs-40);
  text-align: center;
}
.clients h2 .big {
  font-size: var(--fs-48);
}
.clients h2 em {
  font-style: normal;
  color: var(--color-core-light-blue);
}
.clients .wall {
  margin-top: var(--sec-body-gap);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-3) var(--space-4);
  align-items: center;
}
.clients .wall img {
  width: 100%;
  height: auto;
}

/* ===== 制作サービス ===== */
.service {
  background: var(--color-base-white);
}
.sv-block {
  margin-top: var(--sec-body-gap);
  border-radius: var(--radius-l);
  background: var(--color-base-gray1);   /* 大面積は白か薄いグレー（Figma node 3:812） */
  padding: var(--block-pad);
}
.sv-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.sv-head h3 {
  font-size: var(--fs-20);
}
.sv-pill {
  color: var(--color-base-white);
  font-weight: var(--fw-bold);
  font-size: var(--fs-14);
  line-height: var(--lh-tight);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
}
.sv-pill.c {
  background: var(--color-core-blue);
}
.sv-pill.d {
  background: var(--color-core-deep-green);
}
.sv-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--card-gap);
}
/* カードの hover は本番同様「動かさず、枠線と影で反応する」 */
.sv-card {
  position: relative;   /* .sv-more::after のストレッチリンク基準 */
  background: var(--color-base-white);
  border: 1px solid var(--color-base-gray2);
  border-radius: var(--radius-m);
  padding: var(--space-4) var(--card-pad) var(--card-pad);
  display: flex;
  flex-direction: column;
  transition: var(--transition-card);
}
.sv-card:hover {
  border-color: var(--color-core-blue);
  box-shadow: var(--shadow-card-hover);
}
.sv-block.d .sv-card:hover {
  border-color: var(--color-core-deep-green);
}
.sv-card h4 {
  font-size: var(--fs-20);
}
.sv-card p {
  margin-top: var(--space-2);
  margin-bottom: var(--space-3);
  font-size: var(--fs-14);
  line-height: var(--lh-base);
  color: var(--color-base-p-black);
}
.sv-illo {
  margin-top: auto;   /* 画像から下をカード下端に揃える */
  border-radius: var(--radius-m);
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.sv-illo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sv-more {
  align-self: flex-start;
  margin-top: var(--space-3);
  color: var(--color-base-white);
  font-weight: var(--fw-bold);
  font-size: var(--fs-14);
  line-height: var(--lh-tight);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-s);
  box-shadow: var(--shadow-btn);
  transition: var(--transition-btn);
}
.sv-more.c {
  background: var(--color-core-blue);
}
.sv-more.d {
  background: var(--color-core-deep-green);
}
.sv-card:hover .sv-more {
  box-shadow: var(--shadow-btn-hover);
}
.sv-card:hover .sv-more.c {
  background: var(--color-core-light-blue);
}
.sv-card:hover .sv-more.d {
  background: var(--color-core-green);
}
.sv-more span {
  margin-left: var(--space-1);
}
/* ボタンの当たり判定をカード全面に拡張（カード全体クリック可能） */
.sv-more::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-m);
}
/* sv-more を使わずカード全面をリンクにする代替クラス */
.sv-card .sv-stretch {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-m);
}

/* ===== 制作実績 ===== */
.works {
  background: var(--color-base-gray1);
}
.wk-grid {
  margin-top: var(--sec-body-gap);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}
.wk-card {
  position: relative;   /* .wk-link::after のストレッチリンク基準 */
  background: var(--color-base-white);
  border: 1px solid var(--color-base-gray2);
  border-radius: var(--radius-m);
  overflow: hidden;
  transition: var(--transition-card);
}
.wk-card:hover {
  border-color: var(--color-core-blue);
  box-shadow: var(--shadow-card-hover);
}
/* 開発系カード（.wk-thumb.d を含む）の hover 枠線は緑に合わせる */
.wk-card:has(.wk-thumb.d):hover {
  border-color: var(--color-core-deep-green);
}
.wk-thumb {
  position: relative;
  aspect-ratio: 16 / 7.4;
  overflow: hidden;
  border-bottom: 3px solid var(--color-core-blue);
}
.wk-thumb.d {
  border-bottom-color: var(--color-core-deep-green);
}
.wk-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease-out;
}
/* 実績カードだけはサムネイルを寄る（本番 .bt_project 準拠） */
.wk-card:hover .wk-thumb img {
  transform: scale(1.1);
}
.wk-badge {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  color: var(--color-base-white);
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  z-index: 1;
}
.wk-badge.c {
  background: var(--color-core-blue);
}
.wk-badge.d {
  background: var(--color-core-deep-green);
}
/* サムネイル中央の再生ボタン。data-video を持つカードにだけ js/video-modal.js が
   挿入する（ソース未設定のカードには出ない）。
   z-index は .wk-badge(1) と .wk-link::after（カード全面のストレッチリンク）の
   両方より上に出す必要があるので 2。 */
.wk-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: var(--space-6);
  height: var(--space-6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--color-base-thin-black);
  border-radius: 50%;
  background: var(--color-core-blue);
  color: var(--color-base-white);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: var(--transition-btn);
}
.wk-card:hover .wk-play,
.wk-play:hover {
  background: var(--color-core-light-blue);
  transform: translate(-50%, -50%) scale(1.08);
}
.wk-play:focus-visible {
  outline: 3px solid var(--color-core-light-green);
  outline-offset: 2px;
}
.wk-body {
  padding: var(--space-3) var(--card-pad) var(--card-pad);
}
.wk-cat {
  color: var(--color-base-gray4);
  font-size: var(--fs-13);
  line-height: var(--lh-tight);
}
.wk-body h3 {
  margin-top: var(--space-1);
  font-size: var(--fs-18);
}
/* タグはティント地のピル。枠線・影を持たせるとボタンと見分けがつかなくなる（2026-08-19 指摘） */
.wk-tag {
  display: inline-block;
  margin-top: var(--space-2);
  font-size: var(--fs-13);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-tint-blue);
  color: var(--color-core-blue);
}
.wk-tag.d {
  background: var(--color-tint-green);
  color: var(--color-core-deep-green);
}
.wk-link {
  display: block;
  margin-top: var(--space-2);
  color: var(--color-core-light-blue);
  font-weight: var(--fw-bold);
  font-size: var(--fs-14);
}
/* リンクの当たり判定をカード全面に拡張（カード全体クリック可能） */
.wk-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* ===== キャッチ＋CTA行（実績・資料の下で共用） ===== */
.catch {
  margin-top: var(--space-6);
  text-align: center;
  color: var(--color-base-black);
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  font-size: var(--fs-20);
}
.catch em {
  font-style: normal;
  color: var(--color-core-light-blue);
}
.cta-row {
  margin-top: var(--space-4);
  display: flex;
  justify-content: center;
  gap: var(--card-gap);
}
.cta-row .btn {
  font-size: var(--fs-16);
  padding: var(--space-2) 42px;
}

/* 文節単位の折り返し（body の word-break: auto-phrase）でも、
   「まるごと支援」「親身に伴走します」のように密着した語句は分断されることがある。
   意味のまとまりで必ず1行に収めたい語句はこのクラスで囲む。 */
.nb {
  white-space: nowrap;
}

/* 最終行に数文字だけ残るのを防ぐ。ブラウザが行の分配をやり直して行長を揃える。
   （例：「…構築まで」で改行され、最終行が「親身に伴走します。」だけになる状態を解消）
   未対応ブラウザでは従来どおりの折り返しになるだけ */
p {
  text-wrap: pretty;
}

/* ===== 強み・特徴 ===== */
.ft-row {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin-top: var(--space-8);
}
.ft-txt {
  flex: 1 1 0;
}
.ft-panel {
  flex: 1 1 0;
  border-radius: var(--radius-l);
  overflow: hidden;
}
.ft-num {
  color: var(--color-core-light-blue);
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  font-size: var(--fs-28);
  line-height: var(--lh-flat);
}
.ft-num span {
  font-size: var(--fs-14);
  color: var(--color-base-gray4);
  margin-right: var(--space-1);
}
.ft-txt h3 {
  margin-top: var(--space-2);
  font-size: var(--fs-32);
}
.ft-txt p {
  margin-top: var(--space-4);
  font-size: var(--fs-16);
  line-height: var(--lh-base);
  color: var(--color-base-p-black);
}
.ft-more {
  margin-top: var(--space-8);
  text-align: center;
}
.ft-more a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-base-white);
  border: 1px solid var(--color-base-thin-black);
  border-radius: var(--radius-s);
  padding: var(--space-2) 42px;
  font-size: var(--fs-16);
  font-weight: var(--fw-bold);
  color: var(--color-core-blue);
  box-shadow: var(--shadow-btn);
  transition: var(--transition-btn);
}
.ft-more a:hover {
  opacity: 1;   /* .btn:hover と同じ理由 */
  color: var(--color-core-light-blue);
  box-shadow: var(--shadow-btn-hover);
}

/* ===== チーム ===== */
.team {
  background: var(--color-base-white);
}
.tm-grid {
  margin-top: var(--sec-body-gap);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--card-gap);
}
.tm-m {
  text-align: center;
}
.tm-ph {
  border: 1px solid var(--color-base-gray2);
  border-radius: var(--radius-m);
  aspect-ratio: 1 / 1.14;
  overflow: hidden;
  background: var(--color-base-gray1);
}
.tm-ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tm-nm {
  margin-top: var(--space-2);
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  font-size: var(--fs-16);
  line-height: var(--lh-tight);
  color: var(--color-base-black);
}
.tm-ro {
  margin-top: var(--space-1);
  font-size: var(--fs-12);   /* 6カラムだと13pxで「プロジェクトパートナー」が1文字だけ折り返す */
  line-height: var(--lh-tight);
  color: var(--color-base-gray4);
}

/* ===== お役立ち資料 ===== */
.download {
  background: var(--color-base-white);
}
.dl-grid {
  margin-top: var(--sec-body-gap);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}
.dl-card {
  position: relative;   /* .dl-stretch のストレッチリンク基準 */
}
/* カード全面を覆う透明リンク（カード全体クリック可能） */
.dl-card .dl-stretch {
  position: absolute;
  inset: 0;
}
.dl-cover {
  border-radius: var(--radius-m);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  box-shadow: var(--shadow-card);
  transition: var(--transition-card);
}
.dl-card:hover .dl-cover {
  box-shadow: var(--shadow-card-hover);
}
.dl-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* ページ数はラベルなのでティント地のピル。ベタ塗りだと primary ボタンと同じ見た目になる（2026-08-19 指摘） */
.dl-pages {
  display: inline-block;
  margin-top: var(--space-3);
  background: var(--color-tint-light-blue);
  color: var(--color-core-light-blue);
  font-weight: var(--fw-bold);
  font-size: var(--fs-13);
  line-height: var(--lh-tight);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
}
.dl-card h3 {
  margin-top: var(--space-2);
  font-size: var(--fs-18);
  /* 見出しが1行のカードと2行のカードで説明文の開始位置がずれるため、
     2行分（1.5em × 2）を最低高さとして確保する。列数が変わっても揃う */
  min-height: 3em;
}
.dl-card:hover h3 {
  color: var(--color-core-light-blue);
}
.dl-card p {
  margin-top: var(--space-2);
  font-size: var(--fs-14);
  line-height: var(--lh-base);
  color: var(--color-base-p-black);
}

/* ===== 実績動画のモーダル =====
   本番 3d-modely.com の .lightbox-* をそのまま踏襲（docs/design-tokens.md §4-5）。
   padding の 60px / 80px / 16px と背景の rgba(0,0,0,.90) は本番実装の実測値。
   7px スケール・色トークンの外に出るが、本番のライトボックスと見た目を揃えるため
   §4-5 の値を優先する。 */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 80px;
  background: #000000e6;
  overscroll-behavior: contain;
}
/* display:flex が UA の [hidden]{display:none} に勝ってしまうので明示的に落とす */
.lightbox[hidden] {
  display: none;
}
.lightbox-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-base-white);
  font-family: var(--font-base);
  font-size: var(--fs-36);
  line-height: var(--lh-flat);
  cursor: pointer;
  transition: var(--transition-btn);
}
.lightbox-close:hover {
  background: var(--color-core-light-blue);
}
.lightbox-close:focus-visible {
  outline: 3px solid var(--color-core-light-green);
  outline-offset: 2px;
}
.lightbox-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  width: min(var(--content-width), 100%);
  max-height: 100%;
}
.lightbox-video {
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 0;        /* 縦の狭いビューポートで flex 子として縮められるように */
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius-m);   /* 本番 .block-video video 準拠（§4-4） */
  background: #000;
}
.lightbox-caption {
  flex: none;
  color: var(--color-base-gray2);   /* 暗い面の上のテキスト */
  font-size: var(--fs-14);
  line-height: var(--lh-tight);
  text-align: center;
}

/* ===== ページトップに戻るボタン =====
   形は実績カードの再生ボタン（.wk-play）と同じ丸ボタンで揃える。
   一定スクロールしてから js/to-top.js が .is-visible を付けて出す
   （JS が動かない環境では出ないだけで、押せないボタンは残らない）。 */
.to-top {
  position: fixed;
  right: var(--space-3);
  bottom: var(--space-3);
  z-index: var(--z-to-top);
  width: var(--space-6);
  height: var(--space-6);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-base-thin-black);
  border-radius: var(--radius-pill);
  background: var(--color-core-blue);
  color: var(--color-base-white);
  box-shadow: var(--shadow-card);
  transition: var(--transition-btn);
  opacity: 0;
  visibility: hidden;
  transform: translateY(var(--space-2));
}
.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.to-top:hover {
  background: var(--color-core-light-blue);
}
.to-top:focus-visible {
  outline: 3px solid var(--color-core-light-green);
  outline-offset: 2px;
}

@media (max-width: 900px) {
  .sv-grid,
  .wk-grid,
  .dl-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .clients .wall {
    grid-template-columns: repeat(4, 1fr);
  }
  .tm-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .ft-row {
    flex-direction: column;
    align-items: stretch;   /* center のままだと縦積み時に幅が内容依存になる */
    gap: var(--space-4);
  }
  /* 縦積みでは flex-basis が「高さ」に効く。.ft-panel は overflow:hidden のため
     自動最小サイズが 0 になり、flex:1 1 0 のままだと高さ 0 に潰れて画像が消える
     （2026-08-24 スマホで強み・特徴の画像が出ない不具合）。縦積みでは伸縮させない。 */
  .ft-txt,
  .ft-panel {
    flex: 0 0 auto;
  }
  /* 注記が長く、横並びだと折り返して電話ブロックだけ左に残るので縦積みへ */

  .hero h1 {
    font-size: var(--fs-40);
  }
}

@media (max-width: 600px) {
  .nt {
    --sec-pad-y: var(--space-6);       /* PC と同値。基準を戻しても SP が広がらないよう明示しておく */
    --container-padding: 20px;
    --block-pad: var(--space-3);
  }
  /* 見出しは 1段下のサイズへ（本番の SP ラダー準拠） */
  .sec-title,
  .clients h2 {
    font-size: var(--fs-28);
  }
  .clients h2 .big {
    font-size: var(--fs-36);
  }
  .sec-lead {
    font-size: var(--fs-14);
  }
  .hero h1 {
    font-size: var(--fs-36);
  }
  .hero .eyebrow {
    font-size: var(--fs-16);
  }
  .hero .lead {
    font-size: var(--fs-16);
  }
  .hero .stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2) var(--space-3);
  }
  .hero .stat {
    padding: 0;
    border-left: none;
  }
  .hero .stat .num {
    font-size: var(--fs-28);
  }
  .hero .ctas {
    flex-direction: column;
    gap: var(--space-2);
  }
  .hero .ctas .btn {
    width: 100%;
  }
  .sv-grid,
  .wk-grid,
  .dl-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .clients .wall {
    grid-template-columns: repeat(3, 1fr);
  }
  .tm-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .sv-head {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-2);
  }
  .sv-head h3,
  .sv-card h4,
  .dl-card h3,
  .wk-body h3 {
    font-size: var(--fs-18);
  }
  /* 用途一覧（サービスカード）のアコーディオン。縦に伸びすぎて一覧として読めない
     という指摘への対応（2026-08-24）。トグルは js/service-accordion.js が
     スマホ幅でだけ生成するので、PC 側にはこのブロックの対象要素が存在しない。
     見た目は既存カードのまま。増えるのは開閉のシェブロンだけ。 */
  .sv-card.is-collapsible {
    padding: 0;   /* 余白は見出しボタンと .sv-panel に移し、行全体をタップ範囲にする */
  }
  .sv-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-3) var(--card-pad);
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
  }
  .sv-toggle-ic {
    flex: 0 0 auto;
    display: flex;
    color: var(--color-core-blue);
    transition: var(--transition-btn);
  }
  .sv-block.d .sv-toggle-ic {
    color: var(--color-core-deep-green);
  }
  .sv-toggle[aria-expanded="true"] .sv-toggle-ic {
    transform: rotate(180deg);
  }
  .sv-toggle:focus-visible {
    outline: 3px solid var(--color-core-light-blue);
    outline-offset: -3px;
  }
  /* 開閉する中身。カードと同じ flex 列にして .sv-more の align-self / margin を保つ */
  .sv-panel {
    display: flex;
    flex-direction: column;
    padding: 0 var(--card-pad) var(--card-pad);
  }
  .sv-card.is-collapsed .sv-panel {
    display: none;
  }
  /* カード全面のストレッチリンクは畳んだ行のタップを奪うので、アコーディオン時は外す */
  .sv-card.is-collapsible .sv-more::after {
    content: none;
  }
  .sv-card.is-collapsible .sv-stretch {
    display: none;
  }
  .ft-txt h3 {
    font-size: var(--fs-24);
  }
  .ft-num {
    font-size: var(--fs-24);
  }
  .ft-txt p {
    font-size: var(--fs-14);
  }
  .catch {
    font-size: var(--fs-16);
  }
  .cta-row {
    flex-direction: column;
  }
  .cta-row .btn,
  .ft-more a {
    width: 100%;
    padding: var(--space-2) var(--space-3);
  }
  /* ページトップに戻るボタンは画面端に寄せる（SP は横幅が惜しい） */
  .to-top {
    right: var(--space-2);
    bottom: var(--space-2);
  }
  /* 動画モーダル: 本番 SP のオーバーレイ余白は 60px 20px（§4-5）。
     20px は SP の --container-padding と同値。 */
  .lightbox {
    padding: 60px var(--container-padding);
  }
  .lightbox-close {
    top: var(--space-1);
    right: var(--space-1);
    width: 48px;
    height: 48px;
    font-size: var(--fs-28);
  }
}