@charset "utf-8";


#intro h1 {
	opacity: 0;
	transform: translateY(30px);
	transition: all 800ms ease-out;
}
#intro h1.show {
	opacity: 1;
	transform: translateY(0px);
}


#intro article {
	opacity: 0;
	transform: translateY(30px);
	transition: all 800ms ease-out 400ms;
}
#intro h1.show + article,
#intro h1.show + article + article,
#intro h1.show + article + article + article {
	opacity: 1;
	transform: translateY(0px);
}


#intro figure,
#intro figcaption {
	opacity: 0;
	transform: translateY(30px);
	transition: all 800ms ease-out 400ms;
}
#intro figure.show,
#intro figure.pc.show + * + figcaption {
	opacity: 1;
	transform: translateY(0px);
}



#topics {
	opacity: 0;
	transform: translateY(30px);
	transition: all 800ms ease-out 0ms;
}
#topics.show {
	opacity: 1;
	transform: translateY(0px);
}





#service .pict {
	background: none;
	overflow: hidden;
}
#service .pict img {
	width: 100%;
	height: 150px;
	object-fit: cover;
}

#service .pict img {
	opacity: 0;
	transform: scale(1.1);
	transition: all 800ms ease-out 0ms;
}
#service .pict.show img {
	opacity: 1;
	transform: scale(1.0);
}





#service .title,
#service .copy {
	opacity: 0;
	transition: all 800ms ease-out 0ms;
}
#service .title.show,
#service .title.show + .copy {
	opacity: 1;
}


#service .copy strong::after {
	transform-origin: left top;
	transform: scaleX(0);
	transition: all 800ms ease-out 400ms;
}
#service .copy.show strong::after {
	transform: scaleX(1);
}




#service .flow {
	opacity: 0;
	transform: translateY(30px);
	transition: all 800ms ease-out 0ms;
}
#service .flow.show {
	opacity: 1;
	transform: translateY(0px);
}






#service .reason {
	opacity: 0;
	transition: all 800ms ease-out 0ms;
}
#service .reason.show {
	opacity: 1;
}
#service .reason strong::after {
	transform-origin: left top;
	transform: scaleX(0);
	transition: all 800ms ease-out 400ms;
}
#service .reason strong:nth-of-type(2)::after {
	transition-delay: 800ms;
}
#service .reason.show strong::after {
	transform: scaleX(1);
}



#service .reason .illust1 {
	opacity: 0;
	transform: translateY(50px);
	transition: all 1000ms ease-out 500ms;
}
#service .reason .illust2 {
	opacity: 0;
	transform: translateY(50px);
	transition: all 1000ms ease-out 800ms;
}
#service .reason.show .illust1,
#service .reason.show .illust2 {
	opacity: 1;
	transform: translateY(0px);
}


#service .feature {
	opacity: 0;
	transform: translateY(50px);
	transition: all 1000ms ease-out 400ms;
}
#service .feature.show {
	opacity: 1;
	transform: translateY(0px);
}





#contract h2 {
	opacity: 0;
	transition: all 1000ms ease-out 0ms;
}
#contract h2.show {
	opacity: 1;
}
#contract h2 strong::after {
	transform-origin: left top;
	transform: scaleX(0);
	transition: all 800ms ease-out 400ms;
}
#contract h2.show strong::after {
	transform: scaleX(1);
}



#contract .price .col1 {
	opacity: 0;
	transform: translateY(30px);
	transition: all 800ms ease-out 0ms;
}
#contract .price .col2 {
	opacity: 0;
	transform: translateY(30px);
	transition: all 800ms ease-out 200ms;
}
#contract .price.show .col1,
#contract .price.show .col2 {
	opacity: 1;
	transform: translateY(0px);
}



#contract .list li {
	opacity: 0;
	transform: translateY(30px);
	transition: all 800ms ease-out 300ms;
}
#contract .list li:nth-child(2) {
	transition-delay: 600ms;
}
#contract .list li:nth-child(3) {
	transition-delay: 900ms;
}
#contract .list.show li {
	opacity: 1;
	transform: translateY(0px);
}



#contract .merit {
	opacity: 0;
	transform: translateY(30px);
	transition: all 800ms ease-out 0ms;
}
#contract .merit.show {
	opacity: 1;
	transform: translateY(0px);
}


#contract .photo {
	opacity: 0;
	transform: translateY(30px);
	transition: all 800ms ease-out 500ms;
}
#contract .photo.show {
	opacity: 1;
	transform: translateY(0px);
}


#contract nav a {
	opacity: 0;
	transform: translateY(30px);
	transition: all 800ms ease-out 300ms;
}
#contract nav a:nth-child(2) {
	transition-delay: 600ms;
}
#contract nav.show a {
	opacity: 1;
	transform: translateY(0px);
}