@charset "UTF-8";

/* =========================================================================================================================================

スタイルシート横幅：1501pxから

========================================================================================================================================= */
@media screen and (min-width: 1501px) {
img{
    max-width: 100%;
    height: auto;
    width /***/:auto;
    border: 0px;
}
#container{
    width:100%;
}
#a9,#a10 {
    display: none;
}
#a1 {
    height: auto;
    min-height: 100vh;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
}
.a7 {
    width: 100%;
    position: absolute;
}
.a7 img {
    width: 100%;
    height: auto;
    opacity:0;
    -moz-animation: imgTrans 40s infinite; /*トータル40秒になるように*/
    -webkit-animation: imgTrans 40s ease-in infinite; /*トータル40秒になるように*/
    animation: imgTrans 40s infinite; /*トータル40秒になるように*/
}
#a2 img {
    -moz-animation-delay: 0s;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}
#a3 img {
    -moz-animation-delay: 8s; /*8秒後にアニメーション*/
    -webkit-animation-delay: 8s;
    animation-delay: 8s;
}
#a4 img {
    -moz-animation-delay: 16s; /*16秒後にアニメーション*/
    -webkit-animation-delay: 16s;
    animation-delay: 16s;
}
#a5 img{
    -moz-animation-delay: 24s; /*24秒後にアニメーション*/
    -webkit-animation-delay: 24s;
    animation-delay: 24s;
}
#a6 img {
    -moz-animation-delay: 32s; /*32秒後にアニメーション*/
    -webkit-animation-delay: 32s;
    animation-delay: 32s;
}
@-webkit-keyframes imgTrans {
0% { opacity:0; }
7% { opacity:1; }
18% { opacity:1; }
25% { opacity:0;transform: scale(1.2) ; }
100% { opacity:0; }
}
@-moz-keyframes imgTrans {
0% { opacity:0; }
7% { opacity:1; }
18% { opacity:1; }
25% { opacity:0;transform: scale(1.2) ; }
100% { opacity:0; }
}
@keyframes imgTrans {
0% { opacity:0; }
7% { opacity:1; }
18% { opacity:1; }
25% { opacity:0;transform: scale(1.2) ; }
100% { opacity:0; }

}
}
/* =========================================================================================================================================

スタイルシート横幅：960pxから1500まで

========================================================================================================================================= */
@media screen and (min-width: 960px) and (max-width: 1500px){
img{
    max-width: 100%;
    height: auto;
    width /***/:auto;
    border: 0px;
}
#container{
    width:100%;
}
#a9,#a10 {
    display: none;
}
#a1 {
    height: auto;
    min-height: 100vh;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
}
.a7 {
    width: 100%;
    position: absolute;
}
.a7 img {
    width: 100%;
    height: auto;
    opacity:0;
    -moz-animation: imgTrans 40s infinite; /*トータル40秒になるように*/
    -webkit-animation: imgTrans 40s ease-in infinite; /*トータル40秒になるように*/
    animation: imgTrans 40s infinite; /*トータル40秒になるように*/
}
#a2 img {
    -moz-animation-delay: 0s;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}
#a3 img {
    -moz-animation-delay: 8s; /*8秒後にアニメーション*/
    -webkit-animation-delay: 8s;
    animation-delay: 8s;
}
#a4 img {
    -moz-animation-delay: 16s; /*16秒後にアニメーション*/
    -webkit-animation-delay: 16s;
    animation-delay: 16s;
}
#a5 img{
    -moz-animation-delay: 24s; /*24秒後にアニメーション*/
    -webkit-animation-delay: 24s;
    animation-delay: 24s;
}
#a6 img {
    -moz-animation-delay: 32s; /*32秒後にアニメーション*/
    -webkit-animation-delay: 32s;
    animation-delay: 32s;
}
@-webkit-keyframes imgTrans {
0% { opacity:0; }
7% { opacity:1; }
18% { opacity:1; }
25% { opacity:0;transform: scale(1.2) ; }
100% { opacity:0; }
}
@-moz-keyframes imgTrans {
0% { opacity:0; }
7% { opacity:1; }
18% { opacity:1; }
25% { opacity:0;transform: scale(1.2) ; }
100% { opacity:0; }
}
@keyframes imgTrans {
0% { opacity:0; }
7% { opacity:1; }
18% { opacity:1; }
25% { opacity:0;transform: scale(1.2) ; }
100% { opacity:0; }

}
}
/* =========================================================================================================================================

スタイルシート横幅：600pxから959まで

========================================================================================================================================= */

@media screen and (min-width: 600px) and (max-width: 959px){
img{
    width: 100%;
    height: auto;
    width /***/:auto;　
}
#container{
    width:100%;
}
#a8,#a10 {
    display: none;
}
#a1 {
    height: auto;
    min-height: 100vh;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
}
.a7 {
    width: 100%;
    position: absolute;
}
.a7 img {
    width: 100%;
    height: auto;
    opacity:0;
    -moz-animation: imgTrans 40s infinite; /*トータル40秒になるように*/
    -webkit-animation: imgTrans 40s ease-in infinite; /*トータル40秒になるように*/
    animation: imgTrans 40s infinite; /*トータル40秒になるように*/
}
#a2 img {
    -moz-animation-delay: 0s;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}
#a3 img {
    -moz-animation-delay: 8s; /*8秒後にアニメーション*/
    -webkit-animation-delay: 8s;
    animation-delay: 8s;
}
#a4 img {
    -moz-animation-delay: 16s; /*16秒後にアニメーション*/
    -webkit-animation-delay: 16s;
    animation-delay: 16s;
}
#a5 img{
    -moz-animation-delay: 24s; /*24秒後にアニメーション*/
    -webkit-animation-delay: 24s;
    animation-delay: 24s;
}
#a6 img {
    -moz-animation-delay: 32s; /*32秒後にアニメーション*/
    -webkit-animation-delay: 32s;
    animation-delay: 32s;
}
@-webkit-keyframes imgTrans {
0% { opacity:0; }
7% { opacity:1; }
18% { opacity:1; }
25% { opacity:0;transform: scale(1.2) ; }
100% { opacity:0; }
}
@-moz-keyframes imgTrans {
0% { opacity:0; }
7% { opacity:1; }
18% { opacity:1; }
25% { opacity:0;transform: scale(1.2) ; }
100% { opacity:0; }
}
@keyframes imgTrans {
0% { opacity:0; }
7% { opacity:1; }
18% { opacity:1; }
25% { opacity:0;transform: scale(1.2) ; }
100% { opacity:0; }

}


}

/* =========================================================================================================================================

スタイルシート横幅：599pxまで

========================================================================================================================================= */
@media only screen and (max-width:599px){
img{
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    width/***/:auto;
}
#container{
    width:100%;
}
#a8,#a9 {
    display: none;
}
#a1 {
    height: auto;
    min-height: 100vh;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
}
.a7 {
    width: 100%;
    position: absolute;
}
.a7 img {
    width: 100%;
    height: auto;
    opacity:0;
    -moz-animation: imgTrans 40s infinite; /*トータル40秒になるように*/
    -webkit-animation: imgTrans 40s ease-in infinite; /*トータル40秒になるように*/
    animation: imgTrans 40s infinite; /*トータル40秒になるように*/
}
#a2 img {
    -moz-animation-delay: 0s;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}
#a3 img {
    -moz-animation-delay: 8s; /*8秒後にアニメーション*/
    -webkit-animation-delay: 8s;
    animation-delay: 8s;
}
#a4 img {
    -moz-animation-delay: 16s; /*16秒後にアニメーション*/
    -webkit-animation-delay: 16s;
    animation-delay: 16s;
}
#a5 img{
    -moz-animation-delay: 24s; /*24秒後にアニメーション*/
    -webkit-animation-delay: 24s;
    animation-delay: 24s;
}
#a6 img {
    -moz-animation-delay: 32s; /*32秒後にアニメーション*/
    -webkit-animation-delay: 32s;
    animation-delay: 32s;
}
#a10 {
    height: 100vh;
    overflow: hidden;
}
@-webkit-keyframes imgTrans {
0% { opacity:0; }
7% { opacity:1; }
18% { opacity:1; }
25% { opacity:0;transform: scale(1.2) ; }
100% { opacity:0; }
}
@-moz-keyframes imgTrans {
0% { opacity:0; }
7% { opacity:1; }
18% { opacity:1; }
25% { opacity:0;transform: scale(1.2) ; }
100% { opacity:0; }
}
@keyframes imgTrans {
0% { opacity:0; }
7% { opacity:1; }
18% { opacity:1; }
25% { opacity:0;transform: scale(1.2) ; }
100% { opacity:0; }

}


}