@charset "utf-8";

/**
 *
 *  STT Hawaii
 *
 */

/*--------------------------------------------------------------------------
	overwrite スタイルの上書き
--------------------------------------------------------------------------*/

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

/*----------------------------------------------------------------------
	.timeline
----------------------------------------------------------------------*/
/* sec01 */
.timeline__sec01 {
	background-image: url(../images/sec01_bg_pc.jpg);
}
.article01 {
	top: 88px;
	right: 94px;
}
.article01.active {
	-webkit-transform: rotate(-2deg);
	-ms-transform: rotate(-2deg);
	transform: rotate(-2deg);
	opacity: 1;
}
.article01 .days {
	position: absolute;
	top: -34px;
	right: -45px;
	-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: 364px;
	left: 94px;
	-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);
	z-index: 3;
}
.article02.active {
	-webkit-transform: rotate(2deg);
	-ms-transform: rotate(2deg);
	transform: rotate(2deg);
	opacity: 1;
}
.article02 .days {
	position: absolute;
	top: -31px;
	right: -55px;
	-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: 41px;
	height: 142px;
	position: absolute;
	bottom: -5px;
	left: -26px;
	opacity: 0;
	-webkit-transform: scale(.3);
	-ms-transform: scale(.3);
	transform: scale(.3);
	-webkit-transform-origin: 21px 22px;
	-ms-transform-origin: 21px 22px;
	transform-origin: 21px 22px;
	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: 72px;
	left: -226px;
	z-index: 0;
}

.timeline__sec01 .paper02 {
	top: 13px;
	left: 282px;
	z-index: 0;
}

.timeline__sec01 .paper03 {
	top: 133px;
	right: -205px;
	z-index: 0;
}

.timeline__sec01 .paper04 {
	top: 329px;
	right: -24px;
	z-index: 0;
}

.timeline__sec01 .paper05 {
	top: 389px;
	left: 284px;
	z-index: 2;
}

.timeline__sec01 .people01 {
	top: 205px;
	left: 4px;
	z-index: 0;
}

.timeline__sec01 .people02 {
	top: 204px;
	left: 347px;
	z-index: 0;
}

.timeline__sec01 .people03 {
	top: 374px;
	right: -113px;
	z-index: 0;
}

.timeline__sec01 .plane {
	top: -107px;
	left: -4px;
}

.timeline__sec01 .obj01 {
	top: 345px;
	left: -70px;
}

.timeline__sec01 .obj02 {
	top: 197px;
	left: 473px;
}

.timeline__sec01 .obj03 {
	top: 384px;
	right: -191px;
}

.timeline__sec01 .obj04 {
	top: 593px;
	right: 9px;
}

.timeline__sec01 .obj05 {
	top: 631px;
	left: 554px;
	z-index: 2;
}

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

	.article01 {
    top: 34px;
    right: 26px;
	}
	.article01 .days {
    top: -16px;
    right: -21px;
    width: 83px;
	}
	.article01 .article__img::before {
		content: none;
	}
	.article02 {
		top: 309px;
		left: 22px;
	}
	.article02.active {
		transform: rotate(4deg);
	}
	.article02 .days {
    top: -18px;
    right: -18px;
    width: 82px;
	}
	.article02 .article__img::before {
		background: url(../images/article02_deco_sp.png) no-repeat 50% 50%;
		background-size: 27px auto;
		width: 27px;
		height: 94px;
		bottom: -28px;
	  left: -16px;
	}

	.timeline__sec01 .paper01 {
    top: 186px;
    left: -50px;
		width: 219px;
	}

	.timeline__sec01 .paper02 {
    top: -12px;
    left: 128px;
		width: 144px;
	}

	.timeline__sec01 .paper03 {
    top: 49px;
    right: -51px;
		width: 219px;
	}

	.timeline__sec01 .paper04 {
    top: 208px;
    right: -27px;
		width: 133px;
	}

	.timeline__sec01 .paper05 {
    top: 398px;
    left: 97px;
		width: 164px;
	}

	.timeline__sec01 .plane {
    top: -68px;
    left: -63px;
		width: 187px;
	}

	.timeline__sec01 .people01 {
    top: 232px;
    left: 76px;
    width: 49px;
	}

	.timeline__sec01 .people02 {
    top: 86px;
    left: 144px;
    width: 47px;
	}

	.timeline__sec01 .people03 {
    top: 318px;
    right: -9px;
    width: 46px;
	}

	.timeline__sec01 .people04 {
    top: -49px;
    left: 37px;
		width: 75px;
	}

	.timeline__sec01 .obj01 {
		top: -14px;
		left: -90px;
		width: 522px;
	}

	.timeline__sec01 .obj02 {
    top: 174px;
    left: auto;
    right: 16px;
    width: 145px;
	}

	.timeline__sec01 .obj03 {
    top: 340px;
    right: auto;
    left: 72px;
    width: 56px;
	}

	.timeline__sec01 .obj04 {
    top: 365px;
    right: -4px;
    width: 68px;
	}

	.timeline__sec01 .obj05 {
    top: auto;
    bottom: 47px;
    left: 87px;
    width: 165px;
	}
}

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

/* sec02 */
.timeline__sec02 {
	height: 798px;
	background-image: url(../images/sec02_bg_pc.jpg);
}
.timeline__sec02 .piece {
	margin-left: -3px;
}
.article03 {
	top: 91px;
	left: 361px;
}
.article03.active {
	-webkit-transform: rotate(3deg);
	-ms-transform: rotate(3deg);
	transform: rotate(3deg);
	opacity: 1;
}
.article03 .days {
	position: absolute;
	top: -30px;
	left: -38px;
	-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: 411px;
	left: 17px;
	-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: -35px;
	right: -30px;
	-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;
}
.article04 .article__img::before {
	content: '';
	display: block;
	background: url(../images/article04_deco01.png);
	width: 72px;
	height: 46px;
	position: absolute;
	top: 1px;
	right: -42px;
	opacity: 0;
	-webkit-transform: scale(.3);
	-ms-transform: scale(.3);
	transform: scale(.3);
	-webkit-transform-origin: 21px 22px;
	-ms-transform-origin: 21px 22px;
	transform-origin: 21px 22px;
	transition: .5s cubic-bezier(.1,1.55,.65,1.91) 1.2s;
}
.article04.active .article__img::before {
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	opacity: 1;
}
.article04 .article__img::after {
	content: '';
	display: block;
	background: url(../images/article04_deco02.png);
	width: 82px;
	height: 85px;
	position: absolute;
	bottom: -32px;
	right: -30px;
	opacity: 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	-webkit-transform-origin: 21px 22px;
	-ms-transform-origin: 21px 22px;
	transform-origin: 21px 22px;
	transition: .5s ease 1.6s;
}
.article04.active .article__img::after {
	-webkit-transform: rotate(0);
	-ms-transform: rotate(0);
	transform: rotate(0);
	opacity: 1;
}

.timeline__sec02 .piece {
	z-index: 5;
}

.timeline__sec02 .paper01 {
	top: -161px;
	right: 87px;
	z-index: 3;
}

.timeline__sec02 .paper02 {
	top: 44px;
	left: 68px;
	z-index: 0;
}

.timeline__sec02 .paper03 {
	top: 98px;
	right: -313px;
	z-index: 0;
}

.timeline__sec02 .paper04 {
	top: 449px;
	left: 377px;
	z-index: 0;
}

.timeline__sec02 .paper05 {
	bottom: 99px;
	right: -53px;
	z-index: 0;
}

.timeline__sec02 .people01 {
	top: 125px;
	right: 105px;
	z-index: 3;
	transform: rotateY(0deg);
	transform-origin: 34px 0;
	-webkit-transform: rotateY(0deg);
	-webkit-transform-origin: 34px 0;
}

.timeline__sec02 .people03 {
  top: 126px;
	left: 607px;
	z-index: 3;
}

.timeline__sec02 .people03 {
	top: 285px;
	left: 220px;
}

.timeline__sec02 .band01 {
	bottom: 285px;
	right: 158px;
	z-index: 6;
}

.timeline__sec02 .band02 {
	bottom: 224px;
	right: 271px;
	z-index: 6;
}

.timeline__sec02 .band03 {
	bottom: 132px;
	right: 163px;
	z-index: 6;
}

.timeline__sec02 .band04 {
	bottom: 79px;
	right: 275px;
	z-index: 6;
}

.timeline__sec02 .marionette01,
.timeline__sec02 .marionette02 {
	z-index: 1;
	transform: translateY(-50%);
	opacity: 0;
	transition: 1s cubic-bezier(0.19, 1, 0.22, 1) .3s;
}

.timeline__sec02 .marionette01.active,
.timeline__sec02 .marionette02.active {
	transform: translateY(0);
	opacity: 1;
}

.timeline__sec02 .marionette01 {
	bottom: 159px;
	left: 441px;
}

.timeline__sec02 .marionette02 {
	bottom: 159px;
	left: 547px;
}

.timeline__sec02 .obj01 {
	top: 376px;
	left: 225px;
}

.timeline__sec02 .obj02 {
	bottom: 137px;
	right: 344px;
}

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

	.article03 {
    top: 70px;
    left: 49px;
	}
	.article03.active {
		transform: rotate(6deg);
	}
	.article03 .days {
    top: -14px;
    right: -20px;
    left: auto;
    width: 82px;
	}
	.article03 .article__img::before {
		content: none;
	}
	.article04 {
		top: 340px;
		left: 45px;
	}
	.article04 .days {
		width: 83px;
		top: -16px;
		right: -19px;
	}
	.article04 .article__img::before {
		content: none;
	}
	.article04 .article__img::after {
		background: url(../images/article04_deco02_sp.png) no-repeat 50% 50%;
		background-size: 49px auto;
		width: 49px;
		height: 52px;
		bottom: -37px;
	  right: -16px;
		transition: .5s ease 1.2s;
	}

	.timeline__sec02 .paper01 {
    top: -98px;
    left: 229px;
		width: 129px;
	}

	.timeline__sec02 .paper02 {
    top: 40px;
    left: 19px;
		width: 164px;
	}

	.timeline__sec02 .paper03 {
    top: 146px;
    right: -195px;
		width: 169px;
	}

	.timeline__sec02 .paper04 {
    top: 400px;
    left: 63px;
		width: 188px;
		z-index: 2;
	}

	.timeline__sec02 .paper05 {
    bottom: 217px;
    left: 126px;
		z-index: 1;
		width: 114px;
	}

	.timeline__sec02 .people01 {
    top: 58px;
    right: -11px;
		width: 62px;
	}

	.timeline__sec02 .people02 {
    top: 60px;
    left: 190px;
		width: 61px;
	}

	.timeline__sec02 .people04 {
		top: 6px;
		left: 256px;
		width: 62px;
		z-index: 9;
	}

	.timeline__sec02 .people05 {
    top: 164px;
    right: 59px;
		width: 51px;
	}

	.timeline__sec02 .obj01 {
    top: 110px;
    left: 160px;
		width: 83px;
	}

	.timeline__sec02 .obj02 {
    bottom: 112px;
    right: 124px;
		z-index: 2;
		width: 28px;
	}

	.timeline__sec02 .obj03 {
    top: 366px;
    left: 111px;
    z-index: 1;
    width: 40px;
	}

	.timeline__sec02 .obj04 {
    bottom: 80px;
    left: 61px;
		z-index: 2;
		width: 173px;
	}

	.timeline__sec02 .band01 {
    bottom: 248px;
    right: 39px;
		z-index: 0;
		width: 34px;
	}

	.timeline__sec02 .band02 {
    bottom: 183px;
    right: 106px;
		z-index: 0;
		width: 26px;
	}

	.timeline__sec02 .band03 {
    bottom: 98px;
    right: 43px;
		z-index: 0;
		width: 29px;
	}

	.timeline__sec02 .band04 {
		bottom: 50px;
		right: 108px;
		z-index: 0;
		width: 28px;
	}

	.timeline__sec02 .marionette01 {
    bottom: 103px;
    left: 104px;
    width: 28px;
    z-index: 2;
	}

	.timeline__sec02 .marionette02 {
    bottom: 103px;
    left: 166px;
    width: 28px;
    z-index: 2;
	}
}

/* @smallSP */
@media all and (max-width: 374px){
	.article04 {
		left: 64px;
	}
}

/* sec03 */
.timeline__sec03 {
	height: 1147px;
	background-image: url(../images/sec03_bg_pc.jpg);
}
.article05 {
	top: 104px;
	left: 72px;
}
.article05.active {
	-webkit-transform: rotate(-2deg);
	-ms-transform: rotate(-2deg);
	transform: rotate(-2deg);
	opacity: 1;
}
.article05 .days {
	position: absolute;
	top: -31px;
	left: -32px;
	-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: 53px;
	position: absolute;
	bottom: -5px;
	right: -14px;
	opacity: 0;
	-webkit-transform: rotate(-10deg);
	-ms-transform: rotate(-10deg);
	transform: rotate(-10deg);
	-webkit-transform-origin: 21px 22px;
	-ms-transform-origin: 21px 22px;
	transform-origin: 21px 22px;
	transition: .5s ease 1.2s;
}
.article05.active .article__img::before {
	-webkit-transform: rotate(0);
	-ms-transform: rotate(0);
	transform: rotate(0);
	opacity: 1;
}

.article06 {
	top: 377px;
	right: 71px;
}
.article06.active {
	-webkit-transform: rotate(3deg);
	-ms-transform: rotate(3deg);
	transform: rotate(3deg);
	opacity: 1;
}
.article06 .days {
	position: absolute;
	top: -30px;
	right: -27px;
	-webkit-transform: scale(1.5);
	-ms-transform: scale(1.5);
	transform: scale(1.5);
	opacity: 0;
}
.article06.active .days {
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	opacity: 1;
}
.article06 .article__img::before {
	content: '';
	display: block;
	background: url(../images/article06_deco01.png);
	width: 46px;
	height: 48px;
	position: absolute;
	top: -11px;
	left: -10px;
	opacity: 0;
	-webkit-transform: scale(.3);
	-ms-transform: scale(.3);
	transform: scale(.3);
	-webkit-transform-origin: 21px 22px;
	-ms-transform-origin: 21px 22px;
	transform-origin: 21px 22px;
	transition: .5s ease 1.2s;
}
.article06.active .article__img::before {
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	opacity: 1;
}
.article06 .article__img::after {
	content: '';
	display: block;
	background: url(../images/article06_deco02.png);
	width: 69px;
	height: 61px;
	position: absolute;
	bottom: -32px;
	right: -30px;
	opacity: 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	-webkit-transform-origin: 21px 22px;
	-ms-transform-origin: 21px 22px;
	transform-origin: 21px 22px;
	transition: .5s ease 1.6s;
}
.article06.active .article__img::after {
	-webkit-transform: rotate(0);
	-ms-transform: rotate(0);
	transform: rotate(0);
	opacity: 1;
}

.article07 {
	bottom: 104px;
	left: 228px;
}
.article07.active {
	-webkit-transform: rotate(-2deg);
	-ms-transform: rotate(-2deg);
	transform: rotate(-2deg);
	opacity: 1;
}
.article07 .days {
	position: absolute;
	top: -39px;
	left: -38px;
	-webkit-transform: scale(1.5);
	-ms-transform: scale(1.5);
	transform: scale(1.5);
	opacity: 0;
}
.article07.active .days {
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	opacity: 1;
}
.article07 .article__img::before {
	content: '';
	display: block;
	background: url(../images/article07_deco01.png);
	width: 67px;
	height: 60px;
	position: absolute;
	top: -17px;
	right: -23px;
	opacity: 0;
	-webkit-transform: scale(.3);
	-ms-transform: scale(.3);
	transform: scale(.3);
	-webkit-transform-origin: 21px 22px;
	-ms-transform-origin: 21px 22px;
	transform-origin: 21px 22px;
	transition: .5s ease 1.2s;
}
.article07.active .article__img::before {
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	opacity: 1;
}
.article07 .article__img::after {
	content: '';
	display: block;
	background: url(../images/article07_deco02.png);
	width: 27px;
	height: 51px;
	position: absolute;
	bottom: 19px;
	left: -13px;
	opacity: 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	-webkit-transform-origin: 21px 22px;
	-ms-transform-origin: 21px 22px;
	transform-origin: 21px 22px;
	transition: .5s ease 1.6s;
}
.article07.active .article__img::after {
	-webkit-transform: rotate(0);
	-ms-transform: rotate(0);
	transform: rotate(0);
	opacity: 1;
}

.timeline__sec03 .piece {
	z-index: 6;
}

.timeline__sec03 .paper01 {
	top: -58px;
	right: -15px;
	z-index: 5;
}

.timeline__sec03 .paper02 {
	top: 62px;
	left: 177px;
	z-index: 0;
}

.timeline__sec03 .paper03 {
	top: 206px;
	right: -239px;
	z-index: 0;
}

.timeline__sec03 .paper04 {
	top: 441px;
	left: 340px;
	z-index: 7;
}

.timeline__sec03 .paper05 {
	top: 400px;
	left: -244px;
	z-index: 0;
}

.timeline__sec03 .paper06 {
	bottom: 194px;
	right: -79px;
	z-index: 0;
}

.timeline__sec03 .obj01 {
	top: 55px;
	right: -23px;
	z-index: 9;
}

.timeline__sec03 .obj02 {
	top: 267px;
	left: 578px;
	z-index: 9;
}

.timeline__sec03 .obj03 {
	top: 270px;
	left: 501px;
}

.timeline__sec03 .obj04 {
	top: 624px;
	left: -66px;
	z-index: 1;
}

.timeline__sec03 .obj05 {
	top: 353px;
	right: -246px;
}

.timeline__sec03 .obj06 {
	top: 591px;
	left: 257px;
	z-index: 9;
}

.timeline__sec03 .people01 {
	top: 225px;
	left: 273px;
}

.timeline__sec03 .people02 {
	top: 35px;
	left: 96px;
}

.timeline__sec03 .people03 {
	top: 356px;
	right: -45px;
}

.timeline__sec03 .people04 {
	bottom: 473px;
	left: -54px;
}

.timeline__sec03 .picture {
	top: 227px;
	left: 526px;
}

.timeline__sec03 .opera01 {
	top: 591px;
	left: 424px;
	z-index: 9;
}

.timeline__sec03 .opera02 {
	top: 603px;
	left: 360px;
	z-index: 9;
}

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

	.article05 {
    top: 33px;
    left: 35px;
	}
	.article05.active {
		transform: rotate(-3deg);
	}
	.article05 .days {
    width: 82px;
    top: -16px;
    left: -14px;
	}
	.article05 .article__img::before {
		background: url(../images/article05_deco_sp.png) no-repeat 50% 50%;
		background-size: 53px auto;
		width: 53px;
		height: 35px;
		bottom: -16px;
	}

	.article06 {
    top: 331px;
    right: 49px;
	}
	.article06.active {
		transform: rotate(7deg);
	}
	.article06 .days {
    width: 82px;
    top: -18px;
    right: -21px;
	}
	.article06 .article__img::before {
		background: url(../images/article06_deco01_sp.png) no-repeat 50% 50%;
		background-size: 35px auto;
		width: 35px;
		height: 37px;
	}
	.article06 .article__img::after {
		content: none;
	}

	.article07 {
    bottom: 80px;
    left: 129px;
	}
	.article07.active {
		transform: rotate(-3deg);
	}
	.article07 .days {
    top: -13px;
    left: -14px;
    width: 82px;
	}
	.article07 .article__img::before {
		background: url(../images/article07_deco01_sp.png) no-repeat 50% 50%;
		background-size: 47px auto;
		width: 47px;
		height: 43px;
	}
	.article07 .article__img::after {
		content: none;
	}

	.timeline__sec03 .paper01 {
    top: -36px;
    left: 157px;
		z-index: 0;
		width: 275px;
	}

	.timeline__sec03 .paper02 {
		top: 49px;
		left: -31px;
		z-index: 2;
		width: 254px;
	}

	.timeline__sec03 .paper03 {
    top: 329px;
    left: 142px;
		z-index: 0;
		width: 258px;
	}

	.timeline__sec03 .paper04 {
    top: 478px;
    left: 88px;
		z-index: 0;
		width: 186px;
	}

	.timeline__sec03 .paper05 {
    top: 181px;
    left: -115px;
		z-index: 4;
		width: 300px;
	}

	.timeline__sec03 .paper06 {
    bottom: 161px;
    right: -5px;
		z-index: 0;
		width: 194px;
	}

	.timeline__sec03 .people01 {
		top: 134px;
		left: 30px;
		z-index: 3;
		width: 127px;
	}

	.timeline__sec03 .people02 {
    top: 44px;
    left: 166px;
		z-index: 1;
		width: 38px;
	}

	.timeline__sec03 .people04 {
    top: 255px;
    bottom: auto;
    left: 9px;
		z-index: 5;
    width: 53px;
	}

	.timeline__sec03 .people05 {
		top: 7px;
		left: 258px;
		z-index: 1;
		width: 56px;
	}

	.timeline__sec03 .people06 {
    bottom: 19px;
    left: -7px;
		z-index: 0;
		width: 123px;
	}

	.timeline__sec03 .obj01 {
    top: 40px;
    right: -70px;
		width: 259px;
	}

	.timeline__sec03 .obj02 {
    top: 182px;
    left: 108px;
		width: 82px;
	}

	.timeline__sec03 .obj03 {
    top: 252px;
    left: -3px;
    z-index: 5;
    width: 106px;
	}

	.timeline__sec03 .obj04 {
    top: 428px;
    left: 261px;
		width: 147px;
	}

	.timeline__sec03 .obj05 {
		top: 552px;
		right: 206px;
		width: 82px;
	}
}

/* @smallSP */
@media all and (max-width: 374px){
	.article05 {
		left: 50px;
	}
	.article06 {
		right: 84px;
	}
}


.timeline__sec01 .piece.active .piece__img,
.timeline__sec02 .piece.active .piece__img,
.timeline__sec03 .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--train.active .piece__img {
	-webkit-animation: change 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95) forwards, sec01-02 1s ease 0.3s infinite;
	animation: change 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95) forwards, sec01-02 1s ease 0.3s infinite;
}
.piece-end {
	position: absolute;
	bottom: 53px;
	left: 98px;
	opacity: 0;
}
.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;
}

/*=====================================================================
	@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 sec01-02 {
	0% {
		transform: translateY(0px);
	}
	60% {
		transform: translateY(0px);
	}
	70% {
		transform: translateY(2px) rotate(0.5deg);
	}
	80% {
		transform: translateY(0px);
	}
	90% {
		transform: translateY(2px) rotate(-0.5deg);
	}
	100% {
		transform: translateY(0px);
	}
}

@keyframes sec02 {
	0% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-1px);
	}
	100% {
		transform: translateY(0);
	}
}

@keyframes sec02-balloon {
	0% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-5px);
	}
	100% {
		transform: translateY(0);
	}
}

@keyframes sec03-bird {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(-360deg);
	}
}

@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;
	}
}