/* --------------------------------------------
FRAME
--------------------------------------------- */
#frameLogins{
	@media screen and ( width <= 800px ){
		padding-block : calc( 20 var( --remBase ) );
		padding-inline : calc( 10 var( --viewportBase ) );
	}
	@media print , screen and ( width > 800px ){
		display : grid;
		grid-template-columns : 1fr 640px;
		align-items : start;
		padding-inline : 0;
	}
}

/* --------------------------------------------
SPLIDE
--------------------------------------------- */
#splide{
	position : fixed;
	top : 0;
	left : 0;
	height : 100dvh;
	font-size : 0;
	.splide__slide{
		img{
			width : 100%;
			height : 100%;
			object-fit : cover;
			object-position : center;
		}
	}
	@media screen and ( width <= 800px ){
		z-index : -1;
		width : 100%;
		.splide__slide{
			width : 100%;
			height : 100dvh;
		}
	}
	@media print , screen and ( width > 800px ){
		width : calc( 100% - 640px );
		.splide__slide{
			height : 100dvh;
		}
	}
}

/* --------------------------------------------
CONTENTS
--------------------------------------------- */
:where( #logins , #signUps , #authCodes , #registers , #passwords ){
	h1{
		display : block;
		width : fit-content;
		font-size : 0;
		margin-bottom: calc( 24 var( --remBase ) );
		img{
			height : calc( 80 var( --remBase ) );
		}
	}
	.text{
		font-size : calc( 16 var( --remBase ) );
		line-height : 1.7;
	}
	h1 + .text{
		margin-top : calc( ( 40 + 17  ) var( --remBase ) );
	}
	:where( input , select ).error{
		background-color : #f9dedc;
		outline-color : #b3261e;
		&::placeholder{
			color : #b3261e;
		}
	}
	label.error{
		display : block;
		font-size : 1.2rem;
		line-height : 1.7;
		color : #b3261e;
	}
	@media screen and ( width <= 800px ){
		padding-inline : calc( 20 * 100% / 380 );
		padding-top : calc( ( 20 + 27 ) var( --remBase ) );
		padding-bottom : calc( ( 20 + 27 ) var( --remBase ) );
		background-color : white;
		h1{
			margin-left : calc( 4 var( --percentBase ) );
		}
	}
	@media print , screen and ( width > 800px ){
		grid-row : 1;
		grid-column : 2;
		min-height : 100dvh;
		padding-inline : calc( 80 * 100% / 640 );
		padding-top : calc( 80 var( --remBase ) );
		padding-bottom : calc( 80 var( --remBase ) );
		h1{
			margin-left : calc( 4 * 100% / 560 );
		}
	}
}
.title-logins01{
	padding-bottom : calc( 8 var( --remBase ) );
	font-size : calc( 20 var( --remBase ) );
	font-weight : 500;
	line-height : 1.7;
	border-bottom : solid 1px black;
}
.title-logins02{
	font-size : calc( 20 var( --remBase ) );
	font-weight : 700;
	line-height : calc( 29 / 20 );
}
:where( input[type="text"] , input[type="date"] , input[type="number"] ,  input[type="email"] , input[type="password"] , select ){
	padding-inline : 1em;
	font-size : calc( 16 var( --remBase ) );
	line-height : calc( 23 / 16 );
	background-color : #f2f2f7;
	&[invalid]{
		color : #b3261e;
		background-color : #f9dedc;
		outline : solid 1px #b3261e;
		outline-offset : -1px;
	}
}
select{
	background-image : url( "../images/ui/arrow/down02.svg" );
	background-repeat : no-repeat;
	background-position : right calc( 19 var( --remBase ) ) top 50%;
	background-size : auto calc( 9 var( --remBase ) );
}
button[type="submit"]{
	display : grid;
	grid-auto-flow : column;
	column-gap : calc( 12 var( --remBase ) );
	place-items : center;
	justify-content : center;
	font-size : 1.6rem;
	line-height : calc( 18 / 16 );
	color : white;
	background-color : var( --black02 );
	outline : solid 1px var( --black02 );
	outline-offset : -1px;
	&::after{
		display : block;
		width : auto;
		height : calc( 12.5 var( --remBase ) );
		aspect-ratio : 7.37/12.5;
		font-size : 0;
		content : "";
		background-image : url( "../images/ui/arrow/right01.svg" );
		filter : var( --filterWhite );
		background-repeat : no-repeat;
		background-position : left center;
		background-size : contain;
	}
}
@media ( hover : hover ){
	button[type="submit"]:hover{
		color : var( --black02 );
		background-color : white;
		&::after{
			filter : var( --filterBlack02 );
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	button[type="submit"]{
		transition : background-color var( --transitionBase ) , color var( --transitionBase );
		&::after{
			transition : filter var( --transitionBase );
		}
	}
}

/* --------------------------------------------
LOGINS
--------------------------------------------- */
#logins{
	position: relative;

	@media print , screen and ( width > 800px ){
		padding-bottom : calc( 34 var( --remBase ) );
	}
}
#members{
	margin-top : calc( 32 var( --remBase ) );
	a{
		display : block;
		width : fit-content;
		-webkit-text-decoration : underline;
		text-decoration : underline;
	}
	form{
		display : grid;
		grid-template-rows : auto auto calc( 8 var( --remBase ) ) auto auto;
		justify-content : space-between;
		margin-top : calc( 16 var( --remBase ) );
	}
	:where( input[type="text"] , input[type="date"] , input[type="number"] ,  input[type="email"] , input[type="password"] , select ){
		height : calc( 55 var( --remBase ) );
	}
	input[type="email"]{
		grid-row : 1;
		grid-column : 1/-1;
	}
	input[type="password"]{
		grid-row : 4;
		grid-column : 1;
	}
	#email-error{
		grid-row : 2;
		grid-column : 1/-1;
	}
	#password-error{
		grid-row : 5;
		grid-column : 1/-1;
	}
	button{
		grid-row : 4;
		grid-column : 2;
	}
	button[type="submit"]{
		height : calc( 55 var( --remBase ) );
	}
	a{
		margin-top : calc( 8 var( --remBase ) );
		font-size : calc( 14 var( --remBase ) );
		line-height : calc( 23 / 16 );
	}
	@media screen and ( width <= 800px ){
		form{
			grid-template-columns : calc( 164 var( --percentBase ) ) calc( 160 var( --percentBase ) );
		}
	}
	@media print , screen and ( width > 800px ){
		form{
			grid-template-columns : calc( 304 * 100% / 480 ) calc( 160 * 100% / 480 );
		}
	}
}
#nonMembers{
	margin-top : calc( 48 var( --remBase ) );
	ul{
		margin-top : calc( 16 var( --remBase ) );
	}
	a{
		display : grid;
		align-items : center;
		justify-content : center;
		font-size : calc( 14 var( --remBase ) );
		line-height : calc( 18 / 16 );
	}
	.yellow{
		grid-auto-flow : column;
		column-gap : calc( 12 var( --remBase ) );
		color : black;
		background-color : var( --yellow );
		&::after{
			display : block;
			width : auto;
			height : calc( 12.5 var( --remBase ) );
			aspect-ratio : 7.37 / 12.5;
			font-size : 0;
			content : "";
			background-image : url( "../images/ui/arrow/right01.svg" );
			background-repeat : no-repeat;
			background-position : left center;
			background-size : contain;
		}
	}
	.white{
		color : black;
		background-color : white;
		outline : solid 1px black;
		outline-offset : -1px;
	}
	@media screen and ( width <= 800px ){
		li + li{
			margin-top : calc( 16 var( --remBase ) );
		}
		a{
			height : calc( 55 var( --remBase ) );
		}
	}
	@media print , screen and ( width > 800px ){
		ul{
			display : grid;
			grid-template-columns : calc( 264 * 100% / 480 ) calc( 200 * 100% / 480 );
			grid-auto-rows : calc( 55 var( --remBase ) );
			justify-content : space-between;
		}
		a{
			height : 100%;
		}
	}
}
@media ( hover : hover ){
	#nonMembers a:hover{
		opacity : .75;
	}
}
@media ( prefers-reduced-motion : no-preference ){
	#nonMembers a{
		transition : opacity var( --transitionBase );
	}
}
#login-footer {
	@media (max-height: 900px) {
		position: relative;
		padding-bottom: calc( 16 var( --remBase ) );
		padding-top: calc( 32 var( --remBase ) );
		
	}
	@media (min-height: 901px) {
		position: absolute;
		bottom: 0px;
		padding-bottom: calc( 16 var( --remBase ) );
	}
    p {
        font-family: Roboto;
        font-size: calc(12 var(--remBase));
        font-weight: 300;
        line-height: 1.2;
    }
}


/* --------------------------------------------
RADIOS
--------------------------------------------- */
.radios{
	display : flex;
	flex-wrap : wrap;
	label{
		display : grid;
		grid-template-columns : auto auto;
		column-gap : calc( 13 var( --remBase ) );
		input[type="radio"]{
			position : relative;
			width : calc( 24 var( --remBase ) );
			height : calc( 24 var( --remBase ) );
			font-size : 0;
			appearance : none;
			&::before , &::after{
				position : absolute;
				content : "";
				border-radius : 50%;
			}
			&::before{
				display : block;
				width : 100%;
				height : 100%;
				outline : solid 1px #a1a1a1;
				outline-offset : -1px;
			}
			&::after{
				top : 50%;
				left : 50%;
				display : none;
				width : calc( 12 var( --remBase ) );
				height : calc( 12 var( --remBase ) );
				background-color : var( --base );
				translate : -50% -50%;
				@starting-style{
					opacity : 0;
				}
			}
			&:checked::after{
				display : block;
				opacity : 1;
			}
		}
		span{
			font-size : calc( 16 var( --remBase ) );
			line-height : 1.3;
		}
	}
}
@media ( prefers-reduced-motion : no-preference ){
	.radios input[type="radio"]::after{
		transition : opacity var( --transitionBase );
	}
}

/* --------------------------------------------
SIGNUP
--------------------------------------------- */
#signUp{
	margin-top : calc( ( 48 + 17  ) var( --remBase ) );
	> p{
		margin-top : calc( 16 var( --remBase ) );
	}
	.title-logins02{
		margin-top : calc( 40 var( --remBase ) );
	}
	:where( input[type="text"] , input[type="date"] , input[type="number"] ,  input[type="email"] , input[type="password"] , select ){
		height : calc( 40 var( --remBase ) );
	}
	button[type="submit"]{
		height : calc( 40 var( --remBase ) );
		margin-inline : auto;
		margin-top : calc( 60 var( --remBase ) );
	}
	@media screen and ( width <= 800px ){
		button[type="submit"]{
			width : calc( 140 var( --percentBase ) );
		}
	}
	@media print , screen and ( width > 800px ){
		button[type="submit"]{
			width : calc( 195 * 100% / 480 );
		}
	}
}
dl.box{
	margin-top : calc( 16 var( --remBase ) );
	> dt , > dd{
		font-size : calc( 16 var( --remBase ) );
	}
	> dt{
		line-height : calc( 40 / 16 );
	}
	> dd{
		line-height : 1.3;
	}
	dl{
		display : grid;
		dt{
			padding-block : calc( 8 var( --remBase ) );
			line-height : 1.3;
		}
	}
	:where( input[type="text"] , input[type="date"] , input[type="number"] ,  input[type="email"] , input[type="password"] , select ){
		width : 100%;
	}
	@media screen and ( width <= 800px ){
		> dd{
			margin-top : calc( 8 var( --remBase ) );
			+ dt{
				margin-top : calc( 16 var( --remBase ) );
			}
		}
		.w240{
			width : calc( 240 var( --percentBase ) );
		}
		.w240-sp{
			width : calc( 240 var( --percentBase ) );
		}
		.radios{
			column-gap : calc( 24 var( --percentBase ) );
		}
	}
	@media print , screen and ( width > 800px ){
		display : grid;
		grid-template-columns : calc( 160 * 100% / 480 ) calc( 312 * 100% / 480 );
		row-gap : calc( 16 var( --remBase ) );
		column-gap : calc( 8 * 100% / 480 );
		align-items : start;
		justify-content : start;
		dl{
			grid-template-columns : calc( 80 * 100% / 312 ) calc( 220 * 100% / 312 );
			row-gap : calc( 16 var( --remBase ) );
			column-gap : calc( 12 * 100% / 312 );
		}
		.w240{
			width : calc( 240 * 100% / 312 );
		}
		.w240-pc{
			width : calc( 240 * 100% / 312 );
		}
		.radios{
			column-gap : calc( 24 * 100% / 312 );
			padding-block : calc( 8 var( --remBase ) );
		}
	}
}
#passwordSettings{
	padding-block : calc( 16 var( --remBase ) );
	margin-top : calc( 16 var( --remBase ) );
	outline : solid 1px #d1d1d6;
	outline-offset : -1px;
	h4{
		font-size : calc( 16 var( --remBase ) );
		font-weight : 700;
		line-height : 1.7;
		+ p{
			margin-top : calc( 8 var( --remBase ) );
		}
	}
	ul , p{
		font-size : calc( 13 var( --remBase ) );
		line-height : 1.7;
	}
	li{
		display : grid;
		grid-template-columns : 1em auto;
		align-items : start;
		justify-content : start;
		&::before{
			text-align : center;
			content : "・";
		}
	}
	@media screen and ( width <= 800px ){
		padding-inline : calc( 16 var( --percentBase ) );
	}
	@media print , screen and ( width > 800px ){
		padding-inline : calc( 16 * 100% / 480 );
	}
}

/* --------------------------------------------
AUTH CODES
--------------------------------------------- */
#authCode{
	margin-top : calc( ( 48 + 17  ) var( --remBase ) );
	> p{
		margin-top : calc( 16 var( --remBase ) );
	}
	form{
		margin-top : calc( 56 var( --remBase ) );
		> p{
			margin-top : calc( 16 var( --remBase ) );
		}
	}
	.codes{
		display : grid;
		align-items : start;
		justify-content : center;
		margin-top : calc( 16 var( --remBase ) );
		input{
			width : 100%;
			height : calc( 60 var( --remBase ) );
			aspect-ratio : 1;
			font-size : calc( 24 var( --remBase ) );
			text-align : center;
		}
	}
	button[type="submit"]{
		height : calc( 40 var( --remBase ) );
		margin-inline : auto;
		margin-top : calc( 60 var( --remBase ) );
	}
	@media screen and ( width <= 800px ){
		.codes{
			grid-template-columns : repeat( 6 , auto ) );
			column-gap : calc( 12 var( --percentBase ) );
			justify-content : space-between;
		}
		button[type="submit"]{
			width : calc( 140 var( --percentBase ) );
		}
	}
	@media print , screen and ( width > 800px ){
		.codes{
			grid-template-columns : repeat( 6 , auto );
			column-gap : calc( 12 * 100% / 480 );
		}
		button[type="submit"]{
			width : calc( 195 * 100% / 480 );
		}
	}
}

/* --------------------------------------------
REGISTERS
--------------------------------------------- */
#registered{
	margin-top : calc( ( 48 + 17 ) var( --remBase ) );
	> p{
		margin-top : calc( 16 var( --remBase ) );
	}
	a{
		display : grid;
		grid-auto-flow : column;
		column-gap : calc( 12 var( --remBase ) );
		align-items : center;
		justify-content : center;
		height : calc( 40 var( --remBase ) );
		margin-inline : auto;
		margin-top : calc( 76 var( --remBase ) );
		font-size : calc( 16 var( --remBase ) );
		line-height : calc( 18 / 16 );
		color : white;
		background-color : var( --black02 );
		outline : solid 1px var( --black02 );
		outline-offset : -1px;
		&::after{
			display : block;
			width : auto;
			height : calc( 12.5 var( --remBase ) );
			aspect-ratio : 7.37/12.5;
			font-size : 0;
			content : "";
			background-image : url( "../images/ui/arrow/right01.svg" );
			filter : var( --filterWhite );
			background-repeat : no-repeat;
			background-position : left center;
			background-size : contain;
		}
	}
	@media screen and ( width <= 800px ){
		a{
			width : calc( 140 var( --percentBase ) );
		}
	}
	@media print , screen and ( width > 800px ){
		a{
			width : calc( 195 * 100% / 480 );
		}
	}
}

/* --------------------------------------------
PASSWORDS
--------------------------------------------- */
#resetPassword{
	margin-top : calc( ( 48 + 17 ) var( --remBase ) );
	> p{
		margin-top : calc( 16 var( --remBase ) );
	}
	form{
		margin-top : calc( 56 var( --remBase ) );
	}
	:where( input[type="text"] , input[type="date"] , input[type="number"] ,  input[type="email"] , input[type="password"] , select ){
		height : calc( 40 var( --remBase ) );
	}
	button[type="submit"]{
		height : calc( 40 var( --remBase ) );
		margin-inline : auto;
		margin-top : calc( 60 var( --remBase ) );
	}
	@media screen and ( width <= 800px ){
		button[type="submit"]{
			width : calc( 195 var( --percentBase ) );
		}
	}
	@media print , screen and ( width > 800px ){
		button[type="submit"]{
			width : calc( 195 * 100% / 480 );
		}
	}
}