/*
Theme Name: Tenshokunavi
Theme URI: https://tenshokunavi.mitorahub.com/
Author: あなたの名前
Description: 転職エージェント比較メディア用の自作テーマ。比較ランキング・評判ボックス・口コミ等のスタイルを含みます。
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: tenshokunavi
*/

/* ============================================================
   ▼ デザイントークン（色・余白をまとめて調整）
   ============================================================ */
:root{
  --ink:#1a2b3c;            /* 本文の文字色 */
  --ink-soft:#5a6b7c;       /* 補足テキスト */
  --primary:#1a8fd1;        /* メイン水色（リンク・アクセント） */
  --primary-dk:#1576b3;
  --primary-bg:#eaf5fc;     /* 薄い水色の面 */
  --navy:#173a5e;           /* 評判ボックス・フッターの紺 */
  --navy-bg:#10293f;
  --accent:#f4732b;         /* CTAオレンジ */
  --accent-dk:#d35d18;
  --accent-text:#e8540a;    /* スコア等のオレンジ文字 */
  --yellow:#f4c021;         /* 満足度バッジ */
  --cyan:#3fa9d4;           /* アンケート「はい」 */
  --pink:#e84e8a;           /* アンケート「いいえ」 */
  --gray-tab:#6b7785;       /* 「こんな人に〜」のグレータブ */
  --cream:#fdf2e3;          /* スコアセルの薄オレンジ */
  --bg:#ffffff;
  --line:#dbe6ef;
  --radius:12px;
  --shadow:0 2px 14px rgba(20,80,130,.08);
  --maxw:960px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.85;font-size:16px;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--primary-dk);text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 18px}

/* ---------- ヘッダー ---------- */
.site-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)}
.header-inner{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:12px 18px}
.logo{display:flex;align-items:center;gap:8px;font-weight:900;font-size:1.15rem;color:#111}
.logo-mark{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--primary),var(--primary-dk));display:grid;place-items:center;color:#fff;font-size:.85rem}
.nav{display:flex;gap:20px}
.nav a{color:var(--ink-soft);font-size:.88rem;font-weight:500}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;color:var(--primary);font-size:.6rem;align-items:center}
.nav-toggle b{display:block;width:26px;height:3px;background:var(--primary);border-radius:2px}

/* ---------- パンくず ---------- */
.breadcrumb{font-size:.76rem;color:var(--ink-soft);padding:12px 0}
.breadcrumb a{color:var(--ink-soft)}
.breadcrumb span{margin:0 5px;color:#9fb3c4}

/* ---------- 記事ヘッダー ---------- */
.hero{width:100%;aspect-ratio:1200/630;border-radius:var(--radius);margin-bottom:22px;box-shadow:var(--shadow);
  background:linear-gradient(135deg,#1565b0,#0d3f78);display:grid;place-items:center;color:#fff;text-align:center}
.hero .ph{font-size:.9rem;opacity:.92;font-weight:500;padding:0 16px}
.article h1{font-size:1.7rem;font-weight:900;line-height:1.45;margin-bottom:10px}
.update-date{font-size:.8rem;color:var(--ink-soft);margin-bottom:18px}
.lead{margin-bottom:24px}

/* ---------- 執筆者ボックス（記事冒頭） ---------- */
.author{border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin-bottom:20px;box-shadow:var(--shadow)}
.author-top{display:flex;gap:16px;align-items:flex-start}
.author-ava{position:relative;flex:0 0 80px;width:80px;height:80px;border-radius:50%;background:var(--primary-bg);display:grid;place-items:center;color:var(--primary-dk);font-size:.65rem;text-align:center;border:1px solid var(--line)}
.author-badge{position:absolute;left:50%;bottom:-10px;transform:translateX(-50%);background:#374a5c;color:#fff;font-size:.6rem;white-space:nowrap;padding:3px 8px;border-radius:4px}
.author-name{font-size:1.3rem;font-weight:700;margin-bottom:6px}
.author-bio{font-size:.84rem;color:var(--ink-soft)}
.author-more{color:var(--primary-dk);font-size:.84rem}

/* ---------- 広告表記（青いピル） ---------- */
.disclosure{display:inline-block;background:var(--primary);color:#fff;font-size:.84rem;font-weight:500;padding:9px 16px;border-radius:8px;margin-bottom:30px}

/* ---------- 目次 ---------- */
.toc{background:#f6f9fc;border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;margin-bottom:38px}
.toc-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.toc-head h2{font-size:1.4rem;font-weight:900;letter-spacing:.3em}
.toc-toggle{background:var(--primary);color:#fff;border:0;border-radius:6px;padding:7px 16px;font-size:.82rem;font-weight:700;cursor:pointer}
.toc ol{list-style:none;counter-reset:toc;font-size:.95rem}
.toc ol li{counter-increment:toc;display:flex;gap:8px;padding:5px 0;border-bottom:1px dashed var(--line)}
.toc ol li::before{content:counter(toc) ".";color:var(--ink-soft);font-weight:700;flex:0 0 auto}
.toc a{color:var(--primary-dk);text-decoration:underline;text-underline-offset:3px}

/* ---------- 黒帯の見出し（このサイトの“顔”） ---------- */
.sec-head{background:#0c0c0c;color:#fff;font-size:1.3rem;font-weight:900;line-height:1.5;padding:18px 20px;border-radius:4px;margin:0 0 22px}

/* ---------- 採点ロジック概要 ---------- */
.logic{border:1px solid #8a98a6;border-radius:6px;padding:0 20px 18px;margin:22px 0;position:relative}
.logic-tab{display:inline-block;background:var(--gray-tab);color:#fff;font-weight:700;padding:7px 18px;border-radius:4px;font-size:1rem;transform:translateY(-50%);margin-bottom:-10px}
.logic ul{list-style:none;font-size:.92rem}
.logic ul li{position:relative;padding:6px 0 6px 18px;color:#374a5c}
.logic ul li::before{content:"•";position:absolute;left:0;color:var(--gray-tab);font-weight:900}
.logic .more{color:var(--primary-dk);font-weight:700;text-decoration:underline;text-underline-offset:3px;display:inline-block;margin-top:8px}

/* ---------- カテゴリ×サービス ランキング表 ---------- */
.rank-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:8px}
table.rank{border-collapse:collapse;width:100%;min-width:680px;font-size:.8rem}
table.rank th.cat{background:#f3f7fb;text-align:center;font-weight:700;white-space:nowrap;border:1px solid var(--line);padding:10px;width:130px;line-height:1.4}
table.rank td.svc{border:1px solid var(--line);padding:8px 6px;text-align:center;vertical-align:top;width:120px}
table.rank td.svc .lg{height:34px;display:grid;place-items:center;font-size:.6rem;color:var(--ink-soft);margin-bottom:4px}
table.rank td.svc .nm{font-size:.74rem;line-height:1.3;min-height:2.4em}
table.rank td.svc .sc{margin-top:6px;background:var(--cream);color:var(--accent-text);font-weight:900;font-size:.95rem;padding:6px 2px;border-radius:4px}
table.rank td.svc .sc small{font-size:.62rem;font-weight:500;color:var(--ink-soft)}
.note{font-size:.78rem;color:var(--ink-soft);margin:14px 0 22px}

/* ---------- タブナビ ---------- */
.tabs{display:flex;overflow-x:auto;border:1px solid var(--line);border-radius:8px 8px 0 0;background:#f3f7fb}
.tabs button{flex:1 0 auto;background:none;border:0;padding:14px 18px;font-size:.95rem;font-weight:700;color:var(--ink-soft);cursor:pointer;white-space:nowrap;border-bottom:3px solid transparent}
.tabs button.active{background:var(--primary);color:#fff;border-bottom-color:var(--primary-dk)}
.tab-body{border:1px solid var(--line);border-top:0;border-radius:0 0 8px 8px;padding:20px;margin-bottom:24px}

/* ---------- 執筆者コメント吹き出し ---------- */
.comment{margin:14px 0}
.comment-head{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.comment-ava{flex:0 0 56px;width:56px;height:56px;border-radius:50%;background:var(--primary-bg);display:grid;place-items:center;font-size:.55rem;color:var(--primary-dk);border:1px solid var(--line);text-align:center}
.comment-role{font-size:.78rem;color:var(--ink-soft)}
.comment-name{font-size:1.05rem;font-weight:700}
.comment-bubble{background:#eef2f6;border-radius:12px;padding:16px 18px;font-size:.92rem}

/* ---------- 横スクロール比較表 ---------- */
.table-hint{font-size:.76rem;color:var(--ink-soft);text-align:right;margin:14px 0 6px}
.cmp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:8px;box-shadow:var(--shadow)}
table.cmp{border-collapse:collapse;width:100%;min-width:640px;background:#fff;font-size:.85rem}
table.cmp th,table.cmp td{border:1px solid var(--line);padding:12px 10px;text-align:center;vertical-align:middle}
table.cmp tbody th{background:var(--primary-bg);font-weight:700;white-space:nowrap;position:sticky;left:0;z-index:1;border-left:3px solid var(--primary)}
table.cmp .colhead{background:#f7fafc;font-weight:700}
table.cmp .colhead .lg{width:54px;height:54px;margin:0 auto 4px;border-radius:8px;background:var(--primary-bg);display:grid;place-items:center;font-size:.55rem;color:var(--ink-soft);border:1px solid var(--line);text-align:center}
.fit-red{color:#e0245e;font-weight:700}
.hl{background:linear-gradient(transparent 60%,#fff3a8 60%)}
.btn-official{display:block;background:var(--accent);color:#fff;font-weight:700;font-size:.84rem;padding:9px 6px;border-radius:6px;margin-bottom:6px;box-shadow:0 2px 0 var(--accent-dk)}
.btn-official:hover{color:#fff}
.btn-detail{display:block;border:1.5px solid var(--primary);color:var(--primary-dk);border-radius:6px;padding:7px 6px;font-size:.8rem;font-weight:700}

/* ---------- 診断ウィジェット ---------- */
.diagnose{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin:26px 0;box-shadow:var(--shadow)}
.diagnose-banner{background:linear-gradient(135deg,#1565b0,#0d3f78);color:#fff;text-align:center;padding:22px 16px}
.diagnose-banner .t{font-size:1.15rem;font-weight:900;line-height:1.5}
.diagnose-banner .s{font-size:.78rem;opacity:.9;margin-top:4px}
.diagnose-body{padding:20px}
.steps{display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:16px}
.steps i{width:30px;height:30px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;font-size:.8rem;color:var(--ink-soft);font-style:normal}
.steps i.on{border-color:var(--primary);color:var(--primary);font-weight:700}
.steps .ln{flex:1;max-width:36px;height:2px;background:var(--line)}
.q-label{font-weight:700;margin-bottom:12px}
.q-options{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.q-options button{padding:14px;border-radius:8px;border:1.5px solid var(--primary);background:var(--primary-bg);color:var(--primary-dk);font-weight:700;font-size:1rem;cursor:pointer}
.q-options button.sel{background:var(--primary);color:#fff}

/* ---------- フローチャート（簡易版） ---------- */
.flow{border:1px solid var(--line);border-radius:10px;padding:18px;margin:22px 0;background:#fbfdff}
.flow-title{text-align:center;font-weight:900;font-size:1.05rem;margin-bottom:4px}
.flow-title b{color:var(--primary-dk)}
.flow-sub{text-align:center;font-size:.78rem;color:var(--ink-soft);margin-bottom:14px}
.flow-row{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.flow-q{flex:1;background:var(--primary-bg);border-radius:8px;padding:10px 12px;font-size:.82rem}
.flow-yes{color:var(--accent-text);font-weight:700;font-size:.78rem;white-space:nowrap}
.flow-r{flex:0 0 120px;border:1px solid var(--line);border-radius:8px;padding:10px;text-align:center;font-size:.78rem;background:#fff}

/* ---------- スペック比較表（青ヘッダー） ---------- */
.spec-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:8px;box-shadow:var(--shadow);margin:20px 0}
table.spec{border-collapse:collapse;width:100%;min-width:560px;background:#fff;font-size:.9rem}
table.spec thead th{background:var(--primary);color:#fff;font-weight:700;padding:14px 10px;text-align:center;border:1px solid #1576b3}
table.spec tbody th{background:#fff;font-weight:700;text-align:center;border:1px solid var(--line);padding:14px 10px;white-space:nowrap}
table.spec td{border:1px solid var(--line);padding:14px 10px;text-align:center;line-height:1.5}
table.spec .score{color:var(--accent-text);font-weight:900;font-size:1.1rem}
table.spec tr.reg th,table.spec tr.reg td{background:var(--cream)}

/* ---------- 採点根拠アコーディオン ---------- */
.acc{border:1.5px solid var(--primary);border-radius:10px;margin:20px 0}
.acc summary{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;list-style:none;padding:16px 18px;color:var(--primary-dk);font-weight:700;font-size:1rem}
.acc summary::-webkit-details-marker{display:none}
.acc summary .chev{flex:0 0 30px;width:30px;height:30px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;transition:.2s}
.acc[open] summary .chev{transform:rotate(180deg)}
.acc .acc-body{padding:0 18px 16px;font-size:.88rem;color:var(--ink-soft)}

/* ---------- サービス詳細ブロック ---------- */
.svc-block{margin:30px 0}
.svc-name{font-size:1.4rem;font-weight:900;padding-bottom:10px;border-bottom:3px solid var(--primary);margin-bottom:18px}
.svc-banner{width:100%;aspect-ratio:1200/400;border-radius:8px;background:linear-gradient(135deg,#2b6fb0,#16406f);display:grid;place-items:center;color:#fff;font-size:.85rem;margin-bottom:18px}

/* ---------- 評判ボックス ---------- */
.repute{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:18px;box-shadow:var(--shadow)}
.repute-head{background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px}
.repute-head .ttl{font-size:1.1rem;font-weight:700}
.repute-head .meta{font-size:.72rem;opacity:.85}
.sat{background:var(--yellow);color:#3a2c00;border-radius:8px;padding:6px 14px;text-align:center;flex:0 0 auto}
.sat .lbl{font-size:.66rem;font-weight:700}
.sat .val{font-size:1.2rem;font-weight:900;line-height:1}
.sat .stars{color:#e8930a;font-size:.8rem;letter-spacing:1px}
.repute-body{padding:16px 18px;background:#f7fafc}
.survey-q{font-weight:700;font-size:.92rem;margin:6px 0 8px}
.survey-bar{display:flex;border-radius:6px;overflow:hidden;margin-bottom:14px;font-size:.9rem;font-weight:700;color:#fff;text-align:center}
.survey-bar .yes{background:linear-gradient(90deg,#5cc0e0,#2f8fbe);padding:11px 4px}
.survey-bar .no{background:linear-gradient(90deg,#ef6fa3,#d63677);padding:11px 4px}

/* ---------- こんな人におすすめ ---------- */
.osusume{border:1px solid #8a98a6;border-radius:6px;padding:0 20px 16px;margin:22px 0}
.osusume-tab{display:inline-block;background:var(--gray-tab);color:#fff;font-weight:700;padding:7px 18px;border-radius:4px;transform:translateY(-50%);margin-bottom:-10px}
.osusume ul{list-style:none}
.osusume ul li{position:relative;padding:7px 0 7px 18px}
.osusume ul li::before{content:"•";position:absolute;left:0;color:var(--gray-tab);font-weight:900}

/* ---------- 大きいオレンジCTA ---------- */
.cta-big{display:flex;align-items:center;gap:16px;justify-content:center;background:var(--accent);color:#fff;border-radius:10px;padding:20px;font-weight:700;font-size:1.05rem;text-align:center;box-shadow:0 4px 0 var(--accent-dk);margin:22px 0;line-height:1.5}
.cta-big:hover{color:#fff;transform:translateY(1px);box-shadow:0 3px 0 var(--accent-dk)}
.cta-big .free{flex:0 0 auto;background:#fff;color:var(--accent-text);font-size:.78rem;font-weight:900;padding:6px 12px;border-radius:6px}

/* ---------- 口コミ ---------- */
.reviews{margin:22px 0}
.reviews-h{font-size:1.15rem;font-weight:900;padding-left:12px;border-left:5px solid var(--accent);margin-bottom:16px}
.voice-good{color:var(--primary-dk);font-weight:700;margin-bottom:8px}
.voice-bad{color:#e0245e;font-weight:700;margin:16px 0 8px}
.quote{background:#f5f7f9;border-left:4px solid #c5d2dd;padding:14px 16px;font-size:.92rem;line-height:1.8}
.quote .who{color:var(--ink-soft);font-size:.8rem}
.reviews .more{display:block;text-align:center;color:var(--primary-dk);font-weight:700;text-decoration:underline;text-underline-offset:3px;margin:16px 0}
.basic-btn{display:block;max-width:420px;margin:0 auto;text-align:center;border:1.5px solid var(--primary);color:var(--primary-dk);border-radius:10px;padding:14px;font-weight:700}

/* ---------- 関連記事 ---------- */
.related{margin:34px 0}
.related-h{font-size:1.25rem;font-weight:900;padding-bottom:10px;border-bottom:3px solid var(--primary);margin-bottom:16px}
.related-box{border:1px solid var(--line);border-radius:8px;padding:18px 20px}
.related-box ul{list-style:none}
.related-box li{position:relative;padding:8px 0 8px 16px}
.related-box li::before{content:"•";position:absolute;left:0;color:var(--ink-soft)}
.related-box a{color:var(--primary-dk);text-decoration:underline;text-underline-offset:3px}

/* ---------- 新着記事 ---------- */
.news h2{font-size:1.2rem;font-weight:700;color:var(--ink-soft)}
.news .big{font-size:2.4rem;font-weight:900;color:var(--primary);line-height:1;margin-bottom:14px}
.news-row{display:flex;gap:14px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:6px}
.news-card{flex:0 0 240px;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.news-card .thumb{aspect-ratio:16/9;background:var(--primary-bg);display:grid;place-items:center;font-size:.7rem;color:var(--ink-soft)}
.news-card .cat{background:var(--primary);color:#fff;font-size:.78rem;padding:5px 10px}
.news-card .ttl{padding:10px 12px;font-size:.9rem;font-weight:500;line-height:1.5}
.news-hint{text-align:right;font-size:.8rem;color:var(--ink-soft);margin-top:6px}

/* ---------- シェアバー ---------- */
.share{display:flex;align-items:center;gap:14px;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:28px 0;font-weight:500;color:var(--ink-soft)}
.share .icons{display:flex;gap:10px;margin-left:auto}
.share .icons span{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:.7rem;font-weight:700}
.share .ln{background:#06c755}.share .x{background:#000}.share .hb{background:#00a4de}.share .fb{background:#1877f2}

/* ---------- LINEバナー ---------- */
.line-banner{aspect-ratio:728/220;border-radius:8px;background:linear-gradient(135deg,#4cc764,#2fa84a);display:grid;place-items:center;color:#fff;font-weight:900;font-size:1.1rem;margin:22px 0 36px}

/* ---------- フッター ---------- */
.site-footer{background:var(--navy-bg);color:#cfdcea;padding:40px 0 30px}
.foot-logo{color:#fff;font-weight:900;font-size:1.5rem;margin-bottom:8px}
.foot-rule{width:120px;height:3px;background:#fff;margin:14px 0 22px}
.foot-links{display:flex;flex-direction:column;gap:12px;margin-bottom:28px}
.foot-links a{color:#e3edf6;font-size:1rem}
.foot-related-tab{display:inline-block;border:1px solid #547089;color:#fff;padding:8px 18px;border-radius:6px;font-size:.95rem;margin-bottom:18px}
.foot-related-line{border-top:1px solid #3a566f;margin:-10px 0 18px}
.foot-related a{display:flex;align-items:center;gap:6px;color:#fff;font-size:1rem;padding:6px 0}
.foot-related a::after{content:"↗";font-size:.8rem;opacity:.7}
.link-cloud{border-top:1px solid #2c4255;padding-top:22px;margin-top:22px}
.link-cloud h3{color:#9fc4dd;font-size:1.1rem;font-weight:700;margin-bottom:12px}
.link-cloud p{font-size:.92rem;line-height:2.2;color:#e3edf6}
.link-cloud a{color:#e3edf6}
.copyright{border-top:1px solid #2c4255;margin-top:24px;padding-top:20px;text-align:center;font-size:.82rem;line-height:2;color:#aebfce}

/* ---------- レスポンシブ ---------- */
@media(max-width:720px){
  .wrap{padding:0 14px}

  /* ヘッダー / グローバルナビ */
  .nav{display:none;position:absolute;top:58px;right:0;left:0;flex-direction:column;gap:0;background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--shadow)}
  .nav.open{display:flex}
  .nav a{padding:14px 18px;border-top:1px solid var(--line)}
  .nav-toggle{display:flex}

  /* 見出し類のサイズ調整 */
  .article h1{font-size:1.4rem}
  .sec-head{font-size:1.12rem;padding:14px 16px}
  .svc-name{font-size:1.2rem}
  .related-h{font-size:1.12rem}

  /* 目次（見出しとボタンが詰まらないように） */
  .toc{padding:16px 16px}
  .toc-head h2{font-size:1.15rem;letter-spacing:.15em}
  .toc-toggle{padding:6px 12px;font-size:.78rem}

  /* 執筆者ボックス */
  .author{padding:16px}
  .author-top{gap:12px}
  .author-ava{flex:0 0 64px;width:64px;height:64px}
  .author-name{font-size:1.1rem}

  /* 執筆者コメント */
  .comment-ava{flex:0 0 48px;width:48px;height:48px}

  /* 評判ボックスのヘッダー（タイトルと満足度を縦積みに） */
  .repute-head{flex-direction:column;align-items:stretch;gap:10px}
  .sat{display:flex;align-items:center;justify-content:center;gap:10px}
  .sat .lbl{font-size:.72rem}
  .diagnose-banner .t{font-size:1.02rem}

  /* CTA */
  .cta-big{flex-direction:row;font-size:.98rem;padding:16px;gap:10px}

  /* フロー */
  .flow-r{flex-basis:96px}
  .steps .ln{max-width:20px}
}

@media(max-width:480px){
  body{font-size:15px}
  .article h1{font-size:1.28rem}
  .sec-head{font-size:1.04rem}
  /* 診断の選択肢を1列に */
  .q-options{grid-template-columns:1fr}
  /* フロー行を縦積みに（質問→Yes→結果） */
  .flow-row{flex-wrap:wrap}
  .flow-r{flex-basis:100%}
  /* シェアバーのアイコンを折り返し可に */
  .share{flex-wrap:wrap;gap:10px}
  .share .icons{margin-left:0}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto;transition:none}}http://tenshokunavi.mitorahub.com/wp-content/uploads/2026/06/hub-hero.png

/* TCU HUB PAGE CSS - added 2026-06-28 */
:root {
  --tcu-navy: #17345b;
  --tcu-blue: #2f6fed;
  --tcu-blue-dark: #1f57c1;
  --tcu-border: #d6deea;
  --tcu-bg: #f4f7fb;
  --tcu-text: #1f2937;
  --tcu-muted: #5f6b7a;
  --tcu-warning: #fff8ed;
  --tcu-success: #edf5ff;
  --tcu-radius-sm: 8px;
  --tcu-radius-md: 12px;
  --tcu-shadow: 0 12px 32px rgba(23, 52, 91, 0.08);
}

.tcu-page {
  color: var(--tcu-text);
  font-size: 16px;
  line-height: 1.7;
  max-width: 100%;
  overflow-x: hidden;
}

.tcu-page *,
.tcu-page *::before,
.tcu-page *::after {
  box-sizing: border-box;
}

.tcu-page a {
  color: var(--tcu-blue);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

.tcu-page a:hover {
  color: var(--tcu-blue-dark);
}

.tcu-page a:focus-visible,
.tcu-page button:focus-visible {
  outline: 3px solid rgba(47, 111, 237, 0.35);
  outline-offset: 3px;
}

.tcu-page section,
.tcu-page aside {
  margin: 0 0 32px;
}

.tcu-page h1,
.tcu-page h2,
.tcu-page h3 {
  color: var(--tcu-navy);
  line-height: 1.35;
  margin: 0 0 12px;
}

.tcu-page p,
.tcu-page li {
  margin-top: 0;
}

.tcu-page ul {
  margin: 0;
  padding-left: 1.2em;
}

.tcu-container {
  width: min(1120px, 100%);
  margin: 0 auto;
}

.tcu-eyebrow,
.tcu-note,
.tcu-meta,
.tcu-kicker {
  color: var(--tcu-muted);
  font-size: 0.95rem;
}

.tcu-pr-label {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  background: #eef4ff;
  color: var(--tcu-navy);
  font-size: 0.92rem;
  font-weight: 700;
  margin-bottom: 14px;
}

.tcu-hero {
  background:
    radial-gradient(circle at top right, rgba(47, 111, 237, 0.18), transparent 36%),
    linear-gradient(135deg, #ffffff 0%, #f3f7fd 100%);
  border: 1px solid var(--tcu-border);
  border-radius: var(--tcu-radius-md);
  box-shadow: var(--tcu-shadow);
  padding: 32px;
}

.tcu-hero__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(260px, 0.7fr);
  gap: 24px;
  align-items: center;
}

.tcu-hero__copy {
  display: grid;
  gap: 14px;
}

.tcu-hero__title {
  font-size: clamp(2rem, 3.7vw, 3rem);
}

.tcu-hero__lead {
  font-size: 1.05rem;
  max-width: 46rem;
}

.tcu-bullet-list {
  display: grid;
  gap: 8px;
  padding: 0;
  list-style: none;
}

.tcu-bullet-list li {
  position: relative;
  padding-left: 1.4em;
}

.tcu-bullet-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--tcu-blue);
}

.tcu-button,
.tcu-button-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 700;
  text-decoration: none;
}

.tcu-button {
  background: var(--tcu-blue);
  color: #fff !important;
}

.tcu-button:hover {
  background: var(--tcu-blue-dark);
}

.tcu-button-secondary {
  background: #fff;
  color: var(--tcu-navy) !important;
  border-color: var(--tcu-border);
}

.tcu-hero__visual {
  min-height: 240px;
  border-radius: var(--tcu-radius-md);
  background:
    linear-gradient(160deg, rgba(23, 52, 91, 0.94), rgba(47, 111, 237, 0.9)),
    #17345b;
  position: relative;
  overflow: hidden;
}

.tcu-hub-hero {
  padding: clamp(22px, 4vw, 42px);
  background:
    linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.92) 46%, rgba(255,255,255,.18) 72%),
    var(--tcu-hub-hero-image, none),
    linear-gradient(135deg, #ffffff 0%, #f3f7fd 100%);
  background-position: center;
  background-size: cover;
}

.tcu-hero__image {
  margin: 0;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(23, 52, 91, 0.18);
  min-height: 280px;
}

.tcu-hero__image img {
  width: 100%;
  height: 100%;
  min-height: 280px;
  object-fit: cover;
}

.tcu-hero__visual::before,
.tcu-hero__visual::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
}

.tcu-hero__visual::before {
  inset: auto auto 18px 18px;
  width: 190px;
  height: 190px;
}

.tcu-hero__visual::after {
  inset: 26px 16px auto auto;
  width: 118px;
  height: 118px;
}

.tcu-hero__chart {
  position: absolute;
  inset: 0;
  padding: 28px;
  display: flex;
  align-items: flex-end;
  gap: 16px;
}

.tcu-hero__bar {
  flex: 1 1 0;
  border-radius: 999px 999px 16px 16px;
  background: rgba(255, 255, 255, 0.88);
}

.tcu-hero__bar:nth-child(1) {
  height: 34%;
}

.tcu-hero__bar:nth-child(2) {
  height: 54%;
}

.tcu-hero__bar:nth-child(3) {
  height: 72%;
}

.tcu-hero__bar:nth-child(4) {
  height: 88%;
}

.tcu-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.tcu-purpose-grid,
.tcu-trust-grid,
.tcu-service-grid,
.tcu-article-grid,
.tcu-footer-grid {
  display: grid;
  gap: 16px;
}

.tcu-purpose-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tcu-purpose-link {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--tcu-border);
  border-radius: var(--tcu-radius-md);
  background: #fff;
  color: var(--tcu-navy) !important;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(23, 52, 91, 0.06);
}

.tcu-purpose-link::after {
  content: "→";
  font-size: 1.1rem;
  color: var(--tcu-blue);
}

.tcu-trust-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tcu-card {
  min-height: 100%;
  padding: 22px;
  border: 1px solid var(--tcu-border);
  border-radius: var(--tcu-radius-md);
  background: #fff;
  box-shadow: 0 8px 24px rgba(23, 52, 91, 0.05);
}

.tcu-service-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: stretch;
}

.tcu-service-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tcu-service-card__label {
  display: inline-flex;
  align-self: flex-start;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--tcu-success);
  color: var(--tcu-navy);
  font-size: 0.85rem;
  font-weight: 700;
}

.tcu-service-card__meta {
  font-size: 0.94rem;
  color: var(--tcu-muted);
}

.tcu-service-card__detail {
  margin-top: auto;
  display: grid;
  gap: 10px;
}

.tcu-route-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.tcu-route-card {
  padding: 0;
  overflow: hidden;
}

.tcu-route-card__image {
  margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #eef4ff;
}

.tcu-route-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .28s ease;
}

.tcu-route-card:hover .tcu-route-card__image img {
  transform: scale(1.025);
}

.tcu-route-card__body {
  display: grid;
  gap: 12px;
  padding: 22px;
}

.tcu-mini-check {
  display: grid;
  gap: 8px;
  list-style: none;
  padding: 0;
}

.tcu-mini-check li {
  position: relative;
  padding-left: 1.45em;
}

.tcu-mini-check li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--tcu-blue);
  font-weight: 800;
}

.tcu-service-card dl {
  margin: 0;
  display: grid;
  gap: 8px;
}

.tcu-service-card dt {
  color: var(--tcu-navy);
  font-weight: 700;
}

.tcu-service-card dd {
  margin: 0;
}

.tcu-article-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tcu-article-card {
  display: grid;
  gap: 10px;
}

.tcu-retirement-box {
  padding: 26px;
  border: 1px solid #f0debc;
  border-radius: var(--tcu-radius-md);
  background: var(--tcu-warning);
}

.tcu-editor-box {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  padding: 24px;
  border: 1px solid var(--tcu-border);
  border-radius: var(--tcu-radius-md);
  background: #fff;
  box-shadow: var(--tcu-shadow);
}

.tcu-editor-box__photo {
  margin: 0;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid #eef4ff;
  box-shadow: 0 12px 30px rgba(23, 52, 91, 0.12);
}

.tcu-editor-box__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tcu-faq-list {
  display: grid;
  gap: 12px;
}

.tcu-faq-list details {
  border: 1px solid var(--tcu-border);
  border-radius: var(--tcu-radius-md);
  background: #fff;
  padding: 16px 18px;
}

.tcu-faq-list summary {
  cursor: pointer;
  color: var(--tcu-navy);
  font-weight: 800;
}

.tcu-final-cta {
  padding: 28px;
  border-radius: var(--tcu-radius-md);
  background: linear-gradient(135deg, #17345b, #2f6fed);
  color: #fff;
}

.tcu-final-cta h2,
.tcu-final-cta .tcu-eyebrow {
  color: #fff;
}

.tcu-final-cta .tcu-button-secondary {
  border-color: rgba(255,255,255,.4);
}

.tcu-retirement-list,
.tcu-mini-list {
  display: grid;
  gap: 12px;
  list-style: none;
  padding: 0;
}

.tcu-retirement-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 18px;
}

.tcu-retirement-list a,
.tcu-mini-list a {
  display: block;
  padding: 16px 18px;
  border: 1px solid rgba(23, 52, 91, 0.12);
  border-radius: var(--tcu-radius-sm);
  background: rgba(255, 255, 255, 0.68);
  color: var(--tcu-navy) !important;
  font-weight: 700;
  text-decoration: none;
}

.tcu-footer {
  border-top: 1px solid var(--tcu-border);
  padding-top: 26px;
}

.tcu-footer-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tcu-footer-links {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 10px;
}

.tcu-inline-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tcu-inline-links a {
  font-weight: 700;
}

@media (max-width: 1024px) {
  .tcu-service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .tcu-hero,
  .tcu-card,
  .tcu-retirement-box {
    padding: 20px;
  }

  .tcu-hero__layout,
  .tcu-purpose-grid,
  .tcu-trust-grid,
  .tcu-route-grid,
  .tcu-service-grid,
  .tcu-article-grid,
  .tcu-retirement-list,
  .tcu-footer-grid,
  .tcu-editor-box {
    grid-template-columns: 1fr;
  }

  .tcu-hub-hero {
    background:
      linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.86) 58%, rgba(255,255,255,.18) 100%),
      var(--tcu-hub-hero-image, none),
      linear-gradient(135deg, #ffffff 0%, #f3f7fd 100%);
    background-size: cover;
  }

  .tcu-hero__visual {
    min-height: 200px;
  }

  .tcu-editor-box__photo {
    width: 96px;
    height: 96px;
  }
}