/* ===== 基本設定 ===== */

/* ページ全体のスタイル */
body {
    /* 背景色を深い黒に設定 */
    background-color: #111111;
    /* 基本の文字色を白っぽい灰色に設定 */
    color: #eeeeee;
    /* 基本のフォントを設定（ゴシック体） */
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    /* 上下の余白をなくす */
    margin: 0;
    padding: 0;
}

/* リンクの基本スタイル */
a {
    /* リンクの色を継承 */
    color: inherit;
    /* リンクの下線をなくす */
    text-decoration: none;
}


/* ===== ヘッダー ===== */

.site-header {
    /* 中央揃え */
    text-align: center;
    /* 上下の余白 */
    padding: 40px 20px;
    /* 下側に赤い境界線を引く */
    border-bottom: 2px solid #990000;
}

/* サイトタイトル(h1)のスタイル */
.site-header h1 {
    /* 上下の余白をなくす */
    margin: 0;
    /* 文字サイズを大きく */
    font-size: 3em;
    /* 文字色を赤に */
    color: #990000;
    /* 少し不気味な雰囲気のフォントを指定 */
    font-family: serif;
    /* 文字に影を付けて立体感を出す */
    text-shadow: 0 0 5px #ff0000, 0 0 10px #000;
}

/* ヘッダーのサブテキストのスタイル */
.site-header p {
    margin: 10px 0 0;
    color: #888;
    font-size: 0.9em;
}


/* ===== メインコンテンツ ===== */

main {
    /* サイトの横幅を最大1200pxに制限し、中央に配置 */
    max-width: 1200px;
    margin: 40px auto; /* 上下に40px、左右に自動で余白 */
    padding: 0 20px; /* 左右に20pxの余白 */
}

/* 商品グリッドのスタイル */
.product-grid {
    /* CSS Gridを使って商品を並べる */
    display: grid;
    /* 5列に分割。各列は利用可能なスペースを均等に分け合う(1fr) */
    grid-template-columns: repeat(5, 1fr);
    /* 商品間の余白を20pxに設定 */
    gap: 20px;
}

/* 商品アイテムのスタイル */
.product-item {
    /* アイテムの見た目 */
    background-color: #1a1a1a;
    border: 1px solid #444;
    text-align: center;
    position: relative; /* 商品名を重ねるための基準位置 */
    overflow: hidden; /* はみ出した要素を隠す */
    
    /* アニメーション効果を滑らかにする */
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* マウスカーソルを乗せた時の商品アイテムのスタイル */
.product-item:hover {
    /* 少しだけ拡大する */
    transform: scale(1.05);
    /* 枠線の色を赤くする */
    border-color: #990000;
    /* 赤い影を付ける */
    box-shadow: 0 0 15px rgba(153, 0, 0, 0.7);
    /* z-indexで他の要素より手前に表示 */
    z-index: 10;
}

/* 商品画像のスタイル */
.product-item img {
    /* 親要素の幅いっぱいに表示 */
    width: 100%;
    /* 高さを自動調整 */
    height: auto;
    /* 画像がブロック要素として扱われるようにする */
    display: block;
    /* 画像の透明度を少し下げる */
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

/* マウスを乗せた時の商品画像のスタイル */
.product-item:hover img {
    /* 透明度をなくしてハッキリ表示 */
    opacity: 1;
}

/* 商品名のスタイル */
.product-item .product-name {
    /* 文字色を白に */
    color: #fff;
    /* 背景を半透明の黒に */
    background-color: rgba(0, 0, 0, 0.7);
    /* 下から0の位置に配置 */
    position: absolute;
    bottom: 0;
    left: 0;
    /* 幅を100%に */
    width: 100%;
    padding: 10px 0;
    /* 最初は透明にして隠しておく */
    opacity: 0;
    /* アニメーション効果 */
    transition: opacity 0.3s ease;
}

/* マウスを乗せた時に商品名を表示 */
.product-item:hover .product-name {
    opacity: 1;
}


/* ===== ページネーション ===== */

.pagination {
    /* 中央揃え */
    text-align: center;
    /* 上に60pxの余白 */
    margin-top: 60px;
}

.pagination a, .pagination span {
    /* 文字色 */
    color: #888;
    /* 枠線 */
    border: 1px solid #444;
    /* 余白 */
    padding: 10px 15px;
    /* 隣の要素との間隔 */
    margin: 0 5px;
    /* アニメーション効果 */
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

/* マウスを乗せた時のページリンク */
.pagination a:hover {
    background-color: #990000;
    color: #fff;
    border-color: #990000;
}

/* 現在表示しているページのスタイル */
.pagination .current-page {
    background-color: #990000;
    color: #fff;
    border-color: #990000;
    /* クリックできないことを示すカーソル */
    cursor: default;
}


/* ===== フッター ===== */
.site-footer {
    text-align: center;
    padding: 30px 20px;
    margin-top: 60px;
    border-top: 1px solid #333;
    color: #666;
    font-size: 0.8em;
}

/* ===== スマートフォン向けの調整（レスポンシブ対応） ===== */
/* 画面幅が768px以下の場合に適用されるスタイル */
@media (max-width: 768px) {
    .site-header h1 {
        font-size: 2.5em;
    }

    /* 商品グリッドを3列にする */
    .product-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }
}

/* 画面幅が480px以下の場合に適用されるスタイル */
@media (max-width: 480px) {
    .site-header h1 {
        font-size: 2em;
    }

    /* 商品グリッドを2列にする */
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}