/* ===========================================================
   レイアウト
   - チャットボット(#chatplusview)は #container_top の中に入る
   - #container_top のサイズはチャットボットの実サイズ(--cb-w/--cb-h)を反映
   - PC : #container_top を右に固定幅 / #container_bottom は左で残り幅
   - SP : #container_top はウィンドウサイズ / 閉じたら上付きに縮む
          #container_bottom は #container_top の下（スクロール or 閉じると閲覧可）
   =========================================================== */

* { box-sizing: border-box; }

html, body {
	margin: 0;
	padding: 0;

	background-color:#f4f4f4;
}

body {
	--top-space:min(30px, 5vw);
	padding:0 0 0;
}

header{
	padding:var(--top-space) 30px;
}

h1{
	width: auto;
	max-width: 468px;
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	background: transparent;
}

h1 img{
	width: auto;
	max-width: 100%;
}

#wrapper{
	display: flex;
	flex-direction: column;
	align-items: center;

	margin:auto;
	padding: 64px 64px 0;

	max-width: 666px;
	width: 100vw;
	min-height: 928.03px;

	background: #FFFFFF;
	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15);
	border-radius: 8px;

	flex: none;
	order: 0;
	flex-grow: 0;
}

.login{
	margin:0 auto;
	padding: 24px 10px 0px;

	max-width: 468px;
	width:100%;
	min-height: 242px;

	flex-direction: column;
	align-items: flex-start;
	gap: 16px;

}

.login p{
	margin:0 0 8px;

	height: 24px;

	font-family: 'Noto Sans JP';
	font-style: normal;
	font-weight: 500;
	font-size: 16px;
	line-height: 24px;
	/* identical to box height, or 150% */
	letter-spacing: 0.64px;

	color: #000000;

	flex: none;
	order: 0;
	flex-grow: 0;
}

.login form{
	width: 100%;;
}


.login input[type=text],.login input[type=password]{
	margin:0 0 12px;

	width: 100%;
	height: 52px;

	padding:4px 10px;
	font-size: 1.2rem;

	box-sizing: border-box;
	background: #FFFFFF;
	border: 1px solid #D1D0C9;
	border-radius: 4.7px;
	flex: none;
	order: 1;
	align-self: stretch;
	flex-grow: 0;
}

.login input[type=password]{
	padding-right: 40px;
}


.login_btn{
	margin-bottom:64px;
}

.login_btn:hover{
	opacity: 0.5;
}

.login_btn a{
	margin:0 auto;
	box-sizing: border-box;

	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 20px 80px;
	gap: 12px;

	width: 300px;
	height: 60px;

	background: #E5F0FF;
	/* メイン */
	border: 2px solid #134996;
	border-radius: 4px;

	text-decoration: none;

	flex: none;
	order: 0;
	flex-grow: 0;

}

.login #error-message{
	width: 100%;
	color:#FF0000;
}

#pass{
	/* 余白はラッパー(.pass_wrap)側へ移動した */
	margin-bottom:0;
	/* inline-block の下に出る余白を消して、アイコンの上下中央を正確に合わせる */
	display: block;
	/* 入力文字がアイコンに重ならないように右側を空ける */
	padding-right: 48px;
	flex: none;
	order: 1;
	flex-grow: 0;
}

/* ---- パスワードの表示／非表示アイコン ---- */
.pass_wrap{
	position: relative;      /* アイコンの位置基準 */
	width: 100%;
	margin-bottom: 64px;     /* もとの #pass の余白 */
}

.pass_toggle{
	position: absolute;
	top: 50%;
	right: 12px;             /* #pass の枠線の内側に収める */
	transform: translateY(-50%);

	display: flex;
	align-items: center;
	justify-content: center;

	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: transparent;
	line-height: 1;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.pass_toggle:hover{
	opacity: 0.6;
}

.pass_toggle img{
	display: block;
	width: 24px;
	height: 24px;
}

#submit_btn{
	box-sizing: border-box;

	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 20px 80px;
	gap: 12px;

	max-width: 300px;
	height: 60px;
	background: #E5F0FF;
	
	border: 2px solid #134996;
	border-radius: 4px;

	font-family: 'Noto Sans JP';
	font-style: normal;
	font-weight: 600;
	font-size: 16px;
	line-height: 27px;

	letter-spacing: 0.02em;

	color: #134996;

	flex: none;
	order: 0;
	flex-grow: 0;
}


.msg01{
	margin: 0 auto;

	width: 100%;
	max-width: 506px;

	font-family: 'Noto Sans JP';
	font-style: normal;
	font-weight: 400;
	font-size: 16px;
	line-height: 150%;
	/* or 24px */
	/* letter-spacing: 0.1em;*/
	letter-spacing:-0.001rem;

	color: #000000;

	/* Inside auto layout */
	flex: none;
	order: 0;
	align-self: stretch;
	flex-grow: 0;
}

.img01{
	padding-bottom:10px;

	display: inline-block;
	width: 100%;
	text-align: right;
}

.img01 img{
	display: inline;
	/* ウィンドウの高さ・幅の両方に連動させる。
	   拡大でぼやけないよう、上限は元画像の幅(91px)に合わせる */
	width: clamp(140px, calc(5vh + 5vw), 182px);
	height: auto;
}

#copyright{
	padding:34px 0 34px;
	text-align: center;

	height: 19px;

	font-family: 'Noto Sans JP';
	font-style: normal;
	font-weight: 400;
	font-size: 12px;
	line-height: 19px;

	text-align: center;
	letter-spacing: 0.24px;

	color: #000000;

	flex: none;
	order: 0;
	flex-grow: 0;

}