/* ===== 布地一覧（改良版：常時5列固定／上下詰め） ===== */

.fabric-section {
  margin: 32px 0 24px;
  border-top: 2px solid #ccc;
  padding-top: 14px;
}

.fabric-title {
  font-size: 1.15rem;
  color: #336699;
  border-left: 6px solid #6699cc;
  padding-left: 8px;
  margin-bottom: 10px;
}

/* ▼ 5列固定：PCで必ず5列（ブラウザ幅に関係なく） */
.fabric-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 10px; /* 上下を詰めた */
  margin: 0 auto;
  max-width: 950px; /* 5×160＋隙間分 */
}

.fabric-item {
  flex: 0 0 160px;
  text-align: center;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 5px 5px 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.fabric-item a {
  display: block;
  text-decoration: none;
  color: inherit;
}

.fabric-item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
}

/* ▼ キャプション部（布地番号＋名前） */
.fabric-item figcaption {
  font-size: 0.88rem;
  line-height: 1.3;
  margin-top: 4px;
}

.fabric-note {
  display: inline;
  font-size: 0.8rem;
  color: #666;
}

/* ▼ 極端に狭い端末でも強制5列 */
@media (max-width: 640px) {
  .fabric-grid {
    transform: scale(0.8);
    transform-origin: top center;
  }
}
/* --- 布地一覧専用・横5列固定パッチ --- */
#main .fabric-section {
  overflow: visible;
}

#main .fabric-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 8px;
  margin: 0 auto;                /* ← ページ中央寄せ */
}

#main .fabric-item {
  flex: 0 0 160px;
  max-width: 160px;
  margin: 0;
  padding: 3px 3px 5px;
}
/* ======================================================= */
/* 7. 布地一覧 モバイル対応 (767px以下で適用) */
/* ======================================================= */
@media screen and (max-width: 767px) {
  
    /* 1. PC用の固定幅とスケールダウンを解除/無効化 */
    .fabric-grid {
        /* Flexboxの折り返しを有効にし、固定幅の強制設定を上書き */
        width: auto !important; 
        max-width: 100% !important;
        
        /* 画面からはみ出すスケールダウンを無効化 */
        transform: none !important; 
        transform-origin: unset !important;
        
        /* モバイルでは中央寄せではなく左寄せに近い方が見やすい場合が多い */
        justify-content: space-between; 
        gap: 8px; /* 隙間を広めに確保 */
    }

    /* 2. 1つの布地アイテムを画面幅の約半分(2列表示)に設定 */
    .fabric-item {
        /* 50% - 隙間分で設定し、2列で折り返す */
        flex: 0 0 calc(50% - 4px); 
        max-width: calc(50% - 4px);
        /* PC用設定を上書き */
        margin-bottom: 15px;
    }

    /* 3. 画像の基本的なレスポンシブ設定を再確認 (念のため) */
    .fabric-item img {
        max-width: 100%;
        height: auto;
    }
}
/* ======================================================= */
/* 8. 布地一覧 最終修正 (モバイルでの固定幅の強制解除) */
/* ======================================================= */
@media screen and (max-width: 767px) {
  
    /* 1. 固定幅の強制解除とレスポンシブ化 (詳細度をPC側と合わせる) */
    #main .fabric-grid {
        /* !important を使って、PC側の !important を強制的に上書き */
        width: auto !important; 
        max-width: 100% !important;
        
        /* スケールダウンを無効化 */
        transform: none !important; 
        
        /* Flexboxの設定を見直し、折り返しと配置を変更 */
        display: flex; 
        flex-wrap: wrap; /* 必ず折り返す */
        justify-content: space-between; /* 均等配置 */
        gap: 8px 4px; /* 上下と左右の隙間を調整 */
    }

    /* 2. 布地アイテムを2列表示にするための設定 */
    #main .fabric-item {
        /* PC側の flex: 0 0 160px; を上書き */
        /* 画面幅の半分から隙間分を引く (2列表示) */
        flex: 0 0 29%; 
        max-width: 29%;
        margin: 0 0 10px 0 !important; /* !important で余白を確保 */
        
        /* !importantが付いたPC側のpaddingを上書き */
        padding: 5px !important;
    }
    
    /* 3. 極端に狭い端末用のスケールダウン設定を削除/上書き */
    .fabric-grid {
        transform: none !important;
        transform-origin: unset !important;
    }
}

/* 補足：HTML内の <section class="fabric-section"> に style属性で固定幅や overflow: hidden などが付いていないかもご確認ください。 */