/* Fu-Sen 公開ページ共通の枠（ホームページ・プライバシーポリシー・利用規約）。
   仕様: docs/homepage/公開ページ仕様書.md「現行の共通サイト枠」。
   各ページはこのファイルの後に専用CSSを読み込む。要素セレクタの一括リセットをここに置かないのは、
   法務ページの条文（見出し・段落・リスト）が既定の余白や箇条記号に依存しているため。 */

:root {
  --color-bg: #fbf8f1;
  --color-surface: #fff;
  --color-cream: #f7f2e4;
  --color-cream-deep: #f3ead2;
  --color-text: #2b2926;
  --color-muted: #6b665e;
  --color-line: #e8e2d4;
  --color-accent: #f2c94c;
  --color-accent-hover: #e8b92a;
  --color-accent-soft: #fdf3cf;
  --color-accent-ink: #7a5c00;
  --color-highlight: rgba(255, 196, 0, 0.3);
  --color-selection: #b4d5fe;
  --color-focus: #2b2926;

  --font-sans: system-ui, -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-tiny: 0.8125rem;

  --container: 1120px;
  --container-narrow: 760px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --space-xs: 0.5rem;
  --space-s: 0.75rem;
  --space-m: 1.25rem;
  --space-l: 2rem;
  --space-xl: 3rem;

  --radius-s: 8px;
  --radius-m: 16px;
  --radius-l: 28px;
  --radius-pill: 999px;
  --shadow-soft: 0 1px 2px rgba(43, 41, 38, 0.05), 0 10px 30px -14px rgba(43, 41, 38, 0.18);
  --shadow-float: 0 2px 4px rgba(43, 41, 38, 0.05), 0 24px 48px -20px rgba(43, 41, 38, 0.28);

  --header-height: 4rem;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-height) + 1rem);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.85;
  overflow-wrap: anywhere;
  font-feature-settings: "palt" 0;
}

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: 4px;
}

.container {
  width: min(var(--container), 100% - var(--gutter) * 2);
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 100;
  padding: 0.5rem 1rem;
  background: var(--color-text);
  color: #fff;
  border-radius: var(--radius-s);
  transform: translateY(-200%);
}
.skip-link:focus-visible { transform: none; }

/* ---------- ボタン ---------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.75rem 1.625rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.button:active { transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) {
  .button { transition: none; }
}

.button--primary {
  background: var(--color-accent);
  color: var(--color-text);
  box-shadow: 0 1px 0 rgba(43, 41, 38, 0.12), 0 8px 20px -10px rgba(186, 138, 0, 0.55);
}
.button--primary:hover { background: var(--color-accent-hover); }

.button--ghost {
  background: var(--color-surface);
  border-color: var(--color-line);
  color: var(--color-text);
}
.button--ghost:hover { border-color: #cfc6b2; background: var(--color-cream); }
.button--ghost[aria-disabled="true"] { opacity: 0.45; cursor: default; }

.button--small {
  min-height: 2.5rem;
  padding: 0.5rem 1.125rem;
  font-size: var(--fs-small);
}

/* ---------- ヘッダー ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(251, 248, 241, 0.88);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid rgba(232, 226, 212, 0.8);
  line-height: 1.85;
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-m);
  min-height: var(--header-height);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: inherit;
  text-decoration: none;
  font-weight: 800;
  font-size: 1.125rem;
  letter-spacing: 0.02em;
}
.brand img { display: block; border-radius: 6px; }

.site-nav { margin-left: auto; }
.site-nav__list {
  display: flex;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav a {
  display: block;
  padding: 0.4rem 0.8rem;
  border-radius: var(--radius-pill);
  color: var(--color-muted);
  font-size: var(--fs-small);
  font-weight: 600;
  text-decoration: none;
}
.site-nav a:hover { color: var(--color-text); background: var(--color-cream); }

/* 狭い画面(タブレット含む)では2列のグリッドにし、ハンバーガーで隠さず全リンクを常に押せるようにする。
   1段目にbrand（1列目）とCTA（2列目）、2段目にページナビ（全2列）を置く。
   CTAを2列目だけに収めることで、CTAが広い言語でもページナビの幅を独立して確保する。
   ページナビのliは1行に並べたまま縮み、ラベル内で折り返させる（項目ごと次行に落とさない）。
   広いCTAラベルでナビが極端に縮まないよう、min-width:0でナビを縮めラベルを折り返させる（隠さない）。 */
@media (max-width: 959px) {
  :root { --header-height: 6.25rem; }
  .site-header__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    row-gap: 0;
    column-gap: var(--space-s);
    padding-block: 0.5rem 0.25rem;
  }
  .brand { grid-area: 1 / 1; font-size: 1rem; }
  .site-header__cta { grid-area: 1 / 2 / 2 / 3; padding-inline: 0.75rem; }
  .site-nav { grid-area: 2 / 1 / 3 / 3; min-width: 0; margin: 0 -0.35rem; }
  .site-nav__list { flex-wrap: nowrap; }
  .site-nav__list li { min-width: 0; }
  /* 使い方+開発の想い+FAQが1列に収まるよう詰める。負marginでラベルをコンテナ左端に揃える。 */
  .site-nav a {
    padding: 0.35rem 0.35rem;
    font-size: var(--fs-tiny);
    line-height: 1.4;
  }
}

/* ---------- フッター ---------- */

.site-footer {
  padding-block: var(--space-xl);
  background: var(--color-bg);
  border-top: 1px solid var(--color-line);
  font-size: var(--fs-small);
  line-height: 1.85;
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-m) var(--space-l);
}
.brand--footer { margin: 0; font-size: 1rem; }
.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-footer__links a { color: var(--color-muted); text-decoration: none; }
.site-footer__links a:hover { color: var(--color-text); text-decoration: underline; }
.site-footer__copy { margin: 0 0 0 auto; color: var(--color-muted); }
@media (max-width: 639px) {
  .site-footer__inner { flex-direction: column; align-items: flex-start; }
  .site-footer__copy { margin-left: 0; }
}