@charset "UTF-8";
/* ログインページ用 */

/* #login_section の高さを #registration_section に合わせるため、#form の余白を詰める（email+password+remember_me の合計高さを remember_me 追加前の email+password に近づける） */
#login_section #form dt,
#login_section #form dd {
	margin-top: 0.25em;
	margin-bottom: 0.25em;
}
#login_section #form .remember_me_row {
	margin-top: 0.15em;
	margin-bottom: 0.15em;
}
#login_section #form {
	margin-block-start: 0.9em;
	margin-block-end: 0.9em;
}

/* #remember_me のチェックボックスとラベルの上下を揃える */
#login_section #form .remember_me_row {
	display: flex;
	align-items: center;
	padding-left: 0;
}
#login_section #form .remember_me_row #remember_me {
	margin: 0;
	vertical-align: middle;
}
#login_section #form .remember_me_row label {
	margin: 0 0 0 0.3em;
	vertical-align: middle;
}

/* レスポンシブ（狭い画面） */

/* 上のブロック：入力欄の max-width、ログインボタンは常に左右中央（画面幅に依存しない） */
#main form table td:first-child .login-frame #login_email_address {
	max-width: 25ch;
	box-sizing: border-box;
}
#main form table td:first-child .login-frame #login_password {
	max-width: 21ch;
	box-sizing: border-box;
}
#main form table td:first-child .login-frame .button_login {
	text-align: center;
	margin-top: 6px;
	margin-bottom: 9px;
}
#main form table td:first-child .login-frame #login_button {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/*
画面幅が狭い時：2つの td ブロックを縦並び・中央配置、パンくず左端、#top-price-list を画面幅に合わせて縮小
*/
@media screen and (max-width: 960px) {
	/* #main を画面幅いっぱいにし、中身は中央に配置（ブロックが縮小しないようにする） */
	#main {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100% !important;
		max-width: none;
		margin-left: 0;
		margin-right: 0;
		padding-left: 1em;
		padding-right: 1em;
		box-sizing: border-box;
		overflow-x: hidden;
	}

	/* パンくず「Home > ...」を左端に配置（#main 内の幅いっぱいで左揃え） */
	#breadcrumb {
		float: none;
		width: 100%;
		box-sizing: border-box;
	}

	/* フォームは幅いっぱいにして、テーブルを margin auto で確実に中央に配置 */
	#main form {
		display: block;
		width: 100%;
	}

	/* フォーム内テーブル：block にして margin 0 auto で中央寄せ、画面が狭いときは縮小 */
	#main form table {
		display: block;
		width: 100% !important;
		max-width: 400px;
		min-width: 0;
		margin-left: auto;
		margin-right: auto;
		box-sizing: border-box;
	}

	/* tbody が table より幅広くならないようにする（350px 以下で右寄りに見えるのを防ぐ） */
	#main form table tbody {
		display: block;
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}

	/* 2つの td を縦に並べ、それぞれを画面左右中央に配置 */
	#main form table tbody tr,
	#main form table tr {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}
	/* 画面幅がブロックより狭いときは縮小、広いときは最大 400px */
	#main form table td {
		display: block;
		width: 100%;
		max-width: 400px;
		min-width: 0;
		flex-shrink: 1;
		box-sizing: border-box;
	}

	/* .login-frame：td の幅に収め、横マージンなしで中央に見えるようにする */
	#main form table td .login-frame {
		width: 100%;
		max-width: 400px;
		height: auto;
		min-height: 200px;
		margin-left: 0;
		margin-right: 0;
		margin-top: 20px;
		margin-bottom: 20px;
		box-sizing: border-box;
	}

	/* #wrapper480-l を幅いっぱいにし、float を解除 */
	#wrapper480-l {
		width: 100%;
		float: none;
		max-width: 960px;
		box-sizing: border-box;
	}

	#wrapper480-r {
		width: 100%;
		float: none;
		box-sizing: border-box;
	}

	/* #top-price-list を画面幅に合わせて縮小 */
	#top-price-list {
		width: 100% !important;
		max-width: 960px;
		margin-left: auto;
		margin-right: auto;
		box-sizing: border-box;
	}
	#top-price-list img {
		max-width: 100%;
		height: auto;
	}
}

/*
画面幅がブロックより狭い時のみ：上のブロックの input を折り返し・右端配置
（ブロック縦並び時点＝960px では適用せず、ブロック幅未満になってから適用）
*/
@media screen and (max-width: 440px) {
	/* 上のブロック：input が折り返された時に親要素の左端に配置、入力欄は右端に配置 */
	#main form table td:first-child .login-frame dl {
		margin: 0;
		padding: 0;
	}
	#main form table td:first-child .login-frame dt {
		float: none;
		display: block;
		width: auto;
		text-align: left;
		margin: 0.3em 0 0 0;
		padding: 0;
	}
	#main form table td:first-child .login-frame dt:first-child {
		margin-top: 0;
	}
	#main form table td:first-child .login-frame dd {
		margin: 0.3em 0 1em 0;
		padding-left: 0;
		display: flex;
		justify-content: flex-end;
	}
	#main form table td:first-child .login-frame dd input {
		width: auto;
		max-width: 100%;
		box-sizing: border-box;
	}
}