/* ==============================================================
   NISHIURA SEIKA — DETAILS style
   #050505 × #f4f4f4 × 白線 / Inter × Noto Sans JP / 大きな余白
   scene（画面切り替わりのキャッチコピー）と .js-counter は温存
============================================================== */

/* ===== OPENING ANIMATION ===== */
.opening{
  position:fixed;inset:0;z-index:10000;
  background:#050505;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .8s ease;
}
.op-inner{text-align:center}
.op-text{
  font-family:'Zen Old Mincho',serif;
  font-size:clamp(56px,11vw,140px);
  font-weight:900;
  letter-spacing:.2em;
  color:transparent;
  background:linear-gradient(135deg,#f4f4f4 0%,#888 40%,#f4f4f4 60%,#aaa 100%);
  background-size:200% 200%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  opacity:0;
  transform:scale(.88);
  transition:opacity 2s ease, transform 2s cubic-bezier(.16,1,.3,1);
  text-shadow:none;
  filter:drop-shadow(0 0 40px rgba(255,255,255,.06));
}
.opening.show .op-text{
  opacity:1;transform:scale(1);
  animation:op-shimmer 3s 1s ease infinite;
}
@keyframes op-shimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.op-sub{
  font-family:'Zen Old Mincho',serif;
  font-size:clamp(13px,1.6vw,18px);
  letter-spacing:.4em;
  color:#ffffff;
  margin-top:32px;
  opacity:0;
  transform:translateY(14px);
  transition:opacity 2s ease, transform 2s cubic-bezier(.16,1,.3,1);
  text-shadow:0 0 30px rgba(255,255,255,.15);
}
.opening.show .op-sub{opacity:1;transform:translateY(0);transition-delay:1s}
.opening.hide .op-text{opacity:0;transform:scale(1.08);transition:opacity 1.2s ease, transform 1.2s ease}
.opening.hide .op-sub{opacity:0;transition:opacity .6s ease}
.opening.hide{opacity:0;transition:opacity 1s ease .4s}
.opening.gone{display:none}

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

:root{
  --bg:        #050505;   /* base */
  --bg-soft:   #0c0c0c;
  --bg-card:   #111111;
  --text:      #f4f4f4;
  --text-mid:  rgba(244,244,244,.72);
  --text-mut:  rgba(244,244,244,.56);
  --line:      rgba(255,255,255,.18);
  --line-soft: rgba(255,255,255,.10);
  --white:     #ffffff;

  /* 旧トークン互換：暗テーマでも壊れないよう再マップ */
  --ink:       var(--text);       /* 旧：本文黒 → 今：白 */
  --ink-2:     var(--bg-card);    /* 旧：黒 → カード色 */
  --ink-3:     var(--bg-soft);
  --paper:     var(--text);       /* 旧：クリーム → 白 */
  --paper-2:   var(--bg-card);
  --paper-3:   var(--text-mid);
  --deep:      var(--bg-soft);
  --deep-2:    var(--bg);
  --gold:      var(--white);
  --gold-2:    var(--text-mid);
  --gold-3:    var(--text-mut);
  --line-ink:  var(--line);
  --shadow:    0 24px 60px rgba(0,0,0,.6);

  --font-en:   'Inter','Helvetica Neue',Arial,sans-serif;
  --font-jp:   'Noto Sans JP','Hiragino Kaku Gothic ProN',sans-serif;
  --font-body: var(--font-jp);
  --font-h:    var(--font-en);
}

html{ scroll-behavior:smooth; background:var(--bg); }
body{
  font-family:var(--font-body);
  color:var(--text);
  background:var(--bg);
  line-height:1.9;
  font-weight:400;
  overflow-x:hidden;
  font-feature-settings:"palt";
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* 全体ノイズテクスチャ（黒背景の平坦さを消す） */
body::after{
  content:'';
  position:fixed; inset:0;
  pointer-events:none;
  z-index:9998;
  opacity:.045;
  mix-blend-mode:screen;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.8) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.7) 0 1px, transparent 1px),
    radial-gradient(circle at 45% 85%, rgba(255,255,255,.75) 0 1px, transparent 1px);
  background-size:4px 4px, 5px 5px, 6px 6px;
}

a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; height:auto; }
button{ background:none; border:0; color:inherit; cursor:pointer; font:inherit; }

/* ---------- 共通 ---------- */
.container{
  width:min(100% - 96px, 1440px);
  margin-inline:auto;
  position:relative;
}
.section{ padding-block:clamp(96px, 14vw, 220px); position:relative; }
.section-lg{ padding-block:clamp(120px, 18vw, 280px); }
.bg-ink{ background:var(--bg); }
.bg-deep{ background:var(--bg-soft); }
.bg-paper{ background:#111111; }
.bg-paper-2{ background:var(--bg-card); }

.en{
  font-family:var(--font-en);
  letter-spacing:.06em;
  font-weight:500;
}
.mincho-h{
  font-family:var(--font-h);
  font-weight:500;
  letter-spacing:-.02em;
}

/* セクションラベル（DETAILS的な小英字ラベル） */
.section-label{
  font-family:var(--font-en);
  font-size:11px;
  letter-spacing:.24em;
  color:var(--text-mut);
  text-transform:uppercase;
  margin-bottom:32px;
  display:inline-flex; align-items:center; gap:14px;
  font-weight:500;
}
.section-label::before{
  content:''; width:36px; height:1px; background:rgba(244,244,244,.78);
  transform-origin:left center;
  transform:scaleX(0);
  transition:transform 1.1s cubic-bezier(.83,0,.17,1) .35s;
  will-change:transform;
}
.section-label.visible::before,
.js-anim .section-label::before[data-drawn]{
  transform:scaleX(1);
}
.section-label.visible::before{ transform:scaleX(1); }
.section-label.no-line::before{ display:none; }

/* 大きな英字見出し */
.section-title{
  font-family:var(--font-h);
  font-size:clamp(24px, 3.6vw, 52px);
  font-weight:500;
  letter-spacing:-.01em;
  line-height:1.6;
  color:var(--text);
  margin-bottom:36px;
}
.section-title .accent{ color:var(--white); font-weight:600; }

.section-desc{
  font-family:var(--font-jp);
  font-size:clamp(14px, 1.2vw, 17px);
  line-height:2;
  letter-spacing:.02em;
  color:var(--text-mid);
  max-width:640px;
  font-weight:400;
}
.gold-line{ display:none; }         /* 金線は廃止 */
.gold-line.center{ display:none; }
.text-center{ text-align:center; }

/* ---------- ヘッダー ---------- */
header{
  position:fixed; top:0; left:0; right:0;
  z-index:9990;                       /* ページ内のどの要素より前面：ハンバーガー確実タップ */
  padding:24px 0;
  transition:background .4s ease, padding .4s ease;
  background:transparent;
}
header.solid{
  background:rgba(5,5,5,.72);
  backdrop-filter:blur(14px) saturate(1.1);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  padding:14px 0;
}
nav{
  display:flex; justify-content:space-between; align-items:center;
  width:min(100% - 96px, 1600px);
  margin:0 auto;
}

.brand{ display:flex; align-items:center; gap:14px; }
.brand-logo{
  height:40px;
  width:auto;
  display:block;
  margin:2px 0;
  transition:transform .6s cubic-bezier(.22,1,.36,1), filter .5s;
  will-change:transform;
}
.brand:hover .brand-logo{
  transform:scale(1.05);
  filter:brightness(1.15);
}
header.solid .brand-logo{ height:36px; }
@media(max-width:768px){
  .brand-logo{ height:34px; }
  header.solid .brand-logo{ height:30px; }
}
.brand-mark{
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--line);
  display:grid; place-items:center;
  color:var(--text);
  font-family:var(--font-jp);
  font-size:16px; letter-spacing:0;
  transition:border-color .5s;
  will-change:transform;
}
.brand:hover .brand-mark{ border-color:var(--text); }
.brand:hover .brand-mark,
.brand-mark.spin{
  animation:brandSpin .5s cubic-bezier(.65,0,.35,1) 1 both;
}
@keyframes brandSpin{
  0%   { transform:rotate(0deg); }
  100% { transform:rotate(360deg); }
}
.brand-name{ display:flex; flex-direction:column; line-height:1.15; }
.brand-jp{
  font-family:var(--font-jp);
  font-size:14px; letter-spacing:.16em;
  color:var(--text);
  font-weight:500;
}
.brand-en{
  font-family:var(--font-en);
  font-size:10px; letter-spacing:.32em; color:var(--text-mut);
  margin-top:2px;
  text-transform:uppercase;
}

.nav-links{ display:flex; gap:36px; list-style:none; align-items:center; }
.nav-links a{
  position:relative;
  display:inline-block;
  font-family:var(--font-jp);
  font-size:12px; letter-spacing:.16em;
  color:var(--text);
  padding:6px 0;
  line-height:1;
  font-weight:500;
  perspective:520px;
}
/* JSで .nav-inner を挿入。hover で rotateX 360°（縦フリップ1回転） */
.nav-links a .nav-inner{
  display:inline-block;
  transform-origin:center;
  transform-style:preserve-3d;
  backface-visibility:visible;
  will-change:transform;
}
.nav-links a .nav-inner + .nav-inner{ display:none; }
.nav-links a:hover .nav-inner:first-child,
.nav-links a .nav-inner:first-child.flip{
  animation:navFlip .75s cubic-bezier(.65,0,.35,1) 1 both;
}
@keyframes navFlip{
  from{ transform:rotateX(0deg); }
  to  { transform:rotateX(360deg); }
}
.nav-links a.current{ color:var(--white); }
.nav-links a.current::after{
  content:''; position:absolute; left:0; right:0; bottom:-4px;
  height:1px; background:var(--white);
}

.menu-toggle{
  display:none;
  flex-direction:column; align-items:center; justify-content:center;
  gap:5px;
  min-width:44px; min-height:44px;    /* WCAG準拠のタップ領域 44×44 */
  padding:10px;
  cursor:pointer; background:none; border:0;
  -webkit-tap-highlight-color:transparent;
}
.menu-toggle span{
  width:24px; height:1px; background:var(--text);
  transition:transform .4s, opacity .4s;
}
.menu-toggle.open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.menu-toggle.open span:nth-child(2){ opacity:0; }
.menu-toggle.open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* 背景スクロール抑制：メニュー開閉中は body を固定して背面固定バグを防止 */
body.menu-open{
  overflow:hidden;
  position:fixed;
  left:0; right:0;
  width:100%;
}

/* ---------- HERO (cinematic / GSAP-driven) ---------- */
.hero{
  position:relative;
  min-height:100svh;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  padding:120px 0 100px;
  background:#000;
  isolation:isolate;
}
.hero-media{
  position:absolute; inset:0;
  z-index:0;
  overflow:hidden;
}
/* ===== HERO SLIDER: 下から上へ clip-path で切り替わるマスクリビール ===== */
.slide-item{
  position:absolute;
  inset:0;
  opacity:0;
  z-index:1;
  clip-path:inset(100% 0 0 0);                             /* 初期：下からマスクで完全に隠す */
  transition:
    clip-path 1.2s cubic-bezier(.16, 1, .3, 1),
    opacity .6s linear;
  will-change:clip-path, opacity;
}
.slide-item img{
  width:100%; height:100%;
  object-fit:cover;
  transform:scale(1.08);                                    /* 待機中は広め */
  transition:transform 6s linear;                            /* 表示中は超スロー・ズーム */
  filter:brightness(.92) contrast(1.05) saturate(1.1);
  will-change:transform;
  display:block;
}
.slide-item.active{
  opacity:1;
  z-index:2;
  clip-path:inset(0% 0 0 0);                                /* 下から上へスパンッと露出 */
}
.slide-item.active img{
  transform:scale(1.0);                                     /* 露出中はゆっくりズームアウト */
}
.hero-overlay{
  position:absolute; inset:0;
  z-index:3;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.05) 40%, rgba(0,0,0,.75) 100%),
    radial-gradient(80% 60% at 20% 40%, rgba(0,0,0,0), rgba(0,0,0,.4));
}
@media (prefers-reduced-motion: reduce){
  .slide-item{ transition:none; }
  .slide-item img{ transition:none; transform:scale(1.05); }
}
/* テキストの下側だけ薄く暗く（写真の明るさは活かす） */
.hero::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.55) 100%);
  pointer-events:none;
}
.hero-cover{
  position:absolute; inset:0; z-index:6;
  background:#000;
  opacity:0;
  pointer-events:none;
}
.hero-inner{
  position:relative; z-index:4;
  width:min(100% - 96px, 1440px);
  margin:0 auto;
  display:grid;
  grid-template-columns:7fr 5fr;
  gap:clamp(40px, 8vw, 120px);
  align-items:end;
}
.hero-eyebrow,
.hero-sub,
.hero-actions,
.hero-side,
.hero-scroll{ opacity:0; will-change:transform, opacity; }
.hero-eyebrow{
  font-family:var(--font-en);
  font-size:12px; letter-spacing:.32em;
  color:var(--text);
  text-transform:uppercase;
  margin-bottom:44px;
  display:inline-flex; align-items:center; gap:12px;
  font-weight:600;
  text-shadow:0 2px 12px rgba(0,0,0,.6);
}
.hero-eyebrow::before{ content:''; width:32px; height:1px; background:var(--text); }
.hero-eyebrow .ex{ opacity:.5; }
.hero-title{
  font-family:'Noto Sans JP','Zen Kaku Gothic New','Hiragino Sans',sans-serif;
  font-size:clamp(38px, 6.6vw, 96px);
  font-weight:900;
  line-height:1.45;
  letter-spacing:-.01em;
  color:var(--text);
  margin-bottom:44px;
  text-shadow:0 4px 30px rgba(0,0,0,.8);
}
/* ===== Hero title — Mask Reveal ===== */
.hero-title .mask-wrap{
  display:block;
  overflow:hidden;
  padding:.06em 0;
  vertical-align:bottom;
}
.hero-title .mask-target{
  display:block;
  transform:translateY(110%) rotate(2deg);
  opacity:0;
  transition:
    transform 1.1s cubic-bezier(.16, 1, .3, 1),
    opacity .9s ease;
  will-change:transform, opacity;
}
.hero-title.is-revealed .mask-target{
  transform:translateY(0) rotate(0);
  opacity:1;
}
.hero-title.is-revealed .mask-wrap:nth-child(2) .mask-target{
  transition-delay:.12s;                              /* 2行目にスタッガー */
}
.hero-sub{
  max-width:540px;
  font-family:var(--font-jp);
  font-size:clamp(14px, 1.3vw, 18px);
  line-height:2;
  color:var(--text);
  font-weight:500;
  margin-bottom:60px;
  text-shadow:0 2px 20px rgba(0,0,0,.8);
}
.hero-actions{
  display:flex; gap:24px; flex-wrap:wrap;
}
.hero-side{
  display:flex; flex-direction:column; justify-content:flex-end;
  align-items:flex-end; gap:24px;
}
.hero-kanji{
  font-family:'Noto Sans JP','Hiragino Sans',sans-serif;
  writing-mode:vertical-rl;
  font-size:clamp(28px, 3.6vw, 52px);
  letter-spacing:.32em;
  color:var(--text);
  line-height:1;
  font-weight:800;
  text-shadow:0 3px 24px rgba(0,0,0,.7);
}
.hero-kanji-en{
  font-family:var(--font-en);
  writing-mode:vertical-rl;
  font-size:11px; letter-spacing:.5em;
  color:var(--text);
  text-transform:uppercase;
  font-weight:600;
  opacity:.85;
}
.hero-scroll{
  position:absolute; bottom:24px; left:50%;
  transform:translate(-50%, 40px);
  z-index:5;
  font-family:var(--font-en);
  font-size:10px; letter-spacing:.5em;
  color:var(--text-mut);
  text-transform:uppercase;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  pointer-events:none;
}
.hero-scroll::after{
  content:''; width:1px; height:40px; background:var(--text-mut);
  animation:heroScrollLine 2.4s ease-in-out infinite;
  transform-origin:top;
}
@keyframes heroScrollLine{
  0%,100%{ transform:scaleY(0); }
  50%{ transform:scaleY(1); }
}

/* Marquee CTA — 極細線に英字がループ */
.btn-marquee{
  display:inline-flex;
  align-items:center;
  height:56px;
  border:1px solid rgba(255,255,255,.35);
  color:var(--text);
  font-family:var(--font-en);
  font-size:12px; letter-spacing:.4em;
  text-transform:uppercase;
  overflow:hidden;
  position:relative;
  width:280px;
  background:rgba(0,0,0,.35);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transition:border-color .4s, background .4s, color .4s;
  text-decoration:none;
}
.btn-marquee:hover{
  border-color:#fff;
  background:rgba(0,0,0,.6);
}
.btn-marquee--solid{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.6);
}
.btn-marquee--solid:hover{ background:#fff; color:#000; }
.btn-marquee-track{
  display:inline-flex;
  gap:36px;
  padding-inline:36px;
  animation:btnMarqueeX 14s linear infinite;
  will-change:transform;
  white-space:nowrap;
}
.btn-marquee:hover .btn-marquee-track{ animation-duration:6s; }
.btn-marquee-item{
  display:inline-flex; align-items:center; gap:18px;
}
.btn-marquee-item::after{
  content:'✦'; font-size:8px; opacity:.6;
}
@keyframes btnMarqueeX{
  0%   { transform:translateX(0); }
  100% { transform:translateX(-50%); }
}

@media (prefers-reduced-motion: reduce){
  .hero-media{ opacity:1; transform:none; }
  .hero-eyebrow, .hero-sub, .hero-actions, .hero-side, .hero-scroll{ opacity:1; }
  .hero-title .mask-target{ transform:none; opacity:1; transition:none; }
  .btn-marquee-track{ animation:none; }
}
@media (max-width:900px){
  .btn-marquee{ width:100%; }
}

/* ---------- page hero ---------- */
.page-hero{
  padding:220px 0 120px;
  background:var(--bg);
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--line);
  text-align:left;
  isolation:isolate;
}
.page-hero-media{
  position:absolute; inset:0; z-index:0;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  filter:brightness(.55) contrast(1.05) saturate(1.08);
  transform:scale(1.06);
  will-change:transform, clip-path;
  animation:pageHeroReveal 2.2s cubic-bezier(.76,0,.24,1) both, pageHeroZoom 16s ease-out both;
}
.page-hero::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(5,5,5,.6) 0%, rgba(5,5,5,.25) 45%, rgba(5,5,5,.9) 100%),
    radial-gradient(70% 60% at 20% 30%, rgba(0,0,0,0), rgba(5,5,5,.55));
  pointer-events:none;
}
.page-hero .container{
  display:grid;
  grid-template-columns:5fr 7fr;
  gap:clamp(40px, 8vw, 120px);
  align-items:end;
  position:relative; z-index:2;
}
@keyframes pageHeroReveal{
  0%   { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}
@keyframes pageHeroZoom{
  0%   { transform:scale(1.14); }
  100% { transform:scale(1.06); }
}
@media (prefers-reduced-motion: reduce){
  .page-hero-media{ animation:none; transform:scale(1.04); clip-path:none; }
}
.page-hero-en{
  font-family:var(--font-en);
  font-size:12px; letter-spacing:.32em;
  color:var(--text-mut);
  text-transform:uppercase;
  margin-bottom:24px;
  display:inline-flex; align-items:center; gap:14px;
}
.page-hero-en::before{
  content:''; width:32px; height:1px; background:var(--text-mut);
  transform-origin:left center;
  transform:scaleX(0);
  animation:heroEyebrowLine 1.2s cubic-bezier(.83,0,.17,1) 1s forwards;
  will-change:transform;
}
.page-hero-jp{
  font-family:var(--font-h);
  font-size:clamp(28px, 4.4vw, 60px);
  font-weight:500;
  letter-spacing:-.01em;
  color:var(--text);
  margin-bottom:28px;
  line-height:1.5;
}
.page-hero-sub{
  font-family:var(--font-jp);
  font-size:15px; letter-spacing:.02em;
  color:var(--text-mid);
  line-height:1.9;
  max-width:520px;
  padding-bottom:6px;
}
.breadcrumb{
  padding:24px 0;
  font-family:var(--font-en);
  font-size:10px; letter-spacing:.32em;
  color:var(--text-mut);
  text-transform:uppercase;
}
.breadcrumb a{ color:var(--text); transition:color .3s; }
.breadcrumb a:hover{ color:var(--white); }
.breadcrumb .sep{ margin:0 14px; color:rgba(244,244,244,.7); }

/* ---------- テーブル ---------- */
.tbl{
  width:100%; max-width:none; margin:0 auto;
  border-collapse:collapse;
  border-top:1px solid var(--line);
}
.tbl tr{ border-bottom:1px solid var(--line); transition:background .4s; }
.tbl tr:hover{ background:rgba(255,255,255,.02); }
.tbl th{
  font-family:var(--font-en);
  font-size:11px; letter-spacing:.32em; color:var(--text-mut);
  text-align:left; font-weight:500;
  padding:32px 24px 32px 0;
  width:220px; vertical-align:top;
  text-transform:uppercase;
}
.tbl th .jp{
  display:block;
  font-family:var(--font-jp);
  font-size:13px; letter-spacing:.14em; color:var(--text);
  margin-top:8px;
  font-weight:500;
  text-transform:none;
}
.tbl td{
  padding:32px 0;
  font-family:var(--font-jp);
  font-size:15px; letter-spacing:.02em;
  color:var(--text-mid); line-height:2;
}
.bg-paper .tbl tr{ border-bottom-color:var(--line); }
.bg-paper .tbl th .jp{ color:var(--text); }
.bg-paper .tbl td{ color:var(--text-mid); }

/* ---------- タイムライン ---------- */
.timeline{
  max-width:920px; margin:0 auto;
  position:relative;
  padding-left:80px;
}
.timeline::before{
  content:''; position:absolute; left:0; top:8px; bottom:8px;
  width:1px; background:var(--line);
}
.tl-item{ position:relative; padding-bottom:56px; }
.tl-item::before{
  content:''; position:absolute; left:-84px; top:16px;
  width:8px; height:1px; background:var(--text-mut);
}
.tl-year{
  font-family:var(--font-en);
  font-size:32px; font-weight:400; color:var(--text);
  margin-bottom:12px;
  letter-spacing:-.02em;
  line-height:1;
}
.tl-text{
  font-family:var(--font-jp);
  font-size:15px; line-height:2; color:var(--text-mid);
  letter-spacing:.02em;
}

/* ---------- FAQ ---------- */
.faq{ max-width:900px; margin:0 auto; }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item:first-child{ border-top:1px solid var(--line); }
.faq-q{
  display:flex; justify-content:space-between; align-items:center;
  padding:36px 0;
  font-family:var(--font-jp);
  font-size:17px; letter-spacing:.04em;
  cursor:pointer;
  transition:padding .4s;
  gap:24px;
  font-weight:500;
}
.faq-q:hover{ padding-left:12px; }
.faq-q .mark{
  font-family:var(--font-en);
  font-size:22px; color:var(--text);
  transition:transform .5s cubic-bezier(.76,0,.24,1);
  flex-shrink:0;
  line-height:1;
}
.faq-item.open .faq-q .mark{ transform:rotate(45deg); }
.faq-a{
  max-height:0; overflow:hidden;
  transition:max-height .55s ease, padding .55s ease;
}
.faq-item.open .faq-a{ max-height:600px; padding:0 0 32px; }
.faq-a p{
  font-family:var(--font-jp);
  font-size:14px; line-height:2.2; color:var(--text-mid);
  letter-spacing:.02em;
}

/* ---------- CEO ---------- */
.ceo-grid{
  display:grid; grid-template-columns:5fr 7fr;
  gap:clamp(40px, 8vw, 120px);
  align-items:start;
}
.ceo-block .quote{
  font-family:var(--font-jp);
  font-size:clamp(22px, 2.6vw, 34px);
  letter-spacing:.06em;
  line-height:1.8;
  color:var(--text);
  padding-left:32px;
  border-left:1px solid var(--white);
  margin-bottom:48px;
  font-weight:500;
}
.ceo-block p{
  font-family:var(--font-jp);
  font-size:15px; line-height:2.2; letter-spacing:.02em;
  color:var(--text-mid);
  margin-bottom:24px;
}
.ceo-sign{
  margin-top:48px;
  font-family:var(--font-jp);
  font-size:16px; letter-spacing:.16em;
  color:var(--text);
  font-weight:500;
}
.ceo-sign span{
  display:block;
  font-family:var(--font-en);
  font-size:10px; letter-spacing:.4em; color:var(--text-mut);
  text-transform:uppercase;
  margin-bottom:10px;
}

/* ---------- Products ---------- */
.prod-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(24px, 3vw, 48px);
}
.prod-card{
  background:transparent;
  border:0;
  cursor:pointer;
  transition:transform .5s;
}
.prod-card:hover{ transform:translateY(-6px); }
.prod-img{
  aspect-ratio:4/5;
  overflow:hidden;
  position:relative;
  background:var(--bg-card);
  margin-bottom:24px;
}
.prod-img img{
  width:100%; height:100%; object-fit:cover;
  filter:contrast(1.06) saturate(1.15) brightness(.98);
  transform:scale(1.04);
  transition:transform 1.4s cubic-bezier(.22,1,.36,1), filter 1s ease;
}
.prod-card:hover .prod-img img{
  transform:scale(1.1); filter:contrast(1.08) saturate(1.22) brightness(1.02);
}
.prod-tag{
  position:absolute; top:20px; left:20px; z-index:2;
  background:rgba(5,5,5,.7);
  color:var(--text);
  font-family:var(--font-en);
  font-size:10px; letter-spacing:.32em;
  padding:8px 14px;
  border:1px solid var(--line);
  backdrop-filter:blur(6px);
  text-transform:uppercase;
}
.prod-body{ padding:0; }
.prod-en{
  font-family:var(--font-en);
  font-size:10px; letter-spacing:.4em;
  color:var(--text-mut);
  margin-bottom:8px;
  text-transform:uppercase;
}
.prod-name{
  font-family:var(--font-h);
  font-size:clamp(20px, 2vw, 26px); letter-spacing:-.01em;
  color:var(--text);
  margin-bottom:16px;
  font-weight:500;
  line-height:1.5;
}
.prod-desc{
  font-family:var(--font-jp);
  font-size:13px; letter-spacing:.02em;
  line-height:2;
  color:var(--text-mid);
  margin-bottom:0;
}
.prod-link{
  display:inline-flex; align-items:center; gap:14px;
  margin-top:20px;
  font-family:var(--font-en);
  font-size:11px; letter-spacing:.32em;
  color:var(--text);
  padding-bottom:6px;
  border-bottom:1px solid var(--line);
  transition:border-color .4s, gap .4s;
  text-transform:uppercase;
}
.prod-link:hover{ border-color:var(--text); gap:22px; }

/* 旬カレンダー */
.cal-grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(24px, 3vw, 40px); margin-top:80px;
}
.cal-card{
  padding:32px 0 40px;
  background:transparent;
  border-top:1px solid var(--line);
  transition:background .4s, border-color .4s;
}
.cal-card:hover{ background:rgba(255,255,255,.02); border-top-color:var(--white); }
.cal-card-photo{
  aspect-ratio:3/4;
  overflow:hidden;
  margin-bottom:32px;
  position:relative;
  background:#1a1a1a;
}
.cal-card-photo img{
  width:100%; height:100%;
  object-fit:cover;
  filter:brightness(.94) contrast(1.04) saturate(1.06);
  transform:scale(1.05);
  transition:transform 3s cubic-bezier(.16,1,.3,1), filter 1s ease;
  will-change:transform;
}
.cal-card:hover .cal-card-photo img{
  transform:scale(1.14);
  filter:brightness(1.02) contrast(1.05) saturate(1.15);
}
.cal-card-photo::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 55%, rgba(0,0,0,.4));
  pointer-events:none;
}
.cal-card-photo .step-tag{
  position:absolute;
  left:12px; top:12px;
  z-index:2;
  font-family:var(--font-en);
  font-size:9px; letter-spacing:.4em;
  color:#fff;
  padding:6px 10px;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  text-transform:uppercase;
  font-weight:600;
}
.cal-en{
  font-family:var(--font-en);
  font-size:10px; letter-spacing:.4em; color:var(--text-mut);
  margin-bottom:12px;
  text-transform:uppercase;
}
.cal-jp{
  font-family:var(--font-h);
  font-size:clamp(26px, 2.8vw, 34px); letter-spacing:-.01em;
  color:var(--text);
  margin-bottom:8px;
  line-height:1.4;
  font-weight:500;
}
.cal-months{
  font-family:var(--font-en);
  font-size:11px; letter-spacing:.24em;
  color:var(--text-mut);
  margin-bottom:28px;
}
.cal-items{ display:flex; flex-direction:column; gap:14px; }
.cal-item{
  font-family:var(--font-jp);
  font-size:13px; letter-spacing:.04em;
  color:var(--text-mid);
  padding-left:24px; position:relative;
}
.cal-item::before{
  content:''; position:absolute; left:0; top:11px;
  width:12px; height:1px; background:var(--text-mut);
}

/* Services 2カラム */
.svc-grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:0; margin-top:80px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.svc-box{
  padding:clamp(60px, 6vw, 100px) clamp(32px, 4vw, 56px);
  border-right:1px solid var(--line);
  transition:background .4s;
}
.svc-box:last-child{ border-right:0; }
.svc-box:hover{ background:rgba(255,255,255,.02); }
.svc-en{
  font-family:var(--font-en);
  font-size:11px; letter-spacing:.4em; color:var(--text-mut);
  margin-bottom:16px;
  text-transform:uppercase;
}
.svc-title{
  font-family:var(--font-h);
  font-size:clamp(20px, 2vw, 26px); letter-spacing:-.01em;
  color:var(--text); margin-bottom:24px;
  font-weight:500;
  line-height:1.5;
}
.svc-desc{
  font-family:var(--font-jp);
  font-size:14px; line-height:2.2; letter-spacing:.02em;
  color:var(--text-mid);
}

/* Shop */
.shop-band{
  background:var(--bg-soft);
  padding:clamp(96px, 14vw, 180px) 0;
  text-align:center;
  position:relative;
  overflow:hidden;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.shop-btns{
  display:flex; gap:40px; justify-content:center;
  margin-top:48px; flex-wrap:wrap;
}

/* Recruit banner */
.recruit-banner{
  background:var(--bg-card);
  padding:clamp(64px, 6vw, 100px) clamp(40px, 5vw, 80px);
  display:grid; grid-template-columns:1fr 1fr;
  gap:60px; align-items:center;
  border:1px solid var(--line);
  margin-top:80px;
}
.recruit-banner h3{
  font-family:var(--font-h);
  font-size:clamp(22px, 3vw, 38px);
  letter-spacing:-.01em; line-height:1.6;
  margin-bottom:28px;
  font-weight:500;
  color:var(--text);
}
.recruit-points{ display:flex; flex-direction:column; gap:20px; }
.recruit-point{
  display:flex; align-items:center; gap:16px;
  font-family:var(--font-jp);
  font-size:14px; letter-spacing:.04em;
  color:var(--text);
  padding-bottom:16px;
  border-bottom:1px solid var(--line);
}
.recruit-point::before{
  content:''; width:24px; height:1px; background:var(--text); flex-shrink:0;
}

/* Contact cards */
.contact-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:0; margin-top:80px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.contact-card{
  padding:clamp(48px, 5vw, 80px) clamp(28px, 3vw, 48px);
  border-right:1px solid var(--line);
  text-align:left;
  transition:background .4s;
}
.contact-card:last-child{ border-right:0; }
.contact-card:hover{ background:rgba(255,255,255,.02); }
.contact-en{
  font-family:var(--font-en);
  font-size:11px; letter-spacing:.4em; color:var(--text-mut);
  margin-bottom:12px;
  text-transform:uppercase;
}
.contact-title{
  font-family:var(--font-jp);
  font-size:16px; letter-spacing:.06em;
  color:var(--text); margin-bottom:24px;
  font-weight:500;
}
.contact-value{
  font-family:var(--font-en);
  font-size:32px; letter-spacing:-.02em;
  color:var(--text); display:block;
  margin-bottom:16px;
  font-weight:400;
  line-height:1;
}
.contact-note{
  font-family:var(--font-jp);
  font-size:12px; letter-spacing:.04em;
  color:var(--text-mut);
  line-height:1.9;
}

/* ================================================================
   STORY CARDS — 写真の上にBOX＋ホバーで画像切替
================================================================ */
.story-band{
  background:var(--bg);
  padding:clamp(80px, 12vw, 160px) 0 0;
  position:relative;
}
.story-band-head{
  width:min(100% - 96px, 1440px);
  margin:0 auto clamp(48px, 6vw, 96px);
  text-align:center;
}
.story-band-title{
  font-family:var(--font-h);
  font-size:clamp(28px, 4vw, 56px);
  font-weight:500; letter-spacing:-.01em;
  color:var(--text);
  margin-bottom:20px;
  line-height:1.4;
}
.story-band-desc{
  font-family:var(--font-jp);
  font-size:14px; letter-spacing:.06em;
  color:var(--text-mid);
  line-height:2;
}
.story-cards{
  display:grid; grid-template-columns:1fr 1fr;
  gap:0;
}
.story-card{
  position:relative;
  aspect-ratio:16/12;
  overflow:hidden;
  display:block;
  color:var(--text);
  isolation:isolate;
}
.story-card::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(5,5,5,.2) 0%, rgba(5,5,5,.1) 40%, rgba(5,5,5,.55) 100%);
  pointer-events:none;
}
.story-card-media{ position:absolute; inset:0; z-index:0; }
.story-card-img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.6s cubic-bezier(.22,1,.36,1), opacity .8s cubic-bezier(.76,0,.24,1);
  will-change:transform, opacity;
}
.story-card-img-hover{ opacity:0; }
.story-card:hover .story-card-img{ transform:scale(1.06); }
.story-card:hover .story-card-img-base{ opacity:0; }
.story-card:hover .story-card-img-hover{ opacity:1; }
.story-card-box{
  position:absolute; z-index:2;
  right:clamp(24px, 4vw, 60px);
  bottom:clamp(24px, 4vw, 60px);
  width:min(360px, 78%);
  background:rgba(5,5,5,.85);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  padding:32px 32px 28px;
  color:var(--text);
  border:1px solid rgba(255,255,255,.06);
  transition:transform .55s cubic-bezier(.22,1,.36,1), background .35s, border-color .35s;
}
.story-card:hover .story-card-box{
  background:rgba(5,5,5,.95);
  border-color:rgba(255,255,255,.16);
  transform:translateY(-6px);
}
.story-card-en{
  font-family:var(--font-en);
  font-size:11px; letter-spacing:.32em;
  color:var(--text-mut);
  text-transform:uppercase;
  margin-bottom:12px;
  display:flex; align-items:center; gap:10px;
}
.story-card-en::before{
  content:''; width:20px; height:1px; background:var(--text-mut);
}
.story-card-jp{
  font-family:'Noto Serif JP', var(--font-jp);
  font-size:24px; letter-spacing:.16em;
  color:var(--text); font-weight:400;
  padding-bottom:20px;
  margin-bottom:20px;
  border-bottom:1px solid rgba(255,255,255,.15);
}
.story-card-desc{
  font-size:13px; line-height:2.1; letter-spacing:.06em;
  color:var(--text-mid);
  margin-bottom:24px;
}
.story-card-arrow{
  font-family:var(--font-en);
  font-size:16px;
  color:var(--text);
  display:inline-block;
  transition:transform .5s cubic-bezier(.22,1,.36,1);
  letter-spacing:0;
}
.story-card:hover .story-card-arrow{ transform:translateX(10px); }

/* RECRUIT アクセント */
.story-card.is-recruit .story-card-box{
  border-top:2px solid var(--white);
}
.story-card.is-recruit .story-card-en{ color:var(--white); }
.story-card.is-recruit .story-card-en::before{ background:var(--white); }

@media(max-width:900px){
  .story-cards{ grid-template-columns:1fr; }
  .story-card{ aspect-ratio:16/11; }
  .story-card-box{ width:calc(100% - 32px); right:16px; bottom:16px; padding:24px; }
  .story-card-jp{ font-size:20px; }
}

/* ---------- MOMENTS マルキー（右→左シームレスループ） ---------- */
.ig-band{
  background:var(--bg);
  padding:clamp(80px, 12vw, 160px) 0;
  overflow:hidden;
  position:relative;
}
.ig-marquee{
  overflow:hidden;
  width:100%;
  margin-top:clamp(48px, 6vw, 96px);
  mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.ig-track{
  display:flex;
  gap:24px;
  width:max-content;
  animation:igMarquee 44s linear infinite;
  will-change:transform;
}
.ig-marquee:hover .ig-track{ animation-play-state:paused; }
.ig-cell{
  flex:none;
  width:clamp(240px, 22vw, 360px);
  aspect-ratio:4/5;
  overflow:hidden;
  display:block;
  position:relative;
}
.ig-cell img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1s cubic-bezier(.22,1,.36,1), filter .6s;
  filter:brightness(.92) saturate(1.05);
}
.ig-cell:hover img{
  transform:scale(1.06);
  filter:brightness(1) saturate(1.1);
}
@keyframes igMarquee{
  0%   { transform:translateX(0); }
  100% { transform:translateX(-50%); }
}
@media(prefers-reduced-motion: reduce){
  .ig-track{ animation:none; }
}
@media(max-width:768px){
  .ig-cell{ width:60vw; }
  .ig-track{ animation-duration:30s; gap:16px; }
}

/* ---------- NEWS BAR：センター縦積み＋左から勢いよく飛来 ---------- */
.news-bar{
  background:var(--bg);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:clamp(48px, 7vw, 96px) 24px;
  overflow-x:clip;
}
.news-bar-inner{
  width:min(100% - 48px, 720px);
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:32px;
}
.news-bar-label{
  font-family:var(--font-en);
  font-size:11px; letter-spacing:.42em;
  color:var(--text-mut);
  text-transform:uppercase;
  display:inline-flex; align-items:center; gap:14px;
}
.news-bar-label::before,
.news-bar-label::after{
  content:''; width:36px; height:1px; background:var(--text-mut);
}
.news-bar-list{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:20px;
  width:100%;
  perspective:1200px;
}
.news-bar-item{
  display:grid;
  grid-template-columns:110px 1fr;
  gap:24px;
  align-items:baseline;
  padding:20px 28px;
  border:1px solid rgba(255,255,255,.1);          /* 初期：薄グレー枠 */
  background-color:var(--bg-soft);
  text-align:left;
  cursor:pointer;
  transition:
    transform .4s cubic-bezier(.16,1,.3,1),
    border-color .4s cubic-bezier(.16,1,.3,1),
    background-color .4s cubic-bezier(.16,1,.3,1),
    box-shadow .4s cubic-bezier(.16,1,.3,1);
}
/* 蛍光緑ホバー：緑グロー自体をキラン！と閃かせる */
.news-bar-item:hover,
.news-bar-item:focus-within{
  transform:translateX(6px);
  border-color:#00ff66;
  background-color:rgba(0,255,102,.03);
  box-shadow:0 0 12px rgba(0,255,102,.25);
  animation:newsKiranGlow .9s cubic-bezier(.22,1,.36,1) forwards;
}
/* 光そのもののフラッシュ：暗→白緑ピーク→減衰→steady緑 */
@keyframes newsKiranGlow{
  0%{
    border-color:rgba(255,255,255,.1);
    box-shadow:0 0 0 rgba(0,255,102,0);
  }
  18%{
    border-color:#c8ffdc;                          /* 白緑ピーク（キランの瞬間） */
    box-shadow:
      0 0 40px 4px rgba(0,255,102,.9),
      0 0 80px 8px rgba(0,255,102,.35),
      inset 0 0 22px rgba(0,255,102,.2);
  }
  45%{
    border-color:#33ff88;
    box-shadow:
      0 0 24px 2px rgba(0,255,102,.5),
      0 0 48px 4px rgba(0,255,102,.18);
  }
  100%{
    border-color:#00ff66;
    box-shadow:0 0 12px rgba(0,255,102,.25);
  }
}
/* タッチデバイス：hoverを無効化し、activeでのみ発火 */
@media (hover: none) and (pointer: coarse){
  .news-bar-item:hover{
    transform:none;
    border-color:rgba(255,255,255,.1);
    background-color:var(--bg-soft);
    box-shadow:none;
    animation:none;
  }
  .news-bar-item:active{
    transform:translateX(4px);
    background-color:rgba(0,255,102,.03);
    animation:newsKiranGlow .8s cubic-bezier(.22,1,.36,1) forwards;
  }
}
@media (prefers-reduced-motion: reduce){
  .news-bar-item:hover,
  .news-bar-item:focus-within,
  .news-bar-item:active{ animation:none; }
}
.news-bar-date{
  font-family:var(--font-en);
  font-size:16px; letter-spacing:.16em;
  color:var(--text);
}
.news-bar-item > span:last-child{
  font-family:var(--font-jp);
  font-size:14px; letter-spacing:.06em;
  color:var(--text);
  line-height:1.9;
}
.news-bar-more{
  font-family:var(--font-en);
  font-size:11px; letter-spacing:.32em;
  color:var(--text);
  text-transform:uppercase;
  padding-bottom:4px;
  border-bottom:1px solid var(--text);
  transition:
    letter-spacing .35s cubic-bezier(.16,1,.3,1),
    color .35s cubic-bezier(.16,1,.3,1),
    border-bottom-color .35s cubic-bezier(.16,1,.3,1),
    text-shadow .35s cubic-bezier(.16,1,.3,1);
}
.news-bar-more:hover,
.news-bar-more:focus-visible{
  letter-spacing:.42em;
  color:#00ff66;
  border-bottom-color:#00ff66;
  text-shadow:0 0 8px rgba(0,255,102,.45);
}
@media (hover: none) and (pointer: coarse){
  .news-bar-more:hover{
    letter-spacing:.32em;
    color:var(--text);
    border-bottom-color:var(--text);
    text-shadow:none;
  }
  .news-bar-more:active{
    letter-spacing:.42em;
    color:#00ff66;
    border-bottom-color:#00ff66;
    text-shadow:0 0 8px rgba(0,255,102,.45);
  }
}

/* 左から勢いよく飛来（3枚を stagger） */
.news-bar-list.impact-l .news-bar-item{
  will-change:transform, opacity, filter;
  opacity:0;
  transform:translate3d(-100vw, 0, 0) rotate(-6deg) scale(.9);
  filter:blur(10px);
  transition:
    opacity .8s ease,
    transform 1.1s cubic-bezier(.14,.9,.28,1),
    filter .8s ease;
}
.news-bar-list.impact-l .news-bar-item:nth-child(2){ transition-delay:.12s; }
.news-bar-list.impact-l .news-bar-item:nth-child(3){ transition-delay:.24s; }
.news-bar-list.impact-l.visible .news-bar-item{
  opacity:1;
  transform:translate3d(0,0,0) rotate(0) scale(1);
  filter:blur(0);
}
@media(prefers-reduced-motion: reduce){
  .news-bar-list.impact-l .news-bar-item{
    transform:none; opacity:1; filter:none; transition:none;
  }
}
@media(max-width:600px){
  .news-bar-item{ grid-template-columns:1fr; gap:6px; padding:18px 20px; }
}

/* ---------- OUR TEAM 入場：左右から吹き飛んでくる ---------- */
.people-grid.impact{
  overflow-x:clip;
  perspective:1400px;
}
.people-grid.impact .person-card{
  will-change:transform, opacity, filter;
  transform-style:preserve-3d;
  transition:
    opacity .9s ease,
    transform 1.4s cubic-bezier(.14,.9,.28,1),
    filter 1s ease,
    box-shadow .6s ease;
  cursor:pointer;
  position:relative;
  isolation:isolate;
}
/* カードごとに違うアクセントカラー（ホバー時にオーバーレイ） */
.people-grid.impact .person-card:nth-child(1){ --card-tint:rgba(214, 172, 96, .42);  } /* ゴールド */
.people-grid.impact .person-card:nth-child(2){ --card-tint:rgba(120, 176, 216, .48); } /* 淡青 */
.people-grid.impact .person-card:nth-child(3){ --card-tint:rgba(160, 208, 140, .48); } /* 若草 */
/* 写真の色トリートメント：初期はほんのりグレー、ホバーで発色＋寄る */
.people-grid.impact .person-photo{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.people-grid.impact .person-photo img{
  filter:grayscale(.55) brightness(.86) contrast(1.05);
  transform:scale(1.05);
  transition:transform 4s cubic-bezier(.16,1,.3,1), filter 1.1s ease;
  will-change:transform, filter;
}
.people-grid.impact .person-photo::before{
  content:'';
  position:absolute; inset:0;
  z-index:2;
  background:linear-gradient(135deg, var(--card-tint) 0%, transparent 55%);
  mix-blend-mode:soft-light;
  opacity:0;
  transition:opacity .9s ease;
  pointer-events:none;
}
.people-grid.impact .person-card:hover .person-photo img{
  filter:grayscale(0) brightness(1) contrast(1.06) saturate(1.15);
  transform:scale(1.14);
}
.people-grid.impact .person-card:hover .person-photo::before{ opacity:1; }
.people-grid.impact .person-card:hover{
  box-shadow:0 20px 48px rgba(0,0,0,.5);
}
/* テキストも軽く動く */
.people-grid.impact .person-en,
.people-grid.impact .person-name,
.people-grid.impact .person-role{
  transition:transform .5s cubic-bezier(.16,1,.3,1), color .5s ease, letter-spacing .5s ease;
}
.people-grid.impact .person-card:hover .person-en{
  color:var(--text);
  letter-spacing:.5em;
}
.people-grid.impact .person-card:hover .person-name{
  transform:translateY(-2px);
}
/* 登場後の“呼吸”（写真だけを対象・hoverと競合しないよう控えめ） */
@media(prefers-reduced-motion: no-preference){
  .people-grid.impact .person-card.visible .person-photo::after{
    content:'';
    position:absolute; inset:0;
    z-index:3;
    background:radial-gradient(60% 60% at 50% 60%, transparent, rgba(0,0,0,.18));
    pointer-events:none;
    opacity:.5;
    animation:teamBreath 6.5s ease-in-out infinite;
  }
  .people-grid.impact .person-card:nth-child(2) .person-photo::after{ animation-delay:-2s; }
  .people-grid.impact .person-card:nth-child(3) .person-photo::after{ animation-delay:-4s; }
}
@keyframes teamBreath{
  0%,100%{ opacity:.5; }
  50%   { opacity:.15; }
}
.people-grid.impact .person-card:nth-child(1){
  opacity:0;
  transform:translate3d(-110vw, 40px, 0) rotate(-14deg) scale(.82);
  filter:blur(10px);
}
.people-grid.impact .person-card:nth-child(2){
  opacity:0;
  transform:translate3d(0, 140px, 0) rotate(0) scale(.7);
  filter:blur(14px);
  transition-delay:.15s;
}
.people-grid.impact .person-card:nth-child(3){
  opacity:0;
  transform:translate3d(110vw, 40px, 0) rotate(14deg) scale(.82);
  filter:blur(10px);
  transition-delay:.3s;
}
.people-grid.impact.visible .person-card{
  opacity:1;
  transform:translate3d(0,0,0) rotate(0) scale(1);
  filter:blur(0);
}
@media(prefers-reduced-motion: reduce){
  .people-grid.impact .person-card{
    transform:none; opacity:1; filter:none; transition:none;
  }
}

/* ---------- SERVICE 2カラム帯 ---------- */
.service-band{
  background:var(--bg);
  padding:clamp(80px, 12vw, 160px) 0 0;
}
.service-band .section-heading{
  margin-bottom:clamp(48px, 6vw, 96px);
}
.service-cards{ grid-template-columns:1fr 1fr; }
@media(max-width:900px){
  .service-cards{ grid-template-columns:1fr; }
}

/* ---------- 今日の旬（3カラム / あちこちから登場） ---------- */
.season-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(24px, 3vw, 40px);
  margin-top:56px;
  perspective:1200px;
}
.season-card{
  will-change:transform, opacity, filter;
  transform-style:preserve-3d;
}
/* 3枚とも同じ穏やかな下からの入場（時間差だけ変える） */
.sc-fx-1, .sc-fx-2, .sc-fx-3{
  opacity:0;
  transform:translate3d(0, 48px, 0) scale(.98);
  filter:blur(8px);
  transition:
    opacity 1s ease,
    transform 1.2s cubic-bezier(.22,1,.36,1),
    filter 1s ease;
}
.sc-fx-2{ transition-delay:.15s; }
.sc-fx-3{ transition-delay:.3s; }
.sc-fx-1.visible, .sc-fx-2.visible, .sc-fx-3.visible{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
  filter:blur(0);
}
/* カード内の要素も段階的に立ち上げる */
.season-card .season-card-img img{
  transform:scale(1.12);
  transition:transform 1.6s cubic-bezier(.22,1,.36,1) .3s, filter 1s ease;
}
.season-card.visible .season-card-img img{
  transform:scale(1.04);
}
.season-card .season-card-body > *{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .7s ease var(--d, .5s), transform .8s cubic-bezier(.16,1,.3,1) var(--d, .5s);
}
.season-card .season-card-body > *:nth-child(1){ --d:.55s; }
.season-card .season-card-body > *:nth-child(2){ --d:.68s; }
.season-card .season-card-body > *:nth-child(3){ --d:.82s; }
.season-card.visible .season-card-body > *{
  opacity:1;
  transform:translateY(0);
}
@media(max-width:768px){
  .sc-fx-1, .sc-fx-2, .sc-fx-3{ transform:translate3d(0, 32px, 0) scale(.98); }
}

/* ---------- NUMBERS ---------- */
/* ===== OUR TEAM (people 3カラム) ===== */
.people-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(24px, 3vw, 48px);
  margin-top:60px;
}
.person-card{
  position:relative;
  overflow:hidden;
}
.person-photo{
  position:relative;
  aspect-ratio:3/4;
  overflow:hidden;
  background:var(--bg-card);
  border:1px solid var(--line);
  margin-bottom:24px;
}
.person-photo img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(.15) brightness(.85) contrast(1.05) saturate(1.05);
  transform:scale(1.04);
  transition:transform 1.4s cubic-bezier(.22,1,.36,1), filter 1s ease;
}
.person-card:hover .person-photo img{
  transform:scale(1.1);
  filter:grayscale(0) brightness(.95);
}
.person-en{
  font-family:var(--font-en);
  font-size:11px; letter-spacing:.4em;
  color:var(--text-mut);
  text-transform:uppercase;
  font-weight:500;
  margin-bottom:8px;
  display:inline-flex; align-items:center; gap:12px;
}
.person-en::before{
  content:''; width:20px; height:1px; background:var(--text-mut);
}
.person-name{
  font-family:var(--font-h);
  font-size:clamp(18px, 1.8vw, 22px);
  font-weight:600;
  letter-spacing:.02em;
  color:var(--text);
  margin-bottom:6px;
  line-height:1.5;
}
.person-role{
  font-family:var(--font-jp);
  font-size:13px;
  letter-spacing:.06em;
  color:var(--text-mid);
  line-height:1.8;
}
@media(max-width:900px){
  .people-grid{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:600px){
  .people-grid{ grid-template-columns:1fr; gap:40px; }
}

/* ===== NUMBERS (tile版 / 階段レイアウト) ===== */
.numbers{
  background:var(--bg);
  padding:clamp(120px, 16vw, 200px) 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.numbers-lead{
  width:min(100% - 96px, 1440px);
  margin:0 auto clamp(60px, 8vw, 100px);
}
.numbers-title{
  font-family:var(--font-h);
  font-size:clamp(28px, 4.4vw, 60px);
  font-weight:600;
  line-height:1.5;
  letter-spacing:-.01em;
  color:var(--text);
  margin-top:24px;
}
.numbers-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(20px, 2.5vw, 40px);
  width:min(100% - 96px, 1440px);
  margin:0 auto;
  align-items:start;
}
/* 階段レイアウト：右へ上がる（左が低い→右が高い） */
.num-tile--a{ margin-top:clamp(120px, 14vw, 220px); }
.num-tile--b{ margin-top:clamp(60px, 7vw, 110px); }
.num-tile--c{ margin-top:0; }

.num-tile{
  position:relative;
  aspect-ratio:3/4;
  overflow:hidden;
  background:var(--bg-card);
  border:1px solid var(--line);
}
.num-tile-img{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.num-tile-img img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(.25) brightness(.6) contrast(1.08);
  transform:scale(1.06);
  transition:transform 1.6s cubic-bezier(.22,1,.36,1), filter 1s ease;
}
.num-tile:hover .num-tile-img img{
  transform:scale(1.1);
  filter:grayscale(.1) brightness(.55) contrast(1.08);
}
.num-tile-mask{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(5,5,5,.25) 0%, rgba(5,5,5,.55) 50%, rgba(5,5,5,.85) 100%);
  z-index:1;
}
.num-tile-body{
  position:relative; z-index:2;
  padding:clamp(28px, 3vw, 44px) clamp(24px, 2.5vw, 40px);
  height:100%;
  display:flex; flex-direction:column;
  color:var(--text);
}
.num-tile-en{
  font-family:var(--font-en);
  font-size:11px; letter-spacing:.4em;
  color:var(--text);
  text-transform:uppercase;
  font-weight:500;
  margin:0;
}
.num-tile-en span{
  display:inline-flex; align-items:center; gap:12px;
}
.num-tile-en span::before{
  content:''; width:24px; height:1px; background:var(--text);
}
.num-tile-fig{
  display:flex; align-items:baseline;
  gap:14px;
  margin-top:auto;
  margin-bottom:18px;
}
.num-tile-val{
  font-family:var(--font-en);
  font-size:clamp(72px, 10vw, 140px);
  font-weight:700;
  letter-spacing:-.03em;
  color:var(--text);
  line-height:.9;
  text-shadow:0 4px 24px rgba(0,0,0,.6);
}
.num-tile-unit{
  font-family:var(--font-jp);
  font-size:14px;
  color:var(--text);
  letter-spacing:.14em;
  line-height:1.4;
  font-weight:600;
}
.num-tile-graphic{
  margin:0 0 20px;
  min-height:60px;
  display:flex; align-items:center;
}
.num-tile-jp{
  margin-top:16px;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.24);
  font-family:var(--font-jp);
  font-size:13px;
  letter-spacing:.08em;
  color:var(--text);
  line-height:1.8;
  font-weight:500;
}

/* Timeline (HISTORY) */
.num-timeline{
  display:flex; align-items:center; gap:14px;
  width:100%;
  font-family:var(--font-en);
  font-size:11px; letter-spacing:.16em;
  color:var(--text);
}
.tl-year{ opacity:.75; }
.tl-year.now{ opacity:1; font-weight:600; }
.tl-track{
  flex:1; height:1px;
  background:rgba(255,255,255,.28);
  position:relative;
}
.tl-track i{
  position:absolute; left:0; top:-1px; bottom:-1px;
  width:0; background:var(--text);
  transition:width 2s cubic-bezier(.22,1,.36,1);
}
.num-tile.visible .tl-track i{ width:100%; }

/* Dots grid (PRODUCTS) */
.num-dots{
  display:grid;
  grid-template-columns:repeat(10, 1fr);
  gap:5px;
  width:100%;
  max-width:220px;
}
.num-dots i{
  display:block;
  width:100%;
  aspect-ratio:1;
  background:rgba(255,255,255,.18);
  border-radius:50%;
  transition:background .35s ease;
  transition-delay:calc(var(--i, 0) * .012s);
}
.num-tile.visible .num-dots i{ background:rgba(255,255,255,.88); }

/* Japan map dots (DELIVERY) */
.num-map{
  width:100%; max-width:130px;
  height:auto;
}
.num-map circle{
  fill:rgba(255,255,255,.22);
  transition:fill .5s ease;
  transition-delay:calc(var(--i, 0) * .012s);
}
.num-tile.visible .num-map circle{ fill:rgba(255,255,255,.88); }
.num-map .here{ fill:var(--text) !important; }

/* Reveal for num-tile — 左・下・右の3方向から */
.num-tile{
  opacity:0;
  filter:blur(8px);
  transition:opacity 1.1s ease, transform 1.3s cubic-bezier(.16,1,.3,1), filter 1s ease;
}
.num-tile--a{ transform:translate3d(-120px, 40px, 0) rotate(-3deg); }
.num-tile--b{ transform:translate3d(0, 120px, 0); }
.num-tile--c{ transform:translate3d(120px, 40px, 0) rotate(3deg); }
.num-tile.visible{
  opacity:1;
  transform:translate3d(0,0,0) rotate(0);
  filter:blur(0);
}
.num-tile--b{ transition-delay:.18s; }
.num-tile--c{ transition-delay:.36s; }

@media(max-width:960px){
  .numbers-grid{ grid-template-columns:1fr; gap:24px; align-items:stretch; }
  .num-tile--a, .num-tile--b, .num-tile--c{ margin-top:0; }
  .num-tile{ aspect-ratio:16/10; }
  .num-tile-fig{ margin-top:36px; }
  .num-tile--a{ transform:translate3d(-60px, 0, 0); }
  .num-tile--b{ transform:translate3d(0, 60px, 0); }
  .num-tile--c{ transform:translate3d(60px, 0, 0); }
}
@media(max-width:600px){
  .num-tile{ aspect-ratio:4/5; }
}

/* ---------- CTA帯 ---------- */
.cta-band{
  background:var(--bg);
  padding:clamp(96px, 14vw, 180px) 0;
  text-align:center;
  position:relative;
  overflow:hidden;
  border-top:1px solid var(--line);
  isolation:isolate;
}
.cta-band-media{
  position:absolute; inset:0; z-index:0;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  filter:brightness(.4) contrast(1.05) saturate(1.05);
  transform:scale(1.06);
}
.cta-band::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(5,5,5,.75) 0%, rgba(5,5,5,.5) 50%, rgba(5,5,5,.85) 100%),
    radial-gradient(60% 60% at 50% 50%, rgba(0,0,0,0), rgba(5,5,5,.55));
  pointer-events:none;
}
.cta-band > *{ position:relative; z-index:2; }
.cta-band h3{
  font-family:var(--font-h);
  font-size:clamp(22px, 3.2vw, 42px);
  letter-spacing:-.01em;
  line-height:1.6;
  margin-bottom:28px;
  color:var(--text);
  font-weight:500;
}
.cta-band p{
  font-family:var(--font-jp);
  font-size:14px; letter-spacing:.06em;
  color:var(--text-mid);
  margin-bottom:56px;
}

/* ---------- フッター ---------- */
footer{
  background:var(--bg);
  padding:120px 0 40px;
  border-top:1px solid var(--line);
}
.foot-grid{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:60px;
  margin-bottom:80px;
}
.foot-brand{ display:flex; flex-direction:column; gap:24px; }
.foot-brand .mark-row{ display:flex; align-items:center; gap:14px; }
.foot-brand-mark{
  width:44px; height:44px; border-radius:50%;
  border:1px solid var(--line);
  display:grid; place-items:center;
  color:var(--text);
  font-family:var(--font-jp);
  font-size:18px;
}
.foot-brand-jp{
  font-family:var(--font-jp);
  font-size:16px; letter-spacing:.16em; color:var(--text);
  font-weight:500;
}
.foot-brand-en{
  font-family:var(--font-en);
  font-size:10px; letter-spacing:.32em; color:var(--text-mut);
  margin-top:4px;
  text-transform:uppercase;
}
.foot-info{
  font-family:var(--font-jp);
  font-size:12px; line-height:2;
  color:var(--text-mut);
  letter-spacing:.02em;
}
.foot-col-title{
  font-family:var(--font-en);
  font-size:10px; letter-spacing:.4em;
  color:var(--text-mut);
  margin-bottom:28px;
  text-transform:uppercase;
}
.foot-links{ list-style:none; display:flex; flex-direction:column; gap:14px; }
.foot-links a{
  font-family:var(--font-jp);
  font-size:13px; letter-spacing:.06em;
  color:var(--text);
  transition:color .3s, padding .3s;
  display:inline-block;
  font-weight:400;
}
.foot-links a:hover{ color:var(--text); padding-left:8px; }
.foot-bottom{
  border-top:1px solid var(--line);
  padding-top:36px;
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--font-en);
  font-size:10px; letter-spacing:.32em;
  color:var(--text-mut);
  text-transform:uppercase;
}

/* ---------- Page Top ---------- */
.to-top{
  position:fixed; bottom:32px; right:32px;
  width:56px; height:56px;
  background:transparent;
  color:var(--text);
  border:1px solid var(--line);
  font-family:var(--font-en);
  font-size:10px; letter-spacing:.24em;
  cursor:pointer;
  display:grid; place-items:center;
  opacity:0; visibility:hidden;
  transition:opacity .4s, visibility .4s, background .3s, border-color .3s;
  z-index:90;
  text-transform:uppercase;
  border-radius:50%;
}
.to-top.visible{ opacity:1; visibility:visible; }
.to-top:hover{ background:var(--text); color:var(--bg); border-color:var(--text); }

/* ---------- 装飾字体 ---------- */
.section-heading{
  display:grid; grid-template-columns:5fr 7fr;
  gap:clamp(32px, 5vw, 80px);
  align-items:end;
  margin-bottom:clamp(60px, 8vw, 120px);
}
.section-heading > *:first-child{ align-self:end; }
.section-heading.center{ display:block; text-align:center; }
.section-heading.center .section-label{ justify-content:center; }
.section-heading.center .section-label::before{ display:none; }
.section-heading.center .section-desc{ margin:20px auto 0; }

/* map */
.map-container{
  width:100%; aspect-ratio:4/3;
  border:1px solid var(--line);
  overflow:hidden;
  filter:invert(.92) hue-rotate(180deg) saturate(.5) contrast(.9) brightness(1.05);
}
.map-container iframe{ width:100%; height:100%; border:0; display:block; }

/* ---------- responsive ---------- */
@media(max-width:1024px){
  .container, nav{ width:min(100% - 48px, 1440px); }
  .hero-inner{ grid-template-columns:1fr; gap:60px; padding:100px 40px 60px; }
  .hero-side{ align-items:flex-start; flex-direction:row; gap:20px; }
  .hero-kanji{ writing-mode:horizontal-tb; font-size:36px; letter-spacing:.2em; }
  .hero-kanji-en{ writing-mode:horizontal-tb; }
  .hero-scroll{ left:50%; transform:translateX(-50%); }
  .split, .split.reverse, .ceo-grid, .page-hero .container, .section-heading{
    grid-template-columns:1fr; gap:48px;
  }
  .section-heading > *:first-child{ align-self:start; }
  .season-grid{ grid-template-columns:repeat(2,1fr); }
  .people-grid{ grid-template-columns:repeat(2,1fr); }
  .duo{ grid-template-columns:1fr; }
  .duo-item{ border-right:0; border-bottom:1px solid var(--line); }
  .duo-item:last-child{ border-bottom:0; }
  .ig-grid{ grid-template-columns:repeat(3,1fr); }
  .prod-grid{ grid-template-columns:1fr 1fr; }
  .cal-grid{ grid-template-columns:1fr 1fr; }
  .svc-grid, .contact-grid{ grid-template-columns:1fr; }
  .svc-box, .contact-card{ border-right:0; border-bottom:1px solid var(--line); }
  .svc-box:last-child, .contact-card:last-child{ border-bottom:0; }
  .foot-grid{ grid-template-columns:1fr 1fr; gap:48px; }
  .recruit-banner{ grid-template-columns:1fr; padding:56px 40px; }
  .foot-bottom{ flex-direction:column; gap:16px; text-align:center; }
}

@media(max-width:768px){
  .container, nav{ width:calc(100% - 32px); }
  header{ padding:20px 0; }
  header.solid{ padding:12px 0; }
  .nav-links{
    display:none;
    position:fixed; inset:0;
    flex-direction:column; align-items:center; justify-content:center;
    gap:28px;
    background:#050505;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    padding:96px 32px 48px;
    z-index:100000;                    /* 圧倒的最前面：全要素の上 */
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;       /* iOSのスクロール伝播をブロック */
  }
  .nav-links.open{ display:flex !important; }
  .nav-links.open li{ display:list-item !important; opacity:1 !important; visibility:visible !important; }
  .nav-links a{ font-size:16px; letter-spacing:.24em; }
  .nav-links.open a{ color:#f4f4f4 !important; opacity:1 !important; visibility:visible !important; display:inline-block !important; }
  .nav-links.open a.current{ color:var(--accent) !important; }
  .nav-links.open a .nav-inner{ display:inline-block !important; opacity:1 !important; visibility:visible !important; }
  .nav-links a .nav-inner + .nav-inner{ display:none; }
  .menu-toggle{
    display:flex;
    z-index:100001;                    /* メニュー上でも×として必ずタップ可 */
    position:relative;
  }
  .section, .section-lg{ padding-block:80px; }
  .hero-inner{ padding:100px 16px 40px; }
  .hero-scroll{ display:none; }
  .season-grid{ grid-template-columns:1fr 1fr; gap:16px; }
  .people-grid{ grid-template-columns:1fr; gap:40px; }
  .ig-grid{ grid-template-columns:repeat(3,1fr); }
  .prod-grid{ grid-template-columns:1fr; }
  .cal-grid{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr; gap:40px; }
  .tbl th{ width:120px; padding-right:16px; font-size:10px; }
  .tbl th .jp{ font-size:12px; }
  .news-bar-inner{ flex-direction:column; align-items:flex-start; gap:16px; }
  .news-bar-list{ flex-direction:column; gap:12px; }
  .timeline{ padding-left:60px; }
  .tl-item::before{ left:-64px; }
  .to-top{ bottom:20px; right:20px; width:48px; height:48px; }
  .breadcrumb{ font-size:9px; letter-spacing:.24em; padding:16px 0; }
  .breadcrumb .sep{ margin:0 8px; }
  .big-bg{ font-size:clamp(60px, 28vw, 200px); }
}

@media(prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .hero-media{ animation:none; transform:none; }
  .hero-title .row > span{ transform:none; }
}

/* 旧テーマの黒テキスト・線残骸を吸収（inline style上書き） */
[style*="color:rgba(26,26,26"],
[style*="color: rgba(26,26,26"] { color: var(--text-mid) !important; }
[style*="color:var(--ink)"]     { color: var(--text)     !important; }

/* ==============================================================
   多方向 REVEAL（CITIZEN Stories 感）
============================================================== */
.rv-up,.rv-down,.rv-left,.rv-right,.rv-scale,.rv-rot,.rv-clip{
  opacity:0;
  transition:
    opacity 1s cubic-bezier(.16,1,.3,1),
    transform 1.15s cubic-bezier(.16,1,.3,1),
    filter 1s ease,
    clip-path 1.3s cubic-bezier(.76,0,.24,1);
  will-change:opacity, transform, filter, clip-path;
}
.rv-up   { transform:translate3d(0,80px,0); filter:blur(10px); }
.rv-down { transform:translate3d(0,-80px,0); filter:blur(10px); }
.rv-left { transform:translate3d(-90px,0,0); filter:blur(10px); }
.rv-right{ transform:translate3d(90px,0,0); filter:blur(10px); }
.rv-scale{ transform:scale(.55); filter:blur(12px); }
.rv-rot  { transform:rotate(-8deg) scale(.86); filter:blur(10px); }
.rv-clip { clip-path:inset(0 0 100% 0); }
.rv-up.visible,.rv-down.visible,.rv-left.visible,.rv-right.visible,
.rv-scale.visible,.rv-rot.visible,.rv-clip.visible{
  opacity:1;
  transform:translate3d(0,0,0) rotate(0) scale(1);
  filter:blur(0);
  clip-path:inset(0 0 0 0);
}
.rv-d1{ transition-delay:.08s; }
.rv-d2{ transition-delay:.2s; }
.rv-d3{ transition-delay:.32s; }
.rv-d4{ transition-delay:.46s; }
.rv-d5{ transition-delay:.62s; }

/* ---------- 対角線から飛来（TL/TR/BL/BR） ---------- */
.rv-fly-tl, .rv-fly-tr, .rv-fly-bl, .rv-fly-br,
.rv-spin, .rv-flip, .rv-tilt-in, .rv-zoom{
  opacity:0;
  transition:
    opacity 1.1s cubic-bezier(.16,1,.3,1),
    transform 1.4s cubic-bezier(.14,1,.32,1),
    filter 1s ease,
    clip-path 1.4s cubic-bezier(.76,0,.24,1);
  will-change:opacity, transform, filter;
}
.rv-fly-tl{ transform:translate3d(-140px,-100px,0) rotate(-8deg) scale(.82); filter:blur(10px); }
.rv-fly-tr{ transform:translate3d(140px,-100px,0)  rotate(8deg)  scale(.82); filter:blur(10px); }
.rv-fly-bl{ transform:translate3d(-140px,100px,0)  rotate(7deg)  scale(.82); filter:blur(10px); }
.rv-fly-br{ transform:translate3d(140px,100px,0)   rotate(-7deg) scale(.82); filter:blur(10px); }
.rv-spin  { transform:rotate(-16deg) scale(.7);   filter:blur(12px); }
.rv-flip  { transform:perspective(1200px) rotateY(-55deg); transform-origin:left center; }
.rv-tilt-in{ transform:translate3d(0,60px,0) rotate(-4deg) scale(.9); filter:blur(8px); }
.rv-zoom  { transform:scale(.72); filter:blur(14px) brightness(.6); }
.rv-fly-tl.visible, .rv-fly-tr.visible,
.rv-fly-bl.visible, .rv-fly-br.visible,
.rv-spin.visible, .rv-flip.visible,
.rv-tilt-in.visible, .rv-zoom.visible{
  opacity:1;
  transform:translate3d(0,0,0) rotate(0) scale(1);
  filter:blur(0);
}
.rv-flip.visible{ transform:perspective(1200px) rotateY(0); }
.rv-zoom.visible{ filter:blur(0) brightness(1); }

/* ---------- 写真スクロール連動：viewport中央基準で微移動 ---------- */
.rv-drift{
  will-change:transform;
  transition:transform .1s linear;
}

@media (prefers-reduced-motion: reduce){
  .rv-fly-tl, .rv-fly-tr, .rv-fly-bl, .rv-fly-br,
  .rv-spin, .rv-flip, .rv-tilt-in, .rv-zoom{
    transform:none !important; filter:none !important; opacity:1 !important;
  }
}
.rv-d6{ transition-delay:.8s; }

/* ==============================================================
   HISTORY MOMENT（60年の歴史の見せ場 / CITIZEN Stories風）
============================================================== */
.history-moment{
  position:relative;
  padding:clamp(80px, 10vw, 140px) 0;
  background:var(--bg);
  overflow:hidden;
  z-index:0;
}
.hm-bg{
  position:absolute;
  left:0; right:0; top:50%;
  transform:translateY(-50%);
  font-family:var(--font-en);
  font-weight:600;
  font-size:clamp(80px, 20vw, 300px);
  letter-spacing:-.08em;
  line-height:.85;
  color:rgba(255,255,255,.045);
  text-align:center;
  white-space:nowrap;
  pointer-events:none;
  user-select:none;
  z-index:0;
}
.hm-vlabel{
  position:absolute;
  top:clamp(48px, 6vw, 80px);
  right:clamp(24px, 3vw, 48px);
  display:flex; align-items:center; gap:16px;
  font-family:var(--font-en);
  font-size:11px; letter-spacing:.5em;
  color:var(--text-mut);
  writing-mode:vertical-rl;
  text-transform:uppercase;
  z-index:3;
}
.hm-vlabel::before{ content:''; width:1px; height:60px; background:var(--text-mut); }

/* ── 田崎市場ギャラリー ── */
.tasaki-gallery{
  position:relative; z-index:2;
  width:min(100% - 96px, 1100px);
  margin:60px auto 0;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
}
.tasaki-gallery-item{
  opacity:0; transform:translateY(30px);
  transition:opacity .8s ease, transform .8s ease;
}
.history-moment.is-visible .tasaki-gallery-item{
  opacity:1; transform:translateY(0);
}
.history-moment.is-visible .tasaki-gallery-item:nth-child(1){ transition-delay:.2s; }
.history-moment.is-visible .tasaki-gallery-item:nth-child(2){ transition-delay:.4s; }
.history-moment.is-visible .tasaki-gallery-item:nth-child(3){ transition-delay:.6s; }
.tasaki-gallery-img{
  aspect-ratio:4/3;
  overflow:hidden;
  border-radius:4px;
  border:1px solid rgba(255,255,255,.08);
}
.tasaki-gallery-img img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .6s ease, filter .6s ease;
  filter:brightness(.9);
}
.tasaki-gallery-item:hover .tasaki-gallery-img img{
  transform:scale(1.06);
  filter:brightness(1);
}
.tasaki-gallery-cap{
  margin-top:10px;
  font-size:12px;
  letter-spacing:.1em;
  color:rgba(255,255,255,.5);
  text-align:center;
  font-family:var(--font-jp);
}
@media(max-width:768px){
  .tasaki-gallery{
    grid-template-columns:1fr;
    gap:16px;
    margin-top:40px;
  }
}

.hm-container{
  position:relative; z-index:2;
  width:min(100% - 96px, 1000px);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(32px, 5vw, 64px);
  align-items:center;
}
/* ── Heritage アニメーション ── */
.hm-anim-slide{
  opacity:0; transform:translateX(-40px);
  transition:opacity .8s ease, transform .8s cubic-bezier(.25,.46,.45,.94);
}
.hm-anim-char{
  display:block; opacity:0; transform:translateY(32px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.25,.46,.45,.94);
  transition-delay:var(--delay, 0s);
}
.hm-anim-fade{
  opacity:0; transform:translateY(20px);
  transition:opacity .8s ease, transform .8s ease;
  transition-delay:var(--delay, 0s);
}
.hm-anim-reveal{
  opacity:0; transform:scale(.92);
  transition:opacity 1s ease, transform 1s cubic-bezier(.25,.46,.45,.94);
  transition-delay:.3s;
}
.hm-anim-reveal img{
  transform:scale(1.08);
  transition:transform 1.2s cubic-bezier(.25,.46,.45,.94) .3s;
}
.history-moment.is-visible .hm-anim-slide{
  opacity:1; transform:translateX(0);
}
.history-moment.is-visible .hm-anim-char{
  opacity:1; transform:translateY(0);
}
.history-moment.is-visible .hm-anim-fade{
  opacity:1; transform:translateY(0);
}
.history-moment.is-visible .hm-anim-reveal{
  opacity:1; transform:scale(1);
}
.history-moment.is-visible .hm-anim-reveal img{
  transform:scale(1);
}
.hm-num{
  font-family:var(--font-jp);
  color:var(--text);
  text-align:center;
}
.hm-num .en{
  display:block;
  font-family:var(--font-en);
  font-size:11px; letter-spacing:.3em;
  color:var(--text-mut);
  margin-bottom:16px;
  font-weight:500;
}
.hm-num .big{
  display:block;
  font-size:clamp(36px, 4vw, 56px);
  font-weight:500;
  line-height:1.2;
  letter-spacing:.08em;
}
.hm-num .cap{
  display:block;
  margin-top:16px;
  font-family:var(--font-jp);
  font-size:12px; letter-spacing:.2em;
  color:var(--text-mid);
  font-weight:400;
}
.hm-photo{
  aspect-ratio:16/9;
  overflow:hidden;
  background:var(--bg-card);
  position:relative;
  border:1px solid var(--line);
  border-radius:4px;
  max-height:340px;
}
.hm-photo img{
  width:100%; height:100%; object-fit:cover;
  filter:contrast(1.05) saturate(.9) brightness(.88);
  transition:transform 1.4s cubic-bezier(.22,1,.36,1), filter 1s ease;
  transform:scale(1.02);
}
.hm-photo:hover img{ transform:scale(1.06); filter:contrast(1.08) saturate(1) brightness(.95); }
.hm-photo-tag{
  position:absolute; bottom:14px; left:14px; right:14px;
  font-family:var(--font-en);
  font-size:10px; letter-spacing:.3em;
  color:rgba(255,255,255,.7);
  text-transform:uppercase;
  display:flex; justify-content:space-between; align-items:center;
  z-index:2;
}
.hm-main{ padding-left:0; }
.hm-main-en{
  font-family:var(--font-en);
  font-size:11px; letter-spacing:.4em;
  color:var(--text-mut);
  text-transform:uppercase;
  margin-bottom:20px;
  display:inline-flex; align-items:center; gap:14px;
}
.hm-main-en::before{
  content:''; width:32px; height:1px; background:var(--text-mut);
  transform-origin:left center;
  transform:scaleX(0);
  transition:transform 1.1s cubic-bezier(.83,0,.17,1) .3s;
  will-change:transform;
}
.hm-main-en.visible::before{ transform:scaleX(1); }
.hm-title{
  font-family:var(--font-h);
  font-size:clamp(36px, 5vw, 68px);
  font-weight:600;
  letter-spacing:-.02em;
  line-height:1.25;
  color:var(--text);
  margin-bottom:32px;
}
.hm-title .row{ display:block; }
.hm-desc{
  font-family:var(--font-jp);
  font-size:15px; line-height:2.1;
  color:var(--text-mid);
  max-width:420px;
  margin-bottom:36px;
  letter-spacing:.02em;
}
.hm-quote{
  padding-left:24px;
  border-left:2px solid var(--text);
  font-family:var(--font-jp);
  font-size:clamp(16px, 1.4vw, 20px);
  line-height:1.9;
  color:var(--text);
  font-weight:500;
  max-width:400px;
}
.hm-quote small{
  display:block;
  margin-top:16px;
  font-size:11px; letter-spacing:.24em;
  color:var(--text-mut);
  font-weight:400;
  font-family:var(--font-en);
  text-transform:uppercase;
}
/* 下部のタイムラインバー */
.hm-bar{
  margin-top:clamp(60px, 8vw, 100px);
  width:min(100% - 96px, 1440px);
  margin-inline:auto;
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:24px;
  align-items:center;
  padding-top:32px;
  border-top:1px solid var(--line);
}
.hm-bar-yr{
  font-family:var(--font-en);
  font-size:clamp(20px, 2vw, 30px);
  color:var(--text);
  letter-spacing:-.02em;
  font-weight:500;
  line-height:1;
}
.hm-bar-yr small{
  display:block;
  font-size:10px; letter-spacing:.4em; color:var(--text-mut);
  margin-top:8px; font-weight:500;
  text-transform:uppercase;
}
.hm-bar-track{
  height:1px; background:var(--line);
  position:relative;
}
.hm-bar-track::before{
  content:'';
  position:absolute; left:0; top:0; bottom:0;
  width:0; background:var(--text);
  transition:width 2.4s cubic-bezier(.22,1,.36,1);
}
.hm-bar-track.visible::before{ width:100%; }
.hm-bar-track::after{
  content:'';
  position:absolute; right:0; top:50%;
  width:10px; height:10px;
  background:var(--text);
  border-radius:50%;
  transform:translate(50%,-50%) scale(0);
  transition:transform .35s ease 2.35s;
}
.hm-bar-track.visible::after{ transform:translate(50%,-50%) scale(1); }

@media(max-width:1024px){
  .hm-container{ grid-template-columns:1fr; gap:56px; }
  .hm-vlabel{ display:none; }
  .hm-main{ padding-left:0; }
  .hm-photo{ max-width:480px; margin:0 auto; }
}
@media(max-width:768px){
  .history-moment{ padding:100px 0; }
  .hm-bar{ grid-template-columns:1fr; text-align:center; gap:16px; }
  .hm-bar-track{ height:2px; }
}

/* ================================================
   改行制御（SPで単語途中改行させない）
================================================ */
h1, h2, h3, h4, h5, h6,
.hero-title, .hero-sub, .page-hero-jp, .page-hero-sub,
.section-title, .section-desc,
.body-copy, .duo-title, .duo-desc,
.prod-name, .prod-desc,
.season-card-name, .season-card-desc,
.cal-jp, .cal-item,
.svc-title, .svc-desc,
.recruit-banner h3, .recruit-point,
.contact-title, .contact-note,
.cta-band h3, .cta-band p,
.quote, .tl-text, .faq-q, .faq-a p,
.foot-info, .foot-links a,
.person-name, .person-role{
  word-break:keep-all;
  overflow-wrap:break-word;
  line-break:strict;
}
/* 対応ブラウザは phrase 単位で自動改行（Chrome/Safari 新版） */
@supports (word-break: auto-phrase){
  h1, h2, h3, h4,
  .hero-title, .page-hero-jp, .section-title, .duo-title,
  .prod-name, .season-card-name, .cal-jp, .svc-title,
  .recruit-banner h3, .contact-title, .cta-band h3, .quote,
  .hero-sub, .page-hero-sub, .body-copy, .section-desc, .duo-desc{
    word-break:auto-phrase;
  }
}

/* 二次的リンクボタン：SPで最低限のtap確保 */
.prod-link, .news-bar-more, .news-more{
  min-height:36px;
  display:inline-flex; align-items:center;
}
@media(max-width:768px){
  .prod-link{ font-size:13px; padding:4px 0; }
  .news-bar-more{ font-size:12px; letter-spacing:.24em; }
  .foot-links a{ font-size:14px; padding:6px 0; display:inline-block; }
  .nav-links.open a{ font-size:18px; padding:12px 20px; }
  .contact-value{ font-size:26px; }
  .faq-q{ font-size:16px; padding:28px 0; }
}

/* ==============================================================
   DETAILS 風 上下シャッター ページトランジション（GSAP専任）
============================================================== */
/* 内部ナビからの入場ではキャッチコピーをスキップ */
html.skip-scene .scene{ display:none !important; }

.page-transition-overlay{
  position:fixed;
  inset:0;
  background:#020407;                    /* 西浦青果のベース漆黒 */
  z-index:10000;
  transform:translateY(100%);            /* 初期：画面の下に完全に隠す */
  will-change:transform;                 /* 60fps を担保 */
  pointer-events:none;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

@media(prefers-reduced-motion: reduce){
  .page-transition-overlay{ display:none !important; }
}

/* ==============================================================
   SCENE（画面切り替わりオーバーレイ）
   小さく・重く・切れ味のあるexpoモーション
============================================================== */
/* ===== LUXURY LOADER（八尾鮮風・シネマティック起動） ===== */
.luxury-loader{
  position:fixed; inset:0;
  z-index:10000;
  color:#fff;
  overflow:hidden;
  pointer-events:none;
  will-change:transform;
}
html:not(.luxury-active) .luxury-loader{ display:none; }

/* 分割カーテン（top / bottom）— 純黒 */
.luxury-loader .loader__panel{
  position:absolute; left:0; right:0;
  height:50%;
  overflow:hidden;
  background:#000;
  z-index:1;
  transition:transform 1s cubic-bezier(.86,0,.07,1);
  will-change:transform;
}
.luxury-loader .loader__panel--top{ top:0; }
.luxury-loader .loader__panel--bottom{ bottom:0; }
/* 走査線（上・下から中央方向へ） */
.luxury-loader .loader__panel::after{
  content:'';
  position:absolute; left:-10%; right:-10%;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent);
  filter:drop-shadow(0 0 6px rgba(255,255,255,.4));
  will-change:transform, opacity;
}
.luxury-loader .loader__panel--top::after{
  bottom:0;
  animation:luxScanUp 2.6s cubic-bezier(.65,0,.35,1) infinite;
}
.luxury-loader .loader__panel--bottom::after{
  top:0;
  animation:luxScanDown 2.6s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes luxScanUp{
  0%{ transform:translateY(0); opacity:0; }
  8%{ opacity:.85; }
  100%{ transform:translateY(-45vh); opacity:0; }
}
@keyframes luxScanDown{
  0%{ transform:translateY(0); opacity:0; }
  8%{ opacity:.85; }
  100%{ transform:translateY(45vh); opacity:0; }
}
.luxury-loader.is-out .loader__panel--top{ transform:translateY(-101%); }
.luxury-loader.is-out .loader__panel--bottom{ transform:translateY(101%); }

/* 中央の縦線は撤去 */
.luxury-loader .loader__center-line{ display:none !important; }

/* がつん！ 白フラッシュ（登場インパクト） */
.luxury-loader::after{
  content:'';
  position:absolute; inset:0;
  background:#fff;
  z-index:50;
  pointer-events:none;
  opacity:0;
  animation:luxImpactFlash .55s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes luxImpactFlash{
  0%   { opacity:0; }
  10%  { opacity:1; }
  55%  { opacity:0; }
  100% { opacity:0; }
}

/* 四隅のラベル */
.luxury-loader .loader__corner{
  position:absolute; z-index:3;
  font-family:'Inter',sans-serif;
  font-size:10px; letter-spacing:.42em;
  color:rgba(255,255,255,.65);
  text-transform:uppercase;
  opacity:0;
  animation:luxFade .6s ease .55s forwards;
}
.luxury-loader .loader__corner.tl{ top:28px; left:28px; }
.luxury-loader .loader__corner.tr{ top:28px; right:28px; }
.luxury-loader .loader__corner.bl{ bottom:28px; left:28px; }
.luxury-loader .loader__corner.br{ bottom:28px; right:28px; color:#fff; letter-spacing:.32em; font-variant-numeric:tabular-nums; }
@keyframes luxFade{ to{ opacity:1; } }

/* 中央コンテンツ */
.luxury-loader .loader__content{
  position:absolute; inset:0; z-index:3;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:4px;
  padding:0 24px;
  text-align:center;
}
/* バーはタイトル直下・Sub はその下に離す */
.luxury-loader .loader__bar{ order:1; }
.luxury-loader .loader__sub{ order:2; }
.luxury-loader .loader__label{
  font-family:'Inter',sans-serif;
  font-size:11px; letter-spacing:.5em;
  color:rgba(255,255,255,.7);
  text-transform:uppercase;
  margin-bottom:8px;
}
.luxury-loader .loader__title{
  font-family:'Noto Sans JP','Zen Kaku Gothic New','Inter',sans-serif;
  font-size:clamp(44px, 9vw, 128px);
  font-weight:900;
  letter-spacing:.02em;
  line-height:.94;
  color:#fff;
  display:flex; flex-direction:column;
  gap:.05em;
  text-shadow:
    0 0 24px rgba(255,255,255,.18),
    0 0 60px rgba(255,255,255,.06);
}
/* 日本語コピー：控えめサイズ、1文字ずつパラパラ */
.luxury-loader .loader__title--jp{
  font-size:clamp(20px, 3.4vw, 44px);
  letter-spacing:.16em;
  line-height:1.35;
  font-weight:600;
  text-shadow:none;
}
.luxury-loader .loader__title--jp .mask-target{
  color:#fff;
  white-space:nowrap;
  display:block;
}
.luxury-loader .loader__title--jp .mask-wrap{
  overflow:visible;
}
/* 1文字ずつ：初期は下から少し大きめ・傾き — がつん！用 */
.luxury-loader .lux-char{
  display:inline-block;
  opacity:0;
  transform:translateY(60px) scale(1.4) rotate(-4deg);
  transform-origin:center bottom;
  will-change:transform, opacity;
}
.luxury-loader .lux-char.is-space{ width:.4em; }
.luxury-loader .loader__sub{
  font-family:'Inter','Noto Sans JP',sans-serif;
  font-size:12px; letter-spacing:.4em;
  color:rgba(255,255,255,.6);
  margin-top:24px;
  text-transform:uppercase;
}

/* mask-wrap 共通 */
.luxury-loader .mask-wrap{
  display:block;
  overflow:hidden;
  line-height:1.05;
  padding-bottom:.02em;
}
.luxury-loader .mask-target{
  display:block;
  will-change:transform;
}
html.luxury-active .luxury-loader .mask-target{
  transform:translateY(110%);
}
/* JP は char アニメで制御するので mask-target 自体は隠さない */
html.luxury-active .luxury-loader .loader__title--jp .mask-target{
  transform:none;
}

/* 進行バー：タイトル直下にピタッと */
.luxury-loader .loader__bar{
  width:min(320px, 56vw);
  height:1px;
  background:rgba(255,255,255,.22);
  margin-top:10px;
  overflow:hidden;
}
.luxury-loader .loader__bar-fill{
  display:block;
  width:100%; height:100%;
  background:#fff;
  transform:scaleX(0);
  transform-origin:left;
  animation:luxBar 1.3s cubic-bezier(.65,0,.35,1) .3s forwards;
  will-change:transform;
}
@keyframes luxBar{ to{ transform:scaleX(1); } }

/* マーキーティッカー（下段） */
.luxury-loader .loader__marquee{
  position:absolute; left:0; right:0;
  bottom:72px;
  z-index:3;
  overflow:hidden;
  padding:16px 0;
  border-top:1px solid rgba(255,255,255,.12);
  border-bottom:1px solid rgba(255,255,255,.12);
  mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  opacity:0;
  animation:luxFade .6s ease .8s forwards;
}
.luxury-loader .loader__marquee-track{
  display:inline-flex; gap:36px;
  width:max-content;
  font-family:'Inter',sans-serif;
  font-size:14px; letter-spacing:.32em;
  color:#fff;
  text-transform:uppercase;
  animation:luxMarquee 24s linear infinite;
  align-items:center;
}
.luxury-loader .loader__marquee-track em{
  font-style:normal;
  color:rgba(255,255,255,.4);
  font-size:8px;
}
@keyframes luxMarquee{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-50%); }
}

/* 出口：コンテンツ先にフェード → 上下カーテンが割れる */
.luxury-loader.is-out .loader__content,
.luxury-loader.is-out .loader__center-line,
.luxury-loader.is-out .loader__marquee,
.luxury-loader.is-out .loader__corner{
  opacity:0;
  transition:opacity .35s ease;
}
.luxury-loader.is-out{ pointer-events:none; }

/* ローダー稼働中はシーンを完全に伏せる */
html.luxury-active .scene{ opacity:0 !important; visibility:hidden !important; }
@media (prefers-reduced-motion: reduce){
  .luxury-loader{ display:none !important; }
}
@media(max-width:600px){
  .luxury-loader .loader__corner{ font-size:8px; letter-spacing:.32em; }
  .luxury-loader .loader__marquee-track{ font-size:11px; }
  .luxury-loader .loader__marquee{ bottom:56px; }
}

/* ===== 派手ローディング：カーテン分割 + 1文字ずつ舞い上がり + フラッシュ ===== */
.scene{
  position:fixed;
  inset:0;
  z-index:9999;
  background:transparent;
  display:grid;
  place-items:center;
  pointer-events:none;
  overflow:hidden;
}
/* 上下カーテン（真っ黒）— .out で割れる */
.scene::before,
.scene::after{
  content:'';
  position:absolute; left:0; right:0;
  height:50%;
  background:#000;
  transition:transform .95s cubic-bezier(.83,0,.17,1);
  z-index:1;
  will-change:transform;
}
.scene::before{ top:0; }
.scene::after{ bottom:0; }
.scene.out::before{ transform:translateY(-100%); }
.scene.out::after{ transform:translateY(100%); }

/* エグジット時のホワイトフラッシュ */
.scene .flash{
  position:absolute; inset:0; z-index:3;
  background:#fff;
  opacity:0;
  pointer-events:none;
  will-change:opacity;
}
.scene.out .flash{
  animation:sceneFlash .35s ease-out both;
}
@keyframes sceneFlash{
  0%   { opacity:0; }
  25%  { opacity:.85; }
  100% { opacity:0; }
}

.scene.gone{ display:none; }
body.scene-lock{ overflow:hidden; }

.scene-inner{
  position:relative;
  z-index:2;
  text-align:center;
  padding:0 24px;
  max-width:900px;
}
.scene.out .scene-inner{
  opacity:0;
  filter:blur(6px);
  transform:scale(1.05);
  transition:opacity .45s ease, filter .5s ease, transform .5s ease;
}

/* 縦の白線ドロップ（さらに長く・鋭く） */
.scene-line{
  width:1px; height:56px;
  background:#fff;
  margin:0 auto 34px;
  transform-origin:top;
  transform:scaleY(0);
  transition:transform .6s cubic-bezier(.16,1,.3,1) .1s;
}
.scene.show .scene-line{ transform:scaleY(1); }

/* 英字：ズームインしながらトラッキング広がる */
.scene-en{
  display:block;
  font-family:'Inter','Helvetica Neue',sans-serif;
  font-weight:500;
  font-size:clamp(11px,1vw,13px);
  letter-spacing:.1em;
  color:rgba(255,255,255,.72);
  text-transform:uppercase;
  margin-bottom:32px;
  opacity:0;
  transform:scale(.7);
  transition:
    opacity .8s ease .28s,
    transform .9s cubic-bezier(.16,1,.3,1) .28s,
    letter-spacing .9s cubic-bezier(.16,1,.3,1) .28s;
}
.scene.show .scene-en{
  opacity:1;
  transform:scale(1);
  letter-spacing:.55em;
}

/* 日本語コピー：1文字ずつ舞い上がる（JSで.charに分割） */
.scene-jp{
  font-family:'Noto Sans JP','Hiragino Kaku Gothic ProN',sans-serif;
  font-weight:700;
  font-size:clamp(22px,3vw,44px);
  letter-spacing:.08em;
  line-height:1.5;
  color:#fff;
  margin:0;
}
.scene-jp .row{
  display:block;
  overflow:hidden;
  padding:.14em 0;
}
.scene-jp .row .char{
  display:inline-block;
  transform:translate3d(0,120%,0) rotate(8deg);
  opacity:0;
  transition:
    transform .9s cubic-bezier(.16,1,.3,1),
    opacity .5s ease;
  transition-delay:calc(var(--start, .5s) + var(--i, 0) * .045s);
  will-change:transform, opacity;
}
.scene-jp .row:nth-child(1){ --start:.45s; }
.scene-jp .row:nth-child(2){ --start:.72s; }
.scene.show .scene-jp .row .char{
  transform:translate3d(0,0,0) rotate(0deg);
  opacity:1;
}
/* accentの文字だけ白い下線 */
.scene-jp .char-accent{ border-bottom:2px solid #fff; padding-bottom:2px; }

/* 下部の年号バッジ（新規） */
.scene-year{
  position:absolute;
  z-index:2;
  bottom:8vh; left:50%;
  transform:translateX(-50%) scale(.6);
  font-family:'Inter','Helvetica Neue',sans-serif;
  font-size:clamp(11px,1vw,13px);
  letter-spacing:.4em;
  color:rgba(255,255,255,.5);
  text-transform:uppercase;
  opacity:0;
  transition:opacity .8s ease 1s, transform .9s cubic-bezier(.16,1,.3,1) 1s;
}
.scene.show .scene-year{
  opacity:1;
  transform:translateX(-50%) scale(1);
}

/* 旧下部署名は非表示 */
.scene-brand{ display:none; }

@media(max-width:768px){
  .scene-line{ height:40px; margin-bottom:24px; }
  .scene-en{ margin-bottom:24px; }
  .scene.show .scene-en{ letter-spacing:.35em; }
  .scene-jp{ letter-spacing:.04em; }
  .scene-year{ bottom:6vh; letter-spacing:.3em; }
}

/* ---------- PIECES（写真コラージュ＋近未来センターフォーカス） ---------- */
.pieces{
  position:relative;
  min-height:130vh;
  overflow:visible;
  background:var(--bg);
  padding:clamp(120px, 16vw, 200px) 0;
  isolation:isolate;
  z-index:1;
}
/* 中央だけ読みやすさ用に沈める。端は写真を活かす */
.pieces::after{
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(44% 36% at 50% 50%, rgba(5,5,5,.86) 0%, rgba(5,5,5,.38) 50%, rgba(5,5,5,.02) 84%, rgba(5,5,5,0) 100%),
    linear-gradient(180deg, rgba(5,5,5,.32) 0%, transparent 22%, transparent 78%, rgba(5,5,5,.32) 100%);
  pointer-events:none;
  z-index:2;
}
.pieces-bg{
  position:absolute; inset:-8% -6%;
  pointer-events:none;
  z-index:1;
}
.pieces-photo{
  position:absolute;
  overflow:hidden;
  will-change:transform;
  transform:translate3d(0,0,0);
}
.pieces-photo img{
  width:100%; height:100%;
  object-fit:cover;
  filter:brightness(.95) contrast(1.02) saturate(1.18);
}
.pieces-photo.p1{ top:2%;  left:1%;   width:26vw; aspect-ratio:4/5; }
.pieces-photo.p2{ top:5%;  right:2%;  width:22vw; aspect-ratio:5/4; }
.pieces-photo.p3{ top:36%; left:2%;   width:18vw; aspect-ratio:3/4; }
.pieces-photo.p4{ top:32%; right:1%;  width:20vw; aspect-ratio:4/5; }
.pieces-photo.p5{ top:64%; left:3%;   width:22vw; aspect-ratio:4/3; }
.pieces-photo.p6{ top:60%; right:3%;  width:24vw; aspect-ratio:3/4; }
.pieces-photo.p7{ top:82%; left:36%;  width:16vw; aspect-ratio:5/4; }
.pieces-photo.p8{ top:12%; left:42%;  width:14vw; aspect-ratio:3/4; }

/* ===== インナー：センタークランプ + 額縁装飾 ===== */
.pieces-inner{
  position:relative;
  z-index:3;
  width:min(100% - 48px, 760px);
  margin:0 auto;
  text-align:center;
  padding:clamp(60px, 12vh, 160px) clamp(20px, 4vw, 56px);
}
/* コーナーブラケット（T-L / B-R） */
.pieces-inner::before,
.pieces-inner::after{
  content:'';
  position:absolute;
  width:64px; height:64px;
  border:1px solid var(--text);
  opacity:0;
  transition:opacity .8s ease .5s, transform .8s cubic-bezier(.83,0,.17,1) .5s;
}
.pieces-inner::before{
  top:clamp(24px,6vh,80px); left:clamp(-16px,-1vw,0);
  border-right:0; border-bottom:0;
  transform:translate(-14px,-14px);
}
.pieces-inner::after{
  bottom:clamp(24px,6vh,80px); right:clamp(-16px,-1vw,0);
  border-left:0; border-top:0;
  transform:translate(14px,14px);
}
.pieces-inner.visible::before,
.pieces-inner.visible::after{
  opacity:.55;
  transform:translate(0,0);
}

/* 縦のスキャンライン（中央 / 上下から伸びる） */
.pieces-inner .scanline{
  position:absolute;
  left:50%;
  top:clamp(28px,7vh,88px);
  bottom:clamp(28px,7vh,88px);
  width:1px;
  background:linear-gradient(180deg, transparent, var(--text-mut) 20%, var(--text-mut) 80%, transparent);
  transform:translateX(-50%) scaleY(0);
  transform-origin:center;
  opacity:.45;
  transition:transform 1.2s cubic-bezier(.16,1,.3,1) .3s;
  pointer-events:none;
}
.pieces-inner.visible .scanline{ transform:translateX(-50%) scaleY(1); }

/* ===== 英字ラベル：中央から線が伸びる ===== */
.pieces-en{
  font-family:var(--font-en);
  font-size:12px; letter-spacing:.5em;
  color:var(--text);
  text-transform:uppercase;
  margin:0 auto 44px;
  display:inline-flex; align-items:center; justify-content:center;
  gap:18px;
  font-weight:500;
}
.pieces-en::before, .pieces-en::after{
  content:''; height:1px; background:var(--text);
  width:0;
  transition:width .9s cubic-bezier(.83,0,.17,1) .35s;
}
.pieces-inner.visible .pieces-en::before,
.pieces-inner.visible .pieces-en::after{ width:48px; }

/* ===== 日本語見出し：センター寄せ + シャドウで浮上 ===== */
.pieces-jp{
  font-family:var(--font-h);
  font-size:clamp(26px, 4.2vw, 54px);
  line-height:1.55;
  letter-spacing:.02em;
  color:var(--text);
  font-weight:600;
  margin:0 auto 40px;
  text-shadow:
    0 2px 24px rgba(0,0,0,.8),
    0 0 60px rgba(0,0,0,.55);
  max-width:20ch;
  word-break:keep-all;
  overflow-wrap:break-word;
}
@supports (word-break: auto-phrase){
  .pieces-jp{ word-break:auto-phrase; }
}
.pieces-jp .accent{
  color:var(--text);
  font-weight:600;
  position:relative;
  display:inline-block;
  padding:0 .08em;
}
.pieces-jp .accent::after{
  content:'';
  position:absolute;
  left:0; right:0; bottom:-.08em;
  height:2px;
  background:var(--text);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .8s cubic-bezier(.83,0,.17,1) 1.15s;
}
.pieces-jp.visible .accent::after{ transform:scaleX(1); }

.pieces-sub{
  font-family:var(--font-jp);
  font-size:clamp(13px, 1.15vw, 15px);
  letter-spacing:.14em;
  color:var(--text-mid);
  line-height:2.2;
  text-shadow:0 1px 16px rgba(0,0,0,.8);
  max-width:32ch;
  margin:0 auto;
}

/* 上部の番号インジケータ（新規） */
.pieces-index{
  display:flex; justify-content:center; align-items:center;
  gap:14px;
  margin-bottom:32px;
  font-family:var(--font-en);
  font-size:11px; letter-spacing:.4em;
  color:var(--text-mut);
  text-transform:uppercase;
  opacity:0;
  transform:translateY(-8px);
  transition:opacity .7s ease, transform .8s cubic-bezier(.16,1,.3,1);
}
.pieces-index::before{
  content:''; width:22px; height:1px; background:var(--text-mut);
}
.pieces-inner.visible .pieces-index{ opacity:1; transform:translateY(0); }

/* ===== chars 演出を上書き：クリップパスの scan reveal ===== */
.pieces-jp[data-anim="chars"] .ch{
  transform:translateY(.35em);
  clip-path:inset(0 0 100% 0);
  opacity:.6;
  filter:none;
  transition:
    clip-path .8s cubic-bezier(.83,0,.17,1) var(--d,0s),
    transform .8s cubic-bezier(.83,0,.17,1) var(--d,0s),
    opacity .5s ease var(--d,0s);
}
.pieces-jp[data-anim="chars"].visible .ch{
  transform:translateY(0);
  clip-path:inset(0 0 -6% 0);
  opacity:1;
}

@media(max-width:960px){
  .pieces{ min-height:auto; padding:100px 0; }
  .pieces-bg{ inset:-4%; }
  .pieces-photo.p1{ top:0;   left:-4%;  width:48vw; }
  .pieces-photo.p2{ top:6%;  right:-2%; width:36vw; }
  .pieces-photo.p3{ top:44%; left:-6%;  width:34vw; }
  .pieces-photo.p4{ top:38%; right:-4%; width:40vw; }
  .pieces-photo.p5{ top:72%; left:-2%;  width:40vw; }
  .pieces-photo.p6{ top:78%; right:-4%; width:42vw; }
  .pieces-photo.p7, .pieces-photo.p8{ display:none; }
  .pieces::after{
    background:
      radial-gradient(80% 55% at 50% 50%, rgba(5,5,5,.94) 0%, rgba(5,5,5,.7) 45%, rgba(5,5,5,.2) 85%, rgba(5,5,5,0) 100%),
      linear-gradient(180deg, rgba(5,5,5,.75) 0%, transparent 25%, transparent 75%, rgba(5,5,5,.75) 100%);
  }
  .pieces-inner{ padding:80px 24px; width:min(100% - 32px, 560px); }
  .pieces-inner::before, .pieces-inner::after{ width:44px; height:44px; }
  .pieces-jp{ font-size:clamp(22px, 6vw, 32px); }
  .pieces-sub{ font-size:13px; }
}
@media(max-width:600px){
  .pieces-photo{ opacity:.85; }
  .pieces-en{ margin-bottom:28px; }
  .pieces-en::before, .pieces-en::after{ width:0; }
  .pieces-en.visible::before,
  .pieces-en.visible::after{ width:28px; }
  .pieces-inner::before, .pieces-inner::after{ width:32px; height:32px; }
}
@media (prefers-reduced-motion: reduce){
  .pieces-photo{ transform:none !important; }
}

/* ---------- BOLD テキスト登場アニメ ---------- */
/* [data-anim="chars"] — 1文字ずつパラパラ落下＋わずかな回転
   注：h1〜h6 は block を保つ（section-label と横に並ばないように） */
[data-anim="chars"]{ display:block; }
span[data-anim="chars"]{ display:inline-block; }
[data-anim="chars"] .ch{
  display:inline-block;
  opacity:0;
  transform:translateY(1.1em) rotate(9deg);
  filter:blur(6px);
  transition:
    opacity .7s ease var(--d,0s),
    transform 1s cubic-bezier(.22,1,.36,1) var(--d,0s),
    filter .7s ease var(--d,0s);
  will-change:transform, opacity, filter;
}
[data-anim="chars"].visible .ch{
  opacity:1;
  transform:translateY(0) rotate(0);
  filter:blur(0);
}

/* [data-anim="words"] — 単語ごとに左右交互から飛び込む */
[data-anim="words"] .wd{
  display:inline-block;
  opacity:0;
  filter:blur(8px);
  transition:
    opacity .9s ease var(--d,0s),
    transform 1.1s cubic-bezier(.22,1,.36,1) var(--d,0s),
    filter .8s ease var(--d,0s);
  will-change:transform, opacity, filter;
}
[data-anim="words"] .wd:nth-child(odd){  transform:translateX(-60px); }
[data-anim="words"] .wd:nth-child(even){ transform:translateX(60px);  }
[data-anim="words"].visible .wd{
  opacity:1;
  transform:translateX(0);
  filter:blur(0);
}

/* .rv-slam-l — 左からスキュー付きで突入 */
.rv-slam-l{
  opacity:0;
  transform:translateX(-140px) skewX(-8deg);
  filter:blur(10px);
  transition:
    opacity .9s ease,
    transform 1.1s cubic-bezier(.14,1,.32,1),
    filter .8s ease;
  will-change:transform, opacity, filter;
}
.rv-slam-l.visible{
  opacity:1;
  transform:translateX(0) skewX(0);
  filter:blur(0);
}

/* .rv-slam-r — 右からスキュー付きで突入 */
.rv-slam-r{
  opacity:0;
  transform:translateX(140px) skewX(8deg);
  filter:blur(10px);
  transition:
    opacity .9s ease,
    transform 1.1s cubic-bezier(.14,1,.32,1),
    filter .8s ease;
  will-change:transform, opacity, filter;
}
.rv-slam-r.visible{
  opacity:1;
  transform:translateX(0) skewX(0);
  filter:blur(0);
}

@media (prefers-reduced-motion: reduce){
  [data-anim="chars"] .ch,
  [data-anim="words"] .wd,
  .rv-slam-l, .rv-slam-r{
    transform:none !important; filter:none !important; opacity:1 !important;
  }
}

/* ================================================================
   RECRUIT BAND — 採用CTA（シネマティックズーム＋パララックス）
================================================================ */
.recruit-band{
  position:relative;
  min-height:100vh;
  overflow:hidden;
  background:#050505;
  isolation:isolate;
  color:var(--text);
}
.recruit-band-media{
  position:absolute; inset:-6% -4%;
  z-index:0;
  overflow:hidden;
  will-change:transform;
}
.recruit-band-media img{
  width:100%; height:100%;
  object-fit:cover; object-position:center 40%;
  filter:grayscale(.45) brightness(.55) contrast(1.1) saturate(1.05);
  transform-origin:50% 50%;
  transform:scale(calc(1.22 - var(--recruit-scroll, 0) * 0.14)) translate3d(0, calc(var(--recruit-scroll, 0) * -40px), 0);
  transition:transform .1s linear;
}
.recruit-band::before{
  content:'';
  position:absolute; inset:0;
  z-index:1;
  background:
    radial-gradient(60% 55% at 50% 60%, rgba(5,5,5,.35), rgba(5,5,5,.85) 80%),
    linear-gradient(180deg, rgba(5,5,5,.85) 0%, rgba(5,5,5,.35) 30%, rgba(5,5,5,.35) 70%, rgba(5,5,5,.95) 100%);
  pointer-events:none;
}
/* スキャンライン装飾 */
.recruit-band-scan{
  position:absolute; inset:0;
  z-index:2;
  pointer-events:none;
  background:repeating-linear-gradient(180deg, transparent 0, transparent 4px, rgba(255,255,255,.02) 4px, rgba(255,255,255,.02) 5px);
  mix-blend-mode:screen;
}
/* 巨大英字BG（横パララックス） */
.recruit-band-bgtext{
  position:absolute;
  left:-4vw; right:-4vw;
  top:50%;
  transform:translateY(-50%) translate3d(calc(var(--recruit-scroll, 0) * -240px + 60px), 0, 0);
  z-index:2;
  pointer-events:none;
  font-family:var(--font-en);
  font-size:clamp(180px, 26vw, 420px);
  font-weight:800;
  letter-spacing:-.03em;
  line-height:.85;
  color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.09);
  text-align:center;
  white-space:nowrap;
  transition:transform .1s linear;
  user-select:none;
}
/* 上部マルキー */
.recruit-band-marquee{
  position:absolute;
  left:0; right:0; top:0;
  overflow:hidden;
  z-index:5;
  padding:16px 0;
  border-bottom:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg, rgba(0,0,0,.4), rgba(0,0,0,0));
  pointer-events:none;
}
.recruit-band-marquee .track{
  display:inline-flex; align-items:center; gap:48px;
  white-space:nowrap;
  animation:heroMarqueeX 52s linear infinite;
  will-change:transform;
}
.recruit-band-marquee span{
  font-family:var(--font-en);
  font-size:12px; letter-spacing:.5em;
  text-transform:uppercase;
  color:rgba(255,255,255,.72);
  font-weight:600;
  flex-shrink:0;
}
.recruit-band-marquee .dot{
  width:5px; height:5px;
  background:rgba(255,255,255,.5);
  border-radius:50%;
  padding:0;
}
/* 本文コンテナ */
.recruit-band-inner{
  position:relative;
  z-index:4;
  width:min(100% - 48px, 900px);
  margin:0 auto;
  min-height:100vh;
  display:flex; flex-direction:column;
  justify-content:center; align-items:center;
  text-align:center;
  padding:120px 0 100px;
  clip-path:inset(40% 0 40% 0);
  opacity:0;
  transition:clip-path 1.4s cubic-bezier(.76,0,.24,1) .2s, opacity 1s ease;
}
.recruit-band.visible .recruit-band-inner,
.recruit-band-inner.visible{
  clip-path:inset(0);
  opacity:1;
}
.recruit-band-index{
  display:flex; align-items:center; gap:14px;
  font-family:var(--font-en);
  font-size:11px; letter-spacing:.5em;
  color:var(--text-mut);
  text-transform:uppercase;
  margin-bottom:32px;
  opacity:0;
  transform:translateY(-10px);
  transition:opacity .7s ease .5s, transform .8s cubic-bezier(.16,1,.3,1) .5s;
}
.recruit-band.visible .recruit-band-index{ opacity:1; transform:translateY(0); }
.recruit-band-inner .section-label{
  color:rgba(255,255,255,.86);
  margin-bottom:32px;
}
.recruit-band-title{
  font-family:var(--font-h);
  font-size:clamp(30px, 5vw, 68px);
  font-weight:600;
  line-height:1.5;
  letter-spacing:.02em;
  margin-bottom:36px;
  color:var(--text);
  text-shadow:0 2px 20px rgba(0,0,0,.7);
  max-width:22ch;
}
.recruit-band-title .accent{
  color:var(--text);
  position:relative;
  display:inline-block;
  padding:0 .1em;
}
.recruit-band-title .accent::after{
  content:'';
  position:absolute;
  left:0; right:0; bottom:-.06em;
  height:3px;
  background:var(--text);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .9s cubic-bezier(.83,0,.17,1) 1.3s;
}
.recruit-band.visible .recruit-band-title .accent::after,
.recruit-band-title.visible .accent::after{ transform:scaleX(1); }
.recruit-band-sub{
  font-family:var(--font-jp);
  font-size:clamp(13px, 1.2vw, 16px);
  letter-spacing:.14em;
  line-height:2.2;
  color:var(--text-mid);
  text-shadow:0 1px 12px rgba(0,0,0,.7);
  max-width:34ch;
  margin-bottom:56px;
}
.recruit-band-actions{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .8s ease 1.4s, transform .8s cubic-bezier(.16,1,.3,1) 1.4s;
}
.recruit-band.visible .recruit-band-actions{ opacity:1; transform:translateY(0); }
.recruit-band-actions .btn{
  min-width:280px;
  padding:20px 40px;
  font-size:14px;
  letter-spacing:.22em;
}
/* 下部の英字メモ */
.recruit-band-foot{
  position:absolute;
  left:0; right:0; bottom:24px;
  z-index:5;
  text-align:center;
  font-family:var(--font-en);
  font-size:10px; letter-spacing:.5em;
  color:rgba(255,255,255,.42);
  text-transform:uppercase;
  opacity:0;
  transition:opacity 1s ease 1.6s;
}
.recruit-band.visible .recruit-band-foot{ opacity:1; }

@media(max-width:768px){
  .recruit-band{ min-height:auto; }
  .recruit-band-inner{ min-height:80vh; padding:120px 24px 80px; }
  .recruit-band-bgtext{ font-size:32vw; }
  .recruit-band-actions .btn{ min-width:220px; padding:16px 28px; font-size:13px; }
}
@media (prefers-reduced-motion: reduce){
  .recruit-band-media img,
  .recruit-band-bgtext,
  .recruit-band-marquee .track{ transform:none !important; animation:none !important; }
}

/* ==============================================================
   60余年の物語 SCROLLYTELLING（全画面ピン留め・GSAP scrub）
============================================================== */
.story-scrollytelling{
  position:relative;
  width:100%;
  height:100vh;
  overflow:hidden;
  background:#020407;
  isolation:isolate;
}
.story-bg-container,
.story-text-container{
  position:absolute;
  inset:0;
  width:100%;
  height:100vh;
}
.story-bg-panel{
  position:absolute;
  inset:0;
  opacity:0;
  visibility:hidden;
  overflow:hidden;
}
.story-bg-panel img{
  width:100%; height:100%;
  object-fit:cover;
  transform:scale(1.15);
  filter:brightness(.62) contrast(1.08) saturate(1.05);
  will-change:transform;
}
.story-page-overlay{
  position:absolute; inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(2,4,7,.85) 0%, rgba(2,4,7,.35) 50%, rgba(2,4,7,.85) 100%),
    linear-gradient(180deg, rgba(2,4,7,.4) 0%, transparent 20%, transparent 80%, rgba(2,4,7,.5) 100%);
}
.story-text-panel{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:0 clamp(24px, 8vw, 128px);
  opacity:0;
  visibility:hidden;
  z-index:2;
  max-width:min(100%, 1440px);
  margin:0 auto;
  will-change:opacity, transform;
}
.story-panel-num{
  display:inline-block;
  align-self:flex-start;
  font-family:'Inter','Montserrat',sans-serif;
  font-variant-numeric:tabular-nums;
  font-weight:600;
  font-size:14px;
  letter-spacing:.3em;
  color:#00ff66;                        /* 近未来ネオングリーン */
  margin-bottom:28px;
  padding:6px 14px;
  border:1px solid rgba(0,255,102,.32);
  background:rgba(0,255,102,.06);
  text-shadow:0 0 20px rgba(0,255,102,.35);
  white-space:nowrap;                    /* 04 / NEXT 60 YEARS 等の英字を折らない */
  max-width:100%;
}
.story-text-panel h2{
  font-family:'Noto Sans JP','Inter',sans-serif;
  font-size:clamp(20px, 2.8vw, 36px);
  font-weight:700;
  line-height:1.45;
  letter-spacing:0em;
  color:#fff;
  margin:0 0 24px;
  max-width:24ch;
  word-break:keep-all;
  overflow-wrap:break-word;
  text-shadow:0 4px 24px rgba(0,0,0,.65);
}
@supports (word-break: auto-phrase){
  .story-text-panel h2{ word-break:auto-phrase; }
}
.story-text-panel p{
  font-family:'Noto Sans JP',sans-serif;
  font-size:clamp(14px, 1.05vw, 16px);
  line-height:2;
  letter-spacing:.05em;
  color:rgba(255,255,255,.78);
  max-width:640px;
  margin:0;
  text-shadow:0 2px 16px rgba(0,0,0,.55);
  word-break:keep-all;
  overflow-wrap:break-word;
}
@supports (word-break: auto-phrase){
  .story-text-panel p{ word-break:auto-phrase; }
}
/* 初期状態：1章だけ見せる（JS未起動時のフォールバック） */
.story-bg-panel.active,
.story-text-panel.active{
  opacity:1;
  visibility:visible;
}

/* ===== モバイル：Pin & Scrub を維持し、9:16 縦画面に最適化 ===== */
@media(max-width:768px){
  .story-scrollytelling{
    height:100vh;
    height:100svh;
    overflow:hidden;
    padding:0;
  }
  .story-bg-container,
  .story-text-container{
    position:absolute;
    inset:0;
    height:100%;
  }
  .story-bg-panel,
  .story-text-panel{
    position:absolute;
    inset:0;
    box-sizing:border-box;
    will-change:transform, opacity;
  }
  .story-bg-panel img{
    will-change:transform;
    /* SP 縦長画面でも被写体を寄せて写す */
    object-position:center 40%;
  }
  /* SP：テキストは画面下 1/3 に寄せて長文でも被らないよう clip */
  .story-text-panel{
    padding:0 6%;
    padding-bottom:88px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
  }
  .story-panel-num{
    font-size:10px;
    letter-spacing:.24em;
    margin-bottom:14px;
    padding:4px 10px;
  }
  .story-text-panel h2{
    font-size:20px;
    line-height:1.4;
    margin-bottom:12px;
    max-width:100%;
    letter-spacing:.02em;
    word-break:keep-all;
    overflow-wrap:break-word;
  }
  .story-text-panel p{
    font-size:13px;
    line-height:1.7;
    letter-spacing:.02em;
    max-width:100%;
    /* 3行を超えたら省略：はみ出しを絶対に許さない */
    display:-webkit-box;
    -webkit-line-clamp:5;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  /* SP は下から上への漆黒グラデーションで下側の文字の可読性を担保 */
  .story-page-overlay{
    background:linear-gradient(180deg,
      rgba(2,4,7,.15) 0%,
      rgba(2,4,7,.35) 40%,
      rgba(2,4,7,.9) 100%);
    z-index:1;
  }
}
@media(max-width:400px){
  .story-text-panel h2{ font-size:17px; }
  .story-text-panel p{ font-size:12px; -webkit-line-clamp:4; }
  .story-text-panel{ padding-bottom:64px; }
}
@media(prefers-reduced-motion: reduce){
  .story-scrollytelling{ height:auto; overflow:visible; }
  .story-bg-container{ display:none; }
  .story-text-container{ position:relative; inset:auto; height:auto; }
  .story-text-panel{
    position:relative;
    inset:auto;
    opacity:1; visibility:visible;
    padding:80px 24px;
    border-bottom:1px solid rgba(255,255,255,.14);
    justify-content:flex-start;
  }
}

/* ================================================================
   MOBILE SAFETY & TYPO PATCH  2026-07-09
   狭幅で文字被り・オーバーラップ・アニメ破綻を防ぐ包括ルール
   PC のシネマティックモーションは維持したまま、SP だけ縦積み保全
================================================================ */

/* ---- 1) hero-inner 1024px padding：本文が窮屈になる問題 ---- */
@media(max-width:1024px){
  .hero-inner{ padding:100px clamp(16px, 3vw, 32px) 60px; }
}

/* ---- 2) hero-title / hero-sub / hero-eyebrow モバイル最適化 ---- */
@media(max-width:600px){
  .hero{ min-height:100svh; }
  /* タイトルは横並び1行：2つのmask-wrapをinline-blockでフローに */
  .hero-title{
    font-size:min(7.2vw, 32px);
    letter-spacing:.005em;
    line-height:1.3;
    white-space:nowrap;
    display:block;
    margin-bottom:22px;
  }
  .hero-title .mask-wrap{
    display:inline-block;
    vertical-align:baseline;
    padding:.06em 0;
  }
  .hero-title .mask-target{
    display:inline-block;
    padding:.06em 0;
  }
  .hero-sub{
    line-height:1.9;
    max-width:100%;
    font-size:13px;
    letter-spacing:.06em;
    margin-bottom:28px;
    word-break:auto-phrase;
    color:rgba(255,255,255,.82);
  }
  .hero-eyebrow{
    font-size:10px; letter-spacing:.28em;
    margin-bottom:20px;
    flex-wrap:wrap;
  }
  /* SP：グリッド解除、コンテンツを左下に寄せる非対称レイアウト */
  .hero-inner{
    display:block;
    padding:0 24px 90px;
    min-height:100svh;
    position:relative;
  }
  .hero-side{ display:none; }
  .hero-copy{
    position:absolute;
    left:22px; right:12vw; bottom:110px;
  }
  /* 右端の縦書き英字アクセント（SINCEはeyebrowに任せる） */
  .hero-inner::after{
    content:'NISHIURA SEIKA';
    position:absolute;
    right:8px; top:50%;
    transform-origin:center center;
    transform:translateY(-50%) rotate(-90deg);
    font-family:var(--font-en);
    font-size:9px; letter-spacing:.6em;
    color:rgba(255,255,255,.5);
    text-transform:uppercase;
    white-space:nowrap;
    pointer-events:none;
    z-index:5;
    opacity:0;
    animation:heroSideAcc 1.2s ease 1.6s forwards;
  }
  @keyframes heroSideAcc{ to{ opacity:1; } }
  /* 左端の細い縦罫（見出しの左に添える） */
  .hero-copy::before{
    content:'';
    position:absolute;
    left:-14px; top:0; bottom:0;
    width:1px;
    background:linear-gradient(180deg, transparent, rgba(255,255,255,.55) 30%, rgba(255,255,255,.55) 70%, transparent);
    transform-origin:top;
    animation:heroSideLine 1.6s cubic-bezier(.65,0,.35,1) 1s both;
  }
  @keyframes heroSideLine{
    from{ transform:scaleY(0); }
    to  { transform:scaleY(1); }
  }
  .hero-actions{ gap:14px; flex-direction:column; align-items:stretch; }
  .btn-marquee{ height:52px; }
}
@media(max-width:400px){
  .hero-copy{ right:11vw; bottom:100px; }
  .hero-title{ font-size:min(7.8vw, 30px); }
}

/* ヒーロー写真：モバイルでは暗幕を薄くして写真が見えるように */
@media(max-width:600px){
  .hero-overlay{
    background:
      linear-gradient(180deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,.02) 35%, rgba(0,0,0,.55) 100%),
      radial-gradient(80% 60% at 30% 40%, rgba(0,0,0,0), rgba(0,0,0,.25));
  }
  .hero::before{
    background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.5) 100%);
  }
  .slide-item img{ filter:brightness(.95) contrast(1.06) saturate(1.1); }
}

/* hero-scroll：SPでもフェードで確実に出現（GSAP失敗時のフォールバック） */
@media(max-width:768px){
  .hero-scroll{
    opacity:1;
    animation:heroScrollSpAppear 1s cubic-bezier(.16,1,.3,1) 1.4s backwards;
    z-index:8;
    bottom:max(20px, env(safe-area-inset-bottom, 20px));
  }
  @keyframes heroScrollSpAppear{
    from{ opacity:0; transform:translate(-50%, 40px); }
    to  { opacity:1; transform:translate(-50%, 0); }
  }
}

/* ---- 3) news-bar-item モバイル padding ---- */
@media(max-width:600px){
  .news-bar-item{ padding:18px 22px; }
  .news-bar-item > span:last-child{ font-size:13px; line-height:1.85; }
}

/* ---- 4) contact-value 段階縮小 ---- */
@media(max-width:1024px){
  .contact-value{ font-size:clamp(20px, 3vw, 32px); }
}

/* ---- 5) 日本語見出しの改行を綺麗に保つ ---- */
@media(max-width:768px){
  .pieces-jp{ max-width:100%; word-break:keep-all; overflow-wrap:break-word; }
  .hm-title{ line-height:1.5; word-break:keep-all; overflow-wrap:break-word; }
  .story-card-jp{ font-size:19px; letter-spacing:.08em; word-break:keep-all; }
  .section-title{ line-height:1.5; word-break:keep-all; overflow-wrap:break-word; }
  .page-hero-jp{ line-height:1.4; word-break:keep-all; overflow-wrap:break-word; }
  .duo-title{ line-height:1.5; word-break:keep-all; }
  .panel-jp{ line-height:1.4; word-break:keep-all; }
}

/* ---- 6) breadcrumb は SP 非表示（狭幅で letter-spacing が崩れる）---- */
@media(max-width:600px){
  .breadcrumb{ display:none; }
}

/* ---- 7) FAQ タップターゲット 56px ---- */
@media(max-width:768px){
  .faq-q{ padding:28px 0; min-height:56px; font-size:15px; }
}

/* ---- 8) to-top / hero-scroll notch/safe-area 対応 ---- */
.to-top{
  bottom:max(32px, env(safe-area-inset-bottom, 32px));
  right:max(32px, env(safe-area-inset-right, 32px));
}

/* ---- 9) hero-scroll：hero を離れたら消える ---- */
.hero-scroll{ transition:opacity .35s ease; }
.hero-scroll.is-hidden{ opacity:0; pointer-events:none; }

/* ---- 10) page-transition-overlay：万一残ってもクリック無効を強制 ---- */
.page-transition-overlay{ pointer-events:none !important; }

/* ---- 11) prod-grid / cal-grid / svc-grid モバイル ---- */
@media(max-width:600px){
  .prod-grid{ gap:32px; }
  .cal-grid{ grid-template-columns:1fr; gap:16px; }
  .svc-grid{ grid-template-columns:1fr; }
}

/* ---- 12) SERVICE (story-cards) SP：BOX を右下の小さなフローティングに ---- */
@media(max-width:900px){
  /* 900px 以下でも BOX は右下ミニに（従来のフル幅を上書き） */
  .story-card{ aspect-ratio:4/5; }
  .story-card-box{
    width:min(260px, 68%);
    right:12px; bottom:12px;
    padding:14px 16px 12px;
  }
  .story-card-jp{
    font-size:15px;
    letter-spacing:.06em;
    padding-bottom:10px;
    margin-bottom:10px;
  }
  .story-card-desc{
    font-size:11.5px;
    line-height:1.75;
    margin-bottom:10px;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .story-card-en{
    font-size:9px;
    letter-spacing:.24em;
    margin-bottom:6px;
  }
  .story-card-en::before{ width:14px; }
  .story-card-arrow{ font-size:11px; }
}
@media(max-width:600px){
  .story-card{ aspect-ratio:3/4; }
  .story-card-box{
    width:min(220px, 62%);
    right:10px; bottom:10px;
    padding:12px 14px 10px;
  }
  .story-card-jp{ font-size:14px; padding-bottom:8px; margin-bottom:8px; letter-spacing:.04em; }
  .story-card-desc{
    font-size:11px;
    line-height:1.7;
    margin-bottom:8px;
    -webkit-line-clamp:2;
  }
  .story-card-en{ font-size:8.5px; margin-bottom:4px; }
}

/* ---- 13) story-scrollytelling は PC・SP 共通のピン留めを維持
       （SP スタック用の上書きは削除して、ピン留めルールに任せる） ---- */

/* ---- 14) recruit / job-card SP のカード余白 ---- */
@media(max-width:600px){
  .job-card{ padding:28px 20px; }
  .job-title{ font-size:20px; }
  .stance-num{ font-size:36px; }
  .schedule-block{ grid-template-columns:1fr; gap:32px; }
}

/* ---- 15) split（縦積み時）の photo-frame 高さ抑制 ---- */
@media(max-width:900px){
  .photo-frame.tall{ aspect-ratio:16/11; max-height:60vh; }
}

/* ---- 16) tbl テーブル：1024px で th を折り返す ---- */
@media(max-width:1024px){
  .tbl th{ width:auto; }
}

/* ---- 17) OUR TEAM / NEWS impact：横スクロール完全防止の保険 ---- */
.people-grid.impact,
.news-bar-list.impact-l{ overflow-x:clip; }
html, body{ overflow-x:clip; }

/* ---- 18) reveal 系の rootMargin と噛み合うよう、header 下は余白を確保 ---- */
@media(max-width:600px){
  .section, .section-lg{ padding-block:64px; }
}

/* ---- 19) contact-note の SP letter-spacing リセット ---- */
@media(max-width:600px){
  .contact-note{ letter-spacing:0; }
}

/* ================================================================
   SECTION HEADING / NUMBERS / SEASON  2026-07-09 追加調整
   PC・SP 共通でセンター揃え、階段レイアウトの安全化
================================================================ */

/* ---- 1) numbers-lead は常に中央（英字ラベル→日本語タイトル）---- */
.numbers-lead{
  text-align:center;
  max-width:min(100% - 96px, 900px);
  margin:0 auto clamp(60px, 8vw, 100px);
}
.numbers-lead .section-label{
  justify-content:center;
  padding-left:0 !important;
  margin-bottom:20px;
}
.numbers-lead .section-label::before{ display:none; }
.numbers-title{
  font-family:var(--font-h);
  font-size:clamp(24px, 4vw, 52px);
  font-weight:600;
  line-height:1.5;
  letter-spacing:-.01em;
  color:var(--text);
  margin:0;
  word-break:keep-all;
}

/* ---- 2) numbers-grid の階段レイアウトを段階的に緩和 ---- */
@media(max-width:1200px){
  .num-tile--a{ margin-top:clamp(72px, 8vw, 140px); }
  .num-tile--b{ margin-top:clamp(36px, 4vw, 70px); }
}
@media(max-width:960px){
  .numbers-grid{
    grid-template-columns:1fr;
    gap:32px;
    width:min(100% - 48px, 720px);
  }
  .num-tile--a, .num-tile--b, .num-tile--c{ margin-top:0; }
  .num-tile{ aspect-ratio:16/9; max-height:520px; }
  /* SP でも入場方向を緩やかに */
  .num-tile--a{ transform:translate3d(-40px, 40px, 0) rotate(0); }
  .num-tile--b{ transform:translate3d(0, 60px, 0); }
  .num-tile--c{ transform:translate3d(40px, 40px, 0) rotate(0); }
}
@media(max-width:600px){
  .numbers{ padding:80px 0; }
  .numbers-grid{ width:calc(100% - 32px); gap:24px; }
  .num-tile{ aspect-ratio:5/4; }
}

/* ---- 3) num-tile 内部：SP で文字と装飾の重なりを解消 ---- */
@media(max-width:960px){
  .num-tile-body{ padding:32px 28px; gap:12px; }
  .num-tile-fig{
    margin-top:auto;
    margin-bottom:12px;
    align-items:flex-end;
    flex-wrap:nowrap;
  }
  .num-tile-val{
    font-size:clamp(56px, 14vw, 92px);
    line-height:.85;
  }
  .num-tile-unit{ font-size:13px; letter-spacing:.1em; }
  .num-tile-graphic{ min-height:44px; margin:0 0 12px; }
  .num-tile-jp{
    font-size:12.5px;
    line-height:1.7;
    padding-top:14px;
    margin-top:12px;
    letter-spacing:.06em;
    word-break:keep-all;
  }
  /* dots/map/timeline を SP では小さくして重なりを回避 */
  .num-dots{ transform:scale(.75); transform-origin:left center; }
  .num-map{ max-width:100px; }
  .num-timeline .tl-year{ font-size:11px; }
}
@media(max-width:600px){
  .num-tile-body{ padding:26px 22px; }
  .num-tile-val{ font-size:clamp(52px, 16vw, 84px); }
  .num-tile-unit{ font-size:12px; }
  .num-tile-en{ font-size:10px; letter-spacing:.32em; }
  .num-tile-jp{ font-size:12px; }
  .num-dots{ transform:scale(.6); }
  .num-map{ max-width:88px; }
}

/* ---- 4) 今日の旬 season-grid：SP は 1 カラムで縦にすべて表示 ---- */
@media(max-width:768px){
  .season-grid{
    grid-template-columns:1fr !important;
    gap:24px !important;
    margin-top:40px;
  }
}
@media(max-width:600px){
  .season-grid{ width:100%; }
  .season-card-name{ font-size:18px; }
}

/* ---- 5) section-heading center モードの英字ラベルを日本語タイトルの上に固定 ---- */
.section-heading.center{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.section-heading.center .section-label{
  justify-content:center;
  padding-left:0 !important;
  margin-bottom:20px;
}
.section-heading.center .section-label::before{ display:none; }
.section-heading.center .section-title{ margin:0; }
.section-heading.center .section-desc{ margin:20px auto 0; }

/* ---- 5-b) フラット構造（.cta-band / .recruit-banner）の英字→日本語 縦積みセンター ---- */
.cta-band .section-label,
.recruit-banner .section-label{
  display:flex !important;
  justify-content:center;
  align-items:center;
  padding-left:0 !important;
  margin:0 auto 20px !important;
  width:fit-content;
}
.cta-band .section-label::before,
.recruit-banner .section-label::before{ display:none; }
.cta-band h1, .cta-band h2, .cta-band h3,
.recruit-banner h1, .recruit-banner h2, .recruit-banner h3{
  display:block;
  text-align:center;
}
.cta-band > *,
.recruit-banner > *{ width:100%; }

/* ---- 6) SP：全ての section-heading を強制的にセンター縦積み ---- */
@media(max-width:900px){
  .section-heading{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    text-align:center;
    gap:16px;
  }
  .section-heading .section-label{
    justify-content:center;
    padding-left:0 !important;
    margin-bottom:12px;
  }
  .section-heading .section-label::before{ display:none; }
  .section-heading .section-title{ margin:0; }
}

/* ================================================================
   NUMBERS SP：横幅いっぱい・縦積み・被り解消（最終上書き）
================================================================ */
@media(max-width:960px){
  .numbers{ padding:64px 0 !important; }
  .numbers-grid{
    grid-template-columns:1fr !important;
    gap:20px !important;
    width:100% !important;
    padding:0 16px !important;
    box-sizing:border-box;
  }
  .num-tile{
    aspect-ratio:auto !important;
    max-height:none !important;
    min-height:auto !important;
    height:auto !important;
    /* 階段化はやめて上下 stagger だけ残す */
    margin-top:0 !important;
    /* 入場方向：中央下からの上げ ×3 */
    transform:translate3d(0, 60px, 0) rotate(0) !important;
  }
  .num-tile-body{
    position:relative;
    z-index:2;
    padding:28px 24px !important;
    display:flex;
    flex-direction:column;
    gap:18px !important;
    height:auto;
    min-height:auto;
  }
  .num-tile-en{
    order:1;
    margin:0;
    font-size:10px;
    letter-spacing:.32em;
  }
  .num-tile-en span::before{ width:20px; }

  .num-tile-fig{
    order:2;
    display:flex;
    align-items:baseline;
    gap:10px;
    margin:0 !important;
    flex-wrap:nowrap;
  }
  .num-tile-val{
    font-size:clamp(56px, 16vw, 88px) !important;
    line-height:.9 !important;
    letter-spacing:-.03em;
  }
  .num-tile-unit{
    font-size:12px !important;
    line-height:1.35;
    letter-spacing:.08em;
    white-space:nowrap;
  }

  .num-tile-graphic{
    order:3;
    margin:0 !important;
    min-height:auto !important;
    display:flex; align-items:center;
    overflow:hidden;
  }
  .num-tile-jp{
    order:4;
    margin:0 !important;
    padding-top:16px !important;
    border-top:1px solid rgba(255,255,255,.24);
    font-size:12.5px;
    line-height:1.75;
    letter-spacing:.06em;
    word-break:keep-all;
    overflow-wrap:break-word;
  }
  /* 装飾グラフィックは SP で被らないサイズに */
  .num-dots{
    transform:scale(.62);
    transform-origin:left top;
    width:120%;
  }
  .num-map{
    max-width:78px !important;
    height:auto;
  }
  .num-map-note{ font-size:11px; margin-top:8px; letter-spacing:.06em; }
  .num-timeline{ gap:10px; }
  .num-timeline .tl-year{ font-size:11px; letter-spacing:.14em; }
  .num-timeline .tl-track{ min-width:40px; }
  /* 画像を SP でもうっすら見せて、写真マスクの主張を抑える */
  .num-tile-img img{
    filter:grayscale(.4) brightness(.35) contrast(1.1) !important;
  }
}

@media(max-width:600px){
  .numbers-grid{ padding:0 14px !important; gap:16px !important; }
  .num-tile-body{ padding:24px 20px !important; gap:16px !important; }
  .num-tile-val{ font-size:clamp(52px, 18vw, 82px) !important; }
  .num-tile-jp{ font-size:12px; line-height:1.7; }
  .num-map{ max-width:70px !important; }
}

/* ================================================================
   HERO：縦組み撤去 → キャッチコピーを左下に凝縮＋可読性強化
================================================================ */
/* hero-side（縦書き「西浦青果 / NISHIURA SEIKA」）を撤去 */
.hero-side{ display:none !important; }

/* 1 カラム化して左下寄せ */
.hero-inner{
  grid-template-columns:1fr !important;
  align-items:end !important;
  justify-items:start !important;
  gap:0;
  padding-bottom:clamp(48px, 8vh, 96px);
}
.hero-copy{
  width:100%;
  max-width:min(680px, 90%);
  position:relative;
}
/* コピー全体の可読性を担保するローカルダークマスク（下側だけ濃く） */
.hero-copy::before{
  content:'';
  position:absolute;
  inset:-24px -32px -32px -32px;
  z-index:-1;
  background:linear-gradient(180deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.3) 45%,
    rgba(0,0,0,.72) 100%);
  filter:blur(24px);
  pointer-events:none;
  border-radius:8px;
}
.hero-copy > *{ position:relative; }

/* 文字自体のシャドウを強めて写真に負けさせない */
.hero-eyebrow{
  text-shadow:0 2px 14px rgba(0,0,0,.85), 0 0 8px rgba(0,0,0,.6);
}
.hero-title{
  text-shadow:0 6px 40px rgba(0,0,0,.85), 0 2px 12px rgba(0,0,0,.7);
}
.hero-sub{
  text-shadow:0 2px 20px rgba(0,0,0,.9), 0 0 6px rgba(0,0,0,.6);
}

/* hero-actions を左寄せに（グリッドなしで一列） */
.hero-actions{ justify-content:flex-start; }

/* SP：さらに詰めて下寄せの美しさを保つ */
@media(max-width:768px){
  .hero-inner{
    padding-bottom:clamp(72px, 12vh, 120px);
    padding-left:24px;
    padding-right:24px;
  }
  .hero-copy{ max-width:100%; }
  .hero-copy::before{ inset:-16px -20px -24px -20px; }
}
@media(max-width:600px){
  .hero-title{ font-size:clamp(28px, 8vw, 40px); }
  .hero-sub{ font-size:13.5px; margin-bottom:32px; }
  .hero-eyebrow{ margin-bottom:20px; }
}


/* ================================================================
   BUSINESS：CLIENTS 4 カード（写真＋4方向から飛来）
================================================================ */
.client-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:clamp(16px, 2vw, 28px);
  margin-top:56px;
  perspective:1400px;
}
.client-card{
  position:relative;
  aspect-ratio:3/4;
  overflow:hidden;
  isolation:isolate;
  background:var(--bg-card);
  will-change:transform, opacity, filter;
  transform-style:preserve-3d;
  border:1px solid rgba(255,255,255,.08);
  transition:transform .6s cubic-bezier(.22,1,.36,1),
             box-shadow .6s ease,
             filter .6s ease;
}
.client-card:hover{
  transform:translateY(-6px);
  box-shadow:0 30px 60px rgba(0,0,0,.4);
}
.client-card-media{
  position:absolute; inset:0; z-index:0;
  overflow:hidden;
}
.client-card-media img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.06);
  filter:grayscale(.25) brightness(.85) contrast(1.06);
  transition:transform 1.8s cubic-bezier(.22,1,.36,1), filter .8s ease;
}
.client-card:hover .client-card-media img{
  transform:scale(1.12);
  filter:grayscale(0) brightness(1) contrast(1.08);
}
/* テキスト可読性 */
.client-card::after{
  content:'';
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,
    rgba(0,0,0,.05) 0%,
    rgba(0,0,0,.25) 45%,
    rgba(0,0,0,.85) 100%);
  pointer-events:none;
}
.client-card-body{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:clamp(20px, 2.5vw, 32px) clamp(16px, 2vw, 28px);
  color:#fff;
  transition:transform .6s cubic-bezier(.22,1,.36,1);
}
.client-card:hover .client-card-body{ transform:translateY(-6px); }
.client-card-en{
  font-family:var(--font-en);
  font-size:11px; letter-spacing:.32em;
  color:rgba(255,255,255,.75);
  text-transform:uppercase;
  margin:0 0 10px;
  display:inline-flex; align-items:center; gap:10px;
}
.client-card-en::before{
  content:''; width:20px; height:1px; background:rgba(255,255,255,.75);
  transition:width .5s ease;
}
.client-card:hover .client-card-en::before{ width:36px; }
.client-card-title{
  font-family:var(--font-jp);
  font-size:clamp(16px, 1.4vw, 20px);
  font-weight:600;
  letter-spacing:.12em;
  line-height:1.35;
  color:#fff;
  margin:0;
  text-shadow:0 2px 12px rgba(0,0,0,.7);
}

/* ---- 4方向から飛来（左上 / 下 / 右上 / 上）---- */
.cl-fx-1, .cl-fx-2, .cl-fx-3, .cl-fx-4{
  opacity:0;
  filter:blur(10px);
  transition:opacity 1s ease, transform 1.3s cubic-bezier(.16,1,.3,1), filter 1s ease;
}
.cl-fx-1{ transform:translate3d(-80px, -40px, 0) rotate(-4deg) scale(.9); }
.cl-fx-2{ transform:translate3d(0, 100px, 0) scale(.88); transition-delay:.12s; }
.cl-fx-3{ transform:translate3d(80px, -40px, 0) rotate(4deg) scale(.9); transition-delay:.24s; }
.cl-fx-4{ transform:translate3d(0, -80px, 0) scale(.88); transition-delay:.36s; }
.client-grid.visible .cl-fx-1,
.client-grid.visible .cl-fx-2,
.client-grid.visible .cl-fx-3,
.client-grid.visible .cl-fx-4{
  opacity:1;
  transform:translate3d(0,0,0) rotate(0) scale(1);
  filter:blur(0);
}

@media(max-width:1024px){
  .client-grid{ grid-template-columns:repeat(2, 1fr); gap:20px; }
}
@media(max-width:600px){
  .client-grid{ grid-template-columns:1fr; gap:16px; }
  .client-card{ aspect-ratio:16/11; }
  .cl-fx-1, .cl-fx-2, .cl-fx-3, .cl-fx-4{
    transform:translate3d(0, 60px, 0) scale(.95);
  }
}
@media(prefers-reduced-motion: reduce){
  .cl-fx-1, .cl-fx-2, .cl-fx-3, .cl-fx-4{
    transform:none; opacity:1; filter:none; transition:none;
  }
}

/* ================================================================
   SP 徹底修正：ヘッダー被り解消／NISHIURA SEIKA 撤去／
                ヒーローを見切れず読みやすく
================================================================ */
@media(max-width:768px){
  /* 1) ヘッダー：NISHIURA SEIKA を非表示、ロゴだけ残す */
  header .brand-en{ display:none !important; }
  header .brand-jp{ font-size:13px; letter-spacing:.14em; }
  header{ padding:16px 0 !important; background:rgba(5,5,5,.7); backdrop-filter:blur(10px); }
  header.solid{ padding:12px 0 !important; }

  /* 2) HERO：シンプルな縦フロー（余計な高さ強制なし）*/
  .hero{
    min-height:100svh;
    padding:96px 24px 40px !important;
    display:block !important;
    align-items:initial !important;
    overflow:hidden;
  }
  .hero-inner{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;
    text-align:left;
    padding:0 !important;
    gap:0;
    min-height:calc(100svh - 96px - 40px);
  }
  .hero-copy{
    max-width:100%;
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    text-align:left;
    flex:1 1 auto;
  }
  .hero-copy::before{ display:none !important; }

  /* eyebrow */
  .hero-eyebrow{
    font-size:10px !important;
    letter-spacing:.28em !important;
    margin:0 0 20px !important;
    display:inline-flex; align-items:center; gap:10px;
    color:rgba(255,255,255,.9);
    text-shadow:0 2px 8px rgba(0,0,0,.7);
    flex-wrap:wrap;
  }
  .hero-eyebrow::before{
    content:'' !important;
    display:inline-block !important;
    width:24px !important; height:1px !important;
    background:rgba(255,255,255,.85) !important;
  }
  .hero-eyebrow .ex{ margin:0 .5em; opacity:.5; }

  /* タイトル */
  .hero-title{
    font-size:clamp(28px, 8vw, 40px) !important;
    line-height:1.4 !important;
    letter-spacing:0 !important;
    margin:0 0 20px !important;
    padding:0 !important;
    font-weight:900 !important;
    color:#fff;
    text-shadow:0 4px 20px rgba(0,0,0,.8);
    word-break:keep-all;
    overflow-wrap:break-word;
  }
  .hero-title .mask-wrap,
  .hero-title .line,
  .hero-title .mask-target{
    display:block;
    line-height:1.4;
    transform:none !important;
  }
  /* タイトル下の区切り線 */
  .hero-title::after{
    content:'';
    display:block;
    width:28px; height:1px;
    background:rgba(255,255,255,.7);
    margin-top:20px;
  }

  /* サブ本文 */
  .hero-sub{
    font-size:13px !important;
    line-height:1.85 !important;
    letter-spacing:.03em !important;
    margin:16px 0 32px !important;
    max-width:280px;
    color:rgba(255,255,255,.95);
    text-shadow:0 2px 12px rgba(0,0,0,.8);
  }

  /* CTA */
  .hero-actions{
    display:flex !important;
    flex-direction:column !important;
    gap:12px !important;
    width:100%;
    max-width:320px;
    margin:auto 0 0 !important;
    padding-top:20px;
    justify-content:flex-start !important;
    align-items:flex-start;
  }
  .btn-marquee{
    width:100% !important;
    max-width:none;
    height:52px;
  }

  /* hero-scroll・hero-side は SP で完全撤去 */
  .hero-scroll{ display:none !important; }
  .hero-side{ display:none !important; }
}

/* 極小画面 */
@media(max-width:400px){
  .hero{ padding:88px 20px 32px !important; }
  .hero-title{ font-size:26px !important; }
  .hero-sub{ font-size:12.5px !important; max-width:100%; }
  .btn-marquee{ height:48px; font-size:11px; letter-spacing:.32em; }
}

/* ================================================================
   HERO CTA：マルキーボタンを一定幅に固定（伸びない）
================================================================ */
.hero-actions .btn-marquee{
  width:220px !important;
  max-width:220px !important;
  height:52px;
  flex:0 0 220px;
}
/* SP でも 220px 固定、縦積み */
@media(max-width:768px){
  .hero-actions{
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:12px !important;
    width:auto !important;
    max-width:none !important;
  }
  .hero-actions .btn-marquee{
    width:220px !important;
    max-width:220px !important;
    flex:0 0 auto;
    height:48px;
  }
}
@media(max-width:400px){
  .hero-actions .btn-marquee{
    width:200px !important;
    max-width:200px !important;
    height:46px;
    font-size:11px;
    letter-spacing:.32em;
  }
}

/* ================================================================
   HERO SP：全体を左下に凝縮（最終上書き）
================================================================ */
@media(max-width:768px){
  .hero{
    padding:120px 24px 40px !important;
  }
  .hero-inner{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:flex-end !important;   /* 下寄せ */
    min-height:calc(100svh - 160px);
    padding:0 !important;
    gap:0;
  }
  .hero-copy{
    flex:0 0 auto !important;               /* 空間を占有しない */
    max-width:100%;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
  }
  .hero-actions{
    margin:24px 0 0 !important;              /* 下端CTAでなく本文直下に */
    padding-top:0 !important;
  }
}
@media(max-width:400px){
  .hero{ padding:120px 20px 36px !important; }
}

/* ================================================================
   HERO SP FINAL：全体を確実に左下へ寄せる（後方に置いて最終上書き）
================================================================ */
@media(max-width:768px){
  .hero{
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-end !important;   /* .hero 自体を下寄せに */
    align-items:flex-start !important;
    min-height:100svh;
    padding:96px 24px 40px !important;
    box-sizing:border-box;
  }
  .hero-inner{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:flex-end !important;
    width:100%;
    max-width:100%;
    min-height:0 !important;                /* min-height の悪影響を無効化 */
    height:auto !important;
    flex:0 0 auto !important;
    padding:0 !important;
    margin:0 !important;
  }
  .hero-copy{
    flex:0 0 auto !important;
    width:100%;
    max-width:100%;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    text-align:left !important;
  }
  .hero-actions{
    margin:24px 0 0 !important;
    padding:0 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:12px !important;
    width:auto !important;
  }
  .hero-side{ display:none !important; }
  .hero-scroll{ display:none !important; }
}

/* ==============================================================
   ABOUT PAGE — GALLERY MOSAIC / NUMBERS BAR / page-hero-media slider補正
============================================================== */

/* page-hero-media を slider として使うときの背景リセット */
.page-hero-media:has(.slide-item){
  background:none;
  filter:none;
  transform:none;
  animation:none;
}
.page-hero-media .slide-item{ z-index:0; }
.page-hero-media .slide-item img{
  filter:brightness(.55) contrast(1.06) saturate(1.1);
}

/* ===== GALLERY MOSAIC ===== */
.about-gallery{
  background:var(--bg);
  padding:clamp(96px, 14vw, 180px) 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.ag-lead{
  width:min(100% - 96px, 1440px);
  margin:0 auto clamp(48px, 6vw, 80px);
}
.ag-title{
  font-family:var(--font-h);
  font-size:clamp(28px, 4.4vw, 60px);
  font-weight:600;
  line-height:1.5;
  letter-spacing:-.01em;
  color:var(--text);
  margin:24px 0;
}
.ag-sub{
  font-family:var(--font-jp);
  font-size:15px; line-height:2;
  color:var(--text-mid);
  max-width:600px;
  letter-spacing:.04em;
}
.ag-grid{
  width:min(100% - 48px, 1440px);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  grid-auto-rows:180px;
  gap:14px;
}
.ag-cell{
  position:relative;
  overflow:hidden;
  margin:0;
  background:var(--bg-card);
  border:1px solid var(--line);
}
.ag-cell img{
  width:100%; height:100%; object-fit:cover;
  filter:brightness(.82) contrast(1.05) saturate(1.05);
  transform:scale(1.04);
  transition:transform 1.5s cubic-bezier(.22,1,.36,1), filter 1s ease;
}
.ag-cell:hover img{ transform:scale(1.12); filter:brightness(.96) contrast(1.08); }
.ag-cell figcaption{
  position:absolute; left:14px; bottom:14px; right:14px;
  font-family:var(--font-jp);
  font-size:12px; letter-spacing:.06em;
  color:#fff;
  padding:8px 14px;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  display:flex; align-items:center; gap:10px;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .5s ease, transform .5s cubic-bezier(.22,1,.36,1);
}
.ag-cell figcaption span{
  font-family:var(--font-en);
  font-size:10px; letter-spacing:.32em;
  color:#00ff66;
  text-transform:uppercase;
  padding-right:8px;
  border-right:1px solid rgba(255,255,255,.3);
}
.ag-cell:hover figcaption{ opacity:1; transform:translateY(0); }

/* モザイクレイアウト */
.ag-cell--a{ grid-column:1 / span 3; grid-row:1 / span 2; }
.ag-cell--b{ grid-column:4 / span 2; grid-row:1 / span 1; }
.ag-cell--c{ grid-column:6 / span 1; grid-row:1 / span 1; }
.ag-cell--d{ grid-column:4 / span 1; grid-row:2 / span 1; }
.ag-cell--e{ grid-column:5 / span 2; grid-row:2 / span 1; }
.ag-cell--f{ grid-column:1 / span 2; grid-row:3 / span 2; }
.ag-cell--g{ grid-column:3 / span 2; grid-row:3 / span 2; }
.ag-cell--h{ grid-column:5 / span 2; grid-row:3 / span 2; }

/* ===== ABOUT NUMBERS BAR — アイコン付き4カラム ===== */
.about-numbers{
  background:var(--bg-soft);
  padding:clamp(80px, 10vw, 130px) 0;
  border-bottom:1px solid var(--line);
  border-top:1px solid var(--line);
  position:relative;
}
.an-grid{
  width:min(100% - 96px, 1440px);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:0;
}
.an-item{
  padding:clamp(28px, 3.2vw, 48px) clamp(24px, 2.6vw, 40px);
  border-right:1px solid rgba(198,161,91,.2);
  text-align:left;
  display:flex; flex-direction:column;
  position:relative;
  transition:background .5s ease;
}
.an-item:last-child{ border-right:none; }
.an-item:hover{ background:rgba(198,161,91,.03); }
.an-item:hover .an-icon{ color:rgba(198,161,91,1); transform:rotate(-6deg) scale(1.05); }
.an-icon{
  width:44px; height:44px;
  color:rgba(198,161,91,.75);
  margin-bottom:24px;
  transition:color .5s ease, transform .6s cubic-bezier(.22,1,.36,1);
}
.an-icon svg{ width:100%; height:100%; display:block; }
.an-en{
  font-family:var(--font-en);
  font-size:11px; letter-spacing:.42em;
  color:rgba(198,161,91,.95);
  text-transform:uppercase;
  font-weight:500;
  margin-bottom:20px;
  position:relative;
  padding-bottom:16px;
}
.an-en::after{
  content:'';
  position:absolute;
  left:0; bottom:0;
  width:32px; height:1px;
  background:rgba(198,161,91,.5);
}
.an-figure{
  display:flex;
  align-items:baseline;
  gap:10px;
  margin-bottom:16px;
}
.an-val{
  font-family:var(--font-h);
  font-variant-numeric:tabular-nums;
  font-size:clamp(56px, 6.4vw, 96px);
  font-weight:500;
  line-height:.9;
  color:var(--text);
  letter-spacing:-.02em;
  margin-bottom:0;
}
.an-unit{
  font-family:var(--font-jp);
  font-size:15px; letter-spacing:.14em;
  color:var(--text-mid);
  font-weight:500;
  line-height:1.4;
  display:flex;
  flex-direction:column;
}
.an-unit small{
  font-size:11px;
  letter-spacing:.16em;
  color:var(--text-mut);
  font-weight:400;
  margin-top:2px;
}
.an-cap{
  font-family:var(--font-jp);
  font-size:12px;
  line-height:1.8;
  letter-spacing:.08em;
  color:var(--text-mut);
  margin:0;
}

/* ===== レスポンシブ ===== */
@media(max-width:1024px){
  .ag-grid{
    grid-template-columns:repeat(4, 1fr);
    grid-auto-rows:160px;
  }
  .ag-cell--a{ grid-column:1 / span 2; grid-row:1 / span 2; }
  .ag-cell--b{ grid-column:3 / span 2; grid-row:1 / span 1; }
  .ag-cell--c{ grid-column:3 / span 1; grid-row:2 / span 1; }
  .ag-cell--d{ grid-column:4 / span 1; grid-row:2 / span 1; }
  .ag-cell--e{ grid-column:1 / span 2; grid-row:3 / span 1; }
  .ag-cell--f{ grid-column:3 / span 2; grid-row:3 / span 1; }
  .ag-cell--g{ grid-column:1 / span 2; grid-row:4 / span 1; }
  .ag-cell--h{ grid-column:3 / span 2; grid-row:4 / span 1; }
}
@media(max-width:768px){
  .ag-grid{
    grid-template-columns:1fr 1fr;
    grid-auto-rows:140px;
    gap:10px;
  }
  .ag-cell--a{ grid-column:1 / span 2; grid-row:1 / span 2; }
  .ag-cell--b{ grid-column:1 / span 1; grid-row:3 / span 1; }
  .ag-cell--c{ grid-column:2 / span 1; grid-row:3 / span 1; }
  .ag-cell--d{ grid-column:1 / span 1; grid-row:4 / span 1; }
  .ag-cell--e{ grid-column:2 / span 1; grid-row:4 / span 1; }
  .ag-cell--f{ grid-column:1 / span 1; grid-row:5 / span 1; }
  .ag-cell--g{ grid-column:2 / span 1; grid-row:5 / span 1; }
  .ag-cell--h{ grid-column:1 / span 2; grid-row:6 / span 1; }
  .ag-cell figcaption{ opacity:1; transform:translateY(0); font-size:11px; padding:6px 10px; }
  .ag-cell figcaption span{ font-size:9px; letter-spacing:.24em; }

  .an-grid{
    grid-template-columns:1fr 1fr;
  }
  .an-item{
    border-right:none;
    border-bottom:1px solid var(--line);
  }
  .an-item:nth-child(odd){ border-right:1px solid var(--line); }
  .an-item:nth-last-child(-n+2){ border-bottom:none; }
}
@media(max-width:480px){
  .an-grid{ grid-template-columns:1fr; }
  .an-item{ border-right:none !important; }
  .an-item:not(:last-child){ border-bottom:1px solid var(--line); }
}

/* ================================================================
   ABOUT — OUR STORY：左に文章／右に控えめサイズの写真
================================================================ */
.about-story{
  grid-template-columns:7fr 5fr !important;
  align-items:start !important;
  gap:clamp(40px, 6vw, 96px) !important;
}
.about-story-photo{
  aspect-ratio:4/5;
  max-height:520px;
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--bg-card);
}
.about-story-photo img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.04);
  transition:transform 1.6s cubic-bezier(.22,1,.36,1);
}
.about-story-photo:hover img{ transform:scale(1.1); }
@media(max-width:900px){
  .about-story{ grid-template-columns:1fr !important; }
  .about-story-photo{ aspect-ratio:16/11; max-height:none; max-width:520px; margin:0 auto; }
}

/* ================================================================
   ローディングカウンター（0→100%）を撤去
================================================================ */
.luxury-loader .js-load-count,
.luxury-loader .loader__corner.br{ display:none !important; }

/* ================================================================
   TYPOGRAPHY OVERHAUL：明朝体へ全面切替（スタイリッシュ）
================================================================ */
:root{
  --font-en:   'Cormorant Garamond', 'EB Garamond', 'Times New Roman', serif;
  --font-jp:   'Noto Serif JP', 'Shippori Mincho', 'Yu Mincho', '游明朝', 'Hiragino Mincho ProN', 'ヒラギノ明朝 Pro W3', serif;
  --font-body: var(--font-jp);
  --font-h:    var(--font-jp);
}

/* base */
html, body{
  font-family:var(--font-jp);
  font-weight:400;
  letter-spacing:.04em;
}

/* ---- 主要見出し・タイトルを明朝に統一 ---- */
.hero-title,
.page-hero-jp,
.section-title,
.pieces-jp,
.numbers-title,
.hm-title,
.duo-title,
.story-band-title,
.panel-jp,
.recruit-band h3,
.story-text-panel h2,
.philosophy-motto-jp,
.wanted-jp,
.hm-main-en,
.season-card-name,
.person-name,
.num-tile-jp,
.story-card-jp,
.client-card-title,
.job-title,
.stance-title{
  font-family:var(--font-jp) !important;
  font-weight:700;
  letter-spacing:.06em;
}

/* ---- 巨大タイトルは重めに ---- */
.hero-title,
.pieces-jp,
.hm-title,
.story-band-title,
.numbers-title,
.panel-jp,
.story-text-panel h2,
.recruit-banner h3{
  font-weight:800;
}

/* ---- 本文 ---- */
.hero-sub, .page-hero-sub, .section-desc, .num-tile-en, .duo-desc, .prod-desc,
.season-card-desc, .person-role, .num-tile-jp, .story-card-desc, .cal-item,
.hm-desc, .panel-desc, .contact-note, .job-desc, .stance-desc, .faq-a p,
.foot-info, .foot-links, .news-bar-item > span{
  font-family:var(--font-jp) !important;
  letter-spacing:.04em;
}

/* ---- 英字ラベル・アルファベットのアクセントは Cormorant で古典的に ---- */
.section-label, .hero-eyebrow, .page-hero-en, .panel-en, .panel-num,
.svc-en, .prod-en, .duo-en, .cal-en, .season-card-tag, .person-en,
.story-card-en, .story-panel-num, .client-card-en, .num-tile-en,
.hm-vlabel, .hm-photo-tag, .hm-main-en, .story-band-desc,
.loader__label, .loader__sub, .loader__corner, .loader__marquee-track,
.foot-brand-en, .foot-col-title, .breadcrumb, .scene-en, .scene-brand-en,
.news-bar-label, .news-bar-more, .to-top, .btn-marquee, .btn-marquee-item,
.brand-en, .num-tile-val, .num-tile-fig, .loader__title, .job-en,
.wanted-en, .philosophy-motto-en, .rs-cell figcaption,
.stance-num, .stance-item, .schedule-row .time{
  font-family:'Cormorant Garamond', 'EB Garamond', 'Times New Roman', serif !important;
  letter-spacing:.24em;
  font-weight:500;
}

/* ---- ローダー日本語巨大タイトルは明朝で厚みを出す ---- */
.loader__title--jp,
.loader__title--jp .mask-target,
.loader__title--jp .lux-char{
  font-family:'Noto Serif JP','Shippori Mincho', serif !important;
  font-weight:900 !important;
  letter-spacing:.12em;
}

/* ---- ヒーロー：明朝で毅然と ---- */
.hero-title{
  font-weight:900 !important;
  letter-spacing:.06em;
}
.hero-title .mask-target, .hero-title .line{
  font-family:var(--font-jp);
  font-weight:900;
}

/* ---- ナビ・ボタン内の日本語 ---- */
.nav-links a, .btn, .btn > span, .btn.solid, .prod-link,
.contact-value, .news-bar-item .t{
  font-family:var(--font-jp) !important;
  letter-spacing:.14em;
  font-weight:500;
}

/* ---- 数字カウンター・年号などタブラー数字は明朝に寄せつつ数字専用に ---- */
.num-tile-val, .num-value, .stance-num, .schedule-row .time,
.js-load-count, .loader__count{
  font-family:'Cormorant Garamond', 'EB Garamond', 'Noto Serif JP', serif !important;
  font-weight:500 !important;
  font-variant-numeric:tabular-nums lining-nums;
  letter-spacing:0;
}

/* ---- SCENE（初回ローディング）も明朝寄せ ---- */
.scene-jp, .scene-brand-jp{
  font-family:var(--font-jp) !important;
  font-weight:500;
  letter-spacing:.18em;
}

/* ---- Cormorant がイタリック混じりの場合の保険 ---- */
.hero-eyebrow, .section-label, .breadcrumb, .foot-col-title, .to-top{
  font-style:normal;
}

/* ---- ページヒーローの英字ラベル ---- */
.page-hero-en{
  font-family:'Cormorant Garamond', serif !important;
  font-weight:500;
  letter-spacing:.32em;
}

/* ---- 数字 SVG などがある NUMBERS ---- */
.num-tile-unit, .num-tile-jp{
  font-family:var(--font-jp) !important;
  font-weight:500;
}

/* ================================================================
   JAPANESE WRAP — 「、」直後で改行しない綺麗な折り返し
================================================================ */
/* 日本語の見出し全般に auto-phrase を適用（対応ブラウザは文節で折る）*/
.hero-title,
.hero-sub,
.page-hero-jp,
.page-hero-sub,
.section-title,
.section-desc,
.pieces-jp,
.pieces-sub,
.numbers-title,
.hm-title,
.hm-desc,
.duo-title,
.duo-desc,
.story-band-title,
.story-band-desc,
.story-text-panel h2,
.story-text-panel p,
.panel-jp,
.panel-desc,
.recruit-band h3,
.season-card-name,
.season-card-desc,
.person-name,
.person-role,
.num-tile-jp,
.story-card-jp,
.story-card-desc,
.client-card-title,
.job-title,
.job-desc,
.stance-title,
.stance-desc,
.wanted-jp,
.wanted-desc,
.philosophy-motto-jp,
.philosophy-motto-desc,
.message-body p,
.contact-note,
.faq-a p{
  /* 「、」の直後で改行させない（keep-all で漢字連続を保持） */
  word-break:keep-all;
  overflow-wrap:break-word;
  line-break:strict;
}
/* 対応ブラウザで文節ごとにバランス良く折り返し */
@supports (word-break: auto-phrase){
  .hero-title,
  .hero-sub,
  .page-hero-jp,
  .page-hero-sub,
  .section-title,
  .section-desc,
  .pieces-jp,
  .pieces-sub,
  .numbers-title,
  .hm-title,
  .hm-desc,
  .duo-title,
  .duo-desc,
  .story-band-title,
  .story-band-desc,
  .story-text-panel h2,
  .story-text-panel p,
  .panel-jp,
  .panel-desc,
  .recruit-band h3,
  .season-card-name,
  .season-card-desc,
  .person-name,
  .person-role,
  .num-tile-jp,
  .story-card-jp,
  .story-card-desc,
  .client-card-title,
  .job-title,
  .job-desc,
  .stance-title,
  .stance-desc,
  .wanted-jp,
  .wanted-desc,
  .philosophy-motto-jp,
  .philosophy-motto-desc,
  .message-body p,
  .contact-note,
  .faq-a p{
    word-break:auto-phrase;
  }
}
/* テキスト行の自然分割：見出しは balance、本文は pretty */
@supports (text-wrap: balance){
  .hero-title, .page-hero-jp, .section-title, .pieces-jp,
  .numbers-title, .hm-title, .story-band-title, .panel-jp,
  .story-text-panel h2, .recruit-band h3, .philosophy-motto-jp,
  .wanted-jp{ text-wrap:balance; }
}
@supports (text-wrap: pretty){
  .hero-sub, .page-hero-sub, .section-desc, .pieces-sub, .hm-desc,
  .duo-desc, .story-band-desc, .story-text-panel p, .panel-desc,
  .season-card-desc, .person-role, .num-tile-jp, .story-card-desc,
  .job-desc, .stance-desc, .wanted-desc, .philosophy-motto-desc,
  .contact-note, .message-body p{ text-wrap:pretty; }
}
/* 特に hero-title は「、」の後で改行しても孤立しないよう */
.hero-title{
  overflow-wrap:normal;
}
.hero-title .mask-target,
.hero-title .line{
  display:block;
  white-space:normal;
  word-break:keep-all;
  overflow-wrap:break-word;
}

/* ================================================================
   HERO PC：タイトルが 3 行折りになる問題を修正
================================================================ */
@media(min-width:769px){
  .hero-inner{
    width:min(100% - 96px, 1440px) !important;
    max-width:1440px !important;
    margin:0 auto !important;
  }
  .hero-copy{
    max-width:min(1080px, 92%) !important;
    width:100%;
  }
  .hero-title{
    font-size:clamp(32px, 5vw, 76px) !important;
    line-height:1.2 !important;
    letter-spacing:.04em !important;
    margin-bottom:32px !important;
    font-weight:900;
  }
  .hero-title .mask-wrap{
    display:block;
    line-height:1.2;
    white-space:nowrap;         /* 各行を絶対に途中で折らない */
  }
  .hero-title .mask-target,
  .hero-title .line{
    display:block;
    white-space:nowrap;
  }
  .hero-sub{
    max-width:min(580px, 90%) !important;
    line-height:2 !important;
  }
}

/* ヘッダーの英字 NISHIURA SEIKA も PC で非表示（ロゴをすっきり） */
header .brand-en{ display:none !important; }
header .brand-jp{ font-size:14px; letter-spacing:.16em; }

/* ================================================================
   HERO TITLE：確実に 2 行「市場の目利きを、／ 日常へ。」で保持
================================================================ */
.hero-title{
  word-break:keep-all !important;
  overflow-wrap:normal !important;
  line-break:strict !important;
}
.hero-title .mask-wrap{
  display:block !important;
  white-space:nowrap !important;
  overflow:visible !important;
}
.hero-title .mask-target,
.hero-title .line{
  display:block !important;
  white-space:nowrap !important;
}
/* コンテナ幅を広げる保険 */
@media(min-width:769px){
  .hero-copy{ max-width:min(1080px, 92%) !important; }
}

/* ================================================================
   PIECES：写真をクリーンなグリッド配置に再定義（パズルの完成形）
================================================================ */
.pieces-bg{
  position:absolute; inset:0;
  z-index:1;
  pointer-events:none;
}
/* 上段：4枚並び / 下段：4枚並び — 対称・均等サイズ */
.pieces-photo{
  position:absolute;
  overflow:hidden;
  will-change:transform;
}
.pieces-photo img{
  width:100%; height:100%;
  object-fit:cover;
  filter:grayscale(.15) brightness(.85) contrast(1.08) saturate(.95);
}

/* 8 枚 4×2 のグリッド */
.pieces-photo.p1{ top:6%;  left:2%;   width:20vw; aspect-ratio:3/4; }
.pieces-photo.p2{ top:6%;  left:27%;  width:20vw; aspect-ratio:3/4; }
.pieces-photo.p3{ top:6%;  left:52%;  width:20vw; aspect-ratio:3/4; }
.pieces-photo.p4{ top:6%;  left:77%;  width:20vw; aspect-ratio:3/4; }
.pieces-photo.p5{ top:56%; left:2%;   width:20vw; aspect-ratio:3/4; }
.pieces-photo.p6{ top:56%; left:27%;  width:20vw; aspect-ratio:3/4; }
.pieces-photo.p7{ top:56%; left:52%;  width:20vw; aspect-ratio:3/4; }
.pieces-photo.p8{ top:56%; left:77%;  width:20vw; aspect-ratio:3/4; }

/* 中央のテキストゾーンは半透明マスクで写真の上に */
.pieces::after{
  content:'';
  position:absolute; inset:0;
  z-index:2;
  pointer-events:none;
  background:
    radial-gradient(55% 45% at 50% 50%,
      rgba(5,5,5,.95) 0%,
      rgba(5,5,5,.75) 40%,
      rgba(5,5,5,.15) 80%,
      rgba(5,5,5,0) 100%),
    linear-gradient(180deg, rgba(5,5,5,.6) 0%, transparent 20%, transparent 80%, rgba(5,5,5,.6) 100%);
}

/* タブレット：3 列 × 3 段 */
@media(max-width:1024px){
  .pieces-photo{ aspect-ratio:3/4; }
  .pieces-photo.p1{ top:4%;  left:2%;   width:28vw; }
  .pieces-photo.p2{ top:4%;  left:36%;  width:28vw; }
  .pieces-photo.p3{ top:4%;  left:70%;  width:28vw; }
  .pieces-photo.p4{ top:37%; left:2%;   width:28vw; }
  .pieces-photo.p5{ top:37%; left:70%;  width:28vw; }
  .pieces-photo.p6{ top:70%; left:2%;   width:28vw; }
  .pieces-photo.p7{ top:70%; left:36%;  width:28vw; }
  .pieces-photo.p8{ top:70%; left:70%;  width:28vw; }
}

/* SP：2 列 × 4 段 */
@media(max-width:600px){
  .pieces-photo.p1{ top:2%;  left:3%;   width:44vw; }
  .pieces-photo.p2{ top:2%;  left:53%;  width:44vw; }
  .pieces-photo.p3{ top:26%; left:3%;   width:44vw; }
  .pieces-photo.p4{ top:26%; left:53%;  width:44vw; }
  .pieces-photo.p5{ top:50%; left:3%;   width:44vw; }
  .pieces-photo.p6{ top:50%; left:53%;  width:44vw; }
  .pieces-photo.p7{ top:74%; left:3%;   width:44vw; }
  .pieces-photo.p8{ top:74%; left:53%;  width:44vw; }
}

/* PIECES SUB：2 行を保証 */
.pieces-sub{
  word-break:keep-all !important;
  overflow-wrap:normal !important;
  line-break:strict !important;
}

/* ================================================================
   見出しレイアウト統一：英語ラベルを日本語見出しの上に配置
================================================================ */
.section-heading,
.section-heading.center{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start;
  gap:16px;
}
.section-heading.center{
  align-items:center;
  text-align:center;
}
.section-heading .section-label{
  margin-bottom:0 !important;
  padding-left:0 !important;
  order:1;
}
.section-heading .section-title,
.section-heading > h1,
.section-heading > h2{
  order:2;
  margin:0 !important;
}
.section-heading .section-desc,
.section-heading > p:not(.section-label){
  order:3;
  margin:8px 0 0 !important;
}
.section-heading.center .section-label{
  justify-content:center;
}
.section-heading .section-label::before,
.section-heading.center .section-label::before{
  display:none;
}

/* SP は左寄せに落とす */
@media(max-width:900px){
  .section-heading,
  .section-heading.center{
    align-items:flex-start !important;
    text-align:left !important;
  }
  .section-heading .section-label{
    justify-content:flex-start !important;
  }
}

/* ---- HISTORY MOMENT / PIECES / RECRUIT の英字も上に統一 ---- */
.hm-main{ display:flex; flex-direction:column; align-items:flex-start; }
.hm-main-en{ order:1; margin-bottom:16px; }
.hm-title{ order:2; }
.hm-desc{ order:3; }
.hm-quote{ order:4; }

.pieces-inner{ display:flex; flex-direction:column; align-items:center; }
.pieces-index{ order:1; }
.pieces-en{ order:2; margin-bottom:8px; }
.pieces-jp{ order:3; }
.pieces-sub{ order:4; }

/* ================================================================
   STORY SCROLLYTELLING：確実に表示させる復活パッチ
================================================================ */
.story-scrollytelling{
  display:block !important;
  visibility:visible !important;
  height:100vh;
  height:100svh;
  min-height:100svh;
  overflow:hidden;
  background:#020407;
  isolation:isolate;
  position:relative;
  width:100%;
}
.story-scrollytelling .story-bg-container,
.story-scrollytelling .story-text-container{
  display:block !important;
  visibility:visible !important;
  position:absolute;
  inset:0;
}
/* GSAP 初期化前のフォールバック：1章目は必ず見せる */
.story-scrollytelling .story-bg-panel.active,
.story-scrollytelling .story-text-panel.active{
  opacity:1 !important;
  visibility:visible !important;
}
.story-scrollytelling .story-bg-panel.active img{
  transform:scale(1.05) !important;
}

/* ================================================================
   PERFORMANCE：モバイルの負荷を軽減
================================================================ */
@media(max-width:768px){
  /* 重い backdrop-filter を SP では無効化 */
  header.solid,
  .luxury-loader .loader__marquee,
  .btn-marquee{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
  /* body ノイズテクスチャは SP では不要 */
  body::after{ display:none !important; }
  /* 常時アニメの一部を停止（バッテリー保護） */
  .pieces-photo img,
  .num-tile-img img,
  .cta-band-media,
  .page-hero-media{
    animation:none !important;
  }
  /* ローダーの走査線は SP では停止 */
  .luxury-loader .loader__panel::after{ animation:none !important; }
  /* GPU レイヤ強制の will-change を最小限に */
  .pieces-photo,
  .num-tile{ will-change:auto; }
}

/* ================================================================
   遅延ロード：ヒーロー外のセクションをレイジー描画
================================================================ */
.pieces,
.numbers,
.story-scrollytelling,
.ig-band,
.cta-band,
.service-band,
footer{
  content-visibility:auto;
  contain-intrinsic-size:1px 800px;
}
/* story-scrollytelling は pin 用に高さ確保 */
.story-scrollytelling{
  contain-intrinsic-size:100vh 100vh;
}

/* ================================================================
   NUMBERS：階段撤廃 → まっすぐ並び／3枚とも別の入場アニメ
================================================================ */
/* 階段の margin-top を完全撤廃 */
.num-tile--a,
.num-tile--b,
.num-tile--c{
  margin-top:0 !important;
  align-self:stretch;
}
.numbers-grid{ align-items:stretch !important; }

/* 3 枚 個別の入場（reveal 完了時に visible が付く） */
.num-tile{
  will-change:transform, opacity, filter;
  transition:
    opacity 1.1s ease,
    transform 1.4s cubic-bezier(.16,1,.3,1),
    filter 1s ease;
}

/* 01：左からスライドイン＋ブラー抜け */
.num-tile--a{
  opacity:0 !important;
  transform:translate3d(-120px, 0, 0) rotate(-2deg) scale(.96) !important;
  filter:blur(10px) !important;
  transition-delay:0s !important;
}
.num-tile--a.visible{
  opacity:1 !important;
  transform:translate3d(0,0,0) rotate(0) scale(1) !important;
  filter:blur(0) !important;
}

/* 02：下から浮上＋クリップリビール */
.num-tile--b{
  opacity:0 !important;
  transform:translate3d(0, 140px, 0) scale(.92) !important;
  filter:blur(12px) !important;
  clip-path:inset(20% 0 20% 0);
  transition-delay:.15s !important;
}
.num-tile--b.visible{
  opacity:1 !important;
  transform:translate3d(0,0,0) scale(1) !important;
  filter:blur(0) !important;
  clip-path:inset(0 0 0 0);
}

/* 03：右からスライドイン＋回転 */
.num-tile--c{
  opacity:0 !important;
  transform:translate3d(120px, 0, 0) rotate(2deg) scale(.96) !important;
  filter:blur(10px) !important;
  transition-delay:.3s !important;
}
.num-tile--c.visible{
  opacity:1 !important;
  transform:translate3d(0,0,0) rotate(0) scale(1) !important;
  filter:blur(0) !important;
}

/* SP：3 枚とも下からの穏やかな上昇に統一（横スクロール防止） */
@media(max-width:960px){
  .num-tile--a{ transform:translate3d(0, 60px, 0) rotate(0) scale(.96) !important; }
  .num-tile--b{ transform:translate3d(0, 80px, 0) scale(.94) !important; clip-path:inset(15% 0 15% 0); }
  .num-tile--c{ transform:translate3d(0, 60px, 0) rotate(0) scale(.96) !important; }
}

@media(prefers-reduced-motion: reduce){
  .num-tile--a, .num-tile--b, .num-tile--c{
    transform:none !important; opacity:1 !important; filter:none !important; clip-path:none !important;
  }
}

/* ================================================================
   今日の旬：右→左に絶え間なくスライド／クリックで停止
================================================================ */
.season-marquee{
  position:relative;
  overflow:hidden;
  width:100%;
  margin-top:56px;
  padding:8px 0;
  cursor:pointer;
  mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.season-track{
  display:flex;
  gap:24px;
  width:max-content;
  animation:seasonMarquee 30s linear infinite;
  will-change:transform;
}
.season-marquee.is-paused .season-track,
.season-marquee:hover .season-track{
  animation-play-state:paused;
}
.season-track > .season-card{
  flex:0 0 auto;
  width:clamp(260px, 26vw, 360px);
}
@keyframes seasonMarquee{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-50%); }
}
@media(max-width:768px){
  .season-track{ animation-duration:24s; gap:16px; }
  .season-track > .season-card{ width:70vw; }
}
@media(prefers-reduced-motion: reduce){
  .season-track{ animation:none; }
}

/* ================================================================
   今日の旬：マルキーが止まる時、触れているカードがふわっと浮上
================================================================ */
.season-track > .season-card{
  transition:
    transform 1.1s cubic-bezier(.22,1,.36,1),
    box-shadow 1.1s cubic-bezier(.22,1,.36,1),
    filter .8s ease;
  will-change:transform;
  transform:translateY(0);
}
.season-track > .season-card .season-card-img{
  overflow:hidden;
}
.season-track > .season-card .season-card-img img{
  transition:transform 1.6s cubic-bezier(.22,1,.36,1), filter .8s ease;
  transform:scale(1);
  filter:brightness(.94);
}

/* マルキー停止時（クリック / ホバー）にカードにマウスが乗ったカードだけがふわり */
.season-marquee:hover .season-card:hover,
.season-marquee.is-paused .season-card:hover{
  transform:translateY(-14px) scale(1.02);
  box-shadow:0 32px 60px rgba(0,0,0,.45);
  filter:brightness(1.02);
}
.season-marquee:hover .season-card:hover .season-card-img img,
.season-marquee.is-paused .season-card:hover .season-card-img img{
  transform:scale(1.08);
  filter:brightness(1.05) saturate(1.05);
}

/* is-paused 時はカーソルを「触れる」フィードバックに */
.season-marquee.is-paused{ cursor:grab; }
.season-marquee.is-paused:active{ cursor:grabbing; }

/* SP：控えめに */
@media(max-width:768px){
  .season-marquee:hover .season-card:hover,
  .season-marquee.is-paused .season-card:hover{
    transform:translateY(-8px) scale(1.015);
    box-shadow:0 20px 40px rgba(0,0,0,.35);
  }
}
@media(prefers-reduced-motion: reduce){
  .season-track > .season-card{ transition:none; }
}

/* ================================================================
   PERFORMANCE MODE — 常時稼働アニメを停止・重い効果を削減
   （2026-07-10 全体軽量化パッチ）
================================================================ */

/* 1) 常時ループしている ken-burns / drift / scan / orb をすべて停止 */
.page-hero-media,
.cta-band-media,
.hero-media-img,
.pieces-photo,
.pieces-photo img,
.num-tile-img img,
.pieces-bg,
.philosophy-photo img,
.recruit-banner-bg,
.schedule-photo img,
.ambient-orb::before,
.ambient-orb::after,
.ambient-grid::before,
.ambient-scan::after,
.hm-bg,
.big-bg,
.luxury-loader .loader__panel::after{
  animation:none !important;
}

/* 2) body::after のノイズテクスチャを撤廃（フルスクリーン合成が重い） */
body::after{ display:none !important; }

/* 3) 大量の filter を削減：色調整は最小限 */
.pieces-photo img,
.num-tile-img img,
.rs-cell img,
.person-photo img,
.season-card-img img{
  filter:brightness(.88) !important;
}
/* ホバー時だけ色を戻す */
.pieces-photo:hover img,
.num-tile:hover .num-tile-img img,
.rs-cell:hover img,
.person-card:hover .person-photo img,
.season-card:hover .season-card-img img{
  filter:brightness(1) !important;
}

/* 4) backdrop-filter を全て撤廃（合成が重い） */
*, *::before, *::after{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
/* 半透明背景は不透明寄りに補正 */
header.solid{ background:rgba(5,5,5,.85) !important; }
.luxury-loader .loader__marquee{ background:rgba(0,0,0,.5) !important; }
.btn-marquee{ background:rgba(0,0,0,.55) !important; }

/* 5) will-change の乱発を撤回（GPU レイヤ生成コストが積み上がる） */
.pieces-photo,
.pieces-photo img,
.num-tile-img img,
.hero-title .mask-target,
.hero-copy > *,
.mask-target,
.rs-cell img,
.person-photo img,
.season-card-img img,
.hero-media-img{
  will-change:auto !important;
}

/* 6) blur を伴うリビール（重い）を軽量化 */
.reveal, .reveal-photo, .reveal-left, .reveal-right, .reveal-fade{
  filter:none !important;
}
.rv-blade, .rv-slash, .rv-slash-r, .rv-shard, .rv-scan, .rv-tiles{
  filter:none !important;
}
.sc-fx-1, .sc-fx-2, .sc-fx-3{
  filter:none !important;
}
.num-tile{ filter:none !important; }
.people-grid.impact .person-card{ filter:none !important; }
.news-bar-list.impact-l .news-bar-item{ filter:none !important; }
.cl-fx-1, .cl-fx-2, .cl-fx-3, .cl-fx-4{ filter:none !important; }

/* 7) content-visibility を主要な下方セクションにも拡大 */
.section,
.recruit-scene,
.history-moment,
.pieces,
.numbers,
.story-scrollytelling,
.service-band,
.ig-band,
.cta-band,
footer{
  content-visibility:auto;
  contain-intrinsic-size:1px 800px;
}
/* pin セクションは高さ確保 */
.story-scrollytelling{ contain-intrinsic-size:100vh 100vh; }
.hero{ content-visibility:visible; }

/* 8) SP 追加軽量化：写真の drop-shadow / text-shadow を軽減 */
@media(max-width:768px){
  .hero-title, .hero-sub, .hero-eyebrow,
  .page-hero-jp, .page-hero-en, .page-hero-sub,
  .story-text-panel h2, .story-text-panel p,
  .panel-jp, .panel-desc{
    text-shadow:0 2px 8px rgba(0,0,0,.65) !important;
  }
  .num-tile-val, .num-tile-jp, .num-tile-en{
    text-shadow:none !important;
  }
  /* SP でヒーロー slide 群を止める（複数 img の合成負荷を回避） */
  .hero-media .slide-item{ animation:none !important; }
}

/* ================================================================
   THEME OVERHAUL 2026-07-11
   プラチナシルバー × 3段黒 × セリフ主体の統一デザインシステム
================================================================ */
:root{
  /* 3段階の黒 */
  --bg:        #000000;
  --bg-soft:   #0a0a0a;
  --bg-card:   #111111;

  /* テキスト */
  --text:      #e8e8e8;
  --text-mid:  #888890;
  --text-mut:  #555560;

  /* アクセント：プラチナシルバー */
  --accent:    #c0c0c8;

  /* 罫線 */
  --line:      rgba(255,255,255,.06);
  --line-soft: rgba(255,255,255,.04);
  --white:     #ffffff;

  /* 旧トークン互換 */
  --ink:       var(--text);
  --paper:     var(--text);
  --gold:      var(--accent);
  --line-ink:  var(--line);
  --shadow:    0 24px 60px rgba(0,0,0,.6);

  /* フォント：セリフ主体 */
  --font-en:   'Cormorant Garamond', 'EB Garamond', 'Times New Roman', serif;
  --font-jp:   'Noto Serif JP', 'Shippori Mincho', 'Yu Mincho', '游明朝', serif;
  --font-body: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', sans-serif;
  --font-h:    var(--font-jp);
}

html, body{
  background:var(--bg) !important;
  color:var(--text) !important;
  font-family:var(--font-body) !important;
  font-weight:300;
  letter-spacing:.03em;
  line-height:1.9;
}

/* 背景トーン再割当 */
.bg-ink, .bg-paper, .bg-paper-2{ background:var(--bg) !important; }
.bg-deep{ background:var(--bg-soft) !important; }
.bg-card, .num-tile, .job-card, .season-card, .contact-card{
  background:var(--bg-card) !important;
}

/* コンテナ最大幅 1100px */
.container{
  width:min(100% - 96px, 1100px) !important;
  margin:0 auto !important;
}

/* セクション余白：140/48 → 100/32 → 80/20 */
.section, .section-lg, .cta-band, .service-band, .recruit-scene,
.ig-band, .news-bar, .numbers, .pieces{
  padding:140px 48px !important;
}
@media(max-width:960px){
  .section, .section-lg, .cta-band, .service-band, .recruit-scene,
  .ig-band, .news-bar, .numbers, .pieces{
    padding:100px 32px !important;
  }
}
@media(max-width:768px){
  .section, .section-lg, .cta-band, .service-band, .recruit-scene,
  .ig-band, .news-bar, .numbers, .pieces{
    padding:80px 20px !important;
  }
}

/* ヘッダー：固定 + blur */
header#header{
  position:fixed !important;
  top:0; left:0; right:0;
  z-index:100;
  height:64px;
  padding:0 !important;
  background:rgba(0,0,0,.8) !important;
  backdrop-filter:blur(20px) !important;
  -webkit-backdrop-filter:blur(20px) !important;
  border-bottom:1px solid var(--line);
}
header#header nav{
  height:64px;
  align-items:center;
  padding:0 32px;
}
@media(max-width:768px){
  header#header, header#header nav{ height:56px; }
  header#header nav{ padding:0 20px; }
}

/* 見出し体系：ラベル → 線 → タイトル */
.section-label{
  font-family:var(--font-en) !important;
  font-size:11px !important;
  letter-spacing:.3em !important;
  color:var(--accent) !important;
  text-transform:uppercase;
  font-weight:400;
  margin-bottom:0 !important;
  display:inline-flex; align-items:center; gap:14px;
}
.section-label::before,
.section-label::after{ display:none !important; }
.section-heading,
.section-heading.center{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  text-align:center;
  gap:14px !important;
  margin-bottom:64px !important;
}
/* section-line（幅32px 高さ1px プラチナ） */
.section-heading::after,
.section-heading.center::after{
  content:'';
  display:block;
  width:32px; height:1px;
  background:var(--accent);
  order:2;
}
.section-heading .section-label{ order:1; }
.section-heading .section-title,
.section-heading > h1,
.section-heading > h2{
  order:3;
  font-family:var(--font-jp) !important;
  font-weight:400 !important;
  font-size:clamp(1.8rem, 4vw, 3rem) !important;
  letter-spacing:.08em !important;
  line-height:1.5 !important;
  color:var(--text) !important;
  margin:0 !important;
}
.section-heading .section-desc{
  order:4;
  margin:16px auto 0 !important;
  color:var(--text-mid);
  font-family:var(--font-body) !important;
  font-weight:300;
  font-size:14px;
  line-height:2;
  letter-spacing:.06em;
}

/* 英字大見出し */
.section-title, .hero-title, .page-hero-jp,
.pieces-jp, .hm-title, .numbers-title,
.panel-jp, .story-band-title, .story-text-panel h2,
.recruit-band h3, .philosophy-motto-jp, .wanted-jp{
  font-family:var(--font-jp) !important;
  font-weight:400 !important;
  color:var(--text) !important;
  letter-spacing:.08em !important;
}
/* Cormorant Garamond で英字は 300/400 */
.section-label, .hero-eyebrow, .page-hero-en, .panel-en,
.svc-en, .prod-en, .duo-en, .cal-en, .season-card-tag,
.person-en, .story-card-en, .client-card-en, .num-tile-en,
.foot-col-title, .breadcrumb, .brand-en, .news-bar-more,
.loader__label, .loader__sub, .loader__corner,
.job-en, .wanted-en, .philosophy-motto-en, .to-top,
.num-tile-val, .stance-num, .schedule-row .time,
.hero-eyebrow span{
  font-family:var(--font-en) !important;
  font-weight:400 !important;
  letter-spacing:.3em !important;
  color:var(--accent) !important;
}

/* 本文 */
.section-desc, .hero-sub, .page-hero-sub, .pieces-sub,
.hm-desc, .duo-desc, .panel-desc, .story-band-desc,
.story-text-panel p, .season-card-desc, .person-role,
.num-tile-jp, .story-card-desc, .job-desc, .stance-desc,
.wanted-desc, .philosophy-motto-desc, .message-body p,
.contact-note, .prod-desc, .foot-info{
  font-family:var(--font-body) !important;
  font-weight:400 !important;
  color:var(--text) !important;
  line-height:2 !important;
  letter-spacing:.04em !important;
  font-size:14px;
}

/* カード：3列 gap:20px（.people-grid / .client-grid など） */
.people-grid, .client-grid, .job-grid, .stance-grid,
.svc-grid, .prod-grid, .cal-grid, .foot-grid{
  gap:20px !important;
}

/* ボーダー・グロー */
.card, .num-tile, .job-card, .stance-item, .contact-card,
.person-card, .season-card, .client-card{
  border:1px solid var(--line) !important;
  transition:border-color .4s ease, transform .5s cubic-bezier(.22,1,.36,1);
}

/* トップページ OUR TEAM：高級感のある内側余白
   （写真は edge-to-edge・テキスト周りにゆったり呼吸／上下＞左右で視線を中央へ） */
body:not(.inner-page) .people-grid .person-card{
  padding:0 clamp(28px, 4vw, 44px) clamp(36px, 5vw, 52px);
}
body:not(.inner-page) .people-grid .person-card .person-photo{
  margin-left:calc(-1 * clamp(28px, 4vw, 44px));
  margin-right:calc(-1 * clamp(28px, 4vw, 44px));
  margin-bottom:clamp(28px, 3.5vw, 40px);
}

/* ホバー：translateY(-4px) + border 変化 + 画像 scale(1.03) */
.person-card:hover, .season-card:hover, .num-tile:hover,
.job-card:hover, .client-card:hover, .contact-card:hover,
.stance-item:hover{
  transform:translateY(-4px);
  border-color:rgba(255,255,255,.16) !important;
}
.person-card:hover img,
.season-card:hover img,
.num-tile:hover .num-tile-img img,
.client-card:hover .client-card-media img,
.rs-cell:hover img{
  transform:scale(1.03) !important;
  transition:transform .6s ease !important;
}

/* スクロールリビール：opacity:0→1 + translateY(20px→0) + 0.8s ease */
.reveal, .reveal-photo, .reveal-left, .reveal-right, .reveal-fade{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .8s ease, transform .8s ease;
  filter:none !important;
}
.reveal.visible, .reveal-photo.visible,
.reveal-left.visible, .reveal-right.visible, .reveal-fade.visible{
  opacity:1;
  transform:translateY(0);
}
/* .rv1〜.rv4 で 0.1s 刻みのカスケード */
.rv1{ transition-delay:0s !important; }
.rv2{ transition-delay:.1s !important; }
.rv3{ transition-delay:.2s !important; }
.rv4{ transition-delay:.3s !important; }
.reveal-delay-1{ transition-delay:.1s !important; }
.reveal-delay-2{ transition-delay:.2s !important; }
.reveal-delay-3{ transition-delay:.3s !important; }
.reveal-delay-4{ transition-delay:.4s !important; }

/* テキストシマー（見出しに適用可能） */
@keyframes textShimmer{
  0%,100%{ background-position:0% 50%; }
  50%    { background-position:100% 50%; }
}
.shimmer{
  background:linear-gradient(90deg,
    var(--text) 0%, var(--accent) 50%, var(--text) 100%);
  background-size:200% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:textShimmer 4s ease-in-out infinite;
}

/* ヒーロー：タイトル 3 行のスライドインは既存タイムラインを継承 */
.hero{ background:var(--bg) !important; padding-top:64px !important; }
.hero-title{
  font-family:var(--font-jp) !important;
  font-weight:400 !important;
  color:var(--text) !important;
  letter-spacing:.08em !important;
}
.hero-title .mask-target,
.hero-title .line{ font-weight:400 !important; }
.hero-sub{ color:var(--text-mid) !important; font-weight:300 !important; }

/* ボタン：プラチナ 1px 罫線 */
.btn, .btn-marquee, .prod-link, .scrolly-cta{
  border:1px solid var(--accent) !important;
  color:var(--accent) !important;
  background:transparent !important;
  padding:16px 28px;
  font-family:var(--font-en) !important;
  font-weight:400 !important;
  letter-spacing:.24em !important;
  font-size:11px;
  transition:background .3s, color .3s, border-color .3s;
  text-decoration:none;
}
.btn:hover, .btn-marquee:hover{
  background:var(--accent) !important;
  color:var(--bg) !important;
  border-color:var(--accent) !important;
}
.btn.solid{ background:var(--accent) !important; color:var(--bg) !important; }
.btn.solid:hover{ background:transparent !important; color:var(--accent) !important; }

/* CTA帯 */
.cta-band{ background:var(--bg) !important; text-align:center; }
.cta-band h3{
  font-family:var(--font-jp) !important;
  color:var(--text) !important;
  letter-spacing:.1em !important;
  font-weight:400 !important;
  font-size:clamp(1.5rem, 3vw, 2.4rem) !important;
}
.cta-band p{ color:var(--text-mid) !important; }

/* ヘッダー内テキスト */
.nav-links a, .brand-jp{
  color:var(--text) !important;
  font-family:var(--font-body) !important;
  font-weight:300;
  letter-spacing:.16em;
  font-size:13px;
}
.nav-links a:hover{ color:var(--accent) !important; }

/* フッター */
footer{ background:var(--bg) !important; border-top:1px solid var(--line); }
.foot-info, .foot-links a{ color:var(--text-mid) !important; }
.foot-links a:hover{ color:var(--accent) !important; }

/* リセット：hardcoded な影と装飾を薄く */
.hero-title, .page-hero-jp, .section-title{
  text-shadow:none !important;
}
.hero-title{
  text-shadow:0 4px 40px rgba(0,0,0,.6) !important;
}

/* ================================================================
   NUMBERS：数字の字間を引き締める（Noto Sans JP 使用）
================================================================ */
.num-tile-val,
.num-value,
.stance-num,
.schedule-row .time,
.js-load-count,
.tl-year,
.tl-year.now{
  font-family:'Noto Sans JP','Hiragino Sans','Yu Gothic',sans-serif !important;
  font-weight:600 !important;
  letter-spacing:-0.05em !important;
  font-variant-numeric:normal !important;
  font-feature-settings:normal !important;
  text-transform:none !important;
}

/* 子 span で 1 文字ずつ囲まれている場合の横幅解除 */
.num-tile-val > span,
.num-tile-val .char,
.num-value > span,
.stance-num > span{
  width:auto !important;
  flex:0 0 auto !important;
  letter-spacing:inherit !important;
  display:inline !important;
}

/* 数字ブロックの gap を控えめに */
.num-tile-fig{ gap:14px !important; }
.num-tile-fig .num-tile-val{
  display:inline-block !important;
  min-width:0 !important;
}

/* SP でもバランス良い引き締め */
@media(max-width:768px){
  .num-tile-val,
  .num-value,
  .stance-num,
  .schedule-row .time{ letter-spacing:-0.04em !important; }
}

/* 単位（年以上・種類以上・都道府県）は Noto Sans JP でクリーンに */
.num-tile-unit{
  font-family:'Noto Sans JP','Hiragino Sans',sans-serif !important;
  font-weight:400 !important;
  letter-spacing:.06em !important;
}

/* ================================================================
   NUMBERS：Noto Serif JP に統一 & 文字被り解消
================================================================ */
.num-tile-val,
.num-value,
.stance-num,
.schedule-row .time,
.js-load-count,
.tl-year,
.tl-year.now{
  font-family:'Noto Serif JP','Shippori Mincho','Yu Mincho',serif !important;
  font-weight:500 !important;
  letter-spacing:-0.04em !important;
  font-variant-numeric:normal !important;
  font-feature-settings:normal !important;
}
.num-tile-unit{
  font-family:'Noto Serif JP',serif !important;
  font-weight:400 !important;
  letter-spacing:.06em !important;
}

/* num-tile 内のレイアウトを z 順に整理して被りゼロに */
.num-tile{
  position:relative;
  overflow:hidden;
  min-height:520px;
  padding:0 !important;
}
.num-tile-img{
  position:absolute; inset:0;
  z-index:0;
}
.num-tile-mask{
  position:absolute; inset:0;
  z-index:1;
  background:linear-gradient(180deg,
    rgba(0,0,0,.35) 0%,
    rgba(0,0,0,.55) 60%,
    rgba(0,0,0,.85) 100%);
  pointer-events:none;
}
.num-tile-body{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  height:100%;
  padding:32px !important;
  gap:20px !important;
}
/* 数字＋単位が同一行になるように */
.num-tile-fig{
  display:flex;
  align-items:baseline;
  gap:14px !important;
  margin:auto 0 0 !important;
  flex-wrap:nowrap;
}
.num-tile-val{
  display:inline-block;
  line-height:.9;
  font-size:clamp(72px, 9vw, 128px);
}
.num-tile-unit{
  display:inline-block;
  font-size:13px;
  line-height:1.4;
  white-space:nowrap;
  max-width:96px;
  color:var(--text) !important;
}

/* グラフィック（dots/map/timeline）は数字より下に配置＋高さ制限 */
.num-tile-graphic{
  order:3;
  margin:12px 0 0 !important;
  min-height:auto !important;
  max-height:120px;
  overflow:hidden;
}
.num-tile-jp{
  order:4;
  margin:auto 0 0 !important;
  padding-top:16px !important;
  border-top:1px solid rgba(255,255,255,.14);
}

/* 100 ドットは絶対にはみ出さない */
.num-dots{
  transform:scale(.55) !important;
  transform-origin:left top !important;
  width:100% !important;
  max-width:200px;
}
.num-map{ max-width:80px !important; height:auto; }

@media(max-width:768px){
  .num-tile{ min-height:auto; aspect-ratio:5/4; }
  .num-tile-body{ padding:24px !important; }
  .num-tile-val{ font-size:clamp(60px, 14vw, 92px); }
  .num-tile-unit{ font-size:12px; }
}

/* ================================================================
   PIECES：バラバラ状態 → スクロールで下 2 列に整列するアニメ
================================================================ */
.pieces{ position:relative; min-height:180vh; overflow:hidden; }
.pieces-bg{
  position:sticky;
  top:0;
  height:100vh;
  width:100%;
  overflow:hidden;
}
.pieces-photo{
  position:absolute;
  overflow:hidden;
  transition:
    top 1.4s cubic-bezier(.7,0,.3,1),
    left 1.4s cubic-bezier(.7,0,.3,1),
    width 1.4s cubic-bezier(.7,0,.3,1),
    height 1.4s cubic-bezier(.7,0,.3,1),
    aspect-ratio 1.4s cubic-bezier(.7,0,.3,1),
    transform 1.4s cubic-bezier(.7,0,.3,1),
    filter 1s ease;
  will-change:top, left, width;
}
.pieces-photo img{
  width:100%; height:100%;
  object-fit:cover;
  filter:brightness(.85);
  transition:filter 1s ease, transform 1s ease;
}

/* スクロール前：バラバラ */
.pieces-photo.p1{ top:2%;  left:1%;   width:26vw; aspect-ratio:4/5; transform:rotate(-3deg); }
.pieces-photo.p2{ top:5%;  right:2%;  left:auto; width:22vw; aspect-ratio:5/4; transform:rotate(2deg); }
.pieces-photo.p3{ top:36%; left:2%;   width:18vw; aspect-ratio:3/4; transform:rotate(4deg); }
.pieces-photo.p4{ top:32%; right:1%;  left:auto; width:20vw; aspect-ratio:4/5; transform:rotate(-2deg); }
.pieces-photo.p5{ top:64%; left:3%;   width:22vw; aspect-ratio:4/3; transform:rotate(3deg); }
.pieces-photo.p6{ top:60%; right:3%;  left:auto; width:24vw; aspect-ratio:3/4; transform:rotate(-4deg); }
.pieces-photo.p7{ top:82%; left:36%;  width:16vw; aspect-ratio:5/4; transform:rotate(2deg); }
.pieces-photo.p8{ top:12%; left:42%;  width:14vw; aspect-ratio:3/4; transform:rotate(-3deg); }

/* スクロール後：2 列 × 4 段のクリーンなグリッド */
.pieces-bg.is-aligned .pieces-photo{
  aspect-ratio:4/5 !important;
  right:auto !important;
  transform:rotate(0) !important;
  border:1px solid var(--line);
}
.pieces-bg.is-aligned .pieces-photo img{
  filter:brightness(.95);
}
.pieces-bg.is-aligned .pieces-photo.p1{ top:2%;  left:20%;  width:28vw; }
.pieces-bg.is-aligned .pieces-photo.p2{ top:2%;  left:52%;  width:28vw; }
.pieces-bg.is-aligned .pieces-photo.p3{ top:26%; left:20%;  width:28vw; }
.pieces-bg.is-aligned .pieces-photo.p4{ top:26%; left:52%;  width:28vw; }
.pieces-bg.is-aligned .pieces-photo.p5{ top:50%; left:20%;  width:28vw; }
.pieces-bg.is-aligned .pieces-photo.p6{ top:50%; left:52%;  width:28vw; }
.pieces-bg.is-aligned .pieces-photo.p7{ top:74%; left:20%;  width:28vw; }
.pieces-bg.is-aligned .pieces-photo.p8{ top:74%; left:52%;  width:28vw; }

/* pieces-inner はスクロール後は薄く */
.pieces-inner{
  position:relative;
  z-index:3;
  transition:opacity .8s ease;
}
.pieces-bg.is-aligned ~ .pieces-inner,
.pieces.is-aligned .pieces-inner{ opacity:.35; }

/* SP：2列 × 4段の縦長ミニ */
@media(max-width:768px){
  .pieces-bg.is-aligned .pieces-photo.p1{ top:2%;  left:3%;   width:44vw; }
  .pieces-bg.is-aligned .pieces-photo.p2{ top:2%;  left:53%;  width:44vw; }
  .pieces-bg.is-aligned .pieces-photo.p3{ top:26%; left:3%;   width:44vw; }
  .pieces-bg.is-aligned .pieces-photo.p4{ top:26%; left:53%;  width:44vw; }
  .pieces-bg.is-aligned .pieces-photo.p5{ top:50%; left:3%;   width:44vw; }
  .pieces-bg.is-aligned .pieces-photo.p6{ top:50%; left:53%;  width:44vw; }
  .pieces-bg.is-aligned .pieces-photo.p7{ top:74%; left:3%;   width:44vw; }
  .pieces-bg.is-aligned .pieces-photo.p8{ top:74%; left:53%;  width:44vw; }
}

/* ================================================================
   HISTORY MOMENT：確実に表示させる復活
================================================================ */
.history-moment{
  display:block !important;
  visibility:visible !important;
  min-height:80vh;
  content-visibility:auto;
  contain-intrinsic-size:100vh 100vh;
}
.history-moment .hm-container{
  display:grid !important;
  visibility:visible !important;
  opacity:1 !important;
}
.history-moment .hm-num,
.history-moment .hm-photo,
.history-moment .hm-main{
  display:block !important;
  visibility:visible !important;
}
}

/* ================================================================
   ローディング画面の中央線を撤去
================================================================ */
.luxury-loader .loader__center-line{ display:none !important; }
.luxury-loader .loader__bar{ display:none !important; }

/* ================================================================
   PIECES：グリッド整列を撤回してバラバラ + 常時ふわふわ動く挙動に戻す
================================================================ */
.pieces{
  position:relative !important;
  min-height:100vh !important;
  overflow:hidden;
}
.pieces-bg{
  position:absolute !important;
  inset:0 !important;
  top:auto !important;
  bottom:auto !important;
  height:100% !important;
  width:100% !important;
  overflow:visible;
}
.pieces-bg.is-aligned{
  /* 整列モードは無効化 */
}
.pieces-bg.is-aligned .pieces-photo{
  aspect-ratio:auto !important;
  transform:inherit !important;
  border:0 !important;
}
/* is-aligned のグリッド位置を全て打ち消し（元の散らばりを維持） */
.pieces-bg.is-aligned .pieces-photo.p1,
.pieces-bg.is-aligned .pieces-photo.p2,
.pieces-bg.is-aligned .pieces-photo.p3,
.pieces-bg.is-aligned .pieces-photo.p4,
.pieces-bg.is-aligned .pieces-photo.p5,
.pieces-bg.is-aligned .pieces-photo.p6,
.pieces-bg.is-aligned .pieces-photo.p7,
.pieces-bg.is-aligned .pieces-photo.p8{
  top:auto; left:auto; width:auto;
}
.pieces-bg.is-aligned ~ .pieces-inner,
.pieces.is-aligned .pieces-inner{ opacity:1 !important; }

/* 各写真がゆらゆら動く（別々のタイミング・別々の振れ幅） */
.pieces-photo{
  animation:piecesFloat 12s ease-in-out infinite alternate;
  will-change:transform;
}
.pieces-photo.p1{ animation:piecesFloat1 14s ease-in-out infinite alternate; }
.pieces-photo.p2{ animation:piecesFloat2 16s ease-in-out infinite alternate; }
.pieces-photo.p3{ animation:piecesFloat3 13s ease-in-out infinite alternate; }
.pieces-photo.p4{ animation:piecesFloat4 15s ease-in-out infinite alternate; }
.pieces-photo.p5{ animation:piecesFloat5 17s ease-in-out infinite alternate; }
.pieces-photo.p6{ animation:piecesFloat6 12s ease-in-out infinite alternate; }
.pieces-photo.p7{ animation:piecesFloat7 18s ease-in-out infinite alternate; }
.pieces-photo.p8{ animation:piecesFloat8 14s ease-in-out infinite alternate; }

@keyframes piecesFloat1{
  0%   { transform:rotate(-3deg) translate(0,0); }
  100% { transform:rotate(-1deg) translate(12px,-14px); }
}
@keyframes piecesFloat2{
  0%   { transform:rotate(2deg) translate(0,0); }
  100% { transform:rotate(0deg) translate(-14px,10px); }
}
@keyframes piecesFloat3{
  0%   { transform:rotate(4deg) translate(0,0); }
  100% { transform:rotate(2deg) translate(10px,12px); }
}
@keyframes piecesFloat4{
  0%   { transform:rotate(-2deg) translate(0,0); }
  100% { transform:rotate(0deg) translate(-12px,-10px); }
}
@keyframes piecesFloat5{
  0%   { transform:rotate(3deg) translate(0,0); }
  100% { transform:rotate(1deg) translate(14px,8px); }
}
@keyframes piecesFloat6{
  0%   { transform:rotate(-4deg) translate(0,0); }
  100% { transform:rotate(-2deg) translate(-10px,-12px); }
}
@keyframes piecesFloat7{
  0%   { transform:rotate(2deg) translate(0,0); }
  100% { transform:rotate(0deg) translate(8px,-14px); }
}
@keyframes piecesFloat8{
  0%   { transform:rotate(-3deg) translate(0,0); }
  100% { transform:rotate(-1deg) translate(-12px,12px); }
}

/* 中央のテキスト部分はそのまま（コピーの上に写真が乗る問題を避けるため sticky なし） */
.pieces-inner{
  position:relative;
  z-index:3;
  padding:clamp(60px, 10vw, 140px) 24px;
  text-align:center;
}

@media(prefers-reduced-motion: reduce){
  .pieces-photo{ animation:none !important; }
}

/* ================================================================
   MARKET GRID：バラバラ → 2列に整列するマグネットグリッド
================================================================ */
/* 旧 pieces 系のスタイルを完全撤去 */
.pieces, .pieces-bg, .pieces-photo, .pieces-inner,
.pieces-jp, .pieces-en, .pieces-sub, .pieces-index, .scanline{
  display:none !important;
}

.market-grid-section{
  width:100%;
  padding:100px 4%;
  background:#020407;
  position:relative;
}
.market-grid-head{
  max-width:1100px;
  margin:0 auto 64px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}
.market-grid-en{
  font-family:'Cormorant Garamond', serif;
  font-size:11px;
  letter-spacing:.3em;
  color:var(--accent);
  text-transform:uppercase;
  margin:0;
}
.market-grid-line{
  width:32px; height:1px;
  background:var(--accent);
}
.market-grid-jp{
  font-family:'Noto Serif JP', serif;
  font-size:clamp(1.6rem, 3.6vw, 2.8rem);
  font-weight:400;
  letter-spacing:.08em;
  line-height:1.6;
  color:var(--text);
  margin:0;
}
.market-grid-jp .accent{ color:var(--accent); }
.market-grid-sub{
  font-family:'Noto Sans JP', sans-serif;
  font-size:13px;
  color:var(--text-mid);
  letter-spacing:.06em;
  line-height:2;
  margin:12px auto 0;
  max-width:520px;
  word-break:keep-all;
  overflow-wrap:break-word;
}
.market-grid-container{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:32px;
  max-width:1100px;
  margin:0 auto;
}
.market-img-item{
  width:100%;
  height:350px;
  overflow:hidden;
  position:relative;
  border:1px solid var(--line);
  will-change:transform, opacity;
}
.market-img-item img{
  width:100%; height:100%;
  object-fit:cover;
  filter:brightness(.92);
  transition:transform 1s ease, filter .6s ease;
}
.market-img-item:hover img{
  transform:scale(1.05);
  filter:brightness(1);
}

@media(max-width:768px){
  .market-grid-section{ padding:80px 20px; }
  .market-grid-container{
    grid-template-columns:1fr;
    gap:20px;
  }
  .market-img-item{ height:260px; }
  .market-grid-head{ margin-bottom:48px; }
}

/* ── Hero CTA Buttons ── */
.hero-actions{display:flex;gap:20px;flex-wrap:wrap}
.hero-cta{
  position:relative;display:inline-flex;align-items:center;gap:12px;
  font-family:var(--font-en);font-size:12px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;
  color:var(--text);padding:18px 36px;border:1px solid rgba(255,255,255,.25);
  overflow:hidden;transition:all .5s cubic-bezier(.4,0,.2,1);
}
.hero-cta-text{position:relative;z-index:2;transition:transform .4s cubic-bezier(.4,0,.2,1)}
.hero-cta-arrow{position:relative;z-index:2;transition:transform .4s cubic-bezier(.4,0,.2,1),opacity .3s;opacity:.5;font-size:14px}
.hero-cta-line{position:absolute;bottom:0;left:0;width:100%;height:2px;background:var(--text);transform:scaleX(0);transform-origin:right;transition:transform .5s cubic-bezier(.4,0,.2,1)}
.hero-cta:hover{border-color:rgba(255,255,255,.6)}
.hero-cta:hover .hero-cta-text{transform:translateX(-4px)}
.hero-cta:hover .hero-cta-arrow{transform:translateX(6px);opacity:1}
.hero-cta:hover .hero-cta-line{transform:scaleX(1);transform-origin:left}
.hero-cta--fill{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3)}
.hero-cta--fill:hover{background:rgba(255,255,255,.15)}
@media(max-width:480px){
  .hero-actions{flex-direction:column;gap:12px}
  .hero-cta{padding:14px 28px;font-size:11px}
}

/* ══════════════════════════════════════
   レスポンシブ徹底修正
   ══════════════════════════════════════ */

/* ── タブレット（1024px以下） ── */
@media(max-width:1024px){
  .biz-collage-photo { position:relative !important; margin:0 !important; top:auto !important; left:auto !important; right:auto !important; bottom:auto !important; width:100% !important; }
}

/* ── タブレット小（768px以下） ── */
@media(max-width:768px){
  /* コンテナ */
  .container { width:calc(100% - 48px); }

  /* ナビ */
  .nav-links { padding:60px 24px; }

  /* セクション余白 */
  .section { padding-block:clamp(64px, 10vw, 120px); }
  .section-lg { padding-block:clamp(80px, 12vw, 160px); }

  /* フッター */
  .foot-grid { grid-template-columns:1fr; gap:36px; text-align:center; }
  .foot-links { justify-content:center; }
  .foot-bottom { flex-direction:column; gap:12px; text-align:center; }

  /* テーブル */
  .tbl { display:block; }
  .tbl tr { display:flex; flex-direction:column; padding:16px 0; }
  .tbl th, .tbl td { padding:4px 0; display:block; width:100%; }

  /* 見出し */
  .section-title { font-size:clamp(22px, 5vw, 36px); }
  .page-hero-jp { font-size:clamp(28px, 6vw, 48px); }
  .page-hero-sub { font-size:13px; max-width:100%; }

  /* 2カラム→1カラム */
  .duo-grid { grid-template-columns:1fr !important; gap:32px; }
  .hm-container { grid-template-columns:1fr; gap:32px; }
}

/* ── スマホ（600px以下） ── */
@media(max-width:600px){
  .contact-grid { grid-template-columns:1fr; }
  .contact-card { padding:28px 20px; }
  .season-grid { grid-template-columns:1fr; gap:12px; }
  .people-grid { grid-template-columns:1fr; gap:24px; }
  .num-tile { grid-template-columns:1fr; }

  /* ニュースバー */
  .news-bar-item { padding:14px 16px; }

  /* カード */
  .prod-grid { grid-template-columns:1fr; gap:16px; }
  .cal-grid { grid-template-columns:1fr 1fr; gap:12px; }

  /* ストーリーバンド */
  .story-band-grid { grid-template-columns:1fr; gap:24px; }
}

/* ── スマホ小（480px以下） ── */
@media(max-width:480px){
  /* コンテナをさらに広く */
  .container { width:calc(100% - 32px); }

  /* ヒーロー */
  .hero-inner { padding:60px 16px 40px !important; gap:32px !important; }
  .hero-title { font-size:clamp(28px, 7vw, 42px) !important; }

  /* セクション */
  .section { padding-block:clamp(48px, 8vw, 80px); }
  .section-lg { padding-block:clamp(56px, 10vw, 100px); }

  /* セクションラベル */
  .section-label { font-size:10px; margin-bottom:20px; }

  /* 見出し */
  .section-title { font-size:clamp(20px, 5vw, 28px); }
  .page-hero-jp { font-size:clamp(24px, 6.5vw, 36px); }
  .page-hero-sub { font-size:12px; line-height:1.8; }

  /* カレンダー */
  .cal-grid { grid-template-columns:1fr; }

  /* ボタン */
  .btn-marquee { font-size:12px; padding:12px 20px; }

  /* 引用 */
  .hm-quote { font-size:14px; }

  /* フッター */
  .foot-info { font-size:12px; }
  .foot-links a { font-size:12px; }
  .foot-copy { font-size:10px; }

  /* テキストはみ出し防止 */
  .hm-title { font-size:clamp(20px, 5vw, 32px); }
  .hm-desc { font-size:13px; }

  /* history-moment */
  .history-moment { padding:clamp(48px, 8vw, 80px) 0; }
  .hm-vlabel { display:none; }
  .hm-bg { font-size:clamp(60px, 16vw, 160px); }
}

/* ── 超小型スマホ（375px以下） ── */
@media(max-width:375px){
  .container { width:calc(100% - 24px); }
  .hero-inner { padding:48px 12px 32px !important; }
  .hero-title { font-size:24px !important; }
  .nav-links { padding:48px 16px; }
  .section { padding-block:40px; }
  .page-hero-jp { font-size:22px; }
  .foot-grid { gap:28px; }
}

/* ══════════════════════════════════════════════
   PC版 下層ページ統一修正（1024px以上のみ）
   ※ SP版には一切影響しません
   ══════════════════════════════════════════════ */
@media(min-width:1025px){

  /* ── 1. 共通コンテナ統一 ── */
  .container { width:min(100% - 96px, 1280px); }
  nav { width:min(100% - 96px, 1280px); }

  /* ── 2. page-hero 余白統一 ── */
  .page-hero { padding:180px 0 100px; }

  /* ── 3. テキスト読みやすさ（max-width制限） ── */
  .page-hero-sub { max-width:520px; font-size:15px; line-height:1.9; }
  .section-desc { max-width:560px; }
  .faq-a p { max-width:640px; }

  /* ── 4. 2カラムグリッド比率統一（5:7→ 1:1.2） ── */
  .ceo-grid,
  .message-block { grid-template-columns:1fr 1.2fr; gap:clamp(40px, 5vw, 80px); align-items:center; }

  /* ── 5. 画像の制御 ── */
  /* アスペクト比 + object-fit 統一 */
  .pieces-photo img,
  .biz-collage-photo img,
  .prod-img img,
  .rs-cell img,
  .message-photo img,
  .photo-frame img,
  .ag-cell img { object-fit:cover; width:100%; height:100%; }

  /* 画像の最大サイズ制限 */
  .ceo-grid .photo-frame,
  .message-block .message-photo { max-width:480px; aspect-ratio:3/4; overflow:hidden; }

  .biz-collage-photo { max-width:400px; aspect-ratio:4/3; overflow:hidden; }
  .biz-collage-photo img { object-fit:cover; width:100%; height:100%; }

  /* prod-img サイズ制限 */
  .prod-img { max-height:320px; }

  /* ── 6. セクション内マージン統一 ── */
  .philosophy-grid,
  .job-grid,
  .stance-grid { margin-top:64px; }

  .cal-grid { margin-top:64px; }

  /* ── 7. ニュースページ統一 ── */
  .news-list-wrap { max-width:960px; margin:0 auto; }
  .news-row .t { max-width:560px; }

  /* ── 8. リクルートページ統一 ── */
  .schedule { max-width:760px; }
  .stl-row { align-items:center; }
  .message-body p { max-width:520px; }

  /* ── 9. Company/Contact テーブル ── */
  .tbl { max-width:900px; margin:0 auto; }
  .tbl th { width:180px; min-width:180px; }

  /* ── 10. split レイアウト統一 ── */
  .split { align-items:center; }

  /* ── 11. フッター統一 ── */
  .foot-grid { grid-template-columns:1.4fr 1fr 1fr 1fr; gap:48px; }
}

/* ══════════════════════════════════════════════
   Scroll-Driven Animations — Apple/Stripe Grade
   既存 .visible トリガーと完全互換
   ══════════════════════════════════════════════ */

/* ── テキスト: Fade-in-up（静寂な浮上）── */
.sd-text{
  opacity:0;
  transform:translateY(18px);
  transition:
    opacity .7s cubic-bezier(.16,1,.3,1),
    transform .7s cubic-bezier(.16,1,.3,1);
  will-change:opacity,transform;
}
.sd-text.visible{opacity:1;transform:translateY(0)}

/* スタッガー遅延（見出し→リード→本文の順序感） */
.sd-d1{transition-delay:.1s}
.sd-d2{transition-delay:.2s}
.sd-d3{transition-delay:.3s}
.sd-d4{transition-delay:.4s}
.sd-d5{transition-delay:.5s}

/* ── 画像/カード: Soft Zoom-Fade（瑞々しい出現）── */
.sd-img{
  opacity:0;
  transform:translateY(15px) scale(.96);
  transition:
    opacity .9s cubic-bezier(.16,1,.3,1),
    transform .9s cubic-bezier(.16,1,.3,1);
  will-change:opacity,transform;
}
.sd-img.visible{opacity:1;transform:translateY(0) scale(1)}

/* ── ライン: 横線がスッと伸びる ── */
.sd-line{
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .8s cubic-bezier(.16,1,.3,1);
  will-change:transform;
}
.sd-line.visible{transform:scaleX(1)}

/* ── マスクリビール: 下からテキストが現れる ── */
.sd-mask{
  overflow:hidden;
}
.sd-mask > *{
  transform:translateY(105%);
  transition:transform .8s cubic-bezier(.16,1,.3,1);
  will-change:transform;
}
.sd-mask.visible > *{transform:translateY(0)}

/* ── ブラーフェード: ぼかしから鮮明に ── */
.sd-blur{
  opacity:0;
  filter:blur(6px);
  transform:translateY(12px);
  transition:
    opacity .8s cubic-bezier(.16,1,.3,1),
    filter .8s cubic-bezier(.16,1,.3,1),
    transform .8s cubic-bezier(.16,1,.3,1);
  will-change:opacity,filter,transform;
}
.sd-blur.visible{opacity:1;filter:blur(0);transform:translateY(0)}

/* ── 左からスライド ── */
.sd-left{
  opacity:0;
  transform:translateX(-24px);
  transition:
    opacity .7s cubic-bezier(.16,1,.3,1),
    transform .7s cubic-bezier(.16,1,.3,1);
  will-change:opacity,transform;
}
.sd-left.visible{opacity:1;transform:translateX(0)}

/* ── 右からスライド ── */
.sd-right{
  opacity:0;
  transform:translateX(24px);
  transition:
    opacity .7s cubic-bezier(.16,1,.3,1),
    transform .7s cubic-bezier(.16,1,.3,1);
  will-change:opacity,transform;
}
.sd-right.visible{opacity:1;transform:translateX(0)}

/* ── prefers-reduced-motion 対応 ── */
@media(prefers-reduced-motion:reduce){
  .sd-text,.sd-img,.sd-blur,.sd-left,.sd-right,.sd-line,.sd-mask>*{
    opacity:1!important;filter:none!important;
    transform:none!important;transition:none!important;
  }
}

/* ══════════════════════════════════════════════
   画像・テキスト・レスポンシブ 完全修復
   ══════════════════════════════════════════════ */

/* ── 1. 画像の完全コンテナ収容 ── */
.prod-img,
.biz-collage-photo,
.pieces-photo,
.person-photo,
.season-card-img,
.ig-cell,
.ag-cell,
.rs-cell,
.photo-frame,
.message-photo,
.split-img,
.hm-photo,
.stl-img{
  overflow:hidden;
  position:relative;
}
.prod-img img,
.biz-collage-photo img,
.pieces-photo img,
.person-photo img,
.season-card-img img,
.ig-cell img,
.ag-cell img,
.rs-cell img,
.photo-frame img,
.message-photo img,
.split-img img,
.hm-photo img,
.stl-img img{
  width:100%;height:100%;
  object-fit:cover;
  max-width:100%;
}

/* SVG制御 */
.num-tile svg,
.num-map{ max-width:100%; height:auto; }

/* ── 2. テキスト溢れ防止（グローバル） ── */
body{
  overflow-wrap:break-word;
  word-break:break-word;
}
.tbl td,
.tbl th,
.news-row .t,
.news-row .t a,
.faq-a p,
.prod-desc,
.person-role,
.section-desc,
.page-hero-sub,
.hm-desc,
.ceo-block p,
.message-body p{
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* ニュース行：長タイトル省略 */
.news-row .t{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* ── 3. テーブル横スクロール対策 ── */
.tbl-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
@media(max-width:768px){
  .tbl{
    table-layout:fixed;
    width:100%;
  }
  .tbl th{
    width:100px;
    min-width:100px;
    font-size:10px;
  }
  .tbl td{
    font-size:13px;
  }
}

/* ── 4. インラインgridの強制レスポンシブ ── */
@media(max-width:768px){
  [style*="repeat(4"]{
    grid-template-columns:repeat(2,1fr)!important;
  }
  [style*="repeat(3"]{
    grid-template-columns:1fr!important;
  }
}
@media(max-width:480px){
  [style*="repeat(4"]{
    grid-template-columns:1fr!important;
  }
  [style*="repeat(2"]{
    grid-template-columns:1fr!important;
  }
}

/* ── 5. ヒーローボタンのモバイル対応 ── */
@media(max-width:480px){
  .hero-actions{
    flex-direction:column;
    gap:12px;
  }
  .hero-cta{
    width:100%;
    justify-content:center;
    padding:16px 24px;
  }
}

/* ── 6. コンテナのモバイル微調整 ── */
@media(max-width:400px){
  .container{width:calc(100% - 24px)}
}

/* ── 7. カード内テキスト省略 ── */
.prod-card .prod-desc,
.person-card .person-role{
  display:-webkit-box;
  -webkit-line-clamp:4;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.season-card h3,
.prod-card h3{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* ── 8. FAQ回答のmax-width ── */
.faq-a p{
  max-width:680px;
}

/* ── 9. recruit テーブルのレスポンシブ ── */
@media(max-width:900px){
  .job-grid{gap:16px}
  .recruit-detail-tbl,
  .tbl[style*="max-width:820px"]{
    max-width:100%!important;
  }
}

/* ── 10. biz-collageのアスペクト比統一 ── */
.biz-collage-photo{
  aspect-ratio:4/3;
}

/* ── 11. pieces-photoのモバイル対応 ── */
@media(max-width:768px){
  .pieces-photo{
    position:relative!important;
    width:48%!important;
    margin:4px!important;
    top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;
  }
  .pieces-bg{
    display:flex;flex-wrap:wrap;justify-content:center;
    position:relative!important;width:100%!important;height:auto!important;
  }
}

/* ── 12. client-gridのモバイル対応 ── */
@media(max-width:600px){
  .client-grid{
    grid-template-columns:1fr!important;
    gap:12px;
  }
  .client-card{
    padding:20px 16px;
  }
}

/* ══════════════════════════════════════════════════════════════════
   INNER PAGE DESIGN SYSTEM
   8-point Grid · トップページ完全隔離 · body.inner-page スコープ
   ══════════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────
   1. SPACING TOKENS（8の倍数グリッド）
   ──────────────────────────────────── */
/* HERITAGE 背景写真 */
.hm-heritage-bg{
  position:absolute;inset:0;z-index:0;
  opacity:.14;
}
.hm-heritage-bg img{
  width:100%;height:100%;
  object-fit:cover;
  filter:grayscale(1) contrast(1.1);
}

/* 背景テキスト共通 */
.sec-bgtext{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  font-family:var(--font-en);
  font-size:clamp(80px, 14vw, 220px);
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.03);
  white-space:nowrap;
  pointer-events:none;
  user-select:none;
  z-index:0;
  line-height:1;
}

body.inner-page .section{
  padding-block:clamp(64px, 10vw, 128px);
}
body.inner-page .section-lg{
  padding-block:clamp(80px, 12vw, 144px);
}

/* コンテナ最大幅：可読性重視 */
body.inner-page .container{
  width:min(100% - 64px, 1100px);
}

/* ────────────────────────────────────
   2. TYPOGRAPHY HIERARCHY
   ──────────────────────────────────── */

/* Page Hero */
body.inner-page .page-hero{
  padding:clamp(140px, 18vw, 200px) 0 clamp(80px, 10vw, 120px);
}
body.inner-page .page-hero-jp{
  font-size:clamp(28px, 4.5vw, 56px);
  line-height:1.35;
  letter-spacing:.04em;
  margin-bottom:24px;
}
body.inner-page .page-hero-sub{
  font-size:clamp(13px, 1.2vw, 15px);
  line-height:1.85;
  max-width:480px;
  color:var(--text-mid);
}

/* Section Title */
body.inner-page .section-title{
  font-size:clamp(22px, 3vw, 40px);
  line-height:1.4;
  letter-spacing:.02em;
  margin-bottom:24px;
}

/* Section Description */
body.inner-page .section-desc{
  font-size:clamp(13px, 1.1vw, 15px);
  line-height:1.85;
  max-width:540px;
  color:var(--text-mid);
  margin-bottom:40px;
}

/* Section Label */
body.inner-page .section-label{
  font-size:11px;
  letter-spacing:.28em;
  margin-bottom:24px;
}

/* Body Text */
body.inner-page p{
  font-size:clamp(13px, 1vw, 15px);
  line-height:1.8;
}

/* Section Heading（ラベル+タイトル+説明のグループ） */
body.inner-page .section-heading{
  margin-bottom:64px;
}
body.inner-page .section-heading.center{
  text-align:center;
}
body.inner-page .section-heading.center .section-desc{
  margin-left:auto;margin-right:auto;
}

/* ────────────────────────────────────
   3. IMAGE SYSTEM
   ──────────────────────────────────── */
body.inner-page .photo-frame,
body.inner-page .split-img,
body.inner-page .prod-img,
body.inner-page .message-photo,
body.inner-page .ag-cell,
body.inner-page .rs-cell{
  border-radius:4px;
  overflow:hidden;
}
body.inner-page .photo-frame img,
body.inner-page .split-img img,
body.inner-page .prod-img img,
body.inner-page .message-photo img,
body.inner-page .ag-cell img,
body.inner-page .rs-cell img{
  width:100%;height:100%;
  object-fit:cover;
  aspect-ratio:auto;
}
/* デフォルトアスペクト比 */
body.inner-page .photo-frame{ aspect-ratio:3/4; }
body.inner-page .split-img{ aspect-ratio:4/3; max-height:480px; }
body.inner-page .prod-img{ aspect-ratio:4/5; max-height:400px; }
body.inner-page .message-photo{ aspect-ratio:3/4; max-width:400px; }

/* ────────────────────────────────────
   4. LAYOUT PATTERNS（2カラム交互配置）
   ──────────────────────────────────── */

/* 基本Split（画像+テキスト横並び） */
body.inner-page .split{
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:clamp(32px, 5vw, 72px);
  align-items:center;
}
/* 偶数セクションで左右反転（交互配置） */
body.inner-page .split.reverse{
  grid-template-columns:1.15fr 1fr;
}
body.inner-page .split.reverse .split-img{
  order:2;
}
body.inner-page .split.reverse .split-body{
  order:1;
}

/* CEO / Message グリッド */
body.inner-page .ceo-grid,
body.inner-page .message-block{
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:clamp(32px, 5vw, 72px);
  align-items:start;
}

/* People Grid */
body.inner-page .people-grid{
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(24px, 3vw, 40px);
}

/* Product Grid */
body.inner-page .prod-grid{
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(16px, 2vw, 24px);
}

/* FAQ */
body.inner-page .faq{
  max-width:800px;
  margin:0 auto;
}
body.inner-page .faq-a p{
  max-width:640px;
  line-height:1.85;
}

/* テーブル */
body.inner-page .tbl{
  max-width:880px;
  margin:0 auto;
}
body.inner-page .tbl th{
  width:160px;
  min-width:140px;
  padding:24px 24px 24px 0;
  font-size:11px;
  vertical-align:top;
}
body.inner-page .tbl td{
  padding:24px 0;
  font-size:14px;
  line-height:1.85;
}

/* 署名 */
body.inner-page .ceo-sign{
  margin-top:40px;
  padding-top:24px;
  border-top:1px solid var(--line);
}

/* ────────────────────────────────────
   5. CARD SYSTEM
   ──────────────────────────────────── */
body.inner-page .prod-card{
  border-radius:4px;
  overflow:hidden;
  transition:transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s;
}
body.inner-page .prod-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 48px rgba(0,0,0,.3);
}
body.inner-page .prod-card .prod-body{
  padding:clamp(20px, 2.5vw, 32px);
}
body.inner-page .prod-card h3{
  font-size:clamp(15px, 1.3vw, 18px);
  line-height:1.4;
  margin-bottom:12px;
}
body.inner-page .prod-card .prod-desc{
  font-size:13px;
  line-height:1.85;
  color:var(--text-mid);
}

/* Person Card */
body.inner-page .person-card{
  padding:clamp(24px, 3vw, 40px);
}
body.inner-page .person-card h3{
  font-size:clamp(16px, 1.4vw, 20px);
  margin-bottom:8px;
}
body.inner-page .person-card .person-role{
  font-size:13px;
  line-height:1.85;
  color:var(--text-mid);
}

/* Contact Card */
body.inner-page .contact-card{
  padding:clamp(28px, 3vw, 40px);
  text-align:center;
}

/* ────────────────────────────────────
   6. BLOCKQUOTE / PHILOSOPHY
   ──────────────────────────────────── */
body.inner-page .philosophy-motto{
  max-width:800px;
  margin:0 auto;
  padding:clamp(40px, 5vw, 72px);
  text-align:center;
}
body.inner-page .philosophy-motto-jp span{
  font-size:clamp(20px, 3vw, 36px);
  line-height:1.5;
}
body.inner-page .philosophy-motto-desc{
  font-size:14px;
  line-height:2;
  max-width:560px;
  margin:24px auto 0;
  color:var(--text-mid);
}
body.inner-page .quote{
  font-size:clamp(18px, 2.5vw, 28px);
  line-height:1.6;
  margin-bottom:32px;
}

/* ────────────────────────────────────
   7. FOOTER（下層ページ調整）
   ──────────────────────────────────── */
body.inner-page .foot-grid{
  gap:clamp(32px, 4vw, 56px);
}

/* ────────────────────────────────────
   8. RESPONSIVE — TABLET（768px〜1024px）
   ──────────────────────────────────── */
@media(max-width:1024px){
  body.inner-page .container{width:min(100% - 48px, 1100px)}
  body.inner-page .split{grid-template-columns:1fr;gap:40px}
  body.inner-page .split.reverse .split-img{order:0}
  body.inner-page .split.reverse .split-body{order:0}
  body.inner-page .ceo-grid,
  body.inner-page .message-block{grid-template-columns:1fr;gap:40px}
  body.inner-page .message-photo{max-width:320px;margin:0 auto}
  body.inner-page .prod-grid{grid-template-columns:1fr 1fr}
  body.inner-page .people-grid{grid-template-columns:1fr 1fr}
}

/* ────────────────────────────────────
   9. RESPONSIVE — MOBILE（768px以下）
   ──────────────────────────────────── */
@media(max-width:768px){
  body.inner-page .container{width:calc(100% - 40px)}
  body.inner-page .section{padding-block:clamp(48px, 8vw, 80px)}
  body.inner-page .section-heading{margin-bottom:40px}
  body.inner-page .page-hero{padding:120px 0 64px}
  body.inner-page .page-hero-jp{font-size:clamp(24px, 6vw, 36px)}

  body.inner-page .split-img{max-height:320px}
  body.inner-page .prod-img{max-height:280px}
  body.inner-page .photo-frame{max-width:280px;margin:0 auto}

  body.inner-page .prod-grid{grid-template-columns:1fr}
  body.inner-page .people-grid{grid-template-columns:1fr}
  body.inner-page .contact-grid{grid-template-columns:1fr}

  body.inner-page .tbl th{width:100px;min-width:90px;padding:16px 12px 16px 0;font-size:10px}
  body.inner-page .tbl td{padding:16px 0;font-size:13px}

  body.inner-page .foot-grid{grid-template-columns:1fr;text-align:center}
}

/* ────────────────────────────────────
   10. RESPONSIVE — SMALL MOBILE（480px以下）
   ──────────────────────────────────── */
@media(max-width:480px){
  body.inner-page .container{width:calc(100% - 32px)}
  body.inner-page .section{padding-block:clamp(40px, 7vw, 64px)}
  body.inner-page .page-hero{padding:100px 0 48px}
  body.inner-page .page-hero-jp{font-size:22px}
  body.inner-page .page-hero-sub{font-size:12px}
  body.inner-page .section-title{font-size:20px}
  body.inner-page .section-desc{font-size:12px}

  body.inner-page .philosophy-motto{padding:28px 20px}
  body.inner-page .philosophy-motto-jp span{font-size:18px}
  body.inner-page .quote{font-size:16px}

  body.inner-page .person-card{padding:20px 16px}
  body.inner-page .contact-card{padding:24px 16px}
  body.inner-page .prod-card .prod-body{padding:16px}
}

/* ================================================================
   代表挨拶ヒーロー内写真 — ゆっくり品よく登場
================================================================ */
.ceo-grid .photo-frame.sd-img{
  opacity:0;
  transform:translateY(24px) scale(.96);
  transition:
    opacity 1.4s cubic-bezier(.16,1,.3,1) .2s,
    transform 1.8s cubic-bezier(.16,1,.3,1) .2s;
  will-change:opacity, transform;
}
.ceo-grid .photo-frame.sd-img.visible{
  opacity:1;
  transform:translateY(0) scale(1);
}
.ceo-grid .photo-frame.sd-img img{
  transform:scale(1.1);
  transition:transform 2.6s cubic-bezier(.16,1,.3,1) .4s;
  will-change:transform;
}
.ceo-grid .photo-frame.sd-img.visible img{
  transform:scale(1);
}
@media (prefers-reduced-motion: reduce){
  .ceo-grid .photo-frame.sd-img,
  .ceo-grid .photo-frame.sd-img img{
    opacity:1; transform:none; transition:none;
  }
}

/* ================================================================
   CONCEPT SCROLLYTELLING — business.html
   左テキストsticky／右画像縦スクロール／clip-path＋パララックス
================================================================ */
.biz-concept .biz-story{
  display:grid;
  grid-template-columns:5fr 6fr;
  gap:clamp(48px, 6vw, 96px);
  align-items:start;
  position:relative;
}
.biz-story-text{
  position:sticky;
  top:120px;
  align-self:start;
}
.biz-story-media{
  position:relative;
}
.biz-story-frames{
  display:flex;
  flex-direction:column;
  gap:clamp(32px, 5vw, 80px);
}
.biz-frame{
  position:relative;
  margin:0;
  overflow:hidden;
  aspect-ratio:4/5;
  background:#0d0d0d;
  border:1px solid rgba(198,161,91,.15);
}
.biz-frame-mask{
  position:absolute; inset:0;
  overflow:hidden;
  clip-path:inset(100% 0 0 0);
  will-change:clip-path;
}
.biz-frame-mask img{
  width:100%; height:110%;
  object-fit:cover;
  transform:scale(1.08) translateY(-5%);
  filter:brightness(.88) contrast(1.05) saturate(1.05);
  will-change:transform;
}
.biz-frame::after{
  content:'';
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(5,5,5,.35) 0%, rgba(5,5,5,0) 30%, rgba(5,5,5,0) 60%, rgba(5,5,5,.7) 100%);
  pointer-events:none;
  z-index:2;
}
.biz-frame-cap{
  position:absolute;
  left:clamp(20px, 3vw, 40px);
  bottom:clamp(20px, 3vw, 32px);
  z-index:3;
  display:flex;
  align-items:center;
  gap:14px;
  font-family:var(--font-en);
  letter-spacing:.28em;
  color:var(--paper);
  text-shadow:0 2px 12px rgba(0,0,0,.6);
}
.biz-frame-cap .num{
  font-size:12px;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .8s ease .1s, transform .8s ease .1s;
  color:rgba(198,161,91,.95);
}
.biz-frame-cap .line{
  width:0;
  height:1px;
  background:rgba(198,161,91,.75);
  transition:width 1s cubic-bezier(.16,1,.3,1) .35s;
}
.biz-frame-cap .en{
  font-size:11px;
  letter-spacing:.42em;
  opacity:0;
  transform:translateX(10px);
  transition:opacity .8s ease .6s, transform .8s cubic-bezier(.16,1,.3,1) .6s;
}
.biz-frame.is-in .biz-frame-cap .num{ opacity:1; transform:translateY(0); }
.biz-frame.is-in .biz-frame-cap .line{ width:48px; }
.biz-frame.is-in .biz-frame-cap .en{ opacity:1; transform:translateX(0); }

/* 位置インジケーター */
.biz-story-nav{
  position:absolute;
  top:0;
  right:-28px;
  bottom:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:14px;
  list-style:none;
  padding:0;
  margin:0;
  pointer-events:none;
  z-index:5;
}
.biz-story-nav{ position:sticky; top:50vh; height:0; align-self:flex-start; }
.biz-story-nav li{
  font-family:var(--font-en);
  font-size:11px;
  letter-spacing:.32em;
  color:rgba(246,241,231,.25);
  transition:color .4s ease, transform .4s ease;
  transform:translateX(0);
}
.biz-story-nav li.is-active{
  color:rgba(198,161,91,.95);
  transform:translateX(4px);
}
@media(max-width:1024px){
  .biz-concept .biz-story{
    grid-template-columns:1fr;
    gap:48px;
  }
  .biz-story-text{
    position:static;
    top:auto;
  }
  .biz-story-frames{ gap:24px; }
  .biz-story-nav{ display:none; }
  .biz-frame{ aspect-ratio:16/11; }
}
@media (prefers-reduced-motion: reduce){
  .biz-frame-mask{ clip-path:none; }
  .biz-frame-mask img{ transform:none; }
  .biz-frame-cap .num,
  .biz-frame-cap .en{ opacity:1; transform:none; transition:none; }
  .biz-frame-cap .line{ width:48px; transition:none; }
}

/* ================================================================
   Services — 背景写真つき2カラム（業者向け／小売）
================================================================ */
.svc-grid--image{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(24px, 3vw, 40px);
  margin-top:64px;
  border:0;
}
.svc-box--image{
  position:relative;
  padding:0;
  min-height:clamp(360px, 42vw, 460px);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  border:1px solid rgba(198,161,91,.35);
  border-right:1px solid rgba(198,161,91,.35);
  overflow:hidden;
  transition:border-color .5s ease, box-shadow .5s ease, transform .6s ease;
}
.svc-box--image::before{
  content:'';
  position:absolute; inset:0;
  background:
    linear-gradient(180deg,
      rgba(5,5,5,.55) 0%,
      rgba(5,5,5,.65) 55%,
      rgba(5,5,5,.88) 100%),
    linear-gradient(90deg,
      rgba(5,5,5,.35) 0%,
      rgba(5,5,5,.55) 100%);
  pointer-events:none;
  transition:opacity .5s ease;
}
.svc-box--image::after{
  content:'';
  position:absolute; inset:10px;
  border:1px solid rgba(198,161,91,.18);
  pointer-events:none;
  z-index:2;
}
.svc-box--image:hover{
  border-color:rgba(198,161,91,.85);
  box-shadow:0 0 40px rgba(198,161,91,.18);
  transform:translateY(-4px);
}
.svc-box--image:hover::before{ opacity:.85; }
.svc-box-inner{
  position:relative;
  z-index:1;
  height:100%;
  padding:clamp(36px, 4vw, 56px);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}
.svc-box--image .svc-en{
  font-family:var(--font-en);
  font-size:11px; letter-spacing:.42em;
  color:rgba(198,161,91,.95);
  text-transform:uppercase;
  margin-bottom:16px;
}
.svc-box--image .svc-title{
  font-family:var(--font-h);
  font-size:clamp(24px, 2.4vw, 32px);
  font-weight:500;
  color:var(--paper);
  letter-spacing:.02em;
  line-height:1.5;
  margin-bottom:20px;
  text-shadow:0 2px 12px rgba(0,0,0,.6);
}
.svc-box--image .svc-desc{
  font-family:var(--font-jp);
  font-size:14px; line-height:2.2; letter-spacing:.04em;
  color:rgba(246,241,231,.95);
  text-shadow:0 1px 8px rgba(0,0,0,.5);
}
@media(max-width:1024px){
  .svc-grid--image{ grid-template-columns:1fr; gap:20px; }
  .svc-box--image{ min-height:340px; }
}
@media(max-width:600px){
  .svc-box--image{ min-height:300px; }
  .svc-box-inner{ padding:32px 24px; }
}

/* ================================================================
   旬カレンダー — 春夏秋冬カード（背景に薄い野菜写真＋金線フレーム）
================================================================ */
.cal-grid--seasons{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:clamp(20px, 2.4vw, 32px);
  margin-top:64px;
}
.cal-card--season{
  position:relative;
  padding:0;
  background:#0d0d0d;
  border:1px solid rgba(198,161,91,.35);
  border-top:1px solid rgba(198,161,91,.35);
  overflow:hidden;
  transition:border-color .5s ease, box-shadow .5s ease, transform .6s ease;
  display:flex;
  flex-direction:column;
}
.cal-card--season::after{
  content:'';
  position:absolute; inset:8px;
  border:1px solid rgba(198,161,91,.15);
  pointer-events:none;
  z-index:3;
}
.cal-card--season:hover{
  border-color:rgba(198,161,91,.85);
  box-shadow:0 0 40px rgba(198,161,91,.18), inset 0 0 40px rgba(198,161,91,.08);
  transform:translateY(-4px);
}
/* 春夏秋冬＋日付の背景に薄く写真 */
.cal-card--season .cal-head{
  position:relative;
  padding:36px 28px 28px;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  overflow:hidden;
}
.cal-card--season .cal-head::before{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(10,10,10,.6) 0%,
    rgba(10,10,10,.55) 55%,
    rgba(10,10,10,.85) 100%);
  pointer-events:none;
}
.cal-card--season .cal-head > *{ position:relative; z-index:1; }
.cal-card--season .cal-en{
  font-family:var(--font-en);
  font-size:11px; letter-spacing:.42em;
  color:rgba(198,161,91,.95);
  text-transform:uppercase;
  margin-bottom:16px;
}
.cal-card--season .cal-jp{
  font-family:var(--font-h);
  font-size:clamp(48px, 4.4vw, 64px);
  font-weight:400;
  color:var(--paper);
  letter-spacing:.02em;
  line-height:1;
  margin-bottom:14px;
  text-shadow:0 2px 12px rgba(0,0,0,.6);
}
.cal-card--season .cal-months{
  font-family:var(--font-en);
  font-size:12px; letter-spacing:.28em;
  color:rgba(246,241,231,.85);
  margin-bottom:0;
}
/* 品目リストは無地の暗背景 */
.cal-card--season .cal-body{
  padding:24px 28px 32px;
  background:#0d0d0d;
  position:relative;
  flex:1;
}
.cal-card--season .cal-body::before{
  content:'';
  position:absolute;
  top:0; left:28px; right:28px;
  height:1px;
  background:linear-gradient(90deg,
    rgba(198,161,91,.5) 0%,
    rgba(198,161,91,.15) 60%,
    transparent 100%);
}
.cal-card--season .cal-items{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:8px;
}
.cal-card--season .cal-item{
  font-family:var(--font-jp);
  font-size:14px; letter-spacing:.06em;
  color:rgba(246,241,231,.9);
  padding-left:22px;
  position:relative;
}
.cal-card--season .cal-item::before{
  content:'';
  position:absolute; left:0; top:11px;
  width:12px; height:1px;
  background:rgba(198,161,91,.7);
}
@media(max-width:1024px){
  .cal-grid--seasons{
    grid-template-columns:repeat(2, 1fr);
    gap:20px;
  }
  .cal-card--season .cal-head{ padding:32px 24px 24px; }
  .cal-card--season .cal-body{ padding:22px 24px 28px; }
  .cal-card--season .cal-body::before{ left:24px; right:24px; }
}
@media(max-width:600px){
  .cal-grid--seasons{
    grid-template-columns:1fr;
    gap:16px;
  }
  .cal-card--season .cal-head{ padding:28px 22px 22px; }
  .cal-card--season .cal-body{ padding:20px 22px 26px; }
  .cal-card--season .cal-body::before{ left:22px; right:22px; }
  .cal-card--season .cal-jp{ font-size:44px; }
}

/* ================================================================
   PAGE HERO — 右下寄せバリエーション（about.html）
   コピー右端 = 下のコンテンツ .container の右端に揃える
================================================================ */
.page-hero.page-hero--br{
  min-height:clamp(520px, 82vh, 820px);
  padding:180px 0 48px;
  display:flex;
  align-items:flex-end;
}
/* 写真は明るめキープ、左→右で暗くなるオーバーレイで雰囲気を作る */
.page-hero.page-hero--br .page-hero-media{
  filter:brightness(.92) contrast(1.05) saturate(1.08) !important;
}
.page-hero.page-hero--br::before{
  background:
    linear-gradient(90deg,
      rgba(5,5,5,0) 0%,
      rgba(5,5,5,0) 18%,
      rgba(5,5,5,.55) 40%,
      rgba(5,5,5,.92) 55%,
      rgba(5,5,5,.98) 100%),
    linear-gradient(180deg,
      rgba(5,5,5,.35) 0%,
      rgba(5,5,5,0) 30%,
      rgba(5,5,5,0) 70%,
      rgba(5,5,5,.45) 100%) !important;
}
@media(max-width:768px){
  /* モバイルは右カラムが狭くなるので、下方向グラデーションを強めに */
  .page-hero.page-hero--br::before{
    background:
      linear-gradient(90deg,
        rgba(5,5,5,0) 0%,
        rgba(5,5,5,0) 20%,
        rgba(5,5,5,.6) 45%,
        rgba(5,5,5,.95) 65%,
        rgba(5,5,5,.98) 100%),
      linear-gradient(180deg,
        rgba(5,5,5,.4) 0%,
        rgba(5,5,5,.05) 35%,
        rgba(5,5,5,.15) 60%,
        rgba(5,5,5,.85) 100%) !important;
  }
}
.page-hero.page-hero--br .container{
  display:block !important;
  width:min(100% - 96px, 1440px);
  max-width:none;
  margin-inline:auto;
  padding:0;
  grid-template-columns:none;
}
.page-hero--br .page-hero-copy{
  margin-left:auto;
  margin-right:0;
  width:min(560px, 100%);
  max-width:100%;
  text-align:left;
}
/* ABOUT US の頭のラインは非表示にして、西浦青果とはの左端に揃える */
.page-hero--br .page-hero-en{
  margin-bottom:20px;
  gap:0;
}
.page-hero--br .page-hero-en::before{
  display:none;
}
.page-hero--br .page-hero-jp{ margin-bottom:24px; }
.page-hero--br .page-hero-sub{ max-width:100%; margin-bottom:0; padding-bottom:0; }
.page-hero--br .page-hero-sub .nb{
  display:inline-block;
}
@media(max-width:1024px){
  .page-hero.page-hero--br{
    min-height:auto;
    padding:160px 0 40px;
  }
  .page-hero.page-hero--br .container{
    width:min(100% - 48px, 1440px);
  }
  /* タブレット・スマホでは左下寄せ */
  .page-hero--br .page-hero-copy{
    margin-left:0;
    margin-right:auto;
    text-align:left;
  }
  /* オーバーレイのグラデーションを左が暗く右が明るく反転 */
  .page-hero.page-hero--br::before{
    background:
      linear-gradient(90deg,
        rgba(5,5,5,.98) 0%,
        rgba(5,5,5,.92) 45%,
        rgba(5,5,5,.55) 60%,
        rgba(5,5,5,0) 82%,
        rgba(5,5,5,0) 100%),
      linear-gradient(180deg,
        rgba(5,5,5,.4) 0%,
        rgba(5,5,5,.05) 35%,
        rgba(5,5,5,.15) 60%,
        rgba(5,5,5,.85) 100%) !important;
  }
}
@media(max-width:600px){
  .page-hero.page-hero--br{ padding:140px 0 32px; }
  .page-hero.page-hero--br .container{
    width:min(100% - 32px, 1440px);
  }
  .page-hero--br .page-hero-copy{ max-width:100%; }
}

/* ================================================================
   フッター ロゴ（ヘッダーと同じ）
================================================================ */
.foot-brand-logo{
  height:44px;
  width:auto;
  display:block;
  transition:transform .6s cubic-bezier(.22,1,.36,1), filter .5s;
}
.foot-brand .mark-row:hover .foot-brand-logo{
  transform:scale(1.05);
  filter:brightness(1.15);
}

/* ================================================================
   RECRUIT — 代表メッセージ 読みやすさ調整
================================================================ */
.message-lead{
  font-family:var(--font-jp, "Zen Kaku Gothic New", sans-serif);
  color:var(--text);
  font-size:clamp(20px, 2.4vw, 26px);
  line-height:1.9;
  letter-spacing:.04em;
  font-weight:500;
  margin-bottom:32px;
}
.message-body p{
  color:var(--text) !important;
}

/* ================================================================
   CONTACT — お問い合わせフォーム（contact.php へ送信）
================================================================ */
.cf-wrap{
  max-width:720px;
  margin:0 auto;
}
.cf-row{
  margin-bottom:28px;
}
.cf-label{
  display:block;
  font-family:'Noto Serif JP', serif;
  font-size:13px;
  font-weight:600;
  letter-spacing:.08em;
  color:rgba(255,255,255,.85);
  margin-bottom:8px;
}
.cf-label .req{
  display:inline-block;
  font-size:10px;
  font-weight:700;
  color:#D4A853;
  border:1px solid rgba(212,168,83,.4);
  padding:1px 8px;
  border-radius:2px;
  margin-left:8px;
  letter-spacing:.1em;
  vertical-align:middle;
}
.cf-input,
.cf-textarea{
  width:100%;
  padding:14px 16px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:4px;
  color:#fff;
  font-size:14px;
  font-family:inherit;
  letter-spacing:.04em;
  outline:none;
  transition:border-color .3s, background .3s;
}
.cf-input:focus,
.cf-textarea:focus{
  border-color:#D4A853;
  background:rgba(255,255,255,.1);
}
.cf-input::placeholder,
.cf-textarea::placeholder{
  color:rgba(255,255,255,.25);
}
.cf-textarea{
  min-height:160px;
  resize:vertical;
  line-height:1.8;
}
.cf-submit{
  display:block;
  margin:0 auto;
  padding:18px 64px;
  background:transparent;
  border:1px solid #D4A853;
  color:#D4A853;
  font-family:'Noto Serif JP', serif;
  font-size:14px;
  font-weight:600;
  letter-spacing:.2em;
  cursor:pointer;
  transition:all .4s ease;
  border-radius:2px;
}
.cf-submit:hover{
  background:#D4A853;
  color:#0a0a0a;
}
.cf-submit:disabled{
  opacity:.4;
  cursor:not-allowed;
}
/* 各入力欄のエラー表示 */
.cf-error{
  color:#e57373;
  font-size:11px;
  margin-top:6px;
  display:none;
}
.cf-error.show{
  display:block;
}
/* フォーム全体のエラー表示（サーバーからの応答など） */
.cf-formerror{
  display:none;
  margin:0 0 28px;
  padding:16px 18px;
  border:1px solid rgba(229,115,115,.45);
  background:rgba(229,115,115,.08);
  border-radius:4px;
  color:#e57373;
  font-size:12px;
  line-height:2;
  letter-spacing:.04em;
  text-align:center;
  white-space:pre-line;
}
.cf-formerror.show{
  display:block;
}
/* ボット対策用の隠し入力欄（画面外へ追い出す） */
.cf-hp{
  position:absolute !important;
  left:-9999px;
  top:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}
/* 送信完了メッセージ */
.cf-success{
  text-align:center;
  padding:60px 20px;
}
.cf-success-icon{
  font-size:48px;
  margin-bottom:16px;
}
.cf-success h3{
  font-family:'Noto Serif JP', serif;
  font-size:20px;
  color:#D4A853;
  letter-spacing:.15em;
  margin-bottom:16px;
}
.cf-success p{
  font-size:13px;
  color:rgba(255,255,255,.6);
  line-height:2;
}