/* ITEM CATEGORYの全体スタイル */
.custom-item-category {
    margin: 40px auto 10px; /* 上の余白を40px増やし、下の余白を10pxに設定 */
    padding: 15px; /* 内側の余白を15px */
    max-width: 1200px; /* 最大幅を1200pxに制限 */
    background-color: #f7f7f7; /* 背景色を薄いグレーに設定 */
    border-radius: 12px; /* 四隅を12pxの角丸にする */
}

/* 見出しエリア */
.custom-item-stit {
    font-size: 18px; /* フォントサイズを18px */
    font-weight: bold; /* 文字を太字 */
    margin-bottom: 20px; /* 見出しの下に20pxの余白を設定 */
    text-align: left; /* 左寄せ */
    display: flex; /* フレックスボックスを適用 */
    align-items: center; /* 縦方向の中央揃え */
    padding-left: 20px; /* 左側の余白を15px */
    position: relative; /* 子要素（縦ライン）を絶対位置で調整できるように */
}

.custom-item-stit::before {
    content: ""; /* 見た目の装飾用の擬似要素 */
    width: 5px; /* 縦ラインの幅 */
    height: 18px; /* 縦ラインの高さ */
    background-color: #fdd762; /* カラー（黄色） */
    position: absolute; /* 絶対位置指定 */
    left: 0; /* 左端に配置 */
    top: 50%; /* 見出しの中央に配置 */
    transform: translateY(-50%); /* 完全に中央揃えにする */
    border-radius: 3px; /* 角丸 */
}

/* カテゴリーのコンテナ */
.custom-item-category--in {
    display: flex;
    justify-content: center;
}

.custom-category--inner {
    display: flex; /* 横並び */
    flex-wrap: wrap; /* 折り返し可能にする */
    justify-content: center; /* 中央揃え */
    gap: 30px; /* アイコン間の余白を20pxに設定 */
    max-width: 1000px; /* 最大幅を1000pxに制限 */
}

/* 各カテゴリーのボックス */
.custom-item-category--blk {
  .custom-item-category--blk {
      width: calc(100% / 9 - 10px); /* PCでは横8個表示 */
      text-align: center; /* テキストを中央揃え */
      cursor: pointer; /* カーソルをポインターに */
      transition: transform 0.2s ease-in-out; /* ホバー時のアニメーション */
  }

  .custom-item-category--blk img {
      width: 70px; /* アイコンの幅 */
      height: 70px; /* アイコンの高さ */
      object-fit: cover; /* 画像をトリミングせず、中央に収める */
      border-radius: 50%; /* 正円にする */
      margin-bottom: 5px; /* テキストとの間に5pxの余白 */
  }

/* テキストスタイル */
.custom-f-cates {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #333;
    font-size: 1em;
}

/* スマホ用の左右の余白調整（アイコン間の余白は変更しない） */
@media screen and (max-width: 768px) {
    .custom-item-category {
        padding-left: 15px; /* 左端の余白を減らす */
        padding-right: 15px; /* 右端の余白を減らす */
    }
    .custom-category--inner {
        display: flex;
        flex-wrap: wrap;
        justify-content: center; /* アイコンを中央揃え */
        gap: 10px; /* アイコン間の余白を適切に調整 */
    }
    .custom-item-category--blk {
        width: calc(100% / 5 - 10px); /* 横4つ均等表示 */
        text-align: center;
    }
    .custom-f-cates {
    font-size: 11px; /* テキストサイズを小さくする */
    white-space: nowrap; /* テキスト量に関係なく均等表示 */
    }
}


/* 人気商品リストのデザイン */
.popular-products {
    margin-top: 40px;
    text-align: center;
}
.popular-products h2 {
    font-size: 1.5em;
    margin-bottom: 20px;
}
.popular-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}
.popular-item {
    width: 100px;
    text-align: center;
}
.popular-item img {
    width: 100px;
    height: 100px;
    object-fit: cover;
}
.popular-item p {
    font-size: 0.9em;
    margin-top: 5px;
}

/* スマホ版（横スクロール） */
@media screen and (max-width: 768px) {
    .popular-list {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: scroll;
        white-space: nowrap;
        padding-bottom: 10px;
    }
    .popular-item {
        flex: 0 0 auto;
    }
}