/* =========================================================
   共通ナビゲーション部品  /assets/nav.css
   ・スマホ用のメニュー(ハンバーガー + 引き出し)
   ・パソコン用のページ内もくじ(右端の細いレール)
   どのページに読み込んでも、そのページの色を自動で使います。
   ========================================================= */

:root{
  /* 各ページが持っている色を拾います。無ければ既定値を使います */
  --gn-bg: var(--paper, var(--bg, #ffffff));
  --gn-panel: var(--paper2, var(--bg2, var(--gn-bg)));
  --gn-tx: var(--sumi, var(--ink, #1b1f27));
  --gn-tx2: var(--sumi2, var(--ink2, var(--muted, #5c6472)));
  --gn-ac: var(--accent, var(--gold, var(--orange, #a3801f)));
  --gn-line: var(--hair, var(--line, rgba(0,0,0,.14)));
  --gn-line2: var(--hair-lt, var(--line2, rgba(0,0,0,.07)));
  --gn-mincho: var(--mincho, 'Shippori Mincho B1','Hiragino Mincho ProN','Yu Mincho',serif);
  --gn-latin: var(--latin, 'Cormorant Garamond', Georgia, serif);
  --gn-ease: var(--ease, cubic-bezier(.16,1,.3,1));
}

/* =========================================================
   ハンバーガーボタン
   ========================================================= */
.gn-burger{
  display:none;position:relative;width:44px;height:44px;flex:none;
  border:1px solid var(--gn-line);background:transparent;cursor:pointer;
  transition:border-color .45s var(--gn-ease);
  z-index:1002;
}
.gn-burger:hover{border-color:var(--gn-ac);}
.gn-burger i{
  position:absolute;left:12px;right:12px;height:1px;background:var(--gn-tx);
  transition:transform .5s var(--gn-ease),opacity .3s var(--gn-ease),background .3s;
}
.gn-burger i:nth-child(1){top:16px;}
.gn-burger i:nth-child(2){top:21.5px;}
.gn-burger i:nth-child(3){top:27px;}
.gn-burger[aria-expanded="true"] i:nth-child(1){transform:translateY(5.5px) rotate(45deg);}
.gn-burger[aria-expanded="true"] i:nth-child(2){opacity:0;}
.gn-burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-5.5px) rotate(-45deg);}

/* =========================================================
   引き出しメニュー
   ========================================================= */
.gn-drawer{
  position:fixed;inset:0;z-index:1001;
  background:var(--gn-bg);
  opacity:0;visibility:hidden;
  transition:opacity .5s var(--gn-ease),visibility .5s var(--gn-ease);
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  display:flex;flex-direction:column;
}
.gn-drawer.open{opacity:1;visibility:visible;}
.gn-drawer-in{
  margin:auto;width:100%;max-width:560px;
  padding:104px clamp(24px,7vw,48px) 56px;
}
.gn-drawer .gn-ttl{
  font-family:var(--gn-latin);font-size:11px;letter-spacing:.4em;text-transform:uppercase;
  color:var(--gn-ac);margin-bottom:8px;display:block;
}
.gn-drawer ul{list-style:none;}
.gn-drawer li{
  border-bottom:1px solid var(--gn-line2);
  opacity:0;transform:translateY(16px);
  transition:opacity .7s var(--gn-ease),transform .7s var(--gn-ease);
}
.gn-drawer.open li{opacity:1;transform:none;}
.gn-drawer a{
  display:flex;align-items:baseline;gap:16px;
  padding:19px 2px;text-decoration:none;color:var(--gn-tx);
  transition:color .4s var(--gn-ease),padding-left .5s var(--gn-ease);
}
.gn-drawer a:hover{color:var(--gn-ac);padding-left:10px;}
.gn-drawer a .n{
  font-family:var(--gn-latin);font-size:12px;letter-spacing:.16em;color:var(--gn-ac);
  flex:none;width:26px;
}
.gn-drawer a .t{font-family:var(--gn-mincho);font-size:19px;font-weight:500;letter-spacing:.13em;line-height:1.6;}
.gn-drawer a .ar{margin-left:auto;font-size:13px;color:var(--gn-tx2);transition:transform .45s var(--gn-ease);}
.gn-drawer a:hover .ar{transform:translateX(5px);}
.gn-drawer li.gn-now a .t{color:var(--gn-ac);}
.gn-drawer li.gn-now a::before{
  content:"";position:absolute;left:-14px;top:50%;width:6px;height:1px;background:var(--gn-ac);
}
.gn-drawer li.gn-now a{position:relative;}
.gn-drawer .gn-foot{
  margin-top:38px;font-size:12px;letter-spacing:.1em;color:var(--gn-tx2);line-height:2.1;
  opacity:0;transition:opacity .8s .3s var(--gn-ease);
}
.gn-drawer.open .gn-foot{opacity:1;}
.gn-drawer .gn-foot b{display:block;font-family:var(--gn-mincho);font-weight:500;
  font-size:15px;letter-spacing:.18em;color:var(--gn-tx);margin-bottom:6px;}

body.gn-lock{overflow:hidden;}

/* =========================================================
   ページ内もくじ(パソコンの右端)
   ========================================================= */
.gn-rail{
  position:fixed;right:clamp(14px,2vw,26px);top:50%;transform:translateY(-50%);
  z-index:340;display:none;flex-direction:column;gap:4px;align-items:flex-end;
  opacity:0;transition:opacity .7s var(--gn-ease);
}
.gn-rail.ready{opacity:1;}
.gn-rail a{
  display:flex;align-items:center;justify-content:flex-end;gap:10px;
  padding:6px 0;text-decoration:none;color:var(--gn-tx2);
}
.gn-rail .t{
  font-size:11px;letter-spacing:.14em;white-space:nowrap;
  opacity:0;transform:translateX(6px);
  transition:opacity .45s var(--gn-ease),transform .45s var(--gn-ease),color .4s var(--gn-ease);
}
.gn-rail .d{
  display:block;width:16px;height:1px;background:currentColor;opacity:.45;flex:none;
  transition:width .5s var(--gn-ease),opacity .4s var(--gn-ease),background .4s var(--gn-ease);
}
.gn-rail a:hover .t{opacity:1;transform:none;}
.gn-rail a:hover .d{width:26px;opacity:.85;}
.gn-rail a.gn-now .t{opacity:1;transform:none;color:var(--gn-ac);}
.gn-rail a.gn-now .d{width:32px;opacity:1;background:var(--gn-ac);}

/* =========================================================
   ヘッダーのナビで「いま見ている場所」を示す
   ========================================================= */
.nav a.gn-now,.sh .nav a.gn-now{color:var(--gn-ac);}
.nav a.gn-now::after{transform:scaleX(1)!important;transform-origin:left!important;}

/* =========================================================
   画面の幅に応じて
   ========================================================= */
@media (min-width:1025px){
  .gn-rail{display:flex;}
}
@media (max-width:1024px){
  .gn-burger{display:block;}
}
/* サンプル側のヘッダーは 880px で畳まれるので、そこに合わせます */
.sh .gn-burger{display:none;}
@media (max-width:880px){
  .sh .gn-burger{display:block;}
}

@media (prefers-reduced-motion:reduce){
  .gn-drawer,.gn-drawer li,.gn-drawer .gn-foot,.gn-rail,.gn-rail .t,.gn-rail .d,.gn-burger i{
    transition:none!important;
  }
}

/* =========================================================
   ホームボタンが増えたぶん、560px以下でも少し詰めます
   ========================================================= */
@media (max-width:560px){
  .hd-in{gap:12px;}
  .hd .nav{gap:10px;}
  .hd .logo .nm{font-size:14.5px;letter-spacing:.06em;}
  .hd .nav .btn.sm{padding:10px 14px;font-size:11.5px;letter-spacing:.06em;}
  .site-header .inner{gap:12px;}
  .site-header .logo .name{font-size:14px;letter-spacing:.04em;}
  .site-header .back{padding:8px 11px;font-size:11px;letter-spacing:.04em;}
}

/* =========================================================
   とても狭い画面(小さめのスマホ)での詰まりを防ぐ
   ハンバーガーが増えたぶん、ロゴとボタンを少し小さくします
   ========================================================= */
@media (max-width:430px){
  .hd-in{gap:10px;}
  .hd .logo .nm{font-size:12.5px;letter-spacing:0;}
  .hd .nav .btn.sm{padding:9px 10px;font-size:10.5px;letter-spacing:.02em;}
  .hd .nav{gap:8px;}
  .sh .brand .jp{font-size:14px;letter-spacing:.04em;}
  .sh .brand .en{display:none;}
  .sh .nav .btn{padding:9px 12px;font-size:11px;letter-spacing:.04em;}
  .site-header .inner{gap:10px;padding-left:18px;padding-right:18px;}
  .site-header .logo .name{font-size:12.5px;letter-spacing:0;}
  /* ホームボタンと行き先が同じなので、狭い画面では隠します */
  .site-header .back{display:none;}
  .gn-burger{width:40px;height:40px;}
  .gn-burger i{left:11px;right:11px;}
  .gn-burger i:nth-child(1){top:14px;}
  .gn-burger i:nth-child(2){top:19.5px;}
  .gn-burger i:nth-child(3){top:25px;}
}

/* =========================================================
   記事のもくじ(本文の先頭に入ります)
   ========================================================= */
.gn-toc{
  margin:2.4em 0 2.6em;padding:clamp(20px,2.6vw,28px) clamp(18px,2.4vw,26px);
  border-top:1px solid var(--gn-line);border-bottom:1px solid var(--gn-line);
}
/* 見出し行(押すと開閉します) */
.gn-toc-t{
  display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;
  font-size:12px;letter-spacing:.26em;color:var(--gn-ac);font-weight:500;
  margin:0;padding:0;background:none;border:none;cursor:pointer;text-align:left;
  font-family:inherit;line-height:1.6;
}
.gn-toc-t:hover{opacity:.75;}
.gn-toc-ic{position:relative;width:13px;height:13px;flex:none;}
.gn-toc-ic::before,.gn-toc-ic::after{
  content:"";position:absolute;inset:0;margin:auto;background:var(--gn-ac);
  transition:transform .5s var(--gn-ease),opacity .35s var(--gn-ease);
}
.gn-toc-ic::before{width:13px;height:1px;}
.gn-toc-ic::after{width:1px;height:13px;}
.gn-toc.open .gn-toc-ic::after{transform:rotate(90deg);opacity:0;}
/* 中身がすっと開きます */
.gn-toc-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--gn-ease);}
.gn-toc.open .gn-toc-body{grid-template-rows:1fr;}
.gn-toc-body > div{overflow:hidden;}
.gn-toc-body ol{padding-top:12px;}
.gn-toc ol{list-style:none;counter-reset:gntoc;margin:0;padding:0;}
.gn-toc li{counter-increment:gntoc;border-bottom:1px solid var(--gn-line2);margin:0;}
.gn-toc li:last-child{border-bottom:none;}
.gn-toc a{
  display:flex;gap:14px;align-items:baseline;padding:11px 0;
  font-size:14.5px;line-height:1.85;color:var(--gn-tx);text-decoration:none;font-weight:400;
  transition:color .4s var(--gn-ease),padding-left .45s var(--gn-ease);
}
.gn-toc a::before{
  content:counter(gntoc,decimal-leading-zero);
  font-family:var(--gn-latin);font-size:12.5px;letter-spacing:.14em;
  color:var(--gn-ac);flex:none;width:24px;
}
.gn-toc a:hover{color:var(--gn-ac);padding-left:6px;}

/* いま開いているページ(引き出しメニュー内) */
.gn-drawer li.gn-here a .t{color:var(--gn-ac);}
.gn-drawer li.gn-here a .n{opacity:1;}
.gn-drawer li.gn-here a::after{
  content:"表示中";position:absolute;right:34px;top:50%;transform:translateY(-50%);
  font-size:10px;letter-spacing:.2em;color:var(--gn-ac);opacity:.75;
}
.gn-drawer li.gn-here a{position:relative;}

/* =========================================================
   ホームボタン
   ========================================================= */
.gn-home{
  display:none;width:44px;height:44px;flex:none;
  border:1px solid var(--gn-line);place-items:center;color:var(--gn-tx);
  transition:border-color .45s var(--gn-ease),color .45s var(--gn-ease);
}
.gn-home svg{width:19px;height:19px;}
.gn-home:hover{border-color:var(--gn-ac);color:var(--gn-ac);}
/* ナビの「.nav a:not(.btn){display:none}」に負けないよう、指定を強めます */
@media (max-width:1024px){
  .gn-home,
  .nav a.gn-home,
  .hd .nav a.gn-home{display:grid;}
}
@media (max-width:430px){ .gn-home{width:40px;height:40px;} .gn-home svg{width:17px;height:17px;} }

/* =========================================================
   パンくず(ページ見出しの上)
   ========================================================= */
.gn-crumb{
  display:flex;align-items:center;gap:10px;margin-bottom:20px;
  font-size:11.5px;letter-spacing:.14em;color:var(--gn-tx2);
}
.gn-crumb a{color:var(--gn-tx2);text-decoration:none;transition:color .4s var(--gn-ease);}
.gn-crumb a:hover{color:var(--gn-ac);}
.gn-crumb span{opacity:.45;}
.gn-crumb b{font-weight:400;color:var(--gn-ac);}

/* =========================================================
   ★重要:メニューを開いている間はヘッダーを前に出す
   これが無いと引き出しがボタンを覆ってしまい、閉じられません
   ========================================================= */
body.gn-lock .hd,
body.gn-lock .sh,
body.gn-lock .site-header{ z-index:1003; }