@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Sawarabi+Gothic&display=swap");
/* default rules */
#page #page-header-custom-mv {
  background: transparent;
  max-height: none;
}
#page #page-header-custom-mv figure {
  display: block;
  position: static;
}
#page #page-header-custom-mv figure img {
  max-height: none;
  width: 100%;
}
#page #page-header-custom-mv::after {
  content: "";
  background: #ededed;
  width: 100%;
  height: 200%;
  position: absolute;
  z-index: -1;
  top: 30rem;
  left: 0;
  -webkit-transform: skewY(20deg);
          transform: skewY(20deg);
  -webkit-transform-origin: top left;
          transform-origin: top left; /* 左上を起点に歪ませる */
}
@media (max-width: 768px) {
  #page #page-header-custom-mv::after {
    top: 10rem;
  }
}
#page #page-header-custom-title {
  height: 100%;
  top: 0;
}
#page #page-header-custom-title #page-header-custom-title-inner {
  position: relative;
  z-index: 501;
  background: transparent !important;
  width: 100%;
  height: 80%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -ms-flex-line-pack: stretch;
      align-content: stretch;
  gap: normal;
}
@media (max-width: 768px) {
  #page #page-header-custom-title #page-header-custom-title-inner {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}
#page .page-header .page-header-title-h1 {
  color: #fff;
}
#page .page-header .page-header-title-h1::after {
  background: #fff;
}
@media (max-width: 768px) {
  #page .page-header .page-header-title-h2 {
    font-size: 20px;
  }
}
@media (max-width: 768px) {
  #page #page-header-custom-mv #page-header-custom-title #page-header-title-h2-wrap {
    margin-top: 1rem;
  }
}

#page-container {
  position: relative;
  z-index: 500;
  margin-top: -10%;
}
@media (max-width: 768px) {
  #page-container {
    position: static;
    margin-top: -15%;
    margin-bottom: 0;
  }
}
@media (max-width: 480px) {
  #page-container {
    margin-top: -5%;
  }
}

#products-header-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: normal;
      -ms-flex-align: normal;
          align-items: normal;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -ms-flex-line-pack: stretch;
      align-content: stretch;
  gap: normal;
  position: relative;
  z-index: 600;
  opacity: 0;
  -webkit-transition: opacity 0.6s ease;
  transition: opacity 0.6s ease;
}
#products-header-inner.is-visible {
  opacity: 1;
}
#products-header-inner-top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-align: normal;
      -ms-flex-align: normal;
          align-items: normal;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -ms-flex-line-pack: stretch;
      align-content: stretch;
  gap: normal;
  position: relative;
}
#products-header-inner-top figure {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 49.647%;
          flex: 0 0 49.647%;
  max-width: 49.647%;
  margin: 0;
  position: relative;
  right: 50%;
  -webkit-transition: right 0.8s ease;
  transition: right 0.8s ease;
}
#products-header-inner-top div {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 50.353%;
          flex: 0 0 50.353%;
  max-width: 50.353%;
}
#products-header-inner-top.is-slide-in figure {
  right: 0;
}
#products-header-inner-bottom {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-line-pack: stretch;
      align-content: stretch;
  gap: normal;
  height: 12rem;
  width: 100%;
  opacity: 0;
  -webkit-transition: opacity 0.6s ease;
  transition: opacity 0.6s ease;
  position: relative;
}
#products-header-inner-bottom.is-visible {
  opacity: 1;
}
#products-header-inner-bottom::after {
  content: "";
  background: url(../img/product-btn.png) no-repeat;
  height: 24rem;
  position: absolute;
  z-index: -1;
  bottom: 0;
  background-size: 80% 24rem;
  background-position: bottom;
  width: 100%;
  background-position: bottom;
}
#products-header-inner-bottom a {
  background: #129cba;
  color: #fff;
  font-size: 2rem;
  font-weight: 600;
  padding: 2rem 4rem 2rem 2rem;
  min-width: 26rem;
  border-radius: 1rem;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-line-pack: stretch;
      align-content: stretch;
  gap: normal;
}
#products-header-inner-bottom a::after {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  position: absolute;
  top: 50%;
  right: 2rem;
  margin-top: -0.225em;
}

#product_menu {
  position: relative;
  z-index: 600;
}
@media (max-width: 768px) {
  #product_menu {
    margin-top: 0;
  }
}

#footer_recommend {
  position: relative;
  z-index: 600;
}/*# sourceMappingURL=products.css.map */