@charset "UTF-8";

/* --------------------------------------------
LOGIN
--------------------------------------------- */
#logins{
	background-repeat : no-repeat;
	background-position : center;
	background-size : cover;
}
#logins .box{
	display : grid;
}
#logins .box form{
	display : grid;
}
#logins .box form label{
	font-weight : 500;
	color : white;
}
#logins .box form input{
	width : 100%;
}
#logins .box form input[type="password"]{
	padding-inline : .7em;
	background-color : #b3b3b3;
}
#logins .box form input[type="submit"]{
	display : grid;
	place-items : center;
	font-family : zen-kaku-gothic-new , sans-serif;
	font-weight : 500;
	background-color : white;
}
#logins p{
	color : white;
}
#logins .signin{
	display : grid;
}
#logins .signin a{
	display : grid;
	place-items : center;
	font-family : zen-kaku-gothic-new , sans-serif;
	font-weight : 500;
	background-color : white;
}
@media screen and ( width <= 750px ){
	#logins{
		height : calc( 1009 var( --remBase ) );
		padding-top : calc( 330 var( --remBase ) );
		margin-bottom : calc( 80 var( --remBase ) );
		background-image : image-set( url( "../images/login/bg_sp.avif" ) type( "image/avif" ) , url( "../images/login/bg_sp.webp" ) type( "image/webp" ) );
	}
	#logins .box{
		row-gap : calc( ( 29 - 6 ) var( --remBase ) );
		padding-top : calc( 87 var( --remBase ) );
		background-color : rgb( 0 0 0 / .7 );
	}
	#logins .box form{
		grid-template-columns : 1fr calc( 330 var( --percentBase ) ) calc( 150 var( --percentBase ) );
		grid-row : 1;
		column-gap : calc( 13 var( --percentBase ) );
	}
	#logins .box label{
		grid-row : 1;
		grid-column : 1;
		font-size : 2.2rem;
	}
	#logins .box input{
		height : calc( 50 var( --remBase ) );
		font-size : 2.2rem;
	}
	#logins .box input[type="password"]{
		grid-row : 1;
		grid-column : 2;
	}
	#logins .box input[type="submit"]{
		grid-row : 1;
		grid-column : 3;
	}
	#logins .box p{
		grid-row : 2;
		font-size : 2.2rem;
		line-height : calc( 34 / 22 );
	}
	#logins .signin{
		grid-template-columns : 1fr calc( 275 var( --percentBase ) );
		padding-top : calc( ( 59 - 6 - 6 ) var( --remBase ) );
		padding-bottom : calc( ( 76 - 6 ) var( --remBase ) );
		background-color : rgb( 0 0 0 / .7 );
	}
	#logins .signin p{
		font-size : 2.2rem;
		line-height : calc( 34 / 22 );
	}
	#logins .signin p::before{
		display : block;
		margin-top : calc( ( -1lh + 1em ) / 2 );
		content : "";
	}
	#logins .signin a{
		height : calc( 50 var( --remBase ) );
		font-size : 2.2rem;
	}
}
@media print , screen and ( width > 750px ){
	#logins{
		height : calc( 1009 var( --remBase ) );
		padding-top : calc( 504 var( --remBase ) );
		margin-bottom : calc( 78 var( --remBase ) );
		background-image : image-set( url( "../images/login/bg_pc.avif" ) type( "image/avif" ) , url( "../images/login/bg_pc.webp" ) type( "image/webp" ) );
	}
	#logins .box{
		grid-template-columns : repeat( 2 , 1fr );
		align-items : center;
		padding-block : calc( 72 var( --remBase ) );
		background-color : rgb( 0 0 0 / .7 );
	}
	#logins .box form{
		grid-template-columns : auto calc( 342 * 100% / 605 );
		grid-row : 1;
		grid-column : 1;
		row-gap : calc( 14 var( --remBase ) );
		column-gap : calc( 18 * 100% / 605 );
	}
	#logins .box form label{
		grid-row : 1;
		grid-column : 1;
		align-self : center;
		justify-self : end;
		font-size : 1.7rem;
	}
	#logins .box form input{
		height : calc( 50 var( --remBase ) );
		font-size : 1.7rem;
	}
	#logins .box form input[type="password"]{
		grid-row : 1;
		grid-column : 2;
	}
	#logins .box form input[type="submit"]{
		grid-row : 2;
		grid-column : 2;
	}
	#logins .box p{
		display : grid;
		grid-row : 1;
		grid-column : 2;
		place-items : center;
		font-size : 1.8rem;
		line-height : calc( 34 / 18 );
	}
	#logins .signin{
		grid-template-columns : auto calc( 275 var( --percentBase ) );
		column-gap : calc( 13 var( --percentBase ) );
		align-items : center;
		justify-content : end;
		margin-top : calc( 145 var( --remBase ) );
	}
	#logins .signin p{
		font-size : 1.8rem;
		line-height : calc( 34 / 18 );
	}
	#logins .signin a{
		height : calc( 50 var( --remBase ) );
		font-size : 1.7rem;
	}
}