/**
 * レビューの見た目（商品ページのレビュー欄・レビュー専用ページ・投稿フォーム）。
 *
 * 動きは transform と opacity だけで作っています。
 * 「視差効果を減らす」設定の方には動かしません。
 */

/* =========================================================
   投稿フォーム（/review/ と 商品ページ）
   ========================================================= */

.sl-review-form,
.sl-review-intro,
.sl-review-items,
.sl-review-notice {
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}

.sl-review-stars {
	position: relative;
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	gap: 6px;
	padding-top: 26px;
}

/* 「満足度」の見出しは、星の上に置く */
.sl-review-stars legend {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	float: none;
	margin: 0;
	padding: 0;
}

/* 星をタップしやすい大きさに */
.sl-review-stars label,
.comment-form-rating select {
	min-height: 48px;
}

.sl-review-stars label {
	min-width: 48px;
	display: grid;
	place-items: center;
	font-size: 34px;
	line-height: 1;
	cursor: pointer;
}

.comment-form-rating select {
	width: 100%;
	max-width: 320px;
	padding: 12px 14px;
	border-radius: 12px;
	border: 1.5px solid rgba(0, 0, 0, 0.14);
	background: #fff;
	font-size: 16px;
}

/* =========================================================
   商品ページのレビュー欄
   ========================================================= */

.sl-prv {
	max-width: 760px;
	margin: 0 auto;
	padding: 0 16px;
	box-sizing: border-box;
}

.sl-prv__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px 16px;
	margin: 0 0 18px;
}

.sl-prv__title {
	margin: 0;
	font-size: 20px;
	font-weight: 800;
}

.sl-prv__score {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 0;
}

.sl-prv__stars,
.sl-rv__stars {
	color: #ff9500;
	letter-spacing: 0.08em;
}

.sl-prv__score b {
	font-size: 20px;
}

.sl-prv__score small {
	font-size: 12px;
	opacity: 0.7;
}

.sl-prv__list {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	display: grid;
	gap: 12px;
}

.sl-prv__card,
.sl-rv__card {
	padding: 16px;
	border-radius: 16px;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	box-shadow: 0 20px 40px -36px rgba(120, 40, 0, 0.5);
}

.sl-prv__card-head,
.sl-rv__card-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
	margin: 0 0 8px;
}

.sl-prv__card-stars,
.sl-rv__card-stars {
	margin: 0;
	color: #ff9500;
	font-size: 17px;
	letter-spacing: 0.06em;
}

.sl-prv__card-meta,
.sl-rv__card-meta {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	font-size: 12px;
	opacity: 0.7;
}

.sl-prv__card-name,
.sl-rv__card-name {
	font-weight: 700;
	opacity: 1;
}

.sl-prv__card-badges,
.sl-rv__card-badges {
	margin: 0 0 8px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.sl-prv__badge,
.sl-rv__badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.06);
	font-size: 11px;
	font-weight: 700;
}

.sl-prv__badge--ok,
.sl-rv__badge--ok {
	background: #e9f6ec;
	color: #1e7b34;
}

.sl-prv__card-body,
.sl-rv__card-body {
	font-size: 14px;
	line-height: 1.9;
}

/* 専用ページは本文をそのまま出すので、改行を活かす */
.sl-rv__card-body {
	white-space: pre-wrap;
}

.sl-prv__card-body p {
	margin: 0 0 8px;
}

.sl-review-pr {
	margin: 0 0 8px;
}

.sl-prv__empty {
	padding: 28px 20px;
	border-radius: 18px;
	background: rgba(0, 0, 0, 0.03);
	text-align: center;
}

.sl-prv__empty-text {
	margin: 0 0 14px;
	font-weight: 700;
}

.sl-prv__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin: 0 0 24px;
}

.sl-prv__btn,
.sl-rv__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 26px;
	border-radius: 999px;
	background: var(--sm-orange, #ff6a13);
	color: #fff;
	font-size: 15px;
	font-weight: 800;
	text-decoration: none;
	border: 0;
	cursor: pointer;
	transition: filter 0.2s ease;
}

.sl-prv__btn:hover,
.sl-rv__btn:hover,
.sl-prv__btn:focus-visible,
.sl-rv__btn:focus-visible {
	filter: brightness(1.08);
	color: #fff;
}

.sl-rv__btn--ghost {
	background: transparent;
	color: var(--sm-ink, #0d0d0d);
	border: 1.5px solid rgba(0, 0, 0, 0.18);
}

.sl-rv__btn--ghost:hover,
.sl-rv__btn--ghost:focus-visible {
	color: var(--sm-ink, #0d0d0d);
	border-color: var(--sm-orange, #ff6a13);
}

.sl-prv__all {
	font-size: 14px;
	font-weight: 700;
	text-decoration: underline;
}

.sl-prv__form {
	margin: 24px 0 0;
	padding: 20px 16px;
	border-radius: 18px;
	background: var(--sm-cream, #fff4ea);
	box-sizing: border-box;
}

/* =========================================================
   マイアカウントの「レビューを書く」
   ========================================================= */

.sl-writecta {
	margin: 24px 0 0;
	padding: 18px 16px;
	border-radius: 18px;
	background: var(--sm-cream, #fff4ea);
	box-sizing: border-box;
}

.sl-writecta__title {
	margin: 0 0 12px;
	font-size: 15px;
	font-weight: 800;
}

.sl-writecta__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.sl-writecta__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 12px 14px;
	border-radius: 14px;
	background: #fff;
}

.sl-writecta__name {
	font-size: 14px;
	font-weight: 700;
}

.sl-writecta__btn {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 18px;
	border-radius: 999px;
	background: var(--sm-ink, #0d0d0d);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}

.sl-writecta__btn:hover,
.sl-writecta__btn:focus-visible {
	background: var(--sm-orange, #ff6a13);
	color: #fff;
}

/* =========================================================
   レビュー専用ページ
   ========================================================= */

.sl-rv {
	max-width: 760px;
	margin: 0 auto;
	padding: 0 16px 120px;
	box-sizing: border-box;
}

.sl-rv__crumbs {
	display: flex;
	gap: 8px;
	margin: 0 0 14px;
	font-size: 12px;
	opacity: 0.7;
}

.sl-rv__head {
	margin: 0 0 20px;
}

.sl-rv__title {
	margin: 0 0 6px;
	font-size: clamp(22px, 5vw, 32px);
	font-weight: 800;
	line-height: 1.35;
}

.sl-rv__lead {
	margin: 0;
	font-size: 14px;
	opacity: 0.75;
}

/* --- 平均と棒グラフ --- */

.sl-rv__summary {
	display: grid;
	gap: 18px;
	margin: 0 0 20px;
	padding: 20px 18px;
	border-radius: 20px;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	box-sizing: border-box;
}

.sl-rv__avg {
	margin: 0;
	font-size: 46px;
	font-weight: 800;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.sl-rv__avg small {
	font-size: 16px;
	opacity: 0.5;
}

.sl-rv__score .sl-rv__stars {
	margin: 6px 0 2px;
	font-size: 20px;
	display: block;
}

.sl-rv__count {
	margin: 0;
	font-size: 13px;
	opacity: 0.7;
}

.sl-rv__bars {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 6px;
}

.sl-rv__bar {
	display: grid;
	grid-template-columns: 34px 1fr 28px;
	align-items: center;
	gap: 8px;
	font-size: 12px;
}

.sl-rv__bar-track {
	display: block;
	height: 8px;
	border-radius: 6px;
	background: rgba(0, 0, 0, 0.08);
	overflow: hidden;
}

.sl-rv__bar-track i {
	display: block;
	height: 100%;
	width: 0;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--sm-orange, #ff6a13), #ff3d00);
	transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.sl-rv__summary.is-in .sl-rv__bar-track i {
	width: var(--sl-w, 0%);
}

.sl-rv__bar-num {
	text-align: right;
	opacity: 0.6;
	font-variant-numeric: tabular-nums;
}

/* --- 並び替え・絞り込み --- */

.sl-rv__tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 16px;
}

.sl-rv__sort {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.sl-rv__chip {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 14px;
	border-radius: 999px;
	background: #fff;
	border: 1.5px solid rgba(0, 0, 0, 0.12);
	color: var(--sm-ink, #0d0d0d);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}

.sl-rv__chip.is-on {
	background: var(--sm-ink, #0d0d0d);
	border-color: transparent;
	color: #fff;
}

.sl-rv__chip--filter {
	margin-left: auto;
}

/* --- レビューのカード --- */

.sl-rv__list {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	display: grid;
	gap: 12px;
}

.sl-rv__card[hidden] {
	display: none;
}

.sl-rv__more {
	margin: 0 0 24px;
	text-align: center;
}

.sl-rv__write {
	margin: 0;
	text-align: center;
}

/* --- 準備中 --- */

.sl-rv__soon {
	padding: 28px 20px;
	border-radius: 20px;
	background: rgba(0, 0, 0, 0.03);
	text-align: center;
}

.sl-rv__soon-title {
	margin: 0 0 8px;
	font-size: 17px;
	font-weight: 800;
}

.sl-rv__soon-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 16px 0 0;
}

.sl-rv__empty {
	padding: 24px;
	border-radius: 16px;
	background: rgba(0, 0, 0, 0.03);
	text-align: center;
}

/* --- 一覧のカード --- */

.sl-rv__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

.sl-rv__gcard-link {
	display: grid;
	grid-template-columns: 92px 1fr;
	gap: 14px;
	align-items: center;
	padding: 14px;
	border-radius: 18px;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	color: inherit;
	text-decoration: none;
}

.sl-rv__gcard-img img {
	width: 92px;
	height: 92px;
	object-fit: cover;
	border-radius: 12px;
	display: block;
}

.sl-rv__gcard-body {
	display: grid;
	gap: 4px;
	min-width: 0;
}

.sl-rv__gcard-name {
	font-size: 15px;
	font-weight: 800;
	line-height: 1.4;
}

.sl-rv__gcard-score {
	display: flex;
	align-items: baseline;
	gap: 6px;
	font-size: 13px;
}

.sl-rv__gcard-last {
	font-size: 12px;
	line-height: 1.7;
	opacity: 0.7;
}

/* --- 画面下の固定CTA --- */

.sl-rv__cta {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 90;
	padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	box-shadow: 0 -10px 30px -20px rgba(0, 0, 0, 0.4);
	transform: translateY(110%);
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.sl-rv__cta[hidden] {
	display: none;
}

.sl-rv__cta.is-in {
	transform: none;
}

.sl-rv__cta-inner {
	max-width: 760px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 12px;
}

.sl-rv__cta-info {
	min-width: 0;
	flex: 1 1 auto;
}

.sl-rv__cta-name {
	margin: 0;
	font-size: 13px;
	font-weight: 800;
	line-height: 1.4;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sl-rv__cta-price {
	margin: 2px 0 0;
	font-size: 13px;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
}

.sl-rv__cta-stock {
	font-size: 11px;
	font-weight: 700;
	color: #c2410c;
}

.sl-rv__cta-btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 20px;
	border-radius: 999px;
	background: var(--sm-orange, #ff6a13);
	color: #fff;
	font-size: 14px;
	font-weight: 800;
	text-decoration: none;
}

.sl-rv__cta-btn:hover,
.sl-rv__cta-btn:focus-visible {
	filter: brightness(1.08);
	color: #fff;
}

.sl-rv__cta-line {
	max-width: 760px;
	margin: 6px auto 0;
	font-size: 11px;
	line-height: 1.6;
	opacity: 0.75;
	text-align: center;
}

/* --- スクロールで出てくる動き --- */

[data-sl-rv-card] {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-sl-rv-card].is-in {
	opacity: 1;
	transform: none;
}

@media (min-width: 768px) {
	.sl-rv__summary {
		grid-template-columns: 200px 1fr;
		align-items: center;
		padding: 26px;
	}

	.sl-rv__grid {
		grid-template-columns: 1fr 1fr;
	}
}

/* --- 動きを控えめにする設定のとき --- */

@media (prefers-reduced-motion: reduce) {
	[data-sl-rv-card],
	.sl-rv__bar-track i,
	.sl-rv__cta {
		transition: none;
	}

	[data-sl-rv-card] {
		opacity: 1;
		transform: none;
	}

	.sl-rv__bar-track i {
		width: var(--sl-w, 0%);
	}

	.sl-rv__cta {
		transform: none;
	}
}

/* レビューのページは、固定ヘッダーの下から始める */
body.sl-reviews-page .sm-main {
	padding-top: var(--sm-hh, 108px);
}

/* テーマのリンク色（オレンジ）に負けないよう、ボタンの文字色を強く指定する */
a.sl-prv__btn,
a.sl-rv__btn,
a.sl-rv__cta-btn,
a.sl-writecta__btn,
button.sl-rv__btn {
	color: #fff !important;
}

a.sl-rv__btn--ghost,
button.sl-rv__btn--ghost {
	color: var(--sm-ink, #0d0d0d) !important;
}

a.sl-rv__btn:hover,
a.sl-rv__btn:focus-visible,
a.sl-prv__btn:hover,
a.sl-prv__btn:focus-visible,
a.sl-rv__cta-btn:hover,
a.sl-rv__cta-btn:focus-visible,
a.sl-writecta__btn:hover,
a.sl-writecta__btn:focus-visible {
	color: #fff;
}

a.sl-rv__btn--ghost:hover,
a.sl-rv__btn--ghost:focus-visible {
	color: var(--sm-ink, #0d0d0d);
}

a.sl-rv__chip,
a.sl-rv__chip:hover {
	color: var(--sm-ink, #0d0d0d);
}

a.sl-rv__chip.is-on,
a.sl-rv__chip.is-on:hover {
	color: #fff;
}

a.sl-rv__gcard-link,
a.sl-rv__gcard-link:hover {
	color: var(--sm-ink, #0d0d0d) !important;
}

a.sl-rv__gcard-link .sl-rv__gcard-last {
	color: var(--sm-gray, #6b625b) !important;
}

a.sl-rv__chip,
a.sl-rv__chip:hover {
	color: var(--sm-ink, #0d0d0d) !important;
}

a.sl-rv__chip.is-on,
a.sl-rv__chip.is-on:hover {
	color: #fff !important;
}

/* --- 追跡番号（マイアカウントの注文詳細）2026-10-05 --- */
.sl-tracking{
	margin:0 0 20px;padding:16px 18px;border-radius:16px;
	background:var(--sm-cream,#fff4ea);border:1.5px solid var(--sm-orange,#ff6a13);
	box-sizing:border-box;
}
.sl-tracking__label{margin:0;font-size:11px;letter-spacing:.06em;color:var(--sm-gray,#6b625b)}
.sl-tracking__number{
	margin:4px 0 10px;font-size:22px;font-weight:800;letter-spacing:.04em;
	color:var(--sm-ink,#0d0d0d);word-break:break-all;
}
a.sl-tracking__link{
	display:inline-flex;align-items:center;min-height:44px;padding:0 20px;
	border-radius:999px;background:var(--sm-ink,#0d0d0d);
	color:#fff !important;font-size:14px;font-weight:700;text-decoration:none;
}
a.sl-tracking__link:hover,a.sl-tracking__link:focus-visible{
	background:var(--sm-orange,#ff6a13);color:#fff !important;
}