/*

ドットアニメーション

*/


.m-dotAndGuide{
  position: absolute;
  /* position: relative; */
  /* background-color:#ff0; */
  
}

.m-dotAndGuide svg{
  width:100%;
}

.m-dotAndGuide__dot{
  transform: translate(-50%,-50%);
  background-color:#2B2B2B;
  width: 1.5rem;
  height: 1.5rem;
  position:absolute;
  left:0;
  top:0;
  border-radius: 50%;
}

/* PC */
@media print,only screen and (min-width: 768px){
  .m-dotAndGuide__dot{
    width: 1.2rem;
    height: 1.2rem;
  }
  .m-dotAndGuide__dot.-large{
    width: 1.5rem;
    height: 1.5rem;
  }
}

/* SP */
@media screen and (max-width: 767px){
  .m-dotAndGuide__dot{
    width: 0.8rem;
    height: 0.8rem;

  }
}

.m-dotAndGuide svg{
  opacity: 0;
}


/*

バーアニメーション

*/

[data-appear-animation]{
  opacity:0;
  transform: translateX(0) scaleX(0);
  transform-origin: left top;
}

.appear-start [data-appear-animation='fadeIn']{
  transform: translateX(0) scaleX(1);
  animation: fadeIn 2s ease forwards;
}

.appear-start [data-appear-animation='grayTape']{
  animation: grayTape 1s ease forwards;
}

.appear-start [data-appear-animation='blackTape1']{
  animation: blackTape1 1s 1s ease forwards;
}

.appear-start [data-appear-animation='blackTapeLoop1']{
  animation: blackTapeLoop1 3s 1s linear infinite;
}
.appear-start [data-appear-animation='blackTapeLoop2']{
  animation: blackTapeLoop1 3s 2s linear infinite;
}
.appear-start [data-appear-animation='blackTapeLoop3']{
  animation: blackTapeLoop3 3s 1s linear infinite;
}

.appear-start [data-appear-animation='blackTapeText'],
.appear-start[data-appear-animation='blackTapeText']{
  /* position:relative; */
  animation: blackTapeText 1s ease forwards;
  width:fit-content;
}

.appear-start [data-appear-animation='blackTapeText']:after,
.appear-start[data-appear-animation='blackTapeText']:after{
  content:'';
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  background-color:#000;
  transform-origin: left top;
  animation: blackTapeTextTape 1s 1s ease forwards;
}

.appear-start [data-appear-animation='whiteTapeText'],
.appear-start[data-appear-animation='whiteTapeText']{
  /* position:relative; */
  animation: blackTapeText 1s ease forwards;
  width:fit-content;
}

.appear-start [data-appear-animation='whiteTapeText']:after,
.appear-start[data-appear-animation='whiteTapeText']:after{
  content:'';
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  background-color:#fff;
  transform-origin: left top;
  animation: blackTapeTextTape 1s 1s ease forwards;
}


.appear-start [data-appear-animation='whiteTapeText'].-animate-fast,
.appear-start[data-appear-animation='whiteTapeText'].-animate-fast{
  animation: blackTapeText 0.5s ease forwards;
}

.appear-start [data-appear-animation='whiteTapeText'].-animate-fast:after,
.appear-start[data-appear-animation='whiteTapeText'].-animate-fast:after{
  animation: blackTapeTextTape 1s 0.5s ease forwards;
}

.appear-start [data-appear-animation='blackTapeTextRotated']{
  position:relative;
  animation: blackTapeTextRotated 1s ease forwards;
  width:fit-content;
  transform: translateY(0) scaleY(0);
  transform-origin: bottom left;
}

.appear-start [data-appear-animation='blackTapeTextRotated']:after{
  content:'';
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  background-color:#000;
  transform-origin: left top;
  animation: blackTapeTextRotatedTape 1s 1s ease forwards;
}

@media screen and (max-width: 767px){	
  .appear-start [data-appear-animation='blackTapeTextRotated']{
    animation: blackTapeText 1s ease forwards;
  }
  
  .appear-start [data-appear-animation='blackTapeTextRotated']:after{
    animation: blackTapeTextTape 1s 1s ease forwards;
  }  
}


/* 
.appear-start [data-appear-delay="1"]{
  animation-delay: 1s;
} */
@keyframes fadeIn{
  0%{
    opacity:0;
  }
  
  100%{
    opacity:1;
  }
}


@keyframes grayTape{
  0%{
    opacity:0;
    transform: scaleX(0);
  }
  
  100%{
    opacity:1;
    transform: scaleX(100%);
  }
}


@keyframes blackTape1{
  0%{
    opacity:0;
    transform: scaleX(0);
  }
  
  100%{
    opacity:1;
    transform: scaleX(100%);
  }
}


@keyframes blackTapeLoop1{
  0%{
    opacity:0;
    transform: translateX(0) scaleX(0);
  }
  15%{
    opacity:0.9;
    transform: translateX(0) scaleX(90%);
  }
  20%{
    opacity:1;
    transform: translateX(0) scaleX(100%);
  }
  35%{
    opacity:1;
    transform: translateX(0) scaleX(100%);
  }

  50%{
    opacity:0.1;
    transform: translateX(calc(90% + 18px)) scaleX(10%);
  }
  55%{
    opacity:0;
    transform: translateX(calc(100% + 20px)) scaleX(0);
  }
  100%{
    opacity:0;
    transform: translateX(calc(100% + 20px)) scaleX(0);
  }
}

@keyframes blackTapeLoop3{
  0%{
    opacity:0;
    transform: translateX(0) scaleX(0);
  }
  15%{
    opacity:0.9;
    transform: translateX(0) scaleX(90%);
  }
  20%{
    opacity:1;
    transform: translateX(0) scaleX(100%);
  }

  70%{
    opacity:1;
    transform: translateX(0) scaleX(100%);
  }
  85%{
    opacity:0.1;
    transform: translateX(calc(90% + 18px)) scaleX(10%);
  }
  90%{
    opacity:0;
    transform: translateX(calc(100% + 20px)) scaleX(0);
  }
  
  100%{
    opacity:0;
    transform: translateX(calc(100% + 20px)) scaleX(0);
  }
}

@keyframes blackTapeText{
  0%{
    opacity:0;
    transform: scaleX(0);
  }
  
  100%{
    opacity:1;
    transform: scaleX(100%);
  }
}

@keyframes blackTapeTextTape{
  0%{
    opacity:1;
  }
  
  100%{
    opacity:0;
    transform: translateX(100%) scaleX(0);
  }
}

@keyframes blackTapeTextRotated{
  0%{
    opacity:0;
    transform: scaleY(0);
  }
  
  100%{
    opacity:1;
    transform: scaleY(100%);
  }
}

@keyframes blackTapeTextRotatedTape{
  0%{
    opacity:1;
  }
  
  100%{
    opacity:0;
    transform: scaleY(0);
  }
}


/*

パララックス

*/


.m-footerOverlay{
  pointer-events:none;
  background-color:#2b2b2b;
  /* background-color:#f00; */
  width: 100%;
  position: absolute;
  left:0;
  bottom:0;
  z-index: 10;
  transform-origin: left bottom;
}

/* PC */
@media print,only screen and (min-width: 768px){ 
  .m-footerOverlay{
    height:50rem;
  }
}

/* SP */
@media screen and (max-width: 767px){	
  .m-footerOverlay{
    height:25rem;
    opacity:0.5;
  }
}

body{
  position: relative;
}