/**
 * GGDB マウスLP用スタイル v2.6.4
 * font-size は全て em（SWELL の body フォント設定を継承）
 * ボタン・バッジはtable.cssのクラスを継承（依存関係で自動ロード）
 * .ggj-lp スコープ配下でSWELLを壊さない設計
 */

/* ============================================================
   ベース（幅はSWELLコンテナに委ねる）
   ============================================================ */
.ggj-lp {
	/* font-size はSWELLのbody設定を継承 */
	line-height: 1.7;
}

.ggj-lp > section {
	margin-bottom: 2.5rem;
}

.ggj-lp__affiliate-note {
	font-size: 0.75em;
	color: var(--ggj-text-3, #999);
	text-align: right;
	margin-bottom: 1.25rem;
}

/* ============================================================
   導入文
   ============================================================ */
.ggj-lp__intro p {
	color: var(--ggj-text, #111);
}

/* ============================================================
   選び方Tips
   ============================================================ */
.ggj-lp__tips {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.75rem;
}
@media (min-width: 640px) {
	.ggj-lp__tips { grid-template-columns: repeat(3, 1fr); }
}

.ggj-lp__tip {
	background: var(--ggj-surface-2, #fafaf8);
	border: 1px solid var(--ggj-border, #e8e8e4);
	padding: 1.1rem 1.2rem;
	border-radius: var(--ggj-radius-md, 10px);
}
.ggj-lp__tip h3 {
	font-size: 0.95em;
	font-weight: 700;
	margin: 0 0 0.4rem;
	line-height: 1.4;
}
.ggj-lp__tip p {
	font-size: 0.875em;
	color: var(--ggj-text-2, #555);
	margin: 0;
	line-height: 1.65;
}

/* ============================================================
   選定ロジック（アコーディオン）
   ============================================================ */
.ggj-lp__logic {
	background: var(--ggj-surface-2, #fafaf8);
	border: 1px solid var(--ggj-border, #e8e8e4);
	border-radius: var(--ggj-radius-md, 10px);
	overflow: hidden;
}

.ggj-lp__logic-details { margin: 0; }

.ggj-lp__logic-summary {
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.5rem;
	cursor: pointer;
	font-size: inherit;
	font-weight: 800;
	color: var(--ggj-text, #111);
	user-select: none;
}
.ggj-lp__logic-summary::-webkit-details-marker { display: none; }
.ggj-lp__logic-summary::after {
	content: '▸';
	font-size: 1.1em;
	color: var(--ggj-text-2, #555);
	transition: transform 0.2s;
	flex-shrink: 0;
}
.ggj-lp__logic-details[open] .ggj-lp__logic-summary::after {
	transform: rotate(90deg);
}
.ggj-lp__logic-summary:hover { background: var(--ggj-surface, #fff); }

.ggj-lp__logic-body {
	padding: 1.25rem 1.5rem 1.5rem;
	border-top: 1px solid var(--ggj-border-light, #f0f0ec);
}

.ggj-lp__logic-lead {
	font-size: 0.9em;
	color: var(--ggj-text-2, #555);
	margin: 0 0 1rem;
	line-height: 1.75;
}
.ggj-lp__logic-note {
	font-size: 0.8em;
	color: var(--ggj-text-3, #999);
	margin: 1.25rem 0 0;
	line-height: 1.6;
}

/* スコアカード（バーチャート型） */
.ggj-lp__score-cards {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.ggj-lp__score-card {
	background: var(--ggj-surface, #fff);
	border: 1px solid var(--ggj-border, #e8e8e4);
	border-radius: var(--ggj-radius-sm, 6px);
	padding: 0.75rem 1rem;
}
.ggj-lp__score-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.3rem;
}
.ggj-lp__score-card__name {
	font-size: 0.875em;
	font-weight: 800;
	color: var(--ggj-text, #111);
}
.ggj-lp__score-card__pts {
	font-size: 0.8em;
	font-weight: 700;
	color: var(--ggj-accent, #e07a1a);
	white-space: nowrap;
}
.ggj-lp__score-bar {
	height: 6px;
	background: var(--ggj-border, #e8e8e4);
	border-radius: 3px;
	margin-bottom: 0.4rem;
	overflow: hidden;
}
.ggj-lp__score-bar__fill {
	height: 100%;
	background: var(--ggj-accent, #e07a1a);
	border-radius: 3px;
}
.ggj-lp__score-card__desc {
	font-size: 0.8em;
	color: var(--ggj-text-2, #555);
	margin: 0;
	line-height: 1.6;
}

/* ============================================================
   製品カード
   ============================================================ */
.ggj-lp__cards {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.ggj-lp__card {
	background: var(--ggj-surface, #fff);
	border: 1px solid var(--ggj-border, #e8e8e4);
	border-radius: var(--ggj-radius-md, 10px);
	padding: 1.25rem;
	box-shadow: var(--ggj-shadow-sm);
}

/* カードヘッダー（順位＋製品名） */
.ggj-lp__card-header {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	margin-bottom: 1rem;
	border-bottom: 1px solid var(--ggj-border-light, #f0f0ec);
	padding-bottom: 0.75rem;
}
.ggj-lp__card-num {
	font-size: 2em;
	font-weight: 900;
	color: var(--ggj-text-3, #999);
	white-space: nowrap;
	flex-shrink: 0;
	line-height: 1;
	letter-spacing: -0.04em;
}
.ggj-lp__card-name {
	font-size: 1.1em;
	font-weight: 700;
	margin: 0;
	line-height: 1.4;
}
.ggj-lp__card-name a {
	color: inherit;
	text-decoration: none;
}
.ggj-lp__card-name a:hover { text-decoration: underline; }

/* 上部エリア（画像＋基本情報） */
.ggj-lp__card-top {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin-bottom: 1rem;
}

/* 画像エリア */
.ggj-lp__card-img {
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--ggj-radius-sm, 6px);
	background: #ffffff;
	margin-bottom: 1rem;
}
.ggj-lp__card-img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	background: #ffffff;
}
.ggj-lp__no-img {
	width: 100%;
	aspect-ratio: 16 / 9;
	background: var(--ggj-surface-2, #fafaf8);
	border: 1px solid var(--ggj-border, #e8e8e4);
	border-radius: var(--ggj-radius-sm, 6px);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ggj-text-3, #999);
	font-size: 0.75em;
}

/* 基本情報エリア（maker/weight/tags/price） */
.ggj-lp__card-info {
	min-width: 0;
}

/* 本文エリア */
.ggj-lp__card-body {
	min-width: 0;
}

/* レビュー区切り線 */
.ggj-lp__card-divider {
	border: none;
	border-top: 1px solid var(--ggj-border-light, #f0f0ec);
	margin: 0.75rem 0 1.25rem;
}

.ggj-lp__card-maker {
	font-size: 0.78em;
	color: var(--ggj-text-3, #999);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 600;
	margin: 0 0 0.5rem;
}

/* 重量ヒーロー表示 */
.ggj-lp__weight-hero {
	display: flex;
	align-items: baseline;
	gap: 0.2rem;
	margin-bottom: 0.6rem;
}
.ggj-lp__weight-num {
	font-size: 2.6em;
	font-weight: 900;
	line-height: 1;
	color: var(--ggj-text, #111);
	letter-spacing: -0.03em;
}
.ggj-lp__weight-unit {
	font-size: 1.1em;
	font-weight: 700;
	color: var(--ggj-text-2, #555);
}
.ggj-lp__weight-unknown {
	font-size: 0.9em;
	color: var(--ggj-text-3, #999);
}

/* タグ行（ランク・接続・サイズなど） */
.ggj-lp__card-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin-bottom: 0.5rem;
}
.ggj-lp__tag {
	display: inline-block;
	font-size: 0.78em;
	font-weight: 700;
	padding: 2px 9px;
	border-radius: var(--ggj-radius-pill, 9999px);
	line-height: 1.6;
	background: var(--ggj-surface-2, #f3f4f6);
	border: 1px solid var(--ggj-border, #e8e8e4);
	color: var(--ggj-text-2, #555);
}
/* ランクタグはDBのランクバッジ色を踏襲 */
.ggj-lp__tag--rank-s  { background: var(--ggj-rank-s-bg,  #dc2626); color: #fff; border-color: transparent; }
.ggj-lp__tag--rank-a  { background: var(--ggj-rank-a-bg,  #e07a1a); color: #fff; border-color: transparent; }
.ggj-lp__tag--rank-b  { background: var(--ggj-rank-b-bg,  #0f766e); color: #fff; border-color: transparent; }
.ggj-lp__tag--rank-c  { background: var(--ggj-rank-c-bg,  #1d4ed8); color: #fff; border-color: transparent; }

/* 価格 */
.ggj-lp__card-price {
	font-size: 0.9em;
	color: var(--ggj-text-2, #555);
	margin: 0 0 0.6rem;
}
.ggj-lp__card-price strong {
	color: var(--ggj-red, #dc2626);
	font-size: 1.15em;
}

/* レビュー要約（長め） */
.ggj-lp__card-summary {
	/* font-size はSWELLのbody設定を継承 */
	color: var(--ggj-text-2, #555);
	line-height: 1.7;
	margin: 0 0 1.5rem;
	padding: 0.75rem 1rem;
	background: var(--ggj-accent-light, #fff3e8);
	border: 1px solid var(--ggj-accent-mid, #fde8d0);
	border-radius: var(--ggj-radius-sm, 6px);
}

/* スペック詳細グリッド */
.ggj-lp__spec-section {
	margin-bottom: 0.75rem;
}
.ggj-lp__spec-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.3rem 1rem;
	font-size: 0.875em;
}
@media (min-width: 640px) {
	.ggj-lp__spec-grid { grid-template-columns: repeat(3, 1fr); }
}
.ggj-lp__spec-item {
	display: flex;
	flex-direction: column;
	gap: 1px;
}
.ggj-lp__spec-label {
	font-size: 0.75em;
	font-weight: 700;
	color: var(--ggj-text-3, #999);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.ggj-lp__spec-val {
	font-size: 0.9em;
	font-weight: 600;
	color: var(--ggj-text, #111);
}

/* クリック評価行 */
.ggj-lp__ratings {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 0.75rem;
	font-size: 0.875em;
	margin-bottom: 0.75rem;
	padding: 0.6rem 0.75rem;
	background: var(--ggj-surface-2, #fafaf8);
	border: 1px solid var(--ggj-border-light, #f0f0ec);
	border-radius: var(--ggj-radius-sm, 6px);
}
.ggj-lp__ratings-title {
	font-size: 0.75em;
	font-weight: 700;
	color: var(--ggj-text-3, #999);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	width: 100%;
}
.ggj-lp__rating-item {
	display: flex;
	align-items: center;
	gap: 0.3rem;
}
.ggj-lp__rating-name {
	color: var(--ggj-text-2, #555);
}

/* 良い点・悪い点 */
.ggj-lp__pros-cons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-bottom: 0.5rem;
}
.ggj-lp__pro,
.ggj-lp__con {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.8em;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: var(--ggj-radius-pill, 9999px);
}
.ggj-lp__pro {
	background: #f0fdf4;
	color: #15803d;
	border: 1px solid #bbf7d0;
}
.ggj-lp__con {
	background: #fef2f2;
	color: #b91c1c;
	border: 1px solid #fecaca;
}

/* アクションボタン群 */
.ggj-lp__card-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.5rem;
}

/* ============================================================
   比較表
   ============================================================ */
.ggj-lp__scroll-hint {
	font-size: 0.75em;
	color: var(--ggj-text-3, #999);
	text-align: center;
	margin-bottom: 0.4rem;
}
.ggj-lp__table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--ggj-border, #e8e8e4);
	border-radius: var(--ggj-radius-md, 10px);
	box-shadow: var(--ggj-shadow-sm);
}
.ggj-lp__table {
	width: 100%;
	min-width: 600px;
	border-collapse: collapse;
	font-size: 0.9em;
}
.ggj-lp__table th {
	background: var(--ggj-header-bg, #1e2533);
	color: var(--ggj-header-text, #d4d8e2);
	font-weight: 700;
	padding: 0.55rem 0.75rem;
	text-align: left;
	white-space: nowrap;
	border: none;
}
.ggj-lp__table td {
	padding: 0.5rem 0.75rem;
	border-bottom: 1px solid var(--ggj-border-light, #f0f0ec);
	text-align: left;
	white-space: nowrap;
	color: var(--ggj-text, #111);
}
.ggj-lp__table tbody tr:last-child td { border-bottom: none; }
.ggj-lp__table tbody tr:hover td { background: #fffaf5; }
.ggj-lp__table td a { color: inherit; text-decoration: none; }
.ggj-lp__table td a:hover { text-decoration: underline; }

.ggj-lp__table-maker {
	display: block;
	font-size: 0.75em;
	font-weight: 600;
	color: var(--ggj-text-3, #999);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	line-height: 1.2;
	margin-bottom: 1px;
}

.ggj-lp__rank-cell  { font-weight: 800; text-align: center !important; }
.ggj-lp__table-buy { white-space: nowrap; }
.ggj-lp__table-buy .ggj-btn { display: inline-flex; margin: 0.15rem 0.2rem 0.15rem 0; }
.ggj-lp__rank-s     { color: var(--ggj-rank-s-bg, #dc2626); }
.ggj-lp__rank-a     { color: var(--ggj-rank-a-bg, #e07a1a); }
.ggj-lp__rank-b     { color: var(--ggj-rank-b-bg, #0f766e); }
.ggj-lp__rank-c     { color: var(--ggj-rank-c-bg, #1d4ed8); }

/* ============================================================
   関連ページ
   ============================================================ */
.ggj-lp__related-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.75rem;
}
.ggj-lp__related-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 1rem 1.1rem;
	background: var(--ggj-surface-2, #fafaf8);
	border: 1px solid var(--ggj-border, #e8e8e4);
	border-radius: var(--ggj-radius-md, 10px);
	text-decoration: none;
	color: var(--ggj-text, #111);
	font-weight: 600;
	font-size: 0.9em;
	line-height: 1.4;
	transition: border-color 0.15s, background-color 0.15s, transform 0.15s;
}
.ggj-lp__related-card:hover {
	border-color: var(--ggj-accent, #e07a1a);
	background: #fffaf5;
	transform: translateY(-1px);
}
.ggj-lp__related-card-title {
	flex: 1;
}
.ggj-lp__related-card-arrow {
	flex-shrink: 0;
	font-size: 0.85em;
	color: var(--ggj-accent, #e07a1a);
	opacity: 0.7;
	transition: opacity 0.15s, transform 0.15s;
}
.ggj-lp__related-card:hover .ggj-lp__related-card-arrow {
	opacity: 1;
	transform: translateX(2px);
}
@media (max-width: 640px) {
	.ggj-lp__related-grid {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
   データベースCTA
   ============================================================ */
.ggj-lp__db-cta {
	display: flex;
	justify-content: center;
	margin-top: 2.25rem;
}

.ggj-lp__db-cta .ggj-lp__btn--db {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: min(100%, 420px);
	min-width: 240px;
	padding: 1rem 1.5rem;
	border-radius: 999px;
	border: 1px solid #d7ddd3;
	background: #ffffff;
	color: #18212b;
	font-size: 0.98rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	text-decoration: none;
	box-shadow: 0 12px 26px rgba(15, 23, 42, 0.08);
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.ggj-lp__db-cta .ggj-lp__btn--db:hover,
.ggj-lp__db-cta .ggj-lp__btn--db:focus-visible {
	background: #fff7ee;
	border-color: #e4b06d;
	color: #111827;
	box-shadow: 0 16px 30px rgba(15, 23, 42, 0.12);
	transform: translateY(-1px);
}

.ggj-lp__db-cta .ggj-lp__btn--db:focus-visible {
	outline: 3px solid rgba(230, 148, 35, 0.18);
	outline-offset: 2px;
}

/* ============================================================
   エラー表示
   ============================================================ */
.ggj-lp__error {
	color: var(--ggj-red, #dc2626);
	padding: 1rem;
	background: #fff0f0;
	border-radius: var(--ggj-radius-sm, 6px);
}

/* ============================================================
   PC レイアウト（768px以上）
   ============================================================ */
@media (min-width: 768px) {
	.ggj-lp__card-top {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1.5rem;
		align-items: start;
		margin-bottom: 1.25rem;
	}
	.ggj-lp__card-img {
		margin-bottom: 0;
	}
	.ggj-lp__card-img img,
	.ggj-lp__no-img {
		aspect-ratio: 16 / 9;
	}
	/* 右カラム（基本情報）テキスト拡大 */
	.ggj-lp__card-maker {
		font-size: 0.85em;
	}
	.ggj-lp__weight-num {
		font-size: 3.6em;
	}
	.ggj-lp__weight-unit {
		font-size: 1.4em;
	}
	.ggj-lp__tag {
		font-size: 0.82em;
		padding: 3px 11px;
	}
	.ggj-lp__card-price {
		font-size: 0.95em;
	}
	.ggj-lp__card-price strong {
		font-size: 1.2em;
	}
}

@media (max-width: 767px) {
	.ggj-lp__db-cta .ggj-lp__btn--db {
		width: 100%;
		min-width: 0;
	}
}