@charset “UTF-8”;


/* テキスト縦 */
.txt_tate {
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}

/*通常の横書きで、上から下方向に表示する*/
.txt_yoko_nomale{
  -ms-writing-mode: lr-tb;
  writing-mode: horizontal-tb;
}



/*アニメ*/
.btntextchange{
    /*テキストの基点とするためrelativeを指定*/
  position: relative;
    /*ボタンの形状*/
  border-radius:0 5px 5px 0; /* 左上 | 右上 | 右下 | 左下 */
    min-width:210px;
  padding: 40px;
    text-align: left;
  display: inline-block;
    text-decoration: none;
    /*background: rgba(70,149,206, 0.7);*/
    background: rgba(255,102,0, 0.7);
    color: #fff;
    padding: 20px 100px 10px 80px;
    outline: none;
    /*アニメーションの指定*/
    animation-name: slide-skew;
    animation-delay: .3s;/*遅らせて開始*/
    animation-duration: 1s;
    animation-iteration-count: 1;/*アニメ回数*/
    animation-fill-mode: forwards;
    z-index: 2010;
}

.btntextchange div:nth-child(2){
  opacity:0;/*透過0に*/
}


.sp_btntextchange{
  border-radius: 5px;
    min-width:93%;
  padding: 18px;
    text-align: center;
    text-decoration: none;
    /*background: rgba(70,149,206, 0.7);*/
    background: rgba(255,102,0, 0.7);
    color: #fff;
    z-index: 90;
}


.index_container_posiAbs {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, 38%);/* 高さ調整 */
}




/* anime
 bg */
 
/*.anim-box.slide-skew.is-animated {
  animation: slide-skew 0.1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}*/
 
@keyframes slide-skew {
  from {
    transform: translate(-180px,0);
    opacity: 0;
  }
  to {
    transform: translate(0,0);
  }
  20%,100% {
    opacity: 1;
  }
}