@charset "UTF-8";

/* intro
---------------------------------------------- */
.intro {
	padding-block: 70px;
	position: relative;
	z-index: 0;
}

@media screen and (max-width: 768px) {
	.intro {
		padding-block: 30px;
	}
	.intro__copy {
		width: calc(340 / 375 * 100%);
	}
}

/* lounge
---------------------------------------------- */
.lounge {
	padding-top: clamp(40px, 0.07rem + 10.36vw, 200px);
}

.anchor {
	margin-bottom: 120px;
}
.anchorList {
	gap: 20px calc(50 / 1300 * 100%);
}
.anchorList > li {
	width: max(320px, calc(400 / 1300 * 100%));
}
.anchorList__link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	width: 100%;
	height: max(65px, 100%);
	background-color: #a1afae;
	color: #fff;
	font-size: clamp(23px, 1.23rem + 0.43vw, 28px);
	line-height: 1;
	padding: .7em;
	position: relative;
	z-index: 0;
}
.anchorList__link.is-active {
	background-color: var(--color-green);
}
.anchorList__link .em {
	flex-shrink: 0;
	min-width: 36px;
	font-size: calc(24 / 28 * 100%);
	background-color: #d0d7d7;
	color: var(--color-green);
	padding: 0.3em;
	text-align: center;
}
.anchorList__link::before {
	content: '';
	width: 19px;
	height: 23px;
	position: absolute;
	top: 50%;
	right: 7%;
	transform: translateY(-50%) rotate(90deg);
	background-color: #fff;
	-webkit-mask-image: url(../../img/common/icon_arrow.svg);
	mask-image: url(../../img/common/icon_arrow.svg);
	mask-size: contain;
	-webkit-mask-size: contain;
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
	z-index: 1;
}

.pageTitle__text {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: .3em;
}
.pageTitle__text .em {
	flex-shrink: 0;
	min-width: 54px;
	font-size: calc(35 / 46 * 100%);
	line-height: 1;
	background-color: var(--color-green);
	color: #fff;
	padding: 0.15em;
	text-align: center;
}

.loungeBox {
	max-width: 1400px;
	margin-top: 80px;
}
.loungeImg01 {
	width: calc(600 / 1400 * 100%);
}
.loungeImg02 {
	width: calc(705 / 1400 * 100%);
}


.merit {
	max-width: 1400px;
	margin-top: 100px;
}
.meritList {
	gap: 30px calc(66 / 1400 * 100%);
}
.meritList > li {
	display: grid;
	place-items: center;
	width: calc(300 / 1400 * 100%);
	background-color: var(--color-green);
	border-radius: 0 30px 0 30px;
	color: #fff;
	padding: 20px 10px;
	text-align: center;
	position: relative;
	z-index: 0;
}
.meritList__text {
	font-size: clamp(12px, 0.5rem + 0.52vw, 18px);
	letter-spacing: 0.04em;
	line-height: 1.7;
}
.meritList__text .em {
	font-size: calc(30 / 18 * 100%);
	line-height: 1.3;
}
.meritList__text .em02 {
	font-size: calc(38 / 18 * 100%);
	line-height: 1.3;
}
.meritList__text .num {
	font-size: calc(48 / 30 * 100%);
	line-height: 1.3;
}
.meritList__text .small {
	display: inline-block;
	font-size: max(10px, calc(14 / 18 * 100%));
	line-height: 1.8;
}

.meritList__caption {
	width: 100%;
	color: #333;
	font-size: 12px;
	letter-spacing: 0.05em;
	line-height: 1.4;
	position: absolute;
	top: calc(100% + 1em);
	left: 0;
	z-index: 0;
}

.loungeImgBox {
	display: grid;
	grid-template-columns: calc(1140 / 1920 * 100%) 1fr;
	margin-top: 100px;
}
.loungeImgBox .loungeImgBox__item:nth-child(1) {
	grid-area: 1/1/3/2;
}

@media screen and (max-width: 991px) {
	.meritList {
		gap: 30px 4%;
	}
	.meritList > li {
		width: calc((100% - 40px) / 2);
	}
}

@media screen and (max-width: 768px) {
	.anchor {
		margin-bottom: 60px;
	}
	.anchorList__link {
		justify-content: flex-start;
		padding-inline: 1em;
	}

	.pageTitle__text .em {
		min-width: 32px;
	}

	.loungeBox {
		margin-top: 40px;
	}

	.loungeBox__inner {
		row-gap: 30px;
	}
	.loungeImg01,
	.loungeImg02 {
		width: 100%;
	}

	.merit {
		width: calc(300 / 375 * 100%);
		max-width: 400px;
		margin-top: 40px;
	}
	.meritList > li {
		width: 100%;
		min-height: 140px;
		border-radius: 0 20px 0 20px;
	}
	.meritList > li.has-caption + li {
		margin-top: 40px;
	}

	.meritList__caption {
		font-size: 10px;
	}

	.loungeImgBox {
    grid-template-columns: 50% 50%;
    margin-top: 60px;
	}
	.loungeImgBox .loungeImgBox__item:nth-child(1) {
    grid-area: 1 / 1 / 2 / 3;
	}
}

/* conference
---------------------------------------------- */
.conference {
	padding-block: clamp(40px, 0.07rem + 10.36vw, 200px);
}
.conferenceBox {
	max-width: 1400px;
	margin-top: 80px;
}

.conferenceImg01 {
	width: calc(620 / 1400 * 100%);
}
.conferenceImg02 {
	width: calc(705 / 1400 * 100%);
}

@media screen and (max-width: 768px) {
	.conferenceBox {
		max-width: 560px;
		margin-top: 40px;
	}
	.conferenceBox__inner {
		row-gap: 30px;
	}
	.conferenceImg01,
	.conferenceImg02 {
		width: 100%;
	}
}

/* service
---------------------------------------------- */
.serviceHead {
	padding-block: clamp(40px, 0.07rem + 10.36vw, 200px);
}
.service__title::after {
	background-color: #fff;
}

.rental {
	max-width: 1500px;
	margin-top: -4%;
	padding: min(100px, calc(100 / 1920 * 100%));
}
.rental__title {
	font-size: clamp(20px, 0.92rem + 0.7vw, 28px);
	font-weight: 500;
	letter-spacing: 0.05em;
	margin-top: 50px;
	text-align: center;
}
.rental__text {
	margin-top: 1.5em;
}

.serviceListWrap {
	margin-top: 100px;
}
.serviceList {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 30px calc(44 / 1300 * 100%);
}
.serviceList > li {
	background-color: var(--color-green);
}
.serviceList__body {
	color: #fff;
	padding: 7%;
}
.serviceList__name {
	color: var(--color-em);
	font-size: clamp(16px, 0.92rem + 0.17vw, 18px);
	letter-spacing: 0.05em;
	text-align: center;
}
.serviceList__text {
	font-size: 14px;
	letter-spacing: 0.05em;
	line-height: 2.4;
	margin-top: 1em;
}

.work {
	margin-top: 150px;
	padding: 90px 30px 100px;
}

.work__title {
	font-size: clamp(24px, 0.66rem + 1.74vw, 44px);
	line-height: 1;
	text-align: center;
}
.work__title .ja {
	display: block;
	font-size: 13px;
	letter-spacing: 0.05em;
	margin-top: 1em;
}

.workBox {
	max-width: 900px;
	margin-top: 50px;
	margin-inline: auto;
}

.work__text {
	margin-top: 1.5em;
}

.workBtn {
	max-width: 490px;
	margin-top: 80px;
	margin-inline: auto;
}
.workBtn .btn {
	background-color: transparent;
	border: 1px solid #000;
	color: #000;
}
.workBtn .btn::before {
	content: '';
	width: 20px;
	height: 15px;
	position: absolute;
	top: 50%;
	right: 7%;
	transform: translateY(-50%);
	background-color: #000;
	-webkit-mask-image: url(../../img/common/icon_arrow.svg);
	mask-image: url(../../img/common/icon_arrow.svg);
	mask-size: contain;
	-webkit-mask-size: contain;
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
	z-index: 1;
}

.workBtn__caption {
	font-size: 12px;
	letter-spacing: 0.05em;
	line-height: 1.3;
	margin-top: 1em;
	text-align: center;
}

@media screen and (max-width: 991px) {
	.serviceList {
    grid-template-columns: repeat(3, 1fr);
	}
}

@media screen and (max-width: 768px) {
	/* .serviceHead {
		padding-bottom: 380px;
	} */

	.rental {
		max-width: 560px;
		margin-top: -90%;
		padding: 40px calc(30 / 375 * 100%);
	}
	.rental__title {
		margin-top: 30px;
	}

	.serviceListWrap {
		margin-top: 40px;
	}
	.serviceList {
		grid-template-columns: 1fr;
	}

	.work {
		margin-top: 40px;
		padding: 40px calc(20 / 375 * 100%);
	}
	.workBox {
		margin-top: 30px;
	}
	.workBtn {
		margin-top: 30px;
	}
	.workBtn .btn {
		height: 60px;
		font-size: 16px;
	}
	.workBtn__caption {
		font-size: 10px;
	}
}