/*********************************** 前言 start *****************************************/
section.intro .ctWrapper{
	max-width:780px;
	margin:auto;
	padding:5em 1em;
	line-height: 2em;
}
section.intro .ctWrapper p{
	margin:2em 0 0;
}
section.intro .ctWrapper p:first-child{
	margin:0;
}
/*********************************** 前言 end *****************************************/

/*********************************** 品牌 start *****************************************/
section.brand ul{
	display: flex;
	justify-content: space-between;
	--transition-speed:0.2s;
}
section.brand li{
	width:24.94%;
}
section.brand a{
	position: relative;
	display: block;
	aspect-ratio:1;
	background-position: center;
	background-size: cover;
}
section.brand li:nth-child(1) a{ background-image: url(../images/indexDomani.jpg);}
section.brand li:nth-child(2) a{ background-image: url(../images/indexDplus.jpg);}
section.brand li:nth-child(3) a{ background-image: url(../images/indexBar.jpg);}
section.brand li:nth-child(4) a{ background-image: url(../images/indexDft.jpg);}
section.brand a:before{
	content: "";
	display: block;
	height:100%;
	background: var(--highlight-color);
	opacity: 0.8;
	mix-blend-mode: multiply;
	transition: opacity var(--transition-speed);
}
section.brand .logo{
	position: absolute;
	left:50%;
	top:50%;
	transform: translate(-50%, -50%);
	background-position-y: bottom;
	transition: opacity var(--transition-speed);
}
section.brand li:nth-child(1) .logo{ width:42.08%;}
section.brand li:nth-child(2) .logo{ width:11%;}
section.brand li:nth-child(3) .logo{ width:47%;}
section.brand li:nth-child(4) .logo{ width:32%;}
section.brand a:hover:before,
section.brand a:hover .logo{
	opacity: 0;
}

section.brand hgroup{
	position: absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color:#FFF;
	opacity: 0;
	transition: opacity var(--transition-speed);
}
section.brand a:hover hgroup{
	opacity: 1;
}
section.brand hgroup h2{
	font-weight:500;
	font-size: 1.66em;
	text-shadow: 0 0 1em rgba(0, 0, 0, 1);
}
section.brand hgroup h2 sup{
	vertical-align:initial;
	position: relative;
	top:-0.25em;
}
section.brand hgroup span{
	margin-top:2em;
	font-weight:700;
	line-height: 1em;
	padding:1em 2.8em;
	border:1px solid;
	background: rgba(0, 0, 0, 0.5);
}
/*********************************** 品牌 end *****************************************/

/*********************************** BOOKING start *****************************************/
section.booking{
	padding:5.55em;
}
section.booking .ctWrapper{
	display: flex;
	align-items: center;
	max-width: 1200px;
	aspect-ratio:2.4;
	margin:auto;
	background:var(--light-color) url(../images/indexBooking.jpg) no-repeat left top/contain;
}
section.booking .ct{
	margin-left:55.83%;
}
section.booking h3{
	font-size: 1.33em;
	font-weight:500;
}
section.booking p{
	position: relative;
	margin:7.5em 0 0;
	line-height: 2em;
}
section.booking p:before{
	position: absolute;
	content:"";
	display: block;
	left:2px;
	top:-0.5em;
	width:12em;
	height:1px;
	background: var(--highlight-color);
	transform-origin: left top;
	transform: rotate(-45deg);
}
section.booking a{
	display: inline-block;
	font-weight: 700;
	margin-top:1.5em;
	line-height: 1em;
	color:var(--highlight-color);
	padding:0.9em 1.2em 1em;
	border:1px solid;
	transition: all 0.2s;
}
section.booking a:hover{
	color:#FFF;
	border-color: var(--highlight-color);
	background: var(--highlight-color);
}
/*********************************** BOOKING end *****************************************/

/*********************************** contact start *****************************************/
section.contact .ctWrapper{
	max-width:1700px;
	margin:0 auto;
	padding-bottom:5.55em;
}
section.contact .ctWrapper > ul{
	display: flex;
}
section.contact .ctWrapper > ul > li{
	width:25%;
	flex-grow:1;
	padding:1.2em 1.66em;
}
section.contact .ctWrapper > ul > li+li{
	border-left:1px solid #999;
}

section.contact hgroup{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
section.contact h2{
	font-size: 1em;
	font-weight: 500;
	line-height: 1em;
	color:var(--highlight-color);
}
section.contact h2 a{
	transition: color 0.2s;
}
section.contact h2 a:hover{
	color:#000;
}
section.contact .sns{
	display: flex;
	align-items: flex-start;
}
section.contact .sns li{
	width:1.44em;
}
section.contact .sns li+li{
	margin-left:0.55em;
}

section.contact img{
	display: block;
	width:100%;
	margin-top:1em;
	cursor: pointer;
}

section.contact .info{
	font-size: 0.88em;
	margin-top:1.44em;
}
/*********************************** contact end *****************************************/


@media screen and (max-width:1023px){
	
	/*********************************** 前言 start *****************************************/
	section.intro .ctWrapper{
		padding:3em 1em;
	}
	/*********************************** 前言 end *****************************************/
	
	/*********************************** 品牌 start *****************************************/
	section.brand ul{
		display: block;
		font-size: 0.7em;
	}
	section.brand li{
		width:auto;
	}
	section.brand li+li{
		margin-top:2px;
	}
	section.brand a{
		aspect-ratio:1.85;
	}
	/*********************************** 品牌 end *****************************************/
	
	/*********************************** BOOKING start *****************************************/
	section.booking{
		padding:3em 1em;
	}
	section.booking .ctWrapper{
		display: block;
		aspect-ratio:auto;
		padding:calc(83.33% + 1.5em) 1.5em 1.5em;
	}
	section.booking .ct{
		margin-left:0;
	}
	/*********************************** BOOKING end *****************************************/
	
	/*********************************** contact start *****************************************/
	section.contact .ctWrapper{
		max-width:600px;
		padding-bottom:4em;
	}
	section.contact .ctWrapper > ul{
		display: block;
	}
	section.contact .ctWrapper > ul > li{
		width:auto;
		padding:0 1em;
	}
	section.contact .ctWrapper > ul > li+li{
		border-left:none;
		margin-top:4em;
	}
	/*********************************** contact end *****************************************/
	
}