.landing-page-body {
  margin: 0;
  padding: 0;
  font-family: 'Noto Sans JP', sans-serif;
  box-sizing: border-box;
}

.container {
  max-width: 1250px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}

/* .hero-section */
.hero-section {
  padding: 60px 0 100px;
  background: #eaf0fe;
}

.hero-section__inner {
  display: flex;
  gap: 100px;
  align-items: flex-start;
}

.hero-content {
  flex: 1;
  padding-top: 120px;
  max-width: 600px;
}

.hero-logo-line {
  display: flex;
  align-items: center;
  font-size: 22px;
  color: #0077b6; /* 濃いネイビー */
  font-weight: 700;
  margin-bottom: 25px;
}

.hero-logo-line img {
  margin-right: 15px;
  width: 40px;
  height: 40px;
}

.hero-content__headline {
  font-size: 52px;
  font-weight: 900;
  margin-top: 0;
  margin-bottom: 30px;
  line-height: 1.2;
}

.hero-content__headline .highlight {
  font-size: 52px;
  font-weight: 900;
  background: linear-gradient(to right, #007bff, #00b4d8);
  -webkit-background-clip: text; /* テキスト部分に背景をクリップ */
  -webkit-text-fill-color: transparent;
}

.hero-content__subtext {
  font-size: 20px;
  font-weight: 400;
  color: #555;
}

/* フォーム全体を囲むラッパーのスタイル */
.hero-form-wrapper {
  /* 必要に応じて背景色やパディングなどを調整 */
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}

/* フォームのコンテナ（白いボックス）のスタイル */
.hero-form-wrapper .hero-form-box {
  background-color: #ffffff; /* 白い背景 */
  padding: 30px 20px; /* 内側の余白 */
  border-radius: 8px; /* 角を少し丸く */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* 軽い影で浮き出し効果 */
  max-width: 400px; /* フォームの最大幅を制限 */
  width: 100%;
  box-sizing: border-box;
}

/* フォームタイトルのスタイル */
.hero-form-wrapper .hero-form-box__title {
  font-size: 1.5em; /* 大きめのフォントサイズ */
  font-weight: bold; /* 太字 */
  text-align: center; /* 中央揃え */
  line-height: 1.5;
  margin-bottom: 25px; /* 下に余白 */
  color: #333333; /* 濃いめの文字色 */
}

/* ラベルと入力欄のグループ */
/* Contact Form 7で<label>タグが親要素になっている構造を前提 */
.hero-form-wrapper .hero-form-box label {
  display: block; /* ブロック要素にして縦に並べる */
  margin-bottom: 20px; /* 各フィールドの下に余白 */
  font-size: 0.9em; /* ラベルの文字サイズ */
  font-weight: bold; /* ラベルを太字に */
  color: #555555; /* ラベルの文字色 */
  text-align: left;
}

/* テキスト入力フィールド、URL、メールアドレスのスタイル */
.hero-form-wrapper .hero-form-box input[type='text'],
.hero-form-wrapper .hero-form-box input[type='url'],
.hero-form-wrapper .hero-form-box input[type='email'] {
  width: 100%; /* 親要素(label)の幅いっぱいに広げる */
  padding: 10px 12px;
  margin-top: 5px; /* ラベルと入力欄の間に少しスペース */
  border: 1px solid #cccccc; /* 枠線 */
  border-radius: 4px; /* 角を少し丸く */
  box-sizing: border-box; /* パディングを幅に含める */
  font-size: 1em;
}

/* Contact Form 7のID固有のクラスをセレクタに組み込む */
.hero-form-box .premium-submit-button {
  width: 100% !important;
  padding: 15px 10px !important;
  background-color: #007bff !important;
  color: #ffffff !important;
  font-size: 1.1em !important;
  font-weight: bold !important;
  border: none !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: background-color 0.3s ease !important;
  margin-top: 10px !important;
  text-align: center !important;
}

.hero-form-box .premium-submit-button:hover {
  background-color: #0066d2 !important;
}

.hero-form-box .wpcf7-list-item-label a {
  color: #007bff;
}

@media (max-width: 992px) {
  .hero-section {
    padding: 40px 0 60px;
  }

  .hero-section__inner {
    flex-direction: column; /* 縦に並べる */
    gap: 30px;
  }

  .hero-content {
    padding-top: 0;
    text-align: center; /* 中央寄せ */
  }

  .hero-content__headline {
    font-size: 32px;
  }

  .hero-content__headline .highlight {
    font-size: 40px;
    display: block; /* 強調部分を改行 */
  }

  .hero-form-wrapper {
    width: 100%; /* 全幅に広げる */
    max-width: 480px; /* 最大幅を設定して中央に寄せる */
    margin: 0 auto;
  }

  .hero-logo-line img {
    margin-right: 15px;
    width: 50px;
    height: 50px;
  }
}

/* スマートフォン (〜576px) */
@media (max-width: 576px) {
  .hero-section {
    padding: 30px 0 50px;
  }

  .hero-content__headline {
    font-size: 24px;
    line-height: 1.4;
  }

  .hero-content__headline .highlight {
    font-size: 30px;
  }

  .hero-form-box {
    padding: 20px;
  }

  .hero-form-box__title {
    font-size: 18px;
  }

  .submit-button {
    font-size: 16px;
    padding: 12px;
  }
  .hero-form-wrapper .hero-form-box input[type='submit'] {
    font-size: 13px;
  }
}

/* お悩みセクション */
.problem-section {
  padding: 60px 0;
  background-color: #ffffff;
  font-family: 'Noto Sans JP', sans-serif; /* font-familyを統一 */
}

/* コンテンツの最大幅と中央揃え */
.problem-section .container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;
}

/* セクションタイトル */
.problem-title {
  font-size: 2.2em;
  font-weight: 700;
  color: #333333;
  margin-bottom: 40px;
  line-height: 1.4;
  text-align: center;
}

.problem-section .problem-list {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-bottom: 50px;
}

.problem-section .problem-item {
  padding: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background-color: #ffffff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

/* アイコンとタイトルのヘッダー部分 */
.problem-section .item-header {
  display: flex;
  align-items: flex-start;
  margin-bottom: 8px;
}

/* アイコンを囲む<span>のスタイル */
.problem-section .item-icon {
  line-height: 1;
  width: 30px; /* アイコンの固定幅 */
  height: 30px; /* アイコンの固定高 */
  margin-right: 15px;
  /* 画像が枠内に収まるように追加 */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* アイコン画像そのもののスタイルを追加・修正 */
.problem-section .item-icon img {
  width: 100%; /* 親要素の30pxに合わせる */
  height: 100%;
  object-fit: contain; /* 画像が歪まないように調整 */
}

/* アイテムのタイトル */
.problem-section .item-title {
  font-size: 1.3em;
  font-weight: bold;
  color: #333333;
  margin: 0;
  flex-grow: 1;
}

/* アイテムの説明文 */
.problem-section .item-description {
  font-size: 1em;
  color: #666666;
  /* アイコンサイズに合わせて調整: 30px(アイコン幅) + 15px(マージン) */
  margin-left: 45px;
  line-height: 1.6;
  padding-top: 5px;
  border-top: 1px solid #f0f0f0;
}

.problem-section .pro-solution-text {
  font-size: 1.3em;
  text-align: center;
  font-weight: bold;
  color: #333333;
  margin-top: 30px;
  /* 修正箇所1: テキストの改行を防ぐ設定を追加 */
  white-space: nowrap;
  overflow: hidden; /* はみ出しは隠す */
  text-overflow: ellipsis; /* 必要に応じて...で省略 */
}

/* ハイライト部分のスタイル */
.problem-section .pro-solution-text .highlight {
  font-weight: bold;
  color: #007bff;
}

/* =========================================
   4. レスポンシブ対応 (スマートフォン向け)
   ========================================= */
@media (max-width: 600px) {
  .problem-section {
    padding: 40px 0;
  }

  /* セクションタイトルは problem-title で定義されているため修正 */
  .problem-title {
    font-size: 1.4em;
    margin-bottom: 30px;
  }

  .problem-section .problem-item {
    padding: 15px;
  }

  .problem-section .item-header {
    align-items: flex-start; /* アイコンとタイトルを上揃えに戻す */
  }

  /* アイコンサイズをスマホ向けに少し小さく */
  .problem-section .item-icon {
    width: 32px;
    height: 32px;
    margin-right: 10px;
  }

  .problem-section .item-title {
    font-size: 0.95em;
  }

  .problem-section .item-description {
    font-size: 0.85em;
    /* 新しいアイコンサイズに合わせてマージンを調整: 24px + 10px = 34px */
    margin-left: 34px;
  }

  /* 解決テキストは white-space: nowrap; で改行を防いでいる */
  .problem-section .pro-solution-text {
    font-size: 1.2em;
    /* 修正箇所3: 画面が狭い場合は改行を許可する設定に戻す */
    white-space: normal;
    padding: 0 10px; /* 画面端の余白 */
  }
}

/* reason-section */
.reason-section {
  padding: 80px 0;
  background-color: #f8f9fa;
}

.reason-section .container {
  max-width: 1200px;
}

.reason-title {
  font-size: 1.8em;
  font-weight: 800;
  text-align: center;
  color: #333333;
  margin-bottom: 50px;
}

/* タイトル内の強調文字 (例: "勝利") */
.reason-section .section-title .highlight-victory {
  color: #007bff; /* 青色 */
}

.reason-section .reason-cards {
  display: flex;
  gap: 30px; /* カード間の隙間 */
}

/* カード個別のスタイル */
.reason-section .reason-card {
  flex: 1; /* 3等分 */
  background-color: #ffffff; /* 白いカード背景 */
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* 影で立体感を出す */
  border: 1px solid #e9ecef; /* 軽い枠線 */
}

/* カード左上のアイコン/画像 */
.reason-section .card-icon {
  width: 48px; /* アイコンのサイズ */
  height: 48px;
  margin-bottom: 15px;
  /* 画像が丸いシェイプを保てるように */
  border-radius: 50%;
  background-color: #e9f0ff; /* アイコン背景の淡い水色 */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px; /* 内側の余白 */
}

.reason-section .card-icon img {
  width: 100%; /* 親要素(48px)に合わせる */
  height: 100%;
  object-fit: contain; /* 画像全体を表示 */
}

/* カードのタイトル */
.reason-section .card-title {
  font-size: 1.25em;
  font-weight: bold;
  color: #333333;
  line-height: 1.5;
  margin-top: 0;
  margin-bottom: 15px;
}

/* カードの説明文 */
.reason-section .card-description {
  font-size: 0.95em;
  color: #555555;
  line-height: 1.6;
  margin-bottom: 0;
}

@media (max-width: 992px) {
  .reason-section .reason-cards {
    flex-direction: column; /* 縦に積み重ねる */
    gap: 20px;
  }

  .reason-section .reason-card {
    max-width: 600px; /* カードの最大幅を設定 */
    margin-left: auto;
    margin-right: auto;
  }
}

/* スマートフォン (600px以下) */
@media (max-width: 600px) {
  .reason-section {
    padding: 40px 0;
  }

  .reason-title {
    font-size: 1.4em;
    margin-bottom: 30px;
  }

  .reason-section .reason-card {
    padding: 20px;
  }

  .reason-section .card-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 10px;
  }

  .reason-section .card-title {
    font-size: 1.1em;
  }

  .reason-section .card-description {
    font-size: 0.9em;
  }
}

.pro-comparison-section {
  background: white;
  padding: 80px 0;
}

.pro-comparison-container {
  max-width: 1100px;
  margin: 40px auto;
  font-family: 'Hiragino Kaku Gothic Pro', 'Meiryo', sans-serif;
  padding: 20px;
}

.pro-section-title-heading {
  text-align: center;
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 30px;
  color: #333;
}

/* レスポンシブ対応: 横スクロール */
.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.pro-comparison-table {
  width: 100%;
  min-width: 700px;
  border-collapse: separate;
  border-spacing: 0;
  text-align: center;
}

/* ヘッダーセルのスタイル */
.pro-plan-header {
  background-color: #d6d6d7;
  color: #333;
  padding: 15px 10px;
  font-weight: bold;
  font-size: 20px;
  border: 1px solid #ddd;
}

.pro-free-plan {
  text-align: center;
  width: 33%;
  background-color: #00b4d8 !important;
  color: white;
  border: 1px solid #00b4d8;
}

.pro-premium-plan {
  background-color: #007bff !important;
  color: white;
  text-align: center;
  width: 33%;
  border: 3px solid #007bff;
  border-bottom: 1px solid #007bff;
}

.pro-feature-header {
  background-color: #d6d6d7;
  padding: 15px 5px;
  font-weight: bold;
  font-size: 20px;
  border: 1px solid #ddd;
  text-align: center;
  color: #333;
  width: 33%;
}

.pro-plan-data {
  padding: 15px 10px;
  border: 1px solid #ddd;
  vertical-align: middle;
  font-size: 16px;
  line-height: 1.5;
  color: #555;
}

.pro-feature-name {
  text-align: center;
  padding: 15px 5px;
  border: 1px solid #ddd;
  background-color: #ffffff;
  color: #555;
  vertical-align: middle;
}

.pro-feature-name.pro-yellow-bg-cell {
  font-weight: 700;
}

/* 有料版全体を囲む青い枠 - 統一されたボーダー */
.pro-comparison-table td.pro-premium-cell {
  border-left: 3px solid #007bff !important;
  border-right: 3px solid #007bff !important;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}

/* 有料版の最後の行の下枠を太く */
.pro-comparison-table tbody tr:last-child td.pro-premium-cell {
  border-bottom: 3px solid #007bff !important;
}

/* セクション区切りの有料版セルも同じ太さの枠線 */
.pro-section-divider-row td.pro-premium-cell {
  border-left: 3px solid #007bff !important;
  border-right: 3px solid #007bff !important;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}

/* セクション区切り（ホームページの状況分析 など） */
.pro-section-divider-row td.pro-section-subtitle {
  background-color: #f2f2f2;
  font-weight: bold;
  padding: 10px;
  border: 1px solid #ddd;
  text-align: center;
  color: #333;
  font-size: 20px;
}

.pro-section-divider-row td.pro-section-subtitle:first-child {
  border-right: none !important;
}

.pro-section-divider-row td.pro-section-subtitle:nth-child(2) {
  border-left: none !important;
}

/* 黄色の背景のセクション */
.pro-yellow-bg {
  background-color: #fffacd;
}

.pro-yellow-bg-cell {
  background-color: #fffacd !important;
}

.pro-section-divider-row.pro-yellow-bg td.pro-section-subtitle {
  background-color: #fffacd;
  border-bottom: 1px solid #ddd;
}

.pro-plan-data.pro-yellow-bg-cell.cross-red {
  color: red;
  font-size: 1.2em;
}

/* 丸のスタイル */
.pro-plan-data.round-green::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid #54d681;
  border-radius: 50%;
  vertical-align: middle;
}

.pro-plan-data.pro-premium-cell.round-green::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid #54d681;
  border-radius: 50%;
  vertical-align: middle;
}

/* 丸+テキストのスタイル */
.round-with-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 50px;
}

.round-with-text::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid #54d681;
  border-radius: 50%;
  margin-bottom: 5px;
}

.round-with-text .sub-text {
  font-size: 12px;
  color: #666;
  margin-top: 3px;
}

.pro-plan-data.pro-premium-cell.premium-blue {
  color: #007bff;
  font-weight: 700;
}

/* レスポンシブ対応 (モバイル向け) */
@media screen and (max-width: 768px) {
  .pro-comparison-container {
    padding: 10px;
  }

  .table-wrapper {
    margin: 0 -10px;
    padding: 0 10px;
  }

  .pro-section-title-heading {
    font-size: 20px;
  }
}

/* --- ページ全体のセクションスタイリング --- */
.c-strategy-section {
  background-color: #eaf0fe; /* 背景の薄い水色 */
  padding: 80px 20px; /* 上下のパディング */
  font-family: sans-serif; /* フォントの調整 */
}

.c-strategy-section__inner {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}

/* --- 見出しのスタイリング --- */
.c-strategy-section__headline {
  font-size: 32px;
  font-weight: 700;
  color: #333;
  margin-bottom: 50px;
  line-height: 1.5;
}

/* --- フォームコンテナのスタイリング --- */
.c-strategy-form-container {
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
}

/* --- フォームボックスの枠と影 --- */
.c-strategy-form-box {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  padding: 30px 40px; /* 内側のパディングを調整 */
  width: 100%;
  max-width: 1000px; /* フォームの最大幅 (添付画像に基づき調整) */
}

/* フォームタイトル */
.c-strategy-form-box__title {
  font-size: 18px;
  font-weight: 700;
  color: #333;
  margin-bottom: 25px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee; /* タイトル下の薄い区切り線 */
  line-height: 1.6;
}

/* --- 無料版への遷移リンクエリア --- */
.c-strategy-cta-free {
  text-align: center;
  margin-top: 50px;
}

.c-strategy-cta-free__text {
  font-size: 18px;
  color: #555;
  margin-bottom: 15px;
}

.c-strategy-cta-free__link {
  display: inline-block;
  padding: 15px 30px;
  border: 2px solid #007bff; /* 青い枠線 */
  border-radius: 5px;
  background-color: #fff;
  color: #007bff; /* 青い文字 */
  font-size: 20px;
  font-weight: bold;
  text-decoration: none;
  transition: all 0.3s;
}

.c-strategy-cta-free__link:hover {
  background-color: #e6f2ff; /* ホバーで背景を薄い青に */
}

/* フォーム全体を囲むラッパーのスタイル */
.c-strategy-form-wrapper {
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* フォームのコンテナ（白いボックス）のスタイル */
.c-strategy-form-wrapper .hero-form-box {
  background-color: #ffffff; /* 白い背景 */
  padding: 30px 20px; /* 内側の余白 */
  border-radius: 8px; /* 角を少し丸く */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* 軽い影で浮き出し効果 */
  max-width: 600px; /* フォームの最大幅を制限 */
  width: 100%;
  box-sizing: border-box;
}

/* フォームタイトルのスタイル */
.c-strategy-form-wrapper .hero-form-box__title {
  font-size: 1.5em; /* 大きめのフォントサイズ */
  font-weight: bold; /* 太字 */
  text-align: center; /* 中央揃え */
  line-height: 1.5;
  margin-bottom: 25px; /* 下に余白 */
  color: #333333; /* 濃いめの文字色 */
}

/* ラベルと入力欄のグループ */
/* Contact Form 7で<label>タグが親要素になっている構造を前提 */
.c-strategy-form-wrapper .hero-form-box label {
  display: block; /* ブロック要素にして縦に並べる */
  margin-bottom: 20px; /* 各フィールドの下に余白 */
  font-size: 0.9em; /* ラベルの文字サイズ */
  font-weight: bold; /* ラベルを太字に */
  color: #555555; /* ラベルの文字色 */
  text-align: left;
}

/* テキスト入力フィールド、URL、メールアドレスのスタイル */
.c-strategy-form-wrapper .hero-form-box input[type='text'],
.c-strategy-form-wrapper .hero-form-box input[type='url'],
.c-strategy-form-wrapper .hero-form-box input[type='email'] {
  width: 100%; /* 親要素(label)の幅いっぱいに広げる */
  padding: 10px 12px;
  margin-top: 5px; /* ラベルと入力欄の間に少しスペース */
  border: 1px solid #cccccc; /* 枠線 */
  border-radius: 4px; /* 角を少し丸く */
  box-sizing: border-box; /* パディングを幅に含める */
  font-size: 1em;
}

/* 送信ボタンのスタイル */
.c-strategy-form-wrapper .hero-form-box input[type='submit'] {
  width: 100%; /* 幅いっぱいに広げる */
  padding: 15px 10px;
  background-color: #007bff; /* 画像のオレンジ色 */
  color: #ffffff; /* 白い文字 */
  font-size: 1.1em; /* 少し大きめの文字 */
  font-weight: bold; /* 太字 */
  border: none; /* 枠線をなくす */
  border-radius: 6px; /* 角を丸く */
  cursor: pointer; /* マウスカーソルをポインターに */
  transition: background-color 0.3s ease; /* ホバー時のアニメーション */
  margin-top: 10px; /* フォームフィールドとの間に余白 */
}

/* 送信ボタンのホバー時のスタイル */
.c-strategy-form-wrapper .hero-form-box input[type='submit']:hover {
  background-color: #0066d2; /* 少し暗い色 */
}

.c-strategy-form-wrapper .hero-form-box .wpcf7-list-item-label a {
  color: #007bff;
}

/* --- レスポンシブ対応 (モバイル向け) --- */
@media (max-width: 768px) {
  .c-strategy-section {
    padding: 50px 15px;
  }

  .c-strategy-section__headline {
    font-size: 24px;
    margin-bottom: 30px;
  }

  .c-strategy-form-box {
    padding: 25px 20px; /* モバイルでのパディングを調整 */
  }

  .c-strategy-form-box__title {
    font-size: 16px;
  }

  .c-strategy-form-box input[type='text'],
  .c-strategy-form-box input[type='email'] {
    padding: 10px;
    margin-bottom: 15px;
  }

  .c-strategy-form-box .wpcf7-submit {
    font-size: 16px;
    padding: 12px 20px;
  }

  .c-strategy-cta-free {
    margin-top: 30px;
  }

  .c-strategy-cta-free__link {
    font-size: 15px;
    padding: 12px 20px;
  }

  .c-strategy-form-wrapper .hero-form-box input[type='submit'] {
    font-size: 13px;
  }
}

/* 3. FAQセクション */
.pro-faq-area {
  max-width: 850px;
  margin: 80px auto 0 auto;
}

.pro-faq-title {
  font-size: 28px;
  font-weight: 800;
  color: black;
  text-align: center;
  margin-bottom: 30px;
}

.pro-faq-wrapper {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.pro-faq-item {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  background-color: #ffffff;
  max-width: 850px;
}

/* アコーディオン機能のスタイル */
.pro-faq-item details {
  width: 100%;
}

.pro-faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 25px;
  cursor: pointer;
  font-weight: 700;
  color: black;
  font-size: 16px;
  list-style: none; /* デフォルトの矢印を非表示 */
}

/* summaryがデフォルトのリストスタイルを表示しないように */
.pro-faq-item summary::-webkit-details-marker,
.pro-faq-item summary::marker {
  display: none;
}

.pro-faq-item .pro-faq-icon {
  width: 14px; /* アイコン全体の幅 */
  height: 14px; /* アイコン全体の高さ */
  position: relative;
  flex-shrink: 0;
  margin-left: 15px;
  transition: transform 0.3s ease; /* 開閉時の回転アニメーション */
}

/* 画像のようなV字型矢印をCSSで描画 */
.pro-faq-item .pro-faq-icon::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px; /* 矢印の幅 */
  height: 8px; /* 矢印の高さ */
  border: solid #a0a8b9; /* アイコンの色 (画像に合わせてグレー系に) */
  border-width: 0 2px 2px 0; /* 右と下の線のみ */
  transform: translate(-50%, -75%) rotate(45deg); /* 上向きのV字になるように回転と位置調整 */
  transition: border-color 0.3s ease, transform 0.3s ease;
}

/* detailsが開いた時のアイコン (矢印を下向きにする) */
.pro-faq-item details[open] summary .pro-faq-icon {
  transform: rotate(180deg); /* アイコン全体を180度回転して下向きに */
}

/* detailsが開いた時のアイコンの色変更 */
.pro-faq-item details[open] summary .pro-faq-icon::before {
  border-color: #54d681; /* 開いた時のアイコン色をオレンジに */
  transform: translate(-50%, -25%) rotate(45deg); /* 開いた時の位置調整（下向きV字の中心に合わせる） */
}

/* 回答部分 */
.pro-faq-answer {
  padding: 0 25px 20px 25px;
  font-size: 15px;
  color: #666;
  line-height: 1.7;
  animation: slideDown 0.3s ease-out;
}
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- レスポンシブ対応 --- */
@media (max-width: 768px) {
  .pro-faq-area {
    margin: 60px 20px 0;
  }
  .pro-faq-title {
    font-size: 24px;
  }
  .pro-faq-item summary {
    padding: 15px 20px;
    font-size: 15px;
  }
  .pro-faq-item .pro-faq-icon {
    width: 12px; /* スマホでのアイコンサイズ調整 */
    height: 12px;
  }
  .pro-faq-item .pro-faq-icon::before {
    width: 7px;
    height: 7px;
  }
  .pro-faq-answer {
    padding: 0 20px 15px 20px;
    font-size: 14px;
  }
}