/* Variable
----------------------------------------------------*/
:root {
  --based-viewport-width: 1440;
  --header-height: calc(100 / var(--rem-to-px) * var(--rem-unit));
  --rem-to-px: 16;
  --rem-unit: 1rem;
  --clamp-ratio-min: 0.86;
  --clamp-ratio-max: 1.16;

  /* Layout */
  --content-width-offset: 7.5vw;
  --content-width-preferred: calc(100vw - var(--content-width-offset) * 2);
  --content-width-max: 1040;
  --content-width: min(
    var(--content-width-preferred),
    calc(var(--content-width-max) / var(--rem-to-px) * var(--rem-unit))
  );

  /* Color */
  --color-gradient-1: #9796f0, #fbc7d4;
  --color-main: #f98f9b;
  --color-base: #fff6ff;
  --color-white: #fff;
  --color-gray-50: #f2eaf2;
  --color-gray-100: #e5dde5;
  --color-gray-200: #ccc5cc;
  --color-gray-300: #b3acb3;
  --color-gray-400: #999499;
  --color-gray-500: #807b80;
  --color-gray-600: #666266;
  --color-gray-700: #4d4a4d;
  --color-gray-800: #333133;
  --color-gray-900: #1a191a;
  --color-black: #000;

  /* Font */
  --font-size-init: clamp(14px, calc(var(--rem-to-px) / var(--based-viewport-width) * 100vw), 18px);
  --font-size-25: calc(10 / var(--rem-to-px) * var(--rem-unit));
  --font-size-50: calc(12 / var(--rem-to-px) * var(--rem-unit));
  --font-size-100: calc(14 / var(--rem-to-px) * var(--rem-unit));
  --font-size-200: calc(16 / var(--rem-to-px) * var(--rem-unit));
  --font-size-300: calc(18 / var(--rem-to-px) * var(--rem-unit));
  --font-size-400: calc(21 / var(--rem-to-px) * var(--rem-unit));
  --font-size-500: calc(24 / var(--rem-to-px) * var(--rem-unit));
  --font-size-600: calc(28 / var(--rem-to-px) * var(--rem-unit));
  --font-size-700: calc(32 / var(--rem-to-px) * var(--rem-unit));
  --font-size-800: calc(36 / var(--rem-to-px) * var(--rem-unit));
  --font-size-900: calc(42 / var(--rem-to-px) * var(--rem-unit));
  --font-size-1000: calc(48 / var(--rem-to-px) * var(--rem-unit));
  --font-weight-thin: 100;
  --font-weight-extra-light: 200;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semi-bold: 600;
  --font-weight-bold: 700;
  --font-weight-extra-bold: 800;
  --font-weight-black: 900;
  --font-sans: 'Montserrat', 'YakuHanJP', 'Noto Sans JP', sans-serif;
  --font-serif: 'Yu Mincho', 'YuMincho', serif;
  --leading-offset: calc((1em - 1lh) / 2);

  /* Accessibility */
  --focus-visible-outline: 1px auto -webkit-focus-ring-color;

  /* Z-index */
  --z-index-global-header: 999;

  /* Animation, Transition */
  --duration-quickly: 0.15s;
  --duration-default: 0.3s;
  --duration-slowly: 0.5s;
  --ease-custom: cubic-bezier(0.4, 0.15, 0, 1);
  --keyframes-scroll-text-repeat-length: 3;
}

@media (max-width: 1280px) {
  :root {
    --content-width-offset: 5vw;
    --header-height: calc(64 / var(--rem-to-px) * var(--rem-unit));
  }
}

@media (max-width: 767px) {
  :root {
    --based-viewport-width: 390;
    --content-width-offset: 3vw;
    --header-height: min(
      calc(48 / var(--based-viewport-width) * 100vw),
      calc(56 / var(--based-viewport-width) * 100vw)
    );
  }
}

/* Keyframes
----------------------------------------------------*/
@keyframes scroll_text {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc((0 - 100 / var(--keyframes-scroll-text-repeat-length)) * 1%));
  }
}