@charset "utf-8";

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

.animation h2 {
	position: absolute;
	width: calc(100%/3.1);
	top: calc(100%/100);
	left: calc(100%/1.5);
}
@media screen and (max-width: 896px){
	.animation h2 {
		position: absolute;
		width: calc(100%/3.2);
		top: calc(100%/70);
		left: calc(100%/1.48);
	}
}
.animation ul { list-style: none; }
.animation ul li,
.train, .car01, .bus, .car02, .car03, .car04, .car05,
.cloud,
.bird01,.bird02,.bird03,.bird04,
.tree01,.tree02,
.store01,.store02,.store03 { position: absolute; }

.item04,.item05,.item06,.item07 { width: calc(100%/5.4); }
.bird01,.bird02,.bird03,.bird04 { width: calc(100%/16); }

.store01 {
	width: calc(100%/8.8);
	left: calc(100%/2.68);
	bottom: calc(100%/4.56);
}

.store02 {
	width: calc(100%/2.6);
	top: calc(100%/1.22);
	right: calc(100%/1.56);
}

.store03 {
	width: calc(100%/10.4);
	left: calc(100%/1.081);
	bottom: calc(100%/3.81);
}

.animation dl {
	position: relative;
	cursor: pointer;
}
.animation .item01 dl{
	cursor: auto !important;
}
/*.animation dl dt {
	display: none;
	position: absolute;
	opacity: 0;
}*/
.animation dl dt {
	display: block;
	position: absolute;
	opacity: 1;
}


/*.animation dl:hover dt {
	display: inline-block;
	animation: fadeup 1s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
}*/

.item01 {
	width: calc(100%/10);
	top: calc(100%/6.5);
	left: calc(100%/2.03);
}

.item01 dl dt {/*PC*/
	width: calc(100%*2);
	top: calc(100%/-3.8);
	left: calc(100%/-2.4);
}

.item02 {
	width: calc(100%/9);
	top: calc(100%/2.42);
	left: calc(100%/1.17);
}

.item02 dl dt {/*インフォメーション*/
	width: calc(100%*2);
	top: calc(100%/-4.0);
	left: calc(100%/-1.5);
}

.item03 {/*住友林業*/
	width: calc(100%/5.4);
	top: calc(100%/3.8);
	left: calc(100%/3.0);
}

.item03 dl dt {
	width: calc(100%/1.3);
	top: calc(100%/-3.8);
	right: calc(100%/5.2);
}

.item04 {/*積水ハウス*/
	top: calc(100%/2.74);
	right: calc(100%/3.30);
}

.item04 dl dt {
	width: calc(100%/1.3);
	top: calc(100%/-6.02);
	right: calc(100%/6.3);
}

.item05 {/*パナソニック*/
	top: calc(100%/1.88);
	right: calc(100%/12.9);
}

.item05 dl dt {
	width: calc(100%/1.3);
	top: calc(100%/-5.84);
	right: calc(100%/5.4);
}

.item06 {/*ミサワホーム*/
	top: calc(100%/2.95);
	left: calc(100%/6.4);
}

.item06 dl dt {
	width: calc(100%/1.3);
	top: calc(100%/-5.8);
	right: calc(100%/10);
}

.item07 {/*三井ホーム*/
	top: calc(100%/2.198);
	left: calc(100%/3.04);
}

.item07 dl dt {
	width: calc(100%/1.3);
	top: calc(100%/-9.67);
	right: calc(100%/8.8);
}

.item08 {/*大和ハウス*/
	width: calc(100%/5.8);
	top: calc(100%/1.75);
	right: calc(100%/4.1);
}

.item08 dl dt {
	width: calc(100%/1.1);
	top: calc(100%/-6.8);
	right: calc(100%/7.9);
}

.item09 {/*セキスイハイム*/
	width: calc(100%/5.5);
	top: calc(100%/1.407);
	left: calc(100%/1.24);
}

.item09 dl dt {
	width: calc(100%/1.3);
	top: calc(100%/-6.2);
	left: calc(100%/5);
}

.item10 {/*ショールーム*/
	width: calc(100%/5.1);
	top: calc(100%/1.42);
	right: calc(100%/2.52);
}

.item10 dl dt {
	width: calc(100%/0.99);
	top: calc(100%/-2.9);
	left: calc(100%/-16);
}

.item11 {/*四国ガス*/
	width: calc(100%/5.88);
	top: calc(100%/1.254);
	left: calc(100%/1.59);
}

.item11 dl dt {
	width: calc(100%/0.99);
	top: calc(100%/-8);
	left: calc(100%/-6);
}

.item12 {/*住宅金融支援機構*/
	width: calc(100%/6.8);
	top: calc(100%/1.56);
	right: calc(100%/1.17);
}

.item12 dl dt {
	width: calc(100%/0.83);
	top: calc(100%/-8.8);
	left: calc(100%/14);
}

.item13 {/*四国電力*/
	width: calc(100%/5.1);
	top: calc(100%/1.555);
	right: calc(100%/1.71);
}

.item13 dl dt {
	width: calc(100%/1.12);
	top: calc(100%/7.8);
	left: calc(100%/29);
}

/* PC吹き出し調整 */
.item03 dl dt img {/*住友林業*/
		opacity: 0;
		animation: 3s infinite ball_pc;
		animation-delay: 3s;
		animation-duration:21s;
	}
	.item06 dl dt img {/*ミサワホーム*/
		opacity: 0;
		animation: 3s infinite ball_pc;
		animation-delay: 6s;
		animation-duration:21s;
	}
	.item04 dl dt img {/*積水ハウス*/
		opacity: 0;
		animation: 3s infinite ball_pc;
		animation-delay: 9s;
		animation-duration:21s;
	}
	.item07 dl dt img {/*三井ホーム*//*住友消す*/
		opacity: 0;
		animation: 3s infinite ball_pc;
		animation-delay: 12s;
		animation-duration:21s;
	}
	.item05 dl dt img {/*パナソニック*//*ミサワ消す*/
		opacity: 0;
		animation: 3s infinite ball_pc;
		animation-delay: 15s;
		animation-duration:21s;
	}
	.item08 dl dt img {/*大和ハウス*//*積水ハウス消す*/
		opacity: 0;
		animation: 3s infinite ball_pc;
		animation-delay: 18s;
		animation-duration:21s;
	}
	.item09 dl dt img {/*セキスイハイム*//*三井消す*/
		opacity: 0;
		animation: 3s infinite ball_pc;
		animation-delay: 21s;
		animation-duration:21s;
	}
	/**/
	/*PC.item01 dl dt img {
		opacity: 0;
		animation: 3s infinite ball2_sp;
		animation-delay: 3s;
		animation-duration:6s;
	}*/
	.item11 dl dt img {/*四国ガス*/
		opacity: 0;
		animation: 3s infinite ball2_sp;
		animation-delay: 3s;
		animation-duration:6s;
	}
	.item13 dl dt img {/*四国電力*/
		opacity: 0;
		animation: 3s infinite ball2_sp;
		animation-delay: 3s;
		animation-duration:6s;
	}
	
	.item02 dl dt img {/*インフォメーション*/
		opacity: 0;
		animation: 3s infinite ball2_sp;
		animation-delay: 6s;
		animation-duration:6s;
	}
	.item10 dl dt img {/*ショールーム*/
		opacity: 0;
		animation: 3s infinite ball2_sp;
		animation-delay: 6s;
		animation-duration:6s;
	}
	.item12 dl dt img {/*住宅金融支援機構*/
		opacity: 0;
		animation: 3s infinite ball2_sp;
		animation-delay: 6s;
		animation-duration:6s;
	}

@keyframes ball_pc { 
	5% { opacity:1; }
	30% { opacity:1; }
	42% { opacity: 1; }
	48% { opacity: 0; }
	70% { opacity: 0; }
	100% { opacity: 0; }
}
@keyframes ball2_pc { 
	5% { opacity:1; }
	30% { opacity:1; }
	42% { opacity: 1; }
	48% { opacity: 0; }
	70% { opacity: 0; }
	100% { opacity: 0; }
}

@media screen and (max-width: 896px){
	/* SP吹き出し調整 */
	.item03 dl dt img {/*住友林業*/
		opacity: 0;
		animation: 3s infinite ball_sp;
		animation-delay: 1s;
		animation-duration:7s;
	}
	.item06 dl dt img {/*ミサワホーム*/
		opacity: 0;
		animation: 3s infinite ball_sp;
		animation-delay: 2s;
		animation-duration:7s;
	}
	.item04 dl dt img {/*積水ハウス*/
		opacity: 0;
		animation: 3s infinite ball_sp;
		animation-delay: 3s;
		animation-duration:7s;
	}
	.item07 dl dt img {/*三井ホーム*//*住友消す*/
		opacity: 0;
		animation: 3s infinite ball_sp;
		animation-delay: 4s;
		animation-duration:7s;
	}
	.item05 dl dt img {/*パナソニック*//*ミサワ消す*/
		opacity: 0;
		animation: 3s infinite ball_sp;
		animation-delay: 5s;
		animation-duration:7s;
	}
	.item08 dl dt img {/*大和ハウス*//*積水ハウス消す*/
		opacity: 0;
		animation: 3s infinite ball_sp;
		animation-delay: 6s;
		animation-duration:7s;
	}
	.item09 dl dt img {/*セキスイハイム*//*三井消す*/
		opacity: 0;
		animation: 3s infinite ball_sp;
		animation-delay: 7s;
		animation-duration:7s;
	}
	/**/
	.item01 dl dt img {/*PC*/
		opacity: 0;
		animation: 3s infinite ball2_sp;
		animation-delay: 1.5s;
		animation-duration:3s;
	}
	.item11 dl dt img {/*四国ガス*/
		opacity: 0;
		animation: 3s infinite ball2_sp;
		animation-delay: 1.5s;
		animation-duration:3s;
	}
	.item13 dl dt img {/*四国電力*/
		opacity: 0;
		animation: 3s infinite ball2_sp;
		animation-delay: 1.5s;
		animation-duration:3s;
	}
	
	.item02 dl dt img {/*インフォメーション*/
		opacity: 0;
		animation: 3s infinite ball2_sp;
		animation-delay: 3s;
		animation-duration:3s;
	}
	.item10 dl dt img {/*ショールーム*/
		opacity: 0;
		animation: 3s infinite ball2_sp;
		animation-delay: 3s;
		animation-duration:3s;
	}
	.item12 dl dt img {/*住宅金融支援機構*/
		opacity: 0;
		animation: 3s infinite ball2_sp;
		animation-delay: 3s;
		animation-duration:3s;
	}
}

@keyframes ball_sp { 
	1% { opacity:1; }
	30% { opacity:1; }
	42% { opacity: 1; }
	48% { opacity: 0; }
	70% { opacity: 0; }
	100% { opacity: 0; }
}
@keyframes ball2_sp { 
	1% { opacity:1; }
	30% { opacity:1; }
	42% { opacity: 1; }
	48% { opacity: 0; }
	70% { opacity: 0; }
	100% { opacity: 0; }
}

.train {
	width: calc(100%/4);
	top: calc(100%/1.63);
	right: calc(100%/-3.8);
	animation: ease 30s infinite train;
}

.car01 {
	width: calc(100%/20);
	top: calc(100%/1.1);
	right: calc(100%/1.02);
	animation: ease 30s infinite car01;
}

.car02 {
	width: calc(100%/28);
	top: calc(100%/0.8);
	right: calc(100%/0.65);
	animation: ease 30s infinite car02;
	animation-delay: 15s;
}

.car03 {
	width: calc(100%/22);
	top: calc(100%/1.06);
	left: calc(100%/1.33);
	animation: ease 10s infinite car03;
}

.car04 {
	width: calc(100%/22);
	right: calc(100%/1.58);
	bottom: calc(100%/4.1);
}

.car05 {
	width: calc(100%/30);
	right: calc(100%/1.8);
	bottom: calc(100%/3.32);
}

.bus {
	width: calc(100%/13);
	top: calc(100%/0.8);
	right: calc(100%/0.65);
	animation: ease 30s infinite bus;
	animation-delay: 6s;
}

.cloud {
	width: calc(100%/2);
	top: calc(100%/-2.7);
	right: calc(100%/11);
	animation: 80s infinite cloud;
}

.bird01 {
	top: calc(100%/10);
	right: calc(100%/1.4);
	animation: 20s infinite bird01;
}

.bird02 {
	top: calc(100%/18);
	right: calc(100%/1.5);
	animation: 20s infinite bird02;
}

.bird03 {
	top: calc(100%/100);
	right: calc(100%/1.25);
	animation: 20s infinite bird03;
}

.bird04 {
	top: calc(100%/3.2);
	left: calc(100%/1.08);
}

.tree01 {
	width: calc(100%/11);
	top: calc(100%/2.15);
	left: calc(100%/1.45);
}

.tree02 {
	width: calc(100%/7.3);
	right: calc(100%/1.62);
	bottom: calc(100%/1.458);
}

.animation .town_logo { display: none; }

@media screen and (max-width: 896px) {
	.animation h2 {
		opacity: 1;
	}
	.animation .town_logo {
		display: inline-block;
		position: absolute;
		margin: auto;
		top: 10%;
		right: 0;
		left: 5%;
		bottom: 0;
		width: 60%;
		animation: 4s 1 logo;
		animation-fill-mode: forwards;
	}
	.animation dl dt {
		display: block;
		opacity: 1;
	}

	.animation dl:hover dt {
		display: block;
		animation: none;
	}
}

@keyframes fadein {
	0%,
	40% {
	    opacity: 1;
	}
	60%,
	70% {
		opacity: 0;
	}
	90% { opacity: 1; }
}

@keyframes fadein_sp {
	20%,
	80% {
	    opacity: 1;
	}
	90% { opacity: 0; }
}

@keyframes logo {
	50% {
	    opacity: 1;
		left: 5%;
	}
	90% {
		opacity: 0;
		left: 5%;
	}
	100% {
		opacity: 0;
		left: -200%;
	}
}

@keyframes fadeup {
  0% {
	transform: translateY(30px);
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes cloud {
	100% {
		top: calc(100%/3);
		right: calc(100%/1);
	}
}

@keyframes bird01 {
	50% {
		transform: inherit;
		top: calc(100%/5.2);
		right: calc(100%/1.2);
	}
	51% { transform: scale(-1, -1); }
	100% {
		transform: scale(-1, -1);
		top: calc(100%/10);
		right: calc(100%/1.4);
	}
}

@keyframes bird02 {
	50% {
		transform: inherit;
		top: calc(100%/7.5);
		right: calc(100%/1.25);
	}
	51% { transform: scale(-1, -1); }
	100% {
		transform: scale(-1, -1);
		top: calc(100%/18);
		right: calc(100%/1.5);
	}
}

@keyframes bird03 {
	50% {
		transform: inherit;
		top: calc(100%/10);
		right: calc(100%/1.1);
	}
	51% { transform: scale(-1, -1); }
	100% {
		transform: scale(-1, -1);
		top: calc(100%/100);
		right: calc(100%/1.25);
	}
}

@keyframes train {
	40%,
	50% {
		top: calc(100%/5.1);
		right: calc(100%/2.4);
	}
	100% {
		top: calc(100%/1.63);
		right: calc(100%/-3.8);
	}
}

@keyframes car01 {
	98% {
		opacity: 1;
		top: calc(100%/2.06);
		right: calc(100%/3.46);
	}
	100% {
		opacity: 0;
		top: calc(100%/2.06);
		right: calc(100%/3.46);
	}
}

@keyframes car02 {
	98% {
		opacity: 1;
		top: calc(100%/2.06);
		right: calc(100%/3.42);
	}
	100% {
		opacity: 0;
		top: calc(100%/2.06);
		right: calc(100%/3.42);
	}
}

@keyframes car03 {
	98% {
		opacity: 1;
		top: calc(100%/1.2);
		left: calc(100%/1.078);
	}
	100% {
		opacity: 0;
		top: calc(100%/1.2);
		left: calc(100%/1.078);
	}
}

@keyframes bus {
	98% {
		opacity: 1;
		top: calc(100%/2.06);
		right: calc(100%/3.46);
	}
	100% {
		opacity: 0;
		top: calc(100%/2.06);
		right: calc(100%/3.46);
	}
}
/*************************************************/