/* ==========================================================
   LOCOSYSTEM VISUAL IDENTITY SYSTEM

   Document class:
   Brand Code Supplement B
   Visual Identity Guidelines / Web Design System

   Reference:
   Locosystem Brand Code
   Chapter 5.4 Naming Policy
   Chapter 5.6 Color System
   Chapter 5.7 Typography
   Chapter 5.9 Layout Principles
   Chapter 7.5 Brand Check
   Chapter 7.8 Version Control

   Current version: 0.3.0
   Status: Draft
   Document owner: 株式会社Loco system
   Project: Locosystem ブランド構築プロジェクト

   Change log:

   Version: 0.1.0
   Updated: 2026-07-20
   Updated area: Initial web design system
   Reason: Establish common web layout, color, typography,
           spacing and component standards
   Approved by: Not required during draft phase
   Effective from: Not applicable during draft phase

   Version: 0.2.0
   Updated: 2026-07-20
   Updated area: Color tokens, typography tokens,
                 accessibility rules, semantic text roles,
                 naming policy and document governance
   Reason: Align implementation with Brand Code
           Chapters 5.4, 5.6, 5.7, 7.5 and 7.8
   Approved by: Not required during draft phase
   Effective from: Not applicable during draft phase

   Version: 0.3.0
   Updated: 2026-07-20
   Updated area: Spacing scale, shared component spacing,
                 shape policy, shadow policy, motion tokens,
                 reduced-motion accessibility, web font strategy,
                 semantic foreground and button tokens for dark
                 sections, light-surface token reset (.ls-card /
                 .ls-surface--light), global focus-visible rule,
                 @font-face skeleton, .ls-grid--3col and
                 .ls-stack layout utilities (general-purpose;
                 not currently used by the ABOUT section, which
                 uses its own dedicated layout in
                 assets/css/sections/about.css — retained here
                 for future sections), .u-sp-only responsive
                 line-break utility (added during HERO section
                 implementation), fixed @font-face src paths
                 (root-relative "/fonts/..." was structurally
                 wrong for a theme-nested assets folder; corrected
                 to relative "../fonts/..."), decorative tokens
                 --ls-line-subtle / --ls-decoration-subtle /
                 --ls-decoration-medium (replacing repeated
                 inline rgba(6, 47, 58, ...) values used for
                 borders and circular decorations on the COMPANY
                 page), .ls-heading__eyebrow formalized as a
                 shared component (previously used undefined on
                 the COMPANY page's MESSAGE/MISSION/VISION
                 sections), .ls-page-hero shared component
                 (promoted from company.css's .ls-company-hero*
                 classes; now reused by both the COMPANY and
                 BUSINESS pages instead of duplicating the same
                 ~80 lines of CSS per page)
   Reason: Establish a common spacing scale before section
           implementation, redesign shared component spacing
           to conform to the scale, codify shape, shadow and
           motion restraint policies, confirm web font delivery
           method, and fix contrast/readability failures found
           when auditing .ls-section--dark (and light surfaces
           nested inside it) against WCAG 2.4.11 and 1.4.3
           (minor: new rules added, per the versioning policy
           below)
   Approved by: Not required during draft phase
   Effective from: Not applicable during draft phase

   Web font strategy:
   Delivery: self-hosted (woff2, font-display: swap)
   Noto Sans JP: 400 / 600 / 700
     (500 is unused anywhere in this stylesheet;
      600 is required by .ls-heading__title and .ls-card__title)
   Inter: 600 / 700
   Noto Serif JP: 400
     (600 reserved for future use if a semantic need appears;
      not yet used by any class in this stylesheet)

   Open items (pending before v1.0.0 approval):
   - HERO section (template-parts/section-hero.php) currently
     uses text-based placeholder slides ("PLACEHOLDER" watermark
     + solid navy gradients) instead of real photography.
     MUST be replaced with actual on-site photos before this
     site goes live — this is the most visible section on the
     page and per Brand Code 5.8 must never ship with anything
     resembling staged/generated imagery
   - COMPANY PAGE (.ls-company-message__media img, the
     representative's photo next to the signature) currently
     uses an AI/CG-rendered image based on a real photo of the
     representative. Site is in maintenance mode (non-public),
     so this is acceptable as a working placeholder for now, but
     per Brand Code 5.8 this MUST be replaced with an actual
     photograph before public launch — a CG likeness is not
     "実際の社員" regardless of whose photo it was derived from
   - Loco Copper final color code confirmation
     (current value #b5654a is provisional)
   - .ls-heading margin-bottom at the 959px breakpoint set
     provisionally to 48px (--ls-space-48); confirm against
     visual review once real content is implemented
   - .ls-text-link:hover gap set provisionally to 40px
     (--ls-space-40, up from base 32px); confirm the hover
     "widening" motion feels right once implemented
   - @font-face filenames remain provisional (paths are now
     correctly relative: ../fonts/*.woff2). Confirm that the
     corresponding woff2 files actually exist in assets/fonts/
     before public launch — if they are not yet placed, comment
     out the @font-face block to avoid 404 requests
   - .ls-accent-text / .ls-accent-label (Copper Dark) fall below
     3:1 contrast on Navy backgrounds (~1.92:1); avoid using
     these two classes inside .ls-section--dark — use .ls-accent
     (Copper, ~5.23:1 on Navy) instead
   - New white-background components (forms, modals, panels)
     must carry the .ls-surface--light class (or be nested
     inside .ls-card) so they reset Foreground/Button/Focus
     tokens back to light-surface values when placed inside
     .ls-section--dark
   - Brand Code Ver.1.1 revision incorporating
     Supplementary Guidelines versioning rule (Chapter 7.8):
     "Supplementary Guidelinesその他の補助文書は、本体とは独立した
     バージョン番号を付すことができる。正式承認前は0.x.x、正式承認時は
     1.0.0、以後は変更内容に応じてセマンティックバージョニングにより
     管理する。軽微な修正はパッチ、機能追加・規定追加はマイナー、
     基本方針の変更または互換性に影響する変更はメジャーとする。
     なお、0.x.x期間中の変更履歴については、正式な承認者および
     適用開始日の記載を要しない。"
========================================================== */


/* ==========================================================
   Self-hosted web fonts (@font-face)

   TODO: /fonts/ 配下のファイル名は正式決定後に差し替える
   （woff2ファイルを配置後、実ファイル名と一致しているか確認すること）。
   形式は woff2 を基本とし、font-display: swap を使用する。
   パスは "../fonts/..." （このCSSファイルが assets/css/ 配下、
   フォントが assets/fonts/ 配下にあるため、一階層上に戻る）。

   注意：このブロックは現時点でプレースホルダーのパスを参照する
   有効なCSSである。実ファイルを配置しないまま本番へ反映すると、
   ブラウザが存在しないファイルへリクエストを送る。ファイル配置前に
   セクション実装だけを先行して投入する場合は、このブロック全体を
   一時的にコメントアウトすること。
========================================================== */

@font-face {
  font-family: "Noto Sans JP";
  src: url("../fonts/noto-sans-jp-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans JP";
  src: url("../fonts/noto-sans-jp-600.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans JP";
  src: url("../fonts/noto-sans-jp-700.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-600.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-700.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Noto Serif JP";
  src: url("../fonts/noto-serif-jp-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}


:root {
  /* ==================================================
     Primary｜Loco Navy
     信頼・冷静さ・安定感
  ================================================== */

  --ls-navy: #073d4c;
  --ls-navy-dark: #062f3a;
  --ls-navy-light: #275d69;


  /* ==================================================
     Secondary｜Charcoal
     本文・資料・補助情報
  ================================================== */

  /* 通常本文・説明文・資料本文 */
  --ls-charcoal: #2e383c;

  /* 見出しなど、より強い文字 */
  --ls-text: #17313a;

  /* 日付・注釈・補足・メタ情報 */
  --ls-text-muted: #59696f;

  /* 優先度の低い補助情報 */
  --ls-text-light: #7a878c;


  /* ==================================================
     Semantic Foreground Tokens
     背景コンテキスト（明／暗）に応じて値が変わる文字色。
     コンポーネント側は個別の色トークンではなく、
     こちらを参照することで、.ls-section--dark 配下でも
     自動的に読める配色へ切り替わる。

     暗背景内に白背景のカード・フォーム・モーダル等を
     配置する場合は、.ls-card または .ls-surface--light により
     明背景用トークンへ明示的に戻す。
  ================================================== */

  /* 通常本文 */
  --ls-fg: var(--ls-charcoal);
  /* 見出し等の強い文字 */
  --ls-fg-strong: var(--ls-text);
  /* 日付・注釈・補足情報 */
  --ls-fg-muted: var(--ls-text-muted);
  /* 優先度の低い補助情報 */
  --ls-fg-subtle: var(--ls-text-light);
  /* リンク・英字ラベル等のアクセント文字 */
  --ls-fg-link: var(--ls-navy);
  --ls-fg-link-hover: var(--ls-navy-dark);
  /* フォーカスリング。3:1以上のコントラストを確保する色を選ぶこと */
  --ls-focus-color: var(--ls-copper-dark);


  /* ==================================================
     Button Tokens
     .ls-button / .ls-button--outline / .ls-button--accent の
     通常時・hover時の色を、背景コンテキストに応じて切り替える。
  ================================================== */

  --ls-button-bg: var(--ls-navy);
  --ls-button-border: var(--ls-navy);
  --ls-button-text: #ffffff;
  --ls-button-hover-bg: transparent;
  --ls-button-hover-border: var(--ls-navy);
  --ls-button-hover-text: var(--ls-navy);

  --ls-button-outline-text: var(--ls-navy);
  --ls-button-outline-border: var(--ls-navy);
  --ls-button-outline-hover-bg: var(--ls-navy);
  --ls-button-outline-hover-text: #ffffff;

  --ls-button-accent-bg: var(--ls-copper-dark);
  --ls-button-accent-border: var(--ls-copper-dark);
  --ls-button-accent-text: #ffffff;
  --ls-button-accent-hover-bg: transparent;
  --ls-button-accent-hover-border: var(--ls-copper-dark);
  --ls-button-accent-hover-text: var(--ls-copper-dark);


  /* ==================================================
     Base｜Warm White / Soft Gray
     背景・余白
  ================================================== */

  --ls-warm-white: #fcfbf8;
  --ls-soft-gray: #f5f7f7;
  --ls-line: #dce3e5;

  --ls-bg: var(--ls-warm-white);
  --ls-bg-soft: var(--ls-soft-gray);
  --ls-bg-dark: var(--ls-navy);

  /*
   * Navy系の透過値。罫線や円形装飾など、
   * 明背景上の控えめな区切り線・装飾要素に使う。
   * rgba(6, 47, 58, ...) は --ls-navy-dark（#062f3a）のRGB値。
   */
  --ls-line-subtle: rgba(6, 47, 58, 0.16);
  --ls-decoration-subtle: rgba(6, 47, 58, 0.08);
  --ls-decoration-medium: rgba(6, 47, 58, 0.12);


  /* ==================================================
     Accent｜Loco Copper（仮値。正式決定まで暫定）
     挑戦・人の手・現場・積み重ね
     使用量は画面全体の5%以内
  ================================================== */

  /*
   * 大きな数字、太字見出し、アイコン、装飾、CTA用。
   * 小さい通常文字には使用しない。
   * #b5654a on #fcfbf8 ≒ 4.12:1
   */
  --ls-copper: #b5654a;

  /*
   * 小さい文字や高いコントラストが必要な場面用。
   * #944e3a on #fcfbf8 ≒ 5.95:1
   */
  --ls-copper-dark: #944e3a;

  /*
   * 淡い背景、ホバー背景、罫線、装飾面専用。
   * 文字色としては使用しない。
   */
  --ls-copper-light: #d7a08d;


  /* ==================================================
     Layout
  ================================================== */

  --ls-container: 1180px;
  --ls-container-wide: 1360px;
  --ls-side-space: 28px;


  /* ==================================================
     Spacing Scale
     4px基準。原則として以下の値から選択する。
     セクション固有の事情がある場合のみ例外を認める。
  ================================================== */

  --ls-space-4: 4px;
  --ls-space-8: 8px;
  --ls-space-12: 12px;
  --ls-space-16: 16px;
  --ls-space-24: 24px;
  --ls-space-32: 32px;
  --ls-space-40: 40px;
  --ls-space-48: 48px;
  --ls-space-64: 64px;
  --ls-space-72: 72px;
  --ls-space-80: 80px;
  --ls-space-96: 96px;
  --ls-space-120: 120px;
  --ls-space-144: 144px;

  /* 用途の目安
     要素間の小余白：8 / 12 / 16
     見出しと本文　：24 / 32 / 40
     ブロック間　　：48 / 64 / 80
     セクション間　：96 / 120 / 144 */

  --ls-space-section: var(--ls-space-120);
  --ls-space-section-mobile: var(--ls-space-72);


  /* ==================================================
     Shape Policy
     原則として角丸は使用しない。
     フォーム要素など機能上必要な場合のみ小さな角丸を認める。
  ================================================== */

  --ls-radius-none: 0;
  --ls-radius-small: 4px;


  /* ==================================================
     Shadow Policy
     原則として影は使用しない。
     階層表現が必要なUIに限り、控えめな影を使用する。
  ================================================== */

  --ls-shadow-none: none;
  --ls-shadow-soft: 0 4px 16px rgba(7, 61, 76, 0.08);


  /* ==================================================
     Motion Policy
     動きは情報理解を補助する場合に限定する。
     装飾目的の過度なアニメーションは使用しない。
  ================================================== */

  --ls-duration-fast: 0.2s;
  --ls-duration-normal: 0.35s;
  --ls-ease-standard: ease;


  /* ==================================================
     Typography
  ================================================== */

  --ls-font-jp:
    "Noto Sans JP",
    "Yu Gothic",
    "YuGothic",
    "Hiragino Kaku Gothic ProN",
    sans-serif;

  --ls-font-en:
    "Inter",
    "Helvetica Neue",
    Arial,
    sans-serif;

  --ls-font-serif-jp:
    "Noto Serif JP",
    "Yu Mincho",
    "YuMincho",
    "Hiragino Mincho ProN",
    serif;


  /* ==================================================
     Motion
  ================================================== */

  --ls-transition:
    var(--ls-duration-normal)
    var(--ls-ease-standard);
}


/* ==================================================
   Global reset
================================================== */

html {
  scroll-behavior: smooth;
}

body {
  color: var(--ls-text);
  font-family: var(--ls-font-jp);
  font-feature-settings: "palt";
  letter-spacing: 0.02em;
  background: var(--ls-bg);
}

body,
button,
input,
textarea,
select {
  font-family: var(--ls-font-jp);
}

img {
  max-width: 100%;
  height: auto;
}

a {
  transition:
    color var(--ls-transition),
    background-color var(--ls-transition),
    border-color var(--ls-transition),
    opacity var(--ls-transition),
    transform var(--ls-transition);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/*
 * フォーカスリングは --ls-focus-color を参照する。
 * この変数は .ls-section--dark 内で自動的に
 * コントラストの取れる色（Copper Light）へ切り替わる。
 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--ls-focus-color);
  outline-offset: 3px;
}


/* ==================================================
   SWELL adjustment
================================================== */

.home .c-pageTitle {
  display: none;
}

.home #content {
  padding-top: 0;
  margin-top: 0;
}

.home .l-mainContent {
  padding-top: 0;
}

.home .post_content {
  margin-top: 0;
}

.home .post_content > * {
  margin-top: 0;
  margin-bottom: 0;
}

.home .wp-block-group,
.home .wp-block-html {
  margin-top: 0;
  margin-bottom: 0;
}


/* ==================================================
   Shared containers
================================================== */

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

.ls-container--wide {
  width: min(
    var(--ls-container-wide),
    calc(100% - var(--ls-side-space) * 2)
  );
  margin-inline: auto;
}


/* ==================================================
   Shared section
================================================== */

.ls-section {
  position: relative;
  padding:
    var(--ls-space-section)
    var(--ls-side-space);
}

.ls-section--white {
  background: var(--ls-bg);
}

.ls-section--soft {
  background: var(--ls-bg-soft);
}

.ls-section--dark {
  /*
   * Semantic Foreground Tokensをこのスコープ内で上書きする。
   * Copper Darkは暗背景で3:1未満（約1.92:1）となるため使用しない。
   * Copper（無印）は暗背景で約5.23:1のため、装飾・数字強調は
   * そのまま --ls-copper を使用してよい。
   */
  --ls-fg: rgba(255, 255, 255, 0.92);
  --ls-fg-strong: #ffffff;
  --ls-fg-muted: rgba(255, 255, 255, 0.68);
  --ls-fg-subtle: rgba(255, 255, 255, 0.56);
  --ls-fg-link: var(--ls-copper-light);
  --ls-fg-link-hover: #ffffff;
  --ls-focus-color: var(--ls-copper-light);

  --ls-button-bg: #ffffff;
  --ls-button-border: #ffffff;
  --ls-button-text: var(--ls-navy);
  --ls-button-hover-bg: transparent;
  --ls-button-hover-border: #ffffff;
  --ls-button-hover-text: #ffffff;

  --ls-button-outline-text: #ffffff;
  --ls-button-outline-border: #ffffff;
  --ls-button-outline-hover-bg: #ffffff;
  --ls-button-outline-hover-text: var(--ls-navy);

  --ls-button-accent-bg: var(--ls-copper);
  --ls-button-accent-border: var(--ls-copper);
  --ls-button-accent-text: var(--ls-navy-dark);
  --ls-button-accent-hover-bg: transparent;
  --ls-button-accent-hover-border: var(--ls-copper-light);
  --ls-button-accent-hover-text: var(--ls-copper-light);

  color: #ffffff;
  background: var(--ls-bg-dark);
}


/* ==================================================
   Shared section heading
================================================== */

.ls-heading {
  margin: 0 0 var(--ls-space-64);
}

.ls-heading__en {
  display: flex;
  align-items: center;
  gap: var(--ls-space-16);
  margin: 0 0 var(--ls-space-12);
  color: var(--ls-fg-link);
  font-family: var(--ls-font-en);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.22em;
}

.ls-heading__en::before {
  display: block;
  flex: 0 0 var(--ls-space-48);
  width: var(--ls-space-48);
  height: 1px;
  content: "";
  background: currentColor;
}

.ls-heading__jp {
  margin: 0 0 0 var(--ls-space-64);
  color: var(--ls-fg-subtle);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.8;
}

.ls-heading__title {
  margin: var(--ls-space-32) 0 0;
  color: var(--ls-fg-strong);
  font-size: clamp(34px, 4.3vw, 60px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.025em;
}

/*
 * .ls-heading__eyebrow
 * .ls-heading__en（Copper/Navy系のアクセントカラー、下線付き）とは別の、
 * 控えめなラベル表記が必要な場面で使う。ABOUT/BUSINESSのような
 * 「見出し3点セット」の一部としてではなく、単独の小見出しラベルとして
 * 使う場合を想定（例: 会社案内ページの各セクション冒頭ラベル）。
 * 新規ページでは、まず .ls-heading__en の使用を優先的に検討し、
 * それでは強すぎる／下線が不要な場面でのみこちらを使う。
 */
.ls-heading__eyebrow {
  margin: 0;
  color: var(--ls-fg-muted);
  font-family: var(--ls-font-en);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.24em;
}


/* ==================================================
   Shared body text
================================================== */

/* 通常本文 */
.ls-copy {
  color: var(--ls-fg);
  font-size: 15px;
  line-height: 2.1;
}

.ls-copy p {
  margin: 0 0 var(--ls-space-24);
}

.ls-copy p:last-child {
  margin-bottom: 0;
}

/* 日付・注釈・補足情報 */
.ls-meta,
.ls-note,
.ls-caption {
  color: var(--ls-fg-muted);
}

/* 優先度の低い補助情報 */
.ls-subtle {
  color: var(--ls-fg-subtle);
}


/* ==================================================
   Shared text link
================================================== */

.ls-text-link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ls-space-32);
  min-width: 156px;
  padding: 0 0 var(--ls-space-8);
  color: var(--ls-fg-link);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
  border-bottom: 1px solid var(--ls-fg-link);
}

.ls-text-link:hover {
  gap: var(--ls-space-40);
  color: var(--ls-fg-link-hover);
  border-color: var(--ls-fg-link-hover);
}


/* ==================================================
   Shared button
================================================== */

.ls-button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ls-space-32);
  min-width: 220px;
  min-height: 58px;
  padding: var(--ls-space-16) var(--ls-space-24);
  color: var(--ls-button-text);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
  background: var(--ls-button-bg);
  border: 1px solid var(--ls-button-border);
}

.ls-button:hover {
  color: var(--ls-button-hover-text);
  background: var(--ls-button-hover-bg);
  border-color: var(--ls-button-hover-border);
}

.ls-button--outline {
  color: var(--ls-button-outline-text);
  background: transparent;
  border-color: var(--ls-button-outline-border);
}

.ls-button--outline:hover {
  color: var(--ls-button-outline-hover-text);
  background: var(--ls-button-outline-hover-bg);
}

/* Copper CTA｜ページ内で最も重要なCTAに限定して使用 */
.ls-button--accent {
  color: var(--ls-button-accent-text);
  background: var(--ls-button-accent-bg);
  border-color: var(--ls-button-accent-border);
}

.ls-button--accent:hover {
  color: var(--ls-button-accent-hover-text);
  background: var(--ls-button-accent-hover-bg);
  border-color: var(--ls-button-accent-hover-border);
}


/* ==================================================
   Shared page hero
   下層ページ（会社案内・事業紹介など）共通の
   「写真＋暗幕＋タイトル」構成。複数ページで再利用する。
================================================== */

.ls-page-hero {
  position: relative;
  display: grid;
  min-height: 560px;
  overflow: hidden;
  color: #ffffff;
  background: var(--ls-navy-dark);
  isolation: isolate;
}

.ls-page-hero__media,
.ls-page-hero__shade {
  position: absolute;
  inset: 0;
}

.ls-page-hero__media {
  z-index: -2;
}

.ls-page-hero__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.ls-page-hero__shade {
  z-index: -1;

  /* rgba(6, 47, 58, ...) は --ls-navy-dark（#062f3a）のRGB値 */
  background:
    linear-gradient(
      90deg,
      rgba(6, 47, 58, 0.78) 0%,
      rgba(6, 47, 58, 0.52) 52%,
      rgba(6, 47, 58, 0.18) 100%
    ),
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.05) 0%,
      rgba(0, 0, 0, 0.26) 100%
    );
}

.ls-page-hero__content {
  align-self: center;
  padding-block: var(--ls-space-96);
}

.ls-page-hero__en {
  margin: 0 0 var(--ls-space-16);
  font-family: var(--ls-font-en);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.24em;
}

.ls-page-hero__title {
  margin: 0;
  font-size: clamp(46px, 6vw, 76px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.04em;
}

.ls-page-hero__lead {
  margin: var(--ls-space-24) 0 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(16px, 1.6vw, 21px);
  line-height: 1.9;
  letter-spacing: 0.04em;
}

@media (max-width: 959px) {
  .ls-page-hero {
    min-height: 500px;
  }
}

@media (max-width: 767px) {
  .ls-page-hero {
    min-height: 440px;
  }

  .ls-page-hero__image {
    object-position: 62% center;
  }

  .ls-page-hero__shade {
    background:
      linear-gradient(
        180deg,
        rgba(6, 47, 58, 0.2) 0%,
        rgba(6, 47, 58, 0.72) 100%
      );
  }

  .ls-page-hero__content {
    align-self: end;
    padding-block: var(--ls-space-80) var(--ls-space-64);
  }

  .ls-page-hero__title {
    font-size: clamp(40px, 12vw, 56px);
  }
}


/* ==================================================
   Shared card
================================================== */

.ls-grid--3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ls-space-32);
}

@media (max-width: 767px) {
  .ls-grid--3col {
    grid-template-columns: 1fr;
    gap: var(--ls-space-24);
  }
}

/*
 * 直接の兄弟ブロック間に一定の余白を入れる汎用ユーティリティ。
 * 個別コンポーネントにmarginを持たせず、配置側で余白量を制御する。
 */
.ls-stack > * + * {
  margin-top: var(--ls-space-48);
}

.ls-stack--tight > * + * {
  margin-top: var(--ls-space-24);
}

/*
 * 767px以下でのみ改行を有効にする<br>用ユーティリティ。
 * デスクトップでは display:none で無効化される。
 */
.u-sp-only {
  display: none;
}

@media (max-width: 767px) {
  .u-sp-only {
    display: inline;
  }
}

.ls-surface--light,
.ls-card {
  /*
   * 白背景の自己完結サーフェス。
   * .ls-section--dark の中に配置されても、CSSカスタムプロパティの
   * 継承を断ち切り、明背景用の値へ明示的に戻す。
   */
  --ls-fg: var(--ls-charcoal);
  --ls-fg-strong: var(--ls-text);
  --ls-fg-muted: var(--ls-text-muted);
  --ls-fg-subtle: var(--ls-text-light);
  --ls-fg-link: var(--ls-navy);
  --ls-fg-link-hover: var(--ls-navy-dark);
  --ls-focus-color: var(--ls-copper-dark);

  --ls-button-bg: var(--ls-navy);
  --ls-button-border: var(--ls-navy);
  --ls-button-text: #ffffff;
  --ls-button-hover-bg: transparent;
  --ls-button-hover-border: var(--ls-navy);
  --ls-button-hover-text: var(--ls-navy);

  --ls-button-outline-text: var(--ls-navy);
  --ls-button-outline-border: var(--ls-navy);
  --ls-button-outline-hover-bg: var(--ls-navy);
  --ls-button-outline-hover-text: #ffffff;

  --ls-button-accent-bg: var(--ls-copper-dark);
  --ls-button-accent-border: var(--ls-copper-dark);
  --ls-button-accent-text: #ffffff;
  --ls-button-accent-hover-bg: transparent;
  --ls-button-accent-hover-border: var(--ls-copper-dark);
  --ls-button-accent-hover-text: var(--ls-copper-dark);
}

.ls-card {
  position: relative;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--ls-line);
}

.ls-card__body {
  padding: var(--ls-space-32);
}

.ls-card__number {
  display: block;
  margin-bottom: var(--ls-space-32);
  color: var(--ls-navy);
  font-family: var(--ls-font-en);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.ls-card__title {
  margin: 0 0 var(--ls-space-16);
  color: var(--ls-text);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.6;
}

.ls-card__text {
  margin: 0;
  color: var(--ls-charcoal);
  font-size: 14px;
  line-height: 1.9;
}


/* ==================================================
   Copper｜大きな文字専用
   24px以上、または18.66px以上の太字を原則とする
================================================== */

.ls-accent {
  color: var(--ls-copper);
}

.ls-number-highlight {
  color: var(--ls-copper);
  font-family: var(--ls-font-en);
  font-size: clamp(32px, 5vw, 64px);
  font-weight: 600;
  line-height: 1.1;
}


/* ==================================================
   Copper Dark｜小さい文字にも使用可能
================================================== */

.ls-accent-text {
  color: var(--ls-copper-dark);
}

.ls-accent-label {
  color: var(--ls-copper-dark);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
}


/* ==================================================
   Copper Light｜背景・罫線専用
   文字色には使用しない
================================================== */

.ls-accent-bg {
  background-color: color-mix(
    in srgb,
    var(--ls-copper-light) 18%,
    transparent
  );
}

.ls-accent-border {
  border-color: var(--ls-copper-light);
}

.ls-accent-line {
  background-color: var(--ls-copper);
}


/* ==================================================
   Serif｜代表メッセージ・ブランドストーリー限定
================================================== */

.ls-serif {
  font-family: var(--ls-font-serif-jp);
}

.ls-story-copy {
  font-family: var(--ls-font-serif-jp);
  font-size: clamp(18px, 2vw, 24px);
  line-height: 2;
  letter-spacing: 0.04em;
}


/* ==================================================
   Responsive
================================================== */

@media (max-width: 959px) {
  :root {
    --ls-side-space: 24px;
    --ls-space-section: var(--ls-space-96);
  }

  .ls-heading {
    /* 暫定値。実装後の目視確認で40pxへの調整余地あり */
    margin-bottom: var(--ls-space-48);
  }
}

@media (max-width: 767px) {
  :root {
    --ls-side-space: 20px;
    --ls-space-section: var(--ls-space-section-mobile);
  }

  .ls-heading__en {
    gap: var(--ls-space-12);
    font-size: 11px;
  }

  .ls-heading__en::before {
    flex-basis: var(--ls-space-32);
    width: var(--ls-space-32);
  }

  .ls-heading__jp {
    margin-left: var(--ls-space-48);
    font-size: 12px;
  }

  .ls-heading__title {
    margin-top: var(--ls-space-24);
    font-size: clamp(29px, 8vw, 38px);
    line-height: 1.55;
  }

  .ls-copy {
    font-size: 14px;
    line-height: 2;
  }

  .ls-button {
    width: 100%;
  }
}