@charset "UTF-8";
.fade0 {
	animation-name: fade0;
	animation-duration: .5s;
	animation-timing-function: ease-out;
	animation-delay: .5s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes fade0 {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
.fade01-1{
	animation-name: mv01-1;
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-delay: .5s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
.fade01-2{
	animation-name: mv01-2;
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-delay: .5s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
.fade01-3{
	animation-name: mv01-3;
	animation-duration: 5s;
	animation-timing-function: ease-out;
	animation-delay: .1s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes mv01-1 {
	from {
		clip-path: inset(0 0% 0% 100%);
		opacity: 1;
	}
	to {
		clip-path: inset(0);
		opacity: 1;
	}
}
@keyframes mv01-2 {
	from {
		clip-path: inset(0 100% 0% 0%);
		opacity: 1;
	}
	to {
		clip-path: inset(0);
		opacity: 1;
	}
}
@keyframes mv01-3 {
	0% {
		opacity: 1;
		transform: scale(1.1);
	}
	20% {
		opacity: 1;
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

.fadetxt01 {
	  animation-name: fade-lr;
    animation-duration: 1.5s;
    animation-timing-function: ease-out;
    animation-delay: 1s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
    opacity: 0;
    margin-bottom: 10px;
}
.fadetxt02 {
	animation-name: fade-lr;
	animation-duration: 1.5s;
	animation-timing-function: ease-out;
	animation-delay: 1.5s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
.fadetxt03 {
	animation-name: fade-lr;
	animation-duration: 2s;
	animation-timing-function: ease-out;
	animation-delay: 2.5s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
.fadetxt04 {
	animation-name: fade-lr;
	animation-duration: 2s;
	animation-timing-function: ease-out;
	animation-delay: 3s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
	margin-top: -15px;
}
.fadetxt05 {
	animation-name: fade-lr;
	animation-duration: 2s;
	animation-timing-function: ease-out;
	animation-delay: 3.5s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
.mv-border {
	animation-name: fade-lr;
	animation-duration: 0.5s;
	animation-timing-function: ease-out;
	animation-delay: 5.5s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
}
.fadetxt06 {
	animation-name: fade-lr;
	animation-duration: 1.5s;
	animation-timing-function: ease-out;
	animation-delay: 6s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
	margin-top: 65px;
}

.fadetxt07 {
	animation-name: fade-lr;
	animation-duration: 2s;
	animation-timing-function: ease-out;
	animation-delay: 6.5s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
	margin-top: 20px;
}
@keyframes fade-lr {
	from {
		clip-path: inset(0 100% 0% 0%);
		opacity: 0;
	}
	to {
		clip-path: inset(0);
		opacity: 1;
	}
}
@keyframes fade-ft {
	from {
		clip-path: inset(0 0 100% 0%);
		opacity: 0;
	}
	to {
		clip-path: inset(0);
		opacity: 1;
	}
}
.mv-fadeinUp {
    animation-name: fadeInUp;
    animation-duration: .7s;
    animation-timing-function: ease-out;
    animation-delay: 7.5s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
    opacity: 0;
    position: absolute;
    width: 20%;
    bottom: 28px;
    left: 40%;
    text-align: center;
}
@keyframes fadeInUp {
	0% {
		opacity: 0;
		transform: translateY(10%);
	}
	100% {
		opacity: 1;
		transform: translateY(0px);
	}
}
@keyframes fadeInDown {
	0% {
		opacity: 0;
		transform: translateY(-10%);
	}
	100% {
		opacity: 1;
		transform: translateY(0px);
	}
}
@keyframes colorchange1 {
	0% {
    color: #505050;
    width: 0;
    text-decoration: none;
	}
	100% {
    color: #70A3F0;
    width: 100%;
    text-decoration: underline;
	}
}
@keyframes colorchange2 {
	0% {
    color: #505050;
    width: 0;
    text-decoration: none;
	}
	100% {
    color: #F0B0BC;
    width: 100%;
    text-decoration: underline;
	}
}
@keyframes border {
	0% {
    width: 0;
	}
	100% {
    width: 100%;
	}
}
#ceremony h2 {
  opacity: 0;
}
#ceremony h2.active {
  animation-name: fade-lr;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-delay: 0.5s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}
.itembox1 h3.active,
.itembox2 h3.active {
  animation-name: fade-lr;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-delay: 0.5s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}
.itembox1 h3.active .itembox-title::after,
.itembox2 h3.active .itembox-title::after {
  animation-name: fade-lr;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-delay: 1.5s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}
.item-title .title-fade01,
.item-title .title-fade02,
.item-title .title-fade03,
.item-title .title-fade04 {
  opacity: 0;
}
.item-title.active .title-fade01 {
  animation-name: fade-lr;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-delay: 0.5s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}
.item-title.active .title-fade02 {
  animation-name: fade-lr;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-delay: 1s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}
.item-title.active .title-fade03 {
  animation-name: fade-lr;
  animation-duration: 1.5s;
  animation-timing-function: ease-out;
  animation-delay: 1.5s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  opacity: 0;
}
.item-title.active .title-fade04 {
	animation-name: fade-lr;
	animation-duration: 1s;
	animation-timing-function: ease-out;
	animation-delay: 2s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
	opacity: 0;
  }
#ceremony .item-title.active .title-fade02 .title-fadecolor {
  animation-name: colorchange1;
  animation-duration: 2s;
  animation-timing-function: ease-out;
  animation-delay: 3s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}
#ceremony .item-title.active .title-fade03 .title-fadecolor {
  animation-name: colorchange1;
  animation-duration: 2s;
  animation-timing-function: ease-out;
  animation-delay: 4s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}
#ceremony .item-title.active .title-fade04 .title-fadecolor {
	animation-name: colorchange1;
	animation-duration: 2s;
	animation-timing-function: ease-out;
	animation-delay: 4s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
}
#work .item-title.active .title-fade01 .title-fadecolor {
	animation-name: colorchange2;
	animation-duration: 2s;
	animation-timing-function: ease-out;
	animation-delay: 2.5s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
}
#work .item-title.active .title-fade02 .title-fadecolor {
	animation-name: colorchange2;
	animation-duration: 2s;
	animation-timing-function: ease-out;
	animation-delay: 3s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
  }
#work .item-title.active .title-fade02 .title-fadecolor {
  animation-name: colorchange2;
  animation-duration: 2s;
  animation-timing-function: ease-out;
  animation-delay: 4s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}
#work .item-title.active .title-fade03 .title-fadecolor {
  animation-name: colorchange2;
  animation-duration: 2s;
  animation-timing-function: ease-out;
  animation-delay: 5s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}
#work .item-title.active .title-fade04 .title-fadecolor {
	animation-name: colorchange2;
	animation-duration: 2s;
	animation-timing-function: ease-out;
	animation-delay: 4s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-fill-mode: forwards;
}
.active .fadeInFromTop {
  animation-name: fade-ft;
  animation-duration: 1.5s;
  animation-timing-function: ease-out;
  animation-delay: 1.5s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}
.active .fadeInDawn {
    animation-name: fadeInDown;
    animation-duration: 1s;
    animation-timing-function: ease-out;
    animation-delay: 1s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
    opacity: 0;
}
.item-point.active.fadeInLeft,
.item-closeup.active .fadeInLeft {
	animation-name: fade-lr;
  animation-duration: 0.5s;
  animation-timing-function: ease-out;
  animation-delay: 0.5s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}
.active.fadeInLeft,
.active .fadeInLeft {
  animation-name: fade-lr;
  animation-duration: 0.5s;
  animation-timing-function: ease-out;
  animation-delay: 0.5s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}
.faq-title.active .faq-title01 {
	animation-name: fade-lr;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-delay: 0;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}
.faq-title.active .faq-title02 {
	animation-name: fade-lr;
  animation-duration: 1.5s;
  animation-timing-function: ease-out;
  animation-delay: 1s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
}