*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: "Zen Kaku Gothic New", "Hiragino Sans", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.9;
  color: var(--fg);
  background: var(--bg);
  transition: background-color .3s ease, color .3s ease;
}
:root { --header-h: 72px; --font-en: "Outfit", "Helvetica Neue", Arial, sans-serif; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.4; letter-spacing: .02em; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
a { color: inherit; }
img, svg, iframe { display: block; max-width: 100%; }
/* 幅を縮めても縦横比を保つ（HTML の height 属性の値が残ると縦に伸びる。2026-09-23 顔写真・実績ページの画像で発生） */
img { height: auto; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link:focus {
  position: fixed; top: 8px; left: 8px; width: auto; height: auto;
  margin: 0; padding: 10px 16px; clip: auto; overflow: visible; white-space: normal;
  background: var(--fg); color: var(--bg); border-radius: 999px; z-index: 300;
}

/* レイアウト */
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.section { position: relative; padding: 112px 0; color: var(--fg); background: var(--bg); }
@media (max-width: 768px) { .section { padding: 80px 0; } }
.section-head { margin-bottom: 48px; }
.section-title { font-size: clamp(28px, 4vw, 40px); }
.section-title__en {
  display: block; font-family: var(--font-en); font-weight: 700; font-size: clamp(40px, 7vw, 64px); /* PC は 64px（2026-09-25。以前は最大 88px）。スマホは 40px まで縮む */
  line-height: .95; letter-spacing: -.02em; text-transform: uppercase; margin-bottom: 12px;
}
.eyebrow {
  font-family: var(--font-en); font-size: 11px; font-weight: 600; letter-spacing: .3em;
  text-transform: uppercase; color: var(--fg-2); margin-bottom: 16px;
}
.lead { font-size: 18px; max-width: 40em; }
/* 日本語の改行位置（2026-09-24）：文（.ph）の途中で切れないよう、入りきらない文は次の行へ送る。
   1文が1行に収まらないときは、対応ブラウザ（Chrome 系）では文節の切れ目で折り返す */
.lead { word-break: auto-phrase; text-wrap: pretty; }
.lead .ph { display: inline-block; }
.muted { color: var(--fg-2); }

/* ボタン */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 28px; font-weight: 700; font-size: 14px; letter-spacing: .06em;
  text-decoration: none; border-radius: 999px; border: 1.5px solid transparent;
  transition: transform .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.btn--ghost { background: transparent; color: var(--fg); border-color: var(--fg); }
.btn--ghost:hover { background: var(--fg); color: var(--bg); }
.btn--sm { padding: 10px 18px; font-size: 13px; }

/* ヘッダー */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; padding: 0 24px;
  color: var(--fg);
  transition: transform .35s ease;
}
.site-header.is-hidden { transform: translateY(-100%); }
/* 既定は通常面（--fg）。ヘッダー直下のセクションが反転面（.section--inv）のときだけ
   nav.js が is-on-inv を付与して --inv-fg に切り替える。既定を通常面にしておくことで、
   JS無効時や nav.js がまだ動いていない初回描画でも常に正しい配色になる。
   BLACK テーマでは明暗が逆転するが --fg / --inv-fg も一緒に反転するので常に正しい。
   mix-blend-mode（旧実装）はスタッキングコンテキストの制約で子要素に掛けても
   背後のページと混ざらず、明るいセクション上で文字が消える回帰を起こしたため廃止。
   代わりに IntersectionObserver でヘッダー帯の下にあるセクションを判定し、
   トークン（--fg / --inv-fg）で色を出し分ける。 */
.site-header.is-on-inv { color: var(--inv-fg); }
.brand { font-family: var(--font-en); font-weight: 700; font-size: 20px; letter-spacing: .06em; text-decoration: none; text-transform: uppercase; }
.site-nav ul { display: flex; gap: 28px; }
.site-nav a { font-family: var(--font-en); font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; }
.site-nav { display: flex; align-items: center; gap: 32px; }
.nav-toggle { display: none; width: 44px; height: 44px; position: relative; }
.nav-toggle span:not(.sr-only) { position: absolute; left: 10px; right: 10px; height: 2px; background: currentColor; transition: transform .25s ease, opacity .25s ease; }
.nav-toggle span:nth-child(1) { top: 16px; } .nav-toggle span:nth-child(2) { top: 26px; }
/* JS無効時はヘッダーの固定・固定高さをやめて、内容ぶんだけ縦に伸ばす
   （固定 72px のままだとナビ6項目＋CTAが折り返せず画面外に出る上、
   デスクトップ幅でも固定ヘッダーが明るいセクションに重なった瞬間に消えるため、
   768px 限定にせず全幅で適用する）。 */
html:not(.js) .site-header {
  position: static; height: auto; flex-wrap: wrap; padding: 12px 24px; gap: 8px 16px;
  color: var(--fg);
}
html:not(.js) .hero { padding-top: 40px; }
html:not(.js) .site-nav ul { flex-wrap: wrap; }
@media (max-width: 768px) {
  html:not(.js) .nav-toggle { display: none; }
  html:not(.js) .site-nav {
    position: static; z-index: auto; opacity: 1; visibility: visible;
    flex-direction: row; flex-wrap: wrap; gap: 12px; background: none; color: inherit;
  }
  html:not(.js) .site-nav ul { flex-direction: row; flex-wrap: wrap; gap: 14px; }
  .nav-toggle { display: block; }
  /* メニューを開いた状態では site-nav がビューポート全面を覆う固定オーバーレイになる。
     ヘッダーの色が is-on-inv でない（通常面用の --fg の）ままだと、
     不透明なはずのオーバーレイの下に背後のコンテンツが透けて見えるのと同じ見た目になる。
     開いている間はオーバーレイ自身の色トークン（inv-fg/inv-bg）で視認性を確保する
     （is-on-inv は .site-header 自身に付くだけで inherit なので、要素へ直接
     指定するこのルールが常に勝つ＝is-open は is-on-inv の有無より優先される）。 */
  .site-header.is-open .brand,
  .site-header.is-open .site-nav ul,
  .site-header.is-open .nav-toggle { color: var(--inv-fg); }
  .site-nav {
    position: fixed; inset: 0; z-index: -1; flex-direction: column; justify-content: center; gap: 40px;
    background: var(--inv-bg); color: var(--inv-fg); opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s;
  }
  .site-header.is-open .site-nav { opacity: 1; visibility: visible; transition-delay: 0s; }
  .site-nav ul { flex-direction: column; align-items: center; gap: 24px; }
  .site-nav a { font-size: 16px; }
  .site-nav .btn { background: var(--inv-accent); color: var(--inv-accent-fg); }
  .site-header.is-open .nav-toggle span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
  .site-header.is-open .nav-toggle span:nth-child(2) { transform: translateY(-5px) rotate(-45deg); }
}

@media (prefers-reduced-motion: reduce) {
  .site-header, .site-nav, .nav-toggle span:not(.sr-only) { transition: none; }
  body, .btn { transition: none; }
}

/* フッター */
.site-footer { padding: 48px 0; border-top: 1px solid var(--line); font-size: 13px; color: var(--fg-2); }
.site-footer .container { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; }
.site-footer ul { display: flex; gap: 24px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

/* JS無効・GSAP無しのときの最終状態 */
.is-static [data-reveal] { opacity: 1 !important; transform: none !important; }

/* サブページ（thanks / privacy / works）共通 */
.page { padding: calc(var(--header-h) + 64px) 0 96px; }
html:not(.js) .page { padding-top: 64px; }
.page .container { max-width: 800px; }
.page h1 { font-size: clamp(28px, 4vw, 40px); margin-bottom: 24px; }
.page h2 { font-size: 20px; margin: 40px 0 12px; }
.page-en { display: block; font-family: var(--font-en); font-weight: 700; font-size: 14px; letter-spacing: .3em; text-transform: uppercase; color: var(--fg-2); margin-bottom: 12px; }

/* プライバシーポリシーの事業者・窓口（2026-09-26） */
.policy-contact { display: grid; gap: 8px; margin: 12px 0 16px; }
.policy-contact div { display: grid; grid-template-columns: 7em 1fr; gap: 12px; }
.policy-contact dt { color: var(--fg-2); }
.policy-contact dd { margin: 0; }