@charset "utf-8";
@import url("reset.css");
@import url("responsive.css");

/*common*/
*{
  font-family: 'YuGothic','Yu Gothic','Hiragino Kaku Gothic ProN','�q���M�m�p�S ProN W3','���C���I', 'Meiryo','�l�r �S�V�b�N',sans-serif;
}
html{
  font-family: 'Sawarabi Gothic','YuGothic','Yu Gothic','Hiragino Kaku Gothic ProN','�q���M�m�p�S ProN W3','���C���I', 'Meiryo','�l�r �S�V�b�N',sans-serif;
}
#index{
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  box-sizing: border-box;
  min-width: 1px;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  font-family: 'YuGothic','Yu Gothic','Hiragino Kaku Gothic ProN','�q���M�m�p�S ProN W3','���C���I', 'Meiryo','�l�r �S�V�b�N',sans-serif;
  color: #2c2c2c;
}
a {
  text-decoration: none;
  color: #000;
}
img{
  max-width: 100%;
  height: auto;
}


/*TOP_GNAVIGATION*/
#headerwrap{
  height: 20vh
}
.logo{
  width: 100%;
  height: 200px;
  margin-top: 1%;
  margin-left: 2%;
}
.logo_in{
  width: 120px;
  height: 145px;
}
/*GNAV-FADE_DOWNtoUP*/
.gnav_ul {
  transform: translateY(-20px);
  transition: all 3s;
  animation-fill-mode: forwards;
  position: absolute;
}
.gnav_ul.scrollin {
  opacity: 1;
  transform: translateX(0);
}
.gnav_nav,.gnav_ul{
  display: block;
  max-width: 200px;
  width: 100%;
  margin-top: -5%;
  top: 20%;
  left: 82%;
}
.gnav_li{
  display: block;
  margin: 3%;
  font-size: 1.3em;
  padding: 10px;
  font-family: 'Prompt', sans-serif;
  color: #000;
  cursor: pointer;
}
.gnav_li_product_li{
  font-family: 'Prompt', sans-serif;
  font-weight:  lighter;
  color: #000;
  width: 80%;
  padding: 5px 0 0 5px;
}
.dropdwn>.gnav_li_productli{
  width: 1200px;
  margin: 1px;
  background: #000;
  display: inline;
  padding: 18px;
  color: #fff;
}
.gnav_li_product_ul{
  width: 100%;
  display: none;
  position: absolute;
  margin-left: -18px;
  margin-top: 18px;
  padding: 0;
  text-indent: 1em;
  font-size: .9em;
}
.gnav_li_product_ul ,.gnav_li_product_li{
  width: 100%;
  color: #000;
}
.gnav_li_product_ul ,.gnav_li_product_li a{
  color: #000;
  text-align: left;
  position: relative;
}
.gnav_li_product_li a::after{
  content: "";
  display: block;
  background-color: red;
  width: 2em;
  height: 1px;
  margin: 0 auto;
  visibility: hidden;
  transition: .3s;
}
.gnav_li_product_li a:hover::after {
  bottom: -4px;
  opacity: 1;
  visibility: visible;
}
#init{
  color: #000;
}
#init::after {
  content: "";
  display: block;
  position: absolute;
  top: 85px;
  left: 60%;
  width: 7px;
  height: 6px;
  margin: 0 0 0 10px;
  border-right: 3px solid red;
  border-bottom: 3px solid red;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
/*TOP*/
.main_box,.main_box_d1{
  width: 100%;
  height: 100%;
}
.topimg_L{
  background-image: url(../img/2.png);
  width: 80%;
  height: 650px;
   animation: SlideIn .8s;
}
@keyframes SlideIn {
  0% {
    opacity: 0;
    transform: translateX(-180px);
  }
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}
.topimg_roll_wrap{
  width: 80%;
  height: 60vh;
  position: absolute;
  top: 80%;
  left: 2%;
}
.topimg_roll{
  width: 60%;
  height: 50vh;
  background-color: #fffe;
  display: inline-block;
  margin: 0 46%;
}
.topimg_roll /*topfade*/{
  opacity: 0;
  transform: translate(0, 200px);
  transition: all 1000ms;
}
.topimg_roll.scrollin {
  opacity: 1;
  transform: translate(0, 0);
}
.topimg_roll:nth-of-type(2) {
  -moz-transition-delay: 400ms;
  -webkit-transition-delay: 400ms;
  -o-transition-delay: 400ms;
  -ms-transition-delay: 400ms;
}
.topimg_roll:nth-of-type(3) {
  -moz-transition-delay: 800ms;
  -webkit-transition-delay: 800ms;
  -o-transition-delay: 800ms;
  -ms-transition-delay: 800ms;
}
.topimg_roll_title,.topimg_roll_d{
  color: #2c2c2c;
  font-family: 'Prompt', sans-serif;
}
.topimg_roll_title{
  margin: 5%;
  text-align: center;
  font-size: 1.8em;
  line-height: 1.2em;
  letter-spacing: -.03em;
}
.topimg_roll_d{
  margin: 5%;
  text-align: left;
  font-size: 1em;
  padding-left: 10%;
}
/* SCROLL */
.topimg_R_box{
  width: 50px;
  height: 300px;
  margin: calc(50vh - 150px) auto;
  border-radius: 50px;
  border: 1px solid #000;
  background: #fff;
  position: fixed;
  overflow: hidden;
  margin-top: -25%;
  margin-left: 95%;
  z-index: 1;
}
.topimg_R_arrowWrap{
  position: absolute;
  right: 0;
  bottom: 0;
  height: 250px
}
.topimg_R_arrowInner p {
  font-size: 12px;
  text-align: end;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  margin-top: -25px;
}
.topimg_R_arrow {
  width: 1px;
  height: 100px;
  margin: 30px auto 0;
  position: relative;
  overflow: hidden;
}
.topimg_R_arrow::before {
  content: '';
  width: 1px;
  height: 100px;
  margin: 50px auto 0;
  background-color: red;
  position: absolute;
  top: -150px;
  left: 0;
  -webkit-animation: topimg_R_arrow 2.5s ease 0s infinite normal;
  animation: topimg_R_arrow 2.5s ease 0s infinite normal;
}
@keyframes topimg_R_arrow {
  0% {
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
  }
  60% {
    -webkit-transform: translate3d(-50%, 100px, 0);
    transform: translate3d(-50%, 100px, 0);
  }
  100% {
    -webkit-transform: translate3d(-50%, 100px, 0);
    transform: translate3d(-50%, 100px, 0);
  }
}
.arrow1 {
  width: 15px;
  margin: 0 auto;
  -webkit-animation: arrow1 2s linear 0s infinite normal;
  animation: arrow1 2s linear 0s infinite normal;
}
.arrow2 {
  width: 15px;
  margin: 0 auto;
  -webkit-animation: arrow2 2s linear 0s infinite;
  animation: arrow2 2s linear 0s infinite;
}
.arrow1 ,.arrow_top1,
.arrow2 ,.arrow_top1 {
  position: relative;
  display: block;
  left: 12%;
}
.arrow1 ,.arrow_top1 {
  margin-top: 5px;
}
.arrow1 span:before,
.arrow2 span:before {
  content: '';
  width: 16px;
  height: 16px;
  border: 0;
  border-top: solid 1px red;
  border-right: solid 1px red;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  box-sizing: border-box;
}
@keyframes arrow1 {
  0% {
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
  }
  20% {
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
  }
  40% {
    -webkit-transform: translate3d(-50%, 10px, 0);
    transform: translate3d(-50%, 10px, 0);
  }
  60% {
    -webkit-transform: translate3d(-50%, 10px, 0);
    transform: translate3d(-50%, 10px, 0);
  }
  80% {
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
  }
}
@keyframes arrow2 {
  0% {
    -webkit-transform: translate3d(-50%, 10px, 0);
    transform: translate3d(-50%, 10px, 0);
  }
  20% {
    -webkit-transform: translate3d(-50%, 20px, 0);
    transform: translate3d(-50%, 20px, 0);
  }
  40% {
    -webkit-transform: translate3d(-50%, 20px, 0);
    transform: translate3d(-50%, 20px, 0);
  }
  60% {
    -webkit-transform: translate3d(-50%, 20px, 0);
    transform: translate3d(-50%, 20px, 0);
  }
  80% {
    -webkit-transform: translate3d(-50%, 10px, 0);
    transform: translate3d(-50%, 10px, 0);
  }

  100% {
    -webkit-transform: translate3d(-50%, 10px, 0);
    transform: translate3d(-50%, 10px, 0);
  }
}
/*COMMON
.arrow{
  margin-top: 15%;
  padding-left: 5px;
  font-weight: bold;
  padding-top: 20px;
}*/
.arrow span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: #000;
  position: relative;
  transform: scale(0, 1);
  transform-origin: top left;
  animation: arrow01 5s ease-in-out infinite forwards;
  margin-bottom: 10%;
}
.arrow_r span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: #000;
  position: relative;
  transform: scale(0, 1);
  transform-origin: top right;
  animation: arrow03 5s ease-in-out infinite forwards;
  margin-bottom: 10%;
}
@keyframes arrow01 {
    0% { transform: scale(0, 1); }
    30% { transform: scale(0, 1); }
    40% { transform: scale(1, 1); }
    85% { transform: scale(1, 1); opacity: 1;}
    90% { transform: scale(1, 1); opacity: 0; }
    100% { transform: scale(1, 1); opacity: 0; }
}
@keyframes arrow03 {
    0% { transform: scale(0, 1); }
    30% { transform: scale(0, 1); }
    40% { transform: scale(1, 1); }
    85% { transform: scale(1, 1); opacity: 1;}
    90% { transform: scale(1, 1); opacity: 0; }
    100% { transform: scale(1, 1); opacity: 0; }
}
.arrow span::after {
  content: "";
  display: block;
  width: 30%;
  height: 35px;
  border-right: 2px solid #000;
  transform: rotate(-135deg) scale(1, 0);
  transform-origin: right bottom;
  position: absolute;
  bottom: 2px;
  right: 1px;
  animation: arrow02 5s ease-in-out infinite forwards;
}
.arrow_r span::after {
  content: "";
  display: block;
  width: 30%;
  height: 45px;
  border-left: 2px solid #000;
  transform: rotate(-135deg) scale(0, 1);
  transform-origin: left top;
  position: absolute;
  top: 0;
  left: 1px;
  animation: arrow04 5s ease-in-out infinite forwards;
}
@keyframes arrow02 {
    0% { transform: rotate(-45deg) scale(1, 0); }
    45% { transform: rotate(-45deg) scale(1, 0); }
    55% { transform: rotate(-45deg) scale(1, 1); }
    85% { transform: rotate(-45deg) scale(1, 1); opacity: 1;}
    90% { transform: rotate(-45deg) scale(1, 1); opacity: 0; }
    100% { transform: rotate(-45deg) scale(1, 1); opacity: 0; }
}
@keyframes arrow04 {
    0% { transform: rotate(-135deg) scale(1, 0); }
    45% { transform: rotate(-135deg) scale(1, 0); }
    55% { transform: rotate(-135deg) scale(1, 1); }
    85% { transform: rotate(-135deg) scale(1, 1); opacity: 1;}
    90% { transform: rotate(-135deg) scale(1, 1); opacity: 0; }
    100% { transform: rotate(-135deg) scale(1, 1); opacity: 0; }
}

/*PRODUCT*/
.prodcut_box{
  clear: both;
}
.prodcut_box_wrap{
  width: 100%;
  height: 100%;
}
.prodcut_box_title{
  font-weight: bold;
  font-size: 2.5em;
  width: 100%;
  margin: 25% auto 2em auto;
  text-align: center;
}
.prodcut_box_title_2{
  font-weight: bold;
  font-size: 2.5em;
  width: 100%;
  margin: 35% auto 2em auto;
  text-align: center;
}
.prodcut_box_title_s2{
  font-weight: bold;
  font-size: 2.2em;
  width: 100%;
  text-align: center;
  line-height: 1;
  margin-top: -12%;
}
.prodcut_box_title_m {
  font-weight: bold;
  font-size: 2.5em;
  width: 100%;
  margin: 4em auto 2em auto;
  text-align: center;
}
.prodcut_box_title_mi{
  font-weight: bold;
  font-size: 2.5em;
  width: 100%;
  margin: 0 auto 2em auto;
  text-align: center;
}
/*PRODUCTfade*/
.prodcut_box1,.prodcut_box2{
  width: 100%;
  margin-top: 3%;
  display: table;
  opacity: 0;
  transform: translate(0, 50px);
  transition: all 800ms;
}
.prodcut_box1.scrollin {
  opacity: 1;
  transform: translate(0, 0);
}
.prodcut_box1:nth-of-type(2) {
  -moz-transition-delay: 400ms;
  -webkit-transition-delay: 400ms;
  -o-transition-delay: 400ms;
  -ms-transition-delay: 400ms;
}
.prodcut_box1:nth-of-type(3) {
  -moz-transition-delay: 800ms;
  -webkit-transition-delay: 800ms;
  -o-transition-delay: 800ms;
  -ms-transition-delay: 800ms;
}
.prodcut_box2.scrollin {
  opacity: 1;
  transform: translate(0, 0);
}
.prodcut_box2:nth-of-type(2) {
  -moz-transition-delay: 400ms;
  -webkit-transition-delay: 400ms;
  -o-transition-delay: 400ms;
  -ms-transition-delay: 400ms;
}
.prodcut_box2:nth-of-type(3) {
  -moz-transition-delay: 800ms;
  -webkit-transition-delay: 800ms;
  -o-transition-delay: 800ms;
  -ms-transition-delay: 800ms;
}
.prodcut_box_img{
  width: 35%;
  height: 400px;
  margin-bottom: 10%;
  margin-left: 7%;
  float: left;
  clear: both;
}
.box_img_{
  width: 100%;
  height: 43vh;
}
.prodcut_box_img2{
  width: 30%;
  height: 450px;
  margin-right: 7%;
  margin-bottom: 10%;
  float: right;
  clear: both;
  text-align: center;
}
.prodcut_box_detail_wrap1{
  margin-left: 50%;
  width: 30%;
  height: 50vh;
  float: left;
  margin-top: -35em;
}
.prodcut_box_detail_wrap2{
  float: right;
  clear: both;
  margin-right: 50%;
  height: 50vh;
  width: 30%;
  margin-top: -35em;
}
.prodcut_box_title_s{
  font-size: 2.2em;
  font-weight: bold;
  text-align: center;
  line-height: 1;
}
.topimg_roll_sub{
  font-size: .45em;
  font-weight:  lighter;
  text-align: center;
  font-family: 'Noto Sans JP', sans-serif;
}
.topimg_roll_sub::before{
  content: "";
  background-color: red;
  padding: 1px;
  margin: 20px;
  border: 2px solid red;
  width: 1px;
}
.topimg_roll_sub::after{
  content: "";
  background-color: red;
  padding: 1px;
  margin: 20px;
  border: 2px solid red;
  width: 1px;
}
.prodcut_box_detail{
  clear: both;
  margin-top: 8%;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: .95em;
}
.prodcut_box_view{
  margin: 8%;
  position: relative;
  width: 55%;
}
.prodcut_box_view_arrow{
  font-size: 1em;
  font-weight: bold;
  text-align: left;
}
.prodcut_box_view_arrow{
  display:inline-block;
  width: 100px;
  padding: 10px 30px 10px 10px;
  text-align:center;
  margin-top: 15px;
  cursor: pointer;
  position: relative;
  text-decoration: none;
}
.prodcut_box_view_arrow::after{
   content: "";
   display: block;
   position: absolute;
   top: calc(50% - 2px);
   left: 120px;
   width: 20px;
   height: 5px;
   border: none;
   border-right: 1px solid #2c2c2c;
   border-bottom: 1px solid #2c2c2c;
   transform: skew(45deg);
   transition: .3s;
}
.prodcut_box_view_arrow:hover::after{
   right: 50px;
   width: 80px;
}
/*PRODUCT_S*/
.prodcut_box_s{
  clear: both;
  margin: 0 auto;
  width: 100%;
  text-align: center;
}
.box_s{
  display: inline-block;
  margin: 7em 2em;
}
.box_s /*topfade*/{
  opacity: 0;
  transform: translate(0, 100px);
  transition: all 500ms;
}
.box_s.scrollin {
  opacity: 1;
  transform: translate(0, 0);
}
.box_s:nth-of-type(2) {
  -moz-transition-delay: 400ms;
  -webkit-transition-delay: 400ms;
  -o-transition-delay: 400ms;
  -ms-transition-delay: 400ms;
}
.box_s:nth-of-type(3) {
  -moz-transition-delay: 800ms;
  -webkit-transition-delay: 800ms;
  -o-transition-delay: 800ms;
  -ms-transition-delay: 800ms;
}
.box_s_img{
  width: 300px;
  height: 300px;
}
.box_s_img:hover{
  transform: scale(1.1);
  transition-duration: 0.8s;
}
.prodcut_box_s_details{
  width: 250px;
  margin: 0 auto;
  text-align: left;
  margin-top: .9em;
  font-family: 'Noto Sans JP', sans-serif;
  letter-spacing: .007em;
  font-size: .9em;
}
.prodcut_box_s_title{
  font-weight: bold;
  font-size: 1.8em;
  margin-bottom: .95em;
}
/*MAKER*/
.prodcut_maker_wrap{
  display: flex;
  text-align: left;
  max-width: 1200px;
  margin: 0 auto;
}
.image_wrap{
  position: relative;
  overflow: hidden;
  padding-top: 35%;
  margin: 10px 5px;
}
.maker{
  width: 200px;
}
.image_wrap img{
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  height: 100px;
  object-fit: contain;
}
.prodcut_maker_ul,.prodcut_maker_li{
  display: inline-block;
  margin: 2%;
}
.prodcut_maker_li{
  max-width: calc(1200px/4);
  flex-basis: 100%;
}
/*MAKER_fade*/
.prodcut_maker {
  opacity: 0.1;
  transform: translateY(120px);
  transition: all 2s;
}
.prodcut_maker.scrollin {
  opacity: 1;
  transform: translate(0);
}

/*TOPICS*/
.topics_a{
  margin-left: 15%;
  margin-bottom: 10%;
  max-width: 1200px;
}
dt{
  border-bottom: 1px solid #ccc;
  float: left;
  padding: 15px 5px;
}
dd{
  border-bottom: 1px solid #ccc;
  margin-left: 80px;
  padding: 15px 5px;
}
.topics{
  font-family: 'Noto Sans JP', sans-serif;
}
.moretopics{
  width: 200px;
  float: left;
}
.new{
  margin-left:-52px;
  padding: 10px;
  color: #fff;
  background-color: red;
  border-radius: 5px;
}
.moretopics{
  padding: 5px 3px;
  color: #fff;
  background-color: #172a88;
  border-radius: 5px;
  width: 50px;
  margin-left: 1%;
  margin-right: 1%;
  text-align: center;
}
.entrytime{
  padding: 10px;
  font-family: 'Noto Sans JP', sans-serif;
}
/*FOOTER*/
footer{
  clear: both;
  border-top: 1px solid #c2c2c2;
}
.logo_f{
  width: 200px;
  height: 200px;
  margin-top: 5%;
  margin-left: 5%;
}
.logo_f_y{
  width: 130px;
  height: 160px;
}
.address{
  margin-top: 5%;
}
.add{
  padding: 2px;
  text-align: center;
  font-size: .8em;
}
.map{
  width: 40px;
  height: 40px;
}
.sns{
  text-align: center;
  width: 100%;
}
.sns_f{
  width: 30px;
  height: 30px;
  padding: 8px;
}
.copyright{
  text-align: center;
}
/*FOOTER_NAVIGATION*/
.fnav{
  max-width: 1200px;
  margin-left: 18%;
  margin-top: -5%
}
.fnav_nav,.fnav_ul{
  display: block;
  width: 100%;
}
.fnav_li{
  margin: .5em;
  position: relative;
  padding-left: 15px;
  font-weight: 600;
  color: #000 !important;
}
.fnav_li::after{
  position: absolute;
  content: "";
  display: inline-block;
  width: 1.5em;
  height: 2px;
  background-color: red;
  position: absolute;
  bottom: 0;
  left: 20px;
}
.fnav_li_product_d{
  margin-left: 15%;
  margin-top: -2%;
}
.fnav_li_product_d,.fnav_li_product_ul,.fnav_li_product_li{
  display: inline-block;
}
.fnav_li_product_li{
  max-width: calc(1200px/4);
  width: 30%;
  /*margin-top: -5%;*/
  position: relative;
  padding-left: 15px;
  letter-spacing: .05em;
  color: #000;
  line-height: 1em;
  margin-bottom: 2%;
}
.fnav_li_product_li::before{
  position: absolute;
  content: '';
  top: 0.5em;
  left: 0;
  height: 0;
  width: 0;
  border-style: solid;
  border-width: 6px 0 6px 9px;
  border-color: transparent transparent transparent red;
}
.footsub{
  font-family: 'Noto Sans JP', sans-serif;
  font-size: .9em;
}
/*INFOMATION*/
.infomation_t{
  margin-left: 38%;
  margin-bottom: 10%;
  max-width: 1200px;
  }
.infomation_p{
  margin: 2em auto 2em auto;
  font-family: 'Noto Sans JP', sans-serif;
  font-family: 'Sawarabi Gothic', sans-serif;}
.info_btn{
  width: 7rem;
  height: 30px;
  background-color: #172a88;
  border-radius: 10px;
  color: #fff;
  padding: 10px;
  text-align: center;
  margin: 3em 10em;
}
.info_a{
  color: #fff;
font-family: 'Noto Sans JP', sans-serif;
}
/*SOLUTION*/
.solution_details{
  margin: 0 auto;
}
.topimg_L_solution{
  background-image: url(../img/arvo-solution.jpg);
  background-position: center;
  background-size: cover;
  width: 80%;
  height: 650px;
}
.topimg_roll_title_e{
  font-size: 2.9em;
  font-weight: bold;
  color: #172a88;
  font-family: 'Prompt', sans-serif;
  text-align: center;
  margin-top: 50px;
  letter-spacing: .08em;
  line-height: 1em;
}
.topimg_roll_d_e{
  margin-left: 5%;
margin-bottom: 5%;
  font-family: 'Prompt', sans-serif;
  padding: 35px;
}
.product_img{
  width: 500px;
  height: 400px;
}
.topimg_roll_title_product{
  width: 100%;
  font-size: 1.2em;
  font-family: 'Noto Sans JP', sans-serif;
  display: flex;
  align-items: center;
  margin: 1.5em 0 0 3.5em;
}
.topimg_roll_title_product::after{
  content: "";
  width: 70px;
  background: #000;
  border: 1px solid #000;
  margin-left: 5px;
}
.topimg_roll_p{
  width: 80%;
  font-size: .9em;
  font-family: 'Noto Sans JP', sans-serif;
  margin: 1.5em 0 3em 3.5em;
  text-align: left;
}
.topimg_roll_wrap_product{
  display: block;
  text-align: center;
  margin: 0 5%;
}
.topimg_roll_solution/*solutionfade*/{
  opacity: 0;
  transform: translate(0, 100px);
  transition: all 2000ms;
  display: inline-block;
  flex-basis: 100%;
  max-width: calc(1200px/2);
  width: 100%;
  height: 100%;
  vertical-align:top;
}
.topimg_roll_solution.scrollin {
  opacity: 1;
  transform: translate(0, 0);
}
.topimg_roll_solution:nth-of-type(2) {
  -moz-transition-delay: 400ms;
  -webkit-transition-delay: 400ms;
  -o-transition-delay: 400ms;
  -ms-transition-delay: 400ms;
}
.topimg_roll_solution:nth-of-type(3) {
  -moz-transition-delay: 800ms;
  -webkit-transition-delay: 800ms;
  -o-transition-delay: 800ms;
  -ms-transition-delay: 800ms;
}
.topimg_roll_solution:nth-of-type(4) {
  -moz-transition-delay: 1200ms;
  -webkit-transition-delay: 1200ms;
  -o-transition-delay: 1200ms;
  -ms-transition-delay: 1200ms;
}
/*STEP*/
.solution_step{
  width: 100%;
  height: 100%;
  display: inline-flex;
  margin: 0 15%;
}
.prodcut_box_title_sub{
  width: 50%;
  margin: 1em 20% 5em 32%;
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 1.8em;
}
.step_wrap{
  margin: 5%;
  height: 100%;
  display: inline-block;
  width: 100%;
}
.box_s_p{
  opacity: 0;
  transform: translate(0, 100px);
  /*transition: all 2000ms;*/
  display: inline-block;
  flex-basis: 100%;
  max-width: calc(1200px/4);
  width: 100%;
  height: 100%;
  margin: 1%;
}
.box_s_p.scrollin {
  opacity: 1;
  transform: translate(0, 0);
}
.box_s_p:nth-of-type(2) {
  -moz-transition-delay: 400ms;
  -webkit-transition-delay: 400ms;
  -o-transition-delay: 400ms;
  -ms-transition-delay: 400ms;
}
.box_s_p:nth-of-type(3) {
  -moz-transition-delay: 900ms;
  -webkit-transition-delay: 900ms;
  -o-transition-delay: 900ms;
  -ms-transition-delay: 900ms;
}
.box_s_p:nth-of-type(4) {
  -moz-transition-delay: 1300ms;
  -webkit-transition-delay: 1300ms;
  -o-transition-delay: 1300ms;
  -ms-transition-delay: 1300ms;
}

.step_details_title{
  font-size: 1.5em;
  font-weight: bold;
  display: inline-block;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #000;
  color: #fff;
  line-height: 100px;
  text-align: center;
}
.solution_details_sub{
  font-size: 1.2em;
  font-weight: lighter;
  text-align: left;
  font-family: 'Noto Sans JP', sans-serif;
  margin-top: 10px;
}
.step_s::before{
  content: "";
  background-color: #172a88;
  padding: 1px;
  margin: 20px;
  border: 2px solid #172a88;
  width: 10px;
}
.step{
  font-weight: lighter;
  text-align: left;
  font-family: 'Noto Sans JP', sans-serif;
  margin-top: 20px;
  width: 70%;
}
.prodcut_box_solution_img_bot{
  text-align: center;
}
.prodcut_box_solution_img_bot{
  margin: 30em auto 5em auto;
  background-color: #000;
  background-image: url(../img/support-arvo.jpg);
  background-size: cover;
  background-position: center;
  padding: 150px 0px;
  position: relative;
  width: 60%;
  height: 150px;
}
.prodcut_box_solution_img_bot:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.6);
}
.infomation_p_innner{
  text-align: center;
  position: absolute;
  width: 100%;
}
.infomation_p_d{
  color: #fff;
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 1.8em;
  letter-spacing: .08em;
}
.info_btn_t{
  float: left;
  margin: 5%;
}
.infotel{
  font-size: 2em;
  font-weight: bold;
  color: #fff;
  margin-top: 5%;
}
.infotel_e{
  color: #fff;
}
.info_btn_p{
  width: 15rem;
  height: 4em;
  border: 1px solid #172a88;
  border-radius: 5px;
  background-color: #172a88;
  margin-left: 55%;
  margin-top: 10%;
  padding-top: 18px;
}
.info_btn_p:hover{
  background-color: #fff;
}
.info_a_p{
  color: #fff;
  font-size: 1.8em;
}
.info_a_p:hover{
  color: #172a88;
  cursor: pointer;
  font-weight: bold;
}
/*COMPANYPROFILE*/
.topimg_L_company{
  background-image: url(../img/bussinessimg.jpg);
  background-position: center;
  background-size: cover;
  width: 80%;
  height: 450px;
}
.company_box{
  width: 100%;
  height: 100%;
}
.company_roll_wrap{
  background-color: #172a88;
}
.topimg_roll_innner{
  width: 60%;
  height: 100%;
  margin: 5% 0 5% 5%;
  background-color: #fffe;
  padding-top: 50px;
  display: inline-block;
}
.topimg_roll_us /*topfade*/{
  opacity: 0;
  transform: translate(0, 100px);
  transition: all 2000ms;
}
.topimg_roll_us.scrollin {
  opacity: 1;
  transform: translate(0, 0);
}
.topimg_roll_us:nth-of-type(2) {
  -moz-transition-delay: 400ms;
  -webkit-transition-delay: 400ms;
  -o-transition-delay: 400ms;
  -ms-transition-delay: 400ms;
}
.topimg_roll_us:nth-of-type(3) {
  -moz-transition-delay: 800ms;
  -webkit-transition-delay: 800ms;
  -o-transition-delay: 800ms;
  -ms-transition-delay: 800ms;
}
.topimg_roll_title_us{
  font-size: 2.9em;
  font-weight: bold;
  color: #172a88;
  font-family: 'Prompt', sans-serif;
  text-align: center;
  margin-top: 150px;
  letter-spacing: .08em;
}
.wrap-listed{
  width: 80%;
  margin: 15% 0 10% 5%;
  padding: 15px;
  font-family: 'Prompt', sans-serif;
}
.c-name{
  color: #172a88;
  border-bottom: 1px solid #172a88;
  vertical-align: middle;
  text-align: left;
  font-size: 1.2em;
  padding: 1.5em 1em 1.5em 1.5em;
}
.c-name2{
  color: #000;
  letter-spacing: .1em;
  vertical-align: middle;
  text-align: left;
  font-size: 1em;
  border-bottom: 1px solid #172a88;
  line-height: 25px;
  padding: 1em 0 .5em 1.5em;
}
.company{
  margin-right: 10%;
  margin-top: 5%;
  z-index: 2;
  position: absolute;
  left: 60%;
}
.logo_imag_a{
  width: 300px;
  height: 300px;
}
/*BUSSINESS DETAIL*/
.logo_square{
  width: 180px;
  height: 70px;
}
.detail-style,.detail-style-p {
  margin-left: 20%;
  margin-top: 10%;
  margin-bottom: 20%;
  color: #000 !important;
  text-align: left;
}
.list-b{
  padding: 10px;
  line-height: 1.5em;
  display: list-item;
  list-style: square;
  font-family: 'Prompt', sans-serif;
}
.list-c{
  padding: 10px;
  line-height: 1.5em;
  display: list-item;
  list-style: none;
  font-family: 'Prompt', sans-serif;
}
.philosophy-d{
  font-weight: bold;
  font-family: 'Prompt', sans-serif;
  margin: 1.5em 0 1.5em 0;
  font-size: 1.3em;
  color: #172a88;
}
.logo_style{
  width: 20px;
  height: 20px;
}
/*CONTACT*/
.form-form{
  width: 100%;
  margin: 0 auto;
}
.informattention{
  width: 100%;
  margin: 5% auto;
}
.attention-a,.attention_p{
  width: 100%;
  line-height: 1.5em;
  font-family: 'Prompt', sans-serif;
  text-align: center;
}
.contactbox_td_radio1{
  margin-top: 1em;
}
.required_red{
  font-size: .9em;
  border: 1px solid red;
  border-radius: 3px;
  background-color: red;
  color: #fff;
  padding: 3px;
}
.required_b{
  font-size: .9em;
  border: 1px solid blue;
  border-radius: 3px;
  background-color: blue;
  color: #fff;
  padding: 3px;
}
.contactbox{
  max-width: 1200px;
  margin: 0 auto;
  font-family: 'Prompt', sans-serif;
}
.contactbox_t{
  max-width: 1200px;
  margin: 0 auto;
  table-layout: fixed;
}
.contactbox_th {
  text-align: left;
  padding: 1em 3em .5em 1.5em;
  color: #000;
  vertical-align: top;
  font-size: 1.2em;
  border-bottom: 1px solid #000;
  width: 20%;
  height: 90px;
}
.contactbox_td{
  border-bottom: 1px solid #003366;
  text-align: left;
  padding: 10px;
  vertical-align: middle;
}
.radiodetail{
  width: 100%;
  text-align: left;
  font-size: .8em;
  line-height: 1.5em;
}
.radio1{
  margin-left: 4%;
}
.name,.email,.tel{
  height: 25px;
  text-align: left;
  font-size: 1.2em;
  vertical-align: middle;
  width: 70%;
}
.prefecture{
  width: 15%;
  height: 25px;
  margin-top: .45em;
}
.address_c{
  width: 90%;
  height: 25px;
  margin-top: .45em;
}
.message{
  height: 250px;
  padding: 20px;
  margin: 15px 0 10px 0;
  font-size: 1.3em;
  width: 90%;
}
.btn-c{
  font-size:1.2em;
  border: 1px solid #172a88;
  padding: .3em;
  background-color: #172a88;
  color: #fff;
  border-radius: 5px;
  margin: 1.5em auto 1em 50%;
  font-family: 'Prompt', sans-serif;
  padding: 15px;
}
.attention{
  font-size: 1em;
  text-align: center;
  margin-bottom: 20px;
  margin-top: 20px;
}
/*PRODUCT COMMON*/
.box_img_m{
  width: 200px;
}
.topimg_L_pro{
  background-image: url(../img/AP_b.jpeg);
  background-position: center;
  background-size: cover;
  width: 80%;
  height: 650px;
}
.servey{
  width: 150px;
  height: 150px;
}
.ap_check{
  width: 80%;
  height: 100%;
  display: inline-flex;
  margin: 0 15%;
}
.prodcut_box_title_bot{
  font-weight: bold;
  font-size: 2.5em;
  width: 100%;
  margin: 5em auto 2em auto;
  text-align: center;
}
.prodcut_box_recommended{
  font-size: 1.8em;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: bold;
  text-align: center;
  margin-bottom: 2em;
}
.prodcut_box_title_p2{
  width: 100%;
  font-size: 1.8em;
  font-family: 'Noto Sans JP', sans-serif;
  display: flex;
  align-items: center;
  margin: 1.5em 0 0 .5em;
}
.prodcut_box_title_p2::after{
  content: "";
  width: 100px;
  background: #000;
  border: 1px solid #000;
  margin-left: 25px;
  position: relative;
  }
/*PRODUCT SRIDER*/
.carousel{
  margin: auto;
  overflow: hidden;
}
.slide-top{
  width: 40vh;
  height: 60vh;
  flex-basis: 100%;
  margin: 0 auto;
}
.slide_inner{
  margin: 5%;
  min-width: 100%;
  width: min-content;
  text-align: center;
}
.slide_inner .remmendpick{
  text-align: center;
  flex-basis: 100%;
  max-width: 100%;
  height: 30vh;
}
.slide_inner .remmendpick_ke/*キーエンス_L*/{
  text-align: center;
  height: 30vh;
  flex-basis: 100%;
  max-width: 100%;
}
.slide-top .remmendpick_ke/*キーエンス製品*/{
  flex-basis: 100%;
  object-fit: contain;
}
.slide_inner_t{
  font-size: 1.8em;
  text-align: center;
  font-family: 'Noto Sans JP', sans-serif;
  margin: 25% 0 0 20%;
  position: relative;
  display: flex;
  align-items: center;
}
.slide_inner_t::after {
  content: "";
  width: 20px;
  background: #000;
  border: 1px solid #000;
  margin-left: 25px;
  position: relative;
}
.box_img_s/*ユニテック_L*/{
  width: 150px;
  height: 65px;
  margin: 0 20%;
}
.slide_inner .box_img_ke/*キーエンス*/{
  width: 150px;
  height: 40px;
  margin: 0 20%;
  flex-basis: 100%;
}
.slide_inner:hover{
  cursor: pointer;
  webkit-transform: scale(1.1);
  transform: scale(1.1);
  -webkit-transition: 1s ease-in-out;
  transition: 1s ease-in-out;
  opacity: 0.8;
  visibility: visible;
}

/*MOBILE*/
.topimg_L_pro_m{
  background-image: url(../img/hanndy2.jpg);
  background-position: center;
  background-size: cover;
  width: 80%;
  height: 650px;
}
.box_img_630{
  width: 430px;
  height: 400px;
}
/*SCANNER_NEW_ITEM*/
.new_r{
  border: 1px slid red;
  border-radius: 3px;
  font-size: .7em;
  background-color: red;
  color: #fff;
  margin: 1em;
  padding: 5px;
}
.box_img_new{
  width: 330px;
  height: 300px;
}
/*TRANCIEVER*/
.topimg_L_pro_t{
  background-image: url(../img/walkie.jpg);
  background-position: center;
  background-size: cover;
  width: 80%;
  height: 650px;
}
.tran_pickup{
  width: 100%;
  height: 100%;
  display: flex;
  margin: 0 2%;
  text-align: center;
}
.tran_pickup_ul,.tran_pickup_li{
  display: inline-flex;
  width: 100%;
}
.tran_pickup_li{
  width: 40%;
  margin: 0 auto;
}
.box_img_t{
  width: 200px;
  margin: ;
}
.gallery_pick{
  margin-bottom: 10%;
}
.tran_pickup_title{
  width: 100%;
  height: 10vh;
  font-size: 1.8em;
  font-family: 'Noto Sans JP', sans-serif;
  display: flex;
  align-items: center;
  margin: -15% 0 0 .5em;
}
.tran_pickup_title::after {
  content: "";
  width: 50px;
  background: #000;
  border: 1px solid #000;
  margin-left: 25px;
  position: relative;
}
.tran_inner{
  width: 100%;
  margin-top: 5%;
}
.tran_title_w{
  width: 100%;
  margin-right: 5%;
}
.tran_pickup_detail{
  width: 100%;
  text-align: left;
  margin-bottom: 3em;
}
/*SECURITYCAMERA*/
.topimg_L_pro_s{
  background-image: url(../img/securitycamera.jpeg);
  background-position: center;
  background-size: cover;
  width: 80%;
  height: 650px;
}
.box_img_sc{
  width: 300px;
  height: 190px;
}
/*PRINTER_RFID*/
.topimg_L_pro_rf{
  background-image: url(../img/RFIDtag.jpeg);
  background-position: center;
  background-size: cover;
  width: 80%;
  height: 650px;
}
.topimg_L_pro_pr{
  background-image: url(../img/mobileprinter.jpg);
  background-position: top;
  background-size: cover;
  width: 80%;
  height: 650px;
}
/*APPLYCATION*/
.topimg_L_as{
  background-image: url(../img/webapplication.jpg);
  background-position: center;
  background-size: cover;
  width: 80%;
  height: 650px;
}
.app_sub_wrap{
  width: 100%;
  margin: 3em auto 5em auto;
  display: block;
  font-family: 'Prompt', sans-serif;
  text-align: center;
}
.app_sub_wrap_top{
  width: 100%;
  margin: 3em auto 5em auto;
  display: block;
  font-family: 'Prompt', sans-serif;
  text-align: center;
}
/*WEBDESIN*/
.topimg_L_wg{
  background-image: url(../img/plans-arvo-on.jpg);
  background-position: center;
  background-size: cover;
  width: 80%;
  height: 650px;
}
.topimg_roll_wrap_design{
  margin: 0 auto;
  text-align: center;
　max-width: 1200px;
}
.design_check{
  display: flex;
}
.topimg_roll_design{
  margin-left: 5%;
  text-align: center;
  flex-wrap: wrap;
}
.design_in_wrap{
  width: 250px;
  margin: 0 auto;
}
.design_in_wrap img{
  flex-basis: 100%;
  max-width: 100%;
  height: 18vh;
  text-align: center;
}
.design_sub{
  font-family: 'Prompt', sans-serif;
  width: 80%;
  margin: 0 auto 5em auto;
  text-align: left;
}
.prodcut_box_title_d{
  font-weight: bold;
  font-size: 2.5em;
  width: 100%;
  margin: 5% auto 2em auto;
  text-align: center;
}
.work_contain{
  display: flex;
  margin: 2%;
}
.work_wrap{
  margin: 3% auto;
}
.work_imgwrap{
  width: 450px;
  height: 50vh;
}
.work_imgwrap .workimg{
  text-align: center;
  width: 450px;
  height: 30vh;
  object-fit: contain;
  object-position: 0 100%;
}
.workimg:hover{
  overflow: hidden;
  transform: scale(1.1);
  transition-duration: 0.9s;
  filter: sepia(100%);
}
/*GRAPFIC*/
.work_contain_g{
  display: flex;
  margin: 0 auto;
  text-align: center;
  max-width: 1200px;
  width: 100%;
}
.work_imgwrap_g .workimg_g{
  text-align: center;
  flex-basis: 100%;
  /*width: 250px;
  height: 30vh;*/
}
.work_imgwrap_g .workimg_g:hover{
  transform: scale(1.1);
  transition-duration: 0.9s;
}
.work_wrap_g{
  margin: 1em;
  width: 350px;
  height: 30vh;
}
.work_title{
  margin-top: .5em;
  font-family: 'Prompt', sans-serif;
  font-size: 1.2em;
  position: relative;
  margin-left: 1em;
  margin-bottom: .55em;
}
.work_title_g{
  margin-top: .5em;
  font-family: 'Prompt', sans-serif;
  font-size: 1em;
  margin-bottom: .55em;
}
.work_sub{
  font-family: 'Prompt', sans-serif;
}
.work_sub_g{
  font-family: 'Prompt', sans-serif;
}
/*WORK_WEB*/
.work_web{
  max-width: 1200px;
  width: 50%;
  margin: 0 auto;
}
.work_web_catch{
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}
.work_web_catch_ul{
  display: flex;
  margin: 0 auto;
}
.work_web_catch_li{
  border: 1px solid #2c2c2c;
  border-radius: 5px;
  margin: .5%;
  padding: 1px;
}
/*.work_web_t_wrap {
  position: relative;
  width: 450px;
  margin-top: 5%;
}*/
.work_web_t_wrap{
  width: 30%;
  border: 4px solid #000;
  margin-top: 2em;
  padding: 25px;
}
.work_web_t_wrap_in{
  background-color: red;
  width: 110%;
  margin-left: 10%;
}
.work_web_title{
  font-family: 'Prompt', sans-serif;
  font-size: 1.2em;
  margin-bottom: 2em;
}
.work_web_title {
  position: relative;
  text-align: left;
}
.work_web_title:before {
  position: absolute;
  bottom: -10px;
  left: 25%;
  width: 60px;
  height: 3px;
  content: '';
  border-radius: 3px;
  background: #000;
}
.web_sub:hover{
  transform: scale(1.2);
  transition-duration: 0.9s;
}
.work_web_title_sub a{
  font-family: 'Prompt', sans-serif;
  padding-top: 10px;
}
/*ap*/
.prodcut_box_img2_ap{
  width: 40%;
  height: 450px;
    margin-right: 7%;
    margin-bottom: 10%;
    float: right;
    clear: both;
    text-align: center;
}
.box_img_apz{
  width: 100%;
}
.ap-box{
  width: 100%;
  display: flex;
}
.ap-box_slide_inner{
  width: 50%;
  display: inline-flex;
}
.ap_img_re_box{
  width: 90%;
  margin-top: 40%;
  margin-left: -90%;
  text-align: center;
}
.ap_img_re_box2{
  width: 100%;
  margin-top: 50%;
  margin-left: -100%;
  text-align: center;
  color: #000;
}
.slide_inner_t_ap{
  font-size: 1.8em;
  text-align: left;
  font-family: 'Noto Sans JP', sans-serif;
  margin: 0 0 0 20%;
  position: relative;
  align-items: center;
  width: 100%;
  height: 20vh;
}
.slide_inner_t_ap::after {
  content: "";
  width: 100px;
  background: #000;
  border: 1px solid #000;
  margin: -5% 0 0 6em;
  position: relative;
  display: block;
}
/*topics_infomation*/
.topics_info{
  margin: 0 15% 0;
  text-align: center;
}
.topics_detail{
  line-height: 2em;
}
.topics_readmore{
  font-weight: bold;
  font-size: .65em;
  margin-left: 4em;
  color: #172a88 !important;
}
.topics_readmore{
  position: relative;
  align-items: center;
}
.topics_readmore::after {
  content: "";
  width: 20px;
  background: #000;
  border: 1px solid #000;
  margin: 0 0 0 1em;
  display: inline-flex;
}