@charset "UTF-8";
/* ============================================================================
   旧DVD詳細ページ モバイル対応（後付け・2026-09）
   base.css / products.css の 960〜1000px 固定レイアウトを、狭い画面では
   流し込みに上書き。加えて サンプル画像／関連作品(#relate) は 全幅でグリッド化
   （旧 float＋jQueryの clear スクリプトが年齢認証除去で死んだため、
    高さのバラつきで段が崩れる → grid で常に詰めて配置）。
   画像拡大は highslide → ネイティブ <dialog>（detail-enhance.js）。
   ========================================================================== */

/* ===== サンプル画像／関連作品グリッド（全幅で有効） ===== */
ul#sampleImage {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 184px));
  gap: 8px; justify-content: start; padding: 6px 0 0;
}
ul#sampleImage li { float: none !important; width: auto !important; margin: 0; padding: 0; list-style: none; text-align: center; }
ul#sampleImage li a { display: block; }
ul#sampleImage li img { display: inline-block; max-width: 100%; height: auto; }

#relate ul {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 150px));
  gap: 16px 12px; justify-content: start; padding: 12px 0 0;
}
#relate ul li { float: none !important; width: auto !important; margin: 0; padding: 0; list-style: none; }
#relate ul li a { display: block; }
#relate ul li img { width: 100%; height: auto; display: block; }
#relate ul li p {
  margin: 5px 0 0; padding: 0; font-size: 11px; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
#relate .rel-all { margin: 16px 0 0; padding: 0; font-size: 12px; letter-spacing: .06em; }
#relate .rel-all a { color: #FFCC00; }
@media (max-width: 520px) {
  #relate ul { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
}

@media (max-width: 1000px) {
  html, body { overflow-x: hidden; }
  body { font-size: 81.25%; }            /* 75% は本文が小さすぎるので少しだけ上げる */

  #wrap   { width: auto !important; margin: 0 auto; padding: 0 10px; }
  #header { width: auto !important; }

  #header h1#logo, #header p#logo { float: none !important; padding: 10px 0 !important; text-align: center; }
  #header h1#logo img, #header p#logo img { max-width: 200px; height: auto; }

  #header #navi { float: none !important; width: auto !important; }
  #header #navi .twitterBlock { text-align: center; }
  #header #navi .twitterBlock p { text-align: center; }
  #header #navi ul.bnr_twitter {
    width: auto !important; margin: 0 !important;
    display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
  }
  #header #navi ul.bnr_twitter li { float: none !important; padding: 0 !important; }
  #header #navi ul.bnr_twitter li img { max-width: 100%; height: auto; }

  #header #navi ul#globalMenu {
    width: auto !important; padding: 10px 0 6px !important;
    display: flex; flex-wrap: wrap; gap: 4px 14px; justify-content: center;
  }
  #header #navi ul#globalMenu li,
  #header #navi ul#globalMenu li#tweet { float: none !important; height: auto !important; padding: 0 !important; }

  #header #navi ul#sub {
    width: auto !important; margin: 0 !important;
    display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
  }
  #header #navi ul#sub li { float: none !important; padding: 4px 0 0 !important; }

  #contents  { padding: 0 !important; }
  #naviBlock { width: auto !important; }
  #naviBlock h1, #naviBlock h1[class] {
    float: none !important; width: auto !important;
    padding: 16px 0 6px !important; font-size: 168% !important; line-height: 1.25;
  }
  #naviBlock p.label { float: none !important; padding: 0 0 8px !important; }
  #naviBlock ul.navi {
    height: auto !important; padding: 4px 0 8px !important;
    display: flex; flex-wrap: wrap; gap: 6px 18px;
  }
  #naviBlock ul.navi li,
  #naviBlock ul.navi li.amazon { float: none !important; padding: 0 !important; }

  h4.movie, h4.title { padding: 24px 0 6px !important; }
  #movie, #kokuchi, #addcontentsWide, #review, #recruit, #reviewBlock { width: auto !important; }

  /* パッケージ(400px float) ＋ スペック(530px float) → 縦積み */
  #detail { width: auto !important; padding-top: 14px !important; }
  #detail #package { float: none !important; width: auto !important; margin: 0 auto 16px !important; text-align: center; }
  #detail #package img { max-width: 300px; width: 100%; height: auto; }
  #detail #spec { float: none !important; width: auto !important; padding: 0 !important; }
  #detail #spec img { max-width: 100%; height: auto; }
  #detail #spec ul li,
  #detail #spec ul.btn li,
  ul.btn.clearfix li { float: none !important; padding: 0 0 8px !important; }

  /* サンプル画像／関連作品のグリッドは media query 外で全幅指定済み。ここは余白だけ */
  #sample { padding-top: 24px !important; }
  #relate { padding-top: 24px !important; }

  /* フッター */
  #footer { width: auto !important; padding: 40px 0 40px !important; }
  #footer ul.label { float: none !important; display: flex; flex-wrap: wrap; gap: 6px; }
  #footer ul.label li { float: none !important; padding: 0 !important; }
  #footer ul.label li img { max-width: 100%; height: auto; }
  #footer #maker ul { display: flex; flex-wrap: wrap; gap: 10px; }
  #footer #maker ul li, #footer #maker ul li.last { float: none !important; padding: 0 !important; }
  #footer p#pagetop { float: none !important; padding: 20px 0 0 !important; text-align: center; }

  img { max-width: 100%; height: auto; }
}

@media (max-width: 520px) {
  #naviBlock h1, #naviBlock h1[class] { font-size: 148% !important; }
}

/* ===== 画像拡大 <dialog>（highslide 置き換え）=====
   新詳細テンプレ template_detail_faithful.html のライトボックスと同一の見た目・操作。
   旧ページは CSS 変数を持たないので配色は実値でハードコード。
   （--ink #CFB77E / --ink-hi #EEE4D1 / --ink-dim #8f815d / --line-2 #685C3F） */
dialog.lightbox {
  border: 1px solid #685C3F; background: #000; padding: 0;
  max-width: 94vw; max-height: 94vh; color: #CFB77E;
}
dialog.lightbox::backdrop { background: rgba(0, 0, 0, .85); }
dialog.lightbox .lb-stage {
  position: relative; display: flex; align-items: center; justify-content: center;
}
dialog.lightbox .lb-stage img {
  max-width: 94vw; max-height: 80vh; width: auto; object-fit: contain; display: block;
}
dialog.lightbox .lb-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(0, 0, 0, .6); border: 1px solid #685C3F; color: #EEE4D1;
  font-size: 20px; width: 44px; height: 56px; cursor: pointer;
}
dialog.lightbox .lb-prev { left: 8px; }
dialog.lightbox .lb-next { right: 8px; }
dialog.lightbox .lb-btn[hidden] { display: none; }
dialog.lightbox .lb-close {
  position: absolute; top: 8px; right: 8px;
  background: rgba(0, 0, 0, .6); border: 1px solid #685C3F; color: #EEE4D1;
  font-size: 14px; padding: 5px 12px; cursor: pointer; letter-spacing: .1em;
}
dialog.lightbox .lb-count {
  padding: 8px; text-align: center; font-size: 12px; color: #8f815d; letter-spacing: .1em;
}
a.highslide { cursor: zoom-in; }