/*
//////////////////////////////////////////////////////

2025 HTML5 by OrangeWorks

//////////////////////////////////////////////////////
*/


/* ================ トップ背景画像でのズームスライドショー ================ */

		.ZoomSlide{
		  width: 100%;
				height: auto;
				z-index: 0;
		}
		 
		 
		.ZoomSlide .SImg{
		  width: 100%;
				height: auto;
    position: absolute;
    color: transparent;
    background-size: cover;
		  background-repeat: no-repeat;
		  background-position: center center;
    opacity: 0;
    z-index: 0;
　　-webkit-backface-visibility: hidden;
    -webkit-animation: ImgAnime 20s linear infinite 0s;
    -moz-animation: ImgAnime 20s linear infinite 0s;
    -o-animation: ImgAnime 20s linear infinite 0s;
    -ms-animation: ImgAnime 20s linear infinite 0s;
    animation: ImgAnime 20s linear infinite 0s;
			}
 
 
			.ZoomSlide .SImg:nth-child(1) {
							background-image: url(../images/slider01.jpg) }
							background-size:contain;
			 
			.ZoomSlide .SImg:nth-child(2){
			    background-image: url(../images/slider02.jpg);
							background-size:contain;
			    -webkit-animation-delay: 5s;
			    -moz-animation-delay: 5s;
			    -o-animation-delay: 5s;
			    -ms-animation-delay: 5s;
			    animation-delay: 5s;
			}
			.ZoomSlide .SImg:nth-child(3){
			    background-image: url(../images/slider03.jpg);
							background-size:contain;
			    -webkit-animation-delay: 10s;
			    -moz-animation-delay: 10s;
			    -o-animation-delay: 10s;
			    -ms-animation-delay: 10s;
			    animation-delay: 10s;
			}

			 
			@keyframes ImgAnime { 
			    0% {
			        opacity: 0;
			        animation-timing-function: ease-in;
			    }
			    10% {
			        opacity: 1;
			        transform: scale(1.05);
			        animation-timing-function: ease-out;
			    }
			    15% {
			        opacity: 1;
			        transform: scale(1.07);
			    }
			    20% {
			        opacity: 1;
			        transform: scale(1.1);
			    }
			    25% {
			        opacity: 0;
			        transform: scale(1.1);
			    }
			    100% { opacity: 0 }
			}




/* ================ トップ背景画像でのスライドショー ================ */


/* スライダー全体 */
.slider{
  position: relative;
		margin: 0px 0px 0 0px;  /* マージン（上右下左） */
  padding-top: 45.0%; /* 画像の高さ÷画像の横幅（+1%大きい方がいい）*/
	 top: 0px;
  left: 0;
  overflow: hidden;
  width: 100%;
  height: 0;
  background-image: url(../images/slider01.jpg) no-repeat center center;
		background-size:contain;
}

/* スライダー画像 */
.slider .image{
  position: absolute;  /* 画像を重ねるので絶対 */
	 z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  background-repeat: no-repeat;
  background-position: center center;
}

/*
  �@スライド画像
  表示する画像を定義
*/
.slider .image:nth-of-type(1){
  background-image: url(../images/slider01.jpg);
		background-size:contain;
}
.slider .image:nth-of-type(2){
  animation-delay: 10s;  /* 表示する秒数 */
  background-image: url(../images/slider02.jpg);
		background-size:contain;
}
.slider .image:nth-of-type(3){
  animation-delay: 20s;  /* 表示する秒数 */
  background-image: url(../images/slider03.jpg);
		background-size:contain;
}

/*
  �Aアニメーション設定
  animation-durationのみ変更
*/
.slider .image{
  animation-name: ImgAnime;
  animation-delay: 0;
  animation-iteration-count: infinite; /* 無限ループ「infinite」 */
  animation-duration: 30s;  /* �@で設定したanimation-delayを合計を挿入 */
}

/* アニメーション定義 */

			@keyframes ImgAnime { 
			    0% {
			        opacity: 0;
			        animation-timing-function: ease-in;
			    }
			    5% {
			        opacity: 1;
			        transform: scale(1.05);
			        animation-timing-function: ease-out;
			    }
			    25% {
			        opacity: 1;
			        transform: scale(1.15);
			    }
			    40% {
			        opacity: 0;
			        transform: scale(1.18);
			    }
			    100% { opacity: 0 }
			}


/* ================ 画像でのスライドショー ================ */


div.slide-show {
width: 100%; /* スライドショーの幅 */
max-width: 100%; /* スマホで表示が欠けないように */
position: relative;
margin: 0px 0px 0 0px;  /* マージン（上右下左） */
}

.slide-show img {
animation: show 12s infinite; /* 12秒のスライドショーを繰り返し */
max-width: 100%;
height: auto;
opacity: 0;
position: absolute; /* 画像を重ねて表示 */
left: 0;
top: 0;
}

@keyframes show {
0% {opacity: 0}
17% {opacity: 1}
33% {opacity: 1}
50% {opacity: 0}
}

.slide-show img:nth-of-type(1) {
position: relative;
}

.slide-show img:nth-of-type(2) {
animation-delay: 0s;
}

.slide-show img:nth-of-type(3) {
animation-delay: 4s;
}

.slide-show img:nth-of-type(4) {
animation-delay: 8s;
}

.resizeimage img { width: 100vw; }