@charset "UTF-8";

/*-------------------------------共通css-------------------------------*/
body {overflow-x: hidden;letter-spacing: 0.2em;background-color: #fff;}
.sp {display: none;}
.pc {display: block;}
img {width: 100%;height: auto;}
p {line-height: 2;}
main {overflow-x: hidden;}
.object-fit-img {object-fit: cover;object-position: bottom;font-family: 'object-fit: cover; object-position: bottom;'}

/* 404ページ */
.error404 {width: 90%;margin: 100px auto 20px auto;}
.error404 h2 {text-align: center;font-size: 25px;}
.error404 .home {text-align: center;}
.error404 p a {text-align: center;display: inline-block;margin: 20px 0;color: #4773ba;}

/* PV数表示 */
.post-views{display: inline; position: fixed; bottom: 170px; right:4%; z-index:101;}
.top_view{display: inline; position: fixed; bottom: 170px; right:4%; z-index:101;}

/*メニューホバー*/
.borderLeftRight {display: inline-block;position: relative;color: hsl(222, 25%, 14%);}
.borderLeftRight::after {content: "";position: absolute;width: 100%;transform: scaleX(0);height: 2px;bottom: 0;left: 0;background-color: hsl(243, 80%, 62%);transform-origin: bottom right;transition: transform 0.4s cubic-bezier(0.86, 0, 0.07, 1);}
.borderLeftRight:hover::after {transform: scaleX(1);transform-origin: bottom left;}

/*ボタンホバー*/
.snapLeftBtn {text-align: center;background-color: hsl(222, 100%, 95%);position: relative;border-radius: 6px;color: hsl(243, 80%, 62%);overflow: hidden;width: 170px;margin: 5% auto 0 auto;}
.snapLeftBtn::before {content: "";position: absolute;left: 0;bottom: 0;width: 100%;height: 100%;border-radius: 6px;transform: translateX(-101%);background: hsl(243, 80%, 62%);transition: transform 0.25s ease-in;}
.snapLeftBtn:hover::before {transform: translateX(0);}
.snapLeftBtn span {position: relative;z-index: 1;display: block;transition: color 0.1s 0.15s ease-in;}
.snapLeftBtn:hover span {color: hsl(222, 100%, 95%);animation: animButtonSpan 0.4s;}
.snapLeftBtn a {display: block;width: 100%;padding: 20px 0;}
.snapLeftBtn a:hover {color: #fff;}
@keyframes animButtonSpan {
  0% {transform: translateX(0);opacity: 1;}
35% {transform: translateX(20px);opacity: 0;}
50.001% {transform: translateX(-20px);}
60% {transform: translateX(0px);}
}

/* パンくずりすと */
.breadcrumbs {width: 95%;margin: 1% auto 0 auto;font-size: 14px;}
.breadcrumbs a {color: #4865b2;}
/*トップページ戻るボタン*/
#pageTop {position: fixed;bottom: 60px;right: 20px;z-index: 5;}
#pageTop i {padding-top: 6px;font-size: 15px;color: #fff;}
#pageTop a {display: block;z-index: 999;padding: 8px;border-radius: 30px;width: 45px;height: 45px;background-color: #745229;color: #fff;font-weight: bold;text-decoration: none;text-align: center;}
#pageTop a:hover {text-decoration: none;opacity: 0.7;}
.fadein {opacity: 0;transform: translate(0, 50px);transition: all 1500ms;}
.fadein.scrollin {opacity: 1;transform: translate(0, 0);}

/*-------------------------------header-------------------------------*/
header {width: 100%;padding: 1.5%;background-color: #fff;position: fixed;z-index: 100;}
header .container {max-width: 1000px;margin: 0 auto;width: 100%;display: flex;justify-content: space-between;align-items: center;}
header h1 {font-family: "Noto Serif JP", serif;font-weight: bold;}
header h1 a{display: flex; align-items: center;}
header h1 a span{display: block; font-size: 12px; padding-right: 3px;}
header nav {width: 60%;}
header ul {display: flex;justify-content: space-between;}
header li {width: 20%;text-align: center;}
header li a {display: block;padding: 10%;height: auto;}

/*-------------------------------top-------------------------------*/
/*動画*/
video {width: 100%;height: auto;}

/*画像*/
/*#home .top{background-image: url(../img/imges06.webp); height: 70vh;}*/

#home .top {position: relative;width: 100%;background-size: cover;background-position: center center;background-repeat: no-repeat;}
#home .top::after {content: "";background-color: rgba(0, 0, 0, 0.3);position: absolute;top: 0;right: 0;bottom: 0;left: 0;}
#home .top .txt {width: 100%;text-align: center;color: #fff;text-shadow: 2px 0px 3px rgba(0, 0, 0, 0.7);position: absolute;top: 55%;left: 50%;transform: translateY(-50%) translateX(-50%);-webkit-transform: translateY(-50%) translateX(-50%);z-index: 2;font-family: "Noto Serif JP", serif;overflow-x: hidden;color: #333;letter-spacing: 0.5em;}
#home .top .txt h2 {font-size: 3vw;color: #fff;}
#home .top .txt h2 span {font-size: 1.7vw;}

/*-------------------------------ご挨拶-------------------------------*/
.intor {padding: 10% 0;background-color: #fff;}
.intor .container {width: 95%;max-width: 1200px;margin: 0 auto;}
.intor .imgtxt {display: flex;justify-content: space-between;flex-direction: row-reverse; align-items: center;}
.intor .imgtxt .txt {width: 70%;}
.intor .ttl {position: relative;}
.intor .ttl h2 {font-size: 20px;}
.intor .ttl h2::after {content: " ";border-bottom: solid 2px #2441bf;display: block;width: 100%; margin:10px 0 20px 0;}
.intor .ttl p {margin: 5% 0;color: #2441bf;}
.intor .imgtxt .img {width: 50%;}

/*-------------------------------生み出す価値-------------------------------*/
/*パララックス
--------------------------------------------*/
/* .value {padding: 7% 0 7% 0;color: #fff;position: relative;background-image: url(../img/value.webp);background-size: cover;background-position: top center;width: 100%;z-index: 1;}
.value::before {content: "";background-color: rgba(0, 0, 0, 0.8);position: absolute;top: 0;right: 0;bottom: 0;left: 0;z-index: -1;}
.value .container {position: relative;width: 95%;max-width: 1200px;margin: 0 auto;z-index: 2;text-align: center;}
.value .container .ttl {text-align: center;margin-bottom: 5%;}
.value p {font-size: 16px;} */


.topAboutUs {margin: 200px 0 30px 0;}
.topAboutUs .container{position: relative;}
.topAboutUs .container .movie {position:relative; width: 80%; margin: 0 0 0 auto;  overflow: hidden; height:60vh;}
.topAboutUs .container .movie::before {content:'';position: absolute;  background-color: rgba(0,0,0,.5); top: 0; right: 0; bottom: 0; left: 0; }
.topAboutUs .container .movie video{width:100%; height: 60vh;} 
.topAboutUs .container .movie .desc{z-index: 2; color:#D5D5D6; letter-spacing: 0.3em; line-height: 2.0; position: absolute; bottom: 20%; right: 5%; width: 75%;}
.topAboutUs .container .movie .desc p{font-size:14px;}
.topAboutUs .container .ttl{-ms-writing-mode: tb-rl; writing-mode: vertical-rl; position: absolute; top: -31.4%; right:16% ; z-index:2;}
.topAboutUs .container .ttl h2{color: #BBB3A8; font-size: 20px; margin: 0 0 0 10px;}
.topAboutUs .container .ttl p{color: #989898; font-size: 18px; letter-spacing: 0.3em; line-height: 2.0;}
.topAboutUs .container .img .img01{width: 26%; position: absolute; top: 42%; left: 7%; height: 50vh;} 




/*-------------------------------事業内容-------------------------------*/
.content {padding: 18% 0 0 0;background-color: #fff;}
.content .container {width: 95%;max-width: 1200px;margin: 0 auto;}
.content .ttl {text-align: center;margin-bottom: 5%;}
.content .ttl::after {content: " ";border: solid 1px #2441bf;display: block;width: 55px;margin: 15px auto;}
.content .crads {max-width: 1200px;margin: 0 auto;}
.content .crads .card {margin-bottom: 20%;}
.content .crads .card .imgtxt {display: flex;justify-content: space-around;}
.content .crads .card2 .imgtxt {flex-direction: row-reverse;}
.content .crads .card1 .imgtxt .img img {display: block;position: relative;z-index: 2;}
.content .crads .card1 .imgtxt .img {width: 40%;}
/*.content .crads .card1 .imgtxt .img {background-image: url(../img/IOS.webp); background-size:cover; background-repeat: no-repeat; background-position: center center; width: 45%; padding-top: 30%; position: relative ; z-index: 2;}*/
.content .crads .card2 .imgtxt .img {background-image: url(../img/truck.webp);background-size: cover;background-repeat: no-repeat;background-position: center center;width: 40%;padding-top: 30%;position: relative;z-index: 2;}
.content .crads .card .imgtxt .txt {position: relative;margin: 6% 0 0 0;width: 55%;color: #fff;}
.content .crads .card1 .imgtxt .txt::after {content: "";background-color: #01559c;width: 142%;height: 120%;position: absolute;top: -8.4%;right: -9%;z-index: 1;}
.content .crads .card2 .imgtxt .txt::after {content: "";background-color: #01559c;width: 142%;height: 120%;position: absolute;top: -8.4%;right: -32%;z-index: 0;}
.content .crads .card .imgtxt .txt .cont-ttl {margin-bottom: 2%;position: relative;z-index: 2;}
.content .crads .card .imgtxt .txt .cont-ttl h3 {font-size: 20px;}
.content .crads .card .imgtxt .txt .cont-ttl p {color: #d5ba4b;font-size: 14px;}
.content .crads .card .imgtxt .txt .inner-txt h4 {font-size: 18px;margin-bottom: 5%;line-height: 2;}
.content .crads .card .imgtxt .txt .inner-txt p {font-size: 14px;}
.content .crads .card .imgtxt .txt .inner-txt {position: relative;z-index: 2;}

/*-------------------------------設備紹介-------------------------------*/
.Equipment {background-color: #f5f5f5;padding: 10% 0;}
.Equipment .ttl {text-align: center;margin-bottom: 5%;}
.Equipment .ttl::after {content: " ";border: solid 1px #2441bf;display: block;width: 55px;margin: 15px auto;}
.Equipment .imgtxt {width: 95%;margin: 0 auto;max-width: 1200px;display: flex;justify-content: space-around;flex-direction: row-reverse;}
.Equipment .imgtxt .txt {width: 50%;}
.Equipment .imgtxt .txt .inner {font-size: 16px;margin-bottom: 3%;line-height: 2;}
.Equipment .imgtxt .txt .more {background-color: #1f6eb3;text-align: center;width: 150px;padding: 10px 20px;margin: 5% auto 0 auto;}
.Equipment .imgtxt .txt .more a {color: #fff;}
.Equipment .imgtxt .img {background-image: url(../img/imges06.webp);background-size: cover;background-position: center center;background-repeat: no-repeat;width: 45%;padding-top: 30%;}

/*-------------------------------職場紹介-------------------------------*/
.top-imges {padding: 10% 0;background-color: #f4f1ed;}
.top-imges .container {width: 95%;max-width: 1200px;margin: 0 auto;}
.top-imges .ttl {text-align: center;margin-bottom: 5%;}
.top-imges .ttl::after {content: " ";border: solid 1px #2441bf;display: block;width: 55px;margin: 15px auto;}
.top-imges .img {display: flex;justify-content: space-between;flex-wrap: wrap;}
.top-imges p {width: 33%;position: relative;overflow: hidden;margin-bottom: 1%;}
.top-imges p::before {content: "";padding-top: 100%;display: block;}
.top-imges p img {width: 100%;height: 100%;position: absolute;top: 0;left: 0;object-fit: cover;}

/*-------------------------------アクセス-------------------------------*/
.access {width: 100%;padding: 10% 0 5% 0;background-color: #fff;}
.access .container {margin: 0 auto;max-width: 1200px;}
.access .imgmap {display: flex;justify-content: space-between;flex-direction: row-reverse;}
.access .imgmap .txt {position: relative;width: 50%;background-image: url(../img/imges06.webp);background-size: cover;background-position: center center;background-repeat: no-repeat;}
.access .imgmap .txt::after {content: "";background-color: rgba(0, 0, 0, 0.6);position: absolute;top: 0;right: 0;bottom: 0;left: 0;}
.access .imgmap .txt .container {position: absolute;color: #fff;z-index: 2;top: 50%;left: 50%;transform: translateY(-50%) translateX(-50%);-webkit-transform: translateY(-50%) translateX(-50%);width: 90%;text-align: center;}
.access .imgmap .txt .container h2 {text-align: center;margin-bottom: 3%;}
.access .imgmap .txt .container a {color: #fff !important;}
.access .imgmap .txt .container .more {width: 200px;margin: 3% auto 0 auto;}
.access .imgmap .txt .container .more a {border: 1px solid #fff;padding: 2% 5%;display: block;}
.access .imgmap .map {width: 50%;}
.access .imgmap .map iframe {width: 100%;}

footer {background-color: #000;padding: 3% 0;color: #fff;}
footer p {text-align: center;font-size: 14px;}

/*-------------------------------会社概要-------------------------------*/
#company .top {position: relative;padding-top: 35%;width: 100%;background-image: url(../img/IMG_1475.webp);background-size: cover;background-repeat: no-repeat;background-position: center center;}
#company .top::after {content: "";background-color: rgba(0, 0, 0, 0.5);position: absolute;top: 0;right: 0;bottom: 0;left: 0;}
#company .top .txt {position: absolute;top: 55%;left: 50%;transform: translateX(-50%);-webkit-transform: translateX(-50%);color: #fff;z-index: 2;}
#company .ttl {text-align: center;margin-bottom: 5%;}
#company .ttl::after {content: " ";border: solid 1px #2441bf;display: block;width: 55px;margin: 15px auto;}
#company .Overview {width: 80%;max-width: 800px;margin: 0 auto;padding: 10% 0;}
#company .Overview table {width: 100%;margin: 0 auto;border-collapse: collapse;font-size: 14px;}
#company .Overview table th {width: 20%;max-width: 250px;border: 1px solid #767676;padding: 20px;background-color: #01559c;color: #fff;}
#company .Overview table td {width: 50%;border: 1px solid #767676;padding: 20px;}
#company .Overview table p {text-align: right;margin: 18px 0;font-size: 14px;}

#company .history {background-color: #f5f5f5;padding: 10% 0;}
#company .history table {width: 80%;margin: 0 auto;max-width: 800px;}
#company .history table {width: 100%;margin: 0 auto;border-collapse: collapse;font-size: 14px;}
#company .history table th {width: 20%;max-width: 250px;padding: 20px;text-align: left;}
#company .history table td {width: 50%;padding: 20px;}
/*-------------------------------採用情報-------------------------------*/
#recruit .top {position: relative;padding-top: 35%;width: 100%;background-image: url(../img/recruit.webp);background-size: cover;background-repeat: no-repeat;background-position: center center;}
#recruit .top::after {content: "";background-color: rgba(0, 0, 0, 0.5);position: absolute;top: 0;right: 0;bottom: 0;left: 0;}
#recruit .top .txt {position: absolute;top: 55%;left: 50%;transform: translateX(-50%);-webkit-transform: translateX(-50%);color: #fff;z-index: 2;}
#recruit .Greeting {text-align: center;padding: 10% 0 0 0;}
#recruit .ttl {text-align: center;margin-bottom: 5%;}
#recruit .ttl::after {content: " ";border: solid 1px #2441bf;display: block;width: 55px;margin: 15px auto;}
#recruit .inner {width: 80%;max-width: 800px;margin: 0 auto;padding: 10% 0;}
#recruit .inner table {width: 100%;margin: 0 auto;border-collapse: collapse;font-size: 14px;}
#recruit .inner table th {width: 20%;max-width: 250px;border: 1px solid #767676;padding: 20px;background-color: #01559c;color: #fff;}
#recruit .inner table td {width: 50%;border: 1px solid #767676;padding: 20px;}
#recruit .inner table p {text-align: right;margin: 18px 0;font-size: 14px;}

/*-------------------------------お問合せ-------------------------------*/
#contact {background-color: #f5f5f5;}
#contact .top {position: relative;padding-top: 35%;width: 100%;background-image: url(../img/contact.webp);background-size: cover;background-repeat: no-repeat;}
#contact .top::after {content: "";background-color: rgba(0, 0, 0, 0.5);position: absolute;top: 0;right: 0;bottom: 0;left: 0;}
#contact .top .txt {position: absolute;top: 55%;left: 50%;transform: translateX(-50%);-webkit-transform: translateX(-50%);color: #fff;z-index: 2;}
#contact .contact {padding: 5% 0 10% 0;background-color: #f5f5f5;}
#contact .contact .txt h2 {text-align: center;font-size: 18px;margin-bottom: 3%;}
#contact .contact .txt .inner {text-align: center;margin-bottom: 3%;}
#contact .icon {width: 100%;max-width: 380px;margin: 3% auto 3% auto;}
#contact .icons {margin-bottom: 3%;font-family: futura-pt, sans-serif;font-size: 20px;}
#contact .icons i {display: inline-block;padding-right: 10%;}
#contact .icons a {display: block;padding: 14px 0;position: relative;}
#contact .icons p {padding: 0%;}
#contact .mail {border: 1px solid #fff;}
#contact .mail a:hover {color: #000;position: relative;z-index: 2;}
.buttonLeft-mail {overflow: hidden;position: relative;line-height: 40px;}
.buttonLeft-mail::before {content: "";position: absolute;left: 0;bottom: 0;width: 100%;height: 100%;transform: translateX(-100%);background: #fff;transition: transform 0.2s ease-in-out;}
.buttonLeft-mail:hover::before {transform: translateX(0);z-index: -1;}
#contact form {width: 80%;margin: 0 auto;}
#contact form input {border-right-color: #f5f5f5;width: 75%;max-width: 450px;font-size: 16px;padding: 15px;border: none;display: block;margin: 0 auto 15px auto;letter-spacing: 1px;}
#contact form input:focus {outline: -webkit-focus-ring-color auto 5px;}
#contact form textarea {border-right-color: #f5f5f5;font-size: 16px;width: 75%;max-width: 450px;height: 200px;padding: 16px;border: none;display: block;margin: 0 auto 15px auto;letter-spacing: 1px;}
#contact form button {display: block;color: #f2f2f2;margin: 45px auto 0 auto;width: 130px;font-size: 13px;padding: 10px 15px;background-color: #01559c;transition: 0.3s;}
#contact form button:hover {opacity: 0.5;}

#contact .thanks {padding: 20% 0;}

/* reCAPTCHA非表示 */
.grecaptcha-badge {visibility: hidden;}
#contact .grecaptcha-badge a {color: #1f6eb3;}

/*-------------------------------設備紹介-------------------------------*/
#facility .top {position: relative;padding-top: 35%;width: 100%;background-image: url(../img/imges06.webp);background-size: cover;background-repeat: no-repeat;background-position: center center;}
#facility .top::after {content: "";background-color: rgba(0, 0, 0, 0.5);position: absolute;top: 0;right: 0;bottom: 0;left: 0;}
#facility .top .txt {position: absolute;top: 55%;left: 50%;transform: translateX(-50%);-webkit-transform: translateX(-50%);color: #fff;z-index: 2;}
#facility .ttl {text-align: center;margin-bottom: 5%;}
#facility .ttl::after {content: " ";border: solid 1px #2441bf;display: block;width: 55px;margin: 15px auto;}
#facility .htxt {padding: 10% 0 0 0;width: 90%;max-width: 1000px;margin: 0 auto;}
#facility .htxt p {text-align: center;}
#facility .ttl {text-align: center;margin-bottom: 5%;}
#facility .ttl::after {content: " ";border: solid 1px #2441bf;display: block;width: 55px;margin: 15px auto;}
#facility .processing {width: 80%;max-width: 1000px;margin: 0 auto;padding: 5% 0;}
#facility .processing table {width: 100%;margin: 0 auto;border-collapse: collapse;font-size: 14px;}
#facility .processing table .th {background-color: #f3f3f3;}
#facility .processing table th {width: 20%;max-width: 250px;border: 1px solid #767676;padding: 10px;}
#facility .processing table td {width: 30%;border: 1px solid #767676;padding: 10px;}
#facility .processing table p {text-align: right;margin: 18px 0;font-size: 14px;}

#facility .Inspection {padding:60px 0 60px 0; width: 80%;max-width:1000px;margin: 0 auto;}
#facility .Inspection .imgtxt {display: flex;justify-content: space-between;}
#facility .Inspection .imgtxt .txt .container {position: relative;z-index: 1;padding: 9% 6%;}
#facility .Inspection .imgtxt .txt .container .ttl {margin-bottom: 7%;}
#facility .Inspection .imgtxt .txt .container ul {list-style: disc;}
#facility .Inspection .imgtxt .txt .container ul li {line-height: 2;list-style: disc;font-size: 15px;}
#facility .Inspection .imgtxt .img {width: 50%;}



#facility .vehicle {margin: 0 auto;padding: 5% 0;background-image: url(../img/truck.webp);background-size: cover;width: 100%;background-repeat: no-repeat;background-position: center center;position: relative;}
#facility .vehicle::before {content: "";position: absolute;background-color: rgba(0, 0, 0, 0.5);top: 0;right: 0;bottom: 0;left: 0;}
#facility .vehicle .txt {position: relative;z-index: 2;}
#facility .vehicle .txt .ttl {color: #fff;}
#facility .vehicle table {width: 100%;max-width: 800px;margin: 0 auto;border-collapse: collapse;font-size: 14px;color: #fff;}
#facility .vehicle table th {width: 20%;max-width: 250px;border: 1px solid #fff;padding: 10px;}
#facility .vehicle table td {width: 50%;border: 1px solid #fff;padding: 10px;}
.th3 {width: 10% !important;}
.td3 {width: 10% !important;}
.th2 {width: 10% !important;}
.td2 {width: 10% !important;}

#facility .imges{width: 80%; max-width: 1000px; margin: 0 auto; display: flex; justify-content: space-between;}
#facility .imges .bg-img{width: 33%;background-size: cover; background-position: center center; padding-top: 25%; background-repeat: no-repeat;}
#facility .imges .img01{ background-image: url(../img/factory2.webp);}
#facility .imges .img02{ background-image: url(../img/factory.webp);}
#facility .imges .img03{ background-image: url(../img/new_machine.webp);}
/*
レスポンシブ*/
@media screen and (max-width: 1200px) {
  p {font-size: 15px;}
  .content .crads .card .imgtxt .txt .inner-txt h4 {font-size: 18px;}
}

@media screen and (max-width: 768px) {
  .pc {display: none;}
  .sp {display: block;}
  .slide-a img {width: 130%;}
  .slide-b img {width: 130%;}

  /*  文字サイズ調整*/
  p {font-size: 3.8vw;}
  .content .crads .card .imgtxt .txt .inner-txt h4 {font-size: 4vw;}
  #facility .processing table {font-size: 3.1vw;}
  #company .Overview table {font-size: 3.1vw;}
  #company .history table {font-size: 3.1vw;}
  #recruit .inner table {font-size: 3.1vw;}

  /*-----------------------------header-----------------------------*/
  .f-menu {width: 100%;margin: 0;position: fixed;bottom: 0;background-color: inherit;padding: 0;height: 55px;z-index: 100;}
  .f-menu .container {position: relative;height: 55px;}
  .f-menu .container::after {content: "";background-color: #01559c;position: absolute;bottom: 0;top: 0;right: 0;left: 0;opacity: 0.8;z-index: -1;height: 55px;}
  .f-menu .menu {height: 55px;}
  .f-menu .menu ul {display: flex;justify-content: space-around;align-content: center;width: 95%;margin: 0 auto;}
  .f-menu .menu ul li {align-items: center;height: 55px;position: relative;width: 100%;}
  .f-menu .menu ul a {color: #fff;position: absolute;top: 50%;left: 50%;transform: translateY(-50%) translateX(-50%);-webkit-transform: translateY(-50%) translateX(-50%);width: 100%;text-align: center;display: block;padding: 20% 10%;width: 100%;font-size: 3vw;}

  /*-------------------top-----------------------*/
  video {width: 100%;}
  #home .top .txt {width: 95%;top: 50%;left: 50%;transform: translateY(-50%) translateX(-50%);-webkit-transform: translateY(-50%) translateX(-50%);}
  #home .top .txt h2 {font-size: 6vw;color: #fff;}
  #home .top .txt h2 span {font-size: 5vw;}

  .intor .imgtxt {display: inherit;}
  .intor .imgtxt .txt {width: 100%;}
  .intor .imgtxt .img {width: 100%;margin-bottom: 5%;}
   /* 
  .value .container {width: 95%;}
  .value {padding: 10% 0;}
  .value .container .txt p {text-align: left;} */
 .topAboutUs { margin: 80px 0 60px 0; }
 .topAboutUs .container .ttl {-ms-writing-mode:inherit;writing-mode:inherit;position: inherit; top: inherit; right: inherit;}
 .topAboutUs .container .ttl h2{margin: 0;}
 .topAboutUs .container .movie { width:100%; height: inherit; margin-top: 20px;}
 .topAboutUs .container .movie::before {content:none;}
 .topAboutUs .container .movie video {height: inherit;}
 .topAboutUs .container .movie .desc {width:100%; position: inherit; top:inherit; left:inherit;  transform: translateY(0%) translateX(0%); -webkit-transform: translateY(0%) translateX(0%); height: max-content; bottom: inherit; right: inherit; color: #989898; margin-top: 20px;}
 .topAboutUs .container .img .img01 {display:none;}
 .topAboutUs .more {margin: 15px auto 0 auto;}
 .topAboutUs .more a{color: #989898;}

  .content {padding: 10% 0 0 0;}
  .content .crads {width: 100%;}
  .content .crads .card .imgtxt {display: inherit;}
  .content .crads .card .imgtxt .img {width: 100%;padding-top: 6%;}
  .content .crads .card2 .imgtxt .img {width: 100%;padding-top: 70%;}
  .content .crads .card .imgtxt .txt {width: 100%;}
  .content .crads .card1 .imgtxt .txt::after {top: -4%;height: 110%;}
  .content .crads .card2 .imgtxt .txt::after {top: -4%;height: 110%;}

  .Equipment .imgtxt {width: 95%;display: inherit;}
  .Equipment .imgtxt .txt {width: 95%;margin: 0 auto;}
  .Equipment .imgtxt .img {width: 100%;padding-top: 70%;margin-bottom: 5%;}

  .top-imges .container {width: 100%;}
  .access {margin: 0% auto 0 auto;padding: 10% 0 0 0;}
  .access .imgmap {display: inherit;}
  .access .imgmap .txt {width: 95%;margin: 0 auto;padding-top: 75%;}
  .access .imgmap .map {width: 95%;margin: 0 auto;}

  /*-------------------------------会社概要-------------------------------*/
  #company .top .txt {top: 50%;transform: translateY(-50%) translateX(-50%);-webkit-transform: translateY(-50%) translateX(-50%);color: #fff;z-index: 2;}
  #company .top {padding-top: 35%;}
  #company .Overview {width: 95%;}
  #company .Overview table th {width: 20%;padding: 5px;}
  #company .Overview table td {width: 70%;padding: 20px 5px;}
  #company .history table th {width: 20%;padding: 5px;text-align: right;}
  #company .history table td {width: 70%;padding: 20px 5px;}

  /*-------------------------------設備紹介-------------------------------*/
  #facility .top .txt {top: 50%;transform: translateY(-50%) translateX(-50%);-webkit-transform: translateY(-50%) translateX(-50%);color: #fff;z-index: 2;}
  #facility .processing {width: 95%;margin: 0 auto;}
  #facility .vehicle {width: 95%;}
  #facility .imges{width: 95%;}
  #facility .Inspection {width: 95%;}
  #facility .Inspection .imgtxt {display:block;}
  #facility .Inspection .imgtxt .txt .container { padding:3% 6%;}
  #facility .Inspection .imgtxt .img {width: 100%;}
  #facility .vehicle .txt {width: 95%;margin: 0 auto;}
  #facility .vehicle table th {width: 50%;max-width: 750px;border: 1px solid #fff;padding: 10px;}


  /*-------------------------------採用情報-------------------------------*/
  #recruit .top .txt {top: 50%;transform: translateY(-50%) translateX(-50%);-webkit-transform: translateY(-50%) translateX(-50%);color: #fff;z-index: 2;}
  #recruit .inner {width: 95%;}
  #recruit .inner table th {padding: 20px 5px;}
  #recruit .inner table td {padding: 20px 5px;}

  /*-------------------------------お問合せ-------------------------------*/
  #contact .top .txt {top: 50%;transform: translateY(-50%) translateX(-50%);-webkit-transform: translateY(-50%) translateX(-50%);color: #fff;z-index: 2;}

  #contact form {width: 90%;margin: 0 auto;}
  #contact form input {width: 90%;}
  #contact form textarea {width: 90%;}

  footer {padding: 3% 0 15% 0;}
}