/* ===== base ===== */
* {
  box-sizing: border-box;
}

html {font-size: 16px; 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-size: 1rem; font-style: normal; font-family: "Noto Sans JP", sans-serif; font-weight: 400; -webkit-text-size-adjust: 100%; font-feature-settings: "palt";}
a {text-decoration: none;　color: inherit;}
a:hover {filter:alpha(opacity=100); -ms-filter: "alpha(opacity=100)"; -moz-opacity:1.0; -khtml-opacity: 1.0; opacity:1.0; zoom:1;}

/* noto-sans-jp-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 400;
  src: url('https://beautymylab.com/user_data/packages/raku2pc/fonts/noto-sans-jp-v55-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* noto-sans-jp-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 700;
  src: url('https://beautymylab.com/user_data/packages/raku2pc/fonts/noto-sans-jp-v55-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* montserrat-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('https://beautymylab.com/user_data/packages/raku2pc/fonts/montserrat-v31-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: url('https://beautymylab.com/user_data/packages/raku2pc/fonts/montserrat-v31-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

.pcbr {display: block;}/* PC改行*/
.spbr {display: none;}/* スマホ改行解除*/

@media screen and (max-width: 1050px) {
.pcbr {display: none;}/* PC改行解除*/
.spbr {display: block;}/* スマホ改行*/
}

/*/////////////////// 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.8s 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 800ms;}
.fadein01.scrollin {opacity: 1; transform: translate(0, 0);}
.fadein02 {opacity: 0.0; transform: translate(0, 120px); transition: all 850ms;}
.fadein02.scrollin {opacity: 1; transform: translate(0, 0);}

/*////////// サイト調整用 //////////*/
#header-contents {margin: 0 auto 0;}
#header-contents>.header {width: 100%; padding: 30px 2% 10px; background-color: #ffffff;}
.megaMenu>.category-list {width: 90%; padding: 15px 5% 25px;}

/*////////// Design //////////*/
#present,
#budget3000,
#budget3000-5000,
#budget5000-10000,
#budget10000 {display: block; padding-top: 80px; margin-top: -80px;}

#valentinelp  {width: 100%; margin: 0 auto 0; padding: 0;
	background:
    url("https://beautymylab.com/user_data/packages/raku2pc/img/cp/260206valentine/bg-choco.webp") top center / 100% no-repeat,
	url("https://beautymylab.com/user_data/packages/raku2pc/img/cp/260206valentine/bg-lace.webp") right bottom / 40% no-repeat,
    repeating-linear-gradient(90deg, #94d3cb 0, #94d3cb 20px, #7bc4be 20px, #7bc4be 40px);
	/*background: radial-gradient(at 0% 10%, #ccebe7, transparent 100%),
		radial-gradient(at -20% 100%, #ffffff, transparent 70%),
		radial-gradient(at 0% 0%, #ff9200, transparent 101%),
		radial-gradient(at 100% 100%, #9c2440, transparent 80%);*/
	background-attachment: fixed;}
#valentinelp>.valentine-content {max-width: 1100px; margin: 0 auto; padding: 0;}
#valentinelp>.valentine-content>.valentine-layout {max-width: 100%; margin: 0 auto 0; display: grid; grid-template-columns: 300px 1fr; gap: 100px; position: relative;}

/* ===== Leftnavi ===== */
#valentinelp .left-nav-content {height: auto; width: 100%;}
#valentinelp .left-nav-content>.left-nav {color: #4d4d4d; line-height: 1.0; letter-spacing: 0.05em; position: -webkit-sticky; position: sticky; top: 230px; /*top: 45%; transform: translateY(-50%);*/}
#valentinelp .nav-title {margin: 0 auto 22px; font-family: "Montserrat", "Noto Sans JP", sans-serif; font-size: 1.1rem; font-weight: 700;}
#valentinelp .nav-block>a {display: block; margin: 0 auto; padding: 0 0 10px; font-size: 1.15rem; font-weight: 700; color: #390c0a; text-decoration: none; text-align: left; text-indent: 20px; position: relative; transition: transform 0.4s ease;}
#valentinelp .nav-block>a>span {font-size: 0.7rem;}
#valentinelp .nav-block>img {width: 200px; margin: 0 0 15px;}
#valentinelp .nav-block>a>img {display: block; width: 280px; margin: 0 0 30px; transition: transform 0.4s ease;}
#valentinelp .nav-block>a:hover {transform: translateX(10px);}
#valentinelp .nav-block>.menuborder {width: 100%; margin: 0 0 25px; border-bottom: 1px solid #390c0a;}
#valentinelp .nav-block>.btn_target {display: block; margin: 0 auto; padding: 12px 0 12px; font-size: 0.80rem; font-weight: 400; color: #390c0a; border: 1px solid #390c0a; text-decoration: none; text-align: center; text-indent: 0; position: relative; transition: background-color 0.3s ease, color 0.3s ease;}
#valentinelp .nav-block>.btn_target:hover {color: #ffffff; background-color:#390c0a; transform: translateX(0);}

/*#valentinelp .nav-block>a {display: block; margin: 0 auto; padding: 15px 0 15px; font-size: 1.0rem; font-weight: 700; color: #ffffff; text-decoration: none; text-align: center; position: relative; transition: transform 0.4s ease;}
#valentinelp .nav-block>a>span {font-size: 0.7rem;}
#valentinelp .nav-block>.menu_3000 {background-color: #d8575c; border: 1px solid #d8575c;}
#valentinelp .nav-block>.menu_3000:hover {color: #d8575c; background-color: #ffffff; transform: translateX(10px);}
#valentinelp .nav-block>.menu_3000-5000 {background-color: #d8575c; border: 1px solid #d8575c;}
#valentinelp .nav-block>.menu_3000-5000:hover {color: #d8575c; background-color: #ffffff; transform: translateX(10px);}
#valentinelp .nav-block>.menu_5000-10000 {background-color: #d8575c; border: 1px solid #d8575c;}
#valentinelp .nav-block>.menu_5000-10000:hover {color: #d8575c; background-color: #ffffff; transform: translateX(10px);}
#valentinelp .nav-block>.menu_10000 {background-color: #d8575c; border: 1px solid #d8575c;}
#valentinelp .nav-block>.menu_10000:hover {color: #d8575c; background-color: #ffffff; transform: translateX(10px);}*/

/* ===== LP ===== */
#valentinelp .lp-content {width: 100%; background-color: #390c0a; box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.45);}
#valentinelp .lp-content>.fv {width: 100%; margin: 0 auto; padding: 0 0; background-image: url(https://beautymylab.com/user_data/packages/raku2pc/img/cp/260206valentine/bg01.webp); background-size: 100%; background-repeat: no-repeat; background-position: top; text-align: center; position: relative;}
#valentinelp .lp-content>.fv>.bmllogo {width: 150px; margin: 0 auto; padding: 80px 0 0;}
#valentinelp .lp-content>.fv>.fvimg {width: 100%;}
#valentinelp .lp-content>.fv>.fvtitle {width: 100%; margin: -420px auto 0;}
#valentinelp .lp-content>.lead {width: 100%; margin: 0 auto; padding: 40px 0 0; background-image: linear-gradient(180deg, #340806 0%, #390c0a 100%); position: relative;}
#valentinelp .lp-content>.lead>p {margin: 0 auto 20px; padding: 0; color: #ffffff; font-size: 1.25rem; font-weight: 400; text-align: center; line-height: 2.2; letter-spacing: 0.1em;}
#valentinelp .lp-content>.lead>p>b {font-size: 1.2rem;}
#valentinelp .lp-content>.present {width: 100%; margin: 0 auto 0; position: relative;}
#valentinelp .lp-content>.present>img {width: 100%;}
#valentinelp .lp-content>.presentmenu {width: 100%; margin: 0 auto 0; padding: 0 0 0; background-color: #fdf4e8; position: relative;}
#valentinelp .lp-content>.presentmenu>img {width: 100%;}
#valentinelp .lp-content>.presentmenu>.menuWrap {width: 80%; margin: 50px auto; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px;}
#valentinelp .lp-content>.presentmenu>.menuWrap>.menuitem {width: 100%;}
#valentinelp .lp-content>.presentmenu>.menuWrap>.menuitem>a>img {width: 100%; transform-origin: 50% 12%; transition: transform 0.2s;}
#valentinelp .lp-content>.presentmenu>.menuWrap>.menuitem>a:hover>img {animation: swing 1.2s ease-in-out infinite;}

@keyframes swing {
  0%   { transform: rotate(0deg); }
  20%  { transform: rotate(6deg); }
  40%  { transform: rotate(-6deg); }
  60%  { transform: rotate(4deg); }
  80%  { transform: rotate(-4deg); }
  100% { transform: rotate(0deg); }
}

#valentinelp .lp-content>.budget3000 {width: 100%; margin: 0 auto 0; padding: 0 0; position: relative; background-color: #ffcecc;}
#valentinelp .lp-content>.budget3000-5000 {width: 100%; margin: 0 auto 0; padding: 0 0; position: relative; background-color: #cee4d8;}
#valentinelp .lp-content>.budget5000-10000 {width: 100%; margin: 0 auto 0; padding: 0 0; position: relative; background-color: #c59772;}
#valentinelp .lp-content>.budget10000 {width: 100%; margin: 0 auto 0; padding: 0 0; position: relative; background-color: #ac3a48;}
#valentinelp .lp-content>.budget3000>img,
#valentinelp .lp-content>.budget3000-5000>img,
#valentinelp .lp-content>.budget5000-10000>img,
#valentinelp .lp-content>.budget10000>img {width: 100%; margin: 0 auto 0;}
#valentinelp .cl-brown {color: #390c0a;}
#valentinelp .cl-white {color: #ffffff;}

#valentinelp .budgettitle {width: 100%; margin: 0 auto 0; display: grid; grid-template-columns: 300px 1fr; gap: 10px; text-align: justify; align-items: center;}
#valentinelp .budgettitle>.budget-img {position: relative; left: -30px;}
#valentinelp .budgettitle>.budget-img>img {width: 100%;}
#valentinelp .budgettitle>.budget-lead>h3 {margin: 0 auto 10px; padding: 0; font-size: 1.7rem; font-weight: 700;  line-height: 1.7; letter-spacing: 0.01em;}
#valentinelp .budgettitle>.budget-lead>p {margin: 0 auto 0; padding: 0; font-size: 1.3rem; font-weight: 400; line-height: 1.8; letter-spacing: 0.01em;}
#valentinelp .decorationline {width: 100%; margin: 0 auto 0; padding: 0 0 50px;}

#valentinelp .product-block {width: 100%; margin: 0 auto 100px;}
#valentinelp .product-top {width: 85%; margin: 0 auto 30px; text-align: justify;}
#valentinelp .product-top>h3 {margin: 0 auto 15px; padding: 0 0 15px; font-size: 1.5rem; font-weight: 700; line-height: 1.5; letter-spacing: 0.05em; border-bottom: 3px dotted #390c0a;}
#valentinelp .lp-content>.budget5000-10000>.product-block>.product-top>h3,
#valentinelp .lp-content>.budget10000>.product-block>.product-top>h3 {border-bottom: 3px dotted #ffffff !important;}

#valentinelp .product-top>p {margin: 0 auto 10px; padding: 0; font-size: 1.25rem; font-weight: 700; line-height: 1.6; letter-spacing: 0.05em;}
#valentinelp .product-top>p>span {display: block; font-size: 0.9rem;}
#valentinelp .product-top>.plice {margin: 0 auto; padding: 0; font-size: 1.3rem; font-weight: 400; line-height: 1.0; letter-spacing: 0.02em;}
#valentinelp .product-top>.plice>span {display: inline-block; font-size: 0.9rem;}
#valentinelp .product-top>.plice>.tax {display: inline-block; font-size: 0.8rem;}
#valentinelp .product-layout {width: 100%; margin: 20px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; text-align: justify; align-items: center;}
#valentinelp .product-layout>.product-img {transition: 0.3s; overflow: hidden; border-radius: 0 20px 20px 0;}
#valentinelp .product-layout>.product-img>a>img {width: 100%; height: auto; object-fit: cover; transition: transform .4s ease;}
#valentinelp .product-layout>.product-img>a:hover>img {transform: scale(1.05);}
#valentinelp .product-layout>.img-left {border-radius: 0 20px 20px 0;}
#valentinelp .product-layout>.img-right {border-radius: 20px 0 0 20px;}
#valentinelp .product-layout>.product-text {width: 85%;}
#valentinelp .product-layout>.text-right {width: 85%; margin: 0 0 0 auto;}
#valentinelp .product-layout>.product-text>p {margin: 0 auto 30px; padding: 0; font-size: 1.05rem; font-weight: 400; line-height: 1.9; letter-spacing: 0.03em;}
#valentinelp .product-layout>.product-text>a {display: block; width: 90%; margin: 0 auto; padding: 25px 0;  color: #ffffff; font-size: 1.1rem; font-weight: 400; line-height: 1.0; letter-spacing: 0.05em;  border-radius: 80px; cursor: pointer; text-align: center; transition: background-color 0.3s ease, color 0.3s ease;}
#valentinelp .product-layout>.product-text>a>span::after {content: "▶"; margin-left: 10px; font-size: 0.6rem; top: -1px; position: relative;}

#valentinelp .product-cp {width: 75%; margin: 0 auto 30px; padding: 15px 0; text-align: center; background-color: #390c0a; border-radius: 50px;}
#valentinelp .product-cp>p {margin: 0 auto; padding: 0; color: #ffffff; font-size: 1.2rem; font-weight: 700; line-height: 1.6; letter-spacing: 0.05em;}

#valentinelp .product-block-m {width: 100%; margin: 0 auto 100px; padding: 100px 0 0; border-top: 1px solid #390c0a;}
#valentinelp .product-top-m {width: 85%; margin: 0 auto 50px; text-align: center;}
#valentinelp .product-top-m>h3 {width: 300px; margin: 0 auto 15px; padding: 10px 0; font-size: 1.35rem; font-weight: 700; line-height: 1.0; letter-spacing: 0.05em; border: 2px solid #390c0a;}
#valentinelp .product-top-m>h4 {margin: 0 auto 10px; padding: 0; font-size: 1.2rem; font-weight: 700; line-height: 1.6; letter-spacing: 0.05em;}
#valentinelp .product-top-m>p {margin: 0 auto; padding: 0; font-size: 1.0rem; font-weight: 400; line-height: 1.6; letter-spacing: 0.05em;}
#valentinelp .product-layout-m {width: 80%; margin: 0 auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 50px; text-align: justify; /*align-items: center;*/}
#valentinelp .product-layout-m>.product-m {width: 100%;}
#valentinelp .product-layout-m>.product-m>.product-img-m {margin: 10px auto; transition: 0.3s; overflow: hidden; border-radius: 20px;}
#valentinelp .product-layout-m>.product-m>.product-img-m>img,
#valentinelp .product-layout-m>.product-m>.product-img-m>a>img {width: 100%; height: auto; object-fit: cover; transition: transform .4s ease;}
#valentinelp .product-layout-m>.product-m>.product-img-m>a:hover>img {transform: scale(1.05);}
#valentinelp .product-layout-m>.product-m>.catch {margin: 0 auto; padding: 0; font-size: 1.1rem; font-weight: 700; line-height: 1.5; letter-spacing: 0.05em;}
#valentinelp .product-layout-m>.product-m>p {margin: 0 auto 15px; padding: 0; font-size: 0.9rem; font-weight: 400; line-height: 1.6; letter-spacing: 0.02em;}
#valentinelp .product-layout-m>.product-m>.name {margin: 0 auto 10px; padding: 0; font-size: 1.0rem; font-weight: 700; line-height: 1.0; letter-spacing: 0.02em;}
#valentinelp .product-layout-m>.product-m>.plice {margin: 0 auto 0; padding: 0; font-size: 1.0rem; font-weight: 400; line-height: 1.0; letter-spacing: 0.02em;}
#valentinelp .product-layout-m>.product-m>.plice>span {display: inline-block; font-size: 0.8rem;}
#valentinelp .product-layout-m>.product-m>.plice>.tax {display: inline-block; font-size: 0.7rem;}
#valentinelp .product-block-m>a {display: block; width: 500px; margin: 60px auto 0; padding: 20px 0;  color: #ffffff; font-size: 1.0rem; font-weight: 400; line-height: 1.0; letter-spacing: 0.05em;  border-radius: 80px; cursor: pointer; text-align: center; transition: background-color 0.3s ease, color 0.3s ease;}
#valentinelp .product-block-m>a>span::after {content: "▶"; margin-left: 10px; font-size: 0.6rem; top: -1px; position: relative;}
/*#valentinelp .product-layout-m>.product-m>a {display: block; width: 90%; margin: 0 auto; padding: 20px 0;  color: #ffffff; font-size: 1.0rem; font-weight: 400; line-height: 1.0; letter-spacing: 0.05em;  border-radius: 80px; cursor: pointer; text-align: center; transition: background-color 0.3s ease, color 0.3s ease;}
#valentinelp .product-layout-m>.product-m>a>span::after {content: "▶"; margin-left: 10px; font-size: 0.6rem; top: -1px; position: relative;}*/

#valentinelp a.btn3000 {background: #d8575c; border: 2px solid #d8575c;}
#valentinelp a.btn3000:hover {color: #d8575c; background: #ffffff;}
#valentinelp a.btn3000:hover>span::after {color: #d8575c;}
#valentinelp a.btn3000-5000 {background: #617d74; border: 2px solid #617d74;}
#valentinelp a.btn3000-5000:hover {color: #617d74; background: #ffffff;}
#valentinelp a.btn3000-5000:hover>span::after {color: #617d74;}
#valentinelp a.btn5000-10000 {background: #6c3d39; border: 2px solid #6c3d39;}
#valentinelp a.btn5000-10000:hover {color: #6c3d39; background: #ffffff;}
#valentinelp a.btn5000-10000:hover>span::after {color: #6c3d39;}
#valentinelp a.btn10000 {background: #5f0000; border: 2px solid #5f0000;}
#valentinelp a.btn10000:hover {color: #5f0000; background: #ffffff;}
#valentinelp a.btn10000:hover>span::after {color: #5f0000;}

.guide-content>h3 {margin: 0 auto 20px; padding: 0; color: #4d4d4d; font-size: 1.25rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1.0;}
.guide-content>h3::before {content: '／ '; margin-right: 0.25em;}
.guide-blockWrap h4 {margin: 0 auto 5px; color: #4d4d4d; font-size: 1.15rem; font-weight: 400; line-height: 1.8; letter-spacing: 0.02em; padding: 0;}
.guide-blockWrap h4::before {content: '■ '; font-size: 0.9rem; margin-right: 0.25em;}
.guide-blockWrap p {margin: 0 auto 10px; padding: 0; color: #4d4d4d; font-size: 1.0rem; font-weight: 400; text-align: justify; line-height: 1.7; letter-spacing: 0.01em;}
.guide-blockWrap p>.emp {font-size: 1.2rem; font-weight: 700; color: #aa0000;}
.guide-blockWrap p.atten {margin: 0 auto 0; font-size: 0.8rem; display: flex;}
.guide-blockWrap p.atten::before {content: '※ '; margin-right: 0.25em;}

#valentinelp .valentine-footer {width: 100%; margin: 0 auto; padding: 0; background-color: #390c0a;}
#valentinelp .valentine-footer>img {width: 100%;}


.shake-img {width: 100px !important; position: absolute; opacity: 0; transform: translateY(20px); z-index: 10;}
.shake-img.is-active {opacity: 1; animation: fadeUp 0.6s ease-out forwards, shake 0.6s ease-in-out 0.3s;}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes shake {
  0% { transform: rotate(0); }
  20% { transform: rotate(10deg) translateX(5px); }
  40% { transform: rotate(-10deg) translateX(-5px); }
  60% { transform: rotate(5deg) translateX(5px); }
  80% { transform: rotate(-5deg) translateX(-5px); }
  100% { transform: rotate(0); }
}

.bounce-img {opacity: 0; transform: scale(0.6); position: absolute; z-index: 10;}
.bounce-img.is-active {opacity: 1; animation: pop 0.7s cubic-bezier(.22,1.3,.36,1) forwards;}
.heart01 {width: 100px !important; top: 80px; left: -20px; rotate: -10deg;}
.heart02 {width: 80px !important; top: 280px; right: 40px; rotate: 15deg;}
.heart03 {width: 150px !important; top: -50px; right: -20px; rotate: 8deg;}
.heart04 {width: 70px !important; top: 120px; left: -15px; rotate: -20deg;}
.heart05 {width: 120px !important; bottom: 110px; left: 50px; rotate: -25deg;}
.heart06 {width: 70px !important; bottom: 40px; left: 160px; rotate: 8deg;}
.heart07 {width: 150px !important; top: -50px; right: -30px; rotate: 8deg;}
.heart08 {width: 70px !important; bottom: 310px; left: -30px; rotate: -10deg;}
.heart09 {width: 120px !important; top: 70px; right: 10px; rotate: 20deg;}
.heart10 {width: 160px !important; top: -250px; left: 180px; rotate: -15deg;}
.heart11 {width: 90px !important; top: -280px; right: 100px; rotate: 10deg;}

@keyframes pop {
  0%   { transform: scale(0.5); }
  55%  { transform: scale(1.25); }
  75%  { transform: scale(0.92); }
  90%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}

@media screen and (max-width: 1100px) {
	#valentinelp>.valentine-content {max-width: 92%;}
	#valentinelp>.valentine-content>.valentine-layout {max-width: 100%; margin: 0 auto 0; display: block; grid-template-columns: 1fr; gap: 0}
	#valentinelp .left-nav-content {display: none;}
}

@media screen and (max-width: 1000px) {
	#valentinelp .product-block-m>a {width: 70%;}
	#footer-bml {margin: 0 auto 0;}
}
