@charset "UTF-8";

/* =========================================================
   事業案内一覧ページ 固有スタイル（business.html）
   共通パーツは common.css を参照（ヘッダー/フッター/CTA/ボタン/
   ページヒーロー/パンくず はすべて common.css を再利用）
   ========================================================= */

/* ページヒーロー：このページの背景は情報量が多いのでオーバーレイを濃くする
   （common の .page-hero::after を business.html のみ上書き／Figma 準拠 0.3） */
.page-hero::after {
  background: rgba(0, 0, 0, 0.3);
}

/* ---------- 事業カード一覧 ---------- */
.business {
  /* 背景帯は持たず白地。コンテンツ列のみ中央寄せ。左右 20px は全ページ共通ガター */
  padding: 100px 20px 50px;
}
.business__list {
  max-width: 700px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 80px;
}

/* 事業カード（画像 + 情報の横並び。reverse で画像右） */
.biz-card {
  display: flex;
  gap: 30px;
  align-items: flex-start;
}
.biz-card--reverse {
  flex-direction: row-reverse;
  align-items: center;
}

.biz-card__media {
  flex: 0 0 250px;
  width: 250px;
  height: 250px;
  border-radius: var(--radius-card);
  overflow: hidden;
}
.biz-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 就労支援カードの画像は主役（右側の人物）が収まるよう右寄せで見せる */
.biz-card--work .biz-card__media img {
  object-position: 100% 50%;
}

.biz-card__body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.biz-card__head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 10px;
  /* 女性アクセントカラー（見出し下線）：common.css の --color-accent-gold */
  border-bottom: 1px solid var(--color-accent-gold);
}
.biz-card__title {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
  color: var(--color-text);
}
.biz-card__subtitle {
  font-weight: 700;
  font-size: 14px;
  line-height: 1.57;
  color: var(--color-text);
}
.biz-card__desc {
  font-size: 14px;
  line-height: 1.57;
  color: var(--color-text);
}
.biz-card__btn {
  width: 200px;
}

/* ---------- 固定LINE相談ウィジェット（このページ固有） ---------- */
.line-fab {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2));
}
.line-fab__chat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.line-fab__bubble {
  background: var(--color-primary);
  color: var(--color-white);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.3;
  padding: 8px 10px;
  border-radius: 5px;
  white-space: nowrap;
}
.line-fab__arrow {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid var(--color-primary);
}
.line-fab__icon {
  margin-top: 5px;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-white);
  border-radius: 10px;
}
.line-fab__btn {
  width: 120px;
  padding-left: 0;
  padding-right: 0;
}

/* ---------- レスポンシブ（ブレイクポイント 768px） ---------- */
@media (max-width: 768px) {
  .business {
    padding: 50px 20px;
  }
  .business__list {
    gap: 40px;
  }
  /* 横並び → 画像上 + 情報下に縦積み */
  .biz-card,
  .biz-card--reverse {
    flex-direction: column;
    align-items: stretch;
  }
  .biz-card__media {
    flex-basis: auto;
    width: 100%;
    height: 200px;
  }
  /* SP では固定LINEウィジェットは非表示（SPデザイン未定のため誤表示防止） */
  .line-fab {
    display: none;
  }
}