body {
	background: #FBFBFA;
	color: #113B55;
}

.top-bg {
	position: relative;
	height: 700px;
	background: url('/top/img/mv.jpg') center/cover no-repeat;
}
.top-clip-decoration {
	background: #FBFBFA;
	margin-top: -100px;
	position: absolute;
	inset: 0;
	z-index: 0;
	clip-path: polygon(
		0 20%,
		20% 0%,
		80% 25%,
		110% 0%,
		100% 25%,
		100% 100%,
		0 100%
	);
}
.top-clip-decoration-sp {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 200px;
	background: #FBFBFA;
	z-index: 5;
	overflow: hidden;
	clip-path: polygon(
		0% 52%,
		20% 55%,
		60% 50%,
		100% 55%,
		100% 42.5%,
		100% 0%,
		0% 0%
	);
}
.title-sp {
	position: relative;
	z-index: 10;
}

.main-wrapper {
	padding: 0 30px;
}

.navbar {
	position: relative;
	z-index: 10;
}
.navbar-nav {
	gap: 16px;
	font-size: 1.2em;
}
@media (max-width: 1200px) {
	.navbar-nav {
	gap: 0px;
	font-size: 1em;
	}
}
.nav-width {
	width: 120px;
}
.nav-link {
	color: #113B55;
	padding-bottom: 0;
}
.nav-link:hover {
	color: #27B2A6;
}

.nav-item.dropdown {
	position: relative;
}
.dropdown-menu {
	inset: auto !important;
	--balloon-color: #DFEAEA;
	position: absolute;
	transform: translateX(-35%) translateY(15%);
	background: var(--balloon-color);
	border: none;
	border-radius: 18px;
	padding: 18px 22px;
	min-width: 260px;
	box-shadow: 0 10px 20px rgba(0,0,0,.08);
	margin-top: 0;
}
.dropdown-menu::before {
	content: "";
	position: absolute;
	top: -10px;
	left: 50%;
	transform: translateX(-50%);
	width: 26px;
	height: 26px;
	background: var(--balloon-color);
	border-radius: 50%;
}
.dropdown-item {
	color: #183b5b;
	padding: 8px 0;
	background: transparent;
}
.dropdown-item::before {
	content: "";
	display: inline-block;
	width: 11px;
	height: 11px;
	background: #2ED198;
	border-radius: 50%;
	margin-right: 12px;
}
.dropdown-item:hover {
	background: transparent;
	color: #27B2A6;
}

.window-stack{
	position: relative;
	display: inline-block;
	width: 18px;
	height: 16px;
	margin-left: 8px;
	vertical-align: middle;
}

.window-stack::before,
.window-stack::after{
	content: "";
	position: absolute;
	width: 12px;
	height: 10px;
	background: #DFEAEA;
	border: 2px solid #113B55;
}

.window-stack::before{
	top: 3px;
	right: 4px;
}

.window-stack::after{
	top: -2px;
	right: 0;
}

/* TOP画面のみ、ハンバーガーメニューを独自CSS+jsで制御*/
.menu-btn {
	top: -2rem;
	right:0;
}
.menu-btn-wrapper {
	position: sticky;
	display: flex;
	justify-content: flex-end;
	padding-right: 12px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}
.menu-btn-wrapper.fixed {
	position: fixed;
	top: 48px;
	right: 12px;
	z-index: 3000;
}
.menu-btn-wrapper.visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

@media (min-width: 992px) {
	/* PC表示かつスクロールでメニューが隠れたとき */
	.menu-btn-wrapper.fixed {
		top: 64px;
		right: 32px;
	}
}

@media (max-width: 991px) {
	.main-wrapper {
		position: relative;
		order: 1;
	}

	.top-bg {
		height: 360px;
		background: url(/top/img/mv_sp.jpg) 55% top /cover no-repeat
	}
}

.middle-bg {
	position: relative;
	height: 300px;
	background: url('/top/img/middle-bg.jpg') center center / cover no-repeat;
}
.middle-clip-decoration {
	background: #FBFBFA;
	margin-top: -20px;
	position: absolute;
	inset: 0;
	z-index: 1;
	clip-path: polygon(
		100% 45%,
		80% 55%,
		35% 35%,
		-10% 55%,
		0% 42.5%,
		0% 0%,
		100% 0%
	);
}
.middle-wrapper {
	background: #E6E9DB;
}
.green-top-clip-decoration {
	background: #E6E9DB;
	margin-top: 220px;
	position: absolute;
	inset: 0;
	z-index: 1;
	clip-path: polygon(
		0% 0%,
		11% 25%,
		22% 0%,
		38% 30%,
		44% 0%,
		55% 35%,
		66% 0%,
		77% 25%,
		90% 0%,
		100% 30%,
		100% 100%,
		0% 100%
	);
}
.green-bottom-clip-decoration {
	background: #E6E9DB;
	height: 80px;
	clip-path: polygon(
		0% 0%,
		100% 0%,
		100% 50%,
		50% 100%,
		0% 50%
	);
}

@media (max-width: 992px) {
	.middle-clip-decoration {
	background: #fff;
	clip-path: polygon(
		100% 50%,
		80% 55%,
		35% 45%,
		-10% 55%,
		0% 42.5%,
		0% 0%,
		100% 0%
	);
	}
	.green-top-clip-decoration {
	 clip-path: polygon(
		0% 0%,
		12.5% 18%,
		25% 0%,
		37.5% 20%,
		50% 0%,
		62.5% 18%,
		75% 0%,
		87.5% 20%,
		100% 0%,
		100% 100%,
		0% 100%
	);
	}
}

/* --- 三角形装飾 --- */
.top-obj1 {
	top: -40px; left: 30px;
}
.top-obj2 {
	top: 20px; left: -5px;
}
.pc-head-obj1 {
	top: 36vh; left: 8vw;
}
.pc-head-obj2 {
	top: 16vh; left: 82vw;
}
.pc-bg-obj1{
	top: 34vh; left: 80vw;
	z-index: 10;
}
.pc-bg-obj2{
	top: 40vh; left: 84vw;
	z-index: 10;
}
.pc-bg-obj3{
	top: 42vh; left: 14vw;
	z-index: 10;
}

/* --- 背景装飾 --- */
.bg-obj-sp1 {
	top: 10vh;
	left: 79vw;
	width: clamp(32px, 14vw, 64px);
}
.bg-obj-sp2 {
	top: 15vh;
	left: 70vw;
	width: clamp(32px, 10vw, 48px);
}
@media (min-width: 412px) {
	.bg-obj-sp1 {
		top: 6vh;
	}
	.bg-obj-sp2 {
		top: 11vh;
		left: 71vw;
	}
}
@media (min-width: 576px) {
	.bg-obj-sp1 {
		top: 3vh;
	}
	.bg-obj-sp2 {
		top: 8vh;
		left: 73vw;
	}
}
@media (min-width: 768px) {
	.bg-obj-sp1 {
		top: 3vh;
		left: 85vw;
	}
	.bg-obj-sp2 {
		left: 81vw;
	}
}
/* --- INTRO --- */
.accent-triangle {
	position: relative;
	overflow: hidden;
	border-radius: 32px 32px 0 32px;
}

/* --- NEWS --- */
.news-wrapper {
	border-radius: 120px;
	box-shadow: 0px 2px 138px 0px #9CAFAE24;
}

.news-item {
	border-bottom: 1px solid #eee;
	transition: background 0.2s;
}

.news-item:hover {
	opacity: 0.7;
}

.news-badge {
	background: #DFEAEA;
	color: #113B55;
}

.news-arrow {
	width: 15px;
	height: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.news-arrow::before {
	content: "";
	width: 12px;
	height: 12px;
	border-top: 2px solid #113B55;
	border-right: 2px solid #113B55;
	transform: rotate(45deg);
	display: block;
}

@media (max-width: 992px) {
	.news-wrapper {
		border-radius: 0;
		box-shadow: none;
	}
}

/* --- スキー・ゴルフ・合宿 --- */
.resorts-title {
	color: #2ED198;
	font-size: 3.5em;
}
.resorts-subtitle {
	font-size: 2.2em;
}
.resorts-subtitle-camp {
	font-size: 2em;
}
@media (max-width: 992px) {
	.resorts-subtitle {
		font-size: 1.15em;
	}
	.resorts-subtitle-camp {
		font-size: 1.1em;
	}
}

.photo-wrapper-ski {
	position: absolute;
	top: 65%;
	left: 10%;
	transform: translateY(-60%);
	width: 38%;
	z-index: 2;
}
.photo-wrapper-golf {
	position: absolute;
	top: 65%;
	left: 50%;
	transform: translateY(-60%);
	width: 38%;
	z-index: 2;
}
.photo-box-ski, .photo-box-golf, .photo-box-camp-wrap, .photo-box-camp {
	border-radius: 0;
	overflow: hidden;
}
.info-card {
	border-radius: 48px;
	box-shadow: 0 10px 30px rgba(0,0,0,0.08);
	z-index: 1;
	width: 100%;
}
.text-area-right {
	width: 50%;
	margin-left: auto;
}
.text-area-left {
	width: 50%;
	margin-right: auto;
}
@media (min-width: 768px) {
	.photo-box-camp {
		border-radius: 60px 0 60px 0;
	}
}

@media (min-width: 992px) {
	.photo-box-ski {
		border-radius: 0 120px 120px 120px;
	}
	.photo-box-golf {
		border-radius: 120px 0 120px 120px;
	}
	.photo-wrapper-ski, .photo-wrapper-golf {
		position: absolute;
	}
}
@media (min-width: 768px) and (max-width: 992px) {
	.photo-box-ski {
		border-radius: 0 80px 80px 80px;
	}
	.photo-box-golf {
		border-radius: 80px 0 80px 80px;
	}
	
	.photo-wrapper-ski {
		position: absolute;
		width: 45%;
		left: 6%;
	}
	.photo-wrapper-golf {
		position: absolute;
		width: 45%;
	}
}

@media (max-width: 768px) {
	.resorts-title, .resorts-title-offset {
		transform: none;
		text-align: center;
		font-size: 2.4em;
	}
	
	.col-lg-6 > div:first-child p {
		text-align: center;
	}
	.photo-wrapper-ski, .photo-wrapper-golf {
		position: static;
		transform: none;
		width: 100%;
		height: 100%;
	}
	
	.photo-box-ski {
		border-radius: 0 80px 0 0;
		aspect-ratio: 3 / 4;
	}
	.photo-box-golf {
		border-radius: 80px 0 0 0;
		aspect-ratio: 3 / 4;
	}
	.photo-box-camp-wrap {
		border-radius: 80px 0 0 0;
		aspect-ratio: 3 / 4;
	}
	
	.info-card {
		margin-top: -40px;
		border-radius: 0 0 48px 48px;
		overflow: hidden;
	}
	
	.text-area-right, .text-area-left {
		width: 100%;
	}
	
	.btn-common {
		display: block;
		text-align: center;
	}
}
@media (max-width: 400px) {
	.resorts-button-text {
		font-size: .85em;
	}
}

/* --- AREA MAP --- */
.areamap-bg {
	background: #F5F7F1;
}

.map-ratio {
	--bs-aspect-ratio: 75%;
}

@media (min-width: 992px) {
	.map-ratio {
		--bs-aspect-ratio: 33.3333%;
	}
}
@media (min-width: 768px) {
	/* SPでは中央線を非表示 */
	.access-border {
		border-right: 1px solid #ddd;
	}
}

.bottom-bg {
	background: url(/top/img/bottom-bg.jpg) center/cover no-repeat;
}

.banner-contents {
	max-width: 40%;
}
@media (max-width: 992px) {
	.banner-contents {
		max-width: 100%;
		padding-right: 12px;
	}
}