/* ◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎
◼︎	基本変数・設定
◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎ */

:root {
	--maxw: 1100px;
	--basic1: #eaf4fc; /*月白色 */
	--basic2: #2b2b2b; /* 黒色 */
	--accent: #fcb869; /* */

	/* ライン */
	--line-rgb: 43 43 43; /* 黒色*/
	--line-a: 0.52; /* 透明度*/
	--line-weak: 0.12;

	/* ヘッダー・フッター */
	--navbg: 43 43 43; /* 黒色*/
	--nav-a: 0.82; /* 透明度*/
	--nav-weak: 0.12;

	/* フォントサイズ設定*/
	--font-heading: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", "Times New Roman", serif;
	--fw-heading: 600;
	--ls-heading: 0.08em;

	--fs-nav: 14px;
	--nav-track: 0.18em;
}

.container {
	width: min(var(--maxw), 92vw);
	margin: 18px auto 18px;
	box-sizing: border-box;
}
/* 広告切替やナビ調整 */
/*デフォルト（PC想定） */
.adPc {
	display: block;
}
.adSp {
	display: none;
}
@media (max-width: 800px) {
	.adPc {
		display: none;
	}
	.adSp {
		display: block;
	}
}

/* ボックス計算の統一 */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* 画像・長文のはみ出し対策 */
img {
	max-width: 100%;
	height: auto;
}
main {
	overflow-wrap: anywhere;
}

/* ◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎
◼︎	本文
◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎ */
/* 全体 */
html,
body {
	height: 100%;
}
html {
	min-height: 100%;
}
/*背景 */
body {
	background: transparent,
		radial-gradient(900px 500px at 20% 10%, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0) 60%),
		linear-gradient(180deg, #fbfaf5 0%, #f5f2ea 100%);
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background-color: #fbfaf5; /* 生成色 */
	line-height: 1.75;
	font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", system-ui, sans-serif;
	font-weight: 400;
}

/* 見出しフォント　*/
h1,
h2,
h3 {
	font-family: var(--font-heading);
	font-weight: var(--fw-heading);
	letter-spacing: var(--ls-heading);
}

main {
	flex: 1; /* 中身が少ない時余白を引き受ける */
}

/* ◼︎ナビの基本構造 */
/* ヘッダー全体の背景や線*/
.siteHeader {
	background-color: rgb(var(--navbg) / var(--nav-a));
	border-bottom: 1px solid var(--basic1);
	padding: 0; /* 10pxとかなら 14px に */
}
.headInner {
	display: flex; /* タイトルとナビを横並びにする親 */
	align-items: center; /* タイトルとナビの縦揃え*/
	gap: 0;
	padding: 0;
	width: min(var(--maxw), 92vw);
	margin: 18px auto 18px;
	box-sizing: border-box;
}
/* サイトタイトル */
.siteTitle {
	margin: 0;
	font-size: 26px;
	color: var(--basic1);
	line-height: 1;
	white-space: nowrap;
	flex: 0 0 auto;
	font-family: var(--font-heading);
	font-weight: var(--fw-heading);
	letter-spacing: var(--ls-heading);
}
.siteTitle a {
	color: var(--basic1);
	text-decoration: none;
}
/*	ナビメニュー*/
.topnav {
	margin-left: auto; /* ナビを右側へ */
	flex: 0 0 auto;
}
.topnav ul {
	display: flex;
	gap: 0; /* 仕切り線を使うので0に設定*/
	margin: 0;
	padding: 0;
	list-style: none;
}
/* 縦の仕切り線 */
.topnav li + li {
	border-left: 1px solid rgb(var(--line-rgb) / var(--line-a));
}
.topnav a {
	display: block;
	padding: 6px 12px;
	color: var(--basic1);
	text-decoration: none;

	font-family: var(--font-heading);
	font-size: var(--fs-nav);
	letter-spacing: var(--nav-track);
	line-height: 1;

	/* 下線を“上品”に（hoverで伸びる） */
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 1px;
	transition:
		background-size 0.18s ease,
		color 0.18s ease;
}

.topnav a:hover {
	color: var(--accent);
	background-size: 100% 1px;
}
.topnav li.current > a {
	color: var(--accent);
	background-size: 100% 1px;
}
/* ◼︎パネル */
.panel {
	background-color: white;
	color: var(--basic2);
	border: 1px solid rgb(var(--line-rgb) / var(--line-a));
	border-radius: 12px;
	padding: 16px;
	list-style: none;
}
.panel h2 {
	margin: 0 0 12px 0;
	height: auto; /* 行の高さ */
	display: flex;
	align-items: center;
	padding: 12px 16px; /* 左右余白 */
	border-bottom: 1px solid rgb(var(--line-rgb) / var(--line-a));
	letter-spacing: 0.04em;
}

/* ===== NAV（checkbox方式前提）===== */
/* ===== topnav only (mobile first) ===== */
.topnav {
	position: relative;
}

/* SPデフォ：閉じてる */
.topnav .navList {
	display: none;
	margin: 0;
	padding: 6px;
	list-style: none;

	position: absolute;
	right: 0;
	top: calc(100% + 8px);
	min-width: 240px;

	background: var(--basic2);
	color: var(--basic1);
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 12px;
	z-index: 1000;
}

/* 開いたら表示 */
.topnav .navToggle:checked + .navBurger + .navOverlay + .navList {
	display: block;
}

/* ボタン */
.topnav .navBurger {
	display: inline-block;
	cursor: pointer;
	user-select: none;
	padding: 10px 12px;
	border-radius: 10px;
}

/* 外側クリックで閉じる＋外側操作不能 */
.topnav .navOverlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.35);
	z-index: 900;
}
.topnav .navToggle:checked + .navBurger + .navOverlay {
	display: block;
}

/* SP：縦メニュー */
.topnav .navList a {
	display: block;
	padding: 10px 10px;
	border-radius: 10px;
	text-decoration: none;
	color: inherit;
	white-space: nowrap;
}

/* PC：横並び常時表示（ここだけflex） */
@media (min-width: 801px) {
	.topnav .navBurger,
	.topnav .navOverlay {
		display: none;
	}

	.topnav .navList {
		display: flex;
		position: static;
		padding: 0;
		background: transparent;
		border: 0;
		border-radius: 0;
		min-width: 0;
	}

	.topnav .navList a {
		padding: 0 10px;
		border-radius: 0;
	}
}

/* ◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎
◼︎	フッター footer
◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎◼︎ */
footer {
	margin-top: auto; /* 余白発生時に下へと押し込める */
	background-color: rgb(var(--navbg) / var(--nav-weak));
	padding: 10px;
	width: 100%;

	display: flex;
	flex-direction: column; /* 縦積み */
	align-items: center; /* 中央揃え */
	gap: 10px; /* ナビとコピーライトの間隔 */
}
.siteFooter .footNav {
	width: 100%;
}
.siteFooter .footNav ul {
	justify-content: center; /* nav ulがflex前提*/
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.footNav ul {
	list-style: none;
}
.footNav a {
	color: var(--basic2);
	text-decoration: none;
	font-size: 14px;
}
/* コピーライト */
.siteFooter .copyright {
	display: block;
	font-size: 12px;
	opacity: 0.8;
	margin: 0; /* ズレ防止 */
	text-align: center;
}

.crumb {
	margin: 0 0 10px 0;
}
.crumb ol {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	color: rgb(var(--basic2-rgb, 34 34 34) / 0.75);
	font-size: 12px;
	letter-spacing: 0.1em;
}
.crumb li + li::before {
	content: ">";
	margin-right: 10px;
	opacity: 0.6;
}
.crumb a {
	color: inherit;
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 1px;
	transition: background-size 0.18s ease;
}
.crumb a:hover {
	background-size: 100% 1px;
}

/* main先頭のh1を揃える（クラス増やさない） */
main > h1:first-of-type {
	margin: 0 0 14px 0;
	padding: 8px 0 10px;
	border-bottom: 1px solid rgb(var(--line-rgb) / var(--line-a));
	font-family: var(--font-heading);
	font-weight: var(--fw-heading);
	letter-spacing: var(--ls-heading);
	font-size: 18px;
}