@import "./common/common_initialize.css";
@import "./common/common_class.css";
@import "./common/common_layout.css";
@import "./common/common_footer.css";

.top {box-sizing: border-box;}
	body.PC .top {padding: 40px 0 10px;}
		body.SP .top {padding: 10% 0 1rem;}
		/*横向きの際に適用*/
		@media only screen and (orientation : landscape) {
			body.SP .top {
				padding-top: 3%;
			}
		}

#osara {position: absolute;}
	body.PC #osara {
		/*left: -150px;
		bottom: -150px;*/
	}
		body.SP #osara {
			width: 36rem;
			/*left: -20%;*/
			top: 23%;
		}
		body.SP #osara img {width: 100%;}
		
		/*横向きの際に適用*/
		@media only screen and (orientation : landscape) {
			body.SP #osara {
				width: 50rem;
				top: 35%;
			}
		}

h1 {
	transform: scale(0);
	-webkit-transform: scale(0);
	-moz-transform: scale(0);
	-ms-transform: scale(0);
}
h1 img {width: 100%;}

	body.PC h1 {
		width: 600px;
		margin: 0 auto 40px;
	}
		body.SP h1 {
			width: 80%;
			margin: 0 auto 2rem;
		}

#contentsArea {
	position: relative;
	margin: 0 auto;
	background: none;
}
	body.PC #contentsArea {
		width: 900px;
		min-height: 560px;
	}
		body.SP #contentsArea {
			width: 100%;
			height: auto;
		}
		
#contentsArea ul {list-style-type: none;}
#contentsArea li.open {
	transform: scale(0);
	-webkit-transform: scale(0);
	-moz-transform: scale(0);
	-ms-transform: scale(0);
}
#contentsArea li {position: absolute;}
	
	body.PC #contentsArea li:nth-of-type(1) {right: 250px; top: 20px;}
	body.PC #contentsArea li:nth-of-type(2) {right: 50px; top: 50px;}
	body.PC #contentsArea li:nth-of-type(3) {right: 150px; top: 180px;}
		
		body.SP #contentsArea li img {width: 100%;}
		body.SP #contentsArea li:nth-of-type(1) {width: 16rem; right: 8%; top: 1rem;}
		body.SP #contentsArea li:nth-of-type(2) {width: 12rem; right: 2%; top: 11rem;}
		body.SP #contentsArea li:nth-of-type(3) {width: 16rem; right: 2%; top: 26rem;}
	
	body.PC #contentsArea li:hover {
		animation: inout 1s;
		animation-iteration-count: 1;
		-webkit-animation: inout 1s; /* Safari & Chrome */
		-webkit-animation-iteration-count: 1;
	}

#contentsArea #ex {
	display: none;
	position: absolute;
	box-sizing: border-box;
	line-height: 1.5em;
	text-align: justify;
	background-color: rgba(255,255,255,.3);
}
	body.PC #contentsArea #ex {
		right: 0;
		bottom: 40px;
		width: 400px;
		padding: 10px;
		font-size: 14px;
	}
		body.SP #contentsArea #ex {
			left: 50%;
			top: 42rem;
			width: 80%;
			margin-left: -40%;
			padding: 3%;
			font-size: 90%;
			box-sizing: border-box;
		}
	body.PC #contentsArea #copy {
		position: absolute;
		right: 0;
		bottom: 0;
	}
		body.SP #contentsArea #copy {
			position: absolute;
			left: 0;
			top: 52rem;
			width: 100%;
			margin: 0 auto;
			text-align: center;
		}
		body.SP #contentsArea #copy img {width: 16rem;}
		
/* ============ open */
h1.opened {
	animation: openLogo 1s forwards;
	animation-iteration-count: 1;
	-webkit-animation: openLogo 1s forwards; /* Safari & Chrome */
	-webkit-animation-iteration-count: 1;
}
	body.PC #osara {
		left: -764px;
		width: 660px;
		margin-left: 0;
	}
	body.PC #osara img {
		width: 100%;
	}
		body.SP #osara {
			left: -36rem;
		}
#contentsArea li:nth-of-type(1).opened,
#contentsArea li:nth-of-type(2).opened,
#contentsArea li:nth-of-type(3).opened {
	animation: openLogo 1s forwards;
	animation-iteration-count: 1;
	-webkit-animation: openLogo 1s forwards; /* Safari & Chrome */
	-webkit-animation-iteration-count: 1;
}
	
	
/* ============ animate */
	@keyframes inout {
		25%  { transform: scale(1.2); }
		100% { transform: scale(1); }
	}
	@-webkit-keyframes inout { /* Safari & Chrome */
		25%  { -webkit-transform: scale(1.2); }
		100% { -webkit-transform: scale(1); }
	}
	
	@keyframes openLogo {
		0%   { transform: scale(0); }
		25%   { transform: scale(1.2); }
		100%  { transform: scale(1); }
	}
	@-webkit-keyframes openLogo { /* Safari & Chrome */
		25%  { -webkit-transform: scale(0); }
		25%  { -webkit-transform: scale(1.2); }
		100% { -webkit-transform: scale(1); }
	}