@charset "utf-8";


/*CSSスライドショー設定
---------------------------------------------------------------------------*/
/*１枚目*/
@keyframes slide1 {
	0% {opacity: 0; transform: scale(1);}
	10% {opacity: 1;}
	40% {transform: scale(1.05);}
	50% {opacity: 1;}
	60% {opacity: 0;}
	100% {opacity: 0;}
}
/*２枚目*/
@keyframes slide2 {
	0% {opacity: 0;}
	25% {opacity: 0; transform: scale(1);}
	35% {opacity: 1;}
	65% {transform: scale(1.05);}
	75% {opacity: 1;}
	85% {opacity: 0;}
	100% {opacity: 0;}
}
/*３枚目*/
@keyframes slide3 {
	0% {opacity: 0;}
	50% {opacity: 0; transform: scale(1);}
	60% {opacity: 1;}
	80% {opacity: 1;}
	90% {opacity: 0; transform: scale(1.05);}
	100% {opacity: 0;}
}

/*mainimg------------------------------------------------------*/
/*画像ブロック*/
#mainimg, #subimg {
	clear: both;
	max-width: 1500px;
	/*style.cssの「#container」と設定と合わせる*/
	overflow: hidden;
	margin: 64px auto;
	position: absolute;
}
/*subimgブロックの画像*/
#subimg img { 	width: 100%;}

#mainimg-s {display: none !important;}



/*３枚画像の共通設定*/
.slide1,.slide2,.slide3 {
	animation-duration: 20s; /*実行する時間「s」は秒の事*/
	animation-iteration-count:infinite;
	/*実行する回数「infinite」は無限に繰り返す意味。*/
	position: absolute;left:0px;top:0px;
	width: 100%;
	height: auto;
	animation-fill-mode: both;
	animation-timing-function: linear;
	animation-delay: 1s;
}
/*土台画像*/
.slide0 {position: relative;width: 100%;height: auto;}
/*１枚目*/
.slide1 {
animation-name: slide1;	/*上で設定しているキーフレーム（keyframes）の名前*/
}
/*２枚目*/
.slide2 {
animation-name: slide2;/*上で設定しているキーフレーム（keyframes）の名前*/
}
/*３枚目*/
.slide3 {
animation-name: slide3;	/*上で設定しているキーフレーム（keyframes）の名前*/
}




/*スライド上のテキスト---------------------------------------*/
.slidetitle p.slidemain {
	position: absolute;
	top: 15%;
	left: 30%;
	-ms-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	margin:0;
	padding:10px;
	color: #FFF;
	font-weight: bold; 
	font-size: 1.3em;
	text-shadow: 1px 2px 3px #696969; 
	background-color: rgba( 143,188,143, 0.55 );
	border-radius: 0.8em;
  }

.slidetitle h2 {
	position: absolute;
	top: 80%;
	left: 45%;
	-ms-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	margin:	10px;
	padding:0;
	color: #2e8b57;
	font-weight: bold; 
	font-size: 2.8em;
	line-height: 1.2em;
	text-shadow: 2px 2px 0 #FFF, -2px -2px 0 #FFF,
              -2px 2px 0 #FFF, 2px -2px 0 #FFF,
              0px 2px 0 #FFF,  0 -2px 0 #FFF,
              -2px 0 0 #FFF, 2px 0 0 #FFF;
	width:80%;
  }

.slidetitle h3 {
	position: absolute;
	top: 70%;
	left: 45%;
	-ms-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	margin:	10px;
	padding:0;
	color: #FFF;
	font-weight: bold; 
	font-size: 2.5em;
	line-height: 1.2em;
	text-shadow: 1px 2px 3px #000; 
	width:80%;
}

.slidetitle h3 a{
	text-decoration: none;
	color: #ffff00;
}

.slidetitle h3 span{
	color: #add8e6;
	font-size: 70%;
	display: block;
}

.slidetitle h3 span a{	color: #add8e6;}


.slidebutton{
    position: absolute;
    bottom: 3%;
    right: 5%;
}


/*スライド上のテキスト---------------------------------------*/
.remoteslide p {
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	margin:0;
	padding:10px;
	color: #000;
	font-size: 1em; 
	width:80%;
  }
.remoteslide strong {line-height: 1.3em;}

.remoteslide a.btn1, a.btn2 { padding: 5px 20px 5px 30px; }


/*画面幅1300px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:1300px){

#mainimg, #subimg {	margin: 50px auto;}

.slidetitle p.slidemain { font-size: 18px; top: 20%; left: 30%;}

.slidetitle h2 {font-size: 2.5em;}

.slidebutton{ width:20%; bottom: 3%; right: 3%;}

}



/*画面幅1040px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:1040px){

.slidetitle p.slidemain { font-size: 15px; top: 20%; left: 35%;}

.slidetitle h2 {font-size: 2em;}

.slidebutton{ width:20%; bottom: 3%; right: 3%;}

}



/*画面幅800px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:800px){

#mainimg {display: none !important;}
#mainimg-s { display: block !important;}
#subimg {margin: 0;}

}