@media screen and (max-width:767px) {
  p {
    font-size: 0.8rem;
  }
}

.home-all-container {
  position: relative;
}
header {
 position: relative;
 z-index: 100;
 width: 100%;
 height: 120px;
 padding: 20px;
}
.header-logo {
 float: left;
 color: #fff;
}
.header-logo img {
 width: 150px;
}
@media screen and (max-width:767px) {
  .header-logo {
    width: 80px;
  }
  .header-company-name {
    font-size: 0.8rem;
  }
}

.header-logo a {
 color: #fff;
 text-align:justify;
 text-align-last:justify;
}
.header-sidebar {
  opacity: 1 !important;
 }
.nav-list {
 display: flex;
 justify-content: flex-end;
 list-style: none;
}
nav a {
 color: #fff;
 font-size: 1.2rem;
}
.nav-list-item {
 padding: 0 10px;
 margin-top: 30px;
}
@media screen and (max-width:1000px) {
  .hamburger {
   position: fixed;
   top: 25px;
   right: 25px;
   z-index: 100;
  }
  .hamburger-toggle {
   position: relative;
   width: 36px;
   height: 32px;
   cursor: pointer;
  }
  .hamburger span {
   width: 100%;
   height: 4px;
   left: 0;
   display: block;
   background: #0d1810;
   position: absolute;
   transition: transform .6s ease-in-out, top .5s ease, bottom .5s ease,
   background 0.4s ease-out;
  }
  .hamburger span:nth-child(1) {
   top: 0;
  }
  .hamburger span:nth-child(2) {
   top: 50%;
   transform: translateY(-50%);
  }
  .hamburger span:nth-child(3) {
   bottom: 0;
  }
  nav {
   z-index: 80;
   overflow: auto;
   width: 50%;
   height: 100%;
   background: navy;
   color: #fff;
   position: fixed;
   top: 0;
   right: 0;
   transform: translateX(100%);
   transition: transform 1s cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  .nav-list {
   display: block;
   list-style: none;
   margin: 50px 0 20px;
   /* border-top: 1px solid #fff; */
  }
  .nav-list-item {
   padding: 20px;
   margin: 0;
   border-bottom: 1px solid #fff;
  }
  nav a {
   display: block;
   color: #fff;
   padding: 0;
  }
  /* メインコンテンツのスクロール禁止 */
  /* .is-open {
   overflow: hidden;
  } */
  .hamburgerColor .hamburger span {
    background: gray;
    /* transition: background 0.4s ease-out; */
    transition: transform .6s ease-in-out, top .5s ease, bottom .5s ease,
    background 0.4s ease-out;
  }
   .is-open .hamburger span {
    background: #fff;
  }
  .is-open .hamburger span:nth-child(1) {
   top: 50%;
   transform: rotate(45deg) translateY(-50%);
  }
  .is-open .hamburger span:nth-child(2) {
   width: 0;
  }
  .is-open .hamburger span:nth-child(3) {
   top: 50%;
   transform: rotate(-45deg) translateY(-50%);
  }
  .is-open nav {
   z-index: 90;
   transform: translateX(0);
  }
  .is-open .hamburger-bg {
   position: fixed;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   z-index: 70;
   background: rgba(3,3,3,.5);
   display: block;
  }
}
main {
 width: 100%;
 overflow: hidden;
}
.main-slider {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 810px;
 z-index: 10;
}
@media screen and (max-width:767px) {
  .main-slider {
    height: 354px;
  }
}
.main-slider-item {
 background-size: cover;
 background-position: top center;
}
.main-slider-item01 {
 background-image: url(indexSlider/main1.jpg);
}
.main-slider-item02 {
 background-image: url(indexSlider/main2.jpg);
 position: relative;
}
.main-slider-item02::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background-color: rgba(0,0,0,0.4);
}
.key-slider,
.slick-list,
.slick-track {
 height: 100%;
}
.main-slider .slick-dots {
 /* right: 20px; */
 bottom: 20px;
}
.main-slider .slick-dots li button::before {
 font-size: 20px!important;
}
.main-slider-word {
 position: relative;
 height: 680px;
 z-index: 20;
 color: #fff;
}
.main-explanation {
 position: absolute;
 top: 0;
 right: 0;
 bottom: 200px;
 left: 0;
 margin: auto;
 height: 3.2rem;
 text-align: center;
}
.main-explanation p {
  font-size: 2rem;
}
@media screen and (max-width:767px) {
  .main-slider-word {
    height: 200px;
  }
  .main-explanation {
    position: absolute;
    top: 30%;
  }
  .main-explanation p {
    font-size: 1rem;
  }
}
/* ヘッダーとメインスライダはこれからレスポンシブ対応 */
/* @media screen and (max-width:500px) {

} */
.main-background {
  padding-bottom: 0;
}
.main-work {
 margin: 0 auto;
 padding: 60px 0px 30px;
 text-align: center;
 max-width: 1120px;
}
.main-midashi {
  letter-spacing: 10px;
  font-weight: 600;
  font-size: 2.5rem;
  line-height: 2;
  color: #00caca;
}
.main-work-contents {
 display: flex;
 flex-flow: row wrap;
 justify-content: space-around;
}
.main-work-contents-lists {
 /* display: inline-block; */
 width: 30%;
 margin: 10px;
 padding-bottom: 10px;
 background-color: #EEFFFF;
}
.main-work-contents-lists img {
 width: 90%;
 height: 70%;
 padding-top: 5%;
 /* object-fit: cover; */
}
.main-results {
 padding: 30px 0;
}
.main-results-title {
 text-align: center;
 margin-bottom: 30px;
 line-height: 2;
}
.main-results-title a {
 padding-top: 20px;
}
.main-results-contents {
  margin: 0 auto;
  width: 100%;
}
.main-results-contents-lists {
  margin: 0 20px;
}
.main-results-contents img {
  position: relative;
  width: 100%;
  height: auto;
  max-height: 400px;
  object-fit: contain;
}
.main-results-contents p {
  padding: 10px 0;
  text-align: center;
}
.main-results-contents .slick-initialized .slick-slide {
  opacity: 0.6;
}
.main-results-contents .slick-initialized .slick-slide.slick-active {
  opacity: 1;
}
.main-results-contents .slick-prev:before {
  content: '';
}
.main-results-contents .slick-next:before {
  content: '';
}
.fa-angle-left {
  font-size: 70px;
  position: absolute;
  z-index: 50;
  left: 30px;
  top: 40%;
  color: #00caca	;
}
.fa-angle-right {
  font-size: 70px;
  position: absolute;
  z-index: 50;
  right: 30px;
  top: 40%;
  color: #00caca	;
}
@media screen and (max-width:767px) {
  .fa-angle-left {
    font-size: 30px;
  }
  .fa-angle-right {
    font-size: 30px;
  }
}

.fa-angle-left,
.fa-angle-right:hover {
  cursor: pointer;
}
.main-results-contents .slick-prev {
  left: 30px;
}
.main-results-contents .slick-next {
  right: 30px;
}

/* .main-results-contents .slick-prev,
.main-results-contents .slick-next {
  z-index: 50;
} */

.main-other-lists {
  display: flex;
  padding-bottom: 50px;
  list-style: none;
}
.main-other-lists li {
  display: flex;
  overflow: flex;
  width: 33.33333%;
  height: 480px;
  background: #0d1810;
  color: #fff;
  text-align: center;
}
.main-other-lists a {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.main-other-lists .bgimage {
  height: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transition: all 0.8s;
  opacity: 0.7;
}
.main-other-lists .bgimage:hover {
  opacity: 0.5;
  transform: scale(1.05, 1.05);
}
.main-other-lists .wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  box-sizing: border-box;
  padding: 0 20px 15px;
  width: 100%;
}
.main-other-lists .title {
  position: relative;
  margin-bottom: 25px;
  padding-bottom: 25px;
  letter-spacing: .2em;
  font-size: 1.5rem;
  line-height: 1.2;
}
.main-other-lists .title::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 50px;
  height: 1px;
  background: #fff;
  content: "";
  transform: translateX(-50%);
}
.main-other-lists .text {
  min-height: 3.6em;
}
.main-other-lists .bgimage.about {
  background-image: url(indexOther/10_about.jpg);
}
.main-other-lists .bgimage.recruit {
  background-image: url(indexOther/20_recruit.jpg);
}
.main-other-lists .bgimage.contact {
  background-image: url(indexOther/30_contact.jpg);
}
@media screen and (max-width:767px) {
  .main-other-lists {
    flex-direction: column;
  }
  .main-other-lists li {
    margin-bottom: 1px;
    width: 100%;
    height: 265px;
  }
}