/**
 * ブログ・検索結果・404（R9）
 *
 * 値は公開サイトの表示を測った仕様書（docs/specs/blog）から。コードは自前（gb- の class）。
 */

/* ------------------------------------------------------------------ 記事一覧：見出し */

.gb-blog-header {
	padding: 10px 0 25px;
}

.gb-blog-header__title {
	margin: 0 0 10px;
}

.gb-blog-header__lead {
	margin: 0;
	font-size: 17px;
	line-height: 1.6;
}

/* ------------------------------------------------------------------ 記事一覧：カード（PC は 3 列・2 列・3 列のくり返し） */

.gb-blog {
	margin-bottom: 50px;
}

.gb-post-cards {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 30px;
}

.gb-post-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--gb-radius-card, 16px);
	background: #fff;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
}

.gb-post-card__media {
	display: block;
	aspect-ratio: 8 / 5;
	overflow: hidden;
	background: rgba(var(--gb-color-text-rgb), 0.03);
}

.gb-post-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1s var(--gb-ease);
}

.gb-post-card:hover .gb-post-card__media img {
	transform: scale(1.05);
}

.gb-post-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	padding: 20px;
}

.gb-post-card__date {
	display: block;
	margin-bottom: 15px;
	font-size: 12px;
	line-height: 1;
	opacity: 0.7;
}

.gb-post-card__title {
	margin: 0 0 10px;
	font-size: 24px;
	font-weight: 500;
	line-height: 32px;
}

.gb-post-card__title a {
	color: var(--gb-color-text);
	transition: color var(--gb-duration) var(--gb-ease);
}

.gb-post-card:hover .gb-post-card__title a,
.gb-post-card__title a:hover {
	color: var(--gb-color-accent);
}

.gb-post-card__more {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-top: auto;
	color: var(--gb-color-accent);
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
}

.gb-blog__empty {
	margin: 0;
	padding: 60px 0;
	text-align: center;
}

@media (min-width: 768px) {
	.gb-blog {
		margin-bottom: 80px;
	}

	.gb-post-cards {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	/* 8 件で 1 かたまり：1〜3 件目と 6〜8 件目は 3 列、4・5 件目は 2 列 */
	.gb-post-card {
		grid-column: span 2;
	}

	.gb-post-card:nth-child(8n + 4),
	.gb-post-card:nth-child(8n + 5) {
		grid-column: span 3;
	}

	.gb-post-card__body {
		padding: 30px;
	}
}

/* ------------------------------------------------------------------ ページ送り */

.gb-pager {
	margin-top: 30px;
	text-align: center;
}

.gb-pager__inner {
	display: inline-flex;
	align-items: stretch;
	height: 42px;
	padding: 0 12px;
	border: 1px solid #d3d3d3;
	border-radius: 6px;
}

.gb-pager .page-numbers {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	margin: 0 3px;
	padding: 0 2px;
	color: var(--gb-color-text);
	font-size: 13px;
	line-height: 1;
	transition: color var(--gb-duration) var(--gb-ease);
}

.gb-pager .page-numbers.prev,
.gb-pager .page-numbers.next {
	margin: 0 10px;
}

.gb-pager a.page-numbers:hover,
.gb-pager .page-numbers.current,
.gb-pager .page-numbers.dots {
	color: var(--gb-color-accent);
}

/* いまのページの下に線 */
.gb-pager .page-numbers.current::after {
	content: '';
	position: absolute;
	right: 0;
	bottom: -1px;
	left: 0;
	height: 1px;
	background: var(--gb-color-accent);
}

/* ------------------------------------------------------------------ 記事：タイトルの箱 */

.gb-article-wrap {
	margin-bottom: 50px;
}

.gb-article-head {
	display: flex;
	flex-direction: column;
	margin-bottom: 30px;
	overflow: hidden;
	border-radius: var(--gb-radius-card, 16px);
	background: #fff;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
}

.gb-article-head__text {
	display: flex;
	flex-direction: column;
	padding: 30px;
}

.gb-article-head__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: 10px;
	font-size: 12px;
	line-height: 1.6;
	opacity: 0.7;
}

/* 日付と筆者の間に「—」 */
.gb-article-head__meta time::after {
	content: '—';
	margin: 0 10px;
}

.gb-article-head__title {
	margin: 0 0 20px;
}

.gb-article-head__image {
	order: -1;
	aspect-ratio: 360 / 309;
}

.gb-article-head__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (min-width: 768px) {
	.gb-article-wrap {
		margin-bottom: 80px;
	}

	.gb-article-head {
		flex-direction: row;
		min-height: 550px;
		margin-bottom: 60px;
	}

	.gb-article-head__text {
		flex: 1 1 50%;
		min-width: 0;
		padding: 50px;
	}

	.gb-article-head--image .gb-article-head__text .gb-share {
		margin-top: auto;
	}

	.gb-article-head__image {
		flex: 0 0 50%;
		order: 0;
		aspect-ratio: auto;
	}
}

/* ------------------------------------------------------------------ シェア */

.gb-share {
	display: flex;
	align-items: center;
	font-size: 13px;
	line-height: 1;
}

.gb-share__label {
	margin-right: 10px;
	font-weight: 500;
	letter-spacing: 0.02em;
}

.gb-share__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin-left: 4px;
	color: var(--gb-color-text);
	transition: color var(--gb-duration) var(--gb-ease);
}

.gb-share__link:hover {
	color: var(--gb-color-accent);
}

/* ------------------------------------------------------------------ 記事：本文（幅 800px） */

.gb-article-body {
	max-width: 800px;
	margin: 0 auto 30px;
	font-size: 17px;
	line-height: 1.6;
	overflow-wrap: anywhere;
}

.gb-article-body p {
	margin: 0 0 20px;
}

.gb-article-body h2,
.gb-article-body h3,
.gb-article-body h4 {
	margin: 40px 0 20px;
}

.gb-article-body h4 {
	font-size: 20px;
	line-height: 28px;
}

.gb-article-body > :first-child {
	margin-top: 0;
}

.gb-article-body hr {
	margin: 40px 0;
	border: 0;
	border-top: 1px solid var(--gb-color-border);
}

.gb-article-body blockquote {
	margin: 0 0 20px;
	padding: 5px 0 5px 20px;
	border-left: 3px solid var(--gb-color-border);
}

.gb-article-image {
	margin: 0 0 20px;
}

.gb-article-image img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}

/* ------------------------------------------------------------------ 記事：次の記事 */

.gb-article-next {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	max-width: 800px;
	margin: 40px auto 0;
	padding: 30px;
	border-radius: var(--gb-radius-card, 16px);
	background: #fff;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
}

.gb-article-next__label {
	margin: 0 0 10px;
	font-size: 12px;
	line-height: 1.6;
	opacity: 0.7;
}

.gb-article-next__title {
	margin: 0 0 20px;
	font-size: 20px;
	font-weight: 500;
	line-height: 28px;
}

.gb-article-next__title a {
	color: var(--gb-color-text);
}

.gb-article-next__title a:hover {
	color: var(--gb-color-accent);
}

/* ------------------------------------------------------------------ 記事：スクロールすると出る帯（タイトル・シェア・読み進み具合） */

.gb-article-nav {
	position: fixed;
	top: var(--gb-header-bottom, 77px);
	right: 0;
	left: 0;
	z-index: 20;
	border-bottom: 1px solid var(--gb-color-border);
	background: var(--gb-color-bg, #f5f5f5);
	transform: translateY(calc(-100% - 5px));
	visibility: hidden;
	pointer-events: none;
	transition:
		transform var(--gb-duration) var(--gb-ease),
		visibility 0s linear var(--gb-duration);
}

.gb-article-nav.is-visible {
	transform: translateY(-1px);
	visibility: visible;
	pointer-events: auto;
	transition: transform var(--gb-duration) var(--gb-ease);
}

.gb-article-nav__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	height: 40px;
}

.gb-article-nav__title {
	min-width: 0;
	overflow: hidden;
	font-size: 13px;
	line-height: 1;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.gb-article-nav__bar {
	position: absolute;
	bottom: -4px;
	left: 0;
	display: block;
	width: 100%;
	height: 4px;
	background: var(--gb-color-accent);
	transform: scaleX(var(--gb-article-progress, 0));
	transform-origin: left center;
}

@media (min-width: 768px) {
	.gb-article-nav__inner {
		height: 50px;
	}

	.gb-article-nav__title {
		font-size: 15px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gb-article-nav,
	.gb-article-nav.is-visible {
		transition: none;
	}
}

/* ------------------------------------------------------------------ 検索結果 */

.gb-search-header {
	padding: 40px 0 30px;
}

.gb-search-header__form {
	position: relative;
	max-width: 290px;
}

.gb-search-header__input {
	display: block;
	width: 100%;
	height: 50px;
	padding: 12px 50px 12px 17px;
	border: 1px solid #d3d3d3;
	border-radius: 12px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 16px; /* スマホで入力のときに画面が拡大しない大きさ */
}

.gb-search-header__input:focus {
	border-color: var(--gb-color-text);
	outline: 0;
}

.gb-search-header__button {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--gb-color-text);
	cursor: pointer;
}

.gb-search-header__result {
	margin: 15px 0 0;
	font-size: 13px;
	line-height: 1.6;
}

.gb-search-empty {
	padding: 60px 0 80px;
	text-align: center;
}

.gb-search-empty__icon {
	display: block;
	margin: 0 auto 30px;
	color: var(--gb-color-accent);
}

.gb-search-empty__text {
	margin: 0;
	font-size: 20px;
	line-height: 32px;
}

@media (min-width: 768px) {
	.gb-search-header__input {
		font-size: 13px;
	}

	.gb-search-empty {
		padding: 90px 0 110px;
	}
}

/* ------------------------------------------------------------------ 404 */

.gb-notfound {
	max-width: 470px;
	min-height: calc(100vh - 20px); /* 公開サイトと同じく、フッターを画面の下へ送る */
	margin: 0 auto;
	padding: 60px 0 80px;
	text-align: center;
}

.gb-notfound__title {
	margin: 0 0 20px;
}

.gb-notfound__text {
	margin: 0 0 20px;
}

.gb-notfound__button {
	margin-top: 20px;
}

@media (min-width: 768px) {
	.gb-notfound {
		padding: 100px 0;
	}
}