@charset "utf-8";
/* CSS Document */
/*------------------------------------------------ */
/* parts
-------------------------------------------------- */
main h2::after { background:#e72c63;}
main h3 span { color: #c49125 !important;}

/* product / kv
-------------------------------------------------- */
@media (min-width: 768px) {
/* PC用 */
	.kv--area.is-pc {
		background:#e72c63;
	}
	.kv--area .inner { 
		margin-top:-6.9em;
		padding-bottom: 1em;
	}
	.produst--name .pro--img { width:510px;}
}
@media (max-width: 767px) {
/* SP用 */
}

/* product / lineup
-------------------------------------------------- */
.btn--proBuy ul { background:#c49125;}
.btn--proBuy ul::before { border-bottom-color: #c49125;}

.products--main .lineup { padding-bottom: 5em;}

.ul--lineup01 li .name { margin-top:0;}
.ul--lineup01 li .btn--proBuy span { background:#c49125;}

@media (min-width: 768px) {	
	.lineup .inner {
		max-width:1136px;
	}
	.ul--lineup01 {}
	.ul--lineup01 > li { width:25%; max-width: 300px;}
	/*.ul--lineup01 > li:nth-child(1) { margin-left: 20%; margin-bottom: 50px;} 
	.ul--lineup01 > li:nth-child(2) { margin-right: 20%;}*/
	
	.ul--lineup01 li .btn--proBuy span { margin: 0 6.75%;}
}
@media (max-width: 767px) {
/* SP用 */	
	
	
	/*.ul--lineup01 > li:nth-child(odd) { margin-left: -10%;}
	.ul--lineup01 > li:nth-child(even) { margin-left: 0;}
	.ul--lineup01 > li:nth-child(1) { margin-left: 1.5%;}*/
	
	.ul--lineup01 li:nth-child(1) { }
}


/* product / feature + howto
-------------------------------------------------- */
.products--main .feature { background: #f7efd5;}
.feature--fx .txt {}
.feature01--01 { margin:2em 0;}

.feature11 {
	width:min(100%, 1040px);
	margin:0 auto; padding: 70px 25px 65px;
	text-align: center;
	background: #fff;
}
.feature11 .img--h02 { width:min(88%, 818px); margin:35px auto 15px;}
.feature11--01 { 
	display: flex; justify-content: center;
	width:min(100%, 872px); 
	margin:35px auto 15px;
}
.feature11--01 img { width:auto; height: 147px;}
.feature11 h4 {
	margin-bottom: 14px;
	font-size:min(4.0vw, 22px); font-weight: bold;
	text-align: center; color: #c49125;
}
.products--main .feature11 .allergy {
	padding:1.3em 2.0em; margin: 0 66px;
	font-size:min(3.2vw, 17px); font-weight: bold; letter-spacing: .08em; line-height: 1.6; text-align: left;
	border: 1px solid #c49125;
}

@media (min-width: 768px) {
/* PC用 */
	.products--main .feature { padding-bottom: 15em;}
	
	.feature--fx { flex-direction: row; gap:0px;}
	.feature--fx.feature02 { flex-direction: row-reverse;}
	
	.products--main .feature--fx .photo { 
		display: block;
		width:clamp(500px, 80%, 600px);
	}
	.products--main .feature--fx.feature01 .photo { transform: translate(-10%, -30%);}
	.products--main .feature--fx.feature02 .photo { transform: translate(14%, -37%);}
	.products--main .feature--fx.feature03 .photo { transform: translate(-10%, -30%);}
	
	.products--main .feature--fx .txt { width:42%;}
	
	.feature01 { margin-top:18.4em;}
	.feature--fx::before {
		content: '';
		position:absolute;
		top:-6em;
		width:100%;
		background: #fff;
		z-index: 0;
	}

	.products--main .feature01 .txt { padding-top:1em;}
	.feature01::before {
		height:45em;
		left:15%;	
		top:-4em;
		z-index: 0;	
	}
	
	.feature02 { margin-top:22.4em;}
	.feature02::before {
		height:31em;
		left:-15%;
		top:-5em;
		z-index: 0;
	}
	
	.products--main .feature03 .txt { padding-top:3em;}
	.feature03 { margin-top:16.4em;}
	.feature03::before {
		height:36.5em;
		right:-15%;
		z-index: 0;
		
		top:-1em;
	}
	
	.howto01.feature--fx { width:min(88%,1000px); margin:0 auto;}
	.howto01.feature--fx .txt { width:48.8%;}
	.howto01 .feature01--01 { margin-top:0;}
	.howto .img--h01 {
		max-width:1080px;
		transform: translateX(-15%);
		margin-bottom: 6em;
	}
	.howto .feature--fx {
		justify-content: space-between;
		flex-direction: row;
	}
	.howto .feature--fx .txt { margin-bottom:4em;}
	.howto .img--h02 { max-width:848px; margin:0 auto;}
}
@media (min-width: 1201px) {
	.products--main .feature01 h3,
	.products--main .feature02 p { white-space: nowrap;}
}
@media (max-width: 1200px) {
/* SP用 */
	.products--main .feature01 h3 br,
	.products--main .feature01 p br,
	.products--main .feature02 p br { display: none;}
}
@media (max-width: 767px) {
/* SP用 */
	.feature--fx::before {
		top:8em !important;
		width:calc(100% - 5.33333%);
		left: 5.33333%;
	}	
/*	.feature01::before { height:55.3em;}
	.feature02::before { height:56em; left:0; right:5.3333%;}
	.feature03::before { height:59.3em;}*/
	
	.products--main .feature01 .txt { padding:56.5% 5.33333% 2em}
	.products--main .feature02 .txt { padding:55% 5.33333% 2em}
	.products--main .feature03 .txt { padding:55.5% 5.33333% 2em}
	
	.feature11 {
		width:min(89.4%, 880px);
		margin:0 auto 50px; padding: 50px 5% 40px;
		text-align: center;
		background: #fff;
	}
	
	.products--main .howto { padding-bottom:10em;}
	.products--main .howto .feature--fx { margin-bottom: 3.6em;}
	.img--h01 { margin:0 0 3em 5.3333%;}
	.img--h02 { margin:0 5.3333%;}
	
	.feature11--01 { flex-direction: column; justify-content: center;}
	.feature11--01 img { max-width: none; width:auto; height:88px; aspect-ratio: 1 / 1; object-fit: contain;}
	.products--main .feature11 .allergy { margin:0 auto; padding: 0.7em 1em;}
}

.howto .txt p {
	font-size: 1.5em;
    font-weight: 500;
    line-height: 1.86;
}
.img--h01 { display: none;}

/* products / disc
-------------------------------------------------- */

@media (min-width: 768px) {
/* PC用 */
	.disc--ttl .name {
		width: 65.9%;
		margin: 0 6% 0 2.4%;
	}
	.raw--icons { margin:-9.5em 0 1.3em;}
}
@media (max-width: 767px) {
/* SP用 */
	.disc--ttl .name { margin: 0px 15.9% 3em;}
}



/* 
-------------------------------------------------- */
@media (min-width: 768px) {
/* PC用 */
}
@media (max-width: 767px) {
/* SP用 */
}



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

@media (min-width: 768px) {
/* PC用 */
}
@media (max-width: 767px) {
/* SP用 */
}