@charset "UTF-8";

/* ----------------------------------------------------
 * NEWS
 * ---------------------------------------------------- */
/** 背景 **/
.parallax {
}

/* 背景画像 */
.parallax::before {
	/* image-setを使ってWebPとPNGを切り替え */
	background-image: url(/assets/img/news/news_bg.png); /* fallback */
	background-image: -webkit-image-set(
		url(/assets/img/news/news_bg.webp) type("image/webp"),
		url(/assets/img/news/news_bg.png) type("image/png")
	);
	background-image: image-set(
		url(/assets/img/news/news_bg.webp) type("image/webp"),
		url(/assets/img/news/news_bg.png) type("image/png")
	);
	
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	content: "";
	height: 100vh;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: -1;

	@media (max-width: 750px) {
		/* スマホ用も同様に指定 */
		background-image: url(/assets/img/news/news_bg_sp.png); /* fallback */
		background-image: -webkit-image-set(
			url(/assets/img/news/news_bg_sp.webp) type("image/webp"),
			url(/assets/img/news/news_bg_sp.png) type("image/png")
		);
		background-image: image-set(
			url(/assets/img/news/news_bg_sp.webp) type("image/webp"),
			url(/assets/img/news/news_bg_sp.png) type("image/png")
		);
	}
}


/* ----------------------------------------------------
 * 一覧
 * ---------------------------------------------------- */
.news__list-container {
	margin-top: 10%;
	margin-bottom: 5%;

	@media (max-width: 750px) {
		margin-top: 30%;
	}

	.news__list-title {
		text-align: center;
		margin-bottom: 2%;
		color: #42210b;
		font-weight: 700;
		font-size: min(calc(70 * 100vw / 1920),70px);
		font-family: "Noto Serif JP", "源ノ明朝", serif;

		@media (max-width: 750px) {
			font-size: min(calc(68 * 100vw / 750),68px);
		}
	}

	.news__list-area {
		width: 62%;
		margin: auto;
		border: 1px solid #c69c6d;
		background: #f3efe6;
		border-radius: 10px;
		padding: 3% 5%;
		color: #42210b;
		font-family: 'Noto Sans JP', sans-serif;
		font-weight: 700;
		line-height: 1.6;
		letter-spacing: 0.03em;

		@media (max-width: 750px) {
			width: 85%;
			padding: 3% 4.5%;
		}

		dl {
			display: flex;
			align-items: flex-start;
#			justify-content: space-between;
			padding-bottom: 2%;
			font-size: min(calc(21 * 100vw / 1920),21px);

			@media (max-width: 750px) {
				font-size: calc(24 * 100vw / 750);
			}
		}

		dt {
			width: 15%;

			@media (max-width: 750px) {
				width: 26.5%;
			}
		}

		dd {
			flex: 1;
			position: relative;
			padding-left: 3%;

			@media (max-width: 750px) {
				padding-left: 3%;
			}
		}

		dd::before {
			content: "";
			position: absolute;
			top: 3px;
			bottom: 3px;
			left: 0;
			width: 1px;
			background: #927d6d;
		}

		a {
			color: #42210b;
			text-decoration: underline;
		}

		a:hover {
			color: #d13b14;
		}
	}
}


/* ----------------------------------------------------
 * 記事
 * ---------------------------------------------------- */
.news__article-container {
	margin-top: 10%;
	margin-bottom: 5%;
	color: #000000;

	@media (max-width: 750px) {
		margin-top: 27%;
	}

	.news__article-area {
		width: 57%;
		margin: auto;
		border: 1px solid #c69c6d;
		background: #f3efe6;
		border-radius: 10px;
		padding: 3% 4%;
		display: flex;
		flex-direction: column;
		gap: 0.6vw;

		@media (max-width: 750px) {
			width: 88%;
			gap: 2.5vw;
		}
	}

	.news__article-date {
		color: #d13b14;
		font-weight: 500;
		font-size: calc(20 * 100vw / 1920);

		@media (max-width: 750px) {
			font-size: calc(29 * 100vw / 750);
		}
	}

	.news__article-title {
		color: #000000;
		font-weight: 600;
		font-size: calc(28 * 100vw / 1920);

		@media (max-width: 750px) {
			font-size: calc(36 * 100vw / 750);
		}
	}

	.news__article-body {
		padding: 0 2%;
		font-size: calc(19 * 100vw / 1920);
		line-height: 1.9;
		letter-spacing: 0.03em;

		@media (max-width: 750px) {
			padding: 0;
			font-size: calc(27 * 100vw / 750);
		}
	}

	a {
		color: #42210b;
		text-decoration: underline;
	}

	a:hover {
		color: #d13b14;
	}

	.attention {
		color: #d13b14;
	}

	.news__article-sub-title {
		font-size: calc(19 * 100vw / 1920);
		font-weight: 900;

		@media (max-width: 750px) {
			font-size: calc(22 * 100vw / 750);
		}
	}
	/* タイトル全体のコンテナ */
	.title-with-icon {
		/* flexboxを使って横並び＆中央寄せにします */
		display: inline-flex;
		align-items: center;

		/* アイコンとテキストの間隔（文字の大きさに比例して広がります） */
		gap: 0.3em; 

		margin: 16px 0;
		color: #0f172a; /* タイトルの文字色 */
		font-weight: bold;
		line-height: 1.2;
	}

	/* PNG画像（imgタグ）のスタイル */
	.title-icon {
		/* heightを「1em」に設定するのが最大のポイントです。
		 「1em」は現在のフォントサイズ（font-size）と同じ高さを意味するため、
		 文字が大きくなれば、画像も自動的に同じ高さに拡大・縮小されます。 */
		height: 1em;

		/* 横幅はアスペクト比を維持して自動計算させます（正方形以外のPNGでも崩れません） */
		width: auto; 

		/* 画像の下にナゾの隙間（ベースラインの隙間）ができるのを防ぐ設定 */
		display: block; 

		/* 万が一、画像に微妙な縦横比のズレがあっても、引き伸ばされて歪むのを防ぎます */
		object-fit: contain; 
	}
}