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

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

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

.ul--lineup01 .name { margin-top:-0.3em;}
.ul--lineup01 li.mixberry .name { color: #e72c63}
.ul--lineup01 li.choco .name { color: #8b3107}
.ul--lineup01 li.yog .name { color: #009fca}
/*.ul--lineup01 li:nth-child(4) .name { color: #f39e13}*/
/*.ul--lineup01 li:nth-child(2) .name { color: #33aa34}*/
.ul--lineup01 li.blueberry .name { color: #553588;}
.ul--lineup01 li.cafe .name { color: #a67c49;}


.ul--lineup01 li .btn--proBuy span { background:#1d2088;}

@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 / threeFree 
-------------------------------------------------- */
.products--main .feature,
.howto { background: #e2eaf1;}

.feature--fx .txt {}
.feature01--01 { margin:1.6em 0 1em;}

.threeFree {}
.three--inner { max-width:880px; margin:15em auto 0; padding: 5.5em; background: #fff;}
.three--inner .ttl { margin-bottom: 1em; font-size:min(3.6vw, 3.6em); text-align: center; font-weight: bold;}
.three--inner .img { max-width:601px; margin:0 auto;}


.howto .ul--howto { margin-top: 2.8em;}
.howto .ul--howto li {
	position: relative;
	padding-left: 1em;
	font-size:15px; line-height: 1.6;
}
.howto .ul--howto li::before {
	content:'';
	position: absolute; left: 0; top:7px;
	width:10px; height:10px; border-radius: 10px; background: #1d2088;
} 

@media (min-width: 768px) {
/* PC用 */
	.products--main .feature { padding-bottom: 15em;}
	
	.feature01 { margin-top:14.4em;}
	.feature--fx::before {
		content: '';
		position:absolute;
		top:-6em;
		width:100%;
		background: #fff;
	}
	
	.products--main .feature01 .txt { padding-top:1.5em;}
	.feature01::before {
		height:50.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/high-absorption/img_01.jpg") right center no-repeat;
		background-size:100% auto;
		z-index:2;
	}
	
	.feature02 { margin-top:14.4em;}
	.products--main .feature02 .txt { padding-top:1.5em;}
	.feature02::before {
		height:45.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/high-absorption/img_02.jpg") right center no-repeat;
		background-size:100% auto;
		z-index:2;
	}
	
	.howto--wrapper { display: flex; justify-content: space-between;}
	.howto--wrapper .howto01 { display: block; max-width:490px;}
	
	.howto01 .feature01--01 { margin-top:0;}
	.howto .img--h01 {
		position: relative;
		width:min(100%,660px);
		margin-left: -11%;
        transform: translateX(-10%);
	}
	
	.howto .feature--fx {
		justify-content: space-between;
		flex-direction: row;
	}
	.howto .feature--fx .txt { margin-bottom:1.8em;}
	.howto .img--h02 { max-width:848px; margin:0 auto;}
}
.howto .txt p {
	font-size: 1.5em;
    font-weight: 500;
    line-height: 1.86;
}
@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:2em;}
	.products--main .howto .feature--fx { margin-bottom: 3.6em;}
	.img--h01 { margin:0 0 3em 5.3333%;}
	.img--h02 { margin:0 5.3333%;}
	
	.three--inner { margin:18% 5.3333% 25%;}
	
	.howto .ul--howto { padding: 0 5.33333% 2em;}
	.howto .ul--howto li {
		font-size: 1.5em;
		font-weight: 500;
		line-height: 1.86;
	}
	
}

/* products / check
-------------------------------------------------- */
.products--main .check { background:#fff;}
.products--main .check--inner {
	padding:6.5em 0 9.5em;
	background: url("../../img/products/high-absorption/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: #1d2088;}
.ex--wrapper .ex,
.ex--txt--inner:first-of-type { border-color:#1d2088;}

.ex--txt--inner dl dt,
.products--main .disc .raw--ann { color: #8b3107;}

@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 7% 3em;}
}



/* global
-------------------------------------------------- */
.global { background-image: linear-gradient(#ffffff, #fdeff3);}

.global--ttl {
	position: relative;
	width:min(663px, 100%); margin:0 auto 2.1em; padding: .8em .8em;
	font-size:24px; font-weight: bold; color: #fff; text-align: center;
	background: #e72c63;
}
.global--ttl::after {
	content:'';
	position: absolute; left: 50%; bottom:-14px; transform:translateX(-50%);
	border-top:14px solid #e72c63;
	border-left: 14px solid hsla(0,0%,0%,0.00);
	border-right: 14px solid hsla(0,0%,0%,0.00);
}

.grobal01 .ttl {
	position: relative; z-index: 11;
	margin-bottom: 1.4em;
	text-align: center; font-size:min(5.9vw, 30px); font-weight: 900; letter-spacing: .06em;}
.grobal01 .ttl span { display: inline-block; position: relative; color: #1d2088;}


.grobal01 .name { 
	margin-bottom: .8em; padding: .8em 0; 
	font-size:min(4.1vw, 22px); font-weight: 900; line-height: 1.25; border-bottom:1px solid #cccccc;}
.grobal01 .name span { display: block; font-size:14px; font-weight: normal;}
.grobal01 .tag span { padding:.3em 0.4em; font-size:12px; font-weight: bold; color: #fff; background:#1d2088; }
.sholder { margin:.7em 0; font-size:min(3vw, 16px); font-weight: bold; color: #1d2088;}

.ul--global li p { font-size:min(5vw, 14px); line-height: 1.714; line-break: strict; overflow-wrap: anywhere;}

/* amb */
.grobal01.amb .ttl span,
.grobal01.amb .sholder { color: #e72c63;}
.grobal01.amb .ttl span::after, 
.grobal01.amb .tag span { background: #e72c63}

@media (min-width: 768px) {
/* PC用 */
	.global { padding: 10em 0;}
	.grobal--wrapper { 
		display: flex; justify-content: space-between;
		max-width: 1176px; margin: 0 auto;
	}
	.grobal--wrapper .grobal01 { width:48.129%;}
	
	.ul--global { display: flex; justify-content: space-between; flex-wrap: wrap;}
	.ul--global li { width:46.9%;}
	
	.grobal01 .ttl span::after {
		content:'';
		position: absolute; left: 50%; bottom:-4px; transform: translateX(-50%);
		width:100%; height: 4px;
		background: #1d2088;
	}
}
@media (max-width: 767px) {
/* SP用 */
	.global { padding:12% 5.3333% 15%; }
	.global--ttl { margin: 0 0 1.5em; font-size:5.35vw;}
	.global--ttl::after {
		content:'';
		position: absolute; left: 50%; bottom:-11px; transform:translateX(-50%);
		border-top:14px solid #e72c63;
		border-left: 14px solid hsla(0,0%,0%,0.00);
		border-right: 14px solid hsla(0,0%,0%,0.00);
	}
	.grobal--wrapper {}
	
	.grobal01 .ttl { margin-bottom:-0.8em;}
	
	.ul--global {
		position: relative;
		padding:12.6% 4.3% 8.6%;
		border:2px solid #1d2088;
	}
	.ul--global::before {
		content:'';
		position: absolute;
		left: 50%; top:-5px; transform: translateX(-50%);
		width:76%; height:10px; background: #fdeff3;
	}
	
	.ul--global li:nth-child(2) { margin-top: 8%; padding-top:8%; border-top:1px solid #cccccc;}
	.ul--global .photo { float: left; width:42%; margin-right:5%; margin-bottom: 1.2em;
		 aspect-ratio: 1 / 1;
	}
	.photo img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.grobal01 .name { margin-bottom: 0; float: right; width:53%; line-height: 1.35; border: none;}
	.ul--global li p { clear: both;}
	
	/* amb */
	.grobal01.amb { margin-top: 10%;}
	.grobal01.amb .ul--global { border:2px solid #e72c63;}
	
}



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

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


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

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


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

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