@charset "UTF-8";

/* ============================================
   共通リセット・ベース
============================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
}

body {
  font-family: 'Noto Serif JP', 'Shippori Mincho', serif;
  background-color: #faf6ec;
  color: #2a2a2a;
  -webkit-font-smoothing: antialiased;
}


/* ============================================
   セクション1：ファーストビュー
============================================ */
.hero {
  position: relative;
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  background-color: #f5ecd9;
  overflow: hidden;
  padding-top: 80px;
}

.hero-label {
  display: inline-block;
  font-family: 'Shippori Mincho', serif;
  font-size: 24px;
  font-weight: 500;
  color: #000000;
  background-color: #d1e5ec;     /* タイトルのaccent色に合わせた濃い赤 */
  letter-spacing: 0.15em;
  padding: 8px 24px;
  margin-bottom: 24px;
  border-radius: 20px;
}
/* 上部の薄いベージュ装飾バー */
.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(180deg, #f0e6cf 0%, #f5ecd9 100%);
}

/* ヒーロー内側：背景に人物画像（a.png）を配置 */
.hero-inner {
  position: relative;
  padding: 40px 40px 0;
  background-color: #ffffff;
  background-image: url('a.png');
  background-repeat: no-repeat;
  background-position: right top;

  border-radius: 0 0 60px 60px;
  min-height: 20px;
}

/* メインコピー */
.hero-copy {
  position: relative;
  z-index: 2;
  padding: 40px 30px;
  max-width: 60%;
}

.hero-title {
  font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
  font-weight: 600;
  font-size: 36px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: #2a2a2a;
}

.hero-title .accent {
  color: #8b1a1a;
  font-size: 52px;
}

.hero-title .line {
  display: block;
}

/* タイトルとサブタイトルの間の装飾ライン */
.hero-decorative-line {
  display: block;
  max-width: 360px;
  width: 100%;
  height: auto;
  margin: 30px 0;
}

.hero-subtitle {
  font-family: 'Noto Serif JP', serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.9;
  color: #741616;
  letter-spacing: 0.05em;
}

/* 旧hero-figureは非表示 */
.hero-figure {
  display: none;
}

/* ============================================
   3つの円形画像（feature-card_01〜03）
============================================ */
.circle-images {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 30px;
  padding: 0 40px 40px;
  margin-top: -30px;
}

.circle-img {
  width: 180px;
  height: 220px;
  background-color: #e6f7fc;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 25px;
  box-shadow: 0 4px 20px rgba(139, 117, 72, 0.15);
  overflow: hidden;
  position: relative;
}

.circle-img::before {
  content: none;
}

.circle-img img {
  position: static;
  width: 90px;
  height: 90px;
  object-fit: contain;
  border-radius: 0;
  margin-bottom: 12px;
}

.circle-text {
  font-family: 'Shippori Mincho', serif;
  font-size: 16px;
  font-weight: 600;
  color: #2a2a2a;
  text-align: center;
  line-height: 1.5;
  letter-spacing: 0.04em;
  padding: 0 10px;
  margin: 0;
}
.circle-text .small {
  display: block;
  background-color: #ffffff;       /* ← 白背景 */
  color: #4a4a4a;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 6px 10px;               /* ← バーの内側余白 */
  margin-top: 10px;
  margin-left: -10px;              /* ← 親のpadding分を打ち消して横幅いっぱいに */
  margin-right: -10px;
  border-radius: 40px;              /* ← 少し角を丸く（不要なら0に） */
  box-shadow: 0 1px 3px rgba(139, 117, 72, 0.1);
}

/* ============================================
   CTAエリア（cta-arrow + cta-icon）
============================================ */
.hero-cta {
  position: relative;
  z-index: 2;
  padding: 0 40px 30px;
  text-align: center;
}

.hero-cta-arrow {
  display: block;
  max-width: 460px;
  width: 90%;
  height: auto;
  margin: 0 auto 16px;
}

.hero-cta-button {
  display: block;
  max-width: 500px;
  width: 95%;
  height: auto;
  margin: 0 auto;
  transition: opacity 0.2s ease;
}

.hero-cta-button:hover {
  opacity: 0.85;
}

/* ============================================
   「探偵探し」見出しエリア
============================================ */
.hero-bottom {
  position: relative;
  padding: 40px 50px 60px;
  background-color: #faf6ec;
  text-align: left;
}

/* 装飾ライン */
.hero-bottom-line {
  display: block;
  max-width: 600px;
  width: 80%;
  height: auto;
  margin: 0 auto 0px;
}

/* 吹き出し */
.hero-bottom-balloon {
  position: relative;
  display: inline-block;
  margin-bottom: -60px;
}

.hero-bottom-balloon img {
  display: block;
  width: 260px;
  height: auto;
}

.hero-bottom-balloon-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
  font-family: 'Shippori Mincho', serif;
  font-size: 32px;
  font-weight: 600;
  color: #2a2a2a;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

.question-headline {
  font-family: 'Shippori Mincho', serif;
  font-size: 36px;
  font-weight: 500;
  color: #2a2a2a;
  letter-spacing: 0.06em;
  text-align: center;
  line-height: 1.4;
  padding-top: 10px;
}

/* 不要なものを非表示 */
.hero-section-label {
  display: none;
}
.speech-bubble {
  display: none;
}
 
/* ============================================
   セクション2：お悩みリスト
============================================ */
.worries {
  position: relative;
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  background-color: #faf6ec;
  padding: 40px 40px 60px;
}

.worries-card {
  background-color: #ffffff;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(139, 117, 72, 0.08);
  overflow: hidden;
}

/* 女性画像 */
.worries-figure {
  width: 100%;
  height: auto;
  background-color: transparent;
  border: none;
  display: block;
  position: relative;
}

.worries-figure::before {
  content: none;
}

.worries-figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ============================================
   セクション3：解決メッセージ
============================================ */
.solution {
  position: relative;
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  min-height: 880px;
  overflow: hidden;
  background-color: #ffffff;
}

/* 背景画像（forest-bg） */
.solution-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background-color: transparent;       /* プレースホルダー背景を削除 */
  border: none;                         /* 点線を削除 */
  display: block;
}

/* プレースホルダーの「背景画像」テキストを消す */
.solution-bg::before {
  content: none;
}

.solution-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* 右側の女性画像エリアは削除 */
.solution-figure {
  display: none;
}

/* コピーエリア */
.solution-copy {
  position: relative;
  z-index: 3;
  padding: 80px 50px 0;
}

.solution-title {
  font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
  font-weight: 500;
  font-size: 42px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: #2a2a2a;
  transform: skewX(10deg);          /* ← 横方向に-10度傾ける */
  transform-origin: left center;     /* ← 傾きの基点を左中央に */
  display: inline-block;             /* transformを効かせるため */
}

.solution-title .line {
  display: block;
}
.solution-title .lin{
  font-size: 52px;
} 
.solution-title .accent {
  color:  #a01818;
  font-size: 52px;
}
.solution-title-accent-img {
  display: inline-block;
  width: 30px;                      /* ← 30px → 20px に縮小 */
  height: auto;
  vertical-align: top;              /* ← middle → top に変更（上寄せ） */
  margin-left: 6px;
  margin-top: -4px;                 /* ← 負の値でさらに上にずらす */
}
.solution-text {
  margin-top: 30px;
  font-family: 'Noto Serif JP', serif;
  font-size: 24px;
  line-height: 1.8;
  color: #2a2a2a;
  letter-spacing: 0.04em;
}

/* ============================================
   特徴カード（画像に差し替え）
============================================ */
.features {
  position: relative;
  z-index: 3;
  margin: 80px 40px 60px;
  padding: 0;                           /* 内側余白を削除 */
  background-color: transparent;        /* 白背景を削除 */
  border-radius: 0;
  display: block;                        /* flexを解除 */
  gap: 0;
}

.features img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* 旧feature-item関連は使わないので非表示（HTMLから削除済みなので不要だが念のため） */
.feature-item,
.feature-icon,
.feature-title,
.feature-desc {
  display: none;
}
 
/* ============================================
   セクション4：探偵コンシェルジュとは？
============================================ */
.concierge {
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  padding: 80px 40px;
  background-color: #faf2dc;
}
 
.concierge-card {
  background-color: #ffffff;
  border-radius: 16px;
  padding: 50px 40px;
  box-shadow: 0 2px 12px rgba(139, 117, 72, 0.08);
}
 
.concierge-title {
  font-family: 'Shippori Mincho', serif;
  font-size: 40px;
  font-weight: 600;
  color: #2a2a2a;
  letter-spacing: 0.06em;
  text-align: center;
  margin-bottom: 40px;
}
 
.concierge-body {
  display: flex;
  gap: 30px;
  align-items: flex-start;
}/* ============================================
   セクション4：探偵コンシェルジュとは？
============================================ */
.concierge {
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  padding: 80px 40px;
  background-color: #faf2dc;
}

.concierge-card {
  background-color: #ffffff;
  border-radius: 16px;
  padding: 50px 40px;
  box-shadow: 0 2px 12px rgba(139, 117, 72, 0.08);
}

.concierge-title {
  font-family: 'Shippori Mincho', serif;
  font-size: 40px;
  font-weight: 600;
  color: #2a2a2a;
  letter-spacing: 0.06em;
  text-align: center;
  margin-bottom: 40px;
}

.concierge-body {
  display: flex;
  gap: 30px;
  align-items: flex-start;
}

.concierge-text {
  flex: 1;
  font-family: 'Noto Serif JP', serif;
  font-size: 24px;
  line-height: 1.9;
  color: #2a2a2a;
  letter-spacing: 0.04em;
}

.concierge-text .accent-red {
  color: #a82424;
  font-weight: 700;
}

/* エンブレム画像（左側に配置） */
.concierge-figure {
  flex-shrink: 0;
  width: 180px;                    /* ← サイズを画像に合わせて調整 */
  height: 180px;
  background-color: transparent;   /* プレースホルダー背景を削除 */
  border: none;                     /* 点線を削除 */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* プレースホルダーの「写真」テキストを消す */
.concierge-figure::before {
  content: none;
}

.concierge-figure img {
  width: 100%;
  height: 100%;
  object-fit: contain;             /* coverからcontainに変更（エンブレム全体を表示） */
  position: relative;
  z-index: 1;
}

/* 点線区切り画像 */
.concierge-divider {
  display: block;
  width: 100%;
  height: auto;
  margin: 20px 0 20px;
}

/* 区切り線下の一文 */
.concierge-footer-text {
  font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.7;
  color: #2a2a2a;
  letter-spacing: 0.06em;
  text-align: center;
  margin: 0;
}
 /* ============================================
   セクション5：サービスの流れ
============================================ */
.flow {
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  padding: 0px 50px 80px;
  background-color: #faf2dc;
}
 
/* タイトル全体のラッパー */
.flow-title {
  position: relative;
  width: 400px;
  height: 80px;
  margin: 0 auto 10px;
  background-color: transparent;     /* プレースホルダーの背景色を削除 */
  border: none;                       /* 点線枠を削除 */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* プレースホルダーの「サービスの流れタイトル画像」テキストを消す */
.flow-title::before {
  content: none;
}

/* 一番後ろ：水色の長方形 */
.flow-title-bg-blue {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #cfe4ec;
  z-index: 1;
}

/* 真ん中：白の長方形（一回り小さい） */
.flow-title-bg-white {
  position: absolute;
  top: 6px;
  left: 6px;
  right: 6px;
  bottom: 6px;
  background-color: #ffffff;
  z-index: 2;
}

/* 一番手前：テキスト */
.flow-title-text {
  position: relative;
  z-index: 3;
  font-family: 'Shippori Mincho', serif;
  font-size: 36px;
  font-weight: 600;
  color: #2a2a2a;
  letter-spacing: 0.1em;
}
 
.flow-title img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: relative;
  z-index: 1;
}
 
/* 各ステップのカード */
.flow-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
 
.flow-step {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 40px 40px 50px;
  box-shadow: 0 2px 12px rgba(139, 117, 72, 0.08);
}
 
/* ステップ上部：番号＋タイトル＋リボン */
.flow-step-head {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 30px;
}
 
.flow-num {
  flex-shrink: 0;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background-color: #d4a882;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Shippori Mincho', serif;
  font-size: 44px;
  font-weight: 600;
  color: #5a3a2a;
  line-height: 1;
  letter-spacing: 0.02em;
}
 
.flow-heading {
  flex: 1;
  position: relative;
}
 
.flow-step-title {
  font-family: 'Shippori Mincho', serif;
  font-size: 32px;
  font-weight: 600;
  color: #2a2a2a;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}
 
/* タイトル下のリボン装飾画像 */
.flow-ribbon {
  display: block;
  width: 100%;
  height: auto;                       /* 14px固定から auto に */
  background-color: transparent;      /* プレースホルダー背景を削除 */
  border: none;                        /* 点線枠を削除 */
  position: relative;
}

/* プレースホルダーの「リボン画像」テキストを消す */
.flow-ribbon::before {
  content: none;
}

.flow-ribbon img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  position: relative;
  z-index: 1;
}
 
/* ステップ下部：アイコン＋説明文 */
.flow-step-body {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}
 
.flow-icon {
  flex-shrink: 0;
  width: 110px;
  height: 110px;
  background-color: transparent;    /* プレースホルダー背景を削除 */
  border: none;                      /* 点線枠を削除 */
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

 
/* プレースホルダーの「アイコン」テキストを消す */
.flow-icon::before {
  content: none;
}
.flow-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: relative;
  z-index: 1;
}
 
.flow-desc {
  flex: 1;
  font-family: 'Noto Serif JP', serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.8;
  color: #3a2a2a;
  letter-spacing: 0.04em;
  padding-top: 6px;
}

/* ステップ間をつなぐ縦の点線画像 */
.flow-connector {
  display: block;
  width: 15px;                    /* 画像の幅（お好みで調整） */
  height: auto;
  margin: 20px auto -10px;        /* 上・左右中央寄せ・下のマージンでカード間隔と調整 */
}
/* ============================================
   セクション6：従来の探偵社探しとの違い
============================================ */
.compare {
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  padding: 60px 50px 80px;
  background-color: #faf2dc;
}

/* タイトル画像 */
.compare-title {
  width: 100%;
  max-width: 560px;
  height: auto;
  margin: 0 auto 40px;
  background-color: transparent;
  border: none;
  display: block;
  position: relative;
}

.compare-title::before {
  content: none;
}

.compare-title img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  position: relative;
  z-index: 1;
}

/* リード文 */
.compare-lead {
  font-family: 'Shippori Mincho', serif;
  font-size: 22px;
  color: #2a2a2a;
  text-align: center;
  letter-spacing: 0.04em;
  margin-bottom: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.compare-lead-icon {
  display: inline-block;
  width: 32px;
  height: 32px;
  background-color: transparent;
  border: none;
  border-radius: 0;
  vertical-align: middle;
  position: relative;
}

.compare-lead-icon::before {
  content: none;
}

.compare-lead-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ノート風カード共通 */
.note-card {
  position: relative;
  width: 100%;
  margin-bottom: 30px;
}

/* ノート背景（共通） */
.note-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  border: none;
  border-radius: 4px;
  display: block;
  z-index: 0;
}

.note-bg::before {
  content: none;
}

.note-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 1;
  border-radius: 4px;
}

/* ノート内側コンテンツ（共通） */
.note-inner {
  position: relative;
  z-index: 2;
  padding: 40px 40px 30px;
}

.note-title {
  font-family: 'Shippori Mincho', serif;
  font-size: 30px;
  font-weight: 600;
  color: #2a2a2a;
  letter-spacing: 0.06em;
  text-align: center;
  margin-bottom: 30px;
  padding-bottom: 8px;
  border-bottom: 2px solid #2a2a2a;
  display: block;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.note-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: center;
}

.note-item {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  max-width: 420px;
  padding: 6px 0;
}

/* 各itemの間の点線画像 */
.note-divider {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  margin: 0;
}

/* アイコン共通 */
.note-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: inline-block;
  position: relative;
}

/* 台風アイコン（画像差し替え） */
.note-icon--storm {
  width: 36px;
  height: 36px;
  background-color: transparent;
  border: none;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.note-icon--storm::before {
  content: none;
}

.note-icon--storm img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* チェックアイコン（ピンクの四角枠＋チェック） */
.note-icon--check {
  width: 38px;
  height: 38px;
  border: 2px solid #f0a5b0;
  border-radius: 6px;
  background-color: transparent;
}

.note-icon--check::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-55%, -60%) rotate(-45deg);
  width: 20px;
  height: 10px;
  border-left: 3px solid #f0a5b0;
  border-bottom: 3px solid #f0a5b0;
}

.note-text {
  font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
  font-size: 22px;
  font-weight: 500;
  color: #2a2a2a;
  letter-spacing: 0.04em;
  line-height: 1.5;
}

/* まとめ文 */
.note-summary {
  font-family: 'Shippori Mincho', serif;
  font-size: 22px;
  font-weight: 500;
  color: #2a2a2a;
  text-align: center;
  letter-spacing: 0.05em;
  line-height: 1.7;
  margin-top: 40px;
}

/* 下部の人物イラスト */
.note-illust-wrap {
  margin-top: 30px;
  display: flex;
  gap: 16px;
}

.note-illust {
  flex: 1;
  height: 200px;
  background-color: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.note-illust::before {
  content: none;
}

.note-illust img {
  width: 80%;
  height: 100%;
  object-fit: contain;
  position: relative;
  z-index: 1;
}

/* 中間の矢印 */
.compare-arrow {
  width: 0;
  height: 0;
  margin: 0 auto 30px;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  border-top: 50px solid #f4d4b8;
}

/* ============================================
   個人で探す場合（白背景＋影付きカード）
============================================ */
.note-card--alone {
  min-height: 0;
}

.note-card--alone .note-inner {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(139, 117, 72, 0.15);
  padding: 50px 40px 40px;
}

/* ============================================
   クロミルリサーチと探す場合（背景画像入りカード）
============================================ */
.note-card--concierge {
  min-height: 0;
}

.note-card--concierge .note-bg {
  position: relative;
  width: 100%;
  height: auto;
}

.note-card--concierge .note-bg img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
}

.note-card--concierge .note-inner {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 60px 50px 200px;
  background-color: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
}
/* ============================================
   セクション7：探偵コンシェルジュが選ばれる理由
============================================ */
.reason {
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  padding: 60px 50px 80px;
  background-color: #ffffff;
}
 
/* タイトル */
/* タイトル */
.reason-title {
  font-family: 'Shippori Mincho', serif;
  font-size: 32px;
  font-weight: 600;
  color: #2a2a2a;
  letter-spacing: 0.06em;
  line-height: 1.5;
  text-align: center;
  margin: 0 auto 60px;
  padding: 18px 60px;
  background-color: #ffffff;
  position: relative;
  display: table;
  box-shadow: 12px 8px 12px 8px #cfe4ec;
}
 
.reason-title .line {
  display: block;
}
 
/* 中央寄せ用の親 */
.reason > .reason-title {
  display: table;
  margin-left: auto;
  margin-right: auto;
}
 
/* 理由カードのリスト */
.reason-list {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
 
.reason-card {
  position: relative;
  width: 100%;
  min-height: 220px;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(139, 117, 72, 0.1);
}
 
/* 各カードの背景画像（プレースホルダー） */
.reason-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;    /* プレースホルダー背景を削除 */
  border: none;       /* 点線枠を削除 */
  z-index: 0;
  display: block;                    /* flex設定を解除 */
  padding: 0;
}
 
.reason-bg::before {
  content: none;
}

 
.reason-bg img {
  width: 130%;
  height: 130%;
  object-fit: contain;
  position: relative;
  z-index: 1;
  transform: translateX(120px);     /* ← 右に20px移動 */
}
 
.reason-inner {
  position: relative;
  z-index: 2;
  padding: 35px 40px;
  width: 60%;
}
 
.reason-card-title {
  font-family: 'Shippori Mincho', serif;
  font-size: 26px;
  font-weight: 600;
  color: #8b1a1a;
  letter-spacing: 0.04em;
  margin-bottom: 20px;
  line-height: 1.4;
}
 
.reason-card-text {
  font-family: 'Noto Serif JP', serif;
  font-size: 18px;
  line-height: 1.9;
  color: #2a2a2a;
  letter-spacing: 0.04em;
}
 
 
 
/* ============================================
   セクション8：無料相談CTA
============================================ */
.cta {
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  padding: 60px 50px 80px;
  background-color: #faf2dc;
}

.cta-card {
  position: relative;
  background-color: transparent;    /* 背景色を削除（背景画像に） */
  background-image: url('kuromiru-research_lp_cta_bg.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-radius: 48px;
  padding: 50px 40px;
  box-shadow: 0 2px 12px rgba(139, 117, 72, 0.08);
  overflow: hidden;
}

/* 右側の女性画像 */
.cta-figure {
  position: absolute;
  top: 30px;
  right: 20px;
  width: 200px;
  height: 280px;
  background-color: transparent;    /* プレースホルダー背景を削除 */
  border: none;                      /* 点線枠を削除 */
  display: block;
}

/* プレースホルダーの「女性画像」テキストを消す */
.cta-figure::before {
  content: none;
}

.cta-figure img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom right;
  position: relative;
  z-index: 1;
}

.cta-copy {
  position: relative;
  z-index: 2;
  width: 65%;
}

/* リード文「一人で悩まなくて大丈夫です」 */
.cta-lead {
  font-family: 'Shippori Mincho', serif;
  font-size: 20px;
  color: #2a2a2a;
  letter-spacing: 0.04em;
  margin-bottom: 12px;
}

/* リード文下の装飾ライン画像 */
.cta-lead-image {
  width: 100%;
  max-width: 280px;
  height: auto;                      /* 40px固定からautoに */
  margin-bottom: 20px;
  background-color: transparent;    /* プレースホルダー背景を削除 */
  border: none;                      /* 点線枠を削除 */
  display: block;
  position: relative;
}

/* プレースホルダーの「リード文下画像」テキストを消す */
.cta-lead-image::before {
  content: none;
}

.cta-lead-image img {
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: left center;
  position: relative;
  z-index: 1;
  display: block;
}

.cta-title {
  font-family: 'Shippori Mincho', serif;
  font-size: 32px;
  font-weight: 600;
  color: #2a2a2a;
  letter-spacing: 0.04em;
  margin-bottom: 16px;
  border-bottom: 1px solid #2a2a2a;
  padding-bottom: 6px;
  display: inline-block;
}

.cta-text {
  font-family: 'Noto Serif JP', serif;
  font-size: 16px;
  line-height: 1.7;
  color: #2a2a2a;
  letter-spacing: 0.04em;
}

/* CTAボタン（画像に差し替え） */
.cta-button {
  display: block;
  width: 100%;
  max-width: 520px;
  margin: 40px auto 0;
  padding: 0;                        /* 余白を削除 */
  background-color: transparent;    /* 背景色を削除 */
  border: none;                      /* 枠線を削除 */
  border-radius: 0;
  position: relative;
  z-index: 2;
  transition: opacity 0.2s ease;
}

.cta-button:hover {
  background-color: transparent;    /* hover時の背景色変化を解除 */
  opacity: 0.85;
}

.cta-button img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 30px;
}
 
/* ============================================
   セクション9：会社概要
============================================ */
.company {
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  padding: 0 50px 80px;
  background-color: #faf2dc;
}

.company-card {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 60px 40px;
  box-shadow: 0 2px 12px rgba(139, 117, 72, 0.08);
}

.company-title {
  font-family: 'Shippori Mincho', serif;
  font-size: 28px;
  font-weight: 500;
  color: #2a2a2a;
  letter-spacing: 0.06em;
  text-align: center;
  margin-bottom: 16px;
}

/* タイトル下の装飾ライン */
.company-line {
  display: block;
  max-width: 300px;
  width: 70%;
  height: auto;
  margin: 0 auto 40px;
}

/* 会社情報テーブル */
.company-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Noto Serif JP', serif;
}

.company-table th,
.company-table td {
  border: 1px solid #dce8ec;
  padding: 18px 20px;
  text-align: left;
  vertical-align: middle;
  line-height: 1.7;
  letter-spacing: 0.04em;
}

/* 左カラム（項目名）：薄い水色 */
.company-table th {
  width: 28%;
  background-color: #eef5f7;
  font-size: 16px;
  font-weight: 600;
  color: #2a2a2a;
  white-space: nowrap;
}

/* 右カラム（内容）：白 */
.company-table td {
  background-color: #ffffff;
  font-size: 16px;
  font-weight: 400;
  color: #2a2a2a;
}