/* for PC,ipad */
@import url("idx_pc.css") screen and (min-width:927px);

/* for iphone,ipod,Andoroid */
@import url("idx_mobi.css") screen and (min-width:0) and (max-width:926px);


/* //////////////////////////////////////////////////////////
*****************************************
Home Page Style - Common device
Developer: Neoworkers Corp.

--- お客様へ ---
お客様サイドでスタイル指定したい場合は、以下のCSSファイルに記述してください。
■全てのデバイス共通 … /css/lower/single.css
■PC(ipadなどのタブレット含む)　… /css/lower/single_pc.css
■モバイル … /css/lower/single_mobi.css

*****************************************
////////////////////////////////////////////////////////// */

.home_fv{
	position:relative;
	width:100%;height:calc(100vh - 110px);
	overflow:hidden;}
	
.home_fv_outer,.home_fv_cober{
	width:100%;
	height:calc(100vh - 110px);
	top:0;
	left:0;
}

.home_fv_outer{
	background:url("../../image/idx/fv_ptn.png");
	transform: rotate(0deg);
	z-index:100;
}

.home_fv_cober{
	background:rgba(0,0,0,0);
	z-index:110;
}

.home_fv_cober.active{
	animation: cover-open 1s ease-in 4s forwards;
}

@keyframes cover-open {
  to {
    background:rgba(0,0,0,0.8);
  }
}

.home_fv_outer.active{transform: rotate(10deg);}


.home_fv_mes{
	width:100%;
	height:calc(100vh - 210px);
	z-index:120;
	top:0;
	left:0;
	align-items:center;

}

.home_fv_mes .inner{width:100%;}

.home_fv_mes h2,.home_fv_mes h3{display:inline-block;padding:0.3em 1em;text-align:left;}
.home_fv_mes h2{
	font-size:clamp(1.8rem, 2.8vw, 4.4vw);
	background:rgba(0,0,0,0.5);
	margin-bottom:0.5em;
}
.home_fv_mes h3{
	font-size:clamp(1rem, 1.5vw, 3vw);
	background:#326432;
	margin-bottom:1em;
	opacity:0;
}

.home_fv_mes h3.active{
	opacity:1;
}

.home_fv_mes p.mes_st{
	font-weight:600;
	font-size:clamp(0.8rem, 1.2vw, 2.4vw);
	padding-right:2em;text-align:right;
	opacity:0;
	animation: stay-open 1s ease-in 4s forwards;
}


@keyframes stay-open {
  to {
    opacity:0.8;
  }
}

/* banner Area */
.bannerArea{
	left:0;
	bottom:0;
	width:100%;
	z-index:120;
}


.bannerArea > li img{border:1px solid #fff;}

.bannerArea li {
  opacity: 0;
  transform: translateY(200px);
  animation: slideInUp 1s ease-in-out forwards; 
}

.bannerArea li a{
	display:block;
	background:#fff;}

.bannerArea > li img{width:100%;}

.bannerArea li:nth-child(1) { animation-delay: 0s; }
.bannerArea li:nth-child(2) { animation-delay: 0.25s; }
.bannerArea li:nth-child(3) { animation-delay: 0.5s; }
.bannerArea li:nth-child(4) { animation-delay: 0.75s; }
.bannerArea li:nth-child(5) { animation-delay: 1s; }

@keyframes slideInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}