.product-wrapper {
    width: 70%;
    max-width: 1000px; /* PCでの最大幅 */
    margin: 0 auto; /* 全体を中央に表示 */
    padding: 0 20px; /* 左右に20pxの余白 */
    box-sizing: border-box;
}

.product-container {
    display: flex; /* PC表示：横並び */
    gap: 20px; /* 画像とテキストの間に20pxの余白 */
    font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, 'メイリオ', sans-serif;
    text-align: left; /* 文字を左揃えに */
}

.product-image {
    flex: 0 0 400px; /* 画像のコンテナ幅を固定 */
}

.product-description {
    flex: 1; /* テキスト部分が残りの幅を埋める */
}

.product-description h3 {
    margin-top: 0;
    font-size: 1.2em;
    font-weight: bold;
}

.responsive-image {
    width: 100%; /* 親要素(product-image)の幅に合わせる */
    height: auto;
    display: block; /* 余白をなくす */
}

/* 画面幅が768px以下の時に適用されるスタイル（スマホ表示） */
@media (max-width: 768px) {
    .product-container {
        flex-direction: column; /* 縦並びに変更 */
    }

    .product-wrapper {
        width: 100%;
        padding: 0 20px;
        margin: 0;
    }

    .product-image {
        flex: none; /* 幅の固定を解除 */
    }
}