/* ─── iecocochi — Webの家づくり ───
   Design tokens. 黒は使わず温かい墨色。アクセントはくすんだ黄色。 */

:root {
  /* surface — 薄いグレーをベースに */
  --bg:         #F2F0EA;   /* ウォームなベース */
  --surface:    #FBFBFA;   /* カード/白 */
  --surface-2:  #E8E8E5;   /* 二段沈み */
  --line:       #DEDEDA;   /* 細罫 */
  --line-soft:  #E8E8E4;

  /* ink — 黒ではなく warm charcoal */
  --ink:        #3C362E;
  --ink-soft:   #6B6358;
  --ink-mute:   #70675B;
  --ink-faint:  #BDB5A6;

  /* accent — くすんだ黄色 → ビビッドな黄色 #eae258 */
  --accent:        #eae258;
  --accent-soft:   #f3eb8b;
  --accent-pale:   #fbf6c8;
  --accent-deep:   #b8a92d;
  --accent-ink:    #5c5212;

  /* second accent (very subdued) */
  --sage:       #A8B098;   /* くすんだ若草 */
  --terracotta: #C9876A;   /* ほんのり煉瓦色 */

  /* type */
  --f-display: "Shippori Mincho B1", "Noto Serif JP", "Hiragino Mincho ProN", serif;
  --f-body:    "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic UI", system-ui, sans-serif;
  --f-en:      "Manrope", "Inter", system-ui, sans-serif;
  --f-num:     "Manrope", ui-sans-serif, system-ui, sans-serif;

  /* size */
  --fs-base: 15px;

  /* layout */
  --maxw: 1200px;
  --gutter: 32px;
  --section-y: 160px;

  /* radius */
  --r-sm: 4px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* shadow — 影は最小限、薄く */
  --sh-1: 0 1px 0 rgba(60,54,46,.04), 0 1px 2px rgba(60,54,46,.04);
  --sh-2: 0 1px 0 rgba(60,54,46,.04), 0 8px 24px rgba(60,54,46,.06);
  --sh-3: 0 24px 64px -16px rgba(60,54,46,.10), 0 8px 20px -8px rgba(60,54,46,.06);

  /* motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ─── reset ─── */
*,*::before,*::after { box-sizing: border-box; }
html,body { margin:0; padding:0; overflow-x: hidden; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--fs-base);
  line-height: 1.75;
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
img,svg { display: block; max-width: 100%; }
::selection { background: var(--accent-soft); color: var(--ink); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* keyboard focus — visible on every interactive element, silent for mouse/touch */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ─── type utilities ─── */
.eyebrow {
  font-family: var(--f-body);
  font-size: 13px;
  letter-spacing: .22em;
  color: var(--accent-ink);
  font-weight: 600;
  display: inline-block;
  margin: 0;
}

/* Section title — giant faint English watermark + small accent label + bold JP statement */
.section-title-block {
  margin-bottom: 80px;
  text-align: center;
  position: relative;
  padding: 60px 0 20px;
}
.section-title-block .eyebrow {
  display: block;
  position: relative;
  z-index: 2;
  margin: 0 0 14px;
  color: var(--ink);
  font-family: var(--f-display);
  font-weight: 700;
  letter-spacing: .14em;
  font-size: clamp(20px, 2.2vw, 26px);
  font-style: normal;
  text-transform: none;
}
.section-title-block .h-section {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) scaleY(1.9);
  width: 100vw;
  text-align: center;
  font-family: "Outfit", "Manrope", sans-serif;
  font-weight: 900;
  font-style: normal;
  font-size: clamp(140px, 22vw, 270px);
  line-height: 1;
  letter-spacing: -.01em;
  color: rgba(60,54,46,.028);
  margin: 0;
  text-transform: uppercase;
  white-space: nowrap;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}
.h-section-watermark {
  position: sticky;
  top: 400px;
  height: 0;
  overflow: visible;
  z-index: 0;
  pointer-events: none;
}
.h-section-watermark .h-section {
  position: absolute;
  left: 50%; top: 0;
  transform: translate(-50%, -50%) scaleY(1.6);
  width: 100vw;
  text-align: center;
  font-family: "Outfit", "Manrope", sans-serif;
  font-weight: 900;
  font-style: normal;
  font-size: clamp(90px, 14vw, 170px);
  line-height: 1;
  letter-spacing: -.01em;
  color: rgba(60,54,46,.028);
  margin: 0;
  text-transform: uppercase;
  white-space: nowrap;
}
/* eyebrow-en: CONCEPTのh-sectionと全く同じ値。PCではdisplay:noneで常に非表示。
   スマホの時だけ表示し、代わりに既存の巨大な.h-section-watermarkを非表示にする。 */
.eyebrow-en { display: none; }
@media (max-width: 760px) {
  .h-section-watermark { display: none; }
  .eyebrow-en {
    display: block;
    position: absolute;
    left: 0; right: 0; top: 50%;
    transform: translateY(-50%);
    width: 100%;
    text-align: center;
    font-family: "Outfit", "Manrope", sans-serif;
    font-weight: 900;
    font-style: normal;
    font-size: clamp(64px, 10vw, 120px);
    line-height: 1;
    letter-spacing: -.01em;
    color: rgba(60,54,46,.028);
    text-transform: uppercase;
    white-space: normal;
    z-index: 0;
    pointer-events: none;
  }
}
.h-section-sub {
  position: relative;
  z-index: 2;
  font-family: var(--f-body);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: .06em;
  line-height: 1.9;
  color: var(--ink-soft);
  margin: 14px 0 0;
}

.h-display {
  font-family: var(--f-display);
  font-weight: 500;
  letter-spacing: .02em;
  line-height: 1.35;
  color: var(--ink);
}
.h-section {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 40px);
  letter-spacing: .04em;
  line-height: 1.5;
  color: var(--ink);
}
.lede {
  color: var(--ink-soft);
  line-height: 2;
  letter-spacing: .04em;
}

/* ─── container & section ─── */
.container { width: 100%; max-width: var(--maxw); padding: 0 var(--gutter); margin: 0 auto; }
.section { padding-top: var(--section-y); padding-bottom: var(--section-y); position: relative; overflow-x: hidden; }
.section-title-block { margin-bottom: 72px; }

/* sub line — original Japanese statement, smaller note */
.h-section-note {
  font-family: var(--f-body);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: .04em;
  line-height: 2;
  color: var(--ink-soft);
  margin: 24px 0 0;
  position: relative;
  z-index: 2;
}

/* ─── button — unified: dark pill + yellow arrow circle ─── */
.btn {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 18px 32px;
  border-radius: var(--r-pill);
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .08em;
  transition: background .3s var(--ease), transform .3s var(--ease);
  position: relative;
  white-space: nowrap;
}
.btn-primary, .btn-accent, .btn-ghost {
  background: var(--ink);
  color: #fafafa;
  border: 0;
}
.btn-primary:hover, .btn-accent:hover, .btn-ghost:hover {
  background: var(--ink-soft);
  transform: translateY(-1px);
}
.btn .arr {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .3s var(--ease);
  font-size: 12px;
  line-height: 1;
  flex-shrink: 0;
}
.btn:hover .arr { transform: translateX(3px); }

/* fade in on scroll */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.fade-in.in {
  opacity: 1;
  transform: translateY(0);
}
.fade-in.delay-1 { transition-delay: .08s; }
.fade-in.delay-2 { transition-delay: .16s; }
.fade-in.delay-3 { transition-delay: .24s; }
.fade-in.delay-4 { transition-delay: .32s; }

/* hairline divider */
.hr-soft {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent);
  border: 0; margin: 0;
}

/* responsive base */
@media (max-width: 900px) {
  :root { --section-y: 96px; --gutter: 20px; }
}