@charset "UTF-8";
/**-----------------------------------
TOP(catchphrase)
-----------------------------------*/
.catchphrase-bg {
  /* === テキストと背景のパララックスエリア === */
  /* === 背景グリッドレイアウト（この部分だけ動かす） === */
  /* === SP === */
  /* === ブロックのカスタマイズ === */
  /* === テキストエリア === */
  /* 各ブロックのデザイン */
}
.catchphrase-bg .content-wrapper {
  position: relative;
  width: 100%;
  height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.catchphrase-bg .grid-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50vw; /* 縦のサイズを調整 */
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(3, 16.6666666667vw); /* 正方形を維持 */
  z-index: -1;
  transform: translateY(0);
  transition: transform 0.1s linear;
}
@media (max-width: 768px) {
  .catchphrase-bg .content-wrapper {
    height: 500px;
  }
  .catchphrase-bg .grid-container {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(6, 33.3333333333vw);
    height: 200vw;
  }
}
.catchphrase-bg .block {
  background: yellow;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  font-weight: bold;
  color: #333;
}
.catchphrase-bg .block5-6 {
  grid-column: span 2;
}
.catchphrase-bg .block8-9 {
  grid-column: span 2;
}
.catchphrase-bg .block12-18 {
  grid-row: span 2;
}
.catchphrase-bg .block16-17 {
  grid-column: span 2;
}
.catchphrase-bg .content {
  position: relative;
  text-align: center;
  font-size: 2rem;
  z-index: 1;
  color: black;
  background: rgba(255, 255, 255, 0.8); /* 背景を半透明に */
  padding: 30px;
  border-radius: 10px;
}
.catchphrase-bg .block1 {
  background: #fff100;
  overflow: hidden;
  position: relative;
}
.catchphrase-bg .block1 img {
  position: absolute;
  width: 100%; /* SVGのサイズ */
  height: auto;
  right: -80%; /* 画像の左下が block01 の右上に来るように */
  top: -80%;
  animation: moveDiagonal 4s linear infinite alternate;
}
.catchphrase-bg .block2 {
  background: linear-gradient(to right, #fff100, #F6AB00);
  overflow: hidden;
  position: relative;
}
.catchphrase-bg .block2 img {
  position: absolute;
  width: 100%; /* SVGのサイズ */
  height: auto;
  left: -100%; /* 画像の左下が block01 の右上に来るように */
  top: 0%;
  animation: moveLeftRight 4.5s linear infinite alternate;
}
.catchphrase-bg .block3 {
  background: #fff100;
  position: relative;
  overflow: hidden;
  /* === 円弧エリア（背景画像 + 右→左アニメーション + グラデーション） === */
}
.catchphrase-bg .block3 .arc-container {
  position: absolute;
  width: 200%;
  height: 200%;
  left: 0;
  bottom: 0;
  border-radius: 50%;
  background: linear-gradient(to bottom, #fff100, #F6AB00);
  overflow: hidden;
}
.catchphrase-bg .block3 .arc-container .item {
  position: relative;
  display: block;
  width: 50%;
  height: 50%;
  bottom: -50%;
  left: 0;
}
.catchphrase-bg .block3 .arc-container .item::before {
  content: "";
  width: 100%;
  height: 100%;
  background: url(../img/common/catchphrase/block03_item01.svg);
  background-repeat: repeat;
  background-size: 50%;
  position: absolute;
  animation: movePattern 5s linear infinite;
}
.catchphrase-bg .block4 {
  background: #fff100;
  overflow: hidden;
  position: relative;
}
.catchphrase-bg .block4::before {
  content: "";
  width: 150%;
  height: 100%;
  background: url(../img/common/catchphrase/block04_item01.svg);
  background-repeat: repeat;
  background-size: 50%;
  position: absolute;
  animation: movePattern 5s linear infinite;
}
.catchphrase-bg .block5-6 {
  background: linear-gradient(to top, #ffe100, #f9b800);
  position: relative;
  overflow: hidden;
  /* === 360度回転アニメーションを適用するimg === */
}
.catchphrase-bg .block5-6 .rotate-img {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%; /* サイズ調整 */
  height: 200%;
  animation: rotate360 25s linear infinite;
}
.catchphrase-bg .block7 {
  background: linear-gradient(to bottom, #ffe100, #f9b800);
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  /* === 5×5の正方形を配置するコンテナ === */
  /* === 正方形の設定 === */
}
.catchphrase-bg .block7 .square-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  width: 85%; /* 適度な余白を持たせる */
  height: 85%;
  gap: 8%; /* 正方形間の間隔を調整 */
}
.catchphrase-bg .block7 .square {
  width: 100%;
  aspect-ratio: 1/1; /* 正方形を維持 */
  background: #fff100;
  opacity: 0; /* 初期状態で非表示 */
}
.catchphrase-bg .block8-9 {
  background: linear-gradient(to top, #ffe100, #f9b800);
  position: relative;
  overflow: hidden;
  /* === 360度回転アニメーションを適用するimg === */
}
.catchphrase-bg .block8-9 .rotate-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* サイズ調整 */
  height: 200%;
  animation: rotate360 25s linear infinite;
}
.catchphrase-bg .block10 {
  background: linear-gradient(to right, #fff100, #F6AB00);
  position: relative;
  overflow: hidden;
  /* === 360度回転アニメーションを適用するimg === */
}
.catchphrase-bg .block10 .rotate-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* サイズ調整 */
  height: 100%;
  animation: rotate360 25s linear infinite;
}
.catchphrase-bg .block11 {
  background: linear-gradient(to top, #fff100, #F6AB00);
  position: relative;
  overflow: hidden;
}
.catchphrase-bg .block11::before {
  content: "";
  width: 50%;
  height: 50%;
  background: url(../img/common/catchphrase/block11_item01.svg) center no-repeat;
  background-size: contain;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1;
  animation: moveBottomTop 5s linear infinite alternate;
}
.catchphrase-bg .block11::after {
  content: "";
  width: 100%;
  height: 50%;
  background: linear-gradient(to top, #fff100, #F6AB00);
  clip-path: polygon(50% 0, 100% 0, 100% 100%, 0 100%);
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 5;
}
.catchphrase-bg .block12-18 {
  background: linear-gradient(to top, #ffe100, #f9b800);
  position: relative;
  overflow: hidden;
}
.catchphrase-bg .block12-18 .circle01 {
  width: 200%;
  height: 100%;
  background: #fff100;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: -100%;
  transform: translateY(-50%);
  z-index: 1;
  animation: moveScale 1.2s linear infinite;
}
.catchphrase-bg .block12-18 .circle02 {
  width: 160%;
  height: 80%;
  background: #fdd000;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: -80%;
  transform: translateY(-50%);
  z-index: 2;
  animation: moveScale 0.5s linear infinite 1s;
}
.catchphrase-bg .block12-18 .circle03 {
  width: 120%;
  height: 60%;
  background: #fff100;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: -60%;
  transform: translateY(-50%);
  z-index: 3;
  animation: moveScale 1s linear infinite 1s;
}
.catchphrase-bg .block12-18 .circle04 {
  width: 80%;
  height: 40%;
  background: #f6ab00;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: -40%;
  transform: translateY(-50%);
  z-index: 4;
  animation: moveScale 0.5s linear infinite 1s;
}
.catchphrase-bg .block12-18 .circle05 {
  width: 40%;
  height: 20%;
  background: #fff100;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: -20%;
  transform: translateY(-50%);
  z-index: 5;
  animation: moveScale 1.2s linear infinite;
}
.catchphrase-bg .block13 {
  background: linear-gradient(to top, #fff100, #F6AB00);
  position: relative;
  overflow: hidden;
}
.catchphrase-bg .block13::after {
  content: "";
  width: 100%;
  height: 50%;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: linear-gradient(to bottom, #ffe100, #f9b800);
  position: absolute;
  left: 0;
  bottom: -50%;
  animation: moveBottomTop 2s linear infinite alternate;
}
.catchphrase-bg .block14 {
  background: #fff100;
  overflow: hidden;
  position: relative;
}
.catchphrase-bg .block14::before {
  content: "";
  width: 100%;
  height: 100%;
  background: url(../img/common/catchphrase/block14_item01.svg);
  background-repeat: repeat;
  background-size: 20%;
  position: absolute;
  animation: movePattern 5s linear infinite;
}
.catchphrase-bg .block15 {
  background: linear-gradient(to left, #ffe100, #f9b800);
  overflow: hidden;
  position: relative;
}
.catchphrase-bg .block15 .circle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
}
.catchphrase-bg .block15 .circle::before {
  content: "";
  width: 100%;
  height: 150%;
  background: url(../img/common/catchphrase/block15_item01.svg);
  background-repeat: repeat-y;
  background-size: 100%;
  position: absolute;
  animation: movePatternBottom 5s linear infinite;
}
.catchphrase-bg .block16-17 {
  background: url(../img/common/catchphrase/block16-17_item01.svg) center no-repeat;
  background-size: cover;
  overflow: hidden;
  position: relative;
}
.catchphrase-bg .block16-17 img {
  position: absolute;
  width: 100%; /* SVGのサイズ */
  height: auto;
  left: -100%;
  bottom: 0;
  animation: moveLeftRight 6s linear infinite alternate;
}

/* === 右上 → 左下への移動アニメーション === */
@keyframes moveDiagonal {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-80%, 80%);
  }
}
/* === 左 → 右への移動アニメーション === */
@keyframes moveLeftRight {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(100%, 0%);
  }
}
/* === 下 → 上への移動アニメーション === */
@keyframes moveBottomTop {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -100%);
  }
}
/* 左から右へbackgroundアニメーション */
@keyframes movePattern {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 100% 0;
  }
}
/* 上から下へbackgroundアニメーション */
@keyframes movePatternBottom {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 100%;
  }
}
/* === 360度回転アニメーション定義 === */
@keyframes rotate360 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/* === フェードイン・フェードアウトアニメーション === */
@keyframes fadeInOut {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* === 拡大アニメーション === */
@keyframes moveScale {
  from {
    transform: translateY(-50%) scale(1);
  }
  to {
    transform: translateY(-50%) scale(1.01);
  }
}/*# sourceMappingURL=catchphrase.css.map */