/* =====================================================
   common.css — 全ページ共通コンポーネント
   header / nav / フローティングハンバーガー / ドロワーメニュー / footer
   ここを修正すれば index.html / contact.html / privacy.html
   すべてに反映される（各ページの<style>には共通部分を書かないこと）

   modifier:
   - .header--static          … サブページ用（固定追従なし・白背景）
   - .floating-menu-btn--plain … サブページ用（モバイルで透明背景・黒バー）
   ===================================================== */

/* Header: 半透明背景・常時追従ロゴ */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 36px;
  gap: 0;
  z-index: 100;
  background: rgba(255,255,255,.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  pointer-events: auto;
}
.header-brand {
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0;
  pointer-events: auto;
}
.header-right {
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0;
  gap: 0;
  pointer-events: auto;
}
.logo { display: flex; align-items: center; }
.logo-img { width: 100%; max-width: 202px; height: auto; display: block; }

/* Nav */
.nav { display: flex; }
.nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 4px;
  height: 76px;
  color: #666;
  transition: color 0.2s ease;
  white-space: nowrap;
}
.nav a b {
  font: 700 14px/1 Inter, sans-serif;
  letter-spacing: 0.06em;
  color: var(--blue);
}
.nav a span {
  font: 500 10px/1 "IBM Plex Sans JP", sans-serif;
  letter-spacing: 0.02em;
  color: #999;
}
.nav a:hover { color: var(--blue); }
.nav a:hover span { color: var(--blue); }
.header-brand a { display: flex; align-items: center; }

/* サブページ用ヘッダー（固定追従なし・白背景） */
.header--static {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  z-index: 10;
  background: #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ── フローティングハンバーガー ── */
.floating-menu-btn {
  position: fixed;
  top: 20px;
  right: 24px;
  z-index: 200;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  border: none;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  cursor: pointer;
  display: none;
  place-items: center;
  padding: 0;
  transition: opacity 0.2s ease;
}
.floating-menu-btn:hover { background: transparent; box-shadow: none; opacity: .68; }
.floating-menu-btn > span:not(.close-mark) {
  grid-area: 1/1;
  display: block;
  width: 28px;
  height: 1.5px;
  background: #111;
  filter: none;
  transform-origin: center;
  transition: transform 0.22s ease, opacity 0.22s ease;
}
.floating-menu-btn span:nth-child(1) { transform: translateY(-5px); transition: opacity 0.2s ease; }
.floating-menu-btn span:nth-child(2) { transition: opacity 0.2s ease; }
.floating-menu-btn span:nth-child(3) { transform: translateY(5px); transition: opacity 0.2s ease; }
body.menu-open .floating-menu-btn span:nth-child(1),
body.menu-open .floating-menu-btn span:nth-child(2),
body.menu-open .floating-menu-btn span:nth-child(3) { opacity: 0; }
body.menu-open .floating-menu-btn {
  z-index: 1001;
}
.floating-menu-btn .close-mark {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  background: transparent;
  filter: none;
  transform: none;
  font: 300 26px/1 Inter, sans-serif;
  color: #fff;
}
body.menu-open .floating-menu-btn .close-mark {
  display: flex;
  opacity: 1;
}
/* サブページ用：角丸なし（全ブレークポイント共通） */
.floating-menu-btn--plain { border-radius: 0; }

/* ── FOOTER ── */
.footer {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background:
    radial-gradient(circle at 18% 14%, rgba(35,71,126,.23), transparent 35%),
    linear-gradient(135deg, #07101f 0%, #0b1525 52%, #07101d 100%);
  padding: 0;
  color: #fff;
}
.footer-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "brand" "nav";
  gap: 126px;
  width: min(1440px, calc(100% - 120px));
  margin: 0 auto;
  padding: 96px 0 80px;
  align-items: start;
}
/* ブランドエリア */
.footer-brand {
  grid-area: brand;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-top: 0;
}
.footer-logo-img {
  height: 42px; width: auto; display: block;
  filter: brightness(0) invert(1);
}
.footer-catchcopy { display: flex; flex-direction: column; gap: 10px; }
.footer-catchcopy-ja {
  font: 600 14px/1.55 "IBM Plex Sans JP", sans-serif;
  color: #fff;
  margin: 0;
  letter-spacing: 0.01em;
}
.footer-catchcopy-en {
  font: 500 14px/1.6 Inter, sans-serif;
  color: rgba(255,255,255,0.36);
  letter-spacing: 0.035em;
  margin: 0;
}
/* ナビエリア */
.footer-nav-area {
  grid-area: nav;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 80px;
  margin-top: -60px;
}
.footer-nav-group {
  min-height: 220px;
  padding: 0;
  border: 0;
}
.footer-nav-group h4 {
  font: 700 15px/1.3 "IBM Plex Sans JP", sans-serif;
  letter-spacing: .02em;
  color: #fff;
  margin: 0 0 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(167,189,218,.18);
}
.footer-nav-group ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 20px;
}
.footer-nav-group a {
  display: block;
  font-size: 14px;
  font-weight: 400;
  color: rgba(255,255,255,0.62);
  letter-spacing: 0.02em;
  transition: color 0.2s ease;
  text-decoration: none;
}
.footer-nav-group a:hover { color: #fff; }
/* ボトム */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 1;
  width: min(1440px, calc(100% - 120px));
  margin: 0 auto;
  padding: 36px 0 40px;
  border-top: 1px solid rgba(167,189,218,.18);
}
.footer-copyright { margin: 0; font-size: 12px; color: rgba(255,255,255,0.42); letter-spacing: 0.04em; }
.footer-privacy {
  font-size: 12px;
  color: rgba(255,255,255,0.48);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-privacy:hover { color: rgba(255,255,255,0.75); }

/* ── HAMBURGER MENU（ドロワー） ── */
body.menu-open { overflow: hidden; }
/* メニューオーバーレイ（背面を暗くする） */
.menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
body.menu-open .menu-overlay {
  opacity: 1;
  pointer-events: auto;
}

.site-menu {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: clamp(280px, 48vw, 480px);
  z-index: 1000;
  display: grid;
  grid-template-rows: 1fr;
  background: rgba(10, 12, 22, 0.82);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  visibility: hidden;
  clip-path: circle(0% at 100% 100%);
  transition: clip-path 0.52s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.52s;
}
body.menu-open .site-menu { visibility: visible; clip-path: circle(150% at 100% 100%); }
.site-menu__inner {
  min-height: 100%;
  padding: 80px 36px 36px;
  display: grid;
  grid-template-rows: auto 1fr;
  align-content: stretch;
  gap: 48px;
}
.site-menu__nav { display: grid; gap: 0; }
.site-menu__nav a {
  display: grid;
  grid-template-columns: 112px 1fr;
  align-items: baseline;
  gap: 0 20px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.88);
  line-height: 1.2;
  opacity: 0;
  transform: translateX(16px);
  transition: opacity 0.48s cubic-bezier(.22, .61, .36, 1), transform 0.48s cubic-bezier(.22, .61, .36, 1), color 0.2s ease;
}
body.menu-open .site-menu__nav a { opacity: 1; transform: translateX(0); }
body.menu-open .site-menu__nav a:nth-child(1) { transition-delay: 0.22s; }
body.menu-open .site-menu__nav a:nth-child(2) { transition-delay: 0.28s; }
body.menu-open .site-menu__nav a:nth-child(3) { transition-delay: 0.34s; }
body.menu-open .site-menu__nav a:nth-child(4) { transition-delay: 0.40s; }
body.menu-open .site-menu__nav a:nth-child(5) { transition-delay: 0.46s; }
body.menu-open .site-menu__nav a:nth-child(6) { transition-delay: 0.52s; }
body.menu-open .site-menu__nav a:nth-child(7) { transition-delay: 0.58s; }
/* 英語ラベル */
.site-menu__nav a b {
  font: 700 19px/1 Inter, sans-serif;
  letter-spacing: 0.04em;
  color: #fff;
  font-style: normal;
  text-transform: uppercase;
}
/* 日本語名 */
.site-menu__nav a em {
  font: 500 12px/1.3 "IBM Plex Sans JP", sans-serif;
  font-style: normal;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.02em;
}
.site-menu__nav a:hover em,
.site-menu__nav a:focus-visible em { color: #fff; }
.site-menu__nav a:hover b,
.site-menu__nav a:focus-visible b { color: var(--blue); }
.site-menu__brand {
  align-self: end;
  display: grid;
  gap: 22px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.08);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.48s cubic-bezier(.22, .61, .36, 1), transform 0.48s cubic-bezier(.22, .61, .36, 1);
}
body.menu-open .site-menu__brand {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.64s;
}
.site-menu__brand-logo {
  width: min(220px, 72%);
  height: auto;
  display: block;
  filter: brightness(0) invert(1);
}
.site-menu__catchcopy {
  display: grid;
  gap: 8px;
}
.site-menu__catchcopy-ja {
  margin: 0;
  color: #fff;
  font: 600 14px/1.7 "IBM Plex Sans JP", sans-serif;
  letter-spacing: 0.01em;
}
.site-menu__catchcopy-en {
  margin: 0;
  color: rgba(255,255,255,0.38);
  font: 500 12px/1.6 Inter, sans-serif;
  letter-spacing: 0.035em;
}

/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
      .floating-menu-btn { display: grid; }
      .nav { display: none; }
      .header-right { padding: 0; }
      .logo-img { width: 100%; max-width: 172px; height: auto; }
      .site-menu__inner { padding: 76px 30px 32px; gap: 36px; }
      .site-menu__brand-logo { width: min(200px, 74%); }
      .label { font-size: 20px; margin: 0 0 32px; }
      .footer-inner { width: calc(100% - 64px); gap: 42px; padding: 64px 0 48px; }
      .footer-nav-area { gap: 28px; margin-top: 0; }
      .footer-nav-group { min-height: 0; }
      .footer-nav-group h4 { margin-bottom: 22px; padding-bottom: 16px; }
      .footer-nav-group ul { gap: 16px; }
      .footer-bottom { width: calc(100% - 64px); }
}

@media (min-width: 541px) and (max-width: 900px) {
      .header { height: 72px; padding: 0 28px; }
      .logo-img { max-width: 160px; }
      .floating-menu-btn { top: 22px; right: 28px; }
      .site-menu { width: min(440px, 58vw); }
      .site-menu__inner { padding: 84px 34px 34px; gap: 42px; }
      .site-menu__nav a { grid-template-columns: 105px 1fr; padding: 15px 0; }
}

@media (max-width: 540px) {
      .floating-menu-btn {
        position: fixed !important;
        top: 10px !important;
        right: 24px !important;
        left: auto !important;
        width: 44px;
        height: 44px;
        z-index: 1200 !important;
        display: grid !important;
        opacity: 1;
        border-radius: 50%;
        background: rgba(10, 12, 22, 0.18);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
      }
      .floating-menu-btn:hover { background: rgba(10, 12, 22, 0.24); }
      .floating-menu-btn > span:not(.close-mark) {
        background: #fff !important;
        opacity: 1;
      }
      .header { height: 64px; padding: 0 18px; }
      .header-brand { padding: 0; }
      .header-right { padding: 0; }
      .logo-img { width: 100%; max-width: 142px; height: auto; }
      .site-menu { width: min(86vw, 360px); }
      .site-menu__inner { padding: 70px 24px 28px; gap: 28px; }
      .site-menu__nav a b { font-size: 16px; }
      .site-menu__nav a {
        grid-template-columns: 100px 1fr;
        gap: 0 14px;
        padding: 13px 0;
      }
      .site-menu__brand { gap: 16px; padding-top: 22px; }
      .site-menu__brand-logo { width: min(178px, 78%); }
      .site-menu__catchcopy-ja { font-size: 12px; line-height: 1.65; }
      .site-menu__catchcopy-en { font-size: 11px; }
  /* サブページ用：透明背景・黒バーのハンバーガー */
  .floating-menu-btn--plain {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .floating-menu-btn--plain:hover { background: transparent; }
  .floating-menu-btn--plain > span:not(.close-mark) {
    background: #111 !important;
    filter: none;
  }
      .footer-inner {
        grid-template-columns: 1fr;
        grid-template-areas: "brand" "nav";
        width: calc(100% - 40px);
        padding: 56px 0 38px;
        gap: 40px;
      }
      .footer {
        min-height: 0;
        overflow: visible;
      }
      .footer-brand { gap: 26px; padding-top: 0; }
      .footer-logo-img { height: 42px; }
      .footer-catchcopy-ja { font-size: 16px; line-height: 1.75; }
      .footer-catchcopy-en { font-size: 12px; line-height: 1.75; }
      .footer-nav-area { grid-template-columns: 1fr; gap: 4px; padding-top: 0; margin-top: 0; }
      .footer-nav-group,
      .footer-nav-group:first-child,
      .footer-nav-group:last-child {
        min-height: 0;
        padding: 26px 0;
        border-left: 0;
        border-top: 1px solid rgba(167,189,218,.16);
      }
      .footer-nav-group:first-child { padding-top: 26px; }
      .footer-nav-group h4 { margin-bottom: 18px; padding-bottom: 0; border-bottom: 0; }
      .footer-nav-group ul { gap: 14px; }
      .footer-nav-group a { font-size: 13px; line-height: 1.7; }
      .footer-bottom {
        width: calc(100% - 40px);
        padding: 22px 0 30px;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
      }
}