/* ===============================
   共通
   =============================== */
html,
body {
  margin: 0;
  padding: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #333333;
  background-color: #ffffff;

  /* ---- 共通で折り返しを許可 ---- */
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* =========================================
   アンカー不具合対策：スクロール主体を window(html) に戻す
   ========================================= */
html {
  height: auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scroll-behavior: smooth;

  /* ---- 共通で折り返しを許可 ---- */
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

body {
  height: auto !important;
  overflow: visible !important;
  position: static !important;

  /* ---- 共通で折り返しを許可 ---- */
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* ===============================
   共通ここまで
   =============================== */


/* ===============================
   汎用ここから
   =============================== */
.text_bold { font-weight: bold; line-height: 2; }
.text_20pt { font-size: 20pt; }
.text_26pt { font-size: 26pt; }
.text_red_E84D4D { color: #E84D4D; }
.text_red_D14141 { color: #D14141; }
.text_green_3C925C { color: #3C925C; }
.text_green_2375D2 { color: #2375D2; }
/* ===============================
   汎用ここまで
   =============================== */


/* ページ全体ラッパークラス */
.wrapper{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;

  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}


/* =====================================================
   メイン画像（MV）
===================================================== */
.mv_pc {
    margin: 0 auto;
    padding: 0 10px;
    box-sizing: border-box;
    text-align: center;
}
/* 画像をMV枠にフィットさせて中央寄せ */
.mv_pc img{
  width: 90%;
  max-width: none;
  height: auto;
  display: block;
}

/* ===============================
   イントロテキスト
   =============================== */


.intro_text {
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	line-height: 2;
  color: #43353B;
  text-align: center; 
}
.intro_head {
  font-size: 22pt;
  font-weight: bold;
  color: #2375D2;
  line-height: 1.6;
  text-align: center;
  margin-bottom: 20px;
}

/* ===============================
   イントロここまで
   =============================== */
/* ===============================
   検索モジュール枠（search_*）
   =============================== */

/* 外枠（背景を画面いっぱい気味に広げる：必要なら調整） */
.search_outer{
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin: 30px auto;
  box-sizing: border-box;
  width: 110%;
}

.search_outer .search_container{
  width: 100%;
  overflow: visible;
  position: relative;
  padding: 0 0 40px;
  box-sizing: border-box;
}

/* タイトル（box_title）※帯色不要・文字色#2375D2・左にアイコン */
.search_outer .box_title{
  width: 100%;
  background: transparent;
  color: #2375D2;
  font-family: "Zen Maru Gothic","Noto Sans JP",sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.4;
  text-align: center;
  padding: 18px 16px 14px;
  margin: 0;
  border-radius: 0;
  position: relative;
  box-sizing: border-box;
  white-space: normal;
}

/* アイコン（中央揃えのタイトル文字の“左側”に配置：アイコンサイズは考慮せず） */
.search_outer .box_title::before{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateX(-110px);
  width: 24px;
  height: 24px;
  background: url("../images/logo/icon_serch.png") no-repeat center / contain;
  pointer-events: none;
  white-space: normal;
}

/* 検索BOXラッパー */
.search_outer .search_searchbox{
  position: relative;
  box-sizing: border-box;
}

/* 検索モジュールの表示領域（slot＝hostとして使用） */
.search_outer .search_module_slot{
  display: block;
  min-height: 210px;
  height: auto;
}

.search_outer p{
  text-align: center;
  margin-bottom: 15px;
}

/* 「別の店舗に返却」を選択 だけ指定色（HTMLの span.text_red を利用） */
.search_outer .text_red{
  color: #D14141;
}

/* 注意文 ※文字色#9A3C4C */
.search_outer .search_text_attention{
  text-align: center;
  font-size: 16px;
  font-family: "Zen Maru Gothic","Noto Sans JP",sans-serif;
  line-height: 1.8;
  color: #9A3C4C;
  margin: -50px 16px 0;
  white-space: normal;
}

.search_outer .search_text_attention a{
  color: inherit;
}

.legacySearch__area{
  font-size: 100%;
}

/* （必要な場合のみ）モジュール側の持ち上げを相殺：ページ限定で上書き */
#search_top.search_outer .legacySearch__area{
  top: 0 !important;
}
.legacySearch__area .search__area--prefectures {
    height: 26px !important;
}
/* ===============================
   検索モジュール枠ここまで
   =============================== */

/* タイトルラベル画像：wrapper（親コンテナ）から飛び出さず、画面/親幅に応じて可変 */
.title_label{
  display: block;
  max-width: 120%; 
  width: 120%;
  height: auto;
  margin: 20px;
  align-self: center; 
}
/* =====================================================
   APP_RECOMMEND（.apps_recomend）
===================================================== */
/* ルート */
.apps_recomend{
  max-width: 960px;
  margin: 40px auto 60px;
  padding: 0 16px;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}

/* クリック領域（カード） */
.apps_recomend .apps_recomend_card{
  display: block;
  width: 100%;
  margin: 0 auto;
  text-decoration: none;
  color: inherit;
  border-radius: 20px;
  overflow: hidden; /* 角丸を画像にも効かせる */
}


/* 説明文（APP内に限定） */
.apps_recomend .apps_caption{
  font-size: 16px;
  line-height: 1.7;
  color: #444;
  margin: 12px 0 16px;
}

/* メイン画像（APP内に限定） */
.apps_recomend .apps_recomend_image{
  display: block;
  width: 100%;
  height: auto;
  margin-top: 50px;
}


/* =====================================================
   APP_RECOMMEND（.apps_recomend）
===================================================== */

/* =====================================================
   アンカーリンクナビ（anchor_nav）
===================================================== */

/* ナビ外枠 */
.anchor_nav{
  max-width: 960px;
  width: 100%;
  height: auto;
}

/* リスト（横並び / 必要なら折り返し） */
.anchor_nav_list{
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 15px;
  flex-wrap: wrap;

  margin: 0;
  padding: 0;
  list-style: none;
}

/* ボタン（li） */
.anchor_nav_item{
  /* 普段は横並び、狭い時は折り返して縮む */
  flex: 1 1 200px;

  height: 80px;
  border: 3px solid #ADE3FD;
  border-radius: 0;            /* 角丸なし */
  background-color: #ADE3FD;

  font-family: "Zen Maru Gothic", serif;
  font-weight: 900;

  position: relative;
  margin: 0;                   /* gap で間隔管理 */
  box-sizing: border-box;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* リンク（a） */
.anchor_nav_link{
  /* 文字は左右・高さとも中央揃え */
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;
  text-decoration: none;

  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.2;
  text-align: center;

  /* 疑似要素のスペース確保（左右同値にして “スペース込みで” 中央揃え） */
  --anchor-nav-arrow-size: 20px;
  --anchor-nav-arrow-gap: 6px;
  --anchor-nav-side-pad: 12px;
  padding-left: calc(var(--anchor-nav-side-pad) + var(--anchor-nav-arrow-size) + var(--anchor-nav-arrow-gap));
  padding-right: calc(var(--anchor-nav-side-pad) + var(--anchor-nav-arrow-size) + var(--anchor-nav-arrow-gap));

  position: relative;
  box-sizing: border-box;

  /* リンク色 */
  color: #4078B8;

  /* 折り返しは共通側で許可済みならそのままでもOK。念のため明示 */
  white-space: normal;
}

/* 既存の any-link 指定を上書き */
.anchor_nav_item > a.anchor_nav_link:any-link{
  color: #4078B8;
}

/* 右端の矢印（疑似要素） */
.anchor_nav_link::after{
  content: "";
  position: absolute;
  right: var(--anchor-nav-side-pad);
  top: 50%;
  transform: translateY(-50%);

  width: var(--anchor-nav-arrow-size);
  height: var(--anchor-nav-arrow-size);

  background: url("../images/logo/right_arrow.png") no-repeat center / contain;
  pointer-events: none; /* クリック領域を邪魔しない */
}
/* =====================================================
   アンカーリンクナビ（anchor_nav）
===================================================== */
/* =====================================================
   ボタンや見出しなど何度も使う物
===================================================== */
.heading_roundness {
  background-color: #EAF1F5;
  color: #003894;
  font-size: 30pt;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: bold;
  padding: 20px 40px;
  border-radius: 50px;
  text-align: center;
  margin: 40px auto;
  line-height: 1.4;
  max-width: 700px;
}

/* ボタン縦積み */
.stack_buttons{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0px;
  margin:30px;
}


/* 詳しくはこちら、セール対象のプランはこちらボタン */
.button_link_detail {
  display: inline-flex;
  align-items: center;

  /* ---- サイズ指定を変数化（文字サイズに依存せず同じ見た目の幅にする） ---- */
  --btn-width: 660px;  /* 標準の“見た目”幅 */
  --btn-min: 340px;    /* 標準の最低幅（狭い画面では100%まで縮む） */

  /* ---- 追加：矢印スペース（左右同量にして中央揃えを崩さない） ---- */
  --arrow-size: 16px;  /* 矢印文字サイズ相当 */
  --arrow-gap: 10px;   /* テキストと矢印の余白イメージ */
  --arrow-pad: 18px;   /* 右端の余白（見た目調整用） */

  /* ---- 画面幅に応じて「きっちり縮む」（見切れ防止） ---- */
  width: min(100%, var(--btn-width));
  max-width: var(--btn-width);
  min-width: min(var(--btn-min), 100%);

  min-height: 60px;          /* 最低高さ */

  /* ---- 変更：テキストを常に左右中央にするため、左右paddingを同量にする ----
     ※ 右側に矢印を置くが、左右を同量確保することで“見た目の中央”がズレない */
  padding: 0 18px;
  padding-left:  calc(var(--arrow-pad) + var(--arrow-size) + var(--arrow-gap));
  padding-right: calc(var(--arrow-pad) + var(--arrow-size) + var(--arrow-gap));

  border-radius: 10px;
  margin: 25px;

  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;

  /* ---- テキストは折り返し可 ---- */
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;

  /* 幅計算を安定（border/padding込みで幅が収まる） */
  box-sizing: border-box;

  background:gray;       /* デフォルト確認用 */

  /* ---- 変更：ボタン伸縮中もテキストは左右・高さ中央をキープ ---- */
  justify-content: center;
  text-align: center;

  /* 矢印の基準 */
  position: relative;
}

/* 矢印：右側に寄せる（相対的に右側＝右端基準。伸縮しても右に付く） */
.button_link_detail::after{
  content: "";
  position: absolute;
  right: var(--arrow-pad);
  top: 50%;
  transform: translateY(-50%);

  width: var(--arrow-size);
  height: var(--arrow-size);

  background: url("../images/logo/right_arrow_w.png") no-repeat center / contain;
  pointer-events: none;
}
/* カラーバリエーション */
/* ===== ボタン配色（背景・枠） ===== */
.button_orange { background:#F08300; border:2px solid #F08300; }
.button_gold   { background:#C7AC53; border:2px solid #C7AC53; }
.button_red    { background:#B41907; border:2px solid #B41907; }
.button_deepblue    { background:#4078B8; border:2px solid #4078B8; }
.button_blue { background:#ADE3FD; border:2px solid #ADE3FD; }

/* ===== 文字色と装飾の統一（白＆下線なし） ===== */
/* ボタン本体が <a> でも <div> + 内部<a> でも統一して白に */
.button_link_detail,
.button_link_detail:link,
.button_link_detail:visited,
.button_link_detail:hover,
.button_link_detail:active,
.button_link_detail a,
.button_link_detail a:link,
.button_link_detail a:visited,
.button_link_detail a:hover,
.button_link_detail a:active {
  color: #fff !important;
  text-decoration: none !important;
}

/* ---- 同じサイズのクラスを指定したボタンは“同じ幅”で、狭い画面では“同じように短く可変” ---- */
.button_short{
  --btn-width: 220px;
  --btn-min: 220px;
  margin: 0px;
  margin-bottom: 45px;
}

.button_660w{
  --btn-width: 660px;
  --btn-min: 660px;
}

/* ボタンここまで */
/* =====================================================
   ボタンや見出しなど何度も使う物ここまで
===================================================== */
.plan_section,
.mv_pc,
.intro,
.fukuoka_kumamoto,
.rental_campany_recomend,
.apps_recomend,
.advance_payment_section{
  text-align: center;
  margin-top: 30px;
  margin-bottom: 30px;
  width: 100%;
}

.plan_section > *,
.mv_pc > *,
.intro > *,
.search_outer > *,
.fukuoka_kumamoto > *,
.rental_campany_recomend > *,
.apps_recomend > *,
.advance_payment_section > *{
  margin-left: auto;
  margin-right: auto;
}

/* =====================================================
   2泊3日プラン（見出し＋カルーセルの重なり）
===================================================== */

/* =====================================================
   見出しラベル（p要素想定）
   - カルーセルに半分被せるため、下方向へずらす
===================================================== */
.head_frame{
  width: 70%;
  max-width: 600px;     
  margin: 0 auto;
  line-height: 1.5; 
  padding: 10px 0px;
  box-sizing: border-box;
  background: #fff;
  border: 2pt solid #77BDE1;  
  border-radius: 0;
  text-align: center;
  font-size: 26pt;
  font-weight: bold;
  position: relative;
  display: block;
  overflow: visible;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  z-index: 1;
}

.head_frame::before,
.head_frame::after{
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
}


.head_frame::before{
  border: solid 12pt transparent;
  border-top: solid 12pt #77BDE1;
  z-index: 2;
}

.head_frame::after{
  border: solid 14pt transparent;
  border-top: solid 14pt #fff;
  margin-top: -5pt;
  z-index: 3;
}

.frame_blue{ border-color:#77BDE1; }
.frame_blue.head_frame::before{ border-top-color:#77BDE1; }
.frame_green{ border-color:#76B788; }
.frame_green.head_frame::before{ border-top-color:#76B788; }

/* =====================================================
   カルーセル（このセクション用に調整）
   ※背景は固定（.carousel_wrapper に付ける）
   ※スクロールは内側（.carousel_scroller）に分離
   ※CSS変数は使わない
===================================================== */

/* セクション余白：見出しを被せる前提で上を詰める */
.carousel_section{
  position: relative;
  padding-top: 0;
  width: 100%;
  margin-top: -20px;
}

/* 親の plan_section が flex 配下で縮むケース対策（新千歳だけ細い問題の保険） */
.plan_section{
  width: 100%;
  align-self: stretch;
}

/* =====================================================
   背景固定の“外枠”
   - 背景色＋下部PNG帯はここに固定表示
   - スクロールは中の .carousel_scroller に任せる
===================================================== */
.carousel_wrapper{
  position: relative;
  width: 100%;
  max-width: 1000px;
  box-sizing: border-box;
  padding: 50px 0 150px;
  background-color: #fff;

  /* 外枠は切る（下部帯や装飾のため） */
  overflow: hidden;

  /* 幅が細くなるときの保険 */
  min-width: 0;
}

/* 下部の透過PNG帯（固定表示） */
.carousel_wrapper::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 105px;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: auto 100%;
  pointer-events: none;
  z-index: 0;
}

/* =====================================================
   内側の“スクロール領域”
===================================================== */
.carousel_scroller{
  position: relative;
  z-index: 1;

  /* “必要なときだけスクロールバーが出る” を素直に採用 */
  overflow-x: auto;
  overflow-y: hidden;

  /* flex 配下や幅制約下での横崩れ防止 */
  width: 100%;
  max-width: 100%;
  min-width: 0;

  /* スクロール体験の補助 */
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;

  /* stable は常時使わない（3枚時の不要ガターを避ける） */
  scrollbar-gutter: auto;
  padding-bottom: 20px;
}

/* 3枚以下（or スクロールさせたくない状態）は JS 側で wrapper に class を付与して無効化する */
.carousel_wrapper.is_noscroll .carousel_scroller{
  overflow-x: hidden;
  scrollbar-gutter: auto;
}

/* 4枚以上で “ガターを安定させたい” 場合だけ：JS 側で is_scrollable を付ける */
.carousel_wrapper.is_scrollable .carousel_scroller{
  overflow-x: auto;
  scrollbar-gutter: stable;
}

/* =====================================================
   ul（横一列）
===================================================== */
.carousel_scroller > ul{
  display: flex;
  flex-wrap: nowrap;
  gap: 18px;
  margin: auto;
  width: 98%;
  list-style: none;
  min-width: 0;
}

/* =====================================================
   アイテム：3枚同時表示（1枚あたり 33.333%：gap分を差し引く）
   ※カード（li）の外形（高さ）を統一し、画像の高さ差は余白で吸収する
   ※画像は縦横比維持（歪ませない）／表示高さは画像ごとに異なってよい
===================================================== */
.carousel_scroller > ul > li.carousel_item{
  flex: 0 0 calc((100% - (18px * 2)) / 3);
  box-sizing: border-box;
  height: auto;
  /* 画像の高さ差を「余白」で吸収（上寄せで揃える） */
  display: flex;
  align-items: flex-start;
  justify-content: center;

  text-align: center;
  overflow: hidden;          /* 念のため */
}

/* 画像：横幅だけ揃えて、縦横比は保持（高さは auto） */
.travel_schedule{
  display: block;
  width: 100%;
  height: auto;              /* 重要：固定を外す */
  max-height: 650px;

  object-fit: contain;       /* 念押し */
}

/* =====================================================
   背景色＋下部PNG帯（色別）
===================================================== */

/* 青 */
.carousel_wrapper.blue_back{
  background-color: #CDEBFA;
}
.carousel_wrapper.blue_back::after{
  background-color: #CDEBFA; /* 透過PNGの下地 */
  background-image: url("../images/back/travel_schedule_back_blue.png");
}

/* 緑 */
.carousel_wrapper.green_back{
  background-color: #CDEBD5;
}
.carousel_wrapper.green_back::after{
  background-color: #CDEBD5; /* 透過PNGの下地 */
  background-image: url("../images/back/travel_schedule_back_green.png");
}

/* =====================================================
   カルーセルここまで
===================================================== */

/* =====================================================
  お得なレンタカー会社（rental_campany_recomend）
===================================================== */

/* セクション内は全て中央ぞろえ */
.rental_campany_recomend{
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}

/* タイトルラベル（既存：wrapper内で可変） */
.rental_campany_recomend {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0 auto 18px;
}

/* 見出し用の枠（#707070） */
.border_box_707070_2pt{
  display: inline-block;
  border: 2px solid #707070;
  background: #fff;
  padding: 10px 60px;
  margin: 18px auto;
  box-sizing: border-box;
}

/* 見出し内のp余白をリセット（中央揃え安定） */
.border_box_707070_2pt p{
  margin: 0;
  padding: 0;
}

/* =====================================================
  おすすめ2枠（画像＋文章を縦積み、それを横並び／狭い時は縦）
===================================================== */
.recomend_row{
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 100px;
  flex-wrap: wrap;        /* 画面幅が狭い時は折り返し */
  margin: 20px auto 50px;
  box-sizing: border-box;
}

/* 1セット（画像＋文章） */
.recomend_item{
  width: min(100%, 420px); /* 基本は横並び、狭い時は100% */
  box-sizing: border-box;

  display: flex;
  flex-direction: column;  /* 画像と文章は縦に重ねる */
  align-items: center;
  text-align: center;
  gap: 10px;
}
.recomend_item p{
  text-align: left;
}
/* 画像リンク */
.recomend_imglink{
  display: block;
  width: 100%;
  text-decoration: none;
}

/* バナー画像 */
.recomend_img{
  display: block;
  width: 100%;
  height: auto;
}

/* recomend_item内のp余白を整える */
.recomend_item p{
  margin: 0;
}

/* =====================================================
  パートナー（ロゴ） 3x2：影付きボックスで囲う／狭い時は折り返し
===================================================== */
.partner_grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3列 */
  gap: 20px;
  margin: 18px auto 0;
  box-sizing: border-box;
  width: 100%;
}

/* 各ボックス（影付き） */
.partner_item{
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  border-radius: 12px;         /* 任意：角不要なら0に */
  padding: 16px 12px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid #dcdcdc;
  text-align: center;
}

/* ロゴ画像を「広く」見せる */
.partner_logo{
  display: block;
  width: 100px;
  max-width: 220px;
  height: auto;
  object-fit: contain;
}

/* 会社名 */
.partner_name{
  margin: 0;
  line-height: 1.3;
}

/* 画面幅が狭い時は折り返し（3x2→2列→1列） */
@media (max-width: 900px){
  .partner_grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px){
  .partner_grid{
    grid-template-columns: 1fr;
  }
}

/* =====================================================
  お得なレンタカー会社 ここまで
===================================================== */
/* 事前決済 */

/* 枠（赤） */
.box_red_outline{
  border: 3px solid #E84D4D;
  border-radius: 30px;
  box-sizing: border-box;
}

/* 外枠（幅・余白・中身） */
.notice_block{
  width: min(890px, calc(100% - 32px));
  max-width: 100%;
  margin: 0 auto;
  padding: clamp(16px, 2.2vw, 28px) clamp(14px, 2vw, 24px);
  background: #fff;
  text-align: center;

  /* 折り返し（共通があっても安全のため） */
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* タイトル（h3） */
.notice_block > .notice_title{
  margin: 0 0 14px;
  font-size: clamp(18px, 2vw, 20px);
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

/* タイトル内の強調（赤＋下線） */
.notice_block > .notice_title .text_red{
  color: #E84D4D;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
  text-decoration-skip-ink: auto;
}

/* 本文 */
.notice_block > .notice_text{
  margin: 0;
  font-size: clamp(14px, 1.8vw, 16px);
  font-weight: 400;
  line-height: 1.9;
  text-align: inherit;

  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 共通の .text_red が他で使われても破綻しないよう最低限 */
.text_red{
  color: #E84D4D;
}
.advance_payment_section img{
  margin: 40px;
  width: 70%;
  height: auto;
}