@charset "utf-8";


/*CSSスライドショー設定
---------------------------------------------------------------------------*/
/*１枚目*/
@keyframes slide1 {
	0% {opacity: 0;}
	10% {opacity: 1;}
	30% {opacity: 1;}
	40% {opacity: 0;}
	100% {opacity: 0;}
}
/*２枚目*/
@keyframes slide2 {
	0% {opacity: 0;}
	20% {opacity: 0;}
	30% {opacity: 1;}
	60% {opacity: 1;}
	70% {opacity: 0;}
	100% {opacity: 0;}
}
/*３枚目*/
@keyframes slide3 {
	0% {opacity: 0;}
	50% {opacity: 0;}
	60% {opacity: 1;}
	85% {opacity: 1;}
	95% {opacity: 0;}
	100% {opacity: 0;}
}

/*mainimg
---------------------------------------------------------------------------*/
/*画像ブロック*/
#mainimg {
 clear: left;
 width: 100%;
 margin: 0 auto;
 position:absolute;
 top:0; 
 /*top: -165px;*/
  -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
  box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
 z-index:0;}

/*３枚画像の共通設定*/
#slide1,#slide2,#slide3 {
 -webkit-animation-duration: 15s;
  animation-duration: 15s;
 -webkit-animation-iteration-count:infinite;
  animation-iteration-count:infinite;
 position: absolute;
 left:0px;
 top:0px;
 width: 100%;
 height: auto;
 -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
 -webkit-animation-delay: 2s;
  animation-delay: 2s;}

/*土台画像*/
#slide0 {
 position: relative;
 width: 100%;
 height: auto;}

/*1*/
#slide1 {
 -webkit-animation-name: slide1;
  animation-name: slide1;}

/*2*/
#slide2 {
 -webkit-animation-name: slide2;
  animation-name: slide2;}

/*3*/
#slide3 {
 -webkit-animation-name: slide3;
  animation-name: slide3;}

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

/*画像ブロック。
そのままの設定を引き継ぐと小さな端末で見た場合にロゴが画像より下側に
はみ出る場合があるので、一旦幅を150%にして中央のみ切り抜いています。
---------------------------------------------------------------------------*/
#mainimg {
 width: 150%;
 left: -25%;}
}