@charset "UTF-8";

@font-face {
	font-family: 'Noto Sans JP';
	src: url('/fonts/NotoSansJP-VariableFont_wght.min.woff2') format('woff2');
	font-weight: 400 800;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Poppins';
	src: url('/fonts/Poppins-Medium.min.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Zen Kaku Gothic New';
	src: url('/fonts/ZenKakuGothicNew-Medium.min.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

html {
	font-family: "Noto Sans JP", sans-serif;
	letter-spacing: 1px;
}

body {
	margin: 0;
	padding: 0;

	min-height: 100vh; /* 画面最低高さ：これ無いとフッターが下に行かない */
	display: flex; /* 中身を縦並びのフレックスボックスにする */
	flex-direction: column;
}


/* -----ここからヘッダ----- */

header {
	background-image: linear-gradient(to right, #009631, #002500); /* 背景色：緑から濃緑へのグラデーション */
	height: 24vh; /* ヘッダー高さ 縦幅に対して百分率 */
	display: flex;
	align-items: center; /* 垂直方向中央揃え */
	justify-content: center; /* 水平方向中央揃え */
}

header img {
	max-width: 60vw; /* 画面幅に対するロゴ幅 */
	max-height: 5vh; /* 画面幅に対するロゴ幅 */
	height: auto;
}

h1 {
	margin: 7vh 5vw 4vh 5vw; /* 余白：上 右 下 左 */
	text-align: left; /* 左寄せ */
}

/* タイトル下線 */
h1 span {
	display: inline-block; /* 線の幅を文字に合わせるために必要 */
	padding-bottom: 0.25rem; /* 文字と線の間の隙間 */

	border-bottom: 0.35rem solid #009631; /* 下線太さと色 */
}


/* -----ここから本文----- */
main {
	margin: 2vh 5vw 0vw 5vw; /* 余白：上 右 下 左 */
	padding: 0;
}

p {
	margin: 2vh 8.5vw 0vh 7.5vw; /* 余白：上 右 下 左 */
}

.title-text {
	font-family: "Zen Kaku Gothic New", sans-serif; /*記事タイトルのみZen Kaku Gothic*/
	color: black;
	font-size: 2rem; /*50px*/
	font-weight: 500; /* 数値でフォント太さを指定 */
	letter-spacing: 0.15vw;
}

.content-text {
	color: black;
	font-size: 1.3rem;
	font-weight: 325; /* 数値でフォント太さを指定 */
}

.link-text {
	color: #00146E;
	font-size: 1.3rem;
	font-weight: 500; /* 数値でフォント太さを指定 */
}


/* -----ここからフッタ----- */

footer {
	background-color: #000000;
	height: 13vh; /* フッター高さ */
	display: grid;
	text-align: center; /* テキスト左右中央 */
	line-height: 9.5vh; /* テキスト縦位置 */

	/* 上側の余白を自動で埋めることで、強制的に一番下へ配置する */
	margin-top: auto;
}

.copyright-text {
	font-family: "Poppins", sans-serif; /* Copyrightのみfuturaもどきを使う */
	color: white;
	font-size: 0.8rem;
	font-weight: 500;
}

/* -----カウントアップの棒----- */

/* バー外枠*/
.progress-wrap {
	height: 1.3rem; /* バーの太さ 本文フォントサイズに合わせる */
	margin: 5vh 9.5vw 0vw 7.7vw; /* 余白：上 右 下 左 */
	border: 1px solid #777; /* 枠線 */
	background-color: #fff;
	border-radius: 5px; /* 角丸 */
	overflow: hidden; /* 緑領域のはみ出し防止 */
}

/* バー緑色領域 */
.progress-bar {
	width: 0%; /* 初期値は真っ白 */
	height: 100%;

	/* ストライプ柄 */
	background: repeating-linear-gradient(
		-45deg,
		#009631,
		#009631 10px,
		#007526 10px,
		#007526 20px
	);
}

/* ここまでの記述はPC表示を想定 */

/* -----レスポンシブ（デスクトップファースト）----- */

/* 論理解像度が大きめのスマホ 横画面 */
@media screen and (orientation: landscape) and (max-width: 1024px) {
	header {
		height: 20vh; /* ヘッダー高さ 縦幅に対して百分率 */
		display: flex;
		align-items: center; /* 垂直方向中央揃え */
		justify-content: center; /* 水平方向中央揃え */
	}

	header img {
		max-width: 65vw; /* 画面幅に対するロゴ幅 */
		max-height: 5vh; /* 画面幅に対するロゴ幅 */
	}

	h1 {
		margin: 5vh 5vw 1.5vh 5vw; /* 余白：上 右 下 左 */
		text-align: left; /* 左寄せ */
	}

	/* タイトル下線 */
	h1 span {
		padding-bottom: 0.18rem; /* 文字と線の間の隙間 */
		border-bottom: 0.2rem solid #009631; /* 下線太さと色 */
	}

	/* バー外枠*/
	.progress-wrap {
		height: 1.1rem; /* バーの太さ 本文フォントサイズに合わせる */
		margin: 5vh 9.5vw 0vw 7.7vw; /* 余白：上 右 下 左 */
		border: 1px solid #777; /* 枠線 */
		border-radius: 5px; /* 角丸 */
	}

	.title-text {
		font-size: 1.5rem; /*50px*/
		letter-spacing: 0.15vw;
	}

	.content-text {
		font-size: 1rem;
		letter-spacing: 1px;
	}

	.link-text {
		font-size: 1rem;
		letter-spacing: 1px;
	}

	footer {
		height: 12vh; /* フッター高さ */
		line-height: 8vh; /* テキスト縦位置 */
	}

	.copyright-text {
		font-size: 0.6rem;
	}
}

/* タブレット 縦画面 */
@media screen and (orientation: portrait) and (max-width: 1024px) {

	header {
		height: 17vh; /* ヘッダー高さ 縦幅に対して百分率 */
		display: flex;
		align-items: center; /* 垂直方向中央揃え */
		justify-content: center; /* 水平方向中央揃え */
	}

	header img {
		max-width: 60vw; /* 画面幅に対するロゴ幅 */
		max-height: 5vh; /* 画面幅に対するロゴ幅 */
	}

	h1 {
		margin: 6vh 5vw 4vh 5vw; /* 余白：上 右 下 左 */
		text-align: left; /* 左寄せ */
	}

	/* タイトル下線 */
	h1 span {
		padding-bottom: 0.2rem; /* 文字と線の間の隙間 */
		border-bottom: 0.32rem solid #009631; /* 下線太さと色 */
	}

	/* バー外枠*/
	.progress-wrap {
		height: 1.2rem; /* バーの太さ 本文フォントサイズに合わせる */
		margin: 5vh 9.5vw 0vw 7.7vw; /* 余白：上 右 下 左 */
		border: 1px solid #777; /* 枠線 */
		border-radius: 5px; /* 角丸 */
	}

	.title-text {
		font-size: 2rem; /*50px*/
		letter-spacing: 0.15vw;
	}

	.content-text {
		font-size: 1.2rem;
	}

	.link-text {
		font-size: 1.2rem;
	}

	footer {
		height: 12vh; /* フッター高さ */
		line-height: 8vh; /* テキスト縦位置 */
	}

	.copyright-text {
		font-size: 0.7rem;
	}
}

/* 論理解像度が小さめのスマホ 横画面 */
@media screen and (orientation: landscape) and (max-width: 768px) {

	header {
		height: 18vh; /* ヘッダー高さ 縦幅に対して百分率 */
		display: flex;
		align-items: center; /* 垂直方向中央揃え */
		justify-content: center; /* 水平方向中央揃え */
	}

	header img {
		max-width: 65vw; /* 画面幅に対するロゴ幅 */
		max-height: 5vh; /* 画面幅に対するロゴ幅 */
	}

	h1 {
		margin: 5vh 5vw 2vh 5vw; /* 余白：上 右 下 左 */
		text-align: left; /* 左寄せ */
	}

	/* タイトル下線 */
	h1 span {
		padding-bottom: 0.15rem; /* 文字と線の間の隙間 */
		border-bottom: 0.18rem solid #009631; /* 下線太さと色 */
	}

	/* バー外枠*/
	.progress-wrap {
		height: 16px; /* バーの太さ */
		margin: 5vh 9.5vw 0vw 7.7vw; /* 余白：上 右 下 左 */
		border: 1px solid #777; /* 枠線 */
		border-radius: 4px; /* 角丸 */
	}

	.title-text {
		font-size: 1.2rem; /*50px*/
		letter-spacing: 0.15vw;
	}

	.content-text {
		font-size: 0.8rem;
	}

	.link-text {
		font-size: 0.8rem;
	}

	footer {
		height: 12vh; /* フッター高さ */
		line-height: 8vh; /* テキスト縦位置 */
	}

	.copyright-text {
		font-size: 0.5rem;
	}
}

/* スマホ 縦画面 */
@media screen and (orientation: portrait) and (max-width: 640px) {

	header {
		height: 13vh; /* ヘッダー高さ 縦幅に対して百分率 */
		display: flex;
		align-items: center; /* 垂直方向中央揃え */
		justify-content: center; /* 水平方向中央揃え */
	}

	header img {
		max-width: 70vw; /* 画面幅に対するロゴ幅 */
		max-height: 5vh; /* 画面幅に対するロゴ幅 */
	}

	h1 {
		margin: 5vh 5vw 3.2vh 5vw; /* 余白：上 右 下 左 */
		text-align: left; /* 左寄せ */
	}

	/* タイトル下線 */
	h1 span {
		padding-bottom: 0.15rem; /* 文字と線の間の隙間 */
		border-bottom: 0.2rem solid #009631; /* 下線太さと色 */
	}

	/* バー外枠*/
	.progress-wrap {
		height: 0.9rem; /* バーの太さ 本文フォントサイズに合わせる */
		margin: 5vh 9.5vw 0vw 7.7vw; /* 余白：上 右 下 左 */
		border: 1px solid #777; /* 枠線 */
		border-radius: 0.2rem; /* 角丸 */
	}

	.title-text {
		font-size: 1.4rem; /*50px*/
		letter-spacing: 0.15vw;
	}

	.content-text {
		font-size: 0.9rem;
	}

	.link-text {
		font-size: 0.9rem;
	}

	footer {
		height: 17vh; /* フッター高さ */
		line-height: 5vh; /* テキスト縦位置 */
	}

	.copyright-text {
		font-size: 0.5rem;
	}
}