@charset "utf-8";

/* ==========================================================================
   1. 共通変数定義（カラー・文字サイズ・余白の統一）
   ========================================================================== */
:root {
  /* カラー（ボタン仕様を反映。その他はスライドに合わせて適宜調整してください） */
  --color-primary: #fc490d;    /* ボタン・アクセントカラー */
  --color-text-main: #333333;  /* 基本の文字色 */
  --color-text-light: #666666; /* 補足などの薄い文字色 */
  --color-bg-white: #ffffff;   /* 背景白 */
  --color-bg-gray: #f8f9fa;    /* セクション背景などの薄いグレー */

  /* 文字サイズ（PCサイズを基準にスマホ対応） */
  --font-size-mv: clamp(32px, 5vw, 70px);    /* メインコピー（スマホ32px〜PC60px自動可変） */
  --font-size-h2: clamp(24px, 3.5vw, 36px);  /* 大見出し（スマホ24px〜PC36px自動可変） */
  --font-size-body: clamp(15px, 1.8vw, 18px);/* 本文（スマホ15px〜PC18px自動可変） */
  --font-size-note: 14px;                     /* 注釈や補足（固定） */

  /* 空間・余白（セクション間の統一） */
  --section-padding: clamp(40px, 6vw, 80px) 0; /* 上下余白（スマホ40px〜PC80px自動可変） */
  
  /* コンテンツの最大幅（HubSpotの標準的な横幅に合わせる） */
  --content-width: 1100px;
}

/* ==========================================================================
   2. 全体・ベーススタイル
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: var(--font-size-body);
  line-height: 1.7;
  color: var(--color-text-main);
  background-color: var(--color-bg-white);
  -webkit-font-smoothing: antialiased;
}

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

/* HubSpotのインナーコンテナ用共通クラス */
.lp-container {
  max-width: var(--content-width);
  margin-right: auto;
  margin-left: auto;
  padding-right: 20px;
  padding-left: 20px;
  width: 100%;
}

/* ヘッダー社名スマホ表示時（画面幅768px以下）のスタイル設定 */
@media screen and (max-width: 768px) {
  .header-logo-text {
    font-size: 16px !important;    /* スマホ用に文字サイズを縮小 */
    margin-left: 6px !important;   /* 間隔を詰めて収まりを良くする */
    margin-bottom: 4px !important;   /* バランス調整 */
    white-space: nowrap;           /* 途中での改行（折返し）を防止 */
  }
  .logo-cross span {
    font-size: 23px !important;    /* 合わせて「×」のサイズも調整（お好みで） */
    margin-bottom: 4px !important;
  }
}

/* ==========================================================================
   3. セクション共通レイアウト（空間の統一）
   ========================================================================== */
.lp-section {
  padding: var(--section-padding);
}

/* 背景をグレーにしたいセクション用 */
.lp-section--bg-gray {
  background-color: var(--color-bg-gray);
}

/* ==========================================================================
   4. タイポグラフィ共通（修正：H2の下に黄色の点線を追加）
   ========================================================================== */
.lp-section-title {
  font-size: var(--font-size-h2);
  font-weight: bold;
  line-height: 1.4;
  text-align: center;
  margin-top: 0;
  margin-bottom: 56px; /* 点線とのバランスを考慮し余白を調整 */
  position: relative;
  padding-bottom: 20px; /* 文字と点線の間の空間 */
}

/* ラフ案の「黄色の点線」を再現 */
.lp-section-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 140px;          /* 点線の横幅 */
  border-bottom: 3px dashed #fcc800; /* ヤマト様のロゴに合わせた鮮やかな黄色 */
}

/* ==========================================================================
   5. ボタン共通スタイル（ご指定の仕様）
   ========================================================================== */
.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 280px; /* 必要に応じて調整してください */
  padding: 16px 32px;
  font-size: 18px;
  font-weight: bold;
  text-decoration: none;
  border-radius: 4px; /* 角丸（スライドに合わせて調整可） */
  transition: all 0.3s ease;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(252, 73, 13, 0.2); /* 軽い影（不要なら削除可） */
  
  /* 通常時のスタイル */
  background-color: var(--color-primary);
  color: #ffffff;
  border: 2px solid var(--color-primary);
}

/* ホバー時のスタイル */
.lp-btn:hover {
  background-color: #ffffff;
  color: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: 0 4px 15px rgba(252, 73, 13, 0.4);
}

/* ボタンを中央寄せにしたい場合の親要素用クラス */
.lp-btn-wrap {
  text-align: center;
  margin-top: 32px;
  margin-bottom: 32px;
}

@media (max-width: 767px) {
  .lp-btn {
    width: 100%; /* スマホ時はボタンを横幅いっぱいに広げる場合 */
    font-size: 16px;
    padding: 14px 24px;
  }
}

/* ==========================================================================
   メインビジュアル（MV）
   ========================================================================== */
.lp-mv {
  /* スライドの背景に合わせ、爽やかな薄い水色〜白のグラデーション */
  background: #ffffff;/*linear-gradient(135deg, #eef7f9 0%, #ffffff 100%);*/
  margin-top: 40px;    /* 要素自体を上に80px引き上げる */
  padding-bottom: 110px; /* 要素の内側の下側に80pxの余白を作る */
  overflow: hidden;
}

.lp-mv__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0; /* 【修正】要素を重ねやすくするため、一律の隙間（40px）を0にします */
}

/* 左側コンテンツの幅調整 */
.lp-mv__content {
  z-index: 2; /* イラストより上に配置 */
  flex: 0 0 110%; /* 【修正】幅を50%から70%に広げ、テキストが1行で収まりやすくします */
  max-width: 1400px; /* 【修正】コンテンツの最大幅（1100px）の70%に合わせます */
  padding-left: 90px;
}

/* 最上部：ロゴ＆吹き出し画像 */
.lp-mv__logo-wrap {
  margin-bottom: 24px;
  text-align: left;
}

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

/* キャッチコピーの上の小見出し（スライドの赤文字を反映） */
.lp-mv__sub-title {
  font-size: clamp(20px, 2.5vw, 28px);
  color: #fc490d; /* ご指定の赤・オレンジ系カラー */
  font-weight: bold;
  margin-top: 0;
  margin-bottom: 0px;
  letter-spacing: 0.05em;
}

/* メインタイトル */
.lp-mv-title {
  font-size: var(--font-size-mv); /* 共通変数 60px 基準 */
  font-weight: bold;
  line-height: 1.3;
  color: #333333;
  margin-top: 0;
  margin-bottom: 32px;
}

/* バッジ画像エリア */
.lp-mv__badge-imgs {
  display: flex;
  gap: 16px;
  margin-bottom: 32px;
}

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

/* PCではボタンを左寄せに */
.lp-mv__btn-wrap {
  text-align: left;
  margin-top: 0;
  margin-bottom: 0;
}

/* 右側画像エリアの調整 */
.lp-mv__image-wrap {
  flex: 0 0 45%; /* 【修正】幅を45%に設定（テキストの70%と足して115%にします） */
  max-width: 500px; /* 【修正】イラストが小さくなりすぎないよう少し大きくします */
  margin-left: -110%; /* 【新規】マイナスマージンでイラストを15%分左に引っ張り、テキストと重ねます */
  margin-top: 10%; 
  z-index: 1; /* 【新規】テキスト（9999）の下に潜り込ませます */
  text-align: left; /* 【修正】右寄せにして全体のバランスを取ります */
}

.lp-mv__image {
  width: 100%;
  height: auto;
}

/* ==========================================================================
   レスポンシブ（タブレット・スマホ対応）
   ========================================================================== */
@media (max-width: 991px) {
  .lp-mv {
    margin: 0 0 0px 0;
  }
  
  .lp-mv__inner {
    flex-direction: column; /* スマホ時は縦並び */
    gap: 40px;
  }
  
  .lp-mv__content {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center; /* スマホ時は要素を中央揃えに */
    text-align: center;
    padding-left: 0px;
  }
  
  .lp-mv__logo-wrap {
    text-align: center;
  }
  
  .lp-mv__badge-imgs {
    justify-content: center; /* スマホ時はバッジ画像を中央寄せ */
  }
  
  .lp-mv__btn-wrap {
    text-align: center;
    width: 100%;
  }
  
  .lp-mv__image-wrap {
    max-width: 90%;
    margin: 0 auto;
    padding-top; -60px;
  }
}

/* ==========================================================================
   課題提起（お悩み）
   ========================================================================== */
.lp-problems {
  /* 下部の黄色い帯をセクションの端まで広げるため、下側のパディングのみ一旦0にします */
  padding-bottom: 0;
}

.lp-problems__list {
  display: flex;
  gap: 32px;
  justify-content: space-between;
  margin-top: 64px; /* 吹き出しが上に飛び出すための余白 */
  margin-bottom: 80px;
}

/* 各悩みカードのスタイル（枠線と角丸をラフに忠実化） */
.lp-problems__item {
  flex: 1;
  background-color: var(--color-bg-white);
  border: 1px solid #dcdcdc; /* ラフ案通りの薄いグレーの枠線 */
  border-radius: 16px;       /* しっかりめの角丸 */
  padding: 48px 24px 40px;   /* 吹き出しスペースのため上部を広めに */
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;        /* 吹き出しの絶対配置の基準値 */
}

/* ① 吹き出しの配置ラッパー */
.lp-problems__balloon-wrap {
  position: absolute;
  top: -20px; /* カードの上枠線の上に跨がせる */
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

/* 吹き出し本体（枠線と下矢印をCSSで再現） */
.lp-problems__balloon {
  background-color: #f2f2f2;
  border: 1px solid #cccccc;
  padding: 6px 20px;
  font-size: 15px;
  font-weight: bold;
  color: var(--color-text-main);
  border-radius: 4px;
  white-space: nowrap;
  position: relative;
}

/* 吹き出しの下向き三角（▼）の細線枠付き再現 */
.lp-problems__balloon::after,
.lp-problems__balloon::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: solid transparent;
  width: 0;
  height: 0;
}
.lp-problems__balloon::after {
  border-top-color: #f2f2f2; /* 内側のグレー色 */
  border-width: 6px;
}
.lp-problems__balloon::before {
  border-top-color: #cccccc; /* 枠線のグレー色 */
  border-width: 7px;
  margin-top: 0px;
}

/* ② カード内タイトル */
.lp-problems__item-title {
  font-size: 22px;
  font-weight: bold;
  color: var(--color-text-main);
  margin-top: 0;
  margin-bottom: 24px;
  line-height: 1.3;
}

/* ③ 画像配置エリア */
.lp-problems__img-wrap {
  margin-bottom: 24px;
  height: 140px; /* イラストが綺麗に収まる高さ */
  display: flex;
  align-items: center;
  justify-content: center;
}

.lp-problems__img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/* ④ カード内の説明文（ラフ案に合わせて中央揃えに修正） */
.lp-problems__item-desc {
  font-size: 15px;
  color: var(--color-text-light);
  text-align: center; /* 中央揃えに修正 */
  margin: 0;
  line-height: 1.6;
}

/* ==========================================================================
   最下部：「そのお悩みURIHOが解決します！」の黄色い帯
   ========================================================================== */
.lp-problems__footer {
  background-color: rgb(219 234 254);
  padding: 36px 20px;
  text-align: center;
  position: relative;
  width: 100vw;
  /* HubSpotのコンテナを突き破って画面いっぱいに広げる記述 */
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}

/* グレーの背景が黄色に食い込む「中央の下向き巨大矢印」を再現 */
.lp-problems__footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  border-style: solid;
  border-width: 24px 32px 0 32px;
  border-color: #f8f9fa transparent transparent transparent; /* セクションの背景グレーと同色 */
  z-index: 1;
}

.lp-problems__footer-text {
  font-size: clamp(20px, 2.8vw, 28px);
  font-weight: bold;
  color: #333333;
  margin: 0;
  letter-spacing: 0.05em;
}

/* 「URIHO」の文字だけ赤（オレンジ）にする指定 */
.lp-problems__footer-em {
  color: #fc490d;
  font-size: 1.15em;
  margin: 0 4px;
}

/* ==========================================================================
   レスポンシブ（スマホ対応）
   ========================================================================== */
@media (max-width: 991px) {
  .lp-problems__list {
    flex-direction: column;
    gap: 40px; /* スマホ時は縦に並ぶため、吹き出しが被らないよう広めに */
    margin-top: 40px;
    margin-bottom: 56px;
  }
  
  .lp-problems__item {
    max-width: 450px;
    width: 100%;
    margin: 0 auto;
    padding: 40px 20px 32px;
  }
  
  .lp-problems__img-wrap {
    height: 120px;
  }
  
  .lp-problems__footer {
    padding: 28px 20px;
  }
  
  .lp-problems__footer::before {
    border-width: 16px 24px 0 24px; /* スマホ時は上の食い込み矢印を少し小ぶりに */
  }
}

/* ==========================================================================
   URIHOとは
   ========================================================================== */
.lp-about {
  background-color: var(--color-bg-white);
}

/* 見出しのすぐ下のリード文 */
.lp-about__sub-lead {
  font-size: clamp(16px, 2.2vw, 22px); /* スマホ16px〜PC22pxで自動可変 */
  font-weight: bold;
  color: var(--color-text-main);
  text-align: center;
  margin-top: -24px; /* H2との距離感をラフに合わせて少し近づける */
  margin-bottom: 56px;
}

/* 左右2カラムの親要素（Flexbox） */
.lp-about__columns {
  display: flex;
  justify-content: space-between;
  align-items: center; /* 上下中央揃えでバランスを取る */
  gap: 40px;          /* カラム間の隙間 */
}

/* 左カラム：テキストエリア */
.lp-about__text-col {
  flex: 0 0 46%; /* 横幅を46%に固定 */
  max-width: 500px;
}

.lp-about__desc {
  font-size: 18px;
  line-height: 1.7;
  color: var(--color-text-main);
  margin-top: 0;
  margin-bottom: 32px;
}

/* 左に黄色い太線が入った強調ボックス */
.lp-about__highlight-box {
  background-color: var(--color-bg-white);
  border: 1px solid #cccccc;            /* 全体を囲む薄いグレーの細線 */
  border-left: 8px solid #fcc800;       /* 左側だけ太い黄色ライン（ヤマトカラー） */
  padding: 24px;
  margin-bottom: 24px;
  text-align: left;
}

.lp-about__highlight-text {
  font-size: 18px;
  font-weight: bold;
  line-height: 1.6;
  color: var(--color-text-main);
  margin: 0;
}

/* 注釈（共通の14pxをベースに少し上の余白を調整） */
.lp-about .lp-text-note {
  margin-top: 0;
  margin-bottom: 0;
}

/* 右カラム：図解エリア */
.lp-about__diagram-col {
  flex: 0 0 50%; /* 横幅を50%に固定 */
  max-width: 560px;
}

/* ラフ案にある、仕組み図を囲む「角丸の薄いグレーの細枠」を再現 */
.lp-about__diagram-inner {
  border: 1px solid #cccccc;
  border-radius: 24px; /* しっかりめの角丸 */
  padding: 24px;
  background-color: var(--color-bg-white);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lp-about__diagram-img {
  width: 100%;
  height: auto;
  display: block;
}

/* ==========================================================================
   レスポンシブ（スマホ対応）
   ========================================================================== */
@media (max-width: 991px) {
  .lp-about__sub-lead {
    margin-bottom: 40px;
    padding: 0 10px;
  }
  
  /* スマホ時は縦並びにする */
  .lp-about__columns {
    flex-direction: column;
    gap: 40px;
  }
  
  /* スマホ時は各カラムを横幅いっぱいに広げる */
  .lp-about__text-col,
  .lp-about__diagram-col {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
  }
  
  .lp-about__desc {
    text-align: center; /* スマホ時は文章を中央揃えにして綺麗に */
    margin-bottom: 24px;
  }
  
  .lp-about__highlight-box {
    padding: 20px;
  }
  
  .lp-about__highlight-text {
    font-size: 16px; /* スマホ時は文字サイズを少しコンパクトに */
  }
  
  .lp-about__diagram-inner {
    padding: 16px; /* スマホ時は枠内の余白を少し狭める */
    border-radius: 16px;
  }
}

/* ==========================================================================
   保証対象について
   ========================================================================== */
.lp-coverage__columns {
  display: flex;
  justify-content: space-between;
  gap: 32px; /* ボックス同士の間隔 */
  margin-top: 48px;
}

/* 左右共通のボックス基本スタイル */
.lp-coverage__box {
  flex: 1;
  background-color: var(--color-bg-white);
  border: 1px solid #cccccc; /* ラフ案通りの細いグレー枠線 */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ボックス上部ヘッダーの共通スタイル */
.lp-coverage__box-header {
  padding: 16px 20px;
  text-align: center;
  border-bottom: 1px solid #cccccc;
}

.lp-coverage__box-title {
  font-size: 22px;
  font-weight: bold;
  color: #333333;
  margin: 0;
}

/* 【左側専用】保証対象ヘッダー（ヤマトカラーの黄色） */
.lp-coverage__box--target .lp-coverage__box-header {
  background-color: #fcc800;
}

/* 【右側専用】保証対象外ヘッダー（薄いグレー） */
.lp-coverage__box--exclude .lp-coverage__box-header {
  background-color: #eeeeee;
}

/* ボックス下部（中身）の共通レイアウト */
.lp-coverage__box-body {
  padding: 40px 32px;
  display: flex;
  align-items: center; /* イラストとテキストを上下中央揃え */
  gap: 32px;
  flex: 1; /* 左右のボックスの高さが自動で揃うようにする */
}

/* イラスト画像エリア */
.lp-coverage__box-img-wrap {
  flex: 0 0 140px; /* 横幅を140pxに固定 */
  text-align: center;
}

.lp-coverage__box-img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 箇条書きリスト */
.lp-coverage__box-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 18px; /* 箇条書きの行間 */
  flex: 1;
}

/* 箇条書きの各行（ぶら下げインデントの適用） */
.lp-coverage__box-item {
  font-size: 20px;/*var(--font-size-body); *//* 共通18px */
  line-height: 1.5;
  color: #333333;
  position: relative;
  padding-left: 1.5em; /* 左側に記泊用の余白を空ける */
}

/* 行頭の記号（○や×）を絶対配置してインデントを固定 */
.lp-coverage__icon {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: bold;
  display: inline-block;
}

/* ラフ案に合わせ、左側の「○」だけ青（あるいは少し濃いめの色）にしたい場合の調整用 */
.lp-coverage__icon--blue {
  color: #333333; /* スライドに合わせて必要なら青等に変更してください。現在は黒にしています */
}

/* ==========================================================================
   レスポンシブ（スマホ対応）
   ========================================================================== */
@media (max-width: 991px) {
  /* スマホ・タブレット時はボックスを縦並びにする */
  .lp-coverage__columns {
    flex-direction: column;
    gap: 32px;
  }
  
  .lp-coverage__box {
    max-width: 540px;
    width: 100%;
    margin: 0 auto;
  }
  
  .lp-coverage__box-body {
    padding: 32px 24px;
    flex-direction: column; /* ボックスの内部も「上：イラスト」「下：テキスト」の縦並びに */
    gap: 24px;
    text-align: left; /* テキストは左揃えをキープ */
  }
  
  .lp-coverage__box-img-wrap {
    flex: 0 0 auto;
    max-width: 120px; /* スマホではイラストを少し小ぶりに */
  }
}

/* ==========================================================================
   URIHOが選ばれる理由（3つの強み）
   ========================================================================== */
.lp-reasons__list {
  display: flex;
  flex-direction: column;
  gap: 32px; /* カード同士の縦の隙間 */
  margin-top: 48px;
}

/* 横長で大きな角丸の白いボックス */
.lp-reasons__item {
  background-color: var(--color-bg-white);
  border: 1px solid #cccccc; /* ラフ案通りの細いグレー枠線 */
  border-radius: 32px;       /* ラフ案通りのしっかりとした大きめの角丸 */
  padding: 40px 48px;
  display: flex;
  align-items: center;       /* イラストとテキストを上下中央揃え */
  gap: 48px;                 /* イラストとテキストの間隔 */
  position: relative;
}

/* 左側：イラスト画像エリア */
.lp-reasons__img-wrap {
  flex: 0 0 180px; /* 横幅を180pxに固定して型崩れを防ぐ */
  display: flex;
  justify-content: center;
  align-items: center;
}

.lp-reasons__img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 右側：テキストコンテンツエリア */
.lp-reasons__content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* 強みのタイトル */
.lp-reasons__item-title {
  font-size: clamp(20px, 2.5vw, 24px); /* スマホ20px〜PC24pxで可変 */
  font-weight: bold;
  color: var(--color-text-main);
  margin-top: 0;
  margin-bottom: 16px;
  line-height: 1.4;
}

/* タイトル内のオレンジ（赤）強調部分 */
.lp-reasons__em {
  color: var(--color-primary); /* 共通変数のオレンジ（#fc490d） */
}

/* 説明文（共通の18pxをベースに微調整） */
.lp-reasons .lp-text-body {
  color: var(--color-text-light);
  margin-bottom: 0;
  line-height: 1.7;
}

/* 強み1の右下にある小さな注記 */
.lp-reasons__note {
  font-size: 13px;
  color: var(--color-text-light);
  text-align: right; /* ラフ案通り右寄せ */
  margin-top: 12px;
  margin-bottom: 0;
}

/* ==========================================================================
   レスポンシブ（スマホ対応）
   ========================================================================== */
@media (max-width: 991px) {
  .lp-reasons__item {
    padding: 32px 24px;
    gap: 24px;
  }
  
  .lp-reasons__img-wrap {
    flex: 0 0 140px; /* タブレットサイズではイラストを少し縮小 */
  }
}

@media (max-width: 767px) {
  .lp-reasons__item {
    flex-direction: column; /* スマホ時は「上：イラスト」「下：テキスト」の縦並びに変更 */
    text-align: center;
    padding: 32px 20px;
    border-radius: 24px;    /* スマホ画面に合わせて角丸を少し小さく調整 */
    gap: 20px;
  }
  
  .lp-reasons__img-wrap {
    flex: 0 0 auto;
    max-width: 140px;
  }
  
  .lp-reasons .lp-text-body {
    text-align: center; /* スマホ時はテキストも中央揃えで見やすく */
  }
  
  .lp-reasons__note {
    text-align: center; /* スマホ時は注記も中央揃えに */
    margin-top: 16px;
  }
}

/* ==========================================================================
   第7セクション：中間CTA（お試し訴求）
   ========================================================================== */
/* 全体を囲む大きな白いカード型ボックス */
.lp-cta-mid__card {
  background-color: var(--color-bg-white);
  border: 1px solid #cccccc; /* 薄いグレーの枠線 */
  border-radius: 32px;       /* 大きめの角丸 */
  padding: 56px 48px;        /* 内側の十分な余白（空間） */
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.03);
}

/* カード内のレイアウト（左右2カラム） */
.lp-cta-mid__body {
  display: flex;
  align-items: center;       /* イラストと右側コンテンツを上下中央揃え */
  justify-content: space-between;
  gap: 40px;
  margin-top: 40px;
}

/* 左側：イラストエリア */
.lp-cta-mid__img-wrap {
  flex: 0 0 32px0; /* 横幅を320px近辺に固定 */
  max-width: 500px;
  text-align: center;
}

.lp-cta-mid__img {
  width: 100%;
  height: auto;
  display: block;
}

/* 右側：コンテンツエリア */
.lp-cta-mid__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center; /* ボタンやテキストを中央に集める */
}

/* Point1 & Point2 を横並びにするコンテナ */
.lp-cta-mid__points {
  display: flex;
  gap: 32px;
  margin-bottom: 40px;
  width: 100%;
  justify-content: center;
}

/* 各ポイントのボックス */
.lp-cta-mid__point-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

/* ラフ案の「右側が矢印状に尖った黄色いリボン」をCSSで再現 */
.lp-cta-mid__point-badge {
  background-color: #fcc800; /* ヤマトカラーの黄色 */
  color: #333333;
  font-size: 14px;
  font-weight: bold;
  padding: 6px 20px 6px 16px;
  margin-bottom: 16px;
  min-width: 100px;
  text-align: center;
  /* 右端を尖らせる特殊な切り抜き処理 */
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%);
}

/* ポイントのテキスト（太字の20px） */
.lp-cta-mid__point-text {
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: bold;
  color: #333333;
  margin: 0;
  white-space: nowrap; /* テキストの途中で意図しない改行を防ぐ */
}

/* 「無料」「定めなし」のオレンジ（赤）強調 */
.lp-cta-mid__em {
  color: var(--color-primary); /* 共通変数のオレンジ（#fc490d） */
  font-size: 1.05em;
  margin-left: 2px;
}

/* ボタンの配置調整 */
.lp-cta-mid__btn-wrap {
  margin: 0;
  width: 100%;
  text-align: center;
}

/* ==========================================================================
   レスポンシブ（スマホ対応）
   ========================================================================== */
@media (max-width: 991px) {
  .lp-cta-mid__card {
    padding: 40px 24px; /* タブレット・スマホでは外枠の余白を少しスマートに */
  }
  
  .lp-cta-mid__body {
    flex-direction: column; /* 画面が狭くなったら「上：イラスト」「下：文字とボタン」の縦並びに */
    gap: 32px;
  }
  
  .lp-cta-mid__img-wrap {
    max-width: 240px; /* 縦並び時にイラストが大きくなりすぎないよう調整 */
  }
}

@media (max-width: 767px) {
  .lp-cta-mid__card {
    border-radius: 24px;
  }
  
  /* スマホ画面ではPoint1とPoint2も縦並びにする */
  .lp-cta-mid__points {
    flex-direction: column;
    gap: 24px;
    align-items: center;
    margin-bottom: 32px;
  }
  
  .lp-cta-mid__point-item {
    width: 100%;
  }
  
  .lp-cta-mid__point-badge {
    margin-bottom: 8px;
  }
}

/* ==========================================================================
   料金・プランについて
   ========================================================================== */
/* タイトルまわりの相対配置（右上バッジ用） */
.lp-pricing__title-wrap {
  position: relative;
  max-width: 550px;
  margin: 0 auto;
}

/* タイトル右上の無料バッジ画像 */
.lp-pricing__title-badge {
  position: absolute;
  top: -22px;
  right: -34px;
  z-index: 2;
}

/* ＼分かりやすい月額定額制！／ */
.lp-pricing__sub-lead {
  font-size: 18px;
  font-weight: bold;
  color: var(--color-text-light);
  text-align: center;
  margin-top: 48px; /* タイトルの点線に近づける */
  margin-bottom: 48px;
}

/* Point 1〜3 リストコンテナ（左寄せ・中央配置） */
.lp-pricing__points {
  max-width: 640px;
  margin: 0 auto 56px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lp-pricing__point-item {
  display: flex;
  align-items: center;
  gap: 24px;
}

/* 右端が矢印型に尖った黄色いPointリボン（第7セクションの仕組みを応用） */
.lp-pricing__point-badge {
  background-color: #fcc800;
  color: #333333;
  font-size: 14px;
  font-weight: bold;
  padding: 6px 20px 6px 16px;
  min-width: 90px;
  text-align: center;
  flex-shrink: 0;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
}

.lp-pricing__point-text {
  font-size: 18px;
  font-weight: bold;
  color: var(--color-text-main);
  margin: 0;
}
/* ==========================================================================
   料金・プランについて（セクション全体）
   ========================================================================== */
.lp-pricing--pc-only {
  display: block !important;
}
.lp-pricing--sp-only {
  display: none !important;
}

/* タイトルまわりの相対配置（右上バッジ用） */
.lp-pricing__title-wrap {
  position: relative;
  max-width: 550px;
  margin: 0 auto;
}

/* タイトル右上の無料バッジ画像 */
.lp-pricing__title-badge {
  position: absolute;
  top: -22px;
  right: -34px;
  z-index: 2;
}

.lp-pricing__sub-lead-wrap{
  margin-top: 58px;
}

/* ＼分かりやすい月額定額制！／ */
.lp-pricing__sub-lead {
  font-size: 18px;
  font-weight: bold;
  color: var(--color-text-light);
  text-align: center;
  margin-bottom: 42px;
}

/* Point 1〜3 リストコンテナ */
.lp-pricing__points {
  max-width: 640px;
  margin: 0 auto 56px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lp-pricing__point-item {
  display: flex;
  align-items: center;
  gap: 24px;
}

.lp-pricing__point-badge {
  background-color: #fcc800;
  color: #333333;
  font-size: 14px;
  font-weight: bold;
  padding: 6px 20px 6px 16px;
  min-width: 90px;
  text-align: center;
  flex-shrink: 0;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
}

.lp-pricing__point-text {
  font-size: 18px;
  font-weight: bold;
  color: var(--color-text-main);
  margin: 0;
}

/* 料金比較テーブル（PCスタイル） */
.lp-pricing__table-scroll {
  width: 100%;
  max-width: var(--content-width); /* これで横幅が広がりすぎるのを防ぎます */
  margin: 0 auto 32px;
  overflow: hidden;
}

.lp-pricing__table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.lp-pricing__table th,
.lp-pricing__table td {
  border: 1px solid #dddddd;
  padding: 20px 16px;
  text-align: center;
  vertical-align: middle;
}

.lp-pricing__th-label,
.lp-pricing__td-label {
  background-color: #f2f2f2;
  color: var(--color-text-main);
  font-weight: bold;
  font-size: 16px;
  text-align: left !important;
  width: 25%;
}

.lp-pricing__td-sub {
  font-size: 12px;
  color: var(--color-text-light);
  font-weight: normal;
}

.lp-pricing__th-plan {
  color: #ffffff;
  position: relative;
  width: 25%;
  padding: 24px 16px !important;
}

.lp-pricing__th-plan--a { background-color: #00a6a0; }
.lp-pricing__th-plan--b { background-color: #529b00; }
.lp-pricing__th-plan--c { background-color: #1e63a3; }

.lp-pricing__th-plan::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-style: solid;
  border-width: 10px 12px 0 12px;
  z-index: 2;
}
.lp-pricing__th-plan--a::after { border-color: #00a6a0 transparent transparent transparent; }
.lp-pricing__th-plan--b::after { border-color: #529b00 transparent transparent transparent; }
.lp-pricing__th-plan--c::after { border-color: #1e63a3 transparent transparent transparent; }

.lp-pricing__plan-name {
  display: block;
  font-size: 15px;
  font-weight: bold;
  background-color: rgba(0,0,0,0.15);
  padding: 4px 12px;
  border-radius: 50px;
  width: fit-content;
  margin: 0 auto 12px;
}

.lp-pricing__plan-price {
  display: block;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: bold;
}

.lp-pricing__unit {
  font-size: 14px;
  font-weight: normal;
  margin-left: 2px;
}

.lp-pricing__td-val {
  background-color: var(--color-bg-white);
  font-size: 16px;
}

.lp-pricing__td-val--text {
  font-weight: bold;
  color: var(--color-text-main);
}

.lp-pricing__amount {
  display: block;
  font-size: 24px;
  font-weight: bold;
  color: #00796b;
  margin-bottom: 6px;
}

.lp-pricing__amount-unit {
  font-size: 15px;
}

.lp-pricing__total-badge {
  display: inline-block;
  background-color: #e0f2f1;
  color: #00796b;
  font-size: 13px;
  font-weight: bold;
  padding: 4px 12px;
  border-radius: 4px;
}

.lp-pricing__mark {
  font-size: 42px;
  font-weight: bold;
  display: block;
}
.lp-pricing__mark--blue { color: #00a6a0; }
.lp-pricing__mark--green { color: #529b00; }
.lp-pricing__mark--navy { color: #1e63a3; }
.lp-pricing__mark--triangle { font-size: 22px; }
.lp-pricing__mark--dash { font-size: 22px; color: #aaaaaa; }

.lp-pricing__sup {
  font-size: 11px;
  vertical-align: super;
  font-weight: normal;
}

.lp-pricing__notes {
  max-width: 900px;
  margin: 24px auto 0;
}
.lp-pricing__notes .lp-text-note {
  margin-bottom: 8px;
  text-indent: -1.5em;
  padding-left: 1.5em;
}

/* ==========================================================================
   レスポンシブ（料金セクションのスマホ対応：縦並びカード形式に変形）
   ========================================================================== */
@media (max-width: 991px) {
  .lp-section-title {
    top: 15px;
  }
  
  .lp-pricing__title-badge {
    top: -95px;
    right: -10px;
    width: 80px;
  }

  /* 表示切り替え（PC用テーブルを隠し、SP用カードを出す） */
  .lp-pricing--pc-only { display: none !important; }
  .lp-pricing--sp-only { display: flex !important; }

  /* スマホ用カード全体のレイアウト */
  .lp-pricing__cards {
    flex-direction: column;
    gap: 24px;
    padding: 0;
    margin-bottom: 32px;
    width: 100%;
  }

  /* 各カードのスタイル */
  .lp-pricing__card {
    background-color: #ffffff;
    border: 1px solid #dddddd;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    width: 100%;
  }

  /* カード上部ヘッダー */
  .lp-pricing__card-header {
    padding: 16px;
    text-align: center;
    color: #ffffff;
  }
  
  .lp-pricing__card-header .lp-pricing__plan-name {
    margin: 0 auto 8px;
  }

  .lp-pricing__card-header .lp-pricing__plan-price {
    font-size: 26px;
  }

  /* カード内部のボディ */
  .lp-pricing__card-body {
    padding: 0 16px;
  }

  /* 各行の指定 */
  .lp-pricing__card-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid #eeeeee;
  }
  .lp-pricing__card-item:last-child {
    border-bottom: none;
  }

  /* 左側：項目ラベル */
  .lp-pricing__card-label {
    font-weight: bold;
    font-size: 14px;
    color: #333333;
    text-align: left;
    width: 45%;
    line-height: 1.4;
  }

  /* 右側：値エリア */
  .lp-pricing__card-val {
    text-align: right;
    width: 55%;
    font-size: 15px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
  }

  /* スマホ版での文字サイズ・余白の最適化 */
  .lp-pricing__card .lp-pricing__amount {
    font-size: 18px;
    margin-bottom: 2px;
    color: #00796b;
  }
  
  .lp-pricing__card .lp-pricing__total-badge {
    font-size: 11px;
    padding: 2px 8px;
  }

  .lp-pricing__card .lp-pricing__td-val--text {
    font-size: 14px;
    color: #333333;
  }

  .lp-pricing__card .lp-pricing__mark {
    font-size: 28px;
    line-height: 1;
    margin: 0;
  }
  .lp-pricing__card .lp-pricing__mark--triangle,
  .lp-pricing__card .lp-pricing__mark--dash {
    font-size: 18px;
  }
}

@media (max-width: 767px) {
  .lp-pricing__sub-lead-wrap {
    margin-top: 42px;
  }  
  
  .lp-pricing__sub-lead {
    margin-bottom: 32px;
  }
  
  .lp-pricing__points {
    gap: 12px;
    margin-bottom: 40px;
    padding: 0 8px;
  }
  
  .lp-pricing__point-item {
    gap: 16px;
  }
  
  .lp-pricing__point-text {
    font-size: 15px;
  }
}
/* ==========================================================================
   ご利用の流れ
   ========================================================================== */
.lp-flow {
  background-color: var(--color-bg-white);
}

/* オンラインで簡単にお申込いただけます */
.lp-flow__sub-lead {
  font-size: 18px;
  font-weight: bold;
  color: var(--color-text-light);
  text-align: center;
  margin-top: -32px; 
  margin-bottom: 56px;
}

/* カードと矢印を横並びにする親要素 */
.lp-flow__wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 64px;
}

/* 各STEPカードの個別スタイル */
.lp-flow__item {
  flex: 1;
  background-color: var(--color-bg-white);
  border: 1px solid #cccccc; 
  padding: 56px 20px 32px;   
  text-align: center;
  position: relative;        
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 440px;         
}

/* 左上：STEPラベルボックス */
.lp-flow__step-badge {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #fcc800; 
  color: #333333;
  font-size: 13px;
  font-weight: bold;
  padding: 6px 18px;
}

/* 各カードのタイトル */
.lp-flow__item-title {
  font-size: 16px;
  font-weight: bold;
  color: var(--color-text-main);
  line-height: 1.5;
  margin-top: 0;
  margin-bottom: 24px;
  min-height: 48px; 
  display: flex;
  align-items: center;
  justify-content: center;
}

.lp-flow__sup {
  font-size: 11px;
  vertical-align: super;
}

/* 中央：PC画像配置エリア */
.lp-flow__img-wrap {
  height: 130px; 
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

.lp-flow__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* 説明文 */
.lp-flow__item-desc {
  font-size: 14px;
  color: var(--color-text-light);
  line-height: 1.6;
  margin-top: 0;
  margin-bottom: 24px;
  flex-grow: 1; 
}

/* ボタンの配置ラッパー */
.lp-flow__btn-wrap {
  width: 100%;
  margin: 0;
}

/* カード内に収まるように共通ボタンを少しスマート（横幅100%）に調整 */
.lp-flow .lp-btn--sm {
  min-width: auto;
  width: 100%;
  padding: 12px 16px;
  font-size: 15px;
}

/* STEP3のボタンがない部分の高さ保持 */
.lp-flow__btn-wrap.is-empty {
  height: 47px; 
}

/* カード間の「＞」矢印のスタイル */
.lp-flow__arrow {
  font-size: 24px;
  font-weight: bold;
  color: #cccccc;
  flex-shrink: 0;
  user-select: none;
}

/* ==========================================================================
   ヤマトクレジットファイナンスビジネスポータルとは
   ========================================================================== */
.lp-flow__notes {
  max-width: 960px;
  margin: 0 auto 56px; /* フッターと離すために下に56pxの余白を追加 */
  background-color: var(--color-bg-gray); 
  padding: 24px 32px;
  border-radius: 8px;
}

.lp-flow__notes-title {
  font-weight: bold;
  color: var(--color-text-main) !important;
  margin-bottom: 8px;
}

.lp-flow__notes .lp-text-note {
  line-height: 1.7;
}

/* ==========================================================================
  「保証スタート！」の黄色い帯
   ========================================================================== */

/* ① 黄色い帯の背景全体 */
.lp-flow__footer {
  background-color: #fcc800; 
  padding: 40px 20px;        
  text-align: center;        
  position: relative;
  width: 100vw;              
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}

/* ② 上の白背景が黄色に食い込んでいる「下向きの三角（▼）」 */
.lp-flow__footer::before {
  content: "";
  position: absolute;
  top: 0; 
  left: 50%;
  transform: translateX(-50%);
  border-style: solid;
  border-width: 16px 24px 0 24px; 
  border-color: #ffffff transparent transparent transparent; 
  z-index: 1;
}

/* ③ 赤いタイトル文字のデザイン部分 */
.lp-flow__footer-title {
  font-size: clamp(22px, 3vw, 28px); 
  font-weight: bold;
  color: var(--color-primary);        
  margin-top: 12px;                  
  margin-bottom: 12px;
  letter-spacing: 0.05em;
}

/* ④ 説明テキスト部分 */
.lp-flow__footer-text {
  font-size: 16px;
  font-weight: bold;
  color: #333333;
  line-height: 1.8;
  margin: 0;
}

/* 強調文字用 */
.lp-flow__footer-em {
  color: var(--color-primary);
}

/* ==========================================================================
   レスポンシブ（スマホ対応）
   ========================================================================== */
@media (max-width: 991px) {
  /* スマホ・タブレット時はカードと矢印を縦並びにする */
  .lp-flow__wrapper {
    flex-direction: column;
    gap: 16px;
    margin-bottom: 48px;
  }
  
  .lp-flow__item {
    width: 100%;
    max-width: 420px; 
    min-height: auto; 
    padding: 48px 20px 24px;
  }
  
  .lp-flow__item-title {
    min-height: auto;
    margin-bottom: 16px;
  }
  
  .lp-flow__img-wrap {
    height: 110px;
    margin-bottom: 16px;
  }
  
  .lp-flow__item-desc {
    flex-grow: 0;
    margin-bottom: 20px;
  }
  
  /* STEP3の下の空スペースは非表示 */
  .lp-flow__btn-wrap.is-empty {
    display: none;
  }
  
  /* 「＞」矢印をスマホ時は「▼（下向き）」に回転 */
  .lp-flow__arrow {
    transform: rotate(90deg);
    margin: 8px 0;
  }
  
  .lp-flow__notes {
    padding: 20px;
    margin-bottom: 40px; /* 【修正】スマホ時もフッターと離すために余白を追加 */
  }
} 

@media (max-width: 767px) {
  .lp-flow__footer {
    padding: 32px 20px; 
  }
  
  .lp-flow__footer::before {
    border-width: 12px 16px 0 16px; 
  }
  
  .lp-flow__footer-title {
    margin-top: 8px;
  }
}

/* ==========================================================================
   未入金が発生したら
   ========================================================================== */
.lp-payout {
  background-color: var(--color-bg-white);
  /* 前のセクションの黄色い帯から、窮屈にならずに大見出しが始まるよう上部余白を確保 */
  padding-top: clamp(60px, 8vw, 100px); 
}

/* 保証金のご請求から〜 */
.lp-payout__sub-lead {
  font-size: 18px;
  font-weight: bold;
  color: var(--color-text-light);
  text-align: center;
  margin-top: -32px; /* タイトルの黄色の点線に近づける */
  margin-bottom: 56px;
}

/* 4つのカードと矢印を並べる親要素 */
.lp-payout__wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px; /* カード枚数が多いため、カード間の隙間をスマートに調整 */
}

/* 各ステップカードの個別スタイル */
.lp-payout__item {
  flex: 1;
  background-color: var(--color-bg-white);
  border: 1px solid #cccccc; /* ラフ案通りの細いグレーの枠線 */
  border-radius: 4px;        /* スライドに合わせてシャープめの軽い角丸に */
  padding: 32px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 380px;         /* PC表示で4つのカードの高さを完全に統一する指定 */
}

/* 上部：イラスト画像配置エリア */
.lp-payout__img-wrap {
  height: 120px; /* イラストの最大高を揃えて縦位置を美しく固定 */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

.lp-payout__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* カードのタイトル（見出し） */
.lp-payout__item-title {
  font-size: 18px;
  font-weight: bold;
  color: var(--color-text-main);
  margin-top: 0;
  margin-bottom: 16px;
  line-height: 1.4;
}

/* カード内の説明文 */
.lp-payout__item-desc {
  font-size: 14px;
  color: var(--color-text-light);
  line-height: 1.6;
  margin: 0;
  text-align: left; /* テキストを読みやすくするため左寄せ */
}

/* STEP2専用の小さなグレー注記テキスト */
.lp-payout__item-note {
  display: block;
  font-size: 12px;
  color: var(--color-text-light);
  margin-top: 8px;
  font-weight: normal;
}

/* カード間の「＞」矢印 */
.lp-payout__arrow {
  font-size: 20px;
  font-weight: bold;
  color: #cccccc;
  flex-shrink: 0;
  user-select: none;
}

/* ==========================================================================
   レスポンシブ（スマホ対応）
   ========================================================================== */
@media (max-width: 991px) {
  /* スマホ・タブレット時は縦並びに変更 */
  .lp-payout__wrapper {
    flex-direction: column;
    gap: 12px;
  }
  
  .lp-payout__item {
    width: 100%;
    max-width: 420px; /* 横に広がりすぎない上限 */
    min-height: auto; /* 縦並び時は高さを揃える必要がないため解除 */
    padding: 24px 20px;
  }
  
  .lp-payout__img-wrap {
    height: 100px;
    margin-bottom: 16px;
  }
  
  /* スマホ時は「＞」の向きを「▼」に変更 */
  .lp-payout__arrow {
    transform: rotate(90deg);
    margin: 4px 0;
  }
}


/* ==========================================================================
   フッターCTA（登録方法の選択）
   ========================================================================== */
/* 全体を囲む大きな白いカード型ボックス */
.lp-cta-foot__card {
  background-color: var(--color-bg-white);
  border: 1px solid #cccccc;
  border-radius: 32px;
  padding: 56px 48px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.03);
}

/* カード内のレイアウト（左右2カラム） */
.lp-cta-foot__body {
  display: flex;
  align-items: center;       /* イラストと右側コンテンツを上下中央揃え */
  justify-content: space-between;
  gap: 40px;
  margin-top: 40px;
}

/* 左側：イラストエリア */
.lp-cta-foot__img-wrap {
  flex: 0 0 320px;
  max-width: 320px;
  text-align: center;
}

.lp-cta-foot__img {
  width: 100%;
  height: auto;
  display: block;
}

/* 右側：コンテンツエリア */
.lp-cta-foot__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Point1 & Point2 コンテナ */
.lp-cta-foot__points {
  display: flex;
  gap: 80px;
  margin-bottom: 40px;
  width: 100%;
  justify-content: center;
}

.lp-cta-foot__point-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 右端が尖った黄色いリボン（中間CTAと完全に共通化） */
.lp-cta-foot__point-badge {
  background-color: #fcc800;
  color: #333333;
  font-size: 14px;
  font-weight: bold;
  padding: 6px 20px 6px 16px;
  margin-bottom: 16px;
  min-width: 100px;
  text-align: center;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%);
}

.lp-cta-foot__point-text {
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: bold;
  color: #333333;
  margin: 0;
  white-space: nowrap;
}

.lp-cta-foot__em {
  color: var(--color-primary);
  font-size: 1.05em;
  margin-left: 2px;
}

/* ==========================================================================
   【新規】2連ボタンエリアの専用レイアウト
   ========================================================================== */
.lp-cta-foot__btns-container {
  display: flex;
  gap: 24px; /* ボタン同士の横の隙間 */
  width: 100%;
  justify-content: center;
}

/* 各ボタンとリード文をセットにするボックス */
.lp-cta-foot__btn-box {
  flex: 1;
  max-width: 340px; /* ボタンが横に広がりすぎないよう上限を固定 */
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ボタンの上の小さな「＼〜／」リードテキスト */
.lp-cta-foot__btn-lead {
  font-size: 13px;
  font-weight: bold;
  color: var(--color-text-light);
  margin-top: 0;
  margin-bottom: 12px;
  text-align: center;
  white-space: nowrap;
}

/* ボタンの配置上書き（カード幅に追従させる） */
.lp-cta-foot__btn-wrap {
  margin: 0;
  width: 100%;
}

/* 共通の lp-btn クラスをベースに、2並び用に文字サイズとパディングを微調整 */
.lp-cta-foot .lp-btn {
  min-width: auto;
  width: 100%;
  font-size: 16px;
  padding: 14px 16px;
  line-height: 1.4;
  text-align: center;
}

/* ==========================================================================
   レスポンシブ（スマホ対応）
   ========================================================================== */
@media (max-width: 1199px) {
  /* 画面幅が少し狭いデスクトップ・タブレット環境ではボタンの文字を14pxにしてはみ出しを防ぐ */
  .lp-cta-foot .lp-btn {
    font-size: 14px;
    padding: 14px 8px;
  }
}

@media (max-width: 991px) {
  .lp-cta-foot__card {
    padding: 40px 24px;
  }
  
  /* 縦並びに切り替え */
  .lp-cta-foot__body {
    flex-direction: column;
    gap: 12px; /* ★32pxから12px（または0px）に狭めました */
  }
  
  .lp-cta-foot__img-wrap {
    max-width: 240px;
    margin-bottom: -155px; /* ★画像下の透明な余白を削るために追加しました */
  }
}

@media (max-width: 767px) {
  .lp-cta-foot__card {
    border-radius: 24px;
  }
  
  /* Point1 & Point2 をスマホ時は縦並びへ */
  .lp-cta-foot__points {
    flex-direction: column;
    gap: 24px;
    align-items: center;
    margin-bottom: 32px;
  }
  
  .lp-cta-foot__point-badge {
    margin-bottom: 8px;
  }

  /* 【重要】スマホ画面では、2つのボタンボックスも縦並びに切り替える */
  .lp-cta-foot__btns-container {
    flex-direction: column;
    gap: 32px; /* 上下のルートが混ざらないよう隙間を広めに */
    align-items: center;
  }
  
  .lp-cta-foot__btn-box {
    max-width: 100%;
    width: 100%;
  }

  .lp-cta-foot__btn-lead {
    font-size: 12px;
    margin-bottom: 8px;
  }

  /* スマホ時はボタンの文字サイズを15pxに戻して読みやすく */
  .lp-cta-foot .lp-btn {
    font-size: 15px;
    padding: 16px 16px;
  }
}

/* ==========================================================================
   第12セクション：よくあるご質問（FAQ）
   ========================================================================== */
.lp-faq__list {
  max-width: 840px; /* 読みやすいようにFAQの最大横幅を少しスマートに制限 */
  margin: 48px auto 0;
  display: flex;
  flex-direction: column;
  gap: 16px; /* 質問箱同士の隙間 */
}

/* 各FAQアイテム（外枠） */
.lp-faq__item {
  background-color: var(--color-bg-white);
  border: 1px solid #dcdcdc; /* 薄いグレーの枠線 */
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
}

/* ブラウザ標準の▼マークを消去 */
.lp-faq__item summary::-webkit-details-marker {
  display: none;
}
.lp-faq__item summary {
  list-style: none;
  outline: none;
  cursor: pointer;
}

/* 質問エリア（クリックできるヘッダー） */
.lp-faq__question {
  padding: 24px 32px;
  display: flex;
  align-items: center;
  gap: 16px;
  background-color: var(--color-bg-white);
  user-select: none;
  position: relative;
}

/* 質問のホバー時（軽く背景を明るくしてクリックできることを伝える） */
.lp-faq__question:hover {
  background-color: #fafafa;
}

/* Qの文字スタイル（アクセントとして目立たせる） */
.lp-faq__q-letter {
  font-size: 24px;
  font-weight: bold;
  color: var(--color-primary); /* オレンジ（#fc490d） */
  line-height: 1;
}

/* 質問のテキスト */
.lp-faq__q-text {
  font-size: 18px;
  font-weight: bold;
  color: var(--color-text-main);
  flex: 1;
  padding-right: 24px; /* 右側の＋アイコンと被らないための余白 */
  line-height: 1.5;
}

/* 右端の「＋」「ー」アイコンをCSSで描画 */
.lp-faq__icon {
  position: relative;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
/* 横線 */
.lp-faq__icon::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 0;
  width: 16px;
  height: 2px;
  background-color: #666666;
  transition: transform 0.3s ease;
}
/* 縦線（開いたときに回転して消えることで、マイナスに変形させる） */
.lp-faq__icon::after {
  content: "";
  position: absolute;
  top: 0;
  left: 7px;
  width: 2px;
  height: 16px;
  background-color: #666666;
  transition: transform 0.3s ease;
}

/* 【重要】開いている状態（open）の時のスタイル変更 */
.lp-faq__item[open] .lp-faq__question {
  border-bottom: 1px solid #eef2f4; /* 回答エリアとの境界線 */
  background-color: #fafafa;
}
/* 開いたときは縦線を90度回転させて横線と重ねる（＝マイナスにする） */
.lp-faq__item[open] .lp-faq__icon::after {
  transform: rotate(90deg);
}

/* 回答エリア（中身） */
.lp-faq__answer {
  padding: 32px;
  background-color: var(--color-bg-white);
  display: flex;
  gap: 16px;
  animation: lpFaqSlideIn 0.4s ease; /* 開いたときにフワッと出すアニメーション */
}

/* Aの文字スタイル */
.lp-faq__a-letter {
  font-size: 24px;
  font-weight: bold;
  color: #00796b; /* 安心感の深緑 */
  line-height: 1;
}

/* 回答のテキストコンテンツ */
.lp-faq__a-content {
  flex: 1;
}

.lp-faq__a-content .lp-text-body {
  margin-bottom: 12px;
  color: var(--color-text-main);
}
.lp-faq__a-content .lp-text-body:last-child {
  margin-bottom: 0;
}

/* 注記（※）の調整 */
.lp-faq__a-content .lp-text-note {
  margin-top: 12px;
  margin-bottom: 0;
  line-height: 1.6;
}

/* ==========================================================================
   質問3専用：審査時間のタイムラインスタイル
   ========================================================================== */
.lp-faq__timeline {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
  background-color: var(--color-bg-gray); /* タイムラインエリアを見やすくグレーに */
  padding: 16px 24px;
  border-radius: 6px;
  width: fit-content; /* 中身の幅に合わせる */
  min-width: 340px;
}

.lp-faq__timeline-row {
  display: flex;
  align-items: center;
  font-size: 16px;
  color: var(--color-text-main);
}

.lp-faq__timeline-label {
  font-weight: bold;
  width: 130px; /* ラベルの幅を固定して、矢印の位置をピシッと揃える */
}

.lp-faq__timeline-arrow {
  color: #999999;
  font-size: 12px;
  margin: 0 16px;
}

.lp-faq__timeline-value {
  font-weight: bold;
  color: #00796b; /* 日数を目立たせる */
}

/* 開閉時のフワッとしたフェードインアニメーション定義 */
@keyframes lpFaqSlideIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   レスポンシブ（スマホ対応）
   ========================================================================== */
@media (max-width: 767px) {
  .lp-faq__question {
    padding: 20px;
    gap: 12px;
  }
  
  .lp-faq__q-letter,
  .lp-faq__a-letter {
    font-size: 20px;
  }
  
  .lp-faq__q-text {
    font-size: 16px;
    padding-right: 12px;
  }
  
  .lp-faq__answer {
    padding: 20px;
    gap: 12px;
  }
  
  .lp-faq__timeline {
    padding: 12px 16px;
    min-width: 100%;
    width: 100%;
  }
  
  .lp-faq__timeline-row {
    font-size: 14px;
  }
  
  .lp-faq__timeline-label {
    width: 100px;
  }
  
  .lp-faq__timeline-arrow {
    margin: 0 8px;
  }
}

/* =======================================================
   フッターエリア（区切り線含む）
======================================================= */

/* 区切り線 */
.section-divider {
  height: 1px;
  background-color: #ddd;
  margin: 20px auto;
  max-width: 90%;
}

/* セクション全体 */
.footer-container {
  max-width: 1000px;
  margin: 50px auto 50px;
  padding: 0 30px;
  font-size: 14px !important;
  text-align: left;
}

/* 各項目全体 */
.footer-flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
}

/* 左右のブロック */
.footer-left,
.footer-right {
  flex: 1 1 120px;
  min-width: 260px;
}

/* ロゴ */
.footer__logo {
  display: inline-block;
  margin-bottom: 1rem;
}

/* 住所・連絡先 */
.footer__address {
  font-style: normal;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  margin-top: 0px;
}

.footer__address a {
  text-decoration: underline;
  color: #333;
}

/* ナビゲーション見出し */
.footer__navi-heading {
  font-weight: 700;
  font-size: 14px;
  color: #111827;
  margin-bottom: 1rem;
  line-height: 1.4;
}

/* ナビゲーションリスト */
.footer__navi {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer__navi li {
  margin-bottom: 0.4rem;
}

.footer__navi a {
  text-decoration: none;
  color: #333;
}

.footer__navi a:hover {
  color: #2563eb;
  text-decoration: underline;
}

/* コピーライト */
.copyright {
  text-align: center;
  font-size: 12px;
  color: #999;
  margin-top: 2rem;
}
.copyright a {
  color: inherit;
  text-decoration: none;
}
.copyright a:hover {
  text-decoration: underline;
}

/* レスポンシブ対応（スマホ・タブレット向け） */
@media (max-width: 768px) {
  .footer-flex {
    flex-direction: column;
    gap: 2rem;
  }

  .footer-left,
  .footer-right {
    padding-left: 0.5rem;
  }
}
/* 右下の「トップへ戻る」ボタン（丸）を非表示 */
#pagetop {
  display: none !important;
}