body{
  font-size: 14px;
}

#main-area{
  z-index: -1;
  position: relative;
}

/*------------ セクションの見出し ------------*/
/* 英語の画像 */
.sec-heading-wrap{
  text-align: center;
  position: relative;

  .sec-heading-image{
    width: 100%;

    img{
      vertical-align: bottom;
    }
    
    &.--about{
      width: 60%;
    }

    &.--achievement{
      width: 60%;
    }

    &.--businesscontent{
      width: 100%;
    }

    &.--recruit{
      width: 60%;
    }

    &.--contact{
      width: 60%;
    }
  }

  /* 日本語の見出し */
  .sec-heading{
    font-size: 24px;
    position: absolute;
    top: 58%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

/*------------ セクションのwrap ------------*/
.wrap{
  padding-bottom: 30px;
}

/*------------ ボタン ------------*/
.btn{
  border: none;
  padding: 12px;
  border-radius: 32px;
  line-height: 1;
  font-weight: bold;
  display: inline-block;
  font-size: 16px;
  text-align: center;
  width: 200px;

  /* 背景青ボタン */
  &.--detail-b{
    background-color: #005293;
    color:#fff;
    margin-top: 24px;
    border: 2px solid #005293;
  }
  
  /* 背景白ボタン */
  &.--detail-w{
    background-color: #fff;
    color:#005293;
    border: 2px solid #005293;
  }

  /* お知らせボタン */
  &.--contact{
    background-color: #005293;
    color:#fff;
    margin-top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

@media (min-width: 768px){
  body{
    font-size: 16px;
  }
  
  /*------------ セクションの見出し ------------*/
  /* 英語の画像 */
  .sec-heading-wrap{
  
    .sec-heading-image{
      
      &.--about{
        width: 40%;
      }
  
      &.--achievement{
        width: 46%;
      }
  
      &.--businesscontent{
        width: 90%;
      }
  
      &.--recruit{
        width: 50%;
      }
  
      &.--contact{
        width: 50%;
      }
    }
  
    /* 日本語の見出し */
    .sec-heading{
      font-size: 32px;
      transform: translate(-50%, 0%);
    }
  }
  
  /*------------ セクションのwrap ------------*/
  .wrap{
    padding-bottom: 60px;
  }
  
  /* ------------ボタン ------------*/
  .btn{
    font-size: 20px;
  
    /* 背景青ボタン */
    &.--detail-b{
      margin-top: 24px;
    }
  }

}

/* -------------------------------------------- */
/* メインビジュアル */
/* -------------------------------------------- */
/* ----- スライダー -----*/
#slider-area{
  width: 100%;
  height: 100vh;
  padding-top: 70px;

  #slider{
    height: 100% !important;
    width: 100%;
  }
}

.slider-area-copy{
  position: absolute;
  top: 45%;
  z-index: 1;
  left: 30px;

  li{
    color: #fff;
    text-shadow:#333 0px 0px 10px;
    -webkit-text-stroke: 1px #fff;
    padding:  0.4rem 0.6rem;
    font-size: 26px;
    line-height: 1;
    letter-spacing: 0.05em;
    display: inline-block;
    font-weight: 600;
    z-index: 100;

    &:not(:first-child){
      margin-top: 20px;
    }
  }
}

#slider-area{
  position: relative;
}

/* スクロールボタン */
.scrollBtn{
  background-color: rgba(255, 255, 255, 0.4);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  position: absolute;
  bottom: 5%;
  left: 50%;
  z-index: 2;
  transform: translateX(-50%);
  opacity: .6;
  cursor: pointer;

  &::before,
  &::after{
    content: "";
    height: 5px;
    width: 22px; 
    background-color: #000;
    display: block;
    position: absolute;
    top: 51%;
  }
  
  &::before{
    left: 17%;
    transform: rotate(45deg);
  }
  
  &::after{
    left: 41%;
    transform:rotate(-45deg);
  }
}

@media (min-width: 768px){
  

}

/* -------------------------------------------- */
/* about 会社概要 */
/* -------------------------------------------- */
.about-fl-cont{
  padding: 0 36px;
  height: 100%;
  position: relative;
}

.about{
  &__image{
    width: 100%;
    aspect-ratio: 800 / 500;
    position: relative;
    right: 0px;

    img{
      width: 100%;
      object-fit: cover;
      vertical-align: bottom;
    }
  }

  &__body{
    width: 100%;
    padding: 20px;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 1;
    background-color: #fff;
  }
}

@media (min-width: 768px){
  .about{
  
    &__body{
      padding: 28px;
    }
  }

}

@media (min-width: 992px){
  .about-fl-cont{
    display: flex;
    padding: 0 70px;
  }

  .about{
    &__image{
      width: 45%;
      right: -24px;
    }
  
    &__body{
      width: 55%;
      padding: 36px;
      top: calc(48 / 1440 * 100vw);
      right: 32px;
    }
  }
}

/* -------------------------------------------- */
/* businesscontent 事業案内*/
/* -------------------------------------------- */
.businesscontent{

  &__body{
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    padding: 60px 30px;
  }
}

.businesscontent-wrap{
  color:#fff;
  background: url(../img/haikei1.jpg) center/cover no-repeat;
}

.btn.--businesscontent{
  margin-top: 24px;
}

@media (min-width: 768px){
  .businesscontent{

    &__body{
      padding: calc((60 / 1200) * 100vw) 30px;
    }
  }
}

/* -------------------------------------------- */
/* achievement  施工実績*/
/* -------------------------------------------- */
.achievement{
  &__body{
    background-color: #fff;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 28px 28px;
  }

  &__image{
    width: 100%;
  }
}
  
.achievement-wrap{
  background: #005293;
  padding: 32px 36px;
}

.achievement-fl-cont{
  display: flex;
  flex-direction: column-reverse;

  img{
    width: 100%;
    vertical-align: bottom;
  }
}

/*------------ swiper ------------*/
.swiper-slide{
  aspect-ratio: 700/440;
}

.swiper-slide img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

/* 次へ、戻るボタン */
.swiper-button-next, 
.swiper-button-prev{
  color:#fff;
}

/* ページネーション */
.swiper-pagination-bullet{
  background-color:#fff;
  width: 8px;
  height: 8px;
}

@media (min-width: 768px){
  .achievement{
    &__body{
      padding: 28px;
    }
  }

  .achievement-wrap{
    padding: 32px 36px;
  }

  /*------------ swiper ------------*/
  /* ページネーション */
  .swiper-pagination-bullet{
    background-color:#fff;
    width: 12px;
    height: 12px;
  }

}

@media (min-width: 992px){

  .achievement{
    &__body{
      width: 49%;
      padding: 36px 36px;
    }
  
    &__image{
      width: 49%;
    }
  }

  .achievement-wrap{
    padding: 64px 70px;
  }
  
  .achievement-fl-cont{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

}

/* -------------------------------------------- */
/* recruit 採用実績 */
/* -------------------------------------------- */
/* リスト */
.recruit-list{
  padding:  0px 30px 40px;
  background-color: #FBFBFB;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  margin-top: -36px;
  
  &__item{
    width: 100%;
    margin-top: 36px;

  }

  &__image-cont{
    position: relative;
  }

  &__image{
    width: 100%;
    overflow: hidden;

    img{
      width: 100%;
      vertical-align: bottom;
      transition: all .4s;
    }
  }

  &__title{
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.25rem;
    background-color: rgba(53,83,181,1);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &__more{
    background-color: #ddd;
    display: block;
    text-align: center;
    font-weight: bold;
    padding: 0.5rem;
  }
}

@media (min-width: 768px){
  /* リスト */
  .recruit-list{
    width: 100%;
    padding: 0px 70px 50px;
    
    &__item{
      width: calc((100% - 80px) / 3);
    }
  }
}

/* -------------------------------------------- */
/* contact お問い合わせ */
/* -------------------------------------------- */
.contact{

  &__tell{
    display: inline-block;
    width: 100%;
    
    img{
      width: 100%;
    }
  }
}

.contact-body{
  background-color: #f9f07f;
}

.contact-wrap{
  padding: 32px 32px 24px;
  max-width: 964px;
  margin-left: auto;
  margin-right: auto;
}

.contact-btn-wrap{
  display: flex;
  justify-content: center;
}

.mail-icon{
  fill: #fff;
  width: 28px;
  margin-right: 4px;
  transition: ease .2s;
}

.contact-btn-wrap:hover .mail-icon{
  fill: #005293;
  stroke: #005293;
}

.contact-fl-cont{

}

@media (min-width: 768px){

  .contact{

    &__tell{
      width: 62%;
      margin-right: 20px;
    }
  }
  
  .contact-wrap{
    padding: 64px 32px 48px;
  }
  
  .mail-icon{
    width: 32px;
  }
  
  .contact-fl-cont{
    display: flex;
    justify-content: center;
    margin-top: 16px;
    align-items: center;
  }

}


/*----------採用ページ------------*/
.item{
  cursor: pointer;
}

/*----- モーダル ------*/
.modal{
  height: 100%;
  width: 100%;
  background-color: rgba(0,0,0,0.5);
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  display: none;
}

.modal-wrap{
  padding: 12px 12px 0;
  max-width: 980px;
  width: 95%;
  max-height: 90%;
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: scroll;
}

.modal-image{
  width: 100%;
  overflow: scroll;
  
  img{
    width: 100%;
    vertical-align: bottom;
    object-fit: cover;
  }
}

.modal-close{
  font-size: 18px;
  display: flex;
  align-items: center;
  margin: 0;
}

.cross{
  cursor: pointer;
  width: 18px;
  display: inline-block;
  margin-right: 10px;
}

@media (min-width: 765px){
  .modal-wrap{
    padding: 16px 16px 0px;
    max-width: 60%;
    max-height: 80%;
  }

  .modal-close{
    font-size: 26px;
  }

  .cross{
    width: 26px;
    margin-right: 20px;
  }
}

@media (min-width : 470px ){
  #slider-area{
    left: 0;
  }
}

@media (min-width: 768px){
  #slider-area{
    height: auto;
    aspect-ratio: 16/9;
  }
  
  .slider-area-copy{
    top: 50%;
    left: 70px;
  
    li{
      padding:  0.4rem 0.6rem;
      font-size: 48px;
      font-size: clamp(2rem, 1.545rem + 1.94vw, 3rem);
    }
  }

  .scrollBtn{
    width: 60px;
    height: 60px;
  
    &::before,
    &::after{
      height: 6px;
      width: 26px; 
    }
    
    &::before{
      left: 17%;
    }
    
    &::after{
      left: 41%;
    }
  }
}


/* ------- 会社概要 -------*/
.company{
  // padding:  40px 30px;
  background-color: #FBFBFB;
}

/* リスト */
.company-list{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  margin-top: -36px;
  
  &__item{
    width: 100%;
    margin-top: 36px;

  }

  &__image-cont{
    position: relative;
  }

  &__image{
    width: 100%;
    overflow: hidden;

    img{
      width: 100%;
      vertical-align: bottom;
      transition: all .4s;
    }
  }

  &__title{
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.25rem;
    background-color: rgba(53,83,181,0.5);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &__more{
    background-color: #ddd;
    display: block;
    text-align: center;
    font-weight: bold;
    padding: 0.5rem;
  }
}

@media (min-width: 768px){
  /* ------- 会社概要 -------*/
  .company{
    width: 100%;
    // padding: 50px 70px;
  }

  /* リスト */
  .company-list{
    
    &__item{
      width: calc((100% - 80px) / 3);
    }
  }
}


/* メインビジュアルのコピー用アニメーション */
.jojo.fadeIn{
  animation: fadeIn 1.4s  forwards;
  display: block !important;
  opacity: 1;
}
// .jojo {
//   white-space:nowrap;
//   overflow:hidden;
//   opacity: 0;
// }

// .jojo.show{
//     animation: jojo  1s  forwards;
//     display: block;
//     opacity: 1;
//   }
  
  // @keyframes jojo {
  
  //   0% {
  //     width:0;
  //   }
    
    
  //   100% {
  //     width: 100%;
  //   }
  
  // }

  @keyframes fadeIn {
  
    0% {
      opacity: 0;
    }
    
    
    100% {
      opacity: 1;
    }
  
  }

  @media (min-width: 768px){
    // .jojo.show{
    //   animation: jojo  1.6s  forwards;
    //   display: block;
    //   opacity: 1;
    // }
  }

/* Hover Event */
@media (hover: hover){
  .btn{
    &.--detail-b{
      &:hover{
        background-color: #fff;
        color: #005293;
      }
    }
    
    &.--detail-w{
      &:hover{
        background-color: #005293;
        color: #fff;
      }
    }

    &.--contact{

    }
  }

  .recruit-list__item img{
    // transition: all .4s;
  }
  
  .recruit-list__item {
    
    &:hover img{
      background-color: #fff;
      transform: scale(1.1);
      filter: blur(10px);
    }
  }
}