@charset "UTF-8";

/* =========================================================
   FIRST VIEW 2
========================================================= */

.fv2 {
  position: relative;
  width: 100%;
  /*overflow-x: hidden;*/
  background: #fff;
}

.fv2__stage {
  position: relative;
  width: 100%;
  min-height: min(820px, 75vw);
}

@media screen and (max-width: 767px) {
  .fv2__stage {
    min-height: 130vw;
    max-height: 760px;
  }
}


/* =========================================================
   中央エリア
========================================================= */

.fv2__center {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 4%;
  width: min(48vw, 760px);
  transform: translateX(-50%);
}
@media screen and (max-width: 1200px) {
     .fv2__center {
         width: 60vw;}
}

@media screen and (max-width: 767px) {
  .fv2__center {
    width: 88vw;
    /*bottom: 8%;*/
  }
}

@media screen and (max-width: 480px) {
  .fv2__center {
    width: 94vw;
  }
}


/* =========================================================
   メイン写真
========================================================= */

.fv2__main {
  position: relative;
  width: 82%;
  aspect-ratio: 0.92;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 50% 50% 0 0 / 43% 43% 0 0;
  background: #d6eef7;
}

.fv2__main-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

@media screen and (max-width: 767px) {
  .fv2__main {
    width: 86%;
    aspect-ratio: .88;
  }
}


/* =========================================================
   アーチ
========================================================= */

.fv2__arch {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: -11%;
  width: 100%;
  height: auto;
  transform: translateX(-50%);
  pointer-events: none;
}

@media screen and (max-width: 767px) {
  .fv2__arch {
    top: -8%;
  }
}


/* =========================================================
   キャッチコピー
========================================================= */

.fv2__copy {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 14%;
  width: 90%;
  transform: translateX(-50%);
  text-align: center;
  color: #fff;
}

.fv2__catch {
  margin: 0;
  font-size: clamp(24px, 3vw, 48px);
  line-height: 1.6;
  font-weight: 600;
  letter-spacing: .02em;
  color: #fff;
}

.fv2__name {
  margin-top: 22px;
  font-size: clamp(13px, 1.5vw, 23px);
  font-weight: 600;
  letter-spacing: .02em;
  color: #fff;
}

@media screen and (max-width: 767px) {
  .fv2__copy {
    top: 18%;
  }

  .fv2__catch {
    font-size: clamp(21px, 6vw, 30px);
    line-height: 1.65;
    letter-spacing: .04em;
  }

  .fv2__name {
    margin-top: 12px;
    font-size: 12px;
    letter-spacing: .04em;
  }
}

@media screen and (max-width: 480px) {
  .fv2__copy {
    top: 17%;
  }

  .fv2__catch {
    font-size: 5.7vw;
  }

  .fv2__name {
    font-size: 3vw;
  }
}


/* =========================================================
   アーチ横の植物
========================================================= */

.fv2__plant {
  position: absolute;
  z-index: 7;
  bottom: 2%;
  width: 40%;
  height: auto;
  pointer-events: none;
}

.fv2__plant img {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: center bottom;
}

.fv2__plant--left {
  left: -4%;
}

.fv2__plant--right {
  right: -4%;
}

.fv2__plant--left img {
  animation: fv2PlantLeft 5.5s ease-in-out infinite alternate;
}

.fv2__plant--right img {
  animation: fv2PlantRight 6.5s ease-in-out infinite alternate;
}

@keyframes fv2PlantLeft {
  0% {
    transform: rotate(-1deg);
  }

  50% {
    transform: rotate(2deg) translateX(3px);
  }

  100% {
    transform: rotate(-2deg) translateX(-2px);
  }
}

@keyframes fv2PlantRight {
  0% {
    transform: rotate(1deg);
  }

  50% {
    transform: rotate(-2deg) translateX(-3px);
  }

  100% {
    transform: rotate(2deg) translateX(2px);
  }
}

@media screen and (max-width: 767px) {
  .fv2__plant {
    width: 40%;
  }

  .fv2__plant--left {
    left: -3%;
  }

  .fv2__plant--right {
    right: -3%;
  }
}


/* =========================================================
   左右の木
========================================================= */

.fv2__tree {
  position: absolute;
  z-index: 1;
  bottom: 0;
  pointer-events: none;
}

.fv2__tree img {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: center bottom;
}

.fv2__tree--left {
  left: -1%;
  width: min(30vw, 500px);
}

.fv2__tree--right {
  right: 2%;
  width: min(25vw, 430px);
}

.fv2__tree--left img {
  animation: fv2TreeLeft 11s ease-in-out infinite alternate;
}

.fv2__tree--right img {
  animation: fv2TreeRight 13s ease-in-out infinite alternate;
}

@keyframes fv2TreeLeft {
  0% {
    transform: rotate(-0.6deg);
  }

  50% {
    transform: rotate(1deg);
  }

  100% {
    transform: rotate(-0.8deg);
  }
}

@keyframes fv2TreeRight {
  0% {
    transform: rotate(.8deg);
  }

  50% {
    transform: rotate(-1deg);
  }

  100% {
    transform: rotate(.5deg);
  }
}

@media screen and (max-width: 1200px) {
  .fv2__tree--left {
    left: -5%;
    width: 30vw;
  }

  .fv2__tree--right {
    right: -5%;
    width: 25vw;
  }
}

@media screen and (max-width: 767px) {
  .fv2__tree--left {
    left: -13%;
    width: 45vw;
  }

  .fv2__tree--right {
    right: -15%;
    width: 43vw;
  }
}

@media screen and (max-width: 480px) {
  .fv2__tree--left {
    width: 50vw;
    left: -18%;
  }

  .fv2__tree--right {
    width: 48vw;
    right: -20%;
  }
}


/* =========================================================
   動物共通
========================================================= */

.fv2__animal {
  position: absolute;
  z-index: 2;
  display: block;
  height: auto;
  pointer-events: none;
}


/* =========================================================
   鳥
========================================================= */

.fv2__bird--01 {
  width: clamp(45px, 5vw, 80px);
  left: 24%;
  top: 17%;
  animation: fv2Bird01 6s ease-in-out infinite;
}

.fv2__bird--02 {
  width: clamp(45px, 5vw, 75px);
  right: 28%;
  top: 15%;
  animation: fv2Bird02 7s ease-in-out infinite;
}

.fv2__bird--03 {
  width: clamp(55px, 6vw, 95px);
  left: 26%;
  top: 43%;
  z-index: 2;
  transform-origin: center bottom;
  animation: fv2Bird03 5.5s ease-in-out infinite;
}

@keyframes fv2Bird01 {
  0%,
  100% {
    transform: translate(0, 0) rotate(-2deg);
  }

  50% {
    transform: translate(7px, -10px) rotate(2deg);
  }
}

@keyframes fv2Bird02 {
  0%,
  100% {
    transform: translate(0, 0) rotate(1deg);
  }

  50% {
    transform: translate(-9px, -12px) rotate(-3deg);
  }
}

@keyframes fv2Bird03 {
  0%,
  100% {
    transform: translateY(0) rotate(-1deg);
  }

  50% {
    transform: translateY(-2px) rotate(1deg);
  }
}

@media screen and (max-width: 767px) {
  .fv2__bird--01 {
    width: 10vw;
    left: 8%;
    top: 16%;
  }

  .fv2__bird--02 {
    width: 10vw;
    right: 8%;
    top: 17%;
  }

  .fv2__bird--03 {
    width: 13vw;
    left: 17%;
    top: 44%;
  }
}


/* =========================================================
   蝶々
========================================================= */

.fv2__butterfly-fly {
  position: absolute;
  z-index: 9;
  pointer-events: none;
  perspective: 500px;
}


/* =========================================================
   蝶々1：青
   右側 / 頭は左向き
========================================================= */

.fv2__butterfly-fly--01 {
  right: 23%;
  top: 30%;
  width: clamp(50px, 4.5vw, 45px);
  aspect-ratio: 1 / 1;

  animation: fv2ButterflyFlight01 11s ease-in-out infinite;
  will-change: transform;
}

@media screen and (max-width: 767px) {
  .fv2__butterfly-fly--01 {
    right: 5%;
    top: 32%;
    width: 11vw;
  }
}



/* =========================================================
   蝶々2：黄色
   左側 / 頭は右向き
========================================================= */


.fv2__butterfly-fly--02 {
  left: 21%;
  top: 35%;
  width: clamp(38px, 3.5vw, 58px);
  aspect-ratio: 1 / 1;

  animation: fv2ButterflyFlight02 13s ease-in-out infinite;
  will-change: transform;
}

@media screen and (max-width: 767px) {
  .fv2__butterfly-fly--02 {
    left: 5%;
    top: 35%;
    width: 9vw;
  }
}



/* =========================================================
   蝶全体の向き
========================================================= */

.fv2__butterfly-angle {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.fv2__butterfly-angle--01 {
  transform:
    rotateZ(-40deg)
    rotateX(12deg)
    rotateY(-8deg);
}

.fv2__butterfly-angle--02 {
  transform:
    rotateZ(40deg)
    rotateX(12deg)
    rotateY(8deg);
}


/* =========================================================
   蝶 胴体
========================================================= */

.fv2__butterfly-body {
  position: absolute;
  z-index: 5;
  left: 51%;
  top: 55%;
  width: 5%;
  height: auto;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  pointer-events: none;
}


/* =========================================================
   蝶 羽
========================================================= */

.fv2__butterfly-wing {
  position: absolute;
  top: 50%;
  height: auto;
  backface-visibility: visible;
  transform-style: preserve-3d;
  pointer-events: none;
}

.fv2__butterfly-wing--left {
  z-index: 3;
  right: 49%;
  top: 50%;
  width: 25%;
  transform-origin: right center;
  animation: fv2ButterflyWingLeft .38s ease-in-out infinite alternate;
}

.fv2__butterfly-wing--right {
  z-index: 2;
  left: 53%;
  top: 50%;
  width: 25%;
  transform-origin: left center;
  animation: fv2ButterflyWingRight .38s ease-in-out infinite alternate;
}

@keyframes fv2ButterflyWingLeft {
  0% {
    transform:
      translateY(-50%)
      rotateZ(-2deg)
      rotateY(8deg);
  }

  100% {
    transform:
      translateY(-50%)
      rotateZ(2deg)
      rotateY(68deg);
  }
}

@keyframes fv2ButterflyWingRight {
  0% {
    transform:
      translateY(-50%)
      rotateZ(2deg)
      rotateY(-8deg);
  }

  100% {
    transform:
      translateY(-50%)
      rotateZ(-2deg)
      rotateY(-68deg);
  }
}


/* =========================================================
   青い蝶の飛行
========================================================= */

@keyframes fv2ButterflyFlight01 {

  0% {
    transform:
      translate(0, 0)
      rotate(0deg);
  }

  10% {
    transform:
      translate(-25px, -20px)
      rotate(-4deg);
  }

  22% {
    transform:
      translate(-60px, -35px)
      rotate(-8deg);
  }

  34% {
    transform:
      translate(-90px, -10px)
      rotate(-2deg);
  }

  46% {
    transform:
      translate(-75px, 30px)
      rotate(5deg);
  }

  58% {
    transform:
      translate(-35px, 50px)
      rotate(8deg);
  }

  70% {
    transform:
      translate(15px, 35px)
      rotate(4deg);
  }

  82% {
    transform:
      translate(35px, 5px)
      rotate(-3deg);
  }

  92% {
    transform:
      translate(20px, -18px)
      rotate(-5deg);
  }

  100% {
    transform:
      translate(0, 0)
      rotate(0deg);
  }
}


/* =========================================================
   黄色い蝶の飛行
========================================================= */

@keyframes fv2ButterflyFlight02 {

  0% {
    transform:
      translate(0, 0)
      rotate(0deg);
  }

  12% {
    transform:
      translate(25px, -15px)
      rotate(4deg);
  }

  24% {
    transform:
      translate(55px, -40px)
      rotate(7deg);
  }

  36% {
    transform:
      translate(85px, -25px)
      rotate(3deg);
  }

  48% {
    transform:
      translate(95px, 10px)
      rotate(-3deg);
  }

  60% {
    transform:
      translate(65px, 40px)
      rotate(-7deg);
  }

  72% {
    transform:
      translate(25px, 55px)
      rotate(-5deg);
  }

  84% {
    transform:
      translate(-15px, 30px)
      rotate(3deg);
  }

  93% {
    transform:
      translate(-20px, 5px)
      rotate(5deg);
  }

  100% {
    transform:
      translate(0, 0)
      rotate(0deg);
  }
}

/* =========================================================
   うさぎ
========================================================= */

.fv2__rabbit {
  z-index: 9;
  transform-origin: center bottom;
}


/* 左下の白いうさぎ */
.fv2__rabbit--left {
  width: clamp(40px, 7vw, 85px);
  left: 24%;
  bottom: 3%;
  animation: fv2RabbitLeft 5s ease-in-out infinite;
}

@media screen and (max-width: 767px) {
  .fv2__rabbit--left {
    /*width: 15vw;*/
    left: 7%;
    /*bottom: 8%;*/
  }
}

@media screen and (max-width: 480px) {
  .fv2__rabbit--left {
    /*width: 16vw;*/
  }
}


/* 右下 茶色いうさぎ */
.fv2__rabbit--brown {
  width: clamp(48px, 5vw, 66px);
  right: 22.5%;
  bottom: .5%;
  z-index: 9;
  animation: fv2RabbitBrown 5.8s ease-in-out infinite;
}

@media screen and (max-width: 767px) {
  .fv2__rabbit--brown {
    width: 10vw;
    right: 17%;
    /*bottom: 6%;*/
  }
}


/* 右下 白いうさぎ */
.fv2__rabbit--white {
  width: clamp(40px, 4.8vw, 72px);
  right: 16%;
  bottom: .5%;
  z-index: 31;
  animation: fv2RabbitWhite 6.3s ease-in-out infinite;
}

@media screen and (max-width: 767px) {
  .fv2__rabbit--white {
   /* width: 10vw;*/
    right: 5%;
    /*bottom: 5.5%;*/
  }
}


@keyframes fv2RabbitLeft {
  0%,
  100% {
    transform: translateY(0) rotate(0);
  }

  50% {
    transform: translateY(-4px) rotate(1deg);
  }
}

@keyframes fv2RabbitBrown {
  0%,
  100% {
    transform: translateY(0) rotate(0);
  }

  50% {
    transform: translateY(-2px) rotate(-1deg);
  }
}

@keyframes fv2RabbitWhite {
  0%,
  100% {
    transform: translateY(0) rotate(0);
  }

  50% {
    transform: translateY(-3px) rotate(1deg);
  }
}


/* =========================================================
   鹿
========================================================= */

.fv2__deer {
  transform-origin: center bottom;
}


/* 大きい鹿 */
.fv2__deer--01 {
  width: clamp(145px, 15vw, 240px);
  right: 14%;
  bottom: 1.5%;
  z-index: 9;
  animation: fv2Deer01 7s ease-in-out infinite;
}

@media screen and (max-width: 1200px) {
    .fv2__deer--01 {
        right: 8%
    }
}

@media screen and (max-width: 767px) {
  .fv2__deer--01 {
    width: 28vw;
    right: 0;
    bottom: 0;
  }
}

@media screen and (max-width: 480px) {
  .fv2__deer--01 {
    width: 30vw;
  }
}


/* 小さい鹿 */
.fv2__deer--02 {
  width: clamp(75px, 8vw, 125px);
  right: 24%;
  bottom: 1%;
  z-index: 9;
  animation: fv2Deer02 7.8s ease-in-out infinite;
}

@media screen and (max-width: 767px) {
  .fv2__deer--02 {
    width: 15vw;
    right: 21%;
    /*bottom: 7%;*/
  }
}

@media screen and (max-width: 480px) {
  .fv2__deer--02 {
    width: 16vw;
  }
}


@keyframes fv2Deer01 {
  0%,
  100% {
    transform: translateY(0) rotate(0);
  }

  50% {
    transform: translateY(-2px) rotate(.4deg);
  }
}

@keyframes fv2Deer02 {
  0%,
  100% {
    transform: translateY(0) rotate(0);
  }

  50% {
    transform: translateY(-2px) rotate(-.5deg);
  }
}


/* =========================================================
   手前の芝生
========================================================= */

.fv2__grass {
  position: absolute;
  z-index: 9;
  left: 0;
  bottom: -3%;
  width: 100%;
  display: flex;
  pointer-events: none;
}

.fv2__grass div {
  display: block;
  width: 100%;
  height: auto;
}
.fv2__grass div img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    vertical-align: top
}


@media screen and (min-width: 768px) {
    .fv2__grass{
         bottom: -10%;
    }
}

@media (max-width:1400px){
    .fv2__grass div:first-child{
       display: none
    }
}
@media screen and (min-width: 1400px) {
    .fv2__grass{
        bottom: -5%
    }
    .fv2__grass div {
        width: 50%;
    } 
}
@media screen and (min-width: 2000px) {
    .fv2__grass{
        bottom: -10%
    }
}

/* =========================================================
   動きを減らす設定
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .fv2 *,
  .fv2 *::before,
  .fv2 *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

}