/* ===== 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,
#ranking {display: block; padding-top: 80px; margin-top: -80px;}

#besthitlp  {width: 100%; margin: 0 auto 0; padding: 0;
	background: radial-gradient(at 0% 10%, #ffffff, transparent 100%),
		radial-gradient(at -20% 100%, #ffbbd5, transparent 70%),
		radial-gradient(at 0% 0%, #9e7720, transparent 101%),
		radial-gradient(at 100% 100%, #ffc2d8, transparent 80%);
	background-attachment: fixed;}
#besthitlp>.besthit-content {max-width: 1000px; margin: 0 auto; padding: 0;}
#besthitlp>.besthit-content>.besthit-layout {max-width: 100%; margin: 0 auto 0; display: grid; grid-template-columns: 300px 1fr; gap: 100px; position: relative;}

/* ===== Leftnavi ===== */
#besthitlp .left-nav-content {height: auto; width: 100%;}
#besthitlp .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%);*/}
#besthitlp .nav-title {margin: 0 auto 22px; font-family: "Montserrat", "Noto Sans JP", sans-serif; font-size: 1.1rem; font-weight: 700;}
#besthitlp .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;}
#besthitlp .nav-block>a>span {font-size: 0.7rem;}
#besthitlp .nav-block>img {width: 200px; margin: 0 0 15px;}
#besthitlp .nav-block>a>img {display: block; width: 280px; margin: 0 0 5px; transition: transform 0.4s ease;}
#besthitlp .nav-block>a>img.ca {display: block; width: 200px; margin: 0 0; transition: transform 0.4s ease;}
#besthitlp .nav-block>a:hover {transform: translateX(10px);}
#besthitlp .nav-block>.menuborder {width: 100%; margin: 0 0 15px; border-bottom: 1px solid #ba626d;}
#besthitlp  .nav-block>.btn_target {display: block; margin: 0 auto 30px; padding: 12px 0 12px; font-size: 0.80rem; font-weight: 400; color: #ffffff; background-color:#ba626d; border-radius: 50px; border: 1px solid #ba626d; text-decoration: none; text-align: center; text-indent: 0; position: relative; transition: background-color 0.3s ease, color 0.3s ease;}
#besthitlp  .nav-block>.btn_target:hover {color: #ba626d; background-color:#ffffff; transform: translateX(0);}

/* ===== LP ===== */
#besthitlp .lp-content {width: 100%; box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.45);}
#besthitlp .lp-content>.fv {width: 100%; margin: 0 auto; padding: 0 0; background-image: url(https://beautymylab.com/user_data/packages/raku2pc/img/cp/260401besthit/fv.webp); background-size: 100%; background-repeat: no-repeat; background-position: top; text-align: center; position: relative;}
#besthitlp .lp-content>.fv>.bmllogo {width: 150px; margin: 0 auto; padding: 80px 0 0;}
#besthitlp .lp-content>.fv>.fvtitle {width: 100%; margin: 0 auto 0;}
#besthitlp .lp-content>.fv>.rankingtitle {width: 100%; margin: -180px auto 0;}
#besthitlp .lp-content>.lead {width: 100%; margin: 0 auto; padding: 0 0 0; background-image: url(https://beautymylab.com/user_data/packages/raku2pc/img/cp/260401besthit/rankingbg.webp); background-size: 100%; background-repeat: repeat; position: relative; z-index: 2;}
#besthitlp .lp-content>.lead>p {margin: 0 auto 20px; padding: 0; color: #663a12; font-size: 1.25rem; font-weight: 400; text-align: center; line-height: 2.2; letter-spacing: 0.1em;}
#besthitlp .lp-content>.lead>p>b {font-size: 1.2rem;}
#besthitlp .lp-content>.present {width: 100%; margin: 0 auto 0; padding: 0 0 100px; position: relative; background-image: url(https://beautymylab.com/user_data/packages/raku2pc/img/cp/260401besthit/rankingbg.webp); background-size: 100%; background-repeat: repeat;}
#besthitlp .lp-content>.present>img {width: 100%;}

#besthitlp .lp-content .slide-content01 {width: 600px; margin: 0 auto; padding: 30px 0 40px; position: relative;}
@keyframes horizontal-animation {
    from {transform: translateX(0);}
    to {transform: translateX(-100%);}
}
#besthitlp .lp-content .slide-content02 {width: 600px; margin: 0 auto; padding: 30px 0 40px; position: relative;}
@keyframes horizontal-animation02 {
    from {transform: translateX(-100%);}
    to {transform: translateX(0);}
}
#besthitlp .lp-content .slide-content01>.cosme-slide,
#besthitlp .lp-content .slide-content02>.cosme-slide {display: flex; margin: 0 auto; padding: 0; overflow: hidden;}
#besthitlp .lp-content .slide-content01>.cosme-slide>.slider-wrapper {display: flex; animation: horizontal-animation 30s linear infinite;}
#besthitlp .lp-content .slide-content02>.cosme-slide>.slider-wrapper {display: flex; animation: horizontal-animation02 30s linear infinite;}
#besthitlp .lp-content .slide-content01>.cosme-slide>.slider-wrapper>.slide,
#besthitlp .lp-content .slide-content02>.cosme-slide>.slider-wrapper>.slide {width: 150px;}
#besthitlp .lp-content .slide-content01>.cosme-slide>.slider-wrapper>.slide img,
#besthitlp .lp-content .slide-content02>.cosme-slide>.slider-wrapper>.slide img {width: 100%; height: auto; vertical-align: bottom;}
@media (hover: hover) {
	#besthitlp .lp-content .slide-content01>.cosme-slide:hover .slider-wrapper,
	#besthitlp .lp-content .slide-content02>.cosme-slide:hover .slider-wrapper {animation-play-state: paused;}
}

/*//////// category ////////*/
#besthitlp .lp-content>#category {width: 100%; margin: 0 auto; padding: 0; background: none; text-align: center; background-image: url(https://beautymylab.com/user_data/packages/raku2pc/img/cp/260401besthit/rankingbg.webp); background-size: 100%; background-repeat: repeat;}
#besthitlp .lp-content>#category>.category_tabs {width: 95%; height: auto; margin: 0 auto; padding: 0 0 50px; background: none; text-align: center;}
#besthitlp .lp-content>#category>.category_tabs>.category_tab_item {display: inline-block; width : calc(100% / 4 - 15px); margin: 0 2px 0; padding: 10px 0 10px; font-size: 1.0rem; color: #ffffff; text-align: center; letter-spacing: 0.01em; line-height: 1.0; background-color: #afb0b0; border-radius: 20px 20px 0 0;}
.category_tab_item>img {width: 95%;}
.category_tabs input:checked + .category_tab_item {padding: 15px 0 10px; border-radius: 20px 20px 0 0; position: relative; top: 3px;}
#besthitlp .lp-content>#category>.category_tabs>.haircare {background-color: #9dc7ba;}
#besthitlp .lp-content>#category>.category_tabs>.skincare {background-color: #dfa6b1;}
#besthitlp .lp-content>#category>.category_tabs>.electric {background-color: #ccce88;}
#besthitlp .lp-content>#category>.category_tabs>.etc {background-color: #b7aacf;}
.category_tab_content {display: none;}
input[name="category_tab_item"] {display: none;}
#category-haircare:checked ~ #category-haircare_content {display: block; margin: 0 auto; padding: 0; clear: both; /*overflow: hidden;*/ border: 8px solid #9dc7ba;}
#category-skincare:checked ~ #category-skincare_content {display: block; margin: 0 auto; padding: 0; clear: both; /*overflow: hidden;*/ border: 8px solid #dfa6b1;}
#category-electric:checked ~ #category-electric_content  {display: block; margin: 0 auto; padding: 0; clear: both; /*overflow: hidden;*/ border: 8px solid #ccce88;}
#category-etc:checked ~ #category-etc_content  {display: block; margin: 0 auto; padding: 0; clear: both; /*overflow: hidden;*/ border: 8px solid #b7aacf;}
.category_tabs>input[type="radio"] + label {padding-left: 0;}
.category_tabs>input[type="radio"] + label::before,
.category_tabs>input[type="radio"]:checked + label::after {display: none;}
.categorytab-wrap {width: 100%; display: block; margin: 0 auto; padding: 50px 0 0; align-items: center; justify-content: center; background-color: #ffffff;}

.categorytab-wrap>.product-block {width: 100%; margin: 0 auto; padding: 30px 0 90px;}
#besthitlp .product-block>.product-top {width: 100%; margin: 0 auto; display: grid; grid-template-columns: 170px 1fr; gap: 10px; text-align: justify; align-items: center; color: #333333; text-align: justify;}
#besthitlp .product-block>.product-top>.rankicon {width: 160px; position: relative;}
#besthitlp .product-block>.product-top>.rankicon>img {width: 100%; position: absolute; top: -90px; left: -20px;}
#besthitlp .product-block>.product-top>.productname {width: 100%;}
#besthitlp .product-block>.product-top>.productname>h3 {margin: 0 auto 5px; padding: 0; font-size: 1.1rem; font-weight: 700; line-height: 1.0; letter-spacing: 0.05em;}
#besthitlp .product-block>.product-top>.productname>h4 {margin: 0 auto 10px; padding: 0; font-size: 1.3rem; font-weight: 700; line-height: 1.5; letter-spacing: 0.05em;}
#besthitlp .product-block>.product-top>.productname>h4>span {display: block; margin: 7px auto 0; font-size: 0.95rem;}
#besthitlp .product-block>.product-top>.productname>p {margin: 0 auto; padding: 0; font-size: 0.8rem; font-weight: 500; line-height: 1.0; letter-spacing: 0.05em;}
#besthitlp .product-block>.product-top>.productname>p.product-ca {display: inline-block; margin: 0 auto 15px; padding: 5px 10px; font-size: 0.85rem; font-weight: 500; line-height: 1.0; letter-spacing: 0.05em; border: 1px solid #333333; border-radius: 50px;}
#besthitlp .product-block>.product-img {width: 100%; margin: 10px auto 20px;}
#besthitlp .product-block>.product-img>a>img {width: 100%;}
#besthitlp .product-block>.product-text {width: 88%; margin: 0 auto 20px; color: #333333; text-align: justify;}
#besthitlp .product-block>.product-text>p {margin: 0 auto 20px; padding: 0; font-size: 1.05rem; font-weight: 400; line-height: 2.0; letter-spacing: 0.01em;}
#besthitlp .product-block>.product-text>p.headline {margin: 0 auto 10px; padding: 0; font-size: 1.15rem; font-weight: 700; line-height: 1.8; letter-spacing: 0.01em;}
#besthitlp .product-block>.product-text>img {width: 100%;}
#besthitlp .product-block>.staff-comment {width: 85%; margin: 0 auto; padding: 10px 5% 20px; /*border: 1px solid #cfcfcf;*/ background-color: #ffffff; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15); border-radius: 20px;}
#besthitlp .product-block>.staff-comment>img {width: 100%;}
#besthitlp .product-block>.staff-comment>p {margin: 0 auto; padding: 0; color: #333333; text-align: justify; font-size: 0.9rem; font-weight: 400; line-height: 1.8; letter-spacing: 0.01em;}


#besthitlp .product-block>a.btn_cart {display: block; width: 75%; margin: 40px auto 0; padding: 25px 0 28px; color: #ffffff; font-size: 1.25rem; font-weight: 700; line-height: 1.0; letter-spacing: 0.1em;  border-radius: 80px; cursor: pointer; text-align: center; transition: background-color 0.3s ease, color 0.3s ease;}
#besthitlp .product-block>a.btn_cart::after {font-family: 'Material Symbols rounded'; content: "chevron_right"; font-size: 25px; font-weight: 400; transition: all .3s ease; margin-left: 10px; color: #ffffff; position: relative; top: 5px;}

#besthitlp .product-block>a.btn_haircare {background: #9dc7ba; border: 2px solid #9dc7ba;}
#besthitlp .product-block>a.btn_haircare:hover {color: #9dc7ba; background: #ffffff;}
#besthitlp .product-block>a.btn_haircare:hover::after {color: #9dc7ba;}
#besthitlp .product-block>a.btn_skincare {background: #dfa6b1; border: 2px solid #dfa6b1;}
#besthitlp .product-block>a.btn_skincare:hover {color: #dfa6b1; background: #ffffff;}
#besthitlp .product-block>a.btn_skincare:hover::after {color: #dfa6b1;}
#besthitlp .product-block>a.btn_electric {background: #ccce88; border: 2px solid #ccce88;}
#besthitlp .product-block>a.btn_electric:hover {color: #ccce88; background: #ffffff;}
#besthitlp .product-block>a.btn_electric:hover::after {color: #ccce88;}
#besthitlp .product-block>a.btn_etc {background: #b7aacf; border: 2px solid #b7aacf;}
#besthitlp .product-block>a.btn_etc:hover {color: #b7aacf; background: #ffffff;}
#besthitlp .product-block>a.btn_etc:hover::after {color: #b7aacf;}

#besthitlp .besthit-footer {width: 100%; margin: 0 auto; padding: 40px 0 100px; background-image: url(https://beautymylab.com/user_data/packages/raku2pc/img/cp/260401besthit/rankingbg.webp); background-size: 100%; background-repeat: repeat;}
a.btn_allitem {display: block; width: 60%; margin: 0 auto 0; padding: 18px 0 22px; color: #ba626d; font-size: 1.0rem; font-weight: 700; line-height: 1.0; letter-spacing: 0.1em; cursor: pointer; text-align: center; transition: background-color 0.3s ease, color 0.3s ease; background: #ffffff; border: 2px solid #ba626d;}
a.btn_allitem:hover {color: #ffffff; background: #ba626d;}
a.btn_allitem::after {font-family: 'Material Symbols rounded'; content: "chevron_right"; font-size: 25px; font-weight: 400; transition: all .3s ease; margin-left: 10px; color: #ba626d; position: relative; top: 5px;}
a.btn_allitem:hover::after {color: #ffffff;}

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

@media screen and (max-width: 1000px) {
	#footer-bml {margin: 0 auto 0;}
}