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

html {scroll-behavior: smooth;}
body, h1, h2, h3, h4, h5, h6, p, address,ul, ol, li, dl, dt, dd,table, th, td, img, form, input,figure {margin: 0; padding: 0; list-style-type: none; font-feature-settings: "palt";}

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

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

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

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

/*/////////////////// LP ///////////////////*/
#xmaslp>.lpWrap>#potset {display: block; padding-top: 80px; margin-top: -80px;}
#xmaslp>.lpWrap>#sinnset {display: block; padding-top: 80px; margin-top: -80px;}
#xmaslp>.lpWrap>#estaset {display: block; padding-top: 80px; margin-top: -80px;}
#xmaslp>.lpWrap>#maisonset {display: block; padding-top: 80px; margin-top: -80px;}
#xmaslp>.lpWrap>#shuset {display: block; padding-top: 80px; margin-top: -80px;}

#xmaslp {width: 100%; margin: 0 auto; padding: 0; background-image: linear-gradient(-225deg, #c20134 0%, #473B7B 30%, #3584A7 60%, #1e4319 100%);}
#xmaslp>.lpWrap {width: 650px; margin: 0 auto; padding: 0; text-align: center; background-color: #ffffff;}
#xmaslp>.lpWrap>img {width: 100%; margin: 0 auto; padding: 0;}
#xmaslp>.lpWrap>#title {width: 100%; margin: 0 auto; padding: 0; background-color: #305736; position: relative;}
#xmaslp>.lpWrap>#title>img {width: 100%; margin: 0 auto; padding: 0;}
#xmaslp>.lpWrap>#title>.acces01 {width: 180px; position: absolute; left: 5%; top: 80px; animation: 2s fuwafuwa01 infinite;}
#xmaslp>.lpWrap>#title>.acces02 {width: 60px; position: absolute; right: 5%; top: 250px; animation: 3s fuwafuwa02 infinite;}
@keyframes fuwafuwa01 {
    0%, 100% {transform: translateY(0);}
    50% {transform: translateY(-15px);}
}
@keyframes fuwafuwa02 {
    0%, 100% {transform: translateY(0);}
    50% {transform: translateY(-10px);}
}

#xmaslp>.lpWrap>#title>.bg-tree {width: 100%; padding: 0 0 100px; background-image: url(https://beautymylab.com/user_data/packages/raku2pc/img/cp/251210xmas/treesp02.webp); background-size: 100%; background-repeat: no-repeat; background-position: top; text-align: center;}
#xmaslp>.lpWrap>#title>.bg-tree>.selectArea {width: 85%; margin: 0 auto; padding: 0 0; text-align: center; display: flex; justify-content: space-between; vertical-align: top; position: relative;}
#xmaslp>.lpWrap>#title>.bg-tree>.selectArea>.row1st {display: inline-block; width: 45%; width : -webkit-calc(100% / 2); width : calc(100% / 2 - 20px); margin: 0 auto 10px; padding: 0;}
#xmaslp>.lpWrap>#title>.bg-tree>.selectArea>.row2nd {display: inline-block; width: 32%; width : -webkit-calc(100% / 3); width : calc(100% / 3 - 20px); margin: 0 auto 0; padding: 0;}
#xmaslp>.lpWrap>#title>.bg-tree>.selectArea>.row1st>a>img {width: 80%;}
#xmaslp>.lpWrap>#title>.bg-tree>.selectArea>.row2nd>a>img {width: 100%;}
#xmaslp>.lpWrap>#title>.bg-tree>.selectArea>div>a>img {width: 100%; margin: 0 auto; padding: 0; position:relative; top:0; filter:drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.5));}
#xmaslp>.lpWrap>#title>.bg-tree>.selectArea>div>a>img:hover {top:-5px; transition:0.3s;}

#xmaslp>.lpWrap>#title>.bg-tree>.selectArea>div>a>.select01 {transform-origin: center bottom; animation: yurayura01 5s linear infinite; top: 10px;}
@keyframes yurayura01 {
  0% , 100%{transform: rotate(12deg);}
  50%{transform: rotate(-12deg);}
}
#xmaslp>.lpWrap>#title>.bg-tree>.selectArea>div>a>.select02 {transform-origin: center bottom; animation: yurayura02 5.5s linear infinite; top: -10px;}
@keyframes yurayura02 {
  0% , 100%{transform: rotate(10deg);}
  50%{transform: rotate(-10deg);}
}
#xmaslp>.lpWrap>#title>.bg-tree>.selectArea>div>a>.select03 {transform-origin: center bottom; animation: yurayura03 6s linear infinite; top: 5px;}
@keyframes yurayura03 {
  0% , 100%{transform: rotate(15deg);}
  50%{transform: rotate(-15deg);}
}
#xmaslp>.lpWrap>#title>.bg-tree>.selectArea>div>a>.select04 {transform-origin: center bottom; animation: yurayura04 4.5s linear infinite; top: 8px;}
@keyframes yurayura04 {
  0% , 100%{transform: rotate(10deg);}
  50%{transform: rotate(-10deg);}
}
#xmaslp>.lpWrap>#title>.bg-tree>.selectArea>div>a>.select05 {transform-origin: center bottom; animation: yurayura05 5s linear infinite; top: 0;}
@keyframes yurayura05 {
  0% , 100%{transform: rotate(8deg);}
  50%{transform: rotate(-8deg);}
}

#xmaslp>.lpWrap>section {width: 100%; margin: 0 auto; padding: 0 0 80px; background-color: #305736;}
#xmaslp>.lpWrap>section>.head {width: 90%; margin: 0 auto 30px; padding: 0;}
#xmaslp>.lpWrap>section>.head>img {width: 100%;}
#xmaslp>.lpWrap>section>.lead {width: 80%; margin: 30px auto 50px; padding: 0;}
#xmaslp>.lpWrap>section>.lead>h3 {margin: 0 auto 30px; padding: 20px 0;; color: #ffffff; font-size: 22px; font-family: "Noto+Sans+JP", sans-serif; font-weight: 500; line-height: 1.5; letter-spacing: 0.05em; text-align: center; border-top: 1px solid #ffffff; border-bottom: 1px solid #ffffff;}
#xmaslp>.lpWrap>section>.lead>p {margin: 0 auto 0; padding: 0; color: #ffffff; font-size: 16px; font-family: "Noto+Sans+JP", sans-serif; font-weight: 400; font-style: normal; line-height: 2.0; letter-spacing: 0.02em; text-align: justify;}
#xmaslp>.lpWrap>section>.item {width: 90%; margin: 0 auto 80px; padding: 150px 0 50px; background-color: #ffffff; border-radius: 50px;}
#xmaslp>.lpWrap>section>.item:last-child {margin: 0  auto;}
#xmaslp>.lpWrap>section>.item>.kv {width: 100%; margin: 0 auto; position: relative;}
#xmaslp>.lpWrap>section>.item>.kv:nth-of-type(2) {margin: 50px auto 0; position: relative;}
#xmaslp>.lpWrap>section>.item>.kv>img {width: 100%;}
#xmaslp>.lpWrap>section>.item>.kv>.tag {width: 550px; position: absolute; top: -120px; left: -30px;}

#xmaslp>.lpWrap>section>.item>a.btn_cart,
#xmaslp>.lpWrap>section>.item>a.btn_cart:link,
#xmaslp>.lpWrap>section>.item>a.btn_cart:visited {display: flex; width: 70%; margin: 10px auto 30px; padding: 28px 0; font-family: 'GT Walsheim Pro Bold', sans-serif; font-weight: 600; font-size: 22px; letter-spacing: 0.1em; text-decoration: none; text-indent: 0; cursor: pointer; text-align: center; align-items: center; justify-content: center; border-radius: 50px;}
#xmaslp>.lpWrap>section>.item>a.btn_cart:hover {text-decoration: none;}
#xmaslp>.lpWrap>section>.item>a.btn_cart::after {font-family: 'Material Symbols rounded'; content: "shopping_cart"; font-size: 20px; font-weight: 400; transition: all .3s ease; margin-left: 10px; color: #ffffff;}

#xmaslp>.lpWrap>#potWrap {background-color: #305736;}
#xmaslp>.lpWrap>#potWrap>.item>a.btn_cart {background-color: #305736; color: #ffffff; border: 2px solid #305736;}
#xmaslp>.lpWrap>#potWrap>.item>a.btn_cart:hover {background-color: #ffffff; color: #305736; text-decoration: none;}
#xmaslp>.lpWrap>#potWrap>.item>a.btn_cart::after {color: #ffffff;}
#xmaslp>.lpWrap>#potWrap>.item>a.btn_cart:hover::after {color: #305736;}

#xmaslp>.lpWrap>#sinnWrap {background-color: #b91f2d;}
#xmaslp>.lpWrap>#sinnWrap>.item>a.btn_cart {background-color: #b91f2d; color: #ffffff; border: 2px solid #b91f2d;}
#xmaslp>.lpWrap>#sinnWrap>.item>a.btn_cart:hover {background-color: #ffffff; color: #b91f2d; text-decoration: none;}
#xmaslp>.lpWrap>#sinnWrap>.item>a.btn_cart::after {color: #ffffff;}
#xmaslp>.lpWrap>#sinnWrap>.item>a.btn_cart:hover::after {color: #b91f2d;}
#xmaslp>.lpWrap>#sinnWrap>.lead>.contents {width: 100%; margin: 0 auto; padding: 0 0; text-align: center; display: flex; justify-content: space-between;}
#xmaslp>.lpWrap>#sinnWrap>.lead>.contents>.text-content {display: inline-block; width: 68%; margin: 0 auto; padding: 0;}
#xmaslp>.lpWrap>#sinnWrap>.lead>.contents>.text-content>p {margin: 0 auto 0; padding: 0; color: #ffffff; font-size: 14px; font-family: "Noto+Sans+JP", sans-serif; font-weight: 400; font-style: normal; line-height: 2.0; letter-spacing: 0.02em; text-align: justify;}
#xmaslp>.lpWrap>#sinnWrap>.lead>.contents>.img-content {display: inline-block; width: 28%; margin: 0 auto; padding: 0;}
#xmaslp>.lpWrap>#sinnWrap>.lead>.contents>.img-content>img {width: 100%;}

#xmaslp>.lpWrap>#estaWrap {background-color: #1b5a6f;}
#xmaslp>.lpWrap>#estaWrap>.item>a.btn_cart {background-color: #1b5a6f; color: #ffffff; border: 2px solid #1b5a6f;}
#xmaslp>.lpWrap>#estaWrap>.item>a.btn_cart:hover {background-color: #ffffff; color: #1b5a6f; text-decoration: none;}
#xmaslp>.lpWrap>#estaWrap>.item>a.btn_cart::after {color: #ffffff;}
#xmaslp>.lpWrap>#estaWrap>.item>a.btn_cart:hover::after {color: #1b5a6f;}

#xmaslp>.lpWrap>#maisonWrap {background-color: #bd3c80;}
#xmaslp>.lpWrap>#maisonWrap>.item>a.btn_cart {background-color: #bd3c80; color: #ffffff; border: 2px solid #bd3c80;}
#xmaslp>.lpWrap>#maisonWrap>.item>a.btn_cart:hover {background-color: #ffffff; color: #bd3c80; text-decoration: none;}
#xmaslp>.lpWrap>#maisonWrap>.item>a.btn_cart::after {color: #ffffff;}
#xmaslp>.lpWrap>#maisonWrap>.item>a.btn_cart:hover::after {color: #bd3c80;}
.copy-box {width: 80%; margin: 10px auto 0;}
.copyttl {display: inline-block; font-size: 18px; line-height: 1.0;}
.copy-text {display: inline-block; margin: 0 20px 0 5px; font-family: 'GT Walsheim Pro Bold', sans-serif; font-weight: 600; font-size: 35px; line-height: 1.0;}
.copy-box>div>button {display: block; width: 200px; margin: 10px auto 0; padding: 10px 0 10px; color: #ffffff; font-weight: 600; font-size: 15px; line-height: 1.0; cursor: pointer;}
.copy-box_maison {padding: 10px 0 15px; border: 4px solid #bd3c80; background-color: #ffffff;}
.copy-box_maison>.copyttl,
.copy-box_maison>.copy-text {color: #bd3c80;}
.copy-box_maison>button {background-color: #bd3c80; border: 1px solid #bd3c80;}
.copy-box_maison>button:hover {background-color: #ffffff; color: #bd3c80;}

#xmaslp>.lpWrap>#shuWrap {background-color: #d7af72;}
#xmaslp>.lpWrap>#shuWrap>.item>a.btn_cart {background-color: #d7af72; color: #ffffff; border: 2px solid #d7af72;}
#xmaslp>.lpWrap>#shuWrap>.item>a.btn_cart:hover {background-color: #ffffff; color: #d7af72; text-decoration: none;}
#xmaslp>.lpWrap>#shuWrap>.item>a.btn_cart::after {color: #ffffff;}
#xmaslp>.lpWrap>#shuWrap>.item>a.btn_cart:hover::after {color: #d7af72;}
#xmaslp>.lpWrap>#shuWrap {background-color: #d7af72;}

#xmaslp>.lpWrap>#allWrap {width: 100%; margin: 0 auto; padding: 0 0 50px; background-color: #d7af72;}
.btn_targetmore,
.btn_targetmore:link,
.btn_targetmore:visited {display: block; width: 450px; margin: 0 auto 0; padding: 25px 0; color: #ffffff; font-size: 18px; font-weight: 600; letter-spacing: 0.05em; line-height: 1.0; position: relative; text-decoration: none; z-index: 0; background: transparent; border-radius: 50px; overflow: hidden; cursor: pointer;}
.btn_targetmore::before,
.btn_targetmore::after {content: ''; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%;}
.btn_targetmore::before {transition: all 0.3s; z-index: -1; background: linear-gradient(135deg, #cd0023 0%, #773947 100%);}
.btn_targetmore::after {z-index: -2; background: linear-gradient(135deg, #097541 0%, #96ca55 100%);}
.btn_targetmore:hover {color: #ffffff !important;}
.btn_targetmore:hover::before {opacity: 0; color: #ffffff !important;}

#xmaslp>.lpWrap>.bnrArea {width: 100%; margin: 0 auto; padding: 40px 0; text-align: center; background-color: #d7af72;}
#xmaslp>.lpWrap>.bnrArea>.cp_ttl {display: block; width: 350px; margin: 0 auto 30px;}
#xmaslp>.lpWrap>.bnrArea>.cp_ttl>img {width: 100%; margin: 0 auto;}
#xmaslp>.lpWrap>.bnrArea>a,
#xmaslp>.lpWrap>.bnrArea>a:link,
#xmaslp>.lpWrap>.bnrArea>a:visited {color: #ffffff; font-size: 13px; text-align: justify; line-height: 1.5; letter-spacing: 0.05em; text-decoration: none;}
#xmaslp>.lpWrap>.bnrArea>a>img {display: block; width: 80%; margin: 0 auto 10px;}

#xmaslp>.lpWrap>.footer {width: 100%; margin: 0 auto; padding: 0;}
#xmaslp>.lpWrap>.footer>img {width: 100%; margin: 0 auto; padding: 0;}

#xmaslp>#leftnavi {width: 300px; margin: 0; padding: 0; position: fixed; top: 200px; left: 0;}
#xmaslp>leftnavi>ul {width: 100%; margin: 0 auto; padding: 0; list-style: none;}
#xmaslp>#leftnavi>ul>li {width: 100%; margin: 0 auto 8px; padding: 0; list-style: none;}
#xmaslp>#leftnavi>ul>li>a,
#xmaslp>#leftnavi>ul>li>a:link,
#xmaslp>#leftnavi>ul>li>a:visited {display: block; margin: 0 auto; padding: 5px 0 7px; color: #ffffff; font-size: 14px; font-family: YakuHanJP, "Zen Kaku Gothic New", sans-serif; font-weight: 400; font-style: normal; line-height: 1.5; letter-spacing: 0.05em; text-align: center; border-radius: 0 30px 30px 0; text-decoration: none;}
#xmaslp>#leftnavi>ul>li>a>span {display: inline-block; margin-left: 5px; font-size: 70%;}
#xmaslp>#leftnavi>ul>li>a.potlink {color: #ffffff; background-color: #2c7237;}
#xmaslp>#leftnavi>ul>li>a.sinnlink {color: #ffffff; background-color: #910C1B;}
#xmaslp>#leftnavi>ul>li>a.estalink {color: #ffffff; background-color: #1b5a6f;}
#xmaslp>#leftnavi>ul>li>a.maisonlink {color: #ffffff; background-color: #bd3c80;}
#xmaslp>#leftnavi>ul>li>a.shulink {color: #ffffff; background-color: #d7af72;}

.snow {
  /*雪の色*/
  color: snow;
  /*雪の大きさ*/
  font-size: 10px;
  /*初期位置*/
  position: fixed;
  top: -5%;
  /*雪を適当な幅で降らせる*/
  text-shadow:
  5vw   -100px 2px,
  10vw  -400px 3px,
  20vw  -500px 4px,
  30vw  -580px 1px,
  39vw  -250px 2px,
  42vw  -340px 5px,
  56vw  -150px 2px,
  63vw  -180px 0,
  78vw  -220px 4px,
  86vw  -320px 9px,
  94vw  -170px 7px;
  /*雪アニメーション1*/
  animation: roll 5s linear infinite;
}
  /*2つめの雪アニメーション*/
.snow2nd{animation: anim 8s linear infinite;}

@keyframes roll {
    0% {transform:rotate(0deg);}
   90% {opacity:1;}
   100% {transform:rotate(20deg);top:100%;opacity:0;}
}
@keyframes anim {
  100% {color:transparent;top:150%;}
}