/* =========================================================
 * 子テーマ上書き（site.css は正本のため触らず、ここで最小補正）
 * ======================================================= */

/* スマホでの装飾アニメ停止は 2026-07-23 石田さん指示で解除（＝スマホでも動かす）。
 * 元はスクロールのガタつき対策だった。もしスマホでカクつきが再発したら、下の @media を復活させる。
 * @media (max-width: 782px) {
 *   .posd-circle, .spark, .spark-fly, .hero-spark, .cta-spark, .posd-orbit { animation: none !important; }
 *   .posd-circle { transform: none !important; }  // breatheのscaleで一瞬はみ出すのを防ぐ保険
 * }
 */

/* 動きを減らす設定の端末では全画面で装飾アニメを止める */
@media (prefers-reduced-motion: reduce) {
  .posd-circle,
  .spark,
  .spark-fly,
  .hero-spark,
  .cta-spark { animation: none !important; }
}

/* 横はみ出しの保険（100vw等の一瞬の横スクロールを抑える）。
 * overflow-x:hidden は position:sticky を無効化する（追従ヘッダーが効かなくなる）ため、
 * スクロールコンテナを作らない overflow-x:clip を使う。これで「はみ出し抑制」と「ヘッダー追従」を両立。 */
html, body { overflow-x: clip; }

/* SEO用にトップのヒーローを <h1 class="hero-copy"> 化した際の補正。
 * 見出し内の hero-l1/hero-l2 は span になるため、元のブロック配置に戻す。 */
h1.hero-copy { font-weight: inherit; font-size: inherit; }
.hero-copy .hero-l2 { display: block; }

/* スマホでは本文の意図的な改行(white-space:pre-line の \n)を流し込みにして、
 * 行末が途中で切れて右側に余白が出る（＝About/Service等の「本文だけ右が空く」）のを防ぐ。
 * デザインには desktop 向けの改行が入っているが、スマホでは短い行になり余白として見えるため。
 * 見出し(hero-copy/sec-en/h3)は pre-line を使っていないので影響しない。 */
@media (max-width: 782px) {
  [style*="pre-line"] { white-space: normal !important; }
}

/* 全角の約物(。、「」（）等)は字送りのアキを持ち、本文を流し込みにすると文中に「変な隙間」として見える。
 * palt（プロポーショナルメトリクス）で約物を自然に詰めて字組を整える。サイト全体の日本語本文で一貫させる
 * ため body に掛ける（導入文だけ詰めてカード説明文やニュース見出しが空くと、かえってちぐはぐになるため）。
 * カタカナ等は自然な字幅に収まるだけで潰れない。実フォント(YuGothic/iOSはHiragino Kaku Gothic)はpalt対応。
 * 文字を span で割らないため禁則処理(。、が行頭に来ない等)も崩れない。英数字は影響を受けない。 */
body { font-feature-settings: "palt"; }

/* 本文は左揃え＋word-break:break-all。行末をどこでも折って幅ギリギリまで文字を詰めるので、
 * 右端のガタつきがほぼ無くなる（両端揃え(justify)のように字間が伸びて不恰好になることもない）。
 * カタカナ等が語の途中で折れるが、これは許容（変な所で切れてOKの方針）。約物詰めは palt が担当。
 * ・両端揃え(justify)…字間が伸びて不恰好なので不採用。
 * ・文節でだけ折る(BudouX/lumierre.jsのinitPhraseBreak)…右端が大きくガタつくため不採用。 */
[style*="pre-line"], .prose { text-align: left; word-break: break-all; }

/* Decorative components (.posd circles, step numbers, labels) must NOT inherit the body break-all.
   break-all ignores their designed <br> breaks and collapses width to a 1-char min-content.
   keep-all restores the intended layout. Flowing body paragraphs are unaffected. */
.posd, .posd *, .step-num, .tag { word-break: keep-all; }

/* MVV(Mission/Vision/Value)本文は「スマホのみ中央揃え」。
 * break-allで各行は端まで詰まっているので、中央揃えが効くのは最終行だけ＝最終行が中央の見出しに揃う。
 * PCは従来どおり左揃えに戻す（石田さん指示: PCは変えない）。
 * 対象=インラインに white-space:pre-line と text-align:center を持つ段落（＝MVV本文のみ）。 */
@media (min-width: 783px) {
  [style*="pre-line"][style*="text-align:center"] { text-align: left !important; }
}

/* site.css の body にある text-wrap:pretty を本文で打ち消す。
 * Chrome は pretty をほとんど効かせず、行を前から幅いっぱいまで詰める。
 * 一方 Safari 26 以降(iPhoneはChromeも中身がSafari)は段落全体を見て行の長さを揃える
 * 処理が入り、まだ入るはずの文字を次の行へ送るので、右側に余白が残って行が短くなる。
 * これは上の word-break:break-all（幅ギリギリまで詰める）と正反対の動きで、
 * PCの検証モードと実機で折り返しが食い違う原因になっていた。
 * pretty を切って、どちらも「前から詰める」に揃える。 */
body { text-wrap: wrap; }

/* hero: 100vh はスマホの Chrome/Safari でツールバー分の解釈が異なり、
   bottom 基準の .hero-tag（「誠実すぎる」戦略PR会社）の位置がブラウザごとにズレる。
   svh(ツールバー表示時の実表示高さ)に統一してどちらでも同じ位置に出す。 */
@supports (height: 100svh){
  .hero{min-height:calc(100svh - 92px)}
  @media(max-width:960px){
    .hero{min-height:calc(100svh - 84px)}
  }
}