/* ==========================================================
   My girl / SAWADEEKA 共通スタイル
   1. ルール(色・文字・余白・アイコン)
   2. 土台  3. 部品  4. トップ  5. My girl  6. SAWADEEKA
   7. スマホ幅の調整
   ========================================================== */

/* ---------- 1. ルール ---------- */
:root{
  /* 色 */
  --night:#0d1412;            /* 夜の色(共通・My girl) */
  --night-2:#16211e;
  --text:#ece7da;             /* 暗い背景の上の文字 */
  --muted:#b7c0ba;            /* 暗い背景の上の補足 */
  --line:rgba(236,231,218,.16);
  --yellow:#f5c518;           /* メインカラー(電話ボタン・見出し) */
  --on-yellow:#1b1408;        /* 黄色の上の文字 */
  --ink:#2b2130;              /* 看板・白いカードの上の文字 */
  --ink-muted:#5b4a5f;
  --mg-sign-1:#f6f784;--mg-sign-2:#e7ed5b;   /* My girl の看板 */
  --mg-pink:#d23a77;--mg-pink-strong:#c2185b;
  --sw-sign-1:#f3f35e;--sw-sign-2:#dcdc1a;   /* SAWADEEKA の看板 */
  --sw-wine:#a3195b;--sw-red:#c8102e;
  --sw-blue:#4f86d8;--sw-amber:#c27a00;--sw-red2:#e2363a;--sw-purple:#8b52c8;--sw-orange:#d65f0a;
  /* 文字 */
  --sans:"Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;
  --thai:"Noto Sans Thai","Leelawadee UI","Thonburi",sans-serif;
  --fs-s:15px;--fs-m:16px;--fs-l:18px;--fs-xl:22px;
  /* 余白 */
  --sp-1:8px;--sp-2:12px;--sp-3:16px;--sp-4:24px;--sp-5:32px;--sp-6:48px;--sp-7:64px;--sp-8:96px;
  /* 角の丸み */
  --r-s:10px;--r-m:16px;--r-l:22px;
  /* My girl の看板のつる模様 */
  --vine:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='44' viewBox='0 0 160 44'><path d='M0 22 Q20 8 40 22 T80 22 T120 22 T160 22' fill='none' stroke='%2350b8b0' stroke-width='2'/><g fill='%236fa8dc'><ellipse cx='20' cy='12' rx='7' ry='3' transform='rotate(-30 20 12)'/><ellipse cx='60' cy='32' rx='7' ry='3' transform='rotate(30 60 32)'/><ellipse cx='100' cy='12' rx='7' ry='3' transform='rotate(-30 100 12)'/><ellipse cx='140' cy='32' rx='7' ry='3' transform='rotate(30 140 32)'/></g><g fill='%239b7fd4'><ellipse cx='33' cy='31' rx='6' ry='2.5' transform='rotate(25 33 31)'/><ellipse cx='113' cy='31' rx='6' ry='2.5' transform='rotate(25 113 31)'/><ellipse cx='70' cy='10' rx='6' ry='2.5' transform='rotate(-25 70 10)'/></g><circle cx='80' cy='22' r='5.5' fill='%23e8603c'/><circle cx='80' cy='22' r='2' fill='%23ffd84d'/><circle cx='0' cy='22' r='4' fill='%23e8603c'/><circle cx='160' cy='22' r='4' fill='%23e8603c'/></svg>");
  /* SAWADEEKA の看板の文字色の帯 */
  --sw-band:linear-gradient(90deg,var(--sw-blue) 0 20%,var(--sw-amber) 20% 40%,var(--sw-red2) 40% 60%,var(--sw-purple) 60% 80%,var(--sw-orange) 80% 100%);
  /* アイコン(電話・地図のピン) */
  --i-tel:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/></svg>");
  --i-pin:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/></svg>");
  color-scheme:dark;
  box-sizing:border-box;
}

/* ---------- 2. 土台 ---------- */
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);font-size:var(--fs-m);line-height:1.9;background:var(--night);color:var(--text)}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,h4,p,figure,dl,dd{margin:0}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:880px;margin:0 auto;padding:0 var(--sp-4)}
.thai{font-family:var(--thai);font-weight:600;line-height:1.3}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}

/* 上のタブ */
.tabs{position:sticky;top:0;z-index:80;display:flex;align-items:stretch;background:rgba(13,20,18,.95);border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.tabs a{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;min-height:52px;padding:0 6px;text-decoration:none;font-size:15px;font-weight:700;color:var(--text);border-bottom:3px solid transparent;text-align:center}
.tabs a[aria-current="page"]{color:var(--yellow);border-bottom-color:var(--yellow)}
.tabs a:focus-visible{outline-offset:-4px}
#langbtn{display:none;flex:0 0 auto;align-self:center;margin:0 10px;min-height:36px;padding:4px 14px;border:1px solid rgba(236,231,218,.5);border-radius:999px;background:transparent;color:var(--text);font:inherit;font-size:14px;cursor:pointer}
.js #langbtn{display:block}

/* ---------- 3. 部品 ---------- */
/* ボタン: 電話はすべて「丸いボタン+電話アイコン」。暗い背景では黄色、看板の上ではお店の色 */
.call,.mapbox{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:10px 28px;border:2px solid transparent;border-radius:999px;font-size:var(--fs-m);font-weight:700;line-height:1.4;text-decoration:none;text-align:center}
.call{background:var(--yellow);color:var(--on-yellow)}
.mapbox{display:flex;width:100%;max-width:640px;margin-top:var(--sp-4);background:transparent;border-color:var(--yellow);color:var(--yellow)}
.call::before,.callbar::before,.topcall a::before,.mapbox::before,.maplink::before{content:"";flex:0 0 auto;width:20px;height:20px;background:currentColor;-webkit-mask:var(--i-tel) center/contain no-repeat;mask:var(--i-tel) center/contain no-repeat}
.mapbox::before,.maplink::before{-webkit-mask-image:var(--i-pin);mask-image:var(--i-pin)}
.maplink{display:inline-flex;align-items:center;gap:4px;margin-left:.5em;font-size:var(--fs-s);font-weight:700;color:var(--yellow);text-underline-offset:3px}
.maplink::before{width:15px;height:15px}
.call.no-icon::before{display:none}
@media (hover:hover){
  .call,.mapbox,.topcall a{transition:transform .15s,filter .15s,background-color .15s}
  .call:hover,.topcall a:hover{transform:translateY(-1px);filter:brightness(1.07)}
  .mapbox:hover{background:rgba(245,197,24,.1)}
}

/* 見出し・文章 */
.sec{display:flex;align-items:center;gap:var(--sp-3);margin:var(--sp-7) 0 var(--sp-4);font-size:var(--fs-xl);font-weight:700;letter-spacing:.04em;line-height:1.4;color:var(--yellow)}
.sec::after{content:"";flex:1;height:2px;background:currentColor;opacity:.25}
.lead{max-width:34em;font-size:17px;margin:0 0 var(--sp-4)}
.greet{padding-left:var(--sp-3);border-left:3px solid var(--yellow)}
.note{margin-top:var(--sp-4);font-size:var(--fs-s);color:var(--muted)}
.age{margin-top:var(--sp-4);padding:12px 16px;border:1px solid var(--line);border-radius:var(--r-s);font-size:var(--fs-s);color:var(--muted)}
.pnav{display:flex;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-4) 0;font-size:var(--fs-s)}
.pnav a{text-decoration:none;border-bottom:1px solid currentColor;color:var(--muted)}

/* はじめての方へ */
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3)}
.feat>div{padding:20px 22px;border-radius:var(--r-m);line-height:1.7}
.feat b{display:block;margin-bottom:6px;font-size:17px}
.feat span{font-size:var(--fs-s)}

/* 写真(比率をそろえる) */
.ext{max-width:520px}
.ext img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 5%;border-radius:var(--r-m)}
.shots{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2)}
.shot.wide{grid-column:1/-1}
.shot img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-m)}
figcaption{margin-top:10px;font-size:var(--fs-s);color:var(--muted)}

/* 料金・メニュー */
.menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5) var(--sp-6)}
.menu-grid>div:first-child{grid-column:1/-1}
.menu-grid h4{margin:0 0 var(--sp-2);font-size:var(--fs-l)}
.row{display:flex;align-items:baseline;gap:10px;padding:6px 0}
.row::after{content:"";order:1;flex:1;border-bottom:1px dotted currentColor;opacity:.35;transform:translateY(-4px)}
.row dd{order:2;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.set-note{margin-top:var(--sp-1);font-size:var(--fs-s);color:var(--muted)}

/* お店の情報 */
.info dl{display:grid;grid-template-columns:7em 1fr;max-width:680px}
.info dt,.info dd{padding:12px 0;border-bottom:1px solid var(--line)}
.info dt{font-size:var(--fs-s);color:var(--muted)}

/* ご予約・お問い合わせ */
.contact p{margin-bottom:var(--sp-2)}
.contact .btns{margin:var(--sp-3) 0 0}

/* 営業カレンダー(休業日を入れたときだけ表示) */
.cal{margin-bottom:var(--sp-5)}
.cal:empty{display:none}
.cal-months{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5)}
.cal-title{font-weight:700;margin-bottom:var(--sp-1)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}
.cal-w{font-size:13px;color:var(--muted)}
.cal-d{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:14px;line-height:1.1;font-variant-numeric:tabular-nums}
.cal-d small{font-size:10px}
.cal-d.closed{background:rgba(245,197,24,.2);color:var(--yellow);font-weight:700;border-radius:6px}
.cal-d.today{outline:1px solid currentColor;outline-offset:-2px}
.cal-none{font-size:14px;color:var(--muted)}

/* 店名の看板文字 */
.sign-small{display:block;font-size:16px;font-weight:700;color:#a8141f;letter-spacing:.04em;line-height:1}
.sign-name>span{display:inline-block;padding:.14em .4em .1em;border-radius:16px;background:#fff;box-shadow:0 0 0 4px #fff,0 0 16px 6px rgba(255,255,255,.85);letter-spacing:.02em;line-height:1}
.sign-name>span>span:nth-child(1),.sign-name>span>span:nth-child(8){color:var(--sw-blue)}
.sign-name>span>span:nth-child(2){color:var(--sw-amber)}
.sign-name>span>span:nth-child(3),.sign-name>span>span:nth-child(6),.sign-name>span>span:nth-child(9){color:var(--sw-red2)}
.sign-name>span>span:nth-child(4){color:var(--sw-purple)}
.sign-name>span>span:nth-child(5){color:#e8462e}
.sign-name>span>span:nth-child(7){color:var(--sw-orange)}
.sign-kana{font-size:14px;letter-spacing:.12em;color:var(--ink)}

/* お店のページの先頭 */
#maigirl,#sawadeka{position:relative;padding:0 0 var(--sp-8)}
.shero{display:grid;gap:var(--sp-4);align-items:center}
.shero .catch{margin:0 0 var(--sp-3);font-size:var(--fs-l)}
.shero .hours{margin:0;font-size:var(--fs-xl);font-weight:700;letter-spacing:.04em;line-height:1.5}
.shero .hours span{display:block;font-size:var(--fs-s);font-weight:400;letter-spacing:0}
.shero .call-wrap{margin-top:var(--sp-4)}

/* スマホの画面下の電話バー */
.callbar{display:none}

/* フッター */
footer{padding:var(--sp-6) var(--sp-4) var(--sp-7);border-top:1px solid var(--line);background:var(--night);text-align:center;font-size:var(--fs-s);line-height:1.9;color:var(--muted)}
.fshops{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-3) var(--sp-7);margin-bottom:var(--sp-4)}
.fshops b{font-size:17px;color:var(--text)}
footer a{color:var(--yellow)}
.fhours{margin-bottom:var(--sp-3)}

/* ---------- 4. トップ ---------- */
.kicker{margin:0;padding:var(--sp-3) var(--sp-4);text-align:center;font-size:var(--fs-s);font-weight:700;letter-spacing:.08em;color:var(--yellow)}
.doors{display:grid;grid-template-columns:1fr 1fr}
.door{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:min(72svh,600px);padding:var(--sp-8) var(--sp-6);text-align:center;text-decoration:none;color:var(--ink)}
.door>*{position:relative;z-index:1}
.door>.door-ph{position:absolute;inset:0;z-index:0;background:center/cover no-repeat;opacity:.35;filter:saturate(.8) brightness(.7);pointer-events:none}
.door::after{content:"";position:absolute;inset:28px;z-index:0;pointer-events:none;transition:box-shadow .25s}
.door .name{font-weight:700;line-height:1;letter-spacing:.04em}
.door p{font-size:var(--fs-m);line-height:1.8}
.door .who{font-size:var(--fs-s);color:var(--ink-muted)}
.door .txt{display:flex;flex-direction:column;align-items:center;gap:10px}
.door .go{display:inline-block;margin-top:var(--sp-1);padding-bottom:2px;border-bottom:2px solid currentColor;font-weight:700}
.door .thai{font-size:20px}
/* My girl の入口: 暗い店内で光る看板 */
.door.mg{background:radial-gradient(circle at 12% 18%,rgba(255,190,90,.35) 0 6px,transparent 7px),radial-gradient(circle at 88% 12%,rgba(255,170,80,.28) 0 9px,transparent 10px),radial-gradient(circle at 92% 86%,rgba(255,200,120,.3) 0 5px,transparent 6px),radial-gradient(circle at 6% 80%,rgba(255,150,90,.25) 0 8px,transparent 9px),var(--night)}
.door.mg>.door-ph{background-image:url(img/mygirl-inside.jpg)}
.door.mg::after{border-radius:6px;background:var(--vine) repeat-x left 20px top 16px/160px 44px,var(--vine) repeat-x left 100px bottom 16px/160px 44px,linear-gradient(180deg,var(--mg-sign-1),var(--mg-sign-2));box-shadow:0 0 0 1px rgba(255,255,255,.55),0 0 28px rgba(246,247,132,.55),0 0 80px rgba(246,247,132,.25)}
.door.mg .name{font-size:clamp(30px,7vw,84px);text-transform:uppercase;color:var(--mg-pink);text-shadow:0 2px 0 rgba(255,255,255,.6)}
.door.mg .go{color:var(--mg-pink-strong)}
/* SAWADEEKA の入口 */
.door.sw{background:radial-gradient(circle at 10% 14%,rgba(255,190,90,.32) 0 7px,transparent 8px),radial-gradient(circle at 90% 10%,rgba(255,120,170,.26) 0 9px,transparent 10px),radial-gradient(circle at 92% 88%,rgba(255,200,120,.3) 0 5px,transparent 6px),radial-gradient(circle at 7% 84%,rgba(190,120,255,.25) 0 8px,transparent 9px),#140d1f}
.door.sw>.door-ph{background-image:url(img/sawadeeka-bar.jpg)}
.door.sw::after{border-radius:var(--r-l);background:radial-gradient(ellipse at 50% 40%,var(--sw-sign-1),var(--sw-sign-2));box-shadow:0 0 0 3px rgba(235,235,235,.85),0 0 30px rgba(240,240,80,.55),0 0 90px rgba(240,240,80,.22)}
.door.sw .name{font-size:clamp(22px,4.6vw,56px);margin:4px 0}
.door.sw .go{color:var(--sw-wine)}
@media (hover:hover){
  .door.mg:hover::after{box-shadow:0 0 0 1px rgba(255,255,255,.7),0 0 36px rgba(246,247,132,.75),0 0 110px rgba(246,247,132,.35)}
  .door.sw:hover::after{box-shadow:0 0 0 3px rgba(245,245,245,.95),0 0 38px rgba(240,240,80,.75),0 0 120px rgba(240,240,80,.32)}
}
/* 電話ボタン(トップ) */
.topcall{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);padding:var(--sp-4);background:var(--night)}
.topcall a{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 10px;min-height:56px;padding:10px 20px;border-radius:999px;background:var(--yellow);color:var(--on-yellow);font-size:var(--fs-m);font-weight:700;text-decoration:none;text-align:center}
.topcall .num{font-variant-numeric:tabular-nums;letter-spacing:.04em}
/* 紹介文 */
.intro{padding:var(--sp-6) var(--sp-4);background:var(--night-2);text-align:center}
.intro p{max-width:34em;margin:0 auto;font-size:17px;line-height:2;letter-spacing:.03em}

/* ---------- 5. My girl: 暗い店内で光る看板 ---------- */
#maigirl{background:radial-gradient(circle at 8% 6%,rgba(255,190,90,.22) 0 7px,transparent 8px),radial-gradient(circle at 94% 14%,rgba(255,170,80,.18) 0 10px,transparent 11px),radial-gradient(circle at 90% 52%,rgba(255,200,120,.16) 0 6px,transparent 7px),radial-gradient(circle at 5% 70%,rgba(255,150,90,.16) 0 9px,transparent 10px),radial-gradient(ellipse at 50% 0,rgba(246,247,132,.10),transparent 60%),var(--night)}
#maigirl .shero{padding:72px 28px 60px;border-radius:6px;text-align:center;color:var(--ink);background:var(--vine) repeat-x left 20px top 16px/160px 44px,var(--vine) repeat-x left 100px bottom 16px/160px 44px,linear-gradient(180deg,var(--mg-sign-1),var(--mg-sign-2));box-shadow:0 0 0 1px rgba(255,255,255,.55),0 0 28px rgba(246,247,132,.5),0 0 90px rgba(246,247,132,.2)}
#maigirl .shero h2{margin:0 0 var(--sp-3);font-size:clamp(52px,10vw,96px);font-weight:700;line-height:1;letter-spacing:.04em;text-transform:uppercase;color:var(--mg-pink);text-shadow:0 2px 0 rgba(255,255,255,.6)}
#maigirl .shero .call{background:var(--mg-pink-strong);color:#fff}
#maigirl .sec{color:var(--mg-sign-1)}
#maigirl .sec::after{height:22px;opacity:.85;background:var(--vine) repeat-x left center/80px 22px}
#maigirl .greet{border-left-color:var(--mg-pink)}
#maigirl .feat>div{border:1px solid rgba(246,247,132,.35);background:rgba(246,247,132,.05)}
#maigirl .feat b,#maigirl .menu-grid h4,#maigirl .row dd{color:var(--mg-sign-1)}
#maigirl .menu-grid{padding:var(--sp-5);border:1px solid rgba(246,247,132,.4);border-radius:var(--r-m);background:rgba(255,255,255,.02)}
#maigirl .ext img,#maigirl .shot img{border:2px solid rgba(246,247,132,.55)}

/* ---------- 6. SAWADEEKA: 黄色い看板と白い帯 ---------- */
#sawadeka{background:radial-gradient(circle at 8% 6%,rgba(255,190,90,.22) 0 7px,transparent 8px),radial-gradient(circle at 94% 14%,rgba(255,120,170,.2) 0 10px,transparent 11px),radial-gradient(circle at 90% 52%,rgba(255,200,120,.16) 0 6px,transparent 7px),radial-gradient(circle at 5% 70%,rgba(190,120,255,.18) 0 9px,transparent 10px),linear-gradient(180deg,#2a1240,#1c0d2e)}
#sawadeka .pnav a{color:#ddd0e8}
#sawadeka .shero{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}
#sawadeka .sh-main{padding:52px 24px 44px;border-radius:var(--r-l);text-align:center;color:var(--ink);background:radial-gradient(ellipse at 50% 40%,var(--sw-sign-1),var(--sw-sign-2));box-shadow:0 0 0 3px rgba(235,235,235,.85),0 0 28px rgba(240,240,80,.5),0 0 90px rgba(240,240,80,.2)}
#sawadeka .sh-main h2{margin:var(--sp-2) 0;font-size:clamp(30px,5vw,54px);font-weight:700}
#sawadeka .sh-main .sign-kana{display:block;margin:2px 0 var(--sp-3)}
#sawadeka .sh-main .catch{font-size:var(--fs-m);font-weight:500}
#sawadeka .sh-main .call{background:var(--sw-wine);color:#fff}
#sawadeka .sec{color:#fff}
#sawadeka .sec::after{height:6px;border-radius:3px;opacity:1;background:var(--sw-band)}
#sawadeka .greet{border-left:4px solid;border-image:linear-gradient(180deg,var(--sw-blue),var(--sw-amber),var(--sw-red2),var(--sw-purple)) 1}
/* 白いカード(看板の白い帯) */
#sawadeka .feat>div,#sawadeka .menu-grid>div,#sawadeka .info dl{background:#fffdf7;color:var(--ink);border-radius:var(--r-m);box-shadow:0 4px 0 var(--sw-sign-2),0 14px 30px rgba(0,0,0,.3)}
#sawadeka .menu-grid>div{padding:var(--sp-4)}
#sawadeka .feat b{color:var(--sw-red)}
#sawadeka .menu-grid h4{color:var(--sw-wine)}
#sawadeka .row dd{color:var(--sw-red)}
#sawadeka .set-note,#sawadeka .info dt{color:var(--ink-muted)}
#sawadeka .info dl{padding:var(--sp-2) var(--sp-4)}
#sawadeka .info dt,#sawadeka .info dd{border-bottom-color:rgba(43,33,48,.12)}
#sawadeka .info dd a,#sawadeka .info .maplink{color:var(--sw-wine)}
#sawadeka .ext img,#sawadeka .shot img{border:3px solid #fff}
#sawadeka figcaption,#sawadeka .note{color:#ddd0e8}
#sawadeka .age{border-color:rgba(255,255,255,.25);color:#e9dff0}
/* 料金チケット */
.ticket-wrap{justify-self:end;width:100%;max-width:330px;filter:drop-shadow(0 6px 0 var(--sw-sign-2)) drop-shadow(0 18px 26px rgba(0,0,0,.4))}
.ticket{display:flex;flex-direction:column;align-items:center;gap:4px;padding:30px 28px;text-align:center;color:var(--ink);background:linear-gradient(180deg,#fffdf5,#fff1d2);border-radius:20px;
  -webkit-mask:radial-gradient(circle 13px at 0 50%,transparent 12px,#000 13px) left/51% 100% no-repeat,radial-gradient(circle 13px at 100% 50%,transparent 12px,#000 13px) right/51% 100% no-repeat;
  mask:radial-gradient(circle 13px at 0 50%,transparent 12px,#000 13px) left/51% 100% no-repeat,radial-gradient(circle 13px at 100% 50%,transparent 12px,#000 13px) right/51% 100% no-repeat}
.tk-label{font-size:var(--fs-s);font-weight:700;color:var(--sw-wine);letter-spacing:.04em}
.tk-price{font-size:clamp(60px,9vw,84px);font-weight:700;line-height:1.05;color:var(--sw-red2);font-variant-numeric:tabular-nums}
.tk-price small{font-size:.42em;margin-right:.08em;vertical-align:.5em}
.tk-note{width:100%;margin-top:8px;padding-top:12px;border-top:1px dashed rgba(43,33,48,.35);font-size:var(--fs-s);line-height:1.7}

/* ---------- 7. スマホ幅の調整 ---------- */
@media (min-width:701px){.intro p{font-size:19px}}
@media (max-width:700px){
  .wrap{padding:0 20px}
  .tabs a{font-size:14px}
  #langbtn{margin:0 6px;padding:4px 10px;font-size:13px}
  /* トップ: 2店舗の看板を最初の画面に横並びで見せる */
  .door{min-height:0;gap:6px;padding:56px 14px}
  .door::after{inset:10px}
  .door .who,.door .sign-kana{display:none}
  .door p{font-size:14px;line-height:1.7}
  .door .go{font-size:14px}
  .door .thai{font-size:16px}
  .door.mg::after{background-size:110px 30px,110px 30px,auto;background-position:left 10px top 10px,left 60px bottom 10px,0 0}
  .door.mg .name{font-size:30px}
  .door.sw .name{font-size:19px}
  .sign-name>span{border-radius:10px;box-shadow:0 0 0 3px #fff,0 0 10px 4px rgba(255,255,255,.85)}
  .sign-small{font-size:14px}
  .topcall{grid-template-columns:1fr;gap:var(--sp-2);padding:var(--sp-3) 20px}
  /* お店のページ */
  .sec{margin-top:var(--sp-6)}
  .feat,.menu-grid,.shots,.cal-months{grid-template-columns:1fr}
  .menu-grid{gap:var(--sp-5)}
  .info dl{grid-template-columns:5.5em 1fr;font-size:15px}
  #maigirl .shero{padding:68px 20px 56px}
  #maigirl .shero .catch{font-size:15px}
  #maigirl .menu-grid{padding:var(--sp-4) 20px}
  #sawadeka .shero{grid-template-columns:1fr}
  #sawadeka .sh-main .catch{font-size:15px}
  .ticket-wrap{justify-self:stretch;max-width:none}
  .js .callbar{display:flex;align-items:center;justify-content:center;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:50;min-height:56px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--yellow);color:var(--on-yellow);font-size:16px;font-weight:700;text-decoration:none;box-shadow:0 -6px 24px rgba(0,0,0,.35)}
  .bar-on footer{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
}