@charset "utf-8";

/* all
--------------------------------------------------------------*/
body {
  font-family: -apple-system, "Open Sans", "Helvetica Neue", Helvetica, Arial, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック Medium","Yu Gothic Medium", "メイリオ", Meiryo, sans-serif;
  border-top:0;
}

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

.pc{display:block;}
.tb{display:none;}
.sp{display:none;}
.pc_tb{display:block;}
.pc_sp{display:block;}
.tb_sp{display:none;}
@media only screen and (max-width:768px) {
  .pc{display:none;}
  .tb{display:block;}
  .sp{display:none;}
  .pc_tb{display:block;}
  .pc_sp{display:none;}
  .tb_sp{display:block;}
}
@media only screen and (max-width:480px) {
  .pc{display:none;}
  .tb{display:none;}
  .sp{display:block;}
  .pc_tb{display:none;}
  .pc_sp{display:block;}
  .tb_sp{display:block;}
}

/* wrapper
--------------------------------------------------------------*/
#wrapper {
  position:relative;
  height:100%;
}


/* header
--------------------------------------------------------------*/
header {
  position:absolute;
  width:100%;
  height:80px;
  margin:80px 0 0;
  top:-80px;
  z-index:1000;
  background-color:rgba(255,255,255,0);
}
header.fixed {
  margin-top: 0;
  top: 0;
  position: fixed;
  background: #fff;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: top 0.65s ease-in;
}
header::after {
  content:".";
  height:0px;
  clear:both;
  display: block;
  visibility:hidden;
}
header .logo {
  float:left;
  background-size:contain;
  position:relative;
  top: 10px;
  left: 10px;
}
header .logo a {
  display:block;
  width:200px;
}
header .logo a img {width:100%;}
header .logo:hover {opacity:0.8;}

/*グローバルナビ
header > nav {float:right;}
header > nav > ul > li{
  float:left;
}
header > nav > ul > li > a {
  color:#000;
  position:relative;
  line-height:80px;
  height:80px;
  display:block;
  padding:0 25px;
  text-align:center;
}
header > nav > ul > li > a:hover {
  text-decoration:none;
}*/

/*ハンバーガーメニュー
@media screen and (max-width: 768px) {
header nav {
  position: fixed;
  top: 0;
  right: -300px;
  width: 300px;
  height: 100%;
  padding-top: 50px;
  background:#333;
  font-size: 16px;
  box-sizing: border-box;
  z-index: 2
}
header nav ul li {
  display:block;
}
header nav ul li a {
  text-decoration: none;
  color: #ddd;
}*/
/*ハンバーガー ボタン
header .btn-gnavi {
  position: fixed;
  top: 25px;
  right: 25px;
  width: 30px;
  height: 24px;
  z-index: 3;
  box-sizing: border-box;
  cursor: pointer;
  -webkit-transition: all 400ms;
  transition: all 400ms;
}

header .btn-gnavi span {
  position: absolute;
  width: 30px;
  height: 4px;
  background: #666;
  border-radius: 10px;
  -webkit-transition: all 400ms;
  transition: all 400ms;
}
header .btn-gnavi span:nth-child(1) {top:0}
header .btn-gnavi span:nth-child(2) {top:10px}
header .btn-gnavi span:nth-child(3) {top:20px}
header .btn-gnavi.open {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg)
}
header .btn-gnavi.open span {background: #666}
header .btn-gnavi.open span {width: 24px;}
}*/



/* mainimage
--------------------------------------------------------------*/
.mainImage{
  width:100%;
  height:80vh;
  /*background: url(https://placehold.jp/50/ccccccc/ffffff/1920x1080.png?text=MainImage) center center no-repeat;*/
  background: url(../img/mainimage.jpg) #000 center 100px no-repeat;
  background-size: contain;
  position:relative;
}
.mainImage h2{
  position:absolute;
  top:120px;
  color:#fff;
  font-weight:bold;
  font-size:3.6vw;
  width:100%;
  text-align:center;
}
/*.mainImage .date_place{
  position:absolute;
  top:60vh;
  left:50%;
  transform:translateX(-50%);
  color:#fff;
  font-weight:bold;
  font-size:2.0rem;
  width:30%;
  text-align:center;
  background-color:rgba(0,0,0,.8);
}
.mainImage .date_place p{margin-bottom:0;}*/
@media screen and (max-width: 768px) {
  .mainImage{height:50vh;}
}
@media screen and (max-width: 480px) {
  .mainImage{background-position:bottom center;}
  .mainImage h2{font-size:3.2rem; line-height:1.2; top:90px;}
}



/* main-contents
--------------------------------------------------------------*/
.main-contents{
  padding-top:80px;
  padding-bottom:0;
  position:relative;
}
h3{
  text-align:center;
  font-weight:bold;
  margin-bottom:60px;
  position:relative;
  padding-bottom:1.5rem;
  line-height:1.5;
}
h3::before{
  position: absolute;
  bottom: -10px;
  left: calc(50% - 30px);
  width: 60px;
  height: 5px;
  content: '';
  border-radius: 3px;
  background:#e50012;
}
.midokoro{
  text-align:center;
  font-size:2.2rem;
  font-weight:bold;
  color:#e50012;
}
.midokoro::before {
  content:'▼';
}
.menu{
  display:flex;
  justify-content:center;
  margin-bottom:60px;
}
.menu li{
  margin:0 10px;
  font-size:1.8rem;
  width:20%;
  text-align:center;
}
.menu li a{
  text-decoration:none;
  background:url(../img/bg_menu.svg) #fff left center no-repeat;
  display:block;
  padding:10px 0;
  border:solid 1px #ccc;
}
.menu li a:hover{
  border:solid 1px #ccc;
  border:solid 1px #e50012;
  color:#e50012;
}
.sec01{margin:0 auto 80px;}
.sec01 .intro{
  text-align:center;
  margin-bottom:60px;
}
.sec01 .intro p{font-size:2.0rem;}
.sec01 table{
  width:75%;
  max-width:1000px;
  margin:30px auto;
  font-size:1.6rem;
}
.sec01 table th,
.sec01 table td{
  padding:0.5em 1em;
}
@media screen and (max-width: 768px) {
  .menu{flex-wrap:wrap;}
  .menu li{
	width:40%;
	margin-bottom:20px;
  }
  .sec01{margin-bottom:60px;}
  .sec01 .intro{
	width:90%;
	margin-left:auto;
	margin-right:auto;
  }
  .sec01 table{width:90%;}
}
@media screen and (max-width: 480px) {
  .main-contents{padding-top:60px;}
  .sec01 table th,
  .sec01 table td{display:block;}
  .menu{display:block;}
  .menu li{
    width:calc(90% - 20px);
	margin-left:auto;
	margin-right:auto;
  }
}

/* DIREC SENSOR -------------------- */
.sec02{
  margin:0 auto 60px;
  width:100%;
  background: url(../img/bg_direc-sensor.jpg) top center no-repeat;
  background-size: cover;
  position:relative;
  padding:60px 0 0 0;
}
.sec02 h4{
  font-weight:bold;
  font-size:3.2vw;
  color:#0092db;
  text-align:center;
  line-height:1.5;
  text-shadow:0 0 5px #fff,
              0 0 5px #fff,
			  0 0 5px #fff,
			  0 0 5px #fff,
			  0 0 5px #fff,
			  0 0 5px #fff,
			  0 0 5px #fff,
			  0 0 5px #fff,
			  0 0 5px #fff,
			  0 0 5px #fff;
  background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,.7) 25%, rgba(255,255,255,.7) 75%, rgba(255,255,255,0));
  position:relative;
  padding-left:7em;
}
.sec02 h4::before{
  text-shadow:none;
  background-color:#00adb8;
  font-size:75%;
  padding:0 1em;
  border-radius:100px;
  margin-right:.5em;
  border:solid 2px #fff;
  color:#fff;
  position:absolute;
  content:'封入液なし';
  display:inline-block;
  top:50%;
  transform:translateY(-50%);
  left:13em;
}
.sec02-cont{
  display:flex;
  justify-content:space-between;
  width:75%;
  margin:0 auto;
}
.sec02-cont .left{width:54%;}
.sec02-cont .right{width:42%;}
.sec02 .lead{
  background:rgba(255,255,255,.7);
  margin:0 auto 50px;
  padding:30px;
}
.sec02 .lead01{
  color:#5e66ac;
  font-weight:bold;
  font-size:2.6vw;
  line-height:1.3;
  text-shadow:0 0 3px #fff,
              0 0 3px #fff,
			  0 0 3px #fff,
			  0 0 3px #fff,
			  0 0 3px #fff,
			  0 0 3px #fff,
			  0 0 3px #fff,
			  0 0 3px #fff,
			  0 0 3px #fff,
			  0 0 3px #fff;
  margin-bottom:20px;
}
.sec02 .lead02{
  background-color:#fff;
  border:solid 5px #fbe5c4;
  border-radius:100px;
  color:#666;
  font-weight:bold;
  font-size:2vw;
  display:inline-block;
  padding:.5em 1em;
  margin-bottom:0;
  line-height:1.3;
}
.sec02 .feature{
  background: linear-gradient(to right, rgba(0,182,221,.8), rgba(0,182,221,.7) 75%, rgba(0,182,221,0));
  color:#fff;
  font-weight:bold;
  font-size:1.8vw;
  margin:0 0 20px;
  width:96%;
  padding-left:1em;
  position:relative;
  overflow:hidden;
}
.sec02 .feature::before{
  position: absolute;
  border-style: solid;
  border-color: transparent transparent transparent #00a3e2;
  border-width: 0 0 3.5vw 1.5vw;
  content: '';
  left:0;
}
.sec02 .feature_child{
  margin-bottom:20px;
  margin-left:2em;
}
.sec02 .feature_child > li{
  background-color:#fff;
  border-radius:100px;
  padding:2px 1em;
  font-size:1.4vw;
}
.sec02 .feature_child > li:not(:last-child){margin-bottom:10px;}
.sec02 .photo{width:90%; margin:auto;}
.sec02 .photo img{width:100%;}
@media screen and (max-width: 768px) {
  .sec02-cont{width:80%;}
}
@media screen and (max-width: 480px) {
  .sec02{background-size:cover;}
  .sec02 h4{font-size:2.4rem;}
  .sec02 h4::before{font-size:2.0rem; left:2em;}
  .sec02-cont{display:block;}
  .sec02-cont .left,
  .sec02-cont .right{width:100%;}
  .sec02 .lead01{font-size:2.0rem;}
  .sec02 .lead02{font-size:1.6rem;}
  .sec02 .feature{font-size:1.6rem;}
  .sec02 .feature_child{margin-left:0;}
  .sec02 .feature_child > li{font-size:1.4rem;}
}

/* PRESSTHERMO -------------------- */
.sec03{
  margin:0 auto 60px;
  width:100%;
  background: url(../img/bg_pressthermo.jpg) top center no-repeat;
  background-size: 100% auto;
  position:relative;
  padding:80px 0 0 0;
}
.sec03 h4{
  text-align:center;
  color:#fff;
  font-weight:bold;
  font-size:4.2rem;
  margin-bottom:10px;
}
.sec03 h4 .press,
.sec03 h4 .cal{
  padding:0 .5em;
  border-radius:100px;
}
.sec03 h4 .press{background-color:#009ce1;}
.sec03 h4 .plus{
  margin-right:.2em;
  margin-left:.2em;
  color:#333;
}
.sec03 h4 .cal{background-color:#e50012;}
.sec03 h4 sup{font-size:50%;}
.sec03 .note_cal{text-align:right; width:75%; max-width:1000px; margin:0 auto;}
.sec03 .image{
  width:1000px;
  margin:0 auto;
}
.sec03 .image img{width:100%;}
@media screen and (max-width: 1000px) {
  .sec03 h4{font-size:4.0vw;}
  .sec03 h4 .press,
  .sec03 h4 .cal,
  .sec03 h4 .plus{
	display:block;
	padding:10px 0;
	width:90%;
	margin:auto;
  }
  .sec03 .note_cal{width:90%;}
  .sec03 .image{width:90%;}
}
@media screen and (max-width: 768px) {
  .sec03 h4{font-size:2.4rem;}
}

/* ORDER-MADE VMS -------------------- */
.sec04{
  margin:0 auto;
  color:#fff;
}
.sec04 .intro{
  width:100%;
  background: url(../img/bg_vms.jpg) center center no-repeat;
  background-size: cover;
  position:relative;
  padding:60px 0;
}
.sec04 .intro .inner{
  width:90%;
  max-width:1200px;
  margin:0 auto;
}
.sec04 .intro .subtitle{
  font-size:2.4rem;
  font-weight:bold;
  line-height:1.2;
}
.sec04 .intro h4{
  font-size:8.0rem;
  margin-bottom:.5em;
  font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
}
.sec04 .intro .desc{
  font-size:1.8rem;
  width:50%;
  min-width: 500px;
}
.sec04 .intro ul{
  display:flex;
  font-size:1.8rem;
  margin-bottom:20px;
}
.sec04 .intro ul li{
  border:solid 1px #ccc;
  background-color:rgba(0,0,0,.5);
  text-align:center;
  padding:.2em 0;
  line-height:1.2;
  min-width:18rem;
}
.sec04 .intro ul li:not(:first-child){
  margin-left:1em;
}
.sec04 .feature{
  width:100%;
  background: url(../img/bg_vms_feature.jpg) center center no-repeat;
  background-size: cover;
  position:relative;
  padding:80px 0;
}
.sec04 .feature h5{
  text-align:center;
  font-weight:bold;
  font-size:3.0rem;
}
.sec04 .feature .inner{
  width:75%;
  max-width:1200px;
  margin:0 auto;
}
.sec04 .feature ul{
  display:flex;
  flex-wrap:wrap;
  font-size:1.8rem;
}
.sec04 .feature ul li{
  position:relative;
  padding-left: 1em;
  margin-left: 1em;
  margin-right:1em;
}
.sec04 .feature ul li::before{
  content: '';
  display: block;
  width: 0.7em;
  height: 0.7em;
  position: absolute;
  top: 0.6em;
  left: 0;
  background-color: #88a5aa;
  border-radius: 50%;
}
@media screen and (max-width: 500px) {
  .sec04 .intro .desc{min-width: auto;}
}
@media screen and (max-width: 480px) {
  .sec04 .intro{padding-bottom:40px;}
  .sec04 .intro .subtitle{font-size:2.2rem; margin-bottom:10px;}
  .sec04 .intro h4{font-size:6.8rem;}
  .sec04 .intro .desc{width: auto;}
  .sec04 .intro ul{display:block;}
  .sec04 .intro ul li:not(:first-child){
	margin-left:0;
	margin-top:10px;
  }
  .sec04 .feature{
	width:100%;
	background-position:center right -500px;
	background-size: cover;
	position:relative;
	padding:60px 0;
  }
  .sec04 .feature .inner{width:90%;}
}

/* LOADCELL -------------------- */
.sec05 h4{
  text-align:center;
  font-weight:bold;
  font-size:4.2rem;
  margin-bottom:20px;
}
.sec05{
  margin:0 auto;
  background-color:#eaf5fc;
  padding:80px 0;
}
.sec05 .loadcell_list{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  width:90%;
  max-width:1200px;
  margin:0 auto;
}
.sec05 .loadcell_list > li{
  width:48%;
  display:flex;
  justify-content:space-between;
  margin-top:50px;
}
.sec05 .loadcell_list .image{
  width:40%;
  align-self:center;
}
.sec05 .loadcell_list .image img{width:100%;}
.sec05 .loadcell_list .text{
  width:58%;
  border:solid 3px #e50012;
  background-color:#fff;
  border-radius:10px;
  padding:20px;
}
.sec05 .loadcell_list .text p{
  margin-bottom:5px;
  font-size:1.8rem;
  line-height:1.2;
}
.sec05 .loadcell_list .text h5{
  margin-bottom:5px;
  color:#e50012;
  font-weight:bold;
  font-size:2.4rem;
  border-bottom:solid 2px #e50012;
  padding-bottom:5px;
}
.sec05 .loadcell_list .text ul li{
  position:relative;
  padding-left: 1em;
}
.sec05 .loadcell_list .text ul li::before{
  content: '';
  display: block;
  width: 0.7em;
  height: 0.7em;
  position: absolute;
  top: 0.6em;
  left: 0;
  background-color: #666;
  border-radius: 50%;
}
@media screen and (max-width: 768px) {
  .sec05 .loadcell_list{display:block;}
  .sec05 .loadcell_list > li{width:100%;}
}
@media screen and (max-width: 480px) {
  .sec05 .loadcell_list > li{display:block; margin-top:40px;}
  .sec05 .loadcell_list .image{width:75%; margin:auto;}
  .sec05 .loadcell_list .text{width:100%;}
}


/* FOOMAJAPAN -------------------- */
.sec06{
  margin:80px auto;
  text-align:center;
}
.sec06 .banner a{transition: all .3s ease-in-out;}
.sec06 .banner a:hover{opacity:.7;}


/* pagetop
--------------------------------------------------------------*/
#btn-pagetop {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 100;
  width: 50px;
  height: 50px;
  background: rgba(0,0,0,0.7);
  top:auto;
  padding:0;
}
#btn-pagetop a {
  display: block;
  width: 50px;
  height: 50px;
}
#btn-pagetop:before,
#btn-pagetop:after {
  width: 20px;
  height: 4px;
  border-radius: 5px;
  position: absolute;
  display: block;
  background: #fff;
  content: '';
}
#btn-pagetop:before {
  transform: rotate(45deg);
  top: 22px;
  right: 9px;
  margin-right:0;
}
#btn-pagetop:after {
  transform: rotate(-45deg);
  top: 22px;
  left: 9px;
}
#btn-pagetop span {display: none;}

@media only screen and (max-width:768px) {
}



/* footer
--------------------------------------------------------------*/
footer{height:60px; position:relative;}
footer .copyright{
  text-align:center;
  float:none;
  line-height:60px;
}