/* =============================================================
   スラトレ®キャリアラボ ブログ｜blog.css
   v1.2 GALLERY NOTE EDITION / 2026-08-20

   ★このファイルだけが /careerlabo/blog/ の見た目を持つ。
     公式（スラトレ®）の styles.css / page-sub.css は1本も読み込まない。
     読者が公式ブログと見分けられない、という博士のご指摘への対応で、
     キャリアラボLP（/careerlabo/）と同じ意匠へ揃えた。
   ★設計＝黒・白・グレーの3トーン／明朝の見出し／角丸なし・影なし／
     ラベルは Helvetica の大きな字間／罫線は毛筋。**新しい色を足さない。**
   ★トークン（--text-primary 等）は /careerlabo/assets/css/styles.css が持つ。
     このファイルは、生成器が出す .rd-* .blx-* .page-hero などを組むだけ。
   ============================================================= */

/* ---------- 共通の部品 ---------- */
.skip-to-content{position:absolute;left:-9999px}
.skip-to-content:focus{left:1rem;top:1rem;background:#fff;padding:.6rem 1rem;z-index:100}

.lab-label,
.page-hero__eyebrow,
.blx-w__label,
.rd-fwd__l,
.blx-ad__eyebrow,
.newsletter-section__eyebrow,
.blx-chip,
.blx-door__n,
.blx-count,
.blx-date,
.rd-pn__l,
.arc-d{
  font-family:var(--font-helvetica);
  font-size:11px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--text-muted);
  line-height:1.8;
}

/* ---------- パンくず ---------- */
.breadcrumb{
  max-width:76rem;margin:0 auto;padding:1.6rem var(--gutter) 0;
  font-family:var(--font-helvetica);font-size:11px;letter-spacing:.18em;color:var(--text-muted);
}
.breadcrumb a{color:var(--text-quaternary);text-decoration:none}
.breadcrumb a:hover{color:var(--text-primary)}
.breadcrumb-sep{margin:0 .6em;color:var(--text-faint)}

/* ---------- ページの扉（章の見出し） ---------- */
.page-hero{border-bottom:1px solid var(--rule-weak);margin:0 0 var(--chapter-pad-y)}
.page-hero__frame{max-width:76rem;margin:0 auto;padding:3.5rem var(--gutter) 3rem}
.page-hero__inner{max-width:46rem}
.page-hero__separator{display:none}
.page-hero__eyebrow{display:block;margin:0 0 1.6rem}
.page-hero__h1{
  font-family:var(--font-serif);font-weight:300;color:var(--text-primary);
  font-size:2.6rem;line-height:1.5;letter-spacing:.02em;margin:0;
  word-break:keep-all;overflow-wrap:anywhere;
}
.page-hero__sub{
  margin:1.4rem 0 0;color:var(--text-tertiary);
  font-size:.95rem;line-height:1.95;letter-spacing:.04em;
}

/* ---------- 本文の器 ---------- */
.page-content{padding:0 0 var(--chapter-pad-y)}
.page-content .container{max-width:76rem;margin:0 auto;padding:0 var(--gutter)}

/* ★ページの軸は1本にする。扉（page-hero）が左のガターから始まるので、
   本文・締め・前後リンクも同じ左端に揃える。中央寄せにすると軸が2本になり、
   「並びが合っていない」に見える（CLAUDE.md 原則2／実測 2026-08-20）。 */
.rd-body{max-width:40em;margin:0}
.rd-body p{margin:0 0 1.9em;font-size:1rem;line-height:2.05;letter-spacing:.03em;color:var(--text-secondary)}
.rd-body h2{
  font-family:var(--font-serif);font-weight:300;color:var(--text-primary);
  font-size:1.5rem;line-height:1.7;letter-spacing:.02em;
  margin:3.2em 0 1.1em;padding:0 0 .5em;border-bottom:1px solid var(--rule-weak);
  word-break:keep-all;overflow-wrap:anywhere;
}
.rd-body h3{
  font-family:var(--font-serif);font-weight:300;color:var(--text-primary);
  font-size:1.15rem;line-height:1.8;margin:2.4em 0 .9em;
}
.rd-body ul,.rd-body ol{margin:0 0 1.9em;padding:0 0 0 1.4em;list-style:none;counter-reset:rdol}
.rd-body ul li,.rd-body ol li{
  position:relative;margin:0 0 .7em;font-size:1rem;line-height:2.05;
  letter-spacing:.03em;color:var(--text-secondary);
}
.rd-body ul li::before{
  content:"";position:absolute;left:-1.4em;top:.95em;
  width:.5em;height:1px;background:var(--text-muted);
}
.rd-body ol li{counter-increment:rdol}
.rd-body ol li::before{
  content:counter(rdol);position:absolute;left:-1.6em;top:.15em;
  font-family:var(--font-helvetica);font-size:.72rem;letter-spacing:.1em;color:var(--text-muted);
}
.rd-body a{color:var(--text-primary);text-decoration:underline;text-underline-offset:.25em;
  text-decoration-thickness:1px;text-decoration-color:var(--rule-mid)}
.rd-body a:hover{text-decoration-color:var(--text-primary)}
.rd-body strong,.rd-body b{font-weight:500}

.rd-meta{
  margin:0 0 3rem;padding:0 0 1rem;border-bottom:1px solid var(--rule-weak);
  font-family:var(--font-helvetica);font-size:11px;letter-spacing:.2em;color:var(--text-muted);
}
.rd-meta a{color:var(--text-quaternary);text-decoration:none;border-bottom:1px solid var(--rule-weak)}
.rd-meta a:hover{color:var(--text-primary);border-bottom-color:var(--text-primary)}

.rd-note{
  max-width:40em;margin:3.5rem 0 0;padding:1.2rem 0 0;
  border-top:1px solid var(--rule-weak);
  font-size:.8rem;line-height:1.95;letter-spacing:.03em;color:var(--text-muted);
}

.rd-fig{margin:2.4rem 0}
.rd-fig img{width:100%}

/* ---------- 記事の表 ---------- */
.rd-tbl-wrap{margin:0 0 2.2em;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--rule-weak)}
.rd-tbl{border-collapse:separate;border-spacing:0;width:100%;font-size:.85rem;line-height:1.9;color:var(--text-secondary)}
.rd-tbl th,.rd-tbl td{min-width:7.5em;padding:.9rem 1.1rem;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--rule-weak);overflow-wrap:anywhere;letter-spacing:.02em}
.rd-tbl thead th{background:var(--bg-secondary);color:var(--text-primary);
  font-family:var(--font-helvetica);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  word-break:keep-all;border-bottom:1px solid var(--rule-strong)}
.rd-tbl tbody tr:last-child td{border-bottom:none}
.rd-tbl thead th:first-child,.rd-tbl tbody td:first-child{position:sticky;left:0;z-index:1;
  border-right:1px solid var(--rule-weak)}
.rd-tbl tbody td:first-child{background:var(--bg-pure)}

/* ---------- 動画 ---------- */
.rd-video{margin:2.4rem 0}
.rd-video__t{font-family:var(--font-helvetica);font-size:11px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--text-muted);margin:0 0 .6rem}
.rd-video__f{position:relative;width:100%;aspect-ratio:16/9;background:#000;overflow:hidden}
.rd-video__f iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- 記事の締め（キャリア相談へ） ---------- */
.rd-next{
  max-width:40em;margin:4rem 0 0;padding:2.2rem 2.2rem 2rem;
  border:1px solid var(--rule-strong);background:var(--bg-pure);
  display:flex;gap:1.8rem;align-items:flex-start;
}
.rd-next__fig{flex:none;width:96px;line-height:0}
.rd-next__fig svg{width:96px;height:96px}
.rd-next__b{display:block;min-width:0}
.rd-next__lead{
  display:block;margin:0 0 1.4rem;
  font-size:.9rem;line-height:2;letter-spacing:.03em;color:var(--text-secondary);
}
.rd-next__btn,
.rd-fwd__btn,
.blx-morebtn,
.newsletter-section__cta,
.btn-primary{
  display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--font-helvetica);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-primary);text-decoration:none;
  border:1px solid var(--rule-strong);border-radius:0;background:transparent;
  padding:.85rem 1.4rem;transition:background .2s ease,color .2s ease;
}
.rd-next__btn:hover,.rd-fwd__btn:hover,.blx-morebtn:hover,
.newsletter-section__cta:hover,.btn-primary:hover{background:var(--text-primary);color:#fff}
.rd-next__btn svg,.rd-fwd__btn svg{width:11px;height:11px}
.rd-next__btn:hover svg path,.rd-fwd__btn:hover svg path{stroke:#fff}

/* ---------- WHAT'S NEXT（同じ扉へ） ---------- */
.rd-fwd{
  max-width:40em;margin:1rem 0 0;padding:1.4rem 0 0;border-top:1px solid var(--rule-weak);
  display:flex;gap:1.2rem;align-items:center;justify-content:space-between;flex-wrap:wrap;
}
.rd-fwd__l{display:block}
.rd-fwd__rows{display:flex;flex-direction:column;gap:.6rem;min-width:0}
.rd-fwd__btn--quiet{border-color:var(--rule-mid);color:var(--text-tertiary);
  font-size:.68rem;padding:.7rem 1.15rem}
.rd-fwd__btn--quiet svg path{stroke:var(--text-tertiary)}

/* ---------- 前後の記事 ---------- */
.rd-pn{
  max-width:40em;margin:2.4rem 0 0;display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--rule-weak);border:1px solid var(--rule-weak);
}
.rd-pn>a,.rd-pn>span{background:var(--bg-primary);padding:1.3rem 1.4rem;text-decoration:none;
  display:flex;gap:.9rem;align-items:flex-start;transition:background .2s ease}
.rd-pn>a:hover{background:var(--bg-secondary)}
.rd-pn__i{flex:none;width:44px;line-height:0;opacity:.55}
.rd-pn__i svg{width:44px;height:auto}
.rd-pn__b{display:block;min-width:0}
.rd-pn__l{display:block;margin:0 0 .35rem}
.rd-pn__t{display:block;font-family:var(--font-serif);font-size:.9rem;line-height:1.75;
  color:var(--text-primary);letter-spacing:.02em}
.rd-pn--older{text-align:right;flex-direction:row-reverse}
.rd-pn--older .rd-pn__b{text-align:right}

/* ---------- 線画は墨へ寄せる（新しい色を足さないため） ---------- */
.rd-pn__i svg *,.blx-fig svg *,.rd-next__fig svg *{stroke:var(--text-primary)}
.rd-pn__i svg [fill]:not([fill="none"]),
.blx-fig svg [fill]:not([fill="none"]),
.rd-next__fig svg [fill]:not([fill="none"]){fill:rgba(0,0,0,.07)}

/* =============================================================
   一覧
   ============================================================= */
.blx-wide{max-width:76rem}
.blx-layout{display:grid;grid-template-columns:minmax(0,1fr) 17rem;gap:4rem;align-items:start}
.blx-main{min-width:0}
.blx-side{min-width:0}

/* 扉 */
/* ★8つを3列に並べると9つ目が空く。gap を罫線の色で見せる作り方だと、
   その空き1マスだけが塗りつぶしに見える（2026-08-20 実機で確認）。
   罫線は各マスが自分で持つ形にして、空きマスには何も出さない。 */
.blx-doors{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:1px solid var(--rule-weak);border-left:1px solid var(--rule-weak);
  margin:0 0 1.2rem}
.blx-door{display:block;width:100%;text-align:left;background:var(--bg-primary);
  padding:1.2rem 1.3rem 1.1rem;border:0;cursor:pointer;transition:background .2s ease;
  border-right:1px solid var(--rule-weak);border-bottom:1px solid var(--rule-weak)}
.blx-door:hover{background:var(--bg-secondary)}
.blx-door[aria-pressed="true"]{background:var(--text-primary)}
.blx-door[aria-pressed="true"] .blx-door__t{color:#fff}
.blx-door[aria-pressed="true"] .blx-door__s,
.blx-door[aria-pressed="true"] .blx-door__n{color:rgba(255,255,255,.62)}
.blx-door__t{display:block;font-family:var(--font-serif);font-size:1rem;line-height:1.6;
  color:var(--text-primary);letter-spacing:.04em}
.blx-door__s{display:block;margin:.4rem 0 .6rem;font-size:.75rem;line-height:1.8;
  color:var(--text-quaternary);letter-spacing:.02em}
.blx-door__n{display:block}
.blx-doors__all{margin:0 0 2.4rem;font-family:var(--font-helvetica);font-size:11px;
  letter-spacing:.18em;color:var(--text-muted);display:flex;gap:1.2rem;align-items:center;flex-wrap:wrap}
.blx-doors__all button{font-family:var(--font-helvetica);font-size:11px;letter-spacing:.18em;
  color:var(--text-quaternary);text-transform:uppercase;border-bottom:1px solid var(--rule-weak)}
.blx-doors__all button:hover{color:var(--text-primary);border-bottom-color:var(--text-primary)}

/* 検索と件数 */
.blx-tools{display:flex;align-items:center;gap:1.4rem;margin:0 0 1.6rem;flex-wrap:wrap;
  padding:0 0 1.1rem;border-bottom:1px solid var(--rule-strong)}
.blx-search{flex:1 1 16rem;max-width:26rem}
.blx-search input{width:100%;font:inherit;font-size:.85rem;letter-spacing:.04em;
  color:var(--text-secondary);background:transparent;
  border:0;border-bottom:1px solid var(--rule-weak);border-radius:0;padding:.5rem 0;-webkit-appearance:none}
.blx-search input:focus{outline:0;border-bottom-color:var(--text-primary)}
.blx-count{margin-left:auto}

/* 記事の並び＝1本ずつの行 */
.blx-grid{display:block;border-top:1px solid var(--rule-weak)}
.blx-card{display:flex;gap:1.8rem;align-items:flex-start;
  padding:1.9rem 0;border-bottom:1px solid var(--rule-weak)}
.blx-fig{flex:none;width:88px;position:relative;line-height:0;opacity:.6}
.blx-fig svg{width:88px;height:auto}
.blx-chip{position:static;display:inline-block;margin:.7rem 0 0;padding:0;background:none;
  border-radius:0;box-shadow:none;color:var(--text-muted)}
.blx-chip--video::before{content:"— "}
.blx-body{min-width:0;flex:1 1 auto}
.blx-meta{margin:0 0 .5rem}
.blx-date{margin:0}
.blx-ttl{margin:0 0 .6rem;font-family:var(--font-serif);font-weight:300;
  font-size:1.2rem;line-height:1.7;letter-spacing:.02em}
.blx-ttl a{color:var(--text-primary);text-decoration:none}
.blx-ttl a:hover{color:var(--text-tertiary)}
.blx-lead{margin:0 0 .8rem;font-size:.85rem;line-height:1.95;letter-spacing:.03em;
  color:var(--text-tertiary)}
.blx-more{margin:0;font-family:var(--font-helvetica);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--text-muted)}
.blx-more::before{content:"— "}
.blx-card:hover .blx-more{color:var(--text-primary)}
.blx-empty{padding:3rem 0;color:var(--text-quaternary);font-size:.9rem}
.blx-morebtn{margin:2.4rem 0 0}

/* アーカイブ「すべて見る」＝右の欄の中で、その場で縦に開く（2026-08-21 博士のご指示）。
   中央の面には出さない。ページも飛ばさない。開閉は native の details / summary。 */
.blx-arcall{border-top:1px solid var(--rule-weak)}
.blx-arcall>summary{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  padding:.7rem 0;font-size:.85rem;line-height:1.7;letter-spacing:.03em;
  color:var(--text-secondary);cursor:pointer;list-style:none}
.blx-arcall>summary::-webkit-details-marker{display:none}
.blx-arcall>summary:hover,.blx-arcall[open]>summary{color:var(--text-primary)}
.blx-arcall__b{padding:0 0 .4rem}
.blx-arcall__y{margin:0;padding:.8rem 0 .2rem;border-top:1px solid var(--rule-weak)}
.blx-arcall__yt{display:block;margin:0 0 .5rem;font-family:var(--font-serif);font-size:.9rem;
  font-weight:300;color:var(--text-primary)}
.blx-arcall__yt span{margin-left:.5em;font-family:var(--font-helvetica);font-size:.68rem;
  letter-spacing:.1em;color:var(--text-muted)}
.blx-arcall__ms{display:flex;flex-wrap:wrap;gap:.4rem}
.blx-arcall__m{border:1px solid var(--rule-weak);background:transparent;border-radius:0;
  font-family:var(--font-helvetica);font-size:.68rem;letter-spacing:.1em;color:var(--text-secondary);
  padding:.4rem .6rem;cursor:pointer}
.blx-arcall__m:hover{border-color:var(--text-primary)}
.blx-arcall__m[aria-pressed="true"]{border-color:var(--text-primary);color:var(--text-primary)}
.blx-arcall__m span{margin-left:.5em;color:var(--text-muted)}

/* 右の欄 */
.blx-w{margin:0 0 2.8rem;padding:0 0 2.4rem;border-bottom:1px solid var(--rule-weak)}
.blx-w__label{display:block;margin:0 0 .6rem}
.blx-w__ttl{margin:0 0 1.1rem;font-family:var(--font-serif);font-weight:300;
  font-size:1.05rem;line-height:1.6;color:var(--text-primary);letter-spacing:.04em}
.blx-cat{list-style:none;margin:0;padding:0}
.blx-cat li{margin:0;border-top:1px solid var(--rule-weak)}
.blx-cat li:first-child{border-top:none}
.blx-cat a{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  padding:.7rem 0;font-size:.85rem;line-height:1.7;letter-spacing:.03em;
  color:var(--text-secondary);text-decoration:none}
.blx-cat a:hover{color:var(--text-primary)}
.blx-cat__n{font-family:var(--font-helvetica);font-size:.68rem;letter-spacing:.1em;color:var(--text-muted)}

/* 書いている人 */
.blx-prof{text-align:left}
.blx-prof img{width:5.5rem;height:5.5rem;border-radius:50%;margin:0 0 1rem;object-fit:cover}
.blx-prof__name{margin:0;font-family:var(--font-serif);font-size:1.05rem;color:var(--text-primary)}
.blx-prof__role{margin:.3rem 0 .9rem;font-family:var(--font-helvetica);font-size:.68rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.blx-prof__txt{margin:0 0 1rem;font-size:.8rem;line-height:1.95;color:var(--text-tertiary)}
.blx-prof__link{font-family:var(--font-helvetica);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-primary);
  border-bottom:1px solid var(--rule-weak);text-decoration:none}
.blx-prof__link:hover{border-bottom-color:var(--text-primary)}

/* 案内（LPのリンク枠と同じ作り） */
.blx-ad{display:block;margin:0 0 1.2rem;padding:1.3rem 1.4rem;
  border:1px solid var(--rule-weak);text-decoration:none;transition:border-color .2s ease}
.blx-ad:hover{border-color:var(--text-primary)}
.blx-ad--dark{border-color:var(--rule-strong)}
.blx-ad__orn{display:none}
.blx-ad__eyebrow{display:block;margin:0 0 .6rem;text-align:left!important}
.blx-ad__ttl{display:block;margin:0 0 .5rem;font-family:var(--font-serif);font-size:1rem;
  line-height:1.6;color:var(--text-primary);text-align:left!important}
.blx-ad__sub{display:block;margin:0 0 .9rem;font-size:.78rem;line-height:1.9;
  color:var(--text-quaternary);text-align:left!important}
.blx-ad__cta{display:block;font-family:var(--font-helvetica);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-primary);justify-content:flex-start!important}
.blx-ad__cta::before{content:"— "}
.blx-ad__cta::after{content:" →"}

/* ---------- 一覧の下（キャリア相談のご案内） ---------- */
.newsletter-section{border-top:1px solid var(--rule-weak);background:var(--bg-secondary)}
.newsletter-section__inner{max-width:46rem;margin:0 auto;padding:var(--chapter-pad-y) var(--gutter);
  text-align:center}
.newsletter-section__eyebrow{display:block;margin:0 0 1.2rem}
.newsletter-section__title{margin:0 0 1.2rem;font-family:var(--font-serif);font-weight:300;
  font-size:1.8rem;line-height:1.6;color:var(--text-primary);letter-spacing:.03em}
.newsletter-section__lead{margin:0 0 2rem;font-size:.9rem;line-height:2;
  color:var(--text-tertiary);letter-spacing:.03em}

/* =============================================================
   月別アーカイブ
   ============================================================= */
.arc-wrap{max-width:44em;margin:0}
.arc-wrap h2{font-family:var(--font-serif);font-weight:300;font-size:1.25rem;line-height:1.7;
  color:var(--text-primary);margin:3rem 0 .8rem;padding:0 0 .5rem;
  border-bottom:1px solid var(--rule-strong)}
.arc-n{margin-left:1em}
.arc-list{list-style:none;margin:0;padding:0}
.arc-list li{display:flex;gap:1.2rem;align-items:baseline;
  border-bottom:1px solid var(--rule-weak);padding:.8rem 0}
.arc-d{flex:none}
.arc-list a{font-size:.88rem;line-height:1.85;letter-spacing:.03em;
  color:var(--text-secondary);text-decoration:none}
.arc-list a:hover{color:var(--text-primary)}
.arc-back{max-width:44em;margin:3rem 0 0;font-family:var(--font-helvetica);font-size:.7rem;
  letter-spacing:.18em;text-transform:uppercase}
.arc-back a{color:var(--text-primary);text-decoration:none;border-bottom:1px solid var(--rule-weak)}
.arc-back a::before{content:"— "}
.arc-back a:hover{border-bottom-color:var(--text-primary)}

/* =============================================================
   画面が狭いとき
   ============================================================= */
@media (max-width:1000px){
  .blx-layout{grid-template-columns:1fr;gap:3rem}
  .blx-doors{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
  .breadcrumb,.page-hero__frame,.page-content .container{padding-left:var(--gutter-m);padding-right:var(--gutter-m)}
  .page-hero__frame{padding-top:2.4rem;padding-bottom:2.2rem}
  .page-hero__h1{font-size:1.9rem}
  .page-hero{margin-bottom:var(--chapter-pad-y-m)}
  .page-content{padding-bottom:var(--chapter-pad-y-m)}
  .blx-doors{grid-template-columns:1fr}
  .blx-fig{display:none}
  .blx-card{gap:0}
  .rd-next{flex-direction:column;gap:1.2rem;padding:1.6rem 1.4rem 1.5rem}
  .rd-next__fig,.rd-next__fig svg{width:72px;height:72px}
  .rd-pn{grid-template-columns:1fr}
  .rd-pn--older,.rd-pn--older .rd-pn__b{text-align:left}
  .rd-pn--older{flex-direction:row}
  .rd-pn__i{display:none}
  .newsletter-section__inner{padding:var(--chapter-pad-y-m) var(--gutter-m)}
  .newsletter-section__title{font-size:1.4rem}
  .rd-body h2{font-size:1.25rem}
}