/* ==== 通常エアコン詳細（/aircon-standard-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-section h2{
  margin-bottom:12px;
}

/* コース概要 + 料金表（PC用） */
.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;
  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;
  }
}

/* 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%;
  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;
  }
}
/* ==== 「通常分解とは」「完全分解洗浄とは」セクション ==== */

/* 通常分解とは：2カラムカード */
.course-about{
  display:grid;
  gap:18px;
  grid-template-columns:repeat(2,minmax(0,1fr));
  margin-top:14px;
}
@media (max-width: 900px){
  .course-about{
    grid-template-columns:1fr;
  }
}

.course-about__card{
  border-radius:18px;
  padding:16px 16px;
  border:1px solid var(--line);
  background:#ffffff;
  box-shadow:var(--shadow);
}

.course-about__card--note{
  background:#f9fafb;
}

.course-about__title{
  margin:0 0 10px;
  font-size:18px;
  font-weight:900;
  color:#111827;
}

.course-about__list{
  margin:0;
  padding-left:18px;
  color:var(--muted);
  line-height:1.9;
}

.course-about__text{
  margin:0;
  color:var(--muted);
  line-height:1.9;
  font-size:14px;
}
@media (max-width: 900px){
  .course-about__text{
    font-size:13px;
  }
}

/* 完全分解：強み＋おすすめ（2カラム） */
.course-full-grid{
  display:grid;
  gap:18px;
  grid-template-columns:repeat(2,minmax(0,1fr));
  margin-top:14px;
}
@media (max-width: 900px){
  .course-full-grid{
    grid-template-columns:1fr;
  }
}

.course-full-card{
  border-radius:18px;
  padding:16px 18px;
  border:1px solid var(--line);
  background:#ffffff;
  box-shadow:var(--shadow);
}

.course-full-card__title{
  margin:0 0 10px;
  font-size:18px;
  font-weight:900;
  color:#111827;
}

.course-full-note{
  margin-top:10px;
  font-size:13px;
}
/* ==== 完全分解セクション：モダン化 ==== */
.course-full{
  background:
    radial-gradient(900px 500px at 10% -10%, rgba(37,99,235,.10), transparent 60%),
    radial-gradient(700px 420px at 110% 120%, rgba(96,165,250,.10), transparent 60%),
    transparent;
}

/* 2カラム */
.course-full-grid{
  display:grid;
  gap:18px;
  grid-template-columns:repeat(2,minmax(0,1fr));
  margin-top:14px;
}
@media (max-width: 900px){
  .course-full-grid{ grid-template-columns:1fr; }
}

/* カード全体 */
.course-full-card{
  border-radius:22px;
  border:1px solid color-mix(in srgb, var(--line) 70%, transparent);
  background:#fff;
  box-shadow: 0 14px 40px rgba(15,23,42,.08);
  overflow:hidden;
  padding:0;
}

/* ヘッダー（グラデ＋小ラベル） */
.course-full-card__head{
  padding:14px 16px 12px;
  background:
    linear-gradient(135deg, rgba(37,99,235,.12), rgba(96,165,250,.08)),
    #ffffff;
  border-bottom:1px solid var(--line);
}
.course-full-card__eyebrow{
  margin:0 0 6px;
  display:inline-flex;
  gap:8px;
  align-items:center;
  font-size:11px;
  font-weight:900;
  letter-spacing:.10em;
  color:#1d4ed8;
  text-transform:uppercase;
}
.course-full-card__eyebrow::before{
  content:"";
  width:10px;
  height:10px;
  border-radius:999px;
  background:#2563eb;
  box-shadow:0 0 0 6px rgba(37,99,235,.12);
}
.course-full-card__title{
  margin:0;
  font-size:18px;
  font-weight:900;
  color:#0f172a;
}

/* 中身余白 */
.course-full-card--diff,
.course-full-card--reco{
  padding-bottom:14px;
}
.course-full-card--diff .course-diff-list,
.course-full-card--reco .course-reco-list{
  padding:12px 16px 0;
}

/* 通常分解との違い：ラベル付きの短文リスト */
.course-diff-list{
  margin:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.course-diff-list li{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#ffffff;
}
.course-diff-list__label{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 10px;
  border-radius:999px;
  background:#eff6ff;
  color:#1d4ed8;
  font-weight:900;
  font-size:12px;
  letter-spacing:.02em;
  white-space:nowrap;
}
.course-diff-list__text{
  color:#0f172a;
  font-weight:700;
  line-height:1.7;
  font-size:14px;
}
@media (max-width: 900px){
  .course-diff-list__text{ font-size:13px; }
}

/* おすすめ：チェック付きの“おしゃれ”リスト */
.course-reco-list{
  margin:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.course-reco-list li{
  position:relative;
  padding:10px 12px 10px 40px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#ffffff;
  color:#0f172a;
  line-height:1.7;
  font-size:14px;
  font-weight:700;
}
.course-reco-list li::before{
  content:"✓";
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  width:22px;
  height:22px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:#dcfce7;
  color:#15803d;
  font-weight:900;
  font-size:13px;
}
@media (max-width: 900px){
  .course-reco-list li{ font-size:13px; }
}

/* 小さな一言メモ */
.course-reco-note{
  margin:12px 16px 0;
  padding:12px 12px;
  border-radius:16px;
  background:#0b1b3a;
  color:#fff;
  font-weight:800;
  font-size:13px;
  line-height:1.7;
  box-shadow: 0 10px 26px rgba(2,6,23,.18);
}

/* 下の注意書き */
.course-full-note{
  margin-top:10px;
  font-size:13px;
}
/* ==== 見出し(カードヘッダー)の背景を変更：同化対策 ==== */

/* 共通：青紫グラデをやめて、白ベース＋軽い質感に */
.course-full-card__head{
  position: relative;
  padding: 14px 16px 12px;
  background: rgba(255,255,255,.92);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(6px);
}

/* 左側にアクセントバー（モダン感UP） */
.course-full-card__head::before{
  content:"";
  position:absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 4px;
  border-radius: 999px;
  background: #2563eb; /* デフォは青 */
  opacity: .95;
}

/* 見出し文字 */
.course-full-card__title{
  margin: 0;
  font-size: 18px;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: .01em;
}

/* ---- カード別にアクセント色を変える（差分が一目でわかる） ---- */
.course-full-card--diff .course-full-card__head{
  background: rgba(255,255,255,.94);
}
.course-full-card--diff .course-full-card__head::before{
  background: #2563eb; /* 違い：青 */
}

.course-full-card--reco .course-full-card__head{
  background: rgba(255,255,255,.94);
}
.course-full-card--reco .course-full-card__head::before{
  background: #16a34a; /* おすすめ：緑 */
}

/* おすすめのリストも少しだけ今っぽく（既存デザインのままでもOK） */
.course-reco-list li{
  border-radius: 18px;
  box-shadow: 0 6px 18px rgba(15,23,42,.06);
}
.course-diff-list li{
  border-radius: 18px;
  box-shadow: 0 6px 18px rgba(15,23,42,.06);
}

/* ラベル（分解範囲など）を少しコントラスト強めに */
.course-diff-list__label{
  background: #f1f5ff;
  color: #1d4ed8;
  border: 1px solid rgba(29,78,216,.12);
}
/* 縦棒の位置がおかしい問題：::before をやめて背景で縦棒を描く */
.course-full-card__head{
  position: relative;
  --accent: #2563eb; /* デフォ（diffは青） */

  /* 左端に縦棒（100% 高さでズレない） */
  background:
    linear-gradient(var(--accent), var(--accent)) left / 4px 100% no-repeat,
    rgba(255,255,255,.92);

  border-bottom: 1px solid var(--line);
  padding: 14px 16px 12px 16px; /* ここは好みでOK */
  backdrop-filter: blur(6px);
}

/* 以前の ::before 縦棒は無効化（残ってると二重になる） */
.course-full-card__head::before{
  content: none !important;
}

/* カード別アクセント色 */
.course-full-card--diff .course-full-card__head{
  --accent: #2563eb; /* 青 */
}
.course-full-card--reco .course-full-card__head{
  --accent: #16a34a; /* 緑 */
}
/* 完全分解セクション内：従来カードを縦積みにする */
.course-reco-grid--stack{
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 12px;
}

/* 右カラム内の「こんな方におすすめ」見出し（従来セクションっぽく） */
.course-full-reco__title{
  margin: 8px 0 10px;
  text-align: center;
  font-size: 18px;
  font-weight: 900;
  color: #0f172a;
  position: relative;
}
.course-full-reco__title::after{
  content:"";
  display:block;
  width: 120px;
  max-width: 60%;
  height: 2px;
  background: #0f172a;
  margin: 10px auto 0;
  opacity: .18;
}
/* ==== 通常分解との違い：ピル無しの箇条書きデザイン ==== */
.course-diff-bullets{
  margin: 0;
  padding: 14px 16px 16px;
  list-style: none;
  display: grid;
  gap: 12px;
}

.course-diff-bullets li{
  position: relative;
  padding: 12px 14px 12px 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(15,23,42,.06);
}

/* 左に細いアクセントライン（主張しすぎない） */
.course-diff-bullets li::before{
  content:"";
  position:absolute;
  left: 10px;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 999px;
  background: #2563eb;
  opacity: .9;
}

/* テキストのインデント（ライン分） */
.course-diff-bullets li{
  padding-left: 22px;
}

.course-diff-bullets h4{
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 900;
  color: #0f172a;
  line-height: 1.6;
}

.course-diff-bullets p{
  margin: 0;
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.85;
}

@media (max-width: 900px){
  .course-diff-bullets{
    padding: 12px 12px 14px;
  }
  .course-diff-bullets p{
    font-size: 13px;
  }
}
/* おすすめカード：中身の余白 */
.course-full-card__body{
  padding: 14px 16px 16px;
}

/* 完全分解カード内に入る従来カードは、少しだけ上品に（影を弱める） */
.course-reco-grid--inside{
  margin-top: 0;
  gap: 14px;
}
.course-reco-grid--inside .course-reco-card{
  border-radius: 16px;
  box-shadow: 0 10px 22px rgba(15,23,42,.06); /* ほんのり */
  border: 1px solid var(--line);
}

/* 従来カードの青ヘッダーを少し落ち着かせたい場合（任意） */
.course-reco-grid--inside .course-reco-card h3{
  background: #1d4ed8; /* 少し深めの青 */
}
/* 外側（見出し付きカード）の見出しを大きく */
.course-full-card__title{
  font-size: clamp(20px, 1.2vw + 14px, 24px);
  font-weight: 900;
  line-height: 1.3;
}

/* 内側（従来カード）の見出しを少し小さくして主従を作る */
.course-reco-grid--inside .course-reco-card h3{
  font-size: 18px;   /* ここを 17〜19px で好みに調整OK */
  line-height: 1.45;
}

/* スマホはさらに詰める（任意） */
@media (max-width: 640px){
  .course-reco-grid--inside .course-reco-card h3{
    font-size: 16px;
  }
}
/* ===== Before/After：SPは合成1枚(c)を表示、PCはa/b表示 ===== */

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

/* SP：PC用(a/b)を消して、SP用(c)を出す */
@media (max-width: 900px){

  /* PC用の2カラム(ba-col)は非表示 */
  #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;
  }

  /* SPは縦並び（1カラム） */
  #before-after .ba-list .ba-row{
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* SP用画像：切り取らず全体表示（合成画像向け） */
  #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;
  }
  #before-after .ba-img.ba-img--sp img{
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    display: block;
    border-radius: 14px;
  }
}
/* ===== 通常分解：Before/After（SPは完全分解と同じ“カード”見た目に寄せる） ===== */
@media (max-width: 900px){

  /* 1件ごと（.ba-row）をカード化 */
  .course--standard #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--standard #before-after .ba-part-title{
    text-align: center !important;
    margin: 4px 0 4px !important;
  }

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

  /* 説明文：カード内っぽい余白・サイズ */
  .course--standard #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;
  }

  /* 画像は角丸だけ合わせる（枠なし方針は今のままでOK） */
  .course--standard #before-after .ba-img.ba-img--sp img{
    border-radius: 14px !important;
  }
}
/* ===============================
   通常分解ページ（/aircon-standard-course/）
   PCだけレイアウト修正
================================ */
@media (min-width: 901px){

  /* 1) 「通常分解とは」：カードが左だけになる問題 → 1カラムにして全幅表示 */
  .course--standard #standard-about .course-about{
    grid-template-columns: 1fr !important;
  }
  .course--standard #standard-about .course-about__card{
    width: 100%;
  }

  /* 2) 「完全分解洗浄がおすすめ！」：左右2カラム → 上下（縦積み）に変更 */
  .course--standard #full-about .course-full-grid{
    grid-template-columns: 1fr !important;
    gap: 20px; /* いい感じの余白（好みで調整OK） */
  }

  /* ついでに：縦積み時に中身が詰まりすぎるなら少しだけ整える（任意） */
  .course--standard #full-about .course-full-card{
    width: 100%;
  }
}
/* ===============================
   通常分解：完全分解おすすめ内「こんな方におすすめ」だけ
   PCで3カラム横並びにする
================================ */
@media (min-width: 901px){

  /* 「こんな方におすすめ」カード内のグリッドだけ3列に */
  .course--standard #full-about .course-full-card--reco .course-reco-grid--stack{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px;
  }
}
/* ===============================
   通常分解ページ：完全分解への誘導CTA（ボタン）
================================ */

/* CTA全体 */
.course--standard #full-about .course-full-cta{
  margin-top: 18px;
  text-align: center;
}

/* ボタン本体 */
.course--standard #full-about .btn--course-full{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 14px 18px;
  border-radius: 999px;

  background: #2563eb;
  color: #fff;
  text-decoration: none;

  font-weight: 900;
  font-size: 16px;
  line-height: 1;

  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 14px 34px rgba(37,99,235,.22);
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}

.course--standard #full-about .btn--course-full:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 44px rgba(37,99,235,.28);
  opacity: .98;
}

.course--standard #full-about .btn--course-full:active{
  transform: translateY(0);
  box-shadow: 0 12px 30px rgba(37,99,235,.20);
}

/* 右の矢印 */
.course--standard #full-about .btn--course-full__icon{
  display: inline-flex;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  align-items: center;
  justify-content: center;

  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.22);
  font-weight: 900;
}

/* 注釈 */
.course--standard #full-about .course-full-cta__note{
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.7;
}

/* SPは押しやすく幅100%寄りに */
@media (max-width: 900px){
  .course--standard #full-about .course-full-cta{
    margin-top: 14px;
    text-align: center;
  }

  .course--standard #full-about .btn--course-full{
    width: 100%;
    max-width: 420px; /* でかすぎ防止 */
    padding: 14px 16px;
    font-size: 16px;
  }

  .course--standard #full-about .course-full-cta__note{
    font-size: 12.5px;
    margin-top: 8px;
  }
}

/* PCは程よい幅にして“押したくなる”見栄えに */
@media (min-width: 901px){
  .course--standard #full-about .btn--course-full{
    min-width: 360px;
  }
}
/* === SPだけ：ボタン幅を“短め”に＆テキスト改行させない（はみ出し防止） === */
@media (max-width: 900px){

  .course--standard #full-about .btn--course-full{
    width: auto !important;                 /* 50vw固定をやめる */
    max-width: calc(100% - 32px);          /* 画面からはみ出さない（左右16px余白） */
    white-space: nowrap;                   /* 「完全分解洗浄の詳細はこちら」を1行固定 */
    padding: 12px 20px;                    /* 横幅だけ短くしたいので左右を少し詰める */
    font-size: 15px;                       /* 16のままでもOK。折り返すなら15 */
    box-sizing: border-box;
  }

  /* 念押し：中央寄せ */
  .course--standard #full-about .course-full-cta{
    text-align: center;
  }
}