@charset "utf-8";
.img-frame{
position: relative;
width: 1261px;
height: 442px;
overflow: hidden;
margin: 0 auto;
background-color: #000;	
margin-top: 20vw;	
}

/*追加
-------------------------------------*/
.img-frame2{
position: relative;
width: 100%;
height: 520px;
object-fit: cover;	
overflow: hidden;
margin: 0 auto;
background-color: #000;
margin-top: -10vw;	
	
}


.img-11, .img-12, .img-13{
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
}

.img-14, .img-15, .img-16{
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
}

.img-17{
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
}

.img-11{
background-image: url('../images/index/img_slide11.jpg');
animation: slide-animation-01 24s infinite;
}
.img-12{
background-image: url('../images/index/img_slide12.jpg');
animation: slide-animation-02 24s infinite;
}
.img-13{
background-image: url('../images/index/img_slide13.jpg');
animation: slide-animation-03 24s infinite;
}
.img-14{
background-image: url('../images/index/img_slide14.jpg');
animation: slide-animation-04 24s infinite;
}
.img-15{
background-image: url('../images/index/img_slide15.jpg');
animation: slide-animation-05 24s infinite;
}
.img-16{
background-image: url('../images/index/img_slide16.jpg');
animation: slide-animation-06 24s infinite;
}
.img-17{
background-image: url('../images/index/img_slide17.jpg');
animation: slide-animation-07 24s infinite;
}

/*追加
-------------------------------------*/


.img-01, .img-02, .img-03{
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
}

.img-04, .img-05, .img-06{
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
}

.img-07{
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
}

.img-01{
background-image: url('../images/index/img_slide00.png');
animation: slide-animation-01 24s infinite;
}
.img-02{
background-image: url('../images/index/img_slide01.png');
animation: slide-animation-02 24s infinite;
}
.img-03{
background-image: url('../images/index/img_slide02.png');
animation: slide-animation-03 24s infinite;
}

.img-04{
background-image: url('../images/index/img_slide03.png');
animation: slide-animation-04 24s infinite;
}
.img-05{
background-image: url('../images/index/img_slide04.png');
animation: slide-animation-05 24s infinite;
}
.img-06{
background-image: url('../images/index/img_slide05.png');
animation: slide-animation-06 24s infinite;
}

.img-07{
background-image: url('../images/index/img_slide06.png');
animation: slide-animation-07 24s infinite;
}

@keyframes slide-animation-01 {
0% {opacity: 0;}
5% {opacity: 1;}
15% {opacity: 1;}
20% {opacity: 0;}
100% {opacity: 0;}
}
@keyframes slide-animation-02 {
0% {opacity: 0;}
15% {opacity: 0;}
20% {opacity: 1;}
30% {opacity: 1;}
35% {opacity: 0;}
100% {opacity: 0;}
}
@keyframes slide-animation-03 {
0% {opacity: 0;}
30% {opacity: 0;}
35% {opacity: 1;}
45% {opacity: 1;}
50% {opacity: 0;}
100% {opacity: 0;}
}
@keyframes slide-animation-04 {
0% {opacity: 0;}
45% {opacity: 0;}
50% {opacity: 1;}
60% {opacity: 1;}
65% {opacity: 0;}
100% {opacity: 0;}
}

@keyframes slide-animation-05 {
0% {opacity: 0;}
60% {opacity: 0;}
65% {opacity: 1;}
75% {opacity: 1;}
100% {opacity: 0;}
}

@keyframes slide-animation-06 {
0% {opacity: 0;}
75% {opacity: 0;}
80% {opacity: 1;}
90% {opacity: 1;}
100% {opacity: 0;}
}

@keyframes slide-animation-07 {
0% {opacity: 0;}
90% {opacity: 0;}
95% {opacity: 1;}
100% {opacity: 1;}
}

@media screen and (max-width: 979px) {
	
#mainImg:after {
    background: url(../images/cmn/bg_jagged_sp.png) repeat-x center; 
    height: 34px; 
    bottom: 0px;
}	
.img-frame{
position: relative;
width: 100%;
height: 270px;
overflow: hidden;
background-color: #000;
margin-top: -5vw	
}
.img-01, .img-02, .img-03{
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
	
}

.img-04, .img-05, .img-06{
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;

}

.img-07{
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
	
}		
}

@media screen and (max-width: 519px) {
.img-frame{
position: relative;
width: 100%;
height: 140px;
overflow: hidden;
margin: 0 auto;
background-color: #000;
margin-top: 15vw;
    

}
	

.img-01, .img-02, .img-03{
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
	
}

.img-04, .img-05, .img-06{
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
	
}

.img-07{
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
	
}	
}