@charset "utf-8";

.anime,
#menu li,
.text-animation {
	opacity: 0;
	will-change: opacity, transform;
}

/* ----------------------------------------------------------------
animation pattern
----------------------------------------------------------------- */

@keyframes breakIn {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

@keyframes climbUp {
	0% { opacity: 0; transform: translateY(1.389vw); }
	100% { opacity: 1; transform: translateY(0); }
}

@keyframes topFvButterfly {
	0% { opacity: 0; top: 49.236vw; left: 85.694%;}
	11% { opacity: 1; top: 49.236vw; left: 85.694%;}
	33% { opacity: 1; top: 49.236vw; left: 85.694%;}
	44% { opacity: 0; top: 49.236vw; left: 85.694%;}
	45% { opacity: 0; top: 42.361vw; left: 70.625%;}
	55% { opacity: 1; top: 42.361vw; left: 70.625%;}
	77% { opacity: 1; top: 42.361vw; left: 70.625%;}
	88% { opacity: 0; top: 42.361vw; left: 70.625%;}
	89% { opacity: 0; top: 24.792vw; left: 51.944%;}
	100% { opacity: 1; top: 24.792vw; left: 51.944%;}
}

@keyframes topSec1Butterfly {
	0% { opacity: 0; top: 17.847vw; left: 6.667%;}
	11% { opacity: 1; top: 17.847vw; left: 6.667%;}
	33% { opacity: 1; top: 17.847vw; left: 6.667%;}
	44% { opacity: 0; top: 17.847vw; left: 6.667%;}
	45% { opacity: 0; top: 21.736vw; left: 21.667%;}
	55% { opacity: 1; top: 21.736vw; left: 21.667%;}
	77% { opacity: 1; top: 21.736vw; left: 21.667%;}
	88% { opacity: 0; top: 21.736vw; left: 21.667%;}
	89% { opacity: 0; top: 21.875vw; left: 35.556%;}
	100% { opacity: 1; top: 21.875vw; left: 35.556%;}
}

@keyframes topSec2Butterfly {
	0% { opacity: 0; top: 34.931vw; left: 5%;}
	20% { opacity: 1; top: 34.931vw; left: 5%;}
	60% { opacity: 1; top: 34.931vw; left: 5%;}
	79% { opacity: 0; top: 34.931vw; left: 5%;}
	80% { opacity: 0; top: 27.361vw; left: 8.681%;}
	100% { opacity: 1; top: 27.361vw; left: 8.681%;}
}

@keyframes topSec3Butterfly {
	0% { opacity: 0; top: 22.917vw; left: 78.333%;}
	20% { opacity: 1; top: 22.917vw; left: 78.333%;}
	60% { opacity: 1; top: 22.917vw; left: 78.333%;}
	79% { opacity: 0; top: 22.917vw; left: 78.333%;}
	80% { opacity: 0; top: 20vw; left: 67.986%;}
	100% { opacity: 1; top: 20vw; left: 67.986%;}
}

@keyframes conceptButterfly-01 {
	0% { opacity: 0; top: 46.458vw; left: 91.875%;}
	11% { opacity: 1; top: 46.458vw; left: 91.875%;}
	33% { opacity: 1; top: 46.458vw; left: 91.875%;}
	44% { opacity: 0; top: 46.458vw; left: 91.875%;}
	45% { opacity: 0; top: 42.569vw; left: 77.222%;}
	55% { opacity: 1; top: 42.569vw; left: 77.222%;}
	77% { opacity: 1; top: 42.569vw; left: 77.222%;}
	88% { opacity: 0; top: 42.569vw; left: 77.222%;}
	89% { opacity: 0; top: 34.792vw; left: 66.25%;}
	100% { opacity: 1; top: 34.792vw; left: 66.25%;}
}

@keyframes conceptButterfly-02 {
	0% { opacity: 0; top: 14.861vw; left: 6.111%;}
	11% { opacity: 1; top: 14.861vw; left: 6.111%;}
	33% { opacity: 1; top: 14.861vw; left: 6.111%;}
	44% { opacity: 0; top: 14.861vw; left: 6.111%;}
	45% { opacity: 0; top: 12.222vw; left: 15.903%;}
	55% { opacity: 1; top: 12.222vw; left: 15.903%;}
	77% { opacity: 1; top: 12.222vw; left: 15.903%;}
	88% { opacity: 0; top: 12.222vw; left: 15.903%;}
	89% { opacity: 0; top: 4.444vw; left: 22.361%;}
	100% { opacity: 1; top: 4.444vw; left: 22.361%;}
}

@keyframes topScrollBar {
	0% { height: 0;}
	80% { height: 10.069vw;}
	100% { height: 10.069vw;}
}

@keyframes expansion {
	0% { opacity: 0; transform: scale(0.6); }
	100% { opacity: 1; transform: scale(1); }
}

@keyframes slideToRight {
	0% { opacity: 0; transform: translateX(-3.472vw); }
	100% { opacity: 1; transform: translateX(0); }
}

@keyframes slideToLeft {
	0% { opacity: 0; transform: translateX(3.472vw); }
	100% { opacity: 1; transform: translateX(0); }
}

@keyframes kataKata {
	0% { transform: translateY(0);}
	12.5% { transform: translateY(0);}
	25% { transform: translateY(0.417vw);}
	37.5% { transform: translateY(0.417vw);}
	50% { transform: translateY(0);}
	62.5% { transform: translateY(0);}
	75% { transform: translateY(-0.417vw);}
	87.5% { transform: translateY(-0.417vw);}
	100% { transform: translateY(0);}
}

@keyframes footerContactBar {
	0% { height: 0;}
	80% { height: 8.333vw;}
	100% { height: 8.333vw;}
}

@keyframes kataKataCar {
	0% { transform: rotate(0);}
	12.5% { transform: rotate(0);}
	25% { transform: rotate(5deg);}
	37.5% { transform: rotate(5deg);}
	50% { transform: rotate(0);}
	62.5% { transform: rotate(0);}
	75% { transform: rotate(-5deg);}
	87.5% { transform: rotate(-5deg);}
	100% { transform: rotate(0);}
}

@keyframes forCMBar {
	0% { height: 0;}
	80% { height: 12.222vw;}
	100% { height: 12.222vw;}
}




/* ----------------------------------------------------------------
common(general)
----------------------------------------------------------------- */

.on #menu,
.under-page #menu {
	opacity: 1;
}

.on #site-title {
	animation: breakIn 0.5s ease-in-out 1s forwards;
}

.on .image__top-fv-green {
	animation: breakIn 1s ease-in-out 1s forwards;
}

.on .image__top-fv-book {
	animation: breakIn 0.5s ease-in-out 1.5s forwards;
}

.on .image__top-fv-flower-01,
.on .image__top-fv-flower-02,
.on .text__top-fv-append.active {
	animation: breakIn 1s ease-in-out 2s forwards;
}

.on .image__top-fv-flower-03 {
	animation: breakIn 1s ease-in-out 2.5s forwards;
}

.on .image__top-fv-butterfly {
	animation: topFvButterfly 4.5s ease-in-out 2.7s forwards;
}

.on #menu li.item__menu-01 {
	animation: climbUp 0.5s ease-in-out 1s forwards;
}

.on #menu li.item__menu-02 {
	animation: climbUp 0.5s ease-in-out 1.2s forwards;
}

.on #menu li.item__menu-03 {
	animation: climbUp 0.5s ease-in-out 1.4s forwards;
}

.on #menu li.item__menu-04 {
	animation: climbUp 0.5s ease-in-out 1.6s forwards;
}

.on #menu li.item__menu-05 {
	animation: climbUp 0.5s ease-in-out 1.8s forwards;
}

.on #menu li.item__menu-06 {
	animation: climbUp 0.5s ease-in-out 2s forwards;
}

.under-page #site-title {
	animation: breakIn 0.5s ease-in-out 0.5s forwards;
}

.under-page #menu li.item__menu-01 {
	animation: climbUp 0.5s ease-in-out 0.5s forwards;
}

.under-page #menu li.item__menu-02 {
	animation: climbUp 0.5s ease-in-out 0.7s forwards;
}

.under-page #menu li.item__menu-03 {
	animation: climbUp 0.5s ease-in-out 0.9s forwards;
}

.under-page #menu li.item__menu-04 {
	animation: climbUp 0.5s ease-in-out 1.1s forwards;
}

.under-page #menu li.item__menu-05 {
	animation: climbUp 0.5s ease-in-out 1.3s forwards;
}

.under-page #menu li.item__menu-06 {
	animation: climbUp 0.5s ease-in-out 1.5s forwards;
}

.on .text__top-fv-append.active::after {
	animation: topScrollBar 2s ease-in-out 0s infinite;
}

.on .section__top-section-01 .box__top-section-title.active,
.on .section__top-section-01 .text__top-section-lead.active,
.on .section__top-section-01 .text__top-section-body.active,
.on .section__top-section-01 .container__top-view-more.active {
	animation: breakIn 1s ease-in-out 0.5s forwards;
}

.on .section__top-section-01 .image__butterfly.active {
	animation: topSec1Butterfly 4.5s ease-in-out 1s forwards;
}

.on .section__top-section-02 .image__butterfly.active {
	animation: topSec2Butterfly 2.5s ease-in-out 1s forwards;
}

.on .section__top-section-03 .image__butterfly.active {
	animation: topSec3Butterfly 2.5s ease-in-out 1s forwards;
}

.akfj-concept .image__concept-butterfly-01.active {
	animation: conceptButterfly-01 4.5s ease-in-out 1s forwards;
}

.akfj-concept .image__concept-butterfly-02.active {
	animation: conceptButterfly-02 4.5s ease-in-out 1s forwards;
}

.on .animation-delay-01.active {
	animation: climbUp 0.5s ease-in-out 0.5s forwards;
}

.on .animation-delay-02.active {
	animation: climbUp 0.5s ease-in-out 0.7s forwards;
}

.on .section__top-section-02 .wrapper__white-box-outer.active {
	animation: slideToRight 1s ease-in-out 1.2s forwards;
}

.on .section__top-section-03 .wrapper__white-box-outer.active {
	animation: slideToLeft 1s ease-in-out 1.2s forwards;
}

.on .section__top-section-04 .wrapper__top-recruit.active {
	animation: breakIn 0.7s ease-in-out 0.3s forwards;
}

.on .section__top-section-04 .text__top-section-titile.active,
.on .section__top-section-04 .text__top-section-titile-jp.active,
.on .section__top-section-04 .text__top-section-lead.active,
.on .section__top-section-04 .text__top-section-body.active,
.on .section__top-section-04 .box__top-to-recruit.active,
.on .text__footer-contact-title.active,
.under-page .text__footer-contact-title.active,
.on .text__footer-contact-body--upper.active,
.under-page .text__footer-contact-body--upper.active,
.on .btn__footer-contact.active,
.under-page .btn__footer-contact.active,
.on .text__footer-contact-body--bottom.active,
.under-page .text__footer-contact-body--bottom.active,
.akfj-for-care-manager .text__for-cm-lead.active,
.akfj-for-care-manager .item__for-cm.active,
.akfj-recruit .text__recurit-stopped.active,
.akfj-recruit .text__section-title.active,
.akfj-contact .wrapper__section-title .text__contact-title.active,
.akfj-contact .text__lead.active,
.akfj-recruit .text__section-body.active,
.akfj-recruit .wrapper__flex-box.active {
	animation: breakIn 1s ease-in-out 0.5s forwards;
}

.on .text__footer-contact-body--upper.active::after,
.under-page .text__footer-contact-body--upper.active::after,
.akfj-contact .text__lead.active::after {
	animation: footerContactBar 2s ease-in-out 1.5s infinite;
}

.on .image__footer-contact-bird.active,
.under-page .image__footer-contact-bird.active {
	animation: kataKata 1.5s linear 0.5s infinite;
}

.under-page .text-animation.active,
.akfj-service .text__service-section-01-oath.active,
.akfj-service .box__service-section-01-oath.active,
.akfj-service .item__flow.active,
.akfj-service .text__flow_bottom.active,
.akfj-contact .wrapper__contact-row.active,
.akfj-contact .wrapper__contact-area.active,
.akfj-contact .wrapper__notice.active,
.akfj-contact .wrapper__accept.active,
.akfj-contact .wrapper__button.active,
.akfj-contact .box__line.active,
.akfj-concept .table__company-profile.active,
.akfj-concept .wrapper__download-buttons.active,
.akfj-service .section__service-section-03 .wrapper__section-title.active,
.akfj-service .section__service-section-03 .text__section-body.active,
.akfj-service .section__service-section-03 .image__service-02.active,
.akfj-service .section__service-section-03 .image__service-map.active,
.akfj-recruit .wrapper__contact-row.active,
.akfj-recruit .wrapper__contact-area.active,
.akfj-recruit .wrapper__notice.active,
.akfj-recruit .wrapper__accept.active,
.akfj-recruit .wrapper__button.active,
.akfj-recruit .text__table-title.active,
.akfj-recruit .table__recruit.active {
	animation: climbUp 1s ease-in-out 0.5s forwards;
}

.akfj-service .image__service-car.active {
	animation: climbUp 1s ease-in-out 0.5s forwards, kataKataCar 1.5s linear 1.5s infinite;
}

.akfj-for-care-manager .text__for-cm-lead.active::after {
	animation: forCMBar 2s ease-in-out 1.5s infinite;
}

.akfj-recruit .section__recruit-03 .text__section-title.active::after {
	animation: footerContactBar 2s ease-in-out 1.5s infinite;
}


/* under-page title-text */
.js-text span {
    display: inline-block;
    opacity: 0;
    transform: translateY(1em);
    transition: opacity 0.5s ease, transform 0.5s ease;
    transition-delay: calc(var(--char-index) * 0.08s);
}

.on .js-text.active span,
.under-page .js-text.active span {
    opacity: 1;
    transform: translateY(0);
}

/* service card */
.akfj-service .item__service-detail {
    opacity: 0;
    transform: translateY(1.389vw);
    transition: opacity 1s ease, transform 1s ease;
}

.akfj-service .item__service-detail:nth-child(4n + 1) {
    transition-delay: 0.3s;
}

.akfj-service .item__service-detail:nth-child(4n + 2) {
    transition-delay: 0.45s;
}

.akfj-service .item__service-detail:nth-child(4n + 3) {
    transition-delay: 0.6s;
}

.akfj-service .item__service-detail:nth-child(4n) {
    transition-delay: 0.75s;
}

.akfj-service .item__service-detail.active {
    opacity: 1;
    transform: translateY(0);
}

/* ----------------------------------------------------------------
common(tablet)
----------------------------------------------------------------- */

@media screen and (max-width: 1280px) {

	.akfj-service .item__service-detail:nth-child(3n + 1) {
		transition-delay: 0.3s;
	}

	.akfj-service .item__service-detail:nth-child(3n + 2) {
		transition-delay: 0.45s;
	}

	.akfj-service .item__service-detail:nth-child(3n) {
		transition-delay: 0.6s;
	}

}

/* ----------------------------------------------------------------
common(SP)
----------------------------------------------------------------- */

@media screen and (max-width: 781px) {

	/* ----------------------------------------------------------------
	animation pattern
	----------------------------------------------------------------- */

	@keyframes climbUp {
		0% { opacity: 0; transform: translateY(5.333vw); }
		100% { opacity: 1; transform: translateY(0); }
	}

	@keyframes climbUpCar {
		0% { opacity: 0; transform: scaleX(-1) translateY(5.333vw); }
		100% { opacity: 1; transform: scaleX(-1) translateY(0); }
	}
	
	@keyframes topFvButterfly {
		0% { opacity: 0; top: 115.733vw; left: 85.333%;}
		20% { opacity: 1; top: 115.733vw; left: 85.333%;}
		60% { opacity: 1; top: 115.733vw; left: 85.333%;}
		79% { opacity: 0; top: 115.733vw; left: 85.333%;}
		80% { opacity: 0; top: 102.933vw; left: 74.667%;}
		100% { opacity: 1; top: 102.933vw; left: 74.667%;}
	}

	@keyframes topSec1Butterfly {
		0% { opacity: 0; top: 63.467vw; left: 10.4%;}
		20% { opacity: 1; top: 63.467vw; left: 10.4%;}
		60% { opacity: 1; top: 63.467vw; left: 10.4%;}
		79% { opacity: 0; top: 63.467vw; left: 10.4%;}
		80% { opacity: 0; top: 54.133vw; left: 19.467%;}
		100% { opacity: 1; top: 54.133vw; left: 19.467%;}
	}

	@keyframes topSec2Butterfly {
		0% { opacity: 0; top: 6.4vw; left: 5.333%;}
		20% { opacity: 1; top: 6.4vw; left: 5.333%;}
		60% { opacity: 1; top: 6.4vw; left: 5.333%;}
		79% { opacity: 0; top: 6.4vw; left: 5.333%;}
		80% { opacity: 0; top: -6.4vw; left: 14.933%;}
		100% { opacity: 1; top: -6.4vw; left: 14.933%;}
	}

	@keyframes topSec3Butterfly {
		0% { opacity: 0; top: 13.067vw; left: 85.067%;}
		20% { opacity: 1; top: 13.067vw; left: 85.067%;}
		60% { opacity: 1; top: 13.067vw; left: 85.067%;}
		79% { opacity: 0; top: 13.067vw; left: 85.067%;}
		80% { opacity: 0; top: -6.4vw; left: 74.667%;}
		100% { opacity: 1; top: -6.4vw; left: 74.667%;}
	}

	@keyframes conceptButterfly-01 {
		0% { opacity: 0; top: 126.933vw; left: 86.667%;}
		20% { opacity: 1; top: 126.933vw; left: 86.667%;}
		60% { opacity: 1; top: 126.933vw; left: 86.667%;}
		79% { opacity: 0; top: 126.933vw; left: 86.667%;}
		80% { opacity: 0; top: 108.533vw; left: 78.667%;}
		100% { opacity: 1; top: 108.533vw; left: 78.667%;}
	}

	@keyframes topScrollBar {
		0% { height: 0;}
		80% { height: 20vw;}
		100% { height: 20vw;}
	}

	@keyframes slideToRight {
		0% { opacity: 0; transform: translateX(-13.333vw); }
		100% { opacity: 1; transform: translateX(0); }
	}

	@keyframes slideToLeft {
		0% { opacity: 0; transform: translateX(13.333vw); }
		100% { opacity: 1; transform: translateX(0); }
	}

	@keyframes kataKata {
		0% { transform: translateY(0);}
		12.5% { transform: translateY(0);}
		25% { transform: translateY(1.6vw);}
		37.5% { transform: translateY(1.6vw);}
		50% { transform: translateY(0);}
		62.5% { transform: translateY(0);}
		75% { transform: translateY(-1.6vw);}
		87.5% { transform: translateY(-1.6vw);}
		100% { transform: translateY(0);}
	}

	@keyframes footerContactBar {
		0% { height: 0;}
		80% { height: 21.333vw;}
		100% { height: 21.333vw;}
	}

	@keyframes kataKataCar {
		0% { transform: scaleX(-1) rotate(0);}
		12.5% { transform: scaleX(-1) rotate(0);}
		25% { transform: scaleX(-1) rotate(5deg);}
		37.5% { transform: scaleX(-1) rotate(5deg);}
		50% { transform: scaleX(-1) rotate(0);}
		62.5% { transform: scaleX(-1) rotate(0);}
		75% { transform: scaleX(-1) rotate(-5deg);}
		87.5% { transform: scaleX(-1) rotate(-5deg);}
		100% { transform: scaleX(-1) rotate(0);}
	}

	@keyframes forCMBar {
		0% { height: 0;}
		80% { height: 32vw;}
		100% { height: 32vw;}
	}

	@keyframes contactBar {
		0% { height: 0;}
		80% { height: 32vw;}
		100% { height: 32vw;}
	}

	@keyframes recruitBar {
		0% { height: 0;}
		80% { height: 17.067vw;}
		100% { height: 17.067vw;}
	}


	/* ----------------------------------------------------------------
	common(general)
	----------------------------------------------------------------- */

	.on .wrapper__menu-sp,
	.under-page .wrapper__menu-sp {
		animation: breakIn 0.5s ease-in-out 1s forwards;
	}

	.on .image__top-fv-green-sp {
		animation: breakIn 1s ease-in-out 1s forwards;
	}

	.on .image__top-fv-flower-02-sp {
		animation: breakIn 1s ease-in-out 2s forwards;
	}

	.on .image__top-fv-flower-03-sp {
		animation: breakIn 1s ease-in-out 2.5s forwards;
	}

	.on .image__top-fv-butterfly {
		animation: topFvButterfly 2.5s ease-in-out 2.7s forwards;
	}

	.on .section__top-section-01 .box__top-section-title.active {
		animation: breakIn 1s ease-in-out 1s forwards;
	}

	.on .section__top-section-01 .image__butterfly.active {
		animation: topSec1Butterfly 2.5s ease-in-out 1.5s forwards;
	}

	.akfj-concept .image__concept-butterfly-01.active {
		animation: conceptButterfly-01 2.5s ease-in-out 1s forwards;
	}

	.akfj-concept .image__concept-butterfly-02.active {
		animation: breakIn 1s ease-in-out 0.5s forwards;
	}

	.akfj-service .image__service-car.active {
		animation: climbUpCar 1s ease-in-out 0.5s forwards, kataKataCar 1.5s linear 1.5s infinite;
	}

	.akfj-service .item__service-detail {
		transform: translateY(5.333vw);
	}

	.akfj-service .item__service-detail {
		transition-delay: 0.3s;
	}

	.akfj-contact .text__lead.active::after {
		animation: contactBar 2s ease-in-out 1.5s infinite;
	}

	.akfj-recruit .section__recruit-03 .text__section-title.active::after {
		animation: recruitBar 2s ease-in-out 1.5s infinite;
	}

}