@charset "UTF-8";
/*
  トップページ 新デザイン（2026-10-26〜・front-page.php のときだけ top.css の上に重ねて読み込む）
  色は top.css の変数（--nabe-accent など）をそのまま使う。
*/

:root {
	--nabe2-cream: #fdf3e3;
	--nabe2-tile: #faf6f0;
	--nabe2-tile-line: #ece2d4;
}

/* 映像を画面の端まで広げるので、横にはみ出した分でページが横に揺れないようにする */
#body_wrap.home {
	overflow-x: clip;
}

/* ============ [顔] シズル映像＋ひとこと ============ */
.nabe2-hero {
	position: relative;
	margin: 0 calc(50% - 50vw);
	height: clamp(400px, 62svh, 540px);
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background: #2a211b url("hero/poster-sp.jpg") center / cover no-repeat;
	color: #fff;
}
.nabe2-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity .6s ease;
}
.nabe2-hero__video.is-ready {
	opacity: 1;
}
/* 文字を読みやすくする下からの影 */
.nabe2-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(22, 15, 10, .82) 0%, rgba(22, 15, 10, .5) 38%, rgba(22, 15, 10, .08) 68%, rgba(22, 15, 10, 0) 100%);
	pointer-events: none;
}
.nabe2-hero__body {
	position: relative;
	z-index: 1;
	width: 100%;
	padding: 0 20px 64px; /* 下の64pxは、検索窓が重なる分 */
}
.nabe2-hero__eyebrow {
	display: inline-block;
	margin: 0 0 .7rem;
	padding: .28rem .7rem;
	border-radius: 999px;
	background: var(--nabe-accent);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .04em;
	line-height: 1.5;
}
.nabe2-hero__title {
	margin: 0 0 .55rem;
	font-size: clamp(2rem, 9vw, 3.4rem);
	font-weight: 800;
	line-height: 1.28;
	letter-spacing: .02em;
	color: #fff;
	text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}
.nabe2-hero__lead {
	margin: 0;
	font-size: .95rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, .92);
	word-break: auto-phrase;
}
.nabe2-hero__lead b {
	margin-left: .15em;
	font-size: 1.15em;
	color: #ffd88a;
}

/* 検索窓は映像の下端に半分かぶせる */
.nabe2-search {
	position: relative;
	z-index: 2;
	margin: -44px 0 1rem;
	padding: 1rem;
	box-shadow: 0 14px 30px -20px rgba(60, 40, 20, .55);
}
.nabe2-search .nabe-search__input {
	font-size: 1rem;
	padding: .85rem 0;
	min-width: 0;
}
.nabe2-search .nabe-search__btn {
	padding: 0 1.2rem;
}

/* ============ 見出し・白い箱 ============ */
.nabe2-sec {
	padding: 1.4rem 1rem 1.5rem;
	margin: 1rem 0;
}
.nabe2-head {
	margin: 0 0 1rem;
}
.nabe2-head__title {
	position: relative;
	margin: 0;
	padding-left: .75rem;
	font-size: 1.3rem;
	font-weight: 800;
	line-height: 1.4;
	color: var(--nabe-ink);
}
.nabe2-head__title::before {
	content: "";
	position: absolute;
	left: 0;
	top: .2em;
	bottom: .2em;
	width: 4px;
	border-radius: 2px;
	background: var(--nabe-accent);
}
.nabe2-head__sub {
	margin: .2rem 0 0 .75rem;
	font-size: .88rem;
	color: var(--nabe-sub);
}

/* ============ カード（写真＋料理名＋調理時間） ============ */
.nabe2-card {
	display: block;
	min-width: 0;
	color: var(--nabe-ink);
	text-decoration: none;
}
.nabe2-card__thumb {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	border-radius: 10px;
	overflow: hidden;
	background: #efe7dc;
}
.nabe2-card__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .35s ease;
}
.nabe2-card:hover .nabe2-card__thumb img {
	transform: scale(1.04);
}
.nabe2-card__name {
	display: -webkit-box;
	margin-top: .5rem;
	font-size: .98rem;
	font-weight: 700;
	line-height: 1.45;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	word-break: auto-phrase;
}
.nabe2-card__meta {
	display: inline-flex;
	align-items: center;
	gap: .3em;
	margin-top: .2rem;
	font-size: .8rem;
	color: var(--nabe-sub);
}
.nabe2-card__meta::before {
	content: "";
	width: .95em;
	height: .95em;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238b8378' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6.6'/%3E%3Cpath d='M8 4.4V8l2.4 1.6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* 順位バッジ（1=金・2=銀・3=銅） */
.nabe2-rank {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	color: #fff;
	font-size: .9rem;
	font-weight: 800;
	line-height: 1;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}
.nabe2-rank--1 { background: linear-gradient(135deg, #e9bf45, #c4961a); }
.nabe2-rank--2 { background: linear-gradient(135deg, #aeb6bf, #878e96); }
.nabe2-rank--3 { background: linear-gradient(135deg, #bd8352, #935c35); }

/* ============ 大人気：1位を大きく、2・3位は下に2列 ============ */
.nabe2-pop {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.1rem .8rem;
}
.nabe2-card--first {
	grid-column: 1 / -1;
}
.nabe2-card--first .nabe2-card__name {
	font-size: 1.2rem;
}
.nabe2-card--first .nabe2-rank {
	width: 36px;
	height: 36px;
	font-size: 1.1rem;
}

/* ============ 季節のおすすめ（横スクロール） ============ */
.nabe2-scroller {
	padding-bottom: .3rem;
}
.nabe2-scroller > * {
	flex: 0 0 44%;
}
@media (max-width: 767px) {
	/* スマホは指で動かすので矢印は出さない（写真に矢印がかぶらないように） */
	.nabe2-sec .nabe-arrow {
		display: none;
	}
}

/* ============ 冷蔵庫にあるもので探す（4列のタイル） ============ */
.nabe2-ing {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.nabe2-ing li {
	margin: 0;
}
.nabe2-ing__tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .1rem;
	height: 100%;
	padding: .8rem .2rem .7rem;
	border: 1px solid var(--nabe2-tile-line);
	border-radius: 12px;
	background: var(--nabe2-tile);
	color: var(--nabe-ink);
	text-decoration: none;
	transition: border-color .15s, background .15s, color .15s;
}
.nabe2-ing__tile:hover {
	border-color: var(--nabe-accent);
	background: #fff;
	color: var(--nabe-accent);
}
.nabe2-ing__name {
	font-size: .98rem;
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
}
.nabe2-ing__count {
	font-size: .72rem;
	color: var(--nabe-sub);
}

/* 「ほかの食材・調味料で探す」（押すと開く） */
.nabe2-more-ing {
	margin-top: 1rem;
}
.nabe2-more-ing summary {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	padding: .7rem 1rem;
	border: 1.5px solid var(--nabe2-tile-line);
	border-radius: 999px;
	color: var(--nabe-ink);
	font-size: .92rem;
	font-weight: 700;
	list-style: none;
	cursor: pointer;
}
.nabe2-more-ing summary::-webkit-details-marker {
	display: none;
}
.nabe2-more-ing summary::after {
	content: "";
	width: .5em;
	height: .5em;
	margin-top: -.2em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform .2s;
}
.nabe2-more-ing[open] summary::after {
	margin-top: .2em;
	transform: rotate(-135deg);
}
.nabe2-chips__label {
	margin: 1rem 0 .45rem;
	font-size: .82rem;
	font-weight: 700;
	color: var(--nabe-sub);
}
.nabe2-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.nabe2-chips li {
	margin: 0;
}
.nabe2-chips a {
	display: inline-flex;
	align-items: baseline;
	gap: .35em;
	padding: .42rem .8rem;
	border: 1px solid var(--nabe2-tile-line);
	border-radius: 999px;
	background: #fff;
	color: var(--nabe-ink);
	font-size: .9rem;
	text-decoration: none;
}
.nabe2-chips a span {
	font-size: .72rem;
	color: var(--nabe-sub);
}
.nabe2-chips a:hover {
	border-color: var(--nabe-accent);
	color: var(--nabe-accent);
}

/* ============ 新着（2列） ============ */
.nabe2-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.1rem .8rem;
}
.nabe2-sec .nabe-more {
	margin-top: 1.4rem;
}

/* ============ [動画] YouTubeの新着（横スクロール・押すとこの場で再生） ============ */
.nabe2-yt__scroller {
	display: flex;
	gap: .8rem;
	margin: 0 -1rem;
	padding: .2rem 1rem .6rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding: 0 1rem;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}
.nabe2-yt__item {
	flex: 0 0 78%;
	min-width: 0;
	scroll-snap-align: start;
}
.nabe2-yt__play {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	padding: 0;
	border: 0;
	border-radius: 10px;
	overflow: hidden;
	background: #1c1a19;
	cursor: pointer;
}
.nabe2-yt__play img,
.nabe2-yt__play iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
}
/* 再生マーク（YouTubeの赤い角丸＋白い三角） */
.nabe2-yt__icon {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 60px;
	height: 42px;
	border-radius: 12px;
	background: rgba(225, 0, 0, .92);
	transform: translate(-50%, -50%);
	transition: transform .15s;
}
.nabe2-yt__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	border-style: solid;
	border-width: 9px 0 9px 15px;
	border-color: transparent transparent transparent #fff;
	transform: translate(-50%, -50%);
}
.nabe2-yt__play.is-playing {
	cursor: auto;
}
.nabe2-yt__play:hover .nabe2-yt__icon {
	transform: translate(-50%, -50%) scale(1.08);
}
.nabe2-yt__name {
	margin: .5rem 0 0;
	font-size: .98rem;
	font-weight: 700;
	line-height: 1.45;
	color: var(--nabe-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.nabe2-yt__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	margin: .15rem 0 0;
	font-size: .8rem;
	color: var(--nabe-sub);
}
.nabe2-yt__meta a {
	color: var(--nabe-accent);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}
.nabe2-yt__meta a::after {
	content: " ›";
}
.nabe2-yt__ch {
	margin: .9rem 0 0;
	font-size: .85rem;
	text-align: center;
}
.nabe2-yt__ch a {
	color: var(--nabe-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ============ [出口] なべのだいどころ。の案内 ============ */
.nabe2-mail {
	padding: 1.6rem 1.1rem 1.4rem;
	background: var(--nabe2-cream);
	text-align: center;
}
.nabe2-mail__kicker {
	display: inline-block;
	margin: 0 0 .6rem;
	padding: .2rem .75rem;
	border-radius: 999px;
	background: #fff;
	color: var(--nabe-accent);
	font-size: .8rem;
	font-weight: 700;
}
.nabe2-mail__title {
	margin: 0 0 1.1rem;
	font-size: 1.3rem;
	font-weight: 800;
	line-height: 1.5;
	color: var(--nabe-ink);
}
.nabe2-mail__row {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 0 0 1.2rem;
	text-align: left;
}
.nabe2-mail__img {
	flex: 0 0 36%;
	width: 36%;
	height: auto;
	border-radius: 6px;
	box-shadow: 0 10px 24px -12px rgba(60, 40, 20, .55);
}
.nabe2-mail__list {
	flex: 1;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}
.nabe2-mail__list li {
	margin: 0 0 .7rem;
	font-size: .84rem;
	line-height: 1.55;
	color: #5a5248;
	word-break: auto-phrase;
}
.nabe2-mail__list li:last-child {
	margin-bottom: 0;
}
.nabe2-mail__list b {
	display: block;
	font-size: .95rem;
	color: var(--nabe-ink);
}
.nabe2-mail__btn {
	display: block;
	max-width: 420px;
	margin: 0 auto;
	padding: 1rem 1.2rem;
	border-radius: 999px;
	background: var(--nabe-accent);
	box-shadow: 0 8px 18px -10px rgba(200, 50, 30, .8);
	color: #fff !important;
	font-size: 1.05rem;
	font-weight: 800;
	text-decoration: none;
	transition: opacity .2s;
}
.nabe2-mail__btn:hover {
	opacity: .88;
}
.nabe2-mail__note {
	margin: .6rem 0 0;
	font-size: .8rem;
	color: var(--nabe-sub);
}

/* ============ 企業の方への1行 ============ */
.nabe2-biz {
	margin: 1.4rem 0 2.4rem;
	font-size: .84rem;
	line-height: 1.8;
	color: var(--nabe-sub);
	text-align: center;
	word-break: auto-phrase;
}
.nabe2-biz span {
	display: block;
	font-weight: 700;
	color: var(--nabe-ink);
}
.nabe2-biz a {
	margin: 0 .15em;
	white-space: nowrap;
	color: var(--nabe-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ============ パソコンで見たとき ============ */
@media (min-width: 768px) {
	.nabe2-hero {
		height: 520px;
		background-image: url("hero/poster-pc.jpg");
	}
	.nabe2-hero::after {
		background: linear-gradient(to right, rgba(22, 15, 10, .78) 0%, rgba(22, 15, 10, .45) 45%, rgba(22, 15, 10, 0) 75%);
	}
	.nabe2-hero__body {
		align-self: center;
		max-width: 1200px;
		margin: 0 auto;
		padding: 0 48px 40px;
	}
	.nabe2-hero__lead {
		font-size: 1.1rem;
	}
	.nabe2-search {
		max-width: 860px;
		margin: -46px auto 1.8rem;
		padding: 1.3rem 1.6rem;
	}
	.nabe2-search .nabe-search__form {
		width: auto; /* top.css はキャラクターの分だけ狭めているが、新しいトップにはキャラクターを置かない */
		max-width: none;
	}
	.nabe2-sec {
		padding: 2.2rem 2.4rem;
		margin: 1.8rem 0;
	}
	.nabe2-head {
		display: flex;
		align-items: baseline;
		gap: 1rem;
	}
	.nabe2-head__title {
		font-size: 1.6rem;
	}
	.nabe2-head__sub {
		margin: 0;
	}
	/* 1位を左に大きく、2・3位を右に縦並び */
	.nabe2-pop {
		grid-template-columns: 1.7fr 1fr;
		gap: 1.2rem 1.6rem;
	}
	.nabe2-card--first {
		grid-column: auto;
		grid-row: span 2;
	}
	.nabe2-card--first .nabe2-card__name {
		font-size: 1.45rem;
	}
	.nabe2-scroller > * {
		flex-basis: 280px;
	}
	.nabe2-ing {
		grid-template-columns: repeat(6, minmax(0, 1fr));
		gap: 10px;
	}
	.nabe2-more-ing summary {
		max-width: 360px;
		margin: 0 auto;
	}
	.nabe2-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1.6rem 1.2rem;
	}
	.nabe2-yt__scroller {
		gap: 1.2rem;
		margin: 0;
		padding: .2rem 0 .8rem;
		scroll-padding: 0;
	}
	.nabe2-yt__item {
		flex-basis: 340px;
	}
	/* メルマガの案内：PCは左にレシピカードを大きく、右に文字（2026-10-26 社長「PCだと画像が小さい。勿体ない」）
	   .nabe2-mail__row をほどいて（display: contents）、カード画像を左の列に縦いっぱい、ほかを右の列に順に並べる */
	.nabe2-mail {
		display: grid;
		grid-template-columns: minmax(0, 340px) minmax(0, 500px);
		justify-content: center;
		align-items: start;
		column-gap: 3.2rem;
		padding: 3rem 2.4rem;
		text-align: left;
	}
	.nabe2-mail__row {
		display: contents;
	}
	.nabe2-mail__img {
		grid-column: 1;
		grid-row: 1 / span 5;
		align-self: center;
		width: 100%;
		border-radius: 8px;
		box-shadow: 0 22px 40px -22px rgba(60, 40, 20, .6);
	}
	.nabe2-mail > :not(.nabe2-mail__row),
	.nabe2-mail__list {
		grid-column: 2;
	}
	.nabe2-mail__kicker {
		justify-self: start;
	}
	.nabe2-mail__title {
		font-size: 1.75rem;
	}
	.nabe2-mail__list {
		margin: 0 0 1.6rem;
	}
	.nabe2-mail__list li {
		margin-bottom: .9rem;
		font-size: .95rem;
	}
	.nabe2-mail__list b {
		font-size: 1.05rem;
	}
	.nabe2-mail__btn {
		margin: 0;
		text-align: center;
	}
	.nabe2-mail__note {
		max-width: 420px;
		text-align: center;
	}
	.nabe2-biz span {
		display: inline;
		margin-right: .6em;
	}
}

/* ============ フッター（新しいトップのときだけ） ============
   本文とフッターの間の大きな余白（SWELLの既定 約93px）を詰める。
   フッターのメニューで「何分で作る？」の下の5分〜30分が縦に並んで崩れて見えるので、下の段は出さない（親の「何分で作る？」は残る） */
.home #content.l-content {
	margin-bottom: 0;
}
.l-footer__nav .sub-menu {
	display: none;
}