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

html {scroll-behavior: smooth;}

/*/////////////////// 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.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 1000ms;}
.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 //////////////////////////////////////*/
#keeplp {width: 100%; margin: 0 auto; padding: 0; background-color: #253b26;}
#keeplp>.lpWrap {width: 700px; margin: 0 auto; padding: 0; text-align: center; background-color: #ffffff;}
#keeplp>.lpWrap>img {width: 100%; margin: 0 auto; padding: 0;}
#keeplp>.lpWrap>.lead {width: 85%; margin: 50px auto 80px; padding: 0;}
#keeplp>.lpWrap>.lead>h2 {margin: 0 auto 70px; padding: 0; color: #000000; font-size: 32px; font-family: YakuHanMP, "Shippori Mincho", serif; font-weight: 400; line-height: 1.8; letter-spacing: 0.02em; text-align: center;}
#keeplp>.lpWrap>.lead>h3 {margin: 0 auto 30px; padding: 0; color: #000000; font-size: 26px; font-family: YakuHanMP, "Shippori Mincho", serif; font-weight: 400; line-height: 1.8; letter-spacing: 0.02em; text-align: justify;}
#keeplp>.lpWrap>.lead>h3>span.marker {background: linear-gradient(transparent 80%, #9fd4d8 80%);}
#keeplp>.lpWrap>.lead>p {margin: 0 auto 20px; padding: 0; color: #000000; font-size: 18px; font-family: YakuHanMP, "Shippori Mincho", serif; font-weight: 400; line-height: 2.0; letter-spacing: 0.02em; text-align: justify;}
#keeplp>.lpWrap>.lead>img {width: 90%; margin: 0 auto 40px; padding: 0;}

/*/////////////////// INNER CARE ///////////////////*/
#keeplp>.lpWrap>#innercare {width: 100%; margin: 0 auto 80px; padding: 0; text-align: center;}
#keeplp>.lpWrap>#innercare>img {width: 100%; margin: 0 auto; padding: 0;}
#keeplp>.lpWrap>#innercare>.bg {width: 100%; margin: 0 auto; padding: 0; background-color: #f0ebe6;}
#keeplp>.lpWrap>#innercare>.bg>p {width: 80%; margin: 0 auto 0; padding: 0; color: #000000; font-size: 18px; font-family: YakuHanMP, "Shippori Mincho", serif; font-weight: 400; line-height: 2.0; letter-spacing: 0.02em; text-align: justify;}

/*/////////////////// POTseries ///////////////////*/
#keeplp>.lpWrap>#potseries {width: 100%; margin: 0 auto; padding: 0; text-align: center;}
#keeplp>.lpWrap>#potseries>img {width: 100%; margin: 0 auto; padding: 0;}
#keeplp>.lpWrap>#potseries>.potselect {width: 90%; margin: 20px auto 70px; padding: 0; text-align: center; padding: 0; display: flex; flex-wrap: wrap; justify-content: space-between; vertical-align: top;}
#keeplp>.lpWrap>#potseries>.potselect>div {display: inline-block; width: 45%; width : -webkit-calc(100% / 2); width : calc(100% / 2 - 20px); margin: 0 auto 30px; padding: 0;}
#keeplp>.lpWrap>#potseries>.potselect>div>a>img {width: 100%; margin: 0 auto; padding: 0; position: relative; top: 0; transition:0.1s;}
#keeplp>.lpWrap>#potseries>.potselect>div>a>img:hover {top: -10px; transition:0.3s;}

/*/////////////////// GREEN POT ///////////////////*/
#keeplp>.lpWrap>#greenpot {width: 100%; margin: 0 auto 100px; padding: 0; text-align: center;}
#keeplp>.lpWrap>#greenpot>h3 {margin: 0 auto 30px; padding: 0; color: #000000; font-size: 30px; font-family: YakuHanMP, "Shippori Mincho", serif; font-weight: 400; line-height: 1.8; letter-spacing: 0.02em; text-align: center;}
#keeplp>.lpWrap>#greenpot>p {margin: 0 auto 20px; padding: 0; color: #000000; font-size: 18px; font-family: YakuHanMP, "Shippori Mincho", serif; font-weight: 400; line-height: 2.0; letter-spacing: 0.02em; text-align: center;}
#keeplp>.lpWrap>#greenpot>img {width: 100%; margin: 0 auto; padding: 0;}
#keeplp>.lpWrap>#greenpot>.bg {width: 100%; margin: 0 auto; padding: 0 0 50px; background-color: #c2d1ca;}
#keeplp>.lpWrap>#greenpot>.bg>.lead {width: 80%; margin: 0 auto; padding: 0;}
#keeplp>.lpWrap>#greenpot>.bg>.lead>p {margin: 0 auto 50px; padding: 0; color: #000000; font-size: 16px; font-family: YakuHanJP, "Zen Kaku Gothic New", sans-serif; font-weight: 400; line-height: 2.0; letter-spacing: 0.02em; text-align: justify;}
#keeplp>.lpWrap>#greenpot>.bg>.greenpot_teiki {width: 90%; margin: 100px auto 0; padding: 50px 0 0; background-color: #ffffff;}
#keeplp>.lpWrap>#greenpot>.bg>.greenpot_teiki>img {width: 80%; margin: 0 auto; padding: 0;}

/*/////////////////// GREEN POT Accordion ///////////////////*/
.detail-accordion {width: 100%; margin: 50px auto 0; padding: 0 0 0;}
.detail-accordion>.detail-toggle {display: none;}
.detail-accordion>.detail-Label {width: 85%; margin: 0 auto; padding: 1.3em 0; display: block; color: #ffffff; font-size: 18px; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 600; line-height: 1.0; letter-spacing: 0.02em; text-align: center; background-color: #43927a; border-radius: 50px;}
.detail-accordion>.detail-Label,
.detail-accordion>.detail-content {-webkit-backface-visibility: hidden; backface-visibility: hidden; transform: translateZ(0); transition: all 0.3s;}
.detail-accordion>.detail-content {width: 100%; margin: 60px auto 0; height: 0; padding: 0; overflow: hidden;}
.detail-accordion>.detail-content>img {width: 100%; margin: 0 auto; padding: 0; text-align: center;}
.detail-accordion>.detail-Label .icon {display: inline-block; position: absolute; top: 22px; right: 40px; width: 22px; height: 22px;}
.detail-accordion>.detail-Label .icon::before {display: block; position: absolute; content: ""; top: 10px; left: 6px; width: 10px; height: 2px; background: #ffffff;}
.detail-accordion>.detail-Label .icon::after {display: block; position: absolute; content: ""; top: 6px; left: 10px; width: 2px; height: 10px; background: #ffffff;}
.detail-accordion>.detail-toggle:checked + .detail-Label + .detail-content {height: auto; padding: 0; transition: all .3s;}
.detail-accordion>.detail-toggle:checked + .detail-Label .icon::after {width: 0 !important;}

/*/////////////////// KOSO POT ///////////////////*/
#keeplp>.lpWrap>#kosopot {width: 95%; margin: 0 auto 80px; padding: 0; text-align: center;}
#keeplp>.lpWrap>#kosopot>img {width: 100%; margin: 0 auto; padding: 0;}
#keeplp>.lpWrap>#kosopot>.bg {width: 100%; margin: 0 auto; padding: 0 0 50px; background-color: #ee909e;}
#keeplp>.lpWrap>#kosopot>.bg>.lead {width: 80%; margin: 0 auto; padding: 0;}
#keeplp>.lpWrap>#kosopot>.bg>.lead>p {margin: 0 auto 50px; padding: 0; color: #000000; font-size: 16px; font-family: YakuHanJP, "Zen Kaku Gothic New", sans-serif; font-weight: 400; line-height: 2.0; letter-spacing: 0.02em; text-align: justify;}
#keeplp>.lpWrap>#kosopot>.bgfooter {width: 100%; margin: 0 auto; padding: 0 0 50px; background-color: #ee909e; border-radius: 0 0 40px 40px;}

/*/////////////////// HEAT POT ///////////////////*/
#keeplp>.lpWrap>#heatpot {width: 95%; margin: 0 auto 80px; padding: 0; text-align: center;}
#keeplp>.lpWrap>#heatpot>img {width: 100%; margin: 0 auto; padding: 0;}
#keeplp>.lpWrap>#heatpot>.bg {width: 100%; margin: 0 auto; padding: 0 0 50px; background-color: #ff7c75;}
#keeplp>.lpWrap>#heatpot>.bg>.lead {width: 80%; margin: 0 auto; padding: 0;}
#keeplp>.lpWrap>#heatpot>.bg>.lead>p {margin: 0 auto 50px; padding: 0; color: #000000; font-size: 16px; font-family: YakuHanJP, "Zen Kaku Gothic New", sans-serif; font-weight: 400; line-height: 2.0; letter-spacing: 0.02em; text-align: justify;}
#keeplp>.lpWrap>#heatpot>.bgfooter {width: 100%; margin: 0 auto; padding: 0 0 50px; background-color: #ff7c75; border-radius: 0 0 40px 40px;}

/*/////////////////// YOIYOI POT ///////////////////*/
#keeplp>.lpWrap>#yoiyoipot {width: 95%; margin: 0 auto 80px; padding: 0; text-align: center;}
#keeplp>.lpWrap>#yoiyoipot>img {width: 100%; margin: 0 auto; padding: 0;}
#keeplp>.lpWrap>#yoiyoipot>.bg {width: 100%; margin: 0 auto; padding: 0 0 50px; background-color: #f9c576;}
#keeplp>.lpWrap>#yoiyoipot>.bg>.lead {width: 80%; margin: 0 auto; padding: 0;}
#keeplp>.lpWrap>#yoiyoipot>.bg>.lead>p {margin: 0 auto 50px; padding: 0; color: #000000; font-size: 16px; font-family: YakuHanJP, "Zen Kaku Gothic New", sans-serif; font-weight: 400; line-height: 2.0; letter-spacing: 0.02em; text-align: justify;}
#keeplp>.lpWrap>#yoiyoipot>.bgfooter {width: 100%; margin: 0 auto; padding: 0 0 50px; background-color: #f9c576; border-radius: 0 0 40px 40px;}

/*/////////////////// CLEAR POT ///////////////////*/
#keeplp>.lpWrap>#clearpot {width: 95%; margin: 0 auto 100px; padding: 0; text-align: center;}
#keeplp>.lpWrap>#clearpot>img {width: 100%; margin: 0 auto; padding: 0;}
#keeplp>.lpWrap>#clearpot>.bg {width: 100%; margin: 0 auto; padding: 0 0 50px; background-color: #b8bfcc;}
#keeplp>.lpWrap>#clearpot>.bg>.lead {width: 80%; margin: 0 auto; padding: 0;}
#keeplp>.lpWrap>#clearpot>.bg>.lead>p {margin: 0 auto 50px; padding: 0; color: #000000; font-size: 16px; font-family: YakuHanJP, "Zen Kaku Gothic New", sans-serif; font-weight: 400; line-height: 2.0; letter-spacing: 0.02em; text-align: justify;}
#keeplp>.lpWrap>#clearpot>.bgfooter {width: 100%; margin: 0 auto; padding: 0 0 50px; background-color: #b8bfcc; border-radius: 0 0 40px 40px;}

#keeplp>.lpWrap>#kosopot {display: block; padding-top: 100px; margin-top: -100px;}
#keeplp>.lpWrap>#heatpot {display: block; padding-top: 100px; margin-top: -100px;}
#keeplp>.lpWrap>#yoiyoipot {display: block; padding-top: 100px; margin-top: -100px;}
#keeplp>.lpWrap>#clearpot {display: block; padding-top: 100px; margin-top: -100px;}

/*/////////////////// 併用がオススメ ///////////////////*/
#keeplp>.lpWrap>#combi {width: 95%; margin: 0 auto 100px; padding: 0; text-align: center;}
#keeplp>.lpWrap>#combi>img {width: 100%; margin: 0 auto; padding: 0;}

/*/////////////////// CAMPAIGN ///////////////////*/
#keeplp>.lpWrap>#cp {width: 100%; margin: 0 auto 0; padding: 0; text-align: center;}
#keeplp>.lpWrap>#cp>img {width: 100%; margin: 0 auto; padding: 0;}
#keeplp>.lpWrap>#cp>.bg {width: 100%; margin: 0 auto; padding: 30px 0 120px; background-color: #eaefee;}
#keeplp>.lpWrap>#cp>.bg>h3 {margin: 0 auto 30px; padding: 0; color: #000000; font-size: 34px; font-family: YakuHanMP, "Shippori Mincho", serif; font-weight: 400; line-height: 1.7; letter-spacing: 0.02em; text-align: center;}
#keeplp>.lpWrap>#cp>.bg>h3>span {border-bottom: 1px solid #000000;}
#keeplp>.lpWrap>#cp>.bg>p {width: 80%; margin: 0 auto 20px; padding: 0; color: #000000; font-size: 18px; font-family: YakuHanMP, "Shippori Mincho", serif; font-weight: 400; line-height: 2.0; letter-spacing: 0.02em; text-align: justify;}
#keeplp>.lpWrap>#cp>.bg_coupon {width: 100%; margin: 0 auto; padding: 0 0 30px; background-color: #f0ebe6;}
#keeplp>.lpWrap>#cp>.bg_coupon>img {width: 90%; margin: 120px auto 0; padding: 0;}
#keeplp>.lpWrap>#cp>.bg_coupon>.ttlArea {width: 180px; margin: 0 auto; padding: 0; position: relative;}
#keeplp>.lpWrap>#cp>.bg_coupon>.ttlArea>img {width: 100%; margin: 0 auto; padding: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
#keeplp>.lpWrap>#cp>.bg_coupon>.attenArea,
#keeplp>.lpWrap>#cp>.bg_coupon>.attenArea {width: 70%; margin: 30px auto 0; padding: 0; text-align: center;}
#keeplp>.lpWrap>#cp>.bg_coupon>.attenArea>h4 {margin: 0 auto 10px; padding: 0; color: #000000; font-size: 16px; font-family: YakuHanJP, "Zen Kaku Gothic New", sans-serif; font-weight: 400; font-style: normal; line-height: 1.0; letter-spacing: 0.01em; text-align: justify;}
#keeplp>.lpWrap>#cp>.bg_coupon>.attenArea>p {margin: 0 auto 30px; padding: 0; color: #000000; font-size: 14px; font-family: YakuHanJP, "Zen Kaku Gothic New", sans-serif;font-weight: 400; font-style: normal; line-height: 1.7; letter-spacing: 0.01em; text-align: justify;}

#keeplp>.lpWrap>#cp>.bg_coupon>.copy-link {width: 90%; margin: 0 auto; position: relative; /*display: flex;*/
  input {padding: 0; font-size: 10px; color: #253b26; border: none; outline: none; background-color: #e4e9ea; text-align: center; height: 0;}
  button {padding: 0; background: none; font-size: 10px; color: #253b26; outline: none; border: none; cursor: pointer; width:100%;
    &::before {
      content: "クーポンコードをコピーしました"; position: absolute; bottom: 30px; z-index: 10; right: 10%; background: #eee7e0; border-radius: 10px; padding: 9px 15px; font-size: 14px; display: none;
    }
  }
  &.active button::after,
  &.active button::before {display: block;}
}
#keeplp>.lpWrap>#cp>.bg_coupon>.copy-link>button>img {width: 100%; margin: 0 auto; padding: 0; position:relative; top:0;}
#keeplp>.lpWrap>#cp>.bg_coupon>.copy-link>button>img:hover {top:-10px; transition:0.3s;}

#keeplp a.cart-btn,
#keeplp a.cart-btn:link,
#keeplp a.cart-btn:visited {display: flex; width: 320px; margin: 0 auto 0; padding: 22px 0; font-family: "Noto Sans JP", sans-serif; font-weight: 600; font-size: 17px; letter-spacing: 0.1em; background-color: #000000; color: #ffffff; border: 2px solid #000000; text-decoration: none; text-indent: 0; cursor: pointer; text-align: center; align-items: center; justify-content: center;}
#keeplp a.cart-btn:hover {background-color: #ffffff; color: #000000; border: 2px solid #000000; text-decoration: none;}
#keeplp a.cart-btn::after {font-family: 'Material Symbols rounded'; content: "shopping_cart"; font-size: 24px; font-weight: 400; transition: all .3s ease; margin-left: 10px; color: #ffffff;}
#keeplp a.cart-btn:hover::after {color: #000000;}

#keeplp a.link-btn,
#keeplp a.link-btn:link,
#keeplp a.link-btn:visited {display: flex; width: 320px; margin: 0 auto 0; padding: 22px 0; font-family: "Noto Sans JP", sans-serif; font-weight: 600; font-size: 17px; letter-spacing: 0.1em; background-color: #000000; color: #ffffff; border: 2px solid #000000; text-decoration: none; text-indent: 0; cursor: pointer; text-align: center; align-items: center; justify-content: center;}
#keeplp a.link-btn:hover {background-color: #ffffff; color: #000000; border: 2px solid #000000; text-decoration: none;}
#keeplp a.link-btn::after {font-family: 'Material Symbols rounded'; content: "arrow_forward_ios"; font-size: 16px; font-weight: 400; transition: all .3s ease; margin-left: 10px; color: #ffffff;}
#keeplp a.link-btn:hover::after {color: #000000;}

#keeplp a.teiki-btn,
#keeplp a.teiki-btn:link,
#keeplp a.teiki-btn:visited {display: block; width: 80%; margin: 0 auto 60px; padding: 22px 0; font-family: "Noto Sans JP", sans-serif; font-weight: 600; font-size: 20px; line-height: 1.5; letter-spacing: 0.1em; background-color: #253b26; color: #ffffff; border: 2px solid #253b26; text-decoration: none; text-indent: 0; cursor: pointer; text-align: center; box-shadow: 6px 6px #cfcfcf;}
#keeplp a.teiki-btn:hover {background-color: #ffffff; color: #253b26; border: 2px solid #253b26; text-decoration: none;}

#keeplp a.product-btn,
#keeplp a.product-btn:link,
#keeplp a.product-btn:visited {display: block; width: 70%; margin: 20px 0 0; padding: 12px 0; font-family: "Noto Sans JP", sans-serif; font-weight: 400; font-size: 13px; letter-spacing: 0.1em; background-color: #000000; color: #ffffff; border: 2px solid #000000; text-decoration: none; text-indent: 0; cursor: pointer; text-align: center;}
#keeplp a.product-btn:hover {background-color: #ffffff; color: #000000; border: 2px solid #000000; text-decoration: none;}

#keeplp .more-btn,
#keeplp .more-btn:link,
#keeplp .more-btn:visited {display: block; width: 300px; margin: 0 auto 0; padding: 20px 0; font-size: 16px;  font-weight: 400; color: #ffffff; text-align: center; letter-spacing: 0.05em; line-height: 1.0; text-decoration: none; cursor:pointer; position: relative; border: 1px solid #000000; background-color: #000000;}
#keeplp .more-btn:hover {color: #000000 !important; background-color: #ffffff;}
#keeplp .more-btn::after {content: ""; display: block; position: absolute; top: calc(50% - 5px); right: 40px; width: 20px; height: 5px; border: none; border-right: 1px solid #ffffff; border-bottom: 1px solid #ffffff; transform: skew(45deg); transition: .3s;}
#keeplp .more-btn:hover::after {right: 30px; width: 30px; border-right: 1px solid #000000; border-bottom: 1px solid #000000;}

p.fz20 {font-size: 20px !important; line-height: 1.8 !important;}
p.fz22 {font-size: 22px !important; line-height: 1.8 !important;}
p.fz24 {font-size: 24px !important; line-height: 1.8 !important;}
p.fz30 {font-size: 30px !important;}

.floating {position: fixed;　left: 0; top: 250px; display: none;}
.floating>a {display: block;}
.floating>a:hover {opacity: 1;}
.floating>a>img {width: 300px;}

#side_bnr01 {position: fixed; top: 220px; left:0px; text-indent:-9993px; display:block; background-color: transparent; z-index:9999;}
#side_bnr01:after {content: ".";  display: block;  height: 0;  font-size:0; clear: both;  visibility:hidden;}
#side_bnr01 {display: inline-block;} 
* html #side_bnr01 {height: 1%;}
#side_bnr01 {display:block;}
#side_bnr01 .sidebnr01 a {
	outline:none; display: block;
	background: url("https://beautymylab.com/user_data/packages/raku2pc/img/cp/potseries/keep/bnr01.webp") no-repeat scroll 0px 0 transparent; background-size: 300px;
	width:300px; height:300px; -webkit-transition: all 1.0s ease;  -moz-transition: all 1.0s ease;  -o-transition: all 1.0s ease;
}
#side_bnr01 .sidebnr01 a:hover {outline:none; display: block; left:10px; position: relative;
	background: url("https://beautymylab.com/user_data/packages/raku2pc/img/cp/potseries/keep/bnr01.webp") no-repeat scroll 0px 0 transparent; background-size: 300px;
	width:300px; height:300px; -webkit-transition: all 1.0s ease;  -moz-transition: all 1.0s ease;  -o-transition: all 1.0s ease;
	filter:alpha(opacity=100); -ms-filter: "alpha(opacity=100)"; -moz-opacity:1.0; -khtml-opacity: 1.0; opacity:1.0; zoom:1;
}