/* /service/ 配下専用スタイル。ジャーナル（記事メディア）とは意図的に配色・質感を変え、
   企業向けサービスサイトであることが一目でわかるようにする。
   ヘッダー・フッターは共通（style.css）のまま＝相互回遊を担保。
   本ファイルは .service-scope 配下にのみ影響する（グローバル変数は上書きしない）。 */

.service-scope {
  --svc-navy: #10263d;
  --svc-navy-deep: #0a1a2c;
  --svc-navy-soft: #eaeff5;
  --svc-ink: #1b2431;
  --svc-ink-soft: #4c5a6b;
  --svc-ink-faint: #6b7684;
  --svc-line: #e2e6ee;
  --svc-bg: #ffffff;
  --svc-bg-warm: #f7f5f0;
  --svc-gold: #a8701f;
  --svc-gold-dark: #8a5a15;
  --svc-gold-soft: #f6ecd9;
  /* プライマリボタン専用トークン（--svc-goldとは別管理。2026-07-17 視認性改善で導入。
     ボタン背景は明るいオレンジゴールド、文字は濃紺の太字でコントラスト比 7:1 前後を確保）。 */
  --svc-btn-bg: #f0a93c;
  --svc-btn-bg-hover: #f6c168;
  --svc-btn-text: #1a2b3d;
  --svc-max: 1120px;
  font-feature-settings: "palt";
}
.service-scope .container { max-width: var(--svc-max); margin: 0 auto; padding: 0 20px; }
.service-scope a { color: var(--svc-navy); }
.service-scope a:hover { text-decoration: underline; }

/* 濃紺背景（ヒーロー・選ばれる理由セクション・CTAバンド）の上に置かれるリンクは、
   既定のリンク色（濃紺）のままだと背景と同化してほぼ見えなくなる事故が起きていた
   （例: FAQページのヒーロー内リンクが実質不可視。2026-07-16 視認性改善で発見・修正）。
   ボタン（.svc-btn）は独自の背景色を持つため対象外にする。 */
.svc-hero a:not(.svc-btn),
.svc-section-navy a:not(.svc-btn),
.svc-cta-band a:not(.svc-btn) {
  color: var(--svc-gold-pale, #f3d9ad);
  text-decoration-color: rgba(243, 217, 173, .55);
}
.svc-hero a:not(.svc-btn):hover,
.svc-section-navy a:not(.svc-btn):hover,
.svc-cta-band a:not(.svc-btn):hover { color: #fff; }

/* 濃紺背景配下の本文・小注記も同種の事故があった。`.service-scope p` / `.service-scope a`
   はクラス+要素セレクタで詳細度 (0,1,1) を持つため、`.svc-hero-lead` 等の単一クラス
   セレクタ (0,1,0) や `.svc-btn-outline` (0,1,0) を詳細度で上回って暗色に引き戻してしまい、
   本番のヒーロー段落・注記・セカンダリボタンが暗くて読めなくなっていた
   （2026-07-17 視認性バグ修正で発見）。ここでは `.service-scope` を前置して詳細度を
   確実に上回らせ、ダーク背景に必要な明度（本文 #e6ecf5 以上・小さな注記でも #b8c6d9 以上）
   を再指定する。 */
.service-scope .svc-hero-lead { color: #e6ecf5; }
.service-scope .svc-hero-sub { color: #d3dbe8; }
.service-scope .svc-hero-micro,
.service-scope .svc-cta-micro { color: #c3d0e0; }
.service-scope .svc-hero p,
.service-scope .svc-hero li,
.service-scope .svc-hero small,
.service-scope .svc-section-navy p,
.service-scope .svc-section-navy li,
.service-scope .svc-section-navy small,
.service-scope .svc-cta-band p,
.service-scope .svc-cta-band small,
.service-scope .svc-hero .svc-shot-caption,
.service-scope .svc-section-navy .svc-shot-caption {
  color: #e6ecf5;
}
.service-scope .svc-btn-outline {
  color: #fff;
  border-color: #fff;
}
.service-scope .svc-btn-outline:hover { background: rgba(255,255,255,.15); }

/* ---------- 見出し・本文の基調をジャーナルから変える ---------- */
.service-scope h1, .service-scope h2, .service-scope h3 { color: var(--svc-ink); letter-spacing: .01em; }
.service-scope p { color: var(--svc-ink-soft); font-size: 1.06rem; }

/* ---------- パンくず・ページヘッダー ---------- */
.svc-breadcrumb { font-size: .91rem; color: var(--svc-ink-faint); padding: 18px 0 0; }
.svc-breadcrumb a { color: var(--svc-ink-faint); }
.svc-breadcrumb span { margin: 0 4px; }

/* ---------- ヒーロー（濃紺・企業向けの引き締まったトーン） ---------- */
.svc-hero {
  background: radial-gradient(1200px 480px at 15% -10%, #17385a 0%, var(--svc-navy) 45%, var(--svc-navy-deep) 100%);
  color: #fff; padding: 56px 0 52px;
}
.svc-hero .container { display: grid; grid-template-columns: 1.15fr .85fr; gap: 36px; align-items: center; }
.svc-eyebrow {
  display: inline-block; font-size: .88rem; font-weight: 700; letter-spacing: .06em;
  color: #f3d9ad; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2);
  padding: 5px 12px; border-radius: 999px; margin-bottom: 16px;
}
.svc-hero h1 { color: #fff; font-size: clamp(1.6rem, 4vw, 2.5rem); line-height: 1.5; }
.svc-hero-lead { margin-top: 18px; color: #e4e9f1; font-size: 1.14rem; line-height: 1.9; max-width: 46em; }
.svc-hero-sub { margin-top: 14px; color: #bccadd; font-size: 1.02rem; line-height: 1.85; }
.svc-hero-actions { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; }
.svc-hero-figure { display: flex; justify-content: center; }
.svc-hero-figure img {
  border-radius: 14px; box-shadow: 0 18px 44px rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.12);
  max-width: 100%;
}
.svc-hero-micro { margin-top: 12px; font-size: .9rem; color: #aebdd0; }

/* サブページ共通の簡易ヒーロー（トップより低め） */
.svc-hero-sm { padding: 40px 0 40px; }
.svc-hero-sm .container { grid-template-columns: 1fr; }
.svc-hero-sm h1 { font-size: clamp(1.4rem, 3.4vw, 2rem); }

/* ---------- ボタン ---------- */
.svc-btn {
  display: inline-block; padding: 14px 26px; border-radius: 8px; font-weight: 700;
  font-size: 1rem; line-height: 1.5; text-align: center; border: 2px solid transparent;
}
.svc-btn:hover { text-decoration: none; }
.svc-btn-primary { background: var(--svc-btn-bg); color: var(--svc-btn-text); }
.svc-btn-primary:hover { background: var(--svc-btn-bg-hover); }
.svc-btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.svc-btn-outline:hover { background: rgba(255,255,255,.1); }
.svc-btn-ghost { background: transparent; color: var(--svc-navy); border-color: var(--svc-line); }
.svc-btn-ghost:hover { background: var(--svc-navy-soft); }
.svc-btn-block { display: block; width: 100%; }
.svc-btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ---------- セクション共通 ---------- */
.svc-section { padding: 68px 0; }
.svc-section-warm { background: var(--svc-bg-warm); }
.svc-section-navy { background: var(--svc-navy); color: #fff; }
.svc-section-navy h2, .svc-section-navy h3 { color: #fff; }
.svc-section-navy p { color: #dbe3ee; }
.svc-h2 {
  font-size: 1.4rem; line-height: 1.55; padding-left: 14px; border-left: 4px solid var(--svc-gold);
  margin-bottom: 14px;
}
.svc-section-navy .svc-h2 { border-left-color: #f3d9ad; }
.svc-section-lead { max-width: 42em; color: var(--svc-ink-soft); font-size: 1.11rem; line-height: 1.85; margin-bottom: 32px; }
.svc-section-navy .svc-section-lead { color: #d3dbe8; }

/* ---------- 課題提起 ---------- */
.svc-problem { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.svc-problem-quote {
  font-size: 1.2rem; line-height: 1.85; color: var(--svc-ink); font-weight: 700;
  border-left: 3px solid var(--svc-gold); padding-left: 18px;
}

/* ---------- 4工程カード ---------- */
.svc-flow { display: flex; align-items: stretch; gap: 4px; }
.svc-flow > .svc-flow-card { flex: 1 1 0; min-width: 0; }
.svc-flow-card {
  position: relative; background: var(--svc-bg); border: 1px solid var(--svc-line); border-radius: 12px;
  padding: 24px 20px 22px; display: flex; flex-direction: column; gap: 10px; color: inherit;
}
.svc-flow-card:hover { text-decoration: none; border-color: var(--svc-navy); box-shadow: 0 4px 18px rgba(16,38,61,.1); }
.svc-flow-num {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 50%; background: var(--svc-navy); color: #fff; font-weight: 700; font-size: .92rem;
}
.svc-flow-icon { color: var(--svc-gold); }
.svc-flow-title { font-size: 1.1rem; font-weight: 700; color: var(--svc-ink); }
.svc-flow-desc { font-size: 1.01rem; color: var(--svc-ink-soft); line-height: 1.8; }
.svc-flow-link { margin-top: auto; font-size: .98rem; font-weight: 700; color: var(--svc-navy); }
.svc-flow-arrow {
  display: flex; align-items: center; justify-content: center; color: var(--svc-ink-faint); font-size: 1.3rem;
  flex: 0 0 26px; width: 26px;
}
.svc-flow-note {
  margin-top: 22px; font-size: 1.01rem; color: var(--svc-ink-soft); background: var(--svc-navy-soft);
  padding: 16px 20px; border-radius: 8px; line-height: 1.8;
}

/* ---------- 3本柱図解 ---------- */
.svc-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.svc-pillar {
  background: var(--svc-bg); border: 1px solid var(--svc-line); border-top: 4px solid var(--svc-navy);
  border-radius: 10px; padding: 24px 22px 22px;
}
.svc-pillar-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px;
  border-radius: 10px; background: var(--svc-navy-soft); color: var(--svc-navy); margin-bottom: 10px;
}
.svc-pillar-num { font-size: 1.6rem; font-weight: 700; color: var(--svc-navy); font-feature-settings: "tnum"; }
.svc-pillar-unit { font-size: .92rem; font-weight: 700; color: var(--svc-ink-soft); margin-left: 2px; }
.svc-pillar-title { margin-top: 6px; font-size: 1.05rem; font-weight: 700; color: var(--svc-ink); }
.svc-pillar-desc { margin-top: 10px; font-size: 1.01rem; color: var(--svc-ink-soft); line-height: 1.8; }
.svc-pillars-arrow { text-align: center; font-size: 1.4rem; color: var(--svc-gold); margin: 4px 0; }
.svc-pillars-result {
  margin-top: 6px; background: var(--svc-navy); color: #fff; border-radius: 10px;
  padding: 22px 26px; text-align: center; font-size: 1.1rem; font-weight: 700; line-height: 1.75;
}
.svc-pillars-result span { color: #f3d9ad; }

/* ---------- 規模×意思決定 図解 ---------- */
.svc-scale-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.svc-scale-card {
  background: var(--svc-bg); border: 1px solid var(--svc-line); border-radius: 10px; padding: 20px 18px;
  text-align: left;
}
.svc-scale-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 10px; background: var(--svc-gold-soft); color: var(--svc-gold-dark); margin-bottom: 10px;
}
.svc-scale-name { font-size: 1.02rem; font-weight: 700; color: var(--svc-ink); }
.svc-scale-key { margin-top: 6px; font-size: .94rem; font-weight: 700; color: var(--svc-navy); }
.svc-scale-desc { margin-top: 8px; font-size: .98rem; color: var(--svc-ink-soft); line-height: 1.8; }

/* ---------- 差別化ポイント ---------- */
.svc-diff-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.svc-diff-card { padding: 4px 0; }
.svc-diff-num {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  border-radius: 50%; border: 2px solid var(--svc-gold); color: var(--svc-gold-dark); font-weight: 700;
  font-size: .88rem; margin-bottom: 10px;
}
.svc-diff-title { font-size: 1.04rem; font-weight: 700; color: var(--svc-ink); line-height: 1.65; }
.svc-diff-desc { margin-top: 10px; font-size: 1.01rem; color: var(--svc-ink-soft); line-height: 1.8; }

/* ---------- カード（機能・強み共通） ---------- */
.svc-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.svc-card-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.svc-card-grid-4 { grid-template-columns: repeat(4, 1fr); }
.svc-card {
  background: var(--svc-bg); border: 1px solid var(--svc-line); border-radius: 12px; padding: 26px 24px 24px;
}
.svc-card-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px;
  border-radius: 10px; background: var(--svc-navy-soft); color: var(--svc-navy); margin-bottom: 12px;
}
.svc-card h3 { font-size: 1.08rem; line-height: 1.6; }
.svc-card p { margin-top: 10px; font-size: 1.02rem; line-height: 1.8; }

/* ---------- 機能スクリーンショット行 ---------- */
.svc-feature-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center;
  padding: 48px 0; border-bottom: 1px solid var(--svc-line);
}
.svc-feature-row:last-child { border-bottom: none; }
.svc-feature-row.svc-feature-rev .svc-feature-figure { order: 2; }
.svc-feature-row.svc-feature-rev .svc-feature-text { order: 1; }
.svc-feature-tag {
  display: inline-block; font-size: .86rem; font-weight: 700; color: var(--svc-gold-dark);
  background: var(--svc-gold-soft); padding: 4px 11px; border-radius: 999px; margin-bottom: 10px;
}
.svc-feature-text h3 { font-size: 1.2rem; line-height: 1.6; }
.svc-feature-text p { margin-top: 12px; font-size: 1.06rem; line-height: 1.85; }
.svc-feature-figure img {
  width: 100%; border-radius: 10px; border: 1px solid var(--svc-line);
  box-shadow: 0 6px 22px rgba(16,38,61,.08);
}
.svc-shot-caption { margin-top: 8px; font-size: .86rem; color: var(--svc-ink-faint); }

/* ---------- 画像プレースホルダー（実物待ち） ---------- */
.svc-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  aspect-ratio: 16/10; background: repeating-linear-gradient(135deg, #eef0f4, #eef0f4 10px, #e6e9ee 10px, #e6e9ee 20px);
  border: 1px dashed #b9c0cc; border-radius: 10px; color: var(--svc-ink-faint); font-size: .98rem; text-align: center; padding: 16px;
}
.svc-placeholder-icon { color: #b9c0cc; }

/* ---------- 料金カード ---------- */
.svc-price-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.svc-price-card {
  background: var(--svc-bg); border: 1px solid var(--svc-line); border-radius: 14px; padding: 32px 28px;
  display: flex; flex-direction: column; gap: 16px;
}
.svc-price-card.svc-price-featured { border: 2px solid var(--svc-navy); position: relative; }
.svc-price-badge {
  position: absolute; top: -12px; left: 24px; background: var(--svc-navy); color: #fff;
  font-size: .84rem; font-weight: 700; padding: 4px 12px; border-radius: 999px;
}
.svc-price-name { font-size: 1.16rem; font-weight: 700; color: var(--svc-ink); }
.svc-price-desc { font-size: 1.01rem; color: var(--svc-ink-soft); line-height: 1.8; }
.svc-price-figure { font-size: 1.35rem; font-weight: 700; color: var(--svc-navy); }
.svc-price-figure small { font-size: .58em; font-weight: 700; color: var(--svc-ink-soft); }
.svc-price-list { margin: 4px 0 0; padding-left: 1.2em; font-size: .99rem; color: var(--svc-ink-soft); line-height: 1.7; }
.svc-price-list li { margin: 7px 0; }
.svc-price-note { font-size: .9rem; color: var(--svc-ink-faint); }

/* ---------- FAQ ---------- */
.svc-faq-list { display: flex; flex-direction: column; gap: 2px; }
.svc-faq-item { border: 1px solid var(--svc-line); border-radius: 10px; background: var(--svc-bg); }
.svc-faq-item + .svc-faq-item { margin-top: 10px; }
.svc-faq-item summary {
  cursor: pointer; padding: 18px 22px; font-weight: 700; font-size: 1.02rem; color: var(--svc-ink);
  list-style: none; display: flex; gap: 10px; align-items: baseline;
}
.svc-faq-item summary::-webkit-details-marker { display: none; }
.svc-faq-item summary::before { content: "Q"; color: var(--svc-gold-dark); font-weight: 700; }
.svc-faq-item[open] summary { border-bottom: 1px solid var(--svc-line); }
/* display:flex にすると段落内のテキストノードと <a> がそれぞれ別のフレックスアイテムに
   分割され、リンクを含む回答文が縦に千切れて表示される不具合が起きるため通常のブロックにする
   （2026-07-16 FAQ実装で発覚・修正）。 */
.svc-faq-a { padding: 6px 22px 22px 22px; font-size: 1.03rem; color: var(--svc-ink-soft); line-height: 1.9; }
.svc-faq-a::before { content: "A "; color: var(--svc-navy); font-weight: 700; margin-right: 4px; }

/* ---------- CTAバンド ---------- */
.svc-cta-band {
  background: linear-gradient(135deg, var(--svc-navy), var(--svc-navy-deep));
  color: #fff; border-radius: 16px; padding: 44px 40px; text-align: center;
}
.svc-cta-band h2 { color: #fff; font-size: 1.34rem; }
.svc-cta-band p { color: #dbe3ee; margin-top: 12px; font-size: 1.08rem; line-height: 1.85; max-width: 42em; margin-left: auto; margin-right: auto; }
.svc-cta-actions { margin-top: 24px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.svc-cta-micro { margin-top: 16px; font-size: .9rem; color: #aebdd0; }

/* ---------- 実績・証拠 ---------- */
.svc-proof-num { font-size: 1.7rem; font-weight: 700; color: var(--svc-navy); font-feature-settings: "tnum"; }
.svc-proof-label { font-size: .96rem; color: var(--svc-ink-soft); margin-top: 6px; }

/* ---------- 導入前→導入後 対比カード（2026-07-17 実績セクション改良） ---------- */
.svc-result-card {
  background: var(--svc-bg); border: 1px solid var(--svc-line); border-radius: 14px;
  padding: 26px 28px 24px;
}
.svc-result-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.svc-result-name { font-size: 1.1rem; font-weight: 700; color: var(--svc-ink); }
.svc-result-tag { font-size: .86rem; color: var(--svc-ink-faint); }
.svc-result-flow { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: stretch; }
.svc-result-stage {
  border-radius: 10px; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px;
}
.svc-result-before { background: var(--svc-bg-warm); }
.svc-result-after { background: var(--svc-navy-soft); }
.svc-result-stage-label {
  display: inline-block; align-self: flex-start; font-size: .8rem; font-weight: 700;
  padding: 2px 10px; border-radius: 999px; color: #fff;
}
.svc-result-before .svc-result-stage-label { background: var(--svc-ink-faint); }
.svc-result-after .svc-result-stage-label { background: var(--svc-navy); }
.svc-result-stage p { margin: 0; font-size: .98rem; color: var(--svc-ink-soft); line-height: 1.75; }
.svc-result-after p strong { color: var(--svc-navy); font-size: 1.06rem; }
.svc-result-arrow-h {
  display: flex; align-items: center; justify-content: center; color: var(--svc-gold); font-size: 1.4rem;
  font-weight: 700;
}

/* ---------- 領域別実績カード（2026-07-17 追加） ---------- */
.svc-domain-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.svc-domain-card {
  background: var(--svc-bg); border: 1px solid var(--svc-line); border-radius: 10px;
  padding: 18px 16px; text-align: center;
}
.svc-domain-num { font-size: 1.5rem; font-weight: 700; color: var(--svc-navy); font-feature-settings: "tnum"; }
.svc-domain-label { margin-top: 6px; font-size: .9rem; color: var(--svc-ink-soft); line-height: 1.5; }
.svc-result-link { margin-top: 16px; font-size: .98rem; font-weight: 700; }
@media (max-width: 640px) {
  .svc-result-flow { grid-template-columns: 1fr; }
  .svc-result-arrow-h { transform: rotate(90deg); padding: 2px 0; }
}
.svc-quote-card {
  background: var(--svc-bg-warm); border-left: 4px solid var(--svc-gold); border-radius: 0 10px 10px 0;
  padding: 22px 24px; font-size: 1.08rem; line-height: 1.9; color: var(--svc-ink);
}
.svc-quote-meta { margin-top: 12px; font-size: .92rem; color: var(--svc-ink-faint); }
.svc-placeholder-note {
  font-size: .92rem; color: var(--svc-ink-faint); border: 1px dashed var(--svc-line); border-radius: 8px;
  padding: 12px 16px; margin-top: 12px; line-height: 1.7;
}

/* ---------- フォーム（サービス側専用の見た目調整。native-form等の基盤クラスは共通のstyle.cssを流用） ---------- */
.service-scope .native-form { background: var(--svc-bg-warm); }
.service-scope .native-form input:focus, .service-scope .native-form textarea:focus {
  outline-color: var(--svc-navy); border-color: var(--svc-navy);
}
.service-scope .radio-item:has(input:checked) { border-color: var(--svc-navy); background: var(--svc-navy-soft); }
.service-scope .req { background: var(--svc-gold-soft); color: var(--svc-gold-dark); }

/* ---------- 代表プロフィール ---------- */
.svc-profile { display: grid; grid-template-columns: 220px 1fr; gap: 28px; align-items: start; }
.svc-profile img { border-radius: 12px; width: 100%; }
.svc-profile-name { font-size: 1.14rem; font-weight: 700; color: var(--svc-ink); }
.svc-profile-role { font-size: .96rem; color: var(--svc-ink-faint); margin-top: 4px; }
.svc-profile-bio { margin-top: 14px; font-size: 1.04rem; line-height: 1.9; }

/* ---------- 導入事例インタビュー（2026-07-17 AItegrity様事例で新設） ---------- */
.svc-case-summary {
  background: var(--svc-bg); border: 1px solid var(--svc-line); border-radius: 14px;
  padding: 28px 30px;
}
.svc-case-summary-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 32px; }
.svc-case-summary-list > div { display: flex; flex-direction: column; gap: 4px; }
.svc-case-summary-list dt {
  font-size: .9rem; font-weight: 700; color: var(--svc-navy);
}
.svc-case-summary-list dd { font-size: 1.04rem; color: var(--svc-ink-soft); line-height: 1.7; }
.svc-case-photo { display: flex; flex-direction: column; align-items: center; margin: 40px auto 0; max-width: 320px; }
.svc-case-photo img { width: 100%; border-radius: 14px; box-shadow: 0 8px 28px rgba(16,38,61,.14); }
.svc-case-photo p { margin-top: 12px; font-size: .96rem; color: var(--svc-ink-faint); text-align: center; }
.svc-case-qa-block + .svc-case-qa-block { margin-top: 40px; }
.svc-case-q {
  font-size: 1.02rem; font-weight: 700; color: var(--svc-ink); line-height: 1.75;
  background: var(--svc-navy-soft); border-radius: 10px; padding: 16px 20px; margin-top: 16px;
}
.svc-case-q::before { content: "Q "; color: var(--svc-navy); font-weight: 700; }
.svc-case-a { margin-top: 14px; font-size: 1.04rem; color: var(--svc-ink-soft); line-height: 1.9; }
.svc-case-a strong { color: var(--svc-ink); }

/* ---------- 予約導線（2026-08-06 Jicoo埋め込み廃止に伴い差し替え） ----------
   iframe埋め込みは「混乱の元」として廃止。カレンダーは別タブで開く1ボタンに集約した。
   .svc-jicoo-embed は使用箇所が無くなったため削除済み（復活させないこと）。 */
.svc-booking-action { text-align: center; padding: 8px 0 4px; }
.svc-booking-action .article-cta-btn { display: inline-block; }

/* ---------- サービス内サブナビ（4工程間の回遊） ---------- */
.svc-subnav { display: flex; gap: 8px; flex-wrap: wrap; margin: 28px 0 4px; }
.svc-subnav a {
  font-size: .94rem; padding: 8px 15px; border-radius: 999px; border: 1px solid var(--svc-line);
  color: var(--svc-ink-soft);
}
.svc-subnav a.active { background: var(--svc-navy); border-color: var(--svc-navy); color: #fff; }
.svc-subnav a:hover { text-decoration: none; border-color: var(--svc-navy); }

/* ---------- レスポンシブ ---------- */
@media (max-width: 960px) {
  .svc-hero .container { grid-template-columns: 1fr; }
  .svc-hero-figure { order: -1; }
  .svc-problem { grid-template-columns: 1fr; }
  .svc-flow { flex-wrap: wrap; }
  .svc-flow > .svc-flow-card { flex: 1 1 calc(50% - 4px); }
  .svc-flow > .svc-flow-arrow { display: none; }
  .svc-pillars { grid-template-columns: 1fr; }
  .svc-pillars-arrow { transform: rotate(90deg); }
  .svc-scale-grid { grid-template-columns: 1fr 1fr; }
  .svc-diff-grid { grid-template-columns: 1fr; }
  .svc-card-grid { grid-template-columns: 1fr 1fr; }
  .svc-domain-grid { grid-template-columns: repeat(3, 1fr); }
  .svc-price-grid { grid-template-columns: 1fr; }
  .svc-feature-row { grid-template-columns: 1fr; }
  .svc-feature-row.svc-feature-rev .svc-feature-figure { order: 0; }
  .svc-feature-row.svc-feature-rev .svc-feature-text { order: 0; }
  .svc-profile { grid-template-columns: 1fr; }
  .svc-profile img { max-width: 220px; }
}
@media (max-width: 640px) {
  .svc-hero { padding: 40px 0; }
  .svc-section { padding: 44px 0; }
  .svc-hero-actions .svc-btn, .svc-cta-actions .svc-btn { width: 100%; }
  .svc-flow { flex-direction: column; }
  .svc-flow > .svc-flow-card { flex: 1 1 auto; }
  .svc-scale-grid { grid-template-columns: 1fr; }
  .svc-card-grid, .svc-card-grid-2 { grid-template-columns: 1fr; }
  .svc-domain-grid { grid-template-columns: 1fr 1fr; }
  .svc-cta-band { padding: 32px 22px; }
  .svc-case-summary-list { grid-template-columns: 1fr; }
}

/* 提供形態の2択（2026-07-25 追加・/service/ 冒頭）。
   訪問者が「ツールを買うのか、伴走支援を買うのか」を判別できるようにするためのブロック。 */
.svc-offer-grid {
  display: grid; gap: 16px; margin-top: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .svc-offer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .svc-offer-grid-3 { grid-template-columns: repeat(3, 1fr); } }
.svc-offer {
  border: 1px solid var(--svc-line, #dfe3ea); border-radius: 12px;
  padding: 20px 22px; background: #fff;
}
.svc-offer-kind {
  display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .04em;
  padding: 4px 10px; border-radius: 999px; background: #eef2f8; color: #16437e;
}
.svc-offer-title { margin-top: 10px; font-size: 1.05rem; font-weight: 700; }
.svc-offer-desc { margin-top: 8px; font-size: .93rem; line-height: 1.75; }
.svc-offer-link { margin-top: 10px; font-size: .9rem; }
.svc-offer-note { margin-top: 16px; }

/* 3択ブロックの価格・向いている人（2026-07-25 価格掲載） */
.svc-offer-price {
  margin-top: 12px; font-size: 1rem; font-weight: 700; color: var(--svc-ink);
  line-height: 1.6;
}
.svc-offer-price-sub { font-size: .84rem; font-weight: 400; color: var(--svc-ink-soft); }
.svc-offer-fit {
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--svc-line, #dfe3ea);
  font-size: .88rem; line-height: 1.7; color: var(--svc-ink-soft);
}

/* /service/pricing/ フェーズ表示（2026-07-25 価格掲載） */
.svc-phase { margin-top: 28px; padding: 22px 24px; border: 1px solid var(--svc-line, #dfe3ea); border-radius: 12px; }
.svc-phase p { margin-top: 10px; line-height: 1.85; }
.svc-phase-head { margin-top: 0 !important; font-size: 1.12rem; font-weight: 700; color: var(--svc-ink); }
.svc-phase-no {
  display: inline-block; margin-right: 8px; padding: 3px 10px; border-radius: 999px;
  background: #eef2f8; color: #16437e; font-size: .8rem;
}
.svc-phase-price { margin-left: 6px; color: #16437e; }
.svc-plan-grid { display: grid; gap: 14px; grid-template-columns: 1fr; margin-top: 14px; }
@media (min-width: 720px) { .svc-plan-grid { grid-template-columns: 1fr 1fr; } }
.svc-plan { border: 1px solid var(--svc-line, #dfe3ea); border-radius: 10px; padding: 16px 18px; background: #fbfcfe; }
.svc-plan-name { font-weight: 700; font-size: .95rem; }
.svc-plan-price { margin-top: 6px !important; font-size: 1.05rem; font-weight: 700; color: #16437e; }
.svc-plan-desc { margin-top: 6px !important; font-size: .9rem; }
.svc-total { margin-top: 28px; padding: 22px 24px; border-radius: 12px; background: #eef2f8; }
.svc-total-head { font-weight: 700; font-size: 1.08rem; color: var(--svc-ink); }
.svc-total-list { margin-top: 12px; padding-left: 1.2em; }
.svc-total-list li { margin-top: 10px; line-height: 1.8; }

/* 価格ページの2部構成・中断基準ブロック（2026-07-25 第5版） */
.svc-track { margin-top: 36px; }
.svc-track-head {
  font-size: 1.15rem; font-weight: 700; color: var(--svc-ink);
  padding-bottom: 8px; border-bottom: 2px solid var(--svc-line, #dfe3ea);
}
.svc-phase-list { margin-top: 10px; padding-left: 1.2em; }
.svc-phase-list li { margin-top: 8px; line-height: 1.8; }
.svc-plan-note { margin-top: 8px !important; font-size: .82rem; color: var(--svc-ink-soft); line-height: 1.7; }
.svc-halt {
  margin-top: 28px; padding: 22px 24px; border-radius: 12px;
  background: #fbfcfe; border: 1px solid var(--svc-line, #dfe3ea);
}
.svc-halt p { margin-top: 10px; line-height: 1.85; }
.svc-halt-head { font-size: 1.12rem; font-weight: 700; color: var(--svc-ink); }
.svc-halt-sub { font-weight: 700; color: var(--svc-ink); margin-top: 18px !important; }
.svc-halt-list { margin-top: 8px; padding-left: 1.2em; }
.svc-halt-list li { margin-top: 6px; line-height: 1.8; }
.svc-halt-close { margin-top: 16px !important; font-weight: 700; color: var(--svc-ink); }

/* 進み方と費用のフロー（2026-07-26）。出口（ステップ5）を流れの一部として見せるのが核心。 */
.svc-flow-h { margin-top: 28px; font-size: 1.12rem; font-weight: 700; color: var(--svc-ink); }
.svc-steps { margin-top: 16px; padding: 0; list-style: none; counter-reset: svcstep; }
.svc-step {
  position: relative; counter-increment: svcstep;
  padding: 16px 20px 16px 52px; margin-top: 12px;
  border: 1px solid var(--svc-line, #dfe3ea); border-radius: 12px; background: #fff;
}
.svc-step::before {
  content: counter(svcstep);
  position: absolute; left: 16px; top: 16px;
  width: 24px; height: 24px; border-radius: 50%;
  background: #16437e; color: #fff; font-size: .82rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.svc-step p { margin-top: 8px; line-height: 1.85; }
.svc-step-title { margin-top: 0 !important; font-weight: 700; color: var(--svc-ink); }
.svc-step-fee {
  margin-top: 12px !important; padding: 8px 12px; border-radius: 8px;
  background: #eef2f8; color: #16437e; font-weight: 700; text-align: center;
}
.svc-fee-table { width: 100%; margin-top: 14px; border-collapse: collapse; }
.svc-fee-table th, .svc-fee-table td {
  padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--svc-line, #dfe3ea);
  font-size: .95rem;
}
.svc-fee-table th { font-size: .85rem; color: var(--svc-ink-soft); }
.svc-fee-table td:last-child { font-weight: 700; color: var(--svc-ink); }

/* CTAバンドの副次リンク（2026-07-26）。主CTAと競合しないようボタンにしない。 */
.svc-cta-sub { margin-top: 14px; font-size: .88rem; line-height: 2; }
.svc-cta-sub a { color: inherit; opacity: .85; text-decoration: underline; }
.svc-cta-sub a:hover { opacity: 1; }

/* 「どういうアポイントを取るか」（2026-07-26）。価格・0件時の説明・差別化を同時に担う。 */
.svc-policy {
  margin-top: 28px; padding: 22px 24px; border-radius: 12px;
  background: #fbfcfe; border: 1px solid var(--svc-line, #dfe3ea);
}
.svc-policy p { margin-top: 10px; line-height: 1.85; }
.svc-policy-head { font-size: 1.12rem; font-weight: 700; color: var(--svc-ink); }
.svc-policy-list { margin-top: 8px; padding-left: 1.2em; }
.svc-policy-list li { margin-top: 6px; line-height: 1.8; }
.svc-policy-close { margin-top: 16px !important; font-weight: 700; color: var(--svc-ink); }

/* 本文幅の共通トークン（2026-07-28 サイト修正第3弾 優先度4）。
   ページごとにインラインで max-width を書くと段差ができるため、本文（読み物）ブロックは
   このクラスに寄せる。カレンダー等のウィジェットは本文ではないので対象外。
   ※第2弾改訂2版でも同名クラスを定めているため、そちらを実装する際は二重定義にしないこと。 */
.service-scope .prose-block { max-width: 720px; }

/* 「この30分で起きること」の3ステップ（2026-07-28 第3弾 優先度3）。
   受け取る構図ではなく順序を見せるため、カードに手順番号を付ける。 */
.svc-step-num {
  display: inline-block; margin-bottom: 8px; padding: 2px 10px; border-radius: 999px;
  background: var(--svc-navy-soft); color: var(--svc-navy);
  font-size: .78rem; font-weight: 700; letter-spacing: .04em;
}

/* 簡易フォーム（従動線・2026-07-28 第3弾 優先度1）。
   カレンダー予約を主動線にするため、初期状態は閉じたアコーディオンにする。
   フォーム自体は残す＝当日日程を決められない相手の受け皿は必要。 */
.svc-fallback { border-top: 1px solid var(--svc-line); padding-top: 22px; }
.svc-fallback > summary {
  cursor: pointer; list-style: none; font-weight: 700; color: var(--svc-navy);
  font-size: 1.02rem; line-height: 1.7; padding: 4px 0;
}
.svc-fallback > summary::-webkit-details-marker { display: none; }
.svc-fallback > summary::before {
  content: "＋"; display: inline-block; width: 1.4em; color: var(--svc-gold); font-weight: 700;
}
.svc-fallback[open] > summary::before { content: "－"; }
.svc-fallback > summary:hover { text-decoration: underline; }
.svc-fallback-body { margin-top: 18px; }
/* 従動線の送信ボタン。塗りつぶしの強いCTAはページ内で1つ（カレンダー予約）に限定する。 */
.service-scope .svc-btn-sub {
  display: inline-block; width: auto; padding: 11px 22px; border-radius: 8px;
  background: transparent; color: var(--svc-navy);
  border: 1px solid var(--svc-navy); font-weight: 700; font-size: .96rem; line-height: 1.5;
}
.service-scope .svc-btn-sub:hover { background: var(--svc-navy-soft); }
.service-scope .svc-btn-sub[disabled] { opacity: .55; cursor: not-allowed; }

/* 「議事録を待たない」ブロック（2026-08-06 新設・_service_speed.html）。
   svc-policy と同じ枠の見た目に揃える（同じ「方針を説明する箱」なので別デザインにしない）。 */
.svc-speed {
  margin-top: 28px; padding: 22px 24px; border-radius: 12px;
  background: #fbfcfe; border: 1px solid var(--svc-line, #dfe3ea);
}
.svc-speed p { margin-top: 10px; line-height: 1.85; }
.svc-speed-head { font-size: 1.12rem; font-weight: 700; color: var(--svc-ink); }
.svc-speed-quotes { margin-top: 12px; padding-left: 1.2em; }
.svc-speed-quotes li { margin-top: 8px; line-height: 1.8; color: var(--svc-ink-2, #4a5568); }
.svc-speed-src { display: inline-block; margin-left: 6px; font-size: .84rem; color: var(--svc-ink-3, #7a8699); }
.svc-speed-lead { font-weight: 700; color: var(--svc-ink); }
.svc-speed-proof { font-size: .93rem; color: var(--svc-ink-2, #4a5568); }

/* 「断られた理由が次のリストに反映される」ブロック（2026-08-06 新設・_service_loop.html）。
   svc-policy / svc-speed と同じ枠に揃える。 */
.svc-loop {
  margin-top: 28px; padding: 22px 24px; border-radius: 12px;
  background: #fbfcfe; border: 1px solid var(--svc-line, #dfe3ea);
}
.svc-loop p { margin-top: 10px; line-height: 1.85; }
.svc-loop-head { font-size: 1.12rem; font-weight: 700; color: var(--svc-ink); }
.svc-loop-lead { font-weight: 700; color: var(--svc-ink); }
.svc-loop-list { margin-top: 10px; padding-left: 1.2em; }
.svc-loop-list li { margin-top: 12px; line-height: 1.8; }
.svc-loop-found { font-weight: 700; color: var(--svc-ink); }
.svc-loop-note { font-size: .93rem; color: var(--svc-ink-2, #4a5568); }

/* 「自社で毎日使っている＝余計なものが入っていない」ブロック（2026-08-06 新設・_service_dogfood.html）。
   svc-policy / svc-speed / svc-loop と同じ枠に揃える。 */
.svc-dogfood {
  margin-top: 28px; padding: 22px 24px; border-radius: 12px;
  background: #fbfcfe; border: 1px solid var(--svc-line, #dfe3ea);
}
.svc-dogfood p { margin-top: 10px; line-height: 1.85; }
.svc-dogfood-head { font-size: 1.12rem; font-weight: 700; color: var(--svc-ink); }
.svc-dogfood-lead { font-weight: 700; color: var(--svc-ink); }
.svc-dogfood-note { font-size: .93rem; color: var(--svc-ink-2, #4a5568); }