@charset "UTF-8";

/* 一般サイトプランページのスタイルを上書きする際に使用 */

/* kv
---------------------------------------------- */
.kv__ttl {
	flex-direction: column;
	align-items: center;
	justify-content: center;
	row-gap: .2em;
	width: 100%;
	bottom: 50%;
	left: 50%;
	opacity: 0;
	transform: translate(-50%, 55%);
	transition: .6s .3s ease-out;
}

.loaded .kv__ttl {
	opacity: 1;
	transform: translate(-50%, 50%);
}

@media screen and (max-width: 768px) {
	.kv {
		height: auto;
	}

	.kv__ttl .en {
		font-size: 48px;
	}

	.kv__ttl .ja {
		font-size: 14px;
	}
}

/* planArea
---------------------------------------------- */
.bg-visitors {
	margin: 0;
	padding: 1px 0;
	width: 100%;
	background: linear-gradient(135deg, rgba(28, 55, 108, 1) 0%, rgba(5, 35, 93, 1) 2.5%, rgba(0, 23, 38, 1) 100%);
}
.bg-visitors .backBtn {
	margin: 0 auto 40px;
}
.planArea {
	background: none;
}

.planTab__btn.is-active {
	background-color: #6b5c3d;
}

.planAreaHead {
	color: #fff;
}

.planArea__copy {
	font-size: clamp(18px, 0.07rem + 2.19vw, 34px);
	letter-spacing: 0.1em;
	line-height: 1.7;
	text-align: center;
}

.planArea__txt {
	font-size: clamp(14px, 0.61rem + 0.55vw, 18px);
	letter-spacing: 0.1em;
	line-height: 2;
	text-align: center;
}
* + .planArea__txt {
	margin-top: 1.5em;
}

* + .planList {
	margin-top: 80px;
}

@media (hover: hover) and (pointer: fine) {
	.planList__link:hover {
		filter: brightness(.8);
	}
}

@media screen and (min-width: 769px) {
	.bg-visitors .backBtn {
		margin: 0 auto 80px;
	}
	.planList {
		gap: 72px calc(72 / 1200 * 100%);
	}
}

@media screen and (max-width: 768px) {
	.planAreaHead {
		width: calc(340 / 375 * 100%);
	}

	.planArea__txt {
		letter-spacing: 0.05em;
	}

	* + .planList {
		margin-top: 40px;
	}
}

/* 詳細ページ
---------------------------------------------- */
@media screen and (min-width: 769px) {

}

@media screen and (max-width: 768px) {
	.detailBody {
		padding-bottom: 20px;
	}
}

/* backBtn
---------------------------------------------- */
.backBtn {
	max-width: 460px;
	margin-top: 80px;
	margin-inline: auto;
}
.backBtn__btn .ja {
	font-size: 20px;
}

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

	.backBtn__btn {
		height: 60px;
	}

	.backBtn__btn .ja {
		font-size: 15px;
	}
}