@charset "UTF-8";

body {
    padding-top: 50px;
}

header {
    width: 100%;
    height: 50px;
    background: #000;
    color: #fff;
    padding: 10px 10px;
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
}

header a {
    color: #000; /* テキスト色 */
    background-color: #dddddd; /* 通常時の背景色 */
    padding: 8px 12px; /* ボタンのパディング */
    border-radius: 5px; /* ボタンの角を丸く */
    text-decoration: none; /* 下線を消す */
    display: inline-block; /* ボタンのように表示 */
    border: 1px solid transparent; /* 境界線を透明に */
    transition: background-color 0.3s, border-color 0.3s; /* スムーズな遷移 */
}

header a:hover {
    color: #000; /* ホバー時のテキスト色 */
    background-color: #ffffff; /* ホバー時の背景色 */
    border-color: #bbb; /* ホバー時の境界線色 */
}

header a:active {
    color: #000; /* アクティブ時のテキスト色 */
    background-color: #dddddd; /* アクティブ時の背景色 */
}

header .gnav {
    margin-left: auto; /* メニューを右側に配置 */
}

header .gnav .menu {
    display: flex; /* 横並びにする */
}

header .gnav .menu li {
    list-style: none; /* リストスタイルを消す */
    margin-left: 20px; /* メニュー間のスペース */
}

main {
    height: 50vw; /* メインコンテンツの高さ */
}