/* ========================================
   tokens.css - デザイントークン定義
   ======================================== */

/*
 * このファイルはデザインシステムの基盤となる値を定義します。
 * custom.css から @import または直接読み込んで使用します。
 *
 * 命名規則: --prj-{category}-{property}-{variant}
 * 例: --prj-color-primary-500, --prj-spacing-md, --prj-font-size-lg
 */

:root {
  /* ========================================
     カラートークン
     ======================================== */

  /* --- プライマリカラー（ブランドカラー） --- */
  --prj-color-primary-50: #fef5f7;
  --prj-color-primary-100: #fce8ed;
  --prj-color-primary-200: #f5c5d3;
  --prj-color-primary-300: #eda1b8;
  --prj-color-primary-400: #e98fa8;
  --prj-color-primary-500: #e67d9b;  /* ベース */
  --prj-color-primary-600: #dd5a80;
  --prj-color-primary-700: #d33766;
  --prj-color-primary-800: #a82b51;
  --prj-color-primary-900: #7e203d;

  /* --- セカンダリカラー --- */
  --prj-color-secondary-50: #f5f5f5;
  --prj-color-secondary-100: #e0e0e0;
  --prj-color-secondary-200: #bdbdbd;
  --prj-color-secondary-300: #9e9e9e;
  --prj-color-secondary-400: #757575;
  --prj-color-secondary-500: #333333;  /* ベース */
  --prj-color-secondary-600: #2a2a2a;
  --prj-color-secondary-700: #1f1f1f;
  --prj-color-secondary-800: #141414;
  --prj-color-secondary-900: #0a0a0a;

  /* --- グレースケール --- */
  --prj-color-gray-50: #fafafa;
  --prj-color-gray-100: #f5f5f5;
  --prj-color-gray-200: #eeeeee;
  --prj-color-gray-300: #e0e0e0;
  --prj-color-gray-400: #bdbdbd;
  --prj-color-gray-500: #9e9e9e;
  --prj-color-gray-600: #757575;
  --prj-color-gray-700: #616161;
  --prj-color-gray-800: #424242;
  --prj-color-gray-900: #212121;

  /* --- セマンティックカラー --- */
  --prj-color-success-light: #e8f5e9;
  --prj-color-success: #4caf50;
  --prj-color-success-dark: #2e7d32;

  --prj-color-warning-light: #fff3e0;
  --prj-color-warning: #ff9800;
  --prj-color-warning-dark: #e65100;

  --prj-color-error-light: #ffebee;
  --prj-color-error: #f44336;
  --prj-color-error-dark: #c62828;

  --prj-color-info-light: #e3f2fd;
  --prj-color-info: #2196f3;
  --prj-color-info-dark: #1565c0;

  /* --- 背景色 --- */
  --prj-color-bg-primary: #ffffff;
  --prj-color-bg-secondary: #f5f5f5;
  --prj-color-bg-tertiary: #eeeeee;
  --prj-color-bg-inverse: #333333;

  /* --- テキスト色 --- */
  --prj-color-text-primary: #333333;
  --prj-color-text-secondary: #666666;
  --prj-color-text-tertiary: #999999;
  --prj-color-text-disabled: #bdbdbd;
  --prj-color-text-inverse: #ffffff;
  --prj-color-text-link: #e67d9b;
  --prj-color-text-link-hover: #dd5a80;

  /* --- ボーダー色 --- */
  --prj-color-border-light: #eeeeee;
  --prj-color-border: #dddddd;
  --prj-color-border-dark: #bdbdbd;

  /* ========================================
     タイポグラフィトークン
     ======================================== */

  /* --- フォントファミリー --- */
  --prj-font-family-base: "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
  --prj-font-family-heading: "Noto Sans JP", "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
  --prj-font-family-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  /* --- フォントサイズ --- */
  --prj-font-size-2xs: 10px;
  --prj-font-size-xs: 11px;
  --prj-font-size-sm: 12px;
  --prj-font-size-md: 14px;  /* ベース */
  --prj-font-size-lg: 16px;
  --prj-font-size-xl: 18px;
  --prj-font-size-2xl: 20px;
  --prj-font-size-3xl: 24px;
  --prj-font-size-4xl: 28px;
  --prj-font-size-5xl: 32px;
  --prj-font-size-6xl: 40px;

  /* --- フォントウェイト --- */
  --prj-font-weight-normal: 400;
  --prj-font-weight-medium: 500;
  --prj-font-weight-semibold: 600;
  --prj-font-weight-bold: 700;

  /* --- 行間（line-height） --- */
  --prj-line-height-tight: 1.2;
  --prj-line-height-snug: 1.4;
  --prj-line-height-normal: 1.6;
  --prj-line-height-relaxed: 1.8;
  --prj-line-height-loose: 2.0;

  /* --- 字間（letter-spacing） --- */
  --prj-letter-spacing-tight: -0.02em;
  --prj-letter-spacing-normal: 0;
  --prj-letter-spacing-wide: 0.02em;
  --prj-letter-spacing-wider: 0.05em;

  /* ========================================
     スペーシングトークン
     ======================================== */

  /* --- 基本スペーシング（4pxベース） --- */
  --prj-spacing-0: 0;
  --prj-spacing-1: 4px;
  --prj-spacing-2: 8px;
  --prj-spacing-3: 12px;
  --prj-spacing-4: 16px;
  --prj-spacing-5: 20px;
  --prj-spacing-6: 24px;
  --prj-spacing-8: 32px;
  --prj-spacing-10: 40px;
  --prj-spacing-12: 48px;
  --prj-spacing-16: 64px;
  --prj-spacing-20: 80px;
  --prj-spacing-24: 96px;

  /* --- セマンティックスペーシング --- */
  --prj-spacing-xs: var(--prj-spacing-1);   /* 4px */
  --prj-spacing-sm: var(--prj-spacing-2);   /* 8px */
  --prj-spacing-md: var(--prj-spacing-4);   /* 16px */
  --prj-spacing-lg: var(--prj-spacing-6);   /* 24px */
  --prj-spacing-xl: var(--prj-spacing-8);   /* 32px */
  --prj-spacing-2xl: var(--prj-spacing-12); /* 48px */
  --prj-spacing-3xl: var(--prj-spacing-16); /* 64px */

  /* --- セクション・レイアウト間隔（8pxグリッド） --- */
  /* セクション間余白 */
  --prj-section-gap-pc: 80px;      /* 8px × 10 */
  --prj-section-gap-sp: 56px;      /* 8px × 7 */

  /* セクション内部パディング */
  --prj-section-padding-pc: 64px;  /* 8px × 8 */
  --prj-section-padding-sp: 40px;  /* 8px × 5 */

  /* --- 見出し下余白（8pxグリッド） --- */
  /* h1（ページタイトル）下余白 */
  --prj-heading-h1-gap-pc: 48px;   /* 8px × 6 */
  --prj-heading-h1-gap-sp: 32px;   /* 8px × 4 */

  /* h2（セクションタイトル）下余白 */
  --prj-heading-h2-gap-pc: 24px;   /* 8px × 3 */
  --prj-heading-h2-gap-sp: 16px;   /* 8px × 2 */

  /* h3（サブセクション）下余白 */
  --prj-heading-h3-gap-pc: 24px;   /* 8px × 3 */
  --prj-heading-h3-gap-sp: 16px;   /* 8px × 2 */

  /* h4以下の下余白 */
  --prj-heading-h4-gap: 16px;      /* 8px × 2 */

  /* --- コンポーネント間余白（8pxグリッド） --- */
  --prj-component-gap-lg: 40px;    /* 8px × 5 - 大きいコンポーネント間 */
  --prj-component-gap-md: 24px;    /* 8px × 3 - 中程度のコンポーネント間 */
  --prj-component-gap-sm: 16px;    /* 8px × 2 - 小さいコンポーネント間 */
  --prj-component-gap-xs: 8px;     /* 8px × 1 - 隣接要素間 */

  /* --- テキスト間余白 --- */
  --prj-text-gap-paragraph: 16px;  /* 8px × 2 - 段落間 */
  --prj-text-gap-inline: 8px;      /* 8px × 1 - インライン要素間 */
  --prj-text-gap-tight: 4px;       /* 4px - 密接した要素間 */

  /* --- コンテンツ幅 --- */
  --prj-content-width-sm: 640px;
  --prj-content-width-md: 768px;
  --prj-content-width-lg: 1000px;
  --prj-content-width-xl: 1200px;
  --prj-content-width-full: 100%;

  /* --- コンテンツパディング --- */
  --prj-content-padding-pc: 20px;
  --prj-content-padding-sp: 15px;

  /* ========================================
     ボーダー・シェイプトークン
     ======================================== */

  /* --- ボーダー幅 --- */
  --prj-border-width-none: 0;
  --prj-border-width-thin: 1px;
  --prj-border-width-medium: 2px;
  --prj-border-width-thick: 4px;

  /* --- ボーダー半径 --- */
  --prj-radius-none: 0;
  --prj-radius-sm: 2px;
  --prj-radius-md: 4px;
  --prj-radius-lg: 8px;
  --prj-radius-xl: 12px;
  --prj-radius-2xl: 16px;
  --prj-radius-full: 9999px;

  /* ========================================
     シャドウトークン
     ======================================== */

  --prj-shadow-none: none;
  --prj-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --prj-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --prj-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --prj-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --prj-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
  --prj-shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.15);

  /* --- フォーカスリング --- */
  --prj-shadow-focus: 0 0 0 3px rgba(230, 125, 155, 0.3);

  /* ========================================
     トランジション・アニメーション
     ======================================== */

  /* --- デュレーション --- */
  --prj-duration-fast: 150ms;
  --prj-duration-normal: 300ms;
  --prj-duration-slow: 500ms;

  /* --- イージング --- */
  --prj-easing-linear: linear;
  --prj-easing-ease: ease;
  --prj-easing-ease-in: ease-in;
  --prj-easing-ease-out: ease-out;
  --prj-easing-ease-in-out: ease-in-out;

  /* --- 共通トランジション --- */
  --prj-transition-fast: var(--prj-duration-fast) var(--prj-easing-ease);
  --prj-transition-normal: var(--prj-duration-normal) var(--prj-easing-ease);
  --prj-transition-slow: var(--prj-duration-slow) var(--prj-easing-ease);

  /* ========================================
     Z-index
     ======================================== */

  --prj-z-index-dropdown: 1000;
  --prj-z-index-sticky: 1100;
  --prj-z-index-fixed: 1200;
  --prj-z-index-modal-backdrop: 1300;
  --prj-z-index-modal: 1400;
  --prj-z-index-popover: 1500;
  --prj-z-index-tooltip: 1600;

  /* ========================================
     ブレークポイント（参照用・メディアクエリで使用）
     ======================================== */

  /* CSS変数はメディアクエリで直接使えないため、参照値として定義 */
  /* 実際のブレークポイント:
     --prj-breakpoint-sm: 480px;
     --prj-breakpoint-md: 768px;
     --prj-breakpoint-lg: 1024px;
     --prj-breakpoint-xl: 1280px;
  */

  /* ========================================
     コンポーネントトークン（エイリアス）
     ======================================== */

  /* --- ボタン --- */
  --prj-button-height-sm: 32px;
  --prj-button-height-md: 40px;
  --prj-button-height-lg: 48px;
  --prj-button-padding-x-sm: var(--prj-spacing-3);
  --prj-button-padding-x-md: var(--prj-spacing-5);
  --prj-button-padding-x-lg: var(--prj-spacing-6);

  /* --- 入力フィールド --- */
  --prj-input-height-sm: 32px;
  --prj-input-height-md: 40px;
  --prj-input-height-lg: 48px;
  --prj-input-padding-x: var(--prj-spacing-3);

  /* --- カード --- */
  --prj-card-padding-pc: var(--prj-spacing-5);
  --prj-card-padding-sp: var(--prj-spacing-4);
  --prj-card-radius: var(--prj-radius-lg);
  --prj-card-shadow: var(--prj-shadow-sm);
  --prj-card-shadow-hover: var(--prj-shadow-md);
}

/* ========================================
   SP用トークン上書き
   ======================================== */

@media screen and (max-width: 768px) {
  :root {
    /* フォントサイズ調整 */
    --prj-font-size-3xl: 22px;
    --prj-font-size-4xl: 26px;
    --prj-font-size-5xl: 28px;
    --prj-font-size-6xl: 32px;

    /* コンテンツパディング */
    --prj-content-padding: var(--prj-content-padding-sp);
  }
}

@media screen and (min-width: 769px) {
  :root {
    /* コンテンツパディング */
    --prj-content-padding: var(--prj-content-padding-pc);
  }
}

/* ========================================
   custom.css - PC/SP共通スタイル
   ======================================== */

/*
 * デザイントークンを使用したスタイル定義
 * tokens.css で定義された変数を使用します
 */

/* ----------------------------------------
   トークンのインポート
   ---------------------------------------- */


/* ----------------------------------------
   レガシー変数（後方互換性のため維持）
   ---------------------------------------- */
:root {
  /* 旧変数名 → 新トークンへのエイリアス */
  --prj-primary-color: var(--prj-color-primary-500);
  --prj-secondary-color: var(--prj-color-secondary-500);
  --prj-text-color: var(--prj-color-text-primary);
  --prj-border-color: var(--prj-color-border);
  --prj-bg-color: var(--prj-color-bg-secondary);
  --prj-font-family: var(--prj-font-family-base);
  --prj-transition: var(--prj-transition-normal);
}

/* ----------------------------------------
   ASP側CSSリセット（#main_column h2 の上書き）
   ---------------------------------------- */
/* !important: ASP側 #main_column h2 { padding:10px; margin-bottom:30px; border-bottom:1px solid #CCC; font-size:130%; } を打ち消し */
#main_column h2.prj-title {
  padding: 0 !important;
  margin-bottom: 0 !important;
  border-bottom: none !important;
  font-size: var(--prj-font-size-3xl) !important;
  background: transparent !important;
}
#main_column h2.prj-faq-section__title {
  padding: 0 !important;
  margin-bottom: 0 !important;
  border-bottom: none !important;
  font-size: var(--prj-font-size-2xl) !important;
  background: transparent !important;
}

/* ----------------------------------------
   共通スタイル（PC/SP両方に適用）
   ---------------------------------------- */
.prj-section {
  font-family: var(--prj-font-family);
  color: var(--prj-text-color);
  padding: var(--prj-section-padding-pc) 0;
}

.prj-section + .prj-section {
  margin-top: var(--prj-section-gap-pc);
}

.prj-container {
  max-width: var(--prj-content-width-lg);
  margin: 0 auto;
  padding: 0 var(--prj-content-padding-pc);
}

.prj-title {
  font-size: var(--prj-font-size-3xl);
  font-weight: var(--prj-font-weight-bold);
  margin-bottom: var(--prj-heading-h1-gap-pc);
  text-align: center;
  color: var(--prj-primary-color);
}

.prj-button {
  display: inline-block;
  padding: var(--prj-spacing-3) var(--prj-spacing-6);
  background: var(--prj-primary-color);
  color: var(--prj-color-text-inverse);
  text-decoration: none;
  border-radius: var(--prj-radius-md);
  font-size: var(--prj-font-size-md);
  font-weight: var(--prj-font-weight-medium);
  transition: opacity var(--prj-transition);
}

.prj-button:hover {
  opacity: 0.8;
}

/* ----------------------------------------
   グリッドレイアウト
   ---------------------------------------- */
.prj-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--prj-component-gap-md);
}

.prj-grid__item {
  width: calc(33.333% - 20px);
}

/* ----------------------------------------
   カードコンポーネント
   ---------------------------------------- */
.prj-card {
  background: var(--prj-color-bg-primary);
  border: var(--prj-border-width-thin) solid var(--prj-border-color);
  border-radius: var(--prj-radius-lg);
  overflow: hidden;
  transition: box-shadow var(--prj-transition);
}

.prj-card:hover {
  box-shadow: var(--prj-shadow-md);
}

.prj-card__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.prj-card__body {
  padding: var(--prj-spacing-5);
}

.prj-card__title {
  font-size: var(--prj-font-size-xl);
  font-weight: var(--prj-font-weight-bold);
  margin-bottom: var(--prj-spacing-2);
}

.prj-card__text {
  font-size: var(--prj-font-size-md);
  line-height: var(--prj-line-height-normal);
  color: var(--prj-color-text-secondary);
}

/* ----------------------------------------
   PC/SP 表示切り替え
   ---------------------------------------- */

/* PC専用（メディアクエリ版） */
@media screen and (min-width: 769px) {
  .prj-pc-only {
    display: block !important;
  }

  .prj-sp-only {
    display: none !important;
  }
}

/* SP専用（メディアクエリ版） */
@media screen and (max-width: 768px) {
  /* ASP側CSSリセット SP用（SPはHTML構造が異なり #main_column なし） */
  /* !important: ASP側 @supports h2 { background: var(--main-color) } を打ち消し */
  h2.prj-title {
    font-size: var(--prj-font-size-2xl) !important;
    background: transparent !important;
    color: var(--prj-primary-color) !important;
  }
  h2.prj-faq-section__title {
    font-size: var(--prj-font-size-xl) !important;
    background: transparent !important;
    color: var(--prj-primary-color) !important;
  }

  .prj-pc-only {
    display: none !important;
  }

  .prj-sp-only {
    display: block !important;
  }

  /* SP用レイアウト調整 */
  .prj-section {
    padding: var(--prj-section-padding-sp) 0;
  }

  .prj-section + .prj-section {
    margin-top: var(--prj-section-gap-sp);
  }

  .prj-container {
    padding: 0 var(--prj-content-padding-sp);
  }

  .prj-title {
    font-size: var(--prj-font-size-2xl);
    margin-bottom: var(--prj-heading-h1-gap-sp);
  }

  .prj-grid {
    display: block;
  }

  .prj-grid__item {
    width: 100%;
    margin-bottom: var(--prj-spacing-5);
  }

  .prj-grid__item:last-child {
    margin-bottom: 0;
  }

  .prj-card__body {
    padding: var(--prj-spacing-4);
  }

  .prj-card__title {
    font-size: var(--prj-font-size-lg);
  }
}

/* ----------------------------------------
   bodyクラスでの出し分け（JSで付与される場合）
   ---------------------------------------- */

/* PC専用（bodyクラス版） */
.is-pc .prj-pc-only-body {
  display: block;
}

.is-pc .prj-sp-only-body {
  display: none;
}

/* SP専用（bodyクラス版） */
.is-sp .prj-pc-only-body {
  display: none;
}

.is-sp .prj-sp-only-body {
  display: block;
}

/* ----------------------------------------
   ガイドコンポーネント
   ---------------------------------------- */
.prj-guide {
  max-width: 700px;
  margin: 0 auto;
}

.prj-guide__step {
  display: flex;
  align-items: flex-start;
  gap: var(--prj-spacing-5);
  padding: var(--prj-spacing-6) 0;
  border-bottom: var(--prj-border-width-thin) solid var(--prj-border-color);
}

.prj-guide__step:last-child {
  border-bottom: none;
}

.prj-guide__number {
  flex-shrink: 0;
  width: var(--prj-spacing-10);
  height: var(--prj-spacing-10);
  background: var(--prj-primary-color);
  color: var(--prj-color-text-inverse);
  border-radius: var(--prj-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--prj-font-size-xl);
  font-weight: var(--prj-font-weight-bold);
}

.prj-guide__content {
  flex: 1;
}

.prj-guide__title {
  font-size: var(--prj-font-size-xl);
  font-weight: var(--prj-font-weight-bold);
  margin-bottom: var(--prj-spacing-2);
}

.prj-guide__text {
  font-size: var(--prj-font-size-md);
  line-height: var(--prj-line-height-normal);
  color: var(--prj-color-text-secondary);
}

/* ----------------------------------------
   FAQコンポーネント
   ---------------------------------------- */
.prj-faq {
  width: 100%;
}

.prj-faq__item {
  border-bottom: var(--prj-border-width-thin) solid var(--prj-border-color);
}

.prj-faq__item:last-child {
  border-bottom: none;
}

.prj-faq__q,
.prj-faq__a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--prj-radius-full);
  font-weight: var(--prj-font-weight-bold);
  margin-right: var(--prj-spacing-3);
  flex-shrink: 0;
}

.prj-faq__q {
  background: var(--prj-primary-color);
  color: var(--prj-color-text-inverse);
}

.prj-faq__a {
  background: var(--prj-bg-color);
  color: var(--prj-primary-color);
}

.prj-faq__question {
  font-size: var(--prj-font-size-lg);
  font-weight: var(--prj-font-weight-bold);
}

.prj-faq__answer {
  display: flex;
  align-items: flex-start;
  font-size: var(--prj-font-size-md);
  line-height: var(--prj-line-height-relaxed);
  color: var(--prj-color-text-secondary);
}

.prj-faq__body {
  flex: 1;
  min-width: 0;
}

.prj-faq__body a {
  color: var(--prj-primary-color) !important;
  text-decoration: underline !important;
}

.prj-faq__body a:hover {
  opacity: 0.7;
}

/* アコーディオン */
.prj-accordion__trigger {
  display: flex;
  align-items: center;
  padding: var(--prj-spacing-5) 0;
  cursor: pointer;
  transition: opacity var(--prj-transition);
}

.prj-accordion__trigger:hover {
  opacity: 0.7;
}

.prj-accordion__trigger::after {
  content: "+";
  margin-left: auto;
  font-size: var(--prj-font-size-2xl);
  font-weight: var(--prj-font-weight-normal);
  color: var(--prj-primary-color);
  width: var(--prj-spacing-5);
  text-align: center;
}

.prj-accordion__trigger.is-active::after {
  content: "\2212";
}

.prj-accordion__content {
  display: none;
  padding: 0 0 var(--prj-spacing-5) 42px;
}

/* ----------------------------------------
   ボタンラップ（中央寄せ）
   ---------------------------------------- */
.prj-button-wrap {
  text-align: center;
  margin-top: var(--prj-component-gap-lg);
}

/* ----------------------------------------
   FAQカテゴリナビゲーション
   ---------------------------------------- */
.prj-faq-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 var(--prj-component-gap-md);
  margin-bottom: var(--prj-section-gap-pc);
}

.prj-faq-nav__item {
  width: calc(25% - 18px);
  border-bottom: var(--prj-border-width-thin) solid var(--prj-border-color);
}

.prj-faq-nav__link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding: var(--prj-spacing-5) var(--prj-spacing-2);
  text-decoration: none;
  color: var(--prj-text-color);
  font-size: var(--prj-font-size-md);
  line-height: var(--prj-line-height-snug);
  text-align: left;
  transition: color var(--prj-transition);
}

.prj-faq-nav__link:hover {
  color: var(--prj-primary-color);
}

.prj-faq-nav__link::before {
  content: "\00BB";
  display: inline-block;
  color: var(--prj-primary-color);
  margin-right: var(--prj-spacing-2);
  font-size: var(--prj-font-size-md);
}

/* ----------------------------------------
   FAQセクション見出し
   ---------------------------------------- */
.prj-faq-section {
  margin-bottom: var(--prj-section-gap-pc);
}

.prj-faq-section__title {
  font-size: var(--prj-font-size-2xl);
  font-weight: var(--prj-font-weight-bold);
  color: var(--prj-primary-color);
  margin-bottom: var(--prj-heading-h2-gap-pc);
  padding-bottom: var(--prj-spacing-3);
  text-align: left;
}

.prj-faq-section__title::after {
  content: "";
  display: flex;
  margin-top: var(--prj-spacing-3);
  height: var(--prj-border-width-medium);
  background: linear-gradient(to right, var(--prj-primary-color) var(--prj-spacing-16), var(--prj-color-border) var(--prj-spacing-16));
}

/* 小見出し（左縦線スタイル） */
.prj-faq-section__heading {
  font-size: var(--prj-font-size-xl);
  font-weight: var(--prj-font-weight-bold);
  color: var(--prj-primary-color);
  padding-left: var(--prj-spacing-4);
  margin: var(--prj-heading-h3-gap-pc) 0 var(--prj-spacing-4);
  border-left: var(--prj-border-width-thick) solid var(--prj-primary-color);
}

.prj-faq-section__subtitle {
  font-size: var(--prj-font-size-md);
  color: var(--prj-color-text-secondary);
  margin-bottom: var(--prj-spacing-4);
}

.prj-faq-section__subtitle::before {
  content: "\3008";
}

.prj-faq-section__subtitle::after {
  content: "\3009";
}

/* ----------------------------------------
   ステップガイドコンポーネント（flow型レイアウト）
   ---------------------------------------- */
.prj-step-guide {
  margin: 0 auto;
}

.prj-step-guide__heading {
  font-size: var(--prj-font-size-xl);
  font-weight: var(--prj-font-weight-bold);
  color: var(--prj-primary-color);
  padding-left: var(--prj-spacing-3);
  border-left: var(--prj-border-width-medium) solid var(--prj-primary-color);
  margin-top: var(--prj-spacing-10);
  margin-bottom: 0;
}

.prj-step-guide__heading:first-child {
  margin-top: 0;
}

.prj-step-guide__body {
  display: flex;
  gap: var(--prj-spacing-8);
  margin-top: var(--prj-spacing-6);
}

.prj-step-guide__text {
  flex: 1;
  font-size: var(--prj-font-size-md);
  line-height: var(--prj-line-height-relaxed);
  color: var(--prj-color-text-primary);
}

.prj-step-guide__image {
  flex: 1;
  border: var(--prj-border-width-thin) solid var(--prj-color-border-dark);
  background: var(--prj-color-bg-primary);
  padding: var(--prj-spacing-2);
}

.prj-step-guide__image img {
  width: 100%;
  display: block;
}

/* ----------------------------------------
   SP用調整（ステップガイド）
   ---------------------------------------- */
@media screen and (max-width: 768px) {
  .prj-step-guide__heading {
    font-size: var(--prj-font-size-lg);
    margin-top: var(--prj-spacing-6);
  }

  .prj-step-guide__body {
    flex-direction: column;
    gap: var(--prj-spacing-4);
    margin-top: var(--prj-spacing-4);
  }

  .prj-step-guide__image {
    width: 80%;
    margin: 0 auto;
    padding: var(--prj-spacing-4);
  }
}

/* ----------------------------------------
   SP用調整（ガイド・FAQ）
   ---------------------------------------- */
@media screen and (max-width: 768px) {
  .prj-guide__step {
    gap: var(--prj-spacing-4);
    padding: var(--prj-spacing-5) 0;
  }

  .prj-guide__number {
    width: 35px;
    height: 35px;
    font-size: var(--prj-font-size-lg);
  }

  .prj-guide__title {
    font-size: var(--prj-font-size-lg);
  }

  .prj-faq__question {
    font-size: var(--prj-font-size-md);
  }

  .prj-accordion__content {
    padding-left: 0;
  }

  .prj-button-wrap {
    margin-top: var(--prj-component-gap-md);
  }

  /* FAQカテゴリナビ SP用 */
  .prj-faq-nav {
    gap: 0;
    margin-bottom: var(--prj-component-gap-lg);
  }

  .prj-faq-nav__item {
    width: 50%;
  }

  .prj-faq-nav__link {
    padding: var(--prj-spacing-4) var(--prj-spacing-2);
    font-size: var(--prj-font-size-sm);
  }

  .prj-faq-section {
    margin-bottom: var(--prj-section-gap-sp);
  }

  .prj-faq-section__title {
    font-size: var(--prj-font-size-xl);
    padding-bottom: var(--prj-spacing-3);
    margin-bottom: var(--prj-heading-h2-gap-sp);
    text-align: left;
  }

  .prj-faq-section__heading {
    font-size: var(--prj-font-size-lg);
    margin: var(--prj-heading-h3-gap-sp) 0 var(--prj-spacing-3);
  }
}