/* GPC ベンチデータ：記事表示（.gpcbench と同じ配色・寸法に合わせる） */
.gpcbd-box {
	--bd-accent: #76b900;
	--bd-accent-2: #5a8f00;
	--bd-bar: #c3ccd5;
	--bd-track: #eef1f4;
	--bd-ink: #1c2530;
	--bd-sub: #69757f;
	--bd-line: #e3e8ec;
	font-family: -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
	color: var(--bd-ink);
	max-width: 720px;
	margin: 0 auto 24px;
	background: #fff;
	border: 1px solid var(--bd-line);
	border-radius: 12px;
	overflow: hidden;
	-webkit-font-smoothing: antialiased;
	line-height: 1.5;
}
.gpcbd-box * { box-sizing: border-box; }

.gpcbd-head { padding: 14px 16px 12px; border-bottom: 1px solid var(--bd-line); }
.gpcbd-eyebrow { font-size: 10px; font-weight: 800; letter-spacing: .16em; color: var(--bd-accent-2); margin-bottom: 4px; }
.gpcbd-box .gpcbd-title {
	margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important;
	font-size: 17px; font-weight: 800; line-height: 1.35; color: var(--bd-ink);
}
.gpcbd-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.gpcbd-chip {
	display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700;
	background: #f4f7f0; border: 1px solid #e6ece0; border-radius: 7px; padding: 3px 8px;
}
.gpcbd-chip .k { font-size: 9.5px; font-weight: 800; color: #8a9aa3; letter-spacing: .04em; }

/* タブ（JSなし：ラジオボタン） */
.gpcbd-tabin { position: absolute; opacity: 0; pointer-events: none; }
.gpcbd-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 16px 0; }
.gpcbd-tabs label {
	border: 1px solid var(--bd-line); background: #fff; color: var(--bd-sub);
	font-weight: 700; font-size: 12.5px; padding: 6px 14px; border-radius: 999px; cursor: pointer; margin: 0;
}
.gpcbd-tabs label:hover { border-color: #c4ccd3; }
.gpcbd-panels > .gpcbd-panel { display: none; }
.gpcbd-panels > .gpcbd-panel:first-child { display: block; }
.gpcbd-tabin:nth-of-type(1):checked ~ .gpcbd-tabs > label:nth-child(1),
.gpcbd-tabin:nth-of-type(2):checked ~ .gpcbd-tabs > label:nth-child(2),
.gpcbd-tabin:nth-of-type(3):checked ~ .gpcbd-tabs > label:nth-child(3),
.gpcbd-tabin:nth-of-type(4):checked ~ .gpcbd-tabs > label:nth-child(4),
.gpcbd-tabin:nth-of-type(5):checked ~ .gpcbd-tabs > label:nth-child(5),
.gpcbd-tabin:nth-of-type(6):checked ~ .gpcbd-tabs > label:nth-child(6) {
	background: var(--bd-ink); border-color: var(--bd-ink); color: #fff;
}
.gpcbd-tabin:nth-of-type(n+2):checked ~ .gpcbd-panels > .gpcbd-panel:first-child { display: none; }
.gpcbd-tabin:nth-of-type(2):checked ~ .gpcbd-panels > .gpcbd-panel:nth-child(2),
.gpcbd-tabin:nth-of-type(3):checked ~ .gpcbd-panels > .gpcbd-panel:nth-child(3),
.gpcbd-tabin:nth-of-type(4):checked ~ .gpcbd-panels > .gpcbd-panel:nth-child(4),
.gpcbd-tabin:nth-of-type(5):checked ~ .gpcbd-panels > .gpcbd-panel:nth-child(5),
.gpcbd-tabin:nth-of-type(6):checked ~ .gpcbd-panels > .gpcbd-panel:nth-child(6) { display: block; }
.gpcbd-tabin:focus-visible ~ .gpcbd-tabs { outline: 2px solid var(--bd-accent); outline-offset: 2px; }

/* バー */
.gpcbd-box .gpcbd-bars { list-style: none !important; margin: 0 !important; padding: 10px 16px 6px !important; }
.gpcbd-box .gpcbd-r {
	list-style: none !important; margin: 0 !important; padding: 9px 0 !important; border-bottom: 1px dashed var(--bd-line);
	display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name val" "track track" "extra extra"; column-gap: 10px; row-gap: 5px;
}
.gpcbd-box .gpcbd-r::before, .gpcbd-box .gpcbd-r::marker { content: none !important; display: none !important; }
.gpcbd-r:last-child { border-bottom: 0; }
.gpcbd-name { grid-area: name; font-size: 13.5px; font-weight: 700; line-height: 1.35; min-width: 0; }
.gpcbd-sub { display: block; font-size: 11px; font-weight: 500; color: var(--bd-sub); }
.gpcbd-track { grid-area: track; height: 10px; background: var(--bd-track); border-radius: 999px; overflow: hidden; }
.gpcbd-fill { display: block; height: 100%; background: var(--bd-bar); border-radius: 999px; }
.gpcbd-r.is-hl .gpcbd-fill { background: var(--bd-accent); }
.gpcbd-r.is-hl .gpcbd-name { color: var(--bd-accent-2); }
.gpcbd-val { grid-area: val; text-align: right; white-space: nowrap; align-self: end; }
.gpcbd-val b { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.gpcbd-val small { font-size: 11px; color: var(--bd-sub); margin-left: 3px; font-weight: 700; }
.gpcbd-extra { grid-area: extra; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; font-size: 12px; color: var(--bd-sub); }
.gpcbd-meta i { font-style: normal; margin: 0 4px; color: #b6c0c8; }
.gpcbd-k { font-size: 10.5px; font-weight: 800; color: #8a9aa3; }
.gpcbd-buy { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.gpcbd-price { font-weight: 800; color: var(--bd-ink); font-variant-numeric: tabular-nums; }
.gpcbd-box .gpcbd-buy a {
	display: inline-block; font-size: 12px; font-weight: 800; color: #fff !important; text-decoration: none !important;
	background: #1f6fb2; border-radius: 6px; padding: 4px 10px; line-height: 1.4;
}
.gpcbd-box .gpcbd-buy a:hover { background: #175a93; }
.gpcbd-dir { margin: 10px 16px 0 !important; font-size: 11.5px; font-weight: 700; color: var(--bd-sub); }

.gpcbd-foot { padding: 10px 16px 12px; border-top: 1px solid var(--bd-line); background: #fafbfc; }
.gpcbd-box .gpcbd-foot p { margin: 0 !important; font-size: 11.5px; color: var(--bd-sub); line-height: 1.6; }
.gpcbd-box .gpcbd-conds { margin: 4px 0 0 !important; padding: 0 0 0 1.1em !important; font-size: 11.5px; color: var(--bd-sub); }
.gpcbd-box .gpcbd-conds li { margin: 1px 0 !important; }
.gpcbd-env { margin-top: 6px; font-size: 12px; }
.gpcbd-env summary { cursor: pointer; font-weight: 700; color: var(--bd-ink); }
.gpcbd-box .gpcbd-env ul { margin: 6px 0 0 !important; padding: 0 0 0 1.2em !important; }
.gpcbd-box .gpcbd-env li { margin: 2px 0 !important; color: var(--bd-sub); }

/* 1台分 */
.gpcbd-mbuy { padding: 10px 16px 0; display: flex; }
.gpcbd-box table.gpcbd-spec, .gpcbd-box table.gpcbd-gtable { width: 100%; border-collapse: collapse; margin: 0 !important; font-size: 13px; }
.gpcbd-spec { margin: 10px 0 !important; }
.gpcbd-box .gpcbd-spec th, .gpcbd-box .gpcbd-spec td, .gpcbd-box .gpcbd-gtable th, .gpcbd-box .gpcbd-gtable td {
	border: 0 !important; border-bottom: 1px solid var(--bd-line) !important; padding: 7px 16px !important; text-align: left; vertical-align: top; background: none !important;
}
.gpcbd-box .gpcbd-spec th { width: 34%; color: var(--bd-sub); font-weight: 700; font-size: 12px; }
.gpcbd-box .gpcbd-gtable thead th { font-size: 12px; color: var(--bd-sub); font-weight: 800; background: #fafbfc !important; text-align: right; }
.gpcbd-box .gpcbd-gtable .gpcbd-ghead th { text-align: left; font-size: 13px; font-weight: 800; color: var(--bd-ink); border-bottom: 0 !important; padding-bottom: 0 !important; }
.gpcbd-box .gpcbd-gtable td { text-align: right; white-space: nowrap; width: 33%; }
.gpcbd-box .gpcbd-gtable td b { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.gpcbd-box .gpcbd-gtable td small { font-size: 10.5px; color: var(--bd-sub); margin-left: 2px; }
.gpcbd-gtable .gpcbd-na { color: #b6c0c8; text-align: center; }
.gpcbd-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.gpcbd-btable { border-top: 1px solid var(--bd-line); }

.gpcbd-editor-note {
	margin: 12px 0; padding: 10px 12px; border: 1px dashed #e0a100; background: #fff8e5; color: #7a5600; font-size: 13px; border-radius: 6px;
}

/* 1か所比較（v1.11.0）：基準との差 */
.gpcbd-diff { display: inline-block; font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums; padding: 1px 6px; border-radius: 5px; margin-left: 4px; vertical-align: 2px; }
.gpcbd-diff.is-up { color: #1f6b14; background: #eef7e6; }
.gpcbd-diff.is-down { color: #b3261e; background: #fdeeed; }
.gpcbd-diff.is-same { color: var(--bd-sub); background: #f1f3f5; }
.gpcbd-diff.is-base { color: var(--bd-sub); background: #f1f3f5; font-weight: 700; }
.gpcbd-meta .gpcbd-diff { font-size: 10.5px; padding: 0 5px; vertical-align: 1px; }

@media (max-width: 480px) {
	.gpcbd-head { padding: 12px 12px 10px; }
	.gpcbd-tabs { padding: 10px 12px 0; }
	.gpcbd-box .gpcbd-bars { padding: 6px 12px 4px !important; }
	.gpcbd-box .gpcbd-title { font-size: 15.5px; }
	.gpcbd-val b { font-size: 16px; }
	.gpcbd-box .gpcbd-spec th, .gpcbd-box .gpcbd-spec td, .gpcbd-box .gpcbd-gtable th, .gpcbd-box .gpcbd-gtable td { padding: 6px 12px !important; }
	.gpcbd-foot { padding: 10px 12px; }
}
