@charset "UTF-8";
/* ============================== */
/* TOPPAGE INVIEW */
/* ============================== */ :root {
	--distance: 120px;
}
@media screen and (max-width: 834px) {
	:root {
		--distance: 90px;
	}
}
@media screen and (max-width: 600px) {
	:root {
		--distance: 80px;
	}
}
.js-inview {
	opacity: 0;
	translate: 0 var(--distance);
	transition: opacity 1500ms 500ms, translate 1000ms 500ms;
}
.js-inview.is-inview {
	opacity: 1;
	translate: 0 0;
}
.main-heading.js-inview {
	translate: 55px 0;
	transition: opacity 1500ms, translate 1000ms;
}
.main-heading.js-inview.is-inview {
	translate: 0 0;
}
/* corporate-history */
.corporate-history.js-inview  {
	--_interval: 1500ms;
	--_first-item-delay: 1500ms;
	& .step {
		opacity: 0;
	}
}

.corporate-history.js-inview .corporate-history-list > .step:first-child {
	transition: opacity 1000ms var(--_first-item-delay);
}
.corporate-history.js-inview .corporate-history-list > .step:nth-child(2) {
	transition: opacity 1000ms calc(var(--_first-item-delay) + var(--_interval));
}
.corporate-history.js-inview .corporate-history-list > .step:nth-child(3) {
	transition: opacity 1000ms calc(var(--_first-item-delay) + var(--_interval) * 2);
}
.corporate-history.js-inview .corporate-history-list > .step:nth-child(4) {
	transition: opacity 1000ms calc(var(--_first-item-delay) + var(--_interval) * 3);
}
.corporate-history.js-inview.is-inview .corporate-history-list > .step:first-child, .corporate-history.js-inview.is-inview .corporate-history-list > .step:nth-child(2), .corporate-history.js-inview.is-inview .corporate-history-list > .step:nth-child(3), .corporate-history.js-inview.is-inview .corporate-history-list > .step:nth-child(4) {
	opacity: 1;
}
.corporate-history.js-inview{
	& .arrow{
		opacity:0;
		transition:opacity 100ms var(--_first-item-delay);
	}
	&.is-inview .arrow{
		opacity:1;
	}
} 

.corporate-history.js-inview.is-inview .arrow span{
	animation: progress calc(var(--_interval) * 3 * 1.10) linear;
	animation-fill-mode: forwards;
	animation-delay: var(--_first-item-delay);
	width:0;
}
@keyframes progress{
	0% {width:0;}
	100% {width:110%;}
}
@media screen and (max-width: 600px) {
.corporate-history.js-inview.is-inview .arrow span{
	width:100%;
	height:0;
	}
	@keyframes progress{
	0% {height:0;}
	100% {height:105%;}
}
}




.top-history-foottext.js-inview{
	transition: opacity 1000ms calc(var(--_first-item-delay) + var(--_interval) * 3) ,translate 1000ms calc(var(--_first-item-delay) + var(--_interval) * 3);
}
.top-history-foottext.js-inview.is-inview{
	opacity: 1;
	translate: 0 0;
}