@charset "UTF-8";

/* 全体のリセットと共通スタイル */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
}

body {
    /* 【修正】全体のベース背景を「白」にし、ヒーローエリアだけを黒く囲うアプローチに変更します */
    background-color: #ffffff;
    color: #1a1a1a;
}

/* ==========================================================================
   ヒーローセクション
   ========================================================================== */

.hero-container-fluid {
    width: 100%;
    position: relative;
    overflow: hidden;
    background-color: #000000;
    color: #ffffff;
    z-index: 1; /* 👈 アプライド様のヘッダーメニュー（青い帯）の下に潜り込ませる */
    
    /* 🛠️【新規追加】ヘッダーメニューの高さ分（約140px）だけ、エリア全体を下へ押し下げて被りを解消します */
    margin-top: 140px; 
}

/* 背景：サーバールーム画像 */
.hero-bg {
    width: 100%;
    height: 700px; /* 👈 【修正】高さを520pxから700pxに大幅に広げ、文字が上下に切れるのを完全に防ぎます */
    background-image: url('images-new/jetson_heroimage_pc.png');
    background-size: cover;
    background-position: center right;
    display: flex;
    align-items: center;
    position: relative;
}

/* コンテンツエリア：テキストとパーツ画像を最大幅1400px内に収める */
.hero-inner-content {
    width: 100%;
    max-width: 1400px;
    height: 100%; /* 【修正】親要素の高さ（600px）いっぱいに広げる */
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 2;
} cleavage

/* 左側：テキストエリア */
.hero-text-side {
    width: 55%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-shadow: 0 2px 15px rgba(0, 0, 0, 0.9);
    
    /* 🛠️【新規追加】テキストエリア全体を画像より手前に引き上げます */
    position: relative;
    z-index: 15; /* 👈 画像エリア（z-index: 10）よりも大きい数字にします */
}

/* 【修正】文字色を「#ffffff（真っ白）」に強制指定して、黒文字化を防ぎます */
.hero-sub-title {
    font-size: 3.6rem;
    font-weight: bold;
    margin-bottom: 10px;
    letter-spacing: 0.05em;
    color: #ffffff !important; 
}

.hero-main-title {
    font-size: 7.0rem;
    font-weight: 900;
    color: #76b900 !important; /* NVIDIAグリーンを維持 */
    line-height: 1.05;
    margin-bottom: 10px;
    letter-spacing: 0.02em;
}

.hero-lead-title {
    font-size: 4.4rem;
    font-weight: bold;
    margin-bottom: 25px;
    color: #ffffff !important; 
}

.hero-description {
    font-size: 2.2rem;
    font-weight: bold;
    margin-bottom: 40px;
    color: #ffffff !important; 
}

/* 下部の3つのグリーンボタン（タグ） */
.hero-tags {
    display: flex;
    gap: 16px;
    
    /* 🛠️【徹底修正】ボタンの並びだけをピンポイントで最前面へ浮かせます */
    position: relative;
    z-index: 20 !important; /* 👈 画像（z-index: 10）を確実に超える数値を指定 */
}

/* 【修正】PCでの文字サイズを2倍に変更、あわせて余白も調整 */
.hero-tag {
    background-color: #76b900;
    color: #ffffff;
    padding: 12px 28px;
    border-radius: 6px;
    font-size: 1.9rem; /* 0.95rem → 1.9rem */
    font-weight: bold;
    white-space: nowrap;
}

/* 右側：パーツ画像エリア */
.hero-image-side {
    position: absolute;
    
    /* 🛠️【ここを変更！】40px から マイナス（-40px や -80px）に変更します */
    right: -40px;      /* 👈 マイナスの値を大きくするほど、画面の右端へ寄っていきます */
    
    bottom: 0;        
    width: 40%;       
    height: 90%;      
    display: flex;
    justify-content: flex-end; 
    align-items: flex-end;    
    pointer-events: none; 
    z-index: 10;      
}

/* パーツ画像（筐体）そのもののサイズ設定 */
.hero-device-img {
    width: auto;
    height: auto;
    max-width: 100%;   
    max-height: 100%;  
    object-fit: contain;
    display: block !important; /* 👈 【新規追加】テーマの非表示設定（display:none）などが干渉して消えるのを強制的に防ぎます */
}

/* ヒーロー以降のメインコンテンツ（最大幅1400px・中央寄せ） */
.main-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 60px 40px;
}


/* 📱 スマートフォン用のレスポンシブ対応（画面幅768px以下） */
@media (max-width: 768px) {
    /* ヘッダーとの被り解消用マージンをスマホ向けに少し縮小 */
    .hero-container-fluid {
        margin-top: 100px; 
    }

    .hero-bg {
        background-image: url('images-new/jetson_heroimage_sp.png');
        height: auto;
        padding: 40px 0;
    }

    .hero-inner-content {
        height: auto;
        flex-direction: column;
        padding: 0 20px;
        text-align: center;
    }

    /* スマホ時はテキストエリアの重なり順をリセット */
    .hero-text-side {
        width: 100%;
        margin-bottom: 30px;
        position: relative;
        z-index: 1;
    }

    /* スマホ版の文字サイズ */
    .hero-sub-title { font-size: 1.3rem; margin-bottom: 5px; }
    .hero-main-title { font-size: 2.6rem; margin-bottom: 5px; }
    .hero-lead-title { font-size: 1.8rem; margin-bottom: 15px; }
    .hero-description { font-size: 0.95rem; margin-bottom: 20px; }

    /* 3つのグリーンボタン（タグ）をスマホでも最前面に */
    .hero-tags {
        justify-content: center;
        flex-wrap: wrap;
        gap: 8px;
        position: relative;
        z-index: 20 !important;
    }

    .hero-tag {
        font-size: 0.85rem;
        padding: 6px 12px;
        border-radius: 4px;
    }

    /* 🛠️【徹底修正】スマホ時は絶対配置（浮かせる設定）を解除し、文字の下に綺麗に回り込ませます */
    .hero-image-side {
        position: static !important; /* 👈 absolute（絶対配置）を強制解除して縦並びに */
        width: 100% !important;
        height: auto !important;
        justify-content: center !important;
        align-items: center !important;
        margin-top: 20px;
        z-index: 5 !important;       /* 👈 ボタン（z-index: 20）より下のレイヤーに下げます */
    }

    .hero-device-img {
        max-width: 90% !important;
        max-height: 250px !important;
        transform: none !important;
    }


    /* 🛠️【徹底修正】「選ばれる理由」の不自然な文字切れ（改行）を直します */
    .main-content {
        padding: 50px 15px;
    }

    .section-header h2 {
        font-size: 1.5rem !important; /* 👈 横幅の狭いスマホ画面でも『由』がはみ出さないサイズに調整 */
        white-space: nowrap;          /* 👈 絶対に途中で改行させない指定 */
    }

    .section-header .section-lead {
        font-size: 0.9rem;
        margin-top: 15px;
        padding: 0 5px;
        text-align: left;
    }

    /* 選ばれる理由の4つのカードを縦1列に */
    .reasons-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .reason-card {
        padding: 30px 20px;
    }

    .reason-icon {
        width: 80px;
        height: 80px;
        margin-bottom: 20px;
    }

    .reason-card h3 { font-size: 1.2rem; }
    .reason-card p { font-size: 0.9rem; }
}
/* ==========================================================================
   メインコンテンツ（選ばれる理由セクション）
   ========================================================================== */

/* 【修正】メインコンテンツ全体の背景を「白」にし、文字を「黒」に反転 */
.main-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 100px 40px;
    background-color: #ffffff; /* 背景：白 */
    color: #1a1a1a;            /* 文字：濃いグレー（読みやすさ重視） */
}

/* セクションのヘッダー部分（タイトルと説明文） */
.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-header h2 {
    font-size: 2.8rem;
    font-weight: bold;
    color: #1a1a1a;
    position: relative;
    padding-bottom: 15px;
    display: inline-block;
}

/* タイトルの下線（NVIDIAグリーンをさりげなく配置） */
.section-header h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background-color: #76b900;
}

/* 追加した細い説明文（リード文） */
.section-header .section-lead {
    font-size: 1.2rem;
    color: #666666; /* 少し薄めの文字色 */
    margin-top: 20px;
    font-weight: 500;
    letter-spacing: 0.03em;
}

/* 4つのカードを横並びにするグリッドレイアウト */
.reasons-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4カラム均等割り */
    gap: 30px;
}

/* 特徴カード単体のスタイル */
.reason-card {
    text-align: center;
    background-color: #f9f9f9; /* カード背景を極めて薄いグレーにして上品に浮き立たせる */
    padding: 40px 25px;
    border-radius: 8px;
    border: 1px solid #eeeeee;
    transition: all 0.3s ease;
}

/* マウスを乗せたときに少し浮かび上がる演出 */
.reason-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    border-color: #76b900;
}

/* アイコン画像枠 */
.reason-icon {
    width: 100px;
    height: 100px;
    margin: 0 auto 25px auto;
    border-radius: 50%;
    overflow: hidden; /* 正円にくり抜く */
}

.reason-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.reason-card h3 {
    font-size: 1.4rem;
    font-weight: bold;
    color: #1a1a1a;
    margin-bottom: 15px;
}

.reason-card p {
    font-size: 1.0rem;
    color: #555555;
    line-height: 1.6;
    text-align: left; /* 説明文は左寄せにして読みやすく */
}

/* 📱 スマートフォン用のレスポンシブ上書き設定 */
@media (max-width: 768px) {
    .main-content {
        padding: 60px 20px;
    }

    .section-header {
        margin-bottom: 40px;
    }

    .section-header h2 {
        font-size: 1.8rem;
    }

    .section-header .section-lead {
        font-size: 0.95rem;
        margin-top: 15px;
        padding: 0 10px;
        text-align: left; /* スマホでは左寄せが見やすくなります */
    }

    /* スマホ時は4枚のカードを縦1列に綺麗に並べる */
    .reasons-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .reason-card {
        padding: 30px 20px;
    }

    .reason-icon {
        width: 80px;
        height: 80px;
        margin-bottom: 20px;
    }

    .reason-card h3 {
        font-size: 1.2rem;
    }

    .reason-card p {
        font-size: 0.9rem;
    }
}
/* ==========================================================================
   特徴比較セクション（テーブルレイアウト）
   ========================================================================== */

.comparison-section {
    margin-top: 100px;
    padding-top: 60px;
    border-top: 1px solid #eeeeee;
}

/* 【修正】表の周りをぐるっと1周囲うグレーの境界線を追加して、右切れを解消 */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 20px;
    border: 1px solid #dddddd; /* 👈 表全体のきれいな外枠 */
    border-radius: 4px;        /* さりげなく角を丸くしてモダンに */
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 950px;
    table-layout: fixed;
}

/* 各列の横幅の割り振り */
.comparison-table th:nth-child(1),
.comparison-table td:nth-child(1) { width: 16%; }
.comparison-table th:nth-child(2),
.comparison-table td:nth-child(2) { width: 28%; }
.comparison-table th:nth-child(3),
.comparison-table td:nth-child(3) { width: 28%; }
.comparison-table th:nth-child(4),
.comparison-table td:nth-child(4) { width: 28%; }

/* 上部ヘッダー（機種名エリア） */
.comparison-table th {
    background-color: #76b900;
    color: #ffffff;
    padding: 20px 15px;
    vertical-align: middle;
    text-align: center;
    border-right: 1px solid #ffffff;
}

/* 【修正】一番右のヘッダーの右線は、外枠と重なるので、内側の白線を不要に */
.comparison-table th:last-child {
    border-right: none;
}

/* 左上の空セル */
.comparison-table th.th-empty {
    background-color: #ffffff;
    border-right: none;
}

.comparison-table .model-name {
    display: block;
    font-size: 1.4rem;
    font-weight: bold;
    letter-spacing: 0.02em;
}

.comparison-table .model-sub {
    display: block;
    font-size: 1.0rem;
    font-weight: 500;
    margin-top: 4px;
    opacity: 0.9;
}

/* 各セルの基本ルール */
.comparison-table td {
    padding: 25px 20px;
    font-size: 1.0rem;
    line-height: 1.6;
    color: #1a1a1a;
    border-bottom: 1px solid #dddddd;
    border-right: 1px solid #eeeeee; /* 👈 内側の縦の区切り線 */
    vertical-align: top;
    background-color: #ffffff;
}

/* 【修正】一番右のセルにも、消さずにきちんと右枠線が残るように修正 */
.comparison-table td:last-child {
    border-right: 1px solid #dddddd;
}

/* 左端の項目名ヘッダー：濃紺 */
.comparison-table td.row-label {
    background-color: #002060;
    color: #ffffff;
    font-weight: bold;
    font-size: 1.1rem;
    text-align: center;
    vertical-align: middle;
    border-bottom: 1px solid #ffffff;
    border-right: none;
}

.comparison-table tr:last-child td.row-label {
    border-bottom: none; /* 外枠の線と被るため不要に */
}

/* テキスト内の強調部分 */
.comparison-table td strong {
    color: #000000;
    display: inline-block;
    margin-bottom: 6px;
}

/* 📱 スマートフォン用のレスポンシブ微調整 */
@media (max-width: 768px) {
    .comparison-section {
        margin-top: 60px;
        padding-top: 40px;
    }
    .table-responsive {
        padding-bottom: 0;
    }
}
/* ==========================================================================
   導入イメージセクション
   ========================================================================== */

.intro-image-section {
    margin-top: 100px;
    padding-top: 60px;
    border-top: 1px solid #eeeeee;
}

/* 4つのカードを美しく横並びにする（最大1400px幅に対応） */
.intro-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

/* チラシの角丸カードを美しく再現 */
.intro-card {
    background-color: #ffffff;
    border: 2px solid #002060; /* チラシの濃紺の枠線 */
    border-radius: 12px;       /* 綺麗な角丸 */
    overflow: hidden;          /* 中身が角丸からはみ出さないように */
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

/* カード上部：濃紺のヘッダー */
.card-header-blue {
    background-color: #002060;
    color: #ffffff;
    padding: 15px 10px;
    text-align: center;
    min-height: 110px; /* テキスト量による高さのガタつきを統一 */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.card-header-blue h3 {
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 6px;
    letter-spacing: 0.02em;
}

.card-header-blue p {
    font-size: 0.85rem;
    line-height: 1.4;
    opacity: 0.9;
}

/* カード中央：メインの画像エリア */
.card-img-box {
    width: 100%;
    height: 220px; /* 縦横比をきれいに保つ高さ */
    overflow: hidden;
}

.card-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像を崩さずに枠いっぱいに収める */
    transition: transform 0.3s ease;
}

/* マウスホバー時に画像が少し拡大するWebならではの演出 */
.intro-card:hover .card-img-box img {
    transform: scale(1.05);
}

/* カード下部：濃紺のフッター */
.card-footer-blue {
    background-color: #002060;
    color: #ffffff;
    padding: 15px 10px;
    text-align: center;
    margin-top: auto; /* 上の画像が伸びても必ず一番下に配置 */
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-footer-blue p {
    font-size: 0.95rem;
    font-weight: bold;
    line-height: 1.5;
    letter-spacing: 0.03em;
}

/* 📱 スマートフォン用のレスポンシブ微調整（画面幅768px以下） */
@media (max-width: 768px) {
    .intro-image-section {
        margin-top: 60px;
        padding-top: 40px;
    }

    /* スマホでは縦1列（または画面幅に応じて綺麗に配置） */
    .intro-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .card-header-blue {
        min-height: auto;
        padding: 20px 15px;
    }

    .card-img-box {
        height: 200px;
    }

    .card-footer-blue {
        min-height: auto;
        padding: 15px 15px;
    }
}
/* ==========================================================================
   CVエリア（お問い合わせボタン）
   ========================================================================== */

.cta-section {
    margin-top: 80px;
    margin-bottom: 40px;
    padding: 0 20px;
}

/* 枠全体を少し未来的なグラデーションにして目を引くデザインに */
.cta-box {
    background: linear-gradient(135deg, #0a1128 0%, #002060 100%);
    border: 2px solid #76b900; /* NVIDIAグリーンで縁取りして目立たせる */
    border-radius: 12px;
    padding: 60px 40px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(118, 185, 0, 0.15); /* グリーンの光彩を薄く敷く */
}

.cta-sub {
    color: #76b900; /* NVIDIAグリーン */
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 10px;
    letter-spacing: 0.03em;
}

.cta-title {
    color: #ffffff;
    font-size: 2.2rem;
    font-weight: bold;
    margin-bottom: 35px;
    letter-spacing: 0.02em;
}

/* 💡 クリック率を高める、立体感のある大きなボタン */
.cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #76b900; /* ベースはNVIDIAグリーン */
    color: #ffffff;
    font-size: 1.6rem;
    font-weight: bold;
    text-decoration: none;
    padding: 22px 60px;
    border-radius: 50px; /* 丸みのある押しやすいボタン */
    box-shadow: 0 8px 0 #5a8e00, 0 15px 25px rgba(0,0,0,0.3); /* 立体的な影 */
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
}

/* ボタンの中の矢印アイコン（演出） */
.cta-button::after {
    content: '▶';
    font-size: 1.1rem;
    margin-left: 15px;
    transition: transform 0.2s ease;
}

/* マウスを乗せたときに沈み込む、リアルなボタンのクリック感 */
.cta-button:hover {
    transform: translateY(3px);
    box-shadow: 0 5px 0 #5a8e00, 0 10px 15px rgba(0,0,0,0.3);
    background-color: #83cc00; /* 少し明るくなって反応 */
}

.cta-button:hover::after {
    transform: translateX(4px); /* 矢印が右にピコッと動く */
}

.cta-note {
    color: #cccccc;
    font-size: 0.95rem;
    margin-top: 25px;
}

/* 📱 スマートフォン用のレスポンシブ微調整 */
@media (max-width: 768px) {
    .cta-section {
        margin-top: 50px;
    }

    .cta-box {
        padding: 40px 20px;
    }

    .cta-sub {
        font-size: 0.95rem;
    }

    .cta-title {
        font-size: 1.4rem;
        margin-bottom: 25px;
    }

    .cta-button {
        font-size: 1.15rem;
        padding: 16px 25px;
        width: 100%; /* スマホでは画面いっぱいに広げて押しやすく */
    }

    .cta-button::after {
        font-size: 0.85rem;
        margin-left: 8px;
    }

    .cta-note {
        font-size: 0.8rem;
        margin-top: 20px;
    }
}
/* ==========================================================================
   お取り扱い商品セクション & シンプルCTA
   ========================================================================== */

.products-section {
    margin-top: 100px;
    padding-top: 60px;
    border-top: 1px solid #eeeeee;
}

/* 3カラムのグリッド配置（1400pxの中で美しく並びます） */
.products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 60px;
}

/* チラシの黒枠の製品カードを表現 */
.product-card {
    background-color: #ffffff;
    border: 2px solid #1a1a1a;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

/* カード上部：明るいNVIDIAグリーンのヘッダー */
.product-card-header {
    background-color: #76b900;
    color: #ffffff;
    padding: 15px;
    text-align: center;
}

.product-card-header .brand-label {
    display: block;
    font-size: 1.0rem;
    font-weight: bold;
    letter-spacing: 0.1em;
}

.product-card-header .product-title {
    font-size: 1.5rem;
    font-weight: bold;
    margin-top: 2px;
}

/* カードの中身エリア */
.product-body {
    padding: 25px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* 3つの緑色タグの並び */
.spec-tags {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 25px;
}

.spec-tag-green {
    background-color: #76b900;
    color: #ffffff;
    padding: 8px 15px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.spec-tag-green strong {
    font-size: 1.3rem;
    font-weight: 900;
}

.spec-tag-green small {
    font-size: 0.8rem;
    font-weight: bold;
    text-align: right;
}

/* 商品写真エリア */
.product-img-box {
    width: 100%;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
}

.product-img-box img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* 製品仕様テキスト（■マークを再現） */
.spec-details h4 {
    font-size: 1.2rem;
    font-weight: bold;
    color: #000000;
    margin-bottom: 12px;
    border-bottom: 1px solid #1a1a1a;
    padding-bottom: 5px;
}

.spec-details ul {
    list-style: none; /* デフォルトの丸ポッチを消す */
}

.spec-item {
    font-size: 0.95rem;
    line-height: 1.5;
    color: #333333;
    margin-bottom: 10px;
    position: relative;
    padding-left: 18px; /* ■のぶんだけ左に余白をあける */
}

/* 擬似要素を使ってチラシのきれいな黒い「■」を再現 */
.spec-item::before {
    content: '■';
    position: absolute;
    left: 0;
    top: 2px;
    font-size: 0.8rem;
    color: #1a1a1a;
}

.spec-item small {
    font-size: 0.85rem;
    color: #666666;
}

/* カード下部：枠線入りの製品名テキスト */
.product-card-footer {
    border-top: 2px solid #1a1a1a;
    padding: 15px;
    background-color: #fafafa;
}

.footer-brand {
    font-size: 0.9rem;
    font-weight: bold;
    color: #1a1a1a;
}

.footer-name {
    font-size: 1.1rem;
    font-weight: bold;
    color: #000000;
    margin-top: 2px;
}

/* 💡 【新規追加】控えめでシンプルな問い合わせボタンの装飾 */
.simple-cta-container {
    text-align: center;
    margin-top: 50px;
}

.simple-cta-button {
    display: inline-block;
    background-color: #1a1a1a; /* 控えめな黒ベース */
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: bold;
    text-decoration: none;
    padding: 16px 50px;
    border-radius: 4px;
    border: 2px solid #1a1a1a;
    transition: all 0.25s ease;
    cursor: pointer;
}

/* マウスホバー時に白黒が反転する上品な演出 */
.simple-cta-button:hover {
    background-color: #ffffff;
    color: #1a1a1a;
}

/* 📱 スマートフォン用のレスポンシブ微調整（画面幅768px以下） */
@media (max-width: 768px) {
    .products-grid {
        grid-template-columns: 1fr; /* スマホでは縦1列に */
        gap: 25px;
    }

    .product-card-header .product-title {
        font-size: 1.3rem;
    }

    .spec-tag-green strong {
        font-size: 1.1rem;
    }

    .spec-tag-green small {
        font-size: 0.75rem;
    }

    .simple-cta-button {
        font-size: 1.1rem;
        padding: 14px 30px;
        width: 100%; /* スマホでは押しやすいよう横幅いっぱいに */
    }
}
/* ==========================================================================
   設定ソリューションサービス対象ツールセクション
   ========================================================================== */

.solutions-section {
    margin-top: 100px;
    padding-top: 40px;
}

/* チラシの鮮やかなグリーンの帯タイトルを再現 */
.solutions-banner {
    background-color: #76b900;
    padding: 18px 20px;
    text-align: center;
    border-radius: 4px;
    margin-bottom: 20px;
}

.solutions-banner h2 {
    color: #fff !important;
    font-size: 1.8rem;
    font-weight: bold;
    letter-spacing: 0.03em;
    border: none;
    padding: 0;
    margin: 0;
}

/* 追加した補足説明文（リード文） */
.solutions-lead {
    font-size: 1.15rem;
    color: #444444;
    line-height: 1.6;
    margin-bottom: 40px;
    padding: 0 10px;
    text-align: center;
}

/* 3列×2行のきれいな格子状レイアウト */
.solutions-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3列均等 */
    gap: 1px; /* 縦横の細いグレー線を表現するための隙間 */
    background-color: #dddddd; /* 格子線の色 */
    border: 1px solid #dddddd; /* 外枠の線 */
}

/* 各ツール単体のボックス */
.solution-item {
    background-color: #ffffff;
    padding: 25px 20px;
    display: flex;
    align-items: center; /* 画像とテキストを縦方向中央揃え */
    gap: 20px;           /* 画像とテキストの間の余白 */
}

/* ロゴ・イメージ画像枠 */
.solution-img-box {
    width: 130px;
    height: 80px;
    flex-shrink: 0; /* 画像が文字に押されて縮まないように固定 */
    display: flex;
    align-items: center;
    justify-content: center;
}

.solution-img-box img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* ロゴの比率を崩さずに綺麗に収める */
}

/* テキストエリア */
.solution-text-box {
    flex: 1;
}

.solution-text-box h3 {
    font-size: 1.3rem;
    font-weight: bold;
    color: #000000;
    margin-bottom: 8px;
}

.solution-text-box p {
    font-size: 0.95rem;
    line-height: 1.5;
    color: #333333;
}

/* 📱 スマートフォン用のレスポンシブ微調整（画面幅768px以下） */
@media (max-width: 768px) {
    .solutions-section {
        margin-top: 60px;
    }

    .solutions-banner {
        padding: 12px 10px;
    }

    .solutions-banner h2 {
        font-size: 1.2rem;
    }

    .solutions-lead {
        font-size: 0.95rem;
        text-align: left;
        margin-bottom: 25px;
    }

    /* スマホでは縦1列に並べる */
    .solutions-grid {
        grid-template-columns: 1fr;
        gap: 10px;
        background-color: transparent; /* スマホ時は格子線を消してすっきり */
        border: none;
    }

    .solution-item {
        border: 1px solid #dddddd;
        border-radius: 8px;
        padding: 20px 15px;
        flex-direction: row; /* 横並びのままコンパクトに */
        gap: 15px;
    }

    .solution-img-box {
        width: 90px;
        height: 60px;
    }

    .solution-text-box h3 {
        font-size: 1.1rem;
        margin-bottom: 4px;
    }

    .solution-text-box p {
        font-size: 0.85rem;
    }
}

/* ==========================================================================
   インストール代行・構築サービス価格セクション
   ========================================================================== */

.price-service-section {
    margin-top: 100px;
    padding-top: 40px;
}

/* ご指定のNVIDIAグリーン（#76b900）に統一したヘッダーバー */
.service-banner {
    background-color: #76b900;
    padding: 20px;
    text-align: center;
    border-radius: 4px;
    margin-bottom: 20px;
}

.service-banner h2 {
    color: #ffffff !important;
    font-size: 2.0rem;
    font-weight: bold;
    letter-spacing: 0.03em;
    border: none;
    padding: 0;
    margin: 0;
}

/* 追加した補足説明文 */
.service-lead {
    font-size: 1.15rem;
    color: #444444;
    line-height: 1.6;
    margin-bottom: 40px;
    padding: 0 10px;
    text-align: center;
}

/* 3列×2段のグリッド配置（最大1400px幅に対応） */
.service-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* 基本の白カード（上品な薄い影と枠線をチラシ通りに再現） */
.service-card {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 30px 25px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
}

.service-card h3 {
    font-size: 1.5rem;
    font-weight: bold;
    color: #000000;
    margin-bottom: 15px;
    letter-spacing: 0.02em;
}

/* 箇条書き（中黒のドット）の調整 */
.service-card ul {
    list-style: none; /* 標準の丸を消してチラシのスタイルへ */
}

.service-card li {
    font-size: 1.1rem;
    color: #333333;
    line-height: 1.6;
    margin-bottom: 8px;
    position: relative;
    padding-left: 15px;
}

/* チラシ同様、項目名の前に綺麗に「・」を整列させる指定 */
.service-card li::before {
    content: '・';
    position: absolute;
    left: 0;
    color: #333333;
}

.service-card li:last-child {
    margin-bottom: 0;
}

/* 右下の黄緑色のアクセン卜カード特別装飾 */
.service-card.accent-card {
    background-color: #b3de69; /* チラシに合わせた明るく映える黄緑色 */
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.service-card.accent-card p {
    font-size: 1.3rem;
    font-weight: bold;
    color: #000000;
    line-height: 1.6;
}

/* 📱 スマートフォン用のレスポンシブ微調整（画面幅768px以下） */
@media (max-width: 768px) {
    .price-service-section {
        margin-top: 60px;
    }

    .service-banner {
        padding: 15px 10px;
    }

    .service-banner h2 {
        font-size: 1.25rem;
        line-height: 1.4;
    }

    .service-lead {
        font-size: 0.95rem;
        text-align: left;
        margin-bottom: 25px;
    }

    /* スマホでは縦1列に綺麗に積み上げる */
    .service-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .service-card {
        padding: 25px 20px;
    }

    .service-card h3 {
        font-size: 1.3rem;
    }

    .service-card li {
        font-size: 1.0rem;
    }

    .service-card.accent-card {
        padding: 30px 20px;
    }

    .service-card.accent-card p {
        font-size: 1.1rem;
    }
}

/* ==========================================================================
   真の最終セクション（セキュア環境＆サポート・問い合わせエリア）
   ========================================================================== */

.final-support-section {
    margin-top: 100px;
    padding-top: 40px;
}

/* 緑色の帯ヘッダー */
.secure-banner-title {
    background-color: #76b900;
    padding: 18px 20px;
    border-radius: 4px;
    margin-bottom: 30px;
}

.secure-banner-title h2 {
    color: #ffffff !important;
    font-size: 1.8rem;
    font-weight: bold;
    letter-spacing: 0.03em;
    border: none;
    padding: 0;
    margin: 0;
}

/* 3つ並びのテキストと背景画像のコンテナ */
.secure-content-box {
    display: flex;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 60px;
    position: relative;
    min-height: 400px;
    
    /* 🛠️【修正】メニューバー（青い帯）の下に潜り込ませるためにz-indexを下げます */
    z-index: 1 !important; 
}

/* 左側：3つの特徴文章エリア */
.secure-text-side {
    width: 55%;
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    
    /* 🛠️【修正】ここにももし z-index: 2; が残っていたら 1 に上書きします */
    z-index: 1 !important; 
}

.secure-item {
    margin-bottom: 25px;
}

.secure-item:last-child {
    margin-bottom: 0;
}

.secure-item h3 {
    font-size: 1.5rem;
    font-weight: bold;
    color: #000000;
    margin-bottom: 8px;
    position: relative;
    padding-bottom: 4px;
}

/* タイトルの下にうっすら線を引くWeb演出 */
.secure-item h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 2px;
    background-color: #76b900;
}

.secure-item p {
    font-size: 1.05rem;
    color: #444444;
    line-height: 1.6;
}

/* 右側：ご指定の背景画像（jetson_image004.png）を敷くエリア */
.secure-image-side {
    width: 45%;
    background-image: url('images-new/jetson_image004.png');
    background-size: cover;
    background-position: center center;
    position: relative;
}

/* グラデーションを重ねて文字エリアから画像への繋ぎ目を自然にするWebの技法 */
.secure-image-side::before {
    content: '';
    position: absolute;
    top: 0;
    left: -1px;
    width: 100px;
    height: 100%;
    background: linear-gradient(to right, #ffffff, transparent);
}

/* 下段：大枠の黒ボックス */
.final-cta-box {
    background: linear-gradient(135deg, #0a1128 0%, #002060 100%);
    border: 2px solid #76b900;
    border-radius: 12px;
    padding: 60px 40px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(118, 185, 0, 0.15);
}

.final-cta-sub {
    color: #76b900;
    font-size: 1.4rem;
    font-weight: bold;
    margin-bottom: 40px;
    letter-spacing: 0.03em;
}

/* 3つの白い丸型を並べるエリア */
.support-circles {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 45px;
}

/* 白丸の土台 */
.support-circle {
    width: 200px;
    height: 200px;
    background-color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.circle-inner {
    text-align: center;
    color: #000000;
}

.circle-inner h4 {
    font-size: 1.1rem;
    font-weight: 900;
    line-height: 1.3;
    margin-bottom: 8px;
}

.circle-inner h4 small {
    font-size: 0.85rem;
    font-weight: normal;
}

.circle-inner p {
    font-size: 0.85rem;
    line-height: 1.4;
    color: #333333;
}

/* 最終ボタンの余白 */
.final-btn-wrap {
    margin-top: 20px;
}

.final-cta-note {
    color: #cccccc;
    font-size: 0.95rem;
    margin-top: 25px;
}

/* 📱 スマートフォン用のレスポンシブ微調整（画面幅768px以下） */
@media (max-width: 768px) {
    .final-support-section {
        margin-top: 60px;
    }

    .secure-banner-title h2 {
        font-size: 1.15rem;
        line-height: 1.4;
    }

    /* スマホでは縦並びにして、画像を下に配置 */
    .secure-content-box {
        flex-direction: column;
        min-height: auto;
    }

    .secure-text-side {
        width: 100%;
        padding: 30px 20px;
    }

    .secure-item h3 {
        font-size: 1.25rem;
    }

    .secure-item p {
        font-size: 0.95rem;
    }

    .secure-image-side {
        width: 100%;
        height: 200px;
    }

    .secure-image-side::before {
        left: 0;
        top: -1px;
        width: 100%;
        height: 50px;
        background: linear-gradient(to bottom, #ffffff, transparent);
    }

    /* スマホの黒ボックス・丸 */
    .final-cta-box {
        padding: 40px 20px;
    }

    .final-cta-sub {
        font-size: 1.05rem;
        line-height: 1.4;
        margin-bottom: 30px;
    }

    .support-circles {
        flex-direction: column; /* スマホでは丸を縦並びに */
        align-items: center;
        gap: 20px;
    }

    .support-circle {
        width: 180px;
        height: 180px;
    }

    .final-cta-note {
        font-size: 0.8rem;
    }
}
/* 最終セクションに追加した大見出しのスタイル（PC版） */
.final-cta-title-text {
    color: #ffffff !important;
    font-size: 2.2rem;
    font-weight: bold;
    margin-top: -10px;
    margin-bottom: 40px;
    letter-spacing: 0.02em;
    text-align: center;
}

/* 📱 スマートフォン用のレスポンシブ微調整（@mediaの一番下あたりに追記でもOKです） */
@media (max-width: 768px) {
    .final-cta-title-text {
        font-size: 1.4rem;
        margin-bottom: 30px;
    }
}

/* ==========================================================================
   💥 【スマートな最終解決】フッター潜り込み＆背景間伸び対策
   ========================================================================== */

.final-cta-box {
    /* 🛠️【修正】ネイビーの背景が間伸びするのを防ぐため、内側の余白を本来の綺麗なサイズに戻します */
    padding-bottom: 60px !important; 
}

/* 🛠️【新規追加】PC表示のときのみ、この最終セクションの「外側」に巨大な空白のクッションを敷きます */
.final-support-section {
    padding-bottom: 650px !important; /* 👈 この白い余白が青いフッターの裏に潜り込みます */
}

/* 📱 スマートフォン用の被り対策（スマホは今のままで完璧なので、現在の設定を維持します） */
@media (max-width: 768px) {
    .final-cta-box {
        /* スマホ時は現状きれいに見えている数値をそのままキープ */
        padding-bottom: 100px !important;
    }
    .final-support-section {
        /* スマホ時は外側のクッションをなしにして縦並びを維持 */
        padding-bottom: 0 !important;
    }
}