/* =================================================================
   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;         /* 画像プレースホルダ地 */

  --serif:"Noto Serif JP",serif;             /* 見出し＝明朝で雑誌感 */
  --sans:"Noto Sans JP",sans-serif;          /* 本文 */
  --en:"Outfit","Helvetica Neue",sans-serif; /* ラベル・ナビ・英字 */
  --display:"Playfair Display",serif;        /* 大きな英数字・装飾 */

  --maxw:1280px;
  --gut:clamp(20px,5vw,72px);   /* 左右マージン（雑誌的に広め） */
  --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-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);}
.section{padding-block:clamp(64px,11vw,150px);}
.section--tint{background:var(--paper-2);}
.section--line{border-top:1px solid var(--line);}

/* ---------- 共通：エディトリアルな見出し系 ---------- */
.kicker{
  font-family:var(--en);font-size:11px;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(--ink);}
.kicker--center::before{display:none;}

.sec-no{
  font-family:var(--display);font-size:13px;font-style:italic;
  color:var(--ink-3);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:11px;}
.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:grayscale(1) 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:10px;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;}

/* =================================================================
   HEADER
   ================================================================= */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  background:color-mix(in srgb,var(--paper) 86%,transparent);
  backdrop-filter:blur(8px);
  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);}
.header-inner{
  max-width:var(--maxw);margin:0 auto;padding:18px var(--gut);
  display:flex;align-items:center;gap:24px;
}
.logo img{height:34px;width:auto;}
.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:12.5px;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;}

/* =================================================================
   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:8px;background:var(--ink);opacity:.1;}
.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:11px;
  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:10.5px;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;}

/* =================================================================
   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:11px;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:10px;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;}

/* =================================================================
   WORKS — 成果つきマガジングリッド
   ================================================================= */
.works-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,44px);}
.work-card .media{margin-bottom:18px;}
.work-card .work-cat{font-family:var(--en);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3);}
.work-card h3{font-family:var(--serif);font-size:1.2rem;margin:10px 0 14px;}
.work-metrics{display:flex;gap:26px;border-top:1px solid var(--line);padding-top:14px;}
.work-metrics div b{font-family:var(--display);font-size:1.5rem;display:block;line-height:1;}
.work-metrics div span{font-family:var(--en);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);display:block;margin-top:8px;}

/* =================================================================
   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:11px;
  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:10.5px;
  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:grayscale(1) 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:11px;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:11px;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:10px;
  letter-spacing:.1em;transition:.35s var(--ease);}
.footer-sns a:hover{background:var(--paper);color:var(--ink);border-color:var(--paper);}

/* =================================================================
   スクロール演出（共通）
   ================================================================= */
.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;}
}

/* =================================================================
   レスポンシブ
   ================================================================= */
@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;}
  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%;}
}