/* 基本的なリセットと全体のフォント設定 */
body {
    margin: 0;
    font-family: sans-serif;
    color: #333;
    background-color: #f9f9f9;
    /* ページ全体の背景画像を常に表示 */
    background-image: url('Assets/unicorn-icon2.png');
    background-repeat: no-repeat;
    background-position: center top;
    background-attachment: fixed;
    /* background-size: 100% auto; を以下に変更 */
    background-size: 100% auto;
    /* 背景色を追加して画像が読み込まれるまでの表示を改善 */
    background-color: #f9f9f9;
}

/* ヘッダー */
header {
    padding: 10px 20px;
    background-color: #fff;
    border-bottom: 1px solid #eee;
}

.logo {
    display: flex;
    align-items: center;
}

.logo .icon {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-color: #ddd;
    text-align: center;
    line-height: 40px;
    margin-right: 10px;
    font-size: 12px;
}

/* ロゴ画像を親のボックスに収める */
.logo .icon img {
    display: block;        /* 行内余白をなくす */
    max-width: 100%;       /* 親幅を超えない */
    max-height: 100%;      /* 親高さを超えない */
    width: auto;
    height: auto;
    margin: 0 auto;        /* 横方向中央寄せ */
    object-fit: contain;   /* 縦横比を保って収める */
}

.logo h1 {
    font-size: 24px;
    margin: 0;
}

.event-name {
    margin: 5px 0 0 0;
    font-size: 14px;
    color: #666;
}

/* メインビジュアル */
.hero {
    width: 100%;
    height: 300px; /* デスクトップ向けのデフォルト高さ */
    background-color: #e9e9e9; /* 写真が入るまでの仮の背景色 */
    box-sizing: border-box; /* 枠線がサイズに含まれるようにする */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32px;
    color: #888;
    overflow: hidden; /* 中の画像がはみ出さないようにする */
}

/* .hero 内に img を直接置く場合のレスポンシブ設定 */
.hero img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 中央を優先してトリミング */
    object-position: center center;
    display: absolute;
}

/* モバイルでは高さをビューポートに対する比率で指定 */
@media screen and (max-width: 768px) {
    .hero {
        height: 40vh; /* 画面高さの 40% */
    }
}
/* ナビゲーション */
nav {
    padding: 20px 0;
    background-color: #fff;
}

nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 40px; /* 項目間のスペース */
}

nav a {
    text-decoration: none;
    color: #333;
    font-weight: bold;
    font-size: 18px;
    padding-bottom: 5px;
    border-bottom: 2px solid transparent; /* ホバー時の下線のための準備 */
    transition: border-color 0.3s;
}

nav a:hover {
    border-bottom-color: #333; /* マウスを乗せたら下線を表示 */
}

/* Products, Information共通のセクション設定 */
.content-section {
    padding: 40px 20px;
    text-align: center;
}

.content-section h2 {
    font-size: 28px;
    margin-bottom: 30px;
    text-decoration: underline;
    text-underline-offset: 8px; /* 見出しと下線の間隔 */
}

/* 商品リスト */
.product-list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* 画面が狭くなったら折り返す */
    gap: 30px; /* 商品間のスペース */
}

/* ジャンルごとのグループに余白を付ける */
.project-genre {
    display: flex;
    flex-direction: column;
    gap: 20px; /* ジャンル内のアイテム間のスペース */
    align-items: flex-start; /* タイトル等を左寄せに */
    max-width: 320px; /* 必要に応じて調整 */
}

.product-item {
    width: 280px;
    border: 1px solid #ccc;
    padding: 15px;
    background-color: #fff;
}

.product-image {
    width: 100%;
    height: 200px;
    background-color: #e9e9e9; /* 写真が入るまでの仮の背景色 */
    margin-bottom: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* アスペクト比を保ちながら領域内に収める */
    object-position: center; /* 中央に配置 */
}

.product-item h3 {
    margin: 0 0 10px 0;
    font-size: 20px;
}

.product-item .caption {
    font-size: 14px;
    color: #666;
    text-align: left; /* キャプションは左揃えに */
    margin-bottom: 15px;
}

.product-item .price {
    font-size: 18px;
    font-weight: bold;
    text-align: right; /* 価格は右揃えに */
    margin: 0;
}

/* Informationセクション */
.info-content {
    max-width: 600px;
    margin: 0 auto; /* 中央揃え */
    text-align: left;
    line-height: 1.8;
}

/* 追加情報のスタイル */
.additional-info {
    display: flex;
    flex-wrap: wrap; /* 画面が狭くなったら折り返す */
    justify-content: center; /* 中央揃え */
    gap: 20px; /* アイテム間のスペース */
    margin-top: 20px; /* 上部の余白 */
}

.info-item {
    flex: 1 1 200px; /* 最小200px、最大で均等に広がる */
    background-color: #f0f0f0; /* 背景色 */
    padding: 15px;
    border-radius: 5px; /* 角を丸く */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 影を追加 */
}

.info-item h3 {
    margin: 0 0 10px 0;
    font-size: 18px;
}

.info-item p {
    margin: 0;
    font-size: 14px;
}

/* マップナビゲーション画像 */
.map-navi {
    width: 100%;
    max-width: 300px;
    height: auto;
    margin-top: 10px;
    border-radius: 5px; /* 角を丸く */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 軽い影を追加 */
}

/* フッター */
footer {
    text-align: center;
    padding: 20px;
    font-size: 12px;
    color: #888;
    background-color: #fff;
    border-top: 1px solid #eee;
}

/* スマートフォン向けのレスポンシブ対応 */
@media screen and (max-width: 768px) {
    /* ヘッダーの調整 */
    .logo h1 {
        font-size: 18px;
    }

    /* ナビゲーションの調整 */
    nav ul {
        gap: 20px;
    }

    nav a {
        font-size: 16px;
    }

    /* 商品リストの調整 */
    .product-item {
        width: 100%;
        max-width: 280px;
    }

    /* 背景画像の調整 */
    body::before {
        background-size: contain;
        background-position: center 50px;
    }

    /* Informationセクションの調整 */
    .info-content {
        padding: 0 15px;
    }
}