:root {
  --color-navy: #252853;
  --color-blue: #619FD2;
  --color-sky: #619FD2;
  --color-white: #ffffff;
  --color-text: #252853;

  --text-title-weight: bold;

  --gradient-primary: linear-gradient(to right, #23BAF9, #0548AC);

  --header-padding-x: 20px;
  --header-padding-y: 20px;

  --section-padding-y: 88px;
  --section-padding-x: 40px;
  --section-padding-y-sp: 40px;
  --section-padding-x-sp: 20px;

  --cooperation-gap: 35px;
  --banner-padding-y: 50px;
  --banner-padding-x: 50px;

  --logo-width: 140px;
  --banner-logo-width: 361px;
  --banner-logo-width-sp: 200px;

  --card-title-padding: 18px 24px;
  --card-title-padding-sp: 10px 16px;
  --card-title-size: clamp(21px, 2vw, 30px);
  --card-title-line-height: 1.3;
  --card-footer-bg: hsl(216, 94%, 35%);


  --section-title-size: clamp(27px, 4vw, 76px);
  --section-subtitle-size: clamp(16px, 2vw, 24px);

  --grid-2-gap: 28px;
  --grid-4-gap: 18px;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 50px;
}

body {
  font-family: "Noto Sans", sans-serif;
  color: var(--color-text);
  background: var(--color-white);
  line-height: 1.6;
  padding-top: 50px;
  min-width: 375px;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

main {
  width: 100%;
}

footer {
  padding: 24px 16px;
  text-align: center;
  font-size: 12px;
  background: var(--color-navy);
  color: var(--color-white);
}

.br-sp {
  display: none;
}

.br-pc {
  display: initial;
}

.list-style-sp {
  display: none;
}

.section-header {
  margin-bottom: 80px;
  text-align: center;
}

.section-header h2 {
  margin: 0;
  font-size: var(--section-title-size);
  line-height: 1.2;
  font-weight: var(--text-title-weight);
}

.section-header p {
  margin: 16px 0 0;
  font-size: var(--section-subtitle-size);
  letter-spacing: 0.03em;
}