/* =====================================================================
   LP 共通ベースCSS  base.css  （_shared/css/base.css が正=マスター）
   ---------------------------------------------------------------------
   ・ブランド非依存のスケルトン。案件ごとの色・フォントは
     各LPの <style> 内で :root トークンを上書きして調整します。
   ・このファイルは全案件で使い回します。修正時はここ（マスター）を直し、
     各案件の assets/base.css へコピーして反映してください。
   ===================================================================== */

/* ---------- デザイントークン（案件ごとに上書き可） ---------- */
:root{
  --bg:#14100C;            /* 背景（濃色） */
  --bg2:#1C160F;           /* 背景（やや明） */
  --panel:#221B13;         /* カード面 */
  --line:rgba(212,175,90,.18);/* 罫線 */
  --accent:#D6AF57;        /* メインアクセント（例:金） */
  --accent-soft:#E7C978;   /* アクセント明 */
  --accent2:#B0362C;       /* サブアクセント（例:朱） */
  --accent2-deep:#7E241D;
  --fg:#F2E9D8;            /* 本文文字 */
  --muted:rgba(242,233,216,.62);
  --muted2:rgba(242,233,216,.42);
  --font-serif:'Shippori Mincho B1',serif;   /* 見出し */
  --font-sans:'Noto Sans JP',sans-serif;     /* 本文 */
  --font-en:'Montserrat',sans-serif;         /* 英字ラベル */
  --maxw:1120px;
}

/* ---------- リセット ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-sans);background:var(--bg);color:var(--fg);line-height:1.85;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}

/* 日本語を文節単位で折り返す（対応ブラウザ）／禁則を厳密に */
h1,h2,h3,h4,.sec-ttl,.sec-lead,.hero-lead,.lead,.card p,.qa summary,.qa .ans{word-break:auto-phrase;line-break:strict;overflow-wrap:anywhere}
.nb{white-space:nowrap} /* 分割したくない語句に付与（例: <span class="nb">名物「痛風鍋」</span>） */

/* ---------- レイアウト共通 ---------- */
.mincho{font-family:var(--font-serif)}
.en{font-family:var(--font-en);letter-spacing:.14em}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
section{position:relative}
.sec{padding:88px 0}
.sec-head{text-align:center;margin-bottom:54px}
.sec-en{font-family:var(--font-en);font-size:.72rem;letter-spacing:.34em;color:var(--accent);margin-bottom:14px}
.sec-ttl{font-family:var(--font-serif);font-weight:800;font-size:clamp(1.6rem,4vw,2.4rem);line-height:1.4}
.sec-ttl .g{color:var(--accent)}
.sec-lead{color:var(--muted);margin-top:16px;font-size:.96rem;max-width:640px;margin:16px auto 0}

/* ---------- ボタン ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;padding:16px 34px;border-radius:6px;font-weight:700;font-size:.98rem;transition:transform .15s,background .2s,box-shadow .2s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent2);color:#fff;box-shadow:0 10px 30px -10px rgba(0,0,0,.5)}
.btn-primary:hover{background:var(--accent2-deep)}
.btn-accent{background:var(--accent);color:#241a0c}
.btn-accent:hover{background:var(--accent-soft)}
.btn-line{border:1.5px solid rgba(242,233,216,.4);color:var(--fg)}
.btn-line:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- ヘッダー / ナビ ---------- */
header{position:sticky;top:0;z-index:200;background:rgba(20,16,12,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.hd{max-width:var(--maxw);margin:0 auto;padding:0 22px;height:64px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;flex-direction:column;line-height:1.1}
.brand .jp{font-family:var(--font-serif);font-weight:800;font-size:1.22rem;color:var(--accent);letter-spacing:.06em}
.brand .sub{font-size:.62rem;color:var(--muted2);letter-spacing:.28em;margin-top:2px}
.nav{display:flex;align-items:center;gap:2px}
.nav a{color:var(--muted);font-size:.82rem;padding:8px 12px;border-radius:4px;transition:color .2s}
.nav a:hover{color:var(--accent)}
.nav .tel{color:var(--accent);font-family:var(--font-en);font-weight:600;letter-spacing:.02em}
.nav .book{background:var(--accent2);color:#fff;padding:9px 18px;border-radius:5px;font-weight:700;font-size:.82rem;margin-left:6px;transition:background .2s}
.nav .book:hover{background:var(--accent2-deep)}
.burger{display:none;flex-direction:column;gap:5px;padding:6px;cursor:pointer}
.burger span{width:24px;height:2px;background:var(--accent);display:block;transition:.3s}
.mnav{display:none;background:var(--bg2);border-bottom:1px solid var(--line)}
.mnav.open{display:block}
.mnav a{display:block;padding:14px 22px;border-top:1px solid var(--line);color:var(--muted);font-size:.95rem}
.mnav a.book{background:rgba(176,54,44,.2);color:var(--accent-soft);font-weight:700}

/* ---------- 汎用カード / グリッド ---------- */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:32px 28px;transition:transform .2s,border-color .2s}
.card:hover{transform:translateY(-4px);border-color:var(--accent)}
.card h3{font-family:var(--font-serif);font-weight:700;font-size:1.24rem;color:var(--accent-soft);margin-bottom:10px;line-height:1.5}
.card p{color:var(--muted);font-size:.92rem;line-height:1.9}

/* ---------- FAQ（<details>） ---------- */
.faq-list{max-width:760px;margin:0 auto}
.qa{border:1px solid var(--line);border-radius:10px;margin-bottom:14px;overflow:hidden;background:var(--panel)}
.qa summary{list-style:none;cursor:pointer;padding:20px 24px;display:flex;gap:14px;align-items:flex-start;font-family:var(--font-serif);font-weight:700;font-size:1.02rem;color:var(--fg);transition:color .2s}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--accent)}
.qa summary .q{color:var(--accent);font-family:var(--font-en);font-weight:700;flex-shrink:0}
.qa summary .mk{margin-left:auto;color:var(--accent);transition:transform .25s;flex-shrink:0;font-size:1.2rem;line-height:1.4}
.qa[open] summary .mk{transform:rotate(45deg)}
.qa .ans{padding:0 24px 22px 54px;color:var(--muted);font-size:.92rem;line-height:1.95}
.qa .ans a{color:var(--accent-soft);text-decoration:underline}

/* ---------- フッター ---------- */
footer{background:#0f0c08;padding:44px 22px 32px;text-align:center;border-top:1px solid var(--line)}
footer .fbrand{font-family:var(--font-serif);font-weight:800;font-size:1.3rem;color:var(--accent);letter-spacing:.06em;margin-bottom:8px}
footer .fsub{color:var(--muted2);font-size:.78rem;letter-spacing:.12em;margin-bottom:22px}
footer .fnav{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin-bottom:24px}
footer .fnav a{color:var(--muted);font-size:.82rem;transition:.2s}
footer .fnav a:hover{color:var(--accent)}
footer .copy{color:var(--muted2);font-size:.72rem;letter-spacing:.06em}

/* ---------- モバイル固定CTA ---------- */
.mobile-cta{display:none;position:fixed;bottom:0;left:0;right:0;z-index:180;background:rgba(20,16,12,.96);backdrop-filter:blur(8px);border-top:1px solid var(--line);padding:10px 12px;gap:10px}
.mobile-cta a{flex:1;text-align:center;padding:13px 0;border-radius:7px;font-weight:700;font-size:.9rem}
.mobile-cta .m-tel{border:1.5px solid var(--accent);color:var(--accent)}
.mobile-cta .m-book{background:var(--accent2);color:#fff}

/* ---------- レスポンシブ ---------- */
@media(max-width:860px){
  .nav{display:none}
  .burger{display:flex}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .grid-4{grid-template-columns:repeat(2,1fr);gap:32px 20px}
  .mobile-cta{display:flex}
  body{padding-bottom:66px}
  .sec{padding:60px 0}
  .sec-head{margin-bottom:40px}
  .sec-ttl{font-size:1.55rem}
  .sec-lead{font-size:.9rem}
  br.pc{display:none}
}