@import url("/assets/shared/button-xl.css");
@import url("/assets/shared/surface-leaf-gradient.css");

/* 採用した補助金A案。B001の補助金セクションに限定。 */
#subsidy{padding: 56px 32px;}
#subsidy .wrap{max-width: 1200px; margin: auto;}
#subsidy .section-heading{margin-bottom: 28px;}
#subsidy .section-heading__title{font-size: 32px;}
#subsidy .lead{margin: 16px 0px 0px; color: var(--color-text-secondary);}
#subsidy .formula{display: grid; grid-template-columns: 1fr 48px 1fr 48px 1.1fr; align-items: stretch; border: 1px solid var(--color-border-default); border-radius: 16px; overflow: hidden; background: white;}
#subsidy .amount{text-align: center; padding: 26px 16px;}
#subsidy .amount h3{font-size: 17px; margin: 0px;}
#subsidy .amount p{margin: 4px 0px 0px; font-size: 13px; color: var(--color-text-secondary);}
#subsidy .number{display: block; white-space: nowrap; font-family: var(--font-numeric); font-size: 78px; line-height: 1.2; font-weight: 700; color: var(--color-brand-green-darker); margin: 8px 0px;}
#subsidy .number small{font-family: var(--font-sans-ja); font-size: 21px;}
#subsidy .operator{display: flex; align-items: center; justify-content: center; font-size: 32px; color: var(--color-brand-green-darker);}
#subsidy .total{background: var(--color-brand-green-dark); color: white;}
#subsidy .total .number, #subsidy .total p{color: white;}
#subsidy .total .number{color: var(--color-brand-lime);}
#subsidy .flow-title{font-size: 20px; margin: 30px 0px 16px;}
#subsidy .flow{display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 0px; margin: 0px; list-style: none;}
#subsidy .flow li{border-top: 2px solid var(--color-brand-green); padding-top: 16px; display: flex; gap: 12px;}
#subsidy .step{flex: 0 0 auto; background: var(--color-brand-green-dark); border-radius: 50%; color: white; width: 30px; height: 30px; display: grid; place-items: center; font: 700 17px var(--font-numeric);}
#subsidy .flow strong{font-size: 16px;}
#subsidy .flow p{margin: 4px 0px 0px; font-size: 13px; color: var(--color-text-secondary);}
#subsidy .dates{display: flex; gap: 24px; border-block: 1px solid var(--color-border-default); margin-top: 26px; padding: 16px 0px; align-items: start;}
#subsidy .dates h3{font-size: 16px; margin: 0px; flex: 0 0 auto;}
#subsidy .dates dl{margin: 0px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; flex: 1 1 0%;}
#subsidy .dates dt{font-size: 12px; font-weight: 700; color: var(--color-brand-green-darker);}
#subsidy .dates dd{font-size: 13px; margin: 4px 0px 0px;}
#subsidy .annotation{font-size: 12px; color: var(--color-text-muted); margin: 16px 0px 0px;}
/* A案のブラッシュアップ。共通トークンを使用し、B/C案へ影響させない。 */
#subsidy{padding-block:48px}
#subsidy .a-heading{display:flex;align-items:center;justify-content:space-between;gap:32px;margin-bottom:28px}
#subsidy .section-heading{display:block;margin:0}
#subsidy .lead{margin-top:14px}
#subsidy .a-support{display:flex;align-items:center;gap:12px;flex:none;color:var(--color-brand-green-darker);font-size:14px;line-height:1.6;font-weight:700;margin:0}
#subsidy .a-support img{width:32px;height:32px}
#subsidy .formula{grid-template-columns:1.75fr 48px 1.25fr;border:0;border-radius:0;background:transparent;overflow:visible;gap:12px}
#subsidy .formula-parts{display:grid;grid-template-columns:1fr 40px 1fr;background:white;border:1px solid var(--color-border-default);border-radius:16px;overflow:hidden}
#subsidy .formula>.total{border:1px solid var(--color-brand-green-dark);border-radius:16px;background-image:repeating-linear-gradient(135deg,transparent 0 30px,rgba(255,255,255,.045) 30px 31px),linear-gradient(135deg,rgba(255,255,255,.035) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.035) 75%);background-size:auto,96px 96px}
#subsidy .amount{padding:14px 16px;display:flex;flex-direction:column;align-items:center;justify-content:center}
#subsidy .amount h3{font-size:17px;line-height:1.5}
#subsidy .amount p{font-size:13px;line-height:1.6}
#subsidy .number{font-size:72px;line-height:1.1;margin:6px 0 4px;font-variant-numeric:tabular-nums}
#subsidy .number small{font-size:19px;margin-left:3px}
#subsidy .operator{font-size:28px}
#subsidy .total .number{font-family:Impact,"Arial Narrow",sans-serif;font-size:84px;font-weight:400;margin:1px 0}
#subsidy .dates{margin-top:20px;padding:16px 24px;gap:32px;background:var(--color-surface-base)}
#subsidy .dates h3{font-size:15px;padding-top:2px;display:flex;align-items:center;gap:8px}
#subsidy .a-calendar{font-family:"Material Symbols Outlined";font-size:24px;font-weight:400;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;direction:ltr;font-feature-settings:"liga";font-variation-settings:"FILL" 1,"wght" 400,"GRAD" 0,"opsz" 24;color:var(--color-brand-green-darker);flex:none}
#subsidy .dates dl{gap:24px}
#subsidy .dates dl>div+div{border-left:1px solid var(--color-border-default);padding-left:24px}
#subsidy .dates dt{font-size:12px}
#subsidy .dates dd{font-size:13px;line-height:1.7;white-space:nowrap}
#subsidy .annotation{margin-top:12px;font-size:12px}
#subsidy .flow{background:rgba(255,255,255,.65)}
#subsidy .flow li{position:relative;padding:24px 12px}
#subsidy .flow li:not(:last-child)::after{content:"";position:absolute;right:-17px;top:50%;transform:translateY(-50%);width:0;height:0;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:10px solid var(--color-brand-green-dark);pointer-events:none}
#subsidy .a-consult{display:flex;justify-content:center;margin:28px 0 0}
#subsidy .a-consult .button__icon{translate:0 -1px}

/* 日程と手順を、読み順を保ったまま画面幅に収める。 */
@media (max-width: 1199px) {
  #subsidy .dates { flex-direction: column; gap: 16px; }
  #subsidy .dates dl { width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #subsidy .dates dd { white-space: normal; }
}
@media (max-width: 959px) {
  #subsidy .a-heading { align-items: flex-start; flex-direction: column; gap: 20px; }
  #subsidy .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #subsidy .flow li:not(:last-child)::after { content: none; }
}
@media (max-width: 767px) {
  #subsidy { padding-inline: 20px; }
  #subsidy .section-heading__title { font-size: 26px; }
  #subsidy .formula { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  #subsidy .formula-parts { grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); }
  #subsidy .amount { min-width: 0; padding: 14px 8px; }
  #subsidy .amount h3 { font-size: 16px; }
  #subsidy .number { font-size: 56px; }
  #subsidy .number small { font-size: 14px; }
  #subsidy .total .number { font-size: 64px; }
  #subsidy .formula > .operator { line-height: 1; transform: rotate(90deg); }
  #subsidy .flow { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  #subsidy .flow li { padding: 20px 12px; }
  #subsidy .flow li:not(:last-child)::after {
    content: ""; right: auto; left: 50%; top: auto; bottom: -12px;
    transform: translateX(-50%) rotate(90deg);
  }
  #subsidy .dates { padding: 20px 16px; }
  #subsidy .dates dl { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  #subsidy .dates dl > div + div {
    border-left: 0; padding-left: 0;
    border-top: 1px solid var(--color-border-default); padding-top: 12px;
  }
}

#subsidy .condition-shell { padding-bottom:28px; }

@media (min-width: 768px) and (max-width: 959px) {
  #subsidy .formula { grid-template-columns: minmax(0, 1.8fr) 32px minmax(0, 1.2fr); }
  #subsidy .formula-parts { grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); }
  #subsidy .amount { min-width: 0; padding-inline: 8px; }
  #subsidy .number { font-size: 48px; }
  #subsidy .number small { font-size: 16px; }
  #subsidy .total .number { font-size: 72px; }
}