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

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

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

.ul--lineup01 li.collargen .name { color: #489fdf; white-space: nowrap;}

.ul--lineup01 .name { margin-top: 0;}

.ul--lineup01 li .btn--proBuy span { background:#489fdf;}
@media (min-width: 768px) {	
	.lineup .inner {
		max-width:1136px;
	}
	.ul--lineup01 {}
	.ul--lineup01 > li { width:30%; 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: #edf8fd;}
@media (min-width: 768px) {
/* PC用 */
	.products--main .feature { padding-bottom: 24em;}
	
	.feature01 { margin-top:14.4em;}
	.feature--fx::before {
		content: '';
		position:absolute;
		top:-6em;
		width:100%;
		background: #fff;
	}
	.feature01--01 { margin-top: 20px;}
	
	.products--main .feature01 .txt { padding-top:4em;}
	.feature01::before {
		height:40.5em;
		left:15%;
		z-index: 1;
		
		top:-3em;
	}
	.feature01::after {
		content:'';
		position: absolute;
		left:-10%;
		top:-6em;
		width:600px;
		height:360px;
		background:url("../../img/products/collagen_02/img_01.jpg") right center no-repeat;
		background-size:100% auto;
		z-index:2;
	}
	
	.feature02 { margin-top:23.4em;}
	.feature02::before {
		height:46.8em;
		left:-15%;
		z-index: 1;
		top:-5em;
	}
	.feature02::after {
		content:'';
		position: absolute;
		right:-10%;
		top:0;
		width:600px;
		height:360px;
		background:url("../../img/products/collagen_02/img_02.jpg") right center no-repeat;
		background-size:100% auto;
		z-index:2;
	}
	.products--main .feature02 .txt { padding-top:2em;}
	.feature02 .feature01--01 { margin-right: 27%;}
	
	.products--main .feature03 .txt { padding-top:3em;}
	.feature03 { margin-top:30.4em;}
	.feature03::before {
		height:46.8em;
		right:-15%;
		z-index: 1;
		top: -10.5em;
	}
	.feature03::after {
		content:'';
		position: absolute;
		left:-10%;
		top:-6em;
		width:600px;
		height:380px;
		background:url("../../img/products/collagen_02/img_03.jpg") right center no-repeat;
		background-size:100% auto;
		z-index: 2;
	}
	
	.howto01 .feature01--01 { margin-top:0;}
	.howto .img--h01 {
		max-width:748px;
		/*transform: translateX(-15%);*/
		margin: 0 auto 2.8em;
	}
	.howto .feature--fx {
		justify-content: space-between;
		flex-direction: row;
	}
	.howto .feature--fx .txt { margin-bottom:4em;}
	.howto .img--h02 { max-width:848px; margin:2.8em auto 0;}
}

.howto { background: #edf8fd;}
.howto--txt,
.howto .txt p {
	font-size: 1.5em;
    font-weight: 500;
    line-height: 1.86;
	text-align: center;
}
@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}
	.feature02 .feature01--01 { margin:2em 10% 2em 15%;}
	
	.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 5.3333% 3em;}
	.img--h02 { margin:0 5.3333%;}
}


/* products / check
-------------------------------------------------- */
.products--main .check { background:#fff;}
.products--main .check--inner {
	padding:6.5em 0 9.5em;
	background: url("../../img/products/collagen_02/bg_check.png") center bottom no-repeat;
}
.products--main .check--inner h2 { color:#fff;}
.products--main .check--inner h2::after { background-color: #fff;}

.ul--pro--check li { padding-left: 2.7em; display: flex; align-items: center;}


/* products / disc
-------------------------------------------------- */
.ex .ex--ttl { background: #489fdf;}
.ex--wrapper .ex,
.ex--txt--inner:first-of-type { border-color:#489fdf; }

.ex--txt--inner dl { padding: 0.7em 2em 0.8em}

.ex--raw--wrapper .ex:nth-child(1) .ex--txt { padding: 0;}

@media (min-width: 768px) {
/* PC用 */
	.ex--raw--wrapper { width: 53.365384%;}
	
	.ex:nth-child(2),
	.ex--raw--wrapper .ex:nth-child(1) { width:100%;}	
	.ex--raw--wrapper .ex:nth-child(1) { margin-bottom: 2em;}
	
	.disc--ttl { margin: 0px 16% 3em;}
	.disc--ttl .name {
		width: 139%;
		margin: 0 6% 0 2.4%;
	}
	.raw--icons { margin:-9.5em 0 1.3em;}
}
@media (max-width: 767px) {
/* SP用 */
	.disc--ttl .name { margin: 0px 0 4.5em;}
	.disc--ttl .photo { margin:0 28% 4em;}
	
	.ex--txt--inner dl { padding: 0.7em 0.5em 0.8em}
	.ex--txt--inner dl dt { width:63%;}
	.ex--txt--inner dl dd { width:32%;}
}



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

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



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

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