/* =========================================================
   万代ホーム 鹿児島｜「担当者に相談する」セクション
   クラス名は sd- 接頭辞。既存LPのCSSとは衝突しません。
   色・書体は既存LP（Zen Kaku Gothic New / #FABB05 / #FFFDF9）に合わせています。
   ========================================================= */
.sd-scope{
  --sd-card:#FFFDF9; --sd-bg:#F7F5F0; --sd-ink:#1E1E1E; --sd-muted:#6E6656; --sd-faint:#9A9184;
  --sd-amber:#FABB05; --sd-amber-soft:#FDF3D4; --sd-inner:#F5F2EB; --sd-ph:#A9A399;
  --sd-line:rgba(30,30,30,.12);
}
.sd-sec,.sd-after,.sd-layer{
  font-family:"Zen Kaku Gothic New",-apple-system,"Hiragino Kaku Gothic ProN",sans-serif;
  color:var(--sd-ink,#1E1E1E);
}
.sd-sec *,.sd-after *,.sd-layer *{box-sizing:border-box}
html{scroll-behavior:smooth}
#soudan-cta{scroll-margin-top:24px}

/* ---------- セクション本体（3項目の直下に置く） ----------
   ※サイズの切り替えは「画面幅」ではなく「このカードの幅」を基準にしています。
     LPの右カラムは画面が広くても 390px 前後しかないためです。            */
.sd-sec{
  position:relative;z-index:2;container-type:inline-size;
  text-align:center;margin:14px;background:#FFFDF9;border-radius:24px;padding:26px 18px 22px;
  box-shadow:0 10px 24px -18px rgba(30,30,30,.5);border:1px solid rgba(30,30,30,.06)
}
/* 直後に黄色い円（Lifestyle）が来るLPでは、重ならないように下を空ける
   （カードを30px上へずらし、その分だけ下の余白を広げています） */
.sd-sec--before-curve{margin-top:-16px;margin-bottom:144px}
.sd-sec__h{margin:0;font-size:21px;font-weight:900;line-height:1.45;letter-spacing:.01em}
.sd-sec__sub{margin:10px 0 0;font-size:13px;color:#57503F;line-height:1.7}
.sd-sec__body{
  --sd-padtop:20px;
  margin-top:16px;background:#F5F2EB;border-radius:18px;padding:var(--sd-padtop) 12px 0;overflow:hidden;
  display:flex;gap:10px;align-items:flex-end;justify-content:center;text-align:left
}
.sd-checks{
  list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:15px;flex:0 0 auto;
  align-self:center;margin-top:calc(var(--sd-padtop) * -1)
}
.sd-checks li{display:flex;gap:9px;align-items:center;font-size:14px;font-weight:700;white-space:nowrap}
.sd-checks svg{flex:0 0 auto;width:20px;height:20px}
.sd-portrait{flex:0 0 auto;display:block;height:112px;width:auto;margin-bottom:-1px;object-fit:contain;object-position:bottom}
/* カード幅にゆとりがあるときだけ、ひとまわり大きく */
@container (min-width:430px){
  .sd-sec__body{--sd-padtop:26px;gap:22px;padding-left:16px;padding-right:16px}
  .sd-sec__body .sd-checks{gap:17px}
  .sd-sec__body .sd-checks li{font-size:15.5px}
  .sd-sec__body .sd-checks svg{width:22px;height:22px}
  .sd-sec__body .sd-portrait{height:150px}
}
/* コンテナクエリが使えない古いブラウザ向け：狭い方の見た目のまま崩れないようにする */
@supports not (container-type:inline-size){
  .sd-sec__body{gap:10px}
}

/* ---------- ボタン ---------- */
.sd-btn{
  display:flex;align-items:center;justify-content:center;gap:9px;position:relative;width:100%;
  padding:17px 20px;border-radius:999px;border:2px solid #FABB05;background:#FFFDF9;color:#1E1E1E;
  font-family:inherit;font-weight:900;font-size:16px;cursor:pointer;text-decoration:none
}
.sd-btn:hover{background:#FDF3D4}
.sd-btn:focus-visible{outline:3px solid rgba(250,187,5,.55);outline-offset:3px}
.sd-btn .sd-chev{position:absolute;right:20px;color:#FABB05}
.sd-sec .sd-btn{margin-top:15px}
/* 左固定CTA／テキストリンク用 */
.sd-btn--text{
  border:0;background:none;padding:6px 4px;font-size:13px;font-weight:700;color:#6E6656;justify-content:flex-start
}
.sd-btn--text:hover{background:none;color:#1E1E1E}

/* ---------- 予約フォーム直下のCTA ---------- */
.sd-after{padding:30px 20px 34px}
.sd-after__t{margin:0 0 11px;font-size:13px;font-weight:700;color:#57503F;text-align:center}