/* ========================================================================
   01 / LAYOUT — FOUNDATION, PAGE FRAME, FOOTER
   ======================================================================== */

/*
 * ========================================================================
 * SHARED COLOR SYSTEM
 * ========================================================================
 * サイト共通色はここで一元管理する。
 * 各カテゴリCSSでは原則として直接色を書くのではなく、
 * この共通変数を参照するカテゴリ用変数へ割り当てる。
 *
 * 命名方針:
 *   --color-bg-*       : ページ / 面の背景
 *   --color-text-*     : 本文 / 補助文字
 *   --color-line-*     : 罫線
 *   --color-accent-*   : 青系アクセント
 *   --color-shadow-*   : 影
 *
 * PC実機ではスマホより暗く見えやすかったため、761px以上では
 * 下のPC用overrideで青みと明度を少しだけ上げる。
 * ======================================================================== */
:root{
  --color-bg-page:#020711;
  --color-bg-surface:#07111a;
  --color-bg-surface-2:#0a1823;
  --color-bg-header:rgba(1,5,12,.95);
  --color-bg-breadcrumb:#040b12;

  --color-text-main:#eef6fa;
  --color-text-sub:#9fb0ba;
  --color-text-soft:#839ca8;

  --color-line:rgba(103,184,225,.20);
  --color-line-soft:rgba(255,255,255,.06);

  --color-accent:#8bdcff;
  --color-accent-soft:#b9e8fb;
  --color-accent-muted:#75cbed;

  --color-shadow-panel:rgba(0,0,0,.20);

  /* ---------------------------------------------------------------
   * Component color tokens
   * 共通UI部品の色。部品単位の色調整は原則ここから行う。
   * --------------------------------------------------------------- */
  --color-overlay:rgba(0,0,0,.56);
  --color-overlay-soft:rgba(0,0,0,.46);

  --color-footer-bg:#01050a;
  --color-footer-glow:rgba(38,115,163,.08);
  --color-footer-line:rgba(255,255,255,.07);
  --color-footer-line-soft:rgba(255,255,255,.05);
  --color-footer-title:#dfeaf0;
  --color-footer-text:#8496a1;
  --color-footer-muted:#5f7784;
  --color-footer-link:#9aadb7;
  --color-footer-link-hover:#ccecff;
  --color-footer-copy:#667680;

  --color-skip-bg:#a8e9ff;
  --color-skip-text:#001018;

  --color-nav-brand:#f1f4f5;
  --color-nav-brand-sub:#748590;
  --color-nav-link-hover:#aeeaff;
  --color-nav-active-dot:#77d5fa;
  --color-nav-active-glow:rgba(119,213,250,.65);

  --color-nav-panel-bg-start:rgba(8,22,34,.96);
  --color-nav-panel-bg-end:rgba(3,11,18,.98);
  --color-nav-panel-border:rgba(103,184,225,.18);
  --color-nav-panel-title:#eef9fd;
  --color-nav-panel-kicker:#6eb9dc;
  --color-nav-panel-text:#dcecf3;
  --color-nav-panel-muted:#647e8b;
  --color-nav-panel-accent:#6fc5e8;
  --color-nav-panel-row:#9fb5c0;
  --color-nav-panel-row-current:#eaf9ff;
  --color-nav-panel-row-current-bg:rgba(40,143,195,.12);

  --color-mobile-nav-bg-top:rgba(4,18,25,.992);
  --color-mobile-nav-bg-bottom:rgba(2,10,15,.994);
  --color-mobile-nav-panel:rgba(7,28,35,.96);
  --color-mobile-nav-border:rgba(96,177,199,.25);
  --color-mobile-nav-border-soft:rgba(255,255,255,.055);
  --color-mobile-nav-title:#e2f2f6;
  --color-mobile-nav-text:#adc1c8;
  --color-mobile-nav-muted:#628592;
  --color-mobile-nav-accent:#65bdd3;
  --color-mobile-nav-title-bg-start:rgba(11,37,47,.94);
  --color-mobile-nav-title-bg-end:rgba(5,20,28,.96);
  --color-mobile-nav-title-border:rgba(102,188,211,.18);

  --color-article-h2-text:#dceef4;
  --color-article-h2-border:rgba(92,181,207,.20);
  --color-article-h2-accent:rgba(88,198,224,.78);
  --color-article-h2-bg-start:rgba(9,31,40,.80);
  --color-article-h2-bg-mid:rgba(7,25,34,.66);
  --color-article-h2-bg-end:rgba(5,20,28,.52);
  --color-article-h2-shadow-line:rgba(255,255,255,.015);
  --color-article-h2-shadow:rgba(0,0,0,.08);

  --color-toc-bg-start:rgba(10,30,44,.92);
  --color-toc-bg-end:rgba(5,15,24,.92);
  --color-toc-kicker:#75c5e9;
  --color-toc-title:#eefaff;
  --color-toc-item:#a7bdc8;
  --color-toc-link:#d9edf6;
  --color-toc-link-hover:#9ee7ff;

  --color-page-end-border:rgba(103,184,225,.30);
  --color-page-end-bg:rgba(3,16,27,.92);
  --color-page-end-shadow:rgba(0,0,0,.28);
  --color-page-end-hover:#0c3046;
  --color-page-end-text:#dff7ff;
  --color-page-end-sub:#9dcfe0;
  --color-page-end-hover-text:#e4f8ff;
  --color-page-end-index:#b5dbe8;
  --color-page-end-parent:#829faa;

  /* Shared neutral / secondary UI tones.
   * 主要コンポーネントに属さない細線・補助文字も直書きしない。 */
  --color-white-line-07:rgba(255,255,255,.07);
  --color-white-line-06:rgba(255,255,255,.06);
  --color-white-line-055:rgba(255,255,255,.055);
  --color-white-line-05:rgba(255,255,255,.05);
  --color-white-line-045:rgba(255,255,255,.045);
  --color-white-line-04:rgba(255,255,255,.04);
  --color-white-line-035:rgba(255,255,255,.035);
  --color-white-surface-02:rgba(255,255,255,.02);
  --color-white-surface-018:rgba(255,255,255,.018);

  --color-breadcrumb-separator:#607987;
  --color-mobile-info-kicker:#76bddf;
  --color-mobile-info-title:#f2f9fc;
  --color-mobile-info-text:#dcebf2;
  --color-mobile-info-index:#9ce3ff;

  --color-control-border:rgba(103,184,225,.22);
  --color-control-text:#edf8fc;
  --color-control-bg:var(--color-white-surface-02);

  --color-card-border:rgba(96,174,214,.13);
  --color-card-bg:var(--color-white-surface-018);
  --color-card-title:#e8f5fa;
  --color-card-text:#8da5b1;

  --color-global-nav-text:#cbd0d8;
  --color-global-nav-muted:#6f7e89;
  --color-global-nav-current:#d9f5ff;
  --color-global-nav-glow:rgba(102,213,255,.20);
  --color-global-nav-menu-border:rgba(83,174,220,.30);
  --color-global-nav-menu-bg:rgba(2,8,15,.985);
  --color-global-nav-menu-shadow:rgba(0,0,0,.52);
  --color-global-nav-menu-glow:rgba(36,133,191,.08);
  --color-global-nav-section:#b9cbd4;
  --color-global-nav-heading:#eefbff;
  --color-global-nav-heading-bg:rgba(42,151,207,.18);
  --color-global-nav-link:#bad5df;
  --color-global-nav-link-muted:#728996;
  --color-global-nav-accent:#75c9e9;
  --color-global-nav-trail:#667f8a;
  --color-global-nav-trail-link:#a8dce8;

  --color-heading-h1:#eefbff;
  --color-section-line:rgba(103,184,225,.20);
  --color-meta-line:rgba(103,184,225,.12);
  --color-meta-text:#758d99;
  --color-page-end-top-line:rgba(103,184,225,.13);
  --color-responsive-text:#dcecf4;

  --color-drawer-border:rgba(88,181,205,.30);
  --color-drawer-close-border:rgba(103,184,208,.22);
  --color-drawer-close-text:#b9d9e2;
  --color-drawer-current-bg-start:rgba(48,154,177,.11);
  --color-drawer-current-bg-end:rgba(32,100,117,.025);
  --color-drawer-current-title:#eefbff;
  --color-drawer-row-text:#cfe2e8;
  --color-drawer-heading:#e5f6fa;

  --color-ad-placeholder-border:#566b78;
  --color-ad-placeholder-text:#738996;

  /* 既存CSSとの互換エイリアス。徐々にsemantic名へ移行可能。 */
  --bg:var(--color-bg-page);
  --panel:var(--color-bg-surface);
  --ink:var(--color-text-main);
  --muted:var(--color-text-sub);
  --line:var(--color-line);
  --accent:var(--color-accent);


  /* ---------------------------------------------------------------
   * SHARED DARK CATEGORY / INFORMATION NAV TOKENS
   * 黒背景カテゴリの共通配色と「情報ナビ」部品の色。
   * Informationカテゴリで確立した色を共通基準にする。
   * --------------------------------------------------------------- */
  /*
   * Informationカテゴリ固有色も共通色を基準にする。
   * ここをカテゴリ用の「受け口」にすることで、全体テーマ変更時は
   * core.css側、Informationだけの変更時はこのブロックだけを触ればよい。
   */
  --info-accent:var(--color-accent-muted);
  --info-accent-soft:var(--color-accent-soft);
  --info-line:var(--color-line);
  --info-panel:var(--color-bg-surface);
  --info-panel-2:var(--color-bg-surface-2);
  --info-text:var(--color-text-sub);
  --info-text-soft:var(--color-text-soft);

  /* Article headings */
  --info-h1:#eefbff;
  --info-h2-text:#dceef4;
  --info-h2-line:rgba(92,181,207,.20);
  --info-h2-accent:rgba(88,198,224,.78);
  --info-h2-bg-start:rgba(9,31,40,.80);
  --info-h2-bg-end:rgba(5,20,28,.52);
  --info-h2-shadow-line:rgba(255,255,255,.015);
  --info-h2-shadow:rgba(0,0,0,.08);

  /* Hub cards */
  --info-card-bg-start:rgba(11,30,44,.94);
  --info-card-bg-end:rgba(4,13,21,.96);
  --info-card-hover-line:rgba(105,203,239,.50);
  --info-card-hover-bg-start:rgba(14,41,59,.98);
  --info-card-hover-bg-end:rgba(5,17,27,.98);
  --info-card-number:#589dc0;
  --info-card-title:#e9f7fd;

  /* Desktop Information nav */
  --info-nav-frame-border:rgba(103,177,199,.30);
  --info-nav-frame-bg-start:rgba(5,21,28,.975);
  --info-nav-frame-bg-end:rgba(2,11,16,.992);
  --info-nav-frame-inner-line:rgba(111,199,220,.05);
  --info-nav-title-line:rgba(97,181,203,.18);
  --info-nav-title-bg-start:rgba(11,37,47,.88);
  --info-nav-title-bg-end:rgba(5,20,28,.72);
  --info-nav-kicker:#668b98;
  --info-nav-title:#e6f6fa;
  --info-nav-panel-border:rgba(96,177,199,.22);
  --info-nav-panel-bg-start:rgba(7,28,35,.84);
  --info-nav-panel-bg-end:rgba(3,14,20,.93);

  /* Mobile Information nav panels */
  --info-mobile-panel-border:var(--color-mobile-nav-border);
  --info-mobile-panel-bg-start:var(--color-mobile-nav-panel);
  --info-mobile-panel-bg-end:rgba(3,14,20,.985);
  --info-mobile-panel-inner-line:rgba(111,199,220,.045);
  --info-mobile-panel-title-line:rgba(255,255,255,.055);
  --info-mobile-panel-kicker:#628592;
  --info-mobile-panel-title:#e2f2f6;
  --info-mobile-panel-text:#adc1c8;
  --info-mobile-panel-accent:#65bdd3;
  --info-mobile-panel-current:#f0fbff;
  --info-mobile-panel-current-bg-start:rgba(48,154,177,.18);
  --info-mobile-panel-current-bg-end:rgba(32,100,117,.035);
  --info-mobile-panel-current-line:#61c5da;

  /* Category page scroll */
  --info-scroll-label:#6f929e;
  --info-scroll-border:rgba(96,177,199,.18);
  --info-scroll-bg:rgba(2,12,17,.58);
  --info-scroll-row-line:rgba(255,255,255,.045);
  --info-scroll-text:#91abb5;
  --info-scroll-relation:#52727e;
  --info-scroll-relation-near:#6fa7b7;
  --info-scroll-relation-current:#9ee6f7;
  --info-scroll-hover-text:#dff6fc;
  --info-scroll-hover-bg:rgba(47,137,160,.08);
  --info-scroll-current-text:#f0fbff;
  --info-scroll-current-bg-start:rgba(48,154,177,.22);
  --info-scroll-current-bg-end:rgba(32,100,117,.05);
  --info-scroll-current-line:#61c5da;
  --info-scroll-index:#b5dbe8;
  --info-scroll-index-hover:#e4f8ff;

  /* Secondary / structural tones used by Information components. */
  --info-line-white-065:rgba(255,255,255,.065);
  --info-line-white-055:rgba(255,255,255,.055);
  --info-line-white-05:rgba(255,255,255,.05);
  --info-surface-white-018:rgba(255,255,255,.018);
  --info-surface-white-016:rgba(255,255,255,.016);
  --info-surface-white-012:rgba(255,255,255,.012);

  --info-box-border:rgba(76,171,194,.28);
  --info-box-bg-start:rgba(6,27,34,.92);
  --info-box-bg-end:rgba(4,15,22,.97);
  --info-box-hover-border:rgba(91,211,232,.55);
  --info-box-hover-bg-start:rgba(8,39,48,.97);
  --info-box-hover-bg-end:rgba(5,18,26,.98);

  --info-side-frame-border:rgba(103,177,199,.28);
  --info-side-frame-bg-start:rgba(7,27,34,.965);
  --info-side-shadow:rgba(0,0,0,.16);
  --info-side-inner-line:rgba(111,199,220,.055);
  --info-side-accent:rgba(139,233,248,.72);
  --info-side-accent-glow:rgba(93,204,226,.22);
  --info-side-kicker:#668996;
  --info-side-title:#e5f6fa;
  --info-side-text:#a9c0c8;
  --info-side-link:#67bfd6;
  --info-side-link-bg:rgba(42,149,171,.13);
  --info-side-feature-border:rgba(93,175,197,.15);
  --info-side-feature-bg:var(--info-surface-white-012);
  --info-side-muted:#7f99a3;
  --info-side-accent-2:#6fc7df;
  --info-side-soft:#5f8390;
  --info-side-index-line:rgba(98,189,210,.12);
  --info-side-index-text:#d9f2f8;
  --info-side-index-bg:rgba(51,150,171,.09);

  --info-nav-shadow:rgba(0,0,0,.18);
  --info-nav-panel-shadow:var(--info-h2-shadow);
  --info-nav-label:#7896a1;
  --info-nav-muted:#587985;
  --info-nav-link:#9ed5e3;
  --info-nav-soft:#456572;

  --info-mobile-shadow:rgba(0,0,0,.12);
  --info-mobile-feature-border:rgba(94,174,196,.13);
  --info-mobile-feature-bg:var(--info-surface-white-012);
  --info-mobile-feature-title:#dcecf1;
  --info-mobile-feature-muted:#7f98a2;
  --info-mobile-feature-accent:#6fc3da;
  --info-mobile-feature-soft:#5d8897;
  --info-mobile-index-line:rgba(98,189,210,.14);
  --info-mobile-index-bg:rgba(51,150,171,.11);
  --info-mobile-title-line:rgba(97,181,203,.20);

  /* Light article heading palette (legacy-compatible article heading variant). */
  --info-light-h2-text:#132833;
  --info-light-h2-border:rgba(190,223,238,.86);
  --info-light-h2-accent:#4d9fd0;
  --info-light-h2-bg-start:rgba(222,235,242,.96);
  --info-light-h2-bg-mid:rgba(195,220,233,.91);
  --info-light-h2-bg-end:rgba(158,199,220,.82);

  --max:1240px;
}

/*
 * PC向け微調整版。
 * 黒基調は維持しつつ、背景面をわずかに青寄り・明るめにする。
 * スマホ表示は従来色を維持する。
 */
@media (min-width:761px){
  :root{
    --color-bg-page:#06101c;
    --color-bg-surface:#0b1b2a;
    --color-bg-surface-2:#10243a;
    --color-bg-header:rgba(4,13,24,.96);
    --color-bg-breadcrumb:#081521;

    --color-text-main:#f2f8fc;
    --color-text-sub:#aec2cf;
    --color-text-soft:#91a9b6;

    --color-line:rgba(112,194,235,.26);
    --color-line-soft:rgba(170,218,240,.09);

    --color-accent:#9adfff;
    --color-accent-soft:#c5edff;
    --color-accent-muted:#82d0f1;

    --color-shadow-panel:rgba(0,0,0,.16);

    /* Informationで確立したPC向け暗色パレットを共通化。 */
    --info-panel:#0d2132;
    --info-panel-2:#112b40;
    --info-line:rgba(112,194,225,.30);

    --info-card-bg-start:rgba(10,38,52,.95);
    --info-card-bg-end:rgba(7,23,35,.98);
    --info-card-hover-bg-start:rgba(13,50,67,.98);
    --info-card-hover-bg-end:rgba(8,28,41,.99);

    --info-nav-frame-bg-start:rgba(9,31,44,.985);
    --info-nav-frame-bg-end:rgba(5,19,29,.995);
    --info-nav-panel-bg-start:rgba(10,36,47,.975);
    --info-nav-panel-bg-end:rgba(5,21,30,.99);
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Yu Gothic","Noto Sans JP",sans-serif;line-height:1.9}
a{color:inherit}
.container{width:min(var(--max),calc(100% - 40px));margin-inline:auto}


/* Main page frame */
.site-main{padding:34px 0 0}
.page-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:34px;align-items:start}
.article-main{min-width:0}


/* Shared ad / footer base */
.ad-placeholder{margin-top:12px;padding:18px;border:1px dashed var(--color-ad-placeholder-border);text-align:center;color:var(--color-ad-placeholder-text);font-size:10px}


/* ==========================================================================
   FINISHED FOOTER
   TOPページの簡潔なfooterに合わせた見た目。
   ========================================================================== */
.site-footer{
  margin-top:42px;
  padding:34px 0 22px;
  border-top:1px solid var(--color-white-line-07);
  background:
    radial-gradient(circle at 12% 0,var(--color-footer-glow),transparent 26%),
    var(--color-footer-bg);
}
.site-footer-grid{
  display:grid!important;
  grid-template-columns:1fr auto;
  gap:18px 28px;
  align-items:end;
}
.site-footer-name{
  color:var(--color-footer-title);
  font:400 21px Georgia,serif;
  letter-spacing:.10em;
}
.site-footer-brand p{
  margin:6px 0 0;
  color:var(--color-footer-text);
  font-size:10px;
  line-height:1.6;
}
.site-footer-brand .site-footer-since{
  margin-top:3px;
  color:var(--color-footer-muted);
  font-size:9px;
  letter-spacing:.08em;
}
.site-footer-nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px 18px;
}
.site-footer-nav a{
  color:var(--color-footer-link);
  font-size:9px;
  letter-spacing:.11em;
  text-decoration:none;
  transition:color .18s ease;
}
.site-footer-nav a:hover{color:var(--color-footer-link-hover)}
.site-footer-copy{
  grid-column:1/-1;
  padding-top:14px;
  border-top:1px solid var(--color-white-line-05);
  color:var(--color-footer-copy);
  font-size:9px;
}

.skip-link{
  position:fixed;
  left:10px;
  top:10px;
  z-index:1000;
  padding:8px 12px;
  transform:translateY(-160%);
  color:var(--color-skip-text);
  background:var(--color-skip-bg);
  text-decoration:none;
}
.skip-link:focus{transform:none}


/* ========================================================================
   02 / NAVIGATION — HEADER, BREADCRUMB, SITE NAV, INFORMATION NAV
   ======================================================================== */

/* Header / brand / header actions base */
.site-header{position:sticky;top:0;z-index:100;background:var(--color-bg-header);border-bottom:1px solid var(--line)}
.header-inner{min-height:68px;display:flex;align-items:center;gap:24px}
.brand{margin-right:auto;text-decoration:none;font-family:Georgia,serif;letter-spacing:.1em}
.header-search{text-decoration:none;color:var(--color-text-sub)}
.info-nav-button{display:none}


/* Breadcrumb base */
.breadcrumb{border-bottom:1px solid var(--line);background:var(--color-bg-breadcrumb)}
.breadcrumb ol{
  display:flex;
  flex-wrap:wrap;
  gap:6px 10px;
  margin:0;
  padding:10px 0;
  list-style:none;
  font-size:12px;
  color:var(--color-text-sub);
}
.breadcrumb li{min-width:0}
.breadcrumb li:not(:last-child)::after{content:"›";margin-left:10px;color:var(--color-breadcrumb-separator)}
.breadcrumb li[aria-current="page"]{
  max-width:100%;
  overflow-wrap:anywhere;
  word-break:normal;
  line-height:1.55;
}
.breadcrumb a{text-decoration:none}


/* Generic desktop information-nav base */
.info-nav{position:sticky;top:92px}
.info-nav-box{display:grid;gap:10px;padding:18px;border:1px solid var(--line);background:var(--panel)}
.info-nav-box h2{margin:0;font:400 20px Georgia,serif}
.info-nav-label{font-size:9px;letter-spacing:.16em;color:var(--accent)}
.info-nav-box a{font-size:12px;text-decoration:none;border-top:1px solid var(--color-line-soft);padding-top:9px}


/* Generic mobile information-nav content */
/* モバイル情報ナビ：背景レイヤーと内部コンテンツ固有レイアウト */
.mobile-info-nav-backdrop{
  position:fixed;
  inset:68px 0 0;
  z-index:190;
  background:var(--color-overlay);
  backdrop-filter:blur(2px);
}
.mobile-info-nav-body{
  display:grid;
  gap:0;
  padding:8px 18px 18px;
}
.mobile-info-nav-current{
  display:grid;
  gap:3px;
  padding:14px 0 16px;
  border-bottom:1px solid var(--color-white-line-07);
}
.mobile-info-nav-current span,
.mobile-info-nav-body a small{
  color:var(--color-mobile-info-kicker);
  font-size:9px;
  letter-spacing:.14em;
}
.mobile-info-nav-current strong{
  color:var(--color-mobile-info-title);
  font:400 18px/1.45 Georgia,"Yu Mincho",serif;
}
.mobile-info-nav-body a{
  display:grid;
  gap:3px;
  padding:14px 2px;
  border-bottom:1px solid var(--color-white-line-07);
  color:var(--color-mobile-info-text);
  text-decoration:none;
  font-size:13px;
  line-height:1.55;
}
.mobile-info-nav-index{color:var(--color-mobile-info-index)!important}


/* ==========================================================================
   MOBILE GLOBAL NAV
   TOPページと同じ「1列・各カテゴリを開くアコーディオン」。
   ========================================================================== */
.brand{display:grid;gap:4px}
.brand-name{color:var(--color-nav-brand);font:400 18px/1 Georgia,serif;letter-spacing:.13em}
.brand-jp{color:var(--color-nav-brand-sub);font-size:8px;letter-spacing:.20em}
.header-actions{display:flex;align-items:center;gap:8px}

.global-nav a{
  position:relative;
  padding:24px 2px 22px;
  transition:color .18s ease;
}
.global-nav a:hover,.global-nav a.is-current{color:var(--color-nav-link-hover)}
.global-nav a.is-current::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:12px;
  height:1px;
  background:var(--color-nav-active-dot);
  box-shadow:0 0 8px var(--color-nav-active-glow);
}

.global-menu-button{
  display:none;
  width:38px;
  height:34px;
  border:1px solid var(--color-control-border);
  border-radius:4px;
  color:var(--color-control-text);
  background:var(--color-white-surface-02);
  font-size:20px;
  line-height:1;
}

/* ==========================================================================
   MOBILE GLOBAL NAV BACKDROP
   グローバルナビ領域外をタップして閉じるための背景レイヤー。
   ========================================================================== */
.mobile-global-nav-backdrop{
  position:fixed;
  inset:68px 0 0;
  z-index:160;
  background:var(--color-overlay-soft);
  backdrop-filter:blur(1px);
  -webkit-backdrop-filter:blur(1px);
}

.mobile-global-nav-backdrop[hidden]{
  display:none!important;
}

/* ==========================================================================
   DESKTOP INFORMATION NAV - HEIGHT AWARE
   ========================================================================== */
.info-nav{align-self:start}

.info-nav-box{
  position:sticky;
  top:88px;
  max-height:calc(100dvh - 108px);
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  padding:15px 14px 16px;
  border:1px solid var(--color-nav-panel-border);
  border-radius:7px;
  background:linear-gradient(160deg,var(--color-nav-panel-bg-start),var(--color-nav-panel-bg-end));
  box-shadow:0 12px 28px var(--color-shadow-panel);
}

.info-nav-main-title{
  padding:2px 2px 12px;
  border-bottom:1px solid var(--color-white-line-06);
}
.info-nav-main-title span{
  display:block;
  margin-bottom:2px;
  color:var(--color-nav-panel-kicker);
  font-size:8px;
  letter-spacing:.16em;
}
.info-nav-main-title strong{
  display:block;
  color:var(--color-nav-panel-title);
  font:500 18px/1.4 "Noto Serif JP","Yu Mincho",Georgia,serif;
}

.info-nav-section{
  padding:9px 0 0;
  border-bottom:1px solid var(--color-white-line-055);
}
.info-nav-section:last-child{border-bottom:0}

.info-nav-section-toggle,
.info-nav-section-heading{
  position:relative;
  display:block;
  width:100%;
  padding:4px 26px 7px 1px;
  border:0;
  color:var(--color-nav-panel-text);
  background:none;
  text-align:left;
}
.info-nav-section-toggle{cursor:pointer}
.info-nav-section-toggle > span,
.info-nav-section-heading > span{
  display:block;
  font-size:11px;
  font-weight:700;
}
.info-nav-section-toggle > small,
.info-nav-section-heading > small{
  display:block;
  margin-top:1px;
  color:var(--color-nav-panel-muted);
  font-size:7px;
  letter-spacing:.13em;
}
.info-nav-section-toggle::after{
  content:"−";
  position:absolute;
  right:3px;
  top:7px;
  color:var(--color-nav-panel-accent);
  font-size:14px;
}
.info-nav-section.is-collapsed > .info-nav-section-toggle::after{content:"+"}

.info-nav-section-body{
  display:block;
  padding:0 0 9px;
}
.info-nav-section.is-collapsed > .info-nav-section-body{display:none}
.info-nav-page-nav .info-nav-section-body{display:block!important}

.info-nav-card{
  display:block;
  padding:8px 9px;
  border:1px solid var(--color-card-border);
  border-radius:4px;
  background:var(--color-white-surface-018);
  text-decoration:none;
}
.info-nav-card strong{
  display:block;
  margin-bottom:3px;
  color:var(--color-card-title);
  font-size:10px;
  line-height:1.45;
}
.info-nav-card span{
  display:block;
  color:var(--color-card-text);
  font-size:9px;
  line-height:1.55;
}
.info-nav-row{
  display:block;
  padding:7px 7px;
  border-bottom:1px solid var(--color-white-line-04);
  color:var(--color-nav-panel-row);
  text-decoration:none;
  font-size:9px;
  line-height:1.45;
}
.info-nav-row:last-child{border-bottom:0}
.info-nav-row:hover,
.info-nav-card:hover{
  color:var(--color-nav-panel-row-current);
  background:linear-gradient(90deg,var(--color-nav-panel-row-current-bg),transparent);
}


/* ==========================================================================
   DESKTOP INFORMATION SIDEBAR ACCORDION
   カテゴリ内移動ナビと重要なお知らせは常時表示。
   関連ページ / 最新更新だけを初期状態で閉じ、必要時に展開する。
   ========================================================================== */
.information-side-accordion-toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
  border:0;
  background:none;
  color:inherit;
  text-align:left;
  cursor:pointer;
}

.information-side-accordion-toggle > span{
  min-width:0;
}

.information-side-accordion-toggle strong{
  display:block;
  color:var(--info-side-title);
  font:500 17px/1.4 "Noto Serif JP","Yu Mincho",Georgia,serif;
}

.information-side-accordion-icon{
  flex:0 0 auto;
  min-width:1em;
  color:var(--info-side-link);
  font-size:15px;
  font-weight:400;
  line-height:1;
  text-align:center;
}

.information-side-accordion-icon::before{
  content:"＋";
}

.information-side-accordion:not(.is-collapsed) .information-side-accordion-icon::before{
  content:"−";
}

.information-side-accordion-body[hidden]{
  display:none!important;
}

.information-side-accordion:not(.is-collapsed) .information-side-accordion-body{
  display:block;
}

/* ==========================================================================
   PC GLOBAL NAV
   TOPページと同じ思想のカテゴリ・ドロップダウン。
   hover / keyboard focus / click のいずれでも開ける。
   ========================================================================== */
.desktop-nav{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  min-width:0;
}

.desktop-nav-item{
  position:relative;
  display:flex;
  align-items:center;
}

.desktop-nav-trigger{
  position:relative;
  display:block;
  padding:10px 2px 9px;
  border:0;
  color:var(--color-global-nav-text);
  background:none;
  font-family:"Noto Sans JP","Yu Gothic",sans-serif;
  font-size:9px;
  line-height:1.25;
  letter-spacing:.035em;
  white-space:nowrap;
  cursor:pointer;
  transition:color .18s ease;
}

.desktop-nav-trigger > span{
  display:block;
  margin-top:3px;
  color:var(--color-global-nav-muted);
  font-size:7px;
  letter-spacing:.11em;
}

.desktop-nav-item:hover > .desktop-nav-trigger,
.desktop-nav-item:focus-within > .desktop-nav-trigger,
.desktop-nav-item.is-dropdown-open > .desktop-nav-trigger{
  color:var(--color-nav-link-hover);
}

.desktop-nav-item-amatea > .desktop-nav-trigger{
  color:var(--color-global-nav-current);
  text-shadow:0 0 8px var(--color-global-nav-glow);
}

.desktop-nav-dropdown{
  position:absolute;
  top:calc(100% + 5px);
  left:50%;
  z-index:180;
  min-width:230px;
  max-width:320px;
  padding:7px;
  border:1px solid var(--color-global-nav-menu-border);
  border-radius:6px;
  background:var(--color-global-nav-menu-bg);
  box-shadow:
    0 16px 38px var(--color-global-nav-menu-shadow),
    0 0 22px var(--color-global-nav-menu-glow);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translate(-50%,-5px);
  transition:opacity .18s ease,visibility .18s ease,transform .18s ease;
}

.desktop-nav-dropdown-wide{
  min-width:280px;
}

.desktop-nav-dropdown::before{
  content:"";
  position:absolute;
  left:50%;
  top:-5px;
  width:8px;
  height:8px;
  border-left:1px solid var(--color-global-nav-menu-border);
  border-top:1px solid var(--color-global-nav-menu-border);
  background:var(--color-global-nav-menu-bg);
  transform:translateX(-50%) rotate(45deg);
}

.desktop-nav-item:hover > .desktop-nav-dropdown,
.desktop-nav-item:focus-within > .desktop-nav-dropdown,
.desktop-nav-item.is-dropdown-open > .desktop-nav-dropdown{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate(-50%,0);
}

.desktop-nav-dropdown a{
  display:block;
  padding:9px 10px;
  border-bottom:1px solid var(--color-white-line-055);
  color:var(--color-global-nav-section);
  text-decoration:none;
  font-size:10px;
  line-height:1.45;
  white-space:normal;
  transition:background .18s ease,color .18s ease,padding-left .18s ease;
}
.desktop-nav-dropdown a:last-child{border-bottom:0}
.desktop-nav-dropdown a:hover,
.desktop-nav-dropdown a:focus-visible{
  padding-left:14px;
  color:var(--color-global-nav-heading);
  background:linear-gradient(90deg,var(--color-global-nav-heading-bg),transparent);
}

.desktop-nav-subgroup{
  border-bottom:1px solid var(--color-white-line-055);
}
.desktop-nav-subgroup:last-child{border-bottom:0}

.desktop-nav-subtrigger{
  position:relative;
  width:100%;
  padding:10px 30px 10px 10px;
  border:0;
  color:var(--color-global-nav-link);
  background:none;
  text-align:left;
  cursor:pointer;
}
.desktop-nav-subtrigger > span{
  display:block;
  font-size:9px;
  letter-spacing:.11em;
}
.desktop-nav-subtrigger > small{
  display:block;
  margin-top:2px;
  color:var(--color-global-nav-link-muted);
  font-size:8px;
}
.desktop-nav-subtrigger::after{
  content:"+";
  position:absolute;
  right:9px;
  top:50%;
  color:var(--color-global-nav-accent);
  font-size:14px;
  transform:translateY(-50%);
}
.desktop-nav-subgroup.is-open > .desktop-nav-subtrigger::after{content:"−"}

.desktop-nav-subpanel{
  padding:0 0 6px 8px;
}


.mobile-info-nav[hidden],.mobile-info-nav-backdrop[hidden]{display:none!important}

/* ==========================================================================
   SEARCH PLACEHOLDER
   Typesense正式公開前は、ヘッダー上の将来用レイアウト枠だけ確保する。
   文字は見せず、クリック／フォーカスも不可。
   ========================================================================== */
.header-search-placeholder{
  display:inline-block;
  min-width:48px;
  visibility:hidden;
  pointer-events:none;
  user-select:none;
}

/* ==========================================================================
   GENERIC PAGE NAV HEADING TRAIL - BREADCRUMB STYLE
   ========================================================================== */
.info-nav-page-nav .info-nav-section-heading .page-nav-heading-trail{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  width:100%;
  gap:0;
  margin-top:4px;
  color:var(--color-global-nav-trail);
  font-size:8px;
  font-style:normal;
  font-weight:400;
  line-height:1.45;
}

.info-nav-page-nav .info-nav-section-heading .page-nav-heading-trail a{
  color:inherit;
  text-decoration:none;
}

.info-nav-page-nav .info-nav-section-heading .page-nav-heading-trail a:hover,
.info-nav-page-nav .info-nav-section-heading .page-nav-heading-trail a:focus-visible{
  color:var(--color-global-nav-trail-link);
  text-decoration:underline;
  text-underline-offset:2px;
}

/* ==========================================================================
   MOBILE NAV DRAWER DESIGN SYSTEM
   サイトナビ / 情報ナビの「外枠・ヘッダー・閉じるボタン・スクロールbody」
   をCSS1(core.css)で共通管理する。
   各ナビ固有のリスト / カード / パネル表現だけを個別ルールに残す。
   ========================================================================== */
:root{
  --mobile-nav-bg-top:var(--color-mobile-nav-bg-top);
  --mobile-nav-bg-bottom:var(--color-mobile-nav-bg-bottom);
  --mobile-nav-panel:var(--color-mobile-nav-panel);
  --mobile-nav-border:var(--color-mobile-nav-border);
  --mobile-nav-border-soft:var(--color-mobile-nav-border-soft);
  --mobile-nav-title:var(--color-mobile-nav-title);
  --mobile-nav-text:var(--color-mobile-nav-text);
  --mobile-nav-muted:var(--color-mobile-nav-muted);
  --mobile-nav-accent:var(--color-mobile-nav-accent);
  --mobile-nav-width:390px;
}


/* ========================================================================
   03 / ARTICLE — TYPOGRAPHY, TOC, META, ARTICLE-END NAV
   ======================================================================== */

/* ==========================================================================
   ARTICLE BASE / CSS1 COMMON
   記事専用の指定も page-type クラスで限定してCSS1内に置く。
   ========================================================================== */
.page-type-article #pagebody{
  max-width:860px;
  color:var(--color-text-sub);
}

.page-type-article #pagebody > p,
.page-type-article #pagebody section > p{
  line-height:2;
}
.page-type-article #pagebody > h1,
.page-type-article #pagebody h1{
  margin:0 0 28px !important;
  padding:0 !important;
  color:var(--color-heading-h1) !important;
  background:none !important;
  font-family:"Noto Serif JP","Yu Mincho","Hiragino Mincho ProN","Hiragino Mincho Pro",Georgia,serif !important;
  font-size:clamp(28px,4vw,42px) !important;
  font-weight:400 !important;
  line-height:1.45 !important;
  letter-spacing:.015em !important;
}

/*
 * H2:
 * 旧ANIMA MYSTICAの淡い青灰色系の印象を踏まえた配色。
 * 真っ白ではなく、本文の黒背景から浮きすぎないようにする。
 */
.page-type-article #pagebody > h2,
.page-type-article #pagebody h2{
  display:block !important;
  width:100% !important;
  margin:45px 0 16px !important;
  padding:10px 15px 11px !important;
  border:1px solid var(--color-article-h2-border) !important;
  border-left:3px solid var(--color-article-h2-accent) !important;
  border-radius:2px !important;
  color:var(--color-article-h2-text) !important;
  background:linear-gradient(
      90deg,
      var(--color-article-h2-bg-start),
      var(--color-article-h2-bg-mid) 48%,
      var(--color-article-h2-bg-end) 70%,
      transparent
    ) !important;
  box-shadow:
    inset 0 1px var(--color-article-h2-shadow-line),
    0 8px 28px var(--color-article-h2-shadow) !important;
  font-family:"Noto Serif JP","Yu Mincho","Hiragino Mincho ProN","Hiragino Mincho Pro",Georgia,serif !important;
  font-size:22px !important;
  font-weight:500 !important;
  line-height:1.45 !important;
  letter-spacing:.02em !important;
}

.page-type-article #pagebody p{margin:0 0 1.25em}
.page-type-article #pagebody img{max-width:100%;height:auto}
.center{text-align:center}
.font12{font-size:12px}
.imgboxr{float:right;max-width:280px;margin:0 0 18px 24px}
.hrsprtper100w{clear:both;border:0;border-top:1px solid var(--color-section-line);margin:36px 0}

/* ==========================================================================
   AUTO TABLE OF CONTENTS
   ========================================================================== */
.article-toc{
  margin:24px 0 34px;
  padding:18px 20px;
  border:1px solid var(--color-section-line);
  border-radius:5px;
  background:linear-gradient(145deg,var(--color-toc-bg-start),var(--color-toc-bg-end));
}
.article-toc-label{
  display:block;
  margin-bottom:3px;
  color:var(--color-toc-kicker);
  font-size:9px;
  letter-spacing:.16em;
}
.article-toc-title{
  margin:0 0 11px;
  color:var(--color-toc-title);
  font:400 20px/1.4 Georgia,"Yu Mincho",serif;
}
.article-toc ol{margin:0;padding-left:1.45em}
.article-toc li{margin:6px 0;color:var(--color-toc-item)}
.article-toc a{
  color:var(--color-toc-link);
  text-decoration:none;
  font-size:13px;
  line-height:1.55;
}
.article-toc a:hover{
  color:var(--color-toc-link-hover);
  text-decoration:underline;
  text-underline-offset:3px;
}
.article-toc .toc-level-3{margin-left:1em;font-size:.94em}
#pagebody h2[id],
#pagebody h3[id]{scroll-margin-top:94px}

/* ==========================================================================
   ARTICLE META DATES / BACK TO TOP
   ========================================================================== */
.article-meta-dates{
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
  margin-top:38px;
  padding-top:14px;
  border-top:1px solid var(--color-meta-line);
  color:var(--color-meta-text);
  font-size:10px;
}

.back-to-top{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:140;
  width:42px;
  height:42px;
  border:1px solid var(--color-page-end-border);
  border-radius:50%;
  color:var(--color-page-end-text);
  background:var(--color-page-end-bg);
  box-shadow:0 8px 24px var(--color-page-end-shadow);
  cursor:pointer;
}
.back-to-top:hover{
  background:var(--color-page-end-hover);
}

/* ==========================================================================
   FINAL PAGE-END TEXT NAV
   通常ページは「前へ / INDEXへ戻る / 上位へ戻る / 次へ」。
   hub/indexは「上位へ戻る」のみ。カード化せず文字リンクで統一する。
   ========================================================================== */
.page-end-text-nav{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(220px,.9fr) minmax(0,1fr);
  gap:20px;
  margin-top:34px;
  padding:16px 0 18px;
  border-top:1px solid var(--color-page-end-top-line);
}

.page-end-text-nav a{
  display:inline;
  padding:0;
  border:0;
  background:none;
  box-shadow:none;
  color:var(--color-page-end-sub);
  text-decoration:none;
  font-size:11px;
  line-height:1.7;
}

.page-end-text-nav a:hover,
.page-end-text-nav a:focus-visible{
  color:var(--color-page-end-hover-text);
  text-decoration:underline;
  text-underline-offset:3px;
}

.page-end-text-nav-prev{text-align:left}
.page-end-text-nav-center{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  text-align:center;
}
.page-end-text-nav-index{color:var(--color-page-end-index)!important}
.page-end-text-nav-parent{color:var(--color-page-end-parent)!important}
.page-end-text-nav-next{text-align:right}


/* ========================================================================
   04 / RESPONSIVE — COMPACT, MEDIUM, WIDE, COMPACT-LANDSCAPE
   ======================================================================== */

/* ==========================================================================
   RESPONSIVE SYSTEM
   ANIMA MYSTICA 共通ブレークポイント

   TIER 1  COMPACT            : width <= 760px
   TIER 2  MEDIUM             : 761px - 1100px
   TIER 3  WIDE               : width >= 1101px
   TIER 4  COMPACT-LANDSCAPE  : landscape / height <= 800px / width <= 1100px

   端末名ではなく、レイアウトが成立する表示領域で分類する。
   COMPACT-LANDSCAPE は MEDIUM 幅に入るスマホ横画面を上書きするため、
   必ず最後に定義する。
   ========================================================================== */

/* ==========================================================================
   TIER 1 + TIER 4 SHARED MOBILE PRESENTATION
   縦スマホと横スマホで共通する「モバイルUI」の見た目。
   ========================================================================== */
@media (max-width:760px),
       (orientation:landscape) and (max-height:800px) and (max-width:1100px){
.desktop-nav,.header-search{display:none}
  .global-menu-button{display:block}
  .info-nav-button{
    display:block;
    margin-left:auto;
    padding:7px 10px;
    border:1px solid var(--line);
    border-radius:4px;
    color:var(--color-responsive-text);
    background:none;
  }

  .header-inner{gap:10px}
  .brand-name{font-size:15px}
  .brand-jp{font-size:7px}

  .page-layout{grid-template-columns:1fr}
  .info-nav{display:none}

  .page-type-article #pagebody > h2,
  .page-type-article #pagebody h2{
    margin-top:36px !important;
    padding:10px 12px 11px !important;
    color:var(--color-article-h2-text) !important;
    font-size:22px !important;
  }

  .article-toc{
    margin:20px 0 28px;
    padding:15px 16px;
  }
  .article-toc a{font-size:12.5px}

  .imgboxr{
    float:none;
    max-width:100%;
    margin:18px auto;
  }

  .site-footer-grid{grid-template-columns:1fr}
  .site-footer-nav{justify-content:flex-start}

.back-to-top{
    right:12px;
    bottom:12px;
    width:40px;
    height:40px;
  }


.page-end-text-nav{
    grid-template-columns:1fr;
    /* 次へ→前へは近く、前へ→INDEXは一段広く見せる。 */
    gap:0;
    margin-top:26px;
    padding:14px 0 16px;
  }

  .page-end-text-nav-prev,
  .page-end-text-nav-center,
  .page-end-text-nav-next{
    text-align:left;
  }

  .page-end-text-nav-center{
    align-items:flex-start;
    gap:4px;
    /* 前へリンクとカテゴリINDEXの間に、役割の切れ目として余白を置く。 */
    margin-top:10px;
  }

  /*
   * モバイルでは「読み進む」操作を最初に見せる。
   * 表示順：次へ → 前へ → カテゴリINDEX → 上位カテゴリ。
   * PCではDOM本来の 前へ / 中央 / 次へ の3列構成を維持する。
   */
  .page-end-text-nav-next{order:1}
  .page-end-text-nav-prev{order:2}
  .page-end-text-nav-center{order:3}

  .page-end-text-nav a{
    font-size:10px;
  }

.header-search-placeholder{
    display:none!important;
  }
}

/* ==========================================================================
   TIER 2 — MEDIUM
   タブレット縦 / 小型ノート / 幅761–1100px。
   横長・低高さのスマホは最後のTIER 4が上書きする。
   ========================================================================== */
@media (min-width:761px) and (max-width:1100px){
.mobile-global-nav,
  .mobile-global-nav-backdrop,
  .mobile-info-nav,
  .mobile-info-nav-backdrop{
    display:none!important;
  }

.header-inner{gap:12px}
  .brand-name{font-size:14px}
  .brand-jp{font-size:7px}
  .desktop-nav{gap:7px}
  .desktop-nav-trigger{
    font-size:8px;
    letter-spacing:0;
  }
  .desktop-nav-trigger > span{font-size:6px}
}

@media (min-width:761px) and (max-width:1100px) and (max-height:899px){
.info-nav-box{
    top:80px;
    max-height:calc(100dvh - 96px);
  }
}

@media (min-width:761px) and (max-width:1100px) and (max-height:699px){
.info-nav-box{
    top:72px;
    max-height:calc(100dvh - 84px);
    padding-top:11px;
  }
  .info-nav-main-title{padding-bottom:8px}
  .info-nav-section{padding-top:6px}
}

/* ==========================================================================
   TIER 3 — WIDE
   通常PC / 大型タブレット横 / width >= 1101px。
   ========================================================================== */
@media (min-width:1101px){
.mobile-global-nav,
  .mobile-global-nav-backdrop,
  .mobile-info-nav,
  .mobile-info-nav-backdrop{
    display:none!important;
  }
}

@media (min-width:1101px) and (max-height:899px){
.info-nav-box{
    top:80px;
    max-height:calc(100dvh - 96px);
  }
}

@media (min-width:1101px) and (max-height:699px){
.info-nav-box{
    top:72px;
    max-height:calc(100dvh - 84px);
    padding-top:11px;
  }
  .info-nav-main-title{padding-bottom:8px}
  .info-nav-section{padding-top:6px}
}

/* ==========================================================================
   TIER 4 — COMPACT-LANDSCAPE
   スマホ横画面。幅だけならMEDIUMでも、高さが低いためモバイルUIを優先。
   865px前後やPCモード時980px前後の横幅もここで扱う。
   ========================================================================== */
@media (orientation:landscape) and (max-height:800px) and (max-width:1100px){
.desktop-nav,
  .info-nav{
    display:none!important;
  }

  .page-layout{
    grid-template-columns:1fr!important;
  }

  .info-nav-button,
  .global-menu-button{
    display:block!important;
  }

  /* 情報ナビは右側のコンパクトなドロワー */
  .mobile-info-nav{
    display:flex!important;
    flex-direction:column!important;
    position:fixed!important;

    top:max(8px, env(safe-area-inset-top, 0px))!important;
    right:max(8px, env(safe-area-inset-right, 0px))!important;
    bottom:max(8px, env(safe-area-inset-bottom, 0px))!important;
    left:auto!important;

    width:min(88vw,390px)!important;
    max-width:calc(100vw - 16px)!important;

    overflow:hidden!important;
    box-sizing:border-box!important;
  }

  .mobile-info-nav[hidden],
  .mobile-info-nav-backdrop[hidden]{
    display:none!important;
  }

  .mobile-info-nav-backdrop{
    display:block!important;
    position:fixed!important;
    inset:0!important;
  }

  .mobile-global-nav-backdrop[hidden]{
    display:none!important;
  }

  .mobile-global-nav-backdrop{
    display:block!important;
    position:fixed!important;
    inset:0!important;
  }

.mobile-info-nav-body{
    padding-bottom:
      calc(68px + env(safe-area-inset-bottom, 0px))!important;
    scroll-padding-bottom:
      calc(68px + env(safe-area-inset-bottom, 0px))!important;
  }
}

/* Mobile drawer responsive rules (shared + global-nav internals) */
@media (max-width:760px),
       (orientation:landscape) and (max-height:800px) and (max-width:1100px){

  .mobile-nav-drawer{
    position:fixed;
    top:74px;
    right:8px;
    left:auto;
    z-index:200;
    display:flex;
    flex-direction:column;
    width:min(92vw,var(--mobile-nav-width));
    max-width:calc(100vw - 16px);
    height:auto;
    max-height:calc(100dvh - 88px);
    overflow:hidden;
    border:1px solid var(--color-drawer-border);
    border-radius:8px;
    background:
      linear-gradient(180deg,var(--mobile-nav-bg-top),var(--mobile-nav-bg-bottom));
    box-shadow:-12px 16px 38px var(--color-overlay-soft);
    box-sizing:border-box;
  }

  .mobile-nav-drawer[hidden]{
    display:none!important;
  }

  .mobile-nav-drawer-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    flex:0 0 auto;
    padding:12px 14px 11px;
    border-bottom:1px solid var(--color-mobile-nav-title-border);
    background:
      linear-gradient(90deg,var(--color-mobile-nav-title-bg-start),var(--color-mobile-nav-title-bg-end));
  }

  .mobile-nav-drawer-head .info-nav-label,
  .mobile-nav-drawer-head > div > small{
    display:block;
    margin-bottom:2px;
    color:var(--mobile-nav-muted);
    font-size:7px;
    letter-spacing:.16em;
  }

  .mobile-nav-drawer-head strong{
    display:block;
    margin:0;
    color:var(--color-drawer-heading);
    font:500 15px/1.35 "Noto Serif JP","Yu Mincho",Georgia,serif;
  }

  .mobile-nav-drawer-close{
    flex:0 0 auto;
    width:32px;
    height:32px;
    padding:0;
    border:1px solid var(--color-drawer-close-border);
    border-radius:50%;
    color:var(--color-drawer-close-text);
    background:var(--color-white-surface-018);
    font-size:19px;
    line-height:1;
    cursor:pointer;
  }

  .mobile-nav-drawer-body{
    min-height:0;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    touch-action:pan-y;
    -webkit-overflow-scrolling:touch;
    box-sizing:border-box;
  }

  /* ----------------------------------------------------------
     GLOBAL NAV CONTENT
     外枠は共通、内部は階層リスト型。
     ---------------------------------------------------------- */
  .mobile-global-nav-body{
    padding:10px;
  }

  .mobile-nav-item{
    overflow:hidden;
    border-bottom:1px solid var(--mobile-nav-border-soft);
  }

  .mobile-nav-item:last-child{
    border-bottom:0;
  }

  .mobile-nav-trigger,
  .mobile-nav-subtrigger{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    width:100%;
    border:0;
    color:inherit;
    background:none;
    text-align:left;
    cursor:pointer;
  }

  .mobile-nav-trigger{
    min-height:50px;
    padding:10px 11px;
  }

  .mobile-nav-trigger:hover,
  .mobile-nav-trigger:focus-visible,
  .mobile-nav-subtrigger:hover,
  .mobile-nav-subtrigger:focus-visible{
    background:
      linear-gradient(90deg,var(--color-drawer-current-bg-start),var(--color-drawer-current-bg-end));
    outline:none;
  }

  .mobile-nav-trigger-label,
  .mobile-nav-subtrigger > span{
    min-width:0;
  }

  .mobile-nav-trigger-label small,
  .mobile-nav-subtrigger small{
    display:block;
    margin-bottom:2px;
    color:var(--mobile-nav-muted);
    font-size:7px;
    line-height:1.3;
    letter-spacing:.14em;
  }

  .mobile-nav-trigger-label strong{
    display:block;
    color:var(--mobile-nav-title);
    font:500 13px/1.45 "Noto Serif JP","Yu Mincho",Georgia,serif;
  }

  .mobile-nav-accordion-icon{
    flex:0 0 auto;
    min-width:1em;
    color:var(--mobile-nav-accent);
    font-size:15px;
    font-weight:400;
    line-height:1;
    text-align:center;
  }

  .mobile-nav-accordion-icon::before{
    content:"＋";
  }

  .mobile-nav-trigger[aria-expanded="true"] .mobile-nav-accordion-icon::before,
  .mobile-nav-subtrigger[aria-expanded="true"] .mobile-nav-accordion-icon::before{
    content:"−";
  }

  .mobile-nav-dropdown{
    padding:0 8px 8px 18px;
    border-top:1px solid var(--color-white-line-035);
  }

  .mobile-nav-dropdown[hidden],
  .mobile-nav-subpanel[hidden]{
    display:none!important;
  }

  .mobile-nav-dropdown > a,
  .mobile-nav-subpanel > a{
    display:block;
    position:relative;
    padding:8px 24px 8px 10px;
    border-bottom:1px solid var(--color-white-line-045);
    color:var(--mobile-nav-text);
    text-decoration:none;
    font-size:10px;
    line-height:1.5;
  }

  .mobile-nav-dropdown > a:hover,
  .mobile-nav-dropdown > a:focus-visible,
  .mobile-nav-subpanel > a:hover,
  .mobile-nav-subpanel > a:focus-visible{
    color:var(--color-global-nav-heading);
    background:linear-gradient(90deg,var(--color-drawer-current-bg-start),transparent);
    outline:none;
  }

  .mobile-nav-dropdown > a::after,
  .mobile-nav-subpanel > a::after{
    content:"›";
    position:absolute;
    top:50%;
    right:8px;
    transform:translateY(-50%);
    color:var(--mobile-nav-accent);
    font-size:16px;
  }

  .mobile-nav-dropdown > a:last-child,
  .mobile-nav-subpanel > a:last-child{
    border-bottom:0;
  }

  .mobile-nav-subgroup{
    border-bottom:1px solid var(--color-white-line-045);
  }

  .mobile-nav-subgroup:last-child{
    border-bottom:0;
  }

  .mobile-nav-subtrigger{
    min-height:42px;
    padding:8px;
  }

  .mobile-nav-subtrigger strong{
    display:block;
    color:var(--color-drawer-row-text);
    font-size:10px;
    font-weight:500;
    line-height:1.45;
  }

  .mobile-nav-subpanel{
    padding:0 0 6px 10px;
  }
}

@media (max-width:360px){
  .mobile-nav-drawer{
    right:4px!important;
    width:calc(100vw - 8px)!important;
    max-width:none!important;
  }
}

/*
 * 横画面:
 * 共通部品はflex/内部スクロールだけを保証する。
 * 情報ナビの実高はcommon.js、サイトナビの四辺位置は下記で管理する。
 */
@media (orientation:landscape) and (max-height:800px) and (max-width:1100px){
  .mobile-nav-drawer{
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
  }

  .mobile-nav-drawer-head{
    flex:0 0 auto!important;
  }

  .mobile-nav-drawer-body{
    min-height:0!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
  }

  .mobile-global-nav{
    top:max(8px,env(safe-area-inset-top,0px))!important;
    right:max(8px,env(safe-area-inset-right,0px))!important;
    bottom:max(8px,env(safe-area-inset-bottom,0px))!important;
    left:auto!important;
    width:min(88vw,var(--mobile-nav-width))!important;
    max-width:calc(100vw - 16px)!important;
    max-height:none!important;
  }
}


/* ==========================================================================
   MOBILE NAV OVERLAY — BACKGROUND SCROLL LOCK
   サイトナビ / 情報ナビを開いている間は本文側を固定し、
   スクロール操作は開いているナビ内部だけに限定する。
   ========================================================================== */
@media (max-width:760px),
       (orientation:landscape) and (max-height:800px) and (max-width:1100px){
  html.global-nav-open,
  body.global-nav-open,
  html.info-nav-open,
  body.info-nav-open{
    overflow:hidden!important;
    overscroll-behavior:none;
  }
}


/* ==========================================================================
   SHARED INFORMATION NAV / DARK CATEGORY NAVIGATION
   Informationカテゴリで確立した右ナビ・モバイル情報ナビ・カテゴリ内ページ一覧を
   CSS1へ統合。これらはカテゴリ固有ではなく、全カテゴリ共通UIとして扱う。
   ========================================================================== */
/* ==========================================================================
   INFORMATION SIDEBAR
   一つのasideの中に独立パネルを積み上げる。
   ========================================================================== */

.information-sidebar{
  /*
   * 右ナビは内容の高さを基本とし、画面いっぱいまで無理に伸ばさない。
   * 内容が多い場合だけviewport高を上限にして、内側をスクロールする。
   */
  --information-sidebar-max-height:calc(100vh - 108px);
  --information-sidebar-max-height:calc(100dvh - 108px);

  position:sticky;
  top:88px;
  align-self:start;
  display:flex;
  flex-direction:column;
  gap:0;

  height:auto;
  max-height:var(--information-sidebar-max-height);

  overflow:hidden;
  padding:0 3px 3px 0;
}

.information-side-panel{
  position:relative;
  overflow:hidden;
  flex:0 0 auto;
  border:1px solid var(--info-side-frame-border);
  border-radius:5px;
  background:
    linear-gradient(160deg,
      var(--info-side-frame-bg-start),
      var(--info-mobile-panel-bg-end));
  box-shadow:
    inset 0 1px var(--info-surface-white-018),
    0 11px 30px var(--info-side-shadow);
}

/* 二重枠風の内側ライン */
.information-side-panel::before{
  content:"";
  position:absolute;
  inset:5px;
  pointer-events:none;
  border:1px solid var(--info-side-inner-line);
  border-radius:3px;
}

/* パネル上部の小さな発光線 */
.information-side-panel::after{
  content:"";
  position:absolute;
  left:18px;
  top:0;
  width:56px;
  height:1px;
  pointer-events:none;
  background:
    linear-gradient(90deg,
      transparent,
      var(--info-side-accent),
      transparent);
  box-shadow:0 0 7px var(--info-side-accent-glow);
}

.information-side-heading{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:0;
  padding:15px 16px 10px;
  border-bottom:1px solid var(--info-line-white-065);
}

.information-side-heading-small{
  padding-top:13px;
  padding-bottom:9px;
}


.information-side-heading small{
  display:block;
  margin-bottom:1px;
  color:var(--info-side-kicker);
  font-size:7px;
  letter-spacing:.18em;
}

.information-side-heading h2{
  margin:0!important;
  padding:0!important;
  border:0!important;
  color:var(--info-side-title)!important;
  background:none!important;
  box-shadow:none!important;
  font:500 17px/1.4 "Noto Serif JP","Yu Mincho",Georgia,serif!important;
}


.information-side-list{
  position:relative;
  z-index:1;
  padding:7px 12px 13px;
}

.information-side-list a{
  display:grid;
  grid-template-columns:minmax(0,1fr) 14px;
  align-items:center;
  gap:8px;
  padding:8px 9px;
  border-bottom:1px solid var(--info-line-white-055);
  color:var(--info-side-text);
  text-decoration:none;
  font-size:9px;
  line-height:1.45;
  transition:
    color .16s ease,
    background .16s ease,
    padding-left .16s ease;
}

.information-side-list a:last-child{
  border-bottom:0;
}

.information-side-list a b{
  color:var(--info-side-link);
  text-align:right;
  font-size:14px;
  font-weight:400;
}

.information-side-list a:hover,
.information-side-list a:focus-visible{
  padding-left:13px;
  color:var(--info-h1);
  background:
    linear-gradient(90deg,
      var(--info-side-link-bg),
      transparent);
}


/* お知らせカード */
.information-side-feature{
  position:relative;
  z-index:1;
  display:block;
  margin:11px 12px 13px;
  padding:11px 11px 10px;
  border:1px solid var(--info-side-feature-border);
  border-radius:3px;
  color:inherit;
  background:var(--info-surface-white-012);
  text-decoration:none;
}

.information-side-feature strong,
.information-side-feature span,
.information-side-feature em{
  display:block;
}

.information-side-feature strong{
  color:var(--info-h2-text);
  font-size:10px;
  line-height:1.5;
}

.information-side-feature span{
  margin-top:4px;
  color:var(--info-side-muted);
  font-size:8px;
  line-height:1.55;
}

.information-side-feature em{
  margin-top:8px;
  color:var(--info-side-accent-2);
  font-size:8px;
  font-style:normal;
  text-align:right;
}

/* Informationサイドバーのスクロールは中身が多い時だけ */


/* スマホでは従来の「情報ナビ」ドロワーを使用。
   PC用独立パネルは表示しない。 */


/* ==========================================================================
   INFORMATION MOBILE NAV
   PC版と同じく、独立したパネルを一つの右ナビとしてまとめる。
   画像は使わず、CSSの細線とグラデーションのみ。
   ========================================================================== */


/* 横画面スマホでも外枠を画面内に保ち、
   内容が多い場合だけパネル一覧を内部スクロール。 */


/* Informationモバイル：ページナビは常時展開 */


/* ==========================================================================
   PAGE NAV DENSITY
   ページナビだけ縦間隔を少し詰める。
   ========================================================================== */


/* PC Informationページナビも4項目程度をコンパクトに表示 */
.information-side-page-list{
  padding-top:5px;
  padding-bottom:9px;
}

.information-side-page-list a{
  padding-top:6px;
  padding-bottom:6px;
  font-size:8px;
  line-height:1.35;
}

.information-side-page-list a span > small{
  display:block;
  margin-bottom:1px;
  color:var(--info-side-soft);
  font-size:6px;
  letter-spacing:.11em;
}

.information-side-page-list a[aria-current="page"]{
  color:var(--info-mobile-panel-current);
  background:
    linear-gradient(90deg,
      var(--info-mobile-panel-current-bg-start),
      var(--info-mobile-panel-current-bg-end));
  box-shadow:inset 2px 0 var(--info-mobile-panel-current-line);
}

.information-side-view-all{
  margin-top:3px;
  border-top:1px solid var(--info-side-index-line)!important;
  color:var(--info-side-index-text)!important;
  background:
    linear-gradient(90deg,var(--info-side-index-bg),transparent);
}


/* ==========================================================================
   INFORMATION NAV HIERARCHY
   外側の大枠 = 情報ナビ
   内側の各独立パネル = ページナビ / 重要なお知らせ / 関連ページ / 最新更新
   ========================================================================== */

.information-sidebar-frame{
  position:relative;
  display:flex;
  flex:0 1 auto;
  flex-direction:column;
  min-height:0;
  height:auto;
  max-height:var(--information-sidebar-max-height);
  overflow:hidden;
  border:1px solid var(--info-nav-frame-border);
  border-radius:7px;
  background:
    linear-gradient(165deg,
      var(--info-nav-frame-bg-start),
      var(--info-nav-frame-bg-end));
  box-shadow:
    inset 0 1px var(--info-surface-white-018),
    0 14px 34px var(--info-nav-shadow);
}

.information-sidebar-frame::before{
  content:"";
  position:absolute;
  inset:5px;
  pointer-events:none;
  border:1px solid var(--info-nav-frame-inner-line);
  border-radius:4px;
}

.information-sidebar-frame-title{
  position:relative;
  z-index:1;
  flex:0 0 auto;
  padding:14px 15px 12px;
  border-bottom:1px solid var(--info-nav-title-line);
  background:
    linear-gradient(90deg,
      var(--info-nav-title-bg-start),
      var(--info-nav-title-bg-end));
}

.information-sidebar-frame-title small{
  display:block;
  margin-bottom:2px;
  color:var(--info-nav-kicker);
  font-size:7px;
  letter-spacing:.17em;
}

.information-sidebar-frame-title strong{
  display:block;
  color:var(--info-nav-title);
  font:500 17px/1.35 "Noto Serif JP","Yu Mincho",Georgia,serif;
}

.information-sidebar-panels{
  position:relative;
  z-index:1;
  display:flex;
  flex:0 1 auto;
  flex-direction:column;
  gap:10px;
  min-height:0;
  padding:10px;

  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-gutter:stable;
}

/* 内側パネルは独立感を残しつつ、外枠より一段軽い */
.information-sidebar-frame .information-side-panel{
  border-color:var(--info-nav-panel-border);
  background:
    linear-gradient(155deg,
      var(--info-nav-panel-bg-start),
      var(--info-nav-panel-bg-end));
  box-shadow:
    inset 0 1px var(--info-surface-white-012),
    0 7px 18px var(--info-h2-shadow);
}

/* モバイルも同じ階層:
   外側ヘッダー=情報ナビ、内側パネル=各項目 */


/* ==========================================================================
   MOBILE INFORMATION NAV - VIEWPORT CONTAINMENT FIX
   情報ナビ全体を常にスマホ画面内へ収める。
   外枠は最大高のみ制限し、内部のパネル一覧だけスクロール。
   ========================================================================== */


/* ==========================================================================
   MOBILE INFORMATION NAV - RIGHT EDGE FIX
   右端が画面外へはみ出さないよう、左右位置と幅計算を明示的に固定。
   ========================================================================== */


/* 360px以下の狭い端末では左右余白をさらに詰める */


/* ==========================================================================
   MOBILE INFORMATION ACCORDION SYMBOL - FINAL
   閉=＋ / 開=−。aria-expandedを見てCSSで確実に切り替える。
   ========================================================================== */
.mobile-information-accordion-icon{
  display:inline-block;
  min-width:1em;
  font-size:0!important;
  line-height:1;
  text-align:center;
  transform:none!important;
}
.mobile-information-accordion-icon::before{
  content:"＋";
  display:inline-block;
  color:var(--info-mobile-panel-accent);
  font-size:15px;
  font-weight:400;
  line-height:1;
}
.mobile-information-accordion-toggle[aria-expanded="true"] .mobile-information-accordion-icon::before{
  content:"−";
}


/* ==========================================================================
   PAGE NAV CURRENT CATEGORY
   「カテゴリ内移動ナビ」→「現在のカテゴリ」→階層パンくず、の順で表示。
   ========================================================================== */
.information-side-heading .page-nav-current-category-label,
.mobile-information-panel-title .page-nav-current-category-label{
  display:block;
  margin-top:7px;
  color:var(--info-nav-label);
  font-size:7px;
  font-weight:500;
  line-height:1.4;
  letter-spacing:.08em;
}

/* ==========================================================================
   PAGE NAV HEADING TRAIL - BREADCRUMB STYLE
   パンくずと同じ論理階層を、ページナビ見出し直下に小さく表示。
   ========================================================================== */
.information-side-heading .page-nav-heading-trail,
.mobile-information-panel-title .page-nav-heading-trail{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0;
  margin-top:3px;
  color:var(--info-nav-muted);
  font-size:7px;
  font-weight:400;
  line-height:1.45;
  letter-spacing:.02em;
  overflow-wrap:anywhere;
}

.information-side-heading .page-nav-heading-trail a,
.mobile-information-panel-title .page-nav-heading-trail a{
  color:inherit;
  text-decoration:none;
}

.information-side-heading .page-nav-heading-trail a:hover,
.information-side-heading .page-nav-heading-trail a:focus-visible,
.mobile-information-panel-title .page-nav-heading-trail a:hover,
.mobile-information-panel-title .page-nav-heading-trail a:focus-visible{
  color:var(--info-nav-link);
  text-decoration:underline;
  text-underline-offset:2px;
}

.page-nav-heading-separator{
  margin:0 .35em;
  color:var(--info-nav-soft);
}


/* ==========================================================================
   RESPONSIVE SYSTEM — INFORMATION
   外枠 / header / close / scroll body は core.css の
   mobile-nav-drawer が担当する。
   ここではInformationカテゴリ固有のパネル / リスト / 装飾だけを管理する。
   ========================================================================== */


/* TIER 1 + TIER 4 : shared mobile Information presentation */
@media (max-width:760px),
       (orientation:landscape) and (max-height:800px) and (max-width:1100px){
.information-sidebar{
    display:none;
  }
  .mobile-information-panels{
    display:flex!important;
    flex-direction:column;
    gap:10px!important;
    min-height:0;
    padding:10px!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
  }

  .mobile-information-panel{
    position:relative;
    flex:0 0 auto;
    overflow:hidden;
    border:1px solid var(--info-mobile-panel-border);
    border-radius:5px;
    background:
      linear-gradient(155deg,
        var(--info-mobile-panel-bg-start),
        var(--info-mobile-panel-bg-end));
    box-shadow:
      inset 0 1px var(--info-surface-white-016),
      0 8px 22px var(--info-mobile-shadow);
  }

  .mobile-information-panel::before{
    content:"";
    position:absolute;
    inset:4px;
    pointer-events:none;
    border:1px solid var(--info-mobile-panel-inner-line);
    border-radius:3px;
  }

  .mobile-information-panel-title{
    position:relative;
    z-index:1;
    padding:11px 12px 8px;
    border-bottom:1px solid var(--info-line-white-055);
  }

  .mobile-information-panel-title small{
    display:block;
    margin-bottom:2px;
    color:var(--info-mobile-panel-kicker);
    font-size:7px;
    letter-spacing:.15em;
  }

  .mobile-information-panel-title strong{
    display:block;
    color:var(--info-mobile-panel-title);
    font:500 14px/1.4 "Noto Serif JP","Yu Mincho",Georgia,serif;
  }

  .mobile-information-links,
  .mobile-information-list{
    position:relative;
    z-index:1;
    padding:6px 9px 10px;
  }

  .mobile-information-links a,
  .mobile-information-list a{
    display:grid;
    grid-template-columns:minmax(0,1fr) 14px;
    align-items:center;
    gap:8px;
    min-height:38px;
    padding:7px 8px;
    border-bottom:1px solid var(--info-line-white-05);
    color:var(--info-mobile-panel-text);
    text-decoration:none;
    font-size:10px;
    line-height:1.45;
  }

  .mobile-information-links a:last-child,
  .mobile-information-list a:last-child{
    border-bottom:0;
  }

  .mobile-information-links a b,
  .mobile-information-list a b{
    color:var(--info-mobile-panel-accent);
    text-align:right;
    font-size:16px;
    font-weight:400;
  }

  .mobile-information-links a[aria-current="page"]{
    color:var(--info-mobile-panel-current);
    background:
      linear-gradient(90deg,
        var(--info-mobile-panel-current-bg-start),
        var(--info-mobile-panel-current-bg-end));
    box-shadow:inset 2px 0 var(--info-mobile-panel-current-line);
  }

  .mobile-information-feature{
    position:relative;
    z-index:1;
    display:block;
    margin:9px;
    /* 基本値。実際のa要素は下の高詳細度ルールで確実に上書きする。 */
    padding:10px 14px;
    border:1px solid var(--info-mobile-feature-border);
    border-radius:3px;
    background:var(--info-surface-white-012);
    color:inherit;
    text-decoration:none;
  }

  /*
   * core.css の .mobile-info-nav-body a より詳細度を高くする。
   * 「サイトリニューアル中」と説明文の左端を内枠から十分離す。
   */
  .mobile-info-nav-body a.mobile-information-feature{
    padding:10px 16px;
  }


  .mobile-information-feature strong,
  .mobile-information-feature span,
  .mobile-information-feature em{
    display:block;
  }

  .mobile-information-feature strong{
    color:var(--info-mobile-feature-title);
    font-size:10px;
    line-height:1.5;
  }

  .mobile-information-feature span{
    margin-top:4px;
    color:var(--info-mobile-feature-muted);
    font-size:9px;
    line-height:1.55;
  }

  .mobile-information-feature em{
    margin-top:7px;
    color:var(--info-mobile-feature-accent);
    font-size:8px;
    font-style:normal;
    text-align:right;
  }

.mobile-information-page-nav .mobile-information-panel-title{
    padding-bottom:9px;
  }

  .mobile-information-links a span > small{
    display:block;
    margin-bottom:2px;
    color:var(--info-mobile-feature-soft);
    font-size:6px;
    letter-spacing:.13em;
  }

  .mobile-information-view-all{
    margin-top:5px;
    border-top:1px solid var(--info-mobile-index-line)!important;
    color:var(--info-side-index-text)!important;
    background:
      linear-gradient(90deg,var(--info-mobile-index-bg),transparent);
  }

  /* PAGE NAV以外はアコーディオン */
  .mobile-information-accordion-toggle{
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    width:100%;
    padding:11px 12px;
    border:0;
    color:inherit;
    background:none;
    text-align:left;
    cursor:pointer;
  }

  .mobile-information-accordion-toggle span{
    min-width:0;
  }

  .mobile-information-accordion-toggle small{
    display:block;
    margin-bottom:2px;
    color:var(--info-mobile-panel-kicker);
    font-size:7px;
    letter-spacing:.15em;
  }

  .mobile-information-accordion-toggle strong{
    display:block;
    color:var(--info-mobile-panel-title);
    font:500 14px/1.4 "Noto Serif JP","Yu Mincho",Georgia,serif;
  }

  .mobile-information-accordion-toggle > b{
    flex:0 0 auto;
    min-width:1em;
    color:var(--info-mobile-panel-accent);
    font-size:15px;
    font-weight:400;
    line-height:1;
    text-align:center;
  }

  .mobile-information-accordion-body{
    position:relative;
    z-index:1;
    border-top:1px solid var(--info-line-white-055);
  }

  .mobile-information-accordion-body[hidden]{
    display:none!important;
  }

.mobile-information-page-nav .mobile-information-links{
    padding-top:4px;
    padding-bottom:7px;
  }

  .mobile-information-page-nav .mobile-information-links a{
    min-height:31px;
    padding:4px 7px;
    font-size:9px;
    line-height:1.35;
  }

  .mobile-information-page-nav .mobile-information-links a span > small{
    margin-bottom:1px;
    font-size:5px;
    line-height:1.2;
  }

.mobile-info-nav-information .mobile-info-nav-head{
    border-bottom-color:var(--info-mobile-title-line);
  }

  .mobile-information-panels{
    gap:9px!important;
  }

.mobile-info-nav-information{
    top:calc(env(safe-area-inset-top, 0px) + 66px)!important;
    right:8px!important;
    bottom:auto!important;

    width:min(92vw,390px)!important;
    max-width:calc(100vw - 16px)!important;

    height:auto!important;
    max-height:calc(
      100dvh
      - env(safe-area-inset-top, 0px)
      - env(safe-area-inset-bottom, 0px)
      - 82px
    )!important;

    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }

  .mobile-info-nav-information .mobile-information-panels{
    flex:1 1 auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    box-sizing:border-box!important;
  }

  .mobile-info-nav-information .mobile-information-panel{
    flex:0 0 auto!important;
  }

.mobile-info-nav-information{
    left:auto!important;
    right:max(8px, env(safe-area-inset-right, 0px))!important;

    width:calc(
      100vw
      - max(8px, env(safe-area-inset-left, 0px))
      - max(8px, env(safe-area-inset-right, 0px))
      - 8px
    )!important;

    max-width:390px!important;
    min-width:0!important;

    margin:0!important;
    transform:none!important;
    box-sizing:border-box!important;
  }

  .mobile-info-nav-information *,
  .mobile-info-nav-information *::before,
  .mobile-info-nav-information *::after{
    box-sizing:border-box;
  }

  .mobile-information-panels,
  .mobile-information-panel,
  .mobile-information-links,
  .mobile-information-list{
    min-width:0!important;
    max-width:100%!important;
  }

  .mobile-information-links a,
  .mobile-information-list a,
  .mobile-information-feature{
    min-width:0!important;
    max-width:100%!important;
    overflow-wrap:anywhere;
    word-break:normal;
  }

.mobile-information-panel-title .page-nav-heading-trail{
    margin-top:3px;
    font-size:6px;
    line-height:1.4;
  }

.mobile-information-panel-title .page-nav-heading-trail{
    margin-top:3px;
    font-size:6px;
    line-height:1.4;
  }
}

/* TIER 2 : medium, low-height adjustment */
@media (min-width:761px) and (max-width:1100px) and (max-height:720px){
.information-sidebar{
    --information-sidebar-max-height:calc(100vh - 84px);
    --information-sidebar-max-height:calc(100dvh - 84px);
    top:72px;
  }
}


/* TIER 3 : wide, low-height adjustment */
@media (min-width:1101px) and (max-height:720px){
.information-sidebar{
    --information-sidebar-max-height:calc(100vh - 84px);
    --information-sidebar-max-height:calc(100dvh - 84px);
    top:72px;
  }
}


/* TIER 4 : compact-landscape refinements */
@media (orientation:landscape) and (max-height:800px) and (max-width:1100px){
.information-sidebar{
    display:none!important;
  }

  .mobile-info-nav-information[hidden]{
    display:none!important;
  }

  .mobile-info-nav-information .mobile-info-nav-head{
    flex:0 0 auto!important;
  }

  .mobile-info-nav-information .mobile-info-nav-body.mobile-information-panels{
    display:flex!important;
    flex-direction:column!important;
    gap:9px!important;
    flex:0 0 auto!important;
    min-height:0!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    touch-action:pan-y!important;
    -webkit-overflow-scrolling:touch!important;
    padding-bottom:
      calc(68px + env(safe-area-inset-bottom, 0px))!important;
    scroll-padding-bottom:
      calc(68px + env(safe-area-inset-bottom, 0px))!important;
  }

  .mobile-info-nav-information .mobile-information-panel{
    flex:0 0 auto!important;
    width:100%!important;
  }

  .mobile-info-nav-information .mobile-information-panel:last-child{
    margin-bottom:18px!important;
  }
}

@media (orientation:landscape) and (max-height:520px) and (max-width:900px){
.mobile-info-nav-information{
    top:7px!important;
    right:7px!important;
    height:auto!important;
    max-height:calc(100dvh - 14px)!important;
  }

  .mobile-information-panels{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto!important;
  }
}

/* ==========================================================================
   CATEGORY PAGE SCROLL LIST — PRODUCTION
   固定の前/現在/次枠は置かず、カテゴリ内全ページ一覧の左列に
   「前 / 今 / 次」を現在位置から動的に表示する。
   PC / スマホとも 1行28px × 4行 = 112px とし、5行目を部分表示しない。
   現在ページはJSで基本2行目へ配置し、先頭・末尾付近では自然に端へ寄せる。
   ========================================================================== */
.information-category-page-scroll,
.mobile-category-page-scroll{
  margin:8px 9px 10px;
  padding-top:8px;
  border-top:1px solid var(--info-side-index-line);
}

.category-page-scroll-label{
  display:block;
  margin:0 2px 5px;
  color:var(--info-scroll-label);
  font-size:7px;
  font-weight:500;
  letter-spacing:.08em;
}

.category-page-scroll-list{
  height:112px;
  max-height:112px;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  border:1px solid var(--info-scroll-border);
  border-radius:3px;
  background:var(--info-scroll-bg);
}

.category-page-scroll-list a{
  display:grid!important;
  grid-template-columns:22px minmax(0,1fr);
  align-items:center;
  gap:7px;
  height:28px;
  min-height:28px!important;
  box-sizing:border-box;
  padding:0 9px!important;
  border-bottom:1px solid var(--info-scroll-row-line)!important;
  color:var(--info-scroll-text)!important;
  background:none!important;
  box-shadow:none!important;
  text-decoration:none!important;
  font-size:8px!important;
  line-height:1.35!important;
}

.category-page-relation{
  display:block;
  min-width:22px;
  color:var(--info-scroll-relation);
  font-size:7px;
  font-weight:500;
  text-align:center;
  line-height:1.2;
}

.category-page-relation.is-previous,
.category-page-relation.is-next{
  color:var(--info-scroll-relation-near);
}

.category-page-relation.is-current{
  color:var(--info-scroll-relation-current);
  font-weight:700;
}

.category-page-title{
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.category-page-scroll-list a:last-child{border-bottom:0!important}

.category-page-scroll-list a:hover,
.category-page-scroll-list a:focus-visible{
  color:var(--info-scroll-hover-text)!important;
  background:var(--info-scroll-hover-bg)!important;
}

.category-page-scroll-list a[aria-current="page"]{
  color:var(--info-scroll-current-text)!important;
  background:linear-gradient(90deg,var(--info-scroll-current-bg-start),var(--info-scroll-current-bg-end))!important;
  box-shadow:inset 2px 0 var(--info-scroll-current-line)!important;
}

.category-page-scroll-index{
  display:block;
  margin-top:7px;
  padding:6px 2px;
  color:var(--info-scroll-index);
  text-decoration:none;
  font-size:8px;
  line-height:1.4;
}

.category-page-scroll-index:hover,
.category-page-scroll-index:focus-visible{
  color:var(--info-scroll-index-hover);
  text-decoration:underline;
  text-underline-offset:2px;
}

@media (max-width:760px),
       (orientation:landscape) and (max-height:800px) and (max-width:1100px){
  .mobile-category-page-scroll{margin:7px 9px 9px}

  .mobile-category-page-scroll .category-page-scroll-list{
    height:112px;
    max-height:112px;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-y;
  }

  .mobile-category-page-scroll .category-page-scroll-list a{
    grid-template-columns:24px minmax(0,1fr);
    gap:7px;
    height:28px;
    min-height:28px!important;
    padding:0 10px!important;
    font-size:9px!important;
  }

  .mobile-category-page-scroll .category-page-relation{
    display:block!important;
    width:24px;
    min-width:24px;
    color:var(--info-scroll-relation-near)!important;
    font-size:8px!important;
    font-weight:500;
    text-align:center;
    visibility:visible!important;
    opacity:1!important;
  }

  .mobile-category-page-scroll .category-page-relation.is-current{
    color:var(--info-scroll-relation-current)!important;
    font-weight:700;
  }

  .mobile-category-page-scroll .category-page-scroll-index{
    font-size:9px;
  }
}

/* ==========================================================================
   ADAPTIVE INFORMATION NAV — WIDE SCREEN / INSUFFICIENT HEIGHT
   JSが「折りたたみ状態の右ナビでも縦に収まらない」と判定した場合だけ、
   PC幅でも右カラムを消し、スマホと同じ情報ナビボタン + drawerへ切り替える。
   ========================================================================== */
@media (min-width:761px){
  body.info-nav-drawer-mode .page-layout{
    grid-template-columns:1fr!important;
  }

  body.info-nav-drawer-mode .info-nav,
  body.info-nav-drawer-mode .information-sidebar{
    display:none!important;
  }

  body.info-nav-drawer-mode .info-nav-button{
    display:block!important;
    margin-left:auto;
    padding:7px 10px;
    border:1px solid var(--line);
    border-radius:4px;
    color:var(--color-responsive-text);
    background:none;
  }

  body.info-nav-drawer-mode .mobile-info-nav{
    position:fixed!important;
    top:74px!important;
    right:max(8px, env(safe-area-inset-right, 0px))!important;
    bottom:auto!important;
    left:auto!important;
    z-index:200!important;

    display:flex!important;
    flex-direction:column!important;
    width:min(390px,calc(100vw - 16px))!important;
    max-width:calc(100vw - 16px)!important;
    height:auto!important;
    max-height:calc(100dvh - 88px)!important;

    overflow:hidden!important;
    border:1px solid var(--color-drawer-border);
    border-radius:8px;
    background:
      linear-gradient(180deg,var(--mobile-nav-bg-top),var(--mobile-nav-bg-bottom));
    box-shadow:-12px 16px 38px var(--color-overlay-soft);
    box-sizing:border-box!important;
  }

  body.info-nav-drawer-mode .mobile-info-nav[hidden]{
    display:none!important;
  }

  body.info-nav-drawer-mode .mobile-info-nav-backdrop{
    display:block!important;
    position:fixed!important;
    inset:0!important;
    z-index:190!important;
    background:var(--color-overlay);
    backdrop-filter:blur(2px);
    -webkit-backdrop-filter:blur(2px);
  }

  body.info-nav-drawer-mode .mobile-info-nav-backdrop[hidden]{
    display:none!important;
  }

  body.info-nav-drawer-mode .mobile-nav-drawer-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    flex:0 0 auto;
    padding:12px 14px 11px;
    border-bottom:1px solid var(--color-mobile-nav-title-border);
    background:
      linear-gradient(90deg,var(--color-mobile-nav-title-bg-start),var(--color-mobile-nav-title-bg-end));
  }

  body.info-nav-drawer-mode .mobile-nav-drawer-head .info-nav-label{
    display:block;
    margin-bottom:2px;
    color:var(--mobile-nav-muted);
    font-size:7px;
    letter-spacing:.16em;
  }

  body.info-nav-drawer-mode .mobile-nav-drawer-head strong{
    display:block;
    margin:0;
    color:var(--color-drawer-heading);
    font:500 15px/1.35 "Noto Serif JP","Yu Mincho",Georgia,serif;
  }

  body.info-nav-drawer-mode .mobile-nav-drawer-close{
    flex:0 0 auto;
    width:32px;
    height:32px;
    padding:0;
    border:1px solid var(--color-drawer-close-border);
    border-radius:50%;
    color:var(--color-drawer-close-text);
    background:var(--color-white-surface-018);
    font-size:19px;
    line-height:1;
    cursor:pointer;
  }

  body.info-nav-drawer-mode .mobile-nav-drawer-body{
    min-height:0;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    touch-action:pan-y;
    -webkit-overflow-scrolling:touch;
    box-sizing:border-box;
  }

  /* Informationカテゴリのdrawer内部。スマホ版と同一構造・同一配色。 */
  body.info-nav-drawer-mode .mobile-information-panels{
    display:flex!important;
    flex:1 1 auto!important;
    flex-direction:column;
    gap:9px!important;
    min-height:0!important;
    padding:10px!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
  }

  body.info-nav-drawer-mode .mobile-information-panel{
    position:relative;
    flex:0 0 auto!important;
    min-width:0!important;
    max-width:100%!important;
    overflow:hidden;
    border:1px solid var(--info-mobile-panel-border);
    border-radius:5px;
    background:
      linear-gradient(155deg,
        var(--info-mobile-panel-bg-start),
        var(--info-mobile-panel-bg-end));
    box-shadow:
      inset 0 1px var(--info-surface-white-016),
      0 8px 22px var(--info-mobile-shadow);
  }

  body.info-nav-drawer-mode .mobile-information-panel::before{
    content:"";
    position:absolute;
    inset:4px;
    pointer-events:none;
    border:1px solid var(--info-mobile-panel-inner-line);
    border-radius:3px;
  }

  body.info-nav-drawer-mode .mobile-information-panel-title{
    position:relative;
    z-index:1;
    padding:11px 12px 9px;
    border-bottom:1px solid var(--info-line-white-055);
  }

  body.info-nav-drawer-mode .mobile-information-panel-title small,
  body.info-nav-drawer-mode .mobile-information-accordion-toggle small{
    display:block;
    margin-bottom:2px;
    color:var(--info-mobile-panel-kicker);
    font-size:7px;
    letter-spacing:.15em;
  }

  body.info-nav-drawer-mode .mobile-information-panel-title strong,
  body.info-nav-drawer-mode .mobile-information-accordion-toggle strong{
    display:block;
    color:var(--info-mobile-panel-title);
    font:500 14px/1.4 "Noto Serif JP","Yu Mincho",Georgia,serif;
  }

  body.info-nav-drawer-mode .mobile-information-accordion-toggle{
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    width:100%;
    padding:11px 12px;
    border:0;
    color:inherit;
    background:none;
    text-align:left;
    cursor:pointer;
  }

  body.info-nav-drawer-mode .mobile-information-accordion-toggle > b{
    flex:0 0 auto;
    min-width:1em;
    color:var(--info-mobile-panel-accent);
    font-size:15px;
    font-weight:400;
    line-height:1;
    text-align:center;
  }

  body.info-nav-drawer-mode .mobile-information-accordion-body{
    position:relative;
    z-index:1;
    border-top:1px solid var(--info-line-white-055);
  }

  body.info-nav-drawer-mode .mobile-information-accordion-body[hidden]{
    display:none!important;
  }

  body.info-nav-drawer-mode .mobile-information-links,
  body.info-nav-drawer-mode .mobile-information-list{
    position:relative;
    z-index:1;
    min-width:0!important;
    max-width:100%!important;
    padding:6px 9px 10px;
  }

  body.info-nav-drawer-mode .mobile-information-list a{
    display:grid;
    grid-template-columns:minmax(0,1fr) 14px;
    align-items:center;
    gap:8px;
    min-height:38px;
    padding:7px 8px;
    border-bottom:1px solid var(--info-line-white-05);
    color:var(--info-mobile-panel-text);
    text-decoration:none;
    font-size:10px;
    line-height:1.45;
  }

  body.info-nav-drawer-mode .mobile-information-list a:last-child{
    border-bottom:0;
  }

  body.info-nav-drawer-mode .mobile-information-feature{
    position:relative;
    z-index:1;
    display:block;
    margin:9px;
    padding:10px 16px;
    border:1px solid var(--info-mobile-feature-border);
    border-radius:3px;
    background:var(--info-surface-white-012);
    color:inherit;
    text-decoration:none;
  }

  body.info-nav-drawer-mode .mobile-information-feature strong,
  body.info-nav-drawer-mode .mobile-information-feature span,
  body.info-nav-drawer-mode .mobile-information-feature em{
    display:block;
  }

  body.info-nav-drawer-mode .mobile-information-feature strong{
    color:var(--info-mobile-feature-title);
    font-size:10px;
    line-height:1.5;
  }

  body.info-nav-drawer-mode .mobile-information-feature span{
    margin-top:4px;
    color:var(--info-mobile-feature-muted);
    font-size:9px;
    line-height:1.55;
  }

  body.info-nav-drawer-mode .mobile-information-feature em{
    margin-top:7px;
    color:var(--info-mobile-feature-accent);
    font-size:8px;
    font-style:normal;
    text-align:right;
  }

  body.info-nav-drawer-mode .mobile-info-nav-information,
  body.info-nav-drawer-mode .mobile-info-nav-information *{
    box-sizing:border-box;
  }

  body.info-nav-drawer-mode .mobile-info-nav-information .mobile-information-panel:last-child{
    margin-bottom:18px!important;
  }

  html.info-nav-open,
  body.info-nav-open.info-nav-drawer-mode{
    overflow:hidden!important;
    overscroll-behavior:none;
  }
}