/* ==========================================================
 * 製品詳細ページ スタイルシート - 最終統一版
 * ========================================================== */

/* 全体コンテナ */
.product-detail {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  max-width: 1200px;
  margin: 40px auto;
  padding: 20px;
  font-family: 'Noto Sans JP', sans-serif;
  color: #333;
  flex-direction: column;
}

/* ----------------------------------------------------------------- */
/* 固定ヘッダーの被り対策専用のスペーサー (高さを確保) */
/* ----------------------------------------------------------------- */
.header-spacer {
  /* PC向け：ヘッダーの高さ140pxに、さらに余裕を持たせて設定 */
  height: 150px; 
  background-color: #F2F6F7; /* 背景が透けるのを防ぐ */
  position: relative;
  z-index: 10;
}

@media screen and (max-width: 960px) {
  .header-spacer {
      /* SP向け：ヘッダーの高さ100pxに、さらに余裕を持たせて設定 */
      height: 110px;
  }
}

/* ----------------------------------------------------------------- */
/* 過剰な余白を削除し、タイトルエリアのレイアウトを復元 */
/* ----------------------------------------------------------------- */

/* 製品タイトルエリアを囲む要素（.product-title-header）の上余白を強制的に削除 */
.product-detail .product-title-header {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* product-detail 内のタイトル自体に上余白がある場合も削除 */
.product-detail .product-title-header h1,
.product-detail .product-title-header .category {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* パンくずリスト非表示（以前の修正） */
.pankuzu {
  display: none !important;
}

/* ----------------------------------------------------------
 * 全体タイトルヘッダー
 * ---------------------------------------------------------- */
.product-title-header {
    width: 100%;
    margin-bottom: 20px;
}
.category {
  font-size: 14px;
  color: #666;
  margin-bottom: 5px;
}
.product-title {
  font-size: 28px;
  margin: 0;
  border-bottom: 5px solid #0033cc;
  padding-bottom: 5px;
  display: block; 
  text-align: left; 
}


/* ----------------------------------------------------------
 * メインコンテンツエリア
 * ---------------------------------------------------------- */
.product-content-area {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    width: 100%;
    align-items: flex-start;
}
.product-info h2:first-child,
.product-info p:first-child {
    margin-top: 0;
}

/* ----------------------------------------------------------
 * 左：メインメディア (画像・サムネイル)
 * ---------------------------------------------------------- */
.product-media {
  flex: 1 1 60%; 
  display: flex;
  flex-direction: column; 
  min-height: 0; 
  max-height: none; 
  padding: 0;
  
}
/* ------------------------------------------- */
/* product-detail に overflow: hidden が必要 */
/* ------------------------------------------- */
.product-detail {
  border-radius: 20px;
  overflow: hidden; /* ★これが有効になっていることを確認 */
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* === メインメディア全体 === */
/* 親要素に角丸と overflow:hidden */
.main-media {
  position: relative;
  width: 95%;             /* 中央寄せのための幅 */
  margin: 0 auto;         /* 中央寄せ */
  height: 0;
  padding-bottom: 56.25%; /* 16:9 */
  /* border-radius: 20px; */
  overflow: hidden;       /* 角丸に沿って余白を切り取る */
}


/* 画像だけに適用 - 最終修正: 特定性MAX */
.main-media img.main-media-image { /* imgタグとクラス名を組み合わせる */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;             
  height: 100%;            
  /* border-radius: 20px !important; ★★★ !importantを使い続ける ★★★ */
  object-fit: contain;     
  display: block;
}

/* === 動画（mp4など） === */
.main-media .main-media-video,
.youtube-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;  /* 動画・YouTubeはcoverのままでもOK */
  border-radius: inherit; /* 親の角丸を継承 */
}


/* === YouTubeラッパー === */
.youtube-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  overflow: hidden; /* ← iframeの角丸を守る！ */
  z-index: 1;
}

/* === YouTube iframe === */
.youtube-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 20px;
}


/* 拡大ヒントテキストのスタイル */
.zoom-hint {
  position: absolute; 
  bottom: 10px; 
  left: 50%;
  transform: translateX(-50%); 
  padding: 5px 10px;
  background-color: rgba(0, 0, 0, 0.2); /* 視認性向上のため、少し濃くしました */
  color: white;
  font-size: 12px;
  border-radius: 4px;
  z-index: 10; /* メディア(z-index: 1)より上に表示 */
  pointer-events: none; /* クリックイベントを透過させる */
  transition: opacity 0.3s;
  
  /* ★★★ 通常時は透明（見えない状態）にする ★★★ */
  opacity: 0; 
}

.main-media:hover .zoom-hint {
  opacity: 1; 
}
/* ★★★ 新規追加: 画像以外がアクティブな場合はヒントを非表示にするロジック ★★★ */
/* 画像が表示されているとき以外は、JavaScript側で display: none; を上書きする必要あり */
.main-media-video:not([style*="display: none;"]) ~ .zoom-hint,
.youtube-wrapper:not([style*="display: none;"]) ~ .zoom-hint {
  opacity: 0 !important; /* 強制的に非表示 */
  display: none !important; /* 確実に非表示 */
}


/* ----------------------------------------------------------
 * サムネイルリスト
 * ---------------------------------------------------------- */
 .thumbnail-list {
  display: flex;
  gap: 12px;
  margin-top: 15px;
  flex-wrap: wrap; 
  flex-direction: row; 
  align-items: flex-start; 
  
  max-height: 250px; 
  overflow-y: auto;  
  
  width: 95%; 
  margin-left: auto;
  margin-right: auto;
  justify-content: center; 
  
  -ms-overflow-style: none;
  scrollbar-width: none;
  padding-bottom: 10px; 
}
.thumbnail-list::-webkit-scrollbar {
  display: none;
}

/* サムネイルアイテム (ラッパーとimgの共通スタイル) */
.thumbnail-list .thumb-wrapper {
  width: 100px;
  height: 100px;
  flex-shrink: 0; 
  border: 2px solid transparent; 
  /* border-radius: 6px; */
  cursor: pointer;
  transition: 0.3s;
  overflow: hidden; 
  position: relative; 
}

/* imgタグには border を付けず、親要素に合わせる */
.thumbnail-list .thumb-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ホバーとアクティブのスタイルもラッパーに適用 */
.thumbnail-list .thumb-wrapper:hover,
.thumbnail-list .thumb-wrapper.active {
  border-color: #0033cc;
}

/* ★ 新規追加: キャプションのスタイル ★ */
.thumb-caption {
  font-size: 11px;
  color: #555;
  text-align: center;
  margin: 0; /* 上下のマージンをリセット */
  max-width: 100px; /* サムネイルの幅に合わせる */
  line-height: 1.3;
  overflow-wrap: break-word; /* 長い単語を折り返す */
}
/* ★ サムネイルとそのキャプションのコンテナ ★ */
.thumb-item {
  display: flex; 
  flex-direction: column;
  align-items: center; 
  flex-shrink: 0; 
}

/* ★ サムネイル画像（ラッパー）とキャプションの間にスペースを作成 ★ */
.thumbnail-list .thumb-wrapper {
  /* ... (width: 100px; height: 100px; などのスタイルを維持) ... */
  margin-bottom: 5px; /* キャプションとの間にスペースを作る */
}

/* ★ キャプションのスタイル ★ */
.thumb-caption {
  font-size: 11px;
  color: #555;
  text-align: center;
  margin: 0; 
  max-width: 100px; /* サムネイルの幅に合わせる */
  line-height: 1.3;
}

/* ----------------------------------------------------------
 * YouTubeサムネイルの再生ボタン
 * ---------------------------------------------------------- */
.thumbnail-list .youtube-thumb-wrap::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3); 
  z-index: 5;
  border-radius: 6px;
  pointer-events: none;
}
.thumbnail-list .youtube-thumb-wrap::after {
  content: '\25B6'; 
  position: absolute;
  font-size: 28px;
  color: white;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
  pointer-events: none;
  text-shadow: 0 0 5px rgba(0,0,0,0.7);
}


/* ----------------------------------------------------------
 * 右：製品情報
 * ---------------------------------------------------------- */
.product-info {
  flex: 1 1 35%; 
  display: flex;
  flex-direction: column; 
}
.feature h2,
.merit h2 {
  font-size: 20px;
  margin: 20px 0 10px;
  border-left: 7px solid #0033cc;
  padding-left: 10px;
}
.merit ul {
  list-style: none;
  padding: 0;
}
.merit li {
  margin: 8px 0;
  padding-left: 20px;
  position: relative;
  line-height: 1.6;
}
.merit li::before {
  content: "●";
  color: #0033cc;
  position: absolute;
  left: 0;
}

/* ★★★ 新規追加: マーカーを非表示にするクラス ★★★ */
.merit li.no-marker {
    /* マーカー分の左パディングを解除（項目を左に寄せる）*/
    padding-left: 0; 
    /* 項目間のマージンは維持 */
    margin: 8px 0; 
}

.merit li.no-marker::before {
    /* マーカーの表示を完全に無効化 */
    content: none; 
}
/* ------------------------------------------------ */

.merit li:empty,
.merit li:has(br) {
    display: none;
}



/* ----------------------------------------------------------
 * ボタン
 * ---------------------------------------------------------- */
.btn-group {
  margin-top: auto; 
  margin-bottom: 0; 
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}
.btn {
  flex: 1; 
  text-align: center;
  padding: 12px 20px;
  background: #0033cc;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
  transition: background 0.3s;
}
.btn:hover {
  background: #009933;
  color: #fff;
}
.btn.wide {
  flex: 100%; 
}

/* ----------------------------------------------------------
 * モーダル
 * ---------------------------------------------------------- */
.modal {
  display: none; 
  position: fixed;
  z-index: 1000;
  left: 0; top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  justify-content: center;
  align-items: center;
  padding: 20px;
  cursor: pointer; 
}
.modal.is-open {
    display: flex;
}
.modal-content,
.modal video {
  max-width: 80vh;  
  max-height: 70vh; 
  width: auto;
  height: auto;
  object-fit: contain; 
  border-radius: 10px;
  cursor: default; 
}
.close {
  position: absolute;
  top: 30px;
  right: 50px;
  color: #fff;
  font-size: 40px;
  cursor: pointer;
  z-index: 1001; 
}

/* 文章内の文字の色変更 */
.highlight-blue {
  color: #007bff;
  font-weight: bold;
}
.highlight-red {
  color: #dc3545;
}


/* ----------------------------------------------------------
 * レスポンシブ対応 (768px以下) - 最終修正
 * ---------------------------------------------------------- */
 @media (max-width: 768px) {
  .product-detail {
    flex-direction: column; 
  }
  
  .product-content-area {
    flex-direction: column; /* 左右カラムを縦積みにする */
  }
  .product-title {
    font-size: 20px;
  }
  
  .feature p {
    font-size: 15px;
  }

  .merit li {
    font-size: 15px;
    margin: 8px 0;
    padding-left: 20px;
    position: relative;
  }
  
  /* ★★★ 修正箇所 1: メディアコンテナを全幅に強制し、余計な幅制御を削除 ★★★ */
  .product-media {
    flex: 1 1 100%; /* 全幅に強制 */
    width: 100%;
  }

  /* メインメディアコンテナを中央寄せに戻す（パディングハックはそのまま） */
  .main-media {
    width: 95%; /* PCと同じ幅設定に戻す */
    margin-left: auto; /* 中央寄せ */
    margin-right: auto; /* 中央寄せ */
    padding-bottom: 56.25%; /* 16:9の縦横比を維持 */
  }
  
  /* ★★★ 修正箇所 2: サムネイルリストを全幅にし、中央寄せを維持 ★★★ */
  .thumbnail-list {
      width: 100%;
      margin-left: 0;
      margin-right: 0;
      justify-content: center; /* 中央寄せを維持 */
  }

  /* モバイルでボタンをすべて全幅にする */
  .btn-group .btn {
      flex: 1 1 100%; 
  }

  .modal-content,
  .modal video {
    max-width: 95vw;    /* 画面幅の95%を使う */
    max-height: 70vh;   /* 画面高さの70%に抑える */
  }
}