@charset "utf-8";
/* CSS Document */

@keyframes floating-Y30 {
  0% {   transform: translateY( 30px); opacity: 0;}
  100% { transform: translateY( 0%); opacity: 1;}
}

@keyframes floating-Y100 {
  0% {   transform: translateY( 100%); opacity: 1;}
  100% { transform: translateY( 0%);   opacity: 1;}
}

@keyframes floating-X30 {
  0% {   transform: translateX( 30px); opacity: 0;}
  100% { transform: translateX( 0%); opacity: 1;}
}


@keyframes zoom {
  0% {   transform: scale( 0%); opacity: 0;}
  50% {  transform: scale( 110%); opacity: 1;}
  60% {  transform: scale( 100%); opacity: 1;}
  80% {  transform: scale( 90%); opacity: 1;}
  100% { transform: scale( 100%); opacity: 1;}
}

@keyframes bgiLoop {
  0% {   background-position: 0 0;}
  100% { background-position: 49px 0px;}
}

@keyframes arrowLoop {
  0% {   transform: translateY( -10px); opacity: 0.0;}
  50% {  transform: translateY(   0px); opacity: 1.0;}
  100% { transform: translateY(  10px); opacity: 0.0;}
}



/*PC_px*/
/*@media screen and (min-width: 1680px) {}*/



/*PC*/
@media print, screen and (min-width: 768px) {

.sec01 {}

.sec01 .inner::after { opacity: 0; overflow: hidden;}
.sec01.is-active .inner::after { animation: arrowLoop 1.6s linear 1.5s infinite; overflow: inherit;}

.sec01 .hero-img { opacity: 0; overflow: hidden;}
.sec01.is-active .hero-img { animation: floating-Y30 1.0s ease 0.1s forwards; overflow: inherit;}

.sec01 .catch-copy { opacity: 0; overflow: hidden;}
.sec01.is-active .catch-copy { animation: zoom 0.5s ease 0.5s forwards; overflow: inherit;}

.sec01 .note { overflow: hidden;}
.sec01 .note span { display: block; opacity: 0;}
.sec01 .note.is-active span { animation: floating-Y100 1.0s ease 1.0s forwards; overflow: inherit;}

/*---------------------------*/

.sec02 { opacity: 0; overflow: hidden;}
.sec02.is-active { animation: floating-Y30 1.0s ease 0.0s forwards; overflow: inherit;}

.sec02 h2 { overflow: hidden;}
.sec02 h2 span { display: block; opacity: 0;}
.sec02 h2.is-active span { animation: floating-Y100 1.0s ease 0.1s forwards; overflow: inherit;}

.sec02 .faq-illust-list li { opacity: 0; overflow: hidden;}
.sec02 .faq-illust-list.is-active li:nth-of-type(1) { animation: floating-Y30 1.0s ease 0.5s forwards; overflow: inherit;}
.sec02 .faq-illust-list.is-active li:nth-of-type(2) { animation: floating-Y30 1.0s ease 0.8s forwards; overflow: inherit;}
.sec02 .faq-illust-list.is-active li:nth-of-type(3) { animation: floating-Y30 1.0s ease 1.1s forwards; overflow: inherit;}
.sec02 .faq-illust-list.is-active li:nth-of-type(4) { animation: floating-Y30 1.0s ease 1.4s forwards; overflow: inherit;}
.sec02 .faq-illust-list.is-active li:nth-of-type(5) { animation: floating-Y30 1.0s ease 1.7s forwards; overflow: inherit;}
.sec02 .faq-illust-list.is-active li:nth-of-type(6) { animation: floating-Y30 1.0s ease 2.0s forwards; overflow: inherit;}
.sec02 .faq-illust-list.is-active li:nth-of-type(7) { animation: floating-Y30 1.0s ease 2.3s forwards; overflow: inherit;}

.sec02 .faq-message {}
.sec02 .faq-message.is-active {}

.sec02 .faq-message::before,
.sec02 .faq-message::after  { animation: bgiLoop 1s linear infinite;}

/*---------------------------*/

.sec03 {}
.sec03.is-active {}

.sec03 h3 { position: relative; z-index: 10;}
.sec03 h3 > span { display: block; overflow: hidden;}
.sec03 h3 > span > span { display: block; opacity: 0;}
.sec03 h3.is-active > span > span { animation: floating-Y100 1.0s ease 0.1s forwards; overflow: inherit;}

.sec03 .change-list li { opacity: 0; overflow: hidden;}
.sec03 .change-list.is-active li:nth-of-type(1) { animation: floating-X30 0.5s ease 0.5s forwards; overflow: inherit;}
.sec03 .change-list.is-active li:nth-of-type(2) { animation: floating-X30 0.5s ease 0.8s forwards; overflow: inherit;}
.sec03 .change-list.is-active li:nth-of-type(3) { animation: floating-X30 0.5s ease 1.1s forwards; overflow: inherit;}
.sec03 .change-list.is-active li:nth-of-type(4) { animation: floating-X30 0.5s ease 1.4s forwards; overflow: inherit;}

.sec03 .change-list li::before { opacity: 0; overflow: hidden;}
.sec03 .change-list.is-active li:nth-of-type(1)::before { animation: zoom 1.0s ease 0.8s forwards; overflow: inherit;}
.sec03 .change-list.is-active li:nth-of-type(2)::before { animation: zoom 1.0s ease 1.1s forwards; overflow: inherit;}
.sec03 .change-list.is-active li:nth-of-type(3)::before { animation: zoom 1.0s ease 1.3s forwards; overflow: inherit;}
.sec03 .change-list.is-active li:nth-of-type(4)::before { animation: zoom 1.0s ease 1.7s forwards; overflow: inherit;}

.sec03 .btn-advice { opacity: 0; overflow: hidden;}
.sec03 .btn-advice.is-active { animation: zoom 1.0s ease 0.1s forwards; overflow: inherit;}

/*---------------------------*/

.sec04 {}
.sec04.is-active {}

.sec04 .ttl-jp {}
.sec04 .ttl-jp span { overflow: hidden; opacity: 0;}
.sec04 .ttl-jp.is-active span { display: block; animation: floating-Y100 1.0s ease 0.5s forwards; overflow: inherit;}

.sec04 .works-lead { overflow: hidden;}
.sec04 .works-lead span { display: block; opacity: 0;}
.sec04 .works-lead.is-active span { animation: floating-Y100 1.0s ease 0.4s forwards; overflow: inherit;}

.sec04 .works-list .card { opacity: 0; overflow: hidden;}
.sec04 .works-list .card.is-active:nth-of-type(1) { animation: floating-Y30 0.5s ease 0.5s forwards; overflow: inherit;}
.sec04 .works-list .card.is-active:nth-of-type(2) { animation: floating-Y30 0.5s ease 0.6s forwards; overflow: inherit;}
.sec04 .works-list .card.is-active:nth-of-type(3) { animation: floating-Y30 0.5s ease 0.7s forwards; overflow: inherit;}
.sec04 .works-list .card.is-active:nth-of-type(4) { animation: floating-Y30 0.5s ease 0.8s forwards; overflow: inherit;}
.sec04 .works-list .card.is-active:nth-of-type(5) { animation: floating-Y30 0.5s ease 0.9s forwards; overflow: inherit;}
.sec04 .works-list .card.is-active:nth-of-type(6) { animation: floating-Y30 0.5s ease 1.0s forwards; overflow: inherit;}

.sec04 .btn-viewmore { opacity: 0; overflow: hidden;}
.sec04 .btn-viewmore.is-active { animation: zoom 1.0s ease 0.1s forwards; overflow: inherit;}

/*---------------------------*/

.sec05 h2 { overflow: hidden;}
.sec05 h2 span { display: block; opacity: 0;}
.sec05 h2.is-active span { animation: floating-Y100 1.0s ease 0.1s forwards; overflow: inherit;}

.sec05 .flow-lead { overflow: hidden;}
.sec05 .flow-lead span { display: block; opacity: 0;}
.sec05 .flow-lead.is-active span { animation: floating-Y100 1.0s ease 0.1s forwards; overflow: inherit;}

.sec05 .flow-note { overflow: hidden;}
.sec05 .flow-note span { display: block; opacity: 0;}
.sec05 .flow-note.is-active span { animation: floating-Y100 1.0s ease 0.5s forwards; overflow: inherit;}

.sec05 .flow-list li { opacity: 0; overflow: hidden;}
.sec05 .flow-list li.is-active { animation: floating-Y30 0.5s ease 0.5s forwards; overflow: inherit;}
.sec05 .flow-list li.is-active:nth-of-type(1) { animation: floating-Y30 0.5s ease 0.5s forwards; overflow: inherit;}
.sec05 .flow-list li.is-active:nth-of-type(2) { animation: floating-Y30 0.5s ease 0.6s forwards; overflow: inherit;}
.sec05 .flow-list li.is-active:nth-of-type(3) { animation: floating-Y30 0.5s ease 0.7s forwards; overflow: inherit;}
.sec05 .flow-list li.is-active:nth-of-type(4) { animation: floating-Y30 0.5s ease 0.8s forwards; overflow: inherit;}
.sec05 .flow-list li.is-active:nth-of-type(5) { animation: floating-Y30 0.5s ease 0.9s forwards; overflow: inherit;}
.sec05 .flow-list li.is-active:nth-of-type(6) { animation: floating-Y30 0.5s ease 1.0s forwards; overflow: inherit;}

/*---------------------------*/

.sec06 h2 { overflow: hidden;}
.sec06 h2 span { display: block; opacity: 0;}
.sec06 h2.is-active span { animation: floating-Y100 1.0s ease 0.1s forwards; overflow: inherit;}

.sec06 .plan-lead { overflow: hidden;}
.sec06 .plan-lead span { display: block; opacity: 0;}
.sec06 .plan-lead.is-active span { animation: floating-Y100 1.0s ease 0.1s forwards; overflow: inherit;}

.sec06 .plan-note { overflow: hidden;}
.sec06 .plan-note span { display: block; opacity: 0;}
.sec06 .plan-note.is-active span { animation: floating-Y100 1.0s ease 0.5s forwards; overflow: inherit;}

.sec06 .plan-wrap { opacity: 0; overflow: hidden;}
.sec06 .plan-wrap.is-active { animation: floating-Y30 0.5s ease 0.5s forwards; overflow: inherit;}

.sec06 .btn-viewmore { opacity: 0; overflow: hidden;}
.sec06 .btn-viewmore.is-active { animation: zoom 1.0s ease 0.1s forwards; overflow: inherit;}

.sec06 .btn-advice { opacity: 0; overflow: hidden;}
.sec06 .btn-advice.is-active { animation: zoom 1.0s ease 0.5s forwards; overflow: inherit;}

/*---------------------------*/

.sec07 h2 { overflow: hidden;}
.sec07 h2 span { display: block; opacity: 0;}
.sec07 h2.is-active span { animation: floating-Y100 1.0s ease 0.1s forwards; overflow: inherit;}

.sec07 .office-desc { overflow: hidden;}
.sec07 .office-desc span { display: block; opacity: 0;}
.sec07 .office-desc.is-active span { animation: floating-Y100 1.0s ease 0.1s forwards; overflow: inherit;}

.sec07 .map { opacity: 0; overflow: hidden;}
.sec07 .map.is-active { animation: floating-Y30 0.5s ease 0.5s forwards; overflow: inherit;}

.sec07 .btn-viewmore { opacity: 0; overflow: hidden;}
.sec07 .btn-viewmore.is-active { animation: zoom 1.0s ease 0.1s forwards; overflow: inherit;}


}



/*sp*/
@media only screen and (max-width: 767px) {

.sec01 {}

.sec01 .inner::after { opacity: 0; overflow: hidden;}
.sec01.is-active .inner::after { animation: arrowLoop 1.6s linear 1.5s infinite; overflow: inherit;}

.sec01 .hero-img { opacity: 0; overflow: hidden;}
.sec01.is-active .hero-img { animation: floating-Y30 1.0s ease 0.1s forwards; overflow: inherit;}

.sec01 .catch-copy { opacity: 0; overflow: hidden;}
.sec01.is-active .catch-copy { animation: zoom 0.5s ease 0.5s forwards; overflow: inherit;}

.sec01 .note { overflow: hidden;}
.sec01 .note span { display: block; opacity: 0;}
.sec01 .note.is-active span { animation: floating-Y100 1.0s ease 1.0s forwards; overflow: inherit;}

/*---------------------------*/

.sec02 { opacity: 0; overflow: hidden;}
.sec02.is-active { animation: floating-Y30 1.0s ease 0.0s forwards; overflow: inherit;}

.sec02 h2 { overflow: hidden;}
.sec02 h2 span { display: block; opacity: 0;}
.sec02 h2.is-active span { animation: floating-Y100 1.0s ease 0.1s forwards; overflow: inherit;}

.sec02 .faq-illust-list li { opacity: 0; overflow: hidden;}
.sec02 .faq-illust-list.is-active:nth-of-type(1) li:nth-of-type(1) { animation: floating-Y30 1.0s ease 0.5s forwards; overflow: inherit;}
.sec02 .faq-illust-list.is-active:nth-of-type(1) li:nth-of-type(2) { animation: floating-Y30 1.0s ease 0.8s forwards; overflow: inherit;}
.sec02 .faq-illust-list.is-active:nth-of-type(2) li:nth-of-type(1) { animation: floating-Y30 1.0s ease 1.1s forwards; overflow: inherit;}
.sec02 .faq-illust-list.is-active:nth-of-type(2) li:nth-of-type(2) { animation: floating-Y30 1.0s ease 1.4s forwards; overflow: inherit;}
.sec02 .faq-illust-list.is-active:nth-of-type(2) li:nth-of-type(3) { animation: floating-Y30 1.0s ease 1.7s forwards; overflow: inherit;}
.sec02 .faq-illust-list.is-active:nth-of-type(3) li:nth-of-type(1) { animation: floating-Y30 1.0s ease 2.0s forwards; overflow: inherit;}
.sec02 .faq-illust-list.is-active:nth-of-type(3) li:nth-of-type(2) { animation: floating-Y30 1.0s ease 2.3s forwards; overflow: inherit;}

.sec02 .faq-message {}
.sec02 .faq-message.is-active {}

.sec02 .faq-message::before,
.sec02 .faq-message::after  { animation: bgiLoop 1s linear infinite;}

/*---------------------------*/

.sec03 {}
.sec03.is-active {}

.sec03 h3 { position: relative; z-index: 10;}
.sec03 h3 > span { display: block; overflow: hidden;}
.sec03 h3 > span > span { display: block; opacity: 0;}
.sec03 h3.is-active > span > span { animation: floating-Y100 1.0s ease 0.1s forwards; overflow: inherit;}

.sec03 .change-list li { opacity: 0; overflow: hidden;}
.sec03 .change-list.is-active li:nth-of-type(1) { animation: floating-X30 0.5s ease 0.5s forwards; overflow: inherit;}
.sec03 .change-list.is-active li:nth-of-type(2) { animation: floating-X30 0.5s ease 0.8s forwards; overflow: inherit;}
.sec03 .change-list.is-active li:nth-of-type(3) { animation: floating-X30 0.5s ease 1.1s forwards; overflow: inherit;}
.sec03 .change-list.is-active li:nth-of-type(4) { animation: floating-X30 0.5s ease 1.4s forwards; overflow: inherit;}

.sec03 .change-list li::before { opacity: 0; overflow: hidden;}
.sec03 .change-list.is-active li:nth-of-type(1)::before { animation: zoom 1.0s ease 0.8s forwards; overflow: inherit;}
.sec03 .change-list.is-active li:nth-of-type(2)::before { animation: zoom 1.0s ease 1.1s forwards; overflow: inherit;}
.sec03 .change-list.is-active li:nth-of-type(3)::before { animation: zoom 1.0s ease 1.3s forwards; overflow: inherit;}
.sec03 .change-list.is-active li:nth-of-type(4)::before { animation: zoom 1.0s ease 1.7s forwards; overflow: inherit;}

.sec03 .btn-advice { opacity: 0; overflow: hidden;}
.sec03 .btn-advice.is-active { animation: zoom 1.0s ease 0.1s forwards; overflow: inherit;}

/*---------------------------*/

.sec04 {}
.sec04.is-active {}

.sec04 .ttl-jp {}
.sec04 .ttl-jp span { overflow: hidden; opacity: 0;}
.sec04 .ttl-jp.is-active span { display: block; animation: floating-Y100 1.0s ease 0.5s forwards; overflow: inherit;}

.sec04 .works-lead { overflow: hidden;}
.sec04 .works-lead span { display: block; opacity: 0;}
.sec04 .works-lead.is-active span { animation: floating-Y100 1.0s ease 0.4s forwards; overflow: inherit;}

.sec04 .works-list .card { opacity: 0; overflow: hidden;}
.sec04 .works-list .card.is-active:nth-of-type(1) { animation: floating-Y30 0.5s ease 0.5s forwards; overflow: inherit;}
.sec04 .works-list .card.is-active:nth-of-type(2) { animation: floating-Y30 0.5s ease 0.6s forwards; overflow: inherit;}
.sec04 .works-list .card.is-active:nth-of-type(3) { animation: floating-Y30 0.5s ease 0.7s forwards; overflow: inherit;}
.sec04 .works-list .card.is-active:nth-of-type(4) { animation: floating-Y30 0.5s ease 0.8s forwards; overflow: inherit;}
.sec04 .works-list .card.is-active:nth-of-type(5) { animation: floating-Y30 0.5s ease 0.9s forwards; overflow: inherit;}
.sec04 .works-list .card.is-active:nth-of-type(6) { animation: floating-Y30 0.5s ease 1.0s forwards; overflow: inherit;}

.sec04 .btn-viewmore { opacity: 0; overflow: hidden;}
.sec04 .btn-viewmore.is-active { animation: zoom 1.0s ease 0.1s forwards; overflow: inherit;}

/*---------------------------*/

.sec05 h2 { overflow: hidden;}
.sec05 h2 span { display: block; opacity: 0;}
.sec05 h2.is-active span { animation: floating-Y100 1.0s ease 0.1s forwards; overflow: inherit;}

.sec05 .flow-lead { overflow: hidden;}
.sec05 .flow-lead span { display: block; opacity: 0;}
.sec05 .flow-lead.is-active span { animation: floating-Y100 1.0s ease 0.1s forwards; overflow: inherit;}

.sec05 .flow-note { overflow: hidden;}
.sec05 .flow-note span { display: block; opacity: 0;}
.sec05 .flow-note.is-active span { animation: floating-Y100 1.0s ease 0.5s forwards; overflow: inherit;}

.sec05 .flow-list li { opacity: 0; overflow: hidden;}
.sec05 .flow-list li.is-active { animation: floating-Y30 0.5s ease 0.5s forwards; overflow: inherit;}
.sec05 .flow-list li.is-active:nth-of-type(1) { transition-delay: 0.5s;}
.sec05 .flow-list li.is-active:nth-of-type(2) { transition-delay: 0.8s;}
.sec05 .flow-list li.is-active:nth-of-type(3) { transition-delay: 1.1s;}
.sec05 .flow-list li.is-active:nth-of-type(4) { transition-delay: 1.4s;}
.sec05 .flow-list li.is-active:nth-of-type(5) { transition-delay: 1.7s;}
.sec05 .flow-list li.is-active:nth-of-type(6) { transition-delay: 2.0s;}

/*---------------------------*/

.sec06 h2 { overflow: hidden;}
.sec06 h2 span { display: block; opacity: 0;}
.sec06 h2.is-active span { animation: floating-Y100 1.0s ease 0.1s forwards; overflow: inherit;}

.sec06 .plan-lead { overflow: hidden;}
.sec06 .plan-lead span { display: block; opacity: 0;}
.sec06 .plan-lead.is-active span { animation: floating-Y100 1.0s ease 0.1s forwards; overflow: inherit;}

.sec06 .plan-note { overflow: hidden;}
.sec06 .plan-note span { display: block; opacity: 0;}
.sec06 .plan-note.is-active span { animation: floating-Y100 1.0s ease 0.5s forwards; overflow: inherit;}

.sec06 .plan-wrap { opacity: 0; overflow: hidden;}
.sec06 .plan-wrap.is-active { animation: floating-Y30 0.5s ease 0.5s forwards; overflow: inherit;}

.sec06 .btn-viewmore { opacity: 0; overflow: hidden;}
.sec06 .btn-viewmore.is-active { animation: zoom 1.0s ease 0.1s forwards; overflow: inherit;}

.sec06 .btn-advice { opacity: 0; overflow: hidden;}
.sec06 .btn-advice.is-active { animation: zoom 1.0s ease 0.5s forwards; overflow: inherit;}

/*---------------------------*/

.sec07 h2 { overflow: hidden;}
.sec07 h2 span { display: block; opacity: 0;}
.sec07 h2.is-active span { animation: floating-Y100 1.0s ease 0.1s forwards; overflow: inherit;}

.sec07 .office-desc { overflow: hidden;}
.sec07 .office-desc span { display: block; opacity: 0;}
.sec07 .office-desc.is-active span { animation: floating-Y100 1.0s ease 0.1s forwards; overflow: inherit;}

.sec07 .map { opacity: 0; overflow: hidden;}
.sec07 .map.is-active { animation: floating-Y30 0.5s ease 0.5s forwards; overflow: inherit;}

.sec07 .btn-viewmore { opacity: 0; overflow: hidden;}
.sec07 .btn-viewmore.is-active { animation: zoom 1.0s ease 0.1s forwards; overflow: inherit;}


}