/* =========================================================
   圭 設計室 KEI ARCHITECTS ─ ミニマル・スイス余白型
   ヘアライン・精密タイポ・大量の余白・抑制的な写真
   ========================================================= */

:root{
  --paper:#fbfbf9;
  --ink:#1a1a18;
  --grey:#6e6e68;
  --hair:#d8d6cf;          /* ヘアライン */
  --accent:#2f5d4f;        /* 深い緑（建築の植栽を想起） */
  --serif:"Fraunces", serif;
  --mono:"IBM Plex Mono", monospace;
  --sans:"Zen Kaku Gothic New", sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --gut:clamp(1.4rem,5vw,5rem);   /* 共通左右余白 */
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--sans);font-weight:300;
  background:var(--paper);color:var(--ink);
  -webkit-font-smoothing:antialiased;
  line-height:1.95;overflow-x:hidden;
  letter-spacing:.01em;
}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:100%;object-fit:cover}
::selection{background:var(--accent);color:var(--paper)}
.num{font-variant-numeric:tabular-nums}

/* ---------- ヘッダー ---------- */
.head{position:fixed;top:0;left:0;width:100%;z-index:90;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.4rem var(--gut);background:rgba(251,251,249,.86);backdrop-filter:saturate(120%) blur(8px);
  border-bottom:1px solid transparent;transition:border-color .4s}
.head.is-scrolled{border-color:var(--hair)}
.mark{font-family:var(--serif);font-size:1.6rem;font-weight:400;display:flex;align-items:baseline;gap:.6rem}
.mark span{font-family:var(--mono);font-size:.62rem;letter-spacing:.28em;color:var(--grey);text-transform:uppercase}
.nav{display:flex;gap:2.2rem}
.nav a{font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;color:var(--grey);
  position:relative;transition:color .3s}
.nav a::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:1px;background:var(--ink);transition:width .35s var(--ease)}
.nav a:hover{color:var(--ink)}
.nav a:hover::after{width:100%}
.head__cta{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;border:1px solid var(--ink);
  padding:.5rem 1rem;transition:.3s var(--ease)}
.head__cta:hover{background:var(--ink);color:var(--paper)}
.head__toggle{display:none;flex-direction:column;gap:6px;background:none;border:0;cursor:pointer;padding:6px}
.head__toggle span{width:24px;height:1px;background:var(--ink)}

.menu{position:fixed;inset:0;z-index:85;background:var(--paper);
  display:flex;flex-direction:column;justify-content:center;gap:1.6rem;padding:0 var(--gut);
  opacity:0;visibility:hidden;transition:opacity .4s}
.menu.is-open{opacity:1;visibility:visible}
.menu a{font-family:var(--serif);font-size:2rem;font-weight:300}

/* =========================================================
   共通ブロック ─ 大きな余白とキッカー
   ========================================================= */
.block{padding:clamp(5rem,12vh,9rem) var(--gut);position:relative;border-top:1px solid var(--hair)}
.kicker{font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;color:var(--grey);
  text-transform:uppercase;margin-bottom:clamp(2.5rem,6vh,4rem);display:flex;align-items:center;gap:1rem}
.kicker__no{color:var(--accent);font-weight:500}

/* =========================================================
   FV ─ 主役級の「動く製図」
   ========================================================= */
.hero{padding:clamp(8rem,18vh,12rem) var(--gut) clamp(4rem,10vh,7rem);min-height:100vh;
  display:flex;align-items:center;position:relative;overflow:hidden}
.hero__grid{display:grid;grid-template-columns:1fr;gap:0;width:100%;max-width:1280px;margin:0 auto;
  position:relative;z-index:2}

/* ---- 背景の製図グリッド（薄い下地） ---- */
.hero__grid-bg{position:absolute;inset:0;width:100%;height:100%;z-index:0;
  color:var(--accent);opacity:.10;pointer-events:none}
.hero__grid-bg .bp-grid line{stroke-dasharray:1;stroke-dashoffset:0}
html.js-anim .hero__grid-bg .bp-grid line{stroke-dashoffset:1}

/* ---- 主役: 建築写真の流体ディスプレイス（WebGL）フルブリード ----
   CEO決裁（2026-06-04）: 右の建築画像を大判化＝FV全面を覆う大判ヒーローに。
   写真を hero 全面に敷き、左から paper 色のスクリム（薄いグラデ）で
   セリフ見出しのコントラストと可読性を担保（スイスの上品さは維持）。
   _shared/webgl-hero（image-displace / mako-hub方式）で大判のまま流体ディスプレイス。 */
.wgl-hero{isolation:isolate}
.wgl-hero__panel{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.wgl-hero__panel .wgl-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;display:block}
.wgl-hero__panel .wgl-fallback{position:absolute;inset:0;z-index:0;
  background-size:cover;background-position:center}
.wgl-on .wgl-hero__panel .wgl-fallback{opacity:0;transition:opacity .8s ease}
/* 左→右のスクリム: 左側はほぼ paper（テキスト可読）、右へ向け透明（写真全開）。
   下端にも薄いスクリムを足し、index/キャプションの足元も読めるように。 */
.wgl-hero__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(100deg,
      rgba(251,251,249,.97) 0%,
      rgba(251,251,249,.92) 26%,
      rgba(251,251,249,.62) 46%,
      rgba(251,251,249,.12) 66%,
      rgba(251,251,249,0) 82%),
    linear-gradient(0deg, rgba(251,251,249,.30) 0%, rgba(251,251,249,0) 22%)}
@media (prefers-reduced-motion:reduce){
  .wgl-hero__panel .wgl-canvas{display:none!important}
  .wgl-hero__panel .wgl-fallback{opacity:1!important}
}

.hero__label{font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;color:var(--grey);
  display:block;margin-bottom:2rem;text-transform:none}
.hero__title{font-family:var(--serif);font-weight:300;line-height:1.08;letter-spacing:-.01em;
  font-size:clamp(2.6rem,7vw,6rem);max-width:14ch}
.hero__l{display:block;overflow:hidden}
.hero__l > *{display:inline-block}
.hero__read{margin-top:2rem;font-size:clamp(1rem,1.4vw,1.18rem);color:var(--grey);max-width:34ch;font-weight:300}
.hero__rule{margin:2.6rem 0 1.6rem;max-width:560px}
.hero__rule i{display:block;height:1px;background:var(--ink);width:0}
.hero__index{display:flex;gap:2rem;flex-wrap:wrap;font-family:var(--mono);font-size:.74rem;
  letter-spacing:.1em;color:var(--grey)}
.hero__index span{position:relative;padding-left:1rem}
.hero__index span::before{content:"";position:absolute;left:0;top:.7em;width:5px;height:5px;border-radius:50%;background:var(--accent)}
.hero__axo-cap{margin-top:2.4rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;
  color:var(--grey);text-transform:uppercase}

/* =========================================================
   ABOUT
   ========================================================= */
.about{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem);align-items:start}
.about__lead{font-family:var(--serif);font-weight:300;font-size:clamp(1.8rem,3.4vw,3rem);line-height:1.3;letter-spacing:-.01em}
.about__body p{margin-bottom:1.4rem;color:var(--ink);max-width:44ch}
.about__facts{margin-top:2rem;border-top:1px solid var(--hair)}
.about__facts div{display:grid;grid-template-columns:6em 1fr;gap:1rem;padding:.8rem 0;border-bottom:1px solid var(--hair)}
.about__facts dt{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;color:var(--grey);padding-top:.3em}
.about__facts dd{font-size:.95rem}

/* =========================================================
   WORKS ─ 番号付きインデックス
   ========================================================= */
.works{list-style:none}
.work{display:grid;grid-template-columns:5rem clamp(180px,22vw,300px) 1fr;gap:clamp(1.5rem,4vw,4rem);
  align-items:center;padding:clamp(2.5rem,6vh,4.5rem) 0;border-top:1px solid var(--hair)}
.work:first-child{border-top:0}
.work--rev{grid-template-columns:5rem 1fr clamp(180px,22vw,300px)}
.work--rev .work__img{order:3}
.work--rev .work__meta{order:2;text-align:right}
.work--rev .work__no{order:1}
.work__no{font-family:var(--mono);font-size:.82rem;letter-spacing:.08em;color:var(--accent);align-self:flex-start;padding-top:.4rem}
.work__img{aspect-ratio:4/5;overflow:hidden;position:relative}
.work__img img{transition:transform 1.2s var(--ease);transform:scale(1.02);will-change:transform}
.work:hover .work__img img{transform:scale(1.07)}
/* 作品写真のマスク帯: スクロールで accent 色の帯がスライドして写真を出す */
.work__mask{position:absolute;inset:0;background:var(--accent);transform:scaleY(0);transform-origin:top;
  pointer-events:none;z-index:2}
html.js-anim .work__img img{transform:scale(1.16)}
.work__meta h3{font-family:var(--serif);font-weight:300;font-size:clamp(1.6rem,3.2vw,2.8rem);line-height:1.1;letter-spacing:-.01em}
.work__type{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;color:var(--grey);margin:.6rem 0 1rem}
.work__desc{font-size:.95rem;color:var(--ink);max-width:40ch}
.work--rev .work__desc{margin-left:auto}

/* =========================================================
   PROCESS ─ 数字＋ヘアライン（写真なし）
   ========================================================= */
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--ink)}
/* 縦罫線が文字に接しないよう左右に十分なゆとりを確保（スイス余白）。
   罫線は border-right で引くので、各列の右側にも余白を持たせ、罫線が「溝」の中に立つようにする。
   両端は section の左右エッジに本文を揃えるため外側 padding を 0 にする。 */
.step{padding:2.2rem 2.2rem 2.4rem;border-right:1px solid var(--hair)}
.step:first-child{padding-left:0}
.step:last-child{padding-right:0;border-right:0}
.step__no{font-family:var(--mono);font-size:.78rem;letter-spacing:.08em;color:var(--accent);display:block;margin-bottom:1.6rem}
.step h3{font-family:var(--serif);font-weight:400;font-size:1.25rem;margin-bottom:.9rem;line-height:1.35}
.step p{font-size:.9rem;color:var(--grey);line-height:1.85}
.process__note{margin-top:3rem;font-family:var(--mono);font-size:.78rem;line-height:2.1;color:var(--grey);letter-spacing:.04em}

/* =========================================================
   VOICE ─ 施主の声
   ========================================================= */
.voice__score{font-family:var(--serif);font-size:clamp(2.4rem,5vw,3.6rem);font-weight:300;display:flex;align-items:baseline;gap:.8rem;margin-bottom:3rem}
.voice__of{font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;color:var(--grey)}
.voice__list{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,4vw,3.5rem)}
.testi{display:flex;flex-direction:column}
.testi__stars{color:var(--accent);letter-spacing:.14em;font-size:.92rem;margin-bottom:1.2rem}
.testi blockquote{font-family:var(--serif);font-weight:300;font-size:1.12rem;line-height:1.75;flex:1;letter-spacing:-.005em}
.testi figcaption{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--grey);
  margin-top:1.6rem;border-top:1px solid var(--hair);padding-top:1.1rem}

/* =========================================================
   CONTACT ─ CTA
   ========================================================= */
.block--contact{text-align:center;padding-block:clamp(6rem,14vh,11rem)}
.contact__rule{display:flex;justify-content:center;margin-bottom:3rem}
.contact__rule i{display:block;width:0;height:1px;background:var(--accent);max-width:120px}
.block--contact .kicker{justify-content:center}
.contact__title{font-family:var(--serif);font-weight:300;font-size:clamp(2.4rem,6vw,4.6rem);line-height:1.1;letter-spacing:-.01em;margin-bottom:1.4rem}
.contact__lead{font-size:1.05rem;color:var(--grey);max-width:50ch;margin:0 auto 2.6rem}
.contact__actions{display:flex;gap:1.2rem;justify-content:center;flex-wrap:wrap;margin-bottom:3.5rem}
.btn-solid{font-family:var(--mono);font-size:.82rem;letter-spacing:.12em;background:var(--ink);color:var(--paper);
  padding:1.1rem 2.4rem;transition:.35s var(--ease)}
.btn-solid:hover{background:var(--accent);transform:translateY(-2px)}
.btn-thin{font-family:var(--mono);font-size:.82rem;letter-spacing:.12em;border:1px solid var(--ink);
  padding:1.1rem 2rem;transition:.35s var(--ease)}
.btn-thin:hover{background:var(--ink);color:var(--paper)}
.contact__dl{display:grid;grid-template-columns:repeat(4,1fr);gap:0;max-width:1000px;margin:0 auto;
  border-top:1px solid var(--hair);text-align:left}
.contact__dl div{padding:1.4rem 1rem;border-right:1px solid var(--hair)}
.contact__dl div:last-child{border-right:0}
.contact__dl dt{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;color:var(--accent);margin-bottom:.5rem;text-transform:uppercase}
.contact__dl dd{font-size:.9rem}

/* ---------- フッター ---------- */
.foot{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;justify-content:space-between;
  padding:2.4rem var(--gut);border-top:1px solid var(--hair);font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;color:var(--grey)}
.foot__mark{font-family:var(--serif);font-size:1.4rem;color:var(--ink)}
.foot__name{flex:1;min-width:240px}

/* =========================================================
   レスポンシブ
   ========================================================= */
@media (max-width:900px){
  .nav,.head__cta{display:none}
  .head__toggle{display:flex}
  /* タブレット: 大判フルブリードのまま。スクリムを少し強めて見出し可読性を確保 */
  .wgl-hero__scrim{background:
    linear-gradient(100deg,
      rgba(251,251,249,.97) 0%,
      rgba(251,251,249,.90) 30%,
      rgba(251,251,249,.55) 54%,
      rgba(251,251,249,.10) 76%,
      rgba(251,251,249,0) 90%),
    linear-gradient(0deg, rgba(251,251,249,.34) 0%, rgba(251,251,249,0) 26%)}
  .about{grid-template-columns:1fr;gap:2rem}
  /* タブレット 2列: 左列は左端揃え(左padding0)、右列は右端揃え(右padding0)。
     縦罫線・横罫線とも文字に接しないよう左右pad ＋ 行間の縦余白を確保。 */
  .steps{grid-template-columns:repeat(2,1fr)}
  .step{padding:2rem 2rem 2.2rem;border-right:1px solid var(--hair)}
  .step:nth-child(odd){padding-left:0}
  .step:nth-child(even){padding-right:0;border-right:0}
  .step:nth-child(-n+2){border-bottom:1px solid var(--hair)}
  .step:nth-child(n+3){padding-top:2.4rem}
  .voice__list{grid-template-columns:1fr;gap:2.5rem}
  .testi{border-bottom:1px solid var(--hair);padding-bottom:1.5rem}
  .testi:last-child{border-bottom:0}
  .contact__dl{grid-template-columns:repeat(2,1fr)}
  .contact__dl div:nth-child(2n){border-right:0}
  .contact__dl div:nth-child(-n+2){border-bottom:1px solid var(--hair)}
}
@media (max-width:640px){
  /* スマホ: 大判フルブリード写真の上にテキストを重ねる。
     縦方向に強いスクリム（上=濃→下=やや濃）で見出し・本文の可読性を最優先で担保。 */
  .hero{align-items:flex-start;padding-top:clamp(7rem,16vh,9rem)}
  .wgl-hero__scrim{background:
    linear-gradient(180deg,
      rgba(251,251,249,.93) 0%,
      rgba(251,251,249,.84) 38%,
      rgba(251,251,249,.70) 62%,
      rgba(251,251,249,.80) 100%)}
  .hero__grid-bg{opacity:.07}
  .work,.work--rev{grid-template-columns:1fr;gap:1.2rem}
  .work__no{padding-top:0}
  .work--rev .work__img{order:0}
  .work--rev .work__meta{order:0;text-align:left}
  .work__img{aspect-ratio:4/3;max-width:480px}
  .work--rev .work__desc{margin-left:0}
  /* モバイル 1列: 縦積み。左右padは端揃えで0、横罫線の上下に十分な縦余白。 */
  .steps{grid-template-columns:1fr}
  .step{padding:1.8rem 0;border-right:0;border-bottom:1px solid var(--hair)}
  .step:first-child{padding-top:1.8rem}
  .step:last-child{border-bottom:0}
  .contact__dl{grid-template-columns:1fr}
  .contact__dl div{border-right:0;border-bottom:1px solid var(--hair)}
  .contact__dl div:last-child{border-bottom:0}
  .contact__actions{flex-direction:column}
  .btn-solid,.btn-thin{text-align:center}
}

/* ---------- reduced-motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto}
  .hero__rule i,.contact__rule i{width:100%!important}
  /* グリッド下地は描き切り。WebGLパネルは静止写真（fallback）で成立 */
  .hero__grid-bg .bp-grid line{stroke-dashoffset:0!important}
}