@charset "utf-8";
/* =========================================================================
   common.css — 風俗売上.com 全ページ共通スタイル
   （色変数 / タイポgrafi / ヘッダー / SPドロワー / パンくず /
     CTA赤帯 / フッター / 共通ボタン・部品）
   ページ固有のスタイルは各ページCSS（index.css 等）に記述する。
   ========================================================================= */

/* ============ 変数 ============ */
:root{
  --red:#f8274f;
  --black:#000;
  --cream:#EFEDE6;
  --white:#FFFFFF;
  --ink:#0b0b0b;
  --jp:"M PLUS 1p", system-ui, sans-serif;
  --en:"Barlow Condensed", "M PLUS 1p", sans-serif;
  --mono:"Space Mono", ui-monospace, monospace;
  --header-h:60px;
  /* サイト全体の基準線。box-sizing:border-box のため max-width は左右gutterを含む。
     実コンテンツ幅を 1400px に保つため maxw = 1400 + 左右gutter(56×2) = 1512px とする。 */
  --gutter:clamp(20px, 3.8vw, 56px);
  --maxw:1512px;   /* = コンテンツ1400 + gutter56×2。大画面で実幅1400pxを確保 */
}

/* ============ リセット / ベース ============ */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--jp);
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
::selection{background:var(--red);color:#fff}

/* 共通コンテナ＝サイト全体の基準線。ヘッダー〜フッターまで全コンテンツがこれを使う。
   背景帯は全幅、内側コンテンツだけがこの幅・この左右gutterに揃う。 */
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }

/* 行長制御ユーティリティ（長文ブロック用）。
   外枠の基準線（左右gutter）内で、ブロックの行長(幅)だけを絞ってセンター寄せにする。
   使い方: 要素に .read を付け、--read に行長を指定（例: FAQ=1100px / 記事本文=780px）。 */
.read{
  width: min(var(--read, var(--maxw)), calc(100% - 2 * var(--gutter)));
  margin-inline: auto;
}

/* ============ 共通：見出しラベル ============ */
.eyebrow{
  font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:currentColor; opacity:.7;
  display:inline-flex; align-items:center; gap:10px;
}
.eyebrow::before{
  content:""; width:24px; height:1.5px; background:currentColor; display:inline-block;
}
.eyebrow--light{ color:#fff; opacity:1 }

/* ============ 共通：CTAボタン ============ */
.cta{
  display:inline-flex; align-items:center; gap:14px;
  background:#fff; color:var(--red);
  font-family:var(--jp); font-weight:900; font-size:18px;
  padding:20px 28px;
  border:2px solid #000;
  box-shadow: 6px 6px 0 #000;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  cursor:pointer;
}
.cta .arrow{
  display:inline-block; transition: transform .25s ease;
  font-family:var(--en); font-weight:800;
}
.cta:hover{
  background:#000; color:#fff;
  transform: translate(2px,2px);
  box-shadow: 2px 2px 0 #000;
}
.cta:hover .arrow{ transform: translateX(6px); }
.cta:active{ transform: translate(6px,6px); box-shadow: 0 0 0 #000; }
.cta--lg{ font-size:22px; padding:24px 36px; }

/* ============ HEADER ============ */
.header{
  position:sticky; top:0; z-index:50;
  background:var(--red); color:#fff;
  border-bottom:2px solid #000;
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px var(--gutter);
  max-width:var(--maxw); margin-inline:auto;
}
.logo{
  font-family:var(--jp); font-weight:900; font-size:22px; letter-spacing:-0.01em;
  color:#fff;
}
.logo .dot{color:#000}
.nav{
  display:flex; align-items:center; gap:28px;
  font-family:var(--en); font-weight:700; font-size:17px; letter-spacing:.04em;
}
.nav-links{ display:flex; gap:28px; align-items:center; }
.nav a{
  position:relative; padding:6px 0; text-transform:uppercase;
}
.nav .nav-links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:2px; background:#fff;
  transition:right .25s ease;
}
.nav .nav-links a:hover::after,
.nav .nav-links a[aria-current="page"]::after{ right:0; }
.nav .tel{
  font-family:var(--en); font-weight:800; font-size:18px;
  border:2px solid #fff; padding:6px 12px; border-radius:2px;
  display:inline-flex; align-items:center; gap:6px;
  transition:background .15s ease, color .15s ease;
}
.nav .tel:hover{ background:#fff; color:var(--red); }
.nav .tel .label{font-size:10px; letter-spacing:.1em; opacity:.8}

/* モバイル用ヘッダーアクション（電話アイコン＋ハンバーガー）：PCでは非表示 */
.head-actions{ display:none; align-items:center; gap:10px; }
.tel-mini{
  width:44px; height:44px;
  display:inline-flex; align-items:center; justify-content:center;
  border:2px solid #fff; padding:0; color:#fff;
}
.tel-mini svg{ width:20px; height:20px; display:block; fill:currentColor }
.burger{
  width:44px; height:44px; padding:0; cursor:pointer;
  background:#000; border:2px solid #000; color:#fff;
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.burger span{ display:block; width:20px; height:2.5px; background:#fff; transition:transform .25s ease, opacity .2s ease }

/* ============ フルスクリーンメニュー（SPドロワー） ============ */
.menu{
  position:fixed; inset:0; z-index:100;
  background:var(--red); color:#fff;
  display:flex; flex-direction:column;
  transform:translateY(-100%);
  transition:transform .42s cubic-bezier(.7,0,.2,1);
  overflow-y:auto; overflow-x:hidden;
  visibility:hidden;
}
body.menu-open .menu{ transform:translateY(0); visibility:visible }
body.menu-open{ overflow:hidden }
.menu-top{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; border-bottom:2px solid #000;
  position:sticky; top:0; background:var(--red); z-index:2;
}
.menu-top .logo{ color:#fff }
.menu-close{
  width:44px; height:44px; cursor:pointer;
  background:#000; border:2px solid #000; color:#fff;
  font-family:var(--en); font-weight:800; font-size:26px; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
}
.menu-watermark{
  position:absolute; right:-6%; top:30%;
  font-family:var(--en); font-weight:900; font-size:200px; line-height:.8;
  letter-spacing:-0.03em; color:rgba(0,0,0,0.10);
  pointer-events:none; user-select:none;
}
.menu-nav{ position:relative; z-index:1; padding:8px 18px 0 }
.menu-nav a{
  display:flex; align-items:center; gap:16px;
  padding:22px 4px; border-bottom:2px solid rgba(0,0,0,0.85);
  transition:padding-left .2s ease;
}
.menu-nav a:active{ padding-left:18px }
.menu-nav .m-no{ font-family:var(--en); font-weight:800; font-size:13px; letter-spacing:.1em; color:#000; min-width:30px }
.menu-nav .m-text{ display:flex; flex-direction:column; gap:2px; flex:1 }
.menu-nav .m-en{ font-family:var(--en); font-weight:800; font-size:11px; letter-spacing:.18em; opacity:.7 }
.menu-nav .m-jp{ font-family:var(--jp); font-weight:900; font-size:24px; letter-spacing:-0.02em; line-height:1.1 }
.menu-nav .m-arrow{ font-family:var(--en); font-weight:800; font-size:22px }
.menu-foot{ position:relative; z-index:1; padding:28px 18px 40px; margin-top:auto }
.menu-tel{
  display:flex; flex-direction:column; gap:4px;
  background:#000; color:#fff; border:2px solid #000;
  padding:20px 22px; margin-bottom:20px;
  text-decoration:none; -webkit-tap-highlight-color:rgba(248,39,79,0.3);
}
.menu-tel:active{ background:#1a1a1a }
.menu-tel .lbl{ font-family:var(--mono); font-size:11px; letter-spacing:.15em; opacity:.7 }
.menu-tel .num{ font-family:var(--en); font-weight:900; font-size:34px; letter-spacing:-0.01em; line-height:1 }
.menu-tel .hours{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; opacity:.7; margin-top:4px }
.menu-cta{
  display:flex; align-items:center; justify-content:center; gap:12px;
  background:#fff; color:var(--red); border:2px solid #000;
  font-family:var(--jp); font-weight:900; font-size:18px;
  padding:18px; box-shadow:5px 5px 0 #000;
}
.menu-cta .arrow{ font-family:var(--en); font-weight:800 }
/* SNS行は M PLUS 1p（等幅Space Monoだと「@」が小サイズで「a」に見えるため） */
.menu-sns{ display:flex; gap:20px; margin-top:24px; font-family:var(--jp); font-weight:700; font-size:12px; letter-spacing:.06em; opacity:.85 }

/* ============ パンくず（全サブページ共通・黒帯） ============ */
.breadcrumb{ background:#000; color:#fff; border-bottom:1px solid rgba(255,255,255,0.12) }
.breadcrumb .inner{ max-width:var(--maxw); margin-inline:auto; padding:16px var(--gutter) }
.breadcrumb ol{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  font-family:var(--mono); font-size:12px; letter-spacing:.08em; color:#fff;
}
.breadcrumb li{ display:inline-flex; align-items:center; gap:6px }
.breadcrumb li:not(:last-child)::after{ content:"/"; opacity:.4; margin-left:6px }
.breadcrumb a{ opacity:.7; transition:opacity .15s, color .15s }
.breadcrumb a:hover{ opacity:1; color:var(--red) }
.breadcrumb li:last-child span{ font-weight:700; color:var(--red) }

/* ============ ページヒーロー：背景の英字透かし（全ページ共通） ============
   各ページCSSで重複させず、ここで一元管理。文言（NEWS / FAQ 等）は各HTML側で指定。
   位置・サイズの調整はこの2ブロックだけを触れば全ページに反映される。 */
.phero-watermark,
.article-head-bg{
  position:absolute; left:-3%; top:-15%;
  font-family:var(--en); font-weight:900; font-size:clamp(180px,24vw,420px);
  color:rgba(0,0,0,0.05); line-height:.85; letter-spacing:-0.04em;
  pointer-events:none; user-select:none; white-space:nowrap;
}

/* ============ CTA赤帯（CONTACT・全ページ共通） ============ */
.contact{
  background:var(--red); color:#fff;
  padding: 140px 0;            /* 背景は全幅・縦paddingのみ。左右は内側コンテナのgutterで */
  border-top:2px solid #000;
  position:relative; overflow:hidden;
}
.contact-inner{
  max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter);
  /* 見出し列は余白を全取り、CTA列は中身ぶんに縮める（見出しの早期折返し防止） */
  display:grid; grid-template-columns: 1fr auto;
  gap:48px; align-items:center;
  position:relative; z-index:1;
}
.contact h2{
  font-family:var(--jp); font-weight:900;
  font-size:clamp(56px, 9vw, 160px);
  line-height:.9; letter-spacing:-0.04em;
  margin:16px 0 0;
  text-shadow: 5px 5px 0 #000;
  white-space:nowrap;   /* 「お問い合わせ」を1行に固定（短い固定文字列のため安全） */
}
.contact .en{
  font-family:var(--en); font-weight:900;
  font-size:clamp(80px, 12vw, 200px); letter-spacing:-0.02em;
  line-height:.85; margin:0; opacity:.95;
}
.contact-right{
  display:flex; flex-direction:column; gap:20px; align-items:flex-start;
}
.contact-right p{ font-size:18px; line-height:1.7; max-width:30ch; margin:0 }
/* tel-lineは1行で表示（.contact-right p の max-width:30ch を継承させない） */
.contact .tel-line{ font-family:var(--mono); font-size:12px; letter-spacing:.1em; opacity:.85; margin-top:8px; max-width:none; white-space:nowrap }
.contact-bg{
  position:absolute; right:-4%; top:-8%;
  font-family:var(--en); font-weight:900; font-size:clamp(280px, 38vw, 600px);
  letter-spacing:-0.04em; line-height:.85;
  color:rgba(0,0,0,0.12); pointer-events:none; white-space:nowrap;
}

/* ============ FOOTER ============ */
footer{
  background:#000; color:#fff;
  padding: 80px 0 32px;        /* 背景は全幅・縦paddingのみ */
  position:relative;
}
.foot-grid{
  max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter);
  display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:48px;
}
.foot-brand .logo{ font-size:24px; color:#fff }
.foot-brand .logo .dot{ color:var(--red) }
.foot-brand p{ font-size:13px; line-height:1.8; opacity:.7; margin:18px 0 0; max-width:32ch }
.foot-col h4{
  font-family:var(--en); font-weight:800; letter-spacing:.15em; font-size:13px;
  margin:0 0 18px; text-transform:uppercase; opacity:.6;
}
.foot-col ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px }
.foot-col a{ font-size:14px; opacity:.9 }
.foot-col a:hover{ color:var(--red) }
.foot-bottom{
  max-width:var(--maxw); margin:80px auto 0;
  border-top:1px solid rgba(255,255,255,0.15);
  padding:24px var(--gutter) 0;
  display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap;
  font-family:var(--mono); font-size:12px; letter-spacing:.08em;
  opacity:.7;
}
.gotop{
  position:absolute; right:var(--gutter); bottom:88px;   /* foot-bottom（区切り線・コピーライト行）と重ならないよう上に逃がす */
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.gotop img{ height:120px; width:auto; filter: drop-shadow(0 4px 0 rgba(255,255,255,0.08)); }
.gotop a{
  font-family:var(--en); font-weight:800; font-size:14px; letter-spacing:.15em;
  border:2px solid #fff; padding:8px 14px;
  transition:background .15s, color .15s;
}
.gotop a:hover{ background:#fff; color:#000 }

/* =========================================================================
   レスポンシブ（≤960px：ナビをハンバーガーへ、グリッドを1カラムへ）
   モバイル最適値は design-source の SP 版を参照
   ========================================================================= */
/* CTA赤帯：2カラムが窮屈になる中desktop帯では1カラムへ（見出しを確実に1行に） */
@media (max-width: 1080px){
  .contact-inner{ grid-template-columns: 1fr; }
}

@media (max-width: 960px){
  /* ヘッダー：PCナビを隠してハンバーガー表示（横paddingは共通gutterに任せる） */
  .header-inner{ padding-block:14px }
  .logo{ font-size:19px }
  .nav{ display:none }
  .head-actions{ display:flex }
  .eyebrow{ font-size:11px }

  /* パンくず（横paddingは共通gutter／SPは折り返さず横スクロール・省略なし／文字はSP 11px） */
  .breadcrumb .inner{ padding-block:12px }
  .breadcrumb ol{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; font-size:11px }
  .breadcrumb ol::-webkit-scrollbar{ display:none }
  .breadcrumb li{ flex-shrink:0; white-space:nowrap }

  /* ページヒーロー透かし：SPは上に寄せて隙間を解消 */
  .phero-watermark,
  .article-head-bg{ top:-10% }

  /* CTA赤帯 */
  .contact{ padding:80px 0 }
  .contact-inner{ grid-template-columns:1fr; gap:20px }
  .contact h2{ font-size:46px; line-height:.95; text-shadow:4px 4px 0 #000; margin:6px 0 0 }
  .contact .en{ font-size:64px }
  .contact-right p{ font-size:16px; max-width:none }
  .contact .cta, .contact .cta--lg{ width:100%; justify-content:center; font-size:18px; padding:18px }
  .contact-bg{ left:50%; right:auto; transform:translateX(-50%); top:24px; font-size:24vw }

  /* フッター */
  footer{ padding:64px 0 28px }
  .foot-grid{ grid-template-columns:1fr; gap:0 }
  .foot-brand{ margin-bottom:24px }
  .foot-brand .logo{ font-size:22px }
  .foot-brand p{ margin:16px 0 32px; max-width:none }
  .foot-col{ margin:32px 0 0 }
  .foot-col h4{ font-size:12px; margin:0 0 10px }
  .foot-col ul{ gap:0 }
  .foot-col a{ font-size:15px; display:flex; align-items:center; min-height:48px; padding:10px 0; border-bottom:1px solid rgba(255,255,255,0.1) }
  .foot-col li:last-child a{ border-bottom:none }
  .gotop{ position:static; flex-direction:row; align-items:center; gap:16px; margin:8px 0 8px }
  .gotop a{ font-size:13px }
  .gotop img{ height:90px }
  .foot-bottom{ margin-top:24px; flex-direction:column; align-items:flex-start; gap:8px; font-size:11px }
}

/* 大画面でのボタン縮小調整 */
@media (max-width: 560px){
  .cta{ font-size:17px; padding:18px 24px; box-shadow:5px 5px 0 #000 }
}