@charset "UTF-8";
/* sassファイル行頭で記述 */
@keyframes hover_button {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.2);
  }
}
@keyframes click_navi_open {
  0% {
    transform: scale(0.5);
    opacity: 0.5;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes click_navi_close {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    opacity: 0.5;
    transform: scale(0.5);
  }
}
@keyframes click_button {
  0% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn_slide_l {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes fadeIn_slide_r {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes fadeIn_rotate {
  0% {
    opacity: 0;
    transform: rotate(40deg) scale(2);
  }
  100% {
    opacity: 1;
    transform: rotate(0deg) scale(1);
  }
}
@keyframes fadeUp_pc {
  from {
    transform: translateY(20%);
    opacity: 0;
  }
  to {
    opacity: 1;
    transform: translateY(0%);
  }
}
@keyframes flash {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
@keyframes popup {
  0% {
    transform: translateY(40px) scale(0.8);
    opacity: 0;
  }
  100% {
    transform: translateY(0) scale(1);
  }
  80%, 100% {
    opacity: 1;
  }
}
@keyframes zoomIn {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes slideIn_l {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  40%, 100% {
    opacity: 1;
  }
}
@keyframes kurukuru {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes kurukuru_yoko {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
@keyframes poyopoyo {
  0% {
    transform: scale(0.8, 1.4) translate(0%, -100%);
  }
  10% {
    transform: scale(0.8, 1.4) translate(0%, -15%);
  }
  20% {
    transform: scale(1.4, 0.6) translate(0%, 30%);
  }
  30% {
    transform: scale(0.9, 1.1) translate(0%, -10%);
  }
  40% {
    transform: scale(0.95, 1.2) translate(0%, -30%);
  }
  50% {
    transform: scale(0.95, 1.2) translate(0%, -10%);
  }
  60% {
    transform: scale(1.1, 0.9) translate(0%, 5%);
  }
  70% {
    transform: scale(1, 1) translate(0%, 0%);
  }
  100% {
    transform: scale(1, 1) translate(0%, 0%);
  }
}
@keyframes fuwafuwa {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20%);
  }
}
@keyframes pikopiko {
  0% {
    transform: rotate(20deg);
  }
  100% {
    transform: rotate(-10deg);
  }
}
@keyframes pyonpyon {
  0%, 100% {
    transform: rotate(30deg) scale(1);
  }
  50% {
    transform: rotate(-30deg) scale(0.8);
  }
}
@keyframes wobble-hor-bottom {
  0%, 100% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
  }
  15% {
    -webkit-transform: translateX(-30px) rotate(-6deg);
    transform: translateX(-30px) rotate(-6deg);
  }
  30% {
    -webkit-transform: translateX(15px) rotate(6deg);
    transform: translateX(15px) rotate(6deg);
  }
  45% {
    -webkit-transform: translateX(-15px) rotate(-3.6deg);
    transform: translateX(-15px) rotate(-3.6deg);
  }
  60% {
    -webkit-transform: translateX(9px) rotate(2.4deg);
    transform: translateX(9px) rotate(2.4deg);
  }
  75% {
    -webkit-transform: translateX(-6px) rotate(-1.2deg);
    transform: translateX(-6px) rotate(-1.2deg);
  }
}
/*===================================================================
				= 背景
===================================================================*/
video {
  position: fixed;
  width: 100%;
  height: 100vh;
  -o-object-fit: cover;
  object-fit: cover;
}

.wrap {
  position: fixed;
  width: 100%;
  height: 100vh;
  aspect-ratio: 1.7777777778;
  display: flex;
  justify-content: center;
}
@media (max-width: 750px) {
  .wrap {
    aspect-ratio: 0.5622188906;
  }
}

.inner_wrap {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}
@media (min-width: 1921px) {
  .inner_wrap {
    width: 1920px;
  }
}
.inner_wrap > * {
  position: absolute;
}

/*===================================================================
				= トップ
===================================================================*/
h1 {
  width: 33.8541666667%;
  aspect-ratio: 650/220;
  left: 1.875%;
  margin: 1.875% 0 0;
  background: url("../img/logo.png") center center/cover no-repeat;
}
@media (max-width: 750px) {
  h1 {
    width: 86.6666666667%;
    left: 6.6666666667%;
    margin: 8% 0 0 0;
  }
}

.logo_alv {
  display: block;
  width: 12.5%;
  aspect-ratio: 240/60;
  right: 1.875%;
  margin: 1.875% 0 0 0;
  background: url("../img/logo_alvion.png") center center/cover no-repeat;
}
@media (max-width: 750px) {
  .logo_alv {
    width: 32%;
    right: 1.6%;
    margin: 1.6% 0 0 0;
  }
}
.logo_alv:hover {
  animation: hover_button 0.2s forwards;
}

.contens {
  position: relative;
  width: 33.3333333333%;
/*  aspect-ratio: 640/354;*/   /*@1*/
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
}
@media (max-width: 750px) {
  .contens {
    width: 85.3333333333%;
  }
}
.contens .soon {
  position: absolute;
  width: 100%;
  aspect-ratio: 640/160;
  top: 0;
  left: 0;
  background: url("../img/text_soon.png") center center/cover no-repeat;
  font-size: 0;
  white-space: nowrap;
  overflow: hidden;
}

.bg-image {
  position: fixed;
  inset: 0; /* top: 0; right: 0; bottom: 0; left: 0; の省略形 */
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: -1; /* 背景にしたい場合 */
  pointer-events: none; /* 背景画像がクリックを邪魔しないように */
}

.contens .popup-youtube {
  display: block;
  width: 25%;
  aspect-ratio: 160/160;
/*  margin: 30.3125% 0 0 0;*/    /*@1*/
}
.contens .popup-youtube img {
  width: 100%;
}
.contens .popup-youtube:hover {
  animation: hover_button 0.2s forwards;
}

.sns {
  bottom: 0;
  right: 1.875%;
  width: 14.1666666667%;
  margin: 0 0 1.875% 0;
  aspect-ratio: 272/80;
}
@media (max-width: 750px) {
  .sns {
    right: 31.4666666667%;
    width: 36.2666666667%;
    margin: 0 0 12% 0;
  }
}
.sns ul {
  display: flex;
}
.sns ul li {
  width: 29.4117647059%;
  aspect-ratio: 80/80;
  background-color: aqua;
  margin: 0 5.8823529412% 0 0;
  cursor: pointer;
}
.sns ul li:last-child {
  margin: 0;
}
.sns ul li.sns_x {
  background: url("../img/icon_x.png") center center/cover no-repeat;
}
.sns ul li.sns_instagram {
  background: url("../img/icon_Instgram.png") center center/cover no-repeat;
}
.sns ul li.sns_youtube {
  background: url("../img/icon_Youtube.png") center center/cover no-repeat;
}
.sns ul li:hover {
  animation: hover_button 0.2s forwards;
}

.sns ul li a {
  display: block;
  width: 100%;
  height: 100%;
}

.copy {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  margin: 0 0 1.25% 0;
  color: #fff;
  font-size: 1.25vw;
}
@media (min-width: 1921px) {
  .copy {
    font-size: 24px;
  }
}
@media (max-width: 750px) {
  .copy {
    line-height: 1.8;
    font-size: 4vw;
  }
}