@charset "UTF-8";

.about {
  padding: 5vw 3vw;
}

.about-inner {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

.about__icon--nanraka {
  width: 100%;
  max-width: 300px;
  border: solid #434343 2px;
  display: block;
  margin: 0 auto;
}

.about__profile--name {
  font-size: 2.2em;
  font-weight: 700;
  text-align: center;
  margin: clamp(15px, 1.5vw, 30px) 0;
}

.about__profile--text {
  text-align: center;
}

.about__sns {
  margin: clamp(30px, 5vw, 50px) 0 clamp(35px, 6vw, 60px);
}

.about__sns p {
  font-size: 1.7em;
  font-weight: bold;
  text-align: center;
  margin-bottom: clamp(7px, 1vw, 15px);
}

.about__sns-icons {
  display: flex;
  justify-content: center;
  gap: clamp(10px, 2vw, 15px);
}

.about__sns-icons img {
  width: 50px;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.about__sns-icons img:hover{
  opacity: 1;
}

.about__history h3 {
  font-size: 1.3em;
  font-weight: bold;
  border-bottom: solid 1px rgb(181, 181, 181);
  padding: 0 0 0.7vw 0.5vw;
}

.about__history ol {
  list-style-type: disc;
  margin: clamp(10px, 2vw, 20px) 0 clamp(30px, 3vw, 50px);
}


@media(max-width: 770px) {
  .about__icon--nanraka {
    max-width: 200px;
  }

  .about__profile--name {
    font-size: 1.5em;
  }

  .about__profile--text {
    font-size: clamp(0.8em, 2vw, 1em);
  }

  .about__sns p {
    font-size: 1.3em;
  }

  .about__sns-icons img {
    width: 35px;
    opacity: 0.8;
  }

  .about__history h3 {
    font-size: 1.1em;
  }

  .about__history ol li {
    font-size: clamp(0.8em, 2vw, 1em);
    margin-bottom: 3px;
  }




}