/* =========================
  訪問介護サービス
========================= */
.bright-service{
  max-width: 980px;
  margin: 0 auto;
  padding: 28px 16px 40px;
  line-height: 1.8;
  color: var(--br-text);
}
.bright-service__hero{
  text-align: center;
  padding: 22px 16px;
  border-radius: var(--br-radius);
  background: transparent;
  box-shadow: var(--br-shadow);
}
.bright-service__title{
  font-size: clamp(26px,4vw,36px);
  font-weight: 900;
  color: var(--br-deep);
  position: relative;
  padding-bottom: 10px;
}
.bright-service__title::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 120px;
  height: 6px;
  background: var(--br-main-soft);
  border-radius: 999px;
}
.bright-service__lead{
  max-width: 46em;
  margin: 12px auto 0;
  color: var(--br-muted);
  font-size: 15px;
}
.bright-service__block{
  margin-top: 20px;
  padding: 22px 16px;
  border-radius: var(--br-radius);
  background: #fff;
  box-shadow: var(--br-shadow);
}
.bright-service__h2{
  text-align: center;
  margin-bottom: 16px;
}
.bright-service__badge{
  display: inline-block;
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--br-main);
  color: #fff;
  font-weight: 900;
  letter-spacing: .06em;
}
#seikatsu .bright-service__badge{
  background: var(--br-sub);
  color: var(--br-deep);
}

/* カード */
.bright-cards{
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
  gap: 20px;
}
.bright-card{
  background: #fff;
  border-left: 6px solid var(--br-main);
  border-radius: var(--br-radius);
  padding: 18px 16px;
  box-shadow: var(--br-shadow);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: .2s ease;
  font-weight: 700;
  color: var(--br-deep);
}
.bright-card::after{
  content: "🧑‍⚕️";
  align-self: flex-end;
  font-size: 26px;
  opacity: .85;
}
.bright-cards--life .bright-card{
  border-left-color: var(--br-sub);
}
.bright-cards--life .bright-card::after{
  content: "🏠";
}
.bright-cards--welfare .bright-card{
  border-left-color: var(--br-deep);
}
.bright-cards--welfare .bright-card::after{
  content: "♿";
}
.bright-cards--heavy .bright-card{
  border-left-color: var(--br-deep);
  background: var(--br-main-soft);
}
.bright-cards--heavy .bright-card::after{
  content: "🚑";
}
.bright-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--br-shadow-hover);
}

/* サービス内CTA */
.bright-service__cta{
  margin-top: 28px;
  padding: 22px 16px;
  border-radius: var(--br-radius);
  background: #fff;
  box-shadow: var(--br-shadow);
  text-align: center;
}
.bright-service__ctaBtns{
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.bright-service__btn{
  min-height: 52px;
  padding: 12px 18px;
  border-radius: 12px;
  font-weight: 900;
  text-decoration: none !important;
}
.bright-service__btn--tel{
  background: var(--br-sub);
  color: var(--br-deep) !important;
}
.bright-service__btn--form{
  background: linear-gradient(135deg,var(--br-main),var(--br-sub));
  color: #fff !important;
}

/* =========================
  サービス詳細 共通
========================= */
.svc-wrap{
  max-width: 900px;
  margin: 0 auto;
  padding: 18px 16px 64px;
}
.svc-card{
  border-radius: 18px;
  padding: 26px 18px 30px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  margin: 18px 0 26px;
  overflow: hidden;
  position: relative;
  border: 1px solid #eee;
}
.svc-card--pink{
  background: linear-gradient(180deg, #ffffff 0%, #fdf5f5 55%, #ffffff 100%);
  border: 1px solid #f3d3d3;
}
.svc-card--pink .svc-ribbon__inner{
  background: linear-gradient(135deg, #d79aa3 0%, #b86b76 100%);
}
.svc-card--pink .svc-tag{
  background: #8a4f57;
}
.svc-card--pink .svc-dotline::before,
.svc-card--pink .svc-dotline::after{
  border-top: 4px dotted #d7a7ad;
}
.svc-card--pink .svc-bubble{
  color: #6b3f46;
  background: radial-gradient(circle at 30% 30%, #fffafa 0%, #f7d8dc 45%, #e8b4b4 100%);
}
.svc-card--pink .svc-note{
  color: #8a4f57;
}
.svc-card--pink .svc-bottom-bar{
  background: linear-gradient(135deg, #e8b4b4 0%, #d79aa3 100%);
}
.svc-card--green{
  background: linear-gradient(180deg, #ffffff 0%, #f5faf5 55%, #ffffff 100%);
  border: 1px solid #d5ead5;
}
.svc-card--green .svc-ribbon__inner{
  background: linear-gradient(135deg, #9fcea3 0%, #6ea676 100%);
}
.svc-card--green .svc-tag{
  background: #4f7a55;
}
.svc-card--green .svc-dotline::before,
.svc-card--green .svc-dotline::after{
  border-top: 4px dotted #9fcea3;
}
.svc-card--green .svc-bubble{
  color: #3f5f44;
  background: radial-gradient(circle at 30% 30%, #fbfffb 0%, #dcefdc 45%, #b7ddb9 100%);
}
.svc-card--green .svc-note{
  color: #4f7a55;
}
.svc-card--green .svc-bottom-bar{
  background: linear-gradient(135deg, #9fcea3 0%, #7fbc88 100%);
}
.svc-ribbon{
  display: flex;
  justify-content: center;
  margin: 0 0 14px;
}
.svc-ribbon__inner{
  width: min(560px, 100%);
  text-align: center;
  color: #fff;
  font-weight: 900;
  letter-spacing: .04em;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: clamp(20px, 3.2vw, 30px);
  box-shadow: 0 8px 16px rgba(0,0,0,.12);
}
.svc-desc{
  text-align: center;
  font-size: clamp(14px, 1.8vw, 18px);
  margin: 8px auto 18px;
  max-width: 720px;
  color: #556070;
  line-height: 1.9;
}
.svc-dotline{
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 14px;
}
.svc-dotline::before,
.svc-dotline::after{
  content: "";
  flex: 1;
}
.svc-tag{
  color: #fff;
  font-weight: 900;
  letter-spacing: .08em;
  padding: 6px 18px;
  border-radius: 999px;
  font-size: 18px;
  white-space: nowrap;
  box-shadow: 0 6px 14px rgba(0,0,0,.10);
}
.svc-bubbles{
  display: grid;
  gap: 14px;
  margin: 12px auto 6px;
  max-width: 760px;
  position: relative;
  padding: 14px 0 10px;
}
.svc-bubbles--5{
  grid-template-columns: repeat(3, 1fr);
}
.svc-bubbles--3{
  grid-template-columns: repeat(3, 1fr);
}
.svc-bubble{
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px;
  font-weight: 900;
  letter-spacing: .06em;
  font-size: clamp(14px, 2.3vw, 22px);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.45), 0 10px 20px rgba(0,0,0,.06);
}
.svc-note{
  text-align: center;
  font-weight: 900;
  font-size: clamp(14px, 2vw, 20px);
  margin: 10px 0 8px;
  line-height: 1.8;
}
.svc-bottom-bar{
  height: 18px;
  border-radius: 999px;
  margin: 18px auto 10px;
  width: min(720px, 100%);
  opacity: .95;
}
.svc-illus{
  position: absolute;
  width: 140px;
  max-width: 30vw;
  opacity: .95;
  filter: drop-shadow(0 10px 10px rgba(0,0,0,.08));
}
.svc-illus--left{
  left: 26px;
  top: 250px;
}
.svc-illus--right{
  right: 24px;
  top: 300px;
}

/* =========================
  サービス用レスポンシブ
========================= */
@media (max-width: 767px){
  .svc-card{
    padding: 22px 14px 26px;
    border-radius: 16px;
  }
  .svc-tag{
    font-size: 15px;
    padding: 6px 14px;
  }
  .svc-dotline{
    gap: 8px;
  }
}

@media (max-width: 640px){
  .svc-bubbles--5,
  .svc-bubbles--3{
    grid-template-columns: repeat(2, 1fr);
  }
  .svc-illus{
    display: none;
  }
}




/* ========================================
  サービス案内カード：配色上書き 最適化版
  ----------------------------------------
  目的：
  1) サービス詳細ページの配色ルールに寄せる
  2) ピンク系・グリーン系の重複記述を減らす
  3) 後から色変更しやすい構造に整理する

  前提：
  - #service-guide の共通カードCSSはすでに別で存在
  - このブロックは「色差分」だけを担当
  - 下記クラスがHTMLに付いていること
    .bright-home-links__card--service-pink
    .bright-home-links__card--service-green
======================================== */


/* ========================================
  1. 共通：サービス案内カードの色差分適用ルール
  ----------------------------------------
  各カードごとに変数だけ差し替え、
  実際の見た目反映はここでまとめて行う
======================================== */
#service-guide .bright-home-links__card--service-pink,
#service-guide .bright-home-links__card--service-green{
  /* カード本体の背景 */
  background: var(--sg-card-bg);

  /* カード外枠 */
  border-color: var(--sg-card-border);
}

/* ホバー時の枠色 */
#service-guide .bright-home-links__card--service-pink:hover,
#service-guide .bright-home-links__card--service-green:hover{
  border-color: var(--sg-card-border-hover);
}

/* 画像エリア背景色 */
#service-guide .bright-home-links__card--service-pink .bright-home-links__image-wrap,
#service-guide .bright-home-links__card--service-green .bright-home-links__image-wrap{
  background: var(--sg-image-bg);
}

/* タイトル文字色 */
#service-guide .bright-home-links__card--service-pink .bright-home-links__title,
#service-guide .bright-home-links__card--service-green .bright-home-links__title{
  color: var(--sg-title-color);
}

/* ボタン色・影 */
#service-guide .bright-home-links__card--service-pink .bright-home-links__btn,
#service-guide .bright-home-links__card--service-green .bright-home-links__btn{
  background: linear-gradient(135deg, var(--sg-btn-start) 0%, var(--sg-btn-end) 100%);
  box-shadow: 0 8px 18px var(--sg-btn-shadow);
}

/* ボタンホバー時の影
   ※ 既存の共通 hover を活かしつつ、
      カラーだけ各カードに合わせる */
#service-guide .bright-home-links__card--service-pink:hover .bright-home-links__btn,
#service-guide .bright-home-links__card--service-green:hover .bright-home-links__btn{
  box-shadow: 0 10px 22px var(--sg-btn-shadow-hover);
}


/* ========================================
  2. 介護保険サービス：ピンク系
  ----------------------------------------
  サービス詳細ページの .svc-card--pink に寄せた色設定
======================================== */
#service-guide .bright-home-links__card--service-pink{
  /* カード背景 */
  --sg-card-bg: linear-gradient(180deg, #ffffff 0%, #fdf5f5 55%, #ffffff 100%);

  /* 枠色 */
  --sg-card-border: #f3d3d3;
  --sg-card-border-hover: #e3b8be;

  /* 画像背景 */
  --sg-image-bg: #f9ecee;

  /* タイトル色 */
  --sg-title-color: #7b4a52;

  /* ボタン色 */
  --sg-btn-start: #d79aa3;
  --sg-btn-end: #b86b76;

  /* ボタン影 */
  --sg-btn-shadow: rgba(184, 107, 118, .22);
  --sg-btn-shadow-hover: rgba(184, 107, 118, .28);
}


/* ========================================
  3. 障害福祉サービス：グリーン系
  ----------------------------------------
  サービス詳細ページの .svc-card--green に寄せた色設定
======================================== */
#service-guide .bright-home-links__card--service-green{
  /* カード背景 */
  --sg-card-bg: linear-gradient(180deg, #ffffff 0%, #f5faf5 55%, #ffffff 100%);

  /* 枠色 */
  --sg-card-border: #d5ead5;
  --sg-card-border-hover: #b9d9bc;

  /* 画像背景 */
  --sg-image-bg: #edf7ee;

  /* タイトル色 */
  --sg-title-color: #4f7a55;

  /* ボタン色 */
  --sg-btn-start: #9fcea3;
  --sg-btn-end: #6ea676;

  /* ボタン影 */
  --sg-btn-shadow: rgba(110, 166, 118, .22);
  --sg-btn-shadow-hover: rgba(110, 166, 118, .28);
}


/* ========================================
  4. 補足：スマホでは色の濃さはそのまま維持
  ----------------------------------------
  ここでは配色を変えず、必要なら将来的に
  スマホだけ彩度を少し抑える調整を追加できる
======================================== */
/*
@media (max-width: 767px){
  #service-guide .bright-home-links__card--service-pink{
    --sg-card-bg: linear-gradient(180deg, #ffffff 0%, #fcf7f8 55%, #ffffff 100%);
  }

  #service-guide .bright-home-links__card--service-green{
    --sg-card-bg: linear-gradient(180deg, #ffffff 0%, #f7fbf7 55%, #ffffff 100%);
  }
}
*/