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


/* =====================
   planページ専用スタイル
===================== */ 

@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 h2 { overflow: hidden;}
.sec01 h2 span { display: block; opacity: 0;}
.sec01 h2.is-active span { animation: floating-Y100 1.0s ease 0.0s forwards; overflow: inherit;}

.sec01 .plan_wrap { overflow: hidden;}
.sec01 .plan_wrap.is-active { animation: floating-Y30 1.0s ease 0.0s forwards; overflow: inherit;}

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

.sec02 {}

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

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

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

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


}



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


.sec01 {}

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

.sec01 .plan_wrap { overflow: hidden;}
.sec01 .plan_wrap.is-active { animation: floating-Y30 1.0s ease 0.0s forwards; overflow: inherit;}

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

.sec02 {}

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

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

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

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


}