/*
 * 和文タイポグラフィの上書き。main.css の直後に読み込む。
 *
 * テンプレート（Nexsas / automation-saas）は欧文前提で組まれているため、
 * 日本語を流し込むと「書体が違う・細すぎる・行間が詰まる」の3点が必ず崩れる。
 * ここではその3点だけを Apple 日本法人（apple.com/jp）の実測値を手本に補正する。
 * レイアウト・色・余白には一切触れない（デザインはテンプレートに従う）。
 *
 * apple.com/jp の実測値（2026-08）:
 *   font-family: "SF Pro JP", "SF Pro Text", "Hiragino Kaku Gothic Pro",
 *                "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", ...
 *   見出し font-weight: 600 ／ 本文 400
 *   本文 17px / line-height 1.35〜1.47
 */

:root {
  /*
   * 欧文はテンプレートの Inter Tight のまま、和文だけ日本語書体へ落とす。
   * ブラウザは1文字ずつスタックを前から探すので、英数字は Inter Tight、
   * 仮名・漢字はヒラギノ（Windows は Meiryo）で組まれる＝Apple と同じ考え方。
   * 変数を上書きするだけなので、main.css のルールは1行も書き換えていない。
   */
  --font-inter-tight:
    'Inter Tight', -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans',
    'BIZ UDPGothic', Meiryo, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-sans:
    'Inter Tight', -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans',
    'BIZ UDPGothic', Meiryo, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/*
 * Apple は見出しを semibold(600) で組む。テンプレートの既定は medium(500) で、
 * 欧文なら成立するが、和文は字画が多いぶん同じウェイトでも細く見えるため 600 に上げる。
 * （ヒラギノは W6 が当たる。Apple の見出しと同じ太さ）
 */
h1,
h2,
h3,
h4,
h5,
h6 {
  --tw-font-weight: 600;
  font-weight: 600;
}

/*
 * 行間。テンプレートの見出しは 110% で、欧文なら締まって見えるが、
 * 和文は字面が大きく上下に余白が無いため行が接触する。Apple の見出し（約1.3）に合わせる。
 */
h1 {
  line-height: 1.32;
}

h2,
h3 {
  line-height: 1.38;
}

/* 本文。Apple 日本法人の 1.35〜1.47 より少しだけゆるめ、日本語の長文でも読める値 */
p,
li {
  line-height: 1.75;
}

/*
 * 和文は単語間スペースが無いぶん、欧文用のトラッキングが広すぎると間延びする。
 * 見出しは字送りを詰める（Apple の日本語見出しは letter-spacing: normal 相当）。
 */
h1,
h3 {
  letter-spacing: 0;
}

/*
 * h2 だけは +2px（高木さん指示・2026-08-12。実画面を見ての判断）。
 * 上の「見出しは詰める」という方針の例外。h2 は文字数が短く、
 * font-feature-settings: palt で約物が詰まる分、少し開けたほうが締まって見える。
 * h1 / h3 は 0 のまま。
 */
h2 {
  letter-spacing: 2px;
}

/*
 * 見出しサイズの上限を一段下げる（高木さん指示・2026-08-12「かなり大きい」）。
 *
 * テンプレートは h2 を heading-5(24px) → 4(32px) → 3(40px) → 2(52px) と
 * 画面幅で上げていく。欧文なら成立するが、和文は字面が大きいぶん同じ px でも
 * 一回り大きく見えるため、xl 以上で使う heading-2(52px) が過大になる。
 *
 * **新しい値は作らず、テンプレート自身のトークンで一段下げる**（52px → 40px）。
 * line-height は上の 1.38 が相対値なので自動で追従する。
 * main.css の @layer base より後に、レイヤー無しで書くことで確実に勝つ
 * （レイヤー無しの宣言は常に @layer 付きより優先される）。
 */
@media (min-width: 80rem) {
  h2 {
    font-size: var(--text-heading-3);
  }
}

/*
 * 例外: HERO 直下のステートメント帯（TemplateStatement の h2）だけは 32px 固定。
 * 高木さん指定・2026-08-14「32px で作っています」。
 *
 * 上の一括縮小は「素の h2 は xl 以上で 40px」という下限のない指定なので、
 * ユーティリティ（.md\:text-heading-4）では上書きできない（レイヤー無しが常に勝つ）。
 * class を1つ足したセレクタ（詳細度 0,1,1）にして、この見出しだけ例外にしている。
 * **値は作らずテンプレートのトークンをそのまま使う**（--text-heading-4 = 2rem）。
 * feature-details.css の `.rn-section h2` と同じやり方。
 */
@media (min-width: 80rem) {
  h2.statement-heading {
    font-size: var(--text-heading-4);
  }
}

/*
 * 流用元（ai-marketing-agency）の見出しトークン `.text-is-heading-*` は、
 * サイズと**抱き合わせで** font-family: Instrument Serif（欧文セリフ）を持っている。
 * 和文はこの書体に字形が無く serif にフォールバックして明朝で出る。
 *
 * 高木さん指示・2026-08-14「テンプレートではフォントが明朝っぽくなっていますが
 * 気にせずデフォルトのフォントファミリーで」。サイズはテンプレートのまま使いたいので、
 * **書体だけ**を既定に戻す口をここに置く。
 *
 * template-utilities.css の `.text-is-heading-*`（詳細度 0,1,0）と同じ詳細度だが、
 * このファイルは後から読まれるので勝つ。
 * いま付けているのは TemplateReleaseNotes の h2 だけ。TemplateSecurity など
 * 既存のセクションは指示が無いのでテンプレートのまま（明朝）にしてある。
 */
.heading-sans {
  font-family: var(--font-inter-tight);
}

/*
 * 禁則処理を厳しくする。ブラウザ既定（line-break: auto ≒ normal）は
 * 小書き文字（ァィゥェォッャュョ）と長音符（ー）が行頭に来ることを許すため、
 * 「プラットフ／ォーム」「ソリューシ／ョン」のような割れ方をする。
 * strict にすると、これらは前の文字と一緒に次の行へ送られる。
 */
h1,
h2,
h3,
h4,
h5,
h6,
p,
li {
  line-break: strict;
}

/* 約物（、。「」）の余白を詰める。和文の見出しを Apple のように締まって見せる要 */
h1,
h2,
h3,
h4 {
  font-feature-settings: 'palt' 1;
}

/* =====================================================================
 * 文字色（濃度）の底上げ
 *
 * テンプレートは本文を「黒の 60%」（color-mix で 40% 透過）で敷いている。
 * 欧文は字画が太く塊で読めるため 60% でも成立するが、和文は画数が多く
 * 線が細いので同じ濃度だと霞んで見える。階調（強い/普通/弱いの差）は
 * そのままに、全体を一段濃くする。
 *
 * 上書きしているのは「色の濃さ」だけで、テンプレートの色そのもの
 * （--color-secondary = #1a1a1c）は変えていない。
 * 素の <p> の色は下の「本文の色とサイズ」（@layer base）側で指定している。
 * ===================================================================== */

/* 明示的に濃度指定されているユーティリティ。使用箇所が多い順に上書きする */
.text-secondary\/40 {
  color: color-mix(in oklab, var(--color-secondary) 62%, transparent);
}

.text-secondary\/50 {
  color: color-mix(in oklab, var(--color-secondary) 70%, transparent);
}

.text-secondary\/60 {
  color: color-mix(in oklab, var(--color-secondary) 80%, transparent);
}

.text-secondary\/80 {
  color: color-mix(in oklab, var(--color-secondary) 92%, transparent);
}

.text-background-14\/60 {
  color: color-mix(in oklab, var(--color-background-14) 80%, transparent);
}

.text-background-14\/80 {
  color: color-mix(in oklab, var(--color-background-14) 92%, transparent);
}

/* =====================================================================
 * 本文の色とサイズ（＝テンプレートの指定に負けてよいもの）
 *
 * ここだけ @layer base に入れているのには理由がある。
 * main.css は Tailwind v4 のビルド成果物で、ユーティリティ class は
 * すべて `@layer utilities` の中にある。CSS のカスケードでは
 * **レイヤに属さない宣言がレイヤ内の宣言に必ず勝つ**（詳細度に関係なく）ため、
 * このファイルの `p { ... }` を素で書くと `.text-accent` のような
 * 色・サイズのユーティリティまで打ち消してしまう。
 * 実際、濃い背景のセクションで `text-accent`（ほぼ白）を指定した本文が
 * 黒いまま描かれて読めなくなった。
 *
 * @layer base に入れると main.css の base ルールより後に書いた分だけ勝ち、
 * かつ utilities には負ける。「既定値を和文向けに直すが、テンプレートが
 * 明示的に色やサイズを指定している箇所は動かさない」という当初の意図どおりになる。
 *
 * 行間・ウェイト・禁則はレイヤ外のまま（和文の都合を優先させたいので、
 * テンプレートのサイズ class が持つ line-height に勝たせている）。
 *
 * ── 内容 ──
 * 色: テンプレートは本文を「黒の60%」で敷く。和文は画数が多く線が細いので
 *     同じ濃度だと霞む。階調はそのままに一段濃くする。
 * サイズ: テンプレートの既定は 0.875rem(14px)。欧文の 14px は x-height が高く
 *     大きく見えるため、和文では小さく感じる。手本にしている apple.com/jp の
 *     本文と同じ 1.0625rem(17px) まで上げる。
 * ===================================================================== */
@layer base {
  p {
    color: color-mix(in oklab, var(--color-secondary) 80%, transparent);
    font-size: 1.0625rem;
  }
}

/* =====================================================================
 * HERO の見出し
 *
 * テンプレートの h1 は 1280px 以上で 4.25rem(68px)。欧文の見出しはこの大きさで
 * 収まるが、和文は 1 文字 = 1em なので「経営のすべてを、ひとつの知性」(15字) が
 * 器（max-w-950px）に収まらず 2 行に折れる。1 行で見せるためにここだけ下げる。
 * 15字 × 62px = 930px < 950px（palt が効かない環境でも折れない値）。
 * ===================================================================== */
@media (min-width: 80rem) {
  section[data-slightly-move-root] h1[data-text-reveal] {
    font-size: 3.875rem;
  }
}

/* =====================================================================
 * セクションのリード文
 *
 * テンプレートの本文は 0.875rem で、和文用に上で 1.0625rem へ上げているが、
 * 大きな見出し（1280px 以上で 3.25rem）の直下に置くリード文としてはまだ弱い。
 * HERO のリード文（1.25rem）ほどは上げず、その手前に置く。
 * 欧文は字画が太く weight 400 でも塊で読めるが、和文は線が細く、
 * 大きな見出しの直下では地に沈んで見えるので 500 に上げる。
 *
 * 対象の見分け方（どれも流用元テンプレートが持っている class を使う。新しい印は作らない）:
 *   .hero-section p  … 「見出し＋リードが主役のセクション」の目印。CSS ルールは元から無い
 *   p.text-accent    … 濃い背景のパネルに白で置くリード文
 *   .badge-ivory + div p … バッジの直後に見出し＋リードが続く並び
 * ===================================================================== */
.hero-section p,
p.text-accent,
.badge-ivory + div p {
  font-size: 1.125rem;
  line-height: 1.85;
  font-weight: 500;
}

/* 明るい地のリード文だけ、濃度も一段上げる（濃い地は text-accent の白のまま） */
.hero-section p,
.badge-ivory + div p {
  color: color-mix(in oklab, var(--color-secondary) 92%, transparent);
}

/*
 * 濃い地のカード本文。テンプレートは白の60%だが、和文は線が細く
 * 半透明のガラス面の上では沈む。階調は保ったまま一段濃くする。
 */
.text-accent\/60 {
  color: color-mix(in oklab, var(--color-accent) 75%, transparent);
}

/* 箇条書きも同じ理由でひと回り強くする（サイズはテンプレートのまま） */
.hero-section li {
  font-weight: 500;
  color: color-mix(in oklab, var(--color-secondary) 88%, transparent);
}

/*
 * 箇条書きの点。テンプレートは1行に収まる英文が前提で、点を項目の上下中央
 * （top: 50%）に置いている。和文は1項目が2行に折り返すことがあり、そのとき
 * 点が行と行の間に落ちて宙に浮く。1行目の中央に固定する。
 * 0.75em = 行の高さ（1.5em）の半分。
 */
.hero-section li::before {
  top: 0.75em;
}

/* =====================================================================
 * HERO のリード文
 * ファーストビューで最初に読まれる一文なので、本文よりさらに強くする。
 * data-slightly-move-root はテンプレート内で HERO セクションにしか付かない。
 * ===================================================================== */
/*
 * p.hero-lead-lg は「中央寄せの大きな HERO に置くリード文」の印（/why-pickles）。
 * 流用元（investment-management）のリード文は 0.875rem・黒の60%で、和文だと
 * 62px の h1 の直下で地に沈んで読めない（高木さん指摘 2026-08-13）。
 * 値はトップページ HERO と同一にしてある——新しい大きさを作らず、
 * サイト内で「HERO のリード文」が1種類に保たれるようにするため。
 * 上書きしているのはサイズ・行間・ウェイト・濃度だけで、レイアウトには触れていない。
 *
 * セレクタを p.〜 にしているのは詳細度の都合。素の .hero-lead-lg（0,1,0）だと
 * 上の .hero-section p（0,1,1）に負けて 1.125rem のままになる。
 */
section[data-slightly-move-root] p[data-text-reveal],
p.hero-lead-lg {
  font-size: 1.25rem;
  line-height: 1.8;
  font-weight: 500;
  color: var(--color-secondary);
}

@media (max-width: 767px) {
  section[data-slightly-move-root] p[data-text-reveal],
  p.hero-lead-lg {
    font-size: 1.0625rem;
  }
}

/* =====================================================================
 * メガメニューのプロモカード（写真の上に載る文字）→ **2026-08-14 に全廃**
 *
 * `.promo-on-photo-title` / `.promo-on-photo-lead` は写真を背景に敷いて文字を
 * 重ねるカード専用の補正だった。高木さん指示でメガメニューの写真カードを
 * 3つとも撤廃し（機能=第6弾、pickles とは・導入・サポート=今回）、
 * すべてテキストのリンク列に統一したので、参照が 0 になり削除した。
 *
 * 経緯だけ残す: 写真の明部・暗部に和文が溶けるため縁取り（text-shadow）を
 * 当てていたが、和文の細い画が縁に埋もれて「加工した文字」に見えるという理由で
 * 2026-08-13 に縁取りを全廃し、級数（20px/700）とクロップ位置で読ませていた。
 * **写真の上に和文を置く形は、この2段階を経て「やらない」に着地している。**
 * ===================================================================== */

/* =====================================================================
 * フッター
 * リンクが18本あるので、テンプレート既定の 16px だと面が重くなる。
 * 1段小さくして情報量を捌く（高木さん指示 2026-08-12）。
 * 値はテンプレートのトークンをそのまま使い、footer の中だけに閉じる。
 * ===================================================================== */
.footer-link {
  font-size: var(--text-tagline-2);
  line-height: var(--text-tagline-2--line-height);
}

/* 著作権と規約のバーはさらに一段小さく。
   .footer-link は自前で font-size を持つので、バーの中だけ明示的に下げる。 */
.footer-copyright {
  font-size: var(--text-tagline-3);
  line-height: var(--text-tagline-3--line-height);
  letter-spacing: 0.04em;
}

.footer-copyright .footer-link {
  font-size: var(--text-tagline-3);
  line-height: var(--text-tagline-3--line-height);
  letter-spacing: 0.04em;
}