/**
 * AOSE WordPress
 * aose-components.css
 *
 * AOSE 共通UIコンポーネント
 * 対象：aose.jp / SWELL CHILD
 *
 * 役割：
 * - HERO基本形
 * - Button
 * - Tag
 * - Card
 * - CTA
 * - Story
 * - 下部3分割
 * - Ingredients
 * - STEP
 * - Note
 * - Information Box
 * - Map
 *
 * 注意：
 * - ページ種別固有のHERO高さ・特殊配置は
 *   home / parent / child CSS側で定義する
 * - animation / hover motion は aose-motion.css
 * - FAQの動作はSWELL標準を優先する
 * - Shopify商品UIは aose-commerce.css
 *
 * Based on:
 * 青清 AOSE WordPress再構築 全体設計仕様書 v1.0
 */


/* =========================================================
   1. HERO
   ========================================================= */

/*
 * HEROの共通土台。
 *
 * 実際の高さは
 * home / parent / child 等から
 * --aose-hero-min-height を上書きする。
 */
.aose-hero {
	--aose-hero-min-height: 22rem;
	--aose-hero-object-position: 50% 50%;
	--aose-hero-overlay-start: rgba(40, 38, 34, 0.08);
	--aose-hero-overlay-end: rgba(40, 38, 34, 0.48);

	position: relative;
	display: grid;
	align-items: end;
	min-height: var(--aose-hero-min-height);
	overflow: hidden;
	background-color: var(--aose-color-ink);
	color: var(--aose-color-white);
}


/*
 * HERO背景画像領域
 */
.aose-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}


/*
 * picture / image
 */
.aose-hero__media :where(
	picture,
	img
) {
	display: block;
	width: 100%;
	height: 100%;
}


/*
 * 画像は背景的に全面表示。
 * 写真位置はCustom Propertyで調整する。
 */
.aose-hero__media img {
	object-fit: cover;
	object-position: var(--aose-hero-object-position);
}


/*
 * 可読性確保用Overlay。
 *
 * 写真ごとの実コントラスト確認は必須。
 */
.aose-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(
			to bottom,
			var(--aose-hero-overlay-start) 20%,
			var(--aose-hero-overlay-end) 100%
		);
}


/*
 * HERO本文
 */
.aose-hero__content {
	position: relative;
	z-index: 2;
	width: 100%;
	padding-block:
		var(--aose-space-8)
		var(--aose-space-5);
}


/*
 * HEROタイトル・コピーの最大幅。
 */
.aose-hero__body {
	max-width: var(--aose-width-content);
}


/*
 * HERO補足コピー
 */
.aose-hero__lead {
	max-width: 38rem;
	margin-block-start: var(--aose-space-2);
	font-family: var(--aose-font-body);
	font-size: 1rem;
	line-height: 1.8;
	color: var(--aose-color-white);
}


/*
 * HERO上で背景が十分暗い写真の場合のみ
 * Overlayを弱めるModifier。
 */
.aose-hero--overlay-light {
	--aose-hero-overlay-start: rgba(40, 38, 34, 0.02);
	--aose-hero-overlay-end: rgba(40, 38, 34, 0.30);
}


/*
 * 強めのOverlay。
 */
.aose-hero--overlay-strong {
	--aose-hero-overlay-start: rgba(40, 38, 34, 0.16);
	--aose-hero-overlay-end: rgba(40, 38, 34, 0.62);
}


/* =========================================================
   2. BUTTON
   ========================================================= */

/*
 * Button共通。
 *
 * SPは48px以上を基本。
 */
.aose-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--aose-space-1);

	min-height: 48px;
	padding:
		0.75rem
		var(--aose-space-3);

	border: 1px solid transparent;
	border-radius: var(--aose-radius-md);

	font-family: var(--aose-font-ui);
	font-size: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
	font-weight: var(--aose-font-weight-medium);
	line-height: 1.4;
	text-align: center;
	text-decoration: none;

	cursor: pointer;
}


/* ---------------------------------------------------------
   2-1. Primary
   --------------------------------------------------------- */

.aose-button--primary {
	background-color: var(--aose-color-brown);
	border-color: var(--aose-color-brown);
	color: var(--aose-color-white);
}


/* ---------------------------------------------------------
   2-2. Secondary
   --------------------------------------------------------- */

.aose-button--secondary {
	background-color: transparent;
	border-color: var(--aose-color-brown);
	color: var(--aose-color-brown);
}


/* ---------------------------------------------------------
   2-3. Light
   写真上・濃色背景用
   --------------------------------------------------------- */

.aose-button--light {
	background-color: var(--aose-color-white);
	border-color: var(--aose-color-white);
	color: var(--aose-color-ink);
}


/* ---------------------------------------------------------
   2-4. Full Width
   --------------------------------------------------------- */

.aose-button--full {
	width: 100%;
}


/* ---------------------------------------------------------
   2-5. Text Link
   --------------------------------------------------------- */

.aose-text-link {
	display: inline-flex;
	align-items: center;
	gap: var(--aose-space-1);

	font-family: var(--aose-font-ui);
	font-size: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
	font-weight: var(--aose-font-weight-medium);
	line-height: 1.4;

	color: var(--aose-color-brown);
	text-decoration: none;
}


/*
 * Arrow。
 * 動きは motion.css 側。
 */
.aose-text-link::after {
	content: "→";
	display: inline-block;
}


/* =========================================================
   3. TAG
   ========================================================= */

.aose-tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-height: 28px;
	padding:
		0.25rem
		0.75rem;

	border: 1px solid var(--aose-color-line);
	border-radius: var(--aose-radius-pill);

	background-color: var(--aose-color-koji-white);
	color: var(--aose-color-text);
}


/*
 * Accent tag
 */
.aose-tag--accent {
	background-color: var(--aose-color-brown);
	border-color: var(--aose-color-brown);
	color: var(--aose-color-white);
}


/* =========================================================
   4. CARD
   ========================================================= */

/*
 * AOSE標準カード。
 *
 * 画像比率 3:2
 * Radius 8px
 * Soft Shadow
 */
.aose-card {
	position: relative;
	min-width: 0;
	overflow: hidden;

	background-color: var(--aose-color-white);
	border-radius: var(--aose-radius-md);
	box-shadow: var(--aose-shadow-soft);
}


/*
 * カード全体をリンクにする場合。
 */
.aose-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;

	color: inherit;
	text-decoration: none;
}


/*
 * Media
 */
.aose-card__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 3 / 2;
	background-color: var(--aose-color-koji-white);
}


/*
 * Image
 */
.aose-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}


/*
 * Content
 */
.aose-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: var(--aose-space-2);

	padding: var(--aose-space-3);
}


/*
 * Card meta
 */
.aose-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap:
		var(--aose-space-1)
		var(--aose-space-2);
}


/*
 * Card title
 * 最大2行を標準。
 */
.aose-card__title {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;

	margin: 0;

	font-family: var(--aose-font-heading);
	font-size: 1.125rem;
	font-weight: var(--aose-font-weight-medium);
	line-height: 1.5;

	color: var(--aose-color-ink);
}


/*
 * Card description
 * 最大2行を標準。
 */
.aose-card__text {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;

	margin: 0;

	font-size: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
	line-height: 1.6;

	color: var(--aose-color-text-muted);
}


/*
 * 重要告知等、
 * 省略してはいけないカード用。
 */
.aose-card--unclamped .aose-card__title,
.aose-card--unclamped .aose-card__text {
	display: block;
	overflow: visible;
	-webkit-line-clamp: unset;
}


/*
 * Footer
 */
.aose-card__footer {
	margin-block-start: auto;
	padding-block-start: var(--aose-space-1);
}


/*
 * Border主体のカード。
 */
.aose-card--border {
	border: 1px solid var(--aose-color-line);
	box-shadow: none;
}


/*
 * 背景Soft。
 */
.aose-card--soft {
	background-color: var(--aose-color-koji-white);
}


/* =========================================================
   5. CTA
   ========================================================= */

/*
 * 共通CTA。
 */
.aose-cta {
	display: grid;
	gap: var(--aose-space-3);

	padding:
		var(--aose-space-5)
		var(--aose-space-3);

	border-radius: var(--aose-radius-md);
	background-color: var(--aose-color-koji-white);
}


/*
 * CTA本文
 */
.aose-cta__body {
	max-width: var(--aose-width-content);
}


/*
 * CTA title
 */
.aose-cta__title {
	margin: 0;

	font-family: var(--aose-font-heading);
	font-size: clamp(1.5rem, 1.35rem + 0.75vw, 2rem);
	font-weight: var(--aose-font-weight-medium);
	line-height: 1.45;

	color: var(--aose-color-ink);
}


/*
 * CTA description
 */
.aose-cta__text {
	margin-block-start: var(--aose-space-2);
	margin-block-end: 0;

	line-height: 1.8;
}


/*
 * CTA action
 */
.aose-cta__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--aose-space-2);
}


/*
 * 強調CTA
 */
.aose-cta--brown {
	background-color: var(--aose-color-brown);
	color: var(--aose-color-white);
}

.aose-cta--brown .aose-cta__title,
.aose-cta--brown .aose-cta__text {
	color: var(--aose-color-white);
}


/* =========================================================
   6. STORY
   ========================================================= */

/*
 * AOSE大型Story共通部品。
 *
 * Story用の大きな上下余白は
 * layoutのSectionと組み合わせて使用する。
 */
.aose-story {
	position: relative;
}


/*
 * 写真＋本文。
 */
.aose-story__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--aose-space-4);
	align-items: center;
}


/*
 * Media
 */
.aose-story__media {
	min-width: 0;
	overflow: hidden;
	border-radius: var(--aose-radius-sm);
}


/*
 * Story写真。
 *
 * 固定比率を強制しない。
 * 写真の意味に応じた比率を利用可能。
 */
.aose-story__media img {
	display: block;
	width: 100%;
	height: auto;
}


/*
 * Content
 */
.aose-story__content {
	min-width: 0;
}


/*
 * Story body
 */
.aose-story__text {
	max-width: var(--aose-width-narrow);
}


/* =========================================================
   7. BOTTOM 3 BLOCKS
   ========================================================= */

/*
 * ページ下部の共通3分割外枠。
 *
 * SP：1列
 * Tablet：2列
 * PC：3列
 *
 * 実際の中身は、
 * 関連記事・営業・LINE・店舗等を組み合わせる。
 */
.aose-bottom-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--aose-space-3);
}


/*
 * 各Block。
 */
.aose-bottom-block {
	min-width: 0;
	padding: var(--aose-space-3);

	border: 1px solid var(--aose-color-line);
	border-radius: var(--aose-radius-md);

	background-color: var(--aose-color-white);
}


/*
 * Bottom block title
 */
.aose-bottom-block__title {
	margin: 0 0 var(--aose-space-2);

	font-family: var(--aose-font-heading);
	font-size: 1.25rem;
	font-weight: var(--aose-font-weight-medium);
	line-height: 1.5;
}


/*
 * Bottom block body
 */
.aose-bottom-block__body {
	font-size: 0.9375rem;
	line-height: 1.7;
}


/*
 * 情報量の少ないケースで
 * 3列を無理に維持しない。
 */
.aose-bottom-grid--single {
	grid-template-columns: minmax(0, 1fr);
}


/* =========================================================
   8. INGREDIENTS
   ========================================================= */

/*
 * 材料一覧。
 *
 * 固定子ページB・投稿Bで共用する。
 */
.aose-ingredients {
	padding: var(--aose-space-3);

	border: 1px solid var(--aose-color-line);
	border-radius: var(--aose-radius-md);

	background-color: var(--aose-color-koji-white);
}


/*
 * Title
 */
.aose-ingredients__title {
	margin: 0 0 var(--aose-space-3);

	font-family: var(--aose-font-heading);
	font-size: 1.375rem;
	font-weight: var(--aose-font-weight-medium);
	line-height: 1.5;
}


/*
 * List
 */
.aose-ingredients__list {
	display: grid;
	gap: 0;

	margin: 0;
	padding: 0;

	list-style: none;
}


/*
 * Row
 */
.aose-ingredients__item {
	display: grid;
	grid-template-columns:
		minmax(0, 1fr)
		auto;
	gap: var(--aose-space-2);

	padding-block: var(--aose-space-2);

	border-block-end:
		1px solid var(--aose-color-line);
}


/*
 * 最終行
 */
.aose-ingredients__item:last-child {
	border-block-end: 0;
}


/*
 * Ingredient name
 */
.aose-ingredients__name {
	min-width: 0;
}


/*
 * Amount
 */
.aose-ingredients__amount {
	text-align: right;
	white-space: nowrap;
}


/* =========================================================
   9. STEP
   ========================================================= */

/*
 * STEPは必ず意味上の順序を持つ
 * ol等で実装することを前提とする。
 */
.aose-steps {
	counter-reset: aose-step;

	display: grid;
	gap: var(--aose-space-4);

	margin: 0;
	padding: 0;

	list-style: none;
}


/*
 * Individual step
 */
.aose-step {
	counter-increment: aose-step;

	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--aose-space-3);

	min-width: 0;
}


/*
 * Visible step number
 */
.aose-step::before {
	content: counter(aose-step);

	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 2.5rem;
	height: 2.5rem;

	border-radius: var(--aose-radius-pill);

	background-color: var(--aose-color-brown);
	color: var(--aose-color-white);

	font-family: var(--aose-font-ui);
	font-size: 0.875rem;
	font-weight: var(--aose-font-weight-medium);
	line-height: 1;
}


/*
 * Step body
 */
.aose-step__body {
	min-width: 0;
}


/*
 * Step title
 */
.aose-step__title {
	margin: 0 0 var(--aose-space-1);

	font-family: var(--aose-font-heading);
	font-size: 1.25rem;
	font-weight: var(--aose-font-weight-medium);
	line-height: 1.5;
}


/*
 * Step text
 */
.aose-step__text {
	margin: 0;
	line-height: 1.8;
}


/*
 * Step image
 */
.aose-step__media {
	margin-block-start: var(--aose-space-2);
	overflow: hidden;
	border-radius: var(--aose-radius-sm);
}

.aose-step__media img {
	display: block;
	width: 100%;
	height: auto;
}


/* =========================================================
   10. NOTE
   ========================================================= */

/*
 * 注意・ポイント。
 *
 * 色だけに依存せず、
 * BorderとLabelも利用する。
 */
.aose-note {
	padding: var(--aose-space-3);

	border:
		1px solid
		var(--aose-color-koji-beige);

	border-inline-start:
		4px solid
		var(--aose-color-miso);

	border-radius: var(--aose-radius-md);

	background-color: var(--aose-color-koji-white);
}


/*
 * Note label
 */
.aose-note__label {
	display: block;

	margin-block-end: var(--aose-space-1);

	font-family: var(--aose-font-ui);
	font-size: 0.875rem;
	font-weight: var(--aose-font-weight-medium);
	line-height: 1.45;

	color: var(--aose-color-brown);
}


/*
 * Note body
 */
.aose-note__body {
	line-height: 1.75;
}


/* =========================================================
   11. INFORMATION BOX
   ========================================================= */

/*
 * 営業、予約、利用条件などの
 * 重要情報共通枠。
 */
.aose-info {
	padding: var(--aose-space-3);

	border: 1px solid var(--aose-color-line);
	border-radius: var(--aose-radius-md);

	background-color: var(--aose-color-white);
	box-shadow: var(--aose-shadow-soft);
}


/*
 * 強調情報。
 */
.aose-info--important {
	border-inline-start:
		4px solid
		var(--aose-color-brown);
}


/*
 * Info title
 */
.aose-info__title {
	margin: 0 0 var(--aose-space-2);

	font-family: var(--aose-font-heading);
	font-size: 1.25rem;
	font-weight: var(--aose-font-weight-medium);
	line-height: 1.5;
}


/*
 * Info rows
 */
.aose-info__list {
	display: grid;
	gap: 0;

	margin: 0;
}


/*
 * dl形式を想定。
 */
.aose-info__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--aose-space-1);

	padding-block: var(--aose-space-2);

	border-block-end:
		1px solid var(--aose-color-line);
}


.aose-info__row:last-child {
	border-block-end: 0;
}


/*
 * Label
 */
.aose-info__label {
	font-weight: var(--aose-font-weight-medium);
}


/*
 * Value
 */
.aose-info__value {
	margin: 0;
}


/* =========================================================
   12. MAP
   ========================================================= */

/*
 * Google Maps等の共通Map枠。
 *
 * iframeにはHTML側で
 * 適切なtitle属性を付ける。
 */
.aose-map {
	position: relative;
	width: 100%;
	overflow: hidden;

	aspect-ratio: 16 / 9;

	border-radius: var(--aose-radius-sm);
	background-color: var(--aose-color-koji-white);
}


/*
 * iframe
 */
.aose-map iframe {
	position: absolute;
	inset: 0;

	display: block;
	width: 100%;
	height: 100%;

	border: 0;
}


/* =========================================================
   13. SIMPLE DIVIDER
   ========================================================= */

.aose-divider {
	width: 100%;
	height: 1px;
	margin-block: var(--aose-space-4);

	border: 0;
	background-color: var(--aose-color-line);
}


/* =========================================================
   14. TABLET
   768px -
   ========================================================= */

@media (min-width: 768px) {

	/* HERO */
	.aose-hero__content {
		padding-block:
			var(--aose-space-10)
			var(--aose-space-8);
	}


	/* CTA */
	.aose-cta {
		grid-template-columns:
			minmax(0, 1fr)
			auto;

		align-items: center;

		padding:
			var(--aose-space-5)
			var(--aose-space-5);
	}


	/* Story */
	.aose-story__grid {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));

		gap: var(--aose-space-5);
	}


	/*
	 * Story reverse。
	 */
	.aose-story--reverse .aose-story__media {
		order: 2;
	}

	.aose-story--reverse .aose-story__content {
		order: 1;
	}


	/* Bottom 3分割 → Tabletは2列 */
	.aose-bottom-grid {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}


	/* Info row */
	.aose-info__row {
		grid-template-columns:
			minmax(8rem, 0.35fr)
			minmax(0, 1fr);

		gap: var(--aose-space-3);
	}

}


/* =========================================================
   15. PC
   1024px -
   ========================================================= */

@media (min-width: 1024px) {

	/*
	 * PC Button minimum height：44px
	 */
	.aose-button {
		min-height: 44px;
	}


	/* Card body */
	.aose-card__body {
		padding: var(--aose-space-3);
	}


	/* CTA */
	.aose-cta {
		padding:
			var(--aose-space-8)
			var(--aose-space-8);
	}


	/* Story */
	.aose-story__grid {
		gap: var(--aose-space-8);
	}


	/* Bottom 3分割 */
	.aose-bottom-grid {
		grid-template-columns:
			repeat(3, minmax(0, 1fr));
	}


	/*
	 * 明示的single指定は
	 * PCでも1列を維持。
	 */
	.aose-bottom-grid--single {
		grid-template-columns:
			minmax(0, 1fr);
	}

}


/* =========================================================
   16. SMALL SCREEN SAFETY
   ========================================================= */

@media (max-width: 479px) {

	/*
	 * 材料名が長い場合、
	 * SPでは上下配置へ切り替える。
	 */
	.aose-ingredients__item {
		grid-template-columns:
			minmax(0, 1fr);
		gap: var(--aose-space-1);
	}


	.aose-ingredients__amount {
		text-align: left;
		white-space: normal;
	}


	/*
	 * CTA buttons
	 */
	.aose-cta__actions {
		align-items: stretch;
	}


	.aose-cta__actions .aose-button {
		width: 100%;
	}

}


/* =========================================================
   17. IMPLEMENTATION RULES
   ========================================================= */

/*
 * AOSE Componentsでは以下を原則とする。
 *
 * 1.
 * HEROの最終高さは
 * home / parent / child / post側で定める。
 *
 * 2.
 * HERO画像位置は
 * --aose-hero-object-position で変更し、
 * ページ専用CSSを乱造しない。
 *
 * 3.
 * Card標準画像比率は3:2。
 *
 * 4.
 * Cardのタイトル・説明は標準2行。
 * ただし重要告知やリンク判断に必要な文章を
 * 切ってはいけない場合、
 * .aose-card--unclamped を利用する。
 *
 * 5.
 * Buttonは
 * Primary / Secondary / Text Linkを基本とする。
 *
 * 6.
 * Ingredients / STEP / Note等は
 * 固定子ページBと投稿Bで共用する。
 * child側へ再定義しない。
 *
 * 7.
 * STEPはol等の意味のあるHTMLを使用し、
 * 画像上の番号だけで順序を表現しない。
 *
 * 8.
 * FAQの開閉機能をこのCSSで独自実装しない。
 * SWELL標準機能を優先する。
 *
 * 9.
 * Map iframeにはHTML側で
 * 内容が分かるtitle属性を付与する。
 *
 * 10.
 * hover・Reveal・HERO Zoom等の動きは
 * aose-motion.cssへ分離する。
 */

/* PHASE 3 — Scoped common UI reference */

.aose-ui-test {
  --aose-ui-white: #ffffff;
  --aose-ui-koji-white: var(--aose-color-koji-white, #faf8f3);
  --aose-ui-beige: var(--aose-color-koji-beige, #eee7d9);
  --aose-ui-ink: var(--aose-color-ink, #332f29);
  --aose-ui-brown: var(--aose-color-brown, #75624e);
  --aose-ui-border: rgba(51, 47, 41, 0.12);
  --aose-ui-shadow: 0 12px 32px rgba(42, 36, 29, 0.08);

  color: var(--aose-ui-ink);
}
.aose-ui-test .aose-container {
  width: min(calc(100% - 64px), 1200px);
  margin-inline: auto;
}
.aose-ui-test .aose-prose {
  width: 100%;
  max-width: 800px;
}
.aose-ui-test .aose-prose--narrow {
  max-width: 680px;
}
.aose-ui-test .aose-section {
  padding-block: clamp(56px, 7vw, 96px);
}
.aose-ui-test [id] {
  scroll-margin-top: 120px;
}
.aose-ui-test .aose-hero {
  position: relative;
  display: flex;
  align-items: center;

  width: 100%;
  overflow: hidden;
  isolation: isolate;

  color: #fff;
  background: #2f2b26;
}
.aose-ui-test .aose-hero--full {
  width: 100vw;
  max-width: none;

  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.aose-ui-test .aose-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;

  overflow: hidden;
}
.aose-ui-test .aose-hero__media img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  transform: scale(1);
}
.aose-ui-test .aose-hero::after {
  content: "";

  position: absolute;
  inset: 0;
  z-index: -1;

  pointer-events: none;
}
.aose-ui-test .aose-hero--overlay-light::after {
  background:
    linear-gradient(
      90deg,
      rgba(24, 21, 17, 0.50) 0%,
      rgba(24, 21, 17, 0.24) 48%,
      rgba(24, 21, 17, 0.08) 100%
    );
}
.aose-ui-test .aose-hero--overlay-strong::after {
  background:
    linear-gradient(
      90deg,
      rgba(24, 21, 17, 0.66) 0%,
      rgba(24, 21, 17, 0.38) 52%,
      rgba(24, 21, 17, 0.16) 100%
    );
}
.aose-ui-test .aose-hero__content {
  position: relative;
  z-index: 1;

  width: 100%;
}
.aose-ui-test .aose-hero__content .aose-container {
  width: min(calc(100% - 64px), 1200px);
  margin-inline: auto;
}
.aose-ui-test .aose-hero__body {
  width: min(100%, 760px);
}
.aose-ui-test .aose-hero .aose-eyebrow {
  margin: 0 0 14px;

  color: rgba(255, 255, 255, 0.90);

  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
}
.aose-ui-test .aose-hero__title {
  margin: 0;

  color: #fff;

  font-family:
    var(--aose-font-serif, "Noto Serif JP"),
    serif;

  font-size: clamp(40px, 5vw, 68px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.02em;

  text-shadow:
    0 2px 14px rgba(0, 0, 0, 0.32);

  -webkit-text-stroke:
    0.2px rgba(0, 0, 0, 0.18);
}
.aose-ui-test .aose-hero__lead {
  max-width: 640px;

  margin: 22px 0 0;

  color: rgba(255, 255, 255, 0.96);

  font-size: clamp(15px, 1.5vw, 18px);
  font-weight: 400;
  line-height: 1.9;

  text-shadow:
    0 2px 10px rgba(0, 0, 0, 0.28);

  -webkit-text-stroke:
    0.15px rgba(0, 0, 0, 0.15);
}
.aose-ui-test .aose-hero--top {
  min-height: 640px;
}
.aose-ui-test .aose-hero--parent {
  min-height: 460px;
}
.aose-ui-test .aose-hero--child {
  min-height: 380px;
}
.aose-ui-test .aose-hero--post {
  min-height: 330px;
}
.aose-ui-test .aose-hero--top .aose-hero__title {
  font-size: clamp(44px, 5.5vw, 72px);
}
.aose-ui-test .aose-hero--post .aose-hero__title {
  font-size: clamp(30px, 4vw, 50px);
}
.aose-ui-test .aose-hero--zoom .aose-hero__media img {
  animation: aoseHeroZoom 12s ease-out 1 both;
}

@keyframes aoseHeroZoom {

  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.035);
  }

}
.aose-ui-test .aose-page-nav {
  position: relative;

  width: 100vw;

  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  padding: 18px 0;

  background: var(--aose-ui-koji-white);

  border-top: 1px solid var(--aose-ui-border);
  border-bottom: 1px solid var(--aose-ui-border);
}
.aose-ui-test .aose-page-nav__inner {
  width: min(calc(100% - 64px), 1200px);
  margin-inline: auto;
}
.aose-ui-test .aose-page-nav__list {
  display: flex;
  flex-wrap: wrap;

  align-items: center;
  justify-content: center;

  gap: 10px;

  margin: 0;
  padding: 0;

  list-style: none;
}
.aose-ui-test .aose-page-nav__item {
  flex: 0 0 auto;

  margin: 0;
  padding: 0;
}
.aose-ui-test .aose-page-nav__link {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 8px;

  min-height: 44px;

  padding: 10px 18px;

  color: var(--aose-ui-ink);
  background: #fff;

  border: 1px solid rgba(51, 47, 41, 0.14);
  border-radius: 999px;

  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;

  text-decoration: none;
  white-space: nowrap;

  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}
.aose-ui-test .aose-page-nav__link::after {
  content: "↓";

  display: inline-block;

  font-size: 12px;

  opacity: 0.60;

  transition: transform 0.25s ease;
}
.aose-ui-test .aose-page-nav__link.is-current {
  color: #fff;
  background: var(--aose-ui-ink);
  border-color: var(--aose-ui-ink);
}
.aose-ui-test .aose-card-grid {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 32px;

  margin-top: 40px;
}
.aose-ui-test .aose-card {
  display: flex;
  flex-direction: column;

  min-width: 0;

  overflow: hidden;

  color: var(--aose-ui-ink);
  background: #fff;

  border: 1px solid var(--aose-ui-border);
  border-radius: 8px;

  text-decoration: none;

  transition:
    transform 0.30s ease,
    box-shadow 0.30s ease,
    border-color 0.30s ease;
}
.aose-ui-test .aose-card__media {
  position: relative;

  aspect-ratio: 3 / 2;

  overflow: hidden;

  background: #f3efe6;
}
.aose-ui-test .aose-card__media img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition: transform 0.60s ease;
}
.aose-ui-test .aose-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;

  padding: 24px;
}
.aose-ui-test .aose-card__eyebrow {
  margin: 0 0 8px;

  color: var(--aose-ui-brown);

  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.10em;
}
.aose-ui-test .aose-card__title {
  margin: 0;

  color: var(--aose-ui-ink);

  font-family:
    var(--aose-font-serif, "Noto Serif JP"),
    serif;

  font-size: clamp(19px, 1.7vw, 23px);
  font-weight: 500;
  line-height: 1.5;
}
.aose-ui-test .aose-card__text {
  margin: 12px 0 0;

  color: rgba(51, 47, 41, 0.76);

  font-size: 15px;
  line-height: 1.8;
}
.aose-ui-test .aose-card__more {
  display: inline-flex;

  align-items: center;

  gap: 8px;

  margin-top: auto;
  padding-top: 22px;

  color: var(--aose-ui-ink);

  font-size: 14px;
  font-weight: 500;
}
.aose-ui-test .aose-card__more::after {
  content: "→";

  transition: transform 0.25s ease;
}
.aose-ui-test .aose-actions {
  display: flex;
  flex-wrap: wrap;

  align-items: center;

  gap: 14px;

  margin-top: 28px;
}
.aose-ui-test .aose-btn {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 12px;

  min-height: 50px;

  padding: 12px 24px;

  border: 1px solid transparent;
  border-radius: 999px;

  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;

  text-decoration: none;

  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}
.aose-ui-test .aose-btn::after {
  content: "→";

  display: inline-block;

  transition: transform 0.25s ease;
}
.aose-ui-test .aose-btn--primary {
  color: #fff;
  background: var(--aose-ui-ink);
  border-color: var(--aose-ui-ink);
}
.aose-ui-test .aose-btn--secondary {
  color: var(--aose-ui-ink);
  background: transparent;

  border-color: rgba(51, 47, 41, 0.28);
}
.aose-ui-test .aose-text-link {
  display: inline-flex;

  align-items: center;

  gap: 8px;

  color: var(--aose-ui-ink);

  font-size: 15px;
  font-weight: 500;

  text-decoration: none;
}
.aose-ui-test .aose-text-link::after {
  content: "→";

  display: inline-block;

  transition: transform 0.25s ease;
}
.aose-ui-test .aose-story {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);

  align-items: center;

  gap: clamp(40px, 6vw, 80px);
}
.aose-ui-test .aose-story--40-60 {
  grid-template-columns:
    minmax(0, 2fr)
    minmax(0, 3fr);
}
.aose-ui-test .aose-story--reverse .aose-story__media {
  order: 2;
}
.aose-ui-test .aose-story--reverse .aose-story__content {
  order: 1;
}
.aose-ui-test .aose-story__media {
  overflow: hidden;

  border-radius: 8px;

  background: #f3efe6;
}
.aose-ui-test .aose-story__media img {
  display: block;

  width: 100%;
  height: auto;

  object-fit: cover;
}
.aose-ui-test .aose-story--large .aose-story__media {
  min-height: 520px;
}
.aose-ui-test .aose-story--large .aose-story__media img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}
.aose-ui-test .aose-story__content {
  width: 100%;
  max-width: 680px;
}
.aose-ui-test .aose-story__title {
  margin: 0;

  color: var(--aose-ui-ink);

  font-family:
    var(--aose-font-serif, "Noto Serif JP"),
    serif;

  font-size: clamp(28px, 3vw, 42px);
  font-weight: 500;
  line-height: 1.48;
}
.aose-ui-test .aose-story__text {
  margin-top: 24px;

  color: var(--aose-ui-ink);

  font-size: 16px;
  line-height: 1.9;
}
.aose-ui-test .aose-story__text p {
  margin: 0 0 1.45em;
}
.aose-ui-test .aose-story__text p:last-child {
  margin-bottom: 0;
}
.aose-ui-test .aose-related {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 24px;

  margin-top: 40px;
}
.aose-ui-test .aose-related__item {
  display: flex;
  flex-direction: column;

  overflow: hidden;

  color: var(--aose-ui-ink);
  background: #fff;

  border: 1px solid var(--aose-ui-border);
  border-radius: 8px;

  text-decoration: none;

  transition:
    transform 0.30s ease,
    box-shadow 0.30s ease;
}
.aose-ui-test .aose-related__media {
  aspect-ratio: 3 / 2;

  overflow: hidden;
}
.aose-ui-test .aose-related__media img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition: transform 0.60s ease;
}
.aose-ui-test .aose-related__body {
  padding: 22px;
}
.aose-ui-test .aose-related__body h3 {
  margin: 0;

  font-family:
    var(--aose-font-serif, "Noto Serif JP"),
    serif;

  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
}
.aose-ui-test .aose-related__body span {
  display: inline-block;

  margin-top: 16px;

  font-size: 14px;
  font-weight: 500;
}
.aose-ui-test .aose-pickup {
  display: grid;

  grid-template-columns:
    minmax(0, 1.55fr)
    minmax(280px, 0.85fr);

  gap: 24px;

  margin-top: 40px;
}
.aose-ui-test .aose-pickup + .aose-pickup {
  margin-top: 64px;
}
.aose-ui-test .aose-pickup__main {
  min-width: 0;

  overflow: hidden;

  border-radius: 8px;

  background: var(--aose-ui-koji-white);
}
.aose-ui-test .aose-pickup__main > a {
  display: flex;
  flex-direction: column;

  height: 100%;

  color: var(--aose-ui-ink);

  text-decoration: none;
}
.aose-ui-test .aose-pickup__main .aose-pickup__media {
  aspect-ratio: 16 / 10;

  overflow: hidden;
}
.aose-ui-test .aose-pickup__side {
  display: grid;

  grid-template-rows:
    repeat(2, minmax(0, 1fr));

  gap: 24px;
}
.aose-ui-test .aose-pickup--cafe .aose-pickup__side {
  grid-template-rows:
    repeat(3, minmax(0, 1fr));
}
.aose-ui-test .aose-pickup__small {
  min-width: 0;

  overflow: hidden;

  border: 1px solid var(--aose-ui-border);
  border-radius: 8px;

  background: #fff;
}
.aose-ui-test .aose-pickup__small > a {
  display: flex;
  flex-direction: column;

  height: 100%;

  color: var(--aose-ui-ink);

  text-decoration: none;
}
.aose-ui-test .aose-pickup__small .aose-pickup__media {
  aspect-ratio: 3 / 2;

  overflow: hidden;
}
.aose-ui-test .aose-pickup__media img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition: transform 0.60s ease;
}
.aose-ui-test .aose-pickup__body {
  padding: 24px;
}
.aose-ui-test .aose-pickup__main .aose-pickup__body {
  padding: 28px;
}
.aose-ui-test .aose-pickup__body h3 {
  margin: 0;

  color: var(--aose-ui-ink);

  font-family:
    var(--aose-font-serif, "Noto Serif JP"),
    serif;

  font-size: clamp(20px, 2vw, 28px);
  font-weight: 500;
  line-height: 1.5;
}
.aose-ui-test .aose-pickup__main .aose-pickup__body h3 {
  font-size: clamp(26px, 3vw, 38px);
}
.aose-ui-test .aose-pickup__body p:not(.aose-eyebrow) {
  margin: 12px 0 0;

  font-size: 15px;
  line-height: 1.8;
}
.aose-ui-test .aose-pickup--cafe
.aose-pickup__small
.aose-pickup__body {
  display: flex;
  flex-direction: column;
  justify-content: center;

  min-height: 120px;
}
.aose-ui-test .aose-bottom-grid {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 24px;

  margin-top: 40px;
}
.aose-ui-test .aose-bottom-card {
  display: flex;
  flex-direction: column;

  min-height: 300px;

  padding: 32px;

  color: var(--aose-ui-ink);

  background: var(--aose-ui-koji-white);

  border: 1px solid var(--aose-ui-border);
  border-radius: 8px;

  text-decoration: none;

  transition:
    transform 0.30s ease,
    background-color 0.30s ease,
    box-shadow 0.30s ease;
}
.aose-ui-test .aose-bottom-card h3 {
  margin: 0;

  font-family:
    var(--aose-font-serif, "Noto Serif JP"),
    serif;

  font-size: clamp(22px, 2vw, 28px);
  font-weight: 500;
  line-height: 1.5;
}
.aose-ui-test .aose-bottom-card p:not(.aose-eyebrow) {
  margin: 16px 0 0;

  font-size: 15px;
  line-height: 1.85;
}
.aose-ui-test .aose-bottom-card span {
  margin-top: auto;
  padding-top: 30px;

  font-size: 14px;
  font-weight: 500;
}
.aose-ui-test .aose-guide-grid {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 20px;

  margin-top: 40px;
}
.aose-ui-test .aose-guide-card {
  display: flex;
  flex-direction: column;

  min-width: 0;

  padding: 28px;

  background: #fff;

  border: 1px solid var(--aose-ui-border);
  border-radius: 8px;
}
.aose-ui-test .aose-guide-card h3 {
  margin: 0;

  color: var(--aose-ui-ink);

  font-family:
    var(--aose-font-serif, "Noto Serif JP"),
    serif;

  font-size: 22px;
  font-weight: 500;
  line-height: 1.5;
}
.aose-ui-test .aose-guide-card p:not(.aose-eyebrow) {
  margin: 14px 0 0;

  color: rgba(51, 47, 41, 0.76);

  font-size: 14px;
  line-height: 1.8;
}
.aose-ui-test .aose-guide-card .aose-btn {
  width: 100%;

  margin-top: auto;
  padding-top: 12px;
  padding-bottom: 12px;
}
.aose-ui-test .aose-guide-card > .aose-btn {
  margin-top: 28px;
}




@media (hover: hover) {
.aose-ui-test .aose-page-nav__link:hover {
    background: var(--aose-ui-beige);

    border-color:
      rgba(117, 98, 78, 0.28);

    transform: translateY(-1px);
  }
.aose-ui-test .aose-page-nav__link:hover::after {
    transform: translateY(2px);
  }
.aose-ui-test .aose-card:hover {
    transform: translateY(-4px);

    box-shadow: var(--aose-ui-shadow);
  }
.aose-ui-test .aose-card:hover
  .aose-card__media img {
    transform: scale(1.035);
  }
.aose-ui-test .aose-card:hover
  .aose-card__more::after {
    transform: translateX(4px);
  }
.aose-ui-test .aose-btn:hover {
    transform: translateY(-1px);
  }
.aose-ui-test .aose-btn:hover::after,
.aose-ui-test .aose-text-link:hover::after {
    transform: translateX(4px);
  }
.aose-ui-test .aose-btn--primary:hover {
    background: #4a443c;
  }
.aose-ui-test .aose-btn--secondary:hover {
    background: var(--aose-ui-koji-white);
  }
.aose-ui-test .aose-related__item:hover {
    transform: translateY(-3px);

    box-shadow: var(--aose-ui-shadow);
  }
.aose-ui-test .aose-related__item:hover
  .aose-related__media img {
    transform: scale(1.035);
  }
.aose-ui-test .aose-pickup__main:hover
  .aose-pickup__media img,
.aose-ui-test .aose-pickup__small:hover
  .aose-pickup__media img {
    transform: scale(1.035);
  }
.aose-ui-test .aose-bottom-card:hover {
    transform: translateY(-3px);

    background: #fff;

    box-shadow: var(--aose-ui-shadow);
  }

}
.aose-ui-test .aose-page-nav__link:focus-visible,
.aose-ui-test .aose-card:focus-visible,
.aose-ui-test .aose-btn:focus-visible,
.aose-ui-test .aose-text-link:focus-visible,
.aose-ui-test .aose-related__item:focus-visible,
.aose-ui-test .aose-pickup a:focus-visible,
.aose-ui-test .aose-bottom-card:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}




@media (max-width: 959px) {
.aose-ui-test .aose-container {
    width: min(calc(100% - 48px), 1200px);
  }
.aose-ui-test .aose-hero__content .aose-container {
    width: min(calc(100% - 48px), 1200px);
  }
.aose-ui-test .aose-hero--top {
    min-height: 56svh;
  }
.aose-ui-test .aose-hero--parent {
    min-height: 50svh;
  }
.aose-ui-test .aose-hero--child {
    min-height: 44svh;
  }
.aose-ui-test .aose-hero--post {
    min-height: 300px;
  }
.aose-ui-test .aose-page-nav {
    padding: 14px 0;
  }
.aose-ui-test .aose-page-nav__inner {
    width: 100%;

    overflow-x: auto;
    overflow-y: hidden;

    padding-inline: 24px;

    scrollbar-width: none;

    -webkit-overflow-scrolling: touch;

    scroll-snap-type: x proximity;
  }
.aose-ui-test .aose-page-nav__inner::-webkit-scrollbar {
    display: none;
  }
.aose-ui-test .aose-page-nav__list {
    width: max-content;

    flex-wrap: nowrap;

    justify-content: flex-start;
  }
.aose-ui-test .aose-page-nav__item {
    scroll-snap-align: start;
  }
.aose-ui-test .aose-card-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 24px;
  }
.aose-ui-test .aose-story,
.aose-ui-test .aose-story--40-60 {
    grid-template-columns: 1fr;

    gap: 32px;
  }
.aose-ui-test .aose-story--reverse
  .aose-story__media,
.aose-ui-test .aose-story--reverse
  .aose-story__content {
    order: initial;
  }
.aose-ui-test .aose-story__content {
    max-width: 800px;
  }
.aose-ui-test .aose-story--large
  .aose-story__media {
    min-height: 0;
  }
.aose-ui-test .aose-related {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
.aose-ui-test .aose-pickup {
    grid-template-columns: 1fr;
  }
.aose-ui-test .aose-pickup__side,
.aose-ui-test .aose-pickup--cafe
  .aose-pickup__side {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    grid-template-rows: auto;
  }
.aose-ui-test .aose-pickup--cafe
  .aose-pickup__side {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }
.aose-ui-test .aose-bottom-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
.aose-ui-test .aose-guide-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

}




@media (max-width: 599px) {
.aose-ui-test .aose-container {
    width: calc(100% - 36px);
  }
.aose-ui-test .aose-section {
    padding-block: 52px;
  }
.aose-ui-test .aose-hero__content .aose-container {
    width: calc(100% - 36px);
  }
.aose-ui-test .aose-hero__body {
    width: 100%;
  }
.aose-ui-test .aose-hero--top {
    min-height: 56svh;
  }
.aose-ui-test .aose-hero--parent {
    min-height: 50svh;
  }
.aose-ui-test .aose-hero--child {
    min-height: 42svh;
  }
.aose-ui-test .aose-hero--post {
    min-height: 280px;
  }
.aose-ui-test .aose-hero__title,
.aose-ui-test .aose-hero--top
  .aose-hero__title {
    font-size: clamp(32px, 10vw, 46px);
  }
.aose-ui-test .aose-hero--post
  .aose-hero__title {
    font-size: clamp(27px, 8vw, 38px);
  }
.aose-ui-test .aose-hero__lead {
    margin-top: 16px;

    font-size: 14px;
    line-height: 1.85;
  }
.aose-ui-test .aose-page-nav__inner {
    padding-inline: 18px;
  }
.aose-ui-test .aose-page-nav__link {
    min-height: 42px;

    padding: 9px 15px;

    font-size: 13px;
  }
.aose-ui-test .aose-card-grid {
    grid-template-columns: 1fr;

    gap: 20px;
  }
.aose-ui-test .aose-card__body {
    padding: 20px;
  }
.aose-ui-test .aose-actions {
    flex-direction: column;

    align-items: stretch;
  }
.aose-ui-test .aose-actions .aose-btn {
    width: 100%;
  }
.aose-ui-test .aose-story {
    gap: 26px;
  }
.aose-ui-test .aose-story__title {
    font-size: clamp(26px, 8vw, 34px);
  }
.aose-ui-test .aose-story__text {
    font-size: 16px;
    line-height: 1.9;
  }
.aose-ui-test .aose-related {
    grid-template-columns: 1fr;

    gap: 20px;
  }
.aose-ui-test .aose-pickup {
    gap: 20px;
  }
.aose-ui-test .aose-pickup + .aose-pickup {
    margin-top: 48px;
  }
.aose-ui-test .aose-pickup__side,
.aose-ui-test .aose-pickup--cafe
  .aose-pickup__side {
    grid-template-columns: 1fr;

    gap: 16px;
  }
.aose-ui-test .aose-pickup__main
  .aose-pickup__body {
    padding: 22px;
  }
.aose-ui-test .aose-pickup__body {
    padding: 20px;
  }
.aose-ui-test .aose-bottom-grid {
    grid-template-columns: 1fr;

    gap: 18px;
  }
.aose-ui-test .aose-bottom-card {
    min-height: 0;

    padding: 26px;
  }
.aose-ui-test .aose-bottom-card span {
    margin-top: 26px;
    padding-top: 0;
  }
.aose-ui-test .aose-guide-grid {
    grid-template-columns: 1fr;

    gap: 16px;
  }
.aose-ui-test .aose-guide-card {
    padding: 24px;
  }

}




@media (max-width: 359px) {
.aose-ui-test .aose-container,
.aose-ui-test .aose-hero__content .aose-container {
    width: calc(100% - 28px);
  }
.aose-ui-test .aose-page-nav__inner {
    padding-inline: 14px;
  }
.aose-ui-test .aose-card__body,
.aose-ui-test .aose-related__body,
.aose-ui-test .aose-pickup__body,
.aose-ui-test .aose-guide-card {
    padding-left: 18px;
    padding-right: 18px;
  }

}




@media (prefers-reduced-motion: reduce) {
.aose-ui-test .aose-hero--zoom
  .aose-hero__media img {
    animation: none;
    transform: none;
  }
.aose-ui-test .aose-page-nav__link,
.aose-ui-test .aose-page-nav__link::after,
.aose-ui-test .aose-card,
.aose-ui-test .aose-card__media img,
.aose-ui-test .aose-card__more::after,
.aose-ui-test .aose-btn,
.aose-ui-test .aose-btn::after,
.aose-ui-test .aose-text-link::after,
.aose-ui-test .aose-related__item,
.aose-ui-test .aose-related__media img,
.aose-ui-test .aose-pickup__media img,
.aose-ui-test .aose-bottom-card {
    transition: none;
  }
.aose-ui-test .aose-page-nav__link:hover,
.aose-ui-test .aose-card:hover,
.aose-ui-test .aose-btn:hover,
.aose-ui-test .aose-related__item:hover,
.aose-ui-test .aose-bottom-card:hover {
    transform: none;
  }
.aose-ui-test .aose-card:hover
  .aose-card__media img,
.aose-ui-test .aose-related__item:hover
  .aose-related__media img,
.aose-ui-test .aose-pickup__main:hover
  .aose-pickup__media img,
.aose-ui-test .aose-pickup__small:hover
  .aose-pickup__media img {
    transform: none;
  }

}
/* Phase 3 final adjustment — verification page only, 2026-10-05 */
#content:has(.aose-ui-test) { width:100%; max-width:none; padding:0; }
#main_content:has(.aose-ui-test), #main_content:has(.aose-ui-test) .l-mainContent__inner { width:100%; max-width:none; margin:0; }
#main_content:has(.aose-ui-test) .post_content { width:100%; max-width:none; padding:0; margin:0; }
#main_content:has(.aose-ui-test) > .l-mainContent__inner > .c-pageTitle { display:none; }
#main_content .aose-ui-test { width:100%; }
#main_content .aose-ui-test .aose-container { width:min(calc(100% - 64px),1200px); max-width:1200px; margin-inline:auto; }
#main_content .aose-ui-test .aose-hero--full, #main_content .aose-ui-test .aose-page-nav { width:100%; margin-inline:0; }
#main_content .aose-ui-test .aose-section-intro { width:100%; max-width:none; }
#main_content .aose-ui-test .aose-section-intro > p:not(.aose-eyebrow) { max-width:800px; font-size:16px; line-height:1.9; }
#main_content .aose-ui-test h2, #main_content .aose-ui-test h3 { border:0; background:none; padding:0; box-shadow:none; }
#main_content .aose-ui-test h2::before, #main_content .aose-ui-test h2::after, #main_content .aose-ui-test h3::before, #main_content .aose-ui-test h3::after { content:none; display:none; }
#main_content .aose-ui-test .aose-section-intro > h2 { margin:0 0 24px; font-family:var(--aose-font-heading,'Noto Serif JP'),serif; font-size:clamp(28px,3vw,40px); font-weight:500; line-height:1.45; }
#main_content .aose-ui-test .aose-eyebrow { margin:0 0 14px; font-size:12px; letter-spacing:.1em; }
#main_content .aose-ui-test .aose-section { padding-block:88px; }
#main_content .aose-ui-test .aose-page-nav__list { justify-content:space-between; width:100%; }
#main_content .aose-ui-test .aose-page-nav__item { flex:1 1 0; }
#main_content .aose-ui-test .aose-page-nav__link { width:100%; min-height:48px; }
#main_content .aose-ui-test .aose-story > .aose-story__media, #main_content .aose-ui-test .aose-story > .aose-story__content { grid-area:auto; }
#main_content .aose-ui-test .aose-story--40-60.aose-story--reverse { grid-template-columns:minmax(0,3fr) minmax(0,2fr); }
#main_content .aose-ui-test .aose-story--large .aose-story__media { min-height:0; aspect-ratio:1 / 1; }
#main_content .aose-ui-test .aose-story--large .aose-story__media img { height:100%; }
#main_content .aose-ui-test .aose-card__body { gap:0; }
#main_content .aose-ui-test .aose-card__title, #main_content .aose-ui-test .aose-card__text { display:block; overflow:visible; -webkit-line-clamp:unset; }
#main_content .aose-ui-test .aose-guide-card > p:not(.aose-eyebrow) { flex:1; }
#main_content .aose-ui-test .aose-guide-card .aose-btn { padding-inline:14px; gap:8px; white-space:normal; }
#main_content .aose-ui-test .aose-hero__media { z-index:0; }
#main_content .aose-ui-test .aose-hero::after { z-index:1; }
#main_content .aose-ui-test .aose-hero__content { z-index:2; }
#main_content .aose-ui-test .aose-hero__title { background:none; color:#fff; margin:0; }
#main_content .aose-ui-test .aose-hero__media img { object-position:var(--aose-hero-object-position,50% 50%); }
#main_content .aose-ui-test .aose-hero--overlay-light::after { display:block; background:linear-gradient(90deg,rgba(24,21,17,.56),rgba(24,21,17,.26) 52%,rgba(24,21,17,.06)); }
#main_content .aose-ui-test .aose-hero--overlay-strong::after { display:block; background:linear-gradient(90deg,rgba(24,21,17,.68),rgba(24,21,17,.4) 52%,rgba(24,21,17,.12)); }
#main_content .aose-ui-test a:focus-visible { outline:2px solid #75624e; outline-offset:4px; }
@media(max-width:959px) {
 #main_content .aose-ui-test .aose-container { width:calc(100% - 48px); }
 #main_content .aose-ui-test .aose-section { padding-block:68px; }
 #main_content .aose-ui-test .aose-page-nav__list { width:max-content; justify-content:flex-start; }
 #main_content .aose-ui-test .aose-page-nav__item { flex:0 0 auto; }
 #main_content .aose-ui-test .aose-page-nav__inner { padding-block:6px; }
 #main_content .aose-ui-test .aose-story--40-60.aose-story--reverse { grid-template-columns:1fr; }
 #main_content .aose-ui-test .aose-story--large .aose-story__media { aspect-ratio:3 / 2; }
}
@media(max-width:599px) {
 #main_content .aose-ui-test .aose-container { width:calc(100% - 36px); }
 #main_content .aose-ui-test .aose-section { padding-block:52px; }
 #main_content .aose-ui-test .aose-page-nav__link { min-height:48px; }
 #main_content .aose-ui-test .aose-hero__content { padding-block:56px; }
 #main_content .aose-ui-test .aose-guide-card h3 { font-size:22px; }
}
@media(max-width:359px) { #main_content .aose-ui-test .aose-container { width:calc(100% - 28px); } }
@media(prefers-reduced-motion:reduce) { #main_content .aose-ui-test *, #main_content .aose-ui-test *::before, #main_content .aose-ui-test *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }
/**
 * AOSE WordPress
 * aose-components.css
 *
 * AOSE 共通UIコンポーネント
 * 対象：aose.jp / SWELL CHILD
 *
 * 役割：
 * - HERO基本形
 * - Button
 * - Tag
 * - Card
 * - CTA
 * - Story
 * - 下部3分割
 * - Ingredients
 * - STEP
 * - Note
 * - Information Box
 * - Map
 *
 * 注意：
 * - ページ種別固有のHERO高さ・特殊配置は
 *   home / parent / child CSS側で定義する
 * - animation / hover motion は aose-motion.css
 * - FAQの動作はSWELL標準を優先する
 * - Shopify商品UIは aose-commerce.css
 *
 * Based on:
 * 青清 AOSE WordPress再構築 全体設計仕様書 v1.0
 */


/* =========================================================
   1. HERO
   ========================================================= */

/*
 * HEROの共通土台。
 *
 * 実際の高さは
 * home / parent / child 等から
 * --aose-hero-min-height を上書きする。
 */
.aose-hero {
	--aose-hero-min-height: 22rem;
	--aose-hero-object-position: 50% 50%;
	--aose-hero-overlay-start: rgba(40, 38, 34, 0.08);
	--aose-hero-overlay-end: rgba(40, 38, 34, 0.48);

	position: relative;
	display: grid;
	align-items: end;
	min-height: var(--aose-hero-min-height);
	overflow: hidden;
	background-color: var(--aose-color-ink);
	color: var(--aose-color-white);
}


/*
 * HERO背景画像領域
 */
.aose-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}


/*
 * picture / image
 */
.aose-hero__media :where(
	picture,
	img
) {
	display: block;
	width: 100%;
	height: 100%;
}


/*
 * 画像は背景的に全面表示。
 * 写真位置はCustom Propertyで調整する。
 */
.aose-hero__media img {
	object-fit: cover;
	object-position: var(--aose-hero-object-position);
}


/*
 * 可読性確保用Overlay。
 *
 * 写真ごとの実コントラスト確認は必須。
 */
.aose-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(
			to bottom,
			var(--aose-hero-overlay-start) 20%,
			var(--aose-hero-overlay-end) 100%
		);
}


/*
 * HERO本文
 */
.aose-hero__content {
	position: relative;
	z-index: 2;
	width: 100%;
	padding-block:
		var(--aose-space-8)
		var(--aose-space-5);
}


/*
 * HEROタイトル・コピーの最大幅。
 */
.aose-hero__body {
	max-width: var(--aose-width-content);
}


/*
 * HERO補足コピー
 */
.aose-hero__lead {
	max-width: 38rem;
	margin-block-start: var(--aose-space-2);
	font-family: var(--aose-font-body);
	font-size: 1rem;
	line-height: 1.8;
	color: var(--aose-color-white);
}


/*
 * HERO上で背景が十分暗い写真の場合のみ
 * Overlayを弱めるModifier。
 */
.aose-hero--overlay-light {
	--aose-hero-overlay-start: rgba(40, 38, 34, 0.02);
	--aose-hero-overlay-end: rgba(40, 38, 34, 0.30);
}


/*
 * 強めのOverlay。
 */
.aose-hero--overlay-strong {
	--aose-hero-overlay-start: rgba(40, 38, 34, 0.16);
	--aose-hero-overlay-end: rgba(40, 38, 34, 0.62);
}


/* =========================================================
   2. BUTTON
   ========================================================= */

/*
 * Button共通。
 *
 * SPは48px以上を基本。
 */
.aose-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--aose-space-1);

	min-height: 48px;
	padding:
		0.75rem
		var(--aose-space-3);

	border: 1px solid transparent;
	border-radius: var(--aose-radius-md);

	font-family: var(--aose-font-ui);
	font-size: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
	font-weight: var(--aose-font-weight-medium);
	line-height: 1.4;
	text-align: center;
	text-decoration: none;

	cursor: pointer;
}


/* ---------------------------------------------------------
   2-1. Primary
   --------------------------------------------------------- */

.aose-button--primary {
	background-color: var(--aose-color-brown);
	border-color: var(--aose-color-brown);
	color: var(--aose-color-white);
}


/* ---------------------------------------------------------
   2-2. Secondary
   --------------------------------------------------------- */

.aose-button--secondary {
	background-color: transparent;
	border-color: var(--aose-color-brown);
	color: var(--aose-color-brown);
}


/* ---------------------------------------------------------
   2-3. Light
   写真上・濃色背景用
   --------------------------------------------------------- */

.aose-button--light {
	background-color: var(--aose-color-white);
	border-color: var(--aose-color-white);
	color: var(--aose-color-ink);
}


/* ---------------------------------------------------------
   2-4. Full Width
   --------------------------------------------------------- */

.aose-button--full {
	width: 100%;
}


/* ---------------------------------------------------------
   2-5. Text Link
   --------------------------------------------------------- */

.aose-text-link {
	display: inline-flex;
	align-items: center;
	gap: var(--aose-space-1);

	font-family: var(--aose-font-ui);
	font-size: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
	font-weight: var(--aose-font-weight-medium);
	line-height: 1.4;

	color: var(--aose-color-brown);
	text-decoration: none;
}


/*
 * Arrow。
 * 動きは motion.css 側。
 */
.aose-text-link::after {
	content: "→";
	display: inline-block;
}


/* =========================================================
   3. TAG
   ========================================================= */

.aose-tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-height: 28px;
	padding:
		0.25rem
		0.75rem;

	border: 1px solid var(--aose-color-line);
	border-radius: var(--aose-radius-pill);

	background-color: var(--aose-color-koji-white);
	color: var(--aose-color-text);
}


/*
 * Accent tag
 */
.aose-tag--accent {
	background-color: var(--aose-color-brown);
	border-color: var(--aose-color-brown);
	color: var(--aose-color-white);
}


/* =========================================================
   4. CARD
   ========================================================= */

/*
 * AOSE標準カード。
 *
 * 画像比率 3:2
 * Radius 8px
 * Soft Shadow
 */
.aose-card {
	position: relative;
	min-width: 0;
	overflow: hidden;

	background-color: var(--aose-color-white);
	border-radius: var(--aose-radius-md);
	box-shadow: var(--aose-shadow-soft);
}


/*
 * カード全体をリンクにする場合。
 */
.aose-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;

	color: inherit;
	text-decoration: none;
}


/*
 * Media
 */
.aose-card__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 3 / 2;
	background-color: var(--aose-color-koji-white);
}


/*
 * Image
 */
.aose-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}


/*
 * Content
 */
.aose-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: var(--aose-space-2);

	padding: var(--aose-space-3);
}


/*
 * Card meta
 */
.aose-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap:
		var(--aose-space-1)
		var(--aose-space-2);
}


/*
 * Card title
 * 最大2行を標準。
 */
.aose-card__title {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;

	margin: 0;

	font-family: var(--aose-font-heading);
	font-size: 1.125rem;
	font-weight: var(--aose-font-weight-medium);
	line-height: 1.5;

	color: var(--aose-color-ink);
}


/*
 * Card description
 * 最大2行を標準。
 */
.aose-card__text {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;

	margin: 0;

	font-size: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
	line-height: 1.6;

	color: var(--aose-color-text-muted);
}


/*
 * 重要告知等、
 * 省略してはいけないカード用。
 */
.aose-card--unclamped .aose-card__title,
.aose-card--unclamped .aose-card__text {
	display: block;
	overflow: visible;
	-webkit-line-clamp: unset;
}


/*
 * Footer
 */
.aose-card__footer {
	margin-block-start: auto;
	padding-block-start: var(--aose-space-1);
}


/*
 * Border主体のカード。
 */
.aose-card--border {
	border: 1px solid var(--aose-color-line);
	box-shadow: none;
}


/*
 * 背景Soft。
 */
.aose-card--soft {
	background-color: var(--aose-color-koji-white);
}


/* =========================================================
   5. CTA
   ========================================================= */

/*
 * 共通CTA。
 */
.aose-cta {
	display: grid;
	gap: var(--aose-space-3);

	padding:
		var(--aose-space-5)
		var(--aose-space-3);

	border-radius: var(--aose-radius-md);
	background-color: var(--aose-color-koji-white);
}


/*
 * CTA本文
 */
.aose-cta__body {
	max-width: var(--aose-width-content);
}


/*
 * CTA title
 */
.aose-cta__title {
	margin: 0;

	font-family: var(--aose-font-heading);
	font-size: clamp(1.5rem, 1.35rem + 0.75vw, 2rem);
	font-weight: var(--aose-font-weight-medium);
	line-height: 1.45;

	color: var(--aose-color-ink);
}


/*
 * CTA description
 */
.aose-cta__text {
	margin-block-start: var(--aose-space-2);
	margin-block-end: 0;

	line-height: 1.8;
}


/*
 * CTA action
 */
.aose-cta__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--aose-space-2);
}


/*
 * 強調CTA
 */
.aose-cta--brown {
	background-color: var(--aose-color-brown);
	color: var(--aose-color-white);
}

.aose-cta--brown .aose-cta__title,
.aose-cta--brown .aose-cta__text {
	color: var(--aose-color-white);
}


/* =========================================================
   6. STORY
   ========================================================= */

/*
 * AOSE大型Story共通部品。
 *
 * Story用の大きな上下余白は
 * layoutのSectionと組み合わせて使用する。
 */
.aose-story {
	position: relative;
}


/*
 * 写真＋本文。
 */
.aose-story__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--aose-space-4);
	align-items: center;
}


/*
 * Media
 */
.aose-story__media {
	min-width: 0;
	overflow: hidden;
	border-radius: var(--aose-radius-sm);
}


/*
 * Story写真。
 *
 * 固定比率を強制しない。
 * 写真の意味に応じた比率を利用可能。
 */
.aose-story__media img {
	display: block;
	width: 100%;
	height: auto;
}


/*
 * Content
 */
.aose-story__content {
	min-width: 0;
}


/*
 * Story body
 */
.aose-story__text {
	max-width: var(--aose-width-narrow);
}


/* =========================================================
   7. BOTTOM 3 BLOCKS
   ========================================================= */

/*
 * ページ下部の共通3分割外枠。
 *
 * SP：1列
 * Tablet：2列
 * PC：3列
 *
 * 実際の中身は、
 * 関連記事・営業・LINE・店舗等を組み合わせる。
 */
.aose-bottom-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--aose-space-3);
}


/*
 * 各Block。
 */
.aose-bottom-block {
	min-width: 0;
	padding: var(--aose-space-3);

	border: 1px solid var(--aose-color-line);
	border-radius: var(--aose-radius-md);

	background-color: var(--aose-color-white);
}


/*
 * Bottom block title
 */
.aose-bottom-block__title {
	margin: 0 0 var(--aose-space-2);

	font-family: var(--aose-font-heading);
	font-size: 1.25rem;
	font-weight: var(--aose-font-weight-medium);
	line-height: 1.5;
}


/*
 * Bottom block body
 */
.aose-bottom-block__body {
	font-size: 0.9375rem;
	line-height: 1.7;
}


/*
 * 情報量の少ないケースで
 * 3列を無理に維持しない。
 */
.aose-bottom-grid--single {
	grid-template-columns: minmax(0, 1fr);
}


/* =========================================================
   8. INGREDIENTS
   ========================================================= */

/*
 * 材料一覧。
 *
 * 固定子ページB・投稿Bで共用する。
 */
.aose-ingredients {
	padding: var(--aose-space-3);

	border: 1px solid var(--aose-color-line);
	border-radius: var(--aose-radius-md);

	background-color: var(--aose-color-koji-white);
}


/*
 * Title
 */
.aose-ingredients__title {
	margin: 0 0 var(--aose-space-3);

	font-family: var(--aose-font-heading);
	font-size: 1.375rem;
	font-weight: var(--aose-font-weight-medium);
	line-height: 1.5;
}


/*
 * List
 */
.aose-ingredients__list {
	display: grid;
	gap: 0;

	margin: 0;
	padding: 0;

	list-style: none;
}


/*
 * Row
 */
.aose-ingredients__item {
	display: grid;
	grid-template-columns:
		minmax(0, 1fr)
		auto;
	gap: var(--aose-space-2);

	padding-block: var(--aose-space-2);

	border-block-end:
		1px solid var(--aose-color-line);
}


/*
 * 最終行
 */
.aose-ingredients__item:last-child {
	border-block-end: 0;
}


/*
 * Ingredient name
 */
.aose-ingredients__name {
	min-width: 0;
}


/*
 * Amount
 */
.aose-ingredients__amount {
	text-align: right;
	white-space: nowrap;
}


/* =========================================================
   9. STEP
   ========================================================= */

/*
 * STEPは必ず意味上の順序を持つ
 * ol等で実装することを前提とする。
 */
.aose-steps {
	counter-reset: aose-step;

	display: grid;
	gap: var(--aose-space-4);

	margin: 0;
	padding: 0;

	list-style: none;
}


/*
 * Individual step
 */
.aose-step {
	counter-increment: aose-step;

	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--aose-space-3);

	min-width: 0;
}


/*
 * Visible step number
 */
.aose-step::before {
	content: counter(aose-step);

	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 2.5rem;
	height: 2.5rem;

	border-radius: var(--aose-radius-pill);

	background-color: var(--aose-color-brown);
	color: var(--aose-color-white);

	font-family: var(--aose-font-ui);
	font-size: 0.875rem;
	font-weight: var(--aose-font-weight-medium);
	line-height: 1;
}


/*
 * Step body
 */
.aose-step__body {
	min-width: 0;
}


/*
 * Step title
 */
.aose-step__title {
	margin: 0 0 var(--aose-space-1);

	font-family: var(--aose-font-heading);
	font-size: 1.25rem;
	font-weight: var(--aose-font-weight-medium);
	line-height: 1.5;
}


/*
 * Step text
 */
.aose-step__text {
	margin: 0;
	line-height: 1.8;
}


/*
 * Step image
 */
.aose-step__media {
	margin-block-start: var(--aose-space-2);
	overflow: hidden;
	border-radius: var(--aose-radius-sm);
}

.aose-step__media img {
	display: block;
	width: 100%;
	height: auto;
}


/* =========================================================
   10. NOTE
   ========================================================= */

/*
 * 注意・ポイント。
 *
 * 色だけに依存せず、
 * BorderとLabelも利用する。
 */
.aose-note {
	padding: var(--aose-space-3);

	border:
		1px solid
		var(--aose-color-koji-beige);

	border-inline-start:
		4px solid
		var(--aose-color-miso);

	border-radius: var(--aose-radius-md);

	background-color: var(--aose-color-koji-white);
}


/*
 * Note label
 */
.aose-note__label {
	display: block;

	margin-block-end: var(--aose-space-1);

	font-family: var(--aose-font-ui);
	font-size: 0.875rem;
	font-weight: var(--aose-font-weight-medium);
	line-height: 1.45;

	color: var(--aose-color-brown);
}


/*
 * Note body
 */
.aose-note__body {
	line-height: 1.75;
}


/* =========================================================
   11. INFORMATION BOX
   ========================================================= */

/*
 * 営業、予約、利用条件などの
 * 重要情報共通枠。
 */
.aose-info {
	padding: var(--aose-space-3);

	border: 1px solid var(--aose-color-line);
	border-radius: var(--aose-radius-md);

	background-color: var(--aose-color-white);
	box-shadow: var(--aose-shadow-soft);
}


/*
 * 強調情報。
 */
.aose-info--important {
	border-inline-start:
		4px solid
		var(--aose-color-brown);
}


/*
 * Info title
 */
.aose-info__title {
	margin: 0 0 var(--aose-space-2);

	font-family: var(--aose-font-heading);
	font-size: 1.25rem;
	font-weight: var(--aose-font-weight-medium);
	line-height: 1.5;
}


/*
 * Info rows
 */
.aose-info__list {
	display: grid;
	gap: 0;

	margin: 0;
}


/*
 * dl形式を想定。
 */
.aose-info__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--aose-space-1);

	padding-block: var(--aose-space-2);

	border-block-end:
		1px solid var(--aose-color-line);
}


.aose-info__row:last-child {
	border-block-end: 0;
}


/*
 * Label
 */
.aose-info__label {
	font-weight: var(--aose-font-weight-medium);
}


/*
 * Value
 */
.aose-info__value {
	margin: 0;
}


/* =========================================================
   12. MAP
   ========================================================= */

/*
 * Google Maps等の共通Map枠。
 *
 * iframeにはHTML側で
 * 適切なtitle属性を付ける。
 */
.aose-map {
	position: relative;
	width: 100%;
	overflow: hidden;

	aspect-ratio: 16 / 9;

	border-radius: var(--aose-radius-sm);
	background-color: var(--aose-color-koji-white);
}


/*
 * iframe
 */
.aose-map iframe {
	position: absolute;
	inset: 0;

	display: block;
	width: 100%;
	height: 100%;

	border: 0;
}


/* =========================================================
   13. SIMPLE DIVIDER
   ========================================================= */

.aose-divider {
	width: 100%;
	height: 1px;
	margin-block: var(--aose-space-4);

	border: 0;
	background-color: var(--aose-color-line);
}


/* =========================================================
   14. TABLET
   768px -
   ========================================================= */

@media (min-width: 768px) {

	/* HERO */
	.aose-hero__content {
		padding-block:
			var(--aose-space-10)
			var(--aose-space-8);
	}


	/* CTA */
	.aose-cta {
		grid-template-columns:
			minmax(0, 1fr)
			auto;

		align-items: center;

		padding:
			var(--aose-space-5)
			var(--aose-space-5);
	}


	/* Story */
	.aose-story__grid {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));

		gap: var(--aose-space-5);
	}


	/*
	 * Story reverse。
	 */
	.aose-story--reverse .aose-story__media {
		order: 2;
	}

	.aose-story--reverse .aose-story__content {
		order: 1;
	}


	/* Bottom 3分割 → Tabletは2列 */
	.aose-bottom-grid {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}


	/* Info row */
	.aose-info__row {
		grid-template-columns:
			minmax(8rem, 0.35fr)
			minmax(0, 1fr);

		gap: var(--aose-space-3);
	}

}


/* =========================================================
   15. PC
   1024px -
   ========================================================= */

@media (min-width: 1024px) {

	/*
	 * PC Button minimum height：44px
	 */
	.aose-button {
		min-height: 44px;
	}


	/* Card body */
	.aose-card__body {
		padding: var(--aose-space-3);
	}


	/* CTA */
	.aose-cta {
		padding:
			var(--aose-space-8)
			var(--aose-space-8);
	}


	/* Story */
	.aose-story__grid {
		gap: var(--aose-space-8);
	}


	/* Bottom 3分割 */
	.aose-bottom-grid {
		grid-template-columns:
			repeat(3, minmax(0, 1fr));
	}


	/*
	 * 明示的single指定は
	 * PCでも1列を維持。
	 */
	.aose-bottom-grid--single {
		grid-template-columns:
			minmax(0, 1fr);
	}

}


/* =========================================================
   16. SMALL SCREEN SAFETY
   ========================================================= */

@media (max-width: 479px) {

	/*
	 * 材料名が長い場合、
	 * SPでは上下配置へ切り替える。
	 */
	.aose-ingredients__item {
		grid-template-columns:
			minmax(0, 1fr);
		gap: var(--aose-space-1);
	}


	.aose-ingredients__amount {
		text-align: left;
		white-space: normal;
	}


	/*
	 * CTA buttons
	 */
	.aose-cta__actions {
		align-items: stretch;
	}


	.aose-cta__actions .aose-button {
		width: 100%;
	}

}


/* =========================================================
   17. IMPLEMENTATION RULES
   ========================================================= */

/*
 * AOSE Componentsでは以下を原則とする。
 *
 * 1.
 * HEROの最終高さは
 * home / parent / child / post側で定める。
 *
 * 2.
 * HERO画像位置は
 * --aose-hero-object-position で変更し、
 * ページ専用CSSを乱造しない。
 *
 * 3.
 * Card標準画像比率は3:2。
 *
 * 4.
 * Cardのタイトル・説明は標準2行。
 * ただし重要告知やリンク判断に必要な文章を
 * 切ってはいけない場合、
 * .aose-card--unclamped を利用する。
 *
 * 5.
 * Buttonは
 * Primary / Secondary / Text Linkを基本とする。
 *
 * 6.
 * Ingredients / STEP / Note等は
 * 固定子ページBと投稿Bで共用する。
 * child側へ再定義しない。
 *
 * 7.
 * STEPはol等の意味のあるHTMLを使用し、
 * 画像上の番号だけで順序を表現しない。
 *
 * 8.
 * FAQの開閉機能をこのCSSで独自実装しない。
 * SWELL標準機能を優先する。
 *
 * 9.
 * Map iframeにはHTML側で
 * 内容が分かるtitle属性を付与する。
 *
 * 10.
 * hover・Reveal・HERO Zoom等の動きは
 * aose-motion.cssへ分離する。
 */
/* =========================================================
   AOSE COMPONENTS
   TEST PAGE VERIFICATION FIX
   2026-10-05
   ========================================================= */


/* =========================================================
   1. HERO STACKING FIX
   ========================================================= */

/*
 * HERO画像が親要素の背景より後ろへ回らないよう、
 * HERO自身を独立したStacking Contextにする。
 *
 * Layer:
 * 0 = Media
 * 1 = Overlay
 * 2 = Content
 * 3 = Motion Control
 */
.aose-hero {
	isolation: isolate;
}

.aose-hero__media {
	z-index: 0;
}

.aose-hero::after {
	z-index: 1;
}

.aose-hero__content {
	z-index: 2;
}


/*
 * HERO画像を確実に全面表示。
 */
.aose-hero__media,
.aose-hero__media picture,
.aose-hero__media img {
	width: 100%;
	height: 100%;
}

.aose-hero__media picture {
	display: block;
}

.aose-hero__media img {
	display: block;
	object-fit: cover;
	object-position: var(--aose-hero-object-position);
}


/* =========================================================
   2. STORY GRID FIX
   ========================================================= */

/*
 * orderだけに依存せず、
 * Grid Areaで写真と文章の位置を明示する。
 *
 * SP：
 * 写真
 * ↓
 * 文章
 */
.aose-story__grid {
	grid-template-areas:
		"media"
		"content";
}

.aose-story__media {
	grid-area: media;
}

.aose-story__content {
	grid-area: content;
}


/* =========================================================
   3. STORY TABLET / PC
   ========================================================= */

@media (min-width: 768px) {

	/*
	 * 通常Story：
	 *
	 * 写真 | 文章
	 */
	.aose-story__grid {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));

		grid-template-areas:
			"media content";

		align-items: center;
	}


	/*
	 * Reverse：
	 *
	 * 文章 | 写真
	 */
	.aose-story--reverse
	.aose-story__grid {
		grid-template-areas:
			"content media";
	}


	/*
	 * 旧order指定の影響を解除。
	 */
	.aose-story--reverse
	.aose-story__media,
	.aose-story--reverse
	.aose-story__content {
		order: initial;
	}

}


/* =========================================================
   4. STORY MEDIA SAFETY
   ========================================================= */

.aose-story__media {
	width: 100%;
	min-width: 0;
}

.aose-story__media img {
	display: block;
	width: 100%;
	height: auto;
}


/* =========================================================
   5. STORY CONTENT SAFETY
   ========================================================= */

.aose-story__content {
	width: 100%;
	min-width: 0;
}

.aose-story__text {
	width: 100%;
}
/* =========================================================
   AOSE HERO｜Full Bleed
   SWELL本文コンテナを抜けて画面幅いっぱいに表示
   ========================================================= */

.aose-hero--full {
  position: relative;
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* HERO内部の文章はAOSE標準幅に収める */
.aose-hero--full .aose-container {
  width: min(100% - 40px, 1200px);
  margin-inline: auto;
}


/* =========================================================
   HERO 4 TYPE
   ========================================================= */

/* TOP */
.aose-hero--top {
  min-height: 640px;
}

/* 親ページ */
.aose-hero--parent {
  min-height: 460px;
}

/* 子ページ */
.aose-hero--child {
  min-height: 370px;
}

/* 投稿 */
.aose-hero--post {
  min-height: 330px;
}


/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 959px) {

  .aose-hero--full .aose-container {
    width: min(100% - 32px, 1200px);
  }

  .aose-hero--top {
    min-height: 56svh;
  }

  .aose-hero--parent {
    min-height: 50svh;
  }

  .aose-hero--child {
    min-height: 44svh;
  }

  .aose-hero--post {
    min-height: 300px;
  }
}


@media (max-width: 599px) {

  .aose-hero--full .aose-container {
    width: calc(100% - 32px);
  }

  .aose-hero--top {
    min-height: 56svh;
  }

  .aose-hero--parent {
    min-height: 50svh;
  }

  .aose-hero--child {
    min-height: 42svh;
  }

  .aose-hero--post {
    min-height: 280px;
  }
}
/* =========================================================
   AOSE PAGE NAV
   ページ内ナビ
   ========================================================= */

.aose-page-nav {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 18px 0;
  background: var(--aose-color-koji-white, #faf8f3);
  border-top: 1px solid rgba(50, 45, 38, 0.08);
  border-bottom: 1px solid rgba(50, 45, 38, 0.08);
}

.aose-page-nav__inner {
  width: min(calc(100% - 40px), 1200px);
  margin-inline: auto;
}

.aose-page-nav__list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.aose-page-nav__item {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
}

.aose-page-nav__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  min-height: 44px;
  padding: 10px 18px;

  color: var(--aose-color-ink, #332f29);
  background: transparent;

  border: 1px solid rgba(50, 45, 38, 0.14);
  border-radius: 999px;

  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;

  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease;
}


/* 矢印 */

.aose-page-nav__link::after {
  content: "↓";
  display: inline-block;
  font-size: 12px;
  opacity: 0.65;
  transition: transform 0.25s ease;
}


/* Hover */

@media (hover: hover) {

  .aose-page-nav__link:hover {
    color: var(--aose-color-ink, #332f29);
    background: rgba(185, 163, 126, 0.10);
    border-color: rgba(130, 105, 70, 0.28);
    transform: translateY(-1px);
  }

  .aose-page-nav__link:hover::after {
    transform: translateY(2px);
  }

}


/* Keyboard */

.aose-page-nav__link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}


/* 現在位置を将来使用する場合 */

.aose-page-nav__link.is-current {
  background: var(--aose-color-ink, #332f29);
  border-color: var(--aose-color-ink, #332f29);
  color: #fff;
}


/* =========================================================
   Tablet / SP
   横スクロール
   ========================================================= */

@media (max-width: 959px) {

  .aose-page-nav {
    padding: 14px 0;
  }

  .aose-page-nav__inner {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;

    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x proximity;

    padding-inline: 16px;
  }

  .aose-page-nav__inner::-webkit-scrollbar {
    display: none;
  }

  .aose-page-nav__list {
    width: max-content;
    justify-content: flex-start;
    gap: 8px;
  }

  .aose-page-nav__item {
    scroll-snap-align: start;
  }

  .aose-page-nav__link {
    min-height: 42px;
    padding: 9px 16px;
    font-size: 13px;
  }

}


/* =========================================================
   Reduced Motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .aose-page-nav__link,
  .aose-page-nav__link::after {
    transition: none;
  }

  .aose-page-nav__link:hover {
    transform: none;
  }

  .aose-page-nav__link:hover::after {
    transform: none;
  }

}
/* =========================================================
   AOSE CARD
   基本カード B案
   PC 3列 / Tablet 2列 / SP 1列
   ========================================================= */

.aose-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

.aose-card {
  display: block;
  overflow: hidden;

  color: var(--aose-color-ink, #332f29);
  background: #fff;

  border: 1px solid rgba(50, 45, 38, 0.08);
  border-radius: 8px;

  text-decoration: none;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.aose-card__media {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #f3f0e9;
}

.aose-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;

  transition: transform 0.6s ease;
}

.aose-card__body {
  padding: 22px 22px 24px;
}

.aose-card__eyebrow {
  margin: 0 0 8px;

  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.08em;

  color: var(--aose-color-brown, #75624e);
}

.aose-card__title {
  margin: 0;

  font-size: clamp(18px, 1.5vw, 22px);
  font-weight: 600;
  line-height: 1.5;
}

.aose-card__text {
  margin: 10px 0 0;

  font-size: 15px;
  line-height: 1.8;

  color: rgba(51, 47, 41, 0.78);
}

.aose-card__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  margin-top: 18px;

  font-size: 14px;
  font-weight: 500;
}

.aose-card__more::after {
  content: "→";
  display: inline-block;

  transition: transform 0.25s ease;
}


/* Hover */

@media (hover: hover) {

  .aose-card:hover {
    transform: translateY(-4px);

    border-color: rgba(90, 70, 45, 0.14);

    box-shadow:
      0 12px 28px rgba(44, 38, 30, 0.08);
  }

  .aose-card:hover .aose-card__media img {
    transform: scale(1.035);
  }

  .aose-card:hover .aose-card__more::after {
    transform: translateX(4px);
  }

}


/* Focus */

.aose-card:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}


/* Tablet */

@media (max-width: 959px) {

  .aose-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }

}


/* SP */

@media (max-width: 599px) {

  .aose-card-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .aose-card__body {
    padding: 18px 18px 20px;
  }

}


/* Reduced Motion */

@media (prefers-reduced-motion: reduce) {

  .aose-card,
  .aose-card__media img,
  .aose-card__more::after {
    transition: none;
  }

  .aose-card:hover {
    transform: none;
  }

  .aose-card:hover .aose-card__media img {
    transform: none;
  }

}
/* =========================================================
   AOSE BUTTON / CTA
   ========================================================= */

.aose-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.aose-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  min-height: 50px;
  padding: 12px 24px;

  border: 1px solid transparent;
  border-radius: 999px;

  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;

  text-decoration: none;

  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}

.aose-btn::after {
  content: "→";
  display: inline-block;
  transition: transform 0.25s ease;
}


/* Primary */

.aose-btn--primary {
  color: #fff;
  background: var(--aose-color-ink, #332f29);
  border-color: var(--aose-color-ink, #332f29);
}


/* Secondary */

.aose-btn--secondary {
  color: var(--aose-color-ink, #332f29);
  background: transparent;
  border-color: rgba(51, 47, 41, 0.26);
}


/* Text Link */

.aose-text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  color: var(--aose-color-ink, #332f29);

  font-size: 15px;
  font-weight: 500;

  text-decoration: none;
}

.aose-text-link::after {
  content: "→";
  transition: transform 0.25s ease;
}


/* Hover */

@media (hover: hover) {

  .aose-btn:hover {
    transform: translateY(-1px);
  }

  .aose-btn:hover::after,
  .aose-text-link:hover::after {
    transform: translateX(4px);
  }

  .aose-btn--primary:hover {
    background: #4a443c;
  }

  .aose-btn--secondary:hover {
    background: rgba(185, 163, 126, 0.10);
  }

}


/* Focus */

.aose-btn:focus-visible,
.aose-text-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}


/* SP */

@media (max-width: 599px) {

  .aose-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .aose-btn {
    width: 100%;
  }

}


/* Reduced Motion */

@media (prefers-reduced-motion: reduce) {

  .aose-btn,
  .aose-btn::after,
  .aose-text-link::after {
    transition: none;
  }

  .aose-btn:hover {
    transform: none;
  }

}
/* =========================================================
   AOSE STORY
   写真＋文章
   ========================================================= */

.aose-story {
  display: grid;
  grid-template-columns: 1fr 1fr;

  align-items: center;
  gap: clamp(36px, 6vw, 80px);
}

.aose-story--40-60 {
  grid-template-columns: 2fr 3fr;
}

.aose-story--reverse .aose-story__media {
  order: 2;
}

.aose-story--reverse .aose-story__content {
  order: 1;
}


/* Media */

.aose-story__media {
  overflow: hidden;
  border-radius: 8px;
}

.aose-story__media img {
  display: block;
  width: 100%;
  height: auto;
}


/* 大型写真 */

.aose-story--large .aose-story__media {
  min-height: 520px;
}

.aose-story--large .aose-story__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* Content */

.aose-story__content {
  max-width: 680px;
}

.aose-story__title {
  margin: 0;

  font-size: clamp(28px, 3vw, 42px);
  font-weight: 500;
  line-height: 1.45;
}

.aose-story__text {
  margin-top: 22px;

  font-size: 16px;
  line-height: 1.9;
}

.aose-story__text p {
  margin: 0 0 1.4em;
}

.aose-story__text p:last-child {
  margin-bottom: 0;
}


/* Tablet / SP */

@media (max-width: 959px) {

  .aose-story,
  .aose-story--40-60 {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .aose-story--reverse .aose-story__media,
  .aose-story--reverse .aose-story__content {
    order: initial;
  }

  .aose-story__content {
    max-width: 100%;
  }

  .aose-story--large .aose-story__media {
    min-height: 0;
  }

}
/* =========================================================
   AOSE WORDPRESS
   PHASE 3｜COMMON UI
   統合検証版

   HERO
   PAGE NAV
   CARD
   BUTTON / CTA
   STORY
   RELATED
   PICK UP
   BOTTOM UI
   COMMON GUIDE
   RESPONSIVE
   ACCESSIBILITY
   ========================================================= */


/* =========================================================
   00｜PHASE 3 TEST PAGE BASE
   ========================================================= */

.aose-ui-test {
  --aose-ui-white: #ffffff;
  --aose-ui-koji-white: var(--aose-color-koji-white, #faf8f3);
  --aose-ui-beige: var(--aose-color-koji-beige, #eee7d9);
  --aose-ui-ink: var(--aose-color-ink, #332f29);
  --aose-ui-brown: var(--aose-color-brown, #75624e);
  --aose-ui-border: rgba(51, 47, 41, 0.12);
  --aose-ui-shadow: 0 12px 32px rgba(42, 36, 29, 0.08);

  color: var(--aose-ui-ink);
}


/* 検証ページでは1200pxを外枠にする */

.aose-ui-test .aose-container {
  width: min(calc(100% - 64px), 1200px);
  margin-inline: auto;
}


/* 通常本文は800px */

.aose-ui-test .aose-prose {
  width: 100%;
  max-width: 800px;
}


/* 長文用は将来680pxまで絞れる */

.aose-ui-test .aose-prose--narrow {
  max-width: 680px;
}


/* 検証ページのセクション間隔 */

.aose-ui-test .aose-section {
  padding-block: clamp(56px, 7vw, 96px);
}


/* アンカー移動時のヘッダー被り対策 */

.aose-ui-test [id] {
  scroll-margin-top: 120px;
}


/* =========================================================
   01｜HERO COMMON
   ========================================================= */

.aose-hero {
  position: relative;
  display: flex;
  align-items: center;

  width: 100%;
  overflow: hidden;
  isolation: isolate;

  color: #fff;
  background: #2f2b26;
}


/* SWELL本文幅を抜けて画面いっぱい */

.aose-hero--full {
  width: 100vw;
  max-width: none;

  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}


/* 背景画像 */

.aose-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;

  overflow: hidden;
}

.aose-hero__media img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  transform: scale(1);
}


/* Overlay */

.aose-hero::after {
  content: "";

  position: absolute;
  inset: 0;
  z-index: -1;

  pointer-events: none;
}


/* 通常 */

.aose-hero--overlay-light::after {
  background:
    linear-gradient(
      90deg,
      rgba(24, 21, 17, 0.50) 0%,
      rgba(24, 21, 17, 0.24) 48%,
      rgba(24, 21, 17, 0.08) 100%
    );
}


/* 投稿など少し濃く */

.aose-hero--overlay-strong::after {
  background:
    linear-gradient(
      90deg,
      rgba(24, 21, 17, 0.66) 0%,
      rgba(24, 21, 17, 0.38) 52%,
      rgba(24, 21, 17, 0.16) 100%
    );
}


/* HERO内部 */

.aose-hero__content {
  position: relative;
  z-index: 1;

  width: 100%;
}

.aose-hero__content .aose-container {
  width: min(calc(100% - 64px), 1200px);
  margin-inline: auto;
}

.aose-hero__body {
  width: min(100%, 760px);
}


/* HERO Eyebrow */

.aose-hero .aose-eyebrow {
  margin: 0 0 14px;

  color: rgba(255, 255, 255, 0.90);

  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
}


/* HERO title */

.aose-hero__title {
  margin: 0;

  color: #fff;

  font-family:
    var(--aose-font-serif, "Noto Serif JP"),
    serif;

  font-size: clamp(40px, 5vw, 68px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.02em;

  text-shadow:
    0 2px 14px rgba(0, 0, 0, 0.32);

  -webkit-text-stroke:
    0.2px rgba(0, 0, 0, 0.18);
}


/* HERO lead */

.aose-hero__lead {
  max-width: 640px;

  margin: 22px 0 0;

  color: rgba(255, 255, 255, 0.96);

  font-size: clamp(15px, 1.5vw, 18px);
  font-weight: 400;
  line-height: 1.9;

  text-shadow:
    0 2px 10px rgba(0, 0, 0, 0.28);

  -webkit-text-stroke:
    0.15px rgba(0, 0, 0, 0.15);
}


/* HERO type height */

.aose-hero--top {
  min-height: 640px;
}

.aose-hero--parent {
  min-height: 460px;
}

.aose-hero--child {
  min-height: 380px;
}

.aose-hero--post {
  min-height: 330px;
}


/* TOPだけ少し大きく */

.aose-hero--top .aose-hero__title {
  font-size: clamp(44px, 5.5vw, 72px);
}


/* POSTは少し抑える */

.aose-hero--post .aose-hero__title {
  font-size: clamp(30px, 4vw, 50px);
}


/* HERO Zoom */

.aose-hero--zoom .aose-hero__media img {
  animation: aoseHeroZoom 12s ease-out 1 both;
}

@keyframes aoseHeroZoom {

  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.035);
  }

}


/* =========================================================
   02｜PAGE NAV
   ========================================================= */

.aose-page-nav {
  position: relative;

  width: 100vw;

  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  padding: 18px 0;

  background: var(--aose-ui-koji-white);

  border-top: 1px solid var(--aose-ui-border);
  border-bottom: 1px solid var(--aose-ui-border);
}

.aose-page-nav__inner {
  width: min(calc(100% - 64px), 1200px);
  margin-inline: auto;
}

.aose-page-nav__list {
  display: flex;
  flex-wrap: wrap;

  align-items: center;
  justify-content: center;

  gap: 10px;

  margin: 0;
  padding: 0;

  list-style: none;
}

.aose-page-nav__item {
  flex: 0 0 auto;

  margin: 0;
  padding: 0;
}

.aose-page-nav__link {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 8px;

  min-height: 44px;

  padding: 10px 18px;

  color: var(--aose-ui-ink);
  background: #fff;

  border: 1px solid rgba(51, 47, 41, 0.14);
  border-radius: 999px;

  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;

  text-decoration: none;
  white-space: nowrap;

  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}

.aose-page-nav__link::after {
  content: "↓";

  display: inline-block;

  font-size: 12px;

  opacity: 0.60;

  transition: transform 0.25s ease;
}

.aose-page-nav__link.is-current {
  color: #fff;
  background: var(--aose-ui-ink);
  border-color: var(--aose-ui-ink);
}


/* =========================================================
   03｜CARD
   ========================================================= */

.aose-card-grid {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 32px;

  margin-top: 40px;
}

.aose-card {
  display: flex;
  flex-direction: column;

  min-width: 0;

  overflow: hidden;

  color: var(--aose-ui-ink);
  background: #fff;

  border: 1px solid var(--aose-ui-border);
  border-radius: 8px;

  text-decoration: none;

  transition:
    transform 0.30s ease,
    box-shadow 0.30s ease,
    border-color 0.30s ease;
}

.aose-card__media {
  position: relative;

  aspect-ratio: 3 / 2;

  overflow: hidden;

  background: #f3efe6;
}

.aose-card__media img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition: transform 0.60s ease;
}

.aose-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;

  padding: 24px;
}

.aose-card__eyebrow {
  margin: 0 0 8px;

  color: var(--aose-ui-brown);

  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.10em;
}

.aose-card__title {
  margin: 0;

  color: var(--aose-ui-ink);

  font-family:
    var(--aose-font-serif, "Noto Serif JP"),
    serif;

  font-size: clamp(19px, 1.7vw, 23px);
  font-weight: 500;
  line-height: 1.5;
}

.aose-card__text {
  margin: 12px 0 0;

  color: rgba(51, 47, 41, 0.76);

  font-size: 15px;
  line-height: 1.8;
}

.aose-card__more {
  display: inline-flex;

  align-items: center;

  gap: 8px;

  margin-top: auto;
  padding-top: 22px;

  color: var(--aose-ui-ink);

  font-size: 14px;
  font-weight: 500;
}

.aose-card__more::after {
  content: "→";

  transition: transform 0.25s ease;
}


/* =========================================================
   04｜BUTTON / CTA
   ========================================================= */

.aose-actions {
  display: flex;
  flex-wrap: wrap;

  align-items: center;

  gap: 14px;

  margin-top: 28px;
}

.aose-btn {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 12px;

  min-height: 50px;

  padding: 12px 24px;

  border: 1px solid transparent;
  border-radius: 999px;

  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;

  text-decoration: none;

  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}

.aose-btn::after {
  content: "→";

  display: inline-block;

  transition: transform 0.25s ease;
}


/* Primary */

.aose-btn--primary {
  color: #fff;
  background: var(--aose-ui-ink);
  border-color: var(--aose-ui-ink);
}


/* Secondary */

.aose-btn--secondary {
  color: var(--aose-ui-ink);
  background: transparent;

  border-color: rgba(51, 47, 41, 0.28);
}


/* Text Link */

.aose-text-link {
  display: inline-flex;

  align-items: center;

  gap: 8px;

  color: var(--aose-ui-ink);

  font-size: 15px;
  font-weight: 500;

  text-decoration: none;
}

.aose-text-link::after {
  content: "→";

  display: inline-block;

  transition: transform 0.25s ease;
}


/* =========================================================
   05｜STORY
   ========================================================= */

.aose-story {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);

  align-items: center;

  gap: clamp(40px, 6vw, 80px);
}

.aose-story--40-60 {
  grid-template-columns:
    minmax(0, 2fr)
    minmax(0, 3fr);
}

.aose-story--reverse .aose-story__media {
  order: 2;
}

.aose-story--reverse .aose-story__content {
  order: 1;
}

.aose-story__media {
  overflow: hidden;

  border-radius: 8px;

  background: #f3efe6;
}

.aose-story__media img {
  display: block;

  width: 100%;
  height: auto;

  object-fit: cover;
}

.aose-story--large .aose-story__media {
  min-height: 520px;
}

.aose-story--large .aose-story__media img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

.aose-story__content {
  width: 100%;
  max-width: 680px;
}

.aose-story__title {
  margin: 0;

  color: var(--aose-ui-ink);

  font-family:
    var(--aose-font-serif, "Noto Serif JP"),
    serif;

  font-size: clamp(28px, 3vw, 42px);
  font-weight: 500;
  line-height: 1.48;
}

.aose-story__text {
  margin-top: 24px;

  color: var(--aose-ui-ink);

  font-size: 16px;
  line-height: 1.9;
}

.aose-story__text p {
  margin: 0 0 1.45em;
}

.aose-story__text p:last-child {
  margin-bottom: 0;
}


/* =========================================================
   06｜RELATED CONTENT
   ========================================================= */

.aose-related {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 24px;

  margin-top: 40px;
}

.aose-related__item {
  display: flex;
  flex-direction: column;

  overflow: hidden;

  color: var(--aose-ui-ink);
  background: #fff;

  border: 1px solid var(--aose-ui-border);
  border-radius: 8px;

  text-decoration: none;

  transition:
    transform 0.30s ease,
    box-shadow 0.30s ease;
}

.aose-related__media {
  aspect-ratio: 3 / 2;

  overflow: hidden;
}

.aose-related__media img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition: transform 0.60s ease;
}

.aose-related__body {
  padding: 22px;
}

.aose-related__body h3 {
  margin: 0;

  font-family:
    var(--aose-font-serif, "Noto Serif JP"),
    serif;

  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
}

.aose-related__body span {
  display: inline-block;

  margin-top: 16px;

  font-size: 14px;
  font-weight: 500;
}


/* =========================================================
   07｜PICK UP
   ========================================================= */

.aose-pickup {
  display: grid;

  grid-template-columns:
    minmax(0, 1.55fr)
    minmax(280px, 0.85fr);

  gap: 24px;

  margin-top: 40px;
}

.aose-pickup + .aose-pickup {
  margin-top: 64px;
}


/* Main */

.aose-pickup__main {
  min-width: 0;

  overflow: hidden;

  border-radius: 8px;

  background: var(--aose-ui-koji-white);
}

.aose-pickup__main > a {
  display: flex;
  flex-direction: column;

  height: 100%;

  color: var(--aose-ui-ink);

  text-decoration: none;
}

.aose-pickup__main .aose-pickup__media {
  aspect-ratio: 16 / 10;

  overflow: hidden;
}


/* Side */

.aose-pickup__side {
  display: grid;

  grid-template-rows:
    repeat(2, minmax(0, 1fr));

  gap: 24px;
}

.aose-pickup--cafe .aose-pickup__side {
  grid-template-rows:
    repeat(3, minmax(0, 1fr));
}


/* Small */

.aose-pickup__small {
  min-width: 0;

  overflow: hidden;

  border: 1px solid var(--aose-ui-border);
  border-radius: 8px;

  background: #fff;
}

.aose-pickup__small > a {
  display: flex;
  flex-direction: column;

  height: 100%;

  color: var(--aose-ui-ink);

  text-decoration: none;
}

.aose-pickup__small .aose-pickup__media {
  aspect-ratio: 3 / 2;

  overflow: hidden;
}


/* Images */

.aose-pickup__media img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition: transform 0.60s ease;
}


/* Body */

.aose-pickup__body {
  padding: 24px;
}

.aose-pickup__main .aose-pickup__body {
  padding: 28px;
}

.aose-pickup__body h3 {
  margin: 0;

  color: var(--aose-ui-ink);

  font-family:
    var(--aose-font-serif, "Noto Serif JP"),
    serif;

  font-size: clamp(20px, 2vw, 28px);
  font-weight: 500;
  line-height: 1.5;
}

.aose-pickup__main .aose-pickup__body h3 {
  font-size: clamp(26px, 3vw, 38px);
}

.aose-pickup__body p:not(.aose-eyebrow) {
  margin: 12px 0 0;

  font-size: 15px;
  line-height: 1.8;
}


/* Cafeの画像なし小カード */

.aose-pickup--cafe
.aose-pickup__small
.aose-pickup__body {
  display: flex;
  flex-direction: column;
  justify-content: center;

  min-height: 120px;
}


/* =========================================================
   08｜BOTTOM 3 COLUMNS
   ========================================================= */

.aose-bottom-grid {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 24px;

  margin-top: 40px;
}

.aose-bottom-card {
  display: flex;
  flex-direction: column;

  min-height: 300px;

  padding: 32px;

  color: var(--aose-ui-ink);

  background: var(--aose-ui-koji-white);

  border: 1px solid var(--aose-ui-border);
  border-radius: 8px;

  text-decoration: none;

  transition:
    transform 0.30s ease,
    background-color 0.30s ease,
    box-shadow 0.30s ease;
}

.aose-bottom-card h3 {
  margin: 0;

  font-family:
    var(--aose-font-serif, "Noto Serif JP"),
    serif;

  font-size: clamp(22px, 2vw, 28px);
  font-weight: 500;
  line-height: 1.5;
}

.aose-bottom-card p:not(.aose-eyebrow) {
  margin: 16px 0 0;

  font-size: 15px;
  line-height: 1.85;
}

.aose-bottom-card span {
  margin-top: auto;
  padding-top: 30px;

  font-size: 14px;
  font-weight: 500;
}


/* =========================================================
   09｜COMMON GUIDE
   ========================================================= */

.aose-guide-grid {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 20px;

  margin-top: 40px;
}

.aose-guide-card {
  display: flex;
  flex-direction: column;

  min-width: 0;

  padding: 28px;

  background: #fff;

  border: 1px solid var(--aose-ui-border);
  border-radius: 8px;
}

.aose-guide-card h3 {
  margin: 0;

  color: var(--aose-ui-ink);

  font-family:
    var(--aose-font-serif, "Noto Serif JP"),
    serif;

  font-size: 22px;
  font-weight: 500;
  line-height: 1.5;
}

.aose-guide-card p:not(.aose-eyebrow) {
  margin: 14px 0 0;

  color: rgba(51, 47, 41, 0.76);

  font-size: 14px;
  line-height: 1.8;
}

.aose-guide-card .aose-btn {
  width: 100%;

  margin-top: auto;
  padding-top: 12px;
  padding-bottom: 12px;
}

.aose-guide-card > .aose-btn {
  margin-top: 28px;
}


/* =========================================================
   10｜HOVER
   ========================================================= */

@media (hover: hover) {

  .aose-page-nav__link:hover {
    background: var(--aose-ui-beige);

    border-color:
      rgba(117, 98, 78, 0.28);

    transform: translateY(-1px);
  }

  .aose-page-nav__link:hover::after {
    transform: translateY(2px);
  }


  .aose-card:hover {
    transform: translateY(-4px);

    box-shadow: var(--aose-ui-shadow);
  }

  .aose-card:hover
  .aose-card__media img {
    transform: scale(1.035);
  }

  .aose-card:hover
  .aose-card__more::after {
    transform: translateX(4px);
  }


  .aose-btn:hover {
    transform: translateY(-1px);
  }

  .aose-btn:hover::after,
  .aose-text-link:hover::after {
    transform: translateX(4px);
  }

  .aose-btn--primary:hover {
    background: #4a443c;
  }

  .aose-btn--secondary:hover {
    background: var(--aose-ui-koji-white);
  }


  .aose-related__item:hover {
    transform: translateY(-3px);

    box-shadow: var(--aose-ui-shadow);
  }

  .aose-related__item:hover
  .aose-related__media img {
    transform: scale(1.035);
  }


  .aose-pickup__main:hover
  .aose-pickup__media img,
  .aose-pickup__small:hover
  .aose-pickup__media img {
    transform: scale(1.035);
  }


  .aose-bottom-card:hover {
    transform: translateY(-3px);

    background: #fff;

    box-shadow: var(--aose-ui-shadow);
  }

}


/* =========================================================
   11｜FOCUS
   ========================================================= */

.aose-page-nav__link:focus-visible,
.aose-card:focus-visible,
.aose-btn:focus-visible,
.aose-text-link:focus-visible,
.aose-related__item:focus-visible,
.aose-pickup a:focus-visible,
.aose-bottom-card:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}


/* =========================================================
   12｜TABLET
   ========================================================= */

@media (max-width: 959px) {

  .aose-ui-test .aose-container {
    width: min(calc(100% - 48px), 1200px);
  }


  /* HERO */

  .aose-hero__content .aose-container {
    width: min(calc(100% - 48px), 1200px);
  }

  .aose-hero--top {
    min-height: 56svh;
  }

  .aose-hero--parent {
    min-height: 50svh;
  }

  .aose-hero--child {
    min-height: 44svh;
  }

  .aose-hero--post {
    min-height: 300px;
  }


  /* PAGE NAV */

  .aose-page-nav {
    padding: 14px 0;
  }

  .aose-page-nav__inner {
    width: 100%;

    overflow-x: auto;
    overflow-y: hidden;

    padding-inline: 24px;

    scrollbar-width: none;

    -webkit-overflow-scrolling: touch;

    scroll-snap-type: x proximity;
  }

  .aose-page-nav__inner::-webkit-scrollbar {
    display: none;
  }

  .aose-page-nav__list {
    width: max-content;

    flex-wrap: nowrap;

    justify-content: flex-start;
  }

  .aose-page-nav__item {
    scroll-snap-align: start;
  }


  /* CARD */

  .aose-card-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 24px;
  }


  /* STORY */

  .aose-story,
  .aose-story--40-60 {
    grid-template-columns: 1fr;

    gap: 32px;
  }

  .aose-story--reverse
  .aose-story__media,
  .aose-story--reverse
  .aose-story__content {
    order: initial;
  }

  .aose-story__content {
    max-width: 800px;
  }

  .aose-story--large
  .aose-story__media {
    min-height: 0;
  }


  /* RELATED */

  .aose-related {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  /* PICKUP */

  .aose-pickup {
    grid-template-columns: 1fr;
  }

  .aose-pickup__side,
  .aose-pickup--cafe
  .aose-pickup__side {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    grid-template-rows: auto;
  }

  .aose-pickup--cafe
  .aose-pickup__side {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }


  /* BOTTOM */

  .aose-bottom-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  /* GUIDE */

  .aose-guide-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

}


/* =========================================================
   13｜SMARTPHONE
   ========================================================= */

@media (max-width: 599px) {

  .aose-ui-test .aose-container {
    width: calc(100% - 36px);
  }

  .aose-ui-test .aose-section {
    padding-block: 52px;
  }


  /* HERO */

  .aose-hero__content .aose-container {
    width: calc(100% - 36px);
  }

  .aose-hero__body {
    width: 100%;
  }

  .aose-hero--top {
    min-height: 56svh;
  }

  .aose-hero--parent {
    min-height: 50svh;
  }

  .aose-hero--child {
    min-height: 42svh;
  }

  .aose-hero--post {
    min-height: 280px;
  }

  .aose-hero__title,
  .aose-hero--top
  .aose-hero__title {
    font-size: clamp(32px, 10vw, 46px);
  }

  .aose-hero--post
  .aose-hero__title {
    font-size: clamp(27px, 8vw, 38px);
  }

  .aose-hero__lead {
    margin-top: 16px;

    font-size: 14px;
    line-height: 1.85;
  }


  /* NAV */

  .aose-page-nav__inner {
    padding-inline: 18px;
  }

  .aose-page-nav__link {
    min-height: 42px;

    padding: 9px 15px;

    font-size: 13px;
  }


  /* CARD */

  .aose-card-grid {
    grid-template-columns: 1fr;

    gap: 20px;
  }

  .aose-card__body {
    padding: 20px;
  }


  /* BUTTON */

  .aose-actions {
    flex-direction: column;

    align-items: stretch;
  }

  .aose-actions .aose-btn {
    width: 100%;
  }


  /* STORY */

  .aose-story {
    gap: 26px;
  }

  .aose-story__title {
    font-size: clamp(26px, 8vw, 34px);
  }

  .aose-story__text {
    font-size: 16px;
    line-height: 1.9;
  }


  /* RELATED */

  .aose-related {
    grid-template-columns: 1fr;

    gap: 20px;
  }


  /* PICKUP */

  .aose-pickup {
    gap: 20px;
  }

  .aose-pickup + .aose-pickup {
    margin-top: 48px;
  }

  .aose-pickup__side,
  .aose-pickup--cafe
  .aose-pickup__side {
    grid-template-columns: 1fr;

    gap: 16px;
  }

  .aose-pickup__main
  .aose-pickup__body {
    padding: 22px;
  }

  .aose-pickup__body {
    padding: 20px;
  }


  /* BOTTOM */

  .aose-bottom-grid {
    grid-template-columns: 1fr;

    gap: 18px;
  }

  .aose-bottom-card {
    min-height: 0;

    padding: 26px;
  }

  .aose-bottom-card span {
    margin-top: 26px;
    padding-top: 0;
  }


  /* GUIDE */

  .aose-guide-grid {
    grid-template-columns: 1fr;

    gap: 16px;
  }

  .aose-guide-card {
    padding: 24px;
  }

}


/* =========================================================
   14｜320px
   ========================================================= */

@media (max-width: 359px) {

  .aose-ui-test .aose-container,
  .aose-hero__content .aose-container {
    width: calc(100% - 28px);
  }

  .aose-page-nav__inner {
    padding-inline: 14px;
  }

  .aose-card__body,
  .aose-related__body,
  .aose-pickup__body,
  .aose-guide-card {
    padding-left: 18px;
    padding-right: 18px;
  }

}


/* =========================================================
   15｜REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .aose-hero--zoom
  .aose-hero__media img {
    animation: none;
    transform: none;
  }

  .aose-page-nav__link,
  .aose-page-nav__link::after,

  .aose-card,
  .aose-card__media img,
  .aose-card__more::after,

  .aose-btn,
  .aose-btn::after,
  .aose-text-link::after,

  .aose-related__item,
  .aose-related__media img,

  .aose-pickup__media img,

  .aose-bottom-card {
    transition: none;
  }

  .aose-page-nav__link:hover,
  .aose-card:hover,
  .aose-btn:hover,
  .aose-related__item:hover,
  .aose-bottom-card:hover {
    transform: none;
  }

  .aose-card:hover
  .aose-card__media img,

  .aose-related__item:hover
  .aose-related__media img,

  .aose-pickup__main:hover
  .aose-pickup__media img,

  .aose-pickup__small:hover
  .aose-pickup__media img {
    transform: none;
  }

}
/* TYPE B shared How-to / Guide components. Scope preserves TYPE A. */
.aose-child--howto :is(.aose-howto-flow,.aose-ratio-grid,.aose-custom-grid,.aose-next-grid,.aose-aging-timeline){display:grid;gap:24px;grid-template-columns:repeat(3,minmax(0,1fr));margin-block:32px;}
.aose-child--howto :is(.aose-howto-flow,.aose-custom-grid,.aose-aging-timeline){grid-template-columns:repeat(4,minmax(0,1fr));}
.aose-child--howto :is(.aose-howto-flow__item,.aose-ratio-card,.aose-info-card,.aose-next-card,.aose-aging-timeline__item){min-width:0;padding:26px;border:1px solid var(--aose-color-line,#ddd5ca);border-radius:8px;background:var(--aose-color-koji-white,#f8f6f0);overflow-wrap:anywhere;}
.aose-child--howto :is(.aose-howto-flow__number,.aose-info-card__number,.aose-step__number,.aose-next-card__label){font-family:var(--aose-font-ui);color:var(--aose-color-brown,#715039);font-size:14px;letter-spacing:.12em;font-weight:600;}
.aose-child--howto .aose-ratio-card{text-align:center;display:flex;flex-direction:column;justify-content:center;position:relative;}
.aose-child--howto .aose-ratio-card__name{font-size:22px;margin:8px 0;}
.aose-child--howto .aose-ratio-card__ratio{font-size:16px;line-height:2;margin:10px 0;}
.aose-child--howto .aose-ratio-card__ratio strong{font-size:32px;}
.aose-child--howto .aose-ratio-card__label{font-size:14px;margin:8px 0;}
.aose-child--howto .aose-ratio-card--recommend{border:2px solid var(--aose-color-brown,#715039);background:#f2e8d8;}
.aose-child--howto .aose-ratio-card__badge{align-self:center;background:var(--aose-color-brown,#715039);color:white;border-radius:4px;padding:5px 14px;font:600 13px/1.7 var(--aose-font-ui);margin:0 0 12px;}
.aose-child--howto .aose-ingredients{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:24px 0;}
.aose-child--howto .aose-ingredients__item{display:flex;flex-direction:column;gap:8px;padding:18px;text-align:center;border:0;background:white;border-radius:4px;}
.aose-child--howto .aose-ingredients__amount{text-align:center;font-size:26px;white-space:normal;}
.aose-child--howto .aose-ingredients__note{font-size:13px;color:var(--aose-color-text-muted,#686158);}
.aose-child--howto .aose-step{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,5vw,64px);align-items:center;margin-block:52px;}
.aose-child--howto .aose-step::before{content:none;}
.aose-child--howto .aose-step__media{margin:0;}
.aose-child--howto .aose-step__media img{width:100%;height:auto!important;aspect-ratio:3/2;object-fit:cover;}
.aose-child--howto .aose-step--reverse .aose-step__media{order:2;}
.aose-child--howto .aose-step--simple{display:block;padding:30px;border:1px solid var(--aose-color-line,#ddd5ca);border-radius:8px;}
.aose-child--howto .aose-step-list{margin:24px 0;padding:24px 24px 24px 46px;background:#f3eadc;border-left:4px solid var(--aose-color-brown,#715039);border-radius:4px;}
.aose-child--howto .aose-step-list li+li{margin-top:10px;}
.aose-child--howto .aose-aging-timeline__item{border-top:4px solid var(--aose-color-brown,#715039);}
.aose-child--howto .aose-aging-timeline__season{font-size:28px;color:var(--aose-color-brown,#715039);margin:0 0 10px;}
.aose-child--howto .aose-aging-timeline__month{font-size:13px;font-family:var(--aose-font-ui);}
.aose-child--howto .aose-info-box{padding:30px;margin-block:32px;border:1px solid var(--aose-color-line,#ddd5ca);border-left:4px solid var(--aose-color-brown,#715039);background:var(--aose-color-koji-white,#f8f6f0);border-radius:6px;}
.aose-child--howto .aose-next-card{display:flex;flex-direction:column;gap:14px;color:inherit;text-decoration:none;}
.aose-child--howto .aose-next-card .aose-text-link{margin-top:auto;}
.aose-child--howto .aose-next-card .aose-text-link::after{content:none;}
.aose-child--howto :is(.aose-howto-flow__item,.aose-info-card,.aose-next-card,.aose-aging-timeline__item) h3{font-size:21px;line-height:1.6;margin:14px 0;}
.aose-child--howto :is(.aose-howto-flow__item,.aose-info-card,.aose-next-card,.aose-aging-timeline__item) p{font-size:15px;line-height:1.9;}
@media(max-width:1023px){.aose-child--howto :is(.aose-howto-flow,.aose-custom-grid,.aose-aging-timeline){grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:767px){.aose-child--howto :is(.aose-howto-flow,.aose-ratio-grid,.aose-custom-grid,.aose-next-grid,.aose-aging-timeline,.aose-ingredients,.aose-step){grid-template-columns:minmax(0,1fr);gap:20px;}.aose-child--howto .aose-step--reverse .aose-step__media{order:0;}.aose-child--howto :is(.aose-howto-flow__item,.aose-ratio-card,.aose-info-card,.aose-next-card,.aose-aging-timeline__item,.aose-info-box){padding:22px;}}

/* ==================================================
   AOSE Compare Cards
   TYPE B共通比較UI
================================================== */

.aose-compare-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  margin-top: 40px;
}

.aose-compare-card {
  min-width: 0;
  padding: 40px;
  border: 1px solid var(--aose-border);
  border-radius: 8px;
  background: var(--aose-white);
}

.aose-compare-card h3 {
  margin: 6px 0 16px;
}

.aose-compare-card__catch {
  margin-bottom: 24px;
  font-family: "Noto Serif JP", serif;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.6;
}

.aose-compare-card ul {
  margin: 0;
  padding-left: 1.25em;
}

.aose-compare-card li + li {
  margin-top: 8px;
}


/* ==================================================
   米こうじ → 甘こうじ / 甘酒 分岐
================================================== */

.aose-branch-flow {
  margin-top: 56px;
  text-align: center;
}

.aose-branch-flow__origin strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 160px;
  min-height: 64px;
  padding: 12px 24px;
  border: 1px solid var(--aose-border);
  border-radius: 8px;
  font-family: "Noto Serif JP", serif;
  font-size: 22px;
  font-weight: 500;
}

.aose-branch-flow__arrow {
  margin: 14px 0;
  font-size: 24px;
  line-height: 1;
}

.aose-branch-flow__center {
  margin: 0 auto 28px;
  font-weight: 500;
}

.aose-branch-flow__branches {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  max-width: 720px;
  margin-inline: auto;
}

.aose-branch-flow__branches > div {
  padding: 24px;
  border-radius: 8px;
  background: var(--aose-koji-white);
}

.aose-branch-flow__branches strong,
.aose-branch-flow__branches span {
  display: block;
}

.aose-branch-flow__branches strong {
  margin-bottom: 8px;
  font-family: "Noto Serif JP", serif;
  font-size: 20px;
  font-weight: 500;
}


/* 材料2項目時 */
.aose-ingredients--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}


/* ------------------------------
   SP
------------------------------ */

@media (max-width: 767px) {

  .aose-compare-grid {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 32px;
  }

  .aose-compare-card {
    padding: 28px 22px;
  }

  .aose-branch-flow {
    margin-top: 40px;
  }

  .aose-branch-flow__branches {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .aose-ingredients--two {
    grid-template-columns: 1fr;
  }

}

/* Shared Journal article-card body, also used by TOP PICK UP.
 * Journal retains its existing grid, selection and responsive overrides. */
.post_content .aose-journal__pickup-small-body{position:relative;display:flex;flex:1;flex-direction:column;padding:12px 14px 20px;font-family:"Noto Serif JP","Yu Mincho",serif;}
.post_content .aose-journal__pickup-small-body .aose-journal__label{position:relative;align-self:flex-start;transform:translateY(-24px);margin-top:0;margin-bottom:-10px;padding:2px 10px;border-radius:3px;background:var(--journal-accent,var(--aose-brown,#9a572d));color:#fff;font-size:11px;line-height:inherit;letter-spacing:.05em;}
.post_content .aose-journal__pickup-small-body h3{margin:0;padding:0;border:0;background:none;font-family:"Noto Serif JP",serif;font-size:15px;font-weight:400;line-height:1.55;}
.post_content .aose-journal__pickup-small-body h3::before,.post_content .aose-journal__pickup-small-body h3::after{display:none;}
.post_content .aose-journal__pickup-small-body time{margin-top:6px;color:#958e85;font-size:11px;line-height:inherit;}
.post_content .aose-journal__pickup-small-body p{display:block;margin:8px 0 0;color:var(--journal-muted,#756f67);font-size:12px;line-height:1.55;}