/* ============================================================
   daruma-shared.css — サイト共通の見た目（ヘッダ／ドロワー／サブHERO／
   フッター／SP固定CTA）を renewal/ の静的サイトからそのまま抽出。
   /blog/ のWP子テーマでも同一の見た目を共有するための土台。
   すべて .dz スコープ配下（body直下を <div class="dz"> で包む）。
   出典: renewal/index.html, renewal/reservation.html（値は逐語一致）
   ============================================================ */

/* ============ 共通トークン & リセット ============ */
html,body{ margin:0; padding:0; }
.dz{ --red:#d80c18; --red-b:#e11020; --red-d:#a3060f; --red-dd:#7c040b; --red-x:#5e030a;
     --char:#15161a; --char2:#1c1d22; --char3:#0e0f12; --gold:#e7c65a; --gold2:#c9a227;
     --line:#06c755; --ig:#e1306c;
     --paper:#f4f0e7; --paper2:#ece6d8; --ink:#1c1c22; --ink2:#55535c;
     font-family:'Zen Kaku Gothic New',sans-serif; background:var(--char3); }
.dz *{ box-sizing:border-box; }
.dz h1,.dz h2,.dz h3,.dz h4,.dz h5,.dz h6,.dz p{ margin:0; }
.dz a{ text-decoration:none; }

/* ============ HERO + TOPBAR (.dz-hero) ============ */
.dz-hero{ position:relative; background:var(--char); min-height:470px; overflow:hidden;
  clip-path:polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 68px)); }
.dz-hero .bg{ position:absolute; inset:0; left:44%; }
.dz-hero .bg img{ width:100%; height:100%; object-fit:cover; animation:heroZoom 18s ease-out forwards;
  filter:grayscale(.22) contrast(1.05) brightness(.8); }
@keyframes heroZoom{ from{ transform:scale(1.08);} to{ transform:scale(1);} }
.dz-hero .ov{ position:absolute; inset:0; z-index:2;
  background: repeating-linear-gradient(90deg, transparent 0 78px, #e7c65a22 78px 79px),
              linear-gradient(115deg, var(--red) 0%, var(--red-d) 29%, transparent 29.5%); }
.dz-hero .vg{ position:absolute; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(180deg, transparent 55%, #0c0d10cc 100%); }

.dz-hero .topbar{ position:absolute; top:0; left:0; right:0; z-index:6; display:flex;
  align-items:center; justify-content:space-between; padding:11px 22px;
  background:linear-gradient(#0b0c0fee,#0b0c0f6b); backdrop-filter:blur(6px); border-bottom:1px solid #e7c65a2e; }
.dz-hero .bl img{ height:26px; width:auto; display:block; }
.dz-hero .bn{ display:flex; gap:24px; }
.dz-hero .bn a{ position:relative; color:#e8e2d2; font-size:12px; letter-spacing:.06em; padding:4px 0; }
.dz-hero .bn a::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .25s; }
.dz-hero .bn a:hover::after{ transform:scaleX(1); }
.dz-hero .hb{ display:none; color:var(--gold); font-size:19px; line-height:1; padding:6px 9px;
  border:1px solid #e7c65a55; border-radius:7px; cursor:pointer; background:transparent; }
.dz-hero .br{ display:flex; gap:8px; align-items:center; }
.dz-hero .h{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700;
  letter-spacing:.04em; padding:8px 13px; border-radius:8px; color:#fff; }
.dz-hero .h.tel{ background:linear-gradient(var(--red-b),var(--red-d)); }
.dz-hero .h.tel .n{ font-family:'Oswald',sans-serif; font-size:12.5px; letter-spacing:.03em; }
.dz-hero .h.line{ background:var(--line); }
.dz-hero .h.web{ background:transparent; color:var(--gold); border:1px solid var(--gold); }
.dz-hero .h.ig{ width:33px; height:33px; padding:0; justify-content:center; border-radius:8px;
  background:radial-gradient(circle at 30% 110%, #fdf497 0%, #fd5949 45%, #d6249f 62%, #285AEB 92%); }

.dz-hero .copy{ position:relative; z-index:5; max-width:62%; padding:92px 0 76px 7%; }
.dz-hero .kicker{ font-size:11px; letter-spacing:.4em; color:var(--gold); font-weight:700; margin-bottom:14px; }
.dz-hero .gline{ width:36px; height:1.5px; background:var(--gold); margin-bottom:18px; }
.dz-hero h1{ font-family:'Shippori Mincho',serif; font-weight:600; color:#fff;
  font-size:clamp(28px,4.3vw,54px); line-height:1.32; letter-spacing:.05em; margin-bottom:18px; }
.dz-hero h1 .g{ color:var(--gold); }
.dz-hero .lead{ max-width:44ch; font-size:13px; line-height:1.95; letter-spacing:.03em; color:#efdada; margin-bottom:24px; }

@media(max-width:820px){
  .dz-hero{ min-height:520px; clip-path:polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 40px)); }
  .dz-hero .bg{ left:0; }
  .dz-hero .bg img{ opacity:.5; }
  /* C②: SPではヘッダのCTAチップ（tel/LINE/Web/IG）を全て畳み、ハンバーガーへ集約 */
  .dz-hero .bn,.dz-hero .br .h{ display:none; }
  .dz-hero .hb{ display:inline-flex; }
  .dz-hero .copy{ max-width:100%; padding:88px 7% 60px; }
}

/* モバイル・ドロワー */
.dz-drawer{ position:fixed; inset:0; z-index:60; display:none; }
.dz-drawer.open{ display:block; }
.dz-drawer .scrim{ position:absolute; inset:0; background:#0009; }
.dz-drawer .panel{ position:absolute; top:0; right:0; width:74%; max-width:320px; height:100%;
  background:var(--char); border-left:1px solid #e7c65a33; padding:22px; display:flex; flex-direction:column; gap:6px; overflow-y:auto; }
.dz-drawer .panel a{ color:#e8e2d2; font-size:14px; padding:14px 6px; border-bottom:1px solid #ffffff12; letter-spacing:.04em; }
.dz-drawer .panel a.cta{ color:var(--gold); font-weight:700; }
.dz-drawer .x{ align-self:flex-end; color:var(--gold); font-size:24px; background:none; border:none; cursor:pointer; margin-bottom:8px; }

/* ============ サブページ hero（コンパクト・パンくず付き） ============ */
.dz-hero.sub{ min-height:340px; }
.dz-hero.sub .copy{ max-width:74%; padding:120px 0 70px 7%; }
.dz-hero .crumb{ font-size:11px; letter-spacing:.05em; color:#efdadabb; margin-bottom:16px; }
.dz-hero .crumb a{ color:var(--gold); }
.dz-hero .crumb i{ font-style:normal; margin:0 9px; opacity:.5; }
@media(max-width:820px){
  .dz-hero.sub{ min-height:310px; }
  .dz-hero.sub .copy{ max-width:100%; padding:96px 7% 54px; }
}

/* ============ フッター (.dz-ftr) ============ */
.dz-ftr{ position:relative; z-index:1; margin-top:-68px; background:var(--char3); color:#c3c6cc;
  padding:118px 7% 40px; clip-path:polygon(0 0, 100% 68px, 100% 100%, 0 100%); }
.dz-ftr .fedge{ position:absolute; top:0; left:0; width:100%; height:68px; z-index:3; pointer-events:none; }
.dz-ftr .cols{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:30px; }
.dz-ftr .brand img{ height:34px; width:auto; margin-bottom:16px; }
.dz-ftr .nap{ font-size:12px; line-height:1.95; color:#a7abb2; }
.dz-ftr .nap b{ color:#fff; font-weight:700; }
.dz-ftr .nap .tel{ font-family:'Oswald',sans-serif; color:var(--gold); font-size:18px; }
.dz-ftr .sns{ display:flex; gap:10px; margin-top:16px; }
.dz-ftr .sns a{ width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:14px; color:#fff; }
.dz-ftr .sns a.line{ background:var(--line); }
.dz-ftr .sns a.ig{ background:radial-gradient(circle at 30% 110%, #fdf497 0%, #fd5949 45%, #d6249f 62%, #285AEB 92%); }
.dz-ftr .sns a.tel{ background:linear-gradient(var(--red-b),var(--red-d)); }
.dz-ftr h6{ font-size:11px; letter-spacing:.2em; color:var(--gold); font-weight:700; margin-bottom:16px; }
.dz-ftr .lk{ display:flex; flex-direction:column; gap:11px; }
.dz-ftr .lk a{ font-size:12.5px; color:#c3c6cc; letter-spacing:.03em; }
.dz-ftr .lk a:hover{ color:var(--gold); }
.dz-ftr .copy{ margin-top:44px; border-top:1px solid #ffffff12; padding-top:20px; font-size:10.5px; color:#8a8d95; letter-spacing:.06em; }
@media(max-width:760px){ .dz-ftr{ margin-top:-40px; clip-path:polygon(0 0, 100% 40px, 100% 100%, 0 100%); } .dz-ftr .fedge{ height:40px; } .dz-ftr .cols{ grid-template-columns:1fr; gap:26px; } }

/* ============ C①: SP固定フッタCTAバー（スマホのみ） ============ */
.dz-spcta{ display:none; }
@media(max-width:760px){
  .dz-spcta{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:55; gap:1px;
    background:#0b0c0f; border-top:1px solid #e7c65a44; box-shadow:0 -6px 20px #0008;
    padding-bottom:env(safe-area-inset-bottom);
    /* 実機モバイルで初回ペイントされずスクロールまで非表示になる合成バグ対策：GPUレイヤに昇格して即時描画を強制 */
    transform:translateZ(0); -webkit-transform:translateZ(0); will-change:transform; backface-visibility:hidden; }
  .dz-spcta a{ flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
    padding:14px 6px; font-size:13px; font-weight:700; letter-spacing:.02em; color:#fff; }
  .dz-spcta a.tel{ background:linear-gradient(var(--red-b),var(--red-d)); }
  .dz-spcta a.tel .n{ font-family:'Oswald',sans-serif; font-size:13.5px; }
  .dz-spcta a.line{ background:var(--line); }
  .dz-spcta a.web{ background:linear-gradient(var(--gold),var(--gold2)); color:#3a2c00; }
  /* 固定バー分の余白（フッター末尾がバーに隠れないように） */
  .dz-ftr{ padding-bottom:84px; }
}