@charset "utf-8";

html {
	overflow-y: hidden;
	
	&.loaddone {
		overflow-y: scroll;
	}
}

.g-main {
	overflow: hidden;
	transform: translateZ(0);
}

/*loading*/
.p-loading {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background-color: var(--bourgogne);
	transition: opacity 1.2s ease;

	.p-loading__logo {
		width: 25%;
		margin: 0 0 2.5%;
		position: absolute;
		bottom: 50%;
		left: 50%;
		translate: -50% 0;
		
		@media screen and (max-width: 999px) {
			width: 50%;
			max-width: 260px;
		}
	}

	&.is-hidden {
		opacity: 0;
		pointer-events: none;
	}

	.p-loading__bar-track {
		width: 100%;
		height: 2px;
		margin: 2.5% 0 0;
		background-color: rgba(0,0,0,.25);
		overflow: hidden;
		transform: translateZ(0);
		position: absolute;
		top: 50%;
		left: 0;
	}

	.p-loading__bar {
		width: 0%;
		height: 100%;
		background-color: var(--gold);
		transition: width .15s linear;
	}
	
}

.g-header {
	opacity: 0;
	visibility: hidden;
	translate: 0 -30px;
	transition:
		translate .6s var(--easing),
		opacity 1s var(--easing)
	;
}

.active_scroll .g-header {
	opacity: 1;
	visibility: visible;
	translate: 0;
}

.l-mv-home {
	margin: 0 0 -10%;
	position: relative;
	background-color: var(--bourgogne);
	
	&:after {
		content: '';
		width: 100%;
		height: 100%;
		inset: 0;
		position: absolute;
		z-index: 1000;
	}
	
	.logo {
		width: 12.875%;
		margin: 4% 0 0 4%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 20;
		
		@media screen and (max-width: 999px) {
			width: 25%;
			margin: 4% 0 0 4%;
		}
	}
	
	.l-mv__title {
		text-align: right;
		margin: 12% 0 0 0;
		position: absolute;
		top: 0;
		left: 50%;
		z-index: 10;
		text-shadow:
			0 0 1px #fff,
			0 0 5px #fff,
			0 0 10px #fff,
			0 0 30px #fff
		;
		opacity: 0;
		transition: opacity 2s;
		transition-delay: 2s;
		z-index: 50;
		translate: -50% 0;
		
		@media screen and (max-width: 999px) {
			text-align: center;
			margin-top: 25%;
			padding: 0 5%;
		}
		
		b {
			font-size: 3.5vw;
			width: 13em;
			margin-right: -.15em;
			display: flex;
			flex-wrap: nowrap;
			
			@media screen and (max-width: 999px) {
				font-size: 5.5vw;
			}
			
			span {
				font-weight: 600;
				letter-spacing: .1em;
				white-space: nowrap;
				display: inline-block;
				
				@media screen and (max-width: 999px) {
					line-height: 1.5;
					white-space: nowrap;
					display: block;
				}
				
				&:nth-child(2) {
					margin: 0 0 0 0;
				}
			}
		}
		
		small {
			color: var(--bourgogne);
			font-size: 1.125vw;
			font-weight: 600;
			line-height: 1;
			letter-spacing: .2em;
			margin: 1em 0 0;
			display: block;
			position: relative;
			
			@media screen and (max-width: 999px) {
				font-size: 2.4vw;
				white-space: nowrap;
			}
			
			&:after {
				content: '';
				width: calc(100% - 20.5em);
				height: .05em;
				margin: 0 0 0 .1em;
				display: block;
				background-color: var(--bourgogne);
				position: absolute;
				top: 50%;
				left: 0;
				opacity: .5;
				
				@media screen and (max-width: 999px) {
					display: none;
				}
			}
		}
	}
	
	.l-mv__inner {
		position: relative;
		
		&:before {
			content: '';
			width: 100%;
			padding: 22% 0 0;
			background: linear-gradient(to bottom, rgba(255,255,255,1) 25%, rgba(255,255,255,0) 100%);
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 10;
			
			@media screen and (max-width: 999px) {
				padding-top: 25%;
			}
		}
		
		&:after {
			content: '';
			width: 100%;
			padding: 20% 0 0;
			background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
			display: block;
			position: absolute;
			bottom: 0;
			left: 0;
			z-index: 10;
			
			@media screen and (max-width: 999px) {
				opacity: .8;
			}
		}
	}
	
	.veil-image {
		display: block;
		position: absolute;
		z-index: 30;
		
		&:nth-of-type(1) {
			width: 70%;
			aspect-ratio: 476 / 117;
			top: 0;
			right: 0;
			transform-origin: right top;
			scale: 3 4;
		}
		
		&:nth-of-type(2) {
			width: 100%;
			aspect-ratio: 320 / 149;
			bottom: 0;
			left: 0;
			translate: 0 55%;
			filter: contrast(150%);
			scale: 2;
			rotate: 10deg;
		}
	}
	
	.l-mv__image {
		position: relative;
		z-index: 0;
		overflow: hidden;
		transform: translateZ(0);

		img {
			filter: brightness(300%);
			scale: 1;
			transition:
				scale 8s 1.5s ease,
				filter 5s .5s
			;
		}
	}
}

.loaddone {
	
	.l-mv-home {
		
		.l-mv__image {

			img {
				scale: 1.05;
				filter: brightness(100%);
			}
		}
		
		.veil-image {
			
			&:nth-of-type(1) {
				animation: a-veil-show1 3.5s 0s both ease;
			}
			
			&:nth-of-type(2) {
				animation: a-veil-show2 3.9s 0s both ease;
			}
		}
		
		.l-mv__title {
			opacity: 1;
		}
	}
}

@keyframes a-veil-show1 {
	100% {
		scale: 1;
	}
}

@keyframes a-veil-show2 {
	100% {
		scale: 1;
		rotate: 0deg;
		opacity: .7;
	}
}

.l-mix-blend {
	width: calc(100% - (60px * 2));
	height: 17.5vw;
	margin: 0 0 0 60px;
	position: relative;
	z-index: 10;
	mix-blend-mode: multiply;
	position: absolute;
	z-index: 10;
	
	@media screen and (max-width: 999px) {
		width: calc(100% - (20px * 2));
		height: auto;
		margin: 0 0 0 20px;
		padding-top: 100%;
	}
	
	&:after {
		content: '';
		width: 100%;
		height: 100%;
		display: block;
		background: linear-gradient(to right, rgba(114,15,59,1) 0%, rgba(219,81,142,1) 50%, rgba(114,15,59,1) 100%);
		inset: 0;
		position: absolute;
		z-index: 0;
		
		@media screen and (max-width: 999px) {
			background: linear-gradient(to right, rgba(110,25,60,.8) 0%, rgba(110,25,60,1) 50%, rgba(110,25,60,.8) 100%);
		}
	}
}

.l-contact-cta {
	margin: 0 60px;
	position: relative;
	z-index: 100;
	
	@media screen and (max-width: 999px) {
		margin: 0 20px;
	}
	
	& > * {
		position: relative;
		z-index: 10;
	}
	
	.l-contact-cta__spec {
		padding: 2.5% 3.75% 2.75%;
		
		@media screen and (max-width: 999px) {
			padding: 5.5% 7% 5.75%;
		}
	}
	
	.l-contact-cta__entry {
		text-align: center;
		
		a {
			padding: 2.5% 0;
			display: block;
			background: linear-gradient(to right, rgba(170,135,70,1) 0%, rgba(255,241,216,1) 50%, rgba(170,135,70,1) 100%);
			
			&:hover {
				opacity: 1;
				filter: brightness(120%);
			}
			
			@media screen and (max-width: 999px) {
				padding: 5% 0;
			}
		}
		
		.text {
			
			small {
				font-size: 1vw;
				font-weight: 500;
				letter-spacing: .15em;
				display: block;
				
				@media screen and (max-width: 999px) {
					font-size: 3vw;
					line-height: 1.5;
				}
			}
			
			b {
				font-size: 2vw;
				font-weight: 600;
				letter-spacing: .2em;
				margin: .5em 0 0;
				display: block;
				
				@media screen and (max-width: 999px) {
					font-size: 5vw;
				}
			}
		}
	}
}

.l-information {
	margin: 80px 0 0;
	padding: 0 60px;
	
	@media screen and (max-width: 999px) {
		padding: 0 20px;
	}
	
	& + * {
		margin: 100px 0 0;
		
		@media screen and (max-width: 999px) {
			margin-top: 60px;
		}
	}
	
	.l-information__inner {
		display: flex;
		align-items: center;
		
		@media screen and (max-width: 999px) {
			flex-direction: column;
		}
	}
	
	.title {
		font-size: 1.125vw;
		font-weight: 500;
		letter-spacing: .15em;
		width: 30%;
		padding: 0 0 0 4%;
		
		@media screen and (max-width: 999px) {
			font-size: 1.6rem;
			width: 100%;
			padding-left: 0;
		}
		
		&:before {
			content: attr(data-en);
			color: var(--bourgogne);
			font-family: var(--font_gara);
			font-size: 2.625vw;
			font-weight: 400;
			opacity: .7;
			margin: 0 0 .5em;
			display: block;
			
			@media screen and (max-width: 999px) {
				font-size: 3rem;
			}
		}
	}
	
	.list {
		width: calc(100% - 30%);
		padding: 0 0 0 3.75%;
		border-left: 3px solid var(--bourgogne_light);
		
		@media screen and (max-width: 999px) {
			width: 100%;
			margin-top: 25px;
			padding-top: 25px;
			padding-left: 0;
			border-top: 1px solid var(--bourgogne_light);
			border-left: 0;
		}
	}
	
	.g-news-scroll {
		max-height: 280px;
		overflow: hidden;
		overflow-y: scroll;
		color: #333;
		font-size: 1.6rem;
		text-align: left;
		margin: 20px 0 0;
		
		scrollbar-width: thin;
		scrollbar-color: var(--black) var(--white);
		
		img {
			width: auto;
			max-width: 100%;
		}
		
		p {
			font-size: 1.4rem;
			text-align: left;
			letter-spacing: .1em;
			line-height: 1.5;
			
			& + & {
				margin-top: 1em;
			}
		}
		
		b,
		strong {
			font-weight: bold;
		}
		
		ul {
			list-style: none;
			margin: 10px 0;
			padding: 0;
		}
		
		ul li {
			position: relative;
			text-indent: -.6em;
			padding-left: 1em;
			margin-top: 20px;
			line-height: 1.6;
		}
		
		ul li:before {
			content: "";
			width: 4px;
			height: 4px;
			margin: 0 0 .65em;
			display: inline-block;
			background-color: #333333;
			border-radius: 50%;
			position: relative;
			top: 0;
			margin-right: 5px;
			display: none;
		}
		
		ul li p {
			padding: 5px 0;
		}
		
		ol {
			list-style: decimal;
		}
		
		ol li {
			list-style-type: unset;
			text-align: left;
			width: 100%;
			margin-top: 20px;
			margin-left: 1.15em;
			text-align: left;
			line-height: 1.6;
		}
		
		hr {
			margin: 40px 0 20px;
		}
		
		h1,
		h2,
		h3,
		h4,
		h5,
		h6 {
			margin-top: 15px;
			line-height: 1.6;
		}
		
	}
	
}

.l-brand-banner {
	padding: 60px 0;
	background: linear-gradient(to right, rgba(220,216,199,1) 0%, rgba(255,255,255,1) 50%, rgba(220,216,199,1) 100%);
	
	@media screen and (max-width: 999px) {
		padding-block: 20px;
	}
}

.l-content-list {
	margin: 120px 0 0;
	
	@media screen and (max-width: 999px) {
		margin-top: 60px;
	}
	
	.title {
		text-align: center;
		line-height: 1.5;
		letter-spacing: .2em;
		
		@media screen and (max-width: 999px) {
			font-size: 1.4rem;
		}
		
		& + * {
			margin-top: 60px;
		}
		
		&:before {
			content: attr(data-en);
			color: var(--bourgogne);
			font-family: var(--font_gara);
			font-size: 2.625vw;
			font-weight: 400;
			opacity: .7;
			margin: 0 0 .5em;
			display: block;
			
			@media screen and (max-width: 999px) {
				font-size: 3rem;
				margin-bottom: 15px;
			}
		}
	}
	
	.items {
		padding: 0 100px;
		display: flex;
		flex-wrap: wrap;
		
		@media screen and (max-width: 999px) {
			padding: 0 20px;
		}
	}
	
	.item {
		width: calc(100% / 5);
		margin: 0 0 1em;
		padding: 10px;
		
		@media screen and (max-width: 999px) {
			width: calc(100% / 2);
			padding: 3px;
		}
		
		a {
			
			&:hover {
				opacity: 1;
				
				.image {
					
					img {
						scale: 1.1;
						filter: brightness(125%);
					}
				}
			}
		}
		
		&.-invalid {
			filter: grayscale(100%);
			
			a {
				pointer-events: none;

				.image {
					background: linear-gradient(to bottom, #c9c6c8 0%, #ededed 100%);
					position: relative;
					
					&:before {
						content: 'Comingsoon';
						opacity: .4;
						font-style: italic;
						font-size: 2rem;
						letter-spacing: 0;
						white-space: nowrap;
						position: absolute;
						top: 50%;
						left: 50%;
						translate: -50% -50%;
					}
				}
				
				img {
					opacity: 0;
					visibility: hidden;
					scale: 0;
				}
				
				.name {
					opacity: .4;
				}
			}
		}
	}
	
	.image {
		overflow: hidden;
		transform: translateZ(0);
		
		img {
			transition: 1.2s var(--easing);
		}
	}
	
	.name {
		font-size: .875vw;
		font-weight: 500;
		text-align: center;
		letter-spacing: .1em;
		display: block;
		
		@media screen and (max-width: 999px) {
			font-size: 1.3rem;
		}
		
		&:before {
			content: attr(data-en);
			color: var(--bourgogne);
			font-family: var(--font_gara);
			font-size: 1.375vw;
			font-weight: 400;
			letter-spacing: 0;
			opacity: .7;
			margin: 1em 0 .5em;
			white-space: nowrap;
			display: block;
			
			@media screen and (max-width: 999px) {
				font-size: 3.6vw;
			}
		}
		
	}
	
	.button {
		
		a {
			color: var(--white);
			background-color: var(--bourgogne);
			aspect-ratio: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			
			&:hover {
				opacity: .8;
			}
		}
		
		.name {
			
			&:before {
				color: var(--white);
				font-size: 2.0625vw;
				line-height: 1.25;
				white-space: inherit;
				margin-top: 0;
				padding: 0 1em;
			}
		}
	}
	
	
	
	
}