@charset "UTF-8";

/* ==== root ========================== */
:root {
  --color-black: #555555;
  --color-white: #fff;
  --color-navy: #485E87;
  --color-bgBlue: #EFF3F5;

  --zen-mincho: "Zen Old Mincho", serif;
  --zen-kaku: "Zen Kaku Gothic New", sans-serif;

  --medium: 500;
  --regular: 400;

  --fs-35: 2.33em;
  --fs-13: 0.866em;
  --fs-12: 0.8em;

  --l-100: 6.66em;
  --l-80: 5.33em;
  --l-75: 5em;
  --l-70: 4.66em;
  --l-60: 4em;
  --l-50: 3.33em;
  --l-40: 2.66em;
  --l-30: 2em;
  --l-25: 1.66em;
  --l-20: 1.33em;
  --l-10: 0.66em;

  --max-wid: 2000px;

  --header: clamp(0.1rem, 5.13vw, 20rem);
  scroll-padding: var(--header);
}

@media screen and (max-width:767px) {
  :root {
    --fs-35: 2.5em;
    --fs-13: 0.928em;
    --fs-12: 0.85em;

    --l-100: 7.12em;
    --l-80: 5.71em;
    --l-75: 5.35em;
    --l-70: 5em;
    --l-60: 4.28em;
    --l-50: 3.57em;
    --l-40: 2.85em;
    --l-30: 2.14em;
    --l-25: 1.78em;
    --l-20: 1.42em;
    --l-10: 0.71em;

    --header: 16.53vw;
    scroll-padding: var(--header);
  }
}

/*================================================
 *  subVisual petReform
 ================================================*/
#subVisual.--rich .wrap {
  background-image: url(../../images/pet-reform/subvisual.jpg);
}

@media screen and (max-width:767px) {}


/*================================================
 *  petReform ill
 ================================================*/
/* cat */
.petReform #whatis .wrap {
  position: relative;
}

.petReform #whatis img.rotate {
  position: absolute;
  width: 10.055em;
  top: var(--l-25);
  left: var(--l-70);
  animation: rotate-anime 3s linear infinite;
}

@keyframes rotate-anime {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* dog */
.petReform #charm {
  padding-bottom: var(--l-40);
}

.petReform #type {
  overflow: clip;
  padding-top: 0;
  background: var(--color-white);
  z-index: 1;
}

.petReform #type::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 6em;
  left: 0;
  background: var(--color-bgBlue);
  z-index: -1;
}

.petReform #type .stepArea {
  width: 100%;
  position: relative;
  z-index: 1;
}

.petReform #type img.step {
  width: 19.6em;
  position: absolute;
  animation: scroll-left 12s linear infinite;
  top: 0;
  right: -19.6em;
}

@keyframes scroll-left {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(calc(-100vw - 19.6em));
  }
}

.petReform #type h2 {
  padding-top: 10.66em;
  z-index: 1;
  position: relative;
}


/* cat02 */
.petReform #type img.cat_fade {
  width: 10.5em;
  position: absolute;
  bottom: -0.2%;
  /* left: 22%; */
  left: 100%;
  /* transition: 2s cubic-bezier(.68, -0.55, .265, 1.55); */
  transition: 1.5s cubic-bezier(.075, .82, .165, 1);
}

.petReform #type img.cat_fade.ended {
  left: 0;
}


@media screen and (max-width:767px) {
  .petReform #whatis img.rotate {
    width: 5.35em;
    top: 11%;
    left: auto;
    right: 3%;
  }


  .petReform #type {
    padding-bottom: var(--l-100);
  }

  .petReform #type img.step {
    width: 10em;
    right: -10em;
  }

  @keyframes scroll-left {
    0% {
      transform: translateX(100%);
    }

    100% {
      transform: translateX(calc(-100vw - 10em));
    }
  }

  .petReform #type h2 {
    padding-top: 9em;
  }

  .petReform #type img.cat_fade {
    width: 6.5em;
    left: 55%;
  }
}