/* ==========================================================================
   Login
   ========================================================================== */
@media (max-width: 720px) {
	.login-sp-contents-hidden {
		display: none;
	}
}

.login-pc-contents-hidden {
	display: none;
}
@media (max-width: 720px) {
	.login-pc-contents-hidden {
		display: block;
	}
}

.login-body {
	background-color: var(--box-color);
	overflow-x: hidden;
}

.login {
	padding-left: 5%;
	padding-right: 5%;
}

@media (min-width: 481px) {
	.login {
		width: 100%;
		background-color: #effbff;
	}
}

.login-display-version-area {
	text-align: right;
}

.sitelogo {
	margin-top: 20px;
	text-align: center;
}

.login-split {
	display: table;
	width: 100%;
}

.login-split-item {
	display: table-cell;
}

.login-left-inner {
	height: 100%;
	width: 50%;
}

@media (max-width: 720px) {
	.login-left-inner {
		width: 100%;
	}
}

.login-left {
	background-color: var(--box-color);
	margin: 0;
	padding: 0;
	float: left;
}

@media (max-width: 720px) {
	.login-left {
		max-height: 540px;
		display: block;
		-webkit-box-align: end;
		-ms-flex-align: end;
		align-items: flex-end;
	}
}

.login-logo {
	position: absolute;
	/*	top: 0;
	left: 0;
	width: 220px;
	height: 88px;*/
	background-color: var(--box-color);
	/*	display: flex;
	justify-content: center;
	align-items: center;*/
	border-bottom-right-radius: 10px;
}

@media (max-width: 720px) {
	.login-logo {
		display: none;
	}
}

.login-banner img {
	width: 100%;
}

.login-banner-img {
	width: 100%;
	height: 100%;
	padding-bottom: 50%; /* 横幅の50%に合わせて高さを設定 */
	background-image: url("/sitelogo?fileType=banner");
	background-size: cover; /* 画像を切り取る */
	background-position: center; /* 画像を中央に配置 */
}

.login-banner {
	background-color: var(--box-color);
	height: 100vh;
	width: 100%;
	margin: 0;
	padding: 0;
	float: left;
}

@media (max-width: 720px) {
	.login-banner {
		max-height: 280px;
		display: block;
		-webkit-box-align: end;
		-ms-flex-align: end;
		align-items: flex-end;
		margin-top: 80px;
	}
}

.login-right {
	float: right;
	background-color: var(--box-color);
}

.login-right-inner {
	height: 100%;
	width: 49%;
}

@media (max-width: 720px) {
	.login-right-inner {
		width: 100%;
	}
}

.login-header-area {
	background-color: var(--box-color);
	padding: 20px;
	position: relative;
	/*	width:100%;*/
	height: 60px;
	line-height: 60px;
	align-items: center;
}
@media (max-width: 720px) {
	.login-header-area {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		background: var(--box-color);
		padding: 10px;
		-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.16);
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.16);
		display: flex;
		line-height: normal;
		z-index: 10;
	}
}

.header_logo {
	display: none;
}
@media (max-width: 720px) {
	.header_logo {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 130px;
	}
}

.login-button-area {
	position: absolute;
	right: 5%;
}
@media (max-width: 720px) {
	.login-button-area {
		position: absolute;
		display: flex;
		right: 8%;
	}
}

.login-change-lang-area {
	font-size: 14px;
	font-weight: normal;
	color: var(--base-font);
	padding: 13px 20px;
	text-decoration: none;
}
@media (max-width: 720px) {
	.login-change-lang-area {
		display: block;
		font-size: 12px;
		/*padding: 17px 10px;*/
		text-align: center;
	}
}
.login-change-lang-area::before {
	content: "";
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-right: 5px;
	vertical-align: -2px;
	background: url(/img/icon-language-5ab756168020b6af4fcf23e3f1a460eb.svg) no-repeat center/100%;
}
@media (max-width: 720px) {
	.login-change-lang-area::before {
		margin-right: 2px;
		margin-bottom: 3px;
	}
}
.login-unique-button-sso {
	color: var(--main-color);
	font-weight: bold;
	text-decoration: none;
	padding: 5px 20px;
}

@media (max-width: 720px) {
	.login-unique-button-sso {
		color: var(--main-color);
		display: block;
		font-weight: normal;
		font-size: 12px;
		border-radius: 5px;
		background-color: var(--box-color);
		border: solid 2px var(--main-color);
		padding: 5px 5px;
		margin: 0 5px;
		text-align: center;
	}
	.login-unique-button-sso:hover {
		background-color: var(--hover-color);
	}
}
.login-unique-button-sso::before {
	content: none;
}
@media (max-width: 720px) {
	.login-unique-button-sso::before {
		color: var(--main-color);
		content: "";
		position: relative;
		display: inline-block;
		width: 10px;
		height: 10px;
		padding: 5px;
		vertical-align: -5px;
		mask-image: url(/img/icon-login2-22cf70b6c5654e30fc1008de14f09a28.svg);
		background-color: var(--main-color);
	}
}
.login-unique-button-sso::after {
	color: var(--main-color);
	content: "";
	position: relative;
	display: inline-block;
	width: 10px;
	height: 10px;
	/*	margin-left: 5px;
	margin-top: 5px;*/
	padding: 5px;
	vertical-align: -3px;
	/*	background: url(/img/icon-login2-22cf70b6c5654e30fc1008de14f09a28.svg) no-repeat center/100%;*/
	mask-image: url(/img/icon-login2-22cf70b6c5654e30fc1008de14f09a28.svg);
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: inherit;
	background-color: var(--main-color);
}
@media (max-width: 720px) {
	.login-unique-button-sso::after {
		content: none;
	}
}
.login-unique-button {
	/*	display: inline-block;*/
	margin-left: 10px;
	padding: 8px 20px;
	background-color: var(--main-color);
	color: var(--box-color);
	text-decoration: none;
	border-radius: 50px;
}
@media (max-width: 720px) {
	.login-unique-button {
		color: var(--box-color);
		display: block;
		font-weight: normal;
		font-size: 12px;
		border-radius: 5px;
		background-color: var(--main-color);
		padding: 8px 10px;
		width: auto;
		text-align: center;
	}
	.login-unique-button:hover {
		background-color: var(--hover-color);
	}
}

.login-unique-button:hover {
	background-color: var(--hover-color);
}
.login-unique-button::before {
	content: none;
}
@media (max-width: 720px) {
	.login-unique-button::before {
		color: var(--main-color);
		content: "";
		position: relative;
		display: inline-block;
		width: 25px;
		height: 25px;
		/*margin-left: 10px;*/
		/*padding: 5px;*/
		/*vertical-align: -5px;*/
		background: url(/img/icon-login1-5772c2213346eb2b7c64136e72016ad6.svg) no-repeat center/100%;
	}
}
.login-unique-button::after {
	content: "";
	position: relative;
	display: inline-block;
	width: 15px;
	height: 15px;
	margin-left: 5px;
	vertical-align: -3px;
	background: url(/img/icon-login1-5772c2213346eb2b7c64136e72016ad6.svg) no-repeat center/100%;
}
@media (max-width: 720px) {
	.login-unique-button::after {
		content: none;
	}
}

.login-common-button {
	/*	display: inline-block;*/
	margin-left: 10px;
	padding: 8px 20px;
	background-color: var(--main-color);
	color: var(--box-color);
	text-decoration: none;
	border-radius: 50px;
}
@media (max-width: 720px) {
	.login-common-button {
		color: var(--box-color);
		display: block;
		font-weight: normal;
		font-size: 12px;
		border-radius: 5px;
		background-color: var(--main-color);
		padding: 8px 10px;
		margin-left: 5px;
		text-align: center;
	}
	.login-common-button:hover {
		background-color: var(--hover-color);
	}
}

.login-common-button:hover {
	background-color: var(--hover-color);
}
.login-common-button::before {
	content: none;
}
@media (max-width: 720px) {
	.login-common-button::before {
		color: var(--main-color);
		content: "";
		position: relative;
		display: inline-block;
		width: 10px;
		height: 10px;
		padding: 5px;
		vertical-align: -5px;
		background: url(/img/icon-login1-5772c2213346eb2b7c64136e72016ad6.svg) no-repeat center/100%;
	}
}
.login-common-button::after {
	content: "";
	position: relative;
	display: inline-block;
	width: 15px;
	height: 15px;
	margin-left: 5px;
	vertical-align: -3px;
	background: url(/img/icon-login1-5772c2213346eb2b7c64136e72016ad6.svg) no-repeat center/100%;
}
@media (max-width: 720px) {
	.login-common-button::after {
		content: none;
	}
}

.login-block-title {
	float: left;
	background-color: var(--box-color);
	border-bottom: 2px solid var(--main-color);
	padding: 20px 0px 5px 0px;
	width: 100%;
}
.login-information {
	margin-top: 20px;
}
.login-block-title-txt {
	font-size: 200%;
	font-weight: bold;
	width: 100%;
	word-break: break-all;
}
.login-information-area {
	background-color: white;
	text-align: left;
	padding: 0px 1px 0px 0px;
	overflow: auto;
}
.login-infotext {
	font-size: 110%;
	min-height: 600px;
	word-break: break-all;
}
@media (max-width: 720px) {
	.login-infotext {
		font-size: 110%;
		min-height: 0px;
		word-break: break-all;
	}
}

.popup {
	display: none;
	position: fixed;
	top: 30%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: #fff;
	padding: 50px;
	border: 1px solid #ccc;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
	border-radius: 10px;
	/*	width: 500px;
	height: 220px;*/
	z-index: 9999;
}
.login-cancel-button {
	width: 30px;
	height: 30px;
	position: absolute;
	top: 10px;
	right: 10px;
	mask-image: url(/img/close_ico-81220704ae8e87473d1649cfa54d20bd.svg);
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: inherit;
	flex-shrink: 0;
	background-color: var(--main-color);
}
.login-cancel-button:hover {
	background-color: var(--hover-color);
}
.login-popup-unique-button {
	display: inline-block;
	padding: 12px 30px;
	background-color: var(--main-color);
	color: var(--box-color);
	text-decoration: none;
	border-radius: 50px;
	font-size: 15px;
	margin-top: 20px;
}
.login-popup-unique-button:hover {
	background-color: var(--hover-color);
}

.login-popup-unique-button::after {
	content: "";
	position: relative;
	display: inline-block;
	width: 15px;
	height: 15px;
	margin-left: 5px;
	vertical-align: -3px;
	background: url(/img/icon-login1-5772c2213346eb2b7c64136e72016ad6.svg) no-repeat center/100%;
}
@media (max-width: 720px) {
	.login-popup-unique-button::after {
		content: none;
	}
}
.input-login-pass-box2 {
	width: 300px;
	height: 40px;
	margin-top: 5px;
	margin-bottom: 5px;
	border-radius: 5px;
}
@media (max-width: 480px) {
	.input-login-pass-box2 {
		max-width: 240px;
		padding-left: 10px;
	}
}

.login-block {
	margin: 0px 30px;
}

@media (max-width: 480px) {
	.login-block {
		margin: 0px 10px;
	}
}

.login-btn {
	display: inline-block;
	font-size: 150%;
	padding: 10px 100px 10px 100px;
}

.login-btn:hover {
	opacity: 0.6;
	cursor: pointer;
}

@media (max-width: 480px) {
	.login-btn {
		padding: 10px 70px 10px 70px;
	}
}

.login-auth {
	background-color: #fff;
	padding-top: 20px;
	padding-bottom: 20px;
	box-shadow: 5px 5px 5px #c2c2c2;
	text-align: center;
	border: 1px solid #c2c2c2;
}

.own-auth {
	background-color: #fff;
	box-shadow: 5px 5px 5px #c2c2c2;
	padding-bottom: 42px;
	text-align: center;
	border: 1px solid #c2c2c2;
	overflow-y: hidden;
	transition: all 300ms 0s cubic-bezier(0.65, 0.05, 0.36, 1);
	height: 0px;
}

.own-auth-open {
	height: 247px;
}

.login-form {
	width: 100%;
	background-color: #fff;
}

.switch-form {
	cursor: pointer;
	font-weight: bold;
	text-align: center;
}

@media (min-width: 481px) {
	.switch-form:hover {
		opacity: 0.8;
	}
}

.switch-form:after {
	content: "▼";
	position: absolute;
	transition: all 300ms 0s ease;
}

.open-form:after {
	transform: rotate(180deg);
}

.login-form-area {
	height: 100%;
	text-align: center;
}

.input-login-pass-box {
	max-width: 500px;
	margin-top: 10px;
	margin-bottom: 10px;
}
@media (max-width: 480px) {
	.input-login-pass-box {
		max-width: 240px;
	}
}

.login-information {
	margin-top: 20px;
	text-align: center;
}

.information-area {
	height: 500px;
	background-color: white;
	text-align: left;
	padding: 0px 30px 0px 0px;
	overflow: auto;
	box-shadow: 5px 5px 5px #c2c2c2;
}

.infotext {
	padding: 20px 30px 10px 30px;
	font-size: 110%;
	padding-top: 20px;
	word-break: break-all;
}

@media (max-width: 480px) {
	.information-area {
		padding: 0px 20px 0px 0px;
		overflow: auto;
		height: 400px;
	}

	.infotext {
		padding: 20px 0px 10px 0px;
		font-size: 110%;
		padding-top: 20px;
		word-break: break-all;
	}
}

.overlay {
	display: none;
}

.scrollable {
	height: 850px;
	overflow-x: hidden;
	overflow-y: scroll;
}

@media (max-width: 720px) {
	.scrollable {
		height: 0px;
		overflow-x: hidden;
		overflow-y: hidden;
	}
}

@media (max-width: 720px) {
	.sp-login-split-item {
		display: contents;
	}
}