body {
    font-family: 'Noto Sans JP', sans-serif;
}

.main-container {
	min-height: 90vh;
	margin: 1rem;
}

.logo {
	width: 6rem;
    height: 4rem;
    margin-left: 1rem;	
}

.title {
	margin: 0 auto;
    font-size: 1.5rem;
	text-align: center;
	margin: 1rem 0;
}

.input-container {
	margin: 1rem;
	box-sizing: border-box;
	width: 100%;
}

.input {
	width: 88%;
    padding: 0.5rem;
    font-size: 1rem;
	background: rgb(255, 252, 247);
    border: 3px rgb(117 117 117) solid;
    border-radius: 0.5rem;
	margin-top: 0.5rem;
	line-height: 2rem;
}

.forget-link-container {
	margin: 1rem;
}

.forget-link {
	font-size: 0.75rem;
	color: black;
}

.label {
	font-size: 1rem;
	font-weight: bold;
}

.text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
}
.leading-6 {
    line-height: 1.5rem;
}
.font-medium {
    font-weight: 500;
}
.text-center {
    text-align: center;
}
.py-2\.5 {
    padding-top: .625rem;
    padding-bottom: .625rem;
}
.px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
.bg-hab {
    --tw-bg-opacity: 1;
    background-color: rgb(255 89 0 / var(--tw-bg-opacity));
}
.rounded-full {
    border-radius: 9999px;
}

.w-full {
    width: 93%;
}
.h-\[56px\] {
    height: 56px;
}

.border-trans {
	border: transparent;
}

.login-button {
	height: 4rem;
    font-size: 1.2rem;	
}

.error {
    background: #fbeceb;
	font-size: 1rem;
    font-weight: bold;
	margin: 0rem;
	padding-right: 2rem;
	padding-left: 2rem;
	height: 5rem;
	display: flex;
	justify-content: center;
}

.login-error-msg {
	margin-top: 1rem;
	margin-bottom: 1rem;
	color: #571c18;
}

.login-error-msg::before {
	content: '';
	display: inline-block;
	width: 14px;
	height: 14px;
	background-image: url('../images/icons/error_icon.png');
	background-size: cover;
	margin-right: 0.6rem;
    transform: scale(1.2);
}

.input:focus {
    border: 2px solid rgb(255 89 0);
}
.input.error-input {
    border: 2px solid #cd473b;
}
.label.focused {
    color: rgb(255 89 0);
}
.label.error-label {
    color: #cd473b;
}
.error-message {
    color: red;
    font-size: 2em;
    margin-top: 5px;
}
.input-container {
    position: relative;
}
.toggle-password {
	position: absolute;
    right: 3rem;
    top: 8rem;
    transform: translateY(-1rem) scale(4);
    cursor: pointer;
    width: 0.8rem;
    height: 0.8rem;
}

.input:focus {
    border: 2px solid rgb(255 89 0);
}
.input.error-input {
    border: 2px solid #cd473b;
}
.label.focused {
    color: rgb(255 89 0);
}
.label.error-label {
    color: #cd473b;
}
.error-message {
    color: red;
    font-size: 2em;
    margin-top: 5px;
}
.input-container {
    position: relative;
}
.toggle-password {
	position: absolute;
	right: 13%;
    top: 70%;
    transform: translateY(-50%) scale(4);
    cursor: pointer;
    width: 0.4rem;
    height: 0.4rem;
}