<style>
        :root {
            --primary-color: #1a365d;
            --accent-color: #3182ce;
            --bg-light: #f7fafc;
            --text-dark: #2d3748;
            --white: #ffffff;
            --gold: #d69e2e;
        }
        body {
            font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
            line-height: 1.8;
            color: var(--text-dark);
            margin: 0;
            padding: 0;
        }
        header {
            background: var(--white);
            border-bottom: 2px solid var(--primary-color);
            padding: 15px 5%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: sticky;
            top: 0;
            z-index: 1000;
        }
        .logo { font-size: 20pt; font-weight: bold; color: var(--primary-color); 
        }


    .hero {
    background-image: url('images/image_17774ab7.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 100px 10%;
    text-align: center;
}
.hero-content {
  background-color: rgba(255, 255, 255, 0.7);
    display: block;        /* inline-blockからblockに変更 */
    margin: 0 auto 30px;   /* 左右中央寄せにしつつ、下に余白を作る */
    padding: 40px;
    max-width: 900px;      /* パネルが広がりすぎないよう幅を制限 */
    color: #333;
}


/* 個別の背景は解除する */
.hero h1 {
    font-size: 28pt;
    margin-bottom: 20px;
    background: none; 
    padding: 0;
}

.hero p {
    font-size: 14pt;
    line-height: 1.6;
    background: none;
    padding: 0;
    max-width: 800px;
    margin: 0 auto;
}


        .section { padding: 80px 5%; max-width: 1200px; margin: 0 auto; }
        .section-title {
            text-align: center;
            color: var(--primary-color);
            font-size: 22pt;
            margin-bottom: 50px;
            padding-bottom: 15px;
            border-bottom: 3px solid var(--accent-color);
            display: block;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 40px;
            background: #fff;
        }
        th, td { border: 1px solid #e2e8f0; padding: 18px; text-align: center; }
        th { background-color: var(--bg-light); color: var(--primary-color); font-weight: bold; }
        .highlight-col { background-color: #ebf8ff; font-weight: bold; border: 2px solid var(--accent-color); }
        
        .card-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 40px;
    margin-top: 50px;
    margin-bottom: 80px;
}

        .card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0;
}

        .card:hover { transform: translateY(-5px); }
        .step-num {
            display: inline-block;
            background: var(--primary-color);
            color: white;
            padding: 4px 12px;
            border-radius: 4px;
            font-weight: bold;
            margin-bottom: 15px;
            font-size: 10pt;
        }
        .card h3 { margin: 0 0 15px 0; color: var(--primary-color); font-size: 1.3em; border-left: 4px solid var(--accent-color); padding-left: 10px; }
        .card p { margin: 0; font-size: 10pt; color: #4a5568; text-align: justify; }

        .btn {
    display: inline-block; /* ボタン自体は文字幅にする */
    clear: both;           /* 周り込みを強制解除（念のため） */
    
    /* ここから下はボタンを見えやすくするための推奨設定です */
    background-color: #003366; /* 濃い青などで目立たせる */
    color: #fff;
    padding: 15px 40px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    font-size: 14pt;
    transition: 0.3s;
}

.btn:hover {
    opacity: 0.8; /* マウスを乗せた時に少し透けさせる */
}

        
        .btn-link {
            color: var(--accent-color);
            text-decoration: none;
            font-weight: bold;
            display: inline-block;
            margin-top: 15px;
            border-bottom: 1px solid var(--accent-color);
        }
        .btn-link:hover { color: var(--primary-color); border-color: var(--primary-color); }

      .cta-box {
    /* 背景画像の設定（黒い画像に合わせて文字を白く浮かせる） */
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), 
                      url('images/top_gpu.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    padding: 60px 50px;
   
    text-align: center;
    margin: 60px 0;
    
    /* 文字色の変更 */
    color: #ffffff; 
}

.cta-box h3 { 
    color: #ffffff; /* タイトルも白に変更 */
    font-size: 1.8em; 
    margin-bottom: 25px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5); /* 視認性を上げる影 */
}

.cta-box p { 
    font-size: 1.1em; 
    margin: 0 auto 35px;
    max-width: 800px;
    line-height: 1.8;
    color: #f0f0f0; /* 少しだけグレーを混ぜると落ち着いた高級感が出ます */
}


        .footer { background: var(--primary-color); color: var(--white); padding: 50px; text-align: center; font-size: 10pt; }
        
        @media (max-width: 768px) {
            .hero h1 { font-size: 20pt; }
            .hero p { font-size: 11pt; }
            table { font-size: 9pt; display: block; overflow-x: auto; }
            .section-title { font-size: 18pt; }
        }

      .selection-container {
    display: flex;
    gap: 30px; /* カード同士の隙間 */
    justify-content: center;
    flex-wrap: wrap; /* スマホでは縦に並ぶように */
}

.selection-card {
    flex: 1;
    min-width: 350px; /* これより狭くなると縦に並ぶ */
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    overflow: hidden; /* 画像の角丸を反映させる */
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
}

.card-image {
    width: 100%;
    line-height: 0;
}


.card-content {
    padding: 30px;
    flex-grow: 1;
}

.card-content h3 {
    font-size: 18pt;
    margin-bottom: 20px;
    color: var(--primary-color);
    border-left: 5px solid var(--accent-color);
    padding-left: 15px;
}

.card-content ul {
    margin-bottom: 20px;
    padding-left: 20px;
}

.card-content li {
    margin-bottom: 10px;
    line-height: 1.4;
}

.card-content p {
    font-size: 11pt;
    line-height: 1.6;
    color: #666;
}

.spec-guide-lead {
    max-width: 850px;
    margin: 0 auto 40px;
    text-align: center; /* 中央寄せ */
    line-height: 1.8;
    color: #444;
}

/* 導入部分の2カラム設定 */
.commitment-intro {
    display: flex;
    gap: 40px;
    align-items: center;
    max-width: 1200px;   /* ★ 1000px から 1200px に変更（または 100% にする）★ */
    margin: 0 auto 60px; /* カード群との間隔 */
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}


.intro-image {
    flex: 1;
    line-height: 0; /* 下に隙間ができるのを防ぐ */
}

.intro-image img {
    width: 100%;
    height: 350px;
    object-fit: cover;
}

.intro-text {
    flex: 1;
    padding: 40px;
}

.intro-text h3 {
    font-size: 20pt;
    color: var(--primary-color);
    margin-bottom: 20px;
    border-left: 5px solid var(--accent-color);
    padding-left: 15px;
}

.intro-text p {
    font-size: 12pt;
    line-height: 1.8;
    color: #444;
}

/* カードコンテナ（3カラム想定） */
.card-container {
    display: grid;
    /* 3分割を固定。1fr(等分割)ではなく、最大幅を決めることで2つの時も広がらない */
    grid-template-columns: repeat(3, 1fr); 
    gap: 30px; 
    max-width: 1200px;
    margin: 0 auto;
    /* 2つしかない行でも左寄せにする */
    justify-content: start; 
}

/* カード本体：隙間を消す設定 */
.card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0; /* ← カード全体の余白を0にして画像を端まで広げる */
}

/* 画像の設定：上端にぴったりくっつける */
.card-image {
    width: 100%;
    line-height: 0; /* 画像下の謎の隙間も解消 */
}

.card-image img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    display: block;
}

/* テキストエリアだけに余白を付ける */
.card-body {
    padding: 20px;
}

/* 数字（step-num）が邪魔をしている場合は位置を調整 */
/* 数字（step-num）の位置調整 */
.step-num {
    position: absolute;
    top: 0;
    left: 0;
    background: var(--primary-color);
    color: #fff;
    padding: 4px 12px;
    border-bottom-right-radius: 10px;
    font-size: 0.9rem;
    z-index: 10;
}

/* スマホの時だけ、見やすさのために縦1列にする設定 */
@media (max-width: 900px) {
    .card-container {
        grid-template-columns: 1fr;
    }
}


/* セクション全体の調整 */
.cta-section {
    background-color: #1a365d; /* 現在の濃い青 */
    color: #fff;
    padding: 80px 5%;
    text-align: center;spec-section
}

.cta-section h2 {
    font-size: 24pt;
    margin-bottom: 25px;
    line-height: 1.4;
}

.cta-section p {
    font-size: 13pt;
    margin-bottom: 40px;
    opacity: 0.9;
}

/* ゴールドボタンのデザイン */
.btn-gold {
    display: inline-block;
    background: linear-gradient(135deg, #fee300 0%, #fbf19f 50%, #fee300 100%);
    color: #1a365d !important;
    padding: 20px 50px;
    font-size: 16pt;
    font-weight: bold;
    text-decoration: none;
    border-radius: 25px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    border: none;
}

/* マウスを乗せた時の動き */
.btn-gold:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4);
    filter: brightness(1.1);
}


/* 📱 スマホ（画面幅768px以下）でのボタン調整 */
@media (max-width: 768px) {

    .btn-gold {
        /* 内側の上下左右の余白を狭くして、ボタン自体をスリムにします */
        padding: 12px 30px !important; 
        
        /* 文字の大きさをスマホに最適なサイズ（12pt）に縮小 */
        font-size: 12pt !important;
        
        /* 角丸の丸みをスマホのサイズ感に合わせて少しスマートに */
        border-radius: 20px !important;
        
        /* 画面の左右いっぱいに広がりすぎないよう、程よい最大幅を設定（お好みで調整可） */
        max-width: 90% !important;
        width: auto !important;
    }
}

/* セクション全体の背景設定 */
.spec-section {
    background-color: #f7fafc;
    width: 100%;
    max-width: none !important;
    padding: 80px 0;
}

/* 中身を中央に寄せるコンテナ */
.spec-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 5%;
}

/* 3カラムのカード設定（flex版） */
.spec-container {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 50px;
}

/* カード自体のスタイル（背景を白から薄い青に変更） */
.spec-card {
    flex: 1;
    min-width: 300px;
    background: #ebf8ff;
    padding: 30px;
    border-radius: 10px;
    text-align: left;
}

.spec-card h3 {
    font-size: 1.4rem;
    color: #2d3748;
    margin-bottom: 15px;
    border-bottom: 2px solid #bee3f8;
    padding-bottom: 10px;
}

/* セクション全体の背景（横いっぱい） */
.section.spec-guide {
    background-color: var(--bg-light);
    max-width: none;
    width: 100%;
    padding: 100px 0;
}

/* 中身を中央に寄せるためのコンテナ */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 5%;
}

/* カードコンテナ（余白の調整） */
.card-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 40px;                         /* カード同士の間隔を広げる */
    margin-top: 50px;                  /* 説明文との間隔 */
    margin-bottom: 80px;               /* 下のCTAボックスとの間隔 */
}

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0.95); 
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between; /* 左右の端にきれいに配分 */
    align-items: center;
    padding: 15px 5%;
    box-sizing: border-box;
}

.logo {
    font-size: 16pt; /* スマホでも見劣りしないよう少しコンパクトに調整 */
    font-weight: bold;
    color: var(--primary-color);
    white-space: nowrap; /* ロゴの途中の変な改行を絶対に防ぐ */
}

/* 電話番号をまとめる横並びの枠 */
.header-tel-group {
    display: flex;
    gap: 15px;
}

.tel-item {
    font-weight: bold;
    color: var(--primary-color);
    font-size: 10pt;
    white-space: nowrap;
}

/* 📱 スマホ（画面幅768px以下）用の特効薬設定 */
@media (max-width: 768px) {
    header {
        flex-direction: column; /* ロゴと電話番号を上下2段に分ける */
        padding: 10px 5%;
        gap: 8px;
    }
    
    .logo {
        font-size: 13pt; /* スマホ画面に合わせて読みやすい大きさに */
    }
    
    .header-tel-group {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr; /* 電話番号を2系列×2列の綺麗なグリッドに */
        gap: 4px 10px;
        text-align: center;
    }
    
    .tel-item {
        font-size: 8.5pt; /* スマホの横幅にすっぽり収まる文字サイズ */
        background: #f7fafc; /* 視認性を上げるために薄いグレーの背景を敷く */
        padding: 4px;
        border-radius: 4px;
    }
    
    /* ヘッダーの縦幅が少し広がるため、メインコンテンツの被り（余白）を微調整 */
    body {
        padding-top: 95px !important;
    }
}

/* ヘッダーが固定された分、メインコンテンツの上が隠れないように余白を作る */
body {
    padding-top: 80px;
}

.cta-box {
    /* 背景画像の設定 */
    background-image: linear-gradient(rgba(10, 29, 55, 0.65), rgba(10, 29, 55, 0.65)), 
                      url('images/top_gpu.png');
    
    /* ★ 横伸びを強制的に直す設定 */
    background-size: 100% auto;   /* 画像の横幅を100%にしつつ、縦幅は自動で比率を保つ */
    background-position: center;
    background-repeat: no-repeat;
    
    /* ★ 縦方向のスペースをしっかり広げて潰れを防ぐ */
    padding: 100px 0 !important;  
    min-height: 450px;            /* 縦幅の最低サイズを確保する */
    
    text-align: center;
    max-width: none !important;
    width: 100% !important;
}

/* ★完璧に歪みを無くしたGPU案内セクション（背景デザイン） */
.gpu-cta-section {
    /* ★ 左右の端を「透明（rgba...0）」から「濃いネイビー」へじわーっと変化させ、中央だけ暗い黒にする多層グラデーション */
    background-image: 
        linear-gradient(to right, #0a1d37 0%, rgba(10, 29, 55, 0.4) 20%, rgba(10, 29, 55, 0.4) 80%, #0a1d37 100%),
        linear-gradient(rgba(10, 29, 55, 0.5), rgba(10, 29, 55, 0.5)), 
        url('images/top_gpu.png');
    
    /* 比率はバッチリなのでそのままキープ */
    background-size: 50% auto !important; 
    background-position: center center !important;
    background-repeat: no-repeat !important;
    
    /* 背景色をグラデーションの端の色と完全に一致させる */
    background-color: #0a1d37 !important; 
    
    /* 上下の余白 */
    padding: 100px 0 !important;
    margin: 60px 0 !important;
    width: 100% !important;
    max-width: none !important;
    text-align: center !important;
    color: #ffffff !important;
}

.gpu-cta-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: border-box;
}

 
    color: #ffffff !important;
    font-size: 1.8em; 
    margin-top: 0;
    margin-bottom: 25px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.6);
}

.gpu-cta-section p { 
    font-size: 1.1em; 
    margin: 0 auto 40px;
    max-width: 850px;
    line-height: 1.8;
    color: #f0f0f0 !important;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}


/* ===================================================
   📱 スマホ・タブレット（画面幅900px以下）の完全最適化
   =================================================== */
@media (max-width: 900px) {
    /* 1. メインビジュアル（Heroエリア）全体のサイズ調整 */
    .hero {
        padding: 40px 5% !important;
    }
    
    /* 白い半透明パネルの余白を削って、文字が横に広がるスペースを確保 */
    .hero-content {
        padding: 25px 15px !important;
        margin: 0 auto 20px !important;
        max-width: 100% !important;
    }
    
    /* 「その業務、デスクトップPCなら〜」のタイトルを最適な大きさに縮小 */
    .hero h1 {
        font-size: 18pt !important; /* 28ptから18ptへ落として1行の文字数を適正に */
        line-height: 1.4 !important;
        margin-bottom: 15px !important;
    }
    
    /* 説明文のフォントサイズを縮小し、ギチギチ感を解消 */
    .hero p {
        font-size: 10.5pt !important; /* 14ptから10.5ptへ */
        line-height: 1.7 !important;
    }
    
    /* 「無料相談・お見積り依頼」ボタンをスマホでも押しやすく */
    .hero .btn {
        padding: 12px 30px !important;
        font-size: 12pt !important;
        width: 90% !important;
        box-sizing: border-box !important;
    }

    /* 2. その下の解説セクション（「デスクトップ」か「ノート」か）の調整 */
    .section {
        padding: 40px 5% !important; /* 上下の余白が広すぎるのをコンパクトに */
    }
    
    /* セクションタイトルの文字サイズをスマホ用に縮小 */
    .section-title {
        font-size: 16pt !important; /* 22ptから16ptへ */
        margin-bottom: 30px !important;
        padding-bottom: 10px !important;
    }
    
    /* リード文の文字サイズと余白をスマートに */
    .section > p {
        font-size: 10.5pt !important;
        line-height: 1.7 !important;
        margin-bottom: 20px !important;
        text-align: justify !important; /* 左右の端を揃えて美しく */
    }

    /* 3. 比較テーブルがスマホの画面からはみ出さないように横スクロール化 */
    table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important; /* 横スクロールを可能にする */
        white-space: nowrap !important; /* セル内での意図しない自動改行を防止 */
        -webkit-overflow-scrolling: touch; /* iPhoneでのスクロールを滑らかに */
    }
    
    th, td {
        padding: 12px 10px !important; /* スマホ用にセルの余白を少しタイトに */
        font-size: 9.5pt !important;
    }
}

/* 📱 スマホ（画面幅900px以下）のレイアウト調整 */
@media (max-width: 900px) {

    /* 2カラムの横並びを、上から下の縦並びに強制変更 */
    .commitment-intro {
        flex-direction: column !important; /* 横並びから縦並びに切り替え */
        gap: 0 !important; /* 縦並びの隙間をゼロにして画像を上端に密着 */
        margin-bottom: 40px !important;
        max-width: 100% !important;
    }

    /* 上側にくる画像エリアの横幅をいっぱいに広げる */
    .intro-image {
        width: 100% !important;
        flex: none !important;
    }

    /* スマホ画面に合わせて画像の高さを少しスリム（220px）に調整 */
    .intro-image img {
        height: 220px !important; /* 高さをスマホ用に最適化 */
        width: 100% !important;
        object-fit: cover !important;
    }

    /* 下側にくるテキストエリアの調整 */
    .intro-text {
        width: 100% !important;
        flex: none !important;
        padding: 30px 20px !important; /* スマホ用に余白を少しスリムに */
        box-sizing: border-box !important;
    }

    /* 「高品質を、国内自社工場から〜」のタイトルを縮小 */
    .intro-text h3 {
        font-size: 16pt !important; /* 20ptから16ptへ縮小して変な改行を防ぐ */
        line-height: 1.4 !important;
        margin-bottom: 15px !important;
    }

    /* 本文の文字サイズと行間をスッキリ調整 */
    .intro-text p {
        font-size: 10.5pt !important; /* 12ptから10.5ptへ */
        line-height: 1.7 !important;
        text-align: justify !important; /* 左右の端を綺麗に揃える */
    }
}


    </style>