/* =========================================================
  Variables
========================================================= */

:root {
  /* layout */
  --l-pc-maxwidth: 198em;
  --pc-side-header-width: clamp(24rem, 22vw, 32rem);
  --sp-header-height: 6.4rem;

  /* fontfamily */
  --font-family-base:'Noto Sans JP', 'YuGothic', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'メイリオ', Meiryo, sans-serif;
  --font-family-h: 'Zen Kaku Gothic New', 'Noto Sans JP', 'YuGothic', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'メイリオ', Meiryo, sans-serif;

  /* English / Accent fonts */
  --font-family-en: 'Inter', sans-serif;
  --font-family-en-chivo: 'Chivo', sans-serif;
  --font-family-en-big: 'Big Shoulders Text', sans-serif;
  --font-family-en-atomic: 'Atomic Age', system-ui;
  --font-family-en-league: 'League Spartan', sans-serif;

  /* font weight */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-bold: 500;
  --font-weight-extra-bold: 700;

  /* color */
  --basecolor: #2D2A26;
  --white: #ffffff;
  --green: #3E8C92;
  --darkgreen: #136066;
  --lightgreen: #A9D0D2;
  --gray: #545454;
  --yellow: #F5C34D;
  --red: #F54D4D;

  /* background-color */
  --bg-main: #3E8C92;
  --bg-white: #ffffff;
  --bg-green: #5D9EA3;
  --bg-lightgreen: #06C755;
  --bg-yellow: #FADD81;
  --bg-red: #F55D3C;

  /* hover */
  --hover-color: #FADD81;
  --hover-opacity: 0.9;
  --hover-transition: 0.2s;
}

/* =========================================================
  Layout Base
========================================================= */

html {
  height: 100%;
  font-size: 62.5%; /* 1rem = 10px */
}

body {
  display: flex;
  flex-flow: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

img {
  width: 100%;
  height: auto;
}

/* =========================================================
  Display
========================================================= */

.l-inline {
  display: inline;
}

.l-inline-block {
  display: inline-block;
}

.l-block {
  display: block;
}

/* none */
.f-sp-none {
  display: none !important;
}

.f-pc-none {
  display: block !important;
}

@media (min-width: 768px) {
  .f-sp-none {
    display: block !important;
  }

  .f-pc-none {
    display: none !important;
  }
}

/* =========================================================
  Position
========================================================= */

.l-p-relative {
  position: relative;
}

.l-absolute {
  position: absolute;
}

/* =========================================================
  Flex
========================================================= */

.l-flex {
  display: flex;
  flex-wrap: wrap;
}

.l-flex-c {
  display: flex;
  justify-content: center;
}

.l-flex-s {
  display: flex;
  justify-content: flex-start;
}

.l-flex-e {
  display: flex;
  justify-content: flex-end;
}

.l-flex-a {
  display: flex;
  justify-content: space-around;
}

.l-flex-b {
  display: flex;
  justify-content: space-between;
}

.rol-w-r {
  flex-direction: row-reverse;
}

.column {
  flex-direction: column;
}

.shrink0 {
  flex-shrink: 0;
}

.order1 {
  order: 1;
}

.order2 {
  order: 2;
}

.order3 {
  order: 3;
}

.order4 {
  order: 4;
}

.order5 {
  order: 5;
}

.order6 {
  order: 6;
}

/* flex-pc-only */
@media (min-width: 768px) {
  .l-flex-pc {
    display: flex;
    flex-wrap: wrap;
  }

  .l-flex-c-pc {
    display: flex;
    justify-content: center;
  }

  .l-flex-s-pc {
    display: flex;
    justify-content: flex-start;
  }

  .l-flex-e-pc {
    display: flex;
    justify-content: flex-end;
  }

  .l-flex-around-pc {
    display: flex;
    justify-content: space-around;
  }

  .l-flex-between-pc {
    display: flex;
    justify-content: space-between;
  }

  .rol-w-r-pc {
    flex-direction: row-reverse;
  }

  .column-pc {
    flex-direction: column;
  }
}

/* flex-exception */
.l-flex-align-center {
  align-items: center;
}

.l-flex-align-start {
  align-items: flex-start;
}

.l-flex-nowrap {
  flex-wrap: nowrap;
}

/* =========================================================
  Grid
========================================================= */

.l-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
}

.l-grid[data-cols="2"] {
  --cols: 2;
}

.l-grid[data-cols="3"] {
  --cols: 3;
}

.l-grid[data-cols="4"] {
  --cols: 4;
}

.l-grid[data-cols="5"] {
  --cols: 5;
}

.l-grid[data-cols="6"] {
  --cols: 6;
}

/* grid-pc-only */
@media (min-width: 768px) {
  .l-grid-pc {
    display: grid;
    grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  }

  .l-grid-pc[data-cols="2"] {
    --cols: 2;
  }

  .l-grid-pc[data-cols="3"] {
    --cols: 3;
  }

  .l-grid-pc[data-cols="4"] {
    --cols: 4;
  }

  .l-grid-pc[data-cols="5"] {
    --cols: 5;
  }

  .l-grid-pc[data-cols="6"] {
    --cols: 6;
  }
}

/* =========================================================
  Width
========================================================= */

.l-w-100 {
  width: 100%;
}

.l-w-95 {
  width: 95%;
}

.l-w-90 {
  width: 90%;
}

.l-w-80 {
  width: 80%;
}

.l-w-70 {
  width: 70%;
}

.l-w-60 {
  width: 60%;
}

.l-w-55 {
  width: 55%;
}

.l-w-50 {
  width: 50%;
}

.l-w-45 {
  width: 45%;
}

.l-w-40 {
  width: 40%;
}

.l-w-33 {
  width: 33.33333%;
}

.l-w-25 {
  width: 25%;
}

.l-w-20 {
  width: 20%;
}

@media (min-width: 768px) {
  .l-w-95-pc {
    width: 95%;
  }

  .l-w-90-pc {
    width: 90%;
  }

  .l-w-80-pc {
    width: 80%;
  }

  .l-w-70-pc {
    width: 70%;
  }

  .l-w-60-pc {
    width: 60%;
  }

  .l-w-55-pc {
    width: 55%;
  }

  .l-w-50-pc {
    width: 50%;
  }

  .l-w-45-pc {
    width: 45%;
  }

  .l-w-40-pc {
    width: 40%;
  }

  .l-w-33-pc {
    width: 33.33333%;
  }

  .l-w-25-pc {
    width: 25%;
  }

  .l-w-20-pc {
    width: 20%;
  }
}

/* =========================================================
  Inner / Wrapper
========================================================= */

/* sp用inner */
@media (max-width: 767.98px) {
  .l-sp-inner {
    padding: 0 1.6rem;
    margin: 0 auto;
  }
}

/* pc用wrapper */
@media (min-width: 768px) {
  .l-pc-wrapper {
    max-width: var(--l-pc-maxwidth);
    margin-inline: auto;
  }
}

/* pc用inner 768px~1200pxの間だけ */
@media (min-width: 768px) and (max-width: 1200px) {
  .l-pc-inner {
    padding: 0 1.6rem;
  }
}

/* =========================================================
  Utilities - Gap
========================================================= */

.u-gap-4 {
  gap: 0.4rem;
}

.u-gap-8 {
  gap: 0.8rem;
}

.u-gap-12 {
  gap: 1.2rem;
}

.u-gap-16 {
  gap: 1.6rem;
}

.u-gap-24 {
  gap: 2.4rem;
}

.u-gap-32 {
  gap: 3.2rem;
}

/* =========================================================
  Utilities - Margin
========================================================= */

.u-m-4 {
  margin: 0.4rem;
}

.u-m-8 {
  margin: 0.8rem;
}

.u-m-12 {
  margin: 1.2rem;
}

.u-m-16 {
  margin: 1.6rem;
}

.u-m-24 {
  margin: 2.4rem;
}

.u-m-32 {
  margin: 3.2rem;
}

/* margin 左右 */
.u-mx-4 {
  margin-inline: 0.4rem;
}

.u-mx-8 {
  margin-inline: 0.8rem;
}

.u-mx-12 {
  margin-inline: 1.2rem;
}

.u-mx-16 {
  margin-inline: 1.6rem;
}

.u-mx-24 {
  margin-inline: 2.4rem;
}

.u-mx-32 {
  margin-inline: 3.2rem;
}

/* margin 上下 */
.u-my-4 {
  margin-block: 0.4rem;
}

.u-my-8 {
  margin-block: 0.8rem;
}

.u-my-12 {
  margin-block: 1.2rem;
}

.u-my-16 {
  margin-block: 1.6rem;
}

.u-my-24 {
  margin-block: 2.4rem;
}

.u-my-32 {
  margin-block: 3.2rem;
}

/* margin 片側 */
.u-ms-4 {
  margin-inline-start: 0.4rem;
}

.u-ms-8 {
  margin-inline-start: 0.8rem;
}

.u-ms-12 {
  margin-inline-start: 1.2rem;
}

.u-ms-16 {
  margin-inline-start: 1.6rem;
}

.u-ms-24 {
  margin-inline-start: 2.4rem;
}

.u-ms-32 {
  margin-inline-start: 3.2rem;
}

.u-me-4 {
  margin-inline-end: 0.4rem;
}

.u-me-8 {
  margin-inline-end: 0.8rem;
}

.u-me-12 {
  margin-inline-end: 1.2rem;
}

.u-me-16 {
  margin-inline-end: 1.6rem;
}

.u-me-24 {
  margin-inline-end: 2.4rem;
}

.u-me-32 {
  margin-inline-end: 3.2rem;
}

.u-mt-4 {
  margin-block-start: 0.4rem;
}

.u-mt-8 {
  margin-block-start: 0.8rem;
}

.u-mt-12 {
  margin-block-start: 1.2rem;
}

.u-mt-16 {
  margin-block-start: 1.6rem;
}

.u-mt-24 {
  margin-block-start: 2.4rem;
}

.u-mt-32 {
  margin-block-start: 3.2rem;
}

.u-mb-4 {
  margin-block-end: 0.4rem;
}

.u-mb-8 {
  margin-block-end: 0.8rem;
}

.u-mb-12 {
  margin-block-end: 1.2rem;
}

.u-mb-16 {
  margin-block-end: 1.6rem;
}

.u-mb-24 {
  margin-block-end: 2.4rem;
}

.u-mb-32 {
  margin-block-end: 3.2rem;
}

/* =========================================================
  Utilities - Padding
========================================================= */

.u-p-4 {
  padding: 0.4rem;
}

.u-p-8 {
  padding: 0.8rem;
}

.u-p-12 {
  padding: 1.2rem;
}

.u-p-16 {
  padding: 1.6rem;
}

.u-p-24 {
  padding: 2.4rem;
}

.u-p-32 {
  padding: 3.2rem;
}

/* padding 左右 */
.u-px-4 {
  padding-inline: 0.4rem;
}

.u-px-8 {
  padding-inline: 0.8rem;
}

.u-px-12 {
  padding-inline: 1.2rem;
}

.u-px-16 {
  padding-inline: 1.6rem;
}

.u-px-24 {
  padding-inline: 2.4rem;
}

.u-px-32 {
  padding-inline: 3.2rem;
}

/* padding 上下 */
.u-py-4 {
  padding-block: 0.4rem;
}

.u-py-8 {
  padding-block: 0.8rem;
}

.u-py-12 {
  padding-block: 1.2rem;
}

.u-py-16 {
  padding-block: 1.6rem;
}

.u-py-24 {
  padding-block: 2.4rem;
}

.u-py-32 {
  padding-block: 3.2rem;
}

/* padding 片側 */
.u-ps-4 {
  padding-inline-start: 0.4rem;
}

.u-ps-8 {
  padding-inline-start: 0.8rem;
}

.u-ps-12 {
  padding-inline-start: 1.2rem;
}

.u-ps-16 {
  padding-inline-start: 1.6rem;
}

.u-ps-24 {
  padding-inline-start: 2.4rem;
}

.u-ps-32 {
  padding-inline-start: 3.2rem;
}

.u-pe-4 {
  padding-inline-end: 0.4rem;
}

.u-pe-8 {
  padding-inline-end: 0.8rem;
}

.u-pe-12 {
  padding-inline-end: 1.2rem;
}

.u-pe-16 {
  padding-inline-end: 1.6rem;
}

.u-pe-24 {
  padding-inline-end: 2.4rem;
}

.u-pe-32 {
  padding-inline-end: 3.2rem;
}

.u-pt-4 {
  padding-block-start: 0.4rem;
}

.u-pt-8 {
  padding-block-start: 0.8rem;
}

.u-pt-12 {
  padding-block-start: 1.2rem;
}

.u-pt-16 {
  padding-block-start: 1.6rem;
}

.u-pt-24 {
  padding-block-start: 2.4rem;
}

.u-pt-32 {
  padding-block-start: 3.2rem;
}

.u-pb-4 {
  padding-block-end: 0.4rem;
}

.u-pb-8 {
  padding-block-end: 0.8rem;
}

.u-pb-12 {
  padding-block-end: 1.2rem;
}

.u-pb-16 {
  padding-block-end: 1.6rem;
}

.u-pb-24 {
  padding-block-end: 2.4rem;
}

.u-pb-32 {
  padding-block-end: 3.2rem;
}

/* =========================================================
  Utilities - Center
========================================================= */

.u-mx-auto {
  margin-inline: auto;
}

.u-flex-center-x {
  display: flex;
  justify-content: center;
}

.u-flex-center-xy {
  display: flex;
  justify-content: center;
  align-items: center;
}

.u-grid-center-x {
  display: grid;
  justify-items: center;
}

.u-grid-center-xy {
  display: grid;
  place-items: center;
}

/* =========================================================
  Title & Text
========================================================= */

h1 {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-bold);
  font-size: clamp(3.4rem, calc(2.6rem + 1.333vw), 4.2rem);
}

h2 {
  font-family: var(--font-family-h);
  font-weight: var(--font-weight-bold);
  font-size: clamp(3rem, calc(2.2rem + 1.333vw), 3.8rem);
}

h3 {
  font-family: var(--font-family-h);
  font-weight: 600;
  font-size: clamp(2.6rem, calc(1.8rem + 1.333vw), 3.4rem);
}

h4 {
  font-family: var(--font-family-h);
  font-weight: 500;
  font-size: clamp(2.2rem, calc(1.4rem + 1.333vw), 3rem);
}

h5 {
  font-family: var(--font-family-h);
  font-weight: 500;
  font-size: clamp(1.8rem, calc(1rem + 1.333vw), 2.6rem);
}

p {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-light);
  font-size: clamp(1.6rem, calc(1.2rem + 0.667vw), 2rem);
  line-height: 2.5rem;
  color: var(--basecolor);
}

/* =========================================================
  Link
========================================================= */

a {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  font-family: var(--font-family-base);
}

a:hover {
  opacity: var(--hover-opacity);
  transition: var(--hover-transition);
  color: var(--hover-color);
}

a img:hover {
  opacity: var(--hover-opacity);
  transition: var(--hover-transition);
}