/* デザインA：白と薄いグレー、濃紺の文字、細い罫線、青はボタンとリンクだけ、角を立てたフラットな構成 */
:root {
  --bg: #ffffff; --bg-sub: #f4f4f4;
  --heading: #14263a; --text: #161616; --text-sub: #525252;
  --accent: #0055b8; --accent-dark: #003f8a;
  --rule: #d6dde4; --rule-strong: #14263a; --field-border: #727e8a;
  --error: #b81922; --error-bg: #fff1f1;
  --bar-bg: #14263a; --bar-text: #ffffff;
  --footer-bg: #f4f4f4; --footer-text: #525252;
  --font-body: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "YuGothic", Meiryo, sans-serif;
  --font-head: var(--font-body); --head-weight: 700;
  --h1: 28px; --h2: 22px; --h3: 18px;
  --radius: 0; --radius-sm: 0; --radius-lg: 0; --radius-btn: 0; --radius-num: 0;
  --wrap: 1128px; --gutter: 16px; --sec-pad: 32px; --card-gap: 24px; --result-bar: 3px;
}
.brand::before { content: ""; display: inline-block; width: 11px; height: 11px; margin-right: 7px; background: var(--heading); }
.card { padding-top: 14px; border-top: 2px solid var(--heading); }
.photo figcaption { text-align: right; }
.flow > li { border-width: 2px 0 0; padding: 14px 0 0; }
.sec-alt .flow > li, .flow > li { background: none; }
.flow > li + li::before { top: -31px; }
.page-head { border-bottom: 0; }
.node { border-color: var(--field-border); }

@media (max-width: 420px) { .brand::before { display: none; } }

@media (min-width: 900px) {
  :root { --h1: 42px; --h2: 26px; --h3: 19px; --sec-pad: 64px; --card-gap: 40px; }
  h1 { line-height: 1.3; }
  .hero { padding: 56px 0; }
  .hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 56px; align-items: center; }
  .hero .photo { margin: 0; max-width: none; }
  .hero .photo img { aspect-ratio: 4 / 3; }
  .page-head { padding: 40px 0 56px; }
  .page-head h1, .page-head .lead { max-width: 820px; }
  /* 左に見出し、右に本文 */
  .sec > .wrap { display: grid; grid-template-columns: 280px minmax(0, 1fr); column-gap: 64px; }
  .sec-head { margin: 0; }
  .sec-body > p { max-width: 720px; }
  .sec-wide > .wrap, .sec-single > .wrap { display: block; }
  .sec-wide .sec-head { margin-bottom: 28px; }
  .sec-single > .wrap { max-width: 768px; }
  .sec-form .sec-body { max-width: 640px; }
  .flow > li + li::before { top: 14px; left: -28px; transform: none; }
}