/* ==========================================================================
   旬セレ main.css
   ========================================================================== */

:root {
	--ink: #16161D;
	--sub: #4A4A55;
	--line: #16161D;
	--bg: #FFFFFF;
	--paper: #F3F1EC;
	--yellow: #FFD23F;
	--cream: #FFF4D1;
	--mint: #DDF5E4;
	--accent: #FF5A36;
	--radius: 20px;
	--font: 'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
	--display: 'Dela Gothic One', 'Zen Kaku Gothic New', sans-serif;
	--en: 'Outfit', 'Zen Kaku Gothic New', sans-serif;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font);
	font-size: 16px;
	line-height: 1.8;
	overflow-wrap: anywhere;
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

a {
	color: var(--ink);
	text-decoration: none;
}

a:hover {
	opacity: 0.85;
}

:focus-visible {
	outline: 3px solid var(--accent);
	outline-offset: 2px;
}

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

.ss-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--ink);
	color: #fff;
	padding: 8px 16px;
}

.ss-skip:focus {
	left: 8px;
}

.ss-wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding-left: 24px;
	padding-right: 24px;
}

.ss-wrap--narrow {
	max-width: 800px;
}

.ss-num {
	font-family: var(--en);
	font-weight: 800;
}

.ss-icon {
	flex: none;
}

/* ---------- PRバー・ヘッダー ---------- */

.ss-prbar {
	background: var(--ink);
	color: #fff;
	font-size: 12px;
	line-height: 1.6;
	text-align: center;
	padding: 8px 16px;
	letter-spacing: 0.04em;
}

.ss-header {
	background: #fff;
	border-bottom: 3px solid var(--line);
}

.ss-header__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 32px;
	padding-top: 18px;
	padding-bottom: 14px;
}

.ss-logo {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
	line-height: 1;
}

.ss-logo a {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
}

.ss-logo__mark {
	font-family: var(--display);
	font-size: 38px;
	line-height: 1;
	letter-spacing: 0.02em;
}

.ss-logo__accent {
	color: var(--accent);
}

.ss-logo__tagline {
	font-size: 13px;
	font-weight: 700;
	color: var(--sub);
}

.ss-search {
	flex: 1 1 280px;
	display: flex;
	max-width: 420px;
	margin-left: auto;
}

.ss-search__input {
	flex: 1;
	min-width: 0;
	height: 46px;
	border: 2px solid var(--line);
	border-right: 0;
	border-radius: 999px 0 0 999px;
	padding: 0 20px;
	font-size: 15px;
	font-family: inherit;
	background: #fff;
	color: var(--ink);
}

.ss-search__btn {
	width: 56px;
	height: 46px;
	border: 2px solid var(--line);
	border-radius: 0 999px 999px 0;
	background: var(--yellow);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ss-nav__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding-bottom: 14px;
}

.ss-nav__item {
	flex: none;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	padding: 9px 16px;
	border-radius: 999px;
	background: var(--paper);
	white-space: nowrap;
}

/* スマホ：1行で横スクロール（右端をぼかして続きがあると分かるように） */
@media (max-width: 640px) {
	.ss-nav__inner {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-mask-image: linear-gradient(to right, #000 85%, transparent);
		mask-image: linear-gradient(to right, #000 85%, transparent);
		padding-right: 40px;
	}

	.ss-nav__inner::-webkit-scrollbar {
		display: none;
	}

	.ss-nav__item {
		font-size: 13px;
		padding: 8px 14px;
	}
}

.ss-nav__item[aria-current="page"] {
	background: var(--ink);
	color: #fff;
}

.ss-nav__item--sale {
	background: var(--accent);
}

/* ---------- ボタン・タグ ---------- */

.ss-btns {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.ss-btns--center {
	justify-content: center;
}

.ss-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 52px;
	padding: 0 26px;
	border-radius: 999px;
	font-weight: 900;
	font-size: 15px;
	line-height: 1.3;
}

.ss-btn--dark {
	background: var(--ink);
	color: #fff;
	border: 2px solid var(--ink);
}

.ss-btn--white {
	background: #fff;
	border: 2px solid var(--line);
}

.ss-tag-dark {
	display: inline-block;
	font-family: var(--en);
	font-weight: 800;
	font-size: 13px;
	letter-spacing: 0.12em;
	line-height: 1.4;
	background: var(--ink);
	color: #fff;
	padding: 6px 14px;
	border-radius: 999px;
}

.ss-tag-dark--sm {
	font-family: var(--font);
	font-weight: 900;
	font-size: 12px;
	letter-spacing: 0.04em;
	padding: 4px 12px;
}

.ss-tag-white {
	display: inline-block;
	font-weight: 900;
	font-size: 14px;
	line-height: 1.4;
	background: #fff;
	border: 2px solid var(--line);
	padding: 4px 14px;
	border-radius: 999px;
}

.ss-pill {
	display: inline-block;
	font-size: 13px;
	font-weight: 900;
	line-height: 1.4;
	background: var(--tint, var(--paper));
	border: 1.5px solid var(--line);
	padding: 4px 12px;
	border-radius: 999px;
}

.ss-pill--sm {
	font-size: 12px;
	padding: 2px 10px;
}

.ss-badge {
	display: inline-block;
	font-size: 11px;
	font-weight: 900;
	line-height: 1.5;
	border: 1.5px solid var(--line);
	padding: 0 6px;
	border-radius: 4px;
	vertical-align: middle;
}

/* ---------- ヒーロー ---------- */

.ss-hero {
	background: var(--yellow);
	border-bottom: 3px solid var(--line);
	overflow: hidden;
}

.ss-hero__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 48px;
	padding-top: 56px;
	padding-bottom: 64px;
}

.ss-hero__text {
	flex: 1 1 420px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.ss-hero__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.ss-hero__title {
	margin: 0;
	font-family: var(--display);
	font-weight: 400;
	font-size: clamp(42px, 6vw, 76px);
	line-height: 1.15;
}

.ss-hero__lead {
	margin: 0;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.9;
	max-width: 30em;
}

.ss-hero__feature {
	flex: 1 1 440px;
	min-width: 0;
	position: relative;
}

.ss-feature {
	display: block;
	background: #fff;
	border: 3px solid var(--line);
	border-radius: 28px;
	overflow: hidden;
	box-shadow: 10px 10px 0 var(--ink);
}

.ss-feature .ss-thumb {
	border: 0;
	border-bottom: 3px solid var(--line);
	border-radius: 0;
	aspect-ratio: 16 / 9;
}

.ss-feature__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: 22px 26px 26px;
}

.ss-feature__title {
	font-size: 22px;
	font-weight: 900;
	line-height: 1.5;
}

.ss-feature__cat {
	font-size: 13px;
	color: var(--sub);
}

.ss-sticker {
	position: absolute;
	top: -18px;
	right: -6px;
	width: 108px;
	height: 108px;
	border-radius: 999px;
	background: var(--accent);
	border: 3px solid var(--line);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	transform: rotate(12deg);
}

.ss-sticker__kanji {
	font-family: var(--display);
	font-size: 30px;
	line-height: 1;
}

.ss-sticker__en {
	font-size: 12px;
	font-weight: 900;
	line-height: 1;
	margin-top: 6px;
}

/* ---------- セールの帯 ---------- */

.ss-saleband {
	background: var(--accent);
	border-bottom: 3px solid var(--line);
}

.ss-saleband__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 28px;
	padding-top: 22px;
	padding-bottom: 22px;
}

.ss-saleband__label {
	font-family: var(--en);
	font-weight: 800;
	font-size: 15px;
	letter-spacing: 0.14em;
	background: var(--ink);
	color: var(--yellow);
	padding: 8px 16px;
	border-radius: 8px;
	line-height: 1.3;
}

.ss-saleband__name {
	margin: 0;
	font-size: 20px;
	font-weight: 900;
	line-height: 1.5;
}

.ss-saleband__period {
	font-size: 15px;
}

.ss-saleband__text {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
}

.ss-saleband__btn {
	margin-left: auto;
	min-height: 48px;
}

/* ---------- セクション ---------- */

.ss-section {
	padding-top: 72px;
	padding-bottom: 8px;
}

.ss-section:last-child {
	padding-bottom: 72px;
}

.ss-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px 16px;
	margin-bottom: 24px;
}

.ss-head__title {
	margin: 0;
	font-family: var(--display);
	font-weight: 400;
	font-size: clamp(26px, 3.4vw, 34px);
	line-height: 1.35;
}

.ss-head__en {
	font-family: var(--en);
	font-weight: 800;
	font-size: 14px;
	letter-spacing: 0.14em;
	color: var(--sub);
}

.ss-head__pr {
	align-self: center;
	font-family: var(--en);
	font-weight: 800;
	font-size: 12px;
	letter-spacing: 0.08em;
	line-height: 1;
	color: var(--sub);
	border: 1.5px solid var(--sub);
	border-radius: 4px;
	padding: 4px 7px;
}

.ss-head__more {
	margin-left: auto;
	font-size: 14px;
	font-weight: 900;
	border-bottom: 2px solid var(--line);
	line-height: 1.6;
}

.ss-section__note {
	margin: -12px 0 20px;
	font-size: 13px;
	color: var(--sub);
}

.ss-mt {
	margin-top: 40px;
	margin-bottom: 20px;
}

/* ---------- カテゴリー ---------- */

.ss-cats {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 16px;
}

.ss-cat {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 20px;
	border: 2px solid var(--line);
	border-radius: var(--radius);
	background: var(--tint, var(--paper));
	transition: transform 0.15s, box-shadow 0.15s;
}

.ss-cat:hover {
	opacity: 1;
	transform: translate(-3px, -3px);
	box-shadow: 4px 4px 0 var(--ink);
}

.ss-cat__icon {
	width: 56px;
	height: 56px;
	border-radius: 16px;
	background: #fff;
	border: 2px solid var(--line);
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
}

.ss-cat__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.ss-cat__name {
	font-size: 17px;
	font-weight: 900;
	line-height: 1.4;
}

.ss-cat__sub {
	font-size: 13px;
	line-height: 1.5;
	color: var(--sub);
}

/* ---------- 商品タイル（ランキング） ---------- */

.ss-products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 18px;
}

.ss-product {
	position: relative;
	display: flex;
	flex-direction: column;
	border: 2px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	background: #fff;
	transition: transform 0.15s, box-shadow 0.15s;
}

.ss-product:hover {
	opacity: 1;
	transform: translate(-3px, -3px);
	box-shadow: 4px 4px 0 var(--ink);
}

.ss-product__rank {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 1;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background: #fff;
	border: 2px solid var(--line);
	font-family: var(--en);
	font-weight: 800;
	font-size: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ss-product__rank--1 {
	background: var(--yellow);
}

.ss-product__rank--2 {
	background: #E3E3EA;
}

.ss-product__rank--3 {
	background: #FFC9A8;
}

.ss-product__img {
	display: block;
	aspect-ratio: 1 / 1;
	background: #fff;
	border-bottom: 2px solid var(--line);
	padding: 12px;
}

.ss-product__img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.ss-product__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 14px 16px 18px;
}

.ss-product__cat {
	font-size: 12px;
	font-weight: 700;
	color: var(--sub);
}

.ss-product__name {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.55;
}

.ss-product__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 8px;
}

.ss-product__price .ss-num {
	font-size: 22px;
}

.ss-price-label,
.rca-card__label {
	font-family: var(--font);
	font-size: 11px;
	font-weight: 700;
	color: var(--sub);
	margin-right: 4px;
}

.ss-yen {
	font-size: 13px;
	font-weight: 700;
	margin-left: 1px;
}

.ss-product__review {
	font-size: 12px;
	font-weight: 700;
	color: #8A5A00;
}

/* ---------- 季節特集 ---------- */

.ss-features {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 18px;
}

.ss-ftile {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 40px;
	min-height: 220px;
	padding: 28px;
	border: 3px solid var(--line);
	border-radius: 28px;
	transition: transform 0.15s, box-shadow 0.15s;
}

.ss-ftile:hover {
	opacity: 1;
	transform: translate(-3px, -3px);
	box-shadow: 5px 5px 0 var(--ink);
}

.ss-ftile--0 {
	background: var(--ink);
	color: #fff;
}

.ss-ftile--0 .ss-ftile__en {
	color: var(--yellow);
}

.ss-ftile--0 .ss-ftile__desc {
	color: #E3E3EA;
}

.ss-ftile--1 {
	background: var(--accent);
}

.ss-ftile--2 {
	background: var(--mint);
}

.ss-ftile__en {
	font-family: var(--en);
	font-weight: 800;
	font-size: 14px;
	letter-spacing: 0.14em;
}

.ss-ftile__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ss-ftile__title {
	font-size: 26px;
	font-weight: 900;
	line-height: 1.4;
}

.ss-ftile__desc {
	font-size: 14px;
	font-weight: 500;
}

/* ---------- 記事カード ---------- */

.ss-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 32px 22px;
}

.ss-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ss-card__link {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.ss-card__link:hover {
	opacity: 1;
}

.ss-card__link:hover .ss-thumb {
	transform: translate(-3px, -3px);
	box-shadow: 4px 4px 0 var(--ink);
}

.ss-card__title {
	margin: 0;
	font-size: 17px;
	font-weight: 900;
	line-height: 1.6;
}

.ss-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	font-size: 12px;
	color: var(--sub);
}

/* サムネイル（商品画像のコラージュ） */
.ss-thumb {
	position: relative;
	aspect-ratio: 16 / 10;
	border: 2px solid var(--line);
	border-radius: var(--radius);
	background: var(--tint, var(--paper));
	overflow: hidden;
	transition: transform 0.15s, box-shadow 0.15s;
}

.ss-thumb > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ss-thumb--icon {
	display: flex;
	align-items: center;
	justify-content: center;
}

.ss-thumb--collage {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6%;
	padding: 0 7%;
}

.ss-thumb__item {
	flex: 1 1 0;
	max-width: 46%;
	aspect-ratio: 1 / 1;
	background: #fff;
	border: 2px solid var(--line);
	border-radius: 14px;
	padding: 6%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ss-thumb--n3 .ss-thumb__item:nth-child(2) {
	transform: translateY(-8%) scale(1.12);
	z-index: 1;
}

.ss-thumb--n3 .ss-thumb__item:nth-child(1) {
	transform: rotate(-5deg);
}

.ss-thumb--n3 .ss-thumb__item:nth-child(3) {
	transform: rotate(5deg);
}

.ss-thumb__item img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* ---------- 旬セレとは ---------- */

.ss-about {
	border: 3px solid var(--line);
	border-radius: 32px;
	background: var(--cream);
	padding: clamp(28px, 5vw, 56px);
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.ss-about__head {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ss-about__title {
	margin: 0;
	font-family: var(--display);
	font-weight: 400;
	font-size: clamp(24px, 3.4vw, 34px);
	line-height: 1.45;
}

.ss-about__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 18px;
}

.ss-about__item {
	background: #fff;
	border: 2px solid var(--line);
	border-radius: var(--radius);
	padding: 24px;
}

.ss-about__item p {
	margin: 0;
	font-size: 14px;
	line-height: 1.8;
	color: #3A3A44;
}

.ss-about__num {
	font-family: var(--en);
	font-weight: 800;
	font-size: 32px;
	line-height: 1.2;
}

.ss-about__item .ss-about__label {
	font-size: 19px;
	font-weight: 900;
	color: var(--ink);
	margin: 6px 0;
}

/* ---------- SNS・フッター ---------- */

.ss-follow {
	background: var(--accent);
	border-top: 3px solid var(--line);
	border-bottom: 3px solid var(--line);
	margin-top: 80px;
}

.ss-follow__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px 32px;
	padding-top: 44px;
	padding-bottom: 44px;
}

.ss-follow__text {
	flex: 1 1 360px;
}

.ss-follow__text p {
	margin: 0;
	font-size: 15px;
	font-weight: 500;
}

.ss-follow__text .ss-follow__title {
	font-family: var(--display);
	font-size: 28px;
	line-height: 1.4;
	margin-bottom: 6px;
}

.ss-follow__btns {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.ss-footer {
	background: var(--ink);
	color: #fff;
}

.ss-follow + .ss-footer {
	margin-top: 0;
}

.ss-main + .ss-footer {
	margin-top: 80px;
}

.ss-footer__inner {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding-top: 48px;
	padding-bottom: 32px;
}

.ss-footer__brand {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px 20px;
}

.ss-footer__tagline {
	font-size: 13px;
	color: #E3E3EA;
}

.ss-footer__nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 28px;
	font-size: 14px;
}

.ss-footer a {
	color: #fff;
}

.ss-footer__note,
.ss-footer__copy {
	margin: 0;
	font-size: 12px;
	line-height: 1.8;
	color: #C9C9D2;
}

.ss-footer__copy {
	font-family: var(--en);
}

/* ---------- 一覧ページ ---------- */

.ss-archive-head {
	background: var(--tint, var(--cream));
	border-bottom: 3px solid var(--line);
	padding: 20px 0 32px;
}

.ss-archive-head__row {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-top: 16px;
}

.ss-archive-head__icon {
	width: 80px;
	height: 80px;
	border-radius: 24px;
	background: #fff;
	border: 3px solid var(--line);
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
}

.ss-archive-head__title {
	margin: 0;
	font-family: var(--display);
	font-weight: 400;
	font-size: clamp(28px, 4vw, 42px);
	line-height: 1.3;
}

.ss-archive-head__desc {
	margin: 6px 0 0;
	font-size: 14px;
	font-weight: 500;
}

.ss-archive-head__search {
	margin-top: 20px;
	max-width: 520px;
}

.ss-archive-head__search .ss-search {
	max-width: none;
	margin: 0;
}

.ss-subcats {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 22px;
}

.ss-subcats__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #fff;
	border: 2px solid var(--line);
	border-radius: 999px;
	padding: 8px 16px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
}

.ss-subcats__item span {
	font-family: var(--en);
	font-size: 12px;
	background: var(--ink);
	color: #fff;
	border-radius: 999px;
	padding: 0 7px;
}

.ss-crumbs ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	font-size: 12px;
	color: var(--sub);
}

.ss-crumbs li:not(:last-child)::after {
	content: '›';
	margin-left: 6px;
}

.ss-crumbs a {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ss-crumbs [aria-current] {
	display: inline-block;
	max-width: 24em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: bottom;
}

.ss-pager {
	margin-top: 48px;
}

.ss-pager .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.ss-pager .page-numbers {
	min-width: 46px;
	height: 46px;
	padding: 0 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 2px solid var(--line);
	border-radius: 999px;
	font-family: var(--en);
	font-weight: 800;
	background: #fff;
}

.ss-pager .page-numbers.current {
	background: var(--ink);
	color: #fff;
}

.ss-pager .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

.ss-empty {
	padding: 40px;
	border: 2px dashed var(--line);
	border-radius: var(--radius);
	text-align: center;
	font-weight: 700;
}

/* ---------- 記事ページ ---------- */

.ss-article__head {
	background: var(--tint, var(--cream));
	border-bottom: 3px solid var(--line);
	padding: 20px 0 36px;
}

.ss-article__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	margin-top: 20px;
	font-size: 13px;
}

.ss-article__date {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: #3A3A44;
}

.ss-article__title {
	margin: 14px 0 0;
	font-size: clamp(24px, 3.6vw, 34px);
	font-weight: 900;
	line-height: 1.5;
}

.ss-article__lead {
	margin: 14px 0 0;
	font-size: 15px;
	color: #3A3A44;
}

.ss-entry {
	padding-top: 32px;
	font-size: 16px;
	line-height: 1.95;
}

.ss-entry > * + * {
	margin-top: 1.2em;
}

.ss-entry p {
	margin: 0;
}

.ss-entry p + p {
	margin-top: 1em;
}

.ss-entry h2 {
	margin: 64px 0 20px;
	padding: 14px 20px;
	font-size: clamp(20px, 2.6vw, 24px);
	font-weight: 900;
	line-height: 1.5;
	background: var(--ink);
	color: #fff;
	border-radius: 14px;
	scroll-margin-top: 16px;
}

.ss-entry h3 {
	margin: 40px 0 14px;
	padding-bottom: 8px;
	border-bottom: 3px solid var(--line);
	font-size: 19px;
	font-weight: 900;
	line-height: 1.5;
}

.ss-entry ul,
.ss-entry ol {
	padding-left: 1.4em;
}

.ss-entry a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ss-entry table {
	border-collapse: collapse;
	width: 100%;
}

.ss-toc {
	margin: 32px 0;
	border: 2px solid var(--line);
	border-radius: var(--radius);
	background: var(--cream);
	padding: 20px 24px;
}

.ss-toc__title {
	font-weight: 900;
	margin: 0 0 8px;
}

.ss-toc ol {
	margin: 0;
	padding-left: 1.4em;
	font-size: 15px;
}

.ss-toc a {
	text-decoration: none;
}

.ss-toc a:hover {
	text-decoration: underline;
}

.ss-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 48px;
}

.ss-tags a {
	font-size: 13px;
	font-weight: 700;
	background: var(--paper);
	border-radius: 999px;
	padding: 6px 14px;
}

.ss-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 32px;
	padding-top: 24px;
	border-top: 2px solid var(--line);
}

.ss-share__label {
	font-weight: 900;
	font-size: 14px;
	margin-right: 6px;
}

.ss-share__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	padding: 0 18px;
	border: 2px solid var(--line);
	border-radius: 999px;
	font-weight: 900;
	font-size: 14px;
}

/* ---------- 404 ---------- */

.ss-404 {
	text-align: center;
	padding-top: 80px;
}

.ss-404__code {
	margin: 0;
	font-family: var(--en);
	font-weight: 800;
	font-size: 120px;
	line-height: 1;
	color: var(--accent);
	-webkit-text-stroke: 3px var(--ink);
}

.ss-404__title {
	font-size: clamp(22px, 3vw, 30px);
	font-weight: 900;
	line-height: 1.5;
}

.ss-404__search {
	max-width: 480px;
	margin: 28px auto;
}

.ss-404__search .ss-search {
	max-width: none;
	margin: 0;
}

/* ==========================================================================
   商品カード・比較表（自動運用プラグインの出力）
   ========================================================================== */

.ss-entry .rca-pr {
	font-size: 13px;
	color: #3A3A44;
	background: var(--paper);
	border-radius: 10px;
	padding: 10px 14px;
}

.ss-entry .rca-sale-period {
	font-weight: 700;
	background: var(--accent);
	border: 2px solid var(--line);
	border-radius: 12px;
	padding: 12px 16px;
}

.rca-card {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	border: 2px solid var(--line);
	border-radius: var(--radius);
	padding: 20px;
	margin: 20px 0;
	background: #fff;
	box-shadow: 6px 6px 0 var(--ink);
}

.rca-card__img {
	flex: 0 0 170px;
	border: 2px solid var(--line);
	border-radius: 14px;
	padding: 10px;
	background: #fff;
}

.rca-card__img img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	display: block;
}

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

.ss-entry .rca-card p {
	margin: 0;
}

.rca-card__name {
	font-weight: 900;
	line-height: 1.55;
	font-size: 16px;
}

.ss-entry .rca-card__name a {
	text-decoration: none;
}

.ss-entry .rca-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin-top: 8px;
}

.rca-card__price {
	font-family: var(--en);
	font-weight: 800;
	font-size: 26px;
	line-height: 1.2;
}

.rca-card__tag {
	font-size: 11px;
	font-weight: 900;
	border: 1.5px solid var(--line);
	border-radius: 4px;
	padding: 0 6px;
	line-height: 1.6;
}

.rca-card__review {
	font-size: 13px;
	font-weight: 700;
	color: #8A5A00;
}

.ss-entry .rca-card__shop {
	font-size: 12px;
	color: var(--sub);
	margin-top: 6px;
}

.ss-entry .rca-card__soldout {
	font-size: 13px;
	font-weight: 700;
	color: var(--sub);
	margin-top: 8px;
}

.rca-card--soldout .rca-card__img img {
	opacity: 0.45;
}

.rca-btns {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
}

.ss-entry .rca-btn,
.rca-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 22px;
	border: 2px solid var(--line);
	border-radius: 999px;
	font-weight: 900;
	font-size: 14px;
	line-height: 1.3;
	text-decoration: none;
	color: var(--ink);
	background: #fff;
}

.ss-entry .rca-btn--rakuten,
.rca-btn--rakuten {
	background: #BF0000;
	color: #fff;
}

.ss-entry .rca-btn--amazon,
.rca-btn--amazon {
	background: #FF9900;
	color: var(--ink);
}

.ss-entry .rca-btn--yahoo,
.rca-btn--yahoo {
	background: #fff;
	color: var(--ink);
}

.rca-btn--sm {
	min-height: 38px;
	padding: 0 14px;
	font-size: 12px;
	white-space: nowrap;
}

.rca-table-wrap {
	overflow-x: auto;
	border: 2px solid var(--line);
	border-radius: 14px;
	margin: 20px 0;
}

.rca-table {
	width: 100%;
	min-width: 560px;
	border-collapse: collapse;
	font-size: 14px;
	line-height: 1.5;
}

.rca-table th,
.rca-table td {
	padding: 10px 12px;
	border-bottom: 1px solid #D9D6CE;
	vertical-align: middle;
	text-align: left;
}

.rca-table tr:last-child td {
	border-bottom: 0;
}

.rca-table th {
	background: var(--ink);
	color: #fff;
	font-weight: 700;
	font-size: 13px;
}

.rca-table td:nth-child(3) {
	font-family: var(--en);
	font-weight: 800;
	white-space: nowrap;
}

.rca-table td:nth-child(4) {
	white-space: nowrap;
	font-size: 13px;
}

.rca-table__img img {
	width: 60px;
	height: 60px;
	object-fit: contain;
}

.ss-entry .rca-table a {
	text-decoration: none;
}

.ss-entry .rca-choose {
	list-style: none;
	padding: 0;
	display: grid;
	gap: 10px;
	counter-reset: choose;
}

.ss-entry .rca-choose li {
	counter-increment: choose;
	position: relative;
	background: var(--cream);
	border: 2px solid var(--line);
	border-radius: 14px;
	padding: 14px 16px 14px 58px;
}

.ss-entry .rca-choose li::before {
	content: counter(choose);
	position: absolute;
	left: 14px;
	top: 12px;
	width: 32px;
	height: 32px;
	border-radius: 999px;
	background: var(--ink);
	color: #fff;
	font-family: var(--en);
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.ss-entry .rca-points {
	list-style: none;
	background: var(--mint);
	border-radius: 14px;
	padding: 14px 18px;
}

.ss-entry .rca-points li {
	position: relative;
	padding-left: 26px;
}

.ss-entry .rca-points li::before {
	content: '';
	position: absolute;
	left: 2px;
	top: 0.55em;
	width: 14px;
	height: 8px;
	border-left: 3px solid var(--ink);
	border-bottom: 3px solid var(--ink);
	transform: rotate(-45deg);
}

.ss-entry .rca-recommend {
	border: 2px dashed var(--line);
	border-radius: 14px;
	padding: 12px 16px;
}

.ss-entry .rca-note {
	font-size: 12px;
	line-height: 1.8;
	color: var(--sub);
	margin-top: 40px;
}

.rca-list {
	margin: 20px 0;
}

.rca-error {
	color: #B32D2E;
	font-size: 13px;
}


/* ==========================================================================
   ランキングページ
   ========================================================================== */

.ss-ranktabs {
	background: #fff;
	border-bottom: 3px solid var(--line);
	position: sticky;
	top: 0;
	z-index: 10;
}

.ss-ranktabs__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding-top: 14px;
	padding-bottom: 14px;
}

/* スマホ：1行で横スクロール（右端をぼかして続きがあると分かるように） */
@media (max-width: 640px) {
	.ss-ranktabs__inner {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-mask-image: linear-gradient(to right, #000 85%, transparent);
		mask-image: linear-gradient(to right, #000 85%, transparent);
		padding-right: 40px;
	}

	.ss-ranktabs__inner::-webkit-scrollbar {
		display: none;
	}
}

.ss-ranktabs__item {
	flex: none;
	font-size: 14px;
	font-weight: 900;
	line-height: 1.4;
	padding: 10px 18px;
	border: 2px solid var(--line);
	border-radius: 999px;
	background: #fff;
	white-space: nowrap;
}

.ss-ranktabs__item[aria-current="page"] {
	background: var(--ink);
	color: #fff;
}

.ss-subcats--rank {
	margin-top: 20px;
}

.ss-subcats__item[aria-current="page"] {
	background: var(--yellow);
}

.ss-wrap--rank {
	max-width: 960px;
}

.ss-ranklist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
	counter-reset: none;
}

.ss-rank {
	position: relative;
	display: grid;
	grid-template-columns: 80px 200px minmax(0, 1fr);
	gap: 24px;
	align-items: center;
	padding: 24px;
	background: #fff;
	border: 2px solid var(--line);
	border-radius: 24px;
}

.ss-rank--1,
.ss-rank--2,
.ss-rank--3 {
	border-width: 3px;
	box-shadow: 8px 8px 0 var(--ink);
}

.ss-rank--1 {
	background: #FFFBEA;
}

.ss-rank__no {
	display: flex;
	align-items: baseline;
	justify-content: center;
	width: 80px;
	height: 80px;
	border-radius: 999px;
	border: 3px solid var(--line);
	background: #fff;
	padding-top: 14px;
}

.ss-rank--1 .ss-rank__no {
	background: var(--yellow);
}

.ss-rank--2 .ss-rank__no {
	background: #E3E3EA;
}

.ss-rank--3 .ss-rank__no {
	background: #FFC9A8;
}

.ss-rank__num {
	font-family: var(--en);
	font-weight: 800;
	font-size: 38px;
	line-height: 1;
}

.ss-rank__unit {
	font-size: 13px;
	font-weight: 900;
	margin-left: 2px;
}

.ss-rank__img {
	display: block;
	aspect-ratio: 1 / 1;
	border: 2px solid var(--line);
	border-radius: 18px;
	padding: 12px;
	background: #fff;
}

.ss-rank__img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.ss-rank__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.ss-rank__cat {
	align-self: flex-start;
	font-size: 12px;
	font-weight: 900;
	background: var(--paper);
	border-radius: 999px;
	padding: 3px 10px;
}

.ss-rank__name {
	margin: 0;
	font-size: 18px;
	font-weight: 900;
	line-height: 1.55;
}

.ss-rank__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 14px;
}

.ss-rank__price .ss-num {
	font-size: 30px;
}

.ss-rank__review {
	font-size: 15px;
	font-weight: 900;
	color: #8A5A00;
}

.ss-rank__review small {
	font-size: 12px;
	font-weight: 700;
}

.ss-rank__shop {
	margin: 0;
	font-size: 12px;
	color: var(--sub);
}

.ss-rank__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin-top: 6px;
}

.ss-rank__article {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 14px;
	font-weight: 900;
	border-bottom: 2px solid var(--line);
	line-height: 1.6;
}

@media (max-width: 760px) {
	.ss-rank {
		grid-template-columns: 110px minmax(0, 1fr);
		gap: 14px 16px;
		padding: 18px;
		align-items: start;
	}

	.ss-rank__no {
		position: absolute;
		top: -14px;
		left: -10px;
		width: 56px;
		height: 56px;
		padding-top: 10px;
		z-index: 1;
	}

	.ss-rank__num {
		font-size: 26px;
	}

	.ss-rank__name {
		font-size: 15px;
	}

	.ss-rank__price .ss-num {
		font-size: 22px;
	}

	.ss-rank__actions {
		grid-column: 1 / -1;
	}

	.ss-rank__body {
		display: contents;
	}

	.ss-rank__cat,
	.ss-rank__name,
	.ss-rank__meta,
	.ss-rank__shop {
		grid-column: 2;
	}

	.ss-rank__img {
		grid-row: 1 / span 4;
	}

	.ss-rank__actions .rca-btn {
		flex: 1 1 100%;
	}
}

/* ---------- スマホ ---------- */

@media (max-width: 640px) {
	.ss-wrap {
		padding-left: 16px;
		padding-right: 16px;
	}

	.ss-logo__mark {
		font-size: 32px;
	}

	.ss-search {
		flex-basis: 100%;
		max-width: none;
		margin-left: 0;
	}

	.ss-hero__row {
		padding-top: 36px;
		padding-bottom: 48px;
		gap: 40px;
	}

	.ss-hero__feature {
		flex-basis: 100%;
	}

	.ss-sticker {
		width: 84px;
		height: 84px;
		right: -4px;
	}

	.ss-sticker__kanji {
		font-size: 24px;
	}

	.ss-saleband__btn {
		margin-left: 0;
	}

	.ss-section {
		padding-top: 56px;
	}

	.ss-products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.ss-product__body {
		padding: 10px 12px 14px;
	}

	.ss-product__rank {
		width: 36px;
		height: 36px;
		font-size: 16px;
		top: 8px;
		left: 8px;
	}

	.ss-product__price .ss-num {
		font-size: 18px;
	}

	.ss-cards {
		grid-template-columns: 1fr;
	}

	.ss-archive-head__icon {
		width: 60px;
		height: 60px;
		border-radius: 18px;
	}

	.rca-card {
		flex-direction: column;
		align-items: stretch;
		box-shadow: 4px 4px 0 var(--ink);
	}

	.rca-card__img {
		flex-basis: auto;
		width: 60%;
		margin: 0 auto;
	}

	.rca-btns {
		flex-direction: column;
	}

	.rca-btn {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
		scroll-behavior: auto !important;
	}
}