@charset "UTF-8";

/* =====
   ヘッダー
===== */
.header {
   position: absolute;
   top: 0;
   z-index: 50;
   inset: 0;
}
/* =====
   ヘッダー
===== */



/* =====
   メインヴィジュアル
===== */
.slideshow {
    position: relative;
    width: 100%;
    min-height: 100vh;
  }

.slide {
    position: absolute;
    opacity: 0;
    transition: opacity 2s ease-in-out;
    width: 100%;
    height: 100vh;
    object-fit: cover;
    object-position: center;
}

.slide:nth-of-type(1){
   object-position: 50% 40%;
}

.slide:nth-of-type(2){
   object-position: 50% 36%;
}

.slide:nth-of-type(3){
   object-position: 50% 25%;
}

/* プログレスバー */
.progress-bar {
   position: absolute;
   bottom: 0;
   left: 0;
   height: 3px;
   width: 0;
   background-color: #ffffff;
   opacity: .5;
   transition: width 5s linear;
}

.active {
    opacity: 1;
}
/* =====
   メインヴィジュアルエンド
===== */




/* =====
   ファーストロゴ
===== */
.logo_fadein{
	background: #242424;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 999;
}
.logo_open {
  font-family: var(--primary-font02);
  font-weight: 400;
  letter-spacing: 1.5px;
  color: var(--primary-white);
  font-size: 4rem;
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: none;
	z-index: 9999;
   opacity: 0.8;
}

@media screen and (max-width: 769px) {
   .logo_fadein .logo_open {
      font-size: 3rem;
    }
}
@media screen and (max-width: 480px) {
   .logo_fadein .logo_open {
      font-size: 2.5rem;
    }
}
/* =====
   ファーストロゴエンド
===== */

.fadeIn_up {
   opacity: 0;
   transform: translate(0, 50%);
   transition: 2s;
 }
 .fadeIn_up.is-show {
   transform: translate(0, 0);
   opacity: 1;
 }