/* ============================================================ * MEDIA-598: 電話発信CTA スタイル * * - 個別ショートコード（btn1/btn2/timerex_btn）を編集者が並べて使用 * - の phone-cta-is-in-hours / phone-cta-is-out-hours クラスに応じて * data-show-when 属性で要素の表示を切り替える * ============================================================ */ /* ---- 表示切替（data-show-when）：他のdisplay指定に勝つよう !important ---- */ [data-show-when] { display: none !important; } body.phone-cta-is-in-hours [data-show-when="in-hours"] { display: inline-flex !important; } body.phone-cta-is-out-hours [data-show-when="out-hours"] { display: inline-flex !important; } /* ---- スロット（btn1の囲み） ---- */ .phone-cta-slot { display: block; margin: 8px 0; } /* ---- 共通ボタン（既存 .content_box a の text-decoration/color を上書き） ---- */ .phone-cta-btn, .content_box .phone-cta-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 14px 16px; margin: 8px 0; border-radius: 10px; font-weight: 700; font-size: 15px; line-height: 1.4; text-align: center; text-decoration: none !important; transition: opacity 0.2s ease, transform 0.15s ease; box-sizing: border-box; } .phone-cta-btn:hover { opacity: 0.9; transform: translateY(-1px); } .phone-cta-btn__icon, .phone-cta-btn__label { color: inherit !important; } .phone-cta-btn__icon { width: 18px; height: 18px; flex-shrink: 0; } /* SVGの線色を確実に親 color に従わせる（既存 .content_box の path/circle スタイル対策） */ .phone-cta-btn__icon path, .phone-cta-btn__icon circle, .phone-cta-btn__icon line, .phone-cta-btn__icon polyline, .phone-cta-btn__icon rect, .phone-cta-notice__icon path, .phone-cta-notice__icon circle, .phone-cta-notice__icon line, .phone-cta-notice__icon polyline, .phone-cta-notice__icon rect { color: inherit !important; stroke: currentColor !important; fill: none !important; } /* ---- バリアント別カラー ---- */ .phone-cta-btn--primary { background: #1e7a4b; color: #fff !important; } /* MEDIA-598 追加修正: 添付指定により白背景 + 緑文字 + 緑枠線 */ .phone-cta-btn--secondary { background: #fff; color: #1e7a4b !important; border: 1px solid #1e7a4b; } /* MEDIA-598 追加修正②: 添付2枚目の指定により TimeRex も緑系に統一 */ .phone-cta-btn--timerex { background: #1e7a4b; color: #fff !important; border: 1px solid #1e7a4b; } /* ---- CTA周りの説明文 ---- * MEDIA-598 追加修正: ボタン間の説明文の上下余白を均等にするためのクラス。 * .content_box p のデフォルト margin-bottom(20px) を打ち消し、上下とも実質8px * （ボタン側 margin 8px のみ）になるようにする。左寄せ。 */ .content_box .phone-cta-desc, .phone-cta-desc { margin: 0 !important; text-align: left; } /* ---- 時間外通知 ---- */ .phone-cta-notice { align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 14px 16px; margin: 8px 0; background: #f4f4f4; border-radius: 10px; font-size: 13px; color: #888; box-sizing: border-box; } .phone-cta-notice__icon { width: 18px; height: 18px; flex-shrink: 0; color: inherit !important; } /* ---- SP対応 ---- */ @media (max-width: 480px) { .phone-cta-btn, .phone-cta-notice { font-size: 14px; padding: 12px 14px; } }