@charset "utf-8";

/**
 *
 *  STT Hawaii
 *
 */

/*--------------------------------------------------------------------------
	overwrite スタイルの上書き
--------------------------------------------------------------------------*/
.timelines_link__hdg {
  border-color: #ffb400;
}

/*----------------------------------------------------------------------
	.kv
----------------------------------------------------------------------*/
.kv--2019::before {
	background-image: url(../images/kv_bg_pc.png);
}

.kv--2019__box {
	padding-top: 83px;
}

.kv--2019__box .inner::before {
	background-image: url(../images/kv_deco01_pc.png);
	width: 124px;
	height: 120px;
	top: -22px;
	left: -41px;
}

.kv--2019__box .inner::after {
	background-image: url(../images/kv_deco02_pc.png);
	width: 120px;
	height: 119px;
	bottom: -27px;
	right: -36px;
}

/* @SP */
@media all and (max-width: 767px){
	.kv::before {
		background-image: url(../images/kv_bg_sp.png);
	}

	.kv--2019__box {
		padding: 0;
	}

	.kv--2019__box .inner {
		padding: 36px 15px 0;
	}

	.kv--2019__box .inner::before {
		background-image: url(../images/kv_deco01_sp.png);
		width: 22%;
		height: 72px;
		top: -15px;
	  left: -23px;
	}
	.kv--2019__box .inner::after {
		background-image: url(../images/kv_deco02_sp.png);
		background-position: 100% 100%;
		width: 21%;
		height: 70px;
		bottom: -19px;
	  right: -29px;
	}

	.kv--2019__ttl > img {
		width: 296px;
		transform: none;
	}

	.kv--2019__text {
		margin: 15px 0 0;
	}
}

@media all and (max-width: 350px){
	.kv--2019__text {
		font-size: 11px;
	}
}

/*----------------------------------------------------------------------
	.timeline
----------------------------------------------------------------------*/
.timeline {
	position: relative;
}
.timeline__sec .flower {
	transition: .5s cubic-bezier(.35,0,.46,1.58);
	transform: scale(0);
}
.timeline__sec .flower.active {
	transform: scale(1);
}

/* sec01 */
.timeline__sec01 {
	background-image: url(../images/sec01_bg_pc.jpg);
}
.article01 {
	top: 79px;
	right: 85px;
}
.article01.active {
	-webkit-transform: rotate(-2deg);
	-ms-transform: rotate(-2deg);
	transform: rotate(-2deg);
	opacity: 1;
}
.article01 .days {
	position: absolute;
	top: -27px;
	right: -37px;
	-webkit-transform: scale(1.5);
	-ms-transform: scale(1.5);
	transform: scale(1.5);
	opacity: 0;
}
.article01.active .days {
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	opacity: 1;
}

.article02 {
	top: 401px;
	left: 138px;
	-webkit-transform-origin: 0% 100%;
	-ms-transform-origin: 0% 100%;
	transform-origin: 0% 100%;
	-webkit-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	transform: rotate(-90deg);
}
.article02.active {
	-webkit-transform: rotate(2deg);
	-ms-transform: rotate(2deg);
	transform: rotate(2deg);
	opacity: 1;
}
.article02 .days {
	position: absolute;
	top: -16px;
	left: -20px;
	-webkit-transform: scale(1.5);
	-ms-transform: scale(1.5);
	transform: scale(1.5);
	opacity: 0;
}
.article02.active .days {
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	opacity: 1;
}
.article02 .article__img::before {
	content: '';
	display: block;
	background: url(../images/article02_deco.png);
	width: 54px;
	height: 123px;
	position: absolute;
	bottom: -5px;
	left: -38px;
	-webkit-transform: scale(1.5);
	-ms-transform: scale(1.5);
	transform: scale(1.5);
	opacity: 0;
	transition: .5s ease 1.2s;
}
.article02.active .article__img::before {
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	opacity: 1;
}

.timeline__sec01 .paper01 {
	top: -21px;
	left: 256px;
	z-index: 0;
}
.timeline__sec01 .paper02 {
	top: 262px;
	left: -91px;
}
.timeline__sec01 .paper03 {
	top: 571px;
	left: -101px;
}

.timeline__sec01 .obj01 {
	top: -115px;
	left: 66px;
}
.timeline__sec01 .obj02 {
	top: 101px;
	left: 242px;
}
.timeline__sec01 .obj03 {
	top: 300px;
	left: -38px;
	z-index: 2;
}
.timeline__sec01 .obj04 {
	top: 306px;
	left: 248px;
	z-index: 2;
}
.timeline__sec01 .obj06 {
	top: 174px;
	left: 103px;
	z-index: 2;
	animation: si-sa- 1s ease infinite;
}
.timeline__sec01 .obj07 {
	top: 374px;
	left: 476px;
	animation: si-sa- 2s ease .2s infinite;
}
.timeline__sec01 .obj08 {
	bottom: 230px;
	right: -10px;
	animation: float 3s infinite;
}
.timeline__sec01 .obj09 {
	bottom: 15px;
	left: 480px;
	opacity: 0;
	transform: translateX(-50px);
	transition: .5s ease;
}
.timeline__sec01 .obj09.active {
	opacity: 1;
	transform: translateX(0);
}

.timeline__sec01 .flower01 {
	top: 59px;
	left: -203px;
}
.timeline__sec01 .flower02 {
	top: 156px;
	left: -46px;
}
.timeline__sec01 .flower03 {
	top: 426px;
	left: -14px;
}
.timeline__sec01 .flower04 {
	top: 325px;
	left: 417px;
}
.timeline__sec01 .flower05 {
	top: 233px;
	left: 310px;
}

/* @SP */
@media all and (max-width: 767px){
	.timeline__sec01 {
		height: 617px;
		background-image: url(../images/sec01_bg_sp.jpg);
	}

	.article01 {
		top: 29px;
		right: 21px;
	}
	.article01 .days {
		width: 66px;
		top: -14px;
		right: -21px;
	}
	.article02 {
		top: 312px;
		left: 22px;
	}
	.article02.active {
		transform: rotate(4deg);
	}
	.article02 .days {
		width: 48px;
	  top: -9px;
	  left: -15px;
	}
	.article02 .article__img::before {
		background: url(../images/article02_deco_sp.png) no-repeat 50% 50%;
		background-size: 100% auto;
		width: 30px;
		height: 70px;
		bottom: -24px;
	  left: -21px;
	}

	.timeline__sec01 .paper01 {
		width: 139px;
		top: -6px;
		left: 113px;
	}
	.timeline__sec01 .paper02 {
		width: 171px;
		top: 245px;
		left: -23px;
	}
	.timeline__sec01 .paper03 {
		width: 178px;
	  top: 490px;
	  left: -27px;
	}
	.timeline__sec01 .obj01 {
		width: 117px;
	  top: -81px;
	  left: 10px;
	}
	.timeline__sec01 .obj02 {
		width: 39px;
		top: 65px;
		left: 211px;
	}
	.timeline__sec01 .obj03 {
		width: 107px;
		top: 269px;
	  left: 63px;
	}
	.timeline__sec01 .obj04 {
		width: 29px;
	  top: 515px;
	  left: 132px;
	}
	.timeline__sec01 .obj05 {
		width: 68px;
	  top: -54px;
	  left: 36px;
	}
}

/* @smallSP */
@media all and (max-width: 374px){
	.article01 {
		right: 36px;
	}
	.article02 {
		left: 38px;
	}
}

/* sec02 */
.timeline__sec02 {
	background-image: url(../images/sec02_bg_pc.jpg);
}
.timeline__sec02 .piece {
	margin-left: -3px;
}
.article03 {
	top: 53px;
	left: 346px;
}
.article03.active {
	-webkit-transform: rotate(3deg);
	-ms-transform: rotate(3deg);
	transform: rotate(3deg);
	opacity: 1;
}
.article03 .days {
	position: absolute;
	top: -29px;
	left: -20px;
	-webkit-transform: scale(1.5);
	-ms-transform: scale(1.5);
	transform: scale(1.5);
	opacity: 0;
}
.article03.active .days {
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	opacity: 1;
}

.article04 {
	top: 364px;
	left: 23px;
	-webkit-transform-origin: 0% 100%;
	-ms-transform-origin: 0% 100%;
	transform-origin: 0% 100%;
	-webkit-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	transform: rotate(-90deg);
}
.article04.active {
	-webkit-transform: rotate(-5deg);
	-ms-transform: rotate(-5deg);
	transform: rotate(-5deg);
	opacity: 1;
}
.article04 .days {
	position: absolute;
	top: -25px;
	right: -19px;
	-webkit-transform: scale(1.5);
	-ms-transform: scale(1.5);
	transform: scale(1.5);
	opacity: 0;
}
.article04.active .days {
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	opacity: 1;
}

.timeline__sec02 .gate {
	position: absolute;
	bottom: -34px;
	right: 195px;
	z-index: 1;
}
.timeline__sec02 .paper01 {
	top: -20px;
	left: 2px;
	z-index: 0;
}
.timeline__sec02 .paper02 {
	bottom: 172px;
	left: 322px;
}
.timeline__sec02 .paper03 {
	bottom: 99px;
	left: 414px;
}

.timeline__sec02 .obj01 {
	top: 91px;
	left: -19px;
	z-index: 2;
}
.timeline__sec02 .obj02 {
	top: 641px;
	left: 382px;
	z-index: 2;
}
.timeline__sec02 .obj03 {
	top: 633px;
	left: 653px;
	z-index: 2;
}
.timeline__sec02 .obj04 {
	top: 134px;
	left: 96px;
	z-index: 2;
}
.timeline__sec02 .obj06 {
	bottom: 335px;
	right: 136px;
	animation: crab03 2s ease infinite;
}
.timeline__sec02 .obj07 {
	bottom: 305px;
	right: 148px;
	animation: crab03 2s ease -1s infinite;
}
.timeline__sec02 .cow {
	width: 72px;
	height: 60px;
	top: 283px;
	left: 125px;
}
.timeline__sec02 .cow img {
	position: absolute;
	top: 0;
	left: 0;
}
.timeline__sec02 .cow img.head {
	transform-origin: 26px 13px;
	animation: cow 3s infinite;
}

/* @SP */
@media all and (max-width: 767px){
	.timeline__sec02 {
		background-image: url(../images/sec02_bg_sp.jpg);
	}

	.article03 {
		top: 64px;
		left: 56px;
	}
	.article03.active {
		transform: rotate(6deg);
	}
	.article03 .days {
		width: 64px;
		top: -17px;
		left: -13px;
	}
	.article04 {
		top: 340px;
		left: 45px;
	}
	.article04 .days {
		width: 61px;
		top: -13px;
		right: -10px;
	}

	.timeline__sec02 .paper01 {
		width: 166px;
		top: -2px;
		left: 4px;
	}
	.timeline__sec02 .paper02 {
		width: 127px;
	  bottom: 50px;
	  left: 57px;
	}
	.timeline__sec02 .paper03 {
		width: 149px;
	  bottom: 13px;
	  left: 116px;
	}
	.timeline__sec02 .obj01 {
		width: 101px;
	  top: 81px;
	  left: -9px;
	}
	.timeline__sec02 .obj02 {
		width: 26px;
		top: 569px;
		left: 240px;
	}
	.timeline__sec02 .obj03 {
		width: 26px;
	  top: 569px;
	  left: 240px;
	}
	.timeline__sec02 .obj05 {
		width: 66px;
		top: -2px;
		right: 55px;
	}
}

/* @smallSP */
@media all and (max-width: 374px){
	.timeline__sec02 .paper01 {
		left: 0;
	}
	.timeline__sec02 .obj01 {
		left: 35px;
	}
}

/* sec03 */
.timeline__sec03 {
	background-image: url(../images/sec03_bg_pc.jpg);
}
.article05 {
	top: 120px;
	left: 69px;
}
.article05.active {
	-webkit-transform: rotate(-2deg);
	-ms-transform: rotate(-2deg);
	transform: rotate(-2deg);
	opacity: 1;
}
.article05 .days {
	position: absolute;
	top: -17px;
	right: -20px;
	-webkit-transform: scale(1.5);
	-ms-transform: scale(1.5);
	transform: scale(1.5);
	opacity: 0;
}
.article05.active .days {
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	opacity: 1;
}
.article05 .article__img::before {
	content: '';
	display: block;
	background: url(../images/article05_deco.png);
	width: 80px;
	height: 79px;
	position: absolute;
	bottom: -9px;
	right: -15px;
	-webkit-transform: scale(1.5);
	-ms-transform: scale(1.5);
	transform: scale(1.5);
	opacity: 0;
	transition: .5s ease 1.2s;
}
.article05.active .article__img::before {
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	opacity: 1;
}

.timeline__sec03 .paper01 {
	top: 0px;
	left: -10px;
	z-index: 0;
}
.timeline__sec03 .paper02 {
	top: 122px;
	left: 357px;
	z-index: 0;
}
.timeline__sec03 .paper03 {
	bottom: 83px;
	left: 97px;
}

.timeline__sec03 .obj01 {
	bottom: 528px;
	left: 576px;
	z-index: 0;
}
.timeline__sec03 .obj02 {
	bottom: 58px;
	left: 296px;
	z-index: 2;
}
.timeline__sec03 .obj05 {
	top: -10px;
	left: 497px;
	transform-origin: bottom;
	animation: spring 2s ease infinite;
}
.timeline__sec03 .obj06 {
	bottom: 212px;
	left: 602px;
	animation: crab01 5s ease infinite;
}
.timeline__sec03 .obj07 {
	bottom: 193px;
	left: 626px;
	animation: crab02 4s ease -2s infinite;
}

/* @SP */
@media all and (max-width: 767px){
	.timeline__sec03 {
		height: 545px;
		background-image: url(../images/sec03_bg_sp.jpg);
	}

	.article05 {
		top: 28px;
		left: 36px;
	}
	.article05.active {
		transform: rotate(-3deg);
	}
	.article05 .days {
		width: 49px;
	  top: -14px;
	  right: -5px;
	}
	.article05 .article__img::before {
		background: url(../images/article05_deco_sp.png) no-repeat 50% 50%;
		background-size: 100% auto;
		width: 44px;
		height: 43px;
		bottom: -20px;
	  right: -6px;
	}

	.timeline__sec03 .paper01 {
		width: 165px;
	  top: 7px;
	  left: 18px;
	}
	.timeline__sec03 .paper02 {
		width: 151px;
	  top: 308px;
	  left: 37px;
	}
	.timeline__sec03 .paper03 {
		width: 154px;
	  bottom: 76px;
	  left: 4px;
	}

	.timeline__sec03 .obj03 {
		width: 62px;
		top: 13px;
		right: 62px;
	}
	.timeline__sec03 .obj04 {
		width: 108px;
	  bottom: 10px;
	  left: 2px;
	}
}

/* @smallSP */
@media all and (max-width: 374px){
	.timeline__sec03 .paper03 {
		right: 13px;
	}
}


.timeline__sec01 .piece.active .piece__img {
	-webkit-animation: change 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95) forwards, sec01 1s ease 0.3s infinite;
	animation: change 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95) forwards, sec01 1s ease 0.3s infinite;
}
.timeline__sec02 .piece.active .piece__img {
	-webkit-animation: change 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95) forwards, sec02 3s ease 0.3s infinite;
	animation: change 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95) forwards, sec02 3s ease 0.3s infinite;
}
.timeline__sec03 .piece.active .piece__img {
	-webkit-animation: change 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95) forwards, sec03 0.5s ease 0.3s infinite;
	animation: change 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95) forwards, sec03 0.5s ease 0.3s infinite;
}
.piece-end {
	position: absolute;
	bottom: 53px;
	left: 98px;
	opacity: 0;
	z-index: 10;
}
.piece-end.active {
	opacity: 1;
}
.piece-end.active .piece__img {
	-webkit-animation: change 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95) forwards, ending 8s ease 0.3s forwards;
	animation: change 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95) forwards, ending 8s ease 0.3s forwards;
}


/*----------------------------------------------------------------------
	.fishes
----------------------------------------------------------------------*/
.fishes {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: 1000px;
}
.fishes li {
	position: absolute;
}
.fishes .fish01 {
	top: 125px;
	right: 45px;
	animation: jellyfish_right 4s ease infinite;
}
.fishes .fish02 {
	top: 89px;
	right: -294px;
	animation: fish_left 6s ease infinite;
}
.fishes .fish03 {
	top: 255px;
	right: -12px;
	animation: seahorse 15s ease infinite;
}
.fishes .fish04 {
	top: 377px;
	right: -340px;
}
.fishes .fish05 {
	top: 597px;
	right: 0px;
	animation: fish_left 5s ease -.3s infinite;
}
.fishes .fish06 {
	top: 600px;
	right: -281px;
	animation: jellyfish_right 7s ease -2s infinite;
}
.fishes .fish07 {
	top: 743px;
	right: -204px;
	animation: fish_right 7s ease infinite;
}
.fishes .fish08 {
	top: 874px;
	right: 11px;
	animation: jellyfish_right 4s ease -1s infinite;
}
.fishes .fish09 {
	top: 944px;
	right: -205px;
	animation: seahorse 10s ease infinite;
}
.fishes .fish10 {
	top: 1047px;
	right: -327px;
	animation: fish_left 10s ease infinite;
}
.fishes .fish11 {
	top: 1123px;
	right: -14px;
	animation: fish_left 4s ease infinite;
}
.fishes .fish12 {
	top: 1274px;
	right: -284px;
	animation: fish_left 2.5s ease infinite;
}
.fishes .fish13 {
	top: 1279px;
	right: 16px;
	animation: jellyfish_right 10s ease infinite;
}
.fishes .fish14 {
	top: 1424px;
	right: -83px;
	animation: fish_right 6s ease -1s infinite;
}
.fishes .fish15 {
	top: 1518px;
	right: -318px;
	animation: tortoise01 8s ease infinite;
}
.fishes .fish16 {
	top: 1540px;
	right: 7px;
	animation: fish_right 10s ease -5s infinite;
}
.fishes .fish17 {
	top: 1643px;
	right: -202px;
	animation: jellyfish_right 3s ease infinite;
}
.fishes .fish18 {
	top: 1728px;
	right: 31px;
	animation: jellyfish_left 5s ease infinite;
}
.fishes .fish19 {
	top: 1787px;
	right: -125px;
	animation: fish_right 5s ease infinite;
}
.fishes .fish20 {
	top: 1788px;
	right: -346px;
	animation: jellyfish_left 3s ease -.5s infinite;
}
.fishes .fish21 {
	top: 1926px;
	right: 173px;
	animation: seahorse 12s ease infinite;
}
.fishes .fish22 {
	top: 1994px;
	right: -283px;
	animation: fish_left 8s ease -2s infinite;
}
.fishes .fish23 {
	top: 2190px;
	right: -223px;
}
.fishes .fish24 {
	top: 2250px;
	right: -136px;
	animation: seahorse 18s ease -5s infinite;
}
.fishes .fish25 {
	top: 2345px;
	right: 188px;
}
.fishes .fish26 {
	top: 2303px;
	right: 14px;
	animation: tortoise02 10s ease infinite;
}
.fishes .fish27 {
	top: 2286px;
	right: -218px;
	animation: fish_right 8s ease -7s infinite;
}


/*=====================================================================
	@keyframes
=====================================================================*/
@keyframes sec01 {
	0% {
		transform: translate(0,0) rotate(0deg);
	}
	16% {
		transform: translate(0,0) rotate(0deg);
	}
	32% {
		transform: translate(0,-10px) rotate(5deg);
	}
	48% {
		transform: translate(0,0) rotate(0deg);
	}
	64% {
		transform: translate(0,0) rotate(0deg);
	}
	80% {
		transform: translate(0,-10px) rotate(-5deg);
	}
	100% {
		transform: translate(0,0) rotate(0deg);
	}
}

@keyframes sec02 {
	0% {
		transform: translateY(0);
	}
	45% {
		transform: translateY(-4px) rotate(-2deg);
	}
	50% {
		transform: translateY(0);
	}
	95% {
		transform: translateY(-4px) rotate(2deg);
	}
	100% {
		transform: translateY(0);
	}
}

@keyframes sec03 {
	0% {
		transform: rotate(0deg);
	}
	25% {
		transform: rotate(2deg);
	}
	50% {
		transform: rotate(0deg);
	}
	75% {
		transform: rotate(-2deg);
	}
	100% {
		transform: rotate(0deg);
	}
}

@keyframes ending {
	0% {
		transform: rotate(0deg);
	}
	5% {
		transform: rotate(-15deg);
	}
	10% {
		transform: rotate(15deg);
	}
	15% {
		transform: scale(1);
		opacity: 1;
	}
	100% {
		transform: scale(3) translate(-60px, 180px);
		opacity: 0;
	}
}

@keyframes float {
	0% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(5px);
	}
}

@keyframes si-sa- {
	0% {
		transform: translateY(0);
	}
	10% {
		transform: translateY(-2px);
	}
	20% {
		transform: translateY(0);
	}
	30% {
		transform: translateY(-2px);
	}
	40% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(0);
	}
}

@keyframes cow {
	0% {
		transform: rotate(0);
	}
	30% {
		transform: rotate(-15deg);
	}
	50% {
		transform: rotate(-12deg);
	}
	70% {
		transform: rotate(-15deg);
	}
}

@keyframes spring {
	0% {
		transform: scaleY(.95);
	}
	10% {
		transform: scaleY(1.1);
	}
	20% {
		transform: scaleY(1);
	}
	80% {
		transform: scaleY(1);
	}
	100% {
		transform: scaleY(.95);
	}
}

@keyframes crab01 {
	0% {
		transform: translate(0, 0);
	}
	50% {
		transform: translate(-100%, -60%);
	}
}
@keyframes crab02 {
	0% {
		transform: translate(0, 0);
	}
	50% {
		transform: translate(-100%, -10%);
	}
}
@keyframes crab03 {
	0% {
		transform: rotate(0);
	}
	30% {
		transform: rotate(15deg);
	}
	70% {
		transform: rotate(-20deg);
	}
}

@keyframes fish_left {
	0% {
		transform: translate(0, 0) scaleX(1);
	}
	45% {
		transform: translate(-150%, 70%) scaleX(1);
	}
	50% {
		transform: translate(-150%, 70%) scaleX(-1);
	}
	95% {
		transform: translate(0, 0) scaleX(-1);
	}
}
@keyframes fish_right {
	0% {
		transform: translate(0, 0) scaleX(1);
	}
	45% {
		transform: translate(200%, 100%) scaleX(1);
	}
	50% {
		transform: translate(200%, 100%) scaleX(-1);
	}
	95% {
		transform: translate(0, 0) scaleX(-1);
	}
}

@keyframes jellyfish_right {
	0% {
		transform: translate(0, 0);
	}
	12% {
		transform: translate(30%, -30%);
	}
	30% {
		transform: translate(10%, -10%);
	}
	42% {
		transform: translate(60%, -60%);
	}
	60% {
		transform: translate(50%, -50%);
	}
}

@keyframes jellyfish_left {
	0% {
		transform: translate(0, 0) scaleX(1);
	}
	20% {
		transform: translate(-30%, -30%) scaleX(1);
	}
	30% {
		transform: translate(-30%, -30%) scaleX(-1);
	}
	50% {
		transform: translate(0, -60%) scaleX(-1);
	}
	60% {
		transform: translate(0, -60%) scaleX(1);
	}
}

@keyframes seahorse {
	0% {
		transform: translateY(0) scaleX(1);
	}
	11% {
		transform: translateY(-20%) scaleX(1);
	}
	22% {
		transform: translateY(0%) scaleX(1);
	}
	33% {
		transform: translateY(-20%) scaleX(1);
	}
	44% {
		transform: translateY(0%) scaleX(1);
	}
	49.5% {
		transform: translateY(0%) scaleX(-1);
	}
	60.5% {
		transform: translateY(-20%) scaleX(-1);
	}
	71.5% {
		transform: translateY(0%) scaleX(-1);
	}
	82.5% {
		transform: translateY(-20%) scaleX(-1);
	}
	93.5% {
		transform: translateY(0%) scaleX(-1);
	}
}

@keyframes tortoise01 {
	0% {
		transform: translate(0, 0) rotate(0);
	}
	20% {
		transform: translate(-10%, -10%) rotate(-15deg);
	}
	40% {
		transform: translate(-20%, -20%) rotate(15deg);
	}
	50% {
		transform: translate(-20%, -20%) rotate(0);
	}
	60% {
		transform: translate(-10%, -10%) rotate(-15deg);
	}
	80% {
		transform: translate(0, 0) rotate(15deg);
	}
}

@keyframes tortoise02 {
	0% {
		transform: translate(0, 0) rotate(0);
	}
	20% {
		transform: translate(10%, -10%) rotate(-15deg);
	}
	40% {
		transform: translate(20%, -20%) rotate(15deg);
	}
	50% {
		transform: translate(20%, -20%) rotate(0);
	}
	60% {
		transform: translate(10%, -10%) rotate(-15deg);
	}
	80% {
		transform: translate(0, 0) rotate(15deg);
	}
}