@charset "UTF-8";
/* ==========================================================================
   UNIxy Design Kit — SWELL 側の調整（トップページだけに読み込まれます）
   下層ページの見た目は変わりません。
   ※ SWELL のバージョンによってはクラス名が異なる場合があります。
     効いていない箇所があれば、その部分だけ調整してください。
   ========================================================================== */

/* --- 1. トップページ全体の地色と文字 ------------------------------------- */

body.home {
	background: var(--u-bg);
	color: var(--u-ink);
	font-family: var(--u-f-body);
	line-height: 1.95;
	font-feature-settings: "palt" 1;
	/* ファーストビューを画面幅いっぱいに広げても横スクロールが出ないように。
	   clip なので position: sticky は今までどおり効きます。 */
	overflow-x: clip;
}

body.home ::selection {
	background: var(--u-brass-500);
	color: var(--u-lacquer-900);
}

/* 見出しを明朝に */
body.home :is(h1, h2, h3, h4) {
	font-family: var(--u-f-display);
	font-weight: 400;
	letter-spacing: 0.04em;
	line-height: 1.45;
	text-wrap: balance;
}

/* 見出しの大きさ。SWELL の初期値より一段大きく、余白も広めに取る */
body.home .post_content h2 {
	font-size: clamp(1.7rem, 1.4rem + 1.5vw, 2.6rem);
	line-height: 1.42;
	margin-block: 0 18px;
	padding: 0;
	background: none;
	border: 0;
}
body.home .post_content h3 {
	font-size: clamp(1.3rem, 1.16rem + 0.7vw, 1.75rem);
	line-height: 1.55;
	margin-block: 0 14px;
	padding: 0;
	background: none;
	border: 0;
}
body.home .post_content h4 {
	font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
	line-height: 1.7;
	margin-block: 0 10px;
}

body.home p {
	color: var(--u-ink-2);
}

/* リンクとアクセント色 */
body.home a { color: inherit; }
body.home .u-cta a:not(.u-btn) { color: var(--u-brass-300); }

/* --- 2. ファーストビューを最上部に密着させる ----------------------------- */

/* 記事本文の上下余白を詰めて、ヘッダーの直下からデザインを始める */
body.home #content,
body.home .l-content {
	padding-top: 0;
	margin-top: 0;
}
body.home .post_content > .unixy-hero:first-child {
	margin-top: 0;
}

/* 本文まわりの左右余白は各セクション側で持たせる */
body.home .l-mainContent__inner {
	padding-inline: 0;
}

/* --- 3. ヘッダー --------------------------------------------------------- */
/* ファーストビューの上に重ねる場合は、まず SWELL の
   カスタマイザー → ヘッダー →「ヘッダーを透過させる」を有効にしてください。
   以下はその状態での色味の調整です。 */

body.home .l-header {
	border-bottom: 1px solid transparent;
}

/* 透過ヘッダー時の文字色（漆の上に乗るので生成り色にする） */
body.home.is-header-transparent .l-header,
body.home .l-header.-transparent {
	color: var(--u-paper);
}
body.home.is-header-transparent .c-gnav > li > a,
body.home .l-header.-transparent .c-gnav > li > a {
	color: var(--u-paper);
	letter-spacing: 0.08em;
}

/* グローバルナビの下線を真鍮色に */
body.home .c-gnav > li > a::after {
	background-color: var(--u-brass-400);
}

/* --- 4. フッター --------------------------------------------------------- */

body.home .l-footer {
	background: var(--u-lacquer-900);
	color: var(--u-paper);
	border-top: 1px solid rgba(236, 211, 179, 0.28);
}
body.home .l-footer :is(a, p, li, span, h1, h2, h3, h4) {
	color: inherit;
}
body.home .l-footer a:hover {
	color: var(--u-brass-300);
}
body.home .l-footer__foot {
	border-top: 1px solid rgba(236, 211, 179, 0.18);
	font-family: var(--u-f-latin);
	font-size: 0.68rem;
	letter-spacing: 0.16em;
}

/* --- 5. ページトップに戻るボタン ----------------------------------------- */

body.home .p-fixBtnWrap__item,
body.home .c-pagetopBtn {
	background: var(--u-lacquer-800);
	color: var(--u-brass-300);
	border-radius: 2px;
}