@charset "UTF-8";

:root {
	--ytbPdct_butter-color: #604218;
	--ytbPdct_cheese-color: #ebc953;
	--ytbPdct_ice-color: #004673;

	--ytbKdwr_rakunou-color: #27692f;
	--ytbKdwr_butter-color: #676927;
	--ytbKdwr_omoi-color: #692727;
	--ytbKdwr_genryo-color: #42c3ff;
	--ytbKdwr_genryo-color02: #1b5f7e;
}


.block-genre-page--header {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
.block-genre-page--sub.block-readmore-contents.js-readmore-contents {
	display: none;
}


#ytbBlockHead{
	display: block;
	width: 100vw;
	margin: 0 auto 0 -20px;
	padding: 0;
}
#ytbBlockHead img{
	width: 100%;
}
#ytbBlockHead .readTxt{
	text-align: left;
	display: block;
	width: 90%;
	margin: 0 auto 0;
	padding: 0;
}

.ytbBlk *:not(h2) {
	font-family: "Shippori Mincho B1", serif;
	font-style: normal;
}

.ytbBlk {
	width: calc(100% - (1em * 2));
	margin: 4em auto 0;
}
.ytbBlk:first-of-type {
	margin-top: 0;
}


/* 商品のこだわり */
#ytbBlock_pdct ul li{
	position: relative;
	display: block;
	width: 100%;
	background: transparent;
	box-sizing: border-box;
	border: 4px solid;
	margin: 1em 0 0;
	padding: 1em;
	z-index: 0;
	overflow: hidden;
}
#ytbBlock_pdct ul li::before{
	content: "";
	position: absolute;
	place-self: center;
	inset: auto;
	top: -15px;
	display: block;
	width: calc(350px * 0.82);
	height: calc(329px * 0.82);
	background: url(/img/usr/genre/rB9/imgKdwr_bg_hkd.png) 0 0 no-repeat;
	background-size: contain;
	margin: auto;
	padding: 0;
	z-index: -1;
	opacity: 0.25;
}
#ytbBlock_pdct ul li::after{
	content: "";
	position: absolute;
	place-self: center;
	inset: 0;
	display: block;
	width: calc(100% - (0.5em * 2));
	height: calc(100% - (0.5em * 2));
	box-sizing: border-box;
	border: 1px solid;
	margin: auto;
	padding: 0;
	z-index: -1;
}
#ytbBlock_pdct ul li h3{
	font-size: calc(100vw / 16);
	font-weight: bold;
	text-shadow: 1px 1px 0 #ffffff;
	position: relative;
	display: block;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 0;
}
#ytbBlock_pdct ul li figure{
	font-size: 1em;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1em 0;
	margin: 1em 0 0;
	padding: 0;
}
#ytbBlock_pdct ul li figure img{
	width: 70vw;
}
#ytbBlock_pdct ul li figure figcaption{
	font-size: 1em;
	font-weight: bold;
	text-shadow: 1px 1px 0 #ffffff;
}

#ytbBlock_pdct ul li#ytbPdct_butter{
	color: var(--ytbPdct_butter-color);
	background-image: url(/img/usr/genre/rB9/imgKdwr01_bg.webp);
	background-repeat: no-repeat;
	background-size: auto max(100%, 900px);
	background-position: 50% 28%;
	background-color: rgba(255, 255, 255, 25%);
	background-blend-mode: overlay;
}
#ytbBlock_pdct ul li#ytbPdct_cheese{
	color: #ffffff;
	background-image: url(/img/usr/genre/rB9/imgKdwr02_bg.webp);
	background-repeat: no-repeat;
	background-size: auto max(100%, 550px);
	background-position: 50% 0%;
	background-color: rgba(0, 0, 0, 80%);
	background-blend-mode: hard-light;
	border-color: var(--ytbPdct_cheese-color);
}
#ytbBlock_pdct ul li#ytbPdct_cheese::before{
	opacity: 0.45;
}
#ytbBlock_pdct ul li#ytbPdct_cheese::after{
	border-color: var(--ytbPdct_cheese-color);
}
#ytbBlock_pdct ul li#ytbPdct_cheese h3{
	color: var(--ytbPdct_cheese-color);
	text-shadow: 1px 1px 0 #000000;
}
#ytbBlock_pdct ul li#ytbPdct_cheese figure figcaption{
	text-shadow: 1px 1px 0 #000000;
}
#ytbBlock_pdct ul li#ytbPdct_ice{
	color: var(--ytbPdct_ice-color);
	background-image: url(/img/usr/genre/rB9/imgKdwr03_bg.webp);
	background-repeat: no-repeat;
	background-size: auto max(100%, 700px);
	background-position: 55% 38%;
	background-color: rgba(255, 255, 255, 50%);
	background-blend-mode: overlay;
}
#ytbBlock_pdct ul li#ytbPdct_ice h3{
	font-size: calc(100vw / 17);
}

/* よつ葉のこだわり */
#ytbBlock_kdwr > ul{
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1em 1em;
	margin: 1em auto 0;
	padding: 0;
}
#ytbBlock_kdwr > ul > li{
	display: flex;
	width: 100%;
	flex-direction: column;
	flex-wrap: wrap;
	align-items: flex-start;
	box-sizing: border-box;
	border: 4px solid;
	border-radius: 14px;
	background: url(/img/usr/genre/rB9/imgYtb_bg.webp) no-repeat;
	background-size: auto max(100%, 420px);
	background-position: center 35%;
	background-color: #000000;
	background-blend-mode: luminosity;
	margin: 0;
	padding: 1em;
}
#ytbBlock_kdwr > ul > li h3{
	color: #ffffff;
	font-size: calc(100vw / 20);
	font-weight: bold;
	text-shadow: 1px 1px 0 #000000;
	width: 100%;
	margin: 0;
	padding: 0;
}
#ytbBlock_kdwr > ul > li > div{
	display: block;
	width: 100%;
	flex-grow: 1;
	box-sizing: border-box;
	border-radius: 8px;
	background: rgba(255, 255, 255, 85%);
	margin: 1em auto 0;
	padding: 0.5em;
	box-shadow: inset 4px 4px 8px rgba(0, 0, 0, 30%);
}
#ytbBlock_kdwr > ul > li > div{
	font-size: 0.95em;
}
#ytbBlock_kdwr > ul > li > div .notes{
	font-size: 0.6em;
	margin: 1em 0 0;
}
#ytbBlock_kdwr > ul > li > div small{
	font-size: 0.5em;
	vertical-align: text-top;
}

#ytbBlock_kdwr > ul > li#ytbKdwr_rakunou{
	background-color: var(--ytbKdwr_rakunou-color);
	border-color: var(--ytbKdwr_rakunou-color);
}
#ytbBlock_kdwr > ul > li#ytbKdwr_rakunou h3{
	text-shadow: 1px 1px 0 var(--ytbKdwr_rakunou-color);
}
#ytbBlock_kdwr > ul > li#ytbKdwr_butter{
	background-color: var(--ytbKdwr_butter-color);
	border-color: var(--ytbKdwr_butter-color);
}
#ytbBlock_kdwr > ul > li#ytbKdwr_butter h3{
	font-size: calc(100vw / 23);
	text-shadow: 1px 1px 0 var(--ytbKdwr_butter-color);
}
#ytbBlock_kdwr > ul > li#ytbKdwr_omoi{
	background-color: var(--ytbKdwr_omoi-color);
	border-color: var(--ytbKdwr_omoi-color);
}
#ytbBlock_kdwr > ul > li#ytbKdwr_omoi h3{
	text-shadow: 1px 1px 0 var(--ytbKdwr_omoi-color);
}
#ytbBlock_kdwr > ul > li#ytbKdwr_omoi #ytbKdwr_omoiEmps{
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: 0 0 1em;
	padding: 0;
}
#ytbBlock_kdwr > ul > li#ytbKdwr_omoi #ytbKdwr_omoiEmps li{
	color: #ffffff;
	font-size: calc(100vw / 29);
	text-align: left;
	display: block;
	width: 100%;
	box-sizing: border-box;
	background-color: #ff3833;
	border-radius: 6px;
	margin: 1em auto 0;
	padding: 0.5em;
}
#ytbBlock_kdwr > ul > li#ytbKdwr_omoi #ytbKdwr_omoiEmps li br{
	display: none;
}
#ytbBlock_kdwr > ul > li#ytbKdwr_genryo{
	background-color: var(--ytbKdwr_genryo-color);
	border-color: var(--ytbKdwr_genryo-color02);
}
#ytbBlock_kdwr > ul > li#ytbKdwr_genryo h3{
	text-shadow: 1px 1px 0 var(--ytbKdwr_genryo-color02);
}
#ytbBlock_kdwr > ul > li#ytbKdwr_genryo #ytbKdwr_genryoEmps{
	position: relative;
	display: flex;
	width: 100%;
	justify-content: space-between;
	margin: 1em 0 0;
	z-index: 0;
}
#ytbBlock_kdwr > ul > li#ytbKdwr_genryo #ytbKdwr_genryoEmps::after{
	content: "";
	position: absolute;
	place-self: center;
	inset: 0;
	display: block;
	width: 30px;
	height: 30px;
	box-sizing: border-box;
	background-color: var(--ytbKdwr_genryo-color02);
	margin: auto;
	padding: 0;
	clip-path: polygon(40% 0, 60% 0, 60% 40%, 100% 40%, 100% 60%, 60% 60%, 60% 100%, 40% 100%, 40% 60%, 0% 60%, 0% 40%, 40% 40%);
	transform: rotate(45deg);
	z-index: 1;
}
#ytbBlock_kdwr > ul > li#ytbKdwr_genryo #ytbKdwr_genryoEmps li{
	color: #ffffff;
	font-size: calc(((100vw - ((1rem + 1rem + 0.5rem + 4px) * 2) - 12px) / 2) / 12);
	text-align: center;
	display: block;
	width: calc((100vw - ((1rem + 1rem + 0.5rem + 4px) * 2) - 12px) / 2);
	height: calc((100vw - ((1rem + 1rem + 0.5rem + 4px) * 2) - 12px) / 2);
	background-color: #42c3ff;
	border-radius: 100px;
	margin: 0;
	padding: 2em;
}
#ytbBlock_kdwr > ul > li#ytbKdwr_genryo #ytbKdwr_genryoEmps li:first-of-type{
	font-size: calc(((100vw - ((1rem + 1rem + 0.5rem + 4px) * 2) - 12px) / 2) / 14);
	padding: 2.75em 1.75em;
}
#ytbBlock_kdwr > ul > li#ytbKdwr_genryo #ytbKdwr_genryoEmps li:first-of-type em{
	display: block;
	font-size: 2.5em;
	font-weight: bold;
}

/* 画面サイズが768pxからはここを読み込む */
@media screen and (min-width:768px) {
	#ytbBlockHead{
		width: 100%;
		margin: auto;
	}
	#ytbBlockHead .readTxt{
		width: 92%;
	}


	.ytbBlk {
		width: 100%;
	}


	/* 商品のこだわり */
	#ytbBlock_pdct ul li::before{
		top: -45px;
		left: -5px;
		width: calc(350px * 0.9);
		height: calc(329px * 0.9);
	}
	#ytbBlock_pdct ul li h3{
		font-size: 1.65em;
	}
	#ytbBlock_pdct ul li figure{
		font-size: 1.15em;
		flex-direction: row;
		gap: 0 1em;
		margin: 0.5em 0 0;
	}
	#ytbBlock_pdct ul li figure img{
		width: 30%;
	}
	#ytbBlock_pdct ul li figure figcaption{
		font-size: 0.9em;
	}

	#ytbBlock_pdct ul li#ytbPdct_butter{
		background-size: max(100%, 1300px);
		background-position: 52% 31%;
	}
	#ytbBlock_pdct ul li#ytbPdct_cheese{
		background-size: max(100%, 900px);
		background-position: 50% 72%;
	}
	#ytbBlock_pdct ul li#ytbPdct_ice{
		background-size: max(100%, 1050px);
		background-position: 50% 50%;
	}
	#ytbBlock_pdct ul li#ytbPdct_ice h3{
		font-size: 1.65em;
	}


	/* よつ葉のこだわり */
	#ytbBlock_kdwr > ul{
		flex-direction: row;
	}
	#ytbBlock_kdwr > ul > li{
		width: calc((100% - 1em) / 2);
	}
	#ytbBlock_kdwr > ul > li h3{
		font-size: 1.5em;
	}
	#ytbBlock_kdwr > ul > li#ytbKdwr_butter h3{
	font-size: 1.4em;
	}
	#ytbBlock_kdwr > ul > li > div .notes{
		font-size: 0.7em;
	}
	#ytbBlock_kdwr > ul > li#ytbKdwr_omoi #ytbKdwr_omoiEmps{
		display: flex;
		gap: 0 0.5em;
	}
	#ytbBlock_kdwr > ul > li#ytbKdwr_omoi #ytbKdwr_omoiEmps li{
		font-size: 0.85em;
		text-align: center;
		padding: 0.5em 0.4em;
	}
	#ytbBlock_kdwr > ul > li#ytbKdwr_omoi #ytbKdwr_omoiEmps li:not(:first-of-type){
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
	}
	#ytbBlock_kdwr > ul > li#ytbKdwr_omoi #ytbKdwr_omoiEmps li br{
		display: block;
	}
	#ytbBlock_kdwr > ul > li#ytbKdwr_genryo #ytbKdwr_genryoEmps li{
		font-size: 1em;
		width: calc((100% - 8px) / 2);
		height: auto;
		min-height: 11rem;
		padding: 2em 1.85em;
	}
	#ytbBlock_kdwr > ul > li#ytbKdwr_genryo #ytbKdwr_genryoEmps li:first-of-type{
		font-size: 0.85em;
		padding: 2.5em 1.5em;
	}
}