@charset "UTF-8";
/* =========================================================
   MONT LAB — 一般社団法人MONT LAB Official Site
   Art direction:
     ・情緒／物語   … 余白と縦組み、語りかける文体（森本千絵）
     ・ガラスと光   … 光の屈折・色収差・リング（吉田ユニ）
     ・静穏／映画的 … 明朝の大見出し、粒子、ゆっくりした運び（矢後直規）
   ========================================================= */

/* ---------- tokens ---------- */
:root{
  --ink:        #0A0B0D;
  --ink-2:      #101216;
  --ink-3:      #171A1F;
  --paper:      #F2EFE9;
  --paper-2:    #E7E2D9;
  --line-d:     rgba(255,255,255,.14);
  --line-l:     rgba(10,11,13,.14);

  --tx-d:       rgba(255,255,255,.92);
  --tx-d-mid:   rgba(255,255,255,.62);
  --tx-d-low:   rgba(255,255,255,.38);
  --tx-l:       #14161A;
  --tx-l-mid:   rgba(20,22,26,.66);
  --tx-l-low:   rgba(20,22,26,.42);

  /* 光のスペクトル：ライトアップ／プリズムのアクセント */
  --amber:      #E9B96B;
  --amber-deep: #C98F3C;
  --cyan:       #79D2E6;
  --magenta:    #E58AAE;

  /* 見出し：うろこの効いた明朝で、静かな緊張感を（矢後直規） */
  --mincho: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "游明朝体", serif;
  /* 詩：やわらかい古典明朝で、語りかける（森本千絵） */
  --mincho-soft: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", "游明朝体", serif;
  --gothic: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --latin:  "Jost", "Helvetica Neue", Arial, sans-serif;

  --ease: cubic-bezier(.19,1,.22,1);
  --pad: clamp(20px, 5vw, 64px);
  --maxw: 1240px;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:80px}
body{
  margin:0; background:var(--ink); color:var(--tx-d);
  font-family:var(--gothic); font-weight:300;
  font-size:16px; line-height:2.05;
  letter-spacing:.045em;
  font-feature-settings:"palt" 1;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
ul,ol,dl,dd{margin:0; padding:0; list-style:none}
h1,h2,h3,p,figure{margin:0}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
::selection{background:var(--amber); color:#0A0B0D}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
}

/* ---------- film grain（映画的な粒子） ---------- */
.grain{
  position:fixed; inset:-120px; z-index:900; pointer-events:none;
  opacity:.2; mix-blend-mode:overlay; will-change:transform; contain:strict;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='.5'/></svg>");
  animation:grain 5.2s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)} 16%{transform:translate(-4%,-3%)} 33%{transform:translate(3%,-5%)}
  50%{transform:translate(-3%,4%)} 66%{transform:translate(4%,3%)} 83%{transform:translate(-2%,-4%)} 100%{transform:translate(0,0)}
}

/* ---------- 追従するやわらかな光 ---------- */
.spotlight{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,30%),
    rgba(233,185,107,.075), rgba(121,210,230,.035) 42%, transparent 68%);
  opacity:0; transition:opacity 1.2s var(--ease);
}
.spotlight.on{opacity:1}

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:800;
  display:flex; align-items:center; gap:24px;
  padding:20px var(--pad);
  transition:padding .6s var(--ease), background .6s var(--ease), backdrop-filter .6s var(--ease);
}
.site-header::after{
  content:""; position:absolute; left:var(--pad); right:var(--pad); bottom:0; height:1px;
  background:var(--line-d); transform:scaleX(0); transform-origin:left;
  transition:transform 1s var(--ease);
}
.site-header.stuck{
  padding:13px var(--pad);
  background:rgba(10,11,13,.72);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
}
.site-header.stuck::after{transform:scaleX(1)}

.brand{display:flex; align-items:center; gap:12px; margin-right:auto}
.brand__mark{width:30px; height:auto; transition:transform .9s var(--ease)}
.brand:hover .brand__mark{transform:rotate(180deg)}
.brand__name{
  font-family:var(--latin); font-weight:400; font-size:14px;
  letter-spacing:.34em; padding-left:.34em;
}

.nav ul{display:flex; gap:28px}
.nav a{
  position:relative; display:inline-flex; align-items:baseline; gap:.5em;
  font-family:var(--latin); font-size:12.5px; font-weight:300;
  letter-spacing:.18em; color:var(--tx-d-mid);
  transition:color .5s var(--ease);
}
.nav a i{font-style:normal; font-size:9.5px; letter-spacing:.1em; color:var(--tx-d-low)}
.nav a::after{
  content:""; position:absolute; left:0; bottom:-7px; width:100%; height:1px;
  background:var(--amber); transform:scaleX(0); transform-origin:right;
  transition:transform .6s var(--ease);
}
.nav a:hover,.nav a.current{color:#fff}
.nav a:hover::after,.nav a.current::after{transform:scaleX(1); transform-origin:left}

.header-cta{
  font-family:var(--latin); font-size:12px; letter-spacing:.2em;
  padding:11px 22px; border:1px solid var(--line-d); border-radius:999px;
  color:var(--tx-d-mid);
  transition:color .5s var(--ease), border-color .5s var(--ease), background .5s var(--ease);
}
.header-cta:hover{color:var(--ink); background:var(--amber); border-color:var(--amber)}

.menu-btn{display:none; width:40px; height:40px; position:relative; margin-left:auto}
.menu-btn span{
  position:absolute; left:9px; width:22px; height:1px; background:#fff;
  transition:transform .55s var(--ease), opacity .35s var(--ease);
}
.menu-btn span:nth-child(1){top:17px}
.menu-btn span:nth-child(2){top:23px}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(3px) rotate(23deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){transform:translateY(-3px) rotate(-23deg)}

/* drawer */
.drawer{
  position:fixed; inset:0; z-index:790;
  background:rgba(10,11,13,.97);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  display:flex; align-items:center; padding:100px var(--pad) 40px;
  opacity:0; transition:opacity .7s var(--ease);
  overflow-y:auto;
}
/* display:flex が [hidden] の UA スタイルに勝ってしまうため明示する */
.drawer[hidden]{display:none}
.drawer.open{opacity:1}
.drawer nav{width:100%}
.drawer ul{width:100%}
.drawer li{border-bottom:1px solid rgba(255,255,255,.09)}
.drawer a{
  display:flex; align-items:baseline; gap:14px; padding:17px 2px;
  opacity:0; transform:translateY(14px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.drawer.open a{opacity:1; transform:none}
.drawer li:nth-child(1) a{transition-delay:.06s} .drawer li:nth-child(2) a{transition-delay:.11s}
.drawer li:nth-child(3) a{transition-delay:.16s} .drawer li:nth-child(4) a{transition-delay:.21s}
.drawer li:nth-child(5) a{transition-delay:.26s} .drawer li:nth-child(6) a{transition-delay:.31s}
.drawer li:nth-child(7) a{transition-delay:.36s} .drawer li:nth-child(8) a{transition-delay:.41s}
.drawer li:nth-child(9) a{transition-delay:.46s}
.drawer i{font-style:normal; font-family:var(--latin); font-size:10px; letter-spacing:.14em; color:var(--amber)}
.drawer b{font-family:var(--latin); font-weight:300; font-size:22px; letter-spacing:.14em}
.drawer s{text-decoration:none; font-size:11.5px; letter-spacing:.16em; color:var(--tx-d-low); margin-left:auto}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column;
  justify-content:center; padding:140px var(--pad) 108px; overflow:hidden;
  isolation:isolate;
}
.hero__media{position:absolute; inset:0; z-index:-2}
.hero__media img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.14); will-change:transform;
  animation:kenburns 34s var(--ease) infinite alternate;
}
@keyframes kenburns{ from{transform:scale(1.14) translate3d(0,0,0)} to{transform:scale(1.24) translate3d(-2%,-2.4%,0)} }
.hero__veil{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 85% at 50% 42%, rgba(10,11,13,.28) 0%, rgba(10,11,13,.76) 58%, rgba(10,11,13,.96) 100%),
    linear-gradient(to bottom, rgba(10,11,13,.86) 0%, rgba(10,11,13,.18) 32%, rgba(10,11,13,.68) 78%, var(--ink) 100%);
}

/* 円環：ロゴのリングを光として反復する */
.hero__ring{
  position:absolute; z-index:-1; top:50%; left:50%;
  width:min(84vh,760px); aspect-ratio:1; translate:-50% -52%;
  opacity:0; animation:ringIn 3s 1.1s var(--ease) forwards;
}
.hero__ring svg{width:100%; height:100%; animation:spin 96s linear infinite}
/* non-scaling-stroke のため stroke-width は実ピクセル */
.hero__ring circle{fill:none; stroke:rgba(255,255,255,.26); stroke-width:1; vector-effect:non-scaling-stroke}
.hero__ring circle.r2{stroke:rgba(233,185,107,.55); stroke-dasharray:.7 5.4; stroke-width:1.4}
@keyframes ringIn{ from{opacity:0; scale:.86} to{opacity:1; scale:1} }
@keyframes spin{to{transform:rotate(360deg)}}

.hero__inner{position:relative; max-width:var(--maxw); width:100%; margin:0 auto}

.hero__eyebrow{
  overflow:hidden; margin-bottom:clamp(24px,3.4vw,44px);
  font-family:var(--latin); font-size:clamp(10px,1.05vw,12.5px);
  letter-spacing:.5em; color:var(--amber); text-transform:uppercase;
}
.hero__eyebrow span{display:inline-block; transform:translateY(110%); animation:up 1.5s .5s var(--ease) forwards}

.hero__title{
  font-family:var(--mincho); font-weight:500;
  font-size:clamp(38px,7.6vw,104px); line-height:1.34;
  letter-spacing:.045em; text-indent:-.05em;
}
.hero__title .ln{display:block; overflow:hidden; padding-bottom:.04em}
.hero__title .ln > span{display:block; transform:translateY(112%)}
.hero__title .ln:nth-child(1) > span{animation:up 1.65s .78s var(--ease) forwards}
.hero__title .ln:nth-child(2) > span{animation:up 1.65s .94s var(--ease) forwards}
.hero__title .ln:nth-child(3) > span{animation:up 1.65s 1.1s var(--ease) forwards}
@keyframes up{to{transform:translateY(0)}}

.hero__lead{
  margin-top:clamp(26px,3.4vw,42px); max-width:34em;
  font-size:clamp(13px,1.35vw,16px); line-height:2.2; color:var(--tx-d-mid);
  opacity:0; animation:fade 2s 1.7s var(--ease) forwards;
}
@keyframes fade{to{opacity:1}}

.hero__foot{
  position:relative; max-width:var(--maxw); width:100%; margin:clamp(48px,7vw,84px) auto 0;
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  opacity:0; animation:fade 2s 2.1s var(--ease) forwards;
}
.scroll-cue{
  display:inline-flex; align-items:center; gap:14px;
  font-family:var(--latin); font-size:10.5px; letter-spacing:.36em;
  color:var(--tx-d-low); text-transform:uppercase;
  transition:color .5s var(--ease);
}
.scroll-cue:hover{color:var(--amber)}
.scroll-cue__line{position:relative; display:block; width:64px; height:1px; background:var(--line-d); overflow:hidden}
.scroll-cue__line::after{
  content:""; position:absolute; inset:0; background:var(--amber);
  transform:translateX(-100%); animation:sweep 2.9s 2.6s var(--ease) infinite;
}
@keyframes sweep{0%{transform:translateX(-100%)} 55%{transform:translateX(100%)} 100%{transform:translateX(100%)}}
.hero__credit{font-size:10.5px; letter-spacing:.12em; color:rgba(255,255,255,.28)}

/* =========================================================
   SECTION 共通
   ========================================================= */
.sec{position:relative; padding:clamp(72px,8.5vw,122px) var(--pad); z-index:2}
.sec--dark{background:var(--ink); color:var(--tx-d)}
.sec--paper{background:var(--paper); color:var(--tx-l)}
.wrap{max-width:var(--maxw); margin:0 auto; position:relative}
.wrap--narrow{max-width:820px}

/* セクションラベル */
.label{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  margin-bottom:clamp(34px,4vw,56px);
  font-family:var(--latin); font-size:12px; font-weight:400;
  letter-spacing:.42em; text-transform:uppercase; color:var(--tx-d);
}
.label i{
  font-style:normal; font-size:10px; letter-spacing:.16em;
  color:var(--amber); padding:5px 9px; border:1px solid rgba(233,185,107,.42); border-radius:2px;
}
.label em{
  font-style:normal; font-family:var(--gothic); font-size:12px; letter-spacing:.16em;
  color:var(--tx-d-low); padding-left:16px; border-left:1px solid var(--line-d);
}
.label--dark{color:var(--tx-l)}
.label--dark i{color:var(--amber-deep); border-color:rgba(201,143,60,.5)}
.label--dark em{color:var(--tx-l-low); border-left-color:var(--line-l)}

/* 見出し */
.h2{
  font-family:var(--mincho); font-weight:500;
  font-size:clamp(23px,3.05vw,38px); line-height:1.7; letter-spacing:.035em;
}
.h2 span{display:block}
.h2--center{text-align:center; font-size:clamp(24px,3.4vw,44px); margin-bottom:clamp(56px,7vw,96px)}

/* ステートメント（Vision / Mission / Contact） */
.statement{
  font-family:var(--mincho); font-weight:500;
  font-size:clamp(28px,5.6vw,76px); line-height:1.48; letter-spacing:.03em;
  text-indent:-.04em;
}
.statement--sm{font-size:clamp(24px,4.2vw,54px); line-height:1.55}
.statement .ln{display:block; overflow:hidden; padding-bottom:.05em}
.statement .ln > span{display:block; transform:translateY(112%); transition:transform 1.5s var(--ease)}
[data-r].in .ln > span{transform:translateY(0)}
[data-r].in .ln:nth-child(2) > span{transition-delay:.11s}
[data-r].in .ln:nth-child(3) > span{transition-delay:.22s}

/* ガラス／光の屈折：文字が像を結ぶまでの色収差（吉田ユニ） */
.prism{position:relative}
.js .in.prism,
.js .in > .prism,
.js .in .about__l > .prism{animation:refract 1.9s var(--ease) both}
.js .hero__title.prism{animation:refract 2.4s .8s var(--ease) both}
@keyframes refract{
  0%{text-shadow:-.055em 0 rgba(121,210,230,.9), .055em 0 rgba(229,138,174,.9)}
  55%{text-shadow:-.014em 0 rgba(121,210,230,.55), .014em 0 rgba(229,138,174,.55)}
  100%{text-shadow:0 0 rgba(121,210,230,0), 0 0 rgba(229,138,174,0)}
}
@media (prefers-reduced-motion: reduce){ .js .prism{animation:none !important; text-shadow:none} }
.statement__body{
  margin-top:clamp(30px,3.4vw,46px); max-width:44em;
  display:grid; gap:1.35em; color:var(--tx-d-mid);
  font-size:clamp(13.5px,1.25vw,15.5px); line-height:2.3;
}
.statement__body p{position:relative; padding-left:22px}
.statement__body p::before{
  content:""; position:absolute; left:0; top:.95em; width:9px; height:1px; background:var(--amber); opacity:.75;
}

/* =========================================================
   01 ABOUT
   ========================================================= */
.about{display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,88px); align-items:start}
.about__acr{
  margin-top:clamp(28px,3.4vw,44px);
  font-family:var(--latin); font-weight:200;
  font-size:clamp(14px,1.5vw,19px); letter-spacing:.24em; color:var(--tx-d-low);
}
.about__acr em{font-style:normal; color:var(--amber); font-weight:400}
.about__r{display:grid; gap:1.9em; color:var(--tx-d-mid); font-size:15px; line-height:2.3}
.about__r b{font-weight:400; color:var(--tx-d)}
.about__note{
  margin-top:.6em; padding:26px 28px;
  border:1px solid var(--line-d); border-left:2px solid var(--amber);
  background:linear-gradient(120deg, rgba(233,185,107,.055), rgba(121,210,230,.03) 60%, transparent);
  font-size:14px; line-height:2.2; color:var(--tx-d);
}

/* =========================================================
   02 VISION — 一条の光
   ========================================================= */
.sec--vision{overflow:hidden}
.beam{
  position:absolute; z-index:0; top:-30%; left:50%; width:min(160vw,1700px); height:180%;
  translate:-50% 0; rotate:-14deg; pointer-events:none;
  background:linear-gradient(100deg, transparent 0%, rgba(233,185,107,.075) 36%, rgba(233,185,107,.13) 48%, rgba(121,210,230,.085) 57%, transparent 92%);
  will-change:opacity;
  animation:beam 22s ease-in-out infinite alternate;
}
@keyframes beam{ from{opacity:.5; translate:-58% 0} to{opacity:1; translate:-42% 0} }
.sec--vision .wrap{z-index:1}

/* =========================================================
   03 MISSION
   ========================================================= */
.pillars{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  margin-top:clamp(46px,5.5vw,72px);
  background:var(--line-d); border:1px solid var(--line-d);
}
.pillar{position:relative; background:var(--ink); padding:clamp(32px,3.6vw,52px); overflow:hidden}
.pillar::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0;
  background:radial-gradient(85% 65% at 50% 0%, rgba(233,185,107,.11), transparent 70%);
  transition:opacity .8s var(--ease);
}
.pillar:hover::after{opacity:1}
.pillar__no{
  font-family:var(--latin); font-size:11px; letter-spacing:.3em;
  color:var(--amber); text-transform:uppercase; margin-bottom:22px;
}
.pillar__ttl{
  font-family:var(--mincho); font-weight:500; font-size:clamp(21px,2.1vw,27px);
  line-height:1.6; letter-spacing:.06em; margin-bottom:20px;
}
.pillar__en{
  display:block; font-family:var(--latin); font-weight:300;
  font-size:11.5px; letter-spacing:.34em; color:var(--tx-d-low);
  text-transform:uppercase; margin-bottom:12px;
}
.pillar__txt{font-size:13.5px; line-height:2.2; color:var(--tx-d-mid)}

/* =========================================================
   04 CONCEPT — 余白と縦組み
   ========================================================= */
.sec--concept{
  background:
    radial-gradient(90% 70% at 78% 12%, rgba(233,185,107,.16), transparent 62%),
    linear-gradient(180deg, var(--paper-2) 0%, var(--paper) 100%);
  overflow:hidden;
}
.sec--concept .wrap{display:flex; flex-wrap:wrap; gap:clamp(30px,6vw,90px); align-items:flex-start}
.sec--concept .label{flex:0 0 100%; margin-bottom:0}
.poem{flex:1 1 300px; min-width:0; padding-top:clamp(4px,1.4vw,20px)}
.poem__ln{
  font-family:var(--mincho-soft); font-weight:400;
  font-size:clamp(19px,2.7vw,34px); line-height:2.0; letter-spacing:.06em;
  color:var(--tx-l); margin-bottom:clamp(38px,5vw,68px);
}
.poem__ln--last{
  position:relative; margin-bottom:0; padding-top:clamp(38px,5vw,68px);
  border-top:1px solid var(--line-l);
}
.poem__ln--last::before{
  content:""; position:absolute; top:-1px; left:0; width:74px; height:1px; background:var(--amber-deep);
}
/* 縦組みの一行（大きな画面のみ） */
.poem__vertical{
  flex:0 0 auto; align-self:stretch; display:none;
  writing-mode:vertical-rl; text-orientation:upright;
}
.poem__vertical p{
  font-family:var(--mincho-soft); font-weight:400;
  font-size:clamp(15px,1.5vw,19px); letter-spacing:.42em;
  color:var(--tx-l-low); height:100%;
  border-right:1px solid var(--line-l); padding-right:clamp(20px,2.6vw,38px);
}
@media (min-width:1000px){ .poem__vertical{display:block} }

/* =========================================================
   05 MEMBER
   ========================================================= */
.members{display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(16px,2.2vw,32px)}
.member__ph{
  position:relative; overflow:hidden; border-radius:2px; margin-bottom:20px;
  background:var(--paper-2);
}
.member__ph::after{ /* 静かなシネマ調のトーン */
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 45%, rgba(20,22,26,.16));
  mix-blend-mode:multiply;
}
.member__ph img{
  width:100%; aspect-ratio:13/16; object-fit:cover; object-position:top center;
  filter:grayscale(1) contrast(1.04) brightness(1.02);
  transition:filter 1.1s var(--ease), transform 1.2s var(--ease);
}
.member:hover .member__ph img{filter:grayscale(0) contrast(1) brightness(1); transform:scale(1.035)}
.member__role{
  font-size:10.5px; letter-spacing:.26em; color:var(--amber-deep); margin-bottom:9px;
}
.member__name{
  font-family:var(--mincho); font-weight:500; font-size:clamp(16px,1.5vw,19px);
  letter-spacing:.1em; line-height:1.5;
}
.member__name span{
  display:block; margin-top:8px;
  font-family:var(--latin); font-weight:300; font-size:10.5px;
  letter-spacing:.22em; color:rgba(20,22,26,.52);
}

/* =========================================================
   06 OUTLINE
   ========================================================= */
.outline{border-top:1px solid var(--line-l)}
.outline > div{
  display:grid; grid-template-columns:190px 1fr; gap:24px;
  padding:24px 4px; border-bottom:1px solid var(--line-l);
}
.outline dt{
  font-size:12px; letter-spacing:.22em; color:var(--tx-l-low); padding-top:.35em;
}
.outline dd{font-size:14.5px; line-height:2.05; letter-spacing:.05em}
.tbd{
  display:inline-block; margin-left:.5em; padding:2px 9px;
  font-size:11px; letter-spacing:.1em; color:var(--amber-deep);
  border:1px dashed rgba(201,143,60,.55); border-radius:2px;
}

/* =========================================================
   07 CONTACT
   ========================================================= */
.sec--contact{overflow:hidden}
.contact__media{position:absolute; inset:0; z-index:0}
.contact__media img{
  width:100%; height:100%; object-fit:cover; opacity:.62;
}
.contact__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, var(--ink) 0%, rgba(10,11,13,.86) 34%, rgba(10,11,13,.9) 100%);
}
.sec--contact .wrap{z-index:1}
.contact__lead{
  margin-top:clamp(30px,3.6vw,46px); font-size:14.5px; line-height:2.3; color:var(--tx-d-mid);
}

.cform{margin-top:clamp(48px,6vw,76px); display:grid; gap:26px}
.cform__row{display:grid; grid-template-columns:1fr 1fr; gap:26px}
.fld{display:grid; gap:11px}
.fld__lb{
  display:flex; align-items:center; gap:10px;
  font-size:11.5px; letter-spacing:.22em; color:var(--tx-d-mid);
}
.fld__lb i{
  font-style:normal; font-size:9.5px; letter-spacing:.12em;
  padding:3px 7px; border-radius:2px; color:var(--ink); background:var(--amber);
}
.fld input,.fld textarea{
  width:100%; font:inherit; font-size:15px; color:var(--tx-d);
  background:rgba(255,255,255,.035); border:1px solid var(--line-d); border-radius:2px;
  padding:15px 17px; letter-spacing:.05em;
  transition:border-color .5s var(--ease), background .5s var(--ease), box-shadow .5s var(--ease);
}
.fld textarea{resize:vertical; line-height:1.95}
.fld input::placeholder,.fld textarea::placeholder{color:rgba(255,255,255,.24)}
.fld input:focus,.fld textarea:focus{
  outline:none; border-color:var(--amber); background:rgba(255,255,255,.06);
  box-shadow:0 0 0 3px rgba(233,185,107,.12);
}
.fld input[aria-invalid="true"],.fld textarea[aria-invalid="true"]{border-color:var(--magenta)}
.cform__note{font-size:12px; color:var(--tx-d-low); line-height:1.9}
.cform__alt{font-size:12.5px; color:var(--tx-d-low)}
.cform__alt a{color:var(--amber); border-bottom:1px solid rgba(233,185,107,.4); padding-bottom:1px}

.btn{
  position:relative; justify-self:start; overflow:hidden;
  padding:17px 44px; border:1px solid var(--amber); border-radius:999px;
  font-family:var(--latin); font-size:13px; letter-spacing:.2em; color:var(--amber);
  transition:color .6s var(--ease);
}
.btn::before{
  content:""; position:absolute; inset:0; background:var(--amber);
  transform:scaleX(0); transform-origin:right; transition:transform .7s var(--ease);
}
.btn span{position:relative; z-index:1}
.btn:hover{color:var(--ink)}
.btn:hover::before{transform:scaleX(1); transform-origin:left}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{background:var(--ink-2); padding:clamp(64px,7vw,96px) var(--pad) 40px; position:relative; z-index:2}
.foot__top{
  display:flex; justify-content:space-between; align-items:flex-start; gap:48px; flex-wrap:wrap;
  padding-bottom:clamp(40px,5vw,64px); border-bottom:1px solid var(--line-d);
}
.foot__brand img{width:132px; opacity:.9}
.foot__brand p{
  margin-top:18px; font-family:var(--latin); font-size:10.5px;
  letter-spacing:.34em; color:var(--tx-d-low); text-transform:uppercase;
}
.foot__nav{display:flex; gap:clamp(36px,6vw,88px)}
.foot__nav ul{display:grid; gap:14px}
.foot__nav a{
  font-family:var(--latin); font-size:12px; letter-spacing:.18em; color:var(--tx-d-mid);
  transition:color .5s var(--ease);
}
.foot__nav a:hover{color:var(--amber)}
.foot__copy{margin-top:34px; font-family:var(--latin); font-size:10.5px; letter-spacing:.2em; color:var(--tx-d-low)}

/* =========================================================
   スクロール表示アニメーション
   ========================================================= */
.js [data-r]{opacity:0; transform:translateY(28px); transition:opacity 1.3s var(--ease), transform 1.3s var(--ease)}
.js [data-r].in{opacity:1; transform:none}
.js .statement[data-r]{opacity:1; transform:none}
.js .poem__ln[data-r]{transform:translateY(20px)}

/* stagger */
.js .pillar[data-r]:nth-child(2){transition-delay:.13s}
.js .pillar[data-r]:nth-child(3){transition-delay:.26s}
.js .member[data-r]:nth-child(2){transition-delay:.09s}
.js .member[data-r]:nth-child(3){transition-delay:.18s}
.js .member[data-r]:nth-child(4){transition-delay:.27s}
.js .member[data-r]:nth-child(5){transition-delay:.36s}
.js .poem__ln[data-r]:nth-child(2){transition-delay:.16s}
.js .poem__ln[data-r]:nth-child(3){transition-delay:.32s}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1180px){
  .nav{display:none}
  .header-cta{display:none}
  .menu-btn{display:block}
}
@media (max-width:900px){
  body{font-size:15px}
  .about{grid-template-columns:1fr; gap:40px}
  .pillars{grid-template-columns:1fr}
  .members{grid-template-columns:repeat(3,1fr); gap:24px 18px}
  .outline > div{grid-template-columns:1fr; gap:8px; padding:20px 4px}
  .outline dt{padding-top:0}
  .cform__row{grid-template-columns:1fr}
  .foot__top{flex-direction:column}
}
@media (max-width:560px){
  .hero{min-height:92svh; padding-top:120px}
  .hero__ring{width:min(78vw,420px); translate:-50% -58%}
  .hero__title{font-size:clamp(31px,9.2vw,44px); line-height:1.42}
  .hero__foot{flex-direction:column; align-items:flex-start; gap:18px}
  .members{grid-template-columns:repeat(2,1fr)}
  .label{gap:12px}
  .label em{padding-left:0; border-left:0; width:100%}
  .btn{width:100%; text-align:center}
}

/* ---------- 和文の改行制御 ---------- */
/* word-break:keep-all は使わないこと。Safari では和文が一切改行されなくなり、
   長い行が画面幅を超えて切れる。禁則処理は line-break:strict だけで足りる。 */
.hero__title,.h2,.statement,.poem__ln,.pillar__ttl,.member__name{
  line-break:strict; overflow-wrap:break-word;
}

/* MEMBER から続く明るいセクションなので、上余白を詰めて一続きに見せる */
.sec--outline{padding-top:clamp(28px,3.5vw,56px)}

/* =========================================================
   03 PHILOSOPHY
   暗い理念セクションが続く中で、ここだけ最後に「反転」する。
   「見方を変えること」というコピーを、地と図の反転で受ける。
   ========================================================= */
.sec--phil{overflow:hidden}
.sec--phil .wrap{max-width:1040px}

.phil__en{
  overflow:hidden; margin-bottom:clamp(18px,2.2vw,28px);
  font-family:var(--latin); font-weight:300;
  font-size:clamp(11px,1.15vw,14px); letter-spacing:.44em;
  text-transform:uppercase; color:var(--amber);
}
.phil__en span{display:inline-block; transform:translateY(110%); transition:transform 1.2s var(--ease)}
[data-r].in.phil__en span{transform:translateY(0)}

.phil__head{
  font-family:var(--mincho); font-weight:500;
  font-size:clamp(30px,6vw,80px); line-height:1.42; letter-spacing:.03em;
  text-indent:-.04em;
}
.phil__head .ln{display:block; overflow:hidden; padding-bottom:.05em}
.phil__head .ln > span{display:block; transform:translateY(112%); transition:transform 1.5s var(--ease)}
[data-r].in .ln > span{transform:translateY(0)}

/* 四つの名詞：土地にあるもの */
.phil__nouns{
  display:flex; flex-wrap:wrap; align-items:baseline;
  margin-top:clamp(44px,5.5vw,76px);
  border-top:1px solid var(--line-d); border-bottom:1px solid var(--line-d);
}
.phil__nouns li{
  flex:1 1 0; min-width:130px; padding:clamp(20px,2.4vw,30px) 0;
  font-family:var(--mincho); font-weight:400;
  font-size:clamp(19px,2.3vw,30px); letter-spacing:.09em; color:var(--tx-d);
  text-align:center; position:relative;
  opacity:0; transform:translateY(14px);
  transition:opacity 1.1s var(--ease), transform 1.1s var(--ease);
}
[data-r].in.phil__nouns li{opacity:1; transform:none}
[data-r].in.phil__nouns li:nth-child(2){transition-delay:.12s}
[data-r].in.phil__nouns li:nth-child(3){transition-delay:.24s}
[data-r].in.phil__nouns li:nth-child(4){transition-delay:.36s}
.phil__nouns li + li::before{
  content:""; position:absolute; left:0; top:50%; translate:0 -50%;
  width:1px; height:1.6em; background:var(--line-d);
}

.phil__hook{
  margin-top:clamp(44px,5.5vw,72px);
  font-family:var(--mincho); font-weight:400;
  font-size:clamp(17px,2.05vw,26px); line-height:1.95; letter-spacing:.06em;
  color:var(--tx-d);
}

.phil__body{
  margin-top:clamp(30px,3.6vw,48px); display:grid; gap:1.8em; max-width:38em;
  font-size:clamp(13.5px,1.25vw,15.5px); line-height:2.35; color:var(--tx-d-mid);
}

/* 「〜すること。」の三行：私たちの手つき */
.phil__acts{
  margin-top:clamp(44px,5.5vw,72px); display:grid; gap:clamp(14px,1.6vw,20px);
}
.phil__acts li{
  position:relative; padding-left:clamp(28px,3vw,44px);
  font-family:var(--mincho); font-weight:400;
  font-size:clamp(16px,1.75vw,22px); line-height:1.95; letter-spacing:.055em;
  color:var(--tx-d);
}
.phil__acts li::before{
  content:""; position:absolute; left:0; top:.92em;
  width:clamp(14px,1.8vw,26px); height:1px; background:var(--amber);
}

/* 反転：ここだけ地と図が入れ替わる */
.phil__turn{
  margin-top:clamp(56px,7vw,104px);
  padding:clamp(38px,5vw,72px) clamp(28px,4.5vw,68px);
  background:var(--paper); color:var(--tx-l);
  border-radius:2px; position:relative; overflow:hidden;
}
.phil__turn::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--cyan), var(--amber), var(--magenta));
  opacity:.85;
}
.phil__turn p{
  font-family:var(--mincho); font-weight:500;
  font-size:clamp(20px,2.9vw,40px); line-height:1.75; letter-spacing:.045em;
  line-break:strict; overflow-wrap:break-word;
}

@media (max-width:700px){
  .phil__nouns{display:grid; grid-template-columns:1fr 1fr; border-bottom:0}
  .phil__nouns li{border-bottom:1px solid var(--line-d)}
  .phil__nouns li + li::before{display:none}
  .phil__nouns li:nth-child(even)::after{
    content:""; position:absolute; left:0; top:50%; translate:0 -50%;
    width:1px; height:1.6em; background:var(--line-d);
  }
}

/* 狭い画面だけ、読点で改行する（「する。」の1文字残りを避ける） */
.brk{display:none}
@media (max-width:640px){
  .brk{display:inline}
}
@media (max-width:560px){
  .phil__acts li{font-size:15px; padding-left:22px}
  .phil__acts li::before{width:13px}
}

/* 狭い画面では About の注記の強制改行を解除する（「に、」等の1〜2文字残りを避ける） */
@media (max-width:640px){
  .about__note br{display:none}
}