/*
* howto.css
*
*/
/* --------------------------------
howto
-------------------------------- */
.howto {
  padding-top: 80px;
}
@media (max-width: 767.98px) {
  .howto {
    padding-top: 12vw;
  }
}

/* point ---------------------- */
.howto-point {
  padding-bottom: 70px;
  color: #2e2e2e; 
  font-size: 17px;
}
@media (max-width: 767.98px) {
  .howto-point {
    padding-bottom: 7.46667vw;
    font-size: 4.26667vw;
  }
}

.howto-point_txt {
  text-align: center;
  line-height: 1.7;
}
@media (max-width: 767.98px) {
  .howto-point_txt {
    font-weight: bold;
  }
}

/* information ---------------------- */
.howto-information {
  margin-top: 47px;
}
@media (max-width: 767.98px) {
  .howto-information {
    margin-top: 11.2vw;
  }
}

.howto-information_img {
  display: none;
  margin: 0 auto;
  width: 100%;
  text-align: center;
}
@media (min-width: 768px) {
  .howto-information_img.-lg {
    display: block;
    max-width: 760px;
  }
}
@media (max-width: 767.98px) {
  .howto-information_img.-sm {
    display: block;
  }
}
.howto-information_img img {
  width: 100%;
}

/* process ---------------------- */
.howto-process {
  margin: 0 auto 100px;
  max-width: 1200px;
}
@media (max-width: 767.98px) {
  .howto-process {
    margin-bottom: 17.06667vw;
  }
}

.howto-processList-wrapper {
  display: flex;

  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}
.howto-processList-wrapper .card-item {
  background: none;
}

.howto-process_item {
  display: flex;
  flex-direction: column;
  width: calc(33% - 10px); 

  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
}
@media (max-width: 767.98px) {
  .howto-process_item {
    margin-bottom: 10.66667vw;
    width: 100%;
  }
}

.howto-process_wrapper {
  display: block;
  position: relative;
}

.howto-process_thumbWrapper {
  position: relative;
}

.howto-process_thumb {
  position: relative;
  padding-top: 70.5%;
  width: 100%; 
  background: #eee;
}
.howto-process_thumb img {
  position: absolute;
  top: 0; 
  width: 100%;
}

.howto-process_details {
  padding-top: 25px;
}
@media (max-width: 767.98px) {
  .howto-process_details {
    padding-top: 3.73333vw;
  }
}

.howto-process_description {
  color: #2e2e2e;
  font-size: 14px;
  line-height: 1.5;
}
@media (max-width: 767.98px) {
  .howto-process_description {
    font-size: 3.73333vw;
  }
}
.howto-process_description span {
  color: #a44141;
}

/* related ---------------------- */
.howto-related {
  padding: 92px 32px 100px;
  background: url(/assets/img/bg_texture.jpg) 0 0/200px 200px repeat;
}
@media (max-width: 767.98px) {
  .howto-related {
    padding: 14.66667vw 8.53333vw 16vw;
  }
}
@media (max-width: 767.98px) {
  .howto-related .card-list {
    padding: 0 6.66667vw;
  }
}
@media (max-width: 767.98px) {
  .howto-related .card-item + .card-item {
    margin-top: 0;
  }
}
.howto-related .slick-list {
  overflow: visible;
}
.howto-related .slick-slider {
  margin: 0 -10px;
}
@media (max-width: 767.98px) {
  .howto-related .slick-slider {
    margin: 0 -1.86667vw;
  }
}
.howto-related .slick-slide {
  opacity: 0.3;
  margin: 0 10px; 
  transition: opacity ease 0.4s;
}
@media (max-width: 767.98px) {
  .howto-related .slick-slide {
    margin: 0 1.86667vw;
  }
}
.howto-related .slick-slide.slick-current {
  opacity: 1;
}
.howto-related .slick-prev,
.howto-related .slick-next {
  z-index: 10;
  width: 50px;
  height: 50px;
  transition: opacity ease 0.2s;
}
.howto-related .slick-prev:hover,
.howto-related .slick-next:hover {
  opacity: 0.7;
}
@media (max-width: 767.98px) {
  .howto-related .slick-prev,
  .howto-related .slick-next {
    width: 11.73333vw;
    height: 11.73333vw;
  }
}
.howto-related .slick-prev::before,
.howto-related .slick-next::before {
  content: "";
  display: block;
  right: 0;
  left: 0;
  margin: auto; 
  border-right: solid 3px #2e2e2e;
  border-bottom: solid 3px #2e2e2e;
  width: 19px;
  height: 19px;
}
@media (max-width: 767.98px) {
  .howto-related .slick-prev::before,
  .howto-related .slick-next::before {
    border-right-width: 0.53333vw;
    border-bottom-width: 0.53333vw;
    width: 3.73333vw;
    height: 3.73333vw;
  }
}
.howto-related .slick-prev {
  left: -52px;
}
@media (max-width: 767.98px) {
  .howto-related .slick-prev {
    left: -3.2vw;
  }
}
.howto-related .slick-prev::before {
  -webkit-transform: rotate(135deg);
          transform: rotate(135deg);
}
.howto-related .slick-next {
  right: -52px;
}
@media (max-width: 767.98px) {
  .howto-related .slick-next {
    right: -3.2vw;
  }
}
.howto-related .slick-next::before {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.howto-related .slick-disabled {
  opacity: 0.3;
}

.howto-related_inner {
  margin: 0 auto;
  max-width: 1200px;
}
@media (max-width: 767.98px) {
  .howto-related_inner {
    padding: 0;
  }
}

.howto-related_ttl {
  position: relative;
  margin-bottom: 53px;
  text-align: center;
  letter-spacing: 0.1rem; 
  color: #2e2e2e;
  font-size: 20px;
  line-height: 1.5;
}
@media (max-width: 767.98px) {
  .howto-related_ttl {
    margin-bottom: 13.33333vw;
    font-size: 4.26667vw;
    line-height: 1;
  }
}
.howto-related_ttl::after {
  content: "";
  display: block;
  position: absolute;
  right: 0;
  bottom: -8px;
  left: 0;
  margin: auto;
  width: 188px;
  height: 3px;
  background-color: #2e2e2e;
}
@media (max-width: 767.98px) {
  .howto-related_ttl::after {
    width: 38.93333vw;
    height: 0.53333vw;
  }
}

.howto-related_btnArea {
  padding-top: 40px; 
  text-align: center;
}
@media (max-width: 767.98px) {
  .howto-related_btnArea {
    padding-top: 10.66667vw;
  }
  .howto-related_btnArea .c-btn {
    padding-right: 11.73333vw; 
    padding-left: 11.73333vw;
  }
}

/* components ---------------------- */