/*!
 * HATATATE — フロント側の CSS（wp_enqueue_style で読み込む。HTML に <style> は書かない）
 *
 * 1. 配置パターンの「表示するデバイス」（すべて / PC のみ / スマホのみ）の出し分け
 * 2. モーダルと固定ボタンの土台（アニメーションの名前・箱の中の余白・固定ボタンの帯）
 * 3. ABテストの既定の見え方（A 案を出し、B 案は JS が選ぶまで隠す）
 *
 * 1 をサーバー側でなく CSS でやる理由: 端末で HTML を変えると、ページキャッシュに載った 1 つの HTML が
 * 別の端末にも配られて食い違う。HTML はどの端末でも同じものを出し、見せる・見せないだけを画面幅で決める。
 * 境目は 768px（767.98px 以下＝スマホ／768px 以上＝PC）。display の指定は JS が書く inline style より
 * 強くする必要があるので !important を付ける（モーダルは JS が display を書き換えるため）。
 */

@media (max-width: 767.98px) {
    .hatatate-dev-pc { display: none !important; }
}

@media (min-width: 768px) {
    .hatatate-dev-sp { display: none !important; }
}

/* ---- モーダル・固定ボタン（旧 get_overlay_base_css。1 ページに 1 回だけ <style> で出していたものをファイルへ） ---- */
@keyframes hatatateModalSlideRight { from { transform: translateX(110%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes hatatateModalSlideLeft { from { transform: translateX(-110%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes hatatateModalFadeIn { from { transform: scale(.88); opacity: 0; } to { transform: scale(1); opacity: 1; } }
/* 箱に外枠（地・切り取り）を持たせないので、CTA の外側にできる空きは落とし、はみ出す画像は縮める。
   CTA の中の間隔（段落どうしの余白など）は CTA のものなので触らない */
.hatatate-modal-box { box-sizing: border-box; }
.hatatate-modal-box .hatatate-wrapper { margin: 0 !important; }
.hatatate-modal-box .hatatate-tracker > *:first-child { margin-top: 0 !important; }
.hatatate-modal-box .hatatate-tracker > *:last-child { margin-bottom: 0 !important; }
.hatatate-modal-box img { max-width: 100%; height: auto; }
.hatatate-fixed-bar { position: fixed; bottom: 0; left: 0; right: 0; width: 100%; padding: 12px 0; z-index: 9990; transition: transform .4s cubic-bezier(.22,.61,.36,1); }
.hatatate-fixed-bar-inner { display: grid; grid-template-columns: 44px 1fr 44px; gap: 0 12px; align-items: center; max-width: 960px; margin: 0 auto; padding: 0 12px; }
.hatatate-fixed-bar .hatatate-wrapper { grid-column: 2; margin: 0 !important; width: 100%; }
.hatatate-fixed-bar .hatatate-tracker { width: 100%; display: block; text-align: center; }
.hatatate-fixed-bar .hatatate-tracker * { margin-top: 0 !important; margin-bottom: 0 !important; }
.hatatate-fixed-bar .hatatate-tracker img { margin-top: 0 !important; margin-bottom: 0 !important; max-width: 100%; height: auto; display: block; margin-left: auto; margin-right: auto; }
.hatatate-fixed-close-btn { grid-column: 1; justify-self: end; width: 32px; height: 32px; border-radius: 50%; background: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; line-height: 1; color: #374151; box-shadow: 0 1px 4px rgba(0,0,0,.2); z-index: 1; padding: 0; }

/* ---- ABテスト: 既定は A 案。B 案は hatatate-front.js が選んだときだけ出す（JS が動かない環境では A 案が出る） ---- */
.hatatate-ab-container .hatatate-ab-b { display: none; }