/* body {	background: url(/design_ingredients.jpg) yellow center top no-repeat;	background-size: 1680px auto;	height: 15400px;} */
.ingredients {
	position: relative;
	margin: 0 auto;
	max-width: 1680px;
	/* min-height: 15400px; */
}

.ingredients p {
	line-height: 1.2;
}

.ingredients p,
.ingredients svg {
	cursor: pointer;
}

.ingredients .detail {
	display: none;
}

.ingredients>div:hover svg {
	fill: #661403;
}

.ingredients>div:hover>p {
	color: #661403;
}

.ingredients>div {
	padding: 10% 0;
}

.ingredients .img {
	margin: 0 auto;
	max-width: 250px;
}

.ingredients>div>p {
	text-align: center;
}

@media (min-width:992px) {
	.ingredients>div {
		padding: 0;
	}

	.ingredients .img {
		margin: auto;
		max-width: 100%;
	}
	
	#salvia_sclarea {
		position: absolute;
		max-width: 265px;
		width: 16.5%;
		top: 0;
		left: 7.4%;
		padding-top: 3.1%;
		z-index: 1000;
	}

	#salvia_sclarea svg {
		width: 100%;
	}

	#salvia_sclarea p {
		position: absolute;
		bottom: 1%;
		left: 40%;
	}

	#lonicera_japonica {
		position: absolute;
		max-width: 410px;
		width: 24.8%;
		top: 0;
		left: 28.5%;
		padding-top: 6%;
		z-index: 1000;
	}

	#lonicera_japonica svg {
		position: relative;
		left: 36%;
		top: 0;
		width: 63.5%;
	}

	#lonicera_japonica p {
		position: absolute;
		bottom: 10%;
		left: 0%;
	}

	#abies_sibirica {
		position: absolute;
		max-width: 310px;
		width: 18.66%;
		top: 0;
		left: 58.5%;
		padding-top: 14.2%;
		z-index: 1000;
	}

	#abies_sibirica svg {
		position: relative;
		left: 0;
		top: 0;
		width: 83.1%;
	}

	#abies_sibirica p {
		position: absolute;
		bottom: 2%;
		right: 0%;
	}

	#juniperus_communis {
		position: absolute;
		max-width: 282px;
		width: 17.9%;
		top: 0;
		left: 76.2%;
		padding-top: 3%;
		z-index: 1000;
	}

	#juniperus_communis svg {
		position: relative;
		left: 0;
		top: 0;
		width: 97%;
	}

	#juniperus_communis p {
		position: absolute;
		bottom: -4%;
		left: 20%;
	}

	#melaleuca_alternifolia {
		position: absolute;
		max-width: 278px;
		width: 16.73%;
		top: 0;
		left: 7.47%;
		padding-top: 33.5%;
		z-index: 900;
	}

	#melaleuca_alternifolia svg {
		position: relative;
		left: 0;
		top: 0;
		width: 96%;
	}

	#melaleuca_alternifolia p {
		position: absolute;
		bottom: 3.5%;
		right: 0;
	}

	#perilla_frutescens_var_crispa {
		position: absolute;
		max-width: 335px;
		width: 19.94%;
		top: 0;
		left: 28.5%;
		padding-top: 32.4%;
		z-index: 900;
	}

	#perilla_frutescens_var_crispa svg {
		position: relative;
		left: 21%;
		top: 0;
		width: 78%;
	}

	#perilla_frutescens_var_crispa p {
		position: absolute;
		bottom: 5%;
		left: 0;
	}

	#helichrysum_bracteatum {
		position: absolute;
		max-width: 299px;
		width: 17.9%;
		top: 0;
		left: 52.68%;
		padding-top: 44.5%;
		z-index: 900;
	}

	#helichrysum_bracteatum svg {
		position: relative;
		left: ;
		top: 0;
		width: 100%;
	}

	#helichrysum_bracteatum p {
		position: absolute;
		bottom: 3%;
		left: 5%;
	}

	#thujopsis {
		position: absolute;
		max-width: 250px;
		width: 14.88%;
		top: 0;
		left: 79.05%;
		padding-top: 36.4%;
		z-index: 900;
	}

	#thujopsis svg {
		position: relative;
		left: 24%;
		top: 0;
		width: 76%;
	}

	#thujopsis p {
		position: absolute;
		bottom: 3.8%;
		left: -3%;
	}

	#coriandrum_sativum {
		position: absolute;
		max-width: 211px;
		width: 12.56%;
		top: 0;
		left: 7%;
		padding-top: 67.5%;
		z-index: 800;
	}

	#coriandrum_sativum svg {
		position: relative;
		left: 0;
		top: 0;
		width: 100%;
	}

	#coriandrum_sativum p {
		position: absolute;
		bottom: .66%;
		right: 0%;
	}

	#chrysopogon_zizanioides {
		position: absolute;
		max-width: 459px;
		width: 28.23%;
		top: 0;
		left: 30%;
		padding-top: 57.5%;
		z-index: 850;
	}

	#chrysopogon_zizanioides svg {
		position: relative;
		left: 0%;
		top: 0;
		width: 59%;
	}

	#chrysopogon_zizanioides p {
		position: absolute;
		bottom: 5%;
		right: 0%;
	}

	#zingiber_officinale {
		position: absolute;
		max-width: 365px;
		width: 22.1%;
		top: 0;
		left: 71.5%;
		padding-top: 66.7%;
		z-index: 800;
	}

	#zingiber_officinale svg {
		position: relative;
		left: 0;
		top: 0;
		width: 59%;
	}

	#zingiber_officinale p {
		position: absolute;
		bottom: 5%;
		right: 0%;
	}

	#pelargonium {
		position: absolute;
		max-width: 236px;
		width: 14.21%;
		top: 0;
		left: 23.78%;
		padding-top: 77.58%;
		z-index: 800;
	}

	#pelargonium svg {
		position: relative;
		left: 0;
		top: 0;
		width: 95%;
	}

	#pelargonium p {
		position: absolute;
		bottom: 0%;
		right: 0%;
	}

	#bursera_graveolens {
		position: absolute;
		max-width: 321px;
		width: 19.27%;
		top: 0;
		left: 44.5%;
		padding-top: 81.58%;
		z-index: 800;
	}

	#bursera_graveolens svg {
		position: relative;
		left: 0;
		top: 0;
		width: 100%;
	}

	#bursera_graveolens p {
		position: absolute;
		bottom: 0%;
		right: 0%;
	}

	#cinnamomum_camphora {
		position: absolute;
		max-width: 411px;
		width: 27.74%;
		top: 0;
		left: 69.7%;
		padding-top: 84.55%;
		z-index: 700;
	}

	#cinnamomum_camphora svg {
		position: relative;
		left: 36%;
		top: 0;
		width: 63%;
	}

	#cinnamomum_camphora p {
		position: absolute;
		bottom: 8%;
		left: 0%;
	}

	#nordostachys_jatamansi {
		position: absolute;
		max-width: 244px;
		width: 14.69%;
		top: 0;
		left: 7.4%;
		padding-top: 101.5%;
		z-index: 700;
	}

	#nordostachys_jatamansi svg {
		position: relative;
		left: 0;
		top: 0;
		width: 100%;
	}

	#nordostachys_jatamansi p {
		position: absolute;
		bottom: 1%;
		left: 3%;
	}

	#acorus_gramineus {
		position: absolute;
		max-width: 340px;
		width: 20.4%;
		top: 0;
		left: 27%;
		padding-top: 101%;
		z-index: 700;
	}

	#acorus_gramineus svg {
		position: relative;
		left: 0;
		top: 0;
		width: 68%;
	}

	#acorus_gramineus p {
		position: absolute;
		bottom: 1%;
		right: 0%;
	}

	#pogostemon_cablin {
		position: absolute;
		max-width: 271px;
		width: 16.13%;
		top: 0;
		left: 59.8%;
		padding-top: 102%;
		z-index: 700;
	}

	#pogostemon_cablin svg {
		position: relative;
		left: 41.8%;
		top: 0;
		width: 58.2%;
	}

	#pogostemon_cablin p {
		position: absolute;
		bottom: 2%;
		left: 0%;
	}

	#commiphora_myrrha {
		position: absolute;
		max-width: 348px;
		width: 22%;
		top: 0;
		left: 16.7%;
		padding-top: 129.2%;
		z-index: 600;
	}

	#commiphora_myrrha svg {
		position: relative;
		left: 0%;
		top: 0;
		width: 100%;
	}

	#commiphora_myrrha p {
		position: absolute;
		bottom: .5%;
		left: 2%;
	}

	#cymbopogon_martinii {
		position: absolute;
		max-width: 205px;
		width: 12.34%;
		top: 0;
		left: 42.86%;
		padding-top: 125.5%;
		z-index: 600;
	}

	#cymbopogon_martinii svg {
		position: relative;
		left: 0%;
		top: 0;
		width: 100%;
	}

	#cymbopogon_martinii p {
		position: absolute;
		bottom: 0%;
		right: 5%;
	}

	#salvia_rosmarinus {
		position: absolute;
		max-width: 296px;
		width: 17.82%;
		top: 0;
		left: 58.27%;
		padding-top: 136.9%;
		z-index: 600;
	}

	#salvia_rosmarinus svg {
		position: relative;
		left: 0%;
		top: 0;
		width: 77%;
	}

	#salvia_rosmarinus p {
		position: absolute;
		bottom: -2%;
		right: 0;
	}

	#phellodendron_amurense {
		position: absolute;
		max-width: 315px;
		width: 18.96%;
		top: 0;
		left: 75.56%;
		padding-top: 120.7%;
		z-index: 602;
	}

	#phellodendron_amurense svg {
		position: relative;
		left: 0%;
		top: 0;
		width: 100%;
	}

	#phellodendron_amurense p {
		position: absolute;
		bottom: -2%;
		right: 15%;
	}

	#angelica_acutiloba {
		position: absolute;
		max-width: 276px;
		width: 16.61%;
		top: 0;
		left: 4.3%;
		padding-top: 153.5%;
		z-index: 500;
	}

	#angelica_acutiloba svg {
		position: relative;
		left: 0%;
		top: 0;
		width: 100%;
	}

	#angelica_acutiloba p {
		position: absolute;
		bottom: 0%;
		right: 0;
	}

	#cedars_atlantica {
		position: absolute;
		max-width: 362px;
		width: 21.8%;
		top: 0;
		left: 32.7%;
		padding-top: 159.1%;
		z-index: 500;
	}

	#cedars_atlantica svg {
		position: relative;
		left: 0%;
		top: 0;
		width: 100%;
	}

	#cedars_atlantica p {
		position: absolute;
		bottom: .7%;
		left: 7%;
	}

	#ocimum_basilicum {
		position: absolute;
		max-width: 394px;
		width: 23.72%;
		top: 0;
		left: 70.68%;
		padding-top: 157.9%;
		z-index: 500;
	}

	#ocimum_basilicum svg {
		position: relative;
		left: 29%;
		top: 0;
		width: 71%;
	}

	#ocimum_basilicum p {
		position: absolute;
		bottom: 3.5%;
		left: 0%;
	}

	#oryza_sativa {
		position: absolute;
		max-width: 325px;
		width: 19.56%;
		top: 0;
		left: 21%;
		padding-top: 182%;
		z-index: 400;
	}

	#oryza_sativa svg {
		position: relative;
		left: 0%;
		top: 0;
		width: 100%;
	}

	#oryza_sativa p {
		position: absolute;
		bottom: .2%;
		right: 34%;
	}

	#camellia_japonica {
		position: absolute;
		max-width: 324px;
		width: 19.51%;
		top: 0;
		left: 54.6%;
		padding-top: 180.5%;
		z-index: 400;
	}

	#camellia_japonica svg {
		position: relative;
		left: 0%;
		top: 0;
		width: 100%;
	}

	#camellia_japonica p {
		position: absolute;
		bottom: 2.5%;
		left: 3%;
	}

	#footer {
		/*choose highest padding-top and some extra px. */
		padding-top: calc(180.5% + 300px);
	}
}

.popupbox {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, .9);
	border-bottom: solid 1px #000;
	z-index: 2000;
}

.popupbox .detailscroll {
	height: 100%;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}

.exit .popupexit {
	display: block;
	width: 30px;
	/*枠の大きさ*/
	height: 30px;
	/*枠の大きさ*/
	/* background: #CCC; */
	position: relative;
	margin-left: auto;
	margin-top: 1.5em;
	margin-right: 1.5em;
	cursor: pointer;
}

.exit .popupexit::before,
.exit .popupexit::after {
	content: "";
	display: block;
	width: 100%;
	/*バツ線の長さ*/
	height: 1px;
	/*バツ線の太さ*/
	background: #000;
	transform: rotate(45deg);
	transform-origin: 0% 50%;
	position: absolute;
	top: calc(14%);
	left: 14%;
}

.exit .popupexit::after {
	transform: rotate(-45deg);
	transform-origin: 100% 50%;
	left: auto;
	right: 14%;
}

.popupbox .detailbox {
	padding: 10% 10% 135px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.popupbox .detailbox .img {
	flex-basis: 40%;
	padding: 0 10%;
	min-height: 300px;
	min-width: 300px;
}

.popupbox .detailbox .detail {
	flex-basis: 60%;
}

.popupbox .detailbox .dflex {
	display: flex;
	flex-direction: column;
}

.popupbox .detailbox .dflex div:first-child {
	padding-right: 10%;
	padding-bottom: 10%;
}

.popupbox .detailbox .detail ul {
	padding-left: 0;
	list-style-type: none;
}

@media (min-width:576px) {
	.popupbox .detailbox .dflex {
		flex-direction: row;
	}
}

@media (min-width:992px) {
	.popupbox {
		bottom: auto;
		right: auto;
		height: auto;
	}

	.popupbox .detailscroll {
		height: auto;
	}

	.popupbox .detailbox {
		padding: 85px 85px 135px;
		flex-direction: row;
	}

	.popupbox .detailbox .dflex div {
		padding: 0 5%;
	}
}