@charset "UTF-8";

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

  /* color */
  --black: #222;
  --primary: #22327e;

  /* 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;
  --title: 'Jost', sans-serif;
  --shippori: 'Shippori Antique B1', sans-serif;
  --name: 'Yuji Boku', serif;

  /* icon */
  --icon-arrow: url('data:image/svg+xml,<svg width="19" height="14" viewBox="0 0 19 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.293 0.292893C10.6835 -0.0976311 11.3165 -0.0976311 11.707 0.292893L18.4141 6.99992L11.707 13.707C11.3165 14.0975 10.6835 14.0975 10.293 13.707C9.90244 13.3164 9.90244 12.6834 10.293 12.2929L15.5859 6.99992L10.293 1.70696C9.90244 1.31643 9.90244 0.683417 10.293 0.292893Z" fill="currentColor"/><path d="M1 7.99992C0.447715 7.99992 0 7.55221 0 6.99992C0 6.44764 0.447715 5.99992 1 5.99992H11C11.5523 5.99992 12 6.44764 12 6.99992C12 7.55221 11.5523 7.99992 11 7.99992H1Z" fill="currentColor"/></svg>');
  --icon-mail: url('data:image/svg+xml,<svg width="20" height="15" viewBox="0 0 20 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.75 0H0.75C0.551088 0 0.360322 0.0790178 0.21967 0.21967C0.0790176 0.360322 0 0.551088 0 0.75V13.5C0 13.8978 0.158035 14.2794 0.43934 14.5607C0.720644 14.842 1.10218 15 1.5 15H18C18.3978 15 18.7794 14.842 19.0607 14.5607C19.342 14.2794 19.5 13.8978 19.5 13.5V0.75C19.5 0.551088 19.421 0.360322 19.2803 0.21967C19.1397 0.0790178 18.9489 0 18.75 0ZM16.8216 1.5L9.75 7.98281L2.67844 1.5H16.8216ZM18 13.5H1.5V2.45531L9.24281 9.55312C9.38118 9.68014 9.56217 9.75062 9.75 9.75062C9.93783 9.75062 10.1188 9.68014 10.2572 9.55312L18 2.45531V13.5Z" 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);
  --easeOutBounce: cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

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

    &::before,
    &::after {
      outline: 1px solid tomato;
    }

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

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

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

@keyframes scrollable {
  0% {
    transform: translateX(0);
  }

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

@keyframes zoom {
  0% {
    scale: 1;
  }
  100% {
    scale: 1.15;
  }
}

/* 右から左 */
@keyframes loop-list {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes show-up-text {
  0% {
    opacity: 0;
    translate: 0 100%;
  }

  100% {
    opacity: 1;
    translate: 0 0%;
  }
}

/* 線のアニメーション */
@keyframes scroll {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  50.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}

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

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

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

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

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