/* サイトロゴ（音ゲNAVI！） */

:root {
	--logo-navy: #111111;
	--logo-navi: #111111;
	--logo-tagline: #888888;
	--logo-mascot-h: 58px;
	--logo-title-size: 1.25rem;
	--logo-tagline-size: 0.875rem;
	--logo-gap: 12px;
	--logo-wordmark-gap: 2px;
	--logo-title-gap: 0;
}

.site_logo_brand {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--logo-gap);
	text-decoration: none;
	color: inherit;
	line-height: 1;
	max-width: 100%;
}

.site_logo_brand:hover {
	opacity: 0.85;
	transition: opacity 0.2s;
}

.site_logo_stg {
	position: absolute;
	top: -2px;
	left: 0;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	color: #d64545;
	white-space: nowrap;
}

.site_logo_mascot {
	flex: 0 0 auto;
	display: flex;
	align-items: flex-end;
	overflow: visible;
}

.site_logo_mascot_img {
	display: block;
	height: var(--logo-mascot-h);
	width: auto;
	max-width: none;
	flex-shrink: 0;
}

.site_logo_wordmark {
	flex: 0 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: var(--logo-wordmark-gap);
	min-width: 0;
}

.site_logo_title {
	display: inline-flex;
	align-items: baseline;
	justify-content: flex-start;
	gap: var(--logo-title-gap);
	white-space: nowrap;
	line-height: 1.5;
}

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

.site_logo_otoge,
.site_logo_navi,
.site_logo_title_main {
	font-family: var(--caboui-font-family, inherit);
	font-weight: 500;
	font-size: var(--logo-title-size);
	line-height: 1.5;
	display: inline;
	letter-spacing: 0.08em;
}

.site_logo_otoge,
.site_logo_navi,
.site_logo_title_main {
	color: var(--logo-navy);
}

.site_logo_navi {
	color: var(--logo-navi);
	letter-spacing: 0;
}

.site_logo_tagline {
	font-family: inherit;
	font-size: var(--logo-tagline-size);
	font-weight: 500;
	color: var(--logo-tagline);
	letter-spacing: 0;
	white-space: nowrap;
	line-height: 1.5;
	text-align: left;
}

/* ヘッダー */
.site_logo_header {
	padding: 0 12px 0 0;
	flex: 0 1 auto;
	min-width: 0;
}

.site_logo_brand--header {
	align-items: center;
}

/* フッター */
.site_logo_brand--footer {
	--logo-navy: #111111;
	--logo-navi: #111111;
	--logo-tagline: #888888;
}

.site_logo_footer {
	padding: 0 40px 0 0;
}

.site_logo_brand--footer .site_logo_stg {
	color: #ffcccc;
}

/* スマホメニュー */
.site_logo_brand--shadow {
	--logo-mascot-h: 52px;
	--logo-title-size: 1.15rem;
	--logo-tagline-size: 0.8rem;
	--logo-gap: 10px;
	--logo-wordmark-gap: 2px;
}

.shadow_menu_logo {
	flex: 0 1 auto;
	min-width: 0;
	max-width: calc(100% - 72px);
	padding: 0 8px 0 0;
}

.header_layout {
	align-items: center;
}

/* レスポンシブ（PC・SP共通でフルロゴ表示） */
@media screen and (max-width: 960px) {
	:root {
		--logo-mascot-h: 52px;
		--logo-title-size: 1.15rem;
		--logo-tagline-size: 0.8rem;
		--logo-gap: 10px;
	}
}

@media screen and (max-width: 768px) {
	:root {
		--logo-mascot-h: 46px;
		--logo-title-size: 1.05rem;
		--logo-tagline-size: 0.72rem;
		--logo-gap: 8px;
		--logo-wordmark-gap: 1px;
	}

	.site_logo_header {
		padding: 0 8px 0 0;
		max-width: calc(100% - 52px);
	}

	.header_layout {
		align-items: center;
		padding-top: 12px;
		padding-bottom: 12px;
	}

	.site_logo_footer {
		padding: 0 0 12px 0;
	}
}

@media screen and (max-width: 400px) {
	:root {
		--logo-mascot-h: 40px;
		--logo-title-size: 0.95rem;
		--logo-tagline-size: 0.65rem;
		--logo-gap: 6px;
	}
}