@charset "UTF-8";

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

  /* color */
  --white: #ffffff;
  --primary: #fe630a;
  --light-gray: #bbbbbb;
  --ultra-light-gray: #f6f6f6;
  --ultra-light-blue: #cfe7ff;
  --right-beige: #f2f1ec;
  --yellow: #ffe398;
  --blue: #004c98;
  --green: #28ac00;
  --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>');
  --icon-arrow: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" fill="none"> <path d="M8 4L0 8C0.916062 5.03924 0.916084 3.28769 0 -3.49691e-07L8 4Z" 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;
    @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: 1.8;
  }
}