@charset "UTF-8";


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


@keyframes floating-Y50 {
  0% {   transform: translateY( 50%); 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-Y-30 {
  0% {   transform: translateY( -30px); opacity: 0;}
  100% { transform: translateY( 0%); opacity: 1;}
}


@keyframes floating-Y-100 {
  0% {   transform: translateY( -100%); opacity: 1;}
  100% { transform: translateY( 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 floating-X100 {
  0% {   transform: translateX( -100%);}
  100% { transform: translateX( 0%);}
}


@keyframes floating-X100-deg5 {
  0%   { transform: translateX( -100%);}
  90%  { transform: translateX( 0%);}
  100% { transform: translateX( 0%); transform: rotate(-5deg);}
}


@keyframes line100R {
  0% {   right: 100%;}
  100% { right: 0;}
}

@keyframes line100L {
  0% {   left: 100%;}
  100% { left: 0;}
}

@keyframes moveTR01 {
  0%  { transform: translate( -30%, 30%); opacity: 0;}
  10% { transform: translate( -5%, 5%); opacity: 1;}
  90% { transform: translate(  5%, -5%); opacity: 1;}
  100% { transform: translate( 30%, -30%); opacity: 0;}
}

@keyframes zoom02 {
   0% {  transform: scale( 100%); opacity: 1;}
  50% {  transform: scale( 120%); opacity: 1;}
  100% { transform: scale( 100%); opacity: 1;}
}

@keyframes zoom03 {
   0% {  transform: scale( 100%); opacity: 1;}
  50% {  transform: scale( 150%); opacity: 1;}
  100% { transform: scale( 100%); opacity: 1;}
}

@keyframes rotate360 {
   0% {  transform: rotate( 1deg); opacity: 1;}
  100% { transform: rotate( 359deg); opacity: 1;}
}

@keyframes cloud {
  0%   { transform: translateY(  0px);}
  50%  { transform: translateY(  10px);}
  100% { transform: translateY(  0px);}
}




/*---------------------------------------*/
/* common */
/*---------------------------------------*/

.wrapL {}
.wrapL .logo { overflow: hidden;}
.wrapL .logo span { display: block; opacity: 0;}
.wrapL .logo span.is-active { animation: floating-Y-100 1.0s ease 0.5s forwards;}
.wrapL .link span { opacity: 0; overflow: hidden; display: block;}
.wrapL .link span.is-active { animation: zoom 1.0s ease 0.1s forwards;}
.wrapL .sns a span { opacity: 0; overflow: hidden; display: block;}
.wrapL .sns a span.is-active { animation: zoom 1.0s ease 1.0s forwards; overflow: inherit;}


.wrapR {}
.wrapR ul li {}
.wrapR ul li span { opacity: 0; display: block;}
.wrapR ul li:nth-of-type(1) span.is-active { animation: floating-Y50 1.0s ease 0.4s forwards;}
.wrapR ul li:nth-of-type(2) span.is-active { animation: floating-Y50 1.0s ease 0.6s forwards;}
.wrapR ul li:nth-of-type(3) span.is-active { animation: floating-Y50 1.0s ease 0.8s forwards;}
.wrapR ul li:nth-of-type(4) span.is-active { animation: floating-Y50 1.0s ease 1.0s forwards;}
.wrapR ul li:nth-of-type(5) span.is-active { animation: floating-Y50 1.0s ease 1.2s forwards;}
.wrapR ul li:nth-of-type(6) span.is-active { animation: floating-Y50 1.0s ease 1.4s forwards;}
.wrapR ul li:nth-of-type(7) span.is-active { animation: floating-Y50 1.0s ease 1.6s forwards;}
.wrapR ul li:nth-of-type(8) span.is-active { animation: floating-Y50 1.0s ease 1.8s forwards;}
.wrapR ul li:nth-of-type(9) span.is-active { animation: floating-Y50 1.0s ease 2.0s forwards;}



.sec_entry {}
.sec_entry h2 { overflow: hidden;}
.sec_entry h2 span { display: inline-block; opacity: 0;}
.sec_entry h2 span.is-active { animation: floating-Y100 1.0s ease 0.5s forwards;}
.sec_entry p { overflow: hidden;}
.sec_entry p span { display: inline-block; opacity: 0;}
.sec_entry p span.is-active { animation: floating-Y100 1.0s ease 0.5s forwards;}
.sec_entry ul li { display: block; opacity: 0;}
.sec_entry ul li.is-active { animation: floating-Y30 1.0s ease 0.5s forwards;}

footer {}
footer h2 { overflow: hidden;}
footer h2 span { display: block; opacity: 0;}
footer h2 span.is-active { animation: floating-Y100 1.0s ease 0.5s forwards;}
footer p { overflow: hidden;}
footer p span { display: inline-block; opacity: 0;}
footer p span.is-active { animation: floating-Y100 1.0s ease 0.5s forwards;}
footer ul li { display: block; opacity: 0;}
footer ul li.is-active { animation: floating-Y30 1.0s ease 0.5s forwards;}


.ttl:before { transform: translateX(-100%); animation: floating-X100 1.0s ease 0.5s forwards;}
.ttl:after  { transform: translateX(-100%); animation: floating-X100-deg5 1.0s ease 1.0s forwards;}
.ttl h1 { opacity: 0; transform: translateY(-30px); animation: floating-Y30 1.0s ease 2.5s forwards;}
.ttl p { opacity: 0; transform: translateY(-30px); animation: floating-Y30 1.0s ease 2.0s forwards;}


/*figure*/
.figure01L {}
.figure02L { animation: zoom02 4.0s ease 0.0s infinite;}
.figure03L { animation: zoom03 5.0s ease 0.0s infinite;}
.figure04L { opacity: 0; animation: moveTR01 5.0s ease 2.0s infinite;}
.figure05L { opacity: 0;animation: moveTR01 4.0s ease 0.5s infinite;}
.figure06L { opacity: 0;animation: moveTR01 4.0s ease 2.0s infinite;}
.figure07L { animation: zoom03 4.0s ease 0.0s infinite;}
.figure08L {}

.figure01R { opacity: 0; animation: moveTR01 4.5s ease 2.0s infinite;}
.figure02R { opacity: 0; animation: moveTR01 4.0s ease 2.0s infinite;}
.figure03R { opacity: 0; animation: moveTR01 4.0s ease 1.5s infinite;}
.figure04R { opacity: 0; animation: moveTR01 4.0s ease 2.0s infinite;}
.figure05R { opacity: 0; animation: moveTR01 5.0s ease 2.0s infinite;}
.figure06R { opacity: 0; animation: moveTR01 4.0s ease 1.5s infinite;}
.figure07R {}




/*---------------------------------------*/
/* top */
/*---------------------------------------*/
.top {}
.top .cont {}
.top .cont .box01 {}
.top .cont .box01 .figure_main01 {}
.top .cont .box01 .figure_main02 { opacity: 0; animation: moveTR01 4.0s ease 2.0s infinite;}
.top .cont .box01 .figure_main03 { opacity: 0; animation: moveTR01 4.0s ease 4.0s infinite;}
.top .cont .box01 .figure_main04 { opacity: 0; animation: moveTR01 4.0s ease 2.5s infinite;}
.top .cont .box01 .figure_main05 { opacity: 0; animation: moveTR01 4.0s ease 3.0s infinite;}
.top .cont .box01 .figure_main06 {}
.top .cont .box01 .figure_main07 { opacity: 0; animation: moveTR01 4.0s ease 2.0s infinite;}
.top .cont .box01 .figure_main08 { opacity: 0; animation: moveTR01 4.0s ease 3.0s infinite;}
.top .cont .box01 .figure_main09 {}
.top .cont .box01 .figure_main10 { animation: rotate360 8.0s linear 0.0s infinite;}
.top .cont .box01 .figure_main11 {}
.top .cont .box01 .figure_main12 { opacity: 0; animation: moveTR01 4.0s ease 2.0s infinite;}
.top .cont .box01 .figure_main13 { opacity: 0; animation: moveTR01 4.0s ease 4.0s infinite;}
.top .cont .box01 .figure_main14 { opacity: 0; animation: moveTR01 4.0s ease 3.0s infinite;}
.top .cont .box01 .figure_main15 { animation: zoom03 4.0s ease 0.0s infinite;}
.top .cont .box01 .figure_main16 { animation: rotate360 6.0s linear 0.0s infinite;}
.top .cont .box01 .figure_main17 {}
.top .cont .box01 .figure_main18 { opacity: 0; animation: moveTR01 4.0s ease 2.5s infinite;}
.top .cont .box01 .figure_main19 { animation: zoom03 4.0s ease 0.0s infinite;}
.top .cont .box01 .figure_main20 { animation: zoom03 3.0s ease 0.0s infinite;}
.top .cont .box01 .figure_main21 { opacity: 0; animation: moveTR01 4.0s ease 2.0s infinite;}
.top .cont .box01 .figure_main22 { opacity: 0; animation: moveTR01 4.0s ease 3.0s infinite;}
.top .cont .box01 .figure_main23 {}
.top .cont .box01 .figure_main24 {}
.top .cont .box01 .figure_main25 { opacity: 0; animation: moveTR01 4.0s ease 2.0s infinite;}
.top .cont .box01 .figure_main26 { opacity: 0; animation: moveTR01 4.0s ease 3.0s infinite;}
.top .cont .box01 .figure_main27 { opacity: 0; animation: moveTR01 4.0s ease 2.5s infinite;}

.top .cont .box01 .staff01 { opacity: 0; animation: floating-Y30 1.0s ease 1.0s forwards;}
.top .cont .box01 .staff02 { opacity: 0; animation: floating-Y30 1.0s ease 1.5s forwards;}
.top .cont .box01 .staff03 { opacity: 0; animation: floating-Y30 1.0s ease 2.0s forwards;}

.top .cont .box01 .txt01 { opacity: 0; animation: floating-Y30 1.0s ease 2.5s forwards;}


.top .cont .box02 {}
.top .cont .box02 .bnr { opacity: 0;}
.top .cont .box02 .bnr01.is-active { opacity: 0; animation: floating-Y30 1.0s ease 0.5s forwards;}
.top .cont .box02 .bnr02.is-active { opacity: 0; animation: floating-Y30 1.0s ease 0.5s forwards;}
.top .cont .box02 .bnr03.is-active { opacity: 0; animation: floating-Y30 1.0s ease 0.5s forwards;}
.top .cont .box02 .bnr04.is-active { opacity: 0; animation: floating-Y30 1.0s ease 0.5s forwards;}
.top .cont .box02 .bnr05.is-active { opacity: 0; animation: floating-Y30 1.0s ease 0.5s forwards;}
.top .cont .box02 .bnr06.is-active { opacity: 0; animation: floating-Y30 1.0s ease 0.5s forwards;}
.top .cont .box02 .bnr07.is-active { opacity: 0; animation: floating-Y30 1.0s ease 0.5s forwards;}
.top .cont .box02 .bnr08.is-active { opacity: 0; animation: floating-Y30 1.0s ease 0.5s forwards;}


.top .cont .box02 .cloud {}
.top .cont .box02 .cloud01 { animation: cloud 4.0s ease-in-out 0.0s infinite;}
.top .cont .box02 .cloud02 { animation: cloud 3.0s ease-in-out 0.0s infinite;}
.top .cont .box02 .cloud03 { animation: cloud 4.0s ease-in-out 0.0s infinite;}
.top .cont .box02 .cloud04 { animation: cloud 3.0s ease-in-out 0.0s infinite;}
.top .cont .box02 .cloud05 { animation: cloud 4.0s ease-in-out 0.0s infinite;}




/*---------------------------------------*/
/* contact */
/*---------------------------------------*/
.contact {}
.contact .cont {}
.contact .cont .effect { opacity: 0;}
.contact .cont .is-active { animation: floating-Y30 1.0s ease 1.0s forwards;}




/*---------------------------------------*/
/* interview */
/*---------------------------------------*/
.interview {}
.interview .cont {}
.interview .cont .txt { opacity: 0;}
.interview .cont .txt.is-active { animation: floating-Y30 1.0s ease 3.0s forwards;}
.interview .cont .headL::after { right: 100%;}
.interview .cont .headL.is-active::after { animation: line100R 1.0s ease 2.0s forwards;}
.interview .cont .headR::after { left: 100%;}
.interview .cont .headR.is-active::after { animation: line100L 1.0s ease 2.0s forwards;}
.interview .cont .head .head_img { opacity: 0;}
.interview .cont .head.is-active .head_img { animation: zoom 1.0s ease 2.5s forwards;}
.interview .cont .head .position { opacity: 0;}
.interview .cont .head.is-active .position { animation: floating-Y30 1.0s ease 2.5s forwards;}
.interview .cont .head .name { opacity: 0;}
.interview .cont .head.is-active .name { animation: floating-Y30 1.0s ease 2.5s forwards;}
.interview .cont dl dt { opacity: 0;}
.interview .cont dl dt.is-active { animation: floating-Y30 1.0s ease 1.0s forwards;}
.interview .cont dl dd { opacity: 0;}
.interview .cont dl dd.is-active { animation: floating-Y30 1.0s ease 1.3s forwards;}
.interview .cont h3 { opacity: 0;}
.interview .cont h3.is-active { animation: floating-Y30 1.0s ease 1.5s forwards;}
.interview .cont .movie { transform: scale( 0%); opacity: 0;}
.interview .cont .movie.is-active { animation: zoom 1.0s ease 2.0s forwards;}




/*---------------------------------------*/
/* massage */
/*---------------------------------------*/
.massage {}
.massage .cont {}
.massage .cont .movie { opacity: 0;}
.massage .cont .movie.is-active { animation: zoom 1.0s ease 2.0s forwards;}
.massage .cont .movie { opacity: 0;}
.massage .cont h2 { opacity: 0;}
.massage .cont h2.is-active { animation: floating-Y30 1.0s ease 2.0s forwards;}
.massage .cont ul {}
.massage .cont ul li {}
.massage .cont ul li h4 { transform: translateX( -100%);}
.massage .cont ul li.is-active h4 { animation: floating-X100 1.0s ease 1.5s forwards;}
.massage .cont ul li .txt { opacity: 0;}
.massage .cont ul li.is-active .txt { animation: floating-Y30 1.0s ease 1.5s forwards;}


/*---------------------------------------*/
/* movie */
/*---------------------------------------*/
.movie {}
.movie .cont {}
.movie .cont .txt { opacity: 0;}
.movie .cont .txt.is-active { animation: floating-Y30 1.0s ease 3.0s forwards;}
.movie .cont ul li { transform: scale( 0%); opacity: 0;}
.movie .cont ul li.is-active { animation: zoom 1.0s ease 2.0s forwards;}



/*---------------------------------------*/
/* privacy */
/*---------------------------------------*/
.privacy {}
.privacy .cont {}
.privacy .cont .box h2 { overflow: hidden;}
.privacy .cont .box h2 span { transform: translateY( 100%); display: block;}
.privacy .cont .box h2 span.is-active { animation: floating-Y100 1.0s ease 2.0s forwards;}
.privacy .cont .box p { opacity: 0;}
.privacy .cont .box p.is-active { animation: floating-Y30 1.0s ease 2.5s forwards;}
.privacy .cont .box ol li { opacity: 0;}
.privacy .cont .box ol li.is-active { animation: floating-Y30 1.0s ease 2.5s forwards;}
.privacy .cont .contact { opacity: 0;}
.privacy .cont .contact.is-active { animation: floating-Y30 1.0s ease 1.0s forwards;}



/*---------------------------------------*/
/* recruit */
/*---------------------------------------*/
.recruit {}
.recruit .cont {}
.recruit .cont .box {}
.recruit .cont .box h2 { overflow: hidden;}
.recruit .cont .box h2 span { transform: translateY( 100%); display: block;}
.recruit .cont .box h2 span.is-active { animation: floating-Y100 1.0s ease 2.0s forwards;}
.recruit .cont .box .effect { opacity: 0;}
.recruit .cont .box .effect.is-active { animation: floating-Y30 1.0s ease 1.0s forwards;}




/*---------------------------------------*/
/* seimeiryou */
/*---------------------------------------*/
.seimeiryou {}
.seimeiryou .cont {}
.seimeiryou .cont .txt {}
.seimeiryou .cont .img01 { opacity: 0;}
.seimeiryou .cont .img01.is-active { animation: zoom 1.0s ease 2.0s forwards;}
.seimeiryou .cont .story .effect { opacity: 0;}
.seimeiryou .cont .story .effect.is-active { animation: zoom 1.0s ease 1.0s forwards;}



/*---------------------------------------*/
/* to_all_parents */
/*---------------------------------------*/
.to_all_parents {}
.to_all_parents .cont {}
.to_all_parents .cont h2 { opacity: 0;}
.to_all_parents .cont h2.is-active { animation: floating-Y30 1.0s ease 0.5s forwards;}
.to_all_parents .cont .txt01 { opacity: 0;}
.to_all_parents .cont .txt01.is-active { animation: floating-Y30 1.0s ease 1.5s forwards;}
.to_all_parents .cont .txt02 { opacity: 0; overflow: hidden;}
.to_all_parents .cont .txt02.is-active { animation: floating-Y30 1.0s ease 2.0s forwards;}
.to_all_parents .cont .txt02::before { transform: translate( -4px, -4px);}
.to_all_parents .cont .txt02.is-active::before { transform: translate( 0, 0); transition: transform 0.3s ease 3.0s;}
.to_all_parents .cont .txt02::after { transform: translate( 4px, -4px);}
.to_all_parents .cont .txt02.is-active::after { transform: translate( 0, 0); transition: transform 0.3s ease 3.0s;}
.to_all_parents .cont .txt02 .in::before { transform: translate( -4px, 4px);}
.to_all_parents .cont .txt02.is-active .in::before { transform: translate( 0, 0); transition: transform 0.3s ease 3.0s;}
.to_all_parents .cont .txt02 .in::after { transform: translate( 4px, 4px);}
.to_all_parents .cont .txt02.is-active .in::after { transform: translate( 0, 0); transition: transform 0.3s ease 3.0s;}
.to_all_parents .cont {}
.to_all_parents .cont dl {}
.to_all_parents .cont dl dt { overflow: hidden;}
.to_all_parents .cont dl dt span { transform: translateY( 100%); display: block;}
.to_all_parents .cont dl dt span.is-active { animation: floating-Y100 1.0s ease 0.5s forwards;}
.to_all_parents .cont dl dd { overflow: hidden;}
.to_all_parents .cont dl dd span { transform: translateY( 100%); display: block;}
.to_all_parents .cont dl dd span.is-active { animation: floating-Y100 1.0s ease 1.0s forwards;}



/*---------------------------------------*/
/* whats_fukushin */
/*---------------------------------------*/
.whats_fukushin {}
.whats_fukushin .cont {}
.whats_fukushin .cont .effect { opacity: 0;}
.whats_fukushin .cont .effect.is-active { animation: zoom 1.0s ease 2.0s forwards;}



/*---------------------------------------*/
/* works */
/*---------------------------------------*/
.works {}
.works .cont {}
.works .cont h2 { overflow: hidden;}
.works .cont h2 span { transform: translateY( 100%);}
.works .cont h2.is-active span { animation: floating-Y100 1.0s ease 2.0s forwards;}
.works .cont ul li .time { opacity: 0;}
.works .cont ul li .time.is-active { animation: floating-Y30 1.0s ease 1.5s forwards;}
.works .cont ul li .txt { opacity: 0;}
.works .cont ul li .txt.is-active { animation: floating-Y30 1.0s ease 2.0s forwards;}