/* 基本設定 */
body {
    font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
    line-height: 1.6;
    color: #333;
    margin: 0;
    padding: 0;
}

header {
    background-color: #1a1a1a;
    color: #fff;
    padding: 10px 0; /* 上下の余白を少し詰める */
    position: sticky;
    top: 0;
    z-index: 1000;
}

nav ul {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: nowrap; /* 勝手に改行させない */
}

nav ul li {
    margin: 0 8px; /* 項目間の隙間を少し狭く（15pxから8pxへ） */
}

nav ul li a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.9rem; /* スマホでも収まりやすいよう少し小さく */
    white-space: nowrap; /* 文字を途中で改行させない */
}

/* スマホ用の微調整（画面幅が狭い時） */
@media (max-width: 480px) {
    nav ul li {
        margin: 0 5px; /* さらに隙間を詰める */
    }
    nav ul li a {
        font-size: 0.8rem; /* さらに文字を小さく */
    }
}


/* メインビジュアル (ヒーローエリア) */
.hero {
    background: #333;
    color: white;
    text-align: center;
    padding: 60px 20px;
}

.hero-logo {
    max-width: 100%;
    height: auto;
    width: 400px;
    margin-bottom: 30px;
}

/* ▼▼ 追加・修正箇所：SNS横並びレイアウト ▼▼ */
.sns-container {
    display: flex;          /* 横並びにする */
    justify-content: center; /* 中央に寄せる */
    gap: 40px;              /* QRコード同士の間の隙間 */
    margin-bottom: 40px;    /* 下のテキストとの間隔 */
}

.sns-item {
    text-align: center;
}

.sns-qr {
    width: 140px;      /* 横幅だけを指定 */
    height: auto;      /* ★ここを auto にすると、元の比率で正しく表示されます */
    border: 4px solid #fff;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    background-color: #fff;
    display: block;    /* 念のため追加 */
    margin: 0 auto;    /* 中央寄せ */
}
/* SNSのテキストリンク用スタイル */
.sns-text a {
    color: #fff;            /* 文字色を白に */
    text-decoration: none;  /* 下線を消す */
    border-bottom: 1px solid rgba(255, 255, 255, 0.3); /* 薄い下線を付けてリンクだと分かりやすく */
    transition: 0.3s;       /* ホバー時の動きを滑らかに */
}

.sns-text a:hover {
    color: #ffcc00;         /* マウスを乗せた時に少し色を変える（例：ゴールド系） */
    border-bottom: 1px solid #ffcc00;
}
/* ▲▲ 修正箇所ここまで ▲▲ */

/* --- 以下、containerやfooterなどは前回と同じ --- */
/* コンテンツ枠 */
.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px 20px;
}

/* 機材リスト用グリッド */
.item-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.item-card {
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 8px;
}

.item-card img {
    max-width: 100%;
    height: auto;
    display: block;
    margin-bottom: 10px;
}

/* フッター */
footer {
    background-color: #1a1a1a;
    color: #fff;
    text-align: center;
    padding: 20px 0;
    margin-top: 50px;
}