/* --- 1. 基本リセットと全体設定 --- */
* { margin: 0; padding: 0; box-sizing: border-box; }
/* サイト全体 */
body {
    /* Courier New を優先し、入っていない場合は類似の等幅フォントを表示します */
    font-family: "Courier New", Courier, monospace;
    line-height: 1.6;
    color: #333;
    font-family: "Courier New", Courier, "Hiragino Sans", "Meiryo", monospace;

}


/* タイトルやメニューなど、太く見せたい場所 */
#category-title, .main-nav a, .banner-item p {
    font-family: "Courier New", Courier, monospace;
    line-height: 1.6;
    color: #333;
    font-family: "Courier New", Courier, "Hiragino Sans", "Meiryo", monospace;
}



/* --- 2. ヘッダーのデザイン --- */
.site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: #fff;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    z-index: 1000;
}
.brand-name img {
    height: 40px;      /* ★ロゴの高さ。お好みのサイズに調整してください */
    width: auto;       /* 横幅は高さに合わせて自動計算されます */
    display: block;    /* 下に隙間ができるのを防ぎます */
}

/* スマホの時にロゴが大きすぎる場合はここで調整 */
@media screen and (max-width: 768px) {
    .brand-name img {
        height: 30px;  /* スマホでは少し小さくする */
    }
}


/* PC用メニュー */
/* メインメニューの並びと下線の削除 */
/* --- メインメニューの並び（横に並べる） --- */
.main-nav ul {
    display: flex !important;
    list-style: none !important;
    margin: 0;
    padding: 0;
}

.main-nav ul li {
    position: relative; /* 子メニューの基準点 */
}

/* --- メニューの文字（下線を消して間隔をあける） --- */
.main-nav a {
    display: block !important;
    padding: 10px 20px !important;    /* 以前の標準的な余白 */
    text-decoration: none !important; /* 下線を完全に消す */
    color: #333 !important;           /* 真っ黒より少し柔らかな黒に戻しました */
    
    /* 以前の「一番綺麗に見えていた」太字設定 */
    font-family: "Courier New", Courier, monospace !important;
    font-size: 18px;                  /* 以前設定したやや大きめのサイズ */
    font-weight: 900;
    -webkit-text-stroke: 0.5px #333;  /* 縁取りで太さを出す方法 */
    letter-spacing: 1px;              /* Courier Newが一番綺麗に見える間隔 */
}

/* 子メニュー（ドロップダウン）も以前のバランスに */
/* 子メニュー内の文字を太くくっきりさせる */
.sub-menu li a {
    display: block !important;
    padding: 8px 20px !important;
    text-decoration: none !important;
    color: #333 !important;

    /* 親メニューと同じ「太字の魔法」を適用 */
    font-family: "Courier New", Courier, monospace !important;
    font-size: 15px !important;       /* 親(18px)より少し小さくするとバランスが良いです */
    font-weight: 900 !important;      /* 最大の太さ */
    -webkit-text-stroke: 0.4px #333;  /* 文字が小さい分、縁取りをわずかに細く(0.4px)して潰れを防ぎます */
    letter-spacing: 0.5px !important;
}

/* マウスを乗せた時の背景色（お好みで） */
.sub-menu li a:hover {
    background-color: #f9f9f9;
    opacity: 0.8;
}

.main-nav ul li:hover .sub-menu {
    display: block;
}



/* 商品ページのタイトル */
#category-title {
    font-family: "Courier New", Courier, monospace !important;
    font-size: 2rem;
    font-weight: 900;
    color: #000;
    
    /* タイトルは大きいので、少し強めに補強 */
    text-shadow: 0.5px 0.5px 0px #000;
    -webkit-text-stroke: 0.5px #000;
    letter-spacing: 4px;
    text-transform: uppercase;
    text-align: center;
}




/* サブメニュー（PC用ホバー） */
/* --- 子メニュー（最初は絶対に隠す） --- */
.main-nav ul li ul.sub-menu {
    display: none !important; /* 強制的に非表示 */
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 999;
    background: #fff;
    list-style: none;
    padding: 10px 0;
    border: 1px solid #eee;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* --- 親にマウスが乗った時だけ表示する --- */
.main-nav ul li:hover > ul.sub-menu {
    display: block !important; /* ホバー時は表示を優先 */
}
.main-nav li:hover 
.sub-menu li a {
    font-size: 14px;       /* 子メニューは親より少しだけ小さくすると綺麗です */
    font-weight: normal;   /* 子メニューはあえて太くしないのが一般的です */
}

/* --- 3. 三本線ボタン（最初は隠す） --- */
.menu-toggle {
    display: none; /* 基本は非表示 */
    flex-direction: column;
    cursor: pointer;
    gap: 5px;
}
.bar {
    width: 25px;
    height: 3px;
    background-color: #333;
    transition: 0.3s;
}

/* --- 4. 商品グリッド（レスポンシブ） --- */
.product-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* スマホ：2列 */
    gap: 15px; padding: 15px;
}

@media screen and (min-width: 600px) {
    .product-grid { grid-template-columns: repeat(3, 1fr) !important; } /* タブレット：3列 */
}

/* --- どのページでも共通：商品一覧を5列にする設定 --- */
/* style.css の @media 1000px 以上の部分を上書き */
@media screen and (min-width: 1000px) {
    .product-grid { 
        display: grid !important;
        /* 1fr（均等な幅）を5つ作り、中身がはみ出さないように minmax(0, 1fr) を使います */
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important; 
        gap: 20px !important;
        max-width: 1200px;
        margin: 0 auto;
    }
}

/* 画像が枠を突き破らないための絶対ルール */
.product-item img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
}



/* --- 5. 【最重要】スマホ用のヘッダー調整（768px以下） --- */
@media screen and (max-width: 768px) {
    .menu-toggle {
        display: flex; /* スマホで三本線を表示 */
    }

    .main-nav {
        display: none; /* メニューを隠す */
        position: absolute;
        top: 100%; left: 0; width: 100%;
        background: #fff;
        border-bottom: 1px solid #eee;
    }

    .main-nav.active {
        display: block; /* ボタンクリックで表示 */
    }

    .main-nav ul {
        flex-direction: column; /* 縦並び */
    }

    /* スマホではサブメニューを常に表示（またはクリック式）にするのが一般的 */
    .sub-menu {
        position: static;
        display: block;
        box-shadow: none;
        padding-left: 20px;
        border: none;
    }
}

/* 画像の設定 */
.product-item img { width: 100%; height: auto; display: block; }

/* --- ① メインビジュアル（1500px × 490pxに固定） --- */
.main-visual {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    overflow: hidden; /* はみ出し防止 */
}

.main-visual img {
    width: 100%;
    height: 490px;      /* ここで高さを強制固定 */
    object-fit: cover;  /* 画像を歪ませずに枠に合わせる */
    display: block;
}

/* スマホでは高さを自動にして見やすくする */
@media screen and (max-width: 768px) {
    .main-visual img {
        height: auto; 
        max-height: 300px;
    }
}


/* --- ② 3つのアイテムバナー（スマホ〜タブレット対応版） --- */
.category-banners {
    display: flex !important;
    flex-direction: column !important; /* ★基本は「縦並び（1列）」にする */
    align-items: center !important;
    gap: 30px !important;              /* スマホでの上下の間隔 */
    width: 100% !important;
    max-width: 1000px !important;      /* PCではゆったり、スマホでは画面幅いっぱいに */
    margin: 40px auto !important;
    padding: 0 20px;
}

/* 画面が広くなったら（480px以上、またはPC）横に3列並べる */
@media screen and (min-width: 480px) {
    .category-banners {
        flex-direction: row !important; /* ★横並びに戻す */
        justify-content: center !important;
        gap: 40px !important;            /* 項目同士の間隔 */
    }
}

.banner-item {
    flex: 1 !important;
    width: 100% !important;   /* 枠いっぱいに広がる */
    max-width: 250px !important; /* ★1つずつのボタンが巨大化するのを防ぐ */
    min-width: 0;
    text-decoration: none;
    color: #333;
    text-align: center;
}

.banner-img {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden;
    border-radius: 5px;
    background: #f9f9f9;
}

.banner-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

/* 以下、ホバー設定やフォント設定は今のままでOK */


/* --- ③ WordPress風お知らせ（News） --- */
.news-section {
    max-width: 1000px;
    margin: 80px auto;
    padding: 0 20px;
}

.section-title {
    text-align: center;
    margin-bottom: 40px;
    font-size: 1.8rem;
    letter-spacing: 2px;
}

.news-item {
    display: flex;
    gap: 30px;
    border-bottom: 1px solid #eee;
    padding-bottom: 30px;
    margin-bottom: 30px;
}

.news-img {
    flex: 0 0 300px; /* 横幅固定 */
    height: 200px;
    overflow: hidden;
}

.news-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-body {
    flex: 1;
}

.news-body time {
    color: #888;
    font-size: 0.9rem;
}

.news-body h3 {
    margin: 10px 0;
    font-size: 1.2rem;
}

.news-body p {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.6;
}

.read-more {
    display: inline-block;
    margin-top: 15px;
    color: #333;
    text-decoration: underline;
    font-weight: bold;
}

/* --- スマホ対応（768px以下） --- */
@media screen and (max-width: 768px) {
    .main-visual img {
        height: 300px; /* スマホでは高さを抑える */
    }

    .category-banners {
        flex-direction: column !important; /* 縦並びに */
        padding: 0 40px;
    }

    .banner-img {
        height: 250px;
    }

    .news-item {
        flex-direction: column; /* お知らせも縦並び */
        gap: 15px;
    }

    .news-img {
        flex: 0 0 auto;
        width: 100%;
        height: 200px;
    }
}
/* ABOUTやCONTACTなど、文章中心のページ用 */
.content-wrapper {
    max-width: 800px;  /* ★文章が読みやすいように、少し狭めに設定 */
    margin: 60px auto; /* ★上下に余白を作り、左右は「auto」で中央寄せ */
    padding: 0 20px;   /* スマホで見た時に左右がくっつかないように */
    text-align: center;
}

/* ついでに見出しも中央に */
.content-wrapper h1 {
    text-align: center;
    margin-bottom: 40px;
    font-size: 1.8rem;
}
/* フォームを囲む箱の設定 */
.form-container {
    text-align: center; /* 中身のiframeを中央に寄せる */
    width: 100%;
}

/* 埋め込みフォーム自体の設定 */
.form-container iframe {
    max-width: 100%;    /* スマホで画面からはみ出さないようにする */
    margin: 0 auto;     /* 左右中央寄せ */
    display: block;     /* 中央寄せを確実に効かせる */
}
/* カテゴリータイトルを中央に寄せる */
#category-title {
    text-align: center;      /* 文字を中央寄せ */
    margin: 40px 0 20px;    /* 上下に余白を作る（上40px、下20px） */
    font-family: "Courier New", Courier, monospace;
    font-size: 2rem;      /* 文字の大きさ */
    font-weight: 900;       /* 最大の太さ */
    -webkit-text-stroke: 0.8px #333; /* タイトルなので0.8pxくらい太くしてもカッコいいです */
    letter-spacing: 4px;    /* 文字の間隔を少し広げてオシャレに */
    text-transform: uppercase; /* 英字の場合は大文字にする */
    color: #333;
}
/* NEWSセクション全体の余白 */
.news-section {
    max-width: 1000px;
    margin: 80px auto;
    padding: 0 20px;
}

.section-title {
    text-align: center;
    margin-bottom: 50px;
    font-size: 1.8rem;
    letter-spacing: 4px;
}

/* 記事1つずつの枠組み */
.news-item a {
    display: flex;
    gap: 30px;
    text-decoration: none;
    color: #333;
    padding: 20px 0;
    border-bottom: 1px solid #eee;
    transition: background 0.3s;
}

.news-item a:hover {
    background: #fcfcfc;
}

/* 画像の部分 */
.news-img {
    flex: 0 0 240px; /* 画像の幅を固定 */
    height: 160px;
    overflow: hidden;
}

.news-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* テキストの部分 */
.news-body {
    flex: 1;
}

.news-body time {
    font-size: 0.85rem;
    color: #888;
}

.news-body h3 {
    margin: 10px 0;
    font-size: 1.1rem;
}

.news-body p {
    font-size: 0.9rem;
    color: #666;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 3行目以降を省略 */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 「一覧を見る」ボタン */
.news-more {
    text-align: center;
    margin-top: 40px;
}

.btn-news {
    display: inline-block;
    padding: 12px 40px;
    border: 1px solid #333;
    color: #333;
    text-decoration: none;
    font-size: 0.9rem;
    transition: 0.3s;
}

.btn-news:hover {
    background: #333;
    color: #fff;
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
    .news-item a {
        flex-direction: column; /* 縦並び */
        gap: 15px;
    }
    .news-img {
        flex: 0 0 auto;
        width: 100%;
        height: 200px;
    }
}
/* --- フッター全体のデザイン --- */
.site-footer {
    background: #f8f8f8; /* ほんのりグレーで落ち着いた印象に */
    padding: 60px 0 20px;
    margin-top: 100px;    /* メインコンテンツとの間隔 */
    border-top: 1px solid #eee;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
}

/* 各セクションの幅調整 */
.footer-info { flex: 2; }
.footer-links { flex: 1; }

.footer-logo {
    font-size: 1.4rem;
    font-weight: bold;
    margin-bottom: 20px;
}

.footer-info p {
    font-size: 0.85rem !important; /* 少しだけ文字を小さくすると詰まって見えます */
    color: #666;
    
    /* ↓ 行の間隔を最小限（1.1〜1.2）に設定 */
    line-height: 1.2 !important; 
    
    /* ↓ 段落の下に空く勝手な隙間をゼロにする */
    margin-bottom: 0 !important; 
    
    /* ↓ 文字の上下の余白もリセット */
    padding: 0 !important;
}



.footer-links h4 {
    font-size: 1rem;
    margin-bottom: 20px;
}

.footer-links ul {
    list-style: none;
}

.footer-links ul li {
    margin-bottom: 10px;
}

.footer-links ul li a {
    text-decoration: none;
    color: #666;
    font-size: 0.9rem;
    transition: 0.3s;
}

.footer-links ul li a:hover {
    color: #333;
}

/* 下部のコピーライト */
.footer-bottom {
    text-align: center;
    margin-top: 60px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.footer-bottom p {
    font-size: 0.8rem;
    color: #999;
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
    .footer-container {
        flex-direction: column; /* 縦並び */
        gap: 40px;
    }
    .footer-info, .footer-links {
        text-align: center;
    }
}
/* 画像を包む枠：ここを以前の「5列」に収まる設定に戻します */
.product-item .img-box {
    width: 100%;
    aspect-ratio: 1 / 1; /* 正方形を維持 */
    overflow: hidden;
    position: relative;
    cursor: zoom-in;
}

.product-item .img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 歪みを防ぐ */
    display: block;
    transition: transform 0.1s ease-out;
}
.footer-info p {
    line-height: 1.8; /* 数字を大きくすると、行の間がゆったり空きます */
}
/* 商品内のテキスト情報を一括で小さく揃える */
.product-item p {
    font-size: 12px; /* 全て11pxに統一 */
    color: #333;
    margin-bottom: 3px;
    line-height: 1.4;
}

/* 価格だけは少し変えたい場合、下の方で上書きすればOK */
.product-item .product-code {
    font-size: 14px;
    font-weight: bold;
    margin-top: 8px;
}
/* 文章を包んでいる箱の設定 */
.content-wrapper {
    position: relative !important;
    max-width: 800px;
    margin: 0 auto;
    /* ↓ 3番目の数字をさらに小さく（例：30px）して全体の余白を縮める */
    padding: 60px 20px 5px !important; 
    text-align: center;
}

.about-illust {
    position: absolute !important;
    /* ↓ この数字を大きく（例：40px）するとイラストが上に上がります */
    bottom: 40px !important; 
    right: -200px;
    width: 200px;
    height: auto;
}


/* スマホ・タブレット（1100px以下） */
@media screen and (max-width: 1100px) {
    .about-illust {
        position: static !important; /* 浮遊を解除して文章のすぐ下に配置 */
        margin: 40px auto 0 !important;
        display: block !important;
        width: 120px;
    }
}

/* --- トップページの3つのボタンサイズを小さく調整 --- */
.category-banners {
    max-width: 800px !important; /* 全体の横幅を狭くして、3つを中央に寄せます */
    margin: 40px auto 20px !important;
    gap: 30px !important;        /* ボタン同士の隙間を少し詰める */
}

.banner-item {
    max-width: 180px !important; /* ★ここ！1つのボタンの最大サイズを制限します */
}

.banner-img {
    aspect-ratio: 1 / 1 !important; /* 正方形を維持 */
}

/* スマホでは横幅いっぱいにしたくない場合 */
@media screen and (max-width: 480px) {
    .banner-item {
        max-width: 140px !important; /* スマホではさらに一回り小さく */
    }
}

/* --- トップページ：スマホでの画像切れを直す --- */

/* メイン画像（ヒーロー画像）の設定 */
.hero-section img {
    width: 100% !important;
    max-width: 100vw !important; /* 画面の横幅を絶対に超えない */
    height: auto !important;     /* 高さを自動にして比率を守る */
    display: block;
}

/* 3つのボタン（バナー）の枠設定 */
.category-banners {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 15px !important; /* 左右に少し隙間を作って「画面端への衝突」を防ぐ */
    box-sizing: border-box !important; /* パディングを幅に含める */
}

.banner-item {
    min-width: 0 !important; /* 枠を突き破るのを防ぐ */
}

.banner-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* 枠の中で綺麗に収める */
}


/* style.css の一番下に貼り付けてください */

html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* --- 2. 【最重要】メイン画像を絶対に切らさない設定 --- */
/* PCで中央に寄せるための修正 */
.main-visual {
    width: 100% !important;
    overflow: hidden !important;
    line-height: 0;
    /* ↓ これを追加：中身を中央に寄せる */
    display: flex !important;
    justify-content: center !important;
    background-color: #fff; /* 背景を白にしておくと隙間が目立ちません */
}

.main-visual img {
    width: 100% !important;
    /* PCで画像が大きくなりすぎてボケるのを防ぎたい場合は、以下のように最大幅を設定できます */
    max-width: 1200px !important; 
    height: auto !important;
    display: block !important;
    object-fit: contain !important;
    /* ↓ これを追加：自身を中央に配置 */
    margin: 0 auto !important;
}


/* --- 3. 3つのボタン（縦並び・上が切れない設定） --- */
.category-banners {
    display: flex !important;
    flex-direction: column !important; /* スマホは縦 */
    align-items: center !important;
    gap: 30px !important;
    width: 100% !important;
    padding: 40px 20px !important;     /* 上下の余白で欠けを防止 */
    box-sizing: border-box !important;
    margin: 0 auto !important;
}

.banner-item {
    width: 100% !important;
    max-width: 250px !important;
    min-width: 0 !important;
}

.banner-img {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden;
    border-radius: 5px;
}

.banner-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* バナー画像は枠に合わせる */
}

/* --- 4. PC（1000px以上）の設定 --- */
@media screen and (min-width: 1000px) {
    .category-banners {
        flex-direction: row !important; /* 横並びに戻す */
        max-width: 900px !important;
    }
    .banner-item {
        max-width: 180px !important;
    }
}