@charset "UTF-8";
/* ============================================================================
   ニュース詳細ページ アプリ注文ボタン
   ----------------------------------------------------------------------------
   採用デザイン : パターン②（グループ見出しはロゴ画像）

   読み込み   : /inc/corporate/order_cta.html（SSI）の先頭の <link> で読み込む。
                修正したら order_cta.html の ?ver= を上げる（記事の再構築は不要）
   配置       : 画面下部の固定フッター（position: fixed）
   表示端末   : スマートフォンのみ（既存ユーティリティクラス .sm を併用）

   カラー
     枠線・見出し #000000
     松弁ネット   #0B3D7B（塗り／文字は白）
     モバイルオーダー #FDD352（塗り／文字は #0B3D7B）

   ============================================================================ */

/* 画面下部に固定表示するフッター
   ・.btn_totop（TOPボタン）は z-index:100 / bottom:10px のため、
     こちらを前面(z-index:200)にし、TOPボタンは下記でこの高さ分だけ持ち上げる
   ・フッターの実測高さは91px（+ セーフエリア）。下記の退避量はこれに余白10pxを加えた値。
     ただしブラウザによってはフッターが高くなる（Xのアプリ内ブラウザ等）ため、ページ表示後に
     order_cta.html 内のスクリプトが実際の高さを測って上書きする。ここの101pxはその初期値 */

.order-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    margin: 0;
    padding: 10px 12px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    background: #fff;
    border-top: 1px solid #dcdcdc;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, .1);
}

.order-cta__groups {
    display: flex;
    align-items: stretch;
    gap: 8px;
    max-width: 600px;
    margin: 0 auto;
}

/* 松弁ネット（ボタン1つ）／ モバイルオーダー（ボタン2つ）の幅比 */

.order-cta__group {
    position: relative;
    border: 2px solid #000;
    border-radius: 6px;
    padding: 15px 8px 9px;
}

/* パターン②のロゴ見出しが枠内に余裕をもって収まる比率 */

.order-cta__group--bento {
    flex: 1 1 41%;
}

.order-cta__group--mo {
    flex: 1 1 59%;
}

/* グループ見出し（枠線に重ねて白背景で抜く） */

.order-cta__label {
    position: absolute;
    top: -9px;
    left: 8px;
    display: flex;
    align-items: center;
    height: 18px;
    padding: 0 6px;
    background: #fff;
    color: #000;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

/* whatsnew.css の `.article-main img:not(.maw)` に width:100% を当てられないよう、
   img には class="maw"（サイト側が用意している除外クラス）を付け、詳細度も揃える */

.order-cta .order-cta__label img {
    display: block;
    width: auto;
    height: 15px;
}

/* 松屋マーク（松弁ネット／モバイルオーダー共通） */

.order-cta .order-cta__mark {
    height: 15px;
    margin-right: 3px;
}

/* ボタン */

.order-cta__btns {
    display: flex;
    gap: 8px;
}

.order-cta__btn {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 42px;
    padding: 6px 4px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none !important;
    white-space: nowrap;
    transition: opacity .2s;
}

.order-cta__btn:active {
    opacity: .7;
}

/* 松弁ネット */

.order-cta__btn--bento {
    background: #0B3D7B;
    border: 2px solid #0B3D7B;
    color: #fff !important;
}

/* モバイルオーダー */

.order-cta__btn--mo {
    background: #FDD352;
    border: 2px solid #FDD352;
    color: #0B3D7B !important;
}

.order-cta__note {
    margin-top: 12px;
    font-size: 11px;
    line-height: 1.6;
    color: #666;
}

/* 固定フッターに隠れないよう、本文末尾に余白を確保し TOPボタンを持ち上げる
   ・判定は「注文フッターが実在するか」で行う（:has）。
     表示期間外は view_timer.js が要素ごと削除するため、余白とTOPボタンも自動で元に戻る。
     （再構築時点でbodyにクラスを付ける方式だと、期間外でも余白が残ってしまう）
   ・:has は iOS Safari 15.4 / Chrome 105 以降。未対応端末では余白・退避が効かない
   ・PCでは .sm によりフッター自体が非表示のため、SP幅のみ適用する。
     境界はサイト共通の 750px に合わせる（style.css の .sm、scripts.js の spBreak と同じ）。
     ずれていると、フッターが非表示の幅でも余白とTOPボタンの退避だけが効いてしまう */

@media only screen and (max-width: 750px) {
    /* order_cta.html 内のスクリプトが設定する。未設定時（スクリプト実行前）は101px
       --order-cta-offset : フッターの今の高さ＋10px（TOPボタン用）
       --order-cta-space  : これまでに測ったフッターの最大の高さ＋10px（本文下部の余白用。Xの下部メニューの出入りで伸び縮みさせない） */
    body:has(.order-cta) {
        padding-bottom: var(--order-cta-space, calc(101px + env(safe-area-inset-bottom)));
    }
    body:has(.order-cta) .btn_totop {
        bottom: var(--order-cta-offset, calc(101px + env(safe-area-inset-bottom)));
    }
}

/* 狭い端末（iPhone SE 等）で文字が溢れないよう縮小 */

@media only screen and (max-width: 360px) {
    .order-cta__group {
        padding: 15px 6px 8px;
    }
    .order-cta__btns {
        gap: 6px;
    }
    .order-cta__btn {
        font-size: 12px;
        padding: 6px 2px;
    }
    .order-cta__label {
        font-size: 11px;
        padding: 0 4px;
    }
    .order-cta .order-cta__label img {
        height: 13px;
    }
    .order-cta .order-cta__mark {
        height: 13px;
        margin-right: 2px;
    }
}