@charset "utf-8";
/* CSS Document */
*{margin: 0;
}
wrapper{
width: 80%;	
}
img{
max-width: 100%;
height:auto;}
header
{background-color: #ffd700;
width:100vw;
height:auto;}
footer{
background-image: url("img/back.jpg");
width: 100vw;
height: auto;
text-align: center;
padding: 20px 0;	
}
.title{
background-color: #ccc;
width: 100%;
text-align: center;
}
h2 {
position: relative;
display: inline-block;
background-color: #ccc;
text-align: center;	
}

/*　背景画像設定　*/
.slider {
    position: absolute;
    z-index: 1;
    /*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
    height: 50vh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
	
}
.slider-item01 {
    background:url("img/top1.jpg");
}

.slider-item02 {
    background:url("img/top1_1.jpg");
}


.slider-item {
    width: 100%;
	height: 50vh;
    background-repeat: no-repeat;/*背景画像をリピートしない*/
    background-position: center;/*背景画像の位置を中央に*/
    background-size: cover;/*背景画像が.slider-item全体を覆い表示*/
}

 .label_left{
   display: inline-block;
   width:50%;
   border-left: solid 5px #FF8E00;
   padding-left: 15px;
   vertical-align:top;
   margin-top: 20px;
 }
 
.form input[type="text"], 
.form input[type="email"]  {
     padding: 10px;
     width: 65%;
 }

.form textarea{
   padding: 10px;
   height: 100px;
   font-size: 14px;
   width: 65%;
 }

.form input[type="submit"],
.form input[type="button"]{
   background: #5250e0;
   color: white;
   font-size:16px;
   font-weight:bold;
   padding: 10px 20px;
   margin: 0 5px;
 }

.img-frame{
   position: relative;
   width: 70%;
   height: 300px;
   overflow: hidden;
   margin: 0 auto;
}
@media screen{
.img-frame{
margin-top: 20px;
width: 90%;
height: 40vh;
}
.img-01, .img-02, .img-03{
   position: absolute;
   top:0;
   left:0;
   width: 100%;
   height: 100%;
   background-size: cover;
   background-repeat: no-repeat;
}
.img-01{
background-position: center;
background-image: url('img/slide1.jpg');
animation: slide-animation-01 20s infinite;
}
.img-02{
background-position: center;
background-image: url('img/slide2.jpg');
animation: slide-animation-02 20s infinite;
}
.img-03{
background-position: center;
background-image: url('img/slide3.jpg');
animation: slide-animation-03 20s infinite;
}
.msg1{
   font-size: 2.5em;
   color: #fff;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50% , -50%);
}
.msg2{
   font-size: 2.5em;
   color: #fff;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50% , -50%);
}
.msg3{
   font-size: 2.5em;
   color: #fff;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50% , -50%);
}	
.msg-01, .msg-02{
    text-shadow: 2px 2px 3px #000, -1px -1px 3px #000;
}
.img-03.cover::after{
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, .7);
}
.msg-03{
   z-index:1;
	}}	
@keyframes slide-animation-01 {
    0% {opacity: 1; transform: scale(1.0);}
  30% {opacity: 1;}
  40% {opacity: 0; transform: scale(1.15);}
  90% {opacity: 0}
100% {opacity: 1; transform: scale(1.0);}
}
@keyframes slide-animation-02 {
    0% {opacity: 0;}
  30% {opacity: 0; transform: scale(1.1);}
  40% {opacity: 1;}
  60% {opacity: 1;}
  70% {opacity: 0; transform: scale(1.0);}
100% {opacity: 0;}
}
@keyframes slide-animation-03 {
    0% {opacity: 0;}
  60% {opacity: 0;  transform: scale(1.0);}
  70% {opacity: 1;}
  90% {opacity: 1;}
100% {opacity: 0; transform: scale(1.1);}
}
@keyframes gnaviAnime{
0% {
opacity: 0;
}
100% {
opacity: 1;
}

}