/* ==== 天井埋込エアコン詳細（/aircon-ceiling-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,.18), 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-hero__meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:10px;
}
.course-hero__back{
  margin-top:16px;
}
.course-hero__media-inner{
  border-radius:24px;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  overflow:hidden;
  background:#e5e7eb;
  aspect-ratio:4/3;
}
.course-hero__media-inner img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* セクション共通 */
.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;
}

/* 箇条書き（このコースでできること 等） */
.svc-bullets{
  margin:8px 0 0;
  padding-left:18px;
  color:var(--muted);
}

/* 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;
  }
}

/* おすすめカード（グリッド） */
.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;        /* PC・スマホ共通で大きめ */
  font-weight: 800;
  line-height: 1.5;
}

/* 説明テキスト側：下側の本文エリア */
.course-reco-card p{
  margin: 0;
  padding: 12px 14px 14px;
  font-size: 14px;        /* PC基準のサイズ */
  line-height: 1.8;
  background: #ffffff;    /* カード下は白背景 */
  color: inherit;
}

/* スマホでは説明文だけ少し小さくする */
@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;
  }
}

/* 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;          /* 2カラム全幅にまたがって表示 */
  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;
}

/* =========================
   コース詳細 共通セクション見出し
   ========================= */

.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;
  }
}
/* ===== 天井埋込：Before/After（SPは合成1枚＋カード表示）===== */

/* 初期（PC）：SP用は隠す */
.course--ceiling #before-after .ba-sp-only{
  display: none;
}

@media (max-width: 900px){

  /* PC用(a/b)を消して、SP用(c)を出す */
  .course--ceiling #before-after .ba-list .ba-row > .ba-col{
    display: none !important;
  }
  .course--ceiling #before-after .ba-list .ba-row > .ba-sp-only{
    display: block !important;
  }

  /* 1件ごと（.ba-row）を“カード化”して完全分解寄せ */
  .course--ceiling #before-after .ba-list .ba-row{
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow);
    padding: 12px;

    /* SPは縦並び固定 */
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* タイトル：中央＋余白を詰める */
  .course--ceiling #before-after .ba-part-title{
    text-align: center !important;
    margin: 4px 0 4px !important;
  }

  /* 説明文：見た目を整える */
  .course--ceiling #before-after .ba-sp-only .ba-caption{
    margin: 0 0 10px !important;
    font-size: 14px !important;
    line-height: 1.8 !important;
    color: var(--muted);
    text-align: left;
  }

  /* 合成画像：切り取りなし（全体表示） */
  .course--ceiling #before-after .ba-img.ba-img--sp{
    aspect-ratio: unset !important;
    height: auto !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  .course--ceiling #before-after .ba-img.ba-img--sp img{
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    display: block;
    border-radius: 14px;
  }
}