@charset "UTF-8";

/*--------------------------------------------------------------------
=== [home] ====================================
 -------------------------------------------------------------------*/

.home #wrapper {
	background-image: url(../img/top/ill_pc_bg.jpg);
	background-position: top 100px center;
    background-size:100% auto;
    margin: 0 auto;
    box-sizing: border-box;
    background-repeat: no-repeat;
    overflow: hidden;
}

.home #wrapper header{
	z-index: 15;
}
.home #wrapper main{
	background-image: url(../img/base/frame_top.png), url(../img/base/frame_btm_home.png);
	z-index: 10;
	position: relative;
}
.home .infoBox {
    padding-top: calc(100px + 73vw);
}

.home #bg_right,
.home #bg_left{
	position: absolute;
	width: 100%;
	height: calc(73vw + 100px);
	margin: 0 auto;
	box-sizing: border-box;
	overflow: hidden;
}
.home #bg_right::after,
.home #bg_left::after{
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background-position: top 100px center;
	background-size: 100% auto;
	background-repeat: no-repeat;
    animation-duration: 2s;
	animation-timing-function: ease-out;
}
.home #bg_left::after{
	background-image: url(../img/top/ill_pc_bg_1.png);
    animation-name: bgLeft;
}
.home #bg_right::after{
	background-image: url(../img/top/ill_pc_bg_2.png);
    animation-name: bgRight;
}
.home .snsBox{
	display: none;
}
@keyframes bgLeft{
	0%{
		transform: translateX(-100%);
	}
	100%{
		transform: translateX(0);
	}
}
@keyframes bgRight{
	0%{
		transform: translateX(100%);
	}
	100%{
		transform: translateX(0);
	}
}

@media (max-width: 375px) {
}
@media (min-width: 376px) and (max-width: 414px) {
}
@media (min-width: 415px) and (max-width: 750px) {
}
@media  (max-width: 750px) {
	.home #wrapper main{
		background-image: url(../img/base/frame_top_sp.png), url(../img/base/frame_btm_sp.png);
		background-position: center -13vw, center 70vw;
	}
}

/*@media (max-width: 750px){
	.home #wrapper {
		animation-name: topneku_sp;
		animation-duration: 1s;
	}
}*/
@media (max-width: 768px) {
	.home #wrapper,
	.home #bg_right::after,
	.home #bg_left::after{
		background-position: center 13vw;
	}
	.home .infoBox {
		padding-top: 87vw;
	}
}


/*
load
----------------------------------------------------------------*/
.load_logo{
	padding-top: 0;
}

@keyframes topneku {
  0% {
    background-position: top -5vw center, top center;
  }
  100% {
    background-position: top center, top  center;
  }
}
@keyframes topneku_sp {
  0% {
    background-position: center 5vw, center 11vw;
  }
  100% {
    background-position: center 11vw, center 11vw;
  }
}


/*
Copy
----------------------------------------------------------------*/

.home .mainCopy{
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}
.home .mainCopyR,
.home .mainCopyL,
.home .mainCopyB{
	animation-name: mainCopy;
    animation-duration: 3.5s;
	animation-timing-function: ease-out;
	width: auto;
	transition: 0.5s;
}
.home .mainCopyR{
	position: fixed;
	right: 1.5vw;
	max-height: 100vh;
	height: 38vw;
}
.home .mainCopyL{
	position: fixed;
	left: 3vw;
	max-height: 100vh;
	height: 30vw;
}
.home .mainCopyB{
	position: fixed;
	max-width: calc(100% - 5vw);
	width: 80vw;
	left: 50%;
	transform: translateX(-50%);
	height: auto;
}
.home .mainCopy img{
	animation-name: mainCopy;
    animation-duration: 3.5s;
	animation-timing-function: ease-out;
}
@keyframes mainCopy{
	0%{
		opacity: 0;
	}
	50%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
@media (max-width: 1100px) {
	.home .mainCopy{
		width: 40vw;
	}
}
@media (max-width: 768px) {
	.home .mainCopyB{
		position: fixed;
		max-width: calc(100% - 5vw);
		width: 95vw;
		left: 50%;
		transform: translateX(-50%);
		height: auto;
	}
}