<style>
        /* 全体設定 */
        *, *::before, *::after {
            box-sizing: border-box;
        }
        body {
            font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
            line-height: 1.7;
            color: #333333;
            background-color: #f4f7f6;
            margin: 0;
            padding: 0;
        }

        /* ヘッダー */
        header {
            background-color: #ffffff;
            border-bottom: 3px solid #e2231a;
            padding: 15px 5%;
        }
        .header-logo {
            font-size: 20px;
            font-weight: bold;
            color: #333333;
            letter-spacing: 1px;
        }
        .header-logo span {
            color: #e2231a;
        }

       /* メインビジュアル */
/* メインビジュアル */
.mv-container {
    /* 画像パスを「images-new/」に変更。PC版を表示 */
    background: #000000 url('images-new/lenovo-feature-hero.webp') no-repeat right center / auto 100%;
    color: #ffffff;
    padding: 0 5%; 
    border-bottom: 5px solid #e2231a;
    height: 500px; 
    display: flex;
    align-items: center;
}

/* 文字エリアを左側に寄せるためのインナー枠 */
.mv-inner {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    text-align: left; 
}

.mv-tag {
    display: inline-block;
    background-color: #e2231a;
    color: #ffffff;
    padding: 5px 15px;
    font-weight: bold;
    font-size: 14px;
    border-radius: 3px;
    margin-bottom: 20px;
    letter-spacing: 1px;
}

.mv-title {
    font-size: 36px; 
    font-weight: bold;
    line-height: 1.5;
    margin: 0 0 25px 0;
    max-width: 700px; 
}

.mv-title span {
    color: #e2231a;
}

.mv-lead {
    font-size: 16px;
    max-width: 650px; 
    margin: 0;
    line-height: 1.8;
    opacity: 0.9;
}

/* タブレット・スマホ用のレスポンシブ対応（画面幅960px以下） */
@media (max-width: 960px) {
    .mv-container {
        /* スマホ用画像（PNG形式・フォルダ名対応）に切り替え */
        background: #000000 url('images-new/lenovo-feature-hero_sp.png') no-repeat center bottom / auto 100%;
        /* 750x1000の縦横比をスマホ画面で綺麗に活かすため、高さを550pxに調整 */
        height: 550px; 
        padding: 0 5%;
        /* 上下に並べるため flex の方向を縦（column）に変更 */
        flex-direction: column;
        justify-content: flex-start;
    }
    .mv-inner {
        text-align: center;
        background: none; 
        padding: 0;
        margin-top: 40px; /* 上からの心地よい余白 */
    }
    .mv-title {
        font-size: 24px;
        margin: 0 auto 15px auto;
    }
    .mv-lead {
        font-size: 14px;
        margin: 0 auto;
    }
}

        /* メインコンテンツ枠 */
        .wrapper {
            max-width: 1100px;
            margin: 40px auto;
            padding: 0 20px;
        }

       /* 導入セクション */
.intro-box {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 35px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    margin-bottom: 50px;
}
.section-title {
    font-size: 24px;
    color: #111111;
    text-align: center;
    margin-top: 0;
    margin-bottom: 30px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e2231a;
}
.intro-problems {
    display: table;
    width: 100%;
    margin-bottom: 25px;
}
.problem-item {
    display: table-cell;
    width: 33.333%;
    padding: 0 15px;
    text-align: center;
    vertical-align: top; /* 各カードの高さがズレないように上揃えを追加 */
}
.problem-inner {
    background-color: #f2f7f5;
    border: 1px solid #d3e5df;
    border-radius: 6px;
    padding: 0; /* ★上左右の隙間をなくして画像を密着させるため、一旦 0 にします */
    height: 100%;
    overflow: hidden; /* ★これを入れることで、中の画像の上の角丸が綺麗にカットされます */
}

/* ★新設：画像を包む枠のスタイル */
.problem-img-wrapper {
    width: 100%;
    height: 200px; /* 画像を表示する高さ（お好みで調整してください） */
    overflow: hidden;
    margin-bottom: 15px; /* 下のテキストとの間の隙間 */
}

/* ★新設：画像自体の引き伸ばし・型崩れ防止 */
.problem-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 横長・縦長どんな写真でも型崩れせず、枠いっぱいに綺麗に収まります */
}

.problem-txt {
    font-size: 14px;
    font-weight: bold;
    color: #2e7d32;
    margin: 0;
    padding: 0 15px 20px 15px; /* ★元のpaddingの代わりに、テキストの下と左右に余白を付けます */
}
/* 見出しのデザイン */
.intro-conclusion h3 {
    margin: 0 0 16px 0; /* 下に16pxの余白を作って改行させる */
    font-size: 22px;    /* 文字を大きく（元の1.5倍弱） */
    font-weight: bold;  /* 太字 */
    color: #111111;
    line-height: 1.4;
}

/* 説明文（本文）のデザイン */
.intro-conclusion p {
    margin: 0;
    font-size: 15px;
    font-weight: normal; /* 本文は通常の太さに戻すと読みやすくなります */
    color: #333333;      /* 少しだけ不透明度を下げるとより洗練されます */
    line-height: 1.7;    /* 行間を広げて読みやすく */
}
/* タブレット・スマホ用のレスポンシブ対応（画面幅960px以下） */
@media (max-width: 960px) {
    .intro-problems {
        display: block; /* テーブル表示をやめて縦並びに */
        margin-bottom: 20px;
    }
    .problem-item {
        display: block; /* 縦並びに変更 */
        width: 100%; /* 横幅いっぱいに広げる */
        padding: 0;
        margin-bottom: 20px; /* カード同士の上下の隙間 */
    }
    .problem-img-wrapper {
        height: 180px; /* スマホ画面に合わせて画像の高さを少しだけスマートに調整 */
    }
    .section-title {
        font-size: 19px;     /* ★PCの24pxから、スマホ用に19pxへ少しスマートに縮小 */
        margin-bottom: 20px; /* 下のコンテンツとの隙間もスマホ用に少し詰めました */
        padding-bottom: 8px;
        line-height: 1.4;    /* 万が一2行に改行されても綺麗に見える行間 */
    }
}

/* シチュエーション（用途別）セクション */
.situation-section {
    margin-bottom: 60px;
}
.situation-card {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    margin-bottom: 30px;
    overflow: hidden; /* 最下部の赤帯の角丸をカードに合わせるために必須 */
    border-top: 4px solid #444444;
}
.situation-card.highlight {
    border-top: 4px solid #e2231a;
}
.card-header {
    background-color: #f8fafc;
    padding: 20px 25px;
    border-bottom: 1px solid #e2e8f0;
}
.card-badge {
    display: inline-block;
    background-color: #444444;
    color: #ffffff;
    font-size: 12px;
    font-weight: bold;
    padding: 3px 10px;
    border-radius: 3px;
    margin-bottom: 8px;
}
.situation-card.highlight .card-badge {
    background-color: #e2231a;
}
.card-title {
    font-size: 20px;
    font-weight: bold;
    margin: 0;
    color: #1a202c;
}
.card-body {
    padding: 25px 25px 0 25px; /* ★下側の余白を0にして、画像と赤帯の間の隙間を調整します */
    display: table;
    width: 100%;
    box-sizing: border-box; /* 横幅の計算を狂わせないための記述 */
}
.body-col {
    display: table-cell;
    width: 50%;
    vertical-align: top;
    padding: 0 20px; /* 左右の余白を少しだけ広げて見やすくしました */
}
.body-col:first-child {
    border-right: 1px dashed #e2e8f0;
    padding-left: 0;
}
.body-col:last-child {
    padding-right: 0;
}
.block-title-ng {
    color: #4a5568;
    font-weight: bold;
    font-size: 15px;
    margin-top: 0;
    margin-bottom: 10px;
}
.block-title-ok {
    color: #38a169;
    font-weight: bold;
    font-size: 15px;
    margin-top: 0;
    margin-bottom: 10px;
}
.col-desc {
    font-size: 14px;
    margin-bottom: 20px; /* ★画像との間に心地よい隙間を作ります */
    color: #4a5568;
    line-height: 1.6;
}

/* ★新設：画像の外枠。2つの画像の高さを揃えて綺麗に並べます */
.col-img-wrapper {
    width: 100%;
    height: 180px; /* 画像を表示する高さ（お好みで調整してください） */
    overflow: hidden;
    border-radius: 4px; /* 画像単体にも少し角丸をつけて優しく見せます */
    margin-bottom: 25px; /* 最下部の赤帯との隙間 */
}

/* ★新設：画像が型崩れせず枠いっぱいに広がる魔法 */
.col-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ★大幅変更：最下部にドカンと敷く「赤帯」のデザイン */
.keyword-box {
    margin-top: 0;
    background-color: #e2231a; 
    padding: 8px 25px; /* ★上下の余白を「15px」から「8px」に狭めました */
    border-radius: 0; 
    display: flex; 
    align-items: center;
}
.keyword-label {
    font-size: 14px; /* 少し大きくして見やすく */
    font-weight: bold;
    color: #ffffff; /* 赤帯の上なので白文字に */
    margin-bottom: 0;
    margin-right: 15px; /* 右側のタグとの間の隙間 */
    flex-shrink: 0; /* ラベルが潰れないように固定 */
}
.keyword-tags {
    font-size: 14px;
    font-weight: bold;
    color: #ffffff; /* 赤帯の上なので白文字に */
    letter-spacing: 0.5px;
}

/* ★スマホ用のレスポンス対応（横に潰れるのを防ぐ） */
@media (max-width: 768px) {
    .card-body {
        display: block; /* テーブルをやめて縦並びに */
        padding: 20px;
    }
    .body-col {
        display: block;
        width: 100%;
        padding: 0;
        margin-bottom: 25px;
    }
    .body-col:first-child {
        border-right: none; /* スマホ時は境界線を消す */
        border-bottom: 1px dashed #e2e8f0; /* 代わりに下に境界線を引く */
        padding-bottom: 10px;
    }
    .body-col:last-child {
        margin-bottom: 15px;
    }
    .col-img-wrapper {
        height: 160px; /* スマホ用に画像の高さを少しスマートに */
    }
    .keyword-box {
        flex-direction: column; /* スマホ時は赤帯の中身を縦並びに */
        align-items: flex-start;
        padding: 15px;
    }
    .keyword-label {
        margin-bottom: 5px;
    }
}
       
       /* コラム：AI PCセクション */
.ai-column {
    /* ★無地黒から背景画像に変更。画像の上に「不透明度85%の黒（rgba）」を重ねて文字をパキッと浮き立たせます */
    background: linear-gradient(rgba(17, 17, 17, 0.85), rgba(17, 17, 17, 0.85)), 
                url('images-new/lenovo-feature-parts014.png') no-repeat center center / cover;
    color: #ffffff;
    border-radius: 8px;
    padding: 35px;
    margin-bottom: 60px;
    border-left: 6px solid #e2231a;
    box-sizing: border-box; /* 横幅の計算崩れを防ぐ */
}
.ai-title {
    font-size: 22px;
    color: #e2231a;
    margin-top: 0;
    margin-bottom: 15px;
    font-weight: bold;
}
.ai-p {
    font-size: 15px;
    margin-bottom: 25px; /* 下との隙間を少し広げました */
    color: #e2e8f0;
    line-height: 1.6; /* 読みやすさのために行間を調整 */
}
.ai-points {
    display: table;
    width: 100%;
}
.ai-point-item {
    display: table-cell;
    width: 50%;
    padding: 0 12px; /* 左右の余白を微調整 */
}
.ai-point-item:first-child { padding-left: 0; }
.ai-point-item:last-child { padding-right: 0; }
.ai-point-inner {
    /* ★背景画像の上に乗るため、半透明の白の不透明度を少しだけ上げて（0.08→0.12）枠線を薄く追加し、カードを立体的に見せます */
    background-color: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(4px); /* ★背景画像をほんのりボカして、上に乗る文字の可読性を究極まで高めるトレンド技 */
    padding: 22px;
    border-radius: 6px;
    height: 100%;
    box-sizing: border-box;
}
.ai-point-h {
    font-size: 15px;
    color: #ff3326; /* ★背景に負けないよう、赤色をほんの少しだけ明るく鮮やかに調整しました */
    margin-top: 0;
    margin-bottom: 10px;
    font-weight: bold;
}
.ai-point-p {
    font-size: 13px;
    margin: 0;
    color: #e2e8f0; /* ★文字の白さを少しだけアップして読みやすく */
    line-height: 1.6;
}

/* ★スマホ用のレスポンシブ対応（横に潰れるのを防ぐ） */
@media (max-width: 768px) {
    .ai-column {
        padding: 25px 20px;
    }
    .ai-points {
        display: block; /* 縦並びに変更 */
    }
    .ai-point-item {
        display: block;
        width: 100%;
        padding: 0;
        margin-bottom: 15px;
    }
    .ai-point-item:last-child {
        margin-bottom: 0;
    }
}


  /* 製品紹介セクション */
        .product-section {
            margin-bottom: 60px;
        }
        .product-grid {
            display: table;
            width: 100%;
            table-layout: fixed;
        }
        .product-cell {
            display: table-cell;
            width: 50%;
            padding: 0 15px;
            vertical-align: top;
        }
        .product-cell:first-child { padding-left: 0; }
        .product-cell:last-child { padding-right: 0; }
        
        .product-card {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    padding: 30px;
    height: 100%;
    border: 1px solid #e2e8f0;
    position: relative; /* ★これが必要 */
    box-sizing: border-box;
}


/* ★新設：画像を右上に絶対配置する枠 */
.product-img-box {
    position: absolute;
    top: 25px;    /* 上からの位置（お好みで調整してください） */
    right: 25px;  /* 右からの位置（お好みで調整してください） */
    width: 160px; /* 画像を表示したい横幅（カードのサイズに合わせて調整） */
    height: auto;
    z-index: 10;  /* 文字の後ろに隠れないように前面に出す */
}

/* ★新設：画像が枠線からはみ出さない設定 */
.product-img-box img {
    width: 100%;
    height: auto;
    display: block;
}

/* ★文字と画像が被るのを防ぐための微調整 */
.product-name, .product-model {
    max-width: 60%; /* ★文字の横幅を60%に制限し、右側の画像エリアに文字が侵入するのを防ぎます */
}


        .product-type {
            font-size: 12px;
            font-weight: bold;
            color: #fff;
            background-color: #333;
            padding: 3px 10px;
            border-radius: 3px;
            display: inline-block;
            margin-bottom: 10px;
        }
        .product-name {
            font-size: 22px;
            font-weight: bold;
            color: #111;
            margin-top: 0;
            margin-bottom: 5px;
        }
        .product-model {
            font-size: 13px;
            color: #718096;
            margin-bottom: 20px;
        }
        .spec-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }
        .spec-table th, .spec-table td {
            padding: 10px;
            font-size: 14px;
            border-bottom: 1px solid #e2e8f0;
            text-align: left;
        }
        .spec-table th {
            background-color: #f8fafc;
            color: #4a5568;
            width: 30%;
            font-weight: bold;
        }
        .spec-table td {
            color: #111;
        }
        .spec-highlight {
            color: #e2231a;
            font-weight: bold;
        }
        .product-note {
            font-size: 12px;
            color: #718096;
            background-color: #f8fafc;
            padding: 10px;
            border-radius: 4px;
            border-left: 3px solid #718096;
        }

        .product-card {
    padding-bottom: 80px; /* 💡ボタンの高さ分の余白を底面に確保します */
}

/* 2. ボタンをカードの最下部に絶対配置する */
.product-btn {
    position: absolute;
    bottom: 25px; /* カードの下端からの位置 */
    left: 25px;   /* カードの左端からの位置 */
    right: 25px;  /* カードの右端からの位置 */
    display: block;
    padding: 14px 0;             /* ボタンの上下の厚み */
    font-size: 15px;             /* 文字サイズ */
    font-weight: bold;           /* 太字 */
    color: #ffffff;              /* 文字色（白） */
    background-color: #333333;   /* ボタン色（PCタイプのバッジに合わせた引き締まった黒） */
    text-align: center;          /* 文字を中央寄せ */
    text-decoration: none;       /* 下線を消す */
    border-radius: 4px;          /* 角を少し丸める */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); /* 軽い影 */
    transition: all 0.3s ease;   /* ホバー時の動きを滑らかに */
    z-index: 15;
}

/* 3. マウスを乗せたとき（ホバー時）の動き */
.conclusion-btn:hover, /* 前のセクションのボタン用（もしあれば） */
.product-btn:hover {
    background-color: #e2231a;   /* 💡ホバーするとメモリのハイライト色（赤）に変化 */
    box-shadow: 0 6px 15px rgba(226, 35, 26, 0.2); /* 赤いほのかな影 */
}

/* --- ▲ ここまで追加 ▲ --- */

@media (max-width: 768px) {
   .product-grid {
    display: block; /* 横並び（テーブル構造）を解除して縦並びに変更 */
    width: 100%;
}

.product-cell {
    display: block; /* 縦並びに変更 */
    width: 100%;    /* 横幅を画面いっぱいに広げる */
    padding: 0;     /* 左右の余白をリセット */
    margin-bottom: 30px; /* カード同士の上下の隙間 */
}

.product-cell:last-child {
    margin-bottom: 0; /* 一番下のカードの余計な下マージンをカット */
}

.product-card {
    padding: 20px; /* スマホ用にカードの内側の余白を少しスマートに */
    position: relative;
}

/* 右上に絶対配置していた画像を、文字の上にスッキリ収まるように再配置 */
.product-img-box {
    position: static; /* 絶対配置を解除して、通常の流れに戻します */
    width: 140px;     /* スマホで見栄えの良いサイズに調整 */
    height: auto;
    margin: 0 auto 15px auto; /* 💡自動で中央寄せにして、下に隙間を作ります */
}

/* 画像と被るのを防ぐためにかけていた文字幅制限（60%）を解除 */
.product-name, .product-model {
    max-width: 100%; /* 横幅いっぱいに使えるように戻します */
    text-align: center; /* 画像に合わせて製品名も中央揃えにすると綺麗です */
}

.product-type {
    display: block;
    width: fit-content;
    margin: 0 auto 10px auto; /* バッジも中央寄せにします */
}

/* スペック表の調整 */
.spec-table {
    width: 100%;
}
.spec-table th {
    width: 25%; /* スマホ画面に合わせて項目の幅を少し狭く調整 */
    font-size: 13px;
}
.spec-table td {
    font-size: 13px;
}


}





        /* アプライドの強みセクション */
        .strength-section {
            background-color: #ffffff;
            border-radius: 8px;
            padding: 35px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
            margin-bottom: 60px;
        }
        .strength-grid {
            display: table;
            width: 100%;
        }
        .strength-item {
            display: table-cell;
            width: 33.333%;
            padding: 0 15px;
            text-align: center;
        }
        .strength-h {
            font-size: 16px;
            color: #e2231a;
            margin-top: 15px;
            margin-bottom: 10px;
            font-weight: bold;
        }
        .strength-p {
            font-size: 13px;
            color: #4a5568;
            margin: 0;
            text-align: left;
        }

        /* CTAエリア */
        .cta-container {
            background-color: #111111;
            color: #ffffff;
            padding: 50px 20px;
            text-align: center;
            border-radius: 8px;
            margin-bottom: 40px;
            border: 1px solid #333;
        }
        .cta-title {
            font-size: 22px;
            font-weight: bold;
            margin-top: 0;
            margin-bottom: 15px;
        }
        .cta-p {
            font-size: 15px;
            margin-bottom: 30px;
            opacity: 0.9;
        }
        .cta-btn {
            display: inline-block;
            background-color: #e2231a;
            color: #ffffff;
            font-size: 18px;
            font-weight: bold;
            padding: 15px 45px;
            border-radius: 30px;
            text-decoration: none;
            box-shadow: 0 4px 10px rgba(0,0,0,0.3);
            transition: background-color 0.2s;
        }
        .cta-btn:hover {
            background-color: #ff332a;
        }

/* ★新設：アイコンを囲む枠（自動で完全に真ん中へ寄せます） */
.strength-icon-box {
    width: 60px;          /* 画面上のアイコンのサイズ（50px〜60pxが最もスマートに見えます） */
    height: 60px;
    margin: 0 auto 15px auto; /* ★左右を「auto」にすることで、赤い見出しの真上に完璧に中心寄せされます */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ★新設：画像が枠を壊さないための設定 */
.strength-icon-box img {
    width: 100%;
    height: auto;
    display: block;
}

/* ★既存のクラスを修正：見出しを強制的に中心寄せに、上の余白をカット */
.strength-h {
    text-align: center;   /* 文字を真ん中寄せに */
    margin-top: 0;        /* アイコンとの隙間を綺麗にするために上の余白をゼロにします */
    margin-bottom: 12px;
}

/* ★既存のクラスを修正：説明文も中央揃えを美しく見せるための調整 */
.strength-p {
    text-align: left;     /* 文章自体は左揃えの方が見やすいのでキープします */
    margin: 0;
    line-height: 1.6;
}


@media (max-width: 768px) {
.strength-grid {
    display: block; /* 横並びの指定を解除して縦並びに変更 */
    width: 100%;
}

.strength-item {
    display: block; /* 縦並びに変更 */
    width: 100%;    /* 横幅を画面いっぱいに広げる */
    padding: 0;     /* 左右の余白をリセット */
    margin-bottom: 40px; /* アイテム同士の上下の隙間（ゆったりめに配置） */
    text-align: center;  /* アイコンと見出しを確実に中央揃えに */
}

.strength-item:last-child {
    margin-bottom: 0; /* 一番下のアイテムの余計な下マージンをカット */
}

.strength-h {
    font-size: 18px;    /* スマホ画面に合わせて文字サイズを少し調整 */
    line-height: 1.4;
    max-width: 280px;   /* 💡文字が横に広がりすぎず、綺麗な位置で改行されるように制限 */
    margin: 0 auto 12px auto; /* 制限した見出しをしっかり中央に寄せます */
}

.strength-p {
    text-align: left;   /* 長文テキストは左揃えが読みやすいので維持 */
    font-size: 14px;    /* スマホで見やすい標準サイズに調整 */
    line-height: 1.6;
    max-width: 450px;   /* テキスト幅を少し絞って画面端にキチキチになるのを防ぐ */
    margin: 0 auto;     /* 中央寄せ */
}

/* ついでにお問い合わせ（CTA）ボタンもスマホ用に最適化 */
.cta-container {
    padding: 30px 20px; /* スマホ用に外側の余白を少しスリムに */
}
.cta-title {
    font-size: 20px;    /* スマホの画面幅に収まる文字サイズに調整 */
    line-height: 1.4;
}
.cta-btn {
    display: block;
    width: 100%;        /* ボタンの横幅を画面いっぱいに広げて押しやすく */
    box-sizing: border-box;
    padding: 15px 10px; /* 上下の厚みをしっかり持たせてタップしやすく */
    font-size: 15px;
    text-align: center;
}
}


        /* フッター */
        footer {
            background-color: #111111;
            color: #ffffff;
            text-align: center;
            padding: 20px;
            font-size: 12px;
            border-top: 1px solid #333;
        }
    </style>