@charset "UTF-8";

/* ===== reset / base ===== */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, p, figure, ul, ol, li { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { max-width: 100%; height: auto; display: block; border: 0; }
a { color: inherit; text-decoration: none; }
strong { font-weight: 700; }

/* 黄色マーカー。下から4割だけ塗ることで、手書きマーカーらしい見え方にする。
   背景を全面塗りにすると行間が詰まって見えるためグラデーションで指定している。 */
.marker {
  font-weight: 700;
  background: linear-gradient(transparent 60%, #ffef4a 60%);
}

/* 文字を黄色にする（マーカーではなく文字色） */
.txt-yellow {
  color: #ffe14a;
}

html { font-size: 62.5%; }

body {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 1.6rem;
  line-height: 1.8;
  color: #333;
  /* 背景レイヤーが読み込まれる前のちらつき防止 */
  background-color: #0b4f8a;
  /* 横スクロール防止 */
  overflow-x: hidden;
}

/* ===== 背面固定の背景 =====
   background-attachment: fixed は iOS Safari で効かない（スクロールで背景がズレる）ため、
   position: fixed の専用レイヤーを最背面に敷く方式にしている。 */
.bg-fixed {
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image: url("../img/bg.jpg?v=20260806a");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  /* iOS で URL バー開閉時に高さが変わっても隙間が出ないよう保険 */
  min-height: 100svh;
  pointer-events: none;
}

/* ===== 曇りガラスレイヤー =====
   bg.jpg（z-index:-2）の前面・コンテンツ（z-index:0）の背面に敷く。
   backdrop-filter で背後の bg.jpg をぼかし、半透明の白を重ねて「曇りガラス」にする。
   コンテンツ枠(.wrapper)は不透明なので、ガラスが見えるのは枠の左右にはみ出た背景部分。 */
.bg-glass {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: rgba(255, 255, 255, 0.25);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  pointer-events: none;
}

/* ===== layout =====
   固定背景の上に、中央寄せ 960px のコンテンツ枠を重ねる。
   960px 未満の画面では枠が画面幅いっぱいになる（＝スマホでは背景は見えなくなる）。 */
.wrapper {
  position: relative;
  z-index: 0;
  width: 100%;
  max-width: 860px;
  margin-inline: auto;
  background-color: #e1f6ff;
  /* overflow: hidden にすると子孫の position: sticky（ヘッダー固定）が効かなくなるため、
     スクロールコンテナを作らない overflow-x: clip を使う。横はみ出し防止は body 側にも入れてある。 */
  overflow-x: clip;
}

/* ===== header ===== */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: #333;
}

.header__inner {
  position: relative;
  z-index: 2;              /* オーバーレイ(z1)より上＝ロゴ/バーガーはぼけない */
  display: flex;
  align-items: center;
  height: 56px;
  padding-inline: 20px;
}

/* --- ハンバーガーボタン（右端・CSSで作成） --- */
.header__burger {
  margin-left: auto;
  position: relative;
  width: 30px;
  height: 22px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.header__burger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background-color: #fff;
  transition: transform .3s ease, opacity .3s ease, top .3s ease;
}
.header__burger span:nth-child(1) { top: 0; }
.header__burger span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.header__burger span:nth-child(3) { top: auto; bottom: 0; }
/* 開いたら×に */
.header.is-open .header__burger span:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
.header.is-open .header__burger span:nth-child(2) { opacity: 0; }
.header.is-open .header__burger span:nth-child(3) { top: 50%; bottom: auto; transform: translateY(-50%) rotate(-45deg); }

/* --- ドロップダウンナビ（ヘッダー直下） --- */
.globalNav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 2;                  /* オーバーレイ(z1)より上＝メニューはぼけない */
  overflow: hidden;
  max-height: 0;
  background-color: #474747;   /* ヘッダー(#333)より少し薄いグレー */
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  transition: max-height .35s ease;
}
.header.is-open .globalNav {
  max-height: calc(100vh - 56px);
  max-height: calc(100dvh - 56px);   /* モバイルのURLバー考慮 */
  overflow-y: auto;                  /* 収まらなければメニュー内でスクロール */
}
.globalNav__list {
  padding: 6px 0 10px;
}
.globalNav__list a {
  display: block;
  padding: 15px 24px;
  color: #fff;
  font-size: 1.9rem;
  font-weight: 600;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.globalNav__list li:first-child a {
  border-top: 0;
}
.globalNav__list a:hover {
  background-color: rgba(255, 255, 255, .08);
}
/* CTA 項目は黄色で強調 */
.globalNav__cta {
  max-width: 260px;         /* 幅を狭めて中央に */
  margin: 28px auto 32px;   /* よくある質問との間に余白＋中央寄せ＋下にも余白 */
  padding: 14px 24px !important;
  border-radius: 999px;
  background-color: #ffe14a;
  color: #333 !important;
  text-align: center;
  border-top: 0 !important;
}
.globalNav__cta:hover {
  background-color: #ffd60a !important;
}

/* メニュー背後の曇りガラスオーバーレイ（ヘッダーの重なり文脈内。z1＝ロゴ/メニュー(z2)の下） */
.navOverlay {
  position: fixed;
  inset: 0;
  z-index: 1;
  background-color: rgba(20, 20, 20, .25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.navOverlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* sticky ヘッダー分、アンカー先が隠れないようにオフセット */
:where(#map, #timetable, #speakers, #lucky, #faq) {
  scroll-margin-top: 60px;
}
/* 枠（.frame）は吹き出しが上へはみ出すので、その分オフセットを多めに */
:where(#host, #why, #outline, #join) {
  scroll-margin-top: 92px;
}

/* header-logo.png は 438x88（@2x 想定）→ 180x36 で表示 */
.header__logo img {
  width: 180px;
  height: auto;
}

@media (max-width: 767px) {
  .header__inner {
    height: 46px;
    padding-inline: 15px;
  }
  .header__logo img {
    width: 140px;
  }
  /* スマホはメニュー文字を少し小さく（PCは1.9remのまま） */
  .globalNav__list a {
    font-size: 1.6rem;
  }

  /* --- SP: ヘッダーは普段隠し、上スクロールした時だけ降りてくる ---
     狙いは FV の縦を稼ぐこと。sticky のままだとフロー上に高さ46pxが残って
     FV が下に押し出されるため、fixed にして流れから抜く（＝FVが画面最上部から始まる）。
     初期状態は translateY(-100%) で画面外に退避。JS が .is-visible を付け外しする。 */
  .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    transform: translateY(-100%);
    transition: transform .3s ease;
  }
  /* 上スクロール時（.is-visible）と、メニューを開いている間（.is-open）は必ず表示する。
     .is-open を含めておかないと、バーガーを押した瞬間にヘッダーごと消える。 */
  .header.is-visible,
  .header.is-open {
    transform: translateY(0);
  }
}

/* ===== FV =====
   カンプ（幅1200px）と fv-bg.png（1200x2539）が同一スケールなので、
   .fv を「幅100%・カンプ比率」の基準ボックスにして、上に乗せるパーツは
   .fv 内での % 指定（= カンプ座標 ÷ 1200 or 2539）で配置していく。 */
.fv {
  position: relative;
}

.fv__bg {
  width: 100%;
  height: auto;
}

/* FV上に重ねるパーツ（カンプ実測値をそのまま % 化）
   横 = px / 1200、縦 = px / 2539 */
.fv > *:not(.fv__bg) {
  position: absolute;
}

/* カンプ実測: x=730(右端0) y=21 w=470 h=312 */
.fv__cyusen {
  top: 0.827%;   /*   21 / 2539 */
  right: 0;
  width: 39.167%; /* 470 / 1200 */
  animation: badgePulse 2s ease-in-out infinite;
}

/* 大抽選会バッジの拡縮。
   この画像は右端いっぱいに置いているが、PNG右側に約37px分の透明余白があるため、
   5%（左右それぞれ約12px）までなら絵柄が枠外にはみ出して切れることはない。 */
@keyframes badgePulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* カンプ実測: x=24 y=260 w=1164（原寸） */
.fv__copy01 {
  top: 10.240%;  /*  260 / 2539 */
  left: 2%;      /*   24 / 1200 */
  width: 97%;    /* 1164 / 1200 */
}

/* カンプ実測: x=44 y=459 w=1113（原寸・左右44/43でほぼ中央）→ 中央寄せ */
.fv__copy02 {
  top: 18.078%;   /*  459 / 2539 */
  left: 50%;
  transform: translateX(-50%);
  width: 92.75%;  /* 1113 / 1200 */
}

/* カンプ実測: x=50 y=644 w=1108（原寸・カンプと完全一致） */
.fv__title {
  top: 25.364%;    /*  644 / 2539 */
  left: 4.167%;    /*   50 / 1200 */
  width: 92.333%;  /* 1108 / 1200 */
}

/* カンプ実測: x=197 y=1376 w=806（左右197でぴったり中央） */
.fv__days {
  top: 54.194%;    /* 1376 / 2539 */
  left: 50%;
  transform: translateX(-50%);
  width: 67.167%;  /*  806 / 1200 */
}

/* カンプ実測: x=24 y=1514 w=1153（左右24/23でほぼ中央）
   この上にマイクアイコン・シルエット等が乗るので、DOM順で先に置いている */
.fv__guestBg {
  top: 59.630%;    /* 1514 / 2539 */
  left: 50%;
  transform: translateX(-50%);
  width: 96.083%;  /* 1153 / 1200 */
  display: block;  /* picture はデフォルト inline。ベースライン分の隙間を作らせない */
}

/* カンプ実測: 6個とも y=1528・原寸165x170・x=76,253,429,606,783,960
   （間隔177px均等／左76・右75で中央）→ flex の等間隔配置で再現 */
.fv__mics {
  top: 60.181%;    /* 1528 / 2539 */
  left: 6.333%;    /*   76 / 1200 */
  width: 87.417%;  /* (1125-76) / 1200 */
  display: flex;
  justify-content: space-between;
}

.fv__mics li {
  flex: 0 0 15.729%; /* 165 / 1049 */
  animation: hopUp 3s ease-in-out infinite;
}

/* 左から順に跳ねる（0.4秒ずつ遅らせて波にする） */
.fv__mics li:nth-child(1) { animation-delay: 0s; }
.fv__mics li:nth-child(2) { animation-delay: .4s; }
.fv__mics li:nth-child(3) { animation-delay: .8s; }
.fv__mics li:nth-child(4) { animation-delay: 1.2s; }
.fv__mics li:nth-child(5) { animation-delay: 1.6s; }
.fv__mics li:nth-child(6) { animation-delay: 2s; }

/* 上に跳ねる共通アニメーション（マイクとCTAコピーで共用）。
   translateY を % で指定しているので、枠幅が変わっても跳ねる高さが比例して変わる。
   周期の最初18%で「ぴょん＋小さくもう一度」跳ね、残りは静止して間を作る。 */
@keyframes hopUp {
  0%   { transform: translateY(0); }
  6%   { transform: translateY(-18%); }
  12%  { transform: translateY(0); }
  15%  { transform: translateY(-6%); }
  18%  { transform: translateY(0); }
  100% { transform: translateY(0); }
}

/* OS側で「視差効果を減らす」設定の人には動かさない（酔い・めまい対策の標準対応） */
@media (prefers-reduced-motion: reduce) {
  .fv__cyusen,
  .fv__mics li,
  .fv__dr,
  .fv__jyosyu,
  .fv__ctaCopy,
  .fv__btn {
    animation: none;
  }
}

/* 左下の草・右下のパラソル。カンプ同様、左右とも枠外にはみ出す。
   重なり順は「草・パラソルがキャラより前面」（DOM順で後ろに置いている） */

/* カンプ実測: x=-74 y=1976 原寸304x372 */
.fv__kusa {
  top: 77.826%;    /* 1976 / 2539 */
  left: -6.167%;   /*  -74 / 1200 */
  width: 25.333%;  /*  304 / 1200 */
}

/* カンプ実測: x=950 y=2026 w=307（原寸334の92%）／右に57px はみ出し */
.fv__parasol {
  top: 79.795%;    /* 2026 / 2539 */
  right: -4.75%;   /*  -57 / 1200 */
  width: 25.583%;  /*  307 / 1200 */
}

/* 両サイドのキャラ。カンプ実測どおり左右とも枠外にはみ出して見切れる配置。
   はみ出し分は .wrapper の overflow-x: clip で切られる。 */

/* カンプ実測: x=-129 y=1678 原寸374x471 */
.fv__dr {
  top: 66.089%;    /* 1678 / 2539 */
  left: -10.75%;   /* -129 / 1200 */
  width: 31.167%;  /*  374 / 1200 */
  animation: hopRight 3s ease-in-out infinite;
}

/* カンプ実測: x=936 y=1669 原寸371x462（右に107px はみ出し） */
.fv__jyosyu {
  top: 65.734%;    /* 1669 / 2539 */
  right: -8.917%;  /* -107 / 1200 */
  width: 30.917%;  /*  371 / 1200 */
  animation: hopLeft 3s ease-in-out infinite;
  animation-delay: 2s; /* マイクの波が右端に届くタイミングに合わせる */
}

/* 指している方向へ跳ねる。博士は右向き（→）、助手は左向き（←）。
   横に大きく・少しだけ上に動かして「指した方へぴょん」に見せる。
   translate は % 指定なので枠幅が変わっても移動量が比例する。 */
@keyframes hopRight {
  0%   { transform: translate(0, 0); }
  6%   { transform: translate(7%, -5%); }
  12%  { transform: translate(0, 0); }
  15%  { transform: translate(2.5%, -1.5%); }
  18%  { transform: translate(0, 0); }
  100% { transform: translate(0, 0); }
}

@keyframes hopLeft {
  0%   { transform: translate(0, 0); }
  6%   { transform: translate(-7%, -5%); }
  12%  { transform: translate(0, 0); }
  15%  { transform: translate(-2.5%, -1.5%); }
  18%  { transform: translate(0, 0); }
  100% { transform: translate(0, 0); }
}

/* ===== FV下部のCTA ===== */

/* カンプ実測: x=224 y=2164 原寸768x82 */
.fv__ctaCopy {
  top: 85.230%;    /* 2164 / 2539 */
  left: 18.667%;   /*  224 / 1200 */
  width: 64%;      /*  768 / 1200 */
  /* 下のCTAボタンと同じ2秒周期にして、CTAエリア全体の動きを揃えている */
  animation: hopUp 2s ease-in-out infinite;
}

/* btn02.png（1113x285）は上部に「＼LINEで友だち追加するだけ／」の帯を内包するため、
   旧構成（cta-copy.png 2164 + btn.png 2254）の両方を1枚で置き換える。
   帯を除いた緑のボタン本体は画像内 y=96〜260。その中心が旧ボタンの中心(2375)に
   重なる位置に置く → 2375 - (96+260)/2 = 2197。 */
.fv__btn {
  top: 86.530%;    /* 2197 / 2539 */
  left: 3.833%;    /*   46 / 1200 */
  width: 92.75%;   /* 1113 / 1200 */
  transform-origin: center center;
  /* FVのCTAだけは他のCTAより大きく動かす（クライアント要望「もっと目立たせたい」） */
  animation: fvBtnPulse 2s ease-in-out infinite;
  transition: opacity .2s;
}

.fv__btn:hover {
  opacity: .85;
}

/* CTAボタン共通の拡縮（追従CTA・最終CTA・枠外CTA）。
   クライアント要望で 3% の単調パルス → 2拍(ドクン・ドクン)＋休符の 6% に強化。
   各ボタンの左右余白（最終CTA 8.67%／枠外CTA 30px／追従CTA 4vw）に収まる範囲。 */
@keyframes btnPulse {
  0%   { transform: scale(1); }
  12%  { transform: scale(1.06); }
  24%  { transform: scale(1); }
  36%  { transform: scale(1.045); }
  48%  { transform: scale(1); }
  100% { transform: scale(1); }
}

/* FV専用。ページ内で最も目立たせたいので他CTAより一段強い 7%。
   7%が上限の理由: .fv__btn は left 3.833% / width 92.75% で右余白が 3.417%（＝ボタン幅の
   3.686%）しかなく、拡大は片側 (倍率-1)/2 なので 1.0737 を超えると右端が枠外に出て
   .wrapper の overflow-x:clip で切れる。実測でも 8% は右に 2.5px はみ出した。 */
@keyframes fvBtnPulse {
  0%   { transform: scale(1); }
  12%  { transform: scale(1.07); }
  24%  { transform: scale(1); }
  36%  { transform: scale(1.055); }
  48%  { transform: scale(1); }
  100% { transform: scale(1); }
}

/* ===== SP: FVを短くして申込ボタンをファーストビューに収める =====
   クライアント要望「申込ボタンまでFVに見せたい／300万円バッジは消してOK」対応。
   縦を稼いでいる手は4つ:
     (1) 大抽選会バッジ(.fv__cyusen)を非表示
     (2) 背景の上端を207px・下端を128pxクロップ（カンプ原寸 1200x2539 基準）
     (3) コピー画像(.fv__ctaCopy)を廃し、文言入りの btn02.png に統合
     (4) SPのguest-bgを文言上寄せ版に差し替え、ボタンを脚のシルエットに重ねて引き上げ

   背景は object-fit:cover で切る。上下で切る量が違うので object-position は
     上クロップ ÷ (上クロップ + 下クロップ) = 207 / 335 = 61.79%
   上に乗るパーツの top は新しい高さ基準で引き直す:
     new% = (カンプy - 207) / 2204        ※ 2204 = 2539 - 207 - 128
   これで背景の絵柄とパーツの位置関係はカンプのまま保たれる。
   left/right/width は横方向なので変更不要。

   下端クロップが128pxで頭打ちなのは、パラソルの下端がカンプy=2403まで伸びていて、
   これ以上切るとパラソルがFVからはみ出し次セクションに突き抜けるため。 */
@media (max-width: 767px) {
  .fv__cyusen { display: none; }

  .fv {
    aspect-ratio: 1200 / 2204;
  }

  .fv__bg {
    display: block;
    height: 100%;
    object-fit: cover;
    object-position: center 61.79%;
  }

  .fv__copy01  { top:  2.405%; }  /*  260 →   53 */
  .fv__copy02  { top: 11.434%; }  /*  459 →  252 */
  .fv__title   { top: 19.828%; }  /*  644 →  437 */
  .fv__days    { top: 53.040%; }  /* 1376 → 1169 */
  .fv__guestBg { top: 59.301%; }  /* 1514 → 1307 */
  .fv__mics    { top: 59.936%; }  /* 1528 → 1321 */
  .fv__jyosyu  { top: 66.334%; }  /* 1669 → 1462 */
  .fv__dr      { top: 66.742%; }  /* 1678 → 1471 */
  .fv__kusa    { top: 80.263%; }  /* 1976 → 1769 */
  /* パラソルはSPだけ、カンプ位置から92px（390幅での画面実寸30px）上へ寄せる */
  .fv__parasol { top: 78.358%; }  /* 1934 → 1727 */
  /* guest-bg-sp.png は文言が画像内 y=320〜425 に上寄せされ、その下は脚のシルエットだけ。
     文言の下端 = guestBg上端1514 + 425 = カンプy1939。
     文言とCTAの間隔は「25px（実機390幅での実寸）」の指定 → 77カンプpx空けて2016から置く。 */
  /* SPはボタンが画面幅ほぼいっぱい（左右余白14px前後）で、7%だと画面端で切れる。
     幾何学的な上限が約6%なので、他CTAと同じ btnPulse（6%）に落とす。 */
  .fv__btn     { top: 82.078%; animation-name: btnPulse; }  /* 2016 → 1809 */

}

/* ===== 枠コンポーネント =====
   デザイン実測値（キャンバス1196px / カード幅1003px）を、実装スケール0.8倍で反映。
     枠線 2px #41B7D5 ／ カード角丸 22→18px
     吹き出し ピル形・しっぽ 幅42x高さ28 → 34x22px
     吹き出しの縦中心＝カード上端（実測: 吹き出し中心170.5 / カード上端170）
   高さは全て中身で決まる作りにしてあり、固定値は入れていない。 */

.frameSec {
  /* 上の余白は、吹き出しがカード上端から上へはみ出す分（吹き出し高さの半分）を含む */
  padding: 80px 30px;
}

.frame + .frame {
  margin-top: 80px;
}

.frame {
  position: relative;
  max-width: 800px;
  margin-inline: auto;
}

/* --- 吹き出し ---
   position: absolute + translate(-50%, -50%) で「縦中心をカード上端に合わせる」。
   こうしておくと文字数が増えて2行になっても、常に正しい位置で重なる。 */
.frame__bubble {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 横幅は中身なりに伸縮。ただしカード幅を超えないよう上限を設けて折り返す */
  width: max-content;
  max-width: calc(100% - 40px);
  padding: 16px 36px;
  border-radius: 999px;
  background-color: #3f84bb;
  color: #fff;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

/* しっぽ（下向き三角）。吹き出し下端の中央に付くので、吹き出しが伸縮しても追従する */
.frame__bubble::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-right: 13px solid transparent;
  border-left: 13px solid transparent;
  border-top: 16px solid #3f84bb;
}

/* --- カード --- */
.frame__card {
  border: 2px solid #41b7d5;
  border-radius: 18px;
  background-color: #fff;
  /* 見出し帯の上角をカードの角丸に合わせて切る */
  overflow: hidden;
}

/* --- 見出し帯 ---
   padding-top は「吹き出しの下半分＋しっぽ」に被らない値。
   吹き出し高さ約70px → 下半分35px＋しっぽ22px＝57px を確保したうえで余白を足している。 */
.frame__head {
  padding: 72px 30px 30px;
  background-color: #41b7d5;
  color: #fff;
  font-size: 4rem; /* 社名（.host__name）と同じサイズに統一 */
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

/* --- 見出し帯：主催者レイアウト（社名を中央、その下にロゴを中央揃え） --- */
.frame__head--host {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

/* im-logo.jpg は透過なしの白背景JPGなので、白い角丸タイルとして見せる。
   透過PNGをもらえたら background と padding を外して直接置ける。 */
.host__logo {
  flex: 0 0 auto;
  width: 110px;
  height: auto;
  border-radius: 12px;
  background-color: #fff;
}

.host__name {
  font-size: 4rem;
  font-weight: 700;
  line-height: 1.4;
}


/* --- 本文エリア ---
   本文の文字サイズは map_03 のボックス本文（PCで約23.7px）に合わせている。
   map_03 は cqw なのでSPで約10.7pxまで縮むが、通常の本文ではそれは小さすぎるため
   SPは可読性優先の別サイズにする（下のメディアクエリ）。 */
.frame__body {
  padding: 30px 30px 40px; /* 下だけ +10px */
  font-size: 2.4rem;       /* = 24px。map_03 PC実測23.65px相当 */
  line-height: 1.75;
}

.frame__body > * + * {
  margin-top: 1.5em;
}

/* プロダクト4点を2×2で並べる。画像は4点とも 680x430 で比率が揃っているため、
   grid の 1fr 割りだけで高さも自動的に揃う（高さ指定は不要）。 */
.host__products {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.host__products img {
  width: 100%;
  border: 1px solid #d8ebf5;
  border-radius: 8px;
  transition: opacity .2s;
}

.host__products a:hover img {
  opacity: .8;
}


/* 本文末尾に置く「夏祭りはじめます。」画像 */
.frame__start {
  display: block;
  width: 100%;
  max-width: 700px;
  margin-inline: auto;
}

.frame__lead {
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1.6;
  color: #3f84bb;
  text-align: center;
}

/* 開催概要テーブル（左＝項目ラベル／右＝内容） */
.infoTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.8rem;
  line-height: 1.7;
}
.infoTable th,
.infoTable td {
  padding: 16px 18px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid #d8ebf5;
}
.infoTable tr:last-child th,
.infoTable tr:last-child td {
  border-bottom: none;
}
.infoTable th {
  width: 8em;             /* 最長ラベル（開催形式/参加方法/注意事項）に合わせた固定幅 */
  white-space: nowrap;
  text-align: center;     /* 項目見出しは中央揃え */
  background-color: #eaf5fb;
  color: #2e6fac;         /* ステップ見出し（.flow09 dt）と同じ青に統一 */
  font-weight: 700;
}
/* 「無料」を赤の太字で強調 */
.infoTable__free {
  color: #e2352f;
  font-weight: 800;
}

/* ===== 参加までの3ステップ（flow09） ===== */
.flow_design09 {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flow09 {
  width: 100%;                 /* 枠内いっぱいに広げる（元コードのcalc幅が正しく効くように） */
  /* 枠本文の2.4remを継承すると数字が大きくなり、線のtop:60px/height:calc(100%-40px)がズレる。
     元デザインの基準サイズ(約16px)に戻して比率を揃える。 */
  font-size: 1.6rem;
  padding-left: 0;
  border-bottom: solid 1px #E1E8ED;
}

.flow09 > li {
  list-style-type: none;
  display: flex;
  padding: 20px 0;
  border-top: solid 1px #E1E8ED;
}

.flow09 > li dl dt {
  font-size: 1.2em;
  line-height: 2;
  font-weight: bold;
  color: #2e6fac;              /* 見出しも数字と同じサイトの青に */
  margin-bottom: 10px;
}

.flow09 > li .icon09 {
  line-height: 1;
  font-size: 2em;
  font-weight: bold;
  color: #2e6fac;              /* STEP＋番号をサイトの青に */
  text-align: center;
  width: 70px;
  position: relative;
  margin-top: 0;
}

.flow09 > li .icon09::before {
  content: 'STEP';
  font-size: 0.3em;
  display: block;
  margin-bottom: 3px;
  letter-spacing: 1px;
}

.flow09 > li .icon09::after {
  content: "";
  display: block;
  width: 3px;
  height: calc(100% - 90px);   /* 下側に隙間を作るため短くする */
  background-color: #ccc;
  position: absolute;
  left: 0;
  right: 0;
  top: 60px;
  margin: auto;
}

.flow09 > li dl dd {
  margin: 0;
}

.flow09 > li dl {
  width: calc(100% - 70px);
  margin-top: 0.8em;
}

/* ===== 追従CTA（固定・スクロール範囲で表示） ===== */
.floatCta {
  position: fixed;
  left: 50%;
  bottom: 16px;
  z-index: 50;
  width: min(560px, 92vw);
  transform: translateX(-50%) translateY(24px);
  opacity: 0;
  pointer-events: none;                 /* 非表示中はクリック無効 */
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .3));
  transition: opacity .3s ease, transform .3s ease;
}
.floatCta--show {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
/* pulse は本体（位置・出現用の transform）と競合しないよう内側の img に付与 */
.floatCta img {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: center center;
  animation: btnPulse 2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .floatCta img { animation: none; }
}

/* ===== フッター ===== */
.siteFooter {
  background-color: #333;
  color: #fff;
  padding: 22px 24px 20px;
  text-align: center;
}
.siteFooter__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 32px;
  margin-bottom: 12px;
}
.siteFooter__links a {
  color: #fff;
  font-size: 1.5rem;
  text-decoration: none;
}
.siteFooter__links a:hover {
  opacity: .8;
}
.siteFooter__copy {
  font-size: 1.3rem;
  color: #ccc;
  letter-spacing: .04em;
}
@media (max-width: 767px) {
  /* SP: フッターの法的リンクを小さく */
  .siteFooter__links a {
    font-size: 1.25rem;
  }
}

/* ===== 最終CTA背景（フルブリード画像）＋ ボタン重ね ===== */
.lastCta {
  position: relative;
  line-height: 0;   /* 画像下の余白（行間由来）を消す */
}
.lastCta__bg {
  display: block;
  width: 100%;
  height: auto;
}
/* ボタン位置（背景1200×1455基準）。
   btn02.png は帯を含み1113x242→1113x285と縦に伸びたため、旧位置(76.22%)のままだと
   下の「ECセラーの夏祭り、はじめます。」(背景画像内 y=1354〜) に重なる。
   砂地の空きは背景画像内 y=1050〜1354 の304px。
   ここに収めるため幅を 82.67% → 76% に縮小（高さ 254 → 233.5px）し、
   上下に約35pxずつ空けて中央に置く → top = (1050 + 35.25) / 1455 = 74.59%。 */
.lastCta__btn {
  position: absolute;
  top: 74.59%;
  left: 12%;              /* (100 - 76)/2。btnPulse の scale と干渉しないよう translateX を使わない */
  width: 76%;
  transform-origin: center center;
  animation: btnPulse 2s ease-in-out infinite;
  transition: opacity .2s;
}
.lastCta__btn:hover {
  opacity: .9;
}
.lastCta__btn img {
  display: block;
  width: 100%;
  height: auto;
}
@media (prefers-reduced-motion: reduce) {
  .lastCta__btn { animation: none; }
}

/* ===== 登壇者紹介と同じ背景（白＋薄い格子）のセクション ===== */
.gridSec {
  background-color: #fff;
  background-image:
    linear-gradient(rgba(0, 0, 0, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, .05) 1px, transparent 1px);
  background-size: 24px 24px;
  padding: 50px 40px 60px;
}
/* よくある質問：見出し上のリード（eyebrow） */
.faqEyebrow {
  margin-bottom: 16px;
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  color: #333;
}

/* よくある質問の見出し（TIMETABLE のピル見出しと同じデザイン） */
.faqTitle {
  width: fit-content;
  margin-inline: auto;
  padding: 5px 52px;
  background-color: #fff;
  border: 2px solid #333;
  border-radius: 999px;
  font-size: 4.4rem;
  font-weight: 800;
  text-align: center;
  color: #222;
  letter-spacing: .04em;
}
@media (max-width: 767px) {
  .faqTitle {
    font-size: 2.6rem;
    padding: 5px 32px;
  }
  /* SP: QA等を横いっぱいに（左右パディングを詰める。gridSecはFAQ専用） */
  .gridSec {
    padding-inline: 15px;
  }
  /* SP: 吹き出しを小さくして1行に収める */
  .faqEyebrow {
    font-size: 1.6rem;
  }
  /* SP: QAの回答（A）テキストを小さく */
  .qa-2 p {
    font-size: 1.5rem;
  }
}

/* --- Q&A アコーディオン（details/summary） --- */
.faq__list {
  max-width: 860px;
  margin: 44px auto 0;
  font-size: 1.8rem;          /* 元CSSはem基準なので、ここで基準サイズを与える */
}

.qa-2 {
  max-width: 1200px;
  margin: 0 auto 1em;
  border-bottom: 2px solid #d6dde3;
}

/* 開閉を高さアニメーションさせる。
   ネイティブ details は既定で瞬時開閉のため、::details-content の高さを
   0⇔auto でトランジション（interpolate-size で auto への補間を許可）。
   未対応ブラウザ（Safari/Firefox 等）は瞬時開閉にフォールバック。 */
:root {
  interpolate-size: allow-keywords;
}
.qa-2::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size .4s ease, content-visibility .4s allow-discrete;
}
.qa-2[open]::details-content {
  block-size: auto;
}

.qa-2 summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: 1em 2em 1em 3em;
  color: #333333;
  font-weight: 600;
  cursor: pointer;
}

.qa-2 summary::before,
.qa-2 p::before {
  position: absolute;
  left: 1em;
  font-weight: 600;
  font-size: 1.3em;
}

.qa-2 summary::before {
  color: #75bbff;
  content: "Q";
}

.qa-2 summary::after {
  transform: translateY(-25%) rotate(45deg);
  width: 7px;
  height: 7px;
  margin-left: 10px;
  border-bottom: 3px solid #333333b3;
  border-right: 3px solid #333333b3;
  content: '';
  transition: transform .5s;
}

.qa-2[open] summary::after {
  transform: rotate(225deg);
}

.qa-2 p {
  position: relative;
  transform: translateY(-10px);
  opacity: 0;
  margin: 0;
  padding: .3em 3em 1.5em;
  color: #333333;
  transition: transform .5s, opacity .5s;
}

.qa-2[open] p {
  transform: none;
  opacity: 1;
}

.qa-2 p::before {
  color: #ff8d8d;
  line-height: 1.2;
  content: "A";
}

/* ===== 枠の外のCTA（コピー＋ボタン） ===== */
.ctaBlock {
  padding: 0 30px 80px;
  text-align: center;
}
.ctaBlock__copy {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
  margin: 0 auto 18px;
}
.ctaBlock__btn {
  display: block;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  transform-origin: center center;
  animation: btnPulse 2s ease-in-out infinite;
  transition: opacity .2s;
}
.ctaBlock__btn:hover {
  opacity: .85;
}
.ctaBlock__btn img {
  display: block;
  width: 100%;
  height: auto;
}
@media (prefers-reduced-motion: reduce) {
  .ctaBlock__btn { animation: none; }
}

/* ステップの下・中央揃えのまとめ文 */
.flow09__note {
  margin-top: 28px;
  text-align: center;
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1.7;
  color: #2e6fac;
}

@media (max-width: 767px) {
  .frameSec {
    padding: 60px 15px;
  }
  /* スマホは「見出し行（上）＋内容行（下）」の縦積みテーブルにする。
     各項目とも 見出し=薄青バー(全幅) / 内容=白(全幅) で、外枠と行区切りで表として見せる。 */
  .infoTable {
    font-size: 1.5rem;
    border: 1px solid #d8ebf5;
    border-radius: 8px;
    overflow: hidden;          /* 角丸に合わせてセル背景を切る */
  }
  .infoTable tbody,
  .infoTable tr,
  .infoTable th,
  .infoTable td {
    display: block;
    width: auto;
  }
  .infoTable th {
    background-color: #eaf5fb;
    color: #184f8a;
    white-space: normal;
    padding: 8px 14px;
    border-top: 1px solid #d8ebf5;   /* 前の内容行との区切り */
    border-bottom: none;
  }
  .infoTable tr:first-child th {
    border-top: none;
  }
  .infoTable td {
    padding: 12px 14px;
    border-bottom: none;
    text-align: center;   /* SP: 内容も中央揃え */
  }
  .frame__bubble {
    padding: 12px 24px;
    font-size: 1.6rem;
  }
  .frame__head {
    padding: 56px 20px 20px;
    font-size: 2.1rem; /* SPのみ少し小さく（社名 .host__name と統一） */
  }
  .frame__head--host {
    gap: 16px;
  }
  .host__logo {
    width: 76px;
  }
  .host__name {
    font-size: 2.1rem;
  }
  .frame__body {
    padding: 20px;
    font-size: 1.7rem; /* SPは可読性優先（map_03のSP実測10.7pxは本文には小さすぎる） */
  }
  .frame__lead {
    font-size: 2.1rem; /* SPのみ少し小さく */
  }
  /* プロダクト画像4点はSPでもPCと同じ2×2（指示による。以前は1カラム縦積みだった）。
     幅が半分になる分、隙間を詰めて画像をなるべく大きく見せる。 */
  .host__products {
    gap: 10px;
  }
}

/* ===== フェスの楽しみ方（map） =====
   1枚絵を5分割したスライスなので、隙間・余白を一切入れずに積む。
   img は既定で display:block にしてあるため行間による1pxの隙間は発生しない。
   後からこの上にテキストを重ねられるよう position: relative を持たせている。 */
.map {
  position: relative;
}

.map__part {
  width: 100%;
  margin: 0;
  vertical-align: bottom;
}

/* テキストを重ねるスライスだけラップする。img は block なので隙間は増えない。
   container-type を付けることで、中の文字サイズを「この画像の幅」基準（cqw）で
   指定できるようになる。画像と同じ倍率で文字も拡縮するので、
   PCで収まっていればスマホでも必ずボックス内に収まる。 */
.map__slice {
  position: relative;
  container-type: inline-size;
}

/* 画像内の白ボックスの内側にテキストを流し込む。
   map_02（1200x767）の実測値： 白い内側 x=194〜1161 / y=202〜676
   → % 指定にしてあるので、枠幅が変わっても常にボックス内に収まる。 */
.map__box {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #4a4038;
  /* ボックス内側にちょうど収まる最大サイズを二分探索で実測して決定（限界3.15cqw）。
     3cqw(PC25.8px)から1px下げて 2.88cqw(PC約24.8px)。画像と同率で拡縮する。 */
  font-size: 2.88cqw;
  line-height: 1.75;
}

.map__box > * + * {
  margin-top: 1.2em;
}

.map__box--02 {
  top: 26.34%;    /*  202 / 767  */
  bottom: 11.86%; /*  676 / 767  */
  left: 16.17%;   /*  194 / 1200 */
  right: 3.25%;   /* 1161 / 1200 */
  padding: 0 3%;
}

/* map_03（1200x784）実測： 水色ボーダー内側 x=48〜1013 / y=240〜713
   （右端は白率でなくボーダー線で測定。背景イラストが白ボックス上に重なるため） */
.map__box--03 {
  top: 30.61%;    /*  240 / 784  */
  bottom: 9.06%;  /*  713 / 784  */
  left: 4%;       /*   48 / 1200 */
  right: 15.58%;  /* 1013 / 1200 */
  padding: 0 3%;
  /* 収まる最大2.87cqwを二分探索で実測。マージンを見て2.75cqw（PC約23.7px） */
  font-size: 2.75cqw;
}

/* map_04（1200x674）実測： 白い内側 x=191〜1157 / y=247〜580（右寄り・左に「当てる」） */
.map__box--04 {
  top: 36.65%;    /*  247 / 674  */
  bottom: 13.95%; /*  580 / 674  */
  left: 15.92%;   /*  191 / 1200 */
  right: 3.58%;   /* 1157 / 1200 */
  padding: 0 3%;
  /* テキストが短く上限3.13cqw。map_02と揃えて3cqw（PC約25.8px） */
  font-size: 3cqw;
}

@media (max-width: 767px) {
  /* SP: 段落間の隙間を詰めて、本文を少し大きく（画像内の白枠に収まる範囲で調整） */
  .map__box > * + * { margin-top: 0.35em; }
  .map__box { font-size: 2.95cqw; }        /* 02 */
  .map__box--03 { font-size: 2.95cqw; }   /* 実測: gap0.35emで3.1cqwまで収まる */
  .map__box--04 { font-size: 3.1cqw; }
}

/* ===== 登壇者紹介 ===== */
.speakers {
  background-color: #fff;
  /* 白地にうっすら格子模様を重ねる（24px間隔・薄い黒線でテクスチャを維持） */
  background-image:
    linear-gradient(rgba(0, 0, 0, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, .05) 1px, transparent 1px);
  background-size: 24px 24px;
  padding: 50px 40px 0;
}

/* --- ヘッダー（タイトル画像） ---
   タイトル・吹き出し・リード文はすべて speaker-title.png に含まれるため画像1枚で完結。 */
.speakers__head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 40px;
}

.speakers__title {
  width: 100%;   /* 見出し画像は枠の横幅いっぱい */
  height: auto;
}

/* --- カード下の白テキストコピー --- */
.speakers__note {
  margin-top: 32px;
  color: #555;
  font-size: 1.5rem;
  line-height: 1.7;
  text-align: center;
}

.speakers__closing {
  margin-top: 12px;
  color: #222;
  font-size: 3.4rem;
  font-weight: 700;
  line-height: 1.7;
  text-align: center;
}
/* 薄グレー背景では黄マーカーが読めないため、closing 内だけ青アクセントに上書き */
.speakers__closing .txt-yellow {
  color: #2e6fac;
}

@media (max-width: 767px) {
  .speakers__note {
    font-size: 1.3rem;
  }
  .speakers__closing {
    font-size: 1.8rem;
  }
}

/* --- カードグリッド（2列） --- */
.speakers__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

/* --- カード --- */
.speaker {
  position: relative;
  background-color: #f1f1f1;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* シアンのヘッダー帯。カード幅に対して 192/525 の比率で高さを決める。
   セクション背景と同じく白い格子模様をうっすら重ねる（16px間隔） */
.speaker__band {
  background-color: #41b7d5;
  background-image:
    linear-gradient(rgba(255, 255, 255, .16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .16) 1px, transparent 1px);
  background-size: 16px 16px;
  aspect-ratio: 525 / 192;
}
/* 登壇テーブルに合わせた帯色（タイムテーブルと同色）。A=緑 / B=橙 */
.speaker__band--a { background-color: #8bc53f; }
.speaker__band--b { background-color: #faaf3b; }

/* Aテーブル（緑）のカードはテキストエリア（＋アバター下の地色）を薄緑に */
.speaker:has(.speaker__band--a),
.speaker:has(.speaker__band--a) .speaker__body {
  background-color: #edf4e1;
}
/* Bテーブル（オレンジ）のカードはテキストエリア（＋アバター下の地色）をクリーム色に */
.speaker:has(.speaker__band--b),
.speaker:has(.speaker__band--b) .speaker__body {
  background-color: #fff9ee;
}

/* 円形アバター（実測: 径＝カード幅の約39%、中心が帯の下端に来る）。
   帯の直後に置き、負のマージンで半分だけ帯に食い込ませて中心を境界に合わせる。
   写真が来たら background-image か <img> に差し替え。 */
.speaker__avatar {
  width: 39%;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: #666;
  background-size: cover;
  background-position: center;
  margin: -19.5% auto 0; /* 径の半分だけ上へ＝中心を帯の下端に */
  align-self: center;
}

.speaker__body {
  padding: 14px 22px 24px;
  background-color: #f1f1f1;
  /* Xボタンをカード下端に固定するため、本文を縦フレックスにして高さいっぱいに伸ばす */
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.speaker__name {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  color: #1a1a1a;
}

.speaker__role {
  margin-top: 4px;
  font-size: 1.5rem;
  line-height: 1.4;
  text-align: center;
  color: #555;
}

.speaker__desc {
  margin-top: 16px;
  font-size: 1.5rem;
  line-height: 1.75;
  color: #333;
  /* 余白を吸収してボタンを下端へ押し下げる（本文量が違ってもボタンが揃う） */
  flex: 1 1 auto;
}

/* X（旧Twitter）ボタン：黒いピル */
.speaker__x {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  /* 説明文が余白を吸収して下端に固定。ボタン上の最小マージンは20px */
  margin-top: 20px;
  padding: 12px 20px;
  border-radius: 999px;
  background-color: #1a1a1a;
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
  transition: opacity .2s;
}

.speaker__x:hover {
  opacity: .85;
}

/* サービスサイトへのリンク（Smooth EC）。Xアイコンが無いぶん中央寄せのみ */
.speaker__x--web { gap: 0; }

/* ボタンを持たないカード（マッキー社長）の注記。ボタンと同じ位置に落とす */
.speaker__memo {
  margin-top: 20px;
  font-size: 1.3rem;
  line-height: 1.5;
  font-weight: 700;
  text-align: center;
  color: #555;
}

/* Xのアカウント名。ボタン内に入れると長いID（最長 @naotomatsushita）が
   はみ出すため、ボタンの外（直下）に独立した行として置く。 */
.speaker__xid {
  margin-top: 8px;
  font-size: 1.2rem;
  line-height: 1.4;
  text-align: center;
  color: #555;
  word-break: break-all;
}

.speaker__xicon {
  width: 1.4em;
  height: 1.4em;
  flex: 0 0 auto;
  fill: #fff;
}

@media (max-width: 767px) {
  .speakers {
    padding: 40px 15px 44px;
  }
  .speakers__head {
    flex-direction: column;
  }
  .speakers__title {
    width: 100%;        /* SPは登壇者紹介タイトルを横幅いっぱいに */
  }
  .speakers__grid {
    gap: 10px;   /* SPもPCと同じ2列（指示による。以前は1カラム縦積みだった） */
  }
  /* 2列でカード幅が約175pxしかないため、カード内の左右パディングを詰めて
     本文とXボタンに使える幅を稼ぐ（PCは 14px 22px 24px のまま） */
  .speaker__body {
    padding: 12px 10px 18px;
  }
  /* SP: カードのアバター。負マージンは必ず幅の半分にする
     （円の中心を帯の下端に合わせるため。ここがズレると帯との食い込みが崩れる） */
  .speaker__avatar {
    width: 38%;
    margin-top: -19%;
  }
  .speaker__name {
    font-size: 1.8rem;
  }
  .speaker__role,
  .speaker__desc {
    font-size: 1.25rem;
  }
  /* ボタンの中身は「Xアカウント」固定長になったので、極端に縮める必要はない */
  .speaker__x {
    font-size: 1.3rem;
    padding: 9px 10px;
    gap: 6px;
    margin-top: 14px;
  }
  .speaker__xid {
    margin-top: 6px;
    font-size: 1rem;
  }
}

/* ===== タイムテーブル =====
   レイアウト・配色は timetable.png 実測。
   グレー行 #E5E5E5 ／ 全体シアン #8ED7E8 ／ Aテーブル緑 #8BC53F ／
   Bテーブル橙 #FAAF3B ／ フィナーレ桃 #FC9A9A */
.tt {
  position: relative;
  isolation: isolate;      /* 装飾を tt の重なり文脈内に閉じ込める */
  overflow: hidden;        /* 傾けてはみ出す装飾をセクション内にクリップ */
  background-color: #fff;
  /* 白地にうっすら青い格子模様を重ねる（speakers と同じ24px間隔・低不透明度） */
  background-image:
    linear-gradient(rgba(46, 111, 172, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46, 111, 172, .06) 1px, transparent 1px);
  background-size: 24px 24px;
  padding: 90px 24px 64px;
}

/* 右上に配置する装飾アイコン（時計回りに傾けて右下方向へ斜め・本文の下に敷く） */
.tt__bgDeco {
  position: absolute;
  top: 39px;
  right: -22px;
  width: 240px;
  height: auto;
  z-index: -1;             /* 格子背景より上・本文より下 */
  opacity: .45;
  transform: rotate(15deg);
  transform-origin: top right;
  pointer-events: none;
}

.tt__title {
  width: fit-content;
  margin-inline: auto;
  padding: 5px 52px;
  background-color: #fff;
  border: 2px solid #333;
  border-radius: 999px;
  font-size: 4.4rem;
  font-weight: 800;
  text-align: center;
  color: #222;
  letter-spacing: .04em;
}

.tt__date {
  margin-top: 8px;
  padding: 20px 0;
  font-size: 2.4rem;
  font-weight: 700;
  text-align: center;
  color: #222;
}

/* 開場・終了の帯（開場=グレー） */
.tt__row {
  margin-top: 20px;
  padding: 16px;
  border-radius: 10px;
  background-color: #555;
  font-size: 2.5rem;
  font-weight: 700;
  text-align: center;
  color: #fff;
}
/* 「21:00 終了」だけ赤帯（指示） */
.tt__row--end { background-color: #d93a3a; }

/* 全体ブロック（シアン／桃）共通 */
.tt__block {
  position: relative;
  margin-top: 20px;
  border-radius: 16px;
  padding: 70px 20px 20px; /* 上は「全体」ピルと白カードの間の余白 */
}

.tt__block--all { background-color: #8ed7e8; }

/* 見出しピル（全体／Aテーブル等） */
.tt__pill {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #fff;
  border-radius: 999px;
  padding: 4px 24px;
  font-size: 1.8rem;
  font-weight: 800;
}
.tt__block--all .tt__pill { color: #2c9fb8; }

/* 全体ブロック右のイラスト（登壇者アイコン） */
.tt__blockImg {
  position: absolute;
  right: 16px;
  bottom: 14px;
  width: 108px;
  height: auto;
}
.tt__block--all .tt__blockImg {
  border-radius: 50%;
  bottom: auto;
  top: 14px;
}

/* 全体ブロック内の白カード */
.tt__wide {
  display: flex;
  align-items: center;
  gap: 14px;
  background-color: #fff;
  border-radius: 12px;
  padding: 16px 18px;
  /* 右のイラストに被らない幅に */
  margin-right: 120px;
}

.tt__wideText {
  font-size: 1.8rem;
  font-weight: 700;
  color: #333;
  line-height: 1.5;
}

/* 時刻バッジ */
.tt__time {
  flex: 0 0 auto;
  display: inline-block;
  padding: 4px 12px;
  border-radius: 8px;
  font-size: 1.8rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
}
.tt__time--all { background-color: #3ca9c0; }
.tt__time--a { background-color: #82be2c; }
.tt__time--b { background-color: #faaf3b; }

/* A/Bテーブルの時刻だけ少し小さく（全体・フィナーレは 1.8rem のまま） */
.tt__time--a,
.tt__time--b {
  font-size: 1.6rem;
  padding: 4px 10px;
}

/* 2カラム。
   Subgrid で左右の「同じ行」の高さを揃える（12:55とB13:15など、行が横断して一致）。
   親が 1(ヘッダー)+12(項目) の行を定義し、各カラムがその行に subgrid で乗る。
   A=12項目 / B=11項目 なので最終行はB側が空になる（カンプ通り）。 */
.tt__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 16px;
  row-gap: 12px;
  grid-template-rows: auto repeat(12, auto);
  margin-top: 20px;
}

.tt__col {
  grid-row: 1 / -1;
  display: grid;
  grid-template-rows: subgrid;
  row-gap: 12px;
  border-radius: 16px;
  padding-bottom: 14px;
}
.tt__col--a { background-color: #eaf5da; }
.tt__col--b { background-color: #fdefdb; }

/* カラム見出し（行1）。パッチワークで重ならないよう上下の余白を確保 */
.tt__colHead {
  position: relative;
  grid-row: 1;
  padding: 62px 16px 16px;
  border-radius: 16px 16px 0 0;
  text-align: center;
  color: #fff;
}
.tt__colHead--a { background-color: #8bc53f; }
.tt__colHead--b { background-color: #faaf3b; }

.tt__colHead .tt__pill { color: inherit; }
.tt__colHead--a .tt__pill { color: #6da82f; }
.tt__colHead--b .tt__pill { color: #e0902a; }

.tt__start {
  display: block;
  margin-top: 2px;
  font-size: 1.7rem;
  font-weight: 700;
  opacity: .95;
}

/* カラム内の各項目は左右に余白を入れてカードを浮かせる（ヘッダーは全幅） */
.tt__col > .tt__sess,
.tt__col > .tt__break,
.tt__col > .tt__tba {
  margin-inline: 14px;
}

/* セッションカード */
.tt__sess {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: start;
  background-color: #fff;
  border-radius: 12px;
  padding: 14px;
}

.tt__sessMain { min-width: 0; }

/* 見出し＝セッションのコピーそのもの（カテゴリ名の行・SESSIONラベルは廃止） */
.tt__sessTitle {
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1.5;
  color: #333;
}

/* 右カラム＝アバター＋その下に登壇者名（カンプ v47） */
.tt__speaker {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 130px;
}
.tt__avName {
  margin-top: 4px;
  font-size: 1.2rem;
  line-height: 1.35;
  text-align: center;
  color: #888;
  /* 「Smooth EC × マッキー社長」等が語中で折れないように（和文は既定でどこでも折れる） */
  word-break: keep-all;
}

/* アバター（右上・円）。2名は見出しの「A × B」と同じ左→右の順で少し重ねて並べる */
.tt__avatars {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.tt__av {
  position: relative;
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background-color: #ccc;
  background-size: cover;
  background-position: center;
  border: 2px solid #fff;
}
.tt__avatars .tt__av + .tt__av { margin-left: -14px; }
.tt__avatars .tt__av:first-child { z-index: 1; }   /* 左（＝先に書いた人）を手前に */
/* 写真が無い登壇者（安川）は「?」プレースホルダー */
.tt__av--q {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #9aa0a6;
  color: #fff;
  font-size: 2.4rem;
  font-weight: 800;
}

/* 休憩行 */
.tt__break {
  border-radius: 12px;
  padding: 14px;
  text-align: center;
  font-size: 1.6rem;
  font-weight: 700;
  color: #7a6a3a;
  background-color: rgba(0, 0, 0, .06);
}

/* 調整中（追加枠） */
.tt__tba {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 12px;
  padding: 14px;
  background-color: rgba(255, 255, 255, .5);
  color: #aaa;
}
.tt__tba .tt__time {
  background-color: #cfcfcf;
}
.tt__tbaText {
  font-size: 1.6rem;
  font-weight: 700;
}

/* フィナーレ：クライアント支給の1枚デザインを縦3分割したスライス（live2_01〜03）。
   文字・イラスト・背景すべて画像に焼き込み済み＝HTML側でのテキスト追加は不要。
   .lucky / .map と同じく font-size:0 でインライン画像間の余白を消し、隙間ゼロで縦積みする。 */
.tt__finale {
  margin-top: 48px;   /* Bテーブルとくっついて見えないよう、他ブロックより広めに空ける */
  font-size: 0;
  line-height: 0;
}

/* 角丸は「親に overflow:hidden」ではなく各画像に直接かける。
   Safari では overflow:hidden + border-radius が子の <img> を切り抜かないことがあり、
   角が四角いまま出てしまうため（＝Bテーブルと地続きに見える原因）。 */
.tt__finaleSlice {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: bottom;
}
.tt__finaleSlice:first-child { border-radius: 24px 24px 0 0; }
.tt__finaleSlice:last-child  { border-radius: 0 0 24px 24px; }

/* タイムテーブル末尾の博士＆助手イラスト（透過PNG・全幅） */
.tt__endImg {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 24px;
}

@media (max-width: 767px) {
  .tt {
    padding: 64px 14px 44px;
  }
  .tt__title { font-size: 2.6rem; }
  .tt__date { font-size: 1.8rem; }
  .tt__cols { gap: 8px; }
  .tt__colBody { padding: 8px; gap: 8px; }
  .tt__sess { padding: 10px; gap: 6px; }
  .tt__sessTitle { font-size: 1.4rem; }
  .tt__avName { font-size: 1.05rem; }
  .tt__speaker { max-width: 96px; }
  .tt__start { font-size: 1.4rem; }
  .tt__colHead { padding: 52px 12px 12px; }
  .tt__av { width: 40px; height: 40px; }
  .tt__wide { margin-right: 0; }               /* SP:「全体」白ボックスを横いっぱいに */
  .tt__blockImg { width: 74px; }
  .tt__block--all .tt__blockImg { width: 44px; }   /* SP:「全体」右アイコンを小さく */
  .tt__wideText { font-size: 1.4rem; }
  /* スマホは A/B を縦1カラムに（subgrid を解除して各カラムを普通の縦積みに） */
  .tt__cols {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    row-gap: 16px;
  }
  .tt__col {
    grid-row: auto;
    grid-template-rows: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
}

/* ===== 大抽選会（LUCKY DRAW） =====
   セクション全体を1枚デザインの縦スライス5枚で構成（map と同じ隙間ゼロ縦積み方式）。
   紺背景・花火・景品・参加条件・注記まで画像に焼き込み済み。 */
.lucky {
  font-size: 0;        /* インライン画像間の余白を消して隙間ゼロにする */
  line-height: 0;
}

.lucky__slice {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

/* ===== 参加特典（抽選会の下） =====
   1200幅のデザインを 01(上) / 02(見出しブロック) / 03(縦リピート帯) / 04(下) に分割。
   01・02・04 は画像そのまま、03 だけ .tokuten__body の背景として縦リピートさせ、
   中の特典詳細テキストの量に応じて枠が縦に伸びるようにしている。
   ★指示: コンテンツ幅いっぱい・パディング/マージンなしで縦積み（隙間ゼロ）。 */
.tokuten {
  background-color: #fff;
  padding-top: 60px;   /* tokuten_01.png の上のアキ（抽選会との間） */
  font-size: 0;        /* インライン画像間の余白を消して隙間ゼロにする（.lucky と同じ手法） */
  line-height: 0;
}

.tokuten__slice {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

/* 金の縦罫だけの帯(1200×77)を縦リピート。background-size:100% auto で画像側と同率に拡縮するので、
   どの画面幅でも 01/02/04 の罫線位置とピクセル単位で一致する。
   （tokuten_03.png は縦方向が完全に均一なため、タイルの継ぎ目は出ない） */
.tokuten__body {
  background-image: url(../img/tokuten_03.png?v=20260806a);
  background-repeat: repeat-y;
  background-position: top center;
  background-size: 100% auto;
  /* 左右は中の .sankaTokuten が自前で幅(85%)を持つのでパディング無し。
     上下は 02 の見出しブロック／04 の枠下端との間隔（%指定で画像と同率に拡縮）。 */
  padding: 3% 0;
}

/* ===== 個別特典の装飾枠（内側） =====
   sankatokuten_01(上飾り) / 02(縦の二重罫・縦リピート) / 03(下飾り)。
   素材は原寸1020px＝tokuten側1200pxの85%なので、幅85%・中央寄せで原寸比を再現する。 */
.sankaTokuten {
  width: 85%;          /* 1020 / 1200 */
  margin: 0 auto;
  font-size: 0;        /* 画像間の隙間ゼロ */
  line-height: 0;
}

.sankaTokuten__deco {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

/* 縦の二重罫だけの帯(1020×76)を縦リピート。背景も 100% auto で同率に拡縮するので
   上下の飾りと罫線位置がぴったり合う。（画像は縦方向が均一なのでタイルの継ぎ目は出ない） */
.sankaTokuten__body {
  background-image: url(../img/sankatokuten_02.png?v=20260806a);
  background-repeat: repeat-y;
  background-position: top center;
  background-size: 100% auto;
  /* 二重罫は原寸1020のうち x=6〜12 / 1007〜1013（＝約1.3%位置）。被らないよう左右5%あける。 */
  padding: 3% 5%;
  font-size: 2.4rem;   /* 本文の基準サイズ（map_03に合わせた値） */
  line-height: 1.8;
  color: #3a332a;
}

/* 見出し：登壇者アイコン＋「◯◯さんより」。アイコンとテキストを横並びにして
   そのかたまりごと中央揃えにするため inline-flex を使う（text-align:center が効く）。 */
.sankaTokuten__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 0 0 1em;
  line-height: 1.4;
}

.sankaTokuten__avatar {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background-color: #fff;
  background-size: cover;
  background-position: center;
  /* 枠の金罫と同系の細い縁 */
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px #c3b492;
}

.sankaTokuten__headText {
  font-size: 3rem;
  font-weight: 700;
  color: #6b5c47;   /* tokuten_02 の「参加特典」と同じ色（実測 rgb(107,92,71)） */
}

/* 見出し直下のボックス（指定色 #a49b8a・角丸）
   左＝白バッジ「特典/01」、右＝白の特典名。バッジは縮まず、特典名だけ折り返す。 */
.sankaTokuten__box {
  display: flex;
  align-items: center;
  gap: 20px;
  background-color: #a49b8a;
  border-radius: 12px;
  padding: 24px 28px;
  margin: 0 0 1em;
  color: #fff;
}

.sankaTokuten__badge {
  flex: 0 0 auto;      /* 特典名が長くてもバッジは潰れない */
  margin: 0;
  padding: 10px 18px;
  border-radius: 8px;
  background-color: #fff;
  color: #6b5c47;      /* 白地で読める濃さ（#a49b8a は白地だとコントラスト不足） */
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  white-space: nowrap;
}

.sankaTokuten__boxText {
  margin: 0;
  font-weight: 700;
  line-height: 1.5;
}

/* 特典の詳細。ボックス内の特典名より一段小さく落とす */
.sankaTokuten__desc {
  margin: 0 0 1.6em;   /* 次の特典ボックスとの間隔 */
  font-size: 1.8rem;
  line-height: 1.9;
}
.sankaTokuten__desc:last-child {
  margin-bottom: 0;
}

/* 登壇者ごとの枠は縦に繰り返す。枠と枠のあいだ（%指定で画像と同率に拡縮） */
.sankaTokuten + .sankaTokuten {
  margin-top: 4%;
}

/* 特典一覧の下の注記 */
.tokuten__note {
  margin: 4% 0 0;
  font-size: 1.5rem;
  line-height: 1.8;
  text-align: center;
  color: #6b5c47;
}

@media (max-width: 767px) {
  .tokuten {
    padding-top: 30px;
  }
  .sankaTokuten__body {
    font-size: 1.6rem;
  }
  .sankaTokuten__avatar {
    width: 48px;
    height: 48px;
  }
  .sankaTokuten__headText {
    font-size: 2rem;
  }
  .sankaTokuten__head {
    gap: 10px;
  }
  .sankaTokuten__box {
    padding: 16px 18px;
    border-radius: 8px;
    gap: 12px;
  }
  .sankaTokuten__badge {
    padding: 7px 12px;
    border-radius: 6px;
    font-size: 1.4rem;
  }
  .sankaTokuten__desc {
    font-size: 1.3rem;
  }
  .tokuten__note {
    font-size: 1.2rem;
  }
}

/* 仮：背景固定の確認用セクション（実装が進んだら差し替え） */
.section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0b4f8a;
  font-size: 4rem;
  font-weight: 700;
}