@charset "utf-8";
/* CSS Document */

/* 複数画像切り替え --- */
.slider-container {
 position: relative;
 width: 100%;
 overflow: hidden;
}
.slideimg {
 position: absolute;
 inset: 0;/*親要素内にフルサイズで配置*/
 opacity: 0;
 background-size: cover;/* 画像をスライド全体にカバー */
 animation: slideAnime 20s infinite; /* 15秒で1サイクル */
 animation-duration: 20s;
}
@keyframes slideAnime {
 0%, 30%, 100% { opacity: 0; }/* スライドの非表示タイミング */
 10%, 20% { opacity: 1; }/* スライドの表示タイミング */
}
/* 各スライドのアニメーションタイミングを均等にずらす */
.slideimg:nth-of-type(1){
 background-image: url("../image/fade_image_01.png");
 animation-delay: 0s;
 background-position: 100%;
}
.slideimg:nth-of-type(2) {
 background-image: url("../image/fade_image_02.png");
 animation-delay: 4s;
 background-position: 10%;
}
.slideimg:nth-of-type(3) {
 background-image: url("../image/fade_image_03.png");
 animation-delay: 8s;
 background-position: 0%;
}
.slideimg:nth-of-type(4) {
 background-image: url("../image/fade_image_04.png");
 animation-delay: 12s;
 background-position: 60%;
}
.slideimg:nth-of-type(5) {
 background-image: url("../image/fade_image_05.png");
 animation-delay: 16s;
 background-position: 90%;
}

/* ブロック要素の比率を維持しながら可変 --- */
.banner {
position: relative;
overflow: hidden;
max-width: 100%;
height: 100%;
}
.banner:after {
position: absolute;
content: "";
display: block;
width: 100%;
height: 100%;
top: 0;
background: no-repeat url("../image/flier.png");
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
background-size: cover;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
transition: all .3s ease-out;
}
.banner:hover:after {
opacity: .8;
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
.banner a {
position: relative;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
height: 100%;
text-decoration: none;
color: #fff
}