/**
 * caboui.com — Home PC（Figma 202609）
 */

html:has(body.front-page--v1) {
	height: 100%;
	overflow: hidden;
}

body.front-page--v1 {
	--front-max-width: 1216px;
	--front-viewport-inset: 24px;
	--front-body-padding-top: var(--front-viewport-inset);
	--front-body-padding-bottom: var(--front-viewport-inset);
	--front-sidebar-width: 220px;
	--front-shell-radius: 24px;
	--front-frame-border-width: 1px;
	--front-section-gap: 56px;
	--front-content-padding-x: 40px;
	--front-content-padding-y: 32px;
	--front-bp-sp: 1000px;

	box-sizing: border-box;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	padding-top: var(--front-body-padding-top);
	padding-right: var(--front-viewport-inset);
	padding-bottom: var(--front-body-padding-bottom);
	padding-left: var(--front-viewport-inset);
	overflow: hidden;
	background: var(--caboui-color-bg);
	color: var(--caboui-color-text);
	font-family: var(--caboui-font-family-ja);
}

body.front-page--v1 .front_frame {
	font-family: var(--caboui-font-family-ja);
}

body.front-page--v1 .front_frame :where(
	p,
	span,
	a,
	li,
	ul,
	ol,
	div,
	button,
	summary,
	details,
	label
) {
	font-family: inherit;
}

body.front-page--v1 .front_frame :is(
	.front_sidebar_nav_link,
	.front_sidebar_nav_link_text,
	.front_sidebar_social,
	.front_pill_link:not(.front_pill_link--cta),
	.front_pill_link:not(.front_pill_link--cta) .front_pill_link_text,
	.front_work_tag,
	.front_article_tag,
	.front_article_date,
	.front_card_overlay_text
) {
	font-family: var(--caboui-font-family-en);
}

body.front-page--v1 .front_frame :is(
	.front_sidebar_nav_link,
	.front_sidebar_nav_link_text,
	.front_pill_link,
	.front_pill_link .front_pill_link_text,
	.front_work_tag,
	.front_article_tag
) {
	font-weight: 700;
}

body.front-page--v1 #header,
body.front-page--v1 #footer {
	display: none;
}

body.front-page--v1 #front_work,
body.front-page--v1 #front_article,
body.front-page--v1 #front_hero {
	padding-bottom: 0;
}

body.front-page--v1 .visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* frame（PCモニター風の外枠 — ビューポート余白内に固定） */

.front_frame {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: var(--front-max-width);
	height: calc(100vh - var(--front-body-padding-top) - var(--front-body-padding-bottom));
	height: calc(100dvh - var(--front-body-padding-top) - var(--front-body-padding-bottom));
	min-height: 0;
	margin: 0 auto;
	border: var(--front-frame-border-width) solid var(--caboui-color-border);
	border-radius: var(--front-shell-radius);
	overflow: hidden;
	background: var(--caboui-color-bg);
}

/* shell */

.front_shell {
	display: flex;
	flex: 1 1 auto;
	width: 100%;
	min-height: 0;
	background: var(--caboui-color-bg);
}

.front_body {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 0;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.front_main {
	padding: var(--front-content-padding-y) var(--front-content-padding-x) 80px;
}

/* sidebar */

.front_sidebar {
	display: flex;
	flex: 0 0 var(--front-sidebar-width);
	flex-direction: column;
	min-height: 0;
	overflow-x: visible;
	overflow-y: hidden;
	border-right: 1px solid var(--caboui-color-border);
	background: var(--caboui-color-bg);
}

.front_sidebar_inner {
	box-sizing: border-box;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-height: 0;
	overflow-x: visible;
	overflow-y: hidden;
	padding: 40px 24px 40px 28px;
}

.front_topbar {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-bottom: 48px;
	width: 100%;
}

.front_menu_toggle {
	display: none;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: none;
	border-radius: var(--caboui-radius-pill);
	background: transparent;
	box-shadow: inset 0 0 0 1px var(--caboui-color-border);
	color: var(--caboui-color-text);
	cursor: pointer;
	transition:
		background-color var(--caboui-transition),
		box-shadow var(--caboui-transition),
		color var(--caboui-transition);
}

.front_menu_toggle:hover,
.front_menu_toggle:focus-visible {
	box-shadow: inset 0 0 0 1px var(--caboui-color-text);
	background: var(--caboui-color-text);
	color: var(--caboui-color-bg);
}

.front_menu_toggle_icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
}

.front_menu_toggle_icon .svg_container {
	position: relative;
	width: 20px;
	height: 20px;
}

.front_menu_toggle_icon .svg_content {
	position: static;
	display: block;
	width: 20px;
	height: 20px;
	fill: currentColor;
}

.front_menu_backdrop {
	display: none;
}

.front_sidebar_menu {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-height: 0;
}

.front_sidebar_logo {
	flex-shrink: 0;
	width: 100%;
	display: flex;
	justify-content: center;
}

.front_sidebar_logo_link {
	display: inline-block;
	text-decoration: none;
	color: inherit;
}

.front_sidebar_logo_link:hover {
	opacity: 0.75;
}

.front_sidebar_logo_img {
	display: block;
	width: auto;
	height: 32px;
	max-width: 100%;
}

.front_sidebar_nav {
	flex: 1 1 auto;
	min-height: 0;
	overflow-x: visible;
	overflow-y: auto;
	padding: 2px 2px 4px 0;
}

.front_sidebar_nav_list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.front_sidebar_nav_item {
	padding-block: 1px;
}

.front_sidebar_nav_item + .front_sidebar_nav_item {
	margin-top: 26px;
}

.front_sidebar_nav_link {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	min-height: 44px;
	padding: 8px 16px;
	border: none;
	border-radius: var(--caboui-radius-pill);
	background: transparent;
	box-shadow: inset 0 0 0 1px transparent;
	font-family: var(--caboui-font-family-en);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.04em;
	text-decoration: none;
	color: var(--caboui-color-text);
	transition:
		background-color var(--caboui-transition),
		box-shadow var(--caboui-transition),
		color var(--caboui-transition);
}

.front_sidebar_nav_link_text {
	flex: 1 1 auto;
}

.front_sidebar_nav_link_mark {
	flex: 0 0 8px;
	width: 8px;
	height: 8px;
	border: 1.5px solid transparent;
	border-radius: 50%;
	opacity: 0;
	transition:
		opacity var(--caboui-transition),
		background-color var(--caboui-transition),
		border-color var(--caboui-transition);
}

.front_sidebar_nav_link:hover,
.front_sidebar_nav_link:focus-visible {
	box-shadow: inset 0 0 0 1px var(--caboui-color-border);
	background: var(--caboui-color-bg);
	color: var(--caboui-color-text);
}

.front_sidebar_nav_link:hover .front_sidebar_nav_link_mark,
.front_sidebar_nav_link:focus-visible .front_sidebar_nav_link_mark {
	border-color: currentColor;
	opacity: 1;
}

.front_sidebar_nav_link.is-active,
.front_sidebar_nav_link.is-active:hover,
.front_sidebar_nav_link.is-active:focus-visible {
	box-shadow: inset 0 0 0 1px var(--caboui-color-text);
	background: var(--caboui-color-text);
	color: var(--caboui-color-bg);
}

.front_sidebar_nav_link.is-active .front_sidebar_nav_link_mark,
.front_sidebar_nav_link.is-active:hover .front_sidebar_nav_link_mark,
.front_sidebar_nav_link.is-active:focus-visible .front_sidebar_nav_link_mark {
	border-color: transparent;
	background: currentColor;
	opacity: 1;
}

.front_sidebar_footer {
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	align-items: stretch;
	gap: 20px;
	margin-top: auto;
	padding-top: 40px;
}

.front_sidebar_footer .front_pill_link--cta {
	width: 100%;
}

.front_sidebar_social {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--caboui-font-family-en);
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--caboui-color-text-muted);
	text-decoration: none;
	transition: opacity var(--caboui-transition);
}

.front_sidebar_social:hover {
	opacity: 0.65;
	color: var(--caboui-color-text-muted);
}

.front_sidebar_social_icon {
	display: inline-flex;
}

/* pill link */

.front_pill_link {
	box-sizing: border-box;
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 44px;
	padding: 0 22px;
	border: none;
	border-radius: var(--caboui-radius-pill);
	background: transparent;
	box-shadow: inset 0 0 0 1px var(--caboui-color-border);
	font-family: var(--caboui-font-family-en);
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-decoration: none;
	text-transform: uppercase;
	color: var(--caboui-color-text);
	transition:
		background-color var(--caboui-transition),
		box-shadow var(--caboui-transition),
		color var(--caboui-transition);
}

.front_pill_link--cta {
	font-family: var(--caboui-font-family-ja);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: none;
}

.front_pill_link:hover,
.front_pill_link:focus-visible {
	box-shadow: inset 0 0 0 1px var(--caboui-color-text);
	background: var(--caboui-color-text);
	color: var(--caboui-color-bg);
}

.front_pill_link_arrow {
	display: inline-flex;
	flex: 0 0 16px;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
}

.front_pill_link_arrow .svg_content {
	display: block;
	position: static;
	width: 16px;
	height: 16px;
}

.front_pill_link--more .front_pill_link_more_icons {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

/* hero */

.front_hero {
	margin-bottom: var(--front-section-gap);
}

.front_hero_media {
	width: 100%;
	min-height: 420px;
	border-radius: var(--caboui-radius-lg);
	background: var(--caboui-color-bg-subtle);
}

/* section */

.front_section + .front_section {
	margin-top: var(--front-section-gap);
	padding-top: var(--front-section-gap);
	border-top: 1px solid var(--caboui-color-border);
	margin-inline: calc(-1 * var(--front-content-padding-x));
	padding-inline: var(--front-content-padding-x);
}

.front_section_head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 28px;
	padding-block: 2px;
	overflow: visible;
}

.front_section_title {
	margin: 0;
	line-height: 0;
}

.front_section_title_img {
	display: block;
	width: auto;
	height: 32px;
	max-width: 100%;
}

.front_section_title_img--tall {
	height: 36px;
}

/* work grid */

.front_work_grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.front_work_link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.front_work_media {
	position: relative;
	aspect-ratio: 1 / 1;
	border: 1px solid var(--caboui-color-border);
	border-radius: var(--caboui-radius-md);
	overflow: hidden;
	background: var(--caboui-color-bg);
}

.front_work_img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--caboui-transition);
}

.front_work_body {
	padding-top: 14px;
}

.front_work_title {
	margin: 0;
	font-family: var(--caboui-font-family-ja);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.5;
}

.front_work_tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 8px 0 0;
}

.front_work_tag {
	font-family: var(--caboui-font-family-en);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--caboui-color-text-muted);
}

/* article grid */

.front_article_grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.front_article_link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.front_article_media {
	position: relative;
	aspect-ratio: 16 / 10;
	border: 1px solid var(--caboui-color-border);
	border-radius: var(--caboui-radius-md);
	overflow: hidden;
	background: var(--caboui-color-bg);
}

.front_article_img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--caboui-transition);
}

.front_article_body {
	padding-top: 14px;
}

.front_article_title {
	margin: 0;
	font-family: var(--caboui-font-family-ja);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.6;
	color: var(--caboui-color-text);
}

.front_article_meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 10px;
}

.front_article_tag {
	font-family: var(--caboui-font-family-en);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--caboui-color-text);
}

.front_article_date {
	font-family: var(--caboui-font-family-en);
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.04em;
	color: var(--caboui-color-text-muted);
}

/* about */

.front_section--about .front_section_head {
	margin-bottom: 24px;
}

.front_about_panel {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: 32px;
	align-items: start;
	padding: 32px;
	border: 1px solid var(--caboui-color-border);
	border-radius: var(--caboui-radius-lg);
}

.front_about_media {
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: var(--caboui-radius-md);
	overflow: hidden;
	background: var(--caboui-color-bg-subtle);
}

.front_about_img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.front_about_content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	padding-top: 8px;
}

.front_about_text {
	margin: 0;
	font-family: var(--caboui-font-family-ja);
	font-size: 0.9375rem;
	font-weight: 400;
	line-height: 1.9;
}

.front_section--about .front_about_content .front_pill_link--more {
	align-self: center;
}

/* Q&A */

.front_qa_list {
	border-top: none;
}

.front_qa_item {
	border-bottom: 1px dashed var(--caboui-color-border-light);
}

.front_qa_item:last-child {
	border-bottom: none;
}

.front_qa_question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 22px 0;
	cursor: pointer;
	list-style: none;
}

.front_qa_question::-webkit-details-marker {
	display: none;
}

.front_qa_question_text {
	font-family: var(--caboui-font-family-ja);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.6;
}

.front_qa_toggle {
	display: inline-flex;
	flex: 0 0 16px;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	transition: transform var(--caboui-transition);
}

.front_qa_toggle .svg_content {
	display: block;
	position: static;
	width: 16px;
	height: 16px;
}

.front_qa_item[open] .front_qa_toggle {
	transform: rotate(180deg);
}

.front_qa_answer {
	padding: 0 0 22px;
}

.front_qa_answer_text {
	margin: 0;
	font-family: var(--caboui-font-family-ja);
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.9;
	color: var(--caboui-color-text-muted);
}

.front_qa_answer_text :where(p) {
	margin: 0;
	font: inherit;
	color: inherit;
}

.front_qa_answer_text :where(p + p) {
	margin-top: 0.75em;
}

/* PC — ナビ枠線の見切れ防止 */

@media (min-width: 1001px) {
	.front_sidebar_nav {
		overflow: visible;
	}

	.front_card_overlay {
		position: absolute;
		inset: 0;
		z-index: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		background: #000000;
		color: var(--caboui-color-bg);
		opacity: 0;
		transition: opacity var(--caboui-transition);
	}

	.front_work_link:hover .front_card_overlay,
	.front_work_link:focus-visible .front_card_overlay,
	.front_article_link:hover .front_card_overlay,
	.front_article_link:focus-visible .front_card_overlay {
		opacity: 1;
	}

	.front_work_link:hover .front_work_img,
	.front_work_link:focus-visible .front_work_img,
	.front_article_link:hover .front_article_img,
	.front_article_link:focus-visible .front_article_img {
		transform: scale(1.03);
	}

	.front_card_overlay_text {
		font-family: var(--caboui-font-family-en);
		font-size: 0.8125rem;
		font-weight: 500;
		line-height: 1;
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}

	.front_card_overlay_arrow {
		display: inline-flex;
		flex: 0 0 16px;
		align-items: center;
		justify-content: center;
		width: 16px;
		height: 16px;
	}

	.front_card_overlay_arrow .svg_content {
		display: block;
		position: static;
		width: 16px;
		height: 16px;
		fill: currentColor;
	}
}

@media (max-width: 1000px) {
	.front_card_overlay {
		display: none;
	}

	.front_work_link:active,
	.front_article_link:active {
		opacity: 0.85;
	}
}

/* SP — max-width: 1000px */

@media (max-width: 1000px) {
	html:has(body.front-page--v1) {
		height: auto;
		overflow-x: hidden;
		overflow-y: auto;
	}

	body.front-page--v1 {
		--front-viewport-inset: 16px;
		--front-section-gap: 40px;
		--front-content-padding-x: 20px;
		--front-content-padding-y: 24px;
		--front-shell-radius: 16px;
		min-width: 0;
		height: auto;
		min-height: 100dvh;
		min-height: 100vh;
		overflow: visible;
	}

	.front_frame {
		height: auto;
		min-height: calc(100dvh - (2 * var(--front-viewport-inset)));
		min-height: calc(100vh - (2 * var(--front-viewport-inset)));
	}

	.front_shell {
		flex-direction: column;
	}

	.front_sidebar {
		flex: 0 0 auto;
		width: 100%;
		border-right: none;
		border-bottom: 1px solid var(--caboui-color-border);
	}

	.front_sidebar_inner {
		overflow: visible;
		padding: 16px 20px;
	}

	.front_topbar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		margin-bottom: 0;
	}

	.front_sidebar_logo {
		flex: 1 1 auto;
		width: auto;
		max-width: none;
		justify-content: flex-start;
	}

	.front_sidebar_logo_link {
		display: block;
	}

	.front_menu_toggle {
		display: inline-flex;
		flex-shrink: 0;
	}

	.front_sidebar_menu {
		box-sizing: border-box;
		position: fixed;
		top: 0;
		right: 0;
		z-index: 100001;
		flex: none;
		width: min(320px, 100vw);
		height: 100dvh;
		height: 100vh;
		padding: 24px 20px 32px;
		border-left: 1px solid var(--caboui-color-border);
		background: var(--caboui-color-bg);
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
		visibility: hidden;
		transform: translateX(100%);
		transition:
			transform var(--caboui-transition),
			visibility 0s linear var(--caboui-transition);
	}

	.front_sidebar.is-menu-open .front_sidebar_menu {
		visibility: visible;
		transform: translateX(0);
		transition:
			transform var(--caboui-transition),
			visibility 0s;
	}

	.front_menu_backdrop {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 100000;
		padding: 0;
		border: 0;
		background: rgb(17 17 17 / 0.35);
		cursor: pointer;
		opacity: 0;
		visibility: hidden;
		transition:
			opacity var(--caboui-transition),
			visibility 0s linear var(--caboui-transition);
	}

	.front_sidebar.is-menu-open .front_menu_backdrop {
		opacity: 1;
		visibility: visible;
		transition:
			opacity var(--caboui-transition),
			visibility 0s;
	}

	.front_sidebar_nav_item + .front_sidebar_nav_item {
		margin-top: 16px;
	}

	.front_sidebar_nav {
		flex: 0 0 auto;
		overflow: visible;
		padding: 0;
	}

	.front_sidebar_nav_link {
		width: 100%;
		min-width: 0;
	}

	.front_sidebar_footer {
		flex: 0 0 auto;
		margin-top: 40px;
		padding-top: 0;
	}

	.front_body {
		flex: none;
		overflow: visible;
	}

	.front_main {
		padding-bottom: 48px;
	}

	.front_hero_media {
		min-height: 220px;
	}

	.front_section_head {
		flex-wrap: wrap;
	}

	/* WORK / ARTICLE / Q&A — 見出し左・矢印ボタン右（1行）・本文ブロック中央 */
	.front_section--work,
	.front_section--article,
	.front_section--qa {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
	}

	.front_section--work .front_section_head,
	.front_section--article .front_section_head,
	.front_section--qa .front_section_head {
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		gap: 16px;
		margin-bottom: 24px;
	}

	.front_section--work .front_section_title,
	.front_section--article .front_section_title,
	.front_section--qa .front_section_title {
		display: flex;
		flex: 1 1 auto;
		justify-content: flex-start;
		width: auto;
		min-width: 0;
	}

	.front_section--work .front_section_head .front_pill_link--more,
	.front_section--article .front_section_head .front_pill_link--more,
	.front_section--qa .front_section_head .front_pill_link--more {
		flex-shrink: 0;
		gap: 0;
		min-height: 44px;
		padding: 0 14px;
	}

	.front_pill_link--icon-only-sp .front_pill_link_text {
		display: none !important;
	}

	.front_section--work .front_work_grid,
	.front_section--article .front_article_grid,
	.front_section--qa .front_qa_list {
		width: 100%;
	}

	.front_work_grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px 16px;
	}

	.front_article_grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	.front_section--about .front_about_panel {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
		padding: 24px 20px;
	}

	.front_section--about .front_about_media {
		justify-self: center;
		width: min(100%, 220px);
		max-width: 220px;
	}

	.front_section--about .front_about_content {
		width: 100%;
		align-items: stretch;
	}
}

body.front-page--v1.is-menu-open {
	overflow: hidden;
}

/* archive — WORK / ARTICLE */

.front_main--archive {
	padding-top: var(--front-content-padding-y);
	padding-bottom: var(--front-content-padding-y);
}

.front_section--archive {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
	margin-inline: 0;
	padding-inline: 0;
}

.front_section--archive .front_section_head {
	margin-bottom: 24px;
}

.front_archive_head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 24px;
}

.front_archive_head .front_section_head {
	flex: 1 1 auto;
	min-width: 0;
	margin-bottom: 0;
}

.front_archive_search {
	flex: 0 0 auto;
	max-width: min(100%, 320px);
}

.front_archive_search_form {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: 44px;
	height: 44px;
	overflow: hidden;
	border: none;
	border-radius: var(--caboui-radius-pill);
	background: transparent;
	box-shadow: inset 0 0 0 1px var(--caboui-color-border);
	transition:
		width var(--caboui-transition),
		box-shadow var(--caboui-transition);
}

.front_archive_search.is-open .front_archive_search_form {
	width: min(320px, calc(100vw - 120px));
}

.front_archive_search_field {
	flex: 1 1 auto;
	width: 0;
	min-width: 0;
	height: 44px;
	padding: 0;
	border: none;
	background: transparent;
	font-family: var(--caboui-font-family-ja);
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--caboui-color-text);
	opacity: 0;
	transition: opacity var(--caboui-transition);
}

.front_archive_search_field:focus {
	outline: none;
}

.front_archive_search_field::placeholder {
	color: var(--caboui-color-text-muted);
}

.front_archive_search.is-open .front_archive_search_field {
	width: auto;
	padding: 0 8px 0 16px;
	opacity: 1;
}

.front_archive_search_form:focus-within {
	box-shadow: inset 0 0 0 1px var(--caboui-color-text);
}

.front_archive_search_toggle {
	display: inline-flex;
	flex: 0 0 44px;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: none;
	border-radius: var(--caboui-radius-pill);
	background: transparent;
	color: var(--caboui-color-text);
	cursor: pointer;
}

.front_archive_search_toggle:hover,
.front_archive_search_toggle:focus-visible {
	background: transparent;
	outline: none;
}

.front_archive_search_icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
}

.front_archive_search_icon .svg_container,
.front_archive_search_icon .caboui_header_search_svg {
	display: block;
	width: 18px;
	height: 18px;
}

.front_archive_search_icon svg {
	display: block;
	width: 18px;
	height: 18px;
}

body.front-page--v1 .front_frame .front_archive_search_field {
	font-family: var(--caboui-font-family-ja);
}

.front_archive_filters {
	margin-bottom: 28px;
}

.front_archive_filter_list {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.front_archive_filter_pill {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 0 20px;
	border: none;
	border-radius: var(--caboui-radius-pill);
	background: transparent;
	box-shadow: inset 0 0 0 1px var(--caboui-color-border);
	font-family: var(--caboui-font-family-en);
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-decoration: none;
	text-transform: uppercase;
	color: var(--caboui-color-text);
	transition:
		background-color var(--caboui-transition),
		box-shadow var(--caboui-transition),
		color var(--caboui-transition);
}

.front_archive_filter_pill:hover,
.front_archive_filter_pill:focus-visible {
	box-shadow: inset 0 0 0 1px var(--caboui-color-text);
	background: var(--caboui-color-bg);
	color: var(--caboui-color-text);
}

.front_archive_filter_pill.is-active,
.front_archive_filter_pill.is-active:hover,
.front_archive_filter_pill.is-active:focus-visible {
	box-shadow: inset 0 0 0 1px var(--caboui-color-text);
	background: var(--caboui-color-text);
	color: var(--caboui-color-bg);
}

.front_archive_empty {
	margin: 0;
	font-family: var(--caboui-font-family-ja);
	font-size: 0.9375rem;
	line-height: 1.8;
	color: var(--caboui-color-text-muted);
}

.front_section--archive .front_archive_pagination {
	margin-top: 48px;
}

.front_archive_pagination_list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 4px 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.front_archive_pagination_item {
	margin: 0;
	padding: 0;
}

.front_archive_pagination_link,
.front_archive_pagination_current,
.front_archive_pagination_ellipsis {
	display: inline-block;
	font-family: var(--caboui-font-family-en);
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1;
	text-decoration: none;
	color: var(--caboui-color-text-muted);
}

.front_archive_pagination_current {
	color: var(--caboui-color-text);
	font-weight: 700;
}

.front_archive_pagination_link:hover,
.front_archive_pagination_link:focus-visible {
	color: var(--caboui-color-text);
	outline: none;
}

body.front-page--v1 .front_frame :is(
	.front_archive_pagination_link,
	.front_archive_pagination_current,
	.front_archive_pagination_ellipsis
) {
	font-family: var(--caboui-font-family-en);
}

body.front-page--v1 .front_frame :is(
	.front_archive_filter_pill
) {
	font-family: var(--caboui-font-family-en);
}

body.front-page--v1 .front_frame .front_archive_filter_pill {
	font-weight: 700;
}

@media (max-width: 1000px) {
	.front_archive_head {
		align-items: flex-start;
	}

	.front_archive_search {
		flex-shrink: 0;
	}

	.front_archive_search.is-open .front_archive_search_form {
		width: min(280px, calc(100vw - 96px));
	}
}

/* single — ARTICLE / WORK */

.front_main--single {
	padding-top: var(--front-content-padding-y);
	padding-bottom: var(--front-content-padding-y);
}

.front_post_single {
	width: 100%;
}

.front_post_single_inner {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--caboui-single-content-width);
	margin-inline: auto;
}

.front_post_single_header {
	margin-bottom: 40px;
}

.front_single_back {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: 24px;
	border: none;
	border-radius: var(--caboui-radius-pill);
	background: transparent;
	color: var(--caboui-color-text);
	text-decoration: none;
	transition: opacity var(--caboui-transition);
}

.front_single_back:hover,
.front_single_back:focus-visible {
	opacity: 0.65;
	outline: none;
}

.front_single_back_icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	transform: rotate(180deg);
}

.front_single_back_icon .svg_content {
	display: block;
	width: 20px;
	height: 20px;
}

.front_post_single_media {
	margin: 0 0 28px;
	border: 1px solid var(--caboui-color-border);
	border-radius: var(--caboui-radius-md);
	overflow: hidden;
	background: var(--caboui-color-bg);
}

.front_post_single_img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.front_post_single_title {
	margin: 0 0 16px;
	font-family: var(--caboui-font-family-ja);
	font-size: clamp(1.375rem, 2.4vw, 1.75rem);
	font-weight: 700;
	line-height: 1.6;
	color: var(--caboui-color-text);
}

.front_post_single_meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.front_post_single_tag {
	font-family: var(--caboui-font-family-en);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--caboui-color-text);
}

.front_post_single_date {
	font-family: var(--caboui-font-family-en);
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.04em;
	color: var(--caboui-color-text-muted);
}

.front_post_single_body {
	margin-bottom: 56px;
}

.front_post_single_body.markdown p {
	margin: 0 0 1.5em;
	font-size: 0.9375rem;
	line-height: 1.9;
	color: var(--caboui-color-text);
}

.front_post_single_body.markdown p:last-child {
	margin-bottom: 0;
}

.front_post_single_body.markdown h2,
.front_post_single_body.markdown h3 {
	margin: 2.5em 0 1em;
	padding: 0 0 12px;
	border-bottom: 1px dashed var(--caboui-color-border-light);
	font-family: var(--caboui-font-family-ja);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0;
	color: var(--caboui-color-text);
	background: transparent;
}

.front_post_single_body.markdown h2::before,
.front_post_single_body.markdown h3::after {
	display: none;
}

.front_post_single_body.markdown h2:first-child,
.front_post_single_body.markdown h3:first-child {
	margin-top: 0;
}

.front_post_single_body.markdown img {
	box-sizing: border-box;
	display: block;
	width: 100%;
	height: auto;
	margin: 2em auto;
	border: 1px solid var(--caboui-color-border);
	border-radius: var(--caboui-radius-md);
}

.front_post_single_body.markdown blockquote,
.front_post_single_body.markdown pre {
	margin: 2em 0;
	padding: 20px 24px;
	border: none;
	border-radius: var(--caboui-radius-md);
	background: var(--caboui-color-bg-subtle);
	color: var(--caboui-color-text);
}

.front_post_single_body.markdown blockquote p,
.front_post_single_body.markdown pre p {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.9;
	color: var(--caboui-color-text);
}

.front_post_single_body.markdown a {
	color: var(--caboui-color-text);
	border-bottom: 1px solid var(--caboui-color-border-light);
	text-decoration: none;
}

.front_post_single_body.markdown a:hover {
	color: var(--caboui-color-text-muted);
}

.front_post_single_profile {
	margin-bottom: 56px;
}

.front_post_single_profile_panel {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: 32px;
	align-items: start;
	padding: 32px;
	border: 1px solid var(--caboui-color-border);
	border-radius: var(--caboui-radius-lg);
}

.front_post_single_profile_media {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

.front_post_single_profile_img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: var(--caboui-radius-md);
	object-fit: cover;
}

.front_post_single_profile_social {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--caboui-color-text-muted);
	font-family: var(--caboui-font-family-en);
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.4;
	text-decoration: none;
}

.front_post_single_profile_social:hover,
.front_post_single_profile_social:focus-visible {
	color: var(--caboui-color-text);
	outline: none;
}

.front_post_single_profile_social_icon {
	display: inline-flex;
	flex-shrink: 0;
}

.front_post_single_profile_content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	padding-top: 8px;
}

.front_post_single_profile_text {
	margin: 0;
	font-family: var(--caboui-font-family-ja);
	font-size: 0.9375rem;
	font-weight: 400;
	line-height: 1.9;
	color: var(--caboui-color-text);
}

.front_post_single_profile_content .front_pill_link--more {
	align-self: center;
}

.front_post_single_recommend {
	padding-top: 8px;
}

.front_post_single_recommend .front_article_grid,
.front_post_single_recommend .front_work_grid {
	gap: 28px 24px;
}

.front_post_single_recommend .front_work_grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.front-page--v1 .front_frame :is(
	.front_post_single_tag,
	.front_post_single_date,
	.front_post_single_profile_social,
	.front_post_single_profile_social_text
) {
	font-family: var(--caboui-font-family-en);
}

body.front-page--v1 .front_frame .front_post_single_tag {
	font-weight: 700;
}

@media (max-width: 1000px) {
	.front_post_single_profile_panel {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
		padding: 24px 20px;
	}

	.front_post_single_profile_media {
		width: min(220px, 100%);
	}

	.front_post_single_recommend .front_article_grid,
	.front_post_single_recommend .front_work_grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}
}