@charset "UTF-8";
/**
 * カート／購入フロー（cart/*・shopping/*）スマホ向けレイアウト補正
 * CART_MOBILE_RESPONSIVE_ENABLE が true のときのみ site_frame.tpl から読み込み、
 * site_main.tpl の body に付与した shopping_flow_mobile 配下にだけ効かせる（他ページへ影響しない）。
 * PC（1025px以上）はメディアクエリ外のため従来のまま。
 * iPad縦820px等は旧768px上限だとサイドカラム+625pxメインがビューポートを超え横はみ出し→下部ボタン欠け。1024pxまで拡張（2026-06-23）。
 *
 * @HISTORY (最新200行・古い順)
 * 2026-06-23 16:21 | メディアクエリ/btn_area | FIX | max-width 768→1024。iPad向けに.btn_area縦並び・全幅・safe-area下余白を全購入フローに統一
 * 2026-03-27 17:22 | payment h2・ラッピングラジオ | ADD | 579px未満以外の狭画面でも主タイトル・wrap_radio_zoneの文字が過大にならないよう補正（payment.tpl の max-width:579px と併用）
 * 2026-03-27 17:07 | shopping/multiple テーブル | ADD | table[summary=商品情報] をカード化（col%で列潰れ解消）・お届け先select 全幅
 * 2026-03-27 17:05 | #address_area add_multiple | FIX | contents.css の information 65% float + add_multiple 30% float:right をスマホで縦積み・全幅（お届け先指定）
 * 2026-03-27 17:01 | login formlist | BUGFIX | bloc.css の #container .login_area dl.formlist 450px+float が狭画面ではみ出し、body の overflow-x:hidden で右が欠ける→縦積み化・overflow-x 解除
 * 2026-03-27 16:59 | body 背景 | ADD | common.css の body 背景画像(bg.jpg)はカート／購入フローでは不要のため body.shopping_flow_mobile で無効化（メディアクエリ外＝PC・スマホ共通）
 * 2026-03-27 16:48 | - | INIT | #undercolumn 600px・#main_column 625px 等の固定幅を解除、サイド非表示、フォーム・reCAPTCHA 縮小対応（確認表は table-layout:fixed は未使用）
 */

/* common.css body の background:url(/files/img/bg.jpg) をカート／購入フローでは使わない（他ページは従来のまま） */
body.shopping_flow_mobile {
  background: none !important;
  background-color: #f5f5f5;
}

@media screen and (max-width: 1024px) {
  /* overflow-x:hidden は子が僅かにはみ出しただけで本文が切れるため付けない（bloc.css の login formlist 450px 等の対策で幅を収める） */
  html body.shopping_flow_mobile {
    -webkit-text-size-adjust: 100%;
  }

  /* ヘッダー周り・サイド・フッター（購入フロー時のみ非表示・ユーザー了承済み） */
  body.shopping_flow_mobile #headertopcolumn,
  body.shopping_flow_mobile #topcolumn,
  body.shopping_flow_mobile #leftcolumn,
  body.shopping_flow_mobile #rightcolumn,
  body.shopping_flow_mobile #bottomcolumn,
  body.shopping_flow_mobile #footer_wrap,
  body.shopping_flow_mobile #footerbottomcolumn {
    display: none !important;
  }

  body.shopping_flow_mobile .frame_outer {
    width: 100% !important;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  body.shopping_flow_mobile #container {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
    background-image: none;
  }

  /* 2カラム・3カラム時のメイン固定幅・float を解除 */
  body.shopping_flow_mobile #main_column {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
  }

  body.shopping_flow_mobile #main_column.colnum2,
  body.shopping_flow_mobile #main_column.colnum2.left,
  body.shopping_flow_mobile #main_column.colnum2.right,
  body.shopping_flow_mobile #main_column.colnum3 {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* 下層コンテンツ枠（common.css の 600px 等） */
  body.shopping_flow_mobile div[id^="undercolumn"] {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 4px;
    padding-right: 4px;
    box-sizing: border-box;
  }

  body.shopping_flow_mobile #undercolumn .login_area .inputbox,
  body.shopping_flow_mobile #undercolumn_shopping .pay_area,
  body.shopping_flow_mobile #undercolumn_shopping .point_area,
  body.shopping_flow_mobile .form_area {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* 入力欄（box300 等） */
  body.shopping_flow_mobile input.box300,
  body.shopping_flow_mobile select.box300,
  body.shopping_flow_mobile textarea.box300,
  body.shopping_flow_mobile input.box380,
  body.shopping_flow_mobile select.box380,
  body.shopping_flow_mobile input.box350,
  body.shopping_flow_mobile select.box350 {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box;
  }

  body.shopping_flow_mobile input[type="text"],
  body.shopping_flow_mobile input[type="password"],
  body.shopping_flow_mobile input[type="email"],
  body.shopping_flow_mobile input[type="tel"],
  body.shopping_flow_mobile select,
  body.shopping_flow_mobile textarea {
    max-width: 100%;
    box-sizing: border-box;
  }

  body.shopping_flow_mobile table {
    max-width: 100%;
  }

  body.shopping_flow_mobile #undercolumn table,
  body.shopping_flow_mobile #undercolumn_shopping table {
    width: 100% !important;
    max-width: 100%;
  }

  body.shopping_flow_mobile #undercolumn th,
  body.shopping_flow_mobile #undercolumn td,
  body.shopping_flow_mobile #undercolumn_shopping th,
  body.shopping_flow_mobile #undercolumn_shopping td {
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  body.shopping_flow_mobile img {
    max-width: 100%;
    height: auto;
  }

  body.shopping_flow_mobile .btn_area img,
  body.shopping_flow_mobile .btn input[type="image"],
  body.shopping_flow_mobile input[type="image"] {
    max-width: 100%;
    height: auto;
  }

  /* 購入手続き/次へ/戻る：iPad含むタブレット幅でも下部ボタンが欠けないよう縦並び・全幅 */
  body.shopping_flow_mobile .btn_area {
    margin-top: 18px;
    margin-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    clear: both;
    width: 100%;
    text-align: center;
  }

  body.shopping_flow_mobile .btn_area ul {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
  }

  body.shopping_flow_mobile .btn_area ul li {
    float: none !important;
    display: block;
    width: 100%;
    text-align: center;
    padding-right: 0;
    margin: 0;
  }

  /* reCAPTCHA */
  body.shopping_flow_mobile .g-recaptcha {
    max-width: 100%;
    overflow: auto;
  }

  body.shopping_flow_mobile .g-recaptcha > div {
    max-width: 100%;
  }

  body.shopping_flow_mobile iframe[src*="recaptcha"] {
    max-width: 100%;
  }

  body.shopping_flow_mobile dl.formlist dt,
  body.shopping_flow_mobile dl.formlist dd {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* bloc.css: #container .login_area dl.formlist { width:450px; dt float 120px; dd float 300px } がビューポートより広い → 縦積み */
  body.shopping_flow_mobile #container .login_area dl.formlist {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 12px;
  }

  body.shopping_flow_mobile #container .login_area dl.formlist dt {
    float: none !important;
    width: auto !important;
    max-width: 100%;
    margin-bottom: 4px;
  }

  body.shopping_flow_mobile #container .login_area dl.formlist dd {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.shopping_flow_mobile #undercolumn_login p,
  body.shopping_flow_mobile #undercolumn_login .inputtext {
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
  }

  body.shopping_flow_mobile #undercolumn_login p#warning {
    word-break: break-word;
    overflow-wrap: break-word;
  }

  /* contents.css: #address_area .information width:65% float:left / .add_multiple width:30% float:right → 右に寄って見える */
  body.shopping_flow_mobile #undercolumn_shopping #address_area .information {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.shopping_flow_mobile #undercolumn_shopping #address_area .add_multiple {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 12px 0 0 0;
    box-sizing: border-box;
  }

  body.shopping_flow_mobile #undercolumn_shopping #address_area .add_multiple img {
    max-width: 100%;
    height: auto;
  }

  /* shopping/multiple.tpl：商品×お届け先テーブル（<col> の%指定でスマホで列が極端に細い）→1行1カード */
  body.shopping_flow_mobile #undercolumn_shopping .flow_area img {
    max-width: 100%;
    height: auto;
  }

  body.shopping_flow_mobile #undercolumn_shopping form#form1 table[summary="商品情報"] {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
    table-layout: auto !important;
    min-width: 0;
    border-collapse: separate;
    border-spacing: 0;
  }

  body.shopping_flow_mobile #undercolumn_shopping form#form1 table[summary="商品情報"] col {
    display: none;
  }

  body.shopping_flow_mobile #undercolumn_shopping form#form1 table[summary="商品情報"] tbody tr:first-child {
    display: none !important;
  }

  body.shopping_flow_mobile #undercolumn_shopping form#form1 table[summary="商品情報"] tbody tr:not(:first-child) {
    display: block;
    margin-bottom: 14px;
    padding: 12px 10px;
    border: 1px solid #bbb;
    border-radius: 8px;
    background: #fff;
    box-sizing: border-box;
  }

  body.shopping_flow_mobile #undercolumn_shopping form#form1 table[summary="商品情報"] tbody tr:not(:first-child) th,
  body.shopping_flow_mobile #undercolumn_shopping form#form1 table[summary="商品情報"] tbody tr:not(:first-child) td {
    display: block;
    width: 100% !important;
    text-align: left !important;
    padding: 8px 4px;
    border: none;
    box-sizing: border-box;
  }

  body.shopping_flow_mobile #undercolumn_shopping form#form1 table[summary="商品情報"] tbody tr:not(:first-child) td:before {
    display: block;
    font-size: 11px;
    color: #555;
    margin-bottom: 5px;
    font-weight: bold;
  }

  body.shopping_flow_mobile #undercolumn_shopping form#form1 table[summary="商品情報"] tbody tr:not(:first-child) td:nth-child(1):before {
    content: "商品写真";
  }

  body.shopping_flow_mobile #undercolumn_shopping form#form1 table[summary="商品情報"] tbody tr:not(:first-child) td:nth-child(2):before {
    content: "商品名";
  }

  body.shopping_flow_mobile #undercolumn_shopping form#form1 table[summary="商品情報"] tbody tr:not(:first-child) td:nth-child(3):before {
    content: "数量";
  }

  body.shopping_flow_mobile #undercolumn_shopping form#form1 table[summary="商品情報"] tbody tr:not(:first-child) td:nth-child(4):before {
    content: "お届け先";
  }

  body.shopping_flow_mobile #undercolumn_shopping form#form1 table[summary="商品情報"] tbody tr:not(:first-child) td:nth-child(1) {
    text-align: center !important;
  }

  body.shopping_flow_mobile #undercolumn_shopping form#form1 table[summary="商品情報"] tbody tr:not(:first-child) td:nth-child(1) img {
    max-width: 120px !important;
    max-height: 120px !important;
    width: auto;
    height: auto;
  }

  body.shopping_flow_mobile #undercolumn_shopping form#form1 table[summary="商品情報"] tbody tr:not(:first-child) td:nth-child(2) strong {
    word-break: break-word;
    font-size: 15px;
  }

  body.shopping_flow_mobile #undercolumn_shopping form#form1 table[summary="商品情報"] select.otodoke {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
  }

  body.shopping_flow_mobile #undercolumn_shopping form#form1 table[summary="商品情報"] input.box40 {
    width: 5em;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* payment.php：common.css の h2.title 170%・テーブルラベルが狭画面で巨大になりやすい */
  body.shopping_flow_mobile #undercolumn_shopping h2.title {
    font-size: 1.35rem !important;
    line-height: 1.35;
    margin-bottom: 16px;
    word-break: break-word;
  }

  body.shopping_flow_mobile #undercolumn_shopping .pay_area h3,
  body.shopping_flow_mobile #undercolumn_shopping .pay_area02 h3 {
    font-size: 1.05rem !important;
    line-height: 1.4;
  }

  body.shopping_flow_mobile #undercolumn_shopping .pay_area table td,
  body.shopping_flow_mobile #undercolumn_shopping .pay_area table th,
  body.shopping_flow_mobile #undercolumn_shopping .pay_area label {
    font-size: 15px;
  }

  body.shopping_flow_mobile #undercolumn_shopping #wrap_radio_zone {
    font-size: 15px;
    line-height: 1.55;
  }

  body.shopping_flow_mobile #undercolumn_shopping #wrap_radio_zone label {
    display: block;
    margin: 10px 0 6px;
  }

  body.shopping_flow_mobile #undercolumn_shopping #wrap_radio_zone .select-msg {
    font-size: 12px;
    line-height: 1.5;
    color: #444;
    margin-top: 8px;
  }
}