/* リセットCSS (必要に応じて追加) */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

/* SP版ヘッダーバー */
.sp-header {
    background-color: #fff; /* ヘッダーの背景色 */
    color: #fff; /* アイコンやテキストの色 */
    display: flex; /* 横並びにするためにFlexboxを使用 */
    align-items: center; /* 垂直方向の中央揃え */
    padding: 2px 10px; /* 上下のパディングと左右のパディング */
    position: fixed; /* 画面上部に固定 */
    width: 100%; /* 幅を100%に設定 */
    top: 0; /* 上からの位置 */
    left: 0; /* 左からの位置 */
    z-index: 1000; /* 他の要素より手前に表示 */
    height: 50px; /* ヘッダーの高さ */
}

.header-logo {
    flex-basis: 50%; /* ヘッダーの幅の半分を占める */
    display: flex; /* ロゴを中央に配置するためにFlexboxを使用 */
    align-items: center; /* 垂直方向の中央揃え */
    justify-content: flex-start; /* ロゴを左寄せ */
}

.header-logo img {
    width: 120%; /* 幅は高さに合わせて自動調整 */
    display: block; /* img要素の下にできる余白をなくす */
}

.header-icons {
    flex-basis: 50%; /* ヘッダーの幅の半分を占める */
    display: flex; /* アイコンを横並びにする */
    gap: 0; /* アイコン間のスペース */
    justify-content: flex-end; /* アイコンを右寄せ */
    align-items: center; /* 垂直方向の中央揃え */
}

.icon-link img {
    /* 画像ボタンの場合、font-sizeやcolorは不要 */
    text-decoration: none; /* 下線をなくす */
    display: flex; /* 画像を中央揃え可能に */
    align-items: center; /* 垂直方向の中央揃え */
    justify-content: center; /* 水平方向の中央揃え */
    width: auto; /* ボタンのクリックエリアの幅 */
    height: 50px; /* ボタンのクリックエリアの高さ */
}

.button-image {
    width: 10px; /* 親要素(icon-link)の幅に合わせる */
    height: auto; /* 親要素(icon-link)の高さに合わせる */
    object-fit: contain; /* 画像がはみ出さないように調整し、縦横比を維持 */
}

.icon-link:hover .button-image { /* ホバー時に画像に効果を適用 */
    opacity: 0.8; /* ホバー時の透明度 */
}

/* スマートフォン向けのメディアクエリ (この場合は不要かもしれませんが、参考までに) */
@media (max-width: 768px) {
    /* SP版専用のスタイルはすでに適用されているため、
       ここでは特に変更は必要ないかもしれません。
       もしタブレットなどとの差別化が必要な場合に記述します。 */
}