@charset "utf-8";

/**
 *
 *  STT Hawaii
 *
 */

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

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

/* @SP */
@media all and (max-width: 767px){
	.kv::before {
		background-image: url(../images/kv_bg_sp.png);
	}
	.kv__ttl {
		max-width: 340px;
	}
	.kv__ttl::before,
	.kv__ttl::after {
		content: '';
		display: block;
		position: absolute;
		background: no-repeat;
		background-size: 100% auto;
	}
	.kv__ttl::before {
		background-image: url(../images/kv_deco01.png);
		width: 18%;
		height: 94px;
		top: 38px;
		left: -16px;
	}
	.kv__ttl::after {
		background-image: url(../images/kv_deco02.png);
		background-position: 100% 100%;
		width: 24%;
		height: 99px;
		bottom: 30px;
		right: -26px;
	}
}

/*----------------------------------------------------------------------
	.timeline
----------------------------------------------------------------------*/
/* 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: -59px;
	right: -50px;
	-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: 352px;
	left: 103px;
	-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: -72px;
	left: -30px;
	-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: 18px;
	left: 330px;
	z-index: 0;
}
.timeline__sec01 .paper02 {
	top: 176px;
	left: -5px;
	z-index: 2;
}
.timeline__sec01 .paper03 {
	bottom: 157px;
	right: -160px;
	z-index: 0;
}
.timeline__sec01 .paper04 {
	bottom: -3px;
	right: 120px;
}
.timeline__sec01 .obj01 {
	top: -107px;
	left: 31px;
	z-index: 0;
}
.timeline__sec01 .obj02 {
	top: 223px;
	left: 345px;
}
.timeline__sec01 .obj03 {
	top: 360px;
	left: -47px;
	z-index: 2;
}

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

	.article01 {
		top: 27px;
		right: 21px;
	}
	.article01 .days {
		width: 62px;
		top: -29px;
		right: -23px;
	}
	.article01 .article__img::before {
		content: none;
	}
	.article02 {
		top: 309px;
		left: 22px;
	}
	.article02.active {
		transform: rotate(4deg);
	}
	.article02 .days {
		width: 68px;
		top: -34px;
		left: -16px;
	}
	.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 {
		width: 97px;
	  top: -8px;
	  left: 120px;
		z-index: 1;
	}
	.timeline__sec01 .paper02 {
		width: 132px;
	  top: 199px;
	  left: 7px;
	}
	.timeline__sec01 .paper03 {
		width: 177px;
	  bottom: 224px;
	  right: -97px;
	}
	.timeline__sec01 .paper04 {
		width: 143px;
		bottom: -2px;
	  right: 10px;
	}
	.timeline__sec01 .obj01 {
		width: 159px;
		top: -69px;
		left: -11px;
	}
	.timeline__sec01 .obj02 {
		width: 119px;
	  top: 80px;
	  left: 134px;
	  z-index: 1;
	}
	.timeline__sec01 .obj03 {
		width: 149px;
	  top: 297px;
	  left: -16px;
	  z-index: 2;
	}

	.timeline__sec01 .obj04 {
		width: 71px;
		top: -48px;
		left: 36px;
	}
	.timeline__sec01 .obj05 {
		width: 54px;
	  top: 148px;
	  left: 97px;
	  z-index: 1;
	}
}

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

/* sec02 */
.timeline__sec02 {
	background-image: url(../images/sec02_bg_pc.jpg);
}
.timeline__sec02 .piece {
	margin-left: -3px;
}
.article03 {
	top: 82px;
	left: 352px;
}
.article03.active {
	-webkit-transform: rotate(3deg);
	-ms-transform: rotate(3deg);
	transform: rotate(3deg);
	opacity: 1;
}
.article03 .days {
	position: absolute;
	top: -79px;
	right: -42px;
	-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: 400px;
	left: 26px;
	-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: -79px;
	left: -15px;
	-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 .gate {
	position: absolute;
	bottom: -34px;
	right: 195px;
	z-index: 1;
}
.timeline__sec02 .paper01 {
	bottom: -60px;
	right: 60px;
	z-index: 1;
}
.timeline__sec02 .obj01 {
	top: 0px;
	right: 81px;
	z-index: 1;
}

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

	.article03 {
		top: 64px;
		left: 56px;
	}
	.article03.active {
		transform: rotate(6deg);
	}
	.article03 .days {
		width: 64px;
		top: -30px;
		right: -24px;
	}
	.article03 .article__img::before {
		content: none;
	}
	.article04 {
		top: 340px;
		left: 45px;
	}
	.article04 .days {
		width: 69px;
		top: -34px;
		left: -16px;
	}
	.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 {
		width: 177px;
	  bottom: -70px;
	  right: -6px;
	}
	.timeline__sec02 .paper02 {
		width: 190px;
		bottom: 11px;
		left: 60px;
		z-index: 0;
	}
	.timeline__sec02 .paper03 {
		width: 67px;
		top: 222px;
		right: 51px;
	}
	.timeline__sec02 .obj01 {
		width: 26px;
		top: 62px;
		left: 12px;
	}

	.timeline__sec02 .obj02 {
		width: 65px;
	  top: 264px;
	  left: 256px;
	}
}

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

/* sec03 */
.timeline__sec03 {
	height: 1146px;
	background-image: url(../images/sec03_bg_pc.jpg);
}
.article05 {
	top: 92px;
	left: 64px;
}
.article05.active {
	-webkit-transform: rotate(-2deg);
	-ms-transform: rotate(-2deg);
	transform: rotate(-2deg);
	opacity: 1;
}
.article05 .days {
	position: absolute;
	top: -72px;
	left: -46px;
	-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: 367px;
	right: 59px;
}
.article06.active {
	-webkit-transform: rotate(3deg);
	-ms-transform: rotate(3deg);
	transform: rotate(3deg);
	opacity: 1;
}
.article06 .days {
	position: absolute;
	top: -61px;
	right: -74px;
	-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: 258px;
}
.article07.active {
	-webkit-transform: rotate(-2deg);
	-ms-transform: rotate(-2deg);
	transform: rotate(-2deg);
	opacity: 1;
}
.article07 .days {
	position: absolute;
	top: -75px;
	left: -21px;
	-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 .paper01 {
	top: 39px;
	left: 282px;
	z-index: 0;
}
.timeline__sec03 .paper02 {
	top: 193px;
	right: -28px;
}
.timeline__sec03 .paper03 {
	top: 472px;
	right: 236px;
	z-index: 1;
}
.timeline__sec03 .paper04 {
	bottom: 150px;
	right: 24px;
	z-index: 0;
}
.timeline__sec03 .obj01 {
	top: 13px;
	right: 77px;
	z-index: 1;
}
.timeline__sec03 .obj02 {
	top: 303px;
	right: 0px;
	z-index: 2;
}
.timeline__sec03 .obj03 {
	top: 206px;
	right: 395px;
}
.timeline__sec03 .obj04 {
	bottom: 505px;
	right: 370px;
	z-index: 1;
}
.timeline__sec03 .obj05 {
	bottom: 255px;
	left: 97px;
	z-index: 1;
}

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

	.article05 {
		top: 30px;
		left: 30px;
	}
	.article05.active {
		transform: rotate(-3deg);
	}
	.article05 .days {
		width: 63px;
		top: -34px;
		left: -12px;
	}
	.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: 327px;
		right: 44px;
	}
	.article06.active {
		transform: rotate(7deg);
	}
	.article06 .days {
		width: 77px;
	  top: -29px;
	  right: -42px;
	}
	.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: 83px;
		left: 125px;
	}
	.article07.active {
		transform: rotate(-3deg);
	}
	.article07 .days {
		width: 58px;
	  top: -41px;
	  left: -14px;
	}
	.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 {
		width: 251px;
	  top: 56px;
	  left: -17px;
	}
	.timeline__sec03 .paper02 {
		width: 155px;
	  top: 175px;
	  right: -40px;
	}
	.timeline__sec03 .paper03 {
		width: 271px;
	  top: 358px;
	  right: -16px;
	}
	.timeline__sec03 .paper04 {
		width: 186px;
	  bottom: 181px;
	  right: -10px;
	}

	.timeline__sec03 .obj01 {
		width: 197px;
	  top: 35px;
	  right: -17px;
	}
	.timeline__sec03 .obj02 {
		width: 138px;
	  top: 244px;
	  right: -26px;
	}
	.timeline__sec03 .obj03 {
		width: 210px;
	  top: 139px;
	  right: auto;
	  left: -18px;
	}
	.timeline__sec03 .obj04 {
		width: 253px;
	  bottom: 470px;
	  right: 1px;
	}

	.timeline__sec03 .obj06 {
		width: 123px;
	  bottom: 20px;
	  left: -6px;
	}
}

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


.timeline__sec01 .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__sec01 .piece.active:last-of-type .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;
}
.timeline__sec02 .piece.active .piece__img {
	-webkit-animation: change 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95) forwards;
	animation: change 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95) forwards;
}
.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;
	}
}