.p-sub-category {
  margin: 30px 10px;
  padding: 0;
  list-style-type: none;
}

.p-sub-category::after {
  display: block;
  clear: both;
  content: '';
}

.p-sub-category__item {
  float: left;
  box-sizing: border-box;
  width: 50%;
  padding: 10px 5px;
}

.p-sub-category__image {
  display: block;
  margin-bottom: 10px;
}

.p-sub-category__link {
  display: block;
  transition: opacity .2s;
  text-decoration: none;
  color: #333;
}

.p-sub-category__link:hover {
  opacity: .66;
}

.p-sub-category__link:active {
  opacity: 1;
}

.p-sub-category__name {
  line-height: 1.3;
  position: relative;
  display: block;
  padding-left: .8em;
}

.p-sub-category__name::before {
  position: absolute;
  top: 0;
  left: 0;
  content: '-';
}

@media screen and (min-width: 600px) {
  .p-sub-category {
    margin-right: 0;
    margin-left: 0;
  }

  .p-sub-category__item {
    width: 25%;
    padding: 15px 10px;
  }

  .p-sub-category__item:nth-child(4n + 1) {
    clear: both;
  }
}

@media screen and (max-width: 599px) {
  .p-sub-category__item:nth-child(2n + 1) {
    clear: both;
  }
}

/* 親コンテナ */
.content-with-sidebar {
  display: flex;
  justify-content: space-between; /* メインコンテンツとサイドバーを横に並べる */
  margin: 20px;
}

/* サイドバー */
.sidebar {
  order: -1; /* サイドバーを左に配置 */
  flex: 1; /* サイドバーの幅を調整 */
  padding: 20px;
  border-radius: 10px;
  background-color: transparent; /* 背景色を透明に設定 */
  box-shadow: none; /* 影を削除 */
}

/* メインコンテンツ */
.main-content {
  flex: 3; /* メインコンテンツの幅を調整 */
  padding-left: 20px; /* サイドバーとの間にスペースを設ける */
}

/* サイドバー内の画像リンク */
.sidebar-image {
  max-width: 100%;
  display: block;
  margin: 10px 0;
}

/* レスポンシブ対応 - スマホサイズではサイドバーを非表示 */
@media (max-width: 768px) {
  .content-with-sidebar {
    flex-direction: column; /* スマホでは縦に並べる */
  }

  .main-content {
    flex: 1; /* スマホではメインコンテンツが全幅 */
    padding-left: 0;
  }

  .sidebar {
    display: none; /* スマホではサイドバーを非表示 */
  }
}

/* サイドバー内のリストアイテムの小さな〇を消す */
.sidebar ul {
  list-style-type: none; /* リストアイテムのデフォルトのマーカー（〇）を削除 */
  padding: 0; /* リストの内側の余白を削除 */
}

.sidebar li {
  position: relative;
  padding-left: 20px; /* 左側に少しスペースを追加（テキストとアイコンの間） */
}

.sidebar li::before {
  content: none; /* ::before擬似要素の小さな〇を消す */
}

/* サイドバー内のリンクのスタイル */
.sidebar a {
  color: black; /* 文字色を黒に設定 */
  text-decoration: none; /* 文字の下線を消す */
  font-size: 16px; /* フォントサイズを調整（お好みに変更してください） */
  line-height: 2.7; /* 行間を調整（お好みに変更してください） */
}

.sidebar a:hover {
  color: #333; /* リンクにカーソルを合わせたときの文字色を少し濃く */
}
/* サイドバーのセクションタイトル */
.sidebar .section__title-h2 {
  font-size: 20px; /* フォントサイズを少し小さく */
  font-weight: bold; /* 太字にする（お好みで変更） */
  margin-bottom: 10px; /* タイトルと下の線の間隔を調整 */
   text-align: center; /* 中央揃え */
}

/* サイドバーのセクションタイトル下に1pxの線 */
.sidebar .section__title-h2 + hr {
  border: 0; /* 既存のボーダーをリセット */
  border-top: 1px solid #000; /* 1pxの黒線を追加 */
  width: 100%; /* サイドバーの幅いっぱいに */
}

/* セクション内のその他のスタイル */
.sidebar .menu__section {
  margin-bottom: 20px; /* セクション間の余白を調整 */
}

/* サイドバー内の画像の中央配置と余白調整 */
.sidebar .sidebar-image {
  display: block;
  margin: 20px auto; /* 上下の余白を20px、左右の余白を自動設定で中央揃え */
  width: 90%;
  max-width: 270px; 
  height: auto;
}

/* サイドバーの商品名にアンダーラインを追加 */
.sidebar .menu-list__link {
  display: block;
  text-decoration: none; /* デフォルトのリンクの下線を消す */
  padding-bottom: 5px; /* アンダーラインと文字の間にスペースを作る */
  border-bottom: 1px solid rgba(0, 0, 0, 0.1); /* 薄いアンダーライン */
}

.sidebar .menu-list__link:hover {
  border-bottom-color: rgba(0, 0, 0, 0.3); /* ホバー時にアンダーラインの色を濃くする */
}
.c-section__heading {
  margin: 0;  /* 余白をなくす */
  padding: 0; /* パディングも削除 */
  line-height: 1; /* 行の高さを最小限に */
}

.c-product-sort {
  margin: 0 !important;  /* 余白をなくす */
  padding: 0 !important; /* 内側の余白をなくす */
}

/* スマホ用画像（デフォルトで表示） */
.mobile-visual {
  width: 100vw;
  max-width: 100%;
  display: block;
  margin: 0;
  padding: 0;
}

/* PCではスマホ画像を非表示 */
@media (min-width: 768px) {
  .mobile-visual {
    display: none;
  }
}
@media (max-width: 768px) {
  .sidebar {
    display: none !important;
  }
}
@media (max-width: 768px) {
  .p-sub-category__name {
    font-size: 14px; /* スマホ用に少し小さく */
  }

  .sidebar .section__title-h2 {
    font-size: 18px; /* スマホで少し小さめ */
  }

  .sidebar a {
    font-size: 14px; /* スマホのナビリンクの文字を小さく */
  }
}

@media (max-width: 768px) {
  .p-sub-category {
    margin: 20px 5px; /* スマホでの余白を調整 */
  }

  .p-sub-category__item {
    padding: 8px 4px; /* スマホでのアイテム間のスペースを調整 */
  }

  .content-with-sidebar {
    margin: 5px; /* スマホでの左右余白を少し減らす */
  }

  .main-content {
    padding: 0px; /* スマホのときの余白を適切に */
  }

  .mobile-visual {
    margin-bottom: 15px; /* 画像下の余白を調整 */
  }
}

.main-content img {
  display: block; /* ブロック要素にして中央配置可能に */
  margin: 0 auto; /* 左右のマージンを自動で中央配置 */
  max-width: 90%; /* 親要素の幅を超えないように */
  height: auto; /* アスペクト比を維持 */
}

@media (max-width: 768px) {
  .main-content img {
    max-width: 50%; /* スマホ時に少し小さめに調整 */
  }
  
   /* 灰色のボックス（商品コンセプト）の余白を増やす */
  .concept-box {
    padding: 0px;
    margin: 0 -20px; /* 左右の余白を増やす */
  }
}

<style>
.product-list {
  display: flex;
  flex-direction: column;
  gap: 40px; /* 商品間の余白を40pxに拡大 */
  max-width: 900px;
  margin: 30px auto; /* 親要素に上下の余白を追加 */
}

.product-item {
  margin: 10px 0; /* 上下に30pxの余白を追加 */
}


  .product-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f5f5f5;
    padding: 20px;
    border-radius: 10px;
    flex-wrap: wrap;
  }

  .product-item .text {
    width: 48%;
    line-height: 1.6;
  }

  .product-item .image {
    width: 48%;
    text-align: center;
  }

  .product-item .image img {
    max-width: 100%;
    border-radius: 8px;
    height: auto;
  }

  .content-info {
    margin-top: 10px;
    font-size: 16px;
    line-height: 1.8;
  }

  @media (max-width: 768px) {
    .product-item {
      flex-direction: column;
      text-align: center;
    }

    .product-item .text, .product-item .image {
      width: 100%;
      padding: 0;
    }

    .product-item .image img {
      max-width: 300px;
    }

    .content-info {
      font-size: 14px;
    }
  }


.text-image-box {
  padding: 20px 30px; /* ボックス内の左右余白 */
  margin: 0 0px; /* ボックス外の左右余白 */
}
.text-image-box .image img {
  width: 100%; /* 画面幅に合わせて画像を縮小 */
  max-width: 100%; /* 最大幅を100%に制限 */
  height: auto; /* 高さは自動で調整 */
}

@media (max-width: 768px) {
  .text-image-box .image img {
    width: 100%; /* 画面幅に合わせて画像を縮小 */
    max-width: 100%; /* 最大幅を100%に制限 */
    height: auto; /* 高さは自動で調整 */
  }
}

/* スマホ対応メディアクエリ */
@media (max-width: 768px) {
  .mobile-visual {
    display: block !important;
  }

  .pc-visual {
    display: none !important;
  }

  .sidebar {
    display: block;
  }

  .content-with-sidebar {
    display: block;
    padding: 0 10px; /* 左右の余白を調整 */
  }

  .content-with-sidebar span,
  .content-with-sidebar p {
    font-size: 15px; /* 少し小さくして収まりやすく */
    line-height: 1.7; /* 行間も少し詰め気味に */
  }

  /* 画像が枠内に収まるように */
  .content-with-sidebar img {
    width: 100%; /* 画像が親要素の幅に合わせて調整 */
    max-width: 100%; /* 最大幅を100%に制限 */
    height: auto; /* 高さは自動調整 */
    display: block; /* インライン要素をブロックにして余白を取り除く */
    margin: 0 auto; /* 中央に配置 */
  }

  /* 商品画像の調整 */
  .product-item img {
    width: 100%;
    max-width: 100%; /* 最大幅を100%に制限 */
    height: auto;
  }

  .concept-box {
    font-size: 14px;
    line-height: 1.7;
  }

  .section__title-h2 {
    font-size: 16px;
  }
}

/* PC対応（そのままでOK） */
@media (min-width: 769px) {
  .mobile-visual {
    display: none !important;
  }

  .pc-visual {
    display: block !important;
  }

  /* 商品画像の調整 */
  .product-item img {
    width: auto;
    max-width: 100%;
    height: auto;
  }
}