@charset "utf-8";

/*オープニング
---------------------------------------------------------------------------*/
#mainimg {
  width: 100%;
  height: 100vh;
  position: sticky;
  top: 0px;
  overflow: hidden;
}

/*枠の画像*/
.waku {
  background: url("../images/waku.svg") no-repeat center center / cover;
  width: 100%;
  height: 100%;
  transition: transform 0.2s;
  /*移動をスムーズにする*/
  transform-origin: center center;
}

/*動画で使う場合（_movieタイプ）
---------------------------------------------------------------------------*/
#mainimg video {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 100%;
}

/*スライドショーで使う場合（_slideタイプ）
---------------------------------------------------------------------------*/
/*３枚の画像の共通設定*/
.slide {
  width: 100%;
  height: 100%;
  position: absolute;
  right: 0px;
  top: 0px;
  display: flex;
  align-items: center;
  opacity: 0;
  transition: opacity 1s;
  /*ここの1s（＝1秒）を変更すると、フェードのスピードを変更できます。*/
}

/* 1枚目画像 サイズは 1340x970 に統一（最初から表示するので背景を常に持つ） */
.slide1 {
  background: url("../images/chibicen/01.webp") no-repeat center center / cover;
  justify-content: center;
  text-align: center;
  color: #fff;
}

/* 2・3枚目は初回は背景なし。JS が .is-ready を付けた時点で初めて取得する
   （最初の数秒の帯域を1枚目とCSSに譲るため）。 */
.slide2.is-ready {
  background: url("../images/chibicen/02.webp") no-repeat center center / cover;
}

.slide3.is-ready {
  background: url("../images/chibicen/03.webp") no-repeat center center / cover;
}

/*端末を縦向きにした場合の追加指定*/
@media (orientation: portrait) {
  .slide1 {
    background-image: url("../images/chibicen/05_portrait.webp");
  }

  .slide2.is-ready {
    background-image: url("../images/chibicen/04_portrait.webp");
  }

  .slide3.is-ready {
    background-image: url("../images/chibicen/06_portrait.webp");
  }
}

/*追加指定ここまで*/

/*現在表示されているスライドのみをクリック可能にする設定（変更不要）
---------------------------------------------------------------------------*/
.slide {
  pointer-events: none;
  /* デフォルトでクリックを無効にする */
}

.slide.active {
  pointer-events: auto;
  /* 表示中のスライドのみクリックを有効にする */
}