html, body {
  height: auto; /* ← 修正 */
  min-height: 100%; /* ← スクロール可能に */
  margin: 0;
  padding: 0;
  background-color: #ffffff;
  font-family: sans-serif;
  overflow-x: hidden; /* 横スクロールだけ無効に */
}

video {
  display: block;
  border: none;
  outline: none;
  margin: 0;
  padding: 0;
  line-height: 0;
}

.container {
  display: flex;
  flex-direction: column;  /* 横 → 縦へ */
  align-items: center;     /* 中央揃え */
  justify-content: center; /* 中央揃え */
}

.content {
  max-width: 100%;
  max-height: 100%;
  text-align: center;
  padding: 0;
}

.content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.s001 {
  position: relative;
  z-index: 999;
}

.s001-c001 {
  position: relative;
  z-index: 999;
}

.s002 {
  position: relative;
  z-index: 1;
}

.s002-image-wrapper {
  position: relative;
  display: block; /* ← 変更 */
}

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

.s002-c001 {
  position: relative;
  z-index: 1;
}

.s002-c002 {
  position: absolute;
  top: -100px;
  left: 0;
  z-index: 2;
  opacity: 0;
  transform: translateY(-30px);
  transition: all 1.5s ease-out;
}

.s002-c002.in-view {
  opacity: 1;
  transform: translateY(0);
}

.s002-c003 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  opacity: 0;
  transform: translateY(-30px);
  transition: all 1.5s ease-out;
}

.s002-c003.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* 左から右へフェードイン */
.s002-c004 {
  position: absolute; /* 既に設定済なら不要 */
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 6;
  transform: translateX(-30px);
  transition: all 1.5s ease-out;
}

.s002-c004.in-view {
  opacity: 1;
  transform: translateX(0);
}

/* 左から右へフェードイン */
.s002-c005 {
  position: absolute; /* 既に設定済なら不要 */
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 7;
  transform: translateX(-30px);
  transition: all 1.5s ease-out;
}

.s002-c005.in-view {
  opacity: 1;
  transform: translateX(0);
}

.s002-c006 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  opacity: 0;
  transform: translateY(-30px);
  transition: all 1.5s ease-out;
}

.s002-c006.in-view {
  opacity: 1;
  transform: translateY(0);
}

.s002-c007-001 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  opacity: 0;
  transform: translateY(-30px);
  transition: all 1.5s ease-out;
}

.s002-c007-001.in-view {
  opacity: 1;
  transform: translateY(0);
}

@keyframes s002-c007-002-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.s002-c007-002 {
  animation: s002-c007-002-blink 1s infinite;
}

.s003 {
  position: relative;
  z-index: 1;
}

.s004 {
  position: relative;
  z-index: 1;
}

.s004-image-wrapper {
  position: relative;
  display: block; /* ← 変更 */
}

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

.s004-image-wrapper > img:not(.s004-c002) {
  width: 100%;
  height: auto;
  display: block;
}

.s004-c001 {
  position: relative;
  z-index: 1;
}

.s004-c002 {
  position: absolute;
  top: 64%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: auto !important;
  max-width: 85% !important;
  height: auto !important;
}

@media screen and (max-width: 768px) {
  .s004-c002 {
    max-width: 80% !important; /* ボタンの横幅をスマホで縮小 */
    height: auto !important;
  }
}

.s005 {
  position: relative;
  z-index: 1;
}

.s005-c001 {
  position: relative;
  z-index: 1;
}

.s005-video-wrapper {
  position: relative;
  display: block;
}

.s005-video-wrapper video {
  display: block;
  width: 100%;
  height: auto;
}

.s006 {
  position: relative;
  z-index: 1;
  margin-top: -1px;
}

.s006-image-wrapper {
  position: relative;
  display: block; /* ← 変更 */
}

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

.s006-c001 {
  position: relative;
  z-index: 1;
}

.s006-c002 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

.s006-c003 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
}

.s006-c004 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
}

.s006-c005 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
}

.s006-c006 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 6;
}

.s006-c007 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 7;
}

.s006-c008 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 8;
}

.s006-c009 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9;
}

.s006-c010 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}

/* 1）キーフレーム定義：落下→ちょっとバウンド→収束 */
@keyframes dropIn {
  0% {
    transform: translateY(-300px) scaleY(1) scaleX(1);
    opacity: 0;
  }
  60% {
    transform: translateY(20px) scaleY(1.1) scaleX(0.9);
    opacity: 1;
  }
  80% {
    transform: translateY(-10px) scaleY(0.95) scaleX(1.05);
    opacity: 1;
  }
  100% {
    transform: translateY(0) scaleY(1) scaleX(1);
    opacity: 1;
  }
}

/* 2）落下の軸を上端中央に */
.s006-c002,
.s006-c003,
.s006-c004,
.s006-c005,
.s006-c006,
.s006-c007,
.s006-c008,
.s006-c009,
.s006-c010
{
  transform-origin: top center;
  will-change: transform, opacity;
}

/* 3）inview がついたら dropIn を順番に発火 */
.s006-c002.in-view { animation: dropIn 0.8s ease-out both; animation-delay: 0.8s; }
.s006-c003.in-view { animation: dropIn 0.8s ease-out both; animation-delay: 0.9s; }
.s006-c004.in-view { animation: dropIn 0.8s ease-out both; animation-delay: 1.0s; }
.s006-c005.in-view { animation: dropIn 0.8s ease-out both; animation-delay: 1.1s; }
.s006-c006.in-view { animation: dropIn 0.8s ease-out both; animation-delay: 1.2s; }
.s006-c007.in-view { animation: dropIn 0.8s ease-out both; animation-delay: 1.3s; }
.s006-c008.in-view { animation: dropIn 0.8s ease-out both; animation-delay: 1.4s; }
.s006-c009.in-view { animation: dropIn 0.8s ease-out both; animation-delay: 1.5s; }
.s006-c010.in-view { animation: dropIn 0.8s ease-out both; animation-delay: 1.6s; }

.s007 {
  position: relative;
  z-index: 1;
}

.s007-image-wrapper {
  position: relative;
  display: block; /* ← 変更 */
}

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

.s007-c001 {
  position: relative;
  z-index: 1;
}

.s007-c002 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

/* １）落下＆揺れアニメ用キーフレーム（そのまま） */
@keyframes dropAndWobble {
  0% {
    transform: translateY(-300px) rotate(0deg);
    opacity: 0;
  }
  50% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
    animation-timing-function: ease-out;
  }
  65% {
    transform: translateY(0) rotate(-5deg);
    opacity: 1;
  }
  80% {
    transform: translateY(0) rotate(5deg);
    opacity: 1;
  }
  90% {
    transform: translateY(0) rotate(-3deg);
    opacity: 1;
  }
  100% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
}

/* ２）落下の軸を上端中央に */
.s007-c002 {
  transform-origin: top center;
  will-change: transform, opacity;
}

/* ３）inview がついた section_004 内の s004-c002 にだけ強制適用 */
.s007-c002.in-view {
  /* 既存の fade-in トランジションなどを無効化 */
  transition: none !important;
  /* dropAndWobble を強制発火 */
  animation: dropAndWobble 0.8s ease both !important;
}

.s007-c003 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
}

.s008 {
  position: relative;
  z-index: 1;
}

.s008-c001 {
  position: relative;
  z-index: 1;
}

.s008-video-wrapper {
  position: relative;
  display: block;
}

.s008-video-wrapper video {
  display: block;
  width: 100%;
  height: auto;
}

.s009 {
  position: relative;
  z-index: 1;
}

.s009-image-wrapper {
  position: relative;
  display: block; /* ← 変更 */
}

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

.s009-c001 {
  position: relative;
  z-index: 1;
}

.s009-c002 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  opacity: 0;
  transform: translateX(-40px);
  will-change: transform, opacity;
  transition: transform 0.8s ease-out, opacity 0.8s ease-out;
}

.s009-c002.in-view {
  opacity: 1;
  transform: translateX(0);
}

.s010 {
  position: relative;
  z-index: 1;
}

.s010-image-wrapper {
  position: relative;
  display: block; /* ← 変更 */
}

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

.s010-c001 {
  position: relative;
  z-index: 1;
}

.s010-c002 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

.s010-c003 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
}

@keyframes s010-c003-a001 {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.s010-c007-a001 {
  animation: s010-c003-a001 1s infinite;
}

.s011 {
  position: relative;
  z-index: 1;
}

.s011-image-wrapper {
  position: relative;
  display: block; /* ← 変更 */
}

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

.s011-c001 {
  position: relative;
  z-index: 1;
}

.s011-c002 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

.s011-c003 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
}

.s011-c004 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
}

.s011-c005 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
}

.s011-c006 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
}

/* 初期状態（共通） */
.s011-c002,
.s011-c003,
.s011-c004,
.s011-c005,
.s011-c006
{
  opacity: 0;
  transform: translateY(-40px);
  transition: all 0.8s ease-out;
  z-index: 11;
}

/* 表示時に順にフェードイン */
.s011-c002.in-view {
  opacity: 1;
  transform: translateY(0);
}

.s011-c003.in-view {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.3s;
}

.s011-c004.in-view {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.6s;
}

.s011-c005.in-view {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.9s;
}

.s011-c006.in-view {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 1.2s;
}

.s012 {
  position: relative;
  z-index: 1;
}

.s012-image-wrapper {
  position: relative;
  display: block; /* ← 変更 */
}

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

.s012-c001 {
  position: relative;
  z-index: 1;
}

.s012-c002 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  opacity: 0;
  transform: translateY(-40px);
  transition: all 0.8s ease-out;
}

.s012-c003 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  opacity: 0;
  transform: translateY(-40px);
  transition: all 0.8s ease-out;
}

/* 表示時にフェードイン */
.s012-c002.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* 表示時にフェードイン＋遅延 */
.s012-c003.in-view {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.3s;
}

.s013 {
  position: relative;
  z-index: 1;
}

.s013-image-wrapper {
  position: relative;
  display: block; /* ← 変更 */
}

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

.s013-c001 {
  position: relative;
  z-index: 1;
}

.s013-c002 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  opacity: 0;
  transform: translateX(-40px);
  will-change: transform, opacity;
  transition: transform 0.8s ease-out, opacity 0.8s ease-out;
}

.s013-c003 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  opacity: 0;
  transform: translateX(-40px);
  will-change: transform, opacity;
  transition: transform 0.8s ease-out, opacity 0.8s ease-out;
}

.s013-c002.in-view {
  opacity: 1;
  transform: translateX(0);
}

.s013-c003.in-view {
  opacity: 1;
  transform: translateX(0);
  transition: all 1.6s ease-out;
}

.s014 {
  position: relative;
  z-index: 1;
}

.s014-image-wrapper {
  position: relative;
  display: block; /* ← 変更 */
}

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

.s014-c001 {
  position: relative;
  z-index: 1;
}

.s015 {
  position: relative;
  z-index: 1;
}

.s015-image-wrapper {
  position: relative;
  display: block; /* ← 変更 */
}

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

.s015-c001 {
  position: relative;
  z-index: 1;
}

.s016 {
  position: relative;
  z-index: 1;
}

.s016-image-wrapper {
  position: relative;
  display: block; /* ← 変更 */
}

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

.s016-c001 {
  position: relative;
  z-index: 1;
}

.s016-c002 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  opacity: 0;
  transform: translateY(-40px);
  will-change: transform, opacity;
  transition: transform 0.8s ease-out, opacity 0.8s ease-out;
}

.s016-c003 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s ease-out;
}

.s016-c002.in-view {
  opacity: 1;
  transform: translateY(0);
}

.s016-c003.in-view {
  opacity: 1;
  transform: translateY(0);
}

.s017 {
  position: relative;
  z-index: 1;
}

.s017-image-wrapper {
  position: relative;
  display: block; /* ← 変更 */
}

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

.s017-c001 {
  position: relative;
  z-index: 1;
}

.s018 {
  position: relative;
  z-index: 1;
}

.s018-image-wrapper {
  position: relative;
  display: block; /* ← 変更 */
}

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

.s018-c001 {
  position: relative;
  z-index: 1;
}

.s018-c002 {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  opacity: 0;
  transform: translateX(-40px);
  will-change: transform, opacity;
  transition: transform 0.8s ease-out, opacity 0.8s ease-out;
}

.s018-c002.in-view {
  opacity: 1;
  transform: translateY(0);
  transition: transform 1.6s ease-out, opacity 1.6s ease-out;
}

.s019 {
  position: relative;
  z-index: 1;
}

.s019-image-wrapper {
  position: relative;
  display: block; /* ← 変更 */
}

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

.s019-c001 {
  position: relative;
  z-index: 1;
}

.s019-c002 {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  opacity: 0;
  transform: translateX(-40px);
  will-change: transform, opacity;
  transition: transform 0.8s ease-out, opacity 0.8s ease-out;
}

.s019-c002.in-view {
  opacity: 1;
  transform: translateY(0);
  transition: transform 2.4s ease-out, opacity 2.4s ease-out;
}

.s020 {
  position: relative;
  z-index: 1;
}

.s020-image-wrapper {
  position: relative;
  display: block; /* ← 変更 */
}

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

.s020-c001 {
  position: relative;
  z-index: 1;
}

.s020-c002 {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  opacity: 0;
  transform: translateX(-40px);
  will-change: transform, opacity;
  transition: transform 0.8s ease-out, opacity 0.8s ease-out;
}

.s020-c002.in-view {
  opacity: 1;
  transform: translateY(0);
  transition: transform 3.2s ease-out, opacity 3.2s ease-out;
}

.s021 {
  position: relative;
  z-index: 1;
}

.s021-image-wrapper {
  position: relative;
  display: block; /* ← 変更 */
}

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

.s021-c001 {
  position: relative;
  z-index: 1;
}

.s021-c002 {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  opacity: 0;
  transform: translateX(-40px);
  will-change: transform, opacity;
  transition: transform 0.8s ease-out, opacity 0.8s ease-out;
}

.s021-c002.in-view {
  opacity: 1;
  transform: translateY(0);
  transition: transform 1.6s ease-out, opacity 1.6s ease-out;
}

.s022 {
  position: relative;
  z-index: 1;
}

.s022-image-wrapper {
  position: relative;
  display: block; /* ← 変更 */
}

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

.s022-c001 {
  position: relative;
  z-index: 1;
}

.s022-c002 {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  transform-origin: bottom center;
  opacity: 0;
}

/* ポン！エフェクト */
@keyframes s022-c002-a001 {
  0% {
    transform: translateY(-50px) scale(0.2) rotate(-15deg);
    opacity: 0;
  }
  40% {
    transform: translateY(0) scale(1.2) rotate(0deg);
    opacity: 1;
  }
  60% {
    transform: translateY(0) scale(0.9) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(0) scale(1) rotate(0deg);
    opacity: 1;   /* ← ここを追加 */
  }
}

/* inview がついたら一度だけ実行 & 最終状態をキープ */
.s022-c002.in-view {
  animation: s022-c002-a001 0.6s cubic-bezier(0.25,1.5,0.5,1) both;
  animation-delay: 1.2s; /* ← ここを追加 */
}

.s022-c003 {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
}

.s023 {
  position: relative;
  z-index: 1;
}

.s023-image-wrapper {
  position: relative;
  display: block; /* ← 変更 */
}

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

.s023-c001 {
  position: relative;
  z-index: 1;
}

.s023-c002 {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  opacity: 0;
  transform: translateY(-40px);
  transition: all 0.8s ease-out;
}

.s023-c002.in-view {
  opacity: 1;
  transform: translateY(0);
}

.s024 {
  position: relative;
  z-index: 1;
}

.s024-image-wrapper {
  position: relative;
  display: block; /* ← 変更 */
}

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

.s024-c001 {
  position: relative;
  z-index: 1;
}

.s024-c002 {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  opacity: 0;
  transform: translateY(-40px);
  transition: all 0.8s ease-out;
}

.s024-c002.in-view {
  opacity: 1;
  transform: translateY(0);
}

.s025 {
  position: relative;
  z-index: 1;
}

.s025-image-wrapper {
  position: relative;
  display: block; /* ← 変更 */
}

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

.s025-c001 {
  position: relative;
  z-index: 1;
}

.s025-c002 {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
}

.s025-c003 {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
}

.s026 {
  position: relative;
  z-index: 1;
}

.s026-image-wrapper {
  position: relative;
  display: block; /* ← 変更 */
}

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

.s026-c001 {
  position: relative;
  z-index: 1;
}

.s026-c002 {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  animation: s026-c002-a001 2s ease-in-out infinite;
}

@keyframes s026-c002-a001 {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

.s026-c003 {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  animation: s026-c002-a002 2s ease-in-out infinite;
  animation-delay: 1s; /* タイミングずらす場合（任意） */
}

@keyframes s026-c002-a002 {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

.s027 {
  position: relative;
  z-index: 1;
}

.s027-image-wrapper {
  position: relative;
  display: block; /* ← 変更 */
}

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

.s027-c001 {
  position: relative;
  z-index: 1;
}

.s027-c002 {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
}

.s027-c003 {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
}

.s027-c004 {
  position: absolute;
  z-index: 4;
  top: 0;
  left: 0;
}

@keyframes s027-c004-a001 {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.s027-c004-a001 {
  animation: s027-c004-a001 1s infinite;
}

.s028 {
  position: relative;
  z-index: 1;
}

.s028-image-wrapper {
  position: relative;
  display: block; /* ← 変更 */
}

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

.s028-c001 {
  position: relative;
  z-index: 1;
}

.s028-c002 {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
}

.s028-c003 {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
}

@keyframes s028-c003-a001 {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.s028-c003-a001 {
  animation: s028-c003-a001 1s infinite;
}

.s029 {
  position: relative;
  z-index: 1;
}

.s029-image-wrapper {
  position: relative;
  display: block; /* ← 変更 */
}

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

.s029-c001 {
  position: relative;
  z-index: 1;
}

.s029-c002 {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
}

.s029-c003 {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
}

.s029-c004 {
  position: absolute;
  z-index: 4;
  top: 0;
  left: 0;
}

.s029-c005 {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
}

.s030 {
  position: relative;
  z-index: 1;
}

.s030-image-wrapper {
  position: relative;
  display: block; /* ← 変更 */
}

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

.s030-c001 {
  position: relative;
  z-index: 1;
}

.s030-c002 {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  opacity: 0;
  transform: translateY(-40px); /* 上方向にオフセット */
  transition: all 0.8s ease-out;
}

.s030-c002.in-view {
  opacity: 1;
  transform: translateY(0);
}

.s031 {
  position: relative;
  z-index: 1;
}

.s031-image-wrapper {
  position: relative;
  display: block; /* ← 変更 */
}

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

.s031-c001 {
  position: relative;
  z-index: 1;
}

.s031-c002 {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  opacity: 0;
  transform: translateY(-40px); /* 上方向にずらす */
  transition: all 0.8s ease-out;
}

.s031-c003 {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  opacity: 0;
  transform: translateY(-40px); /* 上方向にずらす */
  transition: all 0.8s ease-out;
}

/* 表示時（inview付与） */
.s031-c002.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* 表示時（inview付与） */
.s031-c003.in-view {
  opacity: 1;
  transform: translateY(0);
}

.s032 {
  position: relative;
  z-index: 1;
}

.s032-image-wrapper {
  position: relative;
  display: block; /* ← 変更 */
}

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

.s032-c001 {
  position: relative;
  z-index: 1;
}

.s032-c002 {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
}

.s032-c003 {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
}

.s033 {
  position: relative;
  z-index: 1;
}

.s033-image-wrapper {
  position: relative;
  display: block; /* ← 変更 */
}

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

.s033-c001 {
  position: relative;
  z-index: 1;
}

.s033-c002 {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  opacity: 0;
  transform: translateX(-40px); /* 左にオフセット */
  transition: all 0.8s ease-out;
}

/* .inviewがついたら表示 */
.s033-c002.in-view {
  opacity: 1;
  transform: translateX(0);
}

.s034 {
  position: relative;
  z-index: 1;
}

.s034-image-wrapper {
  position: relative;
  display: block; /* ← 変更 */
}

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

.s034-c001 {
  position: relative;
  z-index: 1;
}

.s034-c002 {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  opacity: 0;
  transform: translateX(40px); /* 右へオフセット */
  transition: all 0.8s ease-out;
}

/* inviewがついたら表示 */
.s034-c002.in-view {
  opacity: 1;
  transform: translateX(0);
}

.s035 {
  position: relative;
  z-index: 1;
}

.s035-image-wrapper {
  position: relative;
  display: block; /* ← 変更 */
}

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

.s035-c001 {
  position: relative;
  z-index: 1;
}

.s035-c002 {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  opacity: 0;
  transform: translateX(-40px); /* 左にオフセット */
  transition: all 0.8s ease-out;
}

/* .inviewがついたら表示 */
.s035-c002.in-view {
  opacity: 1;
  transform: translateX(0);
}

.s036 {
  position: relative;
  z-index: 1;
}

.s036-image-wrapper {
  position: relative;
  display: block; /* ← 変更 */
}

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

.s036-c001 {
  position: relative;
  z-index: 1;
}

.s036-c002 {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  transform: scale(0.7);
  opacity: 0;
  transition: transform 0.4s ease-out, opacity 0.4s ease-out;
}

/* inview時：スケール1で表示 */
.s036-c002.in-view {
  transform: scale(1);
  opacity: 1;
}

.s037 {
  position: relative;
  z-index: 1;
}

.s037-image-wrapper {
  position: relative;
  display: block; /* ← 変更 */
}

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

.s037-c001 {
  position: relative;
  z-index: 1;
}

.s037-c002 {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  opacity: 0;
  transform: translate(-30px, 30px); /* 左下へ */
  transition: all 1s ease-out;
}

/* inview発火時に表示 */
.s037-c002.in-view {
  opacity: 1;
  transform: translate(0, 0);
}

.s038 {
  position: relative;
  z-index: 1;
}

.s038-image-wrapper {
  position: relative;
  display: block; /* ← 変更 */
}

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

.s038-c001 {
  position: relative;
  z-index: 1;
}

.s039 {
  position: relative;
  z-index: 1;
}

.s039-image-wrapper {
  position: relative;
  display: block; /* ← 変更 */
}

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

.s039-c001 {
  position: relative;
  z-index: 1;
}

.s040 {
  position: relative;
  z-index: 1;
}

.s040-image-wrapper {
  position: relative;
  display: block; /* ← 変更 */
}

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

.s040-c001 {
  position: relative;
  z-index: 1;
}

.s041 {
  position: relative;
  z-index: 1;
}

.s041-image-wrapper {
  position: relative;
  display: block; /* ← 変更 */
}

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

.s041-c001 {
  position: relative;
  z-index: 1;
}

.s042 {
  position: relative;
  z-index: 1;
}

.s042-image-wrapper {
  position: relative;
  display: block; /* ← 変更 */
}

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

.s042-c001 {
  position: relative;
  z-index: 1;
}

.s043 {
  position: relative;
  z-index: 1;
}

.s043-image-wrapper {
  position: relative;
  display: block; /* ← 変更 */
}

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

.s043-c001 {
  position: relative;
  z-index: 1;
}