@charset "utf-8";


body {
  background-color: #ffd2f6;
  background-image: url(../img/heart_kira2.png);
  background-repeat: repeat;
  background-size: 460px;
  font-family: "DotGothic16", sans-serif;
}

div.top {
  text-align: end;
  margin-top: 20px;
}

p {
  font-size: 0.7rem;
  text-align: end;
  margin: 0;
}

h1 {
  font-size: 0.8rem;
  font-weight: normal;
  background-color: #ff379b;
  text-align: center;
  width: 85%;
  margin: 0 auto;
}


div.image {
  margin-bottom: 30px;
}

div img {
  margin: 0 auto;
  padding-top: 20px;
  image-rendering: pixelated;
}

dt {
  background-color: #ff379b;
  text-align: start;
  font-size: 1.2rem;
  width: 90%;
  margin: 0 auto;
}

dd {
  text-align: start;
  padding: 70px 0;
  width: 90%;
  font-size: 0.9rem;
  margin: 0 auto;
  }

  dd span {
    color: #ffd2f6;
  }

  main {
    width: 80%;
    margin: 0 auto;
  }
  

  div.friend {
    border-top: 4px solid #ff379b;
    border-bottom: 4px solid #ff379b;
    font-size: 1.1rem;
    text-align: center;
    width: 90%;
    margin: 0 auto;
  }
  div.other {
    border-bottom: 4px solid #ff379b;
    font-size: 1.1rem;
    text-align: center;
    width: 90%;
    margin: 0 auto;
  }

  div.access {
    border-bottom: 4px solid #ff379b;
    font-size: 1.1rem;
    width: 90%;
    margin: 0 auto;
  }

  div.access p {
    font-size: 1.1rem;
    text-align: center;
  }

  a.rank {
    display: block;
    background-image: url(../img/button.png);
    background-size: cover;
    width: 230px;
    line-height: 40px;
    margin: 0 auto;
    font-size: 0.8rem;
    text-align: center;
  }

  small {
    font-size: 0.6rem;
    margin: 0 auto;
    display: block;
    text-align: center;
  }

  button {
    display: block;
    font-size: 0.8rem;
    margin: 3px;
  }

  footer {
    padding-bottom: 30px;
  }