@charset "UTF-8";
/* --------------------------------------

	成分一覧

---------------------------------------- */

#stage.mbp-ingredient * {
	box-sizing: border-box;
}

#stage .mod-h2-bg {
	margin-bottom: 20px;
}
#stage .mod-annotation {
	text-align: right;
}

#stage .otherMenu {
	border: none;
	padding: 0;
}

/* ------------------------------------
	* table
* ------------------------------------ */
#stage .product_name {
	display: flex;
	align-items: center;
	width: 100%;
}
#stage .product_name .thumb {
	flex: 0 0 70px;
	width: 70px;
}
#stage .product_name .thumb img {
	width: 100%;
}
#stage .product_name .text {
	margin-left: 20px;
}
#stage .product_name .name {
	margin-bottom: 6px;
	font-size: 15px;
	font-weight: bold;
}
#stage .product_name .label {
	margin-bottom: 6px;
	font-size: 14px;
	line-height: 1;
	opacity: 1;
	transition: opacity .2s ease-in-out;
}
#stage .product_name .label span {
	display: inline-block;
    padding: 5px 6px;
	color: #fff;
	font-size: 12px;
	font-weight: normal;
}
#stage .label_tokuho {
	background: #009F96;
}
#stage .label_kinou {
	background: #EF8D00;
}
#stage .ingredient-table {
	table-layout: fixed;
	width: 100%;
	text-align: center;
}
#stage .ingredient-table thead th {
	background: rgba(225, 243, 255 ,.55);
	font-weight: normal;
	line-height: 1;
}
#stage .ingredient-table tbody th,
#stage .ingredient-table tbody td {
	vertical-align: middle;
}
#stage .ingredient-table th + th,
#stage .ingredient-table th + td,
#stage .ingredient-table td + td {
	border-left: 1px dashed #ccc;
}
@media only screen and (min-width: 737px) {
	#stage .ingredient {
		margin-top: 10px;
	}
	#stage .ingredient-table {
		font-size: 15px;
	}
	#stage .ingredient-table thead th {
		padding: 14px 0;
		font-size: 12px;
	}
	#stage .ingredient-table tbody th,
	#stage .ingredient-table tbody td {
		padding: 10px 14px;
	}
	#stage .ingredient-table tbody th {
		text-align: left;
	}
	#stage .ingredient-table tbody tr {
		border-bottom: 1px solid #ccc;
	}
	#stage .ingredient-table tbody td span {
		display: block;
		font-size: 12px;
	}
}
@media only screen and (max-width: 736px) {
	#stage .ingredient {
		margin-top: 10px;
		border-top: 1px solid #ccc;
	}
	#stage .ingredient-item {
		padding: 20px;
		border-bottom: 1px solid #ccc;
	}
	#stage .product_name {
		align-items: flex-start;
		margin-bottom: 13px;
	}
	#stage .ingredient-table-wrp {
		margin-right: -20px;
		padding-bottom: 13px;
		width: calc( 100% + 20px );
		overflow-x: scroll;
	}
	#stage .ingredient-table-wrp::-webkit-scrollbar {
		height: 5px;
	}
	#stage .ingredient-table-wrp::-webkit-scrollbar-thumb {
		border-radius: 5px;
	}
	#stage .ingredient-table-wrp::-webkit-scrollbar-thumb {
		--bg-opacity: 1;
		background-color: #ccc;
	}
	#stage .ingredient-table {
		margin-right: 20px;
		font-size: 13px;
	}
	#stage .ingredient-table thead th {
		padding: 6px 0;
		font-size: 10px;
	}
	#stage .ingredient-table tbody th,
	#stage .ingredient-table tbody td {
		padding: 6px;
	}
}