@charset "UTF-8";

h2{
	//background: red;
	//margin-top: -5px;
	//padding: 0px 20px;
	//height: 10px;
}


.nav {
	background: black;
	border-bottom: 5px solid #37a29B;
	height: 50px;
	//margin-top: -10px;
}
.nav ul {
	display: flex;
	list-style: none;
	justify-content: center;
	margin: 0;
	padding: 10px 10px 0 10px;
}
.nav li a {
	display: block;
	padding: 10px 20px;
	text-decoration: none;
	font-size: calc(16px * var(--view_frame_scale));
	color: #ffffff;
}
.nav li a:hover {
	background: #37a29B;
	border-radius: 10px 10px 0 0;
}

.footer{
	//position: relative;
	//background: yellow;
	float: left;
	color: white;
	width: 100%;
	height: calc(50px * var(--view_frame_scale));
	padding: 5px 0px 0px 0px;
	overflow: hidden;
	margin: 0 auto;
}

.note {
	color: white;
	background: red;
	font-size: calc(16px * var(--view_frame_scale));
}

.sitecopyright {
	float: left;
	font-size: calc(16px * var(--view_frame_scale));
}

.imagecopyright {
	float: right;
	font-size: calc(16px * var(--view_frame_scale));
	//width: calc(800px * var(--view_frame_scale));
	
}

@media screen and (orientation: landscape) {
   	.note { display: none; }
	.sitecopyright { display: block; }
	.imagecopyright { display: block; }
}else {
	.note { display: block; }
	.sitecopyright { display: none; }
	.imagecopyright { display: none; }
}


.accesscount {
	float: right;
	font-size: calc(14px * var(--view_frame_scale));
}
/*
/******************** button ************************/

.move_right button{
	position: absolute;
	top:calc(30px * var(--view_frame_scale));
	left: calc(var(--window_frame_width) * 0.5 + 150px * var(--view_frame_scale));
	width:calc(100px * var(--view_frame_scale));
	height:calc(30px * var(--view_frame_scale));
	background-color:yellow;
	font-size: calc(12px * var(--view_frame_scale));
}
.move_left button{
	position: absolute;	
	top:calc(30px * var(--view_frame_scale));
	left: calc(var(--window_frame_width) * 0.5 - 250px * var(--view_frame_scale));
	width:calc(100px * var(--view_frame_scale));
	height:calc(30px * var(--view_frame_scale));
	background-color:yellow;
	font-size: calc(12px * var(--view_frame_scale));
}
.scale_up button{
	position: absolute;	
	top:calc(30px * var(--view_frame_scale));
	left: calc(var(--window_frame_width) * 0.5 - 400px * var(--view_frame_scale));
	width:calc(100px * var(--view_frame_scale));
	height:calc(30px * var(--view_frame_scale));
	background-color:yellow;
	font-size: calc(12px * var(--view_frame_scale));
}

.look_right button{
	position: absolute;
	top:calc(30px * var(--view_frame_scale));
	left: calc(var(--window_frame_width) * 0.5 + 50px * var(--view_frame_scale));
	width:calc(100px * var(--view_frame_scale));
	height:calc(30px * var(--view_frame_scale));
	background-color:yellow;
	font-size: calc(12px * var(--view_frame_scale));
}
.look_left button{
	position: absolute;	
	top:calc(30px * var(--view_frame_scale));
	left: calc(var(--window_frame_width) * 0.5 - 150px * var(--view_frame_scale));
	width:calc(100px * var(--view_frame_scale));
	height:calc(30px * var(--view_frame_scale));
	background-color:yellow;
	font-size: calc(12px * var(--view_frame_scale));
}

.move_front button{
	position: absolute;	
	top:calc(30px * var(--view_frame_scale));
	left: calc(var(--window_frame_width) * 0.5 - 50px * var(--view_frame_scale));
	width:calc(100px * var(--view_frame_scale));
	height:calc(30px * var(--view_frame_scale));
	background-color:yellow;
	font-size: calc(12px * var(--view_frame_scale));
}
.back_to_point button{
	position: absolute;	
	top:calc(30px * var(--view_frame_scale));
	left: calc(var(--window_frame_width) * 0.5 - 50px * var(--view_frame_scale));
	width:calc(100px * var(--view_frame_scale));
	height:calc(30px * var(--view_frame_scale));
	background-color:yellow;
	font-size: calc(12px * var(--view_frame_scale));
}
*/