/* 株式会社MUSEUM コーポレートサイト
 * 値の正本は docs/01-ブランドガイドライン.md。ここと一致させる。
 * 原則: 白ベース・文字が主役・ブランドカラーは 5〜10%・影とグラデーションは使わない。
 * ストーリーが進むほど要素・線・グリッドを減らし、余白を増やす（docs/01 §8-6）。 */

:root {
  /* §2 Base Colors */
  --color-bg: #FFFFFF;
  --color-surface: #F7F7F5;
  --color-text: #111111;
  --color-text-muted: #6B6B6B;
  --color-border: #E5E5E2;
  --color-system: #B8B8B3;
  /* §2 Brand Color — TODO: ロゴ・既存資産と合わせて決める。いまは仮の色 */
  --color-brand: #E3532E;
  --color-brand-ink: #FFFFFF;

  /* §3 Typography */
  --font: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", system-ui, sans-serif;
  --fs-display: clamp(40px, 7.2vw, 96px);   /* Display  40–52 / 56–72 / 72–104 */
  --fs-heading: clamp(32px, 4.4vw, 56px);   /* Heading  32–40 / 40–64 */
  --fs-sub: clamp(24px, 2.8vw, 34px);
  --fs-body: clamp(16px, 1.2vw, 19px);      /* Body     16–18 / 18–20 */
  --fs-caption: clamp(14px, 1vw, 16px);

  /* §8 Layout */
  --container: 1120px;
  --gutter: clamp(20px, 5vw, 48px);
  --section: clamp(96px, 14vw, 200px);
  --block: clamp(64px, 9vw, 128px);

  /* §6 Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-ui: 200ms;
  --t-base: 600ms;
  --t-story: 1100ms;

  /* §9 UI */
  --radius: 6px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.8;
  font-weight: 400;
  font-feature-settings: "palt";
  overflow-x: hidden;
}
h1, h2, h3, p, ul, ol, dl, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
small { font-size: 0.42em; font-weight: 500; }
em { font-style: normal; color: var(--color-brand); }
.nowrap { white-space: nowrap; }
.pc { display: none; }
.sp { display: inline; }
@media (min-width: 720px) { .pc { display: inline; } .sp { display: none; } }

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

.skip {
  position: absolute; left: 16px; top: -48px; padding: 8px 12px;
  background: var(--color-text); color: #fff; border-radius: var(--radius); z-index: 100;
}
.skip:focus { top: 16px; }

/* ---------- Type ---------- */
.display { font-size: var(--fs-display); font-weight: 700; line-height: 1.12; letter-spacing: -0.01em; }
.heading { font-size: var(--fs-heading); font-weight: 700; line-height: 1.25; letter-spacing: -0.005em; }
.lead { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.9; }
.eyebrow {
  font-size: 13px; font-weight: 600; letter-spacing: 0.18em; color: var(--color-text-muted);
  margin-bottom: 20px;
}
.section-head { margin-bottom: var(--block); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--color-text); }
.brand__symbol { width: 28px; height: 28px; display: block; }
.brand__word { height: 16px; width: auto; display: block; }
.nav { display: flex; gap: clamp(16px, 2.5vw, 32px); align-items: center; font-size: 14px; font-weight: 500; }
.nav a { color: var(--color-text-muted); transition: color var(--t-ui) var(--ease); }
.nav a:hover { color: var(--color-text); }
.nav__cta {
  color: var(--color-text) !important;
  padding: 8px 16px; border: 1px solid var(--color-border); border-radius: 999px;
  transition: border-color var(--t-ui) var(--ease);
}
.nav__cta:hover { border-color: var(--color-text); }
@media (max-width: 600px) { .nav a:not(.nav__cta) { display: none; } }

/* ---------- 1. HERO（Pattern A・中央揃えは Hero と Statement だけ） ---------- */
.hero { padding: calc(var(--section) * 0.9) 0 var(--section); }
.hero__inner { text-align: center; }
.hero__tag { margin-top: 32px; font-size: var(--fs-sub); font-weight: 600; color: var(--color-brand); }
.hero__lead { margin-top: 24px; color: var(--color-text-muted); }
.cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 48px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 28px; border-radius: 999px;
  font-size: 15px; font-weight: 600; line-height: 1;
  border: 1px solid transparent;
  transition: background-color var(--t-ui) var(--ease), border-color var(--t-ui) var(--ease), color var(--t-ui) var(--ease);
}
.btn--primary { background: var(--color-brand); color: var(--color-brand-ink); }
.btn--primary:hover { background: var(--color-text); }
.btn--secondary { background: var(--color-bg); border-color: var(--color-border); color: var(--color-text); }
.btn--secondary:hover { border-color: var(--color-text); }

/* ---------- 2. STORY ---------- */
.story { padding: var(--section) 0; border-top: 1px solid var(--color-border); }
.story__block { margin-top: var(--block); max-width: 720px; }
.story__block:first-of-type { margin-top: 0; }
.story__num { font-size: 13px; font-weight: 600; letter-spacing: 0.18em; color: var(--color-brand); margin-bottom: 12px; }
.story__title { font-size: var(--fs-sub); font-weight: 700; line-height: 1.35; margin-bottom: 28px; }
.story__text p + p { margin-top: 1.2em; }
.story__after { margin-top: 40px; font-size: clamp(18px, 1.7vw, 22px); font-weight: 500; }

/* 01 Growth（Pattern B・Expand） */
.growth { margin: 56px 0 0; padding: 40px 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.growth__row { display: flex; align-items: baseline; gap: clamp(12px, 3vw, 32px); flex-wrap: wrap; }
.growth__from, .growth__to { font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.growth__from { font-size: clamp(36px, 5vw, 64px); color: var(--color-text-muted); }
.growth__to { font-size: clamp(56px, 9vw, 120px); color: var(--color-brand); }
.growth__arrow { flex: 0 0 clamp(32px, 6vw, 80px); height: 2px; background: var(--color-system); align-self: center; position: relative; }
.growth__arrow::after {
  content: ""; position: absolute; right: -1px; top: -5px; width: 12px; height: 12px;
  border-top: 2px solid var(--color-system); border-right: 2px solid var(--color-system); transform: rotate(45deg);
}
.growth__cap { margin-top: 24px; display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; }
.growth__cap strong { font-size: clamp(20px, 2vw, 26px); font-weight: 700; }
.growth__src { font-size: var(--fs-caption); color: var(--color-text-muted); }

/* Expand: 数字が広がる */
.growth[data-reveal] .growth__to { display: inline-block; transform: scale(0.8); transform-origin: left bottom; transition: transform var(--t-story) var(--ease); }
.growth.is-in .growth__to { transform: scale(1); }

/* 02 Complexity（Pattern C・Accumulate）— ここだけ密度を上げる（docs/01 §8-3） */
.story__block--dense { max-width: none; display: grid; gap: 48px; }
.story__block--dense .story__title { font-size: clamp(22px, 2.4vw, 30px); }
@media (min-width: 900px) { .story__block--dense { grid-template-columns: minmax(0, 600px) minmax(0, 1fr); gap: 56px; align-items: start; } }
.verbs { margin-bottom: 28px; font-size: clamp(18px, 1.7vw, 22px); font-weight: 500; line-height: 1.7; }
.frags {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
  padding: 16px;
  /* Fine Grid（薄く、背景として認識できる程度） */
  background-color: var(--color-surface);
  background-image:
    linear-gradient(var(--color-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-border) 1px, transparent 1px);
  background-size: 24px 24px;
  border: 1px solid var(--color-border); border-radius: var(--radius);
}
@media (min-width: 480px) { .frags { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.frag {
  background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 4px;
  padding: 10px 10px 8px; min-height: 64px;
  display: flex; flex-direction: column; gap: 6px;
  transition: opacity var(--t-story) var(--ease), transform var(--t-story) var(--ease);
  transition-delay: var(--d, 0ms);
}
.frag span { font-size: 12px; font-weight: 600; color: var(--color-text-muted); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frag i { display: block; height: 3px; width: var(--w, 60%); background: var(--color-system); border-radius: 2px; }

/* Accumulate: 矩形が積み重なる → Unravel: 03 に入るとほどけて消える */
.frags[data-reveal] .frag { opacity: 0; transform: translateY(8px); }
.frags.is-in .frag { opacity: 1; transform: none; }
.frags.is-unraveled .frag { opacity: 0; transform: translateY(-6px); }
.frags.is-unraveled { background-image: none; border-color: transparent; background-color: transparent; transition: background-color var(--t-story) var(--ease), border-color var(--t-story) var(--ease); }

/* 03 Shift（Pattern E・Flow）— 線と文字だけ */
.shift { margin-top: 48px; display: flex; flex-direction: column; align-items: flex-start; }
.shift__step span { font-size: clamp(20px, 2.4vw, 30px); font-weight: 600; line-height: 1.3; }
.shift__step--old span { color: var(--color-text-muted); }
.shift__step--new span { color: var(--color-brand); }
.shift__line { width: 1px; height: 48px; margin: 12px 0 12px 12px; background: var(--color-system); transform-origin: top; }
.shift[data-reveal] .shift__line { transform: scaleY(0); transition: transform var(--t-base) var(--ease); }
.shift[data-reveal] .shift__step { opacity: 0; transition: opacity var(--t-base) var(--ease); }
.shift.is-in .shift__line, .shift.is-in .shift__step { transform: none; opacity: 1; }
.shift.is-in .shift__line:nth-child(2) { transition-delay: 200ms; }
.shift.is-in .shift__step:nth-child(3) { transition-delay: 500ms; }
.shift.is-in .shift__line:nth-child(4) { transition-delay: 800ms; }
.shift.is-in .shift__step:nth-child(5) { transition-delay: 1100ms; }

/* ---------- 3. VISION（要素を減らし、余白を増やす） ---------- */
.vision { padding: var(--section) 0; border-top: 1px solid var(--color-border); }
.statement {
  font-size: clamp(24px, 3.4vw, 44px); font-weight: 700; line-height: 1.5; letter-spacing: -0.005em;
  max-width: 920px;
}
.sides { display: grid; gap: 48px; margin-top: var(--block); }
@media (min-width: 720px) { .sides { grid-template-columns: 1fr 1fr; gap: 64px; } }
.side { border-top: 1px solid var(--color-text); padding-top: 28px; }
.side__label { font-size: 13px; font-weight: 700; letter-spacing: 0.2em; margin-bottom: 20px; }
.side__intent { font-size: clamp(20px, 2vw, 26px); font-weight: 600; line-height: 1.5; margin-bottom: 28px; }
.side__flow { display: flex; flex-direction: column; gap: 10px; font-weight: 500; }
.side__flow li { position: relative; padding-left: 28px; }
.side__flow li::before {
  content: ""; position: absolute; left: 6px; top: 0.9em; width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-brand);
}
.side__flow li + li::after {
  content: ""; position: absolute; left: 8.5px; top: -12px; width: 1px; height: 14px; background: var(--color-system);
}
.vision__close { margin-top: var(--block); font-size: clamp(18px, 1.8vw, 24px); font-weight: 500; line-height: 1.9; }
.vision__close p + p { margin-top: 1.4em; }
.iii { margin-top: var(--block); padding-top: 40px; border-top: 1px solid var(--color-border); }
.iii__q { font-size: var(--fs-caption); color: var(--color-text-muted); margin-bottom: 12px; }
.iii__words { font-size: clamp(26px, 3.6vw, 48px); font-weight: 700; letter-spacing: 0.01em; line-height: 1.3; display: flex; flex-wrap: wrap; gap: 0 0.5em; }
.iii__words span:first-child { color: var(--color-brand); }
.iii__desc { margin-top: 16px; color: var(--color-text-muted); }

/* ---------- 4. PRODUCTS ---------- */
.products { padding: var(--section) 0; border-top: 1px solid var(--color-border); }
.product-list { display: grid; gap: 24px; }
@media (min-width: 900px) { .product-list { grid-template-columns: repeat(2, 1fr); } }
.product { border: 1px solid var(--color-border); border-radius: var(--radius); padding: clamp(28px, 3.5vw, 44px); }
.product__side { font-size: 12px; font-weight: 700; letter-spacing: 0.2em; color: var(--color-text-muted); margin-bottom: 10px; }
.product__name { font-size: clamp(24px, 2.6vw, 32px); font-weight: 700; line-height: 1.3; }
.product__tag { margin-top: 8px; font-weight: 600; color: var(--color-brand); }
.product__desc { margin-top: 20px; color: var(--color-text-muted); }
.product .link-arrow { margin-top: 28px; }

.link-arrow { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; }
.link-arrow::after {
  content: ""; width: 20px; height: 1px; background: currentColor; position: relative;
  transition: width var(--t-ui) var(--ease);
}
.link-arrow:hover::after { width: 32px; }

/* ---------- 5. COMPANY / ENDING（Statement・中央揃え） ---------- */
.ending { padding: var(--section) 0 calc(var(--section) * 0.7); border-top: 1px solid var(--color-border); text-align: center; }
.ending__lead { max-width: 640px; margin: 0 auto; font-size: clamp(16px, 1.4vw, 19px); color: var(--color-text-muted); }
.ending__lead p + p { margin-top: 1.2em; }
.ending__title { margin-top: 64px; }
.ending__sub { margin-top: 24px; font-size: var(--fs-sub); font-weight: 600; }

.company { margin-top: var(--section); text-align: left; max-width: 720px; margin-left: auto; margin-right: auto; }
.company__head { border-top: 1px solid var(--color-text); padding-top: 28px; }
.company__name { font-size: clamp(20px, 2vw, 24px); font-weight: 700; }
.company__tag { margin-top: 4px; color: var(--color-text-muted); }
.company__origin { display: inline-block; margin-top: 6px; font-size: 14px; }
.company__table { margin-top: 32px; border-top: 1px solid var(--color-border); }
.company__table > div { display: grid; grid-template-columns: 6em 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--color-border); font-size: 15px; }
.company__table dt { color: var(--color-text-muted); font-weight: 500; }
.company__table dd { margin: 0; }
.company__links { margin-top: 32px; display: flex; gap: 32px; flex-wrap: wrap; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--color-border); }
.site-footer__inner { padding: 28px 0; font-size: 13px; color: var(--color-text-muted); }

/* ---------- Reveal（共通。Flow） ---------- */
[data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease); }
[data-reveal].is-in { opacity: 1; transform: none; }

/* 動きを減らす設定の人には、最初から見せる */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal], [data-reveal] * { transition: none !important; opacity: 1 !important; transform: none !important; }
  .frags.is-unraveled .frag { opacity: 0 !important; }
}