@charset "utf-8";
#loginWrap{
	position: absolute;
	overflow: auto;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	min-width: min(calc(980 / var(--vw-min) * 100vw),980px);
	background:var(--color-lightbrown);
}
@media screen and (max-width:768px){
	#loginWrap{
		min-width:100%;
	}
}
#loginWrapIn{
	display: flex;
	justify-content: center;
	align-items: center;
	width: min(calc(980 / var(--vw-min) * 100vw),980px);
	height: auto;
	margin: 0 auto;
	min-height: 100vh;
	min-height: 100%;
	padding: min(calc(30 / var(--vw-min) * 100vw),30px) 0;
	position: relative;
}
@media screen and (max-width:768px){
	#loginWrapIn{
		width:calc(720 / var(--vw-min) * 100vw);
	}
}
#loginBox{
	width: 100%;
	margin-bottom: 0;
	display: flex;
	box-shadow: 0 min(calc(10 / var(--vw-min) * 100vw),10px) min(calc(30 / var(--vw-min) * 100vw),30px) rgba(0,0,0,.175);
	border-radius: min(calc(10 / var(--vw-min) * 100vw),10px);
	background-color: #fff;
	overflow: hidden;
	flex-wrap: wrap;
}
@media screen and (max-width:768px){
	#loginBox{
		display: block;
	}
}
#login_logoArea{
	width: 50%;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}
#login_logoArea:before {
	content:'';
	width:60%;
	height:80%;
	display: block;
	-webkit-mask: url(../img/common/logo_horizontal-full-login.svg) no-repeat center center / contain;
	mask: url(../img/common/logo_horizontal-full-login.svg) no-repeat center center / contain;
	background:var(--color-brown);
}
@media screen and (max-width:768px){
	#login_logoArea{
		width: 100%;
		align-items: flex-end;
		height:calc(400 / var(--vw-min) * 100vw);
	}
	#login_logoArea:before {
		-webkit-mask-position:center bottom;
		mask-position:center bottom;
	}
}
#login_inputArea{
	flex:1;
	padding:min(calc(60 / var(--vw-min) * 100vw),60px) min(calc(40 / var(--vw-min) * 100vw),40px) min(calc(80 / var(--vw-min) * 100vw),80px);
	display: flex;
	flex-direction: column;
	position: relative;
}
@media screen and (max-width:768px){
	#login_inputArea{
		width:100%;
		padding:calc(60 / var(--vw-min) * 100vw) calc(48 / var(--vw-min) * 100vw) calc(96 / var(--vw-min) * 100vw);
	}
}
#login_inputArea > h2 {
	font-size: min(calc(22 / var(--vw-min) * 100vw),22px);
	font-weight: 700;
	text-align: center;
	line-height: 1;
	letter-spacing: 0.06em;
	margin-bottom: min(calc(30 / var(--vw-min) * 100vw),30px);
	letter-spacing: 0.1em;
}
@media screen and (max-width:768px){
	#login_inputArea > h2 {
		font-size:calc(32 / var(--vw-min) * 100vw);
	}
}
#login_inputArea > h2 span {
	font-size:min(calc(14 / var(--vw-min) * 100vw),14px);
	display: inline-block;
	padding-left:1em;
	color:var(--color-brown);
	letter-spacing: 0.025em;
}
@media screen and (max-width:768px){
	#login_inputArea > h2 span {
		font-size:calc(24 / var(--vw-min) * 100vw);
	}
}
#login_inputArea > h3 {
	font-size: min(calc(18 / var(--vw-min) * 100vw),18px);
	font-weight: 700;
	text-align: center;
	line-height: 1;
	letter-spacing: 0.06em;
	margin-bottom: min(calc(20 / var(--vw-min) * 100vw),20px);
	letter-spacing: 0.1em;
	color:var(--color-brown);
	padding-top:min(calc(15 / var(--vw-min) * 100vw),15px);
}
@media screen and (max-width:768px){
	#login_inputArea > h3 {
		font-size:calc(26 / var(--vw-min) * 100vw);
	}
}

.login_form {}
.login_form dt {
	letter-spacing: 0.1em;
}
@media screen and (max-width:768px){

}
.login_form dd {
	margin-bottom:min(calc(15 / var(--vw-min) * 100vw),15px);
	position: relative;
}
@media screen and (max-width:768px){
	.login_form dd {
		margin-bottom:calc(24 / var(--vw-min) * 100vw);
	}
}
.login_password a {
	position: absolute;
	right:0;
	top:0;
	width:min(calc(40 / var(--vw-min) * 100vw),40px);
	bottom:0;
	z-index:20;
	display: flex;
	justify-content: center;
	align-items: center;
}
@media screen and (max-width:768px){
	.login_password a {
		width:calc(64 / var(--vw-min) * 100vw);
	}
}
.login_password a:before {
	content:'';
	display: block;
	width:50%;
	height:50%;
	-webkit-mask:url(../img/common/eye.svg) no-repeat center center / contain;
	mask:url(../img/common/eye.svg) no-repeat center center / contain;
	background:#aaa;
}
.login_password a.op:before {
	opacity:0.7;
}
.login_password a:after {
	content:'';
	position: absolute;
	top:50%;
	left:25%;
	width:50%;
	height:min(calc(2 / var(--vw-min) * 100vw),2px);
	background:#aaa;
	transform:rotate(45deg);
	opacity:0;
}
.login_password a.op:after {
	opacity:1;
}
.login_form input,
.login_regist .input input {
	width: 100%;
	height: min(calc(40 / var(--vw-min)* 100vw), 40px);
	-webkit-appearance: none;
	font-size: min(calc(16 / var(--vw-min)* 100vw), 16px);
	border: 1px solid #aaa;
	border-radius: min(calc(6 / var(--vw-min)* 100vw), 6px);
	background: #fff;
	padding: 0 min(calc(8 / var(--vw-min)* 100vw), 8px);
	letter-spacing: 0.1em;
}
@media screen and (max-width:768px){
	.login_form input,
	.login_regist .input input  {
		height:calc(60 / var(--vw-min) * 100vw);
		font-size:calc(24 / var(--vw-min) * 100vw);
	}
}
.login_form input:focus,
.login_regist .input input:focus {
	border-color:var(--color-orange);
}
.login_submit {
	display: flex;
	justify-content: center;
	padding-top:min(calc(10 / var(--vw-min) * 100vw),10px);
}
.login_submit .submit {
	width:68%;
}
.login_btn,
.login_submit .submit input {
	-webkit-appearance: none;
	display: flex;
	width: 100%;
	justify-content: center;
	align-items: center;
	height: min(calc(36 / var(--vw-min)* 100vw), 36px);
	border-radius: 32px;
	background: var(--color-brown);
	color: #fff;
	text-decoration: none;
	font-size:min(calc(16 / var(--vw-min) * 100vw),16px);
	font-weight: 600;
	font-family: var(--main-font-family);
	transition: all 0.8s ease;
	border:none;
	cursor:pointer;
	letter-spacing: 0.1em;
}
@media screen and (max-width:768px){
	.login_btn,
	.login_submit .submit input {
		height: calc(64 / var(--vw-min) * 100vw);
		font-size:calc(26 / var(--vw-min) * 100vw);
		font-weight: 600;
	}
}
@media screen and (hover:hover){
	.login_submit .submit input:hover,
	.login_btn:hover {
		background:var(--color-orange);
	}
}
.login_toRegist {
	position: absolute;
	right:min(calc(20 / var(--vw-min) * 100vw),20px);
	bottom:min(calc(20 / var(--vw-min) * 100vw),20px);
	line-height:1;
	letter-spacing: 0.1em;
}
@media screen and (max-width:768px){
	.login_toRegist {
		right:calc(32 / var(--vw-min) * 100vw);
		bottom:calc(32 / var(--vw-min) * 100vw);
	}
}
.login_toRegist a {
	color:var(--color-brown);
	transition: all 0.3s ease;
	font-size:min(calc(14 / var(--vw-min) * 100vw),14px);
}
@media screen and (max-width:768px){
	.login_toRegist a {
		font-size:calc(24 / var(--vw-min) * 100vw);
	}
}
@media screen and (hover:hover){
	.login_toRegist a:hover {
		color:var(--color-orange);
	}
}
.login_description {
	font-size:min(calc(15 / var(--vw-min) * 100vw),15px);
	margin-bottom:min(calc(20 / var(--vw-min) * 100vw),20px);
	display: flex;
	justify-content: center;
}
@media screen and (max-width:768px){
	.login_description {
		font-size:calc(24 / var(--vw-min) * 100vw);
	}
}
.login_regist {}
.login_regist .input {
	margin-bottom:min(calc(15 / var(--vw-min) * 100vw),15px);
}
.login_regist .input label {
	display: block;
	letter-spacing: 0.1em;
}
@media screen and (max-width:768px){
	.login_regist .input label {
		font-size:calc(24 / var(--vw-min) * 100vw);
	}
}
.login_confirmText {
	font-size:min(calc(15 / var(--vw-min) * 100vw),15px);
	letter-spacing: 0.1em;
	margin-bottom:1em;
}
@media screen and (max-width:768px){
	.login_confirmText {
		font-size:calc(24 / var(--vw-min) * 100vw);
	}
}
.login_confirmCaution {
	font-size:min(calc(13 / var(--vw-min) * 100vw),13px);
	letter-spacing: 0.1em;
	color:#999;
}
@media screen and (max-width:768px){
	.login_confirmCaution {
		font-size:calc(22 / var(--vw-min) * 100vw);
	}
}
.login_mailAddress {
	border:2px solid var(--color-orange);
	color:var(--color-orange);
	display: flex;
	justify-content: center;
	padding:0.25em 1em;
	font-size:min(calc(16 / var(--vw-min) * 100vw),16px);
	font-weight: 700;
}
@media screen and (max-width:768px){
	.login_mailAddress {
		font-size:calc(24 / var(--vw-min) * 100vw);
	}
}
.login_toLogin {
	width:60%;
	margin:min(calc(30 / var(--vw-min) * 100vw),30px) auto 0;
}
.login_toLogin a {
	-webkit-appearance: none;
	display: flex;
	width: 100%;
	justify-content: center;
	align-items: center;
	height: min(calc(36 / var(--vw-min)* 100vw), 36px);
	border-radius: 32px;
	background: var(--color-brown);
	color: #fff;
	text-decoration: none;
	font-size:min(calc(16 / var(--vw-min) * 100vw),16px);
	font-weight: 600;
	font-family: var(--main-font-family);
	transition: all 0.8s ease;
	border:none;
	cursor:pointer;
	letter-spacing: 0.1em;
}
@media screen and (max-width:768px){
	.login_toLogin a {
		height: calc(64 / var(--vw-min) * 100vw);
		font-size:calc(24 / var(--vw-min) * 100vw);
	}
}
@media screen and (hover:hover){
	.login_toLogin a:hover {
		background:var(--color-orange);
	}
}
.login_more {
	padding-top:1.5em;
	text-align: center;
	font-size:min(calc(14 / var(--vw-min) * 100vw),14px);
}
@media screen and (max-width:768px){
	.login_more {
		font-size:calc(24 / var(--vw-min) * 100vw);
	}
}
.grand__lists {
	display: flex;
	justify-content: space-between;
	padding-top:min(calc(20 / var(--vw-min) * 100vw),20px);
}
@media screen and (max-width:768px){
	.grand__lists {
		flex-wrap: wrap;
		justify-content: center;
		margin:0 calc(-16 / var(--vw-min) * 100vw);
	}
}
.grand__list {
	width:min(calc(280 / var(--vw-min) * 100vw),280px);
}
@media screen and (max-width:768px){
	.grand__list {
		width:calc(296 / var(--vw-min) * 100vw);
		margin:0 calc(16 / var(--vw-min) * 100vw) calc(32 / var(--vw-min) * 100vw);
	}
}
.grand__box {
	position: relative;
	padding-top:100%;
	height:100%;
	border-radius: min(calc(20 / var(--vw-min) * 100vw),20px);
	cursor:pointer;
}
.grand__box--jhs {
	background: url(../img/common/guideline_glbl-jhs.jpg) no-repeat center center / cover;
}
.grand__box--hs {
	background: url(../img/common/guideline_glbl-hs.jpg) no-repeat center center / cover;
}
.grand__box--univ {
	background: url(../img/common/guideline_glbl-univ.jpg) no-repeat center center / cover;
}
.grand__link {
	position: absolute;
	display: flex;
	bottom:min(calc(20 / var(--vw-min) * 100vw),20px);
	left:min(calc(20 / var(--vw-min) * 100vw),20px);
	right:min(calc(20 / var(--vw-min) * 100vw),20px);
	justify-content: center;
	align-items: center;
	font-weight: 600;
	font-size: min(calc(18 / var(--vw-min)* 100vw), 18px);
	text-decoration: none;
	transition: all 0.8s ease;
	background:var(--color-brown);
	height:min(calc(48 / var(--vw-min) * 100vw),48px);
	color:#fff;
	border-radius: 48px;
	letter-spacing: 0.1em;
}
@media screen and (max-width:768px){
	.grand__link {
		bottom:calc(12 / var(--vw-min) * 100vw);
		left:calc(12 / var(--vw-min) * 100vw);
		right:calc(12 / var(--vw-min) * 100vw);
		font-size:calc(24 / var(--vw-min) * 100vw);
		height:calc(64 / var(--vw-min) * 100vw);
	}
}
.grand__box:hover .grand__link {
	background:var(--color-orange);
}
.login_btnLists {
	width:60%;
	margin:0 auto;
	padding-top:min(calc(20 / var(--vw-min) * 100vw),20px);
}
.login_btnList {
	margin-bottom:min(calc(20 / var(--vw-min) * 100vw),20px);
}
.login__tos {
	padding:min(calc(40 / var(--vw-min) * 100vw),40px);
	padding-top:0;
	width:100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}
@media screen and (max-width:768px){
	.login__tos {
		padding:calc(48 / var(--vw-min) * 100vw);
		padding-top:0;
	}
}
.login__tosTitle {
	display: flex;
	justify-content: center;
	font-size:min(calc(18 / var(--vw-min) * 100vw),18px);
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height:1;
	align-items: center;
	position: relative;
	z-index:50;
	margin-bottom:-0.5em;
}
@media screen and (max-width:768px){
	.login__tosTitle {
		font-size:calc(26 / var(--vw-min) * 100vw);
	}
}
.login__tosTitle:before {
	content: '';
	position: absolute;
	left:-0.8em;
	top:0;
	right:-0.8em;
	bottom:0;
	background:#fff;
	z-index:-1;
}
.login__tosTitle span {
	font-size:min(calc(12 / var(--vw-min) * 100vw),12px);
	color:var(--color-brown);
	display: block;
	padding-left:1em;
	letter-spacing: 0.05em;
	padding-top:.4em;
}
@media screen and (max-width:768px){
	.login__tosTitle span {
		font-size:calc(18 / var(--vw-min) * 100vw);
	}
}
.login__tosContent {
	width:100%;
	border:1px solid #aaa;
	border-radius: min(calc(5 / var(--vw-min) * 100vw),5px);
	overflow: hidden;
	position: relative;
}
.login__tosContent:before {
	content:'';
	position: absolute;
	left:min(calc(20 / var(--vw-min) * 100vw),20px);
	right:min(calc(20 / var(--vw-min) * 100vw),20px);
	top:0;
	height:min(calc(30 / var(--vw-min) * 100vw),30px);
	background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
}
.login__tosScroll {
	height:min(calc(250 / var(--vw-min) * 100vw),250px);
	overflow: auto;
	overscroll-behavior:contain;
}
@media screen and (max-width:768px){
	.login__tosScroll {
		height:calc(420 / var(--vw-min) * 100vw);
	}
}
.login__tosTexts {
	padding:min(calc(30 / var(--vw-min) * 100vw),30px);
	font-size:min(calc(14 / var(--vw-min) * 100vw),14px);
	line-height:1.8;
}
@media screen and (max-width:768px){
	.login__tosTexts {
		padding:calc(30 / var(--vw-min) * 100vw);
		font-size:calc(22 / var(--vw-min) * 100vw);
		line-height:1.8;
	}
}
.login__tosTexts p + h4,
.login__tosTexts ol + h4 {
	margin-top:1em;
}
.login__tosTexts p + ol {
	margin-top:0.5em;
}
.login__tosTexts h4 {
	font-weight: 600;
	margin-bottom:0.5em;
}
.login__tosTexts ol,.login__tosTexts ol > li {
	list-style: decimal;
}
.login__tosTexts ol {
	padding-left:2em;
}
.login__tosTexts ol.is-brackets,.login__tosTexts ol.is-brackets > li {
	position: relative;
	list-style-type: none;
}
.login__tosTexts ol.is-brackets > li:before {
  position: absolute;
  right: calc(100% + 0.5rem);  /* 0.5remは連番とテキストとの余白 */
  content: "(" counter(list-item) ")";
}
.login__toslast {
	margin-top:1.6em;
}