@charset "UTF-8";
/* ============================================================
   キカガク AI・データサイエンス人材育成コース説明会
   お申し込みフォーム
   Figma: PC 1218-2946（1590×2084） / SP 1218-4082（375×2084）
   帯は3つ: SP ≤768px / タブレット 769〜1024px / PC ≥1025px
   ============================================================ */
:root{
  --blue:#0075C2;
  --blue-hover:#1E8DD5;  /* CTA ホバー（少し明るい青） */
  --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 へ移した。
     セクションの並びが KV → form → problem → solo になり、
     KV の下に来るのが .form になったため（2026-10-16）。 */
  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}

/* ------------------------------------------------------------
   solo（個別説明会への導線）
   ------------------------------------------------------------ */
.solo{
  background:var(--gray);
  padding:40px 20px;
  display:flex;flex-direction:column;align-items:center;gap:20px;
}
.solo-lead{font-size:18px;line-height:1.5;text-align:center}
.solo-cta{
  display:inline-flex;align-items:center;gap:10px;
  height:60px;padding:0 25px 0 30px;
  background:var(--blue);color:#fff;border-radius:10px;
  font-size:20px;font-weight:700;white-space:nowrap;
  /* ホバーは opacity ではなく background-color で。
     opacity だと .js-reveal.is-visible{opacity:1} と詳細度が同じで、
     後ろにある reveal 側が勝ってホバーが効かなくなる。
     background ショートハンドで transition しないこと（解除時に透ける） */
  transition:background-color .2s ease;
}
.solo-cta:hover{background-color:var(--blue-hover)}
.solo-cta img{width:28px;height:28px;flex:0 0 auto}

/* ------------------------------------------------------------
   form（説明会までの流れ ＋ HubSpot 埋め込み）
   ※ Figma は iframe プレースホルダ1枚。フローは旧実装を踏襲する
   ------------------------------------------------------------ */
.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)}
.flow-title{
  font-size:clamp(14px,1.9vw,20px);font-weight:700;line-height:1.4;
  margin:0 0 16px;
}
.flow{
  display:flex;align-items:center;justify-content:space-between;
  margin:0 0 60px;
}
.flow-item{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  width:33%;max-width:33%;
}
.flow-item:nth-child(3){width:31%;max-width:31%}
.flow-item img{display:block;width:100%;height:auto}
.flow-label{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:100%;
  /* 帯の幅に連動。1053px 以上で 20px、狭い側は 10px で下限 */
  font-size:clamp(10px,1.9vw,20px);
  font-weight:700;line-height:1;text-align:center;
}
/* HubSpot の描画前に高さを予約する（読み込み中のガタつき防止）。
   実測（2026-10-16・本番と同じ HubSpot フォーム）:
     1280px → 964px / 1024px → 964px / 390px → 1155px

   値は **実測より 30px 小さく** してある。予約値が実測を下回っていれば、
   予約が余って送信ボタンの下に空白として残ることが起きないため。
   読み込み中のガタつき防止は（30px ぶん浅くなるだけで）ほぼそのまま効く。
   以前は Figma のプレースホルダ寸法（PC 1058 / SP 1176）だったため、
   PC で 90px ほど空白が残っていた。

   margin-bottom:-17px は HubSpot のフォーム自身が持つ下余白の打ち消し。
   フォーム内の div.actions に padding-bottom:17px が付いており、
   そこは中身の無い空白になっている。この要素は HubSpot が iframe の
   中に描画するので親ページの CSS では触れない（別ドキュメントのため）。
   同じ 17px をこちら側で引いて、送信ボタンの下を .form の padding だけにする。
   HubSpot 側がこの余白を変えたら、ここの数値も測り直すこと。 */
.hs-form-wrap{width:100%;min-height:934px;margin-bottom:-17px}

/* ------------------------------------------------------------
   スクロール表示（旧 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 デザインの文字サイズだと帯幅に対して大きいので一段下げる。
   ※ HubSpot のフォーム本体は HubSpot 側のスタイルなので対象外。
     .flow-title / .flow-label は clamp(vw) で自動追従するため指定不要。
   ============================================================ */
@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}

  .solo-lead{font-size:16px}
  .solo-cta{font-size:18px}
  .solo-cta img{width:24px;height:24px}
}

/* ============================================================
   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}

  /* solo: py30・gap15 */
  .solo{padding:30px 20px;gap:15px}
  .solo-lead{width:100%;max-width:335px;font-size:16px;text-align:left}
  .solo-cta{height:50px;padding:0 20px 0 25px;font-size:16px}
  .solo-cta img{width:24px;height:24px}

  /* form: py40・コンテンツ幅335。KV への重なりは30px・上角丸30px */
  .form{
    margin-top:-30px;
    border-radius:30px 30px 0 0;
    padding:40px 20px;
  }
  .form-inner{max-width:335px}
  .flow{margin:0 0 32px}
  .hs-form-wrap{min-height:1125px}   /* 390px の実寸 1155px − 30px */
}

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