@charset "utf-8";

/* CSS Document */

.mainvisual{
  }
  .mainvisual-slider{position: relative;}
    .swiper-pagination.swiper-pagination-bullets{
      display: flex;
      justify-content: center;
      width: 100%;
      bottom: 20px;
      }
      .swiper-pagination .swiper-pagination-bullet{
        width: 10px;
        height: 10px;
        margin-right: 4px;
        margin-left: 4px;
        background-color: var(--color-White);
        opacity: 1;
        }
        .swiper-pagination .swiper-pagination-bullet-active{background-color: var(--color-PinkSwan);}

.company-wrap{
  padding-top: 80px;
  padding-bottom: 80px;
  }
  .company-inner{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    max-width: 820px;
    margin: 0 auto;
    }
    .company-head{width: 46%;}
      .company-ttl{}
    .company-main{}
    .company-wrap .sidettl{margin-bottom: 20px;}
      .company-summary{
        margin-bottom: 1.5em;
        font-size: var(--fontsize-sml);
        font-weight: bold;
        }
      .company-button{}

.business-wrap{}
  .business-inner{
    display: flex;
    flex-wrap: wrap;
    }
    .business-item{
      overflow: hidden;
      width: calc((100% - 4px) / 3);
      }
      .business-item:not(:last-of-type){margin-right: 2px;}
      .business-link{
        display: flex;
        padding-top: 57.5%;
        position: relative; 
        }
        .business-head{
          display: flex;
          align-items: center;
          position: absolute;
          left: 20px;
          bottom: 10px;
          z-index: 100;
          }
          .business-head::after{
            content: "";
            width: 0;
            height: 0;
            margin-left: 10px;
            border-style: solid;
            border-width: 5.5px 0 5.5px 6px;
            border-color: transparent transparent transparent var(--color-VeryLightGrey);
            }
          .business-head-en{
            font-family: var(--roboto);
            font-size: var(--fontsize-xxxlrg);
            font-weight: bold;
            color: var(--color-White);
            line-height: 1;
            letter-spacing: 0.2em;
            }
          .business-head-jp{
            font-size: var(--fontsize-xsml);
            font-weight: bold;
            color: var(--color-White);
            line-height: 1;
            }
            .business-head-jp::before{
              content: "｜";
              margin-right: 4px;
              margin-left: 4px;
              color: var(--color-White);
              }
        .business-fig{
          width: 100%;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%,-50%) scale(1.01);   
          transition: .3s;
          }
          .business-link:hover .business-fig{transform: translate(-50%,-50%) scale(1.08);}

.pickup-wrap{
  padding-top: 60px;
  background-color: var(--color-DimGray);
  background-image: url(../img/common/bg-line.png);
  background-size: 7px;
  }
  .pickup-inner{
    max-width: 960px;
    margin: 0 auto;
    }
    .pickup-ttl{
      margin-bottom: 30px;
      font-size: var(--fontsize-xxlrg);
      font-weight: bold;
      color: var(--color-White);
      text-align: center;
      position: relative;
      }
      .pickup-ttl::before{
        content: "";
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 6px 6px 0 6px;
        border-color: var(--color-VenetianRed) transparent transparent transparent;
        position: absolute;
        left: 50%;
        top: -20px;
        }
      .pickup-list{
        display: flex;
        flex-wrap: wrap;
        }
        .pickup-item{
          width: calc((100% - 30px) / 2);
          margin-bottom: 30px;
          }
          .pickup-item:not(:nth-of-type(2n+2)){margin-right: 30px;}
          .pickup-link{
            overflow: hidden;
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            padding-top: 42%;
            border: 4px solid var(--color-VenetianRed);
            position: relative;
            }
            .pickup-link::after{
              content: "";
              width: 0;
              height: 0;
              border-style: solid;
              border-width: 0 0 20px 20px;
              border-color: transparent transparent var(--color-VenetianRed) transparent;
              position: absolute;
              right: 0;
              bottom: 0;
              }
            .pickup-fig{
              width: 100%;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%,-50%) scale(1.01);   
              transition: .3s;
              }
              .pickup-link:hover .pickup-fig{transform: translate(-50%,-50%) scale(1.08);}
            .pickup-summary{
              font-size: var(--fontsize-med);
              font-weight: bold;
              color: var(--color-White);
              line-height: 1.6;
              position: absolute;
              top: 50%;
              left: 30px;
              transform: translateY(-50%);
              z-index: 100;
              }
              .drone .pickup-summary img{
                display: block;
                width: 160px;
                margin-bottom: 5px;
                }
        .pickup-to{
          display: flex;
          font-size: var(--fontsize-med);
          font-weight: bold;
          color: var(--color-White);
          line-height: 1.2;
          }
          .pickup-to::before{
            content: "";
            width: 0;
            height: 0;
            margin-top: 3px;
            margin-right: 10px;
            border-style: solid;
            border-width: 5.5px 0 5.5px 6px;
            border-color: transparent transparent transparent var(--color-VenetianRed);
            }

.about-wrap{  
  height: 600px;
  padding-right: 40px;
  padding-left: 40px;
  background-image: url(../img/top/top-fig-06.jpg); 
  background-size: cover;
  background-position: center top;
  }
  .about-inner{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    max-width: 960px;
    height: 100%;
    margin: 0 auto;
    }
    .about-inner .sidettl-en,
    .about-inner .sidettl-jp{
      color: var(--color-White);
      }
    .about-main{margin-top: -10px;}  
    .about-wrap .sidettl{margin-bottom: 20px;}  
    .about-ttl{
      max-width: 420px;
      margin-bottom: 30px;
      }
    .about-sumamry{
      margin-bottom: 30px;
      font-size: 20px;
      font-weight: bold;
      color: var(--color-White);
      }

.works-wrap{
  padding-top: 70px;
  padding-bottom: 70px;
  background-color: var(--color-WhiteSmoke);
  }
  .works-inner{
    max-width: 960px;
    margin: 0 auto;
    }

.works-button{margin: 0 auto;} 

.staff-wrap{padding-top: 60px;}
  .staff-inner{
    max-width: 960px;
    margin: 0 auto;
    }
    .staff-intro{
      display: flex;
      align-items: center;
      justify-content: space-between;
      max-width: 720px;
      margin: 0 auto;
      margin-bottom: 65px;
      }
      .staff-main{order: 1;}
        .staff-wrap .sidettl{margin-bottom: 20px;}
        .staff-summary{
          margin-bottom: 20px;
          font-size: 20px;
          font-weight: bold;
          }
      .staff-fig{
        order: 0;
        width: 100%;
        max-width: 240px;
        }

.staff-list{
  display: flex;
  flex-wrap: wrap;
  }
  .staff-item{width: calc((100% - 80px) / 3);}
    .staff-item:not(:last-of-type){margin-right: 40px;}
    .staff-item-link{
      display: block;
      transition: .3s;
      }
      .staff-item-link:hover{opacity: .7;}
      .staff-item-fig{margin-bottom: 15px;}
      .staff-item-pos{
        margin-bottom: 15px;
        font-family: var(--roboto);
        font-size: var(--fontsize-xxsml);
        font-weight: 300;
        line-height: 1;
        }
      .staff-item-name{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        line-height: 1;
        }
        .staff-item-name-en{
          font-family: var(--roboto);
          font-size: 19px;
          font-weight: bold;
          }
        .staff-item-name-jp{
          font-size: var(--fontsize-xxsml);
          font-weight: bold;
          letter-spacing: 0.1em;
          }

@media screen and (max-width: 1400px) {}/* max-width: 1400px */
@media screen and (max-width: 1200px) {

.business-head-en{
  font-size: var(--fontsize-xxlrg);
  letter-spacing: 0.1em;
  }

}/* max-width: 1200px */

@media screen and (max-width: 992px) {

.business-head{left: 10px;}
.business-head-en{font-size: var(--fontsize-lrg);}
  .business-head-jp{font-size: var(--fontsize-xxxsml);}
  .business-head-jp::before{
    margin-right: 2px;
    margin-left: 2px;
    }

.pickup-item{width: calc((100% - 20px) / 2);}
  .pickup-item:not(:nth-of-type(2n+2)){margin-right: 20px;}
  .pickup-summary{
    font-size: var(--fontsize-sml);
    left: 20px;
    }
  .drone .pickup-summary img{width: 140px;}
  .pickup-to{font-size: var(--fontsize-xsml);}

.about-wrap{height: 500px;}

.staff-item{width: calc((100% - 60px) / 3);}
  .staff-item:not(:last-of-type){margin-right: 30px;}

}/* max-width: 992px */

@media screen and (max-width: 768px) {

.company-wrap{
  padding-top: 50px;
  padding-bottom: 50px;
  }
  .company-inner{max-width: 600px;}
  .company-head{width: 42%;}

.business-item{width: 100%;}
  .business-item:not(:last-of-type){
    margin-right: 0px;
    margin-bottom: 2px;
    }
    .business-link{padding-top: 40%;}
      .business-head-en{font-size: var(--fontsize-xxlrg);}
      .business-head-jp{font-size: var(--fontsize-xsml);}

.pickup-wrap{padding-top: 40px;}
  .pickup-ttl{
    margin-bottom: 20px;
    font-size: var(--fontsize-xlrg);
    }
  .pickup-summary{
    font-size: var(--fontsize-xsml);
    left: 15px;
    }
  .drone .pickup-summary img{width: 130px;}

.about-wrap{height: 400px;}
  .about-ttl{
    max-width: 280px;
    margin-bottom: 20px;
    }
  .about-sumamry{
    margin-bottom: 20px;
    font-size: var(--fontsize-med);
    }

.works-wrap{
  padding-top: 60px;
  padding-bottom: 60px;
  }
  .works-wrap .sidettl{margin-bottom: 40px;}

.staff-wrap{padding-top: 40px;}
  .staff-intro{
    max-width: 550px;
    margin-bottom: 50px;
    }
  .staff-summary{font-size: var(--fontsize-lrg);}
  .staff-fig{max-width: 200px;}
  .staff-item{width: calc((100% - 40px) / 3);}
  .staff-item:not(:last-of-type){margin-right: 20px;}
  .staff-item-pos{margin-bottom: 10px;}
  .staff-item-name-en{
    width: 100%;
    margin-bottom: 10px;
    font-size: var(--fontsize-med);
    }
  .staff-item-name-jp{
    width: 100%;
    font-size: var(--fontsize-xxxsml);
    }

}/* max-width: 768px */

@media not all and (max-width: 576px) {

.about-headsp{display: none;}
.staff-figsp{display: none;}
.staff-button.spbtn{display: none;}

}/* max-width: 576px */

@media screen and (max-width: 576px) {

.swiper-pagination.swiper-pagination-bullets{display: none;}
.company-wrap{
  padding-top: 40px;
  padding-bottom: 40px;
  }
  .company-inner{justify-content: center;}
  .company-head{
    width: 75%;
    max-width: 350px;
    margin-bottom: 30px;
    }
  .company-main{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    }
    .company-wrap .sidettl{margin-bottom: 10px;}
    .company-summary{
      margin-bottom: 1.5em;
      font-size: var(--fontsize-med);
      font-weight: bold;
      }

.business-link{padding-top: 50%;}
  .business-head-en{font-size: var(--fontsize-xlrg);}
  .business-head-jp{font-size: var(--fontsize-xxsml);}

.pickup-item{width: 100%;}
  .pickup-item:not(:nth-of-type(2n+2)){margin-right: 0;}
  .pickup-link{padding-top: 38%;}

.about-wrap{  
  height: auto;
  background: none; 
  }
  .about-wrap.gap-wrap{padding: 0;}
  .about-headsp{
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    height: 350px;
    padding-bottom: 10%;
    background-image: url(../img/top/top-fig-06sp.jpg);
    background-size: cover;
    background-position: center top;
    }
  .about-headsp-ttl{
    width: 67%;
    max-width: 380px;
    }
  .about-main{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding-top: 30px;
    padding-bottom: 30px;
    background-color: var(--color-BostonBlue);
    }
  .about-wrap .sidettl{margin-bottom: 10px;}
  .about-ttl{display: none;}
  .about-sumamry{text-align: center;}

.staff-intro{flex-direction: column;}
  .staff-main{
    display: flex;
    flex-direction: column;
    align-items: center;
    }
  .staff-wrap .sidettl{margin-bottom: 20px;}
  .staff-figsp{
    width: 60.5%;
    margin-bottom: 20px;
    }
  .staff-main .staff-button{display: none;}
  .staff-fig{display: none;}

  .staff-list{margin-bottom: 40px;}
  .staff-item{width: 100%;}
  .staff-item:not(:last-of-type){
    margin-right: 0;
    margin-bottom: 30px;
    }
  .staff-button.spbtn{margin: 0 auto;}


}/* max-width: 576px */

@media screen and (max-width: 476px) {


.pickup-link{padding-top: 42%;}
  .drone .pickup-summary img{width: 110px;}

}/* max-width: 476px */