@charset "UTF-8";
/*
 * 共通パーツ — 見出し・ボタン・帯（波形）・カード・ホバー・追尾バー
 *
 * 出典: handoff/TOP-PC-レイアウト仕様書.md 第3章 ／ TOP-SP-レイアウト仕様書.md 第2〜3章
 * セレクタの根拠: docs/jinr-dom-reference.md 第4章（JIN:R 実 DOM）
 *
 * ブロックの「追加CSSクラス」に付けて使うクラス
 *   band-cream      生成り帯＋ドット＋上下の白波形（フルワイドブロック）
 *   band-white      白帯（フルワイドブロック）
 *   card-commit     こだわりカード
 *   card-product    商品カード
 *   tile-recommend  こんな方におすすめタイル
 *   contact-panel   お問い合わせパネル（背景ブロック）
 *   info-table      店舗概要テーブル
 *   news-list       お知らせリスト
 *   arch            画像をアーチ型に
 *   circle          画像を正円に
 *   link-arrow      「詳しく見る →」テキストリンク
 *   num-circle / initial-circle / cat-pill / badge / icon-circle  小物
 */

/* ============================================================
 * 1. 帯（セクション背景）
 * ============================================================ */

.slb .band-cream,
.slb .band-white {
	position: relative;
	isolation: isolate;
}

.slb .band-cream > .b--jinr-fullwidth {
	background-color: var(--c-cream) !important;
	background-image: url(../img/dots.svg);
	background-repeat: repeat;
	padding-top: var(--pad-cream);
	padding-bottom: var(--pad-cream);
}

.slb .band-white > .b--jinr-fullwidth {
	background-color: var(--c-white) !important;
	padding-top: var(--pad-white);
	padding-bottom: var(--pad-white);
}

/* 波形（生成り帯の上下） */
.slb .band-cream::before,
.slb .band-cream::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	height: var(--wave-h);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	pointer-events: none;
	z-index: 1;
}
.slb .band-cream::before {
	top: 0;
	background-image: url(../img/wave-top.svg);
}
.slb .band-cream::after {
	bottom: 0;
	background-image: url(../img/wave-bottom.svg);
}

/* 帯が連続する場合、間の波形を省く */
.slb .band-cream + .band-cream::before { display: none; }

/* ============================================================
 * 2. 見出しブロック（JIN:R デザイン見出し）
 * ============================================================ */

.slb .b--jinr-h2rich .c--h2rich-contents {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
}
.slb .b--jinr-h2rich.d--h2rich-left .c--h2rich-contents {
	align-items: flex-start;
}

/* 英語チップ */
.slb .b--jinr-h2rich .a--h2rich-subcopy {
	display: inline-block;
	font-family: var(--f-en);
	font-size: var(--fs-chip);
	font-weight: 700;
	letter-spacing: .16em;
	line-height: 1;
	padding: var(--pad-chip);
	border-radius: var(--r-pill);
	background: var(--c-accent-soft);
	color: var(--c-accent) !important;
	margin: 0;
	text-transform: uppercase;
}

/* 生成り帯の上では白地チップ */
.slb .band-cream .b--jinr-h2rich .a--h2rich-subcopy {
	background: var(--c-white);
}

/* H2 本体 */
.slb .b--jinr-h2rich .a--h2rich-maincopy {
	position: relative;
	font-family: var(--f-ja);
	font-size: var(--fs-h2);
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: .06em;
	color: var(--c-text) !important;
	margin: 0;
	padding-bottom: calc(16px + var(--swash-h));
	border: none !important;
	background: none !important;
}
.slb .b--jinr-h2rich .a--h2rich-maincopy::before {
	display: none !important;
}

/* 赤い曲線 */
.slb .b--jinr-h2rich .a--h2rich-maincopy::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: var(--swash-w);
	height: var(--swash-h);
	background: url(../img/h2-swash.svg) no-repeat center / contain;
	border: none;
}
.slb .b--jinr-h2rich.d--h2rich-left .a--h2rich-maincopy::after {
	left: 0;
	transform: none;
}

.slb .b--jinr-h2rich {
	margin-bottom: 56px;
}
@media (max-width: 781px) {
	.slb .b--jinr-h2rich { margin-bottom: 36px; }
	.slb .b--jinr-h2rich .c--h2rich-contents { gap: 14px; }
}

/* ============================================================
 * 3. ボタン
 * CVボタン1 = プライマリ（塗り） / CVボタン2 = セカンダリ（アウトライン）
 * ============================================================ */

.slb .b--jinr-button .o--button-inner a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	font-family: var(--f-ja);
	letter-spacing: .1em;
	transition: transform var(--dur-hover) var(--ease),
	            background-color var(--dur-hover) var(--ease),
	            box-shadow var(--dur-hover) var(--ease);
}

.slb .d--button-type1 a {
	min-height: var(--h-btn-primary);
	min-width: var(--w-btn-min);
	padding: 0 44px !important;
	font-size: 16px;
	font-weight: 700;
	box-shadow: var(--shadow-btn);
}
.slb .d--button-type1 a:hover {
	transform: translateY(-2px);
}

.slb .d--button-type2 a {
	min-height: var(--h-btn-secondary);
	min-width: var(--w-btn-min);
	padding: 0 44px !important;
	font-size: 15px;
	font-weight: 700;
}
.slb .d--button-type2 a:hover {
	transform: translateY(-2px);
	background-color: var(--c-accent-soft) !important;
}

@media (max-width: 781px) {
	.slb .b--jinr-button .o--button-inner {
		width: 100%;
	}
	.slb .b--jinr-button .o--button-inner a {
		width: 100%;
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
}

/* テキストリンク「詳しく見る →」 */
.slb .link-arrow,
.slb .link-arrow a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 700;
	color: var(--c-accent);
	text-decoration: none;
}
.slb .link-arrow::after,
.slb .link-arrow a::after {
	content: '→';
	transition: transform var(--dur-hover) var(--ease);
}
.slb .link-arrow:hover::after,
.slb .link-arrow a:hover::after {
	transform: translateX(5px);
}

/* ============================================================
 * 4. カード
 * ============================================================ */

.slb .card-commit,
.slb .card-product,
.slb .tile-recommend {
	transition: transform var(--dur-hover) var(--ease),
	            box-shadow var(--dur-hover) var(--ease);
}
.slb .card-commit:hover,
.slb .card-product:hover,
.slb .tile-recommend:hover {
	transform: translateY(-5px);
	box-shadow: var(--shadow-hover);
}

/* こだわりカード */
.slb .card-commit {
	background: var(--c-white);
	border-radius: var(--r-card-lg);
	box-shadow: var(--shadow);
	overflow: hidden;
	height: 100%;
}
.slb .card-commit .wp-block-image,
.slb .card-commit figure {
	margin: 0;
}
.slb .card-commit img {
	width: 100%;
	aspect-ratio: 8 / 5;
	object-fit: cover;
	border-radius: 0 !important;
}
.slb .card-commit .card-body {
	padding: 28px 32px 34px;
}
@media (max-width: 781px) {
	.slb .card-commit .card-body { padding: 20px 22px 24px; }
}

.slb .num-circle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--size-num-circle);
	height: var(--size-num-circle);
	border-radius: 50%;
	background: var(--c-accent);
	color: var(--c-white);
	font-family: var(--f-en);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .04em;
	flex-shrink: 0;
}

.slb .card-commit h3,
.slb .card-commit .card-title {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: var(--fs-h3-card);
	font-weight: 700;
	line-height: 1.5;
	margin: 0;
	border: none !important;
	background: none !important;
	padding: 0 !important;
}
.slb .card-commit h3::before,
.slb .card-commit h3::after { display: none !important; }

.slb .card-commit p {
	font-size: 15px;
	line-height: 2.1;
	margin-top: 16px;
	color: var(--c-text);
}

/* 商品カード（WooCommerce 側の調整は Step 6〜7） */
.slb .card-product {
	background: var(--c-cream);
	border-radius: var(--r-card);
	padding: 14px 14px 22px;
	height: 100%;
}
@media (max-width: 781px) {
	.slb .card-product { padding: 10px 10px 16px; }
}

/* おすすめタイル */
.slb .tile-recommend {
	background: var(--c-cream);
	border-radius: var(--r-card);
	padding: 40px 20px 36px;
	text-align: center;
	height: 100%;
}
.slb .tile-recommend .icon-circle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: var(--c-white);
	color: var(--c-accent);
	font-size: 36px;
	margin-bottom: 20px;
}
.slb .tile-recommend .label,
.slb .tile-recommend p {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.6;
	margin: 0;
}
@media (max-width: 781px) {
	.slb .tile-recommend { padding: 24px 12px 22px; }
	.slb .tile-recommend .icon-circle {
		width: 56px; height: 56px; font-size: 26px; margin-bottom: 14px;
	}
	.slb .tile-recommend .label,
	.slb .tile-recommend p { font-size: 13px; }
}

/* ============================================================
 * 5. 写真の形
 * ============================================================ */

.slb .arch img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--r-pill) var(--r-pill) 20px 20px !important;
}
@media (max-width: 781px) {
	.slb .arch img { border-radius: var(--r-pill) var(--r-pill) 16px 16px !important; }
}

.slb .circle img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 50% !important;
	box-shadow: var(--shadow);
}

/* ============================================================
 * 6. お問い合わせパネル・店舗概要表・お知らせリスト
 * ============================================================ */

.slb .info-table table {
	width: 100%;
	max-width: 760px;
	margin: 0 auto;
	border-collapse: separate;
	border-spacing: 0;
	border: 1.5px solid var(--c-line);
	border-radius: var(--r-panel);
	overflow: hidden;
}
.slb .info-table th,
.slb .info-table td {
	padding: 20px 24px;
	font-size: 15px;
	text-align: left;
	vertical-align: top;
	border: none;
	border-bottom: 1.5px solid var(--c-line);
}
.slb .info-table th {
	width: 200px;
	background: var(--c-cream);
	font-weight: 700;
}
.slb .info-table tr:last-child th,
.slb .info-table tr:last-child td { border-bottom: none; }
@media (max-width: 781px) {
	.slb .info-table table { border-radius: 18px; }
	.slb .info-table th,
	.slb .info-table td { padding: 14px; font-size: 13px; }
	.slb .info-table th { width: 96px; }
}

.slb .news-list {
	max-width: 880px;
	margin: 0 auto;
}
.slb .news-list .o--postlist-item {
	border-bottom: 1.5px dashed var(--c-line);
}
.slb .news-list .a--post-date {
	font-family: var(--f-en);
	font-weight: 600;
	font-size: 14px;
	color: var(--c-muted);
}
.slb .news-list .a--post-title {
	font-size: 15px;
	font-weight: 700;
}
.slb .news-list .o--postlist-item:hover .a--post-title {
	color: var(--c-accent);
}

.slb .cat-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 88px;
	padding: 4px 12px;
	border-radius: var(--r-pill);
	background: var(--c-accent-soft);
	color: var(--c-accent);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.6;
}

.slb .badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: var(--r-pill);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.6;
	background: var(--c-accent);
	color: var(--c-white);
}
.slb .badge.is-outline {
	background: var(--c-white);
	color: var(--c-accent);
	box-shadow: inset 0 0 0 1px var(--c-accent);
}

/* ============================================================
 * 7. 吹き出し
 * ============================================================ */

.slb .o--jinr-fukidashi .c--fukidashi-contents {
	border-radius: var(--r-panel) !important;
	padding: 20px 26px !important;
	font-size: 15px;
	line-height: 2;
}
.slb .band-cream .o--jinr-fukidashi .c--fukidashi-contents {
	box-shadow: var(--shadow);
}

.slb .initial-circle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--c-accent-soft);
	color: var(--c-accent);
	font-family: var(--f-en);
	font-size: 20px;
	font-weight: 700;
	flex-shrink: 0;
}
@media (max-width: 781px) {
	.slb .initial-circle { width: 44px; height: 44px; font-size: 17px; }
}

/* ============================================================
 * 8. 出現アニメーション
 * ============================================================ */

.slb .js--scr-animation {
	transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.slb .wp-block-columns .wp-block-column:nth-child(2) > * { transition-delay: .1s; }
.slb .wp-block-columns .wp-block-column:nth-child(3) > * { transition-delay: .2s; }
.slb .wp-block-columns .wp-block-column:nth-child(4) > * { transition-delay: .3s; }

@media (prefers-reduced-motion: reduce) {
	.slb .js--scr-animation,
	.slb .card-commit,
	.slb .card-product,
	.slb .tile-recommend { transition: none !important; }
}

/* ============================================================
 * 9. 追尾「ご購入はこちら」（SP・TOP／固定ページ用）
 *
 * JIN:R の追尾 CV ボタンは記事ページ専用のため自前実装する。
 * 出力は inc/setup.php の slb_sticky_cta()。
 * ============================================================ */

.slb-sticky-cta {
	display: none;
}

@media (max-width: 781px) {
	.slb-sticky-cta {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 900;
		padding: 10px 16px calc(14px + env(safe-area-inset-bottom, 0px));
		background: rgba(255, 255, 255, .96);
		backdrop-filter: blur(8px);
		-webkit-backdrop-filter: blur(8px);
		border-top: 1px solid var(--c-line);
	}
	.slb-sticky-cta a {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 52px;
		border-radius: var(--r-pill);
		background: var(--c-accent);
		color: var(--c-white);
		font-size: 15px;
		font-weight: 700;
		letter-spacing: .1em;
		text-decoration: none;
		box-shadow: var(--shadow-btn);
	}
	.slb-sticky-cta a:hover,
	.slb-sticky-cta a:focus {
		background: var(--c-accent-hover);
		color: var(--c-white);
	}

	.slb-has-sticky-cta #commonFooter {
		padding-bottom: 76px;
	}

	/* 商品詳細は Step 6 のカートバーを使う */
	.slb-product .slb-sticky-cta { display: none; }
}

/* JIN:R の記事用追尾 CV ボタンは使わない */
.slb #cvButton { display: none !important; }

/* ============================================================
 * 10. ヘッダー・フッター・インフォバー
 * ============================================================ */

.slb #commonHeader {
	background: rgba(255, 255, 255, .96);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--c-line);
}
.slb #commonHeaderInner {
	min-height: var(--h-header);
}

.slb #commonHeader .a--header-title,
.slb #commonHeader .site-title {
	font-family: var(--f-en);
	font-weight: 700;
	letter-spacing: .08em;
}

.slb #globalMenuList > li > a {
	font-size: 14px;
	font-weight: 500;
	letter-spacing: .04em;
}

.slb #commonFooter {
	position: relative;
	padding-top: var(--pad-white);
}
.slb #commonFooter::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: var(--wave-h);
	background: url(../img/wave-top.svg) no-repeat center / 100% 100%;
	pointer-events: none;
}
.slb #footerMenuList > li > a {
	font-size: 13px;
	font-weight: 500;
}
.slb #copyright {
	font-family: var(--f-en);
	font-size: 12px;
	color: var(--c-muted);
}

.slb .o--informationbar .c--informationbar {
	padding: 10px 16px;
}
.slb .o--informationbar .a--infomationbar-text1 {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
}
@media (max-width: 781px) {
	.slb .o--informationbar .a--infomationbar-text1 { font-size: 12px; }
	.slb .o--informationbar .c--informationbar { padding: 8px 12px; }
}

/* ============================================================
 * 11. 写真プレースホルダー（実写真が入るまで）
 * ============================================================ */

.slb .ph {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--c-photo);
	color: var(--c-muted);
	font-size: 12px;
	letter-spacing: .04em;
	overflow: hidden;
}
.slb .ph span {
	position: relative;
	z-index: 1;
	padding: 6px 10px;
	background: rgba(255, 255, 255, .6);
	border-radius: 6px;
}
.slb .ph::before {
	content: '';
	position: absolute;
	inset: 12px;
	border: 1px dashed rgba(107, 89, 74, .35);
	border-radius: inherit;
}
.slb .ph-8x5   { aspect-ratio: 8 / 5; }
.slb .ph-square { aspect-ratio: 1; border-radius: var(--r-ig); }
.slb .ph-circle { aspect-ratio: 1; border-radius: 50%; box-shadow: var(--shadow); }
.slb .ph-circle::before { border-radius: 50%; }

/* ============================================================
 * 12. 汎用ボタン（HTML ブロック内で使う <a>）
 * JIN:R ボタンブロックと同じ見た目
 * ============================================================ */

.slb .slb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: var(--h-btn-primary);
	min-width: var(--w-btn-min);
	padding: 0 44px;
	border-radius: var(--r-pill);
	font-family: var(--f-ja);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .1em;
	text-decoration: none;
	transition: transform var(--dur-hover) var(--ease),
	            background-color var(--dur-hover) var(--ease);
}
.slb .slb-btn-primary {
	background: var(--c-accent);
	color: var(--c-white);
	box-shadow: var(--shadow-btn);
}
.slb .slb-btn-primary:hover {
	background: var(--c-accent-hover);
	color: var(--c-white);
	transform: translateY(-2px);
}
.slb .slb-btn-secondary {
	background: var(--c-white);
	color: var(--c-accent);
	box-shadow: inset 0 0 0 1.5px var(--c-accent);
	min-height: var(--h-btn-secondary);
	font-size: 15px;
}
.slb .slb-btn-secondary:hover {
	background: var(--c-accent-soft);
	transform: translateY(-2px);
}
@media (max-width: 781px) {
	.slb .slb-btn { width: 100%; min-width: 0; padding: 0 16px; }
}

/* ============================================================
 * 14. チップ（MV・ページヘッダー・お問い合わせ）
 * ============================================================ */

.slb .chip {
	display: inline-block;
	font-family: var(--f-en);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .12em;
	line-height: 1;
	padding: 8px 16px;
	border-radius: var(--r-pill);
	background: var(--c-accent-soft);
	color: var(--c-accent);
}
.slb .chip-white {
	background: var(--c-white);
	color: var(--c-accent);
}

/* ============================================================
 * 13. お問い合わせパネル（TOP・ブランドについて 共通）
 * ============================================================ */

.slb .sec-contact > .b--jinr-fullwidth {
	padding-top: 20px;
}

.slb .contact-panel {
	background: var(--c-accent-soft);
	border-radius: var(--r-contact);
	padding: 72px 60px;
	text-align: center;
}
.slb .contact-title {
	margin: 18px 0 0;
	font-size: var(--fs-h2);
	font-weight: 700;
	letter-spacing: .06em;
	border: none !important;
	background: none !important;
	padding: 0 !important;
}
.slb .contact-title::before,
.slb .contact-title::after { display: none !important; }
.slb .contact-lead {
	margin: 28px auto 0;
	max-width: 560px;
	font-size: 15px;
	line-height: 2;
}
.slb .contact-panel .slb-btn {
	margin-top: 36px;
	min-width: 290px;
}

@media (max-width: 781px) {
	.slb .contact-panel { padding: 40px 24px; }
	.slb .contact-lead { font-size: 14px; }
	.slb .contact-panel .slb-btn { min-width: 0; width: 100%; }
}