/* =====================================================================
   FDE QUEST — Home only (prefix: hx-)
   PM QUEST(forward-deployed-pm-perf)のトップ設計を移植したもの。
   艦隊共通エンジン（/style.css, /assets/site.css, /assets/research.css）は
   一切編集せず、このファイルは index.html からのみ読み込む。
   アクセントはFDEのティール #0891B2、ネイビーは #0F1A30〜#1A2B4B系。
   ===================================================================== */

.hx-home { --hx-teal: #0891B2; --hx-teal-dk: #0E7490; --hx-teal-lt: #67E8F9;
           --hx-navy: #0F1A30; --hx-navy-2: #1A2B4B; --hx-navy-3: #243B6B; }

/* 横スクロール防止（モザイクが画面外にはみ出すため） */
.hx-home { overflow-x: hidden; }

/* ===== 暗いヒーロー上のヘッダー（ガラス化前は白文字に） ===== */
.hx-home .header:not(.is-glass):not(.header--solid) .logo-name-main,
.hx-home .header:not(.is-glass):not(.header--solid) .logo-name-sub,
.hx-home .header:not(.is-glass):not(.header--solid) .header-nav > a,
.hx-home .header:not(.is-glass):not(.header--solid) .hdr-cobrand { color: rgba(255,255,255,.88); }
.hx-home .header:not(.is-glass):not(.header--solid) .logo-name-main em { color: var(--hx-teal-lt) !important; }
.hx-home .header:not(.is-glass):not(.header--solid) .header-nav > a:hover { color: #fff; background: rgba(255,255,255,.14); }

/* =====================================================================
   HERO — コンテンツのモザイク背景 ＋ 左の暗幕・右の照明
   ===================================================================== */
/* フルブリード＝ヘッダー下から画面端まで。角丸・余白・枠線なしで「ワッと」広げる */
.hx-hero { padding: 0; }
.hx-hero-stage {
  position: relative; overflow: hidden;
  border-radius: 0;
  background: #070d1a; color: #fff;
  border: 0;
  box-shadow: none;
}
/* ヒーロー背景＝承認済み現場6カットのループ動画（全面カバー） */
.hx-hero-video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 46%;
  display: block; pointer-events: none;
  background: #070d1a;
}
.hx-hero-overlay {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* 背景がサムネのモザイクから実写の現場動画に変わったため、暗幕は「現場が見える濃さ」へ調整
     （旧: 102deg .97→.58 は実写を潰していた）。ワードマークの可読性は中央の楕円スクリム＋text-shadowで確保。 */
  background:
    linear-gradient(180deg, rgba(7,12,26,0.80) 0%, rgba(7,12,26,0.52) 40%, rgba(7,12,26,0.62) 76%, rgba(7,12,26,0.80) 100%),
    radial-gradient(ellipse 66% 58% at 50% 47%, rgba(7,12,26,0.52), transparent 72%),
    radial-gradient(ellipse 54% 60% at 16% 42%, rgba(8,145,178,0.22), transparent 62%);
}
.hx-hero-inner { position: relative; z-index: 2; max-width: 1240px; margin: 0 auto; padding: 104px clamp(20px, 5vw, 68px) 72px; }

/* ===== ワードマーク主役ヒーロー（コピー主体をやめ、FDE QUESTの巨大タイポ1枚に） ===== */
.hx-wordmark { text-align: center; padding: clamp(20px, 5vh, 56px) 0 clamp(8px, 2vh, 20px); }
.hx-hero h1.hx-wm-type {
  font-family: 'Inter', sans-serif; font-weight: 800; color: #fff;
  font-size: clamp(64px, 15.5vw, 180px); line-height: .92; letter-spacing: -.055em;
  margin: 0; text-shadow: 0 8px 60px rgba(0,0,0,.5);
}
.hx-wm-type .hx-wm-sp { letter-spacing: -.02em; }
.hx-wm-tag {
  font-size: clamp(13.5px, 1.5vw, 18px); font-weight: 700; letter-spacing: .01em;
  color: rgba(255,255,255,.9); margin: clamp(16px, 2.4vh, 26px) auto 0; max-width: 40em;
}
.hx-wm-cta { justify-content: center; margin-top: clamp(22px, 3.4vh, 38px); }

/* 運営コブランド */
.hx-cobrand { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0 0 26px; flex-wrap: wrap; }
.hx-cb-item { display: inline-flex; align-items: center; gap: 8px; }
.hx-cb-item img { height: 30px; width: auto; display: block; filter: drop-shadow(0 2px 6px rgba(0,0,0,.4)); }
.hx-cb-item b, .hx-cb-item small { font-family: 'Inter', 'Noto Sans JP', sans-serif; font-size: 15.5px; font-weight: 800; color: rgba(255,255,255,.94); letter-spacing: .02em; }
.hx-cb-x { color: rgba(255,255,255,.42); font-size: 13px; font-weight: 700; }

.hx-hero-grid { display: grid; grid-template-columns: 1.14fr .86fr; gap: 54px; align-items: center; }
.hx-eyebrow { display: inline-flex; align-items: center; gap: 11px; font-size: 11.5px; font-weight: 800; letter-spacing: 3.5px; color: var(--hx-teal-lt); margin-bottom: 22px; text-transform: uppercase; }
.hx-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--hx-teal); box-shadow: 0 0 0 4px rgba(8,145,178,.30); }
.hx-hero h1 { font-size: clamp(31px, 4.4vw, 54px); font-weight: 900; line-height: 1.20; letter-spacing: -2.2px; margin: 0 0 22px; color: #fff; text-shadow: 0 2px 30px rgba(0,0,0,.45); }
/* ハイライト帯の上に乗る語は白（ティール帯とのコントラスト確保） */
.hx-hero h1 em { font-style: normal; color: #fff; }
.hx-hero h1 .nw { white-space: nowrap; }
.hx-hero h1 .mark { position: relative; }
.hx-hero h1 .mark::after {
  content: ''; position: absolute; left: -1px; right: -1px; bottom: .06em; height: .22em;
  background: linear-gradient(90deg, rgba(8,145,178,.85), rgba(13,148,136,.55));
  border-radius: 4px; z-index: -1;
}
.hx-hero-sub { font-size: 16.5px; color: rgba(255,255,255,.85); line-height: 2.0; max-width: 620px; margin: 0 0 30px; }
.hx-hero-sub strong { color: #fff; font-weight: 800; }

.hx-cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.hx-btn-primary {
  background: var(--hx-teal); color: #fff; font-size: 15.5px; font-weight: 800;
  padding: 16px 32px; border-radius: 13px; text-decoration: none;
  box-shadow: 0 14px 38px -8px rgba(8,145,178,.65);
  display: inline-flex; align-items: center; gap: 9px;
  transition: transform .15s, box-shadow .15s, background .15s;
}
.hx-btn-primary:hover { background: var(--hx-teal-dk); transform: translateY(-2px); box-shadow: 0 18px 46px -8px rgba(8,145,178,.8); }
.hx-btn-ghost {
  background: rgba(255,255,255,.1); color: #fff; border: 1.5px solid rgba(255,255,255,.28);
  font-size: 15px; font-weight: 700; padding: 15px 26px; border-radius: 13px; text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px; transition: all .15s; backdrop-filter: blur(6px);
}
.hx-btn-ghost:hover { background: rgba(255,255,255,.18); transform: translateY(-2px); }
.hx-hero-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 18px; font-size: 13.5px; }
.hx-hero-links a { color: rgba(255,255,255,.9); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.35); padding-bottom: 2px; }
.hx-hero-links a:hover { color: var(--hx-teal-lt); border-color: var(--hx-teal-lt); }

.hx-hero-trust { display: flex; gap: 30px; flex-wrap: wrap; margin-top: 34px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.16); }
.hx-ht .v { font-size: 25px; font-weight: 900; color: #fff; font-family: 'Inter', sans-serif; line-height: 1; }
.hx-ht .v span { font-size: 13px; color: var(--hx-teal-lt); }
.hx-ht .l { font-size: 11px; color: rgba(255,255,255,.64); margin-top: 6px; font-weight: 600; line-height: 1.5; }

/* 監修者カード（ヒーロー右） */
.hx-rep { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: 24px; padding: 30px; backdrop-filter: blur(14px); box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); }
.hx-rep-rank { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 800; color: #CFFAFE; background: rgba(8,145,178,.20); border: 1px solid rgba(8,145,178,.45); padding: 7px 13px; border-radius: 999px; margin-bottom: 18px; line-height: 1.5; }
.hx-rep-rank svg { width: 13px; height: 13px; fill: var(--hx-teal-lt); flex: 0 0 auto; }
.hx-rep-photo { width: 92px; height: 92px; border-radius: 50%; overflow: hidden; margin-bottom: 15px; border: 3px solid rgba(255,255,255,.9); box-shadow: 0 6px 18px rgba(0,0,0,.4); background: #16233d; }
.hx-rep-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.hx-rep-name { font-size: 19px; font-weight: 900; color: #fff; }
.hx-rep-name small { display: block; font-size: 12px; font-weight: 600; color: rgba(255,255,255,.66); margin-top: 5px; }
.hx-rep-bio { font-size: 12.5px; color: rgba(255,255,255,.76); line-height: 1.85; margin: 15px 0 0; padding-top: 15px; border-top: 1px solid rgba(255,255,255,.14); }

/* ブランド帯（自ブランド＋親会社のみ） */
.hx-hero-brands { display: flex; align-items: center; gap: 24px; max-width: 1240px; margin: 0 auto; padding: 22px clamp(20px, 5vw, 68px) 0; }
.hx-hb-label { flex-shrink: 0; font-size: 10px; font-weight: 800; letter-spacing: 2.5px; color: var(--text-muted); border-right: 1px solid var(--border); padding-right: 24px; }
.hx-hb-mq { flex: 1; min-width: 0; }
.hx-hb-mq .marquee-track { display: inline-flex; align-items: center; gap: 60px; animation-duration: 26s; }
.hx-hb-item { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; letter-spacing: 1px; color: var(--text-muted); white-space: nowrap; }
.hx-hb-item img { height: 20px; width: auto; display: block; opacity: .85; }
@media (max-width: 800px) { .hx-hb-label { display: none; } }

/* =====================================================================
   艦隊エンジンに無い共通パーツ（旧index.htmlのインラインstyleから移設）
   ===================================================================== */
/* Material Symbols の共通調整（見出しバッジ・カードバッジ・矢印） */
.hx-home .material-symbols-rounded { font-variation-settings: 'wght' 500, 'opsz' 24; vertical-align: middle; }
/* セクション番号ラベルはひと回り大きく・コントラスト強め（小さくて見にくいFB） */
.hx-home .hm-kicker {
  font-size: 13.5px; font-weight: 900; letter-spacing: 2.6px;
  padding: 7px 20px 7px 7px; gap: 11px;
  color: var(--sec, #0E7490); background: #fff;
  border: 1.5px solid var(--sec, #0891B2);
  box-shadow: 0 6px 16px -10px rgba(15,26,48,.3);
}
.hx-home .hm-kicker .no { min-width: 30px; height: 30px; font-size: 14px; }
.hx-home .hm-kicker .km { font-size: 19px; margin-left: 2px; margin-right: -4px; }
.hx-home .hx-author-chips span { display: inline-flex; align-items: center; gap: 4px; }
.hx-home .hx-author-chips .material-symbols-rounded { font-size: 14px; }

.heroA-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--primary); color: #fff; font-weight: 800; font-size: 15.5px;
  padding: 16px 32px; border-radius: 999px; text-decoration: none;
  box-shadow: 0 25px 50px -12px rgba(30,42,90,.4);
  transition: transform .2s cubic-bezier(.16,1,.3,1);
}
.heroA-btn:hover { transform: scale(1.05); }
.heroA-btn.gold { background: var(--accent); box-shadow: 0 25px 50px -12px rgba(8,145,178,.5); }
@media (prefers-reduced-motion: reduce) { .heroA-btn { transition: none; } .heroA-btn:hover { transform: none; } }

/* =====================================================================
   3 PILLARS
   ===================================================================== */
.hx-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 34px; }
.hx-pillar {
  display: flex; flex-direction: column; border-radius: 18px; text-decoration: none;
  background: #fff; border: 1px solid var(--border); position: relative; overflow: hidden;
  transition: transform .2s, box-shadow .2s, border-color .2s;
  box-shadow: 0 8px 24px -14px rgba(15,26,48,.3);
}
.hx-pillar:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -22px rgba(15,26,48,.34); }
.hx-pillar.r:hover { border-color: #0891B2; }
.hx-pillar.e:hover { border-color: #B8862F; }
.hx-pillar.n:hover { border-color: #7c3aed; }
/* --- 純CSSタイル（スライド縮小画像を廃止＝文字が読めないため） --- */
.hx-pillar-tile {
  position: relative; overflow: hidden; aspect-ratio: 16/10;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 22px 24px 20px; isolation: isolate;
}
.hx-pillar-tile .pt-ic {
  position: absolute; top: 16px; left: 20px; z-index: 2;
  font-size: 78px; line-height: 1; font-variation-settings: 'wght' 300, 'opsz' 48;
}
.hx-pillar-tile .pt-num {
  position: relative; z-index: 2;
  font-family: 'Inter', sans-serif; font-weight: 900; font-size: clamp(56px, 6.6vw, 84px);
  line-height: .88; letter-spacing: -.055em; display: block;
}
.hx-pillar-tile .pt-num em { font-style: normal; font-size: .34em; font-weight: 800; letter-spacing: 0; margin-left: .12em; }
.hx-pillar-tile .pt-cap { position: relative; z-index: 2; display: block; font-size: 14.5px; font-weight: 800; margin-top: 8px; letter-spacing: .01em; }
.hx-pillar-tile .pt-word {
  position: relative; z-index: 2; display: block;
  font-size: clamp(28px, 3.4vw, 38px); font-weight: 900; line-height: 1.15; letter-spacing: -.03em; color: #fff;
}
.hx-pillar-tile .pt-foot {
  position: relative; z-index: 2; display: block; margin-top: 10px;
  font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 800; letter-spacing: 2.2px;
  padding-top: 9px;
}
/* 測る＝ミッドナイトネイビー面 */
.hx-pillar-tile.t-navy { background: var(--hx-navy); color: #fff; }
.hx-pillar-tile.t-navy .pt-ic { color: rgba(103,232,249,.55); }
.hx-pillar-tile.t-navy .pt-num { color: #fff; }
.hx-pillar-tile.t-navy .pt-num em { color: var(--hx-teal-lt); }
.hx-pillar-tile.t-navy .pt-cap { color: rgba(255,255,255,.9); }
.hx-pillar-tile.t-navy .pt-foot { color: rgba(255,255,255,.55); border-top: 1px solid rgba(255,255,255,.2); }
/* 読む＝紙色（クリーム）面 */
.hx-pillar-tile.t-paper { background: #F7F4ED; color: var(--hx-navy); }
.hx-pillar-tile.t-paper .pt-ic { color: rgba(15,26,48,.26); }
.hx-pillar-tile.t-paper .pt-num { color: var(--hx-navy); }
.hx-pillar-tile.t-paper .pt-num em { color: #9A6E22; }
.hx-pillar-tile.t-paper .pt-cap { color: rgba(15,26,48,.82); }
.hx-pillar-tile.t-paper .pt-foot { color: rgba(15,26,48,.5); border-top: 1px solid rgba(15,26,48,.16); }
/* 掴む＝山根写真フル面＋ネイビーオーバーレイ */
.hx-pillar-tile.t-photo { background: var(--hx-navy); }
.hx-pillar-tile.t-photo img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; display: block; }
.hx-pillar-tile.t-photo .pt-veil { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(15,26,48,.62) 0%, rgba(15,26,48,.74) 46%, rgba(15,26,48,.93) 100%); }
.hx-pillar-tile.t-photo .pt-ic { color: rgba(103,232,249,.8); }
.hx-pillar-tile.t-photo .pt-foot { color: rgba(255,255,255,.6); border-top: 1px solid rgba(255,255,255,.22); }

.hx-pillar-body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; border-top: 1px solid var(--border); }
.hx-pillar-cat { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 800; letter-spacing: 1px; margin-bottom: 11px; }
.hx-pillar-cat .material-symbols-rounded { font-size: 17px; flex: 0 0 auto; }
.hx-pillar-go .material-symbols-rounded { font-size: 18px; transition: transform .2s; }
.hx-pillar:hover .hx-pillar-go .material-symbols-rounded { transform: translateX(4px); }
.hx-pillar.r .hx-pillar-cat { color: #0E7490; }
.hx-pillar.e .hx-pillar-cat { color: #9A6E22; }
.hx-pillar.n .hx-pillar-cat { color: #6d28d9; }
.hx-pillar h3 { font-size: 19px; font-weight: 900; margin: 0 0 9px; line-height: 1.42; color: #0e1726; }
.hx-pillar p { font-size: 13px; line-height: 1.85; color: #475569; margin: 0 0 16px; flex: 1; }
.hx-pillar-go { font-size: 14px; font-weight: 800; display: inline-flex; align-items: center; gap: 7px; }
.hx-pillar.r .hx-pillar-go { color: #0E7490; }
.hx-pillar.e .hx-pillar-go { color: #9A6E22; }
.hx-pillar.n .hx-pillar-go { color: #6d28d9; }

/* =====================================================================
   3 TYPES — 図鑑キャラへの橋（大きめカード3体）
   ===================================================================== */
.hx-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 34px; max-width: 920px; margin-inline: auto; }
.hx-ty {
  display: flex; flex-direction: column; text-decoration: none;
  background: #fff; border: 1px solid var(--border); border-radius: 6px; overflow: hidden;
  box-shadow: 0 8px 24px -16px rgba(15,26,48,.3);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.hx-ty:hover { transform: translateY(-5px); border-color: var(--ty, var(--hx-teal)); box-shadow: 0 26px 50px -22px rgba(15,26,48,.32); }
.hx-ty .ty-fig { position: relative; display: block; background: #F7F4ED; }
.hx-ty .ty-fig img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; display: block; }
.hx-ty .ty-no {
  position: absolute; top: 12px; left: 12px;
  font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 900; letter-spacing: .12em;
  color: #fff; background: var(--ty, var(--hx-teal)); padding: 4px 9px; border-radius: 2px;
}
.hx-ty .ty-body { display: flex; flex-direction: column; flex: 1; padding: 16px 18px 18px; border-top: 1px solid var(--border); }
.hx-ty .ty-nm { font-size: 17px; font-weight: 900; color: var(--hx-navy); line-height: 1.4; }
.hx-ty .ty-tx { font-size: 13.5px; font-weight: 600; color: rgba(15,26,48,.72); line-height: 1.85; margin: 9px 0 16px; flex: 1; }
.hx-ty .ty-tx b { font-weight: 900; color: var(--ty, var(--hx-teal-dk)); }
.hx-ty .ty-go { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 800; color: var(--ty, var(--hx-teal-dk)); }
.hx-ty .ty-go .material-symbols-rounded { font-size: 18px; transition: transform .2s; }
.hx-ty:hover .ty-go .material-symbols-rounded { transform: translateX(4px); }
.hx-types-cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 34px; }
@media (max-width: 900px) { .hx-types { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .hx-types-cta .heroA-btn { width: 100%; justify-content: center; font-size: 14px; padding: 15px 22px; } }

/* =====================================================================
   BY THE NUMBERS — 数字主役（カウントアップ＋円ゲージ）
   ===================================================================== */
.hx-gauges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 34px; }
.hx-gauge { --p: 0; text-align: center; }
.hg-ring {
  position: relative; width: clamp(150px, 15vw, 196px); aspect-ratio: 1; margin: 0 auto 18px;
  border-radius: 50%;
  background:
    conic-gradient(from -90deg, var(--hx-teal) calc(var(--p) * 360deg), rgba(15,26,48,.10) 0);
  display: flex; align-items: center; justify-content: center;
}
.hg-ring::before {
  content: ''; position: absolute; inset: 13px; border-radius: 50%;
  background: var(--bg, #fff); box-shadow: 0 10px 26px -18px rgba(15,26,48,.5);
}
.hx-nums .hg-ring::before { background: #fff; }
.hg-v { position: relative; z-index: 1; display: inline-flex; align-items: baseline; font-family: 'Inter', sans-serif; color: var(--hx-navy); }
.hg-v b { font-size: clamp(34px, 3.9vw, 50px); font-weight: 900; letter-spacing: -.05em; line-height: 1; }
.hg-v i, .hg-v em { font-style: normal; font-weight: 800; font-size: clamp(13px, 1.3vw, 16px); color: var(--hx-teal-dk); }
.hg-v i { margin-right: 1px; }
.hg-v em { margin-left: 2px; }
.hg-lb { font-size: 14.5px; font-weight: 900; color: var(--hx-navy); }
.hg-tx { font-size: 12px; font-weight: 600; color: rgba(15,26,48,.62); line-height: 1.8; margin-top: 7px; }
.hg-tx span { font-size: 11px; color: rgba(15,26,48,.45); }
.hx-nums-src { font-size: 11.5px; color: var(--text-muted); margin: 26px 0 0; line-height: 1.8; }
@media (max-width: 820px) { .hx-gauges { grid-template-columns: 1fr; gap: 32px; } }
@media (prefers-reduced-motion: reduce) { .hg-ring { transition: none; } }

/* =====================================================================
   FIGURE BAND — 白カード羅列をやめ、画面幅の濃紺バンドに巨大数字3つ
   ===================================================================== */
.hx-figband {
  position: relative; margin: 34px 0 0;
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  width: 100vw; background: var(--hx-navy); color: #fff;
}
.hx-figband-inner {
  max-width: 1240px; margin: 0 auto; padding: 44px clamp(20px, 5vw, 60px);
  display: grid; grid-template-columns: repeat(3, 1fr);
}
.hx-fig { padding: 0 clamp(14px, 3vw, 38px); border-left: 1px solid rgba(255,255,255,.18); }
.hx-fig:first-child { border-left: 0; padding-left: 0; }
.hx-fig-lb { font-size: 11.5px; font-weight: 800; letter-spacing: 1.6px; color: var(--hx-teal-lt); margin-bottom: 14px; }
.hx-fig-n {
  font-family: 'Inter', sans-serif; font-weight: 900;
  font-size: clamp(42px, 5.6vw, 76px); line-height: .9; letter-spacing: -.055em; color: #fff;
}
.hx-fig-n em { font-style: normal; font-size: .32em; font-weight: 800; letter-spacing: 0; margin-left: .1em; color: rgba(255,255,255,.82); }
.hx-fig-tx { font-size: 12.5px; color: rgba(255,255,255,.66); line-height: 1.7; margin: 14px 0 0; font-weight: 600; }

/* =====================================================================
   REPORTS — スクショサムネを廃止し「読める数字タイル」に
   ===================================================================== */
.hx-reports { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 34px; }
.hx-rp { display: flex; align-items: stretch; background: #fff; border: 1px solid var(--border); overflow: hidden; border-radius: 4px; transition: border-color .2s, box-shadow .2s; }
.hx-rp:hover { border-color: var(--hx-teal); box-shadow: 0 16px 34px -18px rgba(15,26,48,.22); }
.hx-rp-fig {
  flex: 0 0 auto; width: 196px; display: flex; flex-direction: column; justify-content: center;
  padding: 22px 20px; gap: 10px;
}
.hx-rp-fig.f-navy { background: var(--hx-navy); }
.hx-rp-fig.f-navy .rf-lb { color: var(--hx-teal-lt); }
.hx-rp-fig.f-navy .rf-n { color: #fff; }
.hx-rp-fig.f-navy .rf-n em { color: rgba(255,255,255,.8); }
.hx-rp-fig.f-paper { background: #F7F4ED; border-right: 1px solid rgba(15,26,48,.1); }
.hx-rp-fig.f-paper .rf-lb { color: #0E7490; }
.hx-rp-fig.f-paper .rf-n { color: var(--hx-navy); }
.hx-rp-fig.f-paper .rf-n em { color: rgba(15,26,48,.62); }
.rf-lb { font-size: 10.5px; font-weight: 800; letter-spacing: 1.4px; line-height: 1.5; }
.rf-n { font-family: 'Inter', sans-serif; font-weight: 900; font-size: 40px; line-height: .95; letter-spacing: -.05em; }
.rf-n em { font-style: normal; font-size: .42em; font-weight: 800; letter-spacing: 0; margin-left: .08em; }
.rf-n em.sep { font-size: 1em; margin: 0 .01em; }
.hx-rp-body { flex: 1; min-width: 0; padding: 20px 22px; }
.hx-rp-no { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: 1.6px; color: var(--text-muted); margin-bottom: 8px; }
.hx-rp-no .material-symbols-rounded { font-size: 15px; color: var(--hx-teal); }
.hx-rp h3 { font-size: 16.5px; font-weight: 900; color: var(--text); line-height: 1.5; margin: 0 0 7px; }
.hx-rp-body > p { font-size: 12.5px; color: var(--text-sec); line-height: 1.8; margin: 0 0 13px; }
.hx-rp-go { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 800; color: var(--hx-teal-dk); text-decoration: none; }
.hx-rp-go .material-symbols-rounded { font-size: 18px; transition: transform .2s; }
.hx-rp:hover .hx-rp-go .material-symbols-rounded { transform: translateX(4px); }
.hx-rp-sub { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 13px; padding-top: 11px; border-top: 1px solid var(--border); }
.hx-rp-sub a { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; color: #64748b; text-decoration: none; }
.hx-rp-sub a:hover { color: var(--hx-teal-dk); }
.hx-rp-sub .material-symbols-rounded { font-size: 15px; }

/* =====================================================================
   WHAT IS FDE — 全8職種の職域比較マップ（FDEフィーチャー版）
   ===================================================================== */
.hx-jmap { margin-top: 34px; --jm-cols: 232px minmax(0, 1fr); --jm-pad: clamp(14px, 2vw, 24px); }
.hx-jmap .jm-lead { max-width: 760px; margin-bottom: 20px; }
.hx-jmap .jm-lead h3 { font-size: clamp(17px, 2vw, 22px); font-weight: 900; line-height: 1.55; color: var(--hx-navy); margin: 0 0 8px; }
.hx-jmap .jm-lead h3 em { font-style: normal; color: var(--hx-teal-dk); }
.hx-jmap .jm-lead p { font-size: 13.5px; line-height: 1.85; font-weight: 600; color: rgba(15,26,48,.72); margin: 0; }
.hx-jmap .jm-lead b { font-weight: 900; color: var(--hx-navy); }

/* 10工程のトラック（軸・FDE枠・7職種で共通） */
.jm-track { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); align-items: center; }

/* 工程軸ラベル（1回だけ表示・上下段の共通参照） */
.jm-axisbar { border: 1px solid transparent; padding: 0 var(--jm-pad); }
.jm-flowbar { display: flex; align-items: center; gap: 10px; font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; color: rgba(15,26,48,.42); margin-bottom: 10px; }
.jm-flowline { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(15,26,48,.10), rgba(8,145,178,.45)); }
.jm-axis { display: grid; grid-template-columns: var(--jm-cols); align-items: end; border-bottom: 1px solid rgba(15,26,48,.16); padding-bottom: 8px; }
.jm-axis-name { font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; color: rgba(15,26,48,.4); padding-right: 10px; }
.jm-st { font-size: 10.5px; font-weight: 800; line-height: 1.35; color: rgba(15,26,48,.62); padding: 0 4px; text-align: center; }
.jm-st i { display: block; font-family: 'Inter', sans-serif; font-style: normal; font-size: 9.5px; font-weight: 900; letter-spacing: .06em; color: rgba(15,26,48,.3); margin-bottom: 3px; }

/* ===== 上段：FDEだけの独立枠 ===== */
.jm-fde { margin-top: 14px; background: rgba(8,145,178,.07); border: 1.5px solid rgba(8,145,178,.42); border-radius: 4px; padding: 18px var(--jm-pad) 16px; }
.jm-fde-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-bottom: 14px; }
.jm-fde-head b { font-size: clamp(15px, 1.8vw, 19px); font-weight: 900; color: var(--hx-navy); }
.jm-pin { font-size: 20px; color: var(--hx-teal); }
.jm-here { display: inline-flex; align-items: center; font-family: 'Inter', sans-serif; font-size: 9.5px; font-weight: 900; letter-spacing: .1em; color: #fff; background: var(--hx-teal-dk); padding: 4px 8px; border-radius: 2px; }
.jm-fde-span { margin-left: auto; display: inline-flex; align-items: baseline; gap: 6px; font-size: 13px; font-weight: 900; color: var(--hx-teal-dk); }
.jm-fde-span i { font-family: 'Inter', sans-serif; font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .04em; color: rgba(15,26,48,.42); }
.jm-fde-row { display: grid; grid-template-columns: var(--jm-cols); align-items: center; }
.jm-name-fde { font-size: 12px; font-weight: 800; color: rgba(15,26,48,.5); padding-right: 10px; }
.jm-fde-row .jm-c { height: 30px; margin: 0 2px; }
.jm-fde-row .jm-c.on { background: var(--hx-teal); }
.jm-fde-row .jm-c.core { background: var(--hx-navy); display: flex; align-items: center; justify-content: center; }
.jm-fde-row .jm-c.core span { font-size: 10px; font-weight: 900; letter-spacing: .06em; color: var(--hx-teal-lt); }

/* ===== 下段：他の7職種（小さめの行） ===== */
.jm-others { margin-top: 26px; background: #fff; border: 1px solid rgba(15,26,48,.14); border-radius: 4px; padding: 14px var(--jm-pad) 12px; }
.jm-others-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; font-size: 13px; font-weight: 900; color: var(--hx-navy); padding-bottom: 10px; border-bottom: 1px solid rgba(15,26,48,.12); margin-bottom: 4px; }
.jm-others-head .jm-key-i { margin-left: auto; }
.jm-row { display: grid; grid-template-columns: var(--jm-cols); align-items: center; border-bottom: 1px solid rgba(15,26,48,.08); }
.jm-row:last-child { border-bottom: 0; }
.jm-name { font-size: 12.5px; font-weight: 800; color: rgba(15,26,48,.72); padding: 9px 12px 9px 0; line-height: 1.4; }
.jm-name small { display: block; font-size: 10.5px; font-weight: 700; color: rgba(15,26,48,.5); margin-top: 2px; }
.jm-name small i { font-family: 'Inter', sans-serif; font-style: normal; font-size: 9px; font-weight: 800; letter-spacing: .04em; color: rgba(15,26,48,.34); margin-left: 5px; }
.jm-c { position: relative; height: 11px; border-radius: 2px; background: rgba(15,26,48,.045); margin: 0 2px; }
.jm-c.on { background: #C6D0E0; margin-left: 0; margin-right: 0; }
.jm-c.on.s { margin-left: 2px; border-radius: 2px 0 0 2px; }
.jm-c.on.e { margin-right: 2px; border-radius: 0 2px 2px 0; }
.jm-c.on.s.e { border-radius: 2px; }
.jm-row .jm-c { margin-top: 9px; margin-bottom: 9px; }

.jm-key { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(8,145,178,.22); }
.jm-key-i { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700; color: rgba(15,26,48,.62); }
.jm-key-i i { width: 22px; height: 10px; border-radius: 2px; display: block; flex: 0 0 auto; }
.jm-key-i .sw-fde { background: var(--hx-teal); }
.jm-key-i .sw-core { background: var(--hx-navy); }
.jm-key-i .sw-oth { background: #C6D0E0; }

.jm-cap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 16px 0 0; font-size: 12.5px; font-weight: 700; color: rgba(15,26,48,.6); }
.jm-cap .material-symbols-rounded { font-size: 18px; color: var(--hx-teal); }
.jm-cap a { color: var(--hx-teal-dk); font-weight: 900; text-decoration: none; border-bottom: 1px solid rgba(8,145,178,.4); }
.jm-cap a:hover { border-bottom-color: var(--hx-teal-dk); }

@media (max-width: 900px) {
  .hx-jmap { --jm-cols: 158px minmax(0, 1fr); }
  .jm-st { font-size: 9px; }
  .jm-st i { font-size: 8.5px; }
  .jm-name { font-size: 11.5px; }
  .jm-name small { font-size: 10px; }
}

/* モバイル＝名前を上に、トラックを全幅に（横スクロールなし） */
@media (max-width: 640px) {
  .hx-jmap { --jm-cols: minmax(0, 1fr); }
  .jm-axis { display: block; }
  .jm-axis-name { padding: 0 0 6px; }
  .jm-axis .jm-track { display: flex; flex-wrap: wrap; gap: 5px; }
  .jm-st { display: inline-flex; align-items: baseline; gap: 4px; text-align: left; padding: 4px 8px; border: 1px solid rgba(15,26,48,.14); border-radius: 2px; background: #F7F4ED; font-size: 10.5px; }
  .jm-st i { display: inline; margin: 0; }
  .jm-fde-span { margin-left: 0; width: 100%; }
  .jm-name-fde { display: none; }
  .jm-others-head .jm-key-i { margin-left: 0; }
  .jm-row { padding: 9px 0; }
  .jm-name { padding: 0 0 7px; }
  .jm-row .jm-c { margin-top: 0; margin-bottom: 0; }
  /* 7職種側の列ヘッダは番号だけに（フルテキストは縦に潰れて読めないため） */
  .jm-row-head .jm-st { display: block; padding: 0 1px; border: 0; background: transparent; text-align: center; font-size: 0; }
  .jm-row-head .jm-st i { display: block; font-size: 8.5px; }
}

/* =====================================================================
   監修者バー（実績スタットの下）
   ===================================================================== */
.hx-author { display: grid; grid-template-columns: 96px 1fr auto; gap: 22px; align-items: center; background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 26px 30px; margin-top: 26px; }
.hx-author-av { width: 96px; height: 96px; border-radius: 50%; overflow: hidden; background: var(--primary-lt); }
.hx-author-av img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.hx-author .lbl { font-size: 11px; font-weight: 800; color: var(--hx-teal); letter-spacing: 1px; }
.hx-author .nm { font-size: 19px; font-weight: 900; color: var(--primary); margin: 3px 0 6px; }
.hx-author .ro { font-size: 13px; color: var(--text-sec); line-height: 1.9; }
.hx-author-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
.hx-author-chips span { font-size: 11px; font-weight: 700; color: #0E7490; background: var(--accent-lt); border: 1px solid #BAE6FD; padding: 5px 11px; border-radius: 999px; }
.hx-author .pf { font-size: 13px; font-weight: 800; color: var(--hx-teal); text-decoration: none; white-space: nowrap; }

/* =====================================================================
   CTAバンド
   ===================================================================== */
.hx-cta-band { position: relative; overflow: hidden; background: linear-gradient(135deg, #0F1A30, #1A2B4B 58%, #243B6B); padding: 62px 0; margin-top: 20px; }
.hx-cta-band::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 82% 25%, rgba(8,145,178,.24) 0%, transparent 58%); pointer-events: none; }
.hx-cta-band .hx-cta-inner { position: relative; z-index: 1; max-width: 880px; margin: 0 auto; padding: 0 24px; text-align: center; color: #fff; }
.hx-cta-kick { font-size: 11px; font-weight: 800; letter-spacing: 3px; color: var(--hx-teal-lt); margin-bottom: 14px; }
.hx-cta-band h2 { font-size: clamp(22px, 2.6vw, 30px); font-weight: 900; line-height: 1.5; margin: 0 0 14px; letter-spacing: -.5px; }
.hx-cta-band h2 em { font-style: normal; color: var(--hx-teal-lt); }
.hx-cta-band p { font-size: 15px; color: rgba(255,255,255,.85); line-height: 2.0; margin: 0 0 26px; }
.hx-cta-band p strong { color: #fff; }
.hx-cta-btns { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.hx-cta-note { margin-top: 15px; font-size: 12px; color: rgba(255,255,255,.62); }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 980px) {
  .hx-hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .hx-pillars { grid-template-columns: 1fr; }
  .hx-reports { grid-template-columns: 1fr; }
  .hx-author { grid-template-columns: 72px 1fr; }
  .hx-author-av { width: 72px; height: 72px; }
  .hx-author .pf { grid-column: 1 / -1; }
  .hx-cobrand { justify-content: flex-start; }
}
@media (max-width: 640px) {
  .hx-hero { padding: 0; }
  .hx-hero-inner { padding: 88px 20px 52px; }
  .hx-hero h1 { letter-spacing: -1.1px; line-height: 1.34; }
  .hx-hero h1 .nw { white-space: normal; }
  .hx-hero-sub { font-size: 14.5px; line-height: 1.95; }
  .hx-hero-trust { gap: 18px 26px; }
  .hx-ht .v { font-size: 21px; }
  .hx-cb-item b, .hx-cb-item small { font-size: 12px; }
  .hx-cb-item img { height: 22px; }
  .hx-btn-primary, .hx-btn-ghost { width: 100%; justify-content: center; }
  .hx-rep { padding: 22px; }
  .hx-figband-inner { grid-template-columns: 1fr; gap: 0; padding: 30px 20px; }
  .hx-fig { border-left: 0; border-top: 1px solid rgba(255,255,255,.18); padding: 20px 0; }
  .hx-fig:first-child { padding-top: 0; border-top: 0; }
  .hx-fig-lb { margin-bottom: 8px; }
  .hx-fig-tx { margin-top: 8px; }
  .hx-rp { flex-direction: column; align-items: stretch; }
  .hx-rp-fig { width: 100%; flex-direction: row; align-items: baseline; justify-content: space-between; gap: 14px; padding: 16px 20px; }
  .hx-rp-fig.f-paper { border-right: 0; border-bottom: 1px solid rgba(15,26,48,.1); }
  .rf-n { font-size: 34px; }
  .hx-pillar-tile { aspect-ratio: 2/1; }
  .hx-pillar-tile .pt-ic { font-size: 62px; }
  .hx-cta-btns .hx-btn-primary, .hx-cta-btns .hx-btn-ghost { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .hx-hb-mq .marquee-track { animation: none; }
  .hx-pillar, .hx-topic, .hx-ty { transition: none; }
}

/* 3型カード=対比構造3軸（2026-08-05） */
.ty-spec { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 14px; flex: 1; }
.ts-row { display: flex; align-items: baseline; gap: 10px; font-size: 12.5px; line-height: 1.6; }
.ts-row i { flex: 0 0 3em; font-style: normal; font-size: 10.5px; font-weight: 800; color: #9aa1ad; letter-spacing: .08em; }
.ts-row b.c-soto { color: #0e7490; font-weight: 900; }
.ts-row b.c-uchi { color: #0d9488; font-weight: 900; }
.ts-row em { font-style: normal; font-weight: 700; color: rgba(15,26,48,.8); }

/* BY THE NUMBERS 日米比較タイル */
.hx-usjp .uj-chart { display: flex; flex-direction: column; gap: 8px; justify-content: center; min-height: 150px; margin-bottom: 14px; }
.uj-row { display: flex; align-items: center; gap: 8px; }
.uj-row i { flex: 0 0 2.8em; font-style: normal; font-size: 11.5px; font-weight: 800; color: #6f7480; text-align: right; }
.uj-bar { display: inline-flex; align-items: center; justify-content: flex-end; width: var(--w); min-width: 3.4em; height: 30px; border-radius: 4px; background: linear-gradient(90deg, #1E2A5A, #2E4380); color: #fff; font-size: 11px; font-weight: 700; padding: 0 8px; white-space: nowrap; }
.uj-bar b { font-size: 15px; font-weight: 900; margin-right: 1px; }
.uj-bar.uj-jp { background: linear-gradient(90deg, #0891B2, #22B8D4); }
.uj-fc { font-size: 11px; font-weight: 800; color: #0e7490; white-space: nowrap; border-bottom: 2px dotted rgba(8,145,178,.55); padding-bottom: 2px; }
.uj-grow { font-size: 10.5px; color: #8a8f99; font-weight: 700; }

/* =====================================================================
   THE FRAMEWORK — 7軸 × 6型 × 21人物像（2026-08-10）
   需要側 →（7軸）← 供給側 の左→右の横流れ相関図。カード羅列にしない。
   ===================================================================== */
.hx-wm-sub {
  font-size: clamp(12px, 1.15vw, 14.5px); font-weight: 700; letter-spacing: .01em;
  color: rgba(255,255,255,.74); margin: 10px auto 0; max-width: 42em;
}

.fw-map {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) 84px minmax(0, .94fr) 84px minmax(0, 1.02fr);
  align-items: stretch; gap: 0; margin-top: 8px;
}
.fw-zone {
  min-width: 0; background: #fff; border: 1px solid rgba(30,42,90,.13); border-radius: 16px;
  padding: 20px 20px 18px; box-shadow: 0 2px 16px -10px rgba(30,42,90,.28);
  display: flex; flex-direction: column;
}
.fw-axes { background: #1E2A5A; border-color: #1E2A5A; color: #fff; box-shadow: 0 10px 34px -18px rgba(30,42,90,.7); }

.fw-zt { font-size: 15px; font-weight: 900; color: #0D1117; line-height: 1.5; margin-bottom: 14px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.fw-zt b { color: #0891B2; }
.fw-zt-lb { display: inline-flex; align-items: center; font-size: 10px; font-weight: 900; letter-spacing: .14em; padding: 4px 9px; border-radius: 999px; background: #EEF1FA; color: #1E2A5A; }
.fw-zt-lb.ac { background: rgba(103,232,249,.16); color: #67E8F9; }
.fw-zt-c { color: #fff; }
.fw-zt-c b { color: #67E8F9; }

/* 需要側=6型の行 */
.fw-ty { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 11px; text-decoration: none; color: inherit; transition: background .18s ease; }
.fw-ty + .fw-ty { margin-top: 2px; }
.fw-ty:hover { background: #F4F7FB; }
.fw-ty-fig { flex: none; width: 42px; height: 42px; border-radius: 10px; overflow: hidden; background: var(--ty); }
.fw-ty-fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fw-ty-txfig { display: flex; align-items: center; justify-content: center; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 900; color: #fff; letter-spacing: .04em; }
.fw-ty-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fw-ty-tx b { font-size: 13px; font-weight: 800; line-height: 1.45; color: #0D1117; }
.fw-ty-tx em { font-style: normal; font-size: 11.5px; line-height: 1.55; color: #6B7280; }
.fw-ty-ax { flex: none; display: inline-flex; align-items: baseline; gap: 3px; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 900; color: var(--ty); background: rgba(30,42,90,.05); border-radius: 7px; padding: 5px 8px; letter-spacing: .02em; }
.fw-ty-ax i { font-style: normal; font-size: 12px; }
.fw-zn { margin: 12px 0 0; margin-top: auto; padding-top: 12px; border-top: 1px dashed rgba(30,42,90,.16); font-size: 11.5px; font-weight: 700; line-height: 1.7; color: #4B5563; }

/* 中央=7軸 */
.fw-axlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.fw-axlist li { flex: 1 1 auto; display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.06); border-radius: 10px; padding: 7px 10px; }
.fw-lt { flex: none; width: 26px; height: 26px; border-radius: 8px; background: #0891B2; color: #fff; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 900; display: flex; align-items: center; justify-content: center; }
.fw-lt.sub { background: rgba(255,255,255,.14); color: rgba(255,255,255,.72); }
.fw-an { min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: 12.5px; font-weight: 800; line-height: 1.45; color: #fff; }
.fw-an em { font-style: normal; font-size: 10.5px; font-weight: 600; color: rgba(255,255,255,.6); line-height: 1.5; }
.fw-axnote { margin: 13px 0 0; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.14); font-size: 11px; line-height: 1.8; color: rgba(255,255,255,.72); }
.fw-axnote b { color: #67E8F9; font-weight: 800; }

/* 左右の対向矢印 */
.fw-arw { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #0891B2; }
.fw-arw .material-symbols-rounded { font-size: 26px; }
.fw-arw b { font-size: 10px; font-weight: 800; letter-spacing: .02em; color: #6B7280; writing-mode: vertical-rl; line-height: 1.2; }

/* 供給側=18→21 */
.fw-step { display: flex; flex-direction: column; gap: 0; }
.fw-st { display: flex; align-items: flex-start; gap: 12px; background: #F4F7FB; border-radius: 12px; padding: 13px 14px; }
.fw-st-on { background: #E6F7FB; }
.fw-st-n { flex: none; font-family: 'Inter', sans-serif; font-size: 26px; font-weight: 900; line-height: 1; color: #1E2A5A; letter-spacing: -.03em; }
.fw-st-on .fw-st-n { color: #0891B2; }
.fw-st-tx { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fw-st-tx b { font-size: 12.5px; font-weight: 800; line-height: 1.5; color: #0D1117; }
.fw-st-tx em { font-style: normal; font-size: 11px; line-height: 1.6; color: #6B7280; }
.fw-st-arw { display: flex; align-items: center; gap: 7px; padding: 6px 0 6px 22px; color: #0891B2; }
.fw-st-arw .material-symbols-rounded { font-size: 20px; }
.fw-st-arw b { font-size: 10.5px; font-weight: 800; color: #6B7280; }
.fw-faces { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.fw-faces img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; display: block; background: #EEF1FA; }
.fw-faces-go { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 800; color: #0891B2; text-decoration: none; margin-left: 2px; }
.fw-faces-go .material-symbols-rounded { font-size: 15px; }
.fw-faces-go:hover { text-decoration: underline; }

/* 二枚看板CTA */
.fw-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 26px; }
.fw-cta-c { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; background: #fff; border: 1px solid rgba(30,42,90,.14); border-radius: 16px; padding: 22px 24px; transition: box-shadow .2s ease, transform .2s ease; }
.fw-cta-c:hover { box-shadow: 0 14px 34px -18px rgba(30,42,90,.45); transform: translateY(-2px); }
.fw-cta-b { background: #1E2A5A; border-color: #1E2A5A; color: #fff; }
.fw-cta-lb { font-size: 10.5px; font-weight: 900; letter-spacing: .14em; color: #0891B2; }
.fw-cta-b .fw-cta-lb { color: #67E8F9; }
.fw-cta-c b { font-size: 19px; font-weight: 900; line-height: 1.5; letter-spacing: -.01em; }
.fw-cta-c em { font-style: normal; font-size: 12.5px; line-height: 1.75; color: #4B5563; }
.fw-cta-b em { color: rgba(255,255,255,.72); }
.fw-cta-go { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13.5px; font-weight: 800; color: #0891B2; }
.fw-cta-b .fw-cta-go { color: #67E8F9; }
.fw-cta-go .material-symbols-rounded { font-size: 18px; }

.fw-src { margin: 18px 0 0; font-size: 11.5px; line-height: 1.85; color: #6B7280; }
.fw-src a { color: #0e7490; font-weight: 700; }

@media (max-width: 1080px) {
  .fw-map { grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr); }
  .fw-axes { grid-column: 1 / -1; order: -1; margin-bottom: 14px; }
  .fw-arw-l { display: none; }
  .fw-arw-r { grid-column: 2; order: 1; }
  .fw-arw-r .material-symbols-rounded { transform: rotate(180deg); }
  .fw-arw-r b { display: none; }
  .fw-demand { order: 0; }
  .fw-supply { order: 2; }
}
@media (max-width: 760px) {
  .fw-map { grid-template-columns: 1fr; gap: 0; }
  .fw-axes { order: -2; margin-bottom: 0; }
  .fw-arw { flex-direction: row; padding: 12px 0; justify-content: center; }
  .fw-arw-l { display: flex; order: -1; }
  .fw-arw .material-symbols-rounded { transform: rotate(90deg); }
  .fw-arw-r .material-symbols-rounded { transform: rotate(-90deg); }
  .fw-arw b { writing-mode: horizontal-tb; }
  .fw-arw-r b { display: block; }
  .fw-demand { order: 0; }
  .fw-arw-r { order: 1; grid-column: 1; }
  .fw-supply { order: 2; }
  .fw-cta { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .fw-zone { padding: 16px 14px; }
  .fw-ty { padding: 8px 4px; gap: 9px; }
  .fw-ty-ax { display: none; }
  .fw-cta-c { padding: 18px 18px; }
  .fw-cta-c b { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { .fw-cta-c, .fw-ty { transition: none; } .fw-cta-c:hover { transform: none; } }

/* =====================================================================
   PW — 「型で引く」インタラクティブ・ウィジェット（#types 内）
   ===================================================================== */
.pw { margin-top: 34px; }
.pw-head { margin-bottom: 18px; }
.pw-head-lb {
  display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .09em;
  color: #0E7490; background: #E6F7FB; border: 1px solid #BAE6FD;
  padding: 5px 12px; border-radius: 999px;
}
.pw-head-h { margin: 12px 0 6px; font-size: 24px; font-weight: 800; line-height: 1.5; color: #0D1117; letter-spacing: -.01em; }
.pw-head-h em { font-style: normal; color: #0E7490; }
.pw-head-p { margin: 0; font-size: 14px; line-height: 1.85; color: #4b5563; }

/* タブ */
.pw-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: -1px; position: relative; z-index: 2; }
.pw-tab {
  --ty: #0891B2;
  display: inline-flex; align-items: center; gap: 8px;
  font: inherit; font-size: 13.5px; font-weight: 700; color: #4b5563;
  background: #fff; border: 1px solid #E3E8EF; border-radius: 12px 12px 0 0;
  padding: 11px 16px 12px; cursor: pointer; line-height: 1.3;
  transition: background .18s, color .18s, border-color .18s;
}
.pw-tab:hover { color: #0D1117; background: #F6F9FB; }
.pw-tab-no { font-size: 15px; font-weight: 800; color: var(--ty); }
.pw-tab.on {
  color: #fff; background: var(--ty); border-color: var(--ty);
  box-shadow: 0 -2px 10px rgba(30,42,90,.10);
}
.pw-tab.on .pw-tab-no { color: #fff; }
.pw-tab:focus-visible { outline: 2px solid #0891B2; outline-offset: 2px; }

/* パネル */
.pw-pane {
  background: #fff; border: 1px solid #E3E8EF; border-radius: 0 16px 16px 16px;
  padding: 24px; box-shadow: 0 18px 40px -22px rgba(30,42,90,.24);
}
.pw-pane:focus-visible { outline: 2px solid #0891B2; outline-offset: 2px; }
.pw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.pw-side { min-width: 0; }

.pw-hd { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; }
.pw-hd-fig {
  flex: 0 0 auto; width: 58px; height: 58px; border-radius: 13px; overflow: hidden;
  background: #EEF1FA; display: grid; place-items: center;
}
.pw-hd-fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pw-hd-tx { font-size: 14px; font-weight: 800; color: var(--ty); letter-spacing: .04em; }
.pw-hd-tx2 { min-width: 0; }
.pw-hd-tx2 b { display: block; font-size: 16px; font-weight: 800; color: #0D1117; line-height: 1.45; }
.pw-hd-tx2 em { display: block; font-style: normal; font-size: 12.5px; color: #6b7280; margin-top: 3px; line-height: 1.6; }

.pw-ct {
  font-size: 12px; font-weight: 800; letter-spacing: .05em; color: #1E2A5A;
  padding-bottom: 9px; margin-bottom: 12px; border-bottom: 1px solid #EAEDF0;
}

/* ゲージ（棒 × 濃さ） */
.pw-gauges { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 7px; }
.pw-g { display: grid; grid-template-columns: 22px minmax(0, 1fr) 96px 20px; align-items: center; gap: 9px; }
.pw-g-lt {
  width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center;
  font-size: 11.5px; font-weight: 800; color: #fff; background: var(--ty);
}
.pw-g.v0 .pw-g-lt { background: #D8DEE9; color: #8b95a5; }
.pw-g-nm { font-size: 12.5px; color: #4b5563; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pw-g.v3 .pw-g-nm { color: #0D1117; font-weight: 700; }
.pw-g-bar { height: 9px; border-radius: 5px; background: #EDF1F6; overflow: hidden; }
.pw-g-bar i { display: block; height: 100%; border-radius: 5px; background: var(--ty); transition: width .35s ease; }
.pw-g.v0 .pw-g-bar i { background: #CBD3E0; }
.pw-g.v1 .pw-g-bar i { opacity: .34; }
.pw-g.v2 .pw-g-bar i { opacity: .62; }
.pw-g.v3 .pw-g-bar i { opacity: 1; }
.pw-g-mk { font-size: 13px; font-weight: 700; color: #6b7280; text-align: center; }
.pw-g.v3 .pw-g-mk { color: var(--ty); }

/* 注記 */
.pw-note { display: grid; grid-template-columns: 126px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 12px; background: #F7F9FC; border: 1px solid #EAEDF0; border-radius: 10px; margin-top: 9px; }
.pw-note-k { font-size: 11.5px; font-weight: 800; color: #1E2A5A; line-height: 1.6; }
.pw-note-v { font-size: 12.5px; color: #4b5563; line-height: 1.75; }
.pw-chip { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: #EEF1FA; color: #1E2A5A; margin: 0 5px 4px 0; }
.pw-chip.hot { background: var(--ty); color: #fff; }

/* 合う人物像カード */
.pw-cards { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 9px; }
.pw-card { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 12px; align-items: center; padding: 11px 13px; background: #fff; border: 1px solid #E3E8EF; border-radius: 12px; }
.pw-card-im { width: 54px; height: 54px; border-radius: 11px; object-fit: cover; display: block; background: #EEF1FA; }
.pw-card-tx { min-width: 0; }
.pw-card-tx b { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 14px; font-weight: 800; color: #0D1117; line-height: 1.4; }
.pw-card-tx em { display: block; font-style: normal; font-size: 12px; color: #6b7280; line-height: 1.65; margin-top: 4px; }
.pw-star { font-style: normal; color: #B8862F; font-size: 12px; }
.pw-rk { font-size: 10.5px; font-weight: 800; padding: 2px 8px; border-radius: 999px; letter-spacing: .04em; }
.pw-rk.r-a { background: var(--ty); color: #fff; }
.pw-rk.r-b { background: #EEF1FA; color: #1E2A5A; }
.pw-rk.r-c { background: #F1F4F8; color: #6b7280; }

.pw-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
.pw-lk { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; color: #fff; background: #1E2A5A; border: 1px solid #1E2A5A; border-radius: 999px; padding: 8px 15px; text-decoration: none; transition: opacity .18s; }
.pw-lk:hover { opacity: .86; }
.pw-lk.sub { background: #fff; color: #1E2A5A; border-color: #C9D2EC; }
.pw-lk .material-symbols-rounded { font-size: 15px; }

/* 図鑑ストリップ */
.pw-strip { margin-top: 22px; background: #fff; border: 1px solid #E3E8EF; border-radius: 16px; padding: 20px 0 18px; }
.pw-strip-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding: 0 22px 14px; }
.pw-strip-h b { font-size: 15px; font-weight: 800; color: #0D1117; }
.pw-strip-h span { font-size: 12.5px; color: #6b7280; line-height: 1.7; }
.pw-strip-h a { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; color: #0E7490; text-decoration: none; white-space: nowrap; }
.pw-strip-h a:hover { text-decoration: underline; }
.pw-strip-h a .material-symbols-rounded { font-size: 15px; }
.pw-strip-grp { padding-top: 4px; }
.pw-strip-lb { display: block; font-size: 11px; font-weight: 800; letter-spacing: .06em; color: #8b95a5; padding: 8px 22px 6px; }
.pw-strip-r { display: flex; gap: 12px; overflow-x: auto; padding: 2px 22px 12px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.pw-face { flex: 0 0 74px; width: 74px; text-decoration: none; text-align: center; }
.pw-face img { width: 62px; height: 62px; border-radius: 50%; object-fit: cover; display: block; margin: 0 auto 6px; background: #EEF1FA; border: 2px solid #fff; box-shadow: 0 3px 10px -3px rgba(30,42,90,.28); transition: transform .18s, box-shadow .18s; }
.pw-face:hover img { transform: translateY(-3px); box-shadow: 0 9px 18px -6px rgba(30,42,90,.4); }
.pw-face span { display: block; font-size: 10.5px; font-weight: 700; color: #4b5563; line-height: 1.4; }
.pw-face:hover span { color: #0E7490; }

@media (max-width: 900px) {
  .pw-grid { grid-template-columns: 1fr; gap: 22px; }
  .pw-fit { border-top: 1px solid #EAEDF0; padding-top: 18px; }
}
@media (max-width: 640px) {
  .pw-head-h { font-size: 19px; }
  .pw-tabs { flex-wrap: nowrap; overflow-x: auto; gap: 6px; padding-bottom: 0; scrollbar-width: none; }
  .pw-tabs::-webkit-scrollbar { display: none; }
  .pw-tab { flex: 0 0 auto; font-size: 12.5px; padding: 10px 13px 11px; }
  .pw-pane { border-radius: 14px; padding: 18px 15px; }
  .pw-g { grid-template-columns: 20px minmax(0, 1fr) 64px 18px; gap: 7px; }
  .pw-g-nm { font-size: 11.5px; }
  .pw-note { grid-template-columns: 1fr; gap: 4px; }
  .pw-strip-h { padding: 0 16px 12px; }
  .pw-strip-h a { margin-left: 0; }
  .pw-strip-lb, .pw-strip-r { padding-left: 16px; padding-right: 16px; }
  .pw-card { grid-template-columns: 46px minmax(0, 1fr); gap: 10px; padding: 10px; }
  .pw-card-im { width: 46px; height: 46px; }
}
@media (prefers-reduced-motion: reduce) { .pw-g-bar i, .pw-face img { transition: none; } .pw-face:hover img { transform: none; } }