/* =============================================================
   NAFCO RENEWAL 2026 — 旧コンテンツ保護スタイル（legacy.css）
   対象: 「ヘッダ・フッタだけ新デザイン、本文は旧テンプレート流用」のページ
         現在: カート・購入フロー7ページ＋マイページ・お問い合わせ・
         user_data 配下全ページ（NFCEC-1229。site_frame.tpl の読み込み分岐参照）
         /cart/index.php, /shopping/index.php, /shopping/deliv.php,
         /shopping/payment.php, /shopping/confirm.php,
         /shopping/load_payment_module.php, /shopping/complete.php,
         /mypage/* ・/contact/* ・/user_data/*・/guide/* ・/order/*
         （プレフィックス一括。ただし /user_data/grid.php はフル切替済みのため対象外）
         今後ページを同方式で切り替える際も site_frame.tpl の分岐に
         URLを足して本ファイルを共用する。
   目的: common.css のグローバルリセット（*{box-sizing:border-box} 等）から
         #container 配下の旧マークアップを守り、旧デザインの本文表示を維持する。
   読み込み: common.css の後（後勝ちで打ち消すため順序必須）
   ============================================================= */

/* -------------------------------------------------------------
   レガシーガード
   :where() で詳細度0にし、common.css のグローバルリセット（同じく
   詳細度0）を「後勝ち」でのみ打ち消す。詳細度0なので、旧CSSや
   テンプレート内 <style> の明示指定（box-sizing:border-box 等）は
   常にこちらより優先され、旧表示が忠実に再現される。
   ※ ヘッダ・フッタ（nf- コンポーネント）は #container の外にあるため
     影響を受けない。
------------------------------------------------------------- */
/* box-sizing: 旧CSSは border-box 前提でないため既定値へ戻す
   （テーブルレイアウトの shopping/confirm.tpl などが影響を受ける） */
:where(body.nf-renewal #container) *,
:where(body.nf-renewal #container) *::before,
:where(body.nf-renewal #container) *::after {
    box-sizing: content-box;
}
/* img: common.css の display:block をインラインへ戻す。
   max-width は旧CSS（style_new.css の img { max-width:100%; height:auto }）も
   全ページ共通で 100% を当てていたため 100% を維持する。
   none に戻すと同詳細度（0,0,1）の後勝ちで旧CSSのグローバル指定まで打ち消してしまい、
   原寸画像が枠を突き抜ける（例: /user_data/recomender.php のレコメンド商品画像 700px）。 */
:where(body.nf-renewal #container) img {
    display: inline-block;
    max-width: 100%;
}
/* a: common.css の color:#777 / text-decoration:none を取り消し、
   旧CSSの指定（より高詳細度）または UA 既定に委ねる */
:where(body.nf-renewal #container) a {
    color: revert;
    text-decoration: revert;
}
/* ※ ul/ol の list-style は戻さない: 旧ページも reset.css で none のため、
   revert すると逆に旧表示と変わってしまう */

/* -------------------------------------------------------------
   コンテナ・タイポグラフィ復元
   common.css が body.nf-renewal 用に解除した枠と、body に当てた
   新フォントを、旧CSSの実値（出典コメント参照）へ戻す。
------------------------------------------------------------- */
/* 旧 style_new.css:664-669 の #container */
body.nf-renewal #container {
    max-width: 1200px;
}
/* 旧 common.css:48-58 の #main_column / colnum1 */
body.nf-renewal #container #main_column,
body.nf-renewal #container #main_column.colnum1 {
    padding: 10px 0 0;
}
body.nf-renewal #container #main_column.colnum1 {
    margin: 0 auto;
}
/* 旧 style_new.css:147-153 の body フォント（本文領域のみ旧タイポグラフィへ） */
:where(body.nf-renewal #container) {
    font-family:
        "ヒラギノ角ゴ ProN W3", "HiraKakuProN-W3", "ヒラギノ角ゴ Pro W3",
        "HiraKakuPro-W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS Pgothic",
        "Osaka", sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

/* -------------------------------------------------------------
   共通ボタンの新デザイン統一（NFCEC-1229 / 2026-07-15 ユーザー指示）
   旧本文のボタン配色・サイズを新デザイン（デザイントークン）に寄せる。
   テーマ適用ページ（PRO等）ではトークン経由で自動的にテーマ色になる。
   ※ 対象はテキスト系ボタンのみ。旧デザインに多い「画像ボタン」
     （input[type=image]・btn_*.jpg の a>img）はCSSでは配色変更できないため、
     テンプレート側でテキストボタンへ置き換えながら順次寄せていく
     （旧テンプレ・旧CSS/JS破棄のロードマップの一部）。
   ※ 詳細度: 旧CSSのクラス指定を上書きするため #container を含む形で書く。
     ページ個別で崩れる場合はこのセクションに除外を足す。
------------------------------------------------------------- */
/* プライマリボタン: フォーム送信系・アクション系リンクを新デザイン（accent塗り）に統一。
   旧テンプレは input[type=submit] / button / a.button / a.btn / a.btn-action が混在するため
   まとめて同一の見た目にする。a 系は #container a の色revert に負けないよう明示。 */
body.nf-renewal #container input[type="submit"],
body.nf-renewal #container input[type="button"],
body.nf-renewal #container button[type="submit"],
body.nf-renewal #container button.submit,
body.nf-renewal #container a.button,
body.nf-renewal #container a.btn,
body.nf-renewal #container a.btn-action,
body.nf-renewal #container .btn_or > a,
body.nf-renewal #container .btn_yellow > a,
body.nf-renewal #container .btn_new > a {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 24px;
  box-sizing: border-box;
  background: var(--color-accent);
  color: #fff;
  font-family: var(--font-base);
  font-size: 14px;
  font-weight: var(--fw-heading);
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  border: none;
  border-radius: var(--r-m);
  cursor: pointer;
  transition: background .15s, color .15s;
}
body.nf-renewal #container input[type="submit"]:hover,
body.nf-renewal #container input[type="button"]:hover,
body.nf-renewal #container button[type="submit"]:hover,
body.nf-renewal #container button.submit:hover,
body.nf-renewal #container a.button:hover,
body.nf-renewal #container a.btn:hover,
body.nf-renewal #container a.btn-action:hover,
body.nf-renewal #container .btn_or > a:hover,
body.nf-renewal #container .btn_yellow > a:hover,
body.nf-renewal #container .btn_new > a:hover {
  background: var(--color-accent-dark);
  color: #fff;
}
/* 「戻る」系（旧CSSで back/return クラス、または name="back" の <a>）は控えめなアウトラインに統一 */
body.nf-renewal #container input[type="submit"][class*="back"],
body.nf-renewal #container input[type="submit"][class*="return"],
body.nf-renewal #container input[type="submit"][name^="back"],
body.nf-renewal #container a[name^="back"],
body.nf-renewal #container a.button[name^="back"],
body.nf-renewal #container .btn_white > a,
body.nf-renewal #container .btn_noagree > a,
body.nf-renewal #container .btn_noagree a,
body.nf-renewal #container .btn_grey input[type="submit"],
body.nf-renewal #container .btn_grey > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 24px;
  box-sizing: border-box;
  /* 旧 sp_new.css の「.btn_noagree a / .btn_grey input { color:#FFF !important }」に勝つため
     背景・文字色は !important。戻る系はすべて白背景＋黒文字に統一する。 */
  background: #fff !important;
  background-image: none !important;
  color: #555 !important; /* 戻る系の文字色: 濃い黒(#222)より少し薄めのグレー */
  border: var(--bd-strong);
  border-radius: var(--r-m);
  font-family: var(--font-base);
  font-size: 14px;
  font-weight: var(--fw-heading);
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s;
}
body.nf-renewal #container input[type="submit"][class*="back"]:hover,
body.nf-renewal #container input[type="submit"][class*="return"]:hover,
body.nf-renewal #container input[type="submit"][name^="back"]:hover,
body.nf-renewal #container a[name^="back"]:hover,
body.nf-renewal #container a.button[name^="back"]:hover,
body.nf-renewal #container .btn_white > a:hover,
body.nf-renewal #container .btn_noagree > a:hover,
body.nf-renewal #container .btn_noagree a:hover,
body.nf-renewal #container .btn_grey input[type="submit"]:hover,
body.nf-renewal #container .btn_grey > a:hover {
  background: var(--color-bg-secondary) !important;
  background-image: none !important;
  color: #555 !important;
}

/* 旧 form.css の #FF9D00 / #FF6C58 系ボタン（会員登録・ゲスト購入・GMOトークン決済など
   #undercolumn_entry / .form-personal-wrap 配下）を新デザインの accent に統一。
   form.css の深いセレクタに勝つため !important で上書きする。 */
body.nf-renewal #container .form-personal-wrap .btn_area .btn_yellow input[type="submit"],
body.nf-renewal #container #undercolumn_entry .btn_yellow,
body.nf-renewal #container #undercolumn_entry .btn_regist {
  background-color: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  color: #fff !important;
}
body.nf-renewal #container .form-personal-wrap .btn_area .btn_back input[type="submit"],
body.nf-renewal #container .form-personal-wrap .btn_area .btn_back a,
body.nf-renewal #container #undercolumn_entry .btnTop {
  background-color: #fff !important;
  border-color: var(--color-border-strong) !important;
  color: #555 !important;
}

/* -------------------------------------------------------------
   mypage サイドナビ（ul.mynavi_list）: 旧ボタン風の混在配色を、
   新デザインの統一メニュー（縦並びカード）にそろえる。
   ※ これはナビゲーションのためプライマリボタン化はしない。
------------------------------------------------------------- */
body.nf-renewal #container .mynavi_list {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
body.nf-renewal #container .mynavi_list li { margin: 0; float: none; width: auto; }
body.nf-renewal #container .mynavi_list a {
  display: block;
  padding: 11px 16px;
  background: #fff;
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.4;
  white-space: nowrap;
  text-decoration: none;
  transition: border-color .15s, color .15s, background .15s;
}
body.nf-renewal #container .mynavi_list a:hover {
  border-color: var(--color-accent);
  color: var(--color-accent-dark);
}
body.nf-renewal #container .mynavi_list a.selected {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}

/* -------------------------------------------------------------
   legacy ページの見出し配色統一
   旧CSSの青系見出し（購入履歴詳細 等）を新デザインのダークにそろえる。
   主見出し（h2.title）は accent の左バー付きに。h3 等は配色のみ揃える。
------------------------------------------------------------- */
body.nf-renewal #container h2.title {
  color: var(--color-text-primary);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  border-left: 4px solid var(--color-accent);
  border-bottom: none;
  padding: 2px 0 2px 12px;
  margin: 24px 0 16px;
}
/* 旧 form.css の h2.title::before（icon-entry-brown.svg の人物アイコン）を新デザインでは非表示に。
   新デザインは左の accent バーで見出しを表す。 */
body.nf-renewal #container h2.title:before,
body.nf-renewal #container h2.title::before {
  content: none;
  display: none;
  background: none;
}
body.nf-renewal #container h3,
body.nf-renewal #container .titleText,
body.nf-renewal #container .subtitle {
  color: var(--color-text-primary);
}
/* お問い合わせ（/contact/）の帯見出し: contact/assets/css/style.css が
   .sec_contact h3 { background:#113677; color:#FFF }（紺帯×白字）を当てているが、
   上の h3 一括指定（ID入りで詳細度が勝つ）に黒文字化されて紺帯×黒字になるため、
   白字を明示して戻す。 */
body.nf-renewal #container .sec_contact h3 {
  color: #fff;
}

/* -------------------------------------------------------------
   個別のはみ出し補正
------------------------------------------------------------- */
/* 購入履歴詳細の「再注文する」ボタン: 旧CSS(contents.css)が包む <p class="btn"> を
   width:160px 固定にしており、テキストボタン化でボタンが幅を超えて右へはみ出すため auto に。 */
body.nf-renewal #container div.mycondition_area .btn {
  width: auto;
  max-width: 100%;
}

/* -------------------------------------------------------------
   購入手続きの進捗ステップバー（#form_steps）をブラックに
   （クライアントFB 2026-07-23。旧デザインはオレンジ #ff9d00 のまま）
   色の定義元は cart.css:106-118（deliv/payment/confirm）と
   shopping/complete.tpl のインライン <style>（同一ルールの重複定義）。
   インライン <style> は body 内＝本ファイルより後勝ちになるため !important 必須。
------------------------------------------------------------- */
body.nf-renewal #undercolumn_shopping #form_steps > div.active {
  color: var(--color-ui-dark) !important; /* #353536 ＝黒系UIパーツ色（クライアントFB 2026-07-23） */
}
body.nf-renewal #undercolumn_shopping #form_steps > div.active:before {
  border-color: var(--color-ui-dark) !important;
  background-color: var(--color-ui-dark) !important;
}
body.nf-renewal #undercolumn_shopping #form_steps > div.bActive:after {
  background-color: var(--color-ui-dark) !important;
}

/* -------------------------------------------------------------
   マイページ最上部バナー（bloc 103 shop_uketori_bnr.tpl）
   SPはSP用バナー画像でなくPC用を流用して高さをコンパクトに
   （クライアントFB 2026-07-23）。
   ※ 同ブロックはカートページにも配置されているため、マイページ
     （bodyクラスは全ページ LC_Page_AbstractMypage）×リニューアル時のみに限定。
   ※ .pc/.sp の出し分け（style.css:3-7）はSP側が !important 付きのため上書きも !important。
------------------------------------------------------------- */
@media (max-width: 767px) {
    body.nf-renewal[class*="LC_Page_AbstractMypage"] #bnr_shop_uketori .sp {
        display: none !important;
    }
    body.nf-renewal[class*="LC_Page_AbstractMypage"] #bnr_shop_uketori .pc {
        display: block !important;
    }
    /* バナー2枚は tpl 内インライン style の flex 横並び（cnt-inner）。
       PC画像流用時は1枚ずつ全幅・縦積みにして高さをコンパクトに保つ */
    body.nf-renewal[class*="LC_Page_AbstractMypage"] #bnr_shop_uketori .cnt-inner > div {
        width: 100%;
    }
    body.nf-renewal[class*="LC_Page_AbstractMypage"] #bnr_shop_uketori .pc img {
        width: 100%;
        max-width: 100%;
        height: auto;
    }
}

/* -------------------------------------------------------------
   SPボトムナビ・カテゴリドロワー（新ヘッダ側の部品）の扱い
   body クラスはページクラス名（_Ex 除去）: LC_Page_Cart / LC_Page_Shopping_◯◯
------------------------------------------------------------- */
/* shopping/*: 注文手続き中は離脱導線（ボトムナビ・ドロワー）を出さない */
body.nf-renewal[class*="LC_Page_Shopping"] .nf-bottom-nav,
body.nf-renewal[class*="LC_Page_Shopping"] .nf-cat-drawer,
body.nf-renewal[class*="LC_Page_Shopping"] .nf-cat-overlay {
    display: none;
}
@media (max-width: 767px) {
    /* 本ファイル読み込みページ共通: ボトムナビは表示したまま、下部の
       操作ボタンにかぶらないよう余白を確保。shopping/* はナビ自体を
       非表示にしているため除外（無駄な余白を作らない）。
       ※ マイページの body クラスは全ページ「LC_Page_AbstractMypage」
       （LC_Page::init が backtrace の呼び出し元クラス名を使うため）で、
       ページ個別名にはならない点に注意 */
    body.nf-renewal:not([class*="LC_Page_Shopping"]) {
        padding-bottom: 56px;
    }
}