@import"https://cdn.jsdelivr.net/npm/yakuhanjp@4.0.0/dist/css/yakuhanmp.css";
:root{
	--color-white: #fff;
	--color-brown: #be9772;
	--color-yellow: #f0e2b2;
	--color-gray: #e6e7eb;
	--color-black: #444;
	--grid-row-gap: clamp(32px, 4.2vw, 42px);
	--grid-column-gap: clamp(22px, 3.6vw, 36px);
}
.trajan {
	font-family: "trajan-pro-3", serif;
	font-weight: 400;
	font-style: normal;
	letter-spacing: .2em
}
.caption.cap-2 {
	margin-right: 50%
}
.p-home-quality {
	padding-top: 0;
	overflow: hidden;
	font-family: YakuHanMP, "Shippori Mincho", "游明朝", "Yu Mincho", YuMincho, "游明朝体", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", serif
}
.p-home-quality * {
	margin: 0;
	padding: 0
}
.p-home-quality .inner.is-wide {
	max-width: 1120px
}
main {
	background-color: #453934
}
h2 {
	font-size: 22px;
	color: #be9772;
	font-weight: 600;
	padding: 0px 30px 5px
}
h3 {
	color: #fff;
	font-size: 22px;
	font-weight: 400;
	letter-spacing: .2em;
	margin-bottom: 8em;
	text-align: center;
	padding-top: 39px
}
h3 span {
	display: inline-block
}
@media(min-width: 751px) {
	.pc-none {
		display: none
	}
}
h4 {
	font-size: 30px;
	font-weight: 400
}
@media screen and (max-width: 767px) {
	h4 {
		font-size: 24px
	}
}
.trajan {
	font-family: "trajan-pro-3", serif;
	font-weight: 400;
	font-style: normal;
	letter-spacing: .2em;
}
.en-title{
	font-size: 14px;
}
.p-home .tertiary-heading.pt-none{
	padding-top: 0;
}
.p-home .tertiary-heading.mb-none{
	margin-bottom: 0;
}
.lead.mt-none{
	margin-top: 0;
}
.general-section .inner.quality-inner{
	max-width: 1120px;
}
.quality-tabs{
	margin: clamp(32px, 4.8vw, 48px) 0 clamp(20px, 3vw, 30px);
	display: flex;
	justify-content: center;
	align-items: center;
}
.tab-item{
	width: 50%;
	height: clamp(48px, 7.5vw, 75px);
	background-color: var(--color-gray);
	transition: all .3s ease-out;
	a{
		padding: 6px;
		width: 100%;
		height: 100%;
		display: block;
		text-align: center;
		align-content: center;
		color: var(--color-black);
		font-size: clamp(1.4rem, 2vw, 2rem);
		font-feature-settings: "palt";
		line-height: 1.3;
	}
	&.is-active,
	&:hover{
		background-color: var(--color-brown);
		a{
			color: var(--color-white);
		}
	}
}
.sub-tabs{
	display: flex;
	gap: clamp(8px, 1.6vw, 16px);
}
.sub-tab-item{
	flex: 1;
	border: 1px solid var(--color-brown);
	transition: all .3s ease-out;
	a{
		padding: 20px 5px;
		width: 100%;
		height: 100%;
		display: grid;
		place-items: center;
		color: var(--color-brown);
		text-align: center;
		font-size: clamp(1.25rem, 2vw, 2rem);
		letter-spacing: 0;
		line-height: 1.3;
	}
	&:hover{
		background-color: var(--color-gray);
	}
}
@media screen and (max-width: 767px) {
	.sub-tab-item{
		aspect-ratio: 1 / 1;
	}
	.amenity{
		.sub-tab-item{
			aspect-ratio: 210 / 152;
		}
	}
}
.contents > section{
	padding-block: clamp(56px, 8vw, 80px) clamp(16px, 4vw, 40px);
}
.quality-heading{
	margin-bottom: .6em;
	font-size: clamp(2.3rem, 3.3vw, 3.6rem);
	letter-spacing: 0;
}
.quality-lead{
	margin-bottom: 2em;
	letter-spacing: .15rem;
}
.quality-grid{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--grid-row-gap) var(--grid-column-gap);
}
.grid-col-2{
	grid-template-columns: repeat(2, 1fr);
	.img-only{
		figure{
			margin-bottom: 0;
		}
	}
	.grid-item{
		&:first-child{
			display: flex;
			flex-direction: column;
			justify-content: center;
			.quality-heading{
				display: flex;
				align-items: center;
				gap: 8px;
				font-size: clamp(1.8rem, 2.4vw, 2.4rem);
				letter-spacing: .15rem;
				span{
					font-size: 60%;
				}
			}
			.lead{
				margin-bottom: 0;
			}
		}
		&:nth-child(3),
		&:nth-child(4){
			.note{
				font-feature-settings: "palt";
				letter-spacing: .06rem;
			}
		}
	}
}
.grid-col-6{
	grid-template-columns: repeat(6, 1fr);
}
.grid-item{
	figure{
		margin-bottom: clamp(16px, 2.4vw, 24px);
		&.img-wrapper .caption{
			text-shadow: 0px 0px 0px var(--color-black), 0px 0px 2px var(--color-white), 0px 0px 2px var(--color-white), 0px 0px 2px var(--color-white);
		}
		&.img-wrapper .caption.is-light{
			text-shadow: 0px 0px 0px var(--color-black), 0px 0px 2px var(--color-black), 0px 0px 2px var(--color-black), 0px 0px 2px var(--color-black);
		}
	}
	.note{
		margin: 0;
		color: var(--color-white);
		font-size: 13px;
		line-height: 1.8;
		& + .grid-ttl{
			margin-top: clamp(18px, 2.4vw, 24px);
		}
		& + figure{
			margin-top: clamp(18px, 2.4vw, 24px);
			margin-bottom: 14px;
		}
	}
	.caption{
		margin: 10px  0 0 0;
	}
}
.grid-ttl{
	margin-bottom: clamp(8px, 1.4vw, 14px);
	font-size: clamp(1.5rem, 2vw, 2rem);
	text-align: left;
	letter-spacing: .1rem;
	font-feature-settings: "palt";
	line-height: 1.3;
}
.kitchen-grid{
	margin-bottom: var(--grid-row-gap);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: 1fr 1fr;
	gap: calc(104 / 1680 * 100%) var(--grid-column-gap);
	.img-only{
		grid-column: 1 / 3;
		grid-row: 1 / 3;
		figure{
			margin-bottom: 0;
			height: 100%;
			img{
				height: 100%;
				object-fit: cover;
				object-position: 30%;
			}
		}
	}
	.grid-item{
		&:nth-child(2){
			grid-column: 3 / 4;
			grid-row: 1 / 2;
		}
		&:nth-child(3){
			grid-column: 3 / 4;
			grid-row: 2 / 3;
		}
	}
}
.link-box{
	padding: clamp(24px, 5vw, 50px);
	border: 1px solid var(--color-brown);
}
.link-point{
	margin-bottom: 16px;
	padding: clamp(6px, .8vw, 8px);
	align-items: center;
	gap: 8px;
	font-size: 16px;
}
.point-num{
	font-size: 85%;
}
.bg-red{
	background-color: #b21e24;
}
.bg-blue{
	background-color: #005a9c;
}
.gothic{
	font-family: 'ヒラギノ角ゴシック','Hiragino Sans',YuGothic,'Yu Gothic',sans-serif;
}
.powder-grid{
	margin-bottom: var(--grid-row-gap);
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: var(--grid-column-gap);
}
.column-2{
	grid-column: span 2;
}
.column-3{
	grid-column: span 3;
}
.column-4{
	grid-column: span 4;
}
.column-6{
	grid-column: span 6;
}
#premium{
	padding: 68px 0 clamp(40px, 8vw, 80px);
	background: url("../images/equipment/premium-bg.webp") no-repeat top center/ cover;
	.c-entitle{
		margin-bottom: 36px;
		font-size: clamp(16px, 2.2vw, 22px);
	}
	.quality-heading{
		color: var(--color-yellow);
		font-size: clamp(1.9rem, 3.3vw, 3.6rem);
		letter-spacing: clamp(.2rem, .04vw, .4rem);
	}
	.lead{
		margin-bottom: clamp(70px, 8vw, 80px);
		line-height: 2;
	}
	.grid-ttl{
		color: var(--color-yellow);
	}
	.note{
		font-size: 13px;
	}
}
.features-box{
	margin-block: clamp(46px, 5vw, 50px) clamp(50px, 8vw, 80px);
	padding: 32px clamp(32px, 6.5vw, 65px) 40px;
	border: 1px solid rgba(255, 255, 255, .5);
}
.features-heading{
	margin-bottom: 2em;
	font-size: 1.8rem;
	color: rgba(255, 255, 255, .5);
}
.features-lists{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(30px, 5.2vw, 52px);
}
.features-item{
	width: 20%;
}
.features-ttl{
	margin-bottom: 12px;
	padding-bottom: 14px;
	font-size: clamp(1.8rem, 2vw, 2rem);
	position: relative;
	&::after{
		content: '';
		width: 100%;
		height: 1px;
		position: absolute;
		bottom: 0;
		left: 0;
		background-color: rgba(255, 255, 255, .5);
	}
}
.c-entitle.text-left{
	margin-bottom: 28px;
	text-align: left;
	letter-spacing: .24rem;
}
#toilet{
	.grid-item{
		figure{
			margin-bottom: clamp(18px, 2.4vw, 24px);
			height: auto;
		}
	}
}
.sp-contents-l{
	margin-bottom: 36px;
}
@media screen and (max-width: 767px) {
	.sp-text-left{
		text-align: left;
	}
	.sp-text-center{
		text-align: center;
	}
	.quality-grid{
		grid-template-columns: repeat(2, 1fr);
		.quality-grid{
			gap: 0;
		}
	}
	.kitchen-grid,
	.powder-grid{
		grid-template-columns: repeat(2, 1fr);
		row-gap: 40px;
		.grid-item{
			&.img-only{
				grid-column: 1 / 3;
				grid-row: 1 / 3;
				figure{
					margin-bottom: 0;
					height: auto;
				}
			}
			&:nth-child(2),
			&:nth-child(3){
				grid-column: auto;
				grid-row: auto;
			}
		}
	}
	.link-box{
		margin-top: 64px;
		position: relative;
		.grid-item{
			&:first-child{
				display: contents;
				.quality-heading{
					position: absolute;
					top: -30px;
					left: 0;
				}
				.lead{
					margin-bottom: 16px;
				}
			}
			figure{
				margin-bottom: 30px;
			}
		}
	}
	.grid-col-2{
		display: contents;
		grid-template-columns: auto;
	}
	.sp-column-2{
		grid-column: span 2;
	}
	.sp-column-3{
		grid-column: span 3;
	}
	#premium{
		.quality-grid{
			padding-inline: 10%;
			grid-template-columns: auto;
		}
		.grid-ttl{
			letter-spacing: .3rem;
		}
	}
	.features-item{
		width: 100%;
	}
	.features-box{
		& + .quality-grid{
			.grid-item{
				&:first-child{
					order: 1;
				}
				&:nth-child(2){
					order: 4;
				}
				&:nth-child(3){
					order: 2;
				}
				&:nth-child(4){
					order: 3;
				}
				&:nth-child(5){
					order: 5;
				}
			}
		}
	}
	.c-entitle.text-left{
		text-align: center;
	}
	#amenity{
		.grid-item{
			&:nth-child(8){
				order: 1;
			}
			&:nth-child(9){
				order: 2;
			}
		}
	}
	#security{
		.grid-item{
			&:first-child{
				img{
					max-width: 200px;
				}
			}
			&:nth-child(7){
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: var(--grid-row-gap) var(--grid-column-gap);
			}
		}
	}
}