@charset "UTF-8";

:root{
	
}

body{
	margin: 0;
	background-color:black;
}
.main-container {
	box-sizing: border-box;
	background-color:black;
	margin: 0 auto;
	overflow: hidden;

	--view_frame_scale: 1.0;

	--main_frame_width: calc(1512px * var(--view_frame_scale));
	--main_frame_height: calc(850px * var(--view_frame_scale));
	
		--contents_frame_width: calc(1200px * var(--view_frame_scale));
		--contents_frame_height: calc(800px * var(--view_frame_scale));

			--top_frame_width: calc(1200px * var(--view_frame_scale));
			--top_frame_height: calc(var(--contents_frame_height)/7);
			--topPageDescription_width: calc(1200px * var(--view_frame_scale));
			--topPageDescription_height: calc(var(--contents_frame_height)*6/7);
			--roomList_frame_width: calc(1200px * var(--view_frame_scale));
			--roomList_frame_height: calc(var(--contents_frame_height)*6/7);

		--sideMenu_frame_width: calc(312px * var(--view_frame_scale));
		--sideMenu_frame_height: calc(800px * var(--view_frame_scale));
			--submitbutton_width: calc(312px * var(--view_frame_scale));
			--submitbutton_height: calc(var(--sideMenu_frame_height)/7);

	--siteMainTitle_font: calc(72px * var(--view_frame_scale));
	--submitbutton_font: calc(16px * var(--view_frame_scale));

	width: 100%;
	max-width: var(--main_frame_width);
	height: var(--main_frame_height);

}


.contents_frame {
	//position: absolute;
	//position: relative;
	float: left;
	background-color:black;
	    		
	width: var(--contents_frame_width);
	height:var(--contents_frame_height);

}

.top_frame {

	//position: relative;
	background-color:blue;

	width: var(--top_frame_width);
	height: var(--top_frame_height);
	
}

.topPageDescription {
	
	float: left;
	background-color: rgb(183,226,255);
	//padding: calc(10px * var(--view_frame_scale)) 10px;

	width: var(--topPageDescription_width);
	height:var(--topPageDescription_height);
	
	overflow: auto;

	font-size: calc(12px * var(--view_frame_scale));
	
}

.roomList_frame {
	
	float: left;
	background-color:green;
	//padding: calc(10px * var(--view_frame_scale)) 10px;

	width: var(--roomList_frame_width);
	height:var(--roomList_frame_height);
	
	overflow: auto;

	font-size: calc(12px * var(--view_frame_scale));
	
}
.link_frame {
	
	float: left;
	background-color:green;
	//padding: calc(10px * var(--view_frame_scale)) 10px;

	width: var(--roomList_frame_width);
	height:var(--roomList_frame_height);
	
	overflow: auto;

	font-size: calc(12px * var(--view_frame_scale));
	
}
.sideMenu_frame {

	float: right;
	background-color: gray;
	    		
	width: var(--sideMenu_frame_width);
	height:var(--sideMenu_frame_height);
	
}

/******************** top ************************/
.siteTitle {
	float: left;
	width: 85%;
}
.item {
	
	float: right;
	width: 15%;
}

#siteSubTitle {
	font-size: calc(20px * var(--view_frame_scale));
}
#siteMainTitle {
	cursor: pointer;
	font-size: var(--siteMainTitle_font);
	color: rgb(130,150,00);
	//color: red;
	text-align: center;
	text-shadow: 10px 10px 10px black;
}


.language {
	
	float: right;
	
}

#selectLanguageLabel{
	font-size: calc(14px * var(--view_frame_scale));
}
#selectLanguageLabel:hover{
	cursor: pointer;
}

.accesscount {
	
	width: 100%;
	text-align: right;
	font-size: 14px;
	//font-size: calc(14px * var(--view_frame_scale));
	color: black;
	
}


/************************ topPageDescription ************************/
.siteDescription {
	float: left;
	background-color: rgb(183,226,255);
	//padding: calc(10px * var(--view_frame_scale)) 10px;

	width: 75%;
	height:var(--roomList_frame_height);
	
	overflow: auto;

	font-size: calc(14px * var(--view_frame_scale));
}
.siteDescriptionText {
	
	float: left;
	background-color: rgb(183,226,255);
	    		
	width: 100%;
	height: var(--roomList_frame_height);
}
.titlePhoto {
	
	float: left;
	background-color: rgb(183,226,255);
	    		
	//width: 50%;
	//height: calc(var(--roomList_frame_height)/2);
	width: 100%;
	height: var(--roomList_frame_height);
}
#titlePhoto {
	width: 90%;
}

.menuDescription {
	float: right;
	background-color: #248;
	    		
	width: 25%;
	height:100%;
	font-size: calc(14px * var(--view_frame_scale));
}
.buttonDescription {
	
	float: right;

	background-color: #0099ff;
	color: #ccffff;
	
	width: 100%;
	height: calc(100% / 6);
}
.museumDescription {
	
	box-sizing: border-box;
	float: right;

	background-color: #0099ff;
	color: #ccffff;
	
	width: 100%;
	height: calc(100% / 3);

	padding: calc(20px * var(--view_frame_scale)) ;
	
}

#toRoomListDescription {
	background-color: #0088ff;

}
#MuseumDescription1 {
	
}

#newMenberDescription {
	background-color: #0088ff;

}
#MuseumDescription2 {
	

}

#arrow1 {

	position: absolute;
	//float: right;
	left: calc(var(--contents_frame_width)*0.94);
	top: calc(var(--sideMenu_frame_height)*1.0/7);

	width: 5%;
	height: 10%;

	alpha: 50%;
}
#arrow2 {

	position: absolute;
	//float: right;
	left: calc(var(--contents_frame_width)*0.94);
	top: calc(var(--sideMenu_frame_height)*4.0/7);

	width: 5%;
	height: 10%;
}


/************************ eventlist ************************/
.ListContoroll {
	margin: calc(10px * var(--view_frame_scale));
}

.SearchRoomContents {
	float: left;
}
#SearchRoomLabel {
	font-size: 12px;
	//font-size: calc(14px * var(--view_frame_scale));
}
#SearchItem {
	width: 100px;
	//width: calc(100px * var(--view_frame_scale));
}
#SearchDirection {
	width: 70px;
	//width: calc(70px * var(--view_frame_scale));
}
#eventSituation {
	width: 70px;
	//width: calc(70px * var(--view_frame_scale));
}
#SearchGo {
	width: 70px;
	//width: calc(70px * var(--view_frame_scale));
	background-color: yellow;
}

.SearchWordContents {
	float: left;
}
#SearchWordLabel {
	font-size: 12px;
}

#SearchWord {
	width: 200px;
	//width: calc(200px * var(--view_frame_scale));
}
#SearchWordGo {
	width: 70px;
	//width: calc(70px * var(--view_frame_scale));
	background-color: yellow;
}
.SearchPageContents {
	float: right;
}
#SearchBackButton {
	//float: right;
	//width: 6.7%;
	//min-width: 80px;
	width: 80px;
}
#pageNumberLabel {
	//float: right;
	font-size: 12px;
}
#SearchFrontButton {
	//float: right;
	//width: 6.7%;
	//min-width: 80px;
	width: 80px;
}
.eventlist {
	display: flex;
	float: left;
	margin: calc(10px * var(--view_frame_scale));
	font-size: calc(12px * (1 - (1 - var(--view_frame_scale))/2));
	
}
.listsummary {
	//background-color: blue;
	box-sizing: border-box;
	float: left;

	width: 100%;
	//height: calc(15px * var(--view_frame_scale));
}

table {
	//background-color: rgb(200,200,200);
	width: 90%;
	height: 70%;
	table-layout: fixed;
	//overflow-y: auto;
}
th.Numberth {
	//background-color: rgb(200,245,245);
	width: 3%;
	
}
th.roomNumberth {
	//background-color: rgb(150,245,245);
	width: 7%;
	text-align: center;
}
th.roomNameth {
	//background-color: rgb(100,245,245);
	width: 10%;
	text-align: center;
}
th.promoterth {
	//background-color: rgb(150,245,245);
	width: 10%;
	text-align: center;
}
th.eventTitleth {
	//background-color: rgb(100,245,245);
	width: 15%;
	text-align: center;
}
th.eventSummaryth {
	//background-color: rgb(150,245,245);
	width: 44%;
	text-align: center;
}
th.accessth {
	//background-color: rgb(150,245,245);
	width: 6%;
	text-align: center;
}
th.eventSituationth {
	//background-color: rgb(150,245,245);
	width: 5%;
	text-align: center;
}

td.Number {
	//background-color: rgb(200,245,245);
	height: calc(24px * (1 - (1 - var(--view_frame_scale))/2));
	text-align: center;
	cursor:pointer;
}
td.roomNumber {
	background-color: rgb(255,255,255);
	cursor:pointer;
	text-align: center;
}
td.roomName {
	background-color: rgb(255,255,255);
	cursor:pointer;
}
td.promoter {
	background-color: rgb(255,255,255);
	cursor:pointer;
}
td.eventTitle {
	background-color: rgb(255,255,255);
	cursor:pointer;
}
td.eventSummary {
	background-color: rgb(255,255,255);
	cursor:pointer;
}
td.access {
	background-color: rgb(255,255,255);
	cursor:pointer;
	text-align: center;
}
td.eventSituation {
	background-color: rgb(255,255,255);
	cursor:pointer;
	text-align: center;
}

#announcement {
	float: right;
	font-size: calc(12px * var(--view_frame_scale));
	color: white;
}

/******************** link_site ************************/
.link_list {
	display: flex;
	float: left;
	margin: calc(10px * var(--view_frame_scale));
	font-size: calc(12px * (1 - (1 - var(--view_frame_scale))/2));
	
}
.link_table {
	box-sizing: border-box;
	float: left;

	width: 100%;
	//height: calc(15px * var(--view_frame_scale));
}
th.title_name {
	//background-color: rgb(150,245,245);
	width: 25%;
	text-align: center;
}
th.title_description {
	//background-color: rgb(100,245,245);
	width: 50%;
	text-align: center;
}
th.title_url {
	//background-color: rgb(150,245,245);
	width: 25%;
	text-align: center;
}

td.contents_name {
	height: calc(24px * (1 - (1 - var(--view_frame_scale))/2));
	background-color: rgb(255,255,255);
	text-align: center;
}
td.contents_description {
	background-color: rgb(255,255,255);
	text-align: left;
}
td.contents_url {
	background-color: rgb(255,255,255);
	text-align: center;
}

/******************** side_menu ************************/
.submitbutton {

	//box-sizing: border-box;
	//margin: 0px 0px 0px 0px;
	
	font-family: sans-serif;
	font-size: var(--submitbutton_font);
	font-weight: bold;
	border: 1px solid maroon;
	background-color: #248;
	color: rgb(255,255,255);
	
	width: var(--submitbutton_width);
	height: var(--submitbutton_height);
	
}
#toTopButton {
	background-color: royalblue;
}

/******************** linkSite ************************/
.linkbutton {
	position: relative;
	left: 5%;
}