/* 配色（背景は純白ではなく，わずかに冷たいグレー寄りの白）．朱は線・下線・強調にだけ使い，本文には使わない */
:root {
  color-scheme: light;
  --paper: #F2F2EF;
  --ink: #23272C;
  --mute: #5E6369;
  --rule: #C9CBC8;
  --accent: #FF6862;
  --font: "Site JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
  --gutter: clamp(20px, 5vw, 72px);
}
@font-face { font-family: "Site JP"; font-weight: 300; font-style: normal; font-display: swap; src: url("../fonts/site-jp-300.woff2") format("woff2"); }
@font-face { font-family: "Site JP"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/site-jp-400.woff2") format("woff2"); }
@font-face { font-family: "Site JP"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/site-jp-500.woff2") format("woff2"); }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); font-size: 17px; line-height: 1.85; font-feature-settings: "palt" 1; -webkit-font-smoothing: antialiased; text-size-adjust: 100%; }
:lang(en) body, body:lang(en) { line-height: 1.7; font-feature-settings: normal; }
a { color: inherit; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 5px; }
a:hover { text-decoration-thickness: 4px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.wrap { padding-inline: var(--gutter); max-width: 1440px; margin-inline: auto; }
.skip { position: absolute; left: var(--gutter); top: -100px; background: var(--ink); color: var(--paper); padding: 8px 14px; z-index: 10; text-decoration: none; }
.skip:focus { top: 8px; }

/* ヘッダー */
.top { position: sticky; top: 0; z-index: 5; background: var(--paper); }
.top .wrap { display: flex; align-items: center; gap: 28px; padding-block: 12px; }
.top .mark { display: inline-flex; align-items: center; gap: 12px; font-weight: 500; text-decoration: none; margin-right: auto; }
.top .logo { display: block; height: 40px; width: auto; }
.top nav { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 28px; font-size: 14px; }
.top nav a { text-decoration: none; }
.top nav a:hover { text-decoration: underline; text-decoration-color: var(--accent); }
.top .lang { color: var(--mute); font-size: 14px; text-decoration: none; }
.top .lang:hover { text-decoration: underline; text-decoration-color: var(--accent); }
.motion { font: inherit; font-size: 14px; color: var(--mute); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.motion:hover { text-decoration-thickness: 4px; }
.reduced .motion { display: none; }
.motion--hero { display: none; }
ul.entries { list-style: none; margin: 0; padding: 0; }
.subnav { display: none; }

/* ヒーロー */
.hero { position: relative; height: min(92vh, 860px); height: min(92svh, 860px); min-height: 560px; overflow: hidden; touch-action: pan-y; }
.hero svg.field, .hero canvas.field { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.js:not(.reduced) .hero svg.field { visibility: hidden; }
.iso path { fill: none; stroke: var(--ink); stroke-opacity: .30; stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.hero .copy { position: absolute; left: 0; right: 0; bottom: clamp(28px, 6vh, 64px); }
.hero h1 { margin: 0; font-weight: 300; font-size: clamp(64px, 11.5vw, 168px); line-height: 1.02; }
:lang(en) .hero h1 { font-size: clamp(44px, 8.6vw, 128px); line-height: 1.05; }
.hero .roman { margin: 14px 0 0; font-size: clamp(18px, 2vw, 26px); font-weight: 400; }
.hero .aff { margin: 22px 0 0; color: var(--mute); font-size: 15px; line-height: 1.7; max-width: 34em; }
.hero .lead { margin: 6px 0 0; font-size: clamp(17px, 1.5vw, 20px); max-width: 30em; }

/* 等温線の区切り（下へ進むほど熱源から遠く，弧が平たくなる） */
.arc { display: block; width: 100%; height: 44px; }
.arc path { fill: none; stroke: var(--rule); stroke-width: 1; vector-effect: non-scaling-stroke; }

/* 本文の台帳（左: 見出し／中央: 本文／右: 余白） */
.sec { padding-block: clamp(40px, 8vw, 96px); }
.row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 7fr) minmax(0, 3fr); column-gap: clamp(20px, 3vw, 48px); row-gap: 20px; }
.row > h2 { margin: 0; font-size: 24px; font-weight: 500; line-height: 1.4; }
.row > .body { max-width: 40em; }
.row > .side { align-self: start; }
.lede { margin: 0; font-size: clamp(19px, 1.7vw, 23px); line-height: 1.9; font-weight: 300; }
:lang(en) .lede { line-height: 1.7; }
.entry { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 0 20px; padding-block: 14px; }
.entry:first-child { padding-top: 0; }
.entry time { color: var(--mute); font-size: 15px; font-variant-numeric: tabular-nums; padding-top: 2px; }
.entry .t { margin: 0; }
.entry .m { margin: 0; color: var(--mute); font-size: 15px; line-height: 1.7; }
.mail { display: inline-block; padding-block: 10px; margin-block: -10px; }  /* 見た目を変えずにタップ領域を広げる（連絡先の主要導線のため） */
.group + .group { margin-top: 44px; }
.group > h3 { margin: 0 0 12px; font-size: 15px; font-weight: 500; color: var(--mute); }
dl.facts { margin: 0; }
dl.facts div { padding-block: 12px; }
dl.facts dt { color: var(--mute); font-size: 15px; }
dl.facts dd { margin: 2px 0 0; }
.later { color: var(--mute); margin: 28px 0 0; }
.portrait { margin: 0; }
.portrait img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
ul.plain { list-style: none; margin: 0; padding: 0; }
ul.plain li { padding-block: 6px; }
.placeholder { color: var(--mute); }

footer { padding-block: 40px 56px; color: var(--mute); font-size: 14px; }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }

@media (max-width: 900px) {
  .row { grid-template-columns: minmax(0, 1fr); }
  .row > .side { order: 3; }
  .top nav { display: none; }
  .top .wrap { gap: 12px; padding-block: 4px; }
  .top .mark { min-height: 44px; }
  .top .lang { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 4px; }
  .motion--header { display: none; }
  .motion--hero { display: inline-flex; align-items: center; position: absolute; z-index: 2; right: calc(var(--gutter) - 4px); top: 0; min-height: 44px; padding: 0 4px; background: rgba(242, 242, 239, .85); }
  .subnav { display: flex; justify-content: space-between; gap: 0; padding-inline: calc(var(--gutter) - 8px); overflow-x: auto; font-size: 14px; scrollbar-width: none; }
  .subnav::-webkit-scrollbar { display: none; }
  .subnav a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding-inline: 8px; text-decoration: none; white-space: nowrap; }
  .subnav a:hover { text-decoration: underline; text-decoration-color: var(--accent); }
  .entry { grid-template-columns: 6.6rem minmax(0, 1fr); gap: 0 14px; }
  .hero { height: min(88vh, 720px); height: min(88svh, 720px); }
}
@media (max-width: 420px) { .subnav a { padding-inline: 5px; } }
@media (max-width: 360px) { .top .mark { gap: 8px; font-size: 15px; } .top .logo { height: 32px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media print { .hero svg.field, .hero canvas.field, .arc, .motion, .skip { display: none; } .hero { height: auto; min-height: 0; } .hero .copy { position: static; } }