@charset "utf-8";
/*
 * VANITAS FLOWER - usces_cart.css (子テーマ上書き)
 *
 * 対象ページ: 商品詳細ページ / カートページ / 会員（マイページ・ログイン）ページ /
 *             商品複合検索結果ページ / 購入完了ページ
 *
 * 親テーマ（welcart_basic/usces_cart.css）を functions.php で先に読み込んだ上で、
 * このファイルは "上書き専用" として最小限のセレクタのみ記述しています。
 * カラー・フォントの基本トークンは style.css の :root 変数を参照してください。
 */

/* ---- 商品詳細ページ #itempage ---- */
#itempage #img-box {
	border: none;
}

#itempage .itemimg,
#itempage .itemsubimg {
	border: 1px solid var(--border-hairline, rgba(10,10,10,0.08));
	background-color: var(--vns-white, #fff);
}

#itempage .itemcode {
	font-family: var(--font-jp-body, 'Noto Sans JP', sans-serif);
	color: var(--vns-charcoal, #6B6660);
}

/* ---- 商品詳細: SKU選択・カート投入エリア (item-info .c-box / .skubutton / .quantity / .itemsoldout) ----
 * 親テーマ実物 usces_cart.css の初期値はオレンジ系 (#ff8c00 / hover #ffa500)。
 * VANITAS FLOWER のブランドトーン（インク＋ゴールド）に合わせて上書きする。
 * 参照: wc_templates/wc_item_single.php の .skuform > .field > .c-box 構造
 */
#itempage .item-info .c-box {
	padding: 0;
	clear: both;
	text-align: right;
}

#itempage .item-info .quantity {
	display: inline-block;
	margin-bottom: 5px;
}

#itempage .item-info .quantity input.skuquantity {
	width: 60px !important;
	height: 40px;
	margin: 0 .357143em;
	padding: .357143em;
	border: 1px solid var(--border-subtle, rgba(10,10,10,0.14)) !important;
	border-radius: 0 !important;
	background-color: var(--vns-white, #fff);
	color: var(--vns-ink, #0A0A0A);
	text-align: center;
}

#itempage .item-info .skubutton {
	padding: .714286em 2.142856em;
	transition: .3s ease all;
	border: none;
	border-radius: 0 !important;
	background-color: var(--vns-ink, #0A0A0A) !important;
	color: var(--vns-ivory, #F7F5F0) !important;
	font-family: var(--font-jp-body, 'Noto Sans JP', sans-serif);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-align: center;
}

#itempage .item-info .skubutton:hover {
	background-color: var(--vns-gold, #B89968) !important;
	color: var(--vns-ink, #0A0A0A) !important;
	cursor: pointer;
}

#itempage .item-info .incart-btn {
	text-align: left;
}

#itempage .item-info .itemsoldout {
	color: var(--vns-charcoal, #6B6660);
	font-family: var(--font-jp-head, 'Shippori Mincho', serif);
	font-weight: 600;
	letter-spacing: .05em;
	text-align: right;
}

#itempage .item-info .skuname {
	font-family: var(--font-jp-head, 'Shippori Mincho', serif);
	font-weight: 600;
	color: var(--vns-ink, #0A0A0A);
}

#itempage .item-info dl.item-option dt,
#itempage .item-info dl.item-option dd {
	font-family: var(--font-jp-body, 'Noto Sans JP', sans-serif);
	color: var(--vns-graphite, #3A3632);
}

/* ---- カートページ #cart_table ---- */
#cart_table th {
	background-color: var(--vns-ink, #0A0A0A) !important;
	color: var(--vns-ivory, #F7F5F0) !important;
	font-weight: 400;
	letter-spacing: 0.04em;
}

#cart_table,
#cart_table th,
#cart_table td {
	border-color: var(--border-hairline, rgba(10,10,10,0.08)) !important;
}

#cart_table td.productname a {
	color: var(--vns-ink, #0A0A0A);
}

#cart .action input.delButton {
	background-color: transparent !important;
	color: var(--vns-charcoal, #6B6660) !important;
	border: 1px solid var(--border-subtle, rgba(10,10,10,0.14)) !important;
}

#cart .action input.delButton:hover {
	background-color: var(--vns-ink, #0A0A0A) !important;
	color: var(--vns-ivory, #F7F5F0) !important;
}

/* ---- ポイント／クーポン ---- */
#point_table td.point-btn,
#coupon_table td .use_coupon_button {
	background-color: var(--vns-ink, #0A0A0A) !important;
	color: var(--vns-ivory, #F7F5F0) !important;
	border-radius: 0 !important;
}

#point_table td.point-btn:hover,
#coupon_table td .use_coupon_button:hover {
	background-color: var(--vns-gold, #B89968) !important;
	color: var(--vns-ink, #0A0A0A) !important;
}

/* ---- 内容確認ページ #confirm_table ---- */
#confirm_table th {
	background-color: var(--vns-ink, #0A0A0A) !important;
	color: var(--vns-ivory, #F7F5F0) !important;
}

#confirm_table,
#confirm_table th,
#confirm_table td {
	border-color: var(--border-hairline, rgba(10,10,10,0.08)) !important;
}

#confirm_table .ttl h3 {
	font-family: var(--font-jp-head, 'Shippori Mincho', serif);
	color: var(--vns-ink, #0A0A0A);
}

/* ---- 購入完了ページ #wc_ordercompletion ---- */
#wc_ordercompletion h3 {
	font-family: var(--font-jp-head, 'Shippori Mincho', serif);
	color: var(--vns-ink, #0A0A0A);
	border-bottom: 1px solid var(--border-hairline, rgba(10,10,10,0.08));
}

#wc_ordercompletion .send a,
a.redownload_button {
	background-color: var(--vns-ink, #0A0A0A) !important;
	color: var(--vns-ivory, #F7F5F0) !important;
	border-radius: 0 !important;
}

#wc_ordercompletion .send a:hover,
a.redownload_button:hover {
	background-color: var(--vns-gold, #B89968) !important;
	color: var(--vns-ink, #0A0A0A) !important;
}

/* ---- 会員ページ全般（ログイン／新規会員登録／マイページ／パスワード再発行等） ----
 * v1.5.0: vanitas_member_register.html のデザインをベースにブラッシュアップ。
 * レイアウト・タイポグラフィは style.css の body.vns-member-page 側に記述し、
 * ここではフォーム部品（input/select/table/ボタン）の詳細を上書きする。
 */
.member_page_title {
	font-family: var(--font-jp-head, 'Shippori Mincho', serif);
	color: var(--vns-ink, #0A0A0A);
}

/* body.vns-member-page 配下（新テンプレートを使う新規登録・ログイン）は
   見出し下の罫線を style.css の .vns-member-rule に一本化するため、
   親テーマ由来の border-bottom は打ち消す。マイページ等（旧テンプレート）
   は従来どおりヘアラインを表示する。 */
body.vns-member-page .member_page_title {
	border-bottom: none;
}

body:not(.vns-member-page) .member_page_title {
	border-bottom: 1px solid var(--border-hairline, rgba(10,10,10,0.08));
	padding-bottom: 0.6em;
}

/*
 * v1.5.2: 新デザイン適用ページ（body.vns-member-page = ログイン/新規登録）
 * では .loginbox に白背景・枠線を付けず、ページ背景と統一する。
 * マイページ等（vns-member-page が付かない旧テンプレートページ）では
 * 従来通り白背景の箱として表示する。
 */
body:not(.vns-member-page) #wc_login .loginbox,
body:not(.vns-member-page) #wc_member .loginbox {
	background-color: var(--vns-white, #fff);
	border: 1px solid var(--border-hairline, rgba(10,10,10,0.08));
}

body.vns-member-page #wc_login .loginbox,
body.vns-member-page #wc_member .loginbox {
	background-color: transparent;
	border: none;
}

/*
 * v1.5.3: ログイン/新規登録フォームの各パーツ（入力欄・ログインボタン・
 * 「新規ご入会はこちら」ボックス・ボタン）の幅がそれぞれ別々に指定されて
 * おり、統一感がなかった不具合の修正。
 *
 * 主な原因は、親テーマ welcart_basic/usces_cart.css の
 *   @media (min-width: 55em) { #wc_login .loginbox { width: 50%; } }
 * が id 1つの詳細度で .loginbox（ログインフォーム+新規登録誘導全体を
 * 囲む要素）の幅を画面幅の50%に固定していたこと。結果、内側の
 * 入力欄・ボタンがすべて実質150px程度まで圧縮され、外側の白い箱
 * （.whitebox, 幅420px固定）とサイズが合わず不統一に見えていた。
 * また #wc_login .loginbox .new-entry { background-color:#efefef;
 * padding:20px; margin:10px 0; }（id1つ+class2つ）というグレー背景の
 * 指定も残っており、v1.5.2で意図した「背景統一」が新規登録ボックスの
 * 内側だけ効いていなかった。
 *
 * 対応: 親テーマの .loginbox 幅指定を解除し、style.css で定義している
 * .member-box / .new-entry の外枠幅（380px）と揃える。入力欄・
 * ログインボタン・新規登録ボタンをすべて「幅100%（最大380px）」に
 * 統一し、縦に並ぶすべてのパーツが同じ横幅の1本のラインに揃うようにする。
 */
body.vns-member-page #wc_login .loginbox,
body.vns-member-page #wc_member .loginbox {
	width: 100% !important;
	max-width: 380px !important;
	margin: 0 auto !important;
	padding: 0 !important;
}

#wc_login .loginbox input.loginmail,
#wc_login .loginbox input.loginpass,
#wc_member .loginbox input.loginmail,
#wc_member .loginbox input.loginpass {
	border: 1px solid var(--border-subtle, rgba(10,10,10,0.14)) !important;
	border-radius: 0 !important;
}

body.vns-member-page .loginbox .member-box.vns-login-box,
body.vns-member-page .loginbox .vns-field,
body.vns-member-page .loginbox p.submit,
body.vns-member-page .loginbox p.nav {
	width: 100% !important;
}

#wc_login .loginbox #member_login,
#wc_member .loginbox #member_login {
	background-color: var(--vns-ink, #0A0A0A) !important;
	color: var(--vns-ivory, #F7F5F0) !important;
	border-radius: 0 !important;
}

#wc_login .loginbox #member_login:hover,
#wc_member .loginbox #member_login:hover {
	background-color: var(--vns-gold, #B89968) !important;
	color: var(--vns-ink, #0A0A0A) !important;
}

/*
 * v1.5.1/v1.5.3: 親テーマ welcart_basic/usces_cart.css の
 *   #wc_login .loginbox .new-entry #nav a,
 *   #wc_member .loginbox .new-entry #nav a
 * が id 2つ + class 2つ + 要素1つの高詳細度セレクタで
 * 「新規ご入会はこちら」ボタンをオレンジ色(#ff8c00)に強制しており、
 * 子テーマ側の .vns-btn--outline(class 1つ)だけでは上書きできず
 * 本番画面でオレンジ色のまま表示されていた不具合の修正。
 * 同等以上の詳細度を持つセレクタで明示的に上書きする。
 */
body.vns-member-page #wc_login .loginbox .new-entry #nav a,
body.vns-member-page #wc_member .loginbox .new-entry #nav a,
#wc_login .loginbox .new-entry #nav a.vns-btn,
#wc_member .loginbox .new-entry #nav a.vns-btn {
	background-color: transparent !important;
	color: var(--vns-ink, #0A0A0A) !important;
	border: 1px solid var(--vns-ink, #0A0A0A) !important;
	border-radius: 0 !important;
}

#wc_login .loginbox .new-entry #nav a.vns-btn:hover,
#wc_member .loginbox .new-entry #nav a.vns-btn:hover {
	background-color: var(--vns-ink, #0A0A0A) !important;
	color: var(--vns-ivory, #F7F5F0) !important;
}

/*
 * v1.5.3: 親テーマ #wc_login .loginbox .new-entry { background-color:
 * #efefef; padding:20px; margin:10px 0; }（id1つ+class2つ、v1.5.2の
 * body.vns-member-page .vns-newentry-box.new-entry より詳細度が高い）
 * によりグレー背景が残っていた不具合の修正。同等以上の詳細度で
 * 明示的に透明化する。
 */
body.vns-member-page #wc_login .loginbox .new-entry,
body.vns-member-page #wc_member .loginbox .new-entry {
	margin: 40px 0 0 !important;
	padding: 32px 0 0 !important;
	background-color: transparent !important;
	border-top: 1px solid var(--border-hairline, rgba(10,10,10,0.08));
}

/*
 * v1.5.3: ログインボタン・新規ご入会ボタンの横幅を、入力欄と同じ
 * 幅100%（最大380px）に統一。従来は #member_login が min-width:220px、
 * 「新規ご入会はこちら」ボタンが min-width:240px と別々の固定幅指定で、
 * かつ入力欄の幅（親テーマの50%制限により約150px）とも揃っていな
 * かったため、フォーム全体の横幅がガタガタに見えていた。
 */
body.vns-member-page .loginbox #member_login,
body.vns-member-page .loginbox .new-entry #nav a.vns-btn {
	display: block !important;
	width: 100% !important;
	max-width: 380px !important;
	margin: 0 auto !important;
	box-sizing: border-box !important;
	text-align: center !important;
}

.member_submenu a {
	color: var(--vns-charcoal, #6B6660);
	border-color: var(--border-hairline, rgba(10,10,10,0.08));
}

.member_submenu a:hover {
	color: var(--vns-gold-deep, #8F7748);
}

/* -- 新デザイン適用ページ（body.vns-member-page）専用のフォーム上書き --
 * 対象: #newmember（新規会員登録）/ .loginbox（ログイン・パスワード再発行）
 * table.customer_form / input / select / em（必須マーク） 等。
 */
body.vns-member-page .loginbox input.loginmail,
body.vns-member-page .loginbox input.loginpass {
	height: 44px;
	width: 100%;
	max-width: 100%;
	padding: 0 14px;
	background-color: var(--vns-white, #fff);
	border: 1px solid var(--border-subtle, rgba(10,10,10,0.14)) !important;
	border-radius: 0 !important;
	font-family: var(--font-jp-body, 'Noto Sans JP', sans-serif);
	font-size: 13.5px;
	color: var(--vns-ink, #0A0A0A);
}

body.vns-member-page .loginbox input.loginmail:focus,
body.vns-member-page .loginbox input.loginpass:focus {
	outline: none;
	border-color: var(--vns-gold, #B89968) !important;
	box-shadow: 0 0 0 3px var(--vns-gold-wash, #F0E9DA);
}

body.vns-member-page .loginbox p.forgetmenot input[type="checkbox"] {
	margin-right: 6px;
	vertical-align: middle;
}

body.vns-member-page .loginbox p.submit {
	margin-top: 26px;
	text-align: center;
}

body.vns-member-page .loginbox input#member_login,
body.vns-member-page .loginbox input.member_login_button {
	display: inline-block;
	min-width: 220px;
	height: auto;
	padding: 16px 40px !important;
	background-color: var(--vns-ink, #0A0A0A) !important;
	color: var(--vns-ivory, #F7F5F0) !important;
	border: 1px solid var(--vns-ink, #0A0A0A) !important;
	border-radius: 0 !important;
	font-family: var(--font-jp-body, 'Noto Sans JP', sans-serif);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.2em;
}

body.vns-member-page .loginbox input#member_login:hover,
body.vns-member-page .loginbox input.member_login_button:hover {
	background-color: var(--vns-gold, #B89968) !important;
	border-color: var(--vns-gold, #B89968) !important;
	color: var(--vns-ink, #0A0A0A) !important;
	cursor: pointer;
}

/* -- 新規会員登録：table.customer_form -- */
body.vns-member-page table.customer_form {
	width: 100%;
	border-collapse: collapse;
	/* table-layout:fixed が必須の理由（本番実機検証で判明）:
	   デフォルトのauto（内容に応じた自動）レイアウトのままだと、
	   #name_row/#furikana_row のtd（width:50%指定）と、他の行の
	   colspan="2"のtd（幅指定なし）が同じテーブル内に混在するため、
	   ブラウザの列幅自動計算アルゴリズムが列幅を歪めてしまい、
	   結果としてth（見出し列）が極端に狭くなる・姓名の幅が
	   ページ全体幅を無視した小さいサイズになる等の崩れが発生した。
	   table-layout:fixedにすることで列幅計算が最初の行の指定幅
	   （th 220px + td 50% + 50%）に基づいて確定し、以降の行も
	   その列幅を継承するため、崩れなく安定して姓名/フリガナが
	   ちょうど50:50、他の全行も正しい幅で表示される。 */
	table-layout: fixed;
}

body.vns-member-page table.customer_form tr {
	border-bottom: 1px solid var(--border-hairline, rgba(10,10,10,0.08));
}

body.vns-member-page table.customer_form tr:last-child {
	border-bottom: none;
}

body.vns-member-page table.customer_form th {
	width: 220px;
	padding: 22px 26px;
	background-color: var(--vns-paper, #F2EEE5);
	border: none;
	font-family: var(--font-jp-head, 'Shippori Mincho', serif);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.08em;
	color: var(--vns-graphite, #3A3733);
	text-align: left;
	vertical-align: middle;
}

body.vns-member-page table.customer_form td {
	padding: 18px 26px;
	background-color: var(--vns-snow, #FBFAF6);
	border: none;
	font-size: 13px;
	color: var(--vns-ink, #0A0A0A);
	vertical-align: middle;
}

body.vns-member-page table.customer_form em {
	margin-right: 6px;
	color: var(--vns-gold, #B89968) !important;
	font-style: normal;
	font-size: 11px;
	vertical-align: middle;
}

body.vns-member-page table.customer_form input[type="text"],
body.vns-member-page table.customer_form input[type="password"],
body.vns-member-page table.customer_form input[type="tel"],
body.vns-member-page table.customer_form input[type="email"] {
	height: 44px;
	width: 100%;
	max-width: 320px;
	padding: 0 14px;
	background-color: var(--vns-white, #fff);
	border: 1px solid var(--border-subtle, rgba(10,10,10,0.14)) !important;
	border-radius: 0 !important;
	font-family: var(--font-jp-body, 'Noto Sans JP', sans-serif);
	font-size: 13.5px;
	color: var(--vns-ink, #0A0A0A);
}

body.vns-member-page table.customer_form input#mailaddress1,
body.vns-member-page table.customer_form input#mailaddress2,
body.vns-member-page table.customer_form input#address1,
body.vns-member-page table.customer_form input#address2,
body.vns-member-page table.customer_form input#address3 {
	max-width: 420px;
}

body.vns-member-page table.customer_form input:focus,
body.vns-member-page table.customer_form select:focus {
	outline: none;
	border-color: var(--vns-gold, #B89968) !important;
	box-shadow: 0 0 0 3px var(--vns-gold-wash, #F0E9DA);
}

body.vns-member-page table.customer_form select.pref {
	height: 44px;
	max-width: 320px;
	padding: 0 36px 0 14px;
	background-color: var(--vns-white, #fff);
	border: 1px solid var(--border-subtle, rgba(10,10,10,0.14)) !important;
	border-radius: 0 !important;
	font-family: var(--font-jp-body, 'Noto Sans JP', sans-serif);
	font-size: 13.5px;
	color: var(--vns-ink, #0A0A0A);
}

/* -- 姓名／フリガナの2カラムレイアウト（#name_row / #furikana_row） --
   Welcart本体が出力する姓側<td>には class="name_td" が付与されるが、
   フリガナ側（Familly/Given name）の<td>にはclassが付かないため、
   セレクタは class ではなく tr#name_row / tr#furikana_row を基準にし、
   姓・名／セイ・メイのどちらの<td>にも同じ幅ルールを適用する。
   注意: tr自体をdisplay:flexにするとtable-row-groupのテーブル計算
   モデルから外れ、colspan="2"の他の行（郵便番号行など）と混在した
   実際のtable幅計算でtr自体がテーブル幅を無視した縮小サイズに
   なってしまう不具合が確認された（本番実機検証で発覚）。
   そのため tr / td は table 標準の display（table-row / table-cell）
   を維持したまま、td側に width:50% を明示指定して幅を50:50に固定する
   方式に変更した。box-sizing:border-box と合わせることで、
   padding/borderを含めた実測幅も文字数に関係なく完全に一致する。 */
body.vns-member-page table.customer_form tr#name_row td,
body.vns-member-page table.customer_form tr#furikana_row td {
	display: table-cell;
	width: 50%;
	max-width: none;
	box-sizing: border-box;
	padding: 18px 26px;
	background-color: var(--vns-snow, #FBFAF6);
}

body.vns-member-page table.customer_form tr#name_row td + td,
body.vns-member-page table.customer_form tr#furikana_row td + td {
	border-left: 1px solid var(--border-hairline, rgba(10,10,10,0.08));
}

body.vns-member-page table.customer_form td.name_td .member_name,
body.vns-member-page table.customer_form td.name_td .member_furigana,
body.vns-member-page table.customer_form tr#furikana_row td .member_name,
body.vns-member-page table.customer_form tr#furikana_row td .member_furigana {
	display: block;
	margin: 0 0 6px;
	font-size: 11px;
	letter-spacing: 0.1em;
	color: var(--vns-stone, #A8A29A);
}

body.vns-member-page table.customer_form tr#name_row input[type="text"],
body.vns-member-page table.customer_form tr#furikana_row input[type="text"] {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

/* -- 郵便番号検索ボタン -- */
body.vns-member-page table.customer_form input#search_zipcode,
body.vns-member-page table.customer_form input.search-zipcode {
	height: 44px;
	margin-left: 10px;
	padding: 0 18px !important;
	background-color: transparent !important;
	color: var(--vns-graphite, #3A3733) !important;
	border: 1px solid var(--border-subtle, rgba(10,10,10,0.14)) !important;
	border-radius: 0 !important;
	font-size: 12px;
	letter-spacing: 0.06em;
}

body.vns-member-page table.customer_form input#search_zipcode:hover,
body.vns-member-page table.customer_form input.search-zipcode:hover {
	background-color: var(--vns-ink, #0A0A0A) !important;
	color: var(--vns-ivory, #F7F5F0) !important;
	cursor: pointer;
}

/* -- パスワードポリシー案内文（wel_password_policy_message） -- */
body.vns-member-page table.customer_form td .password_policy,
body.vns-member-page table.customer_form td small {
	display: block;
	margin-top: 8px;
	font-size: 11px;
	letter-spacing: 0.03em;
	color: var(--vns-stone, #A8A29A);
}

/* -- 新規登録ボタン（usces_newmember_button の input[type=submit]） -- */
body.vns-member-page .send input[type="submit"],
body.vns-member-page .send input[name="regmember"] {
	display: inline-block;
	min-width: 260px;
	padding: 18px 60px !important;
	background-color: var(--vns-ink, #0A0A0A) !important;
	color: var(--vns-ivory, #F7F5F0) !important;
	border: 1px solid var(--vns-ink, #0A0A0A) !important;
	border-radius: 0 !important;
	font-family: var(--font-jp-body, 'Noto Sans JP', sans-serif);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.24em;
}

body.vns-member-page .send input[type="submit"]:hover,
body.vns-member-page .send input[name="regmember"]:hover {
	background-color: var(--vns-gold, #B89968) !important;
	border-color: var(--vns-gold, #B89968) !important;
	color: var(--vns-ink, #0A0A0A) !important;
	cursor: pointer;
}

@media (max-width: 62.4375em) {
	body.vns-member-page table.customer_form,
	body.vns-member-page table.customer_form tbody,
	body.vns-member-page table.customer_form tr,
	body.vns-member-page table.customer_form th,
	body.vns-member-page table.customer_form td {
		display: block;
		width: auto;
	}

	body.vns-member-page table.customer_form th {
		padding: 18px 20px 6px;
	}

	body.vns-member-page table.customer_form td {
		padding: 8px 20px 20px;
	}

	/* スマートフォンでは全ての入力欄（姓名・フリガナ・郵便番号・都道府県・
	   市区郡町村・番地・ビル名・電話番号・FAX番号・メールアドレス×2・
	   パスワード×2）を横幅100%・同一の高さ・同一のpaddingに統一し、
	   フォームサイズのバランスを揃える。select.prefも同じ幅ルールに含める。
	   input#mailaddress1/#mailaddress2/#address1/#address2/#address3 は
	   PC用に id セレクタ（詳細度が高い）で max-width:420px を指定して
	   いるため、このメディアクエリ内でも同じ id セレクタを明示して
	   width:100%; max-width:100% を上書きする（詳細度が同等でも、
	   CSS内で後から書かれた宣言が優先されるルールを利用）。 */
	body.vns-member-page table.customer_form input[type="text"],
	body.vns-member-page table.customer_form input[type="password"],
	body.vns-member-page table.customer_form input[type="tel"],
	body.vns-member-page table.customer_form input[type="email"],
	body.vns-member-page table.customer_form select.pref,
	body.vns-member-page table.customer_form input#mailaddress1,
	body.vns-member-page table.customer_form input#mailaddress2,
	body.vns-member-page table.customer_form input#address1,
	body.vns-member-page table.customer_form input#address2,
	body.vns-member-page table.customer_form input#address3 {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}

	/* 姓名（#name_row）／フリガナ（#furikana_row）は、PC版と同様に
	   trをflexにしてth（見出し）を全幅の行として上に出し、
	   td 2つ（姓/名、セイ/メイ）をflex:1 1 0で50:50に等分する。
	   PC用ルール（th { flex:0 0 220px } 等）は上のブロックの
	   `display:block` 一括指定より後にこのメディアクエリが読まれるため
	   ここで明示的に上書きする必要がある。 */
	body.vns-member-page table.customer_form tr#name_row,
	body.vns-member-page table.customer_form tr#furikana_row {
		display: flex;
		flex-wrap: wrap;
	}

	body.vns-member-page table.customer_form tr#name_row th,
	body.vns-member-page table.customer_form tr#furikana_row th {
		flex: 1 1 100%;
		width: 100%;
		box-sizing: border-box;
	}

	body.vns-member-page table.customer_form tr#name_row td,
	body.vns-member-page table.customer_form tr#furikana_row td {
		flex: 1 1 0;
		min-width: 0;
		width: auto;
		box-sizing: border-box;
		padding: 8px 20px 20px;
	}

	body.vns-member-page table.customer_form tr#name_row input[type="text"],
	body.vns-member-page table.customer_form tr#furikana_row input[type="text"] {
		width: 100%;
		max-width: 100%;
	}

	body.vns-member-page .send input[type="submit"],
	body.vns-member-page .send input[name="regmember"] {
		width: 100%;
		min-width: 0;
		padding: 17px 20px !important;
	}
}