@charset "utf-8";
/* ============================================================
   sections.css — セクションごとのレイアウト（固定デザイン）
   Figmaアートボード 1280 x 6411 の座標を % に変換して配置。
   幅が変わっても比率が崩れないため、PC〜タブレットは無段階に縮小します。
   ============================================================ */

/* ------------------------------------------------------------
   1. メインビジュアル   Figma: mv (1280 x 733)
   ------------------------------------------------------------ */
.s-mv{ position:relative; }
.s-mv .mv-pc{ aspect-ratio: 1280 / 733; }
.s-mv .mv-sp{ aspect-ratio: 402 / 630; }
.s-mv img{ width:100%; height:100%; object-fit:contain; }

#mv-panel { left:12.4414%; top:10.1064%; width:79.4501%; height:85.2660%; }
#mv-img07 { left:63.9086%; top: 1.1446%; width:30.6359%; height:24.2865%; }
#mv-img06 { left:76.0594%; top:30.3711%; width:20.6188%; height:41.5648%; }
#mv-img05 { left:67.3398%; top:69.5511%; width:22.5273%; height:30.4311%; }
#mv-img04 { left:41.0227%; top:62.2838%; width:23.2328%; height:34.7763%; }
#mv-img03 { left:17.1898%; top:57.8827%; width:21.2266%; height:39.9291%; }
#mv-img02 { left: 4.8438%; top:30.6303%; width:20.2844%; height:31.0928%; }
#mv-img01 { left:19.1523%; top: 0;       width:10%;      height:21.8281%; }
#mv-ttl   { left:27.3688%; top:18.4215%; width:49.2266%; height:44.2551%; z-index:2; }


/* --- スマホ用MV（Figma「SP版-MVの参考」402 x 630 を % 換算） --- */
.mv-sp #mv-panel   { left: 6.97%; top: 4.29%; width:85.82%; height:89.21% }
.mv-sp #mv-ttl     { left:21.89%; top:17.30%; width:57.71%; z-index:2 }
.mv-sp #sp-badge   { left:12.69%; top: 0;     width:15.92% }
.mv-sp #sp-garland { left:51.24%; top: 0;     width:48.26% }
.mv-sp #sp-img-l   { left:11.69%; top:72.86%; width:40.30% }
.mv-sp #sp-img-r   { left:51.99%; top:73.81%; width:42.04% }
.mv-sp img{ width:100%; height:auto; object-fit:contain }

/* --- スマホ用の開催日時（白ヌキ・縦組み） --- */
.date-sp{ display:flex; flex-direction:column; align-items:center; gap:21px }
.date-sp__main{ width:min(88%, 343px) }
.date-sp__note{ width:min(72%, 279px) }

/* ------------------------------------------------------------
   2. 開催日時   Figma: date (590.79 x 231) / mv下 37px
   ------------------------------------------------------------ */
.s-date{ margin-top: 2.89%; }           /* 37 / 1280 */
.s-date .stage{
  width: 46.1554%;                       /* 590.79 / 1280 */
  margin-inline:auto;
  aspect-ratio: 590.79 / 231;
}
.date__img{ inset:0; }
.date__img img{ width:100%; height:100%; object-fit:contain; }

/* ------------------------------------------------------------
   3. ABOUT   Figma: about (1047.37 x 541.33) / date下 37px
   ------------------------------------------------------------ */
.s-about{ margin-top: 2.89%; }
.s-about .stage{
  width: 81.8258%;                       /* 1047.37 / 1280 */
  margin-inline:auto;
  aspect-ratio: 1047.37 / 541.33;
}
/* 白パネル。Figmaより天地左右のpaddingを詰めて、余白を締めている */
.about__panel{
  left:2.6%; top:3%; width:94.8%; height:88%;
  background: var(--c-white);
  border-radius: 24px;
}
.about__ttl { left:24.3466%; top:13.8548%; width:47.5427%; height:11.4533%; }
.about__ttl img{ width:100%; height:100%; object-fit:contain; }
/* 本文：Figmaはセンター揃え。1〜4行目 13.05px / 5〜6行目 21.05px。
   1280px以下では vw で等比縮小し、それ以上では Figma実寸で固定する */
.about__body{
  left:33.0353%; top:27.5%; width:30.1707%;
  text-align:center;
  font-size: min(1.0195vw, 13.05px);
  line-height: 1.95;
  white-space: nowrap;
}
.about__body span{ display:block; }
.about__body .is-lg{ font-size: min(1.6445vw, 21.05px); line-height:1.7; }
.about__img img{ width:100%; height:100%; object-fit:contain; }
#ab-img01{ left: 7.5427%; top:10.3448%; width:14.9709%; height:35.3634%; }
#ab-img02{ left: 7.2896%; top:46.9218%; width:24.6350%; height:38.9615%; }
#ab-img03{ left:31.9848%; top:67.9820%; width:31.6127%; height:32.0192%; }
#ab-img04{ left:68.2664%; top:36.5767%; width:20.8465%; height:37.7986%; }
#ab-img05{ left:77.9094%; top: 5.8005%; width:22.0906%; height:23.5921%; }



/* ============================================================
   4. カードセクション（おしごと / トレカ / スペシャル）
   ------------------------------------------------------------
   並びは Grid 任せ。カードの高さは中身が決めるので、
   本文や協力団体名が伸びても他のカードを押し出しません。
   ============================================================ */

/* --- おしごとたいけんコーナー --- */
.s-oshigoto .card-grid{ grid-template-columns:repeat(auto-fit, minmax(330px, 1fr)); max-width:1010px; margin-inline:auto }

/* --- トレカコーナー（赤）：1枚目だけ横長で全幅 --- */
.s-cardgame{ --accent: var(--c-red) }
.s-cardgame .card-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); max-width:1060px; margin-inline:auto }
.s-cardgame .card-grid > :first-child{ grid-column:1 / -1; width:min(100%, 620px); justify-self:center }

/* --- スペシャルコーナー（緑）：左に2枚、右に1枚（縦長） --- */
.s-special{ --accent: var(--c-green) }
.s-special .card-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); max-width:1010px; margin-inline:auto }
.s-special .card-grid > :nth-child(1){ grid-column:1; grid-row:1 }
.s-special .card-grid > :nth-child(2){ grid-column:1; grid-row:2 }
.s-special .card-grid > :nth-child(3){ grid-column:2; grid-row:1 / span 2; align-self:start }

/* ============================================================
   5. その他コンテンツ
   ============================================================ */
.s-others{ --accent: var(--c-green) }
.s-others__row{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start;
  gap: var(--gap-lg); margin-top: var(--gap-lg);
}
.s-others__item{ flex:0 1 auto; width:min(100%, 574px) }
.s-others__item--boxed{
  width:min(100%, 434px);
  padding: var(--gap-sm);
  background: var(--c-white);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
}

/* ============================================================
   6. 会場MAP
   ============================================================ */
.s-map{ text-align:center }
.s-map__ttl{ width:clamp(120px, 13vw, 161px); margin-inline:auto }
/* Googleマップ埋め込み。枠の比率だけ決めて、中身は iframe に任せる */
.s-map__embed{
  width:min(100%, 850px); margin: var(--gap-sm) auto 0;
  aspect-ratio: 850 / 320;
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  overflow:hidden;
  background:#e8eef2;
}
.s-map__embed iframe{ display:block; width:100%; height:100%; border:0 }

/* ============================================================
   7. 協賛情報
   ============================================================ */
.s-sponsor{
  margin-top: var(--section-gap);
  padding: 27px 0 40px;
  background: var(--c-sponsor-bg);
}
.s-sponsor__inner{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start;
  gap: var(--gap-md);
}
.s-sponsor__block{ flex:1 1 184px; max-width:184px }
.s-sponsor__block--wide{ flex:1 1 364px; max-width:364px }
.s-sponsor__label{
  display:flex; align-items:center; justify-content:center;
  min-height:24px; border-radius: var(--r-pill);
  background: var(--c-sponsor-pill); color: var(--c-sponsor-text);
  font-size:13px; font-weight:700; letter-spacing:.4em; text-indent:.4em;
}
.s-sponsor__body{ margin-top:13px; color:var(--c-white); font-size:13px; line-height:1.55 }
.s-sponsor__block--wide .s-sponsor__body{ font-size:10px; line-height:1.7 }

/* ============================================================
   8. レスポンシブ
   MV / date / ABOUT は比率のまま縮小。カード類は列数が減る。
   ============================================================ */
@media (max-width:767px){

  /* ===== 開催日時 ===== */
  .s-date{ margin-top:8% }

  /* ===== ABOUT：スマホ用に組み直す =====
     ステージ方式をやめ、白パネル自体をコンテナにして
     「見出し → 本文（センター揃え） → 写真1枚」の縦並びにする */
  .s-about{ margin-top:9%; padding-inline:16px }
  .about-sp{
    display:flex; flex-direction:column; align-items:center; gap:16px;
    padding:26px 18px 22px;
    background:var(--c-white); border-radius:20px;
  }
  .about-sp .about__ttl{ width:min(100%, 290px) }
  /* 幅に収まらない行は自然に折り返す（nowrapだとはみ出すため） */
  .about-sp .about__body{
    width:100%;
    font-size:13.5px; line-height:1.95; text-align:center; white-space:normal;
  }
  .about-sp .about__body span{ display:block }
  .about-sp .about__body .is-lg{ font-size:18px; line-height:1.6 }
  /* PCの5枚は使わず、スマホ用にまとめた1枚を置く */
  .about-sp__img{ width:min(100%, 400px); margin-top:2px }

  /* ===== 見出し ===== */
  .c-heading__main{ font-size:22px; line-height:1.3 }
  .c-heading--inline .c-heading__row{ flex-direction:column }
  .s-cardgame .c-heading__lead{ width:min(100%, 340px); margin-top:14px }

  /* ===== カードセクション ===== */
  .s-oshigoto, .s-cardgame, .s-special, .s-others{ margin-top:14%; padding-inline:16px }
  .card-grid{ grid-template-columns:1fr !important; gap:64px; margin-top:26px }
  .s-special .card-grid > *{ grid-column:auto !important; grid-row:auto !important }
  .s-cardgame .card-grid > :first-child{ width:100% }

  /* --- カード：Figma「SP版-MVの参考」の contents01 に合わせた組み ---
     リボンは角丸長方形、写真は本文の上、pill とボタンは大きめ */
  .c-card{
    max-width:468px; margin-inline:auto;
    gap:16px; padding:0 18px 28px; margin-bottom:0;
    border-radius:24px;
  }
  .c-card__head{ margin:-16px 0 0 -30px; max-width:calc(100% + 30px) }
  .c-ribbon{
    clip-path:none;                              /* SPは切り欠きなしの角丸 */
    border-radius:14px;
    min-height:0; padding:12px 20px;
  }
  .c-ribbon__text{ font-size:17px; line-height:1.4 }
  .c-card__front{ height:24px; margin-left:0; align-self:flex-start }

  /* 写真を本文の上へ */
  .c-card__body{ flex-direction:column; gap:14px }
  .c-card__figure{ order:-1; width:min(100%, 300px); margin-inline:auto }
  /* 縦並びになると flex-basis が高さとして効いてしまうため解除する */
  .c-card__desc{ flex:0 0 auto; font-size:14px; line-height:1.95 }
  .c-card__meta{ margin-top:0 }

  /* pill とボタンを大きく */
  .c-pill{ min-height:34px; padding:4px 16px; font-size:14px; border-radius:20px }
  .c-card__value{ font-size:14px }
  .c-card__row--org .c-card__value{ font-size:14px }
  .c-card__meta{ gap:10px }
  .c-card__row{ gap:10px 14px }
  .c-card__foot{ margin-bottom:0 }
  .c-card__btn, .c-card__foot .c-btn{
    border:0; min-width:min(72%, 300px); min-height:56px;
    font-size:17px; border-radius:28px;
  }
  .c-card__badge{ right:-6px; top:-18px; width:58px }

  /* ===== その他 / MAP / 協賛 ===== */
  .s-others__row{ gap:var(--gap-md) }
  .s-map__embed{ aspect-ratio:4 / 3 }
  .s-sponsor__block,
  .s-sponsor__block--wide{ flex:1 1 100%; max-width:420px }
}