@charset "UTF-8";

/* ============================
   :root
============================ */
:root {
  --main: #3298d7;
  --base: #fff;
  --sub: #d6e5ee;
  --sub-2: #bfeed5;
  --gray: #ededed;
  --darkgray: #5d5d5d;

  --font-body: "Roboto", "Noto Sans JP", sans-serif;

  --fs-h1: 3rem;
  --fs-h2: 2rem;
  --fs-h3: 1.75rem;
  --fs-h4: 1.5rem;
  --fs-h5: 1.2rem;
  --fs-body: 1rem;
  --fs-cap: 0.75rem;

  --lh-body: 2;
  --lh-heading: 1.5;
  --lh-list: 1.5;

  --fw-body: 400;
  --fw-bold: 700;

  --mgb-l: 10rem;
  --mgb-m: 4rem;
  --mgb-s: 2rem;
  --mg-xl: 6rem;
  --mg-l: 4rem;
  --mg-m: 2rem;
  --mg-s: 1rem;
  --pd-xl: 8rem;
  --pd-l: 4rem;
  --pd-m: 2rem;
  --pd-s: 1rem;
  --pd-xs: 0.5rem;
  --gap-l: 4rem;
  --gap-m: 2rem;
  --gap-s: 1rem;
  --gap-ss: 0.5rem;
}


/* ============================
   Body
============================ */

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-body);
  color: #000;
  background: var(--base);

  font-feature-settings: "palt";
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
}

/* ============================
   Typography
============================ */

h1,
h2,
h3,
h4 {
  line-height: var(--lh-heading);
  font-weight: var(--fw-bold);
  margin-bottom: 1em;
}

h1 {
  font-size: var(--fs-h1);
}
h2 {
  font-size: var(--fs-h2);
}
h3 {
  font-size: var(--fs-h3);
}
h4 {
  font-size: var(--fs-h4);
}

p {
  margin-bottom: 1em;
}

li,
dt,
dd {
  font-size: var(--fs-body);
  line-height: var(--lh-list);
}

a {
  font-size: var(--fs-body);
  line-height: var(--lh-list);
  transition:
    opacity 0.3s ease,
    background-color 0.3s ease,
    transform 0.3s ease;
}

/* フォーカス（ここに統一） */
a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* ============================
   Utility
============================ */

.pc-only {
  display: inline;
}


.sp-only {
  display: none;
}


/* align */
.center {
  text-align: center;
}

.no-wrap {
  white-space: nowrap; /* 絶対に改行しない */
}