@charset "utf-8";
/* =========================================================
   浩養園クラフトビール専用(page-craftbeer.cssをもとに再調整)
   既存の style.css / common.css の後に読み込みます。
   ========================================================= */
.craftbeer-page {
	--craft-font-serif: "Zen Old Mincho", "Noto Serif JP", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
	--craft-font-sans: "Noto Sans JP", "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
	--craft-font-ui: "LINE Seed JP", "Noto Sans JP", "Yu Gothic", "YuGothic", sans-serif;
}
/* 通常本文 */
.craftbeer-page main {
	font-family: var(--craft-font-sans);
	font-weight: 400;
	font-feature-settings: "palt" 1;
}
/* ブランド性を見せる見出し */
.craftbeer-page main h2,
.craftbeer-page main h3,
.craftbeer-page .craftbeer-hero > p,
.craftbeer-page .craftbeer-philosophy > p,
.craftbeer-page .craftbeer-vision p {
	font-family: var(--craft-font-serif);
}
.craftbeer-page main h2 {
	font-weight: 600;
	letter-spacing: 0.08em;
}
.craftbeer-page main h3 {
	font-weight: 600;
	letter-spacing: 0.05em;
}
/* 英字・番号・短いラベル・CTA */
.craftbeer-page .craftbeer-philosophy > p,
.craftbeer-page .craftbeer-process h3 span,
.craftbeer-page .craftbeer-lineup li > div:last-child > p:last-child,
.craftbeer-page .craftbeer-shop-list h3,
.craftbeer-page .craftbeer-shops > h3,
.craftbeer-page .craftbeer-shops > ul:last-child a {
	font-family: var(--craft-font-ui);
}
.craftbeer-page .craftbeer-philosophy > p {
	font-weight: 400;
	letter-spacing: 0.14em;
}
.craftbeer-page .craftbeer-process h3 span {
	font-weight: 700;
}
.craftbeer-page .craftbeer-shop-list h3,
.craftbeer-page .craftbeer-shops > ul:last-child a {
	font-weight: 700;
}
.craftbeer-section__heading {
	text-align: center;
	padding: 2em 0.25em;
}
.craftbeer-section__heading h2 {
	font-size: clamp(2rem, 1.55rem + 1.5vw, 3.2rem);
	font-weight: 700;
}
.craftbeer-section__heading h3 {
	font-size: clamp(1.8rem, 1.8rem + 0.5vw, 2.4rem);
}
#wrapper_contents_wide {
	width: 100%;
}

.craftbeer-page #breadcrumb {
	padding: 0 2vw;
}

/* =========================================
   Section inner
========================================= */
.craftbeer-section__inner {
	width: 92%;
	max-width: 1080px;
	margin-right: auto;
	margin-left: auto;
}

/* 高さ・絶対配置を使用するセクション */
.craftbeer-hero > .craftbeer-section__inner,
.craftbeer-stickler > .craftbeer-section__inner {
	position: relative;
	min-height: inherit;
}

/* inner追加後も既存の直下指定を維持 */
.craftbeer-page .craftbeer-philosophy > .craftbeer-section__inner > p {
	font-family: var(--craft-font-ui);
	font-weight: 400;
	letter-spacing: 0.14em;
}

.craftbeer-page .craftbeer-stickler-process > .craftbeer-section__inner > h2 {
	margin: 0 0 0.8em;
	color: #fff;
	font-size: clamp(2rem, 1.55rem + 1vw, 3rem);
	text-align: center;
}

.craftbeer-stickler-process > .craftbeer-section__inner > p {
	max-width: 820px;
	margin: 0 auto 2em;
	font-size: clamp(1.25rem, 1.13rem + 0.22vw, 1.5rem);
	line-height: 1.85;
	text-align: center;
}

.craftbeer-lineup > .craftbeer-section__inner > h3 {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 1em;
	margin: 1.2em 0 0.8em;
	color: #4c3826;
	font-family: var(--craft-font-serif);
	font-size: clamp(1.8rem, 1.45rem + 0.8vw, 2.5rem);
	text-align: center;
}

.craftbeer-lineup > .craftbeer-section__inner > h3::before,
.craftbeer-lineup > .craftbeer-section__inner > h3::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--lineup-line);
}

/* =========================================
   Hero / Brewery movie
========================================= */
.craftbeer-hero {
	position: relative;
	isolation: isolate;
	width: 100%;
	min-height: clamp(440px, 40vw, 640px);
	margin: 0;
	overflow: hidden;
	background: #4b2c18;
	color: #fff;
}

.craftbeer-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(90deg, rgba(35, 20, 8, 0.16) 0%, rgba(43, 23, 7, 0.36) 38%, rgba(95, 43, 4, 0.5) 63%, rgba(79, 26, 0, 0.22) 100%), linear-gradient(180deg, rgba(0, 0, 0, 0.02) 38%, rgba(31, 13, 2, 0.42) 100%);
	pointer-events: none;
}

.craftbeer-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.craftbeer-hero__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

.craftbeer-hero__content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: inherit;
	padding: clamp(48px, 6vw, 78px) clamp(24px, 5vw, 64px) clamp(38px, 5vw, 64px);
	text-align: center;
	text-shadow: 0 2px 8px rgba(31, 13, 2, 0.55);
}

.craftbeer-page .craftbeer-hero__content h2 {
	margin: 0;
	color: #fff;
	font-family: var(--craft-font-serif);
	font-size: clamp(3.2rem, 2.25rem + 2.15vw, 6rem);
	font-weight: 700;
	line-height: 1.48;
	letter-spacing: 0.07em;
}

.craftbeer-page .craftbeer-hero__content p {
	max-width: 820px;
	margin: clamp(22px, 3vw, 36px) auto 0;
	color: #fff;
	font-family: var(--craft-font-serif);
	font-size: clamp(1.4rem, 1.25rem + 0.42vw, 2rem);
	font-weight: 700;
	line-height: 1.75;
	letter-spacing: 0.045em;
}

.craftbeer-brewery-movie {
	margin: 0;
	padding: clamp(3em, 5vw, 4em) 0 0;
	background: #f3eee6;
}

.craftbeer-brewery-movie__media {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 7.25;
	overflow: hidden;
	background: #1b120c;
}

.craftbeer-brewery-movie__video {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
	object-position: center center;
}

@media (max-width: 768px) {
	.craftbeer-hero {
		min-height: clamp(360px, 75vw, 480px);
	}

	.craftbeer-hero::after {
		background: linear-gradient(180deg, rgba(31, 15, 4, 0.12) 0%, rgba(66, 29, 4, 0.34) 48%, rgba(30, 13, 3, 0.62) 100%);
	}

	.craftbeer-hero__media img {
		object-position: 55% center;
	}

	.craftbeer-hero__content {
		justify-content: flex-end;
		padding: 40px 20px 34px;
	}

	.craftbeer-page .craftbeer-hero__content h2 {
		font-size: clamp(2.6rem, 7.6vw, 4.2rem);
		line-height: 1.5;
	}

	.craftbeer-page .craftbeer-hero__content p {
		margin-top: 18px;
		font-size: clamp(1.4rem, 3vw, 1.6rem);
		line-height: 1.7;
	}

	.craftbeer-hero__pc-break {
		display: none;
	}

	.craftbeer-brewery-movie {
		padding-top: 14px;
	}

	.craftbeer-brewery-movie__media {
		aspect-ratio: 16 / 9;
	}
}

@media (max-width: 480px) {
	.craftbeer-hero {
		min-height: 320px;
	}

	.craftbeer-page .craftbeer-hero__content h2 {
		font-size: clamp(2.35rem, 7.2vw, 3.2rem);
		letter-spacing: 0.04em;
	}

	.craftbeer-page .craftbeer-hero__content p {
		font-size: 1.2rem;
	}
}

/* =========================================
   Philosophy / Features
========================================= */
.craftbeer-philosophy {
	padding: clamp(30px, 4vw, 54px) 20px clamp(18px, 2.4vw, 30px);
	border-bottom: 1px solid rgba(111, 82, 55, 0.28);
	background: #f3eee6;
	color: #6a4228;
	text-align: center;
}

.craftbeer-page .craftbeer-philosophy__title {
	margin: 0;
	font-family: var(--craft-font-serif);
	font-size: clamp(3rem, 2.2rem + 2vw, 5.4rem);
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0.08em;
}

.craftbeer-philosophy__en {
	margin: 0.35em 0 0;
	font-family: var(--craft-font-serif);
	font-size: clamp(2rem, 1.6rem + 1vw, 3.4rem);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.02em;
}

.craftbeer-features {
	position: relative;
	padding: clamp(28px, 4vw, 54px) 0 clamp(34px, 5vw, 64px);
	background: radial-gradient(circle at 96% 8%, rgba(194, 161, 110, 0.08), transparent 24%), linear-gradient(180deg, #fffdf8 0%, #f8f3ea 100%);
	color: #4f3b2c;
}

.craftbeer-features__lead {
	display: grid;
	grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
	gap: clamp(28px, 4vw, 56px);
	align-items: start;
}

.craftbeer-features__image {
	min-width: 0;
	overflow: hidden;
	border-radius: 8px;
	box-shadow: 0 8px 18px rgba(83, 55, 31, 0.14);
}

.craftbeer-features__image img {
	display: block;
	width: 100%;
	height: clamp(330px, 38vw, 500px);
	object-fit: cover;
	object-position: center center;
}

.craftbeer-features__content {
	padding-top: 0.15em;
}

.craftbeer-page .craftbeer-features__content h2 {
	position: relative;
	margin: 0 0 1em;
	padding-bottom: 0.7em;
	color: #493325;
	font-family: var(--craft-font-serif);
	font-size: clamp(2.5rem, 1.9rem + 1.4vw, 4.2rem);
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0.08em;
}

.craftbeer-page .craftbeer-features__content h2::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: min(180px, 48%);
	height: 9px;
	background:
		linear-gradient(#c4a66e, #c4a66e) left center / calc(100% - 34px) 1px no-repeat,
		radial-gradient(circle, #c4a66e 0 2px, transparent 3px) right center / 10px 9px repeat-x;
}

.craftbeer-features__content > p {
	margin: 0;
	font-size: clamp(1.35rem, 1.22rem + 0.28vw, 1.7rem);
	line-height: 2;
}

.craftbeer-features__list {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(12px, 1.8vw, 22px);
	margin: clamp(-108px, -8vw, -72px) 0 0 calc(20% - 10px);
	padding: 0;
	list-style: none;
}

.craftbeer-features__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 0;
	padding: clamp(28px, 2.5vw, 32px) clamp(12px, 1.5vw, 20px);
	border: 1px solid #d2bea0;
	border-radius: 10px;
	background: rgba(255, 252, 245, 0.96);
	box-shadow: 0 7px 15px rgba(84, 57, 34, 0.1);
	text-align: center;
}

.craftbeer-features__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	margin-bottom: 0.8em;
}

.craftbeer-features__icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.craftbeer-features__item-body h4 {
	margin: 0 0 0.65em;
	color: #795838;
	font-family: var(--craft-font-serif);
	font-size: clamp(1.45rem, 1.25rem + 0.4vw, 1.9rem);
	font-weight: 600;
	line-height: 1.45;
}

.craftbeer-features__item-body p {
	margin: 0;
	font-size: clamp(1.15rem, 1.08rem + 0.16vw, 1.35rem);
	line-height: 1.75;
}

@media (max-width: 999px) {
	.craftbeer-features__lead {
		grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
		gap: 28px;
	}

	.craftbeer-features__list {
		margin-top: -70px;
		margin-left: calc(42% - 8px);
	}
}

@media (max-width: 768px) {
	.craftbeer-philosophy {
		padding: 28px 18px 20px;
	}

	.craftbeer-page .craftbeer-philosophy__title {
		font-size: clamp(2.5rem, 7vw, 3.8rem);
	}

	.craftbeer-philosophy__en {
		font-size: clamp(1.7rem, 4.8vw, 2.5rem);
	}

	.craftbeer-features {
		padding: 28px 18px 36px;
	}

	.craftbeer-features__lead {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.craftbeer-features__image img {
		height: clamp(300px, 82vw, 470px);
	}

	.craftbeer-features__content {
		padding: 0 4px;
	}

	.craftbeer-features__content > p {
		line-height: 1.85;
	}

	.craftbeer-features__list {
		grid-template-columns: 1fr;
		gap: 14px;
		margin: 24px 0 0;
	}

	.craftbeer-features__item {
		display: grid;
		grid-template-columns: 62px minmax(0, 1fr);
		gap: 16px;
		align-items: center;
		padding: 18px;
		text-align: left;
	}

	.craftbeer-features__icon {
		margin: 0;
	}
}

@media (max-width: 480px) {
	.craftbeer-features__item {
		grid-template-columns: 52px minmax(0, 1fr);
		gap: 12px;
		padding: 15px;
	}

	.craftbeer-features__icon {
		width: 52px;
		height: 52px;
	}
}

/* =========================================
   Stickler / Process / Technique
========================================= */
.craftbeer-stickler,
.craftbeer-stickler-intro,
.craftbeer-stickler-technique {
	color: #4f3929;
}

.craftbeer-stickler {
	position: relative;
	min-height: clamp(300px, 34vw, 440px);
	overflow: hidden;
	background: #3f2b1f;
	color: #fff;
}

.craftbeer-stickler::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(90deg, rgba(30, 19, 11, 0.08) 0%, rgba(30, 19, 11, 0.22) 38%, rgba(25, 15, 8, 0.82) 100%);
	opacity: 0;
}

.craftbeer-stickler__media,
.craftbeer-stickler__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.craftbeer-stickler__media img {
	display: block;
	object-fit: cover;
	object-position: center center;
}

.craftbeer-stickler__content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: min(54%, 620px);
	min-height: inherit;
	margin-left: auto;
	padding: clamp(34px, 5vw, 72px) clamp(24px, 5vw, 2.5em);
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

.craftbeer-page .craftbeer-stickler h2 {
	margin: 0 0 0.55em;
	color: #fff;
	font-size: clamp(2.8rem, 2.4rem + 2vw, 5.2rem);
	font-weight: 700;
	line-height: 1.35;
}

.craftbeer-stickler p {
	margin: 0;
	color: #fbd03d;
	font-family: var(--craft-font-serif);
	font-size: clamp(2.4rem, 2rem + 0.5vw, 2.8rem);
	font-weight: 500;
	line-height: 1.6;
}

.craftbeer-stickler-intro {
	padding: 3em 0;
	background: #f5f0e8;
}

.craftbeer-page .craftbeer-stickler-intro > h2,
.craftbeer-page .craftbeer-stickler-technique > h2 {
	margin: 0 0 clamp(22px, 3vw, 34px);
	color: #6d452b;
	line-height: 1.5;
	text-align: center;
}

.craftbeer-stickler-intro__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(240px, 1fr);
	gap: clamp(16px, 3vw, 36px);
	align-items: center;
}

.craftbeer-stickler-intro__text p,
.craftbeer-stickler-technique__text p {
	margin: 0;
	font-size: clamp(1.5rem, 1rem + 0.75vw, 1.7rem);
	line-height: 2;
}

.craftbeer-stickler-intro__image {
	overflow: hidden;
	border-radius: 12px;
	box-shadow: 0 8px 22px rgba(76, 46, 24, 0.14);
}

.craftbeer-stickler-intro__image img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.craftbeer-stickler-process {
	position: relative;
	isolation: isolate;
	padding: clamp(36px, 5vw, 68px) clamp(20px, 4vw, 52px);
	overflow: hidden;
	background: radial-gradient(circle at 8% 36%, rgba(184, 116, 53, 0.34), transparent 32%), linear-gradient(135deg, #2f4a39 0%, #173526 68%, #10291f 100%);
	color: #fff;
}

.craftbeer-stickler-process::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	z-index: -1;
	width: 38%;
	background: linear-gradient(90deg, rgba(169, 93, 37, 0.38), transparent);
	pointer-events: none;
}

.craftbeer-page .craftbeer-stickler-process > h2 {
	margin: 0 0 0.8em;
	color: #fff;
	font-size: clamp(2rem, 1.55rem + 1vw, 3rem);
	text-align: center;
}

.craftbeer-stickler-process > p {
	max-width: 820px;
	margin: 0 auto 2em;
	font-size: clamp(1.25rem, 1.13rem + 0.22vw, 1.5rem);
	line-height: 1.85;
	text-align: center;
}

.craftbeer-stickler-process__steps {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.craftbeer-stickler-process__steps > li {
	position: relative;
	min-width: 0;
	padding: 18px 10px;
	border: 1px solid rgba(225, 199, 151, 0.42);
	background: rgba(11, 42, 30, 0.72);
	text-align: center;
}

.craftbeer-stickler-process__steps h3 {
	margin: 0 0 0.7em;
	color: #ead7aa;
	font-size: clamp(1.25rem, 1.12rem + 0.2vw, 1.5rem);
}

.craftbeer-stickler-process__steps h3 span {
	display: block;
	margin-bottom: 0.25em;
	font-size: 0.75em;
	opacity: 0.85;
}

.craftbeer-stickler-process__steps img {
	width: 54px;
	height: 54px;
	filter: brightness(0) invert(87%) sepia(34%) saturate(485%);
}

.craftbeer-stickler-process__steps p {
	margin: 0.6em 0 0;
	font-size: 1.15rem;
	line-height: 1.55;
}

.craftbeer-stickler-process__points {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}

.craftbeer-stickler-process__points > li {
	display: grid;
	grid-template-columns: 54px minmax(0, 1fr);
	gap: 14px;
	align-items: center;
	padding: 16px 18px;
	background: rgba(248, 241, 226, 0.94);
	color: #5a422e;
}

.craftbeer-stickler-process__points img {
	width: 48px;
	height: 48px;
}

.craftbeer-stickler-process__points h3 {
	margin: 0 0 0.3em;
	font-size: 1.5rem;
}

.craftbeer-stickler-process__points p {
	margin: 0;
	font-size: 1.2rem;
	line-height: 1.6;
}

.craftbeer-stickler-technique {
	padding: 3em 0;
	background: #f5f0e8;
}

.craftbeer-stickler-technique__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(260px, 1fr);
	gap: clamp(16px, 3vw, 36px);
	align-items: center;
	margin-bottom: clamp(28px, 4vw, 48px);
}

.craftbeer-stickler-technique__row--reverse {
	grid-template-columns: minmax(260px, 1fr) minmax(0, 1fr);
}

.craftbeer-stickler-technique__row--reverse .craftbeer-stickler-technique__text {
	grid-column: 2;
	grid-row: 1;
}

.craftbeer-stickler-technique__row--reverse .craftbeer-stickler-technique__image {
	grid-column: 1;
	grid-row: 1;
}

.craftbeer-stickler-technique__image,
.craftbeer-stickler-technique__visual {
	overflow: hidden;
	border-radius: 12px;
}

.craftbeer-stickler-technique__image img,
.craftbeer-stickler-technique__visual img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.craftbeer-stickler-technique__image img {
	aspect-ratio: 16 / 9;
}

.craftbeer-stickler-technique__visual {
	position: relative;
	min-height: clamp(210px, 28vw, 350px);
	margin: 0 0 clamp(28px, 4vw, 48px);
	box-shadow: 0 8px 22px rgba(76, 46, 24, 0.14);
}

.craftbeer-stickler-technique__visual::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(25, 14, 7, 0.18), rgba(25, 14, 7, 0.72));
}

.craftbeer-stickler-technique__visual-image {
	position: absolute;
	inset: 0;
}

.craftbeer-stickler-technique__visual > p {
	position: relative;
	z-index: 2;
	width: min(52%, 520px);
	margin: 0 0 0 auto;
	padding: clamp(1.72em, 4vw, 3em) clamp(1.5em, 4vw, 2em);
	color: #fff;
	font-family: var(--craft-font-serif);
	font-size: clamp(1.6rem, 1.25rem + 1vw, 2.1rem);
	font-weight: 600;
	line-height: 1.6;
	text-shadow: 0 2px 7px rgba(0, 0, 0, 0.45);
}

.craftbeer-stickler-technique__visual--last::after {
	background: linear-gradient(90deg, rgba(25, 14, 7, 0.15), rgba(25, 14, 7, 0.76));
}

@media (max-width: 768px) {
	.craftbeer-stickler {
		min-height: 420px;
	}

	.craftbeer-stickler::after {
		background: linear-gradient(180deg, rgba(28, 17, 10, 0.08) 35%, rgba(22, 13, 7, 0.82) 100%);
	}

	.craftbeer-stickler__content {
		justify-content: flex-end;
		width: 100%;
		padding: 28px 22px 30px;
	}

	.craftbeer-stickler-intro__body,
	.craftbeer-stickler-technique__row,
	.craftbeer-stickler-technique__row--reverse {
		grid-template-columns: 1fr;
	}

	.craftbeer-stickler-technique__row--reverse .craftbeer-stickler-technique__text,
	.craftbeer-stickler-technique__row--reverse .craftbeer-stickler-technique__image {
		grid-column: auto;
		grid-row: auto;
	}

	.craftbeer-stickler-technique__row--reverse .craftbeer-stickler-technique__image {
		order: 2;
	}

	.craftbeer-stickler-process__steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.craftbeer-stickler-process__steps > li:last-child {
		grid-column: 1 / -1;
	}

	.craftbeer-stickler-process__points {
		grid-template-columns: 1fr;
	}

	.craftbeer-stickler-technique__visual {
		min-height: 300px;
	}

	.craftbeer-stickler-technique__visual::after {
		background: linear-gradient(180deg, rgba(25, 14, 7, 0.08), rgba(25, 14, 7, 0.78));
	}

	.craftbeer-stickler-technique__visual > p {
		display: flex;
		align-items: flex-end;
		width: 100%;
		min-height: 300px;
		padding: 28px 22px;
	}
}

@media (max-width: 480px) {
	.craftbeer-stickler-process__steps {
		grid-template-columns: 1fr;
	}

	.craftbeer-stickler-process__steps > li:last-child {
		grid-column: auto;
	}
}

/* =========================================
   Craftsman / Encounter / Vision
========================================= */
.craftbeer-craftsman {
	padding: clamp(42px, 6vw, 78px) 0;
	background: radial-gradient(circle at 10% 12%, rgba(189, 155, 103, 0.09), transparent 28%), linear-gradient(180deg, #f5f0e8 0%, #efe8dc 100%);
	color: #4f3929;
}

.craftbeer-craftsman__heading {
	padding-top: 0;
	padding-bottom: clamp(22px, 3vw, 36px);
}

.craftbeer-craftsman__heading h2,
.craftbeer-encounter__heading h2 {
	margin: 0;
	color: #6b4128;
	font-size: clamp(2.5rem, 1.7rem + 2vw, 4.6rem);
	line-height: 1.4;
}

.craftbeer-craftsman__intro {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(280px, 34%);
	overflow: hidden;
	border: 1px solid rgba(183, 156, 115, 0.48);
	background: rgba(255, 252, 245, 0.8);
	box-shadow: 0 8px 22px rgba(76, 46, 24, 0.08);
}

.craftbeer-craftsman__intro-body {
	padding: clamp(24px, 4vw, 48px);
}

.craftbeer-page .craftbeer-craftsman__intro-body h3,
.craftbeer-page .craftbeer-craftsman-story h3 {
	margin: 0 0 0.9em;
	color: #4f3929;
	font-size: clamp(2rem, 1.55rem + 0.9vw, 2.8rem);
	line-height: 1.45;
}

.craftbeer-craftsman__intro-body p {
	margin: 0;
	font-size: clamp(1.5rem, 1.2rem + 0.5vw, 1.8rem);
	line-height: 2;
}

.craftbeer-craftsman__intro-body p + p {
	margin-top: 1em;
}

.craftbeer-craftsman__intro-image {
	min-height: 100%;
}

.craftbeer-craftsman__intro-image img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 320px;
	object-fit: cover;
	object-position: center top;
}

.craftbeer-craftsman__stories {
	display: grid;
	grid-template-columns: 1fr;
	margin-top: 0;
	border-right: 1px solid rgba(183, 156, 115, 0.48);
	border-bottom: 1px solid rgba(183, 156, 115, 0.48);
	border-left: 1px solid rgba(183, 156, 115, 0.48);
	background: rgba(255, 252, 245, 0.74);
}

.craftbeer-craftsman-story {
	position: relative;
	min-width: 0;
	overflow: hidden;
}

.craftbeer-craftsman-story + .craftbeer-craftsman-story {
	border-top: 1px solid rgba(183, 156, 115, 0.55);
}

.craftbeer-craftsman-story__inner {
	position: relative;
	z-index: 1;
	padding: clamp(24px, 3.5vw, 44px);
}
.craftbeer-craftsman-story__inner p {
	font-size: clamp(1.5rem, 1.2rem + 0.5vw, 1.8rem) !important;
	line-height: 2;
}

.craftbeer-craftsman-story__voices {
	margin: 0;
}

.craftbeer-craftsman-story__voice {
	display: grid;
	grid-template-columns: 4.5em minmax(0, 1fr);
	gap: 0.8em;
}

.craftbeer-craftsman-story__voice + .craftbeer-craftsman-story__voice {
	margin-top: 1.35em;
}

.craftbeer-craftsman-story__voice dt {
	align-self: start;
	margin: 0;
	padding: 0.28em 0.45em;
	border-radius: 999px;
	background: #b89759;
	color: #fff;
	font-size: clamp(1.2rem, 1.1rem + 0.2vw, 1.4rem);
	font-weight: 700;
	text-align: center;
}

.craftbeer-craftsman-story__voice dd {
	margin: 0;
	font-size: clamp(1.3rem, 1.18rem + 0.22vw, 1.55rem);
	line-height: 1.9;
}

.craftbeer-craftsman-story--vision {
	padding-right: clamp(72px, 9vw, 128px);
}

.craftbeer-craftsman-story__dreams {
	display: grid;
	gap: 1.5em;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: craftsman-dream;
}

.craftbeer-craftsman-story__dreams li {
	position: relative;
	padding-left: 2.65em;
	font-size: clamp(1.4rem, 1.1rem + 0.5vw, 1.6rem);
	line-height: 1.9;
	counter-increment: craftsman-dream;
}

.craftbeer-craftsman-story__dreams li::before {
	content: counter(craftsman-dream);
	position: absolute;
	top: 0.12em;
	left: 0;
	display: grid;
	place-items: center;
	width: 1.8em;
	height: 1.8em;
	border-radius: 50%;
	background: #b89759;
	color: #fff;
	font-family: var(--craft-font-ui);
	font-size: 0.9em;
	font-weight: 700;
}

.craftbeer-craftsman-story__beer {
	position: absolute;
	right: -30px;
	bottom: -18px;
	width: clamp(96px, 12vw, 150px);
	opacity: 0.28;
	pointer-events: none;
}

.craftbeer-craftsman-story__beer img {
	display: block;
	width: 100%;
	height: auto;
	filter: sepia(0.2);
}

.craftbeer-encounter {
	padding: clamp(38px, 5vw, 64px) 0 clamp(42px, 6vw, 76px);
	background: #f5f0e8;
	color: #4f3929;
}

.craftbeer-encounter__heading {
	padding-top: 0;
	padding-bottom: clamp(24px, 3vw, 36px);
}

.craftbeer-encounter__visual {
	display: grid;
	grid-template-columns: minmax(160px, 0.65fr) minmax(320px, 1.7fr) minmax(160px, 0.65fr);
	align-items: stretch;
	min-height: 160px;
	overflow: hidden;
	border: 1px solid rgba(183, 156, 115, 0.48);
	background: #fffaf1;
}

.craftbeer-encounter__image {
	overflow: hidden;
}

.craftbeer-encounter__image img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 160px;
	object-fit: cover;
}

.craftbeer-encounter__image--left img {
	object-position: center;
}

.craftbeer-encounter__image--right img {
	object-position: center;
}

.craftbeer-encounter__lead {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: clamp(20px, 3vw, 36px);
	background: linear-gradient(90deg, rgba(255, 250, 241, 0.84), rgba(255, 250, 241, 0.97), rgba(255, 250, 241, 0.84));
	color: #5f422d;
	font-family: var(--craft-font-serif);
	font-size: clamp(1.8rem, 1.4rem + 0.8vw, 2.7rem);
	font-weight: 600;
	line-height: 1.7;
	text-align: center;
}

.craftbeer-encounter__text {
	max-width: 900px;
	margin: clamp(24px, 3vw, 38px) auto 0;
	font-size: clamp(1.35rem, 1.2rem + 0.25vw, 1.65rem);
	line-height: 2;
	text-align: center;
}

.craftbeer-vision {
	position: relative;
	padding: clamp(48px, 7vw, 90px) 0;
	overflow: hidden;
	background: #18382b;
	color: #fff;
}

.craftbeer-vision > .craftbeer-section__inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(300px, 42%);
	align-items: center;
	min-height: 360px;
}

.craftbeer-vision__content {
	position: relative;
	z-index: 2;
	padding: clamp(30px, 5vw, 64px);
	background: rgba(15, 48, 35, 0.88);
}

.craftbeer-page .craftbeer-vision__content h2 {
	margin: 0 0 0.75em;
	color: #fff;
	font-size: clamp(2.8rem, 2rem + 1.6vw, 4.5rem);
}

.craftbeer-vision__content p {
	margin: 0;
	color: #fff;
	font-family: var(--craft-font-serif);
	font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem);
	line-height: 1.6;
}

.craftbeer-vision__image {
	height: 100%;
	min-height: 360px;
}

.craftbeer-vision__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 999px) {
	.craftbeer-craftsman__intro {
		grid-template-columns: minmax(0, 1fr) minmax(250px, 36%);
	}

	.craftbeer-craftsman-story--vision {
		padding-right: 0;
	}
}

@media (max-width: 768px) {
	/* SPでも本文と画像の横並びを維持 */
	.craftbeer-craftsman__intro {
		grid-template-columns: minmax(0, 1fr) minmax(150px, 38%);
		align-items: stretch;
	}

	.craftbeer-craftsman__intro-image {
		order: initial;
		min-height: 100%;
	}

	.craftbeer-craftsman__intro-image img {
		width: 100%;
		height: 100%;
		min-height: 100%;
		aspect-ratio: auto;
		object-fit: cover;
		object-position: center top;
	}

	.craftbeer-craftsman-story__voice {
		grid-template-columns: 1fr;
		gap: 0.5em;
	}

	.craftbeer-craftsman-story__voice dt {
		justify-self: start;
		min-width: 4.5em;
	}

	.craftbeer-craftsman-story__beer {
		width: 100px;
		opacity: 0.16;
	}

	.craftbeer-encounter__visual {
		grid-template-columns: 1fr 1fr;
	}

	.craftbeer-encounter__lead {
		grid-column: 1 / -1;
		grid-row: 2;
	}

	.craftbeer-encounter__image img {
		min-height: 180px;
	}

	.craftbeer-encounter__pc-break {
		display: none;
	}

	.craftbeer-vision > .craftbeer-section__inner {
		grid-template-columns: 1fr;
	}

	.craftbeer-vision__image {
		order: -1;
		min-height: 260px;
	}

	.craftbeer-vision__content {
		padding: 28px 22px;
	}
}

@media (max-width: 480px) {
	.craftbeer-craftsman__heading h2,
	.craftbeer-encounter__heading h2 {
		font-size: clamp(2.3rem, 7vw, 3rem);
	}

	/* 480px以下は本文＋画像の2段構成 */
	.craftbeer-craftsman__intro {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
	}

	.craftbeer-craftsman__intro-body {
		grid-column: 1;
		grid-row: 1;
		padding: 22px 18px;
	}

	.craftbeer-craftsman__intro-image {
		grid-column: 1;
		grid-row: 2;
		min-height: 0;
		overflow: hidden;
		aspect-ratio: 16 / 10;
	}

	/* 上側約35%を見せず、下側を中心に表示 */
	.craftbeer-craftsman__intro-image img {
		width: 100%;
		height: 100%;
		min-height: 0;
		aspect-ratio: auto;
		object-fit: cover;
		object-position: center bottom;
	}

	.craftbeer-craftsman-story__inner {
		padding: 22px 18px;
	}

	.craftbeer-craftsman-story__dreams li {
		padding-left: 2.35em;
	}

	.craftbeer-encounter__visual {
		grid-template-columns: 1fr;
	}

	.craftbeer-encounter__lead {
		grid-column: auto;
		grid-row: auto;
	}

	.craftbeer-encounter__image img {
		min-height: 190px;
	}
}

/* =========================================
   craftbeer-lineup
========================================= */
.craftbeer-lineup {
	--lineup-bg: #f5efe3;
	--lineup-card: rgba(255, 252, 245, 0.92);
	--lineup-line: #cdbb94;
	--lineup-ink: #4c3826;
	--lineup-accent: #8a653e;
	--lineup-wood: #9a7048;
	position: relative;
	padding: 3em 0;
	overflow: hidden;
	background: radial-gradient(circle at 10% 12%, rgba(183, 153, 104, 0.12), transparent 24%), radial-gradient(circle at 88% 18%, rgba(183, 153, 104, 0.1), transparent 22%), linear-gradient(180deg, #faf6ed 0%, var(--lineup-bg) 100%);
	color: var(--lineup-ink);
}

.craftbeer-lineup .craftbeer-section__heading {
	position: relative;
	z-index: 1;
	padding: 1.2em 0 1.5em;
}

.craftbeer-lineup .craftbeer-section__heading h2 {
	position: relative;
	display: inline-block;
	margin: 0;
	padding-bottom: 0.9em;
	color: #3f2d20;
	font-size: clamp(2rem, 1.55rem + 1.5vw, 3.2rem);
	line-height: 1.45;
	letter-spacing: 0.08em;
}

.craftbeer-lineup .craftbeer-section__heading h2::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: min(300px, 72%);
	height: 10px;
	transform: translateX(-50%);
	background:
		linear-gradient(var(--lineup-line), var(--lineup-line)) left center / calc(50% - 22px) 1px no-repeat,
		linear-gradient(var(--lineup-line), var(--lineup-line)) right center / calc(50% - 22px) 1px no-repeat,
		radial-gradient(circle, #b99658 0 2px, transparent 3px) center / 12px 10px repeat-x;
}

.craftbeer-lineup-list {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(12px, 2vw, 22px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.craftbeer-lineup-list > li {
	position: relative;
	display: grid;
	grid-template-rows: minmax(240px, auto) 1fr;
	min-width: 0;
	overflow: hidden;
	background: linear-gradient(180deg, transparent 0 calc(100% - 38px), rgba(118, 76, 40, 0.15) calc(100% - 38px)), var(--lineup-card);
	border: 1px solid var(--lineup-line);
	border-radius: 14px;
	box-shadow: 0 8px 20px rgba(87, 58, 31, 0.08);
}

.craftbeer-lineup-list__image {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	min-height: 240px;
	padding: 28px 20px 20px;
	overflow: hidden;
}

.craftbeer-lineup-list__image::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 44px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(79, 45, 20, 0.12)), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 2px, transparent 2px 45px), var(--lineup-wood);
	pointer-events: none;
}

.craftbeer-lineup-list__image img {
	position: relative;
	z-index: 1;
	display: block;
	width: auto;
	max-width: 72%;
	height: 220px;
	object-fit: contain;
	filter: drop-shadow(0 10px 10px rgba(73, 45, 23, 0.18));
}

.craftbeer-lineup-list__body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 1em 1.25em 1em;
	text-align: center;
}

.craftbeer-lineup-list h3 {
	margin: 0 0 0.75em;
	color: #6d4c2d;
	font-family: var(--craft-font-serif);
	font-size: clamp(1.65rem, 1.35rem + 0.7vw, 2.25rem);
	line-height: 1.35;
	letter-spacing: -0.04em !important;
}

.craftbeer-lineup-list h3 span {
	display: block;
	margin-top: 0.15em;
	font-size: 0.72em;
	letter-spacing: 0.03em;
}

.craftbeer-lineup-list__body > p:not(:last-child) {
	margin: 0 0 1.25em;
	font-size: clamp(1.3rem, 1.1rem + 0.5vw, 1.5rem);
	line-height: 1.8;
	text-align: left;
}

.craftbeer-lineup-list__body > p:last-child {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	margin: auto 0 0;
	padding: 0.45em 1.25em;
	border: 1px solid #bca67f;
	border-radius: 999px;
	background: rgba(255, 252, 243, 0.9);
	color: #6b4a2d;
	font-size: clamp(1.25rem, 1.15rem + 0.2vw, 1.45rem);
	font-weight: 700;
	line-height: 1.2;
	box-shadow: inset 0 0 0 3px rgba(205, 187, 148, 0.18);
}

.craftbeer-lineup > h3 {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 1em;
	margin: 1.2em 0 0.8em;
	color: #4c3826;
	font-family: var(--craft-font-serif);
	font-size: clamp(1.8rem, 1.45rem + 0.8vw, 2.5rem);
	text-align: center;
}

.craftbeer-lineup > h3::before,
.craftbeer-lineup > h3::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--lineup-line);
}

.craftbeer-lineup-list__hint {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: 0;
	padding: 0.9em 0;
	list-style: none;
	border: 1px solid var(--lineup-line);
	border-radius: 12px;
	background: rgba(255, 252, 245, 0.66);
}

.craftbeer-lineup-list__hint > li {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	gap: 1em;
	align-items: center;
	min-width: 0;
	padding: 0.55em 1em;
}

.craftbeer-lineup-list__hint > li + li {
	border-left: 1px solid var(--lineup-line);
}

.craftbeer-lineup-list__hint > li > div:first-child {
	display: flex;
	align-items: center;
	justify-content: center;
}

.craftbeer-lineup-list__hint img {
	display: block;
	width: 58px;
	height: 58px;
	object-fit: contain;
}

.craftbeer-lineup-list__hint h4 {
	margin: 0 0 0.35em;
	color: #5b4028;
	font-family: var(--craft-font-serif);
	font-size: clamp(1.45rem, 1.25rem + 0.35vw, 1.75rem);
	font-weight: 500;
	line-height: 1.4;
}

.craftbeer-lineup-list__hint p {
	margin: 0;
	font-size: clamp(1.2rem, 1.12rem + 0.18vw, 1.4rem);
	line-height: 1.65;
}

@media (max-width: 999px) {
	.craftbeer-lineup-list {
		gap: 14px;
	}

	.craftbeer-lineup-list > li {
		grid-template-rows: minmax(210px, auto) 1fr;
	}

	.craftbeer-lineup-list__image {
		min-height: 210px;
		padding-inline: 12px;
	}

	.craftbeer-lineup-list__image img {
		height: 190px;
		max-width: 80%;
	}

	.craftbeer-lineup-list__body {
		padding-inline: 1em;
	}

	.craftbeer-lineup-list__hint > li {
		grid-template-columns: 56px minmax(0, 1fr);
		gap: 0.75em;
		padding-inline: 1em;
	}

	.craftbeer-lineup-list__hint img {
		width: 48px;
		height: 48px;
	}
}

@media (max-width: 768px) {
	.craftbeer-lineup-list {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.craftbeer-lineup-list > li {
		grid-template-columns: minmax(130px, 34%) minmax(0, 1fr);
		grid-template-rows: auto;
		min-height: 250px;
	}

	.craftbeer-lineup-list__image {
		min-height: 0;
		padding: 24px 8px 20px;
	}

	.craftbeer-lineup-list__image img {
		width: 100%;
		max-width: 160px;
	}

	.craftbeer-lineup-list__body {
		align-items: flex-start;
		justify-content: center;
		padding: 1.25em 1.15em 1.25em 1em;
		text-align: left;
	}

	.craftbeer-lineup-list h3 {
		text-align: left;
	}

	.craftbeer-lineup-list__body > p:last-child {
		margin-left: 0;
	}

	.craftbeer-lineup-list__hint {
		grid-template-columns: 1fr;
		padding: 0.4em 1em;
	}

	.craftbeer-lineup-list__hint > li {
		grid-template-columns: 58px minmax(0, 1fr);
		padding: 1em 0;
	}

	.craftbeer-lineup-list__hint > li + li {
		border-top: 1px solid var(--lineup-line);
		border-left: 0;
	}
}

@media (max-width: 480px) {
	.craftbeer-lineup-list > li {
		grid-template-columns: 112px minmax(0, 1fr);
		min-height: 220px;
	}

	.craftbeer-lineup-list__image img {
		height: 170px;
	}

	.craftbeer-lineup-list__body > p:not(:last-child) {
		font-size: 1.2rem;
		line-height: 1.65;
	}
}

/* =========================================
   craftbeer-shops
========================================= */
.craftbeer-shops {
	background: rgba(9, 51, 34, 1);
	color: #fff;
	padding: 3em 0;
}
.craftbeer-shop-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.craftbeer-shop-list li {
	background: #6d3f26;
	border-radius: 8px;
	overflow: hidden;
}
.craftbeer-shop-list a:hover img,
.craftbeer-shop-list a:focus img {
	transform: scale(1.04);
}
.craftbeer-shop-list h3 {
	font-size: clamp(1.4rem, 1.4rem + 0.5vw, 1.8rem);
	line-height: 1.35;
	letter-spacing: 0;
	padding: 0.75em 1em 1.5em;
	position: relative;
}
.craftbeer-shop-list a {
	height: 100%;
	display: block;
	overflow: hidden;
	background: #6d3f26;
	color: #fff;
	border-radius: 8px;
	color: var(--craft-ink);
	text-decoration: none;
	position: relative;
}
.craftbeer-shop-list a::after {
	content: "";
	width: 4em;
	height: 0.5em;
	background: #fff;
	clip-path: polygon(0% calc(100% - 1px), calc(100% - 2px) calc(100% - 1px), calc(100% - 0.5em - 1px) 0%, calc(100% - 0.5em) 0%, 100% 100%, 0% 100%);
	position: absolute;
	bottom: 1em;
	right: 1em;
}
.craftbeer-shop-list a:hover,
.craftbeer-shop-list a:focus {
	color: #fbd03d;
}
.craftbeer-shop-list a:hover::after,
.craftbeer-shop-list a:focus::after {
	background: #fbd03d;
}
.craftbeer-shop-list img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	transition: transform 0.35s ease;
}
.craftbeer-shop-list a:hover img,
.craftbeer-shop-list a:focus img {
	transform: scale(1.04);
}
.craftbeer-shop-link {
}
.craftbeer-shop-link {
	width: 100%;
}
.craftbeer-shop-link a {
	font-family: var(--craft-font-serif);
	background: #efebdb;
	color: #6a3e1d;
	font-weight: 700;
	width: 92%;
	max-width: 480px;
	height: 60px;
	font-size: 2rem;
	display: flex;
	justify-content: center;
	align-items: center;
	column-gap: 0.5em;
	margin: 0 auto 0;
	padding: 0.6em 1em 0.75em 1em;
	position: relative;
	border-radius: 0.25em;
	text-decoration: none;
}
.craftbeer-shop-link a::before {
	content: "";
	background: #6a3e1d;
	-webkit-mask: url("../img/about/craftbeer/craftbeer_shop_icon_facility.svg") center / contain no-repeat;
	mask: url("../img/about/craftbeer/craftbeer_shop_icon_facility.svg") center / contain no-repeat;
	transition: background-color 0.3s ease;
	display: block;
	width: 2em;
	height: 2em;
	position: relative;
}

@media only screen and (max-width: 999px) {
	.craftbeer-shop-link a {
		margin: 0 auto 0;
	}
}
@media only screen and (max-width: 768px) {
	.craftbeer-shop-link a {
		height: 7vw;
		min-height: 3em;
		font-size: clamp(1.4rem, 3vw, 2rem);
		line-height: 1.2;
		margin: 0 auto 0;
		padding: 0.25em;
	}
}
@media (max-width: 999px) {
	.craftbeer-shop-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 768px) {
	.craftbeer-shop-list h3 {
		font-size: clamp(1.3rem, 1.2rem + 0.4vw, 1.8rem);
	}
}
@media (max-width: 480px) {
	.craftbeer-shop-list {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}
	.craftbeer-shop-list h3 {
		font-size: clamp(1.3rem, 1rem + 1.5vw, 1.8rem);
	}
}

/* <wbr>を優先的な改行候補として使用する文章 */
.u-wbr-priority {
	word-break: keep-all;
	overflow-wrap: break-word;
	line-break: strict;
}

.u-wbr-priority wbr {
	display: inline;
}

/* =========================================
   Full-width visual sections
   craftbeer-stickler / craftbeer-vision
========================================= */
.craftbeer-stickler,
.craftbeer-vision {
	position: relative;
	isolation: isolate;
	width: 100%;
	overflow: hidden;
}

.craftbeer-stickler > .craftbeer-section__inner,
.craftbeer-vision > .craftbeer-section__inner {
	position: relative;
	z-index: 2;
	width: 92%;
	max-width: 1080px;
	min-height: inherit;
	margin-right: auto;
	margin-left: auto;
}

/* サッポロビールのこだわり：背景画像をセクション全面に配置 */
.craftbeer-stickler__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
}

.craftbeer-stickler__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

.craftbeer-stickler::after {
	z-index: 1;
}

.craftbeer-stickler__content {
	width: min(54%, 620px);
	min-height: inherit;
	margin-left: auto;
	padding-right: 0;
	padding-left: clamp(24px, 5vw, 2.5em);
}

/* 私たちの夢：背景画像をセクション全面に配置 */
.craftbeer-vision {
	min-height: clamp(400px, 42vw, 640px);
	padding: 0;
	background: #14271f;
	color: #fff;
}

.craftbeer-vision::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(90deg, rgba(7, 13, 15, 0.82) 0%, rgba(8, 16, 18, 0.68) 48%, rgba(8, 16, 18, 0.2) 100%), linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.24));
	pointer-events: none;
	opacity: 0;
}

.craftbeer-vision__image {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	min-height: 0;
}

.craftbeer-vision__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

.craftbeer-vision > .craftbeer-section__inner {
	display: flex;
	align-items: center;
	min-height: inherit;
}

.craftbeer-vision__content {
	width: min(75%, 820px);
	padding: clamp(42px, 7vw, 64px) 0;
	background: transparent;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}

.craftbeer-page .craftbeer-vision__content h2 {
	margin: 0 0 0.75em;
	color: #fff;
	text-align: left;
}

.craftbeer-vision__content p {
	color: #fff;
	text-align: left;
}

@media (max-width: 768px) {
	.craftbeer-stickler__media img {
		object-position: 42% center;
	}

	.craftbeer-stickler__content {
		width: 100%;
		margin-left: 0;
		padding-right: 0;
		padding-left: 0;
	}

	.craftbeer-vision {
		min-height: 100vw;
	}

	.craftbeer-vision::after {
		background: linear-gradient(180deg, rgba(7, 13, 15, 0.28) 0%, rgba(7, 13, 15, 0.82) 62%, rgba(7, 13, 15, 0.92) 100%);
	}

	.craftbeer-vision__image img {
		object-position: 62% center;
	}

	.craftbeer-vision > .craftbeer-section__inner {
		align-items: flex-end;
	}

	.craftbeer-vision__content {
		width: 100%;
	}
}

@media (max-width: 480px) {
	.craftbeer-vision {
		min-height: 500px;
	}

	.craftbeer-vision__content {
		padding-top: 150px;
	}

	.craftbeer-page .craftbeer-vision__content h2 {
		margin-bottom: 0.9em;
	}
}

/* =========================================
   Full-width brewery process
========================================= */
.craftbeer-stickler-process {
	position: relative;
	isolation: isolate;
	width: 100%;
	min-height: clamp(520px, 50vw, 700px);
	padding: 0;
	overflow: hidden;
	background: #173526;
	color: #fff;
}

.craftbeer-stickler-process__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
}

.craftbeer-stickler-process__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

.craftbeer-stickler-process::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	width: auto;
	background: linear-gradient(90deg, rgba(18, 22, 17, 0.05) 0%, rgba(16, 31, 23, 0.18) 28%, rgba(11, 40, 27, 0.86) 43%, rgba(9, 34, 24, 0.94) 100%);
	pointer-events: none;
}

.craftbeer-stickler-process > .craftbeer-section__inner {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 36%) minmax(0, 64%);
	align-content: center;
	width: 92%;
	max-width: 1080px;
	min-height: inherit;
	margin-right: auto;
	margin-left: auto;
	padding: clamp(40px, 5vw, 68px) 0;
}

.craftbeer-page .craftbeer-stickler-process > .craftbeer-section__inner > h2,
.craftbeer-stickler-process > .craftbeer-section__inner > p,
.craftbeer-stickler-process__steps,
.craftbeer-stickler-process__points {
	grid-column: 2;
}

.craftbeer-page .craftbeer-stickler-process > .craftbeer-section__inner > h2 {
	position: relative;
	margin: 0 0 0.65em;
	padding-bottom: 0.7em;
	color: #fff;
	font-family: var(--craft-font-serif);
	font-size: clamp(2.3rem, 1.65rem + 1.35vw, 3.6rem);
	font-weight: 600;
	line-height: 1.45;
	letter-spacing: 0.06em;
	text-align: left;
}

.craftbeer-page .craftbeer-stickler-process > .craftbeer-section__inner > h2::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: min(440px, 78%);
	height: 8px;
	background:
		linear-gradient(#b99759, #b99759) left center / calc(100% - 34px) 1px no-repeat,
		radial-gradient(circle, #b99759 0 2px, transparent 3px) right center / 10px 8px repeat-x;
}

.craftbeer-stickler-process > .craftbeer-section__inner > p {
	max-width: none;
	margin: 0 0 clamp(20px, 2.8vw, 34px);
	color: #f6efe4;
	font-size: clamp(1.3rem, 1.17rem + 0.25vw, 1.6rem);
	line-height: 1.9;
	text-align: left;
}

.craftbeer-stickler-process__steps {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: clamp(8px, 1vw, 12px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.craftbeer-stickler-process__steps > li {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 0;
	min-height: 208px;
	padding: 14px 8px 16px;
	border: 1px solid rgba(221, 190, 124, 0.68);
	border-radius: 8px;
	background: rgba(5, 34, 23, 0.66);
	text-align: center;
}

.craftbeer-stickler-process__steps > li:not(:last-child)::after {
	content: "";
	width: clamp(8px, 1vw, 12px);
	height: clamp(16px, 2vw, 24px);
	position: absolute;
	top: 50%;
	right: clamp(-8px, -1vw, -12px);
	z-index: 2;
	transform: translate(50%, -50%);
	background-color: #d9b56f;
	clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
	font-weight: 700;
	line-height: 1;
}

.craftbeer-stickler-process__steps h3 {
	margin: 0 0 0.65em;
	color: #ead7aa;
	font-size: clamp(1.35rem, 1.14rem + 0.35vw, 1.65rem);
	line-height: 1.35;
}

.craftbeer-stickler-process__steps > li > div {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin: 0 auto 0.6em;
}

.craftbeer-stickler-process__steps img {
	width: 58px;
	height: 58px;
	object-fit: contain;
	filter: brightness(0) invert(84%) sepia(26%) saturate(615%);
}

.craftbeer-stickler-process__steps p {
	margin: auto 0 0;
	color: #f4ead8;
	font-size: clamp(1rem, 0.95rem + 0.12vw, 1.15rem);
	line-height: 1.55;
}

.craftbeer-stickler-process__points {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;
	margin: clamp(18px, 2.4vw, 28px) 0 0;
	padding: 0;
	overflow: hidden;
	border: 1px solid rgba(222, 194, 143, 0.7);
	border-radius: 8px;
	background: rgba(255, 250, 240, 0.96);
	list-style: none;
}

.craftbeer-stickler-process__points > li {
	display: grid;
	grid-template-columns: 62px minmax(0, 1fr);
	gap: 14px;
	align-items: center;
	padding: clamp(15px, 1.8vw, 22px);
	background: transparent;
	color: #5a422e;
}

.craftbeer-stickler-process__points > li + li {
	border-left: 1px solid rgba(183, 156, 115, 0.5);
}

.craftbeer-stickler-process__points img {
	width: 50px;
	height: 50px;
	object-fit: contain;
}

.craftbeer-stickler-process__points h3 {
	margin: 0 0 0.25em;
	color: #6b4a2d;
	font-size: clamp(1.4rem, 1.2rem + 0.35vw, 1.75rem);
}

.craftbeer-stickler-process__points p {
	margin: 0;
	font-size: clamp(1.15rem, 1.05rem + 0.18vw, 1.35rem);
	line-height: 1.6;
}

@media (max-width: 999px) {
	.craftbeer-stickler-process {
		min-height: auto;
	}

	.craftbeer-stickler-process > .craftbeer-section__inner {
		grid-template-columns: minmax(0, 28%) minmax(0, 72%);
		padding: 42px 0;
	}

	.craftbeer-stickler-process__steps {
		grid-template-columns: repeat(5, minmax(92px, 1fr));
		overflow-x: auto;
		padding-bottom: 8px;
	}
}

@media (max-width: 768px) {
	.craftbeer-stickler-process__media {
		position: absolute;
		inset: 0;
		z-index: 0;
		width: 100%;
		height: 100%;
	}

	.craftbeer-stickler-process__media img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center center;
	}

	.craftbeer-stickler-process > .craftbeer-section__inner {
		position: relative;
		z-index: 2;
		width: 92%;
		max-width: 1080px;
		margin-right: auto;
		margin-left: auto;
		grid-template-columns: 1fr;
	}

	.craftbeer-stickler-process__steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		overflow: visible;
	}

	.craftbeer-stickler-process__steps > li:not(:last-child)::after {
		display: none;
	}

	.craftbeer-stickler-process__steps > li:last-child {
		grid-column: 1 / -1;
	}

	.craftbeer-stickler-process__points {
		grid-template-columns: 1fr;
	}

	.craftbeer-stickler-process__points > li + li {
		border-top: 1px solid rgba(183, 156, 115, 0.5);
		border-left: 0;
	}
}

@media (max-width: 480px) {
	.craftbeer-stickler-process__media {
		height: 210px;
	}

	.craftbeer-stickler-process::before {
		inset: 210px 0 0;
	}

	.craftbeer-stickler-process__steps {
		grid-template-columns: 1fr;
	}

	.craftbeer-stickler-process__steps > li:last-child {
		grid-column: auto;
	}
}

/* =========================================
   Features list inside content
========================================= */
.craftbeer-features {
	overflow: hidden;
}

.craftbeer-features__lead {
	position: relative;
	align-items: self-start;
}

.craftbeer-features__image {
	position: relative;
	z-index: 1;
}

.craftbeer-features__content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	min-width: 0;
	height: 100%;
	padding-top: 0.15em;
}

/* 本文とカードの間の余白を抑えつつ、画像側へ重ねる */
.craftbeer-features__content > p {
	margin-bottom: clamp(22px, 3vw, 34px);
}

.craftbeer-features__content .craftbeer-features__list {
	position: relative;
	z-index: 3;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(12px, 1.6vw, 20px);
	width: calc(100% + clamp(120px, 17vw, 240px));
	margin: auto 0 0 clamp(-120px, -10vw, -72px);
	padding: 0;
	list-style: none;
}

/* 既存の外配置用マージンを無効化 */
.craftbeer-features__list {
	margin-top: 0;
	margin-left: 0;
}

.craftbeer-features__item {
	min-height: 100%;
}

@media (max-width: 999px) {
	.craftbeer-features__content .craftbeer-features__list {
		width: calc(100% + 150px);
		margin-left: -86px;
	}
}

@media (max-width: 768px) {
	.craftbeer-features__lead {
		display: grid;
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.craftbeer-features__content {
		padding: 0 4px;
	}

	.craftbeer-features__content > p {
		margin-bottom: 22px;
	}

	.craftbeer-features__content .craftbeer-features__list {
		grid-template-columns: 1fr;
		gap: 14px;
		width: 100%;
		margin: 0;
	}
}

/* 「気になる一杯から〜」左右罫線 */
.craftbeer-shops__cta-heading {
	padding-top: clamp(32px, 4vw, 48px);
	padding-bottom: clamp(18px, 2.5vw, 30px);
}

.craftbeer-shops__cta-heading h3 {
	display: flex;
	align-items: center;
	gap: 1em;
	width: 100%;
	margin: 0;
	color: #fff;
	font-family: var(--craft-font-serif);
	font-size: clamp(1.8rem, 1.45rem + 0.8vw, 2.5rem);
	line-height: 1.5;
	text-align: center;
}

.craftbeer-shops__cta-heading h3::before,
.craftbeer-shops__cta-heading h3::after {
	content: "";
	flex: 1 1 auto;
	min-width: 24px;
	height: 1px;
	background: rgba(239, 235, 219, 0.72);
}

@media (max-width: 480px) {
	.craftbeer-shops__cta-heading h3 {
		gap: 0.65em;
		font-size: clamp(1.55rem, 4.8vw, 1.9rem);
	}

	.craftbeer-shops__cta-heading h3::before,
	.craftbeer-shops__cta-heading h3::after {
		min-width: 14px;
	}
}

/* =========================================
   Typography scale
   craftbeer-lineup / craftbeer-shops 基準
   例外：hero / stickler / vision
========================================= */
.craftbeer-page {
	--craft-type-h2: clamp(2rem, 1.55rem + 1.5vw, 3.2rem);
	--craft-type-h3: clamp(1.8rem, 1.45rem + 0.8vw, 2.5rem);
	--craft-type-h4: clamp(1.45rem, 1.25rem + 0.35vw, 1.75rem);
	--craft-type-body: clamp(1.4rem, 1.1rem + 0.5vw, 1.6rem);
	--craft-type-small: clamp(1.1rem, 1.04rem + 0.12vw, 1.25rem);
}

/*
 * 背景ビジュアル専用の3セクションは既存サイズを維持。
 * それ以外のsection内の文字サイズを共通化。
 */
.craftbeer-page main section:not(.craftbeer-hero):not(.craftbeer-stickler):not(.craftbeer-vision) h2 {
	font-size: var(--craft-type-h2);
}

.craftbeer-page main section:not(.craftbeer-hero):not(.craftbeer-stickler):not(.craftbeer-vision) h3 {
	font-size: var(--craft-type-h3);
}

.craftbeer-page main section:not(.craftbeer-hero):not(.craftbeer-stickler):not(.craftbeer-vision) h4 {
	font-size: var(--craft-type-h4);
}

.craftbeer-page main section:not(.craftbeer-hero):not(.craftbeer-stickler):not(.craftbeer-vision) p,
.craftbeer-page main section:not(.craftbeer-hero):not(.craftbeer-stickler):not(.craftbeer-vision) dd {
	font-size: var(--craft-type-body);
}

/* 補足・カード内の短い説明 */
.craftbeer-page main section:not(.craftbeer-hero):not(.craftbeer-stickler):not(.craftbeer-vision) :is(.craftbeer-features__item-body, .craftbeer-stickler-process__steps, .craftbeer-stickler-process__points, .craftbeer-lineup-list__body, .craftbeer-lineup-list__hint) p {
	font-size: var(--craft-type-small);
}

/* 基準セクションも変数へ統一 */
.craftbeer-lineup .craftbeer-section__heading h2,
.craftbeer-shops .craftbeer-section__heading h2 {
	font-size: var(--craft-type-h2);
}

.craftbeer-lineup h3,
.craftbeer-shops h3 {
	font-size: var(--craft-type-h3);
}

.craftbeer-lineup p,
.craftbeer-shops p {
	font-size: var(--craft-type-body);
}

.craftbeer-lineup-list__hint h4 {
	font-size: var(--craft-type-h4);
}

.craftbeer-lineup-list__hint p,
.craftbeer-lineup-list__body > p:not(:last-child) {
	font-size: var(--craft-type-small);
}

@media (max-width: 480px) {
	.craftbeer-page {
		--craft-type-h2: clamp(2rem, 6vw, 2.8rem);
		--craft-type-h3: clamp(1.55rem, 4.8vw, 1.9rem);
		--craft-type-h4: clamp(1.35rem, 4vw, 1.65rem);
		--craft-type-body: clamp(1.2rem, 3.6vw, 1.35rem);
		--craft-type-small: clamp(1.1rem, 3.3vw, 1.25rem);
	}
}
.craftbeer-philosophy .craftbeer-philosophy__title {
	font-size: clamp(3rem, 2.2rem + 2vw, 5.4rem) !important;
}
.craftbeer-philosophy .craftbeer-philosophy__en {
	font-size: clamp(2rem, 1.6rem + 1vw, 3.4rem) !important;
}
.craftbeer-stickler-process .craftbeer-stickler-process__points h3 {
	font-size: clamp(1.45rem, 1.25rem + 0.35vw, 1.75rem) !important;
	line-height: 1.4;
	letter-spacing: 0;
}
.craftbeer-stickler-technique__visual > p {
	font-size: clamp(1.6rem, 1.25rem + 1vw, 2.1rem) !important;
}
.craftbeer-encounter .craftbeer-encounter__lead {
	font-size: clamp(1.8rem, 1rem + 1vw, 2.7rem) !important;
}
.craftbeer-encounter .craftbeer-encounter__text {
	font-size: clamp(1.3rem, 1rem + 0.5vw, 1.6rem) !important;
	font-feature-settings: normal !important;
}
.craftbeer-lineup .craftbeer-lineup-list__body h3 {
	font-size: clamp(1.4rem, 1.2rem + 0.75vw, 2rem) !important;
	line-height: 1.35;
	letter-spacing: 0;
}
.craftbeer-shops .craftbeer-shop-list h3 {
	font-size: clamp(1.4rem, 1.2rem + 0.75vw, 2rem) !important;
	line-height: 1.35;
	letter-spacing: 0;
}

/* =========================================
   Process steps: SP one-column layout
========================================= */
@media (max-width: 768px) {
	.craftbeer-stickler-process__steps {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.craftbeer-stickler-process__steps > li,
	.craftbeer-stickler-process__steps > li:last-child {
		display: grid;
		grid-template-columns: 54px minmax(0, 1fr);
		grid-template-rows: auto auto;
		column-gap: 14px;
		row-gap: 0.35em;
		align-items: center;
		min-height: 0;
		padding: 16px 18px;
		text-align: left;
	}

	.craftbeer-stickler-process__steps > li > div {
		grid-column: 1;
		grid-row: 1 / 3;
		width: 54px;
		height: 54px;
		margin: 0;
	}

	.craftbeer-stickler-process__steps > li > h3 {
		grid-column: 2;
		grid-row: 1;
		margin: 0;
	}

	.craftbeer-stickler-process__steps > li > h3 span {
		display: inline;
		margin: 0 0.5em 0 0;
		font-size: 0.78em;
	}

	.craftbeer-stickler-process__steps > li > p {
		grid-column: 2;
		grid-row: 2;
		margin: 0;
	}

	.craftbeer-stickler-process__steps > li:not(:last-child)::after {
		display: none;
	}
}

@media (max-width: 480px) {
	.craftbeer-stickler-process__steps > li,
	.craftbeer-stickler-process__steps > li:last-child {
		grid-template-columns: 46px minmax(0, 1fr);
		column-gap: 12px;
		padding: 14px;
	}

	.craftbeer-stickler-process__steps > li > div {
		width: 46px;
		height: 46px;
	}

	.craftbeer-stickler-process__steps > li > div img {
		width: 42px;
		height: 42px;
	}
}