@charset "UTF-8";
/*
  トップページ専用のCSS（front-page.phpのときだけ読み込まれる）
  記事ページには影響しない。

  色はここで一括管理している。変えたいときは下の変数だけ触れば全部に反映される。
*/

:root {
	--nabe-ink: #1c1a19;
	--nabe-sub: #6b6560;
	--nabe-line: #e6e1db;
	--nabe-bg-soft: #faf8f5;
	--nabe-accent: #c8321e; /* ロゴの赤に寄せた色 */
	--nabe-radius: 12px;
}

/* ============ 旗 ============ */
.nabe-hero {
	padding: 2.4rem 0 2rem;
	text-align: center;
}
.nabe-hero__eyebrow {
	font-size: .78rem;
	letter-spacing: .08em;
	color: var(--nabe-sub);
	margin: 0 0 .8rem;
}
.nabe-hero__title {
	font-size: clamp(1.4rem, 5vw, 2.2rem);
	line-height: 1.45;
	font-weight: 700;
	margin: 0 0 .9rem;
	color: var(--nabe-ink);
}
.nabe-hero__title strong {
	color: var(--nabe-accent);
}
.nabe-hero__lead {
	font-size: .92rem;
	line-height: 1.8;
	color: var(--nabe-sub);
	margin: 0;
}

/* ============ トップ画像（SWELLのメインビジュアル）は使わない ============
   2026-07-30・社長の指示「トップページの画像はもうやめる」。
   カスタマイザーの設定を触らずに済むよう、トップページでだけCSSで消す。
   戻したいときはこの2行を消してデプロイするだけ。 */
.home #main_visual,
.home .p-mainVisual {
	display: none !important;
}

/* ============ 検索ボックス（最上部・クックパッド風） ============ */
.nabe-search {
	background: #fff;
	border-radius: 16px;
	padding: 1.7rem 1.3rem;
	margin: 1.4rem 0;
}
.nabe-search__form {
	display: flex;
	gap: .7rem;
	max-width: 680px;
	margin: 0 auto;
}
.nabe-search__box {
	flex: 1;
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: 0 1.1rem;
	background: #fff;
	border: 1.5px solid #c9c2b8;
	border-radius: 10px;
	cursor: text;
	transition: border-color .2s, box-shadow .2s;
}
.nabe-search__box:focus-within {
	border-color: var(--nabe-accent);
	box-shadow: 0 0 0 3px rgba(200, 50, 30, .12);
}
.nabe-search__icon {
	color: #8b8378;
	flex: 0 0 auto;
}
.nabe-search__input {
	flex: 1;
	border: 0;
	outline: 0;
	background: transparent;
	font-size: 1.1rem;
	padding: .95rem 0;
	color: var(--nabe-ink);
}
.nabe-search__input::placeholder {
	color: #a39a8e;
}
.nabe-search__btn {
	flex: 0 0 auto;
	border: 0;
	border-radius: 10px;
	padding: 0 1.6rem;
	background: var(--nabe-accent);
	color: #fff;
	font-size: 1.05rem;
	font-weight: 700;
	cursor: pointer;
	transition: opacity .2s;
}
.nabe-search__btn:hover {
	opacity: .85;
}

/* ============ ページ全体の下地と白カード ============
   2026-07-30・社長の指示で方針変更。
   「セクションごとに色を変える」のをやめて、参考サイト（Nadia風）と同じ
   【ベージュの下地 ＋ 項目ごとの白い角丸ボックス】に統一した。
   色数が減って、プロのレシピサイトらしい落ち着いた見た目になる。 */
/* ★SWELLは home クラスを body ではなく #body_wrap に付ける
   （body.home と書いても当たらない。2026-07-30に実際に空振りした） */
#body_wrap.home,
body.home {
	background: #f6efe5;
}
.home #content,
.home .l-content__inner {
	background: transparent;
}

/* 各セクション＝白いカード */
.nabe-sec {
	background: #fff;
	border-radius: 16px;
	padding: 1.7rem 1.3rem;
	margin: 1.4rem 0;
}

.nabe-sec__head {
	margin-bottom: 1.1rem;
}
.nabe-sec__title {
	font-size: 1.45rem;
	font-weight: 700;
	margin: 0 0 .35rem;
	padding-left: .6rem;
	border-left: 4px solid var(--nabe-accent);
	line-height: 1.4;
}
.nabe-sec__sub {
	font-size: 1rem;
	color: var(--nabe-sub);
	margin: 0;
}

/* ============ 横スクロール（季節のおすすめ） ============ */
.nabe-scroller {
	display: flex;
	gap: .8rem;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	padding: .2rem .2rem 1rem;
	/* スクロールバーは細く */
	scrollbar-width: thin;
}

/* 自動スクロールが動いているとき（top.jsが付ける）。
   scroll-snap は自動スクロールと喧嘩して引っかかるので切る。
   スクロールバーも勝手に動き続けて目障りなので隠す（指やホイールでの操作は今まで通りできる）。 */
.nabe-scroller.is-auto {
	scroll-snap-type: none;
	scrollbar-width: none;
}
.nabe-scroller.is-auto::-webkit-scrollbar {
	display: none;
}
/* カードの幅。2026-07-30に1.5倍にした（210px → 315px）
   横スクロールなので、大きくしても縦に伸びない */
.nabe-scroller > * {
	flex: 0 0 min(70%, 315px);
	scroll-snap-align: start;
}

/* ============ 矢印ボタン ============
   top.js が .nabe-scroller をこの箱で包んで、中に前へ／次へのボタンを入れる。
   JSが動かない環境では箱もボタンも作られないので、押せないボタンが残らない。 */
.nabe-scroller-wrap {
	position: relative;
}
.nabe-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid var(--nabe-line);
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	color: var(--nabe-ink);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
	transition: background .2s, color .2s, border-color .2s, opacity .2s;
	/* 指で押しやすいように、見た目より広い当たり判定にする */
	-webkit-tap-highlight-color: transparent;
}
.nabe-arrow > span {
	/* 「‹」「›」は字面が上寄りなので、光学的に中央へ寄せる */
	margin-top: -.12em;
}
.nabe-arrow:hover,
.nabe-arrow:focus-visible {
	background: var(--nabe-accent);
	border-color: var(--nabe-accent);
	color: #fff;
}
.nabe-arrow--prev {
	left: -6px;
}
.nabe-arrow--next {
	right: -6px;
}

/* 矢印はサムネイルの高さの中央に置きたい。
   カードはサムネ＋タイトルの構成なので、そのままだとタイトルぶん下にずれる。
   スクローラーの下パディング(1rem)とタイトル約2行分を差し引いて、画像の中央あたりに合わせる。 */
@media (min-width: 768px) {
	.nabe-arrow {
		width: 46px;
		height: 46px;
		font-size: 1.7rem;
	}
	.nabe-arrow--prev {
		left: -14px;
	}
	.nabe-arrow--next {
		right: -14px;
	}
}

/* ============ カード ============ */
.nabe-card {
	display: block;
	text-decoration: none;
	color: inherit;
}
/*
  サムネイルはYouTubeと同じ 16:9。
  以前は 4:3 で切り抜いていたため、サムネの文字が左右で切れていた（2026-07-30 修正）。
  object-fit: contain にして、画像を1ドットも切らずに全体を見せる。
*/
.nabe-card__thumb {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var(--nabe-radius);
	overflow: hidden;
	background: var(--nabe-bg-soft);
	display: flex;
	align-items: center;
	justify-content: center;
}
.nabe-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform .35s ease;
}
.nabe-card:hover .nabe-card__thumb img {
	transform: scale(1.05);
}
.nabe-card__noimg {
	font-size: 1.8rem;
	opacity: .35;
}

/* ============ 大人気記事（1位を大きく、2〜3位を下に横並び） ============
   2026-07-30・社長の指示「1位が一番上、2・3位を下。とにかく1位を目立たせる」 */
.nabe-pop__item--first {
	display: block;
	margin-bottom: 1.4rem;
}
.nabe-pop__item--first .nabe-card__thumb {
	/* 1位は画像を切らずに大きく見せたいので、少し縦長の比率にする */
	aspect-ratio: 16 / 9;
	border-radius: 18px;
}
.nabe-pop__item--first .nabe-card__title {
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1.5;
	margin-top: .9rem;
	-webkit-line-clamp: 3;
}
/* 1位のバッジは特大 */
.nabe-pop__item--first .nabe-rank {
	width: 46px;
	height: 52px;
	font-size: 1.5rem;
	left: 16px;
	border-radius: 0 0 12px 12px;
}

/* 2〜3位は下に横並び */
.nabe-pop__sub {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.2rem;
}

/* ============ 順位バッジ ============
   サムネイルの左上に 1・2・3 を出す。1=金、2=銀、3=銅 */
.nabe-rank {
	position: absolute;
	top: 0;
	left: 10px;
	z-index: 1;
	width: 30px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: 700;
	font-size: .95rem;
	border-radius: 0 0 8px 8px;
	background: #4a4a4a;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}
.nabe-rank--1 {
	background: linear-gradient(135deg, #e5b93c, #c79a1e);
}
.nabe-rank--2 {
	background: linear-gradient(135deg, #aab2bb, #8d949c);
}
.nabe-rank--3 {
	background: linear-gradient(135deg, #b87d4d, #96603a);
}
.nabe-card__title {
	font-size: 1.05rem;
	line-height: 1.6;
	margin: .7rem 0 0;
	/* 2行で切る */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ============ 素材から探す ============
   白カード（.nabe-sec）の中に、グループごとの色付き見出し＋行リストを並べる。
   パネル自体には色を付けない（白カードが背景）。 */
.nabe-panel {
	background: transparent;
	padding: 0;
}
.nabe-ing {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.4rem 2rem;
}
.nabe-ing__label {
	display: flex;
	align-items: center;
	gap: .5rem;
	font-size: 1.2rem;
	font-weight: 700;
	margin: 0 0 .2rem;
	padding-bottom: .45rem;
	border-bottom: 2px solid var(--nabe-line);
	color: var(--nabe-ink);
}
.nabe-ing__icon {
	font-size: 1.4rem;
	line-height: 1;
}
/* グループごとのアクセント色（見出しの下線） */
.nabe-ing__group--meat .nabe-ing__label      { border-color: #d96c4f; }
.nabe-ing__group--veg .nabe-ing__label       { border-color: #7fae56; }
.nabe-ing__group--fish .nabe-ing__label      { border-color: #5f8fc6; }
.nabe-ing__group--noodle .nabe-ing__label    { border-color: #d9a441; }
.nabe-ing__group--seasoning .nabe-ing__label { border-color: #c46a94; }
.nabe-ing__group--etc .nabe-ing__label       { border-color: #9a8f7e; }

.nabe-ing__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.nabe-ing__link {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .78rem .1rem;
	text-decoration: none;
	color: var(--nabe-ink);
	font-size: 1.08rem;
	border-bottom: 1px solid rgba(0, 0, 0, .06);
	transition: color .15s;
}
.nabe-ing__list li:last-child .nabe-ing__link {
	border-bottom: 0;
}
.nabe-ing__name {
	flex: 1;
}
.nabe-ing__count {
	font-size: .85rem;
	color: var(--nabe-sub);
	background: rgba(0, 0, 0, .05);
	border-radius: 999px;
	padding: .1rem .55rem;
	line-height: 1.5;
}
/* 右端の「›」 */
.nabe-ing__link::after {
	content: "›";
	color: var(--nabe-sub);
	font-size: 1rem;
	line-height: 1;
	transition: transform .15s, color .15s;
}
.nabe-ing__link:hover {
	color: var(--nabe-accent);
}
.nabe-ing__link:hover::after {
	color: var(--nabe-accent);
	transform: translateX(2px);
}

/* ============ 調理時間 ============ */
.nabe-times {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
	gap: .7rem;
	margin: 0;
	padding: 0;
}
.nabe-time {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .15rem;
	padding: 1rem .4rem .9rem;
	border: 1px solid var(--nabe-line);
	border-radius: var(--nabe-radius);
	background: #fff;
	text-decoration: none;
	color: var(--nabe-ink);
	transition: border-color .2s, box-shadow .2s, transform .2s;
}
.nabe-time:hover {
	border-color: var(--nabe-accent);
	box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
	transform: translateY(-2px);
}
.nabe-time__icon {
	font-size: 1.6rem;
	line-height: 1;
	margin-bottom: .25rem;
}
.nabe-time__name {
	font-size: 1.25rem;
	font-weight: 700;
}
.nabe-time__count {
	font-size: .85rem;
	color: var(--nabe-sub);
}

/* ============ グリッド（新着） ============ */
/* こちらも1.5倍（150px → 225px）。横スクロールと大きさを揃えるため */
.nabe-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
	gap: 1.4rem 1rem;
}

/* ============ CTA枠 ============
   背景は白カード（.nabe-sec）なので、ここでは付けない */
.nabe-cta {
	text-align: center;
}
.nabe-cta__lead {
	font-size: 1.1rem;
	margin: 0 0 1rem;
	color: var(--nabe-ink);
}
.nabe-cta__btn {
	display: inline-block;
	padding: .8rem 1.8rem;
	border-radius: 999px;
	background: var(--nabe-accent);
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	font-size: 1.05rem;
	transition: opacity .2s;
}
.nabe-cta__btn:hover {
	opacity: .85;
}

/* ============ パソコンで見たとき ============ */
@media (min-width: 768px) {
	.nabe-hero {
		padding: 3.2rem 0 2.6rem;
	}
	.nabe-sec {
		margin: 4rem 0;
	}
	.nabe-sec__title {
		font-size: 1.7rem;
	}
	.nabe-scroller > * {
		flex-basis: 345px; /* 230px の1.5倍 */
	}
	.nabe-grid {
		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* 200px の1.5倍 */
	}
	/* 素材グループはPCでは3列に並べる */
	.nabe-ing {
		grid-template-columns: repeat(3, 1fr);
	}
	.nabe-sec,
	.nabe-search {
		padding: 2.3rem 2.4rem;
		margin: 1.8rem 0;
	}
	/* 2〜3位はPCでは横に2枚並べる */
	.nabe-pop__sub {
		grid-template-columns: 1fr 1fr;
		gap: 1.6rem;
	}
	/* 1位はさらに大きく */
	.nabe-pop__item--first .nabe-card__title {
		font-size: 1.6rem;
	}
	.nabe-pop__item--first {
		margin-bottom: 1.8rem;
	}
}

/* ダークモード対応は入れない（2026-07-30に撤去）。
   SWELL本体がライト固定なので、OSがダークモードの人だけ
   パネルが真っ黒になってページ全体とチグハグになっていた。
   サイトの配色はここで完全に固定する。 */