@charset "UTF-8";
/* ============================================================
   /subsidy 固有
   共通部分は ../shared/css/subpage.css。こちらを後に読み込む。
   ============================================================ */


/* ------------------------------------------------------------
   制度説明（青いボックス。LP の .grant-box と同じ見え方）
   ------------------------------------------------------------ */
.sub-about{
  display:flex;align-items:center;gap:60px;
  padding:60px;border-radius:30px;
  background:linear-gradient(90deg,var(--blue) 71%,var(--blue-l) 100%);
  color:#fff;
}
.sub-about-fig{flex:0 0 343px;text-align:center}
.sub-about-fig img{width:343px;max-width:100%;height:auto}
.sub-about-txt{display:flex;flex-direction:column;gap:30px}
.sub-about-title{display:flex;flex-direction:column;font-size:40px;font-weight:700;line-height:1.4}
.sub-about-desc{font-size:20px;font-weight:400;line-height:1.5;text-align:justify}
.sub-about-banner{
  margin-top:10px;padding:8px 10px;
  background:#fff;border-radius:10px;
  font-size:26px;font-weight:700;line-height:1.4;color:var(--blue);text-align:center;
  font-feature-settings:"palt";
}

/* ------------------------------------------------------------
   受給要件
   ------------------------------------------------------------ */
.req{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.req-card{padding:30px 34px;background:#fff;border:2px solid var(--blue);border-radius:20px}
.req-card-head{
  margin-bottom:16px;padding-bottom:12px;
  border-bottom:1px solid var(--blue-mid);
  font-size:22px;font-weight:700;color:var(--blue);
}
.req-list li{position:relative;padding-left:1.2em;font-size:18px;line-height:1.7}
.req-list li+li{margin-top:8px}
.req-list li::before{content:"・";position:absolute;left:0;color:var(--blue)}
.req-list b{font-size:1.1em;color:var(--blue)}

/* ------------------------------------------------------------
   ステップ（クラウド版は画像 1 枚だが、ここは HTML/CSS で組んでいる）
   6 項目あり各項目に説明文が付くので、矢印の横並びではなく
   番号付きカードのグリッドにしている。
   ------------------------------------------------------------ */
.steps-alert{
  display:flex;align-items:center;justify-content:center;gap:10px;
  max-width:860px;margin:0 auto 35px;padding:18px 24px;
  background:#fff;border:2px solid var(--red);border-radius:15px;
  font-size:21px;line-height:1.5;text-align:center;
}
.steps-alert::before{
  content:"!";flex:0 0 30px;height:30px;
  display:flex;align-items:center;justify-content:center;
  background:var(--red);border-radius:50%;color:#fff;font-size:20px;font-weight:700;
}
.steps-alert b{color:var(--red)}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:step}
.steps li{
  display:flex;flex-direction:column;gap:10px;
  padding:26px 24px;
  background:#fff;border:2px solid var(--blue);border-radius:20px;
}
.steps li::before{
  counter-increment:step;content:"STEP " counter(step);
  align-self:flex-start;padding:3px 12px;
  background:var(--blue);border-radius:30px;
  color:#fff;font-size:14px;font-weight:700;letter-spacing:.04em;
}
.steps-label{font-size:21px;font-weight:700;line-height:1.4}
.steps-desc{font-size:16px;line-height:1.7;text-align:justify}
.steps-note{margin-top:30px;font-size:20px;line-height:1.8;text-align:center}@media (max-width:1160px){
  .sub-about{gap:40px;padding:50px}
  .sub-about-fig{flex:0 0 40%}
  .sub-about-fig img{width:100%}
  .sub-about-title{font-size:34px}
  .req-card{padding:26px 28px}
  .req-card-head{font-size:20px}
  .req-list li{font-size:17px}
  .steps-alert{font-size:19px}
  .steps-label{font-size:19px}
  .steps-desc{font-size:15px}
}
@media (max-width:930px){
  .sub-about{flex-direction:column;align-items:center;gap:35px;padding:45px 35px}
  .sub-about-fig{flex:none;width:300px;max-width:100%}
  .sub-about-title{font-size:28px}
  .sub-about-desc{font-size:18px}
  .sub-about-banner{font-size:21px}
  .req{gap:18px}
  .req-card{padding:22px 24px}
  .req-card-head{font-size:18px}
  .req-list li{font-size:16px}
  .steps-alert{font-size:17px;padding:15px 20px}
  .steps{grid-template-columns:repeat(2,1fr);gap:18px}
}
@media (max-width:640px){
  .sub-about{gap:25px;padding:35px 20px;border-radius:20px}
  .sub-about-fig{width:100%;max-width:260px}
  .sub-about-txt{gap:20px}
  .sub-about-title{font-size:21px}
  .sub-about-desc{font-size:15px}
  .sub-about-banner{padding:10px 14px;font-size:17px}
  .req{grid-template-columns:1fr;gap:14px}
  .req-card{padding:18px 18px;border-radius:15px}
  .req-card-head{margin-bottom:12px;padding-bottom:10px;font-size:16px}
  .req-list li{font-size:14px;line-height:1.6}

  .steps-alert{gap:8px;margin-bottom:25px;padding:13px 14px;font-size:15px;text-align:justify;border-radius:12px}
  .steps-alert::before{flex:0 0 24px;height:24px;font-size:16px}
  .steps{grid-template-columns:1fr;gap:14px}
  .steps li{padding:18px 16px;border-radius:15px;gap:8px}
  .steps-label{font-size:17px}
  .steps-desc{font-size:14px;line-height:1.6}
  .steps-note{margin-top:22px;font-size:15px;line-height:1.7;text-align:justify}
}