@charset "utf-8";

/* CSS Document */
@media all{
	section h2{
		font-family: "Zen Old Mincho", serif;
		font-weight: 600;
		font-style: normal;
	}
	.subtitle{
		font-family: "Crimson Pro", serif;
		font-optical-sizing: auto;
		font-weight: 400;
		font-style: normal;
	}
	section h2{
		font-size: 2.6rem;
		text-align: center;
		transform: scaleY(.95);
		color: #050807;
	}
	section .subtitle{
		font-size: 1.2rem;
		display: block;
		position: relative;
		width: fit-content;
		margin: 0 auto 0.1em;
		padding: 0 1.6em;
		color: #050807;
	}
	section:not(#firstview) .subtitle::before{
		content: "(";
		position: absolute;
		top: 0;
		left: 0;
	}
	section:not(#firstview) .subtitle::after{
		content: ")";
		position: absolute;
		top: 0;
		right: 0;
	}
	
	header .box .global nav ul li a{
		color: #fff;
	}
	header .box .global nav ul li{
		position: relative;
	}
	#accommodations header .box .global nav ul li:first-child a:hover{
		opacity: 1;
	}
	#experience header .box .global nav ul li:nth-child(2) a:hover{
		opacity: 1;
	}
	#restaurant-marche header .box .global nav ul li:nth-child(3) a:hover{
		opacity: 1;
	}
	header .box .global nav ul li::before{
		position: absolute;
		content: "";
		top: -50px;
		left: 50%;
		width: 1px;
		height: 40px;
		background: rgba(255,255,255,0);
	}
	#accommodations header .box .global nav ul li:first-child::before{
		background: rgba(255,255,255,1);
	}
	#experience header .box .global nav ul li:nth-child(2)::before{
		background: rgba(255,255,255,1);
	}
	#restaurant-marche header .box .global nav ul li:nth-child(3)::before{
		background: rgba(255,255,255,1);
	}
	
	#firstview{
		width: 100%;
		height: calc(44.7vw + 48px);
		position: relative;
		padding-top: 44.7vw;
	}
	#firstview .textbox{
		position: absolute;
		top: 50%;
		left: 10px;
		width: calc(100% - 20px);
		transform: translateY(-50%);
		color: #fff;
		text-align: center;
		
	}
	#firstview .textbox h1{
		font-size: 2.93rem;
	}
	#firstview .textbox .subtitle{
		font-size: 1.2rem;
		padding-bottom: 130px;
		color: #fff;
	}
	#firstview .fvimage{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 44.7vw;
		z-index: -1;
	}
	#firstview .fvimage img{
		object-fit: cover;
		height: 100%;
	}
	
	#introduction{
		padding: 200px 20px 40px;
	}
	#introduction .box{
		width: calc(100% - 80px);
		max-width: 1700px;
		margin: 0 auto 140px;
		display: flex;
	}
	#introduction .box .image1{
		width: 31%;
		padding-right: 1%;
		transform: translateY(-140px);
	}
	#introduction .box .image2{
		width: 31%;
		padding-left: 1%;
	}
	#introduction .box .textbox{
		width: 38%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	#introduction .box .textbox .title{
		padding-bottom: 150px;
		font-size: 1.73rem;
		writing-mode: vertical-rl;
		color: #050807;
		width: 3em;
	}
	#introduction .box .textbox .text{
		padding: 150px 1em 0 3em;
		line-height: 2;
		width: 21em;
	}
	#introduction .links{
		width: 100%;
		max-width: 1120px;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	#introduction .links li{
		width: 260px;
		border: solid 1px #B5B5B5;
		border-radius: 1em;
		position: relative;
		transition: .3s;
		margin: 0 10px 15px;
	}
	#introduction .links li:hover{
		background: #eee;
	}
	#introduction .links li::after{
		position: absolute;
		content: "";
		top: 50%;
		right: 1em;
		width: 9px;
		height: 9px;
		background: url("/common/images/icon_arrow_down_b_bk.png") no-repeat;
		background-size: contain;
		background-position: center;
		transform: translateY(-50%);
	}
	#introduction .links li a{
		display: block;
		width: 100%;
		padding: 0.3em 1em;
		color: #050807;
	}
	
}

@media (max-width: 1024px){

	#accommodations #firstview .textbox .subtitle,
	#experience #firstview .textbox .subtitle,
	#restaurant-marche #firstview .textbox .subtitle{
		padding-bottom: 80px;
	}
	
	#introduction{
		padding: 70px 20px 40px;
	}
	#introduction .box{
		width: 100%;
		max-width: 800px;
		margin: 0 auto 60px;
		flex-wrap: wrap;
	}
	#introduction .box .image1{
		width: 50%;
		padding-right: 5px;
		transform: translateY(-70px);
	}
	#introduction .box .image2{
		width: 50%;
		padding-left: 5px;
	}
	#introduction .box .textbox{
		width: 100%;
		flex-direction: row-reverse;
		justify-content: space-between;
		padding-top: 40px;
	}
	#introduction .box .textbox .title{
		width: 35%;
		padding-bottom: 30px;
		display: flex;
		align-items: center;
	}
	#introduction .box .textbox .text{
		width: 65%;
		padding: 0;
	}
	
}

@media (max-width: 767px){
 
	#firstview{
		height: calc(70vh + 48px);
		position: relative;
		padding-top: 70vh;
	}
	#firstview .fvimage{
		height: 70vh;
	}
	
}

@media screen and (min-width: 768px) and (max-width: 1024px){
	
	#introduction .links{
		max-width: 800px;
	}
	
}

@media screen and (min-width: 1025px){
	
}