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

html {scroll-behavior: smooth;}

/*/////////////////// Effect ///////////////////*/
/*　フェードイン　*/
.is-fadein01.is-animated {animation: fadeIn01 0.3s forwards;}
@keyframes fadeIn01 {
	0% {opacity: 0; transform: translateY(100px);}
  100% {opacity: 1; transform: translateY(0);}
}

.is-fadein02.is-animated {animation: fadeIn02 0.5s cubic-bezier(0.33, 1, 0.68, 1) forwards;}
@keyframes fadeIn02 {
	0% {opacity: 0; transform: translateY(100px);}
  100% {opacity: 1; transform: translateY(0);}
}

/*　フェードイン　*/
.fadein01 {opacity: 0.0; transform: translate(0, 100px); transition: all 500ms;}
.fadein01.scrollin {opacity: 1; transform: translate(0, 0);}
.fadein02 {opacity: 0.0; transform: translate(0, 120px); transition: all 500ms;}
.fadein02.scrollin {opacity: 1; transform: translate(0, 0);}
.fadein03 {opacity: 0.0; transform: translate(0, 150px); transition: all 600ms;}
.fadein03.scrollin {opacity: 1; transform: translate(0, 0);}
.fadein04 {opacity: 0.0; transform: translate(0, 170px); transition: all 700ms;}
.fadein04.scrollin {opacity: 1; transform: translate(0, 0);}
.fadein05 {opacity: 0.0; transform: translate(0, 190px); transition: all 800ms;}
.fadein05.scrollin {opacity: 1; transform: translate(0, 0);}

.offer_btn>a>img {animation: anime1 0.7s ease 0s infinite alternate; transform-origin:center;}
@keyframes anime1 {
  from {transform: scale(0.93,0.93);}
  to {transform: scale(1,1);}
}

/*/////////////////// LP ///////////////////*/
#uv2025 {width: 100%; margin: 0 auto; padding: 0; background-color: #57e2ff;}
#uv2025>.lpWrap01 {width: 700px; margin: 0 auto; padding: 0 0 50px; text-align: center; background-image: url(https://beautymylab.com/user_data/packages/raku2pc/img/cp/uv2025/bg01.webp); background-repeat: repeat-y; background-size:100%;}
#uv2025>.lpWrap01>img {width: 100%; margin: 0 auto; padding: 0;}
#uv2025>.lpWrap01>.fv {width: 100%; margin: 0 auto 80px; padding: 0;}
#uv2025>.lpWrap02 {width: 700px; margin: 0 auto; padding: 0 0 50px; text-align: center; background-color: #ffffff;}
#uv2025>.lpWrap02>img {width: 100%; margin: 0 auto; padding: 0;}
#uv2025>.lpWrap03 {width: 700px; margin: 0 auto; padding: 0 0 50px; text-align: center; background-color: #eef7ff;}
#uv2025>.lpWrap03>img {width: 100%; margin: 0 auto; padding: 0;}
#uv2025>.lpWrap03>.fv {width: 100%; margin: -180px auto 0; padding: 0;}

.btnArea {width: 100%; margin: 0 auto 40px; padding: 0;}
.btnArea>a:link,
.btnArea>a:visited,
.btnArea>a:hover,
.btnArea>a:active {color: inherit; text-decoration: none;}
.btnArea>a:hover {cursor: pointer;}
.btnArea>a>p {transition-duration: .3s; z-index: 1; font-size: 18px; font-family: "Montserrat", sans-serif; font-weight: 600; letter-spacing: 0.1em;}
.btnArea>.more {position: relative; display: flex; margin: 0 auto; width: 400px; height: 70px; flex-direction: column; align-items: center; justify-content: center; border: solid 2px #000000; overflow: hidden; color: #000000; background-color: #FFFF4C; border-radius: 50px;}
.btnArea>.more::before {position: absolute; width: 0; height: 72px; content: ''; background-color: #6cd8ff; left: 0; transition-duration: .2s;}
.btnArea>.more:hover::before {width: 100%;}
.btnArea>.more>p {color: #000000;}
.btnArea>.more:hover>p {color: #000000;}

.btnArea_last {width: 100%; margin: 100px auto 20px; padding: 0;}
.btnArea_last>a:link,
.btnArea_last>a:visited,
.btnArea_last>a:hover,
.btnArea_last>a:active {color: inherit; text-decoration: none;}
.btnArea_last>a:hover {cursor: pointer;}
.btnArea_last>a>p {transition-duration: .3s; z-index: 1; font-size: 18px; font-family: "Montserrat", sans-serif; font-weight: 600; letter-spacing: 0.1em;}
.btnArea_last>.more {position: relative; display: flex; margin: 0 auto; width: 520px; height: 70px; flex-direction: column; align-items: center; justify-content: center; border: solid 2px #3f5564; overflow: hidden; color: #ffffff; background-color: #3f5564; border-radius: 50px;}
.btnArea_last>.more::before {position: absolute; width: 0; height: 72px; content: ''; background-color: #ffffff; left: 0; transition-duration: .2s;}
.btnArea_last>.more:hover::before {width: 100%;}
.btnArea_last>.more>p {color: #ffffff;}
.btnArea_last>.more:hover>p {color: #3f5564;}