@charset "utf-8";

/*----------------------------------------------------
	共通
----------------------------------------------------*/

html, body {
	font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
	color:#FFF;
	line-height:200%;
	background-color:#000;
	background-image:url(../images/bg.jpg);
	background-repeat:no-repeat;
	background-position:top center;
	background-attachment:fixed;
}

/* for IE6 */
* html body {
	font-family: "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
}
* html input, * html textarea {
	font-family: "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
}

div {zoom: 1;/*for IE 5.5-7*/}
div:after {/*for modern browser*/  content: ".";clear: both;display: block; line-height: 0; height: 0;  visibility: hidden;}



/* リンク
----------------------------------------------------*/
a {
}

a:link {
	color:#7ea1e1;
	text-decoration:none;
}

a:visited {
	color:#7ea1e1;
	text-decoration:none;
}
a:active {
	color:#7ea1e1;
	text-decoration:none;
}
a:hover {
	color:#024681;
	text-decoration:none;
}

@media screen and (max-width: 640px), screen and (orientation: landscape) and (max-width: 768px) {
	html, body {
		background-size: cover;
	}
}

/*----------------------------------------------------
	#page（ページ全体）
----------------------------------------------------*/

#page {
	width:900px;
	margin:0 auto;
}

#page-top {
	position: fixed;
	bottom: 0px;
	left: 50%;
	font-size: 77%;
	margin-left:340px;
}

@media screen and (max-width: 640px), screen and (orientation: landscape) and (max-width: 768px) {
	#page-top {
		width: 100%;
		position: static;
		margin-left: 0;
		text-align: center;
	}
	#page-top img {
		display: none;
	}
	#page-top a {
		height: 0;
		padding-top: 50px;
		display: block;
		color: #fff;
		background-color: #222;
		position: relative;
		overflow: hidden;
	}
	#page-top a:after {
		content: "";
		display: block;
		width: 12px;
		height: 12px;
		border-top: #fff 1px solid;
		border-right: #fff 1px solid;
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
		position: absolute;
		top: 50%;
		left: 50%;
		margin: -3px 0 0 -9.2px;
	}
}

/* ===================================================================
 style info : ヘッダーやフッターなどサイト内共通
=================================================================== */

/*----------------------------------------------------
	header#globalHeader
----------------------------------------------------*/
#globalHeader {
	height:126px;
	width:100%;
	background-image:url(../images/header_bg.jpg);
	background-repeat:repeat-x;
	
}
#globalHeader .header_area{
	height:126px;
	width:928px;
	position:relative;
	margin:0 auto;
	
}
#globalHeader h1{
	padding-top:36px;
}

#globalHeader h1 a{
	width:122px;
	height:45px;
	display:block;
	background-image:url(../images/title.gif);
	text-indent: -9999px;
}
#globalHeader .blow{
	position:absolute;
	width:205px;
	height:81px;
	background-image:url(../images/header_blow.jpg);
	background-repeat:no-repeat;
	right:0px;
	top:0px;
}
#globalHeader .menu{
	margin-left:8px;
	
}

#globalHeader .menu li{
	float:left;
}

#globalHeader .menu li a{
	display:block;
	color: #fff;
	font-size: 14px;
	line-height: 1;
	padding: 20px 11px 10px;
	-webkit-transition: 0.6s;
	-moz-transition: 0.6s;
	-o-transition: 0.6s;
	-ms-transition: 0.6s;
	transition: 0.6s;
}
#globalHeader .menu li a:hover,
#globalHeader .menu li a.active {
	color: #7e9ddb;
}

#globalHeader .lang{
	position:absolute;
	top:126px;
	right:20px;
}

#globalHeader .lang li{
	float:left;
}

#globalHeader .lang li span {
	display: none;
}

#navBtn {
	display: none;
}

@media screen and (max-width: 640px), screen and (orientation: landscape) and (max-width: 768px) {
	#globalHeader {
		height: auto;
		background: #000;
	}
	#globalHeader .header_area {
		box-sizing: border-box;
		width: 100%;
		height: auto;
		padding: 11px 3.125% 0;
		margin: 0;
		border-bottom: #024681 2px solid;
	}
	#globalHeader .blow {
		display: none;
	}
	#globalHeader h1 {
		padding-top: 0;
	}
	#globalHeader h1 a {
		width: 81px;
		height: 30px;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: left top;
	}
	#globalHeader #navBtn {
		display: block;
		width: 41px;
		height: 0;
		padding: 41px 0 0;
		overflow: hidden;
		position: absolute;
		top: 0;
		right: 3.125%;
		background-color: #000;
		border: none;
	}
	#globalHeader #navBtn:before,
	#globalHeader #navBtn span:before,
	#globalHeader #navBtn span:after {
		content: "";
		display: block;
		width: 25px;
		height: 2px;
		-moz-border-radius: 2px;
		-webkit-border-radius: 2px;
		border-radius: 2px;
		background-color: #fff;
		position: absolute;
		left: 50%;
		margin-left: -12.5px;
		-webkit-transition: 0.6s;
		-moz-transition: 0.6s;
		-o-transition: 0.6s;
		-ms-transition: 0.6s;
		transition: 0.6s;
	}
	#globalHeader #navBtn:before {
		top: 50%;
		margin-top: -1px;
	}
	#globalHeader #navBtn span:before {
		top: 12px;
	}
	#globalHeader #navBtn span:after {
		bottom: 12px;
	}
	#globalHeader #navBtn.is-active:before {
		left: 0;
		opacity: 0;
	}
	#globalHeader #navBtn.is-active span:before {
		-webkit-transform: translate3d(0,8px,0) rotate(45deg);
		transform: translate3d(0,8px,0) rotate(45deg);
	}
	#globalHeader #navBtn.is-active span:after {
		-webkit-transform: translate3d(0,-7px,0) rotate(-45deg);
		transform: translate3d(0,-7px,0) rotate(-45deg);
	}
	#globalHeader .spNavwrap.is-hidden {
		display: none;
	}
	#globalHeader .spNavwrap {
		margin: 0 -3.125%;
	}
	#globalHeader .menu {
		margin: 0;
	}
	#globalHeader .menu li {
		float: none;
		border-top: #6697c8 1px solid;
	}
	#globalHeader .menu li a,
	#globalHeader .lang li a {
		box-sizing: border-box;
		width: 100%;
		padding: 16px 32px 15px 15px;
		background: #00326e;
		position: relative;
	}
	#globalHeader .menu li a:after {
		content: "";
		width: 6px;
		height: 6px;
		border-top: #fff 2px solid;
		border-right: #fff 2px solid;
		position: absolute;
		top: 50%;
		right: 15px;
		margin-top: -5px;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	#globalHeader .lang {
		position: static;
		overflow: hidden;
		border-top: #6697c8 1px solid;
	}
	#globalHeader .lang li {
		box-sizing: border-box;
		width: 50%;
		text-align: center;
		border-left: #6697c8 1px solid;
	}
	#globalHeader .lang li:first-child {
		border-left: none;
	}
	#globalHeader .lang li a {
		display: block;
		color: #fff;
		font-size: 14px;
		line-height: 1;
		padding: 16px 15px 15px;
	}
	#globalHeader .lang li img {
		display: none;
	}
	#globalHeader .lang li span {
		display: inline;
	}
	#globalHeader .menu li a:hover,
	#globalHeader .menu li a.active {
		color: #fff;
	}
}

@media screen and (min-width: 769px) {
	#globalHeader .spNavwrap {
		display: block !important;
	}
}


/*----------------------------------------------------
	#contents
----------------------------------------------------*/
#contents {
	margin-bottom:30px;
	width: 888px;
	margin:0 auto;
	margin-top:48px;
}

@media screen and (max-width: 640px), screen and (orientation: landscape) and (max-width: 768px) {
	#contents {
		margin: 20px 0 0;
		width: 100%;
	}
}

/*----------------------------------------------------
	#side（サイドバー）
----------------------------------------------------*/
#side {
	float: right;
	width: 155px;
	margin-bottom:40px;
}

.side_komoku{
	margin-bottom:20px;
	
}

.side_komoku h2{
	font-size:20px;
	font-family:"Lato",Geneva, Arial, Helvetica, sans-serif;
	border-bottom:1px #024681 solid;
	padding-bottom:8px;
	margin-bottom:10px;
	font-weight:normal;
	
}
.side_komoku li{
	font-size:14px;
	margin-bottom:3px;
}
.side_komoku a:link {
	color:#FFF;
	text-decoration:none;
}

.side_komoku a:visited {
	color:#FFF;
	text-decoration:none;
}
.side_komoku a:active {
	color:#FFF;
	text-decoration:none;
}
.side_komoku a:hover {
	color:#7e9ddb;
	text-decoration:none;
}
.side_komoku a:hover img{
	 filter: alpha(opacity=50);
  -moz-opacity:0.50;
  opacity:0.50;
}

@media screen and (max-width: 640px), screen and (orientation: landscape) and (max-width: 768px) {
	#side {
		box-sizing: border-box;
		float: none;
		width: 100%;
		margin-bottom: 0;
	}
	.side_komoku {
		margin: 0 !important;
	}
	.side_komoku.bnr {
		line-height: 1;
		padding: 0 3.125%;
		text-align: center;
		margin-bottom: 5px !important;
	}
	.side_komoku.bnr a {
		display: block;
		padding: 10px 0 8px;
	}
	.side_komoku a:hover img {
		filter: alpha(opacity=100);
		-moz-opacity: 1;
		opacity: 1;
	}
	.side_komoku h2 {
		margin-bottom: 0;
		padding: 15px 3.125% 13px;
		background: #00326d; /* Old browsers */
		background: -moz-linear-gradient(top,  #00326d 0%, #00090e 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00326d), color-stop(100%,#00090e)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top,  #00326d 0%,#00090e 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top,  #00326d 0%,#00090e 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top,  #00326d 0%,#00090e 100%); /* IE10+ */
		background: linear-gradient(to bottom,  #00326d 0%,#00090e 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00326d', endColorstr='#00090e',GradientType=0 ); /* IE6-9 */
	}
	#side .side_komoku .koumokuList_01 {
		overflow: hidden;
		background-color: #506292;
	}
	#side .side_komoku .koumokuList_01 li {
		width: 50%;
		float: left;
		margin-bottom: 0;
	}
	#side .side_komoku .koumokuList_01 li > a,
	#side .side_komoku .koumokuList_02 li > a {
		display: block;
		padding: 12px 22px 10px 15px;
		position: relative;
	}
	#side .side_komoku .koumokuList_01 li > a:hover,
	#side .side_komoku .koumokuList_02 li > a:hover {
		color: #fff
	}
	#side .side_komoku .koumokuList_01 li > a:after,
	#side .side_komoku .koumokuList_02 li > a:after {
		content: "";
		width: 6px;
		height: 6px;
		border-top: #fff 3px solid;
		border-right: #fff 3px solid;
		position: absolute;
		top: 50%;
		right: 10px;
		margin-top: -5px;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	#side .side_komoku .koumokuAcottl {
		position: relative;
		cursor: pointer;
	}
	#side .side_komoku .koumokuAcottl:after {
		content: "";
		width: 10px;
		height: 10px;
		border-top: #fff 2px solid;
		border-right: #fff 2px solid;
		position: absolute;
		top: 50%;
		right: 15px;
		margin-top: -11px;
		-webkit-transform: rotate(135deg);
		transform: rotate(135deg);
	}
	#side .side_komoku .koumokuAcottl.open:after {
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
		margin-top: -3px;
	}
	#side .side_komoku > ul.is-hidden {
		display: none;
	}
	#side .side_komoku .koumokuList_02 li {
		margin-bottom: 0;
		background-color: #506292;
		border-bottom: #ccc 1px solid;
	}
}

@media screen and (min-width: 769px) {
	#side .side_komoku > ul {
		display: block !important;
	}
}


/*----------------------------------------------------
	#main
----------------------------------------------------*/
#main {
	float: left;
	width: 700px;
	margin-bottom:40px;
}
#main .main_area{
	background-image:url(../images/main_bg.png);
	padding:22px 28px;
	margin-bottom:10px;
	
}

#main h1{
	height:34px;
	width:100%;
	font-size:18px;
	font-weight:normal;
	font-family:"Lato",Geneva, Arial, Helvetica, sans-serif;
	
}

.comming{
text-align:center;
font-size:24px;
font-family:Geneva, Arial, Helvetica, sans-serif;
padding:100px 0;
}

@media screen and (max-width: 640px), screen and (orientation: landscape) and (max-width: 768px) {
	#main {
		float: none;
		width: 100%;
		margin: 0;
	}
	#main .main_area,
	#contents #over_main .main_area {
		box-sizing: border-box;
		width: 94%;
		padding: 15px 3.125% 0;
		margin: 0 auto 25px;
	}
	#contents #over_main > h1 {
		padding: 0 3.125%;
		box-sizing: border-box;
	}
	#main h1 {
		height: auto;
		margin-bottom: 15px;
	}
}

/*----------------------------------------------------
	#over_main
----------------------------------------------------*/
#over_main {
	width: 888px;
	margin-bottom:0px;
}
#over_main .main_area{
	background-image:url(../images/main_bg.png);
	padding:22px 28px;
	margin-bottom:10px;
	
}

#over_main h1{
	height:34px;
	width:100%;
	font-size:18px;
	font-weight:normal;
	font-family:"Lato",Geneva, Arial, Helvetica, sans-serif;
	
}
.gra_btn a{
	background-image:url(../images/btn_grade.jpg);
	background-repeat:repeat-x;
	height:20px;
	padding:0 15px;
	color:#FFFFFF;
	font-size:11px;
}
.gra_btn a:hover{filter: alpha(opacity=50);
  -moz-opacity:0.5;
  opacity:0.5;
}

.gra_btn_red a{
	text-shadow: -1px -1px 3px #000;
	background-image:url(../images/btn_red_bg.jpg);;
	background-repeat:repeat-x;
	padding:4px 0px;
	text-align:center;
	width:100%;
	display:block;
	color:#FFFFFF;
	font-size:11px;
	border-radius: 4px;        /* CSS3草案 */
	-webkit-border-radius: 4px;    /* Safari,Google Chrome用 */
	-moz-border-radius: 4px;   /* Firefox用 */
}
.gra_btn_red a:hover{filter: alpha(opacity=50);
  -moz-opacity:0.5;
  opacity:0.5;
}

@media screen and (max-width: 640px), screen and (orientation: landscape) and (max-width: 768px) {
	#over_main {
		width: 100%;
	}
	.gra_btn_red a:hover {
		filter: alpha(opacity=100);
		-moz-opacity: 1;
		opacity: 1;
	}
}


/*----------------------------------------------------
	#navi
----------------------------------------------------*/
#navi{
	margin-bottom:30px;
	
}
#navi .prev{
	float:left;
}
#navi .next{
	float:right;
}

@media screen and (max-width: 640px), screen and (orientation: landscape) and (max-width: 768px) {
	#navi {
		margin-bottom: 0;
		padding: 0 3.125%;
	}
}


/*----------------------------------------------------
	footer#globalFooter
----------------------------------------------------*/
#globalFooter {
	clear: both;
	width: 100%;
	margin-top:40px;
	height:75px;
	background-image:url(../images/footer_bg.png);
	background-repeat:repeat-x;
	text-align:center;
	font-family:Arial, Helvetica, sans-serif;
}
.footer_area{
	width:888px;
	margin:0 auto;
	padding-top:10px;
	position:relative;
	
	}
#globalFooter .menu{
	margin-left:140px;}
#globalFooter .menu li{
	float:left;
	margin:0 5px;
}
.footer_area a:link {
	color:#FFF;
	text-decoration:none;
}

.footer_area a:visited {
	color:#FFF;
	text-decoration:none;
}
.footer_area a:active {
	color:#FFF;
	text-decoration:none;
}
.footer_area a:hover {
	color:#7e9ddb;
	text-decoration:none;
}
.copyright{
	text-align:center;
	font-size:11px;
	color:#5b6d93;
	padding-top:5px;
	text-shadow: 1px 1px 1px #000a12;
}

#globalFooter .pagetop{
	position:absolute;
	top:-30px;
	right:0px;
}

@media screen and (max-width: 640px), screen and (orientation: landscape) and (max-width: 768px) {
	#globalFooter {
		margin-top: 0;
		height: auto;
		background-image: none;
		background-color: #023068;
	}
	#globalFooter:after {
		display: none;
	}
	.footer_area {
		width: 100%;
		margin: 0;
		padding-top: 0;
	}
	#globalFooter .menu {
		margin-left: 0;
		overflow: hidden;
	}
	#globalFooter .menu li {
		width: 50%;
		margin: 0;
		text-align: left;
	}
	#globalFooter .menu li a {
		font-size: 12px;
		display: block;
		position: relative;
		padding: 8px 22px 6px 15px;
	}
	#globalFooter .menu li a:hover {
		color: #fff;
	}
	#globalFooter .menu li a:after {
		content: "";
		width: 4px;
		height: 4px;
		border-top: #fff 2px solid;
		border-right: #fff 2px solid;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
		position: absolute;
		top: 50%;
		right: 10px;
		margin-top: -5px;
	}
	.copyright.sp_lower {
		width: 95%;
		color: #fff;
		text-shadow: none;
		padding: 5px 0;
		margin: 0 auto;
		border-top: #fff 1px solid;
	}
}