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

初期化

////////////////////////////////////////////*/

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td{  
    margin: 0; padding:0;  
}  
table{  
    border-collapse: collapse; border-spacing:0;  
}  
fieldset, img{  
    border: 0;  
}  
address, caption, cite, code, dfn, em, strong, th, var{  
    font-style: normal; font-weight:normal;  
}  
ol, ul{  
    list-style: none;  
}  
caption, th{  
    text-align: left;  
}  
h1, h2, h3, h4, h5, h6{  
    font-size:100%; font-weight:normal;  
}  
q:before, q:after{  
    content:”;  
}  
abbr, acronym{  
    border:0;  
}  
a{
	color: #444;
	cursor: pointer;
	text-decoration: none;
}
a:hover{
	text-decoration: underline;
	cursor: pointer;
}
figure{
	margin: 0;
	padding: 0;
}
/* ///////////////////////////////////////////

Font

////////////////////////////////////////////*/

body {
	font:16px/1.231 "arial","helvetica",'メイリオ','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',sans-serif;
	/* for IE6/7 */ 
	*font-size:small; 
	/* for IE Quirks Mode */
	*font:x-small; 
	color: #555;
	line-height: 1.7;
	}



select,
input,
button,
textarea,
button {
	font:99% arial,helvetica,clean,sans-serif;
}
button{
	border: none;
	background: none;
	margin: 10px 0 0 0;
}
table {
	font-size: inherit;
	font: 100%;
}

pre,
code,
kbd,
samp,
tt {
	font-family: monospace;
	*font-size: 108%;
	line-height: 100%;
}
.bold{
	font-weight: bold;
}
a:hover img{
	filter: alpha(opacity=80);
	-moz-opacity:0.80;
	opacity:0.80;
	}


/* ///////////////////////////////////////////

Global style

////////////////////////////////////////////*/

/* ///////////////////////////////////////////

Common style

////////////////////////////////////////////*/

.border{
	height: 1px;
	margin: 20px 0;
	border-bottom: 1px solid #ddd;
	}
p.borderBottom{
	border-bottom: 1px dotted #999;
}


.small{
	font-size: 90%;
}

/* common color */
.pink	{color: #ef0794;}
.gold	{color: #d5ac30;}
.blue	{color: #0698ff;}
.orange	{color: #ff8706;}
.violet	{color: #ff66fa;}
.purple	{color: #a158eb;}
.brown	{color:	#8B3234;}
.gray	{color:	#777;}
/*___/ clearfix /___*/

.tright{ text-align: right;}

.fright{ float: right;}
.fleft{ float: left;}
.clear{
    clear: both; 
}
.center{ text-align: center;}

.font10{	font-size: 10px;}
.font11{	font-size: 11px;}
.font12{	font-size: 12px;}
.font14{	font-size: 14px;}
.font18{	font-size: 18px;}
.font19{	font-size: 19px;}

.titleFontSmall{
	font-size: 10px;
	letter-spacing: 0.3em;
	float: right;
	margin-top: -45px;
}

.w280{	width: 280px;}
.w315{	width: 315px;}
.w340{	width: 340px;}
.w375{	width: 375px;}
.w400{	width: 400px;}
.w480{	width: 480px;}
.w500{	width: 500px;}
.w650{	width: 650px;}


.textRight{	text-align: right;}
.textCenter{ text-align: center; }

.mt5{	margin-top: 5px}
.mt10{	margin-top: 10px}
.mt13{	margin-top: 13px}
.mt15{	margin-top: 15px}
.mt20{	margin-top: 20px;}
.mt30{	margin-top: 30px;}
.mt40{	margin-top: 40px;}
.mt50{	margin-top: 50px;}
.mt60{	margin-top: 60px;}
.mt65{	margin-top: 65px;}
.mt150{	margin-top: 150px;}

.mb10{	margin-bottom: 10px;}
.mb15{	margin-bottom: 10px;}
.mb20{	margin-bottom: 20px;}
.mb30{	margin-bottom: 30px;}
.mb40{	margin-bottom: 40px;}

.mr5{	margin-right: 5px}
.mr10{	margin-right: 10px}
.mr15{	margin-right: 15px}
.mr20{	margin-right: 20px}
.mr30{	margin-right: 30px}
.mr40{	margin-right: 40px}

.ml5{	margin-left: 5px}
.ml10{	margin-left: 10px}
.ml15{	margin-left: 15px}
.ml20{	margin-left: 20px}

.p5{	padding: 5px}
.p10{	padding: 10px}
.p15{	padding: 15px}

.pl15{	padding-left: 15px}

.pr15{	padding-right: 15px}

.pb15{	padding-bottom: 15px}

.bold{	font-weight: bold;}

.pagetop{
	clear: both;
	text-align: right;
	margin: 15px 0;
}
.pagetopRight{
	position: fixed;
	bottom: 80px;
	right: 0;	
	}
.pagetopNews{
	clear: both;
	text-align: right;
	margin: 15px 0 140px 0;
}
.red{
	color: #990000; !important
}
strong{ font-weight: bold;}

clearfix:after{
	content: "";
    clear: both;
    height: 0;
    display: block;
    visibility: hidden;
	}
.contesnt-area a{
	color: #bdbdbd;
	text-decoration: underline;
	}
.contesnt-area a:hover{
	color: #eee;
	}

.newstext{
	font-size: 13px;
	letter-spacing: 2px;
	line-height: 1.8;
}
.date{
	font-size: 13px;
	margin: 6px 0 0 0;
}
#contents-area{
	background: #fff;
	z-index: 1001;
	margin: -40px 0 0 0;
	padding-bottom: 10px;
	}
#top-text01{
	position: absolute;
	right: 1%;
	bottom: 8%;
	z-index: 9999;
	}
#scroll{
	position: absolute;
	left: 50%;
	margin: 0 0 0 -25px;
	bottom: 7%;
	z-index: 1100;
	}
#s01{
	position: relative;
	z-index: 40;
	}
#loader {
    display: none;
    position: fixed;
    _position: absolute; /* IE6対策 */
    top: 0;
    left: 0;
    z-index: 99100;
	 width: 100%;
    height: 100%;
	background-color: #FFFFFF;
}
#loader img{
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -200px;
	margin-left: -200px;
}
 
#fade {
    width: 100%;
    height: 100%;
    display: none;
    background-color: #FFFFFF;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1050;
}
#container{
	z-index: 10
	}


/* 追加文 */
.news-img{
	height: 200px;
	overflow: hidden;
}

.top-navi li{
	float: left;
	margin: 0 2px;
}
.top-left-area{
	height: 100%;
	background: #fff;
	z-index: 10000;
	width: 320px;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}
.top-right-area{
	height: 100%;
	background: #fff;
	width: 40px;
	position: fixed;
	top: 0;
	bottom: 0;
	right: 0;
}
.top-right-area address{
	position: absolute;
	top: 50%;
	margin: -100px 0 0 15px;
}
html,
body,
{height:100%;}

#s01{
	position: relative;
}
#logo{
	position: absolute;
	left: 50%;
	top: 17%;
	margin-left: -50px;
}
.top-navi{
	width: 240px;
	margin: 0 0 0 46px;
	position: absolute;
	top: 45%;
}
.top-news-box{
	float: left;
	margin: 0 0 0 2%;
	width: 31%;
}
.top-news-box img{
	width: 100%;
	height: auto;
}
footer{
	clear: both;
}

.box {
  display: table;
  table-layout: fixed;
  width: 100%;
  padding: 40px 0 0 0;
}
.top-line1 .boxLeft{
  display: table-cell;
  width: 250px;
  padding: 10px 0 10px 40px;
  vertical-align: top;
}
.top-line1 .boxRight{
  display: table-cell;
  width: 100%;
  padding-right: 40px;
}
.top-line1 .boxRightInner{
  padding: 10px;
}
.top-line1 .boxRightInner input{
  width: 100%;
}
.top-line2{
	width: 100%;
	display: table;
	margin: 70px 0;
}
.top-line2-left{
	display: table-cell;
	width: 50%;
	vertical-align: top;
	background: url(../images/top-photo1.jpg) no-repeat 50% 50%;
	background-size: cover;
}
.top-line2-left img{
	width: 100%;
	height: auto;
}
.top-line2-right{
	display: table-cell;
	width: 50%;
	vertical-align: top;
}
.line2-right-contents{
	padding: 80px 60px;
}
.text1{
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-size: 24px;
	letter-spacing: 4px;
}
.top-line3 .boxLeft{
  display: table-cell;
  width: 250px;
  padding: 0 40px 0 0;
  vertical-align: top;
}
.top-line3 .boxRight{
  display: table-cell;
  width: 100%;
  padding-right: 40px;
}

.top-line3 .boxRightInner input{
  width: 100%;
}
.title-top-work{
	padding-left: 180px;
}
.top-works-box{
	float: left;
	margin: 0;
	width: 32%;
	margin-right: 1px;
	position: relative;
	min-height: 300px;
	overflow: hidden;
}
.top-works-name{
	color: #333;
	padding-left: 10px;
}
.top-works-box img{
	width: 150%;
	height: auto;
	text-align: center;
	margin-left: -90px;
}
.top-line3{
	width: 100%;
	display: table;
	margin: 40px 0;
}
footer{
	position: relative;
}
.footer-link{
	position: absolute;
	bottom: 0px;
	left: 20px;
}
.footer-link li{
	float: left;
	font-size: 12px;
	margin: 0 5px;
}
.footer-link li:first-child{
	border-right: 1px solid #444;
	padding-right: 10px;
}
.pagetop{
	margin-right: 40px;
}
.top-work-text{
	margin-top: -60px;
}

.smt-off{
	display: block; 
	}
.smt-boff{
	display: block; 
	}
.smt-on{
	display: none; 
	}
.smt-bon{
	display: none; 
	}
.top-navi-2019 li{
	float: left;
	margin: 0 2px;;
}
.top-navi-div{
	width: 240px;
	margin: 0 0 0 32px;
	position: absolute;
	top: 45%;
}
.btcareers{
	position: absolute;
    bottom: -50px;
	text-align: center;
	width: 100%;
}



/* 高さ 以下の場合に適用 */
@media screen and (max-height: 650px){


#logo {
    left: 50%;
    margin-left: -50px;
    position: absolute;
    top: 10%;
}
	.top-navi {
    margin: 0 0 0 32px;
    position: absolute;
    top: 45%;
    width: 240px;
}
	.top-navi-div {
    margin: 0 0 0 32px;
    position: absolute;
    top: 45%;
    width: 240px;
}

}


/* 高さ 以下の場合に適用 */
@media screen and (max-height: 580px){


#logo {
    left: 50%;
    margin-left: -50px;
    position: absolute;
    top: 8%;
}
	.top-navi {
    margin: 0 0 0 32px;
    position: absolute;
    top: 50%;
    width: 240px;
}
			.top-navi-div {
    margin: 0 0 0 32px;
    position: absolute;
    top: 50%;
    width: 240px;
}

}