/* ================================================================
   data-repi/css/fluid.css — 流動スケール（2026-10-19）
   HP本体（top-v2.css・sub-v2.css）と同じ物差しを、Ai office worker の6ページに当てる。見た目（色・書体・和紙）は変えない。
   - 節ごとにばらばらだった中身の幅（Tailwind の max-w-4xl〜7xl＝896〜1280px）を、1本の幅（--inner）にそろえる。
     ヘッダー・フッターの端も同じ。読ませる部分（よくある質問・規約の本文など max-w-3xl 以下）は中央寄せのまま残す
   - 節の上下の余白を、画面幅に合わせて連続して変える
   - Tailwind と黄金比の目盛り（phi-*）は rem で書かれている。1440px より広い画面では基準（1rem）を大きくして、
     ページ全体を比例して大きくする（1440 で 16px → 1920 で 19.2px → 3840 で 38.4px）
   Tailwind（CDN）は実行時に <style> を head の末尾へ足すので、html body を頭に付けて優先させている
   ================================================================ */
:root {
  --gutter: clamp(20px, 9.85px + 2.82vw, 64px);
  --inner: clamp(1184px, 416px + 53.33vw, 1600px);
  --sp-section: clamp(64px, 47.38px + 4.615vw, 136px);
}
@media (min-width: 1441px) { html { font-size: calc(6.4px + .6667vw); } }
@media (min-width: 1921px) {
  :root {
    --gutter: min(3.333vw, 128px);
    --inner: min(75vw, 2880px);
    --sp-section: min(7.083vw, 272px);
  }
  html { font-size: min(1vw, 38.4px); }
}

/* 中身の幅：節・ヘッダー・フッターの外枠を1本にそろえる */
html body :is(header, footer, section, main) :is(div, nav):is(.max-w-4xl, .max-w-5xl, .max-w-6xl, .max-w-7xl).mx-auto {
  max-width: var(--inner);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
/* 外枠の中にさらに外枠がある所は、内側の左右の余白を重ねない */
html body :is(.max-w-4xl, .max-w-5xl, .max-w-6xl, .max-w-7xl).mx-auto :is(.max-w-4xl, .max-w-5xl, .max-w-6xl, .max-w-7xl).mx-auto {
  padding-left: 0;
  padding-right: 0;
}

/* トップのファーストビューの見出し「さよなら、ルーティン」：改行しない指定のまま画面幅の 7% の大きさだったため、
   2列になる幅（768px〜）で左の列からはみ出し、右の絵に重なっていた。2列のときは列の幅に収まる大きさにする */
@media (min-width: 768px) {
  html body #hero h1 { font-size: clamp(1.75rem, 3.6vw, 3.5rem) !important; }
}
/* 規約などのページの大きい見出し（2.618rem＝42px）が、スマホ幅で2〜3行に折れていた */
@media (max-width: 767px) {
  html body h1.text-phi-2xl { font-size: clamp(1.625rem, 7.2vw, 2.618rem); }
}
/* 紺の帯（「帳票業務の改善効果を知るなら」）：絵と文が左に寄って右が空いていた。真ん中に置く */
html body main > section.bg-gradient-to-r > div.mx-auto { justify-content: center; }

/* 節の上下の余白 */
html body main > section:is(.py-20, .py-16) { padding-top: var(--sp-section); padding-bottom: var(--sp-section); }
html body main > section.pt-20 { padding-top: var(--sp-section); }
html body main > section.pb-20 { padding-bottom: var(--sp-section); }

/* 日本語の改行（2026-10-21 利用者試験 中-1）：HP本体（top-v2.css・sub-v2.css）と同じく文節で折り返し、
   見出しは行の長さをそろえて「か？」のような1〜3文字だけの行を残さない。本文は最後の行が短く残りにくくする。
   word-break: auto-phrase が効かないブラウザ（Safari など）向けに、商品名・数字と単位は HTML 側で .nowrap に包む */
html body { word-break: auto-phrase; line-break: strict; }
html body :is(h1, h2, h3, h4) { text-wrap-style: balance; }
html body :is(p, li) { text-wrap-style: pretty; }
/* セキュリティの4枚のカード：見出し・補足文（span.block）も行の長さをそろえる */
html body #security span.block { text-wrap-style: balance; }
.nowrap { white-space: nowrap; }

/* ページ内リンク（#security・#faq など）で、固定ヘッダーの下に節の頭が隠れないようにする */
html body main section[id] { scroll-margin-top: 80px; }