@charset "utf-8";

/* ========HEADIMAGE CUSTOMIZE======== */
#slide {
    position:relative;
    overflow:hidden;
    padding-bottom:25px;
}

.slidePrev {
    position:absolute;
    cursor:pointer;
    z-index:100;
}

.slideNext {
    position:absolute;
    cursor:pointer;
    z-index:100;
}

.slidePrev img {
    position:absolute;
    width:50px;
    height:60px;
}

.slideNext img {
    position:absolute;
    width:50px;
    height:60px;
}

.slideInner {
    position:relative;
    margin:0;
    padding:0;
}
.slideInner li {
    float:left;
    margin:0;
    padding:0;
    list-style:none;
}
.slideInner li img {
    margin:0 5px;
    padding:0;
}

.filterPrev {
    position:absolute;
    left:0;
    opacity:0.5;
    filter:alpha(opacity=50);
    background-color:#fff;
}

.filterNext {
    position:absolute;
    right:0;
    opacity:0.5;
    filter:alpha(opacity=50);
    background-color:#fff;
}

.controlNav {
      position:absolute;
      float:left;
      left:50%;
      bottom:0;
}
.controlNav span {
      position:relative;
      left:-50%;
      float:left;
      margin:5px;
      -webkit-border-radius:5px;
      -moz-border-radius:5px;
      border-radius:5px;
      width:10px;
      height:10px;
      overflow:hidden;
      -webkit-box-shadow:1px 1px 2px rgba(0, 0, 0, 0.5) inset;
      -moz-box-shadow:1px 1px 2px rgba(0, 0, 0, 0.5) inset;
      box-shadow:1px 1px 2px rgba(0, 0, 0, 0.5) inset;
      background:#eee;
      text-indent:-9999px;
      vertical-align:middle;
}
.controlNav span:hover {
      background:#ccc;
      cursor:pointer;
}
.controlNav span.current {
      -webkit-box-shadow:1px 1px 2px rgba(0, 0, 0, 0.5) inset, 0 0 2px rgba(133, 209, 198, 0.5);
      -moz-box-shadow:1px 1px 2px rgba(0, 0, 0, 0.5) inset, 0 0 2px rgba(133, 209, 198, 0.5);
      box-shadow:1px 1px 2px rgba(0, 0, 0, 0.5) inset, 0 0 2px rgba(133, 209, 198, 0.5);
      background:#85d1c6;
}

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

/*mainimg
---------------------------------------------------------------------------*/
/*画像ブロック*/
#mainimg {
	clear: left;
	width: 100%;
	position: relative;
	margin-bottom: 40px;
}
/*３枚画像の共通設定*/
#slide1,#slide2,#slide3 {
	-webkit-animation-duration: 15s;	/*実行する時間。「s」は秒の事。*/
	animation-duration: 15s;			/*同上*/
	-webkit-animation-iteration-count:infinite;	/*実行する回数。「infinite」は無限に繰り返す意味。*/
	animation-iteration-count:infinite;			/*同上*/
	position: absolute;left:0px;top:0px;width: 100%;height: auto;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	border-radius: 20px;	/*角丸のサイズ*/
}
/*土台画像*/
#slide0 {
	position: relative;width: 100%;height: auto;
	border-radius: 20px;	/*角丸のサイズ*/
}
/*１枚目*/
#slide1 {
	-webkit-animation-name: slide1;	/*上で設定しているキーフレーム（keyframes）の名前*/
	animation-name: slide1;			/*同上*/
}
/*２枚目*/
#slide2 {
	-webkit-animation-name: slide2;	/*上で設定しているキーフレーム（keyframes）の名前*/
	animation-name: slide2;			/*同上*/
}
/*３枚目*/
#slide3 {
	-webkit-animation-name: slide3;	/*上で設定しているキーフレーム（keyframes）の名前*/
	animation-name: slide3;			/*同上*/
}


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

/*mainimg
---------------------------------------------------------------------------*/
/*画像ブロック*/
#mainimg {
	margin-bottom: 20px;
}
/*３枚画像の共通設定*/
#slide1,#slide2,#slide3 {
	border-radius: 10px;	/*角丸のサイズ*/
}
/*土台画像*/
#slide0 {
	border-radius: 10px;	/*角丸のサイズ*/
}

}