/* ヘッダー関連のスタイルを */
/* このファイルに記述します */

/* リセットスタイル */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ロゴのスタイル */
.logo {
    font-size: 1.5em;
    font-weight: bold;
}

/* ハンバーガーメニューボタンのスタイル */
.menu-button {
    display: none;  /* PC版では非表示 */
    cursor: pointer;
    background: linear-gradient(to bottom right, #c3dcfa, #dcaeff, #d59fd0); /* グラデーション */
    border: none;
    color: white;
    font-size: 24px;  /* ハンバーガーアイコンのサイズ */
    font-weight: bold; /* 太字にする */
    padding: 8px 12px; /* ボタンの余白を増やす */
    border-radius: 5px; /* ボタンの角丸 */
    transition: transform 0.2s ease; /* クリック時のアニメーション */
    min-width: 40px; /* 最小幅を設定 */
    min-height: 40px; /* 最小高さを設定 */
    text-align: center; /* テキストを中央揃え */
    line-height: 1; /* 行の高さを調整 */
    z-index: 10001; /* サイドバーより前面に表示 */
}

/* サイドメニューのスタイル（PC版用） */
.sidebar {
    position: fixed;
    top: 0;
    left: 0; /* メニューを左側に固定 */
    width: 250px;
    height: 100%;
    background: linear-gradient(to bottom right, #c3dcfa, #dcaeff, #d59fd0);
    color: white;
    padding: 20px;
    transition: transform 0.3s ease-in-out;
    transform: translateX(0);  /* PC版では常に表示 */
}

.sidebar.active {
    transform: translateX(0);
}

/* サイドメニューのリストスタイル */
.sidebar ul {
    list-style: none;
    padding: 0;
}

.sidebar ul li {
    margin: 15px 0;
}

.sidebar ul li a {
    color: white;
    text-decoration: none;
    font-size: 18px;
}

/* レスポンシブデザイン：モバイル版用 */
@media (max-width: 768px) {

    /* メニューボタンを表示 */
    .menu-button {
        display: block;  /* モバイル版では表示する */
        position: fixed; /* 固定位置にする */
        top: 10px;       /* 上部からのマージン */
        right: 10px;     /* 右側の位置 */
        z-index: 10001;  /* 前面に固定 */
    }
    /* メニューが右側に表示されるように設定 */
    .sidebar {
        right: -250px; /* 最初は画面外に配置 */
        left: auto; /* 左側には表示しない */
        z-index: 10000; /* メニューボタンより背面に */
    }

    /* メニューが開いたときに右側に表示される */
    .sidebar.active {
        right: 0;
    }
}