/*////////////////////////////////////////////////////////////////////////////*/

/*! [common] logo.css */

/*////////////////////////////////////////////////////////////////////////////*/
/*
	・ロゴのサイズ変数を size.css に定義してください。ロゴサイズに単位は付けません。
	・ロゴ表示には aspect-ratio を使います。.mark .type は廃止しました。
	・ロゴコンテナー要素 .logo に .fixed-height を付与し、変数 --fixed-height を指定することで高さ固定のロゴにできます。
*/


/*------------------------------------------------------------------------------

	ロゴ共通

------------------------------------------------------------------------------*/


/*	ロゴアンカーコンテナ
------------------------------------------------------------------------------*/

.logo {
	--logo-color: rgb(var(--color-text-h-rgb, 0 0 0) / var(--color-text-h-a, 1));/* ロゴ色 */
	/**/
	display: flex;
	align-items: center;/* 基本は上下中央揃え。位置調整は個別CSSにて与えます */
	justify-content: space-between;/* マークとタイプの隙間は自動で */
	/**/
	aspect-ratio: var(--logo-w, 1) / var(--logo-h, 1);
	width: var(--logo-width, 100%);
	height: auto;
	/**/
	position: relative;
	text-decoration: none;
	line-height: 1;
	font-style: normal;
	font-weight: bold;
	font-size: 100%;
	color: var(--logo-color);
	fill: var(--logo-svg-color, var(--logo-color));
	/**/
	font-feature-settings: 'palt';
	/**/
	transition: all .2s ease-out;
}

/* 白抜き指定 */
.white .logo {
	--logo-color: #FFF;
}


/*	画像要素
------------------------------------------------------------------------------*/

.logo img,
.logo svg {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: none;
}

.logo svg {
	object-position: left center;
	object-fit: scale-down;
}

.logo img {
	background-position: left center;
	background-size: contain;
}


/*	高さ固定
------------------------------------------------------------------------------*/

.logo:not(.override-fixed-width).fixed-height {
	width: auto;
	height: var(--fixed-height, 2em);
	max-width: calc(var(--fixed-height, 2em) * (var(--logo-w) / var(--logo-h)));
}