@charset "UTF-8";

/*
Theme Name: yawapro_theme
Author: nchichi_net
Description: original theme
version: 1.0.0
*/
html {
  margin: 0;
  padding: 0;
  font-size: 62.5%;
}

.wrap {
  overflow: hidden;
}

body {
  font-family: 'DotGothic16', sans-serif;
  font-size: 1.6rem;
  line-height: 2.1;
  color: #FFF;
  margin: 0;
  padding: 0;
  text-align: center;
  background-color: #009DFF;
}

main {}

.yama {
  overflow: hidden;
  position: relative;
  top: 50px;
  /* height: 100vh; */

}

.yama::before {
  content: '';
  font-family: 'shape divider from ShapeDividers.com';
  position: absolute;
  z-index: 3;
  pointer-events: none;
  background-repeat: no-repeat;
  bottom: -0.1vw;
  left: -0.1vw;
  right: -0.1vw;
  top: -0.1vw;
  background-size: 115% 57px;
  background-position: 50% 0%;
  background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100.8 22.4" preserveAspectRatio="none"><path fill="%23009dff" d="M101 22L94 8 84 18 76 7l-9 9-7-15-10 17-8-16-8 9-9 11-8-20-9 14-8 6V0h101z"/></svg>');
}

@media (min-width:2100px) {
  .yama::before {
    background-size: 115% calc(2vw + 57px);
  }
}


.yawafield {
  /* 親フィールド */
  position: relative;
  height: 100vh;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-color: #FFF;
  top: -50px;
}

.yawapro_ship {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.yawapro_ship img {
  width: 120%;
}

.yawapro_ship img {
  animation-name: ship;
  /* アニメーション名の指定 */
  animation-delay: 0s;
  /* アニメーションの開始時間指定 */
  animation-duration: 3s;
  /* アニメーション動作時間の指定 */
  animation-timing-function: ease-in-out;
  /* アニメーションの動き指定（徐々に早く）*/
  animation-iteration-count: infinite;
}

@keyframes ship {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-30px);
  }

  100% {
    transform: translateY(0);
  }
}

.kage {
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.kage img {
  width: 70%;
}

.tree1 {
  position: relative;
  left: 10%;
  -webkit-transform: translate(-60%, -50%);
  transform: translate(-60%, -50%);
  top: 55%;
  /* bottom: 0px; */
}

.tree2 {
  position: relative;
  left: 30%;
  -webkit-transform: translate(-60%, -50%);
  transform: translate(-60%, -50%);
  top: 60%;
  /* bottom: 0px; */
}

.tree3 {
  position: relative;
  left: 80%;
  -webkit-transform: translate(-60%, -50%);
  transform: translate(-60%, -50%);
  top: 55%;
  /* bottom: 0px; */
}

.tree4 {
  position: relative;
  left: 70%;
  -webkit-transform: translate(-60%, -50%);
  transform: translate(-60%, -50%);
  top: 60%;
  /* bottom: 0px; */
}

.tree1 img {
  position: absolute;
  width: 25%;
  transition: 0.1s;
}

.tree1:hover img:nth-of-type(2) {
  opacity: 0;
}

.tree2 img {
  position: absolute;
  width: 18%;
  transition: 0.1s;
}

.tree2:hover img:nth-of-type(2) {
  opacity: 0;
}

.tree3 img {
  position: absolute;
  width: 23%;
  transition: 0.1s;
}

.tree3:hover img:nth-of-type(2) {
  opacity: 0;
}

.tree4 img {
  position: absolute;
  width: 18%;
  transition: 0.1s;
}

.tree4:hover img:nth-of-type(2) {
  opacity: 0;
}

.nchituko {
  position: relative;
  left: 60%;
  -webkit-transform: translate(-60%, -50%);
  transform: translate(-60%, -50%);
  top: 83%;
  /* bottom: 0px; */
}

.nchituko img {
  position: absolute;
  width: 15%;
  transition: 0.1s;
}

.nchituko:hover img:nth-of-type(2) {
  opacity: 0;
}

.nchituko img:hover {
  animation: rumble 0.1s linear infinite;
}

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

  12.5% {
    transform: rotate(0.4deg) translate(1px, -1px);
  }

  25% {
    transform: rotate(0.8deg) translate(0px, 1px);
  }

  37.5% {
    transform: rotate(0.4deg) translate(-1px, 0);
  }

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

  62.5% {
    transform: rotate(-0.4deg) translate(1px, 0);
  }

  75% {
    transform: rotate(-0.8deg) translate(0, 1px);
  }

  87.5% {
    transform: rotate(-0.4deg) translate(-1px, -1px);
  }

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

#news p {
  font-size: 5rem;
}