@charset "utf-8";
/* ============================================================
   転職ボイス 全ページ共通の新デザイン（ヘッダー・フッター・共通の部品・動きの土台）
   tenshoku-voice/assets/site.css   2026-09-15（⑪a 下層の共通デザイン）
   ------------------------------------------------------------
   ⑩b（2026-09-15）でトップだけに入れた見た目（assets/db-home.css の .home の下）のうち、全ページで使うものをここへ移した。
   ・白ベース＋黄 #FFD100・赤 #CD001A・青 #0057B7・緑 #027223 の4色を下線・印・帯・バッジにだけ（toridori.co.jp の型・藤井さん 2026-09-15）
   ・細い枠線でなく面と影（0 0 0 1px #E6E6E6）／角丸8px／丸ボタン／数字は Jost・本文は Noto Sans JP
   ・ダークモードのCSSは入れない
   ・動き（.rv／.st／h2.hm／.tv-prog）：隠す指定は html.tv-js（header の1行の script が付ける）のときだけ。JS が無ければ最初から全部見える。
     動きを減らす設定の人には最後の @media で止める。トップだけの動きは db-home.css の末尾「⑫ 動き」の節
   ・読み込む順＝style.css（土台）→ logo.css → site.css（これ）→ article.css／db.css（器）。ヘッダーとフッターは .tvdb の外なので詳細度は (0,2,0) で足りる
   ============================================================ */
:root{
  --y:#FFD100; --r:#CD001A; --b:#0057B7; --g:#027223; --k:#111111; --gray:#F5F5F5; --mid:#666666; --line:#E6E6E6;
  --jp:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN",-apple-system,BlinkMacSystemFont,sans-serif; --en:"Jost","Noto Sans JP",sans-serif;
}
[hidden]{display:none!important}
/* 中身が短いページでもフッターが画面の下に付くように（body を縦の flex に） */
body{min-height:100vh;display:flex;flex-direction:column}
.tv-main{flex:1 0 auto;width:100%}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.w{width:min(1000px,calc(100% - 32px));margin:0 auto}
.c{text-align:center}
.ic{display:inline-block;vertical-align:middle;flex:none}

/* ── 共通の部品（印・大きい数字・棒・ボタン） ── */
.mk{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--mk);color:var(--mkf);font-weight:800;font-family:var(--en);flex:none;line-height:1}
.sn{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:#333;white-space:nowrap}
.sn::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--sn)}
.big{display:inline-flex;align-items:baseline;gap:2px;font-family:var(--en);font-weight:700;line-height:1}
.big .unit{font-size:.45em;font-weight:700;color:var(--mid);font-family:var(--jp)}
.bar{display:block;width:100%;background:#EEE;border-radius:99px;overflow:hidden}
.bar-in{display:block;height:100%;width:var(--w);border-radius:99px;transition:width .9s cubic-bezier(.2,.7,.2,1)}
.tv-js .rv .bar-in{width:0}
.tv-js .rv.in .bar-in,.tv-js .in .bar-in,.bar.now .bar-in{width:var(--w)}
.radar .radar-poly{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.tv-js .rv .radar .radar-poly{transform:scale(.05)}
.tv-js .rv.in .radar .radar-poly,.radar.now .radar-poly{transform:scale(1)}
.tv-js .rv{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.tv-js .rv.in{opacity:1;transform:none}
/* 黒い丸ボタン・白い丸ボタン・枠だけの丸ボタン。器の中（.tvdb-wrap .tvdb a＝0,2,1）でも色が勝つよう (0,3,0) も並べる */
.btn-k,.tvdb-wrap .tvdb .btn-k{display:inline-block;background:var(--k);color:#fff;font-weight:700;border-radius:99px;padding:10px 22px;font-size:14px;line-height:1.5;text-decoration:none;transition:transform .2s,opacity .2s}
.btn-k:hover,.tvdb-wrap .tvdb .btn-k:hover{transform:translateY(-2px);opacity:.9;color:#fff;text-decoration:none}
.btn-k.lg,.tvdb-wrap .tvdb .btn-k.lg{padding:16px 32px;font-size:16px}
.btn-w,.tvdb-wrap .tvdb .btn-w{display:inline-block;background:#fff;color:var(--k);font-weight:700;border-radius:99px;padding:14px 30px;font-size:16px;line-height:1.5;box-shadow:inset 0 0 0 2px var(--k);text-decoration:none}
.btn-o,.tvdb-wrap .tvdb .btn-o{display:inline-block;color:var(--k);font-weight:700;border-radius:99px;padding:9px 18px;font-size:13px;line-height:1.5;box-shadow:inset 0 0 0 2px var(--k);text-decoration:none;transition:background .2s,color .2s}
.btn-o:hover,.tvdb-wrap .tvdb .btn-o:hover{background:var(--k);color:#fff;text-decoration:none}
.btn-o.pill,.tvdb-wrap .tvdb .btn-o.pill{padding:12px 28px;font-size:14px;margin-top:10px}
.btn-k .btn-ar{margin-left:8px;transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.btn-k:hover .btn-ar{transform:translateX(6px)}

/* ── ヘッダー（全ページ・貼り付く） ── */
.hd{background:#fff;position:sticky;top:0;z-index:20;box-shadow:0 1px 0 var(--line)}
.admin-bar .hd{top:32px}
.hd .w{display:flex;align-items:center;gap:20px;height:64px}
.hd a,.ft a{text-decoration:none}
.hd a:hover,.ft a:hover{text-decoration:none}
.logo{font-family:var(--en);font-size:26px;font-weight:800;letter-spacing:-.02em;white-space:nowrap;color:var(--k)}
.logo b{color:var(--k)}   /* 黄色のマーカーは logo.css（tv-logo--mark）が左から引く */
.hs{display:flex;flex:1;max-width:370px;background:#F2F2F2;border-radius:6px;overflow:hidden}
.hs input{flex:1;border:0;background:transparent;padding:10px 14px;font-size:16px;min-width:0;font-family:inherit;color:var(--k);-webkit-appearance:none;appearance:none;border-radius:0}
.hs input:focus{outline:2px solid var(--b);outline-offset:-2px}
.hs input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.hs button{border:0;background:var(--k);width:44px;display:grid;place-items:center;cursor:pointer;padding:0}
.hs button .ic{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.hs button:hover .ic{transform:rotate(-20deg) scale(1.2)}
.hn{margin-left:auto;display:flex;align-items:center;gap:22px;font-size:14px;font-weight:700}
.hn a{color:var(--k)}
.hn a:hover{color:var(--b)}
.hn a[aria-current="page"]:not(.btn-k){box-shadow:0 3px 0 var(--y)}   /* いま開いている入口は黄色の下線 */
.hn .btn-k,.hn .btn-k:hover{color:#fff}   /* .hn a{color:黒} に負けないよう (0,2,0) で白に戻す */
/* 読み進みのバー（ヘッダーの下端・4色）。白い覆いが右へ退いて4色が出る（区切りが伸び縮みしない） */
.tv-prog{position:absolute;left:0;right:0;bottom:0;height:4px;overflow:hidden;pointer-events:none}
.tv-prog__in{position:absolute;inset:0;background:linear-gradient(90deg,var(--y) 0 25%,var(--r) 25% 50%,var(--b) 50% 75%,var(--g) 75%)}
.tv-prog__in::after{content:"";position:absolute;top:0;bottom:0;right:0;left:calc(var(--p,0) * 100%);background:#fff}
/* 診断のボタンが7秒に1回ぷるっ */
@keyframes tv-nudge{0%,88%,100%{transform:none}90%{transform:rotate(-4deg) scale(1.06)}93%{transform:rotate(4deg) scale(1.06)}96%{transform:rotate(-2deg) scale(1.03)}98%{transform:rotate(2deg)}}
.tv-js .hn .btn-k{animation:tv-nudge 7s 3s ease-in-out infinite}
.tv-js .hn .btn-k:hover{animation:none}

/* ── フッター（全ページ） ── */
.ft{background:#fff;padding:40px 0 30px;box-shadow:0 -1px 0 var(--line);margin-top:40px}
.ft p{font-size:13px;color:#333;margin:12px 0;max-width:720px}
.ft .ft-lnk{color:var(--b);text-decoration:underline}
.ft nav{display:flex;gap:6px 18px;font-size:13px;font-weight:700;flex-wrap:wrap}
.ft nav a{color:var(--k)}
.ft nav a:hover{color:var(--b)}
.ft small{display:block;margin-top:20px;color:var(--mid);font-size:12.5px}

/* ── 章の見出しの黄色のマーカー（h2.hm・見えたら左から引かれる）。
      器の .tvdb h2::after{content:none;display:none}（0,1,1・db.css は後から読まれる）に負けないよう .tvdb h2.hm::after（0,2,1）も並べる ── */
h2.hm,.tvdb h2.hm{position:relative;display:inline-block;isolation:isolate}
h2.hm.c,.tvdb h2.hm.c{display:table;margin-left:auto;margin-right:auto}
h2.hm::after,.tvdb h2.hm::after{content:"";display:block;position:absolute;left:-.1em;right:-.1em;bottom:.06em;height:.42em;background:var(--y);z-index:-1;transform-origin:left;transition:transform .7s cubic-bezier(.2,.7,.2,1) .15s}
.tv-js h2.hm::after,.tv-js .tvdb h2.hm::after{transform:scaleX(0)}
.tv-js h2.hm.in::after,.tv-js .tvdb h2.hm.in::after{transform:scaleX(1)}
/* 子が順に出る（.st の中の li・--i は PHP が振る） */
@keyframes tv-pop{0%{opacity:0;transform:translateY(16px) scale(.85)}60%{opacity:1;transform:translateY(-3px) scale(1.03)}100%{opacity:1;transform:none}}
.tv-js .st li{opacity:0}
.tv-js .st.in li{animation:tv-pop .55s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0) * .045s)}

/* ── スマホ ── */
@media (max-width:600px){
  .hd .w{gap:8px;height:56px;width:calc(100% - 24px)}   /* ロゴにマークが付いた分、ヘッダーだけ左右の余白を12pxに */
  .admin-bar .hd{top:46px}
  .hs{display:none}
  .hn{gap:7px;font-size:11px;white-space:nowrap}
  .hn .btn-k{padding:7px 10px;font-size:11px}
  .logo{font-size:20px}
}
@media (max-width:380px){
  .hn a:nth-child(3){display:none}   /* 狭い端末はナビの「ランキング」を隠す（フッターから行ける） */
}

/* ── 動きを減らす設定の人 ── */
@media (prefers-reduced-motion:reduce){
  .tv-js .rv{opacity:1;transform:none;transition:none}
  .tv-js .rv .bar-in{width:var(--w)}
  .tv-js .rv .radar .radar-poly{transform:scale(1)}
  .tv-js .hn .btn-k,.tv-js .st.in li{animation:none}
  .tv-js .st li{opacity:1;transform:none}
  .tv-js h2.hm::after,.tv-js .tvdb h2.hm::after{transform:scaleX(1);transition:none}
}