/* ============================================================ MIRAGE II Campaign Styles (v14.7) 「Cannes Special Project 参画記念」コンポーネント ------------------------------------------------------------ ・既存ブランドトーン(#761e3b ワインレッド / #d4b88a ゴールド / pink-ivory)に統一 ・赤字セール感を排除し、余白・境界線・タイポで「特別ご優待」を演出 ・既定で非表示。 のときだけ表示 ============================================================ */ /* ===== 表示制御:既定で全ブロック非表示 ===== */ [data-campaign-block] { display: none !important; } .campaign-active [data-campaign-block] { display: block !important; } .campaign-active [data-campaign-block-flex] { display: flex !important; } .campaign-active [data-campaign-block-inline] { display: inline !important; } /* ============================================================ 1. Slim Ribbon(JA TOP のファーストビュー直下) v14.11: ヒーローからの独立感強化(上下に余白 + ゴールドの細線) ============================================================ */ .campaign-ribbon { position: relative; background: linear-gradient(90deg, #761e3b 0%, #8b2547 100%); color: #fff; text-align: center; padding: 14px 20px; font-family: var(--font-ja-serif); font-size: 0.92rem; letter-spacing: 0.06em; line-height: 1.55; /* v14.11: 上下に細いゴールドラインで視覚分離 */ border-top: 2px solid #d4b88a; border-bottom: 2px solid #d4b88a; margin: 24px 0 32px; /* 上 24px、下 32px で news-banner との分離を明確化 */ box-shadow: 0 2px 12px rgba(118, 30, 59, 0.15); } /* インナーゴールドハイライト(リッチ感) */ .campaign-ribbon::before { content: ''; position: absolute; inset: 0; border-top: 1px solid rgba(245, 217, 158, 0.3); border-bottom: 1px solid rgba(245, 217, 158, 0.3); pointer-events: none; } .campaign-ribbon strong { color: #f5d99e; font-weight: 700; letter-spacing: 0.08em; } .campaign-ribbon__divider { display: inline-block; margin: 0 8px; opacity: 0.5; } @media (max-width: 768px) { .campaign-ribbon { font-size: 0.82rem; padding: 12px 14px; letter-spacing: 0.04em; margin: 18px 0 24px; } .campaign-ribbon__divider { margin: 0 6px; } } /* ============================================================ 2. Hero Box(news 記事 H1 + lead 直下) ============================================================ */ .campaign-hero { margin: 32px 0 40px; padding: 32px 28px 26px; background: linear-gradient(135deg, #fdf6f0 0%, #f9efe2 100%); border: 1px solid #d4b88a; border-left: 4px solid #761e3b; border-radius: 4px; font-family: var(--font-ja-serif); } .campaign-hero__badge { display: inline-block; font-size: 0.78rem; letter-spacing: 0.12em; color: #761e3b; background: #fff; border: 1px solid #761e3b; padding: 5px 14px; border-radius: 2px; margin-bottom: 18px; } .campaign-hero__title { font-size: 1.4rem; font-weight: 700; color: #761e3b; margin: 0 0 16px; letter-spacing: 0.06em; line-height: 1.45; } .campaign-hero__lead { font-size: 1rem; line-height: 1.9; color: #3a2014; margin: 0 0 20px; } .campaign-hero__lead code, .campaign-compact code, .campaign-price-block code { display: inline-block; background: #fff; border: 1px solid #c9a878; padding: 2px 10px; font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: 0.95em; color: #761e3b; letter-spacing: 0.05em; border-radius: 2px; } .campaign-hero__price { display: flex; align-items: baseline; gap: 14px; margin: 18px 0; flex-wrap: wrap; padding: 16px 18px; background: rgba(255, 255, 255, 0.6); border: 1px solid #ead4b3; border-radius: 3px; } .campaign-hero__price-regular { font-size: 0.95rem; color: #6e4f3a; text-decoration: line-through; text-decoration-thickness: 1px; } .campaign-hero__price-arrow { color: #c9a878; font-size: 0.9rem; letter-spacing: 0.1em; } .campaign-hero__price-campaign { font-size: 1.45rem; font-weight: 700; color: #761e3b; letter-spacing: 0.04em; } .campaign-hero__conditions { margin: 20px 0 14px; padding: 14px 18px; background: rgba(255, 255, 255, 0.45); border-left: 2px solid #c9a878; font-size: 0.9rem; line-height: 1.85; color: #4a2e1d; } .campaign-hero__conditions p { margin: 0 0 6px; font-weight: 600; } .campaign-hero__conditions ul { margin: 0; padding: 0 0 0 1.2em; list-style: disc; } .campaign-hero__conditions li { margin: 3px 0; } .campaign-hero__notes { margin: 16px 0 0; font-size: 0.78rem; color: #6e5a4a; line-height: 1.75; } .campaign-hero__notes p { margin: 4px 0; } .campaign-hero__cta-wrap { text-align: center; margin-top: 22px; } @media (max-width: 768px) { .campaign-hero { margin: 24px 0 32px; padding: 22px 18px 20px; } .campaign-hero__title { font-size: 1.15rem; letter-spacing: 0.04em; } .campaign-hero__lead { font-size: 0.95rem; line-height: 1.85; } .campaign-hero__price { gap: 8px; padding: 12px 14px; } .campaign-hero__price-campaign { font-size: 1.2rem; } .campaign-hero__conditions { padding: 12px 14px; font-size: 0.85rem; } } /* ============================================================ 3. Compact Box(news 記事末、購入 CTA 直前) ============================================================ */ .campaign-compact { margin: 32px 0 24px; padding: 24px 22px 20px; background: #fdf6f0; border: 1px solid #d4b88a; border-top: 3px solid #761e3b; border-radius: 4px; font-family: var(--font-ja-serif); text-align: center; } .campaign-compact__title { font-size: 1.1rem; font-weight: 700; color: #761e3b; margin: 0 0 16px; letter-spacing: 0.06em; } .campaign-compact__line { font-size: 0.95rem; line-height: 1.85; color: #3a2014; margin: 5px 0; } .campaign-compact__price-regular { text-decoration: line-through; color: #8a6a52; } .campaign-compact__price-campaign { font-weight: 700; color: #761e3b; font-size: 1.05em; } .campaign-compact__cta-wrap { margin-top: 16px; } @media (max-width: 768px) { .campaign-compact { padding: 20px 16px 18px; } .campaign-compact__title { font-size: 1rem; } .campaign-compact__line { font-size: 0.9rem; } } /* ============================================================ 4. Price Block(JA TOP の OFFER セクション内 + homebox003) v14.11: 3段型コンパクト(PC 横長 / SP 縦並びキープ) 段構成: 上段 = バッジ(中央) 中段 = OFF バッジ + 価格セット(PC は横並び、SP は縦) 下段 = サブ情報(コード + 送料、PC は横並び)+ 期間 + CTA ============================================================ */ .campaign-price-block { position: relative; margin: 28px auto 22px; padding: 28px 28px 22px; max-width: 720px; /* v14.11: 横長対応で 580 → 720 に拡張 */ background: linear-gradient(135deg, #fdf6f0 0%, #f9efe2 50%, #f5e6cf 100%); border: 1px solid #d4b88a; border-radius: 4px; text-align: center; font-family: var(--font-ja-serif); box-shadow: 0 2px 18px rgba(118, 30, 59, 0.08); } /* ゴールドの装飾上下ライン */ .campaign-price-block::before, .campaign-price-block::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); width: 60%; height: 1px; background: linear-gradient(90deg, transparent 0%, #c9a878 50%, transparent 100%); } .campaign-price-block::before { top: 14px; } .campaign-price-block::after { bottom: 14px; } .campaign-price-block__badge { display: inline-block; font-size: 0.78rem; letter-spacing: 0.12em; color: #761e3b; background: #fff; border: 1px solid #761e3b; padding: 6px 16px; border-radius: 2px; margin-bottom: 16px; white-space: nowrap; } /* ----- 中段:OFF バッジ + 価格セット ----- */ .campaign-price-block__main-row { display: block; /* SP デフォルト = 縦並び */ margin: 4px 0 12px; } .campaign-price-block__off { display: inline-block; margin: 0 0 14px; padding: 8px 24px; background: linear-gradient(135deg, #c9a878 0%, #d4b88a 50%, #e8cfa4 100%); color: #4a1a26; font-weight: 700; font-size: 1.15rem; letter-spacing: 0.08em; border: 1px solid #b89766; border-radius: 2px; box-shadow: 0 2px 6px rgba(180, 143, 84, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.4); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3); white-space: nowrap; } .campaign-price-block__price-set { display: block; } .campaign-price-block__row { margin: 6px 0; font-size: 0.95rem; color: #3a2014; line-height: 1.7; } .campaign-price-block__row.regular { font-size: 0.92rem; color: #6e4f3a; text-decoration: line-through; text-decoration-color: rgba(110, 79, 58, 0.7); white-space: nowrap; } .campaign-price-block__row.campaign { font-size: 1.4rem; font-weight: 700; color: #761e3b; letter-spacing: 0.03em; margin: 4px 0 6px; white-space: nowrap; } .campaign-price-block__row.campaign small, .campaign-price-block__row.regular small { font-size: 0.7em; font-weight: 500; margin-left: 2px; letter-spacing: 0.04em; } /* ----- 下段(サブ情報行)----- */ .campaign-price-block__sub-row { display: block; /* SP デフォルト */ margin: 8px 0 4px; } .campaign-price-block__sub-row .campaign-price-block__row { display: inline-block; margin: 4px 0; font-size: 0.92rem; } .campaign-price-block__row.shipping { font-size: 0.92rem; color: #5a3a25; letter-spacing: 0.04em; } .campaign-price-block__sub-divider { display: none; /* SP では非表示(縦並びなので不要)*/ color: #c9a878; margin: 0 12px; } .campaign-price-block code { display: inline-block; background: #fff; border: 1px solid #c9a878; padding: 2px 10px; font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: 0.95em; color: #761e3b; letter-spacing: 0.05em; border-radius: 2px; } .campaign-price-block__period { margin: 8px 0 4px; font-size: 0.82rem; color: #6e5a4a; letter-spacing: 0.04em; line-height: 1.6; } .campaign-price-block__cta-wrap { margin-top: 16px; } /* ============================================================ PC 横長レイアウト(769px 以上) ============================================================ */ @media (min-width: 769px) { .campaign-price-block { padding: 26px 36px 22px; } /* 中段:OFF バッジと価格セットを横並び */ .campaign-price-block__main-row { display: flex; align-items: center; justify-content: center; gap: 32px; margin: 8px 0 12px; } .campaign-price-block__off { margin: 0; /* flex 中央配置するので marginは消す */ flex-shrink: 0; } .campaign-price-block__price-set { text-align: left; flex-shrink: 0; } .campaign-price-block__price-set .campaign-price-block__row.regular, .campaign-price-block__price-set .campaign-price-block__row.campaign { margin: 2px 0; } /* 下段:コード + 送料を横並び */ .campaign-price-block__sub-row { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 0; margin: 6px 0 4px; } .campaign-price-block__sub-row .campaign-price-block__row { margin: 0; } .campaign-price-block__sub-divider { display: inline-block; /* PC では区切り表示 */ } .campaign-price-block__period { margin: 4px 0 2px; } } /* ============================================================ SP バランス調整(768px 以下) ============================================================ */ @media (max-width: 768px) { .campaign-price-block { padding: 24px 14px 20px; /* 横 padding を縮小して画面幅をフル活用 */ margin: 20px 8px 18px; /* 左右 margin を最小限に */ } .campaign-price-block__badge { white-space: nowrap; /* v14.12: 1 行表示を強制 */ font-size: 0.66rem; /* 1 行に収まるサイズに調整 */ letter-spacing: 0.04em; /* 詰めて 1 行内に収める */ padding: 5px 10px; line-height: 1.5; } .campaign-price-block__off { font-size: 1rem; padding: 7px 18px; margin-bottom: 10px; } .campaign-price-block__row.campaign { font-size: 1.2rem; } .campaign-price-block__sub-row .campaign-price-block__row { display: block; margin: 4px 0; } .campaign-price-block__period { font-size: 0.78rem; } } /* ============================================================ 5. Campaign CTA Button(共通、強化版) ============================================================ */ .campaign-cta { display: inline-block; padding: 14px 36px; background: linear-gradient(135deg, #761e3b 0%, #8b2547 100%); color: #fff !important; font-family: var(--font-ja-serif); font-size: 1rem; font-weight: 700; letter-spacing: 0.08em; text-decoration: none; border: 1px solid #761e3b; border-radius: 2px; transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; box-shadow: 0 2px 10px rgba(118, 30, 59, 0.22); } .campaign-cta:hover, .campaign-cta:focus { opacity: 0.94; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(118, 30, 59, 0.28); } @media (max-width: 768px) { .campaign-cta { display: block; width: 100%; max-width: 360px; margin-left: auto; margin-right: auto; padding: 14px 16px; font-size: 0.95rem; letter-spacing: 0.06em; text-align: center; box-sizing: border-box; /* v14.13: padding を含めた幅計算で右ずれを防ぐ */ } } /* ============================================================ 6. Mini Badge(購入CTA脇に置く小型OFF表示) v14.8 news-banner / hero MV / OFFER セクション「購入する」近辺に 小型でゴージャスな「5,000円OFF」バッジを表示する ============================================================ */ .campaign-mini-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; background: linear-gradient(135deg, #c9a878 0%, #d4b88a 50%, #e8cfa4 100%); border: 1px solid #b89766; border-radius: 999px; color: #4a1a26; font-family: var(--font-ja-serif); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.06em; text-decoration: none; white-space: nowrap; box-shadow: 0 2px 6px rgba(180, 143, 84, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.4); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3); } .campaign-mini-badge__off { font-size: 1em; color: #761e3b; } .campaign-mini-badge__code { font-family: 'SF Mono', Menlo, Consolas, monospace; background: rgba(255, 255, 255, 0.5); border: 1px solid rgba(180, 143, 84, 0.4); padding: 1px 6px; border-radius: 2px; font-size: 0.85em; letter-spacing: 0.04em; } @media (max-width: 768px) { .campaign-mini-badge { font-size: 0.78rem; padding: 7px 12px; gap: 6px; } } /* ----- 配置別の微調整 ----- */ /* news-banner CTA 内: 既存 CTA「記事を読む」の隣 */ .news-banner__campaign-row { display: none; justify-content: center; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; } .campaign-active .news-banner__campaign-row { display: flex; } /* hero MV CTA 直下 */ .hero-section__campaign-row { display: none; justify-content: center; margin: 14px auto 0; text-align: center; } .campaign-active .hero-section__campaign-row { display: block; } /* OFFER セクション「購入する/成分を見る」の上 */ .offer-section__campaign-row { display: none; justify-content: center; margin: 0 0 12px; text-align: center; } .campaign-active .offer-section__campaign-row { display: block; } /* ============================================================ 7. Tokushoho table 内のキャンペーン行 v14.9 に対応 — display: table-row に切替 ============================================================ */ tr[data-campaign-block] { display: none; } .campaign-active tr[data-campaign-block] { display: table-row !important; } .campaign-active tr[data-campaign-block] td { background: linear-gradient(135deg, #fdf6f0 0%, #f9efe2 100%); font-size: 0.92rem; line-height: 1.85; } .campaign-active tr[data-campaign-block] td strong { color: #761e3b; } /* v14.13: 改行禁止ユーティリティ */ .campaign-price-block .nowrap { white-space: nowrap; }