body {
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', Arial, sans-serif;
  background-color: #f0f2f5;
  color: #333;
}

/* product.html 製品紹介top */
/* 製品名 */
.hero-top {
background: linear-gradient(to right, #0d1b2a, #1b263b, #415a77, #778da9);
/*  background: linear-gradient(to right, #0f2027, #203a43, #2c5364);*/
  color: white;
  text-align: center;
  padding: 80px 20px;
}

.btn {
  background: #00bcd4;
  color: white;
  padding: 10px 20px;
  margin: 10px;
  border-radius: 5px;
  text-decoration: none;
  transition: background 0.3s;
  display: inline-block;
}

.btn:hover {
  background: #0097a7;
}

.category-section {
  padding: 60px 20px;
  text-align: center;
}

.category-section h2 {
  font-size: 28px;
  margin-bottom: 20px;
}

.center-text {
  max-width: 700px;
  margin: 0 auto 40px auto;
  font-size: 16px;
  line-height: 1.6;
}

.product-grid {
  display: flex;
  margin-bottom: 40px;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px;
}

.product {
	display: flex;
	flex-direction: column;
	align-items: center;	/* 左右中央揃え */
  justify-content: space-between;
	min-height: 320px;
	padding: 20px;
	background: linear-gradient(145deg, #f0f0f0, #ffffff);
	border: 1px solid #ccc;
	border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.6);
  transition: transform 0.3s ease;
  width: 250px;
  text-align: center;
}

/* カードをホバーしたかったら解放 */
/* .product:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.3);
} */


.product img {
  width: 80%;
height: 100px;
object-fit: contain;
margin-bottom: 5px;
}

.product-description {
  margin-bottom: auto; /* 説明文の下にスペースを確保 */
}


.product h3 {
  margin-top: 0;
  color: #004466;
  font-size: 1.6rem;
}

.product-icons {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 6px;
  margin-top: auto;
  margin-bottom: 20px;
}

.icon {
  display: inline-block;
  width: 48px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
  color: white;
}

.icon-2D  { background-color: #4CAF50; border: 2px solid #388E3C; }
.icon-3D  { background-color: #2196F3; border: 2px solid #1976D2; }
.icon-CAD { background-color: #607D8B; border: 2px solid #455A64; }
.icon-CAM { background-color: #FF9800; border: 2px solid #F57C00; }
.icon-CAE { background-color: #9C27B0; border: 2px solid #7B1FA2; }

.product-link {
  margin-bottom: 0;
}

@media (prefers-color-scheme: dark) {
  .product {
    background: linear-gradient(#2c2c2c, #1a1a1a);
    color: #f0f0f0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.6);
  }

  .icon-2D  { background-color: #388E3C; border-color: #2E7D32; }
  .icon-3D  { background-color: #1976D2; border-color: #1565C0; }
  .icon-CAD { background-color: #455A64; border-color: #37474F; }
  .icon-CAM { background-color: #F57C00; border-color: #EF6C00; }
  .icon-CAE { background-color: #7B1FA2; border-color: #6A1B9A; }
}


/* 各productコンテンツ */
/* 各 hero セクションの個別背景色 */
.hero {
  background: linear-gradient(to right, #6ca0b8, #5a8ca3, #49788e, #38647a);
  /*background: linear-gradient(to right, #004466, #0077aa);*/
  color: white;
  padding: 3em 2em;
  text-align: center;
  margin: 0;
}

.hero-cad {
  background: linear-gradient(to right, #6ca0b8, #5a8ca3, #49788e, #38647a);
}

.hero-cam {
  background: linear-gradient(to right, #7fb8a9, #6aa393, #558e7d, #407968);
}

.hero-cae {
  background: linear-gradient(to right, #a28fcf, #8a78b8, #7362a1, #5c4b8a);
}

.hero-hardware {
  background: linear-gradient(to right, #8a9ba8, #768a96, #627a84, #4e6972);
}


/* ============== */
/* セクション共通 */
/* ============== */
.features {
  padding: 2em;
  background-color: white;
  margin: 1em auto;
  max-width: 1000px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  border-radius: 8px;
}

.features h2 {
  margin: 0 0 0.5em 0;         /* 下余白だけ少し */
  font-size: 2.8rem;
  margin: 1.5em;
}

.feature-block {
  display: flex;
  align-items: center;
  gap: 2em;
}

.feature-block.reverse {
  flex-direction: row-reverse;
}

.feature-block img {
  max-width: 100%;
  height: auto;
  width: 40%;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.feature-text {
  flex: 1;                     /* テキストが残り幅を使う */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.feature-text h2 {
  margin: 0 0 0.5em 0;         /* 下余白だけ少し */
  font-size: 3.6rem;
  margin-bottom: 1.5em;
}

.feature-text h3 {
  margin-top: 0;
  color: #004466;
  font-size: 1.6rem;
}

.feature-text p {
  font-size: 1.6rem;
  line-height: 1.8;
  margin: 0;
}

/* ====================================
   feature-block: 左：説明+右：画像上下中央
   ==================================== */
/* 全体ブロック */
#features-main {
  text-align: left !important;
}

#features-main .feature-block.row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;   /* ← テキスト高さ基準で画像中央 */
  justify-content: space-between !important;
  gap: 2em !important;
  padding: 2em !important;
}

#features-main .text-area {
  flex: 1 !important;
}

#features-main .image-column {
  flex: 0 0 40% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

#features-main .image-column img {
  width: 80% !important;
  max-width: 300px !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
}



/* 画像と説明応用編*/
/* =============================
   左側：画像大1/小縦2 右側：説明文
   ============================= */
.feature-block.left-image {
  display: flex;
  align-items: center;
  gap: 3em;
  margin-left: 1.5em; /*左に余白 */
  margin-top: 2.5em; /* h2との間に余白 */
  padding: 0 2em; /* ← 左右に2emの余白を追加（値で調整可能） */
}

/* 左側　画像 */
.feature-block.left-image .image-group {
  flex: 0 0 40%;
  display: flex;
  align-items: flex-start;
  gap: 1em;
  margin-left: 0;          /* 内側調整済み */
}

/* 画像の高さを維持 */
.feature-block.left-image .large-img {
  height: 160px;
  width: auto;
  border-radius: 8px;
  object-fit: cover;
}

.feature-block.left-image .small-img-group {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 160px;
  gap: 0.5em;
}

.feature-block.left-image .small-img {
  width: 100%;
  height: 48%;
  border-radius: 8px;
  object-fit: cover;
}

/* 右側　説明文 */
.feature-block.left-image .feature-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  padding: 0;
}

/* h3 */
.feature-block.left-image .image-text h3 {
  font-size: 1.6rem;
  font-weight: bold;
  color: #004466;
  margin: 0 0 0.6em 0;    /* 下に自然な余白を確保 */
}


/* 説明文 p */
.feature-block.left-image .feature-text p {
  font-size: 1.6rem;
  line-height: 1.8;
  color: #333;
  margin-top: 0; /* ← 重複余白防止 */
}


/* =============================
   feature-block: 中央画像＋説明
   ============================= */
.feature-block.centered-img {
  display: flex;
  flex-direction: column;
  align-items: stretch; /* ← 修正ポイント */
  margin-top: 5em;
  position: relative;
}

/* 説明文 */
.feature-block.centered-img .feature-text {
  width: 70%;
  margin-left: 15%;
  text-align: left;
}

.feature-block.centered-img .feature-text h3 {
  font-size: 1.6rem;
  font-weight: bold;
  color: #004466;
  margin-bottom: 0 0 0.6em 0; /* 下の余白を控えめに */
}

.feature-block.centered-img .feature-text p {
  font-size: 1.6rem;
  line-height: 1.8;
  color: #333;
  margin: 0;
  margin-bottom: 0.2em;   /* 下余白（画像との距離） */
}

/* 画像部分 */
.feature-block.centered-img .image-wrapper {
  width: 80%;        /* ← 広げる */
  margin-left: 10%;  /* ← 中央寄せ位置（あなたが好まれた配置） */
  display: flex;
  justify-content: center;
  margin-top: 0;           /* 説明文下のmarginで距離確保 */
}

.feature-block.centered-img .image-wrapper img {
  width: 60% !important;  /* ← 画像サイズ調整 拡大を確実に反映 */
  height: auto;
  border-radius: 8px;
  object-fit: cover;
  display: block;
  margin: 0 auto;         /* 中央寄せ */
}


/* ====================================
   feature-block: 左：説明+右：画像縦並び
   ==================================== */
/* 全体ブロック */
.image-row-block {
  display: flex;
  gap: 1.5em;       /* 説明文と画像の間隔 */
  padding: 2em 2em;
  margin-top: 2.5em; /* padding の代わりに margin を使ってもOK */
}

/* 左側：説明文 */
.image-row-block .text-area {
  flex: 0 0 60%;
  margin-left: 2em; /* padding の代わりに margin を使ってもOK */
}

.image-row-block .text-area h3 {
  font-size: 1.6rem;
  font-weight: bold;
  color: #004466;
  margin-bottom: 0.6em;
}

.image-row-block .text-area p,
.image-row-block .text-area ul {
  line-height: 1.7;
  margin-bottom: 0.8em;
}

/* 右側：画像列 */
.image-row-block .image-column {
  flex: 0 0 40%;              /* 幅30% */
  display: flex;
  flex-direction: column;
  align-items: center;        /* 横方向の中央揃え */
  justify-content: flex-start; /* 縦方向は上揃え */
  gap: 1.2em;
  margin-left: -10%;           /* ← ここで少し中央寄せ（説明文に近づける） */
}

/* 個別調整用クラス */
.image-row-block .image-column img {
  width: 100%;           /* 親の30%に収まる */
  max-width: 400px;      /* デフォルトの最大幅 */
  border-radius: 8px;
  object-fit: cover;
}

/* 大きく見せたい画像 */
.image-row-block .image-column img.large-img {
  max-width: 360px;      /* 調整可能 */
}

/* 少し小さめでも良い画像 */
.image-row-block .image-column img.small-img {
  max-width: 200px;      /* 調整可能 */
}

/* ====================================
   画像拡大popup
   ==================================== */
/* クリック時に表示される背景と画像 */
.image-popup {
  display: none; /* 初期は非表示 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8); /* 背景を暗く */
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

/* 表示状態 */
.image-popup.active {
  display: flex;
}

/* 拡大画像 */
.image-popup img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
  cursor: zoom-out;
  transition: transform 0.3s ease;
}

/* ホバー必要ならアクティブにする
  .image-popup img:hover {
  transform: scale(1.02);
} */

/* サムネイル側のカーソル */
.popup-img {
  cursor: zoom-in;
  transition: transform 0.3s ease;
}
/* ホバー必要ならアクティブにする
.popup-img:hover {
  transform: scale(1.05);
}*/


/* === サポートセクション === */
.support-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
}

/* 見出し */
.support-section h2 {
  font-size: 2rem;
  font-weight: bold;
  color: #004466;
  margin-bottom: 1.5em;
}

/* サポートブロック全体（画像＋説明文） */
.support-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5em;
  max-width: 800px;
  margin: 0 auto;
}

/* 画像設定 */
.support-block img {
  width: 40%;             /* セクション幅の25%（20〜30%推奨） */
  max-width: 400px;       /* 大画面でも上限設定 */
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* テキストエリア */
.support-text {
  max-width: 700px;
  font-size: 1.6rem;
  line-height: 1.8;
  color: #333;
}

.support-text a {
  display: inline-block;            /* ボタンとして表示 */
  background-color: #0077aa;       /* ボタン色 */
  color: #fff;                     /* 文字色 */
  font-weight: bold;
  padding: 0.6em 1.2em;            /* 上下左右の余白 */
  border-radius: 6px;              /* 角丸 */
  text-decoration: none;           /* 下線を消す */
  transition: all 0.3s ease;       /* ホバー時の変化を滑らかに */
  margin-top: 0.5em;               /* 上に少し余白 */
}

/* ホバー時の変化 */
.support-text a:hover {
  background-color: #005577;       /* 少し濃い色に */
  transform: translateY(-2px);     /* 少し浮き上がる効果 */
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* ============== */
/*  動画コーナー  */
/* ============== */
.video-carousel {
  padding: 2em;
  background-color: white;
  margin: 2em auto;
  max-width: 1000px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  border-radius: 8px;
}

.video-carousel h2 {
  font-size: 1.8rem;
  color: #004466;
  margin-bottom: 1em;
}

.video-swiper {
  width: 100%;
  overflow: hidden;
}

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.swiper-slide video {
  width: 300px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.swiper-slide.dimmed {
  opacity: 0.5;
  transform: scale(0.9);
}

.swiper-slide.center-hover {
  transform: scale(1.2);
  z-index: 2;
}


/* ============== */
/* バージョン情報 */
/* ============== */
.versions {
      padding: 2em;
      background-color: white;
      margin: 2em auto;
      max-width: 1000px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      border-radius: 12px;
    }

.tab-buttons {
      display: flex;
      justify-content: center;
      gap: 1em;
      margin-bottom: 1.5em;
      flex-wrap: wrap;
    }

.tab-btn {
      padding: 0.6em 1.4em;
      border: 2px solid transparent;
      background: linear-gradient(to right, #0077aa, #004466);
      color: white;
      font-weight: bold;
      border-radius: 30px;
      cursor: pointer;
      box-shadow: 0 4px 8px rgba(0,0,0,0.2);
      transition: all 0.3s ease;
    }

.tab-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 12px rgba(0,0,0,0.3);
    }

.tab-btn.active {
      background: linear-gradient(to right, #ff9900, #ff6600);
      color: white;
      border: 2px solid #ff6600;
      box-shadow: 0 6px 12px rgba(0,0,0,0.3);
      font-weight: bold;
    }

.tab-frame iframe {
      width: 100%;
      height: 600px;
      border-radius: 8px;
      border: none;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }


.specs {
  padding: 2em;
  background-color: white;
  margin: 1em auto;
  max-width: 1000px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  border-radius: 8px;
}

.specs table {
  width: 100%;
  border-collapse: collapse;
}

.specs th, .specs td {
  border: 1px solid #ccc;
  padding: 0.8em;
  text-align: left;
}

.contact {
  padding: 2em;
  background-color: white;
  margin: 1em auto;
  max-width: 1000px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  border-radius: 8px;
}


.hero-support {
  background: linear-gradient(to right, #b0c7d6, #9bb4c4, #86a1b2, #718ea0);
}