/* ===============================
   鳩環屋 会員ページの見た目（ログイン・会員登録・会員ページ・パスワードの再発行と変更・完了）
   Welcart Basic の見た目を上書きする。<body> に prs-member があるときだけ効く
   入力欄・ボタン・エラー・見出しの形は、購入の流れと共通（forms.css）
   色は colors.css、文字の大きさ・余白は site.css の変数を使う
   しくみ：includes/welcart-member.php
   =============================== */

/* 進むボタンは青（オレンジはカート・買うボタンだけ） */
body.prs-member {
	--prs-go: var(--prs-color-main);
	--prs-go-dark: var(--prs-color-main-dark);
}

/* 入力欄が少ない画面は、幅をせまくして真ん中に */
body.prs-member-login #content article.post,
body.prs-member-lostmemberpassword #content article.post,
body.prs-member-changepassword #content article.post,
body.prs-member-completion #content article.post,
body.prs-member-member_verify #content article.post,
body.prs-member-member_auth_error #content article.post {
	max-width: 560px;
}

/* Welcart Basic の白い箱・灰色の箱・余白をなくす（形はこのファイルで作る） */
body.prs-member #content #memberpages,
body.prs-member #content .whitebox,
body.prs-member #content #newmember,
body.prs-member #content .loginbox,
body.prs-member #content .header_explanation,
body.prs-member #content .footer_explanation {
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	text-align: left;
}

/* 上の案内の文 */
.prs-member-lead {
	margin: 0 0 var(--prs-s-5);
	font-size: var(--prs-f-base);
	line-height: var(--prs-lh);
}

.prs-member-note {
	margin: calc(var(--prs-s-4) * -1) 0 var(--prs-s-5);
	color: var(--prs-color-note);
	font-size: var(--prs-f-small);
	line-height: 1.7;
}

/* ===============================
   ログイン・パスワードの再発行・パスワードの変更（メールアドレス・パスワードの小さなフォーム）
   =============================== */
body.prs-member #content .member-box,
body.prs-member-lostmemberpassword #content #loginform,
body.prs-member-changepassword #content #loginform {
	width: auto;
	margin: 0;
	padding: var(--prs-s-5);
	border: 2px solid var(--prs-color-main-light);
	border-radius: var(--prs-r-large);
	background: var(--prs-color-main-light);
}

body.prs-member #content #loginform p {
	margin: 0 0 var(--prs-s-4);
	padding: 0;
}

body.prs-member #content #loginform label {
	display: block;
	color: var(--prs-color-text);
	font-size: var(--prs-f-base);
	font-weight: 700;
	line-height: 1.6;
}

body.prs-member #content #loginform label input.loginmail,
body.prs-member #content #loginform label input.loginpass {
	margin-top: var(--prs-s-1);
	font-weight: 400;
}

/* ログインしたままにする：押しやすい大きさ */
body.prs-member #content #loginform p.forgetmenot label {
	display: flex;
	align-items: center;
	gap: var(--prs-s-2);
	font-weight: 400;
	cursor: pointer;
}

body.prs-member #content #loginform input[type="checkbox"] {
	flex: none;
	width: 24px;
	height: 24px;
	margin: 0;
	accent-color: var(--prs-color-main);
}

body.prs-member #content #loginform p.submit {
	margin: var(--prs-s-5) auto 0;
}

/* パスワードの決まり（「6文字以上…」）は欄の下に */
body.prs-member-changepassword #content #loginform p.password_policy {
	margin: calc(var(--prs-s-3) * -1) 0 var(--prs-s-4);
}

/* 「パスワードを忘れた方はこちら」「ログインの画面へもどる」 */
body.prs-member #content #loginform p.nav,
body.prs-member-lostmemberpassword #content .loginbox #nav {
	margin: var(--prs-s-4) 0 0;
	font-size: var(--prs-f-base);
	text-align: center;
}

body.prs-member-lostmemberpassword #content .loginbox #nav {
	max-width: 480px;
	margin: var(--prs-s-5) auto 0;
}

/* Welcart の案内の文（同じことを上に書いたので、言葉を空にしてある）の入れ物 */
body.prs-member-lostmemberpassword #content .loginbox > div:empty {
	display: none;
}

/* 会員登録がまだの方 */
body.prs-member #content .new-entry {
	width: auto;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	text-align: left;
}

body.prs-member #content .new-entry #nav {
	max-width: 480px;
	margin: 0 auto;
	padding: 0;
}

body.prs-member #content .new-entry #nav a {
	border-color: var(--prs-color-main);
	background: var(--prs-color-white);
	color: var(--prs-color-main);
}

body.prs-member #content .new-entry #nav a:hover {
	background: var(--prs-color-main-light);
	color: var(--prs-color-main-dark);
}

.prs-member-merits {
	margin: var(--prs-s-4) 0 0;
	padding: 0;
	list-style: none;
	color: var(--prs-color-note);
	font-size: var(--prs-f-small);
	line-height: 1.7;
}

.prs-member-merits li {
	position: relative;
	margin: 0 0 var(--prs-s-1);
	padding: 0 0 0 1.2em;
	list-style: none;
}

.prs-member-merits li::before {
	content: "・";
	position: absolute;
	left: 0;
}

/* ===============================
   会員登録
   =============================== */
/* Welcart の4行の案内（個人情報の扱い・＊印は必須・英数字は半角）は、上の短い案内に置きかえる */
body.prs-member-newmemberform #content .header_explanation > ul {
	display: none;
}

/* ===============================
   会員ページ（ログインしたあと）
   =============================== */
/* お名前・会員番号など：表ではなく、見出しと中身を横にならべる */
body.prs-member-member #content #memberinfo > table,
body.prs-member-member #content #memberinfo > table > tbody {
	display: block;
	width: 100%;
	margin: 0;
	border: 0;
}

body.prs-member-member #content #memberinfo > table > tbody {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	gap: var(--prs-s-1) var(--prs-s-4);
	padding: var(--prs-s-4) var(--prs-s-5);
	border-radius: var(--prs-r-large);
	background: var(--prs-color-beige);
}

body.prs-member-member #content #memberinfo > table tr {
	display: contents;
}

body.prs-member-member #content #memberinfo > table th,
body.prs-member-member #content #memberinfo > table td {
	display: block;
	width: auto;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--prs-color-text);
	font-size: var(--prs-f-base);
	text-align: left;
	overflow-wrap: anywhere;
}

body.prs-member-member #content #memberinfo > table th {
	color: var(--prs-color-note);
	font-weight: 400;
}

body.prs-member-member #content #memberinfo > table td {
	font-weight: 700;
}

body.prs-member-member #content #memberinfo > table .space {
	display: none;
}

/* 登録内容を変える・ログアウト：横に2つのボタン */
body.prs-member-member #content .member_submenu {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(10em, 1fr));
	gap: var(--prs-s-3);
	margin: var(--prs-s-4) 0 0;
	padding: 0;
	list-style: none;
}

body.prs-member-member #content .member_submenu li {
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

body.prs-member-member #content .member_submenu a {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 50px;
	padding: var(--prs-s-2) var(--prs-s-3);
	border: 2px solid var(--prs-color-main);
	border-radius: var(--prs-r-small);
	background: var(--prs-color-white);
	color: var(--prs-color-main);
	font-size: var(--prs-f-base);
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
}

body.prs-member-member #content .member_submenu a:hover {
	background: var(--prs-color-main-light);
	color: var(--prs-color-main-dark);
}

/* カートに商品が入っているとき */
.prs-member-cart {
	margin: var(--prs-s-5) 0 0;
	padding: var(--prs-s-4) var(--prs-s-5);
	border: 2px solid var(--prs-color-accent);
	border-radius: var(--prs-r-large);
	background: var(--prs-color-wait-bg);
	text-align: center;
}

.prs-member-cart__text {
	margin: 0 0 var(--prs-s-3);
	color: var(--prs-color-wait);
	font-size: var(--prs-f-large);
	font-weight: 700;
}

.prs-member-cart .prs-button {
	max-width: 480px;
	margin: 0 auto;
}

/* ご注文の履歴 */
body.prs-member-member #content .currency_code {
	display: none; /* 「通貨 : 円」は出さない */
}

/* 「キャンセルを除外」「期間」は出さない（いつも全部の期間・キャンセルは出さない。welcart-member.php）
   長くなりすぎないように、新しい順に何件かだけ出して［前のご注文をもっと見る］で増やす（member.js） */
body.prs-member-member #content .usces_filter_history {
	display: none;
}

/* member.js が隠した注文（下の #history_head の display: block より強く） */
body.prs-member-member #content #memberinfo .history-area > [hidden] {
	display: none;
}

/* ［前のご注文をもっと見る（あと○件）］：白に青い線（もどるボタンと同じ形） */
.prs-history-more {
	display: block;
	box-sizing: border-box;
	width: 100%;
	max-width: 480px;
	min-height: 52px;
	margin: var(--prs-s-5) auto 0;
	padding: var(--prs-s-2) var(--prs-s-4);
	border: 2px solid var(--prs-color-main);
	border-radius: var(--prs-r-small);
	background: var(--prs-color-white);
	color: var(--prs-color-main);
	font-family: inherit;
	font-size: var(--prs-f-base);
	font-weight: 700;
	cursor: pointer;
}

.prs-history-more:hover {
	border-color: var(--prs-color-main-dark);
	background: var(--prs-color-main-light);
	color: var(--prs-color-main-dark);
}

.prs-history-more[hidden] {
	display: none;
}

/* Welcart Basic は PC で履歴を高さ 500px のスクロールする枠に入れる → 枠をなくして、そのまま下にならべる */
body.prs-member-member #content #memberinfo .history-area {
	max-height: none;
	margin: 0;
	padding: 0;
	overflow: visible;
	border: 0;
}

/* 注文1つ：注文番号・日付・金額の表を、箱の上の帯に */
body.prs-member-member #content #history_head {
	display: block;
	width: 100%;
	margin: var(--prs-s-5) 0 0;
	border: 0;
}

body.prs-member-member #content #history_head thead {
	display: none; /* 見出しは中身の前に「data-label」で出す */
}

body.prs-member-member #content #history_head tbody,
body.prs-member-member #content #history_head tr {
	display: block;
}

body.prs-member-member #content #history_head tr.order_head_value {
	display: flex;
	flex-wrap: wrap;
	gap: var(--prs-s-1) var(--prs-s-5);
	padding: var(--prs-s-3) var(--prs-s-4);
	border-radius: var(--prs-r-large) var(--prs-r-large) 0 0;
	background: var(--prs-color-main);
	color: var(--prs-color-white);
}

body.prs-member-member #content #history_head td {
	display: block;
	width: auto;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--prs-color-white);
	font-size: var(--prs-f-base);
	font-weight: 700;
	text-align: left;
}

/* 値引き・消費税・ポイント・送料・手数料は出さない（割引は下の箱に出ていて、お支払い合計に入っている） */
body.prs-member-member #content #history_head td.discount,
body.prs-member-member #content #history_head td.tax,
body.prs-member-member #content #history_head td.used_point,
body.prs-member-member #content #history_head td.get_point,
body.prs-member-member #content #history_head td.shipping,
body.prs-member-member #content #history_head td.cod {
	display: none;
}

body.prs-member-member #content #history_head td::before {
	content: attr(data-label) "：";
	font-weight: 400;
}

/* ご注文がないとき */
body.prs-member-member #content #history_head tr:not(.order_head_value) td {
	padding: var(--prs-s-4);
	border-radius: var(--prs-r-large);
	background: var(--prs-color-beige);
	color: var(--prs-color-text);
	font-weight: 400;
}

body.prs-member-member #content #history_head tr:not(.order_head_value) td::before {
	content: none;
}

/* 商品：カートと同じ箱（shop.css）。表の形はなくす */
body.prs-member-member #content table.retail,
body.prs-member-member #content table.retail > tbody,
body.prs-member-member #content table.retail .prs-history-row,
body.prs-member-member #content table.retail .prs-history-cell {
	display: block;
	width: auto;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

/* Welcart Basic は商品の表の文字を 11px にしているので、カートの箱と同じ大きさにもどす */
body.prs-member-member #content table.retail .prs-history-cell {
	color: var(--prs-color-text);
	font-size: var(--prs-f-base);
	line-height: 1.6;
	text-align: left;
}

body.prs-member-member #content table.retail {
	padding: var(--prs-s-3) var(--prs-s-4) var(--prs-s-1);
	border: 2px solid var(--prs-color-main);
	border-top: 0;
	border-radius: 0 0 var(--prs-r-large) var(--prs-r-large);
}

/* 「登録内容を変更しました。」（Welcart のお知らせの入れ物を、緑の箱に） */
body.prs-member-member #content .error_message:has(.prs-member-done),
body.prs-member-member_edit #content .error_message:has(.prs-member-done) {
	border-color: var(--prs-color-ok);
	background: var(--prs-color-ok-bg);
	color: var(--prs-color-ok);
}

/* 箱の見出し：Welcart Basic の「#memberinfo h3」（上の大きな余白・下の線）を消して、カートの箱と同じに */
body.prs-member-member #content #memberinfo .prs-box__title {
	margin: 0 0 0.5em;
	padding: 0;
	border: 0;
	background: none;
	font-size: 1.2em;
}

/* 登録内容の変更：［この内容で変更する］→［トップページへ戻る］（本人確認のあとの画面は［会員ページへもどる］）→ 少しはなして［退会する］ */
body.prs-member-member #content #memberinfo form .send input[name="editmember"],
body.prs-member-member_edit #content #memberedit form .send input[name="editmember"] {
	order: 1;
}

body.prs-member-member #content #memberinfo form .send input[name="deletemember"],
body.prs-member-member_edit #content #memberedit form .send input[name="deletemember"] {
	order: 10;
	width: auto;
	min-height: 44px;
	margin: var(--prs-s-6) auto 0;
	padding: var(--prs-s-1) var(--prs-s-4);
	border-color: var(--prs-color-error);
	background: var(--prs-color-white);
	color: var(--prs-color-error);
	font-size: var(--prs-f-small);
}

body.prs-member-member #content #memberinfo form .send input[name="deletemember"]:hover,
body.prs-member-member_edit #content #memberedit form .send input[name="deletemember"]:hover {
	background: var(--prs-color-error-bg);
	color: var(--prs-color-error);
}

.prs-member-delete-note {
	order: 11;
	margin: var(--prs-s-2) 0 0;
	color: var(--prs-color-note);
	font-size: var(--prs-f-small);
	text-align: center;
}

/* ===============================
   登録内容を変えるときの本人確認（Welcart の「会員情報編集時のメール認証」が有効なとき・welcart-member.php）
   =============================== */
/* 本人確認のあとの「登録内容の変更」の画面：［会員ページへもどる］は白に青い線。［トップページへ戻る］は出さない（上のヘッダーにある） */
body.prs-member-member_edit #content #memberedit .send input[name="back"] {
	order: 9;
	min-height: 50px;
	border-color: var(--prs-color-main);
	background: var(--prs-color-white);
	color: var(--prs-color-main);
	font-size: var(--prs-f-base);
}

body.prs-member-member_edit #content #memberedit .send input[name="back"]:hover {
	border-color: var(--prs-color-main-dark);
	background: var(--prs-color-main-light);
	color: var(--prs-color-main-dark);
}

body.prs-member-member_edit #content #memberedit .send input[name="top"] {
	display: none;
}

/* 何もないお知らせの入れ物は出さない */
body.prs-member-member_edit #content #memberedit .error_message:empty {
	display: none;
}

/* 「確認のメールを送りました」「リンクが使えませんでした」 */
.prs-member-verify__steps {
	margin: 0 0 var(--prs-s-5);
	padding: var(--prs-s-4) var(--prs-s-5);
	border-radius: var(--prs-r-large);
	background: var(--prs-color-main-light);
	font-size: var(--prs-f-base);
	line-height: var(--prs-lh);
}

.prs-member-verify__steps li {
	margin: 0 0 var(--prs-s-2);
}

.prs-member-verify__steps li:last-child {
	margin-bottom: 0;
}

.prs-member-verify__limit {
	margin: 0 0 var(--prs-s-3);
	color: var(--prs-color-wait);
	font-size: var(--prs-f-base);
	font-weight: 700;
}

.prs-member-verify__note {
	margin: 0;
	color: var(--prs-color-note);
	font-size: var(--prs-f-small);
	line-height: 1.7;
}

/* ===============================
   画面の真ん中に出す確認の窓（［登録内容を変える］［退会する］・member.js）
   形はカートの「どの方法で進むか」の窓（checkout.css の .prs-entry）とそろえる
   =============================== */
.prs-confirm {
	width: min(92vw, 30em);
	max-height: 92vh;
	overflow: auto;
	padding: var(--prs-s-5);
	border: none;
	border-radius: var(--prs-r-large);
	background: var(--prs-color-white);
	color: var(--prs-color-text);
	font-family: var(--prs-font);
	font-size: var(--prs-f-base);
	line-height: 1.6;
	text-align: center;
}

.prs-confirm::backdrop {
	background: rgba(0, 0, 0, 0.6);
}

.prs-confirm .prs-confirm__title {
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--prs-color-main-dark);
	font-size: var(--prs-f-large);
	font-weight: 700;
	line-height: 1.5;
}

.prs-confirm__text {
	margin: var(--prs-s-3) 0 var(--prs-s-5);
	text-align: left;
}

.prs-confirm__buttons {
	display: flex;
	flex-direction: column;
	gap: var(--prs-s-3);
}

.prs-confirm .prs-confirm__yes,
.prs-confirm .prs-confirm__cancel {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	min-height: 56px;
	margin: 0;
	padding: var(--prs-s-2) var(--prs-s-4);
	border: 2px solid var(--prs-color-main);
	border-radius: var(--prs-r-small);
	background: var(--prs-color-main);
	color: var(--prs-color-white);
	font-family: inherit;
	font-size: var(--prs-f-large);
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
}

.prs-confirm .prs-confirm__yes:hover {
	border-color: var(--prs-color-main-dark);
	background: var(--prs-color-main-dark);
	color: var(--prs-color-white);
}

/* 退会：赤 */
.prs-confirm .prs-confirm__yes--danger {
	border-color: var(--prs-color-error);
	background: var(--prs-color-error);
}

.prs-confirm .prs-confirm__yes--danger:hover {
	border-color: var(--prs-color-error);
	background: var(--prs-color-error);
	filter: brightness(0.9);
}

/* やめる：白に青い線 */
.prs-confirm .prs-confirm__cancel {
	min-height: 50px;
	background: var(--prs-color-white);
	color: var(--prs-color-main);
	font-size: var(--prs-f-base);
}

.prs-confirm .prs-confirm__cancel:hover {
	background: var(--prs-color-main-light);
	color: var(--prs-color-main-dark);
}

/* ===============================
   完了（会員登録の完了・メールを送りました など）
   =============================== */
/* 上の黒い「完了」は出さない（すぐ下の「会員登録が完了しました。」が見出しの役わり） */
body.prs-member-completion #content .member_page_title {
	display: none;
}

body.prs-member-completion #content #memberpages > p:first-of-type {
	margin: 0 0 var(--prs-s-4);
	color: var(--prs-color-main);
	font-size: var(--prs-f-h2);
	font-weight: 700;
	line-height: 1.5;
}

body.prs-member-completion #content #memberpages > p {
	font-size: var(--prs-f-base);
	line-height: var(--prs-lh);
}

body.prs-member-completion #content #memberpages > p:has(+ .send) {
	max-width: 480px;
	margin: var(--prs-s-6) auto 0;
}

/* 「会員ページへ」が進むボタン（青）なので、「トップページへ戻る」は白に青い線 */
body.prs-member-completion #content .send {
	margin-top: var(--prs-s-3);
}

body.prs-member-completion #content .send a.back_to_top_button {
	min-height: 50px;
	border-color: var(--prs-color-main);
	background: var(--prs-color-white);
	color: var(--prs-color-main);
	font-size: var(--prs-f-base);
}

body.prs-member-completion #content .send a.back_to_top_button:hover {
	background: var(--prs-color-main-light);
	color: var(--prs-color-main-dark);
}

/* ===============================
   スマホ
   =============================== */
@media (max-width: 600px) {
	body.prs-member #content .member-box,
	body.prs-member-lostmemberpassword #content #loginform,
	body.prs-member-changepassword #content #loginform,
	.prs-member-cart {
		padding-right: var(--prs-s-4);
		padding-left: var(--prs-s-4);
	}

	/* お名前・会員番号など：見出しを上、中身を下に */
	body.prs-member-member #content #memberinfo > table > tbody {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
		padding: var(--prs-s-3) var(--prs-s-4);
	}

	body.prs-member-member #content #memberinfo > table th {
		font-size: var(--prs-f-small);
	}

	body.prs-member-member #content #memberinfo > table td {
		margin-bottom: var(--prs-s-2);
	}

	body.prs-member-member #content table.retail {
		padding-right: var(--prs-s-2);
		padding-left: var(--prs-s-2);
	}
}