@charset "UTF-8";

div.titlebar
{
	background-color:#0d4c93;
	height: 8rem;
	flex-grow:0;
	flex-shrink:0;
}

img.logo
{
	position: absolute;
	top:1.5rem;
	left:1.5rem;
	height:5rem;
	width:5rem;
}

h1.title
{
	color: #FFFFFF;
	font-size: 2.5rem;
	position: absolute;
	top:3rem;
	left:8rem;
}

html,body
{
	width:100%;
	height:100%;
	border:0;
	display:flex;
}

div.base
{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	
	display:flex;
	flex-flow:column nowrap;
	justify-content:center;
	align-items:stretch;
}

#wallbase
{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
}


div.wallimg1
{
	width:100%;
	height:100%;
	position: absolute;
	left: 0px;
	top: 0px;
	//background-image: url("./image/mainwall/aaa.jpg");
	-moz-background-size:cover;
	background-size:cover;
}

div.wallimg2
{
	width:100%;
	height:100%;
	position: absolute;
	left: 0px;
	top: 0px;
	//background-image: url("./image/mainwall/bbb.jpg");
	-moz-background-size:cover;
	background-size:cover;
	opacity: 0;
}

.fadeout{
	opacity: 0;
	transition: 3s ease-in-out;
	-webkit-transition: 3s ease-in-out;
}
.fadein{
	opacity: 1;
	transition: 3s ease-in-out;
	-webkit-transition: 3s ease-in-out;
}

div.filter
{
	width:100%;
	height:100%;
	position: absolute;
	left: 0px;
	top: 0px;
	background-color:#000000;
	opacity: 0.8;
	filter: alpha(opacity=70); /* For IE8 and earlier */
}


div.mainframe
{
	flex-grow:1;
	flex-shrink:1;
	overflow-y: scroll;
	position:relative;
}

div.mainframe div.l
{
	position: absolute;
	width:40%;
	height:100%;
	left: 0px;
	top: 0px;
}

h1.tstyle
{
	font-size:3rem;
	margin:4rem 2rem 3rem;
	border-bottom:0.5rem solid rgba(255,255,100,0.7);

}

h2.tstyle
{
	margin:1rem 2rem;
	font-size:1.5rem;
}

h1.bstyle
{
	font-size:3rem;
	margin:4rem 2rem 0rem 2rem;
	border-bottom:0.5rem solid rgba(255,255,100,0.7);
	text-align:left;
}

h2.bstyle
{
	margin:0rem 2rem 1rem;
	font-size:2rem;
}

h3.bstyle
{
	margin:0rem 4rem 1rem;
	font-size:1.8rem;
}

div.mainframe div.r
{
	position: absolute;
	width:60%;
	height:100%;
	right: 0px;
	top: 0px;
}

div.fullwframe
{
	width:100%;
	padding-left:2rem;
	padding-right:2rem;
}

div.fullwframe p
{
	font-size:1.8rem;
	line-height:150%;
}


div.bottomarea
{
	height: 9rem;
	flex-grow:0;
	flex-shrink:0;

	
	display:flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: stretch;
}

.btn1
{
	width:30rem;
	height:4rem;
	padding:0.5rem 0;
	font-size:2rem;
	cursor:pointer;
	border:0.3rem solid transparent;
	display:inline-block;
	vertical-align:middle;
	color: #FFFFFF;
}

.btn1:hover
{
	border:0.3rem solid #FFFFFF;
}

.linka
{
	cursor: pointer;
}

.linka:hover
{
	background-color: rgba(128,128,128,0.5);
}