/* ===== Tokens (ブランドガイドより) ===== */
:root{
  --base:#F1F7FF;
  --navy:#14264C;
  --navy-2:#0E1B38;
  --red:#D2161A;
  --gold:#BA9B5F;
  --text:#333333;
  --muted:#6b7280;
  --line:#e5e7eb;
  --white:#ffffff;

  --header-h:64px;
  --container:1200px;
  --form-w:360px;
  --gap:32px;

  --radius:10px;
  --radius-lg:16px;

  --shadow-card:0 8px 24px rgba(20,38,76,.08);
  --shadow-form:0 16px 40px rgba(20,38,76,.18);

  --serif:"Noto Serif JP", "Yu Mincho", "游明朝", serif;
  --sans:"Noto Sans JP", system-ui, -apple-system, "Segoe UI", sans-serif;
  --num:"Roboto", "Noto Sans JP", sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:var(--sans);
  color:var(--text);
  background:var(--base);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

/* 上半分（ヒーロー領域）を覆うネイビーの背景帯
   グラデ＋テクスチャは画像（kv_bg_pc.jpg）で表現。画像未配置時は下のCSSグラデがフォールバック表示される */
body::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:664px;
  background-color:#14264C;
  background-image:
    url('../assets/parts/kv_bg_pc.jpg'),
    radial-gradient(ellipse at 20% 0%, rgba(186,155,95,.10), transparent 50%),
    linear-gradient(180deg, #0E1B38 0%, #14264C 60%, #14264C 100%);
  background-position:center top;
  background-size:cover;
  background-repeat:no-repeat;
  z-index:-1;
}

/* ===== Header ===== */
.site-header{
  position:relative;
  z-index:5;
  min-height:var(--header-h);
  display:flex;
  align-items:center;
  padding-top:32px;
  color:#fff;
}
.site-header__inner{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
}
.brand img{
  width:186px;
  height:auto;
  display:block;
}
/* ロゴ画像が無いときの暫定マーク */
.brand__mark{
  width:18px; height:18px;
  background:var(--red);
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}
.brand__text{
  font-weight:700;
  font-size:14px;
  letter-spacing:.04em;
}

/* ===== 2カラムグリッド（メイン + フォーム追従レーン） ===== */
.page{
  position:relative;
  max-width:var(--container);
  margin:0 auto;
  padding:0 24px 80px;
}
.page-grid{
  display:grid;
  grid-template-columns: minmax(0,1fr) var(--form-w);
  gap:var(--gap);
}

/* ===== Hero ===== */
.hero{
  color:#fff;
  padding:24px 0 40px;
  min-height:480px;
  position:relative;
}
/* KV背景の三角装飾（コンテンツ幅外にはみ出すため body 直下に配置） */
.kv-bg{
  position:absolute;
  top:var(--header-h);
  left:0;
  right:0;
  height:1400px;
  pointer-events:none;
  z-index:-1;
  overflow:hidden;
}
.kv-bg::before,
.kv-bg::after{
  content:"";
  position:absolute;
  display:block;
  background-repeat:no-repeat;
  background-size:contain;
}
.kv-bg::before{
  /* 左：多層三角（parts1）— W280, hero-sub あたりの高さ */
  top:262px;
  left:0;
  width:280px;
  height:392px;
  background-image:url('../assets/parts/kv_bg_parts1.png');
  background-position:top left;
}
.kv-bg::after{
  /* 右：navy+gold ダイアゴナル（parts2）— W384, WHYセクションの高さ */
  top:666px;
  right:0;
  width:384px;
  height:467px;
  background-image:url('../assets/parts/kv_bg_parts2.png');
  background-position:top right;
}
.hero__inner{
  position:relative;
  z-index:1;
}

/* 明朝コピー（後ほどSVGに差し替え前提のプレースホルダー） */
.hero__copy{
  margin:0 0 24px;
}
.hero__copy img{
  display:block;
  max-width:100%;
  width:auto;
  height:auto;
}
.hero__copy .ph{
  /* 画像が無い間に大きさだけ確保するプレースホルダー枠 */
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.04);
  border:1px dashed rgba(255,255,255,.25);
  color:rgba(255,255,255,.55);
  font-size:12px;
  letter-spacing:.05em;
  border-radius:6px;
}
.hero__copy--lead .ph{ width:520px; max-width:100%; height:36px; margin-bottom:12px; }
.hero__copy--title .ph{ width:640px; max-width:100%; height:200px; margin-bottom:12px; }
.hero__copy--sub  .ph{ width:520px; max-width:100%; height:32px; }

/* 日時グループ（同じくSVG差し替え前提） */
.hero__date{
  margin:0 0 36px;
}
.hero__date img{
  display:block;
  max-width:100%;
  width:auto;
  height:auto;
}
.hero__date .ph{
  display:flex;
  align-items:center;
  justify-content:center;
  width:560px; max-width:100%; height:80px;
  background:rgba(255,255,255,.04);
  border:1px dashed rgba(255,255,255,.25);
  color:rgba(255,255,255,.55);
  font-size:12px;
  letter-spacing:.05em;
  border-radius:6px;
}

/* ロゴ並べ */
.hero__logos{
  background:#fff;
  border-radius:var(--radius);
  padding:18px 22px;
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap:8px 20px;
  align-items:center;
  box-shadow:var(--shadow-card);
}
.hero__logos .logo-cell{
  min-height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:4px 2px;
}
.hero__logos .logo-cell img{
  max-width:100%;
  max-height:36px;
  width:auto;
  height:auto;
  object-fit:contain;
}
/* 縦に大きく見えるロゴは個別に高さを抑える */
.hero__logos .logo-cell img[src*="wacul"]{
  max-height:29px;
}
.hero__logos .logo-cell img[src*="kakutoku"]{
  max-height:26px;
}

/* ===== 装飾大文字（SVG / Figma書き出し） ===== */
.deco-word{
  position:absolute;
  right:0;
  top:0;
  pointer-events:none;
  line-height:0;
}
.deco-word img{
  display:block;
  width:auto;
  height:auto;
}

/* ===== Section共通 ===== */
.section{
  background:var(--white);
  border-radius:var(--radius-lg);
  padding:48px 32px;
  margin-top:32px;
  box-shadow:var(--shadow-card);
  position:relative;
  overflow:hidden;
}
.section__title{
  font-family:var(--sans);
  font-size:32px;
  font-weight:700;
  margin:0 0 32px;
  color:var(--navy);
  letter-spacing:.04em;
}
.section__lead{
  font-size:15px;
  line-height:2;
  color:var(--text);
  max-width:680px;
}
.section__lead p{ margin:0 0 1em; }
.section__lead strong{
  font-weight:700;
  color:var(--navy);
}

/* WHY / OVERVIEW：タイトル下にゴールドの区切り線 */
.section--why .section__title,
.section--overview .section__title{
  margin-bottom:28px;
}
.section--why .section__title::after,
.section--overview .section__title::after{
  content:"";
  display:block;
  width:120px;
  height:2px;
  background:var(--gold);
  margin-top:24px;
}

/* ===== Program ===== */
/* デザインカンプ準拠：ヘッダーバー（TIME/SESSION/SPEAKERS）+ Time / Session(title+subtitle) / Speaker(company → dept → name) */
.program-table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}
.program-table td{
  text-align:left;
  padding:20px 12px;
  border-bottom:1px solid var(--line);
  vertical-align:top;
}
/* ヘッダーバー（TIME / SESSION / SPEAKERS） */
.program-table thead th{
  background:#EAF0F9;
  color:var(--navy);
  font-family:var(--num);
  font-weight:700;
  font-size:11px;
  letter-spacing:.18em;
  text-align:left;
  padding:15px 12px;
  white-space:nowrap;
  border-bottom:2px solid var(--gold);
}
.program-table thead th:first-child{
  padding-left:20px;
}
/* ヘッダー直下の最初の行は上線なし＋余白 */
.program-table tbody tr:first-child td{
  padding-top:28px;
}
.program-table td.time{
  font-family:var(--num);
  font-weight:700;
  color:var(--navy);
  width:74px;
  font-size:14px;
  letter-spacing:.02em;
}
.program-table td.session{
  padding-right:24px;
}
.program-table .topic-cat{
  font-family:var(--num);
  font-weight:700;
  font-size:11px;
  letter-spacing:.16em;
  color:var(--gold);
  margin-bottom:6px;
}
.program-table .topic{
  font-weight:700;
  color:var(--navy);
  font-size:14px;
  line-height:1.6;
  margin-bottom:4px;
}
.program-table .topic--sub{
  display:block;
  font-weight:500;
  color:var(--text);
  font-size:12px;
  line-height:1.6;
  margin-top:2px;
}
.program-table td.speaker-meta{
  width:280px;
  color:var(--text);
  font-size:12px;
  line-height:1.7;
}
.program-table .speaker-meta .co{
  color:var(--text);
  font-weight:500;
}
.program-table .speaker-meta .dept{
  color:var(--muted);
}
.program-table .speaker-meta .name{
  color:var(--navy);
  font-weight:700;
  margin-top:2px;
}

/* ===== Speakers ===== */
/* デザインカンプ準拠：左上に小さな円形写真／右側に 会社・部署 → 氏名 → 本文 → セッションテーマbox */
.speakers{
  display:grid;
  grid-template-columns: 1fr;
  gap:16px;
}
.speaker{
  display:grid;
  grid-template-columns:112px 1fr;
  gap:24px;
  padding:24px 28px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:#fff;
  align-items:start;
}
.speaker__photo{
  width:112px; height:112px;
  margin-top:4px;
}
/* 写真未確定の登壇者：写真だけ非表示（グリッド列は維持し本文位置を他カードと揃える） */
.speaker--no-photo .speaker__photo{
  visibility:hidden;
}
.speaker__photo img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.speaker__body{ min-width:0; }
.speaker__meta{
  display:flex;
  flex-wrap:wrap;
  gap:4px 20px;
  font-size:11px;
  color:var(--muted);
  margin-bottom:6px;
  letter-spacing:.02em;
}
.speaker__name{
  font-weight:700;
  color:var(--navy);
  font-size:20px;
  margin:0 0 12px;
  letter-spacing:.06em;
}
.speaker__bio{
  font-size:12px;
  line-height:1.9;
  color:var(--text);
  margin:0 0 14px;
}
/* プロフィールのアコーディオン用トグル（PCでは非表示・SPのみ表示） */
.speaker__bio-toggle{
  display:none;
}
.speaker__session{
  display:inline-block;
  background:#F2F5FB;
  border-radius:6px;
  padding:10px 16px;
  font-size:12px;
  line-height:1.6;
  max-width:100%;
}
.speaker__session-label{
  display:block;
  font-size:10px;
  font-weight:700;
  color:var(--muted);
  letter-spacing:.1em;
  margin-bottom:2px;
}
.speaker__session-topic{
  color:var(--navy);
  font-weight:700;
}

/* ===== Overview ===== */
.overview-list{
  list-style:none;
  margin:0;
  padding:0;
}
.overview-list li{
  display:grid;
  grid-template-columns:120px 1fr;
  gap:16px;
  padding:16px 0;
  border-bottom:1px dotted var(--line);
  font-size:14px;
}
.overview-list dt{
  color:var(--muted);
  font-weight:700;
  font-size:12px;
  letter-spacing:.1em;
}
/* 開催日：日付と時刻が途中で切れないように（折返しは日付↔時刻の境目のみ） */
.overview-list .ov-nb{
  white-space:nowrap;
}
.overview-list a{
  color:inherit;
  text-decoration:underline;
  text-underline-offset:2px;
  transition:color .15s;
}
.overview-list a:hover{
  color:var(--navy);
}

/* ===== Form Sidebar (追従) ===== */
.form-rail{
  position:relative;
}
.form-card{
  position:sticky;
  top:24px;
  background:#fff;
  border-radius:var(--radius);
  box-shadow:var(--shadow-form);
  border:1px solid rgba(255,255,255,.6);
  max-height: calc(100vh - 48px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.form-card__head{
  flex:0 0 auto;
  background:linear-gradient(135deg, #BA9B5F 0%, #A08245 100%);
  color:#fff;
  text-align:center;
  padding:12px 16px;
  position:relative;
}
.form-card__present{
  margin:0;
  font-size:13px;
  font-weight:700;
  letter-spacing:.05em;
  line-height:1.4;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.form-card__present .material-symbols-outlined{
  font-size:20px;
  line-height:1;
  flex:0 0 auto;
  font-variation-settings:'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}
.form-card__embed{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:16px 20px 20px;
}
.form-card__embed iframe{
  width:100% !important;
  max-width:100% !important;
  border:0;
}
.form-card__embed::-webkit-scrollbar{ width:6px; }
.form-card__embed::-webkit-scrollbar-thumb{
  background:rgba(20,38,76,.2);
  border-radius:3px;
}

/* ===== Footer ===== */
.site-footer{
  background:var(--navy-2);
  color:rgba(255,255,255,.7);
  padding:48px 24px;
  margin-top:80px;
  text-align:center;
  font-size:13px;
}
.site-footer__company{
  color:#fff;
  font-weight:700;
  font-size:14px;
  margin-bottom:12px;
  letter-spacing:.04em;
}
.site-footer__company a{
  color:inherit;
  text-decoration:underline;
  text-underline-offset:2px;
  transition:color .15s;
}
.site-footer__company a:hover{
  color:var(--gold);
}
.site-footer__copy{
  color:rgba(255,255,255,.6);
  letter-spacing:.04em;
}

/* ===== SP CTA（下部追従） ===== */
.sp-cta{
  display:none;
}

/* ===== SP用ヒーロー（PCでは非表示） ===== */
.hero--sp{ display:none; }

/* ===== Responsive ===== */
@media (max-width: 1024px){
  body::before{
    height:auto; bottom:initial; min-height:760px;
    background-image:
      url('../assets/parts/kv_bg_sp.jpg'),
      radial-gradient(ellipse at 20% 0%, rgba(186,155,95,.10), transparent 50%),
      linear-gradient(180deg, #0E1B38 0%, #14264C 60%, #14264C 100%);
  }
  .page-grid{
    grid-template-columns: 1fr;
  }

  /* SPは hero--sp 内の中央ロゴを使うため、ヘッダーのロゴは非表示（重複防止） */
  .site-header{ display:none; }

  /* PC用ヒーローは非表示、SP用ヒーローを表示 */
  .hero--pc{ display:none; }
  .hero--sp{
    display:block;
    color:#fff;
    padding:24px 0 32px;
    text-align:center;
  }
  .hero--sp .hero__logo-top{
    margin:0 auto 24px;
    display:flex;
    justify-content:center;
  }
  .hero--sp .hero__logo-top img{
    height:36px;
    width:auto;
  }
  .kv-bg{ display:none; }
  .hero--sp .hero__sp-kv{
    width:100%;
    max-width:420px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:24px;
  }
  .hero--sp .hero__sp-kv .hero__copy,
  .hero--sp .hero__sp-kv .hero__date{
    margin:0;
    width:100%;
  }
  .hero--sp .hero__sp-kv img{
    width:auto;
    max-width:88%;
    height:auto;
    display:block;
    margin:0 auto;
  }
  .hero--sp .hero__sp-kv .hero__copy--title img{ max-width:96%; }
  .hero--sp .hero__logos{
    margin-top:20px;
    grid-template-columns: repeat(4, 1fr);
    gap:0 20px;
  }

  .section{ padding:32px 18px; }
  .section__title{ font-size:24px; }
  /* 横並び → 縦積み（中央揃え） */
  .speaker{ grid-template-columns:1fr; gap:0; padding:18px 18px; text-align:center; }
  .speaker__photo{ width:88px; height:88px; margin-top:0; justify-self:center; }
  /* 写真未確定カードはSPでは写真枠ごと消す（PCは列維持のためvisibility:hidden） */
  .speaker--no-photo .speaker__photo{ display:none; }
  .speaker__name{ font-size:17px; margin-bottom:0; }
  .speaker__meta{ font-size:10.5px; gap:4px 10px; margin-bottom:6px; justify-content:center; }
  /* プロフィール文はアコーディオン（既定は閉じる） */
  .speaker__bio{ font-size:12px; line-height:1.8; display:none; margin:0 0 10px; text-align:left; }
  .speaker.is-open .speaker__bio{ display:block; }
  .speaker__bio-toggle{
    display:inline-flex;
    align-items:center;
    gap:5px;
    margin:0 0 12px;
    padding:0;
    background:none;
    border:none;
    color:var(--navy);
    font-family:inherit;
    font-size:12px;
    font-weight:700;
    letter-spacing:.04em;
    cursor:pointer;
  }
  .speaker__bio-toggle::after{
    content:"+";
    font-size:15px;
    line-height:1;
  }
  .speaker.is-open .speaker__bio-toggle::after{ content:"\2212"; }
  .speaker__session{ display:block; }
  .deco-word img{ height:44px; width:auto; }

  /* プログラム表もSPで読みやすく */
  .program-table td{ padding:14px 6px; }
  .program-table td.time{ width:54px; font-size:13px; }
  .program-table td.session{ padding-right:8px; }
  .program-table .topic{ font-size:13px; }
  .program-table .topic--sub{ font-size:11.5px; }
  .program-table td.speaker-meta{ width:auto; font-size:11.5px; }

  /* 開催概要：SPは固定幅でdtを揃えつつ間隔を詰める（3文字ラベルが収まる最小幅）。ddの折返し低減のためフォントも微縮 */
  .overview-list li{ grid-template-columns:44px 1fr; gap:4px; font-size:13px; }

  /* PC用の追従フォームは隠して、ページ下部に通常配置のフォームを表示 */
  .form-rail{
    order:99;
  }
  .form-card{
    position:static;
    box-shadow:var(--shadow-card);
    margin-top:32px;
    max-height:none;
    overflow:hidden;
  }
  .form-card__embed{
    overflow:visible;
    max-height:none;
  }

  /* 下部追従CTA */
  .sp-cta{
    display:flex !important;
    position:fixed;
    left:0; right:0; bottom:0;
    z-index:999;
    background:rgba(20,38,76,.96);
    padding:10px 12px;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    box-shadow:0 -4px 16px rgba(0,0,0,.2);
  }
  .sp-cta__btn{
    flex:1;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:14px 16px;
    background:var(--red);
    color:#fff;
    font-weight:700;
    font-size:15px;
    text-decoration:none;
    border-radius:8px;
    letter-spacing:.04em;
  }
  .sp-cta__btn::after{
    content:"→";
    font-weight:400;
  }
  body{ padding-bottom:72px; }
  .site-footer{ margin-bottom:0; }
}