/* portal-v2 · / (トップLP) — Split/Workbench型のコンバージョンLP
 * スコープ: .theme-portal-v2 のみ。/ 専用の上書きスタイル。
 * 参照: /design.md（色・形・タイポの確定値）
 * 最重要コンバージョンページのため保守的に運用。
 * ヒーロー画像・preload・srcset・fetchpriorityの仕組みは一切変更しない。
 * フォームのHTML構造・name属性・API送信・data-cta・Turnstileは変更しない。
 */

/* ---- hero：画像/preloadは不可侵。周囲のタイポと余白だけ調整 ---- */
.theme-portal-v2 .hero-label {
  color: var(--portal-primary-deep);
  font-family: var(--portal-font-numeric);
}

.theme-portal-v2 h1.hero-title {
  color: var(--portal-ink);
}

.theme-portal-v2 h1 .accent {
  color: var(--portal-primary-deep);
}

.theme-portal-v2 .hero-qualifier {
  color: var(--portal-muted);
}

/* 無料診断CTA(オレンジ)。data-cta / href / 構造は変更していない */
.theme-portal-v2 .btn-utility {
  font-weight: 700;
}

.theme-portal-v2 .btn-utility::after {
  content: "→";
}

/* ---- trust strip ---- */
.theme-portal-v2 .trust {
  border-block-color: var(--portal-rule);
}

.theme-portal-v2 .trust-item::before {
  color: var(--portal-primary);
}

.theme-portal-v2 .trust-item small {
  color: var(--portal-muted);
}

/* ---- 課題カード：1px罫線・影なし ---- */
.theme-portal-v2 .p-card {
  background: var(--portal-surface);
  border: 1px solid var(--portal-rule);
  border-radius: var(--portal-radius-card);
  box-shadow: none;
}

.theme-portal-v2 .p-card h3 {
  color: var(--portal-ink);
}

.theme-portal-v2 .p-card p {
  color: var(--portal-muted);
}

.theme-portal-v2 .p-conclusion blockquote {
  color: var(--portal-ink);
  font-family: var(--portal-font-heading);
}

/* ---- サービスの構成 assets 表 ---- */
.theme-portal-v2 .assets {
  border: 1px solid var(--portal-rule);
  background: var(--portal-surface);
}

.theme-portal-v2 .assets th,
.theme-portal-v2 .assets td {
  border-bottom: 1px solid var(--portal-rule);
}

.theme-portal-v2 .assets th {
  color: var(--portal-primary-deep);
}

.theme-portal-v2 .assets td {
  color: var(--portal-muted);
}

.theme-portal-v2 .p-conclusion .micro a {
  color: var(--portal-primary-deep);
}

/* ---- 運用の流れ cycle ---- */
.theme-portal-v2 .cyc {
  background: var(--portal-surface);
  border: 1px solid var(--portal-rule);
  border-radius: var(--portal-radius-control);
}

.theme-portal-v2 .cyc::before {
  color: var(--portal-primary-deep);
  font-family: var(--portal-font-numeric);
}

.theme-portal-v2 .cyc b {
  color: var(--portal-ink);
}

.theme-portal-v2 .cyc span {
  color: var(--portal-muted);
}

.theme-portal-v2 .cycle-loop {
  color: var(--portal-primary-deep);
}

/* ---- 詳しく知る：案内カード ---- */
.theme-portal-v2 .guide-card {
  background: var(--portal-surface);
  border: 1px solid var(--portal-rule);
  border-radius: var(--portal-radius-card);
  box-shadow: none;
  transition: border-color var(--dur-short) var(--ease-out);
}

.theme-portal-v2 .guide-card:hover {
  border-color: var(--portal-primary);
}

.theme-portal-v2 .guide-card:focus-visible {
  outline: 2px solid var(--portal-focus);
  outline-offset: 3px;
}

.theme-portal-v2 .guide-card b {
  color: var(--portal-ink);
  font-family: var(--portal-font-heading);
}

.theme-portal-v2 .guide-card p {
  color: var(--portal-muted);
}

.theme-portal-v2 .guide-card .more {
  color: var(--portal-primary-deep);
}

/* ---- 解説記事カード ---- */
.theme-portal-v2 .ans-wrap > h3 {
  color: var(--portal-ink);
  font-family: var(--portal-font-heading);
}

.theme-portal-v2 .ans-card {
  border: 1px solid var(--portal-rule);
  border-radius: var(--portal-radius-card);
  transition: border-color var(--dur-short) var(--ease-out);
}

.theme-portal-v2 .ans-card:hover {
  border-color: var(--portal-primary);
}

.theme-portal-v2 .ans-card:focus-visible {
  outline: 2px solid var(--portal-focus);
  outline-offset: 3px;
}

.theme-portal-v2 .ans-card b {
  color: var(--portal-ink);
}

.theme-portal-v2 .ans-card span {
  color: var(--portal-muted);
}

.theme-portal-v2 .ans-more a {
  color: var(--portal-primary-deep);
}

/* ---- 無料診断（唯一の反転ブロック）：portal-v2はフラット原則のため
 * 濃色反転ではなく淡いコバルトwashへ差し替える。診断＝主CVを明確に区切りつつ
 * 「UI背景は白・薄灰」の原則を守る。フォームのHTML構造・name属性・data-cta等は不変。 */
.theme-portal-v2 .inverse {
  background: var(--portal-primary-wash);
  color: var(--portal-ink);
}

.theme-portal-v2 .inverse .sec-title {
  color: var(--portal-ink);
}

.theme-portal-v2 .inverse .sec-lead {
  color: var(--portal-muted);
}

.theme-portal-v2 .inverse .micro {
  color: var(--portal-muted);
}

.theme-portal-v2 .final-points li {
  border-bottom: 1px solid var(--portal-rule-strong);
  color: var(--portal-ink);
}

.theme-portal-v2 .final-points li b {
  color: var(--portal-primary-deep);
  font-family: var(--portal-font-numeric);
}

.theme-portal-v2 .inverse .btn-primary {
  background: var(--portal-primary);
  color: var(--portal-surface);
}

@media (hover: hover) and (pointer: fine) {
  .theme-portal-v2 .inverse .btn-primary:hover {
    background: var(--portal-primary-deep);
  }
}

/* ---- 診断フォームカード：フローティングではないため罫線のみ・影なし ---- */
.theme-portal-v2 .form-card {
  background: var(--portal-surface);
  color: var(--portal-ink);
  border: 1px solid var(--portal-rule);
  border-radius: var(--portal-radius-card);
  box-shadow: none;
}

.theme-portal-v2 .form-card h3 {
  color: var(--portal-ink);
  font-family: var(--portal-font-heading);
}

.theme-portal-v2 .form-card .sub {
  color: var(--portal-muted);
}

.theme-portal-v2 .f-field label {
  color: var(--portal-ink);
}

.theme-portal-v2 .f-field label .opt {
  color: var(--portal-muted);
  border-color: var(--portal-rule-strong);
}

.theme-portal-v2 .f-field input,
.theme-portal-v2 .f-field select,
.theme-portal-v2 .f-field textarea {
  border: 1.5px solid var(--portal-rule-strong);
  border-radius: var(--portal-radius-control);
  background: var(--portal-surface);
  color: var(--portal-ink);
}

.theme-portal-v2 .f-field input:focus-visible,
.theme-portal-v2 .f-field select:focus-visible,
.theme-portal-v2 .f-field textarea:focus-visible {
  outline: 2px solid var(--portal-focus);
  border-color: var(--portal-primary);
}

.theme-portal-v2 .f-consent {
  color: var(--portal-muted);
}

.theme-portal-v2 .f-consent a {
  color: var(--portal-primary-deep);
}

.theme-portal-v2 .form-card .btn {
  border-radius: var(--portal-radius-control);
}

.theme-portal-v2 .form-thanks .ok-mark {
  background: var(--portal-primary-wash);
  color: var(--portal-primary-deep);
}

.theme-portal-v2 .form-thanks p {
  color: var(--portal-muted);
}