/* プロジェクト固有のオブジェクトに関するスタイル */

#loading {
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: 1000;
  overflow: hidden;
  pointer-events: none;
}
#loading::after {
  position: absolute;
  display: block;
  content: "";
  top: 0;
  left: -50vh;
  width: 1000%;
  height: 100%;
  transform: skewX(45deg);
  background-color: rgba(239,239,237,1);
  transition: all 0.8s;
  transition-timing-function:ease-out;
}
#loading.is-loaded::after {
  left: calc(100vw + 50vh);
  transform: skewX(45deg);
}

#main {
  opacity: 0;
  transition: 1.6s;
}
#main.is-loaded {
  opacity: 1;
}

/* hero */
.hero {
  position: fixed;
  width: 100vw;
  height: 56.15vh !important;
  overflow: hidden;
  z-index: -1;
}
@media screen and (min-width: 960px) {
  .hero {
    height: 100vh !important;
  }
}

.hero__cover {
  position: absolute;
  background: rgba(0,0,0,0.1);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.hero__movie {
  position: absolute;
  height: 100%;
  left: 0;
  right: 0;
}

@media screen and (min-width: 960px) {
  .hero__scrollNav {
    position: absolute;
    bottom: 8rem;
    left: 0;
    right: 0;
    z-index: 11;
    text-align: center;
  }

  .hero__scrollNavIcon {
    position: relative;
    display: inline-block;
    width: 2rem;
    height: 3rem;
    border: 0.1rem solid #fff;
    border-radius: 1.5rem;
  }
  .hero__scrollNavIconDot {
    position: absolute;
    top: 0.5rem;
    left: 0;
    right: 0;
    margin: auto;
    width: 0.6rem;
    height: 0.6rem;
    background: #fff;
    border-radius: 50%;
    -webkit-animation: scrollNavAnim 3s infinite;
    animation: scrollNavAnim 3s infinite;
  }
  @keyframes scrollNavAnim {
    0% {
      transform: translate(0, 0);
      opacity: 0;
    }
    33% {
      opacity: 1;
    }
    66% {
      transform: translate(0, 1rem);
      opacity: 0;
    }
    100% {
      opacity: 0;
    }
  }
}

/* about */
.about {
  position: relative;
  top: 56.15vh;
  padding: 6.4rem 1.6rem 8rem;
  background-color: rgba(228,232,239,1);
  z-index: 100;
}
@media screen and (min-width: 960px) {
  .about {
    padding: 12rem 8rem 31.2rem;
    top: 100vh;
  }
}

@media screen and (min-width: 960px) {
  .about__contentContainer {
    max-width: 120rem;
    margin: 0 auto;
  }
  .about__contentContainer::before,
  .about__contentContainer::after {
    display: table;
    content: "";
  }
  .about__contentContainer::after {
    clear: both;
  }
}

.about__thumb {
  width: 100%;
  margin-bottom: 4rem;
  border-radius: 2.4rem;
  background: url("../../img/about__thumb.jpg") #fff;
  background-size: cover;
  padding-top: 56.666%;
}
.about__thumb canvas {
  border-radius: 2.4rem;
}
@media screen and (min-width: 960px) {
  .about__thumb {
    display: block;
    width: 60%;
    padding-top: 34%;
    margin-bottom: 0;
    margin-right: 8rem;
    border-radius: 4.8rem;
    float: left;
  }
  .about__thumb canvas {
    border-radius: 4.8rem;
  }
}
@media screen and (min-width: 960px) {
  .about__description {
    overflow: hidden;
  }
}

/* recommend */
.recommend {
  position: relative;
  top: 56.15vh;
  padding: 6.4rem 1.6rem 8rem;
  background-color: rgba(239,239,237,1);
  z-index: 100;
}
@media screen and (min-width: 960px) {
  .recommend {
    padding: 12rem 8rem 28.8rem;
    top: 100vh;
  }
}

@media screen and (min-width: 960px) {
  .recommend__contentContainer {
    max-width: 120rem;
    margin: 0 auto;
  }
  .recommend__contentContainer::before,
  .recommend__contentContainer::after {
    display: table;
    content: "";
  }
  .recommend__contentContainer::after {
    clear: both;
  }
}

@media screen and (min-width: 960px) {
  .recommend__itemContainer {
    float: right;
    margin-left: 8rem;
    width: 60%;
  }
}

.recommend__item {
  margin-bottom: 4rem;
}
.recommend__item:last-of-type {
  margin-bottom: 8rem;
}

.recommend__itemHeadlineContainer {
  position: relative;
}

.recommend__itemHeadline {
  position: relative;
  z-index: 100;
  margin-bottom: 1.6rem;
}

.recommend__itemHeadlineBackground {
  position: absolute;
  width: 4.8rem;
}
.recommend__item:nth-of-type(1) .recommend__itemHeadlineBackground {
  top: -2.2rem;
  left: -0.8rem;
}
.recommend__item:nth-of-type(2) .recommend__itemHeadlineBackground {
  top: -1.6rem;
  left: 0.4rem;
}
.recommend__item:nth-of-type(3) .recommend__itemHeadlineBackground {
  top: -1.4rem;
  left: 0.4rem;
}

.recommend__description {
  margin-bottom: 8rem;
}


/* recruit */
.recruit {
  position: relative;
  top: 56.15vh;
  padding: 4.8rem 1.6rem 8rem;
  background-color: rgba(228,232,239,1);
  z-index: 100;
}
@media screen and (min-width: 960px) {
  .recruit {
    top: 100vh;
    padding: 12.8rem 8rem 18.4rem;
  }
}

@media screen and (min-width: 960px) {
  .recruit__contentContainer {
    max-width: 120rem;
    margin: 0 auto;
  }
  .recruit__contentContainer::before,
  .recruit__contentContainer::after {
    display: table;
    content: "";
  }
  .recruit__contentContainer::after {
    clear: both;
  }
}

.recruit__thumb {
  width: 100%;
  margin-bottom: 4rem;
  border-radius: 2.4rem;
  background: url("../../img/recruit__thumb.jpg") #fff;
  background-size: cover;
  padding-top: 56.666%;
}
.recruit__thumb canvas {
  border-radius: 2.4rem;
}
@media screen and (min-width: 960px) {
  .recruit__thumb {
    width: 60%;
    padding-top: 34%;
    float: left;
    margin-right: 8rem;
    margin-bottom: 8rem;
    border-radius: 4.8rem;
  }
  .recruit__thumb canvas {
    border-radius: 4.8rem;
  }
}


/* company */
.company {
  position: relative;
  top: 56.15vh;
  padding: 4.8rem 1.6rem 8rem;
  background-color: rgba(239,239,237,1);
  z-index: 100;
}
@media screen and (min-width: 960px) {
  .company {
    top: 100vh;
    padding: 12rem 8rem 30.8rem;
  }
}

@media screen and (min-width: 960px) {
  .company__contentContainer {
    max-width: 120rem;
    margin: 0 auto;
  }
  .company__contentContainer::before,
  .company__contentContainer::after {
    display: table;
    content: "";
  }
  .company__contentContainer::after {
    clear: both;
  }
}

.company__googleMap {
  width: 100%;
  height: 19.2rem;
  border-radius: 2.4rem;
  margin-bottom: 8rem;
}
@media screen and (min-width: 960px) {
  .company__googleMap {
    width: 60%;
    height: 40.8rem;
    float: right;
    margin-left: 8rem;
    margin-bottom: 0;
    border-radius: 4.8rem;
  }
}


.products {
  position: relative;
  padding: 11.2rem 1.6rem 6.4rem;
  background-color: rgba(239,239,237,1);
  z-index: 100;
}
@media screen and (min-width: 960px) {
  .products {
    padding: 20.8rem 8rem 30.8rem;
  }
}

@media screen and (min-width: 960px) {
  .products__contentContainer {
    max-width: 120rem;
    margin: 0 auto;
  }
}

.productsComponent__image {
  width: 100%;
  padding-top: 100%;
  background-size: contain;
}
#productsComponent__image1 {
  background-image: url("../../img/productsComponent__image1.jpg");
}
#productsComponent__image2 {
  background-image: url("../../img/productsComponent__image2.jpg");
}
#productsComponent__image3 {
  background-image: url("../../img/productsComponent__image3.jpg");
}
#productsComponent__image4 {
  background-image: url("../../img/productsComponent__image4.jpg");
}
#productsComponent__image5 {
  background-image: url("../../img/productsComponent__image5.jpg");
}
#productsComponent__image6 {
  background-image: url("../../img/productsComponent__image6.jpg");
}
#productsComponent__image7 {
  background-image: url("../../img/productsComponent__image7.jpg");
}
#productsComponent__image8 {
  background-image: url("../../img/productsComponent__image8.jpg");
}
#productsComponent__image9 {
  background-image: url("../../img/productsComponent__image9.jpg");
}
#productsComponent__image10 {
  background-image: url("../../img/productsComponent__image10.jpg");
}
#productsComponent__image11 {
  background-image: url("../../img/productsComponent__image11.jpg");
}
#productsComponent__image12 {
  background-image: url("../../img/productsComponent__image12.jpg");
}
#productsComponent__image13 {
  background-image: url("../../img/productsComponent__image13.jpg");
}
#productsComponent__image14 {
  background-image: url("../../img/productsComponent__image14.jpg");
}
.productsComponent__image.comingsoon {
  background-image: url("../../img/comingsoon.jpg");

}


.contact {
  position: relative;
  padding: 11.2rem 1.6rem 6.4rem;
  background-color: rgba(239,239,237,1);
  z-index: 100;
}
@media screen and (min-width: 960px) {
  .contact {
    padding: 20.8rem 8rem 14.4rem;
  }
}

.contact__form {
  margin: 0 auto;
  text-align: left;
}
@media screen and (min-width: 960px) {
  .contact__form {
    max-width: 64rem;
    margin: 0 auto;
  }
}

.contact__formBox {
  width: 100%;
  margin-bottom: 4rem;
}

.contact__formInput {
  width: 100%;
  height: 4.8rem;
  margin-top: 0.8rem;
}
.contact__formInput input {
  width: 100%;
  height: 100%;
  border-radius: 0.4rem;
  border: none;
  padding: 0 2.4rem;
  font-size: 1.6rem;
}
.contact__formInput input::placeholder {
  color: #CCC;
}
@media screen and (min-width: 960px) {
  .contact__formInput {
    height: 5.6rem;
    border-radius: 2rem;
  }
  .contact__formInput input::placeholder {
    font-size: 1.6rem;
    line-height: 6.4rem;
  }
}

.contact__formTextarea {
  width: 100%;
  height: 16rem;
  margin-top: 0.8rem;
}
.contact__formTextarea textarea {
  width: 100%;
  height: 100%;
  font-size: 1.6rem;
  border-radius: 0.4rem;
  border: none;
  padding: 1.6rem 2.4rem;
}
@media screen and (min-width: 960px) {
  .contact__formTextarea {
    height: 16rem;
    border-radius: 2rem;
  }
}

#formSubmit.is-disabled {
  opacity: 0.4;
}
#formSubmit.is-disabled:hover {
  color: inherit;
  background: inherit;
}

#formSubmit {
  transition: 0.3s;
}



.privacy {
  position: relative;
  padding: 0 1.6rem 12rem;
  background-color: rgba(239,239,237,1);
  z-index: 100;
}
@media screen and (min-width: 960px) {
  .privacy {
    padding: 12rem 8rem 32rem;
  }
}


.scl {
  position: relative;
  padding: 0 1.6rem 12rem;
  background-color: rgba(239,239,237,1);
  z-index: 100;
}
@media screen and (min-width: 960px) {
  .scl {
    padding: 12rem 8rem 32rem;
  }
}

.confirmation {
  position: relative;
  padding: 0 1.6rem 12rem;
  background-color: rgba(239,239,237,1);
  z-index: 100;
}
@media screen and (min-width: 960px) {
  .confirmation {
    padding: 12rem 8rem 32rem;
  }
}