@charset "UTF-8";

/* ==========================================================================
   header
========================================================================== */
.page__header_child .ttl {
  font-size: 2rem;
  margin-top: 2rem;
}
@media (min-width: 768px) {
  .page__header_child {
    margin-bottom: 1rem;
  }
  .page__header_child .ttl {
    font-size: 2.5rem;
    margin-top: 0;
  }
}
@media (min-width: 1200px) {
  .page__header_child .ttl {
    font-size: 3.75rem;
    margin-bottom: 1.5rem;
  }
}

/* ==========================================================================
   Intro
========================================================================== */
#intro {
  margin-top: 2rem;
  position: relative;
}
#intro::before {
  content: '';
  display: block;
  background: var(--l-gray2);
  position: absolute;
  top: 12rem;
  right: 0;
  left: 0;
  bottom: 0;
}
@media (min-width: 768px) {
  #intro {
    margin-top: -2rem;
  }
  #intro::before {
    top: 4rem;
  }
  #intro .clip {
    height: 100%;
  }
  #intro .txtBox {
    padding-top: 4rem;
  }
}

/* ==========================================================================
   Brand
========================================================================== */
/* slider */
#brand .slick-slide {
  width: 354px;
  padding: 0 4px 0 0;
}
#brand .slick-slide .imgBox {
  background: var(--l-gray);
}
@media (max-width: 991px) {
  #brand .logo {
    max-width: 50%;
  }
}
@media (max-width: 575px) {
  #brand .slick-arrow.slick-prev {
    display: none !important;
  }
}
@media (min-width: 576px) {
  #brand .slick-slide {
    width: 404px;
    padding: 0 2px;
  }
}
@media (min-width: 768px) {
  #brand .slick-slide {
    width: 484px;
  }
}
@media (min-width: 1200px) {
  #brand .slick-slide {
    width: 606px;
    padding: 0 3px;
  }
}


/* ==========================================================================
   Works
========================================================================== */
#works .card .entry__meta {
  margin-top: .5em;
  margin-bottom: 0;
}
@media (min-width: 768px) {
  #works::before {
    left: 32px;
  }
}
@media (min-width: 992px) {
  #works::before {
    border-radius: 100px 0 0 0;
  }
}
@media (min-width: 1200px) {
  #works::before {
    border-radius: 130px 0 0 0;
  }
}

/* slider */
#works .slick-slide {
  width: 343px;
  padding: 0 8px;
}
#works .slick-arrow {
  width: 3rem;
  height: 3rem;
  top: 124px;
}
#works .slick-slide .imgBox {
  background: var(--l-gray);
}

@media (max-width: 575px) {
  #works .slick-arrow.slick-next {
    right: 8vw;
  }
  #works .slick-arrow.slick-prev {
    left: 8vw;
  }
}
@media (min-width: 576px) {
  #works .slick-slide {
    width: 351px;
    padding: 0 12px;
  }
}
@media (min-width: 1200px) {
  #works .slick-slide {
    width: 380px;
    padding: 0 20px;
  }
  #works .slick-arrow {
    top: 132px;
  }
}