/* 楽天Car洗車コーティングなら */

/* ================================================= */
/* intro-advantage (メリットエリア) 関連スタイル */
/* ================================================= */

.merit-img {
    width: 93px;
}

.intro-advantage {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    background-color: #FFF4F7;
    padding: 32px 16px;
}

@media only screen and (max-width: 767px) {
    .intro-advantage {
        gap: 12px
    }
}

.intro-advantage-img {
    padding-bottom: 32px;
    max-width: 488px;
}



.intro-advantage-content {
    display: flex;
    padding: 16px 20px;
    flex-direction: column;
    gap: 20px;
    border-radius: 12px;
    background-color: #fff;
    width: 100%;
}

@media only screen and (max-width: 767px) {
    .intro-advantage-content {
        padding: 12px 12px 24px 12px;
        border-radius: 4px;
        gap: 10px;
    }
}

.intro-advantage-row {
    justify-content: center;
    gap: 20px;
    flex-wrap: nowrap;
    display: flex;
    flex-direction: column;
    max-width: 1280px;
}

@media only screen and (min-width: 768px) {
    .intro-advantage-row {
        flex-direction: row;
    }
}

.intro-advantage-content img {
    max-width: 100%;
    height: auto;
    font-size: 0
}

@media only screen and (max-width: 767px) {
    .intro-advantage-row {
        justify-content: center;
        gap: 20px;
        flex-wrap: wrap;
        display: flex;
    }
}

.intro-advantage-content .intro-title {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
}

.intro-advantage-content .intro-title-num {
    font-size: 48px;
    font-weight: 700;
    line-height: normal;
    text-align: center;
    font-family: var(--Noto-sans); /* 注意: 提供されたCSS内に--Noto-sansの定義はありませんでした */
    color: #BE8D47;
}

.intro-title--red {
    color: #bf0000
}

@media only screen and (max-width: 767px) {
    .intro-advantage-content .intro-title {
        font-size: 20px
    }
}

.intro-advantage-content .intro-sub {
    font-size: 16px;
    line-height: normal;
}

@media only screen and (max-width: 767px) {
    .intro-advantage-content .intro-sub {
        font-size: 14px;
        width: 224px;
    }
}

.intro-caution {
    font-size: 14px;
    max-width: 700px;
    line-height: normal;
}

@media only screen and (max-width: 767px) {
    .intro-caution {
        font-size: 11px
    }
}



.intro-advantage-content-title {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 350px;
}

.intro-advantage-content-text {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
}



/* ================================================= */
/* 見出し
/* ================================================= */

.leaf {
    width: 36px;
    height: 35px;
}

.leaf.left {
  margin: 0px 10px 0px 0px;
}

.leaf.right {
  margin: 0px 0px 0px 10px;
}


.springsale_section-title {
    align-items: center;
    justify-content: center;
    display: flex;
    font-size: 24px;
}

  @media (min-width: 768px) {
.springsale_section-title {
    font-size: 28px;
}
  }


.searchArea .springsale_section-title {
  margin-bottom: 0px;
}

.springsale_section-title.cpn_detail {
    margin: 28px auto;
}

  @media (min-width: 768px) {
.springsale_section-title.cpn_detail {
  margin: 0px auto 28px;    

}
  }


/* ================================================= */
/* ステップ
/* ================================================= */

  .springsale_reservation-section {
    max-width: 960px;
    margin: 0 auto;
    text-align: center;
    padding: 32px 16px;
  }

  .section-title {
    font-size: 24px; /* スマホ用に少し小さく */
    font-weight: bold;
    margin-bottom: 30px;
    color: #333;
    display: inline-block;
  }

  /* --- グリッドレイアウト（ここが変更点） --- */
  .springsale_steps {
    display: grid;
    /* スマホでは隙間を狭く(10px)、2列(1fr 1fr)にする */
    gap: 5px;
    grid-template-columns: repeat(2, 1fr);
  }

  /* --- PC/タブレット(768px以上)の指定 --- */
  @media (min-width: 768px) {
    .section-title {
      font-size: 32px; /* PCでは大きく */
      margin-bottom: 40px;
    }

    .springsale_steps {
      /* PCでは隙間を広く(20px)、4列にする */
      gap: 20px;
      grid-template-columns: repeat(4, 1fr);
    }
  }

  /* --- 各ステップのカード --- */
  .springsale_step-card {
    background-color: #f8f9fa;
    display: flex;
    flex-direction: column;
    padding-bottom: 15px;
    border-radius: 4px; /* 角を少し丸める */
  }

  /* --- ヘッダー部分（番号とタイトル） --- */
  .springsale_step-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }

  /* 番号の緑色の四角 */
  .springsale_step-number {
    background-color: #009e60;
    color: #fff;
    /* スマホ用にサイズを少し小さめに調整 */
    width: 40px;
    height: 40px;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    flex-shrink: 0;
  }

  /* タイトルテキスト */
  .springsale_step-title-text {
    color: #009e60;
    font-size: 16px; /* スマホ用に文字サイズ調整 */
    font-weight: bold;
    padding-left: 15px;
    text-align: left;
    line-height: 1.3;
    flex-grow: 1;
  }


  /* --- PC以上でのヘッダー微調整 --- */
  @media (min-width: 768px) {
    .springsale_step-number {
      width: 50px;
      height: 50px;
      font-size: 24px;
    }
    .springsale_step-title-text {
      font-size: 21px;
      padding-left: 30px;
    }


    .springsale_step-card {
      padding-bottom: 20px;
    }
    .springsale_step-header {
      margin-bottom: 15px;
    }
  }

  /* --- 画像エリア --- */
  .springsale_step-image {
    width: 100%;
    /* スマホでは高さを少し抑える */
    height: 101px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 10px;
  }

  .springsale_step-image img {
    width: 145px;
  }




  @media (min-width: 768px) {
    .springsale_step-image {
      width: 100%;
      height: 115px;
      margin-bottom: 15px;
    }

    .springsale_step-image img {
    width: 165px;
  }

    }

  /* --- 説明文 --- */
  .springsale_step-desc {
    font-size: 12px; /* スマホでは小さく */
    line-height: 1.4;
    font-weight: 500;
    margin: 0;
    padding: 0 5px;
  }




  @media (min-width: 768px) {
    .springsale_step-desc {
      font-size: 16px; /* PCでは標準サイズ */
      padding: 0 10px;
    }
  }


/* ================================================= */
/* 特典内容
/* ================================================= */

.benefits-section {
  background-color: #009E60;
}


  /* メインコンテナ（画面幅いっぱいに広げる） */
  .springsale_benefits-wrapper {
    color: #ffffff;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center; /* コンテンツを中央揃え */
  }

  /* コンテンツの最大幅を制限するラッパー */
  .springsale_content-inner {
    width: 100%;
    max-width: 480px; /* スマホ時の基本幅 */
    position: relative;
  }

  /* ヘッダー部分 */
  .springsale_title-bubble {
    text-align: center;
    margin-bottom: 20px;
    position: relative;
    z-index: 2;
  }
  .springsale_bubble-text {
    display: inline-block;
    border: 2px solid #ffffff;
    border-radius: 4px;
    padding: 6px 16px;
    font-size: 15px;
    font-weight: bold;
    position: relative;
  }
  .springsale_bubble-text::after {
    content: '';
    position: absolute;
    bottom: -7px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 10px;
    height: 10px;
    background: #009E60;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
  }

  .main-title {
    text-align: center;
    font-size: 28px;
    font-weight: 900;
    margin: 15px 0 25px;
    letter-spacing: 2px;
    position: relative;
    z-index: 2;
  }

  /* メッセージ吹き出し */
  .springsale_info-box {
    background-color: #50B482;
    border-radius: 6px;
    padding: 20px;
    text-align: center;
    font-weight: normal;
    font-size: 18px;
    line-height: 1.4;
    margin-bottom: 40px;
    position: relative;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    width: 100%;
    box-sizing: border-box;
  }
  .springsale_info-box::after {
    content: '';
    position: absolute;
    bottom: -13px;
    left: 20%; /* 尻尾の位置を調整 */
    border-width: 15px 0 0 25px;
    border-style: solid;
    border-color: #50B482 transparent transparent transparent;
  }

  /* 特典セクションをまとめるコンテナ */
  .springsale_benefits-container {
    width: 100%;
  }

  /* 特典セクション共通 */
  .springsale_benefit-section {
    margin-bottom: 30px;
  }
  .springsale_benefit-header {
    display: grid;
    grid-template-columns: 70px 1fr;
    align-items: center;
    gap: 15px;
    max-width: 400px;
    margin: 0 auto 15px;
  }
  .springsale_benefit-badge {
    background: #ffffff;
    color: #009E60;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    margin: 0 auto;
  }
  .springsale_badge-label {
    font-size: 11px;
    margin-bottom: 2px;
  }
  .springsale_badge-num {
    font-size: 28px;
    line-height: 1;
    font-family: "din-2014", hiragino-kaku-gothic-pron;
  }
  .springsale_benefit-title {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5;
    text-align: left;
  }

  /* 黄色の強調テキスト部分 */
  .springsale_highlight-block {
    text-align: center;
    color: #FFF762;
    font-weight: bold;
  }
  .springsale_highlight-sub {
    font-size: 16px;
    margin-bottom: 5px;
  }
  .springsale_highlight-main {
    font-size: 24px;
    display: flex;
    align-items: baseline;
    justify-content: center;
  }
  .springsale_highlight-main .num {
    font-size: 50px;
    line-height: 1;
    margin: 0 4px;
    font-family: "Rakuten Sans JP2",hiragino-kaku-gothic-pron;
  }
  .springsale_highlight-main .unit {
    font-size: 30px;
    margin-right: 4px;
  }

  /* 小さい画面用の調整 */
  @media (max-width: 380px) {
    .main-title { font-size: 24px; }
    .springsale_info-box { font-size: 16px; padding: 10px; }
    .springsale_benefit-title { font-size: 16px; }
    .springsale_highlight-main { font-size: 22px; }
    .springsale_highlight-main .num { font-size: 32px; }
    .springsale_highlight-main .unit { font-size: 32px; }
    .springsale_benefit-header { grid-template-columns: 60px 1fr; gap: 10px; }
    .springsale_benefit-badge { width: 60px; height: 60px; }
    .springsale_badge-num { font-size: 24px; }
  }

  /* -----------------------------------
     PC・タブレット向けレイアウト（768px以上）
  ------------------------------------ */
  @media (min-width: 768px) {
    .springsale_benefits-wrapper {
      padding-bottom: 20px;
    }
    
    .springsale_content-inner {
      max-width: 960px; /* PC時の最大幅を拡張 */
    }

    .springsale_info-box {
      max-width: 500px;
      margin: 0 auto 40px; /* 中央配置 */
    }

    /* 特典を2カラムの横並びにする */
    .springsale_benefits-container {
      display: flex;
      justify-content: center;
      gap: 40px; /* 特典間の余白 */
    }

    .springsale_benefit-section {
      flex: 1; /* 幅を均等にする */
      margin-bottom: 0;
    }

    .springsale_benefit-header {
      margin: 0 auto 20px;
    }

  }


  /* --- 修正後：imgタグ版のスタイル --- */
  
  /* スマホ版（基本スタイル） */
  .divider-img {
    display: block;      /* 左右中央揃えのためにブロック要素化 */
    width: 100%;         /* 横幅いっぱい */
    height: auto;        /* アスペクト比を維持 */
    max-width: 400px;    /* 必要であれば最大幅を制限（特典ヘッダーと同じくらい） */
    margin: 30px auto;   /* 上下の余白と左右中央揃え */
  }

  /* 「スマホのみ」表示するクラスの定義（基本は表示） */
  .sp-only {
    display: block;
  }

  /* -----------------------------------
     PC・タブレット向けレイアウト（768px以上）
  ------------------------------------ */
  @media (min-width: 768px) {
    /* ...既存のスタイル... */

    /* PC版では「スマホのみ」クラスの要素を非表示にする */
    .sp-only {
      display: none !important; /* 強制的に非表示 */
    }

    /* 既存の .divider { display: none; } は削除してもOKです（HTMLからdivを消した場合） */
  }