@charset "UTF-8";

/* ====================================
	共通スタイル
 ==================================== */

.inline-block {
	display: inline-block;
}

/* 成分 */
.ingredients {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: flex-start;
}
.ingredients .ingr-box {
	width: 100%;
	display: inline-flex;
	flex-direction: row;
	align-items: flex-start;
	padding: 10px;
	background-color: #F5F9FC;
	border-radius: 6px;
	gap: 1em;
}
.ingredients .ingr-box .ingr-img {
	width: 40%;
	max-width: 120px;
	border-radius: 50%;
	overflow: hidden;
	margin: auto;
}
.ingredients .ingr-box .ingr-tbox {
	width: 100%;
	display: flex;
	margin: auto 0;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
}

.ingredients .ingr-box .ingr-ttl {
	display: block;
	width: 100%;
	font-size: 1.6rem;
	line-height: 1.2;
	font-weight: bold;
	margin: 5px 0;
}
.ingredients .ingr-box .ingr-txt {
	display: block;
	width: 100%;
	font-size: 1.4rem;
	line-height: 1.2;
}
.ingredients .ingr-box .star.caption {
	display: block;
	width: 100%;
	text-align: left;
}
.ingr-box .caption li {
	text-indent: 0;
	line-height: 1.2;
}

.ingredients .ingr-box .ingr-pur {
	display: inline-block;
	font-size: 1.2rem;
	font-weight: normal;
	line-height: 1.5;
	padding: 0 8px;
	border-radius: 3px;
	text-align: center;
	color: #FFF;
}
.ingr-box div .ingr-pur:first-of-type {
	margin-right: 2px;
}

.ingredients .ingr-box .ingr-pur.moist { 
	background-color: #96acbd;
}
.ingredients .ingr-box .ingr-pur.skincare { 
	background-color: #b0a092;
}
.ingredients .ingr-box .ingr-pur.barrier { 
	background-color: #bb93a0;
}
.ingredients .ingr-box .ingr-pur.scalpcare { 
	background-color: #a2b88d;
}
.ingredients .ingr-box .ingr-pur.graycare { 
	background-color: #9e9e9e;
}

.ingredients .ingr-box .ingr-pur.repair { 
	background-color: #8490ae;
}
.ingredients .ingr-box .ingr-pur.protection { 
	background-color: #bc8e77;
}
.ingredients .ingr-box .ingr-pur.emollient { 
	background-color: #bb98b7;
}
.white {
    color: #fff;
}

/* ====================================
	スマートフォン専用スタイル
===================================== */
@media only screen and (max-width: 767px) {

}

/* ====================================
	PC&タブレット、印刷専用スタイル
===================================== */
@media print , screen and (min-width: 768px) {

	/* 成分 */
	.ingredients {
		gap: 30px;
	}

	.ingredients .ingr-box {
		width: calc(100% / 3 - 20px);
		display: inline-flex;
		align-items: center;
		flex-direction: column;
		padding: 12px;
		background-color: #F5F9FC;
	}
	.ingredients .ingr-box .ingr-img {
		width: 80%;
		max-width: 150px;
		margin: 0 auto;
	}
		
	.ingredients .ingr-box .ingr-tbox {
		width: 100%;
		margin: 0;
		align-items: center;
	}
	.ingredients .ingr-box .ingr-ttl {
		font-size: 1.8rem;
		text-align: center;

	}
	.ingredients .ingr-box .ingr-txt {
		font-size: 1.5rem;
		text-align: center;

	}
	.ingredients .ingr-box .ingr-pur {
		font-size: 1.3rem;
	}
	.ingr-box .caption {
		padding-left: 0;
	}
	.ingr-box .caption li {
		text-indent: 0;
		line-height: 1.2;
	}
	
}

/* ====================================
	タブレット専用スタイル
===================================== */
@media screen and (min-width:768px) and (max-width:1079px) {

}

/* ====================================
	PC専用スタイル
===================================== */
@media only screen and (min-width: 1080px) {

}

/* ====================================
	印刷専用スタイル
===================================== */
@media print {
}