@charset 'UTF-8';

.kvTop {
position: relative;
padding: 0 0 0;
min-height: 736px;
z-index: 2;
background-color: #000000;
}

.kvTop:after {
content: '';
position: absolute;
left: 0;
bottom: -392px;
width: 100%;
height: 717px;
background: url("/ja/assets/img/bg_main_04.png") no-repeat center;
}

.kvTop h1 {
position: relative;
max-width: 1040px;
margin: 0 auto 45px;
padding: 215px 20px 0;
color: #fff;
font-size: 80px;
font-weight: bold;
line-height: 1.17;
box-sizing: border-box;
}

.kvTop p {
position: relative;
max-width: 1040px;
margin: 0 auto;
padding: 0 20px;
color: #fff;
font-size: 18px;
font-weight: bold;
letter-spacing: 5px;
box-sizing: border-box;
}

.kvTop .bgImg {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
opacity: 0;
min-height: 736px;
animation: bgAnime 20s infinite;   /* 4画像 × 各5s = 20s */
-webkit-animation: bgAnime 20s infinite;
}

.kvTop .src1 {
  background : url("/ja/assets/img/bg_main_01_1st.png") no-repeat center;   /* 背景の画像を指定 */
}
.kvTop .src2 {
  background : url("/ja/assets/img/bg_main_01_2nd.png") no-repeat center;   /* 背景の画像を指定 */
  animation-delay  : 5s;
}
.kvTop .src3 {
  background : url("/ja/assets/img/bg_main_01_3rd.png") no-repeat center;   /* 背景の画像を指定 */
  animation-delay  : 10s;
}
.kvTop .src4 {
  background : url("/ja/assets/img/bg_main_01_4th.png") no-repeat center;   /* 背景の画像を指定 */
  animation-delay  : 15s;
}

@keyframes bgAnime {
   0% { opacity: 0; }
   5% { opacity: 1; } 
  25% { opacity: 1; } 
  30% { opacity: 0; } 
 100% { opacity: 0; } 
}


@media screen and (max-width: 750px) {
	
.kvTop {
position: relative;
width: 100%;
padding: 30vw 0 0;
background : url("/ja/assets/img/bg_main_01_sp_0th.png") no-repeat center;   /* 背景の画像を指定 */
background-size: cover;
min-height: 89.6vw;
box-sizing: border-box;
z-index: 2;
}

.kvTop:after {
display: none;
}

.kvTop h1 {
position: relative;
width: 73.33%;
max-width: inherit;
margin: 0 auto 5vw;
padding: 0;
color: #fff;
font-size: 9.9vw;
font-weight: bold;
line-height: 1.17;
box-sizing: border-box;
}

.kvTop p {
position: relative;
width: 73.33%;
max-width: inherit;
margin: 0 auto;
padding: 0;
color: #fff;
font-size: 2.66vw;
font-weight: bold;
letter-spacing: 2px;
box-sizing: border-box;
}	
	
.kvTop .bgImg {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
opacity: 0;
background-size: cover;
min-height:  89.6vw;
animation: bgAnime 20s infinite;   /* 4画像 × 各5s = 20s */
-webkit-animation: bgAnime 20s infinite;
}	
	
.kvTop .src1 {
background : url("/ja/assets/img/bg_main_01_sp_1st.png") no-repeat center;   /* 背景の画像を指定 */
background-size: cover;
min-height:  89.6vw;
}
.kvTop .src2 {
background : url("/ja/assets/img/bg_main_01_sp_2nd.png") no-repeat center;   /* 背景の画像を指定 */
background-size: cover;
min-height:  89.6vw;
animation-delay  : 5s;
}
.kvTop .src3 {
background : url("/ja/assets/img/bg_main_01_sp_3rd.png") no-repeat center;   /* 背景の画像を指定 */
background-size: cover;
min-height:  89.6vw;
animation-delay  : 10s;
}
.kvTop .src4 {
background : url("/ja/assets/img/bg_main_01_sp_4th.png") no-repeat center;   /* 背景の画像を指定 */
background-size: cover;
min-height:  89.6vw;
animation-delay  : 15s;
}
	

}