@charset "UTF-8";

/* CSS Document======================================
*
*	Cover animation
*
*	Site Name : 奥田治療院
====================================================*/

/*===================================================
		Home
===================================================*/
/*----------------------------
		home-cover
----------------------------*/
.home-cover {
	width: 100%;
	background: #FFF;
	position: relative;
	z-index: 1;
}

.home-cover:before {
	content: "";
	display: block;
	padding-top: 48.5%;
}

.home-cover img {
	position: absolute;
}

.home-cover img[src*="logomark.svg"] {
	width: 33%;
	top: 10%;
	left: 10%;
	z-index: 3;
	-webkit-animation: logomark 10s ease infinite;
	animation: logomark 10s ease infinite;
}

.home-cover img[src*="logoword.svg"] {
	width: 35%;
	top: 32%;
	left: 50%;
	z-index: 4;
	-webkit-animation: logoword 10s ease infinite;
	animation: logoword 10s ease infinite;
}

.home-cover img[src*="logoword_en.svg"] {
	width: 35%;
	top: 42%;
	left: 50%;
	opacity: 0;
	z-index: 4;
	-webkit-animation: logoword_en 10s ease infinite;
	animation: logoword_en 10s ease infinite;
}

.home-cover img[src*="img-txt01.svg"] {
	width: 22.5%;
	top: 53%;
	left: 50%;
	opacity: 0;
	z-index: 4;
	-webkit-animation: img-txt01 10s ease infinite;
	animation: img-txt01 10s ease infinite;
}

.home-cover img[src*="photo01.png"] {
	width: 15%;
	bottom: 0%;
	left: 43%;
	z-index: 2;
}

.home-cover img[src*="photo02.png"] {
	width: 21%;
	top: -15%;
	right: 10%;
	z-index: 2;
}

.cover-dot {
	display: block;
	width: 10%;
	background: #e3ecf7;
	border-radius: 50%;
	position: absolute;
}

.cover-dot:before {
	content: "";
	display: block;
	padding-top: 100%;
}

/* 個別 */
.cover-dot.dot-1 {
	width: 15%;
	left: 37%;
	top: -15%;
	z-index: 1;
	-webkit-animation: dot-1 10s linear infinite;
	animation: dot-1 10s linear infinite;
}

.cover-dot.dot-2 {
	width: 12%;
	left: -4%;
	bottom: 0%;
	z-index: 1;
	-webkit-animation: dot-2 8s linear infinite;
	animation: dot-2 8s linear infinite;
}

.cover-dot.dot-3 {
	width: 19%;
	right: 6%;
	bottom: 5%;
	z-index: 1;
	-webkit-animation: dot-3 10s linear infinite;
	animation: dot-3 10s linear infinite;
}


/*----------------*/

@-webkit-keyframes logomark {
	0% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
		-webkit-transform-origin: 50.5% 50.99502487562189%;
		transform-origin: 50.5% 50.99502487562189%;
	}
	50% {
		-webkit-transform: none;
		transform: none;
		-webkit-transform-origin: 50.5% 50.99502487562189%;
		transform-origin: 50.5% 50.99502487562189%;
	}
	100% {
		-webkit-transform: none;
		transform: none;
		-webkit-transform-origin: 50.5% 50.99502487562189%;
		transform-origin: 50.5% 50.99502487562189%;
	}
}

@keyframes logomark {
	0% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
		-webkit-transform-origin: 50.5% 50.99502487562189%;
		transform-origin: 50.5% 50.99502487562189%;
	}
	50% {
		-webkit-transform: none;
		transform: none;
		-webkit-transform-origin: 50.5% 50.99502487562189%;
		transform-origin: 50.5% 50.99502487562189%;
	}
	100% {
		-webkit-transform: none;
		transform: none;
		-webkit-transform-origin: 50.5% 50.99502487562189%;
		transform-origin: 50.5% 50.99502487562189%;
	}
}

@-webkit-keyframes logoword {
	0% {
		opacity: 0;
		-webkit-transform: translateY(150%);
		transform: translateY(150%);
	}
	10% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}

@keyframes logoword {
	0% {
		opacity: 0;
		-webkit-transform: translateY(150%);
		transform: translateY(150%);
	}
	10% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}

@-webkit-keyframes logoword_en {
	0% {
		opacity: 0;
	}
	10% {
		opacity: 0;
	}
	30% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}

@keyframes logoword_en {
	0% {
		opacity: 0;
	}
	10% {
		opacity: 0;
	}
	30% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}

@-webkit-keyframes img-txt01 {
	0% {
		opacity: 0;
	}
	20% {
		opacity: 0;
	}
	40% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}

@keyframes img-txt01 {
	0% {
		opacity: 0;
	}
	20% {
		opacity: 0;
	}
	40% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}

@-webkit-keyframes dot-1 {
	0% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
		-webkit-transform-origin: 100% 150%;
		transform-origin: 100% 150%;
	}
	100% {
		-webkit-transform: none;
		transform: none;
		-webkit-transform-origin: 100% 150%;
		transform-origin: 100% 150%;
	}
}

@keyframes dot-1 {
	0% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
		-webkit-transform-origin: 100% 150%;
		transform-origin: 100% 150%;
	}
	100% {
		-webkit-transform: none;
		transform: none;
		-webkit-transform-origin: 100% 150%;
		transform-origin: 100% 150%;
	}
}

@-webkit-keyframes dot-2 {
	0% {
		-webkit-transform: rotate(-360deg);
		transform: rotate(-360deg);
		-webkit-transform-origin: 150% 50%;
		transform-origin: 150% 50%;
	}
	100% {
		-webkit-transform: none;
		transform: none;
		-webkit-transform-origin: 150% 50%;
		transform-origin: 150% 50%;
	}
}

@keyframes dot-2 {
	0% {
		-webkit-transform: rotate(-360deg);
		transform: rotate(-360deg);
		-webkit-transform-origin: 150% 50%;
		transform-origin: 150% 50%;
	}
	100% {
		-webkit-transform: none;
		transform: none;
		-webkit-transform-origin: 150% 50%;
		transform-origin: 150% 50%;
	}
}

@-webkit-keyframes dot-3 {
	0% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
		-webkit-transform-origin: 100% 50%;
		transform-origin: 100% 50%;
	}
	100% {
		-webkit-transform: none;
		transform: none;
		-webkit-transform-origin: 100% 50%;
		transform-origin: 100% 50%;
	}
}

@keyframes dot-3 {
	0% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
		-webkit-transform-origin: 100% 50%;
		transform-origin: 100% 50%;
	}
	100% {
		-webkit-transform: none;
		transform: none;
		-webkit-transform-origin: 100% 50%;
		transform-origin: 100% 50%;
	}
}