@charset "UTF-8";
/* =========================================================
   農福カルタ｜カルタ一覧ページ（karuta-page.php）

   すべて .nfk-karutaPage の中だけに効くよう限定しているので、
   他のページに影響することはありません。
   ========================================================= */

/* SWELL のコンテンツ幅・余白を解除して全幅で組む */
.page-template-karuta-page #content.l-content {
	max-width: 100%;
	width: 100%;
	padding: 0;
	margin: 0;
}

.page-template-karuta-page .l-mainContent,
.page-template-karuta-page .l-mainContent__inner { width: 100%; max-width: 100%; }

.nfk-karutaPage {
	/* 白 → グレー の波。トップページ .nfk-karuta::after と同じ数値 */
	--nfk-waveH: min(12.9vw, 248px);
	/* 見出し画像の下端に、グレーをどれだけ食い込ませるか */
	--nfk-waveLift: min(9vw, 173px);
	color: var(--nfk-ink);
}

.nfk-karutaPage img { max-width: 100%; height: auto; }


/* =========================================================
   見出し（1枚画像）
   ========================================================= */
/* 白地はこの要素が敷き、画像だけを波より前面に出します
   （z-index は付けない＝重ね順のグループを作らないこと） */
.nfk-karutaPage .nfk-kpHead {
	position: relative;
	background: #fff;
}

/* 画像は背景透過なので、波が絵の後ろを通り抜けて見えます */
.nfk-karutaPage .nfk-kpHead__img {
	position: relative;
	z-index: 2;
	width: min(100%, 1500px);
	margin: 0 auto;
	display: block;
	line-height: 0;
}

.nfk-karutaPage .nfk-kpHead__img img { width: 100%; height: auto; display: block; }


/* =========================================================
   行から探す（ページ内リンク）
   ========================================================= */
.nfk-karutaPage .nfk-kpNav {
	position: relative;
	z-index: 1;
	/* 見出し画像の下端に重ねて、白い余白が空きすぎないようにする */
	margin-top: calc(-1 * var(--nfk-waveLift));
	/* 波の高さぶん余白をとって、ボタンに波がかからないようにする */
	padding-top: calc(var(--nfk-waveH) + clamp(20px, 3vw, 44px));
	padding-bottom: clamp(36px, 5vw, 70px);
	/* 波より上は見出しと同じ白。ここを transparent にすると、見出しセクションの
	   下端より下でページ背景（グレー）が透けてしまい、その境目が水平な直線として
	   見えて「波が平ら」になります。見出し画像は z-index:2 で手前にあるので切れません */
	background: #fff;
}

/* 上端カーブの「下側」だけを塗る（曲線はトップページの .nfk-karuta::after と同じもの） */
.nfk-karutaPage .nfk-kpNav::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: var(--nfk-waveH);
	background: var(--nfk-paper);
	-webkit-mask: var(--nfk-wave-karuta-below) center / 100% 100% no-repeat;
	mask: var(--nfk-wave-karuta-below) center / 100% 100% no-repeat;
}

/* 波より下はベタ塗り */
.nfk-karutaPage .nfk-kpNav::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: calc(var(--nfk-waveH) - 1px);
	bottom: 0;
	background: var(--nfk-paper);
}

.nfk-karutaPage .nfk-kpNav .nfk-inner { position: relative; z-index: 1; }

.nfk-karutaPage .nfk-kpNav__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(8px, 1.2vw, 16px);
	max-width: 900px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.nfk-karutaPage .nfk-kpNav__list li { margin: 0; }

.nfk-karutaPage .nfk-kpNav__list a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .6em;
	min-height: 3.2em;
	padding: .7em 1em;
	background: #fff;
	box-shadow: 0 1px 3px rgb(0 0 0 / .08);
	color: var(--nfk-ink);
	font-size: clamp(14px, 1.6vw, 17px);
	font-weight: 700;
	letter-spacing: .1em;
	line-height: 1.4;
	text-decoration: none;
	transition: background-color .2s, color .2s;
}

.nfk-karutaPage .nfk-kpNav__list a::before {
	content: "";
	flex: none;
	width: .6em;
	height: .6em;
	border-radius: 50%;
	background: var(--nfk-green);
}

.nfk-karutaPage .nfk-kpNav__list a:hover,
.nfk-karutaPage .nfk-kpNav__list a:focus-visible {
	background: var(--nfk-green-pale);
	color: var(--nfk-green-dark);
}


/* =========================================================
   一覧
   ========================================================= */
.nfk-karutaPage .nfk-kpList {
	padding-bottom: clamp(50px, 8vw, 110px);
	background: var(--nfk-paper);
}

.nfk-karutaPage .nfk-kpGroup { scroll-margin-top: clamp(60px, 12vw, 120px); }

.nfk-karutaPage .nfk-kpGroup__title {
	margin: 0 0 clamp(18px, 2.6vw, 32px);
	padding: .7em 1.1em;
	background: var(--nfk-green);
	color: #fff;
	font-size: clamp(15px, 1.8vw, 19px);
	font-weight: 700;
	letter-spacing: .16em;
	line-height: 1.4;
}

.nfk-karutaPage .nfk-kpGroup + .nfk-kpGroup .nfk-kpGroup__title { margin-top: clamp(36px, 5vw, 72px); }

/* 1 行あたり「絵札＋読み札」のセットを 2 組。スマホでは 1 組（＝カルタ 2 枚）並びます */
.nfk-karutaPage .nfk-kpCards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr));
	gap: clamp(18px, 2.6vw, 34px) clamp(20px, 4vw, 56px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.nfk-karutaPage .nfk-kpCard { margin: 0; }

.nfk-karutaPage .nfk-kpCard__name {
	margin: 0 0 .5em;
	font-size: clamp(13px, 1.5vw, 16px);
	font-weight: 700;
	letter-spacing: .04em;
	line-height: 1.5;
}

.nfk-karutaPage .nfk-kpCard__pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(8px, 1.4vw, 18px);
}

.nfk-karutaPage .nfk-kpCard__img { display: block; line-height: 0; }

.nfk-karutaPage .nfk-kpCard__img img {
	width: 100%;
	height: auto;
	display: block;
	border: 3px solid var(--nfk-green);
	background: #fff;
}


/* =========================================================
   スマホ
   ========================================================= */
@media (max-width: 767px) {
	/* 「あ行」などは横並びのまま、3 列で詰めて表示 */
	.nfk-karutaPage .nfk-kpNav__list {
		grid-template-columns: repeat(3, 1fr);
		gap: 8px;
	}

	.nfk-karutaPage .nfk-kpNav__list a {
		gap: .4em;
		min-height: 2.8em;
		padding: .6em .4em;
		font-size: 13px;
		letter-spacing: .04em;
	}

	/* カルタは 1 組（絵札＋読み札の 2 枚）で 1 行 */
	.nfk-karutaPage .nfk-kpCards { grid-template-columns: 1fr; }
}