/* CSS Document */

.text-container,
.img-container {position: relative;overflow: hidden;display: inline-block;opacity: 0;transform: translateX(-100%);transition: transform 0.3s ease-out, opacity 0.1s ease-out;}

.text-container.is-visible,
.img-container.is-visible {opacity: 1;transform: translateX(0);}

.text {font-family: 'Roboto Mono', monospace;font-size: 30px;font-weight: 700;color: #000;position: relative;opacity: 1;transition: opacity 0.3s ease-out;}

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

/* リビールブロックの設定 */
.reveal-block {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: #000;transform: translateX(0);transition: transform 0.3s ease-out 0.5s;}

/* アクティブ状態の設定 */
.text-container.is-visible .reveal-block,
.img-container.is-visible .reveal-block {transform: translateX(100%);}

/* 遅延クラスに対応した設定 */
.text-container.delay-03,
.img-container.delay-03 {transition-delay: 0.3s;}

.text-container.delay-05,
.img-container.delay-05 {transition-delay: 0.5s;}

.text-container.delay-07,
.img-container.delay-07 {transition-delay: 0.7s;}

/* 遅延クラスに対応したブロックのトランジションディレイ */
.text-container.delay-03 .reveal-block,
.img-container.delay-03 .reveal-block {transition-delay: 0.8s;}

.text-container.delay-05 .reveal-block,
.img-container.delay-05 .reveal-block {transition-delay: 1s;}

.text-container.delay-07 .reveal-block,
.img-container.delay-07 .reveal-block {transition-delay: 1.2s;}