@charset "UTF-8";

body {
    text-align: center;
}
header,
main {
    width: 50%;
    margin: 0 auto;
    border: 2px solid #C6A976;
}
header {
    margin-top: 5em;
    padding: 1.5em 0 1em 0;
    border-bottom: none;
}
header h1 {
    font-size: 2em;
}
main {
    padding: 0.5em 0 1.5em 0;
    border-top: none;
    background: none;
}
li {
    list-style: none;
}
li:last-child {
    margin: 0.5em auto 1em auto;
}
p input {
    padding: 0.2em 1.5em;
    border: none;
    border-radius: 1em;
    background: #82682F;
    color: #FFF;
}
p input:hover {
    opacity: 0.8;
}
img {
    width: 30%;
    margin-top: 1.5em;
}

/* ログイン失敗時 */
.alert {
	color: #B94A48;
	font-size: 14px;
	padding: 0 0 10px 0;
}

/* BEGIN start by j-suga 2021/08/10 */
/* BEGIN end by j-suga 2021/08/10 */

/* add start by j-suga @2021/08/11 */
/* デバイスサイズに応じて表示調整 */
/* 狭いブラウザとタブレット向け */
@media (max-width: 1020px) and (min-width: 768px) {
	header,
	main {
	    width: 355px;
	}

	input[type="text"],
	input[type="password"] {
		width: 80%;
	}
}
/* スマホ向け */
@media (max-width: 767px) {
	header,
	main {
	    width: 355px;
	}

	input[type="text"],
	input[type="password"] {
		width: 80%;
	}
}
/* add end by j-suga @2021/08/11 */