<style>
.gpu-spec-container { margin: 40px auto; max-width: 100%; font-family: sans-serif; }
.gpu-spec-title { background-color: #004499 !important; color: #ffffff !important; padding: 12px 20px !important; font-size: 20px !important; font-weight: bold !important; margin-bottom: 15px !important; }

.gpu-table-wrapper { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 20px; }
.gpu-spec-table { width: 100%; min-width: 600px; border-collapse: collapse !important; font-size: 14px; line-height: 1.6; }
.gpu-spec-table th, .gpu-spec-table td { border: 1px solid #cccccc !important; padding: 12px 10px !important; text-align: center !important; }
.gpu-spec-table th { background-color: #f5f5f5 !important; color: #222222 !important; font-weight: bold !important; }
.gpu-spec-table td.td-label { background-color: #fafafa !important; font-weight: bold; color: #444444; width: 15%; }
.gpu-spec-table td.highlight-blue { color: #004499 !important; font-weight: bold; }
.gpu-spec-table td.mark-good { color: #ff3b30 !important; font-weight: bold; font-size: 16px; }
.gpu-spec-table td.mark-bad { color: #777777 !important; font-size: 16px; }
.gpu-spec-table tr.row-note td { border: none !important; border-top: 1px solid #cccccc !important; font-size: 12px; color: #666666; background-color: transparent !important; padding-top: 8px !important; }

/* タイトルエリア全体の余白と背景をコンパクトにリセット */
.con {
    background: #ffffff !important; /* 背景を白に固定 */
    padding-bottom: 0 !important;
}
.mcon {
    background: #ffffff !important; /* 背景を白に固定 */
    max-width: 1200px !important;
    margin: 0 auto !important;
    width: 95% !important;
}
.mcon_ttl {
    background: transparent !important; /* グレーのグラデーションを完全に消す */
    background-image: none !important;  /* グラデーション画像の指定もクリア */
    padding: 0 !important;              /* 余計な内側余白を無くす */
    margin-bottom: 5px !important;      /* 元の20pxから5pxに縮小 */
}

/* タイトルの文字デザインを元の大きさに調整 */
.mcon_ttl h1 {
    font-size: 24px !important;
    color: #000 !important;
    text-align: left !important;
}

/* 下のコンテンツが上に詰まるように余白をリセット */
.con.w_base.nvidia_gpu_mane {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.con.w_base.nvidia_gpu_mane main {
    padding-top: 0 !important;
}

/* もしこれでも縮まない場合用の強力なリセット */
.nvidia_CTB {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
/* 下の画像エリアの上の余白もリセットして詰める */
.con.w_base.nvidia_gpu_mane,
.con.w_base.nvidia_gpu_mane main,
.nvidia_CTB {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
/* ===================================================
   黒いヘッダー看板（外枠にピッタリ100%フィットさせる方式）
=================================================== */
.gpu-header-banner {
    /* 外枠の幅に対して100%いっぱいに広げる */
    width: 100% !important;
    max-width: 100% !important;
    margin: 40px 0 30px 0 !important; /* 上下に程よい余白を作る */

    /* 画像を背景として右側にジャスト配置 */
 background-color: #000000 !important; /* 背景の黒だけを残します */
    background-repeat: no-repeat !important;
    background-position: right center !important;
    background-size: contain !important;

    color: #ffffff !important;
    padding: 50px 40px !important; /* 上下の高さをチラシのバランスに調整 */
    min-height: 240px !important;  /* 高さを少し出して画像を見えやすくする */
    border-radius: 4px !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
}

/* 左側：テキストエリア */
.gpu-header-left {
    max-width: 55% !important; /* 文字が右側の画像に絶対に被らないようにガード */
    z-index: 2 !important;
    text-align: left !important;
}

.gpu-sub-badge {
    display: block !important;
    font-size: 16px !important;
    color: #ffffff !important;
    font-weight: normal !important;
    margin-bottom: 12px !important;
    letter-spacing: 0.5px !important;
}

.gpu-main-title {
    font-size: 50px !important;
    font-weight: 900 !important;
    margin: 0 0 20px 0 !important;
    letter-spacing: 1px !important;
    line-height: 1.1 !important;
}

/* 期間限定 特別価格（黄色バッジ） */
.gpu-campaign-badge {
    display: inline-block !important;
    background: #eef200 !important;
    color: #000000 !important;
    font-weight: bold !important;
    font-size: 16px !important;
    padding: 6px 20px !important;
    border-radius: 2px !important;
}

/* 📱 スマホ用の調整（画面幅768px以下になった時の見え方決定版） */
@media screen and (max-width: 768px) {
    
    /* ❗ .gpu-header-banner の前に section などの親クラスをわざと付けて、優先度を最上位に引き上げます */
    section.gpu-section .gpu-header-banner,
    .gpu-section .gpu-header-banner,
    .gpu-header-banner {
        /* PC版の contain を完全に破壊して cover に変更 */
        background-size: cover !important;
        background-position: right center !important; /* イラストを綺麗に見せるため右寄りに配置 */
        padding: 30px 20px !important;
        min-height: 200px !important;
    }
    
    .gpu-header-left {
        max-width: 100% !important;
        z-index: 2 !important;
    }
    
    /* 文字サイズがスマホで少し大きすぎる場合の自動微調整 */
    .gpu-main-title {
        font-size: 28px !important; 
        line-height: 1.2 !important;
    }
    .gpu-sub-badge {
        font-size: 14px !important;
    }
    .gpu-campaign-badge {
        font-size: 14px !important;
        padding: 4px 12px !important;
    }
}

/* ===================================================
   導入テキストエリアのスタイリング
=================================================== */
.gpu-intro-section {
    max-width: 100% !important;
    margin: 40px 0 50px 0 !important; /* 上下に程よい余白を作る */
    line-height: 1.8 !important;
    text-align: left !important;
}

/* 小見出し（リード文） */
.gpu-intro-lead {
    font-size: 22px !important;
    color: #ffffff !important; /* 白文字にされた設定を維持 */
    font-weight: bold !important;
    margin: 0 0 25px 0 !important; /* 本文との隙間を少し広げる */
    letter-spacing: 0.5px !important;
    
    /* ★ここに上下の幅（余白）を追加します */
    padding: 15px 20px !important; /* 前者の15pxが上下の幅、後者の20pxが左右の余白です */
    display: block !important;    /* 背景を横いっぱいの帯にするために必須です */
}

/* 本文（説明文） */
.gpu-intro-body {
    font-size: 16px !important;
    color: #444444 !important;
    margin: 0 !important;
    text-align: justify !important; /* 左右の端を綺麗に揃えて読みやすくする */
}

/* 📱 スマホ用の調整 */
@media screen and (max-width: 768px) {
    .gpu-intro-lead {
        font-size: 18px !important;
    }
    .gpu-intro-body {
        font-size: 14px !important;
    }
}
.gpu-spec-subtitle { 
    font-size: 22px !important; /* 新しいリード文とサイズを統一 */
    font-weight: bold !important; 
    margin: 40px 0 20px 0 !important; /* 上下に程よい外側余白を設定 */
    color: #ffffff !important; /* 文字色を白に変更 */
    
    /* リード文と同じ黄緑の背景と内側余白を設定 */
    background-color: #8cbe23 !important; /* ※現在お使いの黄緑色のカラーコードに合わせて適宜変更してください */
    padding: 15px 20px !important; 
    display: block !important; 
    letter-spacing: 0.5px !important;
}

/* ===================================================
   商品グリッド＆カードデザイン
=================================================== */
.gpu-product-container {
    max-width: 100% !important;
    margin: 20px 0 !important;
    font-family: sans-serif;
}

/* カード全体の基本設定 */
.gpu-card {
    border: 1px solid #dddddd !important;
    background: #ffffff !important;
    margin-bottom: 20px !important;
    box-sizing: border-box !important;
}

/* カードのヘッダー（製品名） */
.gpu-card-header {
   border-bottom: none !important; /* 下線を完全に消去 */
    padding-bottom: 5px !important; /* 隙間が空きすぎないように余白を微調整 */
}
.gpu-card-header h4 {
    font-size: 24px !important; /* 元の18pxから24pxに拡大 */
    font-weight: 900 !important; /* 圧倒的な太さに指定 */
    color: #000000 !important;
    margin: 5px 0 10px 0 !important;
}

.gpu-spec-strip {
    font-size: 18px !important; /* 元の13pxから16pxに拡大 */
    font-weight: bold !important;
    padding: 6px 15px !important; /* 文字に合わせて帯の幅も少しふっくらと */
    background: #000000 !important;
    color: #ffffff !important;
}

/* 🌟 特大カードのボディレイアウト（3カラム） */
.gpu-card-featured .gpu-card-body {
    display: flex !important;
    padding: 15px !important;
    gap: 20px !important;
    align-items: center !important;
}
.gpu-card-featured .gpu-card-left { flex: 1.5; }
.gpu-card-featured .gpu-card-center { flex: 1; text-align: center; }
.gpu-card-featured .gpu-card-center img { max-width: 100%; height: auto; }
.gpu-card-featured .gpu-card-right { flex: 1.2; border-left: 1px dashed #ccc; padding-left: 20px; }

/* タイトルの位置と余白の微調整 */
.gpu-card-featured .gpu-card-header h4 {
    padding-left: 15px;    /* 💡 左側に黒い帯と同じくらいの余白を作る */
    margin-top: 15px;      /* 💡 黒い帯との間の上の余白（お好みで調整） */
    margin-bottom: 5px;    /* 💡 タイトル下の余白をギュッと詰める */
}

/* タイトル下の余白を詰めるための全体調整 */
.gpu-card-featured .gpu-card-body {
    padding-top: 0 !important; /* 💡 下のコンテンツ（説明文や画像）を上に引き上げる */
}

/* 👥 通常カード（2列用）のグリッド設定 */
.gpu-normal-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
}
.gpu-card-body-normal {
    padding: 15px !important;
}
.gpu-card-body-normal .body-top {
    display: flex !important;
    gap: 15px !important;
    align-items: center !important; /* 上下中央で綺麗に揃える */
}
/* 💡 2枠横並びカード（通常版）のタイトル微調整 */
/* 💡 2枠横並びカード（通常版）のタイトル：左余白と下余白を同時に固定 */
.gpu-card .gpu-card-header h4 {
    padding-left: 15px !important;   /* 💡 左側の余白を最優先でキープ */
    margin-top: 15px !important;     /* 黒い帯との間の上の余白 */
    margin-bottom: 0px !important;   /* キープしたまま下の余白はゼロに */
}

/* 💡 タイトル下の余白をさらに詰めるための全体調整 */
.gpu-card-body-normal {
    padding-top: 0 !important; /* 下のコンテンツ（説明文や画像）を上に引き上げる */
}

/* 説明文エリアを広げる */
.gpu-card-body-normal .body-top p {
    flex: 1.6 !important; /* テキストのスペースを大幅に拡大 */
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
}
/* 画像が大きすぎないように制限 */
.gpu-card-body-normal .body-top img {
    flex: 1 !important; /* 画像のスペースを一回り小さく */
    max-width: 200px !important; /* 横幅の最大値を140pxに固定して潰れを防止 */
    height: auto !important;
}

/* 2. バッジの個別調整 */
/* 「消費電力」の文字が含まれるバッジの背景をネイビーにする */
.gpu-card-body-normal .gpu-badge-grid span:nth-child(3) {
    background: #113c73 !important; /* チラシ準拠の深い紺色（ネイビー） */
}
/* 説明テキスト */
.gpu-desc-text {
    font-size: 13px !important;
    color: #333333 !important;
    line-height: 1.5 !important;
}

/* スペックバッジ群 */
.gpu-badge-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    margin: 10px 0 !important;
}
.gpu-badge-grid span {
    font-size: 11px !important;
    font-weight: bold !important;
    color: #ffffff !important;
    padding: 4px 12px !important;  /* 左右に少しゆとりを持たせる */
    border-radius: 12px !important; /* しっかりとカプセル型の角丸にする */
    text-shadow: none !important;
}

/* チラシのカラーコードを再現 */
.badge-cuda { background: #a61212 !important; }   /* 深いえんじ色 */
.badge-tensor { background: #601273 !important; } /* 深い紫 */
.badge-rt { background: #d94b12 !important; }     /* 濃いオレンジ */
.badge-spec { background: #1c521c !important; }   /* 深い緑・オリーブ（PCIeなど） */

/* 消費電力やポート類でオリーブ以外の色（黄土色系）があればこちらで個別指定 */
.gpu-badge-grid span:nth-child(4) {
    background: #948011 !important; /* 消費電力：チラシのくすんだイエロー/カーキ */
}
.gpu-badge-grid span:nth-child(5) {
    background: #113c73 !important; /* DisplayPort：チラシの深い紺色 */
}


/* 価格表示ルール */
.price-row, .price-row-normal {
    display: flex !important;
    align-items: baseline !important;
    justify-content: flex-end !important;
    margin-bottom: 5px !important;
}
.price-row-normal { justify-content: center !important; margin-top: 15px !important; }
.single-price { margin-top: 25px !important; }
.unit {
    font-size: 18px !important;
    font-weight: bold !important;
    color: #000000 !important;
    margin-right: 15px !important;
   
}
.price {
    font-size: 30px !important;
    font-weight: 900 !important;
    color: #d32f2f !important; /* チラシ特有の濃い赤色価格 */
}
.yen { font-size: 16px !important; font-weight: bold !important; margin-left: 2px; }
.note-text {
    text-align: center !important;
    font-size: 11px !important;
    color: #666666 !important;
    background: #ffeb3b !important; /* 黄色い背景補足 */
    padding: 2px 0 !important;
    margin-top: 5px !important;
}

/* 📱 スマホ対応（768px以下はすべて1列縦並び） */
@media screen and (max-width: 768px) {
    .gpu-card-featured .gpu-card-body {
        flex-direction: column !important;
    }
    .gpu-card-featured .gpu-card-right {
        border-left: none !important;
        border-top: 1px dashed #ccc !important;
        padding-left: 0 !important;
        padding-top: 15px !important;
        width: 100% !important;
    }
    .gpu-normal-grid {
        grid-template-columns: 1fr !important;
    }
    .gpu-card-body-normal .body-top {
        flex-direction: column !important;
    }
}

/* ===================================================
   お問い合わせボタン（ネイビー・大きめの角丸）
=================================================== */
.gpu-action-area {
    text-align: center !important;
    margin: 50px 0 60px 0 !important; /* 上下にゆったりとした余白を確保 */
    width: 100% !important;
}

.gpu-btn-submit {
    display: inline-block !important;
    background: #0d367c !important; /* キャプチャ画像通りの美しいネイビー */
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 20px !important;       /* 文字を読みやすく太めに */
    font-weight: bold !important;
    padding: 18px 80px !important;    /* ボタンをふっくらと横長にする内側余白 */
    border-radius: 14px !important;   /* 画像通りのなめらかな角丸 */
    transition: background 0.3s ease, transform 0.2s ease !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important; /* 軽めのシャドウで立体感を */
}

/* ホバー（マウスを乗せた時）の演出 */
.gpu-btn-submit:hover {
    background: #09275c !important; /* 少し濃いネイビーにしてクリック感を出す */
    transform: translateY(-2px) !important; /* ほんの少し上に浮き上がらせるプロ演出 */
}

/* 📱 スマホ用の調整（画面が狭くなっても文字が溢れないようにする） */
@media screen and (max-width: 768px) {
    .gpu-btn-submit {
        font-size: 16px !important;
        padding: 15px 30px !important;
        width: 90% !important; /* スマホでは画面幅に合わせる */
        box-sizing: border-box !important;
    }
}
---

### 🛠️ 導入文の左右レイアウト（CSSコードの追加）
文章の右側に男性の画像をきれいに配置するためのスタイルを、`page-nvidia_gpu_mane.css` の**一番下**に追記して保存してください。

```css
/* ===================================================
   GeForceセクション専用 左右2カラムレイアウト
=================================================== */
.gpu-intro-flex-container {
    display: flex !important;
    flex-direction: row !important; /* PCでは確実に横並び */
}

/* 左側：文章エリア */
.gpu-intro-flex-left {
    flex: 1.3 !important; /* 文章のスペースを広く確保 */
    text-align: left !important;
}

/* 右側：画像エリア（小さく制限） */
.gpu-intro-flex-right {
    flex: 0.7 !important; /* 画像のスペースを一回り小さく */
    text-align: right !important;
    max-width: 380px !important; /* 画像がこれ以上大きくならないように上限を設定 */
}

.gpu-intro-flex-right img {
    width: 100% !important; /* 割り当てられた幅いっぱいに縮小表示 */
    height: auto !important;
    border: 1px solid #dddddd !important; /* チラシのような綺麗な外枠 */
    display: inline-block !important;
}

/* 📱 スマホ用の調整（画面幅768px以下になったら縦並びに切り替える） */
@media screen and (max-width: 768px) {
    .gpu-intro-flex-container {
        flex-direction: column !important;
        gap: 20px !important;
    }
    .gpu-intro-flex-right {
        max-width: 100% !important;
        text-align: center !important;
    }
}


/* 📱 スマホ用の調整（画面幅768px以下になった時の見え方・画像切り替え最終版） */
@media screen and (max-width: 768px) {
    
    /* 全バナー共通のスマホ基本スタイル */
    section.gpu-section .gpu-header-banner,
    .gpu-section .gpu-header-banner,
    .gpu-header-banner {
        background-size: cover !important;
        background-position: center center !important; /* 正方形画像なのでど真ん中に配置 */
        padding: 40px 20px !important;
        min-height: 250px !important; /* 正方形が綺麗に収まる高さを確保 */
        display: flex !important;
        align-items: center !important;
    }

    /* 🌟 各セクション（クラス名）ごとにスマホ用画像を個別強制上書き */
    
    /* セクション1（RTX PRO） */
    .rtx-pro-section .gpu-header-banner {
        background-image: url('../images-new/nvidia_rtx_top2_sp.png') !important; 
    }
    
    /* セクション2（H200） */
    .section-h200 .gpu-header-banner {
        background-image: url('../images-new/nvidia_rtx_top3_sp.png') !important; 
    }
    
    /* セクション3（GeForce） */
    .section-geforce .gpu-header-banner {
        background-image: url('../images-new/nvidia_rtx_top4_sp.png') !important; 
    }
    
    /* ――― 以下、文字サイズ等の共通微調整（変更なし） ――― */
    .gpu-header-left {
        max-width: 100% !important;
        z-index: 2 !important;
    }
    .gpu-main-title {
        font-size: 28px !important; 
        line-height: 1.2 !important;
    }
    .gpu-sub-badge {
        font-size: 14px !important;
    }
    .gpu-campaign-badge {
        font-size: 14px !important;
        padding: 4px 12px !important;
    }
}
/* ――― CSSの「一番下」のスマホ用エリア（@media内）に貼り付けてください ――― */
@media screen and (max-width: 768px) {

    /* 📱 スマホ画面の時は、右側の画像エリアを丸ごと完全に非表示にします */
    section.gpu-section .gpu-intro-flex-right,
    .gpu-section .gpu-intro-flex-right,
    .gpu-intro-flex-right {
        display: none !important; /* 画面から完全に消し去ります */
    }

    /* スマホ画面の時は、左側の文章エリアを横幅100%いっぱいに広げます */
    section.gpu-section .gpu-intro-flex-left,
    .gpu-section .gpu-intro-flex-left,
    .gpu-intro-flex-left {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
    }
    
    /* ――― 看板画像や文字サイズ等の他のスマホコードはそのまま残して大丈夫です ――― */
}
.campaign-banner {
  text-align: right;
  font-size: 13px;
  color: #333333;             /* 文字色（黒・濃いグレー） */
  margin-top: 5px;
  padding: 8px 15px;          /* 上下左右に余白を作って背景を広げる */
  display: inline-block;      /* 文字の長さに合わせて背景幅を自動調整 */
  
  /* グレーのグラデーション（上から下へ） */
  background: linear-gradient(to bottom, #f2f2f2, #d9d9d9); 
  
  /* 必要に応じて（画像のように少し角を丸くする場合） */
  border-radius: 3px; 
}
* 2. 説明文の上の余白（デフォルトのmargin）をリセットして上に詰める */
.gpu-card-body-normal .gpu-desc-text {
    margin-top: 0px !important;
}

/* 3. 説明文と画像が入っている親要素の上の余白を削る */
.gpu-card-body-normal .body-top {
    margin-top: 0px !important;
    padding-top: 0px !important;
}
</style>