/* トップ系（index・koshigaya）の本文とフッター */
/* ===== impl examples (v3, 資料P4準拠) ===== */
.impl-examples { margin-top: 40px; }
.impl-examples__title { font-size: var(--text-h3); font-weight: 700; color: var(--ink); margin-bottom: 16px; line-height: var(--leading-heading); }
.impl-examples__title::before { content: "■"; color: var(--accent-2); font-size: 0.6em; margin-right: 10px; vertical-align: 2px; }
.impl-examples__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
.impl-card { border: 1px solid var(--line); background: #fff; padding: 18px 20px; }
.impl-card strong { display: block; font-size: var(--text-h3); color: var(--ink); margin-bottom: 6px; line-height: var(--leading-heading); }
.impl-card span { font-size: var(--text-body); color: var(--ink-2); line-height: var(--leading-body); }
.impl-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.impl-tags span { font-size: var(--text-note); color: var(--ink-2); border: 1px solid var(--line); background: #fff; padding: 5px 12px; }
.impl-tags span::before { content: "\2713"; color: var(--accent-2); margin-right: 6px; font-weight: 700; }
@media (max-width: 760px) { .impl-examples__grid { grid-template-columns: 1fr; } }



/* ============ ILLUSTRATION ============ */
/* 既定 .illust = Use-cases などの SVG スケッチ用。
   画像主役の hero/problem/value/fit/cta は .illust--photo を併用してフラット化。 */
.illust {
  position: relative;
  width: 100%;
  border: 1px dashed var(--accent-line);
  background: linear-gradient(135deg, var(--accent-soft) 0%, rgba(255, 255, 255, 0.7) 100%);
  padding: 16px;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.illust--photo {
  border: 1px solid var(--line);
  background: transparent;
  padding: 0;
  display: block;
  box-shadow: none;
}
/* ホバー時の枠不要警告: 通常の hidden は確実に display を消す（タブ切替向け） */
[hidden] { display: none !important; }
noscript { display: none !important; }
.illust__inner {
  display: block;
  width: 100%;
  height: 100%;
}
.illust__label {
  font-size: 11px; font-weight: 600;
  color: var(--accent-3);
  letter-spacing: 0.08em;
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(167,243,208,0.6);
  padding: 4px 10px; border-radius: 999px;
  margin-bottom: 12px;
  backdrop-filter: blur(4px);
}
.illust__title { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 6px; letter-spacing: -0.01em; }
.illust__desc { font-size: 12px; color: var(--ink-3); line-height: 1.65; max-width: 360px; }
.illust__sketch { opacity: 0.55; margin-bottom: 16px; color: var(--accent-3); }
.illust__img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; display: block; }


/* ============ HERO ============ */
.hero { position: relative; padding: 60px 0 80px; overflow: hidden; }
/* カバー（ファーストビュー）の基礎値。本文・ボタンの共通規則を変えても、ここは動かさない（段2） */
.hero { font-size: 16px; line-height: 1.7; }
.hero .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 16px 28px; border-radius: 3px; font-size: 15px; font-weight: 600; line-height: 1; letter-spacing: 0.01em; white-space: nowrap; transition: background 0.15s, border-color 0.15s, color 0.15s; }
.hero .btn--primary { background: var(--sub); color: #fff; }
.hero .btn--primary:hover { background: var(--sub-2); }
.hero__grid-bg {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: -1px -1px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 75%);
  opacity: 0.6; pointer-events: none;
}
.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  align-items: center;
}
.hero__copy,
.hero__visual { min-width: 0; }
.hero__eyebrow {
  display: inline-flex; align-items: center;
  font-size: 16px; font-weight: 700;
  color: var(--accent-3);
  margin-bottom: 24px;
  letter-spacing: 0.04em;
}
.hero__eyebrow::before { content: "■"; color: var(--accent-2); font-size: 0.7em; margin-right: 9px; }
.hero__h1 {
  font-size: clamp(30px, calc(3.8vw - 6px), 40px); line-height: 1.38; font-weight: 700;
  letter-spacing: -0.02em; color: var(--ink); margin-bottom: 24px;
}
.hero__h1 .h1-chunk { display: inline-block; }
.hero__h1 .quote { color: var(--accent-2); white-space: nowrap; }
.hero__h1 .underline { background: linear-gradient(transparent 65%, var(--accent-soft) 65%); padding: 0 4px; }
.hero__sub { font-size: 17px; color: var(--ink-2); line-height: 1.85; margin-bottom: 36px; max-width: 560px; }
.hero__cta { display: flex; gap: 12px; margin-bottom: 32px; flex-wrap: wrap; }
.hero__meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
.hero__meta-item { display: flex; align-items: center; gap: 8px; font-size: 17px; color: var(--ink-2); font-weight: 500; }
.hero__meta-item svg { color: var(--accent-2); flex-shrink: 0; }

.hero__visual {
  position: relative;
  aspect-ratio: 16 / 11;
}
.hero__visual .illust { width: 100%; height: 100%; }

/* ============ HERO COVER（トップのカバー：誰に・h1・説明文・料金・地域） ============ */
/* koshigaya.html が .hero 系のクラスを共有しているので、トップだけ .hero--cover で上書きする。
   .hero--cover 付きのルールは、下の 960px・600px の hero 用ルールより強いので、そちらを上書きする。 */
.hero.hero--cover {
  --type-strong: #222B38; /* 太字のキーワード。真っ黒より灰色に寄せる */
  --type-soft: #4A5566;   /* 細字の部分。太字より一段薄く */
  --font-head: "Noto Sans JP", "Hiragino Sans", sans-serif;
  --font-latin: "Inter", "Helvetica Neue", Arial, sans-serif;
  padding: 44px 0 56px;
  line-height: 1.75;
  font-feature-settings: normal; /* 試作どおり、本文の「palt」（かなを詰める）は使わない */
}
.hero--cover .hero__inner { gap: 40px 56px; } /* 「誰に」の行と h1 が1つの文に見えないよう、間を広げる */
.hero--cover .hero__who { grid-column: 1 / -1; }

/* 誰に：PC はタグと悩みの文を1行に、対象を次の行に */
.hero--cover .hero__who-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.hero--cover .hero__docs { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.hero--cover .hero__docs li { display: inline-flex; align-items: center; gap: 5px; font-size: 15px; font-weight: 500; color: var(--accent-3); background: var(--accent-soft); border-radius: 2px; padding: 3px 9px 3px 7px; line-height: 1.4; cursor: default; } /* 押せるボタンに見えないよう、枠線と影を付けない */
.hero--cover .hero__docs svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--accent-2); }
.hero--cover .hero__pain { font-size: 18px; font-weight: 400; color: var(--type-soft); line-height: 1.5; }
.hero--cover .hero__target { margin-top: 6px; font-family: var(--font-head); font-size: 26px; font-weight: 700; color: var(--type-strong); line-height: 1.45; }
.hero--cover .hero__target-mk { background: linear-gradient(transparent 62%, var(--accent-line) 62%); padding: 0 2px; }

/* h1：キーワードだけ太字、助詞などは細字。1行の幅が左の列の約9割に収まる大きさ（961px で 34px、1083px 以上で 40px）にして、各行を折り返さない */
.hero--cover .hero__h1 { margin: 0; font-family: var(--font-head); font-size: clamp(30px, calc(4.8vw - 12px), 40px); line-height: 1.4; font-weight: 400; letter-spacing: -0.01em; color: var(--type-soft); }
.hero--cover .hero__h1 b { font-weight: 700; color: var(--type-strong); }
.hero--cover .hero__h1-line { display: block; }
.hero--cover .hero__h1 .hero__ai { font-family: var(--font-latin); font-size: 1.14em; line-height: 1; letter-spacing: 0.01em; color: var(--accent-2); } /* 英字は和文より小さく見えるので一回り大きく */
.hero--cover .hero__h1 .hero__auto { background: linear-gradient(transparent 60%, var(--accent-line) 60%); padding: 0 3px; }
.hero--cover .hero__h1 .hero__fee { text-decoration: underline; text-decoration-color: var(--sub); text-decoration-thickness: 3px; text-underline-offset: 0.2em; } /* 価格に関わる所だけ朱色。マーカーより弱くする */

.hero--cover .hero__sub { margin: 30px 0 0; font-size: 17px; color: var(--ink-2); line-height: 1.8; max-width: 520px; }
.hero--cover .hero__cta { margin: 24px 0 0; font-feature-settings: "palt" 1; } /* ボタンは今のまま */

/* 料金：月額支援プランを主役に、試作プランとスポット相談は小さく1行で。金額は朱色 */
.hero--cover .hero__price-cap { margin-top: 20px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: var(--ink-4); }
.hero--cover .hero__price-main { margin-top: 2px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; }
.hero--cover .hero__price-name { font-size: 16px; font-weight: 700; color: var(--ink-2); }
.hero--cover .hero__price-val { font-size: 22px; font-weight: 700; color: var(--sub); font-variant-numeric: tabular-nums; }
.hero--cover .hero__price-others { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 2px 18px; font-size: 14px; color: var(--ink-3); }
.hero--cover .hero__price-others b { color: var(--sub); font-weight: 700; }
.hero--cover .hero__area { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 15px; font-weight: 500; color: var(--ink-2); }
.hero--cover .hero__area > span { display: inline-flex; align-items: center; gap: 6px; }
.hero--cover .hero__area svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--accent-2); }

/* 写真：今の画像のまま、角を 14px 丸める */
.hero--cover .hero__visual { max-width: 100%; border-radius: 14px; overflow: hidden; }
.hero--cover .hero__visual .illust { border: 0; border-radius: 0; }

/* 幅 961px〜1010px：左の列が狭く、説明文の1行目（17px で約441px）が収まらず4行になるので、16px にして1行目を収める */
@media (min-width: 961px) and (max-width: 1010px) {
  .hero--cover .hero__sub { font-size: 16px; }
}

/* 幅 960px 以下：1列に積む（今と同じ）。h1 は 36px */
@media (max-width: 960px) {
  .hero--cover .hero__h1 { font-size: 36px; }
}

/* スマホ幅（760px 以下）：中央寄せの1列。「誰に」→ h1 → 説明文 → ボタン → 料金 → 地域 → 写真 */
@media (max-width: 760px) {
  .hero.hero--cover { padding: 32px 0 44px; text-align: center; }
  .hero--cover .hero__inner { gap: 28px; text-align: center; }
  .hero--cover .hero__copy { display: block; }
  .hero--cover .hero__who-row { flex-direction: column; gap: 10px; }
  .hero--cover .hero__docs { justify-content: center; gap: 6px; }
  .hero--cover .hero__docs li { font-size: 13px; padding: 3px 7px 3px 6px; gap: 3px; }
  .hero--cover .hero__docs svg { width: 13px; height: 13px; }
  .hero--cover .hero__pain { font-size: 15px; }
  .hero--cover .hero__target { margin-top: 2px; font-size: 19px; }
  .hero--cover .hero__h1 { font-size: clamp(20px, calc((100vw - 42px) / 13.4), 30px); line-height: 1.42; letter-spacing: 0; }
  .hero--cover .hero__sub { margin-top: 30px; max-width: 100%; font-size: 15px; text-align: left; }
  .hero--cover .hero__sub br { display: none; }
  .hero--cover .hero__cta { margin-top: 22px; justify-content: center; }
  .hero--cover .hero__cta .btn { width: auto; min-height: 56px; padding: 14px 28px; font-size: 13px; white-space: normal; line-height: 1.4; text-align: center; }
  .hero--cover .hero__cta .btn__arrow { display: none; }
  .hero--cover .hero__price-cap { margin-top: 18px; }
  .hero--cover .hero__price-main { justify-content: center; gap: 0 10px; }
  .hero--cover .hero__price-name { font-size: 14px; }
  .hero--cover .hero__price-val { font-size: 18px; }
  .hero--cover .hero__price-others { justify-content: center; gap: 0 12px; font-size: 12.5px; }
  .hero--cover .hero__area { justify-content: center; gap: 2px 14px; font-size: 13px; }
  .hero--cover .hero__area svg { width: 14px; height: 14px; }
  .hero--cover .hero__visual { aspect-ratio: 4 / 3; }
}

/* ============ STRIP (3点訴求) ============ */
.strip {
  border-top: none;
  border-bottom: none;
  background: var(--accent-3);
  padding: 22px 0;
}
.strip__inner {
  display: flex; align-items: center; gap: 56px;
  justify-content: center; flex-wrap: wrap;
}
.strip__item {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--text-body); color: #fff; font-weight: 600;
}
.strip__item svg { color: #6EE7B7; flex-shrink: 0; }
.strip__divider { width: 1px; height: 20px; background: rgba(255, 255, 255, 0.28); }

/* ============ SECTION HEAD ============ */
/* 節見出しの形は components/content.css に共通化。英字の小見出しは出さない */
.section-head__eyebrow { display: none; /* v2: 英字eyebrow廃止、■マーカーへ */ }

/* ============ PROBLEMS ============ */
.problem-wrap { display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px; align-items: stretch; }
.problem-illust { aspect-ratio: 4 / 5; align-self: center; width: 90%; margin: 0 auto; }
.problems { display: flex; flex-direction: column; gap: 16px; }
.problem-card {
  background: #fff; border: 1px solid var(--line); border-radius: 0;
  padding: 26px 30px; position: relative; transition: border-color 0.2s;
  display: block;
}
.problem-card:hover { border-color: var(--accent-2); }
.problem-card__num { display: none; /* v2: 非シーケンス内容の連番マーカー廃止 */ }
.problem-card__quote { font-size: var(--text-h3); font-weight: 600; line-height: var(--leading-heading); color: var(--ink); margin-bottom: 8px; letter-spacing: -0.01em; }
.problem-card__desc { font-size: var(--text-body); color: var(--ink-2); line-height: var(--leading-body); }

/* ============ VALUE GRID ============ */
.value-wrap { display: grid; grid-template-columns: 1fr; gap: 48px; }
.value-illust { aspect-ratio: 16 / 6; }
.values {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden;
}
.value-card { background: #fff; padding: 36px 32px; transition: background 0.2s; }
.value-card:hover { background: var(--bg-soft); }
.value-card__icon {
  width: 44px; height: 44px;
  border: none; border-radius: 2px;
  display: grid; place-items: center;
  color: #fff; margin-bottom: 24px;
  background: var(--accent-2);
}
.value-card__title { font-size: var(--text-h3); font-weight: 700; color: var(--ink); margin-bottom: 12px; letter-spacing: -0.01em; line-height: var(--leading-heading); }
.value-card__desc { font-size: var(--text-body); color: var(--ink-2); line-height: var(--leading-body); }

/* Chat card (now inside Value section) */
.chat-card-wrap {
  max-width: 640px;
  margin: 0 auto 48px;
}
.chat-card-wrap__label {
  font-size: var(--text-h3);
  font-weight: 700;
  color: var(--ink);
  text-align: center;
  margin-bottom: 16px;
  letter-spacing: 0.02em;
  line-height: var(--leading-heading);
}
.chat-card {
  background: #fff;
  border: 1px solid var(--line-strong);
  border-top: 2px solid var(--accent-2);
  border-radius: 0;
  box-shadow: none;
  padding: 28px;
}
.chat-card__header {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 16px; border-bottom: 1px solid var(--line); margin-bottom: 20px;
}
.chat-card__title { font-size: var(--text-note); font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.chat-card__dots { display: flex; gap: 5px; }
.chat-card__dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.chat-msg { display: flex; gap: 12px; margin-bottom: 16px; align-items: flex-start; }
.chat-msg__avatar {
  width: 32px; height: 32px; border-radius: 2px; flex-shrink: 0;
  display: grid; place-items: center; font-size: var(--text-note); font-weight: 600;
}
.chat-msg__avatar--user { background: var(--bg-soft-2); color: var(--ink-2); border: 1px solid var(--line-strong); }
.chat-msg__avatar--ai { background: var(--accent-2); color: #fff; }
.chat-msg__bubble {
  background: var(--bg-soft); padding: 14px 16px; border-radius: 3px;
  font-size: var(--text-body); line-height: var(--leading-body); color: var(--ink-2);
  border: 1px solid var(--line); max-width: 85%;
}
.chat-msg__bubble--ai { background: #fff; border-color: var(--line-strong); }
.chat-msg__bubble strong { color: var(--accent-2); font-weight: 600; }

/* ============ USE CASES ============ */
.usecases-wrap { display: grid; grid-template-columns: 1fr; gap: 48px; }
.usecases { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; align-items: start; }
.cases-index {
  margin-top: 40px;
  background: #fff;
  border: 1px solid var(--line);
  padding: 24px 28px;
}
.cases-index__title { margin: 0 0 18px; font-size: var(--text-h3); font-weight: 700; color: var(--ink); letter-spacing: 0.02em; line-height: var(--leading-heading); }
.cases-index__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px 24px; }
.cases-index__cat-title { margin: 0 0 8px; padding: 0 0 7px; font-size: var(--text-note); font-weight: 700; letter-spacing: 0.08em; color: var(--accent-2); border-bottom: 1px solid var(--line); }
.cases-index__cat ul { list-style: none; margin: 0; padding: 0; }
.cases-index__cat li + li { margin-top: 2px; }
.cases-index__cat a {
  display: block; padding: 8px 0; font-size: var(--text-body); color: var(--ink-2);
  text-decoration: none; line-height: 1.45;
}
.cases-index__cat a::before { content: "\203A\00a0"; color: var(--ink-4); }
.cases-index__cat a:hover { color: var(--accent-2); text-decoration: underline; }
.cases-index__cat a:hover::before { color: var(--accent-2); }
.impl-tags-label { margin: 36px 0 10px; font-size: var(--text-note); font-weight: 600; color: var(--ink-3); letter-spacing: 0.04em; text-align: center; }
.usecase {
  background: #fff; border: 1px solid var(--line); border-top: 2px solid var(--accent-2); border-radius: 0;
  padding: 0; position: relative; transition: border-color 0.18s; overflow: hidden;
  display: flex; flex-direction: column; height: 100%;
}
.usecase:hover { border-color: var(--accent-2); }
.usecase__media { display: none; }
.usecase__thumb {
  width: 56px; height: 56px; flex-shrink: 0;
  border-radius: 2px;
  background: var(--accent-2);
  border: none;
  display: grid; place-items: center;
  color: #fff;
}
.usecase__thumb svg { width: 34px !important; height: 34px !important; margin: 0 !important; opacity: 1; color: #fff; stroke-width: 2.6; }
.usecase__heading { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; padding-top: 1px; }
.usecase__body { padding: 22px 22px; display: flex; flex-direction: column; flex: 1; }
.usecase__head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.usecase__tag { font-size: var(--text-note); font-weight: 700; color: var(--accent-3); background: #fff; border: 1px solid var(--accent-2); padding: 2px 8px; border-radius: 2px; letter-spacing: 0.06em; }
.usecase__icon { width: 28px; height: 28px; color: var(--ink-2); display: grid; place-items: center; }
.usecase__title { font-size: var(--text-h3); font-weight: 700; color: var(--ink); margin: 0; letter-spacing: -0.01em; line-height: var(--leading-heading); }
.usecase__desc { font-size: var(--text-body); color: var(--ink-2); line-height: var(--leading-body); margin-bottom: 16px; }
.usecase__highlight { margin: 0 0 16px; }
.usecase__highlight-label {
  display: block; font-size: var(--text-note); font-weight: 600; color: var(--ink-4);
  letter-spacing: 0.08em; margin-bottom: 4px;
}
.usecase__highlight-value {
  font-size: var(--text-h3); font-weight: 700; color: var(--sub);
  line-height: var(--leading-heading); letter-spacing: -0.01em;
}
.usecase__pain {
  margin: 0 0 14px;
  font-size: var(--text-body);
  color: var(--ink-2);
  line-height: 1.5;
  letter-spacing: 0.005em;
  
  
  
}
.usecase__proposal {
  font-size: var(--text-body);
  color: var(--ink);
  line-height: 1.75;
  margin-bottom: 14px;
  padding: 12px 14px;
  position: relative;
  background: var(--accent-soft);
  border-left: 3px solid var(--accent-2);
}
.usecase__proposal::before { content: none; }
.usecase__proposal-label {
  display: block;
  font-size: var(--text-note);
  font-weight: 700;
  color: var(--accent-2);
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}
.usecase__more {
  display: inline-flex; align-items: center; gap: 6px;
  align-self: flex-end;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  width: 100%;
  justify-content: flex-end;
  font-size: var(--text-body); font-weight: 700; color: var(--accent-2);
  text-decoration: none; letter-spacing: 0.01em;
}
.usecase__more:hover { text-decoration: underline; }
.usecase__more svg { flex-shrink: 0; }

/* ============ FIT ============ */
.fit { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; }
.fit-list { list-style: none; display: flex; flex-direction: column; gap: 16px; }
.fit-item {
  display: flex; gap: 16px; align-items: flex-start;
  background: #fff; border: 1px solid var(--line); border-radius: 0;
  padding: 20px 22px;
}
.fit-item__check {
  width: 22px; height: 22px; border-radius: 0;
  background: none; border: none;
  color: var(--accent-2); display: grid; place-items: center; flex-shrink: 0; margin-top: 3px;
}
.fit-item__content strong { display: block; font-size: var(--text-h3); font-weight: 700; color: var(--ink); margin-bottom: 4px; letter-spacing: -0.01em; line-height: var(--leading-heading); }
.fit-item__content span { font-size: var(--text-body); color: var(--ink-2); line-height: var(--leading-body); }
.fit-visual { aspect-ratio: 4 / 5; }

/* ============ PRICING ============ */
.pricing-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.pricing-grid--monthly { grid-template-columns: repeat(3, 1fr); }
.price-card {
  background: #fff; border: 1px solid var(--line); border-radius: 0;
  padding: 32px 28px; position: relative;
  display: flex; flex-direction: column;
  transition: all 0.2s ease;
}
.price-card:hover { border-color: var(--line-strong); }
.price-card--featured {
  border-color: var(--accent-2);
  border-top-width: 2px;
  box-shadow: none;
}
.price-card--featured::before {
  content: "おすすめ";
  position: absolute; top: -2px; right: 24px;
  background: var(--sub); color: #fff;
  font-size: var(--text-note); font-weight: 700; letter-spacing: 0.1em;
  padding: 5px 12px; border-radius: 0;
}
.price-card__head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.price-card__type { font-size: var(--text-note); font-weight: 700; color: var(--accent-3); background: #fff; border: 1.5px solid var(--accent-3); padding: 2px 9px; border-radius: 2px; letter-spacing: 0.08em; align-self: flex-start; margin-bottom: 14px; }
.price-card__head .price-card__type { margin-bottom: 0; }
.price-card__badge { font-size: var(--text-note); font-weight: 700; letter-spacing: 0.04em; color: #fff; background: var(--sub); padding: 3px 9px; border-radius: 2px; }
.price-card__name { font-size: var(--text-h3); font-weight: 700; color: var(--ink); margin-bottom: 6px; letter-spacing: -0.01em; line-height: var(--leading-heading); }
.price-card__tag { font-size: var(--text-body); color: var(--ink-3); margin-bottom: 24px; }
.pricing-grid:not(.pricing-grid--monthly) .price-card__name { min-height: 1.5em; }
.pricing-grid:not(.pricing-grid--monthly) .price-card__tag { min-height: 2.8em; }
.price-card__tag:has(+ .price-card__quote) { margin-bottom: 0; }
.price-card__cta { align-self: flex-start; margin-top: auto; }
.price-card__was { margin: 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 22px; font-weight: 700; color: var(--ink-3); line-height: 1.2; }
.price-card__was s { font-family: "Inter", sans-serif; text-decoration: line-through; text-decoration-thickness: 2px; }
.price-card__was span { display: block; margin-top: 8px; font-size: var(--text-note); font-weight: 700; color: var(--sub); letter-spacing: 0.04em; }
.price-card__amount { display: flex; align-items: baseline; gap: 2px; padding-top: 20px; border-top: 1px solid var(--line); margin-bottom: 4px; }
.price-card__amount--monitor { padding-top: 4px; border-top: none; }
.price-card__note { font-size: var(--text-note); color: var(--ink-3); margin: 0 0 4px; line-height: 1.6; }
.trial__note { margin-top: 8px; font-size: var(--text-note); color: var(--ink-3); line-height: 1.6; }
.monitor-note { margin: 20px 0 0; padding: 16px 22px; border: 1px solid var(--line); border-radius: 0; background: var(--bg-soft); }
.monitor-note__title { margin: 0 0 8px; font-size: var(--text-body); font-weight: 700; color: var(--ink-2); }
.monitor-note ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 28px; }
.monitor-note li { display: flex; gap: 10px; font-size: var(--text-note); line-height: 1.6; color: var(--ink-2); }
.monitor-note b { flex-shrink: 0; min-width: 3em; font-weight: 700; color: var(--sub); }
@media (max-width: 760px) { .monitor-note ul { grid-template-columns: 1fr; } }
.price-card__monitor { list-style: none; margin: 0 0 16px; padding: 12px 14px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 0; display: flex; flex-direction: column; gap: 6px; }
.price-card__monitor li { display: flex; gap: 10px; font-size: var(--text-note); line-height: 1.6; color: var(--ink-2); }
.price-card__monitor b { flex-shrink: 0; min-width: 3em; font-weight: 700; color: var(--sub); }
.price-card__amount-yen { font-size: 18px; color: var(--ink-2); font-weight: 600; }
.price-card__amount-num { font-family: "Inter", sans-serif; font-size: 38px; font-weight: 700; color: var(--sub); letter-spacing: -0.03em; line-height: 1; }
.price-card__amount-unit { font-size: var(--text-note); color: var(--ink-3); margin-left: 4px; }
.price-card__tax { font-size: var(--text-note); color: var(--ink-3); margin-bottom: 24px; }
.pricing-disclaimer { font-size: var(--text-note); color: var(--ink-3); text-align: center; margin-top: 28px; }
.price-card__specs { list-style: none; display: flex; flex-direction: column; gap: 10px; padding-bottom: 20px; border-bottom: 1px dashed var(--line); margin-bottom: 16px; }
.price-card__specs li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--text-body); color: var(--ink-2); line-height: var(--leading-body); }
.price-card__specs li svg { color: var(--accent-2); flex-shrink: 0; margin-top: 3px; }
.price-card__quote { font-size: var(--text-body); color: var(--ink-2); line-height: var(--leading-body); flex: 1; margin-bottom: 20px; padding: 2px 0 2px 14px; background: none; border-radius: 0; border-left: 2px solid var(--line-strong); }

.pricing-notes {
  margin-top: 48px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
}
.pricing-notes__title { font-size: var(--text-body); font-weight: 700; color: var(--ink); margin-bottom: 16px; letter-spacing: 0.02em; }
.pricing-notes__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 32px; list-style: none; }
.pricing-notes__list li { font-size: var(--text-body); color: var(--ink-2); line-height: 1.7; padding-left: 18px; position: relative; }
.pricing-notes__list li::before {
  content: ""; position: absolute; left: 0; top: 10px;
  width: 6px; height: 6px; border-radius: 0;
  background: var(--accent-2);
}

/* ============ FAQ ============ */
.faq { max-width: var(--content-max); margin: 0; border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__question {
  width: 100%; text-align: left; padding: 24px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  font-size: var(--text-h3); font-weight: 700; color: var(--ink); letter-spacing: -0.01em; transition: color 0.15s;
  line-height: var(--leading-heading);
}
.faq__question:hover { color: var(--accent-2); }
.faq__q-text { display: flex; gap: 14px; align-items: center; }
.faq__q-mark { color: var(--accent-2); font-family: "Inter", sans-serif; font-weight: 700; font-size: var(--text-h3); width: auto; flex-shrink: 0; min-width: 30px; }
.faq__icon { flex-shrink: 0; color: var(--ink-3); transition: transform 0.2s ease; }
.faq__item--open .faq__icon { transform: rotate(45deg); color: var(--accent-2); }
.faq__answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.faq__item--open .faq__answer { max-height: 500px; }
.faq__a-content { padding: 0 0 24px 44px; font-size: var(--text-body); color: var(--ink-2); line-height: var(--leading-body); }

/* ============ FINAL CTA ============ */
.final-cta {
  background: #047857; color: #fff;
  padding: 0; position: relative; overflow: hidden;
}
.final-cta__inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: stretch;
  min-height: 360px;
}
.final-cta__copy {
  padding: 80px 64px 80px 0;
  position: relative; z-index: 2;
}
.final-cta__copy::before { content: none; /* v2: 方眼テクスチャ撤去 */ }
.final-cta__title { font-size: var(--text-h2); font-weight: 700; line-height: var(--leading-heading); letter-spacing: -0.02em; margin-bottom: 20px; position: relative; }
.final-cta__sub { font-size: var(--text-lead); color: rgba(255, 255, 255, 0.82); margin-bottom: 32px; line-height: 1.85; position: relative; }
.final-cta__buttons { display: flex; gap: 12px; margin-bottom: 16px; position: relative; flex-wrap: wrap; }
.final-cta .btn--primary { background: var(--sub); color: #fff; box-shadow: none; }
.final-cta .btn--primary:hover { background: var(--sub-2); }
.final-cta .btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.32); }
.final-cta .btn--ghost:hover { border-color: rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.08); }
.final-cta__note { font-size: var(--text-note); color: rgba(255, 255, 255, 0.65); position: relative; }
.final-cta__visual { position: relative; }
.final-cta__visual .illust { width: 100%; height: 100%; border-radius: 0; box-shadow: none; }
.final-cta__visual .illust__img { border-radius: 0; }

/* ============ ABOUT ============ */
.about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: stretch;
}
@media (max-width: 900px) {
  .about__grid { grid-template-columns: 1fr; gap: 24px; }
}
.about__profile,
.about__cases {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 32px;
  box-shadow: none;
  display: flex;
  flex-direction: column;
}
.about__role {
  display: inline-block;
  align-self: flex-start;
  font-size: var(--text-note);
  font-weight: 700;
  color: #fff;
  background: var(--accent-2);
  border: none;
  padding: 4px 12px;
  border-radius: 2px;
  letter-spacing: 0.08em;
  margin-bottom: 16px;
}
.about__name {
  font-size: var(--text-h3);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: var(--leading-heading);
  margin-bottom: 4px;
}
.about__name-sub {
  font-size: var(--text-note);
  color: var(--ink-3);
  margin-bottom: 24px;
  letter-spacing: 0.02em;
}
.about__bio-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.about__bio-list li {
  position: relative;
  padding-left: 22px;
  font-size: var(--text-body);
  color: var(--ink-2);
  line-height: var(--leading-body);
}
.about__bio-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.65em;
  width: 6px; height: 6px;
  background: var(--accent-2);
  border-radius: 0;
}
.about__stance {
  font-size: var(--text-body);
  color: var(--ink-2);
  line-height: var(--leading-body);
  padding-top: 20px;
  border-top: 1px solid var(--line);
  margin-top: auto;
}
.about__cases-title {
  font-size: var(--text-h3);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.02em;
  margin-bottom: 10px;
  line-height: var(--leading-heading);
}
.about__cases-sub {
  font-size: var(--text-body);
  color: var(--ink-2);
  line-height: var(--leading-body);
  margin-bottom: 20px;
}
.about__chips {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.about__chip {
  font-size: var(--text-note);
  font-weight: 500;
  color: var(--ink-2);
  background: #fff;
  border: 1px solid var(--line-strong);
  padding: 6px 14px;
  border-radius: 2px;
  letter-spacing: 0.01em;
}
/* About v2: timeline + lead */
.about__layout {
  max-width: var(--content-max);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.about__layout .about__profile { display: flow-root; }
.about__head { margin-bottom: 28px; }
.about__portrait {
  float: left;
  width: 200px;
  margin: 0 28px 12px 0;
}
.about__portrait img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}
.about__persona {
  font-size: var(--text-body);
  color: var(--ink-2);
  line-height: var(--leading-body);
  margin-bottom: 12px;
}
.about__hobby {
  font-size: var(--text-body);
  color: var(--ink-3);
  line-height: var(--leading-body);
}
@media (max-width: 640px) {
  .about__portrait { float: none; display: block; width: 180px; margin: 0 auto 20px; }
}
.about__role.about__role--lg {
  font-size: var(--text-body);
  padding: 8px 18px;
  margin-bottom: 18px;
}
.about__lead {
  margin-bottom: 28px;
}
.about__lead p {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--ink-2);
  letter-spacing: 0.01em;
}
.about__lead p + p { margin-top: 14px; }
.about__timeline {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
}
.about__timeline-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
@media (max-width: 640px) {
  .about__timeline-row { grid-template-columns: 1fr; gap: 6px; padding: 18px 0; }
}
.about__timeline-year {
  font-family: "Inter", monospace;
  font-size: var(--text-note);
  font-weight: 600;
  color: var(--accent-3);
  letter-spacing: 0.06em;
  padding-top: 2px;
  white-space: nowrap;
}
.about__timeline-body { margin: 0; }
.about__timeline-org {
  font-size: var(--text-body);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.55;
}
.about__timeline-role {
  margin-top: 4px;
  font-size: var(--text-body);
  color: var(--ink-2);
  line-height: var(--leading-body);
}
.about__timeline-desc {
  margin-top: 10px;
  font-size: var(--text-body);
  color: var(--ink-2);
  line-height: var(--leading-body);
}

/* ============ CONTACT FORM ============ */
.contact { padding: var(--space-section) 0; background: var(--bg-soft); border-top: 1px solid var(--line); }
.contact__inner { max-width: 640px; margin: 0 auto; padding: 0 24px; }
.contact__inner--wide { max-width: 1000px; }
.contact__body { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 40px; align-items: start; }
.contact__line { position: sticky; top: 96px; background: #fff; border: 1px solid var(--line); border-top: 3px solid #06C755; border-radius: var(--radius); padding: 24px; text-align: center; }
.contact__line-title { font-size: var(--text-h3); font-weight: 700; color: var(--ink); margin-bottom: 8px; line-height: var(--leading-heading); }
.contact__line-text { font-size: var(--text-body); color: var(--ink-2); line-height: var(--leading-body); margin-bottom: 16px; word-break: auto-phrase; }
.contact__line-qr { display: block; width: 160px; height: 160px; margin: 0 auto 8px; }
.contact__line-caption { font-size: var(--text-note); color: var(--ink-3); margin-bottom: 16px; }
.contact__line-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 12px 16px; background: #06C755; color: #fff; font-size: var(--text-btn); font-weight: 700; border-radius: var(--radius); text-decoration: none; }
.contact__line-btn:hover { background: #05A847; }
@media (max-width: 860px) {
  .contact__body { grid-template-columns: 1fr; gap: 24px; }
  .contact__line { position: static; order: -1; }
  .contact__line-qr, .contact__line-caption { display: none; }
}
.contact__head { text-align: center; margin-bottom: 40px; }
.contact__sub--note { margin-top: 10px; }
.contact__eyebrow { display: none; /* v2: 英字eyebrow廃止 */ }
.contact__title { font-size: var(--text-h2); font-weight: 700; line-height: var(--leading-heading); letter-spacing: -0.01em; color: var(--ink); margin-bottom: 14px; }
.contact__title::before { content: "■"; color: var(--accent-2); font-size: 0.5em; margin-right: 12px; vertical-align: 6px; }
.contact__sub { font-size: var(--text-body); color: var(--ink-2); line-height: var(--leading-body); }
.contact__form { display: flex; flex-direction: column; gap: 22px; }
.contact__field { display: flex; flex-direction: column; gap: 8px; }
.contact__label { font-size: var(--text-form-label); font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.contact__required {
  width: 6px; height: 6px;
  background: var(--sub);
  border-radius: 0;
  flex-shrink: 0;
}
.contact__optional {
  font-size: var(--text-note); font-weight: 500;
  color: var(--ink-4); letter-spacing: 0.04em;
  padding: 2px 8px; border: 1px solid var(--line-strong);
  border-radius: 2px; margin-left: auto;
}
.contact__hint { font-size: var(--text-note); color: var(--ink-3); line-height: 1.65; }
.contact__input,
.contact__textarea {
  width: 100%;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: var(--text-input);
  line-height: 1.7;
  color: var(--ink);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.contact__textarea { min-height: 140px; resize: vertical; }
.contact__input::placeholder,
.contact__textarea::placeholder { color: var(--ink-4); }
.contact__input:focus,
.contact__textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
}
.contact__radios { display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 640px) { .contact__radios { flex-direction: row; gap: 12px; } }
.contact__radio { position: relative; flex: 1; }
.contact__radio input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px; height: 1px;
}
.contact__radio-label {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  background: #fff;
  font-size: var(--text-form-label);
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}
.contact__radio-label::before {
  content: "";
  width: 16px; height: 16px;
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
  flex-shrink: 0;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.contact__radio input:checked + .contact__radio-label {
  border-color: var(--accent-2);
  background: #fff;
  color: var(--accent-3);
  font-weight: 600;
}
.contact__radio input:checked + .contact__radio-label::before {
  border-color: var(--accent-2);
  box-shadow: inset 0 0 0 4px var(--accent-2);
}
.contact__radio input:focus-visible + .contact__radio-label {
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
}
.contact__honeypot {
  position: absolute !important;
  left: -9999px; top: -9999px;
  opacity: 0;
  width: 1px; height: 1px;
  pointer-events: none;
}
.contact__submit {
  margin-top: 8px;
  padding: 16px 28px;
  background: var(--sub);
  color: #fff;
  border: none;
  border-radius: 3px;
  font-size: var(--text-btn);
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background-color 0.15s;
  box-shadow: none;
}
.contact__submit:hover { background: var(--sub-2); }
.contact__submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; }
.contact__note { font-size: var(--text-note); color: var(--ink-4); line-height: 1.65; margin-top: 4px; text-align: center; }
.contact__status {
  margin-top: 24px;
  padding: 20px 24px;
  border-radius: 4px;
  font-size: var(--text-body);
  line-height: 1.85;
  text-align: center;
}
.contact__status--success {
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent-3);
}
.contact__status--error {
  background: #FEF2F2;
  border: 1px solid #FECACA;
  color: #B91C1C;
}

/* ============ FOOTER ============ */
.footer { background: #fff; border-top: 1px solid var(--line); padding: 64px 0 40px; }
.footer__main { display: grid; grid-template-columns: 1.5fr 0.9fr 1.9fr; gap: 56px; margin-bottom: 48px; }
.footer__brand { max-width: 320px; }
.footer__brand-desc { font-size: 13px; color: var(--ink-2); line-height: 1.7; margin-top: 16px; }
.footer__col-title { font-size: 12px; font-weight: 600; color: var(--ink); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 16px; }
.footer__links { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer__links a { font-size: 13px; color: var(--ink-2); transition: color 0.15s; display: inline-flex; align-items: center; gap: 6px; }
.footer__links a:hover { color: var(--accent-2); text-decoration: underline; text-underline-offset: 3px; }
.footer__links a:hover .footer__ext { color: var(--accent-2); }
.footer__ext { color: var(--ink-4); transition: color 0.15s; flex-shrink: 0; }
.footer__links--cases { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; row-gap: 10px; }
.footer__bottom { border-top: 1px solid var(--line); padding-top: 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.footer__copyright { font-size: 12px; color: var(--ink-4); }
.footer__legal { display: flex; gap: 24px; list-style: none; }
.footer__legal a { font-size: 12px; color: var(--ink-4); }

/* ============ RESPONSIVE ============ */
@media (max-width: 1080px) {
  .pricing-grid:not(.pricing-grid--monthly) { max-width: 720px; margin: 0 auto; }
}
@media (max-width: 1079px) {
  .pricing-grid--monthly { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
}
@media (max-width: 760px) {
  .pricing-grid { grid-template-columns: 1fr; max-width: 480px; }
}
@media (max-width: 960px) {
  .hero { padding: 64px 0 80px; }
  .hero__inner { grid-template-columns: 1fr; gap: 48px; }
  .hero__h1 { font-size: 36px; }
  .nav__links { display: none; }
  .logo__svg { height: 24px; }
  .nav .btn { padding: 8px 14px; font-size: 13px; }
  .problem-wrap, .fit { grid-template-columns: 1fr; gap: 40px; }
  .values, .usecases, .cases-index__grid { grid-template-columns: 1fr; }
  .footer__main { grid-template-columns: 1fr 1fr; gap: 32px; }
  .final-cta__title { font-size: var(--text-h2); line-height: var(--leading-heading); }
  .final-cta__inner { grid-template-columns: 1fr; }
  .final-cta__copy { padding: 64px 0; text-align: center; }
  .final-cta__buttons { justify-content: center; }
  .final-cta__visual { min-height: 240px; }
  .pricing-notes__list { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .container { padding: 0 20px; }
  .footer__main { grid-template-columns: 1fr; }
  .footer__links--cases { grid-template-columns: 1fr; }
  .strip__inner { gap: 16px; }
  .strip__divider { display: none; }
  .logo__svg { height: 18px; }
  .nav__links { display: none; }
  .hero { padding: 44px 0 64px; }
  .hero__sub br { display: none; }
  .hero__inner {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    gap: 36px;
    text-align: center;
    align-items: center;
  }
  .hero__copy {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .hero__copy,
  .hero__h1,
  .hero__sub,
  .hero__cta,
  .hero__cta .btn,
  .hero__meta {
    width: 100%;
    max-width: 100%;
  }
  .hero__sub,
  .hero__cta,
  .hero__cta .btn,
  .hero__meta,
  .hero__visual {
    max-width: 100%;
  }
  .hero__eyebrow {
    max-width: 100%;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    line-height: 1.5;
    font-size: clamp(11px, 3.8vw, 17px);
    padding: 8px 16px;
  }
  .hero__meta-item {
    font-size: clamp(12px, 3.6vw, 17px);
    white-space: normal; /* 長いサービス名が右端で切れないよう折り返す（2026-10-19） */
  }
  .hero__meta-item--wide { grid-column: 1 / -1; }
  .hero__h1 {
    font-size: clamp(20px, calc((100vw - 42px) / 13.4), 30px);
    line-height: 1.42;
    letter-spacing: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .mobile-break { display: block; }
  .hero__h1 .quote { white-space: normal; }
  .hero__h1 .underline {
    padding: 0 2px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
  .hero__sub {
    max-width: 100%;
    font-size: 15px;
    line-height: 1.85;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .hero__cta {
    width: 100%;
    justify-content: center;
  }
  .hero__cta .btn {
    width: auto;
    min-height: 56px;
    padding: 14px 28px;
    font-size: 13px;
    white-space: normal;
    line-height: 1.4;
    text-align: center;
  }
  .hero__cta .btn__arrow { display: none; }
  .hero__meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
    justify-items: center;
    text-align: left;
  }
  .hero__visual { aspect-ratio: 4 / 3; }
}

/* ============ PROBLEM NOTE (AI格差) ============ */
.problem-note {
  margin-top: 56px;
  background: var(--accent-3);
  border: none;
  border-radius: 0;
  padding: 44px 52px;
  max-width: 1000px;
  margin-left: auto; margin-right: auto;
  box-shadow: none;
  position: relative; overflow: hidden;
}
.problem-note::before { content: none; /* v2: 方眼テクスチャ撤去 */ }
.problem-note__label {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--text-h3); font-weight: 700; color: #fff;
  letter-spacing: 0.01em; margin-bottom: 16px;
  position: relative;
  width: 100%; justify-content: center;
}
.problem-note__label svg { width: 22px; height: 22px; color: var(--accent-line); flex-shrink: 0; }
.problem-note__text { font-size: var(--text-lead); line-height: 2; color: rgba(255, 255, 255, 0.88); position: relative; }
.problem-note__text strong { font-weight: 700; color: #fff; background: linear-gradient(transparent 58%, rgba(255, 255, 255, 0.22) 58%); padding: 0 3px; }
@media (max-width: 600px) {
  .problem-note { padding: 32px 26px; }
  .problem-note__label { font-size: var(--text-h3); }
  .problem-note__text { font-size: var(--text-lead); }
}

/* ============ VALUE STEPS (5ステップ) ============ */
.steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  counter-reset: step;
}
.step {
  background: #fff; border: 1px solid var(--line); border-radius: 0;
  padding: 28px 22px; position: relative; transition: all 0.2s ease;
}
.step:hover { border-color: var(--accent-2); box-shadow: none; }
.step__badge {
  width: 34px; height: 34px; border-radius: 2px;
  background: var(--accent-2); border: none;
  color: #fff; font-family: "Inter", sans-serif; font-weight: 700; font-size: 15px;
  display: grid; place-items: center; margin-bottom: 18px;
}
.step__title { font-size: var(--text-h3); font-weight: 700; color: var(--ink); margin-bottom: 10px; letter-spacing: -0.01em; line-height: var(--leading-heading); }
.step__desc { font-size: var(--text-body); color: var(--ink-2); line-height: var(--leading-body); }
.step:not(:last-child)::after {
  content: "";
  position: absolute; right: -12px; top: 36px; z-index: 2;
  width: 9px; height: 9px;
  border-top: 1.6px solid var(--line-strong);
  border-right: 1.6px solid var(--line-strong);
  transform: rotate(45deg);
}
@media (max-width: 1080px) { .steps { grid-template-columns: repeat(2, 1fr); } .step:not(:last-child)::after { display: none; } }
@media (max-width: 600px) { .steps { grid-template-columns: 1fr; } }

/* ============ 月額支援の料金案内 ============ */
.trial {
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--line); border-top: 2px solid var(--accent-2); border-radius: 0;
  padding: 24px 28px; margin-bottom: 24px; box-shadow: none;
}
.trial__main { flex: 1; min-width: min(280px, 100%); }
.trial__top { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.trial__badge { font-size: var(--text-note); font-weight: 700; color: #fff; background: var(--accent-2); border: none; padding: 3px 10px; border-radius: 2px; letter-spacing: 0.08em; }
.trial__name { font-size: var(--text-h3); font-weight: 700; color: var(--ink); letter-spacing: -0.01em; line-height: var(--leading-heading); }
.trial__price { font-family: "Inter", sans-serif; font-size: 22px; font-weight: 700; color: var(--sub); letter-spacing: -0.02em; }
.trial__price em { font-style: normal; font-size: var(--text-note); color: var(--ink-3); font-weight: 600; margin-left: 2px; }
.trial__desc { font-size: var(--text-body); color: var(--ink-2); line-height: 1.7; }
.trial__cta { flex-shrink: 0; }
@media (max-width: 640px) { .trial { flex-direction: column; align-items: stretch; } .trial__cta { width: 100%; } }

/* ============ FIT NOTE (業種) ============ */
.fit-note {
  margin-top: 18px; font-size: var(--text-note); color: var(--ink-3); line-height: 1.8;
  padding-left: 18px; position: relative;
}
.fit-note::before { content: ""; position: absolute; left: 2px; top: 0.65em; width: 7px; height: 7px; border-radius: 50%; background: var(--sage); }

/* ============ ABOUT STRENGTH (強み) ============ */
.about__strength {
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 24px; margin-bottom: 24px;
}
.about__strength-label { font-size: var(--text-h3); font-weight: 700; color: var(--ink); letter-spacing: -0.01em; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; line-height: var(--leading-heading); }
.about__strength-text { font-size: var(--text-body); color: var(--ink-2); line-height: var(--leading-body); }

/* ============ HERO BYLINE (運営者) ============ */
.hero__byline { display: flex; align-items: center; gap: 12px; margin-top: 26px; font-size: 13px; color: var(--ink-3); flex-wrap: wrap; }
.hero__byline-mark { width: 18px; height: 18px; background: var(--accent); border-radius: 50%; position: relative; flex-shrink: 0; }
.hero__byline-mark::before { content: ""; position: absolute; top: -3px; right: -3px; width: 6px; height: 6px; background: #6EE7B7; border-radius: 50%; }
.hero__byline strong { color: var(--ink-2); font-weight: 600; }
.hero__byline-sep { color: var(--line-strong); }
/* ============ SCROLL FADE-IN ============ */
.js-fade .section,
.js-fade .strip,
.js-fade .final-cta,
.js-fade .contact {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.js-fade .is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============ TRUST BOX ============ */
.trust-box {
  display: flex; gap: 16px; align-items: flex-start;
  margin-top: 20px;
  background: #fff; border: 1px solid var(--line);
  border-radius: 0;
  padding: 24px 28px;
  box-shadow: none;
}
.trust-box__icon {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 0;
  background: none;
  border: none;
  display: grid; place-items: center;
  color: var(--accent-2);
}
.trust-box__title { font-size: var(--text-h3); font-weight: 700; color: var(--ink); margin-bottom: 6px; line-height: var(--leading-heading); }
.trust-box__desc { font-size: var(--text-body); color: var(--ink-2); line-height: var(--leading-body); }
@media (max-width: 600px) {
  .trust-box { padding: 20px; }
}

/* ============ HERO CIRCLES (OGP decoration) ============ */
.hero__circles { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; display: none; /* v2: 装飾円を撤去 */ }
.hero__circle { position: absolute; border-radius: 50%; }
.hero__circle--lg { width: 380px; height: 380px; right: -80px; top: 40px; background: var(--accent-soft); opacity: 0.5; }
.hero__circle--sm { width: 200px; height: 200px; right: 120px; top: 260px; background: var(--accent-line); opacity: 0.3; }

/* ============ SOLUTION GRID ============ */
.solution-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 48px; }
.solution-card { background: #fff; border: 1px solid var(--line); border-radius: 0; padding: 28px 24px; transition: all 0.2s ease; }
.solution-card:hover { border-color: var(--accent-2); }
.solution-card__icon { width: 44px; height: 44px; border: none; border-radius: 2px; display: grid; place-items: center; color: #fff; margin-bottom: 18px; background: var(--accent-2); }
.solution-card__title { font-size: var(--text-h3); font-weight: 700; color: var(--ink); margin-bottom: 8px; letter-spacing: -0.01em; line-height: var(--leading-heading); }
.solution-card__desc { font-size: var(--text-body); color: var(--ink-2); line-height: var(--leading-body); }
@media (max-width: 600px) { .solution-grid { grid-template-columns: 1fr; } }

/* ============ FLOW STEPS ============ */
.flow-steps { display: flex; gap: 0; position: relative; max-width: none; margin: 0; }
.flow-steps::before { content: ""; position: absolute; top: 17px; left: 48px; right: 48px; height: 1px; background: var(--line-strong); z-index: 0; }
.flow-step { flex: 1; display: flex; flex-direction: column; align-items: center; position: relative; z-index: 1; padding: 0 8px; text-align: center; }
.flow-step__badge { width: 34px; height: 34px; border-radius: 2px; background: var(--accent-2); border: none; color: #fff; font-family: "Inter", sans-serif; font-weight: 700; font-size: 15px; display: grid; place-items: center; margin-bottom: 12px; }
.flow-step__title { font-size: var(--text-h3); font-weight: 700; color: var(--ink); margin-bottom: 4px; line-height: var(--leading-heading); }
.flow-step__desc { font-size: var(--text-body); color: var(--ink-2); line-height: var(--leading-body); margin-bottom: 8px; }
.flow-step__tag { display: inline-block; font-size: var(--text-note); font-weight: 700; color: var(--accent-3); background: #fff; border: 1px solid var(--accent-2); padding: 2px 8px; border-radius: 2px; letter-spacing: 0.04em; }
@media (max-width: 768px) { .flow-steps { flex-wrap: wrap; justify-content: center; gap: 24px 0; max-width: none; margin: 0; } .flow-steps::before { display: none; } .flow-step { flex: 0 0 33%; } }
@media (max-width: 480px) { .flow-step { flex: 0 0 50%; } }

/* ============ COMPARE CARDS ============ */
.compare-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.compare-card { background: #fff; border: 1px solid var(--line); border-radius: 0; padding: 28px 24px; display: flex; flex-direction: column; gap: 20px; }
.compare-card--featured { border-color: var(--accent-2); border-top-width: 2px; box-shadow: none; }
.compare-card__label { font-size: var(--text-h3); font-weight: 700; color: var(--ink); padding-bottom: 16px; border-bottom: 1px solid var(--line); line-height: var(--leading-heading); }
.compare-card--featured .compare-card__label { color: var(--accent-3); }
.compare-card__good, .compare-card__note { display: flex; flex-direction: column; gap: 8px; }
.compare-card__tag { display: inline-block; font-size: var(--text-note); font-weight: 600; padding: 3px 8px; border-radius: 2px; align-self: flex-start; letter-spacing: 0.03em; }
.compare-card__tag--good { color: #fff; background: var(--accent-2); border: none; }
.compare-card__tag--note { color: var(--ink-3); background: #fff; border: 1px solid var(--line-strong); }
.compare-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.compare-card li { font-size: var(--text-body); color: var(--ink-2); line-height: var(--leading-body); padding-left: 16px; position: relative; }
.compare-card li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 5px; height: 5px; border-radius: 0; }
.compare-card__good li::before { background: var(--accent-2); }
.compare-card__note li::before { background: var(--ink-4); }
@media (max-width: 960px) { .compare-grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; } }

/* ============ CASE STUDY (実事例・v2新設) ============ */
.case-card {
  display: grid; grid-template-columns: 1fr 300px;
  border: 1px solid var(--line); border-top: 2px solid var(--accent-2);
  background: #fff; overflow: hidden;
  max-width: 880px; margin: 0 auto;
  transition: border-color 0.15s;
}
.case-card:hover { border-color: var(--accent-2); }
.case-card:hover .case-card__more { text-decoration: underline; }
.case-card__main { padding: 30px 32px 28px; }
.case-card__kicker { font-size: var(--text-note); color: var(--ink-3); margin-bottom: 12px; }
.case-card__kicker strong { color: var(--accent-3); font-weight: 700; margin-right: 10px; }
.case-card__kicker strong::before { content: "■"; color: var(--accent-2); font-size: 0.75em; margin-right: 6px; vertical-align: 1px; }
.case-card__title { font-size: var(--text-h3); font-weight: 700; color: var(--ink); letter-spacing: -0.01em; margin-bottom: 10px; line-height: var(--leading-heading); }
.case-card__desc { font-size: var(--text-body); color: var(--ink-2); margin-bottom: 18px; line-height: var(--leading-body); max-width: 36em; }
.case-card__more { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-body); font-weight: 600; color: var(--accent-2); }
.case-card__result {
  background: var(--bg-soft); border-left: 1px solid var(--line-strong);
  padding: 26px; display: flex; flex-direction: column; justify-content: center; gap: 18px;
}
.case-card__stat { border-left: 2px solid var(--accent-2); padding-left: 14px; }
.case-card__stat-label { font-size: var(--text-note); font-weight: 600; letter-spacing: 0.04em; color: var(--ink-3); }
.case-card__stat-value { font-family: "Inter", sans-serif; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: var(--sub); }
.case-card__stat-value small { font-size: 0.5em; font-weight: 600; color: var(--ink-2); }
.case-more-note { text-align: center; margin-top: 24px; font-size: var(--text-note); color: var(--ink-3); }
@media (max-width: 720px) {
  .case-card { grid-template-columns: 1fr; }
  .case-card__result { border-left: none; border-top: 1px solid var(--line-strong); flex-direction: row; flex-wrap: wrap; gap: 20px; }
}


/* ============ RESULTS (実績先出し・v3新設) ============ */
.results { padding: 64px 0 72px; }
.results-table { border: 1px solid var(--line-strong); border-top: 2px solid var(--ink); background: #fff; }
.results-headrow { display: grid; grid-template-columns: 210px 1fr 1fr 230px; background: var(--bg-soft); border-bottom: 1px solid var(--line-strong); font-size: var(--text-table-band); font-weight: 700; letter-spacing: 0.08em; color: var(--ink-3); }
.results-headrow > div { padding: 9px 20px; border-left: 1px dashed var(--line); }
.results-headrow > div:first-child { border-left: none; }
.results-row { display: grid; grid-template-columns: 210px 1fr 1fr 230px; border-bottom: 1px solid var(--line); }
.results-row:last-child { border-bottom: none; }
.results-cell { padding: 20px; font-size: var(--text-table-body); line-height: 1.7; color: var(--ink-2); border-left: 1px dashed var(--line); }
.results-cell:first-child { border-left: none; font-weight: 700; color: var(--ink); font-size: var(--text-table-body); line-height: 1.55; }
.results-cell--mobile-label { display: none; font-size: var(--text-note); font-weight: 600; letter-spacing: 0.08em; color: var(--ink-4); margin-bottom: 4px; }
.results-effect { font-family: "Inter", sans-serif; font-size: 21px; font-weight: 700; color: var(--sub); letter-spacing: -0.02em; line-height: 1.3; }
.results-effect small { display: block; font-family: var(--font-sans); font-size: var(--text-note); font-weight: 500; color: var(--ink-3); letter-spacing: 0; margin-top: 4px; }
.results-effect--plain { font-family: var(--font-sans); font-size: var(--text-table-body); color: var(--ink); letter-spacing: 0; }
.results-note { font-size: var(--text-note); color: var(--ink-4); margin-top: 12px; line-height: 1.7; }
.midcta { border: 1px solid var(--line); border-top: 2px solid var(--sub); background: #fff; margin-top: 32px; padding: 24px 28px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.midcta__text { font-size: var(--text-lead); font-weight: 600; color: var(--ink); line-height: 1.6; }
@media (max-width: 900px) {
  .results-headrow { display: none; font-size: var(--text-table-band); }
  .results-row { grid-template-columns: 1fr; }
  .results-cell { border-left: none; border-top: 1px dashed var(--line); padding: 14px 20px; font-size: var(--text-table-body); }
  .results-cell:first-child { border-top: none; padding-top: 20px; font-size: var(--text-table-body); }
  .results-cell--mobile-label { display: block; font-size: var(--text-note); }
  .midcta { flex-direction: column; align-items: stretch; text-align: center; }
}


.aw-band { padding: 0 0 40px; }
.aw-mini { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.aw-mini__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 16px; padding: 14px 20px; background: #f6faf7; border: 1px solid var(--line); border-radius: 0; color: var(--ink); text-decoration: none; transition: border-color 0.15s; }
.aw-mini__item:hover { border-color: var(--accent-2); }
.aw-mini__text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; }
.aw-mini__label { flex-basis: 100%; font-size: var(--text-note); font-weight: 700; letter-spacing: 0.06em; color: var(--accent-2); }
.aw-mini__name { font-size: var(--text-h3); font-weight: 700; line-height: var(--leading-heading); }
.aw-mini__lead { font-size: var(--text-body); color: var(--ink-2); line-height: var(--leading-body); }
.aw-mini__more { font-size: var(--text-body); font-weight: 600; color: var(--accent-2); white-space: nowrap; }
@media (max-width: 760px) { .aw-mini { grid-template-columns: 1fr; } }

/* ============ トップの3セクション（よくあるお悩み・提供サービス・スモラボの強み） ============
   クラスはすべて tp- を付け、トップだけに効かせる（越谷ページの同名クラスには触れない） */
.tp-sec { --type-strong: #222B38; --type-soft: #4A5566; padding-block: 72px; word-break: auto-phrase; line-break: strict; color: var(--type-soft); }
.tp-sec .container > :not(.section-head) { max-width: 1040px; margin-inline: auto; }
.tp-sec .section-head { margin-bottom: 40px; }
.tp-sec .section-head__title { font-feature-settings: "palt"; color: var(--type-strong); }
.tp-ck { display: inline-block; }

/* お悩み：枠なし。縦線で区切る */
.tp-sec--value { border-bottom: 0; z-index: 2; }
.tp-vb-list { list-style: none; margin-block: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tp-vb-item { padding: 4px 24px; border-left: 1px solid var(--line); }
.tp-vb-item:first-child { border-left: 0; padding-left: 0; }
.tp-vb-item:last-child { padding-right: 0; }
.tp-vb-icon { width: 56px; height: 56px; margin-bottom: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 6px 18px -6px rgba(15,23,42,.12); color: var(--accent-2); display: grid; place-items: center; }
.tp-vb-ctx { margin: 0 0 8px; font-size: 16px; line-height: 1.6; color: var(--type-soft); }
.tp-vb-main { margin: 0; font-feature-settings: "palt"; font-size: 25px; font-weight: 700; line-height: 1.5; letter-spacing: -0.015em; color: var(--type-strong); }
/* お悩みから提供サービスへつなぐ三角 */
.tp-sec--value::after { content: ""; position: absolute; left: 50%; bottom: -26px; transform: translateX(-50%); z-index: 2; border-left: 44px solid transparent; border-right: 44px solid transparent; border-top: 26px solid var(--bg-soft); }

/* 提供サービス：濃い緑の帯 */
.tp-band { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: 28px 32px; align-items: start; padding: 36px 44px 30px; margin-bottom: 24px; background: var(--accent-3); border-radius: 0; box-shadow: none; color: #fff; }
.tp-band__label { display: inline-block; margin: 0 0 12px; padding: 4px 14px; font-size: 14px; font-weight: 700; color: var(--accent-3); background: #fff; border-radius: 2px; }
.tp-band__name { margin: 0; font-feature-settings: "palt"; font-size: 38px; font-weight: 700; line-height: 1.35; letter-spacing: -0.02em; color: #fff; }
.tp-band__name .tp-bn1 { display: block; }
.tp-band__name .tp-bn2 { display: block; font-size: 0.7em; font-weight: 500; letter-spacing: 0.04em; color: #E9F7F0; margin-top: 2px; }
.tp-band__lead { margin: 10px 0 0; font-size: 17px; line-height: 1.7; color: #F4FBF7; }
.tp-band__tags { padding-top: 0; display: flex; flex-direction: column; gap: 14px; align-self: center; }
.tp-bt { display: grid; grid-template-columns: 4.6em minmax(0, 1fr); gap: 4px 12px; align-items: start; }
.tp-bt__label { padding-top: 7px; font-size: 15px; font-weight: 700; letter-spacing: .04em; color: #fff; }
.tp-bt__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tp-bt__list li { font-size: 16px; font-weight: 500; line-height: 1.4; padding: 6px 13px; color: var(--accent-3); background: rgba(255,255,255,.9); border-radius: 3px; cursor: default; }
.tp-band__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.22); }
.tp-badges { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; flex: 1 1 auto; }
.tp-badges li { display: inline-flex; align-items: baseline; gap: 2px; line-height: 1.4; border-radius: 2px; }
.tp-badge-main { padding: 12px 22px; font-size: 16px; font-weight: 700; color: var(--type-strong); background: #fff; border-radius: 2px; }
.tp-badge-main .tp-yen { font-size: 24px; letter-spacing: -0.01em; color: var(--sub); }
.tp-badge-main small { font-size: 14px; font-weight: 700; color: var(--sub); }
.tp-badges li.tp-badge-sub { align-items: center; gap: 8px; padding: 8px 14px; font-size: 14px; font-weight: 500; color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28); }
.tp-bi { display: inline-grid; place-items: center; color: #fff; }
.tp-band__link { margin-left: auto; font-size: 16px; font-weight: 700; color: #fff; text-decoration: underline; text-underline-offset: 4px; white-space: nowrap; }

.tp-sc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto auto 1fr auto; column-gap: 20px; }
.tp-sc { grid-row: span 5; display: grid; grid-template-rows: subgrid; row-gap: 0; padding: 26px 24px 22px; background: #fff; border: 1px solid #E2E8F0; border-top: 3px solid var(--accent-2); border-radius: 0; box-shadow: none; }
.tp-px-icon { width: 44px; height: 44px; margin-bottom: 14px; border-radius: 2px; background: var(--accent-soft); color: var(--accent-2); display: grid; place-items: center; }
.tp-sc-name { margin: 0; font-size: 21px; font-weight: 700; line-height: 1.45; letter-spacing: -0.01em; color: var(--type-strong); }
.tp-sc-lead { margin: 8px 0 0; font-size: 15px; line-height: 1.75; color: var(--type-soft); }
.tp-tg { list-style: none; margin: 16px 0 0; padding: 14px 0 0; align-content: start; display: flex; flex-direction: column; gap: 8px; border-top: 1px solid #E2E8F0; }
.tp-tg li { position: relative; word-break: keep-all; overflow-wrap: anywhere; padding-left: 26px; font-size: 15.5px; font-weight: 500; line-height: 1.55; color: var(--type-strong); }
.tp-tg li::before { content: ""; position: absolute; left: 2px; top: 0.3em; width: 16px; height: 16px; border-radius: 50%; background: var(--accent-2); }
.tp-tg li::after { content: ""; position: absolute; left: 7px; top: calc(0.3em + 3px); width: 5px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.tp-sc-note { align-self: end; display: flex; gap: 8px; margin: 18px 0 0; padding-top: 14px; font-size: 14px; line-height: 1.7; color: var(--type-soft); }
.tp-sc-note__i { flex-shrink: 0; margin-top: 3px; color: var(--accent-2); display: inline-grid; }
.tp-more { margin-top: 28px !important; margin-bottom: 0; text-align: center; }
.tp-more a { color: var(--accent-2); font-weight: 600; text-decoration: underline; font-size: 16px; }

/* 強み：横長の1枚を3つ。番号なし */
.tp-st-list { display: flex; flex-direction: column; gap: 16px; }
.tp-st { display: grid; grid-template-columns: 60px minmax(0, 1fr); column-gap: 28px; align-content: center; padding: 34px 48px; background: #fff; border: 1px solid #E2E8F0; border-left: 4px solid var(--accent-2); border-radius: 0; box-shadow: none; }
.tp-st-icon { grid-column: 1; grid-row: 1 / span 2; align-self: start; width: 60px; height: 60px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-2); display: grid; place-items: center; }
.tp-st-title { grid-column: 2; margin: 0; font-size: 28px; font-weight: 700; line-height: 1.4; letter-spacing: -0.015em; color: var(--type-strong); }
.tp-st-desc { text-wrap: pretty; grid-column: 2; max-width: 41em; margin: 12px 0 0; font-size: 16px; line-height: 1.9; color: var(--type-soft); }
@media (min-width: 1080px) {
  .tp-st-list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
  .tp-st { grid-column: span 2; grid-template-columns: 1fr; align-content: start; padding: 32px 28px; }
  .tp-st:nth-child(4) { grid-column: 2 / span 2; }
  .tp-st-icon { grid-column: 1; grid-row: auto; width: 52px; height: 52px; margin-bottom: 18px; }
  .tp-st-title { grid-column: 1; font-size: 21px; }
  .tp-st-desc { grid-column: 1; max-width: none; font-size: 15px; }
  .tp-st-desc br.tp-pcbr { display: none; }
}

/* スマホ幅 */
@media (max-width: 760px) {
  .tp-sec { padding-block: 52px; }
  .tp-sec .section-head { margin-bottom: 28px; }
  .tp-sec .section-head__title { font-size: 24px; }
  .tp-vb-list { grid-template-columns: 1fr; }
  .tp-vb-item { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; padding: 22px 0; border-left: 0; border-top: 1px solid var(--line); }
  .tp-vb-item:first-child { border-top: 0; padding-top: 0; }
  .tp-vb-item:last-child { padding-bottom: 0; }
  .tp-vb-icon { grid-column: 1; grid-row: 1 / span 2; width: 48px; height: 48px; margin: 0; }
  .tp-vb-ctx, .tp-vb-main { grid-column: 2; }
  .tp-vb-ctx { font-size: 14px; margin-bottom: 4px; }
  .tp-vb-main { font-size: 21px; }
  .tp-sec--value::after { bottom: -20px; border-left-width: 34px; border-right-width: 34px; border-top-width: 20px; }
  .tp-band { grid-template-columns: 1fr; gap: 20px; padding: 26px 20px 22px; border-radius: 0; }
  .tp-band__name { font-size: 30px; }
  .tp-band__lead { font-size: 16px; }
  .tp-bt { grid-template-columns: 1fr; }
  .tp-bt__label { padding-top: 0; }
  .tp-band__foot { flex-direction: column; align-items: stretch; padding-top: 18px; }
  .tp-badges { flex-direction: column; align-items: stretch; }
  .tp-badge-main .tp-yen { font-size: 22px; }
  .tp-band__link { margin: 4px 0 0; text-align: center; white-space: normal; }
  .tp-sc-grid { display: flex; flex-direction: column; gap: 16px; }
  .tp-sc { display: flex; flex-direction: column; padding: 22px 20px; }
  .tp-st { grid-template-columns: 1fr; padding: 22px 16px 22px 18px; }
  .tp-st-icon { grid-column: 1; grid-row: auto; width: 48px; height: 48px; margin-bottom: 14px; }
  .tp-st-title { grid-column: 1; font-size: 18px; letter-spacing: -0.02em; }
  .tp-st-desc { grid-column: 1; margin-top: 10px; font-size: 15px; max-width: none; }
  .tp-st-desc br.tp-pcbr { display: none; }
}

/* アイコンの右に見出しを並べる（強み・提供サービス・よくあるお悩み。2026-10-23 よっしー「余白が無駄で間延びしている」） */
.tp-st { grid-template-columns: auto minmax(0, 1fr); column-gap: 18px; align-content: start; }
.tp-st-icon { grid-column: 1; grid-row: 1; align-self: center; width: 52px; height: 52px; margin: 0; }
.tp-st-title { grid-column: 2; grid-row: 1; align-self: center; }
.tp-st-desc { grid-column: 1 / -1; grid-row: 2; max-width: none; margin-top: 16px; }
/* 提供サービスとよくあるお悩みは、3列が狭くなる 761〜1079px では従来どおりアイコンを上に置く */
@media (min-width: 1080px), (max-width: 760px) {
  .tp-sc-grid { grid-template-rows: auto auto 1fr auto; }
  .tp-sc { grid-row: span 4; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; }
  .tp-sc > .tp-px-icon { grid-column: 1; grid-row: 1; align-self: center; margin: 0; }
  .tp-sc > .tp-sc-name { grid-column: 2; grid-row: 1; align-self: center; }
  .tp-sc > :not(.tp-px-icon):not(.tp-sc-name) { grid-column: 1 / -1; }
}
/* よくあるお悩みは見出しの文字が大きいので、1200px 以上だけ横に並べる */
@media (min-width: 1200px) {
  .tp-vb-item { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 18px; align-content: start; }
  .tp-vb-icon { grid-column: 1; grid-row: 1 / span 2; align-self: center; margin: 0; }
  .tp-vb-ctx, .tp-vb-main { grid-column: 2; }
}
@media (min-width: 1080px) {
  .tp-st { column-gap: 12px; padding: 28px 24px; }
  .tp-st-icon { width: 40px; height: 40px; }
  .tp-st-icon svg { width: 22px; height: 22px; }
  .tp-st-title { font-size: 18px; letter-spacing: -0.02em; }
}
@media (max-width: 760px) {
  .tp-st { column-gap: 14px; }
  .tp-st-icon { width: 44px; height: 44px; }
  .tp-st-desc { margin-top: 12px; }
  .tp-sc { display: grid; grid-template-rows: none; }
}


/* 構築事例：目玉6件のカード・全事例一覧・このほかのご相談・ご相談ボタン（トップの #results だけに効かせる。koshigaya.html の .usecase 系には触れない） */
.tp-sec--cases .section-head__sub { margin: 18px 0 0; font-size: 16px; line-height: 1.7; color: var(--type-soft); max-width: none; }
.tp-cc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 20px; row-gap: 20px; }
.tp-cc { grid-row: span 6; display: grid; grid-template-rows: subgrid; row-gap: 0; padding: 26px 24px 22px; background: #fff; border: 1px solid #E2E8F0; border-top: 3px solid var(--accent-2); border-radius: 0; box-shadow: none; }
/* 761〜800px では3列のカードが画面から1〜3px はみ出すので、左右の余白を詰める */
@media (min-width: 761px) and (max-width: 800px) { .tp-cc { padding-left: 18px; padding-right: 18px; } }
.tp-cc-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.tp-cc-top .tp-px-icon { margin: 0; flex-shrink: 0; }
.tp-cc-tag { font-size: 14px; font-weight: 700; letter-spacing: .04em; color: var(--accent-3); }
.tp-cc-name { margin: 0; font-feature-settings: "palt"; font-size: 26px; font-weight: 700; line-height: 1.45; letter-spacing: -0.01em; color: #33415A; } /* 真っ黒より軽い灰紺 */
.tp-cc-lab { margin: 0 0 4px; font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--accent-2); }
.tp-cc-pain { margin-top: 14px; padding-top: 14px; border-top: 1px solid #E2E8F0; }
.tp-cc-pain__t { margin: 0; font-size: 18px; font-weight: 500; line-height: 1.7; color: var(--type-strong); }
.tp-cc-build { margin-top: 14px; padding-top: 14px; border-top: 1px solid #E2E8F0; }
.tp-cc-build__t { margin: 0; font-size: 15px; line-height: 1.8; color: var(--type-soft); }
.tp-cc-res { align-self: end; margin-top: 16px; padding: 12px 14px; background: var(--accent-soft); border-radius: 0; display: grid; gap: 2px; }
.tp-cc-res__l { font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--accent-3); }
.tp-cc-res__v { font-size: 16px; font-weight: 700; line-height: 1.6; color: var(--sub); }
.tp-cc-more { margin-top: 14px; display: inline-flex; align-items: center; gap: 6px; font-size: 15.5px; font-weight: 700; color: var(--accent-3); text-decoration: underline; text-underline-offset: 4px; justify-self: start; }
.tp-ix { margin-top: 56px; padding: 32px 32px 28px; background: var(--bg-soft); border: 1px solid #E2E8F0; border-radius: 0; }
.tp-ix-title { margin: 0 0 22px; text-align: center; font-size: 21px; font-weight: 700; color: var(--type-strong); }
.tp-ix-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 24px; }
.tp-ix-cat { margin: 0 0 10px; padding-bottom: 8px; border-bottom: 2px solid var(--accent-2); font-size: 16px; font-weight: 700; color: var(--accent-3); }
.tp-ix-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.tp-ix-col li { font-size: 15px; line-height: 1.55; }
.tp-ix-col a { color: var(--type-strong); text-decoration: underline; text-decoration-color: var(--accent-line); text-underline-offset: 4px; text-decoration-thickness: 2px; text-wrap: pretty; }
.tp-ix:has(.tp-ix-all) { padding: 0; background: none; border: 0; margin-top: 40px; text-align: center; }
.tp-ix-all { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; font-size: 16px; font-weight: 700; color: var(--accent-3); background: #fff; border: 2px solid var(--accent-2); border-radius: 4px; text-decoration: none; }
.tp-ix-all:hover { background: var(--accent-soft); }
.tp-oth { margin-top: 44px; }
.tp-oth-title { margin: 0 0 16px; text-align: center; font-size: 18px; font-weight: 700; color: var(--type-strong); }
.tp-oth-list { margin: 0; padding: 0; border-top: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 24px; }
.tp-cta { margin-top: 48px; text-align: center; }
.tp-cta-t { margin: 0 0 18px; font-size: 18px; font-weight: 700; line-height: 1.7; color: var(--type-strong); }
.tp-cta-b { display: inline-block; padding: 15px 36px; font-size: 17px; font-weight: 700; color: #fff; background: var(--accent-3); border-radius: 3px; text-decoration: none; box-shadow: none; }
.tp-cc-name .tp-ln2 { display: block; } /* 事例名は最初から2行で組む */
.tp-cc-build__t .tp-sent { display: block; } /* 1文ずつ改行して読みやすく */
@media (max-width: 760px) {
  .tp-cc-grid { display: flex; flex-direction: column; gap: 16px; }
  .tp-cc { display: flex; flex-direction: column; padding: 22px 20px; }
  .tp-cc-res { margin-top: 16px; align-self: stretch; } /* スマホでは成果の欄を全幅に（右寄せでばらつかないように） */
  .tp-cc-more { margin-top: 16px; }
  .tp-ix { margin-top: 40px; padding: 24px 18px 22px; }
  .tp-ix-grid { grid-template-columns: 1fr; row-gap: 24px; }
  .tp-oth { margin-top: 36px; }
  .tp-oth-list { grid-template-columns: 1fr; gap: 10px; }
  .tp-cta { margin-top: 36px; }
  .tp-cta-b { display: block; }
}

/* ============ トップの料金から下（製品の帯・料金プラン・流れ・代表プロフィール・よくあるご質問） ============
   構築事例より下のセクション。クラスはすべて tp- を付け、トップだけに効かせる（越谷ページの同名クラスには触れない） */
.tp-sec--price .section-head__sub, .tp-sec--faq .section-head__sub { margin: 18px auto 0; max-width: 760px; font-size: 16px; line-height: 1.8; color: var(--type-soft); }
.tp-sec a:focus-visible, .tp-sec summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.tp-sec b { font-weight: 700; }
/* ---- 製品の帯 ---- */
.tp-sec--prod { padding-block: 0 72px; }
.tp-sec--prod .tp-prod-grid { padding-top: 56px; border-top: 1px solid #E2E8F0; }
.tp-prod-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.tp-prod { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ic label more" "ic name more" "ic lead more"; column-gap: 18px; align-items: center; padding: 24px 28px; background: #fff; border: 1px solid #E2E8F0; border-top: 3px solid var(--accent-2); border-radius: 0; box-shadow: none; text-decoration: none; color: inherit; }
.tp-prod .tp-px-icon { grid-area: ic; margin: 0; }
.tp-prod-label { grid-area: label; font-size: 15px; font-weight: 700; letter-spacing: .04em; color: var(--accent-3); }
.tp-prod-name { grid-area: name; font-family: "Inter", "Helvetica Neue", Arial, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.4; color: #33415A; }
.tp-prod-lead { grid-area: lead; font-size: 15.5px; line-height: 1.6; color: var(--type-soft); }
.tp-prod-more { grid-area: more; font-size: 15.5px; font-weight: 700; color: var(--accent-3); text-decoration: underline; text-underline-offset: 4px; white-space: nowrap; }

/* ---- 料金：主役の月額支援プランの枠 ---- */
.tp-trial { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px 40px; padding: 32px 40px; margin-bottom: 24px; background: var(--accent-3); border-radius: 0; box-shadow: none; color: #fff; }
.tp-trial-l { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.tp-trial-badge { display: inline-block; padding: 4px 16px; font-size: 15px; font-weight: 700; color: var(--accent-3); background: #fff; border-radius: 2px; }
.tp-trial-name { font-feature-settings: "palt"; font-size: 38px; font-weight: 700; line-height: 1.35; letter-spacing: -0.02em; color: #fff; }
.tp-trial-r { display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
.tp-trial-price { display: flex; justify-content: center; align-items: baseline; gap: 2px; padding: 12px 26px; font-size: 16px; font-weight: 700; color: var(--sub); background: #fff; border-radius: 0; box-shadow: none; }
.tp-trial-price b { font-family: "Inter", "Helvetica Neue", Arial, sans-serif; font-size: 36px; line-height: 1.2; letter-spacing: -0.01em; margin-left: 4px; }
.tp-trial-price em { font-style: normal; font-size: 15px; }
.tp-trial-cta { display: block; text-align: center; padding: 13px 28px; font-size: 16px; font-weight: 700; color: #fff; border: 2px solid rgba(255,255,255,.7); border-radius: 3px; text-decoration: none; }

/* ---- 料金：カード（各段の開始位置は subgrid でそろえる） ---- */
.tp-pc-grid { display: grid; column-gap: 20px; row-gap: 20px; }
.tp-pc-grid--m { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tp-pc-grid--o { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 14px; } /* 小さな入口の商品は1列に4つ並べてコンパクトに */
.tp-pc-grid--m + .tp-pc-grid--o { margin-top: 48px; } /* 月額の3プランと入口の商品の間をあける */
.tp-pc-card { display: grid; grid-template-rows: subgrid; row-gap: 0; align-content: start; padding: 26px 26px 24px; background: #fff; border: 1px solid #E2E8F0; border-top: 3px solid var(--accent-2); border-radius: 0; box-shadow: none; }
.tp-pc-card--m { grid-row: span 8; }
.tp-pc-card--o { display: flex; flex-direction: column; }
.tp-pc-card--feat { border-color: var(--accent-2); box-shadow: 0 0 0 2px var(--accent-2); border-top-width: 3px; }
.tp-pc-head { grid-row: 1; margin-bottom: 12px; }
.tp-pc-badge { display: inline-block; padding: 4px 14px; font-size: 15px; font-weight: 700; color: var(--accent-3); background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 2px; }
.tp-pc-name { margin: 0; font-feature-settings: "palt"; font-size: 26px; font-weight: 700; line-height: 1.45; letter-spacing: -0.01em; color: #33415A; }
.tp-pc-card--m .tp-pc-name { grid-row: 2; }
.tp-pc-card--m .tp-pc-tag { grid-row: 3; }
.tp-pc-card--m .tp-pc-was { grid-row: 4; }
.tp-pc-card--m .tp-pc-amount { grid-row: 5; }
.tp-pc-card--m .tp-pc-spec.tp-s1 { grid-row: 6; }
.tp-pc-card--m .tp-pc-spec.tp-s2 { grid-row: 7; }
.tp-pc-card--m .tp-pc-note { grid-row: 8; }
.tp-pc-tag { margin: 2px 0 0; font-size: 15.5px; font-weight: 500; line-height: 1.6; color: var(--type-soft); }
.tp-pc-tag--price { font-weight: 700; color: var(--sub); }
.tp-pc-was { margin: 14px 0 0; display: flex; align-items: baseline; gap: 10px; font-size: 16px; color: var(--sub); }
.tp-pc-was s { font-weight: 500; text-decoration-thickness: 2px; }
.tp-pc-was span { font-size: 15px; font-weight: 700; color: var(--accent-3); }
.tp-pc-amount { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px; margin-top: 8px; padding-bottom: 16px; color: var(--sub); }
.tp-pc-yen { font-size: 24px; font-weight: 700; }
.tp-pc-num { font-family: "Inter", "Helvetica Neue", Arial, sans-serif; font-size: 46px; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; }
.tp-pc-unit { margin-left: 4px; font-size: 17px; font-weight: 700; }
.tp-pc-spec { padding: 12px 0; border-top: 1px solid #E2E8F0; }
.tp-pc-k { display: block; font-size: 15px; color: var(--type-soft); }
.tp-pc-v { display: block; font-size: 22px; font-weight: 700; line-height: 1.4; color: var(--type-strong); }
.tp-pc-note { margin: 0; padding-top: 12px; border-top: 1px solid #E2E8F0; font-size: 15px; line-height: 1.6; color: var(--accent-3); font-weight: 700; }
.tp-pc-card--o .tp-pc-name { font-size: 24px; }
.tp-pc-card--o .tp-pc-amount { margin-top: 12px; padding-bottom: 6px; }
.tp-pc-card--o .tp-pc-spec { margin-top: 4px; margin-bottom: 18px; }
.tp-pc-card--o .tp-pc-cta { margin-top: auto; align-self: flex-start; }
.tp-pc-card--o .tp-pc-quote, .tp-pc-card--o .tp-pc-checks { margin-bottom: 18px; }
.tp-pc-card--o .tp-pc-amount .tp-pc-num { font-size: 40px; }
.tp-pc-quote { margin: 12px 0 0; font-size: 15.5px; line-height: 1.8; color: var(--type-soft); }
.tp-pc-checks { list-style: none; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid #E2E8F0; }
.tp-pc-checks li { display: flex; align-items: center; gap: 8px; font-size: 15.5px; font-weight: 700; color: var(--type-strong); }
.tp-pc-checks svg { flex-shrink: 0; color: var(--accent-2); }
.tp-pc-cta { margin-top: 18px; display: inline-block; padding: 11px 24px; font-size: 15.5px; font-weight: 700; color: var(--accent-3); background: #fff; border: 2px solid var(--accent-2); border-radius: 3px; text-decoration: none; }

.tp-mon { margin: 28px 0 48px; padding: 24px 28px; background: #fff; border: 1px solid #E2E8F0; border-left: 4px solid var(--accent-2); border-radius: 0; }
.tp-mon-title { margin: 0 0 14px; font-size: 18px; font-weight: 700; color: var(--accent-3); }
.tp-mon ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tp-mon li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; font-size: 15.5px; line-height: 1.7; color: var(--type-strong); }
.tp-mon li b { color: var(--accent-3); }
.tp-mon li i { font-style: normal; font-weight: 700; color: var(--sub); }
.tp-pd { margin-top: 36px; text-align: center; }
.tp-pd-btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px; font-size: 16.5px; font-weight: 700; color: var(--accent-3); background: #fff; border: 2px solid var(--accent-2); border-radius: 3px; text-decoration: none; }
.tp-disc { margin: 20px auto 0 !important; text-align: center; font-size: 15px; color: var(--type-soft); }

/* ---- 流れ ---- */
.tp-fs-grid { display: grid; gap: 16px; }
.tp-fs { display: grid; grid-template-columns: 44px 230px minmax(0, 1fr); align-items: center; column-gap: 24px; padding: 22px 28px; background: #fff; border: 1px solid #E2E8F0; border-left: 4px solid var(--accent-2); border-radius: 0; box-shadow: none; }
.tp-fs-badge { width: 44px; height: 44px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-2); display: grid; place-items: center; font-family: "Inter", "Helvetica Neue", Arial, sans-serif; font-size: 18px; font-weight: 700; }
.tp-fs-title { margin: 0; font-feature-settings: "palt"; font-size: 22px; font-weight: 700; line-height: 1.5; color: #33415A; }
.tp-fs-desc { margin: 0; text-wrap: pretty; font-size: 16px; line-height: 1.8; color: var(--type-soft); }
.tp-fs-more, .tp-fq-more { margin: 28px auto 0 !important; text-align: center; }
.tp-fs-more a, .tp-fq-more a, .tp-ab-p a { color: var(--accent-3); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }

/* ---- プロフィール ---- */
.tp-ab { padding: 40px 44px; background: #fff; border: 1px solid #E2E8F0; border-top: 3px solid var(--accent-2); border-radius: 0; box-shadow: none; }
.tp-ab-top { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 40px; align-items: start; }
.tp-ab-photo { display: block; }
.tp-ab-photo img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid #E2E8F0; }
.tp-ab-role { display: inline-block; padding: 4px 14px; font-size: 15px; font-weight: 700; color: var(--accent-3); background: var(--accent-soft); border-radius: 2px; }
.tp-ab-name { margin: 12px 0 14px; font-feature-settings: "palt"; font-size: 28px; font-weight: 700; line-height: 1.45; color: #33415A; }
.tp-ab-p { margin: 0 0 14px; font-size: 16px; line-height: 1.95; color: var(--type-soft); text-wrap: pretty; }
.tp-ab-p:last-child { margin-bottom: 0; }
.tp-ab-career { margin-top: 28px; padding-top: 28px; border-top: 1px solid #E2E8F0; }
.tp-ab-story { margin: 16px 0 0; font-size: 16px; }
.tp-ab-story a { color: var(--accent-3); font-weight: 700; text-decoration: none; }

/* ---- FAQ ---- */
.tp-fq-list { max-width: 880px; display: grid; gap: 14px; }
.tp-fq { background: #fff; border: 1px solid #E2E8F0; border-left: 4px solid var(--accent-2); border-radius: 0; box-shadow: none; }
.tp-fq-q { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px; padding: 20px 24px; }
.tp-fq-q::-webkit-details-marker { display: none; }
.tp-fq-mark { flex-shrink: 0; padding: 2px 12px; font-family: "Inter", "Helvetica Neue", Arial, sans-serif; font-size: 15px; font-weight: 700; color: var(--accent-3); background: var(--accent-soft); border-radius: 2px; }
.tp-fq-t { flex: 1; min-width: 0; font-size: 18px; font-weight: 700; line-height: 1.6; color: var(--type-strong); }
.tp-fq-icon { flex-shrink: 0; color: var(--accent-2); transition: transform .2s; }
.tp-fq[open] .tp-fq-icon { transform: rotate(45deg); }
.tp-fq-a { padding: 0 24px 22px 24px; margin-left: 0; font-size: 16px; line-height: 1.9; color: var(--type-soft); border-top: 1px solid #E2E8F0; padding-top: 16px; margin: 0 24px; padding-inline: 0; text-wrap: pretty; }

/* ---- スマホ幅 ---- */

.tp-trial-name .tp-bn1 { display: block; } /* 提供サービスの帯と同じく、名前を2段にして漢字の重さを散らす */
.tp-trial-name .tp-bn2 { display: block; font-size: 0.7em; font-weight: 500; letter-spacing: 0.04em; opacity: 0.92; margin-top: 2px; }
.tp-pc-card--o { display: flex; flex-direction: column; padding: 20px 18px 18px !important; }
.tp-pc-card--o .tp-pc-name { font-size: 19px; }
.tp-pc-card--o .tp-pc-tag { font-size: 15px; }
.tp-pc-card--o .tp-pc-amount { margin-top: 4px; padding-bottom: 8px; }
.tp-pc-card--o .tp-pc-yen { font-size: 17px; }
.tp-pc-card--o .tp-pc-num { font-size: 30px !important; }
.tp-pc-card--o .tp-pc-yen { font-size: 17px !important; }
.tp-pc-card--o .tp-ck { display: inline !important; } /* 狭い列では文節の固定改行を外して自然に流す */
.tp-pc-card--o .tp-pc-unit { font-size: 14px; }
.tp-pc-card--o .tp-pc-quote { margin-top: 6px; font-size: 15px; line-height: 1.7; }
.tp-pc-card--o .tp-pc-spec { margin-top: 4px; }
.tp-pc-card--o .tp-pc-checks { margin-top: 10px; padding-top: 10px; }
.tp-pc-card--o .tp-pc-checks li { font-size: 15px; }
.tp-pc-card--o .tp-pc-cta { margin-top: auto; padding: 8px 14px; font-size: 14px; text-align: center; }
.tp-pc-card--o > :nth-last-child(2) { margin-bottom: 16px; }
.tp-fs-wrap { display: grid; gap: 32px; }
.tp-fs-phase__t { margin: 0 0 12px; font-size: 18px; font-weight: 700; color: var(--accent-3); display: flex; align-items: center; gap: 10px; }
.tp-fs-phase__t::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent-2); }
.tp-fs-grid { gap: 12px; }

/* スマホ幅（トップの料金から下） */
@media (max-width: 760px) {
  .tp-sec--prod { padding-block: 0 52px; }
  .tp-sec--prod .tp-prod-grid { padding-top: 40px; }
  .tp-prod-grid { grid-template-columns: 1fr; gap: 14px; }
  .tp-prod { padding: 20px 18px; column-gap: 14px; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ic label" "ic name" "ic lead" "more more"; }
  .tp-prod-more { margin-top: 10px; justify-self: end; }
  .tp-prod-name { font-size: 22px; }
  .tp-trial { grid-template-columns: 1fr; padding: 24px 20px; gap: 18px; }
  .tp-trial-name { font-size: 28px; }
  .tp-trial-price { padding: 12px 14px; }
  .tp-trial-price b { font-size: 32px; }
  .tp-pc-grid { display: flex; flex-direction: column; gap: 16px; }
  .tp-pc-card { display: flex; flex-direction: column; padding: 22px 20px; }
  .tp-pc-head { margin-bottom: 10px; }
  .tp-pc-card--o .tp-pc-cta { align-self: stretch; text-align: center; }
  .tp-pc-card--feat { box-shadow: 0 0 0 2px var(--accent-2); }
  .tp-mon { padding: 20px 18px; margin: 22px 0 36px; }
  .tp-mon li { grid-template-columns: 1fr; gap: 0; }
  .tp-pd-btn { display: flex; justify-content: center; }
  .tp-fs-grid { gap: 14px; }
  .tp-fs { grid-template-columns: 44px minmax(0, 1fr); row-gap: 8px; column-gap: 14px; padding: 20px 18px; }
  .tp-fs-desc { grid-column: 1 / -1; }
  .tp-fs-title { font-size: 20px; }
  .tp-ab { padding: 22px 16px; }
  .tp-ab-top { grid-template-columns: 1fr; gap: 22px; }
  .tp-ab-photo { max-width: 200px; margin-inline: auto; }
  .tp-ab-name { font-size: 24px; }
  .tp-fq-q { padding: 16px 16px; gap: 10px; align-items: flex-start; }
  .tp-fq-icon { margin-top: 5px; }
  .tp-fq-t { font-size: 17px; }
  .tp-fq-a { margin: 0 16px; padding-bottom: 18px; }
  .tp-pc-card--o .tp-pc-name { font-size: 19px; }
}
.tp-fs-note { margin: 24px auto 0; max-width: 46em; text-align: center; font-size: var(--text-note); color: var(--ink-2); line-height: var(--leading-body); }
.hero--cover .hero__area a { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: underline; text-underline-offset: 3px; }
/* ページ内リンクの着地先：固定ヘッダーとフェード表示のずれ（translateY 24px）の分だけ余白を取る */
#case-index, #area, #contact { scroll-margin-top: 124px; }
@media (max-width: 760px) { #case-index, #area, #contact { scroll-margin-top: 88px; } }