@charset "UTF-8";
/* =============================================

基本設定

============================================= */
html {
  font-size: 0.625em;
}

body {
  font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
  font-weight: 400;
  line-height: 1;
  background: #fcf8dd;
  padding-bottom: 7rem;
}

img {
  width: 100%;
  max-width: none;
  height: auto;
}

.sp {
  display: none;
}

summary {
  list-style: none;
}

em {
  font-style: normal;
}

.contents {
  width: 100rem;
  margin: 0 auto;
}

/* =============================================

メインビジュアル

============================================= */
.mainvisual {
  background: url("../img/bg-mainvisual.png") no-repeat center center/cover;
  width: min(110vw, 110rem);
  height: 93.6rem;
  margin: 0 max(-5vw, -5rem) 9rem;
  position: relative;
}
.mainvisual__title {
  width: 95.6rem;
  position: absolute;
  top: 14rem;
  left: 50%;
  transform: translateX(-50%);
}
.mainvisual-char__item {
  position: absolute;
  transform-origin: bottom center;
  opacity: 0;
}
.mainvisual-char__item--01 {
  width: 26.8rem;
  top: 34rem;
  left: 5.8rem;
  z-index: 1;
}
.mainvisual-char__item--02 {
  width: 29rem;
  top: 44.6rem;
  left: 20rem;
  z-index: 2;
}
.mainvisual-char__item--03 {
  width: 22.8rem;
  top: 44.6rem;
  left: 44.6rem;
  z-index: 3;
}
.mainvisual-char__item--04 {
  width: 22.6rem;
  top: 42.8rem;
  left: 63.8rem;
  z-index: 5;
}
.mainvisual-char__item--05 {
  width: 21.4rem;
  top: 31.4rem;
  left: 81.2rem;
  z-index: 4;
}
.mainvisual-char.is-showin .mainvisual-char__item--03 {
  animation: mainChar 1s ease-in-out both;
}
.mainvisual-char.is-showin .mainvisual-char__item--02, .mainvisual-char.is-showin .mainvisual-char__item--04 {
  animation: mainChar 1s 0.3s ease-in-out both;
}
.mainvisual-char.is-showin .mainvisual-char__item--01, .mainvisual-char.is-showin .mainvisual-char__item--05 {
  animation: mainChar 1s 0.6s ease-in-out both;
}
.mainvisual-sing {
  width: 100%;
  position: absolute;
  top: 78rem;
}
.mainvisual-sing__item {
  height: 11.4rem;
  position: absolute;
}
.mainvisual-sing__item--01 {
  left: 9.6rem;
}
.mainvisual-sing__item--02 {
  top: 1.4rem;
  left: 37.8rem;
}
.mainvisual-sing__item--03 {
  top: 3.6rem;
  left: 65.6rem;
}
.mainvisual-sing__item img {
  width: auto;
  height: 100%;
}

@keyframes mainChar {
  0% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 1) translateY(0);
  }
  50% {
    opacity: 1;
    transform: scale3d(1.1, 1.1, 1) translateY(-3rem);
  }
  100% {
    opacity: 1;
    transform: scale3d(1, 1, 1) translateY(0);
  }
}
/* =============================================

バイオエンジェルとは

============================================= */
.about {
  margin-bottom: 6rem;
}
.about__title {
  width: 44rem;
  margin: 0 auto 3rem;
}
.about__txt {
  font-size: 3.1rem;
  line-height: 1.8064516129;
  font-weight: 600;
  text-align: center;
  margin-bottom: 4rem;
}
.about__txt small {
  font-size: 2.2rem;
  display: block;
}
.about__illust {
  margin-bottom: 10rem;
}
.about__clean {
  width: 90rem;
  margin: 0 auto;
}

/* =============================================

使用方法

============================================= */
.use {
  margin-bottom: 6rem;
}
.use__title {
  width: 29rem;
  margin: 0 auto 3rem;
}
.use__detail {
  font-size: 3.2rem;
  line-height: 1.8125;
  font-weight: 700;
  text-align: center;
  margin-bottom: 4rem;
}
.use__step {
  width: 80.8rem;
  margin: 0 auto 7rem;
}

/* =============================================

質問

============================================= */
.question__title {
  width: 14.6rem;
  margin: 0 auto;
}
.question__txt {
  font-size: 3.6rem;
  line-height: 1.5555555556;
  font-weight: 700;
  text-align: center;
  margin-bottom: 4rem;
}

.map {
  width: 93.4rem;
  margin: 0 auto 9rem;
  position: relative;
}
.map-area {
  position: absolute;
  top: 0;
}
.map-area__item {
  width: 16rem;
  position: absolute;
  mix-blend-mode: multiply;
  z-index: 2;
  opacity: 0;
}
.map-area__item--trashbox {
  top: 31.6rem;
  left: 28.4rem;
}
.map-area__item--bathroom {
  top: 22rem;
  left: 66rem;
}
.map-area__item--sink1 {
  top: 29.6rem;
  left: 45.4rem;
}
.map-area__item--sink2 {
  top: 39rem;
  left: 70rem;
}
.map-area__item--aircon {
  top: 67.8rem;
  left: 15.6rem;
}
.map-area__item--clothet1 {
  top: 73rem;
  left: 46rem;
}
.map-area__item--clothet2 {
  top: 67.4rem;
  left: 69.4rem;
}
.map-area.is-showin .map-area__item {
  animation: zoomIn 0.75s 0.5s ease-in-out both;
}
.map-char {
  position: absolute;
  top: 0;
  pointer-events: none;
}
.map-char__item {
  position: absolute;
  z-index: 3;
  opacity: 0;
}
.map-char__item--trashbox {
  width: 20rem;
  top: 26.6rem;
  left: 13rem;
}
.map-char__item--aircon {
  width: 20.8rem;
  top: 75.6rem;
  left: 0;
}
.map-char__item--bathroom {
  width: 15rem;
  top: 11.4rem;
  left: 77.4rem;
}
.map-char__item--clothet {
  width: 16.2rem;
  top: 86.6rem;
  left: 46.2rem;
}
.map-char__item--sink {
  width: 16rem;
  top: 41.2rem;
  left: 48rem;
}
.map-char.is-showin .map-char__item {
  animation: fadeUp 0.75s 1s ease-out both;
}
.map-label {
  position: absolute;
  top: 0;
}
.map-label__item {
  background: #fff;
  border-radius: 1.8rem;
  position: absolute;
  z-index: 4;
  opacity: 0;
}
.map-label__item--trashbox {
  width: 15.4rem;
  top: 43.4rem;
  left: 22.2rem;
}
.map-label__item--aircon {
  width: 21rem;
  top: 81.6rem;
  left: 18.4rem;
}
.map-label__item--bathroom {
  width: 17.2rem;
  top: 35.8rem;
  left: 72rem;
}
.map-label__item--clothet {
  width: 25rem;
  top: 84rem;
  left: 61.2rem;
}
.map-label__item--sink {
  width: 19.8rem;
  top: 54rem;
  left: 61rem;
}
.map-label__item a {
  transition: opacity 0.5s;
}
.map-label__item a:hover {
  opacity: 0.6;
}
.map-label.is-showin .map-label__item {
  animation: zoomIn 0.75s 1.25s ease-out both;
}

@keyframes zoomIn {
  0% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
    transform: scale3d(1.1, 1.1, 1.1);
  }
  100% {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}
@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 5rem, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.anchor-label {
  width: 64rem;
  margin: 0 auto 8rem;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.anchor-label__item {
  height: 6.4rem;
  margin-right: 4rem;
  margin-bottom: 4rem;
}
.anchor-label__item:nth-child(3n) {
  margin-right: 0;
}
.anchor-label__item img {
  width: auto;
  height: 100%;
}
.anchor-label__item a {
  transition: opacity 0.5s;
}
.anchor-label__item a:hover {
  opacity: 0.6;
}

/* =============================================

商品

============================================= */
.products {
  width: 98rem;
  margin: 0 auto 1.5rem;
  position: relative;
}
.products__char {
  position: absolute;
  opacity: 0;
}
.products__char.is-showin {
  opacity: 1;
  animation: char 0.6s linear 0s, fadeIn 0.6s linear 0s;
}
.products--bathroom .products__char {
  width: 27rem;
  top: 23rem;
  left: 7.2rem;
}
.products--aircon .products__char {
  width: 38rem;
  top: 25.8rem;
  left: 4.2rem;
}
.products--clothet .products__char {
  width: 32.8rem;
  top: 21.8rem;
  left: 7.2rem;
}
.products--sink .products__char {
  width: 34.8rem;
  top: 19rem;
  left: 6.4rem;
}
.products--trashbox .products__char {
  width: 39.6rem;
  top: 23rem;
  left: 4.6rem;
}
.products a {
  width: 32.4rem;
  position: absolute;
  right: 8rem;
  bottom: 7.4rem;
  transition: opacity 0.5s;
}
.products a:hover {
  opacity: 0.6;
}
.products--bathroom a {
  bottom: 9rem;
}

@keyframes char {
  0% {
    transform: scale(1, 1) translate(0%, 0%);
  }
  10% {
    transform: scale(1.05, 0.95) translate(0%, 5%);
  }
  40% {
    transform: scale(1.1, 0.9) translate(0%, 15%);
  }
  50% {
    transform: scale(1, 1) translate(0%, 0%);
  }
  60% {
    transform: scale(0.95, 1.1) translate(0%, -30%);
  }
  75% {
    transform: scale(0.95, 1.1) translate(0%, -15%);
  }
  85% {
    transform: scale(1.1, 0.9) translate(0%, 15%);
  }
  100% {
    transform: scale(1, 1) translate(0%, 0%);
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.products-list {
  padding: 0 2.5rem;
  margin-top: 8rem;
  margin-bottom: 10rem;
}
.products-list-lineup {
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.products-list-lineup__item {
  width: 47rem;
  margin-bottom: 1rem;
}
.products-list-lineup__item a {
  transition: opacity 0.5s;
}
.products-list-lineup__item a:hover {
  opacity: 0.7;
}
.products-list__notice {
  font-size: max(1.8rem, 9px);
  text-align: center;
}

.illustrator {
  background: #fff;
  width: 95rem;
  padding: 4.5rem 2rem 2rem 3rem;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.illustrator__char {
  width: 25rem;
  flex-shrink: 0;
}
.illustrator-prof {
  width: 62rem;
}
.illustrator-prof__title {
  width: 44.4rem;
  margin-bottom: 2rem;
}
.illustrator-prof__detail {
  font-feature-settings: "palt";
  font-size: 2.3rem;
  line-height: 1.25;
  text-align: justify;
}
.illustrator-prof__detail p:last-of-type {
  text-align: right;
  margin-top: 2rem;
}

@media only screen and (min-width: 0px) and (max-width: 1050px) {
  .contents {
    overflow: hidden;
  }
}
@media only screen and (min-width: 0px) and (max-width: 1000px) {
  html {
    font-size: 1vw;
  }
}
/* =============================================

マージン設定

============================================= */
@media only screen and (min-width: 751px) {
  .mb0pc {
    margin-bottom: 0rem;
  }
  .mb5pc {
    margin-bottom: 0.5rem;
  }
  .mb10pc {
    margin-bottom: 1rem;
  }
  .mb15pc {
    margin-bottom: 1.5rem;
  }
  .mb20pc {
    margin-bottom: 2rem;
  }
  .mb25pc {
    margin-bottom: 2.5rem;
  }
  .mb30pc {
    margin-bottom: 3rem;
  }
  .mb35pc {
    margin-bottom: 3.5rem;
  }
  .mb40pc {
    margin-bottom: 4rem;
  }
  .mb45pc {
    margin-bottom: 4.5rem;
  }
  .mb50pc {
    margin-bottom: 5rem;
  }
  .mb55pc {
    margin-bottom: 5.5rem;
  }
  .mb60pc {
    margin-bottom: 6rem;
  }
  .mb65pc {
    margin-bottom: 6.5rem;
  }
  .mb70pc {
    margin-bottom: 7rem;
  }
  .mb75pc {
    margin-bottom: 7.5rem;
  }
  .mb80pc {
    margin-bottom: 8rem;
  }
  .mb85pc {
    margin-bottom: 8.5rem;
  }
  .mb90pc {
    margin-bottom: 9rem;
  }
  .mb95pc {
    margin-bottom: 9.5rem;
  }
  .mb100pc {
    margin-bottom: 10rem;
  }
  .mb105pc {
    margin-bottom: 10.5rem;
  }
  .mb110pc {
    margin-bottom: 11rem;
  }
  .mb115pc {
    margin-bottom: 11.5rem;
  }
  .mb120pc {
    margin-bottom: 12rem;
  }
  .mb125pc {
    margin-bottom: 12.5rem;
  }
  .mb130pc {
    margin-bottom: 13rem;
  }
  .mb135pc {
    margin-bottom: 13.5rem;
  }
  .mb140pc {
    margin-bottom: 14rem;
  }
  .mb145pc {
    margin-bottom: 14.5rem;
  }
  .mb150pc {
    margin-bottom: 15rem;
  }
  .mb155pc {
    margin-bottom: 15.5rem;
  }
  .mb160pc {
    margin-bottom: 16rem;
  }
  .mb165pc {
    margin-bottom: 16.5rem;
  }
  .mb170pc {
    margin-bottom: 17rem;
  }
  .mb175pc {
    margin-bottom: 17.5rem;
  }
  .mb180pc {
    margin-bottom: 18rem;
  }
  .mb185pc {
    margin-bottom: 18.5rem;
  }
  .mb190pc {
    margin-bottom: 19rem;
  }
  .mb195pc {
    margin-bottom: 19.5rem;
  }
  .mb200pc {
    margin-bottom: 20rem;
  }
}
@media only screen and (min-width: 0px) and (max-width: 750px) {
  .mb0sp {
    margin-bottom: 0rem;
  }
  .mb5sp {
    margin-bottom: 0.5rem;
  }
  .mb10sp {
    margin-bottom: 1rem;
  }
  .mb15sp {
    margin-bottom: 1.5rem;
  }
  .mb20sp {
    margin-bottom: 2rem;
  }
  .mb25sp {
    margin-bottom: 2.5rem;
  }
  .mb30sp {
    margin-bottom: 3rem;
  }
  .mb35sp {
    margin-bottom: 3.5rem;
  }
  .mb40sp {
    margin-bottom: 4rem;
  }
  .mb45sp {
    margin-bottom: 4.5rem;
  }
  .mb50sp {
    margin-bottom: 5rem;
  }
  .mb55sp {
    margin-bottom: 5.5rem;
  }
  .mb60sp {
    margin-bottom: 6rem;
  }
  .mb65sp {
    margin-bottom: 6.5rem;
  }
  .mb70sp {
    margin-bottom: 7rem;
  }
  .mb75sp {
    margin-bottom: 7.5rem;
  }
  .mb80sp {
    margin-bottom: 8rem;
  }
  .mb85sp {
    margin-bottom: 8.5rem;
  }
  .mb90sp {
    margin-bottom: 9rem;
  }
  .mb95sp {
    margin-bottom: 9.5rem;
  }
  .mb100sp {
    margin-bottom: 10rem;
  }
  .mb105sp {
    margin-bottom: 10.5rem;
  }
  .mb110sp {
    margin-bottom: 11rem;
  }
  .mb115sp {
    margin-bottom: 11.5rem;
  }
  .mb120sp {
    margin-bottom: 12rem;
  }
  .mb125sp {
    margin-bottom: 12.5rem;
  }
  .mb130sp {
    margin-bottom: 13rem;
  }
  .mb135sp {
    margin-bottom: 13.5rem;
  }
  .mb140sp {
    margin-bottom: 14rem;
  }
  .mb145sp {
    margin-bottom: 14.5rem;
  }
  .mb150sp {
    margin-bottom: 15rem;
  }
  .mb155sp {
    margin-bottom: 15.5rem;
  }
  .mb160sp {
    margin-bottom: 16rem;
  }
  .mb165sp {
    margin-bottom: 16.5rem;
  }
  .mb170sp {
    margin-bottom: 17rem;
  }
  .mb175sp {
    margin-bottom: 17.5rem;
  }
  .mb180sp {
    margin-bottom: 18rem;
  }
  .mb185sp {
    margin-bottom: 18.5rem;
  }
  .mb190sp {
    margin-bottom: 19rem;
  }
  .mb195sp {
    margin-bottom: 19.5rem;
  }
  .mb200sp {
    margin-bottom: 20rem;
  }
}/*# sourceMappingURL=style.css.map */