@charset "utf-8";
/* ==========================================================
   株式会社GROW — スタイルシート
   ========================================================== */

/* ============================================================
   Design tokens
   ============================================================ */
:root{
  --bg:#F7F5EF;
  --card:#EFEBE1;
  --ink:#141414;
  --muted:#6E6E68;
  --accent:#B4762F;      /* テキストにも使える濃いブロンズ */
  --soft:#D4A373;        /* 装飾用のライトブロンズ */
  --line:#E4DED0;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --header-h:76px;
}

*,*::before,*::after{ box-sizing:border-box; }

/* overflow-x:hidden を body に置くと body 自体がスクロールコンテナになり、
   ページ内リンク（#about など）と position:sticky が効かなくなる。
   スクロールボックスを作らない overflow:clip を使う。 */
html{
  -webkit-text-size-adjust:100%;
  scroll-padding-top:var(--header-h);
  overflow-x:clip;
}
@supports not (overflow:clip){
  html{ overflow-x:hidden; }
}

body{
  background-color:var(--bg);
  color:var(--ink);
  font-family:'Plus Jakarta Sans','Noto Sans JP',sans-serif;
  font-feature-settings:"palt" 1;   /* 日本語の詰め組み */
  overflow-x:clip;
  line-height:1.8;
}

::selection{ background:var(--ink); color:#fff; }

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:1px;
}

body.is-locked{ overflow:hidden; }

/* 見出し：和文の行間・字送りを最適化 */
.jp-tight{ letter-spacing:.02em; line-height:1.5; }
.en{ font-family:'Plus Jakarta Sans',sans-serif; }
.serif{ font-family:'Instrument Serif',serif; }

/* ============================================================
   Skip link
   ============================================================ */
.skip-link{
  position:fixed; top:8px; left:8px; z-index:200;
  background:var(--ink); color:#fff; padding:10px 18px;
  font-size:13px; transform:translateY(-160%); transition:transform .3s var(--ease);
}
.skip-link:focus{ transform:translateY(0); }

/* ============================================================
   Scroll progress
   ============================================================ */
.progress-bar{
  position:fixed; top:0; left:0; height:2px; width:100%;
  transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg,var(--soft),var(--accent));
  z-index:70; pointer-events:none;
}

/* ============================================================
   Header
   ============================================================ */
/* ドロワー(z-index:55)より必ず上。ここが低いと閉じる×が隠れて押せなくなる */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:60;
  transition:background-color .45s var(--ease), border-color .45s var(--ease), transform .5s var(--ease), box-shadow .45s var(--ease);
  background:transparent; border-bottom:1px solid transparent;
  color:#fff;
}
.site-header.is-solid{
  background:rgba(247,245,239,.86);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom-color:var(--line);
  color:var(--ink);
  box-shadow:0 1px 30px rgba(20,20,20,.05);
}

.logo-img{ transition:filter .45s var(--ease); }
.site-header:not(.is-solid) .logo-img{ filter:brightness(0) invert(1); }
.logo-sub{ color:rgba(255,255,255,.72); transition:color .45s var(--ease); }
.site-header.is-solid .logo-sub{ color:var(--muted); }

/* ロゴの2行（グロウ／株式会社GROW）を同じ幅に揃える。
   .logo-text は flex column なので、幅は広いほうの行（株式会社GROW）で決まり、
   子要素は既定の align-items:stretch でその幅いっぱいに伸びる。
   上段はその幅に対して両端揃え（text-align-last:justify）にし、
   字間を均等に配分して下段と左右の端を合わせる。 */
.logo-text{ width:max-content; }
.logo-name{
  font-size:18px; font-weight:700;
  letter-spacing:0;                 /* 字間は justify で作るので個別指定はしない */
  text-align:justify;
  text-align-last:justify;
}
/* 下段は letter-spacing の分だけ末尾に余白が付き、その幅が基準になってしまうため相殺する */
.logo-sub{ margin-right:-.16em; }

/* nav link underline */
.nav-link{ position:relative; padding-block:6px; transition:color .3s var(--ease); }
.nav-link::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:100% 50%;
  transition:transform .45s var(--ease);
}
.nav-link:hover::after,
.nav-link[aria-current="true"]::after{ transform:scaleX(1); transform-origin:0 50%; }
.nav-link[aria-current="true"]{ color:var(--soft); }
.site-header.is-solid .nav-link[aria-current="true"]{ color:var(--accent); }

/* header CTA */
.header-cta{
  background:#fff; color:var(--ink);
  transition:background-color .4s var(--ease), color .4s var(--ease);
}
.site-header.is-solid .header-cta{ background:var(--ink); color:#fff; }

/* ドロワーを開いている間のヘッダー（明るい背景の上に乗るのでインク色に） */
.site-header.is-onmenu{ background:transparent; border-bottom-color:transparent; box-shadow:none; color:var(--ink); }
.site-header.is-onmenu .logo-img{ filter:none; }
.site-header.is-onmenu .logo-sub{ color:var(--muted); }
.site-header.is-onmenu .header-cta{ display:none; }

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  gap:.75rem; border-radius:0; overflow:hidden; isolation:isolate;
  transition:transform .4s var(--ease), color .4s var(--ease), box-shadow .4s var(--ease);
}
.btn::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:var(--accent);
  transform:translateY(101%); transition:transform .5s var(--ease);
}
.btn:hover::before{ transform:translateY(0); }
.btn:hover{ color:#fff; transform:translateY(-2px); box-shadow:0 12px 28px -14px rgba(20,20,20,.5); }
.btn .arw{ transition:transform .4s var(--ease); }
.btn:hover .arw{ transform:translateX(4px); }

.btn-ghost::before{ background:var(--ink); }

/* ============================================================
   Reveal on scroll
   ============================================================ */
.js [data-reveal]{
  opacity:0;
  transition:opacity .95s var(--ease-out), transform .95s var(--ease-out), clip-path 1.1s var(--ease-out);
  transition-delay:var(--d,0ms);
}
.js [data-reveal="up"]     { transform:translateY(34px); }
.js [data-reveal="down"]   { transform:translateY(-24px); }
.js [data-reveal="left"]   { transform:translateX(-40px); }
.js [data-reveal="right"]  { transform:translateX(40px); }
.js [data-reveal="scale"]  { transform:scale(.94); }
.js [data-reveal="mask"]   { clip-path:inset(0 0 100% 0); transform:translateY(20px); }
.js [data-reveal="fade"]   { transform:none; }
.js [data-reveal].is-in{ opacity:1; transform:none; clip-path:inset(0 0 0 0); }

/* 縦線 / 横線のドロー */
.js [data-reveal="lineX"]{ opacity:1; transform:scaleX(0); transform-origin:0 50%; transition:transform 1.1s var(--ease-out); transition-delay:var(--d,0ms); }
.js [data-reveal="lineX"].is-in{ transform:scaleX(1); }

/* 画像のマスクリビール */
.reveal-img{ overflow:hidden; position:relative; }
.reveal-img > img{ transition:transform 1.4s var(--ease-out), filter 1.2s var(--ease-out); }
.js .reveal-img[data-reveal]:not(.is-in) > img{ transform:scale(1.14); filter:blur(6px); }

/* ============================================================
   Hero
   ============================================================ */
.hero{ min-height:100svh; }
.hero-media{ position:absolute; inset:0; overflow:hidden; }
.hero-media img{
  width:100%; height:100%; object-fit:cover; object-position:50% 25%;
  transform:scale(1.06);
  animation:kenburns 22s var(--ease) infinite alternate;
}
@keyframes kenburns{
  from{ transform:scale(1.04) translate3d(0,0,0); }
  to  { transform:scale(1.16) translate3d(-1.5%,-2%,0); }
}

@media (max-width:639px){
  /* 人物の顔の位置を微調整したいときはこの数値を変える。
     大きくする（例 35%）→ 写真が上にずれて顔が上がる
     小さくする（例 15%）→ 写真が下にずれて顔が下がる */
  .hero-media img{ object-position:50% 25%; }
}

/* 粒状ノイズ（質感） */
.grain::after{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.32; mix-blend-mode:overlay;
  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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

/* 行のマスクアニメーション */
.line-wrap{ display:block; overflow:hidden; }
.line-wrap > span{ display:block; transform:translateY(110%); transition:transform 1.1s var(--ease-out); transition-delay:var(--d,0ms); }
.js .line-wrap.is-in > span,
html:not(.js) .line-wrap > span{ transform:translateY(0); }

/* スクロールキュー */
.scroll-cue{ width:1px; height:70px; background:rgba(255,255,255,.28); position:relative; overflow:hidden; }
.scroll-cue::after{
  content:''; position:absolute; inset:0; background:#fff;
  animation:cue 2.2s cubic-bezier(.7,0,.3,1) infinite;
}
@keyframes cue{
  0%{ transform:translateY(-100%); }
  55%{ transform:translateY(0); }
  100%{ transform:translateY(100%); }
}

/* ============================================================
   Marquee
   ============================================================ */
.marquee{ display:flex; overflow:hidden; user-select:none; gap:0; }
.marquee__track{
  display:flex; flex-shrink:0; align-items:center; gap:2.5rem;
  padding-right:2.5rem; min-width:100%;
  animation:marquee 34s linear infinite;
}
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes marquee{ to{ transform:translateX(-100%); } }

/* ============================================================
   Cards
   ============================================================ */
.card-hover{ transition:transform .5s var(--ease), border-color .4s var(--ease), box-shadow .5s var(--ease), background-color .4s var(--ease); }
.card-hover:hover{ transform:translateY(-6px); border-color:var(--ink); box-shadow:0 26px 50px -34px rgba(20,20,20,.55); }

/* 理由カードの左からのフィル */
.reason{ position:relative; overflow:hidden; }
.reason::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--accent); transform:scaleY(0); transform-origin:50% 0;
  transition:transform .55s var(--ease);
}
.reason:hover::before{ transform:scaleY(1); }
.reason .num{ transition:color .5s var(--ease), transform .5s var(--ease); }
.reason:hover .num{ color:var(--accent); transform:translateY(-3px); }

/* ============================================================
   Accordion
   ============================================================ */
.acc-panel{
  overflow:hidden; height:0;
  transition:height .55s var(--ease), opacity .4s ease;
  opacity:0;
}
.acc-panel.is-open{ opacity:1; }
.acc-icon{ transition:transform .5s var(--ease), background-color .35s ease, color .35s ease; }
.acc-item.is-open .acc-icon{ transform:rotate(135deg); background:var(--ink); color:#fff; }
.acc-item.is-open{ border-color:var(--ink); }
.acc-item{ transition:border-color .4s var(--ease), background-color .4s var(--ease); }
.acc-thumb img{ transition:transform 1s var(--ease); }
.acc-item:hover .acc-thumb img{ transform:scale(1.08); }

/* ============================================================
   Flow timeline
   ============================================================ */
.flow-rail{ position:absolute; left:23px; top:14px; bottom:14px; width:1px; background:var(--line); }
.flow-rail::after{
  content:''; position:absolute; inset:0 auto 0 0; width:1px; height:var(--fill,0%);
  background:linear-gradient(180deg,var(--soft),var(--accent)); transition:height .4s linear;
}
@media(min-width:1024px){
  .flow-rail{ left:0; right:0; top:23px; bottom:auto; width:auto; height:1px; }
  .flow-rail::after{ width:var(--fill,0%); height:1px; }
}
/* レール(.flow-rail)は position:absolute のため、指定がないと静的配置の番号丸より
   手前に描画され、丸の中央を線が横切って「丸が途切れて」見える。
   丸を positioned にして前面へ出し、線は丸の後ろを通す。 */
.flow-dot{
  position:relative; z-index:1;
  transition:background-color .45s var(--ease), color .45s var(--ease), transform .45s var(--ease), border-color .45s var(--ease);
}
.flow-step.is-in .flow-dot{ background:var(--ink); color:#fff; border-color:var(--ink); transform:scale(1.06); }

/* ============================================================
   Projects
   ============================================================ */
.tab-btn{ position:relative; transition:color .35s var(--ease), border-color .35s var(--ease), background-color .35s var(--ease); }
.tab-btn.is-active{ background:var(--ink); color:#fff; border-color:var(--ink); }

.project-card{ transition:opacity .45s var(--ease), transform .45s var(--ease), border-color .4s var(--ease), box-shadow .5s var(--ease); }
.project-card.is-hidden{ opacity:0; transform:scale(.96) translateY(10px); pointer-events:none; position:absolute; visibility:hidden; }
.project-card:hover{ border-color:var(--ink); box-shadow:0 30px 55px -38px rgba(20,20,20,.6); }
.project-card .p-img{ transition:transform 1.1s var(--ease); }
.project-card:hover .p-img{ transform:scale(1.07); }
.project-card .p-veil{ opacity:0; transition:opacity .5s var(--ease); }
.project-card:hover .p-veil{ opacity:1; }
.project-card .p-arrow{ transition:transform .45s var(--ease); }
.project-card:hover .p-arrow{ transform:translateX(5px); }

/* ============================================================
   Before / After slider
   ============================================================ */
.ba{ position:relative; overflow:hidden; touch-action:pan-y; --pos:50%; }
.ba img{ width:100%; height:100%; object-fit:cover; display:block; }
.ba-before{ position:absolute; inset:0; clip-path:inset(0 calc(100% - var(--pos)) 0 0); }
.ba-handle{
  position:absolute; top:0; bottom:0; left:var(--pos); width:2px; background:#fff;
  transform:translateX(-1px); box-shadow:0 0 0 1px rgba(0,0,0,.12); pointer-events:none;
}
.ba-knob{
  position:absolute; top:50%; left:50%; translate:-50% -50%;
  width:48px; height:48px; background:#fff; color:var(--ink);
  display:flex; align-items:center; justify-content:center; gap:4px; font-size:11px;
  box-shadow:0 8px 24px -8px rgba(0,0,0,.5);
}
.ba-range{
  position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize;
  -webkit-appearance:none; appearance:none; background:transparent;
}
.ba-range::-webkit-slider-thumb{ -webkit-appearance:none; width:56px; height:100%; }
.ba-range:focus-visible ~ .ba-handle .ba-knob{ outline:2px solid var(--accent); outline-offset:3px; }
.ba-tag{ position:absolute; top:14px; font-size:10px; letter-spacing:.18em; padding:5px 12px; background:rgba(20,20,20,.72); color:#fff; backdrop-filter:blur(4px); }

/* ============================================================
   Voice
   ============================================================ */
.voice-card{ position:relative; }
.voice-card::before{
  content:'“'; position:absolute; right:22px; top:2px;
  font-family:'Instrument Serif',serif; font-size:110px; line-height:1; color:var(--soft); opacity:.22;
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.voice-card:hover::before{ opacity:.42; transform:translateY(-4px); }
.stars i{ animation:pop .5s var(--ease) backwards; }
.is-in .stars i:nth-child(1){ animation-delay:.05s }
.is-in .stars i:nth-child(2){ animation-delay:.12s }
.is-in .stars i:nth-child(3){ animation-delay:.19s }
.is-in .stars i:nth-child(4){ animation-delay:.26s }
.is-in .stars i:nth-child(5){ animation-delay:.33s }
@keyframes pop{ from{ opacity:0; transform:scale(.4) rotate(-25deg);} to{ opacity:1; transform:none; } }

/* ============================================================
   Form
   ============================================================ */
.field{ position:relative; }
.field input, .field textarea{
  width:100%; background:#fff; border:1px solid var(--line); border-radius:0;
  padding:26px 18px 12px; font-size:16px; color:var(--ink);
  transition:border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.field textarea{ padding-top:30px; resize:vertical; }
.field input:focus, .field textarea:focus{
  outline:none; border-color:var(--ink); box-shadow:0 0 0 3px rgba(180,118,47,.12);
}
.field label{
  position:absolute; left:18px; top:18px; font-size:14px; color:var(--muted);
  pointer-events:none; transform-origin:0 0;
  transition:transform .28s var(--ease), color .28s var(--ease);
}
.field input:focus + label,
.field textarea:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:not(:placeholder-shown) + label{
  transform:translateY(-11px) scale(.76); color:var(--accent);
}
.field .req{ color:var(--accent); font-size:10px; margin-left:.35em; vertical-align:2px; }
.field.has-error input, .field.has-error textarea{ border-color:#C0392B; }
.field .err{ display:none; font-size:11px; color:#C0392B; margin-top:6px; }
.field.has-error .err{ display:block; }

.chip input{ position:absolute; opacity:0; width:0; height:0; }
.chip span{
  display:inline-block; padding:10px 20px; border:1px solid var(--line); background:#fff;
  font-size:13px; cursor:pointer; transition:all .3s var(--ease);
}
.chip input:checked + span{ background:var(--ink); color:#fff; border-color:var(--ink); }
.chip input:focus-visible + span{ outline:2px solid var(--accent); outline-offset:3px; }
.chip span:hover{ border-color:var(--ink); }

/* ============================================================
   Floating actions
   ============================================================ */
.to-top{
  position:fixed; right:20px; bottom:100px; z-index:40;
  width:48px; height:48px; display:grid; place-items:center;
  background:var(--ink); color:#fff;
  opacity:0; visibility:hidden; transform:translateY(14px);
  transition:opacity .4s var(--ease), transform .4s var(--ease), visibility .4s, background-color .3s;
}
.to-top.is-on{ opacity:1; visibility:visible; transform:none; }
.to-top:hover{ background:var(--accent); }
@media(min-width:768px){ .to-top{ bottom:28px; } }

.mobile-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:45;
  display:grid; grid-template-columns:1fr 1fr;
  transform:translateY(110%); transition:transform .5s var(--ease);
  box-shadow:0 -6px 30px -12px rgba(20,20,20,.35);
}
.mobile-cta.is-on{ transform:none; }
@media(min-width:768px){ .mobile-cta{ display:none; } }

/* ============================================================
   Mobile drawer
   ============================================================ */
.drawer{
  position:fixed; inset:0; z-index:55; background:var(--bg);
  display:flex; flex-direction:column;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .65s var(--ease);
  visibility:hidden;
}
.drawer.is-open{ clip-path:inset(0 0 0 0); visibility:visible; }
.drawer a.d-link{ opacity:0; transform:translateY(22px); transition:opacity .5s var(--ease), transform .5s var(--ease); }
.drawer.is-open a.d-link{ opacity:1; transform:none; }
.drawer.is-open a.d-link:nth-child(1){ transition-delay:.18s }
.drawer.is-open a.d-link:nth-child(2){ transition-delay:.24s }
.drawer.is-open a.d-link:nth-child(3){ transition-delay:.30s }
.drawer.is-open a.d-link:nth-child(4){ transition-delay:.36s }
.drawer.is-open a.d-link:nth-child(5){ transition-delay:.42s }
.drawer.is-open a.d-link:nth-child(6){ transition-delay:.48s }

/* ハンバーガー */
.burger{ width:26px; height:14px; position:relative; }
.burger span{
  position:absolute; left:0; height:1.5px; width:100%; background:currentColor;
  transition:transform .45s var(--ease), opacity .3s var(--ease), width .45s var(--ease);
}
.burger span:nth-child(1){ top:0 }
.burger span:nth-child(2){ top:6px; width:70% }
.burger span:nth-child(3){ top:12px }
.is-menu-open .burger span:nth-child(1){ transform:translateY(6px) rotate(45deg) }
.is-menu-open .burger span:nth-child(2){ opacity:0 }
.is-menu-open .burger span:nth-child(3){ transform:translateY(-6px) rotate(-45deg) }

/* ============================================================
   Footer
   ============================================================ */
.wordmark{ line-height:.9; }
.wordmark .star{ display:inline-block; animation:spin 9s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.f-link{ position:relative; display:inline-block; }
.f-link::after{
  content:''; position:absolute; left:0; bottom:-2px; height:1px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:100% 50%; transition:transform .4s var(--ease);
}
.f-link:hover::after{ transform:scaleX(1); transform-origin:0 50%; }

/* ============================================================
   Utility
   ============================================================ */
.hairline{ height:1px; background:var(--line); }
.eyebrow{ font-size:11px; letter-spacing:.28em; text-transform:uppercase; font-weight:700; }
.parallax{ will-change:transform; }

/* ============================================================
   動きを減らす設定への配慮
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .js [data-reveal]{ opacity:1 !important; transform:none !important; clip-path:none !important; }
  .js .line-wrap > span{ transform:none !important; }
}