@charset "UTF-8";

/*----------------------------------------------------
   
   基本
   
----------------------------------------------------*/

/* --------  PC調整   --------*/
@media screen and ( min-width:800px) {
}
/* --------  タブレット調整   --------*/
@media screen and ( max-width:799px) {
}
/* --------  スマホ調整   --------*/
@media screen and ( max-width:599.9px) {
}


/*----------------------------------------------------
   
   基本
   
----------------------------------------------------*/

.product-cosme #main-content {
	margin-top: 0;
}
.product-cosme #main-content:before {
	display: none;
}
.product-sec {
	padding: 4em 0;
}
#cosme .inner,
.product-sec .inner {
	width: 90%;
}

.melnee-logo {
	max-width: 1200px;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 1;
}
.melnee-logo a {
	width: 120px;
	display: block;
	margin: 1em 0 0 1em;
}
.melnee-logo a:hover {
	opacity: .7;
}

/* --------  PC調整   --------*/
@media screen and ( min-width:800px) {
}
/* --------  タブレット調整   --------*/
@media screen and ( max-width:799px) {
.product-sec {
	padding: 4em 0;
}
.melnee-logo {
	max-width: 1200px;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 990;
}
}
/* --------  スマホ調整   --------*/
@media screen and ( max-width:599.9px) {
}



/*----------------------------------------------------
   
   コスメ情報
   
----------------------------------------------------*/

#cosme {
	background: linear-gradient(#ffebea, #ffffff 50%, #ffebea);
	padding: 2em 0 4em;
}
#cosme.mask {
	padding: 3em 0 4em;
}

#cosme .mask-pack {
	margin-top: 2em;
}

#cosme .pht {
	max-width: 400px;
	margin: 0 auto 2.5em;
}
#cosme.mask .pht {
	margin: 0 auto 1em;
}

#cosme .release {
	background-color: #d65d78;
	display: inline-block;
	color: #FFF;
	padding: 0 .4em;
	line-height: 1.8;
	font-size: 15px;
	margin-bottom: .5em;
}

/*#cosme .cosme-txtbox {
	width: 90%;
	margin: 0 auto;
}*/
#cosme h3 {
	color: #876366;
	margin-bottom: .5em;
}
#cosme .txt {
	margin-bottom: .5em;
	line-height: 1.8;
}
#cosme .type {
	margin-bottom: .5em;
	line-height: 1.8;
	font-weight: bold;
	color: #d65d78;
}
#cosme .type span {
	display: inline-block;
	margin-right: 1em;
}

#cosme .category {
	text-align: left;
	margin: .5em 0;
}
#cosme .category li {
	display: inline-block;
	box-sizing: border-box;
	border: solid 1px #886467;
	color: #886467;
	padding: .2em .6em;
	line-height: 1.5;
	margin: .2em .2em .2em 0;
}

#cosme .capacity {
	display: inline-flex;
	border: solid 1px #886467;
	box-sizing: border-box;
	margin-bottom: .5em;
}
#cosme .capacity dt,
#cosme .capacity dd {
	padding: .2em .6em;
	line-height: 1.5;
	box-sizing: border-box;
}
#cosme .capacity dd {
	border-left: solid 1px #886467;
}

#cosme .fragrance {
	display: inline-block;
	padding: .2em .6em;
	line-height: 1.5;
	box-sizing: border-box;
	margin-left: .5em;
	font-weight: bold;
}
#cosme .fragrance.citrus {
	color: #f5ad52;
	border: solid 1px #f5ad52;
}
#cosme .fragrance.green-floral {
	color: #f2a7a3;
	border: solid 1px #f2a7a3;
}

#cosme .kakaku {
	font-weight: bold;
}

/* --------  PC調整   --------*/
@media screen and ( min-width:800px) {
#cosme h3 {
	font-size: 22px;
}
#cosme .capacity dt,
#cosme .capacity dd,
#cosme .fragrance,
#cosme .category li {
	font-size: 14px;
}
#cosme .kakaku {
	font-size: 22px;
}
}
/* --------  タブレット調整   --------*/
@media screen and ( max-width:799px) {
#cosme h3 {
	font-size: 20px;
}
#cosme .capacity dt,
#cosme .capacity dd,
#cosme .fragrance,
#cosme .category li {
	font-size: 13px;
}
#cosme .kakaku {
	font-size: 20px;
}
}
/* --------  スマホ調整   --------*/
@media screen and ( max-width:599.9px) {
}


/*----------------------------------------------------
   
   取扱店舗
   
----------------------------------------------------*/

#where {
	background-color: #f8e5e1;
}
#where .sec-title {
	margin-bottom: 2em;
}
#where .sec-title dd {
	color: #e08698;
}
#where .lead {
	line-height: 1.8;
	margin-bottom: 1.5em;
}
#where .shop-list {
	display: flex;
	flex-flow: wrap;
	justify-content: space-between;
	margin: 1.5em auto;
}
#where .shop-list li {
	width: 48%;
	display: flex;
	margin: .6em 0;
}
#where .shop-list li a {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #FFF;
	padding: .4em;
	font-size: 24px;
	box-sizing: border-box;
	width: 100%;
	border-radius: 300px;
	font-family: "Zen Kaku Gothic New", ArialMT, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", メイリオ, sans-serif;
	font-weight: 500;
	color: #000;
}
#where .shop-list li a img {
	max-width: 120px;
}

/* --------  PC調整   --------*/
@media screen and ( min-width:800px) {
#where .shop-list li a:hover {
	opacity: .8;
}
}
/* --------  タブレット調整   --------*/
@media screen and ( max-width:799px) {
}
/* --------  スマホ調整   --------*/
@media screen and ( max-width:599.9px) {
}



/*----------------------------------------------------
   
   注意事項
   
----------------------------------------------------*/

#ingredient .ingredient-txt {
	margin: 1.5em 0 2.5em;
}
#ingredient .ingredient-list li {
	display: flex;
	margin: .5em 0;
}
#ingredient .ingredient-list li:before {
	content: "■";
}
/* --------  PC調整   --------*/
@media screen and ( min-width:800px) {
}
/* --------  タブレット調整   --------*/
@media screen and ( max-width:799px) {
}
/* --------  スマホ調整   --------*/
@media screen and ( max-width:599.9px) {
}


/*----------------------------------------------------
   
   howto
   
----------------------------------------------------*/

.howto {
	background-color: #fff8f4;
	/*padding-bottom: 7em;*/
}
.howto .sec-title {
	width: 90%;
	margin: 0 auto 2em;
	text-align: left;
}

.howto.howto02 .slide-box li:has(h4) {
	box-sizing: border-box;
	border: solid 1px #b64561;
	background-color: #FFF;
	border-radius: 300px;
	padding: 50px 1.5em;
}
.howto.howto02 .slide-box li p {
	width: 80%;
	margin: 0 auto;
	text-align: center;
}



/*----------------------------------------------------
   
   トップに戻る
   
----------------------------------------------------*/

#back-btn {
	padding: 0 0 4em;
}
#back-btn a {
	font-size: 20px;
	font-weight: normal;
}
/* --------  PC調整   --------*/
@media screen and ( min-width:800px) {
}
/* --------  タブレット調整   --------*/
@media screen and ( max-width:799px) {
}
/* --------  スマホ調整   --------*/
@media screen and ( max-width:599.9px) {
}