/*
Theme Name: FIELDNOTES
Theme URI: https://fieldnotes.j-wave.co.jp/
Author: Lashisa Inc.
Description: 皆藤愛子のFIELDNOTES（J-WAVE Podcast）専用テーマ
Version: 0.8.8
Requires at least: 6.0
Requires PHP: 8.1
License: GPL v2 or later
Text Domain: fieldnotes
*/

/* ============================================================
   数値の出どころ

   トップページのデザインカンプ（667x1569px で書き出したPNG）を
   ピクセル解析した実測値に基づく。コメント中の「%」は
   すべて「ページ全幅に対する比率」。px値はカンプの設計幅を
   1280px と推定した換算値（1280/667 = 1.919 倍）。

   設計幅の推定根拠:
     グローバルナビ「番組について」5文字 = 40px → 8.0px/字
     和文は1文字1emなので 8.0px が実寸のフォントサイズ相当
     一般的なナビの15pxに合わせると 1.875倍
     About本文 57文字 = 501px → 8.79px/字 → 16.9px相当
     → 設計幅 1250〜1280px と判断
   ============================================================ */

/* ============================================
   Design tokens
   ============================================ */
:root{
  --c-blue:        #0B4FA3;  /* メインブルー（ロゴ・リンク） */
  --c-blue-sub:    #3D66A9;  /* サブブルー（見出し・詳しく見る） */
  --c-yellow:      #E6C700;  /* アクセントイエロー */
  --c-gray:        #52606D;  /* 本文・和文 */
  --c-navy:        #1E73AD;  /* 配信バー 実測 #1E73AD */
  --c-name:        #23384F;  /* ゲスト氏名 実測 #2E4766（9px字のため濃いめに補正） */
  --c-date:        #C08544;  /* 配信日 実測 #CF9C65（5px字のため濃いめに補正） */
  --c-sub:         #93A5B8;  /* 見出しの和文サブ 実測 #B4C2D2 */
  --c-rule:        #EDF4FA;  /* ノートの横罫線 実測 #EDF4FA */
  --c-bind:        #F2CFCB;  /* ノートの綴じ線 実測 #F2CFCB */
  --c-hole:        #E1E9F2;  /* パンチ穴 */
  --c-tagbg:       #F5C93D;  /* 「番組メモ」タグ地 実測 #F5C93D */
  --c-bg-blue:     #EBF3F9;  /* ページ地色 実測 #EBF3F9〜#EFF6FC */
  --c-line:        #C1D3E5;  /* ボタン枠 実測 #C1D3E5 */
  --c-white:       #FFFFFF;

  /* ピン: 10px の単色円なので中心画素をそのまま採用できる */
  --pin-1: #F47261;
  --pin-2: #72ADE7;
  --pin-3: #F5C534;
  /* マスキングテープ（半透明） */
  --tape-y: rgba(240,205,95,.70);
  --tape-b: rgba(150,182,216,.70);

  --font-base:   "Noto Sans JP", system-ui, sans-serif;
  --font-script: "Caveat", "Segoe Script", "Bradley Hand", cursive;
  /* Field Note の手書き和文。Google Fonts / SIL OFL */
  --font-hand:   "Zen Kurenaido", "Noto Sans JP", sans-serif;

  /* Field Note カードの4色。1〜3はPick upのピンと共通、4色目のみ新規 */
  --note-1: #F47261;  --note-1-bg: #FEEEEC;
  --note-2: #72ADE7;  --note-2-bg: #EEF5FC;
  --note-3: #F5C534;  --note-3-bg: #FEF8E7;
  --note-4: #7CC0A8;  --note-4-bg: #EFF7F5;

  /* カード幅 実測 86.4%（About/Navigator/Pickup 全体）
     ヘッダーと配信バーはカンプ上 84.6% だが 1.8% の差は
     Canva上の配置ずれと判断し、全セクションで統一する */
  --wrap-ratio: 86.4%;
  --wrap-max:   1240px;

  --header-h: 65px;   /* 実測 5.10% × 1280 = 65px */

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ============================================
   Base
   ============================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* 地色はカンプ上わずかに縦グラデがかかっている
   実測 y304 #EFF6FC / y620 #F5F9FC / y960 #F1F6FC / y1300 #EBF3F9 */
body{
  margin:0;
  font-family:var(--font-base);
  color:var(--c-gray);
  background:var(--c-bg-blue);
  background-image:linear-gradient(180deg,#EFF6FC 0%,#F5F9FC 24%,#F1F6FC 47%,var(--c-bg-blue) 78%);
  background-repeat:no-repeat;
  background-size:100% 100%;
  line-height:1.8;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--c-yellow);outline-offset:3px}

.wrap{width:min(100% - 32px, var(--wrap-ratio), var(--wrap-max));margin-inline:auto}
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--c-blue);color:#fff;padding:10px 18px;
}
.skip-link:focus{left:0}

/* 管理バーのぶんだけ、固定ヘッダーの吸着位置を下げる。
   管理バーはWordPress側で
     〜600px  : position:absolute（スクロールで流れて消える）
     〜782px  : position:fixed 高さ46px
     783px〜  : position:fixed 高さ32px
   となっている。600px以下で 46px 下げたままにすると、
   管理バーが流れたあともヘッダーが46px下に浮き、
   その隙間から本文が覗いてしまう。ログイン中だけの症状。 */
.admin-bar .site-header{top:32px}
@media screen and (max-width:782px){
  .admin-bar .site-header{top:46px}
}
@media screen and (max-width:600px){
  .admin-bar .site-header{top:0}
}

/* ============================================
   Header
   実測: 高さ5.10%（65px）、ロゴ x37-130（幅13.9% 高さ3.0%）
   ============================================ */
.site-header{
  position:sticky;top:0;z-index:50;
  height:var(--header-h);
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(11,79,163,.07);
}
.site-header__inner{
  height:100%;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
/* 番組ロゴ ＋ 局ロゴ。区切り線を挟んで横並びにする */
.site-brand{display:flex;align-items:center;gap:clamp(10px,1.1vw,15px);min-width:0}
.site-logo{display:inline-flex;align-items:center;flex:none}
.site-logo img{width:auto;height:clamp(28px,2.95vw,38px)}
.site-brand__station{
  display:inline-flex;align-items:center;flex:none;
  padding-left:clamp(10px,1.1vw,15px);
  border-left:1px solid rgba(11,79,163,.16);
}
.site-brand__station img{width:auto;height:clamp(11px,1.17vw,15px)}
.gnav{display:flex;align-items:center;gap:clamp(16px,1.7vw,26px)}
.gnav__list{display:flex;gap:clamp(16px,1.7vw,26px);list-style:none;margin:0;padding:0}
/* ハンバーガーは900px以下でのみ出す */
.gnav-toggle{display:none}
/* 実測: ナビ和文 8.0px/字 → 設計15px */
.gnav__list a{
  font-size:clamp(13px,1.17vw,15px);font-weight:500;color:var(--c-gray);
  padding:6px 2px;position:relative;display:inline-block;
  transition:color .2s var(--ease);
}
.gnav__list a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--c-yellow);transform:scaleX(0);transform-origin:left;
  transition:transform .25s var(--ease);
}
.gnav__list a:hover{color:var(--c-blue)}
.gnav__list a:hover::after{transform:scaleX(1)}
.gnav__list .current-menu-item > a{color:var(--c-blue)}

/* 実測: 聴くボタン x564-600 = 幅5.4% */
.btn-listen{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--c-blue);color:#fff;
  font-size:clamp(12px,1.09vw,14px);font-weight:700;
  padding:.62em 1.5em;border-radius:999px;white-space:nowrap;
  transition:background .2s var(--ease), transform .2s var(--ease);
}
.btn-listen::after{content:"✦";font-size:.85em}
.btn-listen:hover{background:#0a4489;transform:translateY(-1px)}
.btn-listen--ghost{background:transparent;color:var(--c-blue);box-shadow:inset 0 0 0 1.5px var(--c-blue)}
.btn-listen--ghost:hover{background:var(--c-bg-blue);color:var(--c-blue)}

/* 404・検索結果 */
.notfound,.searchpage{padding-block:40px 100px}
.notfound__links{display:flex;justify-content:center;flex-wrap:wrap;gap:14px;margin-top:8px}
.searchpage__form{display:flex;justify-content:center;gap:8px;margin:0 0 40px}
.searchpage__form input[type="search"]{
  flex:0 1 340px;padding:.7em 1em;border:1.5px solid var(--c-line);border-radius:999px;
  font-size:15px;font-family:inherit;
}

/* ============================================
   Hero
   実測（ページ全幅比）
     高さ           39.3%
     内容ブロック    18.7% 〜 81.7%（幅63.0%・中央寄せ）
       ├ ロゴ列     18.9% 〜 60.0%（幅41.1%）
       ├ 隙間       3.0%
       └ 人物       63.0% 〜 81.7%（幅18.7%）
     下端の白帯     1.2%（8px）: 人物の足元がここまで伸びる
   背景は縦クリーム・横ブルーの2軸グラデ。CSSの多層重ねだと
   中間で色相が交差して虹状の帯が出るため 32x12px の画像に落として
   引き伸ばしている。カンプ背景との平均色差 0.66/ch（旧版は1.36）。
   ============================================ */
.hero{
  position:relative;
  overflow:hidden;
  background-color:#E1E8E6;
  /* ヒーローの総高40.5%のうち、下端1.2%（＝8/262+8）を白帯にする */
  /* 画像はdata URIで直接埋め込む。別ファイル参照だとCSSだけ更新されても
     ブラウザが古い画像を使い続ける事故が起きるため（過去に発生済み）。
     元ファイルは assets/img/hero-bg.png に残してある。 */
  background-image:
    linear-gradient(to top, #fff 0, #fff 2.96%, rgba(255,255,255,0) 2.96%),
    url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAMCAIAAACMdijuAAABtUlEQVR4nE2T0YrcWAxET8nuJgub///EvAQCWZidbfvq5EF27whjg3xVJVVd5eevH7KRzRREAIEoKHvz7cqEln+PPpZKQ2tr96nK1vLO6/XeYYEobFC5CcAgnkOacLYfR6++TgRiZ33QC4Gq+qtT0QAhBNwzBICSbbCnfbQ4O095fB79efbgChlIP+lDcgKs8Kp8C4S0zqEdV9AQVDIEiCNYlx+/z++v1SHB0MUU25y1Bemeuk4wQenMoHs8zRY1W2AofH9JOPBFnsUZVvA9ZUViybKuvgrGzCLaZA+LQb9avlS6o8v+vv3z+/z79uaakiCNDtqVCp3YNNZ4gCu5BNEt8UbwcgIf6Wf2k30O3iGRoFTdGRLouhQEdjh1I+ClXt719xDQz7zWqlH4/t9jteGkL/S07FPbRZkdOyM628w9Gt4c89Szzld/YQeo5H+1JIF4UHuZkMQek8k2nSvECPmycQSorEcd//WzLkoylw+BR7GGO6Zw9kqAPSw12dSgbEQsUm/0iUcd1225JJIMEgmlYBKSxsbRYY+LOBPOBo0lEaivhmQcfEfCaq8pL7luk5KxDv8A9GhaUWrUUD4AAAAASUVORK5CYII=");
  background-size:100% 100%, 100% 100%;
  background-repeat:no-repeat;
}
.hero__inner{
  position:relative;z-index:2;
  display:grid;
  /* 内容ブロック63.0%の内訳 ロゴ65.3 : 隙間4.8 : 人物29.7 */
  grid-template-columns:minmax(0,65.3fr) minmax(0,29.7fr);
  column-gap:4.8%;
  align-items:end;
  width:min(100% - 32px, 63.0%, 900px);
  margin-inline:auto;
  /* 色場39.3% ＋ 下端の白帯1.2% = 40.5% */
  min-height:clamp(340px, 40.5vw, 640px);
  padding-block:clamp(20px,3.5vw,45px) 0;
}
.hero__body{align-self:center;padding-bottom:4%}

/* 支給の局ロゴ（398:46）に差し替え。以前はNoto Sans JPのテキストで
   幅だけ合わせていたが、カンプはこのロゴそのものだった。
   実測: 幅109px＝ページ全幅の16.34%。.hero__body は全幅の41.22%なので
   その39.6%にあたる。カンプの色は #000000。 */
.hero__station{margin:0 0 1.1em;line-height:0}
.hero__station img{width:39.6%;min-width:96px;height:auto}
/* 実測は41.1%（ロゴ列いっぱい）。FBで「窮屈」との指摘があり、
   ロゴ列に対して90%＝ページ全幅の37.0%に落としている。
   → カンプからの意図的な逸脱 */
.hero__logo{width:90%;height:auto}
/* 実測: 2行目「見えてくる、時代の息づかい。」14文字 = 212px
         → 字送り15.1px/字。letter-spacing .06em を差し引くと
           1文字あたり14.3px（設計27.4px）
         行ピッチ22px(3.30%) → line-height 22/14.3 = 1.54
         ロゴ下端からコピー1行目まで23px */
.hero__copy{
  /* FB反映: ロゴ下端との間隔を23px→40px、字を27.4px→25.0pxに */
  margin:1.6em 0 0;
  font-size:clamp(14px,1.95vw,26px);
  font-weight:500;
  line-height:1.60;
  letter-spacing:.06em;
  color:var(--c-blue);
}
.hero__copy span{display:block}
.hero__copy em{
  font-style:normal;font-weight:700;
  color:var(--c-yellow);
  text-shadow:0 1px 0 rgba(255,255,255,.65);
}

/* 人物は下端合わせ。カンプでは白帯の下端まで届く */
.hero__portrait{position:relative;align-self:end;margin-bottom:0}
.hero__portrait picture{display:block}
.hero__portrait img{
  width:100%;height:auto;margin-inline:auto;
  filter:drop-shadow(0 0 14px rgba(255,255,255,.55));
}

/* ============================================
   配信プラットフォーム
   実測: 濃紺 #1E73AD の角丸バー、幅84.6%、高さ5.10%
         ヒーロー白帯の下端から2.85%（19px）下
         バッジ 幅13.5% × 高さ4.05%、間隔0.9%、右端はバー右端-4px
   ============================================ */
.platforms{position:relative;z-index:2;padding-block:2.85% 0}
/* 実測: バー高さ34px ＝ バッジ27px ＋ 上下パディング3.5px（バー幅の0.62%） */
.platforms__inner{
  display:flex;align-items:center;flex-wrap:nowrap;
  background:var(--c-navy);
  border-radius:999px;
  padding:.62%;
  box-shadow:0 6px 20px rgba(11,79,163,.16);
}
/* 実測: ラベルはバー左端〜バッジ左端の余白のほぼ中央に置かれている */
.platforms__label{
  display:inline-flex;align-items:center;gap:.7em;
  flex:1 1 auto;justify-content:center;
  font-size:clamp(11px,1.02vw,13px);font-weight:700;letter-spacing:.04em;
  color:#fff;white-space:nowrap;margin:0;
}
.platforms__label .tag{
  background:rgba(255,255,255,.22);
  border-radius:999px;padding:.25em .9em;font-size:.85em;font-weight:500;
}
.platforms__label b{color:var(--c-yellow);font-weight:700}
/* 実測: バッジ幅はバー幅の16.0%（90/563）、間隔1.1%、右端はバー右端に接する
   → リスト全体はバー幅の 16*4 + 1.1*3 = 67.3%
      リスト内のgapは 1.1/67.3 = 1.63% */
.platforms__list{
  display:flex;flex-wrap:nowrap;justify-content:flex-end;gap:1.63%;
  flex:0 0 67.3%;
  list-style:none;margin:0;padding:0;
}
/* 公式バッジ画像を受領するまでの代替表示。
   ブランドカラーの角丸ボタンで面積と比率（100:30）だけ合わせている。
   バッジ画像が入ったら .platform-link--img 側が使われる。 */
.platforms__list li{display:flex;flex:1 1 0;min-width:0}
.platform-link{
  display:inline-flex;align-items:center;justify-content:center;gap:.4em;
  width:100%;aspect-ratio:100/30;
  font-size:clamp(9px,.86vw,11px);font-weight:700;letter-spacing:.01em;
  color:#fff;
  background:var(--brand,#333);
  border:1px solid rgba(255,255,255,.22);
  border-radius:5px;
  padding:0 .8em;text-align:center;line-height:1.2;
  transition:filter .2s var(--ease), transform .2s var(--ease);
}
.platform-link:hover{filter:brightness(1.18);transform:translateY(-2px)}
.platform-link--img{background:none;border:0;padding:0;aspect-ratio:auto}
.platform-link--img img{width:100%;height:auto}

/* ============================================
   Footer
   ============================================ */
.site-footer{background:#E4EEF6;padding-block:40px;margin-top:5.2%}
.site-footer__inner{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:16px;
}
.site-footer small{font-size:12px;letter-spacing:.04em}

/* ============================================
   共通パーツ
   ============================================ */
/* 実測: 「NAVIGATOR」の幅47px（設計90px）＝12.5px相当、字高6px
         色は実測 #A0BBD9（6px字のためやや濃いめに補正） */
.eyebrow{
  font-size:clamp(10px,.94vw,12px);font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:#8FAAC9;margin:0 0 .55em;
}

/* 手書き風の英字見出し
   実測: 英字の高さ 2.40%（16px＝設計31px）
         英字下端→和文サブ上端 6px、和文サブ 1.35%
         和文サブ下端→カード上端 3.00%（20px）
         装飾（弧＋星）幅 6.6%（44px）を語の右肩に重ねる
         装飾は支給素材の deco-star.svg（206.25:168.75）そのもの */
.script-head{text-align:center;margin:0 0 3.0%;font-weight:400;line-height:1.05}
.script-head__en{
  position:relative;display:inline-block;
  font-family:var(--font-script);
  font-size:clamp(30px,3.6vw,46px);
  letter-spacing:.01em;color:var(--c-blue-sub);
  padding-right:.5em;
}
.script-head__en::after{
  content:"";position:absolute;
  right:-.55em;top:-.42em;
  width:1.85em;height:1.51em;
  /* 支給素材 deco-star.svg をdata URIで埋め込み。
     別ファイル参照にすると、白い背景板を除去する前の版が
     ブラウザキャッシュに残って白い箱が出る事故が起きる。 */
  background:url("data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgZm9jdXNhYmxlPSJmYWxzZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmlld0JveD0iMCAwIDIwNi4yNSAxNjguNzUiPjxkZWZzPjxjbGlwUGF0aCBpZD0iMmQwZTY4N2MyZSI+PHBhdGggZD0iTSAwIDAuMTggTCAyMDUuNTA0IDAuMTggTCAyMDUuNTA0IDE2OC4zMiBMIDAgMTY4LjMyIFogTSAwIDAuMTggIiBjbGlwLXJ1bGU9Im5vbnplcm8iLz48L2NsaXBQYXRoPjxjbGlwUGF0aCBpZD0iOTRlMTY0ZTZiYSI+PHBhdGggZD0iTSAxNTYuOTUzIDExOS4zNzUgTCAyMDUuNDk2IDExOS4zNzUgTCAyMDUuNDk2IDE2Ny45MTggTCAxNTYuOTUzIDE2Ny45MTggWiBNIDE1Ni45NTMgMTE5LjM3NSAiIGNsaXAtcnVsZT0ibm9uemVybyIvPjwvY2xpcFBhdGg+PGNsaXBQYXRoIGlkPSI0ZjQ3MDM3YWRjIj48cGF0aCBkPSJNIDE4MS4xMzMgMTE5LjM3NSBDIDE3NS40MSAxMzMuMTkxIDE3MC43NyAxMzcuODMyIDE1Ni45NTMgMTQzLjU1NSBDIDE3MC43NyAxNDkuMjczIDE3NS40MSAxNTMuOTE0IDE4MS4xMzMgMTY3LjczIEMgMTg2Ljg1NSAxNTMuOTE0IDE5MS40OTIgMTQ5LjI3MyAyMDUuMzA5IDE0My41NTUgQyAxOTEuNDkyIDEzNy44MzIgMTg2Ljg1NSAxMzMuMTkxIDE4MS4xMzMgMTE5LjM3NSBaIE0gMTgxLjEzMyAxMTkuMzc1ICIgY2xpcC1ydWxlPSJub256ZXJvIi8+PC9jbGlwUGF0aD48Y2xpcFBhdGggaWQ9IjgzMWEyNzNmZjQiPjxwYXRoIGQ9Ik0gMC45NTMgMC4zNzUgTCA0OS40MTQgMC4zNzUgTCA0OS40MTQgNDguODEyIEwgMC45NTMgNDguODEyIFogTSAwLjk1MyAwLjM3NSAiIGNsaXAtcnVsZT0ibm9uemVybyIvPjwvY2xpcFBhdGg+PGNsaXBQYXRoIGlkPSJiN2E4ZDM1OWIyIj48cGF0aCBkPSJNIDI1LjEzMyAwLjM3NSBDIDE5LjQxIDE0LjE5MSAxNC43NyAxOC44MzIgMC45NTMgMjQuNTU1IEMgMTQuNzcgMzAuMjczIDE5LjQxIDM0LjkxNCAyNS4xMzMgNDguNzMgQyAzMC44NTUgMzQuOTE0IDM1LjQ5MiAzMC4yNzMgNDkuMzA5IDI0LjU1NSBDIDM1LjQ5MiAxOC44MzIgMzAuODU1IDE0LjE5MSAyNS4xMzMgMC4zNzUgWiBNIDI1LjEzMyAwLjM3NSAiIGNsaXAtcnVsZT0ibm9uemVybyIvPjwvY2xpcFBhdGg+PGNsaXBQYXRoIGlkPSI0NzAyNDI1ZmUzIj48cmVjdCB4PSIwIiB3aWR0aD0iNTAiIHk9IjAiIGhlaWdodD0iNDkiLz48L2NsaXBQYXRoPjxjbGlwUGF0aCBpZD0iNWJlODUxYjcyNSI+PHBhdGggZD0iTSAwIDAuMTggTCAxODMgMC4xOCBMIDE4MyAxMTMgTCAwIDExMyBaIE0gMCAwLjE4ICIgY2xpcC1ydWxlPSJub256ZXJvIi8+PC9jbGlwUGF0aD48L2RlZnM+PGcgY2xpcC1wYXRoPSJ1cmwoIzJkMGU2ODdjMmUpIj48L2c+PGcgY2xpcC1wYXRoPSJ1cmwoIzk0ZTE2NGU2YmEpIj48ZyBjbGlwLXBhdGg9InVybCgjNGY0NzAzN2FkYykiPjxnIHRyYW5zZm9ybT0ibWF0cml4KDEsIDAsIDAsIDEsIDE1NiwgMTE5KSI+PGcgY2xpcC1wYXRoPSJ1cmwoIzQ3MDI0MjVmZTMpIj48ZyBjbGlwLXBhdGg9InVybCgjODMxYTI3M2ZmNCkiPjxnIGNsaXAtcGF0aD0idXJsKCNiN2E4ZDM1OWIyKSI+PHBhdGggZmlsbD0iI2U2YzcwMCIgZD0iTSAwLjk1MyAwLjM3NSBMIDQ5LjMwOSAwLjM3NSBMIDQ5LjMwOSA0OC43MyBMIDAuOTUzIDQ4LjczIFogTSAwLjk1MyAwLjM3NSAiIGZpbGwtb3BhY2l0eT0iMSIgZmlsbC1ydWxlPSJub256ZXJvIi8+PC9nPjwvZz48L2c+PC9nPjwvZz48L2c+PGcgY2xpcC1wYXRoPSJ1cmwoIzViZTg1MWI3MjUpIj48cGF0aCBzdHJva2UtbGluZWNhcD0icm91bmQiIHRyYW5zZm9ybT0ibWF0cml4KDAuNzA1LCAwLCAwLCAwLjcwNiwgMi4yMTIsIDg0LjU5MSkiIGZpbGw9Im5vbmUiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGQ9Ik0gLTAuMDAyIC03OS40NTkgQyAyNi44MTUgLTEwMi40NyA2MS42NzEgLTExNi4zNzkgOTkuNzc3IC0xMTYuMzc5IEMgMTg0LjQzOSAtMTE2LjM3OSAyNTMuMDcxIC00Ny43NDQgMjUzLjA3MSAzNi45MTggIiBzdHJva2U9IiNlNmM3MDAiIHN0cm9rZS13aWR0aD0iNi4yNSIgc3Ryb2tlLW9wYWNpdHk9IjEiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIvPjwvZz48L3N2Zz4=") no-repeat center/contain;
  pointer-events:none;
}
.script-head__ja{
  display:block;margin-top:.55em;
  font-family:var(--font-base);
  font-size:clamp(10px,.94vw,12px);font-weight:400;letter-spacing:.2em;
  color:var(--c-sub);
}

.breadcrumb{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  padding-block:20px;font-size:12px;color:var(--c-gray);
}
.breadcrumb a{color:var(--c-blue-sub)}
.breadcrumb a:hover{text-decoration:underline}
.breadcrumb span[aria-current]{opacity:.7}

/* FB反映: 白文字→黒（濃紺）文字 */
.badge-date{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--c-tagbg);color:var(--c-name);
  font-size:13px;font-weight:700;letter-spacing:.06em;
  padding:5px 14px;border-radius:4px;margin:0 0 16px;
}

/* ============================================
   トップページ セクションの縦リズム
   実測: カード下端 → 次セクションの英字上端 5.70%
   ============================================ */
.about,.navigator,.pickup,.episodes{padding-block:5.7% 0}
.episodes{padding-bottom:5.7%}

/* ============================================
   About（罫線ノート）
   実測（カード x43-619 / y452-566 を基準）
     角丸        6px（0.9%）
     パンチ穴    x57-62（6px径）、縦ピッチ22px、4個
     綴じ線      x73-74（カード左端から30px＝カード幅の5.2%）色 #F2CFCB
     横罫線      y473 と y539 の2本のみ（#EDF4FA）
     本文        x87-587（左44px / 右32px インセット）
     本文行ピッチ 22px（16px / line-height 2.6）
     番組メモタグ y443-459（カード上端の9px上）、幅49px
   ============================================ */
.note-card{
  position:relative;
  background:#fff;
  border-radius:10px;
  padding:3.6% 5.6% 4.5% 7.7%;
  box-shadow:0 2px 12px rgba(11,79,163,.05);
}
.note-card::before{
  content:"";position:absolute;top:0;bottom:0;left:5.2%;
  width:1px;background:var(--c-bind);
}
/* パンチ穴: 直径 1.05%（6px）、縦ピッチ 22px、カード左端から 2.4% */
.note-card::after{
  content:"";position:absolute;top:3.7%;left:2.4%;
  width:1.05%;height:62%;
  /* 半径を明示しないと、縦長タイルでは円が楕円に潰れる */
  background-image:radial-gradient(circle 5.5px, var(--c-hole) 99%, transparent 100%);
  /* 実測の縦ピッチ22px（667px基準）＝設計42px。literal 22pxだと倍の密度になる */
  background-size:100% 42px;background-repeat:repeat-y;
}
/* FB反映: 大きく・黒文字・数度の傾き */
.note-card__tag{
  position:absolute;top:-2.2%;left:4.2%;margin:0;
  background:var(--c-tagbg);color:var(--c-name);
  font-size:clamp(11px,1.02vw,13px);font-weight:700;letter-spacing:.1em;
  padding:.42em 1.2em;border-radius:3px;
  transform:rotate(-2.5deg);transform-origin:left center;
  box-shadow:0 2px 6px rgba(0,0,0,.09);
}
/* 横罫線は本文ブロックの上下2本のみ（カンプ実測どおり）。
   罫線間 66px ＝ 22px × 3行。署名も本文と同じ行ピッチに乗せる。 */
.note-card__body{
  border-top:1px solid var(--c-rule);
  border-bottom:1px solid var(--c-rule);
  padding:0;
}
/* :not() で署名を除外する。素の `.note-card__body p` だと詳細度が
   .note-card__sign を上回り、署名のサイズ指定が効かなくなる */
.note-card__body > p:not(.note-card__sign){
  margin:0;
  font-size:clamp(13px,1.33vw,17px);
  line-height:2.6;letter-spacing:.04em;
}
/* 行ピッチを本文（16.9px × 2.6 = 44px）に揃える */
.note-card__sign{
  margin:0;
  font-family:var(--font-script);
  font-size:clamp(15px,1.6vw,21px);
  color:var(--c-blue-sub);line-height:2.1;
}

/* ============================================
   Navigator
   実測（カード x43-619 / y655-792）
     写真枠 101 x 101（正方形）＝カード幅の17.5%
            カード左端から21px（3.65%）、上端から18px（3.1%）
     テープ 写真枠の上辺に重なる。幅は枠の約55%
     本文列 写真枠の右19px から
   ============================================ */
.navigator-card{
  display:grid;
  /* 実測: 写真枠101px / カード576px = 17.5%。padding込みの内寸基準では18.9% */
  grid-template-columns:18.9% minmax(0,1fr);
  column-gap:3.6%;
  align-items:center;
  background:#fff;border-radius:10px;
  padding:3.1% 3.65%;
  box-shadow:0 2px 12px rgba(11,79,163,.05);
}
.navigator-card__photo{
  position:relative;margin:0;
  background:#fff;padding:3.5%;
  border:1px solid #D2DDEB;
}
.navigator-card__photo::before{
  content:"";position:absolute;z-index:2;
  top:-7%;left:22%;
  width:56%;height:14%;
  background:var(--tape-y);
  transform:rotate(-1.2deg);
}
/* 枠は正方形。素材（3744x5616）の側でこの比率に切り出して同梱しているため、
   object-position は効かない。トリミングは顔の中心が枠の上から38%に来る位置。
   旧版は2:3の素材を object-position:50% 1% で切っていたが、
   素材が替わるたびに数値を取り直すことになるため、切り出し済みに改めた。 */
.navigator-card__photo img{
  width:100%;aspect-ratio:1/1;object-fit:cover;display:block;
}
/* 実測: 「皆藤 愛子」のインク幅57px（設計109px）→ 24.4px相当
         字高15px、カード上端から名前上端まで50px */
.navigator-card__name{
  margin:0 0 .55em;
  font-size:clamp(17px,1.91vw,25px);font-weight:700;color:var(--c-name);
  letter-spacing:.04em;line-height:1.35;
}
.navigator-card__name span{
  display:inline-block;margin-left:.6em;
  font-size:.55em;font-weight:400;letter-spacing:.1em;color:var(--c-sub);
}
/* 実測: 本文の行ピッチ16px（設計30.7px）、字送り7.5px/字（設計14.4px）
   eyebrow と氏名を :not() で除外する。素の `.navigator-card__text p` は
   詳細度が .navigator-card__name（0,1,0）を上回ってしまうため */
.navigator-card__text > p:not(.eyebrow):not(.navigator-card__name){
  margin:0 0 .3em;
  font-size:clamp(12px,1.13vw,14.5px);line-height:2.13;letter-spacing:.02em;
}
.navigator-card__text > p:last-child{margin-bottom:0}

/* ============================================
   カード共通
   ============================================ */
.card{
  background:#fff;border-radius:8px;
  box-shadow:0 2px 12px rgba(11,79,163,.05);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.card:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(11,79,163,.12)}
.card__link{display:block;height:100%}
.card__thumb{margin:0;overflow:hidden;background:var(--c-bg-blue)}
.card__thumb img{width:100%;height:100%;object-fit:cover}
/* 未設定時のプレースホルダ。カンプの見本と同じ寒色→クリームの斜めグラデ */
.card__thumb-placeholder{
  display:block;width:100%;height:100%;
  background:linear-gradient(115deg,#C9D6E9 0%,#D7DEE9 45%,#E7E7DB 75%,#EDEBD8 100%);
}
/* 実測: 配信日は暖色 */
.card__date{
  margin:0 0 .35em;
  font-size:clamp(10px,.86vw,11px);font-weight:700;letter-spacing:.08em;
  color:var(--c-date);
}
.card__guest{margin:0;line-height:1.5}
.card__guest-name{
  display:block;
  font-size:clamp(14px,1.33vw,17px);font-weight:700;letter-spacing:.03em;
  color:var(--c-name);
}
.card__guest-org{
  display:block;margin-top:.3em;
  font-size:clamp(10px,.86vw,11px);color:var(--c-sub);letter-spacing:.04em;
}
.card__more{
  display:inline-block;
  font-size:clamp(10px,.9vw,12px);font-weight:700;color:var(--c-blue-sub);
}
.card__more::after{content:" →"}

.empty{text-align:center;padding-block:60px;color:var(--c-gray)}

/* ============================================
   Pick up（3カラム・ピン留め）
   実測（カード x43-224 / y885-1049）
     カード幅 27.3%、間隔 2.4%（wrap幅比 2.78%）
     画像     カード内 7px インセット、比率ちょうど 2:1
     ピン     直径10px（カード幅の5.5%）、上端中央、中心は上端の1.5px上
     文字左   カード左端から9px
     下余白   12px
   ============================================ */
.pickup .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:2.78%}
/* 3枠に満たないとき（記事が少ない時期・記事ページで自分を除いた結果）は、
   カード幅を3カラム時と同じに保ったまま中央に寄せる。
   repeat(3,1fr) のままだと左詰めになり、右が抜けて崩れて見える。 */
.pickup .cards--2up{grid-template-columns:repeat(2,calc((100% - 2*2.78%)/3));justify-content:center}
.pickup .cards--1up{grid-template-columns:calc((100% - 2*2.78%)/3);justify-content:center}
.pickup .card{position:relative;overflow:visible}
/* 実測: ピンはカード上端に対して約57%が上にはみ出す */
.pickup .card::before{
  content:"";position:absolute;z-index:3;
  top:0;left:50%;
  width:5.5%;aspect-ratio:1/1;
  transform:translate(-50%,-57%);
  border-radius:50%;
  background:var(--pin,var(--pin-1));
  box-shadow:0 2px 4px rgba(0,0,0,.16);
}
.pickup .card:nth-child(1){--pin:var(--pin-1)}
.pickup .card:nth-child(2){--pin:var(--pin-2)}
.pickup .card:nth-child(3){--pin:var(--pin-3)}
/* 実測: 上7px・左右7px・下12px（カード幅比 3.85% / 6.6%） */
.pickup .card__link{padding:3.85% 3.85% 6.6%}
.pickup .card__thumb{aspect-ratio:2/1;border-radius:2px}
.pickup .card__body{padding:0}
.pickup .card__date{margin-top:1.1em}
.pickup .card__more{margin-top:1.1em}

/* ============================================
   Episodes（横長リスト）
   実測（カード x45-611 / y1129-1236、カード間隔13px）
     カード高さ 16.2%
     サムネ    カード幅の22.6%、比率 16:10
               左インセット10px 上16px 下14px
     テープ    サムネ左上、上端から11px上に出る
     本文列    サムネ右端 +14px
     抜粋      2行（line-height 1.56）
   ============================================ */
/* 実測: Episodesのカードだけ他セクションより1.6%細い（84.96% vs 86.36%） */
.cards--list{
  display:flex;flex-direction:column;gap:2.26%;
  width:98.4%;margin-inline:auto;
}
.cards--list .card__link{
  display:grid;
  /* 実測: サムネ128px / カード567px = 22.6%。padding込みの内寸基準では24.0% */
  grid-template-columns:24.0% minmax(0,1fr);
  column-gap:2.65%;
  align-items:center;
  padding:2.95% 4.2% 2.95% 1.8%;
}
.cards--list .card__thumb{
  aspect-ratio:16/10;border-radius:3px;position:relative;overflow:visible;
}
.cards--list .card__thumb img,
.cards--list .card__thumb-placeholder{border-radius:3px}
/* テープは1・3枚目が黄、2枚目が青（実測 #EAD38A / #C6D6E7） */
.cards--list .card__thumb::before{
  content:"";position:absolute;z-index:2;
  top:-14%;left:6%;
  width:36%;height:21%;
  background:var(--tape,var(--tape-y));
  transform:rotate(-1.5deg);
}
.cards--list .card:nth-child(even) .card__thumb::before{--tape:var(--tape-b)}
.cards--list .card__body{padding:0}
.cards--list .card__guest{display:flex;flex-wrap:wrap;align-items:baseline;gap:.15em .7em}
.cards--list .card__guest-name{display:inline}
.cards--list .card__guest-org{display:inline;margin-top:0}
.cards--list .card__excerpt{
  margin:.8em 0 0;
  font-size:clamp(11px,1.09vw,14px);line-height:1.6;letter-spacing:.02em;
  color:#8C97A3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.cards--list .card__more{margin-top:1.2em}

/* 実測: ボタン 幅21.1% 高さ3.6%、最終カードから3.9%下 */
.more{margin:3.9% 0 0;text-align:center}
.btn-more{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:21.1vw;max-width:100%;
  background:#fff;border:1px solid var(--c-line);color:var(--c-blue-sub);
  font-size:clamp(10px,.94vw,12px);font-weight:700;letter-spacing:.06em;
  padding:1.05em 2em;border-radius:999px;
  transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn-more:hover{background:var(--c-blue);border-color:var(--c-blue);color:#fff}

/* ============================================
   アーカイブ（エピソード一覧）
   ============================================ */
.archive-episode{padding-block:3% 6%}
.pagination{margin-top:48px;display:flex;justify-content:center}
.pagination .nav-links{display:flex;gap:8px;flex-wrap:wrap}
.pagination .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;height:40px;padding:0 12px;
  border:1px solid var(--c-line);border-radius:6px;
  font-size:14px;color:var(--c-blue);background:#fff;
  transition:background .2s var(--ease), color .2s var(--ease);
}
.pagination .page-numbers:hover{background:var(--c-bg-blue)}
.pagination .page-numbers.current{
  background:var(--c-blue);border-color:var(--c-blue);color:#fff;font-weight:700;
}

/* ============================================
   サンプル記事の表示
   デザイン確認用のダミーを本番の記事と取り違えないための表示。
   ACFの「サンプル記事」をオンにしたときだけ出る。
   ============================================ */
.sample-note{
  position:relative;
  margin:8px auto 26px;
  padding:20px 24px 18px;
  background:#FFFBEE;
  border:2px solid var(--c-name);
  border-radius:8px;
  overflow:hidden;
}
/* 上辺の斜めストライプ。警告表示として最も伝わる形 */
.sample-note::before{
  content:"";position:absolute;top:0;left:0;right:0;height:7px;
  background:repeating-linear-gradient(-45deg,
    var(--c-tagbg) 0 10px, var(--c-name) 10px 20px);
}
.sample-note__title{
  margin:6px 0 .5em;
  font-size:clamp(14px,1.33vw,17px);font-weight:700;letter-spacing:.06em;
  color:var(--c-name);
}
.sample-note__title::before{content:"⚠ ";}
.sample-note__text{
  margin:0;font-size:clamp(12px,1.09vw,14px);line-height:1.9;color:#6B6047;
}

/* 一覧カードのバッジ */
.card--sample{position:relative}
.card__sample{
  position:absolute;z-index:4;top:8px;right:8px;
  padding:.32em .8em;border-radius:3px;
  background:var(--c-name);color:var(--c-tagbg);
  font-size:10px;font-weight:700;letter-spacing:.14em;line-height:1;
}
.cards--list .card__sample{top:10px;right:12px}

/* ============================================
   エピソード詳細
   ============================================ */
/* 記事本文は読みやすさ優先で幅を絞る。カード幅(86.4%=1101px)のままだと
   本文15pxで1行73文字になり、和文としては長すぎるため。
   1行あたり全角40字前後になる 860px を上限にしている。
   ※エピソード詳細はカンプが無く、この幅はこちらの判断 */
.episode__body{
  width:min(100% - 32px, 66%, 860px);
  padding-bottom:80px;
}
/* Field Noteは本文より広く見せる。
   親より広い要素を中央に置くため translateX を使う
   （margin-inline:auto だと右にはみ出して横スクロールが出る） */
.notes{
  width:min(128%, calc(100vw - 32px));
  margin-left:50%;transform:translateX(-50%);
}
/* FB反映: 引きの2ショットは「大きい」との指摘により本文幅に戻した */
.episode__head{margin-bottom:32px}
.episode__title{
  font-size:clamp(20px,2.2vw,28px);font-weight:700;line-height:1.7;
  letter-spacing:.02em;color:var(--c-name);margin:0 0 12px;
}
.episode__guest{display:flex;flex-wrap:wrap;gap:4px 12px;margin:0;font-size:14px}
.episode__guest-title{color:var(--c-sub)}
.episode__guest-name{font-weight:700;color:var(--c-name)}

/* 入稿テキスト①のサブコピー（全角40〜50字 / 1〜2行想定） */
.episode__subcopy{
  margin:0 0 14px;
  font-size:clamp(15px,1.45vw,18px);font-weight:500;line-height:1.9;
  letter-spacing:.03em;color:var(--c-blue-sub);
}
/* 入稿テキスト①の収録日クレジット（小サイズ） */
.episode__credit{
  margin:14px 0 0;
  font-size:clamp(11px,.94vw,12px);letter-spacing:.06em;color:var(--c-sub);
}

/* マスキングテープで貼った体裁。テープはトップページと共通の描画 */
.episode__wide{position:relative;margin:14px 0 40px}
.episode__wide::before{
  content:"";position:absolute;z-index:2;
  top:-11px;left:6%;
  width:14%;height:28px;
  background:var(--tape-y);
  transform:rotate(-1.2deg);
}
.episode__wide img{width:100%;border-radius:10px}
/* 画像キャプション（全角30字以内） */
.episode__wide figcaption,
.dialogue__body figcaption{
  margin-top:10px;font-size:12px;letter-spacing:.04em;color:var(--c-sub);
}

.listen{margin-bottom:44px}
.player{border-radius:12px;overflow:hidden;background:var(--c-bg-blue)}
.player iframe{display:block}

/* FB反映: 白地＋黒文字だと浮くため、ロゴのブルー系に寄せる。
   地 #EBF3F9 に対し本文 #3D66A9 のコントラスト比は5.18:1（AA適合）。 */
.navigator-note{
  position:relative;
  background:var(--c-bg-blue);border-radius:10px;
  border:1px solid rgba(11,79,163,.10);
  padding:30px 32px 26px;margin:0 0 44px;
  box-shadow:0 2px 12px rgba(11,79,163,.05);
}
.navigator-note::before{
  content:"";position:absolute;z-index:2;
  top:-13px;left:50%;
  width:110px;height:26px;margin-left:-55px;
  background:var(--tape-y);
  transform:rotate(-1.4deg);
}
.navigator-note__head{
  margin:0 0 .9em;
  font-size:clamp(13px,1.17vw,15px);font-weight:700;letter-spacing:.1em;
  color:var(--c-blue);
  padding-left:12px;border-left:3px solid var(--c-yellow);
}
.navigator-note__body p{margin:0 0 12px;font-size:15px;line-height:2;color:var(--c-blue-sub)}
.navigator-note__body p:last-of-type{margin-bottom:0}
/* FB反映: 署名を19px→26pxに */
.navigator-note__sign{
  margin-top:14px !important;text-align:right;
  font-family:var(--font-script);font-size:26px;line-height:1.2;
  color:var(--c-blue-sub);
}

.pull-quote{
  margin:0 0 44px;padding:26px 30px;
  border-top:2px solid var(--c-yellow);
  border-bottom:2px solid var(--c-yellow);
  background:linear-gradient(180deg,rgba(242,233,196,.22),rgba(242,233,196,0));
}
.pull-quote blockquote{margin:0}
/* FB反映: 青→グレー、21px→26px、キャプション12px→15px */
.pull-quote p{
  margin:0;font-size:clamp(19px,2.03vw,26px);font-weight:500;
  line-height:1.9;letter-spacing:.04em;color:var(--c-gray);
}
.pull-quote figcaption{
  margin-top:14px;text-align:right;
  font-size:clamp(13px,1.17vw,15px);color:var(--c-sub);
}

.bio{margin-bottom:48px}
/* FB反映: ゲスト氏名を20px→25pxに */
.bio__name{
  margin:0 0 4px;font-size:clamp(18px,1.95vw,25px);font-weight:700;
  color:var(--c-name);letter-spacing:.04em;line-height:1.4;
}
.bio__name span{font-size:.6em;font-weight:400;color:var(--c-sub);letter-spacing:.08em}
.bio__role{margin:0 0 16px;font-size:13px;color:var(--c-sub);letter-spacing:.04em}
.bio__inner{display:grid;grid-template-columns:120px minmax(0,1fr);gap:24px;align-items:start}
/* FB反映: 顔写真にもマスキングテープ */
.bio__photo{position:relative;margin:10px 0 0}
.bio__photo::before{
  content:"";position:absolute;z-index:2;
  top:-11px;left:18%;
  width:64%;height:22px;
  background:var(--tape-b);
  transform:rotate(-1.6deg);
}
.bio__photo img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:4px}
.bio__text p{margin:0 0 10px;font-size:14px;line-height:1.9}
.bio__text p:last-child{margin-bottom:0}

.notes{margin-bottom:52px}
.notes__list{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;
}
/* 入稿テキスト⑦: 見出し(全角8〜12字) ＋ 本文(全角40〜55字) の4カード。
   FB反映: 4色の淡い地色 ＋ 手書き書体（見出し・本文とも）。
   1〜3色目はPick upのピンと共通、4色目のグリーンのみ新規。 */
.notes__list{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
/* FB反映: 付箋のように下側がめくれて見える影をつける。
   カード自体の影は弱く、疑似要素で下端に沿った弓なりの影を敷いて
   紙が浮いているように見せる。 */
.notes__item{
  position:relative;
  background:var(--note-bg,#fff);border-radius:3px 3px 6px 6px;
  padding:22px 20px 22px;
  box-shadow:0 1px 3px rgba(11,79,163,.10);
}
.notes__item::after{
  content:"";position:absolute;z-index:-1;
  left:6%;right:6%;bottom:9px;height:22px;
  border-radius:50% / 14px;
  box-shadow:0 14px 13px rgba(35,56,79,.26);
}
/* 4枚がまったく同じ角度だと機械的に見えるので、わずかに振る */
.notes__item:nth-child(4n+1){transform:rotate(-.35deg)}
.notes__item:nth-child(4n+2){transform:rotate(.25deg)}
.notes__item:nth-child(4n+3){transform:rotate(-.2deg)}
.notes__item:nth-child(4n+4){transform:rotate(.4deg)}
.notes__item:nth-child(4n+1){--note-bg:var(--note-1-bg);--note-key:var(--note-1)}
.notes__item:nth-child(4n+2){--note-bg:var(--note-2-bg);--note-key:var(--note-2)}
.notes__item:nth-child(4n+3){--note-bg:var(--note-3-bg);--note-key:var(--note-3)}
.notes__item:nth-child(4n+4){--note-bg:var(--note-4-bg);--note-key:var(--note-4)}
.notes__no{
  display:block;margin-bottom:.45em;
  font-family:var(--font-script);
  font-size:22px;line-height:1;color:var(--note-key,var(--c-yellow));
}
/* 手書き書体はウエイトが1種類しかないため、太字ではなく字送りで締める */
.notes__title{
  margin:0 0 .5em;
  font-family:var(--font-hand);font-weight:400;
  font-size:clamp(15px,1.33vw,17px);
  line-height:1.6;letter-spacing:.02em;color:var(--c-name);
}
.notes__text{
  margin:0;font-family:var(--font-hand);
  font-size:13.5px;line-height:1.95;letter-spacing:.02em;
}

/* FB反映: 見出しの上に黄色い罫（印象的な一言と同じ線）を引く */
.dialogue{margin-bottom:32px;padding-top:26px;border-top:2px solid var(--c-yellow)}
/* FB反映: Aboutと同じルーズリーフの体裁（パンチ穴＋エンジの綴じ線） */
.dialogue__body{
  position:relative;
  border:0;border-radius:10px;background:#fff;
  padding:34px 34px 30px 76px;
  box-shadow:0 2px 12px rgba(11,79,163,.05);
}
.dialogue__body::before{
  content:"";position:absolute;top:0;bottom:0;left:56px;
  width:1.5px;background:#E8B4AE;
}
.dialogue__body::after{
  content:"";position:absolute;top:34px;left:22px;
  width:12px;height:calc(100% - 68px);
  background-image:radial-gradient(circle 5.5px, var(--c-hole) 99%, transparent 100%);
  /* 本文の行送り（15px × 2 = 30px）の倍数に合わせて穴が流れないようにする */
  background-size:100% 60px;background-repeat:repeat-y;
}
.dialogue__body .talk{margin:0 0 18px;font-size:15px;line-height:2}
.dialogue__body .talk strong{display:inline-block;min-width:3.5em;font-weight:700;color:var(--c-blue)}
.dialogue__body .talk--guest strong{color:var(--c-gray)}
/* ルーズリーフ化したので、写真も罫の内側に収める。
   はみ出させると綴じ線とパンチ穴に重なる */
.dialogue__body .talk-photo{margin:28px 0;width:100%}
.dialogue__body .talk-photo img{width:100%;border-radius:10px}
.dialogue__body > *:last-child{margin-bottom:0}

/* ============================================
   Responsive
   カンプはPCのみ。SPはこちらの判断で組んでいる（J-WAVE未合意）
   ============================================ */
@media (max-width:900px){
  :root{--header-h:58px}

  /* ============================================
     SPのグローバルナビ
     旧版は .gnav__list を display:none にしていたため、
     スマートフォンから「番組について / ナビゲーター / エピソード」に
     到達する手段がなく、ヘッダーに番組ロゴ・局ロゴ・聴くボタンだけが
     詰まって見えていた。ドロワーに作り替える。
     ============================================ */
  .gnav{gap:8px}
  .gnav-toggle{
    display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
    width:34px;height:34px;padding:0 6px;flex:none;
    border:0;background:none;cursor:pointer;
  }
  .gnav-toggle span{
    display:block;height:2px;background:var(--c-name);border-radius:2px;
    transition:transform .22s var(--ease),opacity .18s var(--ease);
  }
  .gnav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .gnav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .gnav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  /* .site-header が position:sticky なので、ここが位置の基準になる */
  .gnav__panel{
    position:absolute;top:100%;left:0;right:0;
    display:none;
    /* 半透明だと背後のヒーロー文字が透けるため不透明にする */
    background:#fff;
    border-bottom:1px solid rgba(11,79,163,.10);
    box-shadow:0 12px 24px rgba(11,79,163,.10);
    padding:4px 0 10px;
  }
  .gnav__panel[data-open="true"]{display:block}
  .gnav__list{
    flex-direction:column;gap:0;
    width:min(100% - 32px, var(--wrap-ratio), var(--wrap-max));margin-inline:auto;
  }
  .gnav__list a{
    display:block;padding:14px 2px;font-size:15px;
    border-bottom:1px solid var(--c-rule);
  }
  .gnav__list li:last-child a{border-bottom:0}
  .gnav__list a::after{display:none}

  .hero__inner{
    grid-template-columns:1fr;column-gap:0;
    width:min(100% - 32px, 520px);
    min-height:0;padding-block:30px 0;text-align:center;
  }
  .hero__body{padding-bottom:0}
  .hero__logo{margin-inline:auto;width:min(100%,320px)}
  .hero__station{margin-bottom:1em}
  .hero__station img{width:min(58%,190px);margin-inline:auto}
  /* SPでもコピーの改行位置は保つ（1行が短いため崩れない） */
  .hero__copy{margin-top:1.2em;font-size:clamp(14px,4.3vw,18px);line-height:1.95}
  .hero__portrait{margin-top:16px}
  /* 高さで抑えないとヒーローが縦に伸びすぎる */
  .hero__portrait img{height:min(42vh,300px);width:auto;margin-inline:auto}

  .platforms{padding-top:26px}
  .platforms__inner{
    flex-direction:column;align-items:stretch;
    border-radius:18px;padding:16px 18px;min-height:0;
  }
  .platforms__label{margin-left:0;justify-content:center}
  .platforms__list{margin-left:0;gap:8px;justify-content:center}
  .platform-link{min-width:0;font-size:11px}

  .about,.navigator,.pickup,.episodes{padding-block:44px 0}
  .episodes{padding-bottom:52px}
  .script-head{margin-bottom:22px}
  .script-head__en{font-size:30px}

  .note-card{padding:26px 20px 22px 46px;border-radius:10px}
  .note-card::before{left:30px}
  .note-card::after{left:12px;width:6px;top:24px;height:calc(100% - 48px)}
  .note-card__tag{left:24px;top:-11px}
  .note-card__body p{font-size:14px;line-height:2.2}

  .navigator-card{
    grid-template-columns:104px minmax(0,1fr);
    column-gap:20px;padding:20px 18px;border-radius:10px;
  }
  .navigator-card__name{font-size:18px}

  .pickup .cards,
  .pickup .cards--1up,
  .pickup .cards--2up{grid-template-columns:1fr;gap:22px}
  .pickup .card__link{padding:14px}
  .pickup .card::before{width:14px;top:-7px}

  .cards--list{gap:14px}
  .cards--list .card__link{grid-template-columns:34% minmax(0,1fr);column-gap:16px;padding:14px}
  .card,.cards--list .card{border-radius:10px}
  .cards--list .card__guest{display:block}
  .cards--list .card__guest-org{display:block;margin-top:.2em}

  .more{margin-top:26px}
  .btn-more{min-width:0;padding:.95em 1.8em}

  .episode__body{width:min(100% - 32px, 520px);padding-bottom:56px}
  .notes,.dialogue__body .talk-photo{width:100%;margin-left:0;transform:none}
  .dialogue__body{padding:24px 18px 22px 46px}
  .dialogue__body::before{left:30px}
  .dialogue__body::after{left:12px;width:10px}
  .navigator-note{padding:24px 20px 22px}
  .navigator-note__sign{font-size:22px}
  .pull-quote{padding:20px 18px}
  /* 話者ラベルはSPでもインラインのまま。block にすると
     ラベルの直後にある「：」だけが次の行の先頭に落ちる */
  .dialogue__body .talk strong{display:inline;min-width:0}
  .dialogue__body .talk{font-size:14.5px;line-height:1.95}
  .bio__inner{grid-template-columns:88px minmax(0,1fr);gap:16px}
  .notes__list{grid-template-columns:1fr}
  .archive-episode{padding-block:28px 52px}
  .site-footer__inner{flex-direction:column;text-align:center}
}

@media (max-width:520px){
  .navigator-card{grid-template-columns:1fr;row-gap:18px;text-align:center}
  .navigator-card__photo{width:132px;margin-inline:auto}
  .cards--list .card__link{grid-template-columns:1fr;row-gap:12px}
  .cards--list .card__thumb::before{width:30%;height:18%}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}

/* ============================================
   配信バーの折り返し
   配信先が Apple / Spotify / Amazon / radiko / Castbox の5つになり、
   のちに YouTube も加わる。1行に詰め続けると幅が足りず、
   390pxでは1つ44pxまで潰れて公式バッジ（比率100:30）が読めなくなる。

   flex-wrap は .platforms__list 側、伸縮は li 側に書かないと効かない。
   flexアイテムは .platform-link ではなく li のため。

   実測（6個・はみ出しは全幅で0px）
     ≥1100px … 1行  ボタン幅112px（1280px時）
     600-1100 … 3列  ボタン幅216px（768px時）
     <600px  … 2列  ボタン幅146px（390px時）
   ============================================ */
@media (max-width:1100px){
  .platforms__list{flex:1 1 auto;flex-wrap:wrap;justify-content:center;gap:10px}
  .platforms__list li{flex:0 1 calc(33.333% - 7px)}
}
@media (max-width:599px){
  .platforms__list li{flex:0 1 calc(50% - 5px)}
}

/* ============================================
   狭い画面のヘッダー
   360px以下では 番組ロゴ＋局ロゴ＋聴くボタン＋ハンバーガー が
   横幅を食い合い、局ロゴが聴くボタンに重なっていた。
   （実測 320px: 必要幅277px に対し内側の幅276px）
   要素を段階的に縮めて収める。
   ============================================ */
@media (max-width:600px){
  .site-brand{gap:8px}
  .site-logo img{height:26px}
  .site-brand__station{padding-left:8px}
  .site-brand__station img{height:10px}
  .btn-listen{font-size:11px;padding:.55em 1.1em}
}
@media (max-width:374px){
  .site-logo img{height:23px}
  .site-brand__station img{height:9px}
  .btn-listen{font-size:10px;padding:.5em .9em}
  .gnav-toggle{width:30px;padding:0 4px}
}

/* ============================================
   次回予告
   配信開始とサイト公開にずれがあるため、配信バーの直下に置く。
   サイトの語彙（マスキングテープ＋手書き英字）に合わせた付箋の体裁。
   配信日を過ぎるとPHP側で出力そのものが消える。
   ============================================ */
.next-up{
  width:min(100% - 32px, var(--wrap-ratio), var(--wrap-max));
  margin:20px auto 0;
  position:relative;
  display:flex;align-items:center;gap:clamp(12px,1.4vw,20px);
  background:#fff;border-radius:10px;
  padding:clamp(14px,1.5vw,19px) clamp(18px,2vw,28px);
  box-shadow:0 2px 12px rgba(11,79,163,.07);
}
/* マスキングテープ。Navigatorの写真と同じ描画 */
.next-up::before{
  content:"";position:absolute;z-index:2;
  top:-8px;left:clamp(24px,4vw,54px);
  width:clamp(56px,6vw,78px);height:16px;
  background:var(--tape-y);
  transform:rotate(-1.6deg);
}
.next-up__label{
  flex:none;line-height:1;
  font-family:var(--font-script);font-weight:600;
  font-size:clamp(23px,2.4vw,32px);color:var(--c-blue);
  letter-spacing:.01em;
}
.next-up__body{margin:0;font-size:clamp(13px,1.17vw,15px);line-height:1.8;color:var(--c-gray)}
.next-up__date{font-weight:700;color:var(--c-name)}
.next-up__sep{color:var(--c-line);margin-inline:.5em}
.next-up__note{font-size:.87em;color:var(--c-sub);margin-right:.5em}
.next-up__guest{font-weight:700;color:var(--c-blue)}

@media (max-width:600px){
  .next-up{
    flex-direction:column;align-items:flex-start;gap:2px;
    padding:16px 18px 15px;margin-top:16px;
  }
  .next-up__label{font-size:22px}
  .next-up__sep{display:none}
  .next-up__note{display:block;margin:0}
}