@charset "utf-8";
/* CSS Document */

/* ズームのみ */
/* デザイン */
.zoomImageOuter {
	border-radius: 100%;
	height: 160px;
	margin: 65px auto 20px;
	position: relative;
	width: 160px;
}

/* 必須デザイン */
.zoomImageOuter {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	display: block;
	overflow: hidden;
}

.zoomImageOuter img {
	/*display: block;*/
	/*height: 100%;
	object-fit: cover;*/
	width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
}

/* :hoverに仕掛けるとズームの時のみの時間指定になってしまう */
.zoomImage {
	-moz-transition: -moz-transform 0.3s linear;
	-webkit-transition: -webkit-transform 0.3s linear;
	-o-transition: -o-transform 0.3s linear;
	-ms-transition: -ms-transform 0.3s linear;
	transition: transform 0.3s linear; /* ズームにかかるスピード */
}

/* 発火 */
.zoomImage:hover {
	-webkit-transform: scale(1.2);
	-moz-transform: scale(1.2);
	-o-transform: scale(1.2);
	-ms-transform: scale(1.2);
	transform: scale(1.2); /* X・Y軸 1.2倍にズーム scale(1.2,1.4) X:1.2倍、Y軸:1.4倍にズーム*/
}
/* END ズームのみ */


/* ぼんやり現れる vaguelyAppear */
/* アニメーションする部分は最初は透明にしておく */
.vaguelyAppear {
	opacity: 0;
}

@-webkit-keyframes vaguelyAppear {
	0% { opacity: 0; }
	100% { opacity: 1; }
}
@keyframes vaguelyAppear {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

.vaguelyAppear.active {
  animation: vaguelyAppear 1.0s ease forwards 0.5s;
}
/* END ぼんやり現れる vaguelyAppear */


/* 上から現れる overToDown */
/* アニメーションする部分は最初は透明にしておく */
.overToDown {
	opacity: 0;
}

@-webkit-keyframes overToDown {
	0% {
		-webkit-transform: translateY(-120px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateY(0);
		opacity: 1;
	}
}
@keyframes overToDown {
	0% {
		transform: translateY(-120px);
		opacity: 0;
	}
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

/*.overToDown.afterLoaded {
  -webkit-animation: overToDown 1.0s ease forwards 2.0s;
  animation: overToDown 1.0s ease forwards 2.0s;
}*/

.overToDown.active {
  -webkit-animation: overToDown 0.65s ease forwards 0.5s;
  animation: overToDown 0.65s ease forwards 0.5s;
}
/* END 上から現れる overToDown */


/* 下から現れる bottomToUp */
/* アニメーションする部分は最初は透明にしておく */
.bottomToUp {
	opacity: 0;
}

@-webkit-keyframes bottomToUp {
	0% {
		-webkit-transform: translateY(120px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateY(0);
		opacity: 1;
	}
}
@keyframes bottomToUp {
	0% {
		transform: translateY(120px);
		opacity: 0;
	}
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

.bottomToUp.active {
  -webkit-animation: bottomToUp 0.65s ease forwards 0.5s;
  animation: bottomToUp 0.65s ease forwards 0.5s;
}
/* END 下から現れる bottomToUp */


/* オンマウス時に画像の拡大、テキストのスライド SlideZoom */ 
/* デザイン */
.onZoom {
	line-height: 0;
}

.onSlideZoom {
	display: block;
	width: 100%;
}

.onSlideZoomInner {
	box-sizing: border-box;
	display: inline-block;
	height: 180px;
	margin: 10px auto;
	width: 30%;
}

.onSlideZoom a {
	color: #000;
	font-size: 18px;
	font-weight: bold;
}

/* 必須デザイン */
.onZoom {
	background-color: #960; /* オンマウス時の色 */
}

.onSlideZoomInner {
	overflow: hidden;
	position: relative;
}

.onSlide {
	position: absolute;
	top: 50%;
	left: 10%;
	z-index: 2;
}

/* スライド アニメーション */
.onSlideZoomInner .onSlide {
	-moz-transition: -moz-transform 0.1s linear;
	-webkit-transition: -webkit-transform 0.1s linear;
	-o-transition: -o-transform 0.1s linear;
	-ms-transition: -ms-transform 0.1s linear;
	transition: transform 0.1s linear; /* アニメーションにかかるスピード */
}

.onSlideZoomInner:hover .onSlide {
	-webkit-transform: translate(10px);
	-moz-transform: translate(10px);
	-ms-transform: translate(10px);
	-o-transform: translate(10px);
	transform: translate(10px); /* Y軸に移動 Ypx,Xpx でY・X軸の移動 */
}

/* ズームアップ アニメーション */
.onSlideZoomInner img {
	-moz-transition: -moz-transform 0.s linear;
	-webkit-transition: -webkit-transform 0.3s linear;
	-o-transition: -o-transform 0.3s linear;
	-ms-transition: -ms-transform 0.3s linear;
	transition: transform 0.3s linear; /* ズームにかかるスピード */
}

.onSlideZoomInner:hover img {
	opacity: 0.8; /* 透明度を設定し背景の色を見せる */
	-webkit-transform: scale(1.2);
	-moz-transform: scale(1.2);
	-o-transform: scale(1.2);
	-ms-transform: scale(1.2);
	transform: scale(1.2); /* X・Y軸 1.2倍にズーム scale(1.2,1.4) X:1.2倍、Y軸:1.4倍にズーム*/
}
/* END SlideZoom */


/* sideSlide */
/* leftSlide アニメーション */
/* アニメーションする部分は最初は透明にしておく */
.slideFromLeft {
	opacity: 0;
}

@-webkit-keyframes slideFromLeft {
	0% {
		-webkit-transform: translateX(-120px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateX(0);
		opacity: 1;
	}
}
@keyframes slideFromLeft {
	0% {
		transform: translateX(-120px);
		opacity: 0;
	}
	100% {
		transform: translateX(0);
		opacity: 1;
	}
}
/* END leftSlide アニメーション */

/* rightSlide アニメーション */
/* アニメーションする部分は最初は透明にしておく */
.slideFromRight {
	opacity: 0;
}

@-webkit-keyframes slideFromRight {
	0% {
		-webkit-transform: translateX(120px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateX(0);
		opacity: 1;
	}
}
@keyframes slideFromRight {
	0% {
		transform: translateX(120px);
		opacity: 0;
	}
	100% {
		transform: translateX(0);
		opacity: 1;
	}
}
/* END rightSlide アニメーション */

/* 発火 */
.slideFromLeft.active {
	-webkit-animation: slideFromLeft 0.65s ease forwards 0.5s;
	animation: slideFromLeft 0.65s ease forwards 0.5s;
}

.slideFromRight.active {
	-webkit-animation: slideFromRight 0.65s ease forwards 0.5s;
	animation: slideFromRight 0.65s ease forwards 0.5s;
}
/* END sideSlide */


/* バウンド bound */
/* デザイン */
.bound {
	border: 2px solid #666;
	border-radius: 100%;
	height: 200px;
	position: relative;
	text-align: center;
	width: 200px;
}

.boundInner {
	position: absolute;
	top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
	-moz-transform: translateY(-50%) translateX(-50%);
	-o-transform: translateY(-50%) translateX(-50%);
	-ms-transform: translateY(-50%) translateX(-50%);
}

/* アニメーション */
@keyframes bound {
	0%,10%,90%,100%{
		-moz-transform:translateY(0);
		-ms-transform:translateY(0);
		-webkit-transform:translateY(0);
		transform:translateY(0)
	}
	40%,60%{
		-moz-transform:translateY(-30px);
		-ms-transform:translateY(-30px);
		-webkit-transform:translateY(-30px);
		transform:translateY(-30px)
	}
}

/* 発火（常に動く） */
.bound {
  animation: bound 5s infinite;
}

/* END バウンド bound */

/* 横回転 */
/* アニメーション */
.top_prefecturmap .rotateY {
	opacity:0;
	transition-duration:0.5s;
	transition-delay:0.8s;
	transform: rotateY(0deg);
}
.top_prefecturmap .rotateY.active {
	transform: rotateY(360deg);
	opacity:1;
}
/* END 横回転 */



/* 縮小 */
.toshrink.active:before{
	opacity:1;
	animation: toshrink 2s linear;
}

@keyframes toshrink{
   0% {
      transform: scale(1.1);
   }
   100% {
      transform: scale(1);
   }
}