@charset "UTF-8";
/* ============================================================
   キカガク AI・データサイエンス人材育成コース
   個別説明会 予約フォーム
   デザインは form ページ（Figma PC 1218-2946 / SP 1218-4082）と共通。
   差分は「タイトル」「solo セクションなし」「埋め込みが TimeRex」の3点
   帯は3つ: SP ≤768px / タブレット 769〜1024px / PC ≥1025px
   ============================================================ */
:root{
  --orange:#F08300;
  --orange-deep:#ED6C00;
  --yellow:#FDD000;
  --ink:#373737;
  --gray:#F2F5F9;
  --cw-pill:1190px;   /* problem のピル行の幅（Figma 実寸） */
  --cw-form:1074px;   /* フォーム内コンテンツ幅（Figma の iframe 幅） */
}

*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;
  background:#fff;
  font-family:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",sans-serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
h1,h2,p,ul,ol{margin:0;padding:0}
ul,ol{list-style:none}
img{max-width:100%;vertical-align:top;border:0}
a{color:inherit;text-decoration:none}

/* PC / SP 出し分け */
.only-sp{display:none}
.br-sp{display:none}

.page{display:flex;flex-direction:column}

/* ------------------------------------------------------------
   KV（Figma 1590×400 / タイトルは top:100・gap:20）
   ------------------------------------------------------------ */
.kv{
  min-height:400px;
  padding:100px 20px 0;
  display:flex;justify-content:center;
  background:url(../images/kv_bg_pc.png) center top / cover no-repeat;
}
.kv-title{display:flex;flex-direction:column;align-items:center;gap:20px}
.kv-badge{
  background:var(--orange);color:#fff;
  border-radius:100px;
  padding:10px 20px 10px 25px;
  font-size:26px;font-weight:700;line-height:1;letter-spacing:1.3px;
  white-space:nowrap;
}
.kv-heading{
  width:100%;
  font-size:40px;font-weight:700;line-height:1.4;
  text-align:center;color:var(--ink);
}

/* ------------------------------------------------------------
   problem（お悩みのピル）
   Figma: contents が KV に 50px 重なる → 負マージン＋上角丸50px
   ------------------------------------------------------------ */
.problem{
  position:relative;
  /* KV との重なり（margin-top:-50px / 上角丸 50px）は .form へ移した。
     section.problem を HTML から外し、KV の下に来るのが .form に
     なったため（2026-10-19）。ルールは戻せるように残してある。 */
  margin-top:0;
  border-radius:0;
  background:linear-gradient(90deg,var(--yellow) 0%,var(--orange-deep) 100%);
  padding:40px 20px;
  display:flex;flex-direction:column;align-items:center;gap:20px;
}
.problem-lead{
  /* 行高は Figma のノード実高から逆算（leading:normal を鵜呑みにしない） */
  font-size:22px;line-height:26px;font-weight:700;color:#fff;text-align:center;
}
.problem-list{
  display:flex;flex-wrap:wrap;justify-content:center;gap:15px;
  width:100%;max-width:var(--cw-pill);
}
.problem-pill{
  display:flex;align-items:center;justify-content:center;gap:8px;
  background:#fff;border-radius:100px;
  padding:10px 25px;
  font-size:18px;font-weight:700;line-height:1.5;
  white-space:nowrap;
}
.problem-pill img{width:24px;height:24px;flex:0 0 auto}
.problem-pill em{color:var(--orange-deep);font-style:normal}

/* ------------------------------------------------------------
   form（TimeRex 埋め込み）
   ※ 「説明会までの流れ」は個別説明会には合わないため置いていない
      （既存の site/reserve-form にも無い）
   ------------------------------------------------------------ */
.form{
  /* KV に 50px 重ねて上側だけ角丸にする（旧 .problem の役割を引き継いだ） */
  position:relative;
  margin-top:-50px;
  border-radius:50px 50px 0 0;
  background:#fff;
  padding:60px 20px;
  display:flex;justify-content:center;
}
.form-inner{width:100%;max-width:var(--cw-form)}
/* TimeRex の描画前に高さを予約する（読み込み中のガタつき防止）。
   実測（2026-10-19・#timerex_calendar の直下の子要素の最下端 − 上端）:
     390px → 1328px / 1024px → 1282px / 1280px → 1282px

   値は **いちばん小さい実測値（1282px）より 30px 小さい 1252px**。
   予約値が実測を上回ると、その差がそのままカレンダーの下の白い余白として
   残るため（以前の 1670px では 390px で 342px・1280px で 388px 余っていた）。
   下回っていれば余白は出ず、ガタつき防止は 30px 浅くなるだけでほぼ効く。
   カレンダーの高さは月やスロット数で変わるので min-height のままにしてある。 */
.timerex{
  width:100%;
  min-height:1252px;
  overflow-x:auto;
  background-color:transparent;
}

/* ------------------------------------------------------------
   スクロール表示（旧 Studio 版の appear 相当を踏襲）
   ------------------------------------------------------------ */
.js-reveal{opacity:0;transform:translateY(30px);transition:opacity .4s ease,transform .4s ease}
.js-reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js-reveal,.js-reveal.is-visible{opacity:1;transform:none;transition:none}
}

/* ============================================================
   タブレット（769〜1024px）
   PC デザインの文字サイズだと帯幅に対して大きいので一段下げる。
   ※ TimeRex のカレンダー本体は TimeRex 側のスタイルなので対象外。
   ============================================================ */
@media screen and (min-width:769px) and (max-width:1024px){
  /* KV の縦が広すぎるので詰める（PC 400/100 → 320/60） */
  .kv{min-height:320px;padding:60px 20px 0}

  .kv-badge{font-size:20px;letter-spacing:1px}
  .kv-heading{font-size:30px}

  .problem-lead{font-size:18px;line-height:22px}
  .problem-pill{font-size:16px}
  .problem-pill img{width:20px;height:20px}
}

/* ============================================================
   SP（768px 以下）Figma SP 375×2084
   ============================================================ */
@media screen and (max-width:768px){
  .only-pc{display:none}
  .only-sp{display:inline}
  .br-sp{display:inline}

  /* KV: 374×230・タイトル top:34・gap:10 */
  .kv{
    min-height:230px;
    padding:34px 20px 0;
    background-image:url(../images/kv_bg_sp.png);
  }
  .kv-title{gap:10px;width:100%;max-width:335px}
  .kv-badge{font-size:16px;letter-spacing:.8px}
  .kv-heading{font-size:21px}

  /* problem: グラデは縦方向で PC と逆向き（重なりは .form へ移した） */
  .problem{
    margin-top:0;
    border-radius:0;
    background:linear-gradient(180deg,var(--orange-deep) 0%,var(--yellow) 100%);
    padding:30px 20px;
  }
  .problem-lead{font-size:16px;line-height:19px;max-width:335px}
  .problem-list{gap:10px}
  .problem-pill{padding:6px 20px;gap:5px;font-size:16px}
  .problem-pill img{width:20px;height:20px}

  /* form: py40・コンテンツ幅335 */
  .form{
    margin-top:-30px;
    border-radius:30px 30px 0 0;
    padding:40px 20px;
  }
  .form-inner{max-width:335px}
}

/* ============================================================
   極小幅（〜340px）: ピルとCTAが溢れないよう一段小さく
   ============================================================ */
@media screen and (max-width:340px){
  .problem-pill{padding:6px 14px;font-size:14px}
}