@charset "utf-8";
/* ==========================================================================
   補助金サポート 全体説明ページ（subsidy.html）専用スタイル

   🔴 css/style.css の後に読み込みます。
      ヘッダー・フッター・ボタン・見出し・4つの支援カード・3つの立場・
      お問い合わせセクションは style.css のものをそのまま使っています。
      このファイルには「このページだけで使う部品」しか書いていません。
      （style.css を触らないので、TOPページの表示には一切影響しません）

   構成:
     01. ページ用の背景バリエーション
     02. ファーストビュー
     03. 長文の読みやすさ（prose）
     04. キーメッセージ・引用行・強調
     05. リズムのある短文リスト
     06. よくある声（4つ）
     07. データ（数字）
     08. 規模の幅・小見出し・業種タグ
     09. 4つの支援カードの追加要素
     10. 会社と行政書士事務所の役割
   ========================================================================== */

/* ---------- 01. ページ用の背景バリエーション ---------- */
.section--sky{background:linear-gradient(180deg,var(--sky-tint) 0%,var(--sky-tint-2) 100%);}
.section--warm{background:linear-gradient(180deg,#fff6ec 0%,#fffdfa 100%);}

/* ---------- 02. ファーストビュー ----------
   TOPページのファーストビューと同じ配色（クリーム→水色）で、同じサイトだと分かるようにする
   ------------------------------------------------------------------------ */
.page-hero{
  position:relative;overflow:hidden;
  padding:clamp(50px,8vw,96px) 0 clamp(46px,7vw,88px);
  background:linear-gradient(180deg,#fffdf8 0%,#fff6ec 46%,var(--sky-tint) 100%);
  scroll-margin-top:var(--header-h);
}
.page-hero__deco{position:absolute;inset:0;pointer-events:none;}
.page-hero__blob{position:absolute;border-radius:50%;}
.page-hero__blob--a{
  width:clamp(170px,28vw,340px);aspect-ratio:1;left:-8%;top:2%;
  background:radial-gradient(circle at 40% 40%,rgba(244,161,26,.38),rgba(244,161,26,0) 70%);
}
.page-hero__blob--b{
  width:clamp(180px,30vw,380px);aspect-ratio:1;right:-9%;bottom:-6%;
  background:radial-gradient(circle at 55% 45%,rgba(84,194,240,.40),rgba(84,194,240,0) 70%);
}
.page-hero__inner{position:relative;z-index:2;text-align:center;}
.page-hero__title{
  font-size:clamp(27px,6.4vw,46px);
  line-height:1.45;letter-spacing:.01em;
  color:var(--text);
  margin:0 0 clamp(22px,3.4vw,34px);
}
.page-hero__title::after{
  content:"";display:block;width:56px;height:4px;border-radius:2px;
  background:linear-gradient(90deg,var(--orange-light),var(--sky));
  margin:clamp(18px,2.6vw,26px) auto 0;
}
.page-hero__body{
  font-size:clamp(15px,3.3vw,17.5px);
  line-height:2.05;color:var(--text-sub);
}
.page-hero__body p{margin-bottom:1.5em;}
.page-hero__body p:last-child{margin-bottom:0;}

/* ---------- 03. 長文の読みやすさ ----------
   見出しは中央、本文は左揃え。1行を長くしすぎない
   ------------------------------------------------------------------------ */
.prose{
  max-width:720px;margin-inline:auto;
  font-size:clamp(15px,3.3vw,17px);
  line-height:2.05;color:var(--text-sub);
  text-align:left;
}
.prose p{margin-bottom:1.5em;}
.prose p:last-child{margin-bottom:0;}
.prose--center{text-align:center;}
.prose--after-stance{margin-top:clamp(28px,4.4vw,44px);}

/* prose どうしが続くときの間隔 */
.prose + .prose{margin-top:1.5em;}

/* ---------- 04. キーメッセージ・引用行・強調 ---------- */

/* このセクションで一番伝えたい一文 */
.key-msg{
  max-width:760px;
  margin:clamp(26px,4vw,40px) auto;
  padding:clamp(22px,3.4vw,32px) clamp(20px,3vw,32px);
  background:var(--white);
  border:1px solid var(--line);
  border-left:6px solid var(--orange);
  border-radius:0 var(--radius) var(--radius) 0;
  box-shadow:var(--shadow-sm);
  font-size:clamp(17px,4.2vw,24px);
  font-weight:800;line-height:1.75;
  color:var(--orange-text);
  text-align:center;
}
.key-msg--sky{
  border-left-color:var(--sky);
  color:var(--sky-text);
}

/* 本文の流れの中で少しだけ持ち上げる引用（キーメッセージより弱い） */
.quote-line{
  max-width:720px;margin:clamp(18px,2.6vw,26px) auto;
  text-align:center;
  font-size:clamp(16px,3.8vw,21px);
  font-weight:800;line-height:1.7;
  color:var(--text);
}
.quote-line::before,
.quote-line::after{
  content:"";display:block;width:34px;height:3px;border-radius:2px;
  background:var(--orange-light);
  margin:12px auto;
}
.quote-line--sky::before,
.quote-line--sky::after{background:var(--sky);}

/* 文の中の一部だけを強調する（マーカー） */
.mark{
  font-weight:800;color:var(--orange-text);
  background:linear-gradient(transparent 62%,rgba(244,161,26,.35) 62%);
  padding-bottom:.05em;
}

/* ---------- 05. リズムのある短文リスト ---------- */
.rhythm-list{
  display:flex;flex-direction:column;gap:8px;
  margin:clamp(20px,3vw,30px) 0;
}
.rhythm-list li{
  position:relative;
  padding:9px 16px 9px 30px;
  background:var(--white);
  border:1px solid var(--line-soft);
  border-radius:10px;
  font-size:clamp(14.5px,3.1vw,16.5px);
  font-weight:600;color:var(--text);
  line-height:1.7;
}
.rhythm-list li::before{
  content:"";position:absolute;left:14px;top:50%;
  width:7px;height:7px;margin-top:-3.5px;border-radius:50%;
  background:var(--orange-light);
}
/* ファーストビュー用：中央寄せの並び */
.rhythm-list--center{
  flex-direction:row;flex-wrap:wrap;justify-content:center;gap:8px;
}
.rhythm-list--center li{
  padding:8px 16px;border-radius:999px;
  background:rgba(255,255,255,.85);
}
.rhythm-list--center li::before{display:none;}
/* 順番を感じさせたい並び（今年 → 次 → その次） */
.rhythm-list--step li::before{background:var(--sky);}

/* ---------- 06. よくある声（4つ） ---------- */
.voice-grid{
  display:grid;gap:clamp(12px,2vw,18px);
  grid-template-columns:1fr;
  max-width:900px;margin:clamp(28px,4.2vw,44px) auto;
}
@media (min-width:768px){
  .voice-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:1fr;}
}
.voice{
  position:relative;
  padding:clamp(16px,2.4vw,20px) clamp(16px,2.4vw,22px) clamp(16px,2.4vw,20px) clamp(40px,5vw,52px);
  background:var(--white);
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  font-size:clamp(14px,3.1vw,16px);
  line-height:1.8;color:var(--text);
}
.voice::before{
  content:"”";
  position:absolute;left:clamp(14px,2vw,20px);top:clamp(4px,1vw,8px);
  font-family:var(--font-en);
  font-size:clamp(34px,5vw,44px);font-weight:700;line-height:1;
  color:var(--orange-light);
}

/* ---------- 07. データ（数字） ----------
   グラフや装飾は置かず、数字だけを大きくして一目で分かるようにする
   ------------------------------------------------------------------------ */
.data-panel{
  max-width:760px;margin:clamp(28px,4.2vw,44px) auto;
  padding:clamp(24px,3.6vw,38px) clamp(20px,3vw,34px);
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
}
.data-panel__line{
  font-size:clamp(14.5px,3.1vw,16.5px);
  line-height:2.1;color:var(--text-sub);
  margin:0 0 1.1em;
}
.data-panel__line:last-of-type{margin-bottom:0;}
.data-num{
  font-family:var(--font-en);
  font-size:clamp(30px,7vw,46px);
  font-weight:800;line-height:1;letter-spacing:-.01em;
  color:var(--orange);
  font-feature-settings:"tnum" 1;
  margin:0 .04em;
  vertical-align:-.06em;
}
.data-num--sub{font-size:clamp(24px,5.4vw,36px);}
.data-num--sky{color:var(--sky-deep);}
.data-num__unit{
  font-family:var(--font-jp);
  font-size:clamp(14px,3vw,19px);font-weight:800;
  letter-spacing:0;margin-left:.04em;
}
.data-panel__note{
  margin:1.6em 0 0;padding-top:1.2em;
  border-top:1px dotted var(--line);
  font-size:clamp(12px,2.6vw,13px);
  line-height:1.85;color:var(--text-sub);
}

/* ---------- 08. 規模の幅・小見出し・業種タグ ---------- */

/* 「小規模な補助金から…大型補助金まで。」
   金額を大きくせず、本文と同じ大きさのまま1本のラインで“幅”を表す */
.range-line{
  position:relative;
  max-width:760px;margin:clamp(24px,3.6vw,36px) auto;
  padding:clamp(20px,3vw,26px) clamp(18px,2.6vw,28px) clamp(20px,3vw,26px);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  text-align:center;
  font-size:clamp(15px,3.4vw,18px);
  font-weight:700;line-height:1.85;color:var(--text);
}
.range-line__bar{
  display:block;width:min(100%,320px);height:6px;border-radius:3px;
  margin:0 auto 16px;
  background:linear-gradient(90deg,var(--sky) 0%,var(--orange-light) 55%,var(--orange) 100%);
}

.subhead{text-align:center;margin:clamp(44px,6vw,72px) 0 clamp(18px,2.6vw,26px);}
.subhead__title{
  display:inline-block;
  font-size:clamp(19px,4.4vw,26px);
  line-height:1.5;color:var(--text);margin:0;
  padding-bottom:10px;
  border-bottom:3px solid var(--sky);
}

.tag-list{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:10px;
  max-width:760px;margin:clamp(18px,2.6vw,26px) auto clamp(24px,3.4vw,32px);
}
.tag{
  font-size:clamp(13.5px,3vw,15.5px);font-weight:700;line-height:1.5;
  color:var(--sky-text);background:var(--white);
  border:1.5px solid rgba(84,194,240,.55);
  border-radius:999px;padding:9px 20px;
}
.tag-list--orange .tag{
  color:var(--orange-text);
  border-color:rgba(244,161,26,.6);
}

/* ---------- 09. 4つの支援カードの追加要素 ----------
   カード本体は style.css の .card-grid / .s-card をそのまま使用。
   このページだけ「◯◯な方へ」の1行が入るので、その分だけ足す
   ------------------------------------------------------------------------ */
.s-card__target{
  font-size:clamp(12.5px,2.8vw,13.5px);
  font-weight:800;line-height:1.65;
  color:var(--orange-text);
  margin:0 0 10px;
  padding-bottom:10px;
  border-bottom:1px dotted var(--line);
}
.s-card__icon--sky + .s-card__title + .s-card__target{color:var(--sky-text);}

/* ---------- 10. 会社と行政書士事務所の役割 ----------
   左＝法人（オレンジ）／右＝行政書士事務所（水色）。色とカードで役割を分ける
   ------------------------------------------------------------------------ */
.role-grid{
  display:grid;gap:clamp(12px,2vw,18px);
  grid-template-columns:1fr;
  align-items:stretch;justify-items:center;
  max-width:940px;margin:clamp(26px,4vw,40px) auto;
}
@media (min-width:900px){
  .role-grid{grid-template-columns:1fr auto 1fr;}
}
.role{
  width:100%;
  padding:clamp(22px,3.2vw,32px) clamp(18px,2.8vw,30px);
  background:var(--white);
  border:1px solid var(--line);
  border-top:6px solid var(--orange);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  display:flex;align-items:center;justify-content:center;
}
.role--office{
  border-top-color:var(--sky);
  background:var(--sky-tint-2);
}
.role__text{
  margin:0;text-align:center;
  font-size:clamp(14.5px,3.1vw,16.5px);
  line-height:2;color:var(--text-sub);
}
.role__name{
  display:inline-block;
  font-size:clamp(15px,3.4vw,18px);
  color:var(--orange-text);
}
.role--office .role__name{color:var(--sky-text);}
.role-grid__join{
  font-size:clamp(18px,3.4vw,24px);font-weight:800;
  color:var(--orange-light);line-height:1;
  display:flex;align-items:center;justify-content:center;
  padding:2px 0;
}

/* ---------- 11. ヘッダー左上「← TOPに戻る」（下層ページだけの仕様） ----------
   TOPページのロゴの位置に置くもの。ナビより目立たないよう、
   白地＋細い枠の小さなピルにしている。矢印は #i-arrow を左右反転して使用
   ------------------------------------------------------------------------ */
.back-home{
  display:inline-flex;align-items:center;gap:7px;
  padding:11px 16px 11px 13px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--white);
  font-size:clamp(13px,2.9vw,14.5px);
  font-weight:700;line-height:1.3;
  color:var(--text-sub);
  white-space:nowrap;
  transition:color .2s ease,border-color .2s ease,background-color .2s ease;
}
.back-home:hover{
  color:var(--orange-text);
  border-color:var(--orange-light);
  background:var(--orange-tint);
}
.back-home__arrow{
  width:15px;height:15px;flex:0 0 auto;
  transform:scaleX(-1);            /* 右向き矢印を反転して「←」にする */
  transition:transform .2s ease;
}
.back-home:hover .back-home__arrow{transform:scaleX(-1) translateX(3px);}
@media (prefers-reduced-motion:reduce){
  .back-home,.back-home__arrow{transition:none;}
  .back-home:hover .back-home__arrow{transform:scaleX(-1);}
}

/* ---------- 12. TOPページへ戻る（ページ最下部） ----------
   お問い合わせセクションの下端の色（--orange-tint）と同じ背景にして、
   帯が増えたように見せない。文字色も抑えて、CTAより目立たせない
   ------------------------------------------------------------------------ */
.back-top{
  background:var(--orange-tint);
  padding:0 0 clamp(26px,3.6vw,40px);
  text-align:center;
}
.back-top__link{
  margin-top:0;
  padding:10px 6px;                 /* スマホで押しやすい高さを確保 */
  font-size:clamp(13.5px,3vw,15px);
  font-weight:700;
  color:var(--text-sub);
  border-bottom:1px solid rgba(107,101,95,.28);
}
.back-top__link:hover{
  color:var(--orange-text);
  border-bottom-color:rgba(234,96,0,.45);
}

/* ---------- 極小幅（〜359px）だけの微調整 ---------- */
@media (max-width:359px){
  .tag{padding:8px 14px;}
  .rhythm-list--center li{padding:7px 12px;}
  .data-num{font-size:28px;}
}