@charset "UTF-8";
/* ============================================================
   Secretgirl 北店 オフィシャルサイト
   共通スタイル / モバイルファースト
   ============================================================ */

:root{
  --pink:#ff6f9c;
  --pink-deep:#e14b7c;
  --pink-soft:#ffe3ec;
  --ink:#2b1f26;
  --ink-soft:#5d4c55;
  --muted:#948089;
  --bg:#fff7fa;
  --surface:#ffffff;
  --line:#f2d9e2;
  --accent:#ffb36b;
  --radius:14px;
  --shadow:0 1px 2px rgba(43,31,38,.05), 0 8px 24px rgba(43,31,38,.07);
  --font:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic UI","Yu Gothic",Meiryo,system-ui,sans-serif;
  --wrap:1080px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font); line-height:1.7; font-size:15px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block;}
a{color:var(--pink-deep); text-decoration:none;}
a:hover{text-decoration:underline;}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 16px;}

/* ---------- ヘッダー（900px制限があるので意図的に低背） ---------- */
.site-head{
  background:var(--surface); border-bottom:2px solid var(--pink);
  position:sticky; top:0; z-index:50;
}
.head-inner{
  max-width:var(--wrap); margin:0 auto; padding:10px 16px;
  display:flex; align-items:center; gap:10px; flex-wrap:nowrap;
}
.brand{display:flex; align-items:center; gap:10px; min-width:0;}
.brand .logo{
  font-size:1.05rem; font-weight:800; letter-spacing:.01em; color:var(--pink-deep);
  white-space:nowrap;
}
.brand .logo small{display:block; font-size:.62rem; color:var(--muted); font-weight:600; letter-spacing:.08em;}
/* SGエンブレム（透過PNG 304×255）。
   【重要】ヘッダーを高くすると加点の900pxラインを圧迫するので、
   高さは既存のテキスト高より小さい値に抑え、テキストの左に横並びで置くこと。
   縦に積んだり大きくしたりしない。 */
.brand .logo{display:flex; align-items:center; gap:8px;}
.brand .logo-mark{height:30px; width:auto; flex:none;}
.brand .logo-txt{display:block; min-width:0;}
.head-contact{margin-left:auto; display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.head-contact .hours{font-size:.74rem; color:var(--muted); font-weight:700;}
.tel-btn{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--pink); color:#fff; font-weight:800; font-size:.95rem;
  padding:7px 14px; border-radius:999px; white-space:nowrap;
}
.tel-btn:hover{background:var(--pink-deep); text-decoration:none;}
.line-btn{
  display:inline-flex; align-items:center; gap:6px;
  background:#06C755; color:#fff; font-weight:800; font-size:.88rem;
  padding:7px 13px; border-radius:999px; white-space:nowrap;
}
.line-btn:hover{filter:brightness(.94); text-decoration:none;}

/* スマホではヘッダーを1行に圧縮（営業時間とLINEはドロワーへ逃がす） */
.head-contact .hours, .head-contact .line-btn{display:none;}
/* 店名と電話ボタンが窮屈にならないよう、スマホでは両方を一段小さくする */
.head-inner{gap:8px;}
.brand{margin-right:14px;}
.brand .logo{font-size:.98rem;}
.brand .logo small{font-size:.58rem; letter-spacing:.04em;}
.head-contact .tel-btn{font-size:.82rem; padding:7px 11px; gap:4px;}
/* iPhone SE など極小幅では英字サブラベルを落として重なりを防ぐ */
@media (max-width:359px){
  .brand{margin-right:8px;}
  .brand .logo{font-size:.88rem;}
  .brand .logo small{display:none;}
  .head-contact .tel-btn{font-size:.76rem; padding:6px 9px;}
  .nav-toggle{margin-left:8px; width:38px;}
}

/* ---------- ハンバーガー（スマホのみ） ---------- */
.nav-toggle{
  flex:none; width:42px; height:38px; padding:0; cursor:pointer; margin-left:12px;
  border:1px solid var(--line); border-radius:8px; background:var(--surface);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.nav-toggle span{
  display:block; width:20px; height:2px; border-radius:2px; background:var(--pink-deep);
  transition:transform .25s ease, opacity .2s ease;
}
body.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);}
body.nav-open .nav-toggle span:nth-child(2){opacity:0;}
body.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ---------- ドロワー ---------- */
.nav-overlay{
  position:fixed; inset:0; z-index:80; background:rgba(34,27,34,.5);
  opacity:0; transition:opacity .28s ease;
}
body.nav-open .nav-overlay{opacity:1;}
.nav-drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:90;
  width:82%; max-width:330px; background:var(--surface);
  box-shadow:-6px 0 24px rgba(34,27,34,.25);
  transform:translateX(100%); transition:transform .28s ease;
  display:flex; flex-direction:column; overflow-y:auto;
}
body.nav-open .nav-drawer{transform:translateX(0);}
body.nav-open{overflow:hidden;}
.nav-drawer .nav-close{
  align-self:flex-end; width:52px; height:52px; padding:0; border:0; background:none;
  font-size:1.7rem; line-height:1; color:var(--muted); cursor:pointer;
}
.nav-drawer ul{list-style:none; margin:0; padding:0 16px;}
.nav-drawer li + li{border-top:1px solid var(--line);}
.nav-drawer a{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:15px 4px; color:var(--ink); font-weight:700; font-size:1rem;
}
.nav-drawer a small{display:block; font-size:.64rem; font-weight:700; color:var(--muted); letter-spacing:.1em; margin-top:2px;}
.nav-drawer a::after{content:"›"; flex:none; color:var(--pink); font-size:1.4rem; line-height:1;}
.nav-drawer a:hover{text-decoration:none; color:var(--pink-deep);}
.nav-drawer a.is-current{color:var(--pink-deep);}
.nav-drawer a.is-current small{color:var(--pink);}
.drawer-cta{margin-top:auto; padding:20px 16px 26px; display:flex; flex-direction:column; gap:10px;}
.drawer-cta a{text-align:center; justify-content:center;}
.drawer-cta .hours-note{font-size:.78rem; color:var(--muted); text-align:center; font-weight:700;}

/* ---------- グローバルナビ（PCのみ・スマホはドロワー） ---------- */
/* z-index は左右の縦帯（.side-strip / z-index:20）より前に出すために必要。
   これが無いと帯がバーの上に乗ってしまう。
   帯は top:118px でこのバー（〜138px）の下に20px潜り込ませており、
   バーが前面にあることで隙間なくバナー上端と揃って見える。 */
.gnav{background:var(--ink); display:none; position:relative; z-index:50;}
.gnav ul{
  max-width:var(--wrap); margin:0 auto; padding:0; list-style:none;
  display:flex; overflow-x:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.gnav ul::-webkit-scrollbar{display:none;}
.gnav li{flex:none;}
.gnav a{
  display:block; padding:11px 15px; color:#fff; font-size:.82rem; font-weight:700;
  white-space:nowrap; letter-spacing:.02em;
}
.gnav a span{display:block; font-size:.62rem; color:#ffb9cf; font-weight:600; letter-spacing:.06em;}
.gnav a:hover,.gnav a.is-current{background:var(--pink); text-decoration:none;}
.gnav a:hover span,.gnav a.is-current span{color:#fff;}

/* ---------- ヒーロースライダー ---------- */
/* 【注意】ここを高くするとウィジェットが900pxラインから外れて加点を失う。
   PCは 1920:800（1280px幅で表示527px）。この時ウィジェットの上端は726pxで、900pxまで174pxの余裕。
   実測（1280px幅）: 1920:500→529px / 1920:700→661px / 1920:800→726px / 1920:900→792px / 1920:1000→858px
   参考: 現行のVOTEC版は580px表示でウィジェットが816・861px＝残り39pxしかない。そこまで攻めない。 */
.hero-slider{position:relative; width:100%; overflow:hidden; background:#000;}
/* スマホは 5:4 の枠で表示する（375px幅なら高さ300px）。
   バナー画像は正方形（900×900 など）のままでよく、object-fit:cover で上下を中央トリミングする。
   正方形のまま375px高で表示すると、下のウィジェット帯が押し下げられて
   写メ日記が900pxラインぎりぎり（残り11px）になり、加点を落とす日が出るため。
   → バナーのデザインは【上下それぞれ約10%が切れる】前提で、文字・ロゴを中央に寄せて作ること。 */
.hero-slider .slides{position:relative; width:100%; aspect-ratio:5/4;}
.hero-slider .slide{
  position:absolute; inset:0; opacity:0; transition:opacity .7s ease;
  display:block; pointer-events:none;
}
.hero-slider .slide.is-active{opacity:1; pointer-events:auto;}
.hero-slider .slide img{width:100%; height:100%; object-fit:cover;}

.hero-slider .dots{
  position:absolute; left:0; right:0; bottom:10px;
  display:flex; justify-content:center; gap:8px; z-index:2;
}
.hero-slider .dots button{
  width:9px; height:9px; padding:0; border-radius:50%; cursor:pointer;
  border:1px solid rgba(255,255,255,.85); background:rgba(255,255,255,.35);
  transition:background .2s, transform .2s;
}
.hero-slider .dots button.is-active{background:#fff; transform:scale(1.25);}
.hero-slider .arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:34px; height:52px; border:0; cursor:pointer; color:#fff; font-size:1.1rem;
  background:rgba(0,0,0,.28); display:flex; align-items:center; justify-content:center;
}
.hero-slider .arrow:hover{background:rgba(0,0,0,.5);}
.hero-slider .arrow.prev{left:0; border-radius:0 6px 6px 0;}
.hero-slider .arrow.next{right:0; border-radius:6px 0 0 6px;}
/* 1枚だけのときは操作UIを出さない */
.hero-slider.is-single .dots,
.hero-slider.is-single .arrow{display:none;}
@media (prefers-reduced-motion: reduce){
  .hero-slider .slide{transition:none;}
}
@media (min-width:768px){
  .hero-slider .slides{aspect-ratio:1920/800;}
  /* 【重要】横幅の上限。スライダーは画面幅いっぱいに伸びるので、
     上限を付けないと1920pxのモニターでバナーが800px高になり、
     ウィジェットが約1000px＝900pxラインの外へ落ちて加点を失う。
     1320pxで止めれば、どんなに広い画面でもバナーは550px高までで、
     ウィジェットの上端は約750px（900pxまで150pxの余裕）に収まる。
     画像をトリミングせずに済ませるため、高さではなく幅で止めている。 */
  .hero-slider{max-width:1320px; margin-left:auto; margin-right:auto;}
  .hero-slider .dots{bottom:14px;}
}

/* ---------- ウィジェット帯（加点：上端900px以内に置く） ---------- */
/* スマホは1カラムで縦積み（DOM順：待機情報 → 写メ日記 → 本文）。
   この順番を変えると写メ日記が先に来て待機情報が900pxラインの外へ落ちる。 */
.page-grid{padding-top:14px;}
.widget-zone{padding:14px 0 4px;}
.widget-box{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:12px 14px 8px; margin-bottom:14px;
}
/* スマホでは左右の余白を捨ててiframeを画面幅いっぱいにする。
   デリヘルタウンのウィジェットは幅で列数が変わるため、数十pxの余白で
   カードが大きくなり表示件数が減ってしまう。 */
@media (max-width:767px){
  .widget-box{
    padding-left:0; padding-right:0;
    border-left:0; border-right:0; border-radius:0;
  }
  .widget-box > h2{padding-left:14px; padding-right:14px;}
}
.widget-box > h2{
  margin:0 0 8px; font-size:.82rem; font-weight:800; letter-spacing:.1em;
  color:var(--pink-deep); display:flex; align-items:center; gap:8px;
}
.widget-box > h2::before{content:""; width:4px; height:14px; border-radius:2px; background:var(--pink);}
.widget-box > h2 small{font-size:.7rem; color:var(--muted); font-weight:600; letter-spacing:0;}
.widget-box iframe{display:block; width:100%; border:0;}

/* ---------- セクション共通 ---------- */
.sec{padding:26px 0;}
.sec-head{margin:0 0 16px; text-align:center;}
.sec-head .en{
  display:block; font-size:1.5rem; font-weight:800; letter-spacing:.14em;
  color:var(--pink); line-height:1.2;
}
.sec-head .ja{display:block; font-size:.78rem; font-weight:700; color:var(--muted); letter-spacing:.1em; margin-top:4px;}

.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:18px 18px 16px;
}

/* ヘッドライン */
.headline{
  background:linear-gradient(135deg,var(--pink-soft),#fff);
  border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 18px; text-align:center; box-shadow:var(--shadow);
}
.headline p{margin:.35em 0; font-size:1rem; font-weight:800; color:var(--pink-deep);}
.headline p:first-child{margin-top:0;}
.headline p:last-child{margin-bottom:0;}

/* お知らせ・イベントリスト */
.news-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;}
.news-list li{
  background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--pink);
  border-radius:10px; padding:12px 14px; box-shadow:var(--shadow);
}
.news-list .date{font-size:.72rem; color:var(--muted); font-weight:700; letter-spacing:.04em;}
.news-list .ttl{font-weight:800; font-size:.98rem; margin-top:2px;}
.news-list .ttl a{color:var(--ink);}

/* PICK UP（女の子カード） */
.pickup-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px;}
.girl{
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  overflow:hidden; box-shadow:var(--shadow);
}
.girl img{width:100%; aspect-ratio:390/520; object-fit:cover;}
/* 写真をタップするとデリヘルタウンのそのキャストのプロフィールへ飛ぶ。
   飛び先をデリヘルタウン内に閉じているので、加点の判定に影響しない。 */
.girl .girl-photo{display:block;}
.girl .girl-photo:hover img{opacity:.92;}
.girl .body{padding:9px 11px 11px;}
.girl .name{font-weight:800; font-size:.95rem;}
.girl .size{font-size:.74rem; color:var(--muted);}
/* カード下部のボタン行。写メ日記＋SNSを横並びにする。
   スマホ375pxではカード内側の使える幅が142pxしかないので、
   ボタンは【1枚のカードにつき写メ日記＋SNS1つまで】。2つ足すと折り返す。 */
/* 【幅の余裕は5px以内】スマホ375pxでのカード内側は142px。
   「写メ日記 ▶」74px ＋ gap4px ＋ 「TikTok」59px = 137px。
   padding や font-size を少しでも増やすと折り返して2行になり、カードの高さが揃わなくなる。
   実際、padding 9px/8px・gap 5px のときは143pxで1pxはみ出していた。 */
.girl .links{display:flex; align-items:center; gap:4px; margin-top:6px; flex-wrap:wrap;}
.girl .diary-link{
  display:inline-block; font-size:.72rem; font-weight:700;
  color:var(--pink-deep); background:var(--pink-soft); padding:3px 8px; border-radius:999px;
}
/* SNSボタン（キャスト本人のアカウントへ）。アカウントを持っている子のカードにだけ付ける。 */
.girl .sns-link{
  display:inline-flex; align-items:center; gap:2px;
  font-size:.68rem; font-weight:800; letter-spacing:0;
  color:#fff; background:#111; padding:4px 7px; border-radius:999px;
}
.girl .sns-link svg{flex:none;}
.girl .sns-link:hover{text-decoration:none; opacity:.85;}
/* Xはロゴ自体が文字の「X」なので、隣にラベルを置くと「✕X」と重複して見える。
   アイコンだけの丸ボタンにする。高さは「写メ日記」ボタン（26px）と揃える。 */
.girl .sns-link.is-icon{
  width:26px; height:26px; padding:0; justify-content:center; gap:0;
}
.girl .badge-new{
  display:inline-block; font-size:.66rem; font-weight:800; color:#fff; background:var(--accent);
  padding:2px 8px; border-radius:999px; margin-bottom:3px;
}
/* 空き枠（次の子が決まったら通常の .girl に差し替え） */
.girl.is-empty{border-style:dashed; border-color:#e8c6d3; box-shadow:none; background:#fffafc;}
.girl.is-empty .empty-slot{
  aspect-ratio:390/520; display:flex; align-items:center; justify-content:center;
  background:repeating-linear-gradient(135deg,#fff 0 10px,#fdeff4 10px 20px);
}
.girl.is-empty .empty-slot span{
  font-size:.78rem; font-weight:800; letter-spacing:.12em; color:#e5b6c6;
  text-align:center; line-height:1.4;
}

/* CTA帯 */
.cta{
  background:var(--ink); color:#fff; border-radius:var(--radius);
  padding:20px 18px; text-align:center; box-shadow:var(--shadow);
}
.cta .lead{font-size:.86rem; color:#ffc9dc; font-weight:700; margin-bottom:10px;}
.cta .tel-big{
  display:inline-block; font-size:1.9rem; font-weight:800; color:#fff; letter-spacing:.02em;
  line-height:1.2;
}
.cta .tel-big:hover{color:var(--pink); text-decoration:none;}
.cta .hours{font-size:.78rem; color:#c9b6bf; margin-top:4px;}
.cta .btns{display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:14px;}

/* 外部リンクボタン（ポータルへ） */
.portal-links{display:grid; grid-template-columns:repeat(2,1fr); gap:10px;}
.portal-links a{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:14px 10px; font-weight:800; color:var(--ink); box-shadow:var(--shadow);
  text-align:center;
}
.portal-links a:hover{border-color:var(--pink); color:var(--pink-deep); text-decoration:none;}
.portal-links a .en{font-size:.95rem; letter-spacing:.08em; color:var(--pink);}
.portal-links a .ja{font-size:.74rem; color:var(--muted); margin-top:2px;}

/* ---------- イベント（/campaign） ---------- */
.event{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden; margin-bottom:20px;
}
.event > .ev-head{
  background:var(--pink); color:#fff; padding:14px 18px; text-align:center;
}
.event.is-special > .ev-head{background:linear-gradient(120deg,#e970a1,#a4637d);}
.event.is-new > .ev-head{background:#00b294;}
.event.is-web > .ev-head{background:#f93aa6;}
.event.is-free > .ev-head{background:#6BB870;}
.event .ev-head .ev-en{display:block; font-size:.68rem; font-weight:800; letter-spacing:.16em; opacity:.85;}
.event .ev-head .ev-ttl{display:block; font-size:1.25rem; font-weight:800; letter-spacing:.02em; margin-top:2px; line-height:1.35;}
.event .ev-head .ev-sub{display:block; font-size:.8rem; font-weight:700; margin-top:4px; opacity:.92;}
.event .ev-body{padding:18px;}
.ev-off{
  text-align:center; font-size:1.6rem; font-weight:800; color:var(--pink-deep);
  line-height:1.25; margin:0 0 4px;
}
.ev-off small{display:block; font-size:.78rem; font-weight:700; color:var(--muted); letter-spacing:.04em; margin-bottom:4px;}
.ev-lead{text-align:center; font-size:.9rem; color:var(--ink-soft); margin:0 0 14px;}

.price-table{width:100%; border-collapse:collapse; margin:14px 0 6px; font-size:.9rem;}
.price-table th, .price-table td{border:1px solid var(--line); padding:9px 8px; text-align:center;}
.price-table thead th{background:var(--pink-soft); color:var(--pink-deep); font-size:.78rem; letter-spacing:.06em;}
.price-table tbody th{background:#fffafc; font-weight:800; width:26%;}
.price-table .was{color:var(--muted); text-decoration:line-through; font-weight:600;}
.price-table .now{color:#cc0000; font-weight:800; background:#fff2f5;}

.ev-code{
  display:block; text-align:center; margin:16px 0 4px;
  background:var(--ink); color:#fff; border-radius:10px; padding:11px 14px;
  font-weight:800; font-size:1rem; letter-spacing:.04em;
}
.ev-code small{display:block; font-size:.7rem; font-weight:600; color:#ffb9cf; letter-spacing:.02em; margin-top:3px;}

.ev-notes{margin:14px 0 0; padding:12px 14px 12px 30px; background:var(--bg); border:1px solid var(--line); border-radius:10px;}
.ev-notes li{font-size:.82rem; color:var(--ink-soft); margin:.25em 0;}
.ev-notes-ttl{
  font-size:.72rem; font-weight:800; letter-spacing:.1em; color:var(--muted);
  text-align:center; margin:16px 0 0;
}

/* イベント一覧の目次 */
.ev-index{display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-bottom:24px;}
.ev-index a{
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  padding:10px 12px; font-size:.82rem; font-weight:800; color:var(--ink); text-align:center;
  box-shadow:var(--shadow);
}
.ev-index a:hover{border-color:var(--pink); color:var(--pink-deep); text-decoration:none;}

/* ---------- 口コミ特典バナー ---------- */
.review-banner{
  border:1px solid #7fd9b3; border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow); margin-bottom:22px; background:#f2fbf5;
}
.review-banner .rb-head{
  background:#2eb872; color:#fff; text-align:center;
  font-weight:800; font-size:1rem; letter-spacing:.04em; padding:9px 14px;
}
.review-banner .rb-body{padding:16px 16px 18px; text-align:center;}
.review-banner .rb-lead{font-size:.92rem; font-weight:700; color:#2f4f3f; margin:0;}
.review-banner .rb-off{
  display:block; font-size:1.5rem; font-weight:800; color:#e01b1b;
  line-height:1.25; margin-top:2px;
}
.review-banner .rb-btn{
  display:block; max-width:420px; margin:14px auto 0;
  background:#a8ecd0; border:1px solid #7fd9b3; border-radius:8px;
  color:#178a5a; font-weight:800; font-size:1rem; padding:12px 18px;
}
.review-banner .rb-btn:hover{background:#94e5c3; text-decoration:none;}
.review-banner .rb-note{font-size:.76rem; color:var(--muted); margin:10px 0 0;}
.review-banner .rb-note a{font-weight:700;}

/* ---------- 基本システム表（緑・2列） ---------- */
.basic-system{
  border:1px solid #a8e2c4; border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow); background:#fff; margin-bottom:22px;
}
.basic-system .bs-head{
  background:#52c98a; color:#fff; text-align:center;
  font-weight:800; font-size:1.05rem; letter-spacing:.06em; padding:10px 14px;
}
.bs-table{width:100%; border-collapse:collapse; font-size:.9rem;}
.bs-table th, .bs-table td{
  border:1px solid #c9ead9; padding:11px 8px; text-align:center; vertical-align:middle;
}
.bs-table th{width:32%; background:#f3fbf7; font-weight:700; color:var(--ink);}
.bs-table td{background:#fff; color:var(--ink); font-weight:700;}
.bs-table td .tax{font-weight:700; color:var(--ink-soft);}
.basic-system .bs-notes{
  background:#f7fdfa; border-top:1px solid #c9ead9; padding:12px 14px;
  font-size:.78rem; color:var(--ink-soft); line-height:1.75;
}
.basic-system .bs-notes p{margin:0 0 .5em;}
.basic-system .bs-notes p:last-child{margin-bottom:0;}
.basic-system .bs-notes b{color:var(--ink);}
/* ストライプ入りの見出し（基本プレイなど） */
.basic-system .bs-head.is-striped{
  background-color:#52c98a;
  background-image:repeating-linear-gradient(-45deg,
    rgba(255,255,255,.14) 0 6px, rgba(255,255,255,0) 6px 12px);
}
/* 本文だけのブロック */
.basic-system .bs-text{padding:14px 16px; font-size:.9rem; line-height:1.9; color:var(--ink);}
.basic-system .bs-text p{margin:0;}
/* 項目名が長い表（オプション等）は左列を広めに */
.bs-table.is-wide th{width:46%; line-height:1.6;}
/* 見出しセル内の注記（※一部交通費…など） */
.bs-table .th-sub{
  display:block; font-size:.74rem; font-weight:600; color:var(--ink-soft);
  line-height:1.5; margin-top:3px;
}
/* 金額ではなく説明文が入るセル */
.bs-table td.is-text{font-weight:600; font-size:.84rem; line-height:1.6; color:var(--ink-soft);}

/* ご利用規約・禁止事項 */
.terms-body{padding:16px 16px 18px; font-size:.85rem; line-height:1.85; color:var(--ink-soft);}
.terms-body .t-lead{margin:0 0 1.2em; color:var(--ink);}
.terms-body h3{
  margin:0 0 .6em; font-size:.95rem; font-weight:800; color:var(--ink);
  text-align:center; letter-spacing:.04em;
}
.terms-list{list-style:none; margin:0 0 1.2em; padding:0;}
.terms-list li{padding-left:1.3em; text-indent:-1.3em; margin:.45em 0;}
.terms-warn{
  background:#fff4f4; border:1px solid #f3cccc; border-radius:10px;
  padding:12px 14px; margin-top:4px;
}
.terms-warn p{margin:.35em 0; color:#a32626; font-weight:700; padding-left:1.3em; text-indent:-1.3em;}
.terms-warn p:first-child{margin-top:0;}
.terms-warn p:last-child{margin-bottom:0;}

/* ---------- 料金システム（/system） ---------- */
.sys-h2{
  margin:0 0 12px; font-size:1.05rem; font-weight:800; color:var(--ink);
  display:flex; align-items:center; gap:9px;
}
.sys-h2::before{content:""; width:5px; height:18px; border-radius:2px; background:var(--pink);}
.sys-note{font-size:.8rem; color:var(--muted); margin:12px 0 0;}
.sys-note strong{color:var(--pink-deep);}

.fee-list{margin:0; padding:0;}
.fee-list .fee{
  display:flex; gap:14px; align-items:baseline;
  padding:11px 0; border-bottom:1px dashed var(--line);
}
.fee-list .fee:last-child{border-bottom:0; padding-bottom:0;}
.fee-list dt{
  flex:none; width:88px; font-size:.85rem; font-weight:800; color:var(--pink-deep);
}
.fee-list dd{margin:0; min-width:0;}
.fee-list dd strong{display:block; font-size:1.02rem; font-weight:800;}
.fee-list dd span{display:block; font-size:.78rem; color:var(--muted); margin-top:2px;}

.flow{list-style:none; margin:0; padding:0; counter-reset:flow;}
.flow li{
  position:relative; padding:0 0 16px 40px; counter-increment:flow;
  font-size:.85rem; color:var(--ink-soft);
}
.flow li::before{
  content:counter(flow); position:absolute; left:0; top:1px;
  width:26px; height:26px; border-radius:50%; background:var(--pink); color:#fff;
  font-weight:800; font-size:.82rem; display:flex; align-items:center; justify-content:center;
}
.flow li::after{
  content:""; position:absolute; left:12.5px; top:30px; bottom:2px; width:1px; background:var(--line);
}
.flow li:last-child{padding-bottom:0;}
.flow li:last-child::after{display:none;}
.flow li strong{display:block; color:var(--ink); font-size:.95rem; margin-bottom:2px;}

/* ---------- フッター ---------- */
.site-foot{background:var(--ink); color:#c9b6bf; margin-top:34px; padding:26px 0 20px;}
.site-foot .fnav{list-style:none; margin:0 0 16px; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:6px 16px;}
.site-foot .fnav a{color:#fff; font-size:.8rem; font-weight:700;}
.site-foot .fline{text-align:center; margin-bottom:14px;}
.site-foot .copy{text-align:center; font-size:.72rem; color:#8b757e;}
/* ---------- スマホ下部の固定CTAバー ---------- */
.mobile-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  display:grid; grid-template-columns:1fr 1fr 1fr;
  background:var(--surface);
  box-shadow:0 -2px 12px rgba(34,27,34,.18);
  padding-bottom:env(safe-area-inset-bottom); /* iPhoneのホームバー分 */
}
.mobile-cta .mc{
  display:flex; align-items:center; justify-content:center; gap:6px;
  padding:8px 4px; min-height:52px; /* 指で押しやすい高さを確保 */
  font-size:.85rem; font-weight:800; line-height:1.2;
  white-space:nowrap;
}
.mobile-cta .mc:hover{text-decoration:none;}
.mobile-cta .mc svg{flex:none;}
.mobile-cta .mc-tel{background:#e23b30; color:#fff;}
.mobile-cta .mc-tel:active{background:#c62f26;}
.mobile-cta .mc-hours{
  background:var(--surface); color:var(--ink);
  border-left:1px solid var(--line); border-right:1px solid var(--line);
  font-size:.8rem;
}
.mobile-cta .mc-line{background:#06C755; color:#fff;}
.mobile-cta .mc-line:active{background:#05a948;}
/* 固定バーに最後のコンテンツが隠れないよう下に余白を作る */
body{padding-bottom:calc(60px + env(safe-area-inset-bottom));}

.pagetop{
  position:fixed; right:14px; bottom:calc(64px + env(safe-area-inset-bottom)); z-index:60;
  width:44px; height:44px; border-radius:50%; background:var(--pink); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800;
  box-shadow:var(--shadow);
}
.pagetop:hover{background:var(--pink-deep); text-decoration:none;}

/* ---------- 年齢認証 ---------- */
/* ---------- 年齢認証（/） ----------
   サイト本体は明るいピンク基調だが、入口だけは暗い高級寄りにして
   ENTER後の明るさとの落差を出している。 */
.age-body{
  min-height:100dvh; margin:0; display:flex; align-items:center; justify-content:center;
  background:#1b1319; padding:28px 16px; position:relative; overflow-x:hidden;
}
/* 背景の光（装飾） */
.age-glow{
  position:fixed; inset:0; pointer-events:none;
  background:
    radial-gradient(60% 45% at 50% 0%,   rgba(255,111,156,.30), transparent 70%),
    radial-gradient(55% 40% at 12% 100%, rgba(225,75,124,.22), transparent 70%),
    radial-gradient(50% 40% at 88% 92%,  rgba(255,212,94,.10), transparent 70%),
    linear-gradient(165deg,#2b1f26 0%,#3d2732 55%,#1b1319 100%);
}
.age-card{
  position:relative; width:100%; max-width:540px; text-align:center;
  background:rgba(38,27,34,.72);
  border:1px solid rgba(255,255,255,.10);
  border-radius:22px; padding:34px 24px 26px;
  box-shadow:0 24px 70px rgba(0,0,0,.55);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}

/* ブランド */
/* SGエンブレム。元画像は304×255の透過PNGなので、高さ基準で表示して比率を保つ */
.age-brand .mark{
  display:block; margin:0 auto; width:auto; height:74px;
  filter:drop-shadow(0 4px 14px rgba(0,0,0,.45));
}
.age-brand .name{
  display:block; margin-top:12px; font-size:1.75rem; font-weight:800;
  color:#fff; letter-spacing:.02em; line-height:1.25;
}
.age-brand .name em{font-style:normal; margin-left:.35em; color:#ffc9dc;}
.age-brand .sub{
  display:block; margin-top:6px; font-size:.66rem; font-weight:700;
  letter-spacing:.22em; color:#b79aa6;
}

.age-h1{
  margin:26px 0 0; font-size:.98rem; font-weight:800; color:#fff; line-height:1.6;
  padding-bottom:16px; border-bottom:1px solid rgba(255,255,255,.12);
}
.age-note{
  margin:16px 0 0; font-size:.8rem; line-height:1.85; color:#cbb4bf; text-align:left;
  background:rgba(0,0,0,.22); border-radius:12px; padding:13px 15px;
}
.age-note strong{color:#ff9ebc;}
.age-ask{margin:18px 0 14px; font-size:.95rem; font-weight:800; color:#fff;}

/* ボタン */
.age-btns{display:flex; flex-direction:column; gap:10px; align-items:stretch;}
.btn-enter{
  display:flex; align-items:center; justify-content:center; gap:12px; position:relative;
  background:linear-gradient(135deg,#ff6f9c,#e14b7c);
  color:#fff; padding:16px 22px; border-radius:999px;
  box-shadow:0 10px 26px rgba(225,75,124,.42);
}
.btn-enter:hover{text-decoration:none; filter:brightness(1.06);}
.btn-enter .en{font-size:1.15rem; font-weight:800; letter-spacing:.16em;}
.btn-enter .jp{font-size:.78rem; font-weight:700; opacity:.92;}
.btn-enter .arw{
  position:absolute; right:18px; width:26px; height:26px; border-radius:50%;
  background:rgba(255,255,255,.22); display:flex; align-items:center; justify-content:center;
  font-size:.9rem; line-height:1;
}
.btn-exit{
  display:block; padding:12px 20px; border-radius:999px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);
  color:#c3aab5; font-size:.86rem; font-weight:700;
}
.btn-exit:hover{text-decoration:none; background:rgba(255,255,255,.12);}

/* デリヘルタウンのバナー（加点対象のリンク） */
.age-portal{margin-top:24px; padding-top:18px; border-top:1px solid rgba(255,255,255,.12);}
.age-portal .cap{
  margin:0 0 10px; font-size:.68rem; font-weight:700; letter-spacing:.14em; color:#9b8290;
}
.age-portal .portal-btn{
  display:block; max-width:340px; margin:0 auto; border-radius:10px; overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,.4);
}
.age-portal .portal-btn:hover{text-decoration:none; filter:brightness(1.05);}
.age-portal .portal-btn img{width:100%; height:auto; display:block;}

.age-foot{margin:22px 0 0; font-size:.66rem; color:#7d6773;}

@media (min-width:768px){
  .age-card{padding:44px 40px 32px;}
  .age-brand .mark{height:92px;}
  .age-brand .name{font-size:2.1rem;}
  .age-h1{font-size:1.08rem;}
  .age-note{font-size:.85rem;}
  .age-btns{flex-direction:row; justify-content:center; align-items:center;}
  .btn-enter{flex:1 1 auto; max-width:330px; padding:18px 26px;}
  .btn-exit{flex:0 0 auto;}
}

/* ---------- 新着情報一覧（/newslist） ---------- */
.post-list{display:flex; flex-direction:column; gap:14px;}
.post{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:16px 16px 18px;
}
.post .p-meta{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.post .p-date{font-size:.78rem; font-weight:800; color:var(--muted); letter-spacing:.04em;}
.post .p-cat{
  font-size:.7rem; font-weight:800; letter-spacing:.06em; color:#fff;
  padding:3px 10px; border-radius:999px; background:var(--muted);
}
.post .p-cat.is-event{background:var(--pink);}
.post .p-cat.is-cast{background:#00b294;}
.post .p-ttl{
  margin:8px 0 0; font-size:1.02rem; font-weight:800; line-height:1.5; color:var(--ink);
  padding-bottom:10px; border-bottom:1px solid var(--line);
}
.post .p-body{margin-top:10px; font-size:.88rem; color:var(--ink-soft);}
.post .p-body p{margin:0 0 .7em;}
.post .p-body p:last-child{margin-bottom:0;}
.post .p-body strong{color:var(--ink);}
.post .p-links{display:flex; flex-wrap:wrap; gap:8px 16px; font-weight:700; font-size:.85rem;}

/* ---------- お問い合わせ（/contact） ---------- */
.lead-txt{font-size:.9rem; color:var(--ink-soft); margin:0 0 18px; text-align:center;}
.lead-txt strong{color:var(--pink-deep);}
.contact-grid{display:grid; grid-template-columns:1fr; gap:12px; margin-bottom:22px;}
.contact-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:18px 16px 20px; text-align:center;
  border-top:4px solid var(--pink);
}
.contact-card.is-line{border-top-color:#06C755;}
.contact-card.is-web{border-top-color:#f93aa6;}
.contact-card .cc-en{font-size:.72rem; font-weight:800; letter-spacing:.16em; color:var(--muted);}
.contact-card .cc-ttl{font-size:1rem; font-weight:800; color:var(--ink); margin-top:2px;}
.contact-card .cc-tel{
  display:block; font-size:1.9rem; font-weight:800; letter-spacing:.02em;
  color:var(--pink-deep); margin:8px 0 2px;
}
.contact-card .cc-tel:hover{text-decoration:none; color:var(--pink);}
.contact-card .cc-btn{margin:12px auto 4px; justify-content:center;}
.contact-card .cc-hours{font-size:.78rem; font-weight:700; color:var(--muted);}
.contact-card .cc-note{font-size:.8rem; color:var(--ink-soft); margin:10px 0 0; text-align:left;}

/* ---------- FAQ ---------- */
.faq{margin-top:14px; border-top:1px solid var(--line);}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{
  list-style:none; cursor:pointer; padding:13px 28px 13px 26px; position:relative;
  font-weight:800; font-size:.92rem; color:var(--ink); line-height:1.6;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::before{
  content:"Q"; position:absolute; left:0; top:12px;
  color:var(--pink); font-weight:800; font-size:.95rem;
}
.faq summary::after{
  content:"＋"; position:absolute; right:2px; top:12px; color:var(--pink); font-weight:800;
}
.faq details[open] summary::after{content:"−";}
.faq .faq-a{
  padding:0 4px 15px 26px; font-size:.86rem; color:var(--ink-soft); position:relative;
}
.faq .faq-a::before{
  content:"A"; position:absolute; left:0; top:0; color:var(--muted); font-weight:800; font-size:.95rem;
}

/* ---------- 左右の縦帯バナー（サイドストリップ） ----------
   シティヘブンなどの壁紙バナーと同じ位置づけ。広いモニターの余白を使う。

   【加点への影響はゼロ】position:fixed で本文の流れの外に出しているので、
   ウィジェットの位置（900pxライン）を1pxも動かさない。
   バナー本体を縦に伸ばす案と違って、ここは安全に足せる。

   【配置の基準は「画面の端」ではなく「コンテンツの端」】
   画面の端に貼ると本文との間が空いて、帯が浮いて見える（シティヘブン等は本文にぴったり付けている）。
   そのため left/right を calc(50% - コンテンツ半分 - 帯幅 - すき間) で指定している。
     コンテンツ幅 = 1320px（ヒーローバナーの上限。.page-grid もこれに揃えてある）→ 半分 660px
     帯 250px ＋ すき間 0（バナーにぴったり付ける）

   【表示条件】必要な画面幅 = 1320 + 250×2 = 1820px
   → 1920pxのモニターでは出る。1600pxのノートPCでは出ない（自動で隠れる）。
   ヒーローの max-width か .page-grid の幅を変えたら、660px と このブレークポイントを
   両方とも計算し直すこと。 */
.side-strip{display:none;}
@media (min-width:1820px){
  /* 【position は absolute。fixed に戻さないこと】
     fixed だとスクロール中ずっと画面に貼り付いて一緒に動き、違和感が出る（2026-08-02 ユーザー判断）。
     absolute なのでページに固定され、スクロールすると普通に流れて消える。

     top:118px はグローバルナビ（〜138px）の下に20px潜り込ませるための値。
     ナビに z-index:50 が付いているので、この20pxはバーに隠れる。
     結果、帯の見た目上の上端がヒーローバナーの上端（138px）とぴったり揃う。 */
  .side-strip{
    display:block; position:absolute; top:118px; width:250px; z-index:20;
  }
  .side-strip.is-left{left:calc(50% - 660px - 250px);}
  .side-strip.is-right{right:calc(50% - 660px - 250px);}
  .side-strip a{
    display:block; border-radius:10px; overflow:hidden;
    box-shadow:0 6px 24px rgba(43,31,38,.18);
  }
  .side-strip a:hover{text-decoration:none; opacity:.92;}
  /* 素材は 250×1600 の縦長。上端118px＋1600px＝下端1718pxで、
     ちょうど NEWS & EVENT セクションの手前（1724px）まで届く長さ。
     ページに固定されているので画面の高さで切れることはない。 */
  .side-strip img{width:100%; height:auto;}
}

/* ---------- 求人（/recruit） ---------- */
.rc-hero{
  background:linear-gradient(150deg,#2b1f26,#5d3346 55%,#8d3f61);
  color:#fff; border-radius:var(--radius); padding:26px 18px 24px; text-align:center;
  box-shadow:var(--shadow); margin-bottom:20px;
}
.rc-eyebrow{margin:0; font-size:.76rem; font-weight:700; letter-spacing:.08em; color:#ffc9dc;}
.rc-h1{margin:8px 0 0; font-size:1.5rem; font-weight:800; line-height:1.4; letter-spacing:.02em;}
.rc-h1 strong{display:inline-block; font-size:2.5rem; color:#ffd45e; letter-spacing:.01em;}
.rc-sub{margin:12px 0 0; font-size:.86rem; font-weight:700; color:#ffe3ec;}
.rc-cta{display:flex; flex-direction:column; gap:10px; margin-top:18px;}
.rc-cta a{justify-content:center; text-align:center;}
.rc-line{font-size:1rem; padding:13px 22px;}
.rc-note{margin:12px 0 0; font-size:.78rem; color:#e0c6d2;}

.rc-lead{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:16px 16px 18px; margin-bottom:24px;
}
.rc-lead p{margin:0; font-size:.88rem; color:var(--ink-soft);}
.rc-lead strong{color:var(--pink-deep);}

.rc-cards{display:grid; grid-template-columns:1fr; gap:12px; margin-bottom:24px;}
.rc-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:16px 16px 18px; position:relative;
}
.rc-card .rc-num{
  font-size:.72rem; font-weight:800; letter-spacing:.12em; color:#fff;
  background:var(--pink); display:inline-block; padding:2px 10px; border-radius:999px;
}
.rc-card h3{margin:9px 0 6px; font-size:1rem; font-weight:800; color:var(--ink); line-height:1.5;}
.rc-card p{margin:0; font-size:.85rem; color:var(--ink-soft);}

.rc-guarantee{
  background:#fff2f5; border:2px solid var(--pink); border-radius:var(--radius);
  padding:16px; text-align:center; margin-bottom:18px;
}
.rc-guarantee .rg-label{font-size:.8rem; font-weight:800; letter-spacing:.1em; color:var(--pink-deep);}
.rc-guarantee .rg-amount{font-size:2.4rem; font-weight:800; color:#cc0000; line-height:1.2; margin-top:2px;}
.rc-guarantee .rg-amount span{font-size:1.1rem; margin-left:2px;}
.rc-guarantee .rg-note{margin:8px 0 0; font-size:.8rem; color:var(--ink-soft);}
.rc-guarantee .rg-note strong{color:var(--ink);}

.rc-list{list-style:none; margin:14px 0 0; padding:0;}
.rc-list li{
  font-size:.85rem; color:var(--ink-soft); padding:12px 0 12px 26px;
  border-bottom:1px solid var(--line); position:relative;
}
.rc-list li:last-child{border-bottom:0; padding-bottom:0;}
.rc-list li::before{
  content:"✓"; position:absolute; left:0; top:11px;
  color:var(--pink); font-weight:800; font-size:1rem;
}
.rc-list li strong{display:block; color:var(--ink); font-size:.95rem; margin-bottom:2px;}

.rc-apply{
  background:var(--ink); color:#fff; border-radius:var(--radius);
  padding:24px 18px 26px; text-align:center;
}
.rc-apply .ra-lead{margin:0 0 16px; font-size:.95rem; font-weight:700; color:#ffc9dc;}
.rc-apply .rc-line{display:inline-flex;}
.rc-apply .ra-or{font-size:.76rem; color:#9c848f; margin:14px 0 8px; font-weight:700;}
.rc-apply .ra-tel{display:block; font-size:2rem; font-weight:800; color:#fff; letter-spacing:.02em;}
.rc-apply .ra-tel:hover{color:var(--pink); text-decoration:none;}
.rc-apply .ra-hours{font-size:.78rem; color:#c9b6bf; margin-top:2px;}
.rc-apply .ra-note{margin:16px 0 0; font-size:.74rem; color:#a8919b; line-height:1.8;}

/* ---------- 404ページ（/404.html） ----------
   カード3枚は /contact の .contact-grid をそのまま流用しているので、
   ここで足しているのは「404」の数字と、下のリンク一覧だけ。 */
.err-code{
  text-align:center; font-size:4.2rem; font-weight:800; line-height:1;
  color:var(--pink-soft); letter-spacing:.06em; margin:4px 0 2px;
}
.err-links{text-align:center;}
.err-links-ttl{
  font-size:.76rem; font-weight:800; letter-spacing:.12em;
  color:var(--muted); margin-bottom:10px;
}
.err-links ul{
  list-style:none; padding:0; margin:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px 18px;
}
.err-links a{font-size:.88rem; font-weight:700;}

/* ---------- PC ---------- */
@media (min-width:768px){
  body{font-size:16px;}
  .wrap{padding:0 20px;}
  .brand .logo{font-size:1.25rem;}
  .brand .logo small{font-size:.62rem; letter-spacing:.08em;}
  .brand{margin-right:0;}
  .head-inner{padding:12px 20px; gap:14px;}
  /* PCは従来どおり横並びナビ。ハンバーガー・ドロワーは出さない */
  .gnav{display:block;}
  .nav-toggle{display:none;}
  .nav-drawer, .nav-overlay{display:none !important;}
  .head-contact .hours, .head-contact .line-btn{display:inline-flex;}
  .head-contact .hours{display:inline;}
  .head-contact .tel-btn{font-size:.95rem; padding:7px 14px;}
  /* 下部固定バーはスマホ専用 */
  .mobile-cta{display:none;}
  body{padding-bottom:0;}
  .pagetop{bottom:14px;}
  /* --- トップページ：現行サイトと同じ2カラム ---
     左サイドバー(260px) = 写メ日記（幅が細いのでウィジェットが縦1列になる）
     右カラム            = 待機情報（幅が広いので横並びになる）＋ ページ本文
     DOM順は 待機情報 → 写メ日記 → main のまま。左右の入れ替えはここで行っている。 */
  .page-grid{
    display:grid; grid-template-columns:260px minmax(0,1fr); grid-template-rows:auto 1fr; gap:16px;
    align-items:start; margin:0 auto; padding:18px 20px 0;
    /* トップだけ 1320px。ヒーローバナーの上限と揃えることで、
       左右の縦帯（.side-strip）がバナーにも本文にも同じ位置で接する。
       他ページの .wrap は 1080px のまま（長文の行が長くなりすぎないように）。
       この値を変えたら .side-strip の calc(50% - 660px - …) も直すこと。 */
    max-width:1320px;
  }
  .page-grid > .is-standby{grid-column:2; grid-row:1;}
  .page-grid > .is-diary{grid-column:1; grid-row:1 / span 2;}
  .page-grid > .page-main{grid-column:2; grid-row:2; min-width:0;}
  /* 右カラムの中はもう内側に余白があるので、セクションの左右padding/最大幅は殺す */
  .page-main .wrap{padding:0; max-width:none;}
  /* 1320px を出しきれる画面では .page-grid の左右paddingを外す。
     こうすると 写メ日記の左端＝ヒーローバナーの左端、待機情報の右端＝バナーの右端 で一直線に揃い、
     さらに左右の縦帯もその外側にぴったり接する。
     1360px未満では padding 20px を残す（画面端に貼り付いてしまうため）。 */
  @media (min-width:1360px){
    .page-grid{padding-left:0; padding-right:0;}
  }
  .page-main .sec{padding:26px 0;}
  .page-main .sec:first-child{padding-top:20px;}

  .widget-zone{display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:18px 0 6px;
    max-width:var(--wrap); margin:0 auto; padding-left:20px; padding-right:20px;}
  .widget-box{margin-bottom:0;}
  .sec{padding:34px 0;}
  .sec-head .en{font-size:1.85rem;}
  /* PICK UP は4枠固定。PCは4列×1行、スマホ（既定）は2列×2行でどちらもぴったり埋まる。
     3列に戻すと、4枠のうち1枚がPCで取り残される。 */
  .pickup-grid{grid-template-columns:repeat(4,1fr); gap:16px;}
  .ev-index{grid-template-columns:repeat(4,1fr);}
  .event .ev-body{padding:24px 28px;}
  .ev-off{font-size:2rem;}
  .price-table{font-size:.95rem;}
  .portal-links{grid-template-columns:repeat(4,1fr);}
  .cta .tel-big{font-size:2.6rem;}
  .headline p{font-size:1.12rem;}
  .post{padding:20px 24px 22px;}
  .post .p-ttl{font-size:1.15rem;}
  .post .p-body{font-size:.92rem;}
  .contact-grid{grid-template-columns:repeat(3,1fr);}
  .contact-card{display:flex; flex-direction:column;}
  .contact-card .cc-note{margin-top:auto; padding-top:10px;}
  .contact-card .cc-tel{font-size:1.7rem;}
  .lead-txt{font-size:.95rem;}
  .faq summary{font-size:.98rem;}
  .faq .faq-a{font-size:.9rem;}
  .rc-hero{padding:40px 30px 36px;}
  .rc-h1{font-size:2rem;}
  .rc-h1 strong{font-size:3.6rem;}
  .rc-sub{font-size:1rem;}
  .rc-cta{flex-direction:row; justify-content:center;}
  .rc-lead p{font-size:.95rem;}
  .rc-cards{grid-template-columns:repeat(3,1fr);}
  .rc-guarantee .rg-amount{font-size:3.2rem;}
  .rc-apply{padding:34px 30px 36px;}
  .rc-apply .ra-tel{font-size:2.6rem;}
}