@charset "UTF-8";

/* 共通_レイアウト */
html {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 62.5%;
  overflow: scroll;
  
}

.mt40{margin-top: 40px;}
.mt100{margin-top: 100px;}
.mb10{margin-bottom: 10px;}
.mb20{margin-bottom: 20px;}
.mb30{margin-bottom: 30px;}
.mb50{margin-bottom: 50px;}
.pd-20{padding: 20px;}

.align-center{text-align: center;}

img{
  max-width:100%;
	height: auto;
  vertical-align:top;
}


@media screen and (min-width: 768px){	
  .br-pc { display:block; }
  .br-sp { display:none; }
}
@media screen and (max-width: 768px){	
  .br-pc { display:none; }
  .br-sp { display:block; }
}

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 899px) {
.pc { display: none !important; }
.sp { display: block !important; }
}

@media only screen and (max-width: 750px) {
img { max-width: 100%; }
}

@media screen and (max-width: 480px) {
  html {
    font-size: 2.5vw; /* base16px */
  }
}
body {
  -webkit-text-size-adjust: 100%;
  color: #000;
  font-family: 'Lato','Noto Serif JP',serif;
  font-size: 1.8em;
  line-height: 1.8;
  text-align: justify;
}

/* header
/* -------------------- */

.header-block {
	display: flex;
	padding-top: 150px;
	position: fixed;
}

.header-block .col-l {
	flex: 48%;
	padding: 50px 50px 50px 100px;
	text-align: right;
}

.header-block .col-r {
	flex: 48%;
	padding: 50px 100px 50px 50px;
	text-align: left;
}

.hamburger {
  display : block;
  position: fixed;
  z-index : 3;
  right : 13px;
  top   : 12px;
  width : 42px;
  height: 42px;
  cursor: pointer;
  text-align: center;
}
.hamburger span {
  display : block;
  position: absolute;
  width   : 30px;
  height  : 2px ;
  left    : 6px;
  background : #fff;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition   : 0.3s ease-in-out;
  transition        : 0.3s ease-in-out;
}
.hamburger span:nth-child(1) {
  top: 10px;
}
.hamburger span:nth-child(2) {
  top: 20px;
}
.hamburger span:nth-child(3) {
  top: 30px;
}

.point-none {
	pointer-events: none;
}

/* ナビ開いてる時のボタン */
.hamburger.active span:nth-child(1) {
  top : 16px;
  left: 6px;
  background :#fff;
  -webkit-transform: rotate(-45deg);
  -moz-transform   : rotate(-45deg);
  transform        : rotate(-45deg);
}

.hamburger.active span:nth-child(2),
.hamburger.active span:nth-child(3) {
  top: 16px;
  background :#fff;
  -webkit-transform: rotate(45deg);
  -moz-transform   : rotate(45deg);
  transform        : rotate(45deg);
}

nav.globalMenuSp {
  z-index : 2;
  background: rgba(0,0,0,0.7);
  background-size: cover;
  background-position: center;
  text-align: center;
  width: 100%;
  min-height: 100vh;
  opacity: 0;
  visibility: hidden;
  transition: opacity .6s ease, visibility .6s ease;
}

nav.globalMenuSp ul {
  margin: 0 auto;
  padding: 0;
  width: 100%;
}

nav.globalMenuSp ul li {
  width: 100%;
  transition: .4s all;
}
nav.globalMenuSp ul li:last-child {
  padding-bottom: 0;
}
nav.globalMenuSp ul li img:hover{
  background :#ddd;
}

nav.globalMenuSp ul li a {
  display: block;
  padding: 1em 0;
}


/* このクラスを、jQueryで付与・削除する */
nav.globalMenuSp.active {
  opacity: 100;
  visibility: visible;

}

nav.globalMenuSp::before {
	pointer-events: none;
}

/* top contents
/* -------------------- */


.hero_area , .company_area , .products_area , .recruit_area {
	width: 100%;
	height: calc((1080 / 1920) * 100vw);
}

.inquiry_area{
	width: 100%;
	height: calc((920 / 1920) * 100vw);
	margin: 0 auto calc((80 / 900) * 100vw) ;
	padding:  calc((40 / 1920) * 100vw);
	box-sizing: border-box!important;
}

.hero_area img , .company_area img , .products_area img ,.recruit_area img{
	width: 100%;
	height: auto;
}

.hero_area{
	background-image: url("../images/hero.jpg");
  background-position: center;
  background-size: cover;
}


/* 並列 */
#inq_btn {
    max-width: 1450px;
    width: calc((1450 / 1920) * 100vw);
    display: flex;
    display: -ms-flexbox;
    flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    justify-content: space-between;
    margin-right: auto;
    margin-left: auto;
	margin-top: calc((100 / 1920) * 100vw);
}

#contact_btn {
    max-width: 1100px!important;
    width: calc((1100 / 1920) * 100vw)!important;
    display: flex;
    display: -ms-flexbox;
    flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    justify-content: space-between;
    margin-right: auto;
    margin-left: auto;
}


.para_2_in {
    margin: calc((20 / 1920) * 100vw) 0;
    vertical-align: middle;
}

.para_2_in img{
	width: 100%;
	height: auto;
}

 
#inq_btn .para_2_in:nth-of-type(1){
    max-width: 500px;
	width: calc((500 / 1920) * 100vw);
}

#inq_btn .para_2_in:nth-of-type(2){
    max-width: 850px;
	width: calc((850 / 1920) * 100vw);
}

#contact_btn .para_2_in{
	max-width: 500px;
	width: calc((500 / 1920) * 100vw);
}



@media screen and (max-width:899px) {
	
	.company_area , .products_area , .recruit_area {
			height: auto!important;
	}
	
.inquiry_area{
	width: 100%;
	height: auto!important;
	margin: 0 auto calc((80 / 900) * 100vw) ;
	padding: 0;
}
  

  #inq_btn , #contact_btn{
    width: 100%;
	  height: auto;
    display: flex;
    display: -ms-flexbox;
    flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    justify-content: center;
    margin-right: auto;
    margin-left: auto;
	  text-align: center;
}
	
.para_2_in {
    margin: calc((40 / 900) * 100vw) 0 0;
    width: 100%;
    vertical-align: middle;
}
  
.para_2_in:nth-of-type(1){
    margin: calc((40 / 900) * 100vw) 0 calc((40 / 900) * 100vw);
}
  
  
.para_2_in:nth-of-type(2){
    margin: 0 0 calc((40 / 900) * 100vw);
}
	
#inq_btn .para_2_in:nth-of-type(1){
    width: 100%;
}
	
#inq_btn .para_2_in:nth-of-type(1) img{
    max-width: 500px;
	width: calc((500 / 900) * 100vw);
}

#inq_btn .para_2_in:nth-of-type(2){
        width: 100%;
}
	
#inq_btn .para_2_in:nth-of-type(2) img{
    max-width: 850px;
	width: calc((850 / 900) * 100vw);
}
	

#contact_btn .para_2_in{
	max-width: 500px;
	width: calc((500 / 900) * 100vw);
}
	
	
#contact_btn .para_2_in:nth-of-type(2){
    margin: 0 0 0;
}
	

	
}

@media screen and (max-width: 768px){
	.header-block {
		display: block;
	}
	
	.header-block .col-l,.header-block .col-r {
		padding: 0 0 20px;
		text-align: center;
	}
	
	.header-block img {
		width: 45%;
	}
}



footer{
	text-align: center;
}


.footer_logo{
	margin: calc((45 / 1920) * 100vw);
}