/**
 * NEWS（お知らせ）一覧・詳細
 * デザイン: デザインデータpng/newspc/7_1_News.png / 7_2_News_detail.png（1440px基準）
 * 全クラス p-news-*（他ページと非連動）。共通ページヘッドは l-page-head を使用。
 *
 * 配色: 橙 #F5A313 / 黄 #FDCE00 / 青緑 #10A9AC / 文字 #493B3B / クリーム #FFF8EA / 濃 #2B2525
 */

/* =========================================================
 * inview アニメーション（js/news.js が is-inview を付与）
 * JS 有効時（html.js-news-inview）のみ初期非表示にする。
 * ========================================================= */
.js-news-inview .js-news-inview-item,
.js-news-inview .js-news-inview-blocks > * {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.js-news-inview .js-news-inview-item.is-inview,
.js-news-inview .js-news-inview-blocks > .is-inview {
	opacity: 1;
	transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
	.js-news-inview .js-news-inview-item,
	.js-news-inview .js-news-inview-blocks > * {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* =========================================================
 * 一覧（アーカイブ）
 * ========================================================= */
.p-news-archive {
	padding: 120px 0 160px;
}
.p-news-archive__inner {
	max-width: 944px; /* コンテンツ864 + 左右padding40 */
	margin: 0 auto;
	padding: 0 40px;
}
.p-news-archive__list {
	list-style: none;
	border-top: 1px solid #493B3B;
	border-bottom: 1px solid #493B3B;
}

/* 行間の区切り線 */
.p-news-archive__item + .p-news-archive__item {
	border-top: 1px solid #493B3B;
}

.p-news-archive__link {
	display: flex;
	align-items: center;
	gap: 28px;
	padding: 24px 28px;
	color: #493B3B;
	transition: background-color 0.3s ease, color 0.3s ease;
}

/* hover: オレンジカード化（デザイン1行目の表現） */
.p-news-archive__link:hover,
.p-news-archive__link:focus-visible {
	background-color: #F5A313;
	color: #fff;
}

.p-news-archive__thumb {
	flex-shrink: 0;
	width: 128px;
	aspect-ratio: 4 / 3;
	border-radius: 4px;
	overflow: hidden;
}
.p-news-archive__thumb-img,
.p-news-archive__thumb-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.p-news-archive__thumb-placeholder {
	background: #E4DCCB;
}

.p-news-archive__body {
	flex: 1;
	min-width: 0;
}
.p-news-archive__meta {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 10px;
}
.p-news-archive__date {
	font-weight: 500;
	font-size: 15px;
	letter-spacing: 0.1em;
}
.p-news-archive__cat {
	display: inline-block;
	background: #2B2525;
	color: #fff;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.08em;
	border-radius: 999px;
	padding: 4px 16px;
}
.p-news-archive__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	font-weight: 700;
	font-size: 16px;
	line-height: 1.8;
	letter-spacing: 0.08em;
}

/* 矢印サークル */
.p-news-archive__arrow {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #2B2525;
	color: #fff;
	transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.p-news-archive__arrow svg {
	width: 14px;
	height: 10px;
}
.p-news-archive__link:hover .p-news-archive__arrow,
.p-news-archive__link:focus-visible .p-news-archive__arrow {
	background: #fff;
	color: #2B2525;
	transform: translateX(2px);
}

.p-news-archive__empty {
	text-align: center;
	padding: 40px 0;
}

/* ページネーション（the_posts_pagination 出力） */
.p-news-archive .navigation.pagination {
	margin-top: 64px;
}
.p-news-archive .nav-links {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
}
.p-news-archive .page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid rgba(73, 59, 59, 0.5);
	font-family: "DM Sans", sans-serif;
	font-weight: 500;
	font-size: 15px;
	color: #493B3B;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.p-news-archive .page-numbers.current {
	background: #10A9AC;
	border-color: #10A9AC;
	color: #fff;
}
.p-news-archive a.page-numbers:hover {
	background: #10A9AC;
	border-color: #10A9AC;
	color: #fff;
}
.p-news-archive .page-numbers.dots {
	border: none;
	width: auto;
}
.p-news-archive .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* =========================================================
 * 詳細
 * ========================================================= */
.p-news-detail {
	padding: 104px 0 160px;
}
.p-news-detail__inner {
	max-width: 920px; /* コンテンツ840 + 左右padding40 */
	margin: 0 auto;
	padding: 0 40px;
}

/* メタ + タイトル */
.p-news-detail__meta {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 20px;
}
.p-news-detail__date {
	font-weight: 500;
	font-size: 16px;
	letter-spacing: 0;
	color: #F5A313;
}
.p-news-detail__cat {
	display: inline-block;
	background: #10A9AC;
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.08em;
	border-radius: 999px;
	padding: 6px 20px;
}
.p-news-detail__title {
	font-weight: 700;
	font-size: 24px;
	line-height: 1.7;
	letter-spacing: 0.05em;
	padding-bottom: 24px;
	border-bottom: 1px solid #493B3B;
}

/* サムネイル（無ければテンプレート側で非表示） */
.p-news-detail__thumb {
	margin-top: 32px;
}
.p-news-detail__thumb-img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}
/* 縦長写真（4:3横長より縦に長いもの）は 16:9 で切らずに全体を出す。
 * 幅いっぱいに敷くと画面を占有しすぎるので高さで頭打ちにして中央寄せ、
 * 余白はサイトのクリーム色で埋めて“切れている”ように見せない。判定は single-news.php 側 */
.p-news-detail__thumb--tall {
	display: flex;
	justify-content: center;
	background: #FFF8EA;
	border-radius: 4px;
	padding: 24px;
}
.p-news-detail__thumb--tall .p-news-detail__thumb-img {
	width: auto;
	max-width: 100%;
	max-height: 560px;
	aspect-ratio: auto;
	object-fit: contain;
}

/* =========================================================
 * 本文（ブロックエディター想定のコンテンツスタイル）
 * ========================================================= */
.p-news-detail__content {
	margin-top: 40px;
}
.p-news-detail__content > * + * {
	margin-top: 28px;
}

/* 段落 */
.p-news-detail__content p {
	font-size: 15px;
	line-height: 2.1;
	letter-spacing: 0.05em;
}

/* h2: オレンジ見出し + 左下の短いアンダーライン */
.p-news-detail__content h2 {
	font-weight: 700;
	font-size: 18px;
	line-height: 1.6;
	color: #F5A313;
	padding-bottom: 14px;
	position: relative;
	margin-top: 48px;
}
/* 下線は border-bottom だとズレるため ::before で敷き、::after のアクセントを前面に重ねる */
.p-news-detail__content h2::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: rgba(73, 59, 59, 0.25);
}
.p-news-detail__content h2::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 120px;
	height: 2px;
	background: #F5A313;
}

/* h3: 先頭ドット付きのオレンジ見出し */
.p-news-detail__content h3 {
	font-weight: 700;
	font-size: 16px;
	line-height: 1.6;
	color: #F5A313;
	position: relative;
	padding-left: 18px;
	margin-top: 40px;
}
.p-news-detail__content h3::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #F5A313;
}

/* h4 */
.p-news-detail__content h4 {
	font-weight: 700;
	font-size: 15px;
	line-height: 1.6;
	margin-top: 32px;
}

/* リスト: 上下罫線の囲み + オレンジドット（デザインのリストブロック） */
.p-news-detail__content ul {
	list-style: none;
	border-top: 1px solid #493B3B;
	border-bottom: 1px solid #493B3B;
	padding: 28px 40px;
	margin-left: 48px;
	margin-right: 48px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.p-news-detail__content ul li {
	position: relative;
	padding-left: 18px;
	font-size: 15px;
	line-height: 1.8;
	letter-spacing: 0.05em;
}
.p-news-detail__content ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.65em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #F5A313;
}
/* ネストしたリストは囲み罫線なし */
.p-news-detail__content ul ul {
	border: none;
	padding: 8px 0 0;
	margin: 0 0 0 8px;
}

/* 番号リスト */
.p-news-detail__content ol {
	list-style: none;
	counter-reset: news-ol;
	padding: 0 0 0 8px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.p-news-detail__content ol li {
	counter-increment: news-ol;
	position: relative;
	padding-left: 32px;
	font-size: 15px;
	line-height: 1.8;
}
.p-news-detail__content ol li::before {
	content: counter(news-ol, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 0;
	font-family: "DM Sans", sans-serif;
	font-weight: 700;
	color: #F5A313;
}

/* 引用 */
.p-news-detail__content blockquote {
	background: #fff;
	border-left: 3px solid #F5A313;
	border-radius: 0 8px 8px 0;
	padding: 24px 28px;
}
.p-news-detail__content blockquote p {
	font-size: 14px;
}
.p-news-detail__content blockquote cite {
	display: block;
	margin-top: 8px;
	font-style: normal;
	font-size: 12px;
	color: rgba(73, 59, 59, 0.65);
}

/* テーブル */
.p-news-detail__content .wp-block-table,
.p-news-detail__content figure.wp-block-table {
	overflow-x: auto;
}
.p-news-detail__content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	line-height: 1.7;
}
.p-news-detail__content th,
.p-news-detail__content td {
	border: 1px solid rgba(73, 59, 59, 0.3);
	padding: 12px 16px;
	text-align: left;
	vertical-align: top;
}
.p-news-detail__content th {
	background: rgba(245, 163, 19, 0.12);
	font-weight: 700;
}

/* 画像・キャプション */
.p-news-detail__content img {
	max-width: 100%;
	height: auto;
	border-radius: 4px;
}
.p-news-detail__content figure {
	margin: 0;
}
.p-news-detail__content figcaption {
	margin-top: 10px;
	font-size: 12px;
	text-align: center;
	color: rgba(73, 59, 59, 0.65);
}

/* リンク・強調・区切り線 */
.p-news-detail__content a {
	color: #10A9AC;
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: opacity 0.2s ease;
}
.p-news-detail__content a:hover {
	opacity: 0.7;
}
.p-news-detail__content strong {
	font-weight: 700;
	color: #F5A313;
}
.p-news-detail__content hr {
	border: none;
	border-top: 1px solid rgba(73, 59, 59, 0.3);
	margin: 40px 0;
}

/* 一覧へ戻る */
.p-news-detail__back {
	margin-top: 64px;
	display: flex;
	justify-content: center;
}
/* 一覧へ戻る: 共通ボタン .btn-green.btn-main（波うちhover・→矢印）を使用。
 * デザインに合わせ幅と文字間・矢印位置だけ上書き。 */
.p-news-detail__back-btn {
	min-width: 220px;
	justify-content: space-between;
	font-size: 14px;
	letter-spacing: 0.1em;
	padding: 12px 24px 12px 32px;
}

/* =========================================================
 * レスポンシブ
 * ========================================================= */
@media screen and (max-width: 768px) {
	.p-news-archive {
		padding: 64px 0 96px;
	}
	.p-news-archive__inner {
		padding: 0 20px;
	}
	.p-news-archive__link {
		gap: 16px;
		padding: 20px 8px;
	}
	.p-news-archive__thumb {
		width: 96px;
	}
.p-news-archive__meta {
    gap: 10px;
    margin-bottom: 8px;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}
	.p-news-archive__date {
		font-size: 13px;
	}
	.p-news-archive__title {
		font-size: 14px;
		-webkit-line-clamp: 3;
	}
	.p-news-archive__arrow {
		width: 32px;
		height: 32px;
	}
	.p-news-archive .nav-links {
		gap: 10px;
	}
	.p-news-archive .page-numbers {
		width: 36px;
		height: 36px;
		font-size: 14px;
	}

	.p-news-detail {
		padding: 64px 0 96px;
	}
	.p-news-detail__inner {
		padding: 0 20px;
	}
	.p-news-detail__title {
		font-size: 20px;
		padding-bottom: 16px;
	}
	.p-news-detail__thumb {
		margin-top: 24px;
	}
	/* SPは画面が狭いので幅を目一杯使わせ、代わりに高さ上限だけ効かせる */
	.p-news-detail__thumb--tall {
		padding: 12px;
	}
	.p-news-detail__thumb--tall .p-news-detail__thumb-img {
		max-height: 70svh;
	}
	.p-news-detail__content {
		margin-top: 32px;
	}
	.p-news-detail__content > * + * {
		margin-top: 24px;
	}
	.p-news-detail__content h2 {
		margin-top: 40px;
	}
	.p-news-detail__content h2::after {
		width: 40px;
	}
	.p-news-detail__content ul {
		margin-left: 0;
		margin-right: 0;
		padding: 20px 16px;
	}
	.p-news-detail__back {
		margin-top: 48px;
	}
	.p-news-detail__back-btn {
		width: 100%;
	}
}

/* フッター共通CONTACTの上波色（このページの直前セクション背景に馴染ませる） */
:root {
	--contact-wave-color: #FFF8EA;
}