@charset "UTF-8";
/* ==========================================================================
   40-front.css — ページ別の面組み(トップ / 記事 / カテゴリ / 404)
   正本: canvas-final.dc.html「01 トップ」「02 記事」「03 カテゴリ」
        + implementation.css の .oym-branch / .oym-index を逐語
   ========================================================================== */

/* ==== §1 トップ: ヒーロー(canvas L143-152) ============================== */
.oym-hero{background:var(--oym-surface);border-bottom:1px solid var(--oym-line);}
.oym-hero__inner{display:flex;flex-direction:column;gap:22px;padding-top:56px;padding-bottom:48px;}
.oym-hero__title{
  font-size:38px;font-weight:700;line-height:1.5;letter-spacing:.01em;
  max-width:900px;margin:0;text-wrap:pretty;
}
.oym-hero__lead{
  font-size:16px;line-height:2;color:var(--oym-ink-2);
  max-width:var(--oym-w-content);margin:0;text-wrap:pretty;
}
.oym-hero__actions{
  display:flex;gap:28px;align-items:center;flex-wrap:wrap;padding-top:4px;
}
.oym-hero__note{
  font-size:var(--oym-fs-small);line-height:1.9;color:var(--oym-ink-3);
  max-width:420px;margin:0;text-wrap:pretty;
}

/* ==== §2 トップ: 節の見出し帯 ============================================ */
.oym-sechead{display:flex;flex-direction:column;gap:10px;padding-top:52px;padding-bottom:20px;}
.oym-sechead--tight{padding-top:0;padding-bottom:8px;}

/* ==== §3 トップ: 現在地の分岐リスト(canvas L163-244) =====================
   implementation.css §「トップの分岐リスト」を逐語。段差は左のガター幅で作る。 */
.oym-branch{display:flex;flex-direction:column;gap:var(--oym-sp-2);}
.oym-branch__row{display:flex;align-items:stretch;}
.oym-branch__gutter{flex:none;display:flex;justify-content:center;}
.oym-branch__gutter::before{content:"";width:1px;background:var(--oym-line);}
.oym-branch__row--1 .oym-branch__gutter{width:0;}
.oym-branch__row--2 .oym-branch__gutter{width:56px;}
.oym-branch__row--3 .oym-branch__gutter{width:112px;}
.oym-branch__card{
  flex:1;background:var(--oym-surface);border:1px solid var(--oym-line);
  border-radius:var(--oym-r);padding:24px 28px;
  display:flex;gap:28px;align-items:center;
}
.oym-branch__row--2 .oym-branch__card{background:var(--oym-step-2);}
.oym-branch__row--3 .oym-branch__card{background:var(--oym-step-3);}
.oym-branch__eyebrow{
  display:flex;align-items:center;gap:9px;
  font-size:var(--oym-fs-2xs);font-weight:700;letter-spacing:.12em;color:var(--oym-walnut);
}
.oym-branch__eyebrow::before{
  content:"";width:8px;height:8px;border-radius:var(--oym-r-pill);
  background:currentColor;flex:none;
}
.oym-branch__row--2 .oym-branch__eyebrow{color:var(--oym-teal);}
.oym-branch__row--3 .oym-branch__eyebrow{color:var(--oym-umber);}
.oym-branch__row--2 .oym-btn{background:var(--oym-teal);}
.oym-branch__row--3 .oym-btn{background:var(--oym-umber);}

/* カード内の3ブロック(canvas L168-186) */
.oym-branch__lead{display:flex;flex-direction:column;gap:8px;width:300px;flex:none;}
.oym-branch__row--3 .oym-branch__lead{width:280px;}
.oym-branch__title{font-size:20px;font-weight:700;line-height:1.55;margin:0;}
.oym-branch__body{display:flex;flex-direction:column;gap:10px;flex:1;min-width:0;}
.oym-branch__desc{font-size:14px;line-height:1.9;color:var(--oym-ink-2);margin:0;text-wrap:pretty;}
.oym-branch__tags{display:flex;gap:8px;flex-wrap:wrap;}
.oym-branch__row--2 .oym-branch__tags .oym-tag{color:var(--oym-teal);background:var(--oym-teal-soft);}
.oym-branch__row--3 .oym-branch__tags .oym-tag{color:var(--oym-umber);background:var(--oym-band);}
.oym-branch__tags .oym-tag{color:var(--oym-walnut);background:var(--oym-walnut-soft);}
.oym-branch__go{display:flex;flex-direction:column;gap:6px;align-items:flex-end;flex:none;}
.oym-branch__count{font-size:var(--oym-fs-2xs);color:var(--oym-ink-3);}
.oym-branch__note{display:flex;gap:0;}
.oym-branch__note-gutter{width:112px;flex:none;}
.oym-branch__note p{
  font-size:var(--oym-fs-xs);line-height:1.9;color:var(--oym-ink-3);
  padding-left:4px;margin:0;text-wrap:pretty;
}

/* ==== §4 トップ: カテゴリ索引(canvas L253-278) ==========================
   implementation.css §「カテゴリ索引（行組み）」を逐語 + 実装補助。 */
.oym-index{display:flex;flex-direction:column;}
.oym-index__row{
  display:grid;grid-template-columns:36px 260px 1fr 92px;gap:20px;
  align-items:baseline;padding:22px 0;border-top:1px solid var(--oym-line);
}
.oym-index__row:last-child{border-bottom:1px solid var(--oym-line);}
.oym-index__no{font-size:var(--oym-fs-small);font-weight:700;color:var(--oym-ink-3);font-variant-numeric:tabular-nums;}
.oym-index__name{font-size:19px;font-weight:700;line-height:1.6;color:var(--oym-walnut);}
.oym-index__name a{color:var(--oym-walnut);text-decoration:none;}
.oym-index__name a:hover{color:var(--oym-walnut-dark);text-decoration:underline;}
.oym-index__count{font-size:var(--oym-fs-small);color:var(--oym-ink-3);text-align:right;font-variant-numeric:tabular-nums;}
.oym-index__desc{font-size:14px;line-height:1.9;color:var(--oym-ink-2);margin:0;text-wrap:pretty;}
/* 準備中のレーン(canvas L272-277) */
.oym-index__row--pending .oym-index__name{color:var(--oym-ink-3);}
.oym-index__row--pending .oym-index__count{font-size:var(--oym-fs-xs);font-weight:700;color:var(--oym-ink-3);}

/* ==== §5 トップ: 更新した記事 + 右カラム(canvas L281-341) =============== */
.oym-latest{
  display:grid;grid-template-columns:1fr 300px;gap:52px;align-items:start;
  padding-bottom:56px;
}
.oym-latest__col{display:flex;flex-direction:column;gap:10px;min-width:0;}
.oym-latest__head{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding-bottom:8px;
}
.oym-latest__more{font-size:var(--oym-fs-small);font-weight:700;color:var(--oym-walnut);white-space:nowrap;}
.oym-latest__side{display:flex;flex-direction:column;gap:16px;padding-top:34px;}

/* ==== §6 記事ページ(canvas L507-720) =================================== */
.oym-main{
  display:grid;grid-template-columns:1fr 290px;gap:56px;align-items:start;
  padding-top:22px;padding-bottom:60px;
}
.oym-main--full{grid-template-columns:1fr;}
.oym-article{display:flex;flex-direction:column;gap:30px;max-width:var(--oym-w-content);min-width:0;}
.oym-arthead{display:flex;flex-direction:column;gap:16px;}
.oym-arthead .oym-tags{gap:8px;}

/* 一覧側(カテゴリ・検索・404 は本文幅を使わない) */
.oym-main--archive{padding-top:32px;}
.oym-listcol{display:flex;flex-direction:column;gap:24px;min-width:0;}

/* ==== §7 カテゴリページ(canvas L861-961) =============================== */
.oym-archead{background:var(--oym-surface);border-bottom:1px solid var(--oym-line);}
.oym-archead__inner{display:flex;flex-direction:column;gap:20px;padding-top:18px;padding-bottom:40px;}
.oym-archead__grid{display:grid;grid-template-columns:1fr 340px;gap:52px;align-items:start;}
.oym-archead__main{display:flex;flex-direction:column;gap:14px;min-width:0;}
.oym-archead__eyebrow{display:flex;align-items:center;gap:12px;}
.oym-archead__title{font-size:var(--oym-fs-h1);font-weight:700;line-height:1.5;margin:0;}
.oym-archead__desc{
  font-size:15px;line-height:2;color:var(--oym-ink-2);max-width:640px;margin:0;text-wrap:pretty;
}
.oym-archead__count{font-size:var(--oym-fs-small);color:var(--oym-ink-3);font-variant-numeric:tabular-nums;}

.oym-toolbar{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;
}
.oym-filters{display:flex;gap:8px;flex-wrap:wrap;}
.oym-filter{
  font-size:var(--oym-fs-small);font-weight:700;color:var(--oym-ink);
  background:var(--oym-surface);border:1px solid var(--oym-line);
  padding:8px 15px;border-radius:var(--oym-r-pill);text-decoration:none;white-space:nowrap;
}
.oym-filter:hover{color:var(--oym-walnut);text-decoration:none;}
.oym-filter.is-active{
  color:var(--oym-surface);background:var(--oym-walnut);border-color:var(--oym-walnut);padding:9px 16px;
}
.oym-filter.is-active:hover{color:var(--oym-surface);}
/* 絞り込みチップが無いカテゴリでも並び替えは右端に置く(canvas L887 の左右配置) */
.oym-sort{display:flex;gap:16px;font-size:var(--oym-fs-small);align-items:center;margin-left:auto;}
.oym-sort a{color:var(--oym-ink-3);text-decoration:none;}
.oym-sort a:hover{color:var(--oym-walnut);}
.oym-sort a.is-active{font-weight:700;color:var(--oym-ink);}

/* ==== §8 404(復帰導線) ==================================================
   キャンバスに 404 の面は無い。トップの分岐リスト/索引の作法をそのまま使う。 */
.oym-404{
  display:flex;flex-direction:column;gap:var(--oym-sp-3);
  padding-top:var(--oym-sp-5);padding-bottom:var(--oym-sp-6);
  max-width:var(--oym-w-content);
}
.oym-404__code{font-size:var(--oym-fs-2xs);font-weight:700;letter-spacing:.12em;color:var(--oym-teal);}
.oym-404__title{font-size:var(--oym-fs-h1);font-weight:700;line-height:1.5;margin:0;}
.oym-404__text{font-size:15px;line-height:1.95;color:var(--oym-ink-2);margin:0;text-wrap:pretty;}
.oym-404__label{
  font-size:var(--oym-fs-2xs);font-weight:700;letter-spacing:.12em;color:var(--oym-ink-3);
  margin-top:var(--oym-sp-2);
}
.oym-404__home{margin-top:var(--oym-sp-2);align-self:flex-start;}

/* ==== §9 固定ページ / 検索 =============================================== */
.oym-page-title{font-size:var(--oym-fs-h1);font-weight:700;line-height:1.5;margin:0;}
.oym-empty{
  background:var(--oym-surface);border:1px solid var(--oym-line);border-radius:var(--oym-r);
  padding:24px 26px;font-size:15px;line-height:1.9;color:var(--oym-ink-2);
}