/* =================================================================
   TONE BRANDING — トップページ デザインカンプ
   ミニマル / 雑誌（エディトリアル）スタイル / レスポンシブ / 写真はカラー
   単一CSS・インラインCSSなし・共通パーツを共通化
   ================================================================= */

/* ---------- デザイントークン ---------- */
:root{
  --paper:#fbfbf9;        /* 紙のような温かみのある白 */
  --paper-2:#f3f2ee;      /* 薄いセクション地 */
  --ink:#141414;          /* 主役の黒 */
  --ink-2:#5a5a55;        /* 本文補助 */
  --ink-3:#908e86;        /* キャプション */
  --line:#dcdbd4;         /* 細罫 */
  --line-2:#ebeae4;       /* さらに薄い罫 */
  --fill:#eae9e4;         /* 画像プレースホルダ地 */

  /* ハイブリッド：木・土の暖色アクセント（1〜2色だけ・差し色） */
  --accent:#8c7456;       /* 木のブラウン */
  --accent-soft:#efe9e0;  /* 生成りの面 */

  --shadow:0 18px 40px -24px rgba(40,34,24,.45); /* 上質な浮き（控えめ） */

  --serif:"source-han-sans-vf","Noto Sans JP",sans-serif; /* 日本語見出し＝源ノ角ゴシックVF */
  --sans:"source-han-sans-vf","Noto Sans JP",sans-serif;  /* 日本語本文＝源ノ角ゴシックVF */
  --en:"Outfit","Helvetica Neue",sans-serif; /* ラベル・ナビ・英字（英語はそのまま） */
  --display:"Playfair Display","source-han-sans-vf",sans-serif; /* 英数字装飾＝Playfair／日本語が来ても明朝に落ちない */

  --maxw:1560px;                /* 横幅を大胆に使う */
  --gut:clamp(20px,6vw,110px);  /* 左右マージン（雑誌的に大きく） */
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:15px;line-height:1.95;
  font-variation-settings:"wght" 500;   /* 源ノ角ゴシックVF＝基本500（英語の静的フォントには不作用） */
  font-feature-settings:"palt";-webkit-font-smoothing:antialiased;
  letter-spacing:.02em;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
h1,h2,h3,h4{margin:0;font-weight:500;line-height:1.4;}
p{margin:0;}

/* ---------- 共通レイアウト ---------- */
.container{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut);}
.container--narrow{max-width:1080px;}
.section{position:relative;padding-block:clamp(84px,13vw,190px);} /* 余白を大胆に */
/* 全幅ブリード（コンテナの外へ突き抜ける） */
.bleed{width:100vw;margin-left:calc(50% - 50vw);}
.section--tint{background:var(--paper-2);}
.section--line{border-top:1px solid var(--line);}

/* ---------- 共通：エディトリアルな見出し系 ---------- */
.kicker{
  font-family:var(--en);font-size:12px;font-weight:500;
  letter-spacing:.32em;text-transform:uppercase;color:var(--ink-3);
  display:inline-flex;align-items:center;gap:12px;
}
.kicker::before{content:"";width:30px;height:1px;background:var(--accent);}
.kicker--center::before{display:none;}

.sec-no{
  font-family:var(--display);font-size:13px;font-style:italic;
  color:var(--accent);letter-spacing:.04em;
}
.sec-title{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(1.7rem,3.6vw,2.85rem);line-height:1.5;
  letter-spacing:.02em;margin-top:18px;
}
.sec-title .en{
  display:block;font-family:var(--display);font-style:italic;
  font-weight:400;font-size:.5em;color:var(--ink-3);
  letter-spacing:.06em;margin-bottom:10px;
}
.lead{color:var(--ink-2);font-size:15px;line-height:2.1;max-width:62ch;margin-top:22px;}

/* 章ヘッダ直下／一覧直後のリンク行の余白（共通） */
.issue-grid .btn-row{margin-top:30px;}
.works-grid + .btn-row{margin-top:clamp(34px,4vw,56px);}
.cta .btn-row{justify-content:center;}
.center{text-align:center;}
.center .kicker{justify-content:center;}
.center .lead{margin-inline:auto;}

/* 章ヘッダ（番号＋罫＋見出し） */
.sec-head{margin-bottom:clamp(36px,5vw,64px);}
.sec-head__top{
  display:flex;align-items:center;gap:18px;
  padding-bottom:16px;border-bottom:1px solid var(--line);
}
.sec-head__top .kicker{margin-left:auto;}

/* ---------- 共通：ボタン ---------- */
.btn{
  --bg:transparent;--fg:var(--ink);--bd:var(--ink);
  display:inline-flex;align-items:center;gap:14px;
  font-family:var(--en);font-size:12px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;
  padding:16px 26px;background:var(--bg);color:var(--fg);
  border:1px solid var(--bd);border-radius:0;
  transition:background .4s var(--ease),color .4s var(--ease);
  white-space:nowrap;cursor:pointer;
}
.btn .arw{display:inline-block;transition:transform .4s var(--ease);}
.btn:hover{background:var(--ink);color:var(--paper);}
.btn:hover .arw{transform:translateX(5px);}
.btn--solid{--bg:var(--ink);--fg:var(--paper);}
.btn--solid:hover{--bg:transparent;color:var(--ink);}
.btn--sm{padding:11px 18px;font-size:12px;}
.btn-row{display:flex;gap:16px;flex-wrap:wrap;}

/* テキストリンク（下線が伸びる） */
.tlink{
  font-family:var(--en);font-size:12px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;display:inline-flex;align-items:center;gap:10px;
  padding-bottom:4px;border-bottom:1px solid var(--ink);
}
.tlink .arw{transition:transform .4s var(--ease);}
.tlink:hover .arw{transform:translateX(5px);}

/* ---------- 共通：画像 ---------- */
.media{position:relative;overflow:hidden;background:var(--fill);}
.media img{width:100%;height:100%;object-fit:cover;
  filter:contrast(1.02);transition:transform 1.1s var(--ease);}
.media:hover img{transform:scale(1.04);}
.media__cap{
  position:absolute;left:14px;bottom:12px;
  font-family:var(--en);font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-3);
}
.r-portrait{aspect-ratio:5/6;}
.r-tall{aspect-ratio:3/4;}
.r-square{aspect-ratio:1/1;}
.r-wide{aspect-ratio:3/2;}
.r-16-9{aspect-ratio:16/9;}

/* ---------- 共通：パララックス（背景写真が遅れて動く） ---------- */
.parallax{overflow:hidden;}
.parallax img{will-change:transform;transform:translate3d(0,var(--py,0),0) scale(1.12);}

/* ---------- 共通：カードの浮き上がり（ホバー） ---------- */
.lift{transition:transform .5s var(--ease),box-shadow .5s var(--ease);}
.lift:hover{transform:translateY(-7px);box-shadow:var(--shadow);}

/* ---------- 共通：フェード式スライダー ---------- */
.slider{position:relative;}
.slider .slide{position:absolute;inset:0;opacity:0;transition:opacity 1.4s var(--ease);}
.slider .slide.is-active{opacity:1;}
.slider .slide:first-child{position:relative;} /* 高さの基準 */
.slider .slide img{width:100%;height:100%;object-fit:cover;filter:contrast(1.02);}
.slider-dots{position:absolute;left:14px;bottom:14px;display:flex;gap:8px;z-index:2;}
.slider-dots button{width:26px;height:2px;border:0;padding:0;background:rgba(255,255,255,.55);cursor:pointer;}
.slider-dots button.is-active{background:#fff;}

/* ---------- 共通：全幅イメージバンド（パララックス＋見出し重ね） ---------- */
.band{position:relative;height:clamp(340px,52vh,560px);overflow:hidden;display:flex;align-items:center;}
.band .parallax{position:absolute;inset:0;}
.band .parallax img{width:100%;height:100%;object-fit:cover;filter:brightness(.5);}
.band__inner{position:relative;z-index:1;color:var(--paper);width:100%;}
.band__inner .kicker{color:color-mix(in srgb,var(--paper) 72%,transparent);}
.band__inner .kicker::before{background:var(--accent);}
.band__inner h2{font-family:var(--serif);font-weight:400;color:var(--paper);
  font-size:clamp(1.6rem,3.6vw,2.7rem);line-height:1.7;margin-top:22px;max-width:24ch;}

/* =================================================================
   HEADER
   ================================================================= */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  background:transparent;                 /* 既定は透過＝ヒーロー画像が下まで見える */
  border-bottom:1px solid transparent;
  transition:border-color .4s var(--ease),background .4s var(--ease);
}
.site-header.is-scrolled{border-bottom-color:var(--line);
  background:color-mix(in srgb,var(--paper) 94%,transparent);backdrop-filter:blur(8px);}
/* ヒーロー上（未スクロール）は白文字・白ロゴで写真に載せる */
.site-header:not(.is-scrolled) .gnav-list a{color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.35);}
.site-header:not(.is-scrolled) .gnav-list a::after{background:#fff;}
.site-header:not(.is-scrolled) .logo img{filter:brightness(0) invert(1) drop-shadow(0 1px 8px rgba(0,0,0,.35));}
.site-header:not(.is-scrolled) .header-cta .btn{--bd:rgba(255,255,255,.7);--fg:#fff;}
.site-header:not(.is-scrolled) .header-cta .btn:hover{background:#fff;color:var(--ink);}
.site-header:not(.is-scrolled) .header-cta .btn--solid{--bg:#fff;--fg:var(--ink);--bd:#fff;}
.site-header:not(.is-scrolled) .header-cta .btn--solid:hover{background:transparent;color:#fff;}
.header-inner{
  max-width:var(--maxw);margin:0 auto;padding:18px var(--gut);
  display:flex;align-items:center;gap:24px;
}
.logo img{height:auto;width:min(230px,48vw);}
.gnav{display:flex;align-items:center;gap:30px;margin-left:auto;}
.gnav-list{display:flex;gap:26px;}
.gnav-list a{
  font-family:var(--en);font-size:14px;font-weight:400;letter-spacing:.08em;
  position:relative;padding-block:6px;color:var(--ink);
}
.gnav-list a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;
  background:var(--ink);transition:width .4s var(--ease);}
.gnav-list a:hover::after{width:100%;}
.header-cta{display:flex;gap:10px;}

/* ハンバーガー */
.nav-toggle{display:none;width:46px;height:46px;border:1px solid var(--line);
  background:var(--paper);cursor:pointer;margin-left:auto;position:relative;}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{
  content:"";position:absolute;left:50%;width:20px;height:1px;background:var(--ink);
  transform:translateX(-50%);transition:.35s var(--ease);}
.nav-toggle span{top:50%;}
.nav-toggle span::before{top:-6px;}
.nav-toggle span::after{top:6px;}

/* =================================================================
   右サイドレール — 縦線＋MENU（横線）＋Scroll（参考：D&H HOME）
   ================================================================= */
.side-rail{position:fixed;top:0;right:0;z-index:130;height:100svh;
  width:clamp(56px,4.6vw,78px);display:flex;flex-direction:column;align-items:center;
  color:#fff;pointer-events:none;transition:color .4s var(--ease);}
.side-rail::before{content:"";position:absolute;top:0;bottom:0;left:0;width:1px;
  background:currentColor;opacity:.32;transition:opacity .45s var(--ease);}
/* 縦線はヒーロー内だけ。ヒーローを過ぎたら消す */
body.is-past-hero .side-rail::before{opacity:0;}
.menu-btn{pointer-events:auto;margin-top:clamp(16px,1.9vw,26px);align-self:stretch;
  background:none;border:0;padding:8px 0;cursor:pointer;color:inherit;
  display:flex;flex-direction:column;align-items:center;gap:9px;}
.menu-btn__bars{display:flex;flex-direction:column;gap:5px;width:26px;}
.menu-btn__bars i{display:block;height:1.5px;width:100%;background:currentColor;
  transition:transform .35s var(--ease),opacity .3s var(--ease);}
.menu-btn__txt{font-family:var(--en);font-size:11px;font-weight:300;letter-spacing:.22em;}
/* MENUラベル下の横線は不要＝非表示 */
.menu-btn::after{display:none;}
.side-scroll{pointer-events:auto;margin-top:auto;margin-bottom:auto;
  color:inherit;writing-mode:vertical-rl;text-orientation:mixed;
  font-family:var(--en);font-size:12px;letter-spacing:.28em;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  transition:opacity .4s var(--ease);}
.side-scroll::after{content:"";width:1px;height:clamp(40px,7vh,66px);background:currentColor;opacity:.55;
  animation:scrollLine 2.4s var(--ease) infinite;transform-origin:top;}
/* スクロールで濃色化・Scroll指標はヒーロー限定で消す */
body.is-scrolled .side-rail{color:var(--ink);}
body.is-scrolled .side-scroll{opacity:0;pointer-events:none;}
/* メニュー展開中は濃色＋Scroll隠す＋MENU→× */
body.nav-open .side-rail{color:var(--ink);}
body.nav-open .side-scroll{opacity:0;}
body.nav-open .menu-btn__bars i:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
body.nav-open .menu-btn__bars i:nth-child(2){opacity:0;}
body.nav-open .menu-btn__bars i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}
/* ヘッダー内容を右レール分あける（PC） */
@media(min-width:821px){ .header-inner{padding-right:calc(var(--gut) + clamp(44px,4vw,64px));} }

/* =================================================================
   MENU ドロワー（全幅共通）— inline navが右からスライドイン
   ================================================================= */
body.nav-open{overflow:hidden;}
body.nav-open .gnav{
  position:fixed;inset:0 0 0 auto;width:min(88vw,420px);z-index:120;
  flex-direction:column;align-items:flex-start;justify-content:center;gap:0;
  background:var(--paper);padding:104px var(--gut) 56px;margin:0;
  transform:translateX(0);box-shadow:-24px 0 70px rgba(0,0,0,.14);overflow-y:auto;
}
body.nav-open .gnav-list{flex-direction:column;gap:0;width:100%;}
body.nav-open .gnav-list li{width:100%;border-bottom:1px solid var(--line-2);}
body.nav-open .gnav-list a{display:block;padding:18px 2px;font-size:16px;color:var(--ink);}
body.nav-open .gnav-list a::after{display:none;}
body.nav-open .header-cta{flex-direction:column;width:100%;margin-top:28px;gap:12px;}
body.nav-open .header-cta .btn{--bd:var(--ink);--fg:var(--ink);width:100%;justify-content:center;}

/* =================================================================
   HERO（雑誌の表紙のような分割）
   ================================================================= */
.hero{padding-top:110px;}
.hero-grid{
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,72px);
  align-items:end;
}
.hero-copy{padding-bottom:18px;}
.hero-copy .kicker{margin-bottom:30px;}
.hero-title{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(2.3rem,6vw,4.6rem);line-height:1.42;letter-spacing:.01em;
}
.hero-title .accent{position:relative;white-space:nowrap;}
.hero-title .accent::after{content:"";position:absolute;left:0;right:0;bottom:.08em;
  height:9px;background:var(--accent);opacity:.22;}
.hero-sub{margin-top:30px;color:var(--ink-2);font-size:15.5px;line-height:2.2;max-width:46ch;}
.hero-actions{margin-top:38px;}
.hero-figure{position:relative;}
.hero-figure .vlabel{
  position:absolute;top:0;left:-34px;
  writing-mode:vertical-rl;font-family:var(--en);font-size:12px;
  letter-spacing:.4em;text-transform:uppercase;color:var(--ink-3);
}
.hero-meta{
  margin-top:clamp(40px,6vw,80px);
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--ink);
}
.hero-stat{padding:26px 8px 6px;border-right:1px solid var(--line);}
.hero-stat:last-child{border-right:0;}
.hero-stat b{font-family:var(--display);font-weight:500;font-size:clamp(2rem,4vw,3rem);
  line-height:1;display:block;}
.hero-stat b i{font-size:.45em;font-style:normal;font-family:var(--sans);font-weight:500;margin-left:4px;}
.hero-stat span{font-family:var(--en);font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3);display:block;margin-top:12px;}

/* =================================================================
   ISSUE（大きなステートメント）
   ================================================================= */
.issue-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,90px);align-items:center;}
.issue-statement{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.5rem,3vw,2.3rem);line-height:1.9;letter-spacing:.02em;
}
.issue-statement em{font-style:normal;border-bottom:1px solid var(--ink);padding-bottom:1px;}
.issue-figure .vlabel{writing-mode:vertical-rl;}

/* =================================================================
   ABOUT = BRAND STORY（動画背景＋黒透過＋中央テキスト＋サイド写真）
   参考：yurumaru.life BRAND STORY
   ================================================================= */
.brandstory{position:relative;overflow:hidden;isolation:isolate;color:var(--paper);
  min-height:clamp(560px,86vh,880px);display:flex;align-items:center;justify-content:center;
  padding-block:clamp(96px,13vw,180px);
  --mv-y:clamp(40px,9vw,120px);--mv-x:clamp(16px,6vw,80px);} /* 背景動画の余白：PC上下120px/左右80px */
/* 背景動画は四方に余白（video=置換要素なので明示サイズで余白ボックスいっぱいに） */
.brandstory__video{position:absolute;top:var(--mv-y);left:var(--mv-x);
  width:calc(100% - var(--mv-x) * 2);height:calc(100% - var(--mv-y) * 2);
  object-fit:cover;z-index:-2;filter:contrast(1.03);}
.brandstory__overlay{position:absolute;inset:var(--mv-y) var(--mv-x);z-index:-1;
  background:linear-gradient(180deg,rgba(18,16,14,.72),rgba(18,16,14,.6) 45%,rgba(18,16,14,.8));}
/* サイドの写真（参考：yurumaru）＝縦長ポートレートを左右の端で見切れさせ、上部に配置・左右で高さをずらす */
.brandstory__side{position:absolute;top:clamp(40px,7vh,86px);margin:0;
  width:clamp(150px,18vw,300px);height:clamp(320px,56vh,560px);overflow:hidden;z-index:0;
  border-radius:16px;
  box-shadow:0 40px 80px -34px rgba(0,0,0,.7);
  opacity:0;transition:opacity 1.2s var(--ease);will-change:transform,opacity;}
.brandstory__side.is-in{opacity:1;}
.brandstory__side img{width:100%;height:100%;object-fit:cover;border-radius:inherit;}
/* 左＝右へ100px移動 */
.brandstory__side--l{left:calc(clamp(-56px,-3.2vw,0px) + 100px);}
/* 右＝左へ100px・下へ100px移動 */
.brandstory__side--r{right:calc(clamp(-56px,-3.2vw,0px) + 100px);top:calc(clamp(96px,15vh,180px) + 100px);}
/* 中央テキスト */
.brandstory__inner{position:relative;z-index:1;text-align:center;max-width:820px;padding-inline:24px;}
/* Aboutラベル（「人と想い」の上・20px） */
.bs-kicker{display:block;font-family:var(--en);font-size:20px;font-weight:500;
  letter-spacing:.24em;text-indent:.24em;text-transform:uppercase;
  color:color-mix(in srgb,var(--paper) 72%,transparent);margin-bottom:12px;}
/* 大きな装飾ワード（透過30%・字間ゆったり） */
.bs-bigword{display:block;text-align:center;font-family:var(--serif);font-weight:300;
  font-size:clamp(40px,9vw,120px);line-height:1;letter-spacing:.18em;text-indent:.18em;
  color:var(--paper);opacity:.3;margin:0;}
.bs-statement{font-family:var(--serif);font-weight:400;
  font-size:clamp(1.35rem,2.5vw,2rem);line-height:1.56;letter-spacing:.1em;margin-top:40px;
  color:var(--paper);text-shadow:0 2px 26px rgba(0,0,0,.4);}
.bs-statement em{font-style:normal;padding-bottom:2px;
  border-bottom:1px solid color-mix(in srgb,var(--paper) 70%,transparent);}
/* 2文目＝1文目との間隔を控えめに（空きすぎ回避・コメント#4728で15px指定） */
.bs-statement--b{margin-top:15px;}
/* リード＝ポエム調・行間/字間をゆったり（参考サイトの余白感） */
.bs-lead{color:color-mix(in srgb,var(--paper) 82%,transparent);font-size:14px;line-height:2.7;
  letter-spacing:.12em;margin:32px auto 0;max-width:660px;}
.brandstory .btn-row{justify-content:center;margin-top:34px;}
.brandstory .tlink{color:var(--paper);border-color:color-mix(in srgb,var(--paper) 80%,transparent);}
@media(prefers-reduced-motion:reduce){ .brandstory__video{display:none;} .brandstory__side{opacity:1;transform:none!important;} }
@media(max-width:960px){
  .brandstory__side{width:clamp(96px,20vw,160px);}
  .brandstory__side--l{left:-34px;} .brandstory__side--r{right:-34px;}
}
@media(max-width:640px){
  .brandstory__side{display:none;}
  .brandstory{min-height:auto;}
  .bs-lead{font-size:13px;}
}

/* =================================================================
   PROOF（自社実証）— 雑誌の特集グリッド
   ================================================================= */
.proof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);}
.proof-card .media{margin-bottom:20px;}
.proof-card .num{font-family:var(--display);font-style:italic;color:var(--ink-3);font-size:14px;}
.proof-card h3{font-family:var(--serif);font-size:1.2rem;margin:8px 0 10px;}
.proof-card p{color:var(--ink-2);font-size:13.5px;line-height:1.95;}

/* =================================================================
   SERVICE — 番号付きエディトリアルリスト
   ================================================================= */
.svc-list{border-top:1px solid var(--ink);}
.svc-item{
  display:grid;grid-template-columns:90px 1fr auto;gap:clamp(16px,3vw,48px);
  align-items:center;padding:clamp(26px,3.4vw,44px) 6px;
  border-bottom:1px solid var(--line);position:relative;overflow:hidden;
}
.svc-item::before{content:"";position:absolute;inset:0;background:var(--ink);
  transform:translateY(101%);transition:transform .5s var(--ease);z-index:0;}
.svc-item:hover::before{transform:translateY(0);}
.svc-item>*{position:relative;z-index:1;transition:color .45s var(--ease);}
.svc-item:hover,.svc-item:hover .svc-no,.svc-item:hover .svc-desc{color:var(--paper);}
.svc-item:hover .svc-en{color:color-mix(in srgb,var(--paper) 60%,transparent);}
.svc-no{font-family:var(--display);font-style:italic;font-size:1.5rem;color:var(--ink-3);}
.svc-body .svc-en{font-family:var(--en);font-size:12px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink-3);}
.svc-body h3{font-family:var(--serif);font-size:clamp(1.25rem,2.4vw,1.75rem);margin-top:8px;}
.svc-desc{color:var(--ink-2);font-size:13.5px;max-width:34ch;}
.svc-arw{font-family:var(--en);font-size:20px;}

/* =================================================================
   PROCESS — 横並びステップ
   ================================================================= */
.process-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);}
.process-step{background:var(--paper);padding:30px 22px 34px;}
.process-step .pno{font-family:var(--display);font-style:italic;font-size:1.6rem;color:var(--ink);}
.process-step .pen{font-family:var(--en);font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3);margin-top:18px;}
.process-step h4{font-family:var(--serif);font-size:1.05rem;margin-top:6px;}
.process-step p{color:var(--ink-2);font-size:12.5px;line-height:1.9;margin-top:12px;}
/* step ╱ 01 ＝各カードの数字（添付準拠：step＋斜線＋大きな番号） */
.process-step .pnum{display:block;margin-bottom:6px;}
.pnum__top{display:flex;align-items:center;gap:16px;height:26px;overflow:visible;}
.pnum__label{font-family:var(--en);font-size:15px;font-weight:400;letter-spacing:.02em;color:var(--ink);}
.pnum__slash{width:46px;height:1px;background:var(--ink);transform:rotate(-54deg);flex:none;}
.pnum__no{display:block;margin-top:6px;font-family:var(--en);font-weight:500;
  font-size:clamp(2.8rem,4.2vw,4rem);line-height:1;letter-spacing:.01em;color:var(--ink);}

/* =================================================================
   WORKS — KINTO dl-top_product 風 横カルーセル（左レール＋のぞくカード）
   左上にクライアント名／ホバーで下線が伸び画像がゆっくりスライド
   ================================================================= */
.prod{display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:clamp(24px,3.4vw,56px);
  align-items:center;}
.prod__rail{padding-block:10px;}
.prod__title{font-family:var(--en);font-weight:500;font-size:clamp(1.7rem,2.6vw,2.3rem);
  letter-spacing:.08em;margin-top:14px;}
.prod__lead{font-family:var(--serif);font-size:clamp(1rem,1.5vw,1.25rem);line-height:1.9;
  color:var(--ink);margin-top:18px;}
.prod__more{margin-top:26px;}
.prod__nav{display:flex;gap:12px;margin-top:clamp(28px,4vw,48px);}
.prod__arrow{width:52px;height:52px;border:1px solid var(--line);background:var(--paper);
  color:var(--ink);font-family:var(--en);font-size:20px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:.35s var(--ease);}
.prod__arrow:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.prod__arrow span{display:block;transform:translateY(-1px);}
/* 横スクロールトラック（scroll-snap・スクロールバー非表示） */
.prod__track{min-width:0;display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;}
.prod__track::-webkit-scrollbar{display:none;}
.pcard{flex:0 0 clamp(230px,25vw,380px);scroll-snap-align:start;
  position:relative;overflow:hidden;aspect-ratio:5/6;background:var(--fill);color:var(--paper);}
.pcard__media{position:absolute;inset:0;overflow:hidden;}
.pcard__media img{width:100%;height:100%;object-fit:cover;
  filter:contrast(1.02) brightness(.9);
  transform:scale(1.1);transition:transform 2.4s var(--ease);}
.pcard::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(155deg,rgba(20,20,20,.46) 0%,rgba(20,20,20,.14) 38%,rgba(20,20,20,.04) 68%);}
.pcard__name{position:absolute;top:20px;left:22px;z-index:2;
  font-family:var(--serif);font-weight:500;font-size:clamp(1rem,1.3vw,1.3rem);letter-spacing:.03em;
  padding-bottom:10px;text-shadow:0 2px 16px rgba(0,0,0,.44);}
.pcard__name::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:22px;
  background:var(--paper);transition:width .4s var(--ease);}
/* 自動再生：アクティブカードの下線が伸び切るまで＝1スライドぶんの時間（伸び切るとJSが次へ送る） */
.pcard.is-active .pcard__name::after{animation:wkUnderline 4500ms linear forwards;}
@keyframes wkUnderline{from{width:22px}to{width:100%}}
/* ホバー：進捗を一時停止（アクティブ）／非アクティブは即フル下線＋画像スライド */
.prod__track:hover .pcard.is-active .pcard__name::after{animation-play-state:paused;}
.pcard:hover .pcard__name::after{width:100%;}
.pcard:hover .pcard__media img{transform:scale(1.1) translateX(-4%);}
@media(prefers-reduced-motion:reduce){ .pcard.is-active .pcard__name::after{animation:none;width:22px;} }
@media(max-width:820px){
  .prod{grid-template-columns:1fr;gap:26px;}
  .prod__lead br{display:none;}
  .prod__nav{margin-top:22px;}
}
@media(max-width:560px){ .pcard{flex-basis:74vw;} }

/* =================================================================
   VOICE — 引用
   ================================================================= */
.voice-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);}
.voice{border-top:1px solid var(--ink);padding-top:28px;}
.voice .mark{font-family:var(--display);font-style:italic;font-size:3rem;line-height:.6;color:var(--ink-3);}
.voice blockquote{margin:14px 0 0;font-family:var(--serif);font-size:1.15rem;line-height:1.95;}
.voice cite{display:block;margin-top:20px;font-family:var(--en);font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);font-style:normal;}

/* =================================================================
   JOURNAL
   ================================================================= */
.journal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,40px);}
.jcard .media{margin-bottom:18px;}
.jcard .jmeta{display:flex;gap:14px;align-items:center;font-family:var(--en);font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);}
.jcard .jmeta .cat{border:1px solid var(--line);padding:3px 10px;}
.jcard h3{font-family:var(--serif);font-size:1.1rem;margin-top:14px;line-height:1.7;}

/* =================================================================
   CTA バンド
   ================================================================= */
.cta{position:relative;color:var(--paper);overflow:hidden;}
.cta__bg{position:absolute;inset:0;}
.cta__bg img{width:100%;height:100%;object-fit:cover;filter:brightness(.42);}
.cta__inner{position:relative;text-align:center;padding-block:clamp(80px,12vw,150px);}
.cta .kicker{color:color-mix(in srgb,var(--paper) 70%,transparent);}
.cta .kicker::before{background:var(--paper);}
.cta h2{font-family:var(--serif);font-weight:500;color:var(--paper);
  font-size:clamp(1.9rem,4.4vw,3.3rem);line-height:1.5;margin:24px 0 18px;}
.cta p{color:color-mix(in srgb,var(--paper) 80%,transparent);margin-bottom:40px;}
.cta .btn{--bd:var(--paper);--fg:var(--paper);}
.cta .btn:hover{background:var(--paper);color:var(--ink);}
.cta .btn--solid{--bg:var(--paper);--fg:var(--ink);}
.cta .btn--solid:hover{--bg:transparent;color:var(--paper);}

/* =================================================================
   FOOTER
   ================================================================= */
.site-footer{background:var(--ink);color:var(--paper);padding-block:clamp(56px,8vw,96px);}
.footer-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px;
  padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.16);}
.footer-brand .fname{font-family:var(--en);font-size:20px;font-weight:600;letter-spacing:.18em;}
.footer-brand p{color:rgba(255,255,255,.6);font-size:13px;line-height:1.95;margin-top:18px;max-width:34ch;}
.footer-col h5{font-family:var(--en);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.55);margin-bottom:18px;}
.footer-col li{margin-bottom:12px;}
.footer-col a{font-size:13.5px;color:rgba(255,255,255,.85);}
.footer-col a:hover{color:#fff;}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;
  flex-wrap:wrap;padding-top:30px;}
.footer-bottom small{font-family:var(--en);font-size:12px;letter-spacing:.1em;color:rgba(255,255,255,.5);}
.footer-sns{display:flex;gap:10px;}
.footer-sns a{width:38px;height:38px;border:1px solid rgba(255,255,255,.25);
  display:flex;align-items:center;justify-content:center;font-family:var(--en);font-size:12px;
  letter-spacing:.1em;transition:.35s var(--ease);}
.footer-sns a:hover{background:var(--paper);color:var(--ink);border-color:var(--paper);}
.footer-sns a img{width:15px;height:15px;filter:brightness(0) invert(1);opacity:.85;transition:.35s var(--ease);}
.footer-sns a:hover img{filter:none;opacity:1;}

/* =================================================================
   スクロール演出（共通）
   ================================================================= */
.reveal{opacity:0;transform:translateY(26px);
  transition:opacity .9s var(--ease),transform .9s var(--ease);}
.reveal.is-in{opacity:1;transform:none;}
.reveal[data-delay="1"]{transition-delay:.1s;}
.reveal[data-delay="2"]{transition-delay:.2s;}
.reveal[data-delay="3"]{transition-delay:.3s;}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  html{scroll-behavior:auto;}
}

/* =================================================================
   v2 — 横幅ダイナミック / 雑誌エディトリアル（縦書き・下線・大胆な余白）
   ================================================================= */

/* ---- 縦書きのセクションラベル（罫線つき・左端に固定） ---- */
.vmark{
  position:absolute;top:clamp(84px,13vw,190px);left:max(16px,calc((100% - var(--maxw))/2 + 28px));
  writing-mode:vertical-rl;text-orientation:mixed;
  font-family:var(--en);font-size:12px;font-weight:500;letter-spacing:.34em;
  text-transform:uppercase;color:var(--ink-3);display:flex;align-items:center;gap:18px;
  z-index:3;pointer-events:none;
}
.vmark::before{content:"";width:1px;height:54px;background:var(--accent);}
.section--tint .vmark,.cta .vmark{color:var(--ink-3);}
@media(max-width:1180px){ .vmark{display:none;} }

/* ---- 見出しの下線（雑誌的な罫） ---- */
/* 見出し下の罫線は全体的に廃止（下線なし） */
.sec-title.uline{display:inline-block;padding-bottom:0;border-bottom:0;}
/* SERVICE 等＝英語を大きく・日本語を小さく（中央） */
.sec-bigtitle{display:block;margin:0;font-family:var(--en);font-weight:500;
  text-transform:uppercase;font-size:30px;letter-spacing:.06em;
  line-height:50px;color:var(--ink);}
.sec-bigtitle__ja{display:block;margin-top:5px;line-height:28px;font-family:var(--sans);font-weight:500;
  font-size:14px;letter-spacing:.24em;color:var(--ink-3);text-transform:none;}
.center .sec-title.uline{display:inline-block;}
.lead--ul{border-top:1px solid var(--line);padding-top:24px;}

/* =================================================================
   HERO v2 — 全幅・写真の上に大見出し（ダイナミック）
   ================================================================= */
.hero-full{position:relative;height:100svh;min-height:620px;display:flex;align-items:flex-end;overflow:hidden;}
.hero-full__media{position:absolute;inset:0;z-index:0;}
.hero-full__media .slide{position:absolute;inset:0;opacity:0;transition:opacity 1.6s var(--ease);}
.hero-full__media .slide.is-active{opacity:1;}
.hero-full__media img{width:100%;height:100%;object-fit:cover;filter:contrast(1.03);}
.hero-full::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(20,20,20,.48) 0%,rgba(20,20,20,.34) 45%,rgba(20,20,20,.5) 100%);}
.hero-full__inner{position:relative;z-index:2;width:100%;color:var(--paper);padding-bottom:clamp(48px,8vw,110px);}
.hero-full .vmark{position:absolute;top:auto;bottom:clamp(48px,8vw,110px);left:var(--gut);
  color:color-mix(in srgb,var(--paper) 78%,transparent);}
.hero-full .vmark::before{background:var(--paper);}
.hero-eyebrow{font-family:var(--en);font-size:12px;letter-spacing:.34em;text-transform:uppercase;
  color:color-mix(in srgb,var(--paper) 82%,transparent);padding-bottom:14px;
  border-bottom:1px solid color-mix(in srgb,var(--paper) 45%,transparent);display:inline-block;}
.hero-full h1{font-family:var(--serif);font-weight:500;color:var(--paper);
  font-size:clamp(2.6rem,7.4vw,6.4rem);line-height:1.32;letter-spacing:.01em;margin:30px 0 0;
  text-shadow:0 2px 30px rgba(0,0,0,.25);}
.hero-full .hero-sub{color:color-mix(in srgb,var(--paper) 90%,transparent);max-width:50ch;}
.hero-full .slider-dots{position:absolute;right:var(--gut);bottom:clamp(48px,8vw,110px);left:auto;z-index:3;}
.hero-scroll{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:3;
  font-family:var(--en);font-size:12px;letter-spacing:.3em;text-transform:uppercase;
  color:color-mix(in srgb,var(--paper) 80%,transparent);display:flex;flex-direction:column;
  align-items:center;gap:10px;}
.hero-scroll::after{content:"";width:1px;height:46px;background:color-mix(in srgb,var(--paper) 70%,transparent);
  animation:scrollLine 2.4s var(--ease) infinite;transform-origin:top;}
@keyframes scrollLine{0%{transform:scaleY(0)}40%{transform:scaleY(1)}100%{transform:scaleY(0);transform-origin:bottom}}
/* ヒーローのボタンは写真上＝白基調 */
.hero-full .btn{--bd:var(--paper);--fg:var(--paper);}
.hero-full .btn:hover{background:var(--paper);color:var(--ink);}
.hero-full .btn--solid{--bg:var(--paper);--fg:var(--ink);}
.hero-full .btn--solid:hover{--bg:transparent;color:var(--paper);}

/* ---- ヒーロー：画面中央に小さくテキスト（単一画像・全面） ---- */
.hero-full--center{align-items:center;justify-content:center;text-align:center;}
.hero-full--center .hero-full__inner{padding-bottom:0;}
/* ヒーローの見出しは1行で見せたいので box を広げる */
.hero-full--center .container{max-width:none;padding-inline:clamp(16px,3vw,44px);}
.hero-full--center h1{font-family:var(--serif);font-weight:500;color:var(--paper);
  font-size:30px;line-height:1.7;letter-spacing:.1em;margin:0;
  text-shadow:0 2px 22px rgba(0,0,0,.4);}
.hero-full--center .hero-sub{margin:20px auto 0;max-width:none;
  font-size:13px;line-height:2;letter-spacing:2px;
  color:color-mix(in srgb,var(--paper) 92%,transparent);text-shadow:0 2px 16px rgba(0,0,0,.4);}

/* 全幅スタッツ帯 */
.stat-band{border-bottom:1px solid var(--line);}
.stat-band__grid{display:grid;grid-template-columns:repeat(3,1fr);}
.stat-band__grid .hero-stat{padding:clamp(32px,4vw,56px) var(--gut);border-right:1px solid var(--line);border-top:0;}
.stat-band__grid .hero-stat:last-child{border-right:0;}

/* =================================================================
   SERVICE v2 — qando風 全幅・交互の大きなロウ
   ================================================================= */
.svc-rows{border-top:1px solid var(--ink);}
.svc-rowx{
  display:grid;grid-template-columns:1.02fr 1fr;align-items:stretch;
  border-bottom:1px solid var(--line);min-height:clamp(360px,46vw,560px);
}
.svc-rowx__media{position:relative;overflow:hidden;background:var(--fill);}
.svc-rowx__media img{width:100%;height:100%;object-fit:cover;filter:contrast(1.02);
  transition:transform 1.2s var(--ease);}
.svc-rowx:hover .svc-rowx__media img{transform:scale(1.05);}
.svc-rowx__body{display:flex;flex-direction:column;justify-content:center;
  padding:clamp(40px,6vw,96px) clamp(28px,6vw,110px);}
.svc-rowx__no{font-family:var(--display);font-style:italic;font-weight:400;
  font-size:clamp(3rem,7vw,6rem);line-height:.9;color:var(--accent);}
.svc-rowx__en{font-family:var(--en);font-size:12px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ink-3);display:inline-block;margin:26px 0 0;padding-bottom:10px;
  border-bottom:1px solid var(--ink);}
.svc-rowx__title{font-family:var(--serif);font-weight:500;
  font-size:clamp(1.5rem,2.8vw,2.4rem);line-height:1.5;margin:18px 0 0;}
.svc-rowx__desc{color:var(--ink-2);font-size:14.5px;line-height:2.05;margin:20px 0 0;max-width:40ch;}
.svc-rowx .tlink{margin-top:32px;}
/* 交互レイアウト：偶数行は画像を右へ */
.svc-rowx:nth-child(even){grid-template-columns:1fr 1.02fr;}
.svc-rowx:nth-child(even) .svc-rowx__media{order:2;}
.svc-rowx:nth-child(even) .svc-rowx__body{order:1;}

/* =================================================================
   SERVICE v3 — KINTO風 シーンカード（4列・ホバーで画像だけズーム）
   ================================================================= */
.scene-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.5vw,26px);
  margin-top:clamp(30px,4vw,54px);}
.scene-card{position:relative;display:block;overflow:hidden;aspect-ratio:5/7;
  background:var(--fill);color:var(--paper);}
.scene-card__media{position:absolute;inset:0;overflow:hidden;}
.scene-card__media img{width:100%;height:100%;object-fit:cover;
  filter:contrast(1.02) brightness(.82);
  transform:scale(1.02);transition:transform 1.2s var(--ease),filter .6s var(--ease);}
/* 文字を読ませる暗幕（画像の明暗差を吸収） */
.scene-card::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(22,22,22,.30) 0%,rgba(22,22,22,.28) 45%,rgba(22,22,22,.54) 100%);
  transition:background .5s var(--ease);}
.scene-card__body{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:24px;}
.scene-card__title{font-family:var(--en);font-weight:500;letter-spacing:.08em;
  font-size:clamp(1.15rem,1.45vw,1.5rem);line-height:1.4;text-shadow:0 2px 18px rgba(0,0,0,.3);}
.scene-card__sub{margin-top:14px;font-size:12.5px;letter-spacing:.12em;line-height:1.7;
  color:color-mix(in srgb,var(--paper) 92%,transparent);text-shadow:0 2px 14px rgba(0,0,0,.32);}
.scene-card__more{margin-top:26px;font-family:var(--en);font-size:12px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;padding-bottom:6px;
  border-bottom:1px solid color-mix(in srgb,var(--paper) 55%,transparent);
  transition:border-color .4s var(--ease),letter-spacing .4s var(--ease);}
/* ホバー：画像だけがゆっくりズーム（KINTOと同じ）。文字・VIEW MOREは動かさない */
.scene-card:hover .scene-card__media img{transform:scale(1.09);}
.scene-card:hover::after{background:linear-gradient(180deg,rgba(22,22,22,.36) 0%,rgba(22,22,22,.34) 45%,rgba(22,22,22,.58) 100%);}
.scene-card:hover .scene-card__more{border-bottom-color:var(--paper);letter-spacing:.26em;}
@media(max-width:1100px){ .scene-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:560px){ .scene-grid{grid-template-columns:1fr;} .scene-card{aspect-ratio:4/3;} }

/* =================================================================
   レスポンシブ
   ================================================================= */
@media(max-width:1024px){
  .footer-top{grid-template-columns:1fr 1fr;gap:32px;}
  .footer-brand{grid-column:1 / -1;}
}
@media(max-width:900px){
  .process-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:820px){
  /* ナビをドロワーに */
  .nav-toggle{display:block;}
  .gnav{
    position:fixed;inset:0 0 0 auto;width:min(86vw,400px);
    flex-direction:column;align-items:flex-start;justify-content:center;gap:0;
    background:var(--paper);padding:90px var(--gut) 48px;margin:0;
    transform:translateX(101%);transition:transform .5s var(--ease);
    box-shadow:-20px 0 60px rgba(0,0,0,.12);overflow-y:auto;
  }
  .gnav-list{flex-direction:column;gap:0;width:100%;}
  .gnav-list li{width:100%;border-bottom:1px solid var(--line-2);}
  .gnav-list a{display:block;padding:18px 0;font-size:15px;}
  .gnav-list a::after{display:none;}
  .header-cta{flex-direction:column;width:100%;margin-top:30px;gap:12px;}
  .header-cta .btn{width:100%;justify-content:center;}
  /* ドロワー内は常に濃色（ヒーロー白文字ルールを打ち消す） */
  .site-header:not(.is-scrolled) .gnav-list a{color:var(--ink);text-shadow:none;}
  .site-header:not(.is-scrolled) .header-cta .btn{--bd:var(--ink);--fg:var(--ink);}
  .site-header:not(.is-scrolled) .header-cta .btn--solid{--bg:var(--ink);--fg:var(--paper);--bd:var(--ink);}
  /* ハンバーガーはヒーロー上（未スクロール）で白線・透過 */
  .site-header:not(.is-scrolled) .nav-toggle{background:transparent;border-color:rgba(255,255,255,.6);}
  .site-header:not(.is-scrolled) .nav-toggle span,
  .site-header:not(.is-scrolled) .nav-toggle span::before,
  .site-header:not(.is-scrolled) .nav-toggle span::after{background:#fff;}
  body.nav-open .nav-toggle{background:var(--paper);border-color:var(--line);}
  body.nav-open .site-header:not(.is-scrolled) .nav-toggle span::before,
  body.nav-open .site-header:not(.is-scrolled) .nav-toggle span::after{background:var(--ink);}
  body.nav-open .gnav{transform:translateX(0);}
  body.nav-open{overflow:hidden;}
  body.nav-open .nav-toggle span{background:transparent;}
  body.nav-open .nav-toggle span::before{top:0;transform:rotate(45deg);}
  body.nav-open .nav-toggle span::after{top:0;transform:rotate(-45deg);}

  .hero-grid{grid-template-columns:1fr;gap:36px;}
  .hero-figure{order:-1;}
  .hero-figure .vlabel{display:none;}
  .issue-grid,.voice-grid{grid-template-columns:1fr;gap:32px;}
  .proof-grid,.works-grid,.journal-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:560px){
  body{font-size:14.5px;}
  .proof-grid,.works-grid,.journal-grid,.process-grid{grid-template-columns:1fr;}
  .hero-meta{grid-template-columns:1fr;}
  .hero-stat{border-right:0;border-bottom:1px solid var(--line);}
  .hero-stat:last-child{border-bottom:0;}
  .svc-item{grid-template-columns:auto 1fr;gap:14px 18px;}
  .svc-arw{display:none;}
  .sec-head__top{flex-wrap:wrap;gap:10px;}
  .sec-head__top .kicker{margin-left:0;width:100%;}
}

/* ---- v2 components responsive ---- */
@media(max-width:860px){
  .svc-rowx,.svc-rowx:nth-child(even){grid-template-columns:1fr;}
  .svc-rowx__media{order:-1 !important;aspect-ratio:16/10;min-height:0;}
  .svc-rowx__body{order:0 !important;}
  .stat-band__grid{grid-template-columns:1fr;}
  .stat-band__grid .hero-stat{border-right:0;border-bottom:1px solid var(--line);}
  .stat-band__grid .hero-stat:last-child{border-bottom:0;}
}
@media(max-width:560px){
  .hero-full{height:92svh;}
  /* h1 30px / hero-sub 13px は PC/SP 共通（コメント#4692/#4693） */
}