/* aタグ（リンク）のスタイル */
a {
    color: #0000EE; /* リンクの色 */
    text-decoration: none; /* 下線なし */
}

a:hover {
    color: #551A8B; /* マウスオーバー時の色 */
}
/* input type="text" タグのスタイル */
input[type="text"], input[type="email"], input[type="password"] {
    width: 250px;
    padding: 12px 20px; /* 内側の余白 */
    margin: 8px 0; /* 外側の余白 */
    box-sizing: border-box; /* ボックスのサイズ設定 */
    border: 2px solid #ccc; /* ボーダーのスタイル */
    border-radius: 4px; /* ボーダーの角の丸み */
}
/* checkboxとradioのスタイル */
label, input[type="checkbox"], input[type="radio"] {
    width: 20px; /* 幅 */
    height: 20px; /* 高さ */
    cursor: pointer;
}
/* selectタグのスタイル */
select {
    width: 100%; /* 幅 */
    padding: 16px 20px; /* 内側の余白 */
    border: none; /* ボーダーなし */
    border-radius: 4px; /* ボーダーの角の丸み */
    background-color: #f1f1f1; /* 背景色 */
}

/* textareaタグのスタイル */
textarea {
    width: 100%; /* 幅 */
    height: calc( 1.3em * 15 );  /* テキストエリアの高さを行数で指定する */
    line-height: 1.3;           /* 行高さを指定する */
    padding: 12px 20px; /* 内側の余白 */
    box-sizing: border-box; /* ボックスのサイズ設定 */
    border: 2px solid #ccc; /* ボーダーのスタイル */
    border-radius: 4px; /* ボーダーの角の丸み */
}
button {
    background-color: #87cefa; /* 背景色 */
    color: black; /* 文字色 */
    padding: 14px 20px; /* 内側の余白 */
    margin: 8px 0; /* 外側の余白 */
    border: none; /* ボーダーなし */
    border-radius: 4px; /* ボーダーの角の丸み */
    cursor: pointer; /* カーソルをポインターに */

}
button:hover {
    background-color: #6fc4f9; /* 背景色を少し暗く */
}
button[name="mypage"] {
    background-color: #4CAF50; /* 背景色 */
    color: white; /* 文字色 */
}
button[name="mypage"]:hover {
    background-color: #45a049; /* 背景色を少し暗く */
}
button[name="logout"] {
    background-color: #666; /* 背景色 */
    color: white; /* 文字色 */
}
button[name="logout"]:hover {
    background-color: #555; /* 背景色を少し暗く */
}
.menu {
  display: flex;
  justify-content: center;
  gap: 1em;
}