/* -------------------------------------------------------------------------
       DESIGN SYSTEM & VARIABLES (既存ページのトンマナ・配色を完全に引き継ぎ)
    ------------------------------------------------------------------------- */

    /* 基本リセット */

    /* -------------------------------------------------------------------------
       【共通デザイン：グローバルナビゲーション】
    ------------------------------------------------------------------------- */

    /* -------------------------------------------------------------------------
       進捗インジケーター（ステップバー）
    ------------------------------------------------------------------------- */
    .step-indicator-wrapper {
      max-width: 1000px;
      margin: 3rem auto 1rem auto;
      padding: 0 2rem;
    }
    .step-bar {
      display: flex;
      justify-content: space-between;
      list-style: none;
      position: relative;
    }
    .step-bar::before {
      content: "";
      position: absolute;
      top: 25px; left: 0; width: 100%; height: 1px;
      background-color: rgba(138, 106, 74, 0.15);
      z-index: 1;
    }
    .step-bar-node {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      z-index: 2;
      flex: 1;
    }
    .step-bar-circle {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: #FFFFFF;
      border: 1px solid rgba(138, 106, 74, 0.25);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-en);
      font-size: 0.95rem;
      color: var(--text-muted);
      margin-bottom: 0.8rem;
      transition: all 0.4s;
    }
    .step-bar-label {
      font-family: var(--font-display);
      font-size: 0.85rem;
      color: var(--text-muted);
      font-weight: 500;
      transition: all 0.4s;
    }
    /* アクティブステート */
    .step-bar-node.is-active .step-bar-circle {
      background-color: var(--color-main);
      border-color: var(--color-main);
      color: #FFFFFF;
      box-shadow: 0 0 15px rgba(85, 107, 77, 0.2);
    }
    .step-bar-node.is-active .step-bar-label {
      color: var(--color-main);
      font-weight: 600;
    }
    /* 完了済みステート */
    .step-bar-node.is-completed .step-bar-circle {
      background-color: var(--color-sub);
      border-color: var(--color-sub);
      color: #FFFFFF;
    }

    /* -------------------------------------------------------------------------
       疑似画面遷移用ラッパー (各画面ブロックの基本定義)
    ------------------------------------------------------------------------- */
    .cart-flow-section {
      display: none; /* 初期状態では非表示（JSで切り替え） */
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.5s ease, transform 0.5s ease;
    }
    .cart-flow-section.is-active {
      display: block;
      opacity: 1;
      transform: translateY(0);
    }

    /* -------------------------------------------------------------------------
       【ステップ1：ショッピングカート画面】
    ------------------------------------------------------------------------- */
    .cart-layout {
      display: grid;
      grid-template-columns: 1.4fr 0.6fr;
      gap: 3.5rem;
    }
    .cart-items-table {
      width: 100%;
      border-collapse: collapse;
    }
    .cart-items-table th {
      font-family: var(--font-display);
      font-weight: 600;
      font-size: 0.95rem;
      color: var(--text-muted);
      border-bottom: 1px solid rgba(138, 106, 74, 0.15);
      padding-bottom: 1.2rem;
      text-align: left;
    }
    .cart-items-table td {
      padding: 2.5rem 0;
      border-bottom: 1px solid rgba(138, 106, 74, 0.1);
      vertical-align: top;
    }
    .cart-product-cell {
      display: flex;
      gap: 1.5rem;
    }
    .cart-product-img {
      width: 100px;
      aspect-ratio: 1 / 1;
      background-color: #F0EDE8;
      object-fit: contain;
      border: 1px solid rgba(138, 106, 74, 0.08);
    }
    .cart-product-meta {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .cart-product-category {
      font-family: var(--font-display);
      font-size: 0.75rem;
      color: var(--color-sub);
      letter-spacing: 0.1em;
    }
    .cart-product-name {
      font-family: var(--font-display);
      font-size: 1.05rem;
      font-weight: 500;
      color: var(--text-dark);
      margin: 0.2rem 0;
    }
    .cart-product-price-unit {
      font-size: 0.9rem;
      color: var(--text-muted);
    }

    /* 数量カウンタ (カート専用) */
    .cart-qty-counter {
      display: flex;
      border: 1px solid rgba(138, 106, 74, 0.2);
      background-color: #FFFFFF;
      max-width: 120px;
    }
    .cart-qty-btn {
      width: 35px;
      height: 35px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1rem;
    }
    .cart-qty-btn:hover { background-color: var(--bg-base); }
    .cart-qty-value {
      flex-grow: 1;
      height: 35px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.95rem;
      font-weight: 500;
      border-left: 1px solid rgba(138, 106, 74, 0.15);
      border-right: 1px solid rgba(138, 106, 74, 0.15);
    }

    .btn-item-delete {
      font-family: var(--font-display);
      font-size: 0.82rem;
      color: var(--color-error);
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
      margin-top: 0.8rem;
    }
    .btn-item-delete:hover { opacity: 0.8; }

    /* サマリーカードエリア（お買い物の重要なお会計） */
    .summary-card {
      background-color: #FFFFFF;
      border: 1px solid rgba(138, 106, 74, 0.12);
      padding: 2.5rem;
      height: fit-content;
      position: sticky;
      top: 120px;
    }
    .summary-card-title {
      font-family: var(--font-display);
      font-size: 1.25rem;
      font-weight: 600;
      color: var(--text-dark);
      margin-bottom: 1.5rem;
      padding-bottom: 0.8rem;
      border-bottom: 1px solid rgba(138, 106, 74, 0.15);
    }
    .summary-row {
      display: flex;
      justify-content: space-between;
      font-size: 0.92rem;
      margin-bottom: 1.2rem;
      color: var(--text-muted);
    }
    .summary-row.total-row {
      font-family: var(--font-display);
      font-size: 1.3rem;
      font-weight: 600;
      color: var(--text-dark);
      padding-top: 1.2rem;
      border-top: 1px solid rgba(138, 106, 74, 0.15);
      margin-top: 1.5rem;
    }
    .summary-tax-note {
      font-size: 0.8rem;
      color: var(--text-muted);
      text-align: right;
      margin-top: -0.8rem;
      margin-bottom: 2rem;
    }
    .shipping-free-alert {
      background-color: rgba(85, 107, 77, 0.08);
      border: 1px solid rgba(85, 107, 77, 0.2);
      color: var(--color-main);
      font-size: 0.85rem;
      padding: 0.8rem 1rem;
      text-align: center;
      margin-bottom: 2rem;
      font-family: var(--font-display);
    }

    /* ボタンシステム */
    .btn-primary-action {
      width: 100%;
      height: 55px;
      background-color: var(--color-accent);
      color: var(--text-dark);
      font-family: var(--font-display);
      font-size: 1rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.4s;
    }
        .btn-return-shopping {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0.9rem 2.5rem;
      border: 1px solid var(--text-dark);
      font-family: var(--font-display);
      font-size: 0.9rem;
      margin-top: 1.5rem;
      transition: all 0.4s;
    }
    .btn-return-shopping:hover {
      background-color: var(--text-dark);
      color: var(--bg-base);
    }

    /* 空のカート状態 */
    .empty-cart-view {
      display: none;
      text-align: center;
      padding: 5rem 2rem;
    }
    .empty-cart-message {
      font-family: var(--font-display);
      font-size: 1.25rem;
      color: var(--text-muted);
      margin-bottom: 2.5rem;
    }

    /* -------------------------------------------------------------------------
       【ステップ2：ログイン／ゲスト選択画面】
    ------------------------------------------------------------------------- */
    .auth-gate-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      max-width: 1000px;
      margin: 0 auto;
    }
    .auth-gate-panel {
      background-color: #FFFFFF;
      border: 1px solid rgba(138, 106, 74, 0.12);
      padding: 3.5rem 3rem;
      display: flex;
      flex-direction: column;
    }
    .auth-gate-panel-title {
      font-family: var(--font-display);
      font-size: 1.3rem;
      font-weight: 600;
      color: var(--text-dark);
      margin-bottom: 1.2rem;
      padding-bottom: 0.8rem;
      border-bottom: 1px solid rgba(138, 106, 74, 0.15);
    }
    .auth-gate-panel-desc {
      font-size: 0.88rem;
      color: var(--text-muted);
      margin-bottom: 2rem;
      line-height: 1.8;
    }
                    .member-benefits-list {
      list-style: none;
      margin-bottom: 2.5rem;
    }
    .member-benefits-list li {
      position: relative;
      padding-left: 1.5rem;
      font-size: 0.88rem;
      color: var(--text-muted);
      margin-bottom: 0.8rem;
    }
    .member-benefits-list li::before {
      content: "✓";
      position: absolute;
      left: 0; top: 0;
      color: var(--color-main);
      font-weight: bold;
    }

    /* -------------------------------------------------------------------------
       【ステップ3：お届け先・お客様情報入力画面】
    ------------------------------------------------------------------------- */
    .form-layout-container {
      max-width: 900px;
      margin: 0 auto;
    }
                .form-row-grid-address {
      display: grid;
      grid-template-columns: 0.4fr 1.6fr;
      gap: 1.5rem;
    }
    .address-same-checkbox-wrapper {
      margin-top: 1rem;
      padding: 1rem;
      background-color: rgba(138, 106, 74, 0.04);
      border: 1px solid rgba(138, 106, 74, 0.1);
    }
    .custom-checkbox-row {
      display: flex;
      align-items: center;
      gap: 0.8rem;
      cursor: pointer;
      font-size: 0.9rem;
      font-weight: 500;
    }
    .custom-checkbox-row input {
      width: 18px;
      height: 18px;
      accent-color: var(--color-main);
    }

    /* 別のお届け先アコーディオン */
    .alternative-shipping-fields {
      display: none; /* JSでアコーディオン制御 */
      margin-top: 2rem;
      padding-top: 2rem;
      border-top: 1px dashed rgba(138, 106, 74, 0.2);
    }

    .nav-buttons-row {
      display: flex;
      justify-content: space-between;
      gap: 2rem;
      margin-top: 3rem;
    }
    .btn-secondary-action {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 55px;
      padding: 0 2.5rem;
      border: 1px solid var(--text-dark);
      font-family: var(--font-display);
      font-size: 0.95rem;
      transition: all 0.4s;
      background-color: transparent;
    }

    /* -------------------------------------------------------------------------
       【ステップ4：お支払い・配送方法選択画面】
    ------------------------------------------------------------------------- */
    .payment-option-card {
      border: 1px solid rgba(138, 106, 74, 0.2);
      padding: 1.8rem;
      background-color: #FFFFFF;
      margin-bottom: 1.5rem;
      cursor: pointer;
      transition: all 0.3s;
    }
    .payment-option-card:hover {
      border-color: var(--color-main);
    }
    .payment-option-card.is-selected {
      border: 2px solid var(--color-main);
      background-color: rgba(85, 107, 77, 0.02);
    }
    .payment-option-card.is-disabled {
      opacity: 0.55;
      cursor: not-allowed;
      pointer-events: none;
      background-color: rgba(0, 0, 0, 0.03);
    }
    .payment-soon-badge {
      flex: 0 0 auto;
      margin-left: 0.75rem;
      font-size: 0.75rem;
      font-weight: 600;
      color: var(--text-muted);
      border: 1px solid rgba(138, 106, 74, 0.25);
      padding: 0.15rem 0.55rem;
      letter-spacing: 0.04em;
    }
    .payment-card-header {
      display: flex;
      align-items: center;
      gap: 1rem;
      font-weight: 600;
      font-family: var(--font-display);
      font-size: 1.05rem;
      min-width: 0;
    }
    .payment-card-header label {
      flex: 1 1 auto;
      min-width: 0;
    }
    .payment-card-header input[type="radio"] {
      flex: 0 0 auto;
      width: 18px;
      height: 18px;
      accent-color: var(--color-main);
    }
    .payment-card-body {
      margin-top: 1rem;
      padding-left: 2.2rem;
      font-size: 0.88rem;
      color: var(--text-muted);
      display: none; /* 選択時のみ開く */
    }
    .payment-option-card.is-selected .payment-card-body {
      display: block;
    }

    /* クレジットカード入力欄 */
    .credit-card-fields-box {
      margin-top: 1rem;
      padding: 1.5rem;
      background-color: rgba(138, 106, 74, 0.04);
      border: 1px solid rgba(138, 106, 74, 0.1);
    }
    .cc-number-wrap {
      position: relative;
    }
    .cc-number-input {
      width: 100%;
      padding-right: 7rem;
    }
    .cc-card-brand {
      position: absolute;
      right: 0.75rem;
      top: 50%;
      transform: translateY(-50%);
      font-size: 0.75rem;
      font-weight: 600;
      color: var(--text-muted);
      letter-spacing: 0.02em;
      pointer-events: none;
    }
    .cc-card-brand.is-visa { color: #1A1F71; }
    .cc-card-brand.is-mastercard { color: #EB001B; }
    .cc-card-brand.is-amex { color: #006FCF; }
    .cc-card-brand.is-jcb { color: #0B4EA2; }

    /* -------------------------------------------------------------------------
       【ステップ5：ご注文内容の最終確認画面 (改正特商法完全対応)】
    ───────────────────────────────────────────────────────────────────────── */
    .confirmation-notice-banner {
      background-color: #FAF8F5;
      border: 1px solid var(--color-accent);
      padding: 1.5rem 2rem;
      font-size: 0.9rem;
      color: var(--text-dark);
      margin-bottom: 3rem;
      font-family: var(--font-display);
      line-height: 1.8;
    }
    .confirmation-grid {
      display: grid;
      grid-template-columns: 1.3fr 0.7fr;
      gap: 3.5rem;
    }
    .confirmation-info-block {
      background-color: #FFFFFF;
      border: 1px solid rgba(138, 106, 74, 0.1);
      padding: 2.5rem;
      margin-bottom: 2rem;
    }
    .confirmation-block-title-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid rgba(138, 106, 74, 0.15);
      padding-bottom: 0.8rem;
      margin-bottom: 1.5rem;
    }
    .confirmation-block-title {
      font-family: var(--font-display);
      font-size: 1.15rem;
      font-weight: 600;
      color: var(--text-dark);
    }
    .btn-edit-step {
      font-size: 0.82rem;
      color: var(--color-sub);
      text-decoration: underline;
    }
    .confirmation-data-table {
      width: 100%;
      font-size: 0.9rem;
    }
    .confirmation-data-table th, .confirmation-data-table td {
      padding: 0.6rem 0;
      text-align: left;
      vertical-align: top;
    }
    .confirmation-data-table th {
      width: 30%;
      color: var(--text-muted);
      font-weight: 500;
    }
    .confirmation-data-table td {
      width: 70%;
      color: var(--text-dark);
    }

    /* 改正特商法・法定規約事項明示用のコン文言スクロールボックス */
    .legal-disclosure-box {
      border: 1px solid rgba(138, 106, 74, 0.15);
      padding: 1.5rem;
      background-color: #FFFFFF;
      height: 200px;
      overflow-y: scroll;
      font-size: 0.8rem;
      color: var(--text-muted);
      line-height: 1.7;
      margin-bottom: 2rem;
    }
    .legal-disclosure-box h4 {
      font-weight: bold;
      color: var(--text-dark);
      margin-bottom: 0.8rem;
      font-size: 0.85rem;
    }
    .legal-disclosure-box p {
      margin-bottom: 1rem;
    }

    /* -------------------------------------------------------------------------
       【ステップ6：注文完了画面】
    ───────────────────────────────────────────────────────────────────────── -->
                    .completion-order-number {
      display: inline-block;
      font-family: var(--font-display);
      font-size: 1.1rem;
      font-weight: bold;
      color: var(--color-sub);
      background-color: rgba(138, 106, 74, 0.05);
      padding: 0.6rem 2rem;
      margin-bottom: 2.5rem;
    }

    /* -------------------------------------------------------------------------
       【共通デザイン：フッター】
    ------------------------------------------------------------------------- */

    /* -------------------------------------------------------------------------
       ローディングスピナー（二重注文防止などの安全なUX）
    ------------------------------------------------------------------------- */

    /* -------------------------------------------------------------------------
       RESPONSIVE DESIGN (スマホ・タブレット最適化)
    ------------------------------------------------------------------------- */
    @media (max-width: 1024px) {
      .cart-layout, .confirmation-grid { grid-template-columns: 1fr; gap: 3rem; }
      .auth-gate-layout { grid-template-columns: 1fr; gap: 2.5rem; }
    }
    @media (max-width: 768px) {
      .step-bar-circle { width: 38px; height: 35px; font-size: 0.85rem; }
      .step-bar-label { font-size: 0.75rem; }
      .step-bar::before { top: 18px; }
      .form-row-grid-2, .form-row-grid-address { grid-template-columns: 1fr; gap: 1rem; }
      .form-block-fieldset { padding: 1.8rem; }
      .completion-wrapper { padding: 3rem 1.5rem; }
    }