/* 下層ページ共通テーマ — ペーパーホワイト＋紙の質感（index.html と同じ世界観） */
:root {
  --paper: #FBF8F2;
  --paper-text: #F5F2EB;
  --ink: #211F1C;
  --footer-bg: #14141A;
  --serif: "Noto Serif JP", serif;
  --sans: "Noto Sans JP", sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.7;
}
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
/* 写真の持ち去りを鈍らせる。長押しの保存メニュー・ドラッグ・右クリックの的にしない。
   画面の撮影までは防げないので、あくまで手軽な持ち去りを止めるためのもの */
img, video {
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}
.wrap { max-width: 1440px; margin: 0 auto; position: relative; }

/* 紙の質感 */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  opacity: .045;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ヘッダー */
.site-head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 40px 56px 0;
}
.site-head .mark { font-family: var(--serif); font-weight: 600; font-size: 17px; }
.site-head nav { display: flex; gap: 36px; font-size: 14px; }
.site-head nav a[aria-current] { border-bottom: 1px solid currentColor; }

/* 巨大見出し */
.giant {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(64px, 10.28vw, 148px);
  line-height: 1.44;
  color: #000;
  margin-top: 56px;
  text-align: left;
  padding-left: calc(6.32% - 9px);
  white-space: nowrap;
  overflow: hidden;
}
.lede {
  margin: 8px 6.32% 0;
  max-width: 720px;
  opacity: .85;
}

h2 { font-family: var(--serif); font-weight: 600; font-size: 24px; line-height: 1.4; }
.tech { font-size: 13px; opacity: .6; margin-top: 24px; }
.tech .t { white-space: nowrap; }
.tech svg { width: 1em; height: 1em; fill: currentColor; vertical-align: -0.125em; margin-right: .3em; }
.body { margin-top: 16px; opacity: .9; }

/* フッター（indexと同一） */
footer {
  background: var(--footer-bg);
  color: var(--paper-text);
  padding: 90px 56px 100px;
  margin-top: 220px;
}
footer .big-mail {
  display: block;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(34px, 5.28vw, 76px);
  line-height: 1.44;
  word-break: break-all;
}
footer .big-mail + .big-mail { margin-top: 8px; }
footer .bottom {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 320px;
  font-size: 13px;
}
footer .bottom nav { display: flex; gap: 34px; opacity: .7; }
footer .bottom .copy { font-size: 12px; opacity: .5; }

@media (max-width: 860px) {
  /* 名前とメニューが1行に収まらず重なるため、名前を1行目に独立させる */
  .site-head { padding: 24px 24px 0; flex-wrap: wrap; row-gap: 12px; }
  .site-head .mark { width: 100%; white-space: nowrap; }
  .site-head nav { gap: 20px; font-size: 13px; }
  /* 狭い画面では見出しが切れるので、画面幅に追従させる */
  .giant { padding-left: 15px; font-size: 10vw; }
  .lede { margin: 8px 24px 0; }
  footer { padding: 56px 24px 40px; margin-top: 120px; }
  /* メールアドレスが途中で折り返して読めなくなるので、1行に収まる大きさまで縮める */
  footer .big-mail {
    font-size: min(clamp(34px, 5.28vw, 76px), calc(8.5vw - 5px));
    white-space: nowrap;
    word-break: normal;
  }
  footer .bottom { flex-direction: column; gap: 16px; margin-top: 120px; }
}