html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
}

.wrapper {
    height: 100%;
    display: flex;
}

.inner {
    margin-top: auto;
    margin-bottom: auto;
    height: 100%;
    width: 50%;
    text-align: center;
    display: flex;
    justify-content: center; /*左右中央揃え*/
    align-items: center;     /*上下中央揃え*/
}
.fc {
    background-color: #ea7659;
}
.bs {
    background-color: #64a6e3;
}

/* ふわっとエフェクト */
.fadeIn{
    animation-name: fadeInAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

a:link,
a:active,
a:visited,
a:hover {
    transition: 0.4s;
}
a:hover {
    opacity: 0.5;
}



@media screen and (max-width: 480px) {
    .wrapper {
        height: 100%;
        display: block;
    }
    .inner {
        height: 50%;
        width: 100%;
        display: block;
        display: flex;
        justify-content: center; /*左右中央揃え*/
        align-items: center;     /*上下中央揃え*/
    }
}