/* ============ アプリ型ナビ（下部固定タブバー）・全ページ共通 ============ */
:root{--nav-h:62px;}
body{padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));}

.appnav{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  display:flex;align-items:stretch;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid rgba(36,26,32,.09);
  box-shadow:0 -4px 20px rgba(96,62,80,.07);
  padding-bottom:env(safe-area-inset-bottom, 0px);
}
.appnav__i{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  height:var(--nav-h);text-decoration:none;color:#9c919e;
  font-family:'Noto Sans JP',sans-serif;font-size:10px;font-weight:700;letter-spacing:.02em;
  transition:color .15s;
}
.appnav__i svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
.appnav__i.is-on{color:#c05c82;}
.appnav__i--line{color:#06c755;}
.appnav__i--line svg{stroke:#06c755;}
@media(min-width:760px){
  .appnav{max-width:520px;margin:0 auto;border-radius:20px 20px 0 0;border:1px solid rgba(36,26,32,.09);border-bottom:none;}
}
/* タブのバッジ（お気に入り件数） */
.appnav__i{position:relative;}
.appnav__badge{position:absolute;top:8px;left:calc(50% + 6px);min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:#c05c82;color:#fff;font-size:9.5px;font-weight:700;line-height:16px;text-align:center;box-shadow:0 2px 6px rgba(192,92,130,.4);}

/* ============ お気に入り♡ボタン ============ */
.favbtn{
  flex-shrink:0;width:36px;height:36px;border-radius:50%;
  border:1px solid rgba(36,26,32,.10);background:rgba(255,255,255,.92);
  display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;
  transition:transform .18s,border-color .15s,background .15s;
}
.favbtn svg{width:19px;height:19px;fill:none;stroke:#c4b9c0;stroke-width:1.9;stroke-linejoin:round;transition:fill .15s,stroke .15s;}
.favbtn:hover{border-color:#e8a8c0;}
.favbtn.is-on{background:#fdeef4;border-color:#e8a8c0;}
.favbtn.is-on svg{fill:#c05c82;stroke:#c05c82;}
.favbtn.is-pop{transform:scale(1.28);}
.favbtn--float{position:absolute;right:10px;top:10px;z-index:2;box-shadow:0 4px 14px rgba(36,26,32,.16);}

/* ============ トースト ============ */
.apptoast{
  position:fixed;left:50%;bottom:calc(var(--nav-h) + 18px + env(safe-area-inset-bottom, 0px));
  transform:translate(-50%,14px);z-index:120;
  background:rgba(42,34,43,.94);color:#fff;font-family:'Noto Sans JP',sans-serif;font-size:12.5px;font-weight:700;
  padding:11px 20px;border-radius:999px;box-shadow:0 10px 30px rgba(36,26,32,.3);
  opacity:0;pointer-events:none;transition:opacity .22s,transform .22s;white-space:nowrap;
}
.apptoast.is-show{opacity:1;transform:translate(-50%,0);}

/* ============ ホーム画面に追加バナー ============ */
.a2hs{
  position:fixed;left:12px;right:12px;bottom:calc(var(--nav-h) + 12px + env(safe-area-inset-bottom, 0px));
  z-index:110;display:flex;align-items:center;gap:12px;
  background:#fff;border:1px solid rgba(36,26,32,.10);border-radius:16px;padding:12px 14px;
  box-shadow:0 14px 40px rgba(96,62,80,.20);
  transform:translateY(20px);opacity:0;transition:transform .3s,opacity .3s;
}
.a2hs.is-show{transform:translateY(0);opacity:1;}
@media(min-width:760px){.a2hs{max-width:460px;left:50%;transform:translate(-50%,20px);}.a2hs.is-show{transform:translate(-50%,0);}}
.a2hs img{width:38px;height:38px;border-radius:9px;flex-shrink:0;}
.a2hs__t{flex:1;min-width:0;line-height:1.4;}
.a2hs__t b{display:block;font-family:'Noto Sans JP',sans-serif;font-size:12.5px;font-weight:700;color:#2a222b;}
.a2hs__t span{display:block;font-size:10.5px;color:#9c919e;margin-top:2px;}
.a2hs__ok{flex-shrink:0;border:none;border-radius:999px;background:linear-gradient(100deg,#c05c82,#b98a2f);color:#fff;font-family:'Noto Sans JP',sans-serif;font-size:12px;font-weight:700;padding:9px 16px;cursor:pointer;}
.a2hs__no{flex-shrink:0;border:none;background:none;color:#9c919e;font-size:14px;cursor:pointer;padding:4px 2px;}

/* --- iPhone用：やり方を開いたとき --- */
.a2hs--ios{flex-wrap:wrap;}
.a2hs__steps{flex:0 0 100%;border-top:1px solid rgba(36,26,32,.08);margin-top:2px;padding-top:10px;}
.a2hs__steps ol{margin:0;padding-left:1.25em;}
.a2hs__steps li{font-family:'Noto Sans JP',sans-serif;font-size:11.5px;line-height:1.9;color:#5b4f5a;}
.a2hs__steps li b{color:#c05c82;font-weight:700;}
.a2hs__ic{display:inline-flex;vertical-align:-4px;width:17px;height:17px;}
.a2hs__ic svg{width:100%;height:100%;fill:none;stroke:#3b82f6;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}

/* 求人側は黒×ネオンなので、下タブも暗い版にする（白いバーが浮くため・2026-08-02） */
body[data-side="job"] .appnav{
  background:rgba(16,13,18,.94);
  border-top:1px solid rgba(255,255,255,.10);
  box-shadow:0 -4px 20px rgba(0,0,0,.35);
}
body[data-side="job"] .appnav__i{color:#8b8291;}
body[data-side="job"] .appnav__i.is-on{color:#fff;}
body[data-side="job"] .appnav__badge{background:#c05c82;color:#fff;}

/* 店舗ページ見出し横の♡ */
.sdfav{display:inline-flex;align-items:center;gap:7px;vertical-align:middle;margin-left:12px;}
.sdfav .favbtn{position:static;}
.sdfav__t{font-family:'Noto Sans JP',sans-serif;font-size:11px;font-weight:700;color:#9b8fa0;letter-spacing:.04em;}

/* ===== 友だち追加クーポン（初回3,000円オフ）=====
   ⚠️ ここに置いてある理由：クーポンはトップだけでなく「初回いくらかかる」「初回予約」など
   料金を見た直後＝一番効く場所にも出すため、全ページが読む app-nav.css を入れ物にしている。
   index.html にあったインラインCSSはこちらへ集約済み（二重管理にしない・2026-08-12）。
   ⚠️ 表記は「3,000円オフ」で固定。「初回無料」は最安店でしか成立しない＝書いた瞬間に中立の看板が死ぬ。
   ⚠️ 原資はADSON負担。「お店の取り分は変わらない」の一行を消さない（消すと"紹介で高い席"の不安が戻る）。
   ⚠️ 女性客側だけで使う。求人側（body[data-side="job"]）には出さない。 */
.cpn{position:relative;display:flex;align-items:stretch;gap:0;width:100%;max-width:560px;margin:0 0 12px;
  font-family:'Noto Sans JP',sans-serif;
  background:linear-gradient(158deg,#fffdf6 0%,#fcefd6 62%,#fbe6d5 100%);
  border:2px solid #dcbe80;border-radius:18px;text-decoration:none;overflow:hidden;
  box-shadow:0 14px 34px rgba(168,132,47,.26),0 0 0 4px rgba(232,203,149,.22);
  transition:transform .2s,box-shadow .2s;}
@media(hover:hover){.cpn:hover{transform:translateY(-2px);box-shadow:0 20px 46px rgba(168,132,47,.34),0 0 0 5px rgba(232,203,149,.3);}}
/* チケットの切り欠き（左右の半円）。背景色は置いた場所に合わせて --cpn-notch で上書きする */
.cpn::before,.cpn::after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;
  background:var(--cpn-notch,var(--bg,#faf7f3));border:2px solid #dcbe80;top:50%;margin-top:-9px;z-index:3;}
.cpn::before{left:-10px;border-right-color:transparent;}
.cpn::after{right:-10px;border-left-color:transparent;}
/* 光沢が横切る＝止まっている紙面の中で唯一動く要素にして視線を集める */
.cpn__sh{position:absolute;top:0;left:-55%;width:34%;height:100%;z-index:2;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.85),transparent);
  transform:skewX(-18deg);animation:cpnShine 5s ease-in-out infinite;}
@keyframes cpnShine{0%,70%{left:-55%;}100%{left:130%;}}
.cpn__l{position:relative;z-index:2;flex:1;padding:16px 8px 16px 19px;min-width:0;}
.cpn__k{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;letter-spacing:.08em;color:#fff;
  background:linear-gradient(100deg,#c9962f,#a8842f);padding:5px 11px;border-radius:999px;
  box-shadow:0 4px 12px rgba(168,132,47,.3);}
.cpn__v{display:flex;align-items:baseline;gap:3px;margin:10px 0 3px;color:#7a5f1f;flex-wrap:nowrap;white-space:nowrap;}
/* ⚠️ サイズを上げるときは必ずFINAL側（左右22pxパディングで券が331pxになる）で見る。
   ここを欲張ると「円オフ」がミシン目を跨いで右パネルに食い込む */
.cpn__v b{font-family:'Shippori Mincho',serif;font-size:clamp(38px,9.4vw,56px);font-weight:800;line-height:.88;letter-spacing:-.01em;
  background:linear-gradient(100deg,#a8842f 0%,#c05c82 100%);-webkit-background-clip:text;background-clip:text;color:transparent;}
.cpn__v i{font-style:normal;font-size:clamp(14px,3.2vw,20px);font-weight:800;color:#a8842f;}
.cpn__em{display:block;font-size:12px;font-weight:700;color:#8a7a56;margin:0 0 6px;}
.cpn__s{display:block;font-size:11px;line-height:1.75;color:#7a6a4a;}
.cpn__r{position:relative;z-index:2;flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  padding:15px 16px;border-left:2px dashed #dcbe80;background:rgba(255,255,255,.62);}
.cpn__btn{display:inline-flex;align-items:center;gap:6px;background:#06c755;color:#fff;font-size:13.5px;font-weight:700;
  letter-spacing:.02em;padding:13px 18px;border-radius:999px;white-space:nowrap;
  box-shadow:0 6px 18px rgba(6,199,85,.34);animation:cpnPulse 2.6s ease-in-out infinite;}
@keyframes cpnPulse{0%,100%{box-shadow:0 6px 18px rgba(6,199,85,.34);}50%{box-shadow:0 6px 24px rgba(6,199,85,.55);}}
.cpn__note{font-size:9.5px;color:#8a7a56;letter-spacing:.02em;white-space:nowrap;}
@media(prefers-reduced-motion:reduce){.cpn__sh,.cpn__btn{animation:none;}}
@media(max-width:440px){
  .cpn__l{padding:14px 6px 14px 15px;}
  .cpn__r{padding:14px 12px;}
  .cpn__btn{font-size:12px;padding:11px 14px;}
}
/* クーポンの使い方（3ステップ）＝「どう使うの？」で止まるのを防ぐ */
.cpnuse{counter-reset:cu;list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px;padding:0;}
.cpnuse li{counter-increment:cu;display:inline-flex;align-items:center;gap:7px;font-family:'Noto Sans JP',sans-serif;
  font-size:11px;font-weight:500;color:var(--txt-soft,#6d6270);background:#fff;
  border:1px solid var(--line-soft,rgba(36,26,32,.08));padding:7px 13px 7px 8px;border-radius:999px;}
.cpnuse li::before{content:counter(cu);width:18px;height:18px;border-radius:50%;background:var(--rose-pale,#f7e3ea);
  color:var(--rose-deep,#a84a6f);font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:0 0 auto;}

/* ===== クーポンバー（画面下の固定帯）=====
   出したいページで coupon-bar.js を読むと出る。置いていないページには出ない。
   ⚠️ z-index はタブバー(90)より下の80。bottom に --nav-h を足してタブに潜らせない。 */
.cpnbar{position:fixed;left:0;right:0;bottom:calc(var(--nav-h, 62px) + env(safe-area-inset-bottom, 0px));z-index:80;
  display:none;align-items:center;gap:8px;padding:9px 10px 9px 14px;font-family:'Noto Sans JP',sans-serif;
  background:linear-gradient(100deg,#c9962f 0%,#a8842f 100%);box-shadow:0 -6px 20px rgba(96,62,80,.16);
  transform:translateY(100%);transition:transform .3s ease;}
.cpnbar.is-on{display:flex;transform:translateY(0);}
.cpnbar__l{flex:1;display:flex;align-items:center;justify-content:space-between;gap:10px;text-decoration:none;min-width:0;}
.cpnbar__t{font-size:12px;line-height:1.45;color:#fff8e8;min-width:0;}
.cpnbar__t b{display:block;font-size:14px;font-weight:800;color:#fff;letter-spacing:.02em;}
.cpnbar__b{flex:0 0 auto;background:#06c755;color:#fff;font-size:12.5px;font-weight:700;padding:9px 15px;border-radius:999px;white-space:nowrap;box-shadow:0 4px 14px rgba(6,199,85,.36);}
.cpnbar__x{flex:0 0 auto;width:26px;height:26px;border:none;border-radius:50%;background:rgba(255,255,255,.22);color:#fff;font-size:15px;line-height:1;cursor:pointer;padding:0;}
@media(min-width:760px){.cpnbar{max-width:520px;margin:0 auto;border-radius:14px 14px 0 0;}}