/* 商品・記事のページの部品（includes/page-parts.php）。色は GeneratePress のグローバルカラー（spec.md §2） */

/* パンくず（Rank Math） */
.rank-math-breadcrumb {
	margin-bottom: 0.8em;
	color: var(--contrast-2, #625D57);
	font-size: 14px;
}

.rank-math-breadcrumb p {
	margin: 0;
}

.rank-math-breadcrumb a {
	color: var(--contrast-2, #625D57);
}

.rank-math-breadcrumb a:hover,
.rank-math-breadcrumb a:focus-visible {
	color: var(--accent, #C8381E);
}

/* 更新日・署名 */
.jgd-article-meta {
	margin: 0.4em 0 0;
	color: var(--contrast-2, #625D57);
	font-size: 14px;
}

/*
 * 記事のアイキャッチ（body.jgd-article-hero）。写真の上側にパンくず・タイトル・更新日を重ねる。
 * 写真と見出しを grid の同じ升に置くので、タイトルが長くて写真より高くなっても、写真がその高さまで伸びる。
 */
.jgd-article-hero .inside-article {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

.jgd-article-hero .page-header-image-single,
.jgd-article-hero .entry-header {
	grid-area: 1 / 1;
}

/* 写真の高さはおさえ（パソコンで元の 2/3 ほど）、上下を切って升いっぱいに広げる。下の余白はテーマの本文の margin-top に任せる（テーマの .separate-containers .inside-article > .featured-image より強くする） */
body.jgd-article-hero .inside-article > .page-header-image-single {
	position: relative;
	min-height: clamp(220px, 40vw, 440px);
	margin: 0;
	overflow: hidden;
}

.jgd-article-hero .page-header-image-single img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 文字を読みやすくする暗い幕（上が濃く、下に向かって消える） */
.jgd-article-hero .page-header-image-single::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.45) 45%, rgba(0, 0, 0, 0) 80%);
	pointer-events: none;
}

.jgd-article-hero .entry-header {
	position: relative;
	z-index: 1;
	align-self: start;
	margin: 0;
	padding: 28px 32px 48px;
	color: #fff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.jgd-article-hero .entry-title {
	color: #fff;
}

.jgd-article-hero .entry-header .rank-math-breadcrumb,
.jgd-article-hero .entry-header .rank-math-breadcrumb a,
.jgd-article-hero .entry-header .jgd-article-meta {
	color: rgba(255, 255, 255, 0.88);
}

.jgd-article-hero .entry-header .rank-math-breadcrumb a:hover,
.jgd-article-hero .entry-header .rank-math-breadcrumb a:focus-visible {
	color: #fff;
	text-decoration: underline;
}

@media (max-width: 768px) {
	.jgd-article-hero .entry-header {
		padding: 18px 18px 36px;
	}
}

/* 関連の商品・記事 */
.jgd-related {
	margin-top: 2.5em;
	padding-top: 1.5em;
	border-top: 1px solid var(--contrast-3, #E4E1DC);
}

.jgd-related__title {
	margin-bottom: 0.8em;
	font-size: 1.4em;
}

/* 作品ごとの一覧へのリンク。右寄せで、押せると分かる枠付きの見た目にする（2026-10-22、運営者） */
.jgd-related__more {
	margin: 1em 0 0;
	text-align: right;
}

.jgd-related__more a {
	display: inline-block;
	padding: 0.5em 1em;
	border: 1px solid var(--accent, #C8381E);
	border-radius: 4px;
	color: var(--accent, #C8381E);
	font-weight: 600;
	text-decoration: none;
}

.jgd-related__more a::after {
	content: " \2192";
}

.jgd-related__more a:hover,
.jgd-related__more a:focus-visible {
	background: var(--accent, #C8381E);
	color: #fff;
}

.jgd-related__articles {
	margin: 0;
	padding: 0;
	list-style: none;
}

.jgd-related__articles li {
	padding: 0.5em 0;
	border-bottom: 1px solid var(--contrast-3, #E4E1DC);
}

/* ガイドの末尾の「すべて見る」。トップページの .jgd-home__more と同じ、右寄せの文字のリンク（2026-10-25、運営者） */
.jgd-related__all {
	margin: 1.2em 0 0;
	text-align: right;
}