@charset "utf-8";
/* CSS Document */
/*リセット*/
*{
	margin:0 0 0 0;
	padding:0 0 0 0;
	font-size:16px;
	font-weight:normal;
}
@keyframes ContentSpaceCover{
	0%{
		opacity: 0%;
	}
	100%{
		opacity: 100%
	}
}
#ContentSpace{
	position:relative;
	width:320px;
	margin:0 auto 0 auto;
	z-index: 1;
	animation-name: ContentSpaceCover;
	animation-duration:2s;
}

/*下のメイン画像*/
#commercial{
	position:absolute;
	width:100%;
	min-height:100%;
	display:inline-block;
}
#company_img_top{
	position:absolute;
	width:100%;
	height:100%;
	background-color:white;
	z-index: 5;
	opacity: 0;
	cursor: pointer;
}
#company_img{
	position:absolute;
	width:100%;
	background-color:green;
	display:flex;
	flex-direction: column-reverse;
	z-index:1;
}
#company_img_wordspace{
	position:relative;
	height:50%;
	z-index: 2;
	display:flex;
	flex-direction:column;
	align-items: center;
	justify-content: center;
}
#company_img_write_space{
	position:relative;
	margin:50px;
	z-index: 2;
}
#company_img_write_space h2{
	font-size:1.5em;
	font-weight:bold;
	margin-top:1em;
	margin-bottom:1em;
}
#company_img_write_space p{
	text-indent:1em;
}
#company_img_imgspace{
	position:relative;
	height:50%;
	z-index: 2;
	display:flex;
	align-items: center;
	justify-content: center;
}
#company_img_imgspace img{
	position:relative;
	width:90%;
	height:auto;
	right:0px;
	z-index:1;
}
/*メイン画像上のキー*/
#company_img_button{
	position:absolute;
	width:100%;
	height:100%;
	display:flex;
	flex-direction: row;
	z-index:6;
	justify-content: space-between;
	visibility:hidden;
	cursor: pointer;
}
.company_img_button_press{
	animation-name:ContentSpaceCover;
	animation-duration:1s;
}
.company_img_button_out{
	animation-name:ContentSpaceCover;
	animation-duration:1s;
}
#company_img_left{
	position:absolute;
	top:50%;
	left:0px;
}
#company_img_right{
	position:absolute;
	top:50%;
	right:0px;
}

#company_img_center{
	position:absolute;
	bottom:10px;
	display:flex;
	flex-direction: row;
	left:50%;
}
.mark{
	width:10px;
	height:10px;
	border-radius:50%;
	background-color:white;
	margin-left:5px;
}
.unmark{
	width:8px;
	height:8px;
	border-radius:50%;
	background-color:black;
	margin-left:5px;
}
#company_img_left p,#company_img_right p{
	position:relative;
	width:50px;
	height:50px;
	border-radius:50%;
	top:50%;
	display:flex;
	align-items:center;
	justify-content: center;
	background-color:white;
}
#company_img_left p:hover,#company_img_right p:hover{
	box-shadow:4px 4px 10px black;
}

@media only screen and (min-width:850px){
	#ContentSpace{
		width:100%;
	}
	#commercial{
		position:relative;
		height:60vh;
	}
	#company_img_top{
		height:60vh;
	}
	#company_img_button{
		height:60vh;
	}
	#company_img{
		flex-direction:row;
		height:60vh;
	}
	#company_img_imgspace{
		width:50%;
		height:100%;
	}
	#company_img_wordspace{
		width:50%;
		height:100%;
	}
	#company_img_imgspace img{
	width:auto;
	height:100%;
	}
}
@media only screen and (min-width:1024px){
	#ContentSpace{
		width:90%;
	}
}