html {font-size: 62.5%;}

/*リセット*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

body {
	font-family:  "source-han-serif-japanese","ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E",  "MS 明朝", "NotoSerifCJKjp-Regular", serif;
	font-style: normal;
	font-size: 10px; font-size: 1.2rem; font-size: 1.4em;
	line-height: 1.5em;
	font-size: 16px;
	color:#4d4d4d;
	background: #fff; /* Old browsers */
	padding: 0;
	margin: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}


ol, ul {
	list-style: none;
}
*{
margin:0;
padding:0;
}

/*共通部分*/
h1,h2,h3{
	color: #4d4d4d;
}
h1{
	font-size: 40px;
}

h2{
	font-size: 26px;
	margin-bottom: 1em;
	line-height: 1.8em;
}

article{
	width: 1050px;
	margin: 0 auto;
}

.title{
	padding-top: 6em;
	margin-bottom: 3em;
}

.content{
	margin-bottom: 6em;
}

.sub_title{
	text-align: center;
	padding-top: 4em;
}

.sub_title h1{
	margin-bottom: 3em;
}

.under{
	border-bottom: 1px solid #adadad;
}

.sub_main{
	margin-bottom: 6em;
}


/*ボタン*/
.button{
	position: relative;
	padding: .8em .8em;
	border: 2px solid #333;
	color: #333;
	background:#fff;
	text-align: center;
	box-shadow: 5px 5px #999;
	transition: .3s;
	width: 250px;
	margin: 0 auto;
	text-decoration: none;
	z-index: 100;
}
.main_btn a{
	text-decoration: none;
	margin-top: 3em;
}

.button:hover{
	color: #fff;
}

.button::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  content: '';
  background: #333;
  transform-origin: right top;
	transform: scale(0, 1);
	-wbkit-transform: scale(0, 1);
  transition: transform .3s;
}
.button:hover::before {
  transform-origin: left top;
	-webkit-transform: scale(1, 1);
	transform: scale(1, 1);
}

/*ヘッダー*/
header{
  width: 100%;
  height: auto;
}

.nav_frame{
  width: 1050px;
  margin: 0 auto;
}

.logo{
  width: 20%;
  margin: 0 auto;
	padding-top: 3em;
}

.navi-btn,
.nav-wrap{
  display: none;
}

.navbar{
	margin-bottom: 2em;
	padding-top: 3em;
}

li{
  color: #4d4d4d;
  display: inline-block;
  width: 19%;
  text-align: center;
	text-decoration: none;
}

.nav a{
	text-decoration: none;
	color: #4d4d4d;
}

header .jp{
  background-color: #333;
  /* width: 300px;
  height: 100px; */
  color: #fff;
  padding: 0.7em 3em;
}
.en{
  display: block;
}
.jp{
  border: none;
}
.en:hover{
  background: none;
}
.en:hover .jp{
  visibility: hidden;
}

a.menu span.en{
	display:inline;
}
a.menu:hover span.en{
	display:none;
}
a.menu span.jp{
	display:none;
}
a.menu:hover span.jp{
	display:inline;
}

/*フッター*/
footer{
	width: 100%;
//	background-color: #1a1a1a;
	background-color: #535653;
}
.footer_frame{
	width: 1050px;
	margin: 0 auto;
	position: relative;
	height: 350px;
}

.footer_left{
	display: inline-block;
	width: 30%;
}

.footer_logo{
	width: 70%;
	padding-top: 5em;
	margin-bottom: 2em;
}

.info{
	color: #fff;
	font-family: "游ゴシック", "ヒラギノ角ゴ Pro W3";
	font-size: 14px;
	line-height: 2em;
}

.footer_nav{
	display: inline-block;
	width: 30%;
	text-align: right;
	vertical-align: top;
	padding-top: 2.4em;
	position: absolute;
	right: 0;
}
.footer_nav li a{
	color: #fff;
	text-decoration: none;
}

.footer_nav li{
	display: block;
	font-family: "游ゴシック", "ヒラギノ角ゴ Pro W3";
	font-size: 14px;
	line-height: 2.9em;
	width: 100%;
	text-align: right;
}


/*common*/
.contact_common{
	background: url("../images/contact_bg.jpg") repeat center center;
	width: 100%;
	padding: 6em 0;
}

.contact_frame{
	background-color: rgba(255,255,255,0.6);
	width: 1050px;
	margin: 0 auto;
}

.contact_frame .title{
	padding-top: 3em;
	text-align: center;
}

.contact_mail, .contact_phone{
	display: inline-block;
	width: 49%;
	text-align: center;
	margin-bottom: 3em;
}

.fas, .button{
	display: block;
}

.fas{
	font-size: 50px;
	margin-bottom: 0.7em;
}

.contact_phone{
	border-left: 1px solid #939393;
}


/*トップ*/
#top_page .top_main{
	background: url("../images/top_main.jpg") no-repeat center center;
	width: 100%;
	height: 600px
	}

	.top_concept_image{
		background: url("../images/top_concept.jpg") no-repeat center center;
		width: 100%;
		height: 450px
	}

.top_concept span{
	letter-spacing: 0.7em;
}

	#top_page h1{
		margin-bottom: 1em;
	}

	.left_box{
		display: inline-block;
		width: 50%;
	}

	.right_box{
		display: inline-block;
		width: 50%;
		text-align: left;
		vertical-align: top;
	}

	.text_box{
		margin-left: 57px;
	}

	.right_box h2{
		width: 90%;
	}

	.right_box span{
		line-height: 2.5em;
		font-size: 16px;
		width: 90%;
	}

/*施工事例*/
.works_content{
	width: 1050px;
	margin-left: auto;
	margin-right: auto;
}

.works_title{
	font-size: 20px;
}

.left{
	width: 50%;
	display: inline-block;
}

.right{
	width: 50%;
	display: inline-block;
}

.r_box{
	margin-left: 45px;
}

.l_box{
	margin-left: 0;
	margin-right: 45px;
}

.top_works_frame{
	font-size: 0;
}

.top_works_frame img{
	width: 100%;
}

.top_works_frame span{
	display: block;
}

.case_name{
	font-size: 18px;
}

.box{
	margin-bottom: 50px;
}

/*会社概要*/
table{
	width: 100%;
}

tr{
	border-bottom: 1px solid #adadad;
}

th,td{
	padding: 1.5em 2em;
}

tr:first-child th,
tr:first-child td{
	padding-top: 0;
}

th{
	width: 35%;
}

td{
	width: 65%;
}

/*求人情報*/
h2.item{
	text-align: center;
	font-weight: bold;
	padding-bottom: 1.5em;
	margin-bottom: 0;
}

dl{
	border: 1px solid #adadad;
	/* border:1px solid #EEE;
box-shadow:rgba(122, 122, 122, 0.0588235) 0px 0px 6px 3px inset;
-webkit-box-shadow:rgba(122, 122, 122, 0.0588235) 0px 0px 6px 3px inset;
-moz-box-shadow:rgba(122, 122, 122, 0.0588235) 0px 0px 6px 3px inset; */
}

dt{
	padding-top: 3em;
	padding-left: 4em;
}

dd{
	padding-left: 5em;

}

dd:last-child {
	padding-bottom: 3em;
}

.note {
    position:relative;
    overflow:hidden;
}

.note:before {
    content:"";
    position:absolute;
    top:0;
    right:0;
    border-width:0 50px 50px 0; /* This trick side-steps a webkit bug */
    border-style:solid;
    border-color:#fff #fff #adadad; /* A bit more verbose to work with .rounded too */
    display:block; width:0; /* Only for Firefox 3.0 damage limitation */
/* Optional: shadow */
    box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
}

/*お問い合わせ*/
h3{
	text-align: center;
	margin-bottom: 4em;
}

form tr{
	border-bottom: none;
	width: 100%;
}

form th{
	padding-left: 0;
	vertical-align: middle;
}

form td{
	padding-right: 0;
}

input{
	height: 50px;
	width: 100%;
}
textarea{
	height: 250px;
	width: 100%;
}

form table{
	margin-bottom: 3em;
	width: 1050px;
}

.hissu{
	font-size: 12px;
	color: red;
	margin-left: 1em;
}

/*アニメーション*/
/* .animation{
	margin: 50px 0;
} */

.fadeInDown {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:2s;
 -ms-animation-duration:2s;
 animation-duration:2s;
 -webkit-animation-name: fadeInDown;
 animation-name: fadeInDown;
 visibility: visible !important;
}
@-webkit-keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}


@media (max-width: 767px){
	body {
		font-family:  "source-han-serif-japanese","ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E",  "MS 明朝", "NotoSerifCJKjp-Regular", serif;
		font-style: normal;
		font-size: 10px; font-size: 1.2rem; font-size: 1.4em;
		line-height: 1.5em;
		font-size: 16px;
		color:#4d4d4d;
		background: #fff; /* Old browsers */
		padding: 0;
		margin: 0;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

/*ヘッダー*/
.nav{
	display: none;
}

header{
	position: fixed;
	top: 0;
	left: 0;
	z-index: 200;
	height: 70px;
	background: #fff;
}

#head{
	background: #fff;
}

.nav-wrap.active{
	display: block;
	top:80px;
	width:100%;
	z-index:100;
}
.nav-wrap.active .nav{
	display: block;
	text-align: center;
	background: #fff;
	padding: 80px 0 20px 0;

}
.nav-wrap.active li{
	border-bottom:1px dotted #ccc;
}
.nav-wrap.active li:first-child{
	border-bottom:1px dotted #ccc;
}
.nav-wrap.active li:last-child{
	border-bottom:none;
}


.nav_frame{
	width: 100%;
	height: 80px;
	position: relative;
}

.logo{
	width: 40%;
	height: auto;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 210px;
	left: 0;
	margin: auto;
	padding-top: 1.5em;
	/* width: 40%;
	margin: 1.5em 0;
	padding: 0;
	display: inline-block; */
}

.navi-btn{
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 10;
	right: 0;
	background: #fff;
	width: 20%;
	height: 80px;
}

.navi-btn div{
	width: 100%;
	height: 100%;
	position: relative;
}

.navi-btn span{
	border: 2px solid #4d4d4d;
	border-radius: 3px;
	width: 50%;
	height: 4px;
	right: 10%;
	position: absolute;
}

.navi-btn span:nth-child(1){
	top: 25px;
}

.navi-btn span:nth-child(2){
	top: 38px;
}

.navi-btn span:nth-child(3){
	bottom: 25px;
}

.navi-btn.active span:nth-of-type(1) {
	transform: translateY(10px) rotate(-315deg) scale(.8);
}
.navi-btn.active span:nth-of-type(2) {
	display: none;
}
.navi-btn.active span:nth-of-type(3) {
	transform: translateY(-17px) rotate(315deg) scale(.8);
}

.nav>li{
	width: 100%;
}





/*共通部分*/
#top_page,
#sub_page{
	width: 96%;
margin:  0 auto;
padding-top: 80px;
}


article{
	width: 100%;
	margin: 0 auto;
}

h1{
	font-size: 30px;
}

.sub_main{
	width: 100%;
	margin-bottom: 3em;
}

.sub_image{
	width: 100%;
	background-size: contain;
}

img{
	width: 100%;
}

.img-no-reset {
	width: 28px;
}

.content{
	margin-bottom: 4em;
}

.button::before,
.button:hover::before{
	display: none;
}


/*common*/
.contact_common{
	width: 100%;
	margin: 0 auto;
	padding: 3em 0;
}

.contact_frame{
	width: 90%;
}

.contact_mail,
.contact_phone{
	display: block;
	width: 100%;
	border: none;
}

.contact_phone{
	padding-bottom: 4em;
	margin-bottom: 0;
}

.fas{
	margin-bottom: 0.4em;
}

.contact_common .button{
	margin-top: 0;
}


/*フッター*/
.footer_frame{
	width: 100%;
}

.footer_nav{
	display: none;
}

.footer_left{
	width: 100%;
}

.footer_logo{
	margin: 0 auto;
	padding: 4em 0 2em 0;
}

.info_box{
	text-align: center;
}

p.info{
	line-height: 1.7em
}



/*トップ*/
#top_page .top_main{
	height: 500px;
	width: 100%;
}

.left_box,
.right_box{
	display: block;
	width: 100%;
}

.top_concept_image{
	background-size: contain;
	height: 150px;
}

.top_concept span{
	letter-spacing: 0.3em;
}

.text_box{
	margin-left: 0;
}

.text_box h2,
.text_box span{
	width: 100%;
}

.text_box h2{
	font-size: 22px;
}

/*ボタン*/
.button{
	width: 60%;
}

/*会社概要*/
tr{
	width: 100%;
	display: block;
	margin-bottom: 2em;
}

th,
td{
	width: 100%;
	display: block;
	padding: 0;
}

th{
	margin-bottom: 0.7em;
}

td{
	line-height: 1.7em;
	padding: 0 0 1em 1em;
}

/*求人募集*/
dt{
	padding-left: 1em;
}

dd{
	padding: 0 2em;
}

/*お問い合わせ*/
form table{
	width: 100%;
}

form td{
	padding-left: 0 ;
}

h3{
	line-height: 2em;
}

/*施工事例*/
.works_content{
	width: 100%;
}

.left,
.right{
	width: 100%;
}

.top_works_frame .box{
	margin: 0 0 50px 0;
}
}

.tel_num {
	font-size: 3vw;
	font-weight: bold;
	margin-bottom: 10px;
}