@charset "utf-8";

/* -----------------------------------------------------------
    都道府県別の補助金ページ（東京都など）
    ※subsidy.css を読み込んだうえで、このページだけのパーツと調整を追加する
-------------------------------------------------------------- */
#subsidy.subsidy-pref {
  --sub-green: #3d8f73;
  --sub-green-dark: #2f7a60;
}
/* 都道府県の制度は緑、国の制度は subsidy.css と同じ（みらいエコ＝オレンジ／窓リノベ＝ネイビー） */
#subsidy .is-pref {
  --accent: var(--sub-green);
  --accent-dark: var(--sub-green-dark);
  --accent-pale: #d6ebe2;
}
#subsidy .is-mirai {
  --accent: var(--sub-orange);
  --accent-dark: var(--sub-orange-dark);
  --accent-pale: #fbdcc3;
}

/* ---------- 改行位置の調整 ---------- */
/* 見出し・表・短いラベルは文節で改行し、単語の途中で折り返さないようにする */
/* #subsidy.subsidy-pref
  :is(
    .ttl-l .jp,
    .catch-l,
    .sub-ttl-s,
    .sub-quick-table th,
    .sub-quick-table td,
    .sub-mv__amount .name,
    .sub-target__list .ttl,
    .sub-condition__head .ttl,
    .sub-support__list .ttl,
    .sub-sim__head .ttl,
    .flow-item-title
  ) {
  word-break: auto-phrase;
}*/
/* 行頭に「ー」や小さい「ァ・ッ」などが来ないようにする */
#subsidy.subsidy-pref {
  line-break: strict;
}
/* 文章は最終行に1〜2文字だけ残らないようにする */
#subsidy.subsidy-pref
  :is(
    .basic-txt,
    .txt,
    .flow-text,
    .faq-a p,
    .caution,
    .sub-quick-table td:not(.price),
    .sub-formula__lead
  ) {
  text-wrap: pretty;
}
/* 見出しは行ごとの文字数をそろえ、1〜2文字だけの行ができないようにする */
#subsidy.subsidy-pref
  :is(
    .ttl-l .jp,
    .sub-condition__head .ttl,
    .sub-support__list .ttl,
    .sub-sim__head .ttl,
    .sub-notice__ttl,
    .faq-q h4
  ) {
  text-wrap: balance;
}

/* ---------- ページタイトル ---------- */
/* キャッチが長いので少し小さくする */
#subsidy.subsidy-pref .subpage-header__inner .catch-l {
  font-size: 2.8rem;
}
.subsidy-pref .sub-mv__amount {
  max-width: none;
}
.subsidy-pref .sub-mv__amount .name {
  line-height: 1.5;
}
.subsidy-pref .sub-mv__amount li {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.subsidy-pref .sub-mv__amount li:nth-child(3) {
  animation-delay: 0.84s;
}

@media screen and (max-width: 768px) {
  /* 3枚横並びだと制度名・金額が細かく折り返すので、SPは縦積みで「制度名｜金額」の横並びにする */
  .subsidy-pref .sub-mv__amount {
    flex-direction: column;
    gap: 8px;
  }
  .subsidy-pref .sub-mv__amount li {
    align-items: center;
    border-left: 4px solid var(--accent);
    border-top: none;
    flex-direction: row;
    gap: 10px;
    padding: 12px 16px;
    text-align: left;
  }
  .subsidy-pref .sub-mv__amount .name {
    font-size: 1.3rem;
  }
  .subsidy-pref .sub-mv__amount .price {
    flex-shrink: 0;
    margin: 0;
    white-space: nowrap;
  }
  .subsidy-pref .sub-mv__amount .num {
    font-size: 3.2rem;
  }
}

/* ---------- ページ内メニュー（7項目） ---------- */
@media screen and (min-width: 769px) {
  #header-service01 .service-nav.column7 .nav-list li {
    min-width: 0;
    width: calc((100% / 7) - 5px);
  }
  #header-service01 .service-nav.column7 .nav-list li p {
    font-size: 1.3rem;
  }
}

/* ---------- 補助金早見表 ---------- */
/* PCでは横スクロールさせず、表を枠内に収める
   （scroll-hint.js が要素に overflow:auto を直接付けるため !important で打ち消す） */
@media screen and (min-width: 769px) {
  .subsidy-pref .sub-table-scroll {
    overflow: visible !important;
  }
  .subsidy-pref .sub-table-scroll .scroll-hint-icon-wrap {
    display: none;
  }
}
/* 制度名が長いので、1行に収まるよう少し小さく・余白を詰める */
.subsidy-pref .sub-quick-table tbody .name {
  font-size: 1.5rem;
  padding: 20px 16px;
  white-space: nowrap;
}
.subsidy-pref .sub-quick-table tbody .name span {
  display: block;
  font-size: 1.3rem;
}
/* 金額の列を詰め、「対象住宅・条件」「主な対象工事」の文字が1字だけ折り返さない幅にする */
.subsidy-pref .sub-quick-table thead th:nth-child(2) {
  width: 13%;
}
.subsidy-pref .sub-quick-table thead th:nth-child(4) {
  width: 15.5%;
}
.subsidy-pref .sub-quick-table thead th:nth-child(5) {
  width: 14.8%;
}

/* ---------- 各補助金セクション ---------- */
.sub-subsidy.is-pref {
  background: var(--beige);
}
/* 帯の右上の飾り文字（都道府県の制度は地名、国の制度は 01・02） */
.subsidy-pref .is-pref .sub-subsidy__head::after {
  content: "TOKYO";
  font-size: 20rem;
  top: -10px;
}
.subsidy-pref .is-mado .sub-subsidy__head::after {
  content: "01";
}
.subsidy-pref .is-mirai .sub-subsidy__head::after {
  content: "02";
}
.subsidy-pref.is-kanagawa .is-pref .sub-subsidy__head::after {
  content: "KANAGAWA";
  font-size: 16rem;
}
@media screen and (max-width: 768px) {
  .subsidy-pref .is-pref .sub-subsidy__head::after {
    font-size: 9rem;
    top: 0;
  }
  .subsidy-pref.is-kanagawa .is-pref .sub-subsidy__head::after {
    font-size: 5.6rem;
  }
}
/* 金額が2段（例：子育て世代／定住世帯）のときは間を空ける */
.subsidy-pref .sub-quick-table .price .num + .note {
  margin-top: 8px;
}
.subsidy-pref .sub-summary .price .note:first-child {
  margin: 0 0 4px;
}
.subsidy-pref .sub-summary .price .num + .note {
  margin: 12px 0 4px;
}
/* 2列カード */
.sub-target__list.col2 {
  grid-template-columns: repeat(2, 1fr);
}
@media screen and (max-width: 768px) {
  .sub-target__list.col2 {
    gap: 20px;
    grid-template-columns: 1fr;
    margin: 30px 0 0;
  }
}
/* 注意点（番号付きの小見出し＋本文） */
.sub-notice + .sub-notice {
  border-top: 1px solid var(--sub-line);
  margin: 24px 0 0;
  padding: 24px 0 0;
}
.sub-notice__ttl {
  align-items: center;
  color: var(--sub-dark);
  display: flex;
  font-size: 1.8rem;
  font-weight: 900;
  gap: 12px;
  letter-spacing: 0.05em;
  line-height: 1.5;
}
.sub-notice__ttl .num {
  align-items: center;
  background: var(--accent);
  border-radius: 50%;
  color: #fff;
  display: flex;
  flex-shrink: 0;
  font-size: 1.4rem;
  height: 32px;
  justify-content: center;
  width: 32px;
}
.sub-notice .basic-txt {
  margin: 12px 0 0;
}
/* 注意点が長いと見出しが縦中央で浮くので、上揃えにする */
.sub-condition__head:has(.sub-notice) {
  align-items: flex-start;
}
@media screen and (max-width: 768px) {
  .sub-notice__ttl {
    font-size: 1.6rem;
  }
}
/* 4列カードは幅が狭いので、タイトル（例：高断熱ドアへの改修）が1行に収まるサイズにする */
@media screen and (min-width: 769px) {
  .subsidy-pref .sub-target__list.col4 .ttl {
    font-size: 1.7rem;
    gap: 10px;
  }
}
/* 段落が続くときは間を空ける */
.sub-condition__head .basic-txt + .basic-txt,
.subsidy-pref .sub-target__list .basic-txt + .basic-txt {
  margin: 10px 0 0;
}
/* 「補助額の決まり方」だけを載せる場合は上の余白を詰める */
.sub-condition > .sub-formula:first-child {
  margin: 10px 0 0;
}
.sub-condition__head .marker-line {
  background: linear-gradient(transparent 60%, var(--accent-pale) 60%);
  color: var(--sub-dark);
  font-weight: bold;
}

/* ---------- sub-price 補助金額の詳細 ---------- */
.sub-price {
  margin: 100px 0 0;
}
.sub-price__block {
  background: #fff;
  border-top: 4px solid var(--accent);
  margin: 40px 0 0;
  padding: 40px 44px 44px;
}
.sub-price__block + .sub-price__block {
  margin: 28px 0 0;
}
.sub-price__ttl {
  align-items: center;
  display: flex;
  font-size: 2.2rem;
  font-weight: 900;
  gap: 12px;
  letter-spacing: 0.1em;
  line-height: 1.5;
}
.sub-price__ttl::before {
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--accent-pale);
  content: "";
  flex-shrink: 0;
  height: 10px;
  width: 10px;
}
.sub-price__block .basic-txt {
  color: #555;
  font-size: 1.4rem;
  letter-spacing: 0.05em;
  margin: 12px 0 0;
}
.sub-price-table {
  border-collapse: collapse;
  margin: 25px 0 0;
  table-layout: fixed;
  width: 100%;
}
.sub-price-table th,
.sub-price-table td {
  border: 1px solid var(--sub-line);
  font-size: 1.4rem;
  font-weight: bold;
  letter-spacing: 0.03em;
  line-height: 1.6;
  padding: 16px 10px;
  text-align: center;
  vertical-align: middle;
}
.sub-price-table thead th {
  background: var(--sub-dark);
  border-color: var(--sub-dark);
  color: #fff;
  font-size: 1.5rem;
}
.sub-price-table thead th + th {
  border-left-color: rgba(255, 255, 255, 0.25);
}
.sub-price-table thead th:first-child {
  width: 26%;
}
.sub-price-table thead th span {
  display: block;
  font-size: 1.2rem;
  font-weight: normal;
}
.sub-price-table tbody th {
  background: var(--beige);
  text-align: left;
}
.sub-price-table tbody th .inner {
  align-items: center;
  display: flex;
  gap: 12px;
}
.sub-price-table .grade {
  align-items: center;
  background: var(--accent);
  border-radius: 50%;
  color: #fff;
  display: flex;
  flex-shrink: 0;
  font: 600 1.7rem / 1 var(--en);
  height: 36px;
  justify-content: center;
  width: 36px;
}
.sub-price-table .cond {
  color: #555;
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.5;
}
.sub-price-table .num {
  font-size: 2.2rem;
  line-height: 1;
  margin: 0 2px 0 0;
}
/* 最上位グレード（P）の行を強調 */
.sub-price-table tbody tr:first-child td {
  background: var(--sub-orange-pale);
}
.sub-price-table tbody tr:first-child .num {
  color: var(--sub-orange-dark);
}

@media screen and (max-width: 768px) {
  .sub-price {
    margin: 60px 0 0;
  }
  .sub-price__block {
    margin: 30px 0 0;
    padding: 25px 20px;
  }
  .sub-price__block + .sub-price__block {
    margin: 20px 0 0;
  }
  .sub-price__ttl {
    font-size: 1.8rem;
    letter-spacing: 0.05em;
  }
  .sub-price-table {
    margin: 20px 0 0;
    min-width: 680px;
  }
  .sub-price-table th,
  .sub-price-table td {
    font-size: 1.3rem;
    padding: 12px 8px;
  }
  .sub-price-table .num {
    font-size: 1.8rem;
  }
}

/* ---------- sub-plan 対象プラン（1件だけ大きく見せる） ---------- */
.sub-plan__list.is-row.is-single {
  grid-template-columns: 1fr;
}
.sub-plan__list.is-single .image {
  min-height: 240px;
  width: 42%;
}
.sub-plan__list.is-single .body {
  justify-content: center;
  padding: 36px 44px;
}
.sub-plan__list.is-single .catch {
  font-size: 1.5rem;
}
.sub-plan__list.is-single .ttl {
  font-size: 2.4rem;
}
.sub-plan__list.is-single .txt {
  flex: none;
  font-size: 1.4rem;
  line-height: 2;
  margin: 14px 0 0;
}
.sub-plan__list.is-single .more {
  font-size: 1.4rem;
  margin: 20px 0 0;
}

@media screen and (max-width: 768px) {
  .sub-plan__list.is-row.is-single a {
    flex-direction: column;
  }
  .sub-plan__list.is-single .image {
    aspect-ratio: 16 / 9;
    min-height: 0;
    width: 100%;
  }
  .sub-plan__list.is-single .body {
    padding: 20px;
  }
  .sub-plan__list.is-single .ttl {
    font-size: 1.9rem;
  }
}

/* ---------- sub-national 国の補助金制度（導入） ---------- */
.sub-national {
  padding: 120px 0 100px;
}
.sub-national .sub-lead + .sub-lead {
  margin-top: 15px;
}

@media screen and (max-width: 768px) {
  .sub-national {
    padding: 60px 0 50px;
  }
}

/* ---------- sub-support ---------- */
/* 直前がベージュのセクションなので、円の後ろもベージュにつなげる */
.subsidy-pref .sub-support {
  background: linear-gradient(var(--beige) 180px, var(--top-cream) 180px);
}
/* 字間を少し詰め、「申請に必要な写真撮影と書類収集」が1行に収まるようにする */
.subsidy-pref .sub-support__list .ttl {
  letter-spacing: 0.05em;
}

@media screen and (max-width: 768px) {
  .subsidy-pref .sub-support {
    background: linear-gradient(var(--beige) 50px, var(--top-cream) 50px);
  }
}

/* ---------- sub-sim 利用シミュレーション ---------- */
.sub-sim {
  padding: 120px 0;
}
.sub-sim .sub-case__list > li {
  border: 1px solid var(--sub-line);
  box-shadow: var(--sub-shadow);
}
.sub-sim__head {
  background: var(--beige);
  padding: 52px 26px 22px;
  position: relative;
}
.sub-sim__head .label {
  background: var(--sub-orange);
  color: #fff;
  font: 600 1.5rem / 1 var(--en);
  left: 0;
  letter-spacing: 0.03em;
  padding: 10px 16px;
  position: absolute;
  top: 0;
}
.sub-sim__head .ttl {
  font-size: 2rem;
}
.sub-sim__head .ttl span {
  color: #666;
  display: block;
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  margin: 4px 0 0;
}
/* 内訳の行間が詰まって見えるので、行の高さを確保する */
.sub-sim .sub-case__list .cost {
  gap: 8px 0;
  line-height: 1.6;
  margin: 0;
}
.sub-sim .sub-case__list .total .price {
  white-space: nowrap;
}

@media screen and (max-width: 768px) {
  .sub-sim {
    padding: 60px 0;
  }
  .sub-sim__head {
    padding: 46px 20px 18px;
  }
}

/* ---------- faq-area よくあるご質問 ---------- */
#subsidy .faq-area {
  background: #fff6ea;
  padding: 120px 0 140px;
}
#subsidy .faq-area .ttl-l {
  text-align: left;
}
/* 共通CSSの上下余白(80px)だと質問の上下が空きすぎるので詰め、最後の区切り線も消す */
#subsidy .faq-list {
  margin: 40px 0 0;
  padding: 30px 80px;
}
#subsidy .faq-list li:last-child {
  border-bottom: none;
}
/* 回答が複数段落のときは間を空ける */
#subsidy .faq-a p + p {
  margin-top: 1em;
}

@media screen and (max-width: 768px) {
  #subsidy .faq-area {
    padding: 60px 0 70px;
  }
  /* 共通CSSの余白(80px)のままだと質問文が極端に細くなるためSPは詰める */
  #subsidy .faq-list {
    border-radius: 15px;
    margin: 20px 0 0;
    padding: 5px 15px;
  }
}