*,*::before,*::after{box-sizing:border-box}
body{margin:0}
img{max-width:100%}

/* Layout: ThoughtStream準拠の一段組。本文幅680px、余白多め、罫線のみで区切る。スマホ本文18px基準 */
:root{
  --bg:#FAFAF9;
  --surface:#F5F5F4;
  --fg:#1C1917;
  --fg-sub:#57534E;
  --fg-muted:#78716C;
  --line:#E7E5E4;
  --link:#57534E;
  --font:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;
  --fs-body:1.125rem;   /* 18px */
  --fs-small:0.9375rem; /* 15px */
  --fs-label:0.8125rem; /* 13px */
  --fs-h3:1.1875rem;
  --fs-h2:1.375rem;
  --fs-h1:2.5rem;
  --lh:1.9;
  --measure:680px;
  --fw-head:500; /* 見出しは Medium。本文 Regular との差を控えめに */
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#1C1917;--surface:#26221F;--fg:#E7E5E4;--fg-sub:#BDB7B2;--fg-muted:#A8A29E;--line:#3A3532;--link:#D6D3D1;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#1C1917;--surface:#26221F;--fg:#E7E5E4;--fg-sub:#BDB7B2;--fg-muted:#A8A29E;--line:#3A3532;--link:#D6D3D1;
  color-scheme:dark;
}
@media (min-width:768px){ :root{ --fs-h1:3rem; } }

html{ -webkit-text-size-adjust:100%; }
body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font);
  font-size:var(--fs-body);
  line-height:var(--lh);
  font-weight:400;
  letter-spacing:0.02em;
  font-feature-settings:"palt" 0;
  line-break:strict;
  overflow-wrap:anywhere;
}
.page{
  max-width:var(--measure);
  margin:0 auto;
  padding-left:max(20px, env(safe-area-inset-left, 0px));
  padding-right:max(20px, env(safe-area-inset-right, 0px));
  padding-block:56px 72px;
}
a{ color:var(--link); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:0.25em; }
a:hover{ color:var(--fg); }
a:focus-visible{ outline:2px solid var(--fg); outline-offset:3px; }
strong{ font-weight:var(--fw-head); }
p{ margin:0; }

/* 冒頭 */
.masthead{ display:flex; flex-direction:column; gap:12px; padding-bottom:40px; border-bottom:1px solid var(--line); }
.eyebrow{ font-size:var(--fs-label); color:var(--fg-muted); letter-spacing:0.12em; }
h1{ margin:0; font-size:var(--fs-h1); line-height:1.3; font-weight:var(--fw-head); letter-spacing:0.08em; }
h1 rt{ font-size:0.28em; font-weight:400; letter-spacing:0.3em; color:var(--fg-muted); }
.lead{ font-size:var(--fs-body); color:var(--fg-sub); }
.status{ font-size:var(--fs-small); color:var(--fg-muted); }

/* 節 */
section{ display:flex; flex-direction:column; gap:1.1em; padding-block:44px; border-bottom:1px solid var(--line); }
section:last-of-type{ border-bottom:0; }
h2{ margin:0 0 0.2em; font-size:var(--fs-h2); line-height:1.5; font-weight:var(--fw-head); text-wrap:balance; letter-spacing:0.04em; }
h3{ margin:0; font-size:var(--fs-h3); line-height:1.6; font-weight:var(--fw-head); text-wrap:balance; }

.statement{ font-size:1.25rem; line-height:1.8; font-weight:700; }

blockquote{
  margin:0.4em 0;
  padding-left:1em;
  border-left:1px solid var(--fg-muted);
  font-size:1.25rem;
  line-height:1.8;
}

/* 映画館タイトル */
.h1-cinema{ font-size:2.25rem; letter-spacing:0.06em; line-height:1.45; }
@media (min-width:768px){ .h1-cinema{ font-size:2.75rem; } }

/* 繭のイラスト */
.mayu{ display:block; width:160px; max-width:100%; height:auto; margin-bottom:8px; }

/* 住まいの形 */
.forms{ margin:0; display:flex; flex-direction:column; gap:28px; }
.forms div{ display:flex; flex-direction:column; gap:6px; }
.forms dt{ font-weight:var(--fw-head); }
.forms dd{ margin:0; }

/* 大切にすること */
.values{ display:flex; flex-direction:column; gap:32px; }
.value{ display:flex; flex-direction:column; gap:8px; }

/* 呼びかけ */
.callers{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.callers li{ padding-block:12px; border-bottom:1px solid var(--line); }

/* 歩み */
.history{ margin:0; display:flex; flex-direction:column; border-top:1px solid var(--line); }
.history div{ display:flex; flex-wrap:wrap; column-gap:1.2em; padding-block:12px; border-bottom:1px solid var(--line); }
.history dt{ flex:0 0 7.5em; color:var(--fg-muted); font-size:var(--fs-small); padding-top:0.15em; font-variant-numeric:tabular-nums; }
.history dd{ margin:0; flex:1 1 14em; min-width:0; }

/* 本 */
.books{ margin:0; padding-left:1.2em; display:flex; flex-direction:column; gap:6px; }

/* 連絡先 */
.contact{ background:var(--surface); padding:24px 20px; display:flex; flex-direction:column; gap:16px; }
.contact-row{ display:flex; flex-direction:column; gap:2px; }
.contact-label{ font-size:var(--fs-label); color:var(--fg-muted); letter-spacing:0.1em; }
.colophon{ font-size:var(--fs-small); color:var(--fg-sub); }

footer{ padding-top:32px; font-size:var(--fs-label); color:var(--fg-muted); display:flex; flex-direction:column; gap:10px; }
footer a{ color:var(--fg-muted); }
.footer-links{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; column-gap:1.6em; row-gap:4px; }

/* ===== ヘッダーとグローバルメニュー ===== */
/* スマホ：ハンバーガー。768px以上：横並びメニュー */
.site-header{
  position:sticky; top:env(safe-area-inset-top, 0px); z-index:10;
  background:var(--bg); border-bottom:1px solid var(--line);
}
.site-header-inner{
  max-width:var(--measure); margin:0 auto;
  padding-left:max(20px, env(safe-area-inset-left, 0px));
  padding-right:max(20px, env(safe-area-inset-right, 0px));
  padding-block:0;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  min-height:56px;
}
.site-name{ font-size:var(--fs-small); font-weight:var(--fw-head); color:var(--fg); text-decoration:none; letter-spacing:0.06em; }
.site-name:hover{ color:var(--fg); }

.menu-button{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; margin-right:-10px;
  background:none; border:0; color:var(--fg); cursor:pointer;
}
.menu-button:focus-visible{ outline:2px solid var(--fg); outline-offset:2px; }
.menu-icon, .menu-icon::before, .menu-icon::after{
  display:block; width:22px; height:1.5px; background:currentColor; position:relative;
  transition:transform .2s ease, background-color .2s ease;
}
.menu-icon::before, .menu-icon::after{ content:""; position:absolute; left:0; }
.menu-icon::before{ top:-7px; }
.menu-icon::after{ top:7px; }
/* 開いたときは×に */
.menu-button[aria-expanded="true"] .menu-icon{ background:transparent; }
.menu-button[aria-expanded="true"] .menu-icon::before{ transform:translateY(7px) rotate(45deg); }
.menu-button[aria-expanded="true"] .menu-icon::after{ transform:translateY(-7px) rotate(-45deg); }

.global-nav{ display:none; }
.global-nav.is-open{
  display:block; position:absolute; left:0; right:0; top:100%;
  background:var(--bg); border-bottom:1px solid var(--line);
}
.global-nav ul{
  list-style:none; margin:0 auto; max-width:var(--measure);
  padding-left:max(20px, env(safe-area-inset-left, 0px));
  padding-right:max(20px, env(safe-area-inset-right, 0px));
  padding-block:4px 12px;
}
.global-nav li{ border-top:1px solid var(--line); }
.global-nav li:first-child{ border-top:0; }
.global-nav a{ display:block; padding-block:14px; color:var(--fg); text-decoration:none; font-size:var(--fs-body); }
.global-nav a[aria-current="page"]{ color:var(--fg-muted); }

@media (min-width:768px){
  .menu-button{ display:none; }
  .global-nav, .global-nav.is-open{ display:block; position:static; border:0; background:none; }
  .global-nav ul{ display:flex; gap:28px; padding:0; margin:0; max-width:none; }
  .global-nav li{ border:0; }
  .global-nav a{ padding-block:4px; font-size:var(--fs-small); border-bottom:1px solid transparent; }
  .global-nav a:hover{ border-bottom-color:var(--fg-muted); }
  .global-nav a[aria-current="page"]{ color:var(--fg); border-bottom-color:var(--fg); }
}
@media (prefers-reduced-motion: reduce){ .menu-icon, .menu-icon::before, .menu-icon::after{ transition:none; } }

/* 準備中の表示 */
.wip{ background:var(--surface); padding:20px; font-size:var(--fs-small); color:var(--fg-sub); }

/* 見出しは単語の途中で折り返さない（<wbr> の位置か、句読点で折り返す） */
h1, h2, h3{ word-break:keep-all; overflow-wrap:anywhere; }

/* ページ内リンクで飛んだとき、固定ヘッダーに見出しが隠れないように */
section{ scroll-margin-top:72px; }