/* =========================================================
 *  商品比較ランキング表 スタイル
 *  すべて .hkr 配下にスコープ（SWELL等と干渉しない）
 * ========================================================= */

.hkr{
	--hkr-ink:#20233a;
	--hkr-sub:#6b7085;
	--hkr-line:#e7e9f2;
	--hkr-surface:#ffffff;
	--hkr-soft:#f5f6fb;
	--hkr-accent:#3b4fd6;
	--hkr-accent-d:#2c3bb0;
	--hkr-gold:#f2b01e;
	--hkr-silver:#9aa3b2;
	--hkr-bronze:#c08457;
	--hkr-star-off:#e3e6ee;

	color:var(--hkr-ink);
	font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP",sans-serif;
	line-height:1.6;
	font-feature-settings:"palt";
}
.hkr *{ box-sizing:border-box; }

/* ---- 見出し ---- */
.hkr__head{
	display:flex; align-items:center; gap:.85rem; flex-wrap:wrap;
	position:relative; margin:0 0 0; padding-bottom:1rem;
}
.hkr__head::after{
	content:""; position:absolute; left:0; bottom:-2px;
	width:96px; height:2px; border-radius:2px;
	background:linear-gradient(90deg,var(--hkr-gold),#ffd97a);
}
.hkr__head-badge{
	flex:none; width:46px; height:46px; border-radius:14px;
	display:flex; align-items:center; justify-content:center;
	background:linear-gradient(135deg,#f7c948,#e2900c);
	color:#fff; font-size:1.35rem; line-height:1;
	box-shadow:0 7px 16px rgba(226,144,12,.38);
	transform:rotate(-6deg);
}
.hkr__head-text{ display:flex; flex-direction:column; min-width:0; }
.hkr__eyebrow{
	font-size:.7rem; font-weight:800; letter-spacing:.24em;
	color:var(--hkr-gold); line-height:1; margin-bottom:.3rem;
}
.hkr__title{
	font-size:clamp(1.25rem,1rem + 1.4vw,1.85rem); font-weight:800;
	letter-spacing:-.02em; line-height:1.25; color:var(--hkr-ink); margin:0;
}
.hkr__count{
	margin-left:auto; flex:none; align-self:center;
	font-size:.76rem; font-weight:700; color:var(--hkr-sub);
	background:var(--hkr-soft); border:1px solid var(--hkr-line);
	padding:.35em .85em; border-radius:999px; white-space:nowrap;
}
@media(max-width:520px){
	.hkr__count{ margin-left:0; }
}

/* ---- 外枠カード（全商品を1つに） ---- */
.hkr__list{
	background:var(--hkr-surface);
	border:1px solid var(--hkr-line);
	border-radius:16px;
	box-shadow:0 2px 8px rgba(32,35,58,.06);
	overflow:hidden;
}

/* ---- 1商品＝行（枠なし、区切り線で分ける） ---- */
.hkr__item{
	padding:1.2rem 1.3rem;
	transition:background-color .15s ease;
}
.hkr__item:hover{ background:var(--hkr-soft); }
.hkr__item + .hkr__item{ border-top:1px solid var(--hkr-line); }

.hkr__row{
	display:grid;
	grid-template-columns:52px 130px minmax(0,1.6fr) minmax(0,1.4fr) minmax(140px,auto);
	grid-template-areas:"rank thumb main rate buy";
	gap:1rem;
	align-items:center;
}

/* ---- 順位メダル ---- */
.hkr__rank{ grid-area:rank; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.hkr__medal{
	width:42px; height:42px; border-radius:50%;
	display:flex; align-items:center; justify-content:center;
	font-weight:800; font-size:1.1rem; color:#fff; background:var(--hkr-sub);
	box-shadow:0 4px 10px rgba(32,35,58,.18);
}
.hkr__rank--1 .hkr__medal{ background:var(--hkr-gold); }
.hkr__rank--2 .hkr__medal{ background:var(--hkr-silver); }
.hkr__rank--3 .hkr__medal{ background:var(--hkr-bronze); }
.hkr__rank small{ font-size:.62rem; color:var(--hkr-sub); margin-top:.2rem; letter-spacing:.08em; }

/* ---- 画像（大きく） ---- */
.hkr__thumb{ grid-area:thumb; }
.hkr__thumb img{ width:130px; height:130px; object-fit:contain; border-radius:14px; background:var(--hkr-soft); display:block; }
.hkr__thumb .hkr__noimg{ width:130px; height:130px; border-radius:14px; background:var(--hkr-soft); display:flex; align-items:center; justify-content:center; color:var(--hkr-sub); font-size:.7rem; }

/* ---- 主情報：名前・発売時期・スコア ---- */
.hkr__main{ grid-area:main; min-width:0; }
.hkr__name{ font-weight:800; font-size:1.05rem; margin:0 0 .15rem; line-height:1.4; }
.hkr__release{ font-size:.76rem; color:var(--hkr-sub); margin:0 0 .5rem; }
.hkr__score{ display:flex; align-items:center; gap:.5rem; }
.hkr__score-num{ font-size:1.5rem; font-weight:800; color:var(--hkr-gold); font-variant-numeric:tabular-nums; line-height:1; }
.hkr__score-wrap .hkr__score-label{ display:block; font-size:.68rem; color:var(--hkr-sub); letter-spacing:.06em; }

/* 星 */
.hkr__stars{ position:relative; display:inline-block; font-size:1rem; line-height:1; letter-spacing:.06em; }
.hkr__stars::before{ content:"★★★★★"; color:var(--hkr-star-off); }
.hkr__stars i{ position:absolute; left:0; top:0; overflow:hidden; white-space:nowrap; color:var(--hkr-gold); }
.hkr__stars i::before{ content:"★★★★★"; }

/* ---- 評価3項目 ---- */
.hkr__rate{ grid-area:rate; min-width:0; display:flex; flex-direction:column; gap:.45rem; }
.hkr__rate-row .hkr__rate-top{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.15rem; }
.hkr__rate-label{ font-size:.75rem; color:var(--hkr-sub); }
.hkr__rate-val{ font-size:.78rem; font-weight:700; font-variant-numeric:tabular-nums; }
.hkr__bar{ height:6px; background:var(--hkr-soft); border-radius:99px; overflow:hidden; }
.hkr__bar i{ display:block; height:100%; background:var(--hkr-accent); border-radius:99px; }

/* ---- 価格＋購入ボタン ---- */
.hkr__buy{ grid-area:buy; text-align:center; }
.hkr__price-label{ display:block; font-size:.68rem; color:var(--hkr-sub); }
.hkr__price{ font-size:1.3rem; font-weight:800; font-variant-numeric:tabular-nums; margin:0 0 .5rem; letter-spacing:-.01em; }
.hkr__price .hkr__yen{ font-size:.72em; font-weight:700; margin-left:.1em; }
.hkr__btn{
	position:relative; overflow:hidden;
	display:inline-block; width:100%; text-align:center; text-decoration:none;
	background:var(--hkr-accent); color:#fff; font-weight:700; font-size:.92rem;
	padding:.7em 1em; border-radius:10px;
	box-shadow:0 4px 14px rgba(59,79,214,.28);
	transition:background-color .2s ease, transform .15s ease, box-shadow .2s ease;
	animation:hkr-pulse 2.2s ease-in-out infinite;
}
.hkr__btn::after{
	content:""; position:absolute; top:0; left:-140%; width:60%; height:100%;
	background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
	transform:skewX(-20deg); animation:hkr-shine 3.2s ease-in-out infinite;
}
.hkr__btn:hover{ background:var(--hkr-accent-d); transform:translateY(-2px); box-shadow:0 8px 22px rgba(59,79,214,.4); color:#fff; animation:none; }
.hkr__btn:hover::after{ animation:none; opacity:0; }
.hkr__btn:active{ transform:translateY(0); }
@keyframes hkr-pulse{
	0%,100%{ box-shadow:0 4px 14px rgba(59,79,214,.28); }
	50%{ box-shadow:0 6px 20px rgba(59,79,214,.5); }
}
@keyframes hkr-shine{
	0%{ left:-140%; }
	55%,100%{ left:140%; }
}

/* ---- 空状態 ---- */
.hkr__empty{ padding:1.5rem; border:1px dashed var(--hkr-line); border-radius:12px; color:var(--hkr-sub); background:var(--hkr-soft); }

/* ---- レビュー（常時表示） ---- */
.hkr__review{ margin-top:.75rem; padding-top:.65rem; border-top:1px dashed var(--hkr-line); }
.hkr__review-body p{ color:var(--hkr-sub); font-size:.9rem; line-height:1.85; margin:0 0 .5rem; }
.hkr__review-body p:last-child{ margin-bottom:0; }

/* ---- モバイル ---- */
@media(max-width:720px){
	.hkr__row{
		grid-template-columns:48px 1fr;
		grid-template-areas:
			"rank thumb"
			"main main"
			"rate rate"
			"buy buy";
		gap:.7rem 1rem;
	}
	.hkr__thumb{ justify-self:start; }
	.hkr__thumb img,.hkr__thumb .hkr__noimg{ width:100px; height:100px; }
	.hkr__buy{ text-align:left; }
	.hkr__btn{ width:auto; padding-left:1.6em; padding-right:1.6em; }
	.hkr__price{ display:inline-block; margin-right:1rem; }
}

/* ---- アクセシビリティ ---- */
.hkr a:focus-visible,.hkr .hkr__btn:focus-visible{ outline:3px solid var(--hkr-accent); outline-offset:3px; }
@media(prefers-reduced-motion:reduce){
	.hkr__item,.hkr__btn{ transition:none; animation:none; }
	.hkr__btn::after{ animation:none; display:none; }
	.hkr__item:hover,.hkr__btn:hover{ transform:none; }
}