@charset "utf-8";
/* CSS Document */
/*Welcome to my Profile*/
body { /*アニメーション*/
	animation: fadein 1s forwards;
}

@keyframes fadein {
	0% {opacity: 0}
	100% {opacity: 1}
}
.profile{
  padding: 0 5%;
  margin-bottom: 120px;
}
.profile h2{
  font-size: 2.0rem;
  border: 2px solid #000;
  border-radius: 4px;
  position: relative;
  width: 277px;
  height: 50px;
  line-height: 50px;
  vertical-align: middle;
  margin: 0 auto 40px;
}
.profile h2::before{
  content: "";
  width: 277px;
  height: 50px;
  border-radius: 4px;
  background-color: #ffeb3b;
  position: absolute;
  top: 3px;
  left: 3px;
  z-index: -1;
}
.profile .inner{
  padding: 0 20px;
  /*border: 3px solid #000;
  border-radius: 4px;*/
}
.profile .inner .img-wrapper{ /*アニメーション*/
  animation-name:fadeLeftAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
  opacity:0;
}

@keyframes fadeLeftAnime{
  from {
    opacity: 0;
	transform: translateX(-100px);
  }

  to {
    opacity: 1;
	transform: translateX(0);
  }
}

.profile .inner .img-area{
  position: relative;
  z-index: 0;
  width: 220px;
  height: 220px;
  margin: 0 auto;
}
.profile .inner img{
  width: 208px;
  height: auto;
  border-radius: 1000px;
  border: 2px solid #000;
}
.profile .inner .img-area::before{
  content: '';
  position: absolute;
  width: 208px;
  height: 208px;
  background-color: #000;
  border-radius: 1000px;
  z-index: -1;
  top: -10px;
  left: -10px;
}
.profile .text-wrapper{ /*アニメーション*/
  animation-name: fadeRightAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
  animation-delay: 0.2s;
  opacity:0;
}

@keyframes fadeRightAnime{
  from {
    opacity: 0;
	transform: translateX(100px);
  }

  to {
    opacity: 1;
	transform: translateX(0);
  }
}
.profile .name-wrapper{
  margin-bottom: 5px;
}
.profile .inner .name{
  text-align: left;
  display: inline-block;
  margin: 0 auto 5px;
}
.profile .inner .furigana{
  font-size: 1.0rem;
}
.profile .inner h3{
  font-size: 2.0rem;
}
.profile .inner .discription{
  text-align: left;
}
.profile .inner .btn{
  width: 180px;
  margin: 0 auto;
  padding-left: 40px; 
  background-color: #ffeb3b;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 50px;
  border-radius: 500px;
}
.profile .inner .btn span{
  vertical-align: middle;
  margin: 0 0 1px 20px;
}
@media (min-width: 700px){
  .profile .inner{
    display: flex;
    justify-content: center;
    column-gap: 20px;
  }
  .profile .inner .text-wrapper{
    /*width: 335px;*/
    width: 47.857143vw;
    margin-top: 20px;
  }
  .profile .inner .name-wrapper{
    text-align: left;
  }
  .profile .inner .btn{
    margin: 0;
  }
}
@media (min-width: 900px){
  .profile{
    padding: 0 5%;
    margin-bottom: 150px;
  }
  .profile h2{
    font-size: 3.2rem;
    width: 477px;
    height: 60px;
    line-height: 60px;
  }
  .profile h2::before{
    content: "";
    width: 477px;
    height: 60px;
    position: absolute;
    top: 3px;
    left: 3px;
    z-index: -1;
  }
  .profile .inner{
    padding: 0 20px /*124px*/;
  }
  .profile .inner .img-area{
    position: relative;
    z-index: 0;
    width: 264px;
    height: 264px;
    margin: 0 auto;
  }
  .profile .inner img{
    width: 250px;
    height: auto;
  }
  .profile .inner .img-area::before{
    content: '';
    position: absolute;
    width: 250px;
    height: 250px;
  }
  .profile .inner .text-wrapper{
    margin-top: 40px;
    max-width: 500px;
  }
  .profile .inner .furigana{
    font-size: 1.2rem;
  }
  .profile .inner h3{
    font-size: 2.4rem;
  }
  .profile .inner .discription{
    font-size: 1.5rem;
  }
}
@media (min-width: 1040px){
  .profile{
    max-width: 1000px;
    margin: 0 auto 140px;
    padding: 0;
  }
  .profile .inner{
    column-gap: 50px;
  }
}

/*これまでのこと*/
.story{
  padding: 0 5%;
  margin-bottom: 120px;
}
.story h2{
  font-size: 2.4rem;
  position: relative;
  display: inline-block;
  margin: 0 auto;
  margin-bottom: 30px;
}
.story h2::before{
  content: "";
  position: absolute;
  z-index: -1;
  top: -10px;
  left: -15px;
  width: 29px;
  height: 33px;
  background-color: #ffeb3b;
  border-radius: 2px;
}
.story .timeline{
  padding: 50px 5% 60px;
  background-color: #fff;
  border: 2px solid #000;
  border-radius: 4px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(50px);
  transition: opacity 1s,visibility 1s, transform 1s;
}
.story .timeline.active{
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}
.story .timeline-wrapper{
  display: flex;
}
.story .timeline-wrapper .date,
.story .timeline-wrapper .text-wrapper .title{
  font-size: 1.6rem;
  font-weight: 700;
  /*min-width: 200px;*/
}
.story .timeline-wrapper .text-wrapper{
  max-width: 500px;
  text-align: left;
  padding: 0 0 87px 25px;
  border-left: 2px solid #FFD650;
  position: relative;
}
.story .timeline-wrapper .text-wrapper::before{
  position: absolute;
  top: -7px;
  left: -10px;
  content: "";
  width: 20px;
  height: 20px;
  border-radius: 100px;
  background-color: #ffd650;
}
.story .timeline-wrapper .date{
  min-width: 55px;
  margin: -9px 24px 0 0;
}
.story .timeline-wrapper .text-wrapper .title{
  margin: -9px 0 10px 0;
}
.story .timeline-wrapper .text-wrapper .arrow {
  position: absolute;
  bottom: 2px;
  left: -9px;
}
.story .arrow span:nth-of-type(1){
  display: block;
  width: 10px;
  height: 2px;
  background-color: #ffd650;
  transform: rotate(45deg);
}
.story .arrow span:nth-of-type(2){
  position: absolute;
  bottom: 0;
  left: 6px;
  display: block;
  width: 10px;
  height: 2px;
  background-color: #ffd650;
  transform: rotate(-45deg);
}
.story .timeline-wrapper .img-area{
    display: none;
  }
@media (min-width: 768px){
  .story .timeline .text-wrapper{
    max-width: 400px;
  }
  .story .timeline .number01{
    padding-bottom: 130px
  }
  .story .timeline .number03{
    padding-bottom: 130px
  }
  .story .timeline-wrapper .img-area{
    display: block;
    padding-left: 30px;
    position: relative;
  }
  .story .timeline-wrapper .img-area::before{
    content: "";
    position: absolute;
    top: 20px;
    left: 10px;
    width: 164px;
    height: 75px;
    background-color: #ffeb3b;
    border-radius: 50%;
    transform: rotate(-30deg);
  }
  .story .timeline-wrapper .it{
    width: 79px;
    height: auto;
    position: absolute;
  }
  .story .timeline-wrapper .blog{
    width: 93px;
    height: auto;
    position: absolute;
  }
  .story .timeline-wrapper .wordpress{
    width: 95px;
    height: auto;
    position: absolute;
    top: -22px;    
  }
  .story .timeline-wrapper .dhw{
    width: 90px;
    height: auto;
    position: absolute;
    top: -36px;
  }
}
@media (min-width: 900px){
  .story{
    padding: 0 5%;
    margin-bottom: 140px;
}
  .story h2{
    font-size: 2.8rem;
    position: relative;
    margin-bottom: 30px;
  }
  .story h2::before{
    content: "";
    position: absolute;
    z-index: -1;
    top: -10px;
    left: -15px;
    width: 33px;
    height: 37px;
  }
  .story .timeline{
    padding: 50px 5% 60px;
  }
  .story .timeline-wrapper .text-wrapper{
    max-width: 500px;
    padding-left: 34px;
    position: relative;
  }
  .story .timeline-wrapper .text-wrapper::before{
    content: "";
    width: 25px;
    height: 25px;
    position: absolute;
    top: -10px;
    left: -13px;
  }
  .story .timeline-wrapper .date{
    min-width: 55px;
    margin: -10px 30px 0 0;
}
  .story .timeline-wrapper .text-wrapper .title{
    margin: -10px 0 10px 0;
  }
  .story .timeline-wrapper .text-wrapper .text{
    font-size: 1.5rem;
  }
}
@media (min-width: 1040px){
  .story{
    max-width: 1000px;
    padding: 0;
    margin: 0 auto 140px;
  }
  .story .timeline{
    padding: 50px 93px 60px 84px;
  }
  .story .timeline-wrapper .img-area{
    padding-left: 70px;
  }
  .story .timeline-wrapper .img-area::before{
    content: "";
    position: absolute;
    top: 20px;
    left: 50px;
  }
}

/*趣味・好きなこと*/
.hobby{
  padding: 0 5%;
  margin-bottom: 130px;
}
.hobby h2{
  font-size: 2.4rem;
  position: relative;
  display: inline-block;
  margin: 0 auto 30px;
}
.hobby h2::before{
  content: "";
  position: absolute;
  z-index: -1;
  top: -10px;
  left: -15px;
  width: 29px;
  height: 33px;
  background-color: #ffeb3b;
  border-radius: 2px;
}
.hobby .inner{
  display: flex;
  flex-direction: column;
  grid-row-gap: 40px;
}
.hobby .inner li{
  max-width: 445px;
  margin: 0 auto;
  background-color: #fff;
  border: 2px solid #252525;
  border-radius: 4px;
}
.hobby .inner li{
  opacity : 0;
  visibility: hidden;
  transform: translateY(50px);
  transition: opacity 1s,visibility 1s, transform 1s;
}
.hobby .inner li.active{
  opacity : 1;
  visibility: visible;
  transform: translateY(0px);
}

.hobby .inner li .icon-area{
  /*width: 335px;*/
  /*height: 175px;*/
  height: 200px;
  display: flex;
  align-items: center;
}
.hobby .inner li .icon-area .guitar{
  /*width: 278px;*/
  width: 230px;
  height: auto;
  margin: 0 auto;
}
.hobby .inner li .discription{
  background-color: #252525;
  border-radius: 0 50px 0 0;
  padding: 18px 30px 26px;
  text-align: left;
  position: relative;
}
.hobby .inner li .discription h3{
  font-size: 3.2rem;
  color: #ffeb3b;
}
.hobby .inner li .discription p{
  color: #fff;
}
.hobby .inner li .icon-area .book{
  width: 107px;
  height: auto;
  margin: 0 auto;
}
.hobby .inner li .icon-area .running{
  width: 183px;
  height: auto;
  margin: 0 auto;
}
.hobby .inner li .icon-area .history{
  width: 112px;
  height: auto;
  margin: 0 auto;
}
@media (min-width: 700px){
  .hobby .inner{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    gap: 30px;
  }
  .hobby .inner li .discription{
    height: 197px;
  }
  .hobby .inner li{
    max-width: none;
    width: calc(95% / 2);
    margin: 0;
  }
}
@media (min-width: 900px){
  .hobby{
    margin-bottom: 135px;
  }
  .story h2{
    font-size: 2.8rem;
    position: relative;
    margin-bottom: 30px;
  }
  .story h2::before{
    content: "";
    position: absolute;
    z-index: -1;
    top: -10px;
    left: -15px;
    width: 33px;
    height: 37px;
  }
  .hobby .inner li{
    max-width: 400px;
  }
  .hobby .inner li .discription h3{
    font-size: 3.6rem;
  }
  .hobby .inner li .discription p{
    font-size: 1.5rem;
  }
}