/* =====================================
   基本設定
===================================== */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: 'Hiragino Mincho ProN', 'serif'; 
  font-size: 16px; 
  line-height: 1.5;
  color: #333;
  margin: 0; 
  padding: 0;
  background-color: #fff; 
}

a {
    text-decoration: none;
    color: inherit;
}

/* =====================================
   フローティングリンク（ヘッダー代わり）
===================================== */
.floating-link {
  position: fixed;
  top: 24px; 
  right: 24px;
  background-color: #fff; 
  color: #000;
  padding: 8px 16px;
  font-size: 0.8rem;
  border: 1px solid #000; 
  border-radius: 0; 
  z-index: 1000;
  transition: all 0.3s ease;
  opacity: 1; 
}

.floating-link:hover {
  background-color: #000;
  color: #fff;
}

@media (max-width: 500px) {
  .floating-link {
    font-size: 0.7rem;
    padding: 6px 12px;
    top: 16px;
    right: 16px;
  }
}

/* =====================================
   トップ画像セクション
===================================== */
.main-img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}
.example {
  position: relative;
}

/* =====================================
   【追加】カテゴリ見出し (H2)
===================================== */
.category-heading {
    /* グリッドを横断して表示 */
    grid-column: 1 / -1; 
    text-align: center;
    font-family: 'Hiragino Mincho ProN', 'serif';
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    margin: 30px 0 10px; /* 上下の余白調整 */
    padding: 15px 0;
    /* 上下の線で区切る */
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

@media (max-width: 600px) {
    .category-heading {
        font-size: 1.1rem;
        margin: 20px 0 5px;
    }
}


/* =====================================
   商品グリッドレイアウト
===================================== */

.product-grid-container {
    max-width: 1000px; 
    margin: 40px auto 40px; 
    padding: 0 20px; 
    display: grid;
    /* 2列レイアウト */
    grid-template-columns: repeat(2, 1fr); 
    gap: 40px 20px; 
}

.grid-item {
    display: block;
    text-align: center;
}

.product-image {
    width: 100%;
    height: auto;
    display: block;
}

.product-title {
    font-family: 'Hiragino Kaku Gothic ProN', sans-serif; 
    font-size: 0.85rem;
    font-weight: normal;
    margin: 12px 0 0; 
    padding: 0 4px; 
    line-height: 1.4;
    letter-spacing: 0.05em;
    color: #333;
}

/* =====================================
   レスポンシブ (スマホ 600px以下)
===================================== */
@media (max-width: 600px) {
    
    .product-grid-container {
        margin-top: 30px; 
        padding: 0 16px;
        /* スマホは1列 */
        grid-template-columns: 1fr; 
        gap: 30px; 
    }

    .product-title {
        font-size: 0.8rem;
        margin-top: 8px;
    }
}

.check-btn {
    display: inline-block;    /* これで文字と横並びになります */
    border: 1px solid #333;   /* 枠線の色 */
    color: #333;              /* 文字の色 */
    padding: 0px 4px;         /* ボタン内の余白（最小限に） */
    font-size: 0.75rem;       /* 商品名より少し小さく */
    margin-right: 6px;        /* 商品名との間の隙間 */
    background: #fff;         /* 背景は白 */
    vertical-align: 2px;      /* 微調整：少しだけ上にずらして見た目の中心を合わせる */
    line-height: 1.2;         /* ボタンの高さが広がりすぎないように */
}

/* 念のため、リンクの下線などの影響を受けないようにする */
.product-title a {
    text-decoration: none;    /* リンクの下線を消す */
    color: inherit;           /* 色を親要素に合わせる */
}

/* --------------------------------------------------
   スマホ（画面幅が768px以下）の時だけ適用する設定
   -------------------------------------------------- */
@media screen and (max-width: 768px) {

    /* 商品名と金額のテキスト調整 */
    .product-title {
        font-size: 11px;         /* 文字サイズを小さく（必要に応じて10pxなどに調整） */
        letter-spacing: -0.05em; /* 文字の間隔を少し詰める */
        white-space: nowrap;     /* 【重要】強制的に改行させない設定 */
        overflow: hidden;        /* 万が一はみ出た部分は隠す（スクロール防止） */
        width: 100%;             /* 幅を親要素に合わせる */
        display: block;          /* ブロック要素として扱う */
    }

    /* CHECKボタンの調整 */
    .check-btn {
        font-size: 10px;         /* ボタン内の文字も小さく */
        padding: 0 2px;          /* ボタン枠内の余白を極限まで減らす */
        margin-right: 3px;       /* 商品名との隙間も詰める */
        border-width: 1px;       /* 枠線の太さはそのまま（見やすさ維持） */
    }
    
    /* もしリンク（aタグ）の中に.product-titleがない構造の場合の保険 */
    .product-title a {
        display: block;
        white-space: nowrap;
    }
}

div.grid-item .product-title {
        padding-bottom: 3px;   /* 下枠が切れないように、下側に3pxの余白を作る */
        margin-bottom: 5px;    /* 2つの商品がくっつきすぎないよう、商品の間も少し空ける */
        line-height: 1.4;      /* 行間を少しだけ広げて窮屈さをなくす */
    }