/* header.css - ヘッダーのスタイル */

/* ログインドロップダウンメニュー */
/* style.cssのオーバーライド */
.header-buttons .btn-login {
	position: relative !important;
	display: inline-block !important; /* インラインブロック要素にして子要素を包含できるようにする */
	z-index: 10001 !important; /* さらに高い値に変更 */
	color: #af9448 !important;
	border: 1px solid #af9448 !important;
	background: #fff !important;
	text-align: center !important;
	border-radius: 30px !important;
	cursor: pointer !important;
	min-width: 100px !important; /* 最小幅を設定 */
}

.header-buttons .login-dropdown {
	position: absolute !important;
	top: calc(100% + 5px) !important; /* ボタンのすぐ下に配置 */
	right: 0 !important; /* 右側に配置するように修正 */
	width: 340px !important; /* 幅を360pxから340pxに縮小 */
	max-height: none !important; /* スクロールを無効化 */
	overflow-y: visible !important; /* オーバーフローを表示 */
	background-color: white !important;
	border-radius: 10px !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
	padding: 10px !important; /* paddingを15pxから10pxに縮小 */
	display: none !important;
	z-index: 99999 !important; /* さらに高いz-indexを設定して確実に手前に表示 */
	margin-top: 5px !important;
	transform: translateZ(0) !important; /* GPUアクセラレーションを有効化 */
	pointer-events: auto !important; /* ポインタイベントを有効化 */
	visibility: visible !important; /* 確実に表示する */
}

/* ドロップダウンが表示されている間もログインボタンのホバースタイルを維持 */
.header-buttons .btn-login:hover {
	background: #af9448 !important;
	color: #fff !important;
}

/* ホバー時に表示するスタイル - 優先度を高めて確実に表示 */
.header-buttons .btn-login:hover .login-dropdown,
.header-buttons .login-dropdown.show {
	display: block !important; /* 強制的に表示 */
	opacity: 1 !important;
	visibility: visible !important;
}

/* ドロップダウン自体がホバーされている場合も表示を維持 */
.header-buttons .login-dropdown:hover {
	display: block !important;
	opacity: 1 !important;
	visibility: visible !important;
}

.header-buttons .login-dropdown-header {
	font-size: 16px !important;
	font-weight: bold !important;
	margin-bottom: 12px !important;
	color: #333 !important;
	text-align: center !important;
}

.header-buttons .login-service-list {
	display: flex !important;
	flex-direction: column !important;
	gap: 2px !important; /* gapを12pxから2pxに縮小 */
}

.login-service-item {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding: 4px 8px; /* 左右のpaddingも12pxから8pxに縮小 */
	border-radius: 6px;
	transition: background-color 0.2s;
	margin-bottom: 2px; /* margin-bottomを4pxから2pxにさらに縮小 */
	gap: 8px; /* gapを12pxから8pxに縮小 */
}

.login-service-item:hover {
	background-color: #f5f5f5;
}

.login-service-logo {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	flex: 1;
	gap: 0px; /* gapを2pxから0pxに縮小 */
}

.login-service-logo img {
	width: 140px; /* 150px → 140pxに縮小 */
	height: 55px; /* 60px → 55pxに縮小 */
	margin-bottom: 0px;
	object-fit: contain;
}

.login-service-logo span {
	font-size: 11px; /* 10px → 11pxに拡大 */
	color: #333;
	font-weight: 500;
	margin-top: 0px;
	white-space: nowrap;
	line-height: 1.2; /* 1.1 → 1.2に調整 */
}

.service-login-btn {
	background-color: white;
	color: #af9448;
	border: 1px solid #af9448;
	border-radius: 4px;
	padding: 4px 8px !important; /* 3px 6px → 4px 8pxに拡大 */
	font-size: 9px; /* 8px → 9pxに拡大 */
	cursor: pointer;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	transition: all 0.2s;
	min-width: 50px; /* 45px → 50pxに拡大 */
	max-width: 70px; /* 65px → 70pxに拡大 */
	white-space: nowrap;
	align-self: center;
	text-align: center;
	justify-content: center;
	overflow: hidden;
	text-overflow: ellipsis;
	font-weight: 500;
	letter-spacing: -0.3px; /* -0.5px → -0.3pxに調整 */
}

.service-login-btn:hover {
	background-color: #af9448;
	color: white;
	border-color: #af9448;
}

/* ドロップダウンの三角形の装飾 */
.login-dropdown::before {
	content: '';
	position: absolute;
	top: -8px;
	right: 20px;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-bottom: 8px solid white;
}

/* ズーム150%対応 */
html.zoomed-150 .header-buttons .login-dropdown {
	width: 320px !important; /* 幅を少し縮小 */
	padding: 8px !important; /* パディングを少し縮小 */
}

html.zoomed-150 .login-service-item {
	padding: 3px 6px !important; /* パディングをさらに縮小 */
	margin-bottom: 1px !important; /* マージンを縮小 */
	gap: 6px !important; /* ギャップを縮小 */
}

html.zoomed-150 .login-service-logo img {
	width: 125px !important; /* 130px → 125pxに調整 */
	height: 48px !important; /* 50px → 48pxに調整 */
}

html.zoomed-150 .login-service-logo span {
	font-size: 10px !important; /* 9px → 10pxに拡大 */
}

html.zoomed-150 .service-login-btn {
	padding: 3px 6px !important; /* 2px 4px → 3px 6pxに拡大 */
	font-size: 8px !important; /* 7px → 8pxに拡大 */
	min-width: 45px !important; /* 40px → 45pxに拡大 */
	max-width: 60px !important; /* 55px → 60pxに拡大 */
}

/* 高ズーム対応 */
html.zoomed-high .header-buttons .login-dropdown {
	width: 300px !important; /* 幅をさらに縮小 */
	padding: 6px !important; /* パディングをさらに縮小 */
}

html.zoomed-high .login-service-item {
	padding: 2px 4px !important; /* パディングをさらに縮小 */
	margin-bottom: 1px !important; /* マージンを縮小 */
	gap: 4px !important; /* ギャップを縮小 */
}

html.zoomed-high .login-service-logo img {
	width: 105px !important; /* 110px → 105pxに調整 */
	height: 42px !important; /* 40px → 42pxに調整 */
}

html.zoomed-high .login-service-logo span {
	font-size: 9px !important; /* 8px → 9pxに拡大 */
}

html.zoomed-high .service-login-btn {
	padding: 2px 4px !important; /* 1px 3px → 2px 4pxに拡大 */
	font-size: 7px !important; /* 6px → 7pxに拡大 */
	min-width: 40px !important; /* 35px → 40pxに拡大 */
	max-width: 55px !important; /* 50px → 55pxに拡大 */
}

/* モバイルログインスタイルは削除しました */

.mobile-login-item img {
	width: 30px;
	height: 30px;
	margin-right: 12px;
	object-fit: contain;
}

/* 画像が存在しない場合のフォールバックアイコン */
.service-logo img[src$='sign-menu.png']:not([src^='data:']):not([src*='/']),
.service-logo img[src$='pm-menu.png']:not([src^='data:']):not([src*='/']),
.service-logo img[src$='convert-menu.png']:not([src^='data:']):not([src*='/']),
.service-logo img[src$='crm-menu.png']:not([src^='data:']):not([src*='/']),
.service-logo img[src$='b2b-menu.png']:not([src^='data:']):not([src*='/']) {
	background-color: #af9448;
	border-radius: 5px;
	width: 30px;
	height: 30px;
}