@charset "UTF-8";
/**
 * 通常カート index 用・スマホ向け補助スタイル
 * CART_MOBILE_RESPONSIVE_ENABLE が true のときのみ cart/index.tpl から読み込まれる。
 * PC（幅1025px以上）はメディアクエリの対象外のため見た目は従来のまま。
 * 実機・Chrome検証で効かない場合：site_frame.tpl に viewport が無いとスマホのレイアウト幅が約980px扱いになり本ファイルの max-width:1024px が適用されない。同フラグON時に site_frame が cart・shopping のみ viewport を付与する。
 * iPad縦（820px等）は旧768px上限だとPC2カラムのまま横はみ出し→下部ボタンが見えないため1024pxまで拡張（2026-06-23）。
 *
 * @HISTORY (最新200行・古い順)
 * 2026-06-23 16:21 | メディアクエリ | FIX | max-width 768→1024 に拡張。iPad縦820px等でPC2カラム固定幅がはみ出し購入手続き/次へ/戻るボタンが画面外になる問題
 * 2026-03-27 17:21 | 数量UI | FIX | ±ボタン・数字・枠の余白を一段小さく（48px→40px・数字18→15px）単価/小計とのバランス調整
 * 2026-03-27 17:15 | 数量UI | FIX | tpl を [−][数][＋] 横並びに変更・スマホは枠付きでタップ領域48px（ul廃止）
 * 2026-03-27 17:09 | カードUX | FIX | 1商品6段ラベル積みをやめ CSS Grid で画像左・削除右上・下段に単価/数量/小計を横並び、余白・ラベル縮小
 * 2026-03-27 16:36 | table | BUGFIX | thead 非表示が効かないケース（見出しがtbody先頭だった）に対し cart/index.tpl を thead/tbody 分割。col の幅固定をスマホで無効化
 * 2026-03-27 16:31 | - | FIX | コメントに viewport 前提を追記（site_frame 側で対応）
 * 2026-03-27 16:27 | - | INIT | #undercolumn 全幅・カート表をカード積み・数量・ボタン拡大
 */

@media screen and (max-width: 1024px) {
  #undercolumn.cart_index_mobile_responsive_flag_on {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
    padding-left: 10px;
    padding-right: 10px;
    margin-left: auto;
    margin-right: auto;
    -webkit-text-size-adjust: 100%;
  }

  #undercolumn.cart_index_mobile_responsive_flag_on #undercolumn_cart h2.title {
    font-size: 118%;
    line-height: 1.35;
    word-break: break-word;
  }

  #undercolumn.cart_index_mobile_responsive_flag_on .totalmoney_area {
    font-size: 15px;
    line-height: 1.65;
    word-break: break-word;
  }

  #undercolumn.cart_index_mobile_responsive_flag_on #undercolumn_cart .form_area > p {
    font-size: 15px;
    line-height: 1.6;
    word-break: break-word;
  }

  #undercolumn.cart_index_mobile_responsive_flag_on #undercolumn_cart table {
    width: 100% !important;
    max-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: auto !important;
    min-width: 0;
  }

  /* テーブル列幅指定（col）がスマホで極端に細い列のまま残るのを防ぐ */
  #undercolumn.cart_index_mobile_responsive_flag_on #undercolumn_cart table col {
    width: auto !important;
  }

  #undercolumn.cart_index_mobile_responsive_flag_on #undercolumn_cart thead {
    display: none !important;
  }

  /* 商品行：1商品＝1カード（Grid：画像左・削除右上・下段に単価/数量/小計を横並び） */
  #undercolumn.cart_index_mobile_responsive_flag_on #undercolumn_cart tbody tr:not(:last-child) {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    gap: 6px 8px;
    align-items: start;
    margin-bottom: 10px;
    padding: 10px 8px;
    border: 1px solid #bbb;
    border-radius: 8px;
    background: #fff;
    box-sizing: border-box;
  }

  #undercolumn.cart_index_mobile_responsive_flag_on #undercolumn_cart tbody tr:not(:last-child) td {
    display: block;
    width: auto !important;
    text-align: left !important;
    padding: 0 !important;
    border: none;
    box-sizing: border-box;
  }

  /* 削除：右上 */
  #undercolumn.cart_index_mobile_responsive_flag_on #undercolumn_cart tbody tr:not(:last-child) td:nth-child(1) {
    grid-column: 2 / 5;
    grid-row: 1;
    justify-self: end;
    align-self: start;
    font-size: 13px;
  }

  #undercolumn.cart_index_mobile_responsive_flag_on #undercolumn_cart tbody tr:not(:last-child) td:nth-child(1):before {
    display: none !important;
  }

  /* 商品写真：左列2行分 */
  #undercolumn.cart_index_mobile_responsive_flag_on #undercolumn_cart tbody tr:not(:last-child) td:nth-child(2) {
    grid-column: 1;
    grid-row: 1 / span 2;
    text-align: center !important;
  }

  #undercolumn.cart_index_mobile_responsive_flag_on #undercolumn_cart tbody tr:not(:last-child) td:nth-child(2):before {
    display: none !important;
  }

  #undercolumn.cart_index_mobile_responsive_flag_on #undercolumn_cart tbody tr:not(:last-child) td:nth-child(2) img {
    max-width: 80px !important;
    max-height: 80px !important;
    width: auto;
    height: auto;
    border-radius: 4px;
  }

  /* 商品名：写真の右 */
  #undercolumn.cart_index_mobile_responsive_flag_on #undercolumn_cart tbody tr:not(:last-child) td:nth-child(3) {
    grid-column: 2 / 5;
    grid-row: 2;
    min-width: 0;
  }

  #undercolumn.cart_index_mobile_responsive_flag_on #undercolumn_cart tbody tr:not(:last-child) td:nth-child(3):before {
    display: none !important;
  }

  #undercolumn.cart_index_mobile_responsive_flag_on #undercolumn_cart tbody tr:not(:last-child) td:nth-child(3) strong {
    word-break: break-word;
    font-size: 14px;
    line-height: 1.45;
    display: block;
  }

  #undercolumn.cart_index_mobile_responsive_flag_on #undercolumn_cart tbody tr:not(:last-child) td:nth-child(3) div {
    font-size: 12px;
    color: #444;
    margin-top: 4px;
    line-height: 1.4;
  }

  /* 下段：単価 | 数量 | 小計（3カラム） */
  #undercolumn.cart_index_mobile_responsive_flag_on #undercolumn_cart tbody tr:not(:last-child) td:nth-child(4) {
    grid-column: 1;
    grid-row: 3;
    padding-top: 8px !important;
    border-top: 1px solid #e8e8e8;
    margin-top: 2px;
    font-size: 13px;
  }

  #undercolumn.cart_index_mobile_responsive_flag_on #undercolumn_cart tbody tr:not(:last-child) td:nth-child(4):before {
    content: "単価";
    display: block;
    font-size: 10px;
    color: #666;
    font-weight: bold;
    margin-bottom: 3px;
    letter-spacing: 0.02em;
  }

  #undercolumn.cart_index_mobile_responsive_flag_on #undercolumn_cart tbody tr:not(:last-child) td:nth-child(5) {
    grid-column: 2;
    grid-row: 3;
    padding-top: 8px !important;
    border-top: 1px solid #e8e8e8;
    margin-top: 2px;
    font-size: 13px;
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    width: 100% !important;
    min-width: 0;
  }

  #undercolumn.cart_index_mobile_responsive_flag_on #undercolumn_cart tbody tr:not(:last-child) td:nth-child(5):before {
    content: "数量";
    display: block;
    font-size: 10px;
    color: #666;
    font-weight: bold;
    margin-bottom: 3px;
    letter-spacing: 0.02em;
  }

  /* [−] [数] [＋] 横一列・意味が分かりやすい操作域 */
  #undercolumn.cart_index_mobile_responsive_flag_on #undercolumn_cart tbody tr:not(:last-child) td:nth-child(5) .cart_index_qty_ctrl {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 4px;
    padding: 6px 6px;
    border-radius: 8px;
    background: #f3f3f3;
    border: 1px solid #ddd;
    box-sizing: border-box;
  }

  #undercolumn.cart_index_mobile_responsive_flag_on #undercolumn_cart tbody tr:not(:last-child) td:nth-child(5) .cart_index_qty_num {
    font-size: 15px;
    font-weight: bold;
    min-width: 1.75rem;
    text-align: center;
    line-height: 1.2;
  }

  #undercolumn.cart_index_mobile_responsive_flag_on #undercolumn_cart tbody tr:not(:last-child) td:nth-child(5) .cart_index_qty_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    border-radius: 6px;
    background: #fff;
    border: 1px solid #bbb;
    box-sizing: border-box;
    text-decoration: none;
  }

  #undercolumn.cart_index_mobile_responsive_flag_on #undercolumn_cart tbody tr:not(:last-child) td:nth-child(5) .cart_index_qty_btn img {
    width: 20px !important;
    height: 20px !important;
  }

  #undercolumn.cart_index_mobile_responsive_flag_on #undercolumn_cart tbody tr:not(:last-child) td:nth-child(5) .cart_index_qty_disabled {
    opacity: 0.38;
    border-style: dashed;
    pointer-events: none;
  }

  #undercolumn.cart_index_mobile_responsive_flag_on #undercolumn_cart tbody tr:not(:last-child) td:nth-child(6) {
    grid-column: 3 / 5;
    grid-row: 3;
    padding-top: 8px !important;
    border-top: 1px solid #e8e8e8;
    margin-top: 2px;
    text-align: right !important;
    font-size: 14px;
    font-weight: bold;
  }

  #undercolumn.cart_index_mobile_responsive_flag_on #undercolumn_cart tbody tr:not(:last-child) td:nth-child(6):before {
    content: "小計";
    display: block;
    font-size: 10px;
    color: #666;
    font-weight: bold;
    margin-bottom: 3px;
    text-align: right;
    letter-spacing: 0.02em;
  }

  /* 合計行：横並び1行 */
  #undercolumn.cart_index_mobile_responsive_flag_on #undercolumn_cart tbody tr:last-child {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 12px;
    margin-top: 6px;
    padding: 10px 10px;
    border: 1px solid #999;
    border-radius: 8px;
    background: #f5f5f5;
    box-sizing: border-box;
  }

  #undercolumn.cart_index_mobile_responsive_flag_on #undercolumn_cart tbody tr:last-child th,
  #undercolumn.cart_index_mobile_responsive_flag_on #undercolumn_cart tbody tr:last-child td {
    display: block;
    width: auto !important;
    flex: 1 1 auto;
    text-align: right !important;
    border: none;
    padding: 0 !important;
    box-sizing: border-box;
  }

  #undercolumn.cart_index_mobile_responsive_flag_on #undercolumn_cart tbody tr:last-child th {
    font-size: 14px;
    text-align: left !important;
    flex: 1 1 40%;
  }

  #undercolumn.cart_index_mobile_responsive_flag_on #undercolumn_cart tbody tr:last-child td .price {
    font-size: 118%;
  }

  /* ボタンエリア：縦並び・幅いっぱい */
  #undercolumn.cart_index_mobile_responsive_flag_on .btn_area {
    margin-top: 18px;
  }

  #undercolumn.cart_index_mobile_responsive_flag_on .btn_area ul {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  #undercolumn.cart_index_mobile_responsive_flag_on .btn_area ul li {
    float: none;
    width: 100%;
    text-align: center;
    list-style: none;
    margin: 0;
  }

  #undercolumn.cart_index_mobile_responsive_flag_on .btn_area img,
  #undercolumn.cart_index_mobile_responsive_flag_on .btn_area input[type="image"] {
    max-width: 100%;
    height: auto;
  }

  #undercolumn.cart_index_mobile_responsive_flag_on div.form_area {
    margin-bottom: 24px;
  }
}