@charset "utf-8";

/** ***************************************************************************
 * 共用
 * ************************************************************************* */

@keyframes button-animation {
  0%, 7% {
    transform: rotateZ(0);
  }
  15% {
    transform: rotateZ(-15deg);
  }
  20% {
    transform: rotateZ(10deg);
  }
  25% {
    transform: rotateZ(-10deg);
  }
  30% {
    transform: rotateZ(6deg);
  }
  35% {
    transform: rotateZ(-4deg);
  }
  40%, 100% {
    transform: rotateZ(0);
  }
}

/** ***************************************************************************
 * ビジュアル
 * ************************************************************************* */

#visual {
  position: relative;
  z-index: 0;
}

/**
 * テキスト画像
 */

#visual div.text {
  width: 80%;
  position: absolute;
  z-index: 2;
  top: 15px;
  left: calc(50% - 40%);
  transition:
    visibility 0.4s ease-in-out 0.0s,
    opacity 0.4s ease-in-out 0.0s,
    transform 0.4s ease-in-out 0.0s;
  visibility: hidden;
  opacity: 0;
  transform: translate(-20px, 50px) rotate(-2deg) skew(-50deg, -10deg);
}

#visual.displayed div.text {
  visibility: visible;
  opacity: 1;
  transform: translate(0);
}

@media screen and (min-width:768px) {

  #visual div.text {
    width: 32.76%;
    transform: translate(-40px, 100px) rotate(-2deg) skew(-50deg, -10deg);
    top: 9.375vw;
    left: 9.9vw;
  }

}

/**
 * Vet.AI を体験する
 */

#visual div.button {
  width: 300px;
  position: absolute;
  z-index: 2;
  left: calc(50% - 150px);
  bottom: 22.27%;
  transition:
    visibility 0.3s ease-in-out 0.2s,
    opacity 0.3s ease-in-out 0.2s,
    transform 0.3s ease-in-out 0.2s;
  visibility: hidden;
  opacity: 0;
  transform: translateY(100px);
}

#visual.displayed div.button {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

#visual.displayed div.button a {
  text-decoration: none;
  display: inline-block;
}

#visual.displayed div.button a {
  animation: button-animation 2.0s linear infinite;
}

@media screen and (min-width:768px) {

  #visual div.button {
    width: 31.25vw;
    left: 9.9vw;
    bottom: 34.23%;
  }

}

/**
 * 画像
 */

#visual div.image img {
  width: 100%;
}

/**
 * スライダー
 */

#visual div.slider {
  margin-top: -20px;
  overflow: hidden;
}

#visual div.slider img {
  width: 100%;
  border-radius: 12px;
}

#visual div.slider img:nth-child(even) {
  margin-top: 15px;
}

@media screen and (min-width:768px) {

  #visual div.slider {
    display: none;
  }

}

/** ***************************************************************************
 * Vet.AIとは
 * ************************************************************************* */

#about div.body {
  background-image: url("../_image/index/about-frame.svg");
  background-position: center top;
  background-size: 145.33% 100%;
  background-repeat: no-repeat;
  position: relative;
  z-index: 0;
}

#about div.frame {
  padding: 15.50% 0 min(28.17%, 100px) 0;
  position: relative;
  z-index: 0;
  transition:
    visibility 0.6s ease-in-out 0.0s,
    opacity 0.6s ease-in-out 0.0s,
    transform 0.6s ease-in-out 0.0s;
  visibility: hidden;
  opacity: 0;
  transform: translateY(100px);
}

#about.displayed div.frame {
  visibility: visible;
  opacity: 1;
  transform: translateX(0);
}

@media screen and (min-width:768px) {

  #about div.body {
    max-width: 1760px;
    background: none;
  }

  #about div.frame {
    margin-left: 7.56%;
    margin-right: 35%;
    padding: min(8.33vw, 160px) min(6.25vw, 120px) min(9.38vw, 180px) min(9.38vw, 180px);
    background-image: url("../_image/index/about-frame.svg");
    background-position: left top;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: relative;
    z-index: 0;
  }

}

/**
 * タイトル
 */

#about .section-title {
  width: fit-content;
  margin-bottom: 30px;
  line-height: 1.3;
  font-size: 1.52em;
  font-weight: 500;
  position: relative;
  z-index: 0;
}

/* ？マーク */
#about .section-title::before {
  content: '';
  width: 20px;
  height: 30px;
  background:
    url("../_image/index/icon-question.png")
    0 0 / 100% 100%
    no-repeat;
  position: absolute;
  z-index: 1;
  top: -7px;
  right: -30px;
}

/* 英字 */
#about .section-title::after {
  content: attr(data-en);
  margin-top: 2px;
  color: #af7b69;
  line-height: 1;
  font-size: 0.579em;
  display: block;
}

@media screen and (min-width:768px) {

  #about .section-title {
    margin-bottom: min(2.60vw, 50px);
    font-size: min(2.08vw, 40px);
    transform: rotate(0.03deg);
  }

  /* ？マーク */
  #about .section-title::before {
    width: min(2.76vw, 53px);
    height: min(4.06vw, 78px);
    top: -0.875em;
    right: -1.75em;
  }

  /* 英字 */
  #about .section-title::after {
    margin-top: 5px;
    font-size: 0.35em;
  }

}

/**
 * 内容
 */

/* キャッチコピー */
#about .catchcopy {
  margin-bottom: 30px;
  font-size: 1.32em;
  font-weight: 800;
}

@media screen and (min-width:768px) {

  #about div.content {
    font-size: min(1.09vw, 21px);
    transform: rotate(0.03deg);
  }

  #about .catchcopy {
    margin-bottom: min(2.08vw, 40px);
    font-size: min(1.56vw, 30px);
  }

}

/**
 * Vet.AI を体験する
 */

#about div.button {
  width: 300px;
  transform: translate(-50%, 30px);
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 0;
}

#about div.button a {
  text-decoration: none;
  display: inline-block;
  animation: button-animation 2.0s linear infinite;
}

@media screen and (min-width:768px) {

  #about div.button {
    width: 31.25vw;
    text-align: center;
    transform: translate(-50%, 40%);
  }

}

/**
 * 装飾画像
 */

#about div.decoration {
  width: 26.67%;
  position: absolute;
  z-index: 1;
  top: -10px;
  right: 20px;
  animation: about-decoration 3s infinite ease-in-out 0.0s alternate;
}

@keyframes about-decoration {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-50px);
  }
  100% {
    transform: translateY(0);
  }
}

@media screen and (min-width:768px) {

  #about div.decoration {
    width: min(26.67vw, 512px);
    top: auto;
    left: calc(50% + 10%);
    right: 0;
    bottom: 0;
  }

}

/** ***************************************************************************
 * こんな不安・お悩みありませんか
 * ************************************************************************* */

#question {
  margin-top: 100px;
}

#question div.body {
  padding-bottom: 16%;
  background-image: url("../_image/index/question-frame.svg");
  background-position: left 75% top;
  background-size: 180% 100%;
  background-repeat: no-repeat;
  position: relative;
  z-index: 0;
}

#question div.frame {
  padding: 16.90% 0 0 0;
  position: relative;
  z-index: 0;
  transition:
    visibility 0.6s ease-in-out 0.0s,
    opacity 0.6s ease-in-out 0.0s,
    transform 0.6s ease-in-out 0.0s;
  visibility: hidden;
  opacity: 0;
  transform: translateY(100px);
}

#question.displayed div.frame {
  visibility: visible;
  opacity: 1;
  transform: translateX(0);
}

@media screen and (min-width:768px) {

  #question {
    margin-top: min(10.417vw, 200px);
    padding-top: min(4.17vw, 80px);
  }

  #question div.body {
    max-width: 1800px;
    padding-bottom: 0;
    background: none;
  }

  #question div.frame {
    width: 66.60%;
    padding: 6.82% 8.0% 6.82% 9.94%;
    background-image: url("../_image/index/question-frame.svg");
    background-position: left top;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: relative;
    z-index: 0;
  }

}

/**
 * タイトル
 */

#question .section-title {
  width: 74.65%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 30px;
}

@media screen and (min-width:768px) {

  #question .section-title {
    width: 39.93%;
    position: absolute;
    z-index: 1;
    top: -5.08%;
    right: 0;
  }

}

/**
 * 装飾画像
 */

#question div.decoration [src*="-1"] {
  display: none;
  animation: question-decoration-1 3s infinite ease-in-out 0.0s alternate;
}

@keyframes question-decoration-1 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-25px);
  }
  100% {
    transform: translateY(0);
  }
}

#question div.decoration [src*="-2"] {
  width: 21.13%;
  position: absolute;
  z-index: 1;
  top: -25px;
  right: 40px;
  animation: question-decoration-2 3s infinite ease-in-out 0.8s alternate;
}

@keyframes question-decoration-2 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-25px);
  }
  100% {
    transform: translateY(0);
  }
}

#question div.decoration [src*="-3"] {
  display: none;
}

@media screen and (min-width:768px) {

  #question div.decoration [src*="-1"] {
    width: 15.91%;
    display: block;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 12.50%;
  }

  #question div.decoration [src*="-2"] {
    width: 19.55%;
    padding-top: 8.24%;
    top: 0;
    right: 9.66%;
  }

  #question div.decoration [src*="-3"] {
    width: 15.91%;
    padding-top: 33.53%;
    display: block;
    position: absolute;
    z-index: 1;
    top: 0;
    right: 18.75%;
  }

}

/** ***************************************************************************
 * いつでも、どこでも、なんどでも、相談OK
 * ************************************************************************* */

#answer {
  position: relative;
  z-index: 0;
}

#answer::before {
  content: '';
  width: 100%;
  padding-bottom: 19.47%;
  background-image: url("../_image/index/answer-decoration-1.png");
  background-position: center top;
  background-size: 111.2% auto;
  background-repeat: no-repeat;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
}

#answer div.body {
  margin-top: 28.80vw;
  background-image: url("../_image/index/answer-frame-sp.svg");
  background-position: left 65.22% top;
  background-position: left 70% top;
  background-size: auto 100%;
  background-repeat: no-repeat;
  position: relative;
  z-index: 0;
}

#answer div.frame {
  padding: 12.68% 0 38% 0;
  position: relative;
  z-index: 0;
  transition:
    visibility 0.6s ease-in-out 0.5s,
    opacity 0.6s ease-in-out 0.5s,
    transform 0.6s ease-in-out 0.5s;
  visibility: hidden;
  opacity: 0;
  transform: translateY(100px);
}

#answer.displayed div.frame {
  visibility: visible;
  opacity: 1;
  transform: translateX(0);
}

@media screen and (min-width:768px) {

  #answer::before {
    content: none;
  }

  #answer div.body {
    max-width: 1760px;
    margin-top: min(15.63vw, 300px);
    padding-top: min(5.21vw, 100px);
    background: none;
  }

  #answer div.frame {
    margin-left: 10.76%;
    margin-right: 7.56%;
    padding: 11.63% 11.05% 16% 4.65%;
    background-image: url("../_image/index/answer-frame-pc.svg");
    background-position: left top;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: relative;
    z-index: 0;
  }

}

/**
 * Vet.AIなら・・・
 */

#answer div.answer {
  width: 88.17%;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  z-index: 1;
  top: -28.80vw;
  left: 50%;
  transition: transform 0.6s ease-in-out 0.0s;
  transform: translateX(-50%) scale(0);
}

#answer.displayed div.answer {
  transform: translateX(-50%) scale(100%);
}

@media screen and (min-width:768px) {

  #answer div.answer {
    width: min(47.60vw, 914px);
    transform: translate(-50%, -100%) scale(0);
    top: 0;
  }

  #answer.displayed div.answer {
    transform: translate(-50%, -100%) scale(100%);
  }

}

/**
 * タイトル
 */

#answer .section-title {
  width: 46.20%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 30px;
}

@media screen and (min-width:768px) {

  #answer .section-title {
    width: min(38.02vw, 730px);
    position: absolute;
    z-index: 1;
    top: -6%;
    left: 26.5%;
  }

}

/**
 * 内容
 */

#answer div.contents div.item {
  position: relative;
  z-index: 0;
}

#answer div.contents div.item ~ div.item {
  margin-top: 20px;
  padding-top: 30px;
  border-top: 2px dashed #fff;
}

@media screen and (min-width:768px) {

  #answer div.contents div.item ~ div.item {
    margin-top: min(2.60vw, 50px);
    padding-top: min(2.60vw, 50px);
    border-top: 2px dashed #fff;
  }

  #answer div.contents div.item-1 {
    padding-left: min(4.69vw, 90px);
  }

  #answer div.contents div.item-2 {
    padding-left: min(6.77vw, 130px);
  }

  #answer div.contents div.item-3 {
    padding-left: min(8.85vw, 170px);
  }

}

/* 番号 */
#answer div.contents div.number {
  margin-bottom: 10px;
  color: #f5e795;
  letter-spacing: 2px;
  line-height: 1;
  font-size: 3em;
  font-weight: 800;
  text-align: center;
}

@media screen and (min-width:768px) {

  #answer div.contents div.number {
    margin-bottom: 0;
    text-align: left;
    transform: translateY(-50%);
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 0;
  }

  #answer div.contents div.number::before {
    content: '';
    width: 146px;
    height: 72px;
    background-image: url("../_image/index/answer-decoration-4.png");
    background-position: left top;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    z-index: 1;
    top: calc(50% - 36px);
    left: -160px;
  }

  /* どんな相談も、いつでも即時回答 */
  #answer div.contents div.item-1 {
    width: 70.48%;
  }

  #answer div.contents div.item-1 div.number {
    font-size: min(2.60vw, 50px);
  }

  /* あなたのペットのためだけのアドバイス */
  #answer div.contents div.item-2 {
    width: 70.48%;
    margin-left: min(9.38vw, 180px);
  }

  #answer div.contents div.item-2 div.number {
    font-size: min(3.90vw, 75px);
  }

  /* 様々なペットに対応 */
  #answer div.contents div.item-3 {
    width: 70.48%;
    margin-left: min(18.75vw, 360px);
  }

  #answer div.contents div.item-3 div.number {
    font-size: min(5.73vw, 110px);
  }

}

/* タイトル */
#answer div.contents .content-title {
  margin-bottom: 15px;
  font-size: 1.32em;
  font-weight: 800;
  text-align: center;
  transform: rotate(0.03deg);
}

@media screen and (min-width:768px) {

  #answer div.contents .content-title {
    margin-bottom: min(1.04vw, 20px);
    font-size: min(1.56vw, 30px);
    text-align: left;
  }

}

/* テキスト */
#answer div.contents div.text {
  text-align: center;
  transform: rotate(0.03deg);
}

#answer div.contents div.text .memo {
  margin-top: 0;
  font-size: 0.88em;
}

@media screen and (min-width:768px) {

  #answer div.contents div.text {
    font-size: min(1.09vw, 21px);
    text-align: left;
  }

}

/**
 * 装飾画像
 */

/* あなたのペットのためだけのアドバイス */
#answer div.item-2 div.decoration {
  width: 39.15%;
  position: absolute;
  z-index: 1;
  top: -10px;
  right: 0;
  animation: item-2-decoration 3s infinite ease-in-out 0.0s alternate;
}

@keyframes item-2-decoration {
  0% {
    transform: translateY(0);
  }
  33% {
    transform: translateY(30px);
  }
  66% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0);
  }
}

@media screen and (min-width:768px) {

  #answer div.item-2 div.decoration {
    width: 19.79vw;
    top: min(8.33vw, -160px);
    left: min(45.31vw, 870px);
    right: auto;
  }

}

/* 様々なペットに対応 */
#answer div.item-3 div.decoration {
  width: 17.18%;
  position: absolute;
  z-index: 1;
  top: 20px;
  left: 0;
  animation: item-3-decoration 3s infinite ease-in-out 0.8s alternate;
}

@keyframes item-3-decoration {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-25px);
  }
  100% {
    transform: translateY(0);
  }
}

@media screen and (min-width:768px) {

  #answer div.item-3 div.decoration {
    width: min(16.88vw, 324px);
    top: 0;
    left: min(29.69vw, -570px);
    left: auto;
    right: calc(100% + min(12.5vw, 240px));
  }

}

/**
 * Vet.AI を体験する
 */

#answer div.button {
  width: 300px;
  transform: translate(-50%, 0);
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 0;
}

#answer div.button a {
  text-decoration: none;
  display: inline-block;
  animation: button-animation 2.0s linear infinite;
}

@media screen and (min-width:768px) {

  #answer div.button {
    width: 31.25vw;
    text-align: center;
  }

}

/** ***************************************************************************
 * 利用者の声
 * ************************************************************************* */

#voice {
  margin-top: 25px;
  padding-top: 25px;
}

@media screen and (min-width:768px) {

  #voice {
    margin-top: min(8.85vw, 170px);
    padding-top: min(1.56vw, 30px);
  }

  #voice div.body {
    max-width: 1380px;
  }

}

/**
 * タイトル
 */

#voice .section-title {
  width: 39.44%;
  margin: 0 auto 35px;
  transition:
    visibility 0.6s ease-in-out 0.0s,
    opacity 0.6s ease-in-out 0.0s,
    transform 0.6s ease-in-out 0.0s;
  visibility: hidden;
  opacity: 0;
  transform: translateY(100px);
}

#voice.displayed .section-title {
  visibility: visible;
  opacity: 1;
  transform: translateX(0);
}

@media screen and (min-width:768px) {

  #voice .section-title {
    width: 19.78%;
    margin: 0 auto min(2.34vw, 45px);
  }

}

/**
 * 内容
 */

#voice div.contents div.item {
  padding: 35px 7.04% 70px;
  background-image: url("../_image/index/voice-frame-sp.svg");
  background-position: left top;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: relative;
  z-index: 0;
  transition:
    visibility 0.6s ease-in-out 0.0s,
    opacity 0.6s ease-in-out 0.0s,
    transform 0.6s ease-in-out 0.0s;
  visibility: hidden;
  opacity: 0;
  transform: translateY(100px);
}

#voice div.contents div.item.displayed {
  visibility: visible;
  opacity: 1;
  transform: translateX(0);
}

#voice div.contents div.item:nth-child(1) {
  transition-delay: 0.5;
}

#voice div.contents div.item:nth-child(2) {
  transition-delay: 0.5;
}

#voice div.contents div.item:nth-child(3) {
  transition-delay: 0.5;
}

#voice div.contents div.item ~ div.item {
  margin-top: 120px;
}

@media screen and (min-width:768px) {

  #voice div.contents div.item {
    padding: min(4.69vw, 90px) 12.70% min(11.46vw, 220px);
    background-image: url("../_image/index/voice-frame-pc.svg");
  }

  #voice div.contents div.item ~ div.item {
    margin-top: 14.58vw;
  }

}

/**
 * テキスト
 */

#voice div.item div.text {
  font-size: 0.92em;
  transform: rotate(0.03deg);
  position: relative;
  z-index: 0;
}

#voice div.item div.text::before {
  content: '';
  width: 95px;
  height: 60px;
  background-position: left top;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: absolute;
  z-index: 1;
  top: -80px;
  left: 0;
}

#voice div.item:nth-child(odd) div.text::before {
  background-image: url("../_image/index/voice-decoration-1.png");
}

#voice div.item:nth-child(even) div.text::before {
  background-image: url("../_image/index/voice-decoration-2.png");
}

@media screen and (min-width:768px) {

  #voice div.item div.text {
    margin-bottom: min(2.08vw, 40px);
    font-size: min(1.09vw, 21px);
  }

  #voice div.item div.text::before {
    width: min(10.10vw, 194px);
    height: min(6.25vw, 120px);
    top: 0;
    left: auto;
    right: calc(100% + 15px);
  }

}

/**
 * 利用者の声
 */

#voice div.voice img {
  width: 100%;
}

/**
 * Vet.AI を体験する
 */

#voice div.button {
  width: 300px;
  transform: translate(-50%, 0);
  position: absolute;
  left: 50%;
  bottom: -30px;
}

#voice div.button a {
  text-decoration: none;
  display: inline-block;
  animation: button-animation 2.0s linear infinite;
}

@media screen and (min-width:768px) {

  #voice div.button {
    width: 31.25vw;
    text-align: center;
    transform: translate(-50%, -75%);
    bottom: auto;
    top: 100%;
  }

}

/** ***************************************************************************
 * バナー
 * ************************************************************************* */

#banner {
  margin-top: 80px;
  display: none;
}

#banner div.body {
  max-width: 1070px;
}

#banner div.item ~ div.item {
  margin-top: 15px;
}

@media screen and (min-width:768px) {

  #banner {
    margin-top: min(10.42vw, 200px);
    display: block;
  }

  #banner div.item ~ div.item {
    margin-top: 30px;
  }

}