/*=========================================================
	Main
=========================================================*/
body.home{
	overflow:hidden;
	height: calc(var(--vh, 1vh) * 100);
}




/*=========================================================
	Page
=========================================================*/
/*=========================================================
	AboutHero
=========================================================*/
.page-template-page-about .site-footer{
	margin-top:0;
}


.AboutHero{
	margin-top:-15rem;
}

.AboutHeroBx-preserve{
	height:100vh;
	position:relative;
}

.AboutHeroBx-item{
	line-height:0;
	position:absolute;
	top:50%;
	left:50%;
	perspective: 125rem;
}

.AboutHeroBx-card{
	height:40vh;
}

.AboutHeroBx-item.first{
	z-index:3;
}

.AboutHeroBx-item.center{
	z-index:2;
}

.AboutHeroBx-img{
	position:relative;
	height:100%;
	width:auto;
	max-width:none;
	transform: rotateX(41deg) rotateY(-17deg) rotateZ(50deg);
}

.AboutHeroBxCard{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
}

.AboutHeroBx-item.first{
	transform:translate(-50%, -85%);
}

.AboutHeroBx-item.center{
	transform:translate(-50%, -50%);
}

.AboutHeroBx-item.last{
	transform:translate(-50%, -15%);
}

@media screen and (max-width: 1024px) and (min-width: 748px){
	.AboutHero{
		margin-top:-10rem;
	}
}

@media screen and (max-width: 767px) and (min-width: 1px){
	.AboutHero{
		margin-top:-10rem;
	}
}


/*=========================================================
	CardText
=========================================================*/
.CardText{
	position:absolute;
	top:50%;
	left:calc(55% + 30vh);
	transform:translateY(-50%);
	height:100vh;
}

.CardText-item{
	position:absolute;
	top:43%;
	left:0;
	transform:translateY(-50%);
}

.CardText-text{
	position:relative;
	padding-left:2rem;
	text-transform:uppercase;
}

.CardText-text:after{
	content:"";
	display:table;
	clear:both;
}

.CardText-num{
	font-size:1.125rem;
	width:0.938rem;
	height:0.938rem;
	border-radius:100%;
	font-weight:bold;
	display:block;
	text-align:center;
	background-color:rgba(250,200,20);
	position:absolute;
	color:#000;
	top:50%;
	left:0;
	transform:translateY(-50%);
}

.CardText-title{
	display:block;
	font-size:1.5rem;
	line-height:1.2em;
	color:#000;
	font-weight:600;
	white-space:nowrap;
	/* font-family: 'FuturaBt'; */
}

.CardText-item:first-child{
	top:28%;
}

.CardText-item:last-child{
	top:58%;
}

.AboutScroll{
	position:absolute;
	bottom:2rem;
	left:50%;
	transform:translateX(-50%);
	z-index:50;
}

.AboutScroll-text{
	font-size:1rem;
	line-height:1.2em;
	color:#000;
	font-weight:500;
	display:inline-block;
	padding-right:1.5rem;
	position:relative;
}

.AboutScroll-text:after{
	content:"";
	width:1rem;
	height:1rem;
	background-image:url(../image/ico_about_scroll.png);
	background-size:1rem 1rem;
	position:absolute;
	top:50%;
	right:0;
	margin-top:-0.5rem;
	animation: AboutScroll 0.9s linear infinite;
	transform:translateY(-10%);
}

@keyframes AboutScroll {
  from {
    transform:translateY(-10%);
  }
  to {
    transform:translateY(10%);
  }
}

/*responsive*/
@media screen and (max-width:1024px) and (min-width:748px){
	.AboutHeroBx-item{
		left:36%;
	}
	
	.AboutHeroBx-card{
		height:30vh;
	}
	
	.CardText{
		left: calc(40% + 20vh);
	}
	
	.CardText-item{
		top:45%;
	}
	
	.CardText-item:first-child{
		top:33%;
	}

	.CardText-item:last-child{
		top:58%;
	}
	
	.CardText-text{
		padding-left:1.4rem;
	}
	
	.CardText-num{
		width:0.5rem;
		height:0.5rem;
		line-height:1.4rem;
		font-size:0.75rem;
	}
	
	.CardText-title{
		font-size:1.3rem;
	}
}

@media screen and (max-width:747px) and (min-width:1px){
	.AboutHeroBx-item{
		left:28%;
	}
	
	.AboutHeroBx-card{
		height:20vh;
	}
	
	.CardText{
		left: calc(22% + 20vh);
	}
	
	.CardText-item{
		top:47%;
	}
	
	.CardText-item:first-child{
		top:39%;
	}

	.CardText-item:last-child{
		top:55%;
	}
	
	.CardText-text{
		padding-left:1rem;
	}
	
	.CardText-num{
		width:0.5rem;
		height:0.5rem;
		line-height:1.4rem;
		font-size:0.75rem;
	}
	
	.CardText-title{
		font-size:0.875rem;
	}
}