@charset "UTF-8";
/* =========================================================================
   RF Online Shop - Custom Design
   会員様専用サイト用のフロントデザイン
   ========================================================================= */


:root {
	/* 文字サイズ一括調整つまみ：全体を大きく=数値を上げる（例 1.1=+10%） */
	--rf-fs: 1;
	--rf-accent: #CF1713;
	--rf-accent-strong: #ad1310;
	--rf-ink: #2b2b2b;
	--rf-text: #555555;
	--rf-mute: #9a9a9a;
	--rf-grey: #eeeeee;
	--rf-soft: #f7f7f5;
	--rf-cream: #f7f1e6;
	--rf-line: #e2e2e2;
	--rf-line-soft: #f0f0f0;
	--rf-badge: #f7d9d1;
	--rf-badge-text: #9a4a3a;
	--rf-green: #009944;
	--rf-blue: #0088cc;
	--rf-sub: #6a6a6a;
	--rf-body: #333333;
	--rf-warn: #9a6b16;
	--rf-warn-bg: #fff7e6;
	--rf-warn-line: #f3d9a0;
	--rf-pink: #ED7983;
	--rf-mute-soft: #bcbcbc;
	--rf-radius: 14px;
	--rf-radius-lg: 20px;
	/* ドキュメント共通の余白スケール */
	--rf-doc-section: 56px;
	--rf-doc-head-gap: 20px;
	--rf-doc-block: 18px;
	--rf-doc-text: 10px;
	/* フォント方針：
	   - スマホ … システムフォント（Android=Noto CJK / iPhone=ヒラギノ）。Webフォント読み込まず最速・チラつき無し。
	   - PC … ローカルにNotoがあれば使用（更新済Win/Android）。Mac・古いWinだけ Google Fonts をDLしてNoto統一。
	   RF Noto Local は local() のみ指定＝どの環境でもDLを発生させず、あればローカルNotoを最優先で使う。 */
	--rf-font: "RF Noto Local", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "YuGothic", "Meiryo", sans-serif;
}
@font-face {
	font-family: "RF Noto Local";
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	src: local("Noto Sans JP"), local("Noto Sans CJK JP");
}
@font-face {
	font-family: "RF Noto Local";
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	src: local("Noto Sans JP Medium"), local("Noto Sans JP"), local("Noto Sans CJK JP Medium"), local("Noto Sans CJK JP");
}
@font-face {
	font-family: "RF Noto Local";
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	src: local("Noto Sans JP Bold"), local("Noto Sans JP"), local("Noto Sans CJK JP Bold"), local("Noto Sans CJK JP");
}
@font-face {
	font-family: "RF Noto Local";
	font-weight: 900;
	font-style: normal;
	font-display: swap;
	src: local("Noto Sans JP Black"), local("Noto Sans JP"), local("Noto Sans CJK JP Black"), local("Noto Sans CJK JP");
}
/* スマホは Google Fonts を読み込まない（functions.php で PC限定登録）。
   RF Noto Local は local() のみなのでスマホでもDL0：Android=ローカルNoto CJK / iPhone=ヒラギノ。 */
@media (max-width: 768px) {
	:root {
		--rf-font: "RF Noto Local", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Meiryo", sans-serif;
	}
}

/* ---- 共通レイアウト幅 -------------------------------------------------- */
.page-width {
	max-width: 1240px;
	margin: 0 auto;
	padding-left: 24px;
	padding-right: 24px;
	box-sizing: border-box;
}

/* タブレット（特にiPad横）では左右余白を抑えて幅を広く使う */
@media screen and (min-width: 1025px) and (max-width: 1400px) {
	.page-width { max-width: 95vw; }
}

/* 新商品 + キャンペーンの横並び */
.news-campaign {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: 28px;
	align-items: start;
}
.news-campaign__main { min-width: 0; }
.news-campaign__aside { min-width: 0; }
.news-campaign .product-rail__track > .product-card { flex-basis: 168px; }

.rf-front,
.announcement-bar,
.rf-header,
.category-bar,
.rf-drawer,
.rf-footer {
	font-family: var(--rf-font);
	color: var(--rf-ink);
}

.rf-front *,
.rf-header *,
.category-bar *,
.rf-drawer *,
.rf-footer * {
	box-sizing: border-box;
}

/* ---- リンク（親テーマ style.css の `a:hover{color:#262626;text-decoration:underline}` を打ち消す） ---- */
.rf-front a,
.rf-header a,
.announcement-bar a,
.category-bar a,
.rf-drawer a,
.rf-footer a { text-decoration: none; }
.rf-front a:hover,
.rf-header a:hover,
.announcement-bar a:hover,
.category-bar a:hover,
.rf-drawer a:hover,
.rf-footer a:hover { text-decoration: none; }
/* ===== ボタン統一（全ページ共通・アンダーラインなし・ホバー色統一） =====
   Primary   … 赤背景 / 白文字（ホバー：濃い赤、文字は白のまま）
   Secondary … 白背景 / 赤枠 / 赤文字（outline・ghost 共通。ホバー：淡い赤地、文字は赤のまま）
   pill ボタンは常に下線なし。.rf-front 依存をなくし親テーマの a:hover にも勝つ。 */
.button:hover,
a.button:hover,
a.button:focus { text-decoration: none !important; }
/* ドロワーのログアウト（button--outline）：ホバーは薄くなるだけ（グレー化しない） */
.rf-drawer a.button--outline:hover { background: #fff; color: var(--rf-accent); border-color: var(--rf-accent); opacity: .55; }

/* ---- 検索ボックス（404・ゲート等の get_search_form。親テーマの FontAwesome ×表示を打ち消す） ---- */
/* ---- 検索ボックス（404・ゲート等の get_search_form）。ヘッダー検索(.header-search)と同じ見た目に統一 ---- */
.rf-front .s-box,
.rf-front .search-box .s-box { position: relative; display: flex; align-items: center; background: #f2f2f2; border: none; border-radius: 9999px; padding: 0 6px 0 18px; height: 48px; overflow: visible; }
.rf-front .s-box .search-text,
.rf-front .s-box input[type="text"] { flex: 1; min-width: 0; border: none; outline: none; background: transparent; height: 100%; padding: 0 8px 0 0; font-family: var(--rf-font); font-size: 1rem; color: var(--rf-ink); }
.rf-front .s-box .searchsubmit,
.rf-front .s-box #s-submit { flex: 0 0 auto; width: 36px; height: 36px; margin: 0; padding: 0; border: none; border-radius: 9999px; cursor: pointer; font-size: 0; color: transparent; background-color: #2b2b2b;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.5' y1='16.5' x2='21' y2='21'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: center; background-size: 18px 18px; transition: opacity .18s ease; }
.rf-front .s-box .searchsubmit:hover,
.rf-front .s-box #s-submit:hover { opacity: .78; }

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

/* ---- 改行ユーティリティ（レスポンシブ改行） --------------------------------
   .br-sp … PCでは改行せず、スマホ(768px以下)でだけ改行する <br class="br-sp">
   .br-pc … PCでだけ改行し、スマホでは改行しない <br class="br-pc">
   使い方例：見出しの折りたい位置に <br class="br-sp"> を入れるだけ */
br.br-sp { display: none; }

/* ---- ボタン ------------------------------------------------------------ */
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	font-family: var(--rf-font);
	font-size: calc(1rem * var(--rf-fs));
	font-weight: 700;
	line-height: 1;
	padding: 13px 26px;
	border-radius: 9999px;
	border: 1.5px solid transparent;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: opacity .18s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.button--primary { background: var(--rf-accent); color: #fff !important; border-color: var(--rf-accent); }
a.button--primary:hover, .button--primary:hover,
a.button--primary:focus, .button--primary:focus { background: var(--rf-accent); color: #fff !important; border-color: var(--rf-accent); opacity: .78; }
.button--primary svg, .button--primary:hover svg { stroke: #fff; }
/* dark も赤系（primary）に統一 */
.button--dark { background: var(--rf-accent); color: #fff !important; border-color: var(--rf-accent); }
a.button--dark:hover, .button--dark:hover { background: var(--rf-accent); color: #fff !important; border-color: var(--rf-accent); opacity: .78; }
.button--dark svg, .button--dark:hover svg { stroke: #fff; }
/* Secondary：outline と ghost を白背景・赤枠・赤文字に統一 */
.button--outline, .button--ghost { background: #fff; color: var(--rf-accent) !important; border-color: var(--rf-accent); border-width: 3px; }
a.button--outline:hover, .button--outline:hover,
a.button--ghost:hover, .button--ghost:hover,
a.button--outline:focus, a.button--ghost:focus { background: #fff; color: var(--rf-accent) !important; border-color: var(--rf-accent); opacity: .6; }
.button--outline svg, .button--ghost svg,
.button--outline:hover svg, .button--ghost:hover svg { stroke: var(--rf-accent); }
.button--block { width: 100%; }
.button[aria-disabled="true"],
.button.is-disabled {
	pointer-events: none;
	opacity: .55;
	filter: grayscale(.2);
}
/* 無効化された ghost/outline ボタン（例：承認待ちTOPの「さらに表示」）は薄グレーに。
   .button--ghost の赤 !important を打ち消すため、こちらも !important で指定する。 */
.button--ghost.is-disabled, .button--ghost[aria-disabled="true"],
.button--outline.is-disabled, .button--outline[aria-disabled="true"] {
	color: #b0b0b0 !important;
	border-color: #d6d6d6 !important;
	background: #fff !important;
	opacity: 1;
	filter: none;
}
.button--ghost.is-disabled svg, .button--ghost[aria-disabled="true"] svg,
.button--outline.is-disabled svg, .button--outline[aria-disabled="true"] svg { stroke: #b0b0b0 !important; }

/* =========================================================================
   お知らせバー
   ========================================================================= */
.announcement-bar {
	background: var(--rf-grey);
	border-top: 3px solid #d6d6d6;
	border-bottom: 1px solid var(--rf-line);
}
.announcement-bar__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	flex-wrap: wrap;
	padding-top: 9px;
	padding-bottom: 9px;
	font-size: calc(0.875rem * var(--rf-fs));
	font-weight: 700;
	text-align: center;
}
.announcement-bar__label { color: var(--rf-ink); }
.announcement-bar__text { color: var(--rf-text); font-weight: 500; }
.announcement-bar__text strong { color: var(--rf-ink); font-weight: 700; }

/* =========================================================================
   ヘッダー
   ========================================================================= */
.rf-header {
	background: #fff;
	border-bottom: 1px solid var(--rf-line);
	/* 親テーマ style.css の汎用 `header { margin-bottom: 1.4286em }` を打ち消す */
	margin-bottom: 0;
}
.rf-header__inner {
	display: flex;
	align-items: center;
	gap: 28px;
	padding-top: 16px;
	padding-bottom: 16px;
}
.rf-header__logo {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
	text-decoration: none;
}
.rf-header__logo img { display: block; max-height: 46px; width: auto; }
.rf-header__logo-text { line-height: 1; }
.rf-header__logo-name { font-size: calc(1.5rem * var(--rf-fs)); font-weight: 900; letter-spacing: 2px; color: var(--rf-ink); }
.rf-header__logo-sub { font-size: calc(0.625rem * var(--rf-fs)); font-weight: 700; letter-spacing: 4px; color: var(--rf-mute); margin-top: 3px; }

.header-search {
	flex: 0 1 320px;
	margin-left: auto;
	min-width: 0;
	max-width: 360px;
	display: flex;
	align-items: center;
	background: #f2f2f2;
	border-radius: 9999px;
	padding: 0 6px 0 18px;
	height: 44px;
}
.header-search input,
.header-search .search-field {
	flex: 1;
	min-width: 0;
	border: none;
	background: transparent;
	outline: none;
	font-family: inherit;
	font-size: calc(0.875rem * var(--rf-fs));
	color: #444;
}
.header-search__submit {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border: none;
	border-radius: 9999px;
	background: #2b2b2b;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.header-actions {
	display: flex;
	align-items: center;
	gap: 16px;
	flex: 0 0 auto;
}
.header-actions__search-icon {
	display: none;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: none;
	border-radius: 9999px;
	background: transparent;
	cursor: pointer;
	flex: 0 0 auto;
}
.header-actions__mobile-auth {
	display: none;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 9999px;
	background: transparent;
	cursor: pointer;
	flex: 0 0 auto;
	text-decoration: none;
}
.header-actions__member {
	display: flex;
	align-items: center;
	gap: 6px;
	background: #f2f2f2;
	padding: 8px 14px;
	border-radius: 9999px;
	color: #777;
	font-size: calc(0.75rem * var(--rf-fs));
	font-weight: 700;
	max-width: 190px;
}
.header-actions__member svg { flex: 0 0 auto; }
.header-actions__member-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.header-actions__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	text-decoration: none;
	color: #444;
	font-size: calc(0.75rem * var(--rf-fs));
	font-weight: 500;
	transition: opacity .18s ease;
}
.header-actions__link:hover { opacity: .65; }
/* ログアウト：Welcart出力の <a> をアイコン下のラベルとして整える */
.header-actions__logout { display: flex; }
.header-actions__logout a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	color: #444;
	font-size: calc(0.75rem * var(--rf-fs));
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
	transition: opacity .18s ease;
}
.header-actions__logout a svg { flex: 0 0 auto; }
.header-actions__logout a:hover { opacity: .65; }
.cart-link { position: relative; }
.cart-link__count {
	position: absolute;
	top: -5px;
	right: 6px;
	background: var(--rf-accent);
	color: #fff;
	font-size: calc(0.625rem * var(--rf-fs));
	font-weight: 700;
	min-width: 16px;
	height: 16px;
	border-radius: 9999px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 3px;
}
.header-burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: 1px solid #e2e2e2;
	border-radius: 11px;
	background: #fff;
	cursor: pointer;
	flex: 0 0 auto;
}

/* =========================================================================
   カテゴリナビ（PC 横並び・ホバーでサブメニュー）
   ========================================================================= */
.category-bar {
	background: #fff;
	border-bottom: 1px solid var(--rf-line);
	position: relative;
	z-index: 20;
}
.category-bar__inner {
	display: flex;
	align-items: stretch;
	justify-content: center;
	flex-wrap: wrap;
}
.category-bar__item { position: relative; }
.category-bar__link {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 15px 22px;
	text-decoration: none;
	color: var(--rf-body);
	font-size: calc(0.9375rem * var(--rf-fs));
	font-weight: 700;
	border-left: 1px solid var(--rf-line);
	transition: background .15s ease;
}
.category-bar__link:hover { background: #f5f5f5; }
/* 先頭項目の外側左ボーダーは出さない（項目間の区切り線のみにする） */
.category-bar__item:first-child .category-bar__link { border-left: none; }
.category-bar__item--accent > .category-bar__link { color: var(--rf-ink); }
.category-bar__submenu {
	position: absolute;
	top: 100%;
	left: 0;
	background: #fff;
	border: 1px solid var(--rf-line);
	border-top: 2px solid var(--rf-ink);
	border-radius: 0 0 12px 12px;
	box-shadow: 0 10px 24px rgba(0, 0, 0, .10);
	min-width: 214px;
	padding: 8px;
	z-index: 40;
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.category-bar__item:hover .category-bar__submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.category-bar__submenu a {
	display: block;
	padding: 11px 14px;
	text-decoration: none;
	color: #555;
	font-size: calc(0.8125rem * var(--rf-fs));
	font-weight: 500;
	border-radius: 8px;
	transition: background .15s ease;
}
.category-bar__submenu a:hover { background: #f5f5f5; }

/* =========================================================================
   モバイルドロワー
   ========================================================================= */
.rf-drawer { display: none; }
.rf-drawer.is-open { display: block; position: fixed; inset: 0; z-index: 1000; }
.rf-drawer__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .4);
	animation: rfFadeIn .2s ease;
}
.rf-drawer__panel {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 88%;
	max-width: 380px;
	background: #fff;
	display: flex;
	flex-direction: column;
	box-shadow: 6px 0 30px rgba(0, 0, 0, .18);
	animation: rfDrawerIn .26s cubic-bezier(.22, .61, .36, 1);
}
.rf-drawer__scroll {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 14px 20px 24px;
}
.rf-drawer__close-row { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.rf-drawer__close {
	width: 40px;
	height: 40px;
	border: none;
	border-radius: 9999px;
	background: #f2f2f2;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.rf-drawer__search {
	display: flex;
	align-items: center;
	border-radius: 9999px;
	padding: 0 6px 0 18px;
	height: 46px;
	background: #f2f2f2;
	margin-bottom: 18px;
}
.rf-drawer__search input,
.rf-drawer__search .search-field {
	flex: 1;
	min-width: 0;
	border: none;
	background: transparent;
	outline: none;
	font-family: inherit;
	font-size: calc(0.9375rem * var(--rf-fs));
	color: #444;
}
.rf-drawer__search-submit {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border: none;
	border-radius: 9999px;
	background: #2b2b2b;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.rf-drawer__member {
	display: flex;
	align-items: center;
	gap: 7px;
	color: #888;
	font-size: calc(0.75rem * var(--rf-fs));
	font-weight: 700;
	margin-bottom: 14px;
}
.rf-drawer__auth {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 14px;
}
.rf-drawer__auth .button { font-size: calc(1rem * var(--rf-fs)); padding: 16px; }
.rf-drawer__fax {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--rf-soft);
	border-radius: 12px;
	padding: 13px 16px;
	margin-bottom: 22px;
	font-size: calc(0.75rem * var(--rf-fs));
	color: #777;
	font-weight: 500;
	line-height: 1.5;
}
.rf-drawer__fax strong { color: var(--rf-ink); }
/* 外部リンク（FAX用紙DL等）共通スタイル：グレー下線＋外部リンクアイコン（疑似要素で自動付与） */
.rf-ext-link { color: var(--rf-sub); text-decoration: none; padding: 0 3px;}
/* 内部リンク用（下線のみ・外部アイコンなし・使い回し可） */
.rf-inline-link { color: var(--rf-sub); text-decoration: none; border-bottom: 1px solid currentColor; }
.rf-front a.rf-inline-link:hover { opacity: .7; color: var(--rf-sub); text-decoration: none; }
/* 共通ブルーリンク（下線あり・使い回し可） */
.rf-link { color: var(--rf-blue); text-decoration: none; border-bottom: 1px solid currentColor; }
.rf-front a.rf-link { color: var(--rf-blue); text-decoration: none; }
.rf-front a.rf-link:hover { opacity: .75; color: var(--rf-blue); text-decoration: none; }
.rf-front a.rf-ext-link:hover { opacity: .7; text-decoration: none; }
.rf-ext-link::after { content: ""; display: inline-block; width: 11px; height: 11px; margin-left: 3px; vertical-align: -1px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6'/%3E%3Cpath d='M20 4l-8 8'/%3E%3Cpath d='M18 14v4a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6'/%3E%3Cpath d='M20 4l-8 8'/%3E%3Cpath d='M18 14v4a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4'/%3E%3C/svg%3E") no-repeat center / contain; }
.rf-drawer__label {
	font-size: calc(0.6875rem * var(--rf-fs));
	font-weight: 700;
	letter-spacing: 1px;
	color: #aaa;
	margin-bottom: 6px;
	padding-left: 4px;
}
.rf-drawer__cat { display: flex; flex-direction: column; }
.rf-drawer__cat-item { border-bottom: 1px solid var(--rf-line-soft); }
.rf-drawer__cat-toggle {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 15px 6px;
	background: transparent;
	border: none;
	cursor: pointer;
	text-align: left;
	font-family: inherit;
}
.rf-drawer__cat-toggle > span:first-child { font-size: calc(0.9375rem * var(--rf-fs)); font-weight: 700; color: var(--rf-ink); }
.rf-drawer__cat--home { margin-bottom: 18px; }
.rf-drawer__home { display: inline-flex; align-items: center; gap: 10px; color: var(--rf-ink); }
.rf-drawer__home svg { flex: 0 0 auto; color: var(--rf-accent); transform: translateY(1px); }
.rf-drawer__cat-sign { font-size: calc(1.25rem * var(--rf-fs)); font-weight: 700; color: #bbb; line-height: 1; width: 20px; text-align: center; }
.rf-drawer__cat-sub {
	display: none;
	padding: 0 6px 12px;
	flex-direction: column;
	gap: 2px;
}
.rf-drawer__cat-item.is-open .rf-drawer__cat-sub { display: flex; }
.rf-drawer__cat-item.is-open .rf-drawer__cat-sign { color: var(--rf-accent); }
.rf-drawer__cat-sub a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 11px 12px;
	text-decoration: none;
	color: #666;
	font-size: calc(0.8438rem * var(--rf-fs));
	font-weight: 500;
	border-radius: 8px;
	background: var(--rf-soft);
}
.rf-drawer__links { display: flex; flex-direction: column; gap: 2px; margin-top: 18px; }
.rf-drawer__links a { padding: 13px 6px; text-decoration: none; color: #555; font-size: calc(0.875rem * var(--rf-fs)); font-weight: 700; }
.rf-drawer__logout {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	align-self: flex-start;
	margin: 16px 6px 8px;
	padding: 6px 2px;
	color: #555;
	font-size: calc(0.8125rem * var(--rf-fs));
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: opacity .18s ease;
}
.rf-drawer__logout svg { flex: 0 0 auto; }
.rf-drawer__logout:hover { color: #555; opacity: .5; }

/* =========================================================================
   ヒーロー
   ========================================================================= */
.hero {
	background: #f7f7f7;
	position: relative;
	overflow: hidden;
}
.hero__inner {
	position: relative;
	min-height: 400px;
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	align-items: center;
	gap: 24px;
}
.hero__slides { position: relative; z-index: 2; padding: 8px 0; min-width: 0; overflow: hidden; display: grid; touch-action: pan-y; }
.hero__slide { grid-area: 1 / 1; box-sizing: border-box; opacity: 0; visibility: hidden; pointer-events: none; }
.hero__slide.is-active { opacity: 1; visibility: visible; pointer-events: auto; animation: rfHeroIn .55s ease both; }
.hero__tag {
	display: inline-block;
	background: #fff;
	color: var(--rf-ink);
	font-size: calc(0.8125rem * var(--rf-fs));
	font-weight: 700;
	padding: 7px 16px;
	border-radius: 0;
	margin-bottom: 18px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, .12);
}
.hero__title {
	margin: 0;
	font-size: calc(2.75rem * var(--rf-fs));
	font-weight: 900;
	line-height: 1.25;
	letter-spacing: 1px;
	color: var(--rf-ink);
}
.hero__text { margin: 18px 0 28px; font-size: calc(1rem * var(--rf-fs)); color: var(--rf-sub); font-weight: 500; }
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero__media { position: relative; height: 340px; }
.hero__media-img {
	position: absolute;
	inset: 10px 0;
	width: 100%;
	height: 320px;
	border-radius: var(--rf-radius-lg);
	object-fit: cover;
}
.hero__mascot {
	position: absolute;
	right: -18px;
	bottom: 0;
	z-index: 3;
	width: 150px;
	height: auto;
	animation: rfBob 4s ease-in-out infinite;
}
.hero__dots {
	position: absolute;
	left: 24px;
	right: auto;
	bottom: 22px;
	display: flex;
	justify-content: flex-start;
	gap: 8px;
	z-index: 4;
}
.hero__dot {
	height: 9px;
	width: 9px;
	border: none;
	border-radius: 9999px;
	background: var(--rf-mute-soft);
	cursor: pointer;
	padding: 0;
	transition: all .3s ease;
}
.hero__dot.is-active { width: 24px; background: var(--rf-text); }

/* =========================================================================
   信頼バー
   ========================================================================= */
.trust-bar {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	background: #fff;
	border: 1px solid var(--rf-line);
	border-radius: 16px;
	overflow: hidden;
	margin-top: 28px;
}
.trust-bar__item {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 22px 24px;
}
.trust-bar__item + .trust-bar__item { border-left: 1px solid var(--rf-line); }
.trust-bar__text { font-size: calc(0.9375rem * var(--rf-fs)); font-weight: 700; line-height: 1.5; color: var(--rf-ink); }
.trust-bar__text em { font-style: normal; font-weight: 700; color: var(--rf-green); font-size: calc(1rem * var(--rf-fs)); }
.trust-bar__text .tax-mini { font-size: calc(0.8125rem * var(--rf-fs)); font-weight: 700; color: var(--rf-sub); }
.trust-bar__text a { font-size: calc(0.8125rem * var(--rf-fs)); font-weight: 700; color: var(--rf-sub); }
/* FAX用紙DLリンク：ホバーは色を変えず薄くなるだけ（.rf-front 非依存・親テーマ a:hover より高詳細度で確実に上書き） */
.trust-bar .trust-bar__text a.rf-ext-link:hover { color: var(--rf-sub); opacity: .6; text-decoration: none; }

/* =========================================================================
   セクション共通
   ========================================================================= */
.section { padding-top: 40px; }
.section__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 18px;
	border-bottom: none;
}
.section__title {
	margin: 0;
	font-size: calc(1.625rem * var(--rf-fs));
	font-weight: 900;
	letter-spacing: 1px;
	color: var(--rf-ink);
}
.section__title--sm { font-size: calc(1.5rem * var(--rf-fs)); }
.section__link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	text-decoration: none;
	color: var(--rf-ink);
	font-size: calc(0.875rem * var(--rf-fs));
	font-weight: 700;
	transition: opacity .18s ease;
}
.section__link:hover { opacity: .65; }
.section__link.is-disabled { pointer-events: none; opacity: .4; }

/* アーカイブ/検索セクション（テンプレのインラインスタイルを撤去しクラス化） */
.section--archive { padding-bottom: 72px; }
.search-query-em { color: inherit; }
.search-noresult { font-size: 1rem; color: var(--rf-ink); margin: 4px 0 40px; line-height: 1.7; }
.taxonomy-description { margin: -6px 0 18px; color: var(--rf-sub); font-size: calc(0.875rem * var(--rf-fs)); line-height: 1.7; }
.archive-empty { padding: 40px 0; text-align: center; color: var(--rf-mute); }
.pagination_wrapper { margin-top: 28px; }
.search-count { margin: 0 0 18px; color: var(--rf-sub); font-size: calc(0.875rem * var(--rf-fs)); }
.search-count strong { color: var(--rf-ink); font-size: calc(1rem * var(--rf-fs)); }
.search-nav { display: flex; justify-content: space-between; margin-top: 28px; }
.search-nav a { cursor: pointer; }

/* 固定ページ（子テーマ page.php）：サイドバー無し全幅・上下余白。
   左右余白は .page-width クラス（page-content に付与済）と、中身の .rf-doc が分担する */
.page-content { padding-top: 36px; padding-bottom: 56px; }
/* 固定ページ本文の素のテーブル（特定商取引法など rf-doc__table クラスを持たない <table>）にも
   情報テーブルの体裁（外枠・セル線・見出し背景・余白）を当てる。#content で詳細度を確保。 */
#content.page-content table { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--rf-line); border-radius: var(--rf-radius); overflow: hidden; margin: 0 0 24px; }
#content.page-content table th, #content.page-content table td { text-align: left; padding: 14px 18px; border: none; border-bottom: 1px solid var(--rf-line); font-size: calc(0.9375rem * var(--rf-fs)); line-height: 1.8; vertical-align: top; }
#content.page-content table th { width: 240px; font-weight: 700; color: var(--rf-ink); background: var(--rf-soft); border-right: 1px solid var(--rf-line); }
#content.page-content table tr:last-child th, #content.page-content table tr:last-child td { border-bottom: none; }
@media screen and (max-width: 768px) { #content.page-content table th { width: 120px; } }
/* マイpage/新規入会本体（#content.member-page 共通）：中央寄せ・上下余白・左右余白（タブレット帯でも端に張り付かないよう常時24px） */
#content.member-page { max-width: 1240px; margin: 0 auto !important; padding: 36px 24px 64px !important; }

/* マイページ内リンク：member_submenu と同じ挙動（濃いグレー・ホバーで薄グレー） */
.rf-front .member-page a { color: var(--rf-text); text-decoration: none; }
.rf-front .member-page a:hover { color: var(--rf-text); opacity: .6; text-decoration: none; }

/* =========================================================================
   固定ページ用テンプレート「RFコンテンツページ」専用スタイル（.rf-page）
   ─ page-rf-content.php を選んだ固定ページだけに適用。通常の固定ページ(page.php)や
     .rf-doc ページには一切影響しない（すべて .rf-page 配下にスコープ）。
   ─ 見出し・本文の余白、中央寄せ、Contact Form 7 のスマホはみ出し対策・送信ボタン
     デザインまでを一括で整える。エディタ側で囲みdiv等を足す必要はない。
   ========================================================================= */
/* 親テーマの #content padding:0 リセットを打ち消し、中央寄せの読みやすい幅にする */
#main.one-column #content.rf-page,
#main.two-column #content.rf-page,
#content.rf-page { max-width: 820px; margin: 0 auto !important; padding: 44px 24px 72px !important; box-sizing: border-box; }
@media screen and (max-width: 768px) {
	#main.one-column #content.rf-page,
	#main.two-column #content.rf-page,
	#content.rf-page { padding-left: 16px !important; padding-right: 16px !important; }
}

/* 見出し（ページタイトル） */
.rf-page__title { margin: 0 0 28px; font-size: calc(1.625rem * var(--rf-fs)); font-weight: 900; line-height: 1.4; color: var(--rf-ink); }
@media screen and (max-width: 768px) { .rf-page__title { font-size: calc(1.5rem * var(--rf-fs)); margin-bottom: 22px; } }

/* 本文内の見出し（エディタで入れた h1〜h3） */
.rf-page__body h1, .rf-page__body h2 { font-size: calc(1.375rem * var(--rf-fs)); font-weight: 900; color: var(--rf-ink); line-height: 1.5; margin: 40px 0 16px; padding-bottom: 10px; border-bottom: 2px solid var(--rf-line); }
.rf-page__body h3 { font-size: calc(1.125rem * var(--rf-fs)); font-weight: 700; color: var(--rf-ink); line-height: 1.6; margin: 32px 0 12px; }
.rf-page__body > :first-child { margin-top: 0; }

/* 本文段落・リスト・リンク */
.rf-page__body p { font-size: calc(0.9375rem * var(--rf-fs)); line-height: 1.9; color: var(--rf-text); margin: 0 0 18px; }
.rf-page__body ul, .rf-page__body ol { margin: 0 0 18px; padding-left: 1.4em; }
.rf-page__body li { font-size: calc(0.9375rem * var(--rf-fs)); line-height: 1.9; color: var(--rf-text); margin-bottom: 6px; }
.rf-page__body a { color: var(--rf-blue); text-decoration: underline; }
.rf-page__body a:hover { opacity: .75; }
.rf-page__body a.button,
.rf-page__body a.button:hover { color: #fff; text-decoration: none; }
.rf-page__body strong { color: var(--rf-ink); }
.rf-page__body img { max-width: 100%; height: auto; }

/* 本文中の素のテーブル（特商法など）にも情報テーブルの体裁を付与 */
.rf-page__body table { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--rf-line); border-radius: var(--rf-radius); overflow: hidden; margin: 0 0 24px; }
.rf-page__body table th, .rf-page__body table td { text-align: left; padding: 14px 18px; border: none; border-bottom: 1px solid var(--rf-line); font-size: calc(0.9375rem * var(--rf-fs)); line-height: 1.8; vertical-align: top; }
.rf-page__body table th { width: 220px; font-weight: 700; color: var(--rf-ink); background: var(--rf-soft); border-right: 1px solid var(--rf-line); }
.rf-page__body table tr:last-child th, .rf-page__body table tr:last-child td { border-bottom: none; }
@media screen and (max-width: 768px) { .rf-page__body table th { width: 110px; } }

/* --- Contact Form 7 --- */
.rf-page .wpcf7 { margin-top: 4px; }
.rf-page .wpcf7-form p { margin: 0 0 18px; }
.rf-page .wpcf7-form label { display: block; font-size: calc(0.9375rem * var(--rf-fs)); font-weight: 700; color: var(--rf-ink); line-height: 1.9; }
/* 入力欄：幅100%・box-sizingでスマホのはみ出しを解消 */
.rf-page .wpcf7-form input[type="text"],
.rf-page .wpcf7-form input[type="email"],
.rf-page .wpcf7-form input[type="tel"],
.rf-page .wpcf7-form input[type="url"],
.rf-page .wpcf7-form input[type="number"],
.rf-page .wpcf7-form input[type="date"],
.rf-page .wpcf7-form select,
.rf-page .wpcf7-form textarea {
	width: 100%; max-width: 100%; box-sizing: border-box;
	margin-top: 6px; padding: 12px 14px;
	border: 1px solid #d8d8d8; border-radius: 12px;
	font-family: inherit; font-size: calc(1rem * var(--rf-fs)); color: #444;
	background: #fff; -webkit-appearance: none; appearance: none;
}
.rf-page .wpcf7-form textarea { min-height: 160px; resize: vertical; line-height: 1.7; }
.rf-page .wpcf7-form input:focus,
.rf-page .wpcf7-form select:focus,
.rf-page .wpcf7-form textarea:focus { outline: none; border-color: var(--rf-accent); box-shadow: 0 0 0 3px rgba(207,23,19,.12); }
/* 必須マーク（任意で使用）・注記 */
.rf-page .wpcf7-not-valid-tip { color: var(--rf-error, #d33); font-size: calc(0.8125rem * var(--rf-fs)); margin-top: 4px; }
/* 送信ボタン：RFプライマリボタン */
.rf-page .wpcf7-submit {
	appearance: none; -webkit-appearance: none; border: none; cursor: pointer;
	background: var(--rf-accent); color: #fff; font-family: inherit;
	font-size: calc(1rem * var(--rf-fs)); font-weight: 700;
	padding: 0 40px; height: 52px; min-width: 200px; border-radius: 9999px;
	transition: opacity .18s ease; margin-top: 6px;
}
.rf-page .wpcf7-submit:hover { opacity: .85; }
@media screen and (max-width: 768px) { .rf-page .wpcf7-submit { width: 100%; } }
/* 送信中スピナー・応答メッセージ */
.rf-page .wpcf7-spinner { margin: 0 0 0 12px; }
.rf-page .wpcf7-response-output { margin: 18px 0 0 !important; border-radius: 10px; font-size: calc(0.875rem * var(--rf-fs)); line-height: 1.7; }
/* カートページ（#content.cart-page）も同様に中央寄せ・左右余白（タブレット帯で端に張り付くのを防ぐ） */
#content.cart-page { max-width: 1240px; margin: 0 auto !important; padding: 36px 24px 64px !important; box-sizing: border-box; }

/* 新規入会フォーム固有（テーブル・入力欄は .rf-front #memberinfo … のスタイルを使用） */
.rf-front #newmember .rf-form-note { background: var(--rf-soft); border-radius: var(--rf-radius); padding: 24px 28px; margin-bottom: 22px; }
.rf-front #newmember .rf-form-note ul { margin: 0; padding-left: 1.3em; list-style: circle outside !important; }
.rf-front #newmember .rf-form-note li { display: list-item; list-style: circle outside !important; font-size: calc(0.8125rem * var(--rf-fs)); color: var(--rf-text); line-height: 1.7; margin-bottom: 4px; }
.rf-front #newmember .agree_member_area { width: 100%; max-width: 640px; margin: 20px auto; font-size: calc(0.875rem * var(--rf-fs)); color: var(--rf-text); line-height: 1.7; }
.rf-front #newmember .agree_member_area a { color: var(--rf-accent); }
.rf-front #newmember .agree_member_area .at_check_area { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 14px; }
.rf-front #newmember .send { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 24px; }
.rf-front #newmember .send input { appearance: none; cursor: pointer; font-family: inherit; font-size: calc(0.9375rem * var(--rf-fs)); font-weight: 700; height: 52px; padding: 0 36px; border-radius: 9999px; border: none; background: var(--rf-accent); color: #fff; transition: opacity .18s ease; }
.rf-front #newmember .send input:hover { opacity: .85; }
.rf-front .member-page .customer_form th em { color: var(--rf-accent); font-style: normal; margin-right: 4px; }

/* =========================================================================
   商品カード
   ========================================================================= */
.product-card { display: block; }
.product-card__media {
	position: relative;
	background: var(--rf-soft);
	border-radius: var(--rf-radius);
	overflow: hidden;
	transition: transform .22s ease, box-shadow .22s ease;
}
.product-card__media:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0, 0, 0, .07); }
.product-card__media img,
.product-card__media .itemimg-inner img {
	display: block;
	width: 100%;
	height: 172px;
	object-fit: cover;
}
.product-card__badge {
	position: absolute;
	top: 9px;
	right: 9px;
	z-index: 2;
	background: var(--rf-badge);
	color: var(--rf-badge-text);
	font-size: calc(0.6875rem * var(--rf-fs));
	font-weight: 700;
	padding: 5px 10px;
	border-radius: 9999px;
	line-height: 1.1;
	text-align: center;
}
.product-card__info { padding: 12px 4px 0; }
.product-card__title {
	font-size: calc(0.9375rem * var(--rf-fs));
	font-weight: 700;
	line-height: 1.45;
	color: var(--rf-ink);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.product-card__title a { color: inherit; text-decoration: none; }
.product-card__price { margin-top: 8px; font-size: calc(1.1875rem * var(--rf-fs)); font-weight: 700; color: var(--rf-ink); }
.product-card__price .tax_inc_block { display: inline-block; margin: 0; font-size: calc(0.9375rem * var(--rf-fs)); color: var(--rf-sub); font-weight: 500; white-space: nowrap; }
.product-card__price .tax_inc_block * { color: inherit; }
.product-card__price .tax_inc_label { font-style: normal; }
.product-card__locked {
	margin-top: 10px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--rf-mute);
	font-size: calc(0.8125rem * var(--rf-fs));
	font-weight: 500;
	background: #f0f0f0;
	padding: 6px 11px;
	border-radius: 9999px;
	text-align: left;
}
.product-card__locked svg { flex: 0 0 auto; }
.product-card.is-locked .product-card__media { pointer-events: none; }
.product-card__soldout {
	position: absolute;
	left: 9px;
	top: 9px;
	z-index: 2;
	background: rgba(43, 43, 43, .85);
	color: #fff;
	font-size: calc(0.6875rem * var(--rf-fs));
	font-weight: 700;
	padding: 4px 9px;
	border-radius: 6px;
}

/* ---- 横スクロールのレール ---------------------------------------------- */
.product-rail { position: relative; }
.product-rail__track {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	padding: 4px 2px 8px;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.product-rail__track::-webkit-scrollbar { display: none; height: 0; }
.product-rail__track > .product-card { flex: 0 0 198px; scroll-snap-align: start; }
.product-rail__btn {
	position: absolute;
	top: 90px;
	z-index: 5;
	width: 38px;
	height: 38px;
	border-radius: 9999px;
	border: 1px solid var(--rf-line);
	background: #fff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.product-rail__btn--prev { left: -14px; }
.product-rail__btn--next { right: -14px; }

/* ---- Swiper（人気商品・新商品のドラッグ対応スライダー） ---------------- */
.product-swiper { overflow: hidden; padding: 4px 2px 8px; }
.product-swiper .swiper-slide { width: 198px; height: auto; }
.product-swiper .swiper-slide > .product-card { width: 100%; }
.news-campaign .product-swiper .swiper-slide { width: 168px; }
.product-rail__btn.swiper-button-disabled { opacity: .35; cursor: default; pointer-events: none; }
.product-swiper.swiper-grabbing { cursor: grabbing; }

/* ---- グリッド ---------------------------------------------------------- */
.product-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}
.product-grid--news { grid-template-columns: repeat(4, 1fr); }
/* 消耗品グリッド：画像を正方形に */
.product-grid--square .product-card__media { aspect-ratio: 1 / 1; }
.product-grid--square .product-card__media img,
.product-grid--square .product-card__media .itemimg-inner img { height: 100%; }
/* カルーセル（人気商品・新着など）：画像を正方形に */
.product-swiper .product-card__media { aspect-ratio: 1 / 1; }
.product-swiper .product-card__media img,
.product-swiper .product-card__media .itemimg-inner img,
.product-swiper .product-card__media .rfp-thumb { height: 100%; }
.section__more { display: flex; justify-content: center; margin-top: 28px; }

/* =========================================================================
   非会員向け 新規会員CTA（人気商品の下）
   ========================================================================= */
.join-banner {
	margin-top: 36px;
	position: relative;
	overflow: hidden;
	background: var(--rf-cream);
	border-radius: var(--rf-radius-lg);
	padding: 64px 34px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 18px;
}
/* 背景：消耗品ブロックの背景画像（rfimg/joinbanner-bg.jpg）。
   上＝透明 → 下＝白 のグラデーションを重ね、本文の可読性を確保。 */
.join-banner::before {
	content: '';
	position: absolute;
	inset: 0;
	background: url('rfimg/joinbanner-bg.jpg') center/cover no-repeat;
	z-index: 0;
}
.join-banner::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.6) 55%, rgba(255,255,255,.92) 80%, #fff 100%);
	z-index: 0;
}
.join-banner__body,
.join-banner > .button { position: relative; z-index: 1; }
.join-banner__body { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.join-banner__mascot { flex: 0 0 auto; width: 84px; height: auto; }
.join-banner__free {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	color: var(--rf-accent);
	font-size: calc(1.125rem * var(--rf-fs));
	font-weight: 700;
	letter-spacing: 1px;
}
.join-banner__slash {
	font-size: calc(1.625rem * var(--rf-fs));
	font-weight: 400;
	line-height: 1;
	transform: translateY(-1px);
}
.join-banner__title { margin: 0; font-size: calc(1.5rem * var(--rf-fs)); font-weight: 900; color: var(--rf-ink); }
.join-banner__text { margin: 0; font-size: calc(0.9375rem * var(--rf-fs)); color: var(--rf-sub); line-height: 1.8; font-weight: 500; max-width: 700px; width: auto; }

/* =========================================================================
   会員ステップ（安心・便利な…）
   ========================================================================= */
.member-notice {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	background: var(--rf-warn-bg);
	border: 1px solid var(--rf-warn-line);
	border-radius: var(--rf-radius);
	padding: 14px 18px;
	margin-bottom: 18px;
	font-size: calc(0.8438rem * var(--rf-fs));
	font-weight: 700;
	color: var(--rf-warn);
}
.member-notice svg { flex: 0 0 auto; margin-top: 1px; }
/* TOPお知らせ（会員向けニュース）：背景#F5F5F5・影付き・角丸なし・情報アイコン */
.member-news-section { padding-top: 24px; padding-bottom: 0; }
.member-news {
	display: flex;
	align-items: center;
	gap: 10px;
	background: #F5F5F5;
	border: none;
	border-radius: 0;
	box-shadow: none;
	padding: 15px 20px;
	font-size: calc(0.9375rem * var(--rf-fs));
	color: var(--rf-body);
	line-height: 1.7;
}
.member-news > svg { flex: 0 0 auto; }
.member-news__text { min-width: 0; }
.member-news__text strong { color: var(--rf-accent); font-weight: 700; }
.member-steps {
	background: var(--rf-cream);
	border-radius: var(--rf-radius-lg);
	padding: 30px 34px;
	display: flex;
	align-items: center;
	gap: 28px;
	flex-wrap: wrap;
}
.member-steps__intro {
	display: flex;
	align-items: center;
	gap: 20px;
	flex: 1 1 360px;
	min-width: 300px;
}
.member-steps__mascot { flex: 0 0 auto; width: 92px; height: auto; }
.member-steps__intro h3 { margin: 0 0 8px; font-size: calc(1.125rem * var(--rf-fs)); font-weight: 900; color: var(--rf-ink); }
.member-steps__intro p { margin: 0; font-size: calc(0.9375rem * var(--rf-fs)); color: var(--rf-sub); line-height: 1.7; font-weight: 500; }
/* 「会員について詳しく」リンク（丸アイコン＋テキスト） */
.member-steps__link { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-size: calc(0.875rem * var(--rf-fs)); font-weight: 700; color: var(--rf-text); text-decoration: none; transition: opacity .15s ease; }
.member-steps__link-icon { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 9999px; background: var(--rf-green); display: inline-flex; align-items: center; justify-content: center; }
.member-steps__link:hover { opacity: .65; }
.member-steps__flow {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	flex: 1 1 420px;
}
.member-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	flex: 1;
}
.member-step__icon {
	width: 76px;
	height: 76px;
	border-radius: 9999px;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}
.member-step__label { font-size: calc(0.875rem * var(--rf-fs)); font-weight: 700; color: var(--rf-text); text-align: center; line-height: 1.3; }
.member-step__icon svg { stroke: var(--rf-pink); width: 36px; height: 36px; }
.member-steps__arrow { flex: 0 0 auto; margin-top: 22px; }

/* =========================================================================
   決済フロー
   ========================================================================= */
.payment { background: var(--rf-soft); border-radius: var(--rf-radius-lg); padding: 34px 36px; }
.payment__badge-row { text-align: center; margin-bottom: 8px; }
.payment__badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--rf-green);
	font-size: calc(1.125rem * var(--rf-fs));
	font-weight: 700;
	letter-spacing: .5px;
}
.payment__title { margin: 6px 0 18px; text-align: center; font-size: calc(1.5rem * var(--rf-fs)); font-weight: 900; color: var(--rf-ink); }
.payment__lead {
	margin: 0 auto 22px;
	text-align: center;
	font-size: calc(0.9375rem * var(--rf-fs));
	color: var(--rf-sub);
	font-weight: 500;
	max-width: 700px;
	line-height: 1.6;
}
.payment__lead strong { color: var(--rf-accent); }
.payment__steps {
	display: flex;
	align-items: stretch;
	gap: 10px;
	flex-wrap: wrap;
	justify-content: center;
}
.payment-step {
	flex: 1 1 180px;
	min-width: 170px;
	background: #fff;
	border-radius: 16px;
	padding: 22px 18px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: 188px;
}
.payment-step__side { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.payment-step__label {
	font-size: calc(1.75rem * var(--rf-fs));
	font-weight: 800;
	letter-spacing: .02em;
	color: var(--rf-mute);
	line-height: 1;
}
.payment-step__icon {
	width: auto;
	height: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 12px;
}
.payment-step__icon svg { width: 38px; height: 38px; }
.payment-step__body { display: block; }
.payment-step__title { display: block; font-size: calc(1rem * var(--rf-fs)); font-weight: 700; color: var(--rf-ink); line-height: 1.4; min-height: 38px; }
.payment-step__title em { display: block; font-style: normal; color: var(--rf-accent); font-size: calc(0.8125rem * var(--rf-fs)); margin-top: 2px; }
.payment-step__text { display: block; font-size: calc(0.875rem * var(--rf-fs)); color: var(--rf-sub); margin-top: 6px; line-height: 1.55; min-height: 34px; }
.payment__arrow { display: flex; align-items: center; }
.payment__note {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	background: var(--rf-soft);
	border: 1px dashed #999999;
	border-radius: var(--rf-radius);
	padding: 14px 18px;
	margin-top: 18px;
	font-size: calc(0.8438rem * var(--rf-fs));
	color: var(--rf-sub);
	line-height: 1.65;
	font-weight: 500;
}
/* 注意書きの先頭アイコンはスマホでも縮まないよう固定 */
.payment__note > svg { flex: 0 0 auto; width: 20px; height: 20px; }
.payment__note strong { color: var(--rf-ink); }
.payment__note strong.accent { color: var(--rf-accent); }
.payment-methods {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin-top: 18px;
}
.payment-method {
	background: #fff;
	border-radius: var(--rf-radius);
	padding: 16px;
	display: flex;
	align-items: center;
	gap: 12px;
}
.payment-method__title { font-size: calc(0.9375rem * var(--rf-fs)); font-weight: 700; color: var(--rf-ink); }
.payment-method__sub { font-size: calc(0.875rem * var(--rf-fs)); color: var(--rf-sub); }

/* =========================================================================
   FAQ
   ========================================================================= */
.faq { max-width: 760px; margin: 0 auto; }
.faq__title { margin: 0 0 18px; text-align: center; font-size: calc(1.5rem * var(--rf-fs)); font-weight: 900; letter-spacing: 1px; color: var(--rf-ink); }
.faq__list { display: flex; flex-direction: column; gap: 10px; }
.faq__item { border: 1px solid var(--rf-line); border-radius: var(--rf-radius); overflow: hidden; background: #fff; }
.faq__q {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 18px;
	background: transparent;
	border: none;
	cursor: pointer;
	text-align: left;
	font-family: inherit;
}
.faq__q-mark {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border-radius: 9999px;
	background: #efefef;
	color: #555;
	font-size: calc(0.8125rem * var(--rf-fs));
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}
.faq__q-text { flex: 1; font-size: calc(1rem * var(--rf-fs)); font-weight: 700; color: var(--rf-ink); line-height: 1.5; }
.faq__q-sign { flex: 0 0 auto; font-size: calc(1.375rem * var(--rf-fs)); font-weight: 700; color: var(--rf-mute); line-height: 1; }
.faq__a { display: none; padding: 0 18px 18px 56px; font-size: calc(0.9375rem * var(--rf-fs)); color: var(--rf-sub); line-height: 1.85; font-weight: 400; }
.faq__item.is-open .faq__a { display: block; }
.faq__a a { color: var(--rf-sub); }
.faq__a a:hover { opacity: .7; }
.faq__item.is-open .faq__q-sign { font-size: calc(1.25rem * var(--rf-fs)); }

/* =========================================================================
   ガイド導線 / お問い合わせCTA
   ========================================================================= */
.guide-links {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border-radius: 16px;
	overflow: hidden;
	background: var(--rf-soft);
	margin-bottom: 24px;
}
.guide-link {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 20px 22px;
	text-decoration: none;
	transition: opacity .18s ease;
}
.guide-link:hover { opacity: .7; }
.guide-link + .guide-link { border-left: 1px solid var(--rf-line); }
.guide-link__title { font-size: calc(0.9375rem * var(--rf-fs)); font-weight: 700; color: var(--rf-ink); }
.guide-link__sub { font-size: calc(0.875rem * var(--rf-fs)); color: var(--rf-sub); margin-top: 2px; }

.contact-cta {
	background: var(--rf-cream);
	border-radius: var(--rf-radius-lg);
	padding: 26px 34px;
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
	justify-content: space-between;
}
.contact-cta__body { display: flex; align-items: center; gap: 18px; }
.contact-cta__mascot { flex: 0 0 auto; width: 78px; height: auto; }
.contact-cta__text { font-size: calc(1rem * var(--rf-fs)); font-weight: 700; color: var(--rf-ink); line-height: 1.6; }

/* =========================================================================
   会員限定ゲート（非会員 / 承認待ち）
   ========================================================================= */
.member-gate {
	background: #fff;
	border: 1px solid var(--rf-line);
	border-radius: var(--rf-radius-lg);
	padding: 44px 28px;
	text-align: center;
	max-width: 640px;
	margin: 0 auto;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
}
/* ゲート余白の統一：ゲートを含む section に上下72pxを一律付与（左右はpage-widthの余白を維持） */
.section:has(> .member-gate) { padding-top: 36px !important; padding-bottom: 72px !important; }
/* 承認待ち/非会員ゲート（category.php 等の parts-guest-gate）は .page-width > .member-gate 構造のため、
   上記 .section:has(...) が効かない。この構造にも上下余白を付与してヘッダー/フッターと離す。 */
.page-width:has(> .member-gate) { padding-top: 36px; padding-bottom: 72px; }
.member-gate__icon {
	width: 60px;
	height: 60px;
	border-radius: 9999px;
	background: #fdeceb;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 18px;
}
.member-gate__title { margin: 0 0 14px; font-size: calc(1.375rem * var(--rf-fs)); font-weight: 900; color: var(--rf-ink); }
.member-gate__text { margin: 0 0 26px; font-size: calc(0.9063rem * var(--rf-fs)); line-height: 1.8; color: var(--rf-text); }
.member-gate__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.member-gate__mascot { display: block; width: 116px; height: auto; margin: 0 auto 6px; }

/* 会員登録完了ページ：プラグイン既定の「トップページへ戻る」ボタンと、
   文言を消した「会員情報ページはこちら」の空リンクを非表示（貼り付けHTMLで導線を出すため）。
   ※ .send 全般ではなく back_to_top_button を含む場合のみ隠す＝マイページ編集フォームの更新/削除ボタンには影響しない。 */
#memberpages .send:has(> .back_to_top_button) { display: none; }
#memberpages .post > p:has(> a:empty) { display: none; }

/* =========================================================================
   フッター
   ========================================================================= */
.rf-footer { background: var(--rf-grey); color: #555; }
.rf-footer__inner {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 28px;
	padding-top: 40px;
	padding-bottom: 28px;
}
.rf-footer__brand-name { font-size: calc(1.25rem * var(--rf-fs)); font-weight: 900; letter-spacing: 2px; color: var(--rf-ink); }
.rf-footer__logo { display: block; max-height: 44px; width: auto; }
.rf-footer__brand-sub { font-size: calc(0.5625rem * var(--rf-fs)); font-weight: 700; letter-spacing: 4px; color: var(--rf-mute); margin-top: 3px; }
.rf-footer__brand-text { font-size: calc(0.8125rem * var(--rf-fs)); color: #777; line-height: 1.7; margin: 14px 0 0; }
.rf-footer__heading { font-size: calc(0.8125rem * var(--rf-fs)); font-weight: 700; color: var(--rf-ink); margin-bottom: 12px; }
.rf-footer__menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.rf-footer__menu a { color: #666; text-decoration: none; font-size: calc(0.8125rem * var(--rf-fs)); transition: opacity .18s ease; }
.rf-footer__menu a:hover { opacity: .65; }
.rf-footer__bottom { border-top: 1px solid #dcdcdc; }
.rf-footer__copy { padding-top: 16px; padding-bottom: 16px; font-size: calc(0.6875rem * var(--rf-fs)); color: #888; }

/* ---- キャンペーンバナー ------------------------------------------------ */
.campaign-banner {
	position: relative;
	display: block;
	border-radius: 16px;
	overflow: hidden;
	text-decoration: none;
	min-height: 200px;
	background: #eef0ef;
}
.campaign-banner img { width: 100%; height: 200px; object-fit: cover; display: block; }
.campaign-banner__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, .72) 42%, rgba(255, 255, 255, 0) 70%);
}
.campaign-banner__body { position: absolute; left: 24px; top: 50%; transform: translateY(-50%); z-index: 2; }
.campaign-banner__title { font-size: calc(1.5rem * var(--rf-fs)); font-weight: 900; line-height: 1.25; color: var(--rf-ink); }
.campaign-banner__more { margin-top: 12px; display: inline-flex; align-items: center; gap: 5px; color: var(--rf-ink); font-size: calc(0.8125rem * var(--rf-fs)); font-weight: 700; }

/* =========================================================================
   アニメーション
   ========================================================================= */
@keyframes rfBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes rfHeroIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes rfLayerIn { from { opacity: 0; transform: translateX(42px); } to { opacity: 1; transform: none; } }
@keyframes rfFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes rfDrawerIn { from { transform: translateX(-100%); } to { transform: translateX(0); } }

/* =========================================================================
   タブレット（〜1024px）
   ========================================================================= */
@media screen and (max-width: 1024px) {
	.hero__title { font-size: calc(2.375rem * var(--rf-fs)); }
	.product-rail__track > .product-card { flex-basis: 180px; }
	.payment-methods { grid-template-columns: 1fr; }

	/* ヘッダーはこの幅以下でハンバーガー（ドロワー）に集約 */
	.header-search { display: none; }
	.category-bar { display: none; }
	.header-actions__member { display: none; }
	.header-actions__guide { display: none; }
	.header-actions__logout { display: none; }
	.header-actions__link:not(.cart-link) { display: none; }
	.header-actions__search-icon { display: flex; }
	.header-actions__mobile-auth { display: flex; }
	.cart-link__label { display: none; }
	.cart-link { gap: 0; }
	.header-burger { display: flex; }
	.rf-header__inner { gap: 16px; }
}

/* =========================================================================
   スマホ（〜768px）
   ========================================================================= */
@media screen and (max-width: 768px) {
	.page-width { padding-left: 16px; padding-right: 16px; }

	/* アナウンスバー：スマホは余白・文字を詰める */
	.announcement-bar__inner { gap: 6px; padding-top: 7px; padding-bottom: 7px; font-size: calc(0.75rem * var(--rf-fs)); }

	/* マイページ/新規入会：スマホの左右・上下余白 */
	#content.member-page,
	#content.cart-page { padding: 20px 16px 40px !important; }

	/* ヘッダー */
	.rf-header__inner { flex-wrap: nowrap; gap: 10px; }
	.header-search { display: none; }
	.rf-header__logo { flex: 0 1 auto; min-width: 0; }
	.rf-header__logo-name { font-size: calc(1rem * var(--rf-fs)); letter-spacing: 1px; }
	.rf-header__logo-sub { font-size: calc(0.4375rem * var(--rf-fs)); letter-spacing: 2px; }
	.rf-header__logo img { max-height: 34px; }
	.header-actions { gap: 14px; margin-left: auto; flex: 0 0 auto; }
	.header-actions__member { display: none; }
	.header-actions__search-icon { display: flex; }
	.header-actions__guide { display: none; }
	.header-burger { display: flex; }

	/* カテゴリナビ → ドロワーに集約 */
	.category-bar { display: none; }

	/* ヒーロー */
	.hero__inner { grid-template-columns: 1fr; min-height: 0; gap: 0; padding-top: 8px; padding-bottom: 20px; }
	.hero__slides { order: 1; padding: 28px 0 8px; }
	.hero__title { font-size: calc(1.875rem * var(--rf-fs)); }
	.hero__actions { gap: 10px; flex-wrap: nowrap; }
	.hero__actions .button { flex: 0 1 auto; min-width: 0; padding-left: 16px; padding-right: 16px; }
	/* ゲートのログイン/新規会員登録ボタンをスマホでも1行に収める */
	.member-gate__actions { flex-wrap: nowrap; gap: 10px; }
	.member-gate__actions .button { flex: 0 1 auto; min-width: 0; padding-left: 16px; padding-right: 16px; }
	.hero__dots { position: static; order: 2; justify-content: flex-start; margin: 6px 0 16px; }
	.hero__media { order: 3; height: 220px; margin-bottom: 8px; }
	.hero__media-img { position: static; inset: auto; height: 200px; }
	.hero__mascot { width: 96px; right: 6px; }

	/* 信頼バー */
	.trust-bar { grid-template-columns: repeat(2, 1fr); }
	.trust-bar__item { flex-direction: column; align-items: center; text-align: center; gap: 9px; padding: 18px 12px; }
	.trust-bar__item + .trust-bar__item { border-left: none; }
	.trust-bar__item:nth-child(odd) { border-left: none; }
	.trust-bar__item:nth-child(even) { border-left: 1px solid var(--rf-line); }
	.trust-bar__item:nth-child(n+3) { border-top: 1px solid var(--rf-line); }
	.trust-bar__text { font-size: calc(0.85rem * var(--rf-fs)); }
	.trust-bar__text em { font-size: calc(0.9rem * var(--rf-fs)); }

	/* 新商品 + キャンペーンは縦積み */
	.news-campaign { grid-template-columns: 1fr; gap: 24px; }

	/* セクション */
	.section__title { font-size: calc(1.375rem * var(--rf-fs)); }

	/* グリッド：2列 */
	.product-grid,
	.product-grid--news { grid-template-columns: repeat(2, 1fr); }
	.product-rail__btn { display: none; }
	.product-swiper .swiper-slide { width: 150px; }
	/* スマホは価格をひとまわり小さく */
	.product-card__price { font-size: calc(1.0625rem * var(--rf-fs)); }
	.product-card__price .tax_inc_block { font-size: calc(0.8125rem * var(--rf-fs)); }
	.news-campaign .product-swiper .swiper-slide { width: 150px; }

	/* 価格ロックのラベル：狭いカードでも余白・アイコンを保つ */
	.product-card__locked {
		gap: 6px;
		padding: 5px 10px;
		font-size: calc(0.75rem * var(--rf-fs));
		line-height: 1.3;
	}

	/* 会員ステップ：縦積み＋フロー2列 */
	.member-steps { padding: 20px 6px; gap: 18px; }
	.member-steps__intro { min-width: 0; flex-basis: 100%; gap: 14px; }
	.member-steps__flow {
		min-width: 0;
		flex-basis: 100%;
		display: flex;
		align-items: flex-start;
		gap: 0;
	}
	/* 1段（横一列）。余白を詰めてアイコン・文字を大きく */
	.member-steps__arrow { display: block; margin-top: 26px; flex: 0 0 auto; }
	.member-step { gap: 6px; flex: 1 1 0; min-width: 0; }
	.member-step__icon { width: 62px; height: 62px; }
	.member-step__icon svg { width: 30px; height: 30px; }
	.member-step__label { font-size: calc(0.8rem * var(--rf-fs)); line-height: 1.3; }

	/* 決済フロー：縦積み・矢印は非表示 */
	.payment { padding: 24px 16px; }
	.payment__title { margin-bottom: 12px; }
	.payment__steps { flex-direction: column; gap: 10px; }
	.payment__arrow { display: none; }
	/* スマホ：横型カード（アイコン＋STEPを左・テキストを右・左寄せ） */
	.payment-step {
		flex-direction: row;
		align-items: center;
		text-align: left;
		min-height: 0;
		gap: 16px;
		padding: 16px 18px;
	}
	.payment-step__side { flex: 0 0 auto; gap: 8px; }
	.payment-step__icon { margin-bottom: 0; }
	.payment-step__body { flex: 1; min-width: 0; }
	.payment-step__title { min-height: 0; font-size: calc(1.15rem * var(--rf-fs)); }
	.payment-step__title em { font-size: calc(0.95rem * var(--rf-fs)); }
	.payment-step__text { min-height: 0; font-size: calc(1rem * var(--rf-fs)); }

	/* ガイド導線：2列・アイコン上 */
	.guide-links { grid-template-columns: repeat(2, 1fr); }
	.guide-link { flex-direction: column; align-items: center; text-align: center; gap: 9px; padding: 18px 12px; }
	.guide-link:nth-child(odd) { border-left: none; }
	.guide-link + .guide-link { border-left: none; }
	.guide-link:nth-child(even) { border-left: 1px solid var(--rf-line); }
	.guide-link:nth-child(n+3) { border-top: 1px solid var(--rf-line); }

	/* お問い合わせCTA */
	.contact-cta { flex-direction: column; align-items: flex-start; gap: 18px; }

	/* フッター：2列 */
	.rf-footer__inner { grid-template-columns: repeat(2, 1fr); gap: 24px; }
	.join-banner { padding: 28px 18px; }
	/* レスポンシブ改行ユーティリティ：スマホでのみ br.br-sp を有効化 / br.br-pc を無効化 */
	br.br-sp { display: inline; }
	br.br-pc { display: none; }
	/* スマホでは join-banner の強制改行を無効化して自然に折り返す */
	.join-banner__text br { display: none; }
	/* 複数行に折り返す本文はスマホでは左寄せの方が読みやすい（見出し・ボタンは中央のまま） */
	.join-banner__text,
	.payment__lead,
	.member-gate__text,
	.rf-doc__lead,
	.rf-doc__cta-text,
	.rf-doc-card__text,
	.rf-maint__text { text-align: left; }
}

/* =========================================================================
   会員ログイン / 認証ページ
   ========================================================================= */
.auth-page { padding-top: 36px; padding-bottom: 56px; }
.auth-head { text-align: center; margin-bottom: 48px; }
.auth-head__mascot { display: block; width: 88px; height: auto; margin: 0 auto 14px; }
.auth-title { margin: 0 0 8px; font-size: calc(1.625rem * var(--rf-fs)); font-weight: 900; color: var(--rf-ink); }
.auth-subtitle { margin: 0; font-size: calc(1rem * var(--rf-fs)); color: var(--rf-text); line-height: 1.7; }
.auth-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 24px; align-items: stretch; max-width: 880px; margin: 0 auto; }
.auth-grid--single { grid-template-columns: 1fr; max-width: 460px; }
.auth-card__note { margin: 14px 0 0; font-size: calc(0.8125rem * var(--rf-fs)); color: var(--rf-mute); line-height: 1.7; text-align: center; }
.auth-grid--single .auth-links { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--rf-line); }
.auth-card { background: #fff; border: 1px solid var(--rf-line); border-radius: var(--rf-radius-lg); padding: 32px 30px; box-shadow: 0 2px 10px rgba(0, 0, 0, .04); }
.auth-card--accent { background: var(--rf-cream); border-color: transparent; }
.auth-card__title { margin: 0 0 6px; font-size: calc(1.125rem * var(--rf-fs)); font-weight: 700; color: var(--rf-ink); display: flex; align-items: center; gap: 9px; }
.auth-card__lead { margin: 0 0 22px; font-size: calc(0.875rem * var(--rf-fs)); color: var(--rf-mute); line-height: 1.7; }
.auth-card__more { text-align: center; margin: 16px 0 0; }
.auth-card__more a { display: inline-flex; align-items: center; gap: 5px; font-size: calc(0.875rem * var(--rf-fs)); font-weight: 500; color: var(--rf-text); text-decoration: none; }
.auth-card__more a:hover { opacity: .6; }
.auth-field { margin-bottom: 16px; }
.auth-field label { display: block; font-size: calc(0.8125rem * var(--rf-fs)); font-weight: 700; color: var(--rf-ink); margin-bottom: 7px; }
.auth-field input[type="text"],
.auth-field input[type="email"],
.auth-field input[type="password"] { width: 100%; height: 50px; border: 1px solid #d8d8d8; border-radius: 12px; padding: 0 16px; font-family: inherit; font-size: 15px; color: var(--rf-ink); outline: none; transition: border-color .15s ease, box-shadow .15s ease; box-sizing: border-box; }
.auth-field input:focus { border-color: var(--rf-accent); box-shadow: 0 0 0 3px rgba(207, 23, 19, .12); }
/* プラグイン側 #loginmail 等の角なし指定を上書き */
.auth-page .auth-field input[type="text"],
.auth-page .auth-field input[type="email"],
.auth-page .auth-field input[type="password"] { border-radius: 12px !important; }
.auth-remember { display: flex; align-items: center; gap: 8px; font-size: calc(0.8125rem * var(--rf-fs)); color: var(--rf-text); margin-bottom: 20px; cursor: pointer; }
.auth-remember input { width: 17px; height: 17px; accent-color: var(--rf-accent); }
.auth-submit { margin-bottom: 16px; position: relative; }
.auth-submit--login .auth-login-icon { position: absolute; left: calc(50% - 2.9em); top: 50%; transform: translateY(-50%); z-index: 2; pointer-events: none; }
/* アイコン＋文字の合計が中央に来るよう、文字をアイコン幅＋間隔ぶん右へ寄せる */
.auth-submit--login input[type="submit"] { text-indent: 1.75em; }
.auth-submit--icon button { display: flex; align-items: center; justify-content: center; gap: 10px; }
.auth-submit--icon button svg { flex: none; }
/* プラグイン側 #member_login の色・角・幅指定を上書き（全auth送信ボタン共通） */
.auth-page .auth-submit button,
.auth-page .auth-submit input[type="submit"] { background: var(--rf-accent) !important; color: #fff !important; border: none !important; border-radius: 9999px !important; width: 100% !important; }
/* アイコン付きボタン（再発行・変更）のみ flex 中央寄せ。ログインは絶対配置方式なので除外 */
.auth-page .auth-submit--icon button { display: flex !important; align-items: center; justify-content: center; gap: 10px; text-indent: 0 !important; }
.auth-submit input[type="submit"],
.auth-submit button { width: 100%; height: 54px; appearance: none; border: none; cursor: pointer; background: var(--rf-accent); color: #fff; font-family: inherit; font-size: calc(1rem * var(--rf-fs)); font-weight: 700; border-radius: 9999px; transition: opacity .18s ease; }
.auth-submit input[type="submit"]:hover,
.auth-submit button:hover { opacity: .85; }
.auth-links { display: flex; flex-direction: column; gap: 10px; text-align: center; }
.auth-links a { font-size: calc(0.8125rem * var(--rf-fs)); color: var(--rf-text); text-decoration: none; font-weight: 500; }
.auth-links a:hover { opacity: .6; }
.auth-benefits { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.auth-benefits li { display: flex; align-items: flex-start; gap: 10px; font-size: calc(1rem * var(--rf-fs)); color: var(--rf-text); line-height: 1.6; }
.auth-benefits li svg { flex: 0 0 auto; margin-top: 2px; }
.auth-error { background: #fdecea; border: 1px solid #f3b5b1; color: var(--rf-accent-strong); border-radius: 12px; padding: 13px 16px; font-size: calc(0.8125rem * var(--rf-fs)); font-weight: 700; margin: 0 auto 20px; max-width: 880px; }
.auth-error:empty { display: none; }
.auth-explanation { max-width: 880px; margin: 0 auto; }
.auth-explanation:empty { display: none; }
/* 会員登録・パスワード等の完了ページ */
.rf-complete { max-width: 560px; margin: 24px auto; background: #fff; border: 1px solid var(--rf-line); border-radius: var(--rf-radius-lg); padding: 48px 30px; text-align: center; box-shadow: 0 2px 10px rgba(0,0,0,.04); }
.rf-complete__mascot { display: block; width: 116px; height: auto; margin: 0 auto 18px; }
.rf-complete__title { margin: 0 0 14px; font-size: calc(1.2rem * var(--rf-fs)); font-weight: 900; color: var(--rf-ink); }
.rf-complete__text { margin: 0 0 28px; font-size: calc(0.9375rem * var(--rf-fs)); line-height: 1.9; color: var(--rf-text); }
.rf-complete__cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--rf-accent); color: #fff !important; font-weight: 700; text-decoration: none; padding: 14px 34px; border-radius: 9999px; transition: opacity .18s ease; }
.rf-complete__cta:hover { opacity: .85; }
.rf-complete__cta svg { flex: none; }
.rf-complete__sub { display: block; margin-top: 18px; font-size: calc(0.8125rem * var(--rf-fs)); color: var(--rf-sub); text-decoration: none; }
.rf-complete__sub:hover { opacity: .6; }

@media screen and (max-width: 768px) {
	.auth-grid { grid-template-columns: 1fr; }
	.auth-card { padding: 26px 20px; }
}

/* =========================================================================
   マイページ
   ========================================================================= */
.mypage-head { display: flex; align-items: center; gap: 18px; background: var(--rf-cream); border-radius: var(--rf-radius-lg); padding: 24px 28px; margin-bottom: 26px; flex-wrap: wrap; }.mypage-head__mascot { width: 64px; height: auto; flex: 0 0 auto; }
.mypage-head__info { flex: 1 1 auto; min-width: 0; }
.mypage-head__name { font-size: calc(1.25rem * var(--rf-fs)); font-weight: 700; color: var(--rf-ink); margin: 0 0 4px; }
.mypage-head__id { font-size: calc(0.8125rem * var(--rf-fs)); color: var(--rf-text); }
.mypage-head__id strong { color: var(--rf-ink); }
.rf-front #memberpages .member_submenu { list-style: none; margin: 0 0 24px; padding: 0; display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.rf-front #memberpages .member_submenu li { margin: 0; list-style: none; }
.rf-front #memberpages .member_submenu a { display: inline-flex; align-items: center; gap: 6px; width: auto; font-size: calc(0.8125rem * var(--rf-fs)); font-weight: 500; text-decoration: none; color: var(--rf-text); background: none; border: none; border-radius: 0; padding: 4px 2px; transition: color .15s ease; }
.rf-front #memberpages .member_submenu a:hover { background: none; color: var(--rf-text); opacity: .6; text-decoration: none; }

.rf-front #memberinfo h3.mypage-section__title { margin: 34px 0 14px; padding: 5px 0; color: var(--rf-text); font-weight: 700; }
.rf-front #memberinfo h3.mypage-section__title:first-of-type { margin-top: 8px; }
.mypage-section__title { font-size: calc(1.125rem * var(--rf-fs)); font-weight: 700; color: var(--rf-ink); margin: 0 0 14px; padding-bottom: 12px; border-bottom: 2px solid var(--rf-ink); display: flex; align-items: center; gap: 9px; }
.mypage-note { font-size: calc(0.75rem * var(--rf-fs)); color: var(--rf-mute); margin: 0 0 12px; }
/* 見出しアイコンは赤でなくグレー（PHP側 stroke="var(--rf-accent)" を上書き） */
.rf-front #memberinfo .mypage-section__title svg { stroke: var(--rf-mute); }

/* 会員フォームのテーブル（マイページ編集・新規入会共通。.member-page スコープで両方に適用。購入履歴テーブルは親テーマに委譲） */
.rf-front .member-page .customer_form { width: 100%; border-collapse: collapse; font-size: calc(0.875rem * var(--rf-fs)); border: none; }
.rf-front .member-page .customer_form th,
.rf-front .member-page .customer_form td { text-align: left; padding: 13px 14px; border-bottom: 1px solid var(--rf-line); vertical-align: top; line-height: 1.6; }
.rf-front .member-page .customer_form th { width: 180px; font-weight: 700; color: var(--rf-ink); background: var(--rf-soft); white-space: nowrap; }
.customer_form input[type="text"],
.customer_form input[type="email"],
.customer_form input[type="password"],
.customer_form input[type="tel"],
.customer_form select,
.customer_form textarea { width: 100%; max-width: 360px; min-height: 44px; border: 1px solid #d8d8d8; border-radius: 10px; padding: 0 14px; font-family: inherit; font-size: 15px; color: var(--rf-ink); outline: none; box-sizing: border-box; transition: border-color .15s ease, box-shadow .15s ease; }
.customer_form textarea { padding: 12px 14px; min-height: 84px; }
/* 姓/名・フリガナ姓/名（分割入力）。PCは各170pxで横並び、スマホは幅いっぱいに */
.customer_form #name1, .customer_form #name2,
.customer_form #name3, .customer_form #name4 { width: 170px; max-width: calc(50% - 6px); }
@media screen and (max-width: 768px) {
	.customer_form #name1, .customer_form #name2,
	.customer_form #name3, .customer_form #name4 { width: 100%; max-width: 100%; }
}
/* セレクトはネイティブの矢印のまま、右に余白を足して文字と重ならないようにする */
.customer_form select { padding-right: 44px; }
.customer_form input:focus,
.customer_form select:focus,
.customer_form textarea:focus { border-color: var(--rf-accent); box-shadow: 0 0 0 3px rgba(207, 23, 19, .12); }
.currency_code { font-size: calc(0.75rem * var(--rf-fs)); color: var(--rf-mute); margin-bottom: 12px; }

/* 会員情報編集フォームのボタン群 */
/* 会員情報編集：招待コード欄は非表示（新規登録フォームでは表示する） */
#memberedit .customkey_access_code { display: none; }
.rf-front #memberinfo .send { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.rf-front #memberinfo .send input { appearance: none; cursor: pointer; font-family: inherit; font-size: calc(0.875rem * var(--rf-fs)); font-weight: 700; height: 50px; padding: 0 26px; border-radius: 9999px; border: 1.5px solid transparent; transition: opacity .18s ease, background .18s ease, color .18s ease; }
.rf-front #memberinfo .send input.editmember { background: var(--rf-accent); color: #fff; border: none; }
.rf-front #memberinfo .send input.editmember:hover { opacity: .85; }
.rf-front #memberinfo .send input.top { background: #fff; color: var(--rf-ink); border-color: #d6d6d6; }
.rf-front #memberinfo .send input.top:hover { background: var(--rf-soft); }
/* 会員マイページの退会ボタン・「トップページへ戻る」は非表示（親テーマ usces_cart.css に勝つよう !important） */
.rf-front #memberinfo .send input.deletemember,
input.deletemember,
.rf-front #memberinfo .send input.top,
input[name="top"].top { display: none !important; }

@media screen and (max-width: 768px) {
	.mypage-head { flex-direction: column; align-items: flex-start; }
	.rf-front #memberpages .member_submenu { width: 100%; }
	.rf-front .member-page .customer_form th { width: auto; }
	.rf-front #memberinfo .send input { flex: 1 1 auto; }
}

/* =========================================================================
   固定ページ用ドキュメント（会員登録説明 / ご利用ガイド / FAQ）
   ========================================================================= */
.rf-doc { max-width: 880px; margin: 0 auto; padding: 36px 0 72px; box-sizing: border-box; font-family: var(--rf-font); color: var(--rf-body); font-weight: 400; --rf-ink: var(--rf-body); --rf-text: var(--rf-body); }
.rf-doc p, .rf-doc td, .rf-doc li, .rf-doc .faq__a { font-weight: 400; }
.rf-doc a { color: var(--rf-blue);}
.rf-doc__lead.rf-doc__lead--block { margin: 0 0 36px; max-width: none; text-align: left; }
.rf-doc__lead strong { color: var(--rf-ink); }
.rf-doc__lead strong.accent { color: var(--rf-accent); }
.rf-doc__table--mt { margin-top: var(--rf-doc-block); }
.rf-doc .join-banner__text { color: var(--rf-body); font-size: calc(0.9375rem * var(--rf-fs)); }
.rf-doc .join-banner__free { font-size: calc(1.125rem * var(--rf-fs)); }
.rf-doc * { box-sizing: border-box; }
.rf-doc__head { text-align: center; margin-bottom: var(--rf-doc-section); }
.rf-doc__mascot { width: 92px; height: auto; display: block; margin: 0 auto var(--rf-doc-text); }
.rf-doc__badge { display: inline-flex; align-items: center; gap: 7px; background: var(--rf-accent); color: #fff; font-size: calc(1rem * var(--rf-fs)); font-weight: 700; padding: 6px 16px; border-radius: 9999px; margin-bottom: var(--rf-doc-block); letter-spacing: .04em; }
.rf-doc__badge--plain { background: transparent; color: var(--rf-green); padding: 0; }
.rf-doc__badge--plain svg { width: 1.05em; height: 1.05em; }
.rf-doc__title { margin: 0 0 var(--rf-doc-block); font-size: calc(2rem * var(--rf-fs)); font-weight: 900; line-height: 1.35; color: var(--rf-ink); }
.rf-doc__lead { margin: 0 auto; max-width: 620px; font-size: calc(1rem * var(--rf-fs)); line-height: 1.9; color: var(--rf-text); }
.rf-doc__section { margin-top: var(--rf-doc-section); }
.rf-doc__h2 { font-size: calc(1.375rem * var(--rf-fs)); font-weight: 900; color: var(--rf-ink); margin: 0 0 var(--rf-doc-head-gap); display: flex; align-items: center; gap: 10px; }
.rf-doc__h2 .ico { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.rf-doc__h2 .ico svg { width: calc(1.375rem * var(--rf-fs)); height: calc(1.375rem * var(--rf-fs)); }
.rf-doc__h3 { font-size: calc(1.0625rem * var(--rf-fs)); font-weight: 700; color: var(--rf-ink); margin: var(--rf-doc-section) 0 var(--rf-doc-head-gap); }

/* 3カラムのメリットカード */
.rf-doc__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.rf-doc-card { background: #fff; border: 1px solid var(--rf-line); border-radius: var(--rf-radius); box-shadow: 0 2px 10px rgba(0, 0, 0, .04); padding: 30px 22px; text-align: center; }
.rf-doc-card__icon { display: flex; align-items: center; justify-content: center; margin: 0 auto var(--rf-doc-block); }
.rf-doc-card__icon svg { width: 46px; height: 46px; }
.rf-doc-card__title { font-size: calc(1.0625rem * var(--rf-fs)); font-weight: 700; color: var(--rf-ink); margin: 0 0 var(--rf-doc-text); }
.rf-doc-card__text { font-size: calc(0.9375rem * var(--rf-fs)); color: var(--rf-text); line-height: 1.8; margin: 0; }

/* 説明文パラグラフ（左寄せの本文ブロック） */
.rf-doc__para { font-size: calc(0.9375rem * var(--rf-fs)); color: var(--rf-text); line-height: 1.9; margin: 0 0 var(--rf-doc-block); }
.rf-doc__para:last-child { margin-bottom: 0; }
.rf-doc__para strong { color: var(--rf-ink); }
.rf-doc__inline-link { color: var(--rf-sub); font-weight: 700; text-decoration: none; border-bottom: 1px solid currentColor; }
.rf-doc__inline-link:hover { opacity: .7; }
.rf-doc__inquiry { margin-top: var(--rf-doc-block); border: 1px dashed #999999; border-radius: var(--rf-radius); padding: 14px 18px; }
.rf-doc__inquiry p { margin: 0 0 6px; font-size: calc(0.8438rem * var(--rf-fs)); color: var(--rf-sub); line-height: 1.65; font-weight: 500; }
.rf-doc__inquiry a { display: inline-flex; align-items: center; font-size: calc(0.8438rem * var(--rf-fs)); color: var(--rf-sub); font-weight: 500; text-decoration: none; border-bottom: 1px solid currentColor; }
.rf-doc__inquiry a:hover { opacity: .7; }

/* 安心メッセージ（やわらかいクリーム地の吹き出し風） */
.rf-doc__reassure { display: flex; gap: 12px; align-items: flex-start; background: var(--rf-cream); border-radius: var(--rf-radius); padding: 18px 22px; margin: var(--rf-doc-block) 0 0; }
.rf-doc__reassure svg { flex: 0 0 auto; margin-top: 2px; }
.rf-doc__reassure p { margin: 0; font-size: calc(1rem * var(--rf-fs)); color: var(--rf-text); line-height: 1.8; }

/* 重要なお知らせ（赤アクセントの左罫＋淡い地） */
.rf-doc__note { border-left: 4px solid var(--rf-accent); background: var(--rf-soft); border-radius: 6px; padding: 18px 22px; margin-top: var(--rf-doc-block); }
.rf-doc__note-title { display: flex; align-items: center; gap: 8px; font-size: calc(1.0625rem * var(--rf-fs)); font-weight: 700; color: var(--rf-ink); margin: 0 0 8px; }
.rf-doc__note-title svg { flex: 0 0 auto; }
.rf-doc__note p { margin: 0; font-size: calc(1rem * var(--rf-fs)); color: var(--rf-text); line-height: 1.85; }
.rf-doc__note p + p { margin-top: 10px; }
.rf-doc__note strong { color: var(--rf-accent); }

/* ステップフロー（TOPの決済フロー風：グレー枠の中に白カード） */
.rf-flow { display: flex; flex-direction: column; gap: 12px; background: var(--rf-soft); border-radius: var(--rf-radius-lg); padding: 24px; }
.rf-flow__step { background: #fff; border-radius: var(--rf-radius); padding: 20px 22px; }
.rf-flow__label { display: inline-block; font-size: calc(1.125rem * var(--rf-fs)); font-weight: 700; letter-spacing: .1em; color: var(--rf-green); margin-bottom: var(--rf-doc-text); }
.rf-flow__title { font-size: calc(1.125rem * var(--rf-fs)); font-weight: 700; color: var(--rf-ink); margin: 0 0 var(--rf-doc-text); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rf-flow__title .tag { font-size: calc(0.8125rem * var(--rf-fs)); font-weight: 700; color: var(--rf-badge-text); background: var(--rf-badge); padding: 3px 10px; border-radius: 9999px; }
.rf-flow__text { font-size: calc(0.9375rem * var(--rf-fs)); color: var(--rf-text); line-height: 1.85; margin: 0; }

/* 情報テーブル */
.rf-doc__table { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--rf-line); border-radius: var(--rf-radius); overflow: hidden; }
.rf-doc__table th, .rf-doc__table td { text-align: left; padding: 16px 18px; border-bottom: 1px solid var(--rf-line); font-size: calc(0.9375rem * var(--rf-fs)); line-height: 1.8; vertical-align: top; }
.rf-doc__table tr:last-child th, .rf-doc__table tr:last-child td { border-bottom: none; }
.rf-doc__table th { width: 190px; font-weight: 700; color: var(--rf-ink); background: var(--rf-soft); white-space: nowrap; border-right: 1px solid var(--rf-line); }
.rf-doc__table td strong { color: var(--rf-ink); }
.rf-doc__table td strong.accent,
.rf-doc strong.accent { color: var(--rf-accent); }
/* accent は wrapper (.rf-doc) が無い環境でも確実に赤くする。#content で親テーマより詳細度を上げる */
strong.accent,
#content strong.accent,
.entry-content strong.accent { color: var(--rf-accent); }
/* 親テーマ `.entry-content table{border-collapse:collapse;border:1px solid #ccc}` に負けないよう詳細度を上げ、外枠・セル線を RF 仕様で固定 */
.entry-content table.rf-doc__table,
.rf-doc table.rf-doc__table { border-collapse: separate; border-spacing: 0; border: 1px solid var(--rf-line); }
.entry-content table.rf-doc__table th,
.entry-content table.rf-doc__table td,
.rf-doc table.rf-doc__table th,
.rf-doc table.rf-doc__table td { border: none; border-bottom: 1px solid var(--rf-line); }
.entry-content table.rf-doc__table th,
.rf-doc table.rf-doc__table th { border-right: 1px solid var(--rf-line); }
.entry-content table.rf-doc__table tr:last-child th,
.entry-content table.rf-doc__table tr:last-child td,
.rf-doc table.rf-doc__table tr:last-child th,
.rf-doc table.rf-doc__table tr:last-child td { border-bottom: none; }

/* CTA */
.rf-doc__cta { text-align: center; background: var(--rf-cream); border-radius: var(--rf-radius-lg); padding: 40px 28px 44px; margin-top: var(--rf-doc-section); }
.rf-doc__cta-title { font-size: calc(1.25rem * var(--rf-fs)); font-weight: 900; color: var(--rf-ink); margin: 0 0 var(--rf-doc-text); }
.rf-doc__cta-text { font-size: calc(1rem * var(--rf-fs)); color: var(--rf-text); line-height: 1.8; margin: 0 0 var(--rf-doc-block); }
/* CTA：TOPの新規会員CTA（join-banner）と同じ中身。背景はクリームのまま（プレースホルダー画像なし） */
.rf-doc__cta--join { position: static; overflow: visible; background: #fff; border: 1px solid var(--rf-line); box-shadow: 0 2px 10px rgba(0, 0, 0, .04); }
.rf-doc__cta--join::before,
.rf-doc__cta--join::after { display: none; }
.rf-doc__cta--join .join-banner__body { position: static; z-index: auto; margin-bottom: 14px; }

/* 決済方法カード（TOPと同じ構成の簡易版） */
.rf-doc__methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: var(--rf-doc-block); margin-bottom: var(--rf-doc-block); }

@media screen and (max-width: 768px) {
	.rf-doc { padding-left: 16px; padding-right: 16px; }
	.rf-doc__title { font-size: calc(1.625rem * var(--rf-fs)); }
	.rf-doc__cards { grid-template-columns: 1fr; }
	.rf-doc__methods { grid-template-columns: 1fr; }
	.member-gate { padding: 28px 20px; margin: 0 auto; }
	.rf-doc__table th { width: 120px; white-space: normal; }
}

/* =========================================================================
   狭いスマホ（〜375px）
   ========================================================================= */
@media screen and (max-width: 400px) {
	.member-step__icon { width: 54px; height: 54px; }
	.member-step__icon svg { width: 26px; height: 26px; }
	.member-step__label { font-size: calc(0.75rem * var(--rf-fs)); }
}

/* =========================================================================
   商品詳細ページ（無印風・クリーン2カラム）
   ========================================================================= */
.item-detail { padding-top: 24px; padding-bottom: 24px; }

/* パンくず */
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; font-size: calc(0.75rem * var(--rf-fs)); color: var(--rf-mute); margin-bottom: 22px; }
.breadcrumb a { color: var(--rf-mute); text-decoration: none; }
.breadcrumb a:hover { color: var(--rf-ink); }
.breadcrumb span.sep { color: #ccc; }
.breadcrumb span.current { color: var(--rf-ink); }

.item-detail__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }

/* ギャラリー */
.item-gallery { position: sticky; top: 20px; min-width: 0; }
.item-gallery__main { border-radius: var(--rf-radius); overflow: hidden; background: var(--rf-soft); width: 100%; }
.item-gallery__main .swiper-slide { aspect-ratio: 1 / 1; }
.item-gallery__main .swiper-slide img,
.item-gallery__main .swiper-slide .rf-ph { width: 100%; height: 100%; object-fit: cover; display: block; }
.item-gallery__main { cursor: grab; }
.item-gallery__main:active { cursor: grabbing; }
.item-gallery__dots { display: none; }
.item-gallery__thumbs { margin-top: 12px; }
.item-gallery__thumbs .swiper-slide { width: 84px; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; cursor: pointer; opacity: .5; border: 1.5px solid transparent; transition: opacity .15s ease, border-color .15s ease; }
.item-gallery__thumbs .swiper-slide img,
.item-gallery__thumbs .swiper-slide .rf-ph { width: 100%; height: 100%; object-fit: cover; display: block; }
.item-gallery__thumbs .swiper-slide-thumb-active { opacity: 1; border-color: var(--rf-mute-soft, #c4c4c4); }

/* プレースホルダー（プレビュー用の擬似商品画像） */
.rf-ph { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #efeee9, #e4e2db); color: #b3ab9d; font-size: 13px; font-weight: 700; letter-spacing: .04em; }

/* 詳細（右カラム） */
.item-detail__info { min-width: 0; }
.item-cat-label { display: inline-block; font-size: calc(0.6875rem * var(--rf-fs)); font-weight: 700; letter-spacing: .12em; color: var(--rf-sub); margin-bottom: 12px; }
.item-title { margin: 0 0 10px; font-size: calc(1.625rem * var(--rf-fs)); font-weight: 900; line-height: 1.45; color: var(--rf-ink); }
.item-postname { font-size: 1rem; font-weight: 400; color: var(--rf-text); margin: 6px 0 14px; line-height: 1.5; }
.item-code { font-size: calc(0.75rem * var(--rf-fs)); color: var(--rf-sub); margin-bottom: 22px; }
.item-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.item-badge { background: var(--rf-badge); color: var(--rf-badge-text); font-size: calc(0.6875rem * var(--rf-fs)); font-weight: 700; padding: 5px 12px; border-radius: 9999px; white-space: nowrap; }

.item-price { display: flex; align-items: baseline; gap: 8px; padding: 18px 0; border-top: 1px solid var(--rf-line); border-bottom: 1px solid var(--rf-line); margin-bottom: 24px; }
.item-price__amount { font-size: calc(1.625rem * var(--rf-fs)); font-weight: 700; color: var(--rf-ink); letter-spacing: .01em; }
/* Welcartは金額と税込を空classの内側spanに入れるため、そのspanもflexにして横並びに */
.item-price > span { display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.item-price__tax { font-size: calc(0.9375rem * var(--rf-fs)); color: var(--rf-sub); font-weight: 500; white-space: nowrap; }
.item-price__tax * { color: inherit; }
.item-price__tax:empty { display: none; }
/* 税込/税別（p.tax_inc_block）はブロック要素で改行されるのでインライン化して価格の右横に */
.item-price .tax_inc_block { display: inline-block; margin: 0; color: var(--rf-sub); white-space: nowrap; }
.item-price .tax_inc_block * { color: inherit; }
.item-price .tax_inc_label { font-style: normal; }
/* Welcart標準の税込表記（カート等）も色だけサブグレーに寄せる（サイズ・レイアウトは変更しない） */
.tax_inc_block, .tax_inc_block em, .tax_inc_block .tax { color: var(--rf-sub); }
/* 税込ラベルと金額はセットで折り返す（途中で改行させない） */
.tax_inc_block { white-space: nowrap; }
.item-lead { font-size: calc(0.9375rem * var(--rf-fs)); line-height: 1.85; color: var(--rf-text); margin: 0 0 26px; }

/* RF見出しが親テーマ `.entry-content h3 / .item-description h3 { border-left:5px solid #262626 }` の黒い左ボーダーを拾わないよう打ち消す（.rf-flow__title / .rf-doc__h2/h3 など） */
.entry-content h2[class*="rf-"],
.entry-content h3[class*="rf-"],
.item-description h2[class*="rf-"],
.item-description h3[class*="rf-"] {
	border-left: none;
	padding-left: 0;
}

/* 商品説明（the_content の WYSIWYG 本文）。親テーマの `.item-description h3{border-left:5px}` と素のテーブル枠を RF 調に上書き */
.rf-front .item-description h3 {
	border-left: none;
	padding-left: 0;
	margin: 28px 0 14px;
	font-size: calc(1.125rem * var(--rf-fs));
	font-weight: 700;
	line-height: 1.5;
	color: var(--rf-ink);
	padding-bottom: 10px;
	border-bottom: 2px solid var(--rf-ink);
}
.rf-front .item-description table {
	width: 100%;
	margin: 0 0 20px;
	border-collapse: collapse;
	border: 1px solid var(--rf-line);
	font-size: calc(0.9375rem * var(--rf-fs));
}
.rf-front .item-description th,
.rf-front .item-description td {
	padding: 12px 14px;
	border: 1px solid var(--rf-line);
	line-height: 1.7;
	vertical-align: top;
	text-align: left;
}
.rf-front .item-description th {
	background: var(--rf-soft);
	font-weight: 700;
	color: var(--rf-ink);
	white-space: nowrap;
}

/* 数量＋カート */
.item-buy { display: flex; flex-direction: column; gap: 16px; }
.item-buy__row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.item-buy__label { font-size: calc(0.8125rem * var(--rf-fs)); font-weight: 700; color: var(--rf-ink); }
.qty-stepper { display: inline-flex; align-items: center; border: 1px solid #d8d8d8; border-radius: 9999px; overflow: hidden; }
.qty-stepper button { width: 42px; height: 44px; border: none; background: #fff; font-size: 20px; color: #555; cursor: pointer; line-height: 1; transition: background .15s ease; }
.qty-stepper button:hover { background: var(--rf-soft); }
.qty-stepper input { width: 48px; height: 44px; border: none; border-left: 1px solid #eee; border-right: 1px solid #eee; text-align: center; font-family: inherit; font-size: 15px; font-weight: 700; color: var(--rf-ink); outline: none; -moz-appearance: textfield; appearance: textfield; }
.qty-stepper input::-webkit-outer-spin-button,
.qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.item-buy__cart { width: 100%; height: 56px; font-size: calc(1rem * var(--rf-fs)); }
/* PC は単品カートボタンを内容幅に（横長すぎ防止）／スマホは全幅。
   .item-buy は flex-direction:column なので align-self:flex-start を付けないと全幅に伸びる。 */
@media screen and (min-width: 769px) {
	.item-buy__cart { width: auto; min-width: 260px; align-self: flex-start; }
}
.item-buy__stock { font-size: calc(0.8125rem * var(--rf-fs)); color: var(--rf-green); font-weight: 700; }
.item-buy__stock.is-out { color: var(--rf-mute); }
.item-buy__note { margin-top: 20px; display: flex; align-items: flex-start; gap: 8px; font-size: calc(0.8125rem * var(--rf-fs)); color: var(--rf-sub); line-height: 1.6; background: var(--rf-soft); border-radius: 12px; padding: 13px 16px; }

/* お問い合わせリンク */
.item-inquiry-wrapper { text-align: right; margin-top: 18px; }
.item-inquiry-link { display: inline-flex; align-items: center; gap: 7px; font-size: calc(0.8125rem * var(--rf-fs)); font-weight: 700; color: var(--rf-text); text-decoration: none; }
.item-inquiry-link:hover { color: var(--rf-accent); }
.item-inquiry-wrapper .item-inquiry-link .inquiry-icon { width: 20px; height: 20px; border: none; border-radius: 9999px; background: var(--rf-pink); color: #ffffff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; }
/* 問い合わせフォームの氏名・商品名（readonly）入力欄。旧 style.css から移行。
   CF7の入力欄スタイル(.wpcf7-form input[type=text])より詳細度を上げて、
   自動入力(readonly)欄はグレー背景・枠なしを維持する。 */
input[name="item-name"][readonly],
input[name="user-name"][readonly],
.rf-page .wpcf7-form input[readonly],
.rf-page .wpcf7-form input[name="item-name"][readonly],
.rf-page .wpcf7-form input[name="user-name"][readonly] { border: none; outline: none; background-color: #f2f5f8; padding: 10px 15px; border-radius: 4px; font-weight: bold; width: 90%; max-width: 400px; box-sizing: border-box; box-shadow: none; }
.rf-page .wpcf7-form input[readonly]:focus { border: none; box-shadow: none; }
/* 汎用の赤文字ユーティリティ（固定ページ本文などで利用。旧 style.css から移行） */
.rf-front .tex_red, .entry-content .tex_red { color: var(--rf-accent); }

/* 共通お知らせ（ショートコード管理） */
.item-news { display: flex; align-items: flex-start; gap: 11px; background: var(--rf-warn-bg); border: 1px solid var(--rf-warn-line); border-radius: var(--rf-radius); padding: 14px 18px; margin: 40px 0 0; font-size: calc(0.875rem * var(--rf-fs)); color: var(--rf-warn); line-height: 1.7; }
.item-news strong { color: #7a5410; }

/* タブ（商品説明 / 配送・送料） */
/* バリエーション（複数SKU）表示 */
.item-skus { display: flex; flex-direction: column; gap: 12px; }
/* 単品（SKU1つ）：価格→在庫→数量＋カート */
.item-buy__single .item-price { margin-bottom: 18px; }
.item-buy__single .item-buy__row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 6px; }
.item-buy__single .frequency { font-size: calc(0.8125rem * var(--rf-fs)); color: var(--rf-text); margin-bottom: 8px; }
.item-buy__single .item-option { margin: 0 0 14px; }
/* Welcartが生成する数量入力・カートボタンの体裁 */
.item-buy .quantity input,
.item-skus .quantity input { width: 64px; height: 44px; border: 1px solid #d8d8d8; border-radius: 9999px; text-align: center; font-family: inherit; font-size: 15px; font-weight: 700; color: var(--rf-ink); outline: none; }
.item-buy .unit,
.item-skus .unit { font-size: calc(0.8125rem * var(--rf-fs)); color: var(--rf-mute); }
/* カートボタン：span(.cart-button) にアイコン(::before)＋文字(::after)を中央グループで表示し、
   Welcart出力の <input> は透明の全面クリック層にする（丸い端まで全域クリック可能）。
   （<input> はSVGを内包できず、背景アイコンだと文字と揃わないため span 側で描画） */
.item-buy .cart-button,
.item-skus .cart-button {
	position: relative;
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	background: var(--rf-accent); border-radius: 9999px; height: 48px; padding: 0 26px;
	cursor: pointer; transition: opacity .18s ease; box-sizing: border-box; overflow: hidden;
}
.item-buy .cart-button::before,
.item-skus .cart-button::before {
	content: ""; flex: 0 0 auto; width: 18px; height: 18px; pointer-events: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6'/%3E%3C/svg%3E") no-repeat center / contain;
}
.item-buy .cart-button::after,
.item-skus .cart-button::after {
	content: "カートへ入れる"; pointer-events: none;
	color: #fff; font-family: inherit; font-size: calc(0.9375rem * var(--rf-fs)); font-weight: 700; white-space: nowrap;
}
.item-buy .cart-button input,
.item-buy .cart-button button,
.item-skus .cart-button input,
.item-skus .cart-button button { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0; appearance: none; border: none; background: transparent; color: transparent; font-size: 0; cursor: pointer; }
.item-buy .cart-button:hover,
.item-skus .cart-button:hover { opacity: .85; }
.item-buy__single .cart-button { flex: 0 0 100%; margin-top: 8px; width: 100%; height: 56px; }
.item-buy__single .cart-button input,
.item-buy__single .cart-button button { height: 100%; }
/* PC は単品カートボタンを内容幅に（横長すぎ防止）／スマホは全幅のまま */
@media screen and (min-width: 769px) {
	.item-buy__single .cart-button { flex: 0 0 auto; width: auto; min-width: 260px; }
}
.item-options { margin: 0 0 16px; padding: 14px 16px; background: var(--rf-surface, #faf7f4); border: 1px solid #ececec; border-radius: 12px; }
.item-options .item-option { margin: 0; }
.item-option { margin: 0 0 14px; font-size: calc(0.875rem * var(--rf-fs)); }
.item-option dt { font-weight: 700; color: var(--rf-ink); margin-bottom: 4px; }
.item-option dd { margin: 0 0 10px; }
.item-option dd:last-child { margin-bottom: 0; }
.item-option select,
.item-option input[type="text"],
.item-option textarea { font-family: inherit; font-size: 14px; padding: 9px 12px; border: 1px solid #d8d8d8; border-radius: 10px; background: #fff; width: 100%; max-width: 360px; box-sizing: border-box; }
.item-option textarea { min-height: 72px; resize: vertical; }
.item-option select { width: auto; max-width: 100%; padding-right: 38px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23888' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 12px 8px; }
.item-option select:focus,
.item-option input[type="text"]:focus,
.item-option textarea:focus { outline: none; border-color: #b0b0b0; box-shadow: 0 0 0 2px rgba(150, 150, 150, 0.25); }
.itemsoldout { font-size: calc(0.8125rem * var(--rf-fs)); color: var(--rf-mute); font-weight: 700; margin-top: 8px; }
.error_message { color: var(--rf-error, #d33); font-size: calc(0.8125rem * var(--rf-fs)); margin-top: 6px; }
.error_message:empty { display: none; }
.field_cprice { text-decoration: line-through; color: var(--rf-mute); font-size: calc(0.8125rem * var(--rf-fs)); margin-right: 6px; }
/* キャンペーン表示（RF・カード/詳細で共通利用） */
.rf-salebadge { display: inline-flex; align-items: center; gap: 4px; background: #CF1713; color: #fff; font-size: calc(0.6875rem * var(--rf-fs)); font-weight: 800; letter-spacing: .06em; padding: 3px 10px; border-radius: 9999px; line-height: 1.5; }
.product-card__badge--sale { background: #CF1713; color: #fff; }
.rf-campaign-note { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 14px; padding: 10px 12px; background: #FBEDEC; border: 1px solid #F0C9C7; border-radius: 10px; color: #8A2A26; font-size: calc(0.8125rem * var(--rf-fs)); line-height: 1.6; }
.item-skus .rf-campaign-note, .rf-campaign-note + .item-skus ~ .rf-campaign-note { margin-bottom: 16px; }
.rf-campaign-note + .item-skus { margin-top: 0; }
.item-buy .rf-campaign-note, .rf-campaign-note + .item-buy { margin-top: 12px; }
.item-custom { font-size: calc(0.9375rem * var(--rf-fs)); color: var(--rf-text); margin-bottom: 18px; }
.item-sku { border: 1px solid var(--rf-line); border-radius: var(--rf-radius); padding: 16px 18px; }
.item-sku__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.item-sku__name { font-size: calc(0.9375rem * var(--rf-fs)); font-weight: 700; color: var(--rf-ink); }
.item-sku__price { display: flex; align-items: baseline; gap: 7px; }
.item-sku__price strong { font-size: calc(1.25rem * var(--rf-fs)); font-weight: 700; color: var(--rf-ink); }
.item-sku__price small { font-size: calc(0.875rem * var(--rf-fs)); color: var(--rf-sub); font-weight: 500; white-space: nowrap; }
.item-sku__price small * { color: inherit; }
.item-sku__price small .tax_inc_block { display: inline-block; margin: 0; white-space: nowrap; }
.item-sku__buy { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.item-sku__buy .button { flex: 1; min-width: 150px; height: 46px; }
.item-sku__buy .cart-button { flex: 1; min-width: 150px; height: 46px; }
.item-sku__buy .cart-button input,
.item-sku__buy .cart-button button { height: 100%; }
.item-sku__stock { font-size: calc(0.75rem * var(--rf-fs)); color: var(--rf-green); font-weight: 700; margin-left: auto; }
.item-sku__stock.is-out { color: var(--rf-mute); }
.item-sku.is-out { opacity: .7; }

/* プレビュー専用：表示例トグル */
.rfp-vartoggle { display: inline-flex; gap: 0; border: 1px solid var(--rf-line); border-radius: 9999px; overflow: hidden; margin-bottom: 22px; }
.rfp-vartoggle button { appearance: none; border: none; background: #fff; font-family: inherit; font-size: 12px; font-weight: 700; color: var(--rf-mute); padding: 8px 16px; cursor: pointer; white-space: nowrap; }
.rfp-vartoggle button.is-on { background: var(--rf-ink); color: #fff; }

.item-tabs { margin-top: 40px; }
.item-tabs__nav { display: flex; gap: 0; border-bottom: 1px solid var(--rf-line); }
.item-tabs__btn { appearance: none; border: none; background: transparent; font-family: inherit; font-size: calc(0.9375rem * var(--rf-fs)); font-weight: 700; color: var(--rf-mute); padding: 16px 26px; cursor: pointer; position: relative; transition: color .15s ease; white-space: nowrap; }
.item-tabs__btn:hover { color: var(--rf-ink); }
.item-tabs__btn.is-active { color: var(--rf-ink); }
.item-tabs__btn.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--rf-ink); }
.item-tabs__panel { display: none; padding: 28px 4px; font-size: calc(0.9375rem * var(--rf-fs)); font-weight: 400; line-height: 1.9; color: var(--rf-ink); }
.item-tabs__panel.is-active { display: block; }
.item-tabs__panel h3 { font-size: calc(1.1875rem * var(--rf-fs)); font-weight: 700; color: var(--rf-ink); margin: 0 0 12px; }
.item-tabs__panel p { margin: 0 0 16px; font-weight: 400; }
/* 商品説明・配送タブ内のリンクは固定ページ本文と同じ青＋下線に統一（ボタンは下線なし） */
.item-tabs__panel a { color: var(--rf-blue); text-decoration: underline; text-underline-offset: 2px; }
.item-tabs__panel a:hover { opacity: .75; }
.item-tabs__panel a.button,
.item-tabs__panel a.button:hover { color: #fff; text-decoration: none; }
.item-tabs__panel table { width: 100%; border-collapse: collapse; }
.item-tabs__panel th, .item-tabs__panel td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--rf-line); font-size: calc(0.9375rem * var(--rf-fs)); vertical-align: top; }
.item-tabs__panel th { width: 168px; font-weight: 700; color: var(--rf-ink); background: var(--rf-soft); }

/* 配送・決済：3ブロック横並び（配送／支払い／注意）、各項目はアイコン左＋文字右 */
.rf-info { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: start; }
.rf-info__col { background: #fff; border: 1px solid var(--rf-line); border-radius: 12px; padding: 14px 14px; }
.rf-info__col--plain { background: none; border: none; padding: 14px 0; }
.rf-info__h { font-size: calc(1rem * var(--rf-fs)) !important; font-weight: 700; color: var(--rf-ink); margin: 0 0 6px !important; padding-bottom: 8px; border-bottom: 1px solid var(--rf-line); }
.rf-info__row { display: flex; align-items: center; gap: 9px; padding: 7px 0; }
.rf-info__row svg { flex: 0 0 auto; stroke: #6a6a6a; }
.rf-info__label { font-size: calc(0.9375rem * var(--rf-fs)); font-weight: 700; color: var(--rf-ink); line-height: 1.35; }
.rf-info__note { font-size: calc(0.875rem * var(--rf-fs)); color: var(--rf-ink); margin-top: 1px; line-height: 1.35; }
.rf-info__note .rf-ext-link, .rf-info__text .rf-ext-link { font-weight: inherit !important; color: var(--rf-blue) !important; }
.rf-info__note .rf-ext-link::after, .rf-info__text .rf-ext-link::after { background: var(--rf-blue); }
.rf-info__text { display: flex; align-items: flex-start; gap: 7px; font-size: calc(0.9375rem * var(--rf-fs)); color: var(--rf-ink); line-height: 1.7; margin: 8px 0 0 !important; }
.rf-info__text svg { flex: 0 0 auto; margin-top: 2px; stroke: var(--rf-accent); }
.rf-ship__meta { margin-top: 14px; color: var(--rf-mute); font-size: calc(0.9375rem * var(--rf-fs)); }
@media screen and (max-width: 640px) {
	.rf-info { grid-template-columns: 1fr; }
}

/* 関連商品 */
.item-related { padding-top: 16px; padding-bottom: 56px; }
/* 関連商品グリッド：PC6列（TOPと同じ商品カード） */
.product-grid--6 { grid-template-columns: repeat(6, 1fr); }
@media screen and (max-width: 1100px) and (min-width: 769px) {
	.product-grid--6 { grid-template-columns: repeat(4, 1fr); }
}
@media screen and (max-width: 768px) {
	.product-grid--6 { grid-template-columns: repeat(2, 1fr); }
}

@media screen and (max-width: 768px) {
	.item-detail__grid { grid-template-columns: 1fr; gap: 24px; }
	.item-gallery { position: static; }
	/* スマホはサムネ非表示・ドット表示（Swiperの .swiper{display:block} に勝つよう指定を強める） */
	.item-gallery .item-gallery__thumbs { display: none; }
	.item-gallery .item-gallery__dots { display: flex; justify-content: center; gap: 7px; margin-top: 12px; }
	.item-gallery__dots .swiper-pagination-bullet { width: 8px; height: 8px; background: #d4d0c8; opacity: 1; border-radius: 9999px; transition: all .25s ease; }
	.item-gallery__dots .swiper-pagination-bullet-active { width: 22px; background: var(--rf-ink); }
	.item-title { font-size: calc(1.375rem * var(--rf-fs)); }
	.item-price__amount { font-size: calc(1.375rem * var(--rf-fs)); }
	.item-price__tax { font-size: calc(1rem * var(--rf-fs)); }
	.item-tabs__btn { flex: 1; padding: 14px 8px; font-size: calc(0.875rem * var(--rf-fs)); }
	.item-tabs__panel th { width: 110px; }
	.item-inquiry-wrapper { text-align: center; }
}


/* =========================================================================
   === 親テーマ共通の上書き ここから ===
   親テーマ welcart_basic の各ページ（カート・会員・投稿・固定・アーカイブ・
   検索・404・お問い合わせ・SKU選択 等）で共通して使われるクラスに、
   ブランドのボタン・枠・色・フォント・見出しを当てて見た目を統一します。
   ※HTML（PHP）は変更せず、CSSのみで適用。
   ========================================================================= */

/* --- フォント全体 --- */
body,
#content,
.site-content,
input, select, textarea, button {
	font-family: var(--rf-font);
}
/* 全ページ共通の基準文字サイズ（1rem = 16px）。
   line-height はプレビューと同じブラウザ標準に（親テーマの body{line-height:150%} を打ち消し） */
body { font-size: 1rem; line-height: normal; color: var(--rf-body); }
#content, .site-content { color: var(--rf-body); }

/* --- ヘッダー上部の不要な余白を除去（親テーマ由来の body/#page 上余白対策） ---
   ※ WordPress管理バー表示中の 32px はログイン時の仕様（実サイトの一般表示では出ません） */
body { margin: 0; padding-top: 0; }
.announcement-bar,
.rf-header { margin-top: 0; }
#page, .site, #wrapper { margin-top: 0; padding-top: 0; }

/* --- 見出し（各ページ共通タイトル） --- */
#content .page-title,
#content .entry-title,
.cart_page_title,
.member_page_title,
.error-404 .page-title {
	font-size: calc(1.625rem * var(--rf-fs));
	font-weight: 900;
	color: var(--rf-body);
	letter-spacing: .02em;
}
/* マイページ/新規入会のタイトル下余白 15px */
#content .member_page_title { margin: 0 0 15px; }
/* クラスの付いていない素のh2/h3（Welcart標準ページなど）だけに適用。
   :where() で詳細度を上げないため、クラス指定の見出し（.faq__titleや .member-steps__intro h3 など）には勝たない */
#content h2:where(:not([class])) { font-size: calc(1.25rem * var(--rf-fs)); font-weight: 900; color: var(--rf-body); }
#content h3:where(:not([class])) { font-size: calc(1.0625rem * var(--rf-fs)); font-weight: 700; color: var(--rf-body); }

/* === 親テーマ #content h2/h3（IDセレクタ）に負けないよう、RFコンポーネント見出しをID詳細度でプレビューと同一サイズに再指定 === */
#content .section__title { font-size: calc(1.625rem * var(--rf-fs)); font-weight: 900; letter-spacing: 1px; color: var(--rf-ink); }
#content .section__title--sm { font-size: calc(1.5rem * var(--rf-fs)); }
#content .join-banner__title { font-size: calc(1.5rem * var(--rf-fs)); color: var(--rf-ink); }
#content .rf-flow__title { font-size: calc(1.125rem * var(--rf-fs)); color: var(--rf-ink); }
#content .member-gate__title { font-size: calc(1.375rem * var(--rf-fs)); color: var(--rf-ink); }
#content .payment__title { font-size: calc(1.5rem * var(--rf-fs)); color: var(--rf-ink); }
#content .mypage-section__title { font-size: calc(1.125rem * var(--rf-fs)); color: var(--rf-ink); }
#content .rf-doc__title { font-size: calc(2rem * var(--rf-fs)); color: var(--rf-ink); }
#content .rf-doc__h2 { font-size: calc(1.375rem * var(--rf-fs)); color: var(--rf-ink); }
#content .rf-doc__h3 { font-size: calc(1.0625rem * var(--rf-fs)); color: var(--rf-ink); }
#content .item-tabs__panel h3 { font-size: calc(1.1875rem * var(--rf-fs)); color: var(--rf-ink); }
#content .item-tabs__panel { font-size: calc(0.9375rem * var(--rf-fs)); font-weight: 400; color: var(--rf-ink); }
#content .item-tabs__panel p { font-size: calc(0.9375rem * var(--rf-fs)); font-weight: 400; }
#content .item-tabs__panel th, #content .item-tabs__panel td { font-size: calc(0.9375rem * var(--rf-fs)); }
#content .rf-info__h { font-size: calc(1rem * var(--rf-fs)) !important; color: var(--rf-ink); }
#content .rf-info__label { font-size: calc(0.9375rem * var(--rf-fs)); color: var(--rf-ink); }
#content .rf-info__note { font-size: calc(0.9375rem * var(--rf-fs)); color: var(--rf-ink); }
#content .rf-info__text { font-size: calc(0.9375rem * var(--rf-fs)); color: var(--rf-ink); }
#content .rf-ship__meta { font-size: calc(0.9375rem * var(--rf-fs)); color: var(--rf-mute); }
#content .item-related .assistance_item > h3 { font-size: calc(1.5rem * var(--rf-fs)); color: var(--rf-ink); }
#content .campaign-banner__title { font-size: calc(1.5rem * var(--rf-fs)); color: var(--rf-ink); }
#content .faq__title { font-size: calc(1.5rem * var(--rf-fs)); font-weight: 900; letter-spacing: 1px; color: var(--rf-ink); }
#content .auth-card__title { font-size: calc(1.125rem * var(--rf-fs)); font-weight: 700; color: var(--rf-ink); }
#content .rf-doc-card__title { font-size: calc(1.0625rem * var(--rf-fs)); font-weight: 700; color: var(--rf-ink); }
#content .member-steps__intro h3 { font-size: calc(1.125rem * var(--rf-fs)); font-weight: 900; color: var(--rf-ink); }
#content .item-description h3 { font-size: calc(1.125rem * var(--rf-fs)); font-weight: 700; color: var(--rf-ink); }
/* ドロワー開時の背景スクロール固定（iOS対応：position:fixed。親テーマに勝つよう!important） */
html.rf-drawer-open { overflow: hidden !important; }
body.rf-drawer-open { position: fixed !important; left: 0 !important; right: 0 !important; width: 100% !important; overflow: hidden !important; }

/* アナウンスバーの要素間隔 */
.announcement-bar__inner { gap: 5px; }

/* リンククリック時の点線枠を消す（親テーマ a:focus{outline:thin dotted} 対策。キーボード操作時のみ残す） */
a:focus { outline: none; }
a:focus-visible { outline: 2px solid var(--rf-mute); outline-offset: 2px; }

/* --- ボタン全般（親テーマのオレンジ #ff8c00 を差し色赤に統一） --- */
.send input,
.send button,
.inqbox .send input,
.back_to_top_button,
#content .button:not(.button--primary):not(.button--outline):not(.button--ghost):not(.button--dark),
.upbutton input,
.cart-edit input,
button.cart_button,
input.cart_button {
	appearance: none;
	-webkit-appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--rf-accent) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 9999px !important;
	font-family: var(--rf-font);
	font-weight: 700;
	font-size: calc(0.9375rem * var(--rf-fs));
	line-height: 1;
	padding: 14px 28px;
	cursor: pointer;
	text-decoration: none;
	transition: opacity .18s ease;
	box-shadow: none;
}
.send input:hover,
.send button:hover,
.inqbox .send input:hover,
.back_to_top_button:hover,
#content .button:not(.button--primary):not(.button--outline):not(.button--ghost):not(.button--dark):hover,
.upbutton input:hover,
button.cart_button:hover,
input.cart_button:hover { opacity: .85; background: var(--rf-accent) !important; }

/* 戻る・サブ系ボタン（ターシャリ：枠なし・うっすらグレー地・黒文字）：name に back/return/top を含むもの */
.send input[name="returnCart"],
.send input[name="toClasMail"],
.send input[name^="back"],
.send input[name^="return"],
.send input[name="top"],
.send input[class*="back"],
.send input.continue_shopping_button,
.send a.continue_shopping_button,
.send input[name="previous"],
.send input.top,
.send input.back,
.send a.back {
	background: #f2f2f2 !important;
	color: var(--rf-ink) !important;
	border: none !important;
}
.send input[name="returnCart"]:hover,
.send input[name^="back"]:hover,
.send input[name^="return"]:hover,
.send input[name="top"]:hover,
.send input[class*="back"]:hover,
.send input.continue_shopping_button:hover,
.send a.continue_shopping_button:hover,
.send input[name="previous"]:hover,
.send input.top:hover,
.send input.back:hover,
.send a.back:hover { background: #e3e3e3 !important; color: var(--rf-ink) !important; opacity: 1; }

/* --- 入力フォーム（会員登録・お客様情報・お問い合わせ 等） --- */
.customer_form,
.inqbox table,
table.customer_form { width: 100%; border-collapse: collapse; }
.customer_form th,
.customer_form td,
.inqbox th,
.inqbox td {
	padding: 14px 16px;
	border-bottom: 1px solid var(--rf-line);
	text-align: left;
	vertical-align: middle;
	font-size: calc(1rem * var(--rf-fs));
	line-height: 1.7;
}
.customer_form th,
.inqbox th { background: var(--rf-soft); font-weight: 700; color: var(--rf-body); white-space: nowrap; }
.customer_form em,
.inqbox em { color: var(--rf-accent); font-style: normal; margin-right: 4px; }
.customer_form input[type="text"],
.customer_form input[type="email"],
.customer_form input[type="tel"],
.customer_form input[type="password"],
.customer_form input[type="number"],
.customer_form select,
.customer_form textarea,
.inqbox input[type="text"],
.inqbox input[type="email"],
.inqbox input[type="tel"],
.inqbox textarea,
.inqbox select {
	font-family: var(--rf-font);
	font-size: calc(1rem * var(--rf-fs));
	color: var(--rf-body);
	border: 1px solid #d8d8d8;
	border-radius: 10px;
	padding: 0 14px;
	min-height: 46px;
	box-sizing: border-box;
	max-width: 100%;
	outline: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.customer_form textarea,
.inqbox textarea { padding: 12px 14px; min-height: 110px; }
.customer_form input:focus,
.customer_form select:focus,
.customer_form textarea:focus,
.inqbox input:focus,
.inqbox textarea:focus,
.inqbox select:focus { border-color: var(--rf-accent); box-shadow: 0 0 0 3px rgba(207,23,19,.12); }

/* セレクトはネイティブの矢印のまま、右に余白を広めに取って矢印が端に詰まらないようにする */
.customer_form select,
.inqbox select { padding-right: 44px; }

/* --- エラーメッセージ --- */
.error_message:not(:empty) {
	background: #fdecea;
	border: 1px solid #f3b5b1;
	color: var(--rf-accent-strong);
	border-radius: 12px;
	padding: 13px 16px;
	font-size: calc(0.875rem * var(--rf-fs));
	font-weight: 700;
	margin-bottom: 18px;
}

/* --- カート進行ナビ（1.カート → 2.お客様情報 …） --- */
.cart_navi ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 24px; padding: 0; }
.cart_navi li {
	flex: 1 1 0;
	min-width: 120px;
	text-align: center;
	background: var(--rf-soft);
	color: var(--rf-mute);
	font-size: calc(0.8125rem * var(--rf-fs));
	font-weight: 700;
	padding: 12px 8px;
	border-radius: 9999px;
}
.cart_navi li.current { background: var(--rf-accent); color: #fff; }

/* カートページ内リンク：rf-link と同じ挙動（rf-blue・下線あり・ホバーで薄く） */
.cart-page a { color: var(--rf-blue); text-decoration: none; border-bottom: 1px solid currentColor; }
.cart-page a:hover { opacity: .75; color: var(--rf-blue); text-decoration: none; }

/* --- カート/注文テーブル --- */
#cart_table,
.cart-page table { width: 100%; border-collapse: collapse; }
#cart_table th,
#cart_table td { padding: 14px 12px; border-bottom: 1px solid var(--rf-line); font-size: calc(0.9375rem * var(--rf-fs)); }
#cart_table thead th { background: var(--rf-soft); font-weight: 700; color: var(--rf-body); }

/* スマホ：カートの配送方法/到着希望日など customer_form が縦積みになる際、
   セル下の区切り線が中途半端に残るのを消す（行間の余白で区切りは足りる） */
@media screen and (max-width: 768px) {
	.cart-page .customer_form th,
	.cart-page .customer_form td { border-bottom: none; }
	.cart-page .customer_form tr { display: block; margin-bottom: 10px; }
}

/* --- 説明文ブロック（白ベース・枠は影付き） --- */
.header_explanation,
.footer_explanation,
#cart_completion .header_explanation {
	font-size: calc(1rem * var(--rf-fs));
	line-height: 1.85;
	color: var(--rf-body);
}

/* --- 完了画面 --- */
/* 完了画面：内側の .member-gate カードで枠を出すため、#cart_completion 自体は無地の
   中央寄せコンテナにする（背景・枠線・影・内側paddingを持たせない＝二重枠を防ぐ） */
#cart_completion {
	background: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
	text-align: center;
	max-width: 720px;
	margin: 20px auto 72px;
}
/* 完了画面の見出し：スマホで折り返さないよう少し小さめに */
.order-complete__title { font-size: calc(1.35rem * var(--rf-fs)); }
@media screen and (max-width: 480px) {
	.order-complete__title { font-size: calc(1.15rem * var(--rf-fs)); white-space: nowrap; }
}
#cart_completion h3 { font-size: calc(1.25rem * var(--rf-fs)); font-weight: 700; color: var(--rf-accent); margin: 0 0 14px; }
#cart_completion .send { margin-top: 24px; }

/* --- 投稿・固定・アーカイブの本文枠（白ベース＋影） --- */
.no_cart,
.error-404 .page-content {
	background: #fff;
	border: 1px solid var(--rf-line);
	border-radius: var(--rf-radius-lg);
	box-shadow: 0 2px 10px rgba(0,0,0,.04);
	padding: 32px 28px;
	text-align: center;
	color: var(--rf-body);
	font-size: calc(1rem * var(--rf-fs));
}

/* === 親テーマ共通の上書き ここまで === */

/* =========================================================================
   === 親テーマのコンテンツ幅制限(1000px/750px)を解除 ===
   親テーマ style.css の #main{width:1000px} / #content{width:750px} が
   本文を狭く固定するため、幅指定を解除し .page-width(1240px) で制御する。
   ヘッダー・フッターは #main の外なので影響しません。
   ========================================================================= */
#main,
#main.wrapper,
#main.one-column,
#main.two-column {
	width: auto;
	max-width: 1240px;
	margin: 0 auto;
	padding: 0;
	float: none;
}
/* トップページのみ全幅（ヒーロー等の全ブリード用）。内側の .page-width が1240pxで制御 */
.home #main,
.home #main.wrapper,
.home #main.one-column {
	max-width: none;
}
#main.one-column #content,
#main.two-column #content,
.two-column.right-set #content,
.two-column.left-set #content {
	width: 100%;
	margin: 0;
	padding: 0;
	float: none;
}
/* 固定ページ本文（page.php の #content.page-content）は上のリセット padding:0 を打ち消し、
   .page-width の左右余白＋上下余白を復元する（詳細度を上げて確実に勝たせる） */
#main.one-column #content.page-content,
#main.two-column #content.page-content { padding: 36px 24px 56px; box-sizing: border-box; }
@media screen and (max-width: 768px) {
	#main.one-column #content.page-content,
	#main.two-column #content.page-content { padding-left: 16px; padding-right: 16px; }
}

/* 商品カード／スライダーに、親テーマ等の記事区切り線（border-bottom）が出るのを抑制 */
.product-card,
.product-card article,
.product-swiper .swiper-slide,
.product-grid .product-card,
.product-rail .product-card { border-bottom: none !important; }

/* 注文完了ページ：外側の記事カード（.post）と member-gate カードで枠が二重になるため、外側を無地にする */
#wc_ordercompletion.post,
#wc_ordercompletion { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; }

/* =========================================================================
   お客様情報／配送先テーブル（.customer_form：マイページ・カート）
   PC：セル線は既定の 1px のまま。テーブルに 1px の外枠を回して
       上下左右を同じ太さで囲うだけ（下線だけ太く／セル線太くはしない）。
   スマホ：tr をブロック表示にする親テーマ仕様で行下線（2px #efefef）が
       出てしまうので消し、行間の余白で区切る。
   ========================================================================= */
/* =========================================================================
   お客様情報／配送先テーブル（.customer_form：マイページ・カート）
   PC：外枠を box-shadow の 1px リングで描く。border-collapse だと外枠の下辺が
       最終セルの境界に食われて薄く見えるため、4辺均一な box-shadow で囲う。
   スマホ：tr をブロック表示にする親テーマ仕様。外枠は出さず、行下線・セル下線を消す。
   ========================================================================= */
@media screen and (min-width: 769px) {
	.rf-front .customer_form,
	#content .customer_form { box-shadow: 0 0 0 1px var(--rf-line); border-radius: 2px; }
}

@media screen and (max-width: 768px) {
	/* スマホは外枠なし。親テーマの tr{border-bottom:2px #efefef} を含め行下線・セル下線を消す */
	.rf-front .customer_form,
	#content .customer_form { border: none; box-shadow: none; }
	.rf-front .customer_form tr,
	#content .customer_form tr,
	.rf-front .customer_form th,
	.rf-front .customer_form td,
	#content .customer_form th,
	#content .customer_form td { border-bottom: none; }
}

/* =========================================================================
   メンテナンス中画面（マスコット＋白枠）
   ========================================================================= */
/* メンテ中は買い物系のヘッダー要素（検索・カート・カテゴリ等）を隠し、ロゴのみ残す */
body.rf-maintenance .announcement-bar,
body.rf-maintenance .header-search,
body.rf-maintenance .header-actions,
body.rf-maintenance .category-bar,
body.rf-maintenance .rf-drawer { display: none !important; }
body.rf-maintenance .rf-header__inner { justify-content: center; }
/* メンテ中はフッターのメニュー列も隠し、ロゴのみ残す */
body.rf-maintenance .rf-footer__col { display: none !important; }
body.rf-maintenance .rf-footer__inner { justify-content: center; }

.rf-maint {
	display: flex;
	justify-content: center;
	padding: 72px 20px 96px;
	background:
		radial-gradient(120% 90% at 50% 0%, #fdf3f1 0%, rgba(253,243,241,0) 60%),
		var(--rf-soft);
}
.rf-maint__card {
	width: 100%;
	max-width: 620px;
	background: #fff;
	border: 1px solid var(--rf-line);
	border-radius: var(--rf-radius-lg);
	box-shadow: 0 24px 60px rgba(43, 43, 43, .08);
	padding: 52px 44px 48px;
	text-align: center;
}
.rf-maint__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--rf-badge);
	color: var(--rf-badge-text);
	font-size: calc(0.8125rem * var(--rf-fs));
	font-weight: 700;
	letter-spacing: .04em;
	padding: 7px 16px;
	border-radius: 9999px;
}
.rf-maint__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--rf-accent);
	animation: rf-maint-pulse 1.4s ease-in-out infinite;
}
@keyframes rf-maint-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: .35; transform: scale(.7); }
}
.rf-maint__mascot {
	display: block;
	width: 168px;
	max-width: 60%;
	height: auto;
	margin: 26px auto 6px;
}
.rf-maint__title {
	margin: 6px 0 0;
	font-size: calc(1.5rem * var(--rf-fs));
	font-weight: 900;
	letter-spacing: .02em;
	color: var(--rf-ink);
}
.rf-maint__text {
	margin: 16px 0 0;
	font-size: calc(0.9375rem * var(--rf-fs));
	line-height: 1.9;
	color: var(--rf-text);
	font-weight: 500;
}
.rf-maint__note {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-top: 28px;
	padding: 12px 20px;
	background: var(--rf-soft);
	border: 1px solid var(--rf-line);
	border-radius: 9999px;
	color: var(--rf-sub);
	font-size: calc(0.8125rem * var(--rf-fs));
	font-weight: 700;
}
.rf-maint__note svg { color: var(--rf-accent); flex: 0 0 auto; }

/* カート価格更新の通知バナー */
.rf-cart-reprice {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 20px;
	padding: 14px 18px;
	background: #fdf3f1;
	border: 1px solid #f3cfc7;
	border-radius: var(--rf-radius);
	color: var(--rf-accent-strong);
	font-size: calc(0.875rem * var(--rf-fs));
	font-weight: 700;
	line-height: 1.6;
}
.rf-cart-reprice svg { flex: 0 0 auto; }

@media (max-width: 600px) {
	.rf-maint { padding: 44px 16px 64px; }
	.rf-maint__card { padding: 40px 24px 36px; }
	.rf-maint__title { font-size: calc(1.3rem * var(--rf-fs)); }
	.rf-maint__note { flex-direction: row; text-align: left; }
}

/* =========================================================================
   yk.knz
   ========================================================================= */
   /* 「入金状況」の列（見出し・データ共通）を非表示にする */
   .historyrow.transfer_statement,.rightnum[data-label="入金状況"] {display: none !important;}
   
   .cont_center{text-align: center;}
   /* テキスト揃え（.cont_center は既存・互換のため残置） */
   .txt-left{text-align: left;}
   .txt-center{text-align: center;}
   .txt-right{text-align: right;}
   /* フォントサイズ 5種（rf-fs 連動で全体スケールにも追従） */
   .fs-sm{font-size: calc(0.8125rem * var(--rf-fs));}
   .fs-base{font-size: calc(0.9375rem * var(--rf-fs));}
   .fs-md{font-size: calc(1.125rem * var(--rf-fs));}
   .fs-lg{font-size: calc(1.375rem * var(--rf-fs));}
   .fs-xl{font-size: calc(1.75rem * var(--rf-fs));}
   /* フォントの太さ（サイズとは独立して指定可。例：class="fs-lg fw-bold"） */
   .fw-normal{font-weight: 400;}
   .fw-medium{font-weight: 500;}
   .fw-bold{font-weight: 700;}
   .fw-black{font-weight: 900;}
   .matb35{margin: 35px 0;}
   /* 余白ユーティリティ（.matb=上下 / .mat=上のみ / .mab=下のみ） */
   .matb10{margin: 10px 0;}
   .matb15{margin: 15px 0;}
   .matb20{margin: 20px 0;}
   .matb30{margin: 30px 0;}
   .matb40{margin: 40px 0;}
   .matb50{margin: 50px 0;}
   .matb60{margin: 60px 0;}
   .mat10{margin-top: 10px;}
   .mat15{margin-top: 15px;}
   .mat20{margin-top: 20px;}
   .mat30{margin-top: 30px;}
   .mat35{margin-top: 35px;}
   .mat40{margin-top: 40px;}
   .mat50{margin-top: 50px;}
   .mat60{margin-top: 60px;}
   .mab10{margin-bottom: 10px;}
   .mab15{margin-bottom: 15px;}
   .mab20{margin-bottom: 20px;}
   .mab30{margin-bottom: 30px;}
   .mab35{margin-bottom: 35px;}
   .mab40{margin-bottom: 40px;}
   .mab50{margin-bottom: 50px;}
   .mab60{margin-bottom: 60px;}
   /* パディングユーティリティ（.patb=上下 / .pat=上のみ / .pab=下のみ / .pa=全方向） */
   .pa10{padding: 10px;}
   .pa15{padding: 15px;}
   .pa20{padding: 20px;}
   .pa30{padding: 30px;}
   .pa40{padding: 40px;}
   .patb10{padding: 10px 0;}
   .patb15{padding: 15px 0;}
   .patb20{padding: 20px 0;}
   .patb30{padding: 30px 0;}
   .patb35{padding: 35px 0;}
   .patb40{padding: 40px 0;}
   .patb50{padding: 50px 0;}
   .patb60{padding: 60px 0;}
   .pat10{padding-top: 10px;}
   .pat15{padding-top: 15px;}
   .pat20{padding-top: 20px;}
   .pat30{padding-top: 30px;}
   .pat40{padding-top: 40px;}
   .pat50{padding-top: 50px;}
   .pat60{padding-top: 60px;}
   .pab10{padding-bottom: 10px;}
   .pab15{padding-bottom: 15px;}
   .pab20{padding-bottom: 20px;}
   .pab30{padding-bottom: 30px;}
   .pab40{padding-bottom: 40px;}
   .pab50{padding-bottom: 50px;}
   .pab60{padding-bottom: 60px;}

/* =========================================================================
   お気に入り（ハートボタン / マイページ一覧）
   ========================================================================= */
.rf-fav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	background: #eaf5ef;
	border: 1.5px solid #cfe8d9;
	border-radius: 50%;
	color: #8fc9a8;
	cursor: pointer;
	transition: background .15s, border-color .15s, color .15s, transform .1s;
}
.rf-fav:hover { background: var(--rf-green); border-color: var(--rf-green); }
.rf-fav:hover .rf-fav__icon { fill: #b8e0c8; stroke: #b8e0c8; }
.rf-fav:active { transform: scale(.92); }
.rf-fav__icon { fill: none; stroke: currentColor; stroke-width: 1.6; flex: 0 0 auto; }
.rf-fav.is-on { background: var(--rf-green); border-color: var(--rf-green); color: #fff; }
.rf-fav.is-on .rf-fav__icon { fill: #fff; stroke: #fff; }
.rf-fav.is-on:hover { background: #57bd82; border-color: #57bd82; }
.rf-fav.is-on:hover .rf-fav__icon { fill: #b8e0c8; stroke: #b8e0c8; }

/* 商品詳細：商品番号の行の右端にハートを配置（2ブロック） */
.item-code-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.item-code-row .item-code { margin: 0; flex: 1 1 auto; }
.item-code-row > .rf-fav { flex: 0 0 auto; margin-left: auto; }
@media (max-width: 767px) {
	.item-code-row > .rf-fav { width: 36px; height: 36px; }
}

.rf-fav-empty { margin: 8px 0 4px; color: var(--rf-sub, #666); font-size: calc(0.9375rem * var(--rf-fs, 1)); line-height: 1.8; }

/* お気に入り一覧：商品一覧カード（.product-grid / .product-card）をそのまま流用。
   ハートは商品画像の右下にオーバーレイ。8件超は「すべて表示」で開閉。 */
.product-grid .product-card__media .rf-fav {
	position: absolute; right: 8px; bottom: 8px; z-index: 2;
	width: 32px; height: 32px;
}
.product-grid .product-card__media .rf-fav .rf-fav__icon { width: 18px; height: 18px; }
.product-grid.is-collapsed > .product-card:nth-child(n+9) { display: none; }
/* お気に入りは8列表示 */
.product-grid--fav { grid-template-columns: repeat(8, 1fr); gap: 12px; }
.product-grid--fav .product-card__title { font-weight: 400; font-size: calc(0.8125rem * var(--rf-fs)); }
@media (max-width: 767px) {
	.product-grid--fav { grid-template-columns: repeat(3, 1fr); gap: 10px; }
	/* スマホは6件で折りたたみ */
	.product-grid--fav.is-collapsed > .product-card:nth-child(n+7) { display: none; }
}
@media (min-width: 768px) {
	/* PCで全件見える件数のときは「すべて表示」ボタンを出さない */
	.rf-fav-more--sp-only { display: none; }
}
.rf-fav-more {
	display: flex; align-items: center; justify-content: center;
	margin: 14px auto 4px; padding: 8px 20px;
	background: #fff; border: 2px solid var(--rf-line, #e2e2e2); border-radius: 9999px;
	color: var(--rf-sub, #666); font-size: calc(0.875rem * var(--rf-fs, 1)); font-weight: 500; cursor: pointer;
	transition: border-color .15s, color .15s;
}
.rf-fav-more:hover { border-color: var(--rf-green); color: var(--rf-green); }