/* ============================================================
   North AI Works — 共通スタイル
   トークンは tokens.css に定義。ここでは値を直書きしない。

   規範（/DESIGN.md より）:
   - 影を使わない。階層は明度差・罫線・余白の3手段のみ
   - 角丸は最大4px
   - グラデーションを使わない（ヒーロー映像上のスクリムを除く）
   - accent は CTA の塗りのみ・1画面1箇所
   - 余白は1箇所で管理し、コンポーネント側から上書きしない
   ============================================================ */

/* --- リセット ------------------------------------------------ */
*,
*::before,
*::after { box-sizing: border-box; }

body,
h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }

ul[class], ol[class] { list-style: none; padding: 0; margin: 0; }

img, picture, video { max-width: 100%; display: block; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* --- 基本 ---------------------------------------------------- */
body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.85;
  color: var(--color-fg);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(1.75rem, 4.2vw, 2.5rem); line-height: 1.3; }
h2 { font-size: clamp(1.375rem, 3vw, 1.75rem); line-height: 1.35; }
h3 { font-size: 1.25rem; font-weight: 700; line-height: 1.4; }

/* 本文は40〜45文字。日本語は全角なので欧文の65文字基準では長すぎる */
p { max-width: 42em; }

a { color: var(--color-accent-sub); }

/* focus は全インタラクティブ要素で可視。副アクセント2px */
:focus-visible {
  outline: 2px solid var(--color-accent-sub);
  outline-offset: 2px;
}

/* --- レイアウト ---------------------------------------------- */
/* 余白は .naw-section で一括管理する。
   コンポーネント側から padding を上書きしないこと（詳細度の事故を防ぐ） */
.naw-section {
  max-width: var(--w-wide);
  margin-inline: auto;
  padding-block: var(--sp-3xl);
  padding-inline: var(--naw-pad-inline);
}

/* 面のセクションが中身の幅を計算するのに使う。
   .naw-section の padding-inline と必ず同じ値に保つこと */
:root { --naw-pad-inline: var(--sp-xl); }

/* signature: 幅の収束。セクションが進むほど狭くなる */
.naw-section--mid { max-width: var(--w-mid); }
.naw-section--narrow { max-width: var(--w-narrow); }
.naw-section--tight { max-width: var(--w-tight); }

/* --- 面（全幅の帯） ------------------------------------------ */
/* 面は全幅に伸ばし、中身の幅は signature（--mid/--narrow/--tight）に従わせる。
   セクション自身を全幅にして中身側で幅を絞る方式。要素が画面幅を超えないので
   横スクロールが原理的に発生しない。
   ⚠️ 2026-08-05: 次の2方式は実測で不採用。同じ轍を踏まないこと。
     - box-shadow: 0 0 0 100vmax + clip-path: inset(0 -100vmax)
       → 768px 以下で面が塗られない（clip-path が原因。影自体は出ていた）
     - ::before に left/right: -50vmax
       → 全ビューポートで横スクロールが出る
         （body の overflow-x: hidden は html がスクロール主体のため効かない） */
.naw-section--surface,
.naw-section--sage {
  background: var(--naw-band);
  max-width: none;
}

/* 面の中身は signature の幅に従わせる。--mid/--narrow/--tight は
   .naw-section 側の max-width なので、面を敷く（max-width: none）と効かなくなる。
   そこで中身側に同じ幅の箱を作って中央に寄せる。
   padding-inline の分を引くこと。引かないと面のセクションだけ中身が広くなり、
   白セクションと左端が揃わない（2026-08-05 実測で発見。80px ズレていた）。 */
.naw-section--surface > *,
.naw-section--sage > * {
  max-width: calc(var(--naw-inner, var(--w-narrow)) - var(--naw-pad-inline) * 2);
  margin-inline: auto;
}

.naw-section--mid.naw-section--surface,
.naw-section--mid.naw-section--sage { --naw-inner: var(--w-mid); }

.naw-section--narrow.naw-section--surface,
.naw-section--narrow.naw-section--sage { --naw-inner: var(--w-narrow); }

.naw-section--tight.naw-section--surface,
.naw-section--tight.naw-section--sage { --naw-inner: var(--w-tight); }

/* 面の色。sage に載せてよい文字は fg のみ（4.58 AA / DESIGN.md） */
.naw-section--surface { --naw-band: var(--color-surface); }
.naw-section--sage    { --naw-band: var(--color-sage); }

@media (max-width: 768px) {
  /* padding を変えたら --naw-pad-inline も一緒に変えること。
     面のセクションが中身の幅を計算するのに使っている */
  :root { --naw-pad-inline: var(--sp-lg); }

  .naw-section {
    padding-block: var(--sp-2xl);
    padding-inline: var(--naw-pad-inline);
  }
}

/* --- 見出しまわり -------------------------------------------- */
.naw-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: var(--sp-md);
}

.naw-lead {
  color: var(--color-muted);
  margin-top: var(--sp-md);
}

/* --- ボタン -------------------------------------------------- */
/* accent と accent-sub は輝度差1.01。塗りを2つ並べると境界が消えるため、
   並列時は必ず片方を枠線型にする */
.naw-btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
  padding: 14px 28px;
  border-radius: var(--r-sm);
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.naw-btn--primary {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.naw-btn--primary:hover,
.naw-btn--primary:focus-visible {
  background: var(--color-accent-hover);
}

.naw-btn--secondary {
  background: transparent;
  color: var(--color-fg);
  border-color: var(--color-line);
}

.naw-btn--secondary:hover,
.naw-btn--secondary:focus-visible {
  background: var(--color-surface);
}

.naw-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-md);
  margin-top: var(--sp-xl);
}

/* --- カード -------------------------------------------------- */
/* 影は付けない。面の明度差と罫線で階層を作る */
.naw-card {
  background: var(--color-surface);
  border-radius: var(--r-md);
  padding: var(--sp-lg);
}

/* --- 数値（JetBrains Mono・等幅数字） ------------------------ */
.naw-num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* signature は「幅の収束」に一本化した（2026-08-02）。
   中央の縦線は併用すると過剰になるため採用しない。
   奥行きは --w-wide → --w-mid → --w-narrow → --w-tight の段階で表現する。 */

/* --- モーション ---------------------------------------------- */
/* 初期値は「見えている」状態。JS無効・GSAP読込失敗でも内容が読める */
.naw-reveal {
  opacity: 1;
  transform: none;
}

/* JSが動く環境でのみ、初期状態を隠してから reveal する。
   .js クラスは <html> に JS から付与される */
.js .naw-reveal {
  opacity: 0;
  transform: translateY(12px);
}

.js .naw-reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity .5s ease, transform .5s ease;
}

/* 型B: 軸から展開 */
.js .naw-reveal--axis {
  opacity: 0;
  transform: scaleX(.94);
  transform-origin: center;
}

.js .naw-reveal--axis.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity .6s ease, transform .6s ease;
}

@media (prefers-reduced-motion: reduce) {
  .js .naw-reveal,
  .js .naw-reveal--axis,
  .js .naw-reveal.is-visible,
  .js .naw-reveal--axis.is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* --- ナビ ---------------------------------------------------- */
/* 参考サイト（phaide.ai）と同じ挙動（2026-08-03）
     ・常に fixed で画面上部に追従する
     ・ヒーロー上では透明（映像を遮らない）
     ・ヒーローを抜けたら暗い半透明＋blur の帯になる

   ⚠️ sticky にしないこと。透明でも高さを占め、ヒーローが下に
      押し下げられて上端に白帯が出る（2026-08-03 実測で確認）。
   ⚠️ absolute にもしないこと。文書上端に固定されるためスクロールで
      画面外へ流れる（実測: 切替時にロゴが860px跳ぶ）。

   fixed で流れから抜けるぶん、本文が潜り込まないよう
   ヒーロー側に padding を持たせている（hero.css の .naw-hero-content）。
   ヒーローのない下層ページは body 側で余白を確保する（下記）。 */
.naw-nav {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: 100;
  background: rgba(20, 20, 19, .72);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, .10);
  transition: background-color .3s ease, border-color .3s ease, padding .3s ease;
}

/* 🚨 メニューを開いている間は backdrop-filter を必ず外すこと。
      backdrop-filter は position:fixed な子孫の containing block になるため、
      これが効いていると全画面メニューの inset:0 が「ビューポート」ではなく
      「ナビの帯（高さ61px）」を基準に解決され、メニューが帯の高さに潰れる。

      2026-08-03 の不具合: ヒーロー上では .is-over-hero が backdrop-filter を
      none にしていたため全画面で開けたが、FAQ等へ移動して帯が戻ると
      同じメニューが 192px に潰れた（390x844 実測 844px → 192px）。
      「一度メニューからFAQを選び、そこで再度ハンバーガーを押すと崩れる」
      という再現条件だったのはこのため。

      メニューは帯より前面に全画面で覆いかぶさるので、開いている間に
      帯のぼかしが無くなっても見た目に影響はない。

      クラスは JS（site.js の setOpen）が付ける。:has() に頼ると
      非対応ブラウザで黙って不具合が戻るため、状態はJSから明示的に出す。 */
.naw-nav.is-menu-open {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.naw-nav .naw-nav-logo { color: #FFFFFF; }
.naw-nav .naw-nav-links a { color: rgba(255, 255, 255, .78); }
.naw-nav .naw-nav-links a:hover { color: #FFFFFF; }

/* --- ヒーロー映像に重なっている間 ----------------------------- */
/* 映像を遮らないよう帯を消す。文字は影で浮かせる。

   ✅ 素のままだと白文字 2.39:1 で不足するが、
      hero.css のスクリム（上端 40% のグラデーション）が下に効くため
      実測では AA を満たす（2026-08-03 レンダリング実測）。

        ロゴ    6.01:1（1440x900）/ 6.26:1（390x844）
        リンク  6.24:1（1440x900）

      ⚠️ スクリムに依存している。hero.css の
         .naw-hero-scrim 上端の濃度を下げるとここが破綻する。 */
.naw-nav.is-over-hero {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: transparent;
}

.naw-nav.is-over-hero .naw-nav-logo,
.naw-nav.is-over-hero .naw-nav-links a {
  text-shadow: 0 1px 12px rgba(0, 0, 0, .7);
}

/* ヒーローのないページはナビの高さぶん本文を下げる。
   fixed で流れから抜けているため、これがないと見出しが潜る。 */
body:not(.naw-has-hero) main { padding-top: 4.25rem; }

@media (prefers-reduced-motion: reduce) {
  .naw-nav { transition: none; }
}

.naw-nav-inner {
  max-width: var(--w-wide);
  margin-inline: auto;
  padding: var(--sp-md) var(--sp-xl);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-md);
}

.naw-nav-logo {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.125rem;
  color: var(--color-fg);
  text-decoration: none;
  letter-spacing: -0.01em;
  transition: color .3s ease, background-color .3s ease;
}

.naw-nav-links {
  display: flex;
  gap: var(--sp-lg);
  align-items: center;
  transition: opacity .3s ease, visibility .3s ease;
}

.naw-nav-links a {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
  text-decoration: none;
}

.naw-nav-links a:hover { color: var(--color-fg); }

/* --- モバイル: ハンバーガー＋全画面メニュー --------------------- */
/* 🚨 2026-08-03 まで、ここは単に .naw-nav-links { display: none } だった。
      開閉UIが無いため、スマホではナビゲーションが存在しない状態だった。
      6項目あるので全画面メニューにする。 */
@media (max-width: 768px) {
  .naw-nav-inner { padding: var(--sp-sm) var(--sp-lg); }

  /* JS が動く環境でだけボタンを出す（PHP側で hidden、JS が外す）。
     JS が無ければ下の .naw-nav-menu が常時表示のままになる。 */
  .naw-nav-toggle {
    position: relative;
    z-index: 3;           /* 開いたメニューより前。閉じるために必ず押せること */
    display: grid;
    place-items: center;
    width: 44px;          /* タップ領域44px確保 */
    height: 44px;
    margin-right: calc(var(--sp-sm) * -1);
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
  }

  /* ロゴもメニューの上に残す。開いている間も現在地が分かるように */
  .naw-nav-logo {
    position: relative;
    z-index: 2;
  }

  /* 三本線。中央の線は実体、上下は疑似要素。
     開いたら×に変形する */
  .naw-nav-bars,
  .naw-nav-bars::before,
  .naw-nav-bars::after {
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
    transition: transform .25s ease, opacity .2s ease;
  }

  .naw-nav-bars { position: relative; }

  .naw-nav-bars::before,
  .naw-nav-bars::after {
    content: "";
    position: absolute;
    left: 0;
  }

  .naw-nav-bars::before { top: -7px; }
  .naw-nav-bars::after  { top: 7px; }

  /* 開いている間は必ず白。閉じている時は地の文字色を継ぐが、
     開くと背景が濃い膜になるため currentColor では暗すぎる */
  .naw-nav-toggle[aria-expanded="true"] { color: #FFFFFF; }
  .naw-nav-toggle[aria-expanded="true"] .naw-nav-bars { background: transparent; }
  .naw-nav-toggle[aria-expanded="true"] .naw-nav-bars::before { transform: translateY(7px) rotate(45deg); }
  .naw-nav-toggle[aria-expanded="true"] .naw-nav-bars::after  { transform: translateY(-7px) rotate(-45deg); }

  .naw-nav-toggle:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }

  /* --- メニュー本体 ---
     JS が動く環境（html.js）でだけ全画面オーバーレイにする。
     JS 無効時はこのブロックが効かず、リンクが縦に並んだまま見える。 */
  /* ⚠️ .naw-nav が position:fixed + z-index:100 で「重ね順の入れ物」を
        作っているため、この z-index は .naw-nav の中だけで効く。
        外のページ要素より前に出るかは .naw-nav の 100 が決めている。
        ここではロゴ(2)とボタン(3)より下に来ればよい。 */
  .js .naw-nav-menu {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--sp-lg);
    padding: var(--sp-3xl) var(--sp-xl);
    background: rgba(20, 20, 19, .97);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
  }

  .js .naw-nav-menu.is-open {
    opacity: 1;
    visibility: visible;
  }

  .js .naw-nav-links {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }

  /* 項目を大きく。タップ領域を44px以上にする */
  .js .naw-nav-links a {
    display: block;
    padding-block: var(--sp-md);
    font-size: 1.125rem;
    letter-spacing: 0.08em;
    color: #FFFFFF;
  }
}

/* 769px以上ではボタンを出さない。
   PHP側の hidden を JS が外すため、明示的に隠す必要がある */
@media (min-width: 769px) {
  .naw-nav-toggle { display: none; }
}

/* --- 汎用ページの本文 ---------------------------------------- */
/* page-simple / page-contact の the_content() 出力に効かせる */
.naw-article-body { margin-top: var(--sp-xl); }

.naw-article-body > * + * { margin-top: var(--sp-lg); }

.naw-article-body h2 { margin-top: var(--sp-2xl); }
.naw-article-body h3 { margin-top: var(--sp-xl); }

.naw-article-body ul,
.naw-article-body ol {
  padding-left: 1.5em;
  max-width: 42em;
}

.naw-article-body li + li { margin-top: var(--sp-sm); }

.naw-article-body a { color: var(--color-accent-sub); }

/* --- 定義表（会社概要・連絡先） ------------------------------ */
/* page-home / page-contact の両方で使うため site.css に置く */
.naw-profile {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--sp-xl);
}

.naw-profile th,
.naw-profile td {
  padding: var(--sp-md) 0;
  border-bottom: 1px solid var(--color-line);
  text-align: left;
  vertical-align: top;
}

.naw-profile th {
  width: 8em;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
  padding-top: calc(var(--sp-md) + 4px);
}

.naw-profile td { font-size: 0.9375rem; }

@media (max-width: 600px) {
  .naw-profile th,
  .naw-profile td { display: block; width: auto; }
  .naw-profile th { border-bottom: 0; padding-bottom: 0; }
  .naw-profile td { padding-top: var(--sp-xs); }
}

.naw-note {
  margin-top: var(--sp-md);
  font-size: 0.875rem;
  color: var(--color-muted);
}

/* --- ユーティリティ ------------------------------------------ */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- フッター ------------------------------------------------ */
.naw-footer {
  border-top: 1px solid var(--color-line);
  padding: var(--sp-xl);
  text-align: center;
}

.naw-footer-links {
  display: flex;
  justify-content: center;
  gap: var(--sp-lg);
  margin-bottom: var(--sp-md);
  flex-wrap: wrap;
}

.naw-footer-links a {
  font-size: 0.875rem;
  color: var(--color-muted);
  text-decoration: none;
}

.naw-footer-links a:hover { text-decoration: underline; }

.naw-footer-copy {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--color-grey);
  letter-spacing: 0.06em;
}