@charset "UTF-8";

/*common*/

body
{
	color: #333;
	font-family: 'Lucida Grande','Hiragino Kaku Gothic ProN',Meiryo,sans-serif;
	font-size: 14px;
	line-height: 1.6em;
	line-break: strict;
	word-break: break-all;
	text-align: justify;
	text-justify: distribute;
	background: url(../images/common/bg.jpg) no-repeat fixed #000;
	background-size: cover;
}

a:link {
	text-decoration: none;
	color: #00ffc6;
}

a:visited {
	text-decoration: none;
	color: #00ffc6;
}

a:hover {
	text-decoration: none;
	color: #FC0;
}
p
{
	margin-bottom: 1em;
}

.drawer-hamburger-icon, .drawer-hamburger-icon:after, .drawer-hamburger-icon:before
{
	background: #fff;
}

#logo
{
	padding: 5px 10px;
	background: rgba(0,0,0,0.75);
	width: 100%;
	height: 60px;
	box-sizing: border-box;
	position: fixed;
	top: 0;
	left: 0;
}
#logo img
{
	height: 50px;
}
nav
{
	background: #000;
}
main
{
	padding: 30px;
	max-width: 1000px;
	width: 100%;
	box-sizing: border-box;
	display: block;
	margin: 80px auto 0 auto;
	background: rgba(0,0,0,0.3);
	border: 1px solid #2424b8;
	overflow: hidden;
	color: #fff;
}
main.main-top
{
	margin: 20px auto 0 auto;
	background: none;
	border: none;
}
.earth-wrap
{
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: -1;
	width: 100%;
}
.earth-wrap .earth 
{
	max-width: 1200px;
	width: 100%;
	margin: 0 auto;
}
.earth-wrap .earth img
{
	width: 100%;
}
ul.drawer-menu li a
{
	color: #f90;
}
h1
{
	background-color: rgba(36,36,184,0.7);
	background-image: url(../images/common/h1.png);
	background-repeat: no-repeat;
	background-position: right bottom;
	font-size: 1.3em;
	font-weight: bold;
	padding: 0.8em 1em;
	margin-bottom: 1.5em;
}
h2
{
	margin-bottom: 1em;
	margin-top: 1.5em;
	font-size: 1.4em;
	color: #fc0;
	border-left: 5px solid #f90;
	padding: 0.3em 0 0.3em 0.5em;
	
}
h3
{
	margin-bottom: 1em;
	font-size: 1.2em;
	color: #00ffc6;
}
.assist h3
{
	margin-bottom: 0.3em;
	font-size: 1.2em;
	color: #00ffc6;
}

h4
{
	margin-bottom: 1em;
	font-size: 1em;
	color: #CB60FF;
}
.select-text
{
	max-width: 1000px;
	width: 100%;
	margin: 0 auto 40px auto;
	text-align: center;
}
.view-wrap
{
	width: 100%;
	overflow: hidden;
}
.view-wrap .view
{
	width: 61%;
	float: left;
}
.view-wrap .view img
{
	width: 100%;
}
.view-wrap .view-text
{
	width: 37%;
	float: right;
}

.pic01/*横位置Ａ*/
{
	max-width: 600px;
	width: 100%;
	margin: 0 auto 1.2em auto;
}
.pic01b/*横位置Ａ大*/
{
	max-width: 900px;
	width: 100%;
	margin: 0 auto 1.2em auto;
}
.pic01 img,
.pic01b img
{
	width: 100%;
}
#pager-wrap
{
	width: 100%;
	display: table;
	background: rgba(0,0,0,0.5);
	overflow: hidden;
	margin-bottom: 30px;
	border-top: 1px solid #00ffc6;
	border-bottom: 1px solid #00ffc6;
}
#pager-wrap .pager
{
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}
#pager-wrap .btn
{
	width: 6em;
}
#pager-wrap .btn a
{
	background: #00ffc6;
	display: block;
	padding: 1em 0;
	color: #000;
}
#pager-wrap .btn a:hover
{
	text-decoration: none;
	opacity: 0.8;
}
.top-logo
{
	max-width: 700px;
	width: 100%;
	margin: 0 auto 20px auto;
}
.top-banner
{
	max-width: 700px;
	width: 100%;
	margin: 20px auto 0 auto;
	overflow: hidden;
}
.top-logo img
{
	width: 100%;
}
.top-banner img
{
	width: 100%;
	border-radius: 5px;
}
.top-navi
{
	max-width: 700px;
	width: 100%;
	margin: 0 auto;
}
.top-navi ul
{
	list-style: none;
	width: 70%;
	margin: 0 auto;
}
.top-navi ul li a
{
	background-image:
	url(../images/common/btn_frame_lt.png),
	url(../images/common/btn_frame_rb.png);
	background-size:23px 23px,23px 23px;
	background-repeat: no-repeat,no-repeat;
	background-position: left top,right bottom;
	padding: 1em;
	display: block;
	background-color: rgba(0,0,0,0.5);
	text-align: center;
	font-size: 1.1em;
	border: 1px solid #00ffc6;
	margin-bottom: 10px;
}
.top-navi ul li a:hover
{
	text-decoration: none;
	background-color: rgba(0,0,0,0.7);
	color: #ff2fd7;
}
footer
{
	color: #fff;
	text-align: center;
	padding: 1.5em;
	font-size: 0.9em;
}

@media screen and (max-width: 1000px) {
	
	main
	{
	padding: 80px 20px 20px 20px;
	width: 100%;
	box-sizing: border-box;
	display: block;
	margin: 0 auto;
	border: none;
	}
	main.main-top
	{
		padding: 20px;
		margin: 0 auto;
	}
}

@media screen and (max-width: 800px) {

.view-wrap .view
{
	width: 100%;
	float: none;
	margin-bottom: 1em;
}
.view-wrap .view-text
{
	width: 100%;
	float: none;
}

}

@media screen and (max-width: 480px) {
	

body
{
	background: url(../images/common/bg.jpg) no-repeat fixed #000;
	background-size: contain;
}	
	main
	{
	padding: 70px 10px 10px 10px;
	width: 100%;
	box-sizing: border-box;
	display: block;
	margin: 0 auto;
	}
	main.main-top
	{
		padding: 10px;
		margin: 0 auto;
	}
	#pager-wrap{margin-bottom: 20px;}

}