@charset "utf-8";
/* CSS Document */

/* =====================================
	# COMMON.CSS
	- NORMALIZE
	- OPTIMIZE
	- MULTIPLE CLASS
	- BASE DESIGN

	# media queries
	@media screen and (max-width: 1200px)
	@media screen and (max-width: 768px)
	@media screen and (max-width: 480px)

	# media queries sub
	@media screen and (max-width: 992px)
	@media screen and (max-width: 640px)
======================================== */

/* normalize.css v3.0.3
---------------------------------------- */
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:400}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:400}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}


/* OPTIMIZE
---------------------------------------- */
*,*:before,*:after {box-sizing: border-box;}
h1,h2,h3,h4,h5,h6 {font-size: 100%; margin: 0; padding: 0;}
p,dl,dt,dd {margin: 0; padding: 0;}
ol,ul {list-style-type: none; margin: 0; padding: 0;}
img {height: auto; vertical-align: top; max-width: 100%; }
figure {margin: 0;}
input[type=date],input[type=datetime],input[type=datetime-local],input[type=email],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week],textarea,select {border: 1px solid #a9a9a9; padding: .2em;}
label > input[type=radio],label > input[type=checkbox] {margin-right: .5em;}
input:-ms-input-placeholder,textarea:-ms-input-placeholder {color: #A9A9A9;}


/* MULTIPLE CLASS
---------------------------------------- */
.bdN {border: none;} .dB {display: block;} .dI {display: inline;} .dIB {display: inline-block;} .dN {display: none;} .fL {float: left;} .fR {float: right;} .fN {float: none;} .fs10 {font-size: 65%;} .fs11 {font-size: 71%;} .fs12 {font-size: 78%;} .fs13 {font-size: 84%;} .fs14 {font-size: 90%;} .fs15 {font-size: 96%;} .fs16 {font-size: 100%;} .fs18 {font-size: 115%;} .fs20 {font-size: 128%;} .fs22 {font-size: 140%;} .fs24 {font-size: 153%;} .fs28 {font-size: 178%;} .fwB {font-weight: 400;} .fwN {font-weight: normal;} .lh10 {line-height: 1;} .lh11 {line-height: 1.1;} .lh12 {line-height: 1.2;} .lh13 {line-height: 1.3;} .lh14 {line-height: 1.4;} .lh15 {line-height: 1.5;} .lh16 {line-height: 1.6;} .lh17 {line-height: 1.7;} .lh18 {line-height: 1.8;} .lh19 {line-height: 1.9;} .lh20 {line-height: 2.0;} .taL {text-align: left;} .taR {text-align: right;} .taC {text-align: center;} .m00 {margin: 0;} .m10 {margin: 10px;} .m20 {margin: 20px;} .m30 {margin: 30px;} .m40 {margin: 40px;} .m50 {margin: 50px;} .m60 {margin: 60px;} .mT10 {margin-top: 10px;} .mT20 {margin-top: 20px;} .mT30 {margin-top: 30px;} .mT40 {margin-top: 40px;} .mT50 {margin-top: 50px;} .mT60 {margin-top: 60px;} .mR10 {margin-right: 10px;} .mR20 {margin-right: 20px;} .mR30 {margin-right: 30px;} .mR40 {margin-right: 40px;} .mR50 {margin-right: 50px;} .mR60 {margin-right: 60px;} .mB10 {margin-bottom: 10px;} .mB20 {margin-bottom: 20px;} .mB30 {margin-bottom: 30px;} .mB40 {margin-bottom: 40px;} .mB50 {margin-bottom: 50px;} .mB60 {margin-bottom: 60px;} .mL10 {margin-left: 10px;} .mL20 {margin-left: 20px;} .mL30 {margin-left: 30px;} .mR40 {margin-right: 40px;} .mR50 {margin-right: 50px;} .mR60 {margin-right: 60px;} .op0 {opacity: 0;} .p00 {padding: 0;} .p10 {padding: 10px;} .p20 {padding: 20px;} .p30 {padding: 30px;} .p40 {padding: 40px;} .p50 {padding: 50px;} .p60 {padding: 60px;} .pT10 {padding-top: 10px;} .pT20 {padding-top: 20px;} .pT30 {padding-top: 30px;} .pT40 {padding-top: 40px;} .pT50 {padding-top: 50px;} .pT60 {padding-top: 60px;} .pR10 {padding-right: 10px;} .pR20 {padding-right: 20px;} .pR30 {padding-right: 30px;} .pR40 {padding-right: 40px;} .pR50 {padding-right: 50px;} .pR60 {padding-right: 60px;} .pB10 {padding-bottom: 10px;} .pB20 {padding-bottom: 20px;} .pB30 {padding-bottom: 30px;} .pB40 {padding-bottom: 40px;} .pB50 {padding-bottom: 50px;} .pB60 {padding-bottom: 60px;} .pL10 {padding-left: 10px;} .pL20 {padding-left: 20px;} .pL30 {padding-left: 30px;} .pL40 {padding-left: 40px;} .pL50 {padding-left: 50px;} .pL60 {padding-left: 60px;} .posR {position: relative;} .posA {position: absolute;} .posF {position: fixed;} .posS {position: static;} .vaT {vertical-align: top;} .vaB {vertical-align: bottom;} .vaM {vertical-align: middle;} .vaBL {vertical-align: baseline;} .w10p {width: 10%;} .w20p {width: 20%;} .w30p {width: 30%;} .w40p {width: 40%;} .w50p {width: 50%;} .w60p {width: 60%;} .w70p {width: 70%;} .w80p {width: 80%;} .w90p {width: 90%;} .w100p {width: 100%;}

.clearfix:before, .clearfix:after {content: ""; display: block;} .clearfix:after {clear: both;} .clearfix {zoom: 1;}
.rollalpha:hover {filter: alpha(opacity=70); -ms-filter: "alpha(opacity=70)"; zoom: 1;}


/* BASE DESIGN
---------------------------------------- */
html,body {height: 100%;}
body {color: #777; font-size: 100%; font-family: 'Lucida Grande','segoe UI','ヒラギノ角ゴ ProN W3','Hiragino Kaku Gothic ProN','メイリオ','Meiryo',sans-serif; line-height: 1.5; -webkit-text-size-adjust: 100%;}

a {color:#777; text-decoration: none;}
a:link {color: #777;}
a:visited {color: #777;}
a:active {color: #777;}
a:hover {color:#777; text-decoration: underline;}

.sp_ver {display:none;}
@media screen and (max-width: 768px) {
	.pc_ver { display: none;}
	.sp_ver { display: inherit;}
}

/* basic margin */
.r_mLR60 {margin-left: 60px; margin-right: 60px;}
	@media screen and (max-width: 1200px) {
		.r_mLR60 {margin-left: 30px; margin-right: 30px;}
	}
	@media screen and (max-width: 768px) {
		.r_mLR60 {margin-left: 20px; margin-right: 20px;}
	}
	@media screen and (max-width: 480px) {
		.r_mLR60 {margin-left: 10px; margin-right: 10px;}
	}


/* HEADER
---------------------------------------- */
#header {padding-top: 30px; position: relative;}
	@media screen and (min-width: 769px) {
		#logo img{
			-webkit-transform-style: preserve-3d;           /* 3D表現使用する */
			-webkit-perspective: 100;                       /* パース(遠近感)の設定 */
			-webkit-transition: -webkit-transform 1s linear /* アニメーションの基本動作を設定 */
		}
		@-webkit-keyframes turnZ{
			0%{-webkit-transform: rotateZ(0deg);}
			100%{-webkit-transform: rotateZ(360deg);}
		}
		#logo img:hover{
			-webkit-animation-name: turnZ;
			-webkit-animation-duration: .3s;
			-webkit-animation-iteration-count: 1;
		}
	}
	@media screen and (max-width: 768px) {
		#header {padding-top: 20px;}
		#logo img {height: auto; width: 70px;}
	}
	@media screen and (max-width: 480px) {
		#header {padding-top: 10px;}
		#logo img {height: auto; width: 40px;}
	}
	#logo svg {
		width: 101px;
		max-height: 27px;
	}
	@media (max-width: 768px) {
		#logo {
			padding-top: 7px;
		}
			#logo svg {
				width: 70px;
				max-height: 18px;
			}
	}


/* GNAV
---------------------------------------- */
#gnav {position: absolute; right: 0; top: 30px;}
#gnav ul {text-align: right;}
#gnav ul li {display: inline-block; font-size: 16px;}
#gnav ul li:after {content:'/'; display: inline-block; margin: 0 .6em 0 .9em;}
#gnav ul li:last-child:after {content: none;}

#mb_menuTrigger {display: none;}

	@media screen and (max-width: 768px) {
		#gnav {background: rgba(255,255,255,.95); height: 100%; padding: 60px; position: fixed; top: -200%; width: 100%; z-index: 100;}
		#gnav ul {text-align: left;}
		#gnav ul li {display: block;}
		#gnav ul li a {border-bottom: 1px solid #bbb; display: block; font-size: 20px; padding: 20px 0 10px;}
		#gnav ul li:after {content:''; margin: 0;}

		/* ハンバーガーメニューのアニメーション */
		#mb_menuTrigger,
		#mb_menuTrigger span {display: inline-block; transition: all .4s;}
		#mb_menuTrigger {position: absolute; top: 30px; right: 10px; width: 14px; height: 14px; z-index: 101;}
		#mb_menuTrigger span {position: absolute; left: 0; width: 100%; height: 2px; background: #777; border-radius: 3px;}
		#mb_menuTrigger span:nth-of-type(1) {top: 0;}
		#mb_menuTrigger span:nth-of-type(2) {top: 6px;}
		#mb_menuTrigger span:nth-of-type(3) {bottom: 0;}
		#mb_menuTrigger.active span:nth-of-type(1) {-webkit-transform: translateY(6px) rotate(-45deg); transform: translateY(6px) rotate(-45deg);}
		#mb_menuTrigger.active span:nth-of-type(2) {opacity: 0;}
		#mb_menuTrigger.active span:nth-of-type(3) {-webkit-transform: translateY(-6px) rotate(45deg); transform: translateY(-6px) rotate(45deg);}
	}
	@media screen and (max-width: 480px) {
		#gnav {padding: 30px;}
		#mb_menuTrigger {top: 20px;}
	}

#gnav ul li a,#gnav ul li::after {
	color: #4a4e6d;
	text-shadow: none;
	font-weight: bold
}

/* LocalNAVI
---------------------------------------- */

.lNav{ padding:30px 45px 0 45px; }
.lNav li{
height: 80px;
overflow: hidden;
position: relative;
float: left;
padding:1px;
/* -webkit-transition: all 50ms linear;
 *//* -moz-transition: all 50ms linear;
 *//* -o-transition: all 50ms linear;
 *//* -ms-transition: all 50ms linear;
 *//* transition: all 50ms linear;
 */}
.lNav li a{
text-align: center;
width: 100%;
height: 100%;
display: block;
background: #e8f8f7;
color: #333;
position: relative;
border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px;
}
.lNav li a:hover { text-decoration:none; }
.ca-content{
position: absolute;
left: 0px;
width: 100%;
height: 75%;
top: 25%;
}
.ca-main{
font-size: 16px;
letter-spacing:3px;
color: #004F9D;
text-align: center;
/* -webkit-transition: all 50ms linear;
 *//* -moz-transition: all 50ms linear;
 *//* -o-transition: all 50ms linear;
 *//* -ms-transition: all 50ms linear;
 *//* transition: all 50ms linear;
 */}
.ca-sub{
text-align:center;
font-size: 11px;
color: #999999;
line-height: 20px;
/* -webkit-transition: all 50ms linear;
 *//* -moz-transition: all 50ms linear;
 *//* -o-transition: all 50ms linear;
 *//* -ms-transition: all 50ms linear;
 *//* transition: all 50ms linear;
 */}
.lNav li:hover .ca-main{
color: #ffffff;
-webkit-animation: moveFromTop 50ms ease;
-moz-animation: moveFromTop 50ms ease;
-ms-animation: moveFromTop 50ms ease;
}
.lNav li:hover .ca-sub{
color: #ffffff;
-webkit-animation: moveFromBottom 50ms ease;
-moz-animation: moveFromBottom 50ms ease;
-ms-animation: moveFromBottom 50ms ease;
}

/* インデックスページ用nav */
.indexPage .lNav { margin-top:320px; }
.lNav li:hover a,
.indexPage .lNav li:hover a { background-color: #004F9D; }
.indexPage #title { padding:60px 0 15px 0; margin-top:30px; color:#ffffff; background:#222222; }
.indexPage .lNav li { height: 140px; opacity:0.8; }
.indexPage .lNav li a { background-color:#ffffff; }
.indexPage .ca-content{ height: 65%; top: 35%; }


/* 項目数によって幅を設定 */
#toppage .lNav li { width:20%; }
#company .lNav li { width:16.6666%; }


/* TITLE
---------------------------------------- */
#title h1 {font-family: 'Work Sans', sans-serif; font-weight: 100; font-size: 100px; line-height: 1; text-align: center;}
#title h1 span {font-size: 18px; display: block; letter-spacing: .8em; margin-top: 10px;}
	@media screen and (max-width: 768px) {
		#title h1 {font-size: 80px;}
		#title h1 span {font-size: 16px;}
	}
	@media screen and (max-width: 480px) {
		#title h1 {font-size: 50px;}
		#title h1 span {font-size: 12px;}
	}


/* FOOTER
---------------------------------------- */
#footer {background: #222; color: #fff; padding: 10px 60px 30px; position: relative;}
#footer h1 {margin-top: 20px; margin-bottom: 5px;}
#footer .sitemap li {display: inline-block; font-size: 12px;}
#footer .sitemap a,
#footer .sitemap a:visited {color: #ccc; padding-left: 12px; background: url(/common/img/ico_arrow_footer.gif) no-repeat 5px center; display: inline-block;}
#footer .sitemap a:hover {color: #fff;}
#footer .address p {font-size: 13px;}
#footer .iso {position: absolute; bottom: 30px; right: 30px;}
#footer .copyright {margin-top: 20px;}
	@media screen and (max-width: 1200px) {
		#footer {padding: 10px 30px 30px;}
	}
	@media screen and (max-width: 768px) {
		#footer {padding: 10px 20px 20px;}
		#footer h1 {font-size: 14px;}
		#footer .iso {position: absolute; bottom: 20px; right: 20px;}
	}
	@media screen and (max-width: 480px) {
		#footer {padding: 10px 10px 20px;}
		#footer .iso {margin-top: 20px; position: relative; bottom: inherit; right: inherit;}
	}


/* PAGE TOP
---------------------------------------- */
#pageTop {position: fixed; bottom: 0; right: 0;}
#pageTop a {background: #fff; display: block; padding: 10px; opacity: .8;}
#pageTop a:hover {opacity: 1;}

@media screen and (max-width: 768px) {
#pageTop {display: none;}


/* ローカルナビ　スマホ用 */
.lNav{ padding:20px 1px 0 1px; text-align:center; line-height:1; }
.lNav li{
display:inline-block;
height:auto;
float:none;
margin-top:3px;
}
.lNav li a{
padding:2px 0 5px 0;
}
.ca-content{
position: relative;
left: 0px;
width: 100%;
height:auto;
top:5px;
}
.ca-main { font-size:13px; }
.ca-sub { font-size:9px; }

/* インデックスページ用nav */
.indexPage .lNav { margin-top:320px; }
.lNav li:hover a,
.indexPage .lNav li:hover a { background-color: #004F9D; }
.indexPage #title { padding:60px 0 15px 0; margin-top:30px; color:#ffffff; background:#222222; }
.indexPage .lNav li { height: 100px; opacity:0.8; }
.indexPage .lNav li a { background-color:#ffffff; }
.indexPage .ca-content{ height: 65%; top: 35%; }
.indexPage .ca-main { font-size:15px; }


/* 項目数によって幅を設定 */
#toppage .lNav li { width:100%; }
#company .lNav li { width:32%; }


}

/* ローディング */
#loading {width: 100%; height: 100%; background: #fff; position: fixed; z-index: 9999;}