/* ヘッダー全体のスタイル */
.header-sp {
    display: flex;
    align-items: center;
    width: calc(100vw - 10px); /* 横幅を画面幅から10px引く */
    height: 70px; /* ヘッダーの高さ */
    position: fixed;
    bottom: 0; /* ページ下部に配置 */
    left: 0; /* 左端基準で配置 */
    margin-left: 5px; /* 左に5pxの余白 */
    margin-right: 5px; /* 右に5pxの余白 */
    background: #FFFEFE; /* 背景色 */
    border-radius: 10px 10px 0 0; /* 上部の角を丸く */
    box-shadow: 0px -2px 5px rgba(0, 0, 0, 0.2); /* 下方向の影 */
    z-index: 1001;
    overflow: hidden;
    box-sizing: border-box; /* ボーダーやパディングを幅に含める */
    padding: 0;
    transition: transform 0.3s ease; /* スムーズな移動 */
}
.header-sp a {
    text-decoration: none; /* アンダーラインを削除 */
    color: inherit; /* 親要素の文字色を継承 */
    display: flex; /* フレックスボックスでアイテムを配置 */
    align-items: center; /* 縦方向の中央揃え */
}

.header-sp a:hover {
    text-decoration: none; /* ホバー時もアンダーラインを表示しない */
    color: inherit; /* ホバー時も文字色を維持 */
}
/* ヘッダー内の各アイテム */
.header-item-sp {
    flex: 1; /* 各アイテムを均等幅に調整 */
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* 縦線のスタイル */
.divider {
    width: 1px; /* 縦線の幅 */
    height: 100%; /* ヘッダー全体の高さに合わせる */
    background: #ddd; /* 縦線の色 */
    opacity: 0.8; /* 薄い線 */
    flex-shrink: 0; /* 縦線が縮小されないようにする */
}

/* ロゴブロックのスタイル */
.logo-sp img {
    height: 40px;
    width: auto;
}

/* テキストスタイル */
.header-item-sp p {
    font-size: 13px;
    font-weight: bold;
    color: #333;
    margin: 0;
}
/* SP用：ログインブロック */
.header-item-sp.login-sp a {
    display: flex;
    flex-direction: column; /* 縦方向に配置 */
    justify-content: center; /* 縦方向の中央揃え */
    align-items: center; /* 横方向の中央揃え */
    text-align: center;
}

.login-sp img {
    height: 30px;
    width: auto;
    margin-bottom: 5px; /* アイコンとテキストの間隔 */
}

.login-sp p {
    font-size: 10px; /* フォントサイズ */
    margin: 0; /* 余白をリセット */
    color: #333; /* 文字色 */
}

/* PC用のヘッダー全体のスタイル */
.header-pc {
    height: 80px; /* ヘッダーの高さ */
    padding: 0 30px;
    background-color: transparent; /* 背景色を透明に設定 */
    z-index: 1001;
    position: fixed;
    top: 0;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: none; /* ボックスシャドウを削除 */
}
.header-pc-container{
    display: none; /* 初期は非表示 */
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1700px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* 左側のアイテム配置 */
.header-pc-container .header-left {
    display: flex;
    align-items: center;
    gap: 30px; /* アイテム間のスペース */
}

/* 右側のアイテム配置 */
.header-pc-container .header-right {
    display: flex;
    align-items: center;
}

/* ロゴのスタイル */
.header-pc-container .logo img {
    height: 50px; /* ロゴサイズを調整 */
    width: auto;
}

/* リンクのスタイル */
.header-pc-container .header-item a {
    text-decoration: none;
    color: #333; /* 文字色 */
    font-size: 16px;
    transition: color 0.3s;
}

.header-pc-container .header-item a:hover {
    color: #0066cc; /* ホバー時の文字色 */
}

/* PC用：ログインブロック */
.header-pc-container .login {
    display: flex;
    flex-direction: column; /* 縦方向に配置 */
    justify-content: center; /* 縦方向の中央揃え */
    align-items: center; /* 横方向の中央揃え */
    text-align: center;
}

.header-pc-container .login img {
    height: 30px;
    width: auto;
    margin-bottom: 5px; /* アイコンとテキストの間隔 */
}

.header-pc-container .login p {
    font-size: 14px; /* フォントサイズを少し大きめに調整 */
    margin: 0; /* 余白をリセット */
    color: #333; /* 文字色 */
}

/* SP用スタイルを変更しないよう分ける */
@media screen and (min-width: 1023px) {
    .header-pc-container {
        display: flex; /* PC用ヘッダーを表示 */
    }
}