/* ===============================================
# base
=============================================== */

:root {
  --t-blue: #0358a7;
  --t-blue-dark: #003366;
  --t-yellow: #f8d408;
  --t-text-main: #333333;
  --white: #ffffff;

  --width-wide: 1200px;
  --width-3col: 1080px;
  --width-2col: 960px;
  --width-narrow: 800px;
  --width-base: 1024px;

  --gutter-sp: 1.6rem;
  --gutter-pc: 5rem;

  --section-space-sp: 6rem;
  --section-space-pc: 10rem;

  --gap-2col-sp: 2.4rem;
  --gap-2col-pc: 4rem;

  --gap-3col-sp: 2rem;
  --gap-3col-pc: 3rem;

  /* タイポグラフィ：黄金比 */
  --fz-h2: clamp(2.4rem, 2.5vw, 2.6rem);
  /* 12px固定 */
  --fz-lead: clamp(1.3rem, 1.5vw, 1.6rem);
}
.br-pc,
.br-sp {
  display: none;
}

/* SP改行 */
@media screen and (min-width: 376px) {
  .br-sp {
    display: block;
  }
}

/* PC改行 */
@media screen and (min-width: 1024px) {
  .br-sp {
    display: none;
  }

  .br-pc {
    display: block;
  }
}

/* ===============================================
# html
=============================================== */
html {
  font-size: 62.5%;
}

/* ===============================================
# body
=============================================== */
body {
  color: var(--t-text-main);
  background: var(--white);
  font-family: "Noto Sans JP", "Roboto", sans-serif;
  line-height: 1.7;
	letter-spacing: 0.02em;
}



/* ===============================================
# grid
=============================================== */
.c-grid-2,
.c-grid-3 {
  display: grid;
}

.c-grid-2 {
  gap: var(--gap-2col-sp);
}

.c-grid-3 {
  gap: var(--gap-3col-sp);
}

@media screen and (min-width: 768px) {
  .c-grid-2 {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap-2col-pc);
  }

  .c-grid-3 {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap-3col-pc);
  }
}
/* ===============================================
# container
=============================================== */
.l-container,
.l-container-wide,
.l-container-3col,
.l-container-2col,
.l-container-narrow {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--gutter-sp);
}

.l-container {
  max-width: calc(var(--width-base) + (var(--gutter-sp) * 2));
}

.l-container-wide {
  max-width: calc(var(--width-wide) + (var(--gutter-sp) * 2));
}

.l-container-3col {
  max-width: calc(var(--width-3col) + (var(--gutter-sp) * 2));
}

.l-container-2col {
  max-width: calc(var(--width-2col) + (var(--gutter-sp) * 2));
}

.l-container-narrow {
  max-width: calc(var(--width-narrow) + (var(--gutter-sp) * 2));
}

@media screen and (min-width: 768px) {
  .l-container,
  .l-container-wide,
  .l-container-3col,
  .l-container-2col,
  .l-container-narrow {
    padding-inline: var(--gutter-pc);
  }

  .l-container {
    max-width: calc(var(--width-base) + (var(--gutter-pc) * 2));
  }

  .l-container-wide {
    max-width: calc(var(--width-wide) + (var(--gutter-pc) * 2));
  }

  .l-container-3col {
    max-width: calc(var(--width-3col) + (var(--gutter-pc) * 2));
  }

  .l-container-2col {
    max-width: calc(var(--width-2col) + (var(--gutter-pc) * 2));
  }

  .l-container-narrow {
    max-width: calc(var(--width-narrow) + (var(--gutter-pc) * 2));
  }
}

/* ===============================================
# section space
=============================================== */
.l-section-space {
  padding-top: var(--section-space-sp);
  padding-bottom: var(--section-space-sp);
}

@media screen and (min-width: 768px) {
  .l-section-space {
    padding-top: var(--section-space-pc);
    padding-bottom: var(--section-space-pc);
  }
}

/* ===============================================
# typography
=============================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.4;
  font-weight: 600;
}

p + p {
  margin-top: 1.6rem;
}

/* ===============================================
# font-awesome
=============================================== */
.fa-angle-right {
  padding-left: 2rem;
}