/* ============================================================
   わがままHP LP専用スタイル（/wagamama-hp/）
   既存site.cssの上に読み込む。クラスはすべて wg- プレフィックス。
   トーン: 紺×ティール×ゴールド（安心・技術・信頼）
   ============================================================ */
.wg-main { background:#fff; color:#15202e; line-height:1.85; }
.wg-main .container { max-width:1120px; margin:0 auto; padding:0 20px; }
.wg-section { padding:76px 0; }
.wg-section h2 { font-size:clamp(24px,3.4vw,36px); line-height:1.4; margin:0 0 18px; font-weight:800; }
.wg-section-label { font-size:13px; font-weight:700; letter-spacing:.2em; color:#0b7285; margin:0 0 10px; }
.wg-label-light { color:#7fd6e8; }
.wg-section-lead { max-width:820px; margin:0 0 34px; color:#44505f; font-size:15.5px; }
.wg-lead-light { color:#c3d2e2; }
.wg-pc-br { display:inline; } .wg-sp-br { display:none; }

.wg-icon { width:22px; height:22px; flex:none; vertical-align:-4px; }

/* ---------- ボタン ---------- */
.wg-btn { display:inline-block; text-align:center; font-weight:800; border-radius:10px; padding:16px 34px; font-size:16.5px; text-decoration:none; cursor:pointer; border:none; transition:transform .12s ease, box-shadow .12s ease; }
.wg-btn:hover { transform:translateY(-2px); }
.wg-btn-primary { background:linear-gradient(135deg,#f59f00,#e8590c); color:#fff; box-shadow:0 6px 18px rgba(232,89,12,.32); }
.wg-btn-ghost { background:rgba(255,255,255,.12); color:#fff; border:2px solid rgba(255,255,255,.75); }
.wg-btn-outline { background:#fff; color:#0b3a5e; border:2px solid #0b3a5e; }
.wg-btn-lg { font-size:18px; padding:19px 42px; }

/* ---------- ① ヒーロー ---------- */
.wg-hero { position:relative; color:#fff; overflow:hidden; background:#0a1626; }
.wg-hero-bg { position:absolute; inset:0; }
.wg-hero-bg img { width:100%; height:100%; object-fit:cover; object-position:center; opacity:.55; }
.wg-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(100deg,rgba(6,15,28,.92) 0%,rgba(6,15,28,.78) 45%,rgba(6,15,28,.3) 100%); }
.wg-hero-inner { position:relative; z-index:2; padding:92px 20px 88px; }
.wg-hero-badges { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px; }
.wg-badge { display:inline-block; font-size:12.5px; font-weight:700; padding:6px 14px; border-radius:999px; background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.38); }
.wg-badge-strong { background:#0b7285; border-color:#15aabf; }
.wg-hero-title { font-size:clamp(34px,5.6vw,58px); line-height:1.22; font-weight:900; margin:0 0 20px; letter-spacing:.01em; }
.wg-hero-lead { font-size:clamp(15px,1.8vw,18px); max-width:720px; margin:0 0 24px; color:#dbe7f3; }
.wg-hero-points { display:flex; flex-wrap:wrap; gap:10px 26px; margin:0 0 30px; font-size:14.5px; font-weight:700; }
.wg-hero-points span { display:inline-flex; align-items:center; gap:7px; }
.wg-hero-points .wg-icon { color:#63e6be; }
.wg-hero-cta { display:flex; flex-wrap:wrap; gap:14px; margin:0 0 18px; }
.wg-hero-mail { font-size:13.5px; color:#9fb3c8; }
.wg-hero-mail a { color:#7fd6e8; font-weight:700; }

/* ---------- ② FACT ---------- */
.wg-facts { background:#f4f7fa; }
.wg-facts-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.wg-fact-card { background:#fff; border-radius:14px; padding:28px 26px; border:1px solid #e3e9f0; box-shadow:0 2px 10px rgba(16,35,60,.05); }
.wg-fact-card h3 { font-size:17px; line-height:1.5; margin:0 0 12px; display:flex; gap:10px; align-items:flex-start; }
.wg-fact-card h3 .wg-icon { color:#0b7285; width:26px; height:26px; margin-top:2px; }
.wg-fact-card p { font-size:14px; color:#44505f; margin:0 0 10px; }
.wg-fact-src { font-size:12.5px; color:#68737f; }
.wg-fact-src a { color:#0754b8; }

/* ---------- ③ CONCEPT ---------- */
.wg-concept { background:linear-gradient(160deg,#0a1626,#0d2238 60%,#0c2f45); color:#fff; }
.wg-concept-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.wg-concept-card { background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.14); border-radius:14px; padding:30px 26px; }
.wg-concept-icon { width:38px; height:38px; color:#7fd6e8; margin-bottom:14px; }
.wg-concept-card h3 { font-size:19px; margin:0 0 10px; }
.wg-concept-card p { font-size:14.2px; color:#c3d2e2; margin:0; }

/* ---------- ④ MENU ---------- */
.wg-live-sample em { font-style:normal; background:#0b7285; color:#fff; font-size:11.5px; font-weight:700; border-radius:4px; padding:2px 8px; margin:0 2px; }
.wg-menu-group { margin:0 0 46px; }
.wg-menu-group-title { display:flex; align-items:center; gap:12px; font-size:clamp(19px,2.4vw,24px); font-weight:800; margin:0 0 8px; padding:0 0 10px; border-bottom:3px solid #0b7285; }
.wg-menu-group-title .wg-icon { width:28px; height:28px; color:#0b7285; }
.wg-menu-group-lead { font-size:14px; color:#5a6676; margin:10px 0 20px; }
.wg-menu-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.wg-menu-card { background:#fff; border:1px solid #e3e9f0; border-radius:12px; padding:20px 20px 18px; box-shadow:0 1px 6px rgba(16,35,60,.05); transition:box-shadow .15s ease, transform .15s ease; }
.wg-menu-card:hover { box-shadow:0 6px 18px rgba(16,35,60,.12); transform:translateY(-2px); }
.wg-menu-card-head { display:flex; align-items:flex-start; gap:10px; margin:0 0 10px; }
.wg-menu-icon { width:26px; height:26px; color:#0b7285; margin-top:1px; }
.wg-menu-card-head h4 { font-size:15.5px; line-height:1.45; margin:0; flex:1; }
.wg-live, .wg-opt { flex:none; font-size:11px; font-weight:700; border-radius:4px; padding:3px 8px; white-space:nowrap; }
.wg-live { background:#e6fcf5; color:#087f5b; border:1px solid #63e6be; }
.wg-opt { background:#f1f3f5; color:#5a6676; border:1px solid #dee2e6; }
.wg-menu-card p { font-size:13.2px; color:#5a6676; margin:0; line-height:1.7; }
.wg-menu-cta { text-align:center; background:#f4f7fa; border-radius:14px; padding:34px 24px; margin-top:10px; }
.wg-menu-cta p { margin:0 0 18px; font-weight:700; color:#2a3744; }

/* ---------- ⑤ PROOF ---------- */
.wg-proof { background:linear-gradient(160deg,#0c2f45,#0d2238 55%,#0a1626); color:#fff; }
.wg-proof-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin:0 0 30px; }
.wg-proof-card { background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.14); border-radius:14px; padding:26px 22px; }
.wg-proof-num { font-size:clamp(34px,4vw,46px); font-weight:900; color:#ffd43b; line-height:1.1; margin:0 0 10px; }
.wg-proof-num small { font-size:15px; font-weight:800; margin-left:4px; color:#ffe59e; }
.wg-proof-card h3 { font-size:15.5px; margin:0 0 8px; }
.wg-proof-card p { font-size:13px; color:#c3d2e2; margin:0; }
.wg-proof-links { display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; font-size:14px; }
.wg-proof-links p { margin:0; font-weight:700; color:#9fb3c8; }
.wg-proof-links a { color:#7fd6e8; font-weight:700; text-decoration:underline; }

/* ---------- ⑥ FLOW ---------- */
.wg-flow { background:#f4f7fa; }
.wg-flow-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.wg-flow-card { background:#fff; border:1px solid #e3e9f0; border-radius:12px; padding:26px 22px; }
.wg-flow-num { width:40px; height:40px; color:#0b7285; margin-bottom:12px; }
.wg-flow-card h3 { font-size:16.5px; margin:0 0 8px; }
.wg-flow-card p { font-size:13.5px; color:#5a6676; margin:0; }

/* ---------- ⑦ FAQ ---------- */
.wg-faq-list { max-width:860px; }
.wg-faq-item { background:#fff; border:1px solid #e3e9f0; border-radius:10px; margin:0 0 12px; overflow:hidden; }
.wg-faq-item summary { cursor:pointer; padding:18px 22px; font-weight:800; font-size:15.5px; list-style:none; position:relative; padding-right:48px; }
.wg-faq-item summary::-webkit-details-marker { display:none; }
.wg-faq-item summary::after { content:"+"; position:absolute; right:20px; top:50%; transform:translateY(-50%); font-size:22px; font-weight:400; color:#0b7285; }
.wg-faq-item[open] summary::after { content:"−"; }
.wg-faq-item[open] summary { border-bottom:1px solid #eef1f5; }
.wg-faq-item p { margin:0; padding:16px 22px 20px; font-size:14.2px; color:#44505f; }

/* ---------- ⑧ 最終CTA ---------- */
.wg-final { background:linear-gradient(135deg,#0b3a5e,#0b7285); color:#fff; }
.wg-final-inner { text-align:center; max-width:820px; }
.wg-final h2 { font-size:clamp(26px,3.8vw,40px); margin:0 0 18px; }
.wg-final p { color:#dbe7f3; margin:0 0 26px; }
.wg-final-cta { display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin:0 0 26px; }
.wg-final-mail { font-size:14.5px; line-height:2; }
.wg-final-mail a { color:#ffd43b; font-size:18px; word-break:break-all; }
.wg-final-note { font-size:12.5px; color:#9fc6d8; margin-top:6px !important; }

/* ---------- 専用お問合せページ（/wagamama-hp/contact/） ---------- */
.wg-contact-hero { background:linear-gradient(135deg,#0a1626 0%,#0b2a3d 100%); color:#fff; padding:64px 0 48px; }
.wg-contact-hero h1 { font-size:clamp(24px,3.4vw,36px); margin:8px 0 14px; }
.wg-contact-lead { color:#c7d8e6; line-height:2; margin:0; font-size:15px; }
.wg-contact-main .content-main { padding-top:48px; }

/* ---------- レスポンシブ ---------- */
@media (max-width: 980px) {
  .wg-facts-grid, .wg-concept-grid, .wg-menu-grid { grid-template-columns:repeat(2,1fr); }
  .wg-proof-grid, .wg-flow-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 620px) {
  .wg-section { padding:56px 0; }
  .wg-pc-br { display:none; } .wg-sp-br { display:inline; }
  .wg-hero-inner { padding:68px 20px 64px; }
  .wg-facts-grid, .wg-concept-grid, .wg-menu-grid, .wg-proof-grid, .wg-flow-grid { grid-template-columns:1fr; }
  .wg-hero-cta .wg-btn, .wg-final-cta .wg-btn { width:100%; }
  .wg-hero-points { flex-direction:column; gap:8px; }
}