@charset "UTF-8";
/* CSS Document */
body {
  background-color: #050505;
  color: #fff;
  font-size: 16px;
}
.slider {
  max-width: 1220px;
  margin: 0 auto;
}
/*==================================================
スライダーのためのcss
===================================*/
.slider img {
  width: 100%; /*スライダー内の画像を横幅100%に*/
  height: auto;
}
/*slickのJSで書かれるタグ内、スライド左右の余白調整*/
.slider .slick-slide {
  margin: 0 10px; /*スライド左右の余白調整*/
}
/* 回転Y軸
   ----------------------------- */
.flipY a { /*テキストの基点となる位置を定義*/
  position: relative;
  display: block;
}
.flipY img {
  transition: all 0.35s ease; /*移り変わる速さを変更したい場合はこの数値を変更*/
  backface-visibility: hidden; /*三次元になった際に裏面を可視化させない*/
}
.flipY a:hover img { /*hoverした時の変化*/
  transform: rotateY(-180deg);
  opacity: 0;
}
.flipY span.cap {
  /*ここからエリアの絶対配置の指定*/
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  /*ここまでエリアの絶対配置の指定*/
  transition: all 0.35s ease; /*移り変わる速さを変更したい場合はこの数値を変更*/
  transform: rotateY(90deg); /*横軸に回転*/
  transform-origin: 50% 0%; /*回転する基点*/
  opacity: 0;
  background: #333; /*背景色*/
  color: #fff; /*テキストの色を変えたい場合はここを修正*/
  /*ここからテキスト中央寄せの指定*/
  display: flex;
  justify-content: center;
  align-items: center;
  /*ここまでテキスト中央寄せの指定*/
}
.flipY a:hover span.cap { /*hoverした時の変化*/
  transform: rotateY(0); /*横軸に回転*/
  opacity: 1;
  transition-delay: 0.15s; /*移り変わる速さを変更したい場合はこの数値を変更*/
}
.profile {
  margin-bottom: 10vh;
}
.big-name {
  font-size: 6.5em;
}
.job-name {
  font-size: 1.5em;
}
.profile-pic {
  margin-top: 14vh;
  margin-bottom: 10vh;
  position: relative;
}
.name {
  line-height: 1.2;
  text-align: right;
}
h4 {
  font-size: 30px;
  margin-bottom: 5px;
}
.relative {
  position: relative;
}
.profile ul li {
  margin-top: 10vh;
}
.profile-contents {
  display: flex;
  justify-content: space-between;
  column-gap: 2em;
}
.profile-contents p {
  margin-top: 2rem;
  line-height: 2.5;
  letter-spacing: 0.7px;
}
.experience, .love, .carrier {
  flex: 1;
}
.tegaki1, .tegaki2, .tegaki3, .tegaki4, .tegaki5 {
  width: 57vw;
  position: absolute;
  top: -37px;
}
.tegaki5 {
  width: 39vw;
  top: -47px;
}
@media (min-width: 1441px) {
  .tegaki1, .tegaki2, .tegaki3, .tegaki4, .tegaki5 {
    top: -70px;
  }
}
@media (max-width: 1280px) {
  .profile-contents {
    display: block;
  }
}
@media (max-width: 820px) {
  .fix-contents {
    display: none;
  }
  section {
    padding: 0 6%;
  }
  .experience, .love, .carrier {
    margin-bottom: 50px;
  }
  .profile ul li {
    margin-bottom: 10vh;
  }
}
@media (max-width: 768px) {}
@media (max-width: 480px) {
  .big-name {
    font-size: 3.5em;
  }
  .job-name {
    font-size: 1em;
  }
  .profile ul li {
    margin-bottom: 10vh;
  }
  .profile-contents p {
    font-size: 14px;
    margin-top: 2rem;
    line-height: 1.8;
    letter-spacing: 0.7px;
}
.tegaki1, .tegaki2, .tegaki3, .tegaki4, .tegaki5 {
  width: 57vw;
  position: absolute;
  top: -17px;
}
 .tegaki5 {
  width: 43vw;
  position: absolute;
  top: -34px;
}
.profile-pic {
  margin-top: 8vh;
  margin-bottom: 10vh;
  position: relative;
}
}