/*=============================================================
  sh_wgn_hg_main.css
  ハンガーラック・販売促進什器ページ
  ・タイル背景 ダークブルー被り（san_gaku_kan.cssと同系）
=============================================================*/

/* ====== リセット ====== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ====== ベース ====== */
html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, 'MS PGothic', sans-serif;
  font-size: 13px;
  line-height: 1.8;
  color: #e8e8ff;
  background-color: #030510;
  min-width: 320px;
  -webkit-text-size-adjust: 100%;
}

/* ====== タイル背景 ====== */
#tile-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 2px;
  pointer-events: none;
  background: #030510;
}
@media screen and (max-width: 768px) {
  #tile-bg {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(5, 1fr);
  }
}
#tile-bg .tile-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  filter: brightness(0.60) saturate(0.78);
  background: #030510;
}

/* ====== オーバーレイ（ダークブルー） ====== */
#tile-overlay {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    135deg,
    rgba(5, 10, 50, 0.72) 0%,
    rgba(3, 6, 38, 0.64) 50%,
    rgba(4, 8, 45, 0.70) 100%
  );
  pointer-events: none;
}

/* ====== ガラス反射 ====== */
#glass-lines {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
#glass-lines svg { width: 100%; height: 100%; }

/* ====== リンク ====== */
a { color: #c8e6ff; text-decoration: none; }
a:hover { color: #ffffff; text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; border: none; }

/* ====== ページ外枠 ====== */
.page-wrapper {
  position: relative;
  z-index: 3;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 12px 80px;
}

/* ====== パンくず ====== */
.breadcrumb-nav {
  max-width: 760px;
  margin: 0 auto;
  padding: 6px 12px;
  font-size: 0.78rem;
  background: rgba(0,0,0,0.35);
  position: relative;
  z-index: 3;
}
.breadcrumb-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  padding: 0;
  color: #c8e6ff;
}
.breadcrumb-list li + li::before { content: "　›　"; color: #668899; }
.breadcrumb-list a { color: #c8e6ff; }

/* ====== ヘッダー ====== */
.hw-header {
  background: rgba(5, 10, 40, 0.90);
  border-bottom: 2px solid rgba(100, 160, 255, 0.25);
  padding: 10px 12px 0;
  position: relative;
  z-index: 3;
}
.hw-header-brand {
  font-size: clamp(0.7rem, 2vw, 0.82rem);
  color: rgba(200,220,255,0.70);
  margin-bottom: 6px;
  line-height: 1.5;
}
.hw-header-brand a {
  color: rgba(200,220,255,0.90);
  text-decoration: none;
}
.hw-header-brand a:hover { color: #fff; }
.hw-header-brand .sep { color: rgba(200,220,255,0.35); margin: 0 0.3em; }
.hw-header-title {
  font-size: clamp(1.1rem, 4vw, 1.5rem);
  font-weight: bold;
  color: #ffffff;
  text-align: center;
  padding: 8px 0 10px;
  letter-spacing: 0.04em;
}

/* ====== タブナビ ====== */
.hw-tab-nav {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  padding-top: 10px;
}
.hw-tab-nav a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 6px 10px;
  text-align: center;
  font-size: clamp(12px, 2.5vw, 14px);
  font-weight: bold;
  color: rgba(180, 210, 255, 0.85);
  text-decoration: none;
  border-radius: 5px 5px 0 0;
  border: 1px solid rgba(80, 130, 220, 0.35);
  background: rgba(10, 20, 60, 0.55);
  transition: background 0.18s, color 0.18s;
}
.hw-tab-nav a:hover {
  background: rgba(20, 50, 120, 0.75);
  color: #ffffff;
  text-decoration: none;
}
.hw-tab-nav a.active {
  background: rgba(15, 40, 100, 0.90);
  color: #c8e6ff;
  border-color: rgba(80, 160, 255, 0.45);
}

/* ====== セクション ====== */
.hw-section { padding: 20px 0 10px; }

.hw-section-title {
  font-size: clamp(1rem, 3.5vw, 1.25rem);
  font-weight: bold;
  color: #c8e6ff;
  text-align: center;
  padding: 10px 0 8px;
  border-bottom: 1px solid rgba(80, 130, 220, 0.30);
  margin-bottom: 14px;
}

/* ====== イントロ ====== */
.hw-intro {
  background: rgba(5, 15, 45, 0.72);
  border: 1px solid rgba(60, 100, 200, 0.20);
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 14px;
  font-size: 0.88rem;
  color: #d8eaff;
  line-height: 1.85;
}
.hw-intro p { margin-bottom: 0.7em; }
.hw-intro p:last-child { margin-bottom: 0; }
.hw-intro strong { color: #c8e6ff; }
.hw-intro a { color: #90c8ff; }

/* ====== 注記 ====== */
.hw-note {
  font-size: 0.82rem;
  color: rgba(180, 210, 255, 0.75);
  margin: 4px 0;
}

/* ====== 商品グリッド ====== */
.hw-product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 14px 0;
}
.hw-item {
  background: rgba(10, 20, 55, 0.65);
  border: 1px solid rgba(60, 100, 200, 0.22);
  border-radius: 8px;
  overflow: hidden;
  padding: 8px 6px 10px;
  transition: border-color 0.2s, transform 0.2s;
}
.hw-item:hover {
  border-color: rgba(80, 160, 255, 0.50);
  transform: translateY(-2px);
}
.hw-item a { display: block; cursor: zoom-in; }
.hw-item img {
  width: 100%;
  height: 120px;
  object-fit: contain;
  display: block;
  margin: 0 auto 6px;
  background: rgba(255,255,255,0.04);
  border-radius: 4px;
}
.hw-item-label {
  font-size: 0.75rem;
  color: #c8e6ff;
  font-weight: bold;
  text-align: center;
  margin-bottom: 6px;
  line-height: 1.4;
}
.hw-spec-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.68rem;
  color: rgba(180, 210, 255, 0.80);
  line-height: 1.6;
}
.hw-spec-list li { padding: 1px 0; }
.hw-spec-list li::before { content: "・"; color: rgba(100, 160, 255, 0.60); }

@media (max-width: 640px) {
  .hw-product-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .hw-item img { height: 95px; }
}
@media (max-width: 400px) {
  .hw-product-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
}

/* ====== 特商法リンク ====== */
.hw-tokushou {
  text-align: center;
  font-size: 0.82rem;
  margin: 14px 0;
}
.hw-tokushou a { color: #90c8ff; }

/* ====== 区切り線 ====== */
.hw-hr {
  border: none;
  border-top: 1px solid rgba(60, 100, 200, 0.25);
  margin: 14px 0;
}
.hw-hr-thick {
  border: none;
  border-top: 3px solid rgba(60, 100, 200, 0.35);
  margin: 20px 0;
}

/* ====== CTAボタン ====== */
.cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 18px 0;
}
.cta-btn {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 4px;
  font-size: 0.95rem;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  transition: opacity 0.2s;
  min-width: 160px;
}
.cta-btn:hover { opacity: 0.85; text-decoration: none; }
.cta-btn--contact { background: #e8a000; color: #000000; }
.cta-btn--tel     { background: #2a7a2a; color: #ffffff; }

/* ====== アクセスブロック ====== */
.access-block {
  text-align: center;
  margin: 10px 0 18px;
  font-size: 0.82rem;
  color: #d8eaff;
}
.access-block a { color: #c8e6ff; }
.access-block .reservation-note {
  display: block;
  color: #ffcccc;
  margin-top: 4px;
  font-size: 0.78rem;
}

/* ====== フッター ====== */
.site-footer {
  text-align: center;
  padding: 16px 10px;
  border-top: 1px solid rgba(60, 100, 200, 0.25);
  margin-top: 20px;
  font-size: 0.78rem;
  color: rgba(160, 190, 230, 0.65);
}
.site-footer a { color: rgba(160, 190, 230, 0.65); }
.site-footer a:hover { color: #fff; }

/* ====== 固定フローティングボタン ====== */
.float-btns {
  position: fixed;
  bottom: 20px;
  left: 0; right: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-left: 12px;
  gap: 8px;
  z-index: 1000;
  pointer-events: none;
}
.float-btns > * { pointer-events: auto; }

.btn-call {
  display: flex; align-items: center; gap: 7px;
  background: #c8251a; color: #fff;
  font-size: 0.82em; font-weight: bold;
  padding: 9px 14px; border-radius: 30px;
  text-decoration: none;
  box-shadow: 0 3px 10px rgba(0,0,0,0.6);
  white-space: nowrap; transition: background 0.2s;
}
.btn-call:hover { background: #e02d20; color: #fff; text-decoration: none; }
.btn-call .icon { font-size: 1.1em; }

.btn-inquiry {
  display: flex; align-items: center; gap: 7px;
  background: #0a3a6a; color: #fff;
  font-size: 0.82em; font-weight: bold;
  padding: 9px 14px; border-radius: 30px;
  text-decoration: none;
  box-shadow: 0 3px 10px rgba(0,0,0,0.6);
  white-space: nowrap; border: 1px solid #1a6aaa;
  transition: background 0.2s;
}
.btn-inquiry:hover { background: #0d4e8e; color: #fff; text-decoration: none; }
.btn-inquiry .icon { font-size: 1.1em; }

.btn-access {
  display: flex; align-items: center; gap: 7px;
  background: #061a3a; color: #fff;
  font-size: 0.82em; font-weight: bold;
  padding: 9px 14px; border-radius: 30px;
  text-decoration: none;
  box-shadow: 0 3px 10px rgba(0,0,0,0.6);
  white-space: nowrap; border: 1px solid #1a4a7a;
  transition: background 0.2s;
}
.btn-access:hover { background: #0a2a58; color: #fff; text-decoration: none; }
.btn-access .icon { font-size: 1.1em; }

.btn-totop {
  position: fixed;
  bottom: 20px; right: 12px;
  width: 46px; height: 46px;
  background: rgba(10, 30, 90, 0.85);
  border: 1px solid #1a5aaa;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.3em;
  text-decoration: none;
  box-shadow: 0 3px 10px rgba(0,0,0,0.5);
  z-index: 1000; transition: background 0.2s;
}
.btn-totop:hover { background: rgba(15,45,120,0.95); color: #fff; text-decoration: none; }

/* ====== Lightbox ====== */
.lb-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0,0,0,.82);
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.lb-overlay.open { display: flex; }
.lb-frame {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  max-width: 90vw;
  max-height: 90vh;
}
.lb-frame img {
  display: block;
  max-width: 90vw;
  max-height: 82vh;
  width: auto; height: auto;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 8px 40px rgba(0,0,0,.9);
}
#lb-caption {
  color: #c8e6ff;
  font-size: 0.75rem;
  line-height: 1.5;
  margin-top: 8px;
  text-align: center;
  max-width: 90vw;
  max-height: 48px;
  overflow: hidden;
}
.lb-close {
  position: absolute;
  top: -14px; right: -14px;
  width: 28px; height: 28px;
  font-size: 16px; line-height: 28px;
  text-align: center;
  color: #030510; background: #c8e6ff;
  border-radius: 50%; border: none;
  cursor: pointer; font-weight: bold;
  box-shadow: 0 2px 8px rgba(0,0,0,.5);
  z-index: 9001;
}
.lb-close:hover { background: #fff; }
.hw-item a { cursor: zoom-in; }

/* ====== レスポンシブ ====== */
@media screen and (max-width: 600px) {
  .hw-tab-nav { gap: 3px; }
  .hw-tab-nav a { font-size: 12px; min-height: 32px; }
  .float-btns { padding-left: 8px; gap: 6px; bottom: 16px; }
  .btn-call, .btn-inquiry, .btn-access { font-size: 0.75em; padding: 8px 11px; }
  .btn-totop { bottom: 16px; right: 8px; width: 42px; height: 42px; font-size: 1.1em; }
}