@charset "UTF-8";
/* ==========================================================================
   30-components.css — 共通部品
   正本: implementation.css(逐語)+ canvas「04 部品カタログ」(board6)の実測
   §1 記事メタ / §2 結論カプセル / §3 確認日チップ・タグ / §4 表の土台
   §5 チェックリスト表 / §6 対比表 / §7 比較表 / §8 相談サイン / §9 文脈内CTA
   §10 ボタン / §11 記事カード(一覧) / §12 ページャ / §13 サイドバー部品
   ========================================================================== */

/* ==== §1 記事メタ(canvas L520-525) ====================================== */
.oym-meta{
  display:flex;flex-wrap:wrap;gap:18px;align-items:center;
  padding-bottom:var(--oym-sp-3);border-bottom:1px solid var(--oym-line);
  font-size:var(--oym-fs-small);color:var(--oym-ink-3);
}
.oym-meta .author{font-weight:700;color:var(--oym-ink);}
.oym-meta .modified{font-weight:700;color:var(--oym-teal);}
.oym-meta .readtime{font-size:var(--oym-fs-xs);}

/* ==== §2 結論カプセル(canvas L528-536 / L1192-1198) ======================
   2形態を受ける:
   (a) 記事本文の <p class="oym-capsule"> 1段落 … ラベルは ::before で描く
   (b) キャンバス形の <div class="oym-capsule"><div class="label">…<ol> */
.oym-capsule{
  background:var(--oym-walnut-soft);border-radius:var(--oym-r);
  padding:24px 26px;margin:var(--oym-sp-3) 0;
}
.oym-capsule > .label{
  font-size:var(--oym-fs-xs);font-weight:700;letter-spacing:.1em;
  color:var(--oym-walnut);margin-bottom:13px;
}
.oym-capsule ol{margin:0;padding:0;list-style:none;counter-reset:oym-cap;}
.oym-capsule li{
  position:relative;padding-left:2.2em;margin:0 0 .6em;
  line-height:1.9;font-size:15px;counter-increment:oym-cap;
}
.oym-capsule li::before{
  content:"0" counter(oym-cap);position:absolute;left:0;
  color:var(--oym-walnut);font-weight:700;font-variant-numeric:tabular-nums;
}
/* (a) 段落1個で投入された結論カプセル。ラベルを補って同じ見た目にする。 */
p.oym-capsule{font-size:15px;line-height:1.9;color:var(--oym-ink);}
p.oym-capsule::before{
  content:"この記事の結論";display:block;
  font-size:var(--oym-fs-xs);font-weight:700;letter-spacing:.1em;
  color:var(--oym-walnut);margin-bottom:13px;line-height:1.6;
}
.entry-content p.oym-capsule,
.articleBody p.oym-capsule{margin:var(--oym-sp-3) 0;}

/* ==== §3 確認日チップ / タグ(canvas L1199-1204) ========================= */
.oym-asof{
  display:inline-block;font-size:var(--oym-fs-xs);font-weight:700;
  color:var(--oym-teal);background:var(--oym-teal-soft);
  border-radius:var(--oym-r-pill);padding:6px 12px;
  font-variant-numeric:tabular-nums;
}
.oym-tags{display:flex;flex-wrap:wrap;gap:8px;}
.oym-tag{
  display:inline-block;font-size:var(--oym-fs-xs);font-weight:700;
  color:var(--oym-ink-2);background:var(--oym-band);
  border-radius:var(--oym-r-pill);padding:6px 12px;text-decoration:none;
}
a.oym-tag:hover{text-decoration:none;color:var(--oym-ink);}
.oym-tag--cat{color:var(--oym-walnut);background:var(--oym-walnut-soft);}
a.oym-tag--cat:hover{color:var(--oym-walnut-dark);}
.oym-tag--teal{color:var(--oym-teal);background:var(--oym-teal-soft);}
.oym-tag--outline{
  color:var(--oym-ink);background:var(--oym-surface);
  border:1px solid var(--oym-line);padding:5px 11px;
}
.oym-tag--pending{
  color:var(--oym-ink-3);background:var(--oym-surface);
  border:1px dashed var(--oym-tag-dashed);padding:5px 11px;
}
/* 一覧カードの小さいチップ(canvas L300 / L907) */
.oym-tag--sm{font-size:var(--oym-fs-2xs);padding:5px 11px;}

/* ==== §4 表の共通土台 ====================================================
   外枠だけ角丸、内側は実線ヘアライン。 */
.oym-table{
  width:100%;border-collapse:separate;border-spacing:0;
  background:var(--oym-surface);border:1px solid var(--oym-line);
  border-radius:var(--oym-r);overflow:hidden;
  font-size:14px;line-height:1.85;margin:var(--oym-sp-3) 0;
}
.oym-table th{
  background:var(--oym-band);font-size:var(--oym-fs-2xs);font-weight:700;
  color:var(--oym-ink-2);text-align:left;padding:13px 16px;
  border-bottom:1px solid var(--oym-line);
}
.oym-table td{padding:15px 16px;border-bottom:1px solid var(--oym-line-soft);vertical-align:top;}
.oym-table tbody tr:nth-child(even) td{background:var(--oym-surface-alt);}
.oym-table tbody tr:last-child td{border-bottom:0;}
.oym-table .num{text-align:right;}
.oym-table .asof{font-size:var(--oym-fs-xs);font-weight:700;color:var(--oym-teal);white-space:nowrap;}
.oym-table .muted{color:var(--oym-ink-2);}

/* ==== §5 チェックリスト表(canvas L1053-1062) ============================ */
.oym-checktable td:first-child{width:38px;}
.oym-checktable input[type=checkbox]{
  appearance:none;width:15px;height:15px;
  border:1px solid var(--oym-check);border-radius:4px;background:var(--oym-surface);
}
.oym-checktable input[type=checkbox]:checked{background:var(--oym-walnut);border-color:var(--oym-walnut);}

/* ==== §6 制度の対比表(canvas L1137-1166) =============================== */
.oym-diff th.after{color:var(--oym-walnut);}
.oym-diff .status-pending{font-size:var(--oym-fs-xs);font-weight:700;color:var(--oym-teal);}
.oym-diff .status-current{font-size:var(--oym-fs-xs);font-weight:700;color:var(--oym-walnut);}
.oym-source{font-size:var(--oym-fs-xs);line-height:1.9;color:var(--oym-ink-3);}
/* 確認日と出典は表の外に置く(canvas L1163-1166 の並び) */
.oym-diff-foot{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:var(--oym-sp-2);}

/* ==== §7 サービス比較表(canvas L1092-1129) ==============================
   .oym-compare は .oym-table の派生。「分からないこと」列は本文側で必ず持つ。 */
.oym-compare td.unknown{color:var(--oym-ink-2);}
.oym-note{font-size:var(--oym-fs-xs);line-height:1.9;color:var(--oym-ink-3);margin:var(--oym-sp-1) 0 0;}

/* ==== §8 相談サイン(canvas L643-659 / L1070-1084) ======================
   左罫ではなく上部の淡い帯＋点。 */
.oym-signal{
  background:var(--oym-surface);border:1px solid var(--oym-teal-line);
  border-radius:var(--oym-r);overflow:hidden;margin:var(--oym-sp-3) 0;
}
.oym-signal > .head{
  background:var(--oym-teal-soft);padding:13px 18px;
  display:flex;align-items:center;gap:9px;
  font-size:15px;font-weight:700;color:var(--oym-teal);
}
.oym-signal > .head::before{
  content:"";width:8px;height:8px;border-radius:var(--oym-r-pill);
  background:var(--oym-teal);flex:none;
}
.oym-signal > .body{padding:20px 22px;}
.oym-signal ul{margin:0;padding:0;list-style:none;}
.oym-signal li{position:relative;padding-left:1.8em;margin:0 0 .55em;line-height:1.8;}
.oym-signal li::before{
  content:"";position:absolute;left:0;top:.45em;
  width:14px;height:14px;border:1px solid var(--oym-teal);border-radius:4px;
}
.oym-signal .note{
  margin-top:12px;padding-top:12px;border-top:1px solid var(--oym-line-soft);
  font-size:var(--oym-fs-small);line-height:1.9;color:var(--oym-ink-2);
}
/* 記事PCの見出しは 15px(L646)。カタログは 14px(L1073)。既定は記事側。 */

/* ==== §9 文脈内CTA(canvas L661-668 / L1174-1179) ======================= */
.oym-next{
  border:1px solid var(--oym-walnut-line);border-radius:var(--oym-r);
  background:var(--oym-surface);padding:22px 24px;margin:var(--oym-sp-3) 0;
  display:flex;gap:26px;align-items:center;justify-content:space-between;
}
.oym-next .label{font-size:var(--oym-fs-2xs);font-weight:700;letter-spacing:.1em;color:var(--oym-walnut);}
.oym-next .title{font-size:17px;font-weight:700;line-height:1.6;margin-top:7px;}
.oym-next .desc{font-size:var(--oym-fs-small);line-height:1.85;color:var(--oym-ink-2);margin-top:7px;}
.oym-next__body{display:flex;flex-direction:column;min-width:0;}
.oym-next .oym-btn{flex:none;}

/* 外部サービスに触れる場合の注記(canvas L1180-1184) */
.oym-ad-note{font-size:var(--oym-fs-2xs);color:var(--oym-ink-3);margin-top:6px;}
.oym-extlink{
  background:var(--oym-band);border-radius:var(--oym-r);
  padding:18px 20px;margin:var(--oym-sp-3) 0;
  display:flex;flex-direction:column;gap:9px;
}
.oym-extlink .label{font-size:var(--oym-fs-2xs);font-weight:700;letter-spacing:.08em;color:var(--oym-ink-3);}
.oym-extlink p{font-size:var(--oym-fs-small);line-height:1.9;margin:0;text-wrap:pretty;}

/* ==== §10 ボタン(canvas L100-101 / L148 / L667) ========================= */
.oym-btn{
  display:inline-block;font-size:14px;font-weight:700;color:var(--oym-surface);
  background:var(--oym-walnut);border-radius:var(--oym-r-pill);padding:13px 24px;
  text-decoration:none;white-space:nowrap;text-align:center;border:0;cursor:pointer;
  font-family:inherit;
}
.oym-btn:hover{background:var(--oym-walnut-dark);color:var(--oym-surface);text-decoration:none;}
.oym-btn--ghost{
  color:var(--oym-walnut);background:var(--oym-surface);
  border:1px solid var(--oym-walnut-line);padding:12px 23px;
}
.oym-btn--ghost:hover{background:var(--oym-surface);color:var(--oym-walnut-dark);}
.oym-btn--sm{font-size:var(--oym-fs-small);padding:11px 20px;}
.oym-btn--hero{padding:14px 26px;}
/* PC は「手順を開く」+ 件数を別行(canvas L184-185)。
   SP は件数をボタン文言へ畳む(canvas L404「手順を開く（12本）」)。 */
.oym-btn__count-sp{display:none;}

/* ==== §11 記事カード(トップ更新・カテゴリ一覧) ==========================
   canvas L293-301(トップ)/ L900-910(カテゴリ PC)/ L1009-1014(カテゴリ SP) */
.oym-cards{display:flex;flex-direction:column;gap:12px;}
.oym-card{
  background:var(--oym-surface);border:1px solid var(--oym-line);border-radius:var(--oym-r);
  padding:20px 22px;display:flex;flex-direction:column;gap:9px;
}
.oym-card__dates{display:flex;gap:14px;align-items:center;flex-wrap:wrap;}
.oym-date{font-size:var(--oym-fs-xs);color:var(--oym-ink-3);font-variant-numeric:tabular-nums;}
.oym-date--mod{font-weight:700;color:var(--oym-teal);}
.oym-card__title{font-size:18px;font-weight:700;line-height:1.65;margin:0;}
.oym-card__title a{color:var(--oym-ink);text-decoration:none;}
.oym-card__title a:hover{color:var(--oym-walnut);text-decoration:none;}
.oym-card__excerpt{font-size:var(--oym-fs-small);line-height:1.9;color:var(--oym-ink-2);margin:0;text-wrap:pretty;}
.oym-card__tags{display:flex;gap:8px;flex-wrap:wrap;padding-top:2px;}

/* カテゴリ一覧の2カラム版(canvas L900) */
.oym-card--row{
  padding:24px 26px;display:grid;grid-template-columns:1fr 220px;gap:28px;align-items:center;
}
.oym-card--row .oym-card__main{display:flex;flex-direction:column;gap:9px;min-width:0;}
.oym-card--row .oym-card__title{font-size:19px;}
.oym-card--row .oym-card__tags{
  display:flex;flex-direction:column;gap:8px;align-items:flex-start;padding-top:0;
}

/* ==== §12 ページャ(canvas L956-960) ==================================== */
.oym-pager{display:flex;justify-content:center;gap:8px;padding-top:8px;flex-wrap:wrap;}
.oym-pager .page-numbers{
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;color:var(--oym-ink);
  background:var(--oym-surface);border:1px solid var(--oym-line);
  width:40px;height:40px;border-radius:var(--oym-r-pill);text-decoration:none;
}
.oym-pager .page-numbers:hover{color:var(--oym-walnut);text-decoration:none;}
.oym-pager .page-numbers.current{
  color:var(--oym-surface);background:var(--oym-walnut);border-color:var(--oym-walnut);
}
.oym-pager .page-numbers.next,
.oym-pager .page-numbers.prev{width:auto;padding:0 18px;}
.oym-pager .page-numbers.dots{border-color:transparent;background:transparent;}

/* ==== §13 サイドバー部品 =================================================
   canvas 記事PC L704-719(この手順の位置 / 情報の確認日)
          カテゴリPC L874-881(このカテゴリの読み進め方)
          トップ右 L324-339(編集方針 / 用語をひく) */
/* 親 site.css は .side に固定幅(300px)を持つ。子はグリッドのトラック幅
   (PC 290px / タブレット 260px = キャンバス L511)で決めるので打ち消す。
   打ち消さないと 1023px 幅でサイドバーがトラックを 40px はみ出す(実測)。 */
.oym-side{
  display:flex;flex-direction:column;gap:16px;
  width:auto;min-width:0;max-width:100%;
}
.oym-side--sticky{position:sticky;top:24px;}

.oym-box{
  background:var(--oym-surface);border:1px solid var(--oym-line);border-radius:var(--oym-r);
  padding:20px;display:flex;flex-direction:column;gap:13px;
}
.oym-box__label{font-size:var(--oym-fs-xs);font-weight:700;letter-spacing:.08em;color:var(--oym-walnut);}
.oym-box__title{font-size:15px;font-weight:700;line-height:1.6;}
.oym-box p{font-size:var(--oym-fs-small);line-height:1.9;color:var(--oym-ink-2);margin:0;text-wrap:pretty;}

/* 帯色の箱(情報の確認日 / 読み進め方) */
.oym-box--band{background:var(--oym-band);border-color:transparent;gap:9px;padding:20px;}
.oym-box--band .oym-box__label{color:var(--oym-ink-3);font-size:var(--oym-fs-2xs);letter-spacing:.1em;}
.oym-box--band .oym-asof{align-self:flex-start;}
/* 淡茶の箱(編集方針) */
.oym-box--soft{background:var(--oym-walnut-soft);border-color:transparent;padding:22px;gap:10px;}
.oym-box--soft .oym-box__title{color:var(--oym-walnut);}
.oym-box--soft p{color:var(--oym-ink);}
.oym-box--soft .oym-box__more{font-size:var(--oym-fs-small);font-weight:700;color:var(--oym-walnut);}

/* 手順の位置(番号付きの縦リスト) */
.oym-steplist{display:flex;flex-direction:column;font-size:var(--oym-fs-small);line-height:1.7;}
.oym-steplist__item{
  padding:10px 0;border-bottom:1px solid var(--oym-line-soft);display:flex;gap:11px;
}
.oym-steplist__item:last-child{border-bottom:0;}
.oym-steplist__no{color:var(--oym-ink-3);flex:none;font-variant-numeric:tabular-nums;}
.oym-steplist__item a{color:var(--oym-ink);text-decoration:none;}
.oym-steplist__item a:hover{color:var(--oym-walnut);}
.oym-steplist__item.is-current{font-weight:700;}
.oym-steplist__item.is-current span:last-child{color:var(--oym-walnut);}

/* 読み進め方(丸番号バッジ) */
.oym-howto{display:flex;flex-direction:column;gap:11px;font-size:14px;line-height:1.75;}
.oym-howto__item{display:flex;gap:11px;}
.oym-howto__no{
  flex:none;width:22px;height:22px;border-radius:var(--oym-r-pill);margin-top:2px;
  background:var(--oym-walnut);color:var(--oym-surface);
  font-size:var(--oym-fs-xs);font-weight:700;
  display:flex;align-items:center;justify-content:center;
}

/* 用語をひく(枠線チップの群) */
.oym-termlist{display:flex;flex-wrap:wrap;gap:7px;}

/* ==== §14 更新履歴 / 著者ボックス(canvas L688-701) ====================== */
.oym-history{
  background:var(--oym-surface);border:1px solid var(--oym-line);border-radius:var(--oym-r);
  padding:20px 22px;display:flex;flex-direction:column;gap:11px;
}
.oym-history__title{font-size:var(--oym-fs-small);font-weight:700;}
.oym-history__rule{height:1px;background:var(--oym-line);}
.oym-history__row{display:flex;gap:16px;font-size:var(--oym-fs-small);line-height:1.8;}
.oym-history__date{color:var(--oym-ink-3);width:90px;flex:none;font-variant-numeric:tabular-nums;}

.oym-author{
  background:var(--oym-surface);border:1px solid var(--oym-line);border-radius:var(--oym-r);
  padding:22px 24px;display:flex;gap:18px;align-items:flex-start;
}
.oym-author__avatar{
  width:46px;height:46px;flex:none;border-radius:var(--oym-r-pill);
  background:var(--oym-walnut-soft);
  display:flex;align-items:center;justify-content:center;
  font-size:var(--oym-fs-small);font-weight:700;color:var(--oym-walnut);
}
.oym-author__body{display:flex;flex-direction:column;gap:6px;}
.oym-author__name{font-size:15px;font-weight:700;}
.oym-author__text{font-size:var(--oym-fs-small);line-height:1.9;color:var(--oym-ink-2);margin:0;text-wrap:pretty;}

/* ==== §15 節見出し(章番号 + ヘアライン)の帯外バージョン ==================
   トップ・カテゴリの「01 / 02 / 03」見出し(canvas L155-158 ほか) */
.oym-eyebrow{display:flex;align-items:center;gap:12px;}
.oym-eyebrow__no{
  font-size:var(--oym-fs-2xs);font-weight:700;letter-spacing:.12em;color:var(--oym-teal);flex:none;
}
.oym-eyebrow__rule{height:1px;background:var(--oym-line);flex:1;}
.oym-sectitle{font-size:24px;font-weight:700;line-height:1.5;margin:0;}
.oym-secdesc{font-size:15px;line-height:1.95;color:var(--oym-ink-2);max-width:660px;margin:0;text-wrap:pretty;}

/* ==== §16 検索フォーム(404 / 検索結果) ================================== */
.oym-search{display:flex;gap:10px;flex-wrap:wrap;}
.oym-search input[type="search"]{
  flex:1;min-width:200px;
  border:1px solid var(--oym-line);border-radius:var(--oym-r-pill);
  background:var(--oym-surface);padding:12px 18px;
  font-family:inherit;font-size:14px;color:var(--oym-ink);appearance:none;
}
.oym-search input[type="search"]::placeholder{color:var(--oym-ink-3);opacity:1;}
.oym-search input[type="search"]:focus{outline:2px solid var(--oym-teal-line);outline-offset:1px;}