@charset "UTF-8";

/*__________slick-slider__________*/
.rankingList .slick-slider {
 position: relative;
 display: block;
 box-sizing: border-box;
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
 -webkit-touch-callout: none;
 -khtml-user-select: none;
 -ms-touch-action: pan-y;
 touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
.rankingList .slick-list {
 position: relative;
 display: block;
 overflow: hidden;
 margin: 0;
 padding: 0;
}
.rankingList .slick-list:focus {
 outline: none;
}
.rankingList .slick-list.dragging {
 cursor: pointer;
 cursor: hand;
}
.rankingList .slick-slider .slick-track,
.rankingList .slick-slider .slick-list {
 -webkit-transform: translate3d(0, 0, 0);
 -moz-transform: translate3d(0, 0, 0);
 -ms-transform: translate3d(0, 0, 0);
 -o-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
}
.rankingList .slick-track {
 position: relative;
 top: 0;
 left: 0;
 display: block;
 margin-left: auto;
 margin-right: auto;
}
.rankingList .slick-track:before,
.rankingList .slick-track:after {
 display: table;
 content: '';
}
.rankingList .slick-track:after {
 clear: both;
}
.rankingList .slick-loading .slick-track {
 visibility: hidden;
}
.rankingList .slick-slide {
 display: none;
 float: left;
 height: 100%;
 min-height: 1px;
}
[dir='rtl'] .rankingList .slick-slide {
 float: right;
}
.rankingList .slick-slide img {
 display: block;
}
.rankingList .slick-slide.slick-loading img {
 display: none;
}
.rankingList .slick-slide.dragging img {
 pointer-events: none;
}
.rankingList .slick-initialized .slick-slide {
 display: block;
}
.rankingList .slick-loading .slick-slide {
 visibility: hidden;
}
.rankingList .slick-vertical .slick-slide {
 display: block;
 height: auto;
 border: 1px solid transparent;
}
.rankingList .slick-arrow.slick-hidden {
    display: none;
}

/*__________keyVisualTop__________*/
.keyVisualTop__title ul {
	margin: 0;
}
.keyVisualTop__title p img {
 width: 320px;
 margin-bottom: 20px;
}
.keyVisualTop__title p.attention {
	padding: 5px 15px;
	background: #ef857d;
	color: #fff;
	display: inline-block;
	margin-bottom: 10px;
}
.keyVisualTop__title ul.notes--order,
.keyVisualTop__title ul.notes {
	margin: 0 auto 20px;;
	color: #999;
	line-height: 1em;
}
.keyVisualTop__img {
	position: relative;
}
.keyVisualTop__img .details {
	position: absolute;
	left: calc(100% + 50px);
	bottom: 50px;
	width: 100%;
}
.keyVisualTop__img .details a{
	display: table;
}
.keyVisualTop__img .notes__area {
	position: absolute;
	left: calc(100% + 50px);
	bottom: 10px;
	width: 100%;
	color: #999;
}
.keyVisualTop__img .notes__area ul{
	height: 30px;
	margin: 0;
	line-height:1.2em;
}
.keyVisualTop__title .txt--L {
	line-height: 1.4;
	line-height: 1.1;
	padding-bottom: 20px;
	color: #999;
}
.keyVisualTop__title .txt--L span {
	font-size: 16px;
	font-weight: 700;
}
.keyVisualTop__title .txt--L sup {
	font-size: 12px;
}
.keyVisualTop__title p {
	font-size: 18px;
}
.keyVisualTop__title p span{
	font-size: 14px;
	font-weight: 700;
}
.keyVisualTop__title p.txt--emphasis{
	line-height: 1.4;
}
.featureGrid__itemList .featureGrid__mainItem {
	margin-top: 34px;
}
.featureGrid__itemList .featureGrid__mainItem ul,
.featureGrid__otherItem .featureGrid__item ul {
	margin-top: 0px;
	margin-bottom: 14px;
	line-height: 1;
}

.recommendList ul + ul {
	margin-top: 80px;
}
.recommendList .recommendList__ttl{
	line-height: 1.4;
}

span.btn--strongSmall {
	display: table-cell;
	vertical-align: middle;
	font-family: "open sans","游ゴシック体",YuGothic,"游ゴシック","Yu Gothic",YuGothic,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,sans-serif;
	font-weight: 700;
	color: #fff;
}


@media screen and (max-width: 768px){
	.keyVisualTop__title {
	 padding: 20px 0 80px;
	 height: 170px;
	}
	.keyVisualTop__title.orbisu {
	 padding-top: 15px;
	}
	.keyVisualTop__title p img {
	 width: 50%;
	 margin-bottom: 10px;
	}
	.keyVisualTop__title .txt--L {
		line-height: 0.9;
	}
	.keyVisualTop__title .txt--L span {
		font-size: 12px;
	}
	.keyVisualTop__title p {
		font-size: 16px;
	}
	.keyVisualTop__title p span{
		font-size: 12px;
	}
	.keyVisualTop__img .details {
		left: 25%;
		bottom: -220px;
		width: 50%;
	}
	.keyVisualTop__img .notes__area {
		position: absolute;
		left: 14px;
		bottom: -260px;
		width: 100%;
	}
	.keyVisualTop__img .notes__area ul li ,
	.keyVisualTop__title .txt--L sup {
		font-size: 9px;
	}
	.featureGrid__itemList .featureGrid__mainItem ul,
	.featureGrid__otherItem .featureGrid__item ul {
		margin-top: 40px;
	}
	.recommendList ul + ul {
		margin-top: 35px;
	}
}
span.btn--strongSmall {
	display: table;
	margin-left: 5px;
	padding-top: 7px;
}
.notes > li.notes_2::before {
    content: "※※";
}
.notes > li.notes_2 {
    padding-left: 2.4em;

}
/*__________RANKING & SEASONAL__________*/
.rankingList__img img,
.seasonalList__img img {
 border: 1px solid #dedfdf;
 width: 100%;
}
.rankingList__item {
 position: relative;
}
.rankingList__img .crown {
 position: absolute;
 top: 1%;
 left: 1%;
 width: 30%;
 margin-top: 0;
}
.rankingList__img .crown img {
 border: none;
}
.rankingList__ttl,
.seasonalList__ttl{
 text-decoration: none;
 font-weight: bold;
}
.rankingList__ttl:hover,
.seasonalList__ttl:hover{
 text-decoration: none;
}
.rankingList__txt,
.seasonalList__txt {
 text-align: center;
}
.rankingList__txt p,
.seasonalList__txt p{
 margin: 10px 0;
}

@media screen and (max-width:768px) {
.rankingList__txt,
.seasonalList__txt {
 font-size: 10px;
}
}
/*__________RANKING & SEASONAL SLICK__________*/
.rankingList__item,
.seasonalList__item{
	margin: 0 12px;
}
.rankingSlide .slick-next::before,
.rankingSlide .slick-prev::before,
.seasonalSlide .slick-next::before,
.seasonalSlide .slick-prev::before {
 content: "";
 display: block;
 width: 54px;
 height: 54px;
 opacity: 0.8;
 -webkit-transition: opacity .4s ease;
 transition: opacity .4s ease;
 background-size: 54px 54px;
}
.rankingSlide .slick-prev,
.seasonalSlide .slick-prev {
 left: -15px;
 z-index: 20;
 top: 30%;
}
.rankingSlide .slick-prev::before,
.seasonalSlide .slick-prev::before {
 background: url(/contents/common/images/bg-link-arrow-prev_topnew.png) center center no-repeat;
}
.rankingSlide .slick-next,
.seasonalSlide .slick-next {
 right: 15px;
 z-index: 20;
 top: 30%;
}
.rankingSlide .slick-next::before,
.seasonalSlide .slick-next::before {
 background: url(/contents/common/images/bg-link-arrow-next_topnew.png) center center no-repeat;
}
.rankingSlide .slick-disabled,
.seasonalSlide .slick-disabled {
 display: none;
 opacity: 0;
}
@media screen and (max-width:768px) {
.rankingList__item,
.seasonalList__item{
	margin: 0 5px;
}
.rankingSlide .slick-next::before,
.rankingSlide .slick-prev::before,
.seasonalSlide .slick-next::before,
.seasonalSlide .slick-prev::before {
 width: 30px;
 height: 30px;
 background-size: contain;
}
.rankingSlide .slick-prev,
.seasonalSlide .slick-prev {
 left: -10px;
 top: 25%;
}
.rankingSlide .slick-next,
.seasonalSlide .slick-next {
 right: 0;
 top: 25%;
}
.rankingList .rankingList__item a:hover {
 text-decoration: none;
}
}

/*__________popularItem__________*/
.popularItem__itemList {
 width: 100%;
 display: inline-flex;
 justify-content: space-between;
}
.popularItem__itemList .popularItem__item {
 margin-left: 50px;
 margin-bottom: 50px;
}
.popularItem__itemList .popularItem__item:first-child {
 margin-left: 0;
}
.popularItem__itemList .popularItem__item img {
 width: 100%;
}

@media screen and (max-width:768px) {
.popularItem__itemList {
 display: block;
 margin: 0;
}
.popularItem__itemList .popularItem__item{
 margin-left: 0;
}
}



/*__________incentive__________*/
.incentive {
 background-color: #fcf7f5;
}
.incentive__list {
 max-width: 800px;
 margin: 0 auto;
 background-color: #fff;
}
.incentive__listItem a {
 border-radius: 0px;
 margin: 0 15px;
}
.incentive__listItem img {
 width: 200px;
 margin: 15px 0;
}
.incentive__listItem:nth-child(2) img ,
.incentive__listItem:nth-child(3) img {
 border-left: 2px solid #f4a9a4;
}
.incentive__title {
    margin: 0 auto;
    padding-top: 10px;
    text-align: center;
    width: 96%;
}
.incentive__title span {
    background: #ef857d;
    border-radius: 40px;
    color: #fff;
    display: inline-block;
    font-size: 15px;
    padding: 5px 24px;
    white-space: nowrap;
    max-width: calc(100% - 48px);
}
.incentive__title span::before {
    content: "";
    background: url(/contents/common/images/img-incentive-icon.png) no-repeat;
    background-size: cover;
    width: 15px;
    height: 20px;
    display: inline-block;
    margin-right: 10px;
    vertical-align: middle;
}
.incentive__title span::after {
    content: "";
    background: url(/contents/common/images/img-incentive-arrow.png) no-repeat;
    background-size: cover;
    width: 6px;
    height: 11px;
    display: inline-block;
    margin-left: 10px;
    vertical-align: middle;
}
div.incentive ul.notes {
    margin-top: 10px !important;
}
div.incentive ul.notes li {
    max-width: 800px;
    margin: 0 auto;
    text-align: right;
}
div.incentive ul.notes li:before {
    display: inline;
    position: static;
}
div.incentive+div.container ul {
    margin-top: 5px;
}
p.incentive__ttl {
	max-width: 800px;
	margin: 0 auto;
	background: #fff;
	font-size: 32px;
	text-align: center;
	line-height: 1.4em;
	padding-top: 20px;
}
p.incentive__ttl span {
	font-size: 24px;
}
@media screen and (max-width:768px) {
.incentive {
 padding: 30px 0 20px;

}
.incentive__list {
 width: 96%;
 display: flex;
}
.incentive__list + ul {
 margin-top: 20px;
}
.incentive__listItem img {
 width: 100%;
}
.incentive__listItem:nth-child(2) img ,
.incentive__listItem:nth-child(3) img {
 border-left: 1px solid #f4a9a4;
}
p.incentive__ttl {
	width: 96%;
	font-size: 20px;
	padding-top: 20px;
}
p.incentive__ttl span {
	font-size: 16px;
}
div.incentive ul.notes li {
    width: 96%;
}
}

/*__________SKINCARE ITEM__________*/
.skincareList ul{
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
}
.skincareList ul li{
 width: 50%;
 margin-bottom: 25px;
 position: relative;
}
.skincareList__img {
 width: 40%;
 margin-right: 1em;
}
.skincareList__img img {
 border: 1px solid #dedfdf;
 width: 100%;
 height: 100%;
}
.skincareList__img,
.skincareList__txt {
 display :inline-block;
}
.skincareList__ttl{
 text-decoration: none;
 font-weight: bold;
}
.skincareList__ttl:hover{
 text-decoration: none;
}
.skincareList__txt p{
 margin:10px 0;
}
p.skincareList__note {
 font-size: 9px;
 text-align: left;
 margin: 0;
}
@media screen and (max-width:768px) {
.skincareList ul li{
 width: 23%;
}
.skincareList__img {
 width: 100%;
 margin-right: 0;
}
.skincareList__img,
.skincareList__txt {
 display :block;
}
.skincareList__txt {
 text-align:center;
 font-size: 10px;
}
.skincareList__ttl:hover{
 text-decoration: none;
}
}



/*__________SKIN TROUBLE__________*/
.skinTroubleBlock {
 margin: 60px -10px;
 padding-bottom: 20px;
}
.skinTroubleBlock ul {
 padding-top: 20px;
 background-color: #f5f5f5;
}



/*__________CONTENTS__________*/
.contentsBlock ul {
 margin-bottom: 80px;
}
.contentsBlock ul {
 display: flex;
 flex-wrap: wrap;
}
.contentsBlock li {
 width: 49%;
 margin-left: 2%;
 margin-bottom :20px;
}
.contentsBlock li:nth-child(2n-1) {
 margin-left: 0;
}
.contentsBlock li img {
 width: 100%;
}
@media screen and (max-width:768px) {
.contentsBlock ul {
 margin-bottom: 60px;
}
.contentsBlock ul {
 display: block;
}
.contentsBlock li {
 width: 100%;
 margin: 0 auto 20px;
}
.contentsBlock li:nth-child(2n-1) {
 margin: 0 auto 20px;
}
}


/*__________movie__________*/
.movie-container {
	text-align: center;
	max-width: 800px;
	margin: 100px auto;
}
.movie-text {
	font-size: 26px;
	font-weight: bold;
}
.movie-wrap {
	width: 100%;
	aspect-ratio: 16/9;
	margin-top: -10px;
}
.movie-wrap iframe {
	width: 100%;
	height: 100%;
}
.movie-bnr {
	display: block;
	margin-top: 20px;
}
.movie-bnr img {
	width: 100%;
}

.movie-container-flex {
	display: flex;
	text-align: center;
	max-width: 800px;
	margin: 0 auto;
}
.movie-container-flex .movie-set{
	width: 100%;
}
.movie-container-flex .movie-wrap {
	aspect-ratio: 1 / 1;
	width: 100%;
	height: auto;
}
.movie-container-flex .movie-bnr {
	margin: 124px 0 0 60px;
}

@media screen and (max-width:768px) {
	.movie-container {
		margin: 0 0 50px 0;
	}
	.movie-text {
		font-size: 15px ;
	}
	.movie-bnr {
		margin-top: 10px;
	}
	.movie-container-flex {
		display: block;
	}
	.movie-container-flex .movie-bnr {
		margin: 30px 0 0 0;
	}
}

.movie-btn {
/*	border: solid 1.5px;  */
	width: 100%;
	margin: 0 auto;
	padding: 5px 0;
	margin-top: 5px;
	/* background-color: #545859; */
}
.movie-btn a {
	font-size: 16px;
	font-weight: bold;
	text-decoration: none;
	color: #ffffff;
/*	color: #474225;  */
}
@media screen and (max-width:768px) {
	.movie-btn a {
		font-size: 12px;
	}
}

/*__________banner__________*/
.top-bnr {
	margin: 20px 0 50px;
}
@media screen and (max-width:768px) {
	.top-bnr  {
		margin: 0 0 50px;
	}
}