@charset "utf-8";
body {
  margin: 0;
	padding: 0;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.6;
	color: #313131;
	position: relative;
  font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
}
section{
  overflow: hidden;
}
.conts__cell{
  padding: 3em 0;
}
.inner{
  max-width: 1080px;
  width: 95%;
  margin: auto;
}
.bg{
  background-color: #F6F6F6;
}
h1{
  font-size: 2rem;
}
h2{
  font-size: 1.5rem;
}
h3{
  font-size: 1.35rem;
}
img {
  max-width: 100%;
  height: auto;
  width: auto;
  vertical-align: bottom;
}
.imageCenter{
  display: block;
  margin:auto;
}
.imageRight{
  display: block;
  margin-left:auto;
}
.w100{
  width:100%;
}
.poR{
  position: relative;
}
.pocc{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
  margin: auto;
}
.txt-c{
  text-align: center;
}
.txt-r{
  text-align: right;
}
.no-wrap{
  display: inline-block;
}
.space{
  display: block;
  height: 50px;
}
/* フォント
----------------------------------------------- */
.small{
  font-size: 0.8em!important;
}
.white{
  color: #fff;
}
.ftw{
  font-weight:bold;
}
.lh2{
  line-height: 2;
}
/* column
----------------------------------------------- */
.column-box{
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  justify-content: space-between;
  -webkit-justify-content: space-between;
}
.column-box-center{
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  justify-content: center;
  -webkit-justify-content: center;
}
.column-box-left{
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  justify-content: unset;
  -webkit-justify-content: unset;
}
.alc{
  align-items: center;
}
.vlm{
  vertical-align: middle;
}
.column-box > div,
.column-box > li{
  margin-bottom: 30px;
}
.mb-none > div,
.mb-none > li {
  margin-bottom: 0;
}
.column-box.reverse {
  -webkit-flex-direction: row-reverse;
  flex-direction: row-reverse;
}
.column-box__2col {
  width: 47% ;
  max-width: 570px;
}
.column-box__3col {
  width: 31% ;
  max-width: 370px;
}
.column-box__4col {
  width: 23% ;
  max-width: 270px;
}
.column-box__5col {
  width: 18% ;
  max-width: 210px;
}
.column-box__70 {
  width: 70% ;
}
.column-box__55 {
  width: 55% ;
}
.column-box__50 {
  width: 50% ;
}
.column-box__45 {
  width: 45% ;
}
.column-box__33 {
  width: 33% ;
}
.column-box__30 {
  width: 30% ;
}
.column-box__25 {
  width: 25% ;
}
.column-box__flex3{
  flex: 0 1 33%;
}
@media screen and (max-width: 480px){
  .order1{
    order: 1;
  }
}
@media screen and (max-width: 1024px) {
  .bp1024 > [class*="column-box__"] {
    width: 100% ;
    margin-bottom: 20px;
    max-width: inherit;
  }
}
@media screen and (max-width: 768px) {
  .bp768 > [class*="column-box__"] {
    width: 100% ;
    margin-bottom: 20px;
    max-width: inherit;
  }
  .bp768-half > [class*="column-box__"] {
    width: 48% ;
    margin-bottom: 20px;
    max-width: inherit;
  }
}
@media screen and (max-width: 480px) {
  .bp480 > [class*="column-box__"] {
    width: 100% ;
    margin-bottom: 20px;
    max-width: none;
  }
  .bp480-half > [class*="column-box__"] {
    width: 50% ;
    margin-bottom: 20px;
    max-width: none;
  }
}
/* margin・padding
----------------------------------------------- */
.mrA{
  margin-right: auto;
}
.mlA{
  margin-left: auto;
}
.ml20{
  margin-left:20px;
}
.mt15{
  margin-top:15px;
}
.mt30{
  margin-top:30px!important;
}
.mt50{
  margin-top:50px!important;
}
.mb0{
  margin-bottom: 0!important;
}
.mb15{
  margin-bottom:15px;
}
.mb30{
  margin-bottom:30px;
}
/* head
----------------------------------------------- */
#header{
  background-color: #fff;
}
header{
  height: 100px;
  z-index: 9999;
}
.head_nav{
  color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  width:97%;
  z-index: 999;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  padding: 40px 40px 40px 0;
  background-color: #fff;
}
.top_nav{
  background-color: transparent!important;
}
.head_nav li{
  height: 70px;
  font-size: 0.8em;
  position: relative;
  background-color:#000;
}
.head_nav li:first-of-type{
  width:35%;
}
.head_nav li:nth-of-type(3),
.head_nav li:nth-of-type(4),
.head_nav li:nth-of-type(5),
.head_nav li:nth-of-type(6){
  width:10%;
}
.head_nav li:last-of-type{
  width:30%;
  padding: 14px 20px 0;
  margin-right: 0;
}
.head_nav > li > a{
  display: block;
  width: 100%;
  height: 100%;
}
.head_logo{
  width: 200px;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  left: 10%;
}
.sp_logo_box{
  display: none;
}
.btn-contact{
  display: block;
  text-align: left!important;
}
.btn-contact img{
  width: 160px;
}
.tel{
  width: 165px;
}
@media screen and (max-width:1200px){
  .tel{
    width: 135px;
  }
}
@media screen and (max-width:1100px){
  header{
    position: fixed;
    height: 100px;
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    justify-content: space-between;
    -webkit-justify-content: space-between;
  }
  .head_nav{
    position: unset;
    display: block;
    padding: 0;
    background-color: transparent;
  }
  .head_nav li,
  .head_nav li:first-of-type,
  .head_nav li:nth-of-type(2), 
  .head_nav li:nth-of-type(3), 
  .head_nav li:nth-of-type(4)
  .head_nav li:nth-of-type(5),
  .head_nav li:nth-of-type(6),
  .head_nav li:last-of-type{
    width: 100%!important;
  }
  .sp_logo_box{
    display: block;
    position: fixed;
    z-index: 999;
  }
  .sp_logo{
    margin-top: 1em;
    width: 300px;
    height: 70px;
    font-size: 0.8em;
    z-index: 99;
    position: relative;
    background-color: #000;
  }
  .drawer-item{
    text-align:center;
  }
  .drawer-item .head_logo{
    width: 200px;
    position: unset;
  }
  .btn-contact{
    display: block;
    padding-top: 0!important;
  }
  .tel{
    display: inline-block!important;
    width: 200px;
  }
  .item-contact{
    height: auto!important;
    padding: 15px 0;
  }
  .btn-contact img{
    width: 200px;
  }
}
@media screen and (max-width:480px){
  .head_nav li{
    height: 55px;
  }
}
/* footer
----------------------------------------------- */
footer{
  padding: 3em 0;
  background-color: #000;
}
.foot_left{
  color: #fff;
  width: 45%;
  margin-right: auto;
  font-size: 0.9em;
}
.foot_left span{
  font-size: 1.3em;
  font-weight: bold;
}
.foot_right{
  color: #fff;
  font-size: 0.9em;
  width: 50%;
}
.foot_left img{
  width: 200px;
}
.copyright{
  width: 100%;
  text-align: right;
  color: #fff;
}
@media screen and (max-width:768px){
  .foot_right{
    display: none;
  }
  .foot_left{
    width: 100%;
  }
  .copyright{
    text-align: center;
  }
}
/* -------------------------------------- */
.bp480-on{
  display: none;
}
@media screen and (max-width:480px){
  .bp480-off{
    display: none;
  }
  .bp480-on{
    display: block;
  }
}
@media screen and (max-width:650px){
  .bp650-off{
    display: none;
  }
}
/* レスポンシブ */
.bp1100-on{
  display: none;
}
@media screen and (max-width:1100px){
  .bp1100-on{
    display: block;
  }
  .bp1100-off{
    display: none;
  }
}


/* ハンバーガーメニュー
----------------------------------------------- */
input.hamburger {
  display: none!important;
}
.hamburger{
  display: none!important;
}
@media screen and (max-width:1100px){
.drawer-list {
  position: fixed;
  right: 0;
  top: 0;
  height: 100vh;
  width: 100vw;
  transform: translate(100vw, 0);
  z-index: 999;
  -ms-transform: translatex(-100vw);
  box-sizing: border-box;
  pointer-events: none;
  transition: width 475ms ease-out, transform 450ms ease, border-radius 0.8s 0.1s ease;
  background-color: #000;
}
}

@media (min-width: 768px) {
  .drawer-list {
    width: 40vw;
  }
}

@media screen and (max-width:1100px){
  .drawer-list ul {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: auto;
    overflow-x: hidden;
    pointer-events: auto;
    padding-top: 55px;
  }
  .drawer-list li {
    list-style: none;
    text-transform: uppercase;
    pointer-events: auto;
    white-space: nowrap;
    box-sizing: border-box;
    transform: translatex(100vw);
    -ms-transform: translatex(-100vw);
  }
  .drawer-list li:last-child {
    margin-bottom: 2em;
  }
  .drawer-list li a {
    text-decoration: none;
    color: #FEFEFE;
    text-align: center!important;
    display: block;
    padding: 1rem;
  }
}

@media screen and (min-width:1100px) and (max-width:1210px){
  .drawer-list li a{
    font-size: 0.7rem;
  }
}

@media (min-width: 768px) {
  .drawer-list li a {
    text-align: center;
    padding: 0.5rem;
  }
}

@media screen and (max-width:1100px){
  .drawer-list li a:hover {
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.5);
  }
  input.hamburger:checked ~ .drawer-list {
    transform: translatex(0);
  }
  input.hamburger:checked ~ .drawer-list li {
    transform: translatex(0);
  }

  input.hamburger:checked ~ .drawer-list li a {
    padding-right: 15px;
  }
  input.hamburger:checked ~ label > i {
    background-color: transparent;
    transform: rotate(90deg);
  }
  input.hamburger:checked ~ label > i:before {
    background-color: #fff;
    transform: translate(-50%, -50%) rotate(315deg);
  }
  input.hamburger:checked ~ label > i:after {
    background-color: #fff;
    transform: translate(-50%, -50%) rotate(-315deg);
  }
  input.hamburger:checked ~ label close {
    color: #FEFEFE;
    width: 100%;
  }
  input.hamburger:checked ~ label open {
    color: rgba(0, 0, 0, 0);
    width: 0;
  }
  label.hamburger {
    z-index: 9999;
    position: relative;
    display: block!important;
    height: 50px;
    width: 40px;
  }
  label.hamburger:hover {
    cursor: pointer;
  }
  label.hamburger text close,
  label.hamburger text open {
    text-transform: uppercase;
    font-size: 0.8em;
    position: absolute;
    transform: translateY(50px);
    text-align: center;
    overflow: hidden;
    transition: width 0.25s 0.35s, color 0.45s 0.35s;
  }
  label.hamburger text close {
    color: rgba(0, 0, 0, 0);
    right: 0;
    width: 0;
  }
  label.hamburger text open {
    color: #000;
    width: 100%;
  }
  label.hamburger > i {
    position: absolute;
    width: 100%;
    height: 2px;
    top: 50%;
    background-color: #000;
    pointer-events: auto;
    transition-duration: 0.35s;
    transition-delay: 0.35s;
  }
  label.hamburger > i:before, label.hamburger > i:after {
    position: absolute;
    display: block;
    width: 100%;
    height: 2px;
    left: 50%;
    background-color: #000;
    content: "";
    transition: transform 0.35s;
    transform-origin: 50% 50%;
  }
  label.hamburger > i:before {
    transform: translate(-50%, -14px);
  }
  label.hamburger > i:after {
    transform: translate(-50%, 14px);
  }
  label.hamburger {
    position: fixed;
    top: 15px;
    right: 15px;
  }
}

/* アニメーション
----------------------------------------------- */
.ele {
	opacity: 0;
}
.fadein {
  opacity: 0; 
  visibility: hidden;
  transform: translateY(40px);
  transition: all 1s;
}
.fadein.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}

#conversion{
  overflow: unset;
  padding-bottom: 4em;
  padding-top: 2em;
}
#conversion img{
  width: 302px;
}

/* screwアイコン
----------------------------------------------- */
.screw01{
  position: relative;
}
.screw01:before{
  content: "";
  position: absolute;
  top: -200px;
  left: 0;
  display: block;
  width: 375px;
  height: 430px;
  background-image: url("../images/company/screw01.png");
  z-index: -1;
}
.screw02{
  position: relative;
}
.screw02:before{
  content: "";
  position: absolute;
  top: -200px;
  right: 0;
  display: block;
  width: 288px;
  height: 440px;
  background-image: url("../images/company/screw02.png");
  z-index: -1;
}
.screw03{
  position: relative;
}
.screw03:before{
  content: "";
  position: absolute;
  top: -300px;
  right: 0;
  display: block;
  width: 288px;
  height: 440px;
  background-image: url("../images/company/screw03.png");
  z-index: -1;
}
@media screen and (max-width:480px){
  .screw01:before,
  .screw02:before,
  .screw03:before{
    opacity: 0.6;
  }
}


/* お問い合わせ
----------------------------------------------- */
input{
  -webkit-appearance: none;
  border-radius: 0;
}
input[type="submit"]{
  background: #EC9100;
  padding: 10px 30px;
  font-weight: bold;
  color: #fff;
}
input[type="reset"],
input[type="button"]{
  background: #F6F6F6;
  padding: 10px 30px;
  font-weight: bold;
}
.formtable td input,
.formtable td textarea{
  width: 95%;
  padding: 10px;
  border: 1px solid #d1d4d6;
}
.formtable td label{
  display: block;
}
input[type="checkbox"],
input[type="radio"]{
  display: inline-block;
  width: 10%!important;
}
.formtable th .detail{
  display: block;
  font-size: 0.8rem;
}
.inquiry{
  color: red;
}