@charset "utf-8";
/*------------------------------------------------------------
	トープページ
------------------------------------------------------------*/
body {
	background: url(../img/detail/detail.jpg) no-repeat center top;
	background-size: cover;
}

#main .flower1 img,
#main .flower2 img,
#main .flower3 img {
	display: block;
	position: relative;
}

#main .flower1 {
	position: absolute;
	left: -5.8%;
	top: -11.8%;
	width: 29%;
	animation: myanimate 12s infinite linear;
	-webkit-animation: myanimate 12s infinite linear;
}

#main .flower2 {
	position: absolute;
	left: -5.8%;
	bottom: -13.5%;
	width: 33.5%;
	animation: myanimate2 12s infinite linear;
	-webkit-animation: myanimate2 12s infinite linear;
}

#main .flower3 {
	position: absolute;
	right: 0;
	bottom: -12.8%;
	width: 34%;
	animation: myanimate2 12s infinite linear;
	-webkit-animation: myanimate2 12s infinite linear;
}

#main .logo {
	right: 1.3%;
	top: 2.75%;
}

#main .title {
	position: absolute;
	top: -2%;
	right: 15.5%;
	width: 39.6%;
	z-index: 100;
}

#main .title p {
	margin: 0 5px;
	color: #FFF;
	font-size: 15px;
}

#main .conts > div {
	position: absolute;
}

#main .conts a {
	display: block;
	color: #FFF;
	font-size: 23px;
	font-weight: bold;
	letter-spacing: -2px;
}

#main .conts a:hover {
	opacity: 0.7;
}

#main .conts .txt {
	padding: 5% 0;
	width: 61%;
	position: absolute;
	right: 19%;
	bottom: 0;
	text-align: center;
}

#main .conts .txt span {
	padding-right: 20px;
	background: url(../img/detail/icon01.png) no-repeat right center;
}

#main .conts .img {
	top: 20.6%;
	left: 32.2%;
	width: 31.5%;
}

#main .conts .link01 {
	top: 16.7%;
	left: 11.2%;
	width: 31.8%;
	opacity: 0;
}

#main .conts .link02 {
	top: 40.5%;
	left: 6%;
	width: 27.9%;
	opacity: 0;
}

#main .conts .link02 .txt {
	right: 12%;
}

#main .conts .link02 .txt span {
	background-image: url(../img/detail/icon03.png);
}

#main .conts .link03 {
	top: 64%;
	left: 10.2%;
	width: 27.6%;
	opacity: 0;
}

#main .conts .link03 .txt {
	right: 8%;
}

#main .conts .link03 .txt span {
	background-image: url(../img/detail/icon02.png);
}

#main .conts .link04 {
	top: 28.5%;
	right: 12.6%;
	width: 29.5%;
	opacity: 0;
}

#main .conts .link04 a {
	color: #6c906d;
}

#main .conts .link04 .txt {
	padding-bottom: 6%;
	right: auto;
	left: 14%;
	width: 64%;
}

#main .conts .link04 .txt span {
	display: inline-block;
	min-width: 66%;
}

#main .conts .link04 .txt span {
	background-image: url(../img/detail/icon04.png);
}

#main .conts .link05 {
	top: 53.2%;
	right: 12.5%;
	width: 34.2%;
	opacity: 0;
}

#main .conts .link05 a {
	color: #ba2121;
}

#main .conts .link05 .txt {
	padding: 6% 0 4%;
	right: auto;
	left: 9%;
	width: 64%;
}

#main .conts .link05 .txt span {
	background-image: url(../img/detail/icon05.png);
}

@media all and (min-width: 0) and (max-width: 1600px) {
	#main .conts .txt {
		padding: 4% 0;
	}
	
	#main .conts .link04 .txt {
		padding-bottom: 5%;
	}
	
	#main .conts a {
		font-size: 20px;
	}

}

@media all and (min-width: 0) and (max-width: 1440px) {
	#main .conts a {
		font-size: 17px;
	}

}

@media all and (min-width: 0) and (max-width: 1280px) {
	#main .title p {
		font-size: 12px;
	}
	
	#main .conts a {
		font-size: 15px;
	}

	#main .conts .txt span {
		padding-right: 10px;
	}
}


@media all and (min-width: 0) and (max-width: 1080px) {
	#main .conts .txt {
		padding: 3% 0;
	}
	
	#main .conts a {
		font-size: 13px;
	}
}

.photo {
	display: none;
	position: absolute;
	left: 42%;
	top: 21%;
	width: 51%;
	max-width: 1025px;
}

.pupCover {
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 1000;
}