/* ============================================================================
 * style-child.css — Revival 子テーマのスタイル「正本」（手管理 CSS）
 * ----------------------------------------------------------------------------
 * このファイルを直接編集する。SCSS / Tailwind は撤去済み（_deprecated/ に隔離・ビルド禁止）。
 * 色 / フォント: 下記 :root の CSS 変数。命名: BEM（.lp-* / .rv-*、__element、--modifier、状態 .is-*）。
 * ============================================================================
 *
 * === ファイル構成（assets/css/） ===
 *  style-child.css         — このファイル：基盤（:root / リセット / gutter / lp-container /
 *                            lp-section / lp-subpage 共通スキャフォールド / .lp-page-heading /
 *                            .hover-reset / .is-revival-lp グローバルリセット / .btn-arrow-outline）
 *  style-child-header.css  — ヘッダー UI：.lp-header / .lp-sp-menu / .lp-floating-cta
 *  style-child-main.css    — ページ本体：front-page セクション + .rv-{slug}__* 下層ページ群 +
 *                            メディアクエリ overrides + single-works 詳細
 *  style-child-footer.css  — フッター UI：.lp-page-top / .lp-site-footer / .lp-footer
 *
 *  functions.php で 4 ファイルを順序付きで enqueue
 *  （base → header → main → footer の依存チェーン）。
 *
 * === コーディング規約 ===
 *  - モバイルファースト一貫：ベース CSS（メディアクエリなし）が SP の見た目。
 *    `@media (min-width: 768px)` / `(min-width: 1024px)` は **セレクタにネストして書く**：
 *      .card {
 *        width:100%;
 *        @media (min-width: 768px) { width:50%; }
 *      }
 *    `@media (max-width: ...)` は **使用禁止**（端数 px も禁止）。
 *  - `:hover` は **`@media (hover: hover)` で囲む**（タッチ端末で hover を発火させない）：
 *      .button {
 *        @media (hover: hover) {
 *          &:hover { background:darkblue; }
 *        }
 *      }
 *  - **カンマ区切りセレクタは禁止**：`.a, .b { ... }` ではなく個別ルールに分解する
 *    （CSS 慣用のリセット `*, *::before, *::after` / `h1〜h6` 等は例外として残置）。
 *
 * === style-child.css 目次（行番号は概算）===
 *  L60+    :root（カラートークン / フォント）
 *  L76+    リセット（*, html, body, img, button, ul, ol 等）
 *  L135+   @media (prefers-reduced-motion: reduce)
 *  L143+   .gutter / .gutter-sm/md/lg/xl / .gutter-none / .gutter-none-sm/md/lg/xl
 *  L181+   .lp-container（+ --5xl/4xl/3xl/md）
 *  L190+   .lp-section（+ --white/gray/py16）/ .lp-br-md / .lp-text-center / .lp-actions / .lp-mb-* / .rv-reform__intro-section
 *  L251+   Tailwind 風 spacing ユーティリティ
 *            .p-{0..24} / .px-/.py-{0..24} / .pt-/.pb-/.pl-/.pr-{0..24}
 *            .m-/.mx-/.my-/.mt-/.mb-/.ml-/.mr-{0..20, auto}
 *            md:* (>=768px) / lg:* (>=1024px) プレフィックス（HTML 側で class="md:py-16"）
 *  L528+   .hover-reset / .is-revival-lp a:hover リセット
 *  L545+   .section-heading-jp（+ __title / __sub / --on-dark）
 *  L589+   .lp-subpage__hero / __hero-lead / __heading / __grid / __grid--reverse /
 *          __media / __media-img / __content / __sub-head / __text / __callout / __cta-wrap
 *  L728+   .lp-page-heading__eyebrow / __title / .lp-page-heading::after
 *  L760+   .btn-arrow-outline（+ .is-accent / .is-light、hover 含む）
 *
 * === 編集の指針 ===
 *  - 既存クラスの値変更: grep でクラス名を検索 → 該当ファイルを直接編集 → ブラウザリロードで確認（ビルド不要）
 *  - 新規セクション/ページ追加: header / main / footer の該当ファイル末尾に BEM ブロックを追記
 *  - 同セレクタ重複は避ける：既存ルールを直接編集する（cascade 順序に依存する設計はしない）
 */
:root {
  --color-primary: #202C5C;
  --color-primary-dark: #1D2440;
  --color-primary-light: #525C84;
  --color-accent: #FFE100;
  --color-bg-muted: #F3F4F7;
  --color-border: #E7E7E9;
  --color-line: #06C755;
  --color-text: #212121;
  --color-text-muted: #B0B1B4;
  --color-white: #ffffff;
  --color-black: #000000;
  --font-sans: "Jost", "Noto Sans JP", sans-serif;
  --font-jost: "Jost", sans-serif;
  --cocoon-default-font: var(--font-sans)
}
*,*::before,*::after {
  box-sizing:border-box
}
* {
  margin:0;
  padding:0
}
html {
  -webkit-text-size-adjust:100%;
  hanging-punctuation:first last
}
body {
  font-family:var(--font-sans);
  line-height:2;
  -webkit-font-smoothing:antialiased;
  min-height:100svh;
  overflow-wrap:anywhere;
  word-break:normal;
  line-break:strict
}
img,picture,video,canvas,svg {
  display:block;
  max-width:100%;
  height:auto
}
input,button,textarea,select {
  font:inherit;
  color:inherit
}
h1,h2,h3,h4,h5,h6 {
  font-size:inherit;
  font-weight:inherit
}
p,h1,h2,h3,h4,h5,h6 {
  overflow-wrap:anywhere
}
ul,ol {
  list-style:none
}
table {
  border-collapse:collapse;
  border-spacing:0
}
td,th {
  padding:0;
  text-align:left
}
iframe {
  border:0
}
button {
  cursor:pointer;
  background:none;
  border:none
}
a {
  color:inherit;
  text-decoration:none
}
@media(prefers-reduced-motion: reduce) {
  *,*::before,*::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important
  }
}
.gutter {
  padding-left:5% !important;
  padding-right:5% !important;
  @media (min-width: 768px) {
    padding-left:20px !important;
    padding-right:20px !important;
  }
}
.gutter-sm {
  @media (min-width: 640px) {
    padding-left:20px !important;
    padding-right:20px !important;
  }
}
.gutter-md {
  @media (min-width: 768px) {
    padding-left:20px !important;
    padding-right:20px !important;
  }
}
.gutter-lg {
  @media (min-width: 1024px) {
    padding-left:20px !important;
    padding-right:20px !important;
  }
}
.gutter-xl {
  @media (min-width: 1280px) {
    padding-left:80px !important;
    padding-right:80px !important;
  }
}
.gutter-none {
  padding-left:0 !important;
  padding-right:0 !important
}
/* ===== レイアウトヘルパー (旧 Tailwind max-w-* mx-auto / py-10 md:py-20 の置換) =====
   gutter と同じく全ページ共通の薄いレイアウト層。コンテンツ幅と標準セクション余白。 */
.lp-container {
  max-width:72rem;
  margin-left:auto;
  margin-right:auto;
}
.lp-container--5xl { max-width:64rem; }
.lp-container--4xl { max-width:56rem; }
.lp-container--3xl { max-width:48rem; }
.lp-container--md { max-width:28rem; }
.lp-section {
  padding-top:2.5rem;
  padding-bottom:2.5rem;
  @media (min-width: 768px) {
    padding-top:5rem;
    padding-bottom:5rem;
  }
}
.lp-section--white { background:var(--color-white); }
.lp-section--gray { background:var(--color-bg-muted); }
/* md パディングを py-16(4rem) に上書き（.lp-section と併用） */
.lp-section--py16 {
  @media (min-width: 768px) {
    padding-top:4rem;
    padding-bottom:4rem;
  }
}
/* レスポンシブ改行 (旧 Tailwind hidden md:inline) — SP では改行せず md+ で改行 */
.lp-br-md {
  display:none;
  @media (min-width: 768px) {
    display:inline;
  }
}
/* 折り返し制御 (旧 Tailwind inline-block) — 語句単位で改行させたい span に付与 */
.lp-inline-block { display:inline-block; }
/* テキスト中央寄せ / ボタン中央寄せ / 余白 (旧 Tailwind text-center / flex justify-center / mb-*) */
.lp-text-center { text-align:center; }
.text-center { text-align:center; }
.lp-actions { display:flex; justify-content:center; }
.lp-mb-2 { margin-bottom:.5rem; }
.lp-mb-6 { margin-bottom:1.5rem; }
.lp-mb-8 { margin-bottom:2rem; }
/* reform イントロ節 (旧 Tailwind bg-white pt-10 md:pt-16 pb-0; md の pt/pb は既存 !important 上書きが優先) */
.rv-reform__intro-section {
  background:var(--color-white);
  padding-top:2.5rem;
  padding-bottom:0;
}
.gutter-none-sm {
  @media (min-width: 640px) {
    padding-left:0 !important;
    padding-right:0 !important;
  }
}
.gutter-none-md {
  @media (min-width: 768px) {
    padding-left:0 !important;
    padding-right:0 !important;
  }
}
.gutter-none-lg {
  @media (min-width: 1024px) {
    padding-left:0 !important;
    padding-right:0 !important;
  }
}
.gutter-none-xl {
  @media (min-width: 1280px) {
    padding-left:0 !important;
    padding-right:0 !important;
  }
}

/* ============================================================================
 * Tailwind 風 spacing ユーティリティ
 * ----------------------------------------------------------------------------
 * セクション余白を BEM 個別値ではなく、Tailwind と同じ rem スケール
 * (1単位 = 0.25rem = 4px) のユーティリティクラスで統一する。
 *
 * 使い方（HTML テンプレート側で付与）:
 *   <section class="lp-section py-12 md:py-20 lg:py-24">
 *   <div class="mt-8 mb-4">
 *
 * 提供スケール: 0 / 1 / 2 / 3 / 4 / 5 / 6 / 8 / 10 / 12 / 14 / 16 / 18 / 20 / 24 / 28 / 32
 *   ※ 14/18/28 は py / md:py / md:pb 系のみ（全プロパティ網羅ではなく必要時に追加）
 * プロパティ: p / px / py / pt / pb / pl / pr / m / mx / my / mt / mb / ml / mr
 * レスポンシブ: md:* (>=768px) / lg:* (>=1024px)
 *   ※ HTML で class="md:py-16" のように半角コロン記法。CSS 側は ".md\:py-16"
 * ============================================================================ */

/* padding 全方向 */
.p-0 { padding:0 !important; }
.p-1 { padding:.25rem !important; }
.p-2 { padding:.5rem !important; }
.p-3 { padding:.75rem !important; }
.p-4 { padding:1rem !important; }
.p-5 { padding:1.25rem !important; }
.p-6 { padding:1.5rem !important; }
.p-8 { padding:2rem !important; }
.p-10 { padding:2.5rem !important; }
.p-12 { padding:3rem !important; }
.p-16 { padding:4rem !important; }
.p-20 { padding:5rem !important; }
.p-24 { padding:6rem !important; }

/* padding-x（左右） */
.px-0 { padding-left:0 !important; padding-right:0 !important; }
.px-1 { padding-left:.25rem !important; padding-right:.25rem !important; }
.px-2 { padding-left:.5rem !important; padding-right:.5rem !important; }
.px-3 { padding-left:.75rem !important; padding-right:.75rem !important; }
.px-4 { padding-left:1rem !important; padding-right:1rem !important; }
.px-5 { padding-left:1.25rem !important; padding-right:1.25rem !important; }
.px-6 { padding-left:1.5rem !important; padding-right:1.5rem !important; }
.px-8 { padding-left:2rem !important; padding-right:2rem !important; }
.px-10 { padding-left:2.5rem !important; padding-right:2.5rem !important; }
.px-12 { padding-left:3rem !important; padding-right:3rem !important; }
.px-16 { padding-left:4rem !important; padding-right:4rem !important; }
.px-20 { padding-left:5rem !important; padding-right:5rem !important; }
.px-24 { padding-left:6rem !important; padding-right:6rem !important; }

/* padding-y（上下） — セクション余白で最頻用 */
.py-0 { padding-top:0 !important; padding-bottom:0 !important; }
.py-1 { padding-top:.25rem !important; padding-bottom:.25rem !important; }
.py-2 { padding-top:.5rem !important; padding-bottom:.5rem !important; }
.py-3 { padding-top:.75rem !important; padding-bottom:.75rem !important; }
.py-4 { padding-top:1rem !important; padding-bottom:1rem !important; }
.py-5 { padding-top:1.25rem !important; padding-bottom:1.25rem !important; }
.py-6 { padding-top:1.5rem !important; padding-bottom:1.5rem !important; }
.py-8 { padding-top:2rem !important; padding-bottom:2rem !important; }
.py-10 { padding-top:2.5rem !important; padding-bottom:2.5rem !important; }
.py-12 { padding-top:3rem !important; padding-bottom:3rem !important; }
.py-14 { padding-top:3.5rem !important; padding-bottom:3.5rem !important; }
.py-16 { padding-top:4rem !important; padding-bottom:4rem !important; }
.py-18 { padding-top:4.5rem !important; padding-bottom:4.5rem !important; }
.py-20 { padding-top:5rem !important; padding-bottom:5rem !important; }
.py-24 { padding-top:6rem !important; padding-bottom:6rem !important; }
.py-28 { padding-top:7rem !important; padding-bottom:7rem !important; }
.py-32 { padding-top:8rem !important; padding-bottom:8rem !important; }

/* padding 個別側 */
.pt-0 { padding-top:0 !important; }    .pb-0 { padding-bottom:0 !important; }    .pl-0 { padding-left:0 !important; }    .pr-0 { padding-right:0 !important; }
.pt-1 { padding-top:.25rem !important; } .pb-1 { padding-bottom:.25rem !important; } .pl-1 { padding-left:.25rem !important; } .pr-1 { padding-right:.25rem !important; }
.pt-2 { padding-top:.5rem !important; } .pb-2 { padding-bottom:.5rem !important; } .pl-2 { padding-left:.5rem !important; } .pr-2 { padding-right:.5rem !important; }
.pt-3 { padding-top:.75rem !important; } .pb-3 { padding-bottom:.75rem !important; } .pl-3 { padding-left:.75rem !important; } .pr-3 { padding-right:.75rem !important; }
.pt-4 { padding-top:1rem !important; } .pb-4 { padding-bottom:1rem !important; } .pl-4 { padding-left:1rem !important; } .pr-4 { padding-right:1rem !important; }
.pt-6 { padding-top:1.5rem !important; } .pb-6 { padding-bottom:1.5rem !important; } .pl-6 { padding-left:1.5rem !important; } .pr-6 { padding-right:1.5rem !important; }
.pt-8 { padding-top:2rem !important; } .pb-8 { padding-bottom:2rem !important; } .pl-8 { padding-left:2rem !important; } .pr-8 { padding-right:2rem !important; }
.pt-10 { padding-top:2.5rem !important; } .pb-10 { padding-bottom:2.5rem !important; } .pl-10 { padding-left:2.5rem !important; } .pr-10 { padding-right:2.5rem !important; }
.pt-12 { padding-top:3rem !important; } .pb-12 { padding-bottom:3rem !important; } .pl-12 { padding-left:3rem !important; } .pr-12 { padding-right:3rem !important; }
.pt-16 { padding-top:4rem !important; } .pb-16 { padding-bottom:4rem !important; } .pl-16 { padding-left:4rem !important; } .pr-16 { padding-right:4rem !important; }
.pt-20 { padding-top:5rem !important; } .pb-20 { padding-bottom:5rem !important; } .pl-20 { padding-left:5rem !important; } .pr-20 { padding-right:5rem !important; }
.pt-24 { padding-top:6rem !important; } .pb-24 { padding-bottom:6rem !important; } .pl-24 { padding-left:6rem !important; } .pr-24 { padding-right:6rem !important; }

/* margin 全方向 */
.m-0 { margin:0 !important; }
.m-auto { margin:auto !important; }
.m-1 { margin:.25rem !important; }
.m-2 { margin:.5rem !important; }
.m-4 { margin:1rem !important; }
.m-6 { margin:1.5rem !important; }
.m-8 { margin:2rem !important; }
.m-12 { margin:3rem !important; }
.m-16 { margin:4rem !important; }

/* margin-x（左右） */
.mx-0 { margin-left:0 !important; margin-right:0 !important; }
.mx-auto { margin-left:auto !important; margin-right:auto !important; }
.mx-2 { margin-left:.5rem !important; margin-right:.5rem !important; }
.mx-4 { margin-left:1rem !important; margin-right:1rem !important; }
.mx-6 { margin-left:1.5rem !important; margin-right:1.5rem !important; }
.mx-8 { margin-left:2rem !important; margin-right:2rem !important; }

/* margin-y（上下） */
.my-0 { margin-top:0 !important; margin-bottom:0 !important; }
.my-2 { margin-top:.5rem !important; margin-bottom:.5rem !important; }
.my-4 { margin-top:1rem !important; margin-bottom:1rem !important; }
.my-6 { margin-top:1.5rem !important; margin-bottom:1.5rem !important; }
.my-8 { margin-top:2rem !important; margin-bottom:2rem !important; }
.my-10 { margin-top:2.5rem !important; margin-bottom:2.5rem !important; }
.my-12 { margin-top:3rem !important; margin-bottom:3rem !important; }
.my-16 { margin-top:4rem !important; margin-bottom:4rem !important; }

/* margin 個別側 */
.mt-0 { margin-top:0 !important; } .mb-0 { margin-bottom:0 !important; } .ml-0 { margin-left:0 !important; } .mr-0 { margin-right:0 !important; }
.mt-1 { margin-top:.25rem !important; } .mb-1 { margin-bottom:.25rem !important; } .ml-1 { margin-left:.25rem !important; } .mr-1 { margin-right:.25rem !important; }
.mt-2 { margin-top:.5rem !important; } .mb-2 { margin-bottom:.5rem !important; } .ml-2 { margin-left:.5rem !important; } .mr-2 { margin-right:.5rem !important; }
.mt-3 { margin-top:.75rem !important; } .mb-3 { margin-bottom:.75rem !important; }
.mt-4 { margin-top:1rem !important; } .mb-4 { margin-bottom:1rem !important; } .ml-4 { margin-left:1rem !important; } .mr-4 { margin-right:1rem !important; }
.mt-5 { margin-top:1.25rem !important; } .mb-5 { margin-bottom:1.25rem !important; }
.mt-6 { margin-top:1.5rem !important; } .mb-6 { margin-bottom:1.5rem !important; } .ml-6 { margin-left:1.5rem !important; } .mr-6 { margin-right:1.5rem !important; }
.mt-8 { margin-top:2rem !important; } .mb-8 { margin-bottom:2rem !important; } .ml-8 { margin-left:2rem !important; } .mr-8 { margin-right:2rem !important; }
.mt-10 { margin-top:2.5rem !important; } .mb-10 { margin-bottom:2.5rem !important; }
.mt-12 { margin-top:3rem !important; } .mb-12 { margin-bottom:3rem !important; }
.mt-16 { margin-top:4rem !important; } .mb-16 { margin-bottom:4rem !important; }
.mt-20 { margin-top:5rem !important; } .mb-20 { margin-bottom:5rem !important; }
.mt-auto { margin-top:auto !important; } .mb-auto { margin-bottom:auto !important; } .ml-auto { margin-left:auto !important; } .mr-auto { margin-right:auto !important; }

/* 背景色ユーティリティ（CSS 変数経由） */
.bg-primary       { background: var(--color-primary) !important; }
.bg-primary-dark  { background: var(--color-primary-dark) !important; }
.bg-primary-light { background: var(--color-primary-light) !important; }
.bg-accent        { background: var(--color-accent) !important; }
.bg-muted         { background: var(--color-bg-muted) !important; }
.bg-white         { background: var(--color-white) !important; }
.bg-black         { background: var(--color-black) !important; }
.bg-line          { background: var(--color-line) !important; }
.bg-none          { background: none !important; }
.bg-transparent   { background: transparent !important; }

/* 文字色ユーティリティ */
.text-primary       { color: var(--color-primary) !important; }
.text-primary-dark  { color: var(--color-primary-dark) !important; }
.text-primary-light { color: var(--color-primary-light) !important; }
.text-accent        { color: var(--color-accent) !important; }
.text-white         { color: var(--color-white) !important; }
.text-black         { color: var(--color-black) !important; }
.text-muted         { color: var(--color-text-muted) !important; }
.text-line          { color: var(--color-line) !important; }
.text-inherit       { color: inherit !important; }

/* リスト */
.list-none { list-style: none !important; }

/* MD (>=768px) プレフィックス — class="md:py-16" のように HTML 側で付与 */
.md\:p-0    { @media (min-width: 768px) { padding:0 !important; } }
.md\:p-4    { @media (min-width: 768px) { padding:1rem !important; } }
.md\:p-6    { @media (min-width: 768px) { padding:1.5rem !important; } }
.md\:p-8    { @media (min-width: 768px) { padding:2rem !important; } }
.md\:p-12   { @media (min-width: 768px) { padding:3rem !important; } }
.md\:p-16   { @media (min-width: 768px) { padding:4rem !important; } }

.md\:py-0   { @media (min-width: 768px) { padding-top:0 !important; padding-bottom:0 !important; } }
.md\:py-4   { @media (min-width: 768px) { padding-top:1rem !important; padding-bottom:1rem !important; } }
.md\:py-8   { @media (min-width: 768px) { padding-top:2rem !important; padding-bottom:2rem !important; } }
.md\:py-10  { @media (min-width: 768px) { padding-top:2.5rem !important; padding-bottom:2.5rem !important; } }
.md\:py-12  { @media (min-width: 768px) { padding-top:3rem !important; padding-bottom:3rem !important; } }
.md\:py-14  { @media (min-width: 768px) { padding-top:3.5rem !important; padding-bottom:3.5rem !important; } }
.md\:py-16  { @media (min-width: 768px) { padding-top:4rem !important; padding-bottom:4rem !important; } }
.md\:py-18  { @media (min-width: 768px) { padding-top:4.5rem !important; padding-bottom:4.5rem !important; } }
.md\:py-20  { @media (min-width: 768px) { padding-top:5rem !important; padding-bottom:5rem !important; } }
.md\:py-24  { @media (min-width: 768px) { padding-top:6rem !important; padding-bottom:6rem !important; } }
.md\:py-28  { @media (min-width: 768px) { padding-top:7rem !important; padding-bottom:7rem !important; } }
.md\:py-32  { @media (min-width: 768px) { padding-top:8rem !important; padding-bottom:8rem !important; } }
.md\:pt-2   { @media (min-width: 768px) { padding-top:.5rem !important; } }
.md\:pt-4   { @media (min-width: 768px) { padding-top:1rem !important; } }
.md\:pt-6   { @media (min-width: 768px) { padding-top:1.5rem !important; } }
.md\:pt-8   { @media (min-width: 768px) { padding-top:2rem !important; } }
.md\:pt-10  { @media (min-width: 768px) { padding-top:2.5rem !important; } }
.md\:pt-12  { @media (min-width: 768px) { padding-top:3rem !important; } }
.md\:pt-14  { @media (min-width: 768px) { padding-top:3.5rem !important; } }
.md\:pt-16  { @media (min-width: 768px) { padding-top:4rem !important; } }
.md\:pt-20  { @media (min-width: 768px) { padding-top:5rem !important; } }
.md\:pt-24  { @media (min-width: 768px) { padding-top:6rem !important; } }
.md\:pb-0   { @media (min-width: 768px) { padding-bottom:0 !important; } }
.md\:pb-2   { @media (min-width: 768px) { padding-bottom:.5rem !important; } }
.md\:pb-4   { @media (min-width: 768px) { padding-bottom:1rem !important; } }
.md\:pb-8   { @media (min-width: 768px) { padding-bottom:2rem !important; } }
.md\:pb-10  { @media (min-width: 768px) { padding-bottom:2.5rem !important; } }
.md\:pb-12  { @media (min-width: 768px) { padding-bottom:3rem !important; } }
.md\:pb-14  { @media (min-width: 768px) { padding-bottom:3.5rem !important; } }
.md\:pb-16  { @media (min-width: 768px) { padding-bottom:4rem !important; } }
.md\:pb-20  { @media (min-width: 768px) { padding-bottom:5rem !important; } }
.md\:pb-24  { @media (min-width: 768px) { padding-bottom:6rem !important; } }
.md\:pb-28  { @media (min-width: 768px) { padding-bottom:7rem !important; } }
.md\:pb-32  { @media (min-width: 768px) { padding-bottom:8rem !important; } }

.md\:px-0   { @media (min-width: 768px) { padding-left:0 !important; padding-right:0 !important; } }
.md\:px-4   { @media (min-width: 768px) { padding-left:1rem !important; padding-right:1rem !important; } }
.md\:px-8   { @media (min-width: 768px) { padding-left:2rem !important; padding-right:2rem !important; } }
.md\:px-12  { @media (min-width: 768px) { padding-left:3rem !important; padding-right:3rem !important; } }

.md\:my-0   { @media (min-width: 768px) { margin-top:0 !important; margin-bottom:0 !important; } }
.md\:my-4   { @media (min-width: 768px) { margin-top:1rem !important; margin-bottom:1rem !important; } }
.md\:my-8   { @media (min-width: 768px) { margin-top:2rem !important; margin-bottom:2rem !important; } }
.md\:my-12  { @media (min-width: 768px) { margin-top:3rem !important; margin-bottom:3rem !important; } }
.md\:my-16  { @media (min-width: 768px) { margin-top:4rem !important; margin-bottom:4rem !important; } }

.md\:mt-0   { @media (min-width: 768px) { margin-top:0 !important; } }
.md\:mt-4   { @media (min-width: 768px) { margin-top:1rem !important; } }
.md\:mt-8   { @media (min-width: 768px) { margin-top:2rem !important; } }
.md\:mt-12  { @media (min-width: 768px) { margin-top:3rem !important; } }
.md\:mt-16  { @media (min-width: 768px) { margin-top:4rem !important; } }

.md\:mb-0   { @media (min-width: 768px) { margin-bottom:0 !important; } }
.md\:m-0    { @media (min-width: 768px) { margin:0 !important; } }
.md\:mx-0   { @media (min-width: 768px) { margin-left:0 !important; margin-right:0 !important; } }
.md\:ml-0   { @media (min-width: 768px) { margin-left:0 !important; } }
.md\:mr-0   { @media (min-width: 768px) { margin-right:0 !important; } }
.md\:pt-0   { @media (min-width: 768px) { padding-top:0 !important; } }
.md\:pl-0   { @media (min-width: 768px) { padding-left:0 !important; } }
.md\:pr-0   { @media (min-width: 768px) { padding-right:0 !important; } }
.md\:mb-2   { @media (min-width: 768px) { margin-bottom:.5rem !important; } }
.md\:mb-4   { @media (min-width: 768px) { margin-bottom:1rem !important; } }
.md\:mb-5   { @media (min-width: 768px) { margin-bottom:1.25rem !important; } }
.md\:mb-6   { @media (min-width: 768px) { margin-bottom:1.5rem !important; } }
.md\:mb-8   { @media (min-width: 768px) { margin-bottom:2rem !important; } }
.md\:mb-10  { @media (min-width: 768px) { margin-bottom:2.5rem !important; } }
.md\:mb-12  { @media (min-width: 768px) { margin-bottom:3rem !important; } }
.md\:mb-16  { @media (min-width: 768px) { margin-bottom:4rem !important; } }
.md\:mb-20  { @media (min-width: 768px) { margin-bottom:5rem !important; } }
.md\:mb-24  { @media (min-width: 768px) { margin-bottom:6rem !important; } }
.md\:mt-2   { @media (min-width: 768px) { margin-top:.5rem !important; } }
.md\:mt-5   { @media (min-width: 768px) { margin-top:1.25rem !important; } }
.md\:mt-6   { @media (min-width: 768px) { margin-top:1.5rem !important; } }
.md\:mt-10  { @media (min-width: 768px) { margin-top:2.5rem !important; } }
.md\:mt-20  { @media (min-width: 768px) { margin-top:5rem !important; } }
.md\:mt-24  { @media (min-width: 768px) { margin-top:6rem !important; } }

/* LG (>=1024px) プレフィックス — class="lg:py-24" */
.lg\:p-0    { @media (min-width: 1024px) { padding:0 !important; } }
.lg\:p-4    { @media (min-width: 1024px) { padding:1rem !important; } }
.lg\:p-8    { @media (min-width: 1024px) { padding:2rem !important; } }
.lg\:p-12   { @media (min-width: 1024px) { padding:3rem !important; } }
.lg\:p-16   { @media (min-width: 1024px) { padding:4rem !important; } }

.lg\:py-0   { @media (min-width: 1024px) { padding-top:0 !important; padding-bottom:0 !important; } }
.lg\:py-4   { @media (min-width: 1024px) { padding-top:1rem !important; padding-bottom:1rem !important; } }
.lg\:py-8   { @media (min-width: 1024px) { padding-top:2rem !important; padding-bottom:2rem !important; } }
.lg\:py-12  { @media (min-width: 1024px) { padding-top:3rem !important; padding-bottom:3rem !important; } }
.lg\:py-16  { @media (min-width: 1024px) { padding-top:4rem !important; padding-bottom:4rem !important; } }
.lg\:py-20  { @media (min-width: 1024px) { padding-top:5rem !important; padding-bottom:5rem !important; } }
.lg\:py-24  { @media (min-width: 1024px) { padding-top:6rem !important; padding-bottom:6rem !important; } }
.lg\:py-32  { @media (min-width: 1024px) { padding-top:8rem !important; padding-bottom:8rem !important; } }

.lg\:px-0   { @media (min-width: 1024px) { padding-left:0 !important; padding-right:0 !important; } }
.lg\:px-4   { @media (min-width: 1024px) { padding-left:1rem !important; padding-right:1rem !important; } }
.lg\:px-8   { @media (min-width: 1024px) { padding-left:2rem !important; padding-right:2rem !important; } }
.lg\:pt-0   { @media (min-width: 1024px) { padding-top:0 !important; } }
.lg\:pb-0   { @media (min-width: 1024px) { padding-bottom:0 !important; } }
.lg\:pl-0   { @media (min-width: 1024px) { padding-left:0 !important; } }
.lg\:pr-0   { @media (min-width: 1024px) { padding-right:0 !important; } }
.lg\:m-0    { @media (min-width: 1024px) { margin:0 !important; } }
.lg\:mx-0   { @media (min-width: 1024px) { margin-left:0 !important; margin-right:0 !important; } }
.lg\:ml-0   { @media (min-width: 1024px) { margin-left:0 !important; } }
.lg\:mr-0   { @media (min-width: 1024px) { margin-right:0 !important; } }

.lg\:my-0   { @media (min-width: 1024px) { margin-top:0 !important; margin-bottom:0 !important; } }
.lg\:my-8   { @media (min-width: 1024px) { margin-top:2rem !important; margin-bottom:2rem !important; } }
.lg\:my-12  { @media (min-width: 1024px) { margin-top:3rem !important; margin-bottom:3rem !important; } }
.lg\:my-16  { @media (min-width: 1024px) { margin-top:4rem !important; margin-bottom:4rem !important; } }

.lg\:mt-0   { @media (min-width: 1024px) { margin-top:0 !important; } }
.lg\:mt-8   { @media (min-width: 1024px) { margin-top:2rem !important; } }
.lg\:mt-12  { @media (min-width: 1024px) { margin-top:3rem !important; } }
.lg\:mt-16  { @media (min-width: 1024px) { margin-top:4rem !important; } }

.lg\:mb-0   { @media (min-width: 1024px) { margin-bottom:0 !important; } }
.lg\:mb-8   { @media (min-width: 1024px) { margin-bottom:2rem !important; } }
.lg\:mb-12  { @media (min-width: 1024px) { margin-bottom:3rem !important; } }
.lg\:mb-16  { @media (min-width: 1024px) { margin-bottom:4rem !important; } }

.hover-reset {
  color:inherit;
  text-decoration:none;
  @media (hover: hover) {
    &:hover {
      color:inherit;
    }
  }
}
/* Cocoon親の a:hover { color:#e53900 } を打ち消す（LP ページ全体で文字色を hover で変化させない） */
.is-revival-lp {
  @media (hover: hover) {
    a:hover {
      color:inherit;
    }
  }
}
.section-heading-jp {
  position:relative;
  padding-left:1.5rem
}
.section-heading-jp::before {
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:.25rem;
  height:100%;
  background:linear-gradient(to bottom, var(--color-accent) 50%, var(--color-primary) 50%)
}
.section-heading-jp__title {
  font-size:1rem;
  font-weight:500;
  line-height:1.5;
  min-height:2.5rem;
  display:flex;
  align-items:center;
  color:var(--color-primary);
  font-feature-settings:"palt" 1;
  font-kerning:normal
}
.section-heading-jp__sub {
  font-family:var(--font-jost);
  font-size:1.875rem;
  font-weight:500;
  line-height:1.2;
  letter-spacing:-0.01em;
  color:var(--color-primary);
  @media (min-width: 768px) {
    font-size:3rem;
  }
}
.section-heading-jp--on-dark::before {
  background:linear-gradient(to bottom, var(--color-accent) 50%, var(--color-white) 50%)
}
.section-heading-jp--on-dark .section-heading-jp__title {
  color:var(--color-white)
}
.section-heading-jp--on-dark .section-heading-jp__sub {
  color:var(--color-white)
}
.lp-subpage__hero {
  background:var(--color-primary);
  color:var(--color-white);
  padding-top:4rem;
  padding-bottom:4rem;
  @media (min-width: 768px) {
    padding-top:5rem;
    padding-bottom:5rem;
  }
}
.lp-subpage__hero-lead {
  margin-top:2rem;
  font-size:1rem;
  line-height:2;
  @media (min-width: 768px) {
    margin-top:2.5rem;
    font-size:1.125rem;
  }
}
.lp-subpage__heading {
  margin-bottom:2.5rem;
  @media (min-width: 768px) {
    margin-bottom:3.5rem;
  }
}
.lp-subpage__grid {
  display:grid;
  grid-template-columns:1fr;
  gap:2.5rem;
  @media (min-width: 768px) {
    grid-template-columns:5fr 6fr;
    gap:3rem;
    align-items:start;
  }
  @media (min-width: 1024px) {
    gap:4rem;
  }
}
.lp-subpage__grid--reverse {
  @media (min-width: 768px) {
    grid-template-columns:6fr 5fr;
    .lp-subpage__media {
      order:2;
    }
    .lp-subpage__content {
      order:1;
    }
  }
}
.lp-subpage__media {
  aspect-ratio:1/1;
  overflow:hidden
}
.lp-subpage__media-img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block
}
.lp-subpage__content {
  display:flex;
  flex-direction:column;
  gap:2rem;
  @media (min-width: 768px) {
    gap:2.5rem;
  }
}
.lp-subpage__sub-head {
  position:relative;
  padding-left:1rem;
  margin-bottom:.75rem;
  font-size:1.125rem;
  font-weight:700;
  color:var(--color-primary);
  line-height:1.5;
  @media (min-width: 768px) {
    font-size:1.25rem;
  }
}
.lp-subpage__sub-head::before {
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:4px;
  height:100%;
  background:var(--color-accent)
}
.lp-subpage__text {
  font-size:1rem;
  line-height:2;
  color:var(--color-text)
}
.lp-subpage__callout {
  margin-top:3rem;
  padding:1.5rem;
  background:var(--color-primary);
  color:var(--color-white);
  border-left:4px solid var(--color-accent);
  @media (min-width: 768px) {
    margin-top:4rem;
    padding:2.5rem 2.5rem 2.5rem 3rem;
    max-width:48rem;
    margin-left:auto;
    margin-right:auto;
  }
}
.lp-subpage__callout-title {
  font-size:1.125rem;
  font-weight:700;
  margin-bottom:1rem;
  color:var(--color-accent)
}
.lp-subpage__callout-text {
  font-size:1rem;
  line-height:2
}
.lp-subpage__cta-wrap {
  margin-top:3rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1rem;
  @media (min-width: 768px) {
    margin-top:4rem;
    flex-direction:row;
    justify-content:center;
    align-items:stretch;
    gap:1.5rem;
  }
  .btn-arrow-outline {
    max-width:none;
    @media (min-width: 768px) {
      width:auto;
      flex:1 1 0;
      max-width:28rem;
    }
  }
}
.lp-page-heading__eyebrow {
  display:block;
  font-family:var(--font-jost);
  font-size:.875rem;
  font-weight:500;
  letter-spacing:.18em;
  line-height:1;
  text-transform:uppercase;
  color:var(--color-accent);
  margin-bottom:.75rem
}
.lp-page-heading__title {
  font-size:2rem;
  font-weight:500;
  line-height:1.4;
  color:inherit;
  margin:0;
  @media (min-width: 768px) {
    font-size:2.5rem;
  }
  @media (min-width: 1024px) {
    font-size:3rem;
  }
}
.lp-page-heading::after {
  content:"";
  display:block;
  width:3rem;
  height:4px;
  background:var(--color-accent);
  margin-top:1.25rem
}
.btn-arrow-outline {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.5rem;
  width:100%;
  max-width:28rem;
  padding:1rem 1.5rem;
  background:var(--color-white);
  border:1px solid var(--color-primary);
  color:var(--color-primary);
  font-weight:700;
  letter-spacing:.05em;
  transition:background-color .3s,color .3s,border-color .3s;
}
.is-revival-lp .btn-arrow-outline {
  @media (hover: hover) {
    &:hover {
      background:var(--color-primary);
      color:var(--color-white);
    }
    &.is-accent:hover {
      background:var(--color-primary);
      border-color:var(--color-primary);
      color:var(--color-white);
    }
    &.is-light:hover {
      background:var(--color-accent);
      color:var(--color-primary);
      border-color:var(--color-accent);
    }
  }
}

/* スクロール連動フェードアップ */
.js-fade-up {
  opacity:0;
  transform:translateY(24px);
  transition:opacity 1.1s ease,transform 1.1s ease;
}
.js-fade-up.is-visible {
  opacity:1;
  transform:translateY(0);
}
@media (prefers-reduced-motion:reduce) {
  .js-fade-up,.js-fade-up.is-visible {
    opacity:1;
    transform:none;
    transition:none;
  }
}