@charset "utf-8";

body {
	/*	background-color: #d6d8d4;
	color: #1a1311; */
	background-color: #ffffff;
	color: #1a1311;
}

main {
	position: relative;
}


.jf-main {
	background-image: url(/img/c/theme/rando2021/joliefille/jolie_fille.png);
}

.detail h3::before {
	background-image: url(/img/c/theme/rando2021/common/jf_icon.png);
}

img.products-jf-logo {
	max-width: 150px;
	width: 100%;
}

#product-lineup .logo {
	max-width: 120px;
	margin-bottom: 10px;
}

@media screen and (max-device-width: 480px) {

	@media screen and (max-device-width: 350px) {
		.jf-main {
			margin-bottom: 90vw;
		}

		.discript_pc .discript-txt {
			position: absolute;
			top: 100vw;
			right: 10px;
			font-size: 1.6rem;
			padding: 10px;
			line-height: 2em;
		}
	}

	@media screen and (min-width: 351px) and (max-device-width: 480px) {
		.jf-main {
			margin-bottom: 70vw;
		}

		.discript_pc .discript-txt {
			position: absolute;
			top: 100vw;
			right: 10vw;
			font-size: 1.6rem;
			padding: 10px;
			line-height: 2em;
		}
	}

	.main-logo h1 {
		position: absolute;
		top: 20px;
		left: 20px;
	}

	.main-logo h1 img {
		width: 150px;
	}


	.product-name-color dt img {
		max-width: 150px;
		width: 100vw;
	}

	.product-name-color dd.color::after {
		top: 0;
	}

	div.color-info ul {
		padding: 5px;
	}

}

@media screen and (min-width: 481px) and (max-device-width: 780px) {

	@media screen and (min-width: 481px) and (max-device-width: 610px) {
		.jf-main {
			margin-bottom: 70vw;
		}

		.discript_pc .discript-txt {
			position: absolute;
			top: 100vw;
			right: 10px;
			font-size: 1.8rem;
			padding: 10px;
			line-height: 2em;
		}
	}

	@media screen and (min-width: 611px) and (max-device-width: 780px) {
		.jf-main {
			margin-bottom: 45vw;
		}

		.discript_pc .discript-txt {
			position: absolute;
			top: 100vw;
			right: 10vw;
			font-size: 1.8rem;
			padding: 10px;
			line-height: 2em;
		}
	}

	.main-logo h1 {
		position: absolute;
		top: 25px;
		left: 25px;
	}

	.main-logo h1 img {
		width: 170px;
	}

	.product-name-color dt img {
		max-width: 150px;
		width: 100vw;
	}

	#color .color {
		margin-bottom: 30px;
	}
}

@media screen and (min-width: 781px) {

	.main-logo h1 {
		position: absolute;
		top: 30px;
		left: 90px;
	}

	.main-logo h1 img {
		width: 170px;
	}

	#color .color {
		margin-bottom: 30px;
	}

	.discript_pc {
		left: 5vw;
	}


	@media screen and (min-width: 1040px) {
		.discript_pc .discript-txt {
			position: absolute;
			top: 130px;
			left: 90px;
			font-size: 1.8rem;
		}
	}

	@media screen and (min-width: 781px) and (max-device-width: 1039px) {
		.discript_pc .discript-txt {
			position: absolute;
			bottom: 10px;
			right: 10px;
			font-size: 1.6rem;
			background-color: rgba(255, 255, 255, 0.3);
			padding: 5px;
		}

		.discript-txt p {
			line-height: 1.5em;

		}
	}

	.product-name-color dd.color::after {
		top: 125px;
	}

	.product-name-color dt img {
		max-width: 150px;
		width: 100vw;
	}

	#color .color {
		margin-bottom: 30px;
	}

}

.product-name-color dd.jf2hg::after {
	content: url(/img/c/theme/rando2022/lehtia/color-chip-jf2hg.png);
	left: 140px;
}

.product-name-color dd.jf2cb::after {
	content: url(/img/c/theme/rando2022/lehtia/color-chip-jf2cb.png);
	left: 160px;
}

.product-name-color dd.jf2cm::after {
	content: url(/img/c/theme/rando2022/lehtia/color-chip-jf2cm.png);
	left: 95px;
}

.product-name-color dd.jf2ro::after {
	content: url(/img/c/theme/rando2022/lehtia/color-chip-jf2ro.png);
	left: 95px;
}

.product-name-color dd.jf2an::after {
	content: url(/img/c/theme/rando2022/lehtia/color-chip-jf2an.png);
	left: 175px;
}

.product-name-color dd.jf2db::after {
	content: url(/img/c/theme/rando2022/lehtia/color-chip-jf2db.png);
	left: 125px;
}