/* ============================================================
 * renew.css — デザインリニューアルの共通の土台（2026-10-23）
 *
 * ねらい：余白と写真を主役にし、装飾を減らす。
 *   ・ベースは白・黒・グレー。オレンジは「押す所」と「価格」だけ
 *   ・日本語の見出しは本文フォントの Bold（Archivo Black は英字の短い語だけ）
 *   ・角丸は 4px（カード）と 999px（ボタン）だけ。影は原則なし
 *
 * この1枚を外せば元の見た目に戻ります（既存のCSSは書き換えていません）。
 * ============================================================ */

/* ------------------------------------------------------------
 * 1. 色・寸法の定義
 * ---------------------------------------------------------- */
:root {
	/* ベース */
	--sm-cream: #ffffff;        /* もとは #fff4ea。面はすべて白に */
	--sm-ink: #111111;          /* もとは #0d0d0d */
	--sm-gray: #6b6b6b;         /* もとは #6b625b（茶色寄り）*/
	--sm-radius: 4px;           /* もとは 28px */

	/* 追加のトークン */
	--sm-surface: #f7f7f5;      /* 面（カードの地） */
	--sm-line: #e5e3e0;         /* 区切り線 */
	--sm-photo: #fdf6ee;        /* 商品写真の背景に合わせた面 */
	--sm-black: #0d0d0d;        /* ブランドストーリーの1ブロックだけ */

	/* 余白 */
	--sm-sec: 120px;            /* セクションの上下（PC） */
	--sm-gap: 24px;
	--sm-wrap: 1120px;          /* もとは 1240px */
}

@media (max-width: 989px) {
	:root { --sm-sec: 88px; }
}

@media (max-width: 640px) {
	:root { --sm-sec: 72px; }
}

/* ------------------------------------------------------------
 * 2. 文字
 *    日本語に Archivo Black（900）が乗ると、端末フォントでは
 *    ただ太いだけの見出しになるため、本文フォントの Bold にする。
 * ---------------------------------------------------------- */
.sm .sm-h {
	font-family: var(--sm-body);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0;
}

.sm .sm-h--xl { font-size: 40px; line-height: 1.25; }
.sm .sm-h--lg { font-size: 32px; }
.sm .sm-h--md { font-size: 24px; }

@media (max-width: 640px) {
	.sm .sm-h--xl { font-size: 28px; }
	.sm .sm-h--lg { font-size: 22px; }
	.sm .sm-h--md { font-size: 19px; }
}

.sm .sm-p {
	font-size: 16px;
	line-height: 1.9;
	color: var(--sm-gray);
}

@media (max-width: 640px) {
	.sm .sm-p { font-size: 15px; }
}

/* 英字の小見出しだけは Archivo Black を残す（ブランドの印象） */
.sm .sm-eyebrow {
	font-family: var(--sm-display);
	font-size: 11px;
	letter-spacing: .16em;
	color: var(--sm-gray);
}

.sm .sm-eyebrow::before {
	animation: none;          /* 点滅をやめる */
	box-shadow: none;
	width: 6px;
	height: 6px;
}

/* グラデーションの文字は使わない（読みにくいため） */
.sm .sm-grad {
	background: none;
	-webkit-background-clip: border-box;
	background-clip: border-box;
	color: var(--sm-ink);
}

/* ------------------------------------------------------------
 * 3. 幅と余白
 * ---------------------------------------------------------- */
.sm .sm-wrap { width: min(var(--sm-wrap), 100% - 32px); }

/* セクションは <section class="sm sm-story"> のように並列で付くため、
   セクション単位の指定は .sm.sm-story（くっつける）形で書く。 */
.sm.sm-benefits,
.sm.sm-cats,
.sm.sm-products,
.sm.sm-ingr,
.sm.sm-faq,
.sm.sm-gallery,
.sm.sm-news,
.sm.sm-perks,
.sm.sm-signup,
.sm.sm-story { padding: var(--sm-sec) 0; }

/* ------------------------------------------------------------
 * 4. 角丸と影
 * ---------------------------------------------------------- */
.sm .sm-card,
.sm .sm-pcard__img,
.sm .sm-story__media,
.sm .sm-slide,
.sm .sm-cat,
.sm .sm-bcard,
.sm .sm-ingr__item,
.sm .sm-bundle__banner,
.sm .sm-hero__product {
	border-radius: var(--sm-radius);
	box-shadow: none;
}

.sm .sm-card {
	background: #fff;
	border: 1px solid var(--sm-line);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	padding: 32px 28px;
}

.sm .sm-card__icon {
	background: var(--sm-surface);
	box-shadow: none;
	border-radius: var(--sm-radius);
	width: 48px;
	height: 48px;
}

.sm .sm-card__icon svg { fill: var(--sm-ink); }

.sm .sm-card h3 {
	font-family: var(--sm-body);
	font-weight: 700;
	font-size: 18px;
}

/* ------------------------------------------------------------
 * 5. 装飾を止める
 *    回る光線・光の玉・巨大な透かし文字・傾いたテロップ・
 *    浮遊する球とリング・3Dの傾きと光沢
 * ---------------------------------------------------------- */
.sm .sm-hero__rays,
.sm .sm-hero__glow,
.sm .sm-hero__word,
.sm .sm-hero__shadow,
.sm .sm-hero__scroll,
.sm .sm-ingr__orb,
.sm .sm-ingr__ring,
.sm .sm-glare,
.sm canvas.sm-three { display: none !important; }

.sm.sm-hero {
	background: #fff;
	min-height: 0;
	padding: calc(var(--sm-hh, 110px) + 40px) 0 var(--sm-sec);
	perspective: none;
}

.sm .sm-hero__product {
	animation: none;
	inset: 0;
	background: var(--sm-photo);
}

.sm .sm-hero__chip {
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	background: #fff;
	border: 1px solid var(--sm-line);
	box-shadow: none;
	transform: none;
	font-family: var(--sm-body);
	font-weight: 700;
	letter-spacing: 0;
}

.sm .sm-hero__stage { transform-style: flat; }

/* 傾いた流れるテロップは出さない */
.sm .sm-marquee { display: none !important; }
.sm.sm-marquee-wrap { display: none !important; }

/* ヘッダーの上を流れるお知らせの帯も出さない。
   （発送や送料の案内は、ヒーローの下に読みやすく置き直す）
   高さは pages.js が測り直すため、ずれは起きない。 */
.sm-head__bar { display: none !important; }

/* 3Dの傾き */
.sm [data-tilt] { transform: none !important; transform-style: flat; }
.sm [data-tilt] .sm-pop { transform: none; }

/* 画面に入るときの動きは、控えめな上下だけにする */
.sm [data-reveal] { transform: translateY(16px); transition-duration: .5s; }
.sm [data-reveal].is-in { transform: none; }

/* ------------------------------------------------------------
 * 6. ボタン
 * ---------------------------------------------------------- */
.sm .sm-btn {
	font-family: var(--sm-body);
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0;
	padding: 16px 28px;
	box-shadow: none;
	background: var(--sm-orange);
	color: #fff !important;
	transition: opacity .2s;
}

.sm .sm-btn::before { display: none; }

.sm .sm-btn:hover {
	transform: none;
	box-shadow: none;
	opacity: .85;
}

.sm .sm-btn--light {
	background: #fff;
	color: var(--sm-ink) !important;
	border: 1px solid var(--sm-ink);
}

.sm .sm-btn--light:hover { color: var(--sm-ink) !important; background: var(--sm-surface); }

/* ------------------------------------------------------------
 * 7. セクションの地色
 *    白を基本にし、交互に薄いグレーを挟んで区切る。
 *    ブランドストーリーだけ黒のまま。
 * ---------------------------------------------------------- */
.sm.sm-benefits,
.sm.sm-ingr,
.sm.sm-faq,
.sm.sm-signup { background: #fff; }

.sm.sm-cats,
.sm.sm-products { background: var(--sm-surface); }

.sm.sm-bundle { background: #fff; }

/* 黒のまま残すのは、ブランドストーリーと写真のギャラリーだけ */
.sm.sm-story,
.sm.sm-gallery,
.sm.sm-news { background: var(--sm-black); }

/* 特典の帯は黒をやめて白に（黒が続くと重くなるため） */
.sm.sm-perks { background: #fff; }
.sm.sm-perks .sm-p { color: var(--sm-gray); }
.sm.sm-perks .sm-h { color: var(--sm-ink); }

/* オレンジの光のにじみを消す */
.sm.sm-story::before,
.sm.sm-news::before,
.sm.sm-perks::before { display: none !important; }

/* ------------------------------------------------------------
 * 8. 写真を置く面
 *    商品写真の背景は #FDF6EE（わずかに暖かい白）。
 *    真っ白の上に置くと四角が浮くため、置く面をその色に合わせる。
 * ---------------------------------------------------------- */
.sm .sm-pcard__img,
.sm .sm-bcard .sm-media,
.sm .sm-ingr__img { background: var(--sm-photo); }

.sm .sm-pcard__img img { transition: none; }
.sm .sm-pcard:hover .sm-pcard__img img { transform: none; }

.sm .sm-pcard__cta { display: none; }   /* ホバーで出る丸いボタンは使わない */

.sm .sm-pcard__title {
	font-size: 16px;
	line-height: 1.6;
}

.sm .sm-pcard__price {
	font-family: var(--sm-body);
	font-weight: 700;
	font-size: 17px;
	color: var(--sm-ink);
}

.sm .sm-pcard__badge {
	font-family: var(--sm-body);
	font-weight: 700;
	letter-spacing: 0;
	border-radius: 2px;
}

/* 画像のプレースホルダー（写真が無いところ）は無地のグレーに */
.sm .sm-ph {
	background: var(--sm-surface);
	color: #9a9a9a;
	font-family: var(--sm-body);
	font-size: 12px;
	letter-spacing: 0;
	border: 1px dashed var(--sm-line);
}

.sm .sm-ph svg { opacity: .18; }

/* ------------------------------------------------------------
 * 9. こまかい調整
 * ---------------------------------------------------------- */
.sm .sm-stat b {
	font-family: var(--sm-body);
	font-weight: 700;
	font-size: 28px;
}

.sm .sm-faq summary { font-size: 16px; padding: 22px 0; }
.sm .sm-faq__plus { background: var(--sm-surface); border-radius: var(--sm-radius); }
.sm .sm-faq details[open] .sm-faq__plus { background: var(--sm-orange); }
.sm .sm-faq__plus::before,
.sm .sm-faq__plus::after { background: var(--sm-ink); }
.sm .sm-faq details[open] .sm-faq__plus::before,
.sm .sm-faq details[open] .sm-faq__plus::after { background: #fff; }

.sm .sm-cat::after { background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, .6)); }
.sm .sm-cat__label {
	font-family: var(--sm-body);
	font-weight: 700;
	letter-spacing: 0;
	border-radius: 2px;
}
.sm .sm-cat__arrow { box-shadow: none; }
.sm .sm-cat:hover .sm-cat__arrow { transform: none; }

.sm .sm-gallery__nav button { border-radius: var(--sm-radius); }

/* 動きを減らす設定のときは、そもそも動かさない（既存の指定を保つ） */
@media (prefers-reduced-motion: reduce) {
	.sm [data-reveal] { transform: none; }
}

/* ============================================================
 * 新しいトップのセクション（renew/ のテンプレート用）
 *   接頭辞 slr-（samurai launch renew）
 * ============================================================ */

/* ------------------------------------------------------------
 * ヒーロー
 * ---------------------------------------------------------- */
.sm.slr-hero { padding: calc(var(--sm-hh, 110px) + 48px) 0 var(--sm-sec); }

/* 秋セールの帯が上にあるときは、帯の側が固定ヘッダーぶんの余白を持っているため、
   ヒーロー側で二重に空けない。 */
.sl-autumn-band + .sm.slr-hero { padding-top: 48px; }

.slr-hero__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}

.slr-hero__copy { display: grid; gap: 18px; }

.slr-hero__eyebrow {
	margin: 0;
	font-size: 12px;
	letter-spacing: .04em;
	color: var(--sm-gray);
}

.slr-hero__title {
	margin: 0;
	font-family: var(--sm-body);
	font-weight: 700;
	font-size: 40px;
	line-height: 1.3;
	color: var(--sm-ink);
}

.slr-hero__title-sub {
	display: inline-block;
	margin-top: 6px;
	font-family: var(--sm-display);
	font-size: 22px;
	letter-spacing: .04em;
	color: var(--sm-gray);
}

.slr-hero__lead {
	margin: 0;
	font-size: 16px;
	line-height: 1.9;
	color: var(--sm-gray);
}

.slr-hero__prices {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 28px;
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
}

.slr-hero__prices li {
	display: flex;
	align-items: baseline;
	gap: 10px;
}

.slr-hero__vol {
	font-size: 13px;
	color: var(--sm-gray);
	padding: 3px 8px;
	border: 1px solid var(--sm-line);
	border-radius: 2px;
}

.slr-hero__prices li.is-default .slr-hero__vol {
	border-color: var(--sm-ink);
	color: var(--sm-ink);
}

.slr-hero__yen,
.slr-hero__yen .woocommerce-Price-amount {
	font-weight: 700;
	font-size: 22px;
	color: var(--sm-ink);
}

.slr-hero__prices li.is-default .slr-hero__yen .woocommerce-Price-amount { color: var(--sm-orange); }

.slr-hero__tax {
	margin: -8px 0 0;
	font-size: 12px;
	color: var(--sm-gray);
}

.slr-hero__cta {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	margin-top: 4px;
}

.slr-hero__buy { padding: 17px 32px; font-size: 16px; }

.slr-hero__detail {
	color: var(--sm-ink) !important;
	font-size: 14px;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.slr-hero__trust {
	display: grid;
	gap: 6px;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
	font-size: 13px;
	color: var(--sm-gray);
}

.slr-hero__trust li { padding-left: 18px; position: relative; }

.slr-hero__trust li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .55em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--sm-orange);
}

/* 写真は、写真の背景色に合わせた面に置く（真っ白の上だと四角が浮くため） */
.slr-hero__media {
	background: var(--sm-photo);
	border-radius: var(--sm-radius);
	overflow: hidden;
}

.slr-hero__media img,
.slr-hero__img {
	display: block;
	width: 100%;
	height: auto;
}

@media (max-width: 989px) {
	.slr-hero__grid { grid-template-columns: 1fr; }
	.slr-hero__media { order: -1; }
	.slr-hero__title { font-size: 30px; }
}

@media (max-width: 640px) {
	.sm.slr-hero { padding-top: calc(var(--sm-hh, 102px) + 24px); }
	.sl-autumn-band + .sm.slr-hero { padding-top: 24px; }
	/* 「510規格 CBDカートリッジ」が1行に収まる大きさにする（375pxで確認） */
	.slr-hero__title { font-size: 23px; }
	.slr-hero__title-sub { font-size: 17px; }
	.slr-hero__buy { width: 100%; justify-content: center; }
	.slr-hero__cta { gap: 14px; }
	.slr-hero__prices { gap: 8px 20px; }
	.slr-hero__yen,
	.slr-hero__yen .woocommerce-Price-amount { font-size: 20px; }
}

/* ------------------------------------------------------------
 * 公式LINEの帯
 * ---------------------------------------------------------- */
.sm.slr-line {
	background: var(--sm-surface);
	border-top: 1px solid var(--sm-line);
	border-bottom: 1px solid var(--sm-line);
	padding: 32px 0;
}

.slr-line__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	flex-wrap: wrap;
}

.slr-line__copy { display: grid; gap: 8px; }

.slr-line__badge {
	margin: 0;
	display: inline-block;
	justify-self: start;
	padding: 3px 10px;
	border-radius: 2px;
	background: #06c755;          /* LINE の色。ボタンと帯の目印だけに使う */
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
}

.slr-line__title {
	margin: 0;
	font-family: var(--sm-body);
	font-weight: 700;
	font-size: 24px;
	line-height: 1.4;
	color: var(--sm-ink);
}

.slr-line__title strong {
	margin-left: 8px;
	color: var(--sm-orange);
	font-size: 30px;
}

.slr-line__note {
	margin: 0;
	font-size: 14px;
	color: var(--sm-gray);
}

.slr-line__terms {
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 3px;
	font-size: 12px;
	line-height: 1.7;
	color: var(--sm-gray);
}

.slr-line__terms li { padding-left: 14px; position: relative; }
.slr-line__terms li::before { content: "・"; position: absolute; left: 0; }

.slr-line__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 16px 30px;
	border-radius: 999px;
	background: #06c755;
	color: #fff !important;
	font-weight: 700;
	font-size: 16px;
	text-decoration: none;
	white-space: nowrap;
	transition: opacity .2s;
}

.slr-line__btn:hover { opacity: .85; }
.slr-line__btn svg { width: 20px; height: 20px; fill: currentColor; }

@media (max-width: 760px) {
	.slr-line__inner { flex-direction: column; align-items: stretch; }
	.slr-line__title { font-size: 20px; }
	.slr-line__title strong { font-size: 26px; }
	.slr-line__btn { justify-content: center; }
}

/* ------------------------------------------------------------
 * 販売中の商品
 * ---------------------------------------------------------- */
.sm.slr-products { background: #fff; padding: var(--sm-sec) 0; }

.slr-products__head {
	display: grid;
	gap: 10px;
	margin-bottom: 40px;
}

.slr-products__title {
	margin: 0;
	font-family: var(--sm-body);
	font-weight: 700;
	font-size: 28px;
	color: var(--sm-ink);
}

.slr-products__lead {
	margin: 0;
	font-size: 15px;
	line-height: 1.9;
	color: var(--sm-gray);
}

.slr-products__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.slr-card { display: flex; }

.slr-card__link {
	display: flex;
	flex-direction: column;
	gap: 14px;
	width: 100%;
	text-decoration: none;
	color: var(--sm-ink) !important;
}

.slr-card__media {
	display: block;
	background: var(--sm-photo);
	border-radius: var(--sm-radius);
	overflow: hidden;
	aspect-ratio: 1;
}

.slr-card__media img,
.slr-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.slr-card__body { display: grid; gap: 6px; }

.slr-card__name {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.6;
}

.slr-card__note {
	font-size: 12px;
	color: var(--sm-gray);
	justify-self: start;
	padding: 2px 8px;
	border: 1px solid var(--sm-line);
	border-radius: 2px;
}

.slr-card__price,
.slr-card__price .woocommerce-Price-amount {
	font-size: 18px;
	font-weight: 700;
	color: var(--sm-ink);
}

.slr-card__stock { font-size: 12px; color: var(--sm-orange); font-weight: 700; }

.slr-card__more {
	margin-top: 2px;
	font-size: 13px;
	color: var(--sm-gray);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.slr-card__link:hover .slr-card__more { color: var(--sm-orange); }

.slr-products__legal {
	margin: 32px 0 0;
	font-size: 12px;
	line-height: 1.8;
	color: var(--sm-gray);
}

@media (max-width: 989px) {
	.slr-products__grid { grid-template-columns: repeat(2, 1fr); }
	.slr-products__title { font-size: 22px; }
}

@media (max-width: 420px) {
	.slr-products__grid { gap: 16px; }
}

/* ------------------------------------------------------------
 * はじめての方へ（3ステップ）
 * ---------------------------------------------------------- */
.sm.slr-steps { background: var(--sm-surface); padding: var(--sm-sec) 0; }

.slr-steps__head { display: grid; gap: 10px; margin-bottom: 40px; }

.slr-steps__title {
	margin: 0;
	font-family: var(--sm-body);
	font-weight: 700;
	font-size: 28px;
	color: var(--sm-ink);
}

.slr-steps__lead { margin: 0; font-size: 15px; line-height: 1.9; color: var(--sm-gray); }

.slr-steps__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.slr-step {
	background: #fff;
	border: 1px solid var(--sm-line);
	border-radius: var(--sm-radius);
	padding: 28px 24px;
	display: grid;
	gap: 10px;
	align-content: start;
}

.slr-step__num {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 999px;
	background: var(--sm-ink);
	color: #fff;
	font-weight: 700;
	font-size: 14px;
}

.slr-step__title { margin: 0; font-family: var(--sm-body); font-weight: 700; font-size: 18px; }
.slr-step__text { margin: 0; font-size: 14px; line-height: 1.9; color: var(--sm-gray); }

.slr-steps__cta { margin: 28px 0 0; font-size: 15px; }
.slr-steps__cta a { color: var(--sm-ink) !important; text-decoration: underline; text-underline-offset: 4px; }
.slr-steps__cta a:hover { color: var(--sm-orange) !important; }

@media (max-width: 989px) {
	.slr-steps__list { grid-template-columns: 1fr; }
	.slr-steps__title { font-size: 22px; }
}

/* ------------------------------------------------------------
 * 第三者機関による分析
 * ---------------------------------------------------------- */
.sm.slr-quality { background: #fff; padding: var(--sm-sec) 0; }

.slr-quality__grid {
	display: grid;
	grid-template-columns: 1fr .9fr;
	gap: clamp(32px, 5vw, 72px);
	align-items: start;
}

.slr-quality__copy { display: grid; gap: 16px; }

.slr-quality__title {
	margin: 0;
	font-family: var(--sm-body);
	font-weight: 700;
	font-size: 28px;
	color: var(--sm-ink);
}

.slr-quality__lead { margin: 0; font-size: 15px; line-height: 1.9; color: var(--sm-gray); }

.slr-quality__list { margin: 4px 0 0; display: grid; }

.slr-quality__row {
	display: grid;
	grid-template-columns: 11em 1fr;
	gap: 16px;
	padding: 12px 0;
	border-top: 1px solid var(--sm-line);
	font-size: 14px;
}

.slr-quality__row:last-child { border-bottom: 1px solid var(--sm-line); }
.slr-quality__row dt { margin: 0; color: var(--sm-gray); }
.slr-quality__row dd { margin: 0; color: var(--sm-ink); font-weight: 700; }
.slr-quality__row.is-mark dd { color: var(--sm-orange); }

.slr-quality__note { margin: 0; font-size: 12px; line-height: 1.8; color: var(--sm-gray); }

.slr-quality__link { margin: 4px 0 0; font-size: 15px; }
.slr-quality__link a { color: var(--sm-ink) !important; text-decoration: underline; text-underline-offset: 4px; }
.slr-quality__link a:hover { color: var(--sm-orange) !important; }

.slr-quality__media {
	background: #fff;
	border: 1px solid var(--sm-line);
	border-radius: var(--sm-radius);
	overflow: hidden;
	padding: 12px;
}

.slr-quality__media img,
.slr-quality__img { display: block; width: 100%; height: auto; }
.slr-quality__media .sm-ph { display: grid; aspect-ratio: 3/4; }

@media (max-width: 989px) {
	.slr-quality__grid { grid-template-columns: 1fr; }
	.slr-quality__title { font-size: 22px; }
	.slr-quality__row { grid-template-columns: 8.5em 1fr; gap: 12px; }
}

/* ------------------------------------------------------------
 * 価格とセット割
 * ---------------------------------------------------------- */
.sm.slr-pricing { background: var(--sm-surface); padding: var(--sm-sec) 0; }

.slr-pricing__head { display: grid; gap: 10px; margin-bottom: 36px; }

.slr-pricing__title {
	margin: 0;
	font-family: var(--sm-body);
	font-weight: 700;
	font-size: 28px;
	color: var(--sm-ink);
}

.slr-pricing__lead { margin: 0; font-size: 15px; line-height: 1.9; color: var(--sm-gray); }

.slr-pricing__tables {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}

.slr-pricing__table {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
	border: 1px solid var(--sm-line);
	border-radius: var(--sm-radius);
	overflow: hidden;
	font-size: 15px;
}

.slr-pricing__table caption {
	caption-side: top;
	text-align: left;
	padding: 16px 20px 12px;
	font-weight: 700;
	color: var(--sm-ink);
	background: #fff;
	border-bottom: 1px solid var(--sm-line);
}

.slr-pricing__table th,
.slr-pricing__table td {
	padding: 12px 20px;
	text-align: left;
	border-top: 1px solid var(--sm-line);
}

.slr-pricing__table thead th {
	border-top: 0;
	font-size: 12px;
	font-weight: 700;
	color: var(--sm-gray);
	background: var(--sm-surface);
}

.slr-pricing__table tbody th { font-weight: 700; color: var(--sm-ink); white-space: nowrap; }
.slr-pricing__table tbody td { color: var(--sm-gray); }

.slr-pricing__yen,
.slr-pricing__yen .woocommerce-Price-amount {
	text-align: right;
	font-weight: 700;
	color: var(--sm-ink) !important;
	white-space: nowrap;
}

.slr-pricing__table tr.is-sale td { color: var(--sm-orange); }
.slr-pricing__table tr.is-sale .slr-pricing__yen .woocommerce-Price-amount { color: var(--sm-orange) !important; }

.slr-pricing__notes {
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 6px;
	font-size: 12px;
	line-height: 1.8;
	color: var(--sm-gray);
}

.slr-pricing__notes li { padding-left: 14px; position: relative; }
.slr-pricing__notes li::before { content: "・"; position: absolute; left: 0; }

@media (max-width: 760px) {
	.slr-pricing__tables { grid-template-columns: 1fr; }
	.slr-pricing__title { font-size: 22px; }
	.slr-pricing__table th,
	.slr-pricing__table td { padding: 11px 14px; }
}

/* ------------------------------------------------------------
 * 使った人の声
 * ---------------------------------------------------------- */
.sm.slr-voices { background: #fff; padding: var(--sm-sec) 0; }

.slr-voices__head { display: grid; gap: 10px; margin-bottom: 36px; }

.slr-voices__title {
	margin: 0;
	font-family: var(--sm-body);
	font-weight: 700;
	font-size: 28px;
	color: var(--sm-ink);
}

.slr-voices__lead { margin: 0; font-size: 15px; line-height: 1.9; color: var(--sm-gray); }

.slr-voices__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.slr-voice {
	background: #fff;
	border: 1px solid var(--sm-line);
	border-radius: var(--sm-radius);
	padding: 24px;
	display: grid;
	gap: 10px;
	align-content: start;
}

.slr-voice__rating { margin: 0; color: var(--sm-orange); font-size: 15px; letter-spacing: .1em; }
.slr-voice__text { margin: 0; font-size: 15px; line-height: 1.9; color: var(--sm-ink); }

.slr-voice__meta {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	font-size: 12px;
	color: var(--sm-gray);
}

.slr-voice__badge {
	padding: 2px 8px;
	border-radius: 2px;
	background: var(--sm-surface);
	border: 1px solid var(--sm-line);
	font-weight: 700;
	color: var(--sm-ink);
}

.slr-voice__product { margin: 0; font-size: 12px; }
.slr-voice__product a { color: var(--sm-gray) !important; text-decoration: underline; text-underline-offset: 3px; }
.slr-voice__product a:hover { color: var(--sm-orange) !important; }

.slr-voices__disclaimer {
	margin: 24px 0 0;
	font-size: 12px;
	line-height: 1.8;
	color: var(--sm-gray);
}

.slr-voices__cta { margin: 14px 0 0; font-size: 15px; }
.slr-voices__cta a { color: var(--sm-ink) !important; text-decoration: underline; text-underline-offset: 4px; }
.slr-voices__cta a:hover { color: var(--sm-orange) !important; }

@media (max-width: 989px) {
	.slr-voices__list { grid-template-columns: 1fr; }
	.slr-voices__title { font-size: 22px; }
}

/* ------------------------------------------------------------
 * よくある質問
 * ---------------------------------------------------------- */
.sm.slr-faq { background: var(--sm-surface); padding: var(--sm-sec) 0; }

.slr-faq__grid {
	display: grid;
	grid-template-columns: .8fr 1.2fr;
	gap: clamp(32px, 5vw, 72px);
	align-items: start;
}

.slr-faq__head { display: grid; gap: 10px; position: sticky; top: calc(var(--sm-hh, 110px) + 24px); }

.slr-faq__title {
	margin: 0;
	font-family: var(--sm-body);
	font-weight: 700;
	font-size: 28px;
	color: var(--sm-ink);
}

.slr-faq__lead { margin: 0; font-size: 14px; line-height: 1.9; color: var(--sm-gray); }

.slr-faq__list {
	background: #fff;
	border: 1px solid var(--sm-line);
	border-radius: var(--sm-radius);
	overflow: hidden;
}

.slr-faq__item + .slr-faq__item { border-top: 1px solid var(--sm-line); }

.slr-faq__item summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 24px;
	font-weight: 700;
	font-size: 16px;
	color: var(--sm-ink);
}

.slr-faq__item summary::-webkit-details-marker { display: none; }

.slr-faq__mark {
	flex: none;
	position: relative;
	width: 16px;
	height: 16px;
}

.slr-faq__mark::before,
.slr-faq__mark::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 14px;
	height: 2px;
	margin: -1px 0 0 -7px;
	background: var(--sm-ink);
	transition: transform .2s;
}

.slr-faq__mark::after { transform: rotate(90deg); }
.slr-faq__item[open] .slr-faq__mark::after { transform: rotate(0); }

.slr-faq__a {
	padding: 0 24px 22px;
	font-size: 15px;
	line-height: 1.9;
	color: var(--sm-gray);
}

@media (max-width: 989px) {
	.slr-faq__grid { grid-template-columns: 1fr; }
	.slr-faq__head { position: static; }
	.slr-faq__title { font-size: 22px; }
	.slr-faq__item summary { padding: 18px 16px; font-size: 15px; }
	.slr-faq__a { padding: 0 16px 18px; }
}

/* ------------------------------------------------------------
 * ブランドストーリー（ここだけ黒い面）
 * ---------------------------------------------------------- */
.sm.slr-story { background: var(--sm-black); color: #fff; padding: var(--sm-sec) 0; }

.slr-story__grid {
	display: grid;
	grid-template-columns: .9fr 1.1fr;
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}

.slr-story__media {
	border-radius: var(--sm-radius);
	overflow: hidden;
	background: #1a1a1a;
	aspect-ratio: 3/4;
}

.slr-story__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.slr-story__media .sm-ph { display: grid; width: 100%; height: 100%; }

.slr-story__copy { display: grid; gap: 14px; }

.slr-story__eyebrow {
	margin: 0;
	font-family: var(--sm-display);
	font-size: 11px;
	letter-spacing: .16em;
	color: var(--sm-orange);
}

.slr-story__title {
	margin: 0 0 4px;
	font-family: var(--sm-body);
	font-weight: 700;
	font-size: 32px;
	line-height: 1.35;
	color: #fff;
}

.slr-story__text {
	margin: 0;
	font-size: 15px;
	line-height: 2;
	color: rgba(255, 255, 255, .72);
}

.slr-story__facts {
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0;
}

.slr-story__facts li {
	display: grid;
	grid-template-columns: 3em 1fr;
	gap: 14px;
	align-items: baseline;
	padding: 14px 0;
	border-top: 1px solid rgba(255, 255, 255, .18);
}

.slr-story__facts li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .18); }

.slr-story__num {
	font-family: var(--sm-display);
	font-size: 14px;
	color: var(--sm-orange);
}

.slr-story__label { font-size: 14px; color: rgba(255, 255, 255, .85); }

@media (max-width: 989px) {
	.slr-story__grid { grid-template-columns: 1fr; }
	.slr-story__title { font-size: 24px; }
}

/* ------------------------------------------------------------
 * ページ末尾の公式LINE
 * ---------------------------------------------------------- */
.sm.slr-linefoot { background: var(--sm-surface); padding: var(--sm-sec) 0; }

.slr-linefoot__inner {
	display: grid;
	gap: 14px;
	justify-items: center;
	text-align: center;
	max-width: 680px;
	margin-inline: auto;
}

.slr-linefoot__badge {
	margin: 0;
	padding: 3px 10px;
	border-radius: 2px;
	background: #06c755;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
}

.slr-linefoot__title {
	margin: 0;
	font-family: var(--sm-body);
	font-weight: 700;
	font-size: 28px;
	line-height: 1.4;
	color: var(--sm-ink);
}

.slr-linefoot__title strong { margin-left: 8px; color: var(--sm-orange); font-size: 34px; }

.slr-linefoot__note { margin: 0; font-size: 15px; line-height: 1.9; color: var(--sm-gray); }

.slr-linefoot__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 6px;
	padding: 17px 36px;
	border-radius: 999px;
	background: #06c755;
	color: #fff !important;
	font-weight: 700;
	font-size: 16px;
	text-decoration: none;
	transition: opacity .2s;
}

.slr-linefoot__btn:hover { opacity: .85; }
.slr-linefoot__btn svg { width: 20px; height: 20px; fill: currentColor; }

.slr-linefoot__terms {
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 4px;
	font-size: 12px;
	line-height: 1.8;
	color: var(--sm-gray);
	text-align: left;
}

.slr-linefoot__terms li { padding-left: 14px; position: relative; }
.slr-linefoot__terms li::before { content: "・"; position: absolute; left: 0; }

@media (max-width: 640px) {
	.slr-linefoot__title { font-size: 22px; }
	.slr-linefoot__title strong { font-size: 28px; }
	.slr-linefoot__btn { width: 100%; justify-content: center; }
}

/* レビューの件数が少ないときは、3列に引き伸ばさない */
.slr-voices__list[data-count="1"] { grid-template-columns: minmax(0, 560px); }
.slr-voices__list[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; }