@charset "UTF-8";

/* ================================================================================
mainVisual
================================================================================ */
@media print, screen
{

#mainVisual{	padding: 0;	}
#mainVisual > .inner{	max-width: 100%;	}
#mainVisual .line
{
	padding: calc(12 * var(--u)) var(--pageP);
	background: var(--Cblue1);
}
#mainVisual p
{
	background: var(--Cblue1);

	color: white;
	font-size: var(--fz12);
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 1.5;
	text-align: center;
}
#mainVisual picture{	width: 100%;	aspect-ratio: calc(2401/1260);	}

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

#mainVisual p{	font-size: var(--fz10);	}
#mainVisual picture{	aspect-ratio: calc(781/831);	}

}

/* ================================================================================
lead
================================================================================ */
@media print, screen
{

#lead .inner{	padding: var(--u100) 0;	}

#lead h2
{
	margin: 0 0 var(--u50);

	color: white;
	font-size: var(--fz60);
	/* font-weight: 500; */
	letter-spacing: 0.1em;
	text-align: center;
	text-shadow: var(--shadow1);
}
#lead p
{
	color: white;
	font-size: var(--fz21);
	letter-spacing: 0.1em;
	line-height: 1.5;
	text-align: center;
	text-shadow: var(--shadow1);
}
#lead p:not(:last-child){	margin: 0 0 var(--u20);	}

#lead [class^="pic"]
{
	position: absolute;
	top: calc(240 * var(--u));
	width: calc(368 * var(--u));	aspect-ratio: calc(368/210);
}
#lead .pic1{	left: calc(-120 * var(--u));	}
#lead .pic2{	right: calc(-120 * var(--u));	}

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

#lead .inner{	padding: var(--u60) 0;	}
#lead h2
{
	margin: 0 0 var(--u30);
	font-size: var(--fz36);
}
#lead p
{
	font-size: var(--fz16);
	line-height: 1.8;
}
#lead p:not(:last-child){	margin: 0 0 var(--u30);	}

#lead [class^="pic"]
{
	position: static;
	width: calc(300 * var(--u));
	margin: 0 auto;
}
#lead [class^="pic"]:not(:last-child){	margin: 0 auto var(--u30);	}

}

/* ================================================================================
item
================================================================================ */
@media print, screen
{

#item .inner{	padding: var(--u50) 0;	}
#item h2
{
	margin: 0 0 var(--u70);
	color: white;
	font-size: var(--fz32);
	letter-spacing: 0.15em;
	text-align: center;
}
#item .boxes
{
	display: flex;
	gap: var(--u30);
}
#item .boxes > .box{	flex: 1;	}

#item .text1
{
	padding: calc(16 * var(--u)) 0;
	margin: 0 0 var(--u25);

	border: 2px solid white;
	border-radius: var(--u50);
}
#item .text1 h3
{
	color: white;
	font-size: var(--fz16);
	letter-spacing: 0.15em;
	text-align: center;
}

#item .text2
{
	min-height: var(--u90);
	margin: 0 0 var(--u20);
}
#item .text2 p
{
	color: white;
	font-size: var(--fz14);
	line-height: 1.8;
	letter-spacing: 0.3em;
	text-align: center;
}

#item picture
{
	width: calc(310 * var(--u));	aspect-ratio: calc(620/430);
	margin: 0 auto calc(45 * var(--u));
}

#item .text3
{
	margin: 0 0 var(--u25);
}
#item .text3 p
{
	color: white;
	font-size: var(--fz14);
	letter-spacing: 0.3em;
	text-align: center;
}

#item .text4{	margin: 0 auto var(--u10);	}
#item .text4 > a
{
	display: block;
	width: fit-content;
	padding: calc(12 * var(--u)) var(--u25);
	margin: 0 auto;

	background: white;
	border-radius: var(--u50);
}
#item .text4 p
{
	font-size: var(--fz14);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-align: center;
}

#item .text5
{
	padding: calc(10 * var(--u)) calc(20 * var(--u));
	padding: var(--u5);
	margin: var(--u20) 0 0;
}
#item .text5 p
{
	color: white;
	font-size: var(--fz14);
	line-height: 1.8;
	letter-spacing: 0.05em;
}
#item .text5 p i{	font-style: italic;	}
#item .text5 .notification
{
	color: white;
	font-size: var(--fz14);
	letter-spacing: 0.05em;
}
#item .text5 .notification th
{
	line-height: 1.8;
	vertical-align: top;
	text-align: left;
	width: 25%;
}
#item .text5 .notification td
{
	line-height: 1.8;
	width: 70%;
}
#item .text5 .notification td i{	font-style: italic;	}
#item .text5 .idt
{
	display: block;
	line-height: 1.8;
	padding-left: 1em;
	text-indent: -1em;
}

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

#item .boxes{	flex-direction: column;	}
#item .text1
{
	width: fit-content;
	padding: calc(20 * var(--u)) calc(30 * var(--u));
	margin: 0 auto var(--u30);
}
#item .text2{	min-height: auto;	}

#item .text5 .notification th{	display: block; width:100%;	}
#item .text5 .notification td{	display: block; width:100%;	}
}
/* ================================================================================
cm
================================================================================ */
@media print, screen
{

#cm .inner{	padding: var(--u40) 0 calc(150 * var(--u));	}

#cm h2
{
	margin: 0 0 var(--u70);
	color: white;
	font-size: var(--fz32);
	letter-spacing: 0.15em;
	text-align: center;
}

#cm .boxes
{
	display: flex;	justify-content: center;
	gap: var(--u30);
}
#cm .cm > .box{	flex: 1;	}

#cm h3
{
	margin: 0 0 var(--u40);
	color: white;
	font-size: var(--fz21);
	letter-spacing: 0.15em;
	text-align: center;
}

#cm .thumb
{
	width: calc(410 * var(--u));	aspect-ratio: calc(410/234);
	border-radius: var(--u30);
	overflow: hidden;
}
#cm .thumb a
{
	position: relative;
	display: block;
	width: 100%;	height: 100%;
}
#cm .thumb picture
{
	z-index: 1;
	position: absolute;
	top: 0;	left: 0;
	width: 100%;	height: 100%;
	transition: var(--T03);
}
#cm .thumb a:hover picture{	transform: scale(1.05);	}

#cm .thumb a::before
{
	z-index: 2;
	position: absolute;
	top: calc(50% - var(--u30));	left: calc(50% - var(--u30));
	content: "";
	display: block;
	width: var(--u60);	aspect-ratio: 1;
	background: url("/products/brand/probioticsyogurt/assets/img/index/movieArrow.png") no-repeat center/contain;
}

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

#cm .boxes
{
	flex-direction: column;
	gap: var(--u50);
}
#cm .thumb{	width: 100%;	}

}

#cm .boxes.sub {
	margin-top: 70px;
	column-gap: 30px;
}
#cm .boxes.sub .box {
	width: 30%;
}
#cm .boxes.sub .box h3 {
	font-size: var(--fz14);
	margin: 0 0 var(--u30);
}
#cm .boxes.sub .box .thumb {
	width: 100%;
}
@media screen and (max-width: 767px) {
	#cm .boxes.sub .box {
		width: 100%;
	}
	#cm .boxes.sub .box h3 {
		font-size: var(--fz16);
	}
}


/* ======================================== end ======================================== */