/* =========================================================
   FEATURES.CSS（必要最小限・完全版）
   ※ 共通ヘッダー/フッターやフォント等は base.css に委譲
   ========================================================= */

/* ---------- Tokens ---------- */
:root{
  --brand:#DF8D30; /* くすみオレンジ */
  --base:#f5f3ec;  /* 生成り（背景） */
  --ink:#1f2937;   /* 本文 */
  --navy:#162e66;  /* 見出し */
}

/* ---------- Base ---------- */
*{ box-sizing:border-box }
html,body{ margin:0; padding:0 }
body{
  background:var(--base);
  color:var(--ink);
  font-family:"Montserrat","Noto Sans JP",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  letter-spacing:.02em;
}

/* Utilities（本ページで使うものだけ） */
.mt-10{ margin-top:2.5rem }
.pb-16{ padding-bottom:4rem }

/* ---------- SECTION 共通（このページで使用） ---------- */
.sec{
  position:relative; isolation:isolate; overflow:hidden;
  background:#f7f6f2;
  --slope-top:18%; --slope-h:38%;
}
.sec::after{
  content:""; position:absolute; z-index:0; pointer-events:none;
  width:140vw; height:var(--slope-h); left:-20vw; top:var(--slope-top);
  background:rgba(0,0,0,.045); transform:skewY(-8deg);
}
.sec::before{
  content:attr(data-watermark);
  position:absolute; inset:0; z-index:0; display:grid; place-items:center;
  font-family:'Montserrat',sans-serif; font-weight:700; letter-spacing:.005em;
  color:#0f1a36; opacity:.035; text-transform:capitalize;
  font-size:clamp(120px,20vw,360px);
}
.sec__inner{ position:relative; z-index:1; max-width:1200px; margin:0 auto; padding:6rem 16px 3rem }
.sec__lead{
  margin-top:1.8rem; text-align:center; color:#142a5a; line-height:1.8;
  font-family:'Montserrat',sans-serif; font-weight:400; font-size:clamp(14px,1.2vw,18px);
}

/* ---------- HERO タイトル（Features 見出し・画像） ---------- */
#features-head .sec__inner:first-of-type{ padding-top: clamp(7px, 2vw, 15px); padding-bottom:0 }
#features-head .sec__inner.pb-16{ padding-bottom:0 }
.sec__en{
  position:relative; display:inline-block; font-family:'Montserrat',sans-serif;
  font-weight:700; color:var(--navy); font-size:100px;
}
.sec__en::before{
  content:""; position:absolute; left:0; top:-20px;
  width:60px; height:6px; background:#FFD84D; border-radius:3px;
}

/* 横長写真（左角丸／右端フルブリード） */
.svc-heroMedia{
  border-radius:90px 0 0 90px; overflow:hidden;
  margin-right:calc(-1 * (100vw - 100%)); width:calc(100% + (100vw - 100%));
}
.svc-heroMedia img{
  display:block; width:100%;
  height:clamp(360px,30vw,520px);
  object-fit:cover; object-position:right center;
}

/* ---------- INTRO：テキスト＋イラスト ---------- */
.ft-grid{
  display:grid; grid-template-columns: 1.15fr .85fr;
  gap: clamp(20px,4vw,48px); align-items:center;
}
@media (max-width: 960px){ .ft-grid{ grid-template-columns:1fr } }

.ft-h3{
  margin:0 0 12px; color:var(--navy);
  font-family:"Montserrat","Noto Sans JP",system-ui,sans-serif;
  font-weight:700; letter-spacing:.01em; font-size: clamp(22px,3.2vw,28px);
}
.ft-text p{ line-height:1.65; margin:0 0 1em; color:var(--navy) }

#ft-intro .ft-h3{ position:relative; display:inline-block; z-index:0 }
#ft-intro .ft-h3::after{
  content:""; position:absolute; left:0; right:0; bottom:4px;
  height:14px; background:#d8eef6; border-radius:0; z-index:-1;
}

/* 説明イラストをやや縮小 */
.ft-illust img{ width:80%; max-width:400px; display:block; margin:0 auto }

/* ---------- 4つの丸（フロー） ---------- */
.bubbles{
  --size: clamp(120px, 16vw, 180px);
  --overlap: clamp(18px, 3vw, 40px);
  display:flex; justify-content:center; align-items:center;
  gap:0; margin: clamp(24px,5vw,40px) 0; list-style:none; padding:0;
}
.bubble{ width:var(--size) }
.bubble:not(:first-child){ margin-left: calc(var(--overlap) * -1) }
.bubble img{
  display:block; width:100%; height:auto; border-radius:999px;
  box-shadow: 0 12px 26px rgba(0,0,0,.10);
}
@media (max-width: 640px){
  .bubbles{ flex-wrap:wrap }
  .bubble{ width: clamp(120px, 42vw, 180px); margin-left:0 !important }
  .bubble:nth-child(odd){ margin-right: clamp(-12px, -2.4vw, -8px) }
}

/* CTA（アウトライン・ネイビー） */
.ft-cta{ text-align:center; margin-top: clamp(10px,3vw,22px) }
.btn-outline-navy{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  min-width: clamp(240px, 28vw, 420px);
  padding:.9rem clamp(28px, 3vw, 40px);
  border:2px solid var(--navy); color:var(--navy); text-decoration:none; font-weight:700;
  border-radius:999px; transition: background .2s, color .2s, transform .02s;
}
.btn-outline-navy:hover{ background:var(--navy); color:#fff }
.btn-outline-navy:active{ transform: translateY(1px) }
.btn-outline-navy::after{ content:"\203A"; font-weight:700; line-height:1; transform:translateX(0); transition:transform .15s ease }
.btn-outline-navy:hover::after{ transform:translateX(4px) }

/* ---------- 3つの特徴カード ---------- */
.ft-cards{
  margin-top: clamp(16px, 3.6vw, 28px);
  display:grid; gap: clamp(16px,3vw,28px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width:980px){ .ft-cards{ grid-template-columns:1fr } }

.ft-card{ padding: clamp(16px,2.4vw,24px); background:transparent; border:none; box-shadow:none }
.ft-card__img{ display:block; width:100%; height:auto; border-radius:12px; margin-bottom:8px }
.ft-card__title{
  margin: 12px auto 10px; color:var(--navy);
  font-weight:700; line-height:1.35; font-size: clamp(18px,2.4vw,22px); text-align:center;
}
.ft-card__desc{
  margin:0; line-height:1.6; letter-spacing:.01em;
  max-width:38ch;
}

/* =========================================================
   大きな比較パネル（見本準拠）
   ・内側プレートのみ水色（上左右角丸）
   ・タイトル中央／下線なし
   ・左丸=濃紺グレー、右丸=白、中央で少し重ね
   ・SPは縦積み
   ========================================================= */
#ft-diff{ background:transparent; padding:0 }
#ft-diff .ft-diff__inner{ max-width:1200px; margin:0 auto; padding:0 16px }

#ft-diff .diff-plate{
  background:#cfe7f3;
  border-radius:28px 28px 0 0;
  padding:clamp(20px,3vw,28px) clamp(16px,3vw,24px) clamp(32px,5vw,48px);
}

/* タイトル中央・下線なし（このブロックのみ） */
#ft-diff .ft-h3{
  margin:0 0 clamp(12px,1.6vw,18px); text-align:center; color:#162e66;
  font-family:"Montserrat","Noto Sans JP",system-ui,sans-serif; font-weight:700;
}
#ft-diff .ft-h3::after{ content:none !important }

/* 2つの丸 */
#ft-diff .diff-balls{
  display:flex; justify-content:center; align-items:flex-start;
  gap:clamp(10px,2vw,20px); margin-top:clamp(6px,1.2vw,12px);
}
#ft-diff .diff-balls.diff-balls--overlap .ball + .ball{ margin-left:clamp(-90px,-6vw,-52px) }

/* 丸のベース（やや小さめ・テキストを少し下へ） */
#ft-diff .ball{
  width:clamp(300px,36vw,520px);
  aspect-ratio:1/1; border-radius:50%; overflow:hidden;
  display:grid; grid-template-rows:auto 1fr auto; align-items:start; justify-items:center;
  padding:clamp(32px,5vw,56px) clamp(14px,2.2vw,22px) clamp(16px,2.2vw,22px);
  background:#fff; color:#394b63;
}

/* 左丸＝濃紺グレー／右＝白 */
#ft-diff .ball.is-left{ background:#4f5d72; color:#fff }
#ft-diff .ball.is-right{ background:#fff }

/* ラベル（pill） */
#ft-diff .ball__label{
  font-weight:700; font-size:clamp(14px,1.6vw,16px);
  padding:.45em .9em; border-radius:999px;
}
#ft-diff .ball__label.is-muted{ background:#fff; color:#4f5d72; border:0 }
#ft-diff .ball__label.is-brand{ background:var(--brand); color:#fff; border:0 }

/* 箇条書き */
#ft-diff .ball__list{
  width:min(84%,420px); margin-top:clamp(12px,1.8vw,18px);
  list-style:disc inside; line-height:1.7; font-size:clamp(13px,1.4vw,15px); color:#394b63;
}
#ft-diff .ball.is-left .ball__list{ color:#fff }

/* イラスト（背景透過PNG/SVG推奨） */
#ft-diff .ball__illust{ align-self:end; margin-top:clamp(6px,1vw,10px) }
#ft-diff .ball__illust img{ display:block; width:min(68%,280px); height:auto }

/* 下部メッセージ */
#ft-diff .diff-message{
  max-width:1000px; margin:clamp(18px,3vw,28px) auto 0;
  color:#162e66; line-height:1.9; font-size:clamp(14px,1.4vw,16px);
}

/* SP：縦積み＆重なり解除 */
@media (max-width:880px){
  #ft-diff .diff-balls{ flex-direction:column; gap:clamp(16px,4vw,24px) }
  #ft-diff .diff-balls.diff-balls--overlap .ball + .ball{ margin-left:0 }
  #ft-diff .ball{ width:clamp(280px,86vw,420px); margin:0 auto }
  #ft-diff .diff-message{ max-width:92%; text-align:left }
}
/* ===== 「イチ星リフォームとは？」のサイズを元に戻す（#ft-intro限定） ===== */

/* 右側のイラストを元の大きさに（やや大きめ） */
#ft-intro .ft-illust img{
  width: 100%;
  max-width: 560px;                 /* 以前の見え方に近い上限 */
}
@media (min-width: 1080px){
  #ft-intro .ft-illust img{ max-width: 620px; }  /* ワイド画面でさらに少し大きく */
}

/* 下の丸4つ（退去立会／見積り／工事・点検／引き渡し）のサイズを復元 */
#ft-intro .bubbles{
  --size: clamp(180px, 16vw, 220px);  /* 基本サイズを大きめに */
  --overlap: clamp(18px, 2.4vw, 28px);/* 重なり幅（強すぎない程度） */
  margin-top: clamp(24px, 5vw, 40px);
}

/* PCでさらに大きく */
@media (min-width: 1080px){
  #ft-intro .bubbles{
    --size: 240px;
    --overlap: 36px;
  }
}

/* とても広い画面ではもう一段階アップ */
@media (min-width: 1400px){
  #ft-intro .bubbles{
    --size: 260px;
    --overlap: 48px;
  }
}
/* ===== #ft-intro を右寄せに戻す（PCのみ） ===== */
@media (min-width:1080px){
  /* グリッド自体の幅を固定し、右端に寄せる */
  #ft-intro .ft-grid{
    grid-template-columns: minmax(0, 560px) minmax(0, 520px); /* 左(テキスト)/右(イラスト) */
    justify-content: flex-end;   /* ← 右寄せの要 */
    column-gap: 56px;
  }
  /* 見出し＋本文列を少しだけ右へオフセット（微調整） */
  #ft-intro .ft-text{
    justify-self: end;    /* 列内でも右側に寄せる */
    max-width: 46ch;
    margin-left: 120px;   /* ← 以前効いていた調整値を復活 */
  }
}

/* さらにワイド画面でのバランス（任意・前と同じ感じ） */
@media (min-width:1400px){
  #ft-intro .ft-grid{
    grid-template-columns: minmax(0, 660px) minmax(0, 560px);
    column-gap: 56px;
  }
}
/* ===== 余白を約50%カット：#ft-intro 上下だけ ===== */

/* 1) 前セクションとの間（見出しの上側）を詰める */
#ft-intro .sec__inner{
  /* 既定 6rem 相当 → コンパクトに */
  padding-top: clamp(12px, 1.4vw, 24px);
}

/* 2) お問合せボタン下 → 次のカードまでの間を詰める */
#ft-intro .sec__inner{
  padding-bottom: clamp(10px, 1.2vw, 14px); /* 下側も圧縮 */
}
#ft-intro .ft-cta{
  margin-top: clamp(6px, 2vw, 12px);        /* ボタン上の余白も少しだけ */
}

/* 次のセクション（カード）側の上余白も合わせて半分に */
#ft-points .sec__inner{
  padding-top: clamp(10px, 1.2vw, 14px);
}
#ft-points .ft-cards{
  margin-top: clamp(8px, 1.4vw, 16px);
}
/* ===== お問合せボタンの直下→水色セクションまで（外側 上余白） ===== */
#ft-diff{
  margin-top: clamp(36px, 6vw, 96px);  /* 必要に応じて数値だけ調整 */
}

/* ===== 水色セクション内部の上下余白（プレート全体） ===== */
#ft-diff .diff-plate{
  /* 上側を少し広め／下側もゆったり */
  padding-top:    clamp(28px, 4vw, 56px);
  padding-bottom: clamp(36px, 6vw, 72px);
}

/* ===== 見出し「イチ星リフォームの特徴」の上下余白 ===== */
#ft-diff .ft-h3{
  /* 見出しの上下マージンを個別に調整 */
  margin-top:    clamp(6px, 0.8vw, 12px);
  margin-bottom: clamp(16px, 2.2vw, 28px);
}

/* 1) 円の中身パディングを左右対称の小さめにして、上げたいのはテキスト側で調整 */
.ball{
  position: relative;                 /* 中央配置の基準に */
  padding: clamp(12px, 1.6vw, 18px) !important;  /* 上下左右均等に小さめ */
}

/* テキストは margin で下げる（padding で円の中心を動かさない） */
.ball__label{ 
  position: relative; 
  z-index: 2;
  margin-top: clamp(28px, 4.4vw, 54px) !important;
}
.ball__list{
  position: relative;
  z-index: 2;
  margin-top: clamp(12px, 1.8vw, 20px) !important;
}

/* 2) イラストを円のど真ん中に・大きく */
.ball__illust{
  position: absolute !important;
  inset: 0 !important;                /* 円いっぱいを覆う */
  display: grid !important;
  place-items: center !important;     /* 完全センター */
  margin: 0 !important;
  z-index: 1;
  pointer-events: none;               /* クリックはテキストに通す */
}
.ball__illust img{
  display: block;
  /* 直径に対して十分なサイズ（大→中→小で気持ちよく縮む） */
  width: clamp(260px, 62%, 640px) !important;
  height: auto !important;
}

/* スマホは少しだけ比率アップ（見やすさ優先） */
@media (max-width: 880px){
  .ball__illust img{
    width: clamp(200px, 72%, 380px) !important;
  }
}
/* 丸を絶対配置の基準にする */
.ball{
  position: relative;          /* 重要 */
  overflow: hidden;            /* 丸の外にはみ出さない */
}

/* ラベル／箇条書きは前面のまま */
.ball__label,
.ball__list{
  position: relative;
  z-index: 2;
}

/* 旧ルールの place-self / margin を無効化して中央基準に */
.ball__illust{
  position: static !important;       /* ラッパは基準にしない */
  margin: 0 !important;
  align-self: auto !important;
  justify-self: auto !important;
  pointer-events: none;               /* クリックを邪魔しない（任意） */
  z-index: 1;
}

/* 画像そのものを丸の“中心”に絶対配置 → 上に寄せる */
.ball__illust img{
  position: absolute !important;
  left: 50% !important;
  top: 32% !important;               /* 小さいほど上へ（例: 28% / 30% / 32%） */
  transform: translate(-50%, -50%) !important;
  width: min(72%, 460px) !important;  /* 大きさ（お好みで調整） */
  height: auto !important;
  display: block !important;
  z-index: 1;
}

/* PCでもう少し上げたい場合 */
@media (min-width: 1080px){
  .ball__illust img{ top: 30% !important; }
}

/* スマホは少し下げてテキストと干渉回避（必要なら） */
@media (max-width: 880px){
  .ball__illust img{
    top: 36% !important;
    width: min(80%, 380px) !important;
  }
}

/* 左右で微調整したい場合（任意） */
/* .ball.is-left  .ball__illust img{ top: 29% !important; } */
/* .ball.is-right .ball__illust img{ top: 31% !important; } */
/* 丸の中を“上：テキスト / 下：イラスト”の縦並びに */
.ball{
  display: flex;                /* 縦並び */
  flex-direction: column;
  align-items: center;
  position: relative;           /* 丸は基準のまま */
  overflow: hidden;
}

/* 文章側は従来どおり中央付近の幅で */
.ball__list{
  width: min(84%, 420px);
  margin-top: clamp(8px, 1.2vw, 12px);
}

/* いったん絶対配置していた指定をリセットして通常フローへ */
.ball__illust{
  position: static !important;
  margin: 0 !important;
  align-self: center !important;
  z-index: 1;
}

/* ★ イラスト：文字の下に配置＆少し小さく */
.ball__illust img{
  position: static !important;     /* ← これが肝（絶対配置をやめる） */
  left: auto !important;
  top: auto !important;
  transform: none !important;
  display: block !important;

  /* 大きさ（お好みで%を調整） */
  width: min(56%, 360px) !important;
  height: auto !important;

  /* 箇条書きとの間隔 */
  margin-top: clamp(10px, 2vw, 20px) !important;
}

/* 必要なら左右で微調整（任意） */
.ball.is-left  .ball__illust img{ width: min(52%, 340px) !important; }
.ball.is-right .ball__illust img{ width: min(54%, 350px) !important; }

/* モバイルは少しだけ大きめでもOK（任意） */
@media (max-width: 880px){
  .ball__illust img{
    width: min(64%, 380px) !important;
    margin-top: clamp(12px, 3vw, 22px) !important;
  }
}
/* 丸全体の上下パディングを少なめにして押し上げ */
.diff-balls .ball{
  padding-top: clamp(8px, 1.0vw, 14px) !important;
  padding-bottom: clamp(10px, 1.2vw, 16px) !important;
}

/* 箇条書き自体の余白をほぼゼロに（下方向の余白を削る） */
.ball__list{
  margin: clamp(2px, .4vw, 6px) auto 0 !important;  /* ← 上だけ最小、下は0 */
}

/* イラストの上マージンをさらに詰める */
.ball__illust img{
  margin-top: clamp(0px, .3vw, 6px) !important;  /* もっと詰めたいなら 0→-4px 程度でもOK */
}
/* --- テキストは固定。イラストだけ上に寄せる（#ft-diff 限定） --- */

/* 1) 丸のレイアウトを元のグリッドに強制（テキスト位置が動かない） */
#ft-diff .ball{
  display: grid !important;
  grid-template-rows: auto 1fr auto !important; /* ラベル / 箇条書き / イラスト */
  align-items: start !important;
}

/* 2) 箇条書きの余白は従来通り（＝位置は変えない） */
#ft-diff .ball__list{
  margin-top: clamp(12px, 1.8vw, 18px) !important;
}

/* 3) イラストは3行目のまま。画像だけを“上方向に”持ち上げる */
#ft-diff .ball__illust{ align-self: start !important; } /* 行位置そのまま */
#ft-diff .ball__illust img{
  width: min(58%, 360px) !important;     /* 大きさは今の見え方基準 */
  height: auto !important;
  transform: translateY(calc(-1 * clamp(12px, 2vw, 36px))) !important; /* ←ココで上へ */
}

/* 左右で微調整したい場合（任意） */
#ft-diff .ball.is-left  .ball__illust img{ transform: translateY(calc(-1 * clamp(14px, 2.2vw, 42px))) !important; }
#ft-diff .ball.is-right .ball__illust img{ transform: translateY(calc(-1 * clamp(10px, 1.8vw, 32px))) !important; }
/* ===== イラストだけを思い切って上に（#ft-diff 限定） ===== */
#ft-diff .ball__illust img{
  /* ← 数値を大きくしたので一気に上がります */
  transform: translateY(calc(-1 * clamp(0px, 12vw, 260px))) !important;
}

/* 左右で微調整したい時は任意（少し差を付ける例） */
#ft-diff .ball.is-left  .ball__illust img{
  transform: translateY(calc(-1 * clamp(140px, 13vw, 280px))) !important;
}
#ft-diff .ball.is-right .ball__illust img{
  transform: translateY(calc(-1 * clamp(120px, 12vw, 260px))) !important;
}

/* モバイルは上げ過ぎない（必要なら調整） */
@media (max-width: 880px){
  #ft-diff .ball__illust img{
    transform: translateY(calc(-1 * clamp(30px, 7vw, 80px))) !important;
  }
}
/* ===== #ft-diff のイラスト位置をここだけで制御（最後に置く） ===== */
#ft-diff .ball__illust img{
  /* 以前の transform:none !important を確実に上書き */
  transform: translateY(var(--illust-shift, 0)) !important;
  margin-top: 0 !important;      /* 画像直前の余白制約も外す */
}

/* 量はここで調整（上に上げる＝マイナス、下げる＝プラス） */
#ft-diff{
  --illust-shift: -100px;   /* 例：思い切って上に 220px 上げる */
}

/* 左右で少し差を付けたい場合（任意） */
#ft-diff .ball.is-left  .ball__illust img{ transform: translateY(calc(var(--illust-shift) - 20px)) !important; }
#ft-diff .ball.is-right .ball__illust img{ transform: translateY(var(--illust-shift)) !important; }

/* スマホは上げ過ぎない（任意） */
@media (max-width: 880px){
  #ft-diff{ --illust-shift: -80px; }
}
/* ▼ 箇条書きだけを少し下げる（#ft-diff 限定） */
#ft-diff{ --list-bump: clamp(10px, 1.6vw, 22px); } /* 下げ幅をここで調整 */

#ft-diff .ball__list{
  margin-top: calc(clamp(12px, 1.8vw, 18px) + var(--list-bump)) !important;
}

/* モバイルは控えめ */
@media (max-width: 880px){
  #ft-diff{ --list-bump: clamp(6px, 1.2vw, 12px); }
}
/* 左の丸だけイラストを少し下げる（+値=下げる / -値=上げる） */
#ft-diff .ball.is-left{ --illust-left-extra: 17px; } /* ←お好みで 8〜24px くらい */

#ft-diff .ball.is-left .ball__illust img{
  transform: translateY(calc(var(--illust-shift, 0px) + var(--illust-left-extra, 0px))) !important;
}

/* モバイルは控えめ（任意） */
@media (max-width: 880px){
  #ft-diff .ball.is-left{ --illust-left-extra: 8px; }
}

/* === SPだけ文字を下げて、イラストを少し大きく（#ft-diff限定） === */
@media (max-width: 880px){
  /* 文字（箇条書き）を下へ：ラベルの下の余白を増やす */
  #ft-diff .ball__list{
    margin-top: clamp(18px, 6vw, 32px) !important; /* 元: 12〜18px → 18〜32px */
  }

  /* イラストを拡大（SPだけ） */
  #ft-diff .ball__illust img{
    width: min(78%, 460px) !important;            /* 元: 58%前後 → 78% */
  }

  /* イラストの持ち上げ量（マイナスが上）を少し弱めてバランス取り */
  #ft-diff{ --illust-shift: -70px; }              /* 元が -80px なら少し控えめに */

  /* 左だけ微調整している場合はその差分も控えめに（任意） */
  #ft-diff .ball.is-left{ --illust-left-extra: 6px; }
}

/* ===== ここから修正してる ===== */

/* =========================
   Features 見出し（サブページ）
   ========================= */
.is-sub #features-head .sec__inner{
  padding-top: clamp(56px, 8vw, 96px);
  padding-bottom: clamp(12px, 3.2vw, 28px);  /* 下の余白を少しタイトに */
}
.is-sub #features-head .sec__en{
  position: relative;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  color: var(--navy);
  font-size: clamp(36px, 6.5vw, 88px);
  line-height: 1.06;
  margin: 0 0 12px;
}
.is-sub #features-head .sec__en::before{
  content: "";
  position: absolute;
  left: 0;
  top: -18px;
  width: 72px; height: 6px;
  background: #FFD84D;
  border-radius: 3px;
}
.is-sub #features-head .sec__lead{
  margin-top: 12px;
  margin-bottom: clamp(6px, 1.6vw, 14px); /* 画像との隙間 */
  font-size: clamp(14px, 2.2vw, 18px);
  line-height: 1.7;
  text-align: center;
  color: #142a5a;
}

/* スマホ微調整：見出しサイズ/ライン/余白 */
@media (max-width: 768px){
  .is-sub #features-head .sec__inner{ padding-top: 56px; padding-bottom: 14px; }
  .is-sub #features-head .sec__en{ font-size: 34px; margin-bottom: 10px; }
  .is-sub #features-head .sec__en::before{ top: -14px; width: 56px; height: 5px; }
  .is-sub #features-head .sec__lead{ margin-top: 10px; margin-bottom: 0; font-size: 14px; line-height: 1.6; }
}

/* 透かし英字（ウォーターマーク）を上へ */
#features-head.sec{ overflow: visible; }
#features-head.sec::before{ transform: translateY(-28%); }

/* 見出し直下の白い四角対策（背景や余白を強制OFF） */
#features-head + .sec__inner.pb-16{
  background: transparent;
  padding-top: 0;
  margin: 0; border: 0; box-shadow: none;
}

/* =========================
   HERO 画像（右端ピッタリ／左だけ内側）
   ========================= */

/* 左の食い込み量（デスクトップ→タブ→SPで段階的に） */
:root{ --hero-left-inset: 120px; }
@media (max-width: 1024px){ :root{ --hero-left-inset: 72px; } }
@media (max-width: 768px){  :root{ --hero-left-inset: 16px; } }

/* セクションの左右パディングを殺して“真のフル幅”へ */
.svc > .sec__inner.pb-16{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* figure（ヒーロー）：右端固定／左だけ内側へ寄せる */
.svc-heroMedia{
  margin: 0;
  margin-right: calc(50% - 50vw); /* 右端を常にビューポート端 */
  margin-left: auto;              /* 右基準に寄せる */
  width: calc(100vw - var(--hero-left-inset)); /* 左だけ内側に */
  border-radius: 90px 0 0 90px;   /* 角丸はPCで強め */
  overflow: hidden;
}

/* 画像：インライン隙間対策＋トリミング指定 */
.svc-heroMedia img{
  display: block;
  width: 100%;
  height: clamp(360px, 30vw, 520px);
  object-fit: cover;
  object-position: center;
}

/* スマホは高さを抑え、角丸を少し強めに、上の隙間も短く */
@media (max-width: 768px){
  .svc-heroMedia{
    border-radius: 32px 0 0 32px; /* 28〜40pxで好み調整 */
    margin-top: 10px;
    margin-bottom: 22px;
  }
  .svc-heroMedia img{
    height: 200px; /* “半分くらい”の見え方 */
  }
}
/* SPだけの調整（～768px） */
@media (max-width: 768px){

  /* ① 説明文 <p class="sec__lead"> の下マージン */
  .is-sub #features-head .sec__lead{
    margin-bottom: 0px;      /* ← ここを 0〜8px で調整 */
  }

  /* ② 見出しセクション自体の“下パディング” */
  .is-sub #features-head .sec__inner{
    padding-bottom: 8px;     /* ← ここを 0〜12px で調整 */
  }

  /* ③ ヒーロー画像 <figure class="svc-heroMedia"> の“上マージン” */
  .svc-heroMedia{
    margin-top: 4px;         /* ← ここを 0〜8px で調整（今10pxなら小さく） */
  }

  /* 念のため：直後コンテナの“上パディング”を殺す（保険） */
  #features-head + .sec__inner{
    padding-top: 0 !important;
  }
}

/* ========== FEATURES 最下部の2つの丸（スマホの見え方を統一） ========== */

/* 基本：両方の丸でテキスト⇔イラストの距離とレイアウトを統一 */
#ft-diff .ball{
  display: grid !important;
  grid-template-rows: auto 1fr auto !important; /* ラベル / 箇条書き / イラスト */
  align-items: start !important;
  justify-items: center !important;
}
#ft-diff .ball__list{
  width: min(84%, 420px) !important;     /* テキスト行の横幅を統一 */
  margin-top: clamp(12px, 2.4vw, 18px) !important;
  line-height: 1.8 !important;
}

/* イラストの大きさと余白を“両方の丸”で共通化 */
#ft-diff .ball__illust{ align-self: start !important; }
#ft-diff .ball__illust img{
  width: min(58%, 360px) !important;
  height: auto !important;
  margin-top: clamp(12px, 3vw, 18px) !important;
  transform: none !important;            /* 旧指定のズレを打ち消す */
}

/* ==============================
   FEATURES 最下部 2つの丸（確定版）
   ・重なりを完全リセット
   ・テキストを少し右寄せ & 中央付近に
   ・狭幅スマホで1行維持に寄せる（フォント縮小＋字間詰め）
   ============================== */

/* まずは “絶対配置で持ち上げる系” を完全リセット */
#ft-diff .ball{
  display: grid !important;
  grid-template-rows: auto 1fr auto !important; /* ラベル / 箇条書き / イラスト */
  align-items: start !important;
  justify-items: center !important;
  padding: clamp(16px, 3.5vw, 24px) !important; /* 余白を安定化 */
}
#ft-diff .ball__illust{
  position: static !important;
  align-self: start !important;
  margin-top: clamp(10px, 2.4vw, 16px) !important;
  z-index: 1 !important;
}
#ft-diff .ball__illust img{
  position: static !important;
  transform: none !important;
  width: min(54%, 340px) !important;  /* 画像はやや小さめ */
  height: auto !important;
}

/* 箇条書き：左に寄りすぎないよう“外側ビュレット＋少し右へ” */
#ft-diff .ball__list{
  list-style-position: outside !important; /* insideだと左に詰まりやすい */
  width: min(90%, 420px) !important;       /* テキストの列幅を広げる */
  margin: clamp(10px, 2.2vw, 16px) auto 0 !important;
  padding-left: 1.3em !important;          /* ●の分だけ全体を右に */
  text-align: left !important;
  line-height: 1.7 !important;
}
#ft-diff .ball__list li{
  margin: 0 0 .55em 0 !important;
  letter-spacing: 0 !important;
}

/* 紺の丸は文字色を白で固定（被り時の視認性も担保） */
#ft-diff .ball.is-left .ball__list{ color: #fff !important; }

/* ----- 狭い端末（iPhone SE/8 幅＝320px想定）向け最適化 ----- */
@media (max-width: 375px){
  #ft-diff .ball__list{ width: 92% !important; padding-left: 1.15em !important; }
  #ft-diff .ball__list li{ font-size: 12.6px !important; line-height: 1.65 !important; }
  #ft-diff .ball__illust img{ width: min(50%, 300px) !important; } /* さらに少し小さく */
}
/* さらに狭い端末（幅≤360px） */
@media (max-width: 360px){
  #ft-diff .ball__list li{ font-size: 12.2px !important; }
  #ft-diff .ball__illust img{ width: min(48%, 280px) !important; }
}

/* ===== 最終微調整：文字を右へ & イラストを下へ ===== */
#ft-diff{
  /* つまみ：数値を変えれば即反映 */
  --list-shift: 0.6em;                          /* 箇条書きの右寄せ量（+で右へ） */
  --illust-drop: clamp(18px, 4.5vw, 36px);      /* イラストを下げる量 */
}

/* 箇条書き全体を少し右へ（ビュレットごと） */
#ft-diff .ball__list{
  padding-left: calc(1.3em + var(--list-shift)) !important;  /* 前回 + 右寄せ量 */
  width: min(88%, 420px) !important;                         /* わずかに列幅を狭め中央寄せ感UP */
  margin-left: auto !important;
  margin-right: auto !important;
}

/* イラストは素直に下げる（上下マージンで調整） */
#ft-diff .ball__illust{
  margin-top: var(--illust-drop) !important;
}

/* 小さめ端末ではもう少しだけ右寄せ＆下げ幅を増やす */
@media (max-width: 375px){
  #ft-diff{
    --list-shift: 0.8em;
    --illust-drop: clamp(22px, 5.2vw, 42px);
  }
}

/* ===== イラストだけもっと下げる（文字位置はそのまま） ===== */
#ft-diff{
  /* 下げ量（大きいほどイラストが下に） */
  --illust-gap: clamp(40px, 10vw, 80px);
}

/* 箇条書きの“下”に余白を足して、イラストとの距離を広げる */
#ft-diff .ball__list{
  margin-bottom: var(--illust-gap) !important;
}

/* 念のため：イラスト側の上マージン/変形は無効化しておく */
#ft-diff .ball__illust{ margin-top: 0 !important; }
#ft-diff .ball__illust img{ transform: none !important; }

/* 小さめ端末ではさらに下げる */
@media (max-width: 375px){
  #ft-diff{ --illust-gap: clamp(50px, 15vw, 95px); }
}

/* ===== 丸の中の余白を調整：ラベル下／リスト下（SPもPCも） ===== */
#ft-diff{
  /* つまみ：お好みに応じて数値だけ変えればOK */
  --pill-gap:    clamp(10px, 2.8vw, 18px);  /* 楕円タイトルの“下”の余白 */
  --illust-gap:  clamp(36px, 8vw, 80px);    /* 箇条書き“下”→イラストまでの余白 */
}

/* グリッドの2行目を 1fr → auto にして、margin がそのまま反映されるように */
#ft-diff .ball{
  display: grid !important;
  grid-template-rows: auto auto auto !important;  /* ラベル / リスト / イラスト */
  align-items: start !important;
}

/* 楕円タイトル（pill）の下にしっかり余白 */
#ft-diff .ball__label{
  margin-bottom: var(--pill-gap) !important;
}

/* リストの下に余白 → イラストをさらに下へ */
#ft-diff .ball__list{
  margin-top: clamp(8px, 1.6vw, 14px) !important;
  margin-bottom: var(--illust-gap) !important;
}

/* 念のため：イラスト側は上下の変形や負マージンを使わない */
#ft-diff .ball__illust{ margin-top: 0 !important; }
#ft-diff .ball__illust img{ transform: none !important; }

/* 小さめ端末（iPhone SE系など）はさらに余白を少し増やす */
@media (max-width: 375px){
  #ft-diff{
    --pill-gap:   clamp(12px, 3.2vw, 20px);
    --illust-gap: clamp(44px, 10vw, 96px);
  }
}