@charset "UTF-8";
/* ==========================================================================
   site.css — WordPress / WooCommerce 向けの追加スタイル
   design.css（BASE移植）で足りない部分だけを補う
   ========================================================================== */

/* --------------------------------------------------------------------------
   共通の器
   -------------------------------------------------------------------------- */
.siteWrap {
	overflow-x: hidden;
}

.pageInner {
	width: min(1200px, calc(100% - 48px));
	margin-inline: auto;
	padding-block: 64px;
}

@media (width < 1000px) {
	.pageInner {
		width: calc(100% - 32px);
		padding-block: 40px;
	}
}


.hubHero .subTit {
	text-align: center;
	font-size: 13px;
	letter-spacing: .3em;
	color: var(--ink-mute);
}

/* スクロール表示 */
.js-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .7s var(--ease), transform .7s var(--ease);
}

.js-reveal.is-shown {
	opacity: 1;
	transform: none;
}

/* --------------------------------------------------------------------------
   ハンバーガーメニュー
   見た目・開閉は BASE版の design.css（body.on 方式）に任せる。
   本家は div だったボタンを button にしたので、既定の余白だけ消す
   -------------------------------------------------------------------------- */
.hbBtn {
	padding: 0;
}

/* メニュー内のカート。本家は .hbMenu #baseMenu（ID重複）なのでクラスで同じ配置にする */
.hbMenu .hbMenuCart {
	width: fit-content;
	margin: 0 auto calc(40 / var(--screen-w) * 100vw);
}

.hbMenu .hbMenuCart .headerCart {
	/* 本家は白い角丸の枠に濃いカート（375px幅で 60×40） */
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(60 / var(--screen-w) * 100vw);
	height: calc(40 / var(--screen-w) * 100vw);
	background: #fff;
	border-radius: 3px;
	color: #373737;
}

.hbMenu .hbMenuCart .headerCart svg {
	width: calc(34 / var(--screen-w) * 100vw);
	height: calc(34 / var(--screen-w) * 100vw);
}

/* --------------------------------------------------------------------------
   ハブTOP
   -------------------------------------------------------------------------- */
/* 上はスマホで詰まって見えるので下限を広げる。下の「ブランドを選ぶ」とも間を取る */
.hubHero {
	padding: clamp(72px, 8vw, 120px) 24px clamp(48px, 8vw, 120px);
	background: var(--paper-warm);
	text-align: center;
}

.hubHeroTit {
	font-family: var(--font-mincho);
	font-size: clamp(22px, 3.6vw, 42px);
	line-height: 1.6;
	color: var(--ink-strong);
	margin-block: 16px;
}

.hubHeroLead {
	color: var(--ink);
	font-size: clamp(14px, 1.4vw, 17px);
}

/* 「ブランドを選ぶ」の見出しが FV の背景に接していたので上に間を取る */
.hubBrands {
	padding-top: clamp(64px, 7vw, 120px);
}

.brandCards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	/* 1列になるスマホでも、準備中の有無に関係なくカードの高さを揃える */
	grid-auto-rows: 1fr;
	gap: 24px;
	width: min(1200px, calc(100% - 48px));
	margin: 40px auto 0;
}

@media (width < 900px) {
	.brandCards { grid-template-columns: 1fr; }
}

.brandCard a {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: center;
	padding: 40px 24px;
	border: 1px solid var(--line);
	border-top: 4px solid var(--brand);
	background: var(--paper);
	height: 100%;
	text-align: center;
	transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}

/* 「サイトを見る」: 親（カードのリンク）に左右 padding があるので内側いっぱいに。
   「準備中」の有無で位置がずれないよう、カードの下端に揃える */
.brandCard a .itemLink {
	align-self: stretch;
	width: 100%;
	box-sizing: border-box;
	margin-top: auto;
	/* 太さは同じページの送信ボタン（.linkBtn1）に揃える。本家の .itemLink は商品カード用で細い */
	height: calc(67 / var(--screen-w) * 100vw);
	font-size: calc(16 / var(--screen-w) * 100vw);
}

@media (width < 1000px) {
	.brandCard a .itemLink {
		height: calc(56 / var(--screen-w) * 100vw);
	}

	.brandCard a .itemLink span {
		width: calc(23 / var(--screen-w) * 100vw);
		height: calc(23 / var(--screen-w) * 100vw);
	}
}

.brandCard a:hover {
	opacity: 1;
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, .08);
}

/* ロゴの縦横比がブランドごとに違うので、枠の高さを固定して中央に置く */
.brandCardLogo {
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: stretch;
	height: 100px;
	font-family: var(--font-mincho);
	font-size: clamp(18px, 2.2vw, 26px);
	font-weight: 700;
	color: var(--brand);
}

.brandCardLead {
	font-size: 14px;
	color: var(--ink);
}

/* 準備中は薄く。ただしロゴはブランドの顔なので薄くしない */
.brandCard.is-preparing a > :not(.brandCardLogo) {
	opacity: .6;
}

.brandCardNote {
	display: inline-block;
	padding: 2px 12px;
	background: var(--paper-gray);
	color: var(--ink-mute);
	font-size: 12px;
	border-radius: 999px;
}

/* 下のお問い合わせ（背景色つき）と詰まらないように */
.hubLinks {
	padding-bottom: clamp(64px, 7vw, 120px);
}

.hubLinkList {
	display: grid;
	grid-template-columns: repeat(3, 1fr); /* 3項目になったため4列→3列（2026-09 変更 dessin） */
	gap: 16px;
	width: min(900px, calc(100% - 48px));
	margin: 64px auto 0;
}

@media (width < 900px) {
	.hubLinkList { grid-template-columns: repeat(3, 1fr); }
}

@media (width < 560px) {
	.hubLinkList { grid-template-columns: 1fr; }
}

.hubLinkList a {
	display: block;
	padding: 24px;
	border: 1px solid var(--line);
	background: var(--paper);
	text-align: center;
}

.hubLinkTit {
	display: block;
	font-weight: 700;
	color: var(--brand);
}

.hubLinkNote {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	color: var(--ink-mute);
}

/* --------------------------------------------------------------------------
   ブランドTOP
   -------------------------------------------------------------------------- */
/* FV素材が届くまでのグレーの枠（本家FV 2880×1450 と同じ比率） */
.brandHeroPlaceholder {
	width: 100%;
	aspect-ratio: 2880 / 1450;
	background: #d6d6d6;
}

/* 商品が無いブランドの「準備中」（カード一覧の位置に出す） */
.brandPreparingNote {
	width: calc(1200 / var(--screen-w) * 100vw);
	max-width: 90%;
	margin: 0 auto;
	padding: calc(80 / var(--screen-w) * 100vw) 0;
	background: #fff;
	text-align: center;
	font-size: calc(18 / var(--screen-w) * 100vw);
	font-weight: 700;
	color: #999;
}

/* 「その他の商品」の見出し下に出す受取日の注記（宝船・きらめき）。2026-09 追加 dessin */
.brandOthersNote {
	width: calc(1200 / var(--screen-w) * 100vw);
	max-width: 90%;
	margin: 0 auto calc(60 / var(--screen-w) * 100vw);
	text-align: center;
	font-size: calc(18 / var(--screen-w) * 100vw);
	font-weight: 600;
	line-height: 1.7;
	/* 注意書きなので3ブランド共通の赤。ブランド色に合わせるなら var(--brand) に変える。 */
	color: #d12f29;
}

@media (width < 1000px) {
	.brandOthersNote {
		width: 90%;
		margin-bottom: calc(18 / var(--screen-w) * 100vw);
		font-size: calc(12 / var(--screen-w) * 100vw);
		text-align: left;
	}
}

.brandEditorial .entryBody {
	line-height: 2;
}

/* --------------------------------------------------------------------------
   お知らせ
   -------------------------------------------------------------------------- */
.newsSection {
	padding-block: 64px;
}

.newsList {
	width: min(920px, calc(100% - 48px));
	margin-inline: auto;
}

.newsItem {
	border-bottom: 1px solid var(--line);
}

.newsItem a {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px 16px;
	padding: 20px 4px;
}

.newsDate {
	color: var(--ink-mute);
	font-size: 13px;
	letter-spacing: .05em;
	flex: 0 0 auto;
}

.newsBrand {
	flex: 0 0 auto;
	padding: 2px 10px;
	border: 1px solid var(--brand);
	color: var(--brand);
	font-size: 11px;
	border-radius: 999px;
}

.newsTit {
	flex: 1 1 320px;
	font-weight: 500;
}

/* --------------------------------------------------------------------------
   店舗
   -------------------------------------------------------------------------- */
.storeFilter ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin-bottom: 40px;
}

.storeFilter a {
	display: block;
	padding: 8px 20px;
	border: 1px solid var(--line);
	border-radius: 999px;
	font-size: 14px;
}

.storeFilter .is-current a {
	background: var(--brand);
	border-color: var(--brand);
	color: #fff;
}

.storePrefTit {
	margin: 40px 0 16px;
	padding-left: 12px;
	border-left: 4px solid var(--brand);
	font-family: var(--font-mincho);
	font-size: 22px;
}

.storeList {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

@media (width < 900px) {
	.storeList { grid-template-columns: repeat(2, 1fr); }
}

@media (width < 560px) {
	.storeList { grid-template-columns: 1fr; }
}

.storeCard {
	padding: 20px;
	border: 1px solid var(--line);
	background: var(--paper);
}

.storeName {
	font-size: 17px;
	color: var(--brand);
}

.storeAddr,
.storeTel,
.storeHours {
	margin-top: 6px;
	font-size: 13px;
	line-height: 1.7;
}

.storeBadge {
	display: inline-block;
	margin-top: 10px;
	padding: 2px 10px;
	background: var(--brand);
	color: #fff;
	font-size: 11px;
	border-radius: 999px;
}

.storeTable th,
.storeTable td {
	padding: 14px 12px;
	border-bottom: 1px solid var(--line);
	text-align: left;
	vertical-align: top;
}

.storeTable th {
	width: 180px;
	color: var(--ink-mute);
	font-weight: 500;
}

@media (width < 560px) {
	.storeTable th,
	.storeTable td { display: block; width: auto; }
	.storeTable th { border-bottom: 0; padding-bottom: 0; }
}

.storeMap iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	max-width: 100%;
	border: 0;
}

/* --------------------------------------------------------------------------
   お問い合わせフォーム
   -------------------------------------------------------------------------- */
.inquirySection {
	padding: 64px 24px;
	background: var(--paper-warm);
}

/* ハブTOPの見出し（ブランドを選ぶ・お問い合わせ）の下。
   直後の要素の margin-top（カード 40px・フォーム 32px）と相殺されるので、大きい方のこちらが効く */
.hubTop .effectTit {
	margin-bottom: clamp(56px, 5vw, 80px);
}

.inquiryForm {
	width: min(720px, 100%);
	margin: 32px auto 0;
}

.formRow {
	margin-bottom: 20px;
}

.formRow label {
	display: block;
	margin-bottom: 6px;
	font-weight: 700;
	font-size: 14px;
}

.formRow .req {
	margin-left: 8px;
	padding: 1px 8px;
	background: var(--brand);
	color: #fff;
	font-size: 11px;
	border-radius: 3px;
}

.formRow input,
.formRow textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid #ccc;
	border-radius: 6px;
	background: #fff;
}

.formRow input:focus,
.formRow textarea:focus {
	border-color: var(--brand);
	box-shadow: 0 0 0 2px rgba(209, 47, 41, .12);
	outline: none;
}

/* ハニーポット。人には見せない */
.jijiyaHp {
	position: absolute !important;
	left: -9999px;
}

.formPrivacy {
	font-size: 13px;
	color: var(--ink-mute);
}

.formPrivacy a {
	text-decoration: underline;
}

.formSubmit {
	margin-top: 20px;
}

.formNotice {
	width: min(720px, 100%);
	margin: 16px auto 0;
	padding: 14px 18px;
	border-radius: 6px;
	font-weight: 700;
}

.formNotice.is-ok {
	background: #eaf6ee;
	color: #1c6b38;
}

.formNotice.is-ng {
	background: #fdecea;
	color: var(--brand-dark);
}

/* --------------------------------------------------------------------------
   ボタン
   -------------------------------------------------------------------------- */
/* ボタンの見た目は design.css（BASE版）の .linkBtn1 をそのまま使う。
   ここで display や background を上書きすると、本家の
   「flex + 固定幅 + グラデーション」が崩れて左寄りになる。
   自前のページで中央に置くための余白だけを足す。 */
section > .linkBtn1,
.pageInner > .linkBtn1,
.inquiryForm .formSubmit {
	margin: 32px auto 0;
}

/* お問い合わせの送信ボタンは button 要素なので既定の枠を消す */
.inquiryForm .formSubmit {
	border: 0;
	cursor: pointer;
}

/* --------------------------------------------------------------------------
   パンくず
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   本文
   -------------------------------------------------------------------------- */
.entryBody > * + * {
	margin-top: 1.2em;
}

/* 固定ページ（プライバシーポリシー・特商法など）のタイトル下。
   見出しの飾り線が本文に重ならないよう間を取り、本文先頭の見出しの上余白で差が出ないよう揃える */
.pageInner > .effectTit {
	margin-bottom: 64px;
}

.pageInner > .effectTit + .pageBody > :first-child {
	margin-top: 0;
}

@media (width < 1000px) {
	.pageInner > .effectTit {
		margin-bottom: 40px;
	}
}

/* 自前ページの見出しの飾り（PC）。
   本家の飾りは見出しブロックの左右の端に貼り付くので、ブロック幅が文字量と関係なく決まる
   自前のページでは、狭いと文字に重なり（受取店舗を選ぶ）、広いと離れすぎる（お問い合わせ）。
   ブロックを文字幅に合わせ、左右に一定の余白を持たせて、ブランドTOP（オードブル）と同じ
   「文字との間 67px・飾りの下に文字」の見え方に揃える。2026-10 追加 dessin */
@media (width >= 1000px) {
	.hubStoreSelect .effectTit,
	.inquirySection .effectTit,
	.hubBrands > .effectTit,
	.pageInner > .effectTit,
	#others.topBlock1 .effectTit {
		width: fit-content;
		max-width: 100%;
		margin-inline: auto;
		/* 飾り 239 ＋ 文字までの間 89（1920基準） */
		padding-inline: calc(328 / var(--screen-w) * 100vw);
		padding-top: calc(28 / var(--screen-w) * 100vw);
		/* 左右の余白に押されて文字が折り返さないようにする */
		white-space: nowrap;
	}
}

/* 自前ページの見出しの飾り線（スマホ）。
   本家の飾りは文字と同じ高さの左右に出るので、「特定商取引法に基づく表記」のような長い見出しだと文字に重なる。
   右上・左下に逃がして文字の上下に置く。ブランドTOPの見出し（topBlock1/2）は本家どおりなので対象外 */
@media (width < 1000px) {
	.pageInner > .effectTit,
	.hubBrands > .effectTit,
	.inquirySection .effectTit,
	.hubStoreSelect .effectTit {
		padding-top: calc(34 / var(--screen-w) * 100vw);
		padding-bottom: calc(34 / var(--screen-w) * 100vw);
	}

	.pageInner > .effectTit::before,
	.hubBrands > .effectTit::before,
	.inquirySection .effectTit::before,
	.hubStoreSelect .effectTit::before {
		top: 0;
	}
}

.entryBody h2 {
	margin-top: 2em;
	padding-bottom: .4em;
	border-bottom: 2px solid var(--brand);
	font-family: var(--font-mincho);
	font-size: 24px;
}

.entryBody h3 {
	margin-top: 1.8em;
	font-size: 19px;
	color: var(--brand);
}

.entryBody ul { list-style: disc; padding-left: 1.4em; }
.entryBody ol { list-style: decimal; padding-left: 1.4em; }
.entryBody li { list-style: inherit; }
.entryBody a { text-decoration: underline; }

/* プライバシーポリシー（BASE版の dl 構成）。項目名は太字、（１）付きの箇条は記号を付けない */
.entryBody dt {
	margin-top: 1.8em;
	font-weight: 700;
	font-size: 17px;
}

.entryBody dd {
	margin: .5em 0 0;
}

.entryBody dd ul {
	list-style: none;
	padding-left: 0;
	margin-top: .6em;
}

.entryBody dd li + li {
	margin-top: .4em;
}

.entryBody .privacy_intro + dl > dt:first-child {
	margin-top: 1.2em;
}

/* 本文に貼られた表は横スクロールで逃がす。
   カート・購入手続きのブロックも固定ページ本文の中に出るので、WooCommerce の表は除外する
   （含めるとスマホでカートが改行されず横スクロールになる） */
.entryBody table:not([class*="wc-block"]):not(.shop_table) {
	display: block;
	overflow-x: auto;
	white-space: nowrap;
}

.noResult {
	padding: 64px 0;
	text-align: center;
	color: var(--ink-mute);
}

/* ==========================================================================
   BASE版から移植したセクションの補正
   design.css が持っていない部分だけを足す
   ========================================================================== */

/* --------------------------------------------------------------------------
   ヘッダー
   BASE版はロゴが画像だったため高さが出ていた。
   ロゴ未設定でテキストになる場合に潰れないよう下限を持たせる。
   -------------------------------------------------------------------------- */
header.pc {
	background: rgba(255, 255, 255, .94);
	backdrop-filter: blur(6px);
	box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
}


.headerLogo {
	font-family: var(--font-mincho);
	font-size: clamp(18px, 1.5vw, 26px);
	font-weight: 700;
	color: var(--brand);
	white-space: nowrap;
}

/* ロゴが img のとき。BASE版のロゴは 312x175 の横長 */
img.headerLogo {
	height: clamp(32px, calc(58 / 1920 * 100vw), 58px);
	width: auto;
	display: block;
}


/* SVG ロゴは幅を持たないので、max-height だけだと幅0で消える。高さを固定して幅を比率で出す */
.brandCardLogo img {
	display: block;
	height: 84px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
}



/* 管理バーが出ているときに固定ヘッダーが隠れないようにする */
body.admin-bar header.pc {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar header.pc { top: 46px; }
}

/* --------------------------------------------------------------------------
   FV
   -------------------------------------------------------------------------- */
.brandHero {
	line-height: 0;
}

.brandHeroImg {
	width: 100%;
	height: auto;
	display: block;
}

/* FVの下の余白。本家は 60/1920（スマホ 26/375）で見出しが詰まって見えるので広げる */
.brandHero + .topBlock1 {
	padding-top: calc(140 / var(--screen-w) * 100vw);
}

@media (width < 1000px) {
	.brandHero + .topBlock1 {
		padding-top: calc(56 / var(--screen-w) * 100vw);
	}
}

/* --------------------------------------------------------------------------
   見出しの副題（単品メニュー 等）
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   注意事項
   -------------------------------------------------------------------------- */



.topBlock3 .shopListTxt a {
	text-decoration: none;
}

.topBlock3 .shopListTxt a:hover {
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   じじやのこだわり
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   セクションの詰め
   BASE版の余白は、当時そこに入っていた要素の分まで確保されていた。
   移植後は中身が変わっているので、空きが目立つ箇所だけ詰める。
   -------------------------------------------------------------------------- */

/* 注意事項の下。背景画像を見せる余白は残しつつ圧縮する */

/* こだわりの3項目の下。BASE版はここに bnrWrap が入っていた。
   同じ位置に戻したので、過剰な余白を通常値へ戻す */

/* --------------------------------------------------------------------------
   画像の比率を揃える
   BASE版は同じ比率の写真が入る前提だった。
   差し替えても崩れないように切り抜きで揃える。
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   商品カードの内容バッジ
   BASE版 .itemfutear。データが入っていないと出ないので、
   高さを固定せず有無で詰まるようにしておく。
   -------------------------------------------------------------------------- */
.itemcard .itemfutear:empty {
	display: none;
}

/* --------------------------------------------------------------------------
   商品詳細
   BASE版の構成に合わせる。design.css の .itemDetailWrap 系を土台に、
   足りない部分だけ補う。
   -------------------------------------------------------------------------- */






/* 商品内容ボックス */




/* サムネイルは小さく並べる */


/* --------------------------------------------------------------------------
   カート投入フォーム
   WooCommerce 既定のボタンは紫。BASE版の赤い大型ボタンに合わせる。
   -------------------------------------------------------------------------- */

/* 数量。BASE版と同じプルダウン */




/* 店舗受取専用の同意。BASE版と同じくカート投入の必須条件 */
.jijiyaConsentWrap {
	margin: 16px 0;
}

.jijiyaConsent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.7;
	color: #222;
	cursor: pointer;
}

.jijiyaConsent input {
	width: 18px;
	height: 18px;
	margin: 3px 0 0;
	flex: 0 0 18px;
	accent-color: var(--brand);
	cursor: pointer;
}

/* カートに入れる */




/* 追加10貫盛のブロックはカートフォームの中に入る */

/* --------------------------------------------------------------------------
   赤帯（ヘッダー告知）が空のときの位置合わせ
   BASE版の article { padding-top: 118 } は「ヘッダー＋赤帯」の高さ。
   赤帯が無いぶんだけ詰める。スマホは表示確認のうえで別途調整する。
   -------------------------------------------------------------------------- */
@media (width >= 1000px) {
	body:not(.has-header-notice) article {
		padding-top: calc(83 / var(--screen-w) * 100vw);
	}
}

/* --------------------------------------------------------------------------
   ヘッダーのカート
   BASE版では ナビ末尾 → 約300px 空けて右端寄りにカートがある
   -------------------------------------------------------------------------- */
/* 本家の #baseMenu は幅130pxの固定箱で、カートはその右端寄りにある。
   ナビ→箱の間隔は本家の nav { margin-right: 239 } が作るので、ここでは足さない。
   画面幅 1695 / 1440 / 1280 で本家と ±1px 以内を確認済み */
#baseMenu {
	width: 130px;
	box-sizing: border-box;
	display: flex;
	justify-content: flex-end;
	padding-right: 11px;
}

.headerCart {
	display: block;
	color: #373737;
	line-height: 0;
}

/* SVG は枠の内側に余白があるので、見た目の幅を本家の 30px に合わせるため 35px */
.headerCart svg {
	width: 35px;
	height: 35px;
}

/* カート・購入手続きの黒ボタン（「購入手続きに進む」「注文を確定」）。
   ボタン本体は白文字だが、中の span に design.css のリセット（span { color: 紺 }）が当たり、
   カートページでは本文用の .entryBody a の下線も付いて読めなくなっていた */
/* 「注文を確定」は文字が div の二重入れ子（__text > place-order-button__text）なので、中身すべてに当てる */
.wc-block-components-button.contained,
.wc-block-components-button.contained:hover,
.wc-block-components-button.contained:focus,
.wc-block-components-button.contained * {
	color: #fff;
	text-decoration: none;
}

/* カートの点数バッジ。アイコンの右上に重ねる */
.headerCart {
	position: relative;
}

.headerCartCount {
	position: absolute;
	top: -6px;
	right: -9px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	box-sizing: border-box;
	border-radius: 9px;
	background: #D12F29;
	color: #fff;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
	letter-spacing: 0;
}

/* スマホメニュー内のカートは白い箱の中に収まるので、箱の角に重ねる */
.hbMenu .hbMenuCart .headerCartCount {
	top: -7px;
	right: -7px;
}

/* 本家はロゴを h1 で包み、h1 の右マージン（約12/1920）でバッジとの間を空けている。
   ブランドページではロゴを p で包むので同じ間隔を与える */
.headTitWrap > p:not(.mainSubTit) {
	margin-right: calc(12 / var(--screen-w) * 100vw);
}

/* --------------------------------------------------------------------------
   商品詳細の購入フォーム（BASE版の再現）
   BASE版はテンプレートの design.css に加えて、BASEプラットフォーム側の CSS
   （body#shopDetailPage #purchase_form …）でも装飾していた。WooCommerce の
   フォームには同じ ID が無いので、宣言だけを自前のセレクタに写す。
   -------------------------------------------------------------------------- */

/* BASE プラットフォームの #purchase_form 系。本家では ID で design.css に勝っていた。
   ID の代わりに form.cart を足して同じ強さにする */
.itemDetailWrap .itemDetail form.cart {
	color: #000;
	margin-bottom: 35px;
}

.itemDetailWrap .itemDetail form.cart select {
	cursor: pointer;
}

/* 同意チェックのラベルは本家も !important で別扱いにしているので除外 */
.itemDetailWrap .itemDetail form.cart label:not(.jijiyaConsent) {
	font-size: 14px;
	margin: 16px 0 8px 0;
	line-height: 1em;
	display: block;
}

.itemDetailWrap .itemDetail form.cart .purchaseElement {
	margin: 5px 0 15px;
	overflow: hidden;
}

.itemDetailWrap .itemDetail form.cart .purchaseElement label {
	color: #000;
	font-size: 14px;
	margin-right: 10px;
}

/* 選択欄: 独自の▼（BASE版の画像そのまま）と最小高さ 2.1em */
.itemDetailWrap .itemDetail form.cart select.itemOption__select,
.itemDetailWrap .itemDetail form.cart select.amountSelect {
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2210%22%20height%3D%226%22%20viewBox%3D%220%200%2010%206%22%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3Cstyle%3E%0A%20%20%20%20%20%20.cls-1%20%7B%0A%20%20%20%20%20%20%20%20fill%3A%20%23fafafa%3B%0A%20%20%20%20%20%20%20%20fill-rule%3A%20evenodd%3B%0A%20%20%20%20%20%20%20%20filter%3A%20url(%23filter)%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%3C%2Fstyle%3E%0A%20%20%20%20%3Cfilter%20id%3D%22filter%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2210%22%20height%3D%226%22%20filterUnits%3D%22userSpaceOnUse%22%3E%0A%20%20%20%20%20%20%3CfeFlood%20result%3D%22flood%22%20flood-color%3D%22%23333%22%20flood-opacity%3D%220.50%22%2F%3E%0A%20%20%20%20%20%20%3CfeComposite%20result%3D%22composite%22%20operator%3D%22in%22%20in2%3D%22SourceGraphic%22%2F%3E%0A%20%20%20%20%20%20%3CfeBlend%20result%3D%22blend%22%20mode%3D%22multiply%22%20in2%3D%22SourceGraphic%22%2F%3E%0A%20%20%20%20%3C%2Ffilter%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Cpath%20id%3D%22icon-arrow-down%22%20class%3D%22cls-1%22%20d%3D%22M5%2C6l5-6H0Z%22%2F%3E%0A%3C%2Fsvg%3E");
	background-position: right .35em center;
	background-repeat: no-repeat;
	background-size: auto;
	height: auto;
	line-height: normal;
	max-width: 100%;
	min-height: 2.1em;
	padding-right: 1em;
	white-space: normal;
}

/* 数量は幅自動（BASE版 #amountSelect）。最小幅・表示・下余白は本家の実測値 */
.itemDetailWrap .itemDetail form.cart select.amountSelect {
	width: auto;
	max-width: 375px;
	min-width: 100px;
	display: block;
	margin-bottom: 10px;
}

.itemDetailWrap .itemDetail .purchaseButton {
	margin: 30px 0 0;
	text-align: center;
}

/* カートボタン: プラットフォームの基本 → テーマの上書き の順に合成した結果 */
.itemDetailWrap .itemDetail .purchaseButton .single_add_to_cart_button {
	box-sizing: border-box;
	cursor: pointer;
	outline: none;
	padding: 14px 0;
	text-decoration: none;
	font-family: "Shippori Mincho", serif;
	font-size: calc(16 / var(--screen-w) * 100vw);
	font-weight: 900;
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(429 / var(--screen-w) * 100vw);
	height: calc(67 / var(--screen-w) * 100vw);
	background-color: #000;
	background-image: linear-gradient(#D12F29 0, #AB0600 100%);
	color: #fff;
	border: 1px solid #CFCAAE;
	border-radius: 3px;
	position: relative;
	transition: .3s;
}

.itemDetailWrap .itemDetail .purchaseButton .single_add_to_cart_button:hover {
	opacity: .7;
}

/* 同意チェックを入れるまでは押せない（BASE版の jjPickupDisabled） */
.itemDetailWrap .itemDetail .purchaseButton .single_add_to_cart_button:disabled {
	background: #eee;
	color: #999;
	cursor: not-allowed;
	opacity: 1;
}

@media (width < 1000px) {
	.itemDetailWrap .itemDetail .purchaseButton .single_add_to_cart_button {
		width: calc(295 / var(--screen-w) * 100vw);
		height: calc(56 / var(--screen-w) * 100vw);
	}
}

/* 赤帯が空のときのスマホ位置合わせ。BASE版の 183px / 83px は赤帯（375px幅で28px）込み */
@media (width < 1000px) {
	body:not(.has-header-notice) article {
		padding-top: calc(183px - 28 / 375 * 100vw);
	}
}

@media (width < 820px) {
	body:not(.has-header-notice) article {
		padding-top: calc(83px - 28 / 375 * 100vw);
	}
}

/* --------------------------------------------------------------------------
   ブランドハブへ戻るボタン（ブランドTOPの最下部）
   -------------------------------------------------------------------------- */
.brandHubBack {
	padding-top: calc(80 / var(--screen-w) * 100vw);
}

.brandHubBack .linkBtn1 {
	margin: 0 auto;
}


/* スマホのヘッダーロゴ。本家は 375px 幅で高さ 37px（画面幅に比例） */
@media (width < 1000px) {
	img.headerLogo {
		height: calc(37 / var(--screen-w) * 100vw);
	}
}

/* 注意事項の「■」と文字の高さ揃え。
   本家は baseline 揃えだが、和文は文字の墨が baseline より下にも出るため四角が1px強うわずる。
   中央揃えにして墨の中心どうしを合わせる。2026-10 追加 dessin */
.topBlock3Inner .box1.no3 .memo {
	align-items: center;
}

/* 購入手続き：「注文を確定」ボタンのすぐ上に出すキャンセル不可の案内。2026-10 追加 dessin */
.jijiyaCheckoutNote {
	margin: 0 0 12px;
	padding: 10px 14px;
	border: 1px solid #e3b7b5;
	border-radius: 4px;
	background: #fdf4f3;
	text-align: center;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.7;
	color: #c00600;
}

@media (width < 1000px) {
	.jijiyaCheckoutNote {
		font-size: 13px;
		text-align: left;
	}
}