/* =========================================================
   .standard ｜ 全ページ共通の土台
   色・文字・ヘッダー・フッター・あらわれ方
   ========================================================= */

:root{
  --mincho:"Shippori Mincho B1", serif;
  --gothic:"Zen Kaku Gothic New", sans-serif;
  --num:"Outfit", sans-serif;

  /* 紙の色から、白へ。ベージュに戻すなら --bg を #fbfaf8 に書き換えるだけ */
  --bg:#ffffff;
  --ink:#12110f;
  --grey:#56524a;       /* 本文のグレー。薄すぎたので濃くした */
  --pale:#8c887e;       /* キャプション。同じく濃く */
  --ph:#f0efed;         /* 写真プレースホルダーの下地 */
  --rule:rgba(18,17,15,.18);
  --accent:#c2452d;     /* 朱。線の先端と「.」だけに使う */

  --ease:cubic-bezier(.16,1,.3,1);
  --pad:clamp(20px,5vw,64px);
  --col:min(88vw, 640px);
}

*,*::before,*::after{ box-sizing:border-box; }
/* 導入で線が紙の外まで散るので、横スクロールが出ないように切っておく。
   clip なら（hidden と違い）スクロール領域を作らないので他の挙動に影響しない */
html{ scroll-behavior:smooth; overflow-x:clip; }
body{ overflow-x:clip; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--gothic); font-size:16px; line-height:2.1; letter-spacing:.045em;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ font-family:var(--mincho); font-weight:400; line-height:1.85; letter-spacing:.09em; margin:0; }
p{ margin:0; } ol,ul,dl,dd{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
em{ font-style:normal; }
img{ display:block; max-width:100%; }

/* =========================================================
   ロゴ
   assets/logo.png … 708×441、あらかじめ透過PNGに加工済み（白地は本物の透明）。
   以前は白地JPGを mix-blend-mode:multiply で誤魔化していたが、
   背景色が紙と厳密に同じでない環境（携帯のブラウザ等）で白い箱が透けずに残ったため、
   画像そのものを透過させる方式に変更した。
   SVG版が手に入ったら、この .png を差し替えるだけでよい。
   ========================================================= */
.logo{ display:block; aspect-ratio:708 / 441; }
.logo img{ display:block; border:0; width:100%; height:100%; }

/* 図面の整理番号のようなキャプション */
.sheet{
  font-family:var(--num); font-size:12px; font-weight:400;
  letter-spacing:.24em; color:var(--pale); white-space:pre;
}
.body{ font-size:15px; line-height:2.45; color:var(--grey); }
.body--w{ max-width:44em; }

/* =============== ヘッダー =============== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:40;
  display:flex; justify-content:space-between; align-items:baseline;
  padding:22px var(--pad); mix-blend-mode:multiply;
}
.nav__brand{ display:block; width:clamp(76px,7vw,104px); }
.nav__menu{ font-family:var(--num); font-size:12.5px; letter-spacing:.24em; color:var(--grey); }
.nav__menu:hover{ color:var(--ink); }

.menu{ position:fixed; inset:0; z-index:39; background:var(--bg); display:grid; place-items:center; }
.menu[hidden]{ display:none; }
.menu__list{ display:grid; gap:6px; text-align:center; }
.menu__list a{ font-family:var(--mincho); font-size:23px; letter-spacing:.14em; padding:9px 0; display:block; }
.menu__list a:hover{ color:var(--accent); }
.menu__sub{ margin-top:28px; display:flex; gap:22px; justify-content:center; flex-wrap:wrap; }
.menu__sub a{ font-family:var(--num); font-size:12.5px; letter-spacing:.22em; color:var(--grey); }
.menu__sub a:hover{ color:var(--accent); }

/* =============== フッター =============== */
/* 締めの大きなロゴは、元画像の解像度が足りなかったので外しています */
.foot{ padding:clamp(72px,11vh,130px) var(--pad) 64px; text-align:center; }
.foot__nav{ margin-bottom:24px; display:flex; gap:12px 28px; justify-content:center; flex-wrap:wrap; }
.foot__nav a{ font-family:var(--num); font-size:12.5px; letter-spacing:.2em; color:var(--grey); }
.foot__nav a:hover{ color:var(--accent); }

/* =============== あらわれ方 =============== */
.js [data-r]{ opacity:0; transform:translateY(14px); }
.js .is-in{ opacity:1 !important; transform:none !important; transition:opacity 1.2s var(--ease), transform 1.2s var(--ease); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
  .js [data-r]{ opacity:1; transform:none; }
}