@charset "utf-8";

/*----------------------------------------------------------------
 MainLayout
 -----------------------------------------------------------------
 c/p
 <link href="./common/css/layout.css" rel="stylesheet" type="text/css" media="screen,print" />
----------------------------------------------------------------*/

/*----------------------------------------------------------------
 font settings
----------------------------------------------------------------*/
@font-face {
	font-family: "Yu Gothic";
	src: local("Yu Gothic Medium");
	font-weight: 100;
}
@font-face {
	font-family: "Yu Gothic";
	src: local("Yu Gothic Medium");
	font-weight: 200;
}
@font-face {
	font-family: "Yu Gothic";
	src: local("Yu Gothic Medium");
	font-weight: 300;
}
@font-face {
	font-family: "Yu Gothic";
	src: local("Yu Gothic Medium");
	font-weight: 400;
}
@font-face {
	font-family: "Yu Gothic";
	src: local("Yu Gothic Bold");
	font-weight: bold;
}

/*----------------------------------------------------------------
 base
----------------------------------------------------------------*/
html,body{
	font-size			: 62.5%; /* 10px */
}
body{
	font-size			: 1.6rem;
	line-height			: 1.75;
	color				: #333;
	font-family			: -apple-system, BlinkMacSystemFont, "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro",'Hiragino Kaku Gothic Pro', Verdana, Meiryo, "M+ 1p", sans-serif;
}

/* inline element
-----------------------------------------------------*/

/* link
----------------------------------*/
a{
	transition			: all 0.3s ease 0s;
	text-decoration		: underline;
	color				: #333;
}
a:hover{ text-decoration: none; }
a[name]{
	text-decoration		: none;
	color				: #333;
}

/*-----------------------------------------------------
 class
-----------------------------------------------------*/

/* separater line
-----------------------------------------------------*/
hr.separater{ display: none; }

/* anchor(pagetop)
-----------------------------------------------------*/
p.anchor{
	visibility			: hidden;
	position			: absolute;
	top					: 0px;
	left				: 0px;
}
/* pagetoplink
-----------------------------------------------------*/
p.pagetop{
	position			: fixed;
	bottom				: 0px;
	right				: 0px;
	z-index				: 50;
	width				: 60px;
	height				: 60px;
}
p.pagetop a{
	display				: block;
	width				: 60px;
	height				: 60px;
	padding				: 23px 0 0 0;
	background			: #CCC;
	text-align			: center;
	line-height			: 1px;
}
p.pagetop a:hover{ background: #45b68a; }
@media screen and (max-width: 1100px){
p.pagetop{ display: none; }
}

/*----------------------------------------------------------------
 layout
----------------------------------------------------------------*/

/*-----------------------------------------------------
 wrap
-----------------------------------------------------*/
.wrap{
	position			: relative;
	overflow			: hidden;
}

#wrap{
	width				: 100%;
	padding				: 100px 0 0 0;
}

/*-----------------------------------------------------
 area
-----------------------------------------------------*/
.area{
	position			: relative;
	overflow			: hidden;
	clear				: both;
}
#header{
	position			: fixed;
	top					: 0px;
	z-index				: 50;
	width				: 100%;
	height				: 100px;
	background			: #FFF;
}
#mainview{
	margin				: 0 0 -150px 0;
	height				: 300px;
	background			: #999;
	text-align			: center;
	font-size			: 30px;
	color				: #FFF;
}
#contents{ padding: 0 0 50px 0; }
#footer{
	z-index				: 100;
	background			: #333;
	text-align			: center;
	color				: #FFF;
}

/*-----------------------------------------------------
 content
-----------------------------------------------------*/
.content{
	position			: relative;
	overflow			: hidden;
	clear				: both;
}
.content:first-child .container{ background: #FFF; }

/*-----------------------------------------------------
 container
-----------------------------------------------------*/
.container{
	position			: relative;
	overflow			: hidden;
	clear				: both;
	margin				: 0 auto;
	width				: 960px;
}
#header .container{
	width				: 1200px;
	height				: 100px;
	color				: #010101;
}
@media screen and (max-width: 1200px){ #header .container{ width: 100%; } }
@media screen and (max-width: 1115px){ #header .container{ width: 1115px; } }

#mainview .container{
	z-index				: 9;
	padding				: 55px 0 0 0;
}
#contents .container{}
#intro .container{
	min-height			: 150px;
	text-align			: center;
	padding				: 70px 0 0 0;
}
#footer .container{}

/*-----------------------------------------------------
 block
-----------------------------------------------------*/
.block{
	position			: relative;
	overflow			: hidden;
	clear				: both;
}

/*----------------------------------------------------------------
 styles
----------------------------------------------------------------*/

/*-----------------------------------------------------
 header
-----------------------------------------------------*/
#header a{
	text-decoration		: none;
	color				: #010101;
}

/* logo
-----------------------------------------------------*/
#header .logo{
	padding				: 9px 0 0 11px;
	line-height			: 28px;
	font-size			: 23px;
}
#header .logo img{
	float				: left;
	margin				: 0 13px 0 0;
}
#header .logo a:hover{ opacity: 0.5; }
#header .logo small{
	display				: inline-block;
	margin				: 13px 0 -2px 0;
	font-size			: 14px;
}

/* navi
-----------------------------------------------------*/
#header .navi{
	position			: absolute;
	right				: 10px;
	bottom				: 0px;
	font-size			: 13px;
}
#header .navi .contactus{
	display				: inline-block;
	position			: absolute;
	right				: 0;
	bottom				: 15px;
	z-index				: 10;
}
#header .navi .contactus a{
	display				: inline-block;
	border				: 1px solid #45b68a;
	padding				: 14px 9px;
	background			: transparent;
	text-decoration		: none;
	color				: #45b68a;
}
#header .navi .contactus a:hover{
	background			: #45b68a;
	color				: #FFF;
}
#header .navi ul{
	-js-display			: flex; /* IE */
	display				: -webkit-flex; /* Safari */
	display				: flex;
	flex-direction		: row;
	align-items			: baseline;
	margin				: 0 115px 0 0;
	width				: 100%;
	height				: 100px;
	list-style			: none;
}
#header .navi ul li{}
#header .navi ul li a{
	display				: inline-block;
	height				: 100px;
	padding				: 48px 9px 0 9px;
}
.home 		#header .navi ul li.home a,
.service 	#header .navi ul li.service a,
.result 	#header .navi ul li.result a,
.about 		#header .navi ul li.about a,
.advisor 	#header .navi ul li.advisor a,
#header .navi ul li a:hover{
	box-shadow			: 0 -3px 0 #45b68a inset;
	color				: #45b68a;
}

/*-----------------------------------------------------
 mainview
-----------------------------------------------------*/
#mainview .credit{
	position			: absolute;
	bottom				: 5px;
	z-index				: 10;
	width				: 100%;
	text-align			: left;
	font-size			: 12px;
}
#mainview .credit p{ margin: 0 auto; }
@media screen and (min-width: 1200px)	{ #mainview .credit p{ width: 1200px; } }
@media screen and (max-width: 1200px)	{ #mainview .credit p{ width: 100%; } }
@media screen and (max-width: 960px)	{ #mainview .credit p{ width: 960px; } }

/*-----------------------------------------------------
 footer
-----------------------------------------------------*/
#footer ul		{ list-style: none; }
#footer ul a		{ color: #FFF; }
#footer ul a:hover	{ color: #AAA; }

/* navi
-----------------------------------------------------*/
#footer .navi{
	position			: relative;
	overflow			: hidden;
	margin				: 38px auto 38px auto;
	line-height			: 40px;
	width				: 960px;
}
#footer .navi .contactus{
	display				: inline-block;
	position			: relative;
	z-index				: 10;
	float				: right;
	margin				: 0 1px 0 0;
}
#footer .navi .contactus a{
	display				: inline-block;
	opacity				: 1;
	border				: 1px solid #45b68a;
	padding				: 10px 19px;
	text-decoration		: none;
	color				: #45b68a;
}
#footer .navi .contactus a:hover{ opacity: 0.7; }

#footer .navi li{ display: inline-block; }
#footer .navi li:after{
	content				: "|";
	margin				: 0 1em 0 1.25em;
}
#footer .navi li:last-child{
	position			: relative;
	left				: 80px;
}
#footer .navi li:nth-child(5):after,
#footer .navi li:last-child:after{ content: ""; }
#footer .navi li:last-child:after{ margin: 0; }

#footer .navi li a{ text-decoration: none; }

/* address
-----------------------------------------------------*/
#footer .address{}
#footer .address:before{
	content				: "";
	display				: block;
	margin				: 0 auto;
	width				: 300px;
	height				: 1px;
	background			: #666;
	line-height			: 1px;
}
#footer .address .name{
	margin				: 33px 0 40px 0;
	line-height			: 36px;
	font-size			: 34px;
	font-weight			: 400;
}
#footer .address .name small{ font-size: 14px; }

#footer .address .contact li{ display: inline-block; }
#footer .address .contact li:after{
	content				: "|";
	margin				: 0 1em 0 1.5em;
}
#footer .address .contact li:last-child:after{ content: ""; }

/* copy
-----------------------------------------------------*/
#footer .copy{ margin: 35px 0; }