@charset "UTF-8";

/* ==========================================================================
   Welcart 共通スタイル（koreii.jp トンマナ合わせ）
   対象：/usces-member/* ・ /usces-cart/* ・ /item/*
   読込：member_01.css と cart_block.css の先頭 @import から
   作成：2026-08-03
   --------------------------------------------------------------------------
   ※ このファイルはテーマ washock の assets/css/ に置く前提。
   ※ PHP には一切触れていない（functions.php の編集不要）。
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. ローカルトークン（base.css の :root を継承しつつ Welcart 用に補完）
   -------------------------------------------------------------------------- */
:root {
	--wc-text: #282830;
	--wc-muted: #767680;
	--wc-line: #e3e3e0;
	--wc-line-strong: #282830;
	--wc-bg-soft: #faf9f5;
	--wc-bg-head: #f4f3ee;
	--wc-radius: 10px;
	--wc-radius-lg: 16px;
	--wc-focus: rgba(247, 147, 30, .25);
}

/* --------------------------------------------------------------------------
   1. レイアウト最大の崩れ要因の修正
      固定ヘッダー(120px)ぶんの body padding-top が、Welcart ページでは
      フッターに出力される global-styles-inline-css の
      `body{padding-top:0px}` に打ち消されて本文がヘッダーに潜っていた。
      詳細度を上げて奪い返す（header.css と同じ値を使用）。
   -------------------------------------------------------------------------- */
html body {
	padding-top: calc(100vw * 120 / 1920);
}

/* --------------------------------------------------------------------------
   2. コンテンツ枠・基本タイポグラフィ
      base.css の body{font-size:24px} が素の table に流れ込んで
      すべてが巨大化していたため、Welcart 内は 16px を基準に戻す。
   -------------------------------------------------------------------------- */
#content {
	max-width: 1080px;
	margin-right: auto;
	margin-left: auto;
	padding: 56px 24px 112px;
	color: var(--wc-text);
	font-size: 16px;
	line-height: 1.8;
}

#content .catbox,
#content .post,
#content .entry {
	width: auto;
	max-width: 100%;
	border-bottom: none; /* .entry の破線を消す */
}

#content p {
	font-size: 16px;
	line-height: 1.8;
	color: var(--wc-text);
}

#content a {
	color: var(--orange);
	text-decoration: none;
}

#content a:hover {
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   3. ページタイトル
   -------------------------------------------------------------------------- */
#content .member_page_title,
#content .cart_page_title,
#content .item_page_title,
#content #wc_cart > h1,
#content #wc_newmemberform > h1,
#content #wc_memberinfo > h1 {
	position: relative;
	left: auto;
	width: auto;
	margin: 0 auto 40px;
	padding-bottom: 20px;
	color: var(--wc-text);
	font-size: 32px;
	font-weight: bold;
	line-height: 1.4;
	text-align: center;
	letter-spacing: .04em;
}

#content .member_page_title::after,
#content .cart_page_title::after,
#content .item_page_title::after,
#content #wc_cart > h1::after,
#content #wc_newmemberform > h1::after,
#content #wc_memberinfo > h1::after {
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 64px;
	height: 5px;
	background-color: var(--yellow);
	border-radius: 3px;
	content: "";
	transform: translateX(-50%);
}

/* Welcart が本文中に出す見出し（h2/h3）をトンマナに寄せる */
#content #inside-cart h2,
#content #customer-info h2,
#content #delivery-info h2,
#content #info-confirm h2,
#content #coml-page h2,
#content #error-page h2,
#content #memberinfo h3,
#content #itempage h3 {
	height: auto;
	margin: 48px 0 20px;
	padding: 0 0 0 16px;
	border-bottom: none;
	border-left: 6px solid var(--yellow);
	background-color: transparent;
	color: var(--wc-text);
	font-size: 20px;
	font-weight: bold;
	line-height: 1.5;
}

#content #confirm_table h3 {
	margin: 0;
	padding: 0;
	border: none;
	color: var(--orange);
	font-size: 16px;
}

/* --------------------------------------------------------------------------
   4. 補足説明ブロック（注意書き）
   -------------------------------------------------------------------------- */
#content div.header_explanation,
#content div.footer_explanation {
	padding: 0;
}

/* 中身が無いとき（空白文字だけのとき）は枠を出さない */
#content div.header_explanation:has(> *) {
	margin-bottom: 32px;
	padding: 24px 28px;
	border: 1px solid var(--wc-line);
	border-radius: var(--wc-radius);
	background-color: var(--wc-bg-soft);
}

#content div.footer_explanation:has(> *) {
	margin-top: 32px;
	padding: 24px 28px;
	border: 1px solid var(--wc-line);
	border-radius: var(--wc-radius);
	background-color: var(--wc-bg-soft);
}

#content div.header_explanation ul,
#content div.footer_explanation ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#content div.header_explanation li,
#content div.footer_explanation li {
	position: relative;
	margin: 0 0 8px;
	padding-left: 20px;
	color: var(--wc-muted);
	font-size: 14px;
	line-height: 1.8;
}

#content div.header_explanation li:last-child,
#content div.footer_explanation li:last-child {
	margin-bottom: 0;
}

#content div.header_explanation li::before,
#content div.footer_explanation li::before {
	position: absolute;
	top: .75em;
	left: 4px;
	width: 6px;
	height: 6px;
	background-color: var(--orange);
	border-radius: 50%;
	content: "";
}

/* --------------------------------------------------------------------------
   5. エラーメッセージ（空のときは何も出さない）
   -------------------------------------------------------------------------- */
#content .error_message,
#content #cart div.error_message,
#content #customer-info .error_message,
#content #info-confirm .error_message,
#content #delivery-info .error_message {
	margin: 0;
	padding: 0;
	color: #d0021b;
	font-size: 15px;
	font-weight: bold;
	line-height: 1.8;
}

#content .error_message:not(:empty) {
	margin-bottom: 24px;
	padding: 16px 20px;
	border: 1px solid #f3c6cc;
	border-left: 5px solid #d0021b;
	border-radius: var(--wc-radius);
	background-color: #fdf3f4;
}

/* --------------------------------------------------------------------------
   6. フォーム部品
   -------------------------------------------------------------------------- */
#content input[type="text"],
#content input[type="email"],
#content input[type="tel"],
#content input[type="number"],
#content input[type="password"],
#content input[type="search"],
#content select,
#content textarea {
	max-width: 100%;
	height: auto;
	margin: 0 8px 0 0;
	padding: 11px 14px;
	border: 1px solid #cfcfc9;
	border-radius: var(--wc-radius);
	background-color: #fff;
	color: var(--wc-text);
	font-family: inherit;
	font-size: 16px;
	line-height: 1.5;
	transition: border-color .2s, box-shadow .2s;
	appearance: none;
	-webkit-appearance: none;
}

#content textarea {
	width: 100%;
	min-height: 160px;
}

#content select {
	padding-right: 40px;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23282830' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 11px 7px;
	cursor: pointer;
}

#content input[type="text"]:focus,
#content input[type="email"]:focus,
#content input[type="tel"]:focus,
#content input[type="number"]:focus,
#content input[type="password"]:focus,
#content input[type="search"]:focus,
#content select:focus,
#content textarea:focus {
	border-color: var(--orange);
	box-shadow: 0 0 0 3px var(--wc-focus);
	outline: none;
}

#content input[type="checkbox"],
#content input[type="radio"] {
	width: 18px;
	height: 18px;
	margin: 0 8px 0 0;
	accent-color: var(--orange);
	vertical-align: -3px;
}

#content label {
	cursor: pointer;
}

#content input.hidden {
	display: none;
}

/* 必須マーク（Welcart は <em>＊</em> を出力） */
#content .customer_form em,
#content #newmember .customer_form em,
#content #memberinfo .customer_form em,
#content #customer-info .customer_form em,
#content #delivery-info .customer_form em {
	margin-right: 6px;
	color: var(--orange);
	font-style: normal;
	font-weight: bold;
}

/* 姓・名／セイ・メイのラベル */
#content .member_name,
#content .member_furigana {
	display: inline-block;
	margin-right: 8px;
	padding-left: 0;
	color: var(--wc-muted);
	font-size: 13px;
	white-space: nowrap;
}

#content .name_td .member_name {
	padding-left: 0;
}

/* Welcart が入力欄の後ろに素のテキストで出す「入力例」を補足文字に見せる
   （テキストノードなので直接は指定できない。td 側を小さめ・グレーにして
   入力欄とラベルだけ本文色へ戻す） */
#content #newmember .customer_form td,
#content #memberinfo .customer_form td {
	color: var(--wc-muted);
	font-size: 13px;
}

#content #newmember .customer_form td input,
#content #newmember .customer_form td select,
#content #newmember .customer_form td textarea,
#content #newmember .customer_form td label,
#content #memberinfo .customer_form td input,
#content #memberinfo .customer_form td select,
#content #memberinfo .customer_form td textarea,
#content #memberinfo .customer_form td label {
	color: var(--wc-text);
	font-size: 16px;
}

#content #newmember .customer_form td input#search_zipcode,
#content #memberinfo .customer_form td input#search_zipcode {
	font-size: 14px;
}

/* --------------------------------------------------------------------------
   7. ボタン
      テーマの .button（100vw 基準の巨大ピル）が Welcart の
      input.button（住所検索）に当たって崩れていたので、ここで奪い返す。
   -------------------------------------------------------------------------- */
#content input[type="submit"],
#content input[type="button"],
#content input[type="reset"],
#content button,
#content .usces_button,
#content a.redownload_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-width: 180px;
	height: auto;
	margin: 0;
	padding: 14px 32px;
	border: 2px solid var(--wc-line-strong);
	border-radius: 999px;
	background-color: #fff;
	background-image: none;
	box-shadow: none;
	color: var(--wc-text);
	font-family: inherit;
	font-size: 16px;
	font-weight: bold;
	line-height: 1.2;
	letter-spacing: .04em;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .2s, color .2s, border-color .2s, opacity .2s;
	appearance: none;
	-webkit-appearance: none;
}

#content input[type="submit"]:hover,
#content input[type="button"]:hover,
#content button:hover,
#content .usces_button:hover,
#content a.redownload_button:hover {
	background-color: var(--wc-text);
	color: #fff;
	text-decoration: none;
}

/* 主要導線（送信・ログイン・次へ・カートへ入れる・購入する） */
#content input[type="submit"],
#content button[type="submit"] {
	border-color: var(--orange);
	background-color: var(--orange);
	color: #fff;
}

#content input[type="submit"]:hover,
#content button[type="submit"]:hover {
	border-color: #e07f0a;
	background-color: #e07f0a;
	color: #fff;
}

/* ダウンロード再取得（wcex_dlseller）は購入導線と色を分ける */
#content a.redownload_button {
	margin-bottom: 20px;
	border-color: var(--green);
	background-color: var(--green);
	color: #fff;
}

#content a.redownload_button:hover {
	border-color: var(--green);
	background-color: var(--green);
	color: #fff;
	opacity: .85;
}

/* 副次操作（住所検索・数量更新・削除）はコンパクトな白ボタンに戻す。
   Welcart はこれらも type="submit" で出力するため、上の主要導線ルールを
   ここで明示的に打ち消す（背景色・文字色まで指定しないとオレンジのまま残る） */
#content input#search_zipcode,
#content input.search-zipcode,
#content #cart input.delButton,
#content #cart .upbutton input,
#content input[name="upButton"],
#content input[name="quantity_update"] {
	min-width: 0;
	padding: 9px 20px;
	border-width: 1px;
	border-color: #cfcfc9;
	background-color: #fff;
	color: var(--wc-text);
	font-size: 14px;
}

#content input#search_zipcode:hover,
#content input.search-zipcode:hover,
#content #cart input.delButton:hover,
#content #cart .upbutton input:hover,
#content input[name="upButton"]:hover,
#content input[name="quantity_update"]:hover {
	border-color: var(--wc-text);
	background-color: var(--wc-text);
	color: #fff;
}

/* 住所検索ボタンはテーマの .button と衝突していた分を明示的に打ち消す */
#content .customer_form input#search_zipcode.button,
#content #newmember .customer_form input#search_zipcode,
#content #memberinfo .customer_form input#search_zipcode,
#content #customer-info .customer_form input#search_zipcode,
#content #delivery-info #delivery_table input#search_zipcode {
	width: auto;
	height: auto;
	margin: 8px 0 0;
	font-size: 14px;
}

/* 送信ボタン置き場 */
#content .send,
#content #inside-cart .send,
#content #customer-info .send,
#content #delivery-info .send,
#content #info-confirm .send,
#content #newmember .send,
#content #memberinfo .send,
#content #coml-page .send,
#content #error-page .send {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 16px;
	width: auto;
	margin: 48px auto 0;
	padding-top: 40px;
	border-top: 1px solid var(--wc-line);
	text-align: center;
}

/* --------------------------------------------------------------------------
   8. 入力フォームのテーブル（新規入会・会員情報・お客様情報・配送・確認）
   -------------------------------------------------------------------------- */
#content table.customer_form,
#content #newmember table,
#content #memberinfo table.customer_form,
#content #customer-info table,
#content #delivery-info table.customer_form,
#content #info-confirm #confirm_table,
#content #status_table table {
	width: 100%;
	margin: 0;
	border: 1px solid var(--wc-line);
	border-radius: var(--wc-radius);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	table-layout: auto;
}

#content table.customer_form th,
#content #newmember th,
#content #memberinfo th,
#content #customer-info th,
#content #delivery-info th,
#content #confirm_table th,
#content #status_table th {
	width: 30%;
	min-width: 9em;
	padding: 20px 24px;
	border: none;
	border-bottom: 1px solid var(--wc-line);
	background-color: var(--wc-bg-head);
	color: var(--wc-text);
	font-size: 15px;
	font-weight: bold;
	line-height: 1.6;
	text-align: left;
	vertical-align: middle;
	white-space: normal;
	word-break: normal;
}

#content table.customer_form td,
#content #newmember td,
#content #memberinfo td,
#content #customer-info td,
#content #delivery-info td,
#content #confirm_table td,
#content #status_table td {
	padding: 16px 24px;
	border: none;
	border-bottom: 1px solid var(--wc-line);
	background-color: #fff;
	color: var(--wc-text);
	font-size: 15px;
	line-height: 1.8;
	vertical-align: middle;
	word-break: normal;
}

#content table.customer_form tr:last-child th,
#content table.customer_form tr:last-child td,
#content #confirm_table tr:last-child th,
#content #confirm_table tr:last-child td {
	border-bottom: none;
}

/* 入力欄の幅を Welcart の px 直指定から解放する */
#content #newmember .customer_form input[type="text"],
#content #newmember .customer_form input[type="password"],
#content #memberinfo .customer_form input[type="text"],
#content #memberinfo .customer_form input[type="password"],
#content #customer-info .customer_form input[type="text"],
#content #customer-info .customer_form input[type="password"],
#content #delivery-info #delivery_table input[type="text"] {
	width: 100%;
	max-width: 420px;
	margin-right: 10px;
}

#content #newmember .customer_form input#zipcode,
#content #memberinfo .customer_form input#zipcode,
#content #customer-info .customer_form input#zipcode,
#content #delivery-info #delivery_table input#zipcode {
	width: 180px;
}

#content .customer_form .name_td input[type="text"],
#content #newmember .customer_form tr.inp1 input[type="text"],
#content #customer-info .customer_form tr.inp1 input[type="text"] {
	width: auto;
	max-width: 100%;
	min-width: 0;
	flex: 1 1 160px;
}

#content #customer-info .customer_form input,
#content #customer-info .customer_form tr.inp1 input,
#content #customer-info .customer_form tr.inp2 input {
	width: 100%;
	max-width: 420px;
	margin-left: 0;
}

#content #customer-info .customer_form input[type="checkbox"],
#content #customer-info .customer_form input[type="radio"] {
	width: 18px;
	max-width: none;
}

#content #confirm_table .ttl {
	background-color: var(--wc-bg-head);
}

#content #confirm_table .bdc {
	background-color: #fff;
}

/* --------------------------------------------------------------------------
   9. カートのステップナビ
   -------------------------------------------------------------------------- */
#content div.usccart_navi {
	margin-bottom: 40px;
}

#content div.usccart_navi ol.ucart {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	height: auto;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

#content div.usccart_navi li.ucart {
	flex: 1 1 0;
	float: none;
	width: auto;
	min-width: 0;
	margin: 0;
	padding: 14px 8px;
	border-radius: var(--wc-radius);
	background-color: var(--lightgrey);
	background-image: none;
	color: #a5a5a0;
	font-size: 15px;
	font-weight: bold;
	line-height: 1.4;
	text-align: center;
	white-space: nowrap;
}

#content div.usccart_navi li.usccart_cart,
#content div.usccart_navi li.usccart_customer,
#content div.usccart_navi li.usccart_delivery,
#content div.usccart_navi li.usccart_confirm {
	background-color: var(--yellow);
	background-image: none;
	color: var(--wc-text);
}

/* --------------------------------------------------------------------------
   10. カート本体
   -------------------------------------------------------------------------- */
#content #cart {
	width: 100%;
}

#content #cart .upbutton {
	margin-bottom: 24px;
	padding-right: 0;
	text-align: right;
}

#content #cart table,
#content #cart table#cart_table {
	width: 100%;
	margin-bottom: 24px;
	border: 1px solid var(--wc-line);
	border-radius: var(--wc-radius);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}

#content #cart th,
#content #cart td {
	padding: 16px 12px;
	border: none;
	border-bottom: 1px solid var(--wc-line);
	font-size: 15px;
	line-height: 1.6;
	vertical-align: middle;
	word-break: normal;
}

/* 合計行も th で出力されるため、既定は淡色。見出し行だけ濃色にする */
#content #cart th {
	background-color: var(--wc-bg-head);
	color: var(--wc-text);
	font-size: 14px;
	font-weight: bold;
	letter-spacing: .04em;
	white-space: nowrap;
}

/* 見出し行は thead（thead が無いテーマ用に tbody 先頭行もフォロー）。
   合計行は tfoot に入るのでここには含めない */
#content #cart table > thead th,
#content #cart table > tbody > tr:first-child th {
	background-color: var(--wc-text);
	color: #fff;
	font-size: 13px;
}

#content #cart table > thead th em.tax,
#content #cart table > tbody > tr:first-child th em.tax {
	color: rgba(255, 255, 255, .7);
}

/* 合計行（tfoot） */
#content #cart table > tfoot th {
	background-color: var(--wc-bg-head);
	color: var(--wc-text);
	font-size: 15px;
}

#content #cart tr:last-child td {
	border-bottom: none;
}

#content #cart td.productname,
#content #cart th.productname {
	min-width: 200px;
	font-weight: bold;
	text-align: left;
}

#content #cart .thumbnail img {
	display: block;
	width: 64px;
	height: auto;
	border-radius: 6px;
}

#content #cart input.quantity {
	width: 64px;
	padding: 8px;
	font-size: 15px;
	text-align: center;
}

#content #cart .subtotal,
#content #cart .unitprice,
#content #cart .price {
	font-weight: bold;
	white-space: nowrap;
}

#content #cart tr.total td,
#content #cart td.total,
#content #cart th.total,
#content #cart .aright.total {
	background-color: var(--wc-bg-head);
	font-weight: bold;
}

#content #cart td.signal_red {
	color: #d0021b;
}

#content #inside-cart .no_cart {
	margin: 64px 0;
	color: var(--wc-muted);
	font-size: 18px;
	font-weight: bold;
	text-align: center;
}

#content #cart #point_table {
	width: 100%;
	max-width: 420px;
	margin: 24px 0 24px auto;
}

#content span.price,
#content span.cprice {
	color: var(--orange);
	font-size: 22px;
	font-weight: bold;
}

#content em.tax {
	color: var(--wc-muted);
	font-size: 13px;
	font-style: normal;
	font-weight: normal;
}

/* --------------------------------------------------------------------------
   11. ログイン／パスワード再発行ボックス
   -------------------------------------------------------------------------- */
#content #memberpages div.loginbox {
	width: 100%;
	max-width: 440px;
	margin: 48px auto 0;
	padding: 40px;
	border: 1px solid var(--wc-line);
	border-radius: var(--wc-radius-lg);
	background-color: #fff;
	box-shadow: 0 6px 28px rgba(0, 0, 0, .07);
}

#content #memberpages .loginbox label,
#content #memberpages .loginbox p {
	display: block;
	margin: 0;
	padding: 0;
	color: var(--wc-text);
	font-size: 14px;
	line-height: 1.8;
}

#content #memberpages .loginbox p {
	padding-top: 16px;
}

/* Welcart が input に width:157px を inline style で直書きするため !important */
#content #memberpages input.loginmail,
#content #memberpages input.loginpass {
	width: 100% !important;
	margin: 6px 0 0;
	line-height: 1.5;
}

#content #memberpages form {
	margin: 0;
	padding: 0;
}

#content #memberpages .loginbox input[type="submit"] {
	width: 100%;
	margin-top: 24px;
}

#content #memberpages .loginbox p#nav {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--wc-line);
	text-align: center;
}

/* Welcart は p#nav を 2 つ出力する（id 重複）ので 2 つめは区切り線なし */
#content #memberpages .loginbox p#nav + p#nav {
	margin-top: 0;
	padding-top: 4px;
	border-top: none;
}

#content #memberpages .loginbox p#nav a {
	display: inline-block;
	padding: 4px 0;
	color: var(--orange);
	font-size: 14px;
}

/* --------------------------------------------------------------------------
   12. 商品（電子パンフレット）ページ
   -------------------------------------------------------------------------- */
#content #itempage {
	max-width: 900px;
	margin: 0 auto;
}

#content #itempage .itemimg {
	margin-bottom: 32px;
}

#content #itempage .itemimg img {
	display: block;
	width: 100%;
	max-width: 560px;
	height: auto;
	margin: 0 auto;
	border-radius: var(--wc-radius);
}

#content #itempage .exp {
	margin-bottom: 32px;
	font-size: 16px;
	line-height: 1.9;
}

#content #itempage table.skusingle,
#content #itempage table.skumulti,
#content #itempage table.dlseller {
	width: 100%;
	margin: 0;
	border-collapse: separate;
	border-spacing: 0;
}

#content #itempage .field {
	width: 100%;
	margin: 0;
	padding: 18px 0;
	border-bottom: 1px solid var(--wc-line);
}

/* 「販売価格 ─ ¥0」の行 */
#content #itempage .field:has(> .field_price) {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 20px;
}

#content #itempage .field .field_name {
	color: var(--wc-text);
	font-size: 15px;
	font-weight: bold;
}

#content #itempage .field .field_price,
#content #itempage .field .field_cprice {
	color: var(--orange);
	font-size: 26px;
	font-weight: bold;
	line-height: 1.2;
}

#content #itempage table.dlseller th,
#content #itempage table.dlseller td {
	padding: 0;
	border: none;
	font-size: 15px;
	text-align: left;
	vertical-align: middle;
}

#content #itempage table.dlseller th {
	padding-right: 16px;
	font-weight: bold;
	white-space: nowrap;
}

#content #itempage table.dlseller td {
	text-align: right;
}

#content #itempage .exp .field:last-child {
	border-bottom: none;
}

#content #itempage table.skusingle td,
#content #itempage table.skumulti th,
#content #itempage table.skumulti td {
	padding: 16px 12px;
	border: none;
	border-bottom: 1px solid var(--wc-line);
	font-size: 15px;
	vertical-align: middle;
}

#content #itempage .field .field_name {
	font-weight: bold;
}

#content #itempage .skuform {
	margin-top: 32px;
	padding-top: 32px;
	border-top: 1px solid var(--wc-line);
	text-align: center;
}

#content #itempage .skuform .skuquantity {
	margin-bottom: 20px;
}

#content #itempage input[type="submit"],
#content #itempage .skubutton {
	min-width: 260px;
}

#content .shopping_btn {
	margin: 48px 0 0;
	text-align: center;
}

/* --------------------------------------------------------------------------
   13. 会員情報・購入履歴
   -------------------------------------------------------------------------- */
#content #memberpages #memberinfo ul {
	margin: 0 0 32px;
	padding: 24px 28px 24px 48px;
	border: 1px solid var(--wc-line);
	border-radius: var(--wc-radius);
	background-color: var(--wc-bg-soft);
	list-style-position: outside;
}

#content #memberpages #memberinfo li {
	color: var(--wc-text);
	font-size: 15px;
	line-height: 1.9;
}

#content #memberpages #memberinfo li strong {
	color: var(--orange);
}

/* 会員情報の概要テーブルは th|td|th|td の 4 カラムで、2 つめの th が
   空になることがある。幅を固定すると空の見出しブロックが目立つので自動幅に */
#content #memberinfo table th {
	width: auto;
	min-width: 0;
}

#content #memberinfo .history-area {
	margin-top: 40px;
}

#content #memberinfo table {
	width: 100%;
	border: 1px solid var(--wc-line);
	border-radius: var(--wc-radius);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}

#content #memberinfo th {
	padding: 14px 12px;
	border: none;
	border-bottom: 1px solid var(--wc-line);
	background-color: var(--wc-bg-head);
	color: var(--wc-text);
	font-size: 13px;
	font-weight: bold;
	text-align: left;
	white-space: nowrap;
}

#content #memberinfo td {
	padding: 14px 12px;
	border: none;
	border-bottom: 1px solid var(--wc-line);
	font-size: 15px;
	vertical-align: middle;
}

#content #memberinfo td.thumbnail img {
	width: 56px;
	height: auto;
	border-radius: 6px;
}

/* --------------------------------------------------------------------------
   14. 同意テキスト（規約同意欄）
   -------------------------------------------------------------------------- */
#content .at_exp_text {
	width: 100%;
	margin: 0 auto;
	text-align: left;
}

#content .at_cont_text {
	width: 100%;
	height: 200px;
	margin: 12px auto;
	padding: 20px;
	border: 1px solid var(--wc-line);
	border-radius: var(--wc-radius);
	background-color: var(--wc-bg-soft);
	font-size: 14px;
	line-height: 1.9;
	overflow-y: auto;
}

#content .at_check_area {
	margin: 24px 0 0;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
}

#content .agree_member_area {
	margin: 40px 0;
}

/* --------------------------------------------------------------------------
   15. レスポンシブ（テーマの 750px ブレークポイントに合わせる）
   -------------------------------------------------------------------------- */
@media screen and (max-width: 750px) {
	html body {
		padding-top: calc(100vw * 128 / 750);
	}

	#content {
		max-width: none;
		padding: 32px 20px 72px;
	}

	#content .member_page_title,
	#content .cart_page_title,
	#content .item_page_title,
	#content #wc_cart > h1,
	#content #wc_newmemberform > h1,
	#content #wc_memberinfo > h1 {
		margin-bottom: 28px;
		padding-bottom: 14px;
		font-size: 22px;
	}

	#content div.header_explanation:has(> *),
	#content div.footer_explanation:has(> *) {
		padding: 18px 20px;
	}

	#content div.header_explanation li,
	#content div.footer_explanation li {
		font-size: 13px;
	}

	/* 入力テーブルは縦積みにする */
	#content table.customer_form,
	#content #newmember table,
	#content #memberinfo table.customer_form,
	#content #customer-info table,
	#content #delivery-info table.customer_form,
	#content #info-confirm #confirm_table {
		display: block;
		border: none;
		border-radius: 0;
	}

	#content table.customer_form tbody,
	#content #newmember table tbody,
	#content #customer-info table tbody,
	#content #delivery-info table.customer_form tbody,
	#content #info-confirm #confirm_table tbody {
		display: block;
		width: 100%;
	}

	#content table.customer_form tr,
	#content #newmember table tr,
	#content #customer-info table tr,
	#content #delivery-info table.customer_form tr,
	#content #info-confirm #confirm_table tr {
		display: block;
		width: 100%;
		margin-bottom: 16px;
		border: 1px solid var(--wc-line);
		border-radius: var(--wc-radius);
		overflow: hidden;
	}

	#content table.customer_form th,
	#content #newmember th,
	#content #customer-info th,
	#content #delivery-info th,
	#content #confirm_table th {
		display: block;
		width: 100%;
		min-width: 0;
		padding: 12px 16px;
		border-bottom: 1px solid var(--wc-line);
		font-size: 14px;
	}

	#content table.customer_form td,
	#content #newmember td,
	#content #customer-info td,
	#content #delivery-info td,
	#content #confirm_table td {
		display: block;
		width: 100%;
		padding: 14px 16px;
		border-bottom: none;
		font-size: 15px;
	}

	/* 姓名の 2 カラムは td が縦に並ぶので上下の隙間を詰める */
	#content #newmember td.name_td + td.name_td,
	#content #memberinfo td.name_td + td.name_td {
		padding-top: 0;
	}

	#content #newmember .customer_form input[type="text"],
	#content #newmember .customer_form input[type="password"],
	#content #memberinfo .customer_form input[type="text"],
	#content #memberinfo .customer_form input[type="password"],
	#content #customer-info .customer_form input,
	#content #customer-info .customer_form tr.inp1 input,
	#content #customer-info .customer_form tr.inp2 input,
	#content #delivery-info #delivery_table input[type="text"],
	#content select {
		width: 100%;
		max-width: none;
		margin-right: 0;
	}

	#content #newmember .customer_form input#zipcode,
	#content #memberinfo .customer_form input#zipcode,
	#content #customer-info .customer_form input#zipcode,
	#content #delivery-info #delivery_table input#zipcode {
		width: 100%;
	}

	#content #customer-info .customer_form input[type="checkbox"],
	#content #customer-info .customer_form input[type="radio"] {
		width: 18px;
	}

	#content .customer_form .name_td input[type="text"],
	#content #newmember .customer_form tr.inp1 input[type="text"] {
		flex: none;
	}

	#content input[type="submit"],
	#content input[type="button"],
	#content button,
	#content a.redownload_button {
		width: 100%;
		min-width: 0;
		padding: 15px 20px;
		font-size: 15px;
	}

	#content input#search_zipcode,
	#content input.search-zipcode,
	#content #cart input.delButton,
	#content input[name="quantity_update"] {
		width: auto;
		min-width: 0;
	}

	#content .send,
	#content #inside-cart .send,
	#content #customer-info .send,
	#content #delivery-info .send,
	#content #info-confirm .send,
	#content #newmember .send,
	#content #memberinfo .send {
		flex-direction: column-reverse;
		gap: 12px;
		margin-top: 32px;
		padding-top: 28px;
	}

	#content div.usccart_navi ol.ucart {
		gap: 6px;
	}

	#content div.usccart_navi li.ucart {
		flex: 1 1 calc(50% - 3px);
		padding: 11px 4px;
		font-size: 13px;
	}

	/* カート表は横スクロールで逃がす */
	#content #cart {
		margin: 0 -20px;
		padding: 0 20px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	#content #cart table,
	#content #cart table#cart_table {
		min-width: 720px;
	}

	#content #cart th,
	#content #cart td {
		padding: 12px 8px;
	}

	#content #memberinfo .history-area {
		overflow-x: auto;
	}

	#content #memberinfo table {
		min-width: 600px;
	}

	#content #memberpages div.loginbox {
		margin-top: 32px;
		padding: 28px 22px;
	}

	#content #itempage input[type="submit"],
	#content #itempage .skubutton {
		min-width: 0;
	}
}