/* ========================================
   S05 選ばれる3つの理由（背景=全面画像予定・互い違いカード）
   ======================================== */

.reason {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  padding: 60px 0 40px;
  /* 背景（2026-08-11 Figma 2989:889）：#DEEEF2 → #FFFFFF の縦グラデ1層のみ
     ※旧「白ベタ＋水面写真35%＋青グラデ」の3層構成は廃止（背景RECTの塗りもFigma上で削除済み） */
  background: linear-gradient(180deg, #EAF5FC 0%, #FFFFFF 100%); /* 2026-08-13 Figma再取得（旧#DEEEF2） */
  overflow: hidden;
  text-align: center;
}
.reason > * { position: relative; z-index: 1; }

.reason-heading { display: flex; flex-direction: column; align-items: center; gap: 16px; } /* 統一 2026-07-31 */
/* バッジ（2026-08-11 Figma 2989:892：16px・角丸20・pad4/16）
   2026-08-17ユーザー指定：紺1px枠を削除（他セクションのバッジと同じ枠なしに統一） */
.reason-badge {
  padding: 4px 16px;
  border-radius: 20px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--c-navy);
}
.reason-badge .em { color: var(--c-coral); } /* 「安心！」 */
.reason-title {
  color: var(--c-primary); /* 2026-08-13 Figma再取得：#1E7FC2（旧#43AEBC） */
  font-size: 36px;
  font-weight: 900;
  line-height: 1; /* 2026-08-01：他タイトルと統一（旧1.25） */
}
.reason-title .num {
  font-family: var(--font-en);
  font-size: 54px;
  font-weight: 700;
  letter-spacing: 2.4px;
  vertical-align: -4px;
  padding: 0 2px;
  line-height: 0; /* 2026-08-01：54pxの「3」が行ボックスを押し広げないように（字面は行からはみ出してよい） */
}

.reason-cards {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;
  text-align: left;
}
.reason-card-wrap { display: flex; width: 100%; }
/* Figma 2526:800（2026-07-31・理由1の値を3枚に統一／旧30） */
.reason-card-wrap--left { padding-right: 32px; }
.reason-card-wrap--right { padding-left: 32px; }

.reason-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 16px; /* Figma 2526:801（2026-07-31・旧10） */
  flex: 1;
  min-width: 0;
  padding: 32px 32px 16px; /* Figma 2526:801（旧30 30 20） */
  background: #fff;
  box-shadow: var(--shadow-card); /* 2026-08-12：シャドウ統一（値は元から一致） */
}
.reason-card-wrap--left .reason-card { border-radius: 0 60px 4px 4px; }
.reason-card-wrap--right .reason-card { border-radius: 60px 0 4px 4px; }

.reason-card-number {
  position: absolute;
  top: -24px; /* 2026-08-01：見出し24px化で02の1行目(240px)と重なるため上へ退避（旧-11） */
  right: 16px;
  z-index: 3;
  font-family: var(--font-en);
  /* 2026-08-13 Figma再取得：64px・Medium・#1E7FC2・白フチ（旧#43AEBC） */
  font-size: 64px;
  font-weight: 500;
  line-height: 0.875; /* Figma lh56px ÷ 64px */
  color: var(--c-primary);
  -webkit-text-stroke: 12px #fff; /* Figma stroke #FFFFFF 6px OUTSIDE＝CSSは中央基準のため2倍 */
  paint-order: stroke fill;
}
/* Figma実測：カード右端から16px（3枚とも同値・2026-07-31） */

.reason-card-title {
  font-size: 24px; /* 2026-08-01ユーザー指定：強調含め24pxに統一（旧22＋強調28/数字32の混在） */
  font-weight: 700;
  line-height: 33px; /* Figma lh33px固定 */
  color: var(--c-navy);
  margin-bottom: -8px; /* 2026-08-02：見出し↔本文だけ詰める（カードのgap16→実質8px） */
}
/* 2026-08-02ユーザー指定：1行ずつskew＋左揃え。
   ⚠️h3全体に1つのtransformをかけると、2行分の高さの中心を基準に傾くため
     1行目と2行目で逆方向にズレる「階段状」の左端になっていた（実際に発生・スクショで確認）。
   → 各行を独立したブロックにして行ごとにtransformをかけると、
     各行が自分自身の高さを基準に傾くため左端が揃う */
.reason-card-title-row { display: block; transform: skewX(-8deg); }
.reason-card-title .em { color: var(--c-coral); } /* コーラルトークン参照（2026-08-12に#FF6B5Cへ戻し） */
.reason-card-body {
  font-size: 14px;
  font-weight: 700;
  line-height: 21px; /* 2026-08-11 Figma実測：3枚とも21px固定（旧1.5倍＝21px相当だが12pxカードでズレていた） */
  color: var(--c-navy);
}
/* 2026-08-11ユーザー指定：3枚とも14pxに統一（FigmaはカードごとにX2・3=12pxだが実装は14px統一）
   ※行高は .reason-card-body の21px固定を継承 */

.reason-card-img {
  width: 100%;
  height: 200px;
  border-radius: 4px;
  object-fit: cover;
}