@charset "UTF-8";

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: rgb(3, 3, 3);
    opacity: 0.9;
    color: silver;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

h1 {
    color: #000;
    font-size: 40px;
}


h2 {
    font-size: 40px;
    margin-top: 30px;
    margin-left: 30px;
}

header {
    background-color: rgb(0, 0, 0);
    opacity: 0.5;
    position: fixed;
    --mask:
        radial-gradient(33.6px at 50% calc(100% - 47px), #000 99%, #0000 101%) calc(50% - 40px) 0/80px 100%,
        radial-gradient(33.6px at 50% calc(100% + 27px), #0000 99%, #000 101%) 50% calc(100% - 20px)/80px 100% repeat-x;
    -webkit-mask: var(--mask);
    mask: var(--mask);
    height: 80px;
    width: 2000px;
}

.key-tytle {
    background-image: url(../img/header_img.jpg);
    background-size: cover;
    height: 400px;
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav-list {
    display: flex;
    font-weight: 700;
    line-height: 1.25;
}

.nav-item {
    padding: 20px 10px 10px 10px;
    color: white;
}

.nav-menu {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    /* 自動で列を調整 */
    gap: 20px;
    /* アイテム間のスペース */
    list-style: none;
    /* デフォルトのリストスタイルを解除 */
    padding: 0;
    /* 内側の余白をリセット */
}

.nav-menu li {
    background-color: #f4f4f4;
    /* 背景色 */
    border: 1px solid #ddd;
    /* 枠線 */
    padding: 15px;
    text-align: center;
    /* テキストを中央に配置 */
    border-radius: 8px;
    /* 角を丸くする */
    transition: background-color 0.3s;
    /* ホバー時のアニメーション */
}

.nav-menu li:hover {
    background-color: #e2e2e2;
    /* ホバー時の背景色 */
}

.nav-menu a {
    text-decoration: none;
    color: #333;
    /* テキストの色 */
    font-size: 1.2em;
    /* フォントサイズ */
    font-weight: bold;
    /* 太字 */
}

.nav-menu a:hover {
    color: #c0b6b6;
    /* ホバー時のリンク色 */
}

.icon {
    width: 300px;
    /* 画像のサイズ */
    height: 300px;
    /* 画像のサイズを正方形にする */
    border-radius: 50%;
    /* 画像を丸くする */
    object-fit: cover;
    /* 画像のアスペクト比を維持して表示する */
    overflow: hidden;
    margin-left: 30px;
    margin-top: 30px;
    margin-bottom: 30px;
}

.Aboutme {
    display: flex;
    gap: 40px;
}

.aboutbr {
    display: flex;
    justify-content: center;
    align-items: center;
}

.copyright {
    text-align: center;
}

.contactmenu {
    background-color: #f4f4f4;
    /* 背景色 */
    border: 1px solid #ddd;
    /* 枠線 */
    padding: 15px;
    text-align: center;
    /* テキストを中央に配置 */
    border-radius: 30px;
    /* 角を丸くする */
    width: 400px;
    padding: 20px;
    margin-bottom: 20px;
    /* ←ここで下にスペースを作る */
    font-size: 18px;
}

/*TOPへ戻るボタン*/
.back-to-top {
    position: fixed;
    /* 画面に固定 */
    bottom: 20px;
    /* 画面下から20px */
    right: 20px;
    /* 画面右から20px */
    display: block;
    /* inline要素をブロック要素にする */
    padding: 10px 15px;
    background-color: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    z-index: 1000;
    /* 他の要素より上に表示させる */
}


#topbutton {
    /* ▼ボタンの表示位置を画面の右下に固定 */
    position: fixed;
    /* ←表示場所を固定 */
    bottom: 18px;
    /* ←下端からの距離 */
    right: 18px;
    /* ←右端からの距離 */
    width: 7em;
    /* ←横幅 */

    /* ▼最初は非表示にしておく */
    display: none;

    /* ▼配色・配置・文字の装飾など */
    background-color: #2525aa;
    /* ←背景色 */
    opacity: 0.75;
    /* ←透明度 */
    border-radius: 24px;
    /* ←角丸の半径 */
    text-align: center;
    /* ←文字の位置 */
    font-size: 120%;
    /* ←文字サイズ */
    font-weight: bold;
    /* ←文字の太さ */
    margin: 0px;
    /* ←外側の余白 */
    padding: 10px;
    /* ←内側の余白 */
}

#topbutton a {
    /* ▼リンクの装飾 */
    color: white;
    /* ←文字色 */
    text-decoration: none;
    /* ←下線なし */
}

#topbutton a:hover {
    /* ▼マウスが載ったときの装飾 */
    color: yellow;
    /* ←文字色 */
    text-decoration: underline;
    /* ←下線あり */
}