.delighter.right { transform:translate(200%); opacity:0; transition: all .55s ease-out; }
.delighter.right.started { transform:none; opacity:1; }


/* 基本のスタイル */
.foo.delighter {
      transition: all .3s ease-out;
      transform: translateX(-100%);
      opacity: 0;
}
 
/* スタート時のスタイル */
.foo.delighter.started {
      transform: none;
      opacity: 1;
}
 
/* エンド時のスタイル */
.foo.delighter.started.ended {
      border: solid red 10px;
}







.delighter.button001_mov { transform:translateX(-200%); opacity:0; transition: all .55s ease-out; }
.delighter.button002_mov { transform:translateX(200%); opacity:0; transition: all .55s ease-out; }
.delighter.button001_mov.started,
.delighter.button002_mov.started { transform:none; opacity:1; }





/* pc */
@media screen and (min-width: 501px) {
/*ここにpc用スタイルを記述*/


/******* intro *******/

.pad_slidelogo {
	padding: 0 0 16% 0;
	width:100%;
	margin-top: -16%;
	margin-bottom: -0.0em;
	position: relative;
	z-index:10;
	filter: drop-shadow(3px 3px 10px rgba(80,20,20,0.6)); 
	opacity:0; 
	transform:translateY(90px); 
	transition: all 0.4s ease-out 0.4s;
}
.delighter.pad_slidelogo.started {
	opacity: 1;
	transform:none; 
}
.delighter.pad_slidelogo.ended {
	margin-left:-0.0em;
}



.pad_slidetitle {
	padding: 0 0 0 0;
	width:80%;
	margin-top: -118%;
	margin-bottom: -0.0em;
	position: relative;
	z-index:10;
	opacity:0; 
	transform:translateY(130px); 
	transition: all 0.4s ease-out 0.8s;
}
.delighter.pad_slidetitle.started {
	opacity: 1;
	transform:none; 
}
.delighter.pad_slidetitle.ended {
	margin-left:-0.0em;
}

.pad_slidespeak {
	padding: 0 0 0 64%;
	width:30%;
	margin-top: -20%;
	margin-bottom: -0.0em;
	position: relative;
	z-index:20;
	opacity:0; 
	transform:translateX(30px); 
	transition: all 0.4s ease-out 0.8s;
}
.delighter.pad_slidespeak.started {
	opacity: 1;
	transform:none; 
}
.delighter.pad_slidespeak.ended {
	margin-left:-0.0em;
}



.pad_slidemain {
	padding: 0 0 4% 0;
	width:100%;
	margin-top: -11%;
	margin-bottom: -0.0em;
	position: relative;
	z-index:10;
	opacity:0; 
	transform:translateY(-130px); 
	transition: all 0.4s ease-out 0.2s;
}
.delighter.pad_slidemain.started {
	opacity: 1;
	transform:none; 
}
.delighter.pad_slidemain.ended {
	margin-left:-0.0em;
}


.pad_yellowtitle {
	padding: 3% 0 4% 0;
	width:100%;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
	position: relative;
	z-index:10;
}
.delighter.pad_yellowtitle.started {
	opacity: 1;
	transform:none; 
}
.delighter.pad_slidemain.ended {
	margin-top: -0.0em;
}



/******* AREA *******/


.pad_img01{
	width: 96%;
	padding: 0 0 0 0;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
	position: relative;
	z-index:10;
}
.pad_img02{
	width: 96%;
	padding: 0 0 0 0;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
	position: relative;
	z-index:10;
}
.pad_img03{
	width: 96%;
	padding: 0 0 0 0;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
	position: relative;
	z-index:10;
}
.pad_img04{
	width: 96%;
	padding: 0 0 0 0;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
	position: relative;
	z-index:10;
}
.delighter.pad_img01.started,
.delighter.pad_img02.started,
.delighter.pad_img03.started,
.delighter.pad_img04.started {
	opacity: 1;
	transform:none; 
}





.pad_bu003 {
	padding: 0 0 2% 0;
	width:75%;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
	position: relative;
	z-index:10; 
	opacity:0; 
	transform:translateX(-190%); 
	transition: all 0.4s ease-out 0.4s;
}
.delighter.pad_bu003.started {
	opacity: 1;
	transform:none; 
}
.delighter.pad_bu003.ended {
	margin-left:-0.0em;
}


.pad_bu004 {
	padding: 0 0 2% 0;
	width:75%;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
	position: relative;
	z-index:10; 
	opacity:0; 
	transform:translateX(190%); 
	transition: all 0.4s ease-out 0.4s;
}
.delighter.pad_bu004.started {
	opacity: 1;
	transform:none; 
}
.delighter.pad_bu004.ended {
	margin-left:-0.0em;
}




/******* 10 Item *******/

.pad_10item_title01 {
	width: 100%;
	padding: 0 0 0 0;
	margin-top: -6%;
	margin-bottom: -0.0em;
	position: relative;
	z-index: 20;
}
.pad_10item_title01.delighter {
     transition: all .4s ease-out 0.2s;
      transform: translateX(-100%);
      opacity: 0;
}
.pad_10item_title01.delighter.started {
      transform: none;
      opacity: 1;
}


.pad_procc_img01 {
	width: 62%;
	padding: 0 0 0 14%;
	margin-top: 1%;
	margin-bottom: -0.0em;
	position: relative;
	z-index: 18;
}
.pad_procc_img01.delighter {
     transition: all .3s ease-out 0.5s;
      transform: translateX(100%);
      opacity: 0;
}
.pad_procc_img01.delighter.started {
      transform: none;
      opacity: 1;
}


.pad_procc_spec01 {
	width:64%;
	padding: 0 0 0 10%;
	margin-top: -33%;
	margin-bottom: -0.0em;
	position: relative;
	z-index: 15;
}

.pad_procc_spec01.delighter {
     transition: all .3s ease-out 0.7s;
      transform: translate(10%,-10%);
	  transform: scale(0.8,0.8);
      opacity: 0;
}
.pad_procc_spec01.delighter.started {
      transform: none;
      opacity: 1;
}


.pad_procc_title02 {
	width: 82%;
	padding: 0 0 22% 17%;
	margin-top: -9%;
	margin-bottom: -0.0em;
	position: relative;
	z-index: 18;
}
.pad_procc_title02.delighter {
     transition: all .3s ease-out 0.5s;
      transform: translateX(20%);
      opacity: 0;
}
.pad_procc_title02.delighter.started {
      transform: none;
      opacity: 1;
}


/******* PRESENT *******/


.pad_pre001{
	width: 96%;
	padding: 0 0 3% 0;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
	position: relative;
	z-index:10;
}
.pad_pre002{
	width: 96%;
	padding: 0 0 3% 0;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
	position: relative;
	z-index:10;
}
.pad_pre003{
	width: 96%;
	padding: 0 0 3% 0;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
	position: relative;
	z-index:10;
}
.pad_pre004{
	width: 84%;
	padding: 0 0 3% 0;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
	position: relative;
	z-index:10;
}
.pad_pre005{
	width: 84%;
	padding: 0 0 3% 0;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
	position: relative;
	z-index:10;
}

.delighter.pad_pre001.started,
.delighter.pad_pre002.started,
.delighter.pad_pre003.started,
.delighter.pad_pre004.started,
.delighter.pad_pre005.started {
	opacity: 1;
	transform:none; 
}


/******* PROCESS *******/

.pad_yellowtitle02 {
	padding: 8% 0 4% 0;
	width:100%;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
	position: relative;
	z-index:10;
}
.delighter.pad_yellowtitle02.started {
	opacity: 1;
	transform:none; 
}
.delighter.pad_yellowtitle02.ended {
	margin-left:-0.0em;
}


.pad_process01 {
	width: 92%;
	padding: 0 0 0 0;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
	position: relative;
	z-index: 18;
}
.delighter.pad_process01 {
     transition: all .3s ease-out 0.3s;
      transform: translateY(40%);
      opacity: 0;
}
.delighter.pad_process01.started {
      transform: none;
      opacity: 1;
}






/******* FAQ *******/

.pad_faqtitle {
	padding: 60% 0 4% 0;
	width:100%;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
	position: relative;
	z-index:10;
	opacity:0; 
	transform:translateY(-130px); 
	transition: all 0.4s ease-out 0.8s;
}
.delighter.pad_faqtitle.started {
	opacity: 1;
	transform:none; 
}
.delighter.pad_faqtitle.ended {
	margin-left:-0.0em;
}





}






/* smartPhone */
@media screen and (max-width: 500px) {
/*ここにスマホ用スタイルを記述*/




/******* intro *******/

.pad_slidelogo {
	padding: 0 0 14% 0;
	width:100%;
	margin-top: -14%;
	margin-bottom: -0.0rem;
	position: relative;
	z-index:10;
	filter: drop-shadow(3px 3px 10px rgba(80,20,20,0.6)); 
	opacity:0; 
	transform:translateY(90px); 
	transition: all 0.4s ease-out 0.4s;
}
.delighter.pad_slidelogo.started {
	opacity: 1;
	transform:none; 
}
.delighter.pad_slidelogo.ended {
	margin-left:-0.0em;
}



.pad_slidetitle {
	padding: 0 0 0 0;
	width:100%;
	margin-top: -188%;
	margin-bottom: -0.0em;
	position: relative;
	z-index:10;
	opacity:0; 
	transform:translateY(130px); 
	transition: all 0.4s ease-out 0.8s;
}
.delighter.pad_slidetitle.started {
	opacity: 1;
	transform:none; 
}
.delighter.pad_slidetitle.ended {
	margin-left:-0.0em;
}

.pad_slidespeak {
	padding: 0 0 0 56%;
	width:40%;
	margin-top: -20%;
	margin-bottom: -0.0em;
	position: relative;
	z-index:20;
	opacity:0; 
	transform:translateX(30px); 
	transition: all 0.4s ease-out 0.8s;
}
.delighter.pad_slidespeak.started {
	opacity: 1;
	transform:none; 
}
.delighter.pad_slidespeak.ended {
	margin-left:-0.0em;
}



.pad_slidemain {
	padding: 0 0 4% 0;
	width:100%;
	margin-top: -8%;
	margin-bottom: -0.0em;
	position: relative;
	z-index:10;
	opacity:0; 
	transform:translateY(-130px); 
	transition: all 0.4s ease-out 0.8s;
}
.delighter.pad_slidemain.started {
	opacity: 1;
	transform:none; 
}
.delighter.pad_slidemain.ended {
	margin-left:-0.0em;
}


.pad_yellowtitle {
	padding: 3% 0 4% 0;
	width:100%;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
	position: relative;
	z-index:10;
}
.delighter.pad_yellowtitle.started {
	opacity: 1;
	transform:none; 
}




/******* AREA *******/


.pad_img01{
	width: 90%;
	padding: 0 0 4% 0;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
	position: relative;
	z-index:10;
}
.pad_img02{
	width: 90%;
	padding: 0 0 4% 0;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
	position: relative;
	z-index:10;
}
.pad_img03{
	width: 90%;
	padding: 0 0 4% 0;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
	position: relative;
	z-index:10;
}
.pad_img04{
	width: 90%;
	padding: 0 0 4% 0;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
	position: relative;
	z-index:10;
}
.delighter.pad_img01.started,
.delighter.pad_img02.started,
.delighter.pad_img03.started,
.delighter.pad_img04.started {
	opacity: 1;
	transform:none; 
}




.pad_bu003 {
	padding: 0 0 2% 0;
	width:92%;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
	position: relative;
	z-index:10; 
	opacity:0; 
	transform:translateX(-190%); 
	transition: all 0.4s ease-out 0.4s;
}
.delighter.pad_bu003.started {
	opacity: 1;
	transform:none; 
}
.delighter.pad_bu003.ended {
	margin-left:-0.0em;
}


.pad_bu004 {
	padding: 0 0 2% 0;
	width:92%;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
	position: relative;
	z-index:10; 
	opacity:0; 
	transform:translateX(190%); 
	transition: all 0.4s ease-out 0.4s;
}
.delighter.pad_bu004.started {
	opacity: 1;
	transform:none; 
}
.delighter.pad_bu004.ended {
	margin-left:-0.0em;
}



/******* 10 Item *******/

.pad_10item_title01 {
	width: 100%;
	padding: 0 0 0 0;
	margin-top: -6%;
	margin-bottom: -0.0em;
	position: relative;
	z-index: 20;
}
.pad_10item_title01.delighter {
     transition: all .4s ease-out 0.2s;
      transform: translateX(-100%);
      opacity: 0;
}
.pad_10item_title01.delighter.started {
      transform: none;
      opacity: 1;
}


.pad_procc_img01 {
	width: 62%;
	padding: 0 0 0 14%;
	margin-top: 1%;
	margin-bottom: -0.0em;
	position: relative;
	z-index: 18;
}
.pad_procc_img01.delighter {
     transition: all .3s ease-out 0.5s;
      transform: translateX(100%);
      opacity: 0;
}
.pad_procc_img01.delighter.started {
      transform: none;
      opacity: 1;
}


.pad_procc_spec01 {
	width:64%;
	padding: 0 0 0 10%;
	margin-top: -33%;
	margin-bottom: -0.0em;
	position: relative;
	z-index: 15;
}

.pad_procc_spec01.delighter {
     transition: all .3s ease-out 0.7s;
      transform: translate(10%,-10%);
	  transform: scale(0.8,0.8);
      opacity: 0;
}
.pad_procc_spec01.delighter.started {
      transform: none;
      opacity: 1;
}


.pad_procc_title02 {
	width: 82%;
	padding: 0 0 22% 17%;
	margin-top: -9%;
	margin-bottom: -0.0em;
	position: relative;
	z-index: 18;
}
.pad_procc_title02.delighter {
     transition: all .3s ease-out 0.5s;
      transform: translateX(20%);
      opacity: 0;
}
.pad_procc_title02.delighter.started {
      transform: none;
      opacity: 1;
}





/******* PRESENT *******/


.pad_pre001{
	width: 96%;
	padding: 0 0 3% 0;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
	position: relative;
	z-index:10;
}
.pad_pre002{
	width: 96%;
	padding: 0 0 3% 0;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
	position: relative;
	z-index:10;
}

.delighter.pad_pre001.started,
.delighter.pad_pre002.started {
	opacity: 1;
	transform:none; 
}


/******* PROCESS *******/

.pad_yellowtitle02 {
	padding: 8% 0 3% 0;
	width:100%;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
	position: relative;
	z-index:20;
}
.delighter.pad_yellowtitle02.started {
	opacity: 1;
	transform:none; 
}
.delighter.pad_yellowtitle02.ended {
	margin-left:-0.0em;
}

.pad_process01 {
	width: 95%;
	padding: 0 0 0 0;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
	position: relative;
	z-index: 18;
}
.pad_process02 {
	width: 95%;
	padding: 0 0 0 0;
	margin-top: -3%;
	margin-bottom: -0.0em;
	position: relative;
	z-index: 18;
}
.pad_process01.delighter,
.pad_process02.delighter {
     transition: all .3s ease-out 0.5s;
      transform: translateY(100%);
      opacity: 0;
}
.pad_process01.delighter.started,
.pad_process02.delighter.started {
      transform: none;
      opacity: 1;
}




/******* FAQ *******/

.pad_faqtitle {
	padding: 60% 0 4% 0;
	width:100%;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
	position: relative;
	z-index:10;
	opacity:0; 
	transform:translateY(-130px); 
	transition: all 0.4s ease-out 0.8s;
}
.delighter.pad_faqtitle.started {
	opacity: 1;
	transform:none; 
}
.delighter.pad_faqtitle.ended {
	margin-left:-0.0em;
}





}