/* ==== site.css ==== */

/* ============================================================
   JDOC — English homepage redesign (j-doc.jp/en/top/)
   Design system shared with the English LP:
   white base / JDOC blue #4883AE / dark navy ink #1A1F26
   Archivo (display) / Inter (body) / IBM Plex Mono (labels)
   1 file, organized by section. No frameworks.
   ============================================================ */

/* ------------------------------------------------------------
   01. Design tokens
   ------------------------------------------------------------ */
:root {
  /* Color — from j-doc.jp brand */
  --bg: #FFFFFF;             /* ベース背景 */
  --bg-alt: #F4F7F9;         /* 交互セクション背景（薄いブルーグレー） */
  --ink: #1A1F26;            /* 見出し・本文（ダークネイビー） */
  --muted: #313C47;          /* 補助テキスト（濃いめ・コントラスト9:1以上） */
  --line: #DCE4EA;           /* 罫線 */
  --brand: #4883AE;          /* JDOCブルー：大きい数字・装飾 */
  --brand-strong: #3D74A0;   /* ボタン背景（白文字で5:1以上） */
  --brand-deep: #2E6084;     /* 小さいラベル文字（6.7:1） */
  --brand-tint: #E7EFF5;     /* ブルーの淡背景 */
  --deep-bg: #24567E;        /* 濃青セクション背景 */
  --footer-bg: #14202B;      /* フッターのみダークネイビー */

  /* Type */
  /* 欧文はArchivo/Inter、和文はNoto Sans JPにフォールバックさせる。
     ラベル・番号は欧文のみなのでmonoをそのまま使う */
  --font-display: 'AmpFix', 'Archivo', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif;
  --font-body: 'AmpFix', 'Inter', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif;
  --font-mono: 'AmpFix', 'IBM Plex Mono', 'Noto Sans JP', 'Courier New', monospace;

  /* Layout */
  --max-w: 1240px;
  --gutter: clamp(20px, 4vw, 48px);
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 40px;
  --s5: 64px; --s6: 96px; --s7: 144px;

  /* Motion */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --dur: 700ms;
}

/* ------------------------------------------------------------
   02. Reset / base
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font: 400 17px/1.7 var(--font-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, dl, dd, ol, ul, figure, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

img, svg { max-width: 100%; display: block; }

:focus-visible {
  outline: 2px solid var(--brand-deep);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: -100%; left: var(--s2);
  z-index: 100; padding: 12px 20px;
  background: var(--ink); color: #fff;
  font: 500 14px var(--font-body);
  border-radius: 999px;
}
.skip-link:focus { top: var(--s2); }

/* アンカー着地位置を固定ヘッダー分下げる */
section[id] { scroll-margin-top: 108px; }

/* ------------------------------------------------------------
   03. Typography
   ------------------------------------------------------------ */
h1 {
  font: 700 clamp(38px, 5.6vw, 68px)/1.1 var(--font-display);
  letter-spacing: -0.005em;
}
h2 {
  font: 600 clamp(30px, 4vw, 52px)/1.12 var(--font-display);
  letter-spacing: -0.02em;
}
h3 { font: 600 clamp(19px, 2vw, 24px)/1.35 var(--font-display); letter-spacing: -0.01em; }

.display-heading {
  font: 600 clamp(30px, 4vw, 52px)/1.12 var(--font-display);
  letter-spacing: -0.02em;
}

h2, h3, .display-heading { text-wrap: balance; }
p { text-wrap: pretty; }
/* 文の切れ目にだけ入れる手動改行（狭い画面では解除して自然折返し） */
.br { display: none; }
@media (min-width: 721px) { .br { display: inline; } }
/* 文節の途中で折り返させない */
.nw { white-space: nowrap; }

.eyebrow {
  font: 500 12px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--brand-deep);
}

/* リード文はコンテナ幅いっぱいまで使い、中途半端な位置で折り返さない */
.lead { color: var(--muted); max-width: none; font-size: 18px; }

.stat-number {
  font: 700 clamp(40px, 4.2vw, 54px)/1 var(--font-display);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--brand);
}

/* テキストリンク（矢印付き） */
.link-arrow {
  display: inline-block;
  font: 600 15px var(--font-body);
  color: var(--brand-deep);
}
.link-arrow span { display: inline-block; transition: transform .3s var(--ease-out); }
.link-arrow:hover span { transform: translateX(5px); }

/* ------------------------------------------------------------
   04. Layout primitives
   ------------------------------------------------------------ */
.container {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(72px, 10vw, var(--s7)); }
.section-alt { background: var(--bg-alt); }

/* セクションヘッダ：番号＋タイトル全体にかかる下線 */
.section-label {
  display: flex; align-items: baseline; gap: 14px;
  width: fit-content;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--brand);
  margin-bottom: var(--s5);
}
.section-label .num { font: 500 13px var(--font-mono); color: var(--brand-deep); }
.section-label .label-title {
  font: 500 13px/1 var(--font-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
}

/* ------------------------------------------------------------
   05. Components — buttons, cards
   ------------------------------------------------------------ */
.btn-primary {
  display: inline-block;
  background: var(--brand-strong); color: #fff;
  padding: 17px 32px;
  border: 0; border-radius: 999px;
  font: 600 16px var(--font-body);
  cursor: pointer;
  transition: background .3s, transform .3s var(--ease-out), box-shadow .3s;
}
.btn-primary:hover {
  background: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(26,31,38,.18);
}
.btn-primary .arrow {
  display: inline-block; margin-left: 10px;
  transition: transform .3s var(--ease-out);
}
.btn-primary:hover .arrow { transform: translateX(6px); }

.btn-secondary {
  display: inline-block;
  background: none; color: var(--ink);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 15px 30px;
  font: 600 16px var(--font-body);
  transition: color .3s, border-color .3s, background .3s, transform .3s var(--ease-out);
}
.btn-secondary:hover {
  color: #fff; background: var(--brand-strong); border-color: var(--brand-strong);
  transform: translateY(-2px);
}

/* カード：白地・罫線・控えめ角丸。hoverで青の上罫線＋浮き */
.card {
  border: 1px solid var(--line);
  border-top: 3px solid transparent;
  border-radius: 10px;
  padding: var(--s4);
  background: var(--bg);
  transition: border-color .3s, transform .3s var(--ease-out), box-shadow .3s, background .3s;
}
.card:hover {
  border-top-color: var(--brand);
  background: var(--brand-tint);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(26,31,38,.08);
}

.card-num {
  display: block;
  font: 700 clamp(24px, 2.4vw, 30px)/1 var(--font-display);
  color: var(--brand);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--s2);
}
.card h3, .card h4 {
  font: 600 clamp(19px, 2vw, 23px)/1.35 var(--font-body);
  letter-spacing: -0.01em;
  margin-bottom: var(--s2);
  color: var(--ink);
}
.card p { color: var(--muted); }

/* ------------------------------------------------------------
   06. Header
   ------------------------------------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
  transition: background .3s, border-color .3s, box-shadow .3s;
}
.site-header.is-scrolled {
  background: rgba(255,255,255,.94);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 16px rgba(26,31,38,.05);
}

.header-inner {
  display: flex; align-items: center; gap: var(--s3);
  min-height: 88px;
}
.logo {
  display: flex; align-items: center;
  font: 700 21px var(--font-display);
  letter-spacing: .06em;
  padding: 10px 0;
  color: var(--ink);
}
.logo img { height: 60px; width: auto; }
.header-nav {
  display: flex; gap: var(--s3);
  margin-left: auto;
}
.header-nav a {
  font: 500 15px var(--font-body);
  color: var(--muted);
  padding: 12px 4px;
  border-bottom: 2px solid transparent;
  transition: color .3s, border-color .3s;
}
.header-nav a:hover,
.header-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--brand); }

.lang-switch {
  display: flex; align-items: center; gap: 6px;
  font: 500 13px var(--font-mono);
  color: var(--muted);
}
.lang-switch a { padding: 8px 2px; transition: color .3s; }
.lang-switch a:hover { color: var(--ink); }
.lang-switch .is-active { color: var(--brand-deep); }

.header-cta { padding: 12px 24px; font-size: 15px; }

/* ------------------------------------------------------------
   07. Hero — 戦略→プラットフォーム→ブランド成長の全画面ビジュアル
   ------------------------------------------------------------ */
.hero {
  position: relative;
  padding-block: clamp(56px, 9vw, 120px);
  /* 下限560pxだと背の低い画面でキャンバスが縮み、下端のクラスタの
     アバターが切れる。全要素が収まる実測値+余裕の710pxを下限にする */
  min-height: clamp(710px, 82vh, 780px);
  display: flex;
  align-items: center;
  /* グラデーションは右上と左下のみ（やや濃いめ）。テキストの乗る中央左は白のまま */
  background:
    radial-gradient(1100px 560px at 90% 10%, #B7D2E7 0%, rgba(183,210,231,0) 58%),
    radial-gradient(900px 520px at 4% 100%, #C9DEED 0%, rgba(201,222,237,0) 55%),
    var(--bg);
  overflow: hidden;
}

/* 左下のグラデーションは次のセクションへ自然に続ける（境界線を見せない）。
   ヒーロー側の radial-gradient(900px 520px at 4% 100%, #C9DEED 0%, …55%) と
   サイズ・色・フェード率を完全に一致させた鏡写しにすることで、
   境界行の色が両側で同値になり、筋が物理的に出なくなる */
.line.section {
  background:
    radial-gradient(900px 520px at 4% 0%, #C9DEED 0%, rgba(201,222,237,0) 55%),
    var(--bg);
  /* サブピクセルの丸め誤差で境界に1px筋が出ないよう、ヒーローに1px重ねる */
  margin-top: -1px;
}

.hero-grid {
  position: relative;
  z-index: 2;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
}
.hero-main { max-width: 620px; }
/* テキストブロックはやや上に寄せてビジュアルとのバランスを取る */
@media (min-width: 1025px) {
  .hero-main { margin-top: -32px; }
}

.hero-main .eyebrow { margin-bottom: var(--s3); }
/* Aboutなど下層ページの.page-hero h1と全幅で完全に同じサイズにする
   （中途半端な幅だけ揃うのを避けるため、mobile限定オーバーライドではなく
   基本formula自体を統一） */
.hero-title {
  font-size: clamp(34px, 4.6vw, 60px);
  line-height: 1.12;
  max-width: none;
}
/* 「Marketing,」の後の改行はどの幅でも必ず入れる（.brの非表示化を打ち消す） */
.hero-title .br { display: inline; }
/* PCでは「Performance Marketing, / Engineered for Japan.」を必ず2行で表示
   （.br以外の位置では折り返させない） */
@media (min-width: 721px) {
  .hero-title { white-space: nowrap; }
}
.hero-sub {
  margin-top: var(--s4);
  max-width: 33em;
  color: #222A33;
  /* 下層ページの.leadと全幅で完全に同じ18pxに統一 */
  font-size: 18px;
}
/* AI効率経営の1行：稲妻が静かにスパークし続ける */
.hero-ai {
  margin-top: var(--s3);
  display: flex; align-items: center; gap: 8px;
  font: 500 12px/1.5 var(--font-mono);
  letter-spacing: .1em;
  color: var(--brand-deep);
}
.hero-ai svg { width: 15px; height: 15px; flex: 0 0 auto; }
.hero.is-in .hero-ai svg { animation: spark-blink 2.2s ease-in-out 1s infinite; }
@keyframes spark-blink {
  0%, 100% { opacity: .55; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.25); }
}

.hero-actions {
  margin-top: var(--s4);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s2) var(--s3);
}

/* H1 ワード単位の階段イン（JSがspan分割・delay付与） */
.hero-title .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.hero-title.is-in .word { opacity: 1; transform: translateY(0); }

.hero-sub, .hero-ai, .hero-actions {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.hero.is-in .hero-sub { opacity: 1; transform: none; transition-delay: 350ms; }
.hero.is-in .hero-actions { opacity: 1; transform: none; transition-delay: 450ms; }
.hero.is-in .hero-ai { opacity: 1; transform: none; transition-delay: 550ms; }

/* ---------- キャンバス：ヒーロー全面に広がるビジュアルレイヤー ---------- */
.hero-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  transition: opacity 700ms var(--ease-out);
  pointer-events: none;
}
.hero-canvas.is-in { opacity: 1; }

/* 成長曲線（左下→右上）。JSがgetTotalLength()で描画をセットアップ */
.growth-svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.growth-draw { transition: stroke-dashoffset 2s var(--ease-out) .25s; }
/* 波しぶき（浮世絵タッチ）：線が右上まで描き切られた後にふわっと現れる */
.wave-spray { opacity: 0; transition: opacity .9s var(--ease-out) 1.75s; }
.hero-canvas.is-in .wave-spray { opacity: 1; }
/* 矢印まわりの動きは止め、線は一度描かれたら静止（元のデザイン） */
.growth-flow { display: none; }
/* 塗りのエリア（グラフ風）はキャンバスのフェードインと一緒に現れる */
.growth-area { pointer-events: none; }

/* 共通：浮遊する要素の登場（階段）＋ゆっくり漂うフロート */
.cl, .solo, .strategy-node, .brand-node, .avatar {
  position: absolute;
  opacity: 0;
  transform: translateY(26px) scale(.85);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.hero-canvas.is-in .cl,
.hero-canvas.is-in .solo,
.hero-canvas.is-in .strategy-node,
.hero-canvas.is-in .brand-node,
.hero-canvas.is-in .avatar { opacity: 1; transform: none; }

@keyframes hv-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

/* ---------- 起点：STRATEGY FIRST ---------- */
.strategy-node {
  left: 4.5%; bottom: 4%;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  transition-delay: .15s;
}
.sn-icon {
  position: relative;
  display: grid; place-items: center;
  width: 58px; height: 58px;
  background: #fff;
  border: 2px solid var(--brand);
  border-radius: 50%;
  box-shadow: 0 10px 24px rgba(26,31,38,.15);
}
.sn-icon svg { width: 30px; height: 30px; }
/* 戦略から発信が始まるパルス */
.sn-icon::after {
  content: "";
  position: absolute; inset: -2px;
  border-radius: 50%;
  border: 2px solid var(--brand);
  opacity: 0;
}
.hero-canvas.is-in .sn-icon::after { animation: sn-pulse 2.6s var(--ease-out) 1s infinite; }
@keyframes sn-pulse {
  0%   { transform: scale(1); opacity: .55; }
  100% { transform: scale(2); opacity: 0; }
}

/* ラベル（白の座布団つきモノスペース） */
.hv-label {
  font: 500 11px/1 var(--font-mono);
  letter-spacing: .14em;
  color: var(--brand-deep);
  background: rgba(255,255,255,.85);
  padding: 5px 10px;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(26,31,38,.08);
  white-space: nowrap;
}

/* ---------- プラットフォーム群（グループ＝媒体＋広告バッジ＋ファン） ---------- */
.cl { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cl-chips { display: flex; align-items: center; gap: 12px; }

/* グループ全体の背面に白いグラデーションの座布団を敷き、
   「1つのまとまり」に見せる */
.cl::before {
  content: "";
  position: absolute;
  inset: -26px -38px;
  z-index: -1;
  border-radius: 999px;
  background: radial-gradient(closest-side, rgba(255,255,255,.98) 30%, rgba(255,255,255,.72) 62%, rgba(255,255,255,0) 100%);
}

/* 各ロゴは白い浮きタイルに載せ、浮世絵化した背景から立体的に浮かせる */
.cl-chip {
  display: grid; place-items: center;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 10px 24px rgba(26,31,38,.14), 0 2px 6px rgba(26,31,38,.07);
}
.cl-chip.lg { width: 80px; height: 80px; border-radius: 20px; }
.cl-chip.md { width: 56px; height: 56px; border-radius: 15px; }
.cl-chip.lg svg { display: block; width: 52px; height: 52px; }
.cl-chip.md svg { display: block; width: 34px; height: 34px; }
/* 画像ロゴのチップ（Google Ads・LYなど）はsvgチップと同サイズに */
.cl-chip.lg .chip-img { display: block; width: 50px; height: 50px; object-fit: contain; }
.cl-chip.md .chip-img { display: block; width: 34px; height: 34px; object-fit: contain; }
/* Yahoo! JAPANワードマーク用の白ピル */
.cl-chip.wide {
  display: flex; align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 14px;
  box-shadow: 0 6px 16px rgba(26,31,38,.12);
}
.cl-chip.wide img { display: block; height: 20px; width: auto; }

/* 広告バッジ：この媒体で広告を運用している証 */
.cl-ad {
  display: inline-flex; align-items: center; gap: 7px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 15px;
  font: 600 12px/1 var(--font-mono);
  letter-spacing: .1em;
  color: var(--ink);
  box-shadow: 0 8px 20px rgba(26,31,38,.14);
}
.cl-ad svg, .cl-ad img { width: 17px; height: 17px; display: block; }
.cl-ad.sm { padding: 6px 11px; font-size: 10px; }
.cl-ad.sm svg, .cl-ad.sm img { width: 13px; height: 13px; }

/* グループ付きファン：クラスターの周囲に寄り添う */
.cl .avatar {
  position: absolute;
  width: 34px; height: 34px;
  transition-delay: 1.35s;
}
.cl .ca-a { top: -24px; right: -30px; left: auto; }
.cl .ca-b { bottom: -18px; left: -30px; top: auto; }
.cl .ca-c { top: -22px; left: -34px; }

/* 配置：曲線に沿って左下→右上へ。Google/Meta群（三角形）を大きく手前に
   （テキスト・CTAボタンには重ねない。ビジュアルはあくまで背景。
     常時アニメーションは戦略の波・CONVERSIONのバー・線の光のみ） */
.cl-google { left: calc(54% + 38px); top: 50%; transition-delay: .5s; }
.cl-meta   { left: 66%; top: 14%; transition-delay: .75s; }
.cl-x      { left: 86%; top: 52%; transition-delay: 1s; }
/* LINE・Yahoo!群は矢印の右下（Google群の下あたり） */
.cl-ly     { left: 57%; top: 80%; transition-delay: .65s; }
.cl-tiktok { left: 76%; top: 76%; transition-delay: .9s; }

/* 単体バッジ：PR TIMES（プレスリリース発信）。PCではTikTokの右下に寄り添う */
.solo { display: block; }
.solo-prtimes { left: 82%; top: 84%; transition-delay: 1.2s; }

.pr-badge {
  display: inline-flex; align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 16px;
  box-shadow: 0 8px 20px rgba(26,31,38,.14);
}
.pr-badge img { display: block; height: 18px; width: auto; }

/* セカンダリCTA（Case studies）はプライマリの右横。背景に負けないよう白地 */
.hero-actions .hero-secondary { background: rgba(255,255,255,.92); }
.hero-actions .hero-secondary:hover { background: var(--brand-strong); }

/* ---------- 終点：YOUR BRAND（伸びていく未来） ---------- */
.brand-node {
  left: 84%; top: 17%;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  transition-delay: 1.45s;
}
/* CONVERSIONの棒グラフも白タイルに載せて浮かせる */
.brand-node svg {
  width: 68px; height: 46px; overflow: visible;
  box-sizing: content-box;
  padding: 11px 13px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(26,31,38,.14);
}
.bn-bar {
  transform-box: fill-box;
  transform-origin: center bottom;
  transform: scaleY(0);
  transition: transform .6s var(--ease-out);
}
.hero-canvas.is-in .b1 { transform: scaleY(1); transition-delay: 1.7s; animation: bn-breathe 5.5s ease-in-out 3s infinite; }
.hero-canvas.is-in .b2 { transform: scaleY(1); transition-delay: 1.9s; animation: bn-breathe 5.5s ease-in-out 3.4s infinite; }
.hero-canvas.is-in .b3 { transform: scaleY(1); transition-delay: 2.1s; animation: bn-breathe 5.5s ease-in-out 3.8s infinite; }
/* コンバージョンのバーがごくゆっくり鼓動し続ける */
@keyframes bn-breathe {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(.93); }
}

/* ---------- ローカルファン（アバター共通） ---------- */
.avatar {
  filter: drop-shadow(0 8px 16px rgba(26,31,38,.18));
}
.avatar svg { display: block; width: 100%; height: 100%; overflow: visible; }

.live-tag {
  position: absolute;
  left: 50%; bottom: -7px;
  transform: translateX(-50%);
  background: #F0284A; color: #fff;
  font: 700 8px/1 var(--font-body);
  letter-spacing: .1em;
  padding: 3px 6px;
  border-radius: 4px;
  border: 1.5px solid #fff;
}

/* ------------------------------------------------------------
   08. Spine — スクロールに合わせて左端に引かれる「1本の線」
   ------------------------------------------------------------ */
.spine {
  display: none;
  position: fixed;
  left: clamp(12px, 1.4vw, 26px);
  top: 0; bottom: 0;
  width: 2px;
  background: rgba(220,228,234,.55);
  z-index: 40;
  pointer-events: none;
}
.spine-fill {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-deep) 100%);
  transform-origin: top;
  transform: scaleY(0);
}
@media (min-width: 1180px) { .spine { display: block; } }

/* ------------------------------------------------------------
   09. 01 One team, one line — 動線アニメーション
   ------------------------------------------------------------ */
.line-intro { margin-bottom: var(--s5); }
.line-intro .lead { margin-top: var(--s3); }

.journey { margin-top: var(--s2); }
.journey svg { display: block; width: 100%; height: auto; }

/* 本線：JSがgetTotalLength()でdasharrayを設定し、is-inで描画 */
.journey-draw {
  transition: stroke-dashoffset 2.2s var(--ease-out) .2s;
}

/* 描画完了後、線上を流れ続けるシグナル */
.journey-flow {
  opacity: 0;
  stroke-dasharray: .1 16;
  transition: opacity .8s var(--ease-out) 2.4s;
}
.journey.is-in .journey-flow {
  opacity: .75;
  animation: jflow 1.1s linear infinite;
}
@keyframes jflow {
  to { stroke-dashoffset: -16.1; }
}

/* ノード：線が届く順にポップイン */
.jn {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  transition: transform .55s cubic-bezier(.34, 1.56, .64, 1);
}
.journey.is-in .jn { transform: scale(1); }
.journey.is-in .jn1 { transition-delay: .25s; }
.journey.is-in .jn2 { transition-delay: .75s; }
.journey.is-in .jn3 { transition-delay: 1.25s; }
.journey.is-in .jn4 { transition-delay: 1.75s; }
.journey.is-in .jn5 { transition-delay: 2.25s; }

.jn-label {
  font: 500 13px var(--font-mono);
  letter-spacing: .15em;
  fill: var(--brand-deep);
  text-anchor: middle;
}
.jn-yen {
  font: 700 22px var(--font-display);
  fill: #fff;
  text-anchor: middle;
}

/* 起点（STRATEGY）と終点（REVENUE）のパルス：ヒーローと同じ鼓動 */
.jn-pulse {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
}
.journey.is-in .jn-pulse {
  animation: jn-pulse 2.4s var(--ease-out) 2.9s infinite;
}
.journey.is-in .jn-pulse1 {
  animation: jn-pulse 2.6s var(--ease-out) 1.1s infinite;
}
@keyframes jn-pulse {
  0%   { transform: scale(1);   opacity: .6; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* スマホ用の縦タイムライン（PCでは非表示） */
.journey-steps { display: none; }

/* ------------------------------------------------------------
   10. 02 How we think — 反・予算消化のポジショニング
   ------------------------------------------------------------ */
.think-intro { margin-bottom: var(--s5); }
.think-intro .lead { margin-top: var(--s3); }
/* 2×2のブロック配置。開いたカードだけが伸びるよう高さは揃えない */
.think-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3);
  align-items: start;
}
/* 4本柱のタイトルは中央寄せで大きく */
.think-kicker {
  font: 700 clamp(22px, 2.2vw, 27px)/1.15 var(--font-display);
  letter-spacing: .04em;
  color: var(--brand);
  margin-bottom: var(--s2);
  text-align: center;
}

/* 「よくある代理店のやり方」を打ち消し線で示し、下に自分たちの答え */
.think-not {
  position: relative;
  font: 500 15px/1.55 var(--font-mono);
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-color: #F0284A;
  text-decoration-thickness: 1.5px;
  margin-bottom: var(--s3);
}

/* 赤線の下の「自分たちの答え」は大きめに */
.think-card h4 { font-size: clamp(21px, 2.1vw, 26px); }

/* ---------- カードはボタン：閉時はタイトル＋ピクトのみ、クリックで本文へ ---------- */
.think-card {
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

/* クリックできることを示す＋マーカー（開くと−に） */
.think-marker {
  position: absolute;
  bottom: 22px; right: 22px;
  width: 16px; height: 16px;
}
.think-marker::before, .think-marker::after {
  content: "";
  position: absolute; inset: 0; margin: auto;
  background: var(--brand-deep);
  transition: transform .3s var(--ease-out);
}
.think-marker::before { width: 16px; height: 2px; }
.think-marker::after  { width: 2px;  height: 16px; }
.think-card.is-open .think-marker::after { transform: scaleY(0); }

/* 本文：閉時は高さ0、開くとふわっと展開 */
.think-body {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(14px);
  transition: max-height .55s var(--ease-out), opacity .4s var(--ease-out), transform .45s var(--ease-out);
}
.think-card.is-open .think-body {
  max-height: 560px;
  opacity: 1;
  transform: none;
  transition-delay: .1s;
}

/* ピクトグラム：開くと上へスッと消えて場所を譲る */
.think-card .picto {
  max-height: 120px;
  transition: opacity .35s var(--ease-out), transform .35s var(--ease-out),
              max-height .45s var(--ease-out), margin-bottom .45s var(--ease-out);
}
.think-card.is-open .picto {
  opacity: 0;
  transform: translateY(-26px);
  max-height: 0;
  margin-bottom: 0;
}

/* ---------- 2行クランプ＋クリック展開（.xp / .clamp / .more-btn） ---------- */
.xp .clamp {
  position: relative;
  overflow: hidden;
  max-height: 3.5em;
  transition: max-height .5s var(--ease-out);
}
/* 続きがある場合のみ、背景色へのフェードで「切れている」ことを示す */
.xp .clamp::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1.9em;
  background: linear-gradient(rgba(255,255,255,0), var(--bg));
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}
.xp.has-more .clamp::after { opacity: 1; }
.xp.is-open .clamp { max-height: 24em; }
.xp.is-open .clamp::after { opacity: 0; }

.more-btn {
  display: none;
  align-items: center; justify-content: center;
  width: 34px; height: 34px;
  margin-top: 6px;
  padding: 0;
  background: transparent;
  color: var(--brand-deep);
  border: 0;
  cursor: pointer;
  transition: color .3s, transform .35s var(--ease-out);
}
.more-btn svg { width: 18px; height: 18px; }
.more-btn:hover { color: var(--brand-strong); }
.xp.has-more .more-btn { display: inline-flex; }
.xp.is-open .more-btn { transform: rotate(180deg); }

/* ---------- 動くピクトグラム（カードのis-inで再生・中央配置） ---------- */
.picto {
  display: block;
  width: min(240px, 100%);
  height: auto;
  margin: 0 auto var(--s3);
}

/* ① 照準（ヒーローのSTRATEGY FIRSTと同じ常時パルス）。
   波紋はSVGの矩形枠（高さ84）で上下が切れないよう、拡大率を
   枠内に収まる1.28倍までに抑えた専用キーフレームを使う */
.picto .pt-pulse {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
}
.think-card .picto { overflow: visible; }
.think-card.is-in .pt-pulse {
  animation: pt-pulse 2.6s var(--ease-out) 1.1s infinite;
}
@keyframes pt-pulse {
  0%   { transform: scale(1);    opacity: .55; }
  100% { transform: scale(1.28); opacity: 0; }
}

/* （旧）成果の棒が伸び、矢印が駆け上がる */
.picto .pb {
  transform-box: fill-box;
  transform-origin: center bottom;
  transform: scaleY(0);
  transition: transform .6s var(--ease-out);
}
.think-card.is-in .pb1 { transform: scaleY(1); transition-delay: .35s; }
.think-card.is-in .pb2 { transform: scaleY(1); transition-delay: .55s; }
.think-card.is-in .pb3 { transform: scaleY(1); transition-delay: .75s; }
.picto .pa-line { transition: stroke-dashoffset .7s var(--ease-out) .95s; }
.picto .pa-tip {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  transition: transform .4s cubic-bezier(.34, 1.56, .64, 1) 1.5s;
}
.think-card.is-in .pa-tip { transform: scale(1); }

/* ② 提案書 → 実行の歯車が回り続ける */
.picto .pd-doc {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  transition: transform .5s cubic-bezier(.34, 1.56, .64, 1) .3s;
}
.think-card.is-in .pd-doc { transform: scale(1); }
.picto .pch { opacity: .15; }
.think-card.is-in .pch1 { animation: chev-march 1.6s infinite .8s; }
.think-card.is-in .pch2 { animation: chev-march 1.6s infinite 1.05s; }
@keyframes chev-march {
  0%, 60%, 100% { opacity: .15; }
  20%, 40%      { opacity: 1; }
}
.pg-gear {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  transition: transform .5s cubic-bezier(.34, 1.56, .64, 1) .7s;
}
.think-card.is-in .pg-gear {
  transform: scale(1);
  animation: gear-spin 9s linear 1.3s infinite;
}
@keyframes gear-spin {
  to { transform: scale(1) rotate(360deg); }
}

/* ④ AIチップ＋スパーク：コストのバーが下がっていく */
.picto .pai-spark {
  opacity: .3;
  transform-box: fill-box;
  transform-origin: center;
}
.think-card.is-in .pai-spark {
  animation: spark-blink 1.8s ease-in-out .9s infinite;
}

/* ③ 人と人が線でつながり、チェックが灯る */
.picto .pl-p {
  transition: transform .8s var(--ease-out) .3s;
}
.picto .pl-p1 { transform: translateX(-26px); }
.picto .pl-p2 { transform: translateX(26px); }
.think-card.is-in .pl-p1,
.think-card.is-in .pl-p2 { transform: none; }
.picto .pl-link {
  transform-box: fill-box;
  transform-origin: center;
  transform: scaleX(0);
  transition: transform .45s var(--ease-out) 1.05s;
}
.think-card.is-in .pl-link { transform: scaleX(1); }
.picto .pl-badge {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
  transition: transform .45s cubic-bezier(.34, 1.56, .64, 1) 1.4s;
}
.think-card.is-in .pl-badge { transform: scale(1); }

/* ------------------------------------------------------------
   11. 03 What we run — 動線の4ステップ
   ------------------------------------------------------------ */
.run-intro { margin-bottom: var(--s5); }
.run-intro .lead { margin-top: var(--s3); }
.run-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s4);
}
.run-step {
  position: relative;
  padding-top: var(--s3);
  border-top: 2px solid var(--line);
}
.run-step::before {
  content: "";
  position: absolute; top: -6px; left: 0;
  width: 10px; height: 10px;
  background: var(--brand);
  border-radius: 50%;
}
/* ステップ見出し：アイコン＋大きな番号（背景タイルなしのフラット表示） */
.run-head {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: none;
  padding: 0;
  color: var(--brand-deep);
  margin-bottom: var(--s3);
}
.run-ico { display: block; }
.run-ico svg {
  display: block;
  width: 38px; height: 38px;
  transform: scale(0);
  transition: transform .5s cubic-bezier(.34, 1.56, .64, 1) .35s;
}
.run-step.is-in .run-ico svg { transform: scale(1); }
.run-num {
  font: 700 clamp(26px, 2.6vw, 32px)/1 var(--font-display);
  color: var(--brand);
  font-variant-numeric: tabular-nums;
  transition: color .3s;
}
.run-step:hover .run-num { color: var(--brand-deep); }

/* 04はタイトルが2行になり段差が出るため、本文を1行目からフェードさせて底を揃える */
@media (min-width: 721px) {
  .run-steps .run-step:nth-child(4) .xp:not(.is-open) .clamp { max-height: 1.8em; }
}

/* AI効率経営の帯：4ステップの裏側はAIで最小コスト */
.ai-strip {
  margin-top: var(--s5);
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
  background: var(--brand-tint);
  border-left: 3px solid var(--brand);
  border-radius: 14px;
  padding: var(--s4);
}
.ai-strip-ico {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 84px; height: 84px;
  border-radius: 50%;
  background: var(--brand-strong);
  color: #fff;
}
.ai-strip-ico svg { width: 42px; height: 42px; }
.ai-strip.is-in .ai-strip-ico svg { animation: spark-blink 2.4s ease-in-out 1s infinite; }
.ai-strip-kicker {
  font: 500 12px/1 var(--font-mono);
  letter-spacing: .16em;
  color: var(--brand-deep);
  margin-bottom: 8px;
}
.ai-strip h4 {
  font: 600 clamp(20px, 2vw, 24px)/1.3 var(--font-body);
  letter-spacing: -0.01em;
  margin-bottom: var(--s1);
}
.ai-strip p { color: var(--muted); }
.run-step h4 {
  font: 600 clamp(19px, 2vw, 23px)/1.35 var(--font-body);
  letter-spacing: -0.01em;
  margin-bottom: var(--s2);
}
.run-step p { color: var(--muted); font-size: 16px; }

/* ------------------------------------------------------------
   10. 03 Case study（濃青の見せ場セクション）
   ------------------------------------------------------------ */
.case { background: var(--deep-bg); }
.case .section-label { border-bottom-color: #7FB0D3; }
.case .section-label .num { color: #A8CCE4; }
.case .section-label .label-title { color: #fff; }

.case-grid {
  display: grid;
  grid-template-columns: 6fr 5fr;
  gap: var(--s5);
  align-items: center;
}
.case-big {
  display: flex; align-items: flex-end; gap: 14px;
  margin-bottom: var(--s3);
}
.case-big .stat-number { color: #fff; font-size: clamp(52px, 6vw, 84px); }
.case-big-label {
  font: 500 13px/1.45 var(--font-mono);
  color: #D8E8F5;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding-bottom: 8px;  /* 数字のベースラインと光学的に揃える */
}
/* Instagramの実績だと一目でわかるアイコン */
.case-ig {
  display: block;
  width: 24px; height: 24px;
  margin-bottom: 6px;
}
.case-title {
  font: 600 clamp(24px, 2.8vw, 36px)/1.25 var(--font-display);
  letter-spacing: -0.015em;
  color: #fff;
  margin-bottom: var(--s3);
}
.case-text { color: #EAF3FA; max-width: 34em; margin-bottom: var(--s4); }
.case-actions {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s2) var(--s3);
}
.case .link-arrow { color: #D8E8F5; }
.case .link-arrow:hover { color: #fff; }
.case .btn-primary:hover { background: #14202B; }

.case-visual {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(10,25,40,.4);
}
.case-visual img {
  width: 100%; height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .6s var(--ease-out);
}
.case-visual:hover img { transform: scale(1.04); }

/* ------------------------------------------------------------
   11. 04 Insights
   ------------------------------------------------------------ */
.insights-intro { margin-bottom: var(--s5); }
.insights-intro .lead { margin-top: var(--s3); }
.insights-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3);
}
.post-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.post-link { display: flex; flex-direction: column; flex: 1; padding-bottom: var(--s4); }
.post-thumb {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg-alt);
  margin-bottom: var(--s3);
}
.post-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease-out);
}
.post-card:hover .post-thumb img { transform: scale(1.05); }
/* テーマタグ：サムネイル下、日付の上に置く小さなピル */
.post-tag {
  display: inline-block;
  align-self: flex-start;
  margin: 0 var(--s4) 10px;
  background: var(--brand-tint);
  border-radius: 999px;
  padding: 5px 12px;
  font: 600 10px/1 var(--font-mono);
  letter-spacing: .1em;
  color: var(--brand-deep);
}
.post-meta {
  font: 500 12px/1 var(--font-mono);
  letter-spacing: .12em;
  color: var(--brand-deep);
  margin: 0 var(--s4) var(--s2);
}
.post-card h4 { margin: 0 var(--s4) var(--s2); }
.post-text {
  color: var(--muted);
  font-size: 15px;
  margin: 0 var(--s4) var(--s3);
}
.post-link .link-arrow { margin-inline: var(--s4); margin-top: auto; align-self: flex-end; }
.insights-more { margin-top: var(--s4); }

/* ------------------------------------------------------------
   12. 05 Client reviews
   ------------------------------------------------------------ */
.reviews-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--s5);
  align-items: center;
}
.reviews-logos {
  display: grid;
  gap: var(--s3);
  justify-items: start;
}
.reviews-logos img {
  height: 52px; width: auto; max-width: 200px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .7;
  transition: filter .4s, opacity .4s;
}
.reviews-logos img:hover { filter: none; opacity: 1; }

.review-quote {
  position: relative;
  border-left: 3px solid var(--brand);
  background: var(--bg-alt);
  border-radius: 0 12px 12px 0;
  padding: var(--s4) var(--s4) var(--s4) calc(var(--s4) + 12px);
}
.review-quote::before {
  content: "\201C";
  position: absolute;
  top: 2px; left: 18px;
  font: 700 64px/1 var(--font-display);
  color: var(--brand);
  opacity: .35;
}
.review-quote p {
  font-size: clamp(17px, 1.7vw, 20px);
  line-height: 1.75;
  color: var(--ink);
}

/* ------------------------------------------------------------
   13. 06 Partner's voices
   ------------------------------------------------------------ */
.partners-deep { background: var(--bg-alt); }
.partners-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3);
  align-items: start;
}
.partner-card {
  border: 1px solid var(--line);
  border-top: 3px solid transparent;
  border-radius: 10px;
  background: var(--bg);
  padding: var(--s4);
  transition: border-color .3s, transform .3s var(--ease-out), box-shadow .3s;
}
.partner-card:hover {
  border-top-color: var(--brand);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(26,31,38,.08);
}
.partner-head {
  display: flex; align-items: center; gap: var(--s2);
  margin-bottom: var(--s3);
}
.partner-portrait {
  width: 64px; height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--brand-tint);
}
.partner-name { font-size: clamp(18px, 1.8vw, 21px); }
.partner-title {
  font: 500 12px/1.5 var(--font-mono);
  letter-spacing: .04em;
  color: var(--brand-deep);
}
.partner-text { color: var(--muted); font-size: 16px; }

/* ------------------------------------------------------------
   14. 07 Final CTA
   ------------------------------------------------------------ */
/* 締めのCTAは濃紺→ブルーの濃いグラデーションで一番の見せ場に */
.cta {
  background:
    radial-gradient(900px 520px at 88% 8%, rgba(127,176,211,.4) 0%, rgba(127,176,211,0) 58%),
    radial-gradient(700px 420px at 8% 100%, rgba(72,131,174,.5) 0%, rgba(72,131,174,0) 55%),
    linear-gradient(135deg, #14202B 0%, #1E4568 52%, #2E6084 100%);
}
.cta-inner {
  max-width: 46rem;
}
.cta-inner .eyebrow { margin-bottom: var(--s3); color: #A8CCE4; }
.cta-inner .display-heading { color: #fff; }
.cta-inner .lead { margin-block: var(--s3) var(--s4); color: #C9DCEB; }

/* PCでは見出しを必ず1行に収める（スマホは従来どおり自然に折り返す） */
@media (min-width: 721px) {
  .cta-inner { max-width: 58rem; }
  .cta-inner .display-heading {
    white-space: nowrap;
    font-size: clamp(22px, 2.3vw, 34px);
  }
}
/* 濃い背景の上では白ボタンでコントラストを最大に */
.cta .btn-primary { background: #fff; color: #14202B; }
.cta .btn-primary:hover { background: var(--brand); color: #fff; }
.cta-note {
  margin-top: var(--s3);
  font: 400 12px/1.6 var(--font-mono);
  letter-spacing: .04em;
  color: rgba(255,255,255,.85);
}

/* ------------------------------------------------------------
   15. Footer
   ------------------------------------------------------------ */
.site-footer {
  background: var(--footer-bg);
  color: #fff;
  padding-block: var(--s6) var(--s4);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: var(--s5);
  align-items: start;
}
/* 会社ロゴ画像（元は濃色ロゴのため、濃紺のフッター上では白反転して見せる）
   画像自体の上下に大きな余白があるため、上マージンをマイナスにして
   見えているロゴの上端をRESOURCES/COMPANY見出しの上端に揃える */
.footer-logo {
  display: block;
  height: 60px;
  width: auto;
  margin-top: -16px;
  margin-bottom: var(--s2);
  filter: brightness(0) invert(1);
}
/* 画像読み込み失敗時のフォールバック文字表記 */
.footer-logo-fallback {
  font: 700 24px var(--font-display);
  letter-spacing: .06em;
  margin-bottom: var(--s2);
  filter: none;
}
.footer-brand p { color: rgba(255,255,255,.75); max-width: 26em; }
.footer-brand p + p { margin-top: var(--s2); }
.footer-head {
  font: 500 12px/1 var(--font-mono);
  letter-spacing: .16em;
  color: rgba(255,255,255,.5);
  margin-bottom: var(--s2);
}
.footer-nav { display: grid; gap: var(--s1); justify-items: start; }
.footer-nav a {
  padding: 6px 0;
  color: rgba(255,255,255,.75);
  border-bottom: 1px solid transparent;
  transition: color .3s, border-color .3s;
}
.footer-nav a:hover { color: #fff; border-bottom-color: var(--brand); }
.footer-bottom {
  margin-top: var(--s5);
  padding-top: var(--s3);
  border-top: 1px solid rgba(255,255,255,.14);
}
.footer-bottom p {
  font: 400 11px/1.6 var(--font-mono);
  letter-spacing: .04em;
  color: rgba(255,255,255,.6);
}
.site-footer :focus-visible { outline-color: #fff; }

/* ------------------------------------------------------------
   16. Scroll reveal (JS adds .is-in; delays set inline by JS)
   ------------------------------------------------------------ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.reveal.is-in { opacity: 1; transform: translateY(0); }

/* ------------------------------------------------------------
   17. Responsive — 720px / 1024px のみ
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
  /* キャンバスは全面重ねをやめ、テキスト下の独立ブロックに */
  .hero { display: flex; flex-direction: column; align-items: stretch; min-height: 0; }
  .hero-canvas {
    position: relative;
    inset: auto;
    height: 380px;
    margin-top: var(--s4);
    order: 2;   /* テキスト（.container）の後ろへ */
  }

  .think-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .run-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-grid { grid-template-columns: 1fr; gap: var(--s4); }
  .case-visual { order: -1; }
  .insights-grid { grid-template-columns: 1fr; }
  .reviews-grid { grid-template-columns: 1fr; gap: var(--s4); }
  .reviews-logos { grid-auto-flow: column; align-items: center; gap: var(--s4); }
  .partners-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  /* ヘッダーはロゴ＋言語切替＋CTAのみ */
  .header-nav { display: none; }
  .lang-switch { margin-left: auto; }
  .header-cta { padding: 12px 20px; font-size: 14px; }
  .header-inner { min-height: 72px; gap: var(--s2); }
  .logo img { height: 44px; }
  .footer-logo { height: 44px; margin-top: -12px; }

  /* スマホは アイブロウ → H1 → ビジュアル → サブ文 → AI行 → ボタン の順。
     コンテナをdisplay:contentsで解体し、.heroのflexで並べ替える */
  /* 上余白はAboutなど下層ページの.page-heroと完全に同じ式にして、
     アイブロウ（ONE TEAM, ONE LINE.）が全ページで同じ高さから始まるようにする。
     左下の青グラデーションは白フェードで打ち消さず、.line.section側の
     完全な鏡写しグラデーション（下の基本ルール）に連続させて、
     境界に筋を出さずに01セクションまで自然に波及させる */
  .hero { padding-block: clamp(56px, 8vw, 104px) 56px; padding-inline: var(--gutter); }

  /* ヒーローの下端は端数ピクセル（例: y=1048.5）で終わるため、高DPIの
     スマホでは2つの背景レイヤーの丸め・アンチエイリアスの差から
     白いヘアラインが出ることがある。境界をまたぐ帯を「1枚」だけ重ねて
     物理的に縫い合わせる（帯の中身は境界行のグラデーションと同じ色分布） */
  .line.section { position: relative; }
  .line.section::before {
    content: "";
    position: absolute;
    top: -3px; left: 0; right: 0;
    height: 6px;
    /* radial(900px 520px at 4% …)の境界行（dy=0）と同じ色分布を
       「白と合成済みの不透明色」で描く（半透明だと下の同色と二重に
       重なって濃い帯になるため、置き換えとして上書きする） */
    background: linear-gradient(to right,
      #C9DEED 0,
      #C9DEED 15px,
      #FFFFFF 510px);
    pointer-events: none;
  }
  .hero-grid, .hero-main { display: contents; }
  .hero-main > .eyebrow { order: 1; }
  /* eyebrow側のmargin-bottomと二重にならないようtitleのmargin-topは付けない
     （flexでは相殺されず48pxになり、Aboutの24pxと揃わなくなるため） */
  .hero-title  { order: 2; }
  .hero-sub    { order: 3; margin-top: var(--s3); }
  .hero-canvas { order: 4; }
  .hero-actions { order: 5; margin-top: var(--s3); }
  .hero-ai     { order: 6; }

  /* ボタンは全幅より少し控えめに（両サイド約0.5cmずつ） */
  .hero-actions .btn-primary,
  .hero-actions .btn-secondary {
    width: calc(100% - 40px);
    margin-inline: auto;
    text-align: center;
  }

  /* ビジュアルはタイトル直下・左右いっぱいのブロック */
  .hero-canvas {
    height: 360px;
    margin: var(--s3) calc(-1 * var(--gutter)) 0;
  }
  /* スマホはキャンバスが独立ブロックになるため、面グラフの塗りが
     上下端で直線的に切れて「薄い白い線」に見える。端をフェードさせて
     背景に溶け込ませる */
  .growth-svg {
    /* 波頭と飛沫がキャンバス上部に来たため上端のフェードは行わない
       （塗りの上端はもう天面に触れないので不要）。下端のみフェード */
    -webkit-mask-image: linear-gradient(to bottom, #000 84%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 84%, transparent 100%);
  }

  /* スマホでは浮遊アニメーションを止めて落ち着かせる */
  .hero-canvas.is-in .cl,
  .hero-canvas.is-in .solo,
  .hero-canvas.is-in .brand-node,
  .hero-canvas.is-in .strategy-node { animation: none; }

  .cl { gap: 6px; }
  .cl-chips { gap: 7px; }
  .cl::before { inset: -14px -18px; }
  .cl-chip.lg { width: 50px; height: 50px; border-radius: 13px; }
  .cl-chip.md { width: 38px; height: 38px; border-radius: 10px; }
  .cl-chip.lg svg { width: 32px; height: 32px; }
  .cl-chip.lg .chip-img { width: 30px; height: 30px; }
  .cl-chip.md svg { width: 24px; height: 24px; }
  .cl-chip.md .chip-img { width: 24px; height: 24px; }
  .cl-chip.wide { padding: 6px 9px; }
  .cl-chip.wide img { height: 13px; }
  .cl-ad.sm { padding: 4px 8px; font-size: 9px; }
  .cl-ad.sm svg { width: 12px; height: 12px; }
  .cl .avatar { width: 24px; height: 24px; }
  .cl .ca-a { top: -16px; right: -16px; }
  .cl .ca-b { bottom: -10px; left: -16px; }
  .cl .ca-c { top: -14px; left: -18px; }
  .pr-badge { padding: 7px 11px; }
  .pr-badge img { height: 12px; }
  .sn-icon { width: 44px; height: 44px; }
  .sn-icon svg { width: 24px; height: 24px; }
  .hv-label { font-size: 9px; padding: 4px 8px; }
  .brand-node svg { width: 52px; height: 36px; }
  .live-tag { font-size: 7px; padding: 2px 5px; bottom: -6px; }

  /* スマホ配置：戦略（左下）とCONVERSION（右上）は必ず画面内・
     プラットフォームと非干渉。Meta/Google群が画面中央のメイン、
     PR TIMESとTikTokは右下、Yahoo!群は中央下段 */
  .strategy-node { left: 3%;  bottom: 2%; }
  .brand-node    { left: 70%; top: 2%; }
  .cl-meta       { left: 36%; top: 16%; }
  .cl-google     { left: 44%; top: calc(44% + 38px); }
  .cl-ly         { left: 8%;  top: 42%; }
  .cl-x          { left: 76%; top: 44%; }
  .cl-tiktok     { left: 78%; top: 78%; }
  .solo-prtimes  { left: 40%; top: 88%; }

  /* サブ文の補足節はモバイルでは非表示（短縮版コピー） */
  .mob-hide { display: none; }

  .section { padding-block: 56px; }
  .section-label { margin-bottom: var(--s4); }

  /* ヒーロー下端のSTRATEGY FIRSTと01ラベルが近すぎないよう余白を足す */
  .line.section { padding-top: 80px; }

  .think-grid { grid-template-columns: 1fr; }

  /* 動線：SVGを隠し、縦タイムラインに切り替え */
  .journey { display: none; }
  .journey-steps {
    display: grid;
    gap: 0;
  }
  .journey-steps li {
    position: relative;
    display: grid;
    grid-template-columns: 40px 1fr;
    grid-template-rows: auto auto;
    column-gap: var(--s2);
    border-left: 2px solid var(--line);
    padding: 0 0 var(--s4) var(--s3);
  }
  .journey-steps li:last-child { padding-bottom: 0; }
  .journey-steps li::before {
    content: "";
    position: absolute; top: 6px; left: -6px;
    width: 10px; height: 10px;
    background: var(--brand);
    border-radius: 50%;
  }
  .js-num {
    grid-row: 1 / span 2;
    font: 700 22px/1.2 var(--font-display);
    color: var(--brand);
    font-variant-numeric: tabular-nums;
  }
  .js-label {
    font: 600 17px/1.3 var(--font-body);
    letter-spacing: -0.01em;
  }
  .js-text { color: var(--muted); font-size: 14px; }

  .run-steps { grid-template-columns: 1fr; gap: 0; }
  .run-step {
    border-top: 0;
    border-left: 2px solid var(--line);
    padding: 0 0 var(--s4) var(--s3);
  }
  .run-step:last-child { padding-bottom: 0; }
  .run-step::before { top: 4px; left: -6px; }

  .card { padding: var(--s3); }
  /* post-cardはサムネイルを全幅で見せたいので、上の.cardパディング復活を打ち消す */
  .post-card { padding: 0; }

  .case-big .stat-number { font-size: 56px; }

  /* サムネイルはカード全幅のまま、文字要素だけ左右を狭める（24px→5px、さらに+0.2cm） */
  .post-tag, .post-meta, .post-card h4, .post-text { margin-inline: calc(5px + 0.2cm); }
  .post-link .link-arrow { margin-inline: calc(5px + 0.2cm); }
  .post-link { padding-bottom: var(--s3); }

  /* スマホ：ロゴは横一列に */
  .reviews-logos {
    grid-auto-flow: column;
    justify-content: start;
    align-items: center;
    gap: var(--s3);
  }
  .reviews-logos img { height: 32px; max-width: 96px; }
  /* 引用符と本文が重ならないよう上に余白を確保 */
  .review-quote { padding: 58px var(--s3) var(--s3) calc(var(--s3) + 12px); }
  .review-quote::before { top: 10px; left: 22px; font-size: 52px; }

  /* スマホ：パートナーの声は横スクロールのカルーセルに。
     縦は絶対にスクロールさせず、一番長いカードの高さをそのまま表示する */
  .partners-grid {
    display: flex;
    align-items: stretch;
    gap: var(--s2);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    padding-bottom: 10px;
  }
  .partner-card {
    flex: 0 0 84%;
    scroll-snap-align: start;
    padding: var(--s3);
  }

  .ai-strip { flex-direction: column; padding: var(--s3); }
  /* スマホではAI帯の丸アイコンが大きすぎるので半分ほどに縮小 */
  .ai-strip-ico { width: 42px; height: 42px; }
  .ai-strip-ico svg { width: 21px; height: 21px; }

  .cta-inner .btn-primary { width: 100%; text-align: center; }

  .footer-grid { grid-template-columns: 1fr; gap: var(--s4); }
}

/* ------------------------------------------------------------
   18. Reduced motion — 全アニメーション無効化（即時表示）
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }
  .reveal, .hero-title .word, .hero-canvas,
  .hero-sub, .hero-actions { opacity: 1; transform: none; }
  .cl, .solo, .strategy-node, .brand-node, .avatar {
    opacity: 1; transform: none; animation: none;
  }
  .growth-draw { stroke-dashoffset: 0 !important; stroke-dasharray: none !important; }
  .growth-flow { animation: none; opacity: 0; }
  .wave-spray { opacity: 1; }
  .growth-tip, .bn-bar { transform: none; }
  .sn-icon::after { animation: none; opacity: 0; }
  .jn { transform: none; }
  .journey-draw { stroke-dashoffset: 0 !important; stroke-dasharray: none !important; }
  .journey-flow, .jn-pulse, .picto .pt-pulse { animation: none; opacity: 0; }
  .spine-fill { transform: none; }
  .picto .pb, .picto .pl-p, .picto .pl-link, .picto .pl-badge { transform: none; opacity: 1; }
  .picto .pa-line { stroke-dashoffset: 0 !important; stroke-dasharray: none !important; }
  .picto .pa-tip, .picto .pd-doc { transform: none; opacity: 1; }
  .pg-gear, .picto .pch { animation: none; opacity: 1; }
  .run-ico svg { transform: none; opacity: 1; }
}

/* ============================================================
   22. Subpages (About / Services / Works / Insights / Contact)
   ホームと同じデザインシステムを下層ページへ展開
   ============================================================ */

/* ---------- ページヒーロー（全下層ページ共通） ---------- */
.page-hero {
  position: relative;
  padding-block: clamp(56px, 8vw, 104px) clamp(40px, 6vw, 72px);
  /* 右上は上端寄りで完結させ、左下は次セクション側の半径と完全一致させて
     境界に切れ目が出ないようにする */
  background:
    radial-gradient(800px 300px at 92% -8%, #B7D2E7 0%, rgba(183,210,231,0) 62%),
    radial-gradient(700px 460px at 2% 100%, #C9DEED 0%, rgba(201,222,237,0) 50%),
    var(--bg);
  overflow: hidden;
}

/* ラベル（小さな青字）だけのミニマル版：コンテンツがすぐ下から始まる */
.page-hero-min { padding-block: clamp(40px, 6vw, 64px) 6px; }
.page-hero-min + .section { padding-top: var(--s4); }
.page-hero .eyebrow { margin-bottom: var(--s3); }
.page-hero h1 {
  font-size: clamp(34px, 4.6vw, 60px);
  line-height: 1.12;
  max-width: 20em;
}
.page-hero .lead { margin-top: var(--s3); max-width: 46em; }

/* ページ内アンカーのピル型サブナビ */
.subnav {
  display: flex; flex-wrap: wrap;
  gap: 10px;
  margin-top: var(--s4);
}
.subnav a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  font: 600 13px/1 var(--font-mono);
  letter-spacing: .08em;
  color: var(--brand-deep);
  transition: background .3s, color .3s, border-color .3s, transform .3s var(--ease-out);
}
.subnav a:hover {
  background: var(--brand-strong);
  border-color: var(--brand-strong);
  color: #fff;
  transform: translateY(-2px);
}
.subnav .num { font-size: 11px; opacity: .7; }

/* ---------- About: 価値観カード ---------- */
.values-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s3);
}

/* ---------- About: Meet Us（クリックで下にプロフィール展開） ---------- */
.founders-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3);
  align-items: start;
}
.founder-card {
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  border: 1px solid var(--line);
  border-top: 3px solid transparent;
  border-radius: 10px;
  background: var(--bg);
  padding: var(--s3);
  transition: border-color .3s, transform .3s var(--ease-out), box-shadow .3s;
}
.founder-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(26,31,38,.08);
}
/* 選択時も水色にせず、下の展開パネルと同じ白のまま繋げる */
.founder-card.is-active { border-top-color: transparent; background: var(--bg); }
.founder-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: var(--s3);
}
.founder-name { font-size: clamp(20px, 2vw, 24px); margin-bottom: 6px; }
.founder-role {
  font: 500 12px/1.6 var(--font-mono);
  letter-spacing: .04em;
  color: var(--brand-deep);
}
.founder-hint {
  margin-top: var(--s2);
  font: 600 13px var(--font-body);
  color: var(--brand-deep);
  display: inline-flex; align-items: center; gap: 6px;
}
.founder-card .think-marker { bottom: 18px; right: 18px; top: auto; }
.founder-card.is-active .think-marker::after { transform: scaleY(0); }

/* プロフィール本文：2枚のカードの下に全幅で1人分だけ展開 */
.founder-profile {
  grid-column: 1 / -1;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(14px);
  transition: max-height .6s var(--ease-out), opacity .4s var(--ease-out), transform .45s var(--ease-out);
}
.founder-profile.is-open {
  max-height: 1400px;
  opacity: 1;
  transform: none;
  transition-delay: .05s;
}
/* 上部は水色で彩らず、カードと同じ白のまま繋げる */
.founder-profile-inner {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  padding: var(--s4);
}
.founder-profile-inner p { color: var(--muted); }
.founder-profile-inner p + p { margin-top: var(--s2); }

/* ---------- About: 会社情報テーブル ---------- */
.company-table { width: 100%; border-collapse: collapse; }
.company-table th {
  width: 230px;
  padding: 20px 24px 20px 0;
  text-align: left;
  vertical-align: top;
  font: 500 12px/1.6 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand-deep);
  border-bottom: 1px solid var(--line);
}
.company-table td {
  padding: 20px 0;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.company-table tr:first-child th,
.company-table tr:first-child td { border-top: 1px solid var(--line); }
.company-table ul { display: grid; gap: 6px; }
.company-table li { position: relative; padding-left: 20px; }
.company-table li::before {
  content: "";
  position: absolute; left: 0; top: .6em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--brand);
}

/* ---------- Services: ピラー ---------- */
.pillar-intro { margin-bottom: var(--s4); }
.pillar-intro .lead { margin-top: var(--s3); }
.pillar-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3);
}
/* About: WHO WE AREの価値観カードは番号とタイトルを横並びに */
#who .pillar-grid .card {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
}
#who .pillar-grid .card-num { margin-bottom: 0; }
#who .pillar-grid .card h4 { margin-bottom: 0; flex: 1 1 auto; }
#who .pillar-grid .card p { flex: 1 0 100%; margin-top: 2px; }

/* 主軸サービス（インフルエンサーマーケティング）は1枚で全幅・青の座布団 */
.card.card-featured {
  grid-column: 1 / -1;
  border-top-color: var(--brand);
  background: var(--brand-tint);
}
.card-featured .card-tag {
  display: inline-block;
  font: 600 11px/1 var(--font-mono);
  letter-spacing: .14em;
  color: #fff;
  background: var(--brand-strong);
  border-radius: 999px;
  padding: 6px 12px;
  margin-bottom: var(--s2);
}

/* 検証ファーストの4ステップ（Strategy & Consulting内） */
.validate-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s4);
  margin-top: var(--s4);
}
.validate-steps li {
  position: relative;
  padding-top: var(--s3);
  border-top: 2px solid var(--line);
}
.validate-steps li::before {
  content: "";
  position: absolute; top: -6px; left: 0;
  width: 10px; height: 10px;
  background: var(--brand);
  border-radius: 50%;
}
.validate-steps .vs-num {
  display: block;
  font: 500 13px var(--font-mono);
  color: var(--brand-deep);
  margin-bottom: var(--s1);
}
.validate-steps h4 {
  font: 600 17px/1.4 var(--font-body);
  margin-bottom: var(--s1);
}
.validate-steps p { color: var(--muted); font-size: 15px; }

/* ---------- Services: 取り扱い媒体 ---------- */
.platform-grid {
  display: flex; flex-wrap: wrap;
  gap: 10px;
  margin-bottom: var(--s5);
}
.platform-btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  font: 600 13px/1 var(--font-body);
  color: var(--ink);
  transition: border-color .3s, transform .3s var(--ease-out), box-shadow .3s;
}
.platform-btn:hover {
  border-color: var(--brand);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(26,31,38,.1);
}
.platform-btn svg, .platform-btn img { width: 20px; height: 20px; display: block; object-fit: contain; }

.platform-list { border-top: 1px solid var(--line); }
.platform-item { border-bottom: 1px solid var(--line); scroll-margin-top: 120px; }
.platform-item summary {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s3) 4px;
  cursor: pointer;
  list-style: none;
  min-height: 44px;
}
.platform-item summary::-webkit-details-marker { display: none; }
.platform-item summary svg, .platform-item summary img { width: 26px; height: 26px; display: block; object-fit: contain; flex: 0 0 auto; }
.platform-item summary h3 { flex: 1; font-size: clamp(17px, 1.6vw, 20px); }
.platform-item .faq-marker { flex: 0 0 auto; }
.platform-item > p {
  padding: 0 4px var(--s3) calc(26px + var(--s2));
  color: var(--muted);
  max-width: 52em;
}
.faq-marker {
  position: relative;
  width: 14px; height: 14px;
}
.faq-marker::before, .faq-marker::after {
  content: "";
  position: absolute; inset: 0; margin: auto;
  background: var(--ink);
  transition: transform .3s var(--ease-out), background .3s;
}
.faq-marker::before { width: 14px; height: 2px; }
.faq-marker::after  { width: 2px;  height: 14px; }
.platform-item[open] .faq-marker::after { transform: scaleY(0); }

/* ---------- Works: ロック付き実績カード ---------- */
.locked-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s3);
  align-items: start;
}
.locked-card { position: relative; }
.lock-badge {
  position: absolute;
  top: var(--s3); right: var(--s3);
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--brand-strong);
  color: #fff;
}
.lock-badge svg { width: 18px; height: 18px; }
.locked-card .work-tag {
  font: 500 12px/1.5 var(--font-mono);
  letter-spacing: .12em;
  color: var(--brand-deep);
  margin-bottom: var(--s3);
  padding-right: 48px;
}
.locked-big {
  display: flex; align-items: flex-end; gap: 12px;
  margin-bottom: var(--s3);
}
.locked-big .stat-number { font-size: clamp(40px, 3.6vw, 54px); }
.locked-big-label {
  font: 500 12px/1.4 var(--font-mono);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  padding-bottom: 6px;
}
/* クライアント名は伏せ字バーで「会えば見せます」を演出 */
.redact {
  display: inline-block;
  height: .95em;
  vertical-align: -0.12em;
  border-radius: 4px;
  background: linear-gradient(90deg, #C7D6E2, #DCE6EE 60%, #C7D6E2);
  filter: blur(1.5px);
}
.locked-client {
  font: 500 13px/1.7 var(--font-mono);
  color: var(--muted);
  margin-bottom: var(--s2);
}
/* 進行中案件の表示 */
.locked-live {
  font: 600 13px/1 var(--font-mono);
  letter-spacing: .12em;
  color: #F0284A;
  margin-bottom: var(--s3);
}
.locked-note {
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 1px dashed var(--line);
  display: flex; align-items: center; gap: 8px;
  font: 500 11px/1.5 var(--font-mono);
  letter-spacing: .08em;
  color: var(--brand-deep);
}
.locked-note svg { width: 14px; height: 14px; flex: 0 0 auto; }
.works-cta {
  margin-top: var(--s5);
  text-align: center;
}
.works-cta .lead { margin-bottom: var(--s4); }

/* ---------- Contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: var(--s5);
  align-items: start;
}
.contact-points { display: grid; gap: var(--s3); margin-top: var(--s4); }
.contact-points li {
  position: relative;
  padding-left: 34px;
  color: var(--muted);
}
.contact-points li::before {
  content: "";
  position: absolute; left: 0; top: 2px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--brand-tint);
}
.contact-points li::after {
  content: "";
  position: absolute; left: 6px; top: 8px;
  width: 9px; height: 6px;
  border-left: 2px solid var(--brand-deep);
  border-bottom: 2px solid var(--brand-deep);
  transform: rotate(-45deg);
}
.contact-direct {
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
  font: 500 13px/2 var(--font-mono);
  color: var(--muted);
}
.contact-direct a { color: var(--brand-deep); }
.contact-direct a:hover { text-decoration: underline; }

.contact-form {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  box-shadow: 0 12px 40px rgba(26,31,38,.06);
  padding: var(--s4);
  display: grid;
  gap: var(--s3);
}
.form-field { display: grid; gap: 6px; }
.form-field label {
  font: 500 12px/1 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
/* 必須項目マーク：ラベル右上に赤いアスタリスク */
.required-mark {
  color: #F0284A;
  margin-left: 4px;
  font-size: 1.1em;
  vertical-align: top;
  position: relative;
  top: -2px;
}
.form-field input,
.form-field select,
.form-field textarea {
  font: 400 16px/1.5 var(--font-body);
  color: var(--ink);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  min-height: 44px;
  transition: border-color .3s, background .3s;
}
.form-field textarea { resize: vertical; min-height: 120px; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--brand);
  background: var(--bg);
}
.contact-form .btn-primary { justify-self: start; }
.hp-field {
  position: absolute; left: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}

/* ---------- Subpages: レスポンシブ ---------- */
@media (max-width: 1024px) {
  .values-grid { grid-template-columns: 1fr; }
  .locked-grid { grid-template-columns: 1fr; }
  .validate-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-grid { grid-template-columns: 1fr; gap: var(--s4); }
}
@media (max-width: 720px) {
  .founders-grid { gap: var(--s2); }
  .founder-card { padding: var(--s2); }
  .founder-name { font-size: 17px; }
  .founder-role { font-size: 10px; }
  .founder-card .think-marker { bottom: 12px; right: 12px; top: auto; }
  .founder-profile-inner { padding: var(--s3); }

  .company-table th { display: block; width: auto; padding: 16px 0 2px; border-bottom: 0; }
  .company-table td { display: block; padding: 0 0 16px; }
  .company-table tr:first-child td { border-top: 0; }

  .pillar-grid { grid-template-columns: 1fr; }
  .validate-steps { grid-template-columns: 1fr; gap: 0; }
  .validate-steps li {
    border-top: 0;
    border-left: 2px solid var(--line);
    padding: 0 0 var(--s3) var(--s3);
    /* スマホでは番号とタイトルを横並びに（本文は次の行で全幅） */
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
  }
  .validate-steps .vs-num { margin-bottom: 0; }
  .validate-steps h4 { margin-bottom: 0; }
  .validate-steps p { flex: 1 0 100%; margin-top: 2px; }
  .validate-steps li:last-child { padding-bottom: 0; }
  .validate-steps li::before { top: 4px; left: -6px; }

  .platform-item > p { padding-left: 4px; }
  .contact-form { padding: var(--s3); }
  .contact-form .btn-primary { justify-self: stretch; text-align: center; }
}

/* ============================================================
   23. ホーム改修（2周目）: レビュー切替 / 右寄せリンク /
       AIファウンデーション / スマホ限定クランプ ほか
   ============================================================ */

/* 一覧リンクはセクション右下へ */
.section-more {
  margin-top: var(--s4);
  text-align: right;
}

/* ---------- Client Reviews: ロゴクリックでコメント切替 ---------- */
.review-logo {
  display: block;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.review-logo img {
  height: 52px; width: auto; max-width: 200px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .55;
  transition: filter .35s, opacity .35s, transform .3s var(--ease-out);
}
.review-logo:hover img { opacity: .85; transform: translateY(-2px); }
.review-logo.is-active img { filter: none; opacity: 1; }

.review-quotes { position: relative; }
.review-quote { display: none; }
.review-quote.is-active {
  display: block;
  animation: rq-fade .45s var(--ease-out);
}
@keyframes rq-fade {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.review-quote cite {
  display: block;
  margin-top: var(--s2);
  font: 500 11px/1 var(--font-mono);
  letter-spacing: .16em;
  font-style: normal;
  color: var(--brand-deep);
}

/* ---------- AI-Powered Operations = 全プロセスの土台 ----------
   帯の水色を上のステップへグラデーションで波及させ、
   01〜04すべてがこの土台の上に立っていることを視覚化する */
.ai-foundation {
  background:
    linear-gradient(0deg, #D8E7F2 0%, #DFEBF4 22%, rgba(223,235,244,.5) 42%, rgba(223,235,244,0) 68%),
    var(--bg);
}
/* 帯自体は背景を持たず、セクションのグラデーションに溶け込ませて一体化。
   基礎線（ブランド色）は底辺のみ */
.ai-strip {
  background: transparent;
  border-radius: 0;
  border-left: 0;
  border-bottom: 3px solid var(--brand);
  padding-inline: 0;
}
@media (max-width: 720px) {
  /* スマホは右側の枠線を01まで引き上げ、底辺とつなげてL字で
     「01〜04＋AI帯が1つのグループ」であることを示す。
     右側の線は上に行くほど薄くなるグラデーションに（下は底辺と合流して濃く見える） */
  .ai-foundation .pillar-intro,
  .ai-foundation .run-steps,
  .ai-foundation .pillar-grid {
    position: relative;
    padding-right: var(--s3);
  }
  .ai-foundation .pillar-intro::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 1.5px;
    background: linear-gradient(to bottom, transparent 0%, rgba(72, 131, 174, .1) 100%);
  }
  .ai-foundation .run-steps::after,
  .ai-foundation .pillar-grid::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 1.5px;
    background: linear-gradient(to bottom, rgba(72, 131, 174, .1) 0%, var(--brand) 100%);
  }
  .ai-foundation .ai-strip {
    margin-top: 0;
    padding-top: var(--s4);
    border-right: 1.5px solid var(--brand);
    border-bottom-width: 1.5px;
    padding-right: var(--s3);
  }
}

/* ---------- スマホのみ2行クランプ（.xp-sp）。PCは全文 ---------- */
.xp-sp .clamp { max-height: none; }
.xp-sp .clamp::after { opacity: 0; }
@media (max-width: 720px) {
  .xp-sp .clamp { max-height: 3.5em; }
  .xp-sp.is-open .clamp { max-height: 24em; }
  .xp-sp.has-more .clamp::after { opacity: 1; }
  .xp-sp.has-more:is(.is-open) .clamp::after { opacity: 0; }

  /* スマホでは展開の下矢印を左ではなく右に配置（右端からは1cmほど内側に） */
  .xp { display: flex; flex-direction: column; align-items: flex-end; }
  .xp .clamp { align-self: stretch; width: 100%; }
  .xp .more-btn { margin-right: 38px; }
}
/* 薄グレー背景のセクションではフェードも背景色に合わせる */
.section-alt .xp .clamp::after {
  background: linear-gradient(rgba(244,247,249,0), var(--bg-alt));
}
/* AIファウンデーション内でも、帯（.ai-strip）はセクション最下部の
   ほぼ単色水色エリアに位置するため、そこだけ水色フェードに合わせる。 */
.ai-foundation .ai-strip .clamp::after {
  background: linear-gradient(rgba(216,231,242,0), #D8E7F2);
}
/* run-steps（03の01〜04）：フェードは色を上に重ねる方式をやめ、
   文字自体をマスクで透明に溶かす。背景がどんなグラデーションでも
   「色の板」が見えず、完全に自然に馴染む */
#business .run-steps .clamp::after { display: none; }
#business .run-steps .xp.has-more:not(.is-open) .clamp {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 1.9em), rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 1.9em), rgba(0,0,0,0) 100%);
}

@media (max-width: 720px) {
  /* Case Study: 1,500+ をアイコン＋ラベルの縦中央に揃える */
  .case-big { align-items: center; }
  .case-big-label { padding-bottom: 0; }

  /* Partner's Voices: 左端をセクションラベル(07)に揃える。
     2枚目のカードが右に少し顔を出す */
  .partners-grid {
    margin-inline: 0;
    padding-inline: 0;
  }
  .partner-card { flex: 0 0 80%; }
}

/* ============================================================
   24. ナビドロップダウン / ピラーナビ / 媒体パネル / 各ページ調整
   ============================================================ */

/* ---------- ヘッダー: Servicesドロップダウン ---------- */
.nav-drop { position: relative; }
.nav-drop-toggle {
  display: inline-flex; align-items: center; gap: 5px;
  font: 500 15px var(--font-body);
  color: var(--muted);
  padding: 12px 4px;
  border-bottom: 2px solid transparent;
  transition: color .3s, border-color .3s;
  cursor: pointer;
}
.nav-drop-toggle svg { width: 14px; height: 14px; transition: transform .3s var(--ease-out); }
.nav-drop-toggle:hover,
.nav-drop-toggle[aria-current="page"] { color: var(--ink); border-bottom-color: var(--brand); }
.nav-drop.is-open .nav-drop-toggle svg,
.nav-drop:hover .nav-drop-toggle svg { transform: rotate(180deg); }

.nav-drop-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 280px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(26,31,38,.14);
  padding: 10px;
  display: grid;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s var(--ease-out), transform .25s var(--ease-out), visibility .25s;
  z-index: 60;
}
.nav-drop.is-open .nav-drop-panel,
.nav-drop:hover .nav-drop-panel {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav-drop-panel a {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px;
  border-radius: 8px;
  font: 600 14px var(--font-body);
  color: var(--ink);
  /* .header-nav a の border-bottom（タブ下線用）がこの入れ子リンクにも
     効いてしまうので明示的に打ち消す：ホバーは背景色のみで示す */
  border-bottom: 0;
  transition: background .25s, color .25s;
}
.nav-drop-panel a:hover { background: var(--brand-tint); color: var(--brand-deep); }
.nav-drop-panel .num { font: 500 11px var(--font-mono); color: var(--brand); }
.nav-drop-panel .drop-sub {
  border-top: 1px solid var(--line);
  border-radius: 0 0 8px 8px;
  margin-top: 4px;
  padding-top: 12px;
  font: 500 12px var(--font-mono);
  letter-spacing: .1em;
  color: var(--brand-deep);
}
/* drop-subが連続する場合、区切り線は最初の1本だけ */
.nav-drop-panel .drop-sub + .drop-sub { border-top: 0; margin-top: 0; padding-top: 11px; }

/* ---------- Services: 3本柱の大型ナビ ---------- */
.subnav-pillars { gap: var(--s2); }
.subnav-pillars a {
  flex: 1 1 0;
  min-width: 200px;
  align-items: center;
  gap: 14px;
  padding: 20px 24px;
  border-radius: 14px;
  font: 600 16px/1.3 var(--font-body);
  letter-spacing: 0;
  color: var(--ink);
  text-transform: none;
}
.subnav-pillars a .num {
  font: 700 clamp(24px, 2.4vw, 30px)/1 var(--font-display);
  color: var(--brand);
  opacity: 1;
}
.subnav-pillars a:hover .num { color: #fff; }

/* 01〜03を繋ぐ矢印：3つのボタンが1本の線であることを示す */
.pillar-arrow {
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  color: var(--brand);
}
.pillar-arrow svg { width: 100%; height: 16px; display: block; }

/* PCでは強制的に1行に収める見出し・リード共通ユーティリティ */
@media (min-width: 721px) {
  .nowrap-lead { white-space: nowrap; max-width: none; }
}

/* ---------- Services: 媒体ロゴボタン（文字なし）＋切替パネル ---------- */
.platform-grid { gap: 12px; margin-bottom: var(--s4); }
.platform-btn {
  display: grid; place-items: center;
  width: 62px; height: 62px;
  padding: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  transition: border-color .3s, transform .3s var(--ease-out), box-shadow .3s;
}
.platform-btn svg, .platform-btn img { width: 28px; height: 28px; display: block; object-fit: contain; }
.platform-btn:hover {
  border-color: var(--brand);
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(26,31,38,.12);
}
.platform-btn.is-active {
  border: 2px solid var(--brand);
  box-shadow: 0 10px 24px rgba(26,31,38,.12);
}

.platform-panel { display: none; }
.platform-panel.is-active {
  display: block;
  animation: rq-fade .4s var(--ease-out);
  border-top: 2px solid var(--brand);
  padding-top: var(--s3);
  max-width: 52em;
}
.platform-panel h3 { margin-bottom: var(--s1); }
.platform-panel p { color: var(--muted); }

/* Platformsセクション全体を中央に寄せる（見出し・ロゴ列・説明パネル、
   他セクションは左詰めのリストのままでよいが、ここはショーケースなので中央揃え） */
.platforms-intro { text-align: center; max-width: 640px; margin-inline: auto; }
.platforms-intro .lead { margin-left: auto; margin-right: auto; }
/* PCでは2文とも1行に収める（見づらいため折り返さない） */
@media (min-width: 721px) {
  .platforms-intro { max-width: none; }
  .platforms-intro .display-heading,
  .platforms-intro .lead { white-space: nowrap; }
}
/* 780px上限が原因で12個のロゴが2段に折り返していたため撤廃。
   center寄せは残しつつ、コンテナ全幅を使って1行に収める（PC） */
#platforms .platform-grid { justify-content: center; }
@media (min-width: 1025px) {
  #platforms .platform-grid { flex-wrap: nowrap; }
}
#platforms .platform-panels { max-width: 52em; margin-inline: auto; text-align: left; }

/* ---------- Works: 期間表記 ---------- */
.locked-meta {
  margin-top: var(--s2);
  font: 500 11px/1.5 var(--font-mono);
  letter-spacing: .08em;
  color: var(--muted);
}

/* ---------- Insights: 3列グリッド ---------- */
.insights-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.insights-grid.cols-3 .post-card h4 { font-size: clamp(16px, 1.5vw, 19px); }

/* ---------- Contact: 中央1カラム ---------- */
.contact-single { max-width: 720px; margin-inline: auto; }
.form-field select { width: 100%; min-width: 0; }
.form-field input, .form-field textarea { width: 100%; min-width: 0; }
.contact-after {
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
}
.contact-after h3 { margin-bottom: var(--s3); }

/* ---------- 下層ページ: ヒーローの左下グラデーションを次セクションへ連続
     （ヒーロー側と同一の半径・色・フェード率で境界を挟んで鏡写しにする） ---------- */
.page-hero + .section {
  background:
    radial-gradient(700px 460px at 2% 0%, #C9DEED 0%, rgba(201,222,237,0) 50%),
    var(--bg);
}

@media (max-width: 1024px) {
  .insights-grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .subnav-pillars a { min-width: 100%; }
  /* モバイルではボタンが縦に積むため、矢印も全幅・下向きに */
  .pillar-arrow { width: 100%; height: 24px; }
  .pillar-arrow svg { width: 24px; height: 24px; transform: rotate(90deg); margin-inline: auto; }
  .insights-grid.cols-3 { grid-template-columns: 1fr; }
  .platform-btn { width: 52px; height: 52px; }
  .platform-btn svg, .platform-btn img { width: 24px; height: 24px; }
}

/* ============================================================
   25. 3周目の調整: br-sp / AI帯まわり / フィルター / モバイルヘッダー
   ============================================================ */

/* スマホでのみ効く手動改行（.brの逆） */
.br-sp { display: none; }
@media (max-width: 720px) { .br-sp { display: inline; } }


/* ---------- Works: チャネル（ボタン）と業種（プルダウン）を横並びに（業種は右へ）
   プルダウンなので幅を取らず、PCではチャネルの行と同じ高さに収まる */
.filter-row {
  display: flex; flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s4);
  margin-bottom: var(--s4);
}
.filter-row .filter-bar { margin-bottom: 0; }
/* .reveal.is-inのtransformでラッパー自体がスタッキングコンテキストになるため、
   メニュー側ではなくラッパーにz-indexを与えて、後続のカード群より上に出す */
.filter-select-wrap { position: relative; margin-left: auto; z-index: 30; }
.filter-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 190px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(26,31,38,.14);
  padding: 6px;
  display: grid;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .25s var(--ease-out), transform .25s var(--ease-out), visibility .25s;
  z-index: 40;
}
.filter-select-wrap.is-open .filter-menu { opacity: 1; visibility: visible; transform: none; }
.filter-option {
  text-align: left;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: none;
  font: 600 13px/1 var(--font-body);
  color: var(--ink);
  cursor: pointer;
  transition: background .25s, color .25s;
}
.filter-option:hover { background: var(--brand-tint); color: var(--brand-deep); }
.filter-option.is-active { background: var(--brand-tint); color: var(--brand-deep); }

.filter-select {
  appearance: none; -webkit-appearance: none;
  padding: 10px 40px 10px 20px;
  background: #fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" fill="none" stroke="%235B6672" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat right 16px center;
  background-size: 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font: 600 13px/1 var(--font-body);
  color: var(--muted);
  cursor: pointer;
  transition: border-color .3s, color .3s;
}
.filter-select:hover { border-color: var(--brand); color: var(--ink); }
.filter-select:focus { outline: none; border-color: var(--brand); color: var(--ink); }

/* ---------- Works / Insights: フィルター（共通） ---------- */
.filter-bar {
  display: flex; flex-wrap: wrap;
  gap: 10px;
  margin-bottom: var(--s4);
}
.filter-btn {
  padding: 10px 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  font: 600 13px/1 var(--font-body);
  color: var(--muted);
  cursor: pointer;
  transition: background .3s, color .3s, border-color .3s, transform .3s var(--ease-out);
}
.filter-btn:hover { border-color: var(--brand); color: var(--ink); transform: translateY(-2px); }
.filter-btn.is-active {
  background: var(--brand-strong);
  border-color: var(--brand-strong);
  color: #fff;
}
.locked-card.is-hidden, .post-card.is-hidden { display: none; }

/* ---------- Contact: PCは左に3 things、右にフォーム。スマホは下へ ---------- */
.contact-side .display-heading { font-size: clamp(24px, 2.6vw, 34px); margin-bottom: var(--s3); }
@media (max-width: 1024px) {
  .contact-side { order: 2; }
}

/* ---------- モバイルヘッダー: EN/JA非表示・Contact左寄せ・ハンバーガー ---------- */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 10px;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav-burger span {
  display: block;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .3s var(--ease-out), opacity .3s;
}
.nav-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.is-open span:nth-child(2) { opacity: 0; }
.nav-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  display: none;
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: #fff;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 18px 40px rgba(26,31,38,.12);
  padding: 10px var(--gutter) 18px;
}
.mobile-menu.is-open { display: block; }
.mobile-menu a {
  display: block;
  padding: 14px 4px;
  font: 600 16px var(--font-body);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.mobile-menu a:last-child { border-bottom: 0; }

/* Services: 展開式（タップでは遷移せず、下に3ピラー＋Platformsが内包される） */
.mm-item { border-bottom: 1px solid var(--line); }
.mm-toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  padding: 14px 4px;
  background: none;
  border: 0;
  font: 600 16px var(--font-body);
  color: var(--ink);
  cursor: pointer;
}
.mm-toggle svg {
  width: 16px; height: 16px;
  transition: transform .3s var(--ease-out);
}
.mobile-menu.mm-services-open .mm-toggle svg { transform: rotate(180deg); }
.mm-sub {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s var(--ease-out);
}
.mobile-menu.mm-services-open .mm-sub { max-height: 340px; }
/* PCのnav-drop-panelと同じフォント・配色・num/drop-subの見た目に揃える */
.mm-sub a {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 4px 12px 18px;
  font: 600 14px var(--font-body);
  color: var(--ink);
  border-bottom: 0;
}
.mm-sub a:last-child { padding-bottom: 16px; }
.mm-sub .num { font: 500 11px var(--font-mono); color: var(--brand); }
.mm-sub .drop-sub {
  border-top: 1px solid var(--line);
  margin-top: 4px;
  padding-top: 12px;
  font: 500 12px var(--font-mono);
  letter-spacing: .1em;
  color: var(--brand-deep);
}
.mm-sub .drop-sub + .drop-sub { border-top: 0; margin-top: 0; padding-top: 11px; }

.mobile-menu .mm-lang {
  font: 500 13px var(--font-mono);
  color: var(--brand-deep);
}

@media (max-width: 720px) {
  .lang-switch { display: none; }
  .header-cta { margin-left: auto; }
  .nav-burger { display: flex; }

  /* Aboutスマホ: 肩書の文字を読みやすく */
  .founder-role { font-size: 12px; }

  /* Services: 右枠線を「Built in-house」見出しまで引き上げて1グループに
     （枠線自体は上のグラデーション用ルールで描画するのでここでは余白のみ） */
  .ai-foundation .pillar-intro {
    margin-bottom: 0;
    padding-bottom: var(--s4);
  }
}

/* ============================================================
   26. Services: セクション見出し・カードのピクトグラム
   ============================================================ */
/* 01 Strategy: ホワイトボード分析のピクトグラムを見出しの左隣に。
   サブリード（.xp）は折り返して2行目に置き、アイコンのインデントを受けず
   下の01ステップと同じ左端から全幅で始める */
.pillar-intro-ico { display: flex; flex-wrap: wrap; gap: 0 var(--s4); align-items: center; }
/* ピクトは見出しの高さを超えない範囲で可変（超えると見出し→リードの
   間隔が02/03より開いてしまうため） */
.pillar-picto { flex: 0 0 auto; }
.pillar-picto svg { display: block; width: clamp(72px, 9vw, 112px); height: clamp(72px, 9vw, 112px); }
.pillar-intro-body { flex: 1; min-width: 0; }
/* 見出し→リードの間隔は02/03と同じ（.leadのmargin-topのみ）にするため、
   折返し行にはrow-gapを足さない（上のgapの1つ目の値=0） */
.pillar-intro-ico > .xp { flex: 1 1 100%; }

/* 02/03のカード: 左にピクトグラム、タイトルと本文は右側にまとめる */
.card.has-ico {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  column-gap: var(--s3);
  align-items: start;
}
.card.has-ico .card-ico { grid-column: 1; grid-row: 1 / span 2; }
.card.has-ico h4, .card.has-ico .xp { grid-column: 2; }

.card-ico { display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; }
.card-ico > svg { display: block; width: 88px; height: 88px; }
/* ブランドアイコンは白いチップに載せる（ヒーローのクラスタと同じ流儀） */
.card-ico .ci {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.card-ico .ci svg, .card-ico .ci img { display: block; width: 24px; height: 24px; object-fit: contain; }
.card-ico .ci.wide { width: 86px; }
.card-ico .ci.wide img { width: 70px; height: auto; max-height: 24px; }
/* Googleなど、チップ内でひと回り大きく見せたいアイコン */
.card-ico .ci.ci-lg svg { width: 32px; height: 32px; }

@media (max-width: 720px) {
  /* スマホ: 01のピクトは見出しの上に、少し小さく */
  .pillar-intro-ico { display: block; }
  .pillar-picto { display: block; margin-bottom: var(--s2); }
  .pillar-picto svg { width: 84px; height: 84px; }

  /* スマホ: カードのピクトはタイトルの横に小さく。本文は全幅ですっきり */
  .card.has-ico { grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; }
  .card.has-ico .card-ico { grid-row: 1; align-self: center; max-width: 80px; }
  .card.has-ico h4 { align-self: center; margin-bottom: 0; }
  .card.has-ico .xp { grid-column: 1 / -1; margin-top: var(--s2); }
  .card-ico { gap: 4px; }
  .card-ico > svg { width: 36px; height: 36px; }
  /* ブランドアイコンの束はPCと同じく2列のブロック（田の字）に揃える */
  .card.has-ico .card-ico.card-ico-multi { max-width: 52px; }
  .card-ico .ci { width: 24px; height: 24px; border-radius: 7px; }
  .card-ico .ci svg, .card-ico .ci img { width: 15px; height: 15px; }
  .card-ico .ci.wide { width: 52px; }
  .card-ico .ci.wide img { width: 42px; max-height: 15px; }
  .card-ico .ci.ci-lg svg { width: 19px; height: 19px; }
}

/* ============================================================
   27. Services: HOW ENGAGEMENTS START ＋ FAQ / Works: 実名クライアント
   ============================================================ */
/* 契約ステップは3項目なので3カラムに（PCのみ。スマホは既存の縦積み） */
@media (min-width: 721px) {
  .engagement-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.faq-block { margin-top: var(--s5); }
.faq-heading {
  font: 600 clamp(19px, 2vw, 23px)/1.35 var(--font-body);
  letter-spacing: -0.01em;
  margin-bottom: var(--s3);
}
.faq-list { display: grid; gap: 10px; }
.faq-item {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 20px;
  font: 600 15px/1.5 var(--font-body);
  color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-marker { position: relative; flex: 0 0 16px; width: 16px; height: 16px; }
.faq-marker::before, .faq-marker::after {
  content: "";
  position: absolute; inset: 0; margin: auto;
  background: var(--brand-deep);
  transition: transform .3s var(--ease-out);
}
.faq-marker::before { width: 14px; height: 2px; }
.faq-marker::after { width: 2px; height: 14px; }
.faq-item[open] .faq-marker::after { transform: scaleY(0); }
.faq-item > p { padding: 0 20px 18px; color: var(--muted); max-width: 60em; }

/* Works: 実名クライアント（伏せ字ではなく実名を出すケース） */
.client-name {
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--brand-deep);
}

/* ---------- Privacy Policy 本文 ---------- */
.legal-body { max-width: 72ch; }
.legal-updated {
  font: 500 12px/1 var(--font-mono);
  letter-spacing: .16em;
  color: var(--brand-deep);
  margin-bottom: var(--s3);
}
.legal-body h3 {
  font: 600 clamp(18px, 1.9vw, 22px)/1.35 var(--font-body);
  letter-spacing: -0.01em;
  margin: var(--s4) 0 var(--s2);
}
.legal-body p { color: var(--muted); margin-bottom: var(--s2); }
.legal-body a { color: var(--brand-deep); text-decoration: underline; }

/* ---------- 問い合わせフォームのプライバシー同意 ---------- */
.form-consent label {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14px;
  color: var(--muted);
  cursor: pointer;
}
.form-consent input[type="checkbox"] {
  width: 18px; height: 18px;
  margin-top: 1px;
  accent-color: var(--brand-strong);
  flex: 0 0 auto;
}
.form-consent a { color: var(--brand-deep); text-decoration: underline; }


/* ============================================================
   28. 和文タイポグラフィ（日本語サイト用の上書き）
   ============================================================ */
/* 日本語は単語区切りがないため、balance/prettyより禁則処理を優先する */
html:lang(ja) h2,
html:lang(ja) h3,
html:lang(ja) .display-heading,
html:lang(ja) p {
  text-wrap: initial;
  line-break: strict;
  word-break: normal;
  overflow-wrap: anywhere;
}
/* 和文は字面が大きいので、欧文と同じ級数だと詰まって見える。
   行間を広げ、見出しの字間をわずかに締める */
html:lang(ja) body { line-height: 1.85; }
html:lang(ja) h1,
html:lang(ja) h2,
html:lang(ja) h3,
html:lang(ja) .display-heading { letter-spacing: .01em; }
html:lang(ja) h1 { line-height: 1.35; }
html:lang(ja) h2,
html:lang(ja) .display-heading { line-height: 1.45; }
html:lang(ja) h3 { line-height: 1.5; }
html:lang(ja) .lead { line-height: 1.9; max-width: 42em; }
/* 和文見出しは欧文より1〜2段小さくすると収まりが良い */
html:lang(ja) h1 { font-size: clamp(30px, 3.8vw, 50px); }
html:lang(ja) h2,
html:lang(ja) .display-heading { font-size: clamp(24px, 2.9vw, 38px); }
/* ラベル（01 / SERVICES など）は欧文のまま字間を維持 */
html:lang(ja) .label-title,
html:lang(ja) .eyebrow { letter-spacing: .16em; }
/* 和文では句読点前後で不自然に切れないよう、手動改行に頼る */
html:lang(ja) .lead { text-align: left; }

/* 和文のヒーロー見出しは欧文と同じ級数だと大きすぎるため一段下げ、
   nowrapを解除して手動改行（.br）に任せる */
html:lang(ja) .hero-title {
  font-size: clamp(28px, 3.7vw, 46px);
  white-space: normal;
  line-height: 1.3;
}

/* ============================================================
   30. トップ セカンドビュー — 動く全体地図
   認知━━→売上 の一本線に 01戦略／02制作・開発／03実行・運用 が帯として乗り、
   02にシステム開発・AI・メディア構築が含まれることを1画面で示す。
   スクロール量に連動して帯が伸び、施策チップが順に点灯する（--p を main.js が更新）。
   ============================================================ */
.map-problem {
  font: 600 clamp(17px, 1.9vw, 21px)/1.65 var(--font-body);
  color: var(--muted);
  margin-bottom: var(--s3);
}
.map-problem b { color: var(--ink); font-weight: 700; }

.map-wrap { margin-top: var(--s5); color: var(--line); }
.map-wrap svg { display: block; width: 100%; height: auto; overflow: visible; }
.map-track { stroke: var(--line); }
/* 本線：JSがgetTotalLength()でdasharrayを設定し、is-inで左から引かれる */
.map-draw { stroke: var(--brand); transition: stroke-dashoffset 1.6s var(--ease-out) .15s; }
.map-head-num {
  font: 500 13px var(--font-mono);
  letter-spacing: .14em;
  fill: var(--brand-deep);
  text-anchor: middle;
}
.map-head-name { font: 600 26px var(--font-display); fill: var(--ink); text-anchor: middle; }
.map-end { font: 500 13px var(--font-mono); letter-spacing: .12em; fill: var(--brand-deep); }
.map-arrow { fill: var(--brand-deep); }

/* 帯は左から右へ濃くなり、売上に近づくほど深い青になる */
.mb1 { fill: #7FB0D3; }
.mb2 { fill: var(--brand); }
.mb3 { fill: var(--brand-deep); }

.map-chip rect { fill: #fff; stroke: var(--line); stroke-width: 1; }
.map-chip-t { font: 600 14px var(--font-body); fill: var(--ink); text-anchor: start; }
/* 大型チップ内の注記（自社事業の裏付け） */
.map-chip-s { font: 500 11.5px var(--font-body); fill: var(--brand-deep); text-anchor: start; }
/* システム開発・AI業務効率化の強調チップ（薄めのハイライト） */
.map-chip.is-key rect { fill: #F2F7FB; stroke: #A8CCE4; }
.map-chip.is-key .map-chip-t { fill: var(--brand-deep); font-weight: 600; }

/* ---------- A案型：帯は01→02→03の順に、is-inをきっかけに伸びる ---------- */
.map-band {
  transform-box: fill-box;
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform .8s var(--ease-out);
}
.map-wrap.is-in .mb1 { transform: scaleX(1); transition-delay: .25s; }
.map-wrap.is-in .mb2 { transform: scaleX(1); transition-delay: .55s; }
.map-wrap.is-in .mb3 { transform: scaleX(1); transition-delay: .85s; }

.map-ends { opacity: 0; transition: opacity .6s var(--ease-out) .15s; }
.map-wrap.is-in .map-ends { opacity: 1; }
.map-stems { opacity: 0; transition: opacity .6s var(--ease-out) .5s; }
.map-wrap.is-in .map-stems { opacity: 1; }

.map-col {
  opacity: 0; transform: translateY(12px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.map-wrap.is-in .map-col { opacity: 1; transform: none; }
.map-wrap.is-in .mc1 { transition-delay: .2s; }
.map-wrap.is-in .mc2 { transition-delay: .45s; }
.map-wrap.is-in .mc3 { transition-delay: .7s; }

/* チップはis-inのあと、行ごとの時間差（inline transition-delay）で現れる */
.map-chip {
  opacity: 0; transform: translateY(8px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.map-wrap.is-in .map-chip { opacity: 1; transform: none; }

/* スマホ用の縦積み。
   SVGは aria-hidden なので、PCでは display:none にせず読み上げ専用として残す
   （そうしないとPCの支援技術に地図の内容が一切届かない）。 */
.map-steps {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================
   31. トップ WHAT WE RUN（3本柱）／WHY JDOC（実践者の証拠）／CASE STUDY 2番手
   ============================================================ */
.run-steps-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.run-step h4 a { transition: color .25s; }
.run-step h4 a:hover { color: var(--brand-deep); }
.run-link { margin-top: var(--s2); display: inline-flex; }

.proof-intro { margin-bottom: var(--s5); }
.proof-intro .lead { margin-top: var(--s3); }
.proof-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3);
  align-items: start;
}
.proof-card { display: flex; flex-direction: column; gap: var(--s2); }
.proof-card:hover {
  border-top-color: var(--brand);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(26,31,38,.08);
}
.proof-kicker {
  font: 500 12px/1 var(--font-mono);
  letter-spacing: .16em;
  color: var(--brand-deep);
}
.proof-card h4 {
  font: 700 clamp(24px, 2.4vw, 30px)/1.2 var(--font-display);
  letter-spacing: -0.01em;
}
.proof-stat {
  position: relative;
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--line);
}
.proof-stat .stat-number {
  font: 700 clamp(30px, 3.4vw, 44px)/1 var(--font-display);
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}
.proof-stat-label { font: 500 13px/1.4 var(--font-mono); color: var(--brand-deep); }
.proof-card p { color: var(--muted); font-size: 16px; }
.proof-card .link-arrow { margin-top: auto; align-self: flex-start; }

/* （旧）サブ扱いカード：横幅いっぱいに寝かせ、一回り小さく（現在未使用） */
.proof-sub {
  grid-column: 1 / -1;
  padding: var(--s3) var(--s4);
  background: var(--bg-alt);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: var(--s4);
  row-gap: 6px;
}
.proof-sub .proof-kicker { grid-column: 1; grid-row: 1; }
.proof-sub h4 { grid-column: 1; grid-row: 2; font-size: clamp(18px, 1.8vw, 21px); }
.proof-sub p { grid-column: 2; grid-row: 1 / span 2; font-size: 15px; }
.proof-sub:hover { transform: none; box-shadow: none; border-top-color: transparent; }
/* 未確定情報のプレースホルダ（公開前に必ず消す） */
.todo { color: #B03A48; font-weight: 600; font-size: 13px; }

/* CASE STUDY: 主役の下に置く2番手の実績 */
.case-second {
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid rgba(255,255,255,.22);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s4);
  align-items: baseline;
}
.cs-tag {
  font: 500 12px/1.5 var(--font-mono);
  letter-spacing: .06em;
  color: #A8CCE4;
  white-space: nowrap;
}
.cs-text { color: #C9DCEB; font-size: 16px; }
.cs-text b { color: #fff; font-weight: 700; }

/* ============================================================
   32. スクロール演出の緩急（B案）
   セクションラベルは横から、見出しは下線が左から伸びる。
   カードはホバーでブルーの下線が走る。
   ============================================================ */
.section-label {
  transform: translateX(-24px);
  opacity: 0;
  transition: transform .7s var(--ease-out), opacity .7s var(--ease-out);
}
.section-label.is-in { transform: none; opacity: 1; }
/* 狭い画面ではガターより外に出ないよう移動量を抑える */
@media (max-width: 720px) { .section-label { transform: translateX(-10px); } }

.card, .partner-card { position: relative; overflow: hidden; }
.card::after, .partner-card::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease-out);
}
.card:hover::after, .partner-card:hover::after { transform: scaleX(1); }
.card:hover, .partner-card:hover { transform: translateY(-6px); }

/* 大きな数字：カウントアップに合わせて下線が伸びる */
.proof-card .proof-stat::after {
  content: "";
  position: absolute; left: 0; bottom: -1px;
  height: 2px; width: 100%;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.1s var(--ease-out) .2s;
}
.proof-card.is-in .proof-stat::after { transform: scaleX(1); }

.btn-primary .arrow { transition: transform .35s var(--ease-out); }
.btn-primary:hover .arrow { transform: translateX(5px); }

/* ============================================================
   33. 30〜32のレスポンシブ／モーション制御
   ============================================================ */
@media (max-width: 1024px) {
  .proof-sub { grid-template-columns: 1fr; }
  .proof-sub .proof-kicker, .proof-sub h4, .proof-sub p { grid-column: 1; grid-row: auto; }
  .run-steps-3 { grid-template-columns: 1fr; gap: var(--s4); }
}

@media (max-width: 720px) {
  /* 全体地図：SVGを隠し、縦積みの要約に切り替える */
  .map-wrap { display: none; }
  .map-steps {
    position: static; width: auto; height: auto;
    margin: var(--s4) 0 0; overflow: visible;
    clip: auto; white-space: normal;
    display: grid; gap: 0;
  }
  .map-steps li {
    position: relative;
    border-left: 2px solid var(--line);
    padding: 0 0 var(--s4) var(--s3);
  }
  .map-steps li::before {
    content: "";
    position: absolute; top: 6px; left: -6px;
    width: 10px; height: 10px;
    background: var(--brand);
    border-radius: 50%;
  }
  .map-steps li:last-child { padding-bottom: 0; }
  .ms-edge { font: 500 12px var(--font-mono); letter-spacing: .14em; color: var(--brand-deep); }
  .ms-num { font: 700 22px/1.2 var(--font-display); color: var(--brand); margin-right: 10px; }
  .ms-label { font: 600 17px/1.3 var(--font-body); }
  .ms-desc { display: block; color: var(--muted); font-size: 14px; margin-top: 2px; }
  .ms-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
  .ms-pill {
    display: inline-flex; align-items: center; gap: 5px;
    font: 500 12px/1 var(--font-body);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 6px 9px;
    color: var(--ink);
    background: #fff;
  }
  .ms-pill svg { width: 16px; height: 16px; flex: 0 0 auto; }
  .ms-pill.is-key {
    border-color: #A8CCE4;
    background: #F2F7FB;
    color: var(--brand-deep);
    font-weight: 600;
  }

  .proof-grid { grid-template-columns: 1fr; }
  .case-second { grid-template-columns: 1fr; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .map-band { transform: none !important; }
  .map-col, .map-chip, .map-ends, .map-stems { opacity: 1 !important; transform: none !important; }
  .map-draw { stroke-dashoffset: 0 !important; stroke-dasharray: none !important; }
  .section-label { transform: none; opacity: 1; }
  .proof-card .proof-stat::after { transform: scaleX(1); }
}

/* ============================================================
   34. Services: 柱の思想リードブロック（2カラム交互＋グリッドブレイク）
   各柱の冒頭に「時代認識→だから何が必要→JDOCはこう提供する」のリードと
   ビジュアルを置き、その下に既存の項目グリッドを続ける。
   ビジュアルは本文グリッドから画面端まではみ出させる。
   ============================================================ */
.pillar-sec { overflow-x: clip; }

.pillar-lead {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s5);
  align-items: center;
  margin-bottom: var(--s5);
}
.pl-copy .lead { margin-top: var(--s3); }
.pl-visual {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: var(--brand-tint);
  aspect-ratio: 4 / 3;
}
/* 写真が用意できたら svg を img に差し替えるだけで成立するようにしておく */
.pl-visual > svg, .pl-visual > img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* 偶数柱（02）はビジュアルを右へ */
.pillar-lead.pl-right .pl-visual { order: 2; }

@media (min-width: 1025px) {
  .pillar-lead .pl-visual {
    margin-left: calc(-1 * (var(--gutter) + max(0px, (100vw - var(--max-w)) / 2)));
    border-radius: 0 12px 12px 0;
  }
  .pillar-lead.pl-right .pl-visual {
    margin-left: 0;
    margin-right: calc(-1 * (var(--gutter) + max(0px, (100vw - var(--max-w)) / 2)));
    border-radius: 12px 0 0 12px;
  }
}
@media (max-width: 1024px) {
  .pillar-lead { grid-template-columns: 1fr; gap: var(--s4); }
  .pillar-lead.pl-right .pl-visual { order: 0; }
  .pl-visual { aspect-ratio: 16 / 9; }
}

/* 項目ボックスから領域別の専門ページへ出す小さなリンク */
.card-link { margin-top: var(--s2); }

/* ============================================================
   35. Services: 顧客ジャーニー×施策の対応図 — 砂時計型ダブルファネル
   段階色（赤→橙→黄→ティール→青）のグラデーションを砂時計に投影し、
   その上に白いボックスの段階名を重ねる。顧客の状態は左、効く施策は右。
   下のエンゲージメント図はx軸そのものが「90度倒した同じファネル」で、
   同じ色・同じ形で上下がつながる。
   ============================================================ */
.jm-wrap { position: relative; }
.journey-map { --p: 0; position: relative; margin-top: var(--s4); }

/* 砂時計の背景（絶対配置・中央列の裏） */
.jm-funnel {
  position: absolute;
  top: -14px; bottom: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: 480px;
  pointer-events: none;
}
.jm-funnel svg { width: 100%; height: 100%; display: block; }

/* 列見出し */
.jm-heads {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 460px 1fr;
  gap: var(--s3);
  margin-bottom: 10px;
}
.jm-heads span {
  font: 500 12px/1 var(--font-mono);
  letter-spacing: .16em;
  color: var(--brand-deep);
}
.jm-heads span:first-child { text-align: left; }

.jm-rows { position: relative; z-index: 1; display: grid; gap: 8px; }
.jm-row {
  display: grid;
  grid-template-columns: 1fr 460px 1fr;
  gap: var(--s3);
  align-items: center;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.jm-row.is-lit { opacity: 1; transform: none; }

.jm-state { text-align: right; padding-right: 4px; }
/* 思考の吹き出し：発言ではなく心の中の声。小さな丸がファネル（右）へ続く */
.jm-state h4 {
  position: relative;
  display: inline-block;
  text-align: left;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 20px;
  padding: 10px 16px;
  font: 600 14px/1.55 var(--font-body);
  letter-spacing: -0.01em;
  color: var(--muted);
  box-shadow: 0 6px 18px rgba(20,32,43,.08);
}
.jm-state h4::before {
  content: "";
  position: absolute;
  right: -16px; top: calc(50% - 1px);
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--line);
}
.jm-state h4::after {
  content: "";
  position: absolute;
  right: -27px; top: calc(50% + 8px);
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--line);
}

/* 段階名：ファネルの上に載せる白いボックス */
.jm-node { display: grid; justify-items: center; }
.jm-seg { display: grid; justify-items: center; gap: 5px; }
.jm-stage {
  display: inline-block;
  background: #fff;
  border: 1.5px solid var(--ink);
  padding: 8px 18px;
  font: 700 14.5px/1.2 var(--font-body);
  letter-spacing: .06em;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(20,32,43,.16);
}
/* 段の間の下向き矢印 */
.jm-row:not(:last-child) .jm-seg::after {
  content: "";
  width: 0; height: 0;
  border: 7px solid transparent;
  border-top: 8px solid rgba(255,255,255,.85);
  border-bottom: 0;
}

.jm-acts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-start; }
.jm-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 12.5px/1 var(--font-body);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 9px;
  background: #fff;
  color: var(--ink);
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(20,32,43,.06);
}
.jm-chip i {
  font: 600 10px/1 var(--font-mono);
  font-style: normal;
  color: var(--brand-deep);
  background: var(--brand-tint);
  border-radius: 4px;
  padding: 3px 5px;
}
.jm-chip.is-sys { border-color: #A8CCE4; background: #F2F7FB; }
.jm-chip.is-sys i { background: #fff; }

/* ---------- 「顧客の状態」→ まとめ見出し の接続矢印 ----------
   左端を点線で降り、最下部で肘のように右へ曲がって見出しに横から刺さる。
   縦線のtop/heightは main.js がレイアウト後に計測してセットする */
.jm-link {
  position: absolute;
  left: 3px;
  width: 0;
  border-left: 2px dashed var(--brand-deep);
  opacity: .75;
  pointer-events: none;
}
.jm-link::before {
  content: "";
  position: absolute;
  top: -4px; left: -5px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--brand-deep);
}
.jm-link i {
  position: absolute;
  bottom: 0; left: 0;
  width: 36px;
  border-top: 2px dashed var(--brand-deep);
}
.jm-link i::after {
  content: "";
  position: absolute;
  right: -9px; top: -8px;
  border: 7px solid transparent;
  border-left: 9px solid var(--brand-deep);
  border-right: 0;
}
.jm-flow { display: none; }

@media (max-width: 900px) {
  .jm-heads { display: none; }
  .jm-link { display: none; }
  .jm-flow { display: grid; justify-items: center; margin: 8px 0 6px; }
  .jm-flow span {
    position: relative;
    width: 0; height: 104px;
    border-left: 2px dashed var(--brand-deep);
    opacity: .75;
  }
  .jm-flow span::after {
    content: "";
    position: absolute;
    bottom: -9px; left: -8px;
    border: 7px solid transparent;
    border-top: 9px solid var(--brand-deep);
    border-bottom: 0;
  }
  .jm-rows { gap: 8px; }
  .jm-row { grid-template-columns: 1fr; gap: 8px; justify-items: center; }
  .jm-row + .jm-row { margin-top: 14px; }
  .jm-node { order: 1; }
  .jm-state { order: 2; text-align: center; padding-right: 0; }
  .jm-state h4 {
    border-color: #B9C7D2;
    box-shadow: 0 8px 20px rgba(20,32,43,.14);
  }
  .jm-state h4::before, .jm-state h4::after { border-color: #B9C7D2; }
  .jm-state h4::before { right: calc(50% - 5px); top: auto; bottom: -16px; }
  .jm-state h4::after { right: calc(50% - 14px); top: auto; bottom: -26px; }
  .jm-acts { order: 3; justify-content: center; margin-top: 16px; }
  .jm-funnel { width: min(78%, 340px); opacity: .32; }
  .jm-chip { white-space: normal; }
}

/* ---------- エンゲージメント図：下るほど右肩上がり ---------- */
.jm-climb { margin-top: var(--s6); position: relative; }
/* 見出しは中央寄りに置き、接続矢印が横から刺さる余白を左に空ける */
.climb-head {
  font: 600 clamp(19px, 1.9vw, 24px)/1.5 var(--font-body);
  letter-spacing: -0.01em;
  margin-bottom: var(--s4);
  padding-left: 64px;
}
.climb-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.climb-inner { min-width: 780px; }
.climb-mts { display: block; width: 100%; height: auto; }

/* 段階名：上のファネルと同じ段階色のチップ付き */
.climb-names {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-top: 12px;
}
.climb-name {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: 700 13.5px/1.3 var(--font-body);
  text-align: center;
}
.climb-name::before {
  content: "";
  width: 13px; height: 13px;
  border-radius: 3px;
  background: var(--c);
  border: 1px solid rgba(20,32,43,.15);
  flex: 0 0 auto;
}

.cl-area { transform: scaleY(0); transform-origin: center bottom; transition: transform .9s var(--ease-out) .1s; }
.jm-climb.is-in .cl-area { transform: scaleY(1); }
.cl-line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.3s var(--ease-out) .7s;
}
.jm-climb.is-in .cl-line { stroke-dashoffset: 0; }
.cl-tip { opacity: 0; transition: opacity .4s var(--ease-out) 1.9s; }
.jm-climb.is-in .cl-tip { opacity: 1; }

@media (max-width: 900px) {
  .jm-climb { margin-top: 18px; }
  .climb-head { padding-left: 0; }
  /* 横スクロールをやめ、1画面で全体が見えるサイズに */
  .climb-scroll { overflow: visible; }
  .climb-inner { min-width: 0; }
  .climb-names {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px 6px;
    margin-top: 10px;
  }
  .climb-name { font-size: 11.5px; gap: 5px; justify-content: flex-start; }
  .climb-name::before { width: 10px; height: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .jm-row { opacity: 1 !important; transform: none !important; }
  .cl-area { transform: scaleY(1); }
  .cl-line { stroke-dashoffset: 0; stroke-dasharray: none; }
  .cl-tip { opacity: 1; }
}

/* ============================================================
   36. ヘッダー: サービスのメガメニュー
   3本柱と配下の施策が、ホバー／クリックで一覧できる
   ============================================================ */
.nav-mega {
  grid-template-columns: repeat(3, minmax(240px, 1fr));
  gap: 8px 16px;
  min-width: min(900px, calc(100vw - 32px));
  padding: 22px;
}
.mega-head {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px 11px;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 10px 10px 0 0;
  font: 700 16px var(--font-body);
  color: var(--ink);
}
.mega-head .num { font-size: 12px; }
.mega-head:hover { background: var(--brand-tint); color: var(--brand-deep); }
.mega-list { display: grid; gap: 0; padding-top: 6px; }
.mega-list a {
  display: block;
  padding: 9px 16px;
  border-radius: 8px;
  border-bottom: 0;
  font: 500 14.5px var(--font-body);
  color: var(--ink);
  transition: background .2s, color .2s;
}
.mega-list a:hover { background: var(--brand-tint); color: var(--brand-deep); }

/* ============================================================
   37. CASE STUDY 刷新
   濃紺ベタをやめ、明るい背景＋サムネイル＋大きな数字のカード型に
   ============================================================ */
.case { background: linear-gradient(180deg, #F4F7F9 0%, #FFFFFF 78%); }
.case .section-label { border-bottom-color: var(--brand); }
.case .section-label .num { color: var(--brand-deep); }
.case .section-label .label-title { color: var(--ink); }

.case-feature {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--s5);
  align-items: center;
}
.case-thumb {
  position: relative;
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(36,86,126,.18);
}
.case-thumb > svg, .case-thumb > img {
  display: block;
  width: 100%; height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.case-stat {
  position: absolute; left: 26px; bottom: 20px;
  color: #fff;
  display: grid; gap: 4px;
}
.case-stat .stat-number {
  font: 700 clamp(46px, 5vw, 76px)/1 var(--font-display);
  color: #fff;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 4px 18px rgba(20,32,43,.35);
}
.case-stat em {
  font: 500 13px/1.5 var(--font-body);
  font-style: normal;
  opacity: .95;
}
.case-pill {
  display: inline-block;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 14px;
  font: 600 12px/1 var(--font-mono);
  letter-spacing: .06em;
  color: var(--brand-deep);
  margin-bottom: var(--s3);
}
.case-body h3 {
  font: 700 clamp(24px, 2.8vw, 36px)/1.45 var(--font-display);
  letter-spacing: .01em;
  color: var(--brand-deep);
  margin-bottom: var(--s3);
}
.case-lead { color: var(--muted); margin-bottom: var(--s3); }

/* 2番手の事例：横長カード */
.case-sub {
  margin-top: var(--s5);
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: var(--s4);
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: var(--s3);
  transition: transform .3s var(--ease-out), box-shadow .3s;
}
.case-sub:hover { transform: translateY(-4px); box-shadow: 0 14px 36px rgba(26,31,38,.10); }
.case-thumb-s { border-radius: 12px; box-shadow: none; }
.case-stat-s { left: 14px; bottom: 10px; }
.case-stat-s .stat-number { font-size: clamp(30px, 3vw, 44px); }
.case-sub .case-pill { margin-bottom: 10px; }
.case-sub-t { color: var(--muted); }
.case-sub-t b { color: var(--brand-deep); font-weight: 700; }

@media (max-width: 1024px) {
  .case-feature { grid-template-columns: 1fr; gap: var(--s4); }
}
@media (max-width: 720px) {
  .case-sub { grid-template-columns: 1fr; }
}

/* ============================================================
   38. INSIGHTS: SVGプレースホルダのサムネイル対応
   ============================================================ */
.post-thumb svg { display: block; width: 100%; height: 100%; }

/* ============================================================
   39. About: 代表カードの英字名
   ============================================================ */
.founder-name .founder-en {
  display: block;
  font: 500 12px var(--font-mono);
  letter-spacing: .08em;
  color: var(--brand-deep);
  margin-top: 4px;
}


/* ============================================================
   40. WHAT WE RUN: 詳しく見るの集約ボタン
   ============================================================ */
.run-more { margin-top: var(--s4); }

/* ============================================================
   41. About: OUR STRENGTH — アイコン付きの横並び数字カード
   ============================================================ */
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s3);
}
.stat-card {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: var(--s4) var(--s3);
  transition: transform .3s var(--ease-out), box-shadow .3s;
}
.stat-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(26,31,38,.08); }
.stat-ico { display: block; width: 64px; height: 64px; }
.stat-ico svg { display: block; width: 100%; height: 100%; }
.stat-card .stat-number {
  font: 700 clamp(30px, 3vw, 42px)/1 var(--font-display);
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}
.stat-card-label { font: 500 13px/1.6 var(--font-body); color: var(--muted); }

/* アイコンの小さな動き（カードがビューに入ったら再生） */
.stat-card.is-in .st-heart { animation: st-pop 1.8s var(--ease-out) .4s infinite; transform-origin: 24px 24px; }
@keyframes st-pop {
  0%, 100% { transform: scale(1); }
  12% { transform: scale(1.35); }
  24% { transform: scale(1); }
}
.stat-card.is-in .st-box { animation: st-bob 2.2s var(--ease-out) .3s infinite; }
@keyframes st-bob {
  0%, 100% { transform: translateY(0); }
  18% { transform: translateY(-4px); }
  36% { transform: translateY(0); }
}
.stat-card.is-in .st-win { animation: st-blink 2.4s steps(1) infinite; }
.stat-card.is-in .st-win2 { animation-delay: .8s; }
.stat-card.is-in .st-win3 { animation-delay: 1.6s; }
@keyframes st-blink {
  0%, 100% { opacity: 1; }
  45% { opacity: .25; }
  60% { opacity: 1; }
}
.stat-card.is-in .st-ring { animation: st-ring 2.4s var(--ease-out) .6s infinite; transform-origin: 33px 11px; }
@keyframes st-ring {
  0% { transform: scale(.6); opacity: .9; }
  70% { transform: scale(1.8); opacity: 0; }
  100% { transform: scale(1.8); opacity: 0; }
}

@media (max-width: 900px) {
  .stats-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-ico { width: 48px; height: 48px; }
}

/* ============================================================
   42. 和文の折返し：文節単位で折り返す（対応ブラウザのみ）
   「〜す／る。」のような不自然な位置での改行を防ぐ
   ============================================================ */
html:lang(ja) h1, html:lang(ja) h2, html:lang(ja) h3, html:lang(ja) h4,
html:lang(ja) .jm-state h4, html:lang(ja) .jm-chip {
  word-break: auto-phrase;
}

@media (prefers-reduced-motion: reduce) {
  .st-heart, .st-box, .st-win, .st-ring { animation: none !important; }
}


/* ============================================================
   43. 微調整: ミッション直下の価値観／詳しく見るリンク／CASEボタン
   ============================================================ */
/* ミッションの本文と価値観カードを1ブロックとして続ける */
.mission-values { margin-top: var(--s5); }

/* WHAT WE RUN: AI帯の右下に置く控えめな導線 */
.run-more { margin-top: var(--s3); display: flex; justify-content: flex-end; }

/* CASE STUDY: ボタンは本文から少し空ける */
.case-more { margin-top: 6px; }


/* ============================================================
   44. 第4弾の調整
   ============================================================ */

/* ---------- メガメニュー右下の小さな導線 ---------- */
.mega-foot {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  border-top: 1px solid var(--line);
  margin-top: 8px;
  padding: 10px 8px 0;
}
.mega-foot a {
  border-bottom: 0;
  font: 500 12.5px var(--font-body);
  color: var(--brand-deep);
  padding: 2px 6px;
  border-radius: 6px;
}
.mega-foot a:hover { background: var(--brand-tint); }

/* ---------- About: 数字カードはアイコンの右に数字＋タイトルを横並び ---------- */
.stat-card {
  grid-template-columns: auto 1fr;
  justify-items: start;
  align-items: center;
  text-align: left;
  gap: 0 18px;
  padding: var(--s3) var(--s4);
}
.stat-ico { width: 56px; height: 56px; }
.stat-body { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.stat-card .stat-number { font-size: clamp(26px, 2.3vw, 36px); }
.stat-card-label { font: 500 12.5px/1.55 var(--font-body); color: var(--muted); text-align: left; }
@media (max-width: 900px) {
  .stats-row { grid-template-columns: 1fr; gap: 12px; }
  .stat-card { padding: 16px 20px; }
  .stat-ico { width: 44px; height: 44px; }
}

/* ---------- About: 代表カードの＋マークと肩書が重ならないように ---------- */
@media (max-width: 720px) {
  .founder-card .founder-role { padding-right: 48px; }
}

/* ---------- About: COMPANYテーブルをスタイリッシュに ---------- */
.company-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--ink);
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 16px 40px rgba(26,31,38,.08);
}
.company-table th {
  width: 210px;
  padding: 22px 28px;
  background: var(--ink);
  color: #fff;
  font: 600 12px/1.7 var(--font-mono);
  letter-spacing: .18em;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.company-table tr:last-child th { border-bottom: 0; }
.company-table td {
  padding: 22px 28px;
  font: 500 15px/1.8 var(--font-body);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.company-table tr:last-child td { border-bottom: 0; }
.company-table td ul { display: grid; gap: 6px; }
.company-table td ul li { position: relative; padding-left: 16px; }
.company-table td ul li::before {
  content: "";
  position: absolute; left: 0; top: .72em;
  width: 8px; height: 2px;
  background: var(--brand);
}
.company-table td a { color: var(--brand-deep); border-bottom: 1px solid var(--brand); }
@media (max-width: 720px) {
  .company-table, .company-table tbody, .company-table tr,
  .company-table th, .company-table td { display: block; width: 100%; }
  .company-table th { padding: 12px 20px; border-bottom: 0; }
  .company-table td { padding: 16px 20px 20px; }
}

/* ---------- （旧）ダミーロゴ（現在未使用） ---------- */
.proof-sub .proof-logos {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.proof-logos svg { height: 32px; width: auto; opacity: .8; }

/* ---------- 和文の折返し：本文・ラベルにも文節折返しを拡大 ---------- */
html:lang(ja) p, html:lang(ja) li, html:lang(ja) dd,
html:lang(ja) .stat-card-label, html:lang(ja) .partner-text {
  word-break: auto-phrase;
}
html:lang(ja) .card h4 { text-wrap: balance; }


/* ============================================================
   45. About: OUR STRENGTH — 濃紺グラデーションの大型タイル
   ============================================================ */
.stat-card {
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: 20px;
  background: linear-gradient(140deg, #16334E 0%, #2E6084 58%, #4883AE 125%);
  color: #fff;
  grid-template-columns: 1fr;
  justify-items: start;
  gap: 18px;
  padding: 30px 28px;
  min-height: 200px;
}
.stat-card:nth-child(2) { background: linear-gradient(140deg, #1B3F60 0%, #24567E 55%, #6FA5C9 130%); }
.stat-card:nth-child(3) { background: linear-gradient(140deg, #14293E 0%, #2E6084 62%, #4883AE 130%); }
.stat-card:nth-child(4) { background: linear-gradient(140deg, #1B3F60 0%, #2E6084 50%, #7FB0D3 140%); }
.stat-card:hover { transform: translateY(-6px); box-shadow: 0 24px 52px rgba(22,51,78,.38); }

.stat-ico { width: 84px; height: 84px; }
/* 濃色背景に合わせてアイコンを白系に反転 */
.stat-card svg [stroke="#4883AE"] { stroke: #BFE0F5; }
.stat-card svg [stroke="#2E6084"] { stroke: #FFFFFF; }
.stat-card svg [fill="#2E6084"] { fill: #FFFFFF; }
.stat-card svg [fill="#4883AE"] { fill: #BFE0F5; }

.stat-card .stat-number { color: #fff; font-size: clamp(36px, 3.2vw, 54px); }
.stat-card-label { color: rgba(255,255,255,.9); font-size: 13px; }

@media (max-width: 900px) {
  .stat-card { min-height: 0; padding: 20px 22px; gap: 12px; }
  .stat-ico { width: 60px; height: 60px; }
}


/* ============================================================
   46. Services: ヒーロー〜3本柱のテック背景
   回路トレース・レーダー・コードブラケット・十字マーカーを
   随所に散らし、システム構築の専門家であることを空気で伝える。
   カスタマージャーニー（#journey）以降には敷かない。
   ============================================================ */
/* サービスのヒーロー：背景はラッパー（.svc-top）が一枚で描くため持たない */
.page-hero:has(.subnav-pillars) { background: none; }

/* 01 企画・戦略：ドットと水面の輪はラッパーが描く。ここは局所モチーフのみ */
#strategy {
  position: relative;
  background:
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 320'%3E%3Cg fill='none' stroke='%234883AE' stroke-width='2'%3E%3Cpath d='M18 302H122V218h88V134h92'/%3E%3Cpath d='M18 250h56v-64h70'/%3E%3Cpath d='M60 302v-36'/%3E%3C/g%3E%3Cg fill='%234883AE'%3E%3Ccircle cx='122' cy='218' r='5'/%3E%3Ccircle cx='210' cy='134' r='5'/%3E%3Ccircle cx='144' cy='186' r='5'/%3E%3Ccircle cx='302' cy='134' r='5'/%3E%3Crect x='12' y='296' width='12' height='12'/%3E%3C/g%3E%3C/svg%3E") right -64px bottom -44px / 340px auto no-repeat;
}

/* 02 制作・開発：方眼＋グロー（0/1 の数字を並べた装飾は意味が伝わらないため外した） */
#production {
  background-color: #fff;
  background-image:
    linear-gradient(rgba(72,131,174,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(72,131,174,.08) 1px, transparent 1px),
    radial-gradient(620px 380px at 6% 12%, rgba(29,155,240,.11) 0%, rgba(29,155,240,0) 60%);
  background-position: 0 0, 0 0, 0 0;
  background-size: 100% 36px, 36px 100%, auto;
  background-repeat: repeat, repeat, no-repeat;
}

/* 03 実行・運用：レーダー（右下）＋回路（左下）＋ドットグリッド */
#execution {
  background-color: #fff;
  background:
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cg fill='none' stroke='%232E6084' stroke-width='1.6'%3E%3Ccircle cx='150' cy='150' r='46'/%3E%3Ccircle cx='150' cy='150' r='94'/%3E%3Ccircle cx='150' cy='150' r='142'/%3E%3Cline x1='150' y1='0' x2='150' y2='300'/%3E%3Cline x1='0' y1='150' x2='300' y2='150'/%3E%3C/g%3E%3Ccircle cx='196' cy='104' r='6' fill='%234883AE'/%3E%3C/svg%3E") right -70px bottom -60px / 330px auto no-repeat,
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 320'%3E%3Cg fill='none' stroke='%234883AE' stroke-width='2'%3E%3Cpath d='M18 302H122V218h88V134h92'/%3E%3Cpath d='M18 250h56v-64h70'/%3E%3Cpath d='M60 302v-36'/%3E%3C/g%3E%3Cg fill='%234883AE'%3E%3Ccircle cx='122' cy='218' r='5'/%3E%3Ccircle cx='210' cy='134' r='5'/%3E%3Ccircle cx='144' cy='186' r='5'/%3E%3Ccircle cx='302' cy='134' r='5'/%3E%3Crect x='12' y='296' width='12' height='12'/%3E%3C/g%3E%3C/svg%3E") left -56px bottom 60px / 290px auto no-repeat,
    radial-gradient(520px 320px at 8% 8%, rgba(72,131,174,.10) 0%, rgba(72,131,174,0) 62%),
    radial-gradient(circle, rgba(46,96,132,.11) 1px, transparent 1.4px) 0 0 / 26px 26px
    #fff;
}

/* スマホ：柄を間引いて軽くする（グロー＋ドットのみ） */
@media (max-width: 720px) {
  .page-hero:has(.subnav-pillars) {
    background:
      radial-gradient(420px 260px at 90% 6%, rgba(72,131,174,.14) 0%, rgba(72,131,174,0) 62%),
      radial-gradient(circle, rgba(72,131,174,.12) 1px, transparent 1.4px) 0 0 / 22px 22px;
  }
  #strategy, #execution {
    background:
      radial-gradient(circle, rgba(72,131,174,.11) 1px, transparent 1.4px) 0 0 / 22px 22px #fff;
  }
  #production {
    background-color: #fff;
    background-image:
      linear-gradient(rgba(72,131,174,.08) 1px, transparent 1px),
      linear-gradient(90deg, rgba(72,131,174,.08) 1px, transparent 1px);
    background-size: 100% 32px, 32px 100%;
    background-position: 0 0, 0 0;
    background-repeat: repeat, repeat;
  }
}


/* ============================================================
   47. About: VISION — 本文の右に写真（スマホでは本文と価値観カードの間）
   ============================================================ */
.mission-lead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  gap: var(--s5);
  align-items: center;
}
.mission-lead .pillar-intro { margin-bottom: 0; }
.mission-photo {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: var(--brand-tint);
  box-shadow: 0 14px 36px rgba(26,31,38,.10);
}
.mission-photo > svg, .mission-photo > img {
  display: block;
  width: 100%; height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
@media (max-width: 900px) {
  /* 本文 → 写真 → 価値観カード の順に縦積み */
  .mission-lead { grid-template-columns: 1fr; gap: var(--s4); }
  .mission-values { margin-top: var(--s4); }
}


/* ============================================================
   48. Works: 事例タイトル／Insights: 長い見出しのはみ出し防止
   ============================================================ */
.work-title {
  font: 600 clamp(17px, 1.7vw, 20px)/1.5 var(--font-body);
  letter-spacing: -0.01em;
  margin-bottom: var(--s2);
}
/* 記事・実績タイトル：文節折返し（auto-phrase）と行数均等化（balance）を無効化。
   長い塊が折り返せずにカード右端で切れる崩れを防ぎ、通常の字詰め折返しに固定する */
html:lang(ja) .post-card h4,
html:lang(ja) .card.post-card h4,
html:lang(ja) .work-title,
html:lang(ja) .card .work-title {
  word-break: normal !important;
  text-wrap: wrap !important;
  overflow-wrap: anywhere;
}

/* VISION（PCのみ）: 本文と写真の間隔を詰め、本文をより右まで使う。
   テキスト列は写真と同じ高さに引き伸ばし、見出しを写真の上端、
   最終行を写真の底辺に揃える（行間も広めに） */
@media (min-width: 901px) {
  .mission-lead {
    grid-template-columns: minmax(0, 1.15fr) minmax(260px, 380px);
    gap: var(--s4);
    align-items: stretch;
  }
  .mission-lead .lead { max-width: none; }
  .mission-lead .pillar-intro {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  /* flexの引き伸ばしで見出しが全幅になると下線も伸びるため、文字幅に戻す */
  .mission-lead .pillar-intro .display-heading { align-self: flex-start; }
  .mission-lead .pillar-intro .lead {
    margin: 0;
    line-height: 2.15;
  }
}


/* ============================================================
   49. Works: 非公開事例のぼかしUI／実名公開バッジ
   ロック付きカードはクライアント名と本文をぼかし、実名2件との差分を明確にする
   ============================================================ */
/* 非公開：クライアント名は強め、本文は読めない程度にぼかす（コピー・選択も不可） */
.client-blur {
  filter: blur(5px);
  user-select: none;
  pointer-events: none;
}
/* 概要は上半分ほど読ませ、下へ向かって溶けて消える（続きはロック） */
.locked-text {
  user-select: none;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 42%, transparent 92%);
  mask-image: linear-gradient(180deg, #000 42%, transparent 92%);
}

/* 事例写真：タイトルの下に置く */
.work-photo {
  margin: 12px 0 14px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--brand-tint);
}
.work-photo > svg, .work-photo > img {
  display: block;
  width: 100%; height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.is-locked { background: #FAFBFC; }
.is-locked .work-title { color: var(--muted); }

/* 実名公開：ブランドカラーの上枠＋バッジで「開いている」ことを示す */
.is-open-case { border-top: 3px solid var(--brand); }
.open-badge {
  position: absolute;
  top: 14px; right: 14px;
  background: var(--brand-tint);
  color: var(--brand-deep);
  border: 1px solid #A8CCE4;
  border-radius: 999px;
  padding: 5px 12px;
  font: 700 11px/1 var(--font-mono);
  letter-spacing: .08em;
}


/* ============================================================
   50. 訴求転換にともなうデザイン強化
   ヒーローの大型タイポ／事例の濃色ショーケース化／パッケージ動線／
   実践者セクションのサブ情報化
   ============================================================ */

/* ---------- ヒーロー：タイポを大きく、主語（売れる仕組み）にマーカー ---------- */
html:lang(ja) .hero .hero-title {
  font: 700 clamp(40px, 5vw, 68px)/1.14 var(--font-display);
  letter-spacing: -0.012em;
}
.hero-title .word:first-child {
  background: linear-gradient(transparent 62%, rgba(72,131,174,.30) 62%);
  padding: 0 4px;
  margin-left: -4px;
}
.hero-sub { font-weight: 600; }

/* ---------- サービスパッケージ ---------- */
.packs-intro { margin-bottom: var(--s5); }
.packs-intro .lead { margin-top: var(--s3); }
/* パッケージが増えても崩れないグリッド */
.packs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--s3);
}
.pack-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-top: 3px solid var(--brand);
}
.pack-card:hover { transform: translateY(-6px); box-shadow: 0 18px 44px rgba(26,31,38,.12); }
.pack-kicker { font: 500 12px/1 var(--font-mono); letter-spacing: .14em; color: var(--brand-deep); }
.pack-card h4 { font: 700 clamp(20px, 2vw, 24px)/1.35 var(--font-display); letter-spacing: -0.01em; }
.pack-card p { color: var(--muted); }
.pack-btn { margin-top: auto; align-self: flex-start; }

/* ---------- 事例：濃紺のショーケースに（白カードの写真と数字が浮き上がる） ---------- */
.case {
  background:
    radial-gradient(820px 460px at 90% 6%, rgba(127,176,211,.28) 0%, rgba(127,176,211,0) 60%),
    radial-gradient(640px 400px at 4% 96%, rgba(72,131,174,.34) 0%, rgba(72,131,174,0) 58%),
    linear-gradient(135deg, #14202B 0%, #1E4568 54%, #2E6084 100%);
}
.case .section-label { border-bottom-color: #7FB0D3; }
.case .section-label .num { color: #A8CCE4; }
.case .section-label .label-title { color: #fff; }
.case .case-body h3 { color: #fff; }
.case .case-lead { color: #C9DCEB; }
.case .btn-primary:hover { background: #14202B; }

/* 白カード（GRANDPYRAMID）内のタグは濃色で読めるように */
.case-sub .case-tags span {
  color: var(--brand-deep);
  background: var(--brand-tint);
  border-color: #A8CCE4;
}

/* 使った施策タグ（SNSの活用が一目で分かる） */
.case-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 12px; }
.case-tags span {
  font: 600 12px/1 var(--font-body);
  color: #EAF3F9;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
  padding: 6px 12px;
}

/* ---------- 実践者の証拠：サブ情報として控えめに ---------- */
.proof-sub-sec { padding-block: 64px; background: var(--bg-alt); }
.proof-mini-label { font: 500 11px/1 var(--font-mono); letter-spacing: .18em; color: var(--brand-deep); }
.proof-mini-head { font: 600 clamp(18px, 1.9vw, 24px)/1.5 var(--font-body); margin: 8px 0 0; }
.proof-sub-sec .proof-intro { margin-bottom: var(--s4); }
.proof-sub-sec .proof-card { padding: var(--s3); gap: 10px; }
.proof-sub-sec .proof-card h4 { font-size: clamp(20px, 2vw, 24px); }
.proof-sub-sec .proof-stat .stat-number { font-size: clamp(24px, 2.4vw, 32px); }


/* ============================================================
   52. 第12弾: FVバッジ／thinkカード刷新／パッケージのワクワク化／メガ階層
   ============================================================ */

/* ---------- FV: タイトル風の掛け合わせバッジ ---------- */
.hero-sub-badge {
  display: inline-block;
  font: 700 clamp(17px, 1.8vw, 22px)/1.4 var(--font-display);
  letter-spacing: .05em;
  color: var(--ink);
  margin-bottom: 24px;
}

/* ---------- HOW WE THINK: 背景に奥行き、カードに番号透かし ---------- */
/* HOW WE THINK と WHAT WE RUN はひと続きの白背景。
   グラデーションは「必要な作業をワンストップで」の見出しの下から始める */
.think { background: #fff; padding-bottom: clamp(30px, 3.6vw, 44px); }
.run.section {
  padding-top: clamp(26px, 3.2vw, 40px);
  background: linear-gradient(180deg, #FFFFFF 0px, #FFFFFF 170px, #EDF3F8 100%);
}
.think-card { border-top: 3px solid var(--brand); }
.think-card { overflow: visible; }
.think-card::before {
  position: absolute;
  top: -30px; right: -10px;
  font: 700 96px/1 var(--font-display);
  color: rgba(72,131,174,.16);
  pointer-events: none;
  z-index: 1;
}
.think-grid .think-card:nth-child(1)::before { content: "01"; }
.think-grid .think-card:nth-child(2)::before { content: "02"; }
.think-grid .think-card:nth-child(3)::before { content: "03"; }
.think-grid .think-card:nth-child(4)::before { content: "04"; }
.think-q {
  font: 600 clamp(20px, 2vw, 25px)/1.45 var(--font-body);
  letter-spacing: -0.01em;
  text-align: left;
  margin-top: 4px;
}
.think-body h4 { display: none; }

/* PC: ホバーで本文がせり上がって出てくる */
@media (hover: hover) and (min-width: 721px) {
  .think-card:hover { transform: translateY(-3px); }
  .think-card:hover .think-body {
    max-height: 560px;
    opacity: 1;
    transform: none;
    transition-delay: .05s;
  }
  .think-card:hover .picto {
    opacity: 0;
    transform: translateY(-26px);
    max-height: 0;
    margin-bottom: 0;
  }
}
/* 開閉はゆっくり・控えめに */
.think-body {
  transition: max-height .8s var(--ease-out), opacity .65s var(--ease-out), transform .7s var(--ease-out);
}
.think-card .picto {
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out),
              max-height .65s var(--ease-out), margin-bottom .65s var(--ease-out);
}

/* ---------- パッケージ：色のブロブ＋アイコン＋番号で楽しく ---------- */
.pack-card { border-top: 0; padding: 30px 28px; }
.pack-blob {
  position: absolute;
  top: -58px; right: -58px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 36%, rgba(127,176,211,.5) 0%, rgba(127,176,211,0) 70%);
  transition: transform .5s var(--ease-out);
  pointer-events: none;
}
.packs-grid .pack-card:nth-child(2) .pack-blob {
  background: radial-gradient(circle at 36% 36%, rgba(79,168,149,.45) 0%, rgba(79,168,149,0) 70%);
}
.pack-card:hover .pack-blob { transform: scale(1.4); }
.pack-ico { display: block; width: 46px; height: 46px; }
.pack-ico svg { display: block; width: 100%; height: 100%; }
.pack-num { font: 700 11px/1 var(--font-mono); letter-spacing: .24em; color: var(--brand); }
.pack-card h4 { font-size: clamp(22px, 2.2vw, 27px); }
.pack-btn .arrow, .pack-btn span { transition: transform .3s var(--ease-out); display: inline-block; }
.pack-btn:hover span { transform: translateX(5px); }

/* ---------- メガメニュー：階層と遊び心 ---------- */
.mega-foot { flex-direction: column; align-items: flex-end; gap: 4px; }
.mega-foot-main { display: flex; gap: 6px; }
.mega-foot .mega-foot-sub { font-size: 11.5px; opacity: .6; }
.mega-foot .mega-foot-sub:hover { opacity: 1; }
.mega-list a { position: relative; transition: padding .22s var(--ease-out), background .2s, color .2s; }
.mega-list a::before {
  content: "\2192";
  position: absolute;
  left: 8px;
  opacity: 0;
  transform: translateX(-5px);
  transition: opacity .2s, transform .2s;
  color: var(--brand);
}
.mega-list a:hover { padding-left: 28px; }
.mega-list a:hover::before { opacity: 1; transform: none; }


/* ============================================================
   53. 第13弾: ピック&チューズ注記／Aboutの数字刷新／ピラーナビ／Contact
   ============================================================ */

/* ---------- フッター：自社事業の1列を追加した4列構成 ---------- */
.footer-grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; }
.footer-note { display: block; font: 500 12px/1.7 var(--font-body); opacity: .65; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- About: OUR STRENGTH をパンチのある濃紺セクションに ---------- */
#strength {
  background:
    radial-gradient(700px 420px at 92% 8%, rgba(127,176,211,.25) 0%, rgba(127,176,211,0) 60%),
    linear-gradient(135deg, #14202B 0%, #1E4568 62%, #2E6084 120%);
}
#strength .section-label { border-bottom-color: #7FB0D3; }
#strength .section-label .num { color: #A8CCE4; }
#strength .section-label .label-title { color: #fff; }
#strength .stat-card { border: 1px solid rgba(255,255,255,.22); }
/* 数字カードは横4列。数字の右にタイトル（自然折返し） */
.stats-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .stats-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .stats-row { grid-template-columns: 1fr; } }

/* ---------- Services: 3本柱ナビを大きく・丸く・気持ちよく ---------- */
.subnav-pillars { gap: 16px; align-items: center; }
.subnav-pillars a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border: 2px solid var(--brand);
  border-radius: 999px;
  background: #fff;
  padding: 15px 28px;
  font: 700 15.5px/1 var(--font-body);
  color: var(--ink);
  box-shadow: 0 8px 22px rgba(72,131,174,.16);
  transition: transform .3s var(--ease-out), background .25s, color .25s, box-shadow .3s;
}
.subnav-pillars a:hover {
  background: var(--brand-strong);
  color: #fff;
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(46,96,132,.32);
}
.subnav-pillars a .num { font: 700 12px/1 var(--font-mono); color: var(--brand); }
.subnav-pillars a:hover .num { color: #A8CCE4; }
.pillar-arrow { color: #A8CCE4; }

/* ---------- Services: テストマーケ・AI帯の本文をくっきり ---------- */
.engagement-steps p { color: var(--ink); }
.ai-strip p { color: var(--ink); }

/* ---------- Contact: 期待感の出る導入 ---------- */
.contact-hero {
  background:
    radial-gradient(760px 420px at 88% 0%, rgba(127,176,211,.35) 0%, rgba(127,176,211,0) 60%),
    linear-gradient(135deg, #14202B 0%, #1E4568 56%, #2E6084 100%);
}
.contact-hero .eyebrow { color: #A8CCE4; }
.contact-hero h1 { color: #fff; }
.contact-hero .lead { color: #C9DCEB; margin-top: var(--s3); }

/* フォームの箱と1枚目のカードの上端の線を揃える */
.contact-points { display: grid; gap: 12px; margin-top: 0 !important; }
.contact-points li {
  display: grid;
  grid-template-columns: 46px 1fr;
  grid-template-rows: auto auto;
  column-gap: 14px;
  row-gap: 2px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: 0 8px 22px rgba(26,31,38,.06);
}
/* アイコンは背景なしの細線ピクトグラム（シンプルで上質に） */
.contact-points .cp-ico {
  grid-row: 1 / span 2;
  width: 40px; height: 40px;
  background: none;
  border-radius: 0;
  display: grid;
  place-items: start center;
  padding-top: 2px;
}
.contact-points .cp-ico svg { width: 30px; height: 30px; }
.contact-points b { font: 700 15.5px/1.4 var(--font-body); }
.contact-points li > span:not(.cp-ico) { color: var(--muted); font-size: 13.5px; line-height: 1.7; }


/* ============================================================
   54. 第14弾: うっすら下線／価値観カードの格上げ／水たまりナビ／浮遊ブロブ
   ============================================================ */

/* ---------- 「成果までを、伴走支援」のうっすら下線 ---------- */
.ul-soft {
  display: inline-block;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(72,131,174,.28);
}

/* ---------- About: 価値観4カードを数字が飛び出すスタイルに格上げ ---------- */
.mission-values .card {
  position: relative;
  overflow: visible;
  border-top: 3px solid var(--brand);
  background: linear-gradient(180deg, #FFFFFF 0%, #F2F7FB 100%);
}
.mission-values .card::before {
  position: absolute;
  top: -28px; right: -8px;
  font: 700 88px/1 var(--font-display);
  color: rgba(72,131,174,.14);
  pointer-events: none;
}
.mission-values .card:nth-child(1)::before { content: "01"; }
.mission-values .card:nth-child(2)::before { content: "02"; }
.mission-values .card:nth-child(3)::before { content: "03"; }
.mission-values .card:nth-child(4)::before { content: "04"; }
.mission-values .card .card-num { display: none; }
.mission-values .card:hover { transform: translateY(-5px); box-shadow: 0 16px 40px rgba(26,31,38,.12); }


/* ---------- 浮遊ブロブ：スクロール中もゆっくり動く背景 ---------- */
@keyframes blob-drift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(26px, -20px) scale(1.07); }
  100% { transform: translate(-14px, 12px) scale(.97); }
}
.hero { position: relative; }
.hero::after {
  content: "";
  position: absolute;
  top: 6%; right: 5%;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, rgba(127,176,211,.34) 0%, rgba(127,176,211,0) 70%);
  filter: blur(6px);
  animation: blob-drift 16s ease-in-out infinite alternate;
  pointer-events: none;
}
.hero .container { position: relative; z-index: 1; }

.packs { position: relative; overflow: hidden; }
.packs::before {
  content: "";
  position: absolute;
  left: -90px; bottom: -120px;
  width: 440px; height: 440px;
  border-radius: 50%;
  background: radial-gradient(circle at 45% 45%, rgba(79,168,149,.22) 0%, rgba(79,168,149,0) 70%);
  animation: blob-drift 20s ease-in-out infinite alternate-reverse;
  pointer-events: none;
}
.packs .container { position: relative; z-index: 1; }

.run.section { position: relative; overflow: hidden; }
.run.section::before {
  content: "";
  position: absolute;
  right: -110px; top: 40px;
  width: 380px; height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle at 45% 45%, rgba(72,131,174,.18) 0%, rgba(72,131,174,0) 70%);
  animation: blob-drift 18s ease-in-out infinite alternate;
  pointer-events: none;
}
.run.section .container { position: relative; z-index: 1; }

@media (max-width: 720px) {
  .hero::after { width: 240px; height: 240px; }
  .subnav-pillars a { padding: 16px 26px; font-size: 15.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero::after, .packs::before, .run.section::before { animation: none; }
}


/* ============================================================
   55. 第15弾: しずくの正円ナビ＋波紋／柱の写真エリア／VOICESロゴ
   ============================================================ */

/* ---------- 3本柱ナビ：白い正円の「しずく」。波紋が広がって3つをつなぐ ---------- */
.subnav-pillars { gap: 44px; align-items: center; position: relative; }
.subnav-pillars a {
  position: relative;
  flex: 0 0 156px;
  width: 156px; height: 156px;
  min-width: 0;
  padding: 0;
  border-radius: 50%;
  border: 2px solid var(--brand);
  background: #fff;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font: 700 16.5px/1.3 var(--font-body);
  text-align: center;
  box-shadow: 0 10px 26px rgba(72,131,174,.18);
  transition: transform .35s var(--ease-out), box-shadow .35s;
}
.subnav-pillars a:hover {
  background: #fff;
  color: var(--ink);
  border-radius: 50%;
  transform: translateY(-6px);
  box-shadow: 0 18px 38px rgba(46,96,132,.26);
}
.subnav-pillars a .num { font: 700 13px/1 var(--font-mono); color: var(--brand); }
.subnav-pillars a:hover .num { color: var(--brand); }
/* しずくの波紋：正円のまま外へ広がって消える */
.subnav-pillars a::before,
.subnav-pillars a::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 1.5px solid rgba(72,131,174,.5);
  animation: ripple 3.8s ease-out infinite;
  pointer-events: none;
}
.subnav-pillars a::after { animation-delay: 1.9s; }
.subnav-pillars a:nth-of-type(2)::before { animation-delay: .6s; }
.subnav-pillars a:nth-of-type(2)::after { animation-delay: 2.5s; }
.subnav-pillars a:nth-of-type(3)::before { animation-delay: 1.2s; }
.subnav-pillars a:nth-of-type(3)::after { animation-delay: 3.1s; }
@keyframes ripple {
  0%   { transform: scale(1); opacity: .75; }
  100% { transform: scale(1.7); opacity: 0; }
}
/* 矢印は廃止（波紋がつながりを表す） */
.pillar-arrow { display: none; }

/* （波紋の輪は .svc-top が一枚で描く） */

@media (max-width: 720px) {
  .subnav-pillars { gap: 18px; justify-content: center; }
  .subnav-pillars a { flex: 0 0 108px; width: 108px; height: 108px; min-width: 0; font-size: 13px; gap: 4px; }
  .subnav-pillars a .num { font-size: 11px; }
}

/* ---------- 柱の写真エリア：03は2枚を縦に ---------- */
.pl-visual { display: grid; gap: 14px; }
#production .pl-visual > svg, #production .pl-visual > img { aspect-ratio: 16 / 10; }
#execution .pl-visual > svg, #execution .pl-visual > img { aspect-ratio: 3 / 2; }

/* ---------- CLIENT VOICES: カード右上のロゴ枠 ---------- */
.partner-head { justify-content: space-between; align-items: center; gap: var(--s2); }
.partner-logo { flex: 0 0 auto; width: 104px; opacity: .75; }
.partner-logo svg { display: block; width: 100%; height: auto; }
@media (max-width: 720px) { .partner-logo { width: 88px; } }

@media (prefers-reduced-motion: reduce) {
  .subnav-pillars a::before, .subnav-pillars a::after { animation: none; opacity: 0; }
}


/* ============================================================
   56. 第16弾: 吹き出しの形／写真枠タイル／しずく大型化＋矢印連結／
   think番号削除・中央揃え／FV余白／フッター小書き
   ============================================================ */

/* ---------- ジャーニー左：ちゃんと「吹き出し」に見える丸い形 ---------- */
.jm-state h4 {
  border-radius: 30px;
  padding: 16px 26px;
  text-align: center;
  min-width: 170px;
  max-width: 330px;
  font-size: 14.5px;
}
/* すり鉢（砂時計）の細りに沿って、吹き出しをファネルの縁へ寄せる。
   2→3→4と右へ寄り、5でくびれが開くぶん少し戻る */
.jm-row:nth-child(2) .jm-state { transform: translateX(34px); }
.jm-row:nth-child(3) .jm-state { transform: translateX(74px); }
.jm-row:nth-child(4) .jm-state { transform: translateX(114px); }
.jm-row:nth-child(5) .jm-state { transform: translateX(96px); }
.jm-row:nth-child(6) .jm-state { transform: translateX(40px); }
@media (max-width: 900px) {
  .jm-row .jm-state { transform: none !important; }
  .jm-state h4 { max-width: 100%; }
}

/* ---------- カードグリッド内の写真枠 ----------
   写真は行の高さを引き伸ばさない：テキストのカードが決めた行の高さに
   写真のほうが合わせる（absoluteで面を埋める） */
.photo-card { padding: 0; overflow: hidden; border-top: 0; position: relative; min-height: 190px; }
.photo-card > svg, .photo-card > img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.photo-wide { grid-column: 1 / -1; min-height: 0; }
.photo-wide > svg, .photo-wide > img { position: static; height: auto; aspect-ratio: 16 / 5; display: block; }
@media (max-width: 720px) {
  .photo-card { min-height: 170px; }
  .photo-wide > svg, .photo-wide > img { aspect-ratio: 16 / 9; }
}

/* ---------- しずく：大きく・中央に・矢印でつなぐ ---------- */
.subnav-pillars { justify-content: center; gap: 26px; }
.subnav-pillars a {
  flex: 0 0 212px;
  width: 212px; height: 212px;
  gap: 10px;
  font-size: 18px;
}
.subnav-pillars a .num { font: 700 clamp(32px, 3vw, 42px)/1 var(--font-display); color: var(--brand); }
.pillar-arrow {
  display: block;
  width: 58px;
  color: var(--brand);
  flex: 0 0 auto;
}
.pillar-arrow svg { width: 100%; height: 22px; display: block; }
@media (max-width: 720px) {
  .subnav-pillars { gap: 10px; }
  .subnav-pillars a { flex: 0 0 104px; width: 104px; height: 104px; font-size: 12.5px; gap: 4px; }
  .subnav-pillars a .num { font-size: 22px; }
  .pillar-arrow { width: 22px; }
  .pillar-arrow svg { height: 14px; }
}

/* ---------- HOW WE THINK: 番号透かしを削除し、見出しは中央揃え（開くと左揃え） ---------- */
.think-grid .think-card:nth-child(1)::before,
.think-grid .think-card:nth-child(2)::before,
.think-grid .think-card:nth-child(3)::before,
.think-grid .think-card:nth-child(4)::before { content: none; }
.think-q { text-align: center; }
.think-card.is-open .think-q { text-align: left; }
@media (hover: hover) and (min-width: 721px) {
  .think-card:hover .think-q { text-align: left; }
}

/* ---------- FV: スマホは見出しの上に余白、サブの2つ目の改行は解除 ---------- */
@media (max-width: 720px) {
  .hero .hero-title { margin-top: 20px; }
  .br-pc { display: none; }
}

/* ---------- フッター：小書き ---------- */
.footer-small { font: 500 11.5px/1.6 var(--font-body); opacity: .7; }


/* ============================================================
   57. 第17弾: テストマーケ背景を一段濃く／ヘッダーの追従アンダーライン
   ============================================================ */
#engagement { background: #E2ECF4; }

/* ヘッダーのホバー演出はなし（一重の下線のみ） */


/* ============================================================
   58. 第18弾: 写真の枠を全廃・自由配置写真・等高カード・モバイルしずく縦連結
   ============================================================ */

/* ---------- 写真に枠をつけない（カードの線・背景・影を消す） ---------- */
.photo-card, .photo-card:hover {
  border: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}
.photo-card::after { content: none; }
.pl-visual { background: none; border: 0; box-shadow: none; }

/* ---------- 実行・運用：全ボックスを同じ高さに ---------- */
#execution .pillar-grid { grid-auto-rows: 1fr; }

/* ---------- 01の自由配置写真：ボックスを無視して大きめに重ねる ---------- */
.free-photo {
  position: absolute;
  right: calc(-1 * var(--gutter));
  bottom: -48px;
  width: min(42%, 440px);
  margin: 0;
  z-index: 2;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(20,32,43,.28);
}
.free-photo > svg, .free-photo > img {
  display: block;
  width: 100%; height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
@media (max-width: 1024px) {
  .free-photo { position: static; width: 100%; margin-top: var(--s3); box-shadow: 0 16px 40px rgba(20,32,43,.18); }
  .free-photo > svg, .free-photo > img { aspect-ratio: 16 / 10; }
}

/* ---------- 文字を最優先：柱リードのコピーの後ろをぼかした板に ---------- */
.pillar-lead .pl-copy {
  position: relative;
  background: rgba(255,255,255,.74);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-radius: 16px;
  padding: 24px 26px;
}

/* ---------- モバイル：しずくを縦に並べ、矢印で上下をつなぐ ---------- */
@media (max-width: 720px) {
  .subnav-pillars { flex-direction: column; align-items: center; gap: 2px; }
  .subnav-pillars a { flex: 0 0 auto; width: 122px; height: 122px; font-size: 13.5px; gap: 5px; }
  .subnav-pillars a .num { font-size: 26px; }
  .pillar-arrow { width: 22px; transform: rotate(90deg); margin: 4px 0; }
  .pillar-arrow svg { height: 15px; }
}


/* ============================================================
   59. 第19弾: 模様の連続性／等高VOICES／スマホしずく矢印の作り直し ほか
   ============================================================ */

/* ---------- 03の模様（ドット）をサービスパッケージまで途切れさせない ---------- */
#packages {
  background:
    radial-gradient(circle, rgba(46,96,132,.11) 1px, transparent 1.4px) 0 0 / 26px 26px
    #fff;
}

/* ---------- HOME: 「必要な作業をワンストップで」の下に一呼吸 ---------- */
#business .run-intro { margin-bottom: clamp(44px, 5.4vw, 68px); }

/* ---------- CLIENT VOICES: 3カードを1列に並べ、高さを一番大きいものに揃える ---------- */
.partners-grid { align-items: stretch; }
.partner-card { height: 100%; }
@media (min-width: 1025px) {
  .partners-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- AI帯のスマホ展開：白へ溶けるフェードが背景色と合わず崩れるので廃止 ---------- */
.ai-strip .clamp::after { content: none; }

/* ---------- スマホ：しずくを大きく、矢印は素直な下向きに作り直し ---------- */
@media (max-width: 720px) {
  .subnav-pillars a { width: 150px; height: 150px; font-size: 15px; gap: 6px; }
  .subnav-pillars a .num { font-size: 30px; }
  .pillar-arrow {
    width: auto; height: 30px;
    transform: none;
    position: relative;
    margin: 2px 0;
  }
  .pillar-arrow svg { display: none; }
  .pillar-arrow::before {
    content: "";
    position: absolute;
    left: 50%; top: 0;
    width: 2px; height: 16px;
    margin-left: -1px;
    background: var(--brand);
  }
  .pillar-arrow::after {
    content: "";
    position: absolute;
    left: 50%; top: 14px;
    margin-left: -8px;
    border: 8px solid transparent;
    border-top: 10px solid var(--brand);
    border-bottom: 0;
  }
}


/* ============================================================
   60. 第21弾: 戦略の写真を下へ伸ばす／ヒーロー装飾の統一
   ============================================================ */
/* 写真は行の高さ＋約2cmぶん下へはみ出す（横幅は据え置き） */
#strategy .photo-card { overflow: visible; }
#strategy .photo-card > svg, #strategy .photo-card > img {
  height: calc(100% + 78px);
  z-index: 1;
  border-radius: 14px;
  box-shadow: 0 22px 48px rgba(20,32,43,.18);
}
#strategy .pillar-grid { margin-bottom: 72px; }
@media (max-width: 720px) {
  #strategy .photo-card { overflow: hidden; }
  #strategy .photo-card > svg, #strategy .photo-card > img { height: 100%; box-shadow: none; }
  #strategy .pillar-grid { margin-bottom: 0; }
}


/* ============================================================
   61. 第22弾: ヒーロー〜01を一枚の背景で（境界の線を根絶）
   ============================================================ */
.svc-top {
  position: relative;
  background:
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 320'%3E%3Cg fill='none' stroke='%23BCD5E7' stroke-width='2'%3E%3Cpath d='M18 302H122V218h88V134h92'/%3E%3Cpath d='M18 250h56v-64h70'/%3E%3Cpath d='M60 302v-36'/%3E%3C/g%3E%3Cg fill='%23BCD5E7'%3E%3Ccircle cx='122' cy='218' r='5'/%3E%3Ccircle cx='210' cy='134' r='5'/%3E%3Ccircle cx='144' cy='186' r='5'/%3E%3Ccircle cx='302' cy='134' r='5'/%3E%3Crect x='12' y='296' width='12' height='12'/%3E%3C/g%3E%3C/svg%3E") right -48px top 28px / 250px auto no-repeat,
    radial-gradient(circle, rgba(72,131,174,.11) 1px, transparent 1.4px) 0 0 / 24px 24px;
}
/* 水面の輪：大きな水たまり2つがゆったり広がる */
.svc-top::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 28% 340px, transparent 0 150px, rgba(72,131,174,0.130) 150px 152px, transparent 152px 300px, rgba(72,131,174,0.094) 300px 302px, transparent 302px 450px, rgba(72,131,174,0.059) 450px 452px, transparent 452px),
    radial-gradient(circle at 76% 520px, transparent 0 190px, rgba(72,131,174,0.110) 190px 192px, transparent 192px 380px, rgba(72,131,174,0.079) 380px 382px, transparent 382px 570px, rgba(72,131,174,0.050) 570px 572px, transparent 572px);
  pointer-events: none;
}
.svc-top > * { position: relative; z-index: 1; }
@media (max-width: 720px) {
  /* モバイルも同じ多発リング（そのまま縮小表示） */
}


/* ============================================================
   62. 第23弾: Aboutのドット世界地図／ボタンの立体感
   ============================================================ */

/* ---------- About: 「世界に伝える」をドットの世界地図で下支え ---------- */
.about-hero {
  position: relative;
  background:
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 256'%3E%3Cg fill='%237FB0D3' fill-opacity='.42'%3E%3Ccircle cx='72' cy='24' r='3.4'/%3E%3Ccircle cx='88' cy='24' r='3.4'/%3E%3Ccircle cx='280' cy='24' r='3.4'/%3E%3Ccircle cx='296' cy='24' r='3.4'/%3E%3Ccircle cx='312' cy='24' r='3.4'/%3E%3Ccircle cx='392' cy='24' r='3.4'/%3E%3Ccircle cx='408' cy='24' r='3.4'/%3E%3Ccircle cx='40' cy='40' r='3.4'/%3E%3Ccircle cx='56' cy='40' r='3.4'/%3E%3Ccircle cx='72' cy='40' r='3.4'/%3E%3Ccircle cx='88' cy='40' r='3.4'/%3E%3Ccircle cx='104' cy='40' r='3.4'/%3E%3Ccircle cx='120' cy='40' r='3.4'/%3E%3Ccircle cx='248' cy='40' r='3.4'/%3E%3Ccircle cx='264' cy='40' r='3.4'/%3E%3Ccircle cx='280' cy='40' r='3.4'/%3E%3Ccircle cx='296' cy='40' r='3.4'/%3E%3Ccircle cx='312' cy='40' r='3.4'/%3E%3Ccircle cx='328' cy='40' r='3.4'/%3E%3Ccircle cx='344' cy='40' r='3.4'/%3E%3Ccircle cx='360' cy='40' r='3.4'/%3E%3Ccircle cx='408' cy='40' r='3.4'/%3E%3Ccircle cx='424' cy='40' r='3.4'/%3E%3Ccircle cx='440' cy='40' r='3.4'/%3E%3Ccircle cx='456' cy='40' r='3.4'/%3E%3Ccircle cx='472' cy='40' r='3.4'/%3E%3Ccircle cx='488' cy='40' r='3.4'/%3E%3Ccircle cx='24' cy='56' r='3.4'/%3E%3Ccircle cx='40' cy='56' r='3.4'/%3E%3Ccircle cx='56' cy='56' r='3.4'/%3E%3Ccircle cx='72' cy='56' r='3.4'/%3E%3Ccircle cx='88' cy='56' r='3.4'/%3E%3Ccircle cx='104' cy='56' r='3.4'/%3E%3Ccircle cx='120' cy='56' r='3.4'/%3E%3Ccircle cx='136' cy='56' r='3.4'/%3E%3Ccircle cx='232' cy='56' r='3.4'/%3E%3Ccircle cx='248' cy='56' r='3.4'/%3E%3Ccircle cx='264' cy='56' r='3.4'/%3E%3Ccircle cx='280' cy='56' r='3.4'/%3E%3Ccircle cx='296' cy='56' r='3.4'/%3E%3Ccircle cx='312' cy='56' r='3.4'/%3E%3Ccircle cx='328' cy='56' r='3.4'/%3E%3Ccircle cx='344' cy='56' r='3.4'/%3E%3Ccircle cx='360' cy='56' r='3.4'/%3E%3Ccircle cx='376' cy='56' r='3.4'/%3E%3Ccircle cx='392' cy='56' r='3.4'/%3E%3Ccircle cx='424' cy='56' r='3.4'/%3E%3Ccircle cx='440' cy='56' r='3.4'/%3E%3Ccircle cx='456' cy='56' r='3.4'/%3E%3Ccircle cx='472' cy='56' r='3.4'/%3E%3Ccircle cx='488' cy='56' r='3.4'/%3E%3Ccircle cx='40' cy='72' r='3.4'/%3E%3Ccircle cx='56' cy='72' r='3.4'/%3E%3Ccircle cx='72' cy='72' r='3.4'/%3E%3Ccircle cx='88' cy='72' r='3.4'/%3E%3Ccircle cx='104' cy='72' r='3.4'/%3E%3Ccircle cx='120' cy='72' r='3.4'/%3E%3Ccircle cx='136' cy='72' r='3.4'/%3E%3Ccircle cx='216' cy='72' r='3.4'/%3E%3Ccircle cx='232' cy='72' r='3.4'/%3E%3Ccircle cx='248' cy='72' r='3.4'/%3E%3Ccircle cx='264' cy='72' r='3.4'/%3E%3Ccircle cx='280' cy='72' r='3.4'/%3E%3Ccircle cx='296' cy='72' r='3.4'/%3E%3Ccircle cx='312' cy='72' r='3.4'/%3E%3Ccircle cx='328' cy='72' r='3.4'/%3E%3Ccircle cx='344' cy='72' r='3.4'/%3E%3Ccircle cx='360' cy='72' r='3.4'/%3E%3Ccircle cx='376' cy='72' r='3.4'/%3E%3Ccircle cx='392' cy='72' r='3.4'/%3E%3Ccircle cx='408' cy='72' r='3.4'/%3E%3Ccircle cx='424' cy='72' r='3.4'/%3E%3Ccircle cx='440' cy='72' r='3.4'/%3E%3Ccircle cx='456' cy='72' r='3.4'/%3E%3Ccircle cx='472' cy='72' r='3.4'/%3E%3Ccircle cx='488' cy='72' r='3.4'/%3E%3Ccircle cx='504' cy='72' r='3.4'/%3E%3Ccircle cx='520' cy='72' r='3.4'/%3E%3Ccircle cx='56' cy='88' r='3.4'/%3E%3Ccircle cx='72' cy='88' r='3.4'/%3E%3Ccircle cx='88' cy='88' r='3.4'/%3E%3Ccircle cx='104' cy='88' r='3.4'/%3E%3Ccircle cx='120' cy='88' r='3.4'/%3E%3Ccircle cx='200' cy='88' r='3.4'/%3E%3Ccircle cx='216' cy='88' r='3.4'/%3E%3Ccircle cx='232' cy='88' r='3.4'/%3E%3Ccircle cx='248' cy='88' r='3.4'/%3E%3Ccircle cx='264' cy='88' r='3.4'/%3E%3Ccircle cx='280' cy='88' r='3.4'/%3E%3Ccircle cx='296' cy='88' r='3.4'/%3E%3Ccircle cx='312' cy='88' r='3.4'/%3E%3Ccircle cx='328' cy='88' r='3.4'/%3E%3Ccircle cx='344' cy='88' r='3.4'/%3E%3Ccircle cx='360' cy='88' r='3.4'/%3E%3Ccircle cx='376' cy='88' r='3.4'/%3E%3Ccircle cx='392' cy='88' r='3.4'/%3E%3Ccircle cx='408' cy='88' r='3.4'/%3E%3Ccircle cx='424' cy='88' r='3.4'/%3E%3Ccircle cx='440' cy='88' r='3.4'/%3E%3Ccircle cx='456' cy='88' r='3.4'/%3E%3Ccircle cx='472' cy='88' r='3.4'/%3E%3Ccircle cx='488' cy='88' r='3.4'/%3E%3Ccircle cx='504' cy='88' r='3.4'/%3E%3Ccircle cx='520' cy='88' r='3.4'/%3E%3Ccircle cx='536' cy='88' r='3.4'/%3E%3Ccircle cx='72' cy='104' r='3.4'/%3E%3Ccircle cx='88' cy='104' r='3.4'/%3E%3Ccircle cx='104' cy='104' r='3.4'/%3E%3Ccircle cx='200' cy='104' r='3.4'/%3E%3Ccircle cx='216' cy='104' r='3.4'/%3E%3Ccircle cx='232' cy='104' r='3.4'/%3E%3Ccircle cx='248' cy='104' r='3.4'/%3E%3Ccircle cx='264' cy='104' r='3.4'/%3E%3Ccircle cx='280' cy='104' r='3.4'/%3E%3Ccircle cx='296' cy='104' r='3.4'/%3E%3Ccircle cx='312' cy='104' r='3.4'/%3E%3Ccircle cx='328' cy='104' r='3.4'/%3E%3Ccircle cx='344' cy='104' r='3.4'/%3E%3Ccircle cx='360' cy='104' r='3.4'/%3E%3Ccircle cx='376' cy='104' r='3.4'/%3E%3Ccircle cx='392' cy='104' r='3.4'/%3E%3Ccircle cx='408' cy='104' r='3.4'/%3E%3Ccircle cx='424' cy='104' r='3.4'/%3E%3Ccircle cx='440' cy='104' r='3.4'/%3E%3Ccircle cx='456' cy='104' r='3.4'/%3E%3Ccircle cx='472' cy='104' r='3.4'/%3E%3Ccircle cx='488' cy='104' r='3.4'/%3E%3Ccircle cx='504' cy='104' r='3.4'/%3E%3Ccircle cx='520' cy='104' r='3.4'/%3E%3Ccircle cx='88' cy='120' r='3.4'/%3E%3Ccircle cx='104' cy='120' r='3.4'/%3E%3Ccircle cx='216' cy='120' r='3.4'/%3E%3Ccircle cx='232' cy='120' r='3.4'/%3E%3Ccircle cx='248' cy='120' r='3.4'/%3E%3Ccircle cx='264' cy='120' r='3.4'/%3E%3Ccircle cx='280' cy='120' r='3.4'/%3E%3Ccircle cx='296' cy='120' r='3.4'/%3E%3Ccircle cx='312' cy='120' r='3.4'/%3E%3Ccircle cx='360' cy='120' r='3.4'/%3E%3Ccircle cx='376' cy='120' r='3.4'/%3E%3Ccircle cx='392' cy='120' r='3.4'/%3E%3Ccircle cx='408' cy='120' r='3.4'/%3E%3Ccircle cx='424' cy='120' r='3.4'/%3E%3Ccircle cx='440' cy='120' r='3.4'/%3E%3Ccircle cx='456' cy='120' r='3.4'/%3E%3Ccircle cx='472' cy='120' r='3.4'/%3E%3Ccircle cx='488' cy='120' r='3.4'/%3E%3Ccircle cx='104' cy='136' r='3.4'/%3E%3Ccircle cx='232' cy='136' r='3.4'/%3E%3Ccircle cx='248' cy='136' r='3.4'/%3E%3Ccircle cx='264' cy='136' r='3.4'/%3E%3Ccircle cx='280' cy='136' r='3.4'/%3E%3Ccircle cx='296' cy='136' r='3.4'/%3E%3Ccircle cx='376' cy='136' r='3.4'/%3E%3Ccircle cx='392' cy='136' r='3.4'/%3E%3Ccircle cx='408' cy='136' r='3.4'/%3E%3Ccircle cx='424' cy='136' r='3.4'/%3E%3Ccircle cx='440' cy='136' r='3.4'/%3E%3Ccircle cx='456' cy='136' r='3.4'/%3E%3Ccircle cx='472' cy='136' r='3.4'/%3E%3Ccircle cx='120' cy='152' r='3.4'/%3E%3Ccircle cx='136' cy='152' r='3.4'/%3E%3Ccircle cx='152' cy='152' r='3.4'/%3E%3Ccircle cx='248' cy='152' r='3.4'/%3E%3Ccircle cx='264' cy='152' r='3.4'/%3E%3Ccircle cx='280' cy='152' r='3.4'/%3E%3Ccircle cx='296' cy='152' r='3.4'/%3E%3Ccircle cx='392' cy='152' r='3.4'/%3E%3Ccircle cx='408' cy='152' r='3.4'/%3E%3Ccircle cx='424' cy='152' r='3.4'/%3E%3Ccircle cx='440' cy='152' r='3.4'/%3E%3Ccircle cx='456' cy='152' r='3.4'/%3E%3Ccircle cx='104' cy='168' r='3.4'/%3E%3Ccircle cx='120' cy='168' r='3.4'/%3E%3Ccircle cx='136' cy='168' r='3.4'/%3E%3Ccircle cx='152' cy='168' r='3.4'/%3E%3Ccircle cx='168' cy='168' r='3.4'/%3E%3Ccircle cx='264' cy='168' r='3.4'/%3E%3Ccircle cx='280' cy='168' r='3.4'/%3E%3Ccircle cx='296' cy='168' r='3.4'/%3E%3Ccircle cx='408' cy='168' r='3.4'/%3E%3Ccircle cx='424' cy='168' r='3.4'/%3E%3Ccircle cx='440' cy='168' r='3.4'/%3E%3Ccircle cx='520' cy='168' r='3.4'/%3E%3Ccircle cx='536' cy='168' r='3.4'/%3E%3Ccircle cx='88' cy='184' r='3.4'/%3E%3Ccircle cx='104' cy='184' r='3.4'/%3E%3Ccircle cx='120' cy='184' r='3.4'/%3E%3Ccircle cx='136' cy='184' r='3.4'/%3E%3Ccircle cx='152' cy='184' r='3.4'/%3E%3Ccircle cx='168' cy='184' r='3.4'/%3E%3Ccircle cx='184' cy='184' r='3.4'/%3E%3Ccircle cx='280' cy='184' r='3.4'/%3E%3Ccircle cx='296' cy='184' r='3.4'/%3E%3Ccircle cx='424' cy='184' r='3.4'/%3E%3Ccircle cx='440' cy='184' r='3.4'/%3E%3Ccircle cx='504' cy='184' r='3.4'/%3E%3Ccircle cx='520' cy='184' r='3.4'/%3E%3Ccircle cx='536' cy='184' r='3.4'/%3E%3Ccircle cx='552' cy='184' r='3.4'/%3E%3Ccircle cx='104' cy='200' r='3.4'/%3E%3Ccircle cx='120' cy='200' r='3.4'/%3E%3Ccircle cx='136' cy='200' r='3.4'/%3E%3Ccircle cx='152' cy='200' r='3.4'/%3E%3Ccircle cx='168' cy='200' r='3.4'/%3E%3Ccircle cx='184' cy='200' r='3.4'/%3E%3Ccircle cx='296' cy='200' r='3.4'/%3E%3Ccircle cx='520' cy='200' r='3.4'/%3E%3Ccircle cx='536' cy='200' r='3.4'/%3E%3Ccircle cx='120' cy='216' r='3.4'/%3E%3Ccircle cx='136' cy='216' r='3.4'/%3E%3Ccircle cx='152' cy='216' r='3.4'/%3E%3Ccircle cx='168' cy='216' r='3.4'/%3E%3Ccircle cx='136' cy='232' r='3.4'/%3E%3Ccircle cx='152' cy='232' r='3.4'/%3E%3C/g%3E%3C/svg%3E") right -40px center / 640px auto no-repeat,
    linear-gradient(180deg, #FFFFFF 0%, #F7FAFC 100%);
}
.about-hero .container { position: relative; z-index: 1; }
@media (max-width: 720px) {
  .about-hero { background-size: 420px auto, auto; background-position: right -70px center, 0 0; }
}

/* ---------- ボタン：ほんの少しの立体感と色 ---------- */
.btn-primary {
  background: linear-gradient(180deg, #4E8CB8 0%, #3D74A0 55%, #35688F 100%);
  box-shadow: 0 6px 14px rgba(46,96,132,.28), inset 0 1px 0 rgba(255,255,255,.28);
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), background .25s;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(46,96,132,.34), inset 0 1px 0 rgba(255,255,255,.28);
}
.btn-primary:active {
  transform: translateY(1px);
  box-shadow: 0 3px 8px rgba(46,96,132,.30), inset 0 1px 2px rgba(20,32,43,.20);
}
.btn-secondary {
  background: linear-gradient(180deg, #FFFFFF 0%, #EFF5F9 100%);
  border: 1px solid #C3D2DE;
  box-shadow: 0 4px 10px rgba(26,31,38,.10), inset 0 1px 0 #fff;
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), background .25s;
}
.btn-secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(26,31,38,.14), inset 0 1px 0 #fff;
}
.btn-secondary:active { transform: translateY(1px); }


/* ============================================================
   63. 第24弾: 見出しサイズ／スマホ展開の白かぶり除去／レーダー全体表示
   ============================================================ */

/* VISION見出しはPCで一段大きく */
@media (min-width: 901px) {
  html:lang(ja) .mission-lead .display-heading { font-size: clamp(30px, 3.4vw, 44px); }
}

/* スマホ：価値観カードの展開前フェード（白かぶり）を削除 */
.mission-values .clamp::after { content: none; }

/* 03のレーダーは切らずに全体を見せる（位置だけ内側へ、サイズ・雰囲気は不変） */
#execution {
  background-position: right 16px bottom 26px, left -56px bottom 60px, left 8% top 8%, 0 0;
}


/* ============================================================
   64. 第25弾: レーダーを03→パッケージの境界侵入に戻す
   03の背景からレーダーを外し、独立した要素として境界をまたがせる。
   コンテンツ（カード・見出し）より必ず下、両セクションの背景より上。
   ============================================================ */
#execution {
  position: relative;
  background:
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 320'%3E%3Cg fill='none' stroke='%234883AE' stroke-width='2'%3E%3Cpath d='M18 302H122V218h88V134h92'/%3E%3Cpath d='M18 250h56v-64h70'/%3E%3Cpath d='M60 302v-36'/%3E%3C/g%3E%3Cg fill='%234883AE'%3E%3Ccircle cx='122' cy='218' r='5'/%3E%3Ccircle cx='210' cy='134' r='5'/%3E%3Ccircle cx='144' cy='186' r='5'/%3E%3Ccircle cx='302' cy='134' r='5'/%3E%3Crect x='12' y='296' width='12' height='12'/%3E%3C/g%3E%3C/svg%3E") left -56px bottom 60px / 290px auto no-repeat,
    radial-gradient(circle, rgba(46,96,132,.11) 1px, transparent 1.4px) 0 0 / 26px 26px
    #fff;
}
#execution::after {
  content: "";
  position: absolute;
  right: 40px;
  bottom: -160px;   /* 下半分が「課題ベースで選ぶ」に侵入する */
  width: 330px; height: 330px;
  background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cg fill='none' stroke='%232E6084' stroke-width='1.6'%3E%3Ccircle cx='150' cy='150' r='46'/%3E%3Ccircle cx='150' cy='150' r='94'/%3E%3Ccircle cx='150' cy='150' r='142'/%3E%3Cline x1='150' y1='0' x2='150' y2='300'/%3E%3Cline x1='0' y1='150' x2='300' y2='150'/%3E%3C/g%3E%3Ccircle cx='196' cy='104' r='6' fill='%234883AE'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
  z-index: 1;
}
#execution .container { position: relative; z-index: 2; }
.packs .container { position: relative; z-index: 2; }
@media (max-width: 720px) {
  #execution::after { width: 220px; height: 220px; right: 12px; bottom: -104px; }
}


/* ============================================================
   65. 第26弾: Aboutの呼吸（余白と写真と地図の見え方）
   ============================================================ */

/* VISION見出しブロックの前後にゆとり */
.mission-lead { padding-block: clamp(18px, 2.6vw, 44px); }

/* 写真を一回り大きく（高さも上がる） */
@media (min-width: 901px) {
  .mission-lead {
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 480px);
  }
}

/* ヒーロー：下側を広げ、ドットの世界地図がもう少し顔を出す */
.about-hero {
  padding-bottom: clamp(64px, 8vw, 120px);
  background-size: 780px auto, auto;
  background-position: right -16px center, 0 0;
}
@media (max-width: 720px) {
  .about-hero {
    padding-bottom: 56px;
    background-size: 480px auto, auto;
    background-position: right -60px center, 0 0;
  }
}

/* 価値観カード（実行あるのみ〜）はもう少し下から始める */
.mission-values { margin-top: clamp(76px, 8.5vw, 104px); }


/* ============================================================
   66. 第27弾: VISION本文の行リズム／地図と文字の被り解消
   ============================================================ */

/* PC: 見出し直後の間延びをやめ、5行を均等なリズムで */
@media (min-width: 901px) {
  .mission-lead .pillar-intro { justify-content: flex-start; }
  .mission-lead .pillar-intro .display-heading { margin-bottom: 22px; }
  .mission-lead .pillar-intro .lead { line-height: 2.35; }
}

/* スマホ: 行間をもう少しだけ */
@media (max-width: 900px) {
  .mission-lead .lead { line-height: 2.05; }
}

/* ABOUT JDOC の文字と地図が重ならないよう、左側に白のベールを敷く */
.about-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #fff 0%, #fff 28%, rgba(255,255,255,0) 60%);
  pointer-events: none;
}


/* ============================================================
   67. 第28弾: 写真を本文の高さにぴったり合わせる／valuesの位置と展開廃止
   ============================================================ */

/* PC: 写真の高さ＝「魅力を見つけ」上端〜「私たちの仕事です」下端。
   固定比をやめ、テキスト列の高さに写真が従う（結果はほぼ16:9） */
@media (min-width: 901px) {
  .mission-lead { align-items: stretch; }
  /* 写真の固有比が行の高さを決めないよう、面をabsoluteで埋める */
  .mission-photo { height: auto; position: relative; }
  .mission-photo > svg, .mission-photo > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
  }
  /* 本文ブロックが低くなったぶん、1・2のカードは写真との間隔を詰めて上へ */
  .mission-values { margin-top: clamp(56px, 6vw, 72px); }
}

/* スマホ: 価値観カードの展開UIを廃止し、全カードを同じ振る舞いに */
.mission-values .more-btn { display: none; }
.mission-values .clamp { max-height: none !important; }

/* スマホ: 本文の行間をあと一息 */
@media (max-width: 900px) {
  .mission-lead .lead { line-height: 2.3; }
}


/* ============================================================
   69. 第29弾: 問題提起／一貫性ベン図／Before-After事例タブ／強み3つ
   ============================================================ */

/* ---------- 01 問題提起：濃紺のカードに大きな引用 ---------- */
.probs-intro { margin-bottom: var(--s5); }
.probs-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3);
}
.prob-card {
  position: relative;
  margin: 0;
  padding: 30px 30px 26px;
  border-radius: 16px;
  background: linear-gradient(140deg, #16334E 0%, #1E4568 70%, #2E6084 130%);
  color: #fff;
  overflow: hidden;
}
.prob-card::before {
  content: "\201C";
  position: absolute;
  top: -18px; left: 14px;
  font: 700 110px/1 var(--font-display);
  color: rgba(127,176,211,.28);
}
.prob-card p {
  position: relative;
  font: 700 clamp(18px, 1.9vw, 23px)/1.6 var(--font-body);
  letter-spacing: .01em;
  margin-bottom: 14px;
}
.prob-card cite {
  font: 500 12.5px/1 var(--font-mono);
  font-style: normal;
  letter-spacing: .08em;
  color: #A8CCE4;
  border-top: 1px solid rgba(255,255,255,.22);
  padding-top: 12px;
  display: inline-block;
}
@media (max-width: 720px) {
  .probs-grid { grid-template-columns: 1fr; }
  .prob-card { padding: 24px 22px 20px; }
}

/* ---------- 02 一貫性：ベン図 ---------- */
.oneline-intro { margin-bottom: var(--s5); }
.oneline-intro .lead { margin-top: var(--s3); }
.venn svg { display: block; width: 100%; max-width: 900px; margin-inline: auto; height: auto; }

/* ---------- 04 事例タブ ---------- */
.cases-intro { margin-bottom: var(--s4); }
.case-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: var(--s4); }
.case-tab {
  width: auto; height: auto;
  border: 2px solid var(--brand);
  border-radius: 999px;
  background: #fff;
  padding: 12px 24px;
  font: 700 14.5px/1 var(--font-body);
  color: var(--ink);
  cursor: pointer;
  transition: background .25s, color .25s, transform .25s var(--ease-out);
}
.case-tab:hover { transform: translateY(-2px); }
.case-tab.is-active { background: var(--brand-strong); color: #fff; }
.case-panel { display: none; }
.case-panel.is-active { display: grid; gap: var(--s3); }

.ba-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  padding: 22px 26px;
  box-shadow: 0 10px 26px rgba(26,31,38,.06);
}
.ba-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.ba-head b { font: 700 16.5px/1.4 var(--font-body); }
.ba-head span { font: 500 12px/1 var(--font-mono); color: var(--brand-deep); }
.ba-flow {
  display: grid;
  grid-template-columns: 1fr 56px 1.2fr;
  gap: 14px;
  align-items: stretch;
}
.ba-before, .ba-after { border-radius: 12px; padding: 16px 18px; }
.ba-before { background: #EFF2F5; color: var(--muted); }
.ba-after {
  background: linear-gradient(140deg, #1E4568 0%, #2E6084 70%, #4883AE 140%);
  color: #fff;
}
.ba-tag {
  display: inline-block;
  font: 700 11px/1 var(--font-mono);
  letter-spacing: .18em;
  margin-bottom: 8px;
}
.ba-before .ba-tag { color: #8593A0; }
.ba-after .ba-tag { color: #A8CCE4; }
.ba-before p, .ba-after p { font-size: 14.5px; line-height: 1.7; }
.ba-num { margin-bottom: 2px; }
.ba-num .stat-number {
  font: 700 clamp(30px, 3vw, 42px)/1.1 var(--font-display);
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.ba-arrow { position: relative; }
.ba-arrow::before {
  content: "";
  position: absolute;
  left: 4px; right: 16px;
  top: 50%;
  height: 3px;
  margin-top: -1.5px;
  background: var(--brand);
  border-radius: 2px;
}
.ba-arrow::after {
  content: "";
  position: absolute;
  right: 2px; top: 50%;
  margin-top: -9px;
  border: 9px solid transparent;
  border-left: 13px solid var(--brand);
  border-right: 0;
}
.cases-more { margin-top: var(--s4); }
@media (max-width: 720px) {
  .ba-flow { grid-template-columns: 1fr; gap: 8px; }
  .ba-arrow { height: 34px; }
  .ba-arrow::before { left: 50%; right: auto; top: 2px; bottom: 14px; width: 3px; height: auto; margin: 0 0 0 -1.5px; }
  .ba-arrow::after {
    right: auto; left: 50%; top: auto; bottom: 0;
    margin: 0 0 0 -9px;
    border: 9px solid transparent;
    border-top: 13px solid var(--brand);
    border-bottom: 0;
  }
}

/* ---------- 05 強み3つ：大きな番号の濃紺タイル ---------- */
.strong-intro { margin-bottom: var(--s5); }
.strong-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s3);
}
.strong-card {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: linear-gradient(150deg, #14202B 0%, #1E4568 62%, #2E6084 120%);
  color: #fff;
  padding: 30px 26px;
  min-height: 220px;
}
.strong-card::before {
  content: "";
  position: absolute;
  right: -46px; top: -46px;
  width: 150px; height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, rgba(127,176,211,.35), rgba(127,176,211,0) 70%);
}
.strong-num {
  font: 700 44px/1 var(--font-display);
  color: #7FB0D3;
}
.strong-card h4 {
  font: 700 clamp(20px, 2vw, 25px)/1.3 var(--font-body);
  margin: 10px 0 10px;
}
.strong-card p { color: rgba(255,255,255,.88); font-size: 14.5px; line-height: 1.8; }
@media (max-width: 900px) {
  .strong-grid { grid-template-columns: 1fr; }
  .strong-card { min-height: 0; }
}


/* ============================================================
   70. 第30弾: 明るい問題提起／統合ソリューション／左タブ事例／巨大な理由
   ============================================================ */

/* ---------- 2ndビュー→PROBLEM の間を詰める ---------- */
.line.section { padding-bottom: clamp(40px, 5vw, 64px); }
.probs { padding-top: clamp(40px, 5vw, 64px); }

/* ---------- PROBLEM＆SOLUTION：参考サイト風の柔らかい背景（共通） ---------- */
.probs, .oneline {
  background:
    radial-gradient(640px 640px at -8% 6%, rgba(127,176,211,.20) 0%, rgba(127,176,211,0) 70%),
    radial-gradient(560px 560px at 106% 90%, rgba(79,168,149,.16) 0%, rgba(79,168,149,0) 70%),
    linear-gradient(180deg, #FBFDFE 0%, #F1F6FA 100%);
}
.oneline {
  background:
    radial-gradient(640px 640px at 108% 4%, rgba(127,176,211,.18) 0%, rgba(127,176,211,0) 70%),
    radial-gradient(560px 560px at -6% 86%, rgba(79,168,149,.15) 0%, rgba(79,168,149,0) 70%),
    linear-gradient(180deg, #F1F6FA 0%, #FBFDFE 100%);
}

/* ---------- PROBLEM：白カード×濃色テキストで読みやすく ---------- */
.prob-card {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: 0 10px 28px rgba(26,31,38,.07);
}
.prob-card::before { color: rgba(72,131,174,.20); }
.prob-card cite { color: var(--brand-deep); border-top-color: var(--line); }

/* ---------- 従来 vs JDOC ---------- */
.vs-rows { display: grid; gap: 14px; margin-bottom: var(--s5); }
.vs-row {
  display: grid;
  grid-template-columns: 1fr 56px 1.2fr;
  gap: 14px;
  align-items: stretch;
}
.vs-old, .vs-new { border-radius: 12px; padding: 18px 20px; }
.vs-old { background: #EDF0F3; color: var(--muted); }
.vs-old .ba-tag { color: #8593A0; }
.vs-new {
  background: linear-gradient(140deg, #1E4568 0%, #2E6084 70%, #4883AE 140%);
  color: #fff;
}
.vs-new .ba-tag { color: #A8CCE4; }
.vs-old p, .vs-new p { font-size: 15px; line-height: 1.8; font-weight: 600; }
.venn { margin-bottom: var(--s5); }
.sol-sub {
  font: 700 clamp(19px, 1.9vw, 24px)/1.5 var(--font-body);
  margin-bottom: var(--s4);
}
@media (max-width: 720px) {
  .vs-row { grid-template-columns: 1fr; gap: 8px; }
  .vs-row .ba-arrow { height: 30px; }
  .vs-row .ba-arrow::before { left: 50%; right: auto; top: 0; bottom: 12px; width: 3px; height: auto; margin: 0 0 0 -1.5px; }
  .vs-row .ba-arrow::after {
    right: auto; left: 50%; top: auto; bottom: 0;
    margin: 0 0 0 -9px;
    border: 9px solid transparent;
    border-top: 12px solid var(--brand);
    border-bottom: 0;
  }
}

/* ---------- 活用事例：左タブ＋右コンテンツ ---------- */
.cases-wrap {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: var(--s4) var(--s5);
  align-items: start;
}
.case-tabs { display: grid; gap: 4px; margin-bottom: 0; }
.case-tab {
  width: 100%;
  text-align: right;
  border: 0;
  border-right: 3px solid var(--line);
  border-radius: 0;
  background: none;
  padding: 13px 18px 13px 6px;
  font: 700 15.5px/1 var(--font-body);
  color: var(--muted);
}
.case-tab:hover { transform: none; color: var(--ink); }
.case-tab.is-active {
  background: none;
  color: var(--brand-deep);
  border-right-color: var(--brand);
}
.case-panel.is-active { display: block; }
.case-big-h {
  font: 700 clamp(26px, 3vw, 42px)/1.35 var(--font-display);
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}
.case-big-lead { color: var(--muted); margin-bottom: var(--s4); }
.case-panel .ba-card { margin-bottom: var(--s3); }
@media (max-width: 900px) {
  .cases-wrap { grid-template-columns: 1fr; }
  .case-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 6px;
  }
  .case-tab {
    width: auto;
    white-space: nowrap;
    border-right: 0;
    border-bottom: 3px solid var(--line);
    text-align: center;
    padding: 10px 14px;
  }
  .case-tab.is-active { border-bottom-color: var(--brand); }
}

/* ---------- 選ばれる理由：画面全体を使う巨大な3行 ---------- */
.strong-rows { display: grid; }
.strong-row {
  display: grid;
  grid-template-columns: minmax(150px, 240px) 1fr;
  gap: var(--s4);
  align-items: center;
  padding: clamp(28px, 4vw, 48px) 0;
  border-top: 3px solid var(--ink);
}
.strong-rows .strong-row:last-child { border-bottom: 3px solid var(--ink); }
.strong-gnum {
  font: 700 clamp(88px, 11vw, 168px)/0.9 var(--font-display);
  color: rgba(72,131,174,.22);
  font-variant-numeric: tabular-nums;
}
.strong-body h4 {
  font: 700 clamp(30px, 3.8vw, 54px)/1.2 var(--font-display);
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}
.strong-body p {
  color: var(--muted);
  font-size: clamp(15px, 1.5vw, 17.5px);
  line-height: 1.9;
  max-width: 46em;
}
.team-head {
  margin-top: var(--s6);
  margin-bottom: var(--s4);
  font: 700 clamp(20px, 2vw, 26px)/1.4 var(--font-body);
}
@media (max-width: 720px) {
  .strong-row { grid-template-columns: 1fr; gap: 4px; padding: 22px 0; }
  .strong-gnum { font-size: 64px; }
}

/* ---------- サービス：柱の中身を左タブ＋右パネルに ---------- */
.sol-wrap {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: var(--s4) var(--s5);
  align-items: start;
}
.sol-tabs { display: grid; gap: 4px; }
.sol-tab {
  width: 100%;
  text-align: right;
  border: 0;
  border-right: 3px solid var(--line);
  border-radius: 0;
  background: none;
  padding: 12px 18px 12px 6px;
  font: 700 14.5px/1.4 var(--font-body);
  color: var(--muted);
  cursor: pointer;
  transition: color .25s, border-color .25s;
}
.sol-tab:hover { color: var(--ink); }
.sol-tab.is-active { color: var(--brand-deep); border-right-color: var(--brand); background: none; }
.sol-panel { display: none; }
.sol-panel.is-active { display: block; }
.sol-panel h4 {
  font: 700 clamp(24px, 2.4vw, 34px)/1.3 var(--font-display);
  margin-bottom: 14px;
}
.sol-panel .sol-body { font-size: 16.5px; line-height: 2.0; color: var(--ink); max-width: 44em; }
.sol-panel .sol-link { margin-top: var(--s3); }
@media (max-width: 900px) {
  .sol-wrap { grid-template-columns: 1fr; }
  .sol-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 6px;
  }
  .sol-tab {
    width: auto;
    white-space: nowrap;
    border-right: 0;
    border-bottom: 3px solid var(--line);
    text-align: center;
    padding: 10px 12px;
  }
  .sol-tab.is-active { border-bottom-color: var(--brand); }
}


/* ============================================================
   71. 第31弾: アプローチ概念図／下線タブ／白文字AFTER／ジグザグ／チーム
   ============================================================ */

/* ---------- 弊社のアプローチ：概念図2枚（PC=左右、SP=上下で弊社が下） ---------- */
.approach-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3);
  margin-bottom: var(--s5);
}
.approach-fig { margin: 0; }
.approach-fig svg { display: block; width: 100%; height: auto; }
/* 弊社側は色の濃さと影で目立たせる */
.approach-fig-jdoc svg {
  border-radius: 18px;
  box-shadow: 0 22px 52px rgba(20,32,43,.26);
}
@media (max-width: 900px) {
  .approach-grid { grid-template-columns: 1fr; }
}

/* ---------- USE CASES：ラベルの棒を消し、タブは下線のみ ---------- */
.case-tabs { justify-items: start; }
.case-tab {
  width: auto;
  text-align: left;
  border: 0;
  background: none;
  box-shadow: none;
  padding: 10px 4px;
}
.case-tab.is-active {
  background: none;
  border: 0;
  border-bottom: 3px solid var(--brand);
  color: var(--brand-deep);
}
@media (max-width: 900px) {
  .case-tab { border: 0 !important; padding: 10px 10px; }
  .case-tab.is-active { color: var(--brand-deep); }
}

/* ---------- AFTER内の文字は必ず白 ---------- */
.ba-after, .ba-after p { color: #fff; }
.ba-after .ba-tag { color: #A8CCE4; }

/* ---------- 実績をすべて見る：右寄せ（PC・SP共通） ---------- */
.cases-more { display: flex; justify-content: flex-end; }

/* ---------- 弊社が選ばれる理由：バランスを崩して遊ぶ ---------- */
.strong-row:nth-child(1) .strong-gnum { transform: translateY(-10px) rotate(-3deg); }
.strong-row:nth-child(2) { grid-template-columns: 1fr minmax(150px, 240px); }
.strong-row:nth-child(2) .strong-gnum { order: 2; text-align: right; transform: translateY(12px) rotate(2deg); }
.strong-row:nth-child(2) .strong-body { order: 1; }
.strong-row:nth-child(3) { padding-left: clamp(0px, 6vw, 96px); }
.strong-row:nth-child(3) .strong-gnum { transform: translateY(-6px) rotate(-2deg); }
@media (max-width: 720px) {
  .strong-row:nth-child(2) { grid-template-columns: 1fr; }
  .strong-row:nth-child(2) .strong-gnum { order: 0; text-align: left; }
  .strong-row:nth-child(3) { padding-left: 0; }
}

/* ---------- チーム：小さな丸写真＋常時表示の経歴（PC）。SPはタップで開閉 ---------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3);
  align-items: start;
}
.team-member {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px 26px;
}
.team-top {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 14px;
  align-items: center;
}
.team-photo {
  width: 60px; height: 60px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--brand-tint);
}
.team-name { font: 700 clamp(18px, 1.8vw, 21px)/1.3 var(--font-display); }
.team-role { font: 500 11.5px/1.6 var(--font-mono); color: var(--brand-deep); }
.team-bio { margin-top: 16px; display: grid; gap: 10px; }
.team-bio p { font-size: 14px; line-height: 1.9; color: var(--muted); }
.team-marker { display: none; position: relative; width: 16px; height: 16px; }
.team-marker::before, .team-marker::after {
  content: "";
  position: absolute; inset: 0; margin: auto;
  background: var(--brand-deep);
  transition: transform .3s var(--ease-out);
}
.team-marker::before { width: 16px; height: 2px; }
.team-marker::after { width: 2px; height: 16px; }
.team-member.is-open .team-marker::after { transform: scaleY(0); }

@media (max-width: 720px) {
  .team-grid { grid-template-columns: 1fr; }
  .team-top { cursor: pointer; }
  .team-marker { display: block; }
  .team-bio {
    max-height: 0;
    overflow: hidden;
    margin-top: 0;
    transition: max-height .6s var(--ease-out), margin-top .4s var(--ease-out);
  }
  .team-member.is-open .team-bio { max-height: 1400px; margin-top: 14px; }
}


/* ============================================================
   72. 第32弾: ノート風ユースケース／チーム写真拡大／メガ復旧／sol画像枠
   ============================================================ */

/* ---------- USE CASES：右側をノートのような柔らかい面に。タブとリンクさせる ---------- */
.case-panel.is-active {
  background: #F3F8FB;
  border-radius: 20px;
  padding: 28px 30px;
}
.case-area-tag {
  display: inline-block;
  background: #fff;
  border: 1px solid #C9DCEB;
  border-radius: 999px;
  padding: 7px 14px;
  font: 700 12px/1 var(--font-mono);
  letter-spacing: .08em;
  color: var(--brand-deep);
  margin-bottom: 14px;
}
.case-tab.is-active::before {
  content: "\25CF";
  font-size: 9px;
  margin-right: 8px;
  color: var(--brand);
  vertical-align: 2px;
}
.case-panel .ba-card { border: 0; box-shadow: 0 6px 18px rgba(26,31,38,.06); }
.ba-before { background: #E9EEF3; border-radius: 14px; }
.ba-after { border-radius: 14px; }
@media (max-width: 900px) {
  .case-panel.is-active { padding: 20px 16px; }
}

/* ---------- チーム写真をもう少し大きく ---------- */
.team-top { grid-template-columns: 76px 1fr auto; }
.team-photo { width: 76px; height: 76px; }
@media (min-width: 721px) {
  .team-top { grid-template-columns: 96px 1fr auto; }
  .team-photo { width: 96px; height: 96px; }
}

/* ---------- メガメニュー：カスタマージャーニーが消えかけていたのを復旧 ---------- */
.mega-foot .mega-foot-sub { font-size: 12.5px; opacity: 1; color: #6E86A0; }
.mega-foot .mega-foot-sub:hover { color: var(--brand-deep); }

/* ---------- サービス：solパネルは本文＋画像の2カラム ---------- */
.sol-panel.is-active {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
  gap: var(--s4);
  align-items: start;
}
.sol-photo {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(26,31,38,.12);
}
.sol-photo > svg, .sol-photo > img {
  display: block;
  width: 100%; height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
@media (max-width: 900px) {
  .sol-panel.is-active { grid-template-columns: 1fr; }
}


/* ============================================================
   73. 第33弾: ボタン風タブの全ページ統一／文字リンク化／チーム写真／
   FVロゴの一塊集約
   ============================================================ */

/* ---------- タブをボタン風の白ピルに（背景の模様はすりガラスでぼける） ---------- */
.sol-tab, .case-tab {
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,.78);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 12px rgba(26,31,38,.05);
  padding: 13px 16px;
  font: 700 14.5px/1.4 var(--font-body);
  color: var(--muted);
  cursor: pointer;
  transition: color .25s, border-color .25s, background .25s, transform .25s var(--ease-out);
}
.sol-tab:hover, .case-tab:hover { color: var(--ink); transform: translateY(-1px); }
.sol-tab.is-active, .case-tab.is-active {
  background: #fff;
  border: 1px solid var(--brand);
  color: var(--brand-deep);
}
.case-tab.is-active::before { content: none; }
.sol-tabs, .case-tabs { gap: 8px; }
@media (max-width: 900px) {
  .sol-tab, .case-tab {
    width: auto;
    white-space: nowrap;
    border: 1px solid var(--line) !important;
    border-radius: 10px;
    padding: 10px 16px;
    text-align: center;
  }
  .sol-tab.is-active, .case-tab.is-active { border: 1px solid var(--brand) !important; }
}

/* ---------- 事例：ノート面・タグを廃止してサービスページと同じ素の見た目に ---------- */
@media (min-width: 901px) {
  .cases-wrap { grid-template-columns: 250px minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .cases-wrap { grid-template-columns: 1fr; }
}
.case-panel.is-active { background: none; border-radius: 0; padding: 0; }
.case-area-tag { display: none; }
.case-panel .ba-card { border: 1px solid var(--line); box-shadow: 0 6px 18px rgba(26,31,38,.05); }

/* ---------- パッケージ：カード右下の文字リンク ---------- */
.pack-card { display: flex; flex-direction: column; }
.pack-card > * { flex: 0 0 auto; }
.pack-link { margin-top: auto; align-self: flex-end; padding-top: 12px; }

/* ---------- チーム写真：さらに一回り大きく＋水色の枠 ---------- */
.team-top { grid-template-columns: 84px 1fr auto; }
.team-photo {
  width: 84px; height: 84px;
  border: 3px solid #A8CCE4;
}
@media (min-width: 721px) {
  .team-top { grid-template-columns: 108px 1fr auto; }
  .team-photo { width: 108px; height: 108px; }
}

/* ---------- FV：プラットフォームのロゴを1つの塊に集約し、存在感を弱める ---------- */
.cl-meta   { left: 60%; top: 16%; }
.cl-google { left: 74%; top: 32%; }
.cl-x      { left: 60%; top: 50%; }
.cl-ly     { left: 72%; top: 66%; }
.cl-tiktok { left: 85%; top: 52%; }
.cl-tools  { left: 84%; top: 20%; transition-delay: 1.1s; }
.cl .cl-chip { opacity: .68; filter: saturate(.82); }
.cl .cl-chip:hover { opacity: 1; filter: none; }
@media (max-width: 1024px) {
  .cl-meta   { left: 52%; top: 16%; }
  .cl-google { left: 70%; top: 30%; }
  .cl-ly     { left: 52%; top: 46%; }
  .cl-x      { left: 78%; top: 48%; }
  .cl-tiktok { left: 62%; top: 64%; }
  .cl-tools  { left: 84%; top: 64%; }
}


/* ============================================================
   74. 第34弾: 事例カード刷新／余白／チーム枠／FVロゴの密集・縮小
   ============================================================ */

/* ---------- ユースケース：ラベルとコンテンツの間にサービスページ相当の余白 ---------- */
.cases-intro { margin-bottom: var(--s4); }

/* ---------- 事例カード：写真（左）＋BEFORE上/AFTER下（右） ---------- */
.ba-body {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: var(--s3);
  align-items: stretch;
}
.ba-photo {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  min-height: 200px;
}
.ba-photo > svg, .ba-photo > img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.ba-cols { display: grid; gap: 10px; }
.ba-before ul, .ba-after ul { display: grid; gap: 6px; }
.ba-before li, .ba-after li {
  position: relative;
  padding-left: 16px;
  font-size: 14px;
  line-height: 1.7;
}
.ba-before li::before, .ba-after li::before {
  content: "";
  position: absolute;
  left: 0; top: .68em;
  width: 8px; height: 2px;
}
.ba-before li::before { background: #9AA7B2; }
.ba-after li::before { background: #A8CCE4; }
.ba-before li { color: var(--muted); }
.ba-after li { color: #fff; }
/* AFTERを主役に */
.ba-after { box-shadow: 0 12px 28px rgba(30,69,104,.30); }
.ba-num { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.ba-num-label { font: 600 12.5px/1.4 var(--font-body); color: #A8CCE4; }
@media (max-width: 900px) {
  .ba-body { grid-template-columns: 1fr; }
  .ba-photo { min-height: 0; height: 170px; position: relative; }
}

/* ---------- チーム写真の枠を濃い水色に ---------- */
.team-photo { border-color: #7FB0D3; }

/* ---------- FVロゴ：X付近（左下寄り）に密集・さらに淡く・大チップ縮小 ---------- */
.cl-chip.lg { width: 62px; height: 62px; border-radius: 16px; }
.cl-chip.lg svg { width: 38px; height: 38px; }
.cl-chip.lg .chip-img { width: 37px; height: 37px; }
.cl .cl-chip { opacity: .55; filter: saturate(.72); }
.cl-meta   { left: 50%; top: 40%; }
.cl-google { left: 60%; top: 54%; }
.cl-x      { left: 51%; top: 66%; }
.cl-ly     { left: 61%; top: 76%; }
.cl-tiktok { left: 69%; top: 62%; }
.cl-tools  { left: 68%; top: 42%; }
@media (max-width: 1024px) {
  .cl-meta   { left: 44%; top: 40%; }
  .cl-google { left: 58%; top: 52%; }
  .cl-x      { left: 46%; top: 64%; }
  .cl-ly     { left: 58%; top: 74%; }
  .cl-tiktok { left: 70%; top: 62%; }
  .cl-tools  { left: 70%; top: 40%; }
}


/* ============================================================
   75. 第35弾: FVアイコンの再配置と淡色化、スマホのロゴ統一
   ============================================================ */

/* インフルエンサーのアバターは YouTube の左上あたりへ */
.cl-google .ca-a { transform: translate(-86px, -42px); }

/* Googleマップ：Google広告とXの間に単独で置く */
.cl-gmaps { left: 55%; top: 61%; transition-delay: 1.05s; }

/* PR TIMES：Yahoo!ニュースの右下へ移し、色も淡く */
.solo-prtimes { left: 66%; top: 83%; }
.solo-prtimes .pr-badge { opacity: .55; }
.solo-prtimes .pr-badge img { filter: saturate(.75); }

@media (max-width: 1024px) {
  .cl-gmaps { left: 62%; top: 58%; }
  .solo-prtimes { left: 60%; top: 86%; }
}

/* スマホ：大きいロゴチップも他と同じ大きさに統一 */
@media (max-width: 720px) {
  .cl-chip.lg { width: 56px; height: 56px; border-radius: 15px; }
  .cl-chip.lg svg { width: 34px; height: 34px; }
  .cl-chip.lg .chip-img { width: 34px; height: 34px; }
}


/* ============================================================
   76. 第36弾: パネル上の水色線と見出しの間隔／FVアイコン整理／写真を5:4横型に
   ============================================================ */

/* パネル上端の水色線と見出しの間に、サービスページ相当の余白を確保 */
.case-panel.is-active { padding-top: 28px; }

/* FV: 指定のインフルエンサーアバターを削除 */
.cl-google .ca-a, .cl-x .ca-a { display: none; }

/* FV: LINEヤフー群を左へ（PR TIMESとの被り解消） */
.cl-ly { left: 49%; top: 76%; }
@media (max-width: 1024px) {
  .cl-ly { left: 44%; top: 74%; }
}

/* 事例写真：縦長をやめ、5:4の横型（AFTERが写真より下に伸びるのは許容） */
@media (min-width: 901px) {
  .ba-body { grid-template-columns: 290px minmax(0, 1fr); align-items: start; }
}
@media (max-width: 900px) {
  .ba-body { grid-template-columns: 1fr; }
}
.ba-photo {
  position: relative;
  min-height: 0;
  height: auto;
  aspect-ratio: 5 / 4;
  align-self: start;
}
@media (max-width: 900px) {
  .ba-photo { height: auto; aspect-ratio: 16 / 10; }
}


/* ============================================================
   77. 第37弾（スマホ限定）: FVアイコンの統一・左寄せ再配置／タブのバー非表示
   ============================================================ */
@media (max-width: 720px) {
  /* 全チップをXと同じ大きさに完全統一 */
  .cl-chip.lg, .cl-chip.md {
    width: 52px; height: 52px;
    border-radius: 14px;
  }
  .cl-chip.lg svg, .cl-chip.md svg { width: 31px; height: 31px; }
  .cl-chip.lg .chip-img, .cl-chip.md .chip-img { width: 31px; height: 31px; }

  /* 全体を左に寄せ、被りのない配置に */
  .cl-meta    { left: 4%;  top: 34%; transform: scale(.9); transform-origin: top left; }
  .cl-tools   { left: 56%; top: 30%; }
  .cl-google  { left: 14%; top: 58%; transform: scale(.78); transform-origin: top left; }
  .cl-gmaps   { left: 2%;  top: 76%; }   /* Xより左・高さは同帯 */
  .cl-x       { left: 46%; top: 74%; }
  .cl-tiktok  { left: 72%; top: 62%; transform: scale(.9); transform-origin: top left; }
  .cl-ly      { left: 4%;  top: 85%; }
  .solo-prtimes { left: 56%; top: 90%; }

  /* タブ：横スクロールのバーは出さない。上の枠線が切れないよう余白を確保 */
  .sol-tabs, .case-tabs {
    padding: 4px 2px 8px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .sol-tabs::-webkit-scrollbar, .case-tabs::-webkit-scrollbar { display: none; }
}


/* ============================================================
   78. 第38弾（スマホ限定）: ロゴ半減＋中央密集／タブの黒み除去＋細い下線／
   テストマーケ背景を濃く
   ============================================================ */
@media (max-width: 720px) {
  /* ---------- FVロゴ：今の半分サイズで、中央帯（戦略〜成果の間）に密集 ---------- */
  .cl-chip.lg, .cl-chip.md {
    width: 28px; height: 28px;
    border-radius: 8px;
  }
  .cl-chip.lg svg, .cl-chip.md svg { width: 17px; height: 17px; }
  .cl-chip.lg .chip-img, .cl-chip.md .chip-img { width: 17px; height: 17px; }
  .cl-chip.wide { padding: 4px 8px; border-radius: 8px; }
  .cl-chip.wide img { height: 11px; }
  .solo-prtimes .pr-badge { padding: 4px 8px; }
  .solo-prtimes .pr-badge img { height: 11px; width: auto; }
  .cl { gap: 4px; }
  .cl-chips { gap: 6px; }
  .cl::before { inset: -10px -14px; }

  .cl-meta    { left: 16%; top: 44%; transform: none; }
  .cl-tools   { left: 60%; top: 40%; }
  .cl-google  { left: 34%; top: 56%; transform: none; }
  .cl-gmaps   { left: 18%; top: 64%; }
  .cl-x       { left: 42%; top: 65%; }
  .cl-tiktok  { left: 68%; top: 63%; transform: none; }
  .cl-ly      { left: 26%; top: 72%; }
  .solo-prtimes { left: 52%; top: 74%; }

  /* ---------- タブ：謎の黒みを消して白に。エリアは薄く細い下線で示す ---------- */
  .sol-tab, .case-tab {
    background: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
  }
  .sol-tabs, .case-tabs {
    background: none;
    border-bottom: 1px solid rgba(72,131,174,.28);
    padding-bottom: 10px;
    margin-bottom: 14px;
  }

  /* ---------- テストマーケティングの背景を一段濃く ---------- */
  #engagement { background: #D6E4F0; }
}


/* ============================================================
   79. 第39弾: スマホのロゴ塊を右へ1cm／タブ残留シャドウ除去／インサイト文字リンク
   ============================================================ */

/* インサイトの導線は実績と同じ右寄せの文字リンク */
.insights-more { display: flex; justify-content: flex-end; }

/* タブ：タップ後にhoverの影が残って黒ずむのを全面的に無効化（4箇所共通） */
.sol-tab, .case-tab { -webkit-tap-highlight-color: transparent; }
@media (hover: none) {
  .sol-tab:hover, .case-tab:hover,
  .sol-tab:active, .case-tab:active,
  .sol-tab:focus, .case-tab:focus {
    box-shadow: none;
    transform: none;
  }
}
@media (max-width: 900px) {
  .sol-tab:hover, .case-tab:hover,
  .sol-tab:active, .case-tab:active {
    box-shadow: none !important;
    transform: none !important;
  }
}

/* スマホ：ロゴ塊（アバター含むクラスタごと）を約1cm右へ */
@media (max-width: 720px) {
  .hero-canvas .cl, .hero-canvas .solo { margin-left: 38px; }
}


/* タブの黒ずみの正体：基底 .platform-btn.is-active の常時シャドウ。4箇所すべてで無効化 */
.sol-tab.is-active, .case-tab.is-active {
  box-shadow: none !important;
  border-width: 1px;
}


/* ============================================================
   80. 第40弾: サービスのメガメニューを画面中央に固定表示
   トリガー基準の中央寄せだと右端が画面外に切れるため、
   ビューポート基準の中央固定に変更する
   ============================================================ */
.nav-drop .nav-drop-panel.nav-mega {
  position: fixed;
  top: 82px;
  left: 50%;
  right: auto;
  transform: translateX(-50%) translateY(8px);
  max-width: calc(100vw - 32px);
}
.nav-drop.is-open .nav-drop-panel.nav-mega,
.nav-drop:hover .nav-drop-panel.nav-mega {
  transform: translateX(-50%) translateY(0);
}
/* トリガーからパネルまでマウスが移動する間の橋（閉じ防止） */
.nav-drop-panel.nav-mega::after {
  content: "";
  position: absolute;
  top: -18px; left: 0; right: 0;
  height: 18px;
}


/* ============================================================
   81. 第41弾（スマホ限定）: FVロゴをYouTube中心の円形クラスターに
   Google群（YouTube）を軸に据え、その周囲へ等距離で配置する
   ============================================================ */
@media (max-width: 720px) {
  .cl-google  { left: 34%; top: 56%; }                 /* 軸（動かさない） */
  .cl-tools   { left: 33%; top: 33%; }                 /* 真上：WordPress/Shopify */
  .cl-tiktok  { left: 58%; top: 48%; }                 /* 右上：TikTok */
  .cl-meta    { left: 12%; top: 47%; }                 /* 左上：Meta群 */
  .cl-x       { left: 56%; top: 65%; }                 /* 右下：X */
  .cl-gmaps   { left: 16%; top: 66%; }                 /* 左下：Googleマップ */
  .cl-ly      { left: 30%; top: 71%; }                 /* 真下：LINEヤフー */
  .solo-prtimes { left: 53%; top: 73%; }               /* 右下外周：PR TIMES */
}


/* ============================================================
   82. 第42弾改2（スマホ限定）: YouTubeとGoogleの間隔（56px）を
   基準ピッチに、全ロゴを等間隔で敷き詰める（ハニカム配置）
   ============================================================ */
@media (max-width: 720px) {
  .hero-canvas .cl {
    display: block;
    margin-left: 0;
  }
  .hero-canvas .cl::before { content: none; }
  .hero-canvas .cl-chips {
    display: block;
    position: absolute;
    top: 0; left: 0;
  }
  .hero-canvas .cl .cl-chip,
  .hero-canvas .cl .avatar {
    position: absolute;
    top: 0; left: 0;
    margin: 0;
  }

  /* 全クラスタの原点＝中心（YouTubeの位置） */
  .cl-google, .cl-meta, .cl-x, .cl-ly, .cl-tiktok, .cl-tools, .cl-gmaps {
    left: 46%;
    top: 50%;
  }

  /* 中心行 y=0 */
  .cl-google .cl-chips:nth-of-type(1) .cl-chip:nth-child(2) { transform: translate(0, 0); }          /* YouTube＝中心 */
  .cl-google .cl-chips:nth-of-type(1) .cl-chip:nth-child(1) { transform: translate(-62px, 8px); }      /* Google */
  .cl-x .cl-chip { transform: translate(74px, -34px); }                                                  /* X */
  .cl-meta .avatar.ca-a { transform: translate(-116px, 12px) scale(.7); }
  .cl-tiktok .avatar.ca-a { transform: translate(106px, -12px) scale(.7); }

  /* 上1行 y=-48 */
  .cl-meta .cl-chips:nth-of-type(1) .cl-chip:nth-child(1) { transform: translate(-16px, -40px); }    /* Instagram */
  .cl-gmaps .cl-chip { transform: translate(54px, 2px); }                                         /* Googleマップ */
  .cl-google .cl-chips:nth-of-type(2) .cl-chip { transform: translate(-34px, -85px); }                /* Google広告 */
  .cl-tools .cl-chips:nth-of-type(2) .cl-chip { transform: translate(67px, -88px); }                 /* WordPress */

  /* 上2行 y=-96 */
  .cl-tools .cl-chips:nth-of-type(1) .cl-chip:nth-child(1) { transform: translate(29px, -104px); }    /* Shopify */

  /* 下1行 y=48 */
  .cl-meta .cl-chips:nth-of-type(1) .cl-chip:nth-child(2) { transform: translate(-78px, 56px); }     /* Facebook */
  .cl-meta .cl-chips:nth-of-type(2) .cl-chip { transform: translate(-34px, 42px); }                  /* Meta */
  .cl-tiktok .cl-chip { transform: translate(20px, 56px); }                                          /* TikTok */
  .cl-ly .cl-chips:nth-of-type(2) .cl-chip { transform: translate(107px, 23px); }                     /* LY */

  /* 下2行 y=96 */
  .cl-ly .avatar.ca-b { transform: translate(-98px, 81px) scale(.7); }
  .cl-ly .cl-chips:nth-of-type(1) .cl-chip:nth-child(1) { transform: translate(-22px, 79px); }       /* LINE */
  .cl-google .avatar.ca-b { transform: translate(36px, 90px) scale(.7); }
  .cl-ly .cl-chips:nth-of-type(1) .cl-chip:nth-child(2) { transform: translate(77px, 96px); }        /* Yahoo! */

  /* PR TIMES：右端・中心行の外側（同ピッチ） */
  .solo-prtimes { left: calc(46% + 44px); top: calc(50% + 50px); margin-left: 0; }
}

  
/* ============================================================
   EN追加: 「&」グリフ固定。ArchivoのEt型アンパサンドを使わせない
   ============================================================ */
@font-face {
  font-family: 'AmpFix';
  src: local('Helvetica Neue'), local('Arial'), local('Roboto');
  unicode-range: U+0026;
}

/* 見出し下線を出さない見出し */
.display-heading.no-line { padding-bottom: 0; }
.display-heading.no-line::after { display: none; }
.line-intro .display-heading { line-height: 1.6; padding-bottom: 18px; }
.line-intro .display-heading.no-line { padding-bottom: 0; }

/* 全体地図: 03 実行・運用を主役として強調（英語版の目玉） */
.map-focus { fill: #F2F7FB; stroke: #A8CCE4; stroke-width: 1.5; }
.map-head-desc { font: 400 14px var(--font-body); fill: var(--muted); text-anchor: middle; }
.map-col.mc3 .map-head-name { fill: var(--brand-deep); font-weight: 700; }
.map-col.mc3 .map-head-desc { fill: var(--brand-deep); }
.map-steps li.ms-focus {
  background: #F2F7FB;
  border: 1px solid #A8CCE4;
  border-radius: 12px;
  padding: 18px 16px;
}

/* ヒーロー見出し: ハイライトは「Performance Marketing,」まで（.hlをJSが付与） */
.hero-title .word:first-child { background: none; padding: 0; margin-left: 0; }
.hero-title .word.hl {
  background: linear-gradient(transparent 62%, rgba(72,131,174,.30) 62%);
  padding: 0 4px;
  margin: 0 -4px;
}
/* 行間を少しだけ広げる */
.hero-title { line-height: 1.2; }

/* Services 3本柱の丸: 英語の語長に合わせて大きく（+0.7cm）、内側に余白を確保 */
@media (min-width: 1025px) {
  .subnav-pillars a { flex: 0 0 auto; width: 212px; height: 212px; font-size: 15.5px; padding: 0 24px; text-align: center; }
  .subnav-pillars a .num { font-size: 34px; }
}
@media (max-width: 1024px) and (min-width: 721px) {
  .subnav-pillars a { flex: 0 0 auto; width: 166px; height: 166px; font-size: 13px; padding: 0 14px; text-align: center; }
}
@media (max-width: 720px) {
  .subnav-pillars a { flex: 0 0 auto; width: 160px; height: 160px; font-size: 13px; padding: 0 14px; text-align: center; }
}

/* HOME FV: WordPressチップをShopifyとMetaの中間に置く（YouTubeとの被り解消・PCのみ） */
@media (min-width: 721px) {
  .cl-tools .cl-chips:nth-of-type(2) { position: relative; transform: translate(-95px, -34px); }
}

/* HOME FV: スマホは語ごとに帯を敷く。帯を繋げるためのpadding/marginは
   スマホでは位置ずれになるため無効化し、文字の真下にぴったり敷く */
@media (max-width: 720px) {
  .hero-title .word.hl { padding: 0; margin: 0; }
}

/* About: ミッションリードの段落間を少しだけ空ける（PC・スマホ共通） */
.mission-lead .pillar-intro .lead + .lead { margin-top: 12px; }

/* About: スマホのミッションリードの行間を通常に戻す */
@media (max-width: 720px) {
  .mission-lead .lead, .mission-lead .pillar-intro .lead { line-height: 1.8; }
}

/* Services 実行・運用: 写真スロットにプラットフォームロゴを敷き詰める */
.sol-photo.sol-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: var(--brand-tint);
  border-radius: 12px;
  padding: 28px;
  min-height: 220px;
}
.sol-photo.sol-logos .ci {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 72px;
  width: 72px; height: 72px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(20,32,43,.08);
}
.sol-photo.sol-logos .ci svg, .sol-photo.sol-logos .ci img { width: 44px; height: 44px; object-fit: contain; }
.sol-photo.sol-logos .ci.wide { width: 150px; }
.sol-photo.sol-logos .ci.wide img { width: 120px; height: auto; }

/* ==== patches/_shared.css ==== */
/* ------------------------------------------------------------
   Shared fixes found while finishing the pages (apply to every English page)
   ------------------------------------------------------------ */

/* Logged-in editors: keep the sticky header below the WordPress admin bar */
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .site-header { top: 0; } }   /* the admin bar scrolls away at this width */

/* Topic pill had the same tint as the hovered card and disappeared on hover */
.post-tag { transition: background .3s; }
.post-card:hover .post-tag { background: var(--bg); }

/* Touch devices keep :hover after a tap: do not leave filter chips lifted */
@media (hover: none) {
  .filter-btn:hover { transform: none; }
}

/* ==== patches/about.css ==== */
/* ============================================================
   About (en/page-about-us.php): page patch, loaded after site.css.
   This file is enqueued on every English page, so every selector
   below is one that only exists in the About template.
   ============================================================ */

/* ---------- Hero: the eyebrow is the page <h1>, still sized as an eyebrow ---------- */
.about-hero h1.eyebrow {
  font: 500 12px/1 var(--font-mono);
  letter-spacing: .16em;
  max-width: none;
}

/* ---------- Mission: heading left, statement right ----------
   Replaces .mission-lead + .mission-photo while there is no photo for the slot. */
.mission-statement {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--s3) var(--s5);
  align-items: start;
  padding-block: clamp(18px, 2.6vw, 44px);
}
.mission-statement .lead { line-height: 1.8; }
.mission-statement .lead + .lead { margin-top: 12px; }
@media (min-width: 901px) {
  /* first text line sits on the heading's first line, not above it */
  .mission-statement-body { padding-top: .55em; }
}
@media (max-width: 900px) {
  .mission-statement { grid-template-columns: 1fr; }
}

/* ---------- Our strength ---------- */
/* Every card reads the same way at every width: icon, number, label underneath.
   With flex-wrap the label sat beside the number in some cards and below it in others
   (and hopped between the two while the number counted up). Icons, numbers and labels
   now also start at the same height across a row, whether a label takes one line or two. */
.stats-row .stat-card { align-content: start; }
.stats-row .stat-body {
  align-self: start;
  justify-self: stretch;
  min-width: 0;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
}
/* "150,000+" has to fit the card. The container stops growing at 1240px, so the number
   stops growing with it (site.css let it reach 54px and run into the card padding on
   wide screens). 3.2vw is 46px at 1440, as designed. */
.stats-row .stat-number {
  white-space: nowrap;
  font-size: clamp(36px, 3.2vw, 47px);
}
/* A two-line label splits evenly instead of leaving one word on the second line */
.stats-row .stat-card-label { text-wrap: balance; }
/* Four columns are too narrow for the number just above the tablet breakpoint */
@media (min-width: 901px) and (max-width: 1023px) {
  .stats-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Meet the founders ---------- */
.founders-grid {
  --founders-gap: var(--s3);
  /* no row gap: a closed bio must not push the next section down */
  gap: 0 var(--founders-gap);
  /* both cards end on the same line even when one title wraps further */
  align-items: stretch;
}
/* height:auto lets the 4:3 aspect-ratio keep ruling now that the <img> carries width/height */
.founder-photo { height: auto; object-position: 50% 22%; }

/* Title: three parts. One per line, no separators, until the whole title fits on one line.
   Both cards then always break in the same places and no "|" can end a line.
   It is a label, not prose: plain wrapping, so every browser breaks a long part the same way
   (the global p { text-wrap: pretty } gave "TECH &" a line to itself at some widths). */
.founder-card .founder-role { text-wrap: wrap; }
.founder-role > span { display: block; }
.founder-role-sep { display: none; }
@media (min-width: 721px) {
  /* never under the + marker */
  .founder-card .founder-role { padding-right: 24px; }
}
@media (min-width: 1280px) {
  /* "A | B | C" on one line: 476px of text in a 486px box.
     Each "|" hangs in the gap to the left of its own part. Should the line ever wrap (a fallback
     font with wider letters), the part that starts the new line takes its "|" outside the box,
     where it is clipped, so a separator never opens or ends a line. */
  .founder-card .founder-role {
    --role-sep: 1.92em; /* three cells of the mono face, as in "A | B" */
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--role-sep);
    overflow: hidden;
  }
  .founder-role > span { position: relative; min-width: 0; }
  .founder-role-sep {
    display: block;
    position: absolute;
    top: 0;
    right: 100%;
    width: var(--role-sep);
    text-align: center;
  }
}

/* Bio panel. The space above it lives inside the panel, so a closed one is 0px tall. */
.founder-profile {
  visibility: hidden;
  transition: max-height .6s var(--ease-out), opacity .4s var(--ease-out),
              transform .45s var(--ease-out), visibility 0s linear .6s;
}
.founder-profile.is-open {
  visibility: visible;
  max-height: 1800px; /* longest bio is about 1,250px at 320px wide */
  /* The panel takes its height at once and the text fades up into it. (Animating max-height
     towards a cap reached the real height within a few frames anyway.) */
  transition: max-height 0s, opacity .4s var(--ease-out) .05s,
              transform .45s var(--ease-out) .05s, visibility 0s;
}
/* Switching from one founder to the other: the outgoing bio leaves at once and the incoming
   one is already full height, so the two are never stacked and the section below does not
   jump down and back. Closing the only open bio keeps its slide. */
.founders-grid:has(.founder-profile.is-open) .founder-profile:not(.is-open) { transition: none; }
.founder-profile-inner {
  position: relative;
  margin-top: var(--s3);
}
/* Notch on the panel edge, under the founder whose bio is open */
.founder-profile-inner::before {
  content: "";
  position: absolute;
  top: -7px;
  left: calc((100% - var(--founders-gap)) / 4);
  width: 12px; height: 12px;
  margin-left: -6px;
  background: var(--bg);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  transform: rotate(45deg);
}
.founder-profile + .founder-profile .founder-profile-inner::before {
  left: calc(100% - (100% - var(--founders-gap)) / 4);
}

@media (max-width: 720px) {
  .founders-grid { --founders-gap: var(--s2); }
  /* Two narrow cards: the + marker sits in its own strip below the title */
  .founder-card { padding-bottom: 44px; }
  .founder-card .founder-role { padding-right: 0; }
  .founder-profile-inner { margin-top: var(--s2); }
}

/* Phones. The longest run that has to stay on one line in either title is "TECH & PERFORMANCE"
   (18 cells). If it does not fit the card, Takumi's title runs a line longer than Leo's and
   "CEO &" drops off "CO-FOUNDER". 12px from 410px up; below that the title is 11px and, on the
   narrowest phones, the card gives up 4px of padding each side. */
@media (max-width: 579px) {
  /* the long last part breaks after its second word in both cards ("GLOBAL MARKETING" /
     "STRATEGIST", "TECH & PERFORMANCE" / "MARKETING"), not in one card a few px before the other */
  .founder-role > span:last-child { max-width: 13em; }
}
@media (max-width: 409px) {
  .founder-card .founder-role { font-size: 11px; letter-spacing: .02em; }
}
/* and "Takumi Noguchi" stays on one line, so both cards read on the same lines */
@media (max-width: 389px) {
  .founder-name { font-size: 15.5px; }
}
@media (max-width: 379px) {
  .founder-card { padding-inline: 12px; }
}
@media (max-width: 359px) {
  .founder-name { font-size: 14px; }
}
@media (max-width: 354px) {
  .founder-card .founder-role { font-size: 10.5px; letter-spacing: 0; }
}

/* Touch: no hover lift left behind after a tap */
@media (hover: none) {
  .founder-card:hover { transform: none; box-shadow: none; }
}

/* ---------- Company ---------- */
.company-table td { overflow-wrap: break-word; }
/* list rows wrap like the site's paragraphs: no single word left on the last line */
.company-table li { text-wrap: pretty; }
/* 44px tap area for the inline links without moving the text */
.company-table td a { position: relative; }
.company-table td a::after {
  content: "";
  position: absolute;
  inset: -13px -8px;
}
/* The phone number dials on tap but reads as plain text, like the rows around it */
.company-table td a.company-tel { color: inherit; border-bottom: 0; white-space: nowrap; }

/* ==== patches/article.css ==== */
/* ============================================================
   Article: en/single.php  (/en/<slug>/)
   記事ページ専用。patches/*.css は英語サイトの全ページで読み込まれるため、
   すべて .article-page 配下に閉じ込めて他ページへ漏らさない。

   1. Header block     … パンくず風アイブロウ / H1 / 日付（.page-hero の地色を流用）
   2. Cover + layout   … アイキャッチ、本文カラム（約70字）、PCは目次を右レールに固定
   3. .entry           … the_content() の組版（site.css のリセットをここで組み直す）
   4. Tables / embeds  … 表は article.js が .table-wrap > .table-scroll で包む
   5. Table of contents（Easy Table of Contents: #ez-toc-container）
   6. More insights
   ============================================================ */

/* ------------------------------------------------------------
   1. Header block
   ------------------------------------------------------------ */
.article-page .article-hero {
  padding-block: clamp(36px, 5.2vw, 72px) clamp(28px, 3.4vw, 44px);
}
.article-page .article-crumb {
  margin-bottom: var(--s2);
  padding-block: 16px 17px;
  line-height: 1.5;
}
/* 「/ トピック」は1つの塊（.crumb-here）で折り返す：「/」だけが行末に残らない */
.article-page .article-crumb .crumb-here { display: inline-block; }
.article-page .article-crumb .sep { margin-right: 10px; color: var(--brand); }
/* タップ領域は ::after で上下に広げる（44px以上）。行の高さには影響しない */
.article-page .article-crumb a {
  position: relative;
  margin-right: 10px;
  transition: color .3s;
}
.article-page .article-crumb a::after {
  content: "";
  position: absolute;
  inset: -16px -10px -17px;
}
.article-page .article-crumb a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
/* 320px幅でも「INSIGHTS / INFLUENCER MARKETING」（最長のトピック）が1行に収まるよう、字間だけ詰める */
@media (max-width: 339px) {
  .article-page .article-crumb { letter-spacing: .1em; }
}

/* タイトルは40〜100字。100字でもPCで3〜4行、360pxでもはみ出さない大きさに */
.article-page .article-title {
  font-size: clamp(28px, 1.6vw + 21px, 44px);
  line-height: 1.16;
  letter-spacing: -0.012em;
  max-width: 24em;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.article-page .article-meta {
  margin-top: var(--s3);
  font: 500 12px/1 var(--font-mono);
  letter-spacing: .12em;
  color: var(--brand-deep);
}

/* ------------------------------------------------------------
   2. Cover + layout
   ------------------------------------------------------------ */
.article-page .article-body {
  padding-top: 0;
  padding-bottom: clamp(64px, 8vw, 112px);
}
/* 本文は18pxで1行およそ70字（68〜72字）になる幅 */
.article-page .article-grid { --measure: 39.5rem; }

/* アイキャッチ：比率はそのまま、カードと同じ角丸・罫線 */
.article-page .article-cover {
  max-width: var(--measure);
  margin: 0 0 var(--s4);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-alt);
}
.article-page .article-cover img { width: 100%; height: auto; }

.article-page .entry {
  display: flow-root;
  max-width: var(--measure);
  font-size: 18px;
  line-height: 1.75;
  color: var(--muted);
  overflow-wrap: break-word;
}

/* PC：目次（プラグインが本文内に差し込む）があれば、本文の右に固定レールとして出す。
   .entry を display:contents で解体し、子要素を .article-grid のグリッドに直接並べる。
   :has() 非対応ブラウザや目次なしの記事では、下の通常の1カラム（目次は本文内のカード）のまま */
@media (min-width: 1100px) {
  .article-page .article-grid:has(.entry > #ez-toc-container) {
    display: grid;
    grid-template-columns: minmax(0, var(--measure)) minmax(0, 20rem);
    justify-content: space-between;
    column-gap: var(--s5);
    align-items: start;
  }
  .article-page .article-grid:has(.entry > #ez-toc-container) > .entry { display: contents; }
  .article-page .article-grid:has(.entry > #ez-toc-container) > .article-cover,
  .article-page .article-grid:has(.entry > #ez-toc-container) > .entry > * {
    grid-column: 1;
    min-width: 0;
  }
  .article-page .article-grid:has(.entry > #ez-toc-container) > .entry > #ez-toc-container {
    grid-column: 2;
    grid-row: 1 / span 2000;
    position: sticky;
    top: 112px;
    margin-top: 0;
    /* 画面より長い目次は、見出し行を残したままカードの中だけをスクロールさせる */
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 136px);
    /* 下端の余白は nav::after のフェードが兼ねる。0 にはしない：カードの高さに端数が出ると、
       スクロール枠（nav）の描画が1px下へずれて、カードの下の罫線を隠すことがある */
    padding-bottom: 2px;
    overflow: hidden;
  }
  /* 目次が本文の先頭にある記事：次の要素が本文カラムの1行目になるので上余白を消す */
  .article-page .article-grid:has(.entry > #ez-toc-container) > .entry > #ez-toc-container:first-child + * { margin-top: 0; }

  /* グリッドアイテムは、左右マージンが auto だと本文幅に広がらず「中身の幅」まで縮む
     （ブロックなら auto でも本文幅のまま）。中央寄せの埋め込み・動画は中身に決まった幅が無く、
     縮むと崩れる・消えるので auto を外す。幅が中身で決まる画像・表だけ中央寄せを残す */
  .article-page .article-grid:has(.entry > #ez-toc-container) > .entry > .aligncenter:not(.wp-block-image, .wp-block-table, .wp-caption, img) { margin-inline: 0; }
  /* float もグリッドアイテムには効かない。回り込み指定の画像は、このレイアウトでは
     スマホと同じく回り込みなしの通常の画像として本文カラムに置く */
  .article-page .article-grid:has(.entry > #ez-toc-container) > .entry > :is(.alignleft, .alignright) { max-width: 100%; margin: 1.35em 0 0; }
}

/* ------------------------------------------------------------
   3. .entry: the_content() の組版
   余白は margin-top だけで作る（ブロックでもグリッドでも同じ結果になる）
   ------------------------------------------------------------ */
.article-page .entry > * { margin-top: 1.35em; margin-bottom: 0; }
.article-page .entry > :first-child { margin-top: 0; }
.article-page .entry p:empty { display: none; }
.article-page .entry br.is-leading-br { display: none; }  /* article.js が付ける：段落先頭の余分な改行 */
/* site.css は p に text-wrap: pretty を掛けているが、長文では段落の最後の数行だけ
   早めに折り返されて右端が不揃いに見えるため、本文は通常の折り返しに戻す */
.article-page .entry p,
.article-page .entry li { text-wrap: wrap; }

/* 見出し */
.article-page .entry h2,
.article-page .entry h3,
.article-page .entry h4 {
  color: var(--ink);
  text-wrap: balance;
  overflow-wrap: break-word;
}
.article-page .entry h2 {
  font: 600 clamp(24px, 2.5vw, 32px)/1.22 var(--font-display);
  letter-spacing: -0.018em;
  margin-top: 2.1em;
}
.article-page .entry h3 {
  font: 600 clamp(19px, 1.9vw, 23px)/1.35 var(--font-body);
  letter-spacing: -0.01em;
  margin-top: 1.9em;
}
.article-page .entry h4 {
  font: 600 clamp(17px, 1.6vw, 19px)/1.45 var(--font-body);
  letter-spacing: -0.005em;
  margin-top: 1.7em;
}
.article-page .entry :is(h2, h3, h4) + * { margin-top: .75em; }
.article-page .entry :is(h2, h3, h4) + :is(figure, table, blockquote, pre, .table-wrap, .wp-block-image) { margin-top: 1.15em; }
.article-page .entry h2 + h3,
.article-page .entry h3 + h4 { margin-top: 1.1em; }
/* 旧記事は見出しの中身を <strong> で包んでいる。太さ・色は見出しに合わせる */
.article-page .entry :is(h2, h3, h4) :is(strong, b) { font-weight: inherit; color: inherit; }
.article-page .entry :is(h2, h3, h4) a { text-decoration-thickness: 2px; }

/* 文中 */
.article-page .entry strong,
.article-page .entry b { font-weight: 600; color: var(--ink); }
.article-page .entry a {
  color: var(--brand-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--brand);
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
  transition: color .3s, text-decoration-color .3s;
}
.article-page .entry a:hover { color: var(--ink); text-decoration-color: var(--ink); }
.article-page .entry a :is(strong, b) { color: inherit; }
.article-page .entry small { font-size: .86em; }
.article-page .entry sup,
.article-page .entry sub { font-size: .72em; line-height: 0; }
.article-page .entry sup a { text-decoration: none; }
.article-page .entry mark { background: var(--brand-tint); color: var(--ink); padding: 0 .2em; }

/* リスト */
.article-page .entry ul { padding-left: 1.4em; }
.article-page .entry ol { padding-left: 2.2em; }  /* 2桁の番号（10. 以降）が本文の左端からはみ出さない幅 */
.article-page .entry ul { list-style: disc; }
.article-page .entry ol { list-style: decimal; }
.article-page .entry li { padding-left: .3em; }
.article-page .entry li + li { margin-top: .55em; }
.article-page .entry li::marker { color: var(--brand); }
.article-page .entry ol > li::marker {
  font-family: var(--font-mono);
  font-size: .86em;
  font-weight: 500;
  color: var(--brand-deep);
}
.article-page .entry li > :is(ul, ol) { margin-top: .55em; }
.article-page .entry li > p + p { margin-top: .6em; }
.article-page .entry ul ul { list-style: circle; }
.article-page .entry ul ul ul { list-style: square; }
.article-page .entry ol ol { list-style: lower-alpha; }
.article-page .entry ol ol ol { list-style: lower-roman; }

/* 引用：トップのレビュー引用（.review-quote）と同じ左罫線＋淡い地色。
   記事ではX投稿や動画を包む枠としても使われるので、引用符の装飾は付けない */
.article-page .entry blockquote {
  border-left: 3px solid var(--brand);
  border-radius: 0 12px 12px 0;
  background: var(--bg-alt);
  padding: var(--s3) clamp(20px, 3vw, 32px);
  color: var(--ink);
}
.article-page .entry blockquote > * + * { margin-top: .9em; }
.article-page .entry blockquote cite {
  display: block;
  margin-top: var(--s2);
  font: 500 11px/1.5 var(--font-mono);
  letter-spacing: .16em;
  font-style: normal;
  color: var(--brand-deep);
}

/* 区切り線。ブラウザ既定の左右マージン auto は外す
   （PCの目次レールではグリッドアイテムになり、auto のままだと幅0に縮んで線が消える） */
.article-page .entry hr {
  height: 0;
  border: 0;
  border-top: 1px solid var(--line);
  margin-top: var(--s5);
  margin-inline: 0;
}
.article-page .entry hr + * { margin-top: var(--s5); }
/* 点線スタイル：hr は既定で overflow:hidden のため、高さ0のままだと「···」が隠れる */
.article-page .entry hr.is-style-dots {
  height: auto;
  overflow: visible;
  margin-top: var(--s4);
  border: 0;
  line-height: 1;
  text-align: center;
}
.article-page .entry hr.is-style-dots + * { margin-top: var(--s4); }
.article-page .entry hr.is-style-dots::before {
  font: 500 22px/1 var(--font-mono);
  letter-spacing: 1.2em;
  padding-left: 1.2em;
  color: var(--brand);
}

/* 画像・キャプション */
.article-page .entry figure { margin-inline: 0; margin-bottom: 0; }
.article-page .entry img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}
.article-page .entry figure img { border: 1px solid var(--line); }
.article-page .entry figcaption,
.article-page .entry .wp-element-caption {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  text-align: left;
}
.article-page .entry .wp-block-image figure { margin: 0; }
.article-page .entry .aligncenter,
.article-page .entry .wp-block-image figure.aligncenter { margin-inline: auto; }  /* 2行目：旧マークアップ（div.wp-block-image > figure）は上の margin:0 に負けて左寄せになるため */
.article-page .entry figure.aligncenter > figcaption,
.article-page .entry .aligncenter > .wp-element-caption { text-align: center; }
/* テーマは幅広・全幅の配置を持たないので、本文カラムに収める */
.article-page .entry .alignwide,
.article-page .entry .alignfull { width: auto; max-width: 100%; margin-inline: 0; }
/* 回り込み画像：上端を隣の段落の1行目に揃える（段落の上余白 1.35em + 行の半端 6px） */
.article-page .entry .alignleft { float: left; max-width: 50%; margin: calc(1.35em + 6px) 1.5em .8em 0; }
.article-page .entry .alignright { float: right; max-width: 50%; margin: calc(1.35em + 6px) 0 .8em 1.5em; }

/* コード */
.article-page .entry code,
.article-page .entry kbd {
  font: 500 .86em/1.5 var(--font-mono);
  background: var(--brand-tint);
  color: var(--ink);
  padding: 2px 6px;
  border-radius: 4px;
  overflow-wrap: anywhere;
}
.article-page .entry pre {
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 20px var(--s3);
  overflow-x: auto;
  font: 400 14px/1.7 var(--font-mono);
  color: var(--ink);
  white-space: pre;
  -webkit-overflow-scrolling: touch;
}
.article-page .entry pre code { background: none; padding: 0; border-radius: 0; font: inherit; overflow-wrap: normal; }

/* ------------------------------------------------------------
   4. Tables / embeds
   ------------------------------------------------------------ */
/* article.js が <table> を .table-wrap > .table-scroll で包む。
   横スクロールは必ずこの枠の中だけで起き、ページ全体は横に動かない */
.article-page .entry .table-wrap {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg);
}
.article-page .entry .table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.article-page .entry .table-scroll:focus-visible { outline-offset: -2px; }
/* 横に続きがある側の端を地色へフェードさせて、スクロールできることを示す。
   最初の位置（.is-start）の右端は、article.js が測った「次の列の頭」の幅（--peek）にだけ掛け、
   見出し行の高さに矢印を出す。完全に見えている列の文字には、フェードも矢印も重ならない。
   フェードの色は、見出し行（高さ --head-h）では見出しの地色、その下は白 */
.article-page .entry .table-wrap::before,
.article-page .entry .table-wrap::after {
  content: "";
  position: absolute; top: 0; bottom: 0;
  z-index: 1;
  width: 28px;
  opacity: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: 0 0, 0 var(--head-h, 0px);
  background-size: 100% var(--head-h, 0px), 100% calc(100% - var(--head-h, 0px));
  transition: opacity .3s;
}
.article-page .entry .table-wrap::before {
  left: 0;
  background-image:
    linear-gradient(to left, rgba(244,247,249,0), var(--bg-alt)),
    linear-gradient(to left, rgba(255,255,255,0), var(--bg));
}
.article-page .entry .table-wrap::after {
  right: 0;
  background-image:
    linear-gradient(to right, rgba(244,247,249,0), var(--bg-alt) var(--head-stop, 100%)),
    linear-gradient(to right, rgba(255,255,255,0), var(--bg));
}
.article-page .entry .table-wrap.is-scrollable:not(.is-start)::before,
.article-page .entry .table-wrap.is-scrollable:not(.is-end)::after { opacity: 1; }
/* 最初の位置：幅は「次の列の頭」ちょうど。見出し行はすぐ地色へ戻す
   （矢印の横や下に、次の列の見出しの頭文字が透けて残らない） */
.article-page .entry .table-wrap.is-scrollable.is-start::after {
  width: var(--peek, 28px);
  --head-stop: 25%;
}
.article-page .entry .table-wrap.is-scrollable.is-start.is-hinted::after {
  content: "\2192";
  padding: 13px 10px 0 0;
  text-align: right;
  font: 600 15px/20px var(--font-body);
  color: var(--brand-deep);
}

.article-page .entry table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 15px;
  line-height: 1.55;
  text-align: left;
}
.article-page .entry table th,
.article-page .entry table td {
  padding: 14px 18px;
  border: 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  word-break: normal;
  overflow-wrap: break-word;
}
.article-page .entry table th {
  background: var(--bg-alt);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
}
.article-page .entry table thead { border-bottom: 0; }
/* 3列以上の表は、列が潰れて読めなくなる前に横スクロールへ切り替える。
   1列あたりの最小幅：PC・タブレット 120px（5列まで本文幅に収まる）、スマホ 170px（下の @media）。
   横スクロールになった表の最終的な列幅は article.js が決める（完全に見える列 + 次の列の頭） */
.article-page .entry .table-wrap[data-cols="3"] table,
.article-page .entry .table-wrap[data-cols="4"] table,
.article-page .entry .table-wrap[data-cols="many"] table { min-width: calc(var(--cols, 3) * 120px); }
/* 横スクロールする表は、列幅を中身の量に合わせて配分する。投稿画面の「固定幅」（等幅の列）のままだと、
   文章の長い列だけ行が伸び、見えている列に大きな空きができる。枠に収まる表は投稿側の指定のまま */
.article-page .entry .table-wrap.is-scrollable table { table-layout: auto; }
/* 3列以上の表は1列目を行見出しとして少し強める（2列の対比表は左右を同じ重さに保つ） */
.article-page .entry .table-wrap[data-cols="3"] td:first-child,
.article-page .entry .table-wrap[data-cols="4"] td:first-child,
.article-page .entry .table-wrap[data-cols="many"] td:first-child { color: var(--ink); font-weight: 500; }
.article-page .entry table tr:last-child > td,
.article-page .entry table tbody:last-child > tr:last-child > th { border-bottom: 0; }
.article-page .entry .wp-block-table { overflow: visible; }
/* JSが動かない場合の保険：表そのものを横スクロールさせる */
.article-page .entry > table { display: block; overflow-x: auto; }
.article-page .entry .wp-block-table > table { display: block; overflow-x: auto; }

/* 埋め込み */
.article-page .entry iframe { max-width: 100%; border: 0; }
.article-page .entry .wp-block-embed { overflow-wrap: break-word; }
.article-page .entry .wp-block-embed.is-type-video .wp-block-embed__wrapper {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-alt);
}
.article-page .entry .wp-block-embed.is-type-video .wp-block-embed__wrapper iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
/* 自サイト記事の埋め込みカードは本文カラムの幅いっぱいに（中身はレスポンシブ） */
.article-page .entry iframe.wp-embedded-content { width: 100%; max-width: 100%; }
/* WordPress は埋め込みカードの iframe を、読み込み完了まで position:absolute + visibility:hidden で置く。
   見えていなくても横スクロールの原因になるので、枠（.wp-block-embed__wrapper）の左上に固定しておく */
.article-page .entry .wp-block-embed__wrapper { position: relative; }
.article-page .entry iframe.wp-embedded-content[style*="absolute"] { top: 0; left: 0; }
/* X / WordPress の埋め込みが読み込まれる前（または読み込めない環境）の表示。引用の装飾は外す */
.article-page .entry blockquote.twitter-tweet,
.article-page .entry blockquote.wp-embedded-content {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  padding: 20px var(--s3);
  font-size: 15px;
  line-height: 1.65;
  color: var(--muted);
  text-align: left;
}
.article-page .entry .twitter-tweet { max-width: 100%; }
.article-page .entry .twitter-tweet-rendered { margin-top: 0 !important; margin-bottom: 0 !important; }
.article-page .entry .wp-block-embed.aligncenter .twitter-tweet-rendered { margin-inline: auto; }

/* ------------------------------------------------------------
   5. Table of contents（Easy Table of Contents）
   プラグイン標準の灰色ボックスを、V3の静かなカードに置き換える。
   プラグイン側のCSS（#ez-toc-container …）とインラインCSSに勝つよう、
   すべて .article-page .entry #ez-toc-container から書く
   ------------------------------------------------------------ */
.article-page .entry #ez-toc-container {
  display: block;
  width: auto;
  max-width: none;
  margin-bottom: 0;
  padding: 20px var(--s3) var(--s3);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: none;
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
}
/* 閉じた状態（プラグインのJSが ul に display:none を直書きする）は、上下の余白を揃える */
.article-page .entry #ez-toc-container:has(nav > ul[style*="display: none"]) { padding-bottom: 20px; }
.article-page .entry #ez-toc-container:has(nav > ul[style*="display: none"]) nav { margin-top: 0; }
.article-page .entry #ez-toc-container .ez-toc-title-container {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s2);
  width: 100%;
  min-height: 28px;
}
.article-page .entry #ez-toc-container .ez-toc-title {
  display: block;
  margin: 0; padding: 0;
  font: 500 12px/1.4 var(--font-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand-deep);
}
/* 開閉ボタン：44pxのタップ領域を確保しつつ、見た目はアイコンだけ */
.article-page .entry #ez-toc-container .ez-toc-title-toggle { display: block; flex: 0 0 auto; }
.article-page .entry #ez-toc-container a.ez-toc-toggle {
  display: flex; align-items: center; justify-content: center;
  float: none !important;
  width: 44px; height: 44px;
  margin: -8px -12px -8px 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 8px;
  box-shadow: none;
  text-shadow: none;
  color: var(--brand-deep);
  transition: background .3s;
}
.article-page .entry #ez-toc-container a.ez-toc-toggle:hover { background: var(--brand-tint); }
/* プラグイン既定のフォーカス枠（クリック後も残る青い太枠）は出さず、
   キーボード操作のときだけサイト共通の枠（site.css の :focus-visible と同じ）を出す */
.article-page .entry #ez-toc-container a.ez-toc-toggle:focus { outline: 0; }
.article-page .entry #ez-toc-container a.ez-toc-toggle:focus-visible { outline: 2px solid var(--brand-deep); outline-offset: 3px; }
/* タッチ端末はタップ後も :hover が残るので、地色を付けない */
@media (hover: none) {
  .article-page .entry #ez-toc-container a.ez-toc-toggle:hover { background: none; }
}
.article-page .entry #ez-toc-container .ez-toc-js-icon-con {
  display: block;
  float: none;
  left: 0;
  width: auto;
  border: 0;
  border-radius: 0;
}
.article-page .entry #ez-toc-container .ez-toc-icon-toggle-span { width: auto; height: auto; gap: 2px; }
.article-page .entry #ez-toc-container .ez-toc-toggle svg {
  fill: currentColor !important;
  color: var(--brand-deep) !important;
}

.article-page .entry #ez-toc-container nav { margin-top: 10px; }
.article-page .entry #ez-toc-container ul {
  list-style: none;
  margin: 0; padding: 0;
  overflow: visible;
}
.article-page .entry #ez-toc-container nav ul li {
  margin: 0; padding: 0;
  list-style: none;
  overflow: visible;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
}
.article-page .entry #ez-toc-container nav ul li + li { border-top: 1px solid var(--line); }
.article-page .entry #ez-toc-container nav ul li a {
  display: flex; align-items: baseline;
  gap: 10px;
  padding: 12px 0;
  font-size: inherit;
  font-weight: inherit;
  color: var(--ink);
  text-decoration: none;
  overflow-wrap: break-word;
  transition: color .3s;
}
.article-page .entry #ez-toc-container nav ul li a:visited { color: var(--ink); }
.article-page .entry #ez-toc-container nav ul li a:hover { color: var(--brand-deep); text-decoration: none; }
/* 番号（プラグインのカウンター）は等幅・ブランド色でV3の番号ラベルに揃える */
.article-page .entry #ez-toc-container nav ul li a::before {
  float: none;
  flex: 0 0 auto;
  min-width: 2.1em;
  margin-right: 0;
  font: 500 12px/1 var(--font-mono);
  letter-spacing: .04em;
  color: var(--brand-deep);
}
/* 見出し自体に「1. …」と番号が入っている記事（article.js が .has-own-numbers を付ける）：
   プラグインの番号は出さず、書き手の番号（.toc-num）を同じ番号欄に出す。「1. 1. …」と二重にしない */
.article-page .entry #ez-toc-container.has-own-numbers nav > ul > li > a::before { content: none; }
.article-page .entry #ez-toc-container .toc-num {
  flex: 0 0 auto;
  min-width: 2.1em;
  font: 500 12px/1 var(--font-mono);
  letter-spacing: .04em;
  color: var(--brand-deep);
}
/* 下位見出し（H3）は、スマホ・タブレットの本文内カードでは出さない（目次が画面2枚分になるのを防ぐ） */
.article-page .entry #ez-toc-container nav ul ul { display: none; }

@media (min-width: 1100px) {
  .article-page .article-grid:has(.entry > #ez-toc-container) #ez-toc-container nav {
    flex: 1 1 auto;
    min-height: 0;
    margin-right: -12px;
    padding-right: 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
  }
  /* 下端の余白を兼ねたフェード。続きがある間はリストに重なり、最後までスクロールすると余白に戻る */
  .article-page .article-grid:has(.entry > #ez-toc-container) #ez-toc-container nav::after {
    content: "";
    display: block;
    position: sticky;
    bottom: 0;
    height: 28px;
    background: linear-gradient(to bottom, rgba(244,247,249,0), var(--bg-alt) 75%);
    pointer-events: none;
  }
  .article-page .article-grid:has(.entry > #ez-toc-container) #ez-toc-container:has(nav > ul[style*="display: none"]) { padding-bottom: 20px; }
  .article-page .article-grid:has(.entry > #ez-toc-container) #ez-toc-container:has(nav > ul[style*="display: none"]) nav::after { display: none; }

  /* 右レール：行間を詰め、下位見出しも出す */
  .article-page .article-grid:has(.entry > #ez-toc-container) #ez-toc-container nav ul li { font-size: 14px; }
  .article-page .article-grid:has(.entry > #ez-toc-container) #ez-toc-container nav ul li + li { border-top: 0; }
  .article-page .article-grid:has(.entry > #ez-toc-container) #ez-toc-container nav ul li a { padding: 7px 0; }
  .article-page .article-grid:has(.entry > #ez-toc-container) #ez-toc-container nav ul ul {
    display: block;
    margin: 0 0 4px calc(2.1em * 12 / 14 + 10px);
    padding-left: 12px;
    border-left: 1px solid var(--line);
  }
  .article-page .article-grid:has(.entry > #ez-toc-container) #ez-toc-container nav ul ul li {
    font-size: 13px;
    font-weight: 400;
  }
  .article-page .article-grid:has(.entry > #ez-toc-container) #ez-toc-container nav ul ul li a { padding: 5px 0; color: var(--muted); }
  .article-page .article-grid:has(.entry > #ez-toc-container) #ez-toc-container nav ul ul li a:visited { color: var(--muted); }
  .article-page .article-grid:has(.entry > #ez-toc-container) #ez-toc-container nav ul ul li a:hover { color: var(--brand-deep); }
  .article-page .article-grid:has(.entry > #ez-toc-container) #ez-toc-container nav ul ul li a::before { display: none; }
}
/* タッチ操作の横長タブレットでは、右レールの行も44px以上に */
@media (min-width: 1100px) and (pointer: coarse) {
  .article-page .article-grid:has(.entry > #ez-toc-container) #ez-toc-container nav ul li a { padding: 12px 0; }
  .article-page .article-grid:has(.entry > #ez-toc-container) #ez-toc-container nav ul ul li a { padding: 13px 0; }
}

/* プラグインは目次クリック時に自前のJS（jQuery animate・0.5秒）でスクロールする。
   site.css の html { scroll-behavior: smooth } と重なると、毎フレームのスクロール指定が
   それぞれ「なめらかスクロール」になって動き出しが遅れ、到着まで約2秒かかる。
   記事ページだけブラウザ側のなめらかスクロールを切り、プラグインのアニメーションに任せる */
html:has(.article-page) { scroll-behavior: auto; }

/* 目次から飛んだ先の見出しが、固定ヘッダーの真下に貼り付かないよう少し下げる。
   プラグインのスクロールJSは「見出し内の空span の位置 − ヘッダーの高さ」へ移動するので、
   spanを上へずらして余白を作る。ハッシュ付きURLで直接開いた場合は scroll-margin が効く */
.article-page .entry .ez-toc-section {
  position: relative;
  top: -20px;
  scroll-margin-top: 88px;
}

/* ------------------------------------------------------------
   6. More insights
   ------------------------------------------------------------ */
.article-page .article-more .section-label { margin-bottom: var(--s4); }
.article-page .article-more .post-card h4 { overflow-wrap: anywhere; }
/* アイキャッチ未設定の記事：空の画像枠は出さず、文字だけのカードとして上余白を取る */
.article-page .article-more .post-card.no-thumb .post-link { padding-top: var(--s4); }
/* 「View all insights」は文字リンクのまま、タップ領域だけ44px以上に広げる（見た目の位置は変えない） */
.article-page .article-more .insights-more .link-arrow { padding-block: 13px; margin-block: -13px; }
/* 3枚のカードが 2+1 に割れて1枚だけ余るのを防ぐ：900px以上は3列を保ち、
   それ未満のタブレットは2枚だけ見せる（スマホは3枚を縦に並べる） */
@media (min-width: 900px) and (max-width: 1024px) {
  .article-page .article-more .insights-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .article-page .article-more .post-tag,
  .article-page .article-more .post-meta,
  .article-page .article-more .post-card h4 { margin-inline: var(--s3); }
  .article-page .article-more .post-link .link-arrow { margin-inline: var(--s3); }
}
@media (min-width: 721px) and (max-width: 899px) {
  .article-page .article-more .insights-grid.cols-3 > :nth-child(n+3) { display: none; }
}

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */
@media (max-width: 720px) {
  .article-page .article-meta { margin-top: 20px; }
  .article-page .article-cover { margin-bottom: var(--s3); }
  .article-page .entry { font-size: 17px; line-height: 1.72; }
  .article-page .entry h2 { margin-top: 1.9em; }
  .article-page .entry blockquote { padding: 20px; }
  .article-page .entry table { font-size: 14.5px; }
  .article-page .entry table th,
  .article-page .entry table td { padding: 12px 14px; }
  .article-page .entry .table-wrap.is-scrollable.is-start.is-hinted::after { padding-top: 11px; }
  .article-page .entry .table-wrap[data-cols="3"] table,
  .article-page .entry .table-wrap[data-cols="4"] table,
  .article-page .entry .table-wrap[data-cols="many"] table { min-width: calc(var(--cols, 3) * 170px); }
  .article-page .entry .alignleft,
  .article-page .entry .alignright { float: none; max-width: 100%; margin: 1.35em auto 0; }
  .article-page .entry .ez-toc-section { scroll-margin-top: 72px; }
  .article-page .entry #ez-toc-container { padding: 16px 20px 20px; }
  .article-page .entry #ez-toc-container:has(nav > ul[style*="display: none"]) { padding-bottom: 16px; }
  .article-page .entry #ez-toc-container nav ul li a { padding: 13px 0; }
}

/* ==== patches/chrome.css ==== */
/* ============================================================
   chrome.css — 共通ヘッダー／スマホメニュー／フッターの仕上げ
   site.css の後に全英語ページで読み込まれる。統合時は site.css の
   該当セクション（06 Header / 15 Footer / 24 / 36 / 80）へ移すこと。
   ============================================================ */

/* ---------- 言語切替 ----------
   EN は現在の言語なので <a href="#"> をやめて <span> にした。
   見た目（余白・色）は従来の「.lang-switch a」と同じに保つ */
.lang-switch .is-active { padding: 8px 2px; cursor: default; }
/* JA は文字が小さい（20×33px）ため、見た目はそのままタップ領域だけ44px角に広げる */
.lang-switch a[hreflang] { position: relative; }
.lang-switch a[hreflang]::after {
  content: "";
  position: absolute;
  inset: -6px -12px;
}

/* ---------- ヘッダーナビ: Works / Insights ----------
   原稿では Works / Insights はフッターだけだったが、実績と記事への入口としてヘッダーへ戻した。
   記事ページでは Insights を現在地として示す（aria-current="page" と同じ見た目） */
.header-nav a.is-current { color: var(--ink); border-bottom-color: var(--brand); }

/* 721〜959px：5項目は並びきらないので Home を隠し（ロゴが同じ行き先）、間隔を少し詰める */
@media (min-width: 720.01px) and (max-width: 959px) {
  .header-nav .nav-home { display: none; }
  .header-nav { gap: 20px; }
}
@media (min-width: 720.01px) and (max-width: 839px) {
  .header-inner { gap: 16px; }
  .header-nav { gap: 14px; }
  .logo img { height: 48px; }
  .header-cta { padding-inline: 18px; }
}
/* いちばん狭い帯は、代替フォントで文字幅が広がっても1行に収まるだけの余裕を持たせる */
@media (min-width: 720.01px) and (max-width: 759px) {
  .header-nav { gap: 12px; }
  .header-cta { padding-inline: 16px; }
}

/* ---------- メガメニュー: インフルエンサーマーケティング専用ページへの入口 ----------
   下段は右寄せのリンクだけで左が空いていたので、そこに専用ページ（独立LP）を置く。
   左：専用ページ ／ 右：Service packages・How engagements start・Platforms */
.mega-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 16px;
  row-gap: 4px;
}
.mega-foot .mega-foot-main,
.mega-foot .mega-foot-sub { grid-column: 2; justify-self: end; }
.mega-foot .mega-foot-feature {
  grid-column: 1;
  grid-row: 1 / span 2;
  justify-self: start;
  display: grid;
  gap: 3px;
  /* 文字の左端とホバー時の地色を、上の列（.mega-list a：字下げ16px）にそろえる */
  margin-left: -8px;
  padding: 8px 16px;
  border-radius: 8px;
}
.mega-foot-kicker {
  font: 500 10.5px/1.4 var(--font-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand);
}
.mega-foot-title {
  font: 600 14px/1.4 var(--font-body);
  color: var(--ink);
  transition: color .2s;
}
.mega-foot .mega-foot-feature:hover .mega-foot-title { color: var(--brand-deep); }
@media (min-width: 721px) and (max-width: 860px) {
  .mega-foot .mega-foot-feature { margin-left: -4px; padding-inline: 10px; }
}
@media (min-width: 721px) and (max-width: 799px) {
  .mega-foot .mega-foot-feature { padding-inline: 8px; }
  .mega-foot-title { font-size: 13.5px; }
}

/* ---------- メガメニュー: Esc／リンク選択で閉じた直後 ----------
   カーソルが上に残っていても :hover で開き直さない（chrome.js が .is-dismissed を付け外しする） */
.nav-drop.is-dismissed .nav-drop-panel.nav-mega {
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(8px);
}
.nav-drop.is-dismissed .nav-drop-toggle svg { transform: none; }

/* タッチ端末（タブレット縦・スマホ横）では :hover がタップ後も残り続けるため、
   開閉は .is-open（タップ）だけで決める。2回目のタップで確実に閉じる */
@media (hover: none) {
  .nav-drop:not(.is-open):hover .nav-drop-panel.nav-mega {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(8px);
  }
  .nav-drop:not(.is-open):hover .nav-drop-toggle svg { transform: none; }
}

/* タッチ端末でPCナビが出る幅（タブレット縦／横・スマホ横）では、メガメニュー内の
   行（34〜40px）と右下の小リンク（20px）を指で押せる高さ（44px）にする。
   マウス操作のPCでは従来の詰まった行間のまま */
@media (hover: none) and (pointer: coarse) and (min-width: 721px) {
  .mega-head { min-height: 44px; }
  .mega-list a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  .mega-foot { gap: 0; }
  .mega-foot a { padding-block: 12px; line-height: 20px; }
  /* 行を広げた分だけパネルが高くなる（約475px）。画面に収まらない端末ではパネル内でスクロール */
  .nav-drop .nav-drop-panel.nav-mega {
    max-height: calc(100vh - 94px);
    max-height: calc(100dvh - 94px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* ---------- メガメニュー: 721〜860px ----------
   3列×最小240pxが収まらず、3列目（Execution & Operations）がパネルの外へ
   はみ出して切れ、ページ全体にも横スクロールが出ていた。
   列を可変幅にし、余白と文字をわずかに詰めて3列をパネル内に収める */
@media (min-width: 721px) and (max-width: 860px) {
  .nav-drop .nav-drop-panel.nav-mega {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 8px;
    padding: 18px 14px;
  }
  .mega-head { gap: 8px; padding-inline: 10px; font-size: 15px; }
  .mega-list a { padding-inline: 10px; }
  /* この幅ではホバー時の字下げ分の余裕がないので、背景色の変化だけで示す */
  .mega-list a:hover { padding-left: 10px; }
  .mega-list a::before { display: none; }
  .mega-foot { padding-inline: 4px; }
}
@media (min-width: 721px) and (max-width: 799px) {
  .mega-head { font-size: 14px; }
  .mega-list a { font-size: 13.5px; padding-inline: 8px; }
  .mega-list a:hover { padding-left: 8px; }
}
@media (min-width: 721px) and (max-width: 750px) {
  .nav-drop .nav-drop-panel.nav-mega { column-gap: 6px; padding-inline: 10px; }
}

/* ---------- メガメニュー: 背の低い画面（スマホ横向きなど） ----------
   パネル（約380px）が画面下にはみ出し、下段のリンクに届かなくなるのを防ぐ */
@media (min-width: 721px) and (max-height: 520px) {
  .nav-drop .nav-drop-panel.nav-mega {
    max-height: calc(100vh - 94px);
    max-height: calc(100dvh - 94px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  /* overflow でパネル上の「橋」（::after）が切れるため、トリガー側に同じ役割の橋を架ける */
  .nav-drop-toggle { position: relative; }
  .nav-drop-toggle::after {
    content: "";
    position: absolute;
    top: 100%; left: -16px; right: -16px;
    height: 20px;
  }
}

/* ---------- タブレット以下・タッチ端末: Contactボタンのタップ領域 ----------
   高さが 43px（スマホは 41px）だったので、行の高さを固定して 44px にそろえる
   （上下の余白 12px × 2 ＋ 20px。文字と矢印の間隔は変えない）。
   iPad 横向き（1180px〜）のように幅が広いタッチ端末も対象にするため、幅と pointer の両方で判定する */
@media (max-width: 1024px), (pointer: coarse) {
  .header-cta { line-height: 20px; }
}

/* ---------- スマホメニュー ---------- */
/* 開いたままPC幅へ回転・リサイズされても、閉じるボタンの無いメニューを残さない */
@media (min-width: 721px) {
  .mobile-menu,
  .mobile-menu.is-open { display: none; }
}
@media (max-width: 720px) {
  /* 画面より長いとき（横向き・Services展開時）はメニュー内でスクロールさせる。
     72px = スマホ時のヘッダー高さ。
     背面のページは固定しない：メニューは画面の上部しか覆わないので、固定すると下に見えている
     ページが固まったように見える。ページが動いたらメニューを閉じる（chrome.js 2）。
     メニュー内スクロールの端でページまで動かさない役目は overscroll-behavior が持つ */
  .mobile-menu {
    max-height: calc(100vh - 72px);
    max-height: calc(100dvh - 72px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  /* Services配下の行は38〜42pxだったので44pxを確保 */
  .mm-sub a { min-height: 44px; }
  /* 専用ページの行を足したぶん、展開時の高さを広げる（site.css は 340px） */
  .mobile-menu.mm-services-open .mm-sub { max-height: 420px; }
}
/* 320px 級の端末：専用ページの行が2行に折り返すので、字間だけ詰めて1行に収める */
@media (max-width: 340px) {
  .mm-sub .mm-feature { letter-spacing: .06em; }
}

/* ---------- 360px未満の端末: ロゴとContactボタンが触れないように ---------- */
@media (max-width: 359px) {
  .header-inner { gap: 10px; }
  .logo img { height: 38px; }
  .header-cta { padding-inline: 16px; }
  .header-cta .arrow { display: none; }
}

/* ---------- フッター: 901px〜 ----------
   （上限 1220px を外した：SERVICES 欄に「Influencer marketing in Japan」を足したため、
   1221px 以上の 1fr 幅 221px では2行に折り返していた）
   4列が等幅のままだと「01 Strategy & Consulting」などが2行に折れて列がガタつく。
   各列の最小幅を中身（1行）に合わせ、余りはこれまでどおり 1.3 : 1 : 1 : 1 で配る */
@media (min-width: 901px) {
  .footer-grid {
    grid-template-columns: minmax(140px, 1.3fr) repeat(3, minmax(max-content, 1fr));
    column-gap: clamp(40px, 6vw, 64px);
  }
}

/* ---------- フッター: コピーライトの折り返し位置 ----------
   377px 以下では1行に収まらない。社名の途中（"JDOC," / "Inc."）や "reserved." だけが
   落ちる折れ方をさせず、「© Copyright 2026 JDOC, Inc.」/「All rights reserved.」の間でだけ折る
   （footer.php で2つの span に分けてある） */
.footer-bottom span { white-space: nowrap; }

/* ---------- フッター: 狭いスマホではコピーライトの下に余白を足す ----------
   Contact Form 7 の reCAPTCHA バッジ（右下固定・幅70×高さ60px・下端から14px）が出るページでは、
   435px 未満でコピーライト行の末尾（"reserved."）がバッジの下に隠れるため、行をバッジより上に逃がす。
   バッジが出ないページ（プライバシーポリシー）には空の帯を作らない */
@media (max-width: 480px) {
  body:has(.grecaptcha-badge) .site-footer { padding-bottom: 88px; }
}

/* ---------- フッター: タブレット以下・タッチ端末はリンクのタップ領域を44px以上に ----------
   行の高さを 42→46px に広げ、行間を 8→4px に詰めて、見た目の行送り（50px）は変えない */
@media (max-width: 1024px), (pointer: coarse) {
  .footer-nav { gap: 4px; }
  .footer-nav a { padding-block: 8px; }
  .footer-head { margin-bottom: 18px; }
}

/* ==== patches/contact.css ==== */
/* ============================================================
   EN V3 patch: Contact (/en/contactus/) + Thank you (/thanks-overseas/)
   Loaded after site.css. Everything is scoped to .contact-main,
   .contact-cf7 or .thanks-*, so no other page is affected.

   1. Page background (hero haze without the cut edge) and entrance
   2. Promise cards
   3. Contact Form 7 form, styled to match the V3 form
   4. Contact Form 7 runtime states
   5. Thank-you page
   ============================================================ */

/* ------------------------------------------------------------
   1. Page background and entrance
   The short hero (.page-hero-min) is lower than the top-right haze it
   carries, so the haze was cut off in a straight line at the hero's
   bottom edge. Paint that haze on <main> instead: same gradient, it
   now fades out on its own. The bottom-left haze is unchanged.
   ------------------------------------------------------------ */
.contact-main {
  background:
    radial-gradient(800px 300px at 92% -8px, #B7D2E7 0%, rgba(183,210,231,0) 62%),
    var(--bg);
}
.contact-main > .page-hero {
  background: radial-gradient(700px 460px at 2% 100%, #C9DEED 0%, rgba(201,222,237,0) 50%);
}
.contact-main > .page-hero + .section {
  background: radial-gradient(700px 460px at 2% 0%, #C9DEED 0%, rgba(201,222,237,0) 50%);
}

/* The page label is the h1: keep the small blue label look (.page-hero h1 would enlarge it). Same as Insights / Works. */
.contact-main .page-hero h1.eyebrow {
  font-size: 12px;
  line-height: 1;
  max-width: none;
}

/* Entrance. The same movement as .reveal (28px rise and fade, same duration and easing), as a CSS animation.
   .reveal starts at opacity 0 and stays there until site.js shows it. Nothing on these two pages may wait
   for a script: the e-mail address and phone number are what is left when the form cannot be used. */
.contact-main > .page-hero .eyebrow,
.contact-main > .page-hero h1,
.contact-main .contact-side,
.contact-cf7,
.thanks-card {
  animation: contact-rise var(--dur) var(--ease-out) backwards;
}
@keyframes contact-rise {
  from { opacity: 0; transform: translateY(28px); }
}
/* One-column layout: the promise cards start below the fold. The template's inline script holds their entrance
   and releases it when they scroll into view; taking the class away starts the animation from its first frame. */
.contact-main .contact-side.is-held {
  animation: none;
  opacity: 0;
  transform: translateY(28px);
}
/* The hero text rises from below its resting place, which is past the hero's bottom edge, and site.css clips
   .page-hero. On these pages the hero has nothing to clip (the haze is a background), so the text is let through
   instead of losing its lower half for the first frames. flow-root keeps the hero's margins contained as before. */
.contact-main > .page-hero {
  display: flow-root;
  overflow: visible;
}

/* ------------------------------------------------------------
   2. Promise cards
   The list used to be a tick list. The tick bullets were never
   removed when it became icon cards, and sat on each card's corner.
   ------------------------------------------------------------ */
.contact-main .contact-points li::before,
.contact-main .contact-points li::after { content: none; }

/* Where the layout is single-column (touch widths), each line of the direct-contact list is 44px high so the
   e-mail and phone links are full-size tap targets. The wide layout keeps the design's tighter list. */
@media (max-width: 1024px) {
  .contact-main .contact-direct {
    line-height: 44px;
    padding-top: 15px;
  }
  .contact-main .contact-direct a { display: inline-block; }
}

/* ------------------------------------------------------------
   3. Contact Form 7 form
   Markup comes from the form template in the database:
   .field > p > label.label + br + span.wpcf7-form-control-wrap > .input | .select | .textarea
   p > label.check (consent) / .submit-wrap > p > input.wpcf7-submit + span.wpcf7-spinner
   ------------------------------------------------------------ */
.contact-cf7 {
  /* Error red: the design's required-mark red, and a darker step of it for small text (6.4:1 on white). */
  --cf-error: #F0284A;
  --cf-error-text: #B4233C;
  display: block;
}

.contact-cf7 .wpcf7-form {
  display: grid;
  gap: var(--s3);
}
/* autop adds <br> after every label and around the consent text */
.contact-cf7 .field > p > br,
.contact-cf7 .check > br,
.contact-cf7 .submit-wrap br { display: none; }

/* .field > p is what autop produces today; .field itself is covered in case autop is ever switched off */
.contact-cf7 .field,
.contact-cf7 .field > p {
  display: grid;
  gap: 6px;
}
.contact-cf7 .label {
  display: block;
  font: 500 12px/1 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.contact-cf7 .req,
.contact-cf7 .check > span:last-of-type::after {
  color: var(--cf-error);
  margin-left: 4px;
  font-size: 1.1em;
  vertical-align: top;
  position: relative;
  top: -2px;
}
.contact-cf7 .wpcf7-form-control-wrap { display: block; }

.contact-cf7 .input,
.contact-cf7 .select,
.contact-cf7 .textarea {
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  font: 400 16px/1.5 var(--font-body);
  color: var(--ink);
  background-color: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  min-height: 50px;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .3s, background-color .3s;
}
.contact-cf7 .input::placeholder,
.contact-cf7 .textarea::placeholder {
  color: var(--muted);
  opacity: .72;
}
.contact-cf7 .textarea {
  height: 146px;
  min-height: 120px;
  resize: vertical;
}
/* Select: own chevron (same stroke as the header's Services chevron). A long option wraps to a second line
   where the browser allows it, and ends in an ellipsis where it does not. */
.contact-cf7 .select {
  padding-right: 44px;
  white-space: normal;
  text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%231A1F26' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px 16px;
  cursor: pointer;
}
.contact-cf7 .input:focus,
.contact-cf7 .select:focus,
.contact-cf7 .textarea:focus {
  outline: none;
  border-color: var(--brand);
  background-color: var(--bg);
}

/* Consent row. The label is the tap target: padded to 44px+, pulled back so the rhythm stays 24px. */
.contact-cf7 .check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-block: 11px;
  margin-block: -11px;
  font-size: 14px;
  color: var(--muted);
  cursor: pointer;
}
.contact-cf7 .check .wpcf7-form-control-wrap,
.contact-cf7 .check .wpcf7-acceptance,
.contact-cf7 .check .wpcf7-list-item {
  display: contents;
}
.contact-cf7 .check input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 3px 0 0;
  accent-color: var(--brand-strong);
  cursor: pointer;
}
.contact-cf7 .check a { color: var(--brand-deep); text-decoration: underline; }
/* The consent is required, like the starred fields above it */
.contact-cf7 .check > span:last-of-type::after { content: "*"; }

/* Submit. An <input> cannot hold the arrow glyph, so the arrow is a background layer over the button gradient.
   --cf-arrow / --cf-fill / --cf-arrow-pos are local to the button so each state only changes what differs. */
.contact-cf7 .submit-wrap,
.contact-cf7 .submit-wrap > p {
  position: relative;
  width: fit-content;
}
.contact-cf7 .wpcf7-submit {
  --cf-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 9'%3E%3Cpath d='M.6 .6v7.8l4.9-3.9z' fill='%23fff' stroke='%23fff' stroke-width='.4' stroke-linejoin='round'/%3E%3C/svg%3E");
  --cf-fill: linear-gradient(180deg, #4E8CB8 0%, #3D74A0 55%, #35688F 100%);
  --cf-arrow-pos: calc(100% - 33px);
  display: block;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
  padding: 17px 55px 17px 32px;
  border: 0;
  border-radius: 999px;
  font: 600 16px var(--font-body);
  color: #fff;
  background-color: var(--brand-strong);
  background-image: var(--cf-arrow), var(--cf-fill);
  background-repeat: no-repeat;
  background-position: var(--cf-arrow-pos) calc(50% + 1px), 0 0;
  background-size: 6px 9px, 100% 100%;
  box-shadow: 0 6px 14px rgba(46,96,132,.28), inset 0 1px 0 rgba(255,255,255,.28);
  cursor: pointer;
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), background-position .35s var(--ease-out);
}
/* Hover only where there is a real pointer: after a tap on a phone the form stays on the page,
   and a hover state that sticks would leave the button dark. */
@media (hover: hover) {
  .contact-cf7 .wpcf7-submit:not(:disabled):hover {
    --cf-fill: linear-gradient(var(--ink), var(--ink));
    --cf-arrow-pos: calc(100% - 28px);
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(46,96,132,.34), inset 0 1px 0 rgba(255,255,255,.28);
  }
}
.contact-cf7 .wpcf7-submit:not(:disabled):active {
  transform: translateY(1px);
  box-shadow: 0 3px 8px rgba(46,96,132,.30), inset 0 1px 2px rgba(20,32,43,.20);
}

/* ------------------------------------------------------------
   4. Contact Form 7 runtime states
   ------------------------------------------------------------ */
/* Until the consent box is ticked CF7 keeps the button disabled */
.contact-cf7 .wpcf7-submit:disabled {
  opacity: .5;
  box-shadow: none;
  cursor: not-allowed;
}

/* While sending: the button takes no second click and the arrow gives way to a spinner */
.contact-cf7 form.submitting .wpcf7-submit {
  --cf-arrow: none;
  pointer-events: none;
}
.contact-cf7 .wpcf7-spinner {
  position: absolute;
  top: 50%;
  right: 28px;
  width: 16px;
  height: 16px;
  margin: -8px 0 0;
  background: none;
  opacity: 1;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  pointer-events: none;
  animation: contact-spin .8s linear infinite;
}
.contact-cf7 .wpcf7-spinner::before { content: none; }
@keyframes contact-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  /* site.css cuts every animation to a single instant frame; a spinner still has to turn */
  .contact-cf7 .wpcf7-spinner {
    animation-duration: 1.6s !important;
    animation-iteration-count: infinite !important;
  }
}

/* Field errors */
.contact-cf7 .wpcf7-not-valid-tip {
  display: block;
  margin-top: 6px;
  font: 400 13px/1.5 var(--font-body);
  color: var(--cf-error-text);
}
.contact-cf7 .input.wpcf7-not-valid,
.contact-cf7 .select.wpcf7-not-valid,
.contact-cf7 .textarea.wpcf7-not-valid {
  border-color: var(--cf-error);
  background-color: var(--bg);
}
.contact-cf7 .input.wpcf7-not-valid:focus,
.contact-cf7 .select.wpcf7-not-valid:focus,
.contact-cf7 .textarea.wpcf7-not-valid:focus {
  border-color: var(--brand);
}
/* If consent is ever switched to validate-on-submit, its message goes on its own line under the row */
.contact-cf7 .check { flex-wrap: wrap; }
.contact-cf7 .check > span:last-of-type { flex: 1 1 0; min-width: 0; }
.contact-cf7 .check .wpcf7-not-valid-tip { order: 3; flex: 0 0 100%; margin-top: 0; }

/* Form-level message under the button */
.contact-cf7 .wpcf7 form .wpcf7-response-output {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-alt);
  font: 400 14px/1.6 var(--font-body);
  color: var(--ink);
}
.contact-cf7 .wpcf7 form .wpcf7-response-output:empty { display: none; }
.contact-cf7 .wpcf7 form.sent .wpcf7-response-output {
  border-color: var(--brand);
  background: var(--brand-tint);
}
.contact-cf7 .wpcf7 form.invalid .wpcf7-response-output,
.contact-cf7 .wpcf7 form.unaccepted .wpcf7-response-output,
.contact-cf7 .wpcf7 form.payment-required .wpcf7-response-output,
.contact-cf7 .wpcf7 form.failed .wpcf7-response-output,
.contact-cf7 .wpcf7 form.aborted .wpcf7-response-output,
.contact-cf7 .wpcf7 form.spam .wpcf7-response-output {
  border-color: var(--cf-error);
  background: var(--bg);
  color: var(--cf-error-text);
}

@media (max-width: 720px) {
  /* Full-width button, label centered. The arrow sits right after the label: the template's inline script
     measures the label and sets --cf-arrow-x on .contact-cf7. Without it the arrow stays off the button. */
  .contact-cf7 .submit-wrap,
  .contact-cf7 .submit-wrap > p { width: 100%; }
  .contact-cf7 .wpcf7-submit,
  .contact-cf7 .wpcf7-submit:not(:disabled):hover {
    --cf-arrow-pos: var(--cf-arrow-x, -40px);
    width: 100%;
    text-align: center;
  }
  /* The spinner takes the arrow's place here too */
  .contact-cf7 .wpcf7-spinner {
    right: auto;
    left: calc(var(--cf-arrow-x, calc(100% - 28px)) - 8px);
  }
}

/* ------------------------------------------------------------
   5. Thank-you page (/thanks-overseas/)
   ------------------------------------------------------------ */
.thanks-hero { padding-block: clamp(48px, 7vw, 88px) 0; }
.thanks-hero + .section { padding-top: var(--s4); }

.thanks-card {
  max-width: 720px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  column-gap: 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(26,31,38,.06);
  padding: var(--s4);
}
.thanks-ico {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: start center;
  padding-top: 2px;
}
.thanks-ico svg { width: 30px; height: 30px; }
.thanks-body { display: grid; gap: var(--s2); }
.thanks-body p { color: var(--muted); font-size: 16px; }
.thanks-body .thanks-lead {
  font: 600 clamp(19px, 2vw, 22px)/1.4 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.thanks-body .btn-primary {
  justify-self: start;
  margin-top: var(--s2);
}

@media (max-width: 720px) {
  .thanks-card {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--s2);
    padding: var(--s3);
  }
  .thanks-ico { place-items: start; }
  .thanks-body .btn-primary { justify-self: stretch; text-align: center; }
}

/* ==== patches/home.css ==== */
/* ============================================================
   HOME（en/front-page.php）専用パッチ
   このファイルは英語サイトの全ページで読み込まれるため、
   セレクタはすべて .pg-home（トップの <main>）配下に限定する。
   site.css に統合するときは、この並びのまま末尾へ移せばよい。
   ============================================================ */


/* ------------------------------------------------------------
   H1. FV：プラットフォームのロゴ群
   元の配置は「ヒーロー幅に対する％」だったため、
   ・PC全幅で Instagram チップが H1 の「Japan.」に触れていた
   ・1025〜1300px では％が詰まり、チップ同士／サブ文と重なっていた
   ・721〜1024px では高さ380pxの枠に縦738px用の配置を押し込み、チップが団子になっていた
   ここでは 1440px 時の並びを「基準の構図」として固定し、
   テキストの右端から必ず離れる位置へ群ごと平行移動する。
   （チップ・クッションの重なり順は変えない。transform は使わず left/top のみ）
   ------------------------------------------------------------ */
@media (min-width: 1025px) {
  .pg-home .hero-canvas {
    /* 画面中央からロゴ群の左端までの距離。
       1200px以上：H1 2行目の右端（中央+52px）から32px空けて 84px。
       それ未満：サブ文の箱（ガター4vw＋最大594px）の右端から42px空ける */
    --cloud-x: max(84px, calc(min(594px, 96vw - 426px) + 42px - 46vw));
  }
  /* 1062px未満ではロゴ群が右端に収まるよう、サブ文の折返し幅を少しだけ詰める */
  .pg-home .hero-sub { max-width: min(33em, calc(96vw - 426px)); }

  /* 各群の横位置＝基準点＋1440px時のオフセット（それより広い画面では従来どおり％で広がる） */
  .pg-home .cl-meta      { left: calc(50% + var(--cloud-x)); }
  .pg-home .cl-x         { left: calc(50% + var(--cloud-x) + max(14.4px, 1vw)); }
  .pg-home .cl-ly        { left: calc(50% + var(--cloud-x) - max(14.4px, 1vw)); }
  .pg-home .cl-gmaps     { left: calc(50% + var(--cloud-x) + max(72px, 5vw)); }
  .pg-home .cl-google    { left: calc(50% + var(--cloud-x) + max(144px, 10vw)); }
  .pg-home .solo-prtimes { left: calc(50% + var(--cloud-x) + max(230.4px, 16vw)); }
  .pg-home .cl-tools     { left: calc(50% + var(--cloud-x) + max(259.2px, 18vw)); }
  .pg-home .cl-tiktok    { left: calc(50% + var(--cloud-x) + max(273.6px, 19vw)); }
}

/* サブ文は2文。2文目（One Tokyo team…）は全幅で必ず改行して始める
   （スマホ用の<br class="br-sp">をPC・タブレットでも有効にする）。
   1文目が2行になるときは行の長さを揃え、1語だけ落ちるのを防ぐ */
.pg-home .hero-sub { text-wrap: balance; }
.pg-home .hero-sub .br-sp { display: inline; }

/* タブレット：ビジュアルはテキスト下の独立ブロック。
   基準の構図を0.86倍に縮め、ブロックの中央へ置く（幅322px×高さ370px）。
   左下の STRATEGY FIRST、右上の CONVERSION、右側の波の面には掛からない */
@media (min-width: 721px) and (max-width: 1024px) {
  .pg-home .hero-canvas {
    height: 420px;
    --cloud-ax: calc(50% - 149px);   /* 構図の基準点（Meta群の左端） */
  }

  .pg-home .cl { gap: 9px; }
  .pg-home .cl-chips { gap: 10px; }
  .pg-home .cl::before { inset: -22px -33px; }
  .pg-home .cl-chip.lg { width: 54px; height: 54px; border-radius: 14px; }
  .pg-home .cl-chip.md { width: 48px; height: 48px; border-radius: 13px; }
  .pg-home .cl-chip.lg svg { width: 33px; height: 33px; }
  .pg-home .cl-chip.lg .chip-img { width: 32px; height: 32px; }
  .pg-home .cl-chip.md svg,
  .pg-home .cl-chip.md .chip-img { width: 29px; height: 29px; }
  .pg-home .cl-chip.wide { padding: 8px 12px; }
  .pg-home .cl-chip.wide img { height: 17px; }
  .pg-home .pr-badge { padding: 8px 13px; }
  .pg-home .pr-badge img { height: 15px; }
  .pg-home .cl .avatar { width: 29px; height: 29px; }
  .pg-home .cl .ca-a { top: -21px; right: -26px; }
  .pg-home .cl .ca-b { bottom: -15px; left: -26px; }
  .pg-home .cl-tools .cl-chips:nth-of-type(2) { transform: translate(-82px, -29px); }

  .pg-home .cl-meta      { left: var(--cloud-ax);                top: 46px; }
  .pg-home .cl-tools     { left: calc(var(--cloud-ax) + 223px);  top: 59px; }
  .pg-home .cl-google    { left: calc(var(--cloud-ax) + 124px);  top: 135px; }
  .pg-home .cl-gmaps     { left: calc(var(--cloud-ax) + 62px);   top: 179px; }
  .pg-home .cl-tiktok    { left: calc(var(--cloud-ax) + 235px);  top: 186px; }
  .pg-home .cl-x         { left: calc(var(--cloud-ax) + 12px);   top: 211px; }
  .pg-home .cl-ly        { left: calc(var(--cloud-ax) - 12px);   top: 274px; }
  .pg-home .solo-prtimes { left: calc(var(--cloud-ax) + 198px);  top: 319px; }
}

/* スマホ：ロゴ群の細部 */
@media (max-width: 720px) {
  /* Yahoo! JAPAN のピル：絶対配置のチップ内で img の max-width:100% が効き、
     幅が0になって白い空のピルだけが表示されていた */
  .pg-home .hero-canvas .cl-chip.wide img { max-width: none; }
  /* WordPress チップが CONVERSION ラベルの左下に2pxまで迫っていたので少し離す */
  .pg-home .cl-tools .cl-chips:nth-of-type(2) .cl-chip { transform: translate(64px, -80px); }
}


/* ------------------------------------------------------------
   H2. 全体地図（認知→売上の一本線）
   SVGは幅1110px前提。960px以下では文字が10px未満まで縮んで読めないため、
   スマホ用の縦積み（.map-steps）に早めに切り替える。
   ※ 720px以下の見た目は site.css の定義のまま。ここは 721〜960px の分だけ
   ------------------------------------------------------------ */
@media (min-width: 721px) and (max-width: 960px) {
  .pg-home .map-wrap { display: none; }
  .pg-home .map-steps {
    position: static; width: auto; height: auto;
    margin: var(--s4) 0 0; overflow: visible;
    clip: auto; white-space: normal;
    display: grid; gap: 0;
  }
  .pg-home .map-steps li {
    position: relative;
    border-left: 2px solid var(--line);
    padding: 0 0 var(--s4) var(--s3);
  }
  .pg-home .map-steps li::before {
    content: "";
    position: absolute; top: 6px; left: -6px;
    width: 10px; height: 10px;
    background: var(--brand);
    border-radius: 50%;
  }
  .pg-home .map-steps li:last-child { padding-bottom: 0; }
  .pg-home .map-steps li.ms-focus { padding: 18px 16px 18px var(--s3); }
  .pg-home .ms-num { font: 700 22px/1.2 var(--font-display); color: var(--brand); margin-right: 10px; }
  .pg-home .ms-label { font: 600 17px/1.3 var(--font-body); }
  .pg-home .ms-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
  .pg-home .ms-pill {
    display: inline-flex; align-items: center; gap: 5px;
    font: 500 13px/1 var(--font-body);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 7px 10px;
    color: var(--ink);
    background: #fff;
  }
  .pg-home .ms-pill svg { width: 16px; height: 16px; flex: 0 0 auto; }
  .pg-home .ms-pill.is-key {
    border-color: #A8CCE4;
    background: #F2F7FB;
    color: var(--brand-deep);
    font-weight: 600;
  }
}


/* 961〜1100px：SVGのまま見せるが、チップ内の注記（Data & know-how…）だけが10px未満になる
   （11.5px × 縮小率0.80〜0.91）。この幅帯だけ注記を一回り大きくして10px以上を保つ */
@media (min-width: 961px) and (max-width: 1100px) {
  .pg-home .map-chip-s { font-size: 13px; }
}

/* 長いピル（System development & AI-powered efficiency）は360px幅で2行になる。
   line-height:1 のままだと行がくっつくので少し開ける（1行のピルの高さは変わらない） */
@media (max-width: 960px) {
  .pg-home .ms-pill { line-height: 1.3; }
}


/* ------------------------------------------------------------
   H3. 01 PROBLEM：6枚
   ------------------------------------------------------------ */
/* 2文の引用は文ごとに<span>。1行に収まらないときは文の切れ目で折り返し、
   1文がさらに折り返す場合も行の長さを揃える（1語だけ落ちるのを防ぐ） */
.pg-home .prob-card p span { display: inline-block; text-wrap: balance; }
/* 出典行は line-height:1 だったため、折り返すと2行がくっついていた。
   折り返すときは1語だけ2行目に落ちないよう行の長さを揃える */
.pg-home .prob-card cite { line-height: 1.5; text-wrap: balance; }


/* ------------------------------------------------------------
   H4. 02 SOLUTION：アプローチ図（従来／JDOC）
   図は横560で描かれており、520px以下の画面では文字が7〜9pxまで縮む。
   520px以下では横320で描き直した図（.approach-narrow）に差し替え、
   背景は<figure>、結論の一文は<figcaption>がHTMLで持つ（文字は常に14px）
   ------------------------------------------------------------ */
.pg-home .approach-narrow,
.pg-home .approach-cap { display: none; }

/* 901〜999px：2列だと1枚が402〜448px幅になり、図中の小さい文字が9px台まで縮む。
   900px以下と同じ1列のままにし、2列は1枚448px以上を確保できる1000pxから */
@media (min-width: 901px) and (max-width: 999px) {
  .pg-home .approach-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 520px) {
  .pg-home .approach-wide { display: none; }
  .pg-home .approach-narrow { display: block; max-width: 400px; margin-inline: auto; }

  .pg-home .approach-fig { border-radius: 16px; background: #EEF1F4; }
  .pg-home .approach-fig-jdoc {
    /* 図の中の塗り（左上→右下）と同じ色・同じ向き */
    background: linear-gradient(to bottom right, #14202B 0%, #1E4568 60%, #2E6084 100%);
    box-shadow: 0 22px 52px rgba(20,32,43,.26);
  }
  /* 影と角丸は<figure>側に移したので、図そのものからは外す */
  .pg-home .approach-fig-jdoc .approach-narrow { border-radius: 0; box-shadow: none; }

  .pg-home .approach-cap {
    display: block;
    padding: 4px 20px 22px;
    font: 700 14px/1.5 var(--font-body);
    color: var(--muted);
    text-align: center;
    text-wrap: balance;
  }
  .pg-home .approach-fig-jdoc .approach-cap { color: #C9DCEB; }
}


/* ------------------------------------------------------------
   H5. 02 SOLUTION：パッケージ3枚
   PCは3列、それ未満は1列（auto-fitだと2＋1になり、1枚だけ余る）
   ------------------------------------------------------------ */
.pg-home .packs-grid { grid-template-columns: minmax(0, 1fr); }
/* キッカーも line-height:1 のまま2行になっていた（値は patches/services.css の同じ3枚と揃える） */
.pg-home .pack-kicker { line-height: 1.5; text-wrap: balance; }

/* ブロブの色：01＝濃いブランドブルー（新規）、02＝水色、03＝ティール（従来の2枚の色を引き継ぐ） */
.pg-home .packs-grid .pack-card.pack-growth .pack-blob {
  background: radial-gradient(circle at 36% 36%, rgba(46,96,132,.44) 0%, rgba(46,96,132,0) 70%);
}
.pg-home .packs-grid .pack-card.pack-launch .pack-blob {
  background: radial-gradient(circle at 36% 36%, rgba(127,176,211,.5) 0%, rgba(127,176,211,0) 70%);
}
.pg-home .packs-grid .pack-card.pack-influencer .pack-blob {
  background: radial-gradient(circle at 36% 36%, rgba(79,168,149,.45) 0%, rgba(79,168,149,0) 70%);
}

@media (min-width: 1000px) {
  .pg-home .packs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* 3枚の「アイコン／番号／キッカー／見出し／本文／リンク」を行ごとに揃える。
     見出しやキッカーの行数がカードごとに違っても、本文の開始位置がずれない */
  @supports (grid-template-rows: subgrid) {
    .pg-home .pack-card {
      display: grid;
      grid-row: span 6;
      grid-template-rows: subgrid;
      row-gap: 12px;
      align-content: start;
    }
    .pg-home .pack-link { margin-top: 0; align-self: end; justify-self: end; }
  }
}


/* ------------------------------------------------------------
   H6. 03 USE CASES
   ------------------------------------------------------------ */

/* ---------- タブ（900px以下） ----------
   元は横スクロールで、4つ目が画面外・3つ目が語の途中で切れていた。
   4つしかないので、スクロールさせずに全部見せる */
@media (max-width: 900px) {
  .pg-home .case-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    overflow: visible;
    /* スクロール領域を示していた細い下線は不要になったので外す */
    padding: 0;
    margin-bottom: 0;
    border-bottom: 0;
  }
  .pg-home .case-tab {
    width: 100%;
    min-height: 44px;
    padding: 10px 8px;
    white-space: nowrap;
  }
}
@media (max-width: 720px) {
  .pg-home .case-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- 写真枠 ----------
   写真とイラストが混在するため、枠の比率を固定して cover で埋める。
   白地の画像（Xのマーク）がカードの白に溶けないよう、内側に1pxの線を重ねる */
.pg-home .ba-photo { background: var(--brand-tint); }
.pg-home .ba-photo::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(26,31,38,.12);
  pointer-events: none;
}
/* NAGAMINE：左のブランドマークと中央の人物を両方残す */
.pg-home .ba-photo-left > img { object-position: 10% 50%; }
/* Blacksmith Japan：縦長画像（1024×1280）の上下の黒帯・内側の黒枠・ロゴ帯を外し、
   店内写真の部分（縦 408〜776px）だけを枠の高さいっぱいに表示する。
   横は画像の左から11%の位置（黒枠のすぐ内側）を枠の左端に合わせる。
   枠の左端を基準にしているので、枠の縦横比が変わっても左の黒枠は出ない。
   右の黒枠が出ないのは、枠が 横÷縦 2.17 以下のとき（現在の最大は640px幅の2.06） */
.pg-home .ba-photo-crop > img {
  inset: auto;
  top: -111%;
  left: 0;
  width: auto;
  height: 348%;
  max-width: none;
  transform: translateX(-11%);
}

/* ---------- カード本体 ----------
   元の並び「写真（左）＋BEFORE/AFTERの縦積み（右）」は、右の列に約420px以上の幅がある
   1200px以上でしか釣り合わない。それより狭いと右の列が写真の2倍以上の高さになり、
   写真の下が大きく空く（901pxで最大344px）。
   641〜1199px は上段に「写真｜BEFORE」、下段に AFTER を横いっぱいに置く。
   写真は BEFORE と同じ高さまで伸びるので、写真の下は空かない */
@media (min-width: 641px) and (max-width: 1199px) {
  .pg-home .ba-body {
    grid-template-columns: 240px minmax(0, 1fr);
    grid-template-areas:
      "photo before"
      "after after";
    gap: 10px;
    align-items: stretch;
  }
  /* BEFORE と AFTER を .ba-body の直下のマスとして並べる */
  .pg-home .ba-cols { display: contents; }
  .pg-home .ba-photo {
    grid-area: photo;
    width: 100%;
    aspect-ratio: auto;
    min-height: 150px;       /* 240×150＝スマホと同じ16:10。BEFOREが長いときはそれに合わせて伸びる */
    align-self: stretch;
  }
  .pg-home .ba-before { grid-area: before; }
  .pg-home .ba-after { grid-area: after; }
}
/* 640px以下：写真はカード全幅の16:10。500px前後から上では写真だけが大きくなりすぎるので
   高さを260pxで止める（Blacksmith Japan の元画像は店内写真の部分が縦368pxしかなく、
   大きく表示するほどぼやける） */
@media (max-width: 640px) {
  .pg-home .ba-photo { width: 100%; max-height: 260px; }
}


/* ------------------------------------------------------------
   H7. 04 TEAM
   ------------------------------------------------------------ */
@media (min-width: 721px) {
  /* PCは経歴を常時表示。2枚の下端を揃える */
  .pg-home .team-grid { align-items: stretch; }
}


/* ------------------------------------------------------------
   H8. 05 CLIENT VOICES
   ------------------------------------------------------------ */
/* ロゴ：高さを揃え、幅は成り行き（縦横比の違う3社を同じ見え方に） */
.pg-home .partner-logo {
  width: auto;
  height: 56px;
  opacity: 1;
  display: flex; align-items: center;
}
.pg-home .partner-logo img {
  display: block;
  width: auto; height: 100%;
  max-width: 96px;
  object-fit: contain;
}
/* 正方形のベタ塗りロゴ（NOKID）は面積が大きく見えるので一回り小さく、角を落としてタイルに */
.pg-home .partner-logo-tile img { height: 46px; border-radius: 9px; }

/* 3列（1025px以上）：肩書が2行になるカード（3枚目）だけ見出し部が高くなり、
   引用文の頭が隣より8px下がっていた。カードの「見出し部／引用文」の2行を3枚で共有し、
   名前の行と引用文の頭をそろえる。名前は上ぞろえ、ロゴは見出し部の中央 */
@media (min-width: 1025px) {
  .pg-home .partner-head { align-items: flex-start; min-height: 64px; }
  .pg-home .partner-logo { align-self: center; }

  @supports (grid-template-rows: subgrid) {
    .pg-home .partner-card {
      display: grid;
      grid-row: span 2;
      grid-template-rows: subgrid;
      row-gap: 0;
    }
    .pg-home .partner-head { min-height: 0; }
  }
}

@media (max-width: 720px) {
  .pg-home .partner-logo { height: 50px; }
  .pg-home .partner-logo img { max-width: 84px; }
  .pg-home .partner-logo-tile img { height: 42px; }

  /* 元は横スクロールのカルーセルで、2枚目が語の途中で切れて見えていた。
     3枚だけなので縦に積み、すべて読める状態にする */
  .pg-home .partners-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s2);
    overflow: visible;
    padding-bottom: 0;
    scroll-snap-type: none;
  }
  .pg-home .partner-card { height: auto; }
}


/* ------------------------------------------------------------
   H9. 06 INSIGHTS
   ------------------------------------------------------------ */
/* 721〜1024px：1列だとカード1枚が688px幅になり大きすぎるため2列のまま */
@media (min-width: 721px) and (max-width: 1024px) {
  .pg-home .insights-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ------------------------------------------------------------
   H10. 締めのCTA
   ------------------------------------------------------------ */
/* リードの手動改行（.br）は1文目が1行に収まる幅でだけ有効にする。
   860px以下では1文目が折り返したあとに改行が入り、「number lives.」だけの行ができていた */
@media (max-width: 860px) {
  .pg-home .cta .lead .br { display: none; }
}


/* ------------------------------------------------------------
   H11. タップ領域
   文字リンクは文字の高さ（約21px）しかない。見た目の位置は変えずに、
   上下の余白を足して押せる範囲を44px以上にする（足した分は負のマージンで打ち消す）
   ------------------------------------------------------------ */
.pg-home .cases-more .link-arrow,
.pg-home .insights-more .link-arrow { padding-block: 13px; margin-block: -13px; }
/* パッケージのリンクは上に12pxの余白を持っている（site.css）ので、下だけ足す */
.pg-home .pack-link { padding-bottom: 13px; margin-bottom: -13px; }

/* ==== patches/insights.css ==== */
/* ============================================================
   Insights 一覧（/en/our-insights/）ページ専用パッチ
   patches/ 配下は英語サイトの全ページで読み込まれるため、
   すべて main.insights-page の中だけに効かせる。
   ============================================================ */

/* ---------- ページ見出し：見た目は従来の青い小ラベルのまま、要素だけ h1 にする
   （.page-hero h1 の大きな見出しサイズを打ち消す） ---------- */
.insights-page .page-hero h1.eyebrow {
  font-size: 12px;
  line-height: 1;
  max-width: none;
}

/* ---------- フィルター：見た目の高さ（35px）は変えず、押せる範囲だけ上下に5pxずつ広げて45pxにする
   （::after の基準は枠線の内側なので指定は -6px。Works と同じ値。
   チップ同士の間隔が10pxなので、折り返しても隣の範囲とは重ならない） ---------- */
.insights-page .filter-btn { position: relative; }
.insights-page .filter-btn::after {
  content: "";
  position: absolute;
  top: -6px; right: 0; bottom: -6px; left: 0;
}
/* タッチ端末ではタップ後も :hover が残り、選んだチップだけ2px浮いたまま並ぶので、浮きを止める */
@media (hover: none) {
  .insights-page .filter-btn:hover { transform: none; }
}

/* ---------- カード見出し：見出しの階層を h1 → h2（画面には出さない「Articles」）→ h3 に
   するため、タイトルは h3。見た目は site.css の .post-card h4 と同じにする
   （h3 全般に掛かる text-wrap: balance は外し、折り返し位置も h4 のときのまま）。
   長いタイトルや区切りのない文字列でもカード幅で必ず折り返す ---------- */
.insights-page .post-card h3 {
  margin: 0 var(--s4) var(--s2);
  font-size: clamp(16px, 1.5vw, 19px);
  text-wrap: wrap;
  overflow-wrap: anywhere;
}
@media (max-width: 720px) {
  .insights-page .post-card h3 { margin-inline: calc(5px + 0.2cm); }
}

/* ホバーでカードの地色がピルと同じ淡青になり、ピルが溶けて文字だけ右にずれて見える。
   ホバー中はピルを白にして形を残す */
.insights-page .post-tag { transition: background .3s; }
.insights-page .post-card:hover .post-tag { background: var(--bg); }

/* キーボード操作：リンクのフォーカス枠はカードの overflow: hidden に切られて見えないので、
   カードの外側に同じ枠（2px・3px離し）を出す。:has() が無いブラウザでは従来のまま */
@supports selector(:has(a)) {
  .insights-page .post-card:has(.post-link:focus-visible) {
    outline: 2px solid var(--brand-deep);
    outline-offset: 3px;
  }
  .insights-page .post-link:focus-visible { outline: none; }
}

/* アイキャッチ未設定の記事：空の画像枠は出さず、文字だけのカードとして上余白を取る */
.insights-page .post-card.no-thumb .post-link { padding-top: var(--s4); }
@media (max-width: 720px) {
  .insights-page .post-card.no-thumb .post-link { padding-top: var(--s3); }
}

/* ---------- 端数の行を作らない
   表示中の枚数を列数で割って1枚だけ余るとき（例：15件を2列、4件を3列）、
   insights.js が先頭＝いちばん新しい記事に .is-lead を付ける。
   そのカードは1行ぶんの幅を使う横長（左に画像、右に文字）にして、残りを列数で割り切る。
   スマホ（1列）では付かない。 ---------- */
@media (min-width: 721px) {
  .insights-page .post-card.is-lead { grid-column: 1 / -1; }

  .insights-page .post-card.is-lead:not(.no-thumb) .post-link {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--lead-text);
    grid-template-rows: auto auto 1fr auto;   /* ピル / 日付 / タイトル / Read more */
    padding-bottom: 0;
  }
  /* 画像：16:9 を最低の高さにして、文字の列がそれより高くなったらその高さまで埋める */
  .insights-page .post-card.is-lead:not(.no-thumb) .post-thumb {
    grid-column: 1;
    grid-row: 1 / -1;
    position: relative;
    aspect-ratio: auto;
    margin-bottom: 0;
  }
  .insights-page .post-card.is-lead:not(.no-thumb) .post-thumb::before {
    content: "";
    display: block;
    padding-top: 56.25%;
  }
  .insights-page .post-card.is-lead:not(.no-thumb) .post-thumb img {
    position: absolute;
    top: 0; left: 0;
  }
  .insights-page .post-card.is-lead:not(.no-thumb) .post-tag {
    grid-column: 2; grid-row: 1;
    justify-self: start;
    margin-top: var(--lead-pad);
  }
  .insights-page .post-card.is-lead:not(.no-thumb) .post-meta { grid-column: 2; grid-row: 2; }
  .insights-page .post-card.is-lead:not(.no-thumb) h3 { grid-column: 2; grid-row: 3; }
  .insights-page .post-card.is-lead:not(.no-thumb) .link-arrow {
    grid-column: 2; grid-row: 4;
    justify-self: end;
    margin-top: 0;
    margin-bottom: var(--lead-pad);
  }
}
/* 2列（タブレット）：画像6・文字4。文字の列が細いので余白は24pxに詰める。
   タイトルは幅に余裕が出るぶんだけ大きくする（768pxで16px、1024pxで21px。
   80字前後のタイトルでも文字の列が画像の高さに収まる範囲） */
@media (min-width: 721px) and (max-width: 1024px) {
  .insights-page .post-card.is-lead:not(.no-thumb) {
    --lead-text: 40%;
    --lead-pad: var(--s3);
  }
  .insights-page .post-card.is-lead:not(.no-thumb) .post-tag,
  .insights-page .post-card.is-lead:not(.no-thumb) .post-meta,
  .insights-page .post-card.is-lead:not(.no-thumb) h3,
  .insights-page .post-card.is-lead:not(.no-thumb) .link-arrow { margin-inline: var(--s3); }
  .insights-page .post-card.is-lead:not(.no-thumb) h3 { font-size: clamp(16px, 2.6vw - 4px, 21px); }
}
/* 3列（PC）：文字の列は下のカード1枚と同じ幅にして、3列目のカードと文字の左端を揃える
   （4px はカードの枠線ぶん。これで下のカードの文字と1pxもずれない）。
   タイトルは .card h3 の基本サイズ（Home の Insights カードと同じ）に戻す */
@media (min-width: 1025px) {
  .insights-page .post-card.is-lead:not(.no-thumb) {
    --lead-text: calc((100% - 2 * var(--s3) - 4px) / 3);
    --lead-pad: var(--s4);
  }
  .insights-page .post-card.is-lead:not(.no-thumb) h3 { font-size: clamp(19px, 2vw, 23px); }
}

/* ---------- 最初は新しい順に6件だけ見せ、残りは「View all」で開く
   insights.js が7件目以降に .is-collapsed を付ける（絞り込みの .is-hidden とは別のクラス。
   絞り込みは site.js が全カードの .is-hidden を付け直すので、同じクラスは使えない）。
   カードは HTML に残したまま隠すだけなので、記事へのリンクは全件そのまま読める ---------- */
.insights-page .post-card.is-collapsed { display: none; }

.insights-page .insights-all {
  display: flex;
  justify-content: center;
  margin-top: var(--s4);
}
.insights-page .insights-all[hidden] { display: none; }
.insights-page .insights-all-btn {
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  min-height: 48px;
}
@media (max-width: 720px) {
  .insights-page .insights-all { margin-top: var(--s3); }
  .insights-page .insights-all-btn { width: 100%; }
}

/* ---------- 締めのCTA：リード文の1行固定（.nowrap-lead）は、1行に収まる幅だけに限る
   文の幅は約1030px。721〜1120px付近ではコンテナより長く、ページが横スクロールしていた。
   代替フォントで字幅が広がった場合の余裕も見て、1行固定は1280px以上だけにする ---------- */
@media (min-width: 721px) and (max-width: 1279px) {
  .insights-page .cta .nowrap-lead {
    white-space: normal;
    text-wrap: balance;
  }
}

/* ==== patches/privacy.css ==== */
/* ============================================================
   Privacy Policy（/en/privacy/）: 長文テキストの組み
   patches/*.css は英語サイトの全ページで読み込まれるため、
   すべて .legal-body 配下に限定している（他ページには一切当たらない）。
   統合時は site.css の「Privacy Policy 本文」ブロックへそのまま移せる。
   ============================================================ */

/* ---------- 行長 ----------
   元の 72ch は Inter の「0」幅基準で、実際の英文では1行90字前後になっていた。
   読みやすい約70字に合わせる（17px Inter で1字あたり平均 約0.5em） */
.legal-body {
  max-width: 36em;
  overflow-wrap: break-word;
  /* 表示アニメーションはCSSだけで完結させる（.reveal と同じ時間・同じイージング）。
     JSのIntersectionObserverに依存しないので、縦に長くなっても必ず表示状態で終わる。
     動かすのは不透明度だけ。transform で本文を下にずらすと、/en/privacy/#cookies のように
     ハッシュ付きで開いたとき、ずれている途中の位置へブラウザがスクロールしてしまい、
     章見出しが固定ヘッダーの下にもぐる（本文には章アンカーがあるので位置は動かさない） */
  animation: legal-in var(--dur) var(--ease-out) both;
}
@keyframes legal-in {
  from { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .legal-body { animation: none; }
}

/* ---------- 施行日ラベル ----------
   site.css の .legal-updated（ブランド青・下24px）は、後ろにある .legal-body p（詳細度が高い）に
   色と余白を上書きされて効いていなかった。原稿CSSの指定どおりに戻す。
   ヒーローの eyebrow、章9の EMAIL / PHONE / ADDRESS と同じ色のラベルになる */
.legal-body .legal-updated {
  color: var(--brand-deep);
  margin-bottom: var(--s3);
}

/* ---------- 見出し ----------
   章見出しは h2（h1 の直下なので階層を飛ばさない）。見た目はデザイン原稿の章見出しと同じ。
   h3 は章の中の小見出し用 */
.legal-body h2 {
  font: 600 clamp(18px, 1.9vw, 22px)/1.35 var(--font-body);
  letter-spacing: -0.01em;
  margin: var(--s4) 0 var(--s2);
  scroll-margin-top: 108px;   /* 固定ヘッダー分（section[id] と同じ値） */
}
.legal-body h3 {
  font: 600 17px/1.5 var(--font-body);
  letter-spacing: 0;
  margin: var(--s3) 0 var(--s1);
}

/* ---------- リスト ----------
   site.css が ol/ul の list-style を全体でリセットしているので、本文内だけ戻す */
.legal-body ul,
.legal-body ol {
  margin: 0 0 var(--s2);
  padding-left: 1.3em;
  color: var(--muted);
}
.legal-body ul { list-style: disc; }
.legal-body ol { list-style: decimal; }
.legal-body ul ul { list-style: circle; }
.legal-body li { padding-left: .2em; text-wrap: pretty; }
.legal-body li + li { margin-top: var(--s1); }
.legal-body li > ul,
.legal-body li > ol { margin: var(--s1) 0 0; }
.legal-body li::marker { color: var(--brand); }
.legal-body ol > li::marker {
  color: var(--brand-deep);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* ---------- リンク ---------- */
.legal-body a {
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  transition: color .2s;
}
.legal-body a:hover { color: var(--ink); }
/* 本文中のリンク: 見た目と行送りは変えずに、押せる範囲だけ上下4pxずつ広げる（20px → 28px）。
   行送りが約29pxなので、スマホでリンクが上下の行に並んでも当たり判定どうしは重ならない */
.legal-body p a,
.legal-body li a { padding-block: 4px; }
/* メールアドレス・電話番号はハイフンの位置で折り返さない */
.legal-body a[href^="mailto:"],
.legal-body a[href^="tel:"] { white-space: nowrap; }

/* ---------- 連絡先（章9） ----------
   ラベルは About の会社情報と同じ等幅ラベル。値は本文と同じ組み */
.legal-contact {
  margin-top: var(--s3);
  border-top: 1px solid var(--line);
}
.legal-contact > div {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  column-gap: var(--s2);
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.legal-contact dt {
  font: 500 12px/1.6 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand-deep);
}
.legal-contact dd { color: var(--muted); }
/* 行の高さは変えずに、タップ領域だけ44px以上にする */
.legal-contact dd a {
  display: inline-block;
  padding-block: 8px;
  margin-block: -8px;
}

@media (max-width: 720px) {
  .legal-contact > div { grid-template-columns: 84px minmax(0, 1fr); }
}

/* ==== patches/services.css ==== */
/* ============================================================
   Services (en/page-our-services.php) — page patch
   patches/*.css は英語サイトの全ページで読み込まれるため、
   すべてのルールを .svc-page（このテンプレートの <main>）配下に限定する。
   site.css へ統合するときは、各ブロックを該当セクションへ移すこと。
   ============================================================ */

/* ---------- 1. ヒーローの3本柱：タブレット幅でも 01 → 02 → 03 を1行に ----------
   721〜780px では 166px×3＋矢印×2 が収まらず、03 だけ2段目に落ちて
   2本目の矢印が何も指さなくなっていた */
@media (min-width: 721px) and (max-width: 860px) {
  .svc-page .subnav-pillars { flex-wrap: nowrap; gap: 14px; }
  .svc-page .pillar-arrow { width: 40px; }
}
/* 1024px 以下：円（160／166px）に対してラベルが長く、「Execution & Operations」の
   四隅が円周まで 2.6px／4.6px しかなかった。文字は小さくせず、PC（212px に 15.5px）と
   同じ比率になるところまで円を広げて 8px 以上あける */
@media (max-width: 1024px) {
  .svc-page .subnav-pillars a { width: 174px; height: 174px; }
}
@media (max-width: 720px) {
  .svc-page .subnav-pillars a { width: 172px; height: 172px; }
}
/* 右上の回路の装飾（幅 250px・画面右上に固定）は、1280px 未満で 03 の円に届く。
   線が円の裏を通って上や右から飛び出し、721px では節点が円周に載り、1180px では
   左下の四角が円周に接していた（元デザインは円と離れている 1440px 前後だけで成立）。
   ・721〜1024px：円が画面右端まで来るので置き場所がない。出さない
   ・1025〜1279px：円の上端より 24px 以上高い位置まで上げる（見出しの右の空きに収まる） */
@media (min-width: 721px) and (max-width: 1024px) {
  .svc-page .svc-top { background-size: 0 0, 24px 24px; }
}
@media (min-width: 1025px) and (max-width: 1279px) {
  .svc-page .svc-top { background-position: right -48px top -58px, 0 0; }
}
/* 極小幅（〜359px）は nowrap の塊がコンテナより広くなるため折返しを許可 */
@media (max-width: 359px) {
  .svc-page .page-hero h1 .nw { white-space: normal; }
}
/* 390px 未満：右上の回路の縦線が H1 の「line.」に寄ってくる（360px で 9px）。
   回路は右端基準なので、390px のときと同じ位置（文字から 38px）に留める */
@media (max-width: 389px) {
  .svc-page .svc-top { background-position: right calc(100vw - 438px) top 28px, 0 0; }
}

/* ---------- 2. 柱リード：スマホで見出しが右へはみ出すのを防ぐ ----------
   「strategy starts with data」(nowrap・30px) は 312px 必要で、390px 幅の
   コピー枠（298px）より広い。1fr のトラックが押し広げられ、図とコピー枠が
   右余白 6px まで食い込み、360px 幅では画面端で切れていた */
@media (max-width: 1024px) {
  .svc-page .pillar-lead { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  /* 3本とも同じ級数で、最長の塊が枠に収まるところまでだけ縮める（430px 以上は 30px のまま） */
  .svc-page .pillar-lead .display-heading { font-size: min(30px, calc((100vw - 92px) / 10.6)); }
  /* それでも収まらない場合は塊の中で折り返す（はみ出さない） */
  .svc-page .pillar-lead .display-heading .nw { display: inline-block; white-space: normal; }
}

/* ---------- 3. 柱の中のタブ：900px 以下は横スクロールをやめて全部見せる ----------
   横スクロールはバー非表示・文字が途中で切れた状態で止まり、
   6個中3〜4個のタブが画面外（390px で x=900 まで）にあると気づけなかった */
@media (max-width: 900px) {
  .svc-page .sol-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    overflow: visible;
    padding-inline: 0;
  }
  .svc-page .sol-tab {
    width: 100%;
    min-height: 48px;
    padding: 8px 12px;
    line-height: 1.3;
    white-space: normal;
    text-wrap: balance;
  }
}
@media (max-width: 720px) {
  .svc-page .sol-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-page .sol-tab { padding-inline: 8px; font-size: 14px; }
  /* 01 はタブが3つ。2列だと1つだけ余るので、PCと同じ縦積みにする */
  .svc-page #strategy .sol-tabs { grid-template-columns: minmax(0, 1fr); }
}
/* 901〜1024px も「タブは上、本文は下」にそろえる（柱リードが1カラムになるのと同じ幅まで）。
   左にタブ列（250px）を置くと右のパネルは 515〜628px しかなく、03 はそこからロゴの板
   （300px）を引いた 175〜288px が本文になる。901px では「Ad operations」が17行に伸び、
   末尾がレーダーの円周まで 15px に迫っていた（ウィンドウを半分にした 960px でも同じ傾向） */
@media (min-width: 901px) and (max-width: 1024px) {
  .svc-page .sol-wrap { grid-template-columns: minmax(0, 1fr); }
  .svc-page .sol-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* パネルの上の罫線とロゴの板の右端を、タブの右端にそろえる（52em の上限だと 58px 手前で止まる） */
  .svc-page .sol-panel.is-active { max-width: none; }
}

/* ---------- 4. 画像のないパネル：本文だけの1カラムに ---------- */
.svc-page .sol-panel.sol-text-only.is-active { grid-template-columns: minmax(0, 1fr); }
.svc-page .sol-panel h4 { text-wrap: balance; }
/* 01・02 はタブ列が短い（202px）。パネルを切り替えても下のセクションが上下しない高さを確保（PC） */
@media (min-width: 1025px) {
  .svc-page #strategy .sol-panels,
  .svc-page #production .sol-panels { min-height: 232px; }
}
/* 02 は6つとも「見出し＋本文2〜3行」。タブを1列6段（高さ 412px）のままにすると、
   本文の下からタブ列の下端まで 830×260px ほど何もない面が残り、作りかけに見える。
   PCではタブを2列3段（高さ 202px＝01 のタブ列と同じ）にして、本文と高さを揃える。
   左列の幅：最長のラベル「AI development & efficiency」が1行に収まる 230px×2 を下限、
   01・03 と同じ 250px×2 を上限にする。
   パネルに写真を戻すときは、このブロックを消せば元の1列6段に戻る */
@media (min-width: 1025px) {
  .svc-page #production .sol-wrap { grid-template-columns: clamp(468px, 44vw, 508px) minmax(0, 1fr); }
  .svc-page #production .sol-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- 4b. 背景の装飾は、本文・タブと重ならない幅でだけ出す ----------
   装飾は画面端からの固定位置、本文はコンテナ基準なので、画面幅しだいで重なる。
   元デザインの配置が成り立つのは左右の余白が 148px 以上ある幅（1440px〜）だけで、
   ノートPCで多い 1280〜1366px ではタブの裏に線が入り込んでいた。
   （01・02 にあった 0/1 の数字の装飾は site.css から外したので、ここでの位置調整も無い） */

/* 左の余白に置く装飾（03 の回路）：余白が狭いとタブの裏に入る。
   余白が 148px ある 1440px 以上でだけ出す */
@media (max-width: 1439px) {
  .svc-page #execution {
    background:
      radial-gradient(circle, rgba(46,96,132,.11) 1px, transparent 1.4px) 0 0 / 26px 26px
      #fff;
  }
}
/* 03 の回路は幅 290px・左 -56px で、右端の節点が x=222px まで来る。元の位置に置けるのは
   タブ列がそれより 40px 以上右にある 1668px 以上だけ。1440〜1667px は図を左へ 114px
   引っ込め、右上の段（横線・縦線・節点2つ）だけを見せる。節点はタブ列の 40px 以上手前で止まる。
   画面幅に合わせて滑らせると、幅によっては別の節点が画面端で欠けるので、位置は固定にしている */
@media (min-width: 1440px) and (max-width: 1667px) {
  .svc-page #execution { background-position: left -170px bottom 60px, 0 0; }
}

/* 写真枠がなくなったぶん、セクション下端の装飾（回路・レーダー）に
   本文が直接かぶる幅がある。文字と装飾を重ねないための逃げ */
/* 01：右下の回路（下端から約154pxまで立ち上がる）の上に本文を置かない */
@media (min-width: 721px) and (max-width: 1100px) {
  .svc-page #strategy .sol-text-only { padding-bottom: calc(170px - 10vw); }
}
/* 03：パッケージとの境界にまたがるレーダーの上半分に本文を載せない */
.svc-page #execution .sol-text-only { padding-bottom: 76px; }
@media (min-width: 721px) {
  .svc-page #execution .sol-text-only { padding-bottom: max(42px, calc(186px - 10vw)); }
}
/* タブレット（721〜900px）：レーダー（330px・下へ 160px はみ出す）の縦線の下端が、
   次のセクションの見出し「Choose by the problem, …」の行の上端まで 1px（721px）〜
   11px（820px）に迫っていた。同じ比率のまま 290px にして 20px 以上あける
   （上端も 20px 下がるので、パネルの本文との間隔は広がる方向） */
@media (min-width: 721px) and (max-width: 900px) {
  .svc-page #execution::after { width: 290px; height: 290px; bottom: -141px; }
}
/* 小さいスマホ：レーダー（220px固定・右12px）の外周が、次のセクションの
   ラベル「SERVICE PACKAGES」の文字を横切っていた（375px で末尾の S、360px で GE。
   390px でも文字の右上まで 11px）。切らずに全体を見せたまま、
   画面幅に合わせて同じ比率で小さくし、ラベルから 20px 以上離す */
@media (max-width: 420px) {
  .svc-page #execution::after {
    --radar: min(220px, calc(100vw - 186px));
    width: var(--radar);
    height: var(--radar);
    bottom: calc(var(--radar) * -0.473);
  }
}

/* ---------- 5. ロゴチップ：横長ロゴ用の .wide が効いていなかった ----------
   flex: 0 0 72px が width: 150px より優先され、Yahoo! JAPAN と PR TIMES が
   72px の正方形いっぱいに押し込まれていた */
.svc-page .sol-photo.sol-logos .ci.wide { flex-basis: 150px; }

/* ---------- 6. パッケージ：Home（patches/home.css の H4）と同じ3枚・同じ組み方 ----------
   値は Home 側と揃えてある。統合時は .pg-home 版と1本にまとめること。
   PCは3列、それ未満は1列（auto-fit だと 2＋1 になり、1枚だけ余る） */
.svc-page .packs-grid { grid-template-columns: minmax(0, 1fr); }
/* キッカーは line-height:1 のまま2行になり、行が詰まっていた */
.svc-page .pack-kicker { line-height: 1.5; text-wrap: balance; }
/* ブロブの色はカードの並び順（nth-child）ではなく中身で決める：
   01＝濃いブランドブルー（新規）、02＝水色、03＝ティール（従来の2枚の色を引き継ぐ） */
.svc-page .packs-grid .pack-card.pack-growth .pack-blob {
  background: radial-gradient(circle at 36% 36%, rgba(46,96,132,.44) 0%, rgba(46,96,132,0) 70%);
}
.svc-page .packs-grid .pack-card.pack-launch .pack-blob {
  background: radial-gradient(circle at 36% 36%, rgba(127,176,211,.5) 0%, rgba(127,176,211,0) 70%);
}
.svc-page .packs-grid .pack-card.pack-influencer .pack-blob {
  background: radial-gradient(circle at 36% 36%, rgba(79,168,149,.45) 0%, rgba(79,168,149,0) 70%);
}
@media (min-width: 1000px) {
  .svc-page .packs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* 3枚の「アイコン／番号／キッカー／見出し／本文／リンク」を行ごとに揃える */
  @supports (grid-template-rows: subgrid) {
    .svc-page .pack-card {
      display: grid;
      grid-row: span 6;
      grid-template-rows: subgrid;
      row-gap: 12px;
      align-content: start;
    }
    .svc-page .pack-link { margin-top: 0; align-self: end; justify-self: end; }
  }
}

/* 文字リンクの押せる範囲を 44px 以上に（見た目と行送りは変えない。Home の同じカードと同じ処理）。
   実測：「Read more」96×33px、パネル内の「See … →」は高さ 21px だった */
.svc-page .pack-link { padding-bottom: 13px; margin-bottom: -13px; }
.svc-page .sol-link .link-arrow { padding-block: 12px; margin-block: -12px; }

/* ---------- 7. 契約の始まり方：ステップ ---------- */
.svc-page .engagement-steps h4 { text-wrap: balance; }
@media (max-width: 900px) {
  /* 01 の本文が長くなったので、タブレットもスマホと同じ縦のタイムラインにする
     （3列のままだと 01 だけ14行、02・03 は5行になる） */
  .svc-page .engagement-steps { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .svc-page .engagement-steps li {
    border-top: 0;
    border-left: 2px solid var(--line);
    padding: 0 0 var(--s3) var(--s3);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
  }
  .svc-page .engagement-steps li:last-child { padding-bottom: 0; }
  .svc-page .engagement-steps li::before { top: 4px; left: -6px; }
  .svc-page .engagement-steps .vs-num { margin-bottom: 0; }
  /* 見出しが2行になっても番号の横に並べる（01 だけ番号の下に落ちていた） */
  .svc-page .engagement-steps h4 { flex: 1 1 0; min-width: 0; margin-bottom: 0; }
  .svc-page .engagement-steps p { flex: 1 0 100%; margin-top: 2px; max-width: 60em; }
}

/* ---------- 8. 媒体ロゴ ---------- */
/* 折り返すときは 6＋6／4＋4＋4 に揃える（870〜950px では 11＋1 になっていた） */
@media (max-width: 952px) {
  .svc-page #platforms .platform-grid { max-width: 432px; margin-inline: auto; }
}
@media (max-width: 720px) {
  .svc-page #platforms .platform-grid { max-width: 244px; }
}
/* 横長のワードマーク（Yahoo! JAPAN・PR TIMES）は正方形枠だと高さ6px前後で読めない */
.svc-page .platform-btn .pb-wordmark { width: 44px; height: 28px; }
@media (max-width: 720px) {
  .svc-page .platform-btn .pb-wordmark { width: 38px; height: 24px; }
}

/* ---------- 9. カスタマージャーニー ---------- */
.svc-page .jm-state h4 { text-wrap: balance; }

/* PC（3カラム）：1段目の吹き出しが左端の点線コネクタに重なっていた */
@media (min-width: 1240px) {
  .svc-page .jm-row:first-child .jm-state h4 { max-width: min(330px, calc(100% - 28px)); }
}

/* 901〜1239px：3カラムでは左右の列が狭い。901px 付近は 220px 前後で、吹き出しは4〜5行に
   潰れ、チップは1列23段になる。1180px でも右列は 289px しかなく、Awareness／Interest／
   Comparison のチップ群が段の間 8px（群の中は 6px）で続いて、どの段のものか見分けられない。
   コンテナが最大幅（1144px）に届く 1240px までは、タブレットと同じ縦積みレイアウトを使う */
@media (min-width: 901px) and (max-width: 1239px) {
  .svc-page .jm-heads,
  .svc-page .jm-link { display: none; }
  .svc-page .jm-flow { display: grid; justify-items: center; margin: 8px 0 6px; }
  .svc-page .jm-flow span {
    position: relative;
    width: 0; height: 104px;
    border-left: 2px dashed var(--brand-deep);
    opacity: .75;
  }
  .svc-page .jm-flow span::after {
    content: "";
    position: absolute;
    bottom: -9px; left: -8px;
    border: 7px solid transparent;
    border-top: 9px solid var(--brand-deep);
    border-bottom: 0;
  }
  .svc-page .jm-row { grid-template-columns: minmax(0, 1fr); gap: 8px; justify-items: center; }
  .svc-page .jm-row + .jm-row { margin-top: 14px; }
  .svc-page .jm-node { order: 1; }
  .svc-page .jm-row .jm-state { order: 2; text-align: center; padding-right: 0; transform: none; }
  .svc-page .jm-state h4 {
    max-width: 100%;
    border-color: #B9C7D2;
    box-shadow: 0 8px 20px rgba(20,32,43,.14);
  }
  .svc-page .jm-state h4::before,
  .svc-page .jm-state h4::after { border-color: #B9C7D2; top: auto; }
  .svc-page .jm-state h4::before { right: calc(50% - 5px); bottom: -16px; }
  .svc-page .jm-state h4::after { right: calc(50% - 14px); bottom: -26px; }
  .svc-page .jm-acts { order: 3; justify-content: center; }
  .svc-page .jm-funnel { width: 340px; opacity: .32; }
  .svc-page .jm-climb { margin-top: 18px; }
  .svc-page .climb-head { padding-left: 0; }
}

/* 縦積み時：吹き出しの「しっぽ」の小さい丸が、下の施策チップに 3px ほど重なっていた */
@media (max-width: 1239px) {
  .svc-page .jm-row { grid-template-columns: minmax(0, 1fr); }
  .svc-page .jm-acts { margin-top: 28px; }
}

/* ==== patches/works.css ==== */
/* ============================================================
   Works（/en/our-works/）ページ専用パッチ
   patches/ 配下は英語サイトの全ページで読み込まれるため、
   すべて main.works-page の中だけに効かせる。
   ============================================================ */

/* ---------- ページ見出し：見た目は従来の青い小ラベルのまま、要素だけ h1 にする
   （.page-hero h1 の大きな見出しサイズを打ち消す） ---------- */
.works-page .page-hero h1.eyebrow {
  font-size: 12px;
  line-height: 1;
  max-width: none;
}

/* ---------- フィルター行
   フェードインは行全体で1回。.reveal.is-in の transform で行がスタッキング
   コンテキストになるので、プルダウンのメニューが後続のカードより上に出るよう
   行そのものに z-index を持たせる ---------- */
.works-page .filter-row {
  position: relative;
  z-index: 30;
}
/* 見た目の高さ（35px）は変えず、押せる範囲だけ上下に5pxずつ広げて45pxにする
   （基準が枠線の内側なので指定は-6px。チップ同士の間隔が10pxなので、
   折り返しても隣の範囲とは重ならない） */
.works-page .filter-btn,
.works-page .filter-select { position: relative; }
.works-page .filter-btn::after,
.works-page .filter-select::after {
  content: "";
  position: absolute;
  top: -6px; right: 0; bottom: -6px; left: 0;
}
/* メニュー内の選択肢：タッチ端末では1行を44pxに */
@media (hover: none), (max-width: 1024px) {
  .works-page .filter-option { min-height: 44px; }
}
/* キーボードで選択肢を移動するとき、フォーカスの枠がメニューの縁に重ならないよう内側に引く */
.works-page .filter-option:focus-visible { outline-offset: -2px; }
/* スマホ：チップとプルダウンを1つの流れに並べる。チップが2行に折り返したとき、
   プルダウンだけが3行目に孤立せず、最後のチップの右に収まる
   （収まらない幅では自然に次の行の右端へ落ちる） */
@media (max-width: 720px) {
  .works-page .filter-row { gap: 10px; }
  .works-page .filter-row .filter-bar { display: contents; }
}
/* 360px前後の端末：チップの左右余白を少し詰めて、1行目に3つ、2行目に
   「Strategy & PR」とプルダウンを収める（詰めないとプルダウンだけ3行目に落ちる） */
@media (max-width: 374px) {
  .works-page .filter-btn { padding-inline: 16px; }
}

/* ---------- カードグリッド
   列数：PC 3 ／ タブレット 2 ／ スマホ 1。
   行内のカードは同じ高さに揃える。行間はカード側の margin-bottom で取り、
   グリッドの row-gap は 0 にしておく（下の subgrid で、カード内の段にまで
   行間が入らないようにするため） ---------- */
.works-page .locked-grid {
  align-items: stretch;
  row-gap: 0;
}
@media (min-width: 721px) and (max-width: 1024px) {
  .works-page .locked-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.works-page .locked-card {
  --work-pad: var(--s4);   /* カード左右の余白（.card と同じ値。下の「広げたカード」の列合わせに使う） */
  display: flex;
  flex-direction: column;
  margin-bottom: var(--s3);
}
.works-page .locked-card.is-hidden { display: none; }
/* 3列のうち幅が狭い帯（1025〜1439px）ではカード内の余白を少し詰めて、本文の行長を確保する。
   1440px以上は元の40pxのまま */
@media (min-width: 1025px) {
  .works-page .locked-card {
    --work-pad: clamp(26px, 3.2vw - 6px, 40px);
    padding-inline: var(--work-pad);
  }
}
/* カードの中の3つのまとまり（数字＋タイトル／写真＋クライアント／本文＋期間）。
   ふだんは箱を作らず、中身がそのままカード直下に並ぶ */
.works-page .work-part {
  display: var(--work-part-display, contents);
  flex-direction: column;
  min-width: 0;
}
.works-page .work-part--text { grid-column: var(--work-text-column, auto); }
.works-page .locked-card .work-tag { grid-column: 1 / -1; }
/* flex / grid の中では上下マージンが相殺されないので、タイトル→写真の間隔を元の16pxに保つ */
.works-page .locked-card .work-photo { margin-top: 0; }
.works-page .locked-card .work-title,
.works-page .locked-card .locked-client { margin-bottom: var(--work-part-end, var(--s2)); }
/* 期間はカード（まとまり）の底に揃える */
.works-page .locked-card .locked-meta {
  margin-top: auto;
  padding-top: var(--s2);
}

/* タッチ端末：プルダウンで業種を選んだ直後、指の位置に残った :hover が下のカードに
   掛かって、1枚だけ色が変わって「選択中」に見えてしまう。カードは押せる要素では
   ないので、ホバーできない端末では浮き・色替えを止める */
@media (hover: none) {
  .works-page .locked-card:hover {
    transform: none;
    box-shadow: none;
    background: var(--bg);
    border-top-color: transparent;
  }
  .works-page .locked-card.is-locked:hover { background: #FAFBFC; }
  .works-page .locked-card.is-open-case:hover { border-top-color: var(--brand); }
  .works-page .locked-card:hover::after { transform: scaleX(0); }
}

/* 2列以上のとき：カードの中身（ラベル／数字／タイトル／写真／クライアント／本文／期間 の7段）を
   親グリッドの行に載せ、横に並んだカード同士で写真や本文の開始位置を揃える。
   カードの段数を変えるときは、下の span 7 も同じ数に合わせること */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 721px) {
    .works-page .locked-card {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: subgrid;
      grid-row: span 7;
      align-items: start;
    }
    .works-page .locked-card.is-hidden { display: none; }
  }
}

/* ---------- 最終行にカードが1枚だけ残るとき：そのカードを行いっぱいに広げる
   （表示中のカードのうち最後の1枚が、PCなら3n+1枚目、タブレットなら2n+1枚目のとき）。
   中身は3つのまとまりを横に並べ、各列の幅と位置を上の段のカードの中身と揃える。
   全件表示のPC（10枚＝3+3+3+1）と、絞り込みで端数が出たときに効く。
   「:nth-child(… of …)」が使えない古いブラウザでは、通常のカードのまま1枚で並ぶ ---------- */
@media (min-width: 1025px) {
  .works-page .locked-card:nth-child(3n + 1 of .locked-card:not(.is-hidden)):nth-last-child(1 of .locked-card:not(.is-hidden)) {
    --work-part-display: flex;
    --work-part-end: 0px;
    grid-column: 1 / -1;
    grid-row: auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto 1fr;
    /* 上の段のカード同士の中身の間隔＝左右の余白×2＋列間24px＋枠線2px */
    column-gap: calc(var(--work-pad) * 2 + var(--s3) + 2px);
    align-items: stretch;
  }
}
/* タブレット：数字＋タイトル｜写真＋クライアント の2列、本文と期間はその下に全幅 */
@media (min-width: 721px) and (max-width: 1024px) {
  .works-page .locked-card:nth-child(2n + 1 of .locked-card:not(.is-hidden)):nth-last-child(1 of .locked-card:not(.is-hidden)) {
    --work-part-display: flex;
    --work-part-end: var(--s3);
    --work-text-column: 1 / -1;
    grid-column: 1 / -1;
    grid-row: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    column-gap: calc(var(--work-pad) * 2 + var(--s3) + 2px);
    align-items: stretch;
  }
}

/* ---------- 成果の数字：数字の下にラベルを置く
   横並びのままだとカード幅ではラベルが4〜5行に割れていたため、縦積みに統一。
   ラベルは行の長さを揃えて折り返し、1語だけの行を作らない ---------- */
.works-page .locked-big {
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.works-page .locked-big-label {
  display: block;
  padding-bottom: 0;
  line-height: 1.5;
  text-wrap: balance;
}
/* 成果を2つ並べるラベル（「／」で始まる2つ目）は、成果ごとに1ブロック
   （.nw は折り返し止めの印なので、ブロックにしない） */
.works-page .locked-big-label > span:not(.nw) {
  display: block;
  text-wrap: balance;
}

/* タイトルも行の長さを揃え、最終行に1語だけ残さない */
.works-page .locked-card .work-title { text-wrap: balance; }

/* ---------- Blacksmith Japan の写真
   元画像（1024×1280）には、上下の黒帯のほかに黒い内枠と店名の帯が焼き込まれている。
   内枠の内側で、店名の帯より上の範囲（左上 x104・y404 から 661×372px）だけが
   見えるように拡大する。通常の表示（16:9・中央合わせ＝元画像の y352〜928）が基準で、
     倍率 = 1024 ÷ 661 ≒ 1.55
     基点 = 倍率 × 開始位置 ÷（倍率 − 1）  横: 104/1024 → 28.62%  縦: (404−352)/576 → 25.44%
   倍率を変えるときは、テンプレート側の jdoc_en_works_photo() に渡している 1.55 も合わせる ---------- */
.works-page .work-photo--blacksmith > img {
  transform: scale(1.55);
  transform-origin: 28.62% 25.44%;
}

/* ---------- 0件のとき ---------- */
.works-page .works-empty {
  grid-column: 1 / -1;
  margin-bottom: var(--s3);
  padding: var(--s5) var(--s3);
  border: 1px dashed var(--line);
  border-radius: 10px;
  text-align: center;
}
.works-page .works-empty[hidden] { display: none; }
.works-page .works-empty p {
  font: 500 12px/1.5 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s2);
}
.works-page .works-empty-reset {
  appearance: none; -webkit-appearance: none;
  padding: 12px 8px;
  border: 0;
  background: none;
  cursor: pointer;
}

/* ---------- 末尾の帯（Request the full case files）
   カードと同じグリッドの最後に、全幅・中央揃えで置く（元のデザインどおり） ---------- */
.works-page .works-cta {
  grid-column: 1 / -1;
  /* 元の上余白64pxから、直前のカードの margin-bottom 24px を引く */
  margin-top: calc(var(--s5) - var(--s3));
}
.works-page .works-cta .lead { text-wrap: balance; }
/* 320px幅の端末でもボタンの文言を1行に収める */
@media (max-width: 359px) {
  .works-page .works-cta .btn-primary { padding-inline: 20px; }
}

/* ---------- 締めのCTA：リード文の1行固定（.nowrap-lead）は、1行に収まる幅だけに限る ---------- */
@media (min-width: 721px) and (max-width: 1199px) {
  .works-page .cta .nowrap-lead {
    white-space: normal;
    text-wrap: balance;
  }
}