/*
 * ブログ（inc/blog.php・archive-blog.php・single-blog.php）。
 * 色・文字は style.css の変数、ボタン・札は components.css の部品を使う。
 */

/* 帯の画像 ------------------------------------------------------------ */
.p-blog__banner {
	max-width: 1200px;
	margin: 0 auto;
}

.p-blog__banner img,
.p-blog__banner .img-slot {
	display: block;
	width: 100%;
	height: auto;
}

/* 絞り込み（リンクのボタン） -------------------------------------------- */
.p-blog__filter {
	max-width: 1240px;
	margin: 8px auto 32px;
	padding-inline: var(--header-pad-sp);
}

.p-blog__filter .c-filter__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.p-blog__filter .c-filter__button {
	text-decoration: none;
}

.p-blog__list-title {
	margin-bottom: 32px;
}

/* 記事カード --------------------------------------------------------- */
.p-blog__cards {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.p-blog__card {
	min-width: 0;
	overflow-wrap: anywhere;
}

.p-blog__card-link {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--color-border);
	border-radius: 12px;
	background: #fff;
	color: var(--color-text);
	text-decoration: none;
	transition: box-shadow .2s;
}

.p-blog__card-link:hover {
	box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
}

.p-blog__card-thumb {
	aspect-ratio: 353 / 189;
	overflow: hidden;
	background: var(--color-slot-bg);
}

.p-blog__card-thumb img,
.p-blog__card-thumb .img-slot {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.p-blog__card-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 8px;
	padding: 16px 20px 20px;
}

.p-blog__card-tag {
	align-self: flex-start;
}

.p-blog__card-title {
	margin: 0;
	font-size: var(--card-title-size, 18px);
	font-weight: 700;
	line-height: 1.5;
}

.p-blog__card-text {
	margin: 0;
	color: var(--color-text-body);
	font-size: var(--card-text-size, 14px);
	line-height: 1.7;
}

.p-blog__card-date {
	margin: 0;
	color: var(--color-text-muted);
	font-size: 13px;
}

.p-blog__card-more {
	margin-top: auto;
	color: var(--color-primary);
	font-size: var(--card-link-size, 14px);
	font-weight: 700;
}

/* ページ送り（WP-PageNavi・標準どちらも） --------------------------------- */
.p-blog__pager {
	margin: 40px 0 0;
	text-align: center;
}

.p-blog__pager .wp-pagenavi,
.p-blog__pager {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.p-blog__pager a,
.p-blog__pager span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 10px;
	border: 1px solid var(--color-primary);
	border-radius: 999px;
	color: var(--color-primary);
	font-weight: 700;
	text-decoration: none;
}

.p-blog__pager .current {
	background: var(--color-primary);
	color: #fff;
}

.p-blog__pager .pages,
.p-blog__pager .extend,
.p-blog__pager .dots {
	border-color: transparent;
	color: var(--color-text-muted);
}

/*
 * スマホ幅では「1 / 46」とボタンが 1 行に収まらず、2 行目の頭に「…」だけが来るため、
 * 「1 / 46」を 1 行目に分け、2 行目のボタンが 1 行に収まるよう間隔と「…」の幅を詰める。
 */
@media (max-width: 599px) {
	.p-blog__pager .wp-pagenavi,
	.p-blog__pager {
		gap: 6px;
	}

	.p-blog__pager a,
	.p-blog__pager span {
		min-width: 36px;
		height: 36px;
		padding: 0 8px;
	}

	.p-blog__pager .pages {
		flex-basis: 100%;
		height: auto;
	}

	.p-blog__pager .extend,
	.p-blog__pager .dots {
		min-width: 24px;
		padding: 0;
	}
}

.p-blog__list,
.p-blog__related {
	padding-bottom: 64px;
}

.p-blog__related .c-heading {
	margin-bottom: 32px;
}

/* 記事ページ --------------------------------------------------------- */
.p-blog-single__head {
	margin: 16px 0 24px;
}

.p-blog-single__meta {
	margin: 0 0 8px;
	color: var(--color-text-muted);
	font-size: 14px;
}

.p-blog-single__terms {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}

.p-blog-single__terms .c-tag {
	text-decoration: none;
}

.p-blog-single__title {
	margin: 0;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.5;
}

.p-blog-single__eyecatch {
	margin-bottom: 32px;
	text-align: center;
}

.p-blog-single__eyecatch img {
	max-width: 100%;
	height: auto;
}

.p-blog-single__content {
	color: var(--color-text);
	font-size: 16px;
	line-height: 1.9;
	overflow-wrap: anywhere;
}

.p-blog-single__content h2 {
	margin: 2.4em 0 1em;
	padding: .6em .8em;
	border-left: 4px solid var(--color-primary);
	background: var(--cream);
	font-size: 20px;
	line-height: 1.5;
}

.p-blog-single__content h3 {
	margin: 2em 0 .8em;
	padding-bottom: .4em;
	border-bottom: 2px solid var(--color-primary-light);
	font-size: 18px;
	line-height: 1.5;
}

.p-blog-single__content p {
	margin: 0 0 1.4em;
}

.p-blog-single__content img {
	max-width: 100%;
	height: auto;
}

.p-blog-single__content a {
	color: var(--color-primary);
	text-decoration: underline;
}

.p-blog-single__content .aligncenter {
	display: block;
	margin-inline: auto;
}

/* 表・箇条書き（今の本番の記事ページと同じ指定） */
.p-blog-single__content table {
	width: 100%;
	margin: 1.5em 0;
	border: 2px solid #374151;
	border-collapse: collapse;
}

.p-blog-single__content th,
.p-blog-single__content td {
	padding: 8px;
	border: 1px solid #ccc;
	text-align: left;
}

.p-blog-single__content th {
	background-color: #f5f5f5;
	font-weight: 700;
}

.p-blog-single__content ul,
.p-blog-single__content ol {
	margin: 1.5em 0 1.5em 1.8em;
	padding: 0;
}

.p-blog-single__content ul {
	list-style-type: disc;
}

.p-blog-single__content ol {
	list-style-type: decimal;
}

.p-blog-single__content li {
	margin-bottom: .5em;
	line-height: 1.6;
}

/*
 * 目次（Easy Table of Contents）。
 * プラグインの既定（display: table）だと中身に合わせて縮み、スマホでは 1 行数文字で折り返すため、本文の幅いっぱいに広げる。
 */
.p-blog-single__content #ez-toc-container {
	display: block;
	width: 100%;
	box-sizing: border-box;
}

/* 目次（Easy Table of Contents）の中の箇条書きは上の指定を打ち消す */
.p-blog-single__content #ez-toc-container ul,
.p-blog-single__content #ez-toc-container ol {
	margin: 0 0 0 1.2em;
	list-style: none;
}

/* 記事内の [cta]（今の本番と同じ見た目を新テーマの色で） */
.blog-link {
	padding: 0 1em;
	text-align: center;
}

.blog-link a {
	display: inline-block;
	margin: 1.5em auto;
	padding: 1em 2.5em;
	border: 1px solid var(--color-primary);
	border-radius: 100px;
	color: var(--color-primary);
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
}

.blog-link a:hover {
	background: var(--color-tint);
}

/*
 * 記事本文に直接書かれたボタン（<a><button>…</button></a>）。
 * 何も指定が無いとブラウザ既定の灰色の小さなボタンになるため、上の [cta] と同じ見た目にする。
 */
.p-blog-single__content a > button {
	display: inline-block;
	margin: 1em auto;
	padding: 1em 2.5em;
	border: 1px solid var(--color-primary);
	border-radius: 100px;
	background: #fff;
	color: var(--color-primary);
	font-family: inherit;
	font-size: inherit;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color .2s linear;
}

.p-blog-single__content a:hover > button {
	background: var(--color-tint);
}

.set-reader {
	position: relative;
	display: table;
	margin: 3em auto 1em;
	padding: 1.4em 1.5em 1em;
	border: 2px solid var(--color-primary);
	border-radius: 7px;
}

.set-reader p.set-reader_title {
	position: absolute;
	top: -.9em;
	left: .5em;
	margin: 0;
	padding: .3em .5em;
	border-radius: 5px;
	background: var(--color-primary);
	color: #fff;
	font-weight: 700;
	line-height: 1.1;
}

.blog-bnr-link {
	margin: 1em 0;
	text-align: center;
}

.blog-bnr-link img {
	display: inline;
}

/* 記事下（SNS・人気記事・X・バナー） */
.p-blog-single__foot {
	display: grid;
	gap: 24px;
	margin: 48px 0 64px;
}

.p-blog-single__box {
	padding: 20px;
	border-radius: 12px;
	background: var(--cream);
}

.p-blog-single__box-title {
	margin: 0 0 12px;
	font-size: 16px;
	font-weight: 700;
}

.p-blog-single__share,
.p-blog-single__popular {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.p-blog-single__popular {
	flex-direction: column;
}

/* 人気記事プラグイン（WordPress Popular Posts）が出す一覧の既定の左余白を消し、見出しと揃える */
.p-blog-single__popular .wpp-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.p-blog-single__popular li {
	display: flex;
	align-items: center;
	gap: 10px;
}

.p-blog-single__popular a {
	color: var(--color-text);
}

.p-blog-single__share a {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0 14px;
	border: 1px solid var(--color-primary);
	border-radius: 999px;
	background: #fff;
	color: var(--color-primary);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}

.p-blog-single__banner {
	text-align: center;
}

.p-blog-single__banner img {
	max-width: 100%;
	height: auto;
}

@media (min-width: 768px) {
	.p-blog__filter {
		padding-inline: var(--header-pad-pc);
	}

	.p-blog__cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.p-blog-single__title {
		font-size: 30px;
	}
}

@media (min-width: 1024px) {
	.p-blog__cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* 一覧・分類の名称を画像内の旧名称ではなくHTMLの主見出しに統一。 */
.p-blog__banner--heading {
  background: #fff6ef;
  padding: 88px 24px 56px;
}
.p-blog__banner--heading .p-blog__list-title { margin: 0; line-height: 1.5; }
@media (max-width: 839px) {
  .p-blog__banner--heading { padding: 76px 20px 36px; }
}