/* header
------------------------------------ */
/* vi
------------------------------------ */
#vi {
  padding: 0 2rem;
  margin-top: -1.5rem;
  background: url(/lib/img/top/bg_vi.webp) repeat-y top/100% auto;
  position: relative;
  width: 100vw;
  overflow: hidden;
}
#vi .cover:after, #vi .cover:before {
  display: none;
}
#vi .cover .catch {
  position: absolute;
  right: clamp(0rem, 50vw - 540px - 1.5rem, 50vw);
  bottom: 4rem;
  right: -1.5rem;
  width: clamp(10rem, 13.9vw, 20rem);
  z-index: 2;
}
#vi ul {
  max-width: 1080px;
  margin: 0 auto;
  position: relative;
}
#vi ul::before {
  content: "";
  width: clamp(10rem, 11.3vw, 16.2rem);
  aspect-ratio: 162/150;
  display: block;
  position: absolute;
  left: -2.8vw;
  bottom: 0;
  transform: translateY(50%);
  background: url(/lib/img/cmn/animal_dog_01_r.webp) no-repeat center/contain;
  z-index: 2;
}
#vi ul::after {
  content: "";
  width: clamp(30rem, 26vw, 37.4rem);
  aspect-ratio: 1125/399;
  display: block;
  position: absolute;
  right: -4.2vw;
  bottom: 0;
  transform: translateY(40%);
  background: url(/lib/img/top/vi_cat.webp) no-repeat center/contain;
  z-index: 2;
}
#vi .topPageViLead {
  text-align: center;
  margin-top: 2rem;
}
#vi .topPageViLead .en {
  font-family: "Instrument Sans", "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
  font-size: clamp(1.2rem, 1.3vw, 1.8rem);
  letter-spacing: 0.2em;
  text-indent: 0.2em;
}
#vi .topPageViLead .jp {
  margin-top: 2rem;
  font-size: clamp(2.4rem, 2.2vw, 3.2rem);
  font-family: "M PLUS Rounded 1c", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
}
#vi .topPageViLead .catchcopy {
  font-size: 1.8rem, 2em;
  position: relative;
  margin-top: 2rem;
  padding-top: 2rem;
}
#vi .topPageViLead .catchcopy::before {
  content: "";
  width: 7rem;
  height: 1px;
  background: #FFFCDB;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  position: absolute;
}
@media screen and (max-width: 1024px) {
  #vi {
    margin-top: -2.5rem;
  }
}
@media screen and (max-width: 767px) {
  #vi {
    overflow: visible;
    padding: 0 1rem;
    margin-top: -4rem;
    background: url(/lib/img/top/bg_vi_sp.webp) repeat-y 0/100% auto;
  }
  #vi .cover .catch {
    right: 0;
    width: clamp(10rem, 41.1vw, 15.4rem);
    bottom: auto;
    top: -1rem;
  }
  #vi .cover::before {
    display: none;
  }
  #vi ul::before {
    content: "";
    width: clamp(8rem, 37.3vw, 14rem);
    aspect-ratio: 139/160;
    display: block;
    position: absolute;
    left: -1rem;
    bottom: 3rem;
    transform: translateY(50%);
    background: url(/lib/img/top/vi_dog.webp) no-repeat center/contain;
    z-index: 2;
  }
  #vi ul::after {
    content: "";
    width: clamp(9rem, 48.5vw, 18.2rem);
    aspect-ratio: 182/61;
    right: -1rem;
    bottom: 0;
    transform: translateY(50%);
    background: url(/lib/img/top/vi_grass.webp) no-repeat center/contain;
    z-index: 2;
  }
  #vi .topPageViLead {
    margin-top: 4rem;
  }
}

/* #news
------------------------------------ */
/* structure */
#news {
  position: relative;
  padding: 0 2rem calc(clamp(18rem, 12.5vw, 18rem) * 57 / 181 - 2rem) 2rem;
}
#news:after {
  content: "";
  width: 100vw;
  aspect-ratio: 1440/145;
  position: absolute;
  right: 0;
  bottom: -1px;
  display: block;
  background: url(/lib/img/top/bg_news.webp) no-repeat bottom left/100% auto;
}
#news::before {
  content: "";
  width: clamp(13rem, 10.4vw, 15rem);
  aspect-ratio: 151/125;
  position: absolute;
  right: calc(max(2rem, 50vw - 540px) + 6rem);
  bottom: 1rem;
  display: block;
  background: url(/lib/img/cmn/animal_rabbit_01_l.webp) no-repeat bottom left/contain;
  z-index: 2;
}
#news .news_inner {
  max-width: 1080px;
  margin: 0 auto;
  z-index: 2;
  position: relative;
}
#news .newsbox {
  background: #FFFCDB;
  border-radius: 10px;
  padding: 2rem 3rem calc(clamp(18rem, 12.5vw, 18rem) * 57 / 181 - 3rem) 3rem;
  max-width: 75%;
  position: relative;
}
#news .newsbox::before {
  content: "";
  width: clamp(18rem, 12.5vw, 18rem);
  aspect-ratio: 181/57;
  position: absolute;
  left: -3rem;
  bottom: -1rem;
  display: block;
  background: url(/lib/img/cmn/nature_grass_01.webp) no-repeat bottom left/contain;
}
#news .newsbox::after {
  content: "";
  width: clamp(18rem, 12.5vw, 18rem);
  aspect-ratio: 181/57;
  position: absolute;
  right: -9rem;
  bottom: -3rem;
  display: block;
  background: url(/lib/img/cmn/nature_grass_01.webp) no-repeat bottom left/contain;
}
@media screen and (max-width: 767px) {
  #news {
    padding: 0 2rem calc(clamp(18rem, 12.5vw, 18rem) * 57 / 181 - 2rem) 2rem;
  }
  #news:after {
    content: "";
    aspect-ratio: 375/168;
    background: url(/lib/img/cmn/bg_wava_01_sp.webp) no-repeat bottom left/100% auto;
  }
  #news::before {
    content: "";
    width: 9.5rem;
    bottom: 0rem;
    right: 4rem;
    display: block;
    background: url(/lib/img/cmn/animal_rabbit_01_l.webp) no-repeat bottom left/contain;
    z-index: 3;
  }
  #news .news_inner {
    position: relative;
  }
  #news .news_inner::before {
    content: "";
    width: clamp(10rem, 34.7vw, 13rem);
    aspect-ratio: 181/57;
    position: absolute;
    left: 2rem;
    bottom: -3rem;
    display: block;
    background: url(/lib/img/cmn/nature_grass_01.webp) no-repeat bottom left/contain;
    z-index: 4;
  }
  #news .newsbox {
    padding: 2rem 2rem calc(clamp(18rem, 12.5vw, 18rem) * 57 / 181 - 1rem) 2rem;
    max-width: 100%;
  }
  #news .newsbox::before {
    width: clamp(10rem, 34.7vw, 13rem);
    aspect-ratio: 181/57;
    left: -6rem;
    bottom: -1rem;
  }
  #news .newsbox::after {
    width: clamp(10rem, 34.7vw, 13rem);
    aspect-ratio: 181/57;
    right: -9rem;
    bottom: -3rem;
  }
}

/* parts */
#news {
  position: relative;
}
#news section + section {
  margin-top: 4rem;
}
#news .article a {
  text-decoration: underline;
}
#news .article hgroup {
  color: #4AA85A;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
  place-content: center;
}
#news .article hgroup .date {
  align-self: center;
}
#news .article hgroup h3 {
  font-size: clamp(2rem, 1.5vw, 2.2rem);
  font-weight: 500;
  padding-left: 2rem;
  border-left: 2px solid #4AA85A;
  line-height: 1.4;
}
#news .article .text p + * {
  margin-top: 2em;
}
#news .linkbtn02 {
  margin: 4rem auto 0;
}
@media screen and (max-width: 767px) {
  #news .article hgroup {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  #news .article hgroup h3 {
    padding: 0 0 2rem 0;
    border-left: none;
    position: relative;
  }
  #news .article hgroup h3:after {
    content: "";
    width: 100%;
    height: 3px;
    display: block;
    background: #ccc url(/lib/img/cmn/line_green_01.webp) repeat-x top;
    position: absolute;
    left: 0;
    bottom: 0;
    border-radius: 50vh;
  }
}

/* #targetanimal
------------------------------------ */
/* structure */
#about {
  background: #4AA85A url(/lib/img/cmn/bg_body.webp) repeat;
  color: #fff;
  padding: 5rem 0 0 0;
  position: relative;
}
#about::before {
  content: "";
  width: 100vw;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  background: url(/lib/img/cmn/bg_block_whitegrass_01.webp) repeat-y top center/100% auto;
  z-index: 1;
}
#about::after {
  content: "";
  width: 100vw;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  background: url(/lib/img/cmn/bg_cloud_01.webp) repeat-y top center/100% auto;
  z-index: 1;
  display: none;
}
#about .about_inner {
  position: relative;
  padding: 5rem max(2rem, 50vw - 540px) calc(17.8472222222vw - 5rem);
  z-index: 10;
}
#about .about_inner::before {
  content: "";
  width: 100vw;
  aspect-ratio: 1440/257;
  position: absolute;
  right: 0;
  bottom: -1px;
  display: block;
  background: url(/lib/img/top/bg_about.webp) no-repeat bottom left/100% auto;
  z-index: -1;
}
@media screen and (max-width: 767px) {
  #about {
    padding: 0;
    position: relative;
  }
  #about::before {
    background: url(/lib/img/cmn/bg_block_greengrass_01_sp.webp) repeat-y top center/100% auto;
  }
  #about::after {
    background: url(/lib/img/cmn/bg_cloud_01.webp) no-repeat top center/100% auto;
  }
  #about .about_inner {
    padding: 5rem max(2rem, 50vw - 540px) calc(35.7333333333vw - 2rem);
  }
  #about .about_inner::before {
    aspect-ratio: 375/134;
    background: url(/lib/img/top/bg_about_sp.webp) no-repeat bottom left/100% auto;
  }
}

/* parts */
#about .about_inner {
  display: grid;
  grid-template-columns: calc(60% - 4rem) 40%;
  grid-template-areas: "hgroup hgroup" "text photo" "link link";
  gap: 4rem;
}
#about .about_inner hgroup {
  grid-area: hgroup;
}
#about .about_inner .text {
  grid-area: text;
  text-align: justify;
}
#about .about_inner .photo {
  grid-area: photo;
}
#about .about_inner .link {
  grid-area: link;
  margin: 0 auto;
}
#about .about_inner .link a {
  color: #4AA85A;
  border-color: #4AA85A;
}
@media screen and (max-width: 767px) {
  #about .about_inner {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "hgroup" "text" "photo" "link";
    gap: 2rem;
  }
  #about .about_inner .photo {
    grid-area: photo;
    position: relative;
  }
  #about .about_inner .photo::before {
    content: "";
    width: 7rem;
    aspect-ratio: 210/312;
    position: absolute;
    right: -2rem;
    bottom: 2rem;
    background: url(/lib/img/top/bg_about_cloud_02.webp) no-repeat top/contain;
  }
  #about .about_inner .photo:after {
    content: "";
    width: 7rem;
    aspect-ratio: 210/312;
    position: absolute;
    left: -2rem;
    top: 2rem;
    background: url(/lib/img/top/bg_about_cloud_01.webp) no-repeat top/contain;
  }
}

/* #targetanimal
------------------------------------ */
#targetanimal {
  padding: 0 2rem;
  max-width: calc(1080px + 4rem);
  margin: 0 auto 3rem;
}
#targetanimal .htype03 {
  margin-bottom: 5rem;
}
#targetanimal .notes {
  width: fit-content;
  margin: 0 auto;
  padding: 1rem 2rem;
  border-radius: 50vh;
  background: #4AA85A;
  color: #fff;
}
@media screen and (max-width: 767px) {
  #targetanimal {
    margin-top: 3rem;
  }
  #targetanimal .notes {
    margin-top: 2rem;
  }
}

/* #treatment
------------------------------------ */
/* structure */
#treatment {
  background: #E8F3F1 url(/lib/img/cmn/bg_mizuiro.webp) repeat;
  position: relative;
}
#treatment:before {
  content: "";
  width: 100vw;
  aspect-ratio: 4320/225;
  position: absolute;
  right: 0;
  top: -1px;
  background: url(/lib/img/cmn/bg_wava_04.webp) no-repeat 0/100% auto;
}
#treatment:after {
  content: "";
  width: 100vw;
  aspect-ratio: 4320/225;
  position: absolute;
  right: 0;
  bottom: -1px;
  display: block;
  background: url(/lib/img/cmn/bg_wava_04.webp) no-repeat 0/100% auto;
  transform: rotate(180deg);
}
#treatment .treatment_inner {
  padding: 10.4166666667vw 2rem;
  background: url(/lib/img/cmn/bg_block_whitegrass_01.webp) repeat-y top/100% auto;
  position: relative;
}
#treatment .treatment_inner:before {
  content: "";
  width: 100vw;
  height: 100%;
  aspect-ratio: 4323/1977;
  display: block;
  position: absolute;
  top: 0;
  left: 0rem;
  background: url(/lib/img/cmn/bg_cloud_01.webp) repeat-y top/100% auto;
}
@media screen and (max-width: 767px) {
  #treatment {
    position: relative;
    padding: 5.2083333333vw 0 6rem;
  }
  #treatment:before {
    aspect-ratio: 1125/114;
    background: url(/lib/img/cmn/bg_wava_04_sp.webp) no-repeat 0/100% auto;
  }
  #treatment:after {
    content: "";
    aspect-ratio: 1125/114;
    background: url(/lib/img/cmn/bg_wava_04_sp.webp) no-repeat 0/100% auto;
    transform: rotate(180deg);
  }
  #treatment .treatment_inner {
    background: url(/lib/img/cmn/bg_block_whitegrass_01_sp.webp) repeat-y top/100% auto;
  }
  #treatment .treatment_inner:before {
    height: auto;
    aspect-ratio: 375/151;
    left: 0;
    background: url(/lib/img/cmn/bg_cloud_01_sp.webp) no-repeat top/100% auto;
    z-index: 5;
  }
}

/* parts */
#treatment .htype03 {
  margin-bottom: 8rem;
}
#treatment .treatment_list {
  max-width: 1080px;
  margin: 0 auto;
  padding: 3rem;
  background: #fff;
  border-radius: 15px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem 3rem;
}
#treatment .treatment_list section {
  padding: 3rem 1rem;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  gap: 1rem;
  position: relative;
}
#treatment .treatment_list section::after {
  content: "";
  width: 100%;
  height: 3px;
  position: absolute;
  bottom: 0;
  display: block;
  background: url(/lib/img/cmn/line_green_01.webp) repeat-x center;
}
#treatment .treatment_list section::before {
  content: "";
  width: 3px;
  height: calc(100% - 1.5rem);
  position: absolute;
  right: -1.5rem;
  top: 0;
  display: block;
  background: url(/lib/img/cmn/line_green_01.webp) repeat-y center;
}
#treatment .treatment_list section:nth-child(3n):before {
  display: none;
}
#treatment .treatment_list section:last-child:after {
  display: none;
}
#treatment .treatment_list section h3 {
  font-size: clamp(1.8rem, 1.5vw, 2.2rem);
  color: #4AA85A;
  text-align: center;
}
#treatment .treatment_list section h3::after {
  display: block;
  margin: 0 auto;
  content: "";
  width: 19rem;
  aspect-ratio: 191/40;
  background: url(/lib/img/top/bg_treatment_title.webp) no-repeat top/contain;
}
#treatment .treatment_list section .disc {
  text-align: justify;
}
#treatment .treatment_list section .linkbtn02 {
  margin: 1rem auto 0;
}
#treatment .treatment_list section .linkbtn02 span {
  font-size: clamp(1.4rem, 1.3vw, 1.8rem);
  font-weight: 400;
}
#treatment .treatment_list .homevisit {
  grid-column: 2/4;
  grid-template-rows: subgrid;
  grid-row: span 4;
  position: relative;
}
#treatment .treatment_list .homevisit a {
  display: block;
  width: 70%;
  margin: 0 0 -4rem auto;
  position: absolute;
  right: 0;
  bottom: clamp(-3rem, -1.4vw, -2rem);
}
@media screen and (max-width: 767px) {
  #treatment .htype03 {
    margin-bottom: 3rem;
  }
  #treatment .treatment_list {
    grid-template-columns: 1fr;
    padding: 2rem 2rem;
  }
  #treatment .treatment_list section {
    padding: 0 0 2.5rem 0;
  }
  #treatment .treatment_list section::before {
    display: none;
  }
  #treatment .treatment_list .homevisit {
    grid-column: 1/2;
  }
  #treatment .treatment_list .homevisit a {
    position: relative;
    width: 100%;
    bottom: 0;
  }
}