@charset "utf-8";
/* CSS Document */
:root {
      --brand-blue: #005bac;
      --brand-deep: #143d61;
      --brand-light: #eef6fb;
      --accent: #f3a500;
      --text: #333333;
      --muted: #6b747b;
      --line: #dbe3e8;
      --soft: #f6f8f9;
      --white: #ffffff;
      --max: 1080px;
    }
    * { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
      margin: 0;
      color: var(--text);
      background: var(--white);
      font-family: "Noto Sans JP", "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
      line-height: 1.9;
      -webkit-font-smoothing: antialiased;
    }
a { color: var(--brand-blue); }
img { max-width: 100%; height: auto; }
.site-header {
      background: #fff;
      border-bottom: 1px solid #e7ecef;
    }
.site-header__inner {
      width: min(var(--max), calc(100% - 40px));
      min-height: 72px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
    }
.site-logo {
      color: var(--brand-deep);
      font-family: Arial, sans-serif;
      font-size: 1.15rem;
      font-weight: 700;
      letter-spacing: .05em;
    }
.site-category {
      color: var(--muted);
      font-size: .82rem;
    }
.breadcrumb {
      background: #f7f8f9;
      border-bottom: 1px solid #e7ecef;
    }
.breadcrumb__inner {
      width: min(var(--max), calc(100% - 40px));
      margin: 0 auto;
      padding: 11px 0;
      color: var(--muted);
      font-size: .78rem;
    }
.hero {
      position: relative;
      overflow: hidden;
      padding: 68px 20px 62px;
      color: #fff;
      background: linear-gradient(118deg, #005bac 0%, #0d78bc 58%, #1c91ca 100%);
      text-align: center;
    }
.hero::before,
.hero::after {
      position: absolute;
      content: "";
      border-radius: 50%;
      background: rgba(255,255,255,.07);
    }
.hero::before { width: 330px; height: 330px; right: -130px; top: -170px; }
.hero::after { width: 220px; height: 220px; left: -90px; bottom: -150px; }
.hero__inner { position: relative; width: min(980px, 100%); margin: 0 auto; }
.eyebrow {
      margin: 0 0 10px;
      font-family: Arial, sans-serif;
      font-size: .84rem;
      font-weight: 700;
      letter-spacing: .19em;
    }
h1 {
      margin: 0;
      font-size: clamp(1.75rem, 4vw, 2.75rem);
      line-height: 1.48;
      letter-spacing: .025em;
    }
.hero__sub {
      margin: 17px auto 0;
      font-size: clamp(.98rem, 2vw, 1.12rem);
      opacity: .97;
    }
main {
      width: min(var(--max), calc(100% - 40px));
      margin: 0 auto;
      padding: 64px 0 88px;
    }
.lead {
      margin: 0 0 42px;
      font-size: 1.08rem;
    }
.overview {
      margin: 0 0 58px;
      border-top: 4px solid var(--brand-blue);
      box-shadow: 0 4px 18px rgba(20,61,97,.08);
    }
.overview__title {
      margin: 0;
      padding: 17px 24px;
      color: var(--brand-deep);
      background: var(--brand-light);
      font-size: 1.2rem;
    }
.overview dl { margin: 0; }
.overview__row {
      display: grid;
      grid-template-columns: 180px 1fr;
      border-top: 1px solid var(--line);
    }
.overview dt,
.overview dd { margin: 0; padding: 15px 20px; }
.overview dt { background: #f7f9fa; font-weight: 700; }
.overview dd { background: #fff; }
h2 {
      position: relative;
      margin: 3.1em 0 1.25em;
      padding: 0 0 14px;
      color: var(--brand-deep);
      border-bottom: 1px solid var(--line);
      font-size: clamp(1.38rem, 2.7vw, 1.85rem);
      line-height: 1.55;
    }
h2::after {
      position: absolute;
      bottom: -1px;
      left: 0;
      width: 82px;
      height: 4px;
      content: "";
      background: var(--brand-blue);
    }
h3 {
      margin: 2.1em 0 .75em;
      padding-left: 13px;
      color: var(--brand-deep);
      border-left: 4px solid var(--brand-blue);
      font-size: 1.2rem;
    }
p { margin: 0 0 1.35em; }
.photo {
      margin: 38px 0 50px;
    }
.photo__placeholder {
      min-height: 430px;
      display: grid;
      place-items: center;
      padding: 26px;
      color: var(--muted);
      background:
        linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.55)),
        repeating-linear-gradient(135deg, #e9eef1 0, #e9eef1 14px, #f3f5f6 14px, #f3f5f6 28px);
      border: 1px solid #d3dde3;
      text-align: center;
      font-weight: 700;
    }
.photo figcaption {
      margin-top: 9px;
      padding-left: 12px;
      color: var(--muted);
      border-left: 3px solid var(--brand-blue);
      font-size: .88rem;
    }
.voice {
      margin: 28px 0;
      padding: 23px 27px;
      color: var(--brand-deep);
      background: var(--brand-light);
      border-left: 5px solid var(--brand-blue);
      font-size: 1.06rem;
      font-weight: 700;
    }
.points {
      margin: 26px 0 34px;
      padding: 25px 30px 17px;
      background: var(--soft);
      border: 1px solid var(--line);
    }
.points ul { margin: 0; padding-left: 1.35em; }
.points li { margin: 0 0 .7em; }
.highlight {
      margin: 42px 0;
      padding: 30px 34px;
      color: #fff;
      background: var(--brand-blue);
    }
.highlight strong { font-size: 1.12rem; }
.note {
      margin-top: 48px;
      padding: 24px 27px;
      color: var(--muted);
      background: #fafbfc;
      border: 1px solid var(--line);
      font-size: .85rem;
    }
.cta-area {
      margin-top: 58px;
      padding: 38px 28px;
      background: var(--brand-light);
      text-align: center;
    }
.cta-area h2 {
      margin: 0 0 12px;
      padding: 0;
      border: 0;
      text-align: center;
    }
.cta-area h2::after { display: none; }
    .cta-buttons {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 14px;
      margin-top: 24px;
    }
.button {
      display: inline-block;
      min-width: 245px;
      padding: 13px 23px;
      color: #fff;
      background: var(--brand-blue);
      text-decoration: none;
      font-weight: 700;
      transition: opacity .2s ease;
    }
.button--secondary { background: var(--brand-deep); }
    .button:hover { opacity: .82; }
    footer {
      padding: 29px 20px;
      color: #dce6ed;
      background: #1f2f3d;
      text-align: center;
      font-size: .8rem;
    }
@media (max-width: 700px) {
      .site-header__inner,
      .breadcrumb__inner,
      main { width: min(100% - 28px, var(--max)); }
      .site-header__inner { min-height: 62px; }
      .site-category { display: none; }
      .hero { padding: 48px 15px 44px; }
      main { padding: 43px 0 62px; }
      .overview__row { grid-template-columns: 1fr; }
      .overview dt { padding-bottom: 6px; }
      .overview dd { padding-top: 7px; }
      h2 { margin-top: 2.65em; }
      .photo__placeholder { min-height: 250px; }
      .highlight { padding: 24px 22px; }
      .cta-area { padding: 30px 18px; }
      .button { width: 100%; min-width: 0; }
    }