/* お買い得ラボ 表示コンポーネント */

.okd-verdict {
	border: 2px solid #d8dee4;
	border-radius: 10px;
	padding: 1.1em 1.2em;
	margin: 1.6em 0;
	background: #fbfcfd;
}

.okd-verdict__head {
	display: flex;
	align-items: center;
	gap: 0.5em;
	font-size: 1.35em;
	font-weight: 700;
	line-height: 1.3;
}

.okd-verdict__reason {
	margin: 0.6em 0 0;
	font-size: 0.97em;
	line-height: 1.75;
}

.okd-verdict__meta {
	margin: 0.7em 0 0;
	font-size: 0.82em;
	color: #6b7480;
}

.okd-verdict--buy_now,
.okd-verdict--good {
	border-color: #2e9e5b;
	background: #f2fbf5;
}

.okd-verdict--wait_sale {
	border-color: #d9a520;
	background: #fffbf0;
}

.okd-verdict--wait {
	border-color: #d24b4b;
	background: #fdf4f4;
}

.okd-verdict--collecting {
	border-color: #b6bec7;
	background: #f7f8f9;
}

.okd-table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.4em 0;
	font-size: 0.97em;
}

.okd-table th,
.okd-table td {
	border: 1px solid #e2e6ea;
	padding: 0.65em 0.9em;
	text-align: left;
}

.okd-table th {
	width: 45%;
	background: #f6f8fa;
	font-weight: 600;
}

.okd-table__current td {
	font-size: 1.15em;
	font-weight: 700;
}

.okd-muted {
	color: #6b7480;
	font-size: 0.88em;
	font-weight: 400;
}

.okd-note,
.okd-credit {
	font-size: 0.85em;
	color: #6b7480;
	line-height: 1.7;
	margin: 0.9em 0;
}

.okd-warn {
	background: #fff4f4;
	border-left: 4px solid #d24b4b;
	padding: 0.7em 1em;
	font-size: 0.9em;
}

/* グラフ */
.okd-chart {
	margin: 1.6em 0;
}

.okd-chart svg {
	width: 100%;
	height: auto;
	overflow: visible;
}

.okd-chart__line {
	fill: none;
	stroke: #bf0000;
	stroke-width: 2;
	stroke-linejoin: round;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
}

.okd-chart__area {
	fill: rgba(191, 0, 0, 0.08);
	stroke: none;
}

.okd-chart__grid {
	stroke: #dfe4e9;
	stroke-width: 1;
	stroke-dasharray: 3 3;
	vector-effect: non-scaling-stroke;
}

.okd-chart__grid--min {
	stroke: #2e9e5b;
}

.okd-chart__ylabel,
.okd-chart__xlabel {
	font-size: 11px;
	fill: #6b7480;
}

.okd-chart__ylabel--min {
	fill: #2e9e5b;
	font-weight: 700;
}

.okd-chart figcaption {
	font-size: 0.82em;
	color: #6b7480;
	margin-top: 0.5em;
	text-align: center;
}

/* 購入ボタン */
.okd-buy {
	margin: 1.8em 0;
}

/*
 * ボタンの上に出す小さな商品の見出し（v0.13.0）。
 * 記事中ほどの [okd_card] より一回り小さくして、
 * 「もう一度カードが出た」ではなく「これを買う」と読ませる。
 */
.okd-buy__item {
	display: flex;
	gap: 0.9em;
	align-items: center;
	margin-bottom: 0.9em;
}

.okd-buy__thumb {
	flex: 0 0 96px;
	max-width: 96px;
}

/* 画像は店舗が用意したもので縦横比がばらばら。正方形に収めて揃える。 */
.okd-buy__thumb img {
	display: block;
	width: 100%;
	height: 96px;
	object-fit: contain;
	background: #fff;
	border-radius: 6px;
}

.okd-buy__meta {
	flex: 1 1 auto;
	min-width: 0;
}

.okd-buy__name {
	margin: 0;
	font-weight: 700;
	line-height: 1.5;
}

.okd-buy__price {
	margin: 0.3em 0 0;
	display: flex;
	align-items: baseline;
	gap: 0.4em;
}

.okd-buy__net {
	font-size: 1.35em;
	font-weight: 700;
	color: #bf0000;
	line-height: 1.2;
}

.okd-buy__unit {
	font-size: 0.85em;
	color: #6b7480;
}

.okd-buy__btn {
	display: block;
	padding: 0.95em 1.2em;
	margin-bottom: 0.6em;
	border-radius: 8px;
	text-align: center;
	font-weight: 700;
	text-decoration: none;
	color: #fff;
	transition: opacity 0.15s ease;
}

.okd-buy__btn:hover {
	opacity: 0.88;
	color: #fff;
}

.okd-buy__btn--rakuten {
	background: #bf0000;
}

.okd-buy__btn--amazon {
	background: #ff9900;
	color: #111;
}

.okd-buy__btn--amazon:hover {
	color: #111;
}

.okd-buy__btn--yahoo {
	background: #ff0033;
}

.okd-buy__note {
	font-size: 0.8em;
	color: #6b7480;
	margin: 0.5em 0 0;
	text-align: center;
}

/* 商品カード（画像つき） */
.okd-card {
	display: flex;
	gap: 1.1em;
	align-items: flex-start;
	border: 1px solid #d8dee4;
	border-radius: 10px;
	padding: 1.1em;
	margin: 1.8em 0;
	background: #fff;
}

.okd-card__thumb {
	flex: 0 0 168px;
	max-width: 168px;
}

/*
 * 画像は店舗が用意したもので、縦横比も余白もばらばら。
 * 正方形の枠に contain で収め、記事内での見え方を揃える。
 */
.okd-card__thumb img {
	display: block;
	width: 100%;
	height: 168px;
	object-fit: contain;
	background: #fff;
	border-radius: 6px;
}

.okd-card__body {
	flex: 1 1 auto;
	min-width: 0;
}

.okd-card__name {
	margin: 0;
	font-weight: 700;
	line-height: 1.5;
}

.okd-card__price {
	margin: 0.5em 0 0;
	display: flex;
	align-items: baseline;
	gap: 0.4em;
}

.okd-card__net {
	font-size: 1.5em;
	font-weight: 700;
	color: #bf0000;
	line-height: 1.2;
}

.okd-card__unit {
	font-size: 0.85em;
	color: #6b7480;
}

/* 表のセルに入るので折り返さない。 */
.okd-unitprice,
.okd-price-inline {
	white-space: nowrap;
}

.okd-unitprice--empty {
	color: #6b7480;
}

.okd-card__sub,
.okd-card__shop {
	margin: 0.25em 0 0;
	font-size: 0.85em;
	color: #6b7480;
}

.okd-card__review {
	margin: 0.45em 0 0;
	font-size: 0.85em;
	line-height: 1.5;
}

.okd-card__stars {
	color: #e8a400;
	letter-spacing: 0.02em;
}

.okd-card__rating {
	font-weight: 700;
	margin-left: 0.15em;
}

.okd-card__reviewcount {
	color: #6b7480;
}

.okd-card__note {
	margin: 0.6em 0 0;
	font-size: 0.9em;
	line-height: 1.7;
}

.okd-card__btn {
	margin-top: 0.9em;
	margin-bottom: 0;
}

.okd-card__meta {
	margin: 0.5em 0 0;
	font-size: 0.78em;
	color: #6b7480;
}

/* ランキング */
.okd-ranking {
	margin: 1.4em 0;
	padding-left: 1.4em;
}

.okd-ranking__item {
	display: flex;
	gap: 0.8em;
	align-items: flex-start;
	padding: 0.7em 0;
	border-bottom: 1px solid #eceff2;
}

.okd-ranking__thumb {
	flex: 0 0 72px;
}

.okd-ranking__thumb img {
	display: block;
	width: 72px;
	height: 72px;
	object-fit: contain;
	background: #fff;
	border-radius: 4px;
}

.okd-ranking__main {
	flex: 1 1 auto;
	min-width: 0;
}

.okd-ranking__name {
	font-weight: 600;
	line-height: 1.5;
}

.okd-ranking__price {
	margin-top: 0.25em;
}

.okd-ranking__net {
	font-size: 1.1em;
	font-weight: 700;
	color: #bf0000;
}

.okd-ranking__link {
	display: inline-block;
	margin-top: 0.35em;
	font-size: 0.85em;
	font-weight: 700;
	color: #bf0000;
}

@media (max-width: 600px) {
	.okd-verdict__head {
		font-size: 1.15em;
	}

	.okd-table th {
		width: 50%;
	}

	/* 狭い画面では画像を上に、情報を下に積む */
	.okd-card {
		display: block;
	}

	.okd-card__thumb {
		max-width: none;
		margin-bottom: 0.9em;
	}

	.okd-card__thumb img {
		height: 200px;
	}
}

/* ------------------------------------------------------------------
   スマホで「最初の1画面に本文が1文字も無い」のを直す（2026-10-03）

   実測（iPhone相当 375x812・記事ページ）:
     tagline 43px + ヘッダー/ロゴ 97px + メニュー 120px
     + タイトル 74px + アイキャッチ 190px + 上部シェア 100px
     = 本文が始まるのは 807px。画面の高さ(812px)とほぼ同じで、
       読者は1画面スクロールするまで記事を1文字も読めない。

   消すのは「同じことを二度言っている部分」だけ:
     .tagline          … ヘッダー直上のサイト説明。<title>とh1で既に名乗っている
     .eye-catch-wrap   … アイキャッチは記事タイトルを画像に焼いたもの。
                         すぐ上のh1と同じ文字が190px続く。一覧とOGPでは今までどおり出る
     .sns-share.ss-top … 読む前のシェアボタン。記事末尾(.ss-bottom)には残す

   これで本文の開始は約474pxになり、結論ボックスが最初の画面に入る。
   PCの見た目は変えない。
   ------------------------------------------------------------------ */

@media screen and (max-width: 834px) {
	.tagline {
		display: none;
	}

	.single .article-header .eye-catch-wrap,
	.page .article-header .eye-catch-wrap {
		display: none;
	}

	.sns-share.ss-top {
		display: none;
	}

	/* 記事の終わりと「関連記事」のあいだに 420px のボタンの壁がある。
	   読者が「次を読むか」を決める場所なので、feedly/RSS の購読枠だけ外す。
	   シェアボタン（.ss-bottom）は残す。 */
	.sns-follow.sf-bottom {
		display: none;
	}
}

/* スマホの表を少しだけ詰める（列が多い記事で1行が3画面ぶんに伸びるのを抑える） */
@media screen and (max-width: 480px) {
	.entry-content table th,
	.entry-content table td {
		padding: 5px 4px;
		font-size: 0.78em;
		line-height: 1.5;
	}

	/* 金額・単価の列は折り返させない（「約1,2 34円」と割れるのを防ぐ） */
	.entry-content table td .okd-price-inline,
	.entry-content table td .okd-unitprice {
		white-space: nowrap;
	}
}

/* ==================================================================
   読みやすさ（2026-10-12・実機 375x812 で測って直した3点）

   1. 結論ボックス（.okd-conclusion を付けた箱だけ。本物の引用41件には当てない）
      223本すべてが1つの段落に「・」を <br> で並べた形で、行間が詰まって
      「太字の壁」に見えていた（高さ652px・中の56%が太字）。
      記事側を項目ごとの <p> に分けたうえで、ここで間隔とぶら下げ
      インデントを付ける。箱そのものが強調なので、中の太字は外す。

   2. トップページの記事一覧
      リンクの高さが中央値16pxで、187本のうち148本が指で押せる大きさ
      （32px）に届いていなかった。リンクを1行にして35pxにする。

   3. 目次
      同じ理由で15px → 34px。
   ------------------------------------------------------------------ */

.entry-content blockquote.okd-conclusion {
	background: #f7f9fb;
	border: 1px solid #e3e8ee;
	border-left: 5px solid #b9c7d6;
	border-radius: 6px;
	padding: 1.1em 1.2em;
}

/* Cocoon の大きな引用符は、結論の箱では飾りでしかない */
.entry-content blockquote.okd-conclusion::before,
.entry-content blockquote.okd-conclusion::after {
	content: none !important;
	display: none !important;
}

.entry-content blockquote.okd-conclusion > p {
	margin: 0 0 0.8em;
}

.entry-content blockquote.okd-conclusion > p:last-child {
	margin-bottom: 0;
}

/* 2つ目以降が「・」で始まる項目。折り返しを本文の頭に揃える */
.entry-content blockquote.okd-conclusion > p + p {
	padding-left: 1.15em;
	text-indent: -1.15em;
}

/* 箱そのものが強調なので、中で太字を重ねない */
.entry-content blockquote.okd-conclusion strong {
	font-weight: 400;
}

.entry-content blockquote.okd-conclusion > p:first-child {
	margin-bottom: 0.7em;
}

.entry-content blockquote.okd-conclusion > p:first-child strong {
	font-weight: 700;
	font-size: 0.88em;
	letter-spacing: 0.08em;
	color: #5b6b7c;
}

/* トップページ（全記事の一覧）のリンクを、指で押せる行にする */
/* ⚠ .okd-nav__item を外す。カテゴリ導線のボタンは grid + flex で組んでいて、
   ここで display:block にすると件数バッジが折り返して崩れる（2026-10-12 に踏んだ） */
body.home .entry-content li:not(.okd-nav__item) {
	margin-bottom: 1em;
	line-height: 1.7;
}

body.home .entry-content li:not(.okd-nav__item) > a:first-child {
	display: block;
	padding: 0.15em 0 0.25em;
	font-weight: 700;
	text-decoration: none;
}

body.home .entry-content li:not(.okd-nav__item) > a:first-child:hover {
	text-decoration: underline;
}

/* 目次のリンクも同じ理由で広げる */
.toc li {
	margin: 0.15em 0;
}

.toc a {
	display: inline-block;
	padding: 0.3em 0;
}

/* 本文の表：行の境目を分かりやすくする（.okd-table には触らない） */
.entry-content table tbody tr:nth-child(odd) {
	background: #fafbfc;
}

.entry-content table th {
	background: #eef1f4;
}

/* 画面下に固定されている4つのボタン（運営者情報・お問い合わせ・免責事項・
   プライバシーポリシー）を、スマホでは出さない。
   どれも読んでいる途中で押すものではないのに、50px＝画面の6%を
   常に占有していた。4本ともページ下部のフッターから辿れる。 */
@media screen and (max-width: 834px) {
	.mobile-footer-menu-buttons {
		display: none !important;
	}
}

/* ==================================================================
   カテゴリへの導線（2026-10-12）
   記事のうしろとトップの冒頭に出る。class-okd-nav.php を参照。
   指で押せる高さ（44px以上）を最優先にしている。
   ------------------------------------------------------------------ */

.okd-nav {
	margin: 2.4em 0 1.6em;
	padding: 1.1em 1.2em 1.3em;
	background: #f7f9fb;
	border: 1px solid #e3e8ee;
	border-radius: 6px;
}

.okd-nav__title {
	margin: 0 0 0.8em;
	font-size: 0.88em;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: #5b6b7c;
}

.okd-nav .okd-nav__list {
	margin: 0;
}

.okd-nav__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.okd-nav__item {
	margin: 0;
	padding: 0;
	list-style: none;
}

.okd-nav__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	min-height: 46px;
	padding: 0.5em 0.8em;
	background: #fff;
	border: 1px solid #dde4ec;
	border-radius: 5px;
	color: #243547;
	font-size: 0.94em;
	line-height: 1.35;
	text-decoration: none;
}

.okd-nav__link:hover,
.okd-nav__link:focus {
	background: #eef4fa;
	border-color: #b9c7d6;
	text-decoration: none;
}

.okd-nav__count {
	flex: 0 0 auto;
	min-width: 1.9em;
	padding: 0.1em 0.4em;
	background: #eef1f4;
	border-radius: 10px;
	color: #6b7a89;
	font-size: 0.8em;
	text-align: center;
}

/* スマホは2列。150pxだと375px幅で1列に落ちてしまう */
@media screen and (max-width: 480px) {
	.okd-nav {
		padding: 1em 0.9em 1.1em;
	}

	.okd-nav__list {
		grid-template-columns: 1fr 1fr;
		gap: 7px;
	}

	.okd-nav__link {
		padding: 0.5em 0.6em;
		font-size: 0.88em;
	}
}

/* 導線の中の検索（テーマの検索窓はサイドバーごとスマホで出ないため） */
.okd-nav__search {
	display: flex;
	gap: 6px;
	margin: 0.9em 0 0;
}

.okd-nav__srlabel {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.okd-nav__input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 46px;
	padding: 0.5em 0.8em;
	background: #fff;
	border: 1px solid #dde4ec;
	border-radius: 5px;
	font-size: 16px; /* 16px未満だと iOS が勝手に拡大する */
	color: #243547;
}

.okd-nav__input:focus {
	border-color: #8ea6bd;
	outline: 2px solid #cfdcea;
	outline-offset: 1px;
}

.okd-nav__submit {
	flex: 0 0 auto;
	min-height: 46px;
	padding: 0 1.1em;
	background: #41576d;
	border: 1px solid #41576d;
	border-radius: 5px;
	color: #fff;
	font-size: 0.94em;
	cursor: pointer;
}

.okd-nav__submit:hover {
	background: #33465a;
}

/* トップへ戻る（テーマのものが出てこないので自前。okd-ui.js が付け外しする） */
.okd-totop {
	position: fixed;
	right: 12px;
	bottom: 12px;
	z-index: 900;
	width: 46px;
	height: 46px;
	padding: 0;
	background: rgba(42, 58, 74, 0.82);
	border: 0;
	border-radius: 50%;
	color: #fff;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
}

.okd-totop.is-on {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.okd-totop:hover {
	background: rgba(42, 58, 74, 0.95);
}

@media (prefers-reduced-motion: reduce) {
	.okd-totop {
		transition: none;
	}
}