@charset "utf-8";

.p-login {

	.g-navi {
		
		.entry_button {
			display: none;
		}
	}
}

.p-login:not(.p-member) {

	.l-mv {
		
		& .image {
			
			img {
				height: 800px;
				
				@media screen and (max-width: 999px) {
					object-fit: cover;
					object-position: left 25% bottom 0;
					
					@media screen and (max-width: 767px) {
						height: 700px;
						object-position: left 20% bottom 0;
						
						@media screen and (max-width: 374px) {
							object-position: left 15% bottom 0;
						}
					}
				}
			}
		}
	}
}

.l-login-input {
	color: var(--white);
	text-align: center;
	margin: 50px 0 0;
	
	@media screen and (max-width: 767px) {
		padding-inline: 20px;
	}
	
	.comingsoon {
		text-align: center;
		margin: 80px 0;
		
		em {
			font-size: 3rem;
			letter-spacing: .1em;
			padding: .5em 1.5em .65em;
			border: 1px solid #fff;
			display: inline-block;
			
			@media screen and (max-width: 767px) {
				font-size: 2.6rem;
			}
		}
	}
	
	.note {
		font-size: 1.1rem;
		letter-spacing: .15em;
		display: block;
		opacity: .7;
	}
	
	.input {
		letter-spacing: .15em;
		max-width: 520px;
		margin: 20px auto 0;
		position: relative;
		
		.l-loginMain__input {
			color: var(--black);
			font-size: 1.8rem;
			font-weight: 600;
			width: 100%;
			height: 60px;
			padding: 0 50px 0 10px;
			border-radius: 10px;
			background-color: var(--white);
			transition: .2s var(--easing);
			
			&:focus {
				box-shadow: 0 0 20px 0 #ffffa3;
			}
		}
		
		.button-toggle {
			width: 20px;
			aspect-ratio: 1;
			margin: 0 20px 0 0;
			background: url("/house/yamatedaiminori/login/_assets/img/icon_eye_01.svg") no-repeat center / 100% auto;
			position: absolute;
			top: 50%;
			right: 0;
			translate: 0 -50%;
			z-index: 10;
			
			&.is-show {
				background-image: url("/house/yamatedaiminori/login/_assets/img/icon_eye_02.svg");
			}
		}
	}
	
	.l-loginMain__error {
		color: yellow;
		font-size: 1.4rem;
		margin: 15px 0 0;
		display: block;
	}
	
	.l-loginMain__form--button {
		
		.l-loginMain__button {
			color: var(--white);
			font-family: var(--font_gara);
			font-size: 2.2rem;
			letter-spacing: .15em;
			width: 260px;
			height: 70px;
			margin: 35px 0 0;
			border-radius: 10px;
			border: 2px solid #d4c2a1;
			background-color: var(--gold);
			position: relative;
			
			&:hover {
				filter: brightness(125%);
			}
			
			&:after {
				content: '';
				width: 20px;
				height: 20px;
				margin: 0 20px 0 0;
				display: block;
				background: url("/house/yamatedaiminori/login/_assets/img/icon_door_01.svg") no-repeat center / contain;
				position: absolute;
				top: 50%;
				right: 0;
				translate: 0 -50%;
			}
		}
	}
}

.l-login-step {
	margin-inline: -15px;
	display: flex;
	
	@media screen and (max-width: 767px) {
		flex-direction: column;
	}
	
	.item {
		text-align: center;
		width: calc(100% / 3 - calc(15px * 2));
		margin: 0 15px;
		padding: 0 0 40px;
		background-color: #EAE1D0;
		position: relative;
		
		@media screen and (max-width: 767px) {
			width: calc(100% - calc(15px * 2));
			margin: 0 15px 30px;
		}
		
		&:nth-child(1) {
			z-index: 30;
		}
		
		&:nth-child(2) {
			z-index: 20;
		}
		
		&:nth-child(3) {
			z-index: 10;
			
			&:after {
				display: none;
			}
		}
		
		&:after {
			content: '';
			width: 40px;
			height: 18px;
			clip-path: polygon(0 0, 0% 100%, 100% 50%);
			background-color: var(--bourgogne);
			position: absolute;
			top: 50%;
			right: 0;
			translate: 100% -50%;
			transform-origin: bottom center;
			
			@media screen and (max-width: 767px) {
				top: auto;
				bottom: 0;
				right: 50%;
				translate: 25% 100%;
				rotate: 90deg;
			}
		}
	}
	
	.title {
		color: var(--bourgogne);
		margin: 30px 0 0;
		
		small {
			font-family: var(--font_gara);
			font-size: 1.4rem;
			display: block;
		}
		
		b {
			font-size: 2rem;
			font-weight: 500;
			letter-spacing: .1em;
			margin: 20px 0 0;
			display: block;
		}
	}
	
	.image {
		margin: 25px 0 0;
		padding: 0 30px;
		
		@media screen and (max-width: 767px) {
			max-width: 360px;
			margin-inline: auto;
		}
	}
	
	.text {
		line-height: 1.75;
		
		a {
			color: var(--bourgogne);
			text-decoration: underline;
			
			&:hover {
				text-decoration: none;
			}
		}
	}
}

.l-login-ctabutton {
	margin: 60px 0 0;
	padding: 0 60px;
	
	@media screen and (max-width: 767px) {
		margin-top: 30px;
		padding: 0;
	}
}

.p-member {

	.l-member-contents {
		
		.items {
			display: flex;
			justify-content: center;
			gap: 60px;
			
			@media screen and (max-width: 999px) {
				gap: 6%;
				
				@media screen and (max-width: 767px) {
					flex-wrap: wrap;
				}
			}
			
			& + & {
				margin-top: 60px;
			}
		}
		
		.item {
			text-align: center;
			width: calc(100% / 2);
			
			@media screen and (max-width: 767px) {
				width: 100%;
			}
			
			& + & {
				
				@media screen and (max-width: 767px) {
					margin-top: 60px;
				}
			}
			
			.title {
				font-size: 2.2rem;
				font-weight: 700;
				line-height: 1.5;
				letter-spacing: .2em;
				
				small {
					font-size: 1.6rem;
					letter-spacing: .1em;
				}
				
				& + * {
					margin-top: 15px;
				}
			}
			
			.button {
				color: var(--bourgogne);
				font-weight: 500;
				letter-spacing: .2em;
				text-decoration: underline;
				margin: 15px 0 0;
				display: inline-block;
				
				&:after {
					content: '';
					vertical-align: sub;
					width: 1.25em;
					aspect-ratio: 1;
					display: inline-block;
					margin: 0 0 0 .25em;
					background: url("/house/yamatedaiminori/_assets/img/common/arrow_01_bourgogne.svg") no-repeat center / contain;
				}
			}
		}
	}


}