@charset "UTF-8";
/* =========================================================
   WWE — レイアウト（コンテナ・セクション・ヘッダー・フッター）
   ブレークポイント: SP <=767 / TAB 768-1023 / PC >=1024
   基本はモバイルファーストで書き、PC を min-width で足す。
   ========================================================= */

/* ---- コンテナ ---- */
.wwe-container {
  width: 100%;
  max-width: var(--wwe-container);
  margin-inline: auto;
  padding-inline: var(--wwe-gutter);
}
.wwe-container--narrow { max-width: var(--wwe-container-narrow); }

/* ---- セクション ---- */
.wwe-sec {
  padding-block: var(--wwe-sec-y);
}
.wwe-sec--white { background: var(--wwe-bg); }
.wwe-sec--soft  { background: var(--wwe-bg-soft); }
.wwe-sec--mid   { background: var(--wwe-bg-mid); }
.wwe-sec--navy  { background: var(--wwe-navy); color: var(--wwe-on-navy); }

.wwe-sec--navy .wwe-sec-head__title { color: var(--wwe-on-navy); }
.wwe-sec--navy .wwe-sec-head__lead   { color: var(--wwe-on-navy-sub); }
/* eyebrow は明るい地向けに --wwe-gold-dark にしてあるため、ネイビー地では戻す */
.wwe-sec--navy .wwe-sec-head__eyebrow { color: var(--wwe-gold); }

/* =========================================================
   ヘッダー
   ========================================================= */
.wwe-header {
  position: sticky;
  top: 0;
  z-index: var(--wwe-z-header);
  background: var(--wwe-bg);
  border-bottom: 1px solid var(--wwe-line);
}

.wwe-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 60px;
  padding-block: 10px;
}

/* ---- ロゴ ----
   画像ロゴ（.wwe-logo__img）と文字ロゴ（.wwe-logo__brand）のどちらでも
   同じ外枠に収まるようにしてある。media-map.php に添付IDを入れると画像へ切り替わる。 */
.wwe-logo { display: block; line-height: 1.3; }

.wwe-logo__img {
  height: var(--wwe-logo-h);
  width: auto;      /* 縦横比はロゴ本来の比率にまかせる */
  max-width: 100%;
}

.wwe-logo__brand {
  display: block;
  font-size: clamp(17px, 2.4vw, 21px);
  font-weight: var(--wwe-fw-bold);
  color: var(--wwe-navy);
  letter-spacing: .02em;
}
.wwe-logo__tagline {
  display: block;
  margin-top: 2px;
  font-size: var(--wwe-fs-small);
  font-weight: var(--wwe-fw-normal);
  /* 13px・白地。--wwe-gold は 3.29:1 で AA に届かないため gold-dark を使う。 */
  color: var(--wwe-gold-dark);
  letter-spacing: .06em;
}

/* ネイビー地（SPメニュー）に置く文字ロゴ */
.wwe-logo__brand--light { color: var(--wwe-on-navy); }

/* ---- ヘッダー右側（PC のみ表示） ---- */
.wwe-header__actions { display: none; }

/* ---- ナビゲーション（PC のみ。SP はオーバーレイ） ---- */
.wwe-nav { display: none; }

/* ---- ハンバーガー ---- */
.wwe-burger {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--wwe-line);
  border-radius: var(--wwe-radius-btn);
  background: var(--wwe-bg);
}
.wwe-burger__bars {
  position: relative;
  display: block;
  width: 20px;
  height: 2px;
  background: var(--wwe-navy);
  transition: background .2s var(--wwe-ease);
}
.wwe-burger__bars::before,
.wwe-burger__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: var(--wwe-navy);
  transition: transform var(--wwe-dur) var(--wwe-ease);
}
.wwe-burger__bars::before { top: -6px; }
.wwe-burger__bars::after  { top: 6px; }

.wwe-burger[aria-expanded="true"] .wwe-burger__bars { background: transparent; }
.wwe-burger[aria-expanded="true"] .wwe-burger__bars::before { transform: translateY(6px) rotate(45deg); }
.wwe-burger[aria-expanded="true"] .wwe-burger__bars::after  { transform: translateY(-6px) rotate(-45deg); }

/* ---- SP のナビオーバーレイ ---- */
.wwe-navdrawer {
  position: fixed;
  inset: 0;
  z-index: var(--wwe-z-nav-overlay);
  display: flex;
  flex-direction: column;
  padding: 20px var(--wwe-gutter) 32px;
  background: var(--wwe-navy);
  color: var(--wwe-on-navy);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--wwe-dur) var(--wwe-ease),
              transform var(--wwe-dur) var(--wwe-ease),
              visibility var(--wwe-dur);
}
.wwe-navdrawer.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.wwe-navdrawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.wwe-navdrawer__close {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: var(--wwe-radius-btn);
  color: var(--wwe-on-navy);
  font-size: 20px;
}
.wwe-navdrawer__list { display: grid; gap: 2px; }
.wwe-navdrawer__link {
  display: block;
  padding: 14px 4px;
  min-height: 44px;
  font-weight: var(--wwe-fw-bold);
  color: var(--wwe-on-navy);
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.wwe-navdrawer__ctas { display: grid; gap: 10px; margin-top: 28px; }
.wwe-navdrawer__hours {
  margin-top: 24px;
  font-size: var(--wwe-fs-note);
  color: var(--wwe-on-navy-sub);
}

/* body のスクロールを止める（ドロワー展開中） */
.wwe-body.is-nav-open { overflow: hidden; }

/* =========================================================
   SP 画面下部の固定CTA
   JS で body 直下へ移動する（iOS Safari の position:fixed 対策）
   ========================================================= */
.wwe-spcta {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px; /* env(safe-area-inset-bottom) は iOS で大きく返ることがあるため固定値 */
  z-index: var(--wwe-z-sp-cta);
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--wwe-dur) var(--wwe-ease),
              transform var(--wwe-dur) var(--wwe-ease),
              visibility var(--wwe-dur);
}
.wwe-spcta.is-visible { opacity: 1; visibility: visible; transform: none; }
.wwe-spcta.is-hidden  { opacity: 0; visibility: hidden; transform: translateY(12px); }
.wwe-spcta .wwe-btn { box-shadow: var(--wwe-shadow-pop); }

@media (min-width: 768px) {
  .wwe-spcta { display: none; }
}

/* =========================================================
   フッター
   ========================================================= */
.wwe-footer {
  background: var(--wwe-navy-dark);
  color: var(--wwe-on-navy);
  padding-block: 56px 32px;
}
.wwe-footer__cols {
  display: grid;
  gap: 32px;
}
.wwe-footer__title {
  font-size: var(--wwe-fs-note);
  font-weight: var(--wwe-fw-bold);
  color: var(--wwe-gold);
  letter-spacing: .1em;
  margin-bottom: 12px;
}
.wwe-footer__list { display: grid; gap: 2px; }
.wwe-footer__link {
  display: inline-block;
  padding: 8px 0;
  min-height: 44px;
  line-height: 28px;
  font-size: var(--wwe-fs-note);
  color: var(--wwe-on-navy);
}
.wwe-footer__link:hover { color: var(--wwe-gold); }

.wwe-footer__info {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.16);
  font-size: var(--wwe-fs-small);
  color: var(--wwe-on-navy-sub);
  line-height: 1.9;
}
.wwe-footer__brand {
  font-size: var(--wwe-fs-lead);
  font-weight: var(--wwe-fw-bold);
  color: var(--wwe-on-navy);
  margin-bottom: 4px;
}

/* =========================================================
   パンくず（下層ページのみ）
   ========================================================= */
.wwe-crumbs {
  padding-block: 14px;
  background: var(--wwe-bg-soft);
  font-size: var(--wwe-fs-small);
}
.wwe-crumbs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
}
.wwe-crumbs__sep { color: var(--wwe-text-mute); }
.wwe-crumbs__link { color: var(--wwe-text-body); text-decoration: underline; }
/* 押せる範囲を 44px 以上に広げる。見た目は変えない（上下左右に余白を足し、同じだけ外側を詰める。
   上下の 12px は、パンくずの帯の余白 14px の中に収まる）。2026-11-11 の測定で 40×19 だった */
.wwe-crumbs__link { display: inline-block; padding: 12px 4px; margin: -12px -4px; }
.wwe-crumbs__current { color: var(--wwe-text); font-weight: var(--wwe-fw-bold); }

/* =========================================================
   TAB 以上
   ========================================================= */
@media (min-width: 768px) {
  .wwe-footer__cols { grid-template-columns: repeat(3, 1fr); }
}

/* =========================================================
   PC
   ========================================================= */
@media (min-width: 1024px) {
  .wwe-header__bar { min-height: 78px; }

  .wwe-burger { display: none; }

  .wwe-header__actions {
    display: flex;
    align-items: center;
    gap: 20px;
  }
  .wwe-header__tel { text-align: right; line-height: 1.35; }
  .wwe-header__tel-num {
    display: block;
    font-size: 21px;
    font-weight: var(--wwe-fw-bold);
    color: var(--wwe-navy);
    letter-spacing: .02em;
  }
  .wwe-header__hours {
    display: block;
    font-size: var(--wwe-fs-small);
    color: var(--wwe-text-mute);
  }

  .wwe-nav {
    display: block;
    background: var(--wwe-navy);
  }
  .wwe-nav__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
  }
  .wwe-nav__link {
    display: block;
    padding: 14px 22px;
    min-height: 44px;
    font-size: var(--wwe-fs-note);
    font-weight: var(--wwe-fw-bold);
    color: var(--wwe-on-navy);
    letter-spacing: .04em;
  }
  .wwe-nav__link:hover,
  .wwe-nav__link:focus-visible { background: var(--wwe-navy-soft); }

  /* スクロール後は上段を縮める。
     🔴 タグライン（独立・事業づくりの相談窓口）と営業時間は
        スクロール後も残す（2026-08-19 荻田ご指示）。
        以前は display:none で消していたが、
        「あったほうがいい」とのことで表示したまま余白だけ詰める。 */
  .wwe-header.is-compact .wwe-header__bar {
    min-height: 64px;
    padding-block: 6px;
  }

  .wwe-navdrawer { display: none; }
}