@charset "utf-8";

/* =======================================================================================
	COMMON
======================================================================================= */
	.siteWrap {
		background-color: #f7f2ea;
	}
	.mainVisual {
		position: relative;
	}
	.pageThemeHeader .ptHeading {
		position: absolute;
		top: 10%;
		left: 50%;
		transform: translateX(-50%);
		/*margin-top: 0;
		padding-top: var(--site-marpad-L);*/
	}
@media screen and (max-width: 900px) {
	.pageThemeHeader {
		position: relative;
	}
	.pageThemeHeader .ptHeading {
		text-align: right;
		top: auto;
		left: auto;
		transform: translateX(0);
		bottom: 7%;
		right: 2%;
		width: auto;
		margin: 0;
		padding: 0;
		border-bottom: 0px;
	}
	.pageThemeHeader .ptHeading .hTxt {
		margin-top: -5px;
	}
}
	.pageThemeHeader .ptHeading .hWord {
		color: rgba(255, 255, 255, .7);
	}
	.pageThemeHeader .ptHeading .hTxt {
		color: #FFF;
	}

	/* siteHeaderWrap | MVに重なっている間、ヘッダーメニューの視認性を上げるグラデーション
	   [!] is_headerSolidが付いたら不要（::beforeの白背景に切り替わるため）、opacityで消す */
	.siteHeaderWrap::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background: linear-gradient(to bottom, rgba(var(--site-variationColor-blackish), .45) 0%, rgba(var(--site-variationColor-blackish), 0) 100%);
		opacity: 1;
		transition: opacity .3s ease;
	}
	.siteHeaderWrap.is_headerSolid::after {
		opacity: 0;
	}

	/*.pageThemeHeader + .container {
		background: url("../images/share/bg_top.png") top center no-repeat;
		background-size: 100% auto;
	}*/

/* =======================================================================================
	PAGE
======================================================================================= */

	/* entranceSwiper | SP時のみフェード切替のスワイパーにする（PC時は元の2カラム表示のまま）
	--------------------------------------------------------------------------------------- */
	/* *	pagination（js_swiperFade）・PC側スキャフォールド（js_swiperSpCarousel）は
	   *	swiper_setting.css参照。ここには.swiper-slide imgの調整のみ記載する。 */
@media screen and (max-width: 900px) {
	.generalColBox.entranceSwiper .swiper-slide img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}
	

	#premium {
		background-color: #FFF;
	}

	.premiumImgWrap {
		position: relative;
		margin-right: 50px;
		margin-left: 50px;
		padding: 0 var(--site-marpad-S) var(--site-marpad-S);
	}
	.premiumImgWrap::before {
		content: "";
		display: block;
		position: absolute;
		bottom: 0;
		right: 0;
		width: 100%;
		height: 40%;
		background: var(--site-variationColor-pattern) top center no-repeat;
		background-size: cover;	
	}

@media screen and (max-width: 900px) {
	#premium .leadTxt {
		text-align: center;
	}
	.premiumImgWrap {
		margin-right: 0;
		margin-left: 0;
		padding: 0 0 var(--site-marpad-S);
	}
	.premiumImgWrap .sizeContentWideL {
		width: 100%;
	}
	.premiumImgWrap::before {
		content: "";
		display: block;
		position: absolute;
		bottom: 0;
		right: 0;
		width: 60%;
		height: 30%;
		background: var(--site-variationColor-pattern) top center no-repeat;
		background-size: cover;	
	}
	.premiumImgWrap .generalColBox {
		--base-generalColBox-margin-row: 40px;
	}
	.premiumImgWrap [data-marpad~="mtM"] {
		margin: 0 15px 0px 90px !important;
	}
}


	/* premiumSwiper | 画像複数枚をSwiperでフェード切替（PC/SP共通・常時有効）
	--------------------------------------------------------------------------------------- */
	.premiumSwiperWrap {
		align-self: flex-start;
	}
	.premiumSwiperWrap .imgcapkeep {
		z-index: 100;
	}
	.premiumSwiper .swiper-slide img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}


	/* amenityWrap | SP時のみスライドのスワイパーにする（PC時は元のグリッド表示のまま）
	--------------------------------------------------------------------------------------- */
	/* *	pagination位置・prev/nextボタン（js_swiperNavBtn）、PC側スキャフォールド
	   *	（js_swiperSpCarousel）はswiper_setting.css参照。
	   *	ここには「900.02～1200pxのみ2カラムに縮小する」独自調整のみ記載する。 */
	.generalColBox.amenityWrap .amenityWrapSlider {
		position: relative;
		min-width: 0;
	}
@media screen and (min-width: 900.02px) and (max-width: 1200px){
	.generalColBox.amenityWrap .amenityWrapSlider,
	.generalColBox.amenityWrap .swiper,
	.generalColBox.amenityWrap .swiper-wrapper {
		display: contents;
	}
	.generalColBox.amenityWrap .swiper-slide {
		width: calc((100% - (var(--base-generalColBox-margin-column) * 1)) / 2);
		height: auto;
	}
	.generalColBox.amenityWrap .swiper-button-prev,
	.generalColBox.amenityWrap .swiper-button-next,
	.generalColBox.amenityWrap .swiper-pagination {
		display: none;
	}
}


	.preIco {
		display: grid;
		grid-template-columns: repeat(3, minmax(80px, 100px));
		justify-content: center;
		gap: 10px;
		margin: 0 50px;
	}
	.preIco li {
		aspect-ratio: 1 / 1;
		background: #c59c6c;
	}
	.preIco li a {
		display: flex;
		width: 100%;
		height: 100%;
		align-items: center;
		justify-content: center;
		color: #FFF;
		text-align: center;
		font-size: 1.1em;
		line-height: 1.6;
		padding: 5px;
		transition: 0.3s opacity ease;
	}
	@media (hover: hover) and (pointer: fine) {
		.preIco li a[href]:hover {
			opacity: .8;
		}
	}


	/* modalUnitWrap（プレミアムラウンジ設備の説明モーダル。表示/非表示の共通部分はassets/gadget/lightbox/setting.css参照）
	------------------------------------------------------------------- */
	.modalUnit {
		inset: auto;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
	.modalUnit .modalUnitInner {
		max-width: 600px;
		margin: 0 auto 0;
		padding: var(--site-marpad-XS) var(--site-marpad-XS) var(--site-marpad-XS);
		text-align: center;
	}
	.modalUnit .modalUnitInner h4 {
		color: var(--site-themeColor-accent_2);
		font-size: 1.3em;
	}
	.modalUnit .modalUnitInner h4::after {
		content: "";
		display: block;
		width: 50px;
		height: 1px;
		background: var(--site-themeColor-accent_2);
		margin: 0.5em auto 0.8em;
	}
	.modalUnit .modalUnitInner p {
		text-align: left;
		line-height: 1.8;
	}
@media screen and (max-width: 736px) {
	.modalUnit .modalUnitInner {
		margin-top: 30%;
	}
}



	.amenityUnit dt {
		color: #947d5d;
		font-size: 1.15em;
		padding: 5px 10px;
		border-bottom: 1px solid #cccccc;
	}
	.amenityUnit dd {
		line-height: 1.8;
		margin-top: 1.5em;
	}




	.equIco {
	}
	.equIcoInner {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
		gap: 10px;

		margin: var(--site-marpad-L) 0;
		padding: 50px 30px;
		background-color: rgba(255, 255, 255, .4);
	}
	.equIco em {
		display: block;
		text-align: center;
		font-size: min(0.9em, 2.3vw);
		line-height: 1.2;
		letter-spacing: 0;
		margin-top: 5px;
	}
@media screen and (max-width: 900px) {
	.equIco {
	}
	.equIcoInner {
		padding: 50px 20px;
	}
}
@media screen and (max-width: 736px) {
	.equIcoInner {
		grid-template-columns: repeat(4, 1fr);
	}
}




/* labelUnit */
	.labelUnit {
		max-width: 700px;
		padding: 30px;
		background: rgba(0, 0, 0, .03);
	}

@media print, screen and (min-width: 736.02px) {
	.labelUnit .generalColBox {
		--base-generalColBox-margin-column: 30px;
		justify-content: center;
	}
	.labelUnit .generalColBox p {
		width: auto;
		text-align: center;
	}
	.labelUnit .generalColBox p img {
		height: 200px;
		width: auto;
	}
}