header {
    background-color: #000000;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 15px 30px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
}

header .logo {
    margin-right: auto;
    flex-basis: 20%;
    
}

header .logo img {
    height: 30px;
    width: auto;

}

nav ul {
    list-style: none;
    display: flex;
    justify-content: flex-end;
    margin: 0;
    padding: 0;
    width: auto;
    margin-right: 50px;
}

nav ul li {
    margin-left: 20px;
}

nav ul li a {
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.2em;
}

nav ul li a img {
    height: 20px;
    width: auto;
    vertical-align: middle;
}

main {
    width: 90%; /* 横幅を90%に設定、数値を調整してお好みの広さに */
    max-width: 1400px; /* 必要に応じて最大幅を指定 */
    margin: 0 auto; /* 左右中央揃え */
    padding: 20px; /* 必要に応じて内部の余白を設定 */
}

body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #000; /* 背景を黒に */
    color: #fff;
}

#contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    margin-top: 200px
}

#contact a {
    color: #ffffff; /* リンクの文字色を白に設定 */
    text-decoration: none; /* 下線を消す */
    font-weight: bold; /* リンクを太字に */
    transition: color 0.3s ease, border-bottom 0.3s ease; /* アニメーション */
    border-bottom: 2px solid transparent; /* デフォルトで下線を非表示 */
}

#contact a:hover {
    border-bottom: 2px solid #ffffff; /* ホバー時に下線を表示 */
}

#contact p {
    margin: 20px 0; /* テキスト間の余白を設定 */
    text-align: center; /* テキストを中央揃え */
}

#contact hr {
    margin: 30px 0; /* 区切り線の上下余白を調整 */
}

h1 {
    font-size: 48px;
    font-weight: bold;
    margin-bottom: 10px;
    margin-top: 100px; /* 上の余白をなくす */
    text-align: left;
    width: 100%;
    max-width: 1400px;
}


h2 {
    font-size: 20px;
    margin-bottom: 20px;
    font-weight: normal;
    text-align: left;
    width: 100%;
    border-bottom: 1px solid #fff; /* 下線を追加 */
    padding-bottom: 10px; /* 下線との間に余白を追加 */
}

hr {
    border: 0;
    border-top: 1px solid #ffffff;
    margin: 20px 0;
    width: 100%; /* 幅を全体に設定 */
    max-width: 1400px
}

@media (max-width: 768px) {
    h1 {
        font-size: 36px;
    }

    h2 {
        font-size: 18px;
    }

    button {
        max-width: 100%;
    }

    main {
        margin-top: -200px; /* 余白を削除 */
        padding: 20px; /* 内部の余白 */
    }
    
}

/* モバイル用のメディアクエリ */
@media (max-width: 768px) {
    /* ヘッダーのロゴとナビゲーションを縦に配置 */
    header {
        display: flex;
        flex-direction: row; /* ロゴとメニューアイコンを横並びにする */
        justify-content: space-between; /* ロゴとメニューアイコンの間を空ける */
        align-items: center; /* ロゴとメニューアイコンを中央に揃える */
        padding: 10px 20px; /* ヘッダーの上下の余白を少なくして細くする */
        height: 40px; /* 閉じたときのヘッダーの高さを小さくする */
    }

    header .logo img {
        height: 25px; /* ロゴのサイズを調整 */
        margin-left: 10px;
        width: auto;
    }

    .menu-icon {
        display: flex;
        flex-direction: column;
        cursor: pointer;
        margin-left: auto;
        margin-right: 30px; /* ここを調整して左に寄せる */
        
    }

    nav {
        display: none; /* デフォルトで非表示 */
        flex-direction: column;
        width: 100%;
        text-align: center;
        background-color: #000; /* メニューの背景色を設定 */
        position: absolute;
        top: 40px; /* ヘッダーのすぐ下にメニューを表示 */
        left: 0;
        z-index: 999;
    }

    nav ul {
        display: flex;
        flex-direction: column; /* ナビゲーションを縦方向に並べる */
        align-items: center; /* 中央揃え */
        list-style: none;
        padding: 0;
        margin: 0;
        width: 100%; /* 幅を100%にして中央揃え */
    }

    nav ul li {
        margin: 2px 0;
    }

    nav ul li a {
        font-size: 1em; /* フォントサイズを小さく調整 */
        text-align: center; /* リンクを中央揃え */
        display: block;
        width: 100%; /* 各リンクを横幅いっぱいにする */
        padding: 10px 0; /* リンクに縦方向の余白を追加 */
    }

    /* メニューが開いた状態 */
    nav.open {
        display: flex; /* メニューを表示 */
    }
   
}