/* --- 基本設定 --- */
  body { font-family: sans-serif; margin: 0; background: #f9f9f9; color: #333; }
  .container-catalog { max-width: 1000px; margin: 0 auto; padding: 20px; }
  
  /* --- ヘッダーエリア --- */
  .list-header-catalog { text-align: center; margin-bottom: 40px; }
  .list-title-catalog { font-size: 1.8rem; color: #004098; margin-bottom: 10px; }
  .list-desc-catalog { font-size: 0.9rem; color: #666; }

  /* --- 商品リスト（カタログ型） --- */
  .catalog-list-catalog {
    display: flex;
    flex-direction: column;
    gap: 30px;
  }

  /* 個別商品カード（横長レイアウト） */
  .catalog-item-catalog {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column; /* スマホは縦並び */
    gap: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  }

  /* 左側：画像エリア */
  .item-image-catalog {
    width: 100%;
    height: 200px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #f0f0f0;
    border-radius: 4px;
    position: relative;
  }
  .item-image-catalog img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
  }
  /* メーカーロゴなどを置く場合 */
  .maker-badge-catalog {
    position: absolute;
    top: 5px;
    left: 5px;
    background: #eee;
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 2px;
  }

  /* 中央：情報エリア */
  .item-info-catalog {
    flex: 1;
  }
  .item-name-catalog {
    font-size: 1.2rem;
    font-weight: bold;
    color: #333;
    margin: 0 0 10px 0;
    line-height: 1.4;
  }
  .item-spec-list-catalog {
    list-style: none;
    padding: 0;
    margin: 0 0 15px 0;
    font-size: 0.9rem;
    color: #555;
  }
  .item-spec-list-catalog li {
    margin-bottom: 5px;
    padding-left: 15px;
    position: relative;
  }
  .item-spec-list-catalog li::before {
    content: "・";
    position: absolute;
    left: 0;
    font-weight: bold;
    color: #004098;
  }
  
  /* 公式リンク */
  .maker-link-catalog {
    font-size: 0.8rem;
    color: #004098;
    text-decoration: none;
    border-bottom: 1px solid #004098;
  }
  .maker-link-catalog:hover { opacity: 0.7; }

  /* 右側：価格＆アクションエリア */
  .item-action-catalog {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-top: 1px dashed #ddd; /* スマホ用の区切り線 */
    padding-top: 20px;
  }

  .price-area-catalog {
    text-align: center;
    margin-bottom: 15px;
  }
  .price-label-catalog {
    font-size: 0.8rem;
    color: #e65c00;
    font-weight: bold;
    background: #fff3e0;
    display: inline-block;
    padding: 2px 10px;
    border-radius: 10px;
    margin-bottom: 5px;
  }
  .price-main-catalog {
    font-size: 2rem;
    color: #d32f2f;
    font-weight: bold;
    font-family: Arial, sans-serif;
  }
  .price-sub-catalog {
    font-size: 0.8rem;
    color: #777;
  }

  /* ボタン */
  .btn-inquiry-catalog {
    background: #06c755; /* LINE色 */
    color: #fff;
    text-decoration: none;
    text-align: center;
    padding: 12px;
    border-radius: 6px;
    font-weight: bold;
    box-shadow: 0 3px 0 #059c43;
    transition: transform 0.1s;
  }
  .btn-inquiry-catalog:active {
    transform: translateY(3px);
    box-shadow: none;
  }

  /* --- PCレイアウト (768px以上) --- */
  @media screen and (min-width: 768px) {
    .catalog-item-catalog {
      flex-direction: row; /* 横並びにする */
      align-items: center;
    }
    .item-image-catalog {
      width: 250px; /* 画像幅固定 */
      height: 180px;
    }
    .item-action-catalog {
      width: 250px; /* 価格エリア幅固定 */
      border-top: none;
      border-left: 1px dashed #ddd; /* PCは縦の区切り線 */
      padding-top: 0;
      padding-left: 20px;
    }
  }