/* =========================================================
   企画一覧ページ CSS（PC/スマホどちらもタイトル中央）
   - フッターのみ全幅、本文は最大幅で中央寄せ
   - ヒーローは sticky、モバイルで開閉可能
   ========================================================= */

/* ---- ベース変数 ---- */
:root{
  --bg-deep:#11114d;        /* ページ背景（濃紺） */
  --panel:#FFDDFF;          /* セクションの水色 */
  --card:#ffffff;           /* カード背景 */
  --ink:#0e254d;            /* 見出し文字色 */
  --muted:#4b5b77;          /* サブテキスト */

  --pill:#ffffff;           /* ピルの白 */
  --pill-text:#1f2a44;      /* ピル文字色 */
  --pill-ring:#00000014;

  --radius-xl:20px;
  --radius-lg:16px;

  --shadow:0 6px 16px rgba(0,0,0,.12);
  --shadow-soft:0 2px 10px rgba(0,0,0,.08);

  --maxw:1100px;                       /* 本文コンテンツの最大幅 */
  --page-pad-x:clamp(14px, 4vw, 28px); /* 左右パディング */
  --card-min:260px;                    /* 1カードの最小幅（保険用） */

  --anchor-offset:120px;               /* ヒーロー高さ分（JSで上書き） */
}

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin: 10px; /* 元の margin:10 を修正（単位追加） */
  font-family:'Noto Serif JP',serif;
  color:#222;
  background:var(--bg-deep);
}

/* =========================================================
   ヘッダー（背景は全幅／中身は最大幅で中央）
   ========================================================= */
.new-header{
  background:#11114d; color:#fff;
  padding:6px 10px; display:flex; justify-content:center;
}
.new-header-container{
  display:flex; align-items:center; gap:16px;
  max-width:var(--maxw); width:100%;
  padding:0 var(--page-pad-x);
}
.new-logo{ width:48px; height:48px; border-radius:50% }
.new-header-title{ margin:0; font-size:20px; color:#fff }
.new-header-info p{ margin:.2rem 0 0; color:#fff; font-size:12px }
.new-teisai{ margin:0 0 0 auto; color:#fff; font-size:34px; letter-spacing:.08em }
.new-nav ul{ list-style:none; margin:0; padding:0 }
.new-nav li a{ color:#fff; text-decoration:none }

/* =========================================================
   ヒーロー（sticky／中央可変幅／PC/スマホでタイトル中央）
   ========================================================= */
.hero{
  position: sticky;
  top: env(safe-area-inset-top, 0px); /* iOSノッチ対応 */
  z-index: 10;
  width: 100%;
  max-width: var(--maxw);
  margin: 82px auto 24px;             /* 既存値を尊重 */
  padding: 12px var(--page-pad-x);
  /* background: rgba(17,17,77,.92); */
  -webkit-backdrop-filter: saturate(1.05) blur(6px);
  /* backdrop-filter: saturate(1.05) blur(6px); */
  color: #fff;
  /* box-shadow: 0 2px 12px rgba(0,0,0,.25); */
  text-align:center;
  transition: background 0.4s ease;
}

/* タイトル行：常に中央寄せ（左右は1frでバランス） */
.hero-bar{
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* 左余白 / タイトル / トグル */
  align-items: center;
  gap: 12px;
}
.hero-title{
  grid-column: 2;
  margin: 0;
  letter-spacing:.12em;
  font-size: 26px;
  line-height: 1.2;
  justify-self: center;
  text-align: center;
}

/* モバイル専用トグル（PCは非表示） */
.hero-toggle{
  grid-column: 3;
  justify-self: end;
  margin-left: 0;
  display: none; /* PC非表示 */
  font-size:14px;
  padding:8px 12px;
  border-radius:999px;
  background:#ffffff20;
  border:1px solid #ffffff3a;
  color:#fff;
  cursor:pointer;
  user-select:none;
}
@media (max-width: 560px){
  .hero-toggle{ display:inline-flex; }
}

/* 開閉対象パネル（JSでheightを制御、スムース開閉） */
.hero-panel{
  overflow:hidden;
  height:auto;                 /* 初期は開 */
  transition: height .25s ease;
}

/* 装飾アイコン（任意使用） */
.hero-icon{
  width:58px; height:58px; margin:0 auto 8px; border-radius:50%;
  background:#2ddbd1; box-shadow:0 0 0 8px rgba(255,255,255,.06);
}

/* ピルナビ・CTA */
.pill-nav{ margin:10px auto 8px; max-width:860px }
.pills{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
}
.pill{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 16px; border-radius:999px; text-decoration:none;
  background:var(--pill); color:var(--pill-text); font-weight:600; font-size:14px;
  box-shadow:inset 0 0 0 1px var(--pill-ring), var(--shadow-soft);
  transition: transform .1s ease, box-shadow .2s ease, background .2s ease;
}
.pill:hover{ transform: translateY(-1px); }
.pill:focus-visible{ outline:none; box-shadow:0 0 0 3px #8cbcff }
.pill-cta{ min-width:140px; }
.hero-sub{ margin:8px 0; opacity:.9; font-size:14px; text-align:center }
.hero-cta{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap }

/* アンカー(#sec-*)のずれ補正（sticky分） */
:target::before{
  content:"";
  display:block;
  height: var(--anchor-offset);
  margin-top: calc(-1 * var(--anchor-offset));
}

/* =========================================================
   セクション（水色パネル／中央可変幅）
   ========================================================= */
.section-block{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto 36px;
  padding:22px 18px 26px;
  background:var(--panel);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow);
}
.section-head{ display:flex; flex-direction:column; align-items:center; margin-bottom:16px }
.section-tag{
  display:inline-block; margin-bottom:6px; padding:6px 12px; border-radius:999px;
  background:#e8f4ff; color:#2b4c84; font-size:12px; font-weight:700; letter-spacing:.12em;
}
.section-title{ margin:0; color:var(--ink); font-size:22px }

/* カードグリッド（既存の列数ブレークポイントを尊重） */
.cards{
  --cols:3;
  display:grid; gap:16px;
  grid-template-columns: repeat(var(--cols), minmax(0,1fr));
  padding: 0 var(--page-pad-x);
}
@media (min-width:1100px){ .cards{ --cols:4; } }
@media (max-width:900px){  .cards{ --cols:2; } }
@media (max-width:560px){  .cards{ --cols:1; } }

/* カード */
.card{
  display:flex; flex-direction:column;
  background:var(--card);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft);
  overflow:hidden;
}
.card-media{ margin:0; position:relative }
.card-media img{
  width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; display:block;
}
.card-body{ display:flex; flex-direction:column; gap:6px; padding:12px 14px 14px }
.card-title{ margin:0; color:#16325c; font-size:16px; font-weight:700; line-height:1.3 }
.card-meta{ margin:0; color:var(--muted); font-size:12px }
.card-text{ margin:0; color:#24334f; font-size:14px; line-height:1.6 }

/* =========================================================
   フッター（背景は全幅／中身は任意）
   ========================================================= */
.footer{
  background:#333; color:#fff;
  padding:24px 0; margin-top:40px; width:100%;
}
.footer-link{ color:#fff; text-decoration:none }
.footer-link:hover{ opacity:.85 }











/* すべての画面幅でタイトルをど真ん中に固定 */
.hero-bar{
  display: grid !important;                 /* flex指定を上書き */
  grid-template-columns: 1fr auto 1fr;      /* 左余白 / タイトル / トグル */
  align-items: center;
  gap: 12px;
}
.hero-title{
  grid-column: 2;                            /* 常に中央列 */
  justify-self: center;
  text-align: center;
}

/* トグル配置（右端列） */
.hero-toggle{
  grid-column: 3;
  justify-self: end;
  margin-left: 0;                            /* 既存の margin-left:auto を打ち消し */
}

/* 表示ルール：PCは非表示、スマホは表示 */
@media (min-width: 561px){
  .hero-toggle{ display: none; }
}
@media (max-width: 560px){
  .hero-toggle{ display: inline-flex; }
}