@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::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: 26%;
		height: 131px;
		top: 41px;
		left: -41px;
	}
	.kv__ttl::after {
		background-image: url(../images/kv_deco02.png);
		background-position: 100% 100%;
		width: 27%;
		height: 107px;
		bottom: 34px;
		right: -18px;
	}
}

/*----------------------------------------------------------------------
	.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: -32px;
	left: -29px;
	-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;
}
.article01 .article__img::before {
	content: '';
	display: block;
	background: url(../images/article01_deco.png);
	width: 47px;
	height: 51px;
	position: absolute;
	top: 189px;
	right: -18px;
	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.2s;
}
.article01.active .article__img::before {
	-webkit-transform: rotate(0);
	-ms-transform: rotate(0);
	transform: rotate(0);
	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);
}
.article02.active {
	-webkit-transform: rotate(2deg);
	-ms-transform: rotate(2deg);
	transform: rotate(2deg);
	opacity: 1;
}
.article02 .days {
	position: absolute;
	top: -22px;
	right: -36px;
	-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: 51px;
	height: 32px;
	position: absolute;
	top: 0px;
	left: -19px;
	-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: 59px;
	left: 225px;
	z-index: 0;
}
.timeline__sec01 .paper02 {
	top: 553px;
	left: 508px;
}
.timeline__sec01 .obj01 {
	top: -95px;
	left: 79px;
	z-index: 2;
}
.timeline__sec01 .obj02 {
	top: 512px;
	right: 15px;
	animation: tortoise 5s ease infinite;
}
.timeline__sec01 .obj03 {
	top: 578px;
	right: 19px;
	animation: yacht 5s ease infinite;
	transform-origin: 50% 100%;
}
.timeline__sec01 .obj04 {
	top: 132px;
	left: 474px;
}

.timeline__sec01 .flower {
	transition: .5s cubic-bezier(.35,0,.46,1.58);
}
.timeline__sec01 .flower.active {
	transform: scale(1);
}
.timeline__sec01 .flower01 {
	top: 142px;
	left: -2px;
	transform: scale(0);
}
.timeline__sec01 .flower02 {
	top: 207px;
	left: 278px;
	transform: scale(0);
}

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

	.article01 {
		top: 30px;
		right: 30px;
	}
	.article01 .days {
		width: 54px;
		top: -19px;
		left: -17px;
	}
	.article01 .article__img::before {
		content: none;
	}
	.article02 {
		top: 312px;
		left: 22px;
	}
	.article02.active {
		transform: rotate(4deg);
	}
	.article02 .days {
		width: 74px;
		top: -18px;
		right: -18px;
	}
	.article02 .article__img::before {
		content: none;
	}

	.timeline__sec01 .paper01 {
		width: 157px;
		top: 236px;
		left: 2px;
	}
	.timeline__sec01 .paper02 {
		width: 67px;
		top: 317px;
	  left: auto;
	  right: 48px;
	}
	.timeline__sec01 .paper03 {
		width: 69px;
		top: -17px;
		left: 39px;
	}
	.timeline__sec01 .obj01 {
		width: 118px;
		top: -73px;
		left: 3%;
	}
	.timeline__sec01 .obj02 {
		width: 53px;
		top: 429px;
		right: -5px;
	}
}

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

/* 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: -22px;
	right: -22px;
	-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;
}
.article03 .article__img::before {
	content: '';
	display: block;
	background: url(../images/article03_deco.png);
	width: 55px;
	height: 57px;
	position: absolute;
	bottom: -5px;
	right: -14px;
	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.2s;
}
.article03.active .article__img::before {
	-webkit-transform: rotate(0);
	-ms-transform: rotate(0);
	transform: rotate(0);
	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: -26px;
	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;
}

.timeline__sec02 .gate {
	position: absolute;
	bottom: -34px;
	right: 195px;
	z-index: 1;
}
.timeline__sec02 .paper01 {
	top: -86px;
	left: -39px;
	z-index: 0;
}
.timeline__sec02 .paper02 {
	bottom: 46px;
	left: 386px;
}
.timeline__sec02 .obj01 {
	top: 33px;
	left: 49px;
	animation: sec02-balloon cubic-bezier(0.645, 0.045, 0.355, 1) 3s infinite;
}

.timeline__sec02 .car01 {
	background: url(../images/car01.png) repeat-x 0 0;
	width: 1710px;
	height: 42px;
	bottom: 231px;
	left: -355px;
	animation: cars01 10s linear infinite, cars-vibe 0.1s linear infinite;
}
.timeline__sec02 .car02 {
	background: url(../images/car02.png) no-repeat 0 0;
	width: 1710px;
	height: 42px;
	bottom: 202px;
	left: -355px;
	animation: cars02 8s linear infinite, cars-vibe 0.1s linear infinite;
}

.timeline__sec02 .tree {
	bottom: 162px;
}
.timeline__sec02 .tree01 {
	left: 211px;
}
.timeline__sec02 .tree02 {
	left: 22px;
}
.timeline__sec02 .tree03 {
	left: 283px;
}
.timeline__sec02 .tree04 {
	left: 544px;
}
.timeline__sec02 .tree05 {
	right: -16px;
}
.timeline__sec02 .tree06 {
	right: -194px;
}
.timeline__sec02 .tree07 {
	right: 170px;
	bottom: 126px;
}

/* @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: 57px;
		top: -19px;
		right: -12px;
	}
	.article03 .article__img::before {
		content: none;
	}
	.article04 {
		top: 340px;
		left: 45px;
	}
	.article04 .days {
		width: 74px;
		top: -17px;
		left: -19px;
	}

	.timeline__sec02 .paper01 {
		width: 273px;
		top: 0px;
		left: -19px;
	}
	.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;
	}
}

/* @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: 85px;
	left: 64px;
}
.article05.active {
	-webkit-transform: rotate(-2deg);
	-ms-transform: rotate(-2deg);
	transform: rotate(-2deg);
	opacity: 1;
}
.article05 .days {
	position: absolute;
	top: -22px;
	left: -26px;
	-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;
}

.timeline__sec03 .paper01 {
	top: 22px;
	left: 422px;
	z-index: 0;
}
.timeline__sec03 .paper02 {
	top: 114px;
	right: -25px;
}
.timeline__sec03 .paper03 {
	top: 129px;
	right: -27px;
}
.timeline__sec03 .bird {
	width: 1000px;
	bottom: -317px;
	right: -350px;
	animation: sec03-bird linear 10s infinite;
}
.timeline__sec03 .bird img:last-child {
	position: absolute;
	bottom: 0;
	right: 0;
	transform: rotate(180deg);
}

.timeline__sec03 .obj02 {
	top: 233px;
	left: 447px;
	animation: lex 3s linear infinite;
}
.timeline__sec03 .obj02.active {
	animation: lex-turn 0.5s linear forwards, lex-r 3s linear 0.5s infinite;
}

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

	.article05 {
		top: 28px;
		left: 36px;
	}
	.article05.active {
		transform: rotate(-3deg);
	}
	.article05 .days {
		width: 62px;
		top: -22px;
		left: -16px;
	}

	.timeline__sec03 .paper01 {
		width: 166px;
		top: 1px;
		left: 86px;
	}
	.timeline__sec03 .paper02 {
		width: 176px;
		top: 169px;
		right: -43px;
	}
	.timeline__sec03 .paper03 {
		width: 64px;
		top: 198px;
		right: -15px;
	}
	.timeline__sec03 .bird {
		width: 72px;
		bottom: 20px;
		right: 20px;
		animation: none;
	}
	.timeline__sec03 .obj01 {
		width: 126px;
		bottom: 20px;
		left: 23px;
	}
}

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


.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__sec02 .piece.active .piece__img {
	-webkit-animation: change 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95) forwards, sec02 0.1s ease 0.3s infinite;
	animation: change 0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95) forwards, sec02 0.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;
}

/*----------------------------------------------------------------------
	.timelines_link
----------------------------------------------------------------------*/
.timelines_link__hdg {
	border-color: #ff7b2b;
}

/*=====================================================================
	@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 tortoise {
	0% {
		-webkit-transform: translateX(0px);
		-ms-transform: translateX(0px);
		transform: translateX(0px);
	}
	19% {
		-webkit-transform: translateX(0px);
		-ms-transform: translateX(0px);
		transform: translateX(0px);
	}
	20% {
		-webkit-transform: translateX(-5px) rotate(1deg);
		-ms-transform: translateX(-5px) rotate(1deg);
		transform: translateX(-5px) rotate(1deg);
	}
	29% {
		-webkit-transform: translateX(-5px) rotate(1deg);
		-ms-transform: translateX(-5px) rotate(1deg);
		transform: translateX(-5px) rotate(1deg);
	}
	30% {
		-webkit-transform: translateX(-10px) rotate(-1deg);
		-ms-transform: translateX(-10px) rotate(-1deg);
		transform: translateX(-10px) rotate(-1deg);
	}
	39% {
		-webkit-transform: translateX(-10px) rotate(-1deg);
		-ms-transform: translateX(-10px) rotate(-1deg);
		transform: translateX(-10px) rotate(-1deg);
	}
	40% {
		-webkit-transform: translateX(-15px) rotate(1deg);
		-ms-transform: translateX(-15px) rotate(1deg);
		transform: translateX(-15px) rotate(1deg);
	}
	49% {
		-webkit-transform: translateX(-15px) rotate(1deg);
		-ms-transform: translateX(-15px) rotate(1deg);
		transform: translateX(-15px) rotate(1deg);
	}
	100% {
		-webkit-transform: translateX(0px);
		-ms-transform: translateX(0px);
		transform: translateX(0px);
	}
}
@keyframes yacht {
	0% {
		-webkit-transform: rotate(1.5deg);
		-ms-transform: rotate(1.5deg);
		transform: rotate(1.5deg);
	}
	25% {
		-webkit-transform: translateY(5px) rotate(0deg);
		-ms-transform: translateY(5px) rotate(0deg);
		transform: translateY(5px) rotate(0deg);
	}
	50% {
		-webkit-transform: rotate(-1.5deg);
		-ms-transform: rotate(-1.5deg);
		transform: rotate(-1.5deg);
	}
	75% {
		-webkit-transform: translateY(10px) rotate(0deg);
		-ms-transform: translateY(10px) rotate(0deg);
		transform: translateY(10px) rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(1.5deg);
		-ms-transform: rotate(1.5deg);
		transform: rotate(1.5deg);
	}
}

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

@keyframes cars01 {
	0% {
		background-position: 1710px 0;
	}
	100% {
		background-position: 0px 0;
	}
}
@keyframes cars02 {
	0% {
		background-position: -831px 0;
	}
	100% {
		background-position: 1710px 0;
	}
}
@keyframes cars-vibe {
	0% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-1px);
	}
}

@keyframes lex {
	0% {
		transform: translateY(0) rotateY(0) perspective(300px);
	}
	10% {
		transform: translateY(0) rotateY(-45deg) perspective(2000px);
	}
	20% {
		transform: translateY(0) rotateY(45deg) perspective(2000px);
	}
	30% {
		transform: translateY(0) rotateY(0);
	}
	80% {
		transform: translateY(0);
	}
	85% {
		transform: translateY(-5px) rotate(2deg);
	}
	90% {
		transform: translateY(0);
	}
	95% {
		transform: translateY(-5px) rotate(2deg);
	}
	100% {
		transform: translateY(0);
	}
}
@keyframes lex-turn {
	0% {
		transform: rotateY(0) perspective(300px);
	}
	100% {
		transform: rotateY(180deg) perspective(300px);
	}
}
@keyframes lex-r {
	0% {
		transform: translateY(0) rotateY(180deg) perspective(300px);
	}
	10% {
		transform: translateY(0) rotateY(135deg) perspective(2000px);
	}
	20% {
		transform: translateY(0) rotateY(225deg) perspective(2000px);
	}
	30% {
		transform: translateY(0) rotateY(180deg);
	}
	80% {
		transform: translateY(0) rotateY(180deg);
	}
	85% {
		transform: translateY(-5px) rotate(-2deg) rotateY(180deg);
	}
	90% {
		transform: translateY(0) rotateY(180deg);
	}
	95% {
		transform: translateY(-5px) rotate(-2deg) rotateY(180deg);
	}
	100% {
		transform: translateY(0) rotateY(180deg);
	}
}