@charset "UTF-8";

sup,
sub {
	font-size: 50%;
}

sup {
	top: -1em;
}

.pageBg {
	background-color: #353535;
}

.pageSec + .pageSec {
	margin-top: clamp(80px, 2.72rem + 9.71vw, 230px);
}

.pageCopy {
	font-size: clamp(22px, 0.23rem + 1.79vw, 38px);
	letter-spacing: 0.3em;
	line-height: 1.6;
	color: #b9a172;
	text-align: center;
}
.pageCopy + * {
	margin-top: 90px;
}

.pageTxt {
	font-size: clamp(14px, 0.59rem + 0.45vw, 18px);
	letter-spacing: 0.1em;
	line-height: 2.3;
	color: #fff;
}
.pageTxt + .pageTxt {
	margin-top: 2em;
}

.pageMainImg {
	max-width: 1320px;
}

@media screen and (max-width: 768px) {
	.pageSec + .pageSec {
		margin-top: 40px;
	}

	.pageCopy + * {
		margin-top: 30px;
	}

	.pageTxt {
		letter-spacing: 0.06em;
	}

	.pageTxt + .pageTxt {
		margin-top: 30px;
	}

	.pageMainImg {
		max-width: 560px;
	}
}

/* kv
---------------------------------------------- */
.kv::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 600px;
	background : linear-gradient(0deg, rgba(53, 53, 53, 1) 0%, rgba(53, 53, 53, 0) 100%);
	z-index: 1;
}
.kv__ttl {
	bottom: calc(170 / 1320 * 100%);
	left: 50%;
	transform: translateX(-50%);
	font-size: clamp(18px, 0.34rem + 1.23vw, 29px);
}
.kv__ttl .en {
	letter-spacing: 0.5em;
}

.kv .p-caption {
	bottom: 10%;
	background: none;
	z-index: 10;
}

@media screen and (max-width: 768px) {
	.kv::before {
		content: none;
	}

	.kv__ttl {
	bottom: calc(80 / 1320 * 100%);
	}

	.kv .p-caption {
		bottom: 20%;
	}
}

/* intro
---------------------------------------------- */
.intro {
	margin-top: -40px;
}

.introBox {
	column-gap: calc(120 / 1320 * 100%);
	max-width: 1320px;
}

.introBoxHead {
	width: calc(700 / 1320 * 100%);
}

.introBoxHead__small {
	margin-top: 70px;
}
.introBoxHead__small .introBoxHead__img {
	width: 50%;
}
.introBoxHead__img--01 {
	margin-left: calc(60 / 700 * 100%);
}
.introBoxHead__img--02 {
	margin-top: calc(-80 / 700 * 100%);
	margin-left: auto;
}

.introBoxBody {
	flex: 1;
}

@media screen and (max-width: 768px) {
	.intro {
		margin-top: 0;
	}

	.introBox {
		flex-direction: column;
		row-gap: 20px;
		max-width: 560px;
	}

	.introBoxHead {
		width: 100%;
	}

	.introBoxHead__small {
		margin-top: 30px;
	}
	.introBoxHead__small .introBoxHead__img--01 {
		width: calc(170 / 315 * 100%);
		margin-left: 0;
	}
	.introBoxHead__small .introBoxHead__img--02 {
		width: calc(160 / 315 * 100%);
		margin-top: calc(-40 / 315 * 100%);
	}

	.introBoxBody {
		flex: 1;
	}
}

/* history
---------------------------------------------- */
.historyBox {
	column-gap: calc(190 / 1200 * 100%);
	margin-top: 100px;
}

.historyBoxHead {
	width: calc(437 / 1200 * 100%);
}

.bnr-stained {
	margin: 3em auto 0;
	width: 45dvw;
	max-width: 550px;
	display: block;
}

.bnr-stained img {
	width: 100%;
	height: auto;
}

@media screen and (max-width: 768px) {
	.history .pageMainImg {
		width: 100%;
	}
	.historyBox {
		row-gap: 30px;
		margin-top: 30px;
	}

	.historyBoxHead {
		width: 100%;
	}
	.bnr-stained {
		margin: 1.5em auto;
		width: 100%;
		display: block;
	}
}
/* connect
---------------------------------------------- */
.connect {
	padding-bottom: clamp(110px, 4.9rem + 8.41vw, 240px);
}
.connectBox {
	margin-top: 100px;
}

.connectBox__txt {
	text-align: center;
}

.connectBoxHead {
	max-width: 1120px;
	margin-top: 100px;
}

.connectImgList {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	column-gap: calc(80 / 1120 * 100%);
}

@media screen and (max-width: 768px) {
	.connect {
		padding-bottom: 40px;
	}
	.connectBox {
		margin-top: 30px;
	}

	.connect .pageMainImg {
		width: 100%;
	}

	.connectBoxHead {
		max-width: 560px;
		margin-top: 30px;
	}

	.connectImgList {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px calc(20 / 315 * 100%);
	}
}