/*
@include max-pc() {

}
@include mobile-tablet() {

}
@include sp-tablet() {

}
*/
:root {
  --font-eu: "Be Vietnam Pro", sans-serif;
  --font-title: "Montserrat", sans-serif;
  --font-ja: "Noto Sans JP", sans-serif;
  --font-numbers: "Jost", sans-serif;
  --font-color-base: #333333;
  --font-color-deep-blue: #0D2F62;
  --font-color-black: #000000;
  --font-color-soft-blue: #C8D5DF;
  --font-color-gray: #878C9E;
  --font-color-dark: #27272A;
  --font-color-white: #fff;
  --font-color-footer: #6C6F71;
  --font-color-accent-blue: #2F8ACB;
  --font-color-accent-red: #CB2F2F;
  --bg-base: #F0F2F4;
  --bg-main: #A9BCD5;
  --bg-accent-light: #DCEBF7;
  --bg-accent: #227BB6;
  --bg-gray: #878C9E;
  --bg-gray-blue: #D6DAE5;
  --bg-gray-dark: #888D9F;
  --bg-gray-blue-dark: #8A90A2;
  --bg-white: #fff;
  --bg-black: #27272A;
  --bg-sub-purple: #ABAFBB;
  --bg-sub-blue: #AABDD6;
  --bg-deep-blue: #0D2F62;
  --bg-light-blue: #B4C7DE;
  --bg-gray-blue-deep: #8B91A3;
  --border-sub-blue: #AABDD6;
  --border-sub-purple: #ABAFBB;
  --border-white: #fff;
  --border-black: #000;
  --border-soft-blue: #C8D5DF;
  --border-gray: #878C9E;
  --border-light-blue: #B2C5DB;
  --border-gray-blue-dark: #8A90A2;
  --border-accent-blue: #227BB6;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: #F0F2F4;
}

.marquee {
  display: flex;
  list-style: none;
  padding-inline: 0;
  margin-inline: 0;
  gap: 0;
  width: 100%;
  color: var(--font-color-soft-blue);
  font-size: 168px;
  font-weight: 400;
  letter-spacing: 0.13em;
  font-family: var(--font-eu);
  opacity: 0.2;
  overflow: hidden;
  white-space: nowrap;
}
@media (max-width: 768px) {
  .marquee {
    font-size: 80px;
  }
}
.marquee li {
  animation: slide-left 32s linear infinite;
  padding: 0 0.6em 0 0;
}
@media (max-width: 768px) {
  .marquee li {
    animation: slide-left 24s linear infinite;
  }
}

@keyframes slide-left {
  100% {
    transform: translateX(-100%);
  }
}