/* Telenet Anime Opening Animation Styles */

/* アニメーションコンテナの基本スタイル */
.telenet-animation {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 100%;
  min-width: 1300px;
  transform: translate(-50%, -50%);
  height: 100vh;
  z-index: 9999;
  overflow: hidden;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* アニメーション終了後の状態 */
.telenet-animation.completed {
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s ease;
}

/* アニメーション要素の基本スタイル */
.telenet-animation img {
  position: absolute;
  opacity: 0; /* 初期状態は非表示 */
  z-index: 10;
}

.initial-logo-container {
  width: 100%;
  height: 100%;
  background: #FFF;
}
.initial-logo {
  width: 280px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.coffee-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 240px;
  height: 240px;
  animation: fadein 1s ease-in-out;
  z-index: 100;
}

@keyframes fadein {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* コーヒーカップ要素 */
.telenet-animation .coffee-cup {
  width: 100%;
  height: auto;
  z-index: 3;
  opacity: 1;
}
/* コーヒーカップ(上)要素 */
.telenet-animation .coffee-top {
  width: 100%;
  height: auto;
  z-index: 1;
  opacity: 1;
}
/* コーヒーカップ(中)要素 */
.telenet-animation .coffee-content {
  width: 100%;
  height: auto;
  z-index: 2;
  opacity: 1;
}
/* コーヒーの蒸気要素 */
.telenet-animation .coffee-steam {
  width: 60%;
  height: auto;
  z-index: 5;
  opacity: 0;
  top: -20%;
  right: 3%;
  animation: coffee-steam 2.4s ease forwards;
  animation-delay: 1s;
}
@keyframes coffee-steam {
  0% {
    opacity: 0;
    transform: scale(0);
    top: -20%;
  }
  100% {
    opacity: 1;
    transform: scale(1);
    top: -24%;
  }
}

/* コーヒーの中身のアニメーション */
.telenet-animation .coffee-content {
  animation: coffee-pour 2.5s ease forwards;
  animation-delay: 1.3s;
  transform: translateY(30px);
}

@keyframes coffee-pour {
  0% {
    transform: translateY(30px);
    opacity: 0.3;
  }
  60% {
    transform: translateY(0px);
    opacity: 1;
  }
  75% {
    transform: translateY(0px);
    opacity: 1;
  }
  88% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(0px);
  }
}

/* ロゴ要素 */
.telenet-animation .logo {
  top: 29%;
  left: 50%;
  width: 20%;
  min-width: 256px;/*追記*/
  transform: translateX(-50%);
}

/* 雲の配置 - 紺色 */
.telenet-animation .blue-cloud-left-top {
  top: -13%;
  left: -6%;
  width: 58%;
  z-index: 1;
}
.telenet-animation .blue-cloud-left-bottom {
  top: 3%;
  left: -32%;
  width: 60%;
  z-index: 2;
}
.telenet-animation .blue-cloud-right-top {
  top: -12%;
  right: -2%;
  width: 55%;
}
.telenet-animation .blue-cloud-right-middle {
  top: -9%;
  right: -22%;
  width: 60%;
  z-index: 11;
}
.telenet-animation .blue-cloud-right-bottom {
  top: 2%;
  right: -32%;
  width: 55%;
}

/* 金雲の配置 */
.telenet-animation .gold-cloud-left {
  top: 28%;
  left: 50%;
  width: 28%;
  transform: translateX(-50%);
  z-index: 11;
}

.telenet-animation .gold-cloud-right {
  top: 38%;
  right: 50%;
  width: 28%;
  transform: translateX(50%);
  z-index: 11;
}

/* バラの配置 - 左側 */
.telenet-animation .rose-left-1 {
  /*bottom: -23%;*/
  bottom: -21%;
  /*left: -4%;*/
  left: -2%;
  /*width: 18%;*/
  width: 12%;
}
.telenet-animation .rose-left-2 {
  /*bottom: -11%;*/
  bottom: -9%;
  /*left: 6%;*/
  left: 8%;
  /*width: 15%;*/
  width: 9%;
}
.telenet-animation .rose-left-3 {
  /*bottom: -17%;*/
  bottom: -15%;
  /*left: 18%;*/
  left: 20%;
  /*width: 12%;*/
  width: 6%;
}
.telenet-animation .rose-left-4 {
  /*bottom: -14%;*/
  bottom: -12%;
  /*left: 27%;*/
  left: 29%;
  /*width: 16%;*/
  width: 10%;
  z-index: 6;
}
.telenet-animation .rose-left-5 {
  /*bottom: -15%;*/
  bottom: -13%;
  /*left: 37%;*/
  left: 39%;
  /*width: 16%;*/
  width: 10%;
  z-index: 5;
}

/* バラの配置 - 右側 */
.telenet-animation .rose-right-1 {
  /*bottom: -15%;*/
  bottom: -13%;
  /*right: 35%;*/
  right: 37%;
  /*width: 17%;*/
  width: 11%;
}
.telenet-animation .rose-right-2 {
  /*bottom: -20%;*/
  bottom: -18%;
  /*right: 26%;*/
  right: 28%;
  /*width: 15%;*/
  width: 11%;
  z-index: 5;
}
.telenet-animation .rose-right-3 {
  /*bottom: -17%;*/
  bottom: -15%;
  /*right: 16%;*/
  right: 18%;
  /*width: 16%;*/
  width: 10%;
  z-index: 11;
}
.telenet-animation .rose-right-4 {
  /*bottom: -16%;*/
  bottom: -14%;
  /*right: 8%;*/
  right: 10%;
  /*width: 12%;*/
  width: 6%;
  z-index: 4;
}
.telenet-animation .rose-right-5 {
  /*bottom: -24%;*/
  bottom: -22%;
  /*right: -4%;*/
  right: -2%;
  /*width: 17%;*/
  width: 11%;
  z-index: 5;
  transform: scaleX(-1); /* 反転 */
}

/* 葉っぱの配置 */
.telenet-animation .leaf-left {
  /*bottom: -20%;*/
  bottom: -30%;
  left: -12%;
  width: 50%;
  z-index: 1;
}
.telenet-animation .leaf-left-2 {
  /*bottom: -18%;*/
  bottom: -28%;
  left: 5%;
  width: 50%;
  z-index: 1;
}
.telenet-animation .leaf-right-1 {
  /*bottom: -18%;*/
  bottom: -28%;
  right: 16%;
  width: 45%;
  z-index: 1;
}
.telenet-animation .leaf-right-2 {
  /*bottom: -13%;*/
  bottom: -23%;
  right: 4%;
  width: 48%;
  z-index: 3;
}

/* 雪 */
.telenet-animation .snow-left {
  top: 17%;
  left: 17%;
  width: 8%;
  z-index: 11;
}
.telenet-animation .snow-right {
  /*top: 23%;*/
  top: 13%;
  /*right: 26%;*/
  right: 19%;
  width: 8%;
  z-index: 11;
}

/* 月 */
.telenet-animation .moon {
  /*top: 20%;*/
  /*right: 17%;*/
  top: 184px;
  left: calc(50% + 430px);
  width: 7%;
  z-index: 11;
}

/* レスポンシブ対応 - 600px以下 */
@media (max-width: 600px) {
  .initial-logo {
    width: 220px;
  }
  .telenet-animation .logo {
    width: 19%;
    z-index: 10;
  }

  .coffee-loader {
    width: 200px;
    height: 200px;
  }

  /* 雲の配置 - 紺色 */
  .telenet-animation .blue-cloud-left-top {
    /*top: -7%;*/
    top: -11%;
    left: -1%;
    width: 52%;
  }
  .telenet-animation .blue-cloud-left-bottom {
    /*top: 10%;*/
    top: 6%;
    left: -4%;
    width: 47%;
  }
  .telenet-animation .blue-cloud-right-top {
    /*top: -7%;*/
    top: -11%;
    right: 3%;
    width: 51%;
  }
  .telenet-animation .blue-cloud-right-middle {
    /*top: -4%;*/
    top: -8%;
    right: -7%;
    width: 52%;
  }
  .telenet-animation .blue-cloud-right-bottom {
    /*top: 7%;*/
    top: 3%;
    right: -8%;
    width: 47%;
  }

  /* 金雲の配置 */
  .telenet-animation .gold-cloud-left {
    /*left: 50%;*/
    left: 40%;
    width: 18%;
  }

  .telenet-animation .gold-cloud-right {
    /*right: 50%;*/
    right: 40%;
    width: 18%;
  }

  /* バラの配置 - 左側 */
  .telenet-animation .rose-left-1 {
    bottom: -12%;
    left: 44%;
    /*width: 14%;*/
    width: 12%;
  }
  .telenet-animation .rose-left-2 {
    bottom: -7%;
    left: 53%;
    /*width: 13%;*/
    width: 11%;
  }
  .telenet-animation .rose-left-3 {
    bottom: -6%;
    left: 60%;
    /*width: 9%;*/
    width: 7%;
    z-index: 1;
  }
  .telenet-animation .rose-left-4 {
    display: none; /* モバイル版では非表示 */
  }
  .telenet-animation .rose-left-5 {
    bottom: -5%;
    left: 33%;
    /*width: 12%;*/
    width: 10%;
  }

  /* バラの配置 - 右側 */
  .telenet-animation .rose-right-1 {
    bottom: -6%;
    right: 49%;
    /*width: 12%;*/
    width: 10%;
  }

  .telenet-animation .rose-right-2 {
    bottom: -10%;
    right: 38%;
    /*width: 12%;*/
    width: 10%;
    z-index: 11;
  }

  .telenet-animation .rose-right-3 {
    bottom: -9%;
    right: 59%;
    /*width: 13%;*/
    width: 11%;
  }

  .telenet-animation .rose-right-4 {
    display: none; /* モバイル版では非表示 */
  }

  /* 追加のバラの配置（モバイル版） */
  .telenet-animation .rose-right-5 {
    display: none; /* モバイル版では非表示 */
  }

  /* 葉っぱの配置（モバイル版） */
  .telenet-animation .leaf-left-1 {
    bottom: -15%;
    left: -8%;
    width: 40%;
    z-index: 1;
  }
  .telenet-animation .leaf-left-2 {
    display: none; /* モバイル版では非表示 */
  }
  .telenet-animation .leaf-right-1 {
    bottom: -14%;
    right: 28%;
    width: 32%;
    z-index: 2;
  }
  .telenet-animation .leaf-right-2 {
    display: none; /* モバイル版では非表示 */
  }

  /* 雪 */
  .telenet-animation .snow-left {
    top: 35%;
    left: 36%;
    width: 4%;
  }
  .telenet-animation .snow-right {
    top: 20%;
    right: 38%;
    width: 3%;
  }

  /* 月 */
  .telenet-animation .moon {
    top: 15%;
    right: 36%;
    width: 5%;
  }
}

@media (max-height: 600px) {
  .telenet-animation .logo {
    top: 27%;
  }

  /* 雲の配置 - 紺色 */
  .telenet-animation .blue-cloud-left-top {
    top: -17%;
  }
  .telenet-animation .blue-cloud-left-bottom {
    top: -1%;
  }
  .telenet-animation .blue-cloud-right-top {
    top: -16%;
  }
  .telenet-animation .blue-cloud-right-middle {
    top: -13%;
  }
  .telenet-animation .blue-cloud-right-bottom {
    top: -2%;
  }

  /* バラの配置 - 左側 */
  .telenet-animation .rose-left-1 {
    bottom: -33%;
  }
  .telenet-animation .rose-left-2 {
    bottom: -21%;
  }
  .telenet-animation .rose-left-3 {
    bottom: -27%;
  }
  .telenet-animation .rose-left-4 {
    bottom: -24%;
  }
  .telenet-animation .rose-left-5 {
    bottom: -25%;
  }

  /* バラの配置 - 右側 */
  .telenet-animation .rose-right-1 {
    bottom: -25%;
  }
  .telenet-animation .rose-right-2 {
    bottom: -30%;
  }
  .telenet-animation .rose-right-3 {
    bottom: -27%;
  }
  .telenet-animation .rose-right-4 {
    bottom: -18%;
  }
  .telenet-animation .rose-right-5 {
    bottom: -34%;
  }

  /* 葉っぱの配置 */
  .telenet-animation .leaf-left {
    bottom: -34%;
  }
  .telenet-animation .leaf-left-2 {
    bottom: -32%;
  }
  .telenet-animation .leaf-right-1 {
    bottom: -32%;
  }
  .telenet-animation .leaf-right-2 {
    bottom: -27%;
  }
}