@charset "UTF-8";
body {
  font-size: 1.6rem;
  line-height: 1.8;
  font-weight: 400;
  color: #333333;
  background-color: #f4f3ef;
  font-family: "IBM Plex Sans JP", sans-serif;
  position: relative;
  z-index: 1;
  overflow: clip; }
  @media screen and (max-width: 834px) {
    body {
      font-size: 1.4rem; } }

.inner {
  max-width: 1100px;
  width: 90%;
  margin: 0 auto; }

.sp {
  display: none; }
  @media screen and (max-width: 834px) {
    .sp {
      display: block; } }

.pc {
  display: block; }
  @media screen and (max-width: 834px) {
    .pc {
      display: none; } }

.ja-title {
  font-family: "Noto Serif JP", serif; }

.ja {
  font-family: "IBM Plex Sans JP", sans-serif; }

.en {
  font-family: "Figtree", sans-serif; }

.fadein.scroll-activate {
  opacity: 0;
  transform: translate(0, 30px);
  transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-delay: 0.2s; }

.fadein.scroll-activate.active {
  opacity: 1;
  transform: translateY(0); }

/* アニメーション用コンテナ */
/* orval の基準レイヤー */
.orval-wrap {
  position: relative;
  z-index: 1; }

/* アニメーション用レイヤー */
.c-oval-animation {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none; }

/* 1つ1つのセル */
.c-oval-animation > div {
  position: absolute;
  z-index: 0;
  width: clamp(24px, 3vw, 48px); }

/* 画像 */
.c-oval-animation img {
  width: 100%;
  height: auto;
  display: block; }

/* 上昇アニメーション */
@keyframes random_rising {
  0% {
    transform: translateY(var(--start-y));
    opacity: 0; }
  10% {
    opacity: 1; }
  100% {
    transform: translateY(var(--end-y));
    opacity: 0; } }