/* skin.css — ものづくりポータルの見た目を「現場で試した人（現タメ）」のブログにそろえる層
   2026-10-02 有人（品証サイトの続き・masaki確定「ブログにそろえる」）。
   ・全ページの最後に読む（tokens.css → style.css → ページ内 <style> → この skin.css）。
     後勝ちで上書きするだけなので、外すときは各ページの <link …skin.css> を消せば元に戻る。
   ・値の出どころ＝ブログの追加CSS「現タメ デザイン仕様 2026-09-06」と SWELL の設定
     （地 #F4F5F3・文字 #333・紺 #16314D・緑 #0E8074・琥珀 #B45309・罫 #DCDFDB・角丸なし・見出しは明朝）。
   ・リンクの緑は地 #F4F5F3 の上でも 4.5:1 を超えるよう #0D776C（ブログの #0E8074 とほぼ同じ見え方）。
   ・ダークは OS に合わせる（仕様§1-6）。ブログに無いので、同じ3色を暗い地で読める明るさにした。 */

:root{
  --bg:#F4F5F3; --card:#FFFFFF; --surface-2:#EEF0EC;
  --ink:#333333; --ink-2:#5B6168; --ink-3:#5B6168; --head:#16314D; --faint:#8A9096;
  --line:#DCDFDB; --line-soft:#E9EBE7; --line-2:#CDD1CB;
  --acc:#0D776C; --a-bg:#EAF4F2; --acc-t:#0D776C; --acc-bg:#EAF4F2;
  --navy:#16314D; --navy-2:#0F2438; --teal:#0E8074; --amber:#B45309;
  --btn-bg:#16314D; --btn-bg-h:#0F2438; --btn-ink:#FFFFFF;
  --hdr-bg:#FDFDFD; --hdr-ink:#333333; --strip-bg:#16314D; --strip-ink:#E6ECF2;
  --r:0px; --r-badge:0px;
  --font-sans:"游ゴシック体","Yu Gothic",YuGothic,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
  --sans:var(--font-sans);
  --font-serif:"Noto Serif JP","Yu Mincho",YuMincho,"Hiragino Mincho ProN","Sawarabi Mincho",serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#15191D; --card:#1E2329; --surface-2:#1A1F24;
    --ink:#E6E8EA; --ink-2:#A3AAB1; --ink-3:#A3AAB1; --head:#E6E8EA; --faint:#7E868E;
    --line:#333A42; --line-soft:#2A3036; --line-2:#3C434C;
    --acc:#5CC2B5; --a-bg:#1C2E2C; --acc-t:#5CC2B5; --acc-bg:#1C2E2C;
    --navy:#9FB4CC; --navy-2:#2A3542; --teal:#4FB7AA; --amber:#E0954B;
    --btn-bg:#5CC2B5; --btn-bg-h:#7AD0C5; --btn-ink:#0F1C2B;
    --hdr-bg:#1B2026; --hdr-ink:#E6E8EA; --strip-bg:#0F1C2B; --strip-ink:#C9D3DD;
  }
}

/* ---------- 地と文字 ---------- */
html,body{background:var(--bg)}
body{color:var(--ink);font-family:var(--font-sans);font-weight:500}
a{color:var(--acc)}
h1,h2,h3{color:var(--head)}

/* ---------- 共通の上帯（ブログのヘッダーと同じ形） ---------- */
.ptabs{background:var(--hdr-bg);border-bottom:0;box-shadow:0 1px 4px rgba(0,0,0,.12);position:relative;z-index:50}
.ptabs-bar{background:var(--strip-bg);color:var(--strip-ink);font-size:12px;line-height:1;letter-spacing:.04em}
.ptabs-bar-in{max-width:1200px;margin:0 auto;padding:6px 24px}
.ptabs-bar a{color:inherit;text-decoration:none}
.ptabs-bar a:hover{text-decoration:underline}
.ptabs-in{max-width:1200px;margin:0 auto;padding:0 24px;min-height:64px;display:flex;align-items:center;gap:12px;flex-wrap:nowrap;justify-content:space-between}
.pbrand,a.pbrand{width:auto;text-align:left;margin:0;color:var(--hdr-ink);font-size:20px;font-weight:600;letter-spacing:.04em;text-decoration:none;white-space:nowrap}
a.pbrand:hover{color:var(--acc)}
.ptabs nav{display:flex;flex-wrap:nowrap;gap:0;row-gap:0;max-width:none}
.ptabs nav a{color:var(--hdr-ink);font-size:14px;font-weight:500;letter-spacing:.06em;padding:0 13px;min-height:64px;display:inline-flex;align-items:center;border-radius:0;background:none;outline:0;border-bottom:2px solid transparent;border-top:2px solid transparent;white-space:nowrap}
.ptabs nav a svg{display:none}
.ptabs nav a:hover{background:none;color:var(--acc)}
.ptabs nav a.on,.ptabs nav a.on:hover{background:none;outline:0;color:var(--hdr-ink);border-bottom-color:var(--teal)}
.ptabs nav a:focus-visible,a.pbrand:focus-visible{outline:2px solid var(--teal);outline-offset:-2px}
@media (max-width:760px){
  .ptabs-bar{display:none}
  .ptabs-in{flex-direction:column;align-items:stretch;gap:0;padding:0;min-height:0}
  .pbrand,a.pbrand{font-size:17px;padding:12px 16px 8px;text-align:left;width:auto}
  .ptabs nav{justify-content:space-between;overflow-x:auto;scrollbar-width:none;padding:0 6px;border-top:1px solid var(--line)}
  .ptabs nav::-webkit-scrollbar{display:none}
  .ptabs nav a{font-size:13px;letter-spacing:.02em;padding:0 8px;min-height:42px}
}

/* ---------- ページの頭（ブログのトップと同じ「キッカー＋明朝の題＋琥珀の線」） ---------- */
header.top{background:var(--card);color:var(--ink);border-bottom:1px solid var(--line);box-shadow:none}
header.top>.wrap:first-child{padding-top:36px;padding-bottom:28px}
header.top .archnote:empty{display:none}
header.top .brand{font-family:var(--font-serif);font-weight:600;font-size:36px;line-height:1.3;letter-spacing:.01em;color:var(--head);margin:0}
header.top .brand::after,.page-ttl::after,.tools>h1::after,main>h1::after,.hub-hero h1::after,.g-title::after,.ck-title::after,.s-head h1::after{content:"";display:block;width:64px;height:3px;margin-top:16px;background:var(--amber)}
header.top .sub{color:#3C4348;font-size:15px;line-height:1.9;margin-top:14px;max-width:46em}
header.top .sub b{color:var(--ink)}
.kicker,.pkicker{display:inline-block;font-family:var(--font-sans);font-size:12px;font-weight:500;line-height:1.6;letter-spacing:.2em;color:var(--teal);border:0;padding:0;margin:0 0 10px;background:none}
header.top .meta .date{font-family:var(--font-serif);color:var(--head)}
header.top .updated,header.top .meta .updated{background:var(--surface-2);color:var(--ink-2);border-radius:0}
@media (prefers-color-scheme: dark){header.top .sub{color:var(--ink-2)}}
@media (max-width:760px){
  header.top>.wrap:first-child{padding-top:24px;padding-bottom:20px}
  header.top .brand{font-size:28px}
  header.top .brand::after{width:52px;margin-top:12px}
  header.top .sub{font-size:14px;line-height:1.85}
}

/* ---------- 見出しと区切り（ブログの h2＝明朝・紺の下線2px） ---------- */
.rule-section{border-bottom:2px solid var(--navy);color:var(--head)}
.rule-section h2{color:var(--head)}
main h2,.tools h2,.hub-sec h2{font-family:var(--font-serif);color:var(--head);border-bottom-color:var(--navy)}
.hub-sec h2{border-bottom:2px solid var(--navy)}
.side-h,.rel h3{color:var(--head)}

/* ---------- 面・カード・角（ブログに合わせて角丸なし・影なし） ---------- */
.card,.subpage,.featC,.sc-card,.hub-gcard,.rel-list a,.rel a,.purpose,.ck-note,.stepc,.item.is-lead{border-radius:0}
.subpage,.sc-card,.rel-list a,.rel a{border-color:var(--line)}
.subpage:hover,.sc-card:hover,.rel-list a:hover,.rel a:hover{border-color:var(--teal);transform:none}
.badge,.ttag,.gtag,.chip,.fchip,.fclear,.hub-sec.links a,.updated,.cat,.lvl,.flag{border-radius:0}

/* ---------- ボタン（ブログの「新しい記事を読む」と同じ紺の四角） ---------- */
.btn-main,button.primary,.primary,.btn.pri,.ck-btn:not(.ghost),.emptystate button{background:var(--btn-bg);color:var(--btn-ink);border:1px solid var(--btn-bg);border-radius:0;font-weight:500;letter-spacing:.04em;box-shadow:none}
.btn-main:hover,button.primary:hover,.primary:hover,.btn.pri:hover,.ck-btn:not(.ghost):hover{background:var(--btn-bg-h);border-color:var(--btn-bg-h);color:var(--btn-ink)}
.ghost,.ck-btn.ghost,.btn:not(.pri){background:var(--card);color:var(--head);border:1px solid var(--line-2);border-radius:0}
.ghost:hover,.ck-btn.ghost:hover,.btn:not(.pri):hover{border-color:var(--teal);color:var(--acc)}
input[type=text],input[type=search],input[type=number],textarea,select{border-radius:0}

/* ---------- 足元 ---------- */
footer,.hb-foot{background:var(--hdr-bg);border-top:1px solid var(--line)}

/* ---------- ハンドブック ---------- */
.hb-top{background:var(--card);color:var(--ink);border-bottom:1px solid var(--line);box-shadow:none;top:0}
.hb-top-in{max-width:1200px;padding:10px 24px}
.hb-brand{color:var(--head);font-family:var(--font-serif);font-weight:600}
.hb-logo{display:none!important}
.hb-burger{color:var(--head)}
#hbsearch{background:var(--bg);border:1px solid var(--line-2);border-radius:0;color:var(--ink)}
#hbsearch::placeholder{color:var(--ink-2)}
#hbsearch:focus{border-color:var(--teal);background:var(--card)}
.hb-side{background:var(--card);border-right:1px solid var(--line)}
.side-nav a,.side-sum{border-radius:0}
.side-nav a:hover,.side-sum:hover{background:var(--surface-2);color:var(--acc)}
.side-nav a.on,.side-grp>a.on{background:var(--surface-2);color:var(--head);font-weight:700;box-shadow:inset 3px 0 0 var(--teal)}
.side-cap{color:var(--ink-2);letter-spacing:.14em}
.sd{display:none}
.hb-brand:focus-visible,.hb-burger:focus-visible{outline:2px solid var(--teal)}

/* ハブの頭：紺の大きな箱をやめ、ブログのトップと同じ白い紙面に */
.hub-hero{background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:4px 0 24px;margin:0 0 24px;overflow:visible}
.hub-hero h1{color:var(--head);font-weight:600;font-size:34px;margin:4px 0 0}
.hub-hero p{color:#3C4348;font-size:15px;line-height:1.9;margin:14px 0 0;max-width:46em}
@media (prefers-color-scheme: dark){.hub-hero p{color:var(--ink-2)}}
.hub-gcard,.hub-gcard[class*="g-"]{border-top:2px solid var(--navy)}
.hub-gemoji,.g-emoji{display:none}
.hub-glist a:hover{background:var(--surface-2);color:var(--acc)}
.hub-sec.links a{border-radius:0}

/* 場面ページの頭：茶色の札と紺の番号をやめ、キッカー「C1 ／ 変化・プロジェクト」＋明朝の題に */
.s-head{margin:4px 0 22px}
.s-head h1{display:block;font-family:var(--font-serif);font-weight:600;font-size:30px;line-height:1.35;color:var(--head)}
.s-kicker{font-size:12px;font-weight:500;letter-spacing:.2em;color:var(--teal);margin:0 0 10px}
.purpose{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--teal);border-radius:0}
.purpose .p-tag{color:var(--teal);letter-spacing:.08em}
.rel-id{background:none;color:var(--head);border:1px solid var(--line-2);border-radius:0}
.g-title{font-weight:600;color:var(--head)}
.crumb a{color:var(--acc)}
@media (max-width:760px){.s-head h1{font-size:24px}.hub-hero h1{font-size:28px}}

/* セルフチェック（check/ の14本） */
.ck-title{font-family:var(--font-serif);font-weight:600;color:var(--head)}
.ck-note{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--navy)}

/* 診断ページ（check/）の上の帯には検索が無い＝スマホでもハンドブックの名前を出す（空の帯にしない） */
@media (max-width:860px){.hb-top-in:not(:has(.hb-search-wrap)) .hb-brand-t,.hb-top-in:not(:has(.hb-search-wrap)) .hb-brand span:last-child{display:inline}}

/* 2026-10-02 見直し1回目: ダークで残っていた枠（旧「白抜きの塗りバッジ」・紺帯時代の白枠）を外す */
.ptabs nav a,.ptabs nav a.on,.ptabs nav a.on:hover{border-left:0;border-right:0;border-top-color:transparent;outline:0}
.ptabs nav a.on,.ptabs nav a.on:hover{border-bottom-color:var(--teal)}
.side-nav a.on,.side-nav a.on:hover{outline:0;background:var(--surface-2);color:var(--head)}
.sc-id,.pill-on{background:none;color:var(--head);border:1px solid var(--line-2);outline:0;border-radius:0}
.ck-btn{outline:0}

/* 2026-10-02 公開後の確認: 「ブログ ↗」の矢印が游ゴシックの細い字で「／」に見えた＝上帯の矢印は出さない（ブログのナビにも矢印は無い） */
.ptabs nav a span[aria-hidden="true"]{display:none}
/* 2026-10-02 公開後の確認: スマホのハンドブックの帯（☰＋検索）を詰める（上帯と合わせて約145px） */
@media (max-width:860px){.hb-top-in{padding:6px 12px}#hbsearch{height:40px;padding-top:0;padding-bottom:0}}