@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;}


/* mainimage
--------------------------------------------------------------*/
.mainImage{
  width:100%;
  height:85vh;
  /*background: url(https://placehold.jp/50/ccccccc/ffffff/1920x1080.png?text=MainImage) center center no-repeat;*/
  background: url(../img/mainimage.jpg) #000 center bottom 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;
  line-height:1.2;
}
@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;
  margin-bottom:10px;
}
.midokoro::before {
  content:'▼';
}
.menu{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  max-width:1280px;
  margin:0 auto 60px;
}
.menu li{
  margin:0 10px;
  font-size:1.8rem;
  width:30%;
  text-align:center;
  margin-top:10px;
}
.menu li a{
  text-decoration:none;
  background:url(../img/bg_menu.svg) #fff left center no-repeat;
  background-size:auto 100%;
  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;
  }
}

/* Battery -------------------- */
.sec02{
  margin:0 auto;
  width:100%;
  background-color:#00162d;
  background-size: cover;
  position:relative;
  padding-bottom:80px;
}
.sec02 h4{
  font-weight:bold;
  font-size:3.2vw;
  color:#0092db;
  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;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  left:10%;
}
.sec02 .circle{
  width:100%;
  height:100vh;
  background:url(../img/bg_battery.jpg) center center no-repeat;
  background-size:cover;
  position:relative;
}
.sec02 .circle img{width:100%;}
.sec02 .case{
  margin:40px auto 0;
  width:90%;
}
.sec02 .case-box{
  position:relative;
  padding:40px;
  background-color:rgba(255,255,255,.9);
}
.sec02 .case-box:nth-child(2){margin-top:30px;}
.sec02 .case-box h5{
  font-weight:bold;
  font-size:2.2rem;
}
.sec02 .case-box .order{
  border:solid 2px #ee835c;
  background-color:#e50012;
  color:#fff;
  display:inline-block;
  padding:0 10px;
  position:absolute;
  top:40px;
  right:40px;
  font-weight:bold;
}
.sec02 .case-box .inner{
  display:flex;
  justify-content:space-between;
}
.sec02 .case-box .text{width:46%;}
.sec02 .case-box .text p{font-size:1.6rem;}
.sec02 .case-box .image{width:50%;}
.sec02 .case-box .image img{width:100%;}
.sec02 .case-box .model li{
  margin-top:10px;
  margin-left:8em;
}
.sec02 .case-box .model span{
  background-color:#0068a1;
  color:#fff;
  border-radius:5px;
  width:7em;
  display:inline-block;
  text-align:center;
  margin-right:1em;
  margin-left:-8em;
}
@media screen and (max-width: 768px) {
  .sec02 .circle{
	height:50vh;
  }
  .sec02 .case{display:block;}
}
@media screen and (max-width: 480px) {
  .sec02 .circle{
	height:50vh;
	background:url(../img/bg_battery_sp.jpg) center no-repeat;
	background-size:cover;
	position:relative;
	margin-top:150px;
  }
  .sec02 h4{
	font-size:8vw;
	line-height:1.2;
	padding:15px 0;
	text-align:center;
	top:-55px;
	background-color:#00162d;
	width:100%;
	left:0;
	margin-bottom:0;
	height:110px;
  }
  .sec02 .case-box{padding:20px;}
  .sec02 .case-box .inner{display:block;}
  .sec02 .case-box .text,
  .sec02 .case-box .image{width:100%;}
  .sec02 .case-box .image{margin-top:20px;}
  .sec02 .case-box .model li{margin-left:0;}
  .sec02 .case-box .model span{margin-left:0;}
}

/* ROBOT -------------------- */
.sec03{
  margin:0 auto;
  width:100%;
  background:#86dbff url(../img/bg_robot.jpg) center center no-repeat;
  background-blend-mode:multiply;
  background-size:cover;
  padding:100px 0;
}
.sec03 h4{
  text-align:center;
  font-weight:bold;
  font-size:4.2rem;
  margin-bottom:10px;
  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;
}
.sec03 .title{
  width:90%;
  margin:0 auto 50px;
  padding:30px 0;
  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));
}
.sec03 .catch,
.sec03 .lead{text-align:center;}
.sec03 .catch{
  font-weight:bold;
  font-size:2.4rem;
  margin-bottom:.5em;
  line-height:1.3;
}
.sec03 .lead{
  font-size:1.8rem;
  margin-bottom:0;
}
.sec03 .products{
  width:90%;
  max-width:1200px;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
}
.sec03 .products li{
  width:30%;
  border-radius:10px;
  overflow:hidden;
  background-color:#eee;
}
.sec03 .products li p{
  margin-bottom:0;
  text-align:center;
  font-size:1.8rem;
  font-weight:bold;
  line-height:1.3;
  padding:5px 0;
}
.sec03 .products li .photo{background-color:#fff;}
.sec03 .products li .photo img{
  width:100%;
  vertical-align: middle;
}
@media screen and (max-width: 1000px) {
}
@media screen and (max-width: 768px) {
}
@media screen and (max-width: 480px) {
  .sec03{padding:80px 0;}
  .sec03 h4{font-size:8vw;}
  .sec03 .products{
	display:block;
  }
  .sec03 .products li{
	width:100%;
	display:flex;
  }
  .sec03 .products li:not(:last-child){
	  margin-bottom:20px;
  }
  .sec03 .products li p{
    width:70%;
	text-align:left;
	position:relative;
	margin-bottom:0;
  }
  .sec03 .products li span{
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	padding-left:1em;
  }
  .sec03 .products li .photo{
    width:30%;
  }
}

/* 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%;}
}

/* PRESSURE -------------------- */
.sec05{
  margin:0 auto;
  padding:100px 0;
  background:rgb(196 243 234 / 80%) url(../img/bg_pressure.jpg) center center no-repeat;
  background-blend-mode:soft-light;
  background-size:cover;
}
.sec05 h4{
  text-align:center;
  font-weight:bold;
  font-size:4.2rem;
  margin-bottom:20px;
}
.sec05 .title{
  width:90%;
  margin:0 auto 50px;
}
.sec05 .catch,
.sec05 .lead{
  text-align:center;
  margin-bottom:10px;
}
.sec05 .catch{
  font-size:2.4rem;
  font-weight:bold;
  line-height:1.3;
}
.sec05 .lead{
  font-size:1.8rem;
  margin-bottom:50px;
}
.sec05 .products{
  display:flex;
  justify-content:space-evenly;
  width:90%;
  max-width:1200px;
  margin:0 auto;
}
.sec05 .products li{width:30%;}
.sec05 .products .photo{
  width:100%;
  border-radius:10px;
  overflow:hidden;
  line-height:0;
  margin-bottom:10px;
}
.sec05 .products .photo img{
  width:100%;
  vertical-align:middle;
}
.sec05 .products .name{
  font-weight:bold;
  font-size:1.8rem;
  line-height:1.2;
}
.sec05 .products .name .model{font-size:2.4rem;}
@media screen and (max-width: 768px) {
}
@media screen and (max-width: 480px) {
  .sec05{padding:80px 0;}
  .sec05 h4{font-size:8vw;}
  .sec05 .products{
	display:block;
  }
  .sec05 .products li{
	width:100%;
	display:flex;
  }
  .sec05 .products li:not(:last-child){
	  margin-bottom:20px;
  }
  .sec05 .products li p{
    width:70%;
	text-align:left;
	position:relative;
	margin-bottom:0;
  }
  .sec05 .products li .name_inner{
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	padding-left:1em;
  }
  .sec05 .products li .photo{
    width:30%;
  }
}


/* LOADCELL -------------------- */
.sec06,
.sec07{
  margin:0 auto;
  width:100%;
  background-color:#00162d;
  background-size: cover;
  position:relative;
}
.sec06 .inner,
.sec07 .inner{display:flex;}
/*.sec07 .inner{flex-direction: row-reverse;}*/
.sec06 .title,
.sec07 .title{width:60%;}
.sec06 .title{
  background:url(../img/bg_loadcell01.jpg) center center no-repeat;
  background-size:cover;
}
.sec07 .title{
  background:url(../img/bg_loadcell02.jpg) center bottom no-repeat;
  background-size:cover;
}
.sec06 .title img,
.sec07 .title img{width:100%;}
.sec06 .title_inner,
.sec07 .title_inner{
  margin-top:50px;
  padding:30px 0;
  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));
}
.sec06 h4,
.sec07 h4{
  font-weight:bold;
  font-size:3.2vw;
  color:#0092db;
  text-align:center;
  line-height:1.3;
  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;
  margin-bottom:10px;
}
.sec06 h4{color:#d0121b;}
.sec07 h4{color:#00693e;}
.sec06 .catch,
.sec07 .catch{
  text-align:center;
  font-weight:bold;
  font-size:2.0rem;
  margin-bottom:0;
  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;
}
.sec06 .case,
.sec07 .case{
  width:40%;
  padding:40px;
}
.sec06 .case{background-color:#f9d0ba;}
.sec07 .case{background-color:#cbe4b9;}
.sec06 .case-box,
.sec07 .case-box{position:relative;}
.sec06 .case-box:not(:first-child),
.sec07 .case-box:not(:first-child){
  border-top:solid 1px #666;
  margin-top:40px;
  padding-top:40px;
}
.sec06 .case-box h5,
.sec07 .case-box h5{
  font-weight:bold;
  font-size:2.2rem;
}
.sec06 .case-box h5 span,
.sec07 .case-box h5 span{
  font-size:1.8rem;
}
.sec06 .case-box .image,
.sec07 .case-box .image{width:100%;}
.sec06 .case-box .image img,
.sec07 .case-box .image img{width:100%;}
@media screen and (min-width: 1366px) {
  .sec06 .title,
  .sec07 .title{width:70%;}
  .sec06 .case,
  .sec07 .case{
	width:30%;
  }
}
@media screen and (max-width: 768px) {
}
@media screen and (max-width: 480px) {
  .sec06 .inner,
  .sec07 .inner{display:block;}
  .sec06 .title,
  .sec07 .title{
	width:100%;
	height:50vh;
	padding-top:1px;
  }
  .sec06 h4,
  .sec07 h4{font-size:7.5vw;}
  .sec06 .case,
  .sec07 .case{width:100%;}
}


/* FOOMAJAPAN -------------------- */
.sec08{
  margin:80px auto;
  text-align:center;
}
.sec08 .banner a{transition: all .3s ease-in-out;}
.sec08 .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;
}