/* ==========================================================================
   1. 変数・デザインシステム（基本設定）
   ========================================================================== */
:root {
  /* カラーシステム */
  --primary-color: #005483; /* メインのライトネイビー */
  --navy-dark: #1a355e; /* 登壇者見出し等のディープネイビー */
  --red-accent: #df1a45; /* 重要なアクセント・CV用の赤 */
  --accent-orange: #e67e22; /* サブアクセントのオレンジ */

  /* 背景・テキスト */
  --bg-light: #f8fafc; /* 薄いグレー背景 */
  --bg-navy-gray: #edf2f7; /* 登壇タイトルの薄い紺グレー */
  --text-main: #333333; /* 本文のメインカラー */
  --text-muted: #64748b; /* プロフィール等のマイルドなグレー */
  --text-sub: #475569; /* 会社名等のサブグレー */
  --white: #ffffff;

  /* シャドウ（モダンな洗練された影） */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 12px 40px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.12);
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "BIZ UDPGothic", Meiryo, sans-serif;
  line-height: 1.6;
  color: var(--text-main);
  background-color: var(--white);
}

.lp-main {
  padding: 40px 20px 80px; /* モバイル時の基本余白 */
}

/* ==========================================================================
   2. ヘッダー・ヒーローエリア
   ========================================================================== */
.lp-header {
  padding: 20px;
  text-align: center;
}

.header-inner {
  background: url(../images/lp_header.jpg) center/cover no-repeat;
  max-width: 1150px;
  padding: 40px 15px;
  margin: 0 auto;
  border-radius: 12px 12px 0 0;
  position: relative;
  overflow: hidden;
}

.hero-content {
  padding: 35px 25px;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(25px) saturate(200%);
  -webkit-backdrop-filter: blur(25px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 12px;
  max-width: 920px;
  margin: 0 auto;
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}

.pre-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.pre-area img {
  max-width: 173px;
  height: auto;
  margin: 0 auto;
  display: block;
  filter: drop-shadow(0 0 50px #fff) drop-shadow(0 0 30px #fff);
}

/* 「ユーザー様限定」プレミアム・ゴールドプレート装飾 */
.target-label {
  display: inline-flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%), linear-gradient(to right, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c);
  color: #4a2f24;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
  padding: 0.4rem 1.6rem;
  border-radius: 3px;
  font-size: 0.95rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  border: 1px solid #8a6d3b;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 1px 3px rgba(0, 0, 0, 0.5),
    0 4px 10px rgba(0, 0, 0, 0.2);
}

.target-label::before {
  content: "★";
  font-size: 0.8em;
  margin-right: 4px;
  color: #4a2f24;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.4));
}

.main-title {
  color: var(--primary-color);
  font-size: 1.8rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1.3;
  margin-bottom: 15px;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}

.sub-catchphrase {
  font-size: 1.1rem;
  font-weight: bold;
  line-height: 1.6;
  color: var(--white);
  text-shadow:
    2px 2px 1px rgba(7, 12, 65, 0.8),
    2px 2px 4px rgba(7, 12, 65, 0.8),
    2px 2px 8px rgba(7, 12, 65, 0.6),
    2px 2px 16px rgba(7, 12, 65, 0.4),
    2px 2px 32px rgba(7, 12, 65, 0.2);
}

.sub-catchphrase-copy {
  display: block;
  color: var(--text-main);
  font-size: 0.85rem;
  margin-top: 10px;
  font-weight: normal;
  text-shadow: none;
}

/* ==========================================================================
   3. イベント概要帯（ヘッダー下）
   ========================================================================== */
.event-brief-info {
  background-color: var(--primary-color);
  color: var(--white);
  padding: 20px 15px;
  max-width: 1150px;
  margin: 0 auto;
  border-radius: 0 0 12px 12px;
}

.brief-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
  gap: 1rem;
}

.brief-date-box {
  font-size: 2.4rem;
  font-weight: 800;
  font-style: italic;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 8px;
}

.brief-date-box p {
  line-height: 1;
}

.date-day {
  font-size: 1.4rem;
  line-height: 1;
  vertical-align: middle;
}

.brief-date-box .time {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.time-start {
  font-weight: normal;
  font-size: 1rem;
}

.brief-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.brief-main-info {
  text-align: center;
}

.at-mark {
  font-size: 1rem;
  font-weight: normal;
  margin-right: 5px;
}

.place-row {
  font-size: 1.2rem;
  font-weight: bold;
}

.place-sub {
  display: inline-block;
  font-size: 0.85rem;
  vertical-align: middle;
  font-weight: normal;
}

/* ==========================================================================
   4. メインコンテンツ（各共通セクション・タイムテーブル）
   ========================================================================== */
.event-info-side {
  margin-bottom: 40px;
}

.section-title {
  font-size: 1.4rem;
  color: var(--primary-color);
  border-left: 6px solid var(--primary-color);
  padding-left: 15px;
  margin: 40px 0 30px;
  font-weight: bold;
}

.point-item {
  background: var(--bg-light);
  padding: 30px;
  border-radius: 8px;
  border-top: 4px solid var(--primary-color);
  margin-bottom: 30px;
}

.point-item h3 {
  font-size: 1.15rem;
  color: var(--primary-color);
  margin-bottom: 15px;
  font-weight: bold;
  line-height: 1.4;
}

.overview-list dt,
.map-title {
  font-weight: bold;
  color: var(--primary-color);
  background: #eef2f6;
  padding: 8px 12px;
  border-radius: 4px;
}

.overview-list dt {
  margin-top: 15px;
}

.overview-list dd {
  padding: 8px 12px;
}

.map-title {
  margin: 40px 0 15px;
  display: block;
  font-size: 1rem;
}

.map-area iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 8px;
}

.t-center {
  text-align: center;
}
.t-bold {
  font-weight: bold;
}

/* タイムテーブル */
.timetable-table {
  width: 100%;
  border-collapse: collapse;
}

.timetable-table th,
.timetable-table td {
  padding: 12px 10px;
  border-bottom: 1px solid #eee;
}

.timetable-table th {
  background: #eef2f6;
  text-align: center;
  font-weight: bold;
  color: var(--primary-color);
}

.dl-square dt {
  margin-top: 1.2rem;
  display: flex;
  gap: 0.25rem;
}

.dl-square dt::before {
  content: "■";
  font-size: 1rem;
  line-height: 1;
  width: 1rem;
}

.dl-square dd {
  font-size: 15px;
  margin-left: 1.25rem;
  line-height: 1.6;
}

/* タイムテーブル内の詳細アンカーリンク */
.btn-view-detail {
  display: inline-block;
  color: var(--red-accent);
  text-decoration: underline;
  font-size: 13px;
  font-weight: bold;
  margin-top: 8px;
  padding: 4px 0;
  transition: all 0.2s ease-in-out;
}

.btn-view-detail:hover {
  color: var(--navy-dark);
  text-decoration: none;
  transform: translateX(4px);
}

/* 補足用注意文言（懇親会など） */
.notes-text {
  font-size: 12px;
  color: #666666;
  margin-top: 8px;
  display: block;
  line-height: 1.5;
}

/* ==========================================================================
   5. 登壇者・講演内容詳細（Speakers Section）
   ========================================================================== */
.speakers {
  margin-top: 60px;
  margin-bottom: 60px;
}

.speaker-block {
  margin-bottom: 40px;
  padding: 32px 24px;
  background-color: var(--white);
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: var(--shadow-md);
  text-align: left;
}

/* 講演タイトル（最重要フック・帯見出し型） */
.speaker-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--white);
  background: linear-gradient(135deg, var(--navy-dark) 0%, #254673 100%);
  line-height: 1.5;
  margin: 0 0 24px 0;
  padding: 14px 20px;
  border-radius: 6px;
  border-left: 6px solid var(--red-accent);
  letter-spacing: 0.05em;
  box-shadow: 0 4px 12px rgba(26, 53, 94, 0.15);
}

.speaker-info {
  margin-bottom: 24px;
}

.speaker-company {
  font-size: 18px;
  font-weight: bold;
  color: var(--text-sub);
  margin: 0 0 4px 0;
}

.speaker-name {
  font-weight: bold;
  line-height: 1.6;
  color: #1e293b;
  margin: 0 0 8px 0;
}

/* 講演概要（ユーザーが一番読みたい中身：赤ラインアクセント） */
.speaker-abstract {
  border-left: 3px solid var(--red-accent);
  padding-left: 14px;
  margin: 20px 0;
}

.abstract-title {
  font-size: 13px;
  font-weight: bold;
  color: var(--red-accent);
  margin: 0 0 6px 0;
}

.abstract-text {
  color: var(--text-main);
}

/* 登壇者プロフィールボックス（一歩引かせた信頼の証拠） */
.speaker-profile {
  background-color: var(--bg-light);
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 16px;
  margin-top: 16px;
}

.profile-label {
  font-size: 12px;
  color: var(--navy-dark);
  display: block;
  margin-bottom: 6px;
}

.profile-text {
  color: var(--text-muted);
  margin: 0;
}

/* ==========================================================================
   6. モバイル用コンバージョン（スマホ専用お申し込みボタン）
   ========================================================================== */
.sp-cv-area {
  display: block;
  text-align: center;
  margin: 35px 0;
  padding: 0 10px;
}

.sp-cv-btn {
  display: block;
  background-color: var(--red-accent);
  color: var(--white);
  text-decoration: none;
  font-weight: bold;
  font-size: 16px;
  padding: 14px 20px;
  border-radius: 50px;
  box-shadow: 0 6px 20px rgba(223, 26, 69, 0.3);
  transition: transform 0.2s ease;
}

.sp-cv-btn:active {
  transform: scale(0.98);
}

/* ==========================================================================
   7. タブレット向けレスポンシブ調整 (768px以上)
   ========================================================================= */
@media screen and (min-width: 768px) {
  .lp-header {
    padding: 60px 20px 0;
  }
  .header-inner {
    padding: 60px 20px;
  }
  .pre-area {
    flex-direction: row;
    margin-bottom: 2rem;
  }
  .pre-area img {
    margin-left: 0;
  }
  .target-label {
    font-size: 1.3rem;
  }
  .main-title {
    font-size: 2.8rem;
  }
  .sub-catchphrase {
    font-size: 1.6rem;
  }
  .section-title {
    font-size: 1.8rem;
  }
  .speaker-title {
    font-size: 24px;
  }
  .date-num {
    font-size: 3.6rem;
    letter-spacing: -0.02em;
  }
  .date-day {
    font-size: 2.3rem;
    letter-spacing: -0.02em;
    vertical-align: text-top;
  }
  .at-mark {
    font-size: 1.4rem;
  }
  .place-row {
    font-size: 1.8rem;
    line-height: 1.2;
    margin-top: 4px;
  }

  /* 開催概要のグリッド化 */
  .overview-list {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 10px 0;
    align-items: center;
  }
  .overview-list dt {
    margin-top: 0;
    border-radius: 4px 0 0 4px;
  }
}

/* ==========================================================================
   8. PC向けレスポンシブ調整 (1024px以上)
   ========================================================================= */
@media screen and (min-width: 1024px) {
  .lp-main {
    padding: 60px 20px 100px;
  }

  .hero-content {
    padding: 55px 40px;
    box-shadow:
      0 30px 60px rgba(0, 0, 0, 0.12),
      inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  }

  .main-title {
    font-size: 3.5rem;
    line-height: 1.2;
  }

  .sub-catchphrase {
    font-size: 2.4rem;
  }

  .sub-catchphrase-copy {
    font-size: 1.2rem;
  }

  .brief-inner {
    flex-direction: row;
    gap: 1rem;
    justify-content: space-around;
  }

  .brief-date-box {
    flex-direction: row;
    text-align: left;
    gap: 1rem;
  }

  .brief-date-box .time {
    gap: 0;
  }

  .place-row {
    line-height: 1;
    font-size: 1.2rem;
  }

  /* 2カラムレイアウトへの切り替え */
  .main-container {
    display: flex;
    max-width: 1150px;
    margin: 0 auto;
    gap: 60px;
    align-items: flex-start;
    padding-top: 40px;
  }

  .event-info-side {
    flex: 1;
    min-width: 0;
  }

  /* 固定フォームエリア（追従） */
  .inquiry-area {
    width: 400px;
    flex-shrink: 0;
    background: var(--white);
    box-shadow: var(--shadow-lg);
    border-radius: 12px;
    padding: 40px 25px;
    position: sticky;
    top: 30px;
    z-index: 5;
  }

  /* PC時はスマホ専用CVボタンを非表示にする */
  .sp-cv-area {
    display: none;
  }
}
/* ==========================================================================
   終了対応
   ========================================================================= */
.t-gray {
  color: #f3f3f3;
  background-color: #adadad;
  border-radius: 6px;
}