/* TOP */
.tophero {
  background: url(../img/hero-bg.png) no-repeat;
  background-size: cover;
  height: 90vw;
  width: 100%;
  position: relative;
}
@media (width >= 768px) {
  .tophero {
    height: 80vw;
  }
}
.tophero_img {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
.tophero_inner_title {
  position: absolute;
  width: 50%;
  top: 50%;
  left: 0;
  transform: translate(15%, 60%);
}

@media (width >= 768px) {
  .tophero_inner_title {
    transform: translate(15%, 30%);
  }
}

.topabout {
  background: url(../img/about-bg.jpg) no-repeat;
  background-size: cover;
  width: 100%;
  position: relative;
  margin-bottom: 70px;
  padding-top:70px;
  & .topabout_inner {
    max-width: 1160px;
    &::after {
      content: "";
      background: url(../img/about-after.jpg) no-repeat;
      background-size: contain;
      width: 39%;
      height: 20%;
      position: absolute;
      bottom: -8%;
      left: 55%;
    }
    @media (width >= 768px) {
      &::after {
        width: 585px;
        aspect-ratio: 37 / 25;
        height: 390px;
        bottom: unset;
        right: 0;
        display: block;
        margin: 150px 0 0 auto;
        position: unset;
      }
    }
    @media (width >= 1900px) {
      &::after {
        /* bottom: 5%; */
        bottom: 10%;
      }
    }
  }
  h2 {
    margin: auto auto 70px;
    width: 100px;
    text-align: center;
  }
  @media (width >= 768px) {
    h2 {
      width: 250px;
      margin: 0 auto 180px;
      display: block;
    }
  }
  & p img {
  }
  
  h3{
    --clamp-min: 20;
    /* --clamp-max: 70; */
    --clamp-max: 52;
    font-weight: 600;
    letter-spacing: .1em;
    margin: 0 0 30px 0;
    color: #000;
  }

  p{
    --clamp-min: 10;
    /* --clamp-max: 35; */
    --clamp-max: 24;
    font-weight: 600;
    color: #000;
  }
}

@media (width >= 768px) {
  .topabout {
    padding-top:180px;
    padding-bottom: 180px;
    margin-bottom: 0;
    h3{
      --clamp-max: 48;
      font-weight: 600;
      letter-spacing: .2em;
      margin: 0 0 30px 0;
      color: #000;
    }
    p{
      letter-spacing: .2em;
      line-height: 50px;
      --clamp-max: 22;
    }
  }
}


.topservice{
  padding:70px 0 0 0;
  .topservice_inner{
    h2 {
      width: 100px;
      margin: 0 auto 70px;
    }
    @media (width >= 768px) {
      h2 {
        width: 210px;
        margin: 0 auto 180px;
      }
    }
    .topservice_inner_list{
      background:rgba(0,0,0,.1);
      padding:50px 0;
    }
    .swiper{
      width: 80%;
      .swiper-wrapper{
        flex-direction: column;
        .swiper-slide{
          margin:0 0 30px;
          a{
          }
          a:hover .bg img{
          }
        }
        .swiper-slide_img{
          position:relative;
          overflow:hidden;
          .bg{
            img{
              transition:1s all;
            }
          }
          .txt{
            position: absolute;
            top: 50%;
            left: 7%;
            transform: translateY(-50%);
          }
          .btn{
            position: absolute;
            bottom:15px;
            left: 7%;
            width: 35%;
            margin: 0 !important;
          }
          @media (width >= 768px) {
            .btn{
              bottom:69px;
            }
          }
        }

        .service_corporate{
          .txt{
            width:35%;
          }
        }
        .service_event{
          .txt{
            width:35%;
          }
        }
        .service_training{
          .txt{
            width:30%;
          }
        }
        .service_wedding{
          margin:0 0 30px;
          .txt{
            width:30%;
          }
        }
      }
    }
    .btn{

    }
    @media (width >= 768px) {
      .btn{
        margin: 150px auto 0px;
      }
    }
  }
}



@media (width >= 768px) {
  .topservice{
    background: rgba(0, 0, 0, .1);
    padding:180px 0 180px 0;
  }
  .topservice_inner_list{
    background:unset !important;
    padding: 0 !important;
  }
  .swiper{
    width: 100% !important;
  }
  .swiper-wrapper{
    flex-direction: unset !important;
    transition-timing-function: linear !important;
  }
  .swiper-slide{
    margin:0 20px 0 0 !important;
  }
}


.topmember{
  padding:70px 0 70px 0;
  position:relative;
  &::before{
    content: "";
    background: url(../img/topmember_bg_sp.png) no-repeat;
    background-size: cover;
    background-position: center center;
    position: absolute;
    right: 0;
    top: 0;
    width: 61vw;
    height: 60vw;
    display: block;
    min-height: 205px;
    z-index: -1;
  }
  @media (width >= 768px) {
    &::before{
      background: url(../img/topmember_bg_pc.png) no-repeat;
      background-size: cover;
      background-position: center;
      height:77vw;
    }
  }
  @media (width >= 1080px) {
    &::before{
      background: url(../img/topmember_bg_pc.png) no-repeat;
      background-size: cover;
      background-position: center;
      height:58vw;
    }
  }
  @media (width >= 1200px) {
    &::before{
      background: url(../img/topmember_bg_pc.png) no-repeat;
      background-size: cover;
      background-position: center;
      height:590px;
    }
  }
  h2 {
    width: 100px;
    margin: 0 auto 90px;
  }
  @media (width >= 768px) {
    h2 {
      width: 250px;
      margin: 0 auto 180px;
    }
  }
  .topmember_inner{
    .topmember_inner_box{
      background: #c6a464;
    }
    .topmember_inner_list{
      margin: auto;
      position: relative;
      top: -20px;
      .topmember_inner_list_item{
        width: 45%;
        margin: 0 0 30px;
        a{
          position:relative;
          .bg{
            overflow: hidden;
            display: block;
            img{
              transition: 1s all;
            }
          }
          .txt{
            margin: 25px auto 0;
            h3{
              color:#fff;
              text-align: center;
              position:relative;
              span{
                color: #fff;
                line-height: 1.5;
                display: block;
                position: absolute;
                top: -15px;
                right: 0;
                left: 0;
                margin: auto;
                --clamp-min: 10;
                --clamp-max: 14;
              }
            }
          }
          .staff1{
            width: 87px;
          }
          @media (width >= 768px) {
            .staff1{
              top: 3%;
              right: 5%;
              width: 16px;
              height: 100%;
            }
          }
          .staff2{
            width: 80px;
          }
          @media (width >= 768px) {
            .staff2{
              top: 3%;
              right: 5%;
              width: 12px;
              height: 40%;
            }
          }
          .staff3{
            width: 104px;
          }
          @media (width >= 768px) {
            .staff3{
              top: 3%;
              right: 5%;
              width: 15px;
              height: 100%;
            }
          }
          .staff4{
            width: 95px;
          }
          @media (width >= 768px) {
            .staff4{
              top: 3%;
              right: 5%;
              width: 12px;
              height: 100%;
            }
          }
          .en{
            display: block;
            margin: auto;
          }
          @media (width >= 768px) {
            .en{
              position: absolute;
            }
          }
        }
      }
    }
    .btn_white{
      padding: 20px 0 50px;
    }
    @media (width >= 768px) {
      .btn_white{
        padding: 0px 0 150px;
      }
    }
  }
}

@media (width >= 768px) {
  .topmember{
    padding:180px 0 180px 0;
  }
  .topmember_inner_list{
    top:-165px !important;
    margin-top: 300px !important;
  }
  .topmember_inner_list_item{
    width: 23% !important;
    margin: 0 !important;
  }
  .topmember_inner_list_item:nth-of-type(even){
    margin:100px 0 0 0 !important;
  }
  .staff1{
  }
  .topmember_inner_list_item .txt{
    position: absolute  !important;
    bottom: 25px !important;
    left: 25px !important;
  }
  .topmember_inner_list_item .txt h3{
    text-align:left !important;
    --clamp-min: 11 !important;
    --clamp-max: 21 !important;
  }
  .topmember_inner_list_item .txt h3 span{
    text-align:left !important;
    --clamp-min: 11 !important;
    --clamp-max: 14 !important;
    border-bottom:1px solid #fff;
  }
}


.topbusiness{
  h2 {
    width: 100px;
    margin: 0 auto 70px;
  }
  @media (width >= 768px) {
    h2 {
      width: 250px;
      margin: 0 auto 180px;
    }
  }
  .topbusiness_inner{
    .topbusiness_inner_box{
      background:url(../../assets/img/business-bg-sp.png) no-repeat;
      background-size: contain;
      padding: 25px 0 0;
      .ttlbox{
        img{
          width:48%;
          margin: 0 0 0 0;
        }
        @media (width >= 768px) {
          img{
            opacity:.1;
            margin: 30px 0 -37px 0;
            width: 34%;
          }
        }
        p{
          --clamp-min: 10;
          --clamp-max: 14;
          font-weight: 600;
          color:#fff;
          margin: 15px 0 17% 0;
        }
        @media (width >= 768px) {
          p {
            --clamp-min: 11;
            /* --clamp-max: 40; */
            --clamp-max: 26;
            font-weight: 600;
            color: #fff;
            margin: 60px 0 2% 0;
            letter-spacing: .1em;
          }
        }
      }
    }
    .topbusiness_inner_list{
      position: relative;
      bottom: -30px;
      .topbusiness_inner_list_item{
        width:32%;
        .bg{
          img{
            transition: 1s all;
          }
        }
      }
    }
    .btn{
      margin: 80px 0 35px 0;
    }
    @media (width >= 768px) {
      .btn {
        margin: 150px 0 150px 0;
      }
    }
  }
}

@media (width >= 768px) {
  .topbusiness{
    padding-top: 0;
  }
  .topbusiness_inner_box{
    background:url(../../assets/img/business-bg-pc.png) no-repeat !important;
    background-size: contain !important;
    background-position: center;
  }
}


.toprecruit{
  padding: 0;
  h2 {
    width: 100px;
    margin: 0 auto 70px;
  }
  @media (width >= 768px) {
    h2 {
      width: 220px;
      margin: 0 auto 180px;
    }
  }
  .toprecruit_inner{
    .toprecruit_inner_box{
      position: relative;
      overflow: hidden;
    }
    .toprecruit_inner_box:before{
      content: "";
      background:url(../../assets/img/recruit-bg-sp.png) no-repeat;
      background-size: cover;
      background-position: center;
      transition: 1s all;
      display: block;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
    }
    @media (width >= 768px) {
      .toprecruit_inner_box:before{
        content: "";
        background:url(../../assets/img/recruit-bg-pc.png) no-repeat;
        background-size: contain;
        background-position: center top;
      }
    }
    @media (width >= 1725px) {
      .toprecruit_inner_box:before{
        content: "";
        background:url(../../assets/img/recruit-bg-pc.jpg) no-repeat;
        background-size: cover;
        background-position: center top;
      }
    }

    a{
      display: block;
      padding:18% 0 8%;
      position: relative;
      .ttlbox{
        h3{
          max-width: 250px;
          margin: auto;
        }
        @media (width >= 768px) {
          h3{
            /* max-width: 770px; */
            max-width: 600px;
            margin: auto;
          }
        }
        p{
          color: #fff;
          text-align: center;
          margin: 0px auto 5px;
          --clamp-min: 10;
          --clamp-max: 12;
        }
        @media (width >= 768px) {
          p{
            --clamp-min: 11;
            /* --clamp-max: 46; */
            --clamp-max: 28;
            margin: 50px auto 0px;
          }
        }

      }
      .btn_white{

      }
      @media (width >= 768px) {
        .btn_white{
          margin: 10vw auto;
        }
      }
    }
    .insta{
      a{
        width: 23px;
        height: 23px;
        display: block;
        text-align: center;
        margin: 40px auto 40px;
        padding: 0;
      }
      @media (width >= 768px) {
        a{
          width: 57px !important;
          height: 57px !important;
          margin: 100px auto 80px;
        }
      }
    }
  }
}


@media (width >= 768px) {
  .toprecruit .toprecruit_inner a{
    padding: 20vw 0 0%;
  }
}