@charset "UTF-8";

/* ベースリセット（必要に応じて既存のCSSと調整してください） */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  background-color: #000;
  color: #fff;
  line-height: 1.6;
}

/* ------------------------------------
   ヒーローエリア スタイル
------------------------------------ */
.hero-section {
  width: 100%;
  min-height: 600px; /* 画面サイズに応じた最低の高さを確保 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  /* 背景画像の設定 */
  background-image: url('images-new/hero_image01.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.hero-container {
  width: 100%;
  max-width: 1400px; /* ご指定の最大幅 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

/* 左側：テキストエリア */
.hero-content {
  flex: 1;
  max-width: 700px;
}

.hero-title {
  font-size: 64px; /* チラシのインパクトに合わせた大きめのサイズ */
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.02em;
  margin-bottom: 30px;
  /* 文字の下のグリーン線 */
  border-bottom: 4px solid #86c90f;
  padding-bottom: 24px;
}

.title-main,
.title-sub {
  display: block;
}

.hero-lead {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.05em;
  color: #e0e0e0;
}

/* 右側：グラフィックエリア */
.hero-graphic {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: relative;
}

.server-image {
  width: 100%;
  max-width: 620px; /* 筐体画像の最大サイズ */
  height: auto;
  object-fit: contain;
  /* 必要に応じてわずかに影をつけて背景と馴染ませる */
  filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.7));
}

/* ------------------------------------
   レスポンシブ（タブレット・スマホ対応）
------------------------------------ */
@media screen and (max-width: 1024px) {
  .hero-title {
    font-size: 48px;
  }
  .hero-lead {
    font-size: 20px;
  }
}

@media screen and (max-width: 768px) {
  .hero-section {
    min-height: auto;
    padding: 60px 24px;
  }
  .hero-container {
    flex-direction: column; /* スマホ時は縦並びにする */
    gap: 48px;
    text-align: center;
  }
  .hero-title {
    font-size: 36px;
    display: inline-block;
    width: 100%;
    padding-bottom: 16px;
    margin-bottom: 20px;
  }
  .hero-lead {
    font-size: 16px;
    br {
      display: none; /* スマホでは改行を解除して見やすく */
    }
  }
  .hero-graphic {
    justify-content: center;
    width: 100%;
  }
  .server-image {
    max-width: 100%;
  }
}
/* ------------------------------------
   セクション01：製品特徴スタイル
------------------------------------ */
.feature-section {
  width: 100%;
  min-height: 800px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  background-image: url('images-new/section_image01.png');
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  background-color: #000;
}

.feature-container {
  width: 100%;
  max-width: 1400px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.feature-content {
  width: 100%;
  max-width: 650px;
}

.feature-title {
  font-size: 42px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.03em;
  color: #fff;
  margin-bottom: 24px;
}

.feature-sub-title {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: #86c90f;
  margin-bottom: 32px;
}

.feature-body-text {
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.04em;
  color: #d1d1d1;
}

.feature-body-text p {
  margin-bottom: 20px;
}

.feature-body-text p:last-child {
  margin-bottom: 0;
}

.feature-graphic-sp {
  display: none;
}

/* ------------------------------------
   セクション02：スペックハイライトスタイル
------------------------------------ */
.specs-section {
  width: 100%;
  background-color: #000;
  padding: 80px 20px;
}

.specs-container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

.specs-grid {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

.spec-card {
  flex: 1;
  background-color: #0b0b0b;
  border: 1px solid #222;
  border-radius: 12px;
  padding: 32px 24px;
  text-align: center;
}

.spec-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 16px;
}

.spec-icon {
  width: 56px;
  height: 56px;
  object-fit: contain;
}

.spec-number-wrap {
  display: flex;
  align-items: baseline;
  color: #86c90f;
  font-weight: 700;
}

.spec-num {
  font-size: 56px;
  line-height: 1;
  letter-spacing: -0.02em;
}

.spec-unit {
  font-size: 24px;
  margin-left: 4px;
}


/* ⭕ 代わりにこれをCSSの最下部へ貼り付けてください */
.spec-highlight-title {
  display: block;
  width: 100%;
  text-align: center;
  white-space: nowrap;
  
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #222;
}

.spec-desc {
  font-size: 14px;
  line-height: 1.6;
  color: #999;
}

.specs-note {
  font-size: 12px;
  color: #666;
  text-align: left;
}

/* ------------------------------------
   全画面共通：レスポンシブ（タブレット・スマホ対応）
------------------------------------ */
@media screen and (max-width: 1200px) {
  .feature-title {
    font-size: 36px;
  }
  .feature-sub-title {
    font-size: 18px;
  }
}

@media screen and (max-width: 1024px) {
  .hero-title {
    font-size: 48px;
  }
  .hero-lead {
    font-size: 20px;
  }
  .spec-num {
    font-size: 44px;
  }
  .spec-unit {
    font-size: 20px;
  }
}

@media screen and (max-width: 960px) {
  .feature-section {
    min-height: auto;
    background-image: none;
    padding: 60px 24px;
  }
  .feature-container {
    flex-direction: column;
    align-items: flex-start;
  }
  .feature-content {
    max-width: 100%;
    margin-bottom: 40px;
  }
  .feature-title br,
  .feature-sub-title br {
    display: none;
  }
  .feature-graphic-sp {
    display: block;
    width: 100%;
    text-align: center;
  }
  .feature-img-sp {
    width: 100%;
    max-width: 500px;
    height: auto;
    object-fit: contain;
  }
}

@media screen and (max-width: 768px) {
  .hero-section {
    min-height: auto;
    padding: 60px 24px;
  }
  .hero-container {
    flex-direction: column;
    gap: 48px;
    text-align: center;
  }
  .hero-title {
    font-size: 36px;
    display: inline-block;
    width: 100%;
    padding-bottom: 16px;
    margin-bottom: 20px;
  }
  .hero-lead {
    font-size: 16px;
  }
  .hero-lead br {
    display: none;
  }
  .hero-graphic {
    justify-content: center;
    width: 100%;
  }
  .server-image {
    max-width: 100%;
  }
  .specs-section {
    padding: 40px 24px;
  }
  .specs-grid {
    flex-direction: column;
    gap: 16px;
  }
  .spec-card {
    padding: 24px 20px;
  }
  .spec-num {
    font-size: 48px;
  }
  .spec-desc br {
    display: none;
  }
  .specs-note {
    margin-top: 16px;
  }
}
/* ------------------------------------
   セクション03：優位性とワークロードスタイル
------------------------------------ */
.comparison-section {
  width: 100%;
  background-color: #000;
  padding: 60px 20px 100px 20px;
}

.comparison-container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

/* セクションヘッダー */
.section-header {
  text-align: center;
  margin-bottom: 48px;
}

.section-main-title {
  font-size: 38px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 12px;
}

.section-sub-title {
  font-size: 20px;
  font-weight: 500;
  color: #86c90f; /* 指定のグリーン */
}

/* 2カラムレイアウト */
.comparison-row {
  display: flex;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 40px;
}

.comparison-col {
  flex: 1;
}

/* 修正後：このように書き換えてください */
.col-inner-box {
  background-color: #111312; /* 指定の色に変更 */
  border: 1px solid #222;
  border-radius: 12px;
  padding: 40px 32px;
  height: 100%;
}

.col-title {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  margin-bottom: 40px;
}

/* 左側：アーキテクチャ内のブロック */
.arch-block {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 40px;
}

.arch-block:last-child {
  margin-bottom: 0;
}

.arch-img-wrap {
  width: 160px;
  flex-shrink: 0;
}

.arch-img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.arch-text {
  flex: 1;
}

.arch-text h4 {
  font-size: 18px;
  font-weight: 700;
  color: #ccc;
  margin-bottom: 12px;
}

.arch-text h4.green-text {
  color: #86c90f;
}

.arch-text ul {
  list-style-type: disc;
  padding-left: 20px;
}

.arch-text li {
  font-size: 14px;
  line-height: 1.6;
  color: #aaa;
  margin-bottom: 8px;
}

.arch-text li:last-child {
  margin-bottom: 0;
}

/* 4-Way NVLink側の箇条書きを目立たせる（グリーン） */
.highlight-block .arch-text li {
  color: #e0e0e0;
}

/* 右側：ワークロード内のブロック */
.workload-block {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 48px;
}

.workload-block:last-child {
  margin-bottom: 0;
}

.workload-icon {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  object-fit: contain;
}

.workload-text flex {
  flex: 1;
}

.workload-text h4 {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
}

.workload-text p {
  font-size: 14px;
  line-height: 1.6;
  color: #aaa;
}

/* 下段：フォームファクタ（横長ボックス） */
.formfactor-box {
  display: flex;
  align-items: center;
  gap: 32px;
  background-color: #050505;
  border: 1px solid #333; /* 下段のみチラシに合わせ枠線を少し明るめに */
  border-radius: 12px;
  padding: 32px 40px;
}

.formfactor-icon {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  object-fit: contain;
}

.formfactor-text {
  flex: 1;
}

.formfactor-text h3 {
  font-size: 22px;
  font-weight: 700;
  color: #86c90f;
  margin-bottom: 8px;
}

.formfactor-text p {
  font-size: 15px;
  line-height: 1.7;
  color: #d1d1d1;
}


/* ------------------------------------
   全画面共通：レスポンシブ（タブレット・スマホ対応）
------------------------------------ */
@media screen and (max-width: 1200px) {
  .feature-title {
    font-size: 36px;
  }
  .feature-sub-title {
    font-size: 18px;
  }
  /* セクション03用の調整 */
  .section-main-title {
    font-size: 32px;
  }
  .col-inner-box {
    padding: 32px 20px;
  }
  .arch-block {
    flex-direction: column;
    gap: 16px;
  }
  .arch-img-wrap {
    width: 140px;
  }
}

@media screen and (max-width: 1024px) {
  .hero-title {
    font-size: 48px;
  }
  .hero-lead {
    font-size: 20px;
  }
  .spec-num {
    font-size: 44px;
  }
  .spec-unit {
    font-size: 20px;
  }
  /* セクション03用の調整（2カラムだと狭いので縦並びに） */
  .comparison-row {
    flex-direction: column;
    gap: 24px;
  }
}

@media screen and (max-width: 960px) {
  .feature-section {
    min-height: auto;
    background-image: none;
    padding: 60px 24px;
  }
  .feature-container {
    flex-direction: column;
    align-items: flex-start;
  }
  .feature-content {
    max-width: 100%;
    margin-bottom: 40px;
  }
  .feature-title br,
  .feature-sub-title br {
    display: none;
  }
  .feature-graphic-sp {
    display: block;
    width: 100%;
    text-align: center;
  }
  .feature-img-sp {
    width: 100%;
    max-width: 500px;
    height: auto;
    object-fit: contain;
  }
}

@media screen and (max-width: 768px) {
  .hero-section {
    min-height: auto;
    padding: 60px 24px;
  }
  .hero-container {
    flex-direction: column;
    gap: 48px;
    text-align: center;
  }
  .hero-title {
    font-size: 36px;
    display: inline-block;
    width: 100%;
    padding-bottom: 16px;
    margin-bottom: 20px;
  }
  .hero-lead {
    font-size: 16px;
  }
  .hero-lead br {
    display: none;
  }
  .hero-graphic {
    justify-content: center;
    width: 100%;
  }
  .server-image {
    max-width: 100%;
  }
  .specs-section {
    padding: 40px 24px;
  }
  .specs-grid {
    flex-direction: column;
    gap: 16px;
  }
  .spec-card {
    padding: 24px 20px;
  }
  .spec-num {
    font-size: 48px;
  }
  .spec-desc br {
    display: none;
  }
  .specs-note {
    margin-top: 16px;
  }
  /* セクション03用の調整（スマホ最適化） */
  .comparison-section {
    padding: 40px 24px 60px 24px;
  }
  .section-main-title {
    font-size: 26px;
  }
  .section-sub-title {
    font-size: 16px;
  }
  .col-title {
    font-size: 20px;
    margin-bottom: 24px;
  }
  .workload-block {
    flex-direction: column;
    gap: 16px;
    text-align: center;
    align-items: center;
  }
  .workload-text h4 {
    font-size: 18px;
  }
  .formfactor-box {
    flex-direction: column;
    text-align: center;
    padding: 32px 20px;
    gap: 20px;
  }
  .formfactor-text h3 {
    font-size: 18px;
  }
  .formfactor-text p {
    font-size: 14px;
  }
}

/* ------------------------------------
   セクション04：ラインナップ＆スペックスタイル
------------------------------------ */
.products-section {
  width: 100%;
  background-color: #1c1e1d; /* 深みのあるダークグレー */
  padding: 80px 20px;
}

.products-container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

/* 各モデルのカード */
.product-card {
  background-color: #111312; /* 表面の枠色と統一 */
  border: 1px solid #2d302f;
  border-radius: 16px;
  padding: 40px;
  margin-bottom: 48px;
}

/* カードの見出し */
.product-main-title {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  line-height: 1.4;
  margin-bottom: 32px;
  border-left: 5px solid #86c90f;
  padding-left: 16px;
}

.product-main-title .model-name {
  color: #86c90f;
}

/* カード内部（左右2カラム） */
.product-body {
  display: flex;
  align-items: flex-start;
  gap: 48px;
}

/* 左側：筐体・ロゴ画像 */
.product-graphic {
  flex: 1;
  max-width: 550px;
}

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

/* 右側：スペック表 */
.product-specs {
  flex: 1.2;
}

.specs-title {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid #2d302f;
}

.specs-list {
  list-style: none;
}

.specs-list li {
  display: flex;
  font-size: 14px;
  line-height: 1.4; /* 行自体の高さも少しタイトに調整 */
  border-bottom: 1px solid #222;
  padding: 6px 0;   /* 上下の余白を 10px から 6px に狭くしました */
  color: #ccc;
}

.specs-list li:last-child {
  border-bottom: none;
}

/* リスト内のラベルと値の配置 */
.spec-label {
  width: 100px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.spec-label::before {
  content: "■ ";
  color: #555;
  font-size: 12px;
}

.spec-val {
  flex: 1;
}

/* GPU部分のハイライト（赤文字・太字） */
.specs-list .highlight-spec {
  color: #ff4a4a;
  font-weight: 700;
}

.specs-list .highlight-spec .spec-label {
  color: #ff4a4a;
}

.specs-list .highlight-spec .spec-label::before {
  color: #ff4a4a;
}

/* カスタマイズ注意文 */
.custom-note {
  font-size: 13px;
  color: #888;
  margin-top: 16px;
  text-align: right;
}

/* 想定売価ボックス */
.price-box {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  margin-top: 24px;
  background-color: #1a1c1b;
  padding: 12px 24px;
  border-radius: 8px;
  border: 1px solid #2d302f;
}

.price-label {
  background-color: #222;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 4px;
}

.price-text {
  font-size: 14px;
  color: #ccc;
}

/* 下部フッターエリア */
.products-footer {
  text-align: center;
  margin-top: 40px;
}

.footer-notice {
  font-size: 14px;
  color: #ff4a4a;
  font-weight: 700;
  margin-bottom: 32px;
}

/* ゴールド系CTAボタン */
.btn-gold {
  display: inline-block;
  padding: 18px 32px;
  font-size: 18px;
  font-weight: 700;
  color: #111312; /* ボタン内の文字は引き締まった暗色 */
  text-decoration: none;
  background: linear-gradient(135deg, #f3d078 0%, #c79d4c 50%, #a1782f 100%);
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(199, 157, 76, 0.3);
  transition: all 0.3s ease;
}

.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(199, 157, 76, 0.5);
  background: linear-gradient(135deg, #ffe699 0%, #dbb25e 50%, #b88d3c 100%);
}


/* ------------------------------------
   全画面共通：レスポンシブ（タブレット・スマホ対応）
------------------------------------ */
@media screen and (max-width: 1200px) {
  .feature-title {
    font-size: 36px;
  }
  .feature-sub-title {
    font-size: 18px;
  }
  .section-main-title {
    font-size: 32px;
  }
  .col-inner-box {
    padding: 32px 20px;
  }
  .arch-block {
    flex-direction: column;
    gap: 16px;
  }
  .arch-img-wrap {
    width: 140px;
  }
  /* セクション04用の調整 */
  .product-body {
    gap: 24px;
  }
}

@media screen and (max-width: 1024px) {
  .hero-title {
    font-size: 48px;
  }
  .hero-lead {
    font-size: 20px;
  }
  .spec-num {
    font-size: 44px;
  }
  .spec-unit {
    font-size: 20px;
  }
  .comparison-row {
    flex-direction: column;
    gap: 24px;
  }
  /* セクション04用の調整（タブレット幅で縦並びに） */
  .product-body {
    flex-direction: column;
    align-items: center;
  }
  .product-graphic {
    max-width: 100%;
    margin-bottom: 24px;
  }
  .product-specs {
    width: 100%;
  }
}

@media screen and (max-width: 960px) {
  .feature-section {
    min-height: auto;
    background-image: none;
    padding: 60px 24px;
  }
  .feature-container {
    flex-direction: column;
    align-items: flex-start;
  }
  .feature-content {
    max-width: 100%;
    margin-bottom: 40px;
  }
  .feature-title br,
  .feature-sub-title br {
    display: none;
  }
  .feature-graphic-sp {
    display: block;
    width: 100%;
    text-align: center;
  }
  .feature-img-sp {
    width: 100%;
    max-width: 500px;
    height: auto;
    object-fit: contain;
  }
}

@media screen and (max-width: 768px) {
  .hero-section {
    min-height: auto;
    padding: 60px 24px;
  }
  .hero-container {
    flex-direction: column;
    gap: 48px;
    text-align: center;
  }
  .hero-title {
    font-size: 36px;
    display: inline-block;
    width: 100%;
    padding-bottom: 16px;
    margin-bottom: 20px;
  }
  .hero-lead {
    font-size: 16px;
  }
  .hero-lead br {
    display: none;
  }
  .hero-graphic {
    justify-content: center;
    width: 100%;
  }
  .server-image {
    max-width: 100%;
  }
  .specs-section {
    padding: 40px 24px;
  }
  .specs-grid {
    flex-direction: column;
    gap: 16px;
  }
  .spec-card {
    padding: 24px 20px;
  }
  .spec-num {
    font-size: 48px;
  }
  .spec-desc br {
    display: none;
  }
  .specs-note {
    margin-top: 16px;
  }
  .comparison-section {
    padding: 40px 24px 60px 24px;
  }
  .section-main-title {
    font-size: 26px;
  }
  .section-sub-title {
    font-size: 16px;
  }
  .col-title {
    font-size: 20px;
    margin-bottom: 24px;
  }
  .workload-block {
    flex-direction: column;
    gap: 16px;
    text-align: center;
    align-items: center;
  }
  .workload-text h4 {
    font-size: 18px;
  }
  .formfactor-box {
    flex-direction: column;
    text-align: center;
    padding: 32px 20px;
    gap: 20px;
  }
  .formfactor-text h3 {
    font-size: 18px;
  }
  .formfactor-text p {
    font-size: 14px;
  }
  /* セクション04用の調整（スマホ最適化） */
  .products-section {
    padding: 40px 24px;
  }
  .product-card {
    padding: 24px 16px;
    margin-bottom: 32px;
  }
  .product-main-title {
    font-size: 18px;
    padding-left: 10px;
    margin-bottom: 20px;
  }
  .spec-label {
    width: 80px;
    font-size: 13px;
  }
  .spec-val {
    font-size: 13px;
  }
  .price-box {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px;
  }
  .footer-notice {
    font-size: 13px;
  }
  .btn-gold {
    width: 100%;
    min-width: auto;
    font-size: 16px;
    padding: 16px 20px;
  }
}

/* ------------------------------------
   セクション05：製品紹介スタイル
------------------------------------ */
/* 修正後：このブロックに丸ごと差し替えてください */
.intro-section {
  width: 100%;
  background-color: #242726; /* ベースのグレー背景 */
  padding: 80px 20px 120px 20px;
  
  /* 背景画像の設定を追加 */
  background-image: linear-gradient(rgba(36, 39, 38, 0.9), rgba(36, 39, 38, 0.9)), url('images-new/hpc_h200_1200x1200.png');
  background-size: contain;      /* 画像が途中で切れないよう綺麗に収める設定 */
  background-position: center;    /* 画像を中央に配置 */
  background-repeat: no-repeat;  /* 画像の繰り返しを防止 */
}

.intro-container {
  width: 100%;
  max-width: 1000px; /* 長文を読みやすくするため、あえて幅を少しタイトに制限 */
  margin: 0 auto;
}

/* セクション大見出し */
.intro-header {
  margin-bottom: 40px;
}

.intro-main-title {
  font-size: 32px;
  font-weight: 700;
  color: #fff;
  border-left: 5px solid #86c90f;
  padding-left: 16px;
  line-height: 1.2;
}

/* リード文章 */
.intro-lead-box {
  font-size: 16px;
  line-height: 1.8;
  color: #e0e0e0;
  margin-bottom: 56px;
}

.intro-lead-box p {
  margin-bottom: 24px;
}

.intro-lead-box p:last-child {
  margin-bottom: 0;
}

/* 詳細解説ブロック */
.intro-detail-list {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.detail-block h3 {
  font-size: 20px;
  font-weight: 700;
  color: #86c90f; /* チラシの見出し色に合わせたグリーン */
  margin-bottom: 14px;
}

.detail-block p {
  font-size: 15px;
  line-height: 1.8;
  color: #ccc;
}

/* ナンバリングリストのラップ */
.sub-features {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-left: 12px;
}

.sub-feature-item h4 {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
}

.sub-feature-item p {
  font-size: 14px;
  line-height: 1.7;
  color: #b5b5b5;
}


/* ------------------------------------
   全画面共通：レスポンシブ（タブレット・スマホ対応）
------------------------------------ */
@media screen and (max-width: 1200px) {
  .feature-title {
    font-size: 36px;
  }
  .feature-sub-title {
    font-size: 18px;
  }
  .section-main-title {
    font-size: 32px;
  }
  .col-inner-box {
    padding: 32px 20px;
  }
  .arch-block {
    flex-direction: column;
    gap: 16px;
  }
  .arch-img-wrap {
    width: 140px;
  }
  .product-body {
    gap: 24px;
  }
}

@media screen and (max-width: 1024px) {
  .hero-title {
    font-size: 48px;
  }
  .hero-lead {
    font-size: 20px;
  }
  .spec-num {
    font-size: 44px;
  }
  .spec-unit {
    font-size: 20px;
  }
  .comparison-row {
    flex-direction: column;
    gap: 24px;
  }
  .product-body {
    flex-direction: column;
    align-items: center;
  }
  .product-graphic {
    max-width: 100%;
    margin-bottom: 24px;
  }
  .product-specs {
    width: 100%;
  }
}

@media screen and (max-width: 960px) {
  .feature-section {
    min-height: auto;
    background-image: none;
    padding: 60px 24px;
  }
  .feature-container {
    flex-direction: column;
    align-items: flex-start;
  }
  .feature-content {
    max-width: 100%;
    margin-bottom: 40px;
  }
  .feature-title br,
  .feature-sub-title br {
    display: none;
  }
  .feature-graphic-sp {
    display: block;
    width: 100%;
    text-align: center;
  }
  .feature-img-sp {
    width: 100%;
    max-width: 500px;
    height: auto;
    object-fit: contain;
  }
}

@media screen and (max-width: 768px) {
  .hero-section {
    min-height: auto;
    padding: 60px 24px;
  }
  .hero-container {
    flex-direction: column;
    gap: 48px;
    text-align: center;
  }
  .hero-title {
    font-size: 36px;
    display: inline-block;
    width: 100%;
    padding-bottom: 16px;
    margin-bottom: 20px;
  }
  .hero-lead {
    font-size: 16px;
  }
  .hero-lead br {
    display: none;
  }
  .hero-graphic {
    justify-content: center;
    width: 100%;
  }
  .server-image {
    max-width: 100%;
  }
  .specs-section {
    padding: 40px 24px;
  }
  .specs-grid {
    flex-direction: column;
    gap: 16px;
  }
  .spec-card {
    padding: 24px 20px;
  }
  .spec-num {
    font-size: 48px;
  }
  .spec-desc br {
    display: none;
  }
  .specs-note {
    margin-top: 16px;
  }
  .comparison-section {
    padding: 40px 24px 60px 24px;
  }
  .section-main-title {
    font-size: 26px;
  }
  .section-sub-title {
    font-size: 16px;
  }
  .col-title {
    font-size: 20px;
    margin-bottom: 24px;
  }
  .workload-block {
    flex-direction: column;
    gap: 16px;
    text-align: center;
    align-items: center;
  }
  .workload-text h4 {
    font-size: 18px;
  }
  .formfactor-box {
    flex-direction: column;
    text-align: center;
    padding: 32px 20px;
    gap: 20px;
  }
  .formfactor-text h3 {
    font-size: 18px;
  }
  .formfactor-text p {
    font-size: 14px;
  }
  .products-section {
    padding: 40px 24px;
  }
  .product-card {
    padding: 24px 16px;
    margin-bottom: 32px;
  }
  .product-main-title {
    font-size: 18px;
    padding-left: 10px;
    margin-bottom: 20px;
  }
  .spec-label {
    width: 80px;
    font-size: 13px;
  }
  .spec-val {
    font-size: 13px;
  }
  .price-box {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px;
  }
  .footer-notice {
    font-size: 13px;
  }
  .btn-gold {
    width: 100%;
    min-width: auto;
    font-size: 16px;
    padding: 16px 20px;
  }
  /* セクション05用の調整（スマホ最適化） */
  .intro-section {
    padding: 50px 24px 80px 24px;
  }
  .intro-main-title {
    font-size: 24px;
  }
  .intro-lead-box {
    font-size: 14px;
    margin-bottom: 40px;
  }
  .detail-block h3 {
    font-size: 18px;
  }
  .detail-block p {
    font-size: 14px;
  }
  .sub-features {
    padding-left: 0;
  }
}

/* ------------------------------------
   セクション06：詳細仕様・スペックスタイル（アップデート版）
------------------------------------ */
.detailed-specs-section {
  width: 100%;
  background-color: #000000;
  padding: 80px 20px;
}

.detailed-specs-container {
  width: 100%;
  max-width: 1400px; /* 画像を入れるため、上部セクションと同じ1400pxに拡張 */
  margin: 0 auto;
}

.detailed-specs-header {
  margin-bottom: 48px;
}

.detailed-specs-main-title {
  font-size: 32px;
  font-weight: 700;
  color: #fff;
  border-left: 5px solid #86c90f;
  padding-left: 16px;
  margin-bottom: 12px;
}

.brand-title {
  font-size: 18px;
  color: #aaa;
  padding-left: 21px;
}

.models-spec-wrap {
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.model-spec-box {
  background-color: #0b0b0b;
  border: 1px solid #1a1c1b;
  border-radius: 12px;
  padding: 32px;
}

.model-spec-title {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.number-badge {
  background-color: #86c90f;
  color: #000;
  font-size: 14px;
  font-weight: 700;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.spec-group-caption {
  font-size: 14px;
  color: #86c90f;
  margin-bottom: 12px;
  font-weight: 700;
}

/* --- 新設：左右2カラムのフレックスレイアウト --- */
.spec-flex-layout {
  display: flex;
  align-items: center; /* 表と画像の中央を揃える */
  gap: 48px;           /* 表と画像のすき間 */
}

/* 左側：テーブルエリア */
.spec-table-side {
  flex: 1.3; /* 表の幅を少し広めに確保 */
}

/* 右側：画像エリア */
.spec-image-side {
  flex: 0.7;
  display: flex;
  justify-content: center;
  align-items: center;
}

.spec-side-img {
  width: 100%;
  max-width: 420px; /* 画像が大きくなりすぎないように制限 */
  height: auto;
  object-fit: contain;
}
/* ------------------------------------------- */

.spec-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 16px;
}

.spec-table th,
.spec-table td {
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.4;
  border-bottom: 1px solid #1a1c1b;
  text-align: left;
}

.spec-table th {
  width: 140px;
  color: #fff;
  font-weight: 700;
  background-color: #111312;
}

.spec-table td {
  color: #ccc;
}

.spec-table .highlight-row th,
.spec-table .highlight-row td {
  color: #ff4a4a;
  font-weight: 700;
}

.spec-customize-note {
  font-size: 13px;
  color: #666;
}

@media screen and (max-width: 768px) {
  .hero-section {
    min-height: auto;
    padding: 60px 24px;
  }
  .hero-container {
    flex-direction: column;
    gap: 48px;
    text-align: center;
  }
  .hero-title {
    font-size: 36px;
    display: inline-block;
    width: 100%;
    padding-bottom: 16px;
    margin-bottom: 20px;
  }
  .hero-lead {
    font-size: 16px;
  }
  .hero-lead br {
    display: none;
  }
  .hero-graphic {
    justify-content: center;
    width: 100%;
  }
  .server-image {
    max-width: 100%;
  }
  .specs-section {
    padding: 40px 24px;
  }
  .specs-grid {
    flex-direction: column;
    gap: 16px;
  }
  .spec-card {
    padding: 24px 20px;
  }
  .spec-num {
    font-size: 48px;
  }
  .spec-desc br {
    display: none;
  }
  .specs-note {
    margin-top: 16px;
  }
  .comparison-section {
    padding: 40px 24px 60px 24px;
  }
  .section-main-title {
    font-size: 26px;
  }
  .section-sub-title {
    font-size: 16px;
  }
  .col-title {
    font-size: 20px;
    margin-bottom: 24px;
  }
  .workload-block {
    flex-direction: column;
    gap: 16px;
    text-align: center;
    align-items: center;
  }
  .workload-text h4 {
    font-size: 18px;
  }
  .formfactor-box {
    flex-direction: column;
    text-align: center;
    padding: 32px 20px;
    gap: 20px;
  }
  .formfactor-text h3 {
    font-size: 18px;
  }
  .formfactor-text p {
    font-size: 14px;
  }
  .products-section {
    padding: 40px 24px;
  }
  .product-card {
    padding: 24px 16px;
    margin-bottom: 32px;
  }
  .product-main-title {
    font-size: 18px;
    padding-left: 10px;
    margin-bottom: 20px;
  }
  .spec-label {
    width: 80px;
    font-size: 13px;
  }
  .spec-val {
    font-size: 13px;
  }
  .price-box {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px;
  }
  .footer-notice {
    font-size: 13px;
  }
  .btn-gold {
    width: 100%;
    min-width: auto;
    font-size: 16px;
    padding: 16px 20px;
  }
  .intro-section {
    padding: 50px 24px 80px 24px;
  }
  .intro-main-title {
    font-size: 24px;
  }
  .intro-lead-box {
    font-size: 14px;
    margin-bottom: 40px;
  }
  .detail-block h3 {
    font-size: 18px;
  }
  .detail-block p {
    font-size: 14px;
  }
  .sub-features {
    padding-left: 0;
  }
  .detailed-specs-section {
    padding: 50px 24px;
  }
  .detailed-specs-main-title {
    font-size: 24px;
  }
  .brand-title {
    font-size: 15px;
    padding-left: 10px;
  }
  .model-spec-box {
    padding: 20px 16px;
  }
  .model-spec-title {
    font-size: 15px;
    line-height: 1.4;
  }
  .spec-table th {
    width: 80px;
    padding: 10px 8px;
    font-size: 12px;
  }
  .spec-table td {
    padding: 10px 8px;
    font-size: 12px;
  }
  .usecase-section {
    padding: 50px 24px;
  }
  .usecase-main-title {
    font-size: 24px;
  }
  .usecase-lead-box {
    font-size: 14px;
    margin-bottom: 40px;
  }
  .block-title {
    font-size: 18px;
  }
  .usecase-item {
    padding: 20px 16px;
  }
  .usecase-item h4 {
    font-size: 16px;
  }
  .item-desc {
    font-size: 14px;
  }
  .result-table th, 
  .result-table td {
    padding: 10px 8px;
    font-size: 12px;
  }
  .result-table tbody th {
    width: 90px;
  }

  /* ★ここに正しく組み込みました★ */
  .spec-flex-layout {
    flex-direction: column;
    gap: 24px;
  }
  .spec-table-side {
    width: 100%;
  }
  .spec-image-side {
    width: 100%;
  }
  .spec-side-img {
    max-width: 100%;
  }
}

/* ------------------------------------
   セクション07：用途・実績例スタイル
------------------------------------ */
.usecase-section {
  width: 100%;
  background-color: #111312; /* 表面の枠色と同じ深みのある暗色 */
  padding: 80px 20px;
}

.usecase-container {
  width: 100%;
  max-width: 1000px; /* 読みやすさを追求した横幅 */
  margin: 0 auto;
}

.usecase-main-title {
  font-size: 32px;
  font-weight: 700;
  color: #fff;
  border-left: 5px solid #86c90f;
  padding-left: 16px;
  margin-bottom: 32px;
}

.usecase-lead-box {
  font-size: 16px;
  line-height: 1.8;
  color: #ccc;
  margin-bottom: 56px;
}

.usecase-lead-box p {
  margin-bottom: 20px;
}

/* 各大ブロック */
.usecase-block {
  margin-bottom: 56px;
}

.block-title {
  font-size: 20px;
  font-weight: 700;
  color: #86c90f;
  margin-bottom: 24px;
}

.block-desc {
  font-size: 15px;
  color: #ccc;
  margin-bottom: 20px;
}

/* 各用途のアイテム */
.usecase-item {
  margin-bottom: 40px;
  background-color: #1a1c1b;
  padding: 28px;
  border-radius: 8px;
  border: 1px solid #2d302f;
}

.usecase-item h4 {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 12px;
}

.item-desc {
  font-size: 15px;
  line-height: 1.7;
  color: #b5b5b5;
  margin-bottom: 20px;
}

/* 特徴リスト */
.item-bullets {
  list-style: none;
}

.item-bullets li {
  font-size: 14px;
  line-height: 1.7;
  color: #aaa;
  margin-bottom: 14px;
  padding-left: 14px;
  position: relative;
}

.item-bullets li::before {
  content: "・";
  position: absolute;
  left: 0;
  color: #86c90f;
  font-weight: 700;
}

.item-bullets li strong {
  color: #fff;
}

/* 実績表スタイル */
.result-table {
  width: 100%;
  border-collapse: collapse;
}

.result-table th,
.result-table td {
  padding: 16px;
  font-size: 14px;
  line-height: 1.6;
  border-bottom: 1px solid #2d302f;
  text-align: left;
}

.result-table union thead th {
  background-color: #242726;
  color: #fff;
  font-weight: 700;
  border-bottom: 2px solid #86c90f;
}

.result-table tbody th {
  width: 200px;
  color: #86c90f;
  background-color: #1a1c1b;
  font-weight: 700;
}

.result-table td {
  color: #ccc;
}

/* 最終フッターボタン位置 */
.usecase-footer {
  text-align: center;
  margin-top: 56px;
}

/* ページ最下部コピーライト */
.lp-footer {
  width: 100%;
  background-color: #000;
  padding: 30px 20px;
  text-align: center;
  border-top: 1px solid #111312;
}

.lp-footer p {
  font-size: 13px;
  color: #666;
}
/* 修正後：このように書き換えてください */
.usecase-image-wrap {
  width: 100%;
  margin-top: 24px;      /* 箇条書きとの間の余白 */
  margin-bottom: 24px;   /* ★追加：下の「2. HPC...」との間の余白★ */
  display: flex;
  justify-content: center;
  align-items: center;
}

.usecase-inserted-img {
  width: 100%;
  max-width: 900px;   /* ご指定の横幅 */
  height: auto;       /* 比率を保ったまま縦幅（350px）を自動調整 */
  object-fit: contain;
  border-radius: 6px; /* カードの内側に馴染むよう少し角を丸める */
}
/* --- 新設：3つの画像を横並びにするスタイル --- */

.usecase-triple-images {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 24px;      /* 上の箇条書きとの間の余白 */
  margin-bottom: 48px;   /* ★追加：下の「導入実績...」見出しとの間の余白★ */
}

.triple-image-item {
  flex: 1;            /* 3本の幅を均等に分ける */
  aspect-ratio: 1 / 1; /* 画像を完全な正方形（1対1）に保つ指定 */
  overflow: hidden;
  border-radius: 6px;  /* 角を少し丸めてカードに馴染ませる */
}
.triple-img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* 正方形の枠に合わせて綺麗にトリミング・フィットさせる */
}

/* ------------------------------------
   全画面共通：レスポンシブ（タブレット・スマホ対応）
------------------------------------ */
@media screen and (max-width: 1200px) {
  .feature-title {
    font-size: 36px;
  }
  .feature-sub-title {
    font-size: 18px;
  }
  .section-main-title {
    font-size: 32px;
  }
  .col-inner-box {
    padding: 32px 20px;
  }
  .arch-block {
    flex-direction: column;
    gap: 16px;
  }
  .arch-img-wrap {
    width: 140px;
  }
  .product-body {
    gap: 24px;
  }
   /* （@media screen and (max-width: 768px) の中に追記してください） */
  .usecase-triple-images {
    flex-direction: column; /* スマホ時は縦並びにする */
    gap: 16px;              /* 縦並び時の画像同士のすき間 */
  }
  .triple-image-item {
    max-width: 100%;
    height: auto;
  }
}

@media screen and (max-width: 1024px) {
  .hero-title {
    font-size: 48px;
  }
  .hero-lead {
    font-size: 20px;
  }
  .spec-num {
    font-size: 44px;
  }
  .spec-unit {
    font-size: 20px;
  }
  .comparison-row {
    flex-direction: column;
    gap: 24px;
  }
  .product-body {
    flex-direction: column;
    align-items: center;
  }
  .product-graphic {
    max-width: 100%;
    margin-bottom: 24px;
  }
  .product-specs {
    width: 100%;
  }
}

@media screen and (max-width: 960px) {
  .feature-section {
    min-height: auto;
    background-image: none;
    padding: 60px 24px;
  }
  .feature-container {
    flex-direction: column;
    align-items: flex-start;
  }
  .feature-content {
    max-width: 100%;
    margin-bottom: 40px;
  }
  .feature-title br,
  .feature-sub-title br {
    display: none;
  }
  .feature-graphic-sp {
    display: block;
    width: 100%;
    text-align: center;
  }
  .feature-img-sp {
    width: 100%;
    max-width: 500px;
    height: auto;
    object-fit: contain;
  }
}

@media screen and (max-width: 768px) {
  .hero-section {
    min-height: auto;
    padding: 60px 24px;
  }
  .hero-container {
    flex-direction: column;
    gap: 48px;
    text-align: center;
  }
  .hero-title {
    font-size: 36px;
    display: inline-block;
    width: 100%;
    padding-bottom: 16px;
    margin-bottom: 20px;
  }
  .hero-lead {
    font-size: 16px;
  }
  .hero-lead br {
    display: none;
  }
  .hero-graphic {
    justify-content: center;
    width: 100%;
  }
  .server-image {
    max-width: 100%;
  }
  .specs-section {
    padding: 40px 24px;
  }
  .specs-grid {
    flex-direction: column;
    gap: 16px;
  }
  .spec-card {
    padding: 24px 20px;
  }
  .spec-num {
    font-size: 48px;
  }
  .spec-desc br {
    display: none;
  }
  .specs-note {
    margin-top: 16px;
  }
  .comparison-section {
    padding: 40px 24px 60px 24px;
  }
  .section-main-title {
    font-size: 26px;
  }
  .section-sub-title {
    font-size: 16px;
  }
  .col-title {
    font-size: 20px;
    margin-bottom: 24px;
  }
  .workload-block {
    flex-direction: column;
    gap: 16px;
    text-align: center;
    align-items: center;
  }
  .workload-text h4 {
    font-size: 18px;
  }
  .formfactor-box {
    flex-direction: column;
    text-align: center;
    padding: 32px 20px;
    gap: 20px;
  }
  .formfactor-text h3 {
    font-size: 18px;
  }
  .formfactor-text p {
    font-size: 14px;
  }
  .products-section {
    padding: 40px 24px;
  }
  .product-card {
    padding: 24px 16px;
    margin-bottom: 32px;
  }
  .product-main-title {
    font-size: 18px;
    padding-left: 10px;
    margin-bottom: 20px;
  }
  .spec-label {
    width: 80px;
    font-size: 13px;
  }
  .spec-val {
    font-size: 13px;
  }
  .price-box {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px;
  }
  .footer-notice {
    font-size: 13px;
  }
  .btn-gold {
    width: 100%;
    min-width: auto;
    font-size: 16px;
    padding: 16px 20px;
  }
  .intro-section {
    padding: 50px 24px 80px 24px;
  }
  .intro-main-title {
    font-size: 24px;
  }
  .intro-lead-box {
    font-size: 14px;
    margin-bottom: 40px;
  }
  .detail-block h3 {
    font-size: 18px;
  }
  .detail-block p {
    font-size: 14px;
  }
  .sub-features {
    padding-left: 0;
  }
  .detailed-specs-section {
    padding: 50px 24px;
  }
  .detailed-specs-main-title {
    font-size: 24px;
  }
  .brand-title {
    font-size: 15px;
    padding-left: 10px;
  }
  .model-spec-box {
    padding: 20px 16px;
  }
  .model-spec-title {
    font-size: 15px;
    line-height: 1.4;
  }
  .spec-table th {
    width: 80px;
    padding: 10px 8px;
    font-size: 12px;
  }
  .spec-table td {
    padding: 10px 8px;
    font-size: 12px;
  }
  /* セクション07用の調整（スマホ最適化） */
  .usecase-section {
    padding: 50px 24px;
  }
  .usecase-main-title {
    font-size: 24px;
  }
  .usecase-lead-box {
    font-size: 14px;
    margin-bottom: 40px;
  }
  .block-title {
    font-size: 18px;
  }
  .usecase-item {
    padding: 20px 16px;
  }
  .usecase-item h4 {
    font-size: 16px;
  }
  .item-desc {
    font-size: 14px;
  }
  .result-table th, 
  .result-table td {
    padding: 10px 8px;
    font-size: 12px;
  }
  .result-table tbody th {
    width: 90px;
  }
}

/* ------------------------------------
   WordPress共通ヘッダーとの余白調整
------------------------------------ */
#nvidia-h200-lp-wrap .hero-section {
  padding-top: 100px !important; /* メニューバーとの間に100pxの余白を強制的に確保 */
}

/* 画面が狭いスマホ・タブレット時の余白調整 */
@media screen and (max-width: 768px) {
  #nvidia-h200-lp-wrap .hero-section {
    padding-top: 60px !important; /* スマホ時は少しタイト（60px）に調整 */
  }
}

/* ------------------------------------
   手ごわい共通フッター対策（大枠ごと押し上げ）
------------------------------------ */
#nvidia-h200-lp-wrap {
  margin-bottom: 600px !important; /* LP全体を丸ごと上に600px押し上げます */
}

/* スマホ表示時も同様にしっかり余白を確保 */
@media screen and (max-width: 768px) {
  #nvidia-h200-lp-wrap {
    margin-bottom: 500px !important;
  }
}
/* ------------------------------------
  ヘッダーとの重なり解消
------------------------------------ */
#nvidia-h200-lp-wrap .feature-content {
  z-index: 1 !important; 
}