/*
	ズームイン・アウトするスライドショー
		参考URL：https://www.esz.co.jp/blog/185.html
*/

/*
	スライドショーの設定（高さや幅）
*/
.zoomSlideShow_box {
	height: 100vh;
    overflow: hidden;
    position: relative;
}

/*
	スライドショーの中身の設定
*/
.zoomSlideShow_box .zoomSlideShow_img {
    z-index: 1;
    opacity: 0;		/* 初期値0必須 */
    width: 100%;
    height: 100vh;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-animation: anime 24s 0s infinite;
    animation: zoomSlideAnime 24s 0s infinite;		/* アニメーションの名前をzoomSlideAnimeと定義 */
}


/*
	画像を順番に表示する設定
		6s = 6秒
*/
.zoomSlideShow_box .zoomSlideShow_img:nth-of-type(2) {
	-webkit-animation-delay: 6s;
	animation-delay: 6s;
}

.zoomSlideShow_box .zoomSlideShow_img:nth-of-type(3) {
	-webkit-animation-delay: 12s;
	animation-delay: 12s;
}

.zoomSlideShow_box .zoomSlideShow_img:nth-of-type(4) {
	-webkit-animation-delay: 18s;
	animation-delay: 18s;
}

/*
	アニメーションの設定
		opacity: 0 or 1で、表示・非表示の変更。
		transform: scale(1.2)で、画像サイズの変更。（1.2の場合、1.2倍までズーム）
		
		0%, 8%, 17%, 25%, 100%について
			１つの画像が6秒表示、画像数6枚ある場合、全体として6秒 × 6枚 = 36秒となる。
			
			１つの画像が6秒表示の場合、
				（１）最初の3秒でフェードイン
				（２）次の3秒で表示
				（３）次の3秒でフェードアウト　※ここで次の画像の(１)が始まる
			
			その場合、
				（１）が全体に占める割合は、3秒 ÷ 36秒 = 0.0833・・・	= 8％
				（２）が全体に占める割合は、6秒 ÷ 36秒 = 0.1666・・・	= 17％
				（３）が全体に占める割合は、9秒 ÷ 36秒 = 0.25					= 25％
			
			１つの画像を何秒表示するか ＆ 全体で何枚画像を表示するかで設定が必要			
*/
/*@keyframes zoomSlideAnime {
	0% {
		opacity: 0; 
		transform: scale(1.0);
	}
	13% {opacity: 1; }
	25% {opacity: 1; }
	38% {
		opacity: 0;
		transform: scale(1.2);
		z-index:9;
	}
	100% { opacity: 0; }
}
 */
 
 @keyframes zoomSlideAnime {
	0% {
		opacity: 0; 
		transform: scale(1.2);
	}
	13% {opacity: 1; }
	25% {opacity: 1; }
	38% {
		opacity: 0;
		transform: scale(1.0);
		z-index:9;
	}
	100% { opacity: 0; }
}
 
/* --------------------
    画面中央枠
	    主にロゴ・文字列を表示
-------------------- */

.topArea .middle-box {
  position: absolute;
  top: 50%;
  left: 25%;
  -webkit-transform: translateY(-50%) translateX(-50%);
  -moz-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
  z-index: 99;
}



/* ロゴ画像 */
.topArea .middle-box .img-box {
    display: table-cell;
    margin-left: auto;
    margin-right: auto;
    width: 700px;
    z-index: 1;
}

/* ロゴ画像の下のメッセージ 
.topArea .middle-box .text-box {
    font-size: 36px;
    font-weight: bold;
    line-height: 1.2;
    text-align: center;
    color: #ffffff;
    z-index: 99;
}
 */


/* スマートフォン対応 */
@media (max-width: 580px) and (orientation: portrait) {
.topArea .middle-box {
	/* ロゴ画像の大枠 */
    width: 90%;
    left: 36%;
}

.zoomSlideShow_box {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 60vh;
}
.zoomSlideShow_box .zoomSlideShow_img {
    object-fit: cover;
    width: 100%;
    height: 60vh;
}
.topArea .middle-box .img-box {
    width: 100%;
    height: 100%;
}
}


/* スマートフォン縦 */
@media screen and (max-width:767px) and (orientation: portrait) {
.topArea .middle-box .text-box {
    font-size: 26px;
}
}