/* ===================================================
BS-FINE EC サイト 共通スタイル
   =================================================== */

/* === Reset & Base === */
.bsfine-ec,
.bsfine-ec *,
.bsfine-ec *::before,
.bsfine-ec *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 全 .bsfine-ec スコープ共通のタイポグラフィ */
.bsfine-ec {
    font-family: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', 'Meiryo', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #333;
}

    /* ページ全体ラッパー専用のレイアウト */
    .bsfine-ec.page-wrapper {
        width: 100%;
        max-width: 640px;
        margin: 0 auto;
        min-height: 100vh;
        background-color: #f5f5f5;
        position: relative;
        overflow-x: hidden;
    }

.bsfine-ec a { text-decoration: none; color: inherit; }
.bsfine-ec img { max-width: 100%; display: block; }
.bsfine-ec button { cursor: pointer; font-family: inherit; }

/* === ページ全体ラッパー === */
/* ===================================================
   ページコンテンツエリア（共通）
   =================================================== */

.bsfine-ec .page-content {
  background-color: #f5f5f5;
  padding: 24px 16px 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bsfine-ec .page-content--compact {
  padding-top: 16px;
  gap: 16px;
}

/* ===================================================
   カード（共通）
   =================================================== */

.bsfine-ec .card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}


.bsfine-ec .card--sm-shadow {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}


.bsfine-ec .card__header {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 16px;
  background-color: #fafafa;
  border-bottom: 1px solid #ddd;
  font-size: 16px;
  font-weight: 700;
  color: #444;
}


.bsfine-ec .card__body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}


.bsfine-ec .card__body--center {
  align-items: center;
  gap: 16px;
  padding: 24px 16px;
}


.bsfine-ec .card__body--amazon {
  gap: 16px;
  padding: 16px 16px 24px;
}

/* ===================================================
   バッジ（必須など）
   =================================================== */

.bsfine-ec .badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}


.bsfine-ec .badge--required {
  background-color: #ef4f41;
  color: #fff;
}

/* ===================================================
   フォーム要素（共通）
   =================================================== */

.bsfine-ec .form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}


.bsfine-ec .form-label-row {
  display: flex;
  align-items: center;
  gap: 8px;
}


.bsfine-ec .form-label {
  font-size: 14px;
  font-weight: 700;
  color: #444;
}


.bsfine-ec .form-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}


.bsfine-ec .form-input {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  color: #444;
  background-color: #fff;
  appearance: none;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}


.bsfine-ec .form-input:focus {
  border-color: #ef4f41;
  box-shadow: 0 0 0 2px rgba(239, 79, 65, 0.1);
}


.bsfine-ec .form-input::placeholder {
  color: #999;
}

    .bsfine-ec .form-select {
        width: 100%;
        height: 48px;
        padding: 0 16px;
        border: 1px solid #ccc;
        border-radius: 6px;
        font-size: 14px;
        font-family: inherit;
        color: #444;
        background-color: #fff;
        appearance: auto;
        -webkit-appearance: auto;
        outline: none;
        line-height: normal;
        transition: border-color 0.15s, box-shadow 0.15s;
    }

        .bsfine-ec .form-select:focus {
            border-color: #ef4f41;
            box-shadow: 0 0 0 2px rgba(239, 79, 65, 0.1);
        }

        .bsfine-ec .form-select option {
            font-size: 14px;
        }

.bsfine-ec .form-input--has-icon {
  padding-right: 44px;
}


.bsfine-ec .form-input-eye {
  position: absolute;
  right: 12px;
  width: 22px;
  height: 22px;
  color: #999;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}


.bsfine-ec .form-input-eye svg {
  width: 20px;
  height: 20px;
}


.bsfine-ec .form-hint {
  font-size: 12px;
  color: #666;
  line-height: 1.5;
}

.bsfine-ec .form-hint--birthday {
  color: #333;
}


.bsfine-ec .form-error {
  font-size: 12px;
  color: #ef4f41;
}

/* ===================================================
   バリデーションエラー装飾
   - BS-FINE デザイン適用後、新 class 名（form-input / form-select / dob-input / label.error）
     に対するクライアント側・サーバ側エラー装飾を追加
   - 色値は新デザインパレット (#ef4f41 / #fde6e6) に統一
   =================================================== */

/* エラー入力欄（client-side / server-side 共通） */
.bsfine-ec .form-input.error,
.bsfine-ec .form-select.error,
.bsfine-ec .dob-input.error,
.bsfine-ec select.error {
  background-color: #fde6e6;
  border-color: #ef4f41;
}

/* jQuery validate のエラーラベル（client-side） */
.bsfine-ec label.error {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: #ef4f41;
}

/* サーバ側エラーメッセージ枠（form-message + color-danger） */
.bsfine-ec .form-message.color-danger {
  color: #ef4f41;
  font-size: 12px;
}

/* ヘッダ部メッセージ領域（.page-alert）
   - Entry / ConfirmEntry の旧 .alert-box.alert.color-danger 置換
   - <msg> タグヘルパーが Entry では <div>、ConfirmEntry では <span> を出力するため
     直接の子要素を block 化して縦並びを担保する
   - .bsfine-ec a の text-decoration:none / color:inherit を明示的に上書き */
.bsfine-ec .page-alert {
  background-color: #fde6e6;
  border-left: 4px solid #ef4f41;
  border-radius: 8px;
  padding: 14px 16px;
  color: #ef4f41;
  font-size: 14px;
  line-height: 1.6;
}

.bsfine-ec .page-alert > * {
  display: block;
}

.bsfine-ec .page-alert a {
  color: #ef4f41;
  text-decoration: underline;
}

/*
   - pt-3 を撤去したマスタ HTML に合わせ、内容のある form-group 行のみ
     上余白を取り、空の .col を持つ行は非表示にする
   - エラー表示時は #_[valid_xxx]_# が置換されて :empty を外れるため、
     margin-top: 0.5rem が効いて入力欄との視覚的余白が確保される
   - マスタ反映が CSS デプロイより遅れた場合の事故防止として、
     pt-3 残存時も padding-top を無効化する */
.bsfine-ec .row.form-group {
  margin-top: 0.5rem;
}
.bsfine-ec .row.form-group:has(> .col:empty) {
  display: none;
}
.bsfine-ec .row.form-group.pt-3 {
  padding-top: 0;
}

/* ===================================================
   区切り線
   =================================================== */

.bsfine-ec .divider {
  border: none;
  border-top: 1px solid #eee;
}


.bsfine-ec .or-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: #666;
}


.bsfine-ec .or-divider::before,
.bsfine-ec .or-divider::after {
  content: '';
  flex: 1;
  border-top: 1px solid #eee;
}

/* ===================================================
   ボタン（共通）
   =================================================== */

.bsfine-ec .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-family: inherit;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: opacity 0.15s;
  border: none;
  text-decoration: none;
  line-height: 1;
}


.bsfine-ec .btn:active {
  opacity: 0.75;
}


.bsfine-ec .btn--primary {
  height: 60px;
  background-color: #ef4f41;
  color: #fff;
  font-size: 18px;
  border-radius: 40px;
  box-shadow: 0 4px 5px rgba(239,79,
65,
0.3);
}

.bsfine-ec #btnNext.btn--primary {
  height: 60px;
  background-color: #ef4f41;
  color: #fff;
  font-size: 18px;
  border-radius: 40px;
  border: none;
  padding: 0;
  box-shadow: 0 4px 5px rgba(239, 79, 65, 0.3);
}


.bsfine-ec .btn--secondary {
  height: 52px;
  background-color: #ef4f41;
  color: #fff;
  font-size: 16px;
  border-radius: 40px;
  box-shadow: 0 3px 4px rgba(239,79,
65,
0.25);
}


.bsfine-ec .btn--outline-red {
  height: 60px;
  background-color: #fff;
  color: #ef4f41;
  font-size: 16px;
  border: 2px solid #ef4f41;
  border-radius: 40px;
}


.bsfine-ec .btn--outline-gray {
  height: 52px;
  background-color: #fff;
  color: #666;
  font-size: 16px;
  border: 2px solid #ccc;
  border-radius: 40px;
}


.bsfine-ec .btn--amazon {
  height: 52px;
  background-color: #f0c025;
  color: #333;
  font-size: 16px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,
0,
0.08);
}

/* ===================================================
   ページタイトル（ページ共通）
   =================================================== */

.bsfine-ec .page-title {
  font-size: 18px;
  font-weight: 700;
  color: #333;
  padding: 16px 0 8px;
  text-align: center;
}


.bsfine-ec .page-subtitle {
  font-size: 13px;
  color: #666;
  text-align: center;
  line-height: 1.6;
}

/* ===================================================
   セクションタイトル（カード内見出しなど）
   =================================================== */

.bsfine-ec .section-title {
  font-size: 15px;
  font-weight: 700;
  color: #333;
  margin-bottom: 12px;
}

/* ===================================================
   確認テーブル（注文確認、会員登録確認など）
   =================================================== */

.bsfine-ec .confirm-table {
  width: 100%;
  border-collapse: collapse;
}


.bsfine-ec .confirm-table th,
.bsfine-ec .confirm-table td {
  padding: 12px 0;
  border-bottom: 1px solid #eee;
  font-size: 13px;
  vertical-align: top;
  text-align: left;
}


.bsfine-ec .confirm-table th {
  width: 35%;
  color: #666;
  font-weight: 400;
  padding-right: 8px;
}


.bsfine-ec .confirm-table td {
  color: #333;
  font-weight: 700;
}

/* ===================================================
   注文合計金額エリア
   =================================================== */

.bsfine-ec .order-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0 8px;
  border-top: 2px solid #ef4f41;
}


.bsfine-ec .order-total__label {
  font-size: 15px;
  font-weight: 700;
  color: #444;
}


.bsfine-ec .order-total__price {
  font-size: 22px;
  font-weight: 700;
  color: #ef4f41;
}


.bsfine-ec .order-total__tax {
  font-size: 11px;
  color: #888;
}

/* ===================================================
   商品行
   =================================================== */

.bsfine-ec .product-row {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #eee;
}


.bsfine-ec .product-row__img {
  width: 72px;
  height: 72px;
  border-radius: 4px;
  object-fit: cover;
  background-color: #f0f0f0;
  flex-shrink: 0;
}


.bsfine-ec .product-row__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}


.bsfine-ec .product-row__name {
  font-size: 13px;
  font-weight: 700;
  color: #333;
  line-height: 1.4;
}


.bsfine-ec .product-row__option {
  font-size: 12px;
  color: #777;
}


.bsfine-ec .product-row__price {
  font-size: 15px;
  font-weight: 700;
  color: #333;
  margin-top: auto;
}


.bsfine-ec .product-row__qty {
  font-size: 12px;
  color: #777;
}

/* ===================================================
   ステップナビゲーション（注文フロー用）
   =================================================== */

.bsfine-ec .step-nav {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 12px 8px;
  border-bottom: 1px solid #eee;
  overflow-x: auto;
}


.bsfine-ec .step-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 60px;
}


.bsfine-ec .step-nav__circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: #ddd;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}


.bsfine-ec .step-nav__item--active .step-nav__circle {
  background-color: #ef4f41;
}


.bsfine-ec .step-nav__item--done .step-nav__circle {
  background-color: #888;
}


.bsfine-ec .step-nav__label {
  font-size: 10px;
  color: #888;
  text-align: center;
  white-space: nowrap;
}


.bsfine-ec .step-nav__item--active .step-nav__label {
  color: #ef4f41;
  font-weight: 700;
}


.bsfine-ec .step-nav__sep {
  flex: 0 0 16px;
  height: 1px;
  background-color: #ddd;
  margin-bottom: 14px;
}

/* ===================================================
   ステップカード（注文フロー）
   =================================================== */

.bsfine-ec .step-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,
0,
0.03);
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
}


.bsfine-ec .step-item {
  display: flex;
  align-items: center;
  gap: 8px;
}


.bsfine-ec .step-circle {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ededed;
  color: #999;
  font-size: 12px;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}


.bsfine-ec .step-circle--active {
  background: #8bc34a;
  color: #fff;
  font-weight: 700;
}


.bsfine-ec .step-circle--done {
  background: #bbb;
  color: #fff;
  font-weight: 700;
}


.bsfine-ec .step-label {
  font-size: 12px;
  color: #999;
  font-weight: 400;
  white-space: nowrap;
}


.bsfine-ec .step-label--active {
  color: #8bc34a;
  font-weight: 700;
}

/* ===================================================
   ラジオ選択オプション
   =================================================== */

.bsfine-ec .radio-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}


.bsfine-ec .radio-option--selected {
  border: 1.5px solid #ef4f41;
  background: #fdf5f4;
}


.bsfine-ec .radio-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid #999;
  background: #fff;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}


.bsfine-ec .radio-dot--selected {
  background: #ef4f41;
  border-color: #ef4f41;
}


.bsfine-ec .radio-option__label {
  font-size: 14px;
  font-weight: 700;
  color: #333;
  flex: 1;
}


.bsfine-ec .radio-option__note {
  font-size: 12px;
  color: #666;
  padding-left: 24px;
  line-height: 1.5;
}


.bsfine-ec .radio-option__note--red {
  color: #dc3545;
}

/* ===================================================
   トグルスイッチ
   =================================================== */

.bsfine-ec .toggle {
  width: 48px;
  height: 28px;
  border-radius: 14px;
  background: #ef4f41;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
}


.bsfine-ec .toggle__knob {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: 3px;
  left: 23px;
}

/* ===================================================
   住所表示ボックス
   =================================================== */

.bsfine-ec .addr-box {
  background: #f7f7f7;
  border: 1px solid #eee;
  border-radius: 6px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}


.bsfine-ec .addr-box__postal { font-size: 13px; color: #333; }

.bsfine-ec .addr-box__address { font-size: 14px; color: #333; }

.bsfine-ec .addr-box__name { font-size: 14px; font-weight: 700; color: #333; }

/* ===================================================
確認行（flex型）
   =================================================== */

.bsfine-ec .confirm-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
  border-bottom: 1px solid #eee;
  font-size: 13px;
  padding: 8px 0;
}


.bsfine-ec .confirm-row__label { color: #333; font-weight: 400; flex-shrink: 0; padding-right: 8px; }

.bsfine-ec .confirm-row__value { color: #333; font-weight: 700; text-align: right; }

.bsfine-ec .confirm-row__value--multi { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }

/* ===================================================
注文金額行
   =================================================== */

.bsfine-ec .order-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  border-bottom: 1px solid #eee;
  font-size: 15px;
  color: #333;
}


.bsfine-ec .order-row--no-border { border-bottom: none; }

.bsfine-ec .order-row--note { font-size: 13px; color: #333; height: auto; padding: 8px 0; border-bottom: none; }


.bsfine-ec .order-row--total {
  height: 48px;
  font-size: 18px;
  font-weight: 700;
  color: #ef4f41;
  border-bottom: none;
}


.bsfine-ec .order-row--total .order-row__price { font-size: 20px; }


.bsfine-ec .order-row__label { flex: 1; }

.bsfine-ec .order-row__price { flex-shrink: 0; white-space: nowrap; text-align: right; }

/* ===================================================
セクションヘッダー（変更するリンク付き）
   =================================================== */

.bsfine-ec .section-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 22px;
}


.bsfine-ec .section-hdr__title { font-size: 14px; font-weight: 700; color: #333; }

.bsfine-ec .section-hdr__link {
  font-size: 13px;
  color: #0066cc;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

.bsfine-ec .section-edit-link {
  align-self: flex-start;
  font-size: 13px;
  color: #0066cc;
  line-height: 1.4;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.bsfine-ec .section-edit-link--outside {
  margin-top: -8px;
  margin-left: 16px;
}

/* ===================================================
   商品カード（カート）
   =================================================== */

.bsfine-ec .product-card {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 12px 16px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.bsfine-ec .product-card--in-card {
  border: none;
  border-radius: 0;
  padding: 0;
}


.bsfine-ec .product-card__img {
  width: 80px;
  height: 80px;
  border-radius: 4px;
  background: #d2d2d2;
  flex-shrink: 0;
  object-fit: cover;
}


.bsfine-ec .product-card__info { flex: 1; display: flex; flex-direction: column; gap: 5px; }

.bsfine-ec .product-card__name { font-size: 14px; font-weight: 700; color: #333; }

.bsfine-ec .product-card__detail { font-size: 12px; color: #333; line-height: 1.55; }

.bsfine-ec .product-card__price-normal { font-size: 12px; color: #333; }

.bsfine-ec .product-card__note { font-size: 11px; color: #ef4f41; line-height: 1.45; }

.bsfine-ec .product-card__total { font-size: 14px; font-weight: 700; color: #333; }


.bsfine-ec .qty-row { display: flex; align-items: center; gap: 8px; padding: 2px 0; }

.bsfine-ec .qty-btn { background: #eee; border: none; border-radius: 4px; padding: 4px 8px; font-size: 13px; color: #333; cursor: pointer; }

.bsfine-ec .qty-num { font-size: 14px; font-weight: 700; color: #333; min-width: 20px; text-align: center; }


.bsfine-ec .delete-btn {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 7px 14px;
  border: 1px solid #eee;
  border-radius: 4px;
  font-size: 12px;
  color: #999;
  background: #fff;
  cursor: pointer;
  text-decoration: none;
}

.bsfine-ec .delete-btn--inline {
  margin-top: -4px;
}

/* ===================================================
   アコーディオン
   =================================================== */

.bsfine-ec .accordion-trigger {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,
0,
0.04);
  height: 44px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  color: #444;
  text-decoration: none;
}


/* ===================================================
   生年月日行
   =================================================== */

.bsfine-ec .dob-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}


.bsfine-ec .dob-input {
  height: 44px;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 0 12px;
  font-family: inherit;
  font-size: 14px;
  background: #fff;
  outline: none;
  color: #444;
}


.bsfine-ec .dob-input::placeholder { color: #999; }

.bsfine-ec .dob-input:focus { border-color: #ef4f41; }

.bsfine-ec .dob-sep { font-size: 13px; color: #333; flex-shrink: 0; line-height: 1; }

/* ===================================================
性別・ラジオグループ
   =================================================== */

.bsfine-ec .gender-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 8px;
  align-items: center;
  width: 100%;
}


.bsfine-ec .radio-label,
.bsfine-ec .checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  color: #333;
}

.bsfine-ec .checkbox-label--right {
  align-self: flex-end;
  flex-direction: row-reverse;
  min-height: 32px;
  padding-left: 16px;
}


.bsfine-ec .radio-label input[type="radio"],
.bsfine-ec .checkbox-label input[type="checkbox"] {
  accent-color: #ef4f41;
  cursor: pointer;
}


.bsfine-ec .radio-label input[type="radio"] { width: 16px; height: 16px; }

.bsfine-ec .checkbox-label input[type="checkbox"] { width: 20px; height: 20px; }

/* ===================================================
メールマガジン・規約カード
   =================================================== */

.bsfine-ec .newsletter-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,
0,
0.04);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.bsfine-ec .newsletter-card--in-form {
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}


.bsfine-ec .newsletter-card__text { flex: 1; display: flex; flex-direction: column; gap: 4px; }

.bsfine-ec .newsletter-card__title { font-size: 14px; font-weight: 700; color: #444; }

.bsfine-ec .newsletter-card__desc { font-size: 12px; color: #666; }


.bsfine-ec .terms-box {
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 12px;
  height: 152px;
  overflow-y: auto;
  background: #fff;
  font-size: 14px;
  color: #333;
  line-height: 1.6;
}

/* ===================================================
   推薦商品セクション
   =================================================== */

.bsfine-ec .rec-section {
  background: #f8f8f8;
  padding: 16px 0 20px;
  position: relative;
  overflow: hidden;
  min-height: 188px;
}


.bsfine-ec .rec-section__title { font-size: 14px; font-weight: 700; color: #333; text-align: center; margin-bottom: 12px; }

.bsfine-ec .rec-row { display: flex; gap: 8px; padding: 0 16px; overflow-x: auto; }

.bsfine-ec .rec-item { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }

.bsfine-ec .rec-item__img { width: 100px; height: 90px; border-radius: 4px; background: #d7d7d7; }

.bsfine-ec .rec-item__name { font-size: 10px; color: #333; width: 100px; line-height: 1.4; }

.bsfine-ec .rec-item__price { font-size: 11px; font-weight: 700; color: #333; }

/* .rec-item__img 内の <img> がコンテナ高さ 90px を超え下方向にはみ出し、
   後続の .rec-item__name と被る現象の修正。
   <img> をコンテナサイズにフィットさせ、はみ出し分は overflow: hidden で切る。 */
.bsfine-ec .rec-item__img {
    overflow: hidden;
}
.bsfine-ec .rec-item__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


.bsfine-ec .rec-arrow {
  position: absolute;
  top: 89px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(30,30,
30,
0.7);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  border: none;
}


.bsfine-ec .rec-arrow--left { left: 8px; }

.bsfine-ec .rec-arrow--right { right: 8px; }

/* ===================================================
購入完了ページ
   =================================================== */

.bsfine-ec .survey-section {
  background: linear-gradient(to bottom,
#e8d098,
#c8a050);
  padding: 32px 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
}


.bsfine-ec .survey-section__badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 6px 14px;
  border-radius: 999px;
  background: #d42020;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.bsfine-ec .survey-section__badge::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 12px;
  height: 12px;
  background: #d42020;
  transform: translateX(-50%) rotate(45deg);
}

.bsfine-ec .survey-section__title { font-size: 20px; font-weight: 700; color: #d42020; text-align: center; }

.bsfine-ec .survey-section__winners-img {
  display: block;
  width: 100%;
  max-width: 330px;
  height: auto;
}


.bsfine-ec .line-section {
  background: #06c755;
  padding: 32px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}


.bsfine-ec .line-section__title { font-size: 20px; font-weight: 700; color: #fff; text-align: center; }

.bsfine-ec .line-section__desc { font-size: 12px; color: #fff; text-align: center; line-height: 1.7; }


.bsfine-ec .btn--survey {
  height: 56px;
  background: #d42020;
  color: #fff;
  font-size: 15px;
  border-radius: 28px;
}


.bsfine-ec .btn--line {
  height: 56px;
  background: #fff;
  color: #06c755;
  font-size: 15px;
  border-radius: 28px;
  width: 100%;
  max-width: 350px;
}


.bsfine-ec .complete-banner {
  background: #fff;
  padding: 32px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}


.bsfine-ec .complete-banner__img {
  width: 100%;
  max-width: 330px;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.bsfine-ec .complete-banner__photo,
.bsfine-ec .complete-banner__message {
  display: block;
  width: 100%;
  height: auto;
}

/* ===================================================
   郵便番号検索ボタン
   =================================================== */

.bsfine-ec .btn--postal {
  width: auto;
  min-width: 112px;
  height: 48px;
  background: #ef4f41;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  border-radius: 6px;
  white-space: nowrap;
  padding: 0 12px;
  flex-shrink: 0;
}

/* ===================================================
   ボタン状態（hover / focus / active）上書き
   ---------------------------------------------------
   light-green Material の
   .btn:not(.btn-raised):not(.btn-link):hover/:focus による
   背景 rgba(153,153,153,.2) 上書きを各 .btn--* で打ち消す。
   原因CSS:
     appconfig/DesignRoot/light-green/css/style.light-green-500.min.css
   詳細度 (0,0,4,0) ＋ ソースオーダー後勝ちで効かせる。
   =================================================== */

.bsfine-ec .btn { -webkit-tap-highlight-color: transparent; }

/* 赤系: postal / primary / secondary */
.bsfine-ec .btn.btn--postal:hover,
.bsfine-ec .btn.btn--postal:focus,
.bsfine-ec .btn.btn--postal:active,
.bsfine-ec .btn.btn--primary:hover,
.bsfine-ec .btn.btn--primary:focus,
.bsfine-ec .btn.btn--primary:active,
.bsfine-ec .btn.btn--secondary:hover,
.bsfine-ec .btn.btn--secondary:focus,
.bsfine-ec .btn.btn--secondary:active {
  background-color: #ef4f41;
  color: #fff;
}

.bsfine-ec .btn.btn--survey:hover,
.bsfine-ec .btn.btn--survey:focus,
.bsfine-ec .btn.btn--survey:active {
  background-color: #d42020;
  color: #fff;
}

.bsfine-ec .btn.btn--outline-red:hover,
.bsfine-ec .btn.btn--outline-red:focus,
.bsfine-ec .btn.btn--outline-red:active {
  background-color: #fff;
  color: #ef4f41;
}

.bsfine-ec .btn.btn--outline-gray:hover,
.bsfine-ec .btn.btn--outline-gray:focus,
.bsfine-ec .btn.btn--outline-gray:active {
  background-color: #fff;
  color: #666;
}

.bsfine-ec .btn.btn--amazon:hover,
.bsfine-ec .btn.btn--amazon:focus,
.bsfine-ec .btn.btn--amazon:active {
  background-color: #f0c025;
  color: #333;
}

.bsfine-ec .btn.btn--line:hover,
.bsfine-ec .btn.btn--line:focus,
.bsfine-ec .btn.btn--line:active {
  background-color: #fff;
  color: #06c755;
}

/* キーボード操作時のフォーカス可視性を確保（アクセシビリティ）。
   :focus-visible は :focus と独立して outline を付与する */
.bsfine-ec .btn.btn--postal:focus-visible,
.bsfine-ec .btn.btn--primary:focus-visible,
.bsfine-ec .btn.btn--secondary:focus-visible,
.bsfine-ec .btn.btn--outline-red:focus-visible {
  outline: 2px solid #ef4f41;
  outline-offset: 2px;
}
.bsfine-ec .btn.btn--survey:focus-visible {
  outline: 2px solid #d42020;
  outline-offset: 2px;
}
.bsfine-ec .btn.btn--amazon:focus-visible {
  outline: 2px solid #f0c025;
  outline-offset: 2px;
}
.bsfine-ec .btn.btn--line:focus-visible {
  outline: 2px solid #06c755;
  outline-offset: 2px;
}
.bsfine-ec .btn.btn--outline-gray:focus-visible {
  outline: 2px solid #666;
  outline-offset: 2px;
}

.bsfine-ec .form-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.bsfine-ec .postal-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.bsfine-ec .text-sm {
  font-size: 14px;
  color: #333;
}

/* ===================================================
   オーダーエリアセクションヘッダー
   =================================================== */

.bsfine-ec .order-area-title {
  font-size: 16px;
  font-weight: 700;
  color: #333;
  padding: 16px 0 4px;
}

/* ===================================================
   汎用ユーティリティ
   =================================================== */

.bsfine-ec .text-link-blue {
  color: #0066cc;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-size: 13px;
}


.bsfine-ec .text-red { color: #dc3545; }

.bsfine-ec .text-error { color: #ef4f41; font-size: 12px; }

/* ===================================================
   CMS納品向けユーティリティ
   =================================================== */

.bsfine-ec .ec-form {
  display: contents;
}

.bsfine-ec .page-title-main {
  font-size: 22px;
  font-weight: 700;
  color: #444;
}

.bsfine-ec .text-strong,
.bsfine-ec .text-strong-center {
  font-size: 14px;
  font-weight: 700;
  color: #444;
}

.bsfine-ec .text-strong-center {
  text-align: center;
}

.bsfine-ec .text-muted {
  font-size: 13px;
  color: #333;
  line-height: 1.6;
}

.bsfine-ec .text-body-sm {
  font-size: 13px;
  color: #333;
}

.bsfine-ec .text-body-strong-sm {
  font-size: 13px;
  font-weight: 700;
  color: #333;
}

.bsfine-ec .text-caption {
  font-size: 12px;
  color: #333;
}

.bsfine-ec .summary-inline-row {
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bsfine-ec .choice-input,
.bsfine-ec .radio-label input[type="checkbox"],
.bsfine-ec .radio-label input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: #ef4f41;
}

.bsfine-ec .text-link-blue--center {
  display: block;
  text-align: center;
}

.bsfine-ec .text-link-blue--padded {
  padding: 8px 0;
}

.bsfine-ec .link-subtle {
  font-size: 13px;
  color: #666;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.bsfine-ec .link-subtle--center {
  text-align: center;
}

.bsfine-ec .cta-wrap {
  display: flex;
  justify-content: center;
}

.bsfine-ec .cta-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.bsfine-ec .btn--fixed {
  width: 100%;
  max-width: none;
}

.bsfine-ec .card__header--split {
  justify-content: space-between;
}

.bsfine-ec .card__header--badge {
  gap: 8px;
}

.bsfine-ec .card__body--flush {
  gap: 0;
  padding: 16px;
}

.bsfine-ec .card__body--terms {
  gap: 16px;
  padding: 16px;
}

.bsfine-ec .badge--optional {
  background: #999;
  color: #fff;
}

.bsfine-ec .section-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bsfine-ec .section-label {
  font-size: 14px;
  font-weight: 700;
  color: #444;
}

.bsfine-ec .clickable-label {
  display: block;
  cursor: pointer;
}

.bsfine-ec .payment-option {
  display: block;
}

.bsfine-ec .payment-detail {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0 12px 0 34px;
  transition: max-height 0.28s ease, opacity 0.2s ease, padding-top 0.28s ease, padding-bottom 0.28s ease;
}

.bsfine-ec .radio-option--selected + .payment-detail {
  max-height: 280px;
  opacity: 1;
  padding-top: 8px;
  padding-bottom: 4px;
}

.bsfine-ec .payment-detail__text {
  font-size: 12px;
  line-height: 1.6;
  color: #333;
}

.bsfine-ec .payment-detail__text + .payment-detail__text {
  margin-top: 4px;
}

.bsfine-ec .payment-detail__text--red {
  color: #dc3545;
}

.bsfine-ec .inline-control-row {
  display: flex;
  gap: 8px;
}

.bsfine-ec .flex-input {
  flex: 1;
}

.bsfine-ec .textarea-auto {
  height: auto;
  padding: 8px 12px;
}

.bsfine-ec .accordion-content {
  display: block;
  background: #fff;
  border-radius: 0 0 8px 8px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
  transition: max-height 0.28s ease, opacity 0.2s ease, padding-top 0.28s ease, padding-bottom 0.28s ease;
}

.bsfine-ec .accordion-content.is-open {
  max-height: 240px;
  opacity: 1;
  padding-top: 16px;
  padding-bottom: 16px;
}

.bsfine-ec .is-hidden {
  display: none;
}

.bsfine-ec .is-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.bsfine-ec .is-readonly {
  pointer-events: none;
}

.bsfine-ec .is-last {
  border-bottom: none;
}

.bsfine-ec .confirm-row--multi {
  min-height: 56px;
  align-items: flex-start;
  padding: 8px 0;
}

.bsfine-ec .product-section {
  padding: 16px 0 4px;
}

.bsfine-ec .order-area-title--flush {
  padding-top: 0;
}

.bsfine-ec .mt-8 {
  margin-top: 8px;
}

.bsfine-ec .qty-label {
  font-size: 12px;
  color: #333;
}

.bsfine-ec .dob-input--year {
  width: 88px;
}

.bsfine-ec .dob-input--month,
.bsfine-ec .dob-input--day {
  width: 58px;
}

.bsfine-ec .toggle-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.bsfine-ec .step-wrap {
  background: #f5f5f5;
  padding: 16px 0;
}

.bsfine-ec .survey-question {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bsfine-ec .survey-question--spaced,
.bsfine-ec .survey-question__title--spaced {
  margin-top: 4px;
}

.bsfine-ec .survey-question__title {
  font-size: 13px;
  font-weight: 700;
  color: #333;
}

.bsfine-ec .survey-question__hint {
  font-size: 11px;
  color: #444;
}

.bsfine-ec .survey-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bsfine-ec .survey-indent {
  padding-left: 24px;
}

.bsfine-ec .survey-input-sm {
  height: 40px;
  font-size: 12px;
}

.bsfine-ec .survey-textarea {
  height: 80px;
  padding: 8px 12px;
  font-size: 12px;
}

.bsfine-ec .complete-order-box {
  background: #fff;
  padding: 0 16px;
  margin: 0;
}

.bsfine-ec .complete-order-card {
  margin: 0 auto;
}

.bsfine-ec .confirm-row__value--left {
  font-weight: 400;
  color: #333;
  text-align: left;
}

.bsfine-ec .product-summary {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.bsfine-ec .product-summary__img {
  width: 72px;
  height: 72px;
  border-radius: 4px;
  background: #eee;
  border: 1px solid #ddd;
  flex-shrink: 0;
}

.bsfine-ec .product-summary__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bsfine-ec .product-summary__name {
  font-size: 16px;
  font-weight: 700;
  color: #333;
}


.bsfine-ec .survey-form-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.04);
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 360px;
}

/* ===================================================
   レスポンシブ補正
   =================================================== */

@media (max-width: 360px) {
  .bsfine-ec .page-content {
    padding-right: 12px;
    padding-left: 12px;
  }

  .bsfine-ec .card__body {
    padding-right: 14px;
    padding-left: 14px;
  }

  .bsfine-ec .form-grid-2,
  .bsfine-ec .postal-row {
    grid-template-columns: 1fr;
  }

  .bsfine-ec .btn--postal {
    width: 100%;
  }

  .bsfine-ec .btn--outline-red {
    font-size: 14px;
    white-space: nowrap;
  }

  .bsfine-ec .product-card {
    gap: 12px;
    padding-right: 12px;
    padding-left: 12px;
  }

  .bsfine-ec .product-card__img {
    width: 72px;
    height: 72px;
  }

  .bsfine-ec .dob-row {
    gap: 6px;
  }

  .bsfine-ec .dob-input--year {
    width: 76px;
  }

  .bsfine-ec .dob-input--month,
  .bsfine-ec .dob-input--day {
    width: 52px;
  }
}

@media (min-width: 600px) {
  .bsfine-ec .page-content,
  .bsfine-ec .step-wrap,
  .bsfine-ec .survey-section,
  .bsfine-ec .line-section,
  .bsfine-ec .complete-banner,
  .bsfine-ec .complete-order-box {
    padding-right: 24px;
    padding-left: 24px;
  }

  .bsfine-ec .card__body,
  .bsfine-ec .card__body--terms {
    padding: 18px;
  }

  .bsfine-ec .survey-form-card {
    max-width: none;
  }
}