@charset "UTF-8";
/* CSS Document */
/* common */
body {
  margin: 0;
  padding: 0; }

#container {
  position: relative;
  margin: 0 auto;
  z-index: 5;
  color: #FFF; }

header {
  font-size: 0; }
  header img {
    width: 100%; }

.introduction {
  background: url(images/yogenbg_02.png) no-repeat;
  background-size: cover;
  line-height: 0; }
  .introduction img {
    width: 100%; }

.main {
  background: url(images/yogenbg_03.png) no-repeat;
  background-size: cover;
  line-height: 0; }
  .main img {
    width: 100%; }

.list {
  background: url(images/yogenbg_04.png) no-repeat;
  background-size: cover;
  line-height: 0; }
  .list img {
    width: 100%; }

.frame {
  background: url(images/yogenbg_05.png) no-repeat;
  background-size: cover;
  line-height: 0; }
  .frame img {
    width: 100%; }

.muryou {
  background: url(images/yogenbg_06.png) no-repeat;
  background-size: cover;
  line-height: 0; }
  .muryou img {
    width: 100%; }

.button {
  background: url(images/yogenbg_09.jpg) no-repeat;
  background-size: cover;
  line-height: 0; }
  .button img {
    width: 100%; }

@keyframes move-twink-back {
  from {
    background-position: 0 0; }
  to {
    background-position: -10000px 5000px; } }

@-webkit-keyframes move-twink-back {
  from {
    background-position: 0 0; }
  to {
    background-position: -10000px 5000px; } }

@-moz-keyframes move-twink-back {
  from {
    background-position: 0 0; }
  to {
    background-position: -10000px 5000px; } }

@-ms-keyframes move-twink-back {
  from {
    background-position: 0 0; }
  to {
    background-position: -10000px 5000px; } }

@keyframes move-clouds-back {
  from {
    background-position: 0 0; }
  to {
    background-position: 10000px 0; } }

@-webkit-keyframes move-clouds-back {
  from {
    background-position: 0 0; }
  to {
    background-position: 10000px 0; } }

@-moz-keyframes move-clouds-back {
  from {
    background-position: 0 0; }
  to {
    background-position: 10000px 0; } }

@-ms-keyframes move-clouds-back {
  from {
    background-position: 0; }
  to {
    background-position: 10000px 0; } }

.stars, .twinkling, .clouds {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: block; }

.stars {
  background: #000 url(images/star.png) repeat top center;
  z-index: 0;
  background-attachment: fixed; }

.twinkling {
  background: transparent url(images/twinkle.png) repeat top center;
  z-index: 1;
  -moz-animation: move-twink-back 200s linear infinite;
  -ms-animation: move-twink-back 200s linear infinite;
  -o-animation: move-twink-back 200s linear infinite;
  -webkit-animation: move-twink-back 200s linear infinite;
  animation: move-twink-back 200s linear infinite; }

footer {
  text-align: center;
  padding: 10px; }
  footer a {
    color: #fff;
    font-size: 0.8rem; }

/* PC表示用 */
@media screen and (min-width: 640px) {
  body {
    width: 640px;
    margin: auto; } }