/* ============================================================
   ww-base.css — 刷新4ページ共通の土台
   ------------------------------------------------------------
   ・CSS変数（全ページで値が同じものだけ :root に置く）
   ・共通ヘッダー / 共通フッター
   ・固定ヘッダーを前提としたヒーロー上余白のトークン

   値の基準：サービス紹介ページ（統一方針の決定に基づく）
   このファイルは刷新4ページでのみ読み込む前提。
   ============================================================ */

:root {
  /* 全ページ共通の色 */
  --ww-ink: #25221f;
  --ww-paper: #fffaf4;
  --ww-white: #fff;
  --ww-orange: #f47b35;
  --ww-orange-dark: #c74f18;
  --ww-yellow: #ffd85a;
  --ww-cream: #fff0dc;
  --ww-pink: #ffb8a1;

  /* ヘッダー / フッターが参照する既定値。
     ページ本文側は各ページのラッパーで上書きする（元デザインの差を保つため）。 */
  --ww-muted: #716963;
  --ww-line: rgba(65, 48, 38, .16);
  --ww-max: 1180px;

  /* 固定ヘッダー高と、それを前提にしたヒーローの上余白。
     172px（= 82 + 90）はサービス紹介ページの元の値と一致する。 */
  --ww-header-h: 82px;
  --ww-header-h-scrolled: 68px;
  --ww-hero-gap: 90px;
  --ww-hero-pt: calc(var(--ww-header-h) + var(--ww-hero-gap));

  --ww-font: "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}

html { scroll-behavior: smooth; }

body.ww-renewal-body {
  margin: 0;
  background: var(--ww-paper);
}

/* データ側の表示フラグ（service_visible / course_visible）を静的HTMLで表す。
   運用ではWordPress側が出力そのものを止めるため、この指定は静的確認用。 */
.ww-renewal [data-ww-visible="false"] { display: none; }

/* ============================================================
   共通ヘッダー   template-parts/ww/header 相当
   ============================================================ */

.ww-site-header {
  position: fixed;
  z-index: 50;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--ww-header-h);
  display: flex;
  align-items: center;
  transition: background .3s, height .3s, box-shadow .3s;
  color: var(--ww-ink);
  font-family: var(--ww-font);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}
/* 元CSSは `*` で全要素に効いていた。`.ww-site-header *` だけだと
   ヘッダー/フッター自身が対象から外れるため、自身も明示的に含める。 */
.ww-site-header,
.ww-site-header *,
.ww-site-footer,
.ww-site-footer * { box-sizing: border-box; }
.ww-site-header a,
.ww-site-footer a { color: inherit; text-decoration: none; }
.ww-site-header button { font: inherit; }

.ww-site-header.is-scrolled {
  height: var(--ww-header-h-scrolled);
  background: rgba(255, 250, 244, .92);
  box-shadow: 0 1px var(--ww-line);
  backdrop-filter: blur(18px);
}

.ww-site-header-inner {
  width: min(calc(100% - 48px), 1320px);
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ww-site-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 850;
  letter-spacing: -.03em;
}
.ww-site-logo-mark { width: 34px; height: 34px; object-fit: contain; }
.ww-site-logo-text { font-size: 14px; }

.ww-site-nav {
  display: flex;
  gap: 28px;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
}
.ww-site-nav a { position: relative; }
.ww-site-nav a:not(.ww-site-nav-cta)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 100%;
  height: 1px;
  background: var(--ww-ink);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .3s;
}
.ww-site-nav a:hover::after,
.ww-site-nav a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}
/* 上の `.ww-site-header a`（詳細度 0-1-1）に負けないよう、
   CTAは必ずヘッダー付きのセレクタ（0-2-0）で指定する。
   単独の `.ww-site-nav-cta`（0-1-0）だと color:#fff が効かず、
   黒背景に黒文字になって見えなくなる。 */
.ww-site-header .ww-site-nav-cta {
  padding: 10px 18px;
  border-radius: 99px;
  color: #fff;
  background: var(--ww-ink);
}

.ww-site-menu-button {
  display: none;
  border: 0;
  background: none;
  width: 42px;
  height: 42px;
  position: relative;
}
.ww-site-menu-button::before,
.ww-site-menu-button::after {
  content: "";
  position: absolute;
  left: 9px;
  width: 24px;
  height: 1px;
  background: var(--ww-ink);
}
.ww-site-menu-button::before { top: 16px; }
.ww-site-menu-button::after { top: 25px; }

/* ============================================================
   共通フッター   template-parts/ww/footer 相当
   ============================================================ */

.ww-site-footer {
  padding: 34px 0;
  color: #c8c2bd;
  background: #302823;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: 11px;
  font-family: var(--ww-font);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}
.ww-site-footer-inner {
  width: min(calc(100% - 48px), var(--ww-max));
  margin-inline: auto;
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

/* ============================================================
   レスポンシブ
   ============================================================ */

@media (max-width: 900px) {
  .ww-site-nav { display: none; }
  .ww-site-menu-button { display: block; }
  .ww-site-header.is-menu-open .ww-site-nav {
    position: absolute;
    display: flex;
    /* ヘッダーの現在の高さに追従させる。
       100% は包含ブロック（.ww-site-header）の高さなので、
       通常時（--ww-header-h）とスクロール時（--ww-header-h-scrolled）の
       どちらにも自動で追従する。 */
    top: 100%;
    right: 24px;
    width: min(320px, calc(100vw - 48px));
    padding: 24px;
    border: 2px solid var(--ww-ink);
    border-radius: 20px;
    background: var(--ww-paper);
    box-shadow: 7px 7px 0 var(--ww-ink);
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
  }
  .ww-site-header.is-menu-open .ww-site-nav-cta { text-align: center; }
}

@media (max-width: 560px) {
  :root {
    --ww-header-h: 66px;
    --ww-hero-gap: 46px;   /* 66 + 46 = 112px（サービス紹介のSP値と一致） */
  }
  .ww-site-header-inner { width: min(calc(100% - 30px), var(--ww-max)); }
  .ww-site-logo-mark { width: 30px; height: 30px; }
  .ww-site-logo-text { font-size: 12px; }
  .ww-site-footer { padding: 28px 0; }
  .ww-site-footer-inner {
    width: min(calc(100% - 30px), var(--ww-max));
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ww-site-header { transition-duration: .01ms; }
}