@charset "utf-8";

html{
  min-height: 100%;
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
  line-height: 2;
  font-family: sans-serif;
}

.home {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 55%;
  text-align: center;
}

.home h3 {
  line-height: 1;
}

.fc-gray {
  color: #aaa;
}

.header img {
  background-color: #fff;
  width: 12%;
  opacity: 0.2;
  transition: .5s;
  padding: 5px 10px;
}

.header img:hover {
  opacity: 1;
}

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

.item h3 {
  font-size: 10rem;
  text-align: center;
}

.item p {
  display: block;
  line-height: 1.5;
  text-align: left;
}

.fc-white {
  color: #fff;
}

.ff-if {
  font-family: 'Indie Flower', cursive;
}

.ff-ko {
  font-family: 'Klee One', cursive;
}

.fade {
  opacity: 0;
  transition: opacity 10s;
}

.fade.view {
  opacity: 1;
}


@media screen and (max-width: 600px) {
  .home {
    width: 70%;
  }

  .home h1 {
    line-height: .5;
  }

  .home h3 {
    font-size: 1.5rem;
  }

  .item h3 {
    font-size: 8rem;
  }

  .item p {
    font-size: 1.5rem;
  }
}