@charset "UTF-8";
/* ==========================================================================
   20-chrome.css — ヘッダー / ナビ / SPドロワー / パンくず / フッター
   正本: canvas-final.dc.html
     ヘッダー PC  L123-141(トップ形)・L497-505(記事・カテゴリ形)
     ヘッダー SP  L376-382 / L735-741
     パンくず     L507-509 / L742 / L863
     フッター PC  L343-368(トップ)・L722-727(記事)・L963-968(カテゴリ)
     フッター SP  L470-482 / L833-836
   ========================================================================== */

/* ==== §1 ヘッダー ========================================================= */
.oym-header{
  background:var(--oym-surface);
  border-bottom:1px solid var(--oym-line);
  position:relative;z-index:20;
}
.oym-header__inner{
  display:flex;align-items:center;justify-content:space-between;gap:22px;
  padding-top:18px;padding-bottom:18px;
}

/* ロゴ(丸マーク + サイト名 + タグライン) */
.oym-brand{display:flex;align-items:center;gap:12px;min-width:0;}
.oym-brand__mark{
  width:30px;height:30px;flex:none;border-radius:var(--oym-r-pill);
  background:var(--oym-walnut);
  display:flex;align-items:center;justify-content:center;
}
.oym-brand__mark::before{
  content:"";width:11px;height:11px;border-radius:var(--oym-r-pill);background:var(--oym-paper);
}
.oym-brand__text{display:flex;flex-direction:column;gap:2px;min-width:0;}
.oym-logo{font-size:20px;font-weight:700;letter-spacing:.09em;line-height:1.3;}
.oym-logo a{color:var(--oym-ink);text-decoration:none;}
.oym-logo a:hover{color:var(--oym-ink);text-decoration:none;}
.oym-tagline{font-size:var(--oym-fs-2xs);color:var(--oym-ink-3);letter-spacing:.04em;line-height:1.5;}

/* ナビ + 検索 */
.oym-headnav{display:flex;align-items:center;gap:22px;}
.oym-nav{display:flex;gap:20px;font-size:14px;font-weight:700;}
.oym-nav a{color:var(--oym-ink);text-decoration:none;white-space:nowrap;}
.oym-nav a:hover{color:var(--oym-walnut);text-decoration:none;}
.oym-nav a[aria-current="page"]{color:var(--oym-walnut);}
.oym-nav__about{color:var(--oym-ink-2) !important;}

.oym-searchpill{
  display:flex;align-items:center;gap:8px;
  border:1px solid var(--oym-line);border-radius:var(--oym-r-pill);
  padding:8px 16px;width:150px;background:var(--oym-paper);
}
.oym-searchpill input[type="search"]{
  border:0;background:transparent;padding:0;margin:0;width:100%;
  font-family:inherit;font-size:var(--oym-fs-xs);color:var(--oym-ink);
  min-width:0;appearance:none;
}
.oym-searchpill input[type="search"]::placeholder{color:var(--oym-ink-3);opacity:1;}
.oym-searchpill input[type="search"]:focus{outline:none;}
/* キャンバスのピルは「サイト内を検索」の1行だけ(canvas L136-138)。
   送信ボタンは見た目に出さず、Enter で送信できる状態だけ残す。 */
.oym-searchpill button{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
/* ドロワーの中は指で押せる必要があるのでボタンを出す */
.oym-drawer .oym-searchpill{position:relative;}
.oym-drawer .oym-searchpill button{
  position:static;width:auto;height:auto;margin:0;clip:auto;overflow:visible;
  font-family:inherit;font-size:var(--oym-fs-xs);font-weight:700;color:var(--oym-walnut);
  background:transparent;cursor:pointer;flex:none;
}

/* ==== §2 SP ハンバーガー + ドロワー ======================================
   JS を使わないチェックボックス方式。PC では §7(70-responsive)側で非表示。 */
.oym-drawer__state{position:absolute;opacity:0;pointer-events:none;width:0;height:0;}
.oym-burger{
  display:none;flex-direction:column;gap:5px;width:22px;cursor:pointer;flex:none;
}
.oym-burger span{display:block;height:2px;border-radius:2px;background:var(--oym-ink);}
.oym-drawer{
  max-height:0;overflow:hidden;
  background:var(--oym-surface);border-top:0 solid var(--oym-line);
  transition:max-height .22s ease;
}
.oym-drawer__state:checked ~ .oym-drawer{max-height:640px;border-top-width:1px;}
.oym-drawer__list{display:flex;flex-direction:column;padding:6px 18px 18px;}
.oym-drawer__list a{
  display:block;padding:13px 0;font-size:15px;font-weight:700;color:var(--oym-ink);
  border-bottom:1px solid var(--oym-line-soft);text-decoration:none;
}
.oym-drawer__list a:last-child{border-bottom:0;}
.oym-drawer .oym-searchpill{width:auto;margin:14px 0 2px;}

/* ==== §3 パンくず ========================================================
   ネイティブ xw_breadcrumb() の ul.breadcrumbs をキャンバスへ寄せる。
   区切りは「›」。ホームアイコン(FontAwesome)は外す。 */
.oym-breadcrumb-row{padding-top:18px;}
.oym-breadcrumb .breadcrumbs,
.oym-breadcrumb ul{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  list-style:none;margin:0;padding:0;
  font-size:var(--oym-fs-xs);line-height:1.8;color:var(--oym-ink-3);
}
.oym-breadcrumb li{display:flex;align-items:center;gap:8px;margin:0;}
/* 親 site.css の `.breadcrumbs > li::before` は区切りを**CSSの箱**で描く
   (width/height .5em + border-top/right 1px + rotate(45deg) + margin)。
   content と color だけ上書きすると箱がそのまま残り、回転した箱の中に
   「›」が入って**マークが2つ**見える(実写でのみ露見・2026-08-17)。
   箱の指定を全て打ち消してから文字の区切りに置き換える。 */
.oym-breadcrumb li + li::before{
  content:"›";color:var(--oym-ink-3);
  width:auto;height:auto;border:0;transform:none;margin:0;
  display:inline;line-height:1;
}
.oym-breadcrumb a{color:var(--oym-ink-3);text-decoration:none;}
.oym-breadcrumb a:hover{color:var(--oym-walnut);text-decoration:underline;}
.oym-breadcrumb li:last-child{color:var(--oym-ink-2);}
.oym-breadcrumb .fas,
.oym-breadcrumb .fa,
.oym-breadcrumb i{display:none;}
/* 親が下部に出すパンくずは使わない(mods.php で none。二重防御) */
.page-bottom-breadcrumbs{display:none;}

/* ==== §4 フッター ========================================================= */
.oym-footer{
  background:var(--oym-footer-bg);color:var(--oym-footer-ink);
  margin-top:0;
}
.oym-footer a{color:var(--oym-footer-ink);text-decoration:none;}
.oym-footer a:hover{color:var(--oym-surface);text-decoration:underline;}

/* トップ: ブランド + 2列リンク(canvas L344) */
.oym-footer__top{
  display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:44px;
  padding-top:44px;padding-bottom:30px;
}
.oym-footer__brandcol{display:flex;flex-direction:column;gap:12px;}
.oym-footer__brandline{display:flex;align-items:center;gap:11px;}
.oym-footer__mark{
  width:26px;height:26px;flex:none;border-radius:var(--oym-r-pill);
  background:var(--oym-footer-mark);
  display:flex;align-items:center;justify-content:center;
}
.oym-footer__mark::before{
  content:"";width:9px;height:9px;border-radius:var(--oym-r-pill);background:var(--oym-footer-bg);
}
.oym-footer__brand{font-size:18px;font-weight:700;color:var(--oym-surface);letter-spacing:.09em;}
.oym-footer__brand a{color:var(--oym-surface);}
.oym-footer__lead{
  font-size:var(--oym-fs-2xs);line-height:1.95;color:var(--oym-footer-ink-2);
  text-wrap:pretty;margin:0;
}
.oym-footer__col{display:flex;flex-direction:column;gap:9px;font-size:var(--oym-fs-small);line-height:1.9;}
.oym-footer__ct{
  font-size:var(--oym-fs-2xs);font-weight:700;letter-spacing:.12em;color:var(--oym-footer-ink-2);
}

/* 記事・カテゴリ: 1行リンク(canvas SP L475-477 の行組みを PC でも使う) */
.oym-footer__row{
  display:flex;flex-wrap:wrap;align-items:center;column-gap:16px;row-gap:9px;
  padding-top:30px;padding-bottom:18px;font-size:var(--oym-fs-small);line-height:1.9;
}
.oym-footer__row .oym-footer__brand{margin-right:6px;}

/* 常設の法的表記(全ページ)— implementation.css 逐語(色は #48392A = --oym-footer-rule) */
.oym-footer__legal{
  border-top:1px solid var(--oym-footer-rule);font-size:var(--oym-fs-2xs);
  line-height:1.9;color:var(--oym-footer-ink-2);
}
.oym-footer__legal-inner{
  display:flex;flex-direction:column;gap:8px;
  padding-top:18px;padding-bottom:30px;
}
.oym-footer__legal p{
  font-size:var(--oym-fs-2xs);line-height:1.9;color:var(--oym-footer-ink-2);
  text-wrap:pretty;margin:0;
}
.oym-footer__copyright{
  font-size:var(--oym-fs-2xs);color:var(--oym-footer-ink-2);padding-top:4px;
}

/* 暗地の上では --oym-ink-3 を使わない(#2F2519 の上で 2.6:1 まで落ちる)。
   フッターの小文字はすべて footer-ink-2(6.6:1)に寄せる。 */
.oym-footer :is(.oym-footer__eyebrow,.oym-footer__copyright,small,.oym-note){
  color:var(--oym-footer-ink-2);
}

/* 親テーマのフッター部品は出さない(子がすべて描く) */
.footer .copyright,
.footer .siteNavList--footer,
.footer .pagetop{display:none;}