/* ============================================================
   ヒーロー — スクショ（2560×1440・16:9）からの実測値で再現
   実測メモ:
     背景          #F3F2F0（243,242,240）※素材画像の紙色と同一。ずれると画像が矩形に見える
     製図枠        左右 37px / 上下 32px インセット、1px、#BCBBBB
     トンボ        枠の四隅と各辺の中央に十字マーク（左中央は y=715 で確認）
     ロゴ/ナビ     ピル上端 y=147・高さ 81px
     キッカー      y=466〜499（文字高 34px）、前置き罫は x=154 から
     見出し        y=520〜860（2行・行送り 170px）、「新時代」の黒ベタ 678×150px
     本文          y=950〜1119（3行・行送り 57px）
     ボタン        y=1164〜1295（高さ 132px）、枠線ボタン x=154〜590 相当、塗り #302F32
     マイク画像    被写体 x=1150〜2445 / y=160〜1321
   すべて 2560px 基準。1px = 0.0390625vw で vw に換算している
   ============================================================ */

.hero{
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;        /* スクショのコンテンツ領域と同じ比率 */
  background:var(--paper);
  overflow:hidden;
}

/* ---- 製図枠とトンボ ---- */
.hero .frame{
  position:absolute;
  left:1.445vw; right:1.484vw; top:1.25vw; bottom:1.211vw;
  border:1px solid var(--rule);
  pointer-events:none;
}
/* 各辺の中央に伸びる十字トンボ（枠線をまたいで内外へ出る） */
.hero .frame::before,
.hero .frame::after{
  content:""; position:absolute; background:var(--rule);
}
.hero .frame::before{                 /* 上辺中央の縦トンボ */
  left:calc(50% - 0.5px); top:-1.25vw; width:1px; height:2.6vw;
}
.hero .frame::after{                  /* 左辺中央の横トンボ */
  top:calc(50% - 0.5px); left:-1.445vw; height:1px; width:2.9vw;
}

/* ---- ヘッダー ----
   ロゴ・ナビは素置き（座布団を敷かない）。
   画像に重なって読めなくなるのを防ぐため、個別のピルではなく
   ヘッダー帯そのものを紙色にする。全幅の帯は製図枠と同じ「構造の線」なので
   図面の語彙と両立する。下辺の1本罫が枠の延長として効く。 */
.hero .nav{
  position:fixed; top:0; left:0; right:0;      /* スクロールしても追従する */
  display:flex; align-items:center;
  padding:1.45vw 5.74vw;
  background:var(--ink);                       /* 墨の帯。座布団は敷かない */
  z-index:100;
}
.hero .nav .logo{
  font-family:var(--mono); font-size:1.38vw; font-weight:700; letter-spacing:.14em;
  color:#EDEAE3;
}
.hero .nav ul{ list-style:none; display:flex; gap:2.2vw; margin-left:auto; }
.hero .nav a{
  display:block; text-decoration:none; color:#EDEAE3;
  font-family:var(--serif-en); font-size:1.25vw; letter-spacing:.05em;
  padding-bottom:.2vw; border-bottom:1px solid transparent;
  transition:border-color .2s, color .2s;
}
.hero .nav a:hover{ color:#fff; border-bottom-color:#fff; }
.hero .nav a:focus-visible{ outline:2px solid #EDEAE3; outline-offset:3px; }

/* ---- マイク画像 ----
   素材の紙色 rgb(242,240,238) と背景 rgb(243,242,240) がほぼ同値なので、
   合成モードを掛けずにそのまま置く（multiply を掛けると紙が沈んで矩形が出る）。
   被写体が実測位置 x=1150〜2445 / y=160〜1321 に載るよう倍率と座標を算出した */
.hero .heroimg{
  /* テンプレートマッチ（マイク上部ジョイントを照合・相関0.87）で
     倍率1.55・幅101.23vw・left -0.82vw / top -0.35vw と判明。
     素材は画面いっぱいに敷かれている */
  position:absolute; left:-0.82vw; top:-0.35vw; width:101.23vw;
}
.hero .heroimg img{ width:100%; height:auto; }

/* ---- コピー ---- */
.hero .copy{ position:absolute; left:6.02vw; top:18.2vw; z-index:10; }

.hero .kicker{
  display:flex; align-items:center; gap:1.05vw;
  font-size:1.33vw; letter-spacing:.42em; color:var(--ink);
  margin-bottom:.8vw;
}
.hero .kicker::before{ content:""; width:5.1vw; height:1px; background:var(--ink); }

.hero h1{
  /* 実測 132px(5.16vw)。コピー変更で2行目が11文字に伸びたため、
     マイク被写体（x=1472px〜）に掛からない幅に収まるよう縮めた（2026-08-09） */
  font-size:4.4vw;
  line-height:1.29;              /* 実測 170/132 */
  letter-spacing:.01em;
  font-weight:400;               /* Zen Antique Soft は単一ウェイト。太らせない */
  margin-left:-1.02vw;           /* 見出しだけ左へ出る（実測 121px vs 154px） */
}
/* 「新時代」の反転ベタ ─ 実測 150px高 に対し白文字の字高139px。
   上4px・下7px しか余白がない。インライン背景のままだと
   アセンダ分まで塗って上に大きな空きが出るので inline-block で切り詰める */
/* 実測(見本): ベタ528x150px・白文字の字高139px・上余白4px/下余白7px/左右29px。
   ベタは文字にほぼ張り付いており、上下の比は 4:7 でやや下寄り。
   line-height を 1 未満にして箱を字面まで詰め、下側だけ padding で戻す */
.hero h1 .inv{
  display:inline-block;
  line-height:.855;              /* 箱を字面まで縮め、文字を9.6px引き上げる */
  padding:0 .19em .117em;        /* 下15px戻す → 上3.4px / 下6px */
  background:#000; color:#fff;   /* 実測: 純黒 */
}

.hero .desc{
  margin-top:2.55vw;
  font-size:1.17vw; line-height:1.9; color:var(--ink);
}

/* スマホでだけ効かせる改行（PCでは1行に繋げる） */
.br-sp{ display:none; }

.hero .btns{ margin-top:1.72vw; display:flex; gap:2.2vw; }
.hero .btns a{
  display:inline-flex; align-items:center; justify-content:center;
  width:17.05vw; height:5.16vw; border-radius:.47vw;
  font-size:1.25vw; text-decoration:none;
  transition:background .2s, color .2s;
}
.hero .btns .ghost{ border:1px solid var(--ink); color:var(--ink); }
.hero .btns .ghost:hover{ background:var(--ink); color:var(--paper); }
.hero .btns .solid{ background:var(--btn); color:#fff; }
.hero .btns .solid:hover{ background:var(--ink); }

/* ---- スマホ ---- */
@media (max-width:900px){
  .hero{ aspect-ratio:auto; padding:8vw 0 14vw; }
  .hero .frame{ left:4vw; right:4vw; top:4vw; bottom:4vw; }
  .hero .frame::before{ top:-4vw; height:8vw; }
  .hero .frame::after{ left:-4vw; width:8vw; }
  .hero .nav{ position:static; flex-direction:column; gap:3vw; padding:6vw 7vw; margin-bottom:6vw;
              background:var(--ink); }   /* 縦積みで背が高いので固定にしない */
  .hero .nav .logo{ font-size:5vw; }
  .hero .nav ul{ margin-left:0; flex-wrap:wrap; justify-content:center; gap:2vw; }
  .hero .nav a{ font-size:3.2vw; }
  .hero .heroimg{ position:static; width:100%; margin-bottom:2vw; }
  .hero .copy{ position:static; padding:0 7vw; }
  /* 「Podcastでつくる」が1行に収まる上限が約10.7vw。余裕を見て10vw。
     2行目は「選ばれる／マーケティング」に割って、反転ベタを独立させる */
  .hero h1{ font-size:10vw; margin-left:0; }
  .br-sp{ display:inline; }
  .hero .kicker{ font-size:3.4vw; }
  .hero .kicker::before{ width:12vw; }
  .hero .desc{ font-size:3.5vw; margin-top:5vw; }
  .hero .desc br{ display:none; }   /* PC用の改行位置は狭い画面で孤立行を作るので自然折り返しに戻す */
  .hero .btns{ flex-direction:column; gap:3vw; margin-top:7vw; }
  .hero .btns a{ width:100%; height:13vw; font-size:3.8vw; }
}