/*====================================================================================================
	TOPPAGE
====================================================================================================*/
.toppage {
	--radius:2rem;/* 共通のradius値 */
}
.sec { margin-top:5rem;/* vp:468-768px  */}

.imgCard {
	display:flex;
	align-items:center;
	gap:1em 3em;

	& .imgCard_img { width:20em; border-radius:var(--radius); overflow:hidden;}
	& .imgCard_content { flex:1;}
	& .imgCard_title {
		font-size:clamp(1.375rem, calc(0.4rem + 3.333vw), 2rem);/* vp:468-768px 22-32px */
		line-height:1.3;
	}
	& .imgCard_text { margin-top:1em;}
	& .imgCard_btn {
		display:flex;
		align-items:center;
		gap:1em;
		margin-top:clamp(1rem, calc(-2.12rem + 10.667vw), 3rem);/* vp:468-768px 16-48px */
		padding:0.25em 1.25em;
		width:fit-content;
		background-color:var(--color-gray);
		border-radius:1em;
		color:inherit;
		text-decoration:none;

		&::after {
			content:"";
			display:block;
			width:1em;
			aspect-ratio:1;
			border-radius:100%;
			background-color:var(--color-sub);
		}
		
		&:is(:focus-visible, :active)::after { background-color:var(--color-main);}
		@media(hover:hover) { &:hover::after { background-color:var(--color-main);}}
	}

	&.imgCard_reverse { flex-direction:row-reverse;}
}
.imgCard.imgCard_other {
	display:grid;
	
	& :is(.imgCard_img, .imgCard_content) { grid-area:1/1/1/1;}
	& .imgCard_img { width:100%; border-radius:var(--radius) var(--radius) 0 0;}
	& .imgCard_content { width:90%; margin-inline:auto;}
	& :is(.imgCard_title, .imgCard_text) { text-shadow:0 0 0.5em #fff;}
}
@media(max-width:768px){
	.imgCard {
		flex-direction:column;

		&.imgCard_reverse { flex-direction:column;}
	}
	.imgCard.imgCard_other {
		height:20em;
		
		& .imgCard_img { height:100%;}
		& .imgCard_img img { height:100%; object-fit:cover;}
	}
}


/* ========== fv ========== */
.fv {
	position:relative;

	& .fv_bg img { width:100%; max-height:100vh; object-fit:cover;}
	& .fv_catch {
		position:absolute;
		inset:50% auto auto 10vw;
		translate:0 -50%;
		font-size:clamp(1.5rem, calc(-0.84rem + 8vw), 3rem);/* vp:468-768px 24-48px */
		color:#fff;
		line-height:1.3;
		text-shadow:0px 0px 0.5em #000;
	}
}
@media(max-width:768px){
	.fv .fv_bg img { height:75vh; object-fit:cover;}
}

/* ========== info（お部屋のご案内） ========== */
.info {
	position:relative;

	&::before { 
		content:"";
		position:absolute;
		inset:auto auto 0 0 ;
		width:100%;
		height:3em;
		background:url(../../image/top/info_bg.svg) repeat-x center / auto 100%;
		z-index:-1;
	}
}