@font-face {
  font-family: 'yamafont';
  src: url(../font/yamafont.ttf);
}

body {
  font-family: 'yamafont';
}

.bg-telop {
  background-image: url("../images/ura/ura-telop.png"), url("../images/ura/ura-telop.png");
  background-repeat: repeat-x, repeat-x;
  background-size: 10%, 10%;
  animation: moveBg 5s infinite linear;
}

@keyframes moveBg{
    0%    { background-position: 50% 1%, 50% 99%; }
    100%  { background-position: 7% 1%, 93% 99%; }
}

.ura-img-container img {
  width: 80%;
  margin-left: 10%;
  margin-bottom: 40px;
}

.ura h1 {
  width: 100%;
  font-size: 60px;
  text-align: center;
  margin-bottom: 40px;
}

.ura h2 {
  width: 100%;
  background-color: #f08d24;
  padding: 20px;
  margin-top: 0;
  margin-bottom: 20px;
  text-align: center;
}

.hanshin-container {
  margin-bottom: 40px;
}

.hanshin-container img {
  width: 40%;
  float: left;
}

.hanshin-container p {
  line-height: 1.6;
  margin-left: 5%;
  width: 55%;
  float: left;
}

.ura-relation-container img {
  width: 100%;
  margin-bottom: 40px;
}

.play-area {
  position: relative;
  width: 100%;
  margin-bottom: 40px;
}

.play-area:before {
  content: '';
  display: block;
  padding-top: 56.25%; /* 縦横比16:9 */
}

.play-area iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100% !important;
}

.none:hover {
  background-color: #082936!important;
}

@media(max-width: 750px) {
  .ura h1 {
    font-size: 20px;
    margin-top: 80px;
  }

  .hanshin-container img {
    width: 100%;
    margin-bottom: 20px;
  }

  .hanshin-container p {
    width: 100%;
    margin-left: 0;
  }

  .bg-telop {
    background-image: url("../images/ura/ura-telop.png"), url("../images/ura/ura-telop.png");
    background-repeat: repeat-x, repeat-x;
    background-size: 20%, 20%;
  }
}