@charset "UTF-8";

/* =====================
  Custom Property
===================== */
:root {
  /* debug */
  --debug: false;

  /* color */
  --white: #ffffff;
  --primary: #105aad;
  --blue1: #002e61;
  --blue2: #0075d5;
  --blue3: #00beff;
  --blue4: #d2ebff;
  --blue5: #ecfaff;
  --gray: #ececec;
  --color-text-primary: #000000;
  --red: #ff1b32;

  /* font */
  --yumin: 'Yu Mincho Demibold', 'YuMincho Demibold', '游明朝', 'Yu Mincho Regular', 'Yu Mincho', 'YuMincho Medium', serif;
  --yugo: '游ゴシック', 'Yu Gothic', yugothic, 'Hiragino Kaku Gothic ProN', 'Hiragino Kaku Gothic Pro', 'メイリオ', meiryo, 'ＭＳ ゴシック', sans-serif;
  --sanserif: 'Noto Sans JP', sans-serif;

  /* icon */
  --icon-blank: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none"> <path d="M11 0V2H14.59L4.76 11.83L6.17 13.24L16 3.41V7H18V0M16 16H2V2H9V0H2C1.46957 0 0.960859 0.210714 0.585786 0.585786C0.210714 0.960859 0 1.46957 0 2V16C0 16.5304 0.210714 17.0391 0.585786 17.4142C0.960859 17.7893 1.46957 18 2 18H16C16.5304 18 17.0391 17.7893 17.4142 17.4142C17.7893 17.0391 18 16.5304 18 16V9H16V16Z" fill="currentColor"/> </svg>');

  /* ease */
  --slideInBezier: cubic-bezier(0.16, 0.5, 0.43, 1);
  --easeOutQuart: cubic-bezier(0.25, 1, 0.5, 1);
  --easeOutExpo: cubic-bezier(0.87, 0, 0.13, 1);
  --easeOutBack: cubic-bezier(0.34, 1.56, 0.64, 1);
  --easeOutQuint: cubic-bezier(0.22, 1, 0.36, 1);
  --easeInCirc: cubic-bezier(0.55, 0, 1, 0.45);
  --easeInOutBack: cubic-bezier(0.68, -0.6, 0.32, 1.6);
  --easeOutSine: cubic-bezier(0.61, 1, 0.88, 1);
}

/* =====================
  animation
===================== */
@keyframes marquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-100%);
  }
}

/* =====================
  container context
===================== */
@container style(--debug:true) {
  * {
    outline: 1px solid tomato;

    &:focus {
      outline: 2px solid var(--blue);
      outline-offset: 2px;
    }
  }
}

@layer style {
  /* =====================
    common
  ===================== */
  html,
  body {
    font-family: var(--sanserif);
    font-size: 20px;
    line-height: 1.8;
    color: var(--color-text-primary);
    text-align: center;

    background-repeat: repeat;
    background-size: contain;
    background-position: center;
    background-image: url('../img/bg.png');
    @media (width > 768px) {
      background-attachment: fixed;
    }

    @media (width <= 768px) {
      font-size: calc((100 / 390) * 16 * 1vw);
    }
  }

  body {
    @media (width > 768px) {
      min-inline-size: 1440px;
    }
  }

  @media (width > 768px) {
    .sp {
      display: none;
    }
  }

  @media (width <= 768px) {
    .pc {
      display: none;
    }
  }

  /* p */
  :where(p, li, dt, dd, th, td) {
    line-height: 2;
  }
}