/* Custom CSS for GAS POTAL Campaign LP */

/* リセット：マージンとパディングを削除して画面いっぱいに */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
  }
  
  /* フォント設定：英数字はInter、日本語はNoto Sans JP */
  body {
    font-family: 'Inter', 'Noto Sans JP', sans-serif;
  }
  
  /* 日本語文字にはNoto Sans JPを適用 */
  body * {
    font-family: 'Inter', 'Noto Sans JP', sans-serif;
  }
  
  /* 右向きの青矢印（SVG画像） */
  .arrow-right {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    vertical-align: middle;
    object-fit: contain;
  }
  
  /* Campaign Content Section のスタイル */
  /* 12カラムグリッド（ガター24px）の10カラム分に合わせる */
  /* 計算: (1200px - 24px × 11) / 12 × 10 + 24px × 9 = 780px + 216px = 996px */
  .campaign-content-wrapper {
    text-align: center;
    max-width: 996px;
    margin: 0 auto;
    padding: 1.7rem 1.5rem 1.5rem;
    position: relative;
    background: white;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .campaign-content-wrapper p,
  .campaign-content-wrapper h2 {
    text-align: left;
  }
  
  @media (min-width: 768px) {
    .campaign-content-wrapper p,
    .campaign-content-wrapper h2 {
      text-align: center;
    }
  }
  
  /* 注意事項部分のみ左寄せ */
  .campaign-content-wrapper .text-xs.text-gray-500 {
    text-align: left;
    align-self: flex-start;
  }
  
  /* 注意事項の「●」を疑似要素で円形に置き換え */
  .campaign-note {
    position: relative;
    padding-left: 1rem;
    margin-top: 0.5rem;
    text-align: left !important;
    line-height: 1.6;
  }
  
  .campaign-note:first-child {
    margin-top: 0;
  }
  
  .campaign-note::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 8px;
    height: 8px;
    background-color: #0086C9;
    border-radius: 50%;
  }
  
  /* Campaign Overview Section のスタイル */
  .campaign-overview-title {
    color: #0086C9;
    padding: 12px 16px;
    border-bottom: 2px solid #0086C9;
    position: relative;
    display: inline-block;
    margin: 0 auto;
  }
  
  @media (min-width: 768px) {
    .campaign-overview-title {
      padding: 16px;
    }
  }
  
  .campaign-overview-title::before {
    content: '';
    position: absolute;
    left: -24px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    background-image: url('../assets/gaspotal_character2.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
  }
  
  @media (min-width: 768px) {
    .campaign-overview-title::before {
      left: -56px;
      width: 56px;
      height: 56px;
    }
  }
  
  .campaign-overview-title::after {
    content: '';
    position: absolute;
    right: -24px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    background-image: url('../assets/gaspotal_character3.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
  }
  
  @media (min-width: 768px) {
    .campaign-overview-title::after {
      right: -56px;
      width: 56px;
      height: 56px;
    }
  }
  
  /* 各セクションのh3タイトルの色 */
  .campaign-overview-item h3 {
    color: #0086C9;
  }
  
  /* 各セクション間にグレーのボーダー */
  .campaign-overview-item:not(:last-child) {
    border-bottom: 1px solid #E5E7EB;
    padding-bottom: 1.5rem;
  }
  
  @media (min-width: 768px) {
    .campaign-overview-item:not(:last-child) {
      padding-bottom: 2rem;
    }
  }
  /* Campaign Overview Section のコンテンツ幅を制限 */
  /* 12カラムグリッド（ガター24px）の8カラム分に合わせる */
  /* 計算: (1200px - 24px × 11) / 12 × 8 + 24px × 7 = 624px + 168px = 792px */
  .campaign-overview-content {
    max-width: 792px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    background: white;
    padding: 1.5rem;
    border-radius: 16px;
  }
  
  @media (min-width: 768px) {
    .campaign-overview-content {
      padding: 44px 40px 40px;
    }
  }
  
  /* Step Section のコンテンツ幅を制限 */
  /* 12カラムグリッド（ガター24px）の8カラム分に合わせる */
  /* 計算: (1200px - 24px × 11) / 12 × 8 + 24px × 7 = 624px + 168px = 792px */
  .step-content-wrapper {
    max-width: 792px;
    margin: 0 auto;
  }
  
  /* Service Description Section のポイント画像コンテナ */
  /* 12カラムグリッド（ガター24px）の8カラム分に合わせる */
  /* 計算: (1200px - 24px × 11) / 12 × 8 + 24px × 7 = 624px + 168px = 792px */
  .service-point-image-wrapper {
    max-width: 792px;
    margin: 0 auto;
  }
  
  /* スクロールエフェクト：フェードイン + 上方向スライド */
  .scroll-fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  }
  
  .scroll-fade-in.visible {
    opacity: 1;
    transform: translateY(0);
  }