@charset "utf-8";
/* CSS Document */
/*------------------------------------------------ */
/* parts
-------------------------------------------------- */
main h2::after { background:#e72c63;}
main h3 span { color: #efbb28 !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:#efbb28;}
.btn--proBuy ul::before { border-bottom-color: #efbb28;}

.products--main .lineup { padding-bottom: 5em;}
.ul--lineup01 li .btn--proBuy span { background:#efbb28;}
@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 .name { margin-top:0;}
	
	/*.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: #fcf6cc;}
.feature--fx .txt {}
.feature01--01 { margin:2em 0;}

@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(10%, -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:35.5em;
		left:15%;	
		top:-4em;
		z-index: 0;	
	}
	
	.feature02 { margin-top:16.4em;}
	.feature02::before {
		height:38.8em;
		left:-15%;
		top:-5em;
		z-index: 0;
	}
	
	.products--main .feature03 .txt { padding-top:3em;}
	.feature03 { margin-top:16.4em;}
	.feature03::before {
		height:37.5em;
		right:-15%;
		z-index: 0;
		
		top:-1.8em;
	}
	
	.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 (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}
	
	.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%;}
}

.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用 */
}