/*
 * base css 
 * pc width 1000px fixed
 */

@media (max-width: 599px) {
}

@media (min-width: 600px) and (max-width:959px) {
}

@media (min-width: 960px) {
}

@media (max-width: 480px) {
}

@media (min-width: 481px) and (max-width:767px) {
}

@media (min-width: 768px) and (max-width:959px) {
}

@media (min-width: 960px) {
}

@media (max-width: 767px) {
}

@media (min-width: 768px) {
}

/*
 * pc 1 / .651
 * sp	320-375 1 / .853
 *		(375-767 1 / .489 , 2.045 / 1)
*/

/* ---------------------------------------- common */

.headline,
section {
	line-height: 2;
}

section ul.menus > li {
	border-bottom: 1px #b0b0b0 solid;
	padding: 0 0 1em;
	margin: 0 0 .75em;
	position: relative;
}
section ul.detail li { line-height: 1.8; }
section ul.detail .feature,
section ul.detail .notes {
	padding: 0 0 0 1em;
	position: relative;
}
section ul.detail .feature::before {
	content: "\25CF";
	color: var( --orange-color );
	position: absolute;
	top: 0;
	left: 0;
}
section ul.detail .notes::before {
	content: "※";
	position: absolute;
	top: 0;
	left: 0;
}
section ul.detail > li a { text-decoration: underline; }
section ul.detail > li a:hover { color: var( --orange-color ); }

section .menus h3 {
	color: var( --orange-color );
	font-weight: 500;
	line-height: 1.6;
}

section .fixed {
	margin: 2em 0 0;
}

section .wella { margin: 1em 0 0; }
section .wella h4 {
	font-weight: 500;
	margin: 0 0 .5em;
}
section .wella h4 i {
	color: var( --orange-color );
	margin: 0 .5em 0 0;
}

@media (max-width: 767px) {

	section ul.menus h3 {
		font-size: clamp(1.6rem, -0.455rem + 7.27vw, 2rem);
	}
	section .fixed {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	section .fixed img { max-width: 90%; }
	section .fixed .illumina { margin: 0 0 2em; }

}

@media (min-width: 768px) {

	section ul.menus h3 {
		font-size: clamp(1.6rem, 0.068rem + 1.94vw, 2.4rem);
	}

	section .fixed {
		display: flex;
	}
	section .fixed .illumina { width: 59.5%; }
	section .fixed .kp { width: 40.5%; }

}