/* ==== 完全分解エアコン詳細（/aircon-full-course/） ==== */

/* PC / SP 切り替えユーティリティ */
.only-pc {
  display: block;
}
.only-sp {
  display: none;
}
@media (max-width: 900px) {
  .only-pc {
    display: none;
  }
  .only-sp {
    display: block;
  }
}

/* Hero */
.course-hero{
  padding:56px 0 40px;
  background:
    radial-gradient(1200px 600px at -10% -10%, rgba(96,165,250,.20), transparent 60%),
    radial-gradient(900px 500px at 110% 120%, rgba(37,99,235,.12), transparent 60%),
    #ffffff;
  border-bottom:1px solid var(--line);
}
.course-hero__inner{
  display:grid;
  gap:24px;
  grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  align-items:center;
}
@media (max-width: 900px){
  .course-hero__inner{
    grid-template-columns:1fr;
  }
}
.course-hero__title{
  font-size: clamp(26px, 3vw + 8px, 34px);
  margin:8px 0 12px;
}

/* セクション共通 */
.course-section h2{
  margin-bottom:12px;
}

/* コース概要 + 料金表 */
.course-outline{
  display:grid;
  gap:24px;
  grid-template-columns:minmax(0,2fr) minmax(0,1.4fr);
  align-items:flex-start;
  margin-top:8px;
}
@media (max-width: 900px){
  .course-outline{
    grid-template-columns:1fr;
  }
}
.course-outline__list{
  margin:10px 0 0;
  padding-left:18px;
  color:var(--muted);
}
.course-outline__price{
  background:#f9fafb;
  border-radius:18px;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  padding:16px;
}
.course-outline__note{
  margin-top:10px;
  font-size:13px;
}

/* 簡易料金表（2カラム） */
.course-price-table{
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--line);
  background:#fff;
  font-size:14px;
}
.course-price-table__head,
.course-price-table__row{
  display:grid;
  grid-template-columns: minmax(0,2.2fr) minmax(0,1fr);
  padding:10px 12px;
}
.course-price-table__head{
  background:#f3f4f6;
  font-weight:700;
}
.course-price-table__row:nth-child(even){
  background:#f9fafb;
}
.course-price-table .price{
  font-weight:800;
}

/* このコースでできること などの2カラムテキスト */
.course-two-col{
  display:grid;
  gap:20px;
  grid-template-columns:repeat(2,minmax(0,1fr));
  margin-top:10px;
}
@media (max-width: 900px){
  .course-two-col{
    grid-template-columns:1fr;
  }
}

/* 箇条書き（servicesと同テイスト） */
.svc-bullets{
  margin:8px 0 0;
  padding-left:18px;
  color:var(--muted);
}

/* おすすめカードグリッド */
.course-reco-grid{
  display:grid;
  gap:18px;
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:10px;
}
@media (max-width: 900px){
  .course-reco-grid{
    grid-template-columns:1fr;
  }
}

/* こんな方におすすめカード（上部を青ヘッダー化） */
.course-reco-card{
  padding: 0;
  border-radius: 18px;
  overflow: hidden;
}
.course-reco-card h3{
  margin: 0;
  padding: 12px 14px;
  background: #2563eb;
  color: #ffffff;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.5;
}
.course-reco-card p{
  margin: 0;
  padding: 12px 14px 14px;
  font-size: 14px;
  line-height: 1.8;
  background: #ffffff;
}
@media (max-width: 900px){
  .course-reco-card p{
    font-size: 13px;
  }
}

/* このコースでできること：枠付きカード */
.course-ability-box {
  margin-top: 14px;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: #ffffff;
  box-shadow: var(--shadow);
}
@media (max-width: 900px) {
  .course-ability-box {
    padding: 14px 12px;
  }
}

/* 比較記事リンクセクション */
.course-section--article{
  background:#f9fafb;
}
.course-article-card{
  margin-top:10px;
}
.course-article-card__inner{
  border-radius:22px;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  padding:18px 20px;
  display:grid;
  gap:20px;
  grid-template-columns:minmax(0,1.6fr) minmax(0,1.2fr);
  align-items:center;
  background:
    radial-gradient(800px 400px at -10% 0%, rgba(59,130,246,.10), transparent 60%),
    radial-gradient(700px 350px at 120% 120%, rgba(37,99,235,.10), transparent 60%),
    #ffffff;
}
@media (max-width: 900px){
  .course-article-card__inner{
    grid-template-columns:1fr;
  }
}
.course-article-card__badge{
  display:inline-flex;
  padding:4px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  background:#eff6ff;
  color:#1d4ed8;
  margin-bottom:6px;
}
.course-article-card__title{
  font-size:18px;
  margin:2px 0 8px;
}
.course-article-card__lead{
  font-size:14px;
  color:var(--muted);
  margin:0 0 6px;
}
.course-article-card__note{
  font-size:13px;
  color:var(--muted);
  margin:0 0 10px;
}
.course-article-card__actions .btn{
  font-size:14px;
}
.course-article-card__media{
  border-radius:18px;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  overflow:hidden;
  background:#e5e7eb;
  aspect-ratio:4/3;
}
.course-article-card__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Before / After */
.ba-list{
  display:flex;
  flex-direction:column;
  gap:20px;
  margin-top:16px;
}
.ba-row{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  align-items:stretch;
}
@media (max-width: 900px){
  .ba-row{
    grid-template-columns:1fr;
  }
}
.ba-col{
  background:#fff;
  border-radius:18px;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  padding:12px 14px;
  display:flex;
  flex-direction:column;
}
.ba-tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:800;
  letter-spacing:.06em;
  border-radius:999px;
  padding:4px 10px;
  text-transform:uppercase;
}
.ba-tag--before{
  background:#fee2e2;
  color:#b91c1c;
}
.ba-tag--after{
  background:#dcfce7;
  color:#15803d;
}
.ba-caption{
  margin:8px 0 6px;
  font-size:13px;
  color:var(--muted);
}
.ba-img{
  border-radius:14px;
  border:1px solid var(--line);
  overflow:hidden;
  background:#e5e7eb;
  aspect-ratio:4/3;
}
.ba-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Before / After 各ペアの見出し（大きめ） */
.ba-part-title {
  grid-column: 1 / -1;
  text-align: center;
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 800;
  margin: 4px 0 10px;
  color: #111827;
}
@media (max-width: 900px) {
  .ba-part-title {
    font-size: 20px;
  }
}

/* 作業動画 */
.course-movie__frame{
  margin-top:14px;
  border-radius:20px;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  overflow:hidden;
  position:relative;
  padding-top:56.25%; /* 16:9 */
  background:#000;
}
.course-movie__frame iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

/* 当日の流れ（CSSは残しておいてもOK：未使用） */
.flow{
  display:flex;
  flex-direction:column;
  gap:22px;
  margin-top:12px;
}
.flow-step{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,1.1fr);
  gap:20px;
  align-items:center;
}
.flow-step--reverse{
  grid-template-columns:minmax(0,1.1fr) minmax(0,1.3fr);
}
.flow-step--reverse .flow-step__content{
  order:2;
}
.flow-step--reverse .flow-step__media{
  order:1;
}
@media (max-width: 900px){
  .flow-step,
  .flow-step--reverse{
    grid-template-columns:1fr;
  }
  .flow-step--reverse .flow-step__content,
  .flow-step--reverse .flow-step__media{
    order:initial;
  }
}
.flow-step__badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:800;
  padding:4px 10px;
  border-radius:999px;
  background:#eff6ff;
  color:#1d4ed8;
  margin-bottom:6px;
}
.flow-step__media-inner{
  border-radius:20px;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  overflow:hidden;
  background:#e5e7eb;
  aspect-ratio:4/3;
}
.flow-step__media-inner img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* 予約CTA（今回は使っていないがCSSは流用可） */
.course-cta-reserve{
  margin-top:28px;
}
.course-cta-reserve__inner{
  border-radius:22px;
  padding:18px 20px;
  border:1px solid rgba(15,23,42,.1);
  box-shadow:var(--shadow);
  background:
    radial-gradient(900px 500px at -10% 0%, rgba(59,130,246,.25), transparent 55%),
    radial-gradient(800px 400px at 120% 120%, rgba(30,64,175,.35), transparent 60%),
    #0f172a;
  color:#e5edff;
  display:grid;
  gap:18px;
  grid-template-columns:minmax(0,2fr) minmax(0,1.1fr);
  align-items:center;
}
@media (max-width: 900px){
  .course-cta-reserve__inner{
    grid-template-columns:1fr;
    text-align:left;
  }
}
.course-cta-reserve__eyebrow{
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  opacity:.9;
}
.course-cta-reserve__title{
  font-size:20px;
  margin:6px 0 6px;
}
.course-cta-reserve__lead{
  font-size:13px;
  opacity:.9;
}
.course-cta-reserve__actions{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
}
@media (max-width: 900px){
  .course-cta-reserve__actions{
    align-items:flex-start;
  }
}
.course-cta-reserve__btn{
  min-width:220px;
  text-align:center;
}
.course-cta-reserve__note{
  font-size:11px;
  opacity:.85;
}
.course-back-bottom{
  margin-top:20px;
  text-align:center;
}
.course-back-bottom .btn{
  min-width:220px;
}

/* コース詳細 共通セクション見出し */
.course-section .course-heading {
  position: relative;
  text-align: center;
  font-size: clamp(22px, 2.4vw, 26px);
  margin: 0 0 24px;
  font-weight: 800;
}
.course-section .course-heading::after {
  content: "";
  display: block;
  width: 120px;
  max-width: 60%;
  height: 2px;
  background: #0f172a;
  margin: 10px auto 0;
  opacity: 0.18;
}
@media (max-width: 900px) {
  .course-section .course-heading--main {
    font-size: 26px;
  }
}

/* ご予約セクション見出し（トップと同デザイン） */
.company-heading {
  position: relative;
  text-align: center;
  font-size: clamp(22px, 2.4vw, 26px);
  margin: 0 0 24px;
  font-weight: 800;
}
.company-heading::after {
  content: "";
  display: block;
  width: 120px;
  max-width: 60%;
  height: 2px;
  background: #0f172a;
  margin: 10px auto 0;
  opacity: 0.18;
}
@media (max-width: 900px) {
  .company-heading--front {
    font-size: 26px;
  }
}

/* 予約サイト CTA（青カード・LINE風） */
.home-reserve-cta {
  display: block;
  margin-top: 12px;
  padding: 20px 16px;
  background: #2563eb;
  border: 1px solid #1d4ed8;
  border-radius: 18px;
  box-shadow: var(--shadow);
  color: #fff;
  overflow: hidden;
}
.reserve-head {
  text-align: center;
  padding: 4px 8px 10px;
}
.reserve-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: #fff;
  color: #1d4ed8;
  font-weight: 800;
  font-size: 11px;
}
.reserve-head-title {
  margin: 6px 0 0;
  font-size: 20px;
  font-weight: 900;
}
.reserve-body {
  padding: 8px 4px 4px;
  text-align: center;
}
.reserve-text {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.8;
}
.reserve-btn-wrap {
  margin-top: 4px;
  text-align: center;
}
.btn--reserve {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 320px;
  background: #fff;
  color: #2563eb;
  border-radius: 999px;
  border: 1px solid #bfdbfe;
  font-size: 16px;
  padding: 12px 16px;
  font-weight: 800;
  text-decoration: none;
}
.btn--reserve:hover {
  opacity: .95;
}
@media (max-width: 640px) {
  .reserve-head-title {
    font-size: 18px;
  }
  .reserve-text {
    font-size: 13px;
  }
}
/* Instagram Reels slider */
.ig-reels{
  position: relative;
  margin-top: 14px;
}

/* 横スクロール + スナップ（右にスワイプで切り替え） */
.ig-reels__track{
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 6px 6px 14px;
  border-radius: 20px;
}
.ig-reels__track::-webkit-scrollbar{
  height: 8px;
}
.ig-reels__track::-webkit-scrollbar-thumb{
  border-radius: 999px;
}

/* 1枚ずつ“ぴたっ”と止まる */
.ig-reels__slide{
  flex: 0 0 90%;
  scroll-snap-align: center;
}
@media (min-width: 900px){
  .ig-reels__slide{
    flex-basis: 520px; /* PCはカード幅固定寄り（好みで調整OK） */
  }
}

/* 埋め込み枠（カード風） */
.ig-reels__frame{
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  border-radius: 18px;
  padding: 10px;
}

/* IGが付ける余白を抑える */
.ig-reels__frame .instagram-media{
  margin: 0 auto !important;
}

/* 左右ナビ（PCは表示、SPは非表示でもOK） */
.ig-reels__nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow);
  display: none; /* 初期は非表示（PCのみ表示にする） */
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 900;
  cursor: pointer;
  z-index: 2;
}
@media (min-width: 900px){
  .ig-reels__nav{ display: inline-flex; }
}
.ig-reels__nav--prev{ left: -10px; }
.ig-reels__nav--next{ right: -10px; }

/* ドット */
.ig-reels__dots{
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 10px;
}
.ig-reels__dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 0;
  background: rgba(15,23,42,.20);
  cursor: pointer;
}
.ig-reels__dot.is-active{
  background: rgba(15,23,42,.60);
}
/* ===== PC：3枚が横に入るサイズに調整（スライドは維持） ===== */
@media (min-width: 900px){

  /* 3枚見える前提なので、左右に少し余白（矢印が被らないように） */
  .ig-reels__track{
    padding: 6px 44px 14px;
  }

  /* 3枚が入る幅： (100% - gap*2) / 3 */
  .ig-reels__slide{
    flex: 0 0 calc((100% - 28px) / 3); /* gap:14px ×2 */
    max-width: 360px;                 /* 画面が広すぎても巨大化しない */
    scroll-snap-align: start;         /* PCは左揃えで気持ちよく */
  }

  /* 埋め込みの余白を少しだけ詰めてコンパクトに */
  .ig-reels__frame{
    padding: 8px;
  }

  /* Instagram埋め込みが親幅に追従するように念押し */
  .ig-reels__frame .instagram-media{
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* 矢印位置を内側に（好みで） */
  .ig-reels__nav--prev{ left: 6px; }
  .ig-reels__nav--next{ right: 6px; }
}
/* === SPでもBefore/Afterを横並びに（上書き） === */
@media (max-width: 900px){
  /* 2カラム固定に戻す */
  .ba-row{
    grid-template-columns: 1fr 1fr !important;
    gap: 12px;
  }
  /* 余白を少しだけタイトにして小さくても綺麗に見せる */
  .ba-col{
    padding: 10px 12px;
  }
  .ba-caption{
    font-size: 12px;
  }
  .ba-img{
    aspect-ratio: 4/3;      /* 既存の比率を維持（好みで 3/2 にしてもOK） */
  }
  /* タイトルは2カラム全幅のまま（既存仕様を踏襲） */
  .ba-part-title{
    grid-column: 1 / -1;
  }
}
/* === SP：Before/Afterを“1つのカード”にまとめる === */
@media (max-width: 900px){
  /* .ba-row 自体をカード化（外枠をここに集約） */
  .ba-row{
    grid-template-columns: 1fr 1fr;   /* 左右2カラム */
    gap: 0;                            /* カラム間の隙間ゼロ */
    padding: 12px;                     /* 内側余白 */
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow);
  }

  /* 見出しはカード内の最上段フル幅に */
  .ba-part-title{
    grid-column: 1 / -1;
    margin: 4px 0 10px;
  }

  /* 内側カラム化：各 .ba-col は枠や影を消してフラットに */
  .ba-col{
    border: 0;
    box-shadow: none;
    border-radius: 0;
    padding: 0 10px;                   /* 軽く左右だけ余白 */
    background: transparent;
  }

  /* 右カラムだけ薄い縦区切り線を付ける */
  .ba-col + .ba-col{
    border-left: 1px solid var(--line);
  }

  /* キャプションは少しコンパクトに */
  .ba-caption{
    font-size: 12px;
    margin: 6px 0 6px;
  }

  /* 画像は各カラム内でカード風に（角丸と薄い枠） */
  .ba-img{
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    background: #e5e7eb;
    aspect-ratio: 4 / 3;               /* 既定の比率を維持 */
  }

  /* 既存の1カラム化指定を上書き（安全のため） */
  .ba-row{
    grid-template-columns: 1fr 1fr !important;
  }
}
/* === SP：Before/After を1カード化 + 説明高さ同期 + 安全な区切り線 === */
@media (max-width: 900px){

  /* 親カード（各 .ba-row 単位） */
  .ba-list .ba-row{
    position: relative;                         /* ← これが重要：線の基準をrow内に固定 */
    display: grid;
    grid-template-columns: 1fr 1fr;             /* 左右2カラム */
    grid-template-rows: auto auto auto auto;    /* 1:見出し 2:ピル 3:説明 4:画像 */
    column-gap: 12px;                           /* 左右のすき間（くっつき防止） */
    row-gap: 8px;                               /* 行のすき間 */
    padding: 12px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow);
  }

  /* 見出し：最上段フル幅 */
  .ba-list .ba-row .ba-part-title{
    grid-column: 1 / -1;
    grid-row: 1;
    margin: 4px 0 10px;
  }

  /* 内側ラッパーを外して行同期させる */
  .ba-list .ba-row .ba-col{ display: contents; }

  /* 行合わせ（左右を同じ行番号へ）*/
  .ba-list .ba-row .ba-col--before .ba-tag{     grid-column: 1; grid-row: 2; }
  .ba-list .ba-row .ba-col--after  .ba-tag{     grid-column: 2; grid-row: 2; }
  .ba-list .ba-row .ba-col--before .ba-caption{ grid-column: 1; grid-row: 3; }
  .ba-list .ba-row .ba-col--after  .ba-caption{ grid-column: 2; grid-row: 3; }
  .ba-list .ba-row .ba-col--before .ba-img{     grid-column: 1; grid-row: 4; }
  .ba-list .ba-row .ba-col--after  .ba-img{     grid-column: 2; grid-row: 4; }

  /* 子要素は線の上に（ひび割れ防止）+ 中央から少し間隔を空ける */
  .ba-list .ba-row .ba-tag,
  .ba-list .ba-row .ba-caption,
  .ba-list .ba-row .ba-img{
    position: relative;
    z-index: 1;
  }
  .ba-list .ba-row .ba-col--before .ba-tag,
  .ba-list .ba-row .ba-col--before .ba-caption,
  .ba-list .ba-row .ba-col--before .ba-img{ margin-right: 4px; }
  .ba-list .ba-row .ba-col--after .ba-tag,
  .ba-list .ba-row .ba-col--after .ba-caption,
  .ba-list .ba-row .ba-img.ba-col--after{ margin-left: 4px; }

  /* 中央の区切り線（.ba-row 内に限定 / 子要素の下） */
  .ba-list .ba-row::after{
    content: "";
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 12px;
    bottom: 12px;
    width: 1px;
    background: var(--line);
    transform: translateX(-0.5px);
    pointer-events: none;
  }

  /* 既存の「右カラムにborder-left」を無効化（display:contentsと競合回避） */
  .ba-list .ba-row .ba-col + .ba-col{
    border-left: 0 !important;
  }

  /* 見た目の微調整（任意） */
  .ba-list .ba-row .ba-caption{
    font-size: 12px;
    margin: 6px 0 8px;
  }
  .ba-list .ba-row .ba-img{
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    background: #e5e7eb;
    aspect-ratio: 4 / 3;
  }
}
/* === SP：BAカード 最終調整（中央線の重なり防止＆等間隔） === */
@media (max-width: 900px){

  /* 1カード化＋行揃え（既存指定を上書き/補強） */
  .ba-list .ba-row{
    position: relative;                         
    display: grid;
    grid-template-columns: 1fr 1fr;             
    grid-template-rows: auto auto auto auto;    /* 1:見出し 2:ピル 3:説明 4:画像 */
    padding: 12px;
    /* 外枠側の内側余白 = 12px。中央線側も同じ12pxにしたいので、
       column-gap を「12px + 12px + 1px(線の太さ)」にする → 25px */
    column-gap: 25px;                           
    row-gap: 8px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow);
  }

  /* 見出し：フル幅で背景を白にして線を隠す（重なり防止） */
  .ba-list .ba-row .ba-part-title{
    grid-column: 1 / -1;
    grid-row: 1;
    margin: 4px 0 10px;
    position: relative;
    z-index: 2;
    background: #fff;   /* h3はブロック要素なので全面に敷かれて線を覆う */
  }

  /* ラッパ無効化で行同期 */
  .ba-list .ba-row .ba-col{ display: contents; }

  /* 行合わせ（左右を同じ行に）*/
  .ba-list .ba-row .ba-col--before .ba-tag{     grid-column: 1; grid-row: 2; }
  .ba-list .ba-row .ba-col--after  .ba-tag{     grid-column: 2; grid-row: 2; }
  .ba-list .ba-row .ba-col--before .ba-caption{ grid-column: 1; grid-row: 3; }
  .ba-list .ba-row .ba-col--after  .ba-caption{ grid-column: 2; grid-row: 3; }
  .ba-list .ba-row .ba-col--before .ba-img{     grid-column: 1; grid-row: 4; }
  .ba-list .ba-row .ba-col--after  .ba-img{     grid-column: 2; grid-row: 4; }

  /* 子要素は線の上に（“ひび割れ”防止）*/
  .ba-list .ba-row .ba-tag,
  .ba-list .ba-row .ba-caption,
  .ba-list .ba-row .ba-img{
    position: relative;
    z-index: 1;
    /* 以前つけた左右の余計なマージンをリセット（等間隔にするため） */
    margin-left: 0;
    margin-right: 0;
  }

  /* 以前の「右カラムにborder-left」を無効化（display:contentsと競合回避） */
  .ba-list .ba-row .ba-col + .ba-col{
    border-left: 0 !important;
  }

  /* 中央の区切り線（.ba-row 内に限定 / 子要素の下 / 見出しの下は背景で隠れる） */
  .ba-list .ba-row::after{
    content: "";
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 12px;         /* 上の内側余白と揃える（見出し背景が線を覆う） */
    bottom: 12px;      /* 下も内側余白と揃える */
    width: 1px;
    background: var(--line);
    transform: translateX(-0.5px);
    pointer-events: none;
  }

  /* 見た目の微調整 */
  .ba-list .ba-row .ba-tag{ margin-bottom: 6px; }
  .ba-list .ba-row .ba-caption{
    font-size: 12px;
    margin: 6px 0 8px;
  }
  .ba-list .ba-row .ba-img{
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    background: #e5e7eb;
    aspect-ratio: 4 / 3;
  }
}
/* === SP：BA中央線の上端を少し短くする（微調整） === */
@media (max-width: 900px){
  /* 余白と短縮量を変数化（必要なら数値だけ調整） */
  .ba-list .ba-row{
    --ba-gap: 12px;          /* 外枠と内容の余白（既存と同じ） */
    --ba-line-guard: 38px;    /* ← 上だけ短くする量（6〜10px程度で微調整可） */
    padding: var(--ba-gap);
    column-gap: calc(var(--ba-gap) * 2 + 1px); /* 中央線1px + 左右同じ余白 */
  }

  /* 中央線の上端だけ少し下げる */
  .ba-list .ba-row::after{
    top: calc(var(--ba-gap) + var(--ba-line-guard));
    bottom: var(--ba-gap);   /* 下端は従来どおり */
  }
}
/* SPだけ：c画像を表示、PC用のa/bは隠す */
.ba-sp-only{ display:none; }

@media (max-width: 900px){
  #before-after .ba-row{
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  #before-after .ba-row .ba-col{
    display: none !important;
  }

  #before-after .ba-row .ba-sp-only{
    display: block;
  }


}
/* ===== BA：SPは c画像を出す（最終上書き）===== */
@media (max-width: 900px){

  /* まずPC用(a/b)は確実に消す */
  #before-after .ba-list .ba-row > .ba-col{
    display: none !important;
  }

  /* SP用(c)は確実に出す（←ここが効けば表示される） */
  #before-after .ba-list .ba-row > .ba-sp-only{
    display: block !important;
  }

  /* レイアウトを縦に固定 */
  #before-after .ba-list .ba-row{
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* c画像は横長 */
  #before-after .ba-list .ba-row .ba-img--sp{
    aspect-ratio: 16 / 9 !important;
  }
}
/* === SP：c画像は「全体表示（切り取りなし）」＋内側余白＋角丸 === */
@media (max-width: 900px){

  /* c画像の枠：高さ固定をやめる（=切り取りの原因を消す） */
  #before-after .ba-img--sp{
    aspect-ratio: auto !important;
    height: auto !important;

    /* カード内の余白 */
    padding: 10px;

    /* 角丸は枠で保持 */
    border-radius: 14px;
    overflow: hidden;

    /* 背景（余白部分の色） */
    background: #e5e7eb;
  }

  /* 画像自体：縦横比を保って全部見せる */
  #before-after .ba-img--sp img{
    width: 100% !important;
    height: auto !important;        /* ←ここが重要（100%を潰す） */
    object-fit: contain !important; /* ←coverを潰す */
    display: block;

    /* 画像にも角丸（枠より少し小さめが綺麗） */
    border-radius: 10px;
  }
}
/* === SP：c画像は切り取らず全部表示（角丸+余白）=== */
@media (max-width: 900px){

  /* c画像の枠：比率固定を完全に殺す（←切れの原因） */
  #before-after .ba-img.ba-img--sp{
    aspect-ratio: unset !important;
    height: auto !important;

    /* ba-img の overflow:hidden で切れることがあるので、ここだけ解除 */
    overflow: visible !important;

    /* カード内の余白 */
    padding: 10px;

    /* 枠の見た目（好みで） */
    background: #e5e7eb;
    border-radius: 14px;
  }

  /* 画像：比率保持で全体表示、角丸は画像に付ける */
  #before-after .ba-img.ba-img--sp img{
    width: 100% !important;
    height: auto !important;
    max-width: 100%;
    object-fit: contain !important; /* coverを潰す */
    display: block;

    border-radius: 12px; /* 角丸 */
  }
}
/* === SP：c画像は切り取らず全部表示（角丸+余白）背景なし === */
@media (max-width: 900px){
  #before-after .ba-img.ba-img--sp{
    aspect-ratio: unset !important;
    height: auto !important;
    overflow: visible !important;

    padding: 10px;

    background: transparent !important; /* ←グレー背景を消す */
    border-radius: 14px;
  }

  #before-after .ba-img.ba-img--sp img{
    width: 100% !important;
    height: auto !important;
    max-width: 100%;
    object-fit: contain !important;
    display: block;

    border-radius: 12px;
  }
}
/* === SP：c画像は「枠なし」でそのまま表示（角丸は画像だけ） === */
@media (max-width: 900px){
  #before-after .ba-img.ba-img--sp{
    aspect-ratio: unset !important;
    height: auto !important;

    /* 枠（グレー背景・線・角丸・余白）を全部消す */
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;

    /* 切れ防止 */
    overflow: visible !important;
  }

  /* 角丸は画像にだけ付ける */
  #before-after .ba-img.ba-img--sp img{
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    display: block;
    border-radius: 14px; /* 好みで調整OK */
  }
}
/* === Before/After：SP微調整（見出し余白/文字サイズ/中央線OFF） === */
@media (max-width: 900px){

  /* 以前の「中央の縦線（.ba-row::after）」が残っている場合を強制で消す */
  #before-after .ba-row::after{
    content: none !important;
    display: none !important;
  }

  /* 見出し（部品名）と説明の間を詰める */
  #before-after .ba-part-title{
    margin: 4px 0 4px !important;   /* ここで詰まります */
    text-align: left;              /* 好みで（中央のままが良ければ消してOK） */
  }

  /* SP用ブロックの上余白をなくす */
  #before-after .ba-sp-only{
    margin-top: 0 !important;
  }

  /* 説明文を大きく＆余白を調整 */
  #before-after .ba-sp-only .ba-caption{
    font-size: 14px !important;    /* 好みで 15px でもOK */
    line-height: 1.8 !important;
    margin: 0 0 10px !important;   /* 見出しとの間＆画像との間 */
  }

  /* ついでに、スマホ時のカード内の“縦のスキマ”全体も少し詰めたい場合 */
  #before-after .ba-row{
    gap: 10px !important;
  }
}
@media (max-width: 900px){
  #before-after .ba-part-title{
    text-align: center !important;
  }
}