@chartset "utf-8";

html{
margin:0;
padding:0;
overflow-y:scroll;
overflow-x:hidden;
background-color:#fbfbff;
border-top:solid 2px #455B86;
}
body{
margin:0;padding:0;
color:#333;
font-size:18px;
max-width:100%;
}

body, input, textarea, select{font-family:"游ゴシック体", YuGothic, "YuGothic M", "ヒラギノ角ゴ Pro W3",メイリオ,Osaka,Arial,Verdana,sans-serif;}
h1, h2, h3, h4, h5, h6, .heading{font-family:"游ゴシック体", YuGothic, "YuGothic M", "ヒラギノ角ゴ Pro W3",メイリオ,Osaka,Arial,Verdana,sans-serif;}
h1, h2, h3, h4, h5, h6{margin:0 0 20px 0; font-size:22px; line-height:normal; font-weight:normal; text-transform:capitalize;}
hr{display:block; color:#bbbbbb; width:50%; height:1px; border:solid; border-width:1px 0 0 0;}
p{color:#777;}
.textbold{font-weight:bold;}
.center{text-align:center;}
.right{text-align:right;}
.nospace{margin:0; padding:0; list-style:none;}
.borderedbox{border:1px solid;}
.clear, .group{display:block;}
.clear::before, .clear::after, .group::before, .group::after{display:table; content:"";}
.clear, .clear::after, .group, .group::after{clear:both;}
a{outline:none; text-decoration:none;}
.fl_left, .imgl{float:left;}
.fl_right, .imgr{float:right;}
img{width:auto; max-width:100%; height:auto; margin:0; padding:0; border:none; line-height:normal; vertical-align:middle;}
.imgl{margin:0 15px 10px 0; clear:left;}
.imgr{margin:0 0 10px 15px; clear:right;}


/* Grid-------- */
.one_half, .one_third, .two_third, .one_quarter, .two_quarter, .three_quarter{display:inline-block; float:left; margin:0 0 0 3.06748466257669%; list-style:none;}
.first{margin-left:0; clear:left;}
.one_quarter{width:22.69938650306748%;}
.one_third{width:31.28834355828221%;}
.one_half, .two_quarter{width:48.46625766871166%;}
.two_third{width:65.6441717791411%;}
.three_quarter{width:74.23312883435584%;}


/* Spacing------------- */
.btmspace-10{margin-bottom:10px;}
.btmspace-15{margin-bottom:15px;}
.btmspace-30{margin-bottom:30px;}
.btmspace-50{margin-bottom:50px;}
.btmspace-80{margin-bottom:80px;}

header{
z-index:2060;
position:fixed;
transition:transform .6s;
max-width:100%;
margin:20px 0 0 20px;
padding:0;
}
header h1{
padding-bottom: 0px;
padding-top: 0px;
padding:0;
font-size:20px;
}
header h1 a{
display:block;
}




nav{
top:5px;
left:0;
height:70px;
width:100%;
z-index:10;
height:70px;
margin:0 auto;
padding:0 0 0 12%;
background-color: rgba(230,230,255,0.5);
z-index:1001;
position:fixed;
transition:transform .6s;
}
nav:befor{
border-top: solid 10px #455B86;
}
nav ul, nav li{list-style:none;margin:0;padding:0;}
nav > ul{float:right;width:100%;}
nav > ul > li{float:left;text-align:center;position:relative;width:12%;}
nav > ul > li > a{
font-size:16px;
text-decoration:none;
display:block;
height:70px;
line-height:70px;
padding:0;
position:relative;
z-index:10;
color:#000000;
}
nav > ul > li > a:after{
content:"";
display:block;
position:absolute;
left:0;
right:0;
width:auto;
height:1px;
top:45%;
margin:1em 0 0 0;
-webkit-transform:scaleX(0);
transform:scaleX(0);opacity:0;
-webkit-transition:-webkit-transform 0.35s, opacity 0.35s;transition:transform 0.35s, opacity 0.35s;-webkit-transform-origin:50% 50%;transform-origin:50% 50%;
background:#356ebb;background:-webkit-linear-gradient(left, #356ebb 0%, #149cb5 50%, #356ebb 100%);
background:linear-gradient(to right, #356ebb 0%, #149cb5 50%, #356ebb 100%);
}
nav > ul > li.active > span > a:after,
nav > ul > li.active > a:after,
nav > ul > li:hover > span > a:after,
nav > ul > li:hover > a:after{-webkit-transform:scaleX(1);transform:scaleX(1);opacity:1;}


.navigation,.post-navigation{
	display:none;
}

main{
	background-color: #fff9ff;
}

img {
	max-width:100%;
	height:auto;
}
.main-contents{
    margin:0px auto 0 auto;
    padding:70px 0 0 0;
    text-align:center;
}
.resources{
    margin:30px auto;
    padding:60px 0;
	max-width:60%;
	height:auto;
    border:5px solid #455B86;
}
.left-side{
    max-width: 40%;
    margin:30px auto 30px 23%;
    padding:60px 20px;
        border:1px solid #455B86;
}
.right-side{
    max-width: 40%;
    margin:30px 23% 30px auto;
    padding:60px 20px;
        border:1px solid #455B86;
}

.page-title {
	width: 100%;
	padding-top:135px;
	height: 35px;
	background-color: #FFF;
	background-image: url(images/bg-eyecatch01.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	color: #707070;
	text-align: center;
	background-color: #f0f0ff;
}


/*=======================================================
layout
=======================================================*/

.content-area {
	max-width: 1080px;
	margin: 30px auto 20px;
	padding: 30px;
	background-color: #f7f7ff;
	border-radius: 10px;
}

.content-area .content-area-profile {
	padding-top: 50px;
}

.content-area .has-side-col:after {
	content: "";
	display: block;
	clear: both;
}

.main-column {
	margin-bottom: 20px;
}

.has-side-col .main-column {
	width: 705px;
	float: left;
}

.side-column {
	float: right;
	list-style: none;
	padding-left: 0;
	width: 360px;
}

.text-body {
	width: 650px;
	margin: 0 auto;
}

.text-body:after {
	content: "";
	display: block;
	clear: both;
}
/*=======================================================
generic parts
=======================================================*/

.box-generic {
	margin: 30px 0;
}

.main-column > .box-generic:first-child {
	margin-top: 0;
}

.box-heading,
.widgettitle {
	display: inline-block;
	min-width: 160px;
	margin: 0;
	padding: 60px 30px 10px 10px;
	border-radius: 5px;
	background-color: #f7f7ff;
	color: #707070;
	line-height: 1.5;
}

.box-heading.box-heading-main-col {
	font-size: 28px;
}

.widgettitle {
	font-size: 24px;
}

.box-heading.box-heading-article {
	padding-top: 80px;
	padding-bottom: 10px;
	font-size: 28px;
	font-weight: normal;

}

.box-content + .box-heading {
	margin-top: 30px;
}

.box-content,
.searchform > div,
.calendar_wrap,
.tagcloud,
.widget ul {
	padding: 30px;
	background-color: #FFF;
}

.box-content.radius-tl {
	border-radius: 5px;
}

.box-content.radius-tr {
	border-radius: 5px;
}

.box-content.radius-bl {
	border-radius: 5px;
}

.box-content.radius-br,
.widgettitle + .calendar_wrap,
.widgettitle + .tagcloud,
.widgettitle + .searchform > div,
.widget .widgettitle + ul {
	border-radius: 5px;
}

.searchform > div,
.calendar_wrap,
.widget ul {
	border-radius: 5px;
}

.box-content > *:first-child,
.widget_search,
.widget ul > *:first-child {
	margin: 0;
}

.archive {
	padding: 0;
	list-style: none;
}

.item-archive {
	margin-top: 30px;
	position: relative;
}

.item-archive:first-child {
	margin-top: 0;
}

.item-archive:after {
	content: "";
	display: block;
	clear: both;
}

.time-and-thumb-archive {
	position: relative;
	float: left;
	z-index: 10;
	padding-left: 30px;
	color: #FFF;
	font-weight: bold;
	min-height: 130px;
}

.thumb-archive {
	margin: 0;
	line-height: 1;
}

.thumb-archive img {
	vertical-align: top;
	border-radius: 5px;
	margin-right: 20px;
}

.pub-date {
	position: absolute;
	left: 0;
	bottom: 0;
	display: block;
	width: 116px;
	height: 16px;
	padding: 7px;
	line-height: 16px;
	background-color: #7070ff;
	transform: rotate(270deg);
	transform-origin: 15px 15px;
	font-size: 10px;
}

.pub-date:before {
	content: url(images/icon-clock.png);
	margin-right: 5px;
	vertical-align: top;
}

.data-archive {
	width: 100%;
	min-height: 130px;
	position: relative;
	z-index: 0;
}

.list-categories-archive {
	margin: 0;
	padding-left: 50px;
	background-color: #f7f7ff;
	line-height: 28px;
}

.title-archive {
	margin: 0;
	padding: 10px 0 10px 50px;
	line-height: 1.4;
	font-size: 21px;
	font-weight: normal;
	min-height: 58px;
}

.list-tags-archive {
	bottom: 0;
	margin: 0;
	padding-left: 50px;
	padding-right: 20px;
	border-radius: 5px;
	background-color: #CBCBFF;
	color: #707070;
	font-size: 14px;
	line-height: 24px;
	min-height: 24px;
}

.list-tags-archive a {
	display: inline-block;
}

.nav-to-archives {
	margin-top: 50px;
}

.nav-to-archives a {
	display: block;
	margin-right: -30px;
	padding: 10px 20px;
	background-color: #707070;
	text-align: right;
	color: #FFF;
	font-size: 18px;
	font-weight: bold;
}

.nav-to-archives a:hover {
	background-color: #CBCBFF;
	text-decoration: none;
}


.pagination .nav-links {
	margin-top: 50px;
	text-align: center;
}

.pagination .nav-links a,
.pagination .nav-links span {
	color: #FFF;
	font-weight: bold;
	padding: 0.5em;
}

.pagination .nav-links .current,
.pagination .nav-links .dots {
	color: #95989A;
}

.arrow {
	margin: 0 10px;
	vertical-align: middle;
}

.reply:before {
	content: url(images/icon-reply.png);
}

.meta{
	display: inline-block;
	margin-right: 2em;
}







/* Content------------ */
.container{display:block; margin:0 auto;padding:80px 0;}
.steps li *{margin:0; padding:0; text-align:center;}
.steps figure{position:relative; max-width:320px; margin:0 auto;}
.steps figure, .steps .heading{margin-bottom:20px;}
.steps figure figcaption, .steps figure figcaption a{display:block; width:64px; height:64px; line-height:54px; overflow:hidden;}
.steps figure figcaption a{width:100%; height:100%;}
.steps figure figcaption{position:absolute; top:0; left:0; font-size:22px; border:5px solid;}

.steps a{color:#FFFFFF;}
.steps li:nth-of-type(1) a{background-color:#24cd89;}
.steps li:nth-of-type(2) a{background-color:#108289;}
.steps li:nth-of-type(3) a{background-color:#59ACD1;}
.steps li:nth-of-type(4) a{background-color:#396CB7;}
.steps li:hover a{background-color:#0A2451;}
.steps figure figcaption{border-color:#FFFFFF;}






#sec04_02{
	background: url(../images/bgSec04.jpg) no-repeat 100% 100% fixed;
	background-size: cover;
	-webkit-background-size: cover;
	text-align: center;
	padding: 220px 20px;
}

footer{
clear:both;
display:block;
margin:0 auto;
padding:0;
position:relative;
background:#0a1851;
color:#ffffff;
width:100%;
border-top:solid 5px #011530;
}
footer a{
color:#dddddd;
text-decoration:none;
}
footer small{
display:block;
text-align:center;
margin:0 auto;
padding:2em 0 2em 0;
width:100%;
text-align:center;
position:relative;
z-index:2;
}
footer dl{
margin:0 auto;
padding:60px 0 20px 0;
max-width:100%;
position:relative;
z-index:2;
text-align:center;
}
footer dl dt{
text-align:center;
text-transform:uppercase;
font-size:28px;
margin:0 0 10px 0;
padding:0 0 7px 0;
position:relative;
display:inline-block;
}
footer dl{
margin:0 auto;
padding:40px 0 20px 0;
max-width:100%;
position:relative;
}
footer dl dt{
text-align:center;
text-transform:uppercase;
font-size:34px;
}
footer dl dt:after{
content:"";
display:block;
width:100%;
height:3px;
bottom:0;
left:0;
background:#356ebb;
}
footer dl dd{
text-align:center;
margin:0;
padding:0;
font-weight:200;
}
footer dl dd p{
font-size:110%;
}
footer dl .mail{
margin:30px 0;
}
footer dl .mail a{
display:inline-block;
padding:1em 2em 1em 2em;
line-height:1;
position:relative;
background:#356ebb;
font-size:1.2em;
}
footer dl .mail a:hover{
opacity:0.6;
}
footer dl .tel{
display:block;
margin:30px 0;
line-height:1;
vertical-align:middle;
font-size:14px;
}
footer dl .tel span{
display:block;
font-size:1.4em;
}
footer dl .tel a{
font-size:30px;
padding:0;
margin:0;
position:relative;
vertical-align:middle;
}

#jumptop{
text-align:center;
margin:0 auto;
max-width:100%;
position:relative;
border-bottom:solid 2px #455B86;
}
#jumptop a{
display:block;
width:100%;
position:relative;
margin:0px 0 -0.5em 0;
padding:0px 0 0px 0;
font-size:80px;
color:#455B86;
}
#jumptop a:hover{
transform:translateY(-10px);
}









@media (max-width:1024px){
nav{
position:relative;
top:0;
left:0;
height:500px;
z-index:10;
max-width:280px;
margin:0;
padding:0;
}
nav {
text-align: right;
margin-left: auto;
background-color: #e9e9ff;
box-sizing: border-box;
position: fixed;
right: -280px;
top: 0;
transition: transform 0.4s linear 0s;
width: 280px;
z-index: 2001;
}
nav:before {
text-align: right;
margin-left: auto;
background-color: #022C6C;
color: #ffffff;
content: "≡";
display: block;
font-size: 50px;
height: 50px;
line-height: 50px;
position: absolute;
right: 100%;
text-align: center;
top: 0;
width: 50px;
}

nav:hover {
    transform: translate(-280px);
}

nav ul, nav li{list-style:none;margin:0px auto 10px auto;padding:10px auto 10px auto;}

nav > ul{width:100%;}

nav > ul > li{clear:both;text-align:center;position:relative;width:100%;}

nav > ul > li > a{
font-size:16px;
text-decoration:none;
display:block;
height:24px;
line-height:70px;
padding:10px auto 10px auto;
background-color:transparent;
position:relative;
z-index:10;
color:#000000;
}
nav > ul > li > a:after{
display:block;
position:absolute;
left:0;
right:0;
width:auto;
height:1px;
top:150%;
margin:1em 0 0 0;
-webkit-transform:scaleX(0);
transform:scaleX(0);opacity:0;
-webkit-transition:-webkit-transform 0.35s, opacity 0.35s;transition:transform 0.35s, opacity 0.35s;-webkit-transform-origin:50% 50%;transform-origin:50% 50%;
background:#455B86;background:-webkit-linear-gradient(left, #455B86 0%, #149cb5 50%, #455B86 100%);
background:linear-gradient(to right, #455B86 0%, #149cb5 50%, #455B86 100%);
}
nav > ul > li.active > span > a:after,
nav > ul > li.active > a:after,
nav > ul > li:hover > span > a:after,
nav > ul > li:hover > a:after{-webkit-transform:scaleX(1);transform:scaleX(1);opacity:1;}
}

@-ms-viewport{width:device-width;}

@media screen and (min-width:978px){
	#topbar, #header, #mainav, #breadcrumb, .container, .centred, #footer, #copyright{max-width:978px;}
}

@media screen and (max-width:900px){
  .container{max-width:90%;}
	#comments input[type="reset"]{margin-top:10px;}
}

@media screen and (max-width:750px){
	.imgl, .imgr{display:inline-block; float:none; margin:0 0 10px 0;}
	.fl_left, .fl_right{display:block; float:none;}
	.one_half, .one_third, .two_third, .one_quarter, .two_quarter, .three_quarter{display:block; float:none; width:auto; margin:0 0 30px 0; padding:0;}
}

@media screen and (max-width:650px){
	.container, #footer{padding-bottom:50px;}
}