@charset "utf-8";

/*============================================================
	scroll animation
*/
.fadein {
	opacity: 0;
	transition: opacity 0.6s linear;
}
.fadein.active {
	opacity: 1;
}
.fadein-up {
	opacity: 0;
	transform: translateY(40px);
	transition: opacity 0.6s linear, transform 1s ease;
}
.fadein-up.active {
	opacity: 1;
	transform: translateY(0);
}

/*============================================================
	animation title
*/
.theme section .detail .title {
	transition: all 0.6s cubic-bezier(0.33, 1, 0.68, 1);
	opacity: 0;
}
.landscape-view .theme section .detail .title {
  transform: translate(20%, 0%);
}
.portrait-view .theme section .detail .title {
  transform: translate(0%, 20%);
}
.theme section.start .detail .title {
	transform: translate(0%, 0%) !important;
	opacity: 1;
}

/*============================================================
	animation theme01
*/
.theme01 .anim span {
	opacity: 0;
}
.theme01 .anim .l01 {
	transform: scale(0);
}
/* 富士山 */
.theme01 .anim .l03 .g {
	transform: translate(0, 10%);
	opacity: 0;
}
.theme01.start .anim .l03 .g {
	transform: translate(0, 0);
	opacity: 1;
	transition: all 0.6s ease 0s;
}
/* メイン人物 */
.theme01 .anim .l04 {
	transform: scale(0.2);
	transform-origin: 69.7% 29.9%;
}
.theme01.start .anim .l04 {
	transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s, opacity 0.4s ease 0.6s;
	transform: scale(1);
}
.theme01.start .anim .l04 img {
	animation: 3s t01-l04 infinite cubic-bezier(0.37, 0, 0.63, 1) 1.3s;
}
@keyframes t01-l04 {
  0%, 100% {
    transform: translateY(0%);
  }
  50% {
    transform: translateY(-4%);
  }
}
/* サブ人物1 */
.theme01.start .anim .l05 {
	transition: opacity 0.6s linear 1.2s;
}
.theme01.start .anim .l05 .g {
	animation: 3s t01-l05 infinite cubic-bezier(0.37, 0, 0.63, 1) 0.5s;
}
@keyframes t01-l05 {
  0%, 100% {
    transform: translateY(2%);
  }
  50% {
    transform: translateY(-2%);
  }
}
/* サブ人物2 */
.theme01.start .anim .l06 {
	transition: opacity 0.6s linear 1.2s;
}
.theme01.start .anim .l06 img {
	animation: 2.4s t01-l06 infinite cubic-bezier(0.37, 0, 0.63, 1);
}
@keyframes t01-l06 {
  0%, 100% {
    transform: translateY(1%);
  }
  50% {
    transform: translateY(-1%);
  }
}
/* サブ人物3 */
.theme01.start .anim .l07 {
	transition: opacity 0.6s linear 1.2s;
}
.theme01.start .anim .l07 img {
	animation: 3s t01-l07 infinite cubic-bezier(0.37, 0, 0.63, 1) 1s;
}
@keyframes t01-l07 {
  0%, 100% {
    transform: translateY(1%);
  }
  50% {
    transform: translateY(-1%);
  }
}
/* サブ人物4 */
.theme01.start .anim .l08 {
	transition: opacity 0.6s linear 1.2s;
}
.theme01.start .anim .l08 .g {
	animation: 2.4s t01-l08 infinite cubic-bezier(0.37, 0, 0.63, 1);
}
@keyframes t01-l08 {
  0%, 100% {
    transform: translateY(1%);
  }
  50% {
    transform: translateY(-1%);
  }
}
/* サブ人物5 */
.theme01.start .anim .l09 {
	transition: opacity 0.6s linear 1.2s;
}
.theme01.start .anim .l09 .g {
	animation: 3s t01-l09 infinite cubic-bezier(0.37, 0, 0.63, 1) 1s;
}
@keyframes t01-l09 {
  0%, 100% {
    transform: translateY(1%);
  }
  50% {
    transform: translateY(-1%);
  }
}
/* 太陽 */
.theme01 .anim .l02 {
	transform: translate(20%, 20%);
}
.theme01.start .anim .l02 {
	transition: all 0.6s ease 1.8s;
}
/* 紙吹雪 */
.theme01 .anim .l10 {
	transform: translate(5%, -5%);
}
.theme01.start .anim .l10 {
	transition: all 0.6s ease 1.8s;
}
.theme01.start .anim .l10 .p1 {
  animation: 3s t01-l10-01 infinite cubic-bezier(0.37, 0, 0.63, 1) 1.8s;
}
.theme01.start .anim .l10 .p2 {
  animation: 2.4s t01-l10-02 infinite cubic-bezier(0.37, 0, 0.63, 1) 1.8s;
}
.theme01.start .anim .l10 .p3 {
  animation: 3.2s t01-l10-03 infinite cubic-bezier(0.37, 0, 0.63, 1) 1.8s;
}
.theme01.start .anim .l10 .p4 {
  animation: 2.6s t01-l10-04 infinite cubic-bezier(0.37, 0, 0.63, 1) 1.8s;
}
@keyframes t01-l10-01 {
  0%, 100% {
    transform: translate(1%, 0) rotate(10deg);
  }
  50% {
    transform: translate(-1%, 0) rotate(-10deg);
  }
}
@keyframes t01-l10-02 {
  0%, 100% {
    transform: translate(1%, 0) rotate(10deg);
  }
  50% {
    transform: translate(-1%, 0) rotate(-10deg);
  }
}
@keyframes t01-l10-03 {
  0%, 100% {
    transform: translate(-1.2%, 0) rotate(10deg);
  }
  50% {
    transform: translate(1.2%, 0) rotate(-10deg);
  }
}
@keyframes t01-l10-03 {
  0%, 100% {
    transform: translate(-0.8%, 0) rotate(10deg);
  }
  50% {
    transform: translate(0.8%, 0) rotate(-10deg);
  }
}
@keyframes t01-l10-04 {
  0%, 100% {
    transform: translate(1.2%, 0) rotate(10deg);
  }
  50% {
    transform: translate(-1.2%, 0) rotate(-10deg);
  }
}
/**/
.theme01.start .anim > span {
	opacity: 1;
	transform: translate(0, 0);
}

/*============================================================
	animation theme02
*/
.theme02 .anim > span {
	opacity: 0;
}
.theme02 .anim .l01 {
	transform: scale(0);
}
/* 猫 */
.theme02 .anim .l06 .g {
	transform: translate(10%, 10%);
	opacity: 0;
}
.theme02.start .anim .l06 .g {
	transition: all 0.8s ease 0s;
	transform: translate(0, 0);
	opacity: 1;
}
/* 猫鈴 */
.theme02 .anim .l07 {
	transform: translate(10%, 10%);
}
.theme02.start .anim .l07 {
	transition: all 0.8s ease 0s;
}
/* 日本 */
.theme02 .anim .l02 .g {
	transform: translate(-10%, 10%);
	opacity: 0;
}
.theme02.start .anim .l02 .g {
	transition: all 0.8s ease 0s;
	transform: translate(0, 0);
	opacity: 1;
}
/* メイン人物 */
.theme02 .anim .l11 {
	transform: scale(0.2);
	transform-origin: 80% 24.5%;
}
.theme02.start .anim .l11 {
	transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s, opacity 0.4s ease 0.6s;
	transform: scale(1);
}
.theme02.start .anim .l11 img {
	animation: 5s t02-l11 infinite cubic-bezier(0.37, 0, 0.63, 1) 1.3s;
}
@keyframes t02-l11 {
  0%, 100% {
    transform: translateX(0%);
  }
  50% {
    transform: translateX(-5%);
  }
}
/* 雲1 */
.theme02.start .anim .l03 {
	transition: opacity 0.6s linear 1.2s;
}
.theme02.start .anim .l03 img {
	animation: 5s t02-l03 infinite cubic-bezier(0.37, 0, 0.63, 1);
}
@keyframes t02-l03 {
  0%, 100% {
    transform: translateX(-3%);
  }
  50% {
    transform: translateX(3%);
  }
}
/* 雲2 */
.theme02.start .anim .l04 {
	transition: opacity 0.6s linear 1.2s;
}
.theme02.start .anim .l04 img {
	animation: 6s t02-l04 infinite cubic-bezier(0.37, 0, 0.63, 1) 1s;
}
@keyframes t02-l04 {
  0%, 100% {
    transform: translateX(2%);
  }
  50% {
    transform: translateX(-2%);
  }
}
/* 雲3 */
.theme02.start .anim .l05 {
	transition: opacity 0.6s linear 1.2s;
}
.theme02.start .anim .l05 img {
	animation: 6s t02-l05 infinite cubic-bezier(0.37, 0, 0.63, 1) 1s;
}
@keyframes t02-l05 {
  0%, 100% {
    transform: translateX(2%);
  }
  50% {
    transform: translateX(-2%);
  }
}
/* 雲4 */
.theme02.start .anim .l08 {
	transition: opacity 0.6s linear 1.2s;
}
.theme02.start .anim .l08 img {
	animation: 7s t02-l08 infinite cubic-bezier(0.37, 0, 0.63, 1) 1s;
}
@keyframes t02-l08 {
  0%, 100% {
    transform: translateX(-2%);
  }
  50% {
    transform: translateX(2%);
  }
}
/* 雲5 */
.theme02.start .anim .l09 {
	transition: opacity 0.6s linear 1.2s;
}
.theme02.start .anim .l09 img {
	animation: 5s t02-l09 infinite cubic-bezier(0.37, 0, 0.63, 1);
}
@keyframes t02-l09 {
  0%, 100% {
    transform: translateX(-2%);
  }
  50% {
    transform: translateX(2%);
  }
}
/* 雲6 */
.theme02.start .anim .l10 {
	transition: opacity 0.6s linear 1.2s;
}
.theme02.start .anim .l10 img {
	animation: 6s t02-l10 infinite cubic-bezier(0.37, 0, 0.63, 1) 1s;
}
@keyframes t02-l10 {
  0%, 100% {
    transform: translateX(2%);
  }
  50% {
    transform: translateX(-2%);
  }
}
/* 魚 */
.theme02 .anim .l12 {
	transform: translate(-5%, 5%);
}
.theme02.start .anim .l12 {
	transition: transform 0.6s ease 1.8s, opacity 0.6s ease 1.8s;
}
.theme02.start .anim .l12 img {
	animation: 3s t02-l12 infinite cubic-bezier(0.37, 0, 0.63, 1) 2.6s;
}
@keyframes t02-l12 {
  0%, 100% {
    transform: translateY(0%);
  }
  50% {
    transform: translateY(-3%);
  }
}
/* 鳥1 */
.theme02.start .anim .l13 {
	transition: opacity 1s ease 1.8s;
}
.theme02.start .anim .l13 .g {
	animation: 3.6s t02-l13 infinite cubic-bezier(0.37, 0, 0.63, 1) 1s;
}
.theme02 .anim .l13 .g .i01 {
	transform-origin: 56% 12.84%;
}
.theme02.start .anim .l13 .g .i01 {
	animation: 2s t02-patapata-left infinite ease 1s;
}
.theme02 .anim .l13 .g .i02 {
	transform-origin: 58% 12.9%;
}
.theme02.start .anim .l13 .g .i02 {
	animation: 2s t02-patapata-right infinite ease 1s;
}
@keyframes t02-l13 {
  0%, 100% {
    transform: translateY(2%);
  }
  50% {
    transform: translateY(-2%);
  }
}
/* 鳥2 */
.theme02.start .anim .l14 {
	transition: opacity 1s ease 1.8s;
}
.theme02.start .anim .l14 .g {
	animation: 4s t02-l14 infinite cubic-bezier(0.37, 0, 0.63, 1);
}
.theme02 .anim .l14 .g .i01 {
	transform-origin: 24.7% 65%;
}
.theme02.start .anim .l14 .g .i01 {
	animation: 2s t02-patapata-left infinite ease 1s;
}
.theme02 .anim .l14 .g .i02 {
	transform-origin: 26% 65.9%;
}
.theme02.start .anim .l14 .g .i02 {
	animation: 2s t02-patapata-right infinite ease 1s;
}
@keyframes t02-l14 {
  0%, 100% {
    transform: translateY(2%);
  }
  50% {
    transform: translateY(-2%);
  }
}
/**/
.theme02.start .anim > span {
	opacity: 1;
	transform: translate(0, 0);
}
/**/
@keyframes t02-patapata-left {
  0% {
    transform: rotate(15deg);
  }
  50% {
    transform: rotate(-30deg);
  }
	100% {
    transform: rotate(15deg);
  }
}
@keyframes t02-patapata-right {
  0% {
    transform: rotate(-15deg);
  }
  50% {
    transform: rotate(30deg);
  }
	100% {
    transform: rotate(-15deg);
  }
}

/*============================================================
	animation theme03
*/
.theme03 .anim > span {
	opacity: 0;
}
.theme03 .anim .l01 {
	opacity: 0;
}
.theme03 .anim .l02 {
	transition: all 0.6s ease 0s;
}
/* 電球 */
.theme03 .anim .l03 .g {
	transform: translate(12%, 15%);
	opacity: 0;
	transition: all 0.6s ease 0s;
}
.theme03.start .anim .l03 .g {
	transform: translate(0, 0);
	opacity: 1;
}
.theme03 .anim .l04 {
	transition: all 0.4s ease 0.6s;
}
.theme03 .anim .l05 {
	transition: all 0.4s ease 0.6s;
}
.theme03 .anim .l06 {
	transition: all 0.4s ease 0.6s;
}
.theme03 .anim .l07 {
	transition: all 0.4s ease 0.6s;
}
.theme03 .anim .l03-g01 {
	fill: #fff;
	opacity: 0.5;
}
.theme03 .anim .l03-g02 {
	fill: #fff;
	opacity: 0.2;
}
/* メイン人物 */
.theme03 .anim .l14 {
	transform: scale(0.2);
	transform-origin: 29% 54%;
}
.theme03.start .anim .l14 {
	transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s, opacity 0.4s linear 0.6s;
	transform: scale(1);
}
.theme03.start .anim .l14 img {
	animation: 3s t04-l04 infinite cubic-bezier(0.37, 0, 0.63, 1) 1.1s;
}
/* 星 */
.theme03.start .anim .l08 {
	transition: all 0.6s linear 2s;
}
.theme03 .anim .l08-01 img {
	transform-origin: 52% 16.6%;
}
.theme03.start .anim .l08-01 img {
	animation: 3s t03-l08 infinite cubic-bezier(0.37, 0, 0.63, 1) 1.2s;
}
.theme03 .anim .l08-02 img {
	transform-origin: 14.6% 52%;
}
.theme03.start .anim .l08-02 img {
	animation: 3s t03-l08 infinite cubic-bezier(0.37, 0, 0.63, 1) 0.8s;
}
.theme03 .anim .l08-03 img {
	transform-origin: 86.4% 54.7%;
}
.theme03.start .anim .l08-03 img {
	animation: 3s t03-l08 infinite cubic-bezier(0.37, 0, 0.63, 1) 0s;
}
.theme03 .anim .l08-04 img {
	transform-origin: 40.7% 78.6%;
}
.theme03.start .anim .l08-04 img {
	animation: 3s t03-l08 infinite cubic-bezier(0.37, 0, 0.63, 1) 0.4s;
}
@keyframes t03-l08 {
	0%, 100% {
		transform: scale(0.8);
	}
	50% {
		transform: scale(1.2);
	}
}
/* 小物 */
.theme03 .anim .l09 {
	transition: all 0.6s linear 1.2s;
}
.theme03 .anim .l09 img {
	animation: 3.6s t04-l07 infinite cubic-bezier(0.37, 0, 0.63, 1) 1s;
}
.theme03.start .anim .l10 {
	transition: all 0.6s linear 1.6s;
}
.theme03 .anim .l10 img {
	animation: 4s t04-l05 infinite cubic-bezier(0.37, 0, 0.63, 1) 1s;
}
.theme03.start .anim .l11 {
	transition: all 0.6s linear 1.2s;
}
.theme03 .anim .l11 img {
	animation: 5s t04-l06 infinite cubic-bezier(0.37, 0, 0.63, 1) 1s;
}
.theme03.start .anim .l12 {
	transition: all 0.6s linear 1.6s;
}
.theme03 .anim .l12 img {
	animation: 4s t04-l07 infinite cubic-bezier(0.37, 0, 0.63, 1) 1s;
}
.theme03.start .anim .l13 {
	transition: all 0.6s linear 1.6s;
}
.theme03 .anim .l13 img {
	animation: 3.4s t04-l08 infinite cubic-bezier(0.37, 0, 0.63, 1) 1s;
}
/* start */
.theme03.start .anim > span {
	opacity: 1;
}

/*============================================================
	animation theme04
*/
.theme04 .anim > span {
	opacity: 0;
}
.theme04 .anim .l01 {
	opacity: 0;
}
/* 地球 */
.theme04 .anim .l03 .g {
	transform: translate(10%, 10%);
	opacity: 0;
}
.theme04.start .anim .l03 .g {
	transition: all 0.6s ease 0s;
	transform: translate(0, 0);
	opacity: 1;
}
/* メイン人物 */
.theme04 .anim .l04 {
	transform: scale(0.2);
	transform-origin: 33% 33.4%;
}
.theme04.start .anim .l04 {
	transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s, opacity 0.4s ease 0.6s;
	transform: scale(1);
}
.theme04.start .anim .l04 img {
	animation: 3s t04-l04 infinite cubic-bezier(0.37, 0, 0.63, 1) 1.3s;
}
@keyframes t04-l04 {
  0%, 100% {
    transform: translateY(0%);
  }
  50% {
    transform: translateY(4.6%);
  }
}
/* 背景丸 */
.theme04.start .anim .l02 {
	transition: opacity 0.6s linear 0.6s;
}
/* 箱1 */
.theme04 .anim .l05 {
	transform: translate(10%, -10%);
}
.theme04.start .anim .l05 {
	transition: all 0.6s ease 1s;
}
.theme04.start .anim .l05 img {
	animation: 3.4s t04-l05 infinite cubic-bezier(0.37, 0, 0.63, 1) 1.8s;
}
@keyframes t04-l05 {
  0%, 100% {
    transform: translateY(0%);
  }
  50% {
    transform: translateY(-3%);
  }
}
/* 箱2 */
.theme04 .anim .l06 {
	transform: translate(10%, 10%);
}
.theme04.start .anim .l06 {
	transition: all 0.6s ease 1s;
}
.theme04.start .anim .l06 img {
	animation: 5s t04-l06 infinite cubic-bezier(0.37, 0, 0.63, 1) 1.8s;
}
@keyframes t04-l06 {
  0%, 100% {
    transform: translateY(0%);
  }
  50% {
    transform: translateY(2%);
  }
}
/* 箱3 */
.theme04 .anim .l07 {
	transform: translate(-10%, -10%);
}
.theme04.start .anim .l07 {
	transition: all 0.6s ease 1s;
}
.theme04.start .anim .l07 img {
	animation: 4s t04-l07 infinite cubic-bezier(0.37, 0, 0.63, 1) 1.8s;
}
@keyframes t04-l07 {
  0%, 100% {
    transform: translateY(0%);
  }
  50% {
    transform: translateY(2%);
  }
}
/* 箱4 */
.theme04 .anim .l08 {
	transform: translate(-10%, 10%);
}
.theme04.start .anim .l08 {
	transition: all 0.6s ease 1s;
}
.theme04.start .anim .l08 img {
	animation: 3s t04-l08 infinite cubic-bezier(0.37, 0, 0.63, 1) 1.8s;
}
@keyframes t04-l08 {
  0%, 100% {
    transform: translateY(0%);
  }
  50% {
    transform: translateY(4%);
  }
}
/* じょうろ,草 */
.theme04.start .anim .l09 {
	transition: opacity 0.8s linear 1.6s;
}
/* 水1 */
.theme04.start .anim .l10 {
	opacity: 1;
}
.theme04 .anim .l10 .path {
	stroke-dasharray: 1000;
	stroke-dashoffset: 1000;
}
.theme04.start .anim .l10 .path {
	animation: 8s water-line01 infinite cubic-bezier(0.65, 0, 0.35, 1) 2s;
}
@keyframes water-line01 {
  0% {
    stroke-dashoffset: 1000;
  }
	20% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
/* 水2 */
.theme04.start .anim .l11 {
	opacity: 1;
}
.theme04 .anim .l11 .path {
	stroke-dasharray: 1000;
	stroke-dashoffset: 1000;
}
.theme04.start .anim .l11 .path {
	animation: 8s water-line02 infinite cubic-bezier(0.65, 0, 0.35, 1) 2s;
}
@keyframes water-line02 {
  0% {
    stroke-dashoffset: 1000;
  }
	3% {
    stroke-dashoffset: 1000;
  }
	23% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
/* 水3 */
.theme04.start .anim .l12 {
	opacity: 1;
}
.theme04 .anim .l12 .path {
	stroke-dasharray: 1000;
	stroke-dashoffset: 1000;
}
.theme04.start .anim .l12 .path {
	animation: 8s water-line03 infinite cubic-bezier(0.65, 0, 0.35, 1) 2s;
}
@keyframes water-line03 {
  0% {
    stroke-dashoffset: 1000;
  }
	6% {
    stroke-dashoffset: 1000;
  }
	26% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
/* start */
.theme04.start .anim > span {
	opacity: 1;
	transform: translate(0, 0);
}

/*============================================================
	animation theme05
*/
.theme05 .anim > span {
	opacity: 0;
}
.theme05 .anim .l01 {
	opacity: 0;
}
/* フォルダ(小) */
.theme05 .anim .l02 {
	transform: translate(3%, 6%);
	opacity: 0;
}
.theme05.start .anim .l02 {
	transition: opacity 0.6s ease 1s, transform 0.6s ease 1s;
}
.theme05 .anim .l02 span {
	height: 100%;
}
.theme05 .anim .l02-02 {
	transform-origin: 44.4% 19.7%;
}
.theme05.start .anim .l02-02 {
	animation: 3s t05-l02-02 infinite cubic-bezier(0.37, 0, 0.63, 1) 1s;
}
.theme05.start .anim .l02 img {
  animation: 5s t05-l02 infinite cubic-bezier(0.37, 0, 0.63, 1) 1s;
}
@keyframes t05-l02 {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(1.4%);
  }
}
@keyframes t05-l02-02 {
  0%, 100% {
    transform: rotate(0) translateY(0);
  }
  50% {
    transform: rotate(-6deg) translateY(-1%);
  }
}
/* フォルダ(中) */
.theme05 .anim .l03 {
	transform: translate(-5%, 3%);
	opacity: 0;
}
.theme05.start .anim .l03 {
	transition: opacity 0.6s ease 0.7s, transform 0.6s ease 0.7s;
}
.theme05 .anim .l03 span {
	height: 100%;
}
.theme05 .anim .l03-02 {
	transform-origin: 69.6% 27.6%;
}
.theme05.start .anim .l03-02 {
	animation: 3s t05-l04-04 infinite cubic-bezier(0.37, 0, 0.63, 1) 0.7s;
}
.theme05.start .anim .l03 img {
  animation: 4s t05-l03 infinite cubic-bezier(0.37, 0, 0.63, 1) 0.2s;
}
@keyframes t05-l03 {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(2%);
  }
}
/* フォルダ(大) */
.theme05 .anim .l04 span {
	height: 100%;
}
.theme05 .anim .l04-01,
.theme05 .anim .l04-02,
.theme05 .anim .l04-03,
.theme05 .anim .l04-04 {
	opacity: 0;
}
.theme05.start .anim .l04-01,
.theme05.start .anim .l04-03,
.theme05.start .anim .l04-04 {
	transition: opacity 1s ease 0s;
	opacity: 1;
}
.theme05 .anim .l04-01 img {
	transform: translate(-10%, 38%);
}
.theme05.start .anim .l04-01 img {
	transition: transform 1s cubic-bezier(0.65, 0, 0.35, 1) 0s;
}
.theme05 .anim .l04-02 img {
	transform: translate(-10%, 38%);
}
.theme05.start .anim .l04-02 img {
	transition: transform 1s cubic-bezier(0.65, 0, 0.35, 1) 0s;
}
.theme05 .anim .l04-03 span {
	transform: translate(-10%, 38%);
}
.theme05.start .anim .l04-03 span {
	transition: transform 1s cubic-bezier(0.65, 0, 0.35, 1) 0s;
}
.theme05 .anim .l04-03 span img {
	transform-origin: 38.2% 46.5%;
}
.theme05.start .anim .l04-03 span img {
	animation: 4s t05-l04-04 infinite cubic-bezier(0.37, 0, 0.63, 1) 1s;
}
.theme05 .anim .l04-04 img {
	transform: translate(-10%, 38%);
}
.theme05.start .anim .l04-04 img {
	transition: transform 1s cubic-bezier(0.65, 0, 0.35, 1) 0s;
}
.theme05.start .anim .l04-01 img,
.theme05.start .anim .l04-02 img,
.theme05.start .anim .l04-03 span,
.theme05.start .anim .l04-04 img {
	transform: translate(0, 0);
}
@keyframes t05-l04-04 {
  0%, 100% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(-20deg);
  }
}
.theme05.start .anim .l04-02,
.theme05.start .anim .l04-05 {
	transition: opacity 0.6s ease 1s;
	opacity: 1;
}
.theme05.start .anim .l04,
.theme05.start .anim .l04-05 img {
  animation: 3s t05-l04 infinite cubic-bezier(0.37, 0, 0.63, 1) 1s;
}
@keyframes t05-l04 {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(3%);
  }
}
/* 星 */
.theme05.start .anim .l05 {
	transition: opacity 0.6s ease 1.4s;
}
.theme05 .anim .l05 img {
  transform-origin: 57.3% 37.4%;
}
.theme05.start .anim .l05 img {
  animation: 3s t03-l08 infinite cubic-bezier(0.37, 0, 0.63, 1) 0.6s;
}
.theme05.start .anim .l06 {
	transition: opacity 0.6s ease 1.4s;
}
.theme05 .anim .l06 img {
  transform-origin: 43.7% 34.8%;
}
.theme05.start .anim .l06 img {
  animation: 3s t03-l08 infinite cubic-bezier(0.37, 0, 0.63, 1) 1.4s;
}
.theme05.start .anim .l07 {
	transition: opacity 0.6s ease 1.6s;
}
.theme05 .anim .l07 img {
  transform-origin: 49.3% 24.8%;
}
.theme05.start .anim .l07 img {
  animation: 3s t03-l08 infinite cubic-bezier(0.37, 0, 0.63, 1) 0.3s;
}
.theme05.start .anim .l08 {
	transition: opacity 0.6s ease 1.4s;
}
.theme05 .anim .l08 img {
  transform-origin: 80.8% 53.4%;
}
.theme05.start .anim .l08 img {
  animation: 3s t03-l08 infinite cubic-bezier(0.37, 0, 0.63, 1) 0.6s;
}
.theme05.start .anim .l09 {
	transition: opacity 0.6s ease 1.8s;
}
.theme05 .anim .l09 img {
  transform-origin: 41.7% 78.4%;
}
.theme05.start .anim .l09 img {
  animation: 3s t03-l08 infinite cubic-bezier(0.37, 0, 0.63, 1) 1.4s;
}

/* start */
.theme05.start .anim .l02,
.theme05.start .anim .l03 {
	transform: translate(0, 0);
}
.theme05.start .anim .l04-01 .g,
.theme05.start .anim .l04-04 .g1,
.theme05.start .anim .l04-04 .g2 {
	transform: translate(0, 0);
}
.theme05.start .anim > span {
	opacity: 1;
}

/*============================================================
	animation theme06
*/
.theme06 .anim .l01 {
	transform: scale(0);
}
.theme06 .anim .l02 .g {
	transform: translate(-20%, 20%);
	opacity: 0;
	transition: all 1s ease 0s;
}
.theme06.start .anim .l02 .g {
	opacity: 1;
	transform: translate(0, 0);
}
.theme06.start .anim .l02 .g {
	animation: 4s t06-l02 infinite cubic-bezier(0.37, 0, 0.63, 1) 1s;
}
@keyframes t06-l02 {
	0% {
		transform: translateY(0%);
	}
	50% {
		transform: translateY(-3%);
	}
	100% {
		transform: translateY(0%);
	}
}
.theme06 .anim .l03 {
	opacity: 0;
	transition: opacity 1s linear 1s;
}
.theme06.start .anim .l03 {
	opacity: 1;
}
.theme06.start .anim .l03 img {
	animation: 4s t06-l03 infinite cubic-bezier(0.37, 0, 0.63, 1);
}
@keyframes t06-l03 {
	0% {
		transform: rotate(0deg) translateY(0%);
	}
	50% {
		transform: rotate(5deg) translateY(-5%);
	}
	100% {
		transform: rotate(0deg) translateY(0%);
	}
}
.theme06 .anim .lg01 {
	position: absolute;
	top: calc(90 / 1920 * 100%) !important;
	left: calc(380 / 1920 * 100%) !important;
	width: 60% !important;
	height: 60% !important;
	opacity: 0;
	transition: opacity 1s ease 1s;
}
.theme06.start .anim .lg01 {
	opacity: 1;
}
.theme06 .anim .lg01 > span {
	position: absolute;
	width: 25% !important;
	transform: translate(-50%, -50%) !important;
}
.theme06 .anim .lg01 > span i {
	display: block;
}
.theme06 .anim .lg01 .l04 {
	top: calc(561 / 1152 * 100%) !important;
	left: calc(124 / 1152 * 100%) !important;
}
.theme06 .anim .lg01 .l05 {
	top: calc(918 / 1152 * 100%) !important;
	left: calc(168 / 1152 * 100%) !important;
}
.theme06 .anim .lg01 .l06 {
	top: calc(963 / 1152 * 100%) !important;
	left: calc(748 / 1152 * 100%) !important;
}
.theme06 .anim .lg01 .l07 {
	top: calc(579 / 1152 * 100%) !important;
	left: calc(1035 / 1152 * 100%) !important;
}
.theme06 .anim .lg01 .l08 {
	top: calc(174 / 1152 * 100%) !important;
	left: calc(742 / 1152 * 100%) !important;
}
.theme06 .anim .lg01 .l09 {
	top: calc(311 / 1152 * 100%) !important;
	left: calc(209 / 1152 * 100%) !important;
}
.theme06 .anim .lg01 .l10 {
	top: calc(745 / 1152 * 100%) !important;
	left: calc(88 / 1152 * 100%) !important;
}
.theme06 .anim .lg01 .l11 {
	top: calc(1051 / 1152 * 100%) !important;
	left: calc(397 / 1152 * 100%) !important;
}
.theme06 .anim .lg01 .l12 {
	top: calc(760 / 1152 * 100%) !important;
	left: calc(910 / 1152 * 100%) !important;
}
.theme06 .anim .lg01 .l13 {
	top: calc(325 / 1152 * 100%) !important;
	left: calc(986 / 1152 * 100%) !important;
}
.theme06 .anim .lg01 .l14 {
	top: calc(159 / 1152 * 100%) !important;
	left: calc(451 / 1152 * 100%) !important;
}
.theme06.start .anim .lg01 .l04 i,
.theme06.start .anim .lg01 .l05 i,
.theme06.start .anim .lg01 .l06 i,
.theme06.start .anim .lg01 .l07 i,
.theme06.start .anim .lg01 .l09 i {
	/*animation: 30s t06-r infinite linear;*/
}
.theme06.start .anim .lg01 {
	/*animation: 30s t06-lg01 infinite linear;*/
}
.theme06 .anim .l15,
.theme06 .anim .l16,
.theme06 .anim .l17 {
	opacity: 0;
	transition: opacity 1s linear 1s;
}
.theme06.start .anim .l15,
.theme06.start .anim .l16,
.theme06.start .anim .l17 {
	opacity: 1;
}
.theme06.start .anim .l15 img {
	animation: 4s t06-l15 infinite cubic-bezier(0.37, 0, 0.63, 1);
}
.theme06.start .anim .l16 img {
	animation: 3s t06-l15 infinite cubic-bezier(0.37, 0, 0.63, 1) 1s;
}
.theme06.start .anim .l17 img {
	animation: 4s t06-l15 infinite cubic-bezier(0.37, 0, 0.63, 1) 1s;
}
@keyframes t06-l15 {
	0%, 100% {
		transform: translateY(1%);
	}
	50% {
		transform: translateY(-2%);
	}
}
@keyframes t06-l17 {
	0%, 100% {
		transform: translateY(-2%);
	}
	50% {
		transform: translateY(1%);
	}
}
@keyframes t06-lg01 {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(-360deg);
	}
}
@keyframes t06-r {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

/**/
.theme06.start .anim > span {
	opacity: 1;
}

/*============================================================
	animation theme07
*/
.theme07 .anim > span {
	opacity: 0;
}
.theme07 .anim .l01 {
	transform: scale(0);
}
/* 飛行機 */
.theme07 .anim .l03 .g {
	transform: translate(-10%, 10%);
	opacity: 0;
}
.theme07.start .anim .l03 .g {
	transition: all 0.6s ease 0s;
	transform: translate(0, 0);
	opacity: 1;
}
/* 雲1 */
.theme07.start .anim .l04 {
	transition: opacity 0.6s ease 0s;
}
.theme07.start .anim .l04 img {
	animation: 4.5s t07-l04 infinite cubic-bezier(0.37, 0, 0.63, 1) 0s;
}
@keyframes t07-l04 {
  0%, 100% {
    transform: translateX(2%);
  }
  50% {
    transform: translateX(-2%);
  }
}
/* 雲2 */
.theme07.start .anim .l05 {
	transition: opacity 0.6s ease 0s;
}
.theme07.start .anim .l05 img {
	animation: 4s t07-l05 infinite cubic-bezier(0.37, 0, 0.63, 1) 0s;
}
@keyframes t07-l05 {
  0%, 100% {
    transform: translateX(-1%);
  }
  50% {
    transform: translateX(1%);
  }
}
/* 雲3 */
.theme07.start .anim .l06 {
	transition: opacity 0.6s ease 0s;
}
.theme07.start .anim .l06 img {
	animation: 5s t07-l06 infinite cubic-bezier(0.37, 0, 0.63, 1) 0s;
}
@keyframes t07-l06 {
  0%, 100% {
    transform: translateX(-1%);
  }
  50% {
    transform: translateX(1%);
  }
}
/* スーツケース */
.theme07.start .anim .l02 {
	transition: opacity 0.6s ease 0.6s;
}
.theme07.start .anim .l02 img {
	animation: 3s t07-l02 infinite cubic-bezier(0.37, 0, 0.63, 1) 0.6s;
}
@keyframes t07-l02 {
  0%, 100% {
    transform: translateY(-1%);
  }
  50% {
    transform: translateY(1%);
  }
}
/* サブ人物1 */
.theme07 .anim .l08 {
	transform: translate(-6%, 6%);
}
.theme07.start .anim .l08 {
	transition: all 0.6s ease 0.6s;
}
.theme07.start .anim .l08 .g {
	animation: 3s t07-l08 infinite cubic-bezier(0.37, 0, 0.63, 1) 1.4s;
}
.theme07.start .anim .l08 .i02 {
	transform-origin: 73.281% 61.979%;
	animation: 2s t07-wavehand infinite;
}
@keyframes t07-l08 {
  0%, 100% {
    transform: translateY(0%);
  }
  50% {
    transform: translateY(3%);
  }
}
@keyframes t07-wavehand {
  0% {
    transform: rotate(15deg);
  }
  50% {
    transform: rotate(-15deg);
  }
	100% {
    transform: rotate(15deg);
  }
}
/* サブ人物2 */
.theme07 .anim .l09 {
	transform: translate(-6%, 6%);
}
.theme07.start .anim .l09 {
	transition: all 0.6s ease 0.9s;
}
.theme07.start .anim .l09 img {
	animation: 3s t07-l09 infinite cubic-bezier(0.37, 0, 0.63, 1) 1.7s;
}
@keyframes t07-l09 {
  0%, 100% {
    transform: translateY(0%);
  }
  50% {
    transform: translateY(3%);
  }
}
/* サブ人物3 */
.theme07 .anim .l10 {
	transform: translate(-6%, 6%);
}
.theme07.start .anim .l10 {
	transition: all 0.6s ease 1.2s;
}
.theme07.start .anim .l10 img {
	animation: 3s t07-l10 infinite cubic-bezier(0.37, 0, 0.63, 1) 2.2s;
}
@keyframes t07-l10 {
  0%, 100% {
    transform: translateY(0%);
  }
  50% {
    transform: translateY(3%);
  }
}
/* スマホ */
.theme07.start .anim .l07 {
	transition: opacity 1s ease 1.5s;
}
.theme07.start .anim .l07 img {
	animation: 4s t07-l07 infinite cubic-bezier(0.37, 0, 0.63, 1) 0s;
}
@keyframes t07-l07 {
  0%, 100% {
    transform: translateY(1%);
  }
  50% {
    transform: translateY(-1%);
  }
}
/* PC */
.theme07.start .anim .l11 {
	transition: opacity 1s ease 1.5s;
}
.theme07.start .anim .l11 img {
	animation: 3s t07-l11 infinite cubic-bezier(0.37, 0, 0.63, 1) 0s;
}
@keyframes t07-l11 {
  0%, 100% {
    transform: translateY(-1%);
  }
  50% {
    transform: translateY(1%);
  }
}
/* メイン人物 */
.theme07 .anim .l12 {
	transform: scale(0.2);
	transform-origin: 33.8% 70%;
}
.theme07.start .anim .l12 {
	transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1.5s, opacity 0.4s ease 1.5s;
	transform: scale(1);
}
.theme07.start .anim .l12 img {
	animation: 3s t07-l12 infinite cubic-bezier(0.37, 0, 0.63, 1) 2.2s;
}
@keyframes t07-l12 {
  0%, 100% {
    transform: translateY(0%);
  }
  50% {
    transform: translateY(-4%);
  }
}
/* start */
.theme07.start .anim > span {
	opacity: 1;
	transform: translate(0, 0);
}

/*============================================================
	animation theme08
*/
.theme08 .anim > span {
	opacity: 0;
}
.theme08 .anim .l01 {
	transform: scale(0);
}
/* リンゴ */
.theme08 .anim .l03 .g {
	opacity: 0;
	transform: translate(10%, 0);
}
.theme08.start .anim .l03 .g {
	opacity: 1;
	transform: translate(0, 0);
	transition: all 0.6s ease 0s;
}
.theme08 .anim .l03 .g .s01 {
	opacity: 0;
}
.theme08 .anim .l03 .g .s02 {
	opacity: 0;
}
.theme08 .anim .l03 .g .s03 {
	opacity: 0;
}
.theme08 .anim .l03 .g .s04 {
	opacity: 0;
}
.theme08 .anim .l03 .g .s05 {
	opacity: 0;
}
.theme08.start .anim .l03 .g .s01 {
	animation: 6s t08-shine infinite 2s;
}
.theme08.start .anim .l03 .g .s02 {
	animation: 6s t08-shine infinite 2.2s;
}
.theme08.start .anim .l03 .g .s03 {
	animation: 6s t08-shine infinite 2.4s;
}
.theme08.start .anim .l03 .g .s04 {
	animation: 6s t08-shine infinite 2.6s;
}
.theme08.start .anim .l03 .g .s05 {
	animation: 6s t08-shine infinite 2.8s;
}
@keyframes t08-shine {
  0% {
    opacity: 0;
  }
  1% {
    opacity: 0.6;
  }
	2% {
    opacity: 0;
  }
	3% {
    opacity: 0.6;
  }
	10% {
    opacity: 0;
  }
	100% {
    opacity: 0;
  }
}
/* バーコード */
.theme08.start .anim .l02 {
	transition: all 0.6s ease 0.6s;
}
/* メイン人物 */
.theme08 .anim .l04 {
	transform: scale(0.2);
	transform-origin: 83% 44.9%;
}
.theme08.start .anim .l04 {
	transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s, opacity 0.4s ease 0.6s;
	transform: scale(1);
}
.theme08.start .anim .l04 img {
	animation: 5s t08-l04 infinite cubic-bezier(0.37, 0, 0.63, 1) 1.3s;
}
@keyframes t08-l04 {
  0%, 100% {
    transform: translateX(0%);
  }
  50% {
    transform: translateX(-5%);
  }
}
/* コード1 */
.theme08.start .anim .l08 {
	transition: opacity 0.6s linear 1.4s;
}
/* 箱1 */
.theme08.start .anim .l09 {
	transition: opacity 0.6s linear 1.4s;
}
.theme08.start .anim .l09 img {
	animation: 4s t08-l09 infinite cubic-bezier(0.37, 0, 0.63, 1) 1s;
}
@keyframes t08-l09 {
  0%, 100% {
    transform: translateY(0%);
  }
  50% {
    transform: translateY(-2%);
  }
}
/* 箱2 */
.theme08.start .anim .l10 {
	transition: opacity 0.6s linear 1.4s;
}
.theme08.start .anim .l10 img {
	animation: 3s t08-l10 infinite cubic-bezier(0.37, 0, 0.63, 1) 0s;
}
@keyframes t08-l10 {
  0%, 100% {
    transform: translateY(0%);
  }
  50% {
    transform: translateY(-2%);
  }
}
/* 箱3 */
.theme08.start .anim .l11 {
	transition: opacity 0.6s linear 1.4s;
}
.theme08.start .anim .l11 img {
	animation: 5s t08-l11 infinite cubic-bezier(0.37, 0, 0.63, 1) 0.6s;
}
@keyframes t08-l11 {
  0%, 100% {
    transform: translateY(0%);
  }
  50% {
    transform: translateY(-2%);
  }
}
/* コード2 */
.theme08.start .anim .l12 {
	transition: opacity 0.6s linear 1.4s;
}
/* 箱4 */
.theme08.start .anim .l13 {
	transition: opacity 0.6s linear 1.4s;
}
.theme08.start .anim .l13 img {
	animation: 4s t08-l13 infinite cubic-bezier(0.37, 0, 0.63, 1) 1s;
}
@keyframes t08-l13 {
  0%, 100% {
    transform: translateY(0%);
  }
  50% {
    transform: translateY(-2%);
  }
}
/* 箱5 */
.theme08.start .anim .l14 {
	transition: opacity 0.6s linear 1.4s;
}
.theme08.start .anim .l14 img {
	animation: 3s t08-l14 infinite cubic-bezier(0.37, 0, 0.63, 1) 0s;
}
@keyframes t08-l14 {
  0%, 100% {
    transform: translateY(0%);
  }
  50% {
    transform: translateY(-2%);
  }
}
/* 箱6 */
.theme08.start .anim .l15 {
	transition: opacity 0.6s linear 1.4s;
}
.theme08.start .anim .l15 img {
	animation: 3s t08-l15 infinite cubic-bezier(0.37, 0, 0.63, 1);
}
@keyframes t08-l15 {
  0%, 100% {
    transform: translateY(0%);
  }
  50% {
    transform: translateY(2%);
  }
}
/* 模型1 */
.theme08.start .anim .l05 {
	transition: opacity 0.6s linear 2s;
}
.theme08 .anim .l05 img {
	transform-origin: 74.531% 20.573%;
}
.theme08.start .anim .l05 img {
	animation: 10s t08-rotate01 infinite linear;
}
/* 模型2 */
.theme08.start .anim .l06 {
	transition: opacity 0.6s linear 2s;
}
.theme08 .anim .l06 img {
	transform-origin: 28.177% 77.291%;
}
.theme08.start .anim .l06 img {
	animation: 10s t08-rotate02 infinite linear;
}
/* 模型3 */
.theme08.start .anim .l07 {
	transition: opacity 0.6s linear 2s;
}
.theme08 .anim .l07 img {
	transform-origin: 68.385% 69.687%;
}
.theme08.start .anim .l07 img {
	animation: 10s t08-rotate01 infinite linear;
}
/**/
.theme08.start .anim > span {
	opacity: 1;
	transform: translate(0, 0);
}
/**/
@keyframes t08-rotate01 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes t08-rotate02 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}

/*============================================================
	animation theme09
*/
.theme09 .anim > span {
	opacity: 0;
}
.theme09 .anim .l01 {
	opacity: 0;
}
/* 鍋 */
.theme09 .anim .l03 .g {
	transform: translate(30%, 30%);
}
.theme09 .anim .l08 .g {
  transform-origin: 78.1% 38.6%;
	transform: translate(30%, 30%) rotate(-45deg);
}
.theme09.start .anim .l03 .g,
.theme09.start .anim .l08 .g {
	transition: transform 1s cubic-bezier(0.65, 0, 0.35, 1) 0s;
}
/* 人物 */
.theme09 .anim .l07-01,
.theme09 .anim .l07-02 {
	transform: scale(0.2);
	transform-origin: 30.6% 36.5%;
}
.theme09.start .anim .l07-01,
.theme09.start .anim .l07-02 {
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1s, opacity 0.4s ease 1s;
	transform: scale(1);
}
.theme09 .anim .l07-01 img,
.theme09 .anim .l07-02 img,
.theme09 .anim .l08 .g1 {
  transform-origin: 78.1% 38.6%;
}
.theme09.start .anim .l07-01 img,
.theme09.start .anim .l07-02 img,
.theme09.start .anim .l08 .g1 {
  animation: 3s t09-l07 infinite cubic-bezier(0.37, 0, 0.63, 1) 1.6s;
}
@keyframes t09-l07 {
  0%, 100% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(-4deg);
  }
}
.theme09 .anim .l07-02 > span {
  height: 100%;
  opacity: 0;
}
.theme09.start .anim .l07-02 > span {
  transition: opacity 0.1s ease 1.4s;
  opacity: 1;
}

/**/
.theme09.start .anim .l02 {
	transition: opacity 0.6s ease 2.5s;
}

/**/
.theme09.start .anim .l04 {
	transition: opacity 0.6s ease 1.6s;
}
.theme09.start .anim .l04 .g {
  animation: 3s t09-l04 infinite cubic-bezier(0.37, 0, 0.63, 1) 2s;
}
.theme09 .anim .l05 {
  transform: translate(4%, 8%);
}
.theme09.start .anim .l05 {
	transition: transform 0.6s cubic-bezier(0.33, 1, 0.68, 1) 1.6s, opacity 0.6s ease 1.6s;
}
.theme09.start .anim .l05 img {
  animation: 3s t09-l05 infinite cubic-bezier(0.37, 0, 0.63, 1) 1s;
}
.theme09 .anim .l06 {
  transform: translate(20%, 22%);
}
.theme09.start .anim .l06 {
	transition: transform 0.6s cubic-bezier(0.33, 1, 0.68, 1) 1.6s, opacity 0.6s ease 1.6s;
}
.theme09.start .anim .l06 img {
  animation: 4s t09-l06 infinite cubic-bezier(0.37, 0, 0.63, 1) 2s;
}
.theme09 .anim .l09 {
  transform: translate(17%, -2%);
}
.theme09.start .anim .l09 {
	transition: transform 0.6s cubic-bezier(0.33, 1, 0.68, 1) 1.6s, opacity 0.6s ease 1.6s;
}
.theme09.start .anim .l09 img {
  animation: 3s t09-l06 infinite cubic-bezier(0.37, 0, 0.63, 1) 1s;
}
.theme09 .anim .l10 {
  transform: translate(8%, 11.5%);
}
.theme09.start .anim .l10 {
	transition: transform 0.6s cubic-bezier(0.33, 1, 0.68, 1) 1.6s, opacity 0.6s ease 1.6s;
}
.theme09.start .anim .l10 img {
  animation: 3s t09-l06 infinite cubic-bezier(0.37, 0, 0.63, 1) 2s;
}
.theme09 .anim .l11 {
  transform: translate(2%, 13%);
}
.theme09.start .anim .l11 {
	transition: transform 0.6s cubic-bezier(0.33, 1, 0.68, 1) 1.6s, opacity 0.6s ease 1.6s;
}
.theme09.start .anim .l11 img {
  animation: 3.4s t09-l11 infinite cubic-bezier(0.37, 0, 0.63, 1) 2s;
}
.theme09 .anim .l12 {
  transform: translate(-4%, 11.4%);
}
.theme09.start .anim .l12 {
	transition: transform 0.6s cubic-bezier(0.33, 1, 0.68, 1) 1.6s, opacity 0.6s ease 1.6s;
}
.theme09.start .anim .l12 img {
  animation: 3s t09-l06 infinite cubic-bezier(0.37, 0, 0.63, 1) 1.6s;
}
.theme09 .anim .l13 {
  transform: translate(-13%, 0);
}
.theme09.start .anim .l13 {
	transition: transform 0.6s cubic-bezier(0.33, 1, 0.68, 1) 1.6s, opacity 0.6s ease 1.6s;
}
.theme09.start .anim .l13 img {
  animation: 3s t09-l11 infinite cubic-bezier(0.37, 0, 0.63, 1) 1.6s;
}
.theme09 .anim .l14 {
  transform: translate(-13%, 14%);
}
.theme09.start .anim .l14 {
	transition: transform 0.6s cubic-bezier(0.33, 1, 0.68, 1) 1.6s, opacity 0.6s ease 1.6s;
}
.theme09.start .anim .l14 img {
  animation: 3s t09-l14 infinite cubic-bezier(0.37, 0, 0.63, 1) 2s;
}
@keyframes t09-l04 {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(1%);
  }
}
@keyframes t09-l05 {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2%);
  }
}
@keyframes t09-l06 {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(2.5%);
  }
}
@keyframes t09-l11 {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2.5%);
  }
}
@keyframes t09-l14 {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3%);
  }
}

/* start */
.theme09.start .anim .l05,
.theme09.start .anim .l06,
.theme09.start .anim .l09,
.theme09.start .anim .l10,
.theme09.start .anim .l11,
.theme09.start .anim .l12,
.theme09.start .anim .l13,
.theme09.start .anim .l14,
.theme09.start .anim .l03 .g {
	transform: translate(0, 0);
}
.theme09.start .anim .l08 .g {
	transform: translate(0, 0) rotate(0);
}
.theme09.start .anim > span {
	opacity: 1;
}

/*============================================================
	animation theme10
*/
.theme10 .anim > span {
	opacity: 0;
}
.theme10 .anim .l01 {
	opacity: 0;
}
/* 草 */
.theme10.start .anim .l02 {
	transition: opacity 0.6s ease 1.6s;
}
.theme10.start .anim .l06 {
	transition: opacity 0.6s ease 1.6s;
}
.theme10.start .anim .l09 {
	transition: opacity 0.6s ease 1.6s;
}
/* 雲 */
.theme10.start .anim .l03 {
	transition: opacity 0.6s ease 2.2s;
}
.theme10.start .anim .l03 img {
	animation: 8s t02-l04 infinite cubic-bezier(0.37, 0, 0.63, 1);
}
.theme10.start .anim .l04 {
	transition: opacity 0.6s ease 2.2s;
}
.theme10.start .anim .l04 img {
	animation: 7s t02-l03 infinite cubic-bezier(0.37, 0, 0.63, 1);
}
.theme10.start .anim .l10 {
	transition: opacity 0.6s ease 2.2s;
}
.theme10.start .anim .l10 img {
	animation: 5s t02-l04 infinite cubic-bezier(0.37, 0, 0.63, 1);
}
.theme10.start .anim .l11 {
	transition: opacity 0.6s ease 2.2s;
}
.theme10.start .anim .l11 img {
	animation: 6s t02-l03 infinite cubic-bezier(0.37, 0, 0.63, 1);
}
/* 標識 */
.theme10 .anim .l08 .g {
	transform: translateY(41%);
}
.theme10.start .anim .l08 .g {
  transition: transform 0.6s cubic-bezier(0.33, 1, 0.68, 1) 1.6s;
	transform: translateY(0);
}
/* 影 */
.theme10.start .anim .l12 {
	transition: opacity 0.6s ease 1s;
}
.theme10.start .anim .l12 img {
	animation: 3s t10-l12 infinite cubic-bezier(0.37, 0, 0.63, 1) 1.6s;
}
@keyframes t10-l12 {
	0%, 100% {
		opacity: 1;
	}
	50% {
		opacity: 0.3;
	}
}
/* 人物 */
.theme10 .anim .l13 {
	transform: scale(0.2);
	transform-origin: 46% 23%;
}
.theme10.start .anim .l13 {
	transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1s, opacity 0.4s ease 1s;
	transform: scale(1);
}
.theme10 .anim .l13 img {
	transform-origin: 46% 23%;
}
.theme10.start .anim .l13 img {
	animation: 3s t10-l13 infinite cubic-bezier(0.37, 0, 0.63, 1) 1.6s;
}
@keyframes t10-l13 {
  0%, 100% {
    transform: translateY(0%) rotate(0);
  }
  50% {
    transform: translateY(-3%) rotate(-4deg);
  }
}

.theme10.start .anim .l14 {
	transition: opacity 0.6s ease 1.6s;
}
.theme10 .anim .l14 img {
	transform-origin: 33.8% 14%;
}
.theme10.start .anim .l14 img {
	animation: 3s t10-l03 infinite cubic-bezier(0.37, 0, 0.63, 1) 1.6s;
}
@keyframes t10-l03 {
	0%, 100% {
		transform: rotate(0deg) translate(0, 0);
	}
	50% {
		transform: rotate(-10deg) translate(-2%, 2%);
	}
}
/* 道1 */
.theme10.start #kv10-l07-01 {
	transition: transform 0.3s cubic-bezier(0.65, 0, 0.35, 1) 0s;
}
#kv10-l07-01 {
	transform: translateY(-21%);
}
.theme10.start #kv10-l07-02 {
	transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1) 0.2s;
}
#kv10-l07-02 {
	transform: translateY(29%);
}
.theme10.start #kv10-l07-03 {
	transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1) 0.6s;
}
#kv10-l07-03 {
	transform: translateY(-55.6%);
}
/* 道2 */
.theme10.start #kv10-l05-01 {
	transition: transform 0.3s cubic-bezier(0.65, 0, 0.35, 1) 0.6s;
}
#kv10-l05-01 {
	transform: translateY(24%);
}
.theme10.start #kv10-l05-02 {
	transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1) 0.8s;
}
#kv10-l05-02 {
	transform: translateY(-36.4%);
}
.theme10.start #kv10-l05-03 {
	transition: transform 0.3s cubic-bezier(0.32, 0, 0.67, 0) 1.2s;
}
#kv10-l05-03 {
	transform: translateY(21%);
}

/* start */
.theme10.start #kv10-l05-01,
.theme10.start #kv10-l05-02,
.theme10.start #kv10-l05-03,
.theme10.start #kv10-l07-01,
.theme10.start #kv10-l07-02,
.theme10.start #kv10-l07-03 {
	transform: translateY(0);
}
.theme10.start .anim > span {
	opacity: 1;
}

/*============================================================
	keyframes
*/
@keyframes hover-line {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

/*============================================================
	pause
*/
.pause * {
	animation-play-state: paused !important;
	/*transition-duration: 0s !important;
	transition-delay: 0s !important;*/
}
.finish * {
	animation-delay: 0s !important;
}