/* ==========================================================================
   WebMarketer Journal — style.css
   白基調・クリーンなエディトリアルデザイン。外部CDN依存なし・単一ファイル完結。

   タイポグラフィ方針:
     本文/UI  = 游ゴシック系(--font-sans)  … 依頼仕様どおり本文の基本書体
     見出し・引用等の要所のみ = 游明朝系(--font-serif) … 記者媒体としての格・可読性の抑揚
     メタ情報・カテゴリ表示・コード = 等幅(--font-mono) … 「引用・構造化」を視覚的に体現

   シグネチャ: 角カッコ([ ])モチーフ。カテゴリバッジ・pull quote(引用されやすい定義文)・
   ヒーローのタグラインで一貫使用。「AIに引用される」というメディアの核心コンセプトを
   タイポグラフィで表現する(装飾ではなく一次情報主義の可視化)。
   ========================================================================== */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, p, ul, ol, li, figure, figcaption, blockquote, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: none; cursor: pointer; }
table { border-collapse: collapse; }

/* ---------- Tokens ---------- */
:root {
  --bg: #ffffff;
  --bg-subtle: #f6f7f9;
  --bg-inverse: #12161d;
  --ink: #14181f;
  --ink-soft: #4c5561;
  --ink-faint: #8892a0;
  --rule: #e4e7ec;
  --rule-strong: #ccd2db;
  --brand-cyan: #2FB7C9;
  --brand-orange: #E07A3F;
  --brand: #17213c;
  --brand-strong: #0b1120;
  --focus-ring: #1b6de0;

  --cat-news: #b34a28;
  --cat-basics: #2f6b4f;
  --cat-technical: #1f5fa8;
  --cat-measurement: #6b4fa0;
  --cat-research: #14304f;
  --cat-case-study: #9c7a1f;
  --cat-global: #1b7a6e;
  --cat-strategy: #7a2e3d;

  --font-sans: "YuGothic", "Yu Gothic Medium", "Yu Gothic", "Hiragino Kaku Gothic ProN",
               "Hiragino Sans", "Noto Sans JP", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, sans-serif;
  --font-serif: "YuMincho", "Yu Mincho", "Hiragino Mincho ProN", "HiraMinProN-W3",
                "Noto Serif JP", serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --content-max: 720px;
  --page-max: 1180px;
  --radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ---------- Base ---------- */
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@media (min-width: 640px) {
  body { font-size: 16.5px; }
}

:focus-visible {
  outline: 2.5px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--brand);
  color: #fff;
  padding: 0.75rem 1.25rem;
  z-index: 200;
  font-size: 0.9rem;
}
.skip-link:focus { left: 1rem; top: 1rem; }

.wrap { max-width: var(--page-max); margin: 0 auto; padding: 0 1.25rem; }
@media (min-width: 960px) { .wrap { padding: 0 2.5rem; } }

/* ---------- Bracket motif(シグネチャ部品) ---------- */
.bracket-tag {
  display: inline-flex;
  align-items: baseline;
  gap: 0.08em;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent, var(--brand));
  white-space: nowrap;
}
.bracket-tag .bracket { opacity: 0.5; }
a.bracket-tag { transition: opacity 0.15s ease; }
a.bracket-tag:hover { opacity: 0.7; }

.dot { display: inline-block; width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--accent, var(--brand)); flex: none; }

/* ---------- Header ---------- */
.site-header {
  position: relative; z-index: 100;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 64px; gap: 1rem;
}
.brand {
  display: block; flex: none; line-height: 1.15; white-space: nowrap;
}
.brand-name {
  font-family: var(--font-serif); font-weight: 700;
  font-size: 1.22rem; letter-spacing: 0.01em; color: var(--ink);
}

.desk-nav { display: none; }
/* 2026-07-25 ヘッダーナビ折返し崩れ修正: CJKテキストはflexアイテムの既定min-width:auto
   により、単語区切り(スペース)が無いため任意の文字位置で改行され得る
   (「基礎・入」「門」のような崩れの原因)。960px以上ではまず横スクロール容器として
   flex-shrinkを許容しない構造にし、各リンクをwhite-space:nowrap+flex:noneで
   「項目単位」に固定する(文字単位の折返しを構造的に禁止)。 */
@media (min-width: 960px) {
  .desk-nav {
    display: flex; align-items: center;
    gap: 1rem;
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none; -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
  }
  .desk-nav::-webkit-scrollbar { display: none; height: 0; }
  .desk-nav a {
    display: inline-flex; align-items: center; gap: 0.45rem;
    font-size: 0.8rem; font-weight: 600; color: var(--ink-soft);
    padding: 0.4rem 0; border-bottom: 2px solid transparent;
    white-space: nowrap; flex: none;
    transition: color 0.15s ease, border-color 0.15s ease;
  }
  .desk-nav a:hover, .desk-nav a.is-active { color: var(--ink); border-color: var(--accent, var(--brand)); }
}
/* 1280px以上は9カテゴリを一列で見せる。項目内の文字は折り返さない。 */
@media (min-width: 1280px) {
  .desk-nav {
    flex: 1;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 0.75rem;
    overflow-x: visible;
    -webkit-mask-image: none;
            mask-image: none;
  }
}

.nav-toggle-input { position: absolute; opacity: 0; pointer-events: none; }
.nav-toggle-label {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 4px;
  flex: 0 0 40px; width: 40px; height: 40px; padding: 9px;
  cursor: pointer; border: 1px solid var(--rule-strong); border-radius: var(--radius);
}
@media (min-width: 960px) { .nav-toggle-label { display: none; } }
.nav-toggle-label span {
  display: block; width: 100%; height: 2px; flex: none;
  background: var(--ink); border-radius: 1px;
}
@media (max-width: 959px) {
  .site-header .wrap { position: relative; padding-right: 4.75rem; }
  .nav-toggle-label {
    display: inline-flex !important; position: absolute; right: 1.25rem; top: 50%;
    transform: translateY(-50%); z-index: 2; background: var(--bg);
  }
}

.mobile-nav {
  /* 注意: .wrapクラスをここで併用しない。.site-header .wrap{display:flex}(詳細度0,2,0)が
     このルール(詳細度0,1,0)より強く勝ってしまい、非表示のはずのモバイルメニューが常時
     展開表示されてしまう不具合を過去に踏んだ(CSS詳細度の衝突)。paddingは独自に持つ。 */
  display: none; border-top: 1px solid var(--rule); background: var(--bg);
  padding: 0.5rem 1.25rem 1rem;
}
.mobile-nav a {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.65rem 0; font-size: 0.95rem; font-weight: 600; color: var(--ink-soft);
  border-bottom: 1px solid var(--rule);
}
.mobile-nav a:last-child { border-bottom: none; }
@media (min-width: 960px) { .mobile-nav { display: none !important; } }
.nav-toggle-input:checked ~ .mobile-nav { display: block; }

/* ---------- Hero slider(トップのみ・2026-07-24全面リッチ化) ----------
   CSS scroll-snap + 軽量vanilla JS(assets/js/hero-slider.js)。外部ライブラリ不使用。
   背景はassets/img/hero/slide-N-bg.svgを参照する構造にし、Image2.0復旧後は同名ファイルを
   差し替えるだけで写真背景へ移行できる設計にしてある。 */
.hero-slider { position: relative; background: var(--bg-inverse); }
.hero-slider-track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
}
.hero-slider-track::-webkit-scrollbar { display: none; height: 0; }
.hero-slide {
  flex: 0 0 100%; scroll-snap-align: start; min-height: 440px;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  background-color: var(--bg-inverse);
  display: flex; align-items: center;
}
@media (min-width: 720px) { .hero-slide { min-height: 520px; } }

/* ---------- FVモバイル専用背景(2026-08-07 ディレクター指摘・第2ラウンド) ----------
   background-size:coverのクロップ方向はブレークポイントで直交する
   (実測: デスクトップ=高さ方向クロップ・幅は全表示/モバイル=幅方向クロップ・高さは全表示)。
   デスクトップ用に右20%へ寄せた絵は、モバイルの中央だけを見せる横クロップでは
   画面外に落ちて単色ベタ塗りに見えてしまう。かつモバイルはテキストがほぼ全幅を使うため
   デスクトップと同じ「左右分割」の構図はモバイルでは成立しない(左右に絵を置く隙間が無い)。
   → 719px以下だけ、上下の帯にだけ絵を置いた専用画像(slide-N-bg-mobile.jpg。
   生成元=_work/06_デザイン素材/gen_hero_visuals.py)に差し替える。
   pages.py側はslide-N-bg.jpgのURLをインラインstyleで出力するのみで変更不要にするため、
   [style*="..."]属性セレクタでそのインラインstyleを!importantで上書きする
   (background-imageはインラインstyle由来のためCSS側は!important必須)。 */
@media (max-width: 719px) {
  .hero-slide[style*="slide-1-bg.jpg"] { background-image: url(/assets/img/hero/slide-1-bg-mobile.jpg) !important; }
  .hero-slide[style*="slide-2-bg.jpg"] { background-image: url(/assets/img/hero/slide-2-bg-mobile.jpg) !important; }
  .hero-slide[style*="slide-3-bg.jpg"] { background-image: url(/assets/img/hero/slide-3-bg-mobile.jpg) !important; }
}

.hero-slide-inner { padding: 3.5rem 1.25rem; max-width: 640px; margin: 0 auto; width: 100%; }
@media (min-width: 960px) { .hero-slide-inner { padding: 3.5rem 2.5rem; } }
.hero-wordmark {
  margin-bottom: 2rem;
  font-family: var(--font-serif); font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  font-weight: 700; letter-spacing: 0.03em; color: #fff;
}
.hero-slide .hero-tagline {
  font-family: var(--font-serif); font-weight: 700; color: #fff;
  font-size: clamp(1.7rem, 5.4vw, 2.7rem); line-height: 1.42; max-width: 16ch;
}
/* 2026-07-26: 鈴木さん指示でFVタグラインの装飾ブラケット([ ])をマークアップから削除した
   (lib/pages.py _hero_slider_html())ため、この専用スコープルールは対象が無くなり不要。
   カテゴリバッジ等の他の.bracket-tag .bracket(102-115行目)・.pillar h3 .bracket(646行目)は
   別要素・別デザイン意図で現役のため変更していない。 */
.hero-slide .hero-subcopy {
  margin-top: 1.35rem; max-width: 38ch; font-size: 1rem; line-height: 1.9;
  color: rgba(255,255,255,0.82); word-break: keep-all; overflow-wrap: anywhere;
}
.hero-slide .hero-meta {
  margin-top: 2rem; display: flex; gap: 1.5rem; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 0.72rem; color: rgba(255,255,255,0.55); letter-spacing: 0.04em;
}
/* 注目記事スライドの2カラム化(デスクトップのみサムネイルを見せる) */
.hero-slide-inner--split { display: grid; gap: 2.5rem; align-items: center; }
.hero-feature-thumb { display: none; }
@media (min-width: 960px) {
  .hero-slide-inner--split { grid-template-columns: 1.15fr 1fr; max-width: 1080px; }
  .hero-feature-thumb {
    display: block; border-radius: var(--radius); overflow: hidden;
    aspect-ratio: 3 / 2;
    box-shadow: 0 28px 56px -26px rgba(0,0,0,0.65);
    transition: transform 0.2s ease;
  }
  .hero-feature-thumb:hover { transform: translateY(-3px); }
  .hero-feature-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
}

.hero-eyebrow {
  display: inline-block; font-family: var(--font-mono); font-size: 0.78rem;
  letter-spacing: 0.1em; color: #8FE0EC; margin-bottom: 1.1rem;
}
.hero-feature-title {
  font-family: var(--font-serif); font-weight: 700; color: #fff;
  font-size: clamp(1.4rem, 3.6vw, 2rem); line-height: 1.5; max-width: 20ch;
}
.hero-feature-title a { color: #fff; }
.hero-feature-title a:hover { text-decoration: underline; text-underline-offset: 4px; }
.hero-feature-lead { margin-top: 1.1rem; max-width: 50ch; font-size: 0.98rem; line-height: 1.85; color: rgba(255,255,255,0.82); }
.hero-cta {
  display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.75rem;
  padding: 0.85rem 1.6rem; background: var(--brand-orange, #E07A3F); color: #fff;
  font-weight: 700; font-size: 0.92rem; border-radius: 2px;
  transition: background 0.15s ease, transform 0.15s ease;
}
.hero-cta:hover { background: #c96428; transform: translateY(-1px); }
.hero-stats {
  margin-top: 1.75rem; display: inline-flex; font-family: var(--font-mono);
  font-size: 0.82rem; color: rgba(255,255,255,0.7); letter-spacing: 0.03em;
  border: 1px dashed rgba(255,255,255,0.3); padding: 0.5rem 0.9rem; border-radius: 2px;
}
.hero-dots {
  position: absolute; left: 50%; bottom: 1.5rem; transform: translateX(-50%);
  display: flex; gap: 0.6rem; z-index: 2;
}
.hero-dot {
  width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.35);
  border: none; padding: 0; cursor: pointer; transition: background 0.2s ease, transform 0.2s ease;
}
.hero-dot:hover { background: rgba(255,255,255,0.6); }
.hero-dot.is-active { background: #fff; transform: scale(1.35); }
/* JS未実行時のフォールバック: スクロールスナップだけで手動スワイプ/横スクロールは機能する */
.hero-slider-track:focus-within { outline: none; }

/* ---------- Section shell ---------- */
.section { padding: 3.25rem 0; }
.section + .section { border-top: 1px solid var(--rule); }
.section:nth-of-type(even) { background: var(--bg-subtle); }
.section-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  margin-bottom: 1.75rem; flex-wrap: wrap;
}
.section-title { display: flex; align-items: baseline; gap: 0.7rem; }
.section-title h2 {
  font-family: var(--font-serif); font-size: 1.5rem; font-weight: 700; color: var(--ink);
}
.section-desc { color: var(--ink-soft); font-size: 0.92rem; max-width: 56ch; margin-top: 0.35rem; }
.section-more {
  font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; color: var(--accent, var(--brand));
  white-space: nowrap;
}
.section-more:hover { text-decoration: underline; }

/* ---------- Card grid ---------- */
.card-grid { display: grid; grid-template-columns: 1fr; gap: 1.6rem; }
@media (min-width: 640px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } }

.card {
  display: flex; flex-direction: column; gap: 0.85rem;
  border: 1px solid var(--rule); border-top: 3px solid var(--accent, var(--brand));
  border-radius: var(--radius); padding: 1.5rem;
  background: var(--bg);
  box-shadow: 0 1px 2px rgba(20,24,31,0.04);
  transition: box-shadow 0.22s ease, transform 0.22s ease, border-color 0.18s ease;
}
.card:hover { box-shadow: 0 16px 36px -20px rgba(20,24,31,0.4); transform: translateY(-3px); }
.card-thumb {
  margin: -1.5rem -1.5rem 0.3rem; border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden; aspect-ratio: 3 / 2; background: var(--bg-subtle);
}
.card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s ease; }
.card:hover .card-thumb img { transform: scale(1.035); }
.card-badges { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.card-provider { font-size: 0.72rem; color: var(--ink-faint); font-family: var(--font-mono); }
.card h3 { font-size: 1.05rem; line-height: 1.55; font-weight: 700; color: var(--ink); }
.card h3 a::after { content: ""; position: absolute; inset: 0; }
.card h3 a { position: static; }
.card { position: relative; }
.card-excerpt {
  font-size: 0.87rem; color: var(--ink-soft); line-height: 1.75; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.card-meta {
  display: flex; align-items: center; gap: 0.9rem; font-size: 0.74rem; color: var(--ink-faint);
  font-family: var(--font-mono); padding-top: 0.6rem; border-top: 1px solid var(--rule);
}
/* ---------- Desk list rows(トップのカテゴリ別セクション) ---------- */
.row-list { display: flex; flex-direction: column; }
.row-item {
  display: flex; align-items: baseline; gap: 1rem; padding: 1rem 0.75rem;
  margin: 0 -0.75rem; border-bottom: 1px solid var(--rule); border-radius: 2px;
  transition: background 0.15s ease, padding-left 0.15s ease;
}
.row-item:first-child { }
.row-item:hover { background: var(--bg-subtle); }
.row-item .dot { margin-top: 0.55em; }
.row-item-body { flex: 1; min-width: 0; }
.row-item h3 { font-size: 0.98rem; font-weight: 700; line-height: 1.6; }
.row-item h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.row-item-meta { margin-top: 0.3rem; font-size: 0.76rem; color: var(--ink-faint); font-family: var(--font-mono); display: flex; gap: 0.75rem; flex-wrap: wrap; }

/* ---------- Category hub header ---------- */
.category-band { padding: 3rem 0 2.5rem; border-bottom: 1px solid var(--rule); background: var(--bg-subtle); }
.category-band .eyebrow { color: var(--accent, var(--brand)); }
.category-band h1 { font-family: var(--font-serif); font-size: clamp(1.7rem, 4vw, 2.3rem); margin-top: 0.6rem; }
.category-band p { margin-top: 0.85rem; color: var(--ink-soft); max-width: 62ch; line-height: 1.9; }
.eyebrow { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; font-weight: 700; }

/* ---------- Breadcrumb ---------- */
.breadcrumb {
  display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center;
  font-family: var(--font-mono); font-size: 0.74rem; color: var(--ink-faint);
  max-width: var(--content-max); margin: 0 auto; padding: 1.5rem 1.25rem 0;
}
.breadcrumb > * { min-width: 0; overflow-wrap: anywhere; }
.breadcrumb a:hover { color: var(--ink); text-decoration: underline; }
.breadcrumb .sep { opacity: 0.5; }

/* ---------- Article header ---------- */
.article-header { max-width: var(--content-max); margin: 0 auto; padding: 1.25rem 1.25rem 0; }
.article-title {
  font-family: var(--font-serif); font-weight: 700; color: var(--ink);
  font-size: clamp(1.55rem, 4.4vw, 2.15rem); line-height: 1.55; margin-top: 1rem;
  overflow-wrap: anywhere;
}
.article-lead { margin-top: 1.1rem; font-size: 1.02rem; color: var(--ink-soft); line-height: 1.9; }
.article-meta {
  margin-top: 1.5rem; padding: 1rem 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; align-items: center;
  font-size: 0.8rem; color: var(--ink-soft);
}
.article-meta .meta-item { display: inline-flex; align-items: center; gap: 0.4rem; }
.article-meta .meta-label { font-family: var(--font-mono); color: var(--ink-faint); font-size: 0.7rem; }

/* 記事の内容を言葉の反復ではなく、編集デスク別の世界観で伝えるイメージビジュアル。 */
.article-cover {
  max-width: var(--content-max); margin: 1.75rem auto 0;
  border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 3 / 2; background: var(--bg-subtle);
}
.article-cover img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- TOC ---------- */
.toc {
  max-width: var(--content-max); margin: 1.75rem auto 0; padding: 1.25rem 1.5rem;
  border: 1px solid var(--rule); border-radius: var(--radius); background: var(--bg-subtle);
}
.toc summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.08em; font-weight: 700; color: var(--ink-soft);
  text-transform: uppercase;
}
.toc summary::-webkit-details-marker { display: none; }
.toc summary::after { content: "\2212"; font-family: var(--font-mono); }
.toc:not([open]) summary::after { content: "+"; }
.toc-list { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.55rem; }
.toc-list a {
  display: flex; gap: 0.75rem; font-size: 0.9rem; color: var(--ink);
}
.toc-list a:hover { color: var(--brand); }
.toc-num { font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-faint); flex: none; }

/* ---------- 記事メディア資産(スライド/音声/動画の自動埋め込み・2026-07-25追加) ----------
   assets/media/<記事id小文字>/ にファイルが1本でもあれば目次直後に表示するカード。
   モバイル既定→min-width:640pxで拡張する、サイト全体のブレークポイント方針に合わせる。 */
.article-media {
  max-width: var(--content-max); margin: 1.75rem auto 0; padding: 1.35rem 1.25rem 1.5rem;
  border: 1px solid var(--rule); border-radius: var(--radius); background: var(--bg-subtle);
  display: flex; flex-direction: column; gap: 1.5rem;
}
@media (min-width: 640px) {
  .article-media { padding: 1.6rem 1.75rem 1.85rem; gap: 1.75rem; }
}
.article-media-head { display: flex; flex-direction: column; gap: 0.3rem; }
.article-media-head .eyebrow {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; font-weight: 700;
  color: var(--brand); text-transform: uppercase;
}
.article-media-head h2 { font-family: var(--font-serif); font-size: 1.1rem; font-weight: 700; color: var(--ink); margin: 0; }
.article-media-note { font-size: 0.76rem; color: var(--ink-faint); margin: 0; line-height: 1.6; }
.article-media-item { display: flex; flex-direction: column; gap: 0.6rem; }
.article-media-label {
  font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.04em; font-weight: 700;
  color: var(--ink-soft); margin: 0;
}
.article-media-frame {
  width: 100%; height: 280px; border: 1px solid var(--rule); border-radius: var(--radius);
  overflow: hidden; background: #ffffff;
}
@media (min-width: 640px) {
  .article-media-frame { height: 480px; }
}
.article-media-frame object { width: 100%; height: 100%; border: 0; display: block; }
.article-media-frame-video { background: var(--bg-inverse); }
.article-media-video { width: 100%; height: 100%; display: block; object-fit: contain; background: var(--bg-inverse); }
.article-media-fallback { padding: 1.5rem; font-size: 0.85rem; color: var(--ink-soft); line-height: 1.8; }
.article-media-fallback a { color: var(--brand); font-weight: 600; }
.article-media-audio { width: 100%; display: block; }
.article-media-download {
  align-self: flex-start; font-family: var(--font-mono); font-size: 0.78rem; font-weight: 700;
  color: var(--brand); border: 1px solid var(--rule-strong); border-radius: var(--radius);
  padding: 0.5rem 0.9rem; background: var(--bg); transition: background 0.15s ease;
}
.article-media-download:hover { background: #ffffff; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Article body ---------- */
.article-body { max-width: var(--content-max); margin: 0 auto; padding: 2.25rem 1.25rem 1rem; }
.article-body > *:first-child { margin-top: 0; }
.article-body p { font-size: 1rem; line-height: 1.95; color: var(--ink); margin: 1.35rem 0; }
.article-body strong { font-weight: 700; }
.article-body ul, .article-body ol { margin: 1.4rem 0; padding-left: 1.4rem; }
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body li { margin: 0.55rem 0; line-height: 1.85; }
.article-body li::marker { color: var(--ink-faint); }

h2.section-heading {
  display: flex; align-items: baseline; gap: 0.7rem;
  font-family: var(--font-serif); font-weight: 700; color: var(--ink);
  font-size: clamp(1.28rem, 3vw, 1.55rem); margin: 3.25rem 0 1.25rem; scroll-margin-top: 84px;
}
.article-body h2.section-heading:first-of-type { margin-top: 0.5rem; }
.section-no { font-family: var(--font-mono); font-size: 0.82rem; font-weight: 600; color: var(--brand); opacity: 0.5; }
.article-body h3 { font-size: 1.08rem; font-weight: 700; margin: 1.75rem 0 0.75rem; scroll-margin-top: 84px; }

/* pull quote(引用されやすい定義文) */
blockquote.pullquote {
  position: relative; margin: 3rem 0; padding: 0.4rem 2.6rem;
}
.pullquote-label {
  display: block; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.09em;
  color: var(--ink-faint); text-transform: uppercase; margin-bottom: 0.7rem;
}
.pullquote p {
  font-family: var(--font-serif); font-weight: 700; color: var(--ink);
  font-size: clamp(1.15rem, 2.6vw, 1.45rem); line-height: 1.85; margin: 0;
}
.pullquote::before, .pullquote::after {
  position: absolute; font-family: var(--font-serif); font-size: 2.6rem; color: var(--brand); opacity: 0.24; line-height: 1;
}
.pullquote::before { content: "\FF3B"; left: -0.15rem; top: 1.5rem; }
.pullquote::after { content: "\FF3D"; right: -0.15rem; top: 1.5rem; }

/* 図解プレースホルダ */
figure.diagram-placeholder {
  position: relative; margin: 2.75rem 0; padding: 2.75rem 1.5rem;
  border: 1.5px dashed var(--rule-strong); border-radius: var(--radius);
  background: var(--bg-subtle); text-align: center;
}
figure.diagram-placeholder .corner { position: absolute; width: 14px; height: 14px; }
.corner-tl { top: -1px; left: -1px; border-top: 2px solid var(--ink-faint); border-left: 2px solid var(--ink-faint); }
.corner-tr { top: -1px; right: -1px; border-top: 2px solid var(--ink-faint); border-right: 2px solid var(--ink-faint); }
.corner-bl { bottom: -1px; left: -1px; border-bottom: 2px solid var(--ink-faint); border-left: 2px solid var(--ink-faint); }
.corner-br { bottom: -1px; right: -1px; border-bottom: 2px solid var(--ink-faint); border-right: 2px solid var(--ink-faint); }
.diagram-label {
  display: block; font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.05em;
  color: var(--ink-soft); margin-bottom: 0.75rem;
}
figure.diagram-placeholder figcaption {
  font-family: var(--font-serif); font-style: italic; color: var(--ink-soft);
  font-size: 0.95rem; max-width: 480px; margin: 0 auto; line-height: 1.8;
}

/* 図解SVG埋め込み(2026-07-24 TASK-164で追加。diagram-placeholderの後継=SVGが
   用意された図解はこちらでレンダリングする。破線枠・📊ラベルは使わない=もう
   「制作中」ではなく完成した図解であることを見た目でも示す) */
figure.diagram-embed { margin: 2.75rem 0; }
figure.diagram-embed svg {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: #ffffff;
}
figure.diagram-embed figcaption {
  margin-top: 0.85rem; font-family: var(--font-serif); font-style: italic;
  color: var(--ink-soft); font-size: 0.92rem; text-align: center; line-height: 1.8;
}

/* 表 */
.table-scroll { overflow-x: auto; margin: 2.25rem 0; border: 1px solid var(--rule); border-radius: var(--radius); -webkit-overflow-scrolling: touch; }
.table-scroll table { width: 100%; min-width: 480px; font-size: 0.9rem; }
.table-scroll th, .table-scroll td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; line-height: 1.65; }
.table-scroll thead th { background: var(--bg-subtle); font-weight: 700; white-space: nowrap; }
.table-scroll tbody tr:last-child td { border-bottom: none; }

/* チェックリスト */
.checklist { padding-left: 0; margin: 1.5rem 0; }
.checklist-item { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.4rem 0; }
.check-box { flex: none; width: 1.05em; height: 1.05em; margin-top: 0.28em; border: 1.5px solid var(--rule-strong); border-radius: 3px; }
.checklist-item.is-checked .check-box { background: var(--brand); border-color: var(--brand); }

/* コード */
code { font-family: var(--font-mono); font-size: 0.88em; background: var(--bg-subtle); padding: 0.15em 0.4em; border-radius: 3px; }
/* 2026-07-26改修(鈴木さん指示: プロンプト掲載箇所には必ずコピーボタン): 従来はpre自体が
   "code-block"クラスを持っていたが、コピーボタン(.copy-btn)をpreの兄弟要素として絶対配置し
   pre内のoverflow-x横スクロールに追随させず常に右上に固定表示するため、外枠を
   <div class="code-block">に変更した(lib/markdown_engine.py render_blocks())。
   ダーク背景・文字色など見た目はpre.code-blockのものをそのままdiv.code-blockへ移設。 */
.code-block {
  position: relative; background: var(--brand-strong); color: #e7ebf2; border-radius: 6px;
  margin: 2.25rem 0;
}
.code-block pre {
  margin: 0; padding: 1.35rem 1.5rem; padding-top: 3rem;
  overflow-x: auto; font-size: 0.84rem; line-height: 1.75; -webkit-overflow-scrolling: touch;
}
.code-block pre code { background: none; padding: 0; color: inherit; }
.code-block .copy-btn {
  position: absolute; top: 0.75rem; right: 0.75rem; z-index: 1;
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.4rem 0.85rem; font-family: var(--font-sans); font-size: 0.74rem; font-weight: 700;
  color: #e7ebf2; background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.28);
  border-radius: 4px; white-space: nowrap; cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.code-block .copy-btn:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.45); }
.code-block .copy-btn:focus-visible { outline: 2.5px solid var(--focus-ring); outline-offset: 2px; }
.code-block .copy-btn.is-copied {
  background: var(--brand-cyan); border-color: var(--brand-cyan); color: #0b1120;
}
@media (max-width: 480px) {
  .code-block pre { padding-top: 3.4rem; }
  .code-block .copy-btn { top: 0.6rem; right: 0.6rem; padding: 0.35rem 0.65rem; font-size: 0.68rem; }
}

/* ※要確認 インライン注記 */
.note-flag { border-bottom: 1px dotted #a9762a; color: #7c500f; background: #fbf1de; padding: 0.03em 0.32em; border-radius: 2px; font-size: 0.95em; white-space: nowrap; }

/* FAQ アコーディオン(details/summary・JSなし) */
.faq-list { margin-top: 0.5rem; }
.faq-item { border-bottom: 1px solid var(--rule); }
.faq-item summary {
  cursor: pointer; list-style: none; position: relative; padding: 1.15rem 2.1rem 1.15rem 0;
  font-weight: 700; color: var(--ink); line-height: 1.6; font-size: 0.98rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; position: absolute; right: 0.15rem; top: 1.0rem;
  font-family: var(--font-mono); font-size: 1.1rem; color: var(--brand);
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-answer { padding: 0 0.25rem 1.4rem; color: var(--ink-soft); }
.faq-answer p { margin: 0.5rem 0; font-size: 0.96rem; line-height: 1.85; }

/* 結論サマリー ボックス化(2026-07-25 読者体験監査 構造改善①)
   markdown_engine.render_blocks()が「結論サマリー」h2+直後の本文段落群を
   .summary-boxでラップする。既存の.course-cta(背景--bg-subtle・左ボーダー--brand)と
   同じ意匠言語で統一し、白基調エディトリアルと調和させる(過剰装飾はしない)。 */
.summary-box {
  max-width: var(--content-max); margin: 2.75rem auto; padding: 1.75rem 2rem;
  border: 1px solid var(--rule); border-left: 4px solid var(--brand);
  background: var(--bg-subtle); border-radius: var(--radius);
}
.summary-box h2.section-heading { margin-top: 0 !important; margin-bottom: 1rem; }
.summary-box p { margin: 0.9rem 0; }
.summary-box p:first-of-type { margin-top: 0; }
.summary-box > :last-child { margin-bottom: 0; }

/* 講座導線CTA */
.course-cta {
  max-width: var(--content-max); margin: 3.5rem auto 0; padding: 1.75rem 2rem;
  border: 1px solid var(--rule); border-left: 4px solid var(--brand);
  background: var(--bg-subtle); border-radius: var(--radius);
}
.course-cta .eyebrow { color: var(--ink-faint); }
.course-cta p { margin-top: 0.65rem; font-size: 0.95rem; line-height: 1.85; color: var(--ink); }
.course-cta .course-link-pending {
  display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.85rem;
  font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-faint);
  border: 1px dashed var(--rule-strong); padding: 0.4rem 0.75rem; border-radius: 2px;
}
/* 講座導線CTA 実リンクbox(2026-07-24 TASK-167 WP-J4: course_link実リンク化) */
.course-cta-link-box {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.1rem;
  margin-top: 1.1rem;
}
.course-cta-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.7rem 1.35rem; background: var(--brand-orange, #E07A3F); color: #fff;
  font-weight: 700; font-size: 0.88rem; border-radius: 2px;
  transition: background 0.15s ease, transform 0.15s ease;
}
.course-cta-btn:hover { background: #c96428; transform: translateY(-1px); }
.course-cta-btn-secondary {
  font-size: 0.82rem; font-weight: 700; color: var(--brand);
}
.course-cta-btn-secondary:hover { text-decoration: underline; text-underline-offset: 3px; }
/* 記事末・主導線の下に置く編集長noteの1行(2026-08-02)。 */
.editor-note-line {
  margin-top: 1.4rem; padding: 0.95rem 1.1rem;
  background: var(--bg-subtle, #faf8f5);
  border-left: 2px solid var(--rule, rgba(0,0,0,0.12));
}
.editor-note-line p {
  margin: 0; font-size: 0.86rem; line-height: 1.8; color: var(--ink-faint);
}
.editor-note-line a {
  display: inline-block; margin-left: 0.35rem;
  color: var(--brand); font-weight: 700; white-space: nowrap;
}
.editor-note-line a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* 編集長の個人noteへの導線(2026-08-02)。講座CTAより弱く、本文より目立つ位置に置く。 */
.course-cta-note {
  margin-top: 1rem !important; padding-top: 0.9rem;
  border-top: 1px solid var(--rule, rgba(0,0,0,0.08));
  font-size: 0.86rem !important; color: var(--ink-faint) !important;
}
.course-cta-note a {
  display: inline-block; margin-left: 0.35rem;
  color: var(--brand); font-weight: 700; white-space: nowrap;
}
.course-cta-note a:hover { text-decoration: underline; text-underline-offset: 3px; }
.course-cta-preview-note {
  flex-basis: 100%; margin-top: 0 !important; font-size: 0.76rem !important;
  color: var(--ink-faint) !important; font-family: var(--font-mono);
}

/* トップ「このメディアについて」バンド(E-E-A-T 4本柱+監修者。2026-07-24ウルトラコード改修) */
.home-about { background: var(--bg-inverse); color: #fff; padding: 4rem 0; }
.home-about .eyebrow { color: var(--brand-cyan); }
.home-about-grid { display: grid; gap: 2.75rem; grid-template-columns: 1fr; }
@media (min-width: 960px) { .home-about-grid { grid-template-columns: 1.6fr 1fr; align-items: start; } }
.home-about h2 { font-family: var(--font-serif); font-size: 1.55rem; line-height: 1.5; margin-top: 0.5rem; }
.home-about-lead { margin-top: 0.9rem; font-size: 0.92rem; line-height: 1.9; color: rgba(255,255,255,0.78); }
.home-about-lead a { color: var(--brand-cyan); text-decoration: underline; text-underline-offset: 3px; }
.pillar-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1.75rem; }
@media (min-width: 640px) { .pillar-grid { grid-template-columns: 1fr 1fr; } }
.pillar { border: 1px solid rgba(255,255,255,0.16); border-radius: var(--radius); padding: 1.1rem 1.25rem; }
.pillar h3 { font-size: 0.95rem; font-weight: 700; }
.pillar h3 .bracket { color: var(--brand-cyan); font-weight: 400; margin: 0 0.15em; }
.pillar p { margin-top: 0.5rem; font-size: 0.82rem; line-height: 1.8; color: rgba(255,255,255,0.72); }
.home-about-supervisor {
  border: 1px solid rgba(255,255,255,0.16); border-radius: var(--radius);
  padding: 1.75rem 1.5rem; text-align: center; background: rgba(255,255,255,0.04);
}
.home-about-supervisor img {
  /* 2026-07-25 監修者写真位置ずれ修正: 全体リセット(img,svg{display:block})によりimgが
     ブロック要素化されているため、親.home-about-supervisorのtext-align:centerは効かず
     (text-alignはインライン内容にのみ作用)、写真が左端に寄っていた。margin:0 autoで
     ブロック要素として明示的に中央寄せする。 */
  width: 96px; height: 96px; margin: 0 auto; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 3px var(--bg-inverse), 0 0 0 4px rgba(255,255,255,0.35);
}
.home-about-supervisor .credit-eyebrow { margin-top: 1rem; color: rgba(255,255,255,0.55); }
.home-about-supervisor h3 { font-size: 1.1rem; font-weight: 700; }
.home-about-supervisor p { margin-top: 0.3rem; font-size: 0.82rem; color: rgba(255,255,255,0.7); }
.home-about-link { display: inline-block; margin-top: 1rem; font-size: 0.85rem; font-weight: 700; color: var(--brand-cyan); }
.home-about-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* 監修者・編集部リッチカード(2026-07-24追加。旧.author-blockを刷新) */
.credit-cards {
  max-width: var(--content-max); margin: 3rem auto 0; padding: 2rem 1.25rem 0;
  border-top: 1px solid var(--rule); display: grid; gap: 1.5rem; grid-template-columns: 1fr;
}
@media (min-width: 640px) { .credit-cards { grid-template-columns: 1fr 1fr; } }
.credit-card {
  display: flex; gap: 1.1rem; align-items: flex-start; padding: 1.5rem;
  border: 1px solid var(--rule); border-radius: var(--radius); background: var(--bg-subtle);
}
.credit-avatar-photo {
  flex: none; width: 64px; height: 64px; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--rule);
}
.credit-avatar-wordmark {
  flex: none; width: 64px; height: 64px; border-radius: 50%; background: var(--brand); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-size: 1.05rem; font-weight: 700; letter-spacing: 0.04em;
}
.credit-eyebrow {
  display: block; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em;
  color: var(--ink-faint); text-transform: uppercase; margin-bottom: 0.35rem;
}
.credit-card h3 { font-size: 1.02rem; font-weight: 700; }
.credit-title { margin-top: 0.15rem; font-size: 0.82rem; color: var(--ink-soft); }
.credit-bio { margin-top: 0.6rem; font-size: 0.85rem; color: var(--ink-soft); line-height: 1.8; }
.credit-link { display: inline-block; margin-top: 0.75rem; font-size: 0.82rem; font-weight: 700; color: var(--brand); }
.credit-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 記事ページ2カラムレイアウト+サイドバー(2026-07-24追加) ----------
   モバイル(既定): display:blockでDOM順どおり(本文→サイドバー)にスタックする。
   デスクトップ(1180px〜): グリッドで本文の右にサイドバーを配置する。 */
.article-layout-grid { display: block; }
@media (min-width: 1180px) {
  .article-layout-grid {
    display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 3rem;
    align-items: start; max-width: 1180px; margin: 0 auto; padding: 0 2.5rem;
  }
  .article-main-col { min-width: 0; }
}
.article-sidebar { margin: 3rem 1.25rem 0; }
@media (min-width: 1180px) {
  .article-sidebar { margin: 6.5rem 0 0; position: sticky; top: 24px; }
}
.sidebar-banner {
  border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden;
  margin-bottom: 1.5rem; background: var(--bg);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.sidebar-banner:last-child { margin-bottom: 0; }
.sidebar-banner:hover { box-shadow: 0 12px 28px -18px rgba(20,24,31,0.35); transform: translateY(-2px); }
.sidebar-banner-art {
  aspect-ratio: 3 / 2; background: var(--bg-inverse); display: flex; align-items: center;
  justify-content: center; position: relative; overflow: hidden;
}
.sidebar-banner-art svg { width: 56%; height: 56%; opacity: 0.9; }
.sidebar-banner-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sidebar-banner-body { padding: 1.1rem 1.25rem 1.35rem; }
.sidebar-banner .eyebrow { color: var(--ink-faint); display: block; margin-bottom: 0.35rem; }
.sidebar-banner h3 { font-size: 0.95rem; font-weight: 700; line-height: 1.5; }
.sidebar-banner p { margin-top: 0.4rem; font-size: 0.8rem; color: var(--ink-soft); line-height: 1.7; }
.sidebar-banner-cta {
  display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 0.8rem;
  font-size: 0.8rem; font-weight: 700; color: var(--brand);
}
.sidebar-banner-cta:hover { text-decoration: underline; text-underline-offset: 3px; }
.sidebar-banner.is-pending .sidebar-banner-cta { color: var(--ink-faint); }
.sidebar-banner-pending-flag {
  display: inline-block; margin-left: 0.4rem; font-family: var(--font-mono); font-size: 0.62rem;
  color: var(--ink-faint); border: 1px dashed var(--rule-strong); padding: 0.05em 0.4em;
  border-radius: 2px; vertical-align: middle;
}

/* 本文中の別記事参照(『タイトル』の自動内部リンク) */
.article-body a.internal-ref { color: var(--brand); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(15,44,78,0.3); text-underline-offset: 3px; }
.article-body a.internal-ref:hover { text-decoration-color: currentColor; }

/* (旧・姉妹媒体のシリーズ横断ミニナビ用スタイル。本メディアでは未使用)
   category=global-*の記事限定・related-blockの直前に表示。ハブ+6地域総覧への
   小さなチップリスト。現在記事は.is-currentで非リンクのラベル表示にする。 */
.global-series-nav { max-width: var(--content-max); margin: 2.5rem auto 0; padding: 1.5rem 1.25rem 0; }
.global-series-nav-label {
  display: block; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em;
  color: var(--ink-faint); text-transform: uppercase; margin-bottom: 0.85rem;
}
.global-series-chips { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.global-series-chip {
  display: inline-flex; align-items: center; font-family: var(--font-mono);
  font-size: 0.78rem; font-weight: 600; line-height: 1;
  padding: 0.5rem 0.9rem; border: 1px solid var(--rule-strong); border-radius: 999px;
  color: var(--ink-soft); transition: border-color 0.15s ease, color 0.15s ease;
}
a.global-series-chip:hover { border-color: var(--cat-global); color: var(--cat-global); }
.global-series-chip.is-current {
  background: var(--cat-global); border-color: var(--cat-global); color: #fff; font-weight: 700;
}

/* 関連記事(記事末尾。frontmatter related_articlesから生成) */
.related-block { max-width: var(--content-max); margin: 3rem auto 0; padding: 2rem 1.25rem 0; border-top: 1px solid var(--rule); }
.related-block .section-head { margin-bottom: 0.5rem; }
.related-block h2 { font-size: 1.15rem; }

/* 一次情報源リスト */
.sources-block { max-width: var(--content-max); margin: 2.5rem auto 0; padding: 0 1.25rem; }
.sources-block h2 { font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.08em; color: var(--ink-faint); text-transform: uppercase; margin-bottom: 0.85rem; }
.sources-block ol { padding-left: 1.25rem; list-style: decimal; }
.sources-block li { font-size: 0.85rem; margin: 0.4rem 0; word-break: break-all; }
.sources-block a { color: var(--brand); }
.sources-block a:hover { text-decoration: underline; }

/* ---------- 固定ページ(運営者情報・編集ポリシー) ---------- */
.static-page-body { max-width: var(--content-max); margin: 0 auto; padding: 2.5rem 1.25rem 4rem; }
.static-page-body h2 { font-family: var(--font-serif); font-size: 1.35rem; margin: 2.75rem 0 1rem; }
.static-page-body h2:first-child { margin-top: 0; }
.static-page-body p { margin: 1.1rem 0; line-height: 1.95; color: var(--ink); }
.static-page-body ul { margin: 1.1rem 0; padding-left: 1.4rem; list-style: disc; }
.static-page-body li { margin: 0.5rem 0; line-height: 1.85; }
.info-table { width: 100%; margin: 1.5rem 0; border-top: 1px solid var(--rule); }
.info-table div { display: flex; gap: 1.5rem; padding: 0.9rem 0; border-bottom: 1px solid var(--rule); }
.info-table dt { flex: none; width: 9em; font-weight: 700; font-size: 0.88rem; color: var(--ink-soft); }
.info-table dd { font-size: 0.92rem; line-height: 1.8; }

/* ---------- Footer ---------- */
/* 2026-07-26改修(鈴木さん指示): フッター一帯(キャンプ紹介帯/無料診断帯/フッター本体)を
   暗色(--bg-inverse)からライト基調へ変更。ヒーローFV(.hero-slide)とページ中程の
   .diagnosis-band(トップ限定の暗色CTA)は対象外・変更していない。 */
.site-footer { background: #f5f6f8; color: var(--ink-soft); margin-top: 4rem; border-top: 1px solid var(--rule); }
/* 2026-07-25: トップページはabout帯(.home-about)を最下部=フッター直前へ移動したため、
   暗色の.home-aboutブロックの直後に既定のmargin-top:4remの白い隙間を挟んで
   フッターが続いてしまう(.home-aboutは<main>の子・.site-footerは<main>の兄弟のため
   隣接セレクタでは届かず、body.is-home限定で直接指定する)。
   2026-07-26追記: フッターがライト基調(#f5f6f8)になった現在も、.home-about(暗色)に
   隙間なく隣接させ、境目は.site-footer基底のborder-top(var(--rule)の細いhairline)
   だけで示す方針は変わらない(暗色→ライトの色差そのものが強い区切りになるため、
   is-home専用の追加border色指定は不要=base側のborder-topがそのまま機能する)。 */
body.is-home .site-footer {
  margin-top: 0;
}
/* 2026-07-26修正: 子孫セレクタ(スペース)のままだと、.footer-top-inner/.footer-diagnosis-inner
   に併用した"wrap"クラス(このdivも.site-footerの子孫)にまで詳細度(0,2,0)で勝ってしまい、
   これらの帯専用の縦paddingを意図せず上書きしてしまう。子コンビネータ(>)にして
   footer-grid本体を包む直接の子.wrapだけに絞る(詳細度は変えず対象範囲だけを絞る)。 */
.site-footer > .wrap { padding: 3.5rem 1.25rem 2.5rem; }
.footer-grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
/* 2026-07-28 バグ修正: お問い合わせ列(4列目)を追加したのにgridが3列のままだったため、
   4列目が次の行へ折り返してブランド列の真下に単独で落ちていた（本番で表示崩れ）。
   列数を実際の子要素数に合わせる。 */
@media (min-width: 720px) { .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; } }
@media (min-width: 960px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; } }
.footer-brand { font-family: var(--font-serif); color: var(--brand); font-size: 1.1rem; font-weight: 700; }
.footer-tagline { margin-top: 0.6rem; font-size: 0.85rem; color: var(--ink-soft); line-height: 1.8; max-width: 32ch; }
.footer-col h4 { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; color: #5b6472; text-transform: uppercase; margin-bottom: 0.9rem; }
.footer-col a { display: block; font-size: 0.88rem; color: var(--ink); padding: 0.35rem 0; }
.footer-col a:hover { color: var(--brand); text-decoration: underline; }
.footer-bottom { margin-top: 2.75rem; padding-top: 1.75rem; border-top: 1px solid var(--rule); font-size: 0.75rem; color: var(--ink-faint); display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between; }

/* ---------- 404 ---------- */
.error-page { max-width: 560px; margin: 0 auto; padding: 6rem 1.25rem; text-align: center; }
.error-page .bracket-tag { justify-content: center; margin-bottom: 1rem; }
.error-page h1 { font-family: var(--font-serif); font-size: 2rem; margin-bottom: 1rem; }
.error-page p { color: var(--ink-soft); line-height: 1.9; }
.error-page a { display: inline-block; margin-top: 1.75rem; font-weight: 700; color: var(--brand); border-bottom: 2px solid var(--brand); padding-bottom: 0.15rem; }

/* ---------- 講座CTA帯(トップページ・カテゴリページ共通。2026-07-25追加) ----------
   config.SIDEBAR_BANNERS(id="learning-program")を表示する横幅いっぱいの控えめな帯。
   既存の.course-cta-btn(ブランドオレンジ地・白文字)の意匠を踏襲しつつ、広告色を
   出しすぎないよう背景は--bg-subtleに留める。左=バナー画像サムネイル/中=タイトル+
   本文/右=CTAボタンの3カラム(狭幅では縦積み)。 */
.ops-support-band { background: var(--bg-subtle); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.ops-support-band-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 1.75rem; padding: 1.75rem 0; }
.ops-support-band-art {
  flex: 0 0 auto; width: 84px; aspect-ratio: 3 / 2; border-radius: var(--radius);
  overflow: hidden; background: var(--bg-inverse);
}
.ops-support-band-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ops-support-band-body { flex: 1 1 320px; min-width: 0; }
.ops-support-band-body .eyebrow { color: var(--ink-faint); display: block; margin-bottom: 0.3rem; }
.ops-support-band-body h2 { font-size: 1.02rem; font-weight: 700; line-height: 1.5; }
.ops-support-band-body p { margin-top: 0.35rem; font-size: 0.85rem; color: var(--ink-soft); line-height: 1.75; max-width: 62ch; }
.ops-support-band-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.7rem 1.35rem; background: var(--brand-orange, #E07A3F); color: #fff;
  font-weight: 700; font-size: 0.85rem; border-radius: 2px; white-space: nowrap;
  transition: background 0.15s ease, transform 0.15s ease;
}
.ops-support-band-btn:hover { background: #c96428; transform: translateY(-1px); }
@media (max-width: 640px) {
  .ops-support-band-inner { flex-direction: column; align-items: flex-start; }
  .ops-support-band-art { width: 100%; max-width: 220px; }
  .ops-support-band-btn { width: 100%; justify-content: center; }
}

/* ---------- 無料相談フォーム(/free-diagnosis/。姉妹媒体フォーク元由来) ----------
   既存デザイントークン(--brand/--rule/--radius/--focus-ring/--font-*)にのみ依拠し、
   新しい色は追加しない。
   2026-07-26追記: 任意項目グループ(.form-optional-group)は当初FAQと同じdetails/summaryの
   折りたたみJSゼロ実装だったが、鈴木さん指示で常時展開のfieldset/legendへ変更した
   (初期状態から開いて露出させ、記入を促す意図のため)。 */
.diagnosis-page-body { max-width: var(--content-max); margin: 0 auto; padding: 2.5rem 1.25rem 4rem; }
.diagnosis-page-body h2 { font-family: var(--font-serif); font-size: 1.3rem; margin: 0 0 1.25rem; }
.diagnosis-report-points { margin-bottom: 3rem; }
.report-points-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) { .report-points-grid { grid-template-columns: 1fr 1fr; } }
.report-point-card {
  border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.25rem 1.4rem;
  background: var(--bg-subtle);
}
.report-point-card h3 { font-size: 0.98rem; font-weight: 700; color: var(--brand); margin-bottom: 0.5rem; }
.report-point-card p { font-size: 0.86rem; line-height: 1.8; color: var(--ink-soft); }

.diagnosis-form-section { border-top: 1px solid var(--rule); padding-top: 2.5rem; }
.diagnosis-form { display: flex; flex-direction: column; gap: 1.4rem; }
.form-required-group { display: flex; flex-direction: column; gap: 1.4rem; }
.form-field label,
.form-checkbox-fieldset legend {
  display: block; font-weight: 700; font-size: 0.9rem; color: var(--ink); margin-bottom: 0.4rem;
}
.form-required-badge {
  display: inline-block; margin-left: 0.5rem; font-family: var(--font-mono); font-size: 0.68rem;
  font-weight: 700; color: #fff; background: var(--brand-orange); border-radius: 2px;
  padding: 0.1rem 0.4rem; vertical-align: middle;
}
.form-field-help { font-size: 0.8rem; color: var(--ink-faint); margin-bottom: 0.5rem; line-height: 1.7; }
.form-field input[type="text"],
.form-field input[type="url"],
.form-field input[type="email"],
.form-field textarea {
  width: 100%; font: inherit; font-size: 0.94rem; color: var(--ink);
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
  padding: 0.7rem 0.85rem; background: var(--bg);
}
.form-field textarea { resize: vertical; line-height: 1.7; }
.form-field input:focus-visible,
.form-field textarea:focus-visible { outline: 2.5px solid var(--focus-ring); outline-offset: 1px; }

.form-optional-group {
  display: block; min-width: 0; margin: 0;
  border: 1px solid var(--rule); border-radius: var(--radius); background: var(--bg-subtle);
  padding: 1.15rem 1.1rem 1.3rem;
}
.form-optional-group legend {
  display: block; width: 100%; float: none; padding: 0; margin: 0 0 0.6rem;
  font-weight: 700; font-size: 0.92rem; color: var(--brand); line-height: 1.6;
}
.form-optional-badge {
  display: inline-block; margin-left: 0.5rem; font-family: var(--font-mono); font-size: 0.68rem;
  font-weight: 700; color: var(--ink-soft); background: var(--rule); border-radius: 2px;
  padding: 0.1rem 0.4rem; vertical-align: middle;
}
.form-optional-note { font-size: 0.82rem; color: var(--ink-soft); line-height: 1.75; margin: 0 0 1.2rem; }
.form-optional-fields { display: flex; flex-direction: column; gap: 1.25rem; padding: 0; }

.form-checkbox-fieldset { border: none; padding: 0; margin: 0; }
.form-checkbox-group { display: flex; flex-direction: column; gap: 0.6rem; }
.form-checkbox-item {
  display: flex; align-items: baseline; gap: 0.55rem; font-weight: 400 !important;
  font-size: 0.9rem; color: var(--ink); cursor: pointer;
}
.form-checkbox-item input[type="checkbox"] { flex: none; width: 1.05rem; height: 1.05rem; accent-color: var(--brand); }

/* ハニーポット(bot対策)。表示上は完全に消すが、display:noneだと一部botに無視されるため
   画面外配置+overflow:hiddenで隠す(functions/api/diagnosis.jsのwebsiteフィールドと対)。 */
.form-honeypot { position: absolute; left: -9999px; top: -9999px; height: 0; width: 0; overflow: hidden; }

.form-privacy-note { font-size: 0.78rem; color: var(--ink-faint); line-height: 1.8; }
.form-submit-btn { align-self: flex-start; font-size: 0.95rem; padding: 0.85rem 2.2rem; border: none; }
.form-status {
  font-size: 0.88rem; font-weight: 700; padding: 0.75rem 1rem; border-radius: var(--radius);
}
.form-status.is-success { color: #1b5e3f; background: #e7f4ee; }
.form-status.is-error { color: #8a2c1e; background: #fbeae6; }
.form-fallback-note { font-size: 0.8rem; color: var(--ink-faint); }
.form-fallback-note a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) {
  .form-submit-btn { align-self: stretch; text-align: center; justify-content: center; }
}

/* ---------- 全ページ共通ヘッダー直下アナウンス帯(2026-07-25追加) ----------
   ヘッダー(白背景)の直下に置く細い帯。ブランドネイビー地+オレンジのラベルバッジ+
   シアンの矢印で、既存のブランドカラー3色をそのまま流用する(新規の色を増やさない)。 */
.site-announce { display: block; background: var(--brand); transition: background 0.15s ease; }
.site-announce:hover { background: #1f2c4c; }
.site-announce-inner {
  display: flex; align-items: center; justify-content: center; gap: 0.65rem;
  padding: 0.55rem 1.25rem; flex-wrap: wrap; text-align: center;
}
.site-announce-badge {
  flex: none; font-family: var(--font-mono); font-size: 0.64rem; font-weight: 700;
  letter-spacing: 0.08em; color: var(--brand-orange); border: 1px solid rgba(255,255,255,0.35);
  border-radius: 2px; padding: 0.15em 0.5em; white-space: nowrap;
}
.site-announce-text { font-size: 0.8rem; font-weight: 600; color: #fff; }
.site-announce-arrow { color: var(--brand-cyan); margin: 0 0.1em; }

/* ---------- トップページFV直下: AI検索最適化講座紹介セクション(2026-07-25追加) ----------
   .ops-support-bandと意匠言語を揃えつつ(アート+本文+ボタンの横並び)、FV直下の単独セクション
   として少しゆとりを持たせる。背景は白基調エディトリアルを崩さないよう--bg-subtleに留める。 */
.camp-intro-band { background: var(--bg-subtle); border-bottom: 1px solid var(--rule); }
.camp-intro-band-inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2rem;
  padding: 2.25rem 1.25rem;
}
.camp-intro-band-art {
  flex: 0 0 auto; width: 128px; aspect-ratio: 3 / 2; border-radius: var(--radius);
  overflow: hidden; background: var(--bg-inverse);
}
.camp-intro-band-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.camp-intro-band-body { flex: 1 1 360px; min-width: 0; }
.camp-intro-band-body .eyebrow { color: var(--accent, var(--brand)); display: block; margin-bottom: 0.35rem; }
.camp-intro-band-body h2 { font-family: var(--font-serif); font-size: 1.2rem; font-weight: 700; line-height: 1.5; }
.camp-intro-band-body p { margin-top: 0.5rem; font-size: 0.88rem; color: var(--ink-soft); line-height: 1.8; max-width: 66ch; }
.camp-intro-band-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 1.1rem;
  padding: 0.75rem 1.5rem; background: var(--brand-orange, #E07A3F); color: #fff;
  font-weight: 700; font-size: 0.86rem; border-radius: 2px; white-space: nowrap;
  transition: background 0.15s ease, transform 0.15s ease;
}
.camp-intro-band-btn:hover { background: #c96428; transform: translateY(-1px); }
@media (max-width: 640px) {
  .camp-intro-band-art { width: 100%; max-width: 220px; }
}
@media (min-width: 960px) {
  .camp-intro-band-inner { padding-left: 2.5rem; padding-right: 2.5rem; }
}

/* ---------- 無料診断CTA(2026-07-25追加。記事末尾/トップ/フッター共通の最優先CTA) ----------
   ボタン(.diagnosis-cta-btn)は3箇所共通の1クラスにし、文言のズレを構造でも防ぐ。
   variant別の外枠(.diagnosis-cta=記事末尾/.diagnosis-band=トップ/.footer-diagnosis=フッター)
   で背景・余白・見出しサイズだけを変え、無料診断が全CTAの中で最も視覚優先度が高くなるよう
   .diagnosis-bandは--bg-inverse(トップの.home-about/heroと同じ暗色)で強い対比を作る。 */
.diagnosis-cta-btn {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.85rem 1.7rem; background: var(--brand-orange, #E07A3F); color: #fff;
  font-weight: 700; font-size: 0.92rem; border-radius: 2px; white-space: nowrap;
  transition: background 0.15s ease, transform 0.15s ease;
}
.diagnosis-cta-btn:hover { background: #c96428; transform: translateY(-1px); }

/* 記事末尾variant: 旧.course-ctaと同じ配置・箱幅(article-bodyの直後に続く主CTA)。
   左ボーダーをオレンジにして「これが主CTA」という視覚的な格上げを示す。 */
.diagnosis-cta {
  max-width: var(--content-max); margin: 3rem auto 0; padding: 2rem 2.1rem;
  border: 1px solid var(--rule); border-left: 4px solid var(--brand-orange);
  background: var(--bg-subtle); border-radius: var(--radius);
}
.diagnosis-cta-inner { }
.diagnosis-cta .eyebrow { color: var(--brand-orange); }
.diagnosis-cta h2 {
  font-family: var(--font-serif); font-weight: 700; color: var(--ink);
  font-size: clamp(1.05rem, 2.4vw, 1.3rem); line-height: 1.7; margin-top: 0.6rem;
}
.diagnosis-cta .diagnosis-cta-btn { margin-top: 1.25rem; }

/* トップページvariant: hero/.home-aboutと同じ暗色帯で最も強い視覚優先度を持たせる。 */
.diagnosis-band { background: var(--bg-inverse); padding: 3.5rem 0; }
/* 2026-07-29是正: 760pxだと見出し(html{font-size:125%}適用下でフォント最大37px)が
   1行約19文字しか入らず、句(_DIAGNOSIS_TITLE_PHRASES)ごとの改行禁止spanが
   どの2句もペアで収まらず「無料診断：」「御社のAI検索最適化（GEO）への」
   「徹底レポートを作成し、」「無料でお渡しします」の4行に散っていた。
   980pxまで広げることで幅1440pxでは
   1行目「無料診断：御社のAI検索最適化（GEO）への」
   2行目「徹底レポートを作成し、無料でお渡しします」の2行に収まる。
   文言・句の区切り自体(_DIAGNOSIS_TITLE_PHRASES)は変更しない。狭い画面では
   max-widthが効かず(実ビューポート幅で頭打ち)、可読性・中央寄せは崩れない。 */
.diagnosis-band-inner { max-width: 980px; margin: 0 auto; padding: 0 1.25rem; text-align: center; }
.diagnosis-band .eyebrow { color: var(--brand-orange); }
.diagnosis-band h2 {
  font-family: var(--font-serif); font-weight: 700; color: #fff;
  font-size: clamp(1.35rem, 3.4vw, 1.85rem); line-height: 1.6; margin-top: 0.7rem;
}
.diagnosis-band .diagnosis-cta-btn { margin-top: 1.5rem; padding: 0.95rem 2.1rem; font-size: 0.96rem; }

/* フッターvariant(2026-07-26ライト化): フッター本体と同じライト背景上で視認できるよう、
   見出し・本文ともにダーク系トーンに変更。左=文言/右=ボタンの横並び(狭幅では縦積み)。
   -innerには"wrap"クラスを併用する(lib/pages.py _diagnosis_cta_html())ため、
   ここではpadding-top/bottomの縦方向だけを指定し、横方向は.wrap側のmax-width/paddingに
   委ねる(shorthand paddingで指定すると同じ詳細度の.wrapを完全に上書きしてしまい、
   帯が画面全幅に広がって見出し左端0px・ボタン右端張り付きになるバグの原因だった)。 */
.footer-diagnosis { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.footer-diagnosis-inner { padding-top: 1.75rem; padding-bottom: 1.75rem; }
.footer-diagnosis-body {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.75rem;
}
.footer-diagnosis .eyebrow { color: var(--brand-orange); flex-basis: 100%; }
.footer-diagnosis h2 {
  flex: 1 1 360px; min-width: 0; font-family: var(--font-serif); font-weight: 700; color: var(--ink);
  font-size: 1rem; line-height: 1.7; margin: 0;
}
.footer-diagnosis .diagnosis-cta-btn { flex: none; }

/* 無料診断CTA見出しの改行制御(2026-07-29追加。lib/pages.py _diagnosis_title_html())。
   意味のまとまり(句)ごとに囲んだ<span class="diagnosis-title-phrase">を
   display:inline-block + white-space:nowrapにすることで、句の内部では絶対に
   改行させない(日本語組版の定石)。spanどうしは直接連結していて空白を挟まないが、
   inline-blockな要素の境界には行分割の機会が残るため、句と句の間でだけ改行される。
   nowrapにより「本当に入りきらない」場合は折り返さず溢れる想定だが、これは意図的な
   句(4〜17文字程度)のみに使うため、実運用の幅(390px〜)では収まることを実測済み。 */
.diagnosis-title-phrase { display: inline-block; white-space: nowrap; }
/* 2026-07-29追加是正(iframe実寸375pxで発覚): 直上のコメントは「実運用の幅(390px〜)
   では収まることを実測済み」だが、これは裏を返すと390px未満は未検証だった。
   実測すると、句の1つ「御社のAI検索最適化（GEO）への」がnowrapのまま390px未満の
   コンテナに収まりきらず、ページ全体をdocument.documentElement.scrollWidth=441px
   (ビューポート375pxに対して66pxオーバー)まで横に押し広げていた唯一の原因だった
   (このCSSが使われる.diagnosis-band/.diagnosis-cta/.footer-diagnosisの3箇所のうち、
   実際に大きい文字サイズになる.diagnosis-band(トップ)がこの幅で該当)。
   390px未満だけ句の内部改行を許可し(句読点・助詞の直後などで折り返されるだけで、
   意味のまとまりの破壊は最小限)、ページ全体の横はみ出しを止める。
   「無料でお渡しします」のような短い句はこの幅でも1行に収まるため、
   white-space:normalにしても実際には改行されず見た目は変わらない
   (getClientRects().length===1のまま)。 */
@media (max-width: 389px) {
  .diagnosis-title-phrase { white-space: normal; }
}

/* ---------- フッター上部: 学習プログラム訴求バナー(ローテーション/
   2026-07-26ライト化) ----------
   既存のサイドバナー画像資産(assets/img/banners/)を2枚、CSSアニメーションのみで
   フェード切替する(JS不使用)。prefers-reduced-motionはstyle.css冒頭の全体ルールで
   既にアニメーション無効化される。 */
.site-footer .footer-top { border-bottom: 1px solid var(--rule); }
.footer-top-inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2rem;
  /* 2026-07-26修正: 旧`padding: 2.5rem 0`(shorthand)が親".wrap"の左右padding
     (0 1.25rem / min-width:960pxで0 2.5rem)を同詳細度の後勝ちで完全に上書きし、
     本の画像(.footer-camp-rotator)が横paddingゼロでビューポート左端に張り付いて
     見切れる原因だった。縦方向だけをpadding-top/bottomで指定し、横方向は.wrapに委ねる。 */
  padding-top: 2.5rem; padding-bottom: 2.5rem;
}
.footer-camp-rotator {
  flex: 0 0 auto; position: relative; width: 180px; aspect-ratio: 3 / 2;
  border-radius: var(--radius); overflow: hidden; background: var(--bg-subtle);
  display: block;
}
.footer-camp-rotator img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; animation: footerCampFade 12s ease-in-out infinite;
}
.footer-camp-rotator img:nth-child(1) { animation-delay: 0s; }
.footer-camp-rotator img:nth-child(2) { animation-delay: -6s; }
@keyframes footerCampFade {
  0%, 4%   { opacity: 0; }
  8%, 42%  { opacity: 1; }
  46%, 100% { opacity: 0; }
}
.footer-camp-body { flex: 1 1 360px; min-width: 0; }
.footer-camp-body .eyebrow { color: var(--brand-orange); display: block; margin-bottom: 0.35rem; }
.footer-camp-body h2 { font-family: var(--font-serif); color: var(--ink); font-size: 1.05rem; font-weight: 700; }
.footer-camp-body p { margin-top: 0.45rem; font-size: 0.85rem; color: var(--ink-soft); line-height: 1.8; max-width: 62ch; }
.footer-camp-body .ops-support-band-btn { margin-top: 1rem; }
@media (max-width: 640px) {
  .footer-camp-rotator { width: 100%; max-width: 220px; }
}

/* 編集部ロゴ（B案プレスシール・2026-07-26適用） */
.credit-avatar-mark{width:64px;height:64px;flex-shrink:0;border-radius:50%;}

/* ==========================================================================
   サービストップ (2026-07-28 鈴木さん指示)
   トップページ上部を「サービストップ」化し、その下に「お役立ちブログ」を並べる。

   デザイン方針:
     - 既存のエディトリアル言語（白基調・游明朝の見出し・等幅のメタ・角カッコ[ ]モチーフ）
       を捨てず、そのまま「事業紹介の文体」へ翻訳する。よくあるSaaSのLPに寄せない。
     - 数字は等幅で大きく組む。このメディアの主張（検証可能な事実だけを出す）を
       タイポグラフィでも体現する。
     - 動きは実績ロゴのマーキーだけ。それ以外はアニメーションを足さない。
       prefers-reduced-motion では冒頭の全体ルールで停止する。
   ========================================================================== */

/* ---------- 共通 ---------- */
.svc-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--brand-cyan);
}
.svc-section { padding: 4rem 0; border-top: 1px solid var(--rule); }
.svc-section-head { max-width: 46rem; margin-bottom: 2.5rem; }
.svc-section-head h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 4.2vw, 2.15rem);
  line-height: 1.4; letter-spacing: 0.01em;
  margin-top: 0.6rem;
}
.svc-section-lead {
  margin-top: 1rem; color: var(--ink-soft);
  font-size: 1rem; line-height: 1.95;
}
.svc-note {
  margin-top: 1.5rem; padding-left: 0.9rem;
  border-left: 2px solid var(--rule-strong);
  color: var(--ink-faint); font-size: 0.86rem; line-height: 1.85;
}

/* ---------- ボタン ---------- */
.svc-btn {
  display: inline-flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 0.15rem;
  min-height: 60px; padding: 0.85rem 2rem;
  border-radius: var(--radius);
  text-align: center; transition: transform 0.15s ease, background-color 0.15s ease;
}
.svc-btn-label { font-weight: 700; font-size: 1rem; letter-spacing: 0.02em; }
.svc-btn-note {
  font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: 0.04em; opacity: 0.78;
}
.svc-btn--primary { background: var(--brand-orange); color: #fff; }
.svc-btn--primary:hover { background: #c96a33; transform: translateY(-1px); }
.svc-btn--ghost { color: #fff; border: 1px solid rgba(255, 255, 255, 0.42); }
.svc-btn--ghost:hover { background: rgba(255, 255, 255, 0.1); }
.svc-btn--ghost-inverse { color: #fff; border: 1px solid rgba(255, 255, 255, 0.42); }
.svc-btn--ghost-inverse:hover { background: rgba(255, 255, 255, 0.1); }
.svc-btn:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }

/* ---------- ファーストビュー ---------- */
.svc-hero {
  position: relative; overflow: hidden;
  background: var(--bg-inverse); color: #fff;
}
/* 角カッコ[ ]モチーフを巨大な地紋として敷く。装飾ではなく
   「引用される」というメディアの核心概念の可視化（既存トークンと同じ考え方）。 */
.svc-hero::before {
  content: "[ ]";
  position: absolute; right: -3rem; top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-serif); font-weight: 700;
  font-size: 34rem; line-height: 1;
  color: rgba(47, 183, 201, 0.055);
  pointer-events: none; user-select: none;
}
.svc-hero-inner { position: relative; padding: 4.5rem 1.25rem 3.5rem; }
.svc-hero-heading {
  margin-top: 1.1rem;
  font-family: var(--font-serif); font-weight: 700;
  font-size: clamp(1.95rem, 6.4vw, 3.4rem);
  line-height: 1.4; letter-spacing: 0.005em;
}
.svc-hero-lead {
  margin-top: 1.5rem; max-width: 40rem;
  color: rgba(255, 255, 255, 0.82);
  font-size: 1rem; line-height: 2.05;
}
.svc-hero-actions {
  display: flex; flex-wrap: wrap; gap: 0.9rem;
  margin-top: 2.25rem;
}
.svc-hero-stats {
  display: grid; grid-template-columns: 1fr; gap: 1.1rem;
  margin-top: 3rem; padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.svc-hero-stat dt {
  font-family: var(--font-mono); font-size: 0.7rem;
  letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.6);
}
.svc-hero-stat dd { margin-top: 0.3rem; display: flex; align-items: baseline; gap: 0.35rem; }
.svc-hero-stat-num {
  font-family: var(--font-mono); font-weight: 700;
  font-size: 2.1rem; line-height: 1; color: var(--brand-cyan);
  font-variant-numeric: tabular-nums;
}
.svc-hero-stat-unit { font-size: 0.8rem; color: rgba(255, 255, 255, 0.68); }
.svc-hero-note {
  margin-top: 2rem; font-family: var(--font-mono);
  font-size: 0.7rem; letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.45);
}
@media (min-width: 640px) {
  .svc-hero-stats { grid-template-columns: repeat(3, auto); gap: 2.75rem; justify-content: start; }
}
@media (min-width: 960px) {
  .svc-hero-inner { padding: 6.5rem 2.5rem 5rem; }
}

/* ---------- 実績ロゴ帯（マーキー） ---------- */
.svc-clients { padding: 3.5rem 0; background: var(--bg-subtle); overflow: hidden; }
.svc-clients-heading {
  font-family: var(--font-serif); font-size: 1.3rem;
  margin-top: 0.5rem; margin-bottom: 1.75rem;
}
.svc-client-marquee {
  position: relative;
  /* 両端をフェードさせ、切れ目を「見せない」で自然に流す */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.svc-client-marquee-inner { display: flex; width: max-content; animation: svcMarquee 48s linear infinite; }
.svc-client-marquee:hover .svc-client-marquee-inner { animation-play-state: paused; }
.svc-client-track { display: flex; align-items: center; gap: 3rem; padding-right: 3rem; }
.svc-client-item { flex: none; }
.svc-client-item img {
  height: 44px; width: auto; object-fit: contain;
  /* 各社ロゴの色がバラつくと帯が散らかるためグレースケールで統一し、
     ホバーで元の色に戻す（実在企業のロゴを恣意的に改変しない範囲の表示調整）。 */
  /* 2026-07-28 実描画で調整: 100%グレースケール+0.62では、背景が焼き込まれている
     ロゴ（webp原本に白/グレーの地がある社）が沈んで読めなかった。
     色の統一感は保ちつつ視認できる水準まで戻す。 */
  filter: grayscale(88%); opacity: 0.8;
  transition: filter 0.2s ease, opacity 0.2s ease;
}
.svc-client-item img:hover { filter: grayscale(0); opacity: 1; }
.svc-clients-note {
  margin-top: 1.75rem; color: var(--ink-faint);
  font-size: 0.8rem; line-height: 1.8;
}
@keyframes svcMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  /* 冒頭の全体ルールで duration が潰れると一瞬で -50% へ飛んでしまうため、
     ここで明示的にアニメーション自体を外して静止状態にする。 */
  .svc-client-marquee-inner { animation: none !important; transform: none !important; }
  .svc-client-marquee { overflow-x: auto; }
}

/* ---------- サービス3本柱 ---------- */
.svc-card-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
.svc-card {
  display: flex; flex-direction: column;
  padding: 2rem 1.75rem;
  background: var(--bg); border: 1px solid var(--rule);
  border-top: 3px solid var(--brand); border-radius: var(--radius);
}
.svc-card-no {
  font-family: var(--font-mono); font-size: 0.8rem;
  font-weight: 700; letter-spacing: 0.1em; color: var(--brand-cyan);
}
.svc-card-title {
  margin-top: 0.7rem; font-family: var(--font-serif);
  font-size: 1.28rem; line-height: 1.5;
}
.svc-card-lead {
  margin-top: 0.55rem; font-size: 0.85rem; font-weight: 700;
  color: var(--brand-orange); letter-spacing: 0.01em;
}
.svc-card-desc {
  margin-top: 1rem; flex: 1;
  color: var(--ink-soft); font-size: 0.93rem; line-height: 1.95;
}
.svc-card-link {
  margin-top: 1.5rem; align-self: flex-start;
  font-weight: 700; font-size: 0.9rem; color: var(--brand);
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
}
.svc-card-link:hover { color: var(--brand-orange); }
@media (min-width: 880px) { .svc-card-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- (旧・姉妹媒体のサービストップ対比表用スタイル。本メディアでは未使用) ---------- */
.svc-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.svc-table { width: 100%; min-width: 640px; font-size: 0.92rem; }
.svc-table th, .svc-table td {
  padding: 0.95rem 1.1rem; text-align: left;
  border-bottom: 1px solid var(--rule); vertical-align: top; line-height: 1.8;
}
.svc-table thead th {
  background: var(--brand); color: #fff;
  font-family: var(--font-mono); font-size: 0.78rem;
  letter-spacing: 0.06em; font-weight: 700;
  border-bottom: none;
}
.svc-table thead th:last-child { background: #123a44; }
.svc-table tbody th {
  width: 8.5rem; white-space: nowrap;
  font-weight: 700; color: var(--ink);
  background: var(--bg-subtle);
}
.svc-table tbody td:last-child { color: var(--ink); font-weight: 600; }

/* ---------- 選ばれる3つの理由 ---------- */
.svc-reasons { background: var(--bg-subtle); }
.svc-reason-grid { display: grid; grid-template-columns: 1fr; gap: 1.75rem; }
.svc-reason { padding-top: 1.5rem; border-top: 2px solid var(--brand); }
.svc-reason-no {
  font-family: var(--font-mono); font-size: 1.6rem; font-weight: 700;
  color: var(--brand-cyan); line-height: 1;
}
.svc-reason h3 {
  margin-top: 0.85rem; font-family: var(--font-serif);
  font-size: 1.16rem; line-height: 1.6;
}
.svc-reason p {
  margin-top: 0.85rem; color: var(--ink-soft);
  font-size: 0.92rem; line-height: 1.95;
}
@media (min-width: 880px) { .svc-reason-grid { grid-template-columns: repeat(3, 1fr); gap: 2.25rem; } }

/* ---------- 支援の流れ ---------- */
.svc-step-list {
  display: grid; grid-template-columns: 1fr; gap: 1.25rem;
  counter-reset: svcstep;
}
.svc-step {
  position: relative; padding: 1.6rem 1.5rem;
  background: var(--bg-subtle); border-radius: var(--radius);
}
.svc-step-no {
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.12em; color: var(--brand-orange);
}
.svc-step h3 { margin-top: 0.5rem; font-size: 1.05rem; font-weight: 700; }
.svc-step p {
  margin-top: 0.65rem; color: var(--ink-soft);
  font-size: 0.9rem; line-height: 1.9;
}
@media (min-width: 880px) {
  .svc-step-list { grid-template-columns: repeat(4, 1fr); gap: 1rem; }
  /* ステップ間を細い矢印でつなぎ、「順番がある」ことを視覚化する */
  .svc-step:not(:last-child)::after {
    content: ""; position: absolute; top: 50%; right: -0.62rem;
    width: 0.5rem; height: 0.5rem;
    border-top: 2px solid var(--rule-strong); border-right: 2px solid var(--rule-strong);
    transform: translateY(-50%) rotate(45deg);
  }
}

/* ---------- FAQ ---------- */
.svc-faq-list { border-top: 1px solid var(--rule); }
.svc-faq-item { border-bottom: 1px solid var(--rule); }
.svc-faq-item summary {
  display: flex; align-items: flex-start; gap: 0.85rem;
  padding: 1.35rem 0; cursor: pointer;
  font-weight: 700; font-size: 1rem; line-height: 1.7;
  list-style: none;
}
.svc-faq-item summary::-webkit-details-marker { display: none; }
.svc-faq-item summary::before {
  content: "＋"; flex: none;
  font-family: var(--font-mono); color: var(--brand-cyan);
  font-size: 0.95rem; line-height: 1.75;
}
.svc-faq-item[open] summary::before { content: "−"; }
.svc-faq-item summary:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.svc-faq-answer {
  padding: 0 0 1.5rem 1.7rem;
  color: var(--ink-soft); font-size: 0.93rem; line-height: 2;
}

/* ---------- お役立ちブログの入口 ---------- */
/* サービス紹介からブログ一覧へ切り替わる境目。ここが曖昧だと
   「サービスサイトなのか読み物なのか」が分からなくなるため、明確に段落を切る。 */
.svc-blog-head {
  padding: 4rem 0 0; border-top: 4px solid var(--brand);
}
.svc-blog-heading {
  margin-top: 0.6rem;
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 4.6vw, 2.3rem); line-height: 1.4;
}
.svc-blog-head .svc-section-lead { max-width: 44rem; }
body.is-service-top .svc-blog-head + .section { padding-top: 2.25rem; }

/* ---------- クロージングCTA ---------- */
.svc-closing { background: var(--brand); color: #fff; }
.svc-closing-inner { padding: 4rem 1.25rem; text-align: center; }
.svc-closing-inner h2 {
  margin-top: 0.7rem; font-family: var(--font-serif);
  font-size: clamp(1.5rem, 4.6vw, 2.2rem); line-height: 1.45;
}
.svc-closing-inner > p {
  margin: 1.2rem auto 0; max-width: 36rem;
  color: rgba(255, 255, 255, 0.82); font-size: 0.97rem; line-height: 2;
}
.svc-closing .svc-hero-actions { justify-content: center; }
@media (min-width: 960px) { .svc-closing-inner { padding: 5rem 2.5rem; } }

/* ---------- ヘッダーCTA ---------- */
.header-cta {
  display: none; flex: none;
  padding: 0.55rem 1.1rem; border-radius: var(--radius);
  background: var(--brand-orange); color: #fff;
  font-size: 0.83rem; font-weight: 700; white-space: nowrap;
}
.header-cta:hover { background: #c96a33; }
@media (min-width: 1080px) { .header-cta { display: inline-block; } }

/* ---------- 資料ダウンロードページの内容リスト ---------- */
.svc-doc-list { margin-top: 1rem; }
.svc-doc-list li {
  position: relative; padding-left: 1.5rem; margin-top: 0.7rem;
  color: var(--ink-soft); font-size: 0.94rem; line-height: 1.9;
}
.svc-doc-list li::before {
  content: ""; position: absolute; left: 0.25rem; top: 0.72rem;
  width: 0.45rem; height: 0.45rem;
  background: var(--brand-cyan); border-radius: 50%;
}

/* ---------- ヘッダー余白の是正 (2026-07-28) ----------
   ヘッダーCTAを追加したことで brand / desk-nav / header-cta の3要素が横に並び、
   ブランド名とと最初のカテゴリのドットが密着して見える状態になっていた
   （実測 gap=16px。desk-nav側の左マスク20pxと重なって余白が視覚的に消える）。
   ブランドは媒体名そのものなので、ナビと明確に切り離す。 */
@media (min-width: 960px) {
  .site-header .wrap { gap: 1.75rem; }
  /* desk-nav は横スクロール容器で、左端20pxがマスクでフェードする設計になっている。
     そのフェード帯が「最初のカテゴリのドットと文字」に掛かってしまい、ブランド名と
     ナビが繋がって見えていた（姉妹媒体での実測例）。
     フェード帯と同じ幅のpaddingを内側に持たせ、フェードが余白の上で起きるようにする。 */
  .desk-nav { margin-left: 0.75rem; padding-left: 20px; }
}
@media (min-width: 1080px) {
  .site-header .wrap { gap: 2rem; }
}

/* FVの角カッコ地紋の調整 (2026-07-28)
   34remでは "[" の上下セリフが太く、画面外へ半分はみ出した "]" と合わせて
   「意味の分からない2つの四角」に見えていた。全体を画面内へ収め、字間を開けて
   「[ ]」という記号として読めるサイズまで落とす。 */
.svc-hero::before {
  right: 1.5rem;
  font-size: 17rem;
  letter-spacing: 3.5rem;
  color: rgba(47, 183, 201, 0.075);
}
@media (max-width: 1023px) { .svc-hero::before { display: none; } }

/* ---------- ヘッダーナビの溢れ是正 (2026-07-28) ----------
   原因: 1280px以上では desk-nav が overflow-x:visible + justify-content:flex-end に
   なっていた。ヘッダーCTA「無料サイト診断」を追加したことで9カテゴリの実幅(約1,037px)が
   利用可能幅(約805px)を超え、flex-end 指定のまま溢れた結果、先頭の「ニュース」が
   *左方向へ* はみ出してブランド名に重なっていた。
   1280px以上でも 960〜1279px と同じ「横スクロール＋両端フェード」に統一し、
   safe flex-end で溢れ時は自動的に先頭側から表示されるようにする。 */
@media (min-width: 1280px) {
  .desk-nav {
    justify-content: safe flex-end;
    overflow-x: auto;
    padding-left: 20px;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
  }
}

/* 見出しの1文字だけ折返しを防ぐ (2026-07-28)
   「…3つの入口」の "口" だけが2行目に落ちていた。日本語は任意位置で改行されるため、
   見出し行長に対して head の max-width が1文字分足りないと必ずこの崩れが出る。 */
.svc-section-head { max-width: 54rem; }

/* ==========================================================================
   サービストップ 明転リニューアル（2026-07-28 鈴木さんフィードバック対応）

   (a) ダーク基調の廃止 — FVの黒背景と、クロージングの濃紺ベタをやめ、
       白基調＋ブランド色（シアン/オレンジ）の淡いグラデーションへ全面変更する。
   (b) FV右側に無料診断カードを新設し、画像つきで主CTAを最も目立つ要素にする。
   (c) 実績ロゴのグレースケールを廃止（フルカラー）。2行構成で上下逆方向に流す。
   (d) 主CTAに光沢が走るエフェクト（.svc-btn--shine）を追加する。

   ※参考にした ai-search.techsuite.co.jp を実機で確認したところ、白背景＋
     淡いグラデーション＋フルカラーのロゴカード、という構成だった。
     配色そのものは競合と同じ紫系にはせず、本メディアのブランド色を使う。
   ========================================================================== */

/* ---------- (a) FV: 白基調へ ---------- */
.svc-hero {
  background:
    radial-gradient(68% 58% at 88% -8%, rgba(47, 183, 201, 0.16), rgba(255, 255, 255, 0) 62%),
    radial-gradient(52% 46% at 72% 6%, rgba(224, 122, 63, 0.11), rgba(255, 255, 255, 0) 62%),
    linear-gradient(180deg, #fbfcfd 0%, #ffffff 62%);
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
}
/* 角カッコの地紋は白地では主張が強すぎるため撤去する */
.svc-hero::before { content: none; }

.svc-hero-grid {
  /* 2026-07-29是正: grid-template-columns: 1fr (minmaxなし)だと、gridアイテムの
     自動最小サイズ(min-width:auto)がコンテンツのmin-content幅を尊重してしまい、
     .svc-hero-main側の内容(見出し等)のmin-content幅がトラック幅より広い場合、
     トラックごと375px実測で387px(ビューポート375pxより広い)へ押し広げられていた。
     この超過分は親.svc-hero側のoverflow:hidden(装飾の巨大背景数字を隠すため設定)で
     視覚的に見えなくなっていた=document.documentElement.scrollWidthには現れず
     気付きにくいが、実際には見出し等の右端が画面外へ切れて欠けていた(要修正)。
     minmax(0, 1fr)にして自動最小サイズを0に落とし、トラックを確実にコンテナ幅
     以内へ収める(1000px以上の列定義は元からminmax(0, …)済みで対象外)。 */
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.75rem;
  padding: 3.25rem 1.25rem 3.5rem;
  align-items: start;
}
.svc-hero-heading { color: var(--ink); }
.svc-hero-lead { color: var(--ink-soft); }
.svc-hero-stats { border-top-color: var(--rule); }
.svc-hero-stat dt { color: var(--ink-faint); }
.svc-hero-stat-num { color: var(--brand); }
.svc-hero-stat-unit { color: var(--ink-soft); }
.svc-hero-note { color: var(--ink-faint); }
@media (min-width: 1000px) {
  .svc-hero-grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
    gap: 3.5rem; padding: 4.5rem 2.5rem 4.75rem;
  }
}

/* ---------- (b) FV右: 無料診断オファーカード ---------- */
.svc-hero-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 14px;
  box-shadow: 0 20px 48px rgba(18, 34, 56, 0.10), 0 2px 6px rgba(18, 34, 56, 0.04);
  overflow: hidden;
}
.svc-hero-card-art { position: relative; background: #f3efe7; }
.svc-hero-card-art img { width: 100%; height: 168px; object-fit: cover; object-position: center 58%; }
.svc-hero-card-badge {
  position: absolute; left: 1rem; top: 1rem;
  padding: 0.32rem 0.8rem; border-radius: 999px;
  background: var(--brand-orange); color: #fff;
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.06em;
  box-shadow: 0 4px 12px rgba(224, 122, 63, 0.35);
}
.svc-hero-card-body { padding: 1.6rem 1.5rem 1.75rem; }
.svc-hero-card-title {
  font-family: var(--font-serif); font-weight: 700;
  font-size: 1.32rem; line-height: 1.55; color: var(--ink);
}
.svc-hero-card-lead {
  margin-top: 0.8rem; color: var(--ink-soft);
  font-size: 0.88rem; line-height: 1.9;
}
.svc-hero-card-points { margin-top: 1.1rem; }
.svc-hero-card-points li {
  position: relative; padding-left: 1.6rem; margin-top: 0.55rem;
  font-size: 0.88rem; font-weight: 600; color: var(--ink);
}
.svc-hero-card-points li::before {
  content: ""; position: absolute; left: 0.15rem; top: 0.34rem;
  width: 0.95rem; height: 0.55rem;
  border-left: 2px solid var(--brand-cyan); border-bottom: 2px solid var(--brand-cyan);
  transform: rotate(-45deg);
}
.svc-hero-card-btn { display: flex; width: 100%; margin-top: 1.5rem; }
.svc-hero-card-foot {
  margin-top: 0.85rem; text-align: center;
  color: var(--ink-faint); font-size: 0.76rem; line-height: 1.7;
}

/* FV下部の第2CTA（資料DL/お問い合わせ）は白地に合わせて枠線ボタンへ */
.svc-hero .svc-btn--ghost { color: var(--brand); border-color: var(--rule-strong); }
.svc-hero .svc-btn--ghost:hover { background: var(--bg-subtle); }

/* ---------- (d) 主CTAの光沢エフェクト ---------- */
.svc-btn--shine, .diagnosis-cta-btn {
  position: relative; overflow: hidden; isolation: isolate;
}
.svc-btn--shine::after, .diagnosis-cta-btn::after {
  content: ""; position: absolute; top: -60%; left: -75%;
  width: 45%; height: 220%;
  background: linear-gradient(100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0) 100%);
  transform: skewX(-22deg);
  animation: svcShine 3.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes svcShine {
  /* 光は「たまに一度だけ横切る」ほうが上品に見えるので、
     周期の前半20%で走らせ、残りは待機させる。 */
  0%   { left: -75%; }
  20%  { left: 130%; }
  100% { left: 130%; }
}
.svc-btn--primary { box-shadow: 0 12px 26px rgba(224, 122, 63, 0.28); }
.svc-btn--primary:hover { box-shadow: 0 16px 32px rgba(224, 122, 63, 0.34); }

/* ---------- (c) 実績ロゴ: フルカラー・2行・逆方向 ---------- */
.svc-clients { background: linear-gradient(180deg, #ffffff 0%, var(--bg-subtle) 100%); }
.svc-client-rows { display: grid; gap: 0.85rem; }
.svc-client-item img {
  height: 46px;
  /* 2026-07-28: グレースケールを廃止（鈴木さん指示）。各社ロゴを本来の色で見せる。
     原本のwebpは地色が焼き込まれている社があるため、白カードに載せて見え方を揃える。 */
  filter: none; opacity: 1;
  transition: transform 0.2s ease;
}
.svc-client-item {
  display: flex; align-items: center; justify-content: center;
  min-width: 168px; height: 78px; padding: 0.5rem 1.15rem;
  background: #fff; border: 1px solid var(--rule); border-radius: 10px;
}
.svc-client-item img:hover { transform: scale(1.04); }
.svc-client-track { gap: 0.85rem; padding-right: 0.85rem; }
.svc-client-marquee--row1 .svc-client-marquee-inner { animation-duration: 56s; }
/* 2行目は逆方向へ流す。translateの初期値を -50% にして reverse させることで、
   1行目と鏡像の動きになり「二重に流れている」ことが視覚的に分かる。 */
.svc-client-marquee--row2 .svc-client-marquee-inner {
  animation-duration: 68s;
  animation-direction: reverse;
}
@media (prefers-reduced-motion: reduce) {
  .svc-client-rows { gap: 0.85rem; }
}

/* ---------- (a) クロージングCTA: 濃紺ベタをやめ明るい基調へ ---------- */
.svc-closing {
  background:
    radial-gradient(60% 70% at 12% 0%, rgba(47, 183, 201, 0.14), rgba(255, 255, 255, 0) 60%),
    radial-gradient(58% 66% at 88% 100%, rgba(224, 122, 63, 0.13), rgba(255, 255, 255, 0) 60%),
    var(--bg-subtle);
  color: var(--ink);
  border-top: 1px solid var(--rule);
}
.svc-closing-inner h2 { color: var(--ink); }
.svc-closing-inner > p { color: var(--ink-soft); }
.svc-closing .svc-btn--ghost-inverse { color: var(--brand); border-color: var(--rule-strong); }
.svc-closing .svc-btn--ghost-inverse:hover { background: #fff; }

/* ---------- (a) 無料診断バンドも明るく ---------- */
.diagnosis-band {
  background:
    radial-gradient(58% 70% at 90% 0%, rgba(47, 183, 201, 0.15), rgba(255, 255, 255, 0) 62%),
    var(--bg-subtle);
  color: var(--ink);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.diagnosis-band h2 { color: var(--ink); }
.diagnosis-band .eyebrow { color: var(--brand-orange); }

/* ---------- 残っていたダーク面の明転（2026-07-28 鈴木さん指示 1(a)） ----------
   「全体的なダーク系カラーは使わない」に対し、FV/クロージング/診断帯に続き、
   ヘッダー直下のアナウンス帯と最下部の about 帯も明るい面へ置き換える。 */
/* 実クラス名は .site-announce（.camp-announce-bar ではない）。実DOMを確認して修正。 */
.site-announce {
  background: linear-gradient(90deg, rgba(47, 183, 201, 0.13), rgba(224, 122, 63, 0.11));
  border-bottom: 1px solid var(--rule);
}
.site-announce:hover { background: linear-gradient(90deg, rgba(47, 183, 201, 0.2), rgba(224, 122, 63, 0.16)); }
.site-announce-text { color: var(--ink); }
.site-announce-arrow { color: var(--brand-orange); }
.site-announce-badge { border-color: var(--brand-orange); color: var(--brand-orange); }

body.is-service-top .home-about {
  background: linear-gradient(180deg, #ffffff 0%, var(--bg-subtle) 100%);
  color: var(--ink);
  border-top: 1px solid var(--rule);
}
body.is-service-top .home-about h2,
body.is-service-top .home-about h3 { color: var(--ink); }
body.is-service-top .home-about p,
body.is-service-top .home-about-lead { color: var(--ink-soft); }
body.is-service-top .home-about .pillar { border-color: var(--rule); }
body.is-service-top .home-about-supervisor {
  background: #fff; border: 1px solid var(--rule); border-radius: 12px;
}
body.is-service-top .home-about-link { color: var(--brand); }

/* H1の孤立行の解消（2026-07-28）
   FVを2カラム化したことで左カラムが狭まり、「…出ていま / すか。」と
   最後の3字だけが3行目に落ちていた。2カラム時のみ最大サイズを1段下げる。 */
@media (min-width: 1000px) {
  /* 2カラム時の左カラムは約560px。2行目「自社の名前は出ていますか。」は12字なので、
     1字あたり40px以下（=2.5rem）に収めないと「か。」だけが3行目へ落ちる。 */
  .svc-hero-heading { font-size: clamp(1.9rem, 2.7vw, 2.5rem); }
}

/* ==========================================================================
   サービストップ ブラッシュアップ第2弾（2026-07-28 鈴木さんフィードバック）

   参考サイト ai-search.techsuite.co.jp をブラウザで全セクション実測し、
   「リッチさ」を生んでいる作法を抽出して、本メディアのブランド色で実装した。

     ① 装飾kicker（罫線＋ドット＋英日併記）＋中央寄せ見出し
     ② 見出しのキーフレーズだけ色付き斜体（<em>）＋末尾は「。」
     ③ セクション背景を 白 ⇄ 淡い青 で交互に切り替えてリズムを作る
     ④ ボタンをブランド色のグラデーション＋影へ
     ⑤ FV右のビジュアルを「AI回答モックアップ」に差し替え

   配色は参考サイトのピンク→パープルではなく、本メディアのブランドカラーを使う／
   オレンジを使う（Tech Suiteは直接の競合であり、模倣に見せない）。
   ========================================================================== */

:root {
  --grad-brand: linear-gradient(135deg, #1b3d63 0%, #17213c 62%);
  --grad-accent: linear-gradient(135deg, #f0955a 0%, #dd6a2f 60%, #c9552a 100%);
  --grad-cyan: linear-gradient(135deg, #45c8d8 0%, #2fb7c9 55%, #1d8fa0 100%);
  --bg-soft-blue: #f3f8fb;
}

/* ---------- ① 装飾kicker＋中央見出し ---------- */
.svc-section-head--center { max-width: 60rem; margin: 0 auto 3rem; text-align: center; }
.svc-section-head--center .svc-section-lead { margin-left: auto; margin-right: auto; max-width: 44rem; }
.svc-kicker {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint);
}
.svc-kicker-line { display: inline-block; width: 2.2rem; height: 1px; background: var(--rule-strong); }
.svc-kicker-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-cyan); }
.svc-kicker-ja { letter-spacing: 0.08em; text-transform: none; color: var(--ink-faint); }

/* ---------- ② 見出しのキーフレーズ強調 ---------- */
.svc-section-head h2 em {
  font-style: italic; font-weight: 700;
  background: var(--grad-cyan);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  /* 【重要】background-clip:text は環境によって文字が消えることがある。
     PDFでの事故（過去に別案件で発生）と同型の risk があるため、
     非対応環境では素の色にフォールバックさせる。 */
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .svc-section-head h2 em { color: #1d8fa0; background: none; }
}

/* ---------- ③ セクション背景のリズム ---------- */
.svc-services  { background: var(--bg); }
.svc-what      { background: var(--bg-soft-blue); }
.svc-reasons   { background: var(--bg); }
.svc-flow      { background: var(--bg-soft-blue); }
.svc-faq       { background: var(--bg); }
.svc-clients   { background: linear-gradient(180deg, #ffffff 0%, var(--bg-soft-blue) 100%); }
.svc-section   { border-top: none; }
.svc-section + .svc-section { border-top: 1px solid rgba(0, 0, 0, 0.045); }

/* ---------- ④ ボタンのグラデーション化 ---------- */
.svc-btn--primary, .diagnosis-cta-btn, .header-cta, .course-cta-btn, .ops-support-band-btn, .camp-intro-band-btn {
  background: var(--grad-accent);
  border: none; color: #fff;
  box-shadow: 0 10px 24px rgba(201, 85, 42, 0.28);
}
.svc-btn--primary:hover, .diagnosis-cta-btn:hover, .header-cta:hover,
.course-cta-btn:hover, .ops-support-band-btn:hover, .camp-intro-band-btn:hover {
  background: linear-gradient(135deg, #ef8a49 0%, #d15f27 60%, #b84a22 100%);
  box-shadow: 0 14px 30px rgba(201, 85, 42, 0.36);
  transform: translateY(-1px);
}
.svc-btn { border-radius: 999px; }
.svc-hero-card-btn { border-radius: 12px; }
.header-cta { border-radius: 999px; }

/* ---------- ⑤ FV: AI回答モックアップ ---------- */
.svc-hero-card-art {
  background: linear-gradient(160deg, #eef6f8 0%, #f7fbfc 100%);
  padding: 1.15rem 1.15rem 0.9rem;
}
.svc-mock { margin: 0; }
.svc-mock-window {
  background: #fff; border: 1px solid var(--rule);
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 8px 20px rgba(18, 34, 56, 0.07);
}
.svc-mock-bar {
  display: flex; gap: 5px; align-items: center;
  padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--rule); background: #fafbfc;
}
.svc-mock-bar span { width: 8px; height: 8px; border-radius: 50%; background: #dfe4ea; }
.svc-mock-body { padding: 0.9rem 0.95rem 1rem; }
.svc-mock-query {
  display: inline-block; max-width: 100%;
  padding: 0.5rem 0.8rem; border-radius: 12px 12px 12px 3px;
  background: var(--bg-subtle); color: var(--ink);
  font-size: 0.78rem; font-weight: 600; line-height: 1.6;
}
.svc-mock-answer { display: flex; gap: 0.6rem; margin-top: 0.85rem; }
.svc-mock-ai {
  flex: none; width: 26px; height: 26px; border-radius: 7px;
  display: grid; place-items: center;
  background: var(--grad-brand); color: #fff;
  font-family: var(--font-mono); font-size: 0.6rem; font-weight: 700;
}
.svc-mock-answer-body { flex: 1; min-width: 0; }
.svc-mock-lead { font-size: 0.74rem; line-height: 1.75; color: var(--ink-soft); }
.svc-mock-cited {
  display: flex; gap: 0.5rem; margin-top: 0.6rem;
  padding: 0.6rem 0.7rem; border-radius: 8px;
  background: rgba(47, 183, 201, 0.09);
  border: 1px solid rgba(47, 183, 201, 0.34);
  /* 引用された1件だけを光らせる＝このサービスが売っている瞬間 */
  box-shadow: 0 0 0 3px rgba(47, 183, 201, 0.08);
}
.svc-mock-cited-mark {
  flex: none; width: 17px; height: 17px; border-radius: 4px;
  display: grid; place-items: center; margin-top: 1px;
  background: var(--brand-cyan); color: #fff;
  font-family: var(--font-mono); font-size: 0.58rem; font-weight: 700;
}
.svc-mock-cited strong { display: block; font-size: 0.79rem; color: var(--ink); }
.svc-mock-cited p { margin-top: 0.15rem; font-size: 0.7rem; line-height: 1.65; color: var(--ink-soft); }
.svc-mock-srclist { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.6rem; }
.svc-mock-src {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.2rem 0.5rem; border-radius: 999px;
  border: 1px solid var(--rule); background: #fff;
  font-family: var(--font-mono); font-size: 0.6rem; color: var(--ink-faint);
}
.svc-mock-src-no {
  width: 12px; height: 12px; border-radius: 3px;
  display: grid; place-items: center;
  background: var(--rule); color: var(--ink-soft); font-size: 0.52rem;
}
.svc-mock-src:first-child { border-color: rgba(47, 183, 201, 0.5); color: var(--ink); }
.svc-mock-src:first-child .svc-mock-src-no { background: var(--brand-cyan); color: #fff; }
.svc-mock-caption {
  margin-top: 0.55rem; font-size: 0.62rem; line-height: 1.6;
  color: var(--ink-faint); text-align: right;
}
.svc-hero-card-badge { z-index: 2; }

/* バッジ位置の是正（2026-07-28）
   モックアップ導入により、旧位置（左上）ではウィンドウ枠のドットに重なっていた。
   カード外側の右上へ逃がし、モックアップ本体に一切かぶらないようにする。 */
.svc-hero-card { overflow: visible; }
.svc-hero-card-art { border-radius: 14px 14px 0 0; overflow: hidden; }
.svc-hero-card-badge {
  left: auto; right: -0.5rem; top: -0.7rem;
  box-shadow: 0 6px 16px rgba(224, 122, 63, 0.4);
}

/* ==========================================================================
   Phase 3: セクションの中身を厚くする（2026-07-28）
   参考サイトのカードは「見出し＋説明＋箇条書き3点」で厚みを出していた。
   当方は「見出し＋段落」だけだったため、同じ密度まで持ち上げる。
   ========================================================================== */

/* ---------- サービスカード: 箇条書き＋「こんな状態の方へ」 ---------- */
.svc-card { background: #fff; box-shadow: 0 2px 14px rgba(18, 34, 56, 0.05); }
.svc-card-points { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px dashed var(--rule); }
.svc-card-points li {
  position: relative; padding-left: 1.5rem; margin-top: 0.62rem;
  font-size: 0.86rem; line-height: 1.85; color: var(--ink);
}
.svc-card-points li::before {
  content: ""; position: absolute; left: 0.1rem; top: 0.42rem;
  width: 0.85rem; height: 0.48rem;
  border-left: 2px solid var(--brand-cyan); border-bottom: 2px solid var(--brand-cyan);
  transform: rotate(-45deg);
}
.svc-card-forwhom {
  margin-top: 1.15rem; padding: 0.75rem 0.85rem; border-radius: 8px;
  background: var(--bg-soft-blue);
  font-size: 0.82rem; line-height: 1.8; color: var(--ink-soft);
}
.svc-card-forwhom span {
  display: block; margin-bottom: 0.2rem;
  font-family: var(--font-mono); font-size: 0.64rem; font-weight: 700;
  letter-spacing: 0.08em; color: var(--brand-orange);
}

/* ---------- 支援フロー: 成果物・所要目安 ---------- */
.svc-step { background: #fff; border: 1px solid var(--rule); box-shadow: 0 2px 12px rgba(18, 34, 56, 0.04); }
.svc-step-meta { margin-top: 0.9rem; padding-top: 0.8rem; border-top: 1px solid var(--rule); }
.svc-step-meta > div { display: flex; gap: 0.5rem; align-items: baseline; margin-top: 0.35rem; }
.svc-step-meta dt {
  flex: none; font-family: var(--font-mono); font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.05em; color: var(--ink-faint);
}
.svc-step-meta dd { font-size: 0.8rem; font-weight: 700; color: var(--ink); }

/* ---------- よくある誤解 ---------- */
.svc-myths { background: var(--bg); }
.svc-myth-grid { display: grid; grid-template-columns: 1fr; gap: 1.1rem; }
@media (min-width: 900px) { .svc-myth-grid { grid-template-columns: 1fr 1fr; gap: 1.35rem; } }
.svc-myth {
  padding: 1.5rem 1.6rem; border-radius: 12px;
  background: #fff; border: 1px solid var(--rule);
  box-shadow: 0 2px 14px rgba(18, 34, 56, 0.05);
}
.svc-myth-q, .svc-myth-a { display: flex; gap: 0.7rem; line-height: 1.85; }
.svc-myth-q {
  font-weight: 700; font-size: 1rem; color: var(--ink-faint);
  text-decoration: line-through; text-decoration-color: rgba(190, 60, 60, 0.4);
  text-decoration-thickness: 1.5px;
}
.svc-myth-a {
  margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px dashed var(--rule);
  font-size: 0.9rem; color: var(--ink); text-decoration: none;
}
.svc-myth-x, .svc-myth-o {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; margin-top: 0.15rem;
  font-size: 0.66rem; font-weight: 700; text-decoration: none;
}
.svc-myth-x { background: #fdeaea; color: #c0392b; }
.svc-myth-o { background: rgba(47, 183, 201, 0.16); color: #1d8fa0; }

/* セクション順の整理にあわせて背景リズムを振り直す（2026-07-28）
   (旧・姉妹媒体のサービストップ順序メモ。本メディアでは未使用)
   白と淡青が必ず交互になるようにして、セクションの区切りを目で追えるようにする。
   ※このブロックは後段の個別指定より前に置くと上書きされるため、
     ファイル末尾側の指定と競合しないよう最終指定をここに集約している。 */
.svc-what     { background: var(--bg) !important; }
.svc-myths    { background: var(--bg-soft-blue) !important; }
.svc-services { background: var(--bg) !important; }
.svc-cases    { background: var(--bg-soft-blue) !important; }
.svc-reasons  { background: var(--bg) !important; }
.svc-flow     { background: var(--bg-soft-blue) !important; }
.svc-faq      { background: var(--bg) !important; }

/* ==========================================================================
   鈴木さんフィードバック15項目の反映（2026-07-28 第3弾）
   1(b) FV見出しにグラデ＋サイズ拡大 / 1(c)(d) 切り出し廃止・人物写真
   5(a) 角丸統一 / 5(b)(c) サイズ2倍 / 5(d) お問い合わせは青系 / 5(e) 講座セクション強化
   ========================================================================== */

/* ---------- 1(b) FVの主見出し: グラデーション＋大型化 ---------- */
.svc-hero-heading {
  font-size: clamp(2.3rem, 6.4vw, 4.1rem);
  line-height: 1.32;
  letter-spacing: -0.005em;
  background: linear-gradient(118deg, #0d1b2e 0%, #17213c 34%, #1d6f8c 72%, #2fb7c9 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
/* background-clip:text 非対応環境で文字が消えるのを防ぐ（過去にPDFで実害あり） */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .svc-hero-heading { color: var(--ink); background: none; }
}
@media (min-width: 1000px) {
  .svc-hero-heading { font-size: clamp(2.4rem, 3.6vw, 3.5rem); }
}
.svc-hero-lead { font-size: 1.05rem; max-width: 34rem; }

/* ---------- 1(c)(d) FV右: 人物写真 ---------- */
.svc-hero-card-art { padding: 0; background: none; }
.svc-hero-photo { width: 100%; height: 260px; object-fit: cover; object-position: center 32%; display: block; }
.svc-hero-photo--placeholder {
  height: 260px;
  background:
    radial-gradient(80% 90% at 20% 10%, rgba(47,183,201,0.35), rgba(255,255,255,0) 60%),
    linear-gradient(135deg, #17213c 0%, #1b3d63 60%, #2fb7c9 140%);
}

/* ---------- 5(a)(b)(c) ボタン: 角丸統一・サイズ約2倍・グラデ ---------- */
.svc-btn, .diagnosis-cta-btn, .course-cta-btn, .header-cta,
.ops-support-band-btn, .camp-intro-band-btn, .form-submit-btn, .svc-hero-card-btn {
  border-radius: 999px;              /* 5(a) 角丸に統一 */
  min-height: 76px;                  /* 5(b) 従来38〜60px → 約2倍 */
  padding: 1.05rem 2.6rem;
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.2rem;
}
.svc-btn-label { font-size: 1.12rem; }
.svc-btn-note { font-size: 0.76rem; }
.svc-hero-card-btn { width: 100%; flex-direction: column; gap: 0.15rem; }
.header-cta {
  /* ヘッダーだけは高さの制約があるため、角丸とグラデは揃えつつ寸法は据え置く */
  min-height: 0; padding: 0.62rem 1.35rem; font-size: 0.86rem;
}
.form-submit-btn { width: 100%; max-width: 26rem; }

/* ---------- 5(d) お問い合わせ系は青み寄りへ ---------- */
:root { --grad-contact: linear-gradient(135deg, #2f8fd6 0%, #1f6fb5 60%, #17548f 100%); }
.svc-btn--ghost, .svc-btn--ghost-inverse,
a.svc-card-link[href="/contact/"],
.svc-closing .svc-btn--ghost-inverse {
  background: var(--grad-contact);
  color: #fff; border: none;
  box-shadow: 0 10px 24px rgba(31, 111, 181, 0.28);
}
.svc-btn--ghost:hover, .svc-btn--ghost-inverse:hover {
  background: linear-gradient(135deg, #3a9ce2 0%, #2a7cc4 60%, #1c5f9f 100%);
  box-shadow: 0 14px 30px rgba(31, 111, 181, 0.36);
  transform: translateY(-1px);
}

/* ---------- 5(e) 講座セクションを目立たせる ---------- */
.camp-intro-band {
  background:
    radial-gradient(70% 80% at 88% 0%, rgba(47,183,201,0.18), rgba(255,255,255,0) 62%),
    linear-gradient(135deg, #f7fbfc 0%, #eef6f8 100%);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 3.5rem 0;
}
.camp-intro-band-inner { align-items: center; gap: 2.5rem; }
.camp-intro-band-body h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  line-height: 1.45;
  background: var(--grad-cyan);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .camp-intro-band-body h2 { color: #1d8fa0; background: none; }
}
.camp-intro-band-body p { margin-top: 0.9rem; font-size: 0.98rem; line-height: 1.95; color: var(--ink-soft); }
.camp-intro-band-art img { border-radius: 12px; box-shadow: 0 14px 34px rgba(18,34,56,0.12); }

/* 拡大後の調整（2026-07-28）
   H1を大型化した副作用で2カラム時に3行へ折り返し、バッジがカード外で切れていた。 */
@media (min-width: 1000px) {
  .svc-hero-heading { font-size: clamp(2.1rem, 3.0vw, 2.9rem); }
  .svc-hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr); }
}
.svc-hero-card-badge { right: 0.9rem; top: 0.9rem; left: auto; z-index: 3; }

/* ==========================================================================
   鈴木さんフィードバック 第4弾（2026-07-28）
   2. ボタンをさらに拡大・文字も拡大・ホバーで光る
   3. FVにサブキャッチ / CTA注記を「30秒で完了します」へ
   4. 全体の文字基準サイズを拡大
   ========================================================================== */

/* ---------- 4. 全体の文字を大きく ----------
   html基準を上げると rem 指定の全要素が連動して拡大する。
   2倍にすると1行の文字数が極端に減り可読性がむしろ落ちるため、
   本文実測16px→20px（1.25倍）＋見出し系は個別にさらに引き上げる構成にした。 */
html { font-size: 125%; }
body { font-size: 1rem; line-height: 2.0; }
.svc-section-lead { font-size: 1.08rem; }
.svc-card-desc, .svc-reason p, .svc-step p, .svc-myth-a { font-size: 1rem; }
.svc-card-points li, .svc-hero-card-points li { font-size: 0.95rem; }
.svc-faq-item summary { font-size: 1.08rem; }
.svc-faq-answer { font-size: 1rem; }
.svc-table { font-size: 1rem; }
.card-title, .row-item-title { font-size: 1.05rem; }

/* ---------- 2. ボタン: さらに拡大・文字も拡大 ---------- */
.svc-btn, .diagnosis-cta-btn, .course-cta-btn,
.ops-support-band-btn, .camp-intro-band-btn, .form-submit-btn, .svc-hero-card-btn {
  min-height: 92px;
  padding: 1.3rem 3.2rem;
  font-size: 1.32rem;
}
.svc-btn-label { font-size: 1.32rem; font-weight: 700; }
.svc-btn-note { font-size: 0.92rem; opacity: 0.92; }
.svc-hero-card-btn { min-height: 104px; }

/* ---------- 2. ホバーで光が走る ---------- */
.svc-btn::before, .diagnosis-cta-btn::before, .course-cta-btn::before, .form-submit-btn::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg,
    rgba(255,255,255,0) 30%, rgba(255,255,255,0.42) 50%, rgba(255,255,255,0) 70%);
  transform: translateX(-120%);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.svc-btn:hover::before, .diagnosis-cta-btn:hover::before,
.course-cta-btn:hover::before, .form-submit-btn:hover::before { transform: translateX(120%); }
.svc-btn, .diagnosis-cta-btn, .course-cta-btn, .form-submit-btn { position: relative; overflow: hidden; }

/* ---------- 2. お問い合わせ（青）の白飛び対策 ---------- */
.svc-btn--ghost, .svc-btn--ghost-inverse {
  background: linear-gradient(135deg, #2b7fc4 0%, #1a5f9e 58%, #124878 100%);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
  box-shadow: 0 12px 28px rgba(18, 72, 120, 0.34);
}

/* ---------- 3. FVサブキャッチ ---------- */
.svc-hero-subcatch {
  margin-top: 1.1rem;
  font-family: var(--font-serif);
  font-size: clamp(1.05rem, 1.9vw, 1.4rem);
  font-weight: 700; line-height: 1.7;
  color: var(--brand-orange);
}

/* ---------- 3. 企業の支援事例(2026-07-29 横スクロールカルーセル化) ----------
   旧: 2列グリッドで縦に積む構成(5社目が余って空白ができていた)。
   新: 横一列に並べ、CSSのscroll-snap-type: x mandatoryをネイティブ横スクロールの
   土台にする(スマホのスワイプがそのまま効き、JS(assets/js/case-carousel.js)が
   読み込まれなくても最低限は使える)。矢印ボタンはJSがscrollBy()で動かす。
   表示枚数の目安: デスクトップ約2.5枚・タブレット約2枚・スマホ約1.15枚
   (次のカードが少し覗く=横に続くとひと目で分かる)。
   2026-07-29: デスクトップのカード幅を292px→固定360pxへ是正(詳細は.svc-case参照)。 */
.svc-cases { background: var(--bg-soft-blue); }

.svc-case-carousel { display: flex; align-items: center; gap: 0.6rem; }

.svc-case-track {
  flex: 1 1 auto; min-width: 0;
  display: flex; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; -ms-overflow-style: none;
}
.svc-case-track::-webkit-scrollbar { display: none; height: 0; }

.svc-case-list { display: flex; gap: 1.1rem; }
@media (min-width: 640px) { .svc-case-list { gap: 1.4rem; } }
@media (min-width: 1040px) { .svc-case-list { gap: 1.75rem; } }

/* カード幅: スマホは次のカードが約15%覗く1枚強、タブレット(640〜1039px)は
   コンテナを2分割して約2枚。
   2026-07-29是正: デスクトップは従来コンテナを3分割していたため幅1440pxで
   カード292px程度しかなく、「NPO法人 ワールド・ビジョン・ジャパン」等の長い社名が
   3行に折れていた。3分割(可変幅)をやめ、固定幅18rem(=360px。html{font-size:125%}
   により1rem=20pxである点に注意)にすることで、幅1440px(実効コンテナ幅は.wrapの
   max-width 1180pxで頭打ち)では約2.6枚分になり、「次のカードが少し覗く」を
   保ったまま社名が2行以内に収まる幅を確保する。
   タブレット(2分割)の上限をデスクトップと分ける基準幅は1040px。

   2026-07-29再是正(iframe実寸375pxで発覚した致命的不具合): 旧来スマホ用ルールは
   flex: 0 0 calc(100% - 3.25rem) だったが、この「100%」は.svc-case-list(このカードの
   flexコンテナ)基準のpercentageであり、.svc-case-list自身がflex-basis:auto(幅不定)な
   入れ子flexアイテムのため、ブラウザはpercentageを解決できず'auto'(コンテンツ由来の
   fit-content)にフォールバックしていた。結果カード幅が実測706px(ビューポート375pxの
   約1.9倍)に固定され、トラックからカードの28%しか見えなくなっていた(=循環参照)。
   640px以上の2ルールはiframe実測で現状問題なし(900pxで約2枚/1440pxで360px+3枚目
   約85px覗く、が実際に出ている)と確認できたため、この基準(0〜639px)だけを
   循環参照の起きないビューポート単位(vw)に置き換える。
   計算式 100vw - 5.75rem の内訳: wrap左右余白2.5rem(1.25rem×2。下の矢印非表示化と
   合わせてスマホのトラック実効幅は「100vw - wrap左右余白」に一致する) +
   旧ルールが確保していたガター+ピーク予約3.25rem(=gap1.1rem+ピーク約2.15rem=43px)。
   旧デザインの「次のカードが少し覗く」量をそのまま踏襲している。 */
.svc-case {
  flex: 0 0 calc(100vw - 5.75rem); max-width: calc(100vw - 5.75rem);
  scroll-snap-align: start; scroll-snap-stop: always;
  background: #fff; border: 1px solid var(--rule); border-radius: 14px;
  overflow: hidden; box-shadow: 0 4px 20px rgba(18, 34, 56, 0.07);
}
@media (min-width: 640px) {
  .svc-case { flex-basis: calc((100% - 1.4rem) / 2); max-width: calc((100% - 1.4rem) / 2); }
}
@media (min-width: 1040px) {
  .svc-case { flex: 0 0 18rem; max-width: 18rem; }
}

/* 矢印ボタン。先頭/末尾ではJSがdisabledを付け、視覚的にも薄くする
   (=まだ続きがあるかどうかをボタンの見た目でも伝える)。 */
.svc-case-nav {
  flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--rule-strong); color: var(--ink);
  font-size: 1.15rem; line-height: 1; box-shadow: 0 4px 14px rgba(18, 34, 56, 0.08);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease,
              transform 0.15s ease, opacity 0.15s ease;
}
.svc-case-nav:hover:not(:disabled) {
  background: var(--brand-orange); border-color: var(--brand-orange);
  color: #fff; transform: translateY(-1px);
}
.svc-case-nav:disabled { opacity: 0.32; cursor: default; }
.svc-case-nav:disabled:hover { transform: none; }

/* 2026-07-29是正: 矢印ボタン(旧480px未満で各2.35rem=47px)がスマホでは横幅を
   食いつぶし、トラックのclientWidthが200pxしか残っていなかった(375px実測)。
   カード幅ルールと同じ基準(639px)未満では矢印を非表示にし、トラック全幅を
   カード表示に使う。「まだ続きがある」ことは上のカード幅ルールで確保した
   「次のカードが約43pxのぞく」ピークで伝わるため、ドット等の追加は不要と判断した。
   スワイプ(ネイティブのscroll-snap-type:x)は矢印なしでも常に機能する。
   旧@media(max-width:480px)の矢印縮小ルールは、非表示化により意味を失うため撤去した。 */
@media (max-width: 639.98px) {
  .svc-case-nav { display: none; }
  .svc-case-carousel { gap: 0; }
}

/* 2026-07-29是正: 原画(assets/img/cases/*.jpg)は全5枚とも実測1200x675=16:9。
   従来は枠の高さを220px固定にしていたため、カード幅(1.53:1相当)とアスペクト比が
   食い違い、object-fit:coverで左右が約8%ずつ削られ、画像左上のWEBMARKSロゴが
   「EBMARKS」に欠け、右上の社名ラベルも切れていた。枠自体を画像と同じ16:9にすれば、
   coverでも左右は一切削られない(枠比率と画像比率が一致するため)。 */
.svc-case-art { aspect-ratio: 16 / 9; overflow: hidden; }
.svc-case-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc-case-art--placeholder {
  height: 100%;
  background: linear-gradient(135deg, #17213c 0%, #1b3d63 60%, #2fb7c9 140%);
}
.svc-case-body { padding: 1.6rem 1.7rem 1.8rem; }
.svc-case-industry {
  display: inline-block; padding: 0.28rem 0.8rem; border-radius: 999px;
  background: rgba(47,183,201,0.14); color: #1d8fa0;
  font-family: var(--font-mono); font-size: 0.78rem; font-weight: 700;
}
.svc-case-company {
  margin-top: 0.75rem; font-family: var(--font-serif);
  font-size: 1.4rem; line-height: 1.5; color: var(--ink);
}
.svc-case-summary { margin-top: 0.8rem; font-size: 1rem; line-height: 1.95; color: var(--ink-soft); }
.svc-case-result {
  margin-top: 1rem; padding: 0.8rem 1rem; border-radius: 8px;
  background: var(--bg-soft-blue); font-weight: 700; color: var(--ink);
}

/* ==========================================================================
   バグ修正・調整 第5弾（2026-07-28 鈴木さん指摘）
   ボタン過大 / FAQ文字切れ / 青ボタン白飛び / ナビ横スクロール / 診断ボタン位置
   ========================================================================== */

/* ---------- 2. ボタンが大きすぎたので適正化（行間も詰める） ---------- */
.svc-btn, .diagnosis-cta-btn, .course-cta-btn,
.ops-support-band-btn, .camp-intro-band-btn, .form-submit-btn, .svc-hero-card-btn {
  min-height: 64px;
  padding: 0.85rem 2.2rem;
  font-size: 1.08rem;
  line-height: 1.35;
}
.svc-btn-label { font-size: 1.08rem; line-height: 1.35; }
.svc-btn-note  { font-size: 0.8rem;  line-height: 1.3; opacity: 0.9; }
.svc-hero-card-btn { min-height: 72px; gap: 0.1rem; }

/* ---------- 1. FAQ の文字端が切れる問題 ----------
   summary は list-style:none + flex にしていたが、::before のマーカー分の幅を
   確保していなかったため、長い設問の右端が親からはみ出して切れていた。 */
.svc-faq-item summary {
  align-items: flex-start;
  padding-right: 0.5rem;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: normal;
  line-break: strict;
}
.svc-faq-item summary::before { margin-top: 0.1em; }
.svc-faq-answer { padding-right: 0.5rem; overflow-wrap: anywhere; }

/* ---------- 1. 青ボタンの白飛び ----------
   ホバー時の光沢(::before)が白すぎて文字ごと飛んでいた。青系だけ光を弱める。 */
.svc-btn--ghost::before, .svc-btn--ghost-inverse::before {
  background: linear-gradient(100deg,
    rgba(255,255,255,0) 30%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0) 70%);
}
.svc-btn--ghost, .svc-btn--ghost-inverse {
  background: linear-gradient(135deg, #2477c4 0%, #175a9b 58%, #0f4478 100%);
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.svc-btn--ghost:hover, .svc-btn--ghost-inverse:hover { color: #fff !important; }

/* ---------- 4. 下部リンクをはっきりした青へ ---------- */
.svc-card-link {
  color: #1565c0; border-bottom-color: #1565c0; font-weight: 700;
}
.svc-card-link:hover { color: #0d47a1; border-bottom-color: #0d47a1; }

/* ---------- 4. ヘッダーナビ: 横スクロールをやめ2段で全部見せる ---------- */
@media (min-width: 960px) {
  .site-header .wrap { flex-wrap: wrap; row-gap: 0.35rem; padding-top: 0.6rem; padding-bottom: 0.6rem; }
  .desk-nav {
    overflow-x: visible;
    flex-wrap: wrap;                 /* 2段になってよいので全項目を見せる */
    row-gap: 0.15rem; column-gap: 0.95rem;
    margin-left: 1.25rem; padding-left: 0;
    -webkit-mask-image: none; mask-image: none;   /* 端のフェードは不要になる */
    justify-content: flex-start;
    flex: 1 1 auto; min-width: 0;
  }
  .desk-nav a { font-size: 0.78rem; padding: 0.25rem 0; }
  /* 4. 無料サイト診断ボタンを右端へ寄せる */
  .header-cta { margin-left: auto; flex: none; align-self: center; }
}
@media (min-width: 1280px) {
  .desk-nav { flex: 1 1 auto; justify-content: flex-start; overflow-x: visible; -webkit-mask-image: none; mask-image: none; }
}

/* 事例カードの出典リンク（数値の裏付けへ辿れるようにする） */
.svc-case-src {
  display: inline-block; margin-top: 0.9rem;
  font-size: 0.92rem; font-weight: 700; color: #1565c0;
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
}
.svc-case-src:hover { color: #0d47a1; }

/* ==========================================================================
   ヘッダー整理・FV実績プルーフ（2026-07-28 鈴木さん指摘 第6弾）
   ========================================================================== */

/* ---------- 1(a)(c) ヘッダーを1行に整える ----------
   CTAを撤去したので、ブランド名の右にメニューが自然に並ぶ形へ戻す。
   9カテゴリは2段に折り返してよいが、行送りを詰めてヘッダーが膨らまないようにする。 */
@media (min-width: 960px) {
  .site-header .wrap {
    flex-wrap: wrap; align-items: center;
    row-gap: 0.1rem; column-gap: 1.5rem;
    padding-top: 0.7rem; padding-bottom: 0.7rem;
    min-height: 0;
  }
  .brand { align-self: center; }
  .desk-nav {
    margin-left: 0; padding-left: 0;
    flex: 1 1 auto; min-width: 0;
    justify-content: flex-start;
    row-gap: 0; column-gap: 1.05rem;
    -webkit-mask-image: none; mask-image: none;
    overflow: visible;
  }
  .desk-nav a { font-size: 0.8rem; padding: 0.2rem 0; }
}
.header-cta { display: none !important; }   /* 1(b) メニュー部分には出さない */

/* ---------- 2(a)(b) FVの実績プルーフ（小さく・控えめ） ---------- */
.svc-hero-proof {
  display: inline-flex; align-items: center; gap: 0.85rem;
  margin-top: 1.75rem; padding: 0.6rem 1rem 0.6rem 0.6rem;
  background: #fff; border: 1px solid var(--rule); border-radius: 999px;
  box-shadow: 0 4px 14px rgba(18, 34, 56, 0.07);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
  max-width: 100%;
}
.svc-hero-proof:hover { box-shadow: 0 8px 22px rgba(18, 34, 56, 0.12); transform: translateY(-1px); }
.svc-hero-proof img {
  width: 56px; height: 56px; border-radius: 50%;
  object-fit: cover; flex: none;
}
.svc-hero-proof-body { display: flex; flex-direction: column; min-width: 0; }
.svc-hero-proof-result {
  font-family: var(--font-mono); font-weight: 700;
  font-size: 0.95rem; line-height: 1.3; color: var(--brand-orange);
}
.svc-hero-proof-company {
  font-size: 0.76rem; line-height: 1.4; color: var(--ink-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.svc-hero-proof-more {
  flex: none; font-size: 0.78rem; font-weight: 700; color: #1565c0;
  padding-left: 0.5rem; border-left: 1px solid var(--rule);
}
@media (max-width: 560px) {
  .svc-hero-proof { border-radius: 14px; }
  .svc-hero-proof-more { display: none; }
}

/* ---------- 事例カードの画像を落ち着いた高さに ----------
   2026-07-29是正: 固定190pxの上書きは.svc-case-art(aspect-ratio:16/9)と比率が
   食い違い、coverで左右が削れる原因の一つだった。枠側で既に16:9固定済みのため、
   ここでの高さ上書きは撤去する(img側はheight:100%のまま枠に追従させる)。 */

/* ==========================================================================
   (旧・姉妹媒体のサービストップ画像追加メモ。本メディアでは未使用)
   「画像が非常に重要。もっと画像や実際の例を」という鈴木さん指摘への対応。
   文字だけだった3セクションに、見出し直下の1枚画像を共通部品で追加する。
   svc-hero-photo / svc-case-art と同じ考え方(角丸カード＋object-fit:cover)で
   トーンを揃え、この1点だけ新規に増やす。
   ========================================================================== */
.svc-section-media {
  margin: 0 0 2.25rem;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--rule);
  box-shadow: 0 4px 20px rgba(18, 34, 56, 0.07);
}
.svc-section-media img {
  width: 100%; height: 200px;
  object-fit: cover; object-position: center 38%;
  display: block;
}
@media (min-width: 640px) {
  .svc-section-media img { height: 260px; }
}
@media (min-width: 880px) {
  .svc-section-media img { height: 300px; }
}

/* ---------- セクション画像のトリミング是正（2026-07-28 ディレクター検品） ----------
   object-fit: cover + object-position: center のままだと、対比表セクションの画像で
   左上にある「検索窓と虫眼鏡」が切り落とされ、指とネクタイだけが残って
   何の画像か伝わらない状態になっていた（alt文とも食い違っていた）。
   被写体の主題が上寄りにあるため、上端を基準にトリミングする。 */
.svc-section-media img { object-position: center top; }
.svc-section-media { max-width: 900px; margin-left: auto; margin-right: auto; }
@media (min-width: 880px) {
  .svc-section-media img { height: 340px; }
}

/* 資料DLフォーム: 送信成功後にその場で渡すダウンロードボタン(2026-07-29)。
   親の .form-status.is-success が文字色を成功グリーンに塗るため、
   ボタン側の白文字が負けないよう親子セレクタで具体度を上げて上書きする。 */
.form-status .lead-form__deliver {
  display: flex;
  width: 100%;
  max-width: min(480px, 100%);
  margin-top: 16px;
  /* 共通CTAは white-space:nowrap のため、狭い画面で親からはみ出す。
     資料DLの成功ボタンだけは折り返しを許可し、どの幅でも収まるようにする。 */
  white-space: normal;
  box-sizing: border-box;
  justify-content: center;
  text-align: center;
  color: #fff;
  text-decoration: none;
}

/* 記事サムネイル(カード/注目記事/記事カバー)を図解SVGへ差し替え(2026-07-29)。
   図解は16:9(800x450)固定だが、上記の .card-thumb / .hero-feature-thumb /
   .article-cover は3:2ボックス(aspect-ratio:3/2)のまま維持する(レイアウト変更なし)。
   object-fit:coverのままだと16:9画像を3:2ボックスへ詰めるときに左右が
   合計約15.6%トリミングされ、図解が左端に寄せて置いている見出しラベル
   (例:「COMPARE」「従来型検索フロー」)が切れて読めなくなることを実機確認したため、
   このルールだけ末尾追記でcontainへ上書きする(トリミングによる文字欠けを避け、
   上下にわずかな余白が入る方を優先)。デスク別共通PNG(3:2ネイティブ)を使う
   フォールバック記事には実質的な見た目の変化はない(3:2画像はcontainでもcoverでも
   ぴったり収まるため)。 */
.card-thumb img,
.hero-feature-thumb img,
.article-cover img {
  object-fit: contain;
  background: var(--bg-subtle);
}

/* セクション飾り見出しの日本語部分を語中で割らせない(2026-07-29 ディレクター検品)。
   スマホ実寸375pxで「・法人支援の実／績」と2文字だけが次行に落ちていた。
   英字部分は単語境界で自然に折り返してよいので、日本語側だけ改行禁止にする。 */
.svc-kicker-ja { white-space: nowrap; }