/* =================================================================
 * usces_member.css
 * 会員系ページ（ログイン／新規入会／パスワード忘れ／会員情報編集／
 * 各完了画面）専用のスタイル。
 *
 * 既存の usces_cart.css は編集せず、差分を追いやすくするために
 * 新規ファイルとして分離している。functions.php 側で
 * Welcart本体プラグインCSS（wp-content/plugins/usc-e-shop/css/）より
 * 後に読み込むことで、本体側の古いテーブルレイアウト
 * （#memberpages div.loginbox、#newmember th 等の固定px指定）を
 * 上書きする。セレクタは記事ID（#wc_login 等）を二重に重ねることで
 * 詳細度でも本体プラグインCSSに負けないようにしている。
 *
 * デザイントークン（サイト全体から抽出済み）
 *   主アクション : #de5d50 / hover #c94f43（商品ページ「カートへ入れる」と同色）
 *   副アクション : #1d2240 / hover #2a3050（「在庫や価格などのお問合せ」と同色）
 *   退会（破壊的）: #8c8c8c / hover #6f6f6f
 *   罫線         : #ccc
 *   見出しセル背景: #efefef
 *   本文         : #333
 *   ネイビー     : #1d2240
 *   必須マーク   : #ff3366
 *   コンテンツ最大幅: 1200px
 *   SPブレークポイント: 767px
 * ================================================================= */


/* -----------------------------------------------------------------
 * 共通コンテナ／ページタイトル
 * -------------------------------------------------------------- */

#content.member-page {
	max-width: 1200px;
	margin: 0 auto;
	padding: 48px 20px 80px;
	box-sizing: border-box;
}

/* ヘッダー帯にタイトルが食い込んで見える問題の解消。
   base.css の h1{font-size:22px!important} 等はそのまま尊重し、
   コンテナ側に上の余白を持たせることで解決する。 */
.member-page .member_page_title {
	margin: 0 0 1.6em;
}

.member-page #memberpages {
	max-width: 100%;
}

.member-page .header_explanation,
.member-page .footer_explanation {
	color: #333;
	line-height: 1.8;
}

.member-page .header_explanation ul {
	margin: 0 0 1em;
	padding-left: 1.4em;
}

.member-page .header_explanation ul li {
	margin-bottom: .4em;
}

.member-page .error_message {
	color: #ff3366;
	font-weight: bold;
}

.member-page .error_message:empty {
	display: none;
}


/* -----------------------------------------------------------------
 * ログイン系カード（ログイン／パスワード変更／パスワード忘れ）
 * -------------------------------------------------------------- */

#wc_login #memberpages .loginbox,
#wc_changepassword #memberpages .loginbox,
#wc_lostmemberpassword #memberpages .loginbox {
	box-sizing: border-box;
	max-width: 440px;
	width: 100%;
	margin: 8px auto 0;
	padding: 32px 40px;
	background-color: #fff;
	border: 1px solid #ccc;
	border-radius: 4px;
	text-align: left;
}

#wc_login #memberpages .loginbox label,
#wc_changepassword #memberpages .loginbox label,
#wc_lostmemberpassword #memberpages .loginbox label {
	display: block;
	margin-bottom: 1.1em;
	color: #333;
	font-size: 13px;
}

#wc_login #memberpages .loginbox label br,
#wc_changepassword #memberpages .loginbox label br,
#wc_lostmemberpassword #memberpages .loginbox label br {
	display: none;
}

#wc_login #memberpages input.loginmail,
#wc_login #memberpages input.loginpass,
#wc_changepassword #memberpages input.loginpass,
#wc_lostmemberpassword #memberpages input.loginmail {
	box-sizing: border-box;
	display: block;
	width: 100%;
	margin-top: .4em;
	padding: 10px 12px;
	font-size: 14px;
	background-color: #fff;
	border: 1px solid #ccc;
	border-radius: 3px;
}

#wc_login #memberpages input.loginmail:focus,
#wc_login #memberpages input.loginpass:focus,
#wc_changepassword #memberpages input.loginpass:focus,
#wc_lostmemberpassword #memberpages input.loginmail:focus {
	border-color: #de5d50;
	outline: none;
}

#wc_login #memberpages p.forgetmenot {
	margin: -.4em 0 1.4em;
	font-size: 12px;
	color: #666;
}

#wc_login #memberpages p.forgetmenot label {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	margin: 0;
}

#wc_login #memberpages p.submit,
#wc_changepassword #memberpages p.submit,
#wc_lostmemberpassword #memberpages p.submit {
	margin: 0 0 1em;
	padding: 0;
	text-align: center;
}

/* ログインボタン（既存は極端に小さいので、明示的にサイズを付与） */
#wc_login #memberpages #member_login,
#wc_changepassword #memberpages #member_login,
#wc_lostmemberpassword #memberpages #member_login {
	display: block;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 12px 20px;
	color: #fff;
	font-size: 15px;
	font-weight: bold;
	letter-spacing: .05em;
	background-color: #de5d50;
	border: none;
	border-radius: 3px;
	cursor: pointer;
	transition: background-color .2s ease;
}

#wc_login #memberpages #member_login:hover,
#wc_changepassword #memberpages #member_login:hover,
#wc_lostmemberpassword #memberpages #member_login:hover {
	background-color: #c94f43;
}

#wc_login #memberpages p#nav,
#wc_lostmemberpassword #memberpages p#nav {
	margin: 0 0 1.2em;
	text-align: center;
}

#wc_login #memberpages p#nav a,
#wc_lostmemberpassword #memberpages p#nav a {
	color: #1d2240;
	font-size: 13px;
	text-decoration: underline;
}

#wc_login #memberpages p#nav a:hover,
#wc_lostmemberpassword #memberpages p#nav a:hover {
	color: #de5d50;
}

/* 新規ご入会はこちら（ログインページ下部） */
#wc_login #memberpages .new-entry {
	margin: 24px 0 0;
	padding: 20px;
	background-color: #efefef;
	border-radius: 4px;
	text-align: center;
}

#wc_login #memberpages .new-entry h2 {
	margin: 0 0 12px;
	color: #333;
	font-size: 14px;
	font-weight: bold;
}

#wc_login #memberpages .new-entry #nav {
	margin: 0;
}

#wc_login #memberpages .new-entry #nav a {
	display: inline-block;
	box-sizing: border-box;
	min-width: 220px;
	padding: 12px 24px;
	color: #fff;
	font-size: 14px;
	font-weight: bold;
	background-color: #de5d50;
	border-radius: 3px;
	text-decoration: none;
	transition: background-color .2s ease;
}

#wc_login #memberpages .new-entry #nav a:hover {
	background-color: #c94f43;
	text-decoration: none;
}

#wc_login .liwpp_area,
#wc_lostmemberpassword .liwpp_area {
	max-width: 440px;
	margin: 16px auto 0;
	text-align: center;
}

#wc_lostmemberpassword #memberpages .loginbox > div {
	margin: 0 0 1.2em;
	color: #333;
	font-size: 13px;
	line-height: 1.8;
}


/* -----------------------------------------------------------------
 * 新規入会フォーム #wc_newmemberform
 * -------------------------------------------------------------- */

#wc_newmemberform #newmember {
	box-sizing: border-box;
	max-width: 720px;
	margin: 0 auto;
	padding: 32px;
	background-color: #fff;
	border: 1px solid #ccc;
	border-radius: 4px;
}

#wc_newmemberform #newmember .header_explanation {
	margin-bottom: 1.6em;
	padding-bottom: 1.6em;
	border-bottom: 1px solid #ccc;
	font-size: 13px;
}

#wc_newmemberform #newmember table.customer_form {
	width: 100%;
	margin: 0 0 1.6em;
	border-collapse: collapse;
	table-layout: fixed;
}

#wc_newmemberform #newmember table.customer_form tr {
	border-bottom: 1px solid #ccc;
}

#wc_newmemberform #newmember table.customer_form th {
	box-sizing: border-box;
	width: 180px;
	padding: 14px 16px;
	background-color: #efefef;
	border: 1px solid #ccc;
	color: #333;
	font-size: 13px;
	font-weight: bold;
	text-align: left;
	vertical-align: middle;
}

#wc_newmemberform #newmember table.customer_form th em {
	margin-right: .3em;
	color: #ff3366;
	font-style: normal;
	font-weight: bold;
}

#wc_newmemberform #newmember table.customer_form td {
	box-sizing: border-box;
	padding: 12px 16px;
	background-color: #fff;
	border: 1px solid #ccc;
	color: #333;
	font-size: 13px;
	vertical-align: middle;
}

#wc_newmemberform #newmember table.customer_form td select {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	padding: 8px 10px;
	font-size: 13px;
	background-color: #fff;
	border: 1px solid #ccc;
	border-radius: 3px;
}

#wc_newmemberform #newmember table.customer_form input[type="text"],
#wc_newmemberform #newmember table.customer_form input[type="password"],
#wc_newmemberform #newmember table.customer_form input[type="email"] {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	padding: 8px 10px;
	font-size: 13px;
	background-color: #fff;
	border: 1px solid #ccc;
	border-radius: 3px;
}

/* 名・姓のように1行に複数入力が並ぶ行 */
#wc_newmemberform #newmember table.customer_form tr.inp1 td,
#wc_newmemberform #newmember table.customer_form tr[class*="inp"] td {
	width: auto;
}

#wc_newmemberform #newmember table.customer_form td + td {
	border-left: none;
}

#wc_newmemberform #newmember table.customer_form p.password_policy {
	margin: .5em 0 0;
	color: #666;
	font-size: 11px;
	line-height: 1.6;
}

/* 会員規約同意ブロック */
#wc_newmemberform #newmember .agree_member_area {
	margin: 0 0 1.6em;
	padding: 20px;
	background-color: #efefef;
	border-radius: 4px;
}

#wc_newmemberform #newmember .at_exp_text {
	margin: 0 auto 1em;
	color: #333;
	font-size: 13px;
	line-height: 1.8;
}

#wc_newmemberform #newmember .at_cont_text {
	box-sizing: border-box;
	width: 100%;
	height: 180px;
	margin: 0 auto 1em;
	padding: 12px;
	background-color: #fff;
	border: 1px solid #ccc;
	border-radius: 3px;
	font-size: 12px;
	line-height: 1.7;
}

#wc_newmemberform #newmember .at_check_area {
	font-size: 14px;
	text-align: center;
}

#wc_newmemberform #newmember .send {
	margin: 0;
	padding-top: 8px;
	text-align: center;
}

#wc_newmemberform #newmember .send input[type="submit"],
#wc_newmemberform #newmember .send input[type="button"] {
	box-sizing: border-box;
	min-width: 240px;
	padding: 14px 32px;
	color: #fff;
	font-size: 15px;
	font-weight: bold;
	letter-spacing: .05em;
	background-color: #de5d50;
	border: none;
	border-radius: 3px;
	cursor: pointer;
	transition: background-color .2s ease;
}

#wc_newmemberform #newmember .send input[type="submit"]:hover,
#wc_newmemberform #newmember .send input[type="button"]:hover {
	background-color: #c94f43;
}

#wc_newmemberform #newmember .footer_explanation {
	margin-top: 1.6em;
	font-size: 12px;
}


/* -----------------------------------------------------------------
 * マイページ／会員情報編集 #wc_member
 * -------------------------------------------------------------- */

.member-page #memberinfo {
	box-sizing: border-box;
	max-width: 900px;
	margin: 0 auto;
	padding: 32px;
	background-color: #fff;
	border: 1px solid #ccc;
	border-radius: 4px;
}

.member-page #memberinfo > table {
	width: 100%;
	margin: 0 0 1.6em;
	border-collapse: collapse;
}

.member-page #memberinfo > table th {
	background-color: #efefef;
	border: 1px solid #ccc;
	color: #333;
	font-size: 12px;
	font-weight: bold;
}

.member-page #memberinfo > table td {
	border: 1px solid #ccc;
	color: #333;
	font-size: 12px;
}

.member-page #memberinfo .member_submenu {
	margin: 0 0 2em;
	padding: 16px 0;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	list-style: none;
	text-align: center;
}

.member-page #memberinfo .member_submenu li {
	display: inline-block;
	margin: 0 6px;
}

.member-page #memberinfo .member_submenu a {
	display: inline-block;
	box-sizing: border-box;
	padding: 10px 22px;
	color: #fff;
	font-size: 13px;
	font-weight: bold;
	background-color: #de5d50;
	border-radius: 3px;
	text-decoration: none;
	transition: background-color .2s ease;
}

.member-page #memberinfo .member_submenu li.member-logout a,
.member-page #memberinfo .member_submenu a.usces_logout_a {
	background-color: #1d2240;
}

.member-page #memberinfo .member_submenu a:hover {
	background-color: #c94f43;
	text-decoration: none;
}

.member-page #memberinfo .member_submenu li.member-logout a:hover,
.member-page #memberinfo .member_submenu a.usces_logout_a:hover {
	background-color: #333;
}

.member-page #memberinfo h3 {
	height: auto;
	margin: 2em 0 1em;
	padding: 0 0 .5em;
	background-color: transparent;
	border-bottom: 2px solid #1d2240;
	color: #1d2240;
	font-size: 15px;
	line-height: 1.5;
	text-indent: 0;
	float: none;
}

.member-page #memberinfo .currency_code {
	margin-bottom: 1em;
	color: #666;
	font-size: 12px;
}

.member-page #memberinfo .history-area {
	height: auto;
	max-height: 520px;
	overflow-x: auto;
	overflow-y: auto;
}

/* 会員情報編集フォーム（.customer_form） */
.member-page #memberinfo form table.customer_form {
	width: 100%;
	margin: 0 0 1.6em;
	border-collapse: collapse;
	table-layout: fixed;
}

.member-page #memberinfo form table.customer_form tr {
	border-bottom: 1px solid #ccc;
}

.member-page #memberinfo form table.customer_form th {
	box-sizing: border-box;
	width: 180px;
	padding: 14px 16px;
	background-color: #efefef;
	border: 1px solid #ccc;
	color: #333;
	font-size: 13px;
	font-weight: bold;
	text-align: left;
	vertical-align: middle;
}

.member-page #memberinfo form table.customer_form td {
	box-sizing: border-box;
	padding: 12px 16px;
	border: 1px solid #ccc;
	color: #333;
	font-size: 13px;
	vertical-align: middle;
}

.member-page #memberinfo form table.customer_form input[type="text"],
.member-page #memberinfo form table.customer_form input[type="password"] {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	padding: 8px 10px;
	font-size: 13px;
	border: 1px solid #ccc;
	border-radius: 3px;
}

.member-page #memberinfo form .send {
	margin: 0;
	padding-top: 8px;
	text-align: center;
}

.member-page #memberinfo form .send input {
	box-sizing: border-box;
	min-width: 160px;
	margin: 0 6px;
	padding: 12px 24px;
	color: #fff;
	font-size: 14px;
	font-weight: bold;
	background-color: #de5d50;
	border: none;
	border-radius: 3px;
	cursor: pointer;
	transition: background-color .2s ease;
}

.member-page #memberinfo form .send input.top {
	background-color: #1d2240;
}

.member-page #memberinfo form .send input.deletemember {
	/* 退会は破壊的操作。主アクション（#de5d50）と競合しないよう
	   彩度を落としたグレーにして、誤操作を誘わないようにする。 */
	background-color: #8c8c8c;
}

.member-page #memberinfo form .send input:hover {
	background-color: #c94f43;
}

.member-page #memberinfo form .send input.top:hover {
	background-color: #333;
}

.member-page #memberinfo form .send input.deletemember:hover {
	background-color: #6f6f6f;
}


/* -----------------------------------------------------------------
 * 各種完了画面（新規入会完了／編集完了／パスワード関連完了）
 * -------------------------------------------------------------- */

#wc_newcompletion #memberpages,
#wc_editcompletion #memberpages,
#wc_lostcompletion #memberpages,
#wc_changepasscompletion #memberpages {
	box-sizing: border-box;
	max-width: 640px;
	margin: 0 auto;
	padding: 40px;
	background-color: #fff;
	border: 1px solid #ccc;
	border-radius: 4px;
	text-align: center;
}

#wc_newcompletion #memberpages p,
#wc_editcompletion #memberpages p,
#wc_lostcompletion #memberpages p,
#wc_changepasscompletion #memberpages p {
	margin: 0 0 1em;
	color: #333;
	font-size: 14px;
	line-height: 1.8;
}

#wc_newcompletion #memberpages p a,
#wc_editcompletion #memberpages p a,
#wc_lostcompletion #memberpages p a,
#wc_changepasscompletion #memberpages p a {
	color: #1d2240;
	text-decoration: underline;
}

#wc_newcompletion #memberpages p a:hover,
#wc_editcompletion #memberpages p a:hover,
#wc_lostcompletion #memberpages p a:hover,
#wc_changepasscompletion #memberpages p a:hover {
	color: #de5d50;
}

#wc_newcompletion #memberpages .send,
#wc_editcompletion #memberpages .send,
#wc_lostcompletion #memberpages .send,
#wc_changepasscompletion #memberpages .send {
	margin-top: 1.6em;
}

#wc_newcompletion #memberpages .send a,
#wc_newcompletion #memberpages .send input,
#wc_editcompletion #memberpages .send a,
#wc_editcompletion #memberpages .send input,
#wc_lostcompletion #memberpages .send a,
#wc_lostcompletion #memberpages .send input,
#wc_changepasscompletion #memberpages .send a,
#wc_changepasscompletion #memberpages .send input {
	display: inline-block;
	box-sizing: border-box;
	min-width: 220px;
	padding: 12px 24px;
	color: #fff;
	font-size: 14px;
	font-weight: bold;
	background-color: #de5d50;
	border: none;
	border-radius: 3px;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s ease;
}

#wc_newcompletion #memberpages .send a:hover,
#wc_newcompletion #memberpages .send input:hover,
#wc_editcompletion #memberpages .send a:hover,
#wc_editcompletion #memberpages .send input:hover,
#wc_lostcompletion #memberpages .send a:hover,
#wc_lostcompletion #memberpages .send input:hover,
#wc_changepasscompletion #memberpages .send a:hover,
#wc_changepasscompletion #memberpages .send input:hover {
	background-color: #c94f43;
	text-decoration: none;
}


/* -----------------------------------------------------------------
 * モバイル（767px以下）
 * -------------------------------------------------------------- */

@media screen and (max-width: 767px) {

	#content.member-page {
		padding: 28px 15px 48px;
	}

	.member-page .member_page_title {
		margin: 0 0 1.2em;
		font-size: 18px !important;
	}

	#wc_login #memberpages .loginbox,
	#wc_changepassword #memberpages .loginbox,
	#wc_lostmemberpassword #memberpages .loginbox {
		max-width: 100%;
		padding: 24px 20px;
	}

	#wc_login #memberpages .new-entry {
		padding: 16px;
	}

	#wc_login #memberpages .new-entry #nav a {
		display: block;
		width: 100%;
		min-width: 0;
	}

	#wc_newmemberform #newmember {
		max-width: 100%;
		padding: 20px 16px;
	}

	.member-page #memberinfo {
		max-width: 100%;
		padding: 20px 16px;
	}

	/* customer_form テーブルはカード型に組み替えて横スクロールを防ぐ */
	#wc_newmemberform #newmember table.customer_form,
	#wc_newmemberform #newmember table.customer_form tbody,
	#wc_newmemberform #newmember table.customer_form tr,
	#wc_newmemberform #newmember table.customer_form th,
	#wc_newmemberform #newmember table.customer_form td,
	.member-page #memberinfo form table.customer_form,
	.member-page #memberinfo form table.customer_form tbody,
	.member-page #memberinfo form table.customer_form tr,
	.member-page #memberinfo form table.customer_form th,
	.member-page #memberinfo form table.customer_form td {
		display: block;
		width: 100% !important;
		box-sizing: border-box;
	}

	#wc_newmemberform #newmember table.customer_form tr,
	.member-page #memberinfo form table.customer_form tr {
		margin-bottom: 12px;
		border: 1px solid #ccc;
		border-radius: 4px;
		overflow: hidden;
	}

	#wc_newmemberform #newmember table.customer_form th,
	.member-page #memberinfo form table.customer_form th {
		border-width: 0 0 1px;
	}

	#wc_newmemberform #newmember table.customer_form td,
	.member-page #memberinfo form table.customer_form td {
		border-width: 0;
	}

	#wc_newmemberform #newmember table.customer_form td + td,
	.member-page #memberinfo form table.customer_form td + td {
		border-top: 1px solid #ccc;
	}

	.member-page #memberinfo > table,
	.member-page #memberinfo > table tbody,
	.member-page #memberinfo > table tr,
	.member-page #memberinfo > table th,
	.member-page #memberinfo > table td {
		display: block;
		width: 100% !important;
		box-sizing: border-box;
	}

	.member-page #memberinfo > table tr {
		margin-bottom: 8px;
	}

	.member-page #memberinfo .member_submenu li {
		display: block;
		margin: 0 0 8px;
	}

	.member-page #memberinfo .member_submenu a {
		display: block;
	}

	.member-page #memberinfo form .send input {
		display: block;
		width: 100%;
		margin: 0 0 10px;
	}

	#wc_newcompletion #memberpages,
	#wc_editcompletion #memberpages,
	#wc_lostcompletion #memberpages,
	#wc_changepasscompletion #memberpages {
		max-width: 100%;
		padding: 24px 18px;
	}
}


/* ------------------------------------------------------------------
 * 会員認証画面（#memberedit）
 *
 * 会員情報の変更時にメール認証を挟む Welcart 同梱拡張 VerifyMembersEmail
 * （usces_ex の system.verifyemail.edit_flag が有効）が表示する画面。
 * 旧CSS・新CSSともに未対応で全幅のベタ組みになっていたため、
 * 他の会員系ページと同じカード表現に揃える。
 * ------------------------------------------------------------------ */
.member-page #memberpages #memberedit {
	box-sizing: border-box;
	max-width: 640px;
	width: 100%;
	margin: 8px auto 0;
	padding: 32px 40px;
	background-color: #fff;
	border: 1px solid #ccc;
	border-radius: 4px;
	text-align: left;
}

.member-page #memberpages #memberedit h2 {
	margin: 0 0 1em;
	padding: 0 0 .5em;
	border-bottom: 2px solid #1d2240;
	color: #1d2240;
	font-size: 16px;
	font-weight: bold;
	line-height: 1.5;
	text-align: left;
	background: none;
}

.member-page #memberpages #memberedit p {
	margin: 0 0 .8em;
	font-size: 14px;
	line-height: 1.9;
}

.member-page #memberpages #memberedit p:last-of-type {
	margin-bottom: 0;
}

.member-page #memberpages #memberedit .send {
	margin-top: 1.8em;
	text-align: center;
}

.member-page #memberpages #memberedit .send input {
	box-sizing: border-box;
	min-width: 160px;
	padding: 12px 24px;
	background-color: #de5d50;
	border: none;
	border-radius: 3px;
	color: #fff;
	font-size: 14px;
	line-height: 1.4;
	cursor: pointer;
}

.member-page #memberpages #memberedit .send input:hover {
	background-color: #c94f43;
}

@media only screen and (max-width: 767px) {
	.member-page #memberpages #memberedit {
		max-width: 100%;
		padding: 20px 16px;
	}

	.member-page #memberpages #memberedit .send input {
		width: 100%;
	}
}