@charset "utf-8";

#profile {
  margin: 50px 0 50px 360px;
  float: left;
}

.text {
  width: 480px;
  background-color: #f7f7f4;
  border-radius: 10px;
  padding: 40px 40px;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-size: 11px;
  letter-spacing: 1.6px;
  color: #301d00;
  line-height: 20px;
}

.portrait {
  width: 200px;
  margin-top: 10px;
  border-radius: 20px;
  mix-blend-mode: multiply;
}

.gallery {
  width: 450px;
  margin-top: 10px;
  border-radius: 20px;
  mix-blend-mode: multiply;
}

.about {
  clear: both;
}

h1 {
  font-size: 16px;
}

h2 {
  font-size: 13px;
}

p1 {
  font-size: 10px;
  line-height: 24px;
}

p2 {
  font-size: 3px;
  line-height: 8px;
}

a {
  font-size: 3px;
  text-shadow: 1px 2px 3px #909090;
  text-decoration: none;
  color: #301d00;
}


.about,
.contact,
.portrait {
  animation: fadeIn 3.0s ease 0s 1 normal;
  -webkit-animation: fadeInimage 3.0s ease 0s 1 normal;
}

@keyframes fadeInimage {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

.icon480 {
  display: none;
}

.btn2 {
  display: none;
}


/* スマホ用CSS */
@media screen and (max-width: 480px) {

  #profile {
    margin: 30px 20px 50px 20px;
  }

  .text {
    width: auto;
    padding: 25px 25px;
    font-size: 12px;
    letter-spacing: 2.6px;
    line-height: 26px;
  }

  .contact {
    display: none;
  }

  .about {
    width: 100%;
  }

  .portrait {
    width: 150px;
    border-radius: 10px;
    margin: 10px 10px 0px 0px;
  }

  .gallery {
  width: 290px;
  margin-top: 10px;
  border-radius: 20px;
  mix-blend-mode: multiply;
}

  h1 {
    font-size: 20px;
    margin: 10px 0;
  }

  h2 {
    font-size: 16px;
    margin: 10px 0;
  }

  p1 {
    font-size: 12px;
    line-height: 26px;
  }
}