/* ===========================
   GUIDE PAGE (gd- prefix)
   → ページ固有レイアウトのみ
=========================== */

.gd-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 16px;
}

.gd-hero-area {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 40px;
}

.gd-hero-ten {
  width: 180px;
}

/* ヒーローテキスト */
.gd-hero-text {
  flex: 1;
  text-align: center;
}

/* キャッチコピー（①）を強調 */
.gd-hero-text .ui-text-lead {
  font-size: 20px;
  line-height: 1.7;
  color: #ffffff;
  margin-bottom: 16px;
  font-weight: 600;
}

/* テンのセリフ（②）を柔らかく */
.gd-hero-text .ui-text-body {
  font-size: 16px;
  line-height: 1.8;
  color: rgba(255,255,255,0.85);
}

.gd-feature-card { margin-bottom: 40px; }
.gd-steps-card { margin-bottom: 40px; }

.gd-feature-header { text-align: center; margin-bottom: 24px; }
.gd-feature-thumb { text-align: center; margin-bottom: 24px; }

.gd-steps-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.gd-steps-detail {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.gd-cta { text-align: center; margin-top: 40px; }

/* サムネのベース（モバイル基準） */
.gd-feature-thumb-img {
  width: 360px;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* STEP 期間の見た目 */
.gd-step-period {
  font-size: 14px;
  margin: -4px 0 8px;
  opacity: 0.9;
}

/* ===========================
   スマホ最適化（〜640px）
=========================== */
@media (max-width: 640px) {

  .gd-hero-area {
    flex-direction: column;
    text-align: center;
    padding: 24px;
  }

  .gd-hero-ten {
    width: 120px;
  }

  .gd-hero-text {
    text-align: center;
  }

  .gd-feature-thumb {
    text-align: center;
  }

  .gd-feature-thumb-img {
    width: 100%;
    max-width: 260px;
    height: auto;
  }

  .gd-steps-header {
    flex-direction: column;
    text-align: center;
  }

  .gd-steps-ten {
    width: 100px;
  }

  .gd-step-card {
    padding: 16px;
  }
}

/* ===========================
   GUIDE：PC専用の最終改善（641px〜）
=========================== */
@media (min-width: 641px) {

  /* ① PCでサムネ画像を大きくする */
  .gd-feature-thumb-img {
    width: 360px;
    max-width: 100%;
    height: auto;
  }

  /* ② PCで見出しと本文を左寄せにする */
  .gd-feature-item {
    text-align: left;
  }

  .gd-feature-item .ui-text-body {
    margin-left: 0;
    text-indent: 0;
  }

  /* ③ PCでテン画像と「参加の流れ」を中央寄せにする */
  .gd-steps-header h2 {
    text-align: left;
  }
}