/*scroll-fade*/
.js-fade {
    opacity: 0;
    visibility: hidden;
    transform: translateY(50px);
    transition: opacity 1s,visibility 1s, transform 1s;
}

.scroll {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
}

.hide{
    opacity: 0;
    visibility: hidden;
}

.appear{
    opacity: 1;
    visibility: visible;
}


/* profile-animation*/
.poyoyon,.poyoyon3{
    animation: poyoyon 2s cubic-bezier(0.12, 0, 0.39, 0) 1 forwards;
}
.poyoyon2.poyoyon2:hover,.poyoyon:hover,.zoomIn:hover{
    animation: poyoyon2 1s ease forwards;
}

.zoomIn {
    animation: zoomIn 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  }
   
  @keyframes zoomIn {
    0% {
      transform: scale(0.8);
      opacity: 0;
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }
   
  @keyframes poyoyon {
    0% {
      transform: translateX(500px);
      opacity: 0;
    }
    20% {
      transform: translateX(0);
    }
    28% {
      transform: translateX(60px);
    }
    45% {
        transform: translateX(0px);
      }
    55% {
        transform: translateX(10px);
    }
    63% {
      transform: translateX(0);
    }
    100%{
        transform: translateX(0);
    }
    20%,100% {
      opacity: 1;
    }
}

  @keyframes poyoyon2 {
    0%  {
      transform: scale(1.0, 1.0) translate(0, 0);
    }
    15% {
      transform: scale(0.98, 0.9) translate(0, 5px);
    }
    30% {
      transform: scale(1.02, 1.0) translate(0, 8px);
    }
    50% {transform: scale(0.98, 1.05) translate(0, -8px);
    }
    70% {
      transform: scale(1.0, 0.9) translate(0, 5px);
    }
    100% {
      transform: scale(1.0, 1.0) translate(0, 0);
    }
    0%, 100% {
      opacity: 1;
    }
  }

/*profile-box-positon*/
.Profile-box-position-absolute{
  position:absolute;
  display: flex;
    justify-content: center;
    align-items: center;
  width:100%;
  height: 100%;
  margin:0 auto;
  border-radius: .5rem;
  top:0px;
  left:0%;

}

.Profile-box-position-relative{
  position:relative;
    
}
/*カーテン要素*/
.Profile-box{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(255,255,255,.5);
    width:80%;
    margin:0 auto;
    padding-left:0.5rem;
    border-radius: .5rem;
    
    /*border: 3px solid #fae286;*/
    transition-duration: 1s;
    position: relative;
    overflow: hidden;
}

.Profile-box::before{
    content: 'モットー';
    display:flex;
    text-align: center;
    align-items:center;
    color:white;
    border-radius: .5rem;
    font-family: "aoharu", sans-serif;
    width: 100%;
    height: 100%;
    line-height: 100%;
    font-size:60px;
    
    justify-content: center;
    position: absolute;
    top: 0%;
    right: 0%;
  
    background: linear-gradient(45deg,rgb(0, 255, 255) 0% 1%,rgb(255, 0, 255) 50% 50%,rgb(255, 255, 0) 99% 100%);
    transition: 1s cubic-bezier(.15,.65,.85,.65);
}
@media (max-width: 768px) {
  .Profile-box{
    height: 70vw;
  }
}

@-webkit-keyframes criss-cross-left {
  0% {
    left: -20px;
  }
  50% {
    left: 50%;
    width: 20px;
    height: 20px;
  }
  100% {
    left: 50%;
    width: 375px;
    height: 375px;
  }
}

@keyframes criss-cross-left {
  0% {
    left: -20px;
  }
  50% {
    left: 50%;
    width: 20px;
    height: 20px;
  }
  100% {
    left: 50%;
    width: 375px;
    height: 375px;
  }
}
@-webkit-keyframes criss-cross-right {
  0% {
    right: -20px;
  }
  50% {
    right: 50%;
    width: 20px;
    height: 20px;
  }
  100% {
    right: 50%;
    width: 375px;
    height: 375px;
  }
}
@keyframes criss-cross-right {
  0% {
    right: -20px;
  }
  50% {
    right: 50%;
    width: 20px;
    height: 20px;
  }
  100% {
    right: 50%;
    width: 375px;
    height: 375px;
  }
}
/*========btnを押したらくるっとまわる。========*/
.btn02, .btn02-2, .btn02-3 {
  /*背景の基点とするためrelativeを指定*/
  position: relative;
  /*ボタンの形状*/
  display: inline-block;
  width: 9vw;
  height: 4.5vw;
  line-height: 4vw;
  text-align: center;
  outline: none;
  text-transform: uppercase;
  z-index:-1;
}

/*ボタン内側の設定*/
.btn02 span,
.btn02-2 span,
.btn02-3 span {
  display: block;
  position: absolute;
  width: 9vw;
  height: 4vw;
  border: 1px solid rgba(255,0,255,1);
  /* 重なりを3Dで表示 */
  transform-style: preserve-3d;
  /* アニメーションの設定 数字が少なくなるほど早く回転 */
  transition: 0.5s;
}

/*== くるっと回転（手前に） */

/* 初期状態 */
.rotatefront span:nth-child(1),
.rotatefront span:nth-child(3),
.rotatefront-2 span:nth-child(1),
.rotatefront-2 span:nth-child(3),
.rotatefront-3 span:nth-child(1),
.rotatefront-3 span:nth-child(3){
  background: #fff;
  color: rgba(255,0,255,1);
  transform-origin: 0 50% -2vw; /* 回転する起点 */
}

/* 回転後 */
.rotatefront span:nth-child(2),
.rotatefront span:nth-child(4),
.rotatefront-2 span:nth-child(2),
.rotatefront-2 span:nth-child(4),
.rotatefront-3 span:nth-child(2),
.rotatefront-3 span:nth-child(4){
  background: rgba(255,0,255,1);
  color: #fff;
  transform-origin: 0 50% -2vw; /* 回転する起点 */
}
.rotatefront span:nth-child(1),
.rotatefront-2 span:nth-child(1),
.rotatefront-3 span:nth-child(1){
  transform: rotateX(0deg);  /*初めは回転なし */
}
.rotatefront span:nth-child(2),
.rotatefront-2 span:nth-child(2),
.rotatefront-3 span:nth-child(2){
  transform: rotateX(90deg);  /*初めは90度回転 */
}
.rotatefront span:nth-child(3),
.rotatefront-2 span:nth-child(3),
.rotatefront-3 span:nth-child(3){
  transform: rotateX(180deg);  /*初めは-90度回転 */
}
.rotatefront span:nth-child(4),
.rotatefront-2 span:nth-child(4),
.rotatefront-3 span:nth-child(4){
  transform: rotateX(270deg);  /*初めは-90度回転 */
}

/*========クリックしたら波紋が広がる。========*/
.tri-ripple{
  /*
  opacity: 0;
  visibility: hidden;*/
  transform: translateY(-100%);
}
.btnripple{
  /*波紋の基点とするためrelativeを指定*/
  transform: translateY(-100%);
position: relative;
  /*はみ出す波紋を隠す*/
overflow: hidden;
color: #0b0000;
width:80%;
  height: 100%;
  border-radius: 0.5rem;
  
}
.btnripple2{
}

.btnripple::after,.btnripple2::after {
  content: "";
  /*絶対配置で波紋位置を決める*/
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  /*波紋の形状*/
  background: radial-gradient(circle, #fff 10%, transparent 10%) no-repeat 50%;
  transform: scale(10, 10);
  /*はじめは透過0に*/
  opacity: 0;
  /*アニメーションの設定*/
  transition: transform 0.2s, opacity 0.8s;
}

/*クリックされたあとの形状の設定*/
  .btnripple:active::after,.btnripple2:active::after {
  transform: scale(0, 0);
  transition: 0s;
  opacity: 1.0;
}

/*========クリックしたら波紋が広がる。ここまで========*/



.Profile-list{
    background-color: rgba(255,255,255,.5);
    padding-left: 0.5rem;
    border-radius: .5rem;
    transition-duration: 1s;
    position: relative;
    overflow: hidden;
    height: 14vw;
}
.Profile-list::before{
    content: 'プロフィール';
    display:flex;
    text-align: center;
    align-items:center;
    color:white;
    border-radius: .5rem;
    /*border: 3px solid rgb(0, 255, 255);*/
    font-family: "aoharu", sans-serif;
    width: 100%;
    height: 100%;
    line-height: 100%;
    font-size:60px;
    
    justify-content: center;
    position: absolute;
    top: 0%;
    right: 0%;
    
    background: linear-gradient(45deg,rgb(0, 255, 255) 0% 1%,rgb(255, 0, 255) 50% 50%,rgb(255, 255, 0) 99% 100%);
    transition: 1s cubic-bezier(.15,.65,.85,.65);
}
@media (max-width: 768px) {
  .Profile-list{
    height: 62vw;
  }
}
.Profile-career{
    background-color: rgba(255,255,255,.5);
    margin:1rem 0px;
    border-radius: .5rem;
    transition-duration: 1s;
    position: relative;
    overflow: hidden;
    display: flex;
    height:20vw;
}
.Profile-career tr {
   
    margin-bottom: .5rem;
    line-height: 1.7;
    
}
.Profile-career th {
    width:7vw;
    padding-left:0.5rem;
}
.Profile-career td {
    min-width:3rem;
}
.Profile-career::before{
    content: 'キャリア';
    display:flex;
    text-align: center;
    align-items:center;
    color:white;
    border-radius: .5rem;
    /*border: 3px solid rgb(0, 255, 255);*/
    font-family: "aoharu", sans-serif;
    width: 100%;
    height: 100%;
    line-height: 100%;
    font-size:60px;
    
    justify-content: center;
    position: absolute;
    top: 0%;
    right: 0%;
    
    border-collapse:separate;
    background: linear-gradient(45deg,rgb(0, 255, 255) 0% 1%,rgb(255, 0, 255) 50% 50%,rgb(255, 255, 0) 99% 100%);
    transition: 1s cubic-bezier(.15,.65,.85,.65);
}
@media (max-width: 768px) {
  .Profile-career{
    height: 80vw;
  }
  .Profile-career th {
    width:17vw;
}
}
.isPlay::before{
    transform: translateY(-101%);
}
.isPlay2::before,.isPlay3::before{
    transform: translateX(101%);
}
/*＝＝＝＝＝＝きらっと光らす 働かなかったら以下消す*/

.hine{
  /*キラッと光る基点とするためrelativeを指定*/
position: relative;
  /*ボタンの形状*/  
display:inline-block;
  background: #333;
  color: #fff;
  padding: 10px 20px;
  text-decoration: none;
  outline: none;
  overflow: hidden;
}

/*キラッと光る*/
.tbtnshine::before {
content: '';
  /*絶対配置でキラッと光るの位置を決める*/
position: absolute;
top: 0;
left: -75%;
  /*キラッと光る形状*/
  width: 50%;
height: 100%;
/*background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);*/
background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
transform: skewX(-25deg);
}

/*hoverした際の移動のアニメーション*/
.tbtnshine:hover::before {
animation: tshine 0.7s;
}

@keyframes tshine {
  100% {
    left: 125%;
  }
}


/*キラッと光る*/

.btnshine{
  /*キラッと光る基点とするためrelativeを指定*/
  position: relative;
  /*ボタンの形状*/
  display: flex;
    justify-content: center;
    align-items: center;  

  background: rgba(255,255,255,0);
  color: #000;
  width:80%;
  margin:0 auto;
  padding-left:0.5rem;
  padding: 10px 20px;
  text-decoration: none;
  outline: none;
  overflow: hidden;

}

.btnshine::before {
  content: '';
    /*絶対配置でキラッと光るの位置を決める*/
  position: absolute;
  top: 0;
  left: -75%;
    /*キラッと光る形状*/
    width: 50%;
  height: 100%;
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
  animation: shine 5s;
  transform: skewX(-25deg);
}

/*hoverした際の移動のアニメーション*/
.btnshine:hover::before {
animation: shine 0.7s;
}

@keyframes shine {
  100% {
    left: 125%;
  }
}
/*＝＝＝＝＝＝きらっと光らすここまで*/