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






[class*="test"] { border: #F00 solid 2px;}


.test02 { po}
.inn {  overflow-x: hidden; background-color:#EEF4FB}



.aaa { position:relative; }

.logooo { position: fixed; top:0; left:0; z-index:30;}
.navvv { background-color:#FFF; width:100%; position:fixed; top:0; right:0; z-index:29; text-align:right;}

.aaa1 {     position: absolute;    top: 0px;    right: 0;    bottom: 0;    left: 0px;width:700px;  transform: translateZ(-1px)scale(1); z-index:10; color:#333; }
.aaa1_block {margin-top:60px;}
.aaa2 {     position: absolute;    top: -100px;    left: 500px; transform: translateZ(-10px) scale(1);}

@media only screen and (max-width: 640px) {
.aaa1 {  position: relative;    top: 0px;    right: 0;    bottom: 0;    left: 0px;width:100%;  transform: translateZ(-1px)scale(1); z-index:10; color:#333; }
}







.bagoon { background-image:url(images/bg001.png);background-size: 100% auto; background-repeat:no-repeat; background-color:#EEF4FB; margin-top:120px; position:relative;}
.bbb1 { position:absolute !important; top:0; left:0; }
.bbb2 { position:absolute !important; top:100px; right:0; }
.massage_block { width:530px; margin-left:auto; margin-right:auto;}

@media only screen and (max-width: 640px) {
.massage_block { width:100%; margin-left:auto; margin-right:auto;}
}

.ceaht { background-image:url(images/bg002.png); background-repeat:no-repeat; background-position:left bottom;background-size: 100% auto; background-color:#EEF4FB; padding:80px 0 150px 0;}
.ceaht img { margin:0 10px;}


.dragon { position:relative; margin-top:100px; z-index:5}
.ddd1 { position:absolute; top:0px; left:-500px;}
.ddd2 {position:absolute; top:0; right:0;}
.ddd3 {position:absolute; top:130px; right:0; width:512px; padding-left:30px;}

@media only screen and (max-width: 640px) {
.ddd1 { position: relative; top:0px; left:0px;}
.ddd2 {position:relative; top:0; right:0;}
.ddd3 {position:relative; top:130px; right:0; width:100%; padding-left:30px;}
}










.eett { margin-top:120px; height:1300px; position:relative;}
.is-activeeett {background-image:url(images/18.png); background-repeat:no-repeat; background-size: 100% 0px;animation: bgchange 1s ease forwards;}
.eee1 { position:absolute; top:450px; left: 50%; transform: translateX(-50%); z-index:1;opacity:0; }
.eee1activ {animation: feedee 2s 1.0s  forwards;}
.eee2 { position:relative; z-index:2;}
.eee3 { color:#FFF; position:absolute; top:400px; left:50%; transform:translateX(-110%); z-index:5; width:500px;}
.eee3_title { font-size:20px; font-weight:bold;}
.eee4 { position:absolute; top:700px; left:50%; z-index:5;}

@keyframes bgchange{
      0%   { background-size: 100% 0px;}/*変化させたい色*/
      100% {background-size: 100% 100%;}/*変化させたい色*/
 }
 
 @keyframes feedee{
      0%   {opacity:0;}
      100% {opacity:1;}
 }
@media only screen and (max-width: 640px) {
.eee3 { color:#FFF; position: relative;  width:100%;}
.eee4 { position:relative; top:700px; left:50%; z-index:5;}
}


/*3連遅延アニメーション*/
.fadein , .fadein2 , .fadein3 , .fadein4  , .fadein02 , .fadein002{  opacity : 0;    transform: translateY(30px);  transition : all 1s;}
.fadein5 , .fadein7 {  opacity : 0;    transform: translateX(30px);  transition : all 1s;}
.fadein6 {  opacity : 0;    transform: translateX(-30px);  transition : all 1s;}
.fadein8 {  opacity : 0;    transition : all 3s;}
.fadein9 {  opacity : 0;    transition : all 3s;}
.active{  opacity : 1;    transform: translateY(0);  transform: translateX(0);}
.ren3delay { display:flex; -webkit-justify-content:  -webkit-justify-content: center; justify-content: center; margin-top:60px;}
.ren3delay p:nth-child(2) { margin:50px; margin-top:70px;}

.ren4delay { display:flex; -webkit-justify-content:  -webkit-justify-content: center; justify-content: center; margin-top:60px;}
.ren4delay p {margin:15px;}
.ren4delay p:nth-child(even) {  margin-top:70px;}