.curtainLefttoRight {
    position: relative;
    display: block;
    opacity: 1;
    overflow: hidden;
}

    .curtainLefttoRight::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform-origin: left;
        transform: scaleX(0);
        z-index: 30;
        pointer-events: none;
        transition: background-color 0.3s ease;
    }

/* 色指定クラス */
.color-red::before {
    background: linear-gradient(to right, #ff4e50, #f9d423); /* 赤～オレンジ */
}

.color-blue::before {
    background: linear-gradient(to right, #36d1dc, #5b86e5); /* 青系 */
}

.color-yellow::before {
    background: linear-gradient(to right, #fceabb, #f8b500); /* 黄系 */
}

.anim-box.slidein.is-animated {
  animation: slideIn 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
 
@keyframes slideIn {
  0% {
    transform: translateX(180px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  40%,100% {
    opacity: 1;
  }
}

.color-green::before {
    background: linear-gradient(to right, #11998e, #38ef7d); /* 緑系 */
}

.curtainLefttoRight.active::before {
    animation: curtainLeft 0.6s ease forwards;
}
/* グラデーションパターン個別指定 */
.text-gradient-red {
    position: relative;
    display: inline-block;
    opacity: 0;
    z-index: 10;
    background: linear-gradient(90deg, #ff4e50, #f9d423);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: opacity 0.3s ease;
}

.text-gradient-blue {
    position: relative;
    display: inline-block;
    opacity: 0;
    z-index: 10;
    background: linear-gradient(90deg, #2193b0, #6dd5ed);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: opacity 0.3s ease;
}

.text-gradient-yellow {
    position: relative;
    display: inline-block;
    opacity: 0;
    z-index: 10;
    background: linear-gradient(90deg, #fceabb, #f8b500);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: opacity 0.3s ease;
}

.text-gradient-green {
    position: relative;
    display: inline-block;
    opacity: 0;
    z-index: 10;
    background: linear-gradient(90deg, #56ab2f, #a8e063);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: opacity 0.3s ease;
}


.curtainLefttoRight.showText .text {
    opacity: 1;
}

.curtainLefttoRight .text::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    -webkit-text-fill-color: black;
    opacity: 0;
    animation: fadeInBlack 1s ease 2.5s forwards;
    background: none;
    -webkit-background-clip: initial;
}

.animated-image {
    opacity: 0;
    pointer-events: none;
    transition: opacity 1s ease;
}

    .animated-image.show-full {
        opacity: 1;
    }


@keyframes fadeInBlack {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes curtainLeft {
    0% {
        transform-origin: left;
        transform: scaleX(0);
    }

    50% {
        transform-origin: left;
        transform: scaleX(1);
    }

    50.001% {
        transform-origin: right;
    }

    100% {
        transform-origin: right;
        transform: scaleX(0);
    }
}

.anim-box.poyoyon2.is-animated {
    animation: poyoyon2 1s ease-in-out forwards;
}

@keyframes poyoyon2 {
    0% {
        transform: scale(1.0, 1.0) translate(0, 0);
    }

    15% {
        transform: scale(0.98, 0.9) translate(0, 5px);
    }

    30% {
        transform: scale(1.02, 1.0) translate(0, 8px);
    }

    50% {
        transform: scale(0.98, 1.05) translate(0, -8px);
    }

    70% {
        transform: scale(1.0, 0.9) translate(0, 5px);
    }

    100% {
        transform: scale(1.0, 1.0) translate(0, 0);
    }
}

.anim-box.poyopoyo {
    animation: poyopoyo 2s ease-out infinite;
    opacity: 1;
}

@keyframes poyopoyo {
    0%, 40%, 60%, 80% {
        transform: scale(1.0);
    }

    50%, 70% {
        transform: scale(0.95);
    }
}

/* 共通設定 */
.matrix {
  opacity: 0;
  transition: opacity 0.6s ease;
}

.matrix.is-animated {
  opacity: 1;
}

/* ✅ 画像はデフォルトで横並び */
.matrix.image {
  display: flex;
  justify-content: center;
  gap: 24px;
}

/* ✅ テキストは縦並び */
.matrix.text .bg-wrap + .bg-wrap {
  margin-top: 24px;
}

/* ✅ 共通のラップ構造 */
.matrix .bg-wrap {
  overflow: hidden;
}

/* ✅ 浮かび上がるアニメーション */
.matrix .bg-wrap .inn {
  opacity: 0;
  transform: matrix(1, 0, 0, 1, 0, 100);
  transition: 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.matrix.is-animated .bg-wrap .inn {
  opacity: 1;
  transform: matrix(1, 0, 0, 1, 0, 0);
}

/* ✅ 画像サイズ */
.matrix .inn img {
  display: block;
  height: auto;
}

.anim-box.popup.is-animated {
  animation: popup 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
 
@keyframes popup {
  0% {
    transform: translateY(40px) scale(0.2);
    opacity: 0;
  }
  100% {
    transform: translateY(0) scale(1.0);
  }
  80%, 100% {
    opacity: 1;
  }
}

.spacer-50 {
  height: 50px;
}

.spacer-25 {
  height: 25px;
}

.fuwafuwa-hover {
  transition: transform 0.3s ease, filter 0.3s ease;
}

.fuwafuwa-hover:hover {
  transform: translateY(-10px) scale(1.05);
}

 .anim-box.fadeup.is-animated {
  animation: fadeup 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
 
@keyframes fadeup {
  0% {
    transform: translateY(30px);
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

h2.responsive-title150 {
  font-size: 150px;
  line-height: 1.2;
  text-align: center;
  word-break: break-word;
}

h2.responsive-title60 {
  font-size: 60px;
  line-height: 1.2;
  text-align: center;
  word-break: break-word;
}

h2.responsive-title40 {
  font-size: 40px;
  line-height: 1.2;
  text-align: center;
  word-break: break-word;
}


.text72 {
  font-size: 72px !important;
  line-height: 1.4 !important;
  text-align: left !important;
}



.text18 {
  font-size: 18px !important;
  line-height: 1.4 !important;
  text-align: left !important;
}

/* モバイル対応：幅768px以下のとき */
@media screen and (max-width: 768px) {
  h2.responsive-title {
    font-size: 36px; /* もしくはvwで可変サイズに */
    padding: 0 16px;
  }
}

 
.anim-box.slidein-ltr {
  opacity: 0;
  transform: translateX(100vw); /* 初期位置を画面外に */
  transition: none;
}

.anim-box.slidein-ltr.is-animated {
  animation: slideIn-ltr 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  will-change: transform, opacity;
}

@keyframes slideIn-ltr {
  0% {
    transform: translateX(-100vw);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.anim-box.slidein-rtl {
  opacity: 0;
  transform: translateX(100vw); /* 初期位置を画面外に */
  transition: none;
}

.anim-box.slidein-rtl.is-animated {
  animation: slideIn-rtl 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  will-change: transform, opacity;
}

@keyframes slideIn-rtl {
  0% {
    transform: translateX(100vw);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.flex-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 40px;
  max-width: 1000px;
  margin: 0 auto;
  flex-wrap: nowrap;
}

.image-container {
  flex: 0 0 40%;
  max-width: 40%;
}

.image-container img {
  width: 100%;
  height: auto;
  display: block;
}

.text-container {
  flex: 0 0 60%;
  max-width: 60%;
  text-align: left;
}

/* モバイル対応：画面が狭い場合は縦並びに */
@media screen and (max-width: 768px) {
  .flex-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .image-container,
  .text-container {
    width: 100%;
    max-width: 100%;
    flex: unset;
  }
}

@media screen and (max-width: 768px) {
  h2.responsive-title150 {
    font-size: 42px;
    line-height: 1.3;
  }

  h2.responsive-title60 {
    font-size: 28px;
    line-height: 1.4;
  }

  h2.responsive-title40 {
    font-size: 22px;
    line-height: 1.4;
  }

  .text72 {
    font-size: 32px !important;
  }

  .text18 {
    font-size: 16px !important;
  }
}