@charset "UTF-8";
/* ============================================================
   サブページ共通（/subsidy ・ /job-change-support ほか）

   既存 15 ページ（site/css/style.css）から、トークン・リセットと
   ヘッダー / SPドロワー / 追従CTA / フッター / ボタンのルールだけを
   メディアクエリの入れ子と順序を保って抜き出したもの。値は変えていない。
   これに、サブページで共通して使う版面（.sub-wrap / .sub-sec / .sub-title）、
   共通CTA（.ask）、共通バナー（.kyufu-banner）を足してある。

   ページ固有の指定は各ページの css/page.css に置く。
   読み込み順は subpage.css → page.css（この順序が前提）。
   ============================================================ */
: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)}

/* ============================================================
   ヘッダー / SPドロワー / 追従CTA / フッター / ボタン
   既存15ページ（site/css/style.css）から該当ルールのみを抜き出したもの。
   見た目を揃えるため、値は一切変えていない。
   ============================================================ */
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}
.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}
.sticky-cta{display:none}@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}
.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}
}
@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}
.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}
}
@media (max-width:640px){
.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}
.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}
.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}
}

.hamburger img{display:block;width:40px;height:auto}@media (max-width:1160px){
.hamburger{gap:0;padding:0}
}
@media (max-width:640px){
.hamburger{margin-left:auto;margin-right:0}
.hamburger img{width:30px}
}
@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 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}
}
@media (max-width:1160px){
.sp-menu{top:100px;bottom:auto;height:100vh}
}
@media (min-width:1161px){
.nav-list a{font-size:1.2vw}
}

.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}@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}
}

/* ============================================================
   /subsidy 固有
   既存 15 ページのトークン（--blue / --yellow など）とブレークポイント
   （1160 / 930 / 640）に合わせてある。クラウド版の模写ではない。
   ============================================================ */

.sub-main{padding-top:var(--header-h)}
.sub-wrap{width:min(1180px,100% - 100px);margin:0 auto}

/* ------------------------------------------------------------
   KV
   ------------------------------------------------------------ */
.sub-kv{
  display:flex;flex-direction:column;align-items:center;gap:20px;
  padding:70px 0 60px;
  background:linear-gradient(180deg,var(--blue-pale) 0%,#fff 100%);
  text-align:center;
}
.sub-kv-badge{width:170px;height:auto}
.sub-kv-title{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;
  column-gap:4px;font-size:54px;font-weight:700;line-height:1.4}
.sub-kv-title>span{white-space:nowrap}
.sub-kv-title .num{font-size:86px;line-height:1;color:var(--blue)}
.sub-kv-sub{font-size:24px;font-weight:700;line-height:1.5;color:var(--blue)}

/* ------------------------------------------------------------
   セクション共通
   ------------------------------------------------------------ */
.sub-sec{padding:70px 0}
.sub-sec--gray{background:var(--blue-pale)}
.sub-title{
  margin-bottom:40px;
  font-size:40px;font-weight:700;line-height:1.4;text-align:center;
}
.sub-lead{font-size:20px;font-weight:400;line-height:1.8;text-align:justify}
.sub-note{font-size:16px;font-weight:400;line-height:1.5}

/* ------------------------------------------------------------
   共通 CTA（無料説明会で疑問を解消）
   ------------------------------------------------------------ */
.ask{padding:70px 0;background:var(--blue-pale)}
.ask-title{margin-bottom:35px;font-size:40px;font-weight:700;line-height:1.4;text-align:center}
.ask-list{
  display:grid;grid-template-columns:repeat(2,1fr);gap:15px 20px;
  max-width:860px;margin:0 auto 45px;
}
.ask-list li{
  display:flex;align-items:center;gap:10px;
  padding:18px 24px;background:#fff;border-radius:60px;
  font-size:20px;font-weight:500;line-height:1.4;
}
.ask-list li::before{content:"?";
  flex:0 0 32px;height:32px;display:flex;align-items:center;justify-content:center;
  background:var(--blue);border-radius:50%;color:#fff;font-size:20px;font-weight:700;
}
.ask-cta{display:flex;justify-content:center}@media (max-width:1160px){
  .sub-wrap{width:min(1180px,100% - 80px)}
  .sub-kv-title{font-size:44px}
  .sub-kv-title .num{font-size:70px}
  .sub-title,.ask-title{font-size:34px}
}
@media (max-width:930px){
  .sub-kv{padding:50px 0 45px}
  .sub-kv-title{font-size:38px}
  .sub-kv-title .num{font-size:60px}
  .sub-kv-sub{font-size:20px}
  .sub-sec,.ask{padding:55px 0}
  .sub-title,.ask-title{font-size:30px}
  .sub-lead{font-size:18px}
  .ask-list{gap:12px}
  .ask-list li{font-size:17px;padding:15px 20px}
}
@media (max-width:640px){
  .sub-main{padding-top:60px}
  .sub-wrap{width:100%;padding:0 28px}
  .sub-kv{gap:14px;padding:35px 0 30px}
  .sub-kv-badge{width:110px}
  .sub-kv-title{font-size:27px}
  .sub-kv-title .num{font-size:44px}
  .sub-kv-sub{font-size:16px}
  .sub-sec,.ask{padding:40px 0}
  .sub-title,.ask-title{font-size:23px;margin-bottom:25px}
  .sub-lead{font-size:15px;line-height:1.7}
  .sub-note{font-size:13px}
  .ask-list{grid-template-columns:1fr;gap:10px;margin-bottom:30px}
  .ask-list li{padding:13px 16px;font-size:15px}
  .ask-list li::before{flex:0 0 26px;height:26px;font-size:16px}
}

/* 未作成ページのナビ項目。<a> ではなく <span> なので押せない。
   ページができたら HTML 側で <a> に置き換える（この指定は残しておいてよい）。 */
.nav-soon{color:var(--note);cursor:default}