/* =================================================================
   語縁 GOEN — "線と余白で導く" リデザイン
   静かな高級感 / 一本の導線 / 和の余白と現代的ディレクション
   ================================================================= */

:root {
  /* 墨黒・アイボリー・ウォームグレー */
  --ink: #1a1813;          /* 墨のような深い黒（#000ではない） */
  --ink-2: #211e18;
  --ivory: #f4efe4;        /* 温度のあるアイボリーホワイト */
  --ivory-2: #efe8d9;
  --paper: #ebe3d2;
  --warm: #b8af9d;
  --muted: #6f685b;        /* 本文補助 */
  --text: #2a261f;         /* 本文（墨に近い茶黒） */
  /* 深いグリーン */
  --green: #1d4a37;
  --green-deep: #143528;
  --green-mid: #2c6149;
  --green-soft: #3f7a5f;
  /* 控えめなゴールド・ブロンズ */
  --gold: #b3935a;
  --gold-soft: #c9b083;
  --bronze: #9a7b46;
  /* 線（明色セクション用。値は下部の --line-on-light と統一） */
  --line: rgba(26, 24, 19, 0.12);
  --line-soft: rgba(26, 24, 19, 0.08);
  --rail: rgba(120, 110, 92, 0.32);
  /* タイポ */
  --en: "Cormorant Garamond", "Shippori Mincho", serif;
  --num: "Spectral", "Shippori Mincho", serif;
  --mincho: "Shippori Mincho", "Noto Serif JP", serif;
  --gothic: "Noto Sans JP", sans-serif;
  --sans: "Jost", "Noto Sans JP", sans-serif;
  /* レイアウト */
  --gutter: clamp(22px, 6vw, 110px);
  --nav-x: clamp(22px, 5vw, 64px);
  --brand-mark-size: 38px;
  --rail-x: calc(var(--nav-x) + 19px);
  --scroll-line-w: 50px;
  --maxw: 1180px;

  /* モーショントークン（全演出はこの値だけで組む） */
  --dur-instant: 0.2s;
  --dur-fast: 0.4s;
  --dur-base: 0.8s;
  --dur-slow: 1.0s;
  --dur-hero: 1.6s;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --rise: 20px;

  /* 罫線：明色セクション用・暗色セクション用の2トークンに統一 */
  --line-on-light: rgba(26, 24, 19, 0.12);
  --line-on-light-soft: rgba(26, 24, 19, 0.08);
  --line-on-dark: rgba(244, 239, 228, 0.12);
  --line-on-dark-soft: rgba(244, 239, 228, 0.08);

  /* 影：2層まで */
  --shadow-soft: 0 1px 2px rgba(0,0,0,0.2), 0 8px 24px rgba(0,0,0,0.25);

  /* 縁の糸（新規実装専用トークン。既存の色変数は変更しない） */
  --enishi-sumi: var(--ink);
  --enishi-washi: #f7f4ee;
  --enishi-gold: #b89b5e;
  --enishi-gold-line: rgba(184, 155, 94, .28);
  --enishi-gold-dim: rgba(184, 155, 94, .25);
  --enishi-gold-lit: rgba(184, 155, 94, .6);
  --ease-quiet: cubic-bezier(.22, .61, .21, 1);
  --dur-reveal-thread: 1.1s;
  --tracking-label: .22em;
}

* { box-sizing: border-box; }

html { scroll-behavior: auto; scrollbar-width: thin; scrollbar-color: var(--warm) var(--ivory); }
html::-webkit-scrollbar { width: 10px; }
html::-webkit-scrollbar-track { background: var(--ivory); }
html::-webkit-scrollbar-thumb { background-color: var(--warm); border-radius: 6px; border: 2px solid var(--ivory); }

body {
  margin: 0;
  background: var(--ivory);
  color: var(--text);
  font-family: var(--gothic);
  font-weight: 400;
  line-height: 1.95;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 2px;
}

::selection { background: var(--gold); color: var(--ivory); }

h1, h2, h3 { font-feature-settings: "palt"; }

/* ---- 紙の粒子感（微細ノイズ）------------------------------------ */
.grain {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
}

/* ---- 一本の導線レール（HERO→CONTACTを貫く線）------------------- */
.rail {
  position: fixed;
  top: 0; bottom: 0;
  left: var(--rail-x);
  width: 1px;
  z-index: 3;
  pointer-events: none;
  background: var(--rail);
}
.rail__progress {
  position: absolute;
  top: 0; left: 0;
  width: 1px;
  height: 100%;
  transform: scaleY(0);
  transform-origin: top;
  background: linear-gradient(to bottom, var(--gold-soft), var(--green-mid));
}
.rail__bead {
  position: absolute;
  left: -2.5px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(179, 147, 90, 0.14);
  opacity: 0;
  transition: opacity 0.6s ease, top 0.1s linear;
}
@media (max-width: 880px) { .rail { display: none; } }

/* ================================================================
   タイポグラフィ基盤
   ================================================================ */
.en {
  font-family: var(--en);
  font-weight: 300;
  font-style: normal;
  letter-spacing: 0.04em;
  line-height: 0.9;
  text-transform: uppercase;
}
.jp { font-family: var(--gothic); font-weight: 700; }
.jp.mincho, .mincho { font-family: var(--mincho); font-weight: 500; letter-spacing: 0.04em; }

.lead {
  font-family: var(--mincho);
  font-weight: 400;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 2.25;
  color: var(--text);
}
.note { color: var(--muted); font-size: 14px; line-height: 2; }

/* ================================================================
   セクション共通骨格
   ================================================================ */
.shell {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.sec {
  position: relative;
  padding-block: clamp(96px, 13vh, 184px);
  background: linear-gradient(180deg, var(--ivory) 0%, var(--ivory-2) 100%);
}
.sec + .sec { border-top: 1px solid var(--line-soft); }

/* 墨の滲み：明色セクションに和紙的な質感リズムを添える（3箇所限定） */
#about {
  background:
    radial-gradient(560px 560px at 4% -8%, rgba(26,24,19,0.045), transparent 70%),
    linear-gradient(180deg, var(--ivory) 0%, var(--ivory-2) 100%);
}

/* ================================================================
   境界演出（セクションの継ぎ目にのみ手を入れる。内部は変更しない）
   ================================================================ */

/* 小区切り：背景トーンを半歩ずらす（新色は追加せず、既存トークンの並びだけ変える）*/
#problem { background: linear-gradient(180deg, var(--ivory-2) 0%, var(--paper) 100%); }
#works { background: linear-gradient(180deg, var(--paper) 0%, var(--ivory-2) 100%); }
#flow { background: linear-gradient(180deg, var(--ivory-2) 0%, var(--ivory) 100%); }

/* 中区切り：墨溜まりのエッジ（上端 or 下端に薄い墨のグラデーションを重ねる）*/
#quality {
  background:
    linear-gradient(to bottom, rgba(26,24,19,0.1), transparent 160px),
    radial-gradient(560px 560px at 4% -8%, rgba(26,24,19,0.045), transparent 70%),
    linear-gradient(180deg, var(--ivory) 0%, var(--ivory-2) 100%);
}
#service {
  background:
    linear-gradient(to bottom, rgba(26,24,19,0.1), transparent 160px),
    radial-gradient(560px 560px at 96% 108%, rgba(26,24,19,0.045), transparent 70%),
    linear-gradient(180deg, var(--ivory) 0%, var(--ivory-2) 100%);
}
#faq {
  background:
    linear-gradient(to bottom, rgba(26,24,19,0.1), transparent 160px),
    linear-gradient(180deg, var(--ivory) 0%, var(--ivory-2) 100%);
}
#contact {
  background:
    linear-gradient(to bottom, rgba(26,24,19,0.1), transparent 160px),
    linear-gradient(to top, rgba(26,24,19,0.14), transparent 200px),
    linear-gradient(180deg, var(--ivory) 0%, var(--ivory-2) 100%);
}

/* 中区切り：中央から伸びる金線（一度きり。以後動かない）*/
.boundary-line {
  display: block;
  width: clamp(120px, 34%, 320px);
  height: 1px;
  margin: 0 auto clamp(40px, 6vw, 64px);
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.8s var(--ease-out);
}
.boundary-line.is-drawn { transform: scaleX(1); }

/* セクション見出し：英字を大きく静かに、和文を重ねる */
.head { position: relative; margin-bottom: clamp(46px, 6vw, 86px); }
.head .en {
  display: block;
  font-size: clamp(13px, 1vw, 15px);
  letter-spacing: 0.46em;
  color: var(--gold);
  opacity: 0.95;
}
.head .en::after {
  content: "";
  display: inline-block;
  width: clamp(38px, 6vw, 88px);
  height: 1px;
  margin-left: 18px;
  vertical-align: middle;
  background: linear-gradient(90deg, var(--gold), transparent);
}
.head .ghost {
  position: absolute;
  left: -0.04em;
  top: clamp(6px, 1.4vw, 14px);
  z-index: 0;
  font-family: var(--en);
  font-weight: 300;
  font-size: clamp(72px, 13vw, 188px);
  line-height: 0.8;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px rgba(42, 38, 31, 0.10);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}
.head h2 {
  position: relative;
  z-index: 1;
  margin: clamp(40px, 6vw, 78px) 0 0;
  font-size: clamp(25px, 3vw, 42px);
  line-height: 1.7;
  letter-spacing: 0.06em;
  font-weight: 600;
  text-wrap: balance;
}
.head h2.mincho { font-weight: 500; }

/* ================================================================
   ヘッダー
   ================================================================ */
.nav {
  position: fixed;
  top: 0; left: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 84px;
  padding: 0 var(--nav-x);
  color: var(--ivory);
  border-bottom: 1px solid transparent;
  transition: background var(--dur-instant) var(--ease-out), color var(--dur-instant) var(--ease-out), height var(--dur-instant) var(--ease-out), backdrop-filter var(--dur-instant) var(--ease-out), border-color var(--dur-instant) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.nav.is-scrolled {
  height: 70px;
  color: var(--ivory);
  background: rgba(26, 24, 19, 0.85);
  backdrop-filter: blur(12px) saturate(1.1);
  border-bottom-color: rgba(179, 147, 90, 0.18);
}
.nav.is-hidden { transform: translateY(-100%); }
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand img {
  width: var(--brand-mark-size);
  height: var(--brand-mark-size);
  object-fit: contain;
  filter: saturate(0.72) brightness(1.08) contrast(0.96) drop-shadow(0 2px 10px rgba(0,0,0,0.24));
  opacity: 0.94;
  transition: filter var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.nav.is-scrolled .brand img {
  filter: none;
  opacity: 1;
}
.brand__word { display: grid; gap: 3px; line-height: 1; }
.brand__en { font-family: var(--en); font-size: 23px; font-weight: 500; letter-spacing: 0.12em; }
.brand__jp { font-family: var(--mincho); font-size: 10px; letter-spacing: 0.42em; opacity: 0.82; }

.nav__links { display: flex; align-items: center; gap: clamp(20px, 2.6vw, 40px); font-family: var(--sans); font-size: 12.5px; letter-spacing: 0.22em; }
.nav__links a { position: relative; padding: 6px 0; }
.nav__links a:not(.nav__cta)::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-fast) var(--ease-out); opacity: 0.7;
}
@media (hover: hover) { .nav__links a:not(.nav__cta):hover::after { transform: scaleX(1); } }
.nav__cta {
  display: inline-grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  min-width: 158px;
  min-height: 44px;
  padding: 0 48px;
  border: 1px solid rgba(201, 176, 131, 0.34);
  color: var(--ivory);
  background: rgba(20, 53, 40, 0.22);
  box-shadow: inset 0 0 0 1px rgba(244, 239, 228, 0.04), inset 0 -1px 0 rgba(179, 147, 90, 0.18);
  letter-spacing: 0.2em;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.nav__cta::before,
.nav__cta::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 16px;
  height: 1px;
  background: rgba(201, 176, 131, 0.64);
  transform: translateY(-50%);
  transition: width var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.nav__cta::before { left: 16px; }
.nav__cta::after { right: 16px; }
@media (hover: hover) {
  .nav__cta:hover {
    background: rgba(20, 53, 40, 0.42);
    border-color: rgba(201, 176, 131, 0.68);
    box-shadow: 0 14px 30px -24px rgba(0,0,0,0.7), inset 0 -1px 0 rgba(179, 147, 90, 0.46);
    transform: translateY(-1px);
  }
  .nav__cta:hover::before,
  .nav__cta:hover::after {
    width: 20px;
    background: rgba(201, 176, 131, 0.9);
  }
}

.nav__toggle { display: none; }

/* ================================================================
   HERO
   ================================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: var(--ivory);
  background: var(--ink);
}
.hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
/* 写真を全面に敷き、文字面だけを墨の膜で整えるグラデーション */
.hero__bg::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg,
      rgba(26,24,19,0.9) 0%,
      rgba(26,24,19,0.74) 32%,
      rgba(26,24,19,0.5) 62%,
      rgba(26,24,19,0.34) 100%),
    radial-gradient(ellipse at 74% 42%, transparent 42%, rgba(26,24,19,0.26) 100%),
    /* 上端：ナビ可読性のためのスクリム */
    linear-gradient(to bottom, rgba(26,24,19,0.62) 0%, rgba(26,24,19,0.28) 12%, transparent 28%),
    /* 右端：明るい壁を抑える */
    linear-gradient(to left, rgba(26,24,19,0.28) 0%, rgba(26,24,19,0.1) 14%, transparent 32%),
    /* 右上コーナー：最も明るい角を沈める */
    radial-gradient(circle at 100% 0%, rgba(26,24,19,0.42) 0%, transparent 42%),
    /* 下端：次セクションへ滑らかに接地 */
    linear-gradient(to top, rgba(26,24,19,0.65) 0%, rgba(26,24,19,0.28) 10%, transparent 22%);
}
/* 金のリムライト（墨に沈めた分の格を薄く補う） */
.hero__bg::after {
  content: "";
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(215deg, rgba(179,147,90,0.14) 0%, transparent 35%);
  mix-blend-mode: soft-light;
}
.hero__bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 22%;
  filter: brightness(0.68) contrast(1.1) saturate(0.55) sepia(0.16);
  transform: scale(1.05);
}
@media (max-width: 880px) {
  .hero__bg { width: 100%; }
  .hero__bg::before {
    background:
      linear-gradient(to left,
        transparent 0%,
        rgba(26,24,19,0.15) 45%,
        rgba(26,24,19,0.55) 70%,
        rgba(26,24,19,0.85) 88%,
        var(--ink) 100%),
      radial-gradient(ellipse at 78% 45%, transparent 40%, rgba(26,24,19,0.4) 100%),
      linear-gradient(to bottom, rgba(26,24,19,0.62) 0%, rgba(26,24,19,0.28) 12%, transparent 28%),
      linear-gradient(to left, rgba(26,24,19,0.4) 0%, rgba(26,24,19,0.12) 12%, transparent 30%),
      radial-gradient(circle at 100% 0%, rgba(26,24,19,0.5) 0%, transparent 42%),
      linear-gradient(to top, rgba(26,24,19,0.65) 0%, rgba(26,24,19,0.28) 10%, transparent 22%);
  }
}
.hero__overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(140% 100% at 50% 50%, transparent 60%, rgba(0,0,0,0.15) 100%),
    radial-gradient(120% 80% at 78% 18%, rgba(179,147,90,0.16), transparent 46%);
}
/* 斜めに差す光 + 細い導線 */
.hero__beam {
  position: absolute; top: -20%; left: 38%; z-index: 1;
  width: 1px; height: 150%;
  background: linear-gradient(to bottom, transparent, rgba(201,176,131,0.5), transparent);
  transform: rotate(18deg);
  opacity: 0.7;
}
.hero__beam.b2 { left: 52%; opacity: 0.3; transform: rotate(18deg) translateX(40px); }
.hero__plate {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(118deg, transparent 30%, rgba(244,239,228,0.04) 30%, rgba(244,239,228,0.04) 31%, transparent 31%);
}
.hero__inner { position: relative; z-index: 2; width: 100%; }
.hero__eyebrow {
  font-family: var(--sans); font-size: 12px; letter-spacing: 0.4em;
  color: var(--gold-soft); margin: 0 0 30px; padding-left: 2px;
}
.hero__eyebrow::before { content: ""; display: inline-block; width: 30px; height: 1px; background: var(--gold-soft); vertical-align: middle; margin-right: 16px; }
.hero h1 {
  margin: 0;
  font-family: var(--mincho);
  font-weight: 500;
  font-size: clamp(33px, 5.6vw, 78px);
  line-height: 1.42;
  letter-spacing: 0.04em;
  text-shadow: 0 2px 30px rgba(0,0,0,0.35);
  text-wrap: balance;
}
.hero h1 .sub { display: block; font-size: 0.46em; letter-spacing: 0.16em; color: var(--gold-soft); margin-bottom: 1.1em; font-weight: 400; }
.hero__copy { margin: 38px 0 0; font-family: var(--mincho); font-size: clamp(14px, 1.1vw, 16px); letter-spacing: 0.12em; color: rgba(244,239,228,0.82); }
.hero__actions { display: flex; align-items: center; gap: 30px; margin-top: 46px; flex-wrap: wrap; }
.hero__scroll {
  position: absolute; left: var(--rail-x); bottom: 36px; z-index: 2;
  font-family: var(--sans); font-size: 11px; letter-spacing: 0.3em; color: rgba(244,239,228,0.6);
  display: flex; align-items: center; gap: 14px;
  white-space: nowrap;
  transform: translateX(calc(-100% + var(--scroll-line-w)));
}
.hero__scroll span { display: inline-block; width: var(--scroll-line-w); height: 1px; background: rgba(244,239,228,0.5); position: relative; overflow: hidden; }
.hero__scroll span::after { content: ""; position: absolute; left: 0; top: 0; width: 40%; height: 100%; background: var(--gold-soft); animation: scrollLine 2.6s ease-in-out infinite; }
@keyframes scrollLine { 0% { transform: translateX(-100%);} 60%,100%{ transform: translateX(280%);} }

/* ボタン（深緑・控えめな光沢） */
.btn {
  display: inline-grid; place-items: center;
  position: relative;
  overflow: hidden;
  min-height: 54px; padding: 0 60px;
  font-family: var(--gothic); font-size: 14px; font-weight: 700; letter-spacing: 0.14em;
  color: var(--ivory);
  border: 1px solid rgba(201,176,131,0.48);
  background: rgba(20, 53, 40, 0.46);
  box-shadow: 0 14px 30px -26px rgba(0,0,0,0.72), inset 0 0 0 1px rgba(244,239,228,0.05), inset 0 -1px 0 rgba(179,147,90,0.18);
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.btn::before,
.btn::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 28px;
  height: 1px;
  background: rgba(201,176,131,0.68);
  transform: translateY(-50%);
  transition: width var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.btn::before { left: 18px; }
.btn::after { right: 18px; }
@media (hover: hover) {
  .btn:hover {
    transform: translateY(-1px);
    background: rgba(20, 53, 40, 0.58);
    border-color: rgba(201,176,131,0.72);
    box-shadow: 0 18px 34px -26px rgba(0,0,0,0.76), inset 0 -1px 0 rgba(179,147,90,0.5);
  }
  .btn:hover::before,
  .btn:hover::after {
    width: 40px;
    background: rgba(201,176,131,0.92);
  }
}
.hero .btn {
  border-color: rgba(201,176,131,0.34);
  background: rgba(20, 53, 40, 0.22);
}
@media (hover: hover) {
  .hero .btn:hover {
    background: rgba(20, 53, 40, 0.42);
    border-color: rgba(201,176,131,0.68);
  }
}
.btn--ghost {
  background: transparent; color: var(--ivory); border-color: rgba(244,239,228,0.4);
  box-shadow: none; min-height: 54px;
}
@media (hover: hover) { .btn--ghost:hover { border-color: var(--gold-soft); transform: none; } }
.link-quiet {
  font-family: var(--sans); font-size: 12.5px; letter-spacing: 0.16em; color: inherit;
  display: inline-flex; align-items: center; gap: 12px;
}
.link-quiet::after { content: ""; width: 30px; height: 1px; background: currentColor; transition: width var(--dur-fast) var(--ease-out); opacity: 0.7; }
@media (hover: hover) { .link-quiet:hover::after { width: 52px; } }

/* ================================================================
   QUALITY — 余白の2カラム + 流れる線
   ================================================================ */
.quality__grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(30px, 6vw, 92px); align-items: start; }
.quality__statement { font-family: var(--mincho); font-size: clamp(19px, 1.7vw, 25px); line-height: 2.1; letter-spacing: 0.04em; color: var(--text); }
.quality__statement .accent { color: var(--green); position: relative; white-space: nowrap; }
.quality__statement .accent::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: linear-gradient(90deg, var(--green), var(--gold)); }
.quality__body p { margin: 0 0 1.7em; }
.flow-line {
  position: relative; height: 1px; margin: 8px 0 30px; background: var(--line); overflow: hidden;
  transform: scaleX(0); transform-origin: left; transition: transform var(--dur-base) var(--ease-out);
}
.flow-line.is-in { transform: scaleX(1); }
.flow-line::after { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 36%; background: linear-gradient(90deg, transparent, var(--gold), transparent); animation: drift 6s linear infinite; }
@keyframes drift { from { transform: translateX(-120%);} to { transform: translateX(420%);} }

/* ================================================================
   PROBLEM — 欠けた導線の診断チャート（カード無し）
   ================================================================ */
.diagnose { position: relative; display: grid; gap: 0; }
.diagnose__row {
  position: relative;
  display: grid;
  grid-template-columns: clamp(64px, 8vw, 116px) 1fr;
  gap: clamp(20px, 4vw, 54px);
  padding: clamp(30px, 4vw, 50px) 0;
  border-top: 1px solid var(--line);
}
.diagnose__row:last-child { border-bottom: 1px solid var(--line); }
.diagnose__no { font-family: var(--num); font-size: clamp(34px, 4vw, 58px); font-weight: 300; color: var(--green); line-height: 1; font-variant-numeric: tabular-nums; }
.diagnose__no small { display: block; font-family: var(--sans); font-size: 10px; letter-spacing: 0.3em; color: var(--gold); margin-top: 10px; }
.diagnose__txt h3 { margin: 0 0 12px; font-size: clamp(19px, 2vw, 26px); font-weight: 700; letter-spacing: 0.04em; }
.diagnose__txt p { margin: 0; color: var(--muted); font-family: var(--mincho); }
/* 欠けた縁を示す破線コネクタ */
.diagnose__row::before {
  content: ""; position: absolute; left: clamp(31px, 4vw, 57px); top: 50%; bottom: -50%;
  width: 1px;
  background: repeating-linear-gradient(to bottom, var(--line) 0 6px, transparent 6px 14px);
}
.diagnose__row:last-child::before { display: none; }
.diagnose__row .dot { position: absolute; left: clamp(28px, 4vw, 54px); top: clamp(30px, 4vw, 50px); width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--green); background: var(--ivory); }

/* ================================================================
   SYSTEM — 一本の導線（階段状）
   ================================================================ */
.system__line { position: relative; margin-top: 10px; }
.system__rail { position: absolute; left: clamp(10px, 2vw, 26px); top: 0; bottom: 0; width: 1px; background: var(--line); }
.system__fill { position: absolute; left: clamp(10px, 2vw, 26px); top: 0; width: 1px; height: 100%; transform: scaleY(0); transform-origin: top; background: linear-gradient(var(--green), var(--gold)); }
.step {
  position: relative;
  display: grid;
  grid-template-columns: clamp(54px, 7vw, 96px) 1fr;
  gap: clamp(18px, 3vw, 44px);
  padding: clamp(26px, 3.4vw, 44px) 0 clamp(26px, 3.4vw, 44px) clamp(28px, 4vw, 60px);
  align-items: baseline;
}
.step__no { font-family: var(--num); font-size: clamp(30px, 3.4vw, 50px); font-weight: 300; color: var(--green); line-height: 1; font-variant-numeric: tabular-nums; transition: color var(--dur-base) var(--ease-out); }
.step__no.is-lit { color: var(--gold); }
.step__txt h3 { margin: 0 0 8px; font-size: clamp(18px, 1.8vw, 23px); font-weight: 700; letter-spacing: 0.05em; }
.step__txt p { margin: 0; color: var(--muted); font-family: var(--mincho); }
.step::before { content: ""; position: absolute; left: clamp(7px, 2vw, 23px); top: clamp(34px, 3.6vw, 52px); width: 7px; height: 7px; border-radius: 50%; background: var(--ivory); border: 1px solid var(--green); z-index: 1; }

/* ================================================================
   SERVICE — 雑誌の目次（番号・見出し・短文、線でつなぐ）
   ================================================================ */
.index-list { border-top: 1px solid var(--line); }
.index-row {
  display: grid;
  grid-template-columns: clamp(50px, 6vw, 90px) minmax(0, 1.1fr) 1.4fr;
  gap: clamp(18px, 3vw, 50px);
  align-items: baseline;
  padding: clamp(26px, 3.2vw, 42px) 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left var(--dur-fast) var(--ease-out);
}
@media (hover: hover) { .index-row:hover { padding-left: 16px; } }
.index-row__no { font-family: var(--num); font-size: clamp(20px, 1.8vw, 26px); color: var(--gold); letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }
.index-row__name { font-size: clamp(19px, 1.9vw, 25px); font-weight: 700; letter-spacing: 0.05em; transition: color var(--dur-fast) var(--ease-out); }
.index-row__name .en-s { display: block; font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: 0.28em; color: var(--muted); margin-top: 10px; }
.index-row__desc { margin: 0; color: var(--muted); font-family: var(--mincho); }
@media (hover: hover) { .index-row:hover .index-row__name { color: var(--green); } }

/* ================================================================
   WORKS — モックの斜め重なり（白い空箱を置かない）
   ================================================================ */
.works { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(30px, 6vw, 80px); align-items: center; }
.works__stage { position: relative; min-height: 440px; }
.works__stage.works__stage--pending {
  min-height: clamp(260px, 32vw, 440px);
  display: grid;
  place-items: center;
}
.works-pending {
  position: relative;
  width: min(100%, 440px);
  min-height: clamp(220px, 24vw, 320px);
  display: grid;
  place-items: center;
  gap: 14px;
  text-align: center;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.works-pending::before,
.works-pending::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(179,147,90,0.62), transparent);
}
.works-pending::before { top: 28px; }
.works-pending::after { bottom: 28px; }
.works-pending__en {
  display: block;
  color: var(--gold);
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.works-pending p {
  margin: 0;
  color: var(--green-deep);
  font-family: var(--mincho);
  font-size: clamp(28px, 4vw, 46px);
  letter-spacing: 0.18em;
}
.works__list { display: grid; gap: 30px; }
.works__item { padding-left: 26px; border-left: 1px solid var(--line); transition: border-color var(--dur-fast) var(--ease-out); }
.works__item h3 { margin: 0 0 8px; font-size: clamp(17px, 1.7vw, 21px); font-weight: 700; letter-spacing: 0.05em; }
.works__item p { margin: 0; color: var(--muted); font-family: var(--mincho); }
@media (hover: hover) { .works__item:hover { border-left-color: var(--gold); } }

/* ================================================================
   INSIGHT — 墨黒背景・深緑の光
   ================================================================ */
.insight {
  position: relative;
  background: var(--ink);
  color: var(--ivory);
  overflow: hidden;
  border-top: none !important;
}
.insight::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(70% 60% at 82% 22%, rgba(45,97,73,0.5), transparent 56%),
    radial-gradient(50% 50% at 10% 88%, rgba(179,147,90,0.12), transparent 60%);
}
.insight .shell { position: relative; z-index: 1; }
.insight .head .en { color: var(--gold-soft); }
.insight .head .ghost { -webkit-text-stroke: 1px rgba(244,239,228,0.12); }
.insight .head h2 { color: var(--ivory); }
.insight__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(30px, 6vw, 80px); align-items: start; }
.insight__lead { font-family: var(--mincho); font-size: clamp(17px, 1.5vw, 22px); line-height: 2.15; color: rgba(244,239,228,0.92); }
.insight__body p { margin: 0 0 1.6em; color: rgba(244,239,228,0.72); font-family: var(--mincho); }
.insight__sign { margin-top: 36px; font-family: var(--en); font-size: 20px; letter-spacing: 0.1em; color: var(--gold-soft); }
.insight__sign span { display: block; font-family: var(--sans); font-size: 10px; letter-spacing: 0.3em; color: rgba(244,239,228,0.5); margin-top: 8px; }
.insight .flow-line { background: var(--line-on-dark); }

/* ================================================================
   PLANS — 4つの入口（分岐する導線）
   ================================================================ */
.plans { display: grid; gap: 0; }
.plan-row {
  display: grid;
  grid-template-columns: clamp(48px, 5vw, 78px) 1fr auto;
  gap: clamp(16px, 3vw, 44px);
  align-items: center;
  padding: clamp(24px, 3vw, 40px) 0;
  border-bottom: 1px solid var(--line);
}
.plans .plan-row:first-child { border-top: 1px solid var(--line); }
.plan-row__no { font-family: var(--num); font-size: clamp(22px, 2vw, 30px); color: var(--green); font-variant-numeric: tabular-nums; }
.plan-row__main h3 { margin: 0 0 6px; font-size: clamp(17px, 1.7vw, 22px); font-weight: 700; letter-spacing: 0.04em; }
.plan-row__main p { margin: 0; color: var(--muted); font-family: var(--mincho); }
.plan-row__arrow { font-family: var(--sans); font-size: 12px; letter-spacing: 0.18em; color: var(--gold); display: inline-flex; align-items: center; gap: 12px; opacity: 0.85; }
.plan-row__arrow::after { content: ""; width: 24px; height: 1px; background: var(--gold); transition: width var(--dur-fast) var(--ease-out); }
@media (hover: hover) { .plan-row:hover .plan-row__arrow::after { width: 46px; } }

/* ================================================================
   FLOW — 縦に伸びる一本の線
   ================================================================ */
.flow { position: relative; padding-left: clamp(20px, 4vw, 54px); }
.flow__rail { position: absolute; left: clamp(4px, 2vw, 18px); top: 6px; bottom: 6px; width: 1px; background: var(--line); }
.flow__fill { position: absolute; left: clamp(4px, 2vw, 18px); top: 6px; width: 1px; height: calc(100% - 12px); transform: scaleY(0); transform-origin: top; background: linear-gradient(var(--gold), var(--green)); }
.flow-step { position: relative; display: grid; grid-template-columns: clamp(52px, 6vw, 90px) 1fr; gap: clamp(18px, 3vw, 40px); padding: clamp(24px, 3vw, 40px) 0; align-items: baseline; }
.flow-step::before { content: ""; position: absolute; left: calc(clamp(4px, 2vw, 18px) - clamp(20px, 4vw, 54px) - 3px); top: clamp(30px, 3vw, 46px); width: 9px; height: 9px; border-radius: 50%; background: var(--ivory); border: 1px solid var(--green); }
.flow-step__no { font-family: var(--num); font-size: clamp(28px, 3vw, 46px); font-weight: 300; color: var(--green); font-variant-numeric: tabular-nums; transition: color var(--dur-base) var(--ease-out); }
.flow-step__no.is-lit { color: var(--gold); }
.flow-step__txt h3 { margin: 0 0 8px; font-size: clamp(18px, 1.7vw, 22px); font-weight: 700; letter-spacing: 0.05em; }
.flow-step__txt p { margin: 0; color: var(--muted); font-family: var(--mincho); }

/* ================================================================
   FAQ — 細い罫線のアコーディオン
   ================================================================ */
.faq { border-top: 1px solid var(--line); max-width: 880px; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%; text-align: left; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: clamp(22px, 2.6vw, 34px) 0;
  background: none; border: 0; color: inherit;
  font-family: var(--mincho); font-size: clamp(16px, 1.5vw, 20px); font-weight: 500; letter-spacing: 0.04em;
  transition: color var(--dur-fast) var(--ease-out);
}
@media (hover: hover) {
  .faq__q:hover { color: var(--green); }
  .faq__q:hover .faq__mark::before, .faq__q:hover .faq__mark::after { background: var(--gold); }
}
.faq__mark { position: relative; flex: none; width: 16px; height: 16px; }
.faq__mark::before, .faq__mark::after { content: ""; position: absolute; left: 0; top: 50%; width: 16px; height: 1px; background: var(--green); transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.faq__mark::before { transform: rotate(0deg); }
.faq__mark::after { transform: rotate(90deg); }
.faq__item.open .faq__mark::before { transform: rotate(45deg); }
.faq__item.open .faq__mark::after { transform: rotate(-45deg); }
.faq__a { overflow: hidden; max-height: 0; transition: max-height var(--dur-fast) var(--ease-inout); }
.faq__a p { margin: 0; padding: 0 0 clamp(24px, 2.6vw, 34px); color: var(--muted); font-family: var(--mincho); max-width: 64ch; }

/* ================================================================
   ABOUT — ブランドステートメント
   ================================================================ */
.about { display: grid; grid-template-columns: 1fr 0.92fr; gap: clamp(30px, 6vw, 86px); align-items: start; }
.about__statement { font-family: var(--mincho); font-size: clamp(20px, 2vw, 30px); line-height: 2.1; letter-spacing: 0.05em; }
.about__statement .accent { color: var(--green); }
.about__meta { display: grid; gap: 0; align-self: end; }
.about__meta div { display: grid; grid-template-columns: clamp(74px, 7vw, 96px) 1fr; gap: 20px; padding: 16px 0; border-top: 1px solid var(--line); }
.about__meta div:last-child { border-bottom: 1px solid var(--line); }
.about__meta dt { font-family: var(--sans); font-size: 11px; letter-spacing: 0.2em; color: var(--gold); }
.about__meta dd { margin: 0; font-size: 14.5px; color: var(--text); font-family: var(--mincho); }

/* ================================================================
   CONTACT — 線だけのミニマルフォーム
   ================================================================ */
.contact { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(34px, 6vw, 90px); align-items: start; }
.contact__intro p { font-family: var(--mincho); font-size: clamp(15px, 1.3vw, 18px); line-height: 2.2; color: var(--text); margin: 0 0 2em; }
.contact__assure { display: flex; gap: 22px; flex-wrap: wrap; font-family: var(--sans); font-size: 11.5px; letter-spacing: 0.16em; color: var(--muted); margin-top: 30px; }
.contact__assure span { display: inline-flex; align-items: center; gap: 10px; }
.contact__assure span::before { content: ""; width: 14px; height: 1px; background: var(--gold); }
.form { display: grid; gap: clamp(22px, 3vw, 34px); }
.field { display: grid; gap: 10px; }
.field label { font-family: var(--sans); font-size: 11px; letter-spacing: 0.2em; color: var(--muted); }
.field input, .field textarea {
  width: 100%; padding: 12px 2px; border: 0; border-bottom: 1px solid var(--line);
  background: transparent; color: var(--text); font-family: var(--mincho); font-size: 16px;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--gold); }
.field textarea { resize: vertical; min-height: 96px; }
.form .btn {
  width: 100%;
  min-height: 58px;
  margin-top: 8px;
  padding-inline: 34px;
}

/* CONTACT — 公式LINE誘導エリア */
.contact-line { display: block; }
.contact-line .en { display: block; margin-bottom: 24px; }
.contact-line__lead {
  font-weight: 600;
  font-size: clamp(22px, 2.1vw, 29px);
  line-height: 1.65;
  letter-spacing: 0.03em;
  color: var(--text);
  margin: 0 0 22px;
}
.contact-line__copy {
  font-family: var(--mincho);
  font-size: clamp(14.5px, 1.15vw, 16.5px);
  line-height: 2.05;
  color: var(--muted);
  margin: 0;
}
.contact-line .flow-line { margin: 28px 0 30px; }
.contact-line__cta {
  width: 100%;
  min-height: 58px;
  padding-inline: 62px 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  border-color: rgba(201,176,131,0.56);
  background: rgba(20, 53, 40, 0.84);
  box-shadow: 0 18px 34px -26px rgba(0,0,0,0.76), inset 0 0 0 1px rgba(244,239,228,0.06), inset 0 -1px 0 rgba(179,147,90,0.36);
}
.contact-line__cta::after { right: 58px; }
.contact-line__cta > span:first-child { text-align: center; }
.contact-line__arrow {
  position: absolute;
  right: 24px;
  font-family: var(--sans);
  font-size: 16px;
  transition: transform var(--dur-fast) var(--ease-out);
}
@media (hover: hover) {
  .contact-line__cta:hover {
    background: rgba(20, 53, 40, 0.92);
    border-color: rgba(201,176,131,0.78);
  }
  .contact-line__cta:hover .contact-line__arrow { transform: translateX(5px); }
}
.contact-line .contact__assure { margin-top: 26px; }

/* ================================================================
   フッター
   ================================================================ */
.foot {
  position: relative;
  background: var(--ink);
  color: var(--ivory);
  padding: clamp(60px, 8vw, 96px) 0 44px;
}
.foot::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--enishi-gold-line); }
.foot__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; flex-wrap: wrap; padding-bottom: 44px; border-bottom: 1px solid var(--line-on-dark); }
.foot .brand img {
  filter: none;
  opacity: 1;
}
.foot__tag { font-family: var(--mincho); font-size: 15px; letter-spacing: 0.08em; color: rgba(244,239,228,0.72); max-width: 30ch; line-height: 2; }
.foot__nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  column-gap: 28px;
  row-gap: 14px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.18em;
}
.foot__nav a { color: rgba(244,239,228,0.74); transition: color var(--dur-fast) var(--ease-out); }
.foot__nav .foot__line {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-left: 22px;
  color: rgba(199,176,119,0.88);
}
.foot__nav .foot__line::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 12px;
  height: 1px;
  background: rgba(199,176,119,0.62);
  transform: translateY(-50%);
}
.foot__line-icon {
  display: block;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  object-fit: contain;
}
@media (hover: hover) {
  .foot__nav a:hover { color: var(--gold-soft); }
  .foot__nav .foot__line:hover { color: var(--ivory); }
}
.foot__bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-top: 30px; font-family: var(--sans); font-size: 11px; letter-spacing: 0.14em; color: rgba(244,239,228,0.5); }

/* ================================================================
   リビール演出（静かに浮かび上がる）
   ================================================================ */
.reveal { opacity: 0; transform: translateY(var(--rise)); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out), filter var(--dur-slow) var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; filter: none; }
.reveal[data-d="1"] { transition-delay: 0.12s; }
.reveal[data-d="2"] { transition-delay: 0.24s; }
.reveal[data-d="3"] { transition-delay: 0.36s; }
.reveal[data-d="4"] { transition-delay: 0.48s; }
.reveal[data-d="5"] { transition-delay: 0.6s; }
@media (min-width: 721px) {
  .reveal--blur { filter: blur(3px); }
  .reveal--blur.is-in { filter: none; }
}

/* ================================================================
   レスポンシブ
   ================================================================ */
@media (max-width: 980px) {
  .quality__grid, .insight__grid, .about, .contact, .works { grid-template-columns: 1fr; }
  .works__stage { min-height: 360px; margin-bottom: 30px; }
  .index-row { grid-template-columns: clamp(40px, 8vw, 60px) 1fr; }
  .index-row__desc { grid-column: 2; }
}
@media (max-width: 720px) {
  .nav__links { position: fixed; inset: 0; flex-direction: column; justify-content: center; gap: 30px; background: rgba(20,18,13,0.96); backdrop-filter: blur(10px); font-size: 15px; transform: translateX(100%); transition: transform 0.5s cubic-bezier(.2,.7,.2,1); }
  body.is-locked .nav__links { transform: none; }
  .nav__toggle { display: inline-flex; flex-direction: column; gap: 5px; z-index: 50; width: 34px; height: 34px; align-items: center; justify-content: center; background: none; border: 0; cursor: pointer; }
  .nav__toggle span { width: 24px; height: 1.5px; background: currentColor; transition: transform 0.4s ease, opacity 0.3s ease; }
  body.is-locked .nav__toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  body.is-locked .nav__toggle span:nth-child(2) { opacity: 0; }
  body.is-locked .nav__toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
  .plan-row { grid-template-columns: clamp(40px,10vw,60px) 1fr; }
  .plan-row__arrow { display: none; }
  .hero h1 { font-size: clamp(30px, 8vw, 44px); }
}

/* ================================================================
   モバイル最適化（作り込み）
   ================================================================ */
/* 縦リズム・見出し・数字・本文を狭幅に最適化 */
@media (max-width: 720px) {
  .sec { padding-block: clamp(66px, 13vw, 108px); }
  .head { margin-bottom: 38px; }
  .head .en { font-size: 12px; letter-spacing: 0.34em; }
  .head .en::after { width: 40px; margin-left: 14px; }
  .head .ghost { font-size: clamp(52px, 17vw, 94px); top: 4px; }
  .head h2 { margin-top: 34px; font-size: clamp(22px, 6.2vw, 30px); line-height: 1.62; }
  .hero__eyebrow { margin-bottom: 22px; letter-spacing: 0.28em; font-size: 11px; }
  .hero__eyebrow::before { width: 22px; margin-right: 12px; }
  .hero__copy { margin-top: 26px; line-height: 2; }
  .quality__statement { font-size: clamp(18px, 5.4vw, 22px); line-height: 2; }
  .about__statement, .insight__lead { font-size: clamp(18px, 5.2vw, 22px); line-height: 2; }
  .diagnose__no, .step__no, .flow-step__no { font-size: clamp(30px, 9vw, 44px); }
  .faq__q { font-size: clamp(15px, 4.4vw, 18px); gap: 18px; }
  .contact__intro p { font-size: clamp(15px, 4.2vw, 17px); }
}

/* 最小幅：CTAを押しやすく、余白を締める */
@media (max-width: 480px) {
  .hero__actions { flex-direction: column; align-items: stretch; gap: 18px; }
  .hero__actions .btn { width: 100%; }
  .hero__actions .link-quiet { justify-content: center; }
  .form .btn { width: 100%; }
  .contact__assure { gap: 12px 20px; }
  .foot__top { flex-direction: column; gap: 28px; }
}

/* ================================================================
   モーション抑制
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .reveal, .reveal--blur, .flow-line { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; }
  .hero__bg img { transform: none; }
  .step__no, .flow-step__no { color: var(--gold) !important; }
  .nav.is-hidden { transform: none !important; }
  .boundary-line { transform: scaleX(1) !important; }
}