/* =========================================================================
   綴路工房 Tsuzuro Kobo — デザイントークン & 共通スタイル
   墨 × 生成り × 深紅 / 明朝主役 / 余白最優先 / 静かな呼吸
   ========================================================================= */

:root {
  /* ---- Color : 墨・生成り・深紅 ---- */
  --ink:        #1A1A1A;   /* 墨 */
  --ink-warm:   #221F1B;   /* やや温かい墨（ヒーロー地） */
  --ink-soft:   #51493E;   /* 二次テキスト */
  --ink-faint:  #8B8275;   /* 三次・キャプション */
  --paper:      #F5F1E8;   /* 生成り */
  --paper-deep: #ECE5D6;   /* 区切り・カード地 */
  --paper-lite: #FAF7EF;   /* 明るい生成り */
  --kurenai:    #B22222;   /* 深紅（栞・主CTA・重要語） */
  --kurenai-dp: #8E1B1B;
  --hairline:   rgba(26,26,26,0.13);
  --hairline-lt:rgba(245,241,232,0.16);

  /* ---- Type ---- */
  --f-mincho:  "Shippori Mincho", "Noto Serif JP", serif;
  --f-sans:    "Noto Sans JP", system-ui, -apple-system, sans-serif;
  --f-serif-en:"EB Garamond", Georgia, serif;
  --f-mono:    "DM Mono", ui-monospace, "SFMono-Regular", monospace;

  /* ---- Rhythm（余白＝コンテンツ） ---- */
  --gutter: clamp(22px, 6vw, 120px);
  --measure: 60ch;
  --section-y: clamp(96px, 16vh, 220px);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --breathe: 820ms;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--f-sans);
  font-weight: 400;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.95;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
h1,h2,h3,h4 { font-weight: 500; line-height: 1.45; margin: 0; }

/* ---------- i18n 表示切替 ---------- */
.en { display: none; }
html[lang="en"] .ja { display: none; }
html[lang="en"] .en { display: revert; }
/* インライン用 */
span.ja, span.en, em.ja, em.en { }

/* 英語版は見出し明朝を欧文セリフへ */
html[lang="en"] .mincho,
html[lang="en"] h1, html[lang="en"] h2, html[lang="en"] h3 {
  font-family: var(--f-serif-en);
  letter-spacing: 0.01em;
}

/* ---------- レイアウト土台 ---------- */
.wrap { width: min(1200px, 100% - var(--gutter) * 2); margin-inline: auto; }
.wrap-narrow { width: min(760px, 100% - var(--gutter) * 2); margin-inline: auto; }
.section { padding-block: var(--section-y); }

.mincho { font-family: var(--f-mincho); font-weight: 500; }
.copy-line { display: block; }

/* セクションラベル（── label ──／栞の赤を一点） */
.eyebrow {
  font-family: var(--f-mono);
  font-size: 13px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 1px;
  background: var(--kurenai);
  display: inline-block;
}

/* ---------- ヘッダー ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px var(--gutter);
  color: var(--paper);
  transition: background var(--breathe) var(--ease), color var(--breathe) var(--ease),
              border-color var(--breathe) var(--ease), padding 400ms var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.solid {
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(120%) blur(10px);
  color: var(--ink);
  border-bottom-color: var(--hairline);
  padding-block: 14px;
}
.brand {
  font-family: var(--f-mincho);
  font-size: 21px; font-weight: 600;
  letter-spacing: 0.16em;
  display: inline-flex; align-items: baseline; gap: 12px;
}
.brand .brand-en {
  font-family: var(--f-mono); font-size: 10.5px;
  letter-spacing: 0.3em; text-transform: uppercase;
  opacity: 0.62; font-weight: 400;
}
/* ロゴ・ワードマーク（透過PNG・1枚を背景の明暗でJS切替） */
.brand .brand-logo { height: 28px; width: auto; display: block; }
@media (max-width: 720px) { .brand .brand-logo { height: 23px; } }
.nav { display: flex; align-items: center; gap: clamp(18px, 2.6vw, 40px); }
.nav-links {
  display: flex;
  gap: clamp(18px, 2.6vw, 40px);
  align-items: center;
}
.nav a {
  font-size: 13px; letter-spacing: 0.16em;
  position: relative; padding-block: 6px;
  opacity: 0.86; transition: opacity 300ms var(--ease);
}
.nav a:hover { opacity: 1; }
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--kurenai);
  transform: scaleX(0); transform-origin: left; transition: transform 360ms var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }

/* 言語切替 */
.lang {
  display: inline-flex; align-items: center; gap: 3px;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.12em;
  border: 1px solid currentColor; border-radius: 999px;
  padding: 4px;
  opacity: 0.8;
  position: relative;
  z-index: 2;
}
.lang button {
  background: none; border: none; color: inherit;
  font: inherit; min-width: 40px; min-height: 32px; padding: 5px 10px; border-radius: 999px;
  opacity: 0.55; transition: opacity 160ms, color 160ms, background 160ms;
  touch-action: manipulation;
  cursor: pointer;
}
/* アクティブ言語は html[lang] を真実の源にする（確実に一致） */
html[lang="ja"] .lang button[data-lang-btn="ja"],
html[lang="en"] .lang button[data-lang-btn="en"],
.lang button[aria-pressed="true"] { opacity: 1; background: var(--kurenai); color: var(--paper); }

.nav-toggle { display: none; }

/* ---------- ボタン / CTA ---------- */
.btn {
  --bg: var(--kurenai); --fg: var(--paper);
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 14px; letter-spacing: 0.14em;
  padding: 15px 30px;
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--bg);
  transition: background 360ms var(--ease), color 360ms var(--ease), transform 360ms var(--ease);
}
.btn:hover { background: var(--kurenai-dp); border-color: var(--kurenai-dp); transform: translateY(-1px); }
.btn .arrow { transition: transform 360ms var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }
.btn--ghost {
  --bg: transparent; --fg: var(--ink);
  border-color: var(--hairline);
}
.btn--ghost:hover { background: transparent; color: var(--kurenai); border-color: var(--kurenai); transform: translateY(-1px); }
.btn--on-ink { --fg: var(--paper); }
html[lang] .btn--ghost.on-ink { --fg: var(--paper); border-color: var(--hairline-lt); }

/* テキストリンク矢印 */
.tlink {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 14px; letter-spacing: 0.1em;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 4px;
  transition: color 300ms var(--ease), border-color 300ms var(--ease);
}
.tlink:hover { color: var(--kurenai); border-color: var(--kurenai); }
.tlink .arrow { transition: transform 320ms var(--ease); }
.tlink:hover .arrow { transform: translateX(4px); }

/* ---------- 画像プレースホルダ（striped + mono label） ---------- */
.ph {
  position: relative;
  background-color: var(--paper-deep);
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0 11px,
    rgba(26,26,26,0.035) 11px 22px
  );
  border: 1px solid var(--hairline);
  display: grid; place-items: center;
  overflow: hidden;
  color: var(--ink-faint);
}
.ph::after {
  content: attr(data-label);
  font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 8px 14px;
  border: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--paper) 70%, transparent);
}
.ph.on-ink {
  background-color: #14110D;
  background-image: repeating-linear-gradient(-45deg, transparent 0 11px, rgba(245,241,232,0.05) 11px 22px);
  border-color: var(--hairline-lt); color: rgba(245,241,232,0.5);
}
.ph.on-ink::after { border-color: var(--hairline-lt); background: rgba(20,17,13,0.5); }

/* 実画像の差し込み（プレースホルダ枠にそのまま落ちる） */
.ph.has-img { background-image: none; background-color: var(--paper-deep); }
.ph.has-img::after { display: none; }
.ph.has-img > img,
.ph.has-img > picture,
.ph.has-img > picture > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph.has-img > img.en { display: none; }
html[lang="en"] .ph.has-img > img.ja { display: none; }
html[lang="en"] .ph.has-img > img.en { display: block; }
.char .ph.has-img > img,
.char .ph.has-img > picture > img { object-position: top center; }          /* 立ち絵は上（顔）基準 */
.lp-hero .ph.has-img > img,
.lp-hero .ph.has-img > picture { position: absolute; inset: 0; }
.pv.has-img > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.pv .play, .pv .pv-cap { z-index: 2; }

/* ---------- 栞ライン（scroll bookmark） ---------- */
.shiori {
  position: fixed; top: 0; left: 0; z-index: 60;
  width: 2px; height: 0;
  background: var(--kurenai);
  transition: height 120ms linear;
  pointer-events: none;
}

/* ---------- スクロール演出 ---------- */
.reveal { opacity: 0; transform: translateY(14px); }
.reveal.in { opacity: 1; transform: none; transition: opacity var(--breathe) var(--ease), transform var(--breathe) var(--ease); }
.reveal.d1 { transition-delay: 120ms; }
.reveal.d2 { transition-delay: 240ms; }
.reveal.d3 { transition-delay: 360ms; }
.reveal.d4 { transition-delay: 480ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero-line, .hero-mark, .hero-scroll { animation: none !important; opacity: 1 !important; }
}

/* ---------- フッター ---------- */
.site-footer {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  padding: clamp(66px, 9vw, 116px) var(--gutter) 42px;
  overflow: hidden;
}
.site-footer::before {
  content: "";
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  top: clamp(28px, 4vw, 52px);
  height: 1px;
  background: linear-gradient(90deg, var(--kurenai), rgba(245,241,232,0.08), transparent);
  opacity: 0.8;
}
.footer-proof {
  max-width: 1200px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(260px, 0.86fr) minmax(320px, 1.14fr);
  gap: clamp(36px, 8vw, 108px);
  align-items: end;
}
.footer-sign {
  position: relative;
  padding-left: clamp(18px, 3vw, 34px);
}
.footer-sign::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4em;
  bottom: 0.3em;
  width: 1px;
  background: linear-gradient(var(--kurenai), rgba(245,241,232,0.12));
}
.footer-kicker {
  display: block;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(245,241,232,0.42);
  margin-bottom: 18px;
}
.footer-brand .mincho {
  font-size: clamp(24px, 2.4vw, 34px);
  letter-spacing: 0.18em;
}
.footer-brand .brand-en {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.34em;
  opacity: 0.48;
  margin-top: 10px;
  text-transform: uppercase;
}
.footer-sign p {
  margin: 26px 0 0;
  max-width: 24ch;
  font-family: var(--f-mincho);
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.9;
  letter-spacing: 0.08em;
  color: rgba(245,241,232,0.72);
}
html[lang="en"] .footer-sign p {
  font-family: var(--f-serif-en);
  font-style: italic;
  letter-spacing: 0.01em;
  max-width: 26ch;
}
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px 22px;
  padding-bottom: 5px;
}
.footer-nav a {
  position: relative;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245,241,232,0.64);
  transition: color 260ms var(--ease);
}
.footer-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 1px;
  background: var(--kurenai);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 320ms var(--ease);
}
.footer-nav a:hover {
  color: var(--paper);
}
.footer-nav a:hover::after {
  transform: scaleX(1);
}
.footer-base {
  max-width: 1200px;
  margin: clamp(44px, 6vw, 74px) auto 0;
  padding-top: 22px;
  border-top: 1px solid rgba(245,241,232,0.1);
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
  justify-content: space-between;
  align-items: center;
}
.footer-base small {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  opacity: 0.44;
}
.footer-base .legal {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
}
.footer-base .legal a {
  font-size: 11px;
  opacity: 0.5;
  letter-spacing: 0.08em;
  transition: opacity 240ms var(--ease), color 240ms var(--ease);
}
.footer-base .legal a:hover {
  opacity: 1;
  color: var(--paper);
}

/* ---------- 汎用 ---------- */
.lead { font-size: clamp(17px, 1.4vw, 20px); line-height: 2.05; color: var(--ink-soft); max-width: var(--measure); }
.divider-line { height: 1px; background: var(--hairline); border: 0; margin: 0; }

/* レスポンシブ：ナビ */
@media (max-width: 720px) {
  .nav .nav-links { display: none; }
  .lang { font-size: 11px; }
  .lang button { min-width: 42px; min-height: 34px; }
  .brand .brand-en { display: none; }
}
@media (max-width: 640px) {
  :root {
    --gutter: clamp(18px, 5.6vw, 28px);
    --section-y: clamp(72px, 11vh, 120px);
  }
  .wrap,
  .wrap-narrow {
    width: min(100% - var(--gutter) * 2, 1200px);
  }
  .site-header {
    padding: 16px var(--gutter);
  }
  .site-header.solid {
    padding-block: 12px;
  }
  .eyebrow {
    white-space: normal;
    font-size: 11px;
    letter-spacing: 0.22em;
    line-height: 1.7;
  }
  .eyebrow::before {
    width: 20px;
    flex: 0 0 20px;
  }
  .sec-head {
    margin-bottom: clamp(30px, 8vw, 48px);
  }
  .lead {
    font-size: 16px;
    line-height: 1.95;
  }
  .btn {
    width: 100%;
    justify-content: center;
    padding: 14px 18px;
    font-size: 13px;
    letter-spacing: 0.08em;
  }
  .tlink {
    font-size: 13px;
    letter-spacing: 0.06em;
  }
  .footer-proof {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .footer-nav {
    justify-content: flex-start;
    gap: 12px 18px;
  }
  .footer-base {
    align-items: flex-start;
    width: 100%;
  }
  .footer-base .legal {
    width: 100%;
    gap: 12px 18px;
  }
}
@media (max-width: 380px) {
  .brand .brand-logo { height: 21px; }
  .lang button { min-width: 38px; padding-inline: 8px; }
  .mobile-menu a {
    font-size: 26px;
  }
}

/* ============ ブラッシュアップ（共通） ============ */
/* 選択ハイライトを栞の赤に */
::selection { background: var(--kurenai); color: var(--paper); }
/* キーボード操作のフォーカスを可視化（アクセシビリティ） */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--kurenai); outline-offset: 3px; border-radius: 2px;
}
/* 固定ヘッダーぶんアンカー位置をずらす（#news 等が隠れない） */
:target, #news { scroll-margin-top: 96px; }
/* 画像のちらつき抑制（読み込み前の高さ確保） */
.ph.has-img { background-color: var(--paper-deep); }