/* contents.css - シンプル版（ヒーロー以降） */

/* 中央カラム */
.content-centered{max-width:880px;margin:0 auto;padding:0 12px}

.hero-actions{
  display:flex;
  justify-content:center;    /* 中央寄せ */
  align-items:center;
  gap:12px;
  width:100%;
  margin:18px 0;
  box-sizing:border-box;
  padding:0 12px;
}

/* ボタンの表示をリセット（親の幅規定が影響する場合に備える） */
.hero-actions .btn,
.hero-actions a{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  margin:0;
  width:auto;                /* 幅100%などを解除 */
  box-sizing:border-box;
}

/* 大ボタンの最小幅（必要なら調整） */
.hero-actions .large-cta,
.hero-actions .btn.primary{
  min-width:200px;
}

.mobile-bottom-cta{
  display:none; /* デスクトップでは表示しない */
}

.scroll-offset-padding {
  scroll-margin-top: 84px; /* CSS対応ブラウザの場合に有効。ヘッダー高さに合わせて調整 */
}
.scroll-offset {
  scroll-margin-top: var(--scroll-offset);
}

/* セクション（白背景） */
.card{
  background:#ffffff;
  padding:18px;
  margin:20px 0 0;
  box-shadow:none;
  border:none;
  position:relative;
}

/* セクション間：細線（ただし register セクションの前は除外） */
.card:not(#register)::before{
  content:"";
  display:block;
  width:min(880px,calc(100% - 48px));
  height:1px;
  background:var(--primary);
  margin:0 auto 14px;
  opacity:0.9;
}

/* セクション（汎用プログラム用） */
.card2{
  background:#ffffff;
  padding:18px;
  margin:20px 0 0;
  box-shadow:none;
  border:none;
  position:relative;
}
.card2 a{text-decoration:none;color:var(--primary);}

/* セクションタイトル / 本文 */
.section-title{margin:0 0 12px 0;font-size:18px;font-weight:700;color:#0b1726}
.overview-text{margin:0;color:#2b3038;line-height:1.8}

/* Notice（注意） — 指定色 */
.notice{background:#E5EDF3;padding:16px;margin:20px 0}
.notice .content-centered{max-width:880px;margin:0 auto;padding:0}
.notice-title{margin:0 0 8px 0;font-size:16px;font-weight:800;color:#0b1726}
.notice-text{margin:0;color:#153145;line-height:1.8;font-size:15px}

/* 講師 */
.speaker-inner{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}
.speaker-photo{
  width:140px;
  height:140px;
  object-fit:cover;
  object-position:50% 30%; 
  border-radius:8px;
  border:2px solid #fff; 
  box-shadow:0 8px 18px rgba(0,72,135,0.08);
  flex-shrink:0;
}
.speaker-body{flex:1;display:flex;flex-direction:column;gap:8px;justify-content:center}
.speaker-meta{display:flex;flex-direction:column;gap:6px}
.meta-row{display:flex;gap:12px;align-items:center}
.meta-key{width:100px;font-size:13px;font-weight:600;white-space:nowrap;color:var(--muted)}
.meta-value{font-weight:700;color:#111827}

/* プロフィールリンクの配置：PCは右寄せ、SPは中央 */
.profile-link-wrap{display:flex;justify-content:flex-end}
.profile-link{color:var(--primary);font-weight:700;text-decoration:none}
@media (max-width:680px){
  .profile-link-wrap{justify-content:center}
}

/* テーブル */
.table-wrap {
  overflow-x: auto;
  border-radius: 6px;
  margin-top: 8px;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}

/* テーブル全体 */
table {
  width: 100%;
  border-collapse: collapse;
  min-width: 700px; /* 横スクロール許容（必要なら調整） */
  box-sizing: border-box;
}


/* tbody のセル：下罫線は実線で統一  */
tbody td {
  padding: 14px 14px;
  border-bottom: 1px solid #eef3fb; /* 実線に変更（色は現状と合わせる） */
  vertical-align: top;
  font-size: 15px;
  color: #111827;
  line-height: 1.7;
  box-sizing: border-box;
}

/* 表の最初のデータ行の上に見出し相当の横線を追加 */
.table-wrap table tbody tr:first-child td {
  border-top: 1px solid #eef3fb; /* thead 下の色に合わせて実線を表示 */
}

/* アジェンダ（テーブル内の箇条など） */
.agenda {
  list-style: none;
  margin: 0;
  padding: 0;
}
.agenda li {
  padding: 6px 0;
  color: #374151;
  font-size: 14px;
}

/* CTA */
.mid-cta-wrap{text-align:center;margin:18px 0}
.large-cta{padding:12px 22px;border-radius:12px;background:var(--primary);color:#fff;text-decoration:none;font-weight:800;display:inline-block}

/* フォーム */
.apply-form{display:flex;flex-direction:column;gap:10px;max-width:640px;margin: 0 auto}

/* モバイル下部常時表示ボタン（強制表示用） */
.mobile-bottom-cta{
  display:none; /* デフォルトは非表示。JS/CSSでモバイル時に表示する */
}

/* レスポンシブ */
@media (max-width:960px){.content-centered{padding:0 12px}}
@media (max-width:680px){
  table{min-width:0}
  .notice .content-centered{padding:0 8px}
  .hero-actions .btn,.hero-actions .btn-outline{width:100%;box-sizing:border-box}
  .card:not(:first-child):not(#register)::before{width:calc(100% - 32px);margin-bottom:12px}
  .hero-actions {
    display: none ;
  }
  .hero-actions .btn{ width:100%; }
  .mobile-bottom-cta{
    display:block;
    position:fixed;
    left:50%;
    transform:translateX(-50%);
    bottom:10px;
    z-index:140;
    width:92%;
    max-width:720px;
    background:var(--primary);
    color:#fff;
    text-align:center;
    padding:12px 16px;
    border-radius:10px;
    box-shadow:0 10px 30px rgba(0,72,135,0.18);
    font-weight:800;
    text-decoration:none;
    font-size:16px;
  }
  /* 対象をより具体的に指定：section.speaker.card 内の要素を縦方向へ */
  section.speaker.card .speaker-inner {
    display: flex;
    flex-direction: column;  /* 縦並び */
    align-items: center;     /* 中央寄せ */
    text-align: center;
    gap: 12px;
  }

  /* 画像は上（order:1）・中央配置 */
  section.speaker.card .speaker-photo {
    order: 1;
    width: 140px;   /* 必要に応じて 160/140 に調整 */
    height: 140px;
    object-fit: cover;
    object-position: 50% 32%;
    margin: 0 auto;
    flex-shrink: 0;
  }

  /* 本文/メタは下（order:2）・幅は全幅 */
  section.speaker.card .speaker-body {
    order: 2;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
  }

  /* メタ行（label/value）が横並びなら縦並びへ */
  section.speaker.card .speaker-meta,
  section.speaker.card .meta-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
  }

  /* ラベル幅は自動化して中央寄せ */
  section.speaker.card .meta-key {
    width: auto;
    text-align: center;
  }
  section.speaker.card .meta-value {
    text-align: center;
  }

  section.speaker.card .profile-link-wrap {
    justify-content: center;
    width: 100%;
  }

  /* 必要に応じて余白微調整 */
  section.speaker.card .speaker-inner {
    padding: 6px 8px;
  }
}