/*
 * FORMETOSELLTHEORY LLC 法人サイト スタイル
 * ------------------------------------------------------------
 * 方針（仕様書 §3）：固め・コーポレート／スマホで読みやすい／スクショが主役になる余白
 * 作り方：スマホ（幅375px）を基本に書き、画面が広いときだけ @media で上書きする
 *
 * 目次
 *   0. 色・文字・余白の基本値
 *   1. 全体の土台
 *   2. ボタン
 *   3. 固定ナビ（ヘッダー）
 *   4. S1 ファーストビュー
 *   5. スクショ枠（プレースホルダー含む）
 *   6. セクション共通
 *   7. S2 解決すること
 *   8. S3 実績・事例
 *   9. S4 対応できること
 *  10. S5 開発の流れ
 *  11. S6 料金の目安
 *  12. S7 会社概要
 *  13. S8 お問い合わせ
 *  14. フッター
 *  15. スクショ拡大（ライトボックス）
 *  16. PC 幅での上書き
 *  17. ホバー（マウスを乗せたとき）
 *  18. 部品：LINE 再現（事例01・05・06）
 *  19. 部品：数字帯
 *  20. 部品：スクロールで要素がすっと出る
 *  21. 下層ページの見出し・パンくず・今いるページのナビ
 *  22. 実績カード（トップ・実績一覧）
 *  23. 事例ページ
 *  24. 部品：動画（押すまで読み込まない）
 *  25. フッターのリンク・その他の小さな部品
 *  26. 料金カード（決定39）・ほかにできること
 *  27. 静かな動き（ファーストビュー・ページ上部の光の玉）
 *  28. ロゴ（案A・仮置き）と「自社でも使っている」（S16）
 *  29. 言語切替（英語版 /en/）
 */

/* ============================================================
   0. 色・文字・余白の基本値（ここを変えると全体の色味が変わる）
   ============================================================ */
:root {
  --navy: #14263d;        /* 基調色：濃紺（見出し・ヘッダー） */
  --navy-deep: #0e1b2c;   /* フッターなど一段濃い紺 */
  --accent: #1f6f8b;      /* アクセント：青緑（ボタン・強調） */
  --accent-dark: #185a71; /* ボタンを押したとき */
  --accent-pale: #e8f2f6; /* 薄い青緑（ラベルの背景） */
  --ink: #16202c;         /* 本文の文字色 */
  --sub: #5b6776;         /* 補足の文字色 */
  --line: #dde2e8;        /* 罫線 */
  --bg: #ffffff;          /* 基本の背景 */
  --bg-alt: #f5f7f9;      /* 交互に敷く薄いグレーの背景 */
  --shot-bg: #eef1f4;     /* スクショ枠の背景 */

  --font: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif;
  --container: 1200px;    /* PC での最大幅（仕様書 F8：1200px前後） */
  --gutter: 20px;         /* 画面の左右の余白（スマホ） */
  --header-h: 60px;       /* 固定ナビの高さ。ページ内移動の着地位置の計算にも使う */
  --radius: 6px;
}

/* ============================================================
   1. 全体の土台
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;               /* ナビを押したときにスッと移動 */
  scroll-padding-top: var(--header-h);   /* 固定ナビの下に見出しが隠れないように */
  -webkit-text-size-adjust: 100%;
}

/* 動きを減らす設定の人には、スクロールの動きを付けない */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: .02em;
  overflow-wrap: anywhere;               /* 長い英単語・URL で横にはみ出さない */
}

/* メニューや拡大表示を開いている間は、後ろのページがスクロールしないようにする */
body.is-nav-open,
body.is-lightbox-open {
  overflow: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--accent);
}

h1, h2, h3, p, ul, ol, dl, dd {
  margin: 0;
}

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

/* 中身の横幅をそろえる箱 */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* 日本語を文節の切れ目で折り返す（レビュー001 R3）
   例：「撮って置くだけ」に → 「に」だけが次の行に落ちるのを防ぐ
   対応していないブラウザでは無視され、今までどおりの折り返しになる */
h1, h2, h3, p, dd, li {
  word-break: auto-phrase;
}

/* 数字と単位のかたまり（「約1分」「726行」など）を途中で改行させない（レビュー001 R3）
   HTML 側で <span class="nw">約1分</span> のように包んで使う */
.nw {
  white-space: nowrap;
}

/* スマホのときだけ改行させる <br> */
.br-sp { display: inline; }

/* 「本文へ移動」リンク：普段は隠し、Tab で選ばれたときだけ出す */
.skip-link {
  position: absolute;
  left: 8px;
  top: -100px;
  z-index: 100;
  padding: 8px 12px;
  background: #fff;
  color: var(--navy);
}
.skip-link:focus { top: 8px; }

/* キーボード操作のときの枠線を見やすく */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* ============================================================
   2. ボタン
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;                      /* 指で押しやすい高さ */
  padding: 12px 28px;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s, transform .15s;
}

/* 主役のボタン（ご相談はこちら） */
.btn--primary {
  background: var(--accent);
  color: #fff;
}

/* 脇役のボタン（実績を見る）：枠線だけ */
.btn--ghost {
  background: #fff;
  color: var(--navy);
  border-color: var(--navy);
}

/* ナビの中の小さいボタン */
.btn--small {
  min-height: 40px;
  padding: 6px 14px;
  font-size: 14px;
}

/* S8 の大きいボタン */
.btn--large {
  min-height: 64px;
  padding: 16px 48px;
  font-size: 19px;
  width: 100%;
  max-width: 420px;
}

/* 新しいタブで開くボタンには小さな矢印を付けて、外へ出ることを示す */
.btn[target="_blank"]::after {
  content: "";
  width: .7em;
  height: .7em;
  margin-left: .5em;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  flex-shrink: 0;
}

/* ============================================================
   3. 固定ナビ（ヘッダー）（F1）
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--line);
}

.site-header__inner {
  max-width: var(--container);
  margin: 0 auto;
  height: var(--header-h);
  padding: 0 12px 0 var(--gutter);
  display: flex;
  align-items: center;
  gap: 8px;
}

.site-logo {
  margin-right: auto;                    /* ロゴを左に寄せ、残りを右に寄せる */
  color: var(--navy);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .02em;
  text-decoration: none;
  white-space: nowrap;
}

/* スマホ：ヘッダー右端の［ご相談はこちら］は文字を少し詰める */
.site-header__cta {
  padding: 6px 10px;
  font-size: 13px;
  white-space: nowrap;
}
.site-header__cta::after { display: none; }   /* スマホでは矢印を省いて幅を確保 */

/* スマホ用のメニュー開閉ボタン（三本線＋文字） */
.nav-toggle {
  order: 3;                              /* 見た目では右端に置く */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 44px;
  height: 48px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--navy);
  cursor: pointer;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  transition: transform .2s, background-color .2s;
}
.nav-toggle__bars { position: relative; margin: 8px 0 6px; }
.nav-toggle__bars::before,
.nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -7px; }
.nav-toggle__bars::after { top: 7px; }
.nav-toggle__text { font-size: 9px; line-height: 1; letter-spacing: 0; white-space: nowrap; }

/* 開いているときは三本線を「×」に変える */
.is-nav-open .nav-toggle__bars { background: transparent; }
.is-nav-open .nav-toggle__bars::before { transform: translateY(7px) rotate(45deg); }
.is-nav-open .nav-toggle__bars::after { transform: translateY(-7px) rotate(-45deg); }

/* スマホ：メニューはヘッダーの下に全面で出す。普段は隠しておく */
.site-nav {
  display: none;
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  overflow-y: auto;
  padding: 8px var(--gutter) 32px;
}
.is-nav-open .site-nav { display: block; }

.site-nav__list a {
  display: block;
  padding: 16px 4px;
  border-bottom: 1px solid var(--line);
  color: var(--navy);
  font-weight: 700;
  text-decoration: none;
  transition: background-color .15s, color .15s;
}

/* ============================================================
   4. S1 ファーストビュー
   ============================================================ */
.hero {
  padding: 48px 0 56px;
  background: linear-gradient(180deg, var(--bg-alt) 0%, #fff 100%);
}

.hero__company {
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2em;
}

.hero__title {
  margin-top: 12px;
  color: var(--navy);
  font-size: 21px;                       /* スマホ幅375pxで2行目「いまも現場で毎日動いています。」が1行に収まる大きさ */
  line-height: 1.6;
  font-weight: 800;
  letter-spacing: 0;
}

.hero__lead {
  margin-top: 16px;
  color: var(--sub);
  font-size: 16px;
}

.hero__actions {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 実績カード4枚：スマホは 2列 */
.hero-cards {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 12px;
}

.hero-card__text {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--navy);
}

/* ファーストビューのスクショ枠は高さをそろえて並びをきれいに見せる */
.hero-card .shot {
  aspect-ratio: 4 / 5;
}

/* ============================================================
   5. スクショ枠（プレースホルダー含む）（F3）
   押すと拡大するボタン。画像は枠の中に「全体が収まる」ように置く
   ============================================================ */
.shot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--shot-bg);
  cursor: zoom-in;
  overflow: hidden;
}

.shot img {
  max-height: 100%;
  width: auto;
  object-fit: contain;
  box-shadow: 0 2px 10px rgba(20, 38, 61, .12);
}
/* 縦長（スマホ画面）・横長（PC画面）の比率を固定しておく */
.shot--phone img { aspect-ratio: 9 / 19.5; }
.shot--pc img { aspect-ratio: 16 / 10; width: 100%; height: auto; }

/* 枠内の文字：どのスロットが何の画面かを表示（実物のスクショに差し替えたら消す） */
.shot__label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: max-content;
  max-width: 88%;
  padding: 6px 10px;
  border-radius: 4px;
  background: rgba(20, 38, 61, .86);
  color: #fff;
  font-size: 11px;
  line-height: 1.5;
  font-weight: 700;
  text-align: center;
  pointer-events: none;
}

/* 右下の小さな虫眼鏡マーク：押すと拡大できることを示す */
.shot::after {
  content: "拡大";
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #fff;
  color: var(--navy);
  font-size: 11px;
  font-weight: 700;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
}


/* ============================================================
   6. セクション共通
   ============================================================ */
.section {
  padding: 64px 0;
}

/* 1つおきに薄いグレーの背景を敷いて区切りを分かりやすく */
.section--alt {
  background: var(--bg-alt);
}

/* 見出しの上の小さな英字ラベル */
.section__en {
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2em;
}

.section__title {
  margin: 4px 0 32px;
  color: var(--navy);
  font-size: 24px;
  line-height: 1.5;
  font-weight: 800;
}

/* ============================================================
   7. S2 解決すること（スマホは 1項目ずつのカード）
   ============================================================ */
.solutions {
  display: grid;
  gap: 12px;
  align-items: start;                    /* 実績を開いたカードだけが伸びるように */
}

.solution {
  padding: 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
}

.solution__name {
  color: var(--navy);
  font-size: 18px;
}

.solution__desc {
  margin-top: 6px;
}

.solution__works {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);     /* 説明文と実績の間に区切り線 */
}

.solution__works-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;                      /* 指で押しやすい高さ */
  padding: 8px 14px;
  border-radius: 4px;
  background: var(--accent-pale);
  color: var(--accent);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;                      /* ブラウザ標準の ▶ を消す */
  transition: background-color .15s, color .15s;
}
.solution__works-toggle::-webkit-details-marker { display: none; }   /* Safari 用：標準の ▶ を消す */

/* 件数（3件 など）は少し控えめに */
.solution__works-count {
  font-size: 12px;
  font-weight: 400;
}

/* 右端の「＋」。開いているときは「－」 */
.solution__works-toggle::after {
  content: "＋";
  margin-left: auto;
  font-weight: 400;
}
.solution__works[open] .solution__works-toggle::after { content: "－"; }

/* 紐づく実績の1行：太字の実績名＋何を作ってどう変わったか */
.solution__work-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding: 0 4px;
}

.solution__work dt {
  color: var(--navy);
  font-size: 14px;
  font-weight: 700;
}

.solution__work dd {
  color: var(--sub);
  font-size: 14px;
  line-height: 1.7;
}

/* ============================================================
   8. 事例の部品（番号・取引先・導入前→作ったもの→どう変わった・スクショ枠・使用技術）
   ============================================================ */
.cases {
  display: grid;
  gap: 16px;
}

.case {
  padding: 24px 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.case__meta {
  display: flex;
  align-items: baseline;
  gap: 12px;
  color: var(--sub);
  font-size: 13px;
}

.case__no {
  flex-shrink: 0;                        /* 取引先名が長くても番号（04 など）が縦に割れないように */
  white-space: nowrap;
  color: var(--accent);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .05em;
}

.case__client {
  font-weight: 700;
}

.case__title {
  margin-top: 6px;
  color: var(--navy);
  font-size: 19px;
  line-height: 1.5;
}

/* 導入前 → 作ったもの → どう変わった の3段 */
.case__flow {
  margin-top: 16px;
  display: grid;
  gap: 8px;
}

.case__step {
  position: relative;
  padding: 12px 14px;
  background: var(--bg-alt);
  border-radius: 4px;
}

/* 段と段の間に下向きの矢印（スマホ） */
.case__step + .case__step::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -8px;
  margin-left: -7px;
  border: 7px solid transparent;
  border-bottom: 0;
  border-top-color: var(--line);
}

.case__step dt {
  color: var(--sub);
  font-size: 12px;
  font-weight: 700;
}

.case__step dd {
  font-size: 15px;
  line-height: 1.7;
}

/* 「どう変わった」だけ色を付けて、結果が目に入るようにする */
.case__step--result {
  background: var(--accent-pale);
}
.case__step--result dt { color: var(--accent); }
.case__step--result dd { font-weight: 700; color: var(--navy); }


.case__shots {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

/* 事例内のスクショ枠は、中身の比率に合わせて高さを決める */
.case__shots .shot--phone { aspect-ratio: 3 / 5; }
.case__shots .shot--pc { grid-column: 1 / -1; }   /* PC画面は横幅いっぱいに */

/* スクショが1枚だけの事例は、スマホ画面でも中央に寄せる */
.case__shots .shot--phone:only-child {
  grid-column: 1 / -1;
  justify-self: center;
  max-width: 50%;
}

.case__tech {
  margin-top: 16px;
  color: var(--sub);
  font-size: 14px;
}

.case__tech-label {
  display: inline-block;
  margin-right: 8px;
  padding: 0 8px;
  border-radius: 3px;
  background: var(--navy);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

/* その他の実績 */
.other-works {
  margin-top: 40px;
  padding: 24px 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.other-works__title {
  color: var(--navy);
  font-size: 17px;
}

.other-works__list {
  margin-top: 12px;
  display: grid;
  gap: 4px;
}

.other-works__list li {
  position: relative;
  padding-left: 18px;
  font-size: 15px;
}
.other-works__list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .75em;
  width: 8px;
  height: 2px;
  background: var(--accent);
}

/* ============================================================
   9. S4 対応できること
   ============================================================ */
.capabilities {
  display: grid;
  gap: 32px;
}

.capabilities__title {
  margin-bottom: 12px;
  color: var(--navy);
  font-size: 17px;
}

/* 「できること」は四角いタグで並べる */
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tag-list li {
  padding: 6px 14px;
  border: 1px solid var(--navy);
  border-radius: 4px;
  color: var(--navy);
  font-weight: 700;
  font-size: 15px;
}

.capabilities__tech {
  color: var(--sub);
  font-size: 15px;
}

/* ============================================================
   10. S5 開発の流れ（番号付きの段）
   ============================================================ */
.steps {
  counter-reset: step;                   /* 01〜05 の番号を自動で振る */
  display: grid;
  gap: 12px;
}

.step {
  counter-increment: step;
  position: relative;
  padding: 20px 20px 20px 72px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 20px;
  top: 18px;
  color: var(--accent);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
}

.step__name {
  color: var(--navy);
  font-size: 17px;
}

.step__desc {
  margin-top: 4px;
  font-size: 15px;
}

/* ============================================================
   11. S6 料金の目安
   ============================================================ */
.plans {
  display: grid;
  gap: 12px;
}

.plan {
  padding: 24px 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--navy);
  border-radius: var(--radius);
}

.plan__name {
  color: var(--sub);
  font-size: 15px;
}

.plan__price {
  margin-top: 4px;
  color: var(--navy);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.4;
}

.plan__price-note {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--sub);
}

.plan__desc {
  margin-top: 10px;
  font-size: 15px;
}

.plans__note {
  margin-top: 20px;
  color: var(--sub);
  font-size: 14px;
}

/* ============================================================
   12. S7 会社概要・代表紹介
   ============================================================ */
.company {
  display: grid;
  gap: 32px;
}

/* 代表の写真：スマホでは中央に小さめ、PC では左の列いっぱい */
.company__photo {
  margin: 0 auto;
  width: min(240px, 70%);
}

.company__photo img {
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(20, 38, 61, .18);
}

.company__photo figcaption {
  margin-top: 10px;
  color: var(--sub);
  font-size: 13px;
  text-align: center;
}

/* 会社概要の表と代表紹介（写真の右側に縦に並ぶ） */
.company__body {
  display: grid;
  gap: 32px;
}

.company__table {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.company__row {
  padding: 14px 20px;
  border-top: 1px solid var(--line);
}
.company__row:first-child { border-top: 0; }

.company__row dt {
  color: var(--sub);
  font-size: 13px;
  font-weight: 700;
}
/* 社名・メールなどの英単語を途中で切らない（本文の overflow-wrap: anywhere を、この表の中だけ戻す。2026-10-07） */
.company__row dd {
  overflow-wrap: normal;
  word-break: keep-all;
}

.company__profile-title {
  margin-bottom: 8px;
  color: var(--navy);
  font-size: 17px;
}

/* ============================================================
   13. S8 お問い合わせ
   ============================================================ */
.contact {
  background: var(--navy);
  color: #fff;
  text-align: center;
}

.contact .section__en { color: #9cc9d9; }
.contact .section__title { color: #fff; margin-bottom: 20px; }

.contact__note {
  max-width: 560px;
  margin: 0 auto 28px;
}

.contact__mail {
  margin-top: 20px;
  font-size: 15px;
}
.contact__mail a { color: #fff; }

/* ============================================================
   14. フッター
   ============================================================ */
.site-footer {
  padding: 32px 0;
  background: var(--navy-deep);
  color: #aab4c0;
  font-size: 13px;
  text-align: center;
}

.site-footer__name {
  color: #fff;
  font-weight: 700;
  letter-spacing: .06em;
}

.site-footer__links { margin-top: 8px; }
.site-footer__links a { color: #aab4c0; }
.site-footer__copy { margin-top: 8px; }

/* ============================================================
   15. スクショ拡大（ライトボックス）（F3）
   ============================================================ */
.lightbox {
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

/* 後ろのページを暗くする */
.lightbox::backdrop {
  background: rgba(10, 18, 28, .88);
}

.lightbox__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 64px 16px 24px;
  pointer-events: none;                  /* 画像の外を押したら dialog 自身が押される → 閉じる */
}

.lightbox__img,
.lightbox__close,
.lightbox__caption {
  pointer-events: auto;
}

/* 横長（PC画面）は横幅いっぱい、縦長（スマホ画面）は高さいっぱいに合わせる */
.lightbox__img {
  max-width: min(100%, 1100px);
  max-height: calc(100% - 48px);
  width: auto;
  height: auto;
  background: #fff;
}
.lightbox.is-phone .lightbox__img {
  height: calc(100% - 48px);
}

.lightbox__caption {
  margin-top: 12px;
  color: #fff;
  font-size: 14px;
  text-align: center;
}

.lightbox__close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.lightbox__close-text { font-size: 14px; }

/* ============================================================
   16. PC 幅での上書き
   ============================================================ */

/* タブレット以上（幅 640px〜） */
@media (min-width: 640px) {
  :root { --gutter: 32px; }

  .br-sp { display: none; }
  .hero__title { font-size: 30px; }

  .hero__actions { flex-direction: row; }

  .hero-cards { grid-template-columns: repeat(4, 1fr); gap: 20px; }

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

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

  .other-works__list { grid-template-columns: repeat(2, 1fr); column-gap: 32px; }

  .company__row {
    display: grid;
    grid-template-columns: 96px 1fr;   /* 項目名の列を少し狭くして、社名が1行に収まる幅を確保 */
    gap: 16px;
  }
  .company__row dt { font-size: 14px; }
}

/* PC（幅 960px〜）：ナビを横一列で常に表示 */
@media (min-width: 960px) {
  :root { --header-h: 68px; }

  .site-header__inner { padding: 0 var(--gutter); gap: 24px; }

  .site-logo { font-size: 15px; }

  .nav-toggle { display: none; }

  .site-nav {
    display: block;
    position: static;
    padding: 0;
    background: none;
    overflow: visible;
  }

  .site-nav__list {
    display: flex;
    gap: 4px;
  }

  .site-nav__list a {
    padding: 8px 10px;
    border-bottom: 0;
    font-size: 14px;
    border-radius: 4px;
  }

  .site-header__cta { padding: 6px 16px; font-size: 14px; }
  .site-header__cta::after { display: block; }

  /* ファーストビュー */
  .hero { padding: 88px 0 96px; }
  .hero__title { font-size: 42px; letter-spacing: .03em; }
  .hero__lead { font-size: 18px; }
  .hero-card__text { font-size: 15px; }

  /* セクション共通 */
  .section { padding: 96px 0; }
  .section__title { font-size: 30px; margin-bottom: 48px; }

  /* S2：5項目を 3列＋2列 の格子で */
  .solutions { grid-template-columns: repeat(3, 1fr); gap: 16px; }

  .cases { grid-template-columns: repeat(2, 1fr); gap: 24px; align-items: start; }
  .case { padding: 32px; }

  /* 事例ページ：3段（導入前→作ったもの→どう変わった）を横並びに */
  .case__flow--wide { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .case__flow--wide .case__step + .case__step::before {
    left: -15px;
    top: 50%;
    margin: -7px 0 0;
    border: 7px solid transparent;
    border-right: 0;
    border-left-color: var(--line);
  }

  .other-works { padding: 32px; }
  .other-works__list { grid-template-columns: repeat(3, 1fr); }

  /* S4：できること／使用技術 を左右に */
  .capabilities { grid-template-columns: 1fr 1fr; gap: 48px; }

  /* S5：5段を横一列 */
  .steps { grid-template-columns: repeat(5, 1fr); }
  .step { padding: 64px 20px 24px; }
  .step::before { top: 20px; }

  /* S7：会社概要と代表紹介を左右に */
  .company { grid-template-columns: 260px 1fr; gap: 48px; align-items: start; }
  .company__photo { width: 100%; margin: 0; }
  .company__photo figcaption { text-align: left; }
  .company__body { grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: start; }
}

/* ============================================================
   17. ホバー（マウスを乗せたとき）
   マウスのある端末（PC）だけに効かせる。スマホで押したあとに色が残るのを防ぐため
   ============================================================ */
@media (hover: hover) {
  /* 主役のボタン（ご相談はこちら）：紺に変わり、少し浮き上がる */
  .btn--primary:hover {
    background: var(--navy);
    box-shadow: 0 6px 16px rgba(20, 38, 61, .25);
    transform: translateY(-1px);
  }

  /* お問い合わせ欄は背景が紺なので、ボタンは白地に紺文字へ反転する */
  .contact .btn--primary:hover {
    background: #fff;
    color: var(--navy);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .3);
  }

  /* 枠線だけのボタン（実績を見る・トップページへ戻る）：紺で塗りつぶす */
  .btn--ghost:hover {
    background: var(--navy);
    color: #fff;
  }


  /* 紐づく実績の開閉：青緑で塗りつぶす */
  .solution__works-toggle:hover {
    background: var(--accent);
    color: #fff;
  }

  /* スクショ枠：枠線と「拡大」の札を青緑に */
  .shot:hover { border-color: var(--accent); }
  .shot:hover::after {
    background: var(--accent);
    color: #fff;
  }

  /* PC のナビ：文字を青緑に、背景をうっすら */
  .site-nav__list a:hover {
    background: var(--bg-alt);
    color: var(--accent);
  }

  /* 拡大表示の×ボタン */
  .lightbox__close:hover { background: rgba(255, 255, 255, .12); }
}

/* ボタンを押している間は浮き上がりを戻し、押した感じを出す */
.btn:active { transform: translateY(0); box-shadow: none; }

/* 動きを減らす設定の人には、浮き上がりの動きを付けない */
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn--primary:hover { transform: none; }
  /* すっと出る動きも止める（JS 側でも js-reveal を付けないが、念のため） */
  .js-reveal [data-reveal], .js-reveal .line-chat__msg { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   18. 部品：LINE 再現（決定33）
   <figure class="line-chat"> をコピーすれば、どのページでも同じ見た目になる。
   見た目は「スマホのトーク画面らしさ」まで。特定アプリのデザインの写しにはしない
   ============================================================ */
.line-chat {
  margin: 0 auto;
  width: 100%;
  max-width: 380px;
}

/* スマホの画面の枠 */
.line-chat__screen {
  background: #8aa3c4;                   /* トーク画面らしい青みのグレー */
  border-radius: 18px;
  border: 1px solid var(--line);
  box-shadow: 0 8px 24px rgba(20, 38, 61, .14);
  overflow: hidden;
}

/* 画面上部：相手（ボット）の名前 */
.line-chat__bar {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 12px 16px;
  background: var(--navy);
  color: #fff;
}
.line-chat__title { font-weight: 700; font-size: 14px; }
.line-chat__sub { font-size: 11px; opacity: .75; }

/* 吹き出しの並び */
.line-chat__log {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 12px 18px;
  min-height: 220px;
}

.line-chat__msg {
  max-width: 82%;
  padding: 8px 12px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.6;
  overflow-wrap: anywhere;
  word-break: normal;                    /* 文節折り返し（auto-phrase）は吹き出しでは切らない */
}
/* 相手（ボット）：左・白 */
.line-chat__msg--bot {
  align-self: flex-start;
  background: #fff;
  color: var(--ink);
  border-top-left-radius: 4px;
}
/* 自分（現場の人）：右・緑 */
.line-chat__msg--user {
  align-self: flex-end;
  background: #8de36b;
  color: #10261a;
  border-top-right-radius: 4px;
}
/* 画面の中の注意書き（小さく中央） */
.line-chat__msg--sys {
  align-self: center;
  max-width: 92%;
  padding: 4px 10px;
  background: rgba(255, 255, 255, .55);
  color: var(--navy);
  font-size: 11px;
  border-radius: 999px;
}
/* 写真を送った吹き出し */
.line-chat__msg--photo { padding: 0; background: transparent; }
.line-chat__photo {
  display: block;
  width: 120px;
  height: 90px;
  border-radius: 12px;
  background:
    repeating-linear-gradient(90deg, #333 0 2px, transparent 2px 5px, #333 5px 6px, transparent 6px 10px) center / 70% 36% no-repeat,
    #e9edf2;                             /* バーコード風の縞 */
}

/* 伏せる部分：ぼかして読めなくする（実機でもぼかす箇所） */
.line-chat__mask {
  filter: blur(4px);
  user-select: none;
  opacity: .8;
}
.line-chat__link { color: #1f4f8b; text-decoration: underline; }

/* 再現であることの一言（決定33） */
.line-chat__note {
  margin-top: 10px;
  color: var(--sub);
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
}

/* 事例の中では、PC のスクショ枠の下に置かれる */

/* ============================================================
   19. 部品：数字帯（仕様書 v1.1 §4-1）
   <section class="stats"> をコピーすれば、どのページでも同じ見た目になる
   ============================================================ */
.stats {
  background: var(--navy);
  color: #fff;
  padding: 36px 0;
}

.stats__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px 16px;
}

.stats__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* 5つ目はスマホで 1 列分だけ余るので、横いっぱいにする */
.stats__item:last-child { grid-column: 1 / -1; }

.stats__num {
  font-size: 28px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .01em;
  color: #fff;
}
.stats__label {
  font-size: 12px;
  line-height: 1.6;
  color: #c9d3de;
}

/* PC（幅 960px〜）：5 列に並べる。※ 16章より後ろに書いてあるので、ここに書かないと上書きされない */
@media (min-width: 960px) {
  .stats { padding: 44px 0; }
  .stats__list { grid-template-columns: repeat(5, 1fr); gap: 24px; }
  .stats__item:last-child { grid-column: auto; }
  .stats__num { font-size: 32px; }
  .stats__label { font-size: 13px; }
}

/* ============================================================
   20. 部品：スクロールで要素がすっと出る
   JS が動いて、かつ「視差効果を減らす」設定でないときだけ効く（html に js-reveal が付く）。
   JS が無い環境では何も隠れない
   ============================================================ */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease;
  transition-delay: var(--reveal-delay, 0s);
}
.js-reveal [data-reveal].is-in {
  opacity: 1;
  transform: none;
}
/* LINE 再現の吹き出しは 1 通ずつ順番に出る */
.js-reveal .line-chat__msg {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s ease, transform .35s ease;
}
.js-reveal .line-chat.is-in .line-chat__msg {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--i, 0) * .45s);
}

/* ============================================================
   21. 下層ページの見出し・パンくず・今いるページのナビ（指示003）
   ============================================================ */
.page-head {
  padding: 40px 0 28px;
  background: linear-gradient(180deg, var(--bg-alt) 0%, #fff 100%);
}
.page-head__title {
  margin-top: 4px;
  color: var(--navy);
  font-size: 26px;
  line-height: 1.5;
  font-weight: 800;
}
.page-head__lead {
  margin-top: 12px;
  color: var(--sub);
}

/* パンくず：トップ ＞ 実績 ＞ 見出し */
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  margin-bottom: 16px;
  font-size: 12px;
  color: var(--sub);
}
.crumbs li + li::before { content: "›"; margin: 0 8px; color: var(--line); }
.crumbs a { color: var(--sub); text-decoration: none; }
.crumbs a:hover { color: var(--accent); text-decoration: underline; }
.crumbs [aria-current] { color: var(--navy); font-weight: 700; }

/* 今いるページのメニュー（F1）：下線を引く */
.site-nav__list a[aria-current="page"] {
  color: var(--accent);
  box-shadow: inset 0 -2px 0 var(--accent);
}

/* 下層ページで、見出しのすぐ下に続くセクションは上の余白を詰める */
.section--tight { padding-top: 32px; }
.section__title--sub { font-size: 20px; margin-bottom: 20px; }
.section__more { margin-top: 28px; text-align: center; }

/* ============================================================
   22. 実績カード（トップのダイジェスト・実績一覧）
   押すと事例ページへ。画像は上、下に番号・取引先・見出し・どう変わった
   ============================================================ */
.work-cards {
  display: grid;
  gap: 16px;
}
.work-card__link {
  display: block;
  height: 100%;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.work-card__img {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  aspect-ratio: 16 / 10;
  padding: 12px;
  border-radius: 4px;
  background: var(--shot-bg);
  overflow: hidden;
}
.work-card__img img { max-height: 100%; width: auto; object-fit: contain; box-shadow: 0 2px 10px rgba(20, 38, 61, .12); }
.work-card__img--pc img { width: 100%; height: auto; max-height: none; object-fit: cover; }
.work-card__img .shot__label { font-size: 11px; }
.work-card__meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 14px;
  color: var(--sub);
  font-size: 12px;
}
.work-card__meta .case__no { font-size: 16px; }
.work-card__title {
  display: block;
  margin-top: 4px;
  color: var(--navy);
  font-size: 17px;
  line-height: 1.5;
  font-weight: 700;
}
.work-card__result {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--sub);
}

/* ファーストビューのカードもリンクに（押すと事例ページへ）。拡大の札は出さない */
.hero-card__link { display: block; color: inherit; text-decoration: none; }
.hero-card .shot { cursor: pointer; }
.hero-card .shot::after, .work-card .shot__label::after { display: none; }
.hero-card__text {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--navy);
}

/* 数字帯の数字はリンク（各事例ページへ） */
.stats__link { display: flex; flex-direction: column; gap: 4px; color: inherit; text-decoration: none; }

/* ============================================================
   23. 事例ページ（仕様書 §4-3）
   ============================================================ */
.casepage .case__meta { margin-bottom: 20px; }
.casepage__h {
  margin: 40px 0 16px;
  color: var(--navy);
  font-size: 18px;
}
.casepage__screens { display: grid; gap: 20px; }
.casepage__screen-note {
  margin-top: 12px;
  color: var(--sub);
  font-size: 12px;
}
.casepage__shotfig { margin: 0; }
.casepage__shotfig figcaption { margin-top: 8px; color: var(--sub); font-size: 12px; text-align: center; }
.casepage__shotfig .shot--phone { max-width: 320px; margin: 0 auto; }
.case__shots--five { grid-template-columns: repeat(2, 1fr); }
.case__shots--five .shot--phone { aspect-ratio: auto; }
.case__shots--five .shot--phone:last-child { grid-column: 1 / -1; max-width: 50%; justify-self: center; }
/* 実機の画面（LINE 再現の隣）：見出しの札＋スクショ2枚 */
.casepage__real { display: grid; gap: 10px; }
.casepage__real .case__shots { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.casepage__real .case__shots .shot--phone { aspect-ratio: auto; }
.casepage__real-label {
  display: inline-block;
  justify-self: start;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.casepage__shotfig--wide { margin-top: 24px; }
.casepage__tech { margin-top: 32px; }

/* 関連する事例：番号＋見出しの小さなリンク */
.work-mini-list { display: grid; gap: 8px; }
.work-mini {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--navy);
  text-decoration: none;
  font-weight: 700;
}
.work-mini__no { color: var(--accent); font-size: 14px; }
.work-mini__title { font-size: 15px; }

/* 前後の事例 */
.pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.pager__link { display: flex; flex-direction: column; gap: 4px; color: var(--navy); text-decoration: none; }
.pager__link--next { text-align: right; }
.pager__label { color: var(--sub); font-size: 12px; }
.pager__title { font-size: 14px; font-weight: 700; }
.pager__link--prev .pager__label::before { content: "← "; }
.pager__link--next .pager__label::after { content: " →"; }

/* ============================================================
   24. 部品：動画（押すまで読み込まない・自動再生しない・音は最初は消す）
   ============================================================ */
.video-block { margin: 0 auto; width: 100%; }
.video-block--tate { max-width: 360px; }
.video-block--yoko { max-width: 960px; }
.video-block__frame {
  position: relative;
  background: var(--navy);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(20, 38, 61, .16);
}
.video-block--tate .video-block__frame { aspect-ratio: 9 / 16; }
.video-block--yoko .video-block__frame { aspect-ratio: 16 / 9; }
.video-block__video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: #000; }
/* 再生ボタン：枠いっぱい。再生が始まったら消える */
.video-block__play {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  border: 0;
  background: rgba(20, 38, 61, .35);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .15s;
}
.video-block__play:hover { background: rgba(20, 38, 61, .55); }
.video-block__play-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #fff;
  position: relative;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .3);
}
.video-block__play-icon::after {
  content: "";
  position: absolute;
  left: 26px;
  top: 20px;
  border-style: solid;
  border-width: 12px 0 12px 18px;
  border-color: transparent transparent transparent var(--navy);
}
.video-block__play-text { font-size: 14px; text-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
.video-block.is-playing .video-block__play { display: none; }
.video-block__caption { margin-top: 10px; color: var(--sub); font-size: 12px; text-align: center; line-height: 1.6; }

/* ご相談ページ：PC は横の動画、スマホは縦の動画 */
.only-pc { display: none; }
.only-sp { display: block; }

/* ============================================================
   25. フッターのリンク・その他の小さな部品（指示003）
   ============================================================ */
.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
  margin-top: 12px;
}
.site-footer__nav a { color: #aab4c0; text-decoration: none; }
.site-footer__nav a:hover { color: #fff; text-decoration: underline; }
.contact__more { margin-top: 12px; font-size: 13px; }
.contact__more a { color: #c9d3de; }

/* 解決すること：アイコン（設計担当の線画 SVG。色は文字色を引き継ぐ） */
.solution__icon { display: block; width: 40px; height: 40px; margin-bottom: 12px; color: var(--accent); }
.solution__icon .icon { width: 40px; height: 40px; display: block; }
.solution__work-link { margin-left: 6px; color: var(--accent); font-size: 13px; white-space: nowrap; }

/* 進め方の1行版（トップ・作り方・ご相談） */
.steps--lines { counter-reset: step; display: grid; grid-template-columns: 1fr; gap: 8px; }   /* 1行版は PC でも縦に並べる（16章の5列指定より後ろに書いて上書き） */
.step--line {
  counter-increment: step;
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 4px 12px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.step--line::before {
  content: counter(step, decimal-leading-zero);
  grid-row: 1 / span 2;
  position: static;
  color: var(--accent);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.3;
}
.step--line .step__name { font-size: 15px; font-weight: 700; color: var(--navy); }
.step--line .step__desc { margin: 0; font-size: 14px; color: var(--sub); }

/* 作り方ページ：体制・抜粋・準備中の図の枠 */
.team { display: grid; gap: 10px; }
.team__item {
  display: grid;
  gap: 4px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
}
.team__role { color: var(--navy); font-weight: 700; }
.team__does { color: var(--sub); font-size: 14px; }
.excerpts { display: grid; gap: 12px; }
.excerpt {
  margin: 0;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 15px;
  line-height: 1.8;
}
.excerpt__kind { color: var(--accent); font-size: 12px; font-weight: 700; margin-bottom: 6px; }
.figure-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 24px 0 0;
  aspect-ratio: 16 / 9;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: var(--shot-bg);
  color: var(--sub);
  font-size: 13px;
}
.stats__list--inline { grid-template-columns: repeat(3, 1fr); }
.stats__num--ink { color: var(--navy); }
.stats__label--ink { color: var(--sub); }
.how-close { margin-top: 28px; color: var(--ink); }
.how-intro p + p { margin-top: 8px; }

/* 会社概要：現場写真の帯 */
.photo-band { height: 180px; overflow: hidden; }
.photo-band img { width: 100%; height: 100%; object-fit: cover; }

/* ご相談ページ（本文は白地なので、問い合わせ欄の文字色を紺に） */
.contact-page { text-align: center; }
.contact__note--ink { color: var(--ink); }
.contact-flow { text-align: left; max-width: 640px; margin: 24px auto 0; }
.contact-page__cta { margin-top: 32px; }
.contact__mail--ink a { color: var(--accent); }

/* 404 */
.notfound__cat { width: min(280px, 70%); margin: 0 0 28px; border-radius: 8px; box-shadow: 0 8px 24px rgba(20, 38, 61, .18); }
.notfound__note { margin-top: 8px; color: var(--sub); font-size: 14px; }
.notfound__cta { margin-top: 28px; }

/* タブレット以上 */
@media (min-width: 640px) {
  .work-cards { grid-template-columns: repeat(2, 1fr); }
  .case__shots--five { grid-template-columns: repeat(5, 1fr); }
  .case__shots--five .shot--phone:last-child { grid-column: auto; max-width: none; }
  .casepage__screens--pair { grid-template-columns: 1fr 1fr; align-items: start; }
  .work-mini-list { grid-template-columns: repeat(2, 1fr); }
  .photo-band { height: 240px; }
}

/* PC */
@media (min-width: 960px) {
  .page-head { padding: 64px 0 40px; }
  .page-head__title { font-size: 36px; }
  .work-cards { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .work-card__link { padding: 20px; }
  .casepage__screens--video { grid-template-columns: 360px 1fr; align-items: start; }
  .only-pc { display: block; }
  .only-sp { display: none; }
  .photo-band { height: 300px; }
  .team { grid-template-columns: repeat(3, 1fr); }
}

@media (hover: hover) {
  .work-card__link:hover, .work-mini:hover { border-color: var(--accent); box-shadow: 0 6px 16px rgba(20, 38, 61, .12); transform: translateY(-1px); }
  .hero-card__link:hover .shot { border-color: var(--accent); }
  .stats__link:hover .stats__num { text-decoration: underline; text-underline-offset: 6px; }
}

/* ============================================================
   26. 部品：はじめての方向けの料金カード（決定39）・ほかにできること
   ============================================================ */
.offer {
  position: relative;
  padding: 28px 24px;
  background: #fff;
  border: 2px solid var(--accent);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(31, 111, 139, .14);
}
.offer__label {
  display: inline-block;
  padding: 2px 12px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.offer__title {
  margin-top: 14px;
  color: var(--navy);
  font-size: 22px;
  line-height: 1.4;
  font-weight: 800;
}
.offer__price {
  display: block;
  margin-top: 6px;
  color: var(--accent);
  font-size: 34px;
  line-height: 1.1;
}
.offer__body { margin-top: 12px; color: var(--ink); }
.offer__btn { margin-top: 20px; width: 100%; }
.offer__more { margin-top: 16px; text-align: center; font-size: 14px; }
.section--offer { padding-top: 0; }
/* 料金ページでは、3プランの上に置く */
#pricing .offer { margin-bottom: 24px; }

.can-list { display: grid; gap: 10px; }
.can-list li {
  position: relative;
  padding: 12px 16px 12px 40px;
  background: var(--bg-alt);
  border-radius: var(--radius);
  font-size: 15px;
  line-height: 1.7;
}
.can-list li::before {
  content: "✓";
  position: absolute;
  left: 16px;
  top: 12px;
  color: var(--accent);
  font-weight: 800;
}

@media (min-width: 960px) {
  .offer {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "label label" "title btn" "body btn";
    align-items: center;
    column-gap: 40px;
    padding: 32px 40px;
  }
  .offer__label { grid-area: label; justify-self: start; }
  .offer__title { grid-area: title; font-size: 26px; display: flex; align-items: baseline; gap: 20px; }
  .offer__price { margin-top: 0; font-size: 40px; }
  .offer__body { grid-area: body; margin-top: 8px; }
  .offer__btn { grid-area: btn; width: auto; margin-top: 0; }
}

/* ============================================================
   27. 静かな動き：トップのファーストビューと各ページの上部（第2段階①）
   ・紺と青緑をごく薄くした光の玉を2つ置き、ゆっくり漂わせる（動画・JS は使わない）
   ・文字の後ろに敷くだけで、読みやすさは変えない（透明度を低く、ぼかしを強く）
   ・OS の「視差効果を減らす」設定では止まる（位置は固定のまま残す）
   ============================================================ */
.hero,
.page-head {
  position: relative;
  overflow: hidden;          /* 光の玉がはみ出さないように */
  isolation: isolate;        /* 光の玉を文字の後ろ（z-index: -1）に置くための土台 */
}
.hero::before, .hero::after,
.page-head::before, .page-head::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;      /* クリックの邪魔をしない */
  will-change: transform;
}
/* 青緑の玉：右上 */
.hero::before, .page-head::before {
  width: 520px; height: 520px;
  right: -160px; top: -220px;
  background: radial-gradient(circle, rgba(31, 111, 139, .20) 0%, rgba(31, 111, 139, 0) 70%);
  animation: drift-a 22s ease-in-out infinite alternate;
}
/* 紺の玉：左下 */
.hero::after, .page-head::after {
  width: 420px; height: 420px;
  left: -180px; bottom: -240px;
  background: radial-gradient(circle, rgba(20, 38, 61, .14) 0%, rgba(20, 38, 61, 0) 70%);
  animation: drift-b 28s ease-in-out infinite alternate;
}
/* ページ上部は背が低いので、玉も小さめ・薄め */
.page-head::before { width: 380px; height: 380px; top: -200px; }
.page-head::after  { width: 300px; height: 300px; bottom: -200px; }

@keyframes drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-90px, 60px, 0) scale(1.12); }
}
@keyframes drift-b {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(80px, -50px, 0) scale(1.08); }
}

/* 動きを減らす設定の人には、玉を動かさない（薄い色だけ残る） */
@media (prefers-reduced-motion: reduce) {
  .hero::before, .hero::after, .page-head::before, .page-head::after { animation: none; }
}

/* ============================================================
   28. ロゴ（案A・仮置き）と「自社でも使っている」（S16）
   ・ロゴ：favicon と同じ F マーク（inline SVG）＋社名。LLC だけ青緑で小さく。フッターでは白い角丸に反転（HTML 側で色を入れ替え）
   ・自社ストアの画面：事例02 は横長＋縦長の2枚、会社概要は横長1枚
   ============================================================ */
.site-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.site-logo .logo-mark { flex: none; width: 24px; height: 24px; }
.site-logo__text { letter-spacing: .06em; }
.site-logo__llc {
  margin-left: .45em;
  color: var(--accent);
  font-size: .72em;
  letter-spacing: .14em;
  vertical-align: 1px;
}
.site-footer__name {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
}
.site-footer__name .logo-mark { width: 28px; height: 28px; }
.site-footer__name .site-logo__llc { color: #7fc4d8; }

.casepage__own-lead { margin: 0 0 16px; max-width: 46em; }
.own-shots { display: grid; gap: 14px; }
.shot--tall img { aspect-ratio: auto; width: 100%; height: auto; }   /* 縦長の PC 画面（出品一覧）は比率を固定しない */
.company__own { margin: 24px 0 0; }
.company__own-cap { margin-top: 8px; color: var(--sub); font-size: 13px; line-height: 1.7; }

/* スマホの狭いヘッダー：マークを小さく、LLC は出さない（ロゴ・ご相談ボタン・メニューの3つが 375px に収まるように） */
@media (max-width: 599px) {
  .site-logo { gap: 6px; }
  .site-logo .logo-mark { width: 20px; height: 20px; }
  .site-logo__text { letter-spacing: .03em; }
  .site-header .site-logo__llc { display: none; }
}
@media (min-width: 960px) {
  .site-logo .logo-mark { width: 28px; height: 28px; }
  .own-shots { grid-template-columns: 3fr 2fr; align-items: start; }
}

/* 自社ストアの実績（事例02「自社でも」の中の3つの数字。数字帯より控えめに、白いカードで） */
.own-stats {
  display: grid;
  gap: 10px;
  margin: 0 0 16px;
}
.own-stats__item {
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: #fff;
}
.own-stats__item dt { color: var(--sub); font-size: 12px; }
.own-stats__item dd { margin: 2px 0 0; color: var(--navy); font-size: 20px; font-weight: 700; }
.own-stats__note { margin: 0 0 16px; color: var(--sub); font-size: 13px; }
@media (min-width: 600px) { .own-stats { grid-template-columns: repeat(3, 1fr); } }

/* ============================================================
   29. 言語切替（英語版 /en/。2026-10-06）
   ・ナビの最後の項目。スマホではメニューの中、PC では右端に細い線で区切って小さく
   ============================================================ */
.site-nav__lang a { color: var(--sub); font-weight: 500; }
@media (min-width: 960px) {
  .site-nav__lang { margin-left: 6px; padding-left: 10px; border-left: 1px solid var(--line); }
  .site-nav__lang a { font-size: 13px; }
}