@charset "UTF-8";
/* CSS Document */
#equol {
	position:relative;
	width: 100%;
}
#equol .cont01,#equol .cont02,#equol .cont03,#equol .cont04,#equol .cont05{
  position: relative;
}

#equol .cont01 .cont01_01{
	position: absolute;
    top: 3.5%;
    left: 0;
    right: 0;
    margin: auto;
    width: 74%;
    transition: .8s;
    z-index: 2;
}
#equol .cont01 .cont01_01.trigger{
    opacity: 0;
    transform: translateY(5%);
}
#equol .cont01 .cont01_01.trigger.move{
    opacity: 1;
    transform: translateY(0%);
}
#equol .cont01 .cont01_02{
	position: absolute;
    top: 12.5%;
    left: 0;
    right: 0;
    margin: auto;
    width: 82%;
    transition: .5s;
    z-index: 2;
}
#equol .cont01 .cont01_02.trigger{
    opacity: 0;
    transform: translateY(5%);
}
#equol .cont01 .cont01_02.trigger.move{
    opacity: 1;
    transform: translateY(0%);
}
#equol .cont01 .cont01_03{
position: absolute;
    top: 28.4%;
    left: 0;
    right: 0;
    margin: auto;
    width: 74%;
    transition: .8s;
    z-index: 2;
}
#equol .cont01 .cont01_03.trigger{
	clip-path: inset(0% 0% 100% 0%);
    opacity: 0;
}
#equol .cont01 .cont01_03.trigger.move{
	clip-path: inset(0%);
	opacity: 1;
}
#equol .cont01 .cont01_04{
position: absolute;
    top: 58.5%;
    left: 0;
    right: 0;
    margin: auto;
    width: 88%;
    transition: 1.4s;
    z-index: 2;
}
#equol .cont01 .cont01_04.trigger{
	clip-path: inset(0% 0% 100% 0%);
    opacity: 0;
}
#equol .cont01 .cont01_04.trigger.move{
	clip-path: inset(0%);
	opacity: 1;
}
#equol .cont01 .cont01_05{
	position: absolute;
	top: 69.4%;
	left:0;
	right: 0;
	margin: auto;
	width: 25%;
	transition: .5s;
	z-index: 2;
}
#equol .cont01 .cont01_05.trigger{
	transform: scale(0);
}
#equol .cont01 .cont01_05.trigger.move{
	transform: scale(1);
}
#equol .cont02 .cont02_01{
position: absolute;
    top: -2%;
    left: 0;
    right: 0;
    margin: auto;
    width: 25%;
    transition: .8s;
    z-index: 2;
}
#equol .cont02 .cont02_01.trigger{
	clip-path: inset(0% 0% 100% 0%);
    opacity: 0;
}
#equol .cont02 .cont02_01.trigger.move{
	clip-path: inset(0%);
	opacity: 1;
}
#equol .cont02 .cont02_02{
	position: absolute;
    top: 45%;
    left: 7%;
    width: 31%;
    transition: .8s;
	animation-timing-function:ease-in-out;
    z-index: 2;
}
#equol .cont02 .cont02_02.trigger{
    opacity: 0;
    transform: translateX(-2%);
}
#equol .cont02 .cont02_02.trigger.move{
    opacity: 1;
    transform: translateX(5%);
}
#equol .cont02 .cont02_03{
	position: absolute;
        top: 45%;
    right: 7%;
    width: 35%;
    transition: .8s .8s;
	animation-timing-function:ease-in-out;
    z-index: 2;
}
#equol .cont02 .cont02_03.trigger{
    opacity: 0;
    transform: translateX(15%);
}
#equol .cont02 .cont02_03.trigger.move{
    opacity: 1;
    transform: translateX(5%);
}

#equol .cont03 .circle_cont {
position: absolute;
    top: 17%;
    left: 0;
    right: 0;
    margin: auto;
    width: 80%;
    z-index: 2;
}
#equol .cont03 .circle_cont .circle .type {
  fill: transparent;
  stroke-width: 10%;
}
#equol .cont03 .circle .type2 {
  stroke: #c71558;
  opacity: 0;
}
#equol .cont03.trigger.move .typeA2 {
  animation: circleA2 1.8s 0.8s forwards;
}
#equol svg {
  transform: rotate(-90deg);
}
@keyframes circleA2 {
  0% {
    stroke-dasharray: 0 3000;
    opacity: 0;
  }
  99.9%, to {
    stroke-dasharray: 1930 3000;
    opacity: 1;
  }
}
#equol .cont03 .cont03_01{
	position: absolute;
	top: 4%;
	left:0;
	right: 0;
	margin: auto;
	width: 44%;
	transition: .5s;
	z-index: 2;
}
#equol .cont03 .cont03_01.trigger{
	transform: scale(0);
}
#equol .cont03 .cont03_01.trigger.move{
	transform: scale(1);
}
#equol .cont03 .cont03_02{
	position: absolute;
	top: 33%;
	left:0;
	right: 0;
	margin: auto;
	width: 44%;
	transition: .5s;
	z-index: 2;
}
#equol .cont03 .cont03_02.trigger{
	transform: scale(0);
}
#equol .cont03 .cont03_02.trigger.move{
	transform: scale(1);
}
#equol .cont03 .cont03_03{
position: absolute;
    bottom: 8%;
    left: 0;
    right: 0;
    margin: auto;
    width: 63%;
    transition: .8s;
    z-index: 2;
}
#equol .cont03 .cont03_03.trigger{
	clip-path: inset(0% 0% 100% 0%);
    opacity: 0;
}
#equol .cont03 .cont03_03.trigger.move{
	clip-path: inset(0%);
	opacity: 1;
}

#equol .cont04 .cont04_01{
	position: absolute;
	top: 0%;
	left:0;
	right: 0;
	margin: auto;
	width: 75%;
	transition: .5s;
	animation-timing-function:ease-in-out;
	z-index: 2;
}
#equol .cont04 .cont04_01.trigger{
	clip-path: inset(0% 0% 100% 0%);
    opacity: 0;
}
#equol .cont04 .cont04_01.trigger.move{
	clip-path: inset(0%);
	opacity: 1;
}
#equol .cont04 .cont04_02{
    position: absolute;
    top: 45%;
    left: 0;
    right: 0;
    margin: auto;
    width: 67%;
    transition: .5s;
    animation-timing-function: ease-in-out;
    z-index: 2;
}
#equol .cont04 .cont04_02.trigger{
	transform: scale(0);
}
#equol .cont04 .cont04_02.trigger.move{
	transform: scale(1);
}
#equol .cont05 .cont05_01{
    position: absolute;
    top: 13%;
    left: 0;
    right: 0;
    margin: auto;
    width: 70%;
    transition: .6s;
    animation-timing-function: ease-in-out;
    z-index: 2;
}
#equol .cont05 .cont05_01.trigger {
	clip-path: inset(0% 0% 100% 0%);
    opacity: 0;
}
#equol .cont05 .cont05_01.trigger.move {
	clip-path: inset(0%);
    opacity: 1;
}
#equol .cont05 ul{
	position: absolute;
	top: 30%;
	width: 100%;
	height: 10%;
	left: 0;
	right: 0;
	margin: auto;
}
#equol .cont05 .cont05_02{
    position: absolute;
    top: 68%;
    left: 0;
    right: 0;
    margin: auto;
    width: 65%;
    transition: .5s .3s;
    animation-timing-function: ease-in-out;
    z-index: 2;
}
#equol .cont05 ul.trigger .cont05_02{
	clip-path: inset(0% 100% 0% 0%);
    opacity: 0;
}
#equol .cont05 ul.trigger.move .cont05_02{
	clip-path: inset(0%);
    opacity: 1;
}

#equol .cont05 .cont05_03{
        position: absolute;
    top: 77%;
    left: 0;
    right: 0;
    margin: auto;
    width: 78%;
    transition: .8s;
    animation-timing-function: ease-in-out;
    z-index: 2;
}
#equol .cont05 .cont05_03.trigger{
	clip-path: inset(0% 0% 100% 0%);
    opacity: 0;
}
#equol .cont05 .cont05_03.trigger.move{
	clip-path: inset(0%);
    opacity: 1;
}
#equol .cont05 .cont05_04{
	position: absolute;
    top: 150%;
    right: 0;
	left: 0;
    width: 85.5%;
	margin: auto;
    transition: .5s .3s;
	animation-timing-function:ease-in-out;
    z-index: 2;
}
#equol .cont05 ul.trigger .cont05_04{
    opacity: 0;
    transform: translateY(10%);
}
#equol .cont05 ul.trigger.move .cont05_04{
    opacity: 1;
    transform: translateY(0%);
}