@charset "UTF-8";
@import "./page/cart.css";
@import "./page/nonmember.css";
@import "./page/index.css";
@import "./page/shipping.css";
@import "./page/confirm.css";
@import "./page/complete.css";
@import "./page/coupon.css";
@import "./page/shipping_multiple.css";

/* ========================================
  レイアウト・コンテナ設定
  ======================================== */

.ec-cartRole {
  max-width: 1440px;
}

.ec-cartRole .ec-cartRole__cart {
  margin: auto;
}

.izumo_cart_role {
  padding: 0 10%;
  display: block;
}

/* 各種ロールページの最大幅設定 */
.ec-role,
.ec-orderRole,
.ec-customerRole,
.ec-registerRole {
  max-width: 1240px;
}

/* 各要素のマージン設定 */
.ec-orderAccount,
.ec-orderDelivery,
.ec-orderPayment,
.ec-orderPoint,
.ec-orderCoupon,
.ec-orderConfirm,
.izumo_confirm_box_margin {
  margin-bottom: 40px;
}

@media screen and (max-width: 767.98px) {
  .ec-cartRole {
    font-size: var(--i-sp-14px);
  }

  .ec-role {
    padding: 0;
  }

  .izumo_cart_role {
    padding: 0;
  }
}

/* ========================================
  エラーメッセージ表示
  ======================================== */

.ec-cartRole__error {
  padding: 0 20px;
  margin: 0 auto;
  max-width: 1240px !important;
}

.ec-alert-warning {
  display: flex !important;
  align-items: baseline;
  max-width: 1240px !important;
  width: 100%;
  padding: 16px 24px;
  background-color: #FFE1E1;
  text-align: left;
}

.ec-alert-warning .ec-alert-warning__text {
  color: var(--i-base-color-red);
  font-weight: normal;
}

.ec-alert-warning .ec-alert-warning__icon img{
  vertical-align: top;
  min-width: 20px;
  object-fit: contain;
}

@media screen and (max-width: 767.98px) {
  .ec-cartRole__error {
    padding: 0;
  }
}

/* ========================================
  進捗表示（プログレスバー）
  ======================================== */

.ec-progress .ec-progress__item:after {
  background: var(--i-base-color-blue);
  top: 2em;
}

/* プログレス番号の基本スタイル */
.ec-progress .ec-progress__number {
  background: #DDF3F8;
  font-size: var(--i-pc-32px);
  line-height: 60px;
  width: 60px;
  height: 60px;
}

/* 完了状態のプログレス番号 */
.ec-progress .is-complete .ec-progress__number {
  background: var(--i-base-color-blue);
}

/* プログレスラベルの基本スタイル */
.ec-progress .ec-progress__label {
  color: #AAAAAA;
  font-size: var(--i-pc-14px);
}

/* 完了状態のプログレスラベル */
.ec-progress .is-complete .ec-progress__label {
  color: #1E1E1E;
}

/* スマートフォン対応 */
@media screen and (max-width: 767.98px) {
  .ec-progress .ec-progress__item:after {
    top: 24px;
  }

  .ec-progress .ec-progress__number {
    line-height: 48px;
    width: 48px;
    height: 48px;
  }

  .ec-progress .ec-progress__label {
    font-size: var(--i-sp-10px);
  }
}

/* ========================================
  独自要素
  ======================================== */

/* カートページのアクションボタン */
#page_cart .ec-blockBtn--action.izumo_com_shopping_action {
  margin: 0 auto;
}

@media screen and (max-width: 767.98px) {
  #page_cart .ec-blockBtn--action.izumo_com_shopping_action {
    max-width: 100% !important;
  }
}

/* ショッピングページの見出し */
.izumo_com_shopping_h2,
.izumo_com_shopping_coupon_title  {
  font-weight: normal !important;
  color: #1E1E1E;
  padding: 8px 24px !important;
}

.izumo_com_shopping_h3 {
  font-size: var(--i-pc-16px);
  color: #1E1E1E;
  font-weight: normal !important;
}

@media screen and (max-width: 767.98px) {
  .izumo_com_shopping_h3 {
    font-size: var(--i-sp-16px);
  }
}