/* Bread / Sweets pages 2026
   Existing product data and markup are intentionally preserved. */

#product.product-modern {
	--pm-ink: #292a25;
	--pm-green: #435d4d;
	--pm-red: #a64736;
	--pm-cream: #f5f0e6;
	--pm-line: #ded8cd;
	color: var(--pm-ink);
	background: #fff !important;
	font-family: "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
}
#product.product-modern *,
#product.product-modern *::before,
#product.product-modern *::after {
	box-sizing: border-box;
}
#product.product-modern img {
	max-width: 100%;
}

/* Page title */
#product.product-modern #sec1 {
	display: none;
}
#product.product-modern #sec1 header {
	width: min(1120px, 100%);
	margin: 0 auto;
	padding: 0;
	text-align: center;
}
#product.product-modern #sec1 .title-en {
	margin: 0 0 8px;
	color: var(--pm-red);
	font: 700 12px/1.4 "Courier Prime", monospace;
	letter-spacing: .2em;
}
#product.product-modern #sec1 .title-jp {
	margin: 0;
	font: 600 clamp(30px, 4vw, 48px)/1.35 "Noto Serif JP", serif;
	letter-spacing: .08em;
}

/* Category introduction */
#product.product-modern #sec2 {
	padding: 0 0 110px;
	background: #fff;
}
#product.product-modern #sec2 > header {
	margin: 0 0 76px;
	padding: 72px 32px 68px;
	text-align: center;
	background: var(--pm-cream);
}
#product.product-modern #sec2 > header .title-en {
	margin: 0 0 8px;
	color: var(--pm-red);
	font: 700 12px/1.4 "Courier Prime", monospace;
	letter-spacing: .2em;
}
#product.product-modern #sec2 > header .title-jp {
	margin: 0;
	color: var(--pm-ink);
	font: 600 clamp(32px, 4vw, 48px)/1.35 "Noto Serif JP", serif;
	letter-spacing: .08em;
}
#product.product-modern #sec2 > header > p {
	max-width: 720px;
	margin: 24px auto 0;
	color: #66635c;
	font-size: 13px;
	line-height: 2;
}

/* Product category */
#product.product-modern #sec2 > .items {
	width: min(1120px, calc(100% - 64px));
	margin: 0 auto 92px;
	padding: 0;
}
#product.product-modern #sec2 > .items:last-of-type {
	margin-bottom: 0;
}
#product.product-modern #sec2 > .items > h4 {
	margin: 0 0 34px;
	padding: 18px 23px 19px;
	color: var(--pm-ink);
	border: 0;
	border-left: 4px solid var(--pm-red);
	background: var(--pm-cream);
	font: 600 25px/1.45 "Noto Serif JP", serif;
	text-align: left;
	letter-spacing: .06em;
}
#product.product-modern #sec2 > .items > h4 span {
	display: inline-block;
	padding: 0;
	background: transparent;
}
#product.product-modern #sec2 > .items > h4 span::before { content: none; display: none; }
#product.product-modern #sec2 > .items > .center,
#product.product-modern #sec2 > .items > p.center {
	max-width: 760px;
	margin: -14px 0 30px;
	color: #6c6962;
	font-size: 13px;
	line-height: 1.9;
	text-align: left;
}

/* Product grid */
#product.product-modern #sec2 > .items > .flex {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	width: 100%;
	margin: 0;
	padding: 0;
	gap: 24px;
	align-items: stretch;
	justify-content: stretch;
}
#product.product-modern #sec2 .item {
	display: flex;
	width: auto;
	min-width: 0;
	margin: 0;
	padding: 0 0 27px;
	flex-direction: column;
	border: 1px solid var(--pm-line);
	background: #fff;
	text-align: left;
}
#product.product-modern #sec2 .item figure {
	position: relative;
	width: 100%;
	height: 310px;
	margin: 0 0 23px;
	padding: 0;
	display: grid;
	place-items: center;
	overflow: hidden;
	background: #faf9f6;
}
#product.product-modern #sec2 .item figure img,
#product.product-modern #sec2 .item figure img.size-l,
#product.product-modern #sec2 .item figure img.size-2 {
	width: 90%;
	max-width: 90%;
	height: 90%;
	max-height: 90%;
	margin: 0;
	object-fit: contain;
}
#product.product-modern #sec2 .item h5 {
	margin: 0;
	padding: 0 23px;
	color: var(--pm-ink);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.65;
}
#product.product-modern #sec2 .item > p {
	margin: 11px 0 0;
	padding: 0 23px;
	color: #6a6760;
	font-size: 12px;
	line-height: 1.85;
}
#product.product-modern #sec2 .item > h5 + p {
	color: var(--pm-red);
	font-size: 11px;
	font-weight: 700;
}
#product.product-modern #sec2 .item .item-shop-link {
	display: inline-flex;
	margin: auto 23px 0;
	padding: 19px 0 3px;
	align-items: center;
	align-self: flex-start;
	gap: 8px;
	color: var(--pm-green);
	border-bottom: 1px solid currentColor;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.5;
	text-decoration: none;
	transition: color .2s ease, gap .2s ease;
}
#product.product-modern #sec2 .item .item-shop-link:hover {
	gap: 12px;
	color: var(--pm-red);
}

/* Notes below categories */
#product.product-modern #sec2 .seibun {
	margin: 28px 0 0;
	padding: 18px 21px;
	color: #6c685f;
	background: var(--pm-cream);
	font-size: 11px;
	line-height: 1.8;
}
#product.product-modern #sec2 .factory {
	width: 100%;
	margin: 14px 0 0;
	padding: 21px 24px;
	border: 1px solid var(--pm-line);
}
#product.product-modern #sec2 .factory p {
	margin: 0;
	color: #6c685f;
	font-size: 11px;
	line-height: 1.9;
}
#product.product-modern #sec2 .btn-speciality {
	margin: 28px 0 0;
	text-align: center;
}
#product.product-modern #sec2 .btn-speciality a {
	display: inline-block;
	min-width: 270px;
	padding: 15px 25px;
	color: #fff;
	background: var(--pm-green);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}

/* Prevent old decorative product images from covering content */
#product.product-modern #sec1::before,
#product.product-modern #sec1::after,
#product.product-modern #sec2::before,
#product.product-modern #sec2::after {
	content: none !important;
	display: none !important;
	background: none !important;
}

@media screen and (max-width: 900px) {
	#product.product-modern #sec2 > .items > .flex {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media screen and (max-width: 680px) {
	#product.product-modern #sec1 {
		padding: 55px 18px 20px;
	}
	#product.product-modern #sec1 .title-jp {
		font-size: 30px;
	}
	#product.product-modern #sec2 {
		padding-bottom: 76px;
	}
	#product.product-modern #sec2 > header {
		margin-bottom: 48px;
		padding: 23px 18px 46px;
	}
	#product.product-modern #sec2 > header .title-jp {
		font-size: 32px;
	}
	#product.product-modern #sec2 > header > p {
		margin-top: 18px;
		font-size: 12px;
	}
	#product.product-modern #sec2 > .items {
		width: calc(100% - 36px);
		margin-bottom: 62px;
	}
	#product.product-modern #sec2 > .items > h4 {
		margin-bottom: 22px;
		font-size: 23px;
	}
	#product.product-modern #sec2 > .items > .center,
	#product.product-modern #sec2 > .items > p.center {
		margin-top: -8px;
		font-size: 12px;
	}
	#product.product-modern #sec2 > .items > .flex {
		grid-template-columns: 1fr;
		gap: 14px;
	}
	#product.product-modern #sec2 .item {
		display: grid;
		grid-template-columns: 42% 58%;
		padding: 0;
	}
	#product.product-modern #sec2 .item figure {
		grid-row: 1 / 5;
		width: 100%;
		height: 100%;
		min-height: 225px;
		margin: 0;
	}
	#product.product-modern #sec2 .item h5 {
		padding: 22px 18px 0;
		font-size: 15px;
	}
	#product.product-modern #sec2 .item > p {
		margin-top: 8px;
		padding: 0 18px;
		font-size: 11px;
		line-height: 1.7;
	}
	#product.product-modern #sec2 .item > p:last-child {
		padding-bottom: 20px;
	}
	#product.product-modern #sec2 .item .item-shop-link {
		grid-column: 2;
		margin: 12px 18px 20px;
		padding-top: 3px;
		font-size: 10px;
	}
	#product.product-modern #sec2 .btn-speciality a {
		width: 100%;
		min-width: 0;
	}
}

/* ==========================================================================
   Magazine-style category banners
   ========================================================================== */
body#product.product-modern #sec2 > .items > h4 {
	position: relative !important;
	display: flex !important;
	width: 100% !important;
	height: 174px !important;
	margin: 0 0 40px !important;
	padding: 57px 250px 30px 52px !important;
	align-items: center !important;
	overflow: hidden !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: #292a25 !important;
	background: #f5f0e6 !important;
	text-align: left !important;
}
body#product.product-modern #sec2 > .items > h4 span {
	position: relative !important;
	z-index: 2 !important;
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	font: 600 29px/1.45 "Noto Serif JP", serif !important;
	letter-spacing: .07em !important;
}
body#product.product-modern #sec2 > .items > h4::before {
	position: absolute !important;
	top: 35px !important;
	left: 52px !important;
	z-index: 2 !important;
	display: block !important;
	width: auto !important;
	height: auto !important;
	color: #a64736 !important;
	background: none !important;
	font: 700 11px/1.4 "Courier Prime", monospace !important;
	letter-spacing: .17em !important;
}
body#product.product-modern #sec2 > .items > h4::after {
	content: "" !important;
	position: absolute !important;
	right: 22px !important;
	bottom: -28px !important;
	left: auto !important;
	z-index: 1 !important;
	display: block !important;
	width: 230px !important;
	height: 210px !important;
	border: 0 !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: contain !important;
	transform: rotate(-4deg) !important;
	opacity: .92 !important;
}

/* Bread */
body.product-modern--bread #cat-id01 > h4 { background-color: #f3eadb !important; }
body.product-modern--bread #cat-id01 > h4::before { content: "01  LOW-CARB BREAD" !important; }
body.product-modern--bread #cat-id01 > h4::after { background-image: url("/img/item/01_05.png") !important; }

body.product-modern--bread #cat-id02 > h4 { background-color: #f4eed7 !important; }
body.product-modern--bread #cat-id02 > h4::before { content: "02  LOW-ALLERGEN BREAD" !important; }
body.product-modern--bread #cat-id02 > h4::after { background-image: url("/img/スペルト食パン.png") !important; }

body.product-modern--bread #cat-id03 > h4 { background-color: #eaf0e7 !important; }
body.product-modern--bread #cat-id03 > h4::before { content: "03  GLUTEN-FREE" !important; }
body.product-modern--bread #cat-id03 > h4::after { background-image: url("/img/玄米食パン.png") !important; }

body.product-modern--bread #cat-id04 > h4 { background-color: #eee4d7 !important; }
body.product-modern--bread #cat-id04 > h4::before { content: "04  BREAD COMPANIONS" !important; }
body.product-modern--bread #cat-id04 > h4::after { background-image: url("/img/黒ごまペースト.png") !important; }

/* Sweets */
body.product-modern--sweets #cat-id04 > h4 { background-color: #f4e9df !important; }
body.product-modern--sweets #cat-id04 > h4::before { content: "01  SOY PUDDING" !important; }
body.product-modern--sweets #cat-id04 > h4::after { background-image: url("/img/item/2.png") !important; }

body.product-modern--sweets #cat-id05 > h4 { background-color: #f1eadc !important; }
body.product-modern--sweets #cat-id05 > h4::before { content: "02  ALMOND PUDDING" !important; }
body.product-modern--sweets #cat-id05 > h4::after { background-image: url("/img/アーモンドミルクプリンプレーン.png") !important; }

body.product-modern--sweets #cat-id06 > h4 { background-color: #e8eff0 !important; }
body.product-modern--sweets #cat-id06 > h4::before { content: "03  SOY ICE CREAM" !important; }
body.product-modern--sweets #cat-id06 > h4::after { background-image: url("/img/item/8ac.png") !important; }

body.product-modern--sweets #cat-id09 > h4 { background-color: #eef0f5 !important; }
body.product-modern--sweets #cat-id09 > h4::before { content: "04  FRUIT SORBET" !important; }
body.product-modern--sweets #cat-id09 > h4::after { background-image: url("/img/いちごバナナソルベ.png") !important; }

body.product-modern--sweets #cat-id07 > h4 { background-color: #ebeee3 !important; }
body.product-modern--sweets #cat-id07 > h4::before { content: "05  LOCA BALL" !important; }
body.product-modern--sweets #cat-id07 > h4::after { background-image: url("/img/item/11a.png") !important; }

body.product-modern--sweets #cat-id08 > h4 { background-color: #f1e5e0 !important; }
body.product-modern--sweets #cat-id08 > h4::before { content: "06  LOW-CARB SWEETS" !important; }
body.product-modern--sweets #cat-id08 > h4::after { background-image: url("/img/item/12abb.png") !important; }

@media screen and (max-width: 680px) {
	body#product.product-modern #sec2 > .items > h4 {
		height: 138px !important;
		margin-bottom: 26px !important;
		padding: 47px 135px 24px 22px !important;
	}
	body#product.product-modern #sec2 > .items > h4 span {
		font-size: 20px !important;
		line-height: 1.45 !important;
	}
	body#product.product-modern #sec2 > .items > h4::before {
		top: 25px !important;
		left: 22px !important;
		font-size: 8px !important;
	}
	body#product.product-modern #sec2 > .items > h4::after {
		right: 7px !important;
		bottom: -12px !important;
		width: 135px !important;
		height: 140px !important;
	}
}

/* ==========================================================================
   Shared modern navigation for Bread / Sweets
   ========================================================================== */
@media screen and (min-width: 681px) {
	body#product.product-modern nav#gnav {
		position: sticky !important;
		top: 0 !important;
		z-index: 1000 !important;
		display: block !important;
		width: 100% !important;
		height: auto !important;
		padding: 0 !important;
		background: rgba(255, 255, 255, .96) !important;
		border-bottom: 1px solid #e5e0d7 !important;
		box-shadow: 0 6px 22px rgba(45, 40, 31, .045) !important;
		backdrop-filter: blur(12px);
	}
	body#product.product-modern nav#gnav ul.contents {
		display: flex !important;
		width: min(1220px, calc(100% - 40px)) !important;
		min-height: 72px !important;
		height: auto !important;
		margin: 0 auto !important;
		padding: 0 !important;
		align-items: center !important;
		justify-content: center !important;
		gap: clamp(15px, 2vw, 32px) !important;
	}
	body#product.product-modern nav#gnav ul.contents li {
		margin: 0 !important;
		line-height: 1.4 !important;
	}
	body#product.product-modern nav#gnav ul.contents li a {
		position: relative !important;
		display: block !important;
		padding: 27px 0 24px !important;
		color: #292a25 !important;
		background: transparent !important;
		border: 0 !important;
		font-size: 12px !important;
		font-weight: 600 !important;
		letter-spacing: .02em !important;
		line-height: 1.4 !important;
		text-decoration: none !important;
		white-space: nowrap !important;
	}
	body#product.product-modern nav#gnav ul.contents li a span,
	body#product.product-modern nav#gnav ul.contents li a br {
		display: none !important;
	}
	body#product.product-modern nav#gnav ul.contents li a::after {
		content: "" !important;
		position: absolute !important;
		right: 0 !important;
		bottom: 16px !important;
		left: 0 !important;
		display: block !important;
		height: 2px !important;
		background: #a64736 !important;
		transform: scaleX(0) !important;
		transform-origin: center !important;
		transition: transform .2s ease !important;
	}
	body#product.product-modern nav#gnav ul.contents li a:hover::after,
	body#product.product-modern.product-modern--bread nav#gnav li:nth-child(3) a::after,
	body#product.product-modern.product-modern--sweets nav#gnav li:nth-child(4) a::after {
		transform: scaleX(1) !important;
	}
}

@media screen and (max-width: 390px) {
	#product.product-modern #sec2 .item {
		display: flex;
	}
	#product.product-modern #sec2 .item figure {
		height: 270px;
		min-height: 0;
		margin-bottom: 20px;
	}
	#product.product-modern #sec2 .item h5 {
		padding-top: 0;
	}
	#product.product-modern #sec2 .item .item-shop-link {
		margin-top: 14px;
	}
}

/* ==========================================================================
   Refined category chapter card
   ========================================================================== */
body#product.product-modern #sec2 > .items > h4 {
	position: relative !important;
	display: flex !important;
	width: 100% !important;
	height: 112px !important;
	margin: 0 0 34px !important;
	padding: 22px 38px !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	justify-content: center !important;
	gap: 8px !important;
	overflow: hidden !important;
	border: 1px solid rgba(129, 103, 75, .14) !important;
	border-left: 5px solid #a64736 !important;
	border-radius: 14px !important;
	box-shadow: 0 12px 32px rgba(73, 58, 39, .06) !important;
	color: #292a25 !important;
	background-color: #f7f3eb !important;
	background-image:
		linear-gradient(115deg, rgba(255,255,255,.62), rgba(255,255,255,0) 62%) !important;
	text-align: left !important;
}
body#product.product-modern #sec2 > .items > h4 span {
	position: relative !important;
	z-index: 2 !important;
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	font: 600 25px/1.35 "Noto Serif JP", "Yu Mincho", serif !important;
	letter-spacing: .08em !important;
}
body#product.product-modern #sec2 > .items > h4::before {
	position: static !important;
	z-index: 2 !important;
	display: block !important;
	width: auto !important;
	height: auto !important;
	color: #a64736 !important;
	background: none !important;
	font: 700 12px/1.2 "Courier Prime", monospace !important;
	letter-spacing: .13em !important;
}
body#product.product-modern #sec2 > .items > h4::after {
	content: none !important;
	display: none !important;
}

body.product-modern--bread #cat-id01 > h4 { background-color: #f5eee2 !important; }
body.product-modern--bread #cat-id02 > h4 { background-color: #f3efdf !important; }
body.product-modern--bread #cat-id03 > h4 { background-color: #edf2e9 !important; }
body.product-modern--bread #cat-id04 > h4 { background-color: #f0e9df !important; }

body.product-modern--sweets #cat-id04 > h4 { background-color: #f6ece5 !important; }
body.product-modern--sweets #cat-id05 > h4 { background-color: #f4efe2 !important; }
body.product-modern--sweets #cat-id06 > h4 { background-color: #ebf2f2 !important; }
body.product-modern--sweets #cat-id09 > h4 { background-color: #eef0f5 !important; }
body.product-modern--sweets #cat-id07 > h4 { background-color: #eef1e7 !important; }
body.product-modern--sweets #cat-id08 > h4 { background-color: #f4e8e4 !important; }

@media screen and (max-width: 680px) {
	body#product.product-modern #sec2 > .items > h4 {
		height: 94px !important;
		margin-bottom: 22px !important;
		padding: 17px 23px !important;
		gap: 6px !important;
		border-left-width: 4px !important;
		border-radius: 11px !important;
	}
	body#product.product-modern #sec2 > .items > h4 span {
		font-size: 19px !important;
		line-height: 1.35 !important;
	}
	body#product.product-modern #sec2 > .items > h4::before {
		font-size: 9px !important;
		letter-spacing: .12em !important;
	}
}