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



/* FONT size
---------------------------------------------------------------------
[ px ]	[ % ]
10px 	72  %		19px 	136 %
11px 	79  %		20px 	143 %
12px 	86 %		21px 	150 %
13px 	93 %		22px 	158 %
14px 	100 %		23px 	165 %
15px 	108 %		24px 	172 %
16px 	115 %		25px 	179 %
17px 	122 %		26px 	186 %
18px 	129 %
---------------------------------------------------------------------*/




/* 1201px - */
@media screen and (min-width: 1201px), print {


#header {
	display: none;
}	





/* contents
--------------------- */
#contents {
	width: 950px !important;
	margin-left: 21.5%;
	float: none !important;
	height: 3200px;
	position: relative;
}
	#contents .head {
		padding-top: 70px;
		padding-left: 130px;
		margin-bottom: 30px;
	}
	
	
	#contents a {
		display: block;
		font-family: 'Cormorant Garamond', serif;
		font-size: 22px;
		color: #bb897d;
	}
	
	#contents a {
		display: block;
		font-family: 'Cormorant Garamond', serif;
		font-size: 22px;
		color: #bb897d;
	}
	#contents .pht02 a {
		padding-top: 20px;
		text-align: right;
	}
	#contents .pht03 a {
		padding-bottom: 20px;
		text-align: right;
	}
	#contents .pht06 a {
		padding-bottom: 20px;
	}
	#contents .pht07 a {
		padding-top: 20px;
		text-align: right;
	}
	
	
	#contents .pht01 {
		position: absolute;
		top: 250px;
		left: 100px;
	}
	#contents .pht02 {
		position: absolute;
		top: 200px;
		left: 570px;
	}
	#contents .pht03 {
		position: absolute;
		top: 1000px;
		left: 0px;
	}
	#contents .pht04 {
		position: absolute;
		top: 890px;
		left: 620px;
	}
	#contents .pht05 {
		position: absolute;
		top: 1700px;
		left: 100px;
	}
	#contents .pht06 {
		position: absolute;
		top: 1850px;
		left: 570px;
	}
	#contents .pht07 {
		position: absolute;
		top: 2340px;
		left: 0px;
	}
	#contents .pht08 {
		position: absolute;
		top: 2500px;
		left: 500px;
	}


}







/* 901px - 1200px */
@media only screen and (min-width: 901px) and (max-width: 1200px), print {




/* contents
--------------------- */
#contents {
	height: 3200px;
	position: relative;
}
	#contents .head {
		font-family: 'GFS Didot', serif;
		font-size: 44px;
		letter-spacing: 3px;
		padding-top: 100px;
		padding-left: 10%;
		margin-bottom: 30px;
		color: #bb897d;
	}
	#contents .head img {
		width: 154px;
	}
	
	
	
	
	#contents a {
		display: block;
		font-family: 'Cormorant Garamond', serif;
		font-size: 22px;
		color: #bb897d;
	}
	#contents .pht02 a {
		padding-top: 20px;
		text-align: right;
	}
	#contents .pht03 a {
		padding-bottom: 20px;
		text-align: right;
	}
	#contents .pht06 a {
		padding-bottom: 20px;
	}
	#contents .pht07 a {
		padding-top: 20px;
		text-align: right;
	}
	
	
	#contents .pht01 {
		position: absolute;
		top: 250px;
		left: 100px;
	}
	#contents .pht02 {
		position: absolute;
		top: 200px;
		left: 570px;
	}
	#contents .pht03 {
		position: absolute;
		top: 1000px;
		left: 0px;
	}
	#contents .pht04 {
		position: absolute;
		top: 890px;
		left: 620px;
	}
	#contents .pht05 {
		position: absolute;
		top: 1700px;
		left: 100px;
	}
	#contents .pht06 {
		position: absolute;
		top: 1850px;
		left: 570px;
	}
	#contents .pht07 {
		position: absolute;
		top: 2340px;
		left: 0px;
	}
	#contents .pht08 {
		position: absolute;
		top: 2500px;
		left: 500px;
	}



}








/* - 900px */
@media only screen and (max-width: 900px) {


	




/* contents
--------------------- */
#contents {
	padding-top: 90px;
	position: relative;
}
	#contents .head {
		font-family: 'GFS Didot', serif;
		font-size: 28px;
		letter-spacing: 3px;
		margin-bottom: 30px;
		padding-left: 15%;
		color: #bb897d;
	}
	#contents .head img {
		width: 154px;
	}
	
	
	#contents a {
		display: block;
		font-family: 'Cormorant Garamond', serif;
		font-size: 14px;
		color: #bb897d;
	}
	#contents .pht02 a {
		padding-top: 10px;
		text-align: right;
	}
	#contents .pht03 a {
		padding-bottom: 10px;
		text-align: right;
	}
	#contents .pht06 a {
		padding-bottom: 10px;
	}
	#contents .pht07 a {
		padding-top: 10px;
		text-align: right;
	}
	
	
	
	#contents .pht01 {
		width: 45%;
		float: left;
		
		margin-top: 10%;
	}
	#contents .pht02 {
		width: 40%;
		float: right;
	}
	#contents .pht03 {
		width: 40%;
		float: left;
		margin-top: 15%;
		margin-bottom: 15%;
	}
	#contents .pht04 {
		width: 45%;
		padding-top: 30%;
		float: right;
	}
	#contents .pht05 {
		width: 45%;
		clear: both;
		margin-bottom: 30%;
		margin-left: 5%;
	}
	#contents .pht06 {
		width: 40%;
		float: right;
		margin-top: -80%;
		margin-right: 3%;
	}
	#contents .pht07 {
		width: 40%;
		margin-top: -15%;
	}
	#contents .pht08 {
		width: 45%;
		float: right;
		margin-top: -30%;
		padding-bottom: 20%;
	}
		#contents img {
			width: 100%;
			height: auto;
		}


	
}



.fadeInDown {
	-webkit-animation-fill-mode:both;
	-ms-animation-fill-mode:both;
	animation-fill-mode:both;
	-webkit-animation-duration:1s;
	-ms-animation-duration:1s;
	animation-duration:1s;
}
@-webkit-keyframes fadeInDown {
	0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); }
	100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}
@keyframes fadeInDown {
	0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); }
	100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}
.fadeInDown {
	-webkit-animation-name: fadeInDown;
	animation-name: fadeInDown;
	visibility: visible !important;
}