@charset "UTF-8"; /* ========================================================================== madras-cta.css 大阪マドラスカレー 公式サイト — CTA / デリバリー導線 / スマホ追従バー 作成: 2026-07-16 設置: 内、既存 style.css の「後ろ」に読み込むこと（上書きの都合上） ※ 本サイトは html { font-size: 10px } のため 1rem = 10px。 混乱を避けるため、本ファイルでは font-size を全て px で指定している。 ブランド配色（既存サイトから抽出） 背景 #FDD901 / 文字 #5F4532 / フッター #DA461D / Noto Sans JP ========================================================================== */ /* -------------------------------------------------------------------------- 1. ファーストビュー直下 CTA ブロック -------------------------------------------------------------------------- */ .cta { padding: 40px 16px 32px; text-align: center; font-family: "Noto Sans JP", sans-serif; /* メインビジュアルの背景イラスト（カレー皿の柄）がここまで及ぶと ラベル文字が読めなくなるため、ブランドの黄色でベタ塗りして分離する。 z-index はイラストより前面に出すために必要。 */ background: #FDD901; position: relative; z-index: 2; } .cta__group { margin-bottom: 28px; } .cta__group:last-child { margin-bottom: 0; } .cta__label { font-size: 14px; font-weight: 700; color: #5F4532; margin-bottom: 10px; letter-spacing: .08em; } .cta__row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } .cta__btn { display: inline-block; min-width: 150px; padding: 16px 24px; border-radius: 6px; font-size: 15px; font-weight: 700; line-height: 1.2; text-decoration: none; color: #fff; box-shadow: 0 2px 6px rgba(95, 69, 50, .25); transition: opacity .2s, transform .2s; } .cta__btn:hover, .cta__btn:focus { opacity: .85; transform: translateY(-1px); color: #fff; } .cta__btn--store { background: #1A1A1A; min-width: 280px; font-size: 17px; padding: 18px 24px; } .cta__btn--uber { background: #06C167; } .cta__btn--menu { background: #FF3B30; } .cta__btn--demae { background: #E60012; } /* -------------------------------------------------------------------------- 1-2. デリバリー各社の公式バッジ Uber Eats / menu から配布されている公式ロックアップをそのまま使う。 両社ともガイドラインでロゴの改変・切り抜き・色変更・再配色を禁じているため、 画像には一切手を加えず、高さだけ揃えて横に並べる。 支給された素材はどちらも縦組み（ほぼ正方形）： ubereats_badge.png 698 x 721 … 緑 #06C167 が焼き込み済み・「ご注文はこちら」入り menu_logo.png 384 x 420 … 白背景が焼き込み済み（透過なし） 横長ボタンには収まらないので、アプリストアのバッジのように正方形で並べる。 -------------------------------------------------------------------------- */ .cta__row--badges { display: flex; gap: 12px; justify-content: center; align-items: center; flex-wrap: nowrap; } .cta__badge { display: block; line-height: 0; /* img下の余白を殺す */ border-radius: 8px; overflow: hidden; box-shadow: 0 2px 6px rgba(95, 69, 50, .25); transition: opacity .2s, transform .2s; } .cta__badge:hover, .cta__badge:focus { opacity: .85; transform: translateY(-1px); } .cta__badge img { display: block; height: 132px; width: auto; } /* menu のロゴは白背景が焼き込まれているので、白パネルとしてそのまま置ける。 ただし黄色地(#FDD901)に白が直接乗ると輪郭が曖昧になるため、薄い枠線で締める。 border ではなく inset の box-shadow を使う理由： border を使うと menu 側だけ高さが 2px 増え（132px → 134px）、 隣の Uber バッジと下端が揃わない。inset box-shadow はレイアウトサイズに 影響しないので、2枚の高さが完全に一致する。 */ .cta__badge--menu { box-shadow: 0 2px 6px rgba(95, 69, 50, .25), inset 0 0 0 1px rgba(95, 69, 50, .18); } /* -------------------------------------------------------------------------- 2. スマホ用 固定追従バー 購入者の100%がスマホのため、スマホのみ表示。PC では非表示。 -------------------------------------------------------------------------- */ .fixbar { display: none; } /* -------------------------------------------------------------------------- 3. スマホ（768px以下） -------------------------------------------------------------------------- */ @media screen and (max-width: 768px) { /* --- 既存の BASE フローティングバナーを非表示にする --------------------- 既存サイトには .float_bnr（position:fixed; bottom:0; z-index:4）が 常設されている。追従バーと画面下部で重なるため、スマホでは追従バーに 一本化する。PC では従来どおり .float_bnr を表示する。 ---------------------------------------------------------------------- */ .l_footer .float_bnr { display: none !important; } .fixbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999; box-shadow: 0 -2px 8px rgba(0, 0, 0, .2); font-family: "Noto Sans JP", sans-serif; /* iPhone のホームバー領域を避ける */ padding-bottom: env(safe-area-inset-bottom, 0); } /* 通販 / Uber / menu / 電話 の4ボタン。 最も狭い 320px(iPhone SE 第1世代)でも、最長ラベル "menu" で約26pxの余白が残る。 タップ領域は最小でも 67 x 47px あり、44px の指針を満たす。 ラベルをこれ以上長くすると 320px で折り返すため、"通販で買う" ではなく "通販"。 */ .fixbar__btn { flex: 1; padding: 15px 2px; text-align: center; color: #fff; font-weight: 700; font-size: 15px; line-height: 1.2; text-decoration: none; white-space: nowrap; } .fixbar__btn:hover, .fixbar__btn:focus { color: #fff; opacity: .85; } .fixbar__btn--store { flex: 1; background: #1A1A1A; } .fixbar__btn--uber { flex: 1; background: #06C167; } .fixbar__btn--menu { flex: 1; background: #FF3B30; } .fixbar__btn--tel { flex: .8; background: #5F4532; } /* 追従バーに最後のコンテンツが隠れないように余白を確保 */ body { padding-bottom: calc(50px + env(safe-area-inset-bottom, 0px)); } /* CTA はスマホでは縦積み（横並びだと1つあたりが狭すぎる） */ .cta { padding: 28px 16px 24px; } .cta__row { flex-direction: column; align-items: stretch; } .cta__btn { min-width: 0; width: 100%; } .cta__btn--store { min-width: 0; width: 100%; } /* バッジは縦積みにしない。正方形を全幅に伸ばすと巨大な四角になり、 スクロール量ばかり増えてCTAとして機能しなくなる。横並びのまま少し縮める。 */ .cta__row--badges { flex-direction: row; gap: 10px; } .cta__badge img { height: 116px; } }