@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:100vh;
  /*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: clamp(36px, 0.776699vw + 33.0873786px, 48px);
  width:100%;
  text-align:center;
  line-height:1.2;
  vertical-align: baseline;
  text-shadow:0 0 5px #000,
              0 0 5px #000,
			  0 0 5px #000,
			  0 0 5px #000,
			  0 0 5px #000;
}
@media screen and (max-width: 768px) {
  .mainImage{height: 65vh;}
}
@media screen and (max-width: 480px) {
  .mainImage{
		background-position:bottom center;
		height: 55vh;
	}
  .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{
  position:relative;
  text-align:center;
  font-weight:bold;
  margin:0 auto 30px;
  padding:0 .7em;
  line-height:1.3;
  display:inline-block;
  left:50%;
  transform:translateX(-50%);
}
h3::before,
h3::after{
  position:absolute;
  top:calc(50% - 17.5px);
  line-height:1;
}
h3::before{
  content:url(../img/icon_arrow_r.png);
  left:0;
}
h3::after{
  content:url(../img/icon_arrow_l.png);
  right:0;
}
.midokoro{
  text-align:center;
  font-size:2.2rem;
  font-weight:bold;
  color:#e50012;
  margin-bottom:10px;
}
.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.png) #fff center bottom 5px no-repeat;
  display:block;
  padding: 0;
  border:solid 2px #e50012;
	height: 100px;
	line-height: 1.3;
	position: relative;
}
.menu li a span{
	width: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -55%);
	font-weight: bold;
}
.menu li a span strong{
	color: #e50012;
	transition: all .3s ease-in-out; 
}
.menu li a:hover{
  background-color:#e50012;
  color:#fff;
  background-image:url(../img/bg_menu_hover.png);
}
.menu li a:hover span strong{color: #fff;}
.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.8rem;
}
.sec01 table th,
.sec01 table td{
  padding:0.5em 1em;
}
.sec01 table th{background-color:#daf2ee;}
.sec01 .banner{
  width:320px;
  margin:auto;
}
.sec01 .banner img{
  width:100%;
  vertical-align:middle;
}
.sec01 .banner a{
  display:block;
  transition: all .3s ease-in-out;
}
.sec01 .banner a:hover{
  opacity:.7;
}
@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;}
  .sec01 .banner{max-width:90%;}
  .menu{display:block;}
  .menu li{
    width:calc(90% - 20px);
    margin-left:auto;
    margin-right:auto;
  }
}


/* VMSI/V -------------------- */
.sec02{
  margin:0 auto;
  width: 100%;
  background: url(../img/bg_vmsiv.jpg) #009bd3 top center no-repeat;
  background-size: cover;
	background-attachment: fixed;
  padding:5%;
}
.sec02 .wrap{
  margin:50px auto;
  width:100%;
  max-width:1200px;
  border-radius:20px;
  overflow:hidden;
}
.sec02 .visual{
	background: url("../img/img_vmsiv_00.jpg") top center no-repeat;
	background-size: cover;
	aspect-ratio:16 / 9;
	color: #fff;
	padding: 7.5% 5% 0;
	width: 100%;
}
.sec02 .visual .catch{
	font-weight: bold;
	background-color: #000;
	padding: .1em .5em;
	display: inline-block;
	position: relative;
	margin-bottom: 0;
	font-size: clamp(20px, 0.776699vw + 33.0873786px, 24px);
}
.sec02 .visual .catch::after {
  position: absolute;
  content: '';
  right: -1em;
  top: 0;
  border: none;
  border-left: solid 1em #000;
  border-bottom: solid 2em transparent;
}
.sec02 .visual h4{
  text-shadow:0 0 5px #134ebb,
              0 0 5px #134ebb;
  margin-bottom: 30px;
  line-height: 1;
  font-size: clamp(50px, 0.776699vw + 33.0873786px, 60px);
	font-weight: bold;
}
.sec02 .visual h4 span{font-size: clamp(20px, 0.776699vw + 33.0873786px, 24px);}
.sec02 .visual .point-img{
	width: 50%;
	max-width: 512px;
}
.sec02 .visual .point-img img{width: 100%;}
.sec02 .lead{
	background: #000;
	color: #fff;
	font-weight: bold;
	text-align: center;
  font-size: 2.4rem;
	padding: 0.75em 0.5em;
	margin: 0;
	line-height: 1.3;
}
.sec02 .feature{
	background-color: rgba(255,255,255,.8);
	padding: 50px 50px;
	font-size: clamp(16px, 0.1294498vw + 15.5145631px, 18px);
}
.sec02 .feature ul{margin-bottom: 30px;}
.sec02 .feature ul li {margin-bottom: 1.5em;}
.sec02 .feature ul li h6{
	display: inline-block;
	background: #003894;
  border: solid 3px #c2c2e1;
	font-weight: bold;
	color: #fff;
	padding: 0.5em 1em;
	border-radius: 100px;
	font-size: clamp(16px, 0.1294498vw + 15.5145631px, 18px);
	margin-bottom: .5em;
}
.sec02 .feature-link a {
  background-color: #767aba;
	border: solid 3px #c2c2e1;
  color: #fff;
  font-weight: bold;
  padding: .5em 1em;
  display: inline-block;
  line-height: 1.5;
	text-decoration: none;
}
.sec02 .feature-link a:hover {
  background-color: #c2c2e1;
	border: solid 3px #767aba;
}
@media screen and (max-width: 1280px) {
}
@media screen and (max-width: 768px) {
	.sec02 .visual h4{margin-bottom: 3%;}
}
@media screen and (max-width: 480px) {
	.sec02 .visual{
    background: url("../img/img_vmsiv_00.jpg") top right -40vw no-repeat;
    background-size: cover;
    aspect-ratio:1;
		height: 70vh;
		padding: 10% 5% 5%;
		position: relative;
  }
	.sec02 .visual .catch{
		font-size: 1.6rem;
		margin-left: -5%;
		padding-left: 5%;
	}
	.sec02 .visual h4{font-size: 4.0rem;}
	.sec02 .visual h4 span{font-size: 1.8rem;}
	.sec02 .visual .point-img{
		position: absolute;
		bottom: 1%;
		left: 50%;
		transform: translateX(-50%);
		width: 75%;
	}
	.sec02 .feature{padding: 50px 5%;}
}


/* Other -------------------- */
.sec03{
  padding:5%;
	background: #f6f6f6; 
}
.sec03 .text{
  text-align: center;
	font-size: clamp(16px, 0.2588997vw + 15.0291262px, 20px);
  font-weight: bold;
  margin-bottom: 1.5em;
}
.sec03 .last-year{
	padding: 3em;
	background: #fff; 
	border-radius: 15px;
}
.sec03 .last-year h4{font-weight: bold;}
.sec03 .last-year ul{
	display: flex;
	column-gap: 1em;
	font-size: clamp(16px, 0.1294498vw + 15.5145631px, 18px);
}
.sec03 .last-year ul li img{
	width: 100%;
	border-radius: 15px;
	vertical-align: middle;
	margin-bottom: .25em;
}
.sec03 .last-year ul li p{margin-bottom: 0;}
.sec03 .last-year ul li p::before{
	content: '▲';
	margin-right: .25em;
}
@media screen and (max-width: 480px) {
	.sec03{padding:50px 5%;}
	.sec03 .last-year ul{flex-wrap:wrap;}
	.sec03 .last-year ul li:not(:last-child){margin-bottom: 1em;}
}


/* Wireless -------------------- */
.sec09{
  margin:0 auto;
  width:100%;
  background:url(../img/bg_wireless.jpg) center center no-repeat;
  background-size: cover;
	background-attachment: fixed;
  position:relative;
  padding:5%;
  z-index:-1;
}
.sec09::before{
  background-image: linear-gradient(135deg, #0A1126 25%, #0C779E 100%);
  position:absolute;
  z-index:0;
  width:100%;
  height:100%;
  content:'';
  top:0;
  left:0;
  mix-blend-mode:multiply;
  opacity:.7;
}
.sec09 .inner{
  z-index:1;
  position:relative;
  max-width:1200px;
  margin:auto;
}
.sec09 .wrap{
  margin:50px auto;
  width:100%;
  max-width:1200px;
  border-radius:20px;
  overflow:hidden;
}
.sec09 .visual{position: relative;}
.sec09 .visual .title{
  position: absolute;
  color: #fff;
  top: 0;
  left: 50px;
  padding: 30px;
}
.sec09 .visual .title::before{
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(to right, rgba(0, 162, 154, 1), rgba(111, 186, 44, 1));
  width: 100%;
  height: 100%;
  z-index: 0;
  mix-blend-mode: multiply;
}
.sec09 .visual .title .subtitle{
  font-size:2.4rem;
  margin-bottom:.5em;
  line-height:1.2;
  font-weight:bold;
  z-index: 1;
  position: relative;
  border-bottom: solid 1px #fff;
  padding-bottom: .5em;
}
.sec09 .visual .title .subtitle .yellow{color: #ff0;}
.sec09 .visual .title h4{
  font-size:clamp(3.2rem, 3.2vw, 4.0rem);
  font-weight:bold;
  z-index: 1;
  position: relative;
  margin-bottom: .5em;
}
.sec09 .visual .title h4 .model{font-size: clamp(2.8rem, 6vw, 7.68rem);}
.sec09 .visual .title .icon{
  z-index: 1;
  position: absolute;
  width: 75%;
}
.sec09 .visual .title .icon > img{width: 100%;}
.sec09 .visual .products{
  position: absolute;
  width: 45%;
  bottom: 30px;
  right: 30px;
}
.sec09 .visual .products > img{
  width: 100%;
  filter:
     drop-shadow(1px 1px 0 #fff)
     drop-shadow(-1px -1px 0 #fff)
     drop-shadow(-1px 1px 0 #fff)
     drop-shadow(1px -1px 0 #fff)
     drop-shadow(1px 1px 0 #fff)
     drop-shadow(-1px -1px 0 #fff)
     drop-shadow(-1px 1px 0 #fff)
     drop-shadow(1px -1px 0 #fff);
}
.sec09 .visual > img{
  width:115%;
  vertical-align:middle;
}
.sec09 .vibration{background-color: #fff;}
.sec09 .vibration .vibration-feature01{
	padding: 50px 50px;
	position: relative;
}
.sec09 .vibration .vibration-feature01 .new-arrival{
	position: absolute;
	top: 0;
	right: 50px;
	width: 250px;
	filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.2));
}
.sec09 .vibration .vibration-feature01 .new-arrival img{width: 100%;}
.sec09 .vibration .vibration-feature01 h5{
	color: #797c87;
  font-size:clamp(3.0rem, 3.0vw, 3.2rem);
  font-weight: bold;
  margin-bottom: 0;
}
.sec09 .vibration .vibration-feature01 h5 span.blue{color: #0092d8;}
.sec09 .vibration .vibration-feature01 h5 span.break{
	content: '';
	width: 1em;
	height: 1em;
	display: inline-block;
}
.sec09 .vibration .vibration-feature01 h6{
	font-family: "Arial Black", Gadget, "sans-serif";
  font-weight: bold;
  font-size: clamp(36px, 0.776699vw + 33.0873786px, 48px);
	background: url("../img/icon_3in1.jpg") top 0.1em left 3.5em no-repeat;
	background-size: contain;
	padding: 0.5em 0;
}
.sec09 .vibration .vibration-feature01 h6 + p{
	margin-top: -1.5em;
	font-size: clamp(16px, 0.1294498vw + 15.5145631px, 18px);
	font-weight: bold;
}
.sec09 .vibration .vibration-feature01 .vibration-newtype {
	position: relative;
	margin-bottom: 0.5em;
}
.sec09 .vibration .vibration-feature01 .vibration-newtype .title{
	font-weight: bold;
	font-style: italic;
	font-size: clamp(16px, 0.2588997vw + 15.0291262px, 20px);
	font-family: Arial, Helvetica, "sans-serif";
	background-color: #797c87;
	color: #fff;
	display: inline-block;
	padding: 0 0.5em;
	border-radius: 0.2em;
	align-self: flex-start;
	position: absolute;
	top: 0;
	left: 0;
}
.sec09 .vibration .vibration-feature01 .vibration-newtype .list {
	margin-left: 12%;
	display: flex;
	flex-wrap: wrap;
	column-gap: 2em;
	margin-bottom: 1em;
}
.sec09 .vibration .vibration-feature01 .vibration-newtype .list li {
	position: relative;
	padding-left: 1.25em;
	font-size: clamp(16px, 0.2588997vw + 15.0291262px, 20px);
	font-weight: bold;
}
.sec09 .vibration .vibration-feature01 .vibration-newtype .list li::before {
	position: absolute;
	top: 0.5em;
	left: 0;
	content: '';
	width: 1em;
	height: 1em;
	border-radius: 1em;
	display: block;
	background-color: #0092d8;
}
.sec09 .vibration .vibration-feature01 .vibration-newtype .note {
	margin-left: 12%;
	display: flex;
	flex-wrap: wrap;
	column-gap: 1.5em;
}
.sec09 .vibration .vibration-feature01 .vibration-newtype .note li {
	font-size: clamp(12px, 0.1294498vw + 11.5145631px, 14px);
	text-indent: -2.5em;
	margin-left: 2.5em;
}
.sec09 .feature{
  background-color: #ceea81;
  padding: 50px;
}
.sec09 .feature h5{
  text-align: center;
  font-size:clamp(3.0rem, 3.0vw, 3.2rem);
  font-weight: bold;
  margin-bottom: 0.5em;
}
.sec09 .feature h5 sup{font-size: 50%;}
.sec09 .feature h5 + p{margin-bottom: 3em;}
.sec09 .feature .image:not(:last-child) {margin-bottom: 50px;}
.sec09 .feature .image img{width:100%;}
.sec09 .dx{
  background-color: #eaf5f3;
  padding: 50px;
}
.sec09 .dx h5{
  text-align: center;
  font-size:clamp(3.0rem, 3.0vw, 3.2rem);
  font-weight: bold;
  margin-bottom: 1em;
}
.sec09 .dx p{
	font-size: clamp(16px, 0.1294498vw + 15.5145631px, 18px);
	text-align: center;
}
.sec09 .dx-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 30px;
}
.sec09 .dx-box.burden,
.sec09 .dx-box.problem {
  width: 49%;
  background-color: #fff;
}
.sec09 .dx-box.solution {width: 100%;}
.sec09 .dx-box img {width: 100%; vertical-align: middle;}
.sec09 .dx-box.burden h6,
.sec09 .dx-box.problem h6 {
  margin: 0;
  background-color: #626771;
  color: #fff;
  text-align: center;
	font-size: clamp(16px, 0.2588997vw + 15.0291262px, 20px);
  padding: .5em 0;
	font-weight: bold;
}
.sec09 .dx-box.burden ul,
.sec09 .dx-box.problem ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.sec09 .dx-box.burden li,
.sec09 .dx-box.problem li {
  width: calc(50% - 1px);
  margin-top: 2px;
}
.sec09 .dx-box.burden li p,
.sec09 .dx-box.problem li p {
  text-align: center;
  margin: 0;
  background-color: #bcc3d4;
  padding: .3em;
  font-weight: bold;
}
.sec09 .dx-box.solution {
  margin: 100px 0 0;
  position: relative;
}
.sec09 .dx-box.solution::before {
  content: '';
  display: block;
  position: absolute;
	left: 50%;
  transform: translateX(-50%);
  top: -63px;
	width: 0;
	height: 0;
	border: 30px solid transparent;
	border-top: 30px solid #626771;
}
.sec09 .dx-box.solution p {
	font-size: clamp(16px, 0.2588997vw + 15.0291262px, 20px);
  background-color: #cf121b;
	font-weight: bold;
  color: #fff;
  text-align: center;
  border-radius: 10px;
  margin: 0 auto;
  width: 75%;
  padding: .5em 0;
  box-shadow: 0 0 0 1px #fff, 0 0 0 5px #cf121b;
}
.sec09 .dx-box.solution p br {display: none;}
@media screen and (max-width: 1350px) {}
@media screen and (max-width: 1200px) {}
@media screen and (max-width: 768px) {
  .sec09 .visual > img {
    width: 160%;
    margin-left: -25%;
  }
	.sec09 .vibration .vibration-feature01 h5 span.break{
		display: block;
		height: 5px;
	}
	.sec09 .vibration .vibration-feature01 .vibration-newtype .title{
		position: relative;
		margin-bottom: 0.5em;
	}
	.sec09 .vibration .vibration-feature01 .vibration-newtype .list,
	.sec09 .vibration .vibration-feature01 .vibration-newtype .note {margin-left: 0;}
	.sec09 .dx-box.burden ul,
  .sec09 .dx-box.problem ul {display: block;}
  .sec09 .dx-box.burden li,
  .sec09 .dx-box.problem li {
    width: 100%;
    border: none;
  }
}
@media screen and (max-width: 480px) {
  .sec09{
    padding-top:15%;
    padding-bottom:15%;
   }
  .sec09 .wrap{margin: 20px 0;}
  .sec09 .visual .title{
    left: 0;
    padding: 30px;
    width: 100%;
  }
  .sec09 .visual .products{width: calc(100% - 60px);}
  .sec09 .visual > img {
    width: 310%;
    margin-left: -50%;
  }
	.sec09 .vibration .vibration-feature01 {padding: 100px 30px 20px;}
	.sec09 .vibration .vibration-feature01 .new-arrival{
		left: 50%;
		transform: translateX(-50%);
	}
  .sec09 .vibration .vibration-feature01 h5{
    font-size: 2.4rem;
    line-height: 1.2;
  }
	.sec09 .vibration .vibration-feature01 h6{
		background-position:bottom 0 left 0;
		background-size: contain;
		padding-bottom: 3em;
	}
  .sec09 .feature{padding: 50px 20px;}
  .sec09 .feature h5{
    font-size: 2.4rem;
    line-height: 1.2;
  }
  .sec09 .dx{padding: 50px 20px;}
  .sec09 .dx h5{
    font-size: 2.4rem;
    line-height: 1.2;
  }
	.feature03 .feature-dx-wrap {display: block;}
  .sec09 .dx-box.burden,
  .sec09 .dx-box.problem {width: 100%;}
  .sec09 .dx-box.problem {margin-top: 30px;}
  .sec09 .dx-box.solution p {width: 100%;}
  .sec09 .dx-box.solution p br {display: block;}
}


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



/* cookie
--------------------------------------------------------------*/

@media only screen and (max-width:999px) {
  .cookie-box .inner{
	width:90%;
	display:block;
  }
  .cookie-box .inner .text{
    width:100%;
	margin-bottom:10px;
  }
  .cookie-box .inner .btn{
    justify-content:flex-start;
  }
  .cookie-box .close{
	top:20px;
	transform:translateY(0);
  }
  .cookie-box .inner .privacy{
	  border:solid 1px #ddd;
	  box-sizing:border-box;
  }
}
@media only screen and (max-width:768px) {
  .cookie-box .inner .text{padding-right:40px;}
  .cookie-box .inner .text br{display:none;}
}
@media only screen and (max-width:480px) {
  .cookie-box .inner .btn{
	  display:block;
  }
  .cookie-box .inner .privacy,
  .cookie-box .inner .accept{
	  display:block;
	  width:100%;
	  margin:20px auto 0;
	  padding:15px 0;
	  height:auto;
  }
}