/* =============================================================
   NEMUÉ beauty atelier — responsive.css (V3)
   ブレークポイント / Reduced Motion
   ============================================================= */

@media (min-width: 768px) {
  :root { --pad-inline: 48px; }

  /* Hero：デスクトップはコピー左・ビジュアル右（HTMLはビジュアル先行のままgrid-areasで配置） */
  .p-hero__inner {
    grid-template-columns: 1.05fr 0.95fr;
    grid-template-areas: "copy visual";
    align-items: center;
    gap: 56px;
  }
  .p-hero__visual { grid-area: visual; }
  .p-hero__copy { grid-area: copy; }
  .p-hero__art { max-width: 470px; aspect-ratio: 4 / 5.2; }
  .p-hero { padding-bottom: clamp(100px, 12vw, 150px); }

  .p-worries__list { max-width: 620px; }
  .p-concept__inner { grid-template-columns: 0.9fr 1.1fr; gap: 76px; }
  .p-menus__grid { grid-template-columns: repeat(3, 1fr); }

  .p-people__inner {
    grid-template-columns: 1.15fr 0.85fr;
    gap: 64px;
    align-items: center;
  }
  .p-people__visuals { gap: 22px; }

  .p-access__inner { grid-template-columns: 1.1fr 0.9fr; gap: 52px; align-items: start; }

  .l-footer__inner { grid-template-columns: 1fr auto; align-items: start; }
  .l-footer__nav { grid-template-columns: repeat(3, auto); gap: 8px 36px; }

  /* PROMISE：2列×2行 */
  .p-promise__grid { grid-template-columns: 1fr 1fr; column-gap: 48px; }
  .p-promise__item { border-bottom: none; }
  .p-promise__item:nth-child(3),
  .p-promise__item:nth-child(4) { border-bottom: 1px solid var(--color-line); }
}

/* 1024〜1199px：ページレイアウトのみ調整。ヘッダーはモバイル型を維持する */
@media (min-width: 1024px) {
  :root { --pad-inline: 64px; }

  .p-cta__actions { flex-direction: row; justify-content: center; gap: 16px 34px; }

  /* VALUES：3項目を横に展開し、数字を上に置いた編集的レイアウトへ
     （768pxでは1列あたりの幅が不足し本文が詰まるため1024pxから） */
  .p-values__list { grid-template-columns: repeat(3, 1fr); column-gap: 40px; }
  .p-values__item {
    grid-template-columns: 1fr;
    row-gap: 14px;
    padding: 30px 0 0;
    border-bottom: none;
  }
  .p-values__item:last-child { border-bottom: none; }
  .p-values__num { padding-top: 0; }

  /* GUIDANCE：左に見出し・右に導線の非対称レイアウト
     （768pxでは左カラムが狭く見出しが不自然に折り返すため1024pxから） */
  .p-guidance__inner {
    grid-template-columns: 0.82fr 1.18fr;
    column-gap: 56px;
    align-items: start;
  }
}

/* 1200px以上：ここで初めてPC型ヘッダーへ切り替える
   （ロゴ＋5項目ナビ＋CTAが余裕をもって収まる幅） */
@media (min-width: 1200px) {
  :root { --header-h: 84px; }

  .l-header__menu-btn { display: none; }
  .l-header__logo { flex: 0 0 auto; max-width: none; }
  .l-header__nav { display: block; }
  .l-header__nav ul { display: flex; gap: 26px; }
  .l-header__nav a {
    font-size: 14px;
    letter-spacing: 0.06em;
    padding-block: 8px;
    position: relative;
    white-space: nowrap;
  }
  .l-header__nav a::after {
    content: "";
    position: absolute;
    left: 0; bottom: 2px;
    width: 100%; height: 1px;
    background: var(--color-accent-soft);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.35s var(--ease-soft);
  }
  .l-header__nav a:hover::after,
  .l-header__nav a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
  .c-button.l-header__cta {
    display: inline-flex;
    flex: none;
    min-height: 44px;
    padding: 8px 22px;
    font-size: 14px;
    white-space: nowrap;
  }

  .c-fixed-cta { display: none; }
  body { padding-bottom: 0; }

  .p-hero { padding-top: calc(var(--header-h) + 44px); }
}

@media (min-width: 1280px) {
  .p-hero__art { max-width: 500px; }
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html.js .js-reveal { opacity: 1; transform: none; }
}