body {
    font-family: Arial, sans-serif;
    background-color: #f8f8f8;
    color: #a2a2a2;
    margin: 0;
    padding: 0;
    font-weight: normal;
    background: linear-gradient(0deg, #f8f8f8, #e9ecef, #f8f8f8); /* グラデーション背景 */
    background-size: 200% 200%; /* 背景のサイズ */
    animation: backgroundWave 10s linear infinite; /* 背景の波アニメーション */
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px; /* パディングを減らして画面幅に収める */
    background-color: #ffffff; /* 白色の背景色 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 影を追加 */
    transition: background-color 0.3s;
    position: fixed; /* ヘッダーを固定 */
    top: 0; /* 上部に固定 */
    width: 100%; /* 幅を100%に */
    z-index: 1000; /* 高い z-index を設定して前面に */
    box-sizing: border-box; /* パディングを含めた幅を計算 */
}

header:hover {
    background-color: #e9ecef; /* ヘッダーのホバー時の背景色 */
}

header img {
    height: 30px; /* ロゴの高さを少し大きくする */
    transition: transform 0.3s;
}

header img:hover {
    transform: scale(1.1); /* ロゴのホバー時の拡大 */
}

nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap; /* 小さな画面で折り返す */
}

nav a, .hamburger-menu {
    display: inline-block;
    text-align: center;
    text-decoration: none;
    color: #838383;
    letter-spacing: 1.5px; /* 文字間隔を調整 */
    padding: 13px 18px; /* パディングを調整 */
    margin: 5px; /* マージンを追加 */
    background-color: #e9ecef; /* 背景色を追加 */
    border-radius: 30px; /* 角を丸くする */
    transition: color 0.3s, background-color 0.3s, transform 0.3s;
    font-size: 14px;
    font-family: 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'MS PGothic', sans-serif;
    font-weight: 500;
}

nav a:hover, .hamburger-menu:hover {
    color: #ffffff; /* ホバー時の文字色 */
    background-color: #707070; /* ホバー時の背景色をダークグレーに */
    transform: translateY(-2px); /* ホバー時の位置 */
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    right: 0; /* メニューが右に寄るように設定 */
    background-color: #ffffff; /* 白色の背景色 */
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1);
    z-index: 1;
    border-radius: 10px; /* 角を丸くする */
    opacity: 0; /* 初期状態は透明 */
    transition: opacity 0.3s, transform 0.3s;
    transform: translateY(10px); /* 初期位置を下にずらす */
}

.dropdown-content a {
    color: #333;
    padding: 10px 15px;
    text-decoration: none;
    display: block;
    text-align: left; /* 左揃えにする */
    background-color: #f8f9fa; /* 背景色を追加 */
    border-radius: 5px; /* 角を丸くする */
    margin: 5px 5px; /* 上下のマージンを追加 */
    transition: color 0.3s, background-color 0.3s;
}

.dropdown-content a:hover {
    color: #ffffff; /* ホバー時の文字色 */
    background-color: #858585; /* ホバー時の背景色をダークグレーに */
}

.dropdown:hover .dropdown-content {
    display: block;
    opacity: 1; /* ホバー時に不透明にする */
    transform: translateY(0); /* ホバー時に元の位置に戻す */
}

main {
    max-width: 1200px;
    margin: 20px auto;
    padding: 0 20px;
    font-family: "Noto Serif JP", "Hiragino Mincho Pro", "ヒラギノ明朝 Pro W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif; /*フォント種類*/
    background-color: #ffffff; /* 明るい灰色の背景色 */
    border-radius: 10px;
    margin: 170px auto 80px auto;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

main {}

main h1 {
    font-size: 28px; /* 文字サイズを大きくする */
    font-weight:  normal; /* 文字を太くする */
    color: #5e5e5e; /* 文字色 */
    text-align: center; /* 中央揃え */
    margin: 70px auto 60px auto; /* 下に余白を追加 */
    letter-spacing: 2px; /* 文字幅を広げる */
    opacity: 0; /* 初期状態は透明 */
    animation: fadeIn 1s forwards; /* フェードインアニメーション */
}

.fade-in {
    /* animation: fadeIn 1s ease-in; */
}

@keyframes backgroundWave {
    0% {
        background-position: 0% 0%;
    }
    50% {
        background-position: 100% 100%;
    }
    100% {
        background-position: 0% 0%;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.brand-section {
    margin-bottom: 60px;
}

.brand-section h2 {
    border-bottom: 2px solid #e7e7e7;
    padding-bottom: 15px;
    font-weight: normal;
    letter-spacing: 2px;
}

.brand-images {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.brand-images img {
    width: 100%;
    max-width: 200px;
    transition: transform 0.6s ease;
    filter: grayscale(100%);
}

.brand-images img:hover {
    transform: translateY(-10px); /* 画像を上に少し移動 */
}
/* フッターのHOMEとCONTACTのスタイルを調整 */
footer p a {
    color: #676767; /* 濃い目のグレー */
    text-decoration: none;
    font-weight: bold; /* 太字にする */
    /* letter-spacing: 1px; */
    /* text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); */ /* 影を追加 */
    transition: color 0.3s, transform 0.3s;
}

footer p a:hover {
    color: #a8a8a8; /* ホバー時の色をダークグレーに */
    transform: translateY(-2px); /* ホバー時の位置 */
}

footer {
    text-align: center;
    padding: 20px 40px; /* パディングを増やす */
    background-color: #ffffff; /* 背景色を白に変更 */
    margin-top: 40px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 影を追加 */
}

footer p {
    margin: 10px 0;
    font-family: 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'MS PGothic', sans-serif;
}

/* フェードインアニメーション */
@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

/* スライドインアニメーション */
@keyframes slideIn {
    from {
        transform: translateY(50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* メディアクエリを追加してレスポンシブ対応 */
@media (max-width: 1024px) {
    main {
        padding: 40px 20px; /* 余白を調整 */
        margin: 120px auto 40px auto; /* マージンを調整 */
        width: 90%; /* 幅を90%に設定 */
    }
    
    nav {
        flex-direction: row; /* 横並びに変更 */
        align-items: center; /* 中央揃え */
        width: auto; /* 幅を自動に設定 */
    }
    
    nav a {
        display: none; /* 小さな画面ではリンクを非表示に */
    }

    .hamburger-menu {
        display: inline-block; /* ハンバーガーメニューは表示 */
        margin-left: auto; /* 右端に配置 */
    }

    .dropdown-content {
        display: flex;
        flex-direction: column; /* ドロップダウンメニューを縦並びにする */
    }

    .dropdown-content a {
        display: block; /* 小さな画面ではドロップダウンのリンクを表示 */
    }

    .dropdown-content a[href="https://sib-shop.biz/index.html"] {
        order: -2; /* HOMEを一番上に表示 */
    }

    .dropdown-content a[href="https://sib-shop.biz/contact"] {
        order: -1; /* CONTACTをHOMEの下に表示 */
    }
}

/* 大きな画面でのスタイル */
@media (min-width: 1025px) {
    main {
        max-width: 1200px;
        margin: 170px auto;
        padding: 40px 90px;
    }

main {}

    .dropdown-content a[href="https://sib-shop.biz/index.html"],
    .dropdown-content a[href="https://sib-shop.biz/contact"] {
        display: none; /* 大きな画面ではドロップダウンのHOMEとCONTACTを非表示に */
    }
}