/*------------------------------
-このウェブサイトで使用する細かなCSSの定義
------------------------------*/
/* ドロップダウンメニューのアニメーション制御　ここから */
@media (min-width: 768px) {
	.animate {
		animation-duration: 0.3s;
		-webkit-animation-duration: 0.3s;
		animation-fill-mode: both;
		-webkit-animation-fill-mode: both;
	}
}
@keyframes slideIn {
	0% {
		transform: translateY(1rem);
		opacity: 0;
	}
	100% {
		transform: translateY(0rem);
		opacity: 1;
	}
	0% {
		transform: translateY(1rem);
		opacity: 0;
	}
}
@-webkit-keyframes slideIn {
	0% {
		-webkit-transform: transform;
		-webkit-opacity: 0;
	}
	100% {
		-webkit-transform: translateY(0);
		-webkit-opacity: 1;
	}
	0% {
		-webkit-transform: translateY(1rem);
		-webkit-opacity: 0;
	}
}
.slideIn {
	-webkit-animation-name: slideIn;
	animation-name: slideIn;
}
/* ドロップダウンメニューのアニメーション制御　ここまで */
/* Heroイメージ領域の表示制御 ここから */
/* スクリーン幅による上部帯のフォントサイズ等制御 */
.heroCopy {
	font-size: calc(1.275rem + 0.3vw);
}
@media (max-height: 500px) {
	.mainPhraseS {
		font-size: calc(1.275rem + 0.3vw);
	}
	.mainPhraseL {
		font-size: calc(1.575rem + 2vw);
	}
	.heroCopy {
		font-size: calc(0.9rem + 0.1vw);
	}
}
@media (max-width: 400px) {
	.heroCopy {
		font-size: calc(0.9rem + 0.1vw);
	}
}
.heroBrand {
	font-family: serif;
	filter: drop-shadow(0 0 3px black) drop-shadow(0 0 0.4em white);
}
.heroCopy {
	font-family: serif;
	filter: drop-shadow(0 0 1px white) drop-shadow(0 0 2px white) drop-shadow(0 0 3px white) drop-shadow(0 0 6px white);
}
.unitName {
	font-size: calc(1.1rem + 0.2vw);
}
@media (max-height: 500px) {
	.unitName {
		font-size: calc(0.7rem + 0.1vw);
	}
}
@media (max-width: 400px) {
	.unitName {
		font-size: calc(0.7rem + 0.1vw);
	}
}
.unitName {
	font-family: serif;
	filter: drop-shadow(0 0 1px white) drop-shadow(0 0 2px white) drop-shadow(0 0 3px white) drop-shadow(0 0 6px white);
}
/* スクリーン幅による上部帯のフォントサイズ等制御 ここまで */
/* 画像の表示位置を固定し、スクロール時にパララックス効果を出すための設定（トップページ） ここから */
.bg-hero-gradient {
	/* 帯のグラデーション制御 */
	background: #002c60;
	background: linear-gradient(
		118deg,
		rgba(0, 44, 96, 1) 40%,
		rgba(0, 44, 96, 0) 65%,
		rgba(0, 44, 96, 0) 75%,
		rgba(0, 44, 96, 0.8) 100%
	);
}
.bg-parallax {
	width: 100%;
	height: 50dvh;
	overflow: clip;
}
.bg-parallax::after {
	content: '';
	position: fixed;
	top: 7em;
	left: 0;
	z-index: -10;
	width: 100%;
	height: 90dvh;
	background-image: url('../img/sea_and_sky.jpg');
	background-position-x: 100%;
	background-position-y: 100%;
	background-size: cover;
	background-repeat: no-repeat;
}
/* 画像の表示位置を固定し、スクロール時にパララックス効果を出すための設定（トップページ） ここまで */
/* 画像の表示位置を固定し、スクロール時にパララックス効果を出すための設定（トップページ以外） ここから */
.contentTitle {
	width: 100%;
	height: 30dvh;
	overflow: clip;
}
.contentTitle::after {
	/* 画像の表示位置を固定し、スクロール時にパララックス効果を出すための設定（トップページ以外）２ */
	content: '';
	position: fixed;
	top: 7em;
	left: 0;
	z-index: -10;
	width: 100%;
	height: 50dvh;
	background-image: url('../img/earth.jpg');
	background-repeat: no-repeat;
	background-position-x: 100%;
	background-position-y: 70%;
	background-size: cover;
}
/* 画像の表示位置を固定し、スクロール時にパララックス効果を出すための設定（トップページ以外） ここまで */
/* Heroイメージ領域の表示制御 ここまで */
.mainNav {
	height: 7em;
}
.navbar-nav {
	--bs-nav-link-padding-y: 0.2rem;
}
.nav-underline {
	--bs-nav-underline-gap: 0rem;
	--bs-nav-underline-border-width: 0.1rem;
	--bs-nav-underline-link-active-color: var(--bs-emphasis-color);
	gap: var(--bs-nav-underline-gap);
}
.section-divider {
	/* ナビゲーション、コンテンツ、フッターを区切る太い帯 */
	width: 100%;
	height: 1rem;
	background-color: rgb(0, 44, 96);
	border: solid rgba(0, 0, 0, 0.15);
	border-width: 0 0 1px 0;
	box-shadow:
		inset 0 0.5em 1.5em rgba(0, 0, 0, 0.102),
		inset 0 0.125em 0.5em rgba(0, 0, 0, 0.149),
		0 0.5em 0.4em rgba(0, 0, 0, 0.15);
}
.contents-divider {
	/* 各コンテンツを区切る細い帯 */
	width: 100%;
	margin: 2em 0 2em 0;
	border: 0;
	border-top: solid 1px transparent;
	background: linear-gradient(#fff, #fff) padding-box;
	background: linear-gradient(to right, #fff, #002c60, #fff) border-box;
	opacity: 100;
}
.topics-border {
	width: 100%;
	border: 0;
	border-top: solid 1px transparent;
	background: linear-gradient(#fff, #fff) padding-box;
	background: linear-gradient(to right, #fff, #002c60, #fff) border-box;
	opacity: 100;
}
.bd-placeholder-img {
	font-size: 1.125rem;
	text-anchor: middle;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}
.topics-badge {
	min-width: 6rem;
}
.topics-date {
	min-width: 5rem;
}
.ff-serif {
	font-family: 'Noto Serif JP', serif !important;
}