@charset "utf-8";
/*
Theme Name: 彼方号 News
Theme URI: https://kanatagou.jp/
Description: 釣り船 彼方号「釣果とお知らせ」専用テーマ。静的サイト（/）と共通の common.css を読み込み体裁を一致させる。ヘッダー/フッターは /common/ を include。
Author: Fideliss
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: kanatagou
*/

/* ---------------------------------------------------------------
   このファイルは /news/（WordPress）専用のページレイアウトのみ。
     ・ヘッダー/フッター/見出し/ボタン → /css/common.css
     ・一覧カード(.news__item)        → /css/common.css
   はテーマの header.php で別途読み込む。
   カラー: dark #223240 / text #1A1E24 / accent #e99a20
           水色 #dbedf8 / base #F7F9FB / border #E3E8ED / muted #6B7684
   --------------------------------------------------------------- */

/* アクセシビリティ（ページ送り見出し等の非表示） */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0);
	white-space: nowrap; border: 0;
}


/* =========== 下層MV：news固有の背景写真 =========== */
/* .pageHead の共通ガワ（高さ・オーバーレイ・文字）は common.css。
   ここでは news の背景写真だけを差し込む。 */
.pageHead--news {
	background-image: url('/img/news/mv.jpg');
}


/* =========== newsアーカイブ =========== */
.newsArchive {
	background: #FFF;
}


/* =========== カテゴリ / 月別ナビ =========== */
.newsNav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	margin-bottom: 50px;
	padding-bottom: 22px;
	border-bottom: 2px solid #1A1E24;
}

.newsNav__cats {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
}

.newsNav__cat {
	display: block;
	padding: 8px 20px;
	font-size: 14px;
	font-weight: 700;
	color: #1A1E24;
	border: 1px solid #C7D0DA;
	border-radius: 999px;
	transition: .2s;
}

.newsNav__cat:hover {
	background: #dbedf8;
	border-color: #dbedf8;
}

.newsNav__cat.is-current {
	background: #223240;
	border-color: #223240;
	color: #FFF;
}

.newsNav__select {
	appearance: none;
	-webkit-appearance: none;
	background: #F7F9FB url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%236B7684' d='M7 10l5 5 5-5z'/></svg>") no-repeat right 12px center/16px;
	border: 1px solid #C7D0DA;
	border-radius: 6px;
	padding: 9px 38px 9px 14px;
	font-size: 14px;
	color: #1A1E24;
	cursor: pointer;
}


/* =========== ページ送り（the_posts_pagination） =========== */
.newsArchive .pagination {
	margin-top: 60px;
}

.newsArchive .nav-links {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
}

.newsArchive .page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 8px;
	font-family: 'Inter', sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: #1A1E24;
	border: 1px solid #C7D0DA;
	transition: .2s;
}

.newsArchive a.page-numbers:hover {
	background: #dbedf8;
	border-color: #dbedf8;
}

.newsArchive .page-numbers.current {
	background: #223240;
	border-color: #223240;
	color: #FFF;
}

.newsArchive .page-numbers.dots {
	border: none;
	min-width: auto;
}

.news__empty {
	text-align: center;
	color: #6B7684;
	padding: 40px 0;
}


/* =========== 記事詳細 =========== */
.article {
	background: #FFF;
}

.article__meta {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
}

.article__date {
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	color: #6B7684;
}

.article__title {
	font-size: 30px;
	font-weight: 700;
	line-height: 1.5;
	color: #1A1E24;
	margin-bottom: 30px;
}

.article__thumb {
	margin-bottom: 40px;
}

.article__thumb img {
	width: 100%;
	height: auto;
	display: block;
}

/* 本文（the_content） */
.article__content {
	font-size: 16px;
	line-height: 2;
	color: #333B44;
}

.article__content p {
	margin: 0 0 1.6em;
}

.article__content h2 {
	font-size: 22px;
	font-weight: 700;
	color: #1A1E24;
	line-height: 1.5;
	margin: 2em 0 .8em;
	padding-left: 14px;
	border-left: 4px solid #e99a20;
}

.article__content h3 {
	font-size: 18px;
	font-weight: 700;
	color: #1A1E24;
	margin: 1.8em 0 .6em;
}

.article__content a {
	color: #1f6f9c;
	text-decoration: underline;
}

.article__content ul,
.article__content ol {
	margin: 0 0 1.6em 1.4em;
}

.article__content li {
	margin-bottom: .5em;
}

.article__content img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 0 1.6em;
}

.article__content blockquote {
	margin: 0 0 1.6em;
	padding: 16px 20px;
	background: #F7F9FB;
	border-left: 4px solid #C7D0DA;
	color: #6B7684;
}

.article__content strong { font-weight: 700; }

/* タグ */
.article__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 40px;
	padding-top: 30px;
	border-top: 1px solid #E3E8ED;
}

.article__tag {
	font-size: 13px;
	color: #6B7684;
	background: #F7F9FB;
	border: 1px solid #E3E8ED;
	padding: 5px 12px;
	border-radius: 999px;
	transition: .2s;
}

.article__tag:hover {
	background: #dbedf8;
	border-color: #dbedf8;
	color: #1A1E24;
}

/* 前後・一覧ナビ */
.article__nav {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 16px;
	margin-top: 60px;
	padding-top: 30px;
	border-top: 1px solid #E3E8ED;
	font-size: 14px;
}

.article__nav a {
	color: #1A1E24;
	transition: .2s;
}

.article__nav a:hover { color: #e99a20; }

.article__nav-prev { text-align: left; }
.article__nav-next { text-align: right; }

.article__nav-home a {
	display: inline-block;
	padding: 10px 24px;
	font-weight: 700;
	border: 1px solid #223240;
	border-radius: 999px;
}

.article__nav-home a:hover {
	background: #223240;
	color: #FFF;
}


/* =====================================================
   SP（767px以下）
   ===================================================== */
@media screen and (max-width: 767px){

.newsNav {
	flex-direction: column;
	align-items: stretch;
	gap: 14px;
	margin-bottom: 32px;
	padding-bottom: 16px;
	}

.newsNav__cats {
	gap: 8px;
	}

.newsNav__cat {
	padding: 7px 16px;
	font-size: 13px;
	}

.newsNav__select {
	width: 100%;
	}

.newsArchive .pagination {
	margin-top: 40px;
	}

.newsArchive .page-numbers {
	min-width: 40px;
	height: 40px;
	font-size: 14px;
	}

.article__title {
	font-size: 22px;
	margin-bottom: 22px;
	}

.article__thumb {
	margin-bottom: 28px;
	}

.article__content {
	font-size: 15px;
	line-height: 1.9;
	}

.article__content h2 {
	font-size: 19px;
	}

.article__content h3 {
	font-size: 17px;
	}

.article__nav {
	grid-template-columns: 1fr;
	text-align: center;
	gap: 14px;
	}

.article__nav-prev,
.article__nav-next {
	text-align: center;
	}

}