@charset "UTF-8";
/* CSS Document */
/***************************************************
 * Generated by SVG Artista on 9/25/2021, 9:55:34 PM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/
.menu-btn {
    position: fixed;
    top: 10px;
    right: 10px;
    display: flex;
    height: 60px;
    width: 60px;
    justify-content: center;
    align-items: center;
    z-index: 90;
    background-color: #eaff8b;
}
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
    content: '';
    display: block;
    height: 3px;
    width: 25px;
    border-radius: 3px;
    background-color: #bc9264;
    position: absolute;
}
.menu-btn span:before {
    bottom: 8px;
}
.menu-btn span:after {
    top: 8px;
}

#menu-btn-check:checked ~ .menu-btn span {
    background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
}
#menu-btn-check:checked ~ .menu-btn span::before {
    bottom: 0;
    transform: rotate(45deg);
}
#menu-btn-check:checked ~ .menu-btn span::after {
    top: 0;
    transform: rotate(-45deg);
}

#menu-btn-check {
    display: none;
}

.menu-content {
    width: 10%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 10;
    z-index: 80;
    background-color: #eaff8b;
}
.menu-content ul {
    padding: 60px 30px  0;
}
.menu-content ul li {
    border-bottom: solid 1px #bc9264;
    list-style: none;
}
.menu-content ul li a {
    display: block;
    width: 100%;
    font-size: 23px;
    box-sizing: border-box;
	font-family: Arial, Helvetica, "sans-serif";
	font-weight: bold;
    color: #000;
    text-decoration: none;
    padding: 9px 15px 10px 0;
    position: relative;
}

.menu-content {
    width: 250px;
    height: 100%;
    position: fixed;
    top: 0;
    left: 99%;/*leftの値を変更してメニューを画面外へ*/
    z-index: 80;
    background-color: #eaff8b;
    transition: all 0.5s;/*アニメーション設定*/
}

#menu-btn-check:checked ~ .menu-content {
    left: 85%;/*メニューを画面内へ*/
}


.gyunyuwrap
{
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 100px;
	
	}
.aboutwrap
{
	width:1000px;
	height:1000px;
}


body
{
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	perspective: 1600px;
    overflow: hidden;
}
/*ホバーアニメ*/

.gyunyuwrap:hover 
{
  animation-duration: 3s;
  animation-name: slidein;
  animation-iteration-count: infinite;
  animation-direction: alternate;
　transform-style: preserve-3d;
	
}

@keyframes slidein {
  0% {
transform: translateZ(0px) translateY(0px)translateX(0px)rotatex( 0deg)rotatey( 0deg);
  }

  25% {
transform: translateZ(60px)translateY(60px)translateX(10px)rotatex(5deg)rotatey( 5deg);
  }
	 50% {
transform: translateZ(0px)translateY(0px)translateX(0px);
  }
	  75% {
transform: translateZ(-10px)translateY(-10px)translateX(-10px);
  }
}

.gyunyuwrap:hover 
{
  animation-duration: 3s;
  animation-name: slidein;
  animation-iteration-count: infinite;
  animation-direction: alternate;
　transform-style: preserve-3d;
	
}

@-webkit-keyframes animate-svg-fill-1 {
  0% {
    fill: transparent
  }

  100% {
    fill: rgb(188, 146, 100);
  }
}

@keyframes animate-svg-fill-1 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(188, 146, 100);
  }
}

.svg-elem-1 {
  -webkit-animation: animate-svg-fill-1 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.1s both;
          animation: animate-svg-fill-1 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.1s both;
}


.gyu:hover {
  animation-duration: 3s;
  animation-name: animate-svg-fill-1b;
  animation-iteration-count: infinite;
  animation-direction: alternate;
　transform-style: preserve-3d;
}

@keyframes animate-svg-fill-1b {
    0% {
transform: translateZ(0px) translateY(0px)translateX(0px)rotatex( 0deg)rotatey( 0deg);
  }

	  75% {
transform: translateZ(-10px)translateY(-10px)translateX(-10px)rotate3d(5deg);
  }
}


@-webkit-keyframes animate-svg-fill-2 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(55, 56, 56);
  }
}

@keyframes animate-svg-fill-2 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(55, 56, 56);
  }
}

.svg-elem-2 {
  -webkit-animation: animate-svg-fill-2 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.6s both;
          animation: animate-svg-fill-2 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 0.6s both;
}

@-webkit-keyframes animate-svg-fill-3 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(55, 56, 56);
  }
}

@keyframes animate-svg-fill-3 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(55, 56, 56);
  }
}

.svg-elem-3 {
  -webkit-animation: animate-svg-fill-3 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 1.1s both;
          animation: animate-svg-fill-3 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 1.1s both;
}

@-webkit-keyframes animate-svg-fill-4 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(55, 56, 56);
  }
}

@keyframes animate-svg-fill-4 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(55, 56, 56);
  }
}

.svg-elem-4 {
  -webkit-animation: animate-svg-fill-4 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 1.6s both;
          animation: animate-svg-fill-4 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 1.6s both;
}

@-webkit-keyframes animate-svg-fill-5 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(55, 56, 56);
  }
}

@keyframes animate-svg-fill-5 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(55, 56, 56);
  }
}

.svg-elem-5 {
  -webkit-animation: animate-svg-fill-5 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 2.1s both;
          animation: animate-svg-fill-5 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 2.1s both;
}

@-webkit-keyframes animate-svg-fill-6 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(55, 56, 56);
  }
}

@keyframes animate-svg-fill-6 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(55, 56, 56);
  }
}

.svg-elem-6 {
  -webkit-animation: animate-svg-fill-6 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 2.6s both;
          animation: animate-svg-fill-6 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 2.6s both;
}

@-webkit-keyframes animate-svg-fill-7 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(55, 56, 56);
  }
}

@keyframes animate-svg-fill-7 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(55, 56, 56);
  }
}

.svg-elem-7 {
  -webkit-animation: animate-svg-fill-7 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 3.1s both;
          animation: animate-svg-fill-7 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 3.1s both;
}

@-webkit-keyframes animate-svg-fill-8 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(188, 146, 100);
  }
}

@keyframes animate-svg-fill-8 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(188, 146, 100);
  }
}

.svg-elem-8 {
  -webkit-animation: animate-svg-fill-8 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 3.6s both;
          animation: animate-svg-fill-8 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 3.6s both;
}

@-webkit-keyframes animate-svg-fill-9 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(55, 56, 56);
  }
}

@keyframes animate-svg-fill-9 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(55, 56, 56);
  }
}

.svg-elem-9 {
  -webkit-animation: animate-svg-fill-9 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 4.1s both;
          animation: animate-svg-fill-9 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 4.1s both;
}

@-webkit-keyframes animate-svg-fill-10 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(55, 56, 56);
  }
}

@keyframes animate-svg-fill-10 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(55, 56, 56);
  }
}

.svg-elem-10 {
  -webkit-animation: animate-svg-fill-10 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 4.6s both;
          animation: animate-svg-fill-10 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 4.6s both;
}

@-webkit-keyframes animate-svg-fill-11 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(55, 56, 56);
  }
}

@keyframes animate-svg-fill-11 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(55, 56, 56);
  }
}

.svg-elem-11 {
  -webkit-animation: animate-svg-fill-11 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 5.1s both;
          animation: animate-svg-fill-11 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 5.1s both;
}

@-webkit-keyframes animate-svg-fill-12 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(55, 56, 56);
  }
}

@keyframes animate-svg-fill-12 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(55, 56, 56);
  }
}

.svg-elem-12 {
  -webkit-animation: animate-svg-fill-12 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 5.6s both;
          animation: animate-svg-fill-12 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 5.6s both;
}

@-webkit-keyframes animate-svg-fill-13 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(55, 56, 56);
  }
}

@keyframes animate-svg-fill-13 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(55, 56, 56);
  }
}

.svg-elem-13 {
  -webkit-animation: animate-svg-fill-13 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 6.1s both;
          animation: animate-svg-fill-13 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 6.1s both;
}

@-webkit-keyframes animate-svg-fill-14 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(55, 56, 56);
  }
}

@keyframes animate-svg-fill-14 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(55, 56, 56);
  }
}

.svg-elem-14 {
  -webkit-animation: animate-svg-fill-14 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 6.6s both;
          animation: animate-svg-fill-14 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 6.6s both;
}

@-webkit-keyframes animate-svg-fill-15 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(55, 56, 56);
  }
}

@keyframes animate-svg-fill-15 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(55, 56, 56);
  }
}

.svg-elem-15 {
  -webkit-animation: animate-svg-fill-15 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 7.1s both;
          animation: animate-svg-fill-15 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 7.1s both;
}

@-webkit-keyframes animate-svg-fill-16 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(55, 56, 56);
  }
}

@keyframes animate-svg-fill-16 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(55, 56, 56);
  }
}

.svg-elem-16 {
  -webkit-animation: animate-svg-fill-16 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 7.6s both;
          animation: animate-svg-fill-16 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 7.6s both;
}

@-webkit-keyframes animate-svg-fill-17 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(55, 56, 56);
  }
}

@keyframes animate-svg-fill-17 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(55, 56, 56);
  }
}

.svg-elem-17 {
  -webkit-animation: animate-svg-fill-17 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 8.1s both;
          animation: animate-svg-fill-17 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 8.1s both;
}

@-webkit-keyframes animate-svg-fill-18 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(55, 56, 56);
  }
}

@keyframes animate-svg-fill-18 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(55, 56, 56);
  }
}

.svg-elem-18 {
  -webkit-animation: animate-svg-fill-18 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 8.6s both;
          animation: animate-svg-fill-18 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 8.6s both;
}

@-webkit-keyframes animate-svg-fill-19 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(55, 56, 56);
  }
}

@keyframes animate-svg-fill-19 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(55, 56, 56);
  }
}

.svg-elem-19 {
  -webkit-animation: animate-svg-fill-19 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 9.1s both;
          animation: animate-svg-fill-19 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 9.1s both;
}

@-webkit-keyframes animate-svg-fill-20 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(55, 56, 56);
  }
}

@keyframes animate-svg-fill-20 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(55, 56, 56);
  }
}

.svg-elem-20 {
  -webkit-animation: animate-svg-fill-20 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 9.6s both;
          animation: animate-svg-fill-20 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 9.6s both;
}

@-webkit-keyframes animate-svg-fill-21 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(55, 56, 56);
  }
}

@keyframes animate-svg-fill-21 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(55, 56, 56);
  }
}

.svg-elem-21 {
  -webkit-animation: animate-svg-fill-21 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 10.1s both;
          animation: animate-svg-fill-21 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 10.1s both;
}

@-webkit-keyframes animate-svg-fill-22 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(55, 56, 56);
  }
}

@keyframes animate-svg-fill-22 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(55, 56, 56);
  }
}

.svg-elem-22 {
  -webkit-animation: animate-svg-fill-22 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 10.6s both;
          animation: animate-svg-fill-22 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06) 10.6s both;
}