html {
  scroll-behavior: smooth;
  font-size: 14px;
  height: 100%;
}

@media (max-width: 640px) {
  html {
    font-size: calc(50% + 1vw);
  }
}

body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: Arial, Helvetica, sans-serif;
  /* overflow: hidden; */
  overflow-y: scroll;
}

a {
  text-decoration: none !important;
}

a:hover {
  text-decoration: none !important;
}

/* Add a black background color to the top navigation */

.topnav {
  position: absolute;
  background-color: #333333;
  overflow: hidden;
  width: 100%;
  z-index: 1000;
}

/* Style the links inside the navigation bar */

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav-c {
}

@media screen and (max-width: 600px) {
  .topnav-c {
    margin-top: 0px;
    margin-bottom: 0px;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
}

.topnav-p.home {
  color: white;
  font-weight: bold;
  background-color: #333333;
}

.topnav-c.work {
  color: palevioletred;
  font-weight: bold;
}

.topnav-c.company {
  color: darkcyan;
  font-weight: bold;
}

.topnav-c.access {
  color: orange;
  font-weight: bold;
}

.topnav-c.recruit {
  color: tomato;
  font-weight: bold;
}

.topnav-c.contact {
  color: yellowgreen;
  font-weight: bold;
}

.topnav-c.collection {
  color: white;
  font-weight: bold;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {
    display: none;
  }

  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {
    background-color: #333333b0;
    position: absolute;
  }

  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }

  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

/* Footer */
footer {
  position: sticky;
  top: 100vh;
  background-color: #000000a0;
  color: #f2f2f2;
  /* height: 150px; */
}

#wrapper {
  display: flex;
  flex-direction: column;
  margin-bottom: 0px;
  min-height: 100vh;
}

#wrap {
  position: absolute;
  margin: 0;
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Main Content */

#content {
  /* position: fixed; */
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  width: 90%;
}

#About {
}

#Company {
  padding-bottom: 10px;
}

.Company-Head {
  margin: 0;
  padding: 0;
  margin-bottom: 0px;
}

.Company-Body {
  margin: 0;
  padding: 0;
  width: 65vw;
  margin: auto;
}

.Company-Body tr:first-child {
}

/* @media (max-width: 640px) {
  .Company-Body {
    width: 100%;
    margin: auto;
  }
} */

table th {
  border-color: #a7a7a7 !important;
  font-weight: 100;
  width: 20%;
}

th.company {
  text-align: center;
  vertical-align: middle !important; 
}

table td {
  border-color: #a7a7a7 !important;
  /* background-color: #ff0000 !important; */
}

.td_la {
  /* text-align: left; */
}

.thead-th {
  text-align: center;
  border-top: 3px solid !important;
  border-bottom: 3px solid !important;
  font-size: 18px;
}

.thead-th.work {
  border-color: palevioletred !important;
}

.thead-th.about {
  border-color: darkcyan !important;
}

.thead-th.access {
  border-color: orange !important;
}

.thead-th.recruit {
  border-color: tomato !important;
}

.thead-th.contact {
  border-color: yellowgreen !important;
}

.trhead {
  /* border: 0px none !important; */
  margin: 0px;
}

.tdhead {
  width: 120px;
  border: 0px none !important;
}

#Headercontent {
  position: relative;
  /* width: 90%; */
  /* margin: 0px auto; */
  width: 100vw;
  margin: 0px 0px 0px 0px;
}

@media screen and (max-width: 850px) {
  #Headercontent {
  }
}

#Work {
  text-align: center;
  padding-bottom: 35px;
  margin: 70px 0px 0px 0px;
}

#Work-main {
  text-align: center;
  margin: 0px 0px 0px 0px;
}

#Access {
  text-align: center;
  padding-bottom: 10px;
}

#Recruit {
  padding-bottom: 20px;
}

#Contact {
  padding-bottom: 10px;
}

.bunner {
}

.c-bunner {
  border-radius: 0px 15px 0px 15px;
}

.c-bunner.w {
  width: 65vw;
}

.bunner_btn {
  margin-top: -25px;
  margin-bottom: 30px;
  margin: -20px auto 20px auto;
  width: 80%;
  /* width:60%; height:80%;  */
  /* font-size: 80%; */
  /* padding-left: 3px; */
}

.bunner_width {
  width: 100%;
  height: 230px;
  max-width: 440px;
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: bottom center;
  margin: 0px auto 20px auto;
  /* border-radius: 0px 15px 0px 15px; */
}

.bunner_height {
  width: 100%;
  /* height: 548px; */
  max-width: 420px;
  background-size: 80% auto;
  background-repeat: no-repeat;
  background-position: bottom center;
  margin: 0px auto 20px auto;
}

@media (max-width: 640px) {
  .bunner {
  }

  .bunner_height {
    height: 340px;
    width: 250px;
  }

  .c-bunner.w {
    width: 80vw;
    /* height: auto; */
    border-radius: 5px;
  }
}

@media (min-width: 640px) {
  .bunner_height {
    height: 548px;
    width: 320px;
    margin: -130px auto 20px auto;
  }
}

.inputform {
  width: 450px;
  margin: auto;
}

@media (max-width: 640px) {
  .inputform {
    width: 90%;
    margin: auto;
  }
}

/* ----- 背景用の動画ファイル ----- */

#bg-video {
  position: relative;
  right: 0;
  bottom: 0;
  top: 53px;
  min-width: 100%;
  min-height: 100%;
  width: 100%;
  /* height: 100%; */
  z-index: -100;
  /* background: url('poster.jpg') no-repeat; */
  background-size: cover;
  padding-bottom: 60px;
}

.recruit-menu a {
  display: block;
  margin-left: auto;
  margin-right: 30px;
  /* padding-top: 15px; */
  margin-top: 20px;
  color: #575757;
  background-color: #e0e0e0;
  width: 80px;
  height: 50px;
  text-decoration: none;
  text-align: center;
  border-radius: 17px;
}

.recruit-menu a:hover {
  background-color: paleturquoise;
  color: #575757;
}

.recruit-menu i {
  margin: 15px;
  padding: 0;
  font-size: 16px !important;
}

.job-link {
  /* background-color: blue; */
}

.job-top-ul {
  display: flex;
  list-style: none;
  justify-content: center;
  padding-left: 0;
}

.job-top-li {
}

.job-top-li:first-child a {
  border-top-left-radius: 17px;
  border-bottom-left-radius: 17px;
}

.job-top-li:last-child a {
  border-top-right-radius: 17px;
  border-bottom-right-radius: 17px;
}

.job-top-li a {
  display: block;
  /* border: 1px solid #666; */
  background-color: #e0e0e0;
  padding: 18px;
  text-decoration: none;
  color: #575757;
  width: 150px;
  text-align: center;
  font-size: 16px;
  background: 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
  margin-right: 2px;
}

@media (min-width: 640px) {
  .job-top-li a {
    padding: 20px;
    width: 200px;
    font-size: 18px;
  }
}

.job-top-li a:hover {
  background-color: paleturquoise;
  color: #575757;
}

/* work */

.media-container {
  display: -webkit-box;
  display: flex;
  flex-direction: column;
  /* flex-flow: row wrap; */
  justify-content: center;
  align-content: flex-start;
  align-items: center;
}

.media-article {
  padding: 10px 15px -1px 15px;
  /* width: 100%; */
  /* margin: 10px 5px 0 5px; */
  /* width: 460px; */
}

.media-article border {
  border: solid #929292 0.5px;
  border-radius: 15px;
}

@media (min-width: 640px) {
  .media-article {
    width: 65vw;
  }
  .Company-Body {
    width: 50vw;
  }
}

@media (min-width: 800px) {
  @media (max-height: 1400px) {
    .media-article {
      width: 53vh;
      height: auto;
    }

    .c-bunner.w {
      width: 50vh;
      height: auto;
    }

    .Company-Body {
      width: 53vh;
    }
  }
}

.work-text-block {
  /* width: 400px; */
  width: 100%;
  margin: 10px 0 10px 0;
  padding: 0px 0px 15px 0;
}

.work-info-block {
  width: 100%;
  margin: 10px 0 10px 0;
}

.hr-zero {
  margin: 0;
  padding: 0;
}

#page_top {
  /* width: 90px; */
  /* height: 60px; */
  position: fixed;
  right: 10px;
  bottom: 0;
  opacity: 1;
  background-color: #3f98ef11;
  /* border: 3px solid #3f98ef; */
  border-radius: 20px;
}

#page_top a {
  position: relative;
  display: inline-block;
  width: 80px;
  height: 60px;
  text-decoration: none;
}

#page_top a::before {
  font-family: FontAwesome;
  content: "\f102";
  font-size: 25px;
  color: #585858;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -25px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}

#page_top a::after {
  content: "PAGE TOP";
  font-size: 13px;
  color: #585858;
  position: absolute;
  top: 35px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}

#recruit-header {
  margin-top: 80px;
}

#recruit-main {
  /* width: 90%; */
  /* margin: auto; */
  margin-bottom: 30px;
}

@media (max-width: 640px) {
  body {
    font-size: 7pt !important;
  }
}

#recrecruit-table {
  text-align: center;
  background-color: red;
  width: 100%;
  margin: auto;
}

#recrecruit-table tr {
  text-align: center;
}

#recrecruit-table th {
  text-align: center;
}

#recrecruit-table td {
  text-align: center;
  width: 80%;
}

input {
  color: #ff0000;
}

button {
  border-radius: 17px !important;
  background-color: #e0e0e0;
  color: #575757;
}

button:hover {
  background-color: paleturquoise;
  color: #575757;
}

button:active {
  background-color: paleturquoise;
  color: #575757;
}

.fixed {
  position: fixed !important;
  top: 0;
  width: 100%;
}

.loading_main {
  position: fixed;
  z-index: 1000;
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  background: #ffffff;
}

.loading_main.hide {
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms;
}

.loading_main .circle {
  display: block;
  position: relative;
  top: calc(50% - 20px);
  width: 40px;
  height: 40px;
  margin: 0 auto;
  border: 8px solid #e0e0e0;
  border-top: 7px solid #ffcccc;
  border-radius: 50px;
  animation: loading_main 700ms linear 0ms infinite normal both;
}

@keyframes loading_main {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.orbit-spinner,
.orbit-spinner * {
  box-sizing: border-box;
}

.orbit-spinner {
  height: 80px;
  width: 80px;
  border-radius: 50%;
  perspective: 800px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
}

.loading_main .orbit-spinner .orbit {
  position: absolute;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.loading_main .orbit-spinner .orbit:nth-child(1) {
  left: 0%;
  top: 0%;
  animation: orbit-spinner-orbit-one-animation 1200ms linear infinite;
  border-bottom: 3px solid #ddff1d;
}

.loading_main .orbit-spinner .orbit:nth-child(2) {
  right: 0%;
  top: 0%;
  animation: orbit-spinner-orbit-two-animation 1200ms linear infinite;
  border-right: 3px solid #ff961d;
}

.loading_main .orbit-spinner .orbit:nth-child(3) {
  right: 0%;
  bottom: 0%;
  animation: orbit-spinner-orbit-three-animation 1200ms linear infinite;
  border-top: 3px solid #1df7ff;
}

.loading_main .orbit-spinner .orbit:nth-child(4) {
  right: 0%;
  bottom: 0%;
  animation: orbit-spinner-orbit-four-animation 1200ms linear infinite;
  border-top: 5px solid #ff00aa;
}

@keyframes orbit-spinner-orbit-one-animation {
  0% {
    transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
  }

  100% {
    transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
  }
}

@keyframes orbit-spinner-orbit-two-animation {
  0% {
    transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
  }

  100% {
    transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
  }
}

@keyframes orbit-spinner-orbit-three-animation {
  0% {
    transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
  }

  100% {
    transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
  }
}

@keyframes orbit-spinner-orbit-four-animation {
  0% {
    transform: rotateX(15deg) rotateY(20deg) rotateZ(0deg);
  }

  100% {
    transform: rotateX(15deg) rotateY(20deg) rotateZ(360deg);
  }
}