@charset "UTF-8";
@layer reset,
base,
component,
utility,
page;
/*
 * Easing
 * https://easings.net/
 */
@font-face {
  font-family: 'Local Noto Sans JP';
  src: local('Noto Sans JP');
}
:root {
  --color-primary: #ff0000;
  --color-secondary: #62aeb8;
  --color-body: #000;
  --font-jp: 'Noto Sans JP', sans-serif;
  --font-en: 'Roboto', sans-serif;
  --font-top-offset: 0.1em;
  --scale: min(min(var(--vw, 1vw), var(--svh, 1vh)) * 1 / 390 * 100, 1.5px);
  --gradient: #cae68e -3.88%, #b0d899 15.14%, #62aeb8 52.83%, #075ea1 91.05%,
    #004e89 100.58%;
  --side-width: 16;
  --content-width: 390px;
}
@media screen and (min-width: 960px) {
  :root {
    --scale: min(var(--vw, 1vw) * 1 / 1280 * 100, 1.25px);
    --side-width: 88;
    --content-width: 1280px;
  }
}

@layer utility {
  @media screen and (max-width: 959.99px) {
    .pc-only {
      display: none;
    }
  }
  @media screen and (min-width: 960px) {
    .sp-only {
      display: none;
    }
  }
}
/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */
@layer reset {
  html,
  body,
  p,
  ol,
  ul,
  li,
  dl,
  dt,
  dd,
  blockquote,
  figure,
  fieldset,
  legend,
  textarea,
  pre,
  iframe,
  hr,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin: 0;
    padding: 0;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: 100%;
    font-weight: normal;
  }
  ul {
    list-style: none;
  }
  button,
  input,
  select {
    margin: 0;
  }
  html {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  *,
  *::before,
  *::after {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
  }
  img,
  video {
    height: auto;
    max-width: 100%;
  }
  iframe {
    border: 0;
  }
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
  td,
  th {
    padding: 0;
  }
}
/*
 * Easing
 * https://easings.net/
 */
@font-face {
  font-family: 'Local Noto Sans JP';
  src: local('Noto Sans JP');
}
:root {
  --color-primary: #ff0000;
  --color-secondary: #62aeb8;
  --color-body: #000;
  --font-jp: 'Noto Sans JP', sans-serif;
  --font-en: 'Roboto', sans-serif;
  --font-top-offset: 0.1em;
  --scale: min(min(var(--vw, 1vw), var(--svh, 1vh)) * 1 / 390 * 100, 1.5px);
  --gradient: #cae68e -3.88%, #b0d899 15.14%, #62aeb8 52.83%, #075ea1 91.05%,
    #004e89 100.58%;
  --side-width: 16;
  --content-width: 390px;
}

@media screen and (min-width: 960px) {
  :root {
    --scale: min(var(--vw, 1vw) * 1 / 1280 * 100, 1.25px);
    --side-width: 88;
    --content-width: 1280px;
  }
}
@layer utility {
  @media screen and (max-width: 959.99px) {
    .pc-only {
      display: none;
    }
  }
  @media screen and (min-width: 960px) {
    .sp-only {
      display: none;
    }
  }
}
@layer base {
  *,
  *::before,
  *::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  html {
    width: 100%;
    min-height: 100svh;
    font-size: 62.5%;
    scroll-behavior: smooth;
  }
  @media screen and (max-width: 959.99px) {
    html {
      scroll-padding-top: calc(var(--scale) * 64);
    }
  }
  @media screen and (min-width: 960px) {
    html {
      scroll-padding-top: calc(var(--scale) * 80);
    }
  }
  body {
    font-family: var(--font-jp);
    font-size: calc(var(--scale) * 14);
    background: #fff;
    color: var(--color-body);
    font-weight: 400;
    line-height: 1.5;
    min-height: 100%;
    overflow-wrap: anywhere;
    /* 収まらない場合に折り返す */
    word-break: normal;
    /* 単語の分割はデフォルトに依存 */
    line-break: strict;
    /* 禁則処理を厳格に適用 */
  }
  body.is-modal-open {
    overflow: hidden;
  }
}
@layer component {
  /*
   * Easing
   * https://easings.net/
   */
  @font-face {
    font-family: 'Local Noto Sans JP';
    src: local('Noto Sans JP');
  }
  :root {
    --color-primary: #ff0000;
    --color-secondary: #62aeb8;
    --color-body: #000;
    --font-jp: 'Noto Sans JP', sans-serif;
    --font-en: 'Roboto', sans-serif;
    --font-top-offset: 0.1em;
    --scale: min(min(var(--vw, 1vw), var(--svh, 1vh)) * 1 / 390 * 100, 1.5px);
    --gradient: #cae68e -3.88%, #b0d899 15.14%, #62aeb8 52.83%, #075ea1 91.05%,
      #004e89 100.58%;
    --side-width: 16;
    --content-width: 390px;
  }
  @media screen and (min-width: 960px) {
    :root {
      --scale: min(var(--vw, 1vw) * 1 / 1280 * 100, 1.25px);
      --side-width: 88;
      --content-width: 1280px;
    }
  }
  @layer utility {
    @media screen and (max-width: 959.99px) {
      .pc-only {
        display: none;
      }
    }
    @media screen and (min-width: 960px) {
      .sp-only {
        display: none;
      }
    }
  }
  .container {
    padding: 0 calc(min(var(--vw, 1vw), var(--svh, 1vh)) * 16 / 390 * 100);
  }
  @media screen and (min-width: 960px) {
    .container {
      padding: 0 calc(var(--vw, 1vw) * 88 / 1280 * 100);
    }
  }
  .container__inner {
    width: 100%;
    margin-inline: auto;
  }
  @media screen and (min-width: 960px) {
    .container__inner {
      max-width: calc((1280px - 176px) * 1.25);
    }
  }
}