/* ============================================================
   1. カラー・タイポグラフィのCSS変数（仕様書 3章 準拠）
   後から色味を調整したい場合はここだけ書き換えればOK
   ============================================================ */
:root{
  color-scheme: light;
  --c-ink:      #333132; /* アイボリーブラック：基本テキスト／主要背景 */
  --c-ink-soft: #55524f;
  --c-yellow:   #FFFF66; /* メインアクセント：夏祭りの活気／最重要CTA */
  --c-yellow-deep: #e8e84a;
  --c-white:    #FFFFFF; /* ベースカラー：余白と信頼性 */
  --c-blue:     #007DC5; /* サブアクセント：知的さ・誠実さ・ガバナンス */
  --c-blue-deep:#005f96;
  --c-line:     rgba(51,49,50,0.14);
  --c-paper:    #FAFAF7;

  /* ▼ 編集可能な画像プレースホルダー専用カラー（茶色）
     サイトの4色パレットには含まれない色をあえて使うことで、
     「ここは差し替えが必要な画像枠」だと一目でわかるようにしています。
     実際の画像を挿入すればこの茶色は自動的に見えなくなります。 */
  --c-placeholder:      #8B5A2B;
  --c-placeholder-soft: #A9713C;
  --c-placeholder-text: #F3E3D3;

  /* ▼ 基本フォント（見出し・本文・ボタンなど）はNoto Sans JPに統一。
     注意書き・小さな注記も同じくNoto Sans JP（--font-sans）のため、
     結果的にサイト全体がNoto Sans JPベースになっている。 */
  --font-serif: 'Noto Sans JP', sans-serif;
  --font-body:  'Noto Sans JP', sans-serif;
  --font-sans:  'Noto Sans JP', sans-serif;
  /* ▼ 3書体目：英字ラベル・カテゴリタグ専用のアクセント欧文セリフ
     和文には対応していない書体のため、必ず英数字にのみ適用すること */
  --font-accent: 'EB Garamond', serif;
  /* ▼ 最重要見出し（Heroのキャッチコピー）専用：まじめ・本気度を伝える明朝体。
     他の見出しは丸ゴシック（--font-serif）だが、ここだけは意図的に変えている */
  --font-serious: 'Shippori Mincho', serif;

  --section-gap: 184px;
  --edge: clamp(24px, 7vw, 128px);
}

@media (max-width:720px){
  :root{ --section-gap: 108px; }
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--c-white);
  color:var(--c-ink);
  font-family:var(--font-body);
  font-weight:500;
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--font-serif); margin:0; line-height:1.5; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
.tracking-wide{ letter-spacing:.18em; }
/* ▼ アンカーリンクでジャンプしたとき、スティッキーのヘッダー＋章移動ナビに
   見出しが隠れないよう、着地位置を全ページ・全アンカー共通でずらす。
   --sticky-offset は js/main.js がヘッダーと章移動ナビの実測高さから
   動的に計算する（決め打ちの数値だと画面幅やページ差分で合わなくなるため） */
html{
  scroll-padding-top:var(--sticky-offset, 190px);
}
/* ▼ EB Garamondの斜体「&」は装飾的すぎて読みにくいため、
   アクセント欧文フォント内の「&」だけ別書体（丸ゴシック・非斜体）で表示する */
.amp{
  font-family:var(--font-body);
  font-style:normal;
}

/* ============================================================
   編集可能な画像プレースホルダー共通スタイル
   ============================================================ */
.img-placeholder{
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.08) 0 10px, rgba(0,0,0,.04) 10px 20px),
    var(--c-placeholder);
  color:var(--c-placeholder-text);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-size:12px;
  font-weight:700;
  letter-spacing:.06em;
  line-height:1.6;
  padding:12px;
}

/* ============================================================
   共通パーツ：CTAボタン
   ============================================================ */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:18px 38px;
  font-family:var(--font-body);
  font-weight:700;
  font-size:15px;
  letter-spacing:.06em;
  border-radius:2px;
  border:1.5px solid var(--c-ink);
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
  white-space:nowrap;
}
.btn-primary{
  background:var(--c-yellow);
  border-color:var(--c-yellow);
  color:var(--c-ink);
}
.btn-primary:hover{ background:var(--c-yellow-deep); transform:translateY(-3px); box-shadow:0 14px 28px rgba(0,0,0,.2); }
/* ▼ 矢印が右にスッと動くリッチなホバー演出（最重要CTA用） */
.btn-arrow{
  display:inline-block;
  transition:transform .25s ease;
}
.btn:hover .btn-arrow{ transform:translateX(5px); }
.btn-outline{
  background:transparent;
  color:var(--c-ink);
}
.btn-outline:hover{ background:var(--c-ink); color:var(--c-white); transform:translateY(-2px); }

.header-nav-divider{
  width:1px;
  height:22px;
  background:var(--c-line);
  flex:0 0 auto;
}
.btn-sponsor{
  margin-left:2px;
  padding:11px 26px;
  font-size:13px;
  border-radius:999px;
  box-shadow:0 6px 18px rgba(255,255,102,.45);
}
@media (max-width:520px){
  /* 極小幅では「協賛について」の文言を短縮して常設表示を維持 */
  .btn-sponsor{ padding:10px 18px; }
}

.btn-insta{
  background:var(--c-ink);
  color:var(--c-white);
  border-color:var(--c-ink);
  padding:12px 22px;
  font-size:13px;
}
.btn-insta:hover{ background:var(--c-blue); border-color:var(--c-blue); }
/* ▼ ヘッダー内のみ：黄色CTAと形を変え、丸いアイコンボタンにして表情をつける。
   フッターのInstagramボタンは暗い背景の上に乗るため、既存の塗りのままにしている */
.header-nav .btn-insta{
  background:transparent;
  color:var(--c-ink);
  border-color:var(--c-line);
  border-radius:50%;
  width:42px;
  height:42px;
  padding:0;
  gap:0;
  justify-content:center;
}
.header-nav .btn-insta .icon-ig{ width:17px; height:17px; }
.header-nav .btn-insta:hover{
  background:var(--c-ink);
  color:var(--c-white);
  border-color:var(--c-ink);
  transform:translateY(-2px);
}

/* ============================================================
   ヘッダー
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--edge);
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  border-bottom:1px solid rgba(51,49,50,.08);
  transition:box-shadow .3s ease, background .3s ease;
}
.site-header.is-scrolled{
  background:rgba(255,255,255,.82);
  box-shadow:0 8px 24px rgba(51,49,50,.08);
}
.logo{
  font-family:var(--font-serif);
  font-weight:800;
  font-size:22px;
  letter-spacing:.04em;
}
.logo span{ color:var(--c-blue); }
.logo img{
  height:64px;
  width:auto;
  display:block;
  /* ▼ ロゴ画像を差し替える場合は img/logo-firpen-dark.png を上書き、
     または src を img/logo-firpen-dark-alt.png に変更してください */
}
.header-nav{ display:flex; align-items:center; gap:26px; }
.header-nav .navlink{
  font-size:13px; font-weight:700; letter-spacing:.05em;
  border-bottom:2px solid transparent;
  padding-bottom:4px;
}
.header-nav .navlink:hover{ border-color:var(--c-yellow); }
/* ▼ スマホ・タブレット幅のハンバーガーメニュー */
.nav-toggle{
  display:none;
  background:none;
  border:none;
  cursor:pointer;
  width:42px; height:42px;
  align-items:center; justify-content:center;
  color:var(--c-ink);
  flex:0 0 auto;
}
.nav-toggle svg{ width:22px; height:22px; }
@media (max-width:960px){
  .nav-toggle{ display:flex; }
  /* ▼ .nav-links がドロワーに収納されると、CTAボタンとの区切り線だった
     このdividerだけがロゴの隣に取り残されて見えてしまうため非表示にする */
  .header-nav-divider{ display:none; }
  .nav-links{
    position:absolute;
    top:100%; left:0; right:0;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:var(--c-white);
    border-bottom:1px solid var(--c-line);
    box-shadow:0 20px 32px rgba(51,49,50,.14);
    max-height:0;
    overflow:hidden;
    transition:max-height .3s ease;
  }
  .nav-links.is-open{
    max-height:calc(100vh - 100%);
    overflow-y:auto;
    padding:8px 0;
  }
  .nav-links .navlink,
  .nav-links .navlink-item{
    display:block;
    width:100%;
  }
  .nav-links .navlink{
    padding:14px var(--edge);
    border-bottom:1px solid var(--c-line);
  }
  .nav-links .navlink-trigger{
    width:100%;
    text-align:left;
    padding:14px var(--edge);
    border-bottom:1px solid var(--c-line);
  }
}
/* ▼ ヘッダーの各ボタンにカーソルを合わせると、常に見える位置（ヘッダー直下）に
   その章のサブタイトルへのドロップダウンが表示される（スクロール不要） */
.navlink-item{ position:relative; display:inline-flex; align-items:center; }
.navlink-trigger{
  font-family:inherit;
  background:none;
  border:none;
  cursor:pointer;
  color:inherit;
}
.navlink-dropdown{
  position:absolute;
  top:100%; left:50%;
  transform:translate(-50%, -6px);
  margin-top:18px;
  min-width:240px;
  background:var(--c-white);
  border-radius:4px;
  box-shadow:0 16px 32px rgba(51,49,50,.16);
  padding:8px 0;
  opacity:0;
  visibility:hidden;
  transition:opacity .2s ease, transform .2s ease, visibility .2s ease;
  z-index:60;
}
.navlink-item.has-dropdown:hover .navlink-dropdown,
.navlink-item.is-open .navlink-dropdown{
  opacity:1;
  visibility:visible;
  transform:translate(-50%, 0);
}
.navlink-dropdown a{
  display:block;
  padding:10px 20px;
  font-size:13px;
  font-weight:500;
  letter-spacing:normal;
  color:var(--c-ink);
  white-space:nowrap;
}
.navlink-dropdown a:hover{ background:var(--c-paper); color:var(--c-blue); }
@media (max-width:960px){
  /* ▼ モバイルのドロワー内では、中央に浮くポップアップ表示ではなく、
     タップした項目の直下にそのままインラインで開くアコーディオン表示にする */
  .nav-links .navlink-dropdown{
    position:static;
    display:none;
    opacity:1;
    visibility:visible;
    box-shadow:none;
    margin-top:0;
    min-width:0;
    padding:0;
    background:var(--c-paper);
  }
  .nav-links .navlink-item.is-open .navlink-dropdown{
    display:block;
    transform:none;
  }
  .nav-links .navlink-dropdown a{
    padding:12px var(--edge) 12px calc(var(--edge) + 16px);
    border-bottom:1px solid var(--c-line);
  }
}
@media (max-width:480px){
  .header-nav{ gap:10px; }
  .site-header{ padding:14px var(--edge); }
}

/* ============================================================
   章番号タブ（サイト全体を貫く"提案書のインデックス"モチーフ）
   ============================================================ */
.chapter-tab{
  position:absolute;
  top:-1px;
  left:0;
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--c-ink);
  color:var(--c-white);
  padding:8px 22px 8px 18px;
  font-family:var(--font-serif);
  font-size:13px;
  letter-spacing:.1em;
  border-radius:0 0 3px 0;
}
.chapter-tab b{ font-size:18px; margin-right:2px; }
.chapter-tab.blue{ background:var(--c-blue); }
/* ▼ 章タブの名称：日本語訳を上、英語名を下に重ねて表示する */
.chapter-tab-name{
  display:flex;
  flex-direction:column;
  line-height:1.3;
}
.chapter-tab-ja{
  font-family:var(--font-sans);
  font-size:11.5px;
  font-weight:500;
  letter-spacing:.03em;
  opacity:.8;
}
.chapter-tab-en{
  font-family:var(--font-accent);
  font-style:italic;
  font-size:15px;
  letter-spacing:.04em;
}

/* ============================================================
   HERO（第0章：ファーストビュー）
   ============================================================ */
.hero{
  position:relative;
  min-height:92vh;
  /* ▼ svh対応ブラウザでは、スクロール中のアドレスバー開閉で高さが
     再計算される vh を上書きし、Hero写真のガタつきを防ぐ */
  min-height:92svh;
  /* ▼ svh未対応のアプリ内ブラウザ（LINE・Instagram等）向けに、
     JS側で固定計測した --vh-fixed（main.js）でさらに上書きする */
  min-height:calc(var(--vh-fixed, 1vh) * 92);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding: 0 0 60px;
  overflow:hidden;
  background:var(--c-ink);
}
.hero-media{
  position:absolute; inset:0;
}
.hero-media .img-placeholder{
  position:absolute; inset:0;
  /* ▼▼▼ ここにメインビジュアル画像を挿入 ▼▼▼
     例）<img src="img/hero-onouenooka.jpg" alt="おのうえの丘からの風景"
              style="width:100%;height:100%;object-fit:cover;">
     この .img-placeholder ごと <img> に置き換えてください。
     推奨：おのうえの丘からの風景 or メンバーの真剣な会議風景（自然光・ハイキー） */
}
.hero-media::before{
  content:"";
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(51,49,50,0) 0%, rgba(51,49,50,.6) 55%, rgba(51,49,50,.94) 100%);
}
.hero-media::after{
  /* ブロークングリッド：右上に非対称な黄色の断片を重ねて祭りの熱気を演出 */
  content:"";
  position:absolute;
  top:-8%; right:-6%; z-index:1;
  width:38%; aspect-ratio:1/1;
  background:var(--c-yellow);
  clip-path: polygon(30% 0, 100% 0, 100% 70%, 55% 100%, 0 55%);
  opacity:.9;
}
.hero-content{
  position:relative; z-index:2;
  color:var(--c-white);
  max-width:820px;
  padding: 0 var(--edge);
  /* 背景写真の明るさに関わらず文字を読みやすくするための縁取り風の影
     （空など明るい部分に黄色文字が重なっても視認性を確保するため、
     ぼかしの少ない影を4方向に重ねて輪郭をはっきりさせている） */
  text-shadow:
    1px 1px 2px rgba(0,0,0,.85),
    -1px -1px 2px rgba(0,0,0,.85),
    1px -1px 2px rgba(0,0,0,.85),
    -1px 1px 2px rgba(0,0,0,.85),
    0 3px 12px rgba(0,0,0,.55);
}
.hero-eyebrow{
  display:inline-block;
  font-family:var(--font-accent);
  font-style:italic;
  font-size:14px;
  font-weight:600;
  letter-spacing:.05em;
  color:var(--c-yellow);
  border:1px solid rgba(255,255,102,.5);
  padding:6px 16px;
  border-radius:2px;
  margin-bottom:18px;
}
/* ▼ 祭りの正式名称を見出しの主役として大きく表示し、
   従来のキャッチコピーはその下にサブ見出しとして続ける */
.hero-copy{
  font-family:var(--font-serious);
  margin-bottom:20px;
}
.hero-name{
  display:block;
  font-size:clamp(34px, 6.2vw, 64px);
  font-weight:800;
  letter-spacing:.02em;
  color:var(--c-yellow);
  margin-bottom:10px;
}
.hero-tagline{
  display:block;
  font-size:clamp(20px, 3.4vw, 32px);
  font-weight:700;
  letter-spacing:.02em;
  color:var(--c-white);
}
.hero-sub{
  font-size:15px;
  color:#d9d8d6;
  max-width:520px;
  margin-bottom:44px;
}
.hero-ctas{ display:flex; flex-wrap:wrap; gap:16px; }
/* ▼ ボタンは独自の背景色を持つため、.hero-content の縁取り影を継承すると
   （特にボタン内の濃い文字色と重なって）文字がつぶれて見えるので打ち消す */
.hero-ctas .btn{ text-shadow:none; }
@media (max-width:720px){
  /* スマホでは祭り名とキャッチコピーの大きさの差をはっきりさせ、
     ボタンは相対的に大きく見えすぎないよう控えめにする */
  .hero-name{ font-size:36px; }
  .hero-tagline{ font-size:22px; font-weight:700; }
  .hero-ctas .btn{ padding:13px 26px; font-size:13.5px; }
}
.hero-meta{
  position:relative; z-index:2;
  margin-top:48px;
  display:flex; flex-wrap:wrap;
  row-gap:14px;
}
.hero-meta-item{
  display:flex; align-items:baseline; gap:12px;
  padding-right:28px; margin-right:28px;
  border-right:1px solid rgba(255,255,102,.28);
}
.hero-meta-item:last-child{ border-right:none; padding-right:0; margin-right:0; }
.hero-meta-label{
  font-family:var(--font-serif);
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--c-yellow);
  white-space:nowrap;
}
.hero-meta-value{
  font-size:13px;
  color:#e2e0dc;
  letter-spacing:.01em;
}

/* ============================================================
   章移動ナビ（クイックジャンプボタン）
   ============================================================ */
.chapter-nav{
  position:sticky;
  top:var(--header-h, 93px);
  z-index:45;
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding:16px var(--edge);
  background:var(--c-paper);
  border-bottom:1px solid var(--c-line);
  scrollbar-width:none;
}
.chapter-nav::-webkit-scrollbar{ display:none; }
.chapter-nav a{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.03em;
  padding:9px 18px;
  border:1.5px solid var(--c-ink);
  border-radius:999px;
  color:var(--c-ink);
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.chapter-nav a:hover{
  background:var(--c-yellow);
  border-color:var(--c-yellow);
  transform:translateY(-1px);
}
.chapter-nav a .num{
  font-family:var(--font-serif);
  color:var(--c-blue);
}
.chapter-nav a:hover .num{ color:var(--c-ink); }
/* ▼ 章移動ナビの各項目に、副ページ／各タイトルへのドロップダウンを追加
   （PC：ホバーで表示／スマホ：タップで開閉、外側タップで閉じる） */
.chapter-nav{ overflow-y:visible; }
.chapter-nav-item{ position:relative; flex:0 0 auto; }

/* ============================================================
   共通セクション枠
   ============================================================ */
.section{
  position:relative;
  overflow:hidden;
  padding: var(--section-gap) var(--edge) 0;
}
.section-head{
  max-width:760px;
  margin-bottom:80px;
}
.section-eyebrow{
  display:block;
  font-family:var(--font-accent);
  font-style:italic;
  font-size:18px;
  font-weight:600;
  letter-spacing:.05em;
  color:var(--c-blue);
  margin-bottom:16px;
}
/* ▼ 英語ラベルの下に添える、小さな日本語の読み仮名（送り仮名）風の注記 */
.eyebrow-ja{
  display:block;
  font-family:var(--font-sans);
  font-style:normal;
  font-size:12.5px;
  font-weight:500;
  letter-spacing:.04em;
  color:var(--c-ink-soft);
  margin-bottom:4px;
}
.final-cta .eyebrow-ja{ color:#d9d8d6; }
.section-title{
  font-size:clamp(26px,3.6vw,40px);
  font-weight:700;
}
.section-lead{
  margin-top:22px;
  font-size:15.5px;
  color:var(--c-ink-soft);
  max-width:640px;
}
/* ▼ お知らせ欄のリード文：PC幅では折り返さず1行で表示する */
@media (min-width:768px){
  .news-lead{ max-width:none; white-space:nowrap; }
}

/* ============================================================
   News（お知らせ・活動報告）：定期更新セクション
   ============================================================ */
.news{ background:var(--c-white); }

/* ▼ お知らせは件数が増えても縦に積み上がらないよう、枠の高さを固定し、
   枠内だけを縦スクロールする形にしている。新しいお知らせの追加は
   index.njk 側の news.items にオブジェクトを1つ足すだけでよく、
   このCSS自体は編集不要 */
.news-scroll-wrap{
  position:relative;
  max-width:820px;
  margin-bottom:56px;
}
.news-scroll-wrap::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:36px;
  background:linear-gradient(180deg, rgba(255,255,255,0), var(--c-white));
  pointer-events:none;
}
.news-scroll{
  max-height:232px;
  overflow-y:auto;
  border-top:1px solid var(--c-line);
  scroll-snap-type:y proximity;
  scrollbar-width:thin;
}
.news-scroll::-webkit-scrollbar{ width:6px; }
.news-scroll::-webkit-scrollbar-thumb{ background:var(--c-line); border-radius:3px; }
.news-item{
  scroll-snap-align:start;
  display:flex;
  gap:28px;
  align-items:baseline;
  padding:22px 4px;
  border-bottom:1px solid var(--c-line);
  transition:background .2s ease;
}
.news-item:hover{ background:var(--c-paper); }
.news-date{
  flex:0 0 auto;
  font-family:var(--font-serif);
  font-size:14px;
  color:var(--c-blue);
  letter-spacing:.05em;
  width:96px;
}
.news-tag{
  flex:0 0 auto;
  font-size:11.5px;
  font-weight:700;
  color:var(--c-ink);
  background:var(--c-yellow);
  padding:4px 10px;
  border-radius:2px;
  letter-spacing:.03em;
}
.news-title{ font-size:14.5px; }
@media (max-width:560px){
  .news-item{ flex-wrap:wrap; gap:10px 16px; }
}

/* ============================================================
   協賛企業ロゴ：サッカースタジアムの看板広告のように、
   横長のパネルを隙間なく並べたバナーストリップ。
   お知らせ欄の余白（横方向のスペース）を使って協賛企業様を強調する。
   ロゴを増やす場合は .sponsor-board ブロックをコピーしてください。
   ============================================================ */
.sponsor-strip-wrap{ margin-bottom:56px; }
.sponsor-strip-wrap-bottom{ margin-bottom:var(--section-gap); }
.sponsor-strip-head{
  display:flex;
  align-items:baseline;
  justify-content:flex-start;
  flex-wrap:wrap;
  gap:8px 20px;
  margin-bottom:14px;
}
.sponsor-strip-link{
  font-size:12.5px;
  font-weight:700;
  color:var(--c-ink);
  border-bottom:2px solid var(--c-yellow);
  padding-bottom:2px;
}
.sponsor-strip-link:hover{ color:var(--c-blue); }

.sponsor-strip{
  overflow:hidden;
  background:var(--c-ink);
  padding:14px 0;
}
/* ▼ 自動ループ：.sponsor-strip-track の中身をJSで複製し、
   0%→-50%へ移動させることで継ぎ目のない無限スクロールを実現している。
   スクロール速度を変えたい場合は animation の秒数（24s）を調整してください。
   数字を小さくすると速く、大きくすると遅くなります。 */
.sponsor-strip-track{
  display:flex;
  gap:2px;
  width:max-content;
  padding-left:14px;
  animation: sponsor-scroll 24s linear infinite;
}
.sponsor-strip:hover .sponsor-strip-track{
  animation-play-state: paused;
}
@keyframes sponsor-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
/* ▼ 下部ストリップは上部と逆方向にスライドさせ、動きに変化をつける */
.sponsor-strip-track-reverse{
  animation-name: sponsor-scroll-reverse;
  padding-left:0;
}
@keyframes sponsor-scroll-reverse{
  from{ transform:translateX(-50%); }
  to{ transform:translateX(0); }
}
@media (prefers-reduced-motion: reduce){
  .sponsor-strip-track{ animation:none; }
}
.sponsor-board{
  flex:0 0 auto;
  width:190px;
  aspect-ratio:16/9;
  background:var(--c-white);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px;
}
.sponsor-board .img-placeholder{
  width:100%; height:100%;
  font-size:11px;
  /* ▼ ここに協賛企業のロゴ画像を挿入
     例）<img src="img/partner-logo-01.png" alt="〇〇株式会社のロゴ" style="max-width:88%;max-height:78%;width:auto;height:auto;">
     この .img-placeholder ごと <img> に置き換えてください。 */
}
/* ▼ 企業ロゴ枠は「差し替え忘れ注意」用の茶色ストライプだと見栄えが悪いため、
   協賛ロゴ枠だけは公開前提の落ち着いた「近日公開」カードに専用スタイルを当てる */
.sponsor-board .img-placeholder,
.partner-logo .img-placeholder{
  background:var(--c-paper);
  color:var(--c-ink-soft);
  border:1px dashed var(--c-line);
}
@media (max-width:560px){
  .sponsor-board{ width:150px; }
}

.sponsor-strip-note{
  font-family:var(--font-sans);
  font-weight:400;
  margin-top:12px;
  font-size:12.5px;
  color:var(--c-ink-soft);
  line-height:1.6;
}

/* ============================================================
   Vision & Theme
   ============================================================ */
.vision{ background:var(--c-paper); }

/* and roots風マニフェスト：短い一行を積み重ねて感情に訴える */
.manifesto{ margin-bottom:72px; }
.manifesto p{
  font-family:var(--font-serif);
  font-size:clamp(22px,3.6vw,34px);
  font-weight:700;
  line-height:1.65;
  margin-bottom:4px;
}
.manifesto p:last-child{ color:var(--c-blue); }

.vision-grid{
  max-width:1200px; margin-left:auto; margin-right:auto;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:56px 48px;
  padding-bottom:var(--section-gap);
  align-items:start;
}
@media (max-width:900px){ .vision-grid{ grid-template-columns:1fr; gap:40px; } }

.vision-block{ margin-bottom:40px; }
.vision-block h3{ font-size:20px; margin-bottom:14px; }
.vision-block h3 em{
  font-style:normal;
  color:var(--c-blue);
  border-bottom:3px solid var(--c-yellow);
}
.vision-block p{ color:var(--c-ink-soft); font-size:15.5px; max-width:560px; }

.rep-card{
  display:block;
  position:relative;
  background:var(--c-ink);
  color:var(--c-white);
  border-radius:2px;
  overflow:hidden;
  transition:box-shadow .25s ease;
}
.rep-card:hover{ box-shadow:0 20px 40px rgba(0,0,0,.35); }
/* ▼ 代表・統括の2枚を並べる「リーダーズ」グリッド
   ブロークングリッド：2枚目を少し下にずらして単調にならないようにしている */
.leaders-grid{
  max-width:1200px; margin-left:auto; margin-right:auto;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:40px;
  padding-bottom:var(--section-gap);
}
/* ▼ 段差を「なんとなくズレている」ではなく、はっきり意図的なジグザグに
   見えるよう、1枚目は上へ・2枚目は下へ、より大きく振っている */
.leaders-grid .rep-card:nth-child(1){ transform:translateY(-22px); }
.leaders-grid .rep-card:nth-child(2){ transform:translateY(34px); }
@media (max-width:860px){
  .leaders-grid{ grid-template-columns:1fr; }
  .leaders-grid .rep-card:nth-child(1),
  .leaders-grid .rep-card:nth-child(2){ transform:none; }
}
/* ▼ androots社を参考に、写真の比重を大きくしたポートレート表示。
   カード上部いっぱいに顔写真を配置し、その下にテキストを収める構成 */
.rep-photo{
  width:100%;
  aspect-ratio:1/1;
  overflow:hidden;
}
.rep-photo .img-placeholder{
  width:100%; height:100%;
  font-size:13px;
  /* ▼ ここに代表者の顔写真を挿入
     例）<img src="img/rep-photo.jpg" alt="FIRPEN代表 ○○○○の顔写真" style="width:100%;height:100%;object-fit:cover;">
     この .img-placeholder ごと <img> に置き換えてください。
     alt属性は「代表」で終わらせず、誰の写真かが伝わる一文にすること。 */
}
.rep-card-body{ padding:34px 38px 40px; }
/* ▼ キャッチコピー（hook）と補足説明（body）で大きさ・太さ・濃さを変え、
   一目でどこが核心の一言かわかるようにする（Heroの見出し／サブコピーと同じ強弱の型） */
.rep-quote-hook{
  font-family:var(--font-serif);
  font-size:clamp(19px,2.1vw,22px);
  font-weight:800;
  line-height:1.6;
  color:var(--c-yellow);
  margin-bottom:14px;
}
.rep-quote-body{
  font-family:var(--font-serif);
  font-size:14.5px;
  line-height:1.85;
  color:#c7c5c1;
  margin-bottom:22px;
}
.rep-sign{
  font-family:var(--font-serif);
  font-size:14px;
  color:var(--c-yellow);
  letter-spacing:.1em;
}
.rep-card-more{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:18px;
  font-size:12px; font-weight:700; letter-spacing:.04em;
  color:var(--c-yellow);
}
.rep-card:hover .rep-card-more .btn-arrow{ transform:translateX(4px); }

/* メンバーの声（VOICES） */
.voices-wrap{
  max-width:1200px; margin-left:auto; margin-right:auto;
  margin-top:96px;
  padding-bottom:var(--section-gap);
}
.voices-title{ font-size:22px; margin:12px 0 32px; }
.voices-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
  gap:32px;
}
@media (max-width:860px){ .voices-grid{ grid-template-columns:1fr; } }
.voice-card{
  display:block;
  background:var(--c-white);
  color:inherit;
  overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease;
}
.voice-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 32px rgba(51,49,50,.12);
}
/* ▼ こちらもandroots社を参考に、写真の比重を増やしている */
.voice-photo{
  width:100%;
  aspect-ratio:4/3;
  overflow:hidden;
}
.voice-photo .img-placeholder{ width:100%; height:100%; font-size:11px; }
/* ▼ メンバー写真を挿入する場合は、各 .voice-photo 内の .img-placeholder ごと
   <img src="img/voice-01.jpg" alt="企画統括 ○○○○の顔写真" style="width:100%;height:100%;object-fit:cover;">
   に置き換えてください。alt属性には役割＋名前を入れること。 */
.voice-card-body{ padding:26px 28px 32px; }
.voice-role{
  font-size:12px;
  font-weight:700;
  color:var(--c-blue);
  letter-spacing:.05em;
  margin-bottom:10px;
}
.voice-quote{
  font-family:var(--font-serif);
  font-size:15.5px;
  line-height:1.85;
  color:var(--c-ink);
  margin-bottom:16px;
}
.voice-card-more{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; font-weight:700; letter-spacing:.04em;
  color:var(--c-blue);
}
.voice-card:hover .voice-card-more{ color:var(--c-blue-deep); }
.voice-card:hover .voice-card-more .btn-arrow{ transform:translateX(4px); }

/* ============================================================
   The Real Story（信頼性担保セクション）
   ============================================================ */
.story{ background:var(--c-white); }
/* ▼ 他章と違う非対称ヘッダー：本文＋大きな数字の統計調カウント */
.story-head{
  max-width:1200px; margin-left:auto; margin-right:auto;
  display:grid;
  grid-template-columns: 1.7fr .6fr;
  gap:56px;
  align-items:end;
  margin-bottom:64px;
}
@media (max-width:860px){
  .story-head{ grid-template-columns:1fr; }
}
.story-head-text{ }
/* ▼ PCのフル画面幅では見出しを1行に収める */
@media (min-width:1400px){
  .story-title{ white-space:nowrap; }
}
.story-head-stat{
  display:flex;
  align-items:baseline;
  gap:16px;
}
.story-head-num{
  font-family:var(--font-serif);
  font-size:clamp(56px,7vw,80px);
  font-weight:900;
  color:var(--c-blue);
  line-height:1;
}
.story-head-caption{
  font-size:13.5px;
  color:var(--c-ink-soft);
  line-height:1.6;
}
/* ▼ 「みはじ」の図と同じ、上1段＋下2段の構成。
   一番伝えたい「覚悟の差」を上段いっぱいに大きく置き、
   収支管理・リスクマネジメントは下段で2等分にして支える形にしている */
.story-cards{
  max-width:1200px; margin-left:auto; margin-right:auto;
}
.story-card-top{ margin-bottom:40px; }
.story-cards-bottom{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:40px;
}
@media (max-width:900px){ .story-cards-bottom{ grid-template-columns:1fr; } }

.story-card{ background:var(--c-white); padding:52px 42px; position:relative; }
.story-card.is-blue{ background:var(--c-blue); color:var(--c-white); }
.story-card.is-blue .story-num,
.story-card.is-blue h3{ color:var(--c-white); }
.story-card.is-blue p{ color:#e4f2fb; }

.story-num{
  font-family:var(--font-accent);
  font-style:italic;
  font-weight:600;
  font-size:17px;
  letter-spacing:.04em;
  color:var(--c-blue);
  display:block;
  margin-bottom:6px;
}
.story-num .eyebrow-ja{ margin-bottom:2px; }
.story-card h3{ font-size:19px; margin-bottom:16px; }
.story-card p{ font-size:15px; color:var(--c-ink-soft); margin-bottom:14px; }
.story-card ul.check-list{ margin-top:14px; }
.story-card ul.check-list li{
  font-size:13.5px;
  padding-left:20px;
  position:relative;
  margin-bottom:8px;
  color:var(--c-ink-soft);
}
.story-card.is-blue ul.check-list li{ color:#e4f2fb; }
.story-card ul.check-list li::before{
  content:"—";
  position:absolute; left:0; top:0;
  color:var(--c-blue);
}
.story-card.is-blue ul.check-list li::before{ color:var(--c-yellow); }

/* ▼ 上段カード：一番伝えたい「覚悟の差」なので、下段2枚より大きく・
   目立つ枠で見せる。中は「よくある文化祭（控えめ）」と
   「FIRPEN夏祭り（強調）」の2カラム比較 */
.story-card-top{
  padding:56px 56px 60px;
  border:2px solid var(--c-ink);
}
.story-card-top h3{ font-size:clamp(22px,2.6vw,28px); }
.story-card-top > p{ font-size:16px; max-width:640px; }
.compare-grid{
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:32px;
  margin-top:28px;
  align-items:start;
}
@media (max-width:640px){ .compare-grid{ grid-template-columns:1fr; gap:28px; } }
.story-card-top-note{
  margin-top:28px;
  padding-top:24px;
  border-top:1px solid var(--c-line);
  font-size:14.5px;
  font-weight:700;
  color:var(--c-blue-deep);
  max-width:640px;
}
/* PC版（カードの内容幅が最大の1084px前後になる1200px以上）では、
   幅制限を外しフォントをわずかに詰めることで文章が1行に収まるようにする
   （.story-card-top > p の方が詳細度が高く上書きされてしまうため、
   同じ詳細度になるよう子孫セレクタを合わせている） */
@media (min-width:1200px){
  .story-card-top > p.story-card-top-note{ max-width:none; font-size:13px; }
}
.compare-block{ padding-top:4px; }
.compare-block-firpen{
  background:var(--c-paper);
  padding:22px 26px;
  border-left:3px solid var(--c-blue);
}
.compare-label{
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
  color:#b6b4b1;
  margin-bottom:12px;
}
.compare-label-firpen{ color:var(--c-blue); font-size:12px; }
.compare-list li{
  font-size:14.5px;
  line-height:1.6;
  padding-left:24px;
  position:relative;
  margin-bottom:12px;
}
.compare-list-ordinary li{ color:#a19e9a; }
.compare-list-ordinary li::before{
  content:"×";
  position:absolute; left:0; top:0;
  color:#cbc9c5;
}
.compare-list-firpen li{ color:var(--c-ink); font-weight:700; font-size:15px; }
.compare-list-firpen li::before{
  content:"✓";
  position:absolute; left:0; top:0;
  color:var(--c-blue);
}

.story-note{
  position:relative;
  max-width:640px;
  margin: 56px auto 0;
  padding:32px 36px 28px 56px;
  background:var(--c-paper);
  font-size:14px;
  color:var(--c-ink-soft);
}
/* ▼ 色つきの線ではなく、大きな引用符グリフで「生の声」であることを示す */
.story-note::before{
  content:"”";
  position:absolute;
  top:2px; left:16px;
  font-family:var(--font-serif);
  font-size:52px;
  line-height:1;
  color:var(--c-yellow-deep);
}

/* ============================================================
   Festival Details（祭りの全貌）
   ============================================================ */
.details{ background:var(--c-paper); }

/* ▼ 祭り詳細ページ冒頭の開催概要：Heroのdatelineと同じ構造を、
   明るい背景用に配色だけ変えて流用（黄色ではなく青のアクセント） */
.event-meta{
  display:flex; flex-wrap:wrap;
  row-gap:14px;
  margin-bottom:64px;
}
.event-meta-item{
  display:flex; align-items:baseline; gap:12px;
  padding-right:28px; margin-right:28px;
  border-right:1px solid var(--c-line);
}
.event-meta-item:last-child{ border-right:none; padding-right:0; margin-right:0; }
.event-meta-label{
  font-family:var(--font-serif);
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--c-blue);
  white-space:nowrap;
}
.event-meta-value{
  font-size:14px;
  color:var(--c-ink-soft);
  letter-spacing:.01em;
}
.event-meta-value a{ color:var(--c-ink-soft); border-bottom:1px solid var(--c-blue); }
.event-meta-value a:hover{ color:var(--c-blue); }

/* ▼ 交通・アクセス・駐車：無料駐車場がないことを来場前に必ず伝えるための区画。
   背景を白いカードにして開催概要とは視覚的に区切っている */
.detail-video-wrap{
  max-width:600px;
  margin:0 0 40px;
  padding:28px 32px 32px;
  background:var(--c-white);
  border:1px solid var(--c-line);
  display:flex;
  flex-direction:column;
  align-items:center;
  overflow:hidden;
}
.detail-video-wrap .instagram-media{ margin-left:auto !important; margin-right:auto !important; }
.detail-video-title{ font-size:16px; margin-bottom:20px; }
.detail-video-thumb{
  position:relative;
  display:block;
  width:100%;
  max-width:300px;
  aspect-ratio:1168/2080;
  overflow:hidden;
  border-radius:8px;
}
.detail-video-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.detail-video-play{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:60px; height:60px;
  background:rgba(51,49,50,.72);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s;
}
.detail-video-play::before{
  content:"";
  border-style:solid;
  border-width:10px 0 10px 16px;
  border-color:transparent transparent transparent #FFF;
  margin-left:4px;
}
.detail-video-thumb:hover .detail-video-play{ background:var(--c-blue); }
.access-wrap{
  max-width:900px;
  margin:0 0 64px;
  padding:28px 32px 32px;
  background:var(--c-white);
  border:1px solid var(--c-line);
}
.access-title{ font-size:16px; margin-bottom:8px; }
.access-lead{
  font-size:13.5px;
  font-weight:700;
  color:var(--c-blue-deep);
  margin-bottom:22px;
  line-height:1.7;
}
.access-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}
@media (max-width:760px){ .access-grid{ grid-template-columns:1fr; } }
.access-label{
  display:block;
  font-family:var(--font-serif);
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--c-blue);
  margin-bottom:6px;
}
.access-value{ display:block; font-size:13.5px; color:var(--c-ink-soft); line-height:1.7; }

.details-mosaic{
  max-width:1200px; margin-left:auto; margin-right:auto;
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:36px;
  margin-bottom:var(--section-gap);
}
@media (max-width:860px){
  .details-mosaic{ grid-template-columns:1fr; }
}
/* ▼ ブースが1件だけの場合、グリッドに小さな箱を1つ置くと余白ばかり
   目立つため、写真と文章を横並びにした「featureカード」として
   横幅いっぱいに大きく見せる（2件以上に増えたら通常のグリッドに戻る） */
.details-mosaic.is-single{ grid-template-columns:1fr; max-width:1200px; }
.details-mosaic.is-single .booth-card{
  display:grid;
  grid-template-columns:1.15fr 1fr;
  align-items:stretch;
}
.details-mosaic.is-single .booth-photo{ aspect-ratio:auto; min-height:320px; }
.details-mosaic.is-single .booth-body{
  display:flex; flex-direction:column; justify-content:center;
  padding:44px 52px;
}
.details-mosaic.is-single .booth-body h4{ font-size:23px; margin-bottom:16px; }
.details-mosaic.is-single .booth-body p{ font-size:15.5px; line-height:1.9; }
@media (max-width:760px){
  .details-mosaic.is-single .booth-card{ grid-template-columns:1fr; }
  .details-mosaic.is-single .booth-photo{ aspect-ratio:4/3; height:auto; min-height:0; }
  .details-mosaic.is-single .booth-body{ padding:28px 26px; }
  .details-mosaic.is-single .booth-body h4{ font-size:19px; }
}

.booth-card{ background:var(--c-white); border:1px solid var(--c-line); }
.booth-photo{ aspect-ratio:4/3; }
.booth-photo .img-placeholder{
  width:100%; height:100%;
  /* ▼ ここに出店ブースの写真を挿入
     例）<img src="img/booth-01.jpg" alt="地域飲食ブースで調理をするメンバーの様子" style="width:100%;height:100%;object-fit:cover;">
     この .img-placeholder ごと <img> に置き換えてください。
     alt属性は「出店ブース」で終わらせず、何のブースかが伝わる一文にすること。 */
}
.booth-body{ padding:26px 26px; }
.booth-body h4{ font-size:15px; margin-bottom:8px; }
.booth-body p{ font-size:14.5px; color:var(--c-ink-soft); }
.booth-card-more{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:18px;
  font-size:16px; font-weight:700; letter-spacing:.02em;
  color:var(--c-blue);
}
.booth-card-more:hover{ color:var(--c-blue-deep); }
.booth-card-more:hover .btn-arrow{ transform:translateX(4px); }

/* ============================================================
   メインステージ プログラム（タイムテーブル）ページ
   ============================================================ */
.timetable-list{
  max-width:820px;
  border-top:1px solid var(--c-line);
  margin-bottom:var(--section-gap);
}
.timetable-item{
  display:flex;
  gap:28px;
  padding:22px 0;
  border-bottom:1px solid var(--c-line);
}
.timetable-item.is-finale{ background:var(--c-paper); margin:0 -24px; padding:22px 24px; border-bottom:none; border-top:1px solid var(--c-line); }
.timetable-time{
  flex:0 0 148px;
  font-family:var(--font-serif);
  font-weight:700;
  font-size:14.5px;
  color:var(--c-blue);
  letter-spacing:.01em;
}
.timetable-act{ flex:1; }
.timetable-act-name{ font-size:15.5px; font-weight:700; margin-bottom:4px; display:flex; align-items:center; gap:8px; }
.timetable-tag{
  display:inline-block;
  font-size:10.5px; font-weight:700; letter-spacing:.04em;
  background:var(--c-yellow); color:var(--c-ink);
  padding:2px 9px; border-radius:999px;
}
.timetable-act-note{ font-size:13.5px; color:var(--c-ink-soft); line-height:1.8; }
.timetable-game-list{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:9px;
}
.timetable-game{
  display:flex;
  align-items:baseline;
  gap:10px;
  font-size:13.5px;
  line-height:1.8;
}
.timetable-game-name{
  flex:0 0 auto;
  font-weight:700;
  color:var(--c-blue-deep);
  white-space:nowrap;
}
.timetable-game-catch{ color:var(--c-ink-soft); }
.timetable-note-box{
  max-width:820px;
  background:var(--c-paper);
  border-left:3px solid var(--c-blue);
  padding:20px 24px;
  font-size:13.5px;
  color:var(--c-ink-soft);
  line-height:1.9;
  margin-bottom:56px;
}
@media (max-width:640px){
  .timetable-item{ flex-direction:column; gap:6px; padding:18px 0; }
  .timetable-item.is-finale{ margin:0 -16px; padding:18px 16px; }
  .timetable-time{ flex:none; font-size:13.5px; }
  .timetable-game{ flex-direction:column; gap:2px; }
}

.stall-lineup-wrap{ max-width:1200px; margin:0 auto var(--section-gap); }
.stall-lineup-title{ font-size:19px; margin-bottom:24px; }
.stall-lineup-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:28px;
}
.stall-lineup-more{
  font-size:13.5px;
  color:var(--c-ink-soft);
  text-align:center;
  margin-top:28px;
}
.stall-card{
  background:var(--c-white);
  border:1px solid var(--c-line);
  transition:transform .2s ease, box-shadow .2s ease;
}
.stall-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 32px rgba(51,49,50,.12);
}
.stall-card-photo{ aspect-ratio:4/3; overflow:hidden; }
.stall-card-photo img{ transition:transform .3s ease; }
.stall-card:hover .stall-card-photo img{ transform:scale(1.05); }
.stall-card-photo .img-placeholder{
  width:100%; height:100%;
  /* ▼ ここに出店の写真を挿入
     例）<img src="img/stall-kanzarashi.jpg" alt="かんざらしの写真" style="width:100%;height:100%;object-fit:cover;">
     この .img-placeholder ごと <img> に置き換えてください。 */
}
.stall-card-body{ padding:26px 26px; }
.stall-card-name{
  display:inline-block;
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--c-blue);
  margin-bottom:8px;
}
.stall-card-price{
  display:inline-block;
  font-size:20px;
  font-weight:900;
  color:var(--c-blue-deep);
  background:var(--c-paper);
  padding:3px 12px;
  border-radius:2px;
  margin-bottom:12px;
}
.stall-card-price span{ font-size:12px; font-weight:700; margin-left:2px; }
.stall-card-price-note{ font-size:11.5px; color:var(--c-ink-soft); margin:-6px 0 12px; }
.stall-card-title{ font-size:16px; line-height:1.5; margin-bottom:12px; }
.stall-card-body p{ font-size:14px; line-height:1.8; color:var(--c-ink-soft); margin-bottom:12px; }
.stall-card-body p:last-child{ margin-bottom:0; }

/* ============================================================
   About FIRPEN & Partners（社会的証明）
   ============================================================ */
.about{ background:var(--c-white); }

/* ▼ 名前の由来：大きな引用文スタイル（Visionの2カラム構成との反復を避ける） */
.about-origin{
  max-width:760px;
  margin-bottom:56px;
}
.about-origin-label{
  margin-bottom:20px;
  font-size:12.5px;
  color:var(--c-blue);
  font-weight:700;
  letter-spacing:.03em;
}
.about-origin-quote-wrap{
  position:relative;
  padding-left:44px;
}
.about-origin-mark{
  position:absolute;
  left:-6px; top:-24px;
  font-family:var(--font-serif);
  font-size:88px;
  font-weight:900;
  color:var(--c-yellow-deep);
  line-height:1;
}
.about-origin-quote{
  font-family:var(--font-serif);
  font-size:clamp(19px,2.3vw,24px);
  font-weight:700;
  line-height:1.85;
  color:var(--c-ink);
}

/* ▼ 理念・目的：本文とOBJECTリストを非対称の比率にしている */
.about-mission{
  max-width:1200px; margin-left:auto; margin-right:auto;
  display:grid;
  grid-template-columns: 1.6fr 1fr;
  gap:52px;
  align-items:start;
  margin-bottom:72px;
  padding-bottom:56px;
  border-bottom:1px solid var(--c-line);
}
@media (max-width:860px){ .about-mission{ grid-template-columns:1fr; gap:28px; } }
.about-mission-text h3{ font-size:19px; margin-bottom:14px; }
.about-mission-text p{ font-size:15.5px; color:var(--c-ink-soft); max-width:560px; }
.sponsor-intro-pending{ font-style:italic; opacity:.7; }
.about-object-box{
  background:var(--c-paper);
  border:1px solid var(--c-line);
  padding:28px 30px;
}
.about-object-list li{
  font-size:13.5px;
  color:var(--c-ink-soft);
  padding-left:20px;
  position:relative;
  margin-bottom:10px;
  line-height:1.6;
}
.about-object-list li:last-child{ margin-bottom:0; }
.about-object-list li::before{
  content:"—";
  position:absolute; left:0; top:0;
  color:var(--c-blue);
}

.org-wrap{ max-width:1200px; margin-left:auto; margin-right:auto; margin-bottom:112px; }
.about-lead{ max-width:680px; color:var(--c-ink-soft); font-size:15.5px; margin-bottom:36px; }
.org-chart{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  max-width:760px;
  gap:24px;
}
@media (max-width:760px){ .org-chart{ grid-template-columns:repeat(2,1fr); max-width:none; } }
.org-node{
  padding:28px 20px;
  text-align:center;
  border:1px solid var(--c-line);
}
/* ▼ 全カードを同じ「枠付きカード」の家族にしたうえで、代表だけ
   塗りつぶしで差をつける。装飾ではなく実際の役割の違いとして表現する */
.org-node.is-lead{
  background:var(--c-ink);
  border-color:var(--c-ink);
}
.org-node.is-lead .role{ color:var(--c-yellow); }
.org-node.is-lead .name{ color:var(--c-white); }
.org-node .role{ font-size:12px; color:var(--c-blue); font-weight:700; letter-spacing:.08em; margin-bottom:8px; }
.org-node .name{ font-family:var(--font-serif); font-size:16px; }

/* ▼ 実行委員会の全体名簿：写真つきの組織図カードとは分けて、
   シンプルなテキスト一覧として掲載する */
.committee-wrap{
  max-width:760px;
  margin-top:40px;
  padding-top:32px;
  border-top:1px solid var(--c-line);
}
.committee-line{ font-size:15px; margin-bottom:0; }
.committee-role{
  display:inline-block;
  min-width:112px;
  font-weight:700;
  color:var(--c-blue);
  letter-spacing:.03em;
  margin-right:14px;
}
.committee-teams{
  margin-top:28px;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:22px 40px;
}
@media (max-width:640px){ .committee-teams{ grid-template-columns:1fr; } }
.committee-team-name{
  font-family:var(--font-serif);
  font-size:14.5px;
  font-weight:700;
  color:var(--c-ink);
  margin:0 0 6px;
}
.committee-team-members{
  font-size:14px;
  color:var(--c-ink-soft);
  margin:0;
  line-height:1.7;
}

.partners-wrap{ max-width:1200px; margin-left:auto; margin-right:auto; padding-bottom:var(--section-gap); }
.partners-logos{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:36px;
}
@media (max-width:760px){ .partners-logos{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:480px){ .partners-logos{ grid-template-columns:repeat(2,1fr); } }
.partner-logo{
  aspect-ratio:16/9;
  display:flex;
  align-items:center;
  justify-content:center;
}
.partner-logo .img-placeholder{
  width:100%; height:100%;
  font-size:11px;
  /* ▼ ここに協賛企業のロゴ画像を挿入
     例）<img src="img/partner-logo-01.png" alt="〇〇株式会社のロゴ" style="max-width:88%;max-height:78%;width:auto;height:auto;">
     この .img-placeholder ごと <img> に置き換えてください。
     alt属性には必ず正式な企業名を入れること（検索エンジン・読み上げ対応のため）。 */
}

/* ============================================================
   Instagram 導線
   ============================================================ */
.icon-ig{ width:16px; height:16px; flex:0 0 auto; }

/* ============================================================
   Footer & Final CTA（最終行動喚起＋フッター）
   ============================================================ */
.final-cta{
  position:relative;
  background:var(--c-ink);
  color:var(--c-white);
  padding:112px var(--edge) 96px;
  text-align:center;
}
.final-cta .section-eyebrow{ color:var(--c-yellow); align-items:center; display:flex; flex-direction:column; }
.final-cta h2{
  font-size:clamp(24px,3.4vw,34px);
  margin:16px 0 20px;
}
.final-cta p{ color:#cfcecb; font-size:14.5px; margin-bottom:52px; max-width:520px; margin-left:auto; margin-right:auto; }
/* ▼ 「Instagramで協賛のご相談はこちら」ボタンは文字数が多く、
   幅の狭いスマホ（390px未満）では1行のまま画面からはみ出し、
   横スクロールが発生してしまうため、折り返しを許可して収める */
@media (max-width:720px){
  .final-cta .btn{
    white-space:normal;
    max-width:100%;
    text-align:center;
    padding:15px 24px;
    font-size:13.5px;
  }
}
.final-cta-ctas{ display:flex; flex-wrap:wrap; justify-content:center; gap:16px; }
.final-cta-mail{ color:var(--c-white); border-color:rgba(255,255,255,.6); }
.final-cta-mail:hover{ background:var(--c-white); color:var(--c-ink); }

/* ============================================================
   背景の淡い色円（and roots参照）：セクション内に淡い色のにじみを
   数個ずつ配置する。position:absolute; z-index:-1 で文字の背後に
   回り込ませる。個々の配置は各セクション末尾のHTMLコメントを参照。
   ============================================================ */
.bg-blob{ position:absolute; z-index:-1; border-radius:50%; pointer-events:none; }
.bg-blob-gold{ background:radial-gradient(circle, #D9B65E, transparent); }
.bg-blob-coral{ background:radial-gradient(circle, #D97D5C, transparent); }
.bg-blob-teal{ background:radial-gradient(circle, #5B9BB0, transparent); }
.bg-blob-sage{ background:radial-gradient(circle, #7FB89A, transparent); }


/* ============================================================
   協賛プラン：2026年7月確定（Tier1 広報 / Tier2 プロジェクト実行 / Tier3 伴走）
   ============================================================ */
.plans-wrap{
  max-width:1040px;
  margin:0 auto 64px;
  text-align:left;
}
.plans-note{
  font-family:var(--font-sans);
  font-weight:400;
  text-align:center;
  font-size:12.5px;
  color:#b6b4b1;
  margin-bottom:32px;
  letter-spacing:.02em;
}
.plans-grid{
  display:grid;
  grid-template-columns: 1fr 1.1fr;
  gap:28px;
}
@media (max-width:860px){ .plans-grid{ grid-template-columns:1fr; max-width:420px; margin:0 auto; } }

.plan-card{
  position:relative;
  background:var(--c-white);
  color:var(--c-ink);
  border-radius:2px;
  padding:40px 32px 36px;
  border:2px solid transparent;
}
.plan-card.is-featured{
  border-color:var(--c-yellow);
  transform:translateY(-10px);
}
@media (max-width:860px){ .plan-card.is-featured{ transform:none; } }
/* ▼ 丸いカプセルバッジではなく、章タブ（.chapter-tab）と同じ
   "旗のように角から下がるタグ"の意匠に統一。サイト固有のモチーフとして扱う */
.plan-badge{
  position:absolute;
  top:-1px; left:28px;
  background:var(--c-ink);
  color:var(--c-yellow);
  font-family:var(--font-serif);
  font-size:12px;
  font-weight:700;
  padding:6px 16px;
  border-radius:0 0 3px 3px;
  letter-spacing:.06em;
}
.plan-card .plan-name{ font-family:var(--font-serif); font-size:20px; font-weight:700; color:var(--c-ink); letter-spacing:.01em; margin-bottom:8px; }
.plan-card .plan-price{
  font-size:32px;
  font-weight:900;
  color:var(--c-ink);
  letter-spacing:.01em;
  margin-bottom:4px;
}
.plan-card .plan-price span{
  font-size:13px;
  font-weight:700;
  color:var(--c-ink);
  margin-left:4px;
}
.plan-card .plan-tagline{
  font-family:var(--font-sans);
  font-weight:500;
  font-size:12px;
  color:var(--c-ink);
  margin-bottom:20px;
  padding-bottom:20px;
  border-bottom:1px solid var(--c-line);
}
.plan-benefits li{
  font-size:13.5px;
  padding-left:22px;
  position:relative;
  margin-bottom:11px;
  color:var(--c-ink);
  line-height:1.6;
}
.plan-benefits li::before{
  content:"✓";
  position:absolute; left:0; top:0;
  color:var(--c-blue);
  font-weight:700;
}
.plan-card.is-featured .plan-benefits li::before{ color:var(--c-blue-deep); }

/* ============================================================
   協賛スケジュール（仮）：日程は現時点の仮案。確定後に書き換えること
   ============================================================ */
.schedule-title{
  font-family:var(--font-serif);
  font-size:16px;
  color:var(--c-white);
  text-align:center;
  margin-bottom:18px;
}
.sponsor-schedule{
  max-width:820px;
  margin:0 auto 48px;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(170px,1fr));
  gap:32px;
  text-align:left;
  padding:0;
}
.schedule-label{
  display:block;
  font-family:var(--font-accent);
  font-style:italic;
  font-size:12px;
  font-weight:600;
  letter-spacing:.06em;
  color:var(--c-yellow);
  margin-bottom:6px;
}
.schedule-value{
  display:block;
  font-size:14px;
  color:var(--c-white);
  line-height:1.6;
}
@media (max-width:560px){
  .sponsor-schedule{ padding:24px 22px; }
}

.site-footer{
  background:var(--c-ink);
  color:#cfcecb;
  padding:56px var(--edge) 120px;
}
.footer-grid{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:40px;
  margin-bottom:40px;
  border-top:1px solid rgba(255,255,255,.14);
  padding-top:48px;
}
.footer-logo{ margin-bottom:14px; }
.footer-logo img{
  height:56px;
  width:auto;
  display:block;
  /* ▼ フッターは背景が濃色のため、白抜きロゴ（light版）を使用
     差し替える場合は img/logo-firpen-light.png を上書き、
     または src を img/logo-firpen-light-alt.png に変更してください */
}
.footer-desc{ font-size:13px; color:#b6b4b1; max-width:340px; }
.footer-links h5{ font-size:12px; letter-spacing:.1em; color:var(--c-yellow); margin-bottom:14px; font-weight:700; }
.footer-links li{ font-size:13.5px; margin-bottom:10px; color:#d6d5d2; }
.footer-links a:hover{ color:var(--c-yellow); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;
  border-top:1px solid rgba(255,255,255,.14); padding-top:24px;
  font-size:12px; color:#918f8c;
}
@media (max-width:720px){
  .site-footer{ padding-bottom:112px; }
}

/* ============================================================
   スマホ追従：Instagram フローティングボタン（要件③）
   ============================================================ */
.insta-float{ display:none; }
@media (max-width:720px){
  .insta-float{
    display:flex;
    position:fixed;
    left:16px; right:16px; bottom:16px;
    z-index:80;
    align-items:center; justify-content:center; gap:10px;
    padding:15px 20px;
    background:var(--c-ink);
    color:var(--c-white);
    border-radius:6px;
    font-size:14px; font-weight:700; letter-spacing:.05em;
    box-shadow:0 12px 30px rgba(0,0,0,.28);
  }
  .insta-float:active{ background:var(--c-blue); }
}

/* ============================================================
   一番上に戻るボタン
   ============================================================ */
.back-to-top{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:70;
  width:50px;
  height:50px;
  border-radius:50%;
  background:var(--c-ink);
  color:var(--c-white);
  display:flex;
  align-items:center;
  justify-content:center;
  border:none;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(0,0,0,.24);
  opacity:0;
  visibility:hidden;
  transform:translateY(12px);
  transition:opacity .3s ease, transform .3s ease, visibility .3s ease, background .2s ease;
}
.back-to-top.is-visible{ opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top:hover{ background:var(--c-blue); }
.back-to-top svg{ width:20px; height:20px; }

@media (max-width:720px){
  /* スマホではInstagram追従バーと重ならないよう位置を調整 */
  .back-to-top{ right:16px; bottom:84px; width:46px; height:46px; }
}

/* スクロールリビール */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* ▼ カード単位の段階的フェードイン：兄弟要素ごとに少しずつ遅れて浮かび上がる */
.reveal-item{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s ease, transform .7s ease;
}
.reveal-item.is-visible{ opacity:1; transform:translateY(0); }
.reveal-item:nth-child(1){ transition-delay:0s; }
.reveal-item:nth-child(2){ transition-delay:.12s; }
.reveal-item:nth-child(3){ transition-delay:.24s; }
.reveal-item:nth-child(4){ transition-delay:.36s; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .reveal-item{ opacity:1; transform:none; transition:none; }
}
a:focus-visible, button:focus-visible{ outline:3px solid var(--c-blue); outline-offset:2px; }

/* ▼ 協賛企業ロゴ（帯・一覧いずれも）は sponsors.html 内の該当企業へのリンクにしている */
.sponsor-board a, .partner-logo a{ display:block; width:100%; height:100%; }
.sponsor-board a:hover .img-placeholder,
.partner-logo a:hover .img-placeholder{ opacity:.82; }

/* ============================================================
   協賛企業 紹介ページ（sponsors.html：全社1ページにまとめて掲載）
   ============================================================ */
.sponsor-page-back{ display:inline-block; margin-bottom:32px; }
.sponsor-entry{
  max-width:1200px; margin-left:auto; margin-right:auto;
  padding-top:64px; padding-bottom:64px;
  border-bottom:1px solid var(--c-line);
}
.sponsor-entry:first-of-type{ padding-top:0; }
.sponsor-entry:last-of-type{ border-bottom:none; padding-bottom:var(--section-gap); }
.sponsor-entry-name{ font-size:22px; margin-bottom:28px; }

/* ============================================================
   メンバーの声 詳細ページ（voices.html：全員1ページにまとめて掲載）
   ============================================================ */
/* ▼ 6人分の長文が単調に縦積みになるのを避けるため、読みたい人へ
   直接ジャンプできる一覧を本文の前に用意する（章移動ナビと同じ
   ピル型のデザイン言語を流用） */
.voices-jump{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:var(--section-gap);
}
.voices-jump-item{
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.03em;
  padding:9px 18px;
  border:1.5px solid var(--c-ink);
  border-radius:999px;
  color:var(--c-ink);
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.voices-jump-item:hover{
  background:var(--c-yellow);
  border-color:var(--c-yellow);
  transform:translateY(-1px);
}
.voice-detail{
  display:flex;
  gap:40px;
}
/* ▼ 1人ずつの単調な繰り返しに見えないよう、1人おきに写真と文章の
   左右を入れ替えてリズムをつける */
.voice-detail-reverse{ flex-direction:row-reverse; }
@media (max-width:640px){
  .voice-detail{ flex-direction:column; gap:24px; }
  .voice-detail-reverse{ flex-direction:column; }
}
.voice-detail-photo{
  width:220px;
  flex:0 0 auto;
  aspect-ratio:1/1;
  overflow:hidden;
}
.voice-detail-photo .img-placeholder{ width:100%; height:100%; font-size:12px; }
.voice-detail-body p{
  font-size:15px;
  line-height:1.9;
  color:var(--c-ink);
  margin-bottom:18px;
}
.voice-detail-body p:last-child{ margin-bottom:0; }
/* ▼ 長文の中に強弱をつけるための引用ハイライト。
   about.njk の「ファーストペンギン」由来と同じ、大きな引用符を添える手法 */
.voice-pull-quote-wrap{
  position:relative;
  margin:8px 0 30px;
  padding-left:34px;
}
.voice-pull-quote-mark{
  position:absolute;
  left:-6px; top:-20px;
  font-family:var(--font-serif);
  font-size:64px;
  font-weight:900;
  color:var(--c-yellow-deep);
  line-height:1;
  margin:0;
}
.voice-pull-quote-text{
  font-family:var(--font-serif);
  font-size:clamp(17px,2vw,20px);
  font-weight:700;
  line-height:1.75;
  color:var(--c-ink);
  margin:0;
}

/* ============================================================
   ホーム：各章を1画面ずつ紹介するフルスクリーンパネル（and roots風）
   ============================================================ */
.home-chapters{ background:var(--c-ink); }
/* ▼ ホーム最初の画面（Hero）下部に添える協賛ロゴの帯 */
/* ▼ Hero画像に重ねる協賛ロゴの帯：横幅いっぱいに全面表示（リンクなし、帯のみ） */
.hero-sponsor-strip{
  position:relative; z-index:2;
  margin-top:40px;
}
.home-chapter-panel{
  position:relative;
  display:flex;
  align-items:flex-end;
  min-height:100vh;
  /* ▼ svh（スマホのアドレスバー表示時を基準にした固定値）に対応する
     ブラウザでは、スクロール中のアドレスバー開閉で高さが再計算される
     vh を上書きし、写真パネルのガタつき・サイズ変化を防ぐ */
  min-height:100svh;
  /* ▼ svh未対応のアプリ内ブラウザ（LINE・Instagram等）向けに、
     JS側で固定計測した --vh-fixed（main.js）でさらに上書きする */
  min-height:calc(var(--vh-fixed, 1vh) * 100);
  overflow:hidden;
  background:var(--c-ink);
  border-top:1px solid rgba(255,255,255,.08);
}
.home-chapter-media{ position:absolute; inset:0; overflow:hidden; }
.home-chapter-media .img-placeholder{ position:absolute; inset:0; }
.home-chapter-media::after{
  content:"";
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(51,49,50,0) 25%, rgba(51,49,50,.72) 72%, rgba(51,49,50,.94) 100%);
}
/* ▼ ホーム章パネルの写真上では、しおりが人物の顔にかぶらないよう
   通常より高い位置（タブ自身の高さの半分ぶん上）に配置する。
   全チャプターで統一の位置とし、各写真側のトリミング（photoPosition）で
   人物の顔がこの位置と重ならないよう調整する方針にしている */
.home-chapter-content .chapter-tab{ top:-27px; }
.home-chapter-content{
  position:relative; z-index:2;
  padding: 64px var(--edge) 150px;
  color:var(--c-white);
  /* 背景写真の明るい箇所（白板・看板など）に白文字が重なっても
     読みやすくするよう、縁取り風の影を4方向に重ねている */
  text-shadow:
    1px 1px 2px rgba(0,0,0,.8),
    -1px -1px 2px rgba(0,0,0,.8),
    1px -1px 2px rgba(0,0,0,.8),
    -1px 1px 2px rgba(0,0,0,.8),
    0 3px 12px rgba(0,0,0,.5);
  max-width:720px;
}
.home-chapter-title{
  font-family:var(--font-serif);
  font-size:clamp(28px,4.4vw,46px);
  font-weight:700;
  margin:24px 0 16px;
}
/* ▼ PCのフル画面幅では見出しを1行に収める */
@media (min-width:1400px){
  .chapter-title-nowrap{ max-width:none; white-space:nowrap; }
}
.home-chapter-lead{
  font-size:15px;
  color:#e2e0dc;
  max-width:520px;
  margin-bottom:40px;
}
/* ▼ クリックできる範囲を「詳しく見る」ボタン周辺だけに限定するため、
   パネル全体ではなくこのリンク単体をボタン化している */
.home-chapter-cta{
  display:inline-flex; align-items:center; gap:10px;
  font-size:14.5px; font-weight:700; letter-spacing:.05em;
  color:var(--c-white);
  background:rgba(51,49,50,.3);
  border:1.5px solid rgba(255,255,255,.85);
  padding:15px 28px;
  border-radius:2px;
  transition:background .25s ease, border-color .25s ease, color .25s ease, transform .2s ease;
  /* ▼ ホバー時に文字色が濃色（--c-ink）になるため、.home-chapter-content の
     縁取り影を継承したままだと文字がつぶれて見える。ボタンは独自の背景を
     持ち写真の上に直接乗っているわけではないので影は不要 */
  text-shadow:none;
}
.home-chapter-cta:hover{
  background:var(--c-yellow);
  border-color:var(--c-yellow);
  color:var(--c-ink);
  transform:translateY(-2px);
}
.home-chapter-cta:hover .btn-arrow{ transform:translateX(5px); }
@media (max-width:720px){
  .home-chapter-panel{ min-height:88vh; min-height:88svh; min-height:calc(var(--vh-fixed, 1vh) * 88); }
}

/* ============================================================
   出演者募集ページ（audition.html）
   ============================================================ */
.entry-block{ max-width:820px; margin-bottom:64px; }
.entry-subhead{ font-size:20px; margin-bottom:20px; }
.entry-block-lead{ font-size:14.5px; font-weight:700; color:var(--c-ink); margin-bottom:18px; line-height:1.8; }
.entry-note-inline{ font-size:13px; color:var(--c-ink-soft); margin-top:16px; line-height:1.7; }

.entry-check li{
  position:relative;
  padding-left:26px;
  margin-bottom:12px;
  font-size:14.5px;
  color:var(--c-ink-soft);
  line-height:1.8;
}
.entry-check li::before{
  content:"✓";
  position:absolute; left:0; top:0;
  color:var(--c-blue);
  font-weight:700;
}

.entry-flow{ display:flex; flex-direction:column; }
.entry-flow-item{
  display:flex;
  gap:22px;
  padding:22px 0;
  border-top:1px solid var(--c-line);
}
.entry-flow-item:last-child{ border-bottom:1px solid var(--c-line); }
.entry-flow-num{
  flex:0 0 auto;
  width:32px; height:32px;
  border-radius:50%;
  background:var(--c-ink);
  color:var(--c-white);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-serif);
  font-weight:700;
  font-size:14px;
}
.entry-flow-body h4{ font-size:15.5px; margin-bottom:4px; }
.entry-flow-body p{ font-size:13.5px; color:var(--c-ink-soft); line-height:1.7; }

.entry-faq-item{ border-bottom:1px solid var(--c-line); padding:22px 0; }
.entry-faq-item:first-child{ padding-top:0; }
.entry-faq-q{ display:flex; gap:10px; font-size:14.5px; font-weight:700; margin-bottom:8px; }
.entry-faq-q .q-mark{ color:var(--c-blue); flex:0 0 auto; }
.entry-faq-a{ display:flex; gap:10px; font-size:13.5px; color:var(--c-ink-soft); line-height:1.8; }
.entry-faq-a .a-mark{ color:var(--c-yellow-deep); font-weight:700; flex:0 0 auto; }

.entry-cta-box{
  max-width:820px;
  background:var(--c-ink);
  color:var(--c-white);
  padding:44px 48px;
  margin-bottom:var(--section-gap);
}
.entry-cta-box .entry-subhead{ margin-bottom:14px; }
.entry-cta-box p{ color:#d8d6d4; font-size:13.5px; margin-bottom:22px; }
@media (max-width:640px){
  .entry-cta-box{ padding:32px 26px; }
}