/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Aug 03 2026 | 04:56:41 */
/* =========================================================================
   LP Template style.css
   汎用ランディングページテンプレート用スタイルシート
   HTML5 + CSS3 のみで構成（JavaScript不使用）

   目次（Table of Contents）
   1. Reset ................. ブラウザデフォルトのリセット
   2. Root .................. CSS変数（カラー・余白・フォント等）
   3. Typography ............ 見出し・本文・リンク等の文字設定
   4. Layout ................ container / section等のレイアウト基盤
   5. Grid .................. CSS Gridベースのカラムレイアウト
   6. Button ................ ボタンコンポーネント
   7. Card .................. カードコンポーネント
   8. Table ................. テーブルコンポーネント
   9. Utility ............... margin/padding/表示切替等のユーティリティ
   10. Components ........... Hero/FAQ/Flow等、LPページ固有のコンポーネント
   11. Responsive ........... レスポンシブ対応（メディアクエリ）
   ========================================================================= */

/* =========================================================================
   1. Reset
   ブラウザ間の表示差異をなくすための最小限のリセット
   ========================================================================= */
.farmolp_lp-root *,
.farmolp_lp-root *::before,
.farmolp_lp-root *::after {
  box-sizing: border-box !important;
  /* すべての要素にborder-boxを適用し、paddingやborderを含めたサイズ計算にする */
}
.farmolp_lp-root {
  scroll-behavior: smooth !important;
  /* アンカーリンク移動時に滑らかにスクロールする */
  -webkit-text-size-adjust: 100% !important;
}
.farmolp_lp-root,
.farmolp_lp-root h1,
.farmolp_lp-root h2,
.farmolp_lp-root h3,
.farmolp_lp-root h4,
.farmolp_lp-root h5,
.farmolp_lp-root h6,
.farmolp_lp-root p,
.farmolp_lp-root ul,
.farmolp_lp-root ol,
.farmolp_lp-root figure,
.farmolp_lp-root blockquote,
.farmolp_lp-root dl,
.farmolp_lp-root dd {
  margin: 0 !important;
  /* 要素ごとのデフォルトmarginをリセットし、余白はユーティリティで統一管理する */
}
.farmolp_lp-root ul[role="list"],
.farmolp_lp-root ol[role="list"] {
  list-style: none !important;
}
.farmolp_lp-root {
  min-height: 100vh !important;
  text-rendering: optimizeSpeed !important;
  line-height: 1.9 !important;
}
.farmolp_lp-root img,
.farmolp_lp-root picture,
.farmolp_lp-root video,
.farmolp_lp-root canvas,
.farmolp_lp-root svg {
  display: block !important;
  max-width: 100% !important;
  /* 画像等はブロック要素化し、親要素からはみ出さないようにする */
}
.farmolp_lp-root img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: cover !important;
  /* 指定領域に対して画像をトリミングしながら綺麗にフィットさせる */
}
.farmolp_lp-root input,
.farmolp_lp-root button,
.farmolp_lp-root textarea,
.farmolp_lp-root select {
  font: inherit !important;
  /* フォーム部品にも本文と同じフォント設定を継承させる */
}
.farmolp_lp-root button {
  cursor: pointer !important;
  background: none !important;
  border: none !important;
}
.farmolp_lp-root a {
  color: inherit !important;
  text-decoration: none !important;
}
.farmolp_lp-root table {
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  width: 100% !important;
}

@media (prefers-reduced-motion: reduce) {
.farmolp_lp-root {
    scroll-behavior: auto !important;
  }
.farmolp_lp-root *,
.farmolp_lp-root *::before,
.farmolp_lp-root *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================================
   2. Root
   サイト全体で使用するCSS変数を一元管理する
   値を変更するだけでサイト全体のトーンを調整できる
   ========================================================================= */
.farmolp_lp-root {
  /* ---- Color：カラーパレット ---- */
  --color-primary: #0097e0;
  --color-primary-dark: #007bb8;
  --color-text: #333333;
  --color-bg: #ffffff;
  --color-gray: #f5f5f5;
  --color-border: #dddddd;
  --color-white: #ffffff;

  /* ---- Font：フォント ---- */
  --font-base: "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;

  /* ---- Font Size：フォントサイズ（clampでレスポンシブに可変） ---- */
  --fs-h1: clamp(28px, 4vw, 48px);
  --fs-h2: clamp(24px, 3.2vw, 36px);
  --fs-h3: clamp(20px, 2.4vw, 28px);
  --fs-h4: clamp(18px, 2vw, 22px);
  --fs-h5: clamp(16px, 1.6vw, 18px);
  --fs-h6: clamp(14px, 1.4vw, 16px);
  --fs-body: 14px;

  /* ---- Line Height：行間 ---- */
  --lh-body: 1.9;
  --lh-heading: 1.5;

  /* ---- Spacing：余白（padding / gap等で使用する基準値） ---- */
  --space-0: 0px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;
  --space-120: 120px;

  /* ---- Grid Gap：グリッドの間隔 ---- */
  --grid-gap: 32px;
  --grid-gap-sm: 16px;

  /* ---- Container：コンテナ幅 ---- */
  --container-width: 1200px;
  --container-width-sm: 960px;
  --container-width-lg: 1320px;
  --container-padding: 24px;

  /* ---- Section：セクションの上下余白 ---- */
  --section-padding-y: 96px;
  --section-padding-y-sm: 56px;
  --section-padding-y-lg: 140px;

  /* ---- Radius：角丸 ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 999px;

  /* ---- Shadow：影 ---- */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);

  /* ---- Transition：トランジション ---- */
  --transition-base: all 0.3s ease;

  /* ---- Z-index：重なり順 ---- */
  --z-header: 100;
}

/* =========================================================================
   3. Typography
   見出し・本文・リンク等、文字まわりの基本設定
   ========================================================================= */
.farmolp_lp-root {
  font-family: var(--font-base) !important;
  font-size: var(--fs-body) !important;
  line-height: var(--lh-body) !important;
  color: var(--color-text) !important;
  background-color: var(--color-bg) !important;
  font-feature-settings: "palt" !important;
  /* 日本語の文字間を美しく整える（プロポーショナルメトリクス） */
}
.farmolp_lp-root h1,
.farmolp_lp-root h2,
.farmolp_lp-root h3,
.farmolp_lp-root h4,
.farmolp_lp-root h5,
.farmolp_lp-root h6 {
  font-weight: 700 !important;
  line-height: var(--lh-heading) !important;
  text-align: left !important;
  color: var(--color-text) !important;
}
.farmolp_lp-root h1{ font-size: var(--fs-h1) !important; }
.farmolp_lp-root h2{ font-size: var(--fs-h2) !important; }
.farmolp_lp-root h3{ font-size: var(--fs-h3) !important; }
.farmolp_lp-root h4{ font-size: var(--fs-h4) !important; }
.farmolp_lp-root h5{ font-size: var(--fs-h5) !important; }
.farmolp_lp-root h6{ font-size: var(--fs-h6) !important; }
.farmolp_lp-root p {
  font-size: var(--fs-body) !important;
  line-height: var(--lh-body) !important;
}
.farmolp_lp-root a {
  transition: var(--transition-base) !important;
}
.farmolp_lp-root a:hover {
  opacity: 0.7 !important;
}

/* ---- 見出しの装飾パーツ ---- */
.farmolp_lp-root .farmolp_section-eyebrow {
  display: inline-block !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  color: var(--color-primary) !important;
  margin-bottom: var(--space-12) !important;
  text-transform: uppercase !important;
}
.farmolp_lp-root .farmolp_section-title {
  margin-bottom: var(--space-16) !important;
}
.farmolp_lp-root .farmolp_section-lead {
  font-size: 18px !important;
  color: var(--color-text) !important;
  opacity: 0.8 !important;
  margin-bottom: var(--space-40) !important;
}
.farmolp_lp-root .farmolp_section-header {
  margin-bottom: var(--space-64) !important;
}
.farmolp_lp-root .farmolp_section-header.farmolp_text-center .farmolp_section-lead {
  max-width: 640px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ---- テキストの補助クラス ---- */
.farmolp_lp-root .farmolp_text-primary{ color: var(--color-primary) !important; }
.farmolp_lp-root .farmolp_text-muted{ color: var(--color-text) !important; opacity: 0.7 !important; }
.farmolp_lp-root .farmolp_text-small{ font-size: 16px !important; }
.farmolp_lp-root .farmolp_text-large{ font-size: 18px !important; }
.farmolp_lp-root .farmolp_font-bold{ font-weight: 700 !important; }

/* =========================================================================
   4. Layout
   container / section など、ページ全体の骨格となるレイアウトクラス
   ========================================================================= */

/*
  .farmolp_container      : 標準幅（max-width: 1200px）の中央寄せコンテナ
  .farmolp_container-sm   : 狭い幅（max-width: 960px）※フォームやFAQなど
  .farmolp_container-lg   : 広い幅（max-width: 1320px）※画像を大きく見せたい時
  左右のpaddingはスマホでコンテンツが画面端に張り付かないよう常に確保する
*/
.farmolp_lp-root .farmolp_container {
  width: 100% !important;
  max-width: var(--container-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--container-padding) !important;
  padding-right: var(--container-padding) !important;
}
.farmolp_lp-root .farmolp_container-sm {
  width: 100% !important;
  max-width: var(--container-width-sm) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--container-padding) !important;
  padding-right: var(--container-padding) !important;
}
.farmolp_lp-root .farmolp_container-lg {
  width: 100% !important;
  max-width: var(--container-width-lg) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--container-padding) !important;
  padding-right: var(--container-padding) !important;
}

/*
  .farmolp_section    : 標準的なセクション上下余白（96px想定）
  .farmolp_section-sm : 狭いセクション上下余白（56px想定）※補足セクション等
  .farmolp_section-lg : 広いセクション上下余白（140px想定）※メインコンテンツ等
  Heroのみ .farmolp_section を使わず独自に100%幅で組む
*/
.farmolp_lp-root .farmolp_section {
  padding-top: var(--section-padding-y) !important;
  padding-bottom: var(--section-padding-y) !important;
}
.farmolp_lp-root .farmolp_section-sm {
  padding-top: var(--section-padding-y-sm) !important;
  padding-bottom: var(--section-padding-y-sm) !important;
}
.farmolp_lp-root .farmolp_section-lg {
  padding-top: var(--section-padding-y-lg) !important;
  padding-bottom: var(--section-padding-y-lg) !important;
}

/* ---- セクションの背景バリエーション ---- */
.farmolp_lp-root .farmolp_bg-gray {
  background-color: var(--color-gray) !important;
}
.farmolp_lp-root .farmolp_bg-primary {
  background-color: var(--color-primary) !important;
  color: var(--color-white) !important;
}
.farmolp_lp-root .farmolp_bg-primary h1,
.farmolp_lp-root .farmolp_bg-primary h2,
.farmolp_lp-root .farmolp_bg-primary h3,
.farmolp_lp-root .farmolp_bg-primary h4,
.farmolp_lp-root .farmolp_bg-primary h5,
.farmolp_lp-root .farmolp_bg-primary h6 {
  color: var(--color-white) !important;
}

/* ---- 画像＋文章の左右並びレイアウト ---- */
/*
  .farmolp_media-row            : 画像とテキストを横並びにする基本ブロック（Flex）
  .farmolp_media-row--reverse    : 画像とテキストの並び順を左右反転する
  PC幅では左右2分割、SP幅では上下1カラムに自動で切り替わる（レスポンシブ側で定義）
*/
.farmolp_lp-root .farmolp_media-row {
  display: flex !important;
  align-items: center !important;
  gap: var(--grid-gap) !important;
}
.farmolp_lp-root .farmolp_media-row .farmolp_media-row__media,
.farmolp_lp-root .farmolp_media-row .farmolp_media-row__body {
  flex: 1 1 50% !important;
  min-width: 0 !important;
}
.farmolp_lp-root .farmolp_media-row--reverse {
  flex-direction: row-reverse !important;
}

/* ---- ヘッダー（サイト共通ヘッダー） ---- */
.farmolp_lp-root .farmolp_site-header {
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: var(--z-header) !important;
  background-color: var(--color-bg) !important;
  border-bottom: 1px solid var(--color-border) !important;
}
.farmolp_lp-root .farmolp_site-header__inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-top: var(--space-16) !important;
  padding-bottom: var(--space-16) !important;
}
.farmolp_lp-root .farmolp_site-header__logo {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--color-text) !important;
}
.farmolp_lp-root .farmolp_site-header__logo span {
  color: var(--color-primary) !important;
}
.farmolp_lp-root .farmolp_site-header__nav ul {
  display: flex !important;
  align-items: center !important;
  gap: var(--space-32) !important;
}
.farmolp_lp-root .farmolp_site-header__nav a {
  font-size: 15px !important;
  font-weight: 700 !important;
}

/* ---- フッター ---- */
.farmolp_lp-root .farmolp_site-footer {
  background-color: var(--color-text) !important;
  color: var(--color-white) !important;
}
.farmolp_lp-root .farmolp_site-footer a {
  color: var(--color-white) !important;
}
.farmolp_lp-root .farmolp_site-footer__top {
  display: grid !important;
  grid-template-columns: 1.4fr 1fr 1fr 1fr !important;
  gap: var(--grid-gap) !important;
  padding-top: var(--space-80) !important;
  padding-bottom: var(--space-64) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
}
.farmolp_lp-root .farmolp_site-footer__logo {
  font-size: 20px !important;
  font-weight: 700 !important;
  margin-bottom: var(--space-16) !important;
}
.farmolp_lp-root .farmolp_site-footer__logo span {
  color: var(--color-primary) !important;
}
.farmolp_lp-root .farmolp_site-footer__desc {
  opacity: 0.7 !important;
  font-size: 15px !important;
}
.farmolp_lp-root .farmolp_site-footer__heading {
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  opacity: 0.6 !important;
  margin-bottom: var(--space-16) !important;
}
.farmolp_lp-root .farmolp_site-footer__list li {
  margin-bottom: var(--space-12) !important;
  font-size: 15px !important;
  opacity: 0.85 !important;
}
.farmolp_lp-root .farmolp_site-footer__bottom {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-top: var(--space-24) !important;
  padding-bottom: var(--space-24) !important;
  font-size: 15px !important;
  opacity: 0.6 !important;
}

/* =========================================================================
   5. Grid
   CSS Gridベースのカラムレイアウト（.farmolp_grid を親要素として使用）
   ========================================================================= */

/*
  使い方：
  <div class="grid col-3">
    <div>...</div>
    <div>...</div>
    <div>...</div>
  </div>

  .farmolp_grid    : display:grid を適用する親要素（これ単体では1カラム）
  .farmolp_col-2   : 2カラムに分割
  .farmolp_col-3   : 3カラムに分割
  .farmolp_col-4   : 4カラムに分割
  gapは --grid-gap（CSS変数）で一元管理し、レスポンシブ側で縮小する
*/
.farmolp_lp-root .farmolp_grid {
  display: grid !important;
  gap: var(--grid-gap) !important;
}
.farmolp_lp-root .farmolp_col-2 {
  grid-template-columns: repeat(2, 1fr) !important;
}
.farmolp_lp-root .farmolp_col-3 {
  grid-template-columns: repeat(3, 1fr) !important;
}
.farmolp_lp-root .farmolp_col-4 {
  grid-template-columns: repeat(4, 1fr) !important;
}

/* gapを狭めたい場合に併用するモディファイア */
.farmolp_lp-root .farmolp_grid-gap-sm {
  gap: var(--grid-gap-sm) !important;
}

/* Gridの縦横比を揃えたい画像枠などに使用 */
.farmolp_lp-root .farmolp_grid-item-fill img {
  height: 100% !important;
}

/* =========================================================================
   6. Button
   ボタンコンポーネント（hover / transition付き）
   ========================================================================= */

/*
  使い方：
  <a href="#" class="btn btn-primary">お問い合わせ</a>
  <a href="#" class="btn btn-outline btn-large">資料をダウンロード</a>

  .farmolp_btn          : ボタンの基本形（サイズ・角丸・中央揃え等）
  .farmolp_btn-primary  : プライマリカラーで塗りつぶした主要ボタン
  .farmolp_btn-outline  : 枠線のみのセカンダリボタン
  .farmolp_btn-large    : 大きめサイズ（CTA等）
  .farmolp_btn-small    : 小さめサイズ（カード内等）
*/
.farmolp_lp-root .farmolp_btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--space-8) !important;
  padding: 16px 40px !important;
  border-radius: var(--radius-full) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  border: 2px solid transparent !important;
  transition: var(--transition-base) !important;
}
.farmolp_lp-root .farmolp_btn-primary {
  background-color: var(--color-primary) !important;
  color: var(--color-white) !important;
  box-shadow: var(--shadow-sm) !important;
}
.farmolp_lp-root .farmolp_btn-primary:hover {
  background-color: var(--color-primary-dark) !important;
  opacity: 1 !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-md) !important;
}
.farmolp_lp-root .farmolp_btn-outline {
  background-color: transparent !important;
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
}
.farmolp_lp-root .farmolp_btn-outline:hover {
  background-color: var(--color-primary) !important;
  color: var(--color-white) !important;
  opacity: 1 !important;
  transform: translateY(-2px) !important;
}

/* ヒーロー等、背景がプライマリカラーの上に置く白ボタン */
.farmolp_lp-root .farmolp_btn-white {
  background-color: var(--color-white) !important;
  color: var(--color-primary) !important;
}
.farmolp_lp-root .farmolp_btn-white:hover {
  background-color: var(--color-gray) !important;
  opacity: 1 !important;
  transform: translateY(-2px) !important;
}
.farmolp_lp-root .farmolp_btn-large {
  padding: 20px 56px !important;
  font-size: 17px !important;
}
.farmolp_lp-root .farmolp_btn-small {
  padding: 10px 24px !important;
  font-size: 15px !important;
}

/* =========================================================================
   7. Card
   カードコンポーネント（hover / transition付き）
   ========================================================================= */

/*
  使い方：
  <div class="card card-shadow card-radius">
    <img src="img/service01.jpg" alt="">
    <div class="card__body">
      <h3 class="card__title">タイトル</h3>
      <p>本文テキスト</p>
    </div>
  </div>

  .farmolp_card         : カードの基本形（背景・overflow hidden等）
  .farmolp_card-shadow  : ドロップシャドウを付与
  .farmolp_card-radius  : 角丸を付与
  カード全体にhoverで浮き上がるアニメーションを付与している
*/
.farmolp_lp-root .farmolp_card {
  background-color: var(--color-white) !important;
  overflow: hidden !important;
  border: 1px solid var(--color-border) !important;
  transition: var(--transition-base) !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}
.farmolp_lp-root .farmolp_card-shadow {
  border: none !important;
  box-shadow: var(--shadow-sm) !important;
}
.farmolp_lp-root .farmolp_card-shadow:hover {
  box-shadow: var(--shadow-lg) !important;
  transform: translateY(-6px) !important;
}
.farmolp_lp-root .farmolp_card-radius {
  border-radius: var(--radius-md) !important;
}
.farmolp_lp-root .farmolp_card-radius img {
  border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
}
.farmolp_lp-root .farmolp_card__body {
  padding: var(--space-32) !important;
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
}
.farmolp_lp-root .farmolp_card__title {
  margin-bottom: var(--space-12) !important;
}
.farmolp_lp-root .farmolp_card__text {
  font-size: 15px !important;
  color: var(--color-text) !important;
  opacity: 0.8 !important;
  flex: 1 1 auto !important;
}
.farmolp_lp-root .farmolp_card__tag {
  display: inline-block !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--color-primary) !important;
  background-color: rgba(0, 151, 224, 0.1) !important;
  padding: 4px 12px !important;
  border-radius: var(--radius-full) !important;
  margin-bottom: var(--space-16) !important;
  width: fit-content !important;
}

/* =========================================================================
   8. Table
   料金表・比較表などで使用するテーブルコンポーネント
   ========================================================================= */

/*
  使い方：
  <div class="table-wrap">
    <table class="table">
      <thead><tr><th>...</th></tr></thead>
      <tbody><tr><td>...</td></tr></tbody>
    </table>
  </div>

  .farmolp_table-wrap : SP幅で横スクロールを可能にするラッパー
  .farmolp_table      : テーブル本体の罫線・余白・配色
*/
.farmolp_lp-root .farmolp_table-wrap {
  width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}
.farmolp_lp-root .farmolp_table {
  min-width: 640px !important;
}
.farmolp_lp-root .farmolp_table th,
.farmolp_lp-root .farmolp_table td {
  padding: var(--space-20) var(--space-24) !important;
  border-bottom: 1px solid var(--color-border) !important;
  text-align: left !important;
  font-size: 14px !important;
}
.farmolp_lp-root .farmolp_table thead th {
  background-color: var(--color-gray) !important;
  font-weight: 700 !important;
  color: var(--color-text) !important;
}
.farmolp_lp-root .farmolp_table tbody tr {
  transition: var(--transition-base) !important;
}
.farmolp_lp-root .farmolp_table tbody tr:hover {
  background-color: var(--color-gray) !important;
}
.farmolp_lp-root .farmolp_table .farmolp_is-highlight {
  background-color: rgba(0, 151, 224, 0.05) !important;
}

/* =========================================================================
   9. Utility
   margin / padding / 表示切替などの汎用ユーティリティクラス
   組み合わせて使うことで、CSSを追加せずに微調整できるようにする
   ========================================================================= */

/*
  余白ユーティリティ：
  mt-0 〜 mt-120 : margin-top
  mb-0 〜 mb-120 : margin-bottom
  pt-0 〜 pt-120 : padding-top
  pb-0 〜 pb-120 : padding-bottom
  数値は --space-* のCSS変数と対応（0,4,8,12,16,20,24,32,40,48,56,64,80,96,120）
  例）<div class="mt-40 mb-80">...</div>
*/
.farmolp_lp-root .farmolp_mt-0{ margin-top: var(--space-0) !important; }
.farmolp_lp-root .farmolp_mb-0{ margin-bottom: var(--space-0) !important; }
.farmolp_lp-root .farmolp_pt-0{ padding-top: var(--space-0) !important; }
.farmolp_lp-root .farmolp_pb-0{ padding-bottom: var(--space-0) !important; }
.farmolp_lp-root .farmolp_mt-4{ margin-top: var(--space-4) !important; }
.farmolp_lp-root .farmolp_mb-4{ margin-bottom: var(--space-4) !important; }
.farmolp_lp-root .farmolp_pt-4{ padding-top: var(--space-4) !important; }
.farmolp_lp-root .farmolp_pb-4{ padding-bottom: var(--space-4) !important; }
.farmolp_lp-root .farmolp_mt-8{ margin-top: var(--space-8) !important; }
.farmolp_lp-root .farmolp_mb-8{ margin-bottom: var(--space-8) !important; }
.farmolp_lp-root .farmolp_pt-8{ padding-top: var(--space-8) !important; }
.farmolp_lp-root .farmolp_pb-8{ padding-bottom: var(--space-8) !important; }
.farmolp_lp-root .farmolp_mt-12{ margin-top: var(--space-12) !important; }
.farmolp_lp-root .farmolp_mb-12{ margin-bottom: var(--space-12) !important; }
.farmolp_lp-root .farmolp_pt-12{ padding-top: var(--space-12) !important; }
.farmolp_lp-root .farmolp_pb-12{ padding-bottom: var(--space-12) !important; }
.farmolp_lp-root .farmolp_mt-16{ margin-top: var(--space-16) !important; }
.farmolp_lp-root .farmolp_mb-16{ margin-bottom: var(--space-16) !important; }
.farmolp_lp-root .farmolp_pt-16{ padding-top: var(--space-16) !important; }
.farmolp_lp-root .farmolp_pb-16{ padding-bottom: var(--space-16) !important; }
.farmolp_lp-root .farmolp_mt-20{ margin-top: var(--space-20) !important; }
.farmolp_lp-root .farmolp_mb-20{ margin-bottom: var(--space-20) !important; }
.farmolp_lp-root .farmolp_pt-20{ padding-top: var(--space-20) !important; }
.farmolp_lp-root .farmolp_pb-20{ padding-bottom: var(--space-20) !important; }
.farmolp_lp-root .farmolp_mt-24{ margin-top: var(--space-24) !important; }
.farmolp_lp-root .farmolp_mb-24{ margin-bottom: var(--space-24) !important; }
.farmolp_lp-root .farmolp_pt-24{ padding-top: var(--space-24) !important; }
.farmolp_lp-root .farmolp_pb-24{ padding-bottom: var(--space-24) !important; }
.farmolp_lp-root .farmolp_mt-32{ margin-top: var(--space-32) !important; }
.farmolp_lp-root .farmolp_mb-32{ margin-bottom: var(--space-32) !important; }
.farmolp_lp-root .farmolp_pt-32{ padding-top: var(--space-32) !important; }
.farmolp_lp-root .farmolp_pb-32{ padding-bottom: var(--space-32) !important; }
.farmolp_lp-root .farmolp_mt-40{ margin-top: var(--space-40) !important; }
.farmolp_lp-root .farmolp_mb-40{ margin-bottom: var(--space-40) !important; }
.farmolp_lp-root .farmolp_pt-40{ padding-top: var(--space-40) !important; }
.farmolp_lp-root .farmolp_pb-40{ padding-bottom: var(--space-40) !important; }
.farmolp_lp-root .farmolp_mt-48{ margin-top: var(--space-48) !important; }
.farmolp_lp-root .farmolp_mb-48{ margin-bottom: var(--space-48) !important; }
.farmolp_lp-root .farmolp_pt-48{ padding-top: var(--space-48) !important; }
.farmolp_lp-root .farmolp_pb-48{ padding-bottom: var(--space-48) !important; }
.farmolp_lp-root .farmolp_mt-56{ margin-top: var(--space-56) !important; }
.farmolp_lp-root .farmolp_mb-56{ margin-bottom: var(--space-56) !important; }
.farmolp_lp-root .farmolp_pt-56{ padding-top: var(--space-56) !important; }
.farmolp_lp-root .farmolp_pb-56{ padding-bottom: var(--space-56) !important; }
.farmolp_lp-root .farmolp_mt-64{ margin-top: var(--space-64) !important; }
.farmolp_lp-root .farmolp_mb-64{ margin-bottom: var(--space-64) !important; }
.farmolp_lp-root .farmolp_pt-64{ padding-top: var(--space-64) !important; }
.farmolp_lp-root .farmolp_pb-64{ padding-bottom: var(--space-64) !important; }
.farmolp_lp-root .farmolp_mt-80{ margin-top: var(--space-80) !important; }
.farmolp_lp-root .farmolp_mb-80{ margin-bottom: var(--space-80) !important; }
.farmolp_lp-root .farmolp_pt-80{ padding-top: var(--space-80) !important; }
.farmolp_lp-root .farmolp_pb-80{ padding-bottom: var(--space-80) !important; }
.farmolp_lp-root .farmolp_mt-96{ margin-top: var(--space-96) !important; }
.farmolp_lp-root .farmolp_mb-96{ margin-bottom: var(--space-96) !important; }
.farmolp_lp-root .farmolp_pt-96{ padding-top: var(--space-96) !important; }
.farmolp_lp-root .farmolp_pb-96{ padding-bottom: var(--space-96) !important; }
.farmolp_lp-root .farmolp_mt-120{ margin-top: var(--space-120) !important; }
.farmolp_lp-root .farmolp_mb-120{ margin-bottom: var(--space-120) !important; }
.farmolp_lp-root .farmolp_pt-120{ padding-top: var(--space-120) !important; }
.farmolp_lp-root .farmolp_pb-120{ padding-bottom: var(--space-120) !important; }

/*
  テキスト揃え：
  .farmolp_text-left / .farmolp_text-center / .farmolp_text-right
*/
.farmolp_lp-root .farmolp_text-left{ text-align: left !important; }
.farmolp_lp-root .farmolp_text-center{ text-align: center !important; }
.farmolp_lp-root .farmolp_text-right{ text-align: right !important; }

/*
  幅：
  .farmolp_w-100 : 幅100%
*/
.farmolp_lp-root .farmolp_w-100{ width: 100% !important; }

/*
  表示切替：
  .farmolp_d-none    : 常に非表示
  .farmolp_pc-only   : PC幅（768px以上）でのみ表示、SPでは非表示
  .farmolp_sp-only   : SP幅（767px以下）でのみ表示、PCでは非表示
  切り替えの境界値はレスポンシブセクションのブレイクポイントと連動させる
*/
.farmolp_lp-root .farmolp_d-none {
  display: none !important;
}
.farmolp_lp-root .farmolp_sp-only {
  display: none !important;
}

/*
  Flex配置補助（併用ユーティリティ）
*/
.farmolp_lp-root .farmolp_flex {
  display: flex !important;
}
.farmolp_lp-root .farmolp_flex-center {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.farmolp_lp-root .farmolp_flex-between {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.farmolp_lp-root .farmolp_flex-wrap {
  flex-wrap: wrap !important;
}
.farmolp_lp-root .farmolp_gap-8{ gap: var(--space-8) !important; }
.farmolp_lp-root .farmolp_gap-16{ gap: var(--space-16) !important; }
.farmolp_lp-root .farmolp_gap-24{ gap: var(--space-24) !important; }
.farmolp_lp-root .farmolp_gap-32{ gap: var(--space-32) !important; }

/*
  可視性を保ったままスクリーンリーダーにのみ読ませる（アクセシビリティ用）
*/
.farmolp_lp-root .farmolp_sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* =========================================================================
   10. Components
   Hero / Problem / Flow / Voice / Price / CTA / FAQ など
   LPページ固有のコンポーネントスタイル
   ========================================================================= */

/* ---- Hero：ファーストビュー（画面幅100%で使用する唯一のセクション） ---- */
.farmolp_lp-root .farmolp_hero {
  position: relative !important;
  width: 100% !important;
  min-height: 640px !important;
  display: flex !important;
  align-items: center !important;
  color: var(--color-white) !important;
  overflow: hidden !important;
}
.farmolp_lp-root .farmolp_hero__bg {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
}
.farmolp_lp-root .farmolp_hero__bg img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
.farmolp_lp-root .farmolp_hero__bg::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(120deg, rgba(16, 138, 42, 0.7) 70%, rgba(5, 115, 42, 0.2) 30%) !important;
  /* 画像の上に色を重ねて、白文字の可読性を確保する */
}
.farmolp_lp-root .farmolp_hero__inner {
  position: relative !important;
  z-index: 1 !important;
  padding-top: var(--space-96) !important;
  padding-bottom: var(--space-96) !important;
}
.farmolp_lp-root .farmolp_hero__catch {
  max-width: 720px !important;
  color: var(--color-white) !important;
  margin-bottom: var(--space-24) !important;
}
.farmolp_lp-root .farmolp_hero__lead {
  max-width: 560px !important;
  font-size: 16px !important;
  opacity: 0.9 !important;
  margin-bottom: var(--space-40) !important;
}
.farmolp_lp-root .farmolp_hero__actions {
  display: flex !important;
  gap: var(--space-16) !important;
  flex-wrap: wrap !important;
}

/* ---- Problem：課題提起セクション ---- */
.farmolp_lp-root .farmolp_problem-item {
  text-align: center !important;
  padding: var(--space-40) var(--space-24) !important;
  background-color: var(--color-white) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
}
.farmolp_lp-root .farmolp_problem-item__icon {
  width: 64px !important;
  height: 64px !important;
  margin: 0 auto var(--space-20) !important;
  border-radius: var(--radius-full) !important;
  background-color: rgba(0, 151, 224, 0.1) !important;
  color: var(--color-primary) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 28px !important;
  font-weight: 700 !important;
}

/* ---- Feature：特徴セクション（番号付き横並び） ---- */
.farmolp_lp-root .farmolp_feature-item {
  display: flex !important;
  gap: var(--space-24) !important;
}
.farmolp_lp-root .farmolp_feature-item__num {
  flex: 0 0 auto !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  color: var(--color-primary) !important;
  opacity: 0.4 !important;
  line-height: 1 !important;
}

/* ---- Flow：導入までの流れ（プロセスのため番号を使用） ---- */
.farmolp_lp-root .farmolp_flow-list {
  counter-reset: flow !important;
}
.farmolp_lp-root .farmolp_flow-item {
  position: relative !important;
  display: flex !important;
  gap: var(--space-24) !important;
  align-items: flex-start !important;
  padding-bottom: var(--space-48) !important;
  padding-left: var(--space-8) !important;
}
.farmolp_lp-root .farmolp_flow-item:last-child {
  padding-bottom: 0 !important;
}
.farmolp_lp-root .farmolp_flow-item::before {
  counter-increment: flow !important;
  content: counter(flow) !important;
  flex: 0 0 auto !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: var(--radius-full) !important;
  background-color: var(--color-primary) !important;
  color: var(--color-white) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  z-index: 1 !important;
}
.farmolp_lp-root .farmolp_flow-item:not(:last-child) .farmolp_flow-item__line {
  position: absolute !important;
  left: 23px !important;
  top: 48px !important;
  bottom: 0 !important;
  width: 2px !important;
  background-color: var(--color-border) !important;
}

/* ---- Voice：お客様の声（カード内に引用文） ---- */
.farmolp_lp-root .farmolp_voice-card__quote {
  font-size: 13px !important;
  opacity: 0.85 !important;
  margin-bottom: var(--space-24) !important;
  position: relative !important;
  padding-left: var(--space-24) !important;
}
.farmolp_lp-root .farmolp_voice-card__quote::before {
  content: "\201C" !important;
  position: absolute !important;
  left: 0 !important;
  top: -4px !important;
  font-size: 28px !important;
  color: var(--color-primary) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}
.farmolp_lp-root .farmolp_voice-card__person {
  display: flex !important;
  align-items: center !important;
  gap: var(--space-12) !important;
  margin-top: auto !important;
}
.farmolp_lp-root .farmolp_voice-card__avatar {
  width: 48px !important;
  height: 48px !important;
  border-radius: var(--radius-full) !important;
  overflow: hidden !important;
  flex: 0 0 auto !important;
}
.farmolp_lp-root .farmolp_voice-card__name {
  font-size: 13px !important;
  font-weight: 700 !important;
}
.farmolp_lp-root .farmolp_voice-card__role {
  font-size: 12px !important;
  opacity: 0.6 !important;
}

/* ---- Price：料金プラン ---- */
.farmolp_lp-root .farmolp_price-card {
  text-align: center !important;
  position: relative !important;
}
.farmolp_lp-root .farmolp_price-card.farmolp_is-recommend {
  border: 2px solid var(--color-primary) !important;
  transform: scale(1.03) !important;
}
.farmolp_lp-root .farmolp_price-card__badge {
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  background-color: var(--color-primary) !important;
  color: var(--color-white) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 6px 20px !important;
  border-radius: var(--radius-full) !important;
  white-space: nowrap !important;
}
.farmolp_lp-root .farmolp_price-card__plan {
  font-size: 13px !important;
  font-weight: 700 !important;
  opacity: 0.6 !important;
  margin-bottom: var(--space-16) !important;
}
.farmolp_lp-root .farmolp_price-card__price {
  font-size: 36px !important;
  font-weight: 700 !important;
  color: var(--color-primary) !important;
  margin-bottom: var(--space-4) !important;
}
.farmolp_lp-root .farmolp_price-card__price span {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--color-text) !important;
  opacity: 0.7 !important;
}
.farmolp_lp-root .farmolp_price-card__unit {
  font-size: 12px !important;
  opacity: 0.6 !important;
  margin-bottom: var(--space-24) !important;
}
.farmolp_lp-root .farmolp_price-card__list {
  text-align: left !important;
  margin-bottom: var(--space-32) !important;
}
.farmolp_lp-root .farmolp_price-card__list li {
  font-size: 13px !important;
  padding: var(--space-8) 0 !important;
  border-bottom: 1px solid var(--color-border) !important;
  padding-left: var(--space-24) !important;
  position: relative !important;
}
.farmolp_lp-root .farmolp_price-card__list li::before {
  content: "\2713" !important;
  position: absolute !important;
  left: 0 !important;
  color: var(--color-primary) !important;
  font-weight: 700 !important;
}

/* ---- CTA：行動喚起セクション ---- */
.farmolp_lp-root .farmolp_cta-section {
  text-align: center !important;
}
.farmolp_lp-root .farmolp_cta-section .farmolp_section-title {
  color: var(--color-white) !important;
}
.farmolp_lp-root .farmolp_cta-section p {
  opacity: 0.9 !important;
  margin-bottom: var(--space-40) !important;
}

/* ---- FAQ：よくある質問（JS不使用、details/summaryで開閉を実現） ---- */
.farmolp_lp-root .farmolp_faq-item {
  border-bottom: 1px solid var(--color-border) !important;
}
.farmolp_lp-root .farmolp_faq-item summary {
  display: flex !important;
  align-items: center !important;
  justify-content: left !important;
  gap: var(--space-16) !important;
  padding: var(--space-24) var(--space-8) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  cursor: pointer !important;
  list-style: none !important;
  /* デフォルトの三角マーカーを消し、独自の+アイコンに差し替える */
}
.farmolp_lp-root .farmolp_faq-item summary::-webkit-details-marker {
  display: none !important;
}
.farmolp_lp-root .farmolp_faq-item summary::after {
  content: "+" !important;
  flex: 0 0 auto !important;
  font-size: 22px !important;
  color: var(--color-primary) !important;
  font-weight: 400 !important;
  transition: var(--transition-base) !important;
}
.farmolp_lp-root .farmolp_faq-item[open] summary::after {
  transform: rotate(45deg) !important;
}
.farmolp_lp-root .farmolp_faq-item summary::before {
  content: "Q" !important;
  flex: 0 0 auto !important;
  color: var(--color-primary) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
}
.farmolp_lp-root .farmolp_faq-item__answer {
  padding: 0 var(--space-8) var(--space-24) var(--space-40) !important;
  font-size: 16px !important;
  opacity: 0.8 !important;
}

/* ---- Company：会社概要（テーブル形式） ---- */
.farmolp_lp-root .farmolp_company-table th {
  width: 180px !important;
  color: var(--color-text) !important;
  opacity: 0.6 !important;
  font-weight: 700 !important;
  vertical-align: top !important;
  background-color: transparent !important;
}
.farmolp_lp-root .farmolp_company-table th,
.farmolp_lp-root .farmolp_company-table td {
  padding: var(--space-20) var(--space-16) !important;
  border-bottom: 1px solid var(--color-border) !important;
  font-size: 15px !important;
  text-align: left !important;
}

/* ---- リスト（チェックリスト等） ---- */
.farmolp_lp-root .farmolp_check-list li {
  position: relative !important;
  padding-left: var(--space-32) !important;
  padding-top: var(--space-8) !important;
  padding-bottom: var(--space-8) !important;
  font-size: 15px !important;
}
.farmolp_lp-root .farmolp_check-list li::before {
  content: "\2713" !important;
  position: absolute !important;
  left: 0 !important;
  top: 8px !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: var(--radius-full) !important;
  background-color: var(--color-primary) !important;
  color: var(--color-white) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* =========================================================================
   11. Responsive
   ブレイクポイント：1200px / 992px / 768px / 480px
   スマートフォン幅（767px以下）ではグリッド・並び系は全て1カラムになる
   本テンプレートはPCファーストのため、大きい幅から順に上書きしていく
   ========================================================================= */

/* ---- 1200px以下：コンテナ幅に収まるようpaddingを少し詰める ---- */
@media screen and (max-width: 1200px) {
.farmolp_lp-root {
    --section-padding-y-lg: 100px;
  }
}

/* ---- 992px以下：タブレット。4カラムを2カラムへ、余白を縮小 ---- */
@media screen and (max-width: 992px) {
.farmolp_lp-root {
    --section-padding-y: 72px;
    --section-padding-y-sm: 48px;
    --section-padding-y-lg: 96px;
    --grid-gap: 24px;
  }
.farmolp_lp-root .farmolp_col-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
.farmolp_lp-root .farmolp_site-footer__top {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ---- 768px以下：スマートフォン。全グリッドを1カラムに統一 ---- */
@media screen and (max-width: 768px) {
.farmolp_lp-root {
    --section-padding-y: 56px;
    --section-padding-y-sm: 40px;
    --section-padding-y-lg: 64px;
    --grid-gap: 20px;
    --container-padding: 20px;
  }
.farmolp_lp-root .farmolp_col-2,
.farmolp_lp-root .farmolp_col-3,
.farmolp_lp-root .farmolp_col-4 {
    grid-template-columns: 1fr !important;
  }

  /* 画像左文章右 / 文章左画像右 のレイアウトは縦積みに変更する */
.farmolp_lp-root .farmolp_media-row,
.farmolp_lp-root .farmolp_media-row--reverse {
    flex-direction: column !important;
  }
.farmolp_lp-root .farmolp_media-row .farmolp_media-row__media,
.farmolp_lp-root .farmolp_media-row .farmolp_media-row__body {
    flex: 1 1 100% !important;
    width: 100% !important;
  }
.farmolp_lp-root .farmolp_price-card.farmolp_is-recommend {
    transform: none !important;
  }
.farmolp_lp-root .farmolp_site-footer__top {
    grid-template-columns: 1fr !important;
    padding-top: var(--space-56) !important;
    padding-bottom: var(--space-40) !important;
  }
.farmolp_lp-root .farmolp_site-footer__bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: var(--space-12) !important;
  }
.farmolp_lp-root .farmolp_site-header__nav {
    display: none !important;
    /* SPナビはJS不使用のため簡略化。必要に応じてハンバーガーメニュー等を別途実装する */
  }
.farmolp_lp-root .farmolp_hero {
    min-height: 480px !important;
    text-align: left !important;
  }
.farmolp_lp-root .farmolp_hero__inner {
    padding-top: var(--space-64) !important;
    padding-bottom: var(--space-64) !important;
  }
.farmolp_lp-root .farmolp_hero__actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }
.farmolp_lp-root .farmolp_hero__actions .farmolp_btn {
    width: 100% !important;
  }
.farmolp_lp-root .farmolp_feature-item {
    flex-direction: column !important;
    gap: var(--space-12) !important;
  }

  /* 表示切替：SP幅ではpc-onlyを隠し、sp-onlyを表示する */
.farmolp_lp-root .farmolp_pc-only {
    display: none !important;
  }
.farmolp_lp-root .farmolp_sp-only {
    display: block !important;
  }
}

/* ---- 480px以下：小型スマートフォン。文字サイズや余白をさらに調整 ---- */
@media screen and (max-width: 480px) {
.farmolp_lp-root {
    --container-padding: 16px;
    --grid-gap: 16px;
  }
.farmolp_lp-root .farmolp_btn {
    padding: 14px 28px !important;
    font-size: 14px !important;
    width: 100% !important;
  }
.farmolp_lp-root .farmolp_btn-large {
    padding: 16px 32px !important;
    font-size: 15px !important;
  }
.farmolp_lp-root .farmolp_table {
    min-width: 520px !important;
  }
.farmolp_lp-root .farmolp_price-card__price {
    font-size: 30px !important;
  }
.farmolp_lp-root .farmolp_company-table th {
    width: 110px !important;
  }
}


    .terms-container * {
        box-sizing: border-box;
    }

    /* 規約全体の外枠：PC時 最大800px / スマホ時 幅90% */
    .terms-container {
        max-width: 800px;
        width: 90%;
        margin: 20px auto;
        background-color: #ffffff;
        border: 1px solid #dcdfe6;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        overflow: hidden;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    }

    /* ヘッダー部分 */
    .terms-header {
        background-color: #2c5e3b; /* ファーモグリーン */
        color: #ffffff;
        padding: 16px 20px;
        text-align: center;
    }

    .terms-header h2 {
        margin: 0;
        font-size: 1.15rem;
        font-weight: bold;
    }

    /* 返却送料負担のアラート（黄色枠） */
    .terms-subtext {
        background-color: #fff9db;
        border-bottom: 1px solid #f0e68c;
        padding: 12px 20px;
        font-size: 0.9rem;
        color: #856404;
    }

    .terms-subtext p {
        margin: 0;
        font-weight: bold;
    }

    /* 規約本文のスクロールエリア */
    .terms-scroll-box {
        height: 300px; /* スクロール枠の高さ */
        overflow-y: scroll;
        padding: 20px;
        background-color: #fafafa;
        border-bottom: 1px solid #e9ecef;
        -webkit-overflow-scrolling: touch; /* スマホ用スムーズスクロール */
    }

    .terms-content {
        font-size: 0.92rem;
        color: #495057;
        line-height: 1.6;
    }

    .terms-content h3 {
        font-size: 16px;
        color: #1b4332;
        border-left: 4px solid #2c5e3b;
        padding-left: 8px;
        margin: 18px 0 8px 0;
    }

    .terms-content h3:first-child {
        margin-top: 0;
    }

    .terms-content p {
        margin: 0 0 8px 0;
    }

    .terms-content ol {
        margin: 0 0 12px 0;
        padding-left: 20px;
    }

    .terms-content li {
        margin-bottom: 4px;
    }

    /* 強調表示 */
    .highlight-text {
        color: #d90429;
        font-weight: bold;
    }

    /* 同意チェックボックスエリア */
    .terms-agreement {
        padding: 18px;
        background-color: #ffffff;
        text-align: center;
    }

    .checkbox-label {
        display: inline-block;
        font-size: 0.95rem;
        font-weight: bold;
        color: #212529;
        cursor: pointer;
        line-height: 1.4;
    }

    .checkbox-label input[type="checkbox"] {
        width: 18px;
        height: 18px;
        vertical-align: middle;
        margin-right: 8px;
        cursor: pointer;
    }

    .checkbox-label span {
        vertical-align: middle;
    }

    /* スマホ表示用の微調整 */
    @media screen and (max-width: 480px) {
        .terms-header h2 {
            font-size: 1.05rem;
        }
        .terms-scroll-box {
            height: 260px;
            padding: 15px;
        }
        .terms-content {
            font-size: 0.88rem;
        }
        .checkbox-label {
            font-size: 0.88rem;
            text-align: left;
        }
    }