@charset "utf-8";

/* ============================================
   びるどるスクール LP 追加セクション
   1. AI時代のWEBデザインとは？（Before / After 比較）
   2. 生成AIセミナー（バナーカルーセル）
   クラス名は bdai- 接頭辞で既存LPと衝突しません
   ============================================ */

.bdai-section,
.bdai-section *,
.bdai-section *::before,
.bdai-section *::after { box-sizing: border-box; }

.bdai-section {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #FEFAF9;
  color: #333333;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.bdai-section--compare { padding: clamp(56px, 8vw, 104px) 20px clamp(48px, 6vw, 80px); }
.bdai-section--seminar { padding: clamp(56px, 8vw, 100px) 0 clamp(60px, 8vw, 104px); }

.bdai-inner { position: relative; max-width: 1120px; margin: 0 auto; }
.bdai-inner--pad { padding: 0 20px; }

.bdai-em { color: #D81F40; font-size: 32px; }

.bdai-head__title .bdai-em { font-size: 46px; }

/* --- 装飾 --- */
.bdai-deco { position: absolute; display: block; border-radius: 50%; pointer-events: none; }
.bdai-deco--circle-tr { top: -90px; right: -70px; width: 260px; height: 260px; background: #FFE8E2; opacity: .8; }
.bdai-deco--circle-bl { left: -80px; bottom: -60px; width: 240px; height: 240px; background: #FFE8E2; opacity: .75; }
.bdai-deco--dot { right: 6%; top: 40px; width: 12px; height: 12px; background: #FAA4B1; }

/* --- 見出し --- */
.bdai-head { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.bdai-section--compare .bdai-head { margin-bottom: clamp(36px, 5vw, 56px); }
.bdai-head__title {
  margin: 0;
  text-align: center;
  font-size: clamp(26px, 5.4vw, 46px);
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: .01em;
  color: #2A2A30;
  text-wrap: pretty;
}
.bdai-head__line {
  display: block; width: 88px; height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, #F2748A 0%, #DD3B52 100%);
}
.bdai-lead {
  margin: 0; text-align: center;
  font-size: clamp(15px, 2.3vw, 19px); font-weight: 500; line-height: 1.9;
  color: #333333; text-wrap: pretty;
}

/* --- 比較レイアウト --- */
.bdai-compare {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(18px, 2.4vw, 28px);
  align-items: stretch;
}

.bdai-card {
  display: flex; flex-direction: column; gap: 18px;
  border-radius: 24px; padding: clamp(18px, 2.4vw, 26px);
}
.bdai-card--before { background: #FFFFFF; border: 1px solid #EFE9E6; box-shadow: 0 8px 24px rgba(42, 42, 48, .06); }
.bdai-card--after  { background: #FFE8E2; border: 1px solid #FBE2E7; box-shadow: 0 10px 28px rgba(208, 38, 65, .12); }

.bdai-card__label {
  margin: 0; align-self: center; padding: 10px 22px; border-radius: 999px;
  font-size: clamp(15px, 2.2vw, 19px); font-weight: 700; letter-spacing: .02em;
}
.bdai-card--before .bdai-card__label { background: #F4F0EE; color: #6E6467; }
.bdai-card--after  .bdai-card__label { background: #D02641; color: #FFFFFF; }

/* --- 写真（差し替えは img の src のみ） --- */
.bdai-photo {
  position: relative; margin: 0;
  aspect-ratio: 16 / 10;
  border-radius: 18px; overflow: hidden;
}
.bdai-photo--before { background: repeating-linear-gradient(135deg, #F3EFEC 0 10px, #EDE7E4 10px 20px); }
.bdai-photo--after  { background: repeating-linear-gradient(135deg, #FFD9D0 0 10px, #FFCCC2 10px 20px); }
.bdai-photo__ph {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; letter-spacing: .08em; color: #9A908C;
}
.bdai-photo--after .bdai-photo__ph { color: #C4756C; }
.bdai-photo__img { position: relative; width: 100%; height: 100%; object-fit: cover; }
.bdai-photo--before .bdai-photo__img { filter: saturate(.9) brightness(.98); }

/* --- 4つのポイント --- */
.bdai-points { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.bdai-point { display: flex; align-items: center; gap: 12px; border-radius: 14px; padding: 14px 16px; }
.bdai-points--before .bdai-point { background: #FAF7F5; }
.bdai-points--after  .bdai-point { background: #FFFFFF; }
.bdai-point__text { font-size: clamp(15px, 2.1vw, 18px); }
.bdai-points--before .bdai-point__text { font-weight: 500; color: #6E6467; }
.bdai-points--after  .bdai-point__text { font-weight: 700; color: #2A2A30; }
.bdai-point__icon { flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%; border: 3px solid #CFC6C2; }
.bdai-point__check {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(90deg, #CA112F 0%, #FAA4B1 100%);
  color: #FFFFFF; font-size: 13px; font-weight: 700;
}

/* --- 中央の変化表現 --- */
.bdai-compare__bridge {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 0 4px;
}
.bdai-compare__label {
  margin: 0; white-space: nowrap; padding: 10px 20px; border-radius: 999px;
  background: linear-gradient(90deg, #CA112F 0%, #FAA4B1 100%);
  color: #FFFFFF; font-size: clamp(14px, 2vw, 18px); font-weight: 700;
  box-shadow: 0 6px 16px rgba(202, 17, 47, .22);
}
.bdai-compare__arrow {
  display: block; width: 0; height: 0;
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent;
  border-left: 22px solid #D81F40;
}

/* --- まとめコピー --- */
.bdai-summary {
  margin-top: clamp(32px, 4.4vw, 52px);
  background: #FFFFFF; border: 1px solid #FBE2E7; border-radius: 24px;
  box-shadow: 0 8px 24px rgba(208, 38, 65, .08);
  padding: clamp(26px, 4vw, 44px) 20px; text-align: center;
}
.bdai-summary__text {
  margin: 0; font-size: clamp(19px, 3.4vw, 32px); font-weight: 900; line-height: 1.6;
  color: #2A2A30; text-wrap: pretty;
}

/* --- セミナーカルーセル --- */
.bdai-carousel { position: relative; margin-top: clamp(32px, 4.6vw, 56px); overflow: hidden; }
.bdai-carousel__track {
  display: flex; gap: clamp(14px, 1.8vw, 24px);
  padding: 6px clamp(14px, 1.8vw, 24px);
  overflow-x: auto; scrollbar-width: none; cursor: grab; touch-action: pan-y;
}
.bdai-carousel__track::-webkit-scrollbar { display: none; }
.bdai-carousel__track.is-dragging { cursor: grabbing; }

.bdai-card__poster {
  flex: 0 0 auto; width: clamp(300px, 46vw, 620px);
  background: #FFFFFF; border: 1px solid #FBE2E7; border-radius: 18px;
  box-shadow: 0 6px 18px rgba(42, 42, 48, .07); padding: 14px;
}
.bdai-poster__frame {
  position: relative; aspect-ratio: 1783 / 882; border-radius: 10px; overflow: hidden;
  background: repeating-linear-gradient(135deg, #FFF3F0 0 10px, #FFE8E2 10px 20px);
}
.bdai-poster__ph {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(13px, 1.6vw, 16px); letter-spacing: .1em; font-weight: 700; color: #C4756C;
}
.bdai-poster__img { position: relative; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }

/* --- タブレット / スマートフォン --- */
@media (max-width: 900px) {
  .bdai-compare { grid-template-columns: 1fr; }
  .bdai-compare__bridge { flex-direction: row; padding: 4px 0; }
  .bdai-compare__arrow { transform: rotate(90deg); }
  .bdai-photo { aspect-ratio: 4 / 3; }
}
@media (max-width: 640px) {
  .bdai-card__poster { width: 88vw; }
}

.sp-only {
  display: none;
}

@media (max-width:768px) {
  .sp-only {
    display: inline;
  }
  
  .bdai-head__title .bdai-em {
    font-size: 32px;
  }

  .bdai-head__title {
    text-wrap: nowrap;
  }
}