/* ============================================================
   renovy 共通ヘッダー CSS
   ============================================================ */
:root{
  --bg:#f8f8f8; --bg-soft:#f2f2f2; --bg-warm:#e8e8e8;
  --ink:#1c1c1c; --ink-soft:#666; --ink-faint:#999;
  --line:#e0e0e0; --dark:#111; --accent:#555;
  --line-green:#06C755;
  --serif:"STIX Two Text",serif; --jp:"Noto Sans JP",sans-serif; --label:"STIX Two Text",serif;
  --max:1240px; --pad:clamp(20px,4vw,56px);
  --nav-h:64px;
}

/* 1. nav（透過追従 → スクロール/メガ展開で白背景） */
.nav{
  position:fixed;top:0;left:0;right:0;width:auto;z-index:1000;
  display:flex;align-items:center;justify-content:space-between;
  /* iOS のセーフエリア（ノッチ/ステータスバー等）ぶんも背景で覆う */
  padding:calc(20px + env(safe-area-inset-top)) calc(var(--pad) + env(safe-area-inset-right))
          20px calc(var(--pad) + env(safe-area-inset-left));
  transition:.4s;
  box-sizing:border-box;
}
.nav *{box-sizing:border-box;}
/* サイト全体で a タグの下線・訪問済み色を無効化（SWELLテーマ由来のスタイルを上書き） */
a,
a:link,
a:visited,
a:hover,
a:active,
a:focus{
  text-decoration:none !important;
  color:inherit;
  background-image:none !important;
}
a:hover,
a:focus{text-decoration:none !important;}
.nav.scrolled,
.nav.mega-open{
  background:rgba(248,248,248,.9);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
/* petmode 中はヘッダー背景を常時不透明にし、
   セーフエリア（ノッチ上部）まで白で覆う。
   下地のベージュ (#f6f2ec) が透けないように rgba ではなく単色。 */
body.is-petmode .nav{
  background:#f8f8f8;
  border-bottom:1px solid var(--line);
}
body.is-petmode .nav.scrolled,
body.is-petmode .nav.mega-open{
  background:#f8f8f8;
}

.logo{font-family:var(--serif);font-size:22px;letter-spacing:.16em;line-height:1;display:inline-flex;align-items:center}
.logo img{height:48px;width:auto;display:block;transition:.3s;filter:invert(1) brightness(.15)}
@media(max-width:640px){.logo img{height:36px}}
.logo span{color:var(--ink-faint)}
/* サイトトップ(index) の透過状態のみ、白ロゴ + 薄い黒影 */
body.is-home .nav:not(.scrolled):not(.mega-open) .logo img{
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.35)) !important;
}

.nav-links{display:none;gap:26px;align-items:center}
.nav-links>a,
.nav-item>a{font-size:13px;font-weight:500;letter-spacing:.08em;color:var(--ink-soft);transition:.3s;cursor:pointer}
.nav-links>a:hover,
.nav-item:hover>a,
.nav-item.open>a{color:var(--ink)}

.cta-wrap{display:none;align-items:center;gap:12px}
.lang-switch{display:inline-flex;align-items:center;gap:6px;font-family:var(--label);font-size:11px;letter-spacing:.14em;color:var(--ink-soft);margin-right:6px}
.lang-switch__sep{color:var(--ink-faint)}
.lang-switch__link{padding:4px 2px;transition:color .3s}
.lang-switch__link:hover{color:var(--ink)}
.lang-switch__link.is-active{color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:2px}
.drawer-lang{justify-content:center;margin-bottom:6px;padding-bottom:6px;border-bottom:1px solid var(--line);width:100%;gap:14px}
.drawer-lang .lang-switch__link{font-size:13px;letter-spacing:.16em;padding:6px}
body.is-home .nav:not(.scrolled):not(.mega-open) .lang-switch{color:rgba(240,240,240,.7)}
body.is-home .nav:not(.scrolled):not(.mega-open) .lang-switch__link{color:rgba(240,240,240,.7)}
body.is-home .nav:not(.scrolled):not(.mega-open) .lang-switch__link.is-active{color:#f0f0f0;border-bottom-color:#f0f0f0}
body.is-home .nav:not(.scrolled):not(.mega-open) .lang-switch__sep{color:rgba(240,240,240,.35)}
.cta-tel{
  display:flex;align-items:center;gap:7px;font-family:var(--label);
  font-size:13px;font-weight:500;letter-spacing:.08em;padding:9px 15px;border:1px solid var(--ink);transition:.3s;
}
.cta-tel svg{width:13px;height:13px;fill:currentColor}
.cta-tel:hover{background:var(--ink);color:var(--bg)}
.cta-line,
.cta-line:link,
.cta-line:visited,
.cta-line:hover,
.cta-line:active,
.cta-line:focus{
  display:flex;align-items:center;gap:8px;font-family:"Noto Serif JP","Yu Mincho","Hiragino Mincho ProN",serif !important;
  font-size:13px;font-weight:700 !important;letter-spacing:.1em;
  padding:10px 18px;background:var(--line-green) !important;color:#ffffff !important;border:1px solid var(--line-green) !important;transition:.25s;
  text-shadow:none !important;
}
.cta-line svg{width:15px;height:15px;fill:#ffffff !important}
.cta-line:hover{opacity:.88}

.nav-burger{
  display:flex;flex-direction:column;justify-content:center;gap:5px;
  width:26px;height:18px;background:none;border:0;cursor:pointer;padding:0;
}
.nav-burger span{display:block;width:100%;height:1px;background:var(--ink);transition:.35s}
.nav-burger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0}
.nav-burger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media(min-width:880px){
  .nav-links{display:flex}
  .cta-wrap{display:flex}
  .nav-burger{display:none}
}

/* 透過状態（hero 上）は白文字 — <body class="dark-hero"> を付けたページだけ有効 */
body.is-home .nav:not(.scrolled):not(.mega-open) .logo,
body.is-home .nav:not(.scrolled):not(.mega-open) .nav-links>a,
body.is-home .nav:not(.scrolled):not(.mega-open) .nav-item>a,
body.is-home .nav:not(.scrolled):not(.mega-open) .cta-tel{color:#f0f0f0;border-color:rgba(255,255,255,.5)}
body.is-home .nav:not(.scrolled):not(.mega-open) .cta-tel:hover{background:#fff;color:var(--ink);border-color:#fff}
body.is-home .nav:not(.scrolled):not(.mega-open) .logo span{color:rgba(255,255,255,.45)}
body.is-home .nav:not(.scrolled):not(.mega-open) .cta-line.sp{color:#f0f0f0;border-color:rgba(255,255,255,.5)}
body.is-home .nav:not(.scrolled):not(.mega-open) .cta-line.sp:hover{background:#fff;color:var(--ink);border-color:#fff}
body.is-home .nav:not(.scrolled):not(.mega-open) .nav-burger span{background:#f0f0f0}

/* 透過状態: 文字を少し太く、後ろに薄い影を落として可読性を上げる */
.nav:not(.scrolled):not(.mega-open) .nav-links>a,
.nav:not(.scrolled):not(.mega-open) .nav-item>a,
.nav:not(.scrolled):not(.mega-open) .cta-tel,
.nav:not(.scrolled):not(.mega-open) .cta-line.sp{
  font-weight:500;
  text-shadow:0 1px 3px rgba(0,0,0,.28);
}
.nav:not(.scrolled):not(.mega-open) .logo{
  text-shadow:0 1px 3px rgba(0,0,0,.28);
}
/* dark-hero でないページ(明るい背景) は影を淡い白に切り替え */
body:not(.is-home) .nav:not(.scrolled):not(.mega-open) .nav-links>a,
body:not(.is-home) .nav:not(.scrolled):not(.mega-open) .nav-item>a,
body:not(.is-home) .nav:not(.scrolled):not(.mega-open) .cta-tel,
body:not(.is-home) .nav:not(.scrolled):not(.mega-open) .cta-line.sp,
body:not(.is-home) .nav:not(.scrolled):not(.mega-open) .logo{
  text-shadow:0 1px 2px rgba(255,255,255,.7);
}
body:not(.is-home) .nav:not(.scrolled):not(.mega-open) .logo img{
  filter:invert(1) brightness(.15) drop-shadow(0 1px 2px rgba(255,255,255,.7));
}

/* デフォルト（明るい背景ページ）は常に薄い白背景＋暗い文字で視認性を確保 */
body:not(.is-home) .nav{
  background:rgba(248,248,248,.9);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
body:not(.is-home) .nav .logo img{filter:invert(1) brightness(.15)}

/* 2. メガメニュー */
.mega{
  position:fixed;left:0;right:0;top:var(--nav-h);z-index:999;
  background:rgba(248,248,248,.98);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .3s,transform .3s,visibility .3s;
}
.nav-item.open .mega{opacity:1;visibility:visible;transform:translateY(0)}

.mega-inner{
  max-width:var(--max);margin:0 auto;padding:44px var(--pad) 52px;
  display:grid;grid-template-columns:1fr 1fr 1.4fr 1.4fr;gap:44px;
}
.mega-inner.compact{grid-template-columns:240px 1.4fr;max-width:780px;gap:56px}

.mega-col-h{font-size:11px;letter-spacing:.18em;color:var(--ink-faint);margin-bottom:20px}
.mega-col a{display:block;font-size:13px;letter-spacing:.06em;color:var(--ink-soft);margin-bottom:15px;transition:.2s}
.mega-col a:hover{color:var(--ink)}
.mega-col a.more{color:var(--ink);margin-top:6px}

.mega-panel .shot{aspect-ratio:4/3;background:var(--bg-warm);margin-bottom:14px;position:relative;overflow:hidden}
.mega-panel .shot.dark{background:#2b2b2b}
.mega-panel .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.mega-panel:hover .shot img{transform:scale(1.04)}
.mega-panel .shot span{position:absolute;left:16px;bottom:13px;font-size:11px;letter-spacing:.1em;color:rgba(255,255,255,.85);z-index:1;text-shadow:0 1px 4px rgba(0,0,0,.4)}
.mega-panel .shot.dark span{color:rgba(255,255,255,.6)}
.mega-panel .cap{font-size:13px;letter-spacing:.06em;color:var(--ink)}

/* 3. SP ドロワー */
.drawer{
  position:fixed;inset:0;z-index:1100;background:var(--bg);
  transform:translateX(100%);transition:transform .5s cubic-bezier(.7,0,.2,1);
  display:flex;flex-direction:column;
  padding:calc(104px + env(safe-area-inset-top)) calc(var(--pad) + env(safe-area-inset-right))
          calc(32px + env(safe-area-inset-bottom)) calc(var(--pad) + env(safe-area-inset-left));
  overflow-y:auto;
}
.drawer.open{transform:translateX(0)}
.drawer-close{position:absolute;top:calc(22px + env(safe-area-inset-top));right:calc(var(--pad) + env(safe-area-inset-right));width:24px;height:24px;background:none;border:0;cursor:pointer}
.drawer-close::before,.drawer-close::after{content:"";position:absolute;top:11px;left:0;width:24px;height:1px;background:var(--ink)}
.drawer-close::before{transform:rotate(45deg)}
.drawer-close::after{transform:rotate(-45deg)}
.drawer nav a{display:block;font-size:18px;letter-spacing:.08em;color:var(--ink);padding:17px 0;border-bottom:1px solid var(--line)}
.drawer .sub{display:flex;flex-direction:column;padding:4px 0 12px}
.drawer .sub a{font-size:13px;letter-spacing:.08em;color:var(--ink-soft);border:0;padding:9px 0 9px 2px}
.drawer-foot{display:flex;flex-direction:column;gap:12px;margin-top:36px}
.d-tel{display:flex;flex-direction:column;align-items:center;gap:4px;padding:15px;border:1px solid var(--ink)}
.d-tel .num{display:flex;align-items:center;gap:8px;font-family:var(--label);font-size:19px;letter-spacing:.08em;color:var(--ink)}
.d-tel .num svg{width:16px;height:16px;fill:currentColor}
.d-tel .hours{font-size:11px;letter-spacing:.06em;color:var(--ink-soft)}
.drawer .drawer-foot .d-line,
.drawer .drawer-foot .d-line:link,
.drawer .drawer-foot .d-line:visited,
.drawer .drawer-foot .d-line:hover,
.drawer .drawer-foot .d-line:active,
.drawer .drawer-foot .d-line:focus,
.d-line{display:flex;align-items:center;justify-content:center;gap:8px;height:52px;background:var(--line-green) !important;color:#ffffff !important;font-size:13px;font-weight:700 !important;letter-spacing:.08em;font-family:"Noto Serif JP","Yu Mincho","Hiragino Mincho ProN",serif !important;text-shadow:none !important}
.drawer .drawer-foot .d-line svg,
.d-line svg{width:18px !important;height:18px !important;flex:none !important;display:inline-block !important}
.drawer .drawer-foot .d-line svg,
.drawer .drawer-foot .d-line svg path,
.d-line svg,
.d-line svg path{fill:#ffffff !important;color:#ffffff !important}
@media(min-width:880px){.drawer{display:none}}

/* 4. SP 右側：LINE ＋ ハンバーガー */
.nav-sp{display:flex;align-items:center;gap:12px}
.cta-line.sp{font-family:var(--label);padding:8px 14px;font-size:12px;letter-spacing:.16em;background:transparent;color:var(--ink);border:1px solid var(--ink)}
.cta-line.sp:hover{background:var(--ink);color:var(--bg);opacity:1}
@media(min-width:880px){.nav-sp{display:none}}