@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@100;200;300;400;500;600;700;800;900&display=swap');

body{
	background-color:#000;
	width: 100%;
	position:relative;
	margin: 0px;
	text-align:center;
	letter-spacing:.075em;
}
.lottie{
	background-color:#000;
	width:100%;
	height:100vh;
	text-align: center;
	position:relative;
}
.lottie2{
	background-color:#fff;
	width:100%;
	height:100vh;
	text-align: center;
	position:relative;
}
.logo{
	width:50%;
    position: absolute;
	top:50%;
	bottom:50%;
	left:-50%;
	right:-50%;
	margin: auto;
	filter: drop-shadow(0px 0px 7px #bb9b1d)!important
}
.txt_area{
	margin:20vw auto;
	text-align:center;
}
.txt_area2{
	margin:10vw auto 20vw;
	text-align:center;
}
.txt_area3{
	padding:8vw 0 10vw;
	background:#fff;
	text-align:center;
	color:#151515;
}
.txt_area3 h2,
.txt_area3 p{
	color:#151515;
}
h1{
    margin: 0 auto 12px;
	font-size:24px;
	line-height:1.7;
	font-family: "Noto Serif JP", serif;
	color:#fff;
	letter-spacing:.125em;
}
h2{
	margin-bottom:32px;
	font-size:24px;
	line-height:1.7;
	font-family: "Noto Serif JP", serif;
	color:#fff;
	letter-spacing:.125em;
}
p{
	font-size:18px;
	line-height:1.8;
	font-family: "Noto Serif JP", serif;
	color:#fff;
}

.bg1 span{
	width:100%;
	height:50vh;
	min-height:400px;
	background:url("../img/bg2.svg") #000;
	background-size:120%;
	background-position:center;
	display:inline-block;
}

.bg2 span{
	width:100%;
	height:50vh;
	min-height:400px;
	background:url("../img/bg3.svg") #000;
	background-size:120%;
	background-position:center;
	display:inline-block;
}

.bg3 span{
	width:100%;
	height:50vh;
	min-height:400px;
	background:url("../img/bg4.svg") #000;
	background-size:100%;
	background-position:center;
	display:inline-block;
}




.fadeUp{
	animation-name:fadeUpAnime;
	animation-duration:0.75s;
	animation-fill-mode:forwards;
	opacity:0;
}

@keyframes fadeUpAnime{
	from {
		opacity: 0;
		transform: translateY(100px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.fadeUpTrigger{
	opacity: 0;
}



/*========= 親要素と子要素の共通CSS ===============*/

.bgextend {
  animation-name: bgextendAnimeBase;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  position: relative;
  overflow: hidden; /*　はみ出た色要素を隠す　*/
  opacity: 0;
	line-height:0;
}

@keyframes bgextendAnimeBase {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/*中の要素*/
.bgappear {
  animation-name: bgextendAnimeSecond;
  animation-duration: 1s;
  animation-delay: 0.6s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes bgextendAnimeSecond {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/*==================================================
左から右に伸びて出現
===================================*/
.bgLRextend::before {
  animation-name: bgLRextendAnime;
  animation-duration:1.2s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #333; /*伸びる背景色の設定*/
}
@keyframes bgLRextendAnime {
  0% {
    transform-origin: left;
    transform: scaleX(0);
  }
  50% {
    transform-origin: left;
    transform: scaleX(1);
  }
  50.001% {
    transform-origin: right;
  }
  100% {
    transform-origin: right;
    transform: scaleX(0);
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bgappearTrigger,
.bgLRextendTrigger {
  opacity: 0;
}







/*========= ぼかしから出現 ===============*/
.blur{
  animation-name:blurAnime;
  animation-duration:2.4s;
  animation-fill-mode:forwards;
}

@keyframes blurAnime{
  from {
	  opacity:0;
	  filter: blur(6px);
	  transform: scale(1.01);
  }

  to {
	  opacity:1;
	  filter: blur(0);
	  transform: scale(1);
  }
}


/**フッター設定**/



.footer_container{
	width:90%;
	max-width:1440px;
	margin: 0 auto;
	padding:80px 0 160px;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
    align-items: end;
}
.footer_logo{
	width:200px;
}
.footer_info{
	width:calc( 100% - 280px );
	margin-bottom:64px;
	text-align:left;
}
.footer_info p{
	margin:0 auto;
}
.footer_copy {
    font-size: 12px;
    color: #fff;
    position: absolute;
    bottom: 2em;
    right: 2em;
    display: inline-block;
    letter-spacing: 0.05em;
}



@media screen and (max-width: 640px){
	.lottie,.lottie2{
		height:36vh;
		overflow:hidden;
	}
	.top_lottie{
		height:90vh;
	}
	lottie-player{
		width:100vh;
        position: absolute;
		left:-50vh;
		right:-50vh;
        margin: auto;
	}
	.txt_area,
	.txt_area2{
		width:90%;
	}
	.txt_area3{
		width:100%;
	}
	h2{
        margin-bottom: 0;
		font-size:4.6vw;
	}
	p{
		font-size:3.6vw;
		line-height:2;
	}
	
	
	.bg1 span{
		height:30vh;
		min-height:300px;
		background-size:150%;
	}

	.bg2 span{
		height:30vh;
		min-height:300px;
		background-size:cover;
	}

	.bg3 span{
		height:30vh;
		min-height:300px;
		background-size:cover;
	}

	.footer_logo{
		width:32vw;
	}
	.footer_container{
		padding:10vh 0 10vh;
        justify-content: center;
	}
	.footer_info{
		width:100%;
		margin:6vh 0 0;
		text-align:center;
	}
	.footer_copy {
		right:0;
		left:0;
	}



	
}