@charset "UTF-8";
/* フェーズ2: 開始条件・動き・時間・遅延をクラスで組み合わせる。 */

:where(.js-scroll-reveal, .anim-hero-fade, .anim-loop, .anim-progress, .anim-media-from-left, .anim-media-from-right) {
  --anim-duration: 800ms;
  --anim-delay: 200ms;
  --anim-easing: ease;
  --anim-distance: 32px;
  --anim-x: 0px;
  --anim-y: 0px;
  --anim-scale: 1;
}

.anim-fade {
  --anim-scale: 1;
}
.anim-up {
  --anim-y: var(--anim-distance);
}
.anim-down {
  --anim-y: calc(-1 * var(--anim-distance));
}
.anim-from-left {
  --anim-x: calc(-1 * var(--anim-distance));
}
.anim-from-right {
  --anim-x: var(--anim-distance);
}
.anim-zoom {
  --anim-scale: 0.94;
}

/* JSが初期化できた要素だけ非表示にする。 */
.js-scroll-reveal.is-reveal-ready {
  transition-property: opacity, translate, scale;
  transition-duration: var(--anim-duration);
  transition-delay: var(--anim-delay);
  transition-timing-function: var(--anim-easing);
}

.js-scroll-reveal.is-reveal-ready:not(.is-animated) {
  opacity: 0;
  translate: var(--anim-x) var(--anim-y);
  scale: var(--anim-scale);
}

.js-scroll-reveal.is-reveal-ready.is-animated {
  opacity: 1;
  translate: 0 0;
  scale: 1;
}

/* メディアとテキスト: 親ブロックに指定し、直下のfigureだけを動かす。
 * js-scroll-revealは併用不要。画面内に入ったときに1回表示する。
 */
.anim-media-from-left {
  --anim-x: calc(-1 * var(--anim-distance));
}

.anim-media-from-right {
  --anim-x: var(--anim-distance);
}

@media (prefers-reduced-motion: no-preference) {
  .wp-block-media-text:is(.anim-media-from-left, .anim-media-from-right).is-reveal-ready > figure.wp-block-media-text__media {
    transition-property: opacity, translate;
    transition-duration: var(--anim-duration);
    transition-delay: var(--anim-delay);
    transition-timing-function: var(--anim-easing);
  }

  .wp-block-media-text:is(.anim-media-from-left, .anim-media-from-right).is-reveal-ready:not(.is-animated) > figure.wp-block-media-text__media {
    opacity: 0;
    translate: var(--anim-x) 0;
  }

  .wp-block-media-text:is(.anim-media-from-left, .anim-media-from-right).is-reveal-ready.is-animated > figure.wp-block-media-text__media {
    opacity: 1;
    translate: 0 0;
  }
}

/* 下層ヒーロー用。表示時に1回、ふわっとフェードインする。 */
.anim-hero-fade {
  --anim-duration: 1600ms;
  --anim-easing: ease-out;
  animation-name: yakumo_kyosan_hero_fade;
  animation-duration: var(--anim-duration);
  animation-delay: var(--anim-delay);
  animation-timing-function: var(--anim-easing);
  animation-iteration-count: 1;
  animation-fill-mode: backwards;
}

@keyframes yakumo_kyosan_hero_fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* 常時再生。動きは1つ選び、スクロール表示とは別の要素に付ける。 */
.anim-loop {
  --anim-duration: 3000ms;
  animation-duration: var(--anim-duration);
  animation-delay: var(--anim-delay);
  animation-timing-function: var(--anim-easing);
  animation-iteration-count: infinite;
}

.anim-loop.anim-float {
  animation-name: yakumo_kyosan_float;
}
.anim-loop.anim-pulse {
  animation-name: yakumo_kyosan_pulse;
}
.anim-loop.anim-spin {
  animation-name: yakumo_kyosan_spin;
}

@keyframes yakumo_kyosan_float {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 calc(-0.5 * var(--anim-distance));
  }
}

@keyframes yakumo_kyosan_pulse {
  0%,
  100% {
    scale: 1;
  }
  50% {
    scale: 1.04;
  }
}

@keyframes yakumo_kyosan_spin {
  from {
    rotate: 0deg;
  }
  to {
    rotate: 360deg;
  }
}

/* 進行度は外枠から継承。時間・遅延ではなくスクロール位置に連動する。 */
.js-scroll-progress.is-progress-ready > .anim-progress.anim-parallax {
  translate: 0 calc((0.5 - var(--progress, 0.5)) * var(--anim-distance) * 2);
}

.anim-duration-300 {
  --anim-duration: 300ms;
}
.anim-duration-600 {
  --anim-duration: 600ms;
}
.anim-duration-1000 {
  --anim-duration: 1000ms;
}
.anim-duration-2000 {
  --anim-duration: 2000ms;
}
.anim-duration-4000 {
  --anim-duration: 4000ms;
}
.anim-delay-0 {
  --anim-delay: 0ms;
}
.anim-delay-100 {
  --anim-delay: 100ms;
}
.anim-delay-200 {
  --anim-delay: 200ms;
}
.anim-delay-400 {
  --anim-delay: 400ms;
}
.anim-delay-600 {
  --anim-delay: 600ms;
}
.anim-distance-16 {
  --anim-distance: 16px;
}
.anim-distance-32 {
  --anim-distance: 32px;
}
.anim-distance-64 {
  --anim-distance: 64px;
}
.anim-ease-linear {
  --anim-easing: linear;
}
.anim-ease-out {
  --anim-easing: ease-out;
}
.anim-paused {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .js-scroll-reveal.is-reveal-ready,
  .js-scroll-reveal.is-reveal-ready:not(.is-animated),
  .js-scroll-reveal.is-reveal-ready.is-animated,
  .anim-hero-fade,
  .anim-loop,
  .js-scroll-progress.is-progress-ready > .anim-progress.anim-parallax {
    animation: none;
    transition: none;
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
}

/* トップページのオープニング。余白込みの画像全体を中央に収める。 */
.connect-opening {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: #fff;
    pointer-events: none;
    /* JSが動かない場合も画面を覆い続けない。 */
    animation: connect_opening_fallback 0s 8s forwards;
}

.connect-opening__picture {
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.connect-opening__picture img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
    object-position: center;
}

.connect-opening.is-playing {
    animation: connect_opening_out 1s 1.8s ease-in-out forwards;
}

.connect-opening.is-playing .connect-opening__picture {
    animation: connect_opening_in 1.2s ease-out both;
}

@keyframes connect_opening_in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes connect_opening_out {
    from { opacity: 1; }
    to { opacity: 0; visibility: hidden; }
}

@keyframes connect_opening_fallback {
    to { opacity: 0; visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
    .connect-opening {
        display: none;
        animation: none;
    }
}