@charset "utf-8";

/* =============================================================
   会員情報編集ページ（usces-member / member_edit）専用スタイル
   - すべて .member-page 配下にスコープを限定し、他ページへ影響させない
   - レスポンシブ対応（768px / 1150px ブレイクポイント）
============================================================= */

/* -------------------------------------------------------------
   ① 固定ヘッダーに内容が重ならないように余白を確保
   （ヘッダーは position:fixed / PC高さ100px・1150px以下は60px）
------------------------------------------------------------- */
.member-page {
	width: 90%;
	max-width: 760px;
	margin: 0 auto;
	padding-top: 140px;
	padding-bottom: 80px;
}

.member-page .member_page_title {
	margin: 0 0 1.2em;
	font-size: 2.8rem;
	text-align: center;
	letter-spacing: .1em;
}

/* フォーム全体を白いカードで囲んで区切りを明確にする */
.member-page .whitebox {
	padding: 2.5em;
	background: #ffffff;
	border: 1px solid #e5e0dd;
	border-radius: 8px;
	box-shadow: 0 2px 12px rgb(0 0 0 / 6%);
}

/* エラーメッセージ（内容がある時だけ表示される想定） */
.member-page .error_message:not(:empty) {
	margin: 0 0 1.5em;
	padding: 1em 1.2em;
	color: #c0392b;
	font-size: 1.4rem;
	background: #fdecea;
	border: 1px solid #f5c6c2;
	border-radius: 6px;
}

/* -------------------------------------------------------------
   入力テーブルのレイアウト
------------------------------------------------------------- */
.member-page table.customer_form {
	width: 100%;
	border-collapse: collapse;
}

.member-page table.customer_form th,
.member-page table.customer_form td {
	padding: 1em .6em;
	border-bottom: 1px solid #eeeeee;
	vertical-align: middle;
	text-align: left;
}

.member-page table.customer_form th {
	width: 11em;
	color: #3f3130;
	font-weight: bold;
	font-size: 1.5rem;
	white-space: nowrap;
}

/* 必須マーク「＊」 */
.member-page table.customer_form th em {
	margin-right: .3em;
	color: #d42900;
	font-style: normal;
}

/* -------------------------------------------------------------
   ② 入力欄に枠をつけて、入力箇所をわかりやすくする
------------------------------------------------------------- */
.member-page #memberedit input[type="text"],
.member-page #memberedit input[type="password"],
.member-page #memberedit select {
	box-sizing: border-box;
	width: 100%;
	max-width: 360px;
	padding: .6em .8em;
	color: #333333;
	font-size: 1.6rem;
	line-height: 1.4;
	background: #ffffff;
	border: 1px solid #c4bdb8;
	border-radius: 5px;
	-webkit-appearance: none;
	appearance: none;
}

.member-page #memberedit input[type="text"]:focus,
.member-page #memberedit input[type="password"]:focus,
.member-page #memberedit select:focus {
	outline: none;
	border-color: #0a9315;
	box-shadow: 0 0 0 3px rgb(10 147 21 / 15%);
}

/* 都道府県プルダウンは矢印分の余白を確保 */
.member-page #memberedit select.pref {
	max-width: 240px;
	padding-right: 2em;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%233f3130' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .8em center;
}

/* 郵便番号は短めに */
.member-page #memberedit #zipcode {
	max-width: 200px;
}

/* 郵便番号「住所検索」ボタン */
.member-page #memberedit #search_zipcode {
	width: auto;
	margin-left: .6em;
	padding: .55em 1.2em;
	color: #3f3130;
	font-size: 1.4rem;
	background: #f3efec;
	border: 1px solid #c4bdb8;
	border-radius: 5px;
	cursor: pointer;
}

.member-page #memberedit #search_zipcode:hover {
	background: #e8e2dd;
}

/* 姓名・フリガナの「姓 / 名 / セイ / メイ」ラベル */
.member-page table.customer_form td.name_td {
	white-space: nowrap;
}

.member-page .member_name,
.member-page .member_furigana {
	display: inline-block;
	margin-right: .5em;
	color: #6b605b;
	font-size: 1.4rem;
}

.member-page td.name_td input[type="text"] {
	max-width: 220px;
}

/* -------------------------------------------------------------
   ⑤ ボタン群を見やすく・押しやすく（背景色・枠で区切りを明確化）
------------------------------------------------------------- */
.member-page .send {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
	justify-content: center;
	margin-top: 2.5em;
	padding-top: 0;
}

.member-page .send input {
	box-sizing: border-box;
	min-width: 200px;
	padding: 1em 1.5em;
	font-size: 1.6rem;
	letter-spacing: .08em;
	border-radius: 6px;
	border: 1px solid transparent;
	cursor: pointer;
	transition: opacity .2s, background-color .2s;
	-webkit-appearance: none;
	appearance: none;
}

.member-page .send input:hover {
	opacity: .85;
}

/* 「トップページへ戻る」「会員情報ページヘ戻る」：戻る系（白＋枠） */
.member-page .send .top {
	color: #3f3130;
	background: #ffffff;
	border-color: #c4bdb8;
}

/* 「更新する」：主要アクション（緑） */
.member-page .send .editmember {
	color: #ffffff;
	font-weight: bold;
	background: #0a9315;
	border-color: #0a9315;
}

/* 「退会する」：危険な操作（赤の枠線で区別） */
.member-page .send .deletemember {
	color: #c0392b;
	background: #ffffff;
	border-color: #d9a7a1;
}

.member-page .send .deletemember:hover {
	color: #ffffff;
	background: #c0392b;
	opacity: 1;
}

/* -------------------------------------------------------------
   ③ 例文を placeholder（薄い文字）として表示
   ※ usces-member.js が裸テキストを placeholder に変換する
   ※ placeholder は入力欄が空のときだけ表示される
------------------------------------------------------------- */
.member-page #memberedit input::placeholder {
	color: #b3aaa4;
	opacity: 1;
}

.member-page #memberedit input::-webkit-input-placeholder {
	color: #b3aaa4;
}

/* -------------------------------------------------------------
   ④ 注意書きを入力欄の下の注釈として表示
   ※ usces-member.js が「※〜」を .form-note 要素に変換する
------------------------------------------------------------- */
.member-page #memberedit .form-note {
	margin: .5em 0 0;
	color: #6b605b;
	font-size: 1.3rem;
	line-height: 1.5;
}

/* -------------------------------------------------------------
   レスポンシブ：1150px以下（ヘッダー高さが60pxになる）
------------------------------------------------------------- */
@media screen and (max-width: 1150px) {
	.member-page {
		padding-top: 90px;
	}
}

/* -------------------------------------------------------------
   レスポンシブ：768px以下（ラベルと入力欄を縦並びに）
------------------------------------------------------------- */
@media screen and (max-width: 768px) {
	.member-page {
		width: 92%;
		padding-bottom: 60px;
	}

	.member-page .member_page_title {
		font-size: 2.2rem;
	}

	.member-page .whitebox {
		padding: 1.5em 1.2em;
	}

	/* テーブルを縦積みのブロックレイアウトに */
	.member-page table.customer_form,
	.member-page table.customer_form tbody,
	.member-page table.customer_form tr,
	.member-page table.customer_form th,
	.member-page table.customer_form td {
		display: block;
		width: 100%;
	}

	.member-page table.customer_form tr {
		padding: 1em 0;
		border-bottom: 1px solid #eeeeee;
	}

	.member-page table.customer_form th,
	.member-page table.customer_form td {
		padding: 0;
		border-bottom: none;
		white-space: normal;
	}

	.member-page table.customer_form th {
		width: 100%;
		margin-bottom: .5em;
	}

	/* 入力欄は画面幅に合わせて広げる */
	.member-page #memberedit input[type="text"],
	.member-page #memberedit input[type="password"],
	.member-page #memberedit select,
	.member-page #memberedit select.pref,
	.member-page #memberedit #zipcode,
	.member-page td.name_td input[type="text"] {
		max-width: 100%;
	}

	/* お名前（姓・名）もフリガナ欄と同様に、ラベルを上・入力欄を下へ縦積みにする
	   （汎用 td ルールやベース name_td ルールに勝てるよう詳細度を合わせる） */
	.member-page table.customer_form td.name_td {
		display: block;
		white-space: normal;
	}

	.member-page table.customer_form td.name_td:first-of-type {
		margin-bottom: .6em;
	}

	.member-page .member_name,
	.member-page .member_furigana {
		display: block;
		width: auto;
		margin-right: 0;
		margin-bottom: .5em;
	}

	/* 郵便番号は入力欄と検索ボタンを縦に並べる */
	.member-page #memberedit #search_zipcode {
		margin-left: 0;
		margin-top: .6em;
	}

	/* ボタンは縦並び・全幅で押しやすく */
	.member-page .send input {
		width: 100%;
		min-width: 0;
	}
}