/* 湘南AI広告社 — LP
   設計の正本: design/pages/lp.md ／ 見た目の下敷き: design/mockups/20260905_lp-full_v1.png
   金額の正本: 03_TOOLS/shared/ad_pricing.json（HTMLに直書きしない、ではなく
              「勝手に別の数字を書かない」の意味。検査は check_ad_pricing.py）

   **色は白・黒・海の青**（lp.md §11）。AI Strategy Partner の紫青（#0D1CC1）は使わない。
   下の値はモック画像から実測した色。 */

:root {
  /* 海の青。モックのCTAボタン・料金ボタンから実測 */
  --sea-600: #055c9d;
  --sea-700: #04446f;
  --sea-050: #e8f1f8;
  /* 濃紺。ロゴ・見出し・暗い面 */
  --navy-900: #031130;

  --white: #ffffff;
  --bg: #ffffff;
  --bg-tint: #eff4f8; /* 帯（悩み・事例）の地。モック実測 */
  --line: #d8e2ec;
  --line-soft: #eaf0f6;

  --ink: #0b1a2e;
  --ink-body: #46566b;
  --ink-mute: #7c8a9c;

  /* ヒーローに白文字を載せるためのオーバーレイ。
     **数字は tools/check_contrast.py の実測で決める。目で決めない。** */
  /* 2026-09-06 実測。当初値（.82/.50/.06）だと左下の砂浜で白文字が 2.7:1 まで落ちた。
     この値で 5.6:1。**江の島は右側にあり、そこは .18 と薄いので消えない。**
     背景を差し替えたら python3 site/tools/check_contrast.py を通し直す。 */
  --hero-overlay: linear-gradient(90deg, rgba(3, 17, 48, 0.92) 0%, rgba(3, 17, 48, 0.74) 46%, rgba(3, 17, 48, 0.18) 100%);
  --hero-veil: linear-gradient(180deg, rgba(3, 17, 48, 0) 40%, rgba(3, 17, 48, 0.44) 100%);
  --hero-mobile-overlay: linear-gradient(rgba(3, 17, 48, 0.8), rgba(3, 17, 48, 0.8));
  --cta-overlay: linear-gradient(180deg, rgba(3, 17, 48, 0.24) 0%, rgba(3, 17, 48, 0.66) 100%),
    linear-gradient(rgba(3, 17, 48, 0.46), rgba(3, 17, 48, 0.46));
  --thumb-scrim: linear-gradient(180deg, rgba(3, 17, 48, 0.6) 0%, rgba(3, 17, 48, 0.08) 38%,
      rgba(3, 17, 48, 0) 52%, rgba(3, 17, 48, 0.74) 100%);

  --font-sans: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
  /* 手書き風。**画像に焼かない**（AI画像の日本語は化ける。あとで直せなくなる。lp.md §2）*/
  --font-script: "Klee One", "Yu Mincho", serif;

  --container: 1200px;
  --gutter: clamp(20px, 4vw, 40px);
  --section-y: clamp(56px, 6vw, 92px);
  --shadow-card: 0 6px 24px rgba(3, 17, 48, 0.07);
  --shadow-lift: 0 14px 38px rgba(3, 17, 48, 0.14);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-body);
  font-family: var(--font-sans);
  font-size: 15.5px;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  color: var(--ink);
  margin: 0;
}

a {
  color: var(--sea-600);
}

img {
  max-width: 100%;
}

:focus-visible {
  outline: 2px solid var(--sea-600);
  outline-offset: 2px;
}

.container {
  width: min(100%, var(--container));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

.section-tint {
  background: var(--bg-tint);
}

.eyebrow {
  display: block;
  margin: 0 0 12px;
  color: var(--sea-600);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1;
}

.section-title {
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 700;
  line-height: 1.42;
}

.section-lead {
  margin: 12px 0 0;
  color: var(--ink-body);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* 暗い背景の上に置く eyebrow */
.eyebrow-on-dark {
  color: #b9d4ea;
}

/* 手書き風の一言 */
.script {
  margin: 0;
  font-family: var(--font-script);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* **行の切り方は HTML の <span> で決める。**
   幅任せに折り返させると「挑／戦」のように語の途中で切れる（2026-09-06 に実機で発生）。
   span を1行のブロックにして、その中では折り返さない。 */
.script > span {
  display: block;
  white-space: nowrap;
}

.script-lg {
  font-size: clamp(22px, 3vw, 40px);
  line-height: 1.5;
}

.script-md {
  font-size: clamp(18px, 2.2vw, 28px);
  line-height: 1.6;
}

.script-sm {
  font-size: clamp(14px, 1.5vw, 18px);
  line-height: 1.6;
}

/* ── ボタン ────────────────────────────────────────── */

/* .btn は flex なので、**中の span も flex の子になって間隔が空く**。
   文言の一部を span で包むときは display:contents で行に戻す（2026-09-06 実測）。 */
.btn > .long {
  display: contents;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 54px;
  padding-inline: 28px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s, transform 0.2s, border-color 0.2s;
}

.btn-primary {
  background: var(--sea-600);
  color: var(--white);
}

.btn-primary:hover {
  background: var(--sea-700);
  transform: translateY(-1px);
}

.btn-outline {
  border-color: var(--sea-600);
  background: var(--white);
  color: var(--sea-600);
}

.btn-outline:hover {
  background: var(--sea-050);
}

.btn-sm {
  height: 44px;
  padding-inline: 20px;
  font-size: 14px;
}

/* 暗い背景の上に置くとき */
.on-dark .btn-outline {
  border-color: rgba(255, 255, 255, 0.72);
  background: transparent;
  color: var(--white);
}

.on-dark .btn-outline:hover {
  border-color: var(--white);
  background: rgba(255, 255, 255, 0.14);
}

/* ── ヘッダー ──────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line-soft);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 74px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}

.brand img {
  width: 42px;
  height: 34px;
}

.brand-name {
  display: block;
  color: var(--navy-900);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

.brand-tagline {
  display: block;
  margin-top: 2px;
  color: var(--ink-mute);
  font-family: var(--font-script);
  font-size: 12px;
  line-height: 1.2;
}

.site-nav {
  display: flex;
  gap: 20px;
  margin-left: auto;
  font-size: 14px;
}

.site-nav a {
  color: var(--ink-body);
  text-decoration: none;
}

.site-nav a:hover {
  color: var(--sea-600);
}

/* ── S1 ヒーロー ───────────────────────────────────── */

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: clamp(500px, 60vh, 680px);
  padding-block: clamp(44px, 5vw, 76px);
  overflow: hidden;
  color: var(--white);
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--navy-900);
}

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

/* オーバーレイは2枚。**横だけだと左下の砂浜で白文字が読めなくなる** */
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hero-overlay), var(--hero-veil);
}

.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.58fr) minmax(0, 0.42fr);
  align-items: center;
  gap: clamp(24px, 3vw, 48px);
}

.hero h1 {
  color: var(--white);
  font-size: clamp(28px, 4.1vw, 52px);
  font-weight: 700;
  line-height: 1.36;
}

.hero-lead {
  max-width: 26em;
  margin: 18px 0 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.9;
}

/* モニター価格は**同じ行に「先着10社のモニター枠」を必ず添える**（lp.md §2）。
   離すと通常価格が 49,800 だと読まれる。 */
.hero-price {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 22px 0 0;
  padding: 10px 18px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.15);
  color: var(--white);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}

.hero-price b {
  font-size: 26px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.hero-price .tax {
  font-size: 12px;
  font-weight: 500;
  opacity: 0.8;
}

 /* **金額と同じ帯の中に置く**（lp.md §2）。別の行に離すと
    「通常価格が 49,800 円」と読まれる。 */
.hero-price .monitor {
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
}

.hero-points li {
  position: relative;
  padding-left: 20px;
}

.hero-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--white);
  border-bottom: 2px solid var(--white);
  transform: rotate(-45deg);
}

.hero-figure {
  position: relative;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-align: right;
}

.hero-figure .script-lg {
  color: var(--white);
  font-size: clamp(22px, 2.4vw, 34px);
  text-align: left;
  transform: translateX(-24%) rotate(-6deg);
  text-shadow: 0 2px 18px rgba(3, 17, 48, 0.55);
}

/* 人物は新規生成した背景写真に含める。別画像を重ねると足元・光・縮尺がずれる。 */

/* ── S2 デモ動画サムネ帯（4枚） ──────────────────────── */

.thumbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.thumb a {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 12px;
  color: var(--white);
  text-decoration: none;
}

.thumb img {
  width: 100%;
  height: 100%;   /* 親が aspect-ratio を持つので、ここは 100% でよい */
  object-fit: cover;
  transition: transform 0.35s ease;
}

.thumb a:hover img,
.thumb a:focus-visible img {
  transform: scale(1.03);
}

.thumb-scrim {
  position: absolute;
  inset: 0;
  background: var(--thumb-scrim);
}

.thumb .script-sm {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 13px;
  text-shadow: 0 1px 12px rgba(3, 17, 48, 0.6);
}

.thumb-cap {
  position: absolute;
  left: 16px;
  bottom: 12px;
  font-size: 13px;
  font-weight: 700;
}

/* ── S3 悩み ──────────────────────────────────────── */

.issues-wrap {
  text-align: center;
}

.issues {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 20px;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}

.issues li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.issue-icon {
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: var(--sea-050);
}

.issue-icon img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.issue-text {
  font-size: 14px;
  line-height: 1.7;
}

.issues-arrow {
  margin: 26px 0;
  color: var(--sea-600);
  font-size: 28px;
  line-height: 1;
}

.issues-answer {
  margin: 0;
  font-size: clamp(19px, 2.3vw, 28px);
  font-weight: 700;
  line-height: 1.5;
}

.issues-answer span {
  display: inline-block;
  padding-bottom: 6px;
  border-bottom: 3px solid var(--sea-600);
}

/* ── S4 強み ──────────────────────────────────────── */

.merits {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}

.merits li {
  padding: 22px 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
}

.merits h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 16px;
  line-height: 1.5;
  /* 日本語は文節で折る。「コストを抑えら／れる」のような切れ方を避ける */
  word-break: auto-phrase;
  line-break: strict;
}

.merits p {
  word-break: auto-phrase;
}

.merits h3 img {
  flex: none;
  width: 26px;
  height: 26px;
}

.merits p {
  margin: 0;
  color: var(--ink-mute);
  font-size: 13.5px;
  line-height: 1.8;
}

/* ── S4-2 費用の比較表 ─────────────────────────────── */

/* 表は**既定で閉じておく**。最初から広げると縦に長くなり、
   下のデモ作品まで届く前に離脱する（2026-09-06 本人決定）。 */
.cmp-fold {
  margin-top: 26px;
}

.cmp-fold > summary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border: 1px solid var(--sea-600);
  border-radius: 999px;
  background: var(--white);
  color: var(--sea-600);
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  transition: background 0.2s;
}

.cmp-fold > summary::-webkit-details-marker {
  display: none;
}

.cmp-fold > summary:hover {
  background: var(--sea-050);
}

/* 開いているかどうかを、矢印の向きで見せる */
.cmp-fold > summary::after {
  content: "";
  width: 9px;
  height: 9px;
  margin-left: 2px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.2s;
}

.cmp-fold[open] > summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.cmp-fold[open] > summary {
  background: var(--sea-600);
  color: var(--white);
}

.cmp-fold-hint {
  color: var(--ink-mute);
  font-size: 12px;
  font-weight: 500;
}

.cmp-fold[open] .cmp-fold-hint {
  color: rgba(255, 255, 255, 0.8);
}

/* **横スクロールは表の中だけに閉じる。** ページ本体が横に動くと事故になる */
.cmp-wrap {
  margin-top: 20px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
}

.cmp {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 14px;
}

.cmp th,
.cmp td {
  padding: 14px 18px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line-soft);
}

.cmp thead th {
  position: sticky;
  top: 0;
  background: var(--white);
  border-bottom: 2px solid var(--ink);
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}

.cmp thead th span {
  display: block;
  margin-top: 2px;
  color: var(--ink-mute);
  font-size: 11.5px;
  font-weight: 500;
}

/* 自社の列を立てる。ここだけ色を敷いて視線を止める */
.cmp thead th:last-child {
  background: var(--sea-050);
  border-bottom-color: var(--sea-600);
  color: var(--sea-700);
}

.cmp tbody th {
  width: 30%;
  color: var(--ink);
  font-weight: 700;
  word-break: auto-phrase;
}

.cmp tbody tr:last-child th,
.cmp tbody tr:last-child td {
  border-bottom: 0;
}

.cmp-shoot {
  color: var(--ink-body);
}

.cmp-ours {
  background: var(--sea-050);
  color: var(--ink);
  font-weight: 700;
}

/* 「不要」は一番言いたいところなので、色で立てる */
.cmp-ours.is-none {
  color: var(--sea-600);
}

.cmp-ours.is-included,
.cmp-ours.is-good {
  color: var(--ink);
}

/* 出典の番号 */
.cmp-src {
  margin-left: 3px;
  color: var(--ink-mute);
  font-size: 10px;
  font-weight: 700;
}

.cmp-note {
  margin-top: 18px;
  color: var(--ink-mute);
  font-size: 12.5px;
  line-height: 1.85;
}

.cmp-note p {
  margin: 0;
}

.cmp-sources {
  margin-top: 10px !important;
  font-weight: 700;
}

.cmp-sources-list {
  margin: 4px 0 0;
  padding-left: 1.4em;
}

.cmp-sources-list a {
  color: var(--ink-mute);
}

/* ── S5 デモ作品カード（5枚） ────────────────────────── */

.cases-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.cases-more {
  flex: none;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
}

.cases-more:hover {
  text-decoration: underline;
}

.cases {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

.case a {
  display: block;
  color: inherit;
  text-decoration: none;
}

.case-media {
  position: relative;
}

.case img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 10px;
  transition: transform 0.35s ease;
}

.case a:hover img,
.case a:focus-visible img {
  transform: scale(1.03);
}

.case-cat {
  display: block;
  margin: 12px 0 2px;
  color: var(--sea-600);
  font-size: 12px;
  font-weight: 700;
}

.case-title {
  display: block;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.6;
}

/* 「デモ作品」の印。**実案件と誤認させないための表示なので消さない**（lp.md §6）*/
.demo-tag {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(3, 17, 48, 0.78);
  color: var(--white);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* 打消し・前提の表示。**小さい注釈に埋めない**（景表法の打消し表示） */
.disclaimer {
  margin: 28px 0 0;
  padding: 14px 18px;
  border-left: 3px solid var(--sea-600);
  border-radius: 0 8px 8px 0;
  background: var(--white);
  color: var(--ink-body);
  font-size: 13.5px;
  line-height: 1.8;
}

.section-tint .disclaimer {
  background: var(--white);
}

/* ── S6 デモ作品ギャラリー ───────────────────────────── */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.filter {
  height: 38px;
  padding-inline: 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink-body);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.filter:hover {
  border-color: var(--sea-600);
  color: var(--sea-600);
}

.filter[aria-pressed="true"] {
  border-color: var(--sea-600);
  background: var(--sea-600);
  color: var(--white);
}

.works {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.work {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
  box-shadow: var(--shadow-card);
}

.work[hidden] {
  display: none;
}

.work-stage {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--navy-900);
  cursor: pointer;
}

/* **height: auto を書かないと HTML の height 属性が勝って aspect-ratio が無視される。**
   2026-09-06 実測。素材が 1260×720 や 720×1280 なので、そのままの高さで出て
   カードが縦に伸びていた。/movie/ でも同じ事故を起こしている。 */
.work-stage img,
.work-stage video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.work[data-orient="vertical"] .work-stage img,
.work[data-orient="vertical"] .work-stage video {
  object-fit: contain;
}

.work-stage video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.25s;
}

.work-stage.is-playing video {
  opacity: 1;
}

.work-play {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  transition: opacity 0.2s, transform 0.2s;
}

.work-play::after {
  content: "";
  margin-left: 4px;
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent var(--navy-900);
}

.work-stage:hover .work-play {
  transform: scale(1.06);
}

.work-stage.is-playing .work-play {
  opacity: 0;
}

.work-badges {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: flex;
  gap: 6px;
}

.work-badge {
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(3, 17, 48, 0.78);
  color: var(--white);
  font-size: 10px;
  font-weight: 700;
}

.work-body {
  padding: 14px 16px 16px;
}

.work-body h3 {
  margin: 0 0 6px;
  font-size: 15.5px;
  line-height: 1.5;
}

.work-body p {
  margin: 0;
  color: var(--ink-mute);
  font-size: 13px;
  line-height: 1.75;
}

.works-empty {
  margin: 24px 0 0;
  color: var(--ink-mute);
}

/* ── S7 料金 ──────────────────────────────────────── */

.plans {
  display: grid;
  /* **3カラム固定。** auto-fit + minmax(px) は幅で列数が変わって料金表が崩れる */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 18px;
  max-width: 1140px;
  margin: 30px auto 0;
  padding: 0;
  list-style: none;
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px 24px 26px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
  box-shadow: var(--shadow-card);
}

.plan.is-main {
  border: 2px solid var(--sea-600);
  box-shadow: var(--shadow-lift);
}

.plan-badge {
  position: absolute;
  top: -12px;
  left: 24px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--sea-600);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
}

.plan h3 {
  font-size: 20px;
  letter-spacing: 0.02em;
}

.plan-sub {
  margin: 4px 0 0;
  color: var(--ink-mute);
  font-size: 13px;
  line-height: 1.7;
}

.plan-price {
  margin: 14px 0 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink);
  line-height: 1;
}

.plan-price b {
  color: var(--sea-600);
  font-size: clamp(30px, 3.4vw, 40px);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.plan-price span {
  font-size: 13px;
  font-weight: 700;
}

.plan ul {
  display: grid;
  gap: 9px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}

.plan li {
  position: relative;
  padding-left: 22px;
  font-size: 13.5px;
  line-height: 1.75;
}

.plan li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.5em;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--sea-600);
  border-bottom: 2px solid var(--sea-600);
  transform: rotate(-45deg);
}

.plan .btn {
  width: 100%;
  margin-top: auto;
}

/* モニター枠は**料金表の外に帯として置く**（4枚目のプランに見せない。lp.md §4）*/
.monitor {
  margin: 26px auto 0;
  max-width: 1140px;
  padding: 26px 30px;
  border-radius: 14px;
  background: var(--sea-050);
}

.monitor h3 {
  margin: 0 0 8px;
  font-size: 19px;
  line-height: 1.5;
}

.monitor p {
  margin: 0;
  font-size: 14px;
}

.notes {
  max-width: 1140px;
  margin: 26px auto 0;
  padding-left: 1.2em;
  color: var(--ink-mute);
  font-size: 13px;
}

/* ── S8 流れ ──────────────────────────────────────── */

.flow {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.flow li {
  padding-top: 16px;
  border-top: 2px solid var(--sea-600);
}

.flow-no {
  display: block;
  color: var(--sea-600);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.flow h3 {
  margin: 6px 0 6px;
  font-size: 16px;
  line-height: 1.5;
}

.flow p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.8;
}

/* ── S9 FAQ ───────────────────────────────────────── */

.faq {
  max-width: 880px;
  margin: 30px auto 0;
}

.faq details {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  color: var(--ink);
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.6;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "＋";
  flex: none;
  color: var(--sea-600);
  font-weight: 700;
}

.faq details[open] summary::after {
  content: "－";
}

.faq p {
  margin: 0 0 20px;
  font-size: 14.5px;
}

/* ── S10 最終CTA ──────────────────────────────────── */

.final {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: clamp(300px, 32vh, 400px);
  padding-block: clamp(52px, 6.5vw, 84px);
  overflow: hidden;
  background: var(--navy-900);
  color: var(--white);
  text-align: center;
}

.final-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.final-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.final-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--cta-overlay);
}

.final-inner {
  position: relative;
  z-index: 1;
}

.final h2 {
  color: var(--white);
  font-size: clamp(23px, 2.8vw, 33px);
  line-height: 1.5;
}

.final p {
  max-width: 46em;
  margin: 14px auto 0;
  color: rgba(255, 255, 255, 0.9);
}

.final-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 26px;
}

.final .btn-primary {
  background: var(--white);
  color: var(--sea-600);
}

.final .btn-primary:hover {
  background: var(--sea-050);
}

.final .script {
  color: rgba(255, 255, 255, 0.92);
}

/* ── S10-2 お問い合わせフォーム ─────────────────────── */

.form-wrap {
  max-width: 760px;
}

.form {
  margin-top: 28px;
}

/* 罠の欄。**display:none にしない**（自動投稿は非表示を見て避けることがある） */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.field {
  margin: 0 0 20px;
  padding: 0;
  border: 0;
}

.field > label,
.field > legend {
  display: block;
  margin-bottom: 7px;
  padding: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
}

.req {
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 4px;
  background: var(--sea-600);
  color: var(--white);
  font-size: 10.5px;
  font-weight: 700;
  vertical-align: 1px;
}

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.6;
}

.field textarea {
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--sea-600);
  outline: 2px solid var(--sea-050);
  outline-offset: 0;
}

.field .is-bad {
  border-color: #c0392b;
}

.field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 18px;
}

.radios {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.radios span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.radios label {
  font-size: 14.5px;
}

.check {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  font-weight: 400 !important;
  font-size: 13.5px !important;
  line-height: 1.8;
}

.check input {
  flex: none;
  margin-top: 5px;
  width: 18px;
  height: 18px;
  accent-color: var(--sea-600);
}

.hint {
  margin: 6px 0 0;
  color: var(--ink-mute);
  font-size: 12.5px;
  line-height: 1.8;
}

.err {
  margin: 6px 0 0;
  color: #c0392b;
  font-size: 12.5px;
  font-weight: 700;
}

.btn-submit {
  width: 100%;
  margin-top: 6px;
}

.form-status {
  margin: 12px 0 0;
  font-size: 13.5px;
  font-weight: 700;
}

.form-status.is-bad {
  color: #c0392b;
}

/* 送信できたときは、フォームを消してここだけ出す */
.form-done {
  margin-top: 28px;
  padding: 26px 28px;
  border: 2px solid var(--sea-600);
  border-radius: 14px;
  background: var(--sea-050);
}

.form-done h3 {
  margin: 0 0 8px;
  font-size: 19px;
}

.form-done p {
  margin: 0;
  font-size: 14.5px;
}

/* ── フッター ──────────────────────────────────────── */

.site-footer {
  padding-block: 34px;
  background: var(--white);
  border-top: 1px solid var(--line);
  color: var(--ink-mute);
  font-size: 13px;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
}

/* ── レスポンシブ ──────────────────────────────────── */

@media (max-width: 1199px) {
  /* サムネ帯は**4枚で1組**なので、3列にすると4枚目だけ余る。900pxまで4列で通す */
  .works {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cases,
  .issues,
  .merits,
  .flow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 899px) {
  .site-nav {
    display: none;
  }

  .hero-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-figure {
    display: none;
  }

  .hero-bg img {
    object-position: 70% 50%;
  }

  .hero-bg::after {
    background: var(--hero-mobile-overlay), var(--hero-veil);
  }

  .thumbs,
  .works {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .plans {
    grid-template-columns: minmax(0, 1fr);
    max-width: 520px;
  }
}

@media (max-width: 599px) {
  .thumbs,
  .works,
  .cases,
  .flow {
    grid-template-columns: minmax(0, 1fr);
  }

  .issues,
  .merits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-actions .btn,
  .final-actions .btn {
    width: 100%;
  }

  /* スマホでは屋号もボタンも折り返す。**どちらも折らせない**
     （2026-09-06 実測。「湘南AI広告／社」「無料で相談す／る」と割れていた）*/
  .brand-tagline {
    display: none;
  }

  .header-inner {
    gap: 12px;
  }

  .brand img {
    width: 34px;
    height: 28px;
  }

  .brand-name {
    font-size: 16px;
    white-space: nowrap;
  }

  .header-inner .btn-sm {
    flex: none;
    height: 40px;
    padding-inline: 14px;
    font-size: 13px;
    white-space: nowrap;
  }

  /* 長い方の文言はスマホでは出さない */
  .header-inner .btn-sm .long {
    display: none;
  }

  .monitor {
    padding: 22px 20px;
  }

  .field-row {
    grid-template-columns: minmax(0, 1fr);
  }

  /* **狭い画面では表を縦積みにする。** 横スクロールのままだと、
     一番見せたい「湘南AI広告社」の列が画面の外に出たままになる（2026-09-06 実測）。 */
  .cmp-wrap {
    overflow-x: visible;
    border: 0;
    background: transparent;
  }

  .cmp {
    min-width: 0;
  }

  .cmp thead {
    display: none;
  }

  .cmp tbody,
  .cmp tr,
  .cmp th,
  .cmp td {
    display: block;
    width: auto;
  }

  .cmp tr {
    margin-bottom: 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--white);
    overflow: hidden;
  }

  .cmp tbody th {
    width: auto;
    padding: 12px 16px 8px;
    border-bottom: 0;
    font-size: 14.5px;
  }

  .cmp tbody td {
    padding: 8px 16px 12px;
    border-bottom: 0;
  }

  .cmp tbody td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    color: var(--ink-mute);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
  }

  .cmp tbody .cmp-ours::before {
    color: var(--sea-600);
  }

  .cmp tbody .cmp-ours {
    padding-bottom: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .thumb img,
  .case img,
  .work-stage video,
  .work-play,
  .btn {
    transition: none;
  }
}