@charset "UTF-8";
/* ============================================================
   キカガク 長期コース LP
   PC: 1280px 基準 / SP: 375px 基準（767px 以下）
   ============================================================ */

:root{
  --blue:#006CC8;
  --blue-l:#3389D3;
  --blue-mid:#81B5E4;
  --blue-pale:#E6F0FA;
  --cyan:#65C7EC;
  --yellow:#FCCF00;
  --orange:#F7941E;
  --red:#E61E25;
  --text:#333;
  --gray:#F2F2F2;
  --note:#B3B3B3;
  --grad-orange:linear-gradient(90deg,#FEA72E 0%,#ED412B 100%);
  --header-h:98px;
  --w:1280px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--header-h)}
body{
  margin:0;
  font-family:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",sans-serif;
  color:var(--text);
  background:#fff;
  line-height:1.4;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,p,ul,ol,dl,dd,dt,figure{margin:0;padding:0}
ul,ol{list-style:none}
img{max-width:100%;height:auto;vertical-align:top;border:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
b,strong{font-weight:700}

/* 黄色マーカー（Studio の strong 装飾を再現） */
strong{
  text-decoration:underline;
  text-decoration-color:var(--yellow);
  text-decoration-thickness:.5em;
  text-underline-offset:-.2em;
  text-decoration-skip-ink:none;
}
.em-blue{color:var(--blue)}
.yellow{color:var(--yellow)}

/* ------------------------------------------------------------
   ボタン
   ------------------------------------------------------------ */
.btn-cta,.btn-pill{white-space:nowrap}
.btn-cta{
  display:flex;align-items:center;justify-content:space-around;gap:7px;
  width:460px;height:90px;padding:0 26px 0 50px;
  background:var(--grad-orange);border-radius:15px;
  color:#fff;font-size:32px;font-weight:500;
  transition:opacity .2s,transform .2s;
}
.btn-cta span{padding-bottom:2px}
.btn-cta img{width:19px;height:auto}
.btn-cta:hover{opacity:.85;transform:translateY(-2px)}

.btn-pill{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  width:300px;height:62px;padding:0 19px 0 24px;
  background:var(--grad-orange);border-radius:128px;
  color:#fff;font-size:21px;font-weight:500;
  transition:opacity .2s;
}
.btn-pill:hover{opacity:.85}
.btn-pill img{width:10px;height:auto}

/* ------------------------------------------------------------
   ヘッダー
   ------------------------------------------------------------ */
.header{
  position:fixed;top:0;left:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  width:100%;height:var(--header-h);padding:0 50px;
  background:#fff;
}
.header-logo img{width:153px;height:auto}
.header-nav{display:flex;align-items:center;gap:30px}
.nav-list{display:flex;align-items:center;gap:25px}
.nav-list a{font-size:15px;font-weight:500;transition:color .2s}
.nav-list a:hover{color:var(--blue)}
.hamburger{display:none}

.sp-menu,.sp-menu-overlay{display:none}

/* キャンペーン告知バー */
.campaign-bar{
  position:relative;z-index:10;margin-top:var(--header-h);
  padding:12px 20px;background:#1E2731;color:#fff;text-align:center;
  font-size:18px;font-weight:500;
}
.campaign-bar strong{color:var(--yellow);text-decoration:none}
.campaign-bar:not([hidden])~main .hero{margin-top:0}

/* ------------------------------------------------------------
   KV / HERO
   ------------------------------------------------------------ */
.hero{position:relative;height:830px;margin-top:var(--header-h);overflow:hidden;background:#fff}
.hero-bg{position:absolute;inset:0;background:url(../images/kv_bg.webp) center/cover no-repeat}
.hero-photos{position:absolute;inset:0;display:flex;justify-content:space-between}
.hero-photo{width:39%;max-width:560px;height:100%}
.hero-photo--l{background:url(../images/kv_person_left.webp) 100% 50%/cover no-repeat}
.hero-photo--r{background:url(../images/kv_person_right.webp) 0% 50%/cover no-repeat}
.hero-inner{
  position:relative;z-index:2;
  display:flex;flex-direction:column;justify-content:space-between;align-items:center;
  width:568px;height:100%;margin:0 auto;padding:65px 0 75px;
}
.hero-copy{display:flex;flex-direction:column;align-items:center;gap:55px}
.hero-title{width:568px}
.hero-badges{width:558px}

/* ------------------------------------------------------------
   こんなお悩みありませんか？
   ------------------------------------------------------------ */
.worry{background:var(--gray);padding-bottom:180px}
.worry-head{position:relative;padding:92px 0 9px;text-align:center}
.worry-head-bg{position:absolute;top:0;left:0;width:100%;height:auto}
.worry-head h2{position:relative;font-size:40px;line-height:1.4}
.worry-head u{color:var(--blue);text-decoration:none}

.worry-body{position:relative;max-width:var(--w);margin:0 auto;padding:100px 40px 0}
.worry-list{
  display:grid;grid-template-columns:435px 435px;grid-template-rows:auto auto;
  grid-auto-flow:column;justify-content:space-between;row-gap:40px;
}
.worry-card{
  position:relative;display:flex;align-items:center;justify-content:center;
  min-height:130px;padding:6px 20px;
  background:var(--blue-pale);border:2px solid #000;border-radius:0 65px 65px 65px;
}
.worry-card--r{border-radius:65px 0 65px 65px}
.worry-card p{font-size:25px;font-weight:700;line-height:1.5}
.case-badge{
  position:absolute;top:-20px;left:-20px;
  display:flex;align-items:center;justify-content:center;
  width:70px;height:30px;
  background:var(--red);border:2px solid #000;
  color:#fff;font-size:15px;font-weight:900;
}
.worry-card--r .case-badge{left:auto;right:-20px}
.worry-person{position:absolute;top:74px;left:50%;transform:translateX(-50%);width:280px}

/* ------------------------------------------------------------
   キカガクで学んで解消！（ブルー）
   ------------------------------------------------------------ */
.solve{position:relative;padding:150px 30px 140px;background:var(--blue)}
/* /9 では .solve / .cta::before の背景画像は使わない（実サイト /9 に無く、
   .solve はマークアップ側でも未使用、.cta::before は下部で content:none にしている）。
   画像ファイルも同梱していないので url() は外してある。 */
.solve::before{
  content:"";position:absolute;inset:0;
}
.solve-band{position:absolute;top:-10px;left:0;width:100%;height:auto;z-index:2}
.solve-arrow{position:absolute;top:-55px;left:50%;transform:translateX(-50%);width:18px;z-index:2}
.solve-inner{position:relative;z-index:1;max-width:1220px;margin:0 auto}

.solve-head{display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center}
.solve-head p{font-size:56px;font-weight:700;line-height:1.4;color:#fff}
.solve-head-1{padding-bottom:5px}
.solve-head-2 span{
  display:inline;padding:0 35px 3px;
  background:var(--yellow);border-radius:10px;color:var(--text);
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}

/* キカガクで学ぶと… */
.learn{
  position:relative;width:1170px;max-width:100%;margin:55px auto 0;padding:40px;
  background:var(--blue-mid);border-radius:20px;
}
.learn-person{position:absolute;width:140px}
.learn-person--l{left:42px;top:-26px}
.learn-person--r{right:34px;top:-29px;width:129px}
.learn-title{
  position:relative;z-index:1;
  display:flex;justify-content:center;align-items:center;
  font-size:30px;font-weight:700;line-height:1.4;
}
.learn-title .hl{padding:2px 5px 0;background:var(--yellow);border-radius:8px}
.learn-list{
  position:relative;z-index:1;
  display:grid;grid-template-columns:repeat(3,353px);gap:15px;
  justify-content:center;margin-top:60px;
}
.learn-list li{
  display:flex;align-items:center;justify-content:center;
  height:120px;padding:0 11px;
  background:url(../images/learn_card.webp) center/100% 100% no-repeat;
}
.learn-list p{font-size:20px;font-weight:700;line-height:1.5;text-align:center}

/* DX人材不足 / 成功のチャンス */
.chance{
  width:1170px;max-width:100%;margin:25px auto 0;padding:50px 100px 70px;
  background:#fff;border-radius:20px;
}
.chance-lead{text-align:center}
.chance-lead-s{font-size:30px;font-weight:700;line-height:1.4;padding-bottom:5px}
.chance-lead-l{font-size:38px;font-weight:700;line-height:1.4}
.chance-graph{position:relative;margin-top:60px;text-align:center}
.chance-graph img:first-child{width:100%}
.chance-graph-arrow{width:144px;margin-top:50px}
.chance-catch{margin-top:50px;font-size:38px;font-weight:700;line-height:1.4;text-align:center}
.chance-cards{display:flex;gap:40px;margin-top:60px}
.chance-card{
  flex:1;overflow:hidden;
  background:linear-gradient(#65C7EC 51%,#fff 55%);
  border:2px solid #000;border-radius:30px;
}
.chance-card-head{position:relative;display:flex;align-items:center;justify-content:center;padding:17px 0}
.chance-card-head p{font-size:30px;font-weight:700;color:#fff;padding-left:50px}
.chance-card-head img{position:absolute;top:-38px;left:35px;width:102px}
.chance-card-head img.wide{width:133px;left:17px}
.chance-card:nth-child(2) .chance-card-head p{padding-left:95px}
.chance-card-body{
  display:flex;flex-direction:column;gap:10px;
  padding:30px 25px 22px;
  background:linear-gradient(#fff 79%,rgba(255,255,255,0) 100%);
}
.chance-card-txt{font-size:24px;font-weight:700;line-height:1.4;text-align:justify}
.salary div{display:flex;align-items:center;gap:10px}
.salary dt{font-size:22px;font-weight:700;padding-top:5px}
.salary dd{font-size:22px;font-weight:700;color:var(--orange);line-height:1}
.salary dd b{font-size:42px}
.note{padding-top:15px;font-size:17px;font-weight:400;color:var(--note);line-height:1.4}
.worklist li{display:flex;align-items:flex-end;gap:5px}
.worklist .dot{font-size:22px;font-weight:700}
.worklist b{font-size:32px;color:var(--orange);padding-bottom:3px;line-height:1.3}
.worklist span:last-child{font-size:24px;font-weight:700;padding-bottom:3px}

/* ------------------------------------------------------------
   セクション見出し（背景ロゴ入り）
   ------------------------------------------------------------ */
.sec-head{position:relative;text-align:center}
.sec-head-bg{position:absolute;top:-48px;left:0;width:100%;height:auto}
.sec-head h2{position:relative;font-size:78px;font-weight:700;line-height:1.4;padding-bottom:14px}

/* ------------------------------------------------------------
   卒業生の実績（カルーセル）
   ------------------------------------------------------------ */
.grad{padding-top:65px;background:#fff}
.carousel{position:relative;margin-top:70px;padding:0 65px}
.car-viewport{overflow:hidden}
.car-track{display:flex;transition:transform .45s cubic-bezier(.4,0,.2,1)}
.car-arrow{
  position:absolute;top:45%;transform:translateY(-50%);z-index:3;
  width:45px;height:45px;border:1px solid var(--blue);border-radius:50%;
  background:#fff center/11px 19px no-repeat;
  transition:opacity .2s;
}
.car-arrow:hover{opacity:.7}
.car-arrow.prev{left:30px;background-image:url(../images/icon_arrow_l.svg)}
.car-arrow.next{right:30px;background-image:url(../images/icon_arrow_r.svg)}

.grad-card{flex:0 0 403px;padding:0 40px}
.grad-card-head{display:flex;align-items:center}
.grad-face{
  flex:0 0 134px;height:134px;
  background:center/contain no-repeat;border-radius:50%;
}
.grad-name{
  width:171px;margin-left:18px;padding:5px 0 7px 10px;
  background:var(--blue);
}
.grad-name p{padding:0 6px;font-size:22px;font-weight:700;line-height:1.5;color:#fff}
.grad-outcome{padding:15px 0 30px}
.grad-from{display:flex;align-items:flex-end;font-size:30px;font-weight:700;line-height:1.4}
.grad-from span{font-size:22px;padding-bottom:4px}
.grad-to{font-size:30px;font-weight:700;line-height:1;color:var(--orange)}
.grad-comment{
  position:relative;padding:10px 18px 15px;
  background:var(--blue-pale);border:2px solid #000;border-radius:15px;
  font-size:20px;font-weight:500;line-height:1.5;text-align:justify;
}
.grad-comment::before{
  content:"";position:absolute;top:-22px;left:17px;
  width:37px;height:39px;
  background:url(../images/icon_39x43.svg) 0 50%/contain no-repeat;
}
.grad>.btn-cta{margin:70px auto 0}

/* ------------------------------------------------------------
   カリキュラム（選ばれる理由）
   ------------------------------------------------------------ */
.cur{padding-top:140px;background:#fff}
.cur-wrap{width:min(1180px,100% - 100px);margin-left:auto;margin-right:0}
.cur-title{display:flex;flex-direction:column;padding-left:60px;font-size:56px;line-height:1.4}
.cur-box{
  position:relative;margin-top:10px;padding:60px 60px 50px;
  background:linear-gradient(90deg,var(--blue) 71%,var(--blue-l) 100%);
  border-radius:30px;
}
.cur-illust{position:absolute;top:-165px;right:155px;width:173px}

.cur-points{display:flex;flex-direction:column;gap:45px}
/* 写真 / 見出し / 説明文の 3 要素。1160px 以下で説明文が写真の下へ回り込むため
   グリッドで組んでいる（実サイトと同じ配置） */
.cur-points li{
  display:grid;grid-template-columns:560px 1fr;
  column-gap:45px;row-gap:25px;align-items:start;
}
.cur-photo{grid-column:1;grid-row:1/span 2;height:350px;border-radius:20px;background:center/cover no-repeat}
.cur-txt{grid-column:2;grid-row:1;display:flex;flex-direction:column;gap:25px}
.cur-desc{grid-column:2;grid-row:2}
/* カリキュラム見出しは 1160px 以下で 3 行に切り替わる */
.cur-title-sp{display:none}
.cur-no{font-size:80px;font-weight:700;line-height:1;color:var(--blue-mid)}
.cur-txt h3{font-size:24px;font-weight:700;line-height:1.4;color:var(--yellow)}
.cur-desc .lead{font-size:22px;font-weight:700;line-height:1.5;color:#fff}
.cur-desc p{font-size:20px;font-weight:400;line-height:1.5;color:#fff;text-align:justify}

/* カリキュラム詳細 */
.cur-detail{margin-top:50px;padding:40px;background:#fff;border-radius:20px}
.cur-table{display:block;width:100%}
.cur-detail-icon{display:block;width:101px;margin:10px auto 0}
.practice-catch{display:flex;justify-content:center;align-items:flex-end}
.practice-catch .fk{width:63px}
.practice-catch p{display:flex;align-items:flex-end;gap:0}
.practice-catch b{font-size:26px;font-weight:700;line-height:1.4}
.practice-catch span{font-size:22px;font-weight:700;line-height:1.4}

.topics{display:grid;grid-template-columns:repeat(2,1fr);gap:30px;margin-top:25px}
.topics li{overflow:hidden;background:#fff;border:2px solid #000;border-radius:30px}
.topic-title{padding:10px 0;background:var(--text);color:#fff;font-size:30px;font-weight:700;line-height:1.4;text-align:center}
.topics img{display:block;width:100%;height:112px;object-fit:cover}
.topic-body{display:flex;align-items:center;min-height:93px;padding:15px 25px 22px}
.topic-body p{font-size:20px;font-weight:500;line-height:1.4}

/* ------------------------------------------------------------
   キャリアへのメリット
   ------------------------------------------------------------ */
.merit{padding:80px 0 0;background:#fff}
.merit-title{font-size:54px;font-weight:700;line-height:1.4;text-align:center;padding-bottom:9px}
.merit-cards{display:flex;gap:45px;max-width:1101px;margin:88px auto 0}
.merit-card{flex:1;overflow:hidden;background:#fff;border:2px solid #000;border-radius:30px}
.merit-card-title{padding:10px 0;background:var(--blue);color:#fff;font-size:30px;font-weight:700;line-height:1.4;text-align:center}
.merit-card-img{height:230px;background:center/cover no-repeat}
.merit-card-body{display:flex;flex-direction:column;justify-content:center;gap:25px;padding:15px 25px 22px}
.merit-point{display:flex;align-items:stretch;gap:25px}
.merit-point-no{flex:0 0 64px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.merit-point-no span{font-size:24px;font-weight:700;line-height:1.4}
.merit-point-no b{font-size:54px;line-height:1;color:var(--orange)}
.merit-point p{font-size:20px;font-weight:500;line-height:1.4;text-align:justify}

/* ------------------------------------------------------------
   給付金について
   ------------------------------------------------------------ */
.grant{position:relative;padding-top:145px;background:#fff}
.grant::after{
  content:"";position:absolute;bottom:0;left:0;z-index:0;
  width:100%;height:340px;background:var(--blue-pale);
}
.grant-head{
  position:relative;z-index:1;
  display:grid;grid-template-columns:auto auto;
  justify-content:end;align-items:center;column-gap:5px;
  max-width:var(--w);margin:0 auto;padding-right:140px;
}
.grant-head-1{grid-column:2;grid-row:1;font-size:54px;font-weight:700;line-height:1.4;padding-bottom:14px}
.grant-head-2{grid-column:2;grid-row:2;font-size:54px;font-weight:700;line-height:1.4;padding-bottom:10px}
.grant-head-num{
  grid-column:1;grid-row:1/span 2;
  display:flex;align-items:flex-end;
  font-size:80px;font-weight:700;line-height:1.4;color:var(--blue);
}
.grant-head-num b{font-size:110px;line-height:1}

.grant-box{
  position:relative;z-index:1;
  display:flex;gap:100px;
  width:min(1180px,100% - 100px);margin:35px 0 0;
  padding:85px 90px 85px 80px;
  background:linear-gradient(270deg,var(--blue) 71%,var(--blue-l) 100%);
}
.grant-figure{position:relative;flex:0 0 343px}
.grant-badge{position:absolute;top:-235px;left:0;width:295px}
.grant-price{width:343px}
.grant-txt{display:flex;flex-direction:column;gap:30px}
.grant-title{display:flex;flex-direction:column;font-size:40px;font-weight:700;line-height:1.4;color:#fff}
.grant-desc{font-size:20px;font-weight:400;line-height:1.5;color:#fff;text-align:justify}
.grant-note{font-size:16px;font-weight:400;line-height:1.5;color:#fff}
.grant-banner{
  margin-top:10px;padding:8px 10px;
  background:var(--yellow);
  font-size:27px;font-weight:700;line-height:1.5;text-align:center;
}

/* ------------------------------------------------------------
   説明会担当チーム
   ------------------------------------------------------------ */
.staff{padding:100px 40px 140px;background:var(--blue-pale)}
.staff-head{max-width:1200px;margin:0 auto;text-align:center}
.staff-head h2{font-size:44px;font-weight:700;line-height:1.4}
.staff-head p{margin-top:40px;font-size:22px;font-weight:500;line-height:1.4}
.staff-cards{display:grid;grid-template-columns:repeat(2,400px);gap:35px;justify-content:center;margin-top:45px}
.staff-card{
  display:flex;flex-direction:column;gap:15px;
  padding:20px 25px;background:#fff;border:2px solid #000;border-radius:20px;
}
.staff-card-head{display:flex;align-items:center;gap:15px}
.staff-card-head img{width:100px;height:100px}
.staff-role{font-size:22px;font-weight:700;line-height:1.4;color:var(--blue)}
.staff-name{font-size:20px;font-weight:700;line-height:1.4}
.staff-comment{font-size:18px;font-weight:500;line-height:1.4;text-align:justify}

/* ------------------------------------------------------------
   最下部 CTA
   ------------------------------------------------------------ */
.cta{position:relative;padding:100px 0 75px;overflow:hidden}
.cta::before{
  content:"";position:absolute;inset:0;
}
.cta-gift{position:absolute;top:-2px;left:50%;transform:translateX(-50%);width:135px;z-index:2}
.cta-title{
  position:relative;z-index:1;
  display:flex;justify-content:center;gap:10px;padding-bottom:7px;
  font-size:62px;font-weight:700;line-height:1.4;color:#fff;
}
.cta-body{position:relative;z-index:1;display:flex;justify-content:center;align-items:flex-start;gap:35px;margin-top:65px}
.cta-txt{display:flex;flex-direction:column;gap:54px;width:591px}
.cta-camp{display:flex}
.cta-camp span{background:var(--yellow);font-size:30px;font-weight:700;line-height:1.7}
.cta-camp span:first-child{padding:0 2px 0 15px}
.cta-camp span:last-child{padding:0 5px 0 0}
.cta-lead{display:flex;flex-direction:column;gap:7px}
.cta-lead>p:first-child{display:flex;flex-wrap:wrap;font-size:28px;font-weight:700;line-height:1.4;color:var(--yellow)}
.cta-desc{font-size:22px;font-weight:500;line-height:1.8;color:#fff}
.cta-illust{width:467px}
.cta>.btn-cta{position:relative;z-index:1;margin:65px auto 0}

/* ------------------------------------------------------------
   フッター
   ------------------------------------------------------------ */
.footer{
  display:flex;align-items:center;justify-content:space-between;
  height:95px;padding:0 105px 0 110px;background:#fff;
}
.footer-logo img{width:153px}
.footer-right{display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.footer-nav{display:flex;gap:17px}
.footer-nav a{font-size:16px;font-weight:500;transition:color .2s}
.footer-nav a:hover{color:var(--blue)}
.copyright{font-size:14px;font-weight:500;color:#808080}

/* SP追従CTA（PCでは非表示） */
.sticky-cta{display:none}

/* ------------------------------------------------------------
   スクロール表示アニメーション
   ------------------------------------------------------------ */
.js-reveal{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s ease}
.js-reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js-reveal{opacity:1;transform:none;transition:none}
}

/* ============================================================
   〜1160px（Studio の @small）
   Studio 版のブレークポイントは 1160 / 930 / 640 / 320px。
   ここから下の 3 ブロックはその実指定に合わせている。
   ============================================================ */
@media (max-width:1160px){
  /* ヘッダー：グローバルナビが消えてハンバーガーに変わる */
  .header{justify-content:flex-start;padding:0 40px}
  .header-nav{margin-left:auto;gap:30px}
  .nav-list{display:none}
  .hamburger{
    display:flex;flex-direction:column;justify-content:center;gap:18px;
    width:56px;height:56px;margin-left:30px;
  }
  .hamburger span{display:block;width:40px;height:2px;margin-left:auto;background:var(--text);transition:transform .3s,opacity .3s}
  .hamburger[aria-expanded="true"] span:first-child{transform:translateY(10px) rotate(20deg)}
  .hamburger[aria-expanded="true"] span:last-child{transform:translateY(-10px) rotate(-20deg)}

  .sp-menu{
    position:fixed;top:var(--header-h);right:0;z-index:19;
    display:flex;flex-direction:column;gap:28px;
    width:100%;padding:35px 30px 40px;
    background:#fff;box-shadow:0 12px 24px rgba(0,0,0,.12);
  }
  .sp-menu[hidden]{display:none}
  .sp-menu ul{display:flex;flex-direction:column;gap:22px}
  .sp-menu a:not(.btn-pill){font-size:17px;font-weight:700}
  .sp-menu .btn-pill{width:100%;height:56px;font-size:17px}
  .sp-menu-overlay{position:fixed;inset:var(--header-h) 0 0;z-index:18;background:rgba(0,0,0,.35)}
  .sp-menu-overlay[hidden]{display:none}

  /* HERO */
  .hero-title,.hero-badges{width:550px}
  .hero-photos{top:auto;bottom:0;height:581px}
  .hero-photo{width:36vw;max-width:none}

  /* お悩み */
  .worry{padding-bottom:90px}
  .worry-body{padding:60px 40px 0}
  .worry-list{grid-template-columns:1fr 1fr;column-gap:40px;justify-content:stretch}
  .worry-card p{font-size:22px}
  .worry-card--r{border-radius:0 65px 65px 65px}
  .worry-card--r .case-badge{left:-20px;right:auto}
  .worry-person{position:static;display:block;width:240px;margin:35px auto 0;transform:none}

  /* ブルーセクション */
  .solve{padding:150px 30px 110px}
  .solve-arrow{top:-50px;width:15px}
  .solve-head p{font-size:53px}
  .solve-head-2 span{font-size:50px;padding:0 15px 3px}

  .learn-title{flex-wrap:wrap;font-size:20px}
  .learn-list{grid-template-columns:repeat(3,1fr)}
  .learn-list p{font-size:18px}

  .chance{gap:50px;padding:50px 60px 70px}
  .chance-cards{gap:30px}
  .chance-card-head{height:69px}
  .chance-card-head p{font-size:25px;padding-left:40px}
  .chance-card:nth-child(2) .chance-card-head p{font-size:25px;padding-left:85px}
  .chance-card-head img{top:-25px;left:14px;width:21%}
  .chance-card-head img.wide{top:-10px;left:12px;width:27%}
  .chance-card-body{gap:10px}
  /* 職種名と金額は縦積みになる */
  .salary div{flex-direction:column;align-items:flex-start;gap:0}
  .salary dd{font-size:42px}
  .salary dd b{font-size:66px}
  .note{font-size:18px}
  .chance-card:nth-child(2) .chance-card-txt{width:100%;text-align:justify}
  .worklist li{flex-wrap:wrap}
  .worklist b{font-size:37px}
  .worklist span:last-child{flex:0 0 100%;padding:0 0 3px 23px}
  .worklist li:nth-child(2) span:last-child{padding-left:26px}

  /* 卒業生の実績 */
  .sec-head-bg{height:90px;object-fit:cover}
  .sec-head h2{font-size:60px}
  /* 1 枚表示になり、カード内容はカード幅の 80% に収まる（実サイトと同じ） */
  .carousel{width:auto;margin-left:100px;margin-right:100px;padding:0}
  .grad-card{flex:0 0 100%}
  .grad-card-head,.grad-card-body{width:80%;margin-left:auto;margin-right:auto}
  .grad-comment::before{top:-24px;left:15px;height:40px}

  /* カリキュラム */
  .cur-title{font-size:50px}
  .cur-title-pc{display:none}
  .cur-title-sp{display:block}
  .cur-box{padding:60px 70px 50px}
  .cur-illust{left:auto;right:33px;top:-144px;width:150px}
  /* 写真＋見出しが横並び、説明文はその下に全幅で回り込む。
     写真幅は Studio の gap 補正込みで calc(60% - 40px*0.4) */
  .cur-points li{grid-template-columns:calc(60% - 16px) 1fr;column-gap:40px;row-gap:30px;align-items:center}
  .cur-photo{grid-row:1;grid-column:1;width:auto;height:auto;aspect-ratio:560/350}
  .cur-txt{grid-column:2;grid-row:1}
  .cur-desc{grid-column:1/-1;grid-row:2}
  .cur-txt h3{font-size:28px}
  .topics{gap:15px}
  .topic-title{font-size:2.77vw}
  .topic-body p{font-size:16px}

  /* キャリアへのメリット */
  .merit-title{font-size:48px}
  .merit-cards{gap:35px;max-width:none;margin-top:60px;padding:0 40px}
  .merit-card-title{font-size:2.77vw}
  .merit-card-img{height:200px}
  .merit-point{gap:20px}

  /* 給付金 */
  .grant{margin-top:-60px;padding-top:80px}
  .grant-head{
    display:flex;flex-direction:column;align-items:flex-end;
    width:85%;margin:60px 100px 0 auto;padding:0;
  }
  .grant-head-1{font-size:44px;padding-bottom:0}
  .grant-head-2{font-size:44px}
  .grant-head-num{font-size:70px}
  .grant-head-num b{font-size:96px}
  .grant-box{gap:40px;padding:85px 0}
  .grant-figure{flex:0 0 40%}
  .grant-badge{display:none}
  .grant-price{width:100%;height:auto}

  /* 説明会担当チーム */
  .staff{padding:80px 40px 100px}
  .staff-cards{grid-template-columns:repeat(2,370px);gap:20px}
  .staff-role{font-size:20px}
  .staff-comment{font-size:19px}

  /* 最下部CTA */
  .cta{padding:100px 30px 75px}
  .cta-title{font-size:55px}
  .cta-body{gap:0;width:100%}
  .cta-txt{width:auto}
  .cta-illust{width:460px}

  /* フッター：1160px 以下はロゴとリンクが縦積みになる */
  .footer{
    flex-direction:column;align-items:flex-start;justify-content:space-between;
    gap:80px;height:auto;padding:25px 75px 25px 80px;
  }
  .footer-right{align-items:flex-end;gap:30px}
  .footer-nav{flex-wrap:wrap;justify-content:flex-start;gap:10px 20px}
}

/* ============================================================
   〜930px（Studio の @tablet）
   ============================================================ */
@media (max-width:930px){
  /* ヘッダー */
  .header{padding:0 30px 0 35px}
  .header-nav{gap:25px}
  .hamburger{margin-left:25px}
  .btn-pill{width:260px;height:58px;font-size:19px}

  /* HERO */
  .hero{height:940px}
  .hero-inner{padding:35px 0 30px}
  .hero-copy{gap:35px}
  .hero-title,.hero-badges{width:500px}
  .hero-photos{height:455px;overflow:hidden}
  .hero-photo{position:absolute;top:0;width:61%;height:100%}
  .hero-photo--l{left:0;right:auto}
  .hero-photo--r{right:0;left:auto}

  /* お悩み */
  .worry-head h2{font-size:32px}
  .worry-head-bg{top:7px}
  .worry-body{padding:50px 40px 0}
  .worry-list{column-gap:20px}
  .worry-card,.worry-card--r{border-radius:15px}
  .worry-card p{font-size:18px;padding:15px;text-align:justify}
  .case-badge{top:-15px;left:-2px;font-size:16px}
  .worry-card--r .case-badge{left:-2px;right:auto}
  .worry-person{width:200px}

  /* ブルーセクション */
  .solve{padding:120px 30px 80px}
  .solve-arrow{top:-45px;width:13px}
  .solve-head{gap:10px}
  .solve-head p{font-size:42px}
  .solve-head-2 span{font-size:42px;border-radius:0;padding:0 17px 3px}

  .learn{margin-top:40px;padding:40px 20px 20px}
  .learn-person--l{left:22px;width:16%}
  .learn-person--r{right:22px;width:15%}
  .learn-title{flex-direction:column;font-size:24px;margin-bottom:45px}
  .learn-title .hl{align-self:center}
  .learn-list{grid-template-columns:repeat(2,1fr);margin-top:0}
  .learn-list li{height:100px;border-radius:15px}
  .learn-list p{font-size:16px;text-align:justify}

  .chance{padding:50px 30px}
  .chance-lead{gap:40px}
  .chance-lead-s{font-size:25px}
  .chance-lead-l{font-size:32px}
  .chance-graph-arrow{width:120px}
  .chance-catch{font-size:32px}
  .chance-cards{flex-direction:column;gap:35px}
  .chance-card{width:100%}
  .chance-card-head{height:auto}
  .chance-card-head p{font-size:32px;padding-left:30px}
  .chance-card:nth-child(2) .chance-card-head p{font-size:32px;padding-left:55px}
  .chance-card-head img{top:-25px;left:22px;width:80px}
  .chance-card-head img.wide{top:-16px;left:0;width:113px}
  .chance-card-body{padding:30px 35px 22px}
  /* 2 項目が横に並んで折り返す */
  .salary,.worklist{display:flex;flex-wrap:wrap;gap:10px 40px}

  /* 卒業生の実績 */
  .grad{gap:60px}
  .sec-head h2{font-size:50px}
  .carousel{margin-left:50px;margin-right:50px}

  /* カリキュラム */
  .cur{margin-top:-30px;padding-top:100px}
  .cur-wrap{width:100%;margin:30px 0 0}
  .cur-title{font-size:40px}
  .cur-box{border-radius:30px;padding:40px 60px 50px}
  .cur-illust{right:40px;top:-108px;width:110px}
  .cur-points{gap:25px}
  /* 見出し → 写真 → 説明文 の縦積み */
  .cur-points li{grid-template-columns:1fr;row-gap:20px}
  .cur-txt{grid-column:1;grid-row:1;gap:10px}
  .cur-photo{grid-column:1;grid-row:2;width:100%;aspect-ratio:560/350}
  .cur-desc{grid-column:1;grid-row:3}

  .cur-detail{padding:40px 20px}
  .cur-detail-icon{width:60px}
  .practice-catch .fk{width:50px}
  .practice-catch b{font-size:22px}
  .practice-catch span{font-size:18px}
  .topics{grid-template-columns:1fr;gap:15px 30px}
  .topic-title{font-size:28px}
  .topic-body{gap:30px}

  /* キャリアへのメリット */
  .merit{padding-top:60px}
  .merit-cards{flex-direction:column;align-items:center;margin-top:40px;padding:0}
  .merit-card{width:80%}
  .merit-card-title{font-size:28px}
  .merit-card-body{gap:30px}
  .merit-point-no{height:100%}
  .merit-point-no span{font-size:20px}
  .merit-point-no b{font-size:44px}

  /* 給付金 */
  .grant-head{width:auto;margin:60px 0 0}
  .grant-head-1{font-size:42px}
  .grant-head-2{font-size:38px}
  .grant-head-num{font-size:60px}
  .grant-head-num b{font-size:82px}
  .grant-box{flex-direction:column;align-items:center;width:100%;border-radius:30px;padding:60px 0}
  .grant-figure{flex:none;width:410px;max-width:100%}
  .grant-price{width:100%}

  /* 説明会担当チーム */
  .staff{width:85%;margin:0 auto;padding:60px 0}
  .staff-head h2{font-size:38px}
  .staff-cards{grid-template-columns:1fr;gap:25px}
  .staff-card{width:100%}

  /* 最下部CTA */
  .cta{padding:100px 30px 75px}
  .cta-title{flex-direction:column;align-items:center;gap:0;padding-bottom:0}
  .cta-title span:last-child{padding-bottom:7px}
  .cta-body{flex-direction:column;align-items:center;gap:35px}
  .cta-txt{gap:40px}
  .cta-camp{flex-direction:column;align-items:flex-start}
  .cta-camp span{font-size:32px}
  .cta-camp span:first-child{padding:0 15px}
  .cta-camp span:last-child{padding:0 5px 3px 15px}
  .cta>.btn-cta{margin-top:45px}

  /* フッター */
  .footer{flex-direction:column;align-items:center;gap:30px;padding:25px 50px 15px}
  .footer-right{align-items:center;justify-content:flex-end;gap:30px}
  .footer-nav{justify-content:center;gap:15px 20px}
  .footer-nav a{font-size:14px}
}

/* ============================================================
   SP（640px 以下 / 375px 基準）= Studio の @mobile
   ============================================================ */
@media (max-width:640px){
  :root{--header-h:60px}

  /* 930px 以下の指定のうち、640px 以下では基準へ戻すもの
     （Studio は @mobile で個別に指定し直しているため） */
  .carousel{margin-left:0;margin-right:0}
  .grad-card-head,.grad-card-body{width:auto;margin-left:0;margin-right:0}
  .salary,.worklist{display:block;gap:0}
  .salary div{flex-direction:row;align-items:center;gap:10px}
  .worklist li{flex-wrap:nowrap}
  .worklist span:last-child{flex:0 1 auto;padding:0 0 3px}
  .worry-card p{padding:0}
  .merit-card{width:auto}
  .staff{width:auto;margin:0}
  .staff-comment{font-size:18px}
  .learn-title{margin-bottom:0}
  .topic-body{gap:0}
  .grant{margin-top:0}
  .grant-badge{display:block}
  .cur{margin-top:0}
  .solve-head{gap:5px}
  /* 930px 以下で 42px を指定しているが、640px 以下は親の 25px に戻る */
  .solve-head-2 span{font-size:inherit}
  .chance-card-head img.wide{top:-26px}
  .worklist li:nth-child(2) span:last-child{padding-left:0}
  .cur-points li{align-items:start}

  /* ボタン */
  .btn-cta{width:290px;height:70px;padding:0 20px;font-size:20px;font-weight:700;border-radius:15px}
  .btn-cta img{width:8px}

  /* ヘッダー */
  .header{height:60px;padding:0 30px}
  .header-logo img{width:102px}
  .header-nav{display:none}
  .hamburger{
    display:flex;flex-direction:column;justify-content:center;gap:9px;
    width:56px;height:56px;margin-right:-14px;
  }
  .hamburger span{display:block;width:30px;height:2px;margin-left:auto;background:var(--text);transition:transform .3s,opacity .3s}
  .hamburger[aria-expanded="true"] span:first-child{transform:translateY(5.5px) rotate(20deg)}
  .hamburger[aria-expanded="true"] span:last-child{transform:translateY(-5.5px) rotate(-20deg)}

  .sp-menu{
    position:fixed;top:60px;right:0;z-index:19;
    display:flex;flex-direction:column;gap:28px;
    width:100%;padding:35px 30px 40px;
    background:#fff;box-shadow:0 12px 24px rgba(0,0,0,.12);
  }
  .sp-menu[hidden]{display:none}
  .sp-menu ul{display:flex;flex-direction:column;gap:22px}
  .sp-menu a:not(.btn-pill){font-size:17px;font-weight:700}
  .sp-menu .btn-pill{width:100%;height:56px;font-size:17px}
  .sp-menu-overlay{position:fixed;inset:60px 0 0;z-index:18;background:rgba(0,0,0,.35)}
  .sp-menu-overlay[hidden]{display:none}

  .campaign-bar{padding:10px 20px;font-size:14px;line-height:1.5}

  /* HERO */
  .hero{height:638px}
  .hero-photos{display:block;inset:auto 0 0;height:320px}
  .hero-photo{position:absolute;top:0;width:236px;max-width:none;height:320px}
  .hero-photo--l{left:0}
  .hero-photo--r{right:0}
  .hero-inner{display:block;width:100%;padding:25px 30px 0}
  .hero-copy{gap:17px}
  .hero-title,.hero-badges{width:100%}
  .hero-inner .btn-cta{position:absolute;left:50%;bottom:0;transform:translateX(-50%)}
  .hero-inner .btn-cta:hover{transform:translateX(-50%) translateY(-2px)}

  /* お悩み */
  .worry{padding-bottom:60px}
  .worry-head{padding:92px 0 9px}
  .worry-head-bg{top:40px}
  .worry-head h2{font-size:22px}
  .worry-body{padding:50px 28px 0}
  .worry-list{grid-template-columns:1fr;grid-auto-flow:row;row-gap:30px}
  .worry-card,.worry-card--r{min-height:92px;padding:10px 15px;border-radius:15px}
  .worry-card p{font-size:16px;line-height:1.5}
  .case-badge{top:-13px;left:0;font-size:16px}
  .worry-card--r .case-badge{right:auto;left:0}
  .worry-person{position:static;display:block;width:150px;margin:25px auto 0;transform:none}

  /* ブルーセクション */
  .solve{padding:70px 0 33px}
  .solve-band{top:-1px}
  .solve-arrow{top:-30px;width:12px}
  .solve-inner{padding:0 28px}
  .solve-head p{font-size:25px}
  .solve-head-2 span{padding:0 17px 2px}

  .learn{width:100%;margin-top:35px;padding:40px 10px}
  .learn-person--l{left:22px;top:-19px;width:48px}
  .learn-person--r{right:15px;top:-21px;width:45px}
  .learn-title{flex-direction:column;gap:1px;font-size:24px}
  .learn-title .hl{align-self:center}
  .learn-list{grid-template-columns:repeat(2,1fr);gap:10px;margin-top:35px}
  .learn-list li{height:100px;padding:0 8px;border-radius:15px}
  .learn-list p{font-size:13px;line-height:1.5}

  .chance{width:auto;margin:35px -9px 0;padding:25px 20px}
  .chance-lead-s{font-size:20px}
  .chance-lead-l{font-size:24px}
  .chance-graph{margin-top:30px}
  .chance-graph-arrow{width:100px;margin-top:25px}
  .chance-catch{margin-top:25px;font-size:24px}
  .chance-cards{flex-direction:column;gap:30px;margin-top:35px}
  .chance-card{border-radius:30px}
  .chance-card-head p,.chance-card:nth-child(2) .chance-card-head p{font-size:24px;padding-left:60px}
  .chance-card-head img{top:-26px;left:14px;width:72px}
  .chance-card-head img.wide{width:94px;left:6px}
  .chance-card-body{padding:20px 18px 15px}
  .chance-card-txt{font-size:18px}
  .salary dt{font-size:18px}
  .salary dd{font-size:18px}
  .salary dd b{font-size:34px}
  .note{font-size:13px;padding-top:10px}
  .worklist .dot{font-size:18px}
  .worklist b{font-size:33px}
  .worklist span:last-child{font-size:20px}

  /* セクション見出し */
  .sec-head{padding-top:70px}
  .sec-head-bg{top:30px}
  .sec-head h2{font-size:44px}

  /* 卒業生の実績 */
  .grad{padding-top:40px}
  .carousel{margin-top:45px;padding:0 28px}
  .grad-card{flex:0 0 319px;padding:0 40px}
  .grad-card-head{padding:0 15px}
  .grad-face{flex-basis:124px;height:124px}
  .grad-name{margin-left:10px;padding:5px 0 7px 10px}
  .grad-name p{font-size:15px;line-height:1.5}
  .grad-card-body{padding:0 15px}
  .grad-from{font-size:30px}
  .grad-to{font-size:30px}
  .grad-comment{font-size:18px;line-height:1.5}
  .car-arrow{top:50%}
  .car-arrow.prev{left:0}
  .car-arrow.next{right:0}
  .grad>.btn-cta{margin-top:45px}

  /* カリキュラム */
  .cur{padding-top:60px}
  .cur-wrap{width:100%}
  .cur-title{padding:0 28px;font-size:23px}
  .cur-box{margin-top:25px;padding:12px 0 30px;border-radius:30px}
  .cur-illust{top:-49px;right:30px;width:50px}
  .cur-points{gap:35px;padding:0 28px}
  .cur-points li{display:grid;grid-template-columns:1fr;gap:20px}
  .cur-txt{display:contents}
  .cur-no{order:1;grid-area:auto}
  .cur-txt h3{order:2;grid-area:auto;font-size:24px}
  .cur-photo{order:3;grid-area:auto;width:100%;height:199px;aspect-ratio:auto}
  .cur-desc{order:4;grid-area:auto}

  .cur-detail{margin:35px 28px 0;padding:20px 15px}
  .cur-detail-icon{width:70px}
  .practice-catch{align-items:center}
  .practice-catch .fk{width:40px}
  .practice-catch p{flex-wrap:wrap;justify-content:center}
  .practice-catch b{font-size:18px}
  .practice-catch span{font-size:15px}
  .topics{grid-template-columns:1fr;gap:20px;margin-top:20px}
  .topic-title{font-size:22px}
  .topics img{height:80px}
  .topic-body{min-height:0;padding:12px 15px 15px}
  .topic-body p{font-size:16px}

  /* メリット */
  .merit{padding-top:40px}
  .merit-title{font-size:32px}
  .merit-cards{flex-direction:column;gap:30px;max-width:none;margin-top:23px;padding:0 30px}
  .merit-card-title{font-size:20px}
  .merit-card-img{height:140px}
  .merit-card-body{gap:30px;padding:15px 18px 20px 15px}
  .merit-point{gap:13px}
  .merit-point-no{flex-basis:45px}
  .merit-point-no span{font-size:17px}
  .merit-point-no b{font-size:34px}
  .merit-point p{font-size:20px}

  /* 給付金 */
  .grant{padding-top:45px}
  .grant-head{
    display:grid;grid-template-columns:auto auto;
    align-items:center;justify-content:start;justify-items:start;
    width:auto;margin:0;padding:0 28px;column-gap:15px;
  }
  .grant-head-1{grid-column:1/span 2;grid-row:1;font-size:30px;padding-bottom:5px}
  .grant-head-num{grid-column:1;grid-row:2;font-size:40px}
  .grant-head-num b{font-size:62px}
  .grant-head-2{grid-column:2;grid-row:2;font-size:30px;padding-bottom:0}
  .grant-box{
    flex-direction:column;align-items:center;gap:35px;
    width:100%;margin-top:30px;padding:45px 36px 30px;border-radius:30px;
  }
  .grant-figure{flex:none;width:100%;max-width:304px;padding-top:60px}
  .grant-badge{top:0;left:50%;transform:translateX(-50%);width:90px}
  .grant-price{width:100%}
  .grant-title{font-size:27px}
  .grant-title .yellow{font-size:30px}
  .grant-banner{padding:10px 20px 12px;font-size:24px}

  /* 説明会担当 */
  .staff{padding:38px 28px}
  .staff-head h2{font-size:26px}
  .staff-head p{margin-top:25px;font-size:20px}
  .staff-cards{grid-template-columns:1fr;gap:25px;margin-top:37px}
  .staff-card{padding:18px}
  .staff-role{font-size:20px}
  .staff-name{font-size:19px}

  /* 最下部CTA */
  .cta{padding:55px 28px 38px}
  .cta-gift{width:100px}
  .cta-title{flex-direction:column;align-items:center;gap:0;font-size:40px}
  .cta-body{flex-direction:column;align-items:center;gap:35px;margin-top:35px}
  .cta-txt{gap:25px;width:100%}
  .cta-camp{flex-direction:column;align-items:flex-start}
  .cta-camp span{font-size:26px;line-height:1.7}
  .cta-camp span:last-child{padding:0 3px 2px 10px}
  .cta-lead>p:first-child{flex-direction:column;font-size:24px}
  .cta-desc{font-size:20px}
  .cta-illust{width:300px}
  .cta>.btn-cta{margin-top:35px;width:293px}

  /* フッター */
  .footer{
    flex-direction:column;gap:15px;height:auto;
    padding:22px 30px calc(15px + 80px);
  }
  .footer-right{align-items:center;gap:20px}
  .footer-nav{flex-wrap:wrap;justify-content:center;gap:12px 20px}
  .footer-nav a{font-size:12px}
  .copyright{font-size:14px}

  /* 追従CTA */
  .sticky-cta{
    position:fixed;bottom:0;left:0;z-index:15;
    display:flex;justify-content:center;
    width:100%;padding:15px 30px;
    background:rgba(255,255,255,.8);
  }
  .sticky-cta .btn-cta{width:315px;height:50px;font-size:20px}
}

/* ============================================================
   /9 固有のスタイル
   ベースは Studio 版トップ（site/）と共通。/9 で構成が変わる
   ところだけをここで上書きしている。
   ※ ベース側のメディアクエリより後ろに置いているため、SP だけ値が
     異なるものは末尾の SP ブロックで指定し直している。
   ============================================================ */

/* ------------------------------------------------------------
   給付金バナー（/5・/9 のみ）
   ------------------------------------------------------------ */
.kyufu-banner{padding:30px 0;background:#EEF7FD}
.kyufu-banner a{display:flex;flex-direction:column;align-items:center}
.kyufu-banner-lead{
  display:flex;align-items:center;justify-content:center;
  font-size:24px;font-weight:700;line-height:1.4;color:#06263F;
}
.kyufu-banner-lead .slash{font-size:32px;font-weight:600}
.kyufu-banner-lead b{color:#F56922}
.kyufu-banner img{width:800px;max-width:100%;height:auto;margin-top:5px}

/* ------------------------------------------------------------
   いま AI・データサイエンスを学ぶべき理由（/5・/9 のみ）
   / の .solve に相当するが、背景テクスチャがなく余白も浅い
   ------------------------------------------------------------ */
.why{padding:50px 30px 70px;background:var(--blue)}
.why-title{
  display:flex;align-items:center;justify-content:center;
  font-size:56px;font-weight:700;line-height:1.4;
  color:#fff;text-align:center;
}
.why-title span:first-child{padding-bottom:5px}
.why-title .hl{
  padding:0 35px 3px;margin:0 10px 0 5px;
  background:var(--yellow);border-radius:10px;color:var(--text);
}
.why .chance{margin-top:26px}

/* ------------------------------------------------------------
   卒業生の実績（/9 は見出し・コメント・末尾CTAなし）
   ------------------------------------------------------------ */
.grad{padding-top:0}
.grad .carousel{margin-top:0}

/* ------------------------------------------------------------
   最下部 CTA の注記（/5・/9 のみ）
   ------------------------------------------------------------ */
.cta-notes{margin-top:65px;text-align:center}
.cta-notes li{font-size:16px;font-weight:400;line-height:1.5;color:#fff}

/* ------------------------------------------------------------
   PC のみ差し替え（SP はベース側の値をそのまま使う）
   ------------------------------------------------------------ */
@media (min-width:641px){
  /* 卒業生カード: 外側 40px 10px ＋ 枠側 20px（実サイトと同じ二重構造） */
  .grad-card{padding:40px 10px}

  /* カリキュラム: 上余白が浅く、詳細図の下の「実践期間」ブロックがない */
  .cur{padding-top:30px}
  .cur-detail{margin-top:30px;padding:40px}
  .cur-table{width:100%}
}

/* ------------------------------------------------------------
   SP（~767px）で /5・/9 だけ値が異なるもの
   ------------------------------------------------------------ */
@media (max-width:640px){
  .kyufu-banner{padding:20px 0}
  .kyufu-banner-lead{font-size:14px}
  .kyufu-banner-lead .slash{font-size:18px}
  .kyufu-banner img{width:300px;margin-top:5px}

  .why{padding:30px 0 33px}
  .why-title{
    flex-direction:column;align-items:center;
    height:64px;padding:50px 0;font-size:25px;
  }
  .why-title span:first-child{padding-bottom:2px}
  .why-title .hl{margin:0;padding:0 14px 2px;border-radius:8px}
  /* 実サイトは左右 18px の余白がある（幅 338px）。
     ベースの -9px の負マージンだと横スクロールが出るため打ち消す */
  .why .chance{margin:0 18px}

  .cta-notes{margin-top:35px;padding:0 20px}
  .cta-notes li{font-size:12px}

  /* /9 の「働き方の幅が広がる」は文が長く、実サイトでも
     オレンジ語と続きの文が 2 行に分かれる */
  .worklist li{flex-wrap:wrap}
  .worklist span:last-child{flex:0 0 100%}
}

/* ------------------------------------------------------------
   画面端に接するボックス（カリキュラム / 給付金）
   実サイトは 1180px で頭打ちにせず「片側だけ画面端に接して
   反対側だけ角丸」になる。1280px 超で崩れていたので合わせる。
   ------------------------------------------------------------ */
@media (min-width:641px){
  /* カリキュラム: 右端に接し、左側だけ角丸。箱は 1540px 上限 */
  .cur-wrap{width:1540px;max-width:calc(100% - 100px)}
  .cur-box{width:100%;padding:60px 60px 50px;border-radius:30px 0 0 30px}

  /* 給付金: 実サイトは箱が width:1540px / max-width:100%、
     ラッパが max-width:calc(100% - 100px) で、両者の小さい方が幅になる。
     見出しはラッパ幅の 70% で折り返す flex。負のマージンは無い。 */
  .grant{display:flex;flex-direction:column;align-items:flex-start;padding:145px 0 0}
  .grant-inner{
    position:relative;z-index:1;
    display:flex;flex-direction:column;align-items:flex-end;
    margin:0 100px 0 0;
    max-width:calc(100% - 100px);
  }
  .grant-head{
    display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:flex-end;
    width:70%;max-width:70%;margin:0;padding:0 40px 0 0;
  }
  .grant-head-1{font-size:54px;font-weight:700;line-height:1.4;padding-bottom:14px}
  .grant-head-2{
    display:flex;align-items:flex-end;
    font-size:54px;font-weight:700;line-height:1.4;padding-bottom:10px;
  }
  .grant-head-num{
    display:flex;align-items:flex-end;
    font-size:80px;font-weight:700;line-height:1.4;color:var(--blue);
  }
  .grant-head-num b{font-size:110px;line-height:1}
  .grant-box{width:1540px;max-width:100%;margin:0;border-radius:0 30px 30px 0}
}

/* 1161px 以上は実サイトと同じパディング。
   ベース（site/）は 768〜1279px で 60px 40px に縮めているが、
   実サイトは幅によらず 85px 90px 85px 80px のままだった。 */
@media (min-width:1161px){
  .grant-box{padding:85px 90px 85px 80px}
}

/* カリキュラムのブレークポイント別（実サイトの実値） */
@media (min-width:641px) and (max-width:1160px){
  .cur-box{padding:60px 70px 50px}
}
@media (min-width:641px) and (max-width:930px){
  .cur-wrap{max-width:100%}
  .cur-box{border-radius:30px;padding:40px 60px 50px}
  .cur-detail{padding:40px 20px}
}

/* ~1160px は見出しの折返し幅が変わる（Studio 側のブレークポイント） */
@media (min-width:641px) and (max-width:1160px){
  /* 見出しが縦積み・左寄せになり、ラッパも中央寄せに変わる */
  .grant-inner{align-items:center;margin:60px 100px 0 0}
  .grant-head{
    flex-flow:column;justify-content:flex-start;align-items:flex-start;
    width:85%;max-width:85%;padding:0;
  }
  .grant-box{padding:85px 0;justify-content:center;align-items:center}
  .grant-head-1{font-size:44px;line-height:1;padding:0}
  .grant-head-2{font-size:44px;padding-bottom:0}
  .grant-head-num{font-size:70px}
  .grant-head-num b{font-size:100px}
}

/* ~930px は箱が全角丸・全幅になり、見出しがさらに小さくなる */
@media (min-width:641px) and (max-width:930px){
  .grant-box{width:100%;padding:60px 0;border-radius:30px}
  .grant-head-1{font-size:42px}
  .grant-head-2{font-size:38px}
  .grant-head-num{font-size:60px}
  .grant-head-num b{font-size:90px}
}

/* SP は 1 カラム。見出しは「受講料の最大」で改行させる */
@media (max-width:640px){
  .grant-inner{display:block}
  .grant-head{
    display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:flex-end;
    padding:0 28px;
  }
  .grant-head-1{flex:0 0 100%;font-size:30px;padding-bottom:5px}
  .grant-head-2{display:flex;align-items:flex-end;gap:15px;font-size:30px;padding-bottom:0}
  .grant-head-num{display:flex;align-items:flex-end;font-size:40px;color:var(--blue)}
  .grant-head-num b{font-size:62px;line-height:1}
}

/* ------------------------------------------------------------
   最下部 CTA（/9 は白背景）
   site/ は青い斜めストライプの背景画像＋白文字だが、
   /9 は背景色 #fff・画像なし。三角（吹き出しの尻尾）も
   その背景画像の一部だったため、::before を消すと一緒に消える。
   ------------------------------------------------------------ */
.cta{background:#fff}
.cta::before{content:none}
.cta-title{color:var(--text)}
.cta-title .yellow{color:var(--blue)}
.cta-camp span{background:var(--blue);color:#fff}
.cta-lead>p:first-child{color:var(--blue)}
.cta-desc{color:var(--text)}
/* Studio 版のバグを修正済み：実サイトは注記が白文字のままで、白背景の CTA
   セクションに同化して PC では読めなかった（CTA セクションを白背景にした際の
   直し忘れと思われる）。SP で実サイトが使っている #303030 に合わせた。
   README のバグ一覧を参照。 */
.cta-notes li{color:#303030}

/* SP は実サイトも #303030 で中央寄せ */
@media (max-width:640px){
  .cta-notes li{text-align:center}
}

/* ------------------------------------------------------------
   SP / 中間幅で /5・/9 だけ表示が変わるもの
   （実サイトの CSS 実値に合わせて追加）
   ------------------------------------------------------------ */

/* 卒業生カード: 実サイトは中に黒枠・角丸16px・影付きのカードがある */
.grad-frame{
  display:flex;flex-direction:column;align-items:center;
  width:100%;padding:20px;
  border:1px solid #000;border-radius:16px;
  box-shadow:0 5px 5px rgba(0,0,0,.2);
}
@media (max-width:1160px){
  .grad-frame{padding:10px}
}
@media (max-width:640px){
  .grad-frame{padding:0 15px}
}
@media (max-width:320px){
  .grad-frame{padding:10px 15px}
}

/* カリキュラムの 01/02/03 は 1160px 以下で非表示 */
@media (max-width:1160px){
  .cur-points{display:none}
}

/* 給付金の説明文と注記は 930px 以下で非表示 */
@media (max-width:930px){
  .grant-desc,.grant-note{display:none}
}

/* カリキュラム詳細の表は 640px を境に画像そのものが切り替わる */
.cur-table--sp{display:none}
@media (max-width:640px){
  .cur-table--pc{display:none}
  .cur-table--sp{display:block;width:100%}
}

/* SP の詳細カードのパディング（実サイトは 40px 20px） */
@media (max-width:640px){
  .cur-detail{padding:40px 20px}
  /* 卒業生カード: 外側の余白は枠側が持つ。min-width:0 で
     文字の最小幅によりカードが広がるのを防ぐ */
  .grad-card{min-width:0;padding:30px 40px}
  .grad-frame{min-width:0;padding:0 15px}
  /* 左右の余白は枠側が持つので、内側の padding は外す */
  .grad-card-head,.grad-card-body{padding:0}
  /* 本文ブロックはカード幅いっぱいに（実サイトは 207px で左揃え、
     はみ出す分は右へ流れる） */
  .grad-card-body{align-self:stretch}
  /* 「◯◯から」は実サイトと同じく 1 行（実測 42px / 折り返しなし） */
  .grad-from{display:flex;align-items:flex-end;flex-wrap:nowrap;white-space:nowrap}
  /* 矢印はカルーセル枠の左右端に置く（実サイト: x=28 と x=302） */
  .car-arrow.prev{left:28px}
  .car-arrow.next{right:28px}
}

/* ------------------------------------------------------------
   SP 追従CTA（実サイト /9 の実値）
   ベースは position:fixed だが、実サイトは position:sticky で
   フッターの後ろに置かれている。表示は 640px 以下のみ。
   ------------------------------------------------------------ */
@media (max-width:640px){
  .sticky-cta{
    position:sticky;bottom:0;left:auto;z-index:4;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    width:100%;height:80px;padding:0 30px;
    background:rgba(255,255,255,.8);
    border-top:1px solid #EBEBEB;
  }
  .sticky-cta .btn-cta{
    position:relative;
    width:340px;max-width:100%;height:50px;padding:0;gap:0;
    border-radius:15px;font-size:20px;font-weight:700;
  }
  .sticky-cta .btn-cta img{position:absolute;right:23px;bottom:17px;width:9px;height:auto}
}
/* 641〜767px はベースの SP 指定が残るため明示的に隠す（実サイトも非表示） */
@media (min-width:641px){
  .sticky-cta{display:none}
}

/* ------------------------------------------------------------
   SP の「平均年収の高さ」「働き方の幅が広がる」カード内部
   （実サイト /9 の 375px 実測値に合わせる）
   ------------------------------------------------------------ */
@media (max-width:640px){
  /* 職種名と金額は横並びではなく縦積み */
  .salary div{flex-direction:column;align-items:flex-start;gap:0}
  .salary dt{font-size:18.5px;line-height:1.4;padding:5px 0 0}
  .salary dd{font-size:33.75px;line-height:1.4}
  .salary dd b{font-size:66px;line-height:1}
  /* 注記は 2 行になる大きさ */
  .note{font-size:15.15px;line-height:1.4;padding-top:15px}

  /* 「を活かしたキャリア形成」などの続き文は左に 23px インデント */
  .worklist .dot{font-size:18.5px}
  .worklist b{font-size:33.6px;padding-bottom:3px}
  .worklist span:last-child{font-size:20.2px;padding:0 0 3px 23px}
}

/* ------------------------------------------------------------
   「平均年収の高さ」「働き方の幅が広がる」カードのアイコン
   実サイトはカードが overflow:visible で、アイコンが上に飛び出す。
   ベースは overflow:hidden だったため上部が切れていた。
   ------------------------------------------------------------ */
.chance-card{overflow:visible}
/* >1160px（実サイトのベース値） */
.chance-card-head img{top:-38px;left:33px;width:102px}
.chance-card-head img.wide{top:-38px;left:15px;width:133px}

@media (min-width:931px) and (max-width:1160px){
  .chance-card-head img{top:-25px;left:14px;width:21%}
  .chance-card-head img.wide{top:-10px;left:12px;width:27%}
}
@media (min-width:641px) and (max-width:930px){
  .chance-card-head img{top:-25px;left:22px;width:80px}
  .chance-card-head img.wide{top:-16px;left:0;width:113px}
}
@media (max-width:640px){
  .chance-card-head img{top:-22px;left:17px;width:16vw;max-width:16vw}
  .chance-card-head img.wide{top:-12px;left:9px;width:20vw;max-width:20vw}
}

/* ------------------------------------------------------------
   卒業生カルーセルの表示領域と 1 枚あたりの幅
   実サイト: 表示領域 width:1400px / max-width:100% / padding:0 65px、
   スライドは割合指定（>930:35% / ~930:50% / ~640:100%）。
   ベースはスライドが 403px 固定・表示領域に上限が無く、
   2560px で 6 枚並んでしまっていた。
   ------------------------------------------------------------ */
.carousel{width:1400px;max-width:100%;margin-left:auto;margin-right:auto}
.grad-card{flex:0 0 35%;min-width:0}
/* 名前バッジは固定幅 171px をやめ、残り幅いっぱいに伸縮させる
   （実サイトは flex:1 1 0。1280px で 189px、375px で 73px になる） */
.grad-name{width:auto;flex:1 1 0;min-width:0}
/* 見出し行はカード内寸いっぱいに（実サイトは 1280px で 341px） */
.grad-card-head{align-self:stretch}
@media (max-width:930px){
  .grad-card{flex:0 0 50%}
}
@media (min-width:641px) and (max-width:930px){
  /* 実サイトはこの帯もカード内の余白はベース値のまま */
  .grad-card{padding:40px 10px}
}
@media (max-width:640px){
  .grad-card{flex:0 0 100%}
}

/* ------------------------------------------------------------
   ヘッダーのハンバーガーと SP ドロワー（実サイト /7 の 375px 実値）
   - ハンバーガーは 3 本線の SVG（30x12 / 1160px 以下は 40x22）
   - ドロワーは Studio の別ページ（modal: menu-7）。白で全画面を覆い、
     閉じるボタンはドロワー側が持つ
   ------------------------------------------------------------ */
.hamburger img{display:block;width:40px;height:auto}
@media (max-width:1160px){
  /* span を使った 2 本線ではなく SVG に置き換えたので gap は不要 */
  .hamburger{gap:0;padding:0}
}
@media (max-width:640px){
  /* ナビが消えるぶん、右端に寄せ直す */
  .hamburger{margin-left:auto;margin-right:0}
  .hamburger img{width:30px}
}

/* ドロワー本体（実サイトは Studio の別ページ。3 段階でレイアウトが変わる）
   931〜1160px: 画面右半分（50%）のパネル
   641〜930px : 全画面・中央寄せ
   〜640px    : 全画面・上寄せ（padding 100px 30px 0）                        */
@media (max-width:1160px){
  .sp-menu{
    position:fixed;top:0;right:0;bottom:0;left:auto;z-index:19;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    width:50%;height:100%;padding:0;gap:0;
    background:#fff;box-shadow:none;overflow-y:auto;
  }
  .sp-menu-close{
    position:absolute;top:22px;right:40px;
    display:flex;align-items:center;justify-content:center;
    width:56px;height:56px;
  }
  .sp-menu-close img{display:block;width:40px;height:auto}
  .sp-menu-body{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:50px;width:350px;max-width:100%;
  }
  /* 中身が箱に収まらないぶんは実サイトと同じく上下へはみ出させる */
  .sp-menu-nav,.sp-menu-body>.btn-cta{flex:none}
  .sp-menu-nav{display:flex;flex-direction:column;align-items:center;gap:30px;width:100%}
  .sp-menu-logo{padding-right:12px}
  .sp-menu-logo img{display:block;width:180px;height:auto}
  .sp-menu ul{display:flex;flex-direction:column;gap:0;width:100%}
  /* ベースの .sp-menu a:not(.btn-pill) より詳細度を上げる */
  .sp-menu li a:not(.btn-pill){
    display:block;width:100%;padding:20px 20px 20px 25px;
    border-bottom:1px solid #000;
    font-size:16px;font-weight:400;line-height:1.5;
  }
  .sp-menu .btn-cta:not(.btn-pill){
    position:relative;
    width:100%;height:80px;padding:0;gap:0;justify-content:center;
    border-radius:15px;font-size:22px;font-weight:700;
  }
  .sp-menu .btn-cta img{position:absolute;right:23px;bottom:31px;width:12px;height:auto}
  .sp-menu-overlay{position:fixed;inset:0;z-index:18;background:rgba(0,0,0,.16)}
}
@media (max-width:930px){
  .sp-menu{left:0;width:100%}
  .sp-menu-close{right:30px}
  .sp-menu-body{width:448px}
  .sp-menu .btn-cta:not(.btn-pill){width:320px}
}
@media (max-width:640px){
  .sp-menu{align-items:flex-start;justify-content:flex-start;padding:100px 30px 0}
  .sp-menu-close{top:0;height:60px}
  .sp-menu-close img{width:30px}
  .sp-menu-body{width:100%;height:50%}
  .sp-menu-logo img{width:153px}
  .sp-menu li a:not(.btn-pill){padding:20px 0 20px 20px;line-height:1.4}
  .sp-menu .btn-cta:not(.btn-pill){width:100%;height:70px;font-size:19px}
  .sp-menu .btn-cta img{right:23px;bottom:27px;width:8px}
}

/* ------------------------------------------------------------
   HERO の CTA（実サイトは写真の上に重なり、下端から 30px）
   ------------------------------------------------------------ */
@media (max-width:640px){
  .hero{height:648px}
  .hero-inner .btn-cta{bottom:30px}
}

/* 641〜930px の給付金ボックス
   実サイトはこの帯だけラッパごと 716px 上限で、右の 100px 余白が無くなる
   （700px では 700px = 全幅。716px を境に頭打ち）。
   箱は width:1540px / max-width:100% なのでラッパ幅がそのまま箱幅になる。 */
@media (min-width:641px) and (max-width:930px){
  .grant-inner{max-width:min(716px,100%);margin-right:0}
}

/* ============================================================
   ヘッダー / ファーストビューを実サイトに揃える（2026-09-30）
   ============================================================ */

/* ③ グローバルナビは実サイトが 1.2vw。1160px 以下はハンバーガーなので対象外。
   README の「px 固定＋ブレークポイント」方針はここで撤回し、実サイトに揃える。 */
@media (min-width:1161px){
  .nav-list a{font-size:1.2vw}
}

/* ① 人物写真は実サイトに 560px の上限が無く、一貫して 39%
   （1920px で 749、2560px で 998）。1160px 以下はベース側で 36vw に切り替わる。 */
@media (min-width:1161px){
  .hero-photo{max-width:none}
}

/* ② HERO の CTA は実サイトでは KV キャッチと同じ幅（568 / 550 / 500）。
   本文中の CTA は 460px のままなので .hero-inner 配下だけに効かせる。 */
@media (min-width:931px){
  .hero-inner .btn-cta{width:568px}
}
@media (min-width:931px) and (max-width:1160px){
  .hero-inner .btn-cta{width:550px}
}
@media (min-width:641px) and (max-width:930px){
  .hero-inner .btn-cta{width:500px}
}

/* ④ HERO の中身は実サイトのほうが 30px 下。下端の余白も 75 → 45。 */
@media (min-width:931px){
  .hero-inner{padding:95px 0 45px}
}
@media (min-width:641px) and (max-width:930px){
  .hero-inner{padding:65px 0 0}
}

/* ============================================================
   ⑤ SP（640px 以下）を実サイトに揃える（2026-09-30）
   実サイトの HERO は高さ固定ではなく中身なり。KV キャッチの縦横比で
   ページごとに高さが変わる（375px で 638〜649px、640px で 845〜864px）
   ため、height を auto に戻して中身から決まるようにする。
   ・KV キャッチの上端は実サイトが 115px（= ヘッダー 60 + padding-top 55）
   ・CTA は写真に重ねた絶対配置ではなく、バッジの 250px 下に流し込み
   ・CTA の幅は .hero-inner の内容幅（100vw - 60px）の 92%
     （375→290 / 390→304 / 414→326 / 430→340 / 640→534px）
   ============================================================ */
@media (max-width:640px){
  .hero{height:auto}
  .hero-inner{padding:55px 30px 0}
  .hero-inner .btn-cta{position:static;width:92%;margin:250px auto 0;transform:none}
  .hero-inner .btn-cta:hover{transform:translateY(-2px)}
}

/* ============================================================
   カリキュラムセクションの版面を実サイトに揃える（2026-09-30）

   実サイトと 2560 / 1920 / 1512 / 1280 / 1160 / 950 / 768 / 375px で
   突き合わせて、次の 4 点がずれていた。

   1. 見出しが実サイトより 30px 上（1161px 以上・640px 以下）
      実サイトは .cur-wrap の中で見出しの上に 30px の余白がある。
   2. 本文カラムが box の内容幅いっぱいに広がっていた
      実サイトは 1160px 上限。1512px で 1292 → 1160、2560px で 1420 → 1160。
      1280px 以下は内容幅が 1160 未満なので効かない（＝実サイトと同じ）。
   3. 見出し横イラストの横位置が right 基準だった
      実サイトは box 左端から 852px 固定。right:155px だと box 幅が
      1180px のときしか一致しない（2560px で 360px ずれる）。
   4. イラストの縦位置が 1160px 以下でも実サイトより 30px 上

   ※ 下の 2 点は「実サイトと意図的に変えた箇所」。詳細は README を参照。
     ・.cur-detail に 1160px 上限（実サイトは box の内容幅いっぱい）
     ・見出し下端と box 上端の間に 10px の余白（実サイトは 20px 重なる）
   ============================================================ */
@media (min-width:1161px){
  .cur-wrap{padding-top:30px}
  .cur-points{max-width:1160px}
  /* 意図的な差異①: 実サイトは box の内容幅いっぱい（2560px で 1420）だが、
     01/02 の写真＋テキスト（.cur-points）と同じ 1160px に揃える。 */
  .cur-detail{max-width:1160px}
  /* 意図的な差異②: 実サイトは見出しの行ボックスが box に 20px 食い込む。
     margin-top をベースの 10px のままにして、逆に 10px 空ける
     （実サイトも 931〜1160px / 641〜930px では 10px 空けている）。 */
  .cur-box{margin-top:10px}
  .cur-illust{top:-165px;right:auto;left:852px}
}
@media (min-width:931px) and (max-width:1160px){
  .cur-illust{top:-114px}
}
@media (min-width:641px) and (max-width:930px){
  .cur-illust{top:-78px}
}
/* 640px 以下。見出しのフォントと左右余白は実サイトが vw
   （font-size:6.3vw / padding:0 7.5vw。375px で 23.625 / 28.125px）。
   box の margin-top は上の②と同じ理由で 10px（実サイトは 5px 重なる）。 */
@media (max-width:640px){
  .cur-wrap{padding-top:30px}
  .cur-title{padding:0 7.5vw;font-size:6.3vw}
  .cur-box{margin-top:10px}
  .cur-illust{top:-34px}
  .cur-detail{margin:35px 7.5vw 0}
}

/* ============================================================
   【バグ】カルーセルのクリップ枠が 1 段内側だった（2026-09-30）

   実サイトはカルーセルの「切り抜き枠」が .carousel 相当（左右 65px の
   padding を含む外側の箱）で、カードは padding の上にはみ出して見える。
   コードは .car-viewport（padding の内側）で切っていたため、
   左右 65px ぶん窓が狭く、隣のカードが「のぞく」のではなく
   「大きく切れて」見えていた。

   1512px の例（クリップ枠を 0 としたカード位置）
     実サイト: 枠 1400 / -856・-411・33・478・922・1367・1811
     コード  : 枠 1270 / -921・-476・-32・413・857・1302・1746
   カードの絶対位置も中央寄せの基準も一致していて、違うのは窓の幅だけ。

   640px 以下は実サイトも padding の内側で切るので、そちらは据え置く。
   ============================================================ */
@media (min-width:641px){
  .carousel{overflow:hidden}
  .car-viewport{overflow:visible}
}

/* 【バグ】641〜930px の左右 50px 余白が効いていなかった。
   上の「表示領域と 1 枚あたりの幅」ブロックの
   .carousel{margin-left:auto;margin-right:auto} がメディアクエリの外に
   置かれていて、@media (max-width:930px) の margin:50px を打ち消していた。
   実サイト 768px は枠 668px・左 50px。 */
@media (min-width:641px) and (max-width:930px){
  .carousel{width:auto;margin-left:50px;margin-right:50px}
}