@charset "utf-8";

:root {
  --max-width: 1728px;
  --header-height: max(80px, calc(100vw * calc(80 / 1728)));
  --header-height-sp: max(80px, calc(100vw * calc(80 / 408)));
  --color-green: #73ce32;
  --color-yellow: #ffb81d;
  --color-blue: #3aa6cd;
  --color-accent: #176e8c;
  --color-button: #3aa6cd;
  --color-link: #0088cc;
  --color-text: #000;
  --color-bg: #f3f9ed;
  --color-caution: #cc0000;
  --bg-gray: #f7f7f7;
  --border-radius: 18px;
  --poppins: "Poppins", sans-serif;
  --noto: "Noto Sans", sans-serif;
}

/* ==================================== */

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

html,
body {
  color: var(--color-text);
  padding: 0;
  margin: 0;
  min-height: 100vh;
}

body {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  color: var(--color-text);
  font-feature-settings: "palt";
  background: #fff;
  max-width: 1728px;
  margin: 0 auto;

  @media (max-width: 768px) {
    font-size: 1.4rem;
  }
}

/* 固定ヘッダーの高さが60pxの場合 */
.scroll-anchor {
  scroll-margin-top: var(--header-height);

  @media (max-width: 1080px) {
    scroll-margin-top: var(--header-height-sp);
  }
}

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

a {
  color: var(--color-link);
  text-decoration: none;
  transition: all 0.3s ease-out;

  &:hover {
    opacity: 0.6;
  }
}

ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2 {
  font-family: var(--poppins);
  font-style: normal;
  font-weight: 700;
}

.-pc {
  display: block;

  @media (max-width: 768px) {
    display: none;
  }
}

.-sp {
  display: none;

  @media (max-width: 768px) {
    display: block;
  }
}