/* losecon storefront theme — 現行本番踏襲 iter2 (P4-04b).
 *
 * iter1 was a palette-only port; iter2 ports the actual production skeleton,
 * measured from a live snapshot of https://shop.losecon.co.jp (2026-06-10,
 * design_snapshot_2026-06-10) whose CSS hash-matches the disco_src theme_0
 * archive: fixed 950px page, absolute-positioned 175px header, the 990px
 * #globalnavi band, the 200px left sidebar, the 740px-equivalent main column
 * and the navy #071e2d footer band outside #page.
 *
 * Values are verbatim from theme_0/css/{common,layout,menu,checkout}.css and
 * lang/<ja|en>/pm/css/{base,index,term}.css unless a comment says otherwise.
 * (続348: この行はかつて `lang/&#42;/pm/...` と書かれており、その `&#42;/` が冒頭コメントを
 *  ここで終了させていた。結果、以下の説明文がセレクタとして食われ、直後にあった
 *  `* { margin: 0; padding: 0; }` が規則ごと捨てられていた。実ブラウザ実測で確認済み。
 *  旧本番にも `*` の全体リセットは無いため、リセットを復活させると旧から離れる
 *  (blockquote/figure/pre/hr の既定余白まで 0 になる)。よってコメントの修復と同時に
 *  死んでいた `*` 規則を削除し、描画は 1px も変えていない = DEF-022)
 * Intentional deviations (each flagged in the iter2 divergence report):
 *   - the legacy `#globalnavi a:visited, a:active` selector leaked a white
 *     a:active onto the whole site; here it is scoped to #globalnavi only.
 *   - IE7 hacks (*+html), unused dropdown rules and dead selectors are not
 *     ported (spec_layout.md §9 / spec_assets.md §2).
 *   - image rollovers use CSS :hover instead of legacy onmouseover JS.
 */

/* ===== 1. base (common.css) ================================================ */

/* 続348: ここにあった `* { margin: 0; padding: 0; }` は、上のコメント破損により
   実ブラウザでは規則ごと捨てられており、**一度も効いていなかった**。旧本番にも同等の
   全体リセットは無い (実測) ため復活させず削除する。詳細 = 07_defect_list.md DEF-022。 */
body {
  margin: 0; text-align: center; color: #505050; font-size: 73%;
  font-family: 'Hiragino Kaku Gothic Pro', 'メイリオ', Verdana, Arial, sans-serif;
  line-height: 1.65em; background: #fff;
}
a { color: #707070; }
a:visited { color: #707070; }
a:hover { color: #707070; text-decoration: none; }
h1, h2, h3, h4, h5, h6, p { margin: 0; padding: 0; }
ul, ol, dl { margin: 0; padding: 0; list-style-type: none; }
li, dt, dd { margin: 0; padding: 0; }
img { border: 0; }
form { margin: 0; padding: 0; }
input, select, textarea { font-family: Arial, Verdana, Helvetica, sans-serif; }
table { border-collapse: collapse; }

.clearfix:after { content: ""; display: block; clear: both; height: 0; }
.clearfix { display: block; }
.block { display: block; }
.left { float: left; }
.right { float: right; }
.a-left { text-align: left; }
.a-right { text-align: right; }
.a-center { text-align: center; }
.clear { clear: both; }
.red { color: #FF0000; }
.small { font-size: 9px; line-height: 12px; }

/* message boxes (common.css .msg_*) — mapped onto the app's .alert classes */
.alert, .msg_worning {
  font-size: 12px; color: #000; background-color: #FFF7E1;
  border: 1px solid #FF8040; padding: 4px 8px; margin-bottom: 5px;
}
.alert.error, .msg_error {
  background-color: #FFE1E1; border: 1px solid #FF0000; color: #000;
}
.alert.success, .msg_success {
  background-color: #E1FFE1; border: 1px solid #009900; color: #000;
}

/* ===== 2. page frame ======================================================= */

#page { width: 950px; margin: 0 auto; text-align: left; }

/* --- header (common.css) --- */
#header { position: relative; width: 950px; height: 175px; text-align: left; }
#header h1 { position: absolute; top: 16px; left: 0; }
#header .header_login { position: absolute; top: 30px; left: 185px; }
#header .header_login p { font-size: 10px; padding: 3px 0 0 5px; }
/* R-4 (続244-9・visual-parity S-5): 旧本番は text-decoration: underline (Playwright 実測)。
   一括で reset せず default (browser 既定 = underline) に戻す。 */
#header .header_login a { text-decoration: underline; color: #707070; }
#header #language_currency_container { position: absolute; top: 30px; right: 0; }
#header #language_currency_container div { display: inline-block; }
#header .select_lang select { border: 1px solid #A9B8C5; }
#header .select_lang form { display: inline; }
#header .currency { margin-left: 5px; }
#header .header_note { position: absolute; top: 65px; right: 0; }
#header #usernavi { padding: 85px 0 8px; }

/* login button image (123x31, lang-switched) */
.imgbtn { display: inline-block; border: 0; cursor: pointer; overflow: hidden;
          text-indent: -9999px; background-color: transparent; background-repeat: no-repeat; }
.imgbtn-login { width: 123px; height: 31px; background-image: url(../img/ja/btn_login.png); }
html[lang="en"] .imgbtn-login { background-image: url(../img/en/btn_login.png); }

/* --- global navi (common.css + menu.css) --- */
#globalnavi {
  position: absolute; width: 990px; height: 41px;
  background: url(../img/bg_globalnavi.png) repeat-x; left: -15px;
}
#globalnavi a { color: #fff; text-decoration: none; }
#globalnavi a:visited, #globalnavi a:active { color: #fff; } /* scoped (legacy leaked a:active globally) */
#menuh ul { padding: 1px 0 8px; float: left; list-style: none; }
#menuh li {
  position: relative; float: left;
  background: url(../img/bg_globalnavi_line.png) no-repeat top right;
  padding: 11px 36px 10px 36px; font-size: 12px;
}
div#menuh li:hover { cursor: pointer; z-index: 100; }

/* --- breadcrumb (common.css .topiclist) --- */
#header .topiclist { padding-bottom: .5em; margin-top: 50px; }
#header .topiclist li { display: inline; margin-right: 5px; }

/* ===== 3. contents columns ================================================= */

#contents { width: 950px; padding-top: 14px; min-height: 480px; }
#contents .mainFrame { float: left; display: inline; width: 950px; }
.main_banner { padding-bottom: 15px; }
/* .main_banner img{display:block} は旧 CSS に無い冗長 rule のため除去。
 * hero img は新旧とも class="block" (旧 common.css:26 .block{display:block}) で block 化 */

#contents .menuFrame { float: left; display: inline; width: 200px; margin: 0 10px 0 0; }
#contents .detailFrame { float: left; display: inline; width: 738px; }
#contents .fullFrame { width: 950px; }
#contents .fullFrame ul { margin-left: 5px; }
#contents .fullFrame li { margin-left: 20px; list-style-type: disc; }

.detailFrame .categoryFrame {
  border: 1px solid #cccccc; width: 725px; padding-left: 15px; padding-top: 20px;
}
.fullFrame .categoryFrame { width: 950px; border-bottom: 1px solid #cccccc; }

/* h1: 青帯白文字 (layout.css; band image 241x24) */
.categoryFrame h1, main > h1, .fullFrame h1 {
  background: url(../img/bg_category_title_hl_2.png) no-repeat;
  font-size: 145%; color: #ffffff; padding: 2px 0 3px 5px;
  border-bottom: 1px solid #cccccc; margin-bottom: 10px; font-weight: bold;
}
.categoryFrame h1 { width: 705px; }
.detailFrame .categoryFrame h1 { width: 705px; }
.categoryFrame .singin_ttl { border-bottom: 0; margin-bottom: 0; }

/* h2: 商品/カテゴリ名 斜体 (common.css) — preceded by the 65x25 tab image */
.categoryFrame .item_ttl h2, #contents .detailFrame .categoryFrame h2 {
  float: left; margin: 0 0 0 0; padding-bottom: 5px; padding-left: 5px;
  width: 615px; color: #000000; font-size: 145%; font-style: italic;
  font-weight: normal; border-bottom: 1px solid #cccccc;
}
.listing-tab { float: left; width: 65px; height: 25px;
  background: url(../img/ja/bg_productlisting_ttl.png) no-repeat; }
html[lang="en"] .listing-tab { background-image: url(../img/en/bg_productlisting_ttl.png); }

/* ===== 4. sidebar blocks (layout.css) ====================================== */

.navigation dl, .navigation ul { width: 198px; margin: 0 1px 10px; line-height: 1.0em; }
.navigation dt { padding: 7px 5px; color: #fdfffe; background-color: #595656; font-size: 150%; }
.navigation dd, .navigation li {
  border-bottom: 1px dotted #dadcdb; padding: 8px 0 7px 15px;
  background: url(../img/bg_information_arrow.png) no-repeat 5px;
}
.navigation dd a, .navigation li a { text-decoration: none; }
.sidebarCategory a { font-size: 10px; }

/* R-1 (続244-5・visual-parity S-1): 旧 common.css L70-74 verbatim 移植 = サイドバー検索 UI。 */
.search_function { margin-bottom: 15px; background-color: #F0F0EF; padding: 5px 0 5px 5px; }
.search_function .search { position: relative; height: 50px; }
.search_function .btn { position: absolute; bottom: 0; left: 70px; }
.search_function .textarea img { position: absolute; top: 3px; left: 10px; }
.search_function .textarea input { position: absolute; right: 5px; }

.menuFrame .information, .menu .information { margin-bottom: 15px; }
.menuFrame .information h2, .menu .information h2 {
  padding: 2px 5px 3px; font-size: 150%; color: white;
  background-color: #595656; font-weight: normal;
}
.menuFrame .information ul, .menu .information ul { padding-top: 5px; }
.menuFrame .information li, .menu .information li {
  background: url(../img/bg_information_arrow.png) no-repeat 5px;
  padding: .3em 15px; border-bottom: 1px dotted #DADCDB;
}
.menuFrame .information li a, .menu .information li a { color: #838283; text-decoration: none; }
.menuFrame .information li.lastline, .menu .information li.lastline {
  border-bottom: 0; padding: .3em 15px 0;
}

.top_calendar p, .shop_address p {
  padding: 4px 5px 2px 5px; color: #FDFFFE; background-color: #595656;
  font-size: 150%; margin-bottom: 3px;
}
.shop_address { margin-top: 10px; }
/* .shop_address ul li の padding 4px 2px は旧 layout.css に無い追加 rule のため除去
 * (続232 Phase4 anchor probe 実測 = 旧 0px・li reset のみ) */

/* ===== 5. product listing (layout.css) ===================================== */

.categoryFrame .item_detail { margin-top: 10px; width: 683px; }
.itemlist .item { padding: 10px 0 10px; width: 683px; }
.itemlist .item .data a { color: #4444cd; }
.itemlist .item .data .cart { clear: both; text-align: right; margin-top: 10px; }

.categoryFrame .item_detail .imageFrame { float: left; display: inline; width: 330px; margin-right: 20px; }
.item_detail .imageFrame .image { width: 298px; margin-bottom: 20px; text-align: center; }
.item_detail .imageFrame .image img { border: 1px solid #E4E9EE; display: block; width: 330px; height: 237px; object-fit: contain; background: #fff; }
/* Category listing image — 旧 layout.css:172 .itemlist .item .image img は実画像
   250x180 を 330x237 に CSS 拡大していた (続231 Fable5 R-1: iter2 は HTML 属性値
   250x180 を正と誤較正)。旧実描画 332x239 (border 1px 込) へ寄せる。 */
.item_detail .imageFrame .image img.cat-image { width: 330px; height: 237px; border-color: #EBEBEB; }

html[lang="ja"] .product_desc {
  float: right; background: url(../img/ja/bg_productlisting_desc.png) no-repeat top left;
  margin-bottom: 20px; margin-top: 10px;
}
html[lang="en"] .product_desc {
  float: right; background: url(../img/en/bg_productlisting_desc.png) no-repeat top left;
  margin-bottom: 20px; margin-top: 10px;
}
.product_desc_box {
  border: 1px solid #cccccc; width: 330px; min-height: 160px; float: right;
  margin-top: 24px; margin-left: 1px;
}

/* 型番×単価×数量 matrix (inline style + layout.css !important merge) */
table#multipl_eorder_table {
  float: right; width: 400px; color: #302623; margin-bottom: 20px;
  border: 1px solid #cccccc; border-collapse: collapse;
}
table#multipl_eorder_table input { width: 60px; }
table#multipl_eorder_table th {
  padding: 2px; background: #edecec; font-weight: normal; line-height: 120%;
  text-align: center; min-width: 30px; border: 1px solid #cccccc;
}
table#multipl_eorder_table th span { font-weight: bold; }
table#multipl_eorder_table td {
  padding: 2px; border: 1px solid #cccccc; text-align: center;
  background: #fff; min-width: 30px;
}
.price-note { color: #0083ce; font-weight: bold; }

/* product detail (layout.css) */
.item_detail .data th { background: #edecec; }
.item_detail .productinfo_tbl td, .item_detail .productinfo_tbl th {
  border: 1px solid #cccccc; text-align: center; padding: 2px 6px;
}
/* 続347 DEF-010(6) 追補 (Fable 敵対レビュー M-1): 旧 layout.css が持つ商品説明の随伴ルールが
   新側に無く、template に <p> を足しても要素型リセット (h1,…,p { margin:0; padding:0 }) だけが効いて
   旧と同じにならなかった。word-wrap 欠落は「長い連続文字列を含む説明が枠を溢れる」実害がある
   (旧は折り返す)。移植元の実物 = docs/qa/evidence/SCR-CAT-014/source/SCR-CAT-014-legacy-layout.css。
   ※実描画での確認は未了 (deploy 後の再撮影で確かめる)。

   【撤回 (Critic 検分 F-2・同 session 内)】旧の `.detailFrame p { margin:10px 0 }` も一度移植したが
   **撤回した**。理由 = 新側の `.detailFrame` は base.html の全ページ本文枠であり、この 1 行は
   商品詳細どころか**全画面の段落余白**を動かす。実描画未確認・pytest lock なし・敵対レビュー後の
   追加で誰の検分も通っていない状態だった。旧の較正は「壊れた universal reset」前提で成立しており
   (session.md 続347 Emergent risk #1)、全画面に効く変更は単独では入れない。
   → 全画面の余白は R2 の実描画対照で扱う。ここでは**商品説明の枠に限定した 1 行のみ**残す。
   なお旧側に当該指定が実在することは保存済み layout.css で確認済 (まとめ書きの形
   `.detailFrame p, .detailFrame h2, …{margin-bottom:10px; …}`)。引用は捏造ではないが、
   **効く範囲を「商品説明の余白」と書いたのは私の誤り**で、実際は全ページの本文枠に効く。 */
.item_detail .product_desc_box p { padding: 0 10px; word-wrap: break-word; }
.categoryFrame .item_detail table { border-collapse: collapse; }
.item_detail .orderform { clear: both; text-align: left; width: 683px; }
/* 続347 DEF-010(1) (KO 判断 2026-07-25): 旧本番の CSS は `.item_detail .orderform form`
   を狙う指定だが実 DOM は form が orderform の親にあり当たらない = 旧では緑帯
   「タイプ選択」(icn_options_available.png) は 10 年以上出ていない (旧の設計意図と
   実挙動が食い違っている実例)。新側で `.orderform.has-options` に直して当たるように
   していたのは「旧より改善」型のため、旧一致で無効化 (has-options ルールを削除)。
   参照: docs/qa/evidence/SCR-CAT-014/item-operation-parity.md D1/§2.1。
.item_detail .orderform.has-options {
  background: url(../img/icn_options_available.png) no-repeat top left;
  padding-top: 24px;
} */
.item_detail .orderform .option dt {
  float: left; width: 120px; font-size: 90%; border: 1px solid #cccccc;
  padding-top: 15px; padding-left: 30px; min-height: 50px;
  border-right: 1px dotted #cccccc; background: #f7f8f9; margin-bottom: -1px;
}
.item_detail .orderform .option dd {
  color: #376EAA; width: 499px; border: 1px solid #cccccc; float: left;
  padding-top: 15px; padding-left: 30px; min-height: 50px; border-left: none;
  background: #f7f8f9; margin-bottom: -1px;
}
.item_detail .orderform .option select { border: 1px solid #DBDFE5; }
.item_detail .cart_submit {
  float: left; padding-top: 20px; width: 683px; margin-bottom: 10px;
  border-top: 1px dotted #CCC; margin-top: 20px;
}
.item_detail .orderform .put_cart .cart { float: right; padding-left: 22px; }
.point { float: right; color: #508C32; font-weight: bold; text-align: right; padding-right: 5px; }

/* cart-in image buttons (224x43, lang + :hover rollover) */
.imgbtn-into-cart, .imgbtn-put-cart { width: 224px; height: 43px; }
.imgbtn-into-cart { background-image: url(../img/ja/btn_into_cart.png); }
.imgbtn-into-cart:hover { background-image: url(../img/ja/btn_into_cart_roll.png); }
.imgbtn-put-cart { background-image: url(../img/ja/btn_put_cart.png); }
.imgbtn-put-cart:hover { background-image: url(../img/ja/btn_put_cart_roll.png); }
html[lang="en"] .imgbtn-into-cart { background-image: url(../img/en/btn_into_cart.png); }
html[lang="en"] .imgbtn-into-cart:hover { background-image: url(../img/en/btn_into_cart_roll.png); }
html[lang="en"] .imgbtn-put-cart { background-image: url(../img/en/btn_put_cart.png); }
html[lang="en"] .imgbtn-put-cart:hover { background-image: url(../img/en/btn_put_cart_roll.png); }

/* 会員登録ボタン (139x33) */
.imgbtn-edit-user { width: 139px; height: 33px; background-image: url(../img/ja/btn_edit_user.png); }
html[lang="en"] .imgbtn-edit-user { background-image: url(../img/en/btn_edit_user.png); }

/* ===== 6. top-page showcase (pm/css/base.css + index.css, scoped) ========== */

.pm-main { width: 740px; font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", sans-serif; font-size: 12px; text-align: left; }
.pm-main h2 { width: 740px; height: 25px; text-indent: -9999px; overflow: hidden;
  background: url(../img/ja/pm/top_title.png) no-repeat; }
html[lang="en"] .pm-main h2 { background-image: url(../img/en/pm/top_title.png); }
.pm-main .pm-block { margin-top: 20px; width: 740px; height: 169px;
  background: url(../img/pm/pro_bg.png) no-repeat; }
.pm-main .pm-block h3 { width: 740px; height: 53px; text-indent: -9999px; overflow: hidden; background-repeat: no-repeat; }
.pm-main .pm-block img.pro { float: left; margin: 7px 16px 0 16px; }
.pm-main .pm-block p { margin-top: 10px; line-height: 1.4; }
.pm-main .pm-block ul li { float: left; padding-right: 14px; margin-top: 5px; list-style: none; margin-left: 0; }
.pm-main .pm-block ul li a { display: block; width: 156px; height: 78px;
  text-indent: -9999px; overflow: hidden; background-repeat: no-repeat;
  background-position: left top; }
.pm-main .pm-block ul li a:hover { background-position: left bottom; }
.pm-main .pm-block.pm-s { width: 365px; height: 188px;
  background: url(../img/pm/pro_bg_s.png) no-repeat; }
/* R-7 続245 (visual-parity B-9): .pm-block h3 の generic width:740px (L285) が
   .pm-s (365px) 系にも継承されて h3 が 375px 右方に溢れ、body scrollWidth が 1490
   になっていた (staging 全幅差の真因)。.pm-s 内 h3 を親幅にそろえる。 */
.pm-main .pm-block.pm-s h3 { width: 365px; }

/* R-8 続245 (visual-parity B-10 password-reset button layout): 旧本番の
   `<div class="button"><a class="left">戻る</a><input>送信</input></div>` を再現。
   .left は共通の float:left・input は input[type=image] を float:right で右寄せ。 */
.password-reissue-button { overflow: hidden; }
.password-reissue-button input[type="image"] { float: right; }
.pm-main .pm-block.pm-s img.pro { margin: 7px 12px 0 12px; }
.pm-main .pm-left { float: left; clear: both; }
.pm-main .pm-right { float: right; }
/* EN index.css quirk: small blocks are 208px tall, bg anchored bottom-left */
html[lang="en"] .pm-main .pm-block.pm-s { height: 208px;
  background: url(../img/pm/pro_bg_s.png) no-repeat left bottom; }
/* lang-switched title bands (53px) and 156x78 two-state sprite buttons */
.pm-main h3.title1 { background-image: url(../img/ja/pm/pro_title1.png); }
.pm-main h3.title2 { background-image: url(../img/ja/pm/pro_title2.png); }
.pm-main h3.title3 { background-image: url(../img/ja/pm/pro_title3.png); }
.pm-main h3.title4 { background-image: url(../img/ja/pm/pro_title4.png); }
.pm-main h3.title5 { background-image: url(../img/ja/pm/pro_title5.png); }
.pm-main h3.title9 { background-image: url(../img/ja/pm/pro_title9.png); }
.pm-main h3.title10 { background-image: url(../img/ja/pm/pro_title10.png); }
.pm-main h3.title11 { background-image: url(../img/ja/pm/pro_title11_s.png); }
.pm-main h3.title12 { background-image: url(../img/ja/pm/pro_title12_s.png); }
.pm-main h3.title13 { background-image: url(../img/ja/pm/pro_title13.png); }
html[lang="en"] .pm-main h3.title1 { background-image: url(../img/en/pm/pro_title1.png); }
html[lang="en"] .pm-main h3.title2 { background-image: url(../img/en/pm/pro_title2.png); }
html[lang="en"] .pm-main h3.title3 { background-image: url(../img/en/pm/pro_title3.png); }
html[lang="en"] .pm-main h3.title4 { background-image: url(../img/en/pm/pro_title4.png); }
html[lang="en"] .pm-main h3.title5 { background-image: url(../img/en/pm/pro_title5.png); }
html[lang="en"] .pm-main h3.title9 { background-image: url(../img/en/pm/pro_title9.png); }
html[lang="en"] .pm-main h3.title10 { background-image: url(../img/en/pm/pro_title10.png); }
html[lang="en"] .pm-main h3.title11 { background-image: url(../img/en/pm/pro_title11_s.png); }
html[lang="en"] .pm-main h3.title12 { background-image: url(../img/en/pm/pro_title12_s.png); }
html[lang="en"] .pm-main h3.title13 { background-image: url(../img/en/pm/pro_title13.png); }
.pm-main a.btn1 { background-image: url(../img/ja/pm/btn1.png); }
.pm-main a.btn2-1 { background-image: url(../img/ja/pm/btn2-1.png); }
.pm-main a.btn2-3 { background-image: url(../img/ja/pm/btn2-3.png); }
.pm-main a.btn3 { background-image: url(../img/ja/pm/btn3.png); }
.pm-main a.btn4 { background-image: url(../img/ja/pm/btn4.png); }
.pm-main a.btn5 { background-image: url(../img/ja/pm/btn5.png); }
.pm-main a.btn6 { background-image: url(../img/ja/pm/btn6.png); }
.pm-main a.btn13 { background-image: url(../img/ja/pm/btn13.png); }
.pm-main a.btn14 { background-image: url(../img/ja/pm/btn14.png); }
.pm-main a.btn15 { background-image: url(../img/ja/pm/btn15.png); }
.pm-main a.btn16 { background-image: url(../img/ja/pm/btn16.png); }
.pm-main a.btn17 { background-image: url(../img/ja/pm/btn17.png); }
.pm-main a.btn18 { background-image: url(../img/ja/pm/btn18.png); }
.pm-main a.btn19 { background-image: url(../img/ja/pm/btn19.png); }
.pm-main a.btn20 { background-image: url(../img/ja/pm/btn20.png); }
.pm-main a.btn21 { background-image: url(../img/ja/pm/btn21.png); }
html[lang="en"] .pm-main a.btn1 { background-image: url(../img/en/pm/btn1.png); }
html[lang="en"] .pm-main a.btn2-1 { background-image: url(../img/en/pm/btn2-1.png); }
html[lang="en"] .pm-main a.btn2-3 { background-image: url(../img/en/pm/btn2-3.png); }
html[lang="en"] .pm-main a.btn3 { background-image: url(../img/en/pm/btn3.png); }
html[lang="en"] .pm-main a.btn4 { background-image: url(../img/en/pm/btn4.png); }
html[lang="en"] .pm-main a.btn5 { background-image: url(../img/en/pm/btn5.png); }
html[lang="en"] .pm-main a.btn6 { background-image: url(../img/en/pm/btn6.png); }
html[lang="en"] .pm-main a.btn13 { background-image: url(../img/en/pm/btn13.png); }
html[lang="en"] .pm-main a.btn14 { background-image: url(../img/en/pm/btn14.png); }
html[lang="en"] .pm-main a.btn15 { background-image: url(../img/en/pm/btn15.png); }
html[lang="en"] .pm-main a.btn16 { background-image: url(../img/en/pm/btn16.png); }
html[lang="en"] .pm-main a.btn17 { background-image: url(../img/en/pm/btn17.png); }
html[lang="en"] .pm-main a.btn18 { background-image: url(../img/en/pm/btn18.png); }
html[lang="en"] .pm-main a.btn19 { background-image: url(../img/en/pm/btn19.png); }
html[lang="en"] .pm-main a.btn20 { background-image: url(../img/en/pm/btn20.png); }
html[lang="en"] .pm-main a.btn21 { background-image: url(../img/en/pm/btn21.png); }

/* 型番 page blocks: DB-driven approximation of pm/css/category.css
 * (cat_bg.png 366x236 + baked title images are static CMS art; here the same
 * geometry is reproduced with text headings — flagged divergence) */
.pm-main .cat-block { float: left; width: 366px; min-height: 236px; margin-top: 20px;
  border: 1px solid #ccc; background: #fff; }
.pm-main .cat-block.cat-left { float: left; clear: both; }
.pm-main .cat-block.cat-right { float: right; }
/* B-10 (続232): 見出し帯 = 現行 cat_title png の実測グラデ (#68ac93→#038366)。
 * 左写真 275px + 右サイズ列 79px は現行 pm/css/category.css の cat_left/cat_right 寸法踏襲 */
.pm-main .cat-block h3 { width: auto; height: auto; text-indent: 0;
  padding: 5px 10px; background: linear-gradient(#68ac93, #038366); color: #fff; font-size: 116%; }
.pm-main .cat-block .cat-body { padding: 8px 10px; }
.pm-main .cat-block .cat-body.has-photo { padding: 8px 0; }
.pm-main .cat-block .cat-body.has-photo .cat-photo {
  float: left; width: 275px; border-right: 1px solid #ccc; padding: 4px 4px 4px 0; }
.pm-main .cat-block .cat-body.has-photo .cat-photo img { margin-left: 4px; }
.pm-main .cat-block .cat-body.has-photo .cat-sizes {
  float: right; width: 74px; padding-left: 5px; }
.pm-main .cat-block .cat-sizes h4 {
  margin: 0; padding: 2px 0; background: #595656; color: #fff;
  text-align: center; font-size: 100%; font-weight: bold;
}
.pm-main .cat-block .cat-body.has-photo .cat-sizes ul li { text-align: center; margin-top: 5px; line-height: 1.4; }
.pm-main .cat-block .cat-body.has-photo .cat-sizes ul li a { color: #0169b8; }
.pm-main .cat-block .cat-body.has-photo .cat-sizes .btn { display: block; margin-top: 6px; text-align: center; padding: 2px 0; }
/* 続269 Wave H (KO 是正「旧見た目寄せ」): 型番一覧カード内の「詳細を見る」ボタン色を
   旧本番 detail_btn.png 実測色 (2026-07-11 curl 取得 + PIL 抽出: normal RGB 74,124,212
   = #4a7cd4 / hover RGB 64,121,203 = #4079cb) に寄せる。全体 a.btn (下方 L483 #f18200
   orange) を override 対象は型番一覧カード内のみ。has-photo 有無双方に適用。
   Border は hover 相当の少し暗い青で縁取り (旧本番 png 端部実測に近似)。 */
.pm-main .cat-block .cat-sizes .btn {
  background: #4a7cd4;
  border-color: #2f74bc;
}
.pm-main .cat-block .cat-sizes .btn:hover {
  background: #4079cb;
  border-color: #2f74bc;
  color: #fff;
}
.pm-main .cat-block ul li { float: none; padding: 2px 0; margin: 0; list-style: none; }

/* ===== 7. login / 会員ボックス (checkout.css) =============================== */

.login, .edit {
  margin: auto; border: 1px solid #cfcdcd; background-color: #fbfafa;
  width: 410px; border-top-right-radius: 5px; border-top-left-radius: 5px;
}
/* 続298 B (Codex 5.6-terra pixel 分析・shop3 login parity 修復): S1/S2/A1 は
 * localhost:8012 実測 (getBoundingClientRect) で現状値を裏取りしてから寸法決定。
 * S1 (上) と S1 (下・当初の外部 margin 吸収案) は Codex 5.6-sol 敵対 review で
 * 「元一致箇所を破壊する」finding が出たため取り下げ (S1 上 = green band は既に一致・
 * S1 下 = .login 外部 margin は panel 外の gap ゆえ内部余白削減にならない)。
 * S1 (下) の代替 = .login .body-pad padding-bottom 12→0 (下記 L434)。
 * cache key は iter4-249-force → iter4-250-force に bump (base.html:10)。*/
.login { margin-bottom: 30px; margin-top: 65px; } /* Codex finding 追随: 元一致 (30px) 保持
  (Sonnet 迷い点 #3 の外部 margin 吸収案は Codex P2 で否認)。 */
.login .title h2, .edit .title h2 {
  border: 1px solid #d1d2d2; font-style: normal; font-size: 100%;
  font-weight: bold; padding: 15px;
  border-top-right-radius: 5px; border-top-left-radius: 5px;
  float: none; width: auto; margin: 0;
}
.login .title h2 { color: white; background-color: #419a7e; } /* Codex finding 追随: green
  band は既に旧と一致ゆえ padding-top: 0 撤回 (Codex P2 で否認)。 */
.edit .title h2 { color: #2a4154; background-color: #d4d4d4; }
.login table { margin: auto; margin-bottom: 7px; font-size: 12px; } /* S1 (中): checkbox
  ↔ パスワード再発行 link 間 実測 30px→7px (-23px・localhost 実測で境界確定=高確信) */
.login table th { color: #6c767f; width: 9em; border: none; background: none;
  text-align: center; font-weight: normal;
  /* 続310 KO 是正 (c): iPhone 幅で「Eメールアドレス」が 1 字ずつ縦折れした事故の
   * 防波堤。旧本番はラベルが常に 1 行 (th 9em が満尺確保される幾何) のため、
   * 圧縮環境 (iOS font boosting 等) でも折れない nowrap を付す (通常描画では
   * 108px に 96px のラベルが収まり見た目不変)。 */
  white-space: nowrap; }
.login table td { padding: 4px 0; border: none; }
.login input.text { border: 1px solid #CBD4DC; width: 270px; } /* 続310 KO 是正 (c):
  続298 A1 の margin-left 16px は「.body-pad 左右 18px が旧に無い」ことによる input
  位置ずれの対症で、table 圧縮 (th 潰れ → モバイル縦折れ) の原因だった。旧本番
  checkout.css verbatim (width 270px のみ) に戻し、位置は下の .body-pad 修正で根治。 */
.login .reminder { text-align: center; }
.login .reminder a { color: #5999cf; }
.login p, .edit p, .btn_login, .btn_edit { text-align: center; }
.login .body-pad { padding: 12px 0 0; text-align: left; } /* S1 (下・Codex 代替解):
  padding-bottom 12→0。続310 KO 是正 (c): 左右 18px→0 — 旧本番 login は body-pad
  相当の内側 padding を持たず (2026-07-19 curl 実測: p/table が .login 直下)、
  table 実効幅 408px で th 9em + input 270px が満尺収まる。18px を足すと table が
  372px に圧縮され th が潰れる (= 続298 A1 の 16px ずれの真因・iPhone 縦折れの根)。 */
.edit .body-pad { padding: 12px 1px; text-align: left; } /* S2: 左右 18px→1px (各-17px)。
  本文左端 (ul/li の margin-left 別途 38px 込み) を x478→x460 相当に移動。1px は極小だが
  terra 分析の -17px 指示値どおり (迷い点 #2: 意図が「ほぼ 0」か要確認) */
.edit ul { text-align: left; margin: 0 0 10px 18px; }
.edit ul li { list-style: disc; margin-left: 20px; }

/* ===== 8. tables: cart (.dataT, checkout.css) / 特商法 (term.css) =========== */

.dataT { width: 705px; border: 1px solid #bebcb7; border-collapse: collapse; }
.dataT th { border-right: 1px solid #BEBCB7; border-bottom: 1px solid #BEBCB7;
  text-align: center;
  padding: 2px 8px; color: #0a263c; font-size: 12px; }
.dataT th.a-right { text-align: right; }
.dataT th.a-center { text-align: center; }
.dataT thead tr { background-color: #e3efec; }
.dataT td { border-right: 1px solid #C1DAD7; border-bottom: 1px solid #C1DAD7;
  padding: 6px 12px; color: #4f6b72; font-size: 11px; }
.dataT .even { background: #eeeded; }
#checkoutbutton { text-align: center; }
#checkoutbutton dl { margin-bottom: 15px; }
#checkoutbutton dt { float: left; width: 100px; font-weight: bold; }
#checkoutbutton dd { font-size: 16px; font-weight: bold; }
.form-button-alt {
  padding: 1px 8px; color: #fff; font: bold 12px arial, sans-serif;
  border: 1px solid #406a83; background-color: #618499; cursor: pointer;
}
#cart_notice { background-color: #F4F5D3; padding: 10px; width: 500px;
  border: 1px solid #D0D0D0; margin-top: 10px; } /* 続298 主線0 A2 (Codex terra pixel
  分析採用): 旧 20px → 10px (-10px)。KO 是正「手段を聞かずに見た目差異があるなら直すのが筋」
  で oracle verbatim (Sonnet 論拠) より実描画差 (terra/Codex 指摘 shop3 実 25px) 優先。 */
/* 続271 緊急4: 旧本番 cart-detail.php parity (旧 checkout.css 実採取値 verbatim) */
#cart_notice ul { margin: 6px 0 0 20px; }
#cart_notice li { line-height: 1.6; font-size: 12px; margin-top: 4px; }
/* 続298 主線0 S1 (Codex terra pixel分析・05-cart): 旧本番 verbatim (legacy_cart_verbatim_
   2026-07-12.md §2-2) は SET内訳を `<small><i>str</i></small><br/>` のインライン+brで
   出力し margin は無い。新側は div.small で実装しているため、L558 `form div{margin-
   bottom:.8rem}` (会員フォーム系の汎用 rule) がカート <form> 内の div.small にも意図せず
   波及し、オプション行ごとに +12.8px の余白が乗って明細行が過大化していた (実測 = 5行
   オプション商品で行高 55px(旧相当)→156px)。カート内 .small のみ scope して打ち消す
   (#shopping-cart 限定 = 他ページの form div / .small には無影響)。 */
#shopping-cart .small { margin-bottom: 0; }
/* A1 (続298 主線0・terra 分析): 画像列が旧 75px に対し新 85px (colgroup col width="75" は
   table-layout:auto 下で .cart-thumb(60px)+td左右padding(24px)+border(1px)=85px の
   min-content に押し負けて無効化されていた)。.cart-thumb を 50px に縮小し 50+24+1=75px で
   colgroup の指定値と一致させる (旧 checkout.css の product_small 相当サイズへ近接)。
   副次効果: 画像列 -10px分が唯一の可変列 (商品名列) に吸収され 384px→394px に拡大
   (terra 指摘の罫線 x250→x240 も同じ根本原因の副産物・別途対応不要)。 */
.cart-thumb { width: 50px; height: auto; display: block; }
.shopping-cart .continue-shopping { float: left; }
.dataT tfoot { border-bottom: 1px solid #bebcb7; }
.dataT tfoot tr { background-color: #DEE5E8; }
.dataT tfoot td { border-bottom: 0; padding: 3px 12px; }
.cart-delete-icon { border: 0; background: transparent; padding: 0; cursor: pointer; }
.hidden-default-submit { display: none; }
#checkoutbutton { float: right; margin-top: 20px; }

/* 特商法/プライバシー表 (pm/css/term.css #main table) */
.legal-table {
  margin-top: 20px; border: 1px solid #CCCCCC; table-layout: fixed;
  border-collapse: collapse; width: 705px;
  font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro W3", "ＭＳ Ｐゴシック", "MS PGothic", Osaka, sans-serif;
}
.legal-table th {
  background-color: #f0f7f5; font-size: 13px; color: #2e4c6a;
  padding: 14px 16px; vertical-align: top; line-height: 1.6; text-align: left;
  border: 1px solid #CCCCCC; width: 180px; font-weight: bold;
}
.legal-table td {
  color: #1b2a3a; padding: 12px 16px; vertical-align: middle; line-height: 1.6;
  text-align: left; border: 1px solid #CCCCCC; font-size: 13px;
}
.legal-table td p { margin-top: 6px; }
.legal-table td p:first-child { margin-top: 0; }
/* 旧 pm/css/term.css #main span { color:#FF0000 } — 送料負担注記等の赤字 (続231 Fable5 KO 指摘 08 是正) */
.legal-table span { color: #FF0000; }
.legal-body h3 { border-bottom: 1px solid #CCCCCC; font-size: 13px; color: #217c1f; font-weight: bold; margin-top: 14px; }
.legal-body p { margin-top: 12px; font-size: 13px; }
.legal-body ul { list-style-type: disc; list-style-position: inside; margin-left: 5px; }
.legal-body ul li { line-height: 1.8; margin-top: 8px; list-style: disc; margin-left: 20px; }

/* ===== 9. footer (common.css — outside #page) ============================== */

#footer { text-align: center; margin-bottom: 80px; margin-top: 50px; clear: both; }
#footer .contents {
  width: 950px; margin: 0 auto; text-align: center;
  background-color: #071e2d; color: #f0f1f2; padding: 15px 0;
}
#footer .copyright { padding-top: 0; font-size: 90%; color: #f0f1f2; }

/* ===== 10. app-generic widgets kept from iter1 (re-palette only) =========== */
/* Pages without a legacy reference (register/profile/checkout/simulation/
 * downloads) keep their structure; these classes restyle them to the legacy
 * palette so they sit naturally inside the ported frame. */

.breadcrumb { font-size: .85rem; color: #707070; margin-bottom: 1rem; }
.filters { margin-bottom: 1rem; }
.filters a { font-size: .85rem; padding: .2rem .6rem; border: 1px solid #bbb;
  border-radius: 12px; text-decoration: none; color: #505050; margin-right: .3rem; }
.filters a.active, .filters a:hover { background: #595656; color: #fff; border-color: #595656; }

.product-grid { overflow: hidden; margin-top: 1rem; }
.product-grid .product-card { float: left; width: 220px; margin: 0 10px 10px 0;
  border: 1px solid #ccc; padding: 10px; background: #fff; }
.product-card h3 { font-size: 100%; margin: 0 0 4px; }
.product-card .price { font-weight: bold; color: #dc7a00; }

a.btn, button.btn {
  display: inline-block; padding: .4rem .9rem; background: #f18200; color: #fff;
  border: 1px solid #de5400; cursor: pointer; text-decoration: none;
  font-size: .9rem; font-weight: bold;
}
a.btn:hover, button.btn:hover { background: #de5400; color: #fff; }

/* 続303 Phase 4-b: checkout 段2 の 3 table (.checkout-method-table /
   .checkout-address-table / .checkout-comment-table) を :not 除外に追加。
   本 rule は :not(#multipl_eorder_table) 由来の specificity 1-4-3 で class rule では
   override 不能 (下の login コメント参照) のため、sitemap-plain と同じ除外方式を採る。
   除外しないと oracle に無い td 罫線/灰 th 背景/左寄せが checkout 段2 に混入する。 */
table.app-table th, table.app-table td,
main table:not(.legal-table):not(.dataT):not(#multipl_eorder_table):not(.cal):not(.sitemap-plain):not(.checkout-method-table):not(.checkout-address-table):not(.checkout-comment-table):not(.num) th,
main table:not(.legal-table):not(.dataT):not(#multipl_eorder_table):not(.cal):not(.sitemap-plain):not(.checkout-method-table):not(.checkout-address-table):not(.checkout-comment-table):not(.num) td {
  border: 1px solid #cccccc; padding: .4rem .7rem; text-align: left;
}
main table:not(.legal-table):not(.dataT):not(#multipl_eorder_table):not(.cal):not(.sitemap-plain):not(.checkout-method-table):not(.checkout-address-table):not(.checkout-comment-table):not(.num) th {
  background: #edecec;
}
/* 旧本番 sitemap table は罫線なし (続231 Fable5 R-4 是正・layout 素通し) */
main table.sitemap-plain th, main table.sitemap-plain td { border: 0; }

/* R-3 (続244-8・visual-parity B-2): 旧本番 login table は border:none + bg:transparent。
   上の generic main table rule は :not(#multipl_eorder_table) を含み specificity ID
   1-4-3 = 143 と極めて高く、通常の class selector では override 不能ゆえ !important 使用。
   旧本番 CSS (checkout.css L26-27) は !important なしで済むが、staging 側汎用 rule
   衝突ゆえの必要悪 (verbatim 意味は border/bg なしで一致)。 */
main .login table,
main .login table th,
main .login table td { border: 0 !important; background: none !important; }
main .login table th { color: #6c767f; width: 9em; padding: 0 !important;
  text-align: center !important; font-weight: bold; }
/* ↑ 続350 DEF-011: 旧本番のラベルは width:9em の中で **中央寄せ** (browser 既定・続326 訂正
   + 続349 の実描画実測 中心 x≈501 で確定)。新が左寄せなのは、上の .login 系の宣言ではなく
   L594-597 の汎用 main table rule (:not(#multipl_eorder_table) 由来 specificity 1-4-3) が
   text-align: left を注入して勝っているため。**続349 が計画した「L459/L613 の
   text-align: left を外す」は no-op** (外しても汎用 rule が残る) と実描画で判明したので、
   border/background/padding と同じ「必要悪 !important」で中央へ戻す。
   縦折れの防波堤は white-space: nowrap (L464) と padding の !important であり、
   text-align とは独立ゆえ触っていない = iPhone 幅の縦折れ対策 (続310 KO 是正 (c)) は保持。 */
/* ↑ A2 (続298 B・Codex terra pixel 分析): 旧 shop2 label (Eメールアドレス/パスワード) は
   太字。specificity 1-4-3 でこの main-prefixed rule が上記 L419 .login table th の
   font-weight:normal を実際には上書きしている (勝者) ため、bold 化はここで行う。 */
main .login table td { padding: 4px 0 !important; }
/* ↑ 続310 KO 是正 (c): padding にも !important が必要 (border/bg と同じ理由 —
   generic main table rule は :not(#multipl_eorder_table) 由来 specificity 1-4-3 で
   padding .4rem .7rem を注入し、!important 無しの padding:0 / 4px 0 は負けていた)。
   これが th/td を計 44.8px 太らせ table (max-content 428.8 > 実効 408) を圧縮して
   th 潰れ (デスクトップは僅差・iPhone font boosting 下で 1 字縦折れ) を起こす真因。
   !important 付与後 = th 108 + td 276 = table 384 shrink-to-fit 中央寄せ = 旧本番
   実測 (2026-07-19 tab 実測: table x448 w384・input x556) と完全一致。 */

form div { margin-bottom: .8rem; }
label { font-size: .95em; }
/* 旧本番は input/select/textarea 無装飾 = UA 既定 (KO 判断 2026-07-04 続232 = 旧の素の
 * 部品に寄せる・B-6 Phase3 §2-A 322 件/全 23 画面)。generic 装飾 rule を除去。
 * 旧 verbatim 由来のスコープ付き rule (.form-list dd input 等) は対象外で温存 */
fieldset { border: 1px solid #cccccc; background: #f7f8f9; padding: .6rem .9rem;
  margin-bottom: .8rem; }
legend { color: #595656; font-weight: bold; padding: 0 .4rem; }

.required { color: #ff0000; }
/* R-6a 続245 (visual-parity S-6): 旧本番は price 表示に <font color=#0083ce> (blue) を使用。
   staging の orange #dc7a00 を prod と一致させ、GR-LL 等の色系統差分を面的解消。 */
.price-special { color: #0083ce; font-weight: bold; }

/* R-6c 続245 (visual-parity B-7): Parasolid (pk=88) の product description に
   埋め込まれた旧 LC 由来の thickbox modal 装飾を復元。旧本番は
   `<a class="thickbox red">CADデータご利用にあたって</a>` + hidden
   `<div id="downloadNotice">` の対で、click で jQuery thickbox が modal 起動する構造。
   staging は thickbox JS 非搭載ゆえ初期表示 (link visible + notice hidden) のみ prod と
   視覚一致させる (interactive modal 起動は description の JS 移植は R-6c scope 外)。 */
.product_desc a.red { color: #cc0000; text-decoration: underline; }
.product_desc #downloadNotice { display: none; }
.price-original s { color: #999; }
.option-group { border: 1px solid #cccccc; background: #f7f8f9; padding: .6rem .8rem; margin-bottom: .5rem; }
.option-group strong { display: block; margin-bottom: .4rem; color: #595656; }
.option-group label { display: inline; font-weight: normal; margin-right: 1rem; }
/* .lang-select rule は除去 (続232 KO 判断 = 旧の素の部品に寄せる)。旧は
 * #header .select_lang select { border } のみ (L75 相当が適用済)・色/寸法は UA 既定 */

/* ===== 11. 会員系/フォーム8面 — 現行忠実 再移植 (P4-04d-3) =================== */
/* legacy theme_0/css/{checkout,layout,common}.css verbatim 移植。会員フォーム
 * (register/profile/checkout)・myaccount ダッシュボード・注文履歴ページャ を現行本番
 * (shop.losecon.co.jp) の骨格へ。§10 の generic fieldset/legend/input と衝突しない
 * よう、フォーム枠は .account-form / .form-list にスコープする。画像は theme_0 の
 * images_new/images から static/site/img へ移植済（bg_sub_category 緑帯 等）。 */

/* --- 11a. 会員フォーム枠 (checkout.css .form/.form-list/.input-text/legend) --- */
.account-form .form { background-color: #fff; margin-bottom: 10px; }
.account-form fieldset { border: 0; padding: 0; margin: 0 0 10px; }   /* override §10 枠付き */
.account-form legend {
  background: url(../img/bg_sub_category.png) no-repeat 0 0;
  color: #fff; font-size: 150%; font-weight: bold;
  padding: 4px 0 1px 5px; width: 245px; margin-bottom: 4px;
}
.form-list { border-top: 1px solid #D2D0D0; width: 736px; }
.form-list dt {
  width: 220px; clear: both; float: left; display: block; min-height: 35px;
  padding-top: 15px; border-bottom: 1px solid #d2d0d0;
  border-left: 1px solid #d2d0d0; border-right: 1px solid #d2d0d0;
  background-color: #f0f7f5; text-align: center;
}
.form-list dd {
  width: 478px; float: left; display: block; min-height: 30px;
  padding: 15px 0 5px 35px; border-bottom: 1px solid #d2d0d0;
  border-right: 1px solid #d2d0d0; background-color: #fcf8f4;
}
.form-list small { color: #364aa1; }
.form-list dd ul { list-style: none; }                    /* checkbox/radio 複数 widget */
.form-list dd ul li { margin: 0; display: block; }
.form-list dd .alert { width: 240px; margin-top: 4px; }
/* legacy .input-text の枠を .form-list 内の素 input/select に適用（class 付与不要）*/
.form-list dd input[type=text], .form-list dd input[type=email],
.form-list dd input[type=password], .form-list dd input[type=tel],
.form-list dd input[type=url], .form-list dd input[type=number],
.form-list dd select, .account-form .input-text {
  width: 250px; border: 1px solid #ABADB3; border-right-color: #DBDFE6;
  border-bottom-color: #E3E9EF; border-left-color: #DBDFE6; margin: 1px; padding: 2px;
  background: #fff;
}
/* DEF-035: 詳細検索の単価範囲だけは旧の size="15" 相当の幅に戻す。
 * クラスを持つ欄だけに効かせ、他画面の汎用 input 幅は変更しない。 */
.form-list dd input.input-text-short { width: 150px; }
.form-list dd textarea { width: 360px; }
.form-list dd input:focus, .account-form .input-text:focus { background-color: #FEFCE7; }

/* --- 11a-3. 続271 緊急5 (KO 実写 IMG_9534): checkout の dt/dd 行高さペア揃え。
 *   素の float dt/dd は各セル高さが独立し、dd の折返しで項目名列と段差が出る
 *   (続248 register 是正の横展開漏れ)。checkout-form scope で grid ペア化 =
 *   dt/dd が同一 row を共有し内容量に依存せず常に高さ一致。配色/罫線は §11a 継承。 */
.checkout-form .form-list { display: grid; grid-template-columns: 220px 478px; }
.checkout-form .form-list dt, .checkout-form .form-list dd {
  float: none; width: auto; min-height: 0; clear: none;
}
.checkout-form .form-list dt {
  display: flex; align-items: center; justify-content: center;
  padding: 10px 4px;
}
.checkout-form .form-list dd { padding: 15px 0 5px 35px; }

.account-form.form-pair .form-list { display: grid; grid-template-columns: 220px 478px; }
.account-form.form-pair .form-list dt, .account-form.form-pair .form-list dd {
  float: none; width: auto; min-height: 0; clear: none;
}
.account-form.form-pair .form-list dt {
  display: flex; align-items: center; justify-content: center;
  padding: 10px 4px;
}
.account-form.form-pair .form-list dd { padding: 15px 0 5px 35px; }
.account-form.form-pair .form-list dd small { display: block; }

/* --- 11a-2. 続248 会員フォーム field 別 height override (旧 layout.css L269-297 verbatim
 *   + shop3 field name 対応・#fieldset-name scope 内・dt-dd 行高さ揃え = KO 続247 指摘
 *   対応「項目名の列の各セルの高さがあっていません」)。id 対応は旧日本語 (#dtご担当業種
 *   等) を shop3 English field name (#dtindustry 等) に adapt。基本 rule (dt/dd の
 *   width/min-height/padding) は §11a 側で既に旧 checkout.css L85-86 と verbatim 一致。 */
#fieldset-name .form-list { width: 710px; }
#fieldset-name .form-list dd { width: 453px; padding-left: 34px; }
#fieldset-name .form-list textarea { width: 415px; height: 130px; }
#fieldset-name .form-list #dtterms { height: 160px; }
#fieldset-name .form-list #ddterms { height: 155px; }
#fieldset-name .form-list #dtindustry { height: 120px; }           /* 旧 #dtご担当業種 */
#fieldset-name .form-list #ddindustry { height: 115px; }
#fieldset-name .form-list #dtoccupation,
#fieldset-name .form-list #dtmarket { height: 183px; }             /* 旧 #dtご担当職種/市場 */
#fieldset-name .form-list #ddoccupation,
#fieldset-name .form-list #ddmarket { height: 178px; }
#fieldset-name .form-list #dtemployee_count { height: 153px; }     /* 旧 #dt従業員数 */
#fieldset-name .form-list #ddemployee_count { height: 148px; }
#fieldset-name .form-list #dtpostcode { height: 55px; }
#fieldset-name .form-list #ddpostcode { height: 50px; }
#fieldset-name .form-list #dtemail,
#fieldset-name .form-list #dtpassword,
#fieldset-name .form-list #dtpassword2,
#fieldset-name .form-list #dttelephone,
#fieldset-name .form-list #dtfax,
#fieldset-name .form-list #dtmobile { height: 50px; }
#fieldset-name .form-list #ddemail,
#fieldset-name .form-list #ddpassword,
#fieldset-name .form-list #ddpassword2,
#fieldset-name .form-list #ddtelephone,
#fieldset-name .form-list #ddfax,
#fieldset-name .form-list #ddmobile { height: 45px !important; min-height: 45px !important; }
/* 続249-6: KO 環境 (iPhone Safari) で ddmobile height override が反映されない silent fail
 * 対策 = !important + min-height 二重指定で specificity 強制。cache buster も iter4 に変更。 */

/* 続248-5 → 続310 KO 是正で再修正: 旧本番 SpryValidationTextField.css L81/L84 は
 * `#password_bar{width:100px; display:inline;}` (height 指定なし)。display:inline の
 * 非置換要素は CSS 仕様上 width/height が無視されるため、旧本番の実描画では
 * password_bar は事実上不可視 (KO iPhone 実機スクショに帯/■は写っていない)。
 * 続248-5 で display:inline-block + height:6px に変更したことで JS が付与する
 * inline width:N% が実際に効いてしまい、赤い■状の帯が新側だけに出現していた
 * (続310 KO 指摘「バリデーションエラー表示が旧本番と見た目レベルで違う」の実体)。
 * 旧 CSS 値へ verbatim 復元 = display:inline のみ (width は仕様上無視されるが値も
 * 旧のまま残す)。 */
#password_text { font-size: 11px; }
#password_bar { width: 100px; display: inline; }

/* 続248-2 追加: Django CheckboxSelectMultiple / RadioSelect の default rendering は
 * <div id="id_xxx"><div><label><input>...</label></div>...</div> = 旧本番の <ul><li>
 * 構造と別。§11a の `.form-list dd ul li` selector 群は空振り (旧 verbatim だが
 * shop3 HTML と対応せず) → checkbox 段間隔が browser default で広くなり dt 120px
 * 内に 5 個収まらない silent fail (KO 続247 実描画目視で発覚)。dd 内 div/label/
 * input の margin/padding/line-height を旧 <li> 相当の tight 詰めに矯正して
 * 各 checkbox 段高さ ≈ 24px に揃え、業種 5×24=120px / 職種 8×23=184px / 市場
 * 8×23=184px / 従業員 5×24=120px が旧 height override 値内に収まるようにする。 */
.form-list dd > div { margin: 0; padding: 0; }
.form-list dd > div > div { margin: 0; padding: 0; line-height: 1.5; }
.form-list dd label { display: inline-block; margin: 0; padding: 0; line-height: 1.5; }
.form-list dd input[type=checkbox],
.form-list dd input[type=radio] { margin: 0 4px 0 0; padding: 0; vertical-align: middle; }
.account-form .button, .bottom_navi .button { text-align: right; padding: 5px; }
.account-form .button .btn { font-size: 14px; padding: .5rem 2rem; }
.account-form .form-foot { clear: both; padding-top: 10px; }
a.edit-link { color: #F60; font-size: 11px; font-weight: normal; }

/* --- 11a-4. 続298 主線0 S2 (Codex terra pixel分析・06-checkout entry): 進捗バー
 * (旧 theme_0/checkout.css #mainNav L98-119 + checkout-shipping.php/checkout-
 * confirmation.php L57-96 verbatim・DB master_translation id 402-412 でラベル確認済)。
 * 会員 checkout は「お客様情報→配送・支払→確認→完了」4段。旧は class="fiveStep"
 * (235px×4=940px) を shipping/confirmation 両 php で固定使用 (4 個の li しか
 * 存在しない場合でも fiveStep サイズ据え置き = 旧本番の実挙動)。 */
#mainNav { position: relative; display: block; height: 80px; list-style: none; margin: 0 0 15px; padding: 0; }
#mainNav li { height: 71px; list-style: none; float: left; background-color: #EBEBEB;
  background-image: url(../img/checkout_navBtn.gif); background-repeat: no-repeat; background-position: right top; }
#mainNav li.current { background-color: #C36615; background-image: url(../img/checkout_navCurrentBtn.gif); }
#mainNav li.lastDone { background-color: #7C8437; background-image: url(../img/checkout_navLastDoneBtn.gif); }
#mainNav li.done { background-color: #7C8437; background-image: url(../img/checkout_navDoneBtn.gif); }
#mainNav li a, #mainNav li a:link, #mainNav li a:visited, #mainNav li a:hover, #mainNav li a:active { color: #ccc; }
#mainNav li.lastDone a, #mainNav li.lastDone a:link, #mainNav li.lastDone a:visited, #mainNav li.lastDone a:hover, #mainNav li.lastDone a:active,
#mainNav li.current a, #mainNav li.current a:link, #mainNav li.current a:visited, #mainNav li.current a:hover, #mainNav li.current a:active,
#mainNav li.done a, #mainNav li.done a:link, #mainNav li.done a:visited, #mainNav li.done a:hover, #mainNav li.done a:active { color: #fff; text-decoration: none; }
#mainNav li a { height: 71px; display: block; }
#mainNav li a em { width: 205px; display: block; margin: 6px 0 0 10px; font-style: normal; font-weight: bold; }
#mainNav li a span { width: 205px; display: block; margin-left: 10px; font-weight: normal; }
#mainNav li.mainNavNoBg { background-image: none; }
#mainNav.fiveStep li { width: 235px; margin: 0; }
#mainNav.fiveStep li a { width: 235px; }

/* --- 11a-5. 続298 主線0 (Sonnet #2 cart 発見の波及調査): checkout-form 内の
 * 「form div{margin-bottom:.8rem}」(汎用 rule・theme.css §11 冒頭) が div.small
 * (配送/支払方法の説明文・注文内容表のオプション行) にも意図せず波及していた
 * (checkout_shipping.html 実測: 各 .small で +12.8px 余白)。#shopping-cart .small
 * の cart 側 fix と同型・.checkout-form scope で打ち消す (checkout_confirm.html の
 * オプション行は <form> 外のため元々無影響・対象外)。 */
.checkout-form .small { margin-bottom: 0; }

/* --- 11b. 注文履歴ページャ (common.css .page_navi) --- */
.page_navi { width: 700px; margin: 8px 0 12px; }
.page_navi .number { float: left; width: 15em; }
.page_navi .number dt, .page_navi .number dd { display: inline; }
.page_navi .navi { float: right; text-align: right; }
.page_navi .navi li {
  float: left; border: 1px solid #D8DFE7; border-left: 0; line-height: 1.0em;
}
.page_navi .navi li.prev { border: 0; padding: 5px 13px 2px 17px;
  background: url(../img/btn_arrrow_prev.png) no-repeat center left; }
.page_navi .navi li.current { background: #7EA8D4; padding: 5px 5px 2px; color: #FFF; }
.page_navi .navi li.next { border: 0; padding: 5px 17px 2px 13px;
  background: url(../img/btn_arrrow_next.png) no-repeat center right; }
.page_navi .navi li a { display: block; padding: 5px 5px 2px; text-decoration: none; }
.page_navi .navi li.prev a, .page_navi .navi li.next a {
  display: inline; padding: 0; text-decoration: underline; }
.page_navi .navi li a:hover { display: block; background: #7EA8D4; color: #FFF; }
.bottom_navi .pagetop {
  background: url(../img/btn_pagetop.png) no-repeat center right;
  margin: 15px 10px 0 0; padding-right: 12px; text-align: right;
}

/* --- 11c. .dataT 追補 (checkout.css: 交互行 tr.alt・左寄せ td.lft・頭揃え) --- */
.dataT td { vertical-align: top; }
.dataT th { white-space: nowrap; }
.dataT td.lft, .dataT .lft { text-align: left; }
.dataT tr.alt, .dataT tr.alt td { background: #F5FAFA; color: #797268; }
.dataT tr.alt a { color: #5999CF; }
.dataT td .state-unavail { display: block; color: #999; font-size: 10px; margin-top: 2px; }

/* --- 11d. マイページ ダッシュボード (layout.css .myaccountFrame/.num) --- */
.myaccountTitle { width: 710px; border-bottom: 1px solid #CCCCCC; margin-bottom: 12px; }
.myaccountFrame h1, .account_edit_ttl h1 {
  background: url(../img/bg_category_title_hl_2.png) no-repeat; font-size: 145%;
  color: #fff; padding: 2px 0 3px 5px; border-bottom: 1px solid #cccccc;
  margin-bottom: 10px; width: 705px; font-weight: bold;
}
.account_edit_ttl { border-bottom: 1px solid #CCCCCC; width: 710px; margin: 25px 0 12px; }
.myaccountFrame .num {
  width: 710px; border: 1px solid #cfcdcd; background-color: #fbfafa; margin-bottom: 20px;
}
.myaccountFrame .num td { border: 0; vertical-align: middle; }
.myaccountFrame .num td img { float: left; margin-right: 6px; }
.myaccountFrame .num td a { color: #5999cf; text-decoration: underline; }
.myaccountFrame .num .td_links { vertical-align: bottom; }
.recent_order {
  background: url(../img/bg_category_title_h2.png) no-repeat 0 0;
  padding: 4px 0 2px 5px; color: #fff; font-size: 150%; font-weight: bold; margin-top: 20px;
}
.last-login { color: #707070; font-size: 11px; margin-bottom: 10px; }

/* --- 11e. シミュ申請フォーム 軽量restyle (P4-04d-3; 完全wizardは P4-04d-3b) --- */
.account-form .sim-cap { margin: 4px 0 8px; font-size: 116%; color: #2a4154; }
.account-form .sim-sub { margin: 12px 0 4px; padding-bottom: 2px; font-size: 108%;
  color: #217c1f; border-bottom: 1px solid #ccc; }
.account-form fieldset > div { margin: 4px 0; }

/* --- 11f. シミュ完全ウィザード (P4-04d-3b; legacy sim1..6 + 確認 + mySim) --- */
.sim-wizard .sim-intro { margin: 4px 0 14px; color: #2a4154; line-height: 1.6; }
/* 5-step progress strip (legacy ul.flow) */
.sim-wizard .sim-flow { display: flex; list-style: none; margin: 0 0 18px; padding: 0;
  border: 1px solid #b9d8d0; border-radius: 3px; overflow: hidden; }
.sim-wizard .sim-flow li { flex: 1; padding: 6px 4px; font-size: 11px; line-height: 1.4;
  text-align: center; color: #4a5b66; background: #eef6f4; border-left: 1px solid #d6e7e2; }
.sim-wizard .sim-flow li:first-child { border-left: 0; }
.sim-wizard .sim-flow li b { display: block; font-size: 12px; color: #2a9ba8; }
.sim-wizard .sim-flow li.now { background: #009f8c; color: #fff; }
.sim-wizard .sim-flow li.now b { color: #fff; }
/* step heading (number badge + h4) */
.sim-wizard .sim-head { display: flex; align-items: center; gap: 10px; margin: 18px 0 6px;
  border-bottom: 1px solid #ccc; padding-bottom: 4px; }
.sim-wizard .sim-head .sim-no { display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; background: #009f8c; color: #fff;
  font-weight: bold; font-size: 14px; flex: none; }
.sim-wizard .sim-head h4 { margin: 0; font-size: 120%; color: #1b3a2f; }
/* radio option rows + diagram cards */
.sim-wizard .sim-opts { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0; }
.sim-wizard .sim-opt { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px;
  border: 1px solid #cfd9d6; border-radius: 3px; background: #fcfdfd; cursor: pointer; }
.sim-wizard .sim-opt.is-sel { border-color: #009f8c; background: #e7f5f2; }
.sim-wizard .sim-opt .sim-note { display: block; color: #707070; font-size: 11px; }
.sim-wizard .sim-cards { display: flex; flex-wrap: wrap; gap: 12px; margin: 10px 0; }
.sim-wizard .sim-card { width: 180px; padding: 8px; border: 1px solid #ccc; border-radius: 3px;
  background: #fff; text-align: center; cursor: pointer; }
.sim-wizard .sim-card.is-sel { border-color: #009f8c; background: #e7f5f2; }
.sim-wizard .sim-card img { max-width: 100%; height: auto; display: block; margin: 0 auto 6px; }
.sim-wizard .sim-card span { display: block; font-size: 12px; }
.sim-wizard .sim-beta { margin: 8px 0; }
.sim-wizard .sim-beta input { width: 60px; }
.sim-wizard .sim-sets { margin: 8px 0; }
.sim-wizard .sim-sets label { margin-right: 16px; }
.sim-wizard .sim-sets input { width: 60px; }
/* sim4 three blocks side by side */
.sim-wizard .sim-blocks { display: flex; flex-wrap: wrap; gap: 14px; }
.sim-wizard .sim-block { border: 1px solid #d6e7e2; border-radius: 3px; padding: 10px;
  background: #fbfdfc; }
.sim-wizard .sim-blocks .sim-block { width: 280px; }
.sim-wizard .sim-block h5 { margin: 0 0 6px; font-size: 102%; color: #217c1f; }
.sim-wizard .sim-fig { max-width: 100%; height: auto; display: block; margin: 0 0 8px;
  border: 1px solid #e3ebe8; }
.sim-wizard .sim-fig-wide { max-width: 420px; }
.sim-wizard .sim-block-wide { width: 100%; }
.sim-wizard .sim-dim { border-collapse: collapse; margin: 6px 0; }
.sim-wizard .sim-dim caption { text-align: left; font-weight: bold; color: #2a9ba8;
  padding: 4px 0 2px; }
.sim-wizard .sim-dim th { width: 70px; text-align: left; font-weight: normal; padding: 3px 6px;
  background: #f0f7f5; border: 1px solid #e0eae7; }
.sim-wizard .sim-dim td { padding: 3px 6px; border: 1px solid #e0eae7; }
.sim-wizard .sim-dim td.u { width: 34px; color: #707070; background: #f7faf9; }
.sim-wizard .sim-dim input { width: 150px; }
.sim-wizard .sim-hint { color: #707070; font-size: 11px; margin: 4px 0 0; }
.sim-wizard .sim-step textarea { width: 100%; max-width: 760px; }
/* prev / next buttons */
.sim-wizard .sim-buttons { display: flex; align-items: center; gap: 14px; margin: 22px 0 6px; }
.sim-wizard .sim-buttons form { margin: 0; }
.sim-wizard .btn.sim-back { background: #8a9a95; }
.sim-wizard .btn.sim-next { background: #009f8c; }
.sim-wizard .btn.sim-back:hover, .sim-wizard .btn.sim-next:hover { background: #F39900; }
/* confirm + result read-back */
.sim-wizard .sim-confirm-head h4, .sim-wizard .sim-customer { margin: 6px 0; }
.sim-wizard .sim-customer { padding: 10px 12px; background: #f0f7f5; border: 1px solid #d6e7e2;
  border-radius: 3px; }
.sim-wizard .sim-customer p { margin: 2px 0; }
.sim-wizard .sim-control { font-weight: bold; color: #1b3a2f; margin: 8px 0; }
.sim-wizard .sim-readback { margin: 10px 0; }
.sim-wizard .sim-rb-sec { padding: 8px 0; border-bottom: 1px dashed #d6e7e2; }
.sim-wizard .sim-rb-sec h5 { margin: 8px 0 2px; color: #217c1f; font-size: 100%; }
.sim-wizard .sim-rb-fig { display: block; margin: 6px 0; border: 1px solid #e3ebe8; }
.sim-wizard .sim-rb-val { margin: 4px 0; line-height: 1.7; }
.sim-wizard .sim-rb-demands { margin: 4px 0; padding: 8px; background: #fafcfb;
  border: 1px solid #e0eae7; white-space: pre-wrap; font-family: inherit; }
.sim-wizard .sim-start-list { margin: 8px 0 8px 1.4em; line-height: 1.8; }
.sim-wizard .sim-done { line-height: 1.8; }

/* 続350 DEF-031: 利用規約の条文番号が画面から消えていた。
   旧 (https://shop.losecon.co.jp/create-account/terms・2026-07-26 curl 実測) は
   CSS を 1 つも読まない生ページで、番号は条文テキストそのものに入っている
   (上位 = 「1. 」/ 下位 = 「(1)」)。新は番号を <ol> のマーカーに委ねているが、
   L40 のベースリセット `ul, ol, dl { list-style-type: none }` に潰されて消えていた。
   list-style を復活させると L40 の意図 (旧 common.css 由来) を壊すため、
   terms 専用 wrapper (.term-body・全 template で 1 箇所のみ使用) に scope した
   counter で描画する。上位/下位の別は旧の実文面と 1 対 1 で照合して決めた
   (照合対象 = 旧 8 リスト・うち「3. パスワードの管理」配下のみ (1) 形式)。 */
.term-body ol { counter-reset: termnum; margin: 0 0 1em 2.2em; }
.term-body ol > li { counter-increment: termnum; position: relative; }
.term-body ol > li::before { content: counter(termnum) ". "; position: absolute; left: -2.2em; }
.term-body ol.paren > li::before,
.term-body ol ol > li::before { content: "(" counter(termnum) ")"; }

/* 続350 DEF-030 (2): 検索結果の「並び替え」欄が旧は右寄せ・新は左寄せだった原因は、
   旧 layout.css の user_navi 系 4 規則が theme.css へ 1 つも移植されていなかったこと
   (移植前の grep 実測 = "style_navi" 0 hit)。旧本番が現に配信している CSS から verbatim 移植:
     https://shop.losecon.co.jp/resources/c_media/themes/theme_0/css/layout.css:116,117,126
   (2026-07-26 に curl で取得して原文照合。旧箱ソースコピー disco_src の同 file とも一致)
   タブ状の li 系 2 規則 (:118-120) は新 DOM が select 1 個で li を持たないため移植しない。
   B-11 の作法に倣い .search-results-frame へ scope 限定 (global 適用しない)。 */
.search-results-frame .user_navi .style_navi { position: relative; width: 685px; margin-bottom: 3px; padding-bottom: 3px; }
.search-results-frame .user_navi .style_navi p { text-align: right; }
.search-results-frame .user_navi div { margin: 5px 0 10px 0; }

/* B-11 続233: 検索結果カード (旧 layout.css:171-186 verbatim)。旧は global rule だが、
   staging の /c/1/ 型番ページは続222 α 是正 (.cart clear:both) 等で検証済み描画を持つため
   global 適用せず検索ページ (.search-results-frame) に scope 限定 = 検証済みページへの
   bleed 防止 (L-13 教訓)。categoryFrame への class 追加 1 個が唯一の DOM 差 (意図的)。 */
.search-results-frame .itemlist .item .image { display: block; float: left; text-align: center; width: 120px; margin-right: 13px; }
.search-results-frame .itemlist .item .image img { border: 1px solid #EBEBEB; height: 237px; width: 330px; }
.search-results-frame .itemlist .item .data { float: right; width: 330px; }
.search-results-frame .itemlist .item .data h3 { background: url(../img/bg_dotline.png) repeat-x bottom left; margin-bottom: 8px; padding: 3px 0 8px; font-size: 110%; }
.search-results-frame .itemlist .item .data .datalist li { float: left; }
.search-results-frame .itemlist .item .data .datalist li.price { font-weight: bold; color: #DC7A00; }
.search-results-frame .itemlist .item .data .datalist li.maker { width: 60%; text-align: right; }
.search-results-frame .itemlist .item .data .text { margin: 6px 0; }

/* B-2 続233: 会員登録 subFrame STEP (旧 common.css:106 / layout.css:301-302 / checkout.css:88-90 由来。
   .step/.current は旧では checkout.css の page-scoped 読込だったため .cart_contener で scope 付与
   (pagination 等の generic .current への bleed 防止 = L-13 教訓) */
#contents .subFrame { float: right; }
.subFrame .cart_contener { background: url(../img/bg_cart_contener.png) repeat-y; width: 200px; margin-bottom: 15px; }
.cart_contener h2 { background: url(../img/bg_title_cart_contener.png) no-repeat; padding: 9px 9px 6px; text-align: center; font-size: 100%; font-weight: bold; color: #FFF; }
.cart_contener .step { color: #999; height: 20px; padding-top: 5px; padding-left: 15px; border-bottom: 1px solid #DCE1E7; }
.cart_contener .step.current { color: #6D9ADE; font-weight: bold; }
.cart_contener .step img { padding-right: 10px; vertical-align: middle; }

/* ===== 12. 続303 Phase 4: checkout step 2「配送方法」画面 (walk oracle D-4 verbatim)
 *   対象 = app/templates/orders/checkout_shipping.html
 *   P3 (続303 Phase 4 P3) で旧本番 oracle png (matrix-walk-072951-50047/
 *     D-4--base--F2--ja__oracle.png) 実測に基づき全面書き直し:
 *     #1 節見出し = 緑台形バナー (色は oracle 実測 #15886b) + 案内文復元
 *     #2 h1 = 濃灰台形 (oracle 実測 #595656) + 下端 1px 薄灰全幅ライン
 *     #3 配送先 = 複数行・枠なし・選択中は全行赤字・非選択は赤 button + 削除 link
 *     #4 配送方法 table = 選択行 水色highlight (oracle 実測 #e9f4fc) + 縦境界線 +
 *        ヤマト行のみ本文右に到着希望日/時間帯 select を同一行内配置
 *     #5 支払方法 table = 3 行常時表示 (is_overseas 非表示 JS 廃止)
 *     #6 その他 = ベージュ panel + 小型 textarea
 *     #7 CTA = 緑グラデ (oracle 実測 #1c9876→#167a5e) + » 3 連 + 右寄せ
 *   色は oracle png から実測サンプリング (browser screenshot pixel-sample)。
 *   旧本番 CSS 参照 = theme_0/checkout.css (image-based legend/CTA は CSS-only 近似) */
.checkout-heading-wrap {
  border-bottom: 1px solid #ccc; margin: 12px 0 14px; padding-bottom: 8px;
}
.checkout-step2 h1.checkout-heading {
  /* oracle 実測 = 文字幅より広い固定台形 (~245px)。親 .categoryFrame h1 の 705px
     継承も本指定で打ち消す。 */
  display: inline-block; width: 245px; box-sizing: border-box;
  background: #595656; color: #fff;
  font-size: 18px; font-weight: bold;
  padding: 10px 28px 10px 18px; margin: 0;
  -webkit-clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 100%, 0 100%);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 100%, 0 100%);
}
.checkout-step2 fieldset { margin-top: 14px; padding: 0; border: 0;
  background: none; /* §10 汎用 fieldset の灰背景 #f7f8f9 打消し (oracle = 白地) */ }
.checkout-step2 fieldset legend {
  /* 幅は oracle 実測の固定台形 (~245px・.account-form legend 245px と同値)。
     width:auto にすると文字幅に縮む (Codex gate3 P2)。 */
  display: inline-block; width: 245px; box-sizing: border-box;
  background: #15886b; color: #fff;
  font-weight: bold; font-size: 14px; padding: 6px 20px 6px 12px; margin-bottom: 8px;
  -webkit-clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 100%, 0 100%);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 100%, 0 100%);
}
.checkout-step2 .checkout-guide-text { margin: 0 0 8px; font-size: 13px; color: #333; }
.checkout-address-table { width: 100%; border-collapse: collapse; }
.checkout-address-cell { width: 50%; vertical-align: top; padding: 4px 16px 4px 0;
  font-size: 12px; }
.checkout-address-cell.selected { color: #c00; }
.checkout-address-cell.selected p { color: #c00; }
.checkout-address-cell p { margin: 3px 0; }
.checkout-address-cell strong { font-size: 12px; font-weight: normal; }
.checkout-address-cell .checkout-address-spacer { height: 10px; }
.checkout-address-cell .checkout-address-delete { margin-top: 8px; font-size: 12px; }
.checkout-address-cell .checkout-address-delete a,
.checkout-address-cell .checkout-address-delete button {
  background: none; border: none; padding: 0; margin: 0; color: #5999cf;
  text-decoration: underline; cursor: pointer; font-size: 12px; font-family: inherit;
}
.checkout-address-new { margin-top: 8px; text-align: left; font-size: 12px; }
.checkout-address-new a { color: #5999cf; }
a.btn-designate {
  display: inline-block; padding: 4px 14px; background: #e2585a; color: #fff;
  text-decoration: none; font-weight: bold; font-size: 12px; border-radius: 2px;
  margin-bottom: 6px;
}
a.btn-designate:hover { background: #c0392f; }
.checkout-method-table { width: 100%; border-collapse: collapse; margin: 6px 0;
  border: 1px solid #ccc; }
.checkout-step2 .checkout-method-table thead th {
  /* .checkout-step2 前置 = 汎用 th 左寄せ rule より高 specificity (oracle は中央) */
  background: #fff; border-bottom: 1px solid #ccc; border-left: 1px solid #ccc;
  padding: 5px; font-size: 13px; font-weight: bold; text-align: center;
}
.checkout-step2 .checkout-method-table thead th.a-right { text-align: right; }
.checkout-method-table thead th:first-child { border-left: 0; }
.checkout-method-table tbody tr { border-top: 1px solid #e5e5e5; }
.checkout-method-table tbody tr.selected { background: #e9f4fc; }
.checkout-method-table td.method-radio { width: 32px; text-align: center;
  vertical-align: middle; padding: 5px 0 5px 8px; }
.checkout-method-table td.method-icon { width: 72px; text-align: center;
  vertical-align: middle; padding: 5px; }
.checkout-method-table td.method-icon img { max-height: 28px; }
.checkout-method-table td.method-body { vertical-align: middle; padding: 5px 6px; }
.checkout-method-table .method-body-flex {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
}
.checkout-method-table .method-body-text { flex: 1 1 auto; }
.checkout-method-table td.method-body strong { font-size: 13px; font-weight: bold; }
.checkout-method-table td.method-body .small { color: #444; font-size: 12px;
  margin: 2px 0 0 0; line-height: 1.5; }
.checkout-method-table td.method-body .small .attn-red { color: #c00; display: block; }
.checkout-method-delivery-opts {
  flex: 0 0 240px; font-size: 12px; display: none;
}
.checkout-method-delivery-opts > div { margin-bottom: 4px; white-space: nowrap; }
.checkout-method-delivery-opts label { display: inline-block; min-width: 90px; }
.checkout-method-delivery-opts select { max-width: 140px; }
.checkout-method-table td.method-fee { width: 110px; text-align: right;
  color: #c00; font-weight: bold; vertical-align: middle; padding: 5px 8px;
  font-size: 14px; border-left: 1px solid #ccc; }
.checkout-comment-block {
  background: #f5f0e6; border: 1px solid #e2dccb; padding: 12px;
  width: 736px; box-sizing: border-box; /* oracle 実測 ~736px (全幅にしない) */
}
.checkout-comment-block table { width: 100%; border-collapse: collapse; }
.checkout-comment-block td.comment-label { width: 140px; vertical-align: top;
  padding: 4px 8px; font-size: 13px; font-weight: bold; }
.checkout-comment-block td.comment-body { vertical-align: top; padding: 4px 8px; }
.checkout-comment-block .checkout-guide-text { margin: 0 0 6px; }
.checkout-comment-block textarea {
  width: 370px; max-width: 100%; height: 120px; padding: 6px;
  border: 1px solid #cbd4dc; background: #fff; font-family: inherit; font-size: 12px;
}
.checkout-cta { padding-top: 18px; text-align: right; }
.btn-confirm-order {
  background: linear-gradient(#1c9876, #167a5e); color: #fff; font-size: 16px;
  font-weight: bold; padding: 12px 20px 12px 44px; border: none; cursor: pointer;
  border-radius: 3px;
}
.btn-confirm-order .chevrons { margin-left: 10px; letter-spacing: -2px; }
.btn-confirm-order:hover { background: linear-gradient(#188a68, #106a51); }

/* 続305 Sonnet 独立検分 No.8 是正 (+ Fable delta2 P1-1 で selector 是正): #contents
 * .fullFrame li (L120 = disc (1,1,1)) が checkout 進捗バー li に波及して孤立黒丸 dot
 * が出る (oracle には無い)。初版 ul#mainNav li は (1,0,2) で specificity 負けの
 * silent no-op と Fable 実描画実証 → L120 に確実に勝つ (2,1,3) へ。 */
#contents .fullFrame ul#mainNav li { list-style: none; }

/* ===== 13. 続305 D-11 段4「注文内容の確認」画面 (Phase B4・d11_step4_verbatim_spec)
 *   対象 = app/templates/orders/checkout_confirm.html
 *   root div は "checkout-step2 checkout-confirm" の 2 class 併記 (§12 の台形/
 *   ガイド文/legend 土台を継承しつつ、.checkout-confirm scope で段4 専用 override
 *   を後勝ちさせる = 段2 (checkout_shipping.html) の描画は無変更)。
 *   oracle 自己目視 (matrix-walk-162447-67581/D-11--base--F2--ja__oracle.png) 準拠:
 *   赤/緑 2連 button + 赤字注意(右寄せ) + 節内 thead th の薄緑帯+橙編集badge +
 *   全幅商品表(画像列)。h1/legend の固定幅は §12 で 4-6 字想定 (245px) だったため、
 *   段4 のみ長い label (7-9 字) 向けに widen (oracle 実測 px 不明・overflow 回避の
 *   目視安全マージンで暫定値 = Opus Phase C の実描画 pair で要最終調整)。 */
.checkout-confirm h1.checkout-heading { width: 300px; }
.checkout-confirm fieldset legend.legend-wide { width: 360px; }

/* 節内 thead th (配送先/配送方法/ご注文者情報/支払方法/注文コメント) = 薄緑帯 +
 * 中央寄せ + 右に橙 badge 編集 link (oracle 目視: 商品表/お届け先系の外側 legend
 * = §12 の緑台形 (大) と別の内側見出し)。 */
.checkout-confirm .confirm-section-th {
  background: #eaf5f0; text-align: center;
  padding: 6px 8px !important;
}

/* 編集 link = 橙背景 badge 風白字小 (旧 GP zen_cart class="edit" 相当)。§11a の
 * a.edit-link (地色のみ) を段4 scope でのみ badge 化 (他画面は不変)。 */
.checkout-confirm .edit-link {
  display: inline-block; background: #f60; color: #fff; border-radius: 2px;
  padding: 1px 8px; font-size: 11px; font-weight: normal; text-decoration: none;
  vertical-align: middle;
}
.checkout-confirm .edit-link:hover { background: #de5400; color: #fff; }

/* 見積書 button = 赤系 (旧 btn_estimate.png 相当)。§8 .form-button-alt (落ち着いた
 * 副次色) を段4 scope でのみ赤に override・他画面の .form-button-alt は不変。
 * 「注文する」button は §12 .btn-confirm-order (緑グラデ+chevrons) を素通し再利用
 * (段2 CTA と同色系 = oracle の緑 button と一致)。 */
/* 続307 §2.1 Phase A3 (i): 旧 disco_src theme_0/css/checkout.css L77
 * `.button { text-align: right; }` verbatim = 右寄せ (旧 a-center 中央寄せは非 verbatim)。 */
.checkout-confirm .bottom_navi { padding-top: 15px; text-align: right; }
.checkout-confirm .bottom_navi form { margin: 0 6px; }
.checkout-confirm .form-button-alt {
  background-color: #c00; border-color: #900; color: #fff;
  font-size: 14px; padding: .6rem 2rem;
}
.checkout-confirm .form-button-alt:hover { background-color: #900; }

/* 赤字注意 2 行 (旧本番 shop_lc DB dump master_translation id=423 TEXT_ORDER
 * 2014-10-20 update 済 = popup 案内 2 行 verbatim) = 右寄せ (oracle 準拠)。
 * 緑字通知文 (注文メール送付先の下) も同 scope で定義。 */
.checkout-confirm .confirm-caution { color: #c00; font-size: 12px; margin-top: 8px; text-align: right; }
.checkout-confirm .confirm-success-note { color: #090; }

/* 商品表 (§A.6): 画像列 75px + 全幅 (categoryFrame 幅いっぱい)。dataT 既定 (§8)
 * は width:705px 固定だが template 側 style="width:100%" (inline) が優先されるため
 * ここでは列幅の補助 (画像セル/オプション行の余白) のみ調整する。
 * 続305 pair 自己目視是正: td:first-child center は商品表 (.confirm-products) 限定に
 * scope する — 無印 .dataT 全体に当てると 1 列 table (配送先/請求先の住所ブロック)
 * の td まで中央寄せになり oracle (左寄せ) と乖離する実描画バグが出た。 */
.checkout-confirm .confirm-products td:first-child { text-align: center; vertical-align: middle; }
.checkout-confirm .confirm-products td img { max-width: 60px; height: auto; display: inline-block; }

/* A.14 右 sidebar 空き余白解消: account-form/checkout-form 側に段4 を狭める幅
 * 制約は theme.css 上に存在しない (§11a-3 の .checkout-form .form-list grid は
 * 段4 で dl.form-list を使わないため無関係) が、dataT 本体は style="width:100%"
 * (inline) で親幅へ確実に追従させる安全網として !important 化しておく
 * (万一 script 差し込み等で class 側 width が競合しても崩れない)。 */
.checkout-confirm .dataT { width: 100% !important; }

/* ===== 14. 続306 §2.1 Phase A: 旧本番 button 画像 asset 流用 (KO 是正 #10「ボタンの
 *   デザインや位置がまだ違う」への直接是正)。対象 = checkout_confirm.html 段4 上下段
 *   (見積書/注文する 各2連) + checkout_shipping.html 段2 CTA (注文内容を確認する)。
 *   button 本体は画像化 (旧 disco_src btn_estimate/btn_order/btn_checkout_confirm.png
 *   224x43 verbatim) し hover は JS (static/site/js/legacy_btn_hover.js) で src swap。
 *   spec = scratchpad/button_asset_migration_spec_2026-07-17.md §C.4/§C.5。
 *   既存 .form-button-alt / .btn-confirm-order / .chevrons は他画面 (cart.html /
 *   estimate_history.html / order_placed.html / contact_confirm.html 等) で使用中の
 *   ため削除しない。段4/段2 の当該箇所のみ class を .btn-legacy に切替。 */
.btn-legacy {
  display: inline-block;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  line-height: 0;
}
.btn-legacy img { display: block; width: 224px; height: 43px; }
.btn-legacy:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-legacy + .btn-legacy { margin-left: 12px; } /* 2 連時の間隔 (旧 oracle 目視で調整) */

/* ===== 15. 続310 KO 是正 (a)+(第2波)「入力後の緑」+「他のバリデーション」: 旧本番
 *   SpryValidationTextField.css の状態規則 verbatim 移植 (2026-07-19 curl 採取)。
 *   状態 class は dd (旧 widget container 相当) に spry_parity.js が付け外しする:
 *   Valid = 緑 #B8F5B1 / Required・MinChars・InvalidFormat = 赤 #FF9F9F +
 *   dd 内の対応 message span (#CC3333) を inline 表示。message span は既定 hidden
 *   (旧 CSS と同じ機構)。旧 widget の無い欄 (部課名/FAX/携帯等) は JS が触らない
 *   ため恒久 hidden のまま = 旧 verbatim。
 *   Round 7 の CSS :valid 方式は「空欄も緑」「iOS で緑ならず」の両端破綻が KO 実機
 *   で実証され撤去済み。 */
.form-list dd .textfieldRequiredMsg,
.form-list dd .textfieldMinCharsMsg,
.form-list dd .textfieldInvalidFormatMsg { display: none; }
.form-list dd.textfieldRequiredState .textfieldRequiredMsg,
.form-list dd.textfieldMinCharsState .textfieldMinCharsMsg,
.form-list dd.textfieldInvalidFormatState .textfieldInvalidFormatMsg {
  display: inline; color: #CC3333; /* 旧 CSS verbatim */
}
.form-list dd.textfieldValidState input,
.form-list dd.textfieldValidState textarea { background-color: #B8F5B1; }
.form-list dd.textfieldRequiredState input,
.form-list dd.textfieldMinCharsState input,
.form-list dd.textfieldInvalidFormatState input {
  background-color: #FF9F9F; /* 旧 CSS verbatim (invalid 系 3 状態共通) */
}
/* focus 中は base の :focus 黄 (#FEFCE7 = 旧 checkout.css .input-text:focus
 * verbatim) を優先 = 旧と同じ「focus 黄 → blur/確定後に色」遷移。上の状態色
 * (0,2,2) と §11 :focus (0,2,2) が同 specificity で後勝ちになるため明示 override。 */
.form-list dd.textfieldValidState input:focus,
.form-list dd.textfieldValidState textarea:focus,
.form-list dd.textfieldRequiredState input:focus,
.form-list dd.textfieldMinCharsState input:focus,
.form-list dd.textfieldInvalidFormatState input:focus { background-color: #FEFCE7; }