/*
 * 記事デザイン。02-design.md §10
 *
 * 本文カラムは680px固定（ウィンドウ幅に追従させない）。一覧カードは wb-article-card.css 側でなくこちらに集約する。
 */

.wb-article__head { max-width: var(--container-article); margin: 0 auto var(--space-6); }
.wb-article__labels { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); align-items: center; }

.wb-article__pr {
	display: inline-block;
	margin-bottom: var(--space-3);
	padding: 4px 10px;
	border: 1px solid var(--color-accent);
	border-radius: var(--radius-sm);
	color: var(--color-accent);
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: .08em;
}

.wb-article__title {
	font-family: var(--font-mincho);
	font-weight: 700;
	font-size: var(--text-h1);
	line-height: 1.5;
	letter-spacing: .01em;
	margin: 0 0 var(--space-4);
}

.wb-article__byline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-5, 20px);
	font-size: 12.5px;
	color: var(--color-ink-muted);
	padding-top: var(--space-3);
	border-top: 1px solid var(--color-line);
}

.wb-article__author { display: flex; align-items: center; gap: var(--space-2); }
.wb-article__avatar {
	width: 32px; height: 32px; border-radius: 50%; flex: none;
	background: linear-gradient(135deg, var(--color-line-strong), var(--color-line));
	object-fit: cover;
}
.wb-article__author b { color: var(--color-ink); font-weight: 500; }

.wb-article__eye {
	max-width: var(--container-article);
	margin: 0 auto var(--space-8);
	aspect-ratio: 16 / 9;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--color-surface-alt);
}
.wb-article__eye img { width: 100%; height: 100%; object-fit: cover; }

.wb-article__body { max-width: var(--container-article); margin: 0 auto; }

.wb-article__body .wb-lead,
.wb-article__lead {
	font-family: var(--font-mincho);
	font-weight: 500;
	font-size: 17px;
	line-height: 1.95;
	margin: 0 0 var(--space-8);
}

.wb-article__body p { font-size: var(--text-article); line-height: var(--leading-article); margin: 0 0 24px; }
.wb-article__body img { max-width: 100%; height: auto; border-radius: var(--radius); }
.wb-article__body figcaption { font-size: var(--text-sm); color: var(--color-ink-muted); text-align: center; margin-top: var(--space-2); }

.wb-article__body h2 {
	font-family: var(--font-mincho);
	font-weight: 700;
	font-size: 22px;
	line-height: 1.6;
	border-left: 2px solid var(--color-primary);
	padding-left: 14px;
	margin: 40px 0 16px;
}
.wb-article__body h3 { font-family: var(--font-mincho); font-weight: 500; font-size: 18px; margin: 32px 0 12px; }

/* ---- タイプ別冒頭ボックス ---- */

.wb-article-meta {
	max-width: var(--container-article);
	margin: 0 auto var(--space-8);
	background: var(--color-surface);
	border: 1px solid var(--color-line);
	border-radius: var(--radius);
	padding: 20px 24px;
}
.wb-article-meta__title { font-size: var(--text-xs); color: var(--color-ink-muted); letter-spacing: .08em; margin: 0 0 14px; }
.wb-article-meta__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 18px; }
.wb-article-meta__k { font-size: 11.5px; color: var(--color-ink-muted); display: block; margin-bottom: 2px; }
.wb-article-meta__v { font-family: var(--font-figure); font-weight: 600; font-size: 22px; line-height: 1.2; }
.wb-article-meta__v small { font-family: var(--font-gothic); font-size: 12px; font-weight: 400; margin-left: 2px; }
.wb-article-meta__v.is-text { font-family: var(--font-gothic); font-size: 15px; font-weight: 700; }
.wb-article-meta__v a { color: var(--color-primary); }

/* 調査概要ボックス：浅葱の左罫2px */
.wb-survey-box {
	max-width: var(--container-article);
	margin: 0 auto var(--space-8);
	background: var(--color-surface-alt);
	border-left: 2px solid var(--color-info);
	border-radius: 0 var(--radius) var(--radius) 0;
	padding: 18px 22px;
}
.wb-survey-box__title { font-size: 12.5px; color: var(--color-info); letter-spacing: .04em; margin: 0 0 10px; font-weight: 700; }
.wb-survey-box__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px 20px; font-size: 13.5px; }
.wb-survey-box__grid dt { color: var(--color-ink-muted); font-size: 11.5px; margin: 0; }
.wb-survey-box__grid dd { margin: 2px 0 0; }

/* コピーできる文例ボックス（独自ブロック wb/quote-template）：破線枠・右上にコピーボタン。02-design.md §10.5 */
.wb-quote-box {
	max-width: var(--container-article);
	margin: 0 auto var(--space-8);
	background: var(--color-surface-alt);
	border: 1px dashed var(--color-line);
	border-radius: var(--radius);
	padding: 16px 20px;
}
.wb-quote-box__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.wb-quote-box__title { font-size: 12.5px; color: var(--color-ink-muted); letter-spacing: .04em; margin: 0; font-weight: 700; }
.wb-quote-box__copy {
	flex: none;
	height: 32px;
	padding: 0 14px;
	border-radius: var(--radius);
	border: 1px solid var(--color-primary);
	background: var(--color-surface);
	color: var(--color-primary);
	font-size: 12.5px;
	font-weight: 700;
	cursor: pointer;
	transition: background 120ms;
}
.wb-quote-box__copy:hover { background: var(--color-surface-alt); }
.wb-quote-box__copy:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 2px; }
.wb-quote-box__text { margin: 0; font-size: 14.5px; line-height: 1.9; }

/* ---- タイプ別：ランキング ---- */
.wb-article--ranking .wb-article__body ol { counter-reset: wb-rank; list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 10px; }
.wb-article--ranking .wb-article__body ol li {
	counter-increment: wb-rank;
	position: relative;
	padding: 14px 16px 14px 52px;
	border: 1px solid var(--color-line);
	border-radius: var(--radius);
	background: var(--color-surface);
}
.wb-article--ranking .wb-article__body ol li::before {
	content: counter(wb-rank);
	position: absolute;
	left: 14px; top: 50%; transform: translateY(-50%);
	width: 26px; height: 26px;
	border-radius: var(--radius-full);
	display: flex; align-items: center; justify-content: center;
	font-family: var(--font-figure); font-weight: 600; font-size: 13px;
	background: var(--color-surface-alt); color: var(--color-ink-muted);
}
.wb-article--ranking .wb-article__body ol li:nth-child(-n+3)::before {
	background: var(--color-accent); color: var(--color-surface);
}
.wb-article-ranking-note {
	max-width: var(--container-article);
	margin: 0 auto var(--space-6);
	font-size: var(--text-sm);
	color: var(--color-ink-muted);
	background: var(--color-surface-alt);
	border-radius: var(--radius);
	padding: 12px 16px;
}

/* ---- タイプ別：ハウツー ---- */
.wb-article--howto .wb-article__body h2 {
	counter-increment: wb-step;
	position: relative;
	padding-left: 46px;
	border-left: none;
	background: var(--color-surface);
	border: 1px solid var(--color-line);
	border-radius: var(--radius);
	padding-top: 14px;
	padding-bottom: 14px;
}
.wb-article--howto .wb-article__body { counter-reset: wb-step; }
.wb-article--howto .wb-article__body h2::before {
	content: counter(wb-step);
	position: absolute;
	left: 12px; top: 50%; transform: translateY(-50%);
	font-family: var(--font-figure); font-weight: 700; font-size: 24px; color: var(--color-primary);
}

/* ---- タイプ別：SNAP（画像グリッド主体） ---- */
.wb-article--snap { max-width: var(--container); }
.wb-article--snap .wp-block-gallery { --gallery-block--gutter-size: 8px; }
.wb-article--snap .wp-block-image img,
.wb-article--snap .wp-block-gallery img { aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-sm); }
.wb-snap-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 0 0 var(--space-8); }
@media (min-width: 640px) { .wb-snap-grid { grid-template-columns: repeat(3, 1fr); } }
.wb-snap-grid a { display: block; aspect-ratio: 1; border-radius: var(--radius-sm); overflow: hidden; }
.wb-snap-grid img { width: 100%; height: 100%; object-fit: cover; }

/* ---- タイプ別：コラム（本文幅を絞る） ---- */
.wb-article--column .wb-article__body { max-width: 620px; }
.wb-article--column .wb-article__body p { line-height: 2.1; }
.wb-article-series-nav {
	max-width: 620px;
	margin: var(--space-8) auto 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-3);
	border-top: 1px solid var(--color-line);
	padding-top: var(--space-4);
}
.wb-article-series-nav a { text-decoration: none; font-size: var(--text-sm); }
.wb-article-series-nav__label { display: block; font-size: var(--text-xs); color: var(--color-ink-muted); margin-bottom: 2px; }
.wb-article-series-nav--next { text-align: right; }

/* ---- 送客ブロック（§10.4） ---- */

.wb-cta-svc {
	max-width: var(--container-article);
	margin: var(--space-12) auto 0;
	background: var(--color-surface-alt);
	border-radius: var(--radius);
	padding: 28px;
}
.wb-cta-svc__title { font-size: var(--text-h3); font-weight: 700; margin: 0 0 4px; }
.wb-cta-svc__desc { font-size: 13.5px; color: var(--color-ink-muted); margin: 0 0 20px; }
.wb-cta-svc__list { display: grid; gap: 8px; margin-bottom: 16px; }
.wb-cta-svc__item {
	display: flex; align-items: center; gap: 14px;
	background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius);
	padding: 12px 14px; text-decoration: none;
}
.wb-cta-svc__item:hover { border-color: var(--color-line-strong); }
.wb-cta-svc__thumb {
	width: 64px; aspect-ratio: 4/3; border-radius: var(--radius-sm); flex: none; overflow: hidden;
	background: var(--color-surface-alt);
}
.wb-cta-svc__thumb img { width: 100%; height: 100%; object-fit: cover; }
.wb-cta-svc__body { flex: 1; min-width: 0; }
.wb-cta-svc__name { display: block; font-size: 14px; font-weight: 700; margin: 0 0 2px; color: var(--color-ink); }
.wb-cta-svc__meta { display: block; font-size: 12px; color: var(--color-ink-muted); }
.wb-cta-svc__price { font-family: var(--font-figure); font-weight: 600; font-size: 17px; white-space: nowrap; }
.wb-cta-svc__sub { border-top: 1px solid var(--color-line-strong); margin-top: 20px; padding-top: 18px; display: grid; gap: 10px; }
.wb-cta-svc__link {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	font-size: 13.5px; text-decoration: none; padding: 10px 14px;
	background: var(--color-surface); border-radius: var(--radius); color: var(--color-ink);
}
.wb-cta-svc__link:hover { color: var(--color-primary); }
.wb-cta-svc__link span:last-child { color: var(--color-ink-faint); }

/* ---- 記事トップ：人気ランキング ---- */
.wb-rank-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.wb-rank-list__item {
	display: flex; align-items: center; gap: var(--space-3);
	border: 1px solid var(--color-line); border-radius: var(--radius);
	padding: var(--space-3) var(--space-4); background: var(--color-surface);
}
.wb-rank-list__item a { color: var(--color-ink); text-decoration: none; font-weight: 500; }
.wb-rank-list__item a:hover { color: var(--color-primary); }
.wb-rank-list__num {
	display: inline-flex; align-items: center; justify-content: center;
	width: 26px; height: 26px; flex: none; border-radius: var(--radius-full);
	background: var(--color-accent); color: var(--color-surface);
	font-family: var(--font-figure); font-weight: 600; font-size: var(--text-sm);
}

/* ---- フッター（執筆者／関連記事／人気／シェア） ---- */

.wb-article__foot { max-width: var(--container-article); margin: var(--space-12) auto var(--space-16); }
.wb-article__foot section { margin-bottom: var(--space-10, 40px); }

.wb-article-writer {
	display: flex; gap: var(--space-4);
	background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius);
	padding: 20px;
}
.wb-article-writer__avatar { width: 56px; height: 56px; border-radius: 50%; flex: none; background: var(--color-surface-alt); object-fit: cover; }
.wb-article-writer__name { font-weight: 700; margin: 0 0 4px; }
.wb-article-writer__role { font-size: var(--text-sm); color: var(--color-ink-muted); margin: 0 0 8px; }
.wb-article-writer__bio { font-size: var(--text-sm); line-height: 1.8; margin: 0; }

.wb-article-type-filter { margin-bottom: var(--space-6); }
.wb-article-type-filter .wb-badge--tag.is-active { background: var(--color-primary); color: var(--color-surface); }

.wb-article-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 700px) { .wb-article-cards { grid-template-columns: 1fr; } }
.wb-article-cards--list { grid-template-columns: 1fr; }

.wb-article-card { display: block; text-decoration: none; color: var(--color-ink); }
.wb-article-card__thumb {
	display: block; aspect-ratio: 16/9; border-radius: var(--radius); overflow: hidden;
	background: var(--color-surface-alt); margin-bottom: var(--space-2);
}
.wb-article-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.wb-article-card__labels { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.wb-article-card__title {
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	font-family: var(--font-gothic); font-weight: 700; font-size: 15px; line-height: 1.6; margin: 0 0 4px;
}
.wb-article-card__lead {
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	font-size: 13px; line-height: 1.7; color: var(--color-ink-muted); margin: 0 0 6px;
}
.wb-article-card__date { display: block; font-size: var(--text-xs); color: var(--color-ink-faint); }

.wb-share { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.wb-share-btn {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 8px 16px; border-radius: var(--radius-full); border: 1px solid var(--color-line-strong);
	font-size: var(--text-sm); text-decoration: none; color: var(--color-ink);
}
.wb-share-btn:hover { background: var(--color-surface-alt); }

/* ---- 印刷用（guideのチェックリスト等） ---- */
@media print {
	.wb-header, .wb-breadcrumb, .wb-cta-svc, .wb-share, .wb-article__foot,
	.wb-drawer, .wb-sticky-cta, .wb-toasts, footer { display: none !important; }
	.wb-article__body { max-width: 100%; }
}