に包む。
ここではその見た目だけ定義する。
========================================================= */
/* 改善1：Shopify Dawn 2.0型のミニマル・アコーディオン。
カード（背景・角丸・影・すき間）は全廃。各見出しの「下」に細い罫線、
横幅は本文いっぱい・左右paddingは本文（リード文）と揃えて 0。
テーマCSS（renewal.css 等）に負けないよう要所に !important。 */
html.mb-opt .mbopt-acc {
margin: 0 !important; /* すき間なし、罫線で連続 */
background: none !important;
border: 0 !important;
border-bottom: 1px solid var(--mbopt-line) !important; /* 見出し下の細い境界線 */
border-radius: 0 !important;
box-shadow: none !important;
overflow: visible !important;
}
/* リード文（物語コピー）と最初の見出しの間隔は維持。上端も罫線で閉じる。 */
html.mb-opt .mbopt-acc:first-of-type {
margin-top: 28px !important;
border-top: 1px solid var(--mbopt-line) !important;
}
/* 見出し行：上下しっかり・左右は本文と揃える（=0）。背景なし。 */
html.mb-opt .mbopt-acc > summary {
list-style: none; cursor: pointer;
display: flex; align-items: center; justify-content: space-between;
gap: 12px;
padding: 18px 0 !important; /* 上下しっかり／左右は本文と揃え 0 */
background: none !important;
border: 0 !important;
}
/* 見出しテキストはゴシック。改善2：長い見出しは自然に折り返す（右端で切れない）。 */
html.mb-opt .mbopt-acc > summary .mbopt-q {
flex: 1 1 auto !important; /* テキスト側が伸縮 */
min-width: 0 !important; /* flex子の折り返しを許可 */
margin-right: 12px !important; /* ＋アイコンと重ならない余白 */
white-space: normal !important;
word-break: break-word !important;
overflow-wrap: anywhere !important;
font-family: "Hiragino Sans","Helvetica Neue",sans-serif !important;
font-size: 16px !important;
font-weight: 600 !important;
line-height: 1.45;
letter-spacing: .01em;
color: #3a352e !important;
}
html.mb-opt .mbopt-acc > summary::-webkit-details-marker { display: none; }
html.mb-opt .mbopt-acc > summary .mbopt-pm {
flex: 0 0 22px; width: 22px; height: 22px; position: relative;
border: 1px solid #c8a47a; border-radius: 50%; transition: .2s;
}
html.mb-opt .mbopt-acc > summary .mbopt-pm::before,
html.mb-opt .mbopt-acc > summary .mbopt-pm::after {
content: ""; position: absolute; background: #9a7a52;
left: 50%; top: 50%; transform: translate(-50%,-50%);
}
html.mb-opt .mbopt-acc > summary .mbopt-pm::before { width: 10px; height: 1.5px; }
html.mb-opt .mbopt-acc > summary .mbopt-pm::after { width: 1.5px; height: 10px; transition: .2s; }
html.mb-opt .mbopt-acc[open] > summary .mbopt-pm { background: #2f6b5e; border-color: #2f6b5e; }
html.mb-opt .mbopt-acc[open] > summary .mbopt-pm::before,
html.mb-opt .mbopt-acc[open] > summary .mbopt-pm::after { background: #fff; }
html.mb-opt .mbopt-acc[open] > summary .mbopt-pm::after { height: 0; }
/* 開いた本文：左右paddingを summary（=本文）と揃えて 0（画像幅などは既存CSSを尊重） */
html.mb-opt .mbopt-acc .mbopt-acc-body { padding: 0 0 18px !important; }
/* バグ修正：本文の元divは style="margin-top:-40px" を持っており、開くと本文が上へずれて
見出し（.mbopt-q）に覆い被さり、見出しが消えて見える。アコーディオン内では打ち消す。 */
html.mb-opt .mbopt-acc .mbopt-acc-body > div { margin-top: 0 !important; }
/* アコーディオン化に伴い不要になる旧「続きを読む」ボタンを隠す
（JSが中身を展開して details に入れるため二重表示を防ぐ） */
html.mb-opt .mbopt-acc .btn-blk { display: none; }
html.mb-opt .mbopt-acc .more-text { height: auto !important; overflow: visible !important; }
/* =========================================================
3. 既存スティッキーCTA（#cta-menu）の微調整
既に実装済みなので、視認性だけ少し上げる。
========================================================= */
html.mb-opt #cta-menu .purchase-button {
background: #2f6b5e !important;
}
/* 売り切れ選択時：固定CTAボタンも「再入荷を希望する」色（shell-deep）に統一 */
html.mb-opt #cta-menu .purchase-button.mbopt-cta--waitlist {
background: #9a7a52 !important;
}
/* 改善3：スティッキーCTA内の価格が大きすぎるので一回り小さくして、ボタンとバランスを取る */
html.mb-opt #cta-menu .cta-footer-product__product-price-value {
font-size: 18px !important;
line-height: 1.1 !important;
}
html.mb-opt #cta-menu .cta-footer-product__product-price-unit {
font-size: 13px !important;
}
/* 改善（Task1）：優待あり時、固定CTAの価格を縦2段（上：打ち消し小 ／ 下：優待大）にまとめて
横幅を圧縮し、CTAボタンに十分な幅を残す。優待なし時は上の通常価格スタイルのまま。 */
/* 見本(cta-reference.png)に合わせた固定CTA価格。最重要修正：#cta-menu 由来の
letter-spacing:4.48px を打ち消す（数字が不自然に間延びして見える原因）。
上に小さく打ち消し価格／下に優待価格を密着、送料無料は価格の下に小さくグレー。 */
html.mb-opt #cta-menu .cta-footer-product__product-price.mbopt-sticky-price--member {
display: inline-flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 0 !important;
letter-spacing: normal !important; /* 継承された広い字間をリセット */
line-height: 1 !important;
}
html.mb-opt #cta-menu .mbopt-sticky-was {
font-family: var(--mbopt-price-font) !important;
font-size: 11px !important; font-weight: 400 !important;
color: #9a948a !important; text-decoration: line-through !important;
letter-spacing: normal !important; white-space: nowrap !important;
line-height: 1 !important; margin: 0 !important;
}
html.mb-opt #cta-menu .mbopt-sticky-now {
font-family: var(--mbopt-price-font) !important; /* 明朝系で統一。太字ゴシックをやめる */
font-size: 18px !important; font-weight: 400 !important; color: #2f6b5e !important; /* 主役感は size＋色（緑）で */
letter-spacing: normal !important; white-space: nowrap !important;
line-height: 1.05 !important; margin: 0 !important;
}
html.mb-opt #cta-menu .mbopt-sticky-now small {
font-family: var(--mbopt-price-font) !important;
font-size: 12px !important; font-weight: 400 !important; letter-spacing: normal !important;
}
/* 送料無料：価格の下に小さくグレー（見本と同じ位置・サイズ感） */
html.mb-opt #cta-menu .mbopt-sticky-price--member ~ .cta-footer-product__product-contents-status {
display: block !important; margin: 2px 0 0 !important;
}
html.mb-opt #cta-menu .mbopt-sticky-price--member ~ .cta-footer-product__product-contents-status p {
font-size: 10px !important; color: #9a948a !important; letter-spacing: normal !important;
line-height: 1.2 !important; margin: 0 !important; white-space: nowrap !important;
}
/* =========================================================
4. 関連商品の体感ボリュームを下げる
縦積みのリストを横スクロールにする（既存マークアップ前提）。
※ 検証で効果を見たい場合のみ有効化。まずはコメントアウトで温存。
========================================================= */
/*
html.mb-opt .section_other_product .c-product-list__inner {
display: flex; gap: 12px; overflow-x: auto;
scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
html.mb-opt .section_other_product .c-product-list__item {
flex: 0 0 46%; scroll-snap-align: start;
}
*/
/* =========================================================
5. シェアアイコンを隠す（改善5）
商品説明エリアの LINE/Facebook/Twitter シェアを非表示。
========================================================= */
html.mb-opt .section_product_description .sns-icon { display: none !important; }
/* =========================================================
6. ストーリー先頭の主題＋副題（改善6）
JSが .main-sentence 先頭に主題＋副題を挿入し、重複する既存タイトル
（.description-title 内の主題＋商品名）を非表示にする（mbopt-story-on 付与時のみ）。
========================================================= */
/* 本文パートの入り口の冠見出し「STORY」＋細い区切り（静か・上品／装飾過多にしない）。
購入パート（FV）と読み物パート（ストーリー）の境界を視覚的に示す。 */
html.mb-opt .mbopt-story-cap {
text-align: center !important;
margin: 4px 0 22px !important;
}
html.mb-opt .mbopt-story-cap .mbopt-story-cap-en {
display: inline-block !important;
/* 改善1：STORY冠に Albertus 系カスタムフォント（フォールバックはゴシック） */
font-family: 'monoco-story', var(--mbopt-gothic) !important;
font-size: 13px !important; font-weight: 500 !important; /* Albertus が映えるよう少し大きめ */
letter-spacing: .28em !important; text-indent: .28em !important; /* このフォント向けに字間を軽く調整 */
color: var(--mbopt-shell-deep) !important;
}
html.mb-opt .mbopt-story-cap::after {
content: "" !important; display: block !important;
width: 40px !important; height: 1px !important;
margin: 10px auto 0 !important;
background: var(--mbopt-line) !important;
}
/* Task3：主題＋副題を「見出しゾーン」として1つにまとめ、その下に細い区切り線で本文ゾーンと分離。 */
html.mb-opt .mbopt-story-head {
margin: 0 0 22px !important; /* 区切り線から本文までの余白 */
padding: 0 0 18px !important; /* 副題から区切り線までの余白 */
border-bottom: 1px solid var(--mbopt-line) !important; /* 見出しゾーンと本文ゾーンの境界 */
}
/* Task2：下部STORYの主題サイズを、ファーストビュー先頭の主題（.mbopt-hero＝18px）と統一。 */
html.mb-opt .mbopt-story-head .mbopt-story-title {
font-size: 18px !important;
font-weight: 700 !important;
line-height: 1.55 !important;
letter-spacing: .01em !important;
color: #1d1b18 !important;
margin: 0 !important;
}
/* Task3：副題は主題の直下に寄せてグループ化。色を抑え、字間を広げて「副題」と分かる装飾に。 */
html.mb-opt .mbopt-story-head .mbopt-story-sub {
font-family: var(--mbopt-gothic) !important;
font-size: 12.5px !important;
line-height: 1.5 !important;
letter-spacing: .12em !important; /* 字間を広めにして副題らしく */
color: #9a948a !important; /* 主題より抑えた色 */
margin: 5px 0 0 !important; /* 主題の直下に寄せる */
}
/* 重複している既存タイトル（主題＋商品名）を隠す。story-head 挿入成功時のみ。 */
html.mb-opt .section_product_description.mbopt-story-on .description-title { display: none !important; }
/* =========================================================
7. バリエーション選択UI（テキストタグ/ピル型・全商品共通）
JSがファーストビューCTAの「上」に挿入。色・サイズを問わずタグで横並び。
全幅・余白控えめ・静かなトーン。選択中は shell-deep 塗り。
テーマCSSに負けないよう要所に !important。
========================================================= */
html.mb-opt .mbopt-firstview .mbopt-swatch { margin: 2px 0 14px !important; }
html.mb-opt .mbopt-firstview .mbopt-swatch-label {
font-family: var(--mbopt-gothic) !important;
font-size: 12px !important; font-weight: 600 !important;
letter-spacing: .08em !important; color: #5c574f !important;
margin: 0 0 8px !important;
}
html.mb-opt .mbopt-firstview .mbopt-swatch-current { color: #1d1b18 !important; font-weight: 700 !important; }
/* テキストのタグ/ピル型に統一（色・サイズ共通）。横並び・折り返しOK。
選択肢名の長短に左右されず安定。色名は上部 current ラベル一箇所に出す。 */
html.mb-opt .mbopt-firstview .mbopt-swatch-grid {
display: flex !important; flex-wrap: wrap !important; gap: 8px !important;
/* SKUが多い商品（例:Archies 63種）でも FV が縦に伸びすぎないよう高さ上限＋スクロール。
選択肢が少ない商品（technogel 3種/earhook 7種）は上限未満なのでスクロールは出ない。 */
max-height: 170px !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
padding: 2px 2px 2px 0 !important;
}
/* タグ1個（ボタン要素のテーマ装飾はリセット）。選択肢名＋（在庫バッジ）を縦に。 */
html.mb-opt .mbopt-firstview .mbopt-tag {
-webkit-appearance: none !important; appearance: none !important;
cursor: pointer !important; margin: 0 !important;
display: inline-flex !important; flex-direction: column !important;
align-items: center !important; gap: 1px !important;
font-family: var(--mbopt-gothic) !important;
line-height: 1.1 !important;
letter-spacing: .02em !important; color: #3a352e !important;
background: #fff !important;
border: 1px solid var(--mbopt-line) !important;
border-radius: 16px !important;
padding: 7px 14px !important;
transition: border-color .15s, background-color .15s, color .15s !important;
}
html.mb-opt .mbopt-firstview .mbopt-tag .mbopt-tag-name {
font-size: 13px !important; font-weight: 600 !important;
}
/* 在庫バッジ（残りN点／SOLD OUT）：小さく控えめに。タグが窮屈にならない見せ方。 */
html.mb-opt .mbopt-firstview .mbopt-tag .mbopt-tag-stock {
font-size: 9px !important; font-weight: 600 !important; letter-spacing: .02em !important; line-height: 1 !important;
}
html.mb-opt .mbopt-firstview .mbopt-tag--low .mbopt-tag-stock { color: #c61c53 !important; } /* 残りわずか＝赤 */
/* 売り切れ：グレーアウト（選択は可能＝再入荷導線） */
html.mb-opt .mbopt-firstview .mbopt-tag--soldout {
color: #b8b2a6 !important; border-color: #ece7dd !important;
}
html.mb-opt .mbopt-firstview .mbopt-tag--soldout .mbopt-tag-stock { color: #b8b2a6 !important; }
/* 選択中：shell-deep の塗り＋白文字（単一選択がはっきり分かる。在庫バッジも白で視認可） */
html.mb-opt .mbopt-firstview .mbopt-tag.is-selected {
border-color: var(--mbopt-shell-deep) !important;
background: var(--mbopt-shell-deep) !important;
color: #fff !important;
}
html.mb-opt .mbopt-firstview .mbopt-tag.is-selected .mbopt-tag-stock { color: #fff !important; }
/* 売り切れSKU選択中のCTA（＝再入荷を希望する）：モーダルの is-waitlist と同色に統一 */
html.mb-opt .mbopt-cta.mbopt-cta--waitlist {
background: #9a7a52 !important; box-shadow: 0 6px 16px rgba(154,122,82,.28) !important;
}
/* =========================================================
8. 仕様・インフォメーションの「さらに表示」を廃止（Task1）
折りたたみ(.more-text height:0)を解除し全内容を常時表示、トグルは非表示。
========================================================= */
html.mb-opt .section_spec_and_information .more-text {
height: auto !important; overflow: visible !important;
}
html.mb-opt .section_spec_and_information .btn-blk { display: none !important; }
/* 行間・項目間の余白を広げて読みやすく。テーマは #view_product（id）指定なので、
こちらも #view_product を含めて詳細度で確実に上回る。 */
html.mb-opt #view_product .section_spec_and_information .spec_description {
line-height: 1.95 !important;
}
html.mb-opt #view_product .section_spec_and_information .spec_description ul {
margin: 12px 0 !important; padding-left: 1.3em !important;
}
html.mb-opt #view_product .section_spec_and_information .spec_description li {
line-height: 1.9 !important; margin-bottom: 10px !important;
}
html.mb-opt #view_product .section_spec_and_information .spec_description li:last-child {
margin-bottom: 0 !important;
}
/* =========================================================
9. 下部「商品を購入」ブロックの非表示と、救出4要素のFV内レイアウト（Task2）
ブロック本体は隠す。4要素はJSでファーストビューへ移動済み。
========================================================= */
/* ブロック本体を非表示（JSが移動成功時に付与するクラスのときだけ） */
html.mb-opt .section_select_product.mbopt-buyblock-hidden { display: none !important; }
/* (c) 移動したラベル群を、既存バッジと同じ体裁で同じ行に並べる */
html.mb-opt .mbopt-firstview .mbopt-badges p {
font-size: 10.5px !important; color: #5c574f !important; margin: 0 !important;
border: 1px solid var(--mbopt-line) !important; border-radius: 20px !important;
padding: 5px 11px !important; line-height: 1.3 !important; background: none !important;
font-weight: 400 !important;
}
/* (a)+(b) 社会的証明：ハート＋お気に入り数を横並びで、CTA近く（バッジ行の下）に */
html.mb-opt .mbopt-firstview .mbopt-social {
display: flex !important; align-items: center !important; gap: 8px !important;
margin-top: 12px !important;
}
html.mb-opt .mbopt-firstview .mbopt-social .wishlist-container {
margin: 0 !important; padding: 0 !important; cursor: pointer !important;
line-height: 0 !important; flex: 0 0 auto !important;
}
html.mb-opt .mbopt-firstview .mbopt-social .product-wishlist {
width: 24px !important; height: 22px !important; display: block !important;
fill: #9a7a52; /* 登録状態のJS切替を邪魔しないよう !important は付けない */
}
html.mb-opt .mbopt-firstview .mbopt-social h4 {
margin: 0 !important; font-family: var(--mbopt-gothic) !important;
font-size: 12px !important; font-weight: 600 !important; color: #5c574f !important;
line-height: 1.2 !important;
}
/* (d) 即日出荷予定日：社会的証明の下に小さく */
html.mb-opt .mbopt-firstview .mbopt-shipping {
list-style: none !important; margin: 6px 0 0 !important; padding: 0 !important;
}
html.mb-opt .mbopt-firstview .mbopt-shipping p {
margin: 0 !important; font-size: 11px !important; color: #9a948a !important; line-height: 1.3 !important;
}
/* =========================================================
10. 関連商品（ラインナップ／よく一緒に／こちらもおすすめ）の価格を縮小（Task2）
原因：テーマCSS（renewal.css）が .c-product-item__price .c-price-text__number を
20px 指定。詳細度で勝つよう、より具体的なセレクタ＋!important で確実に縮小。
※ FV主価格は .mbopt-price-now（別クラス）なので影響しない。 */
html.mb-opt .c-product-item__price .c-price-text,
html.mb-opt .c-product-item__price .c-price-text__number {
font-size: 13px !important;
font-weight: 600 !important;
}
html.mb-opt .c-product-item__price .c-price-text__unit {
font-size: 11px !important;
}
/* Task1：フォント縮小で空いた商品名〜価格の余白を詰め、価格を商品名の直下に程よく続ける。
テーマの margin-top:8px を縮小。 */
html.mb-opt .c-product-item .c-product-item__price {
margin-top: 3px !important;
line-height: 1.3 !important;
}
/* =========================================================
11. お買い物ガイドの箇条書きマーカー修正（Task3）
原因：.guide_points .point::before がアイコンフォント "monoco3" を使用しており、
そのWebフォントが読めず □×（欠落グリフ）になっている。
対処：擬似要素を通常フォントのシンプルなマーカー（中黒）に置き換えて確実に表示。 */
/* テーマは #view_product（id）＋!important で font-family:'monoco3' を指定しているため、
クラスのみでは詳細度負けする。#view_product を含めて id 同士＋クラス数で確実に上回る。 */
html.mb-opt #view_product .section_guide .guide_points .point::before {
content: "・" !important;
font-family: "Hiragino Sans","Helvetica Neue",sans-serif !important; /* monoco3 をやめ通常フォントへ（var非依存で確実に） */
color: var(--mbopt-shell-deep) !important;
background: none !important;
width: auto !important; height: auto !important;
font-size: 16px !important; line-height: 1.6 !important;
position: absolute !important; left: 0 !important; top: 0 !important;
}
/* =========================================================
12. リスト型バリエーションモーダル（高SKU商品：Archies 等）
縦長の既存モーダルを、1SKU=1行のコンパクトなリストに作り替える。
下からのボトムシート（固定高＋本文のみスクロール）。
========================================================= */
html.mb-opt .mbopt-modal {
position: fixed !important; inset: 0 !important; z-index: 100000 !important;
display: flex !important; align-items: flex-end !important; justify-content: center !important;
}
html.mb-opt .mbopt-modal[hidden] { display: none !important; }
html.mb-opt .mbopt-modal__overlay {
position: absolute !important; inset: 0 !important; background: rgba(29,27,24,.45) !important;
}
html.mb-opt .mbopt-modal__panel {
position: relative !important; width: 100% !important; max-width: 768px !important;
max-height: 74vh !important; background: #fff !important;
border-radius: 16px 16px 0 0 !important;
display: flex !important; flex-direction: column !important;
box-shadow: 0 -8px 28px rgba(0,0,0,.2) !important;
}
html.mb-opt .mbopt-modal__close {
position: absolute !important; top: 8px !important; right: 10px !important;
width: 32px !important; height: 32px !important; padding: 0 !important;
border: 0 !important; background: none !important; cursor: pointer !important;
font-size: 22px !important; line-height: 1 !important; color: #9a948a !important;
-webkit-appearance: none !important; appearance: none !important;
}
html.mb-opt .mbopt-modal__head {
display: flex !important; align-items: center !important; gap: 12px !important;
padding: 18px 44px 14px 16px !important; border-bottom: 1px solid var(--mbopt-line) !important;
flex: 0 0 auto !important;
}
html.mb-opt .mbopt-modal__img {
width: 56px !important; height: 56px !important; object-fit: cover !important;
border-radius: 8px !important; background: #f7f4ee !important; flex: 0 0 auto !important;
}
html.mb-opt .mbopt-modal__axis {
font-family: var(--mbopt-gothic) !important; font-size: 13px !important;
font-weight: 600 !important; color: #3a352e !important; letter-spacing: .04em !important;
}
html.mb-opt .mbopt-modal__price {
font-family: var(--mbopt-price-font) !important; font-size: 18px !important;
color: #1d1b18 !important; margin-top: 2px !important;
}
/* 優待あり：FV・固定CTAと同じ treatment（明朝統一・通常価格打ち消し／優待価格を緑で主役） */
html.mb-opt .mbopt-modal__price--member {
display: flex !important; align-items: baseline !important; gap: 6px !important;
}
html.mb-opt .mbopt-modal__was {
font-family: var(--mbopt-price-font) !important;
font-size: 12px !important; font-weight: 400 !important;
color: #9a948a !important; text-decoration: line-through !important;
}
html.mb-opt .mbopt-modal__now {
font-family: var(--mbopt-price-font) !important;
font-size: 19px !important; font-weight: 400 !important; color: #2f6b5e !important;
}
html.mb-opt .mbopt-modal__now small {
font-family: var(--mbopt-price-font) !important; font-size: 12px !important; font-weight: 400 !important;
}
/* 本文：1SKU=1行のスクロールリスト */
html.mb-opt .mbopt-modal__list {
list-style: none !important; margin: 0 !important; padding: 2px 0 !important;
overflow-y: auto !important; -webkit-overflow-scrolling: touch !important;
flex: 1 1 auto !important;
}
html.mb-opt .mbopt-modal__row {
display: flex !important; align-items: center !important; justify-content: space-between !important;
gap: 12px !important; padding: 13px 16px !important; cursor: pointer !important;
border-bottom: 1px solid #f2eee6 !important;
}
html.mb-opt .mbopt-modal__row .mbopt-modal__name {
font-family: var(--mbopt-gothic) !important; font-size: 14px !important;
color: #3a352e !important; line-height: 1.4 !important;
}
html.mb-opt .mbopt-modal__row.is-selected {
background: var(--mbopt-beige-wash) !important;
box-shadow: inset 3px 0 0 var(--mbopt-shell-deep) !important;
}
/* 在庫バッジ */
html.mb-opt .mbopt-modal__stock {
font-family: var(--mbopt-gothic) !important; font-size: 11.5px !important;
white-space: nowrap !important; flex: 0 0 auto !important;
}
html.mb-opt .mbopt-modal__stock--low { color: #c61c53 !important; font-weight: 600 !important; }
html.mb-opt .mbopt-modal__stock--soldout { color: #b8b2a6 !important; }
/* 売り切れ行：グレーアウト（選択で「再入荷を希望する」に切替） */
html.mb-opt .mbopt-modal__row--soldout .mbopt-modal__name { color: #b8b2a6 !important; }
/* 下部：確定ボタン（固定） */
html.mb-opt .mbopt-modal__foot {
flex: 0 0 auto !important; padding: 12px 16px !important;
padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
border-top: 1px solid var(--mbopt-line) !important; background: #fff !important;
}
html.mb-opt .mbopt-modal__cta {
display: block !important; width: 100% !important; border: 0 !important;
border-radius: 12px !important; background: #2f6b5e !important; color: #fff !important;
font-family: var(--mbopt-gothic) !important;
font-size: 16px !important; font-weight: 700 !important; letter-spacing: .06em !important;
padding: 15px !important; text-align: center !important; cursor: pointer !important;
-webkit-appearance: none !important; appearance: none !important;
}
html.mb-opt .mbopt-modal__cta:disabled { background: #cfc9bd !important; cursor: default !important; }
html.mb-opt .mbopt-modal__cta.is-waitlist { background: #9a7a52 !important; } /* 再入荷を希望する */
/* モーダル表示中は背面スクロールを止める */
html.mb-opt.mbopt-modal-open, html.mb-opt.mbopt-modal-open body { overflow: hidden !important; }
} /* end @media */