@charset "utf-8";

/* ページ間のフェード演出に関するCSS */
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color:#fff;  /* 背景カラー */
  z-index: 9999;  /* 一番手前に */
  pointer-events: none;  /* 他の要素にアクセス可能にするためにポインターイベントは無効に */
  opacity: 0;  /* 初期値 : 透過状態 */
  -webkit-transition: opacity 0.8s ease;  /* アニメーション時間は 0.8秒 */
  transition: opacity 0.8s ease;
}

body.fadeout::after {
  opacity: 1;
}

#profile-back {
  position: absolute;
  z-index: 9;
  top: 0;
  left: 0;
  opacity: 0.8;
  width: 100%;
  height: 100%;
  background-image: url(../img/profile-back.jpg);
  background-size: cover;
  filter: blur(2px);
}

.profile-container {
  position: relative;
  z-index: 999;
  /* width: 60vw; */
  /* height: 100%; */
  text-align: center;
  line-height: 20px;
}

#name {
  background-color: rgba(255,255,255,0.4);
  position: relative;
  z-index: 999;
  margin: 120px 30px;
  padding: 30px 30px;
  /* width: 60vw; */
  /* height: 100%; */
  text-align: left;
  line-height: 20px;
}

.profile-container img {
  height: 200px;
  display: inline-block;
}

#minori {
  font-size:30px;
}

#aho {
  font-size: 16px;
  color: #32CCFF;
}

#born {
  font-size:12px;
}

.sns-icon {
  display: inline-block;
  margin-right: 10px;
}

.sns-icon img {
  height: 30px;
  -webkit-filter: grayscale(1);
  filter: gray;
  filter: grayscale(1);
  transition: 0.5s ease;
}

.sns-icon img:hover {
  -webkit-filter: grayscale(0);
  filter: none;
  filter: grayscale(0);
  transition: 0.5s ease;
}

footer p {
  margin: 0 auto;
  padding: 0;
  text-align: center;
}

.fadeload {
  opacity: 0;
}

/* 幅600px以上のCSS内容 */
@media screen and (min-width:600px) {
  #name {
    width: 60vw;
    margin: 150px auto;
    /* height: 100%; */
    text-align: left;
    line-height: 20px;
  }

}

@media screen and (max-width:600px) {


}