/* =============================================================
   NEMUÉ beauty atelier — layout.css
   ヘッダー / モバイルメニュー / フッター / 固定CTA
   ============================================================= */

/* ---------- Header ---------- */
.l-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background-color 0.4s var(--ease-soft), box-shadow 0.4s var(--ease-soft);
}
.l-header.is-scrolled {
  background: rgba(250, 247, 242, 0.97);
  box-shadow: 0 1px 0 var(--color-line);
}
@supports (backdrop-filter: blur(8px)) {
  .l-header.is-scrolled {
    background: rgba(250, 247, 242, 0.90);
    backdrop-filter: blur(8px);
  }
}
.l-header__inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad-inline);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
  overflow: visible;
}
.l-header__logo {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
  flex: 1 1 auto;
  max-width: calc(100% - 64px);
}
.l-header__logo-en {
  font-family: var(--font-en);
  font-size: clamp(14px, 4.1vw, 18px);
  font-weight: 600;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.l-header__logo-ja {
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--color-text-sub);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 小型スマートフォン（320〜359px）でサブ表記が横幅を圧迫しないよう調整 */
@media (max-width: 359px) {
  .l-header__logo-ja {
    font-size: 9px;
    letter-spacing: 0.12em;
  }
}
/* デフォルト（0〜1199px）はモバイル型ヘッダー：ロゴ＋ハンバーガーのみ。
   ヘッダーCTAの表示制御は、共通ボタン .c-button より後で定義する必要があるため
   components.css 側に .c-button.l-header__cta として記述している。 */
.l-header__nav { display: none; }

.l-header__menu-btn {
  flex: 0 0 48px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 48px; height: 48px;
  border-radius: 50%;
}
.l-header__menu-btn span {
  display: block;
  width: 22px; height: 1.5px;
  background: var(--color-text);
  transition: transform 0.35s var(--ease-soft), opacity 0.3s;
}
.l-header__menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.l-header__menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.l-header__menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ---------- Mobile menu ---------- */
.c-mobile-menu {
  position: fixed;
  inset: 0;
  height: 100vh;
  height: 100dvh;
  z-index: 90;
  background: var(--color-bg);
  padding: calc(var(--header-h) + 24px) var(--pad-inline) 48px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease-soft), visibility 0.35s;
}
.c-mobile-menu.is-open { opacity: 1; visibility: visible; }
.c-mobile-menu__list { display: grid; gap: 4px; max-width: 480px; margin-inline: auto; }
.c-mobile-menu__link {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 14px 6px;
  border-bottom: 1px solid var(--color-line);
  font-size: 17px;
  letter-spacing: 0.06em;
}
.c-mobile-menu__link small {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--color-accent);
  text-transform: uppercase;
  min-width: 4.6em;
}
.c-mobile-menu__cta {
  margin-top: 32px;
  display: grid;
  gap: 12px;
  max-width: 480px;
  margin-inline: auto;
}

/* ---------- Footer ---------- */
.l-footer {
  background: #57504A;
  color: rgba(255, 254, 252, 0.94);
  padding: 64px 0 32px;
}
.l-footer__inner { display: grid; gap: 40px; }
.l-footer__logo-en {
  font-family: var(--font-en);
  font-size: 22px;
  letter-spacing: 0.16em;
  color: #fff;
}
.l-footer__logo-ja { font-size: 11px; letter-spacing: 0.26em; opacity: 0.85; margin-top: 4px; }
.l-footer__address { margin-top: 18px; font-size: 14px; line-height: 2; opacity: 0.94; }
.l-footer__address a { text-decoration: underline; text-underline-offset: 3px; }
.l-footer__nav { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 24px; }
.l-footer__nav a {
  font-size: 14px;
  letter-spacing: 0.05em;
  padding-block: 8px;
  display: inline-block;
  opacity: 0.94;
  transition: opacity 0.3s;
}
.l-footer__nav a:hover,
.l-footer__nav a:focus-visible { opacity: 1; }
.l-footer__bottom {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid rgba(252, 251, 248, 0.16);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  font-size: 12px;
  opacity: 0.85;
}

/* ---------- Mobile fixed CTA ---------- */
.c-fixed-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 80;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--color-line);
  border-top: 1px solid var(--color-line);
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateY(0);
  transition: transform 0.4s var(--ease-soft);
}
.c-fixed-cta.is-hidden { transform: translateY(110%); }
.c-fixed-cta a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--fixed-cta-h);
  padding: 8px 10px;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-align: center;
  line-height: 1.4;
}
.c-fixed-cta svg { width: 18px; height: 18px; flex: none; }
body { padding-bottom: calc(var(--fixed-cta-h) + env(safe-area-inset-bottom)); }

/* Footer：自主制作の注記 */
.l-footer__note {
  margin-top: 16px;
  max-width: 40em;
  font-size: 12px;
  line-height: 1.95;
  opacity: 0.82;
}
/* Fixed CTA：単一の制作相談導線（filled） */
.c-fixed-cta__primary { background: var(--color-cta); color: #fff; }
.c-fixed-cta__primary:focus-visible { outline-offset: -4px; }