/*=============================================================
  collectioncase_for_train_models.css
  鉄道模型展示用コレクションケース・ショーケース製作実例
  ・タイル背景（1→4→2→5→3→6→10→7→9→8）
  ・抹茶色（黄緑）オーバーレイ
  ・ライトボックス（showcase.css準拠）
  ・レスポンシブ対応
=============================================================*/

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

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

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

/* ======================================================
   タイル背景（並び順：1→4→2→5→3→6→10→7→9→8）
   ====================================================== */
#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: #050a03;
}
@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.55) saturate(0.70);
  background: #050a03;
}

/* 抹茶色オーバーレイ */
#tile-overlay {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    135deg,
    rgba(30, 55, 10, 0.72) 0%,
    rgba(15, 40, 5, 0.65) 50%,
    rgba(20, 50, 8, 0.70) 100%
  );
  pointer-events: none;
}

/* ====== リンク ====== */
a { color: #ffff00; 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: 2;
  max-width: 780px;
  margin: 0 auto;
  padding: 0 10px 100px;
}

/* ====== SEO H1 ====== */
.seo-heading {
  font-size: clamp(11px, 2.2vw, 14px);
  font-weight: normal;
  color: #ffffff;
  text-align: center;
  padding: 8px 10px;
  background: rgba(0, 30, 10, 0.80);
  line-height: 1.5;
  border-bottom: 1px solid #336633;
}
.seo-heading a { color: #ffffff; text-decoration: none; }

/* ====== ページヘッダー ====== */
.cc-header {
  background: rgba(0, 25, 8, 0.88);
  border-bottom: 1px solid #336633;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  gap: 10px;
  flex-wrap: wrap;
}
.cc-header-title {
  flex: 1;
}
.cc-header-title h2 {
  font-size: clamp(17px, 3.5vw, 24px);
  font-weight: bold;
  color: #ffffff;
  line-height: 1.3;
}
.cc-header-title .cc-sub {
  font-size: 0.82em;
  color: #ccddcc;
  margin-top: 3px;
}
.cc-header-back a {
  color: #ffffff;
  font-size: 0.82em;
  white-space: nowrap;
  text-decoration: none;
  border: 1px solid #55aa44;
  padding: 5px 12px;
  display: inline-block;
  background: rgba(0, 40, 10, 0.60);
  border-radius: 3px;
  transition: background 0.2s;
}
.cc-header-back a:hover { background: rgba(0, 80, 20, 0.80); color: #ffff99; text-decoration: none; }

/* ====== ナビゲーション ====== */
.cc-nav {
  display: flex;
  border: 1px solid #336633;
  border-top: none;
  background: rgba(0, 20, 5, 0.80);
  flex-wrap: wrap;
}
.cc-nav a {
  flex: 1;
  min-width: 80px;
  text-align: center;
  padding: 8px 4px;
  color: #ffffff;
  font-size: 0.82em;
  border-right: 1px solid #336633;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}
.cc-nav a:last-child { border-right: none; }
.cc-nav a:hover { background: rgba(0, 80, 20, 0.70); color: #ffff00; text-decoration: none; }

/* ====== 区切り線 ====== */
.divider {
  border: none;
  border-top: 1px solid #336633;
  margin: 10px 0;
}

/* ====== イントロブロック ====== */
.intro-block {
  background: rgba(0, 25, 8, 0.80);
  border-bottom: 1px solid #336633;
  padding: 14px 16px;
  font-size: 0.92em;
  color: #ffffff;
}
.intro-block p { margin-bottom: 0.8em; }
.intro-block p:last-child { margin-bottom: 0; }
.intro-block strong { font-weight: bold; color: #ffff99; }
.intro-block a { color: #ffff00; }

/* ====== ショールーム写真 ====== */
.showroom-block {
  text-align: center;
  padding: 14px 0;
  background: rgba(0, 20, 5, 0.70);
  border-bottom: 1px solid #336633;
}
.showroom-block img {
  margin: 0 auto;
  max-width: 600px;
  width: 100%;
  cursor: pointer;
  transition: opacity 0.2s;
}
.showroom-block img:hover { opacity: 0.85; }
.showroom-block .caption {
  font-size: 0.85em;
  margin-top: 8px;
  color: #ffffff;
  padding: 0 8px;
}
.showroom-block .caption strong { font-weight: bold; color: #ffff99; }

/* ====== Facebook リンクブロック ====== */
.fb-block {
  background: rgba(0, 20, 5, 0.70);
  border-bottom: 1px solid #336633;
  padding: 10px 14px;
  font-size: 0.88em;
}
.fb-block p { margin-bottom: 4px; color: #dddddd; }
.fb-block a { color: #ffff00; font-weight: bold; }

/* ====== ギャラリーセクション ====== */
.gallery-section {
  background: rgba(0, 15, 5, 0.75);
  padding: 16px 0;
}
.gallery-section-title {
  text-align: center;
  font-size: clamp(15px, 2.5vw, 20px);
  font-weight: bold;
  color: #ffffff;
  padding: 6px 12px 14px;
  line-height: 1.4;
}

/* ====== ギャラリーグリッド ====== */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  padding: 0 6px;
}
.gallery-item {
  background: rgba(0, 30, 10, 0.65);
  border: 1px solid rgba(51, 102, 51, 0.35);
  text-align: center;
  padding: 6px 4px 8px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.gallery-item:hover {
  background: rgba(0, 60, 20, 0.80);
  border-color: rgba(100, 180, 80, 0.60);
}
.gallery-item img {
  margin: 0 auto;
  width: auto;
  height: 80px;
  max-width: 100%;
  object-fit: contain;
  display: block;
}
.gallery-item .g-label {
  font-size: 0.68em;
  color: #d6f5cc;
  margin-top: 5px;
  line-height: 1.3;
}

/* ====== お問い合わせ促進ブロック ====== */
.cta-block {
  background: rgba(0, 25, 8, 0.85);
  border: 1px solid #336633;
  padding: 16px 14px;
  margin: 12px 0;
  text-align: center;
  font-size: 0.9em;
}
.cta-block p { margin-bottom: 6px; color: #ffffff; }
.cta-block strong { color: #ffff99; }
.cta-block a { color: #ffff00; }
.cta-block .cta-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 10px;
}
.cta-block .cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #1a5c1a;
  color: #fff;
  font-size: 0.85em;
  font-weight: bold;
  padding: 8px 16px;
  border-radius: 4px;
  text-decoration: none;
  border: 1px solid #2d8b2d;
  transition: background 0.2s;
}
.cta-block .cta-btn:hover { background: #236b23; color: #fff; text-decoration: none; }

/* ====== カテゴリナビ ====== */
.cat-nav {
  background: rgba(0, 25, 8, 0.82);
  border: 1px solid #336633;
  padding: 10px 10px 8px;
  margin: 10px 0;
}
.cat-nav .cat-nav-title {
  font-size: 0.82em;
  color: #ccddcc;
  margin-bottom: 6px;
}
.cat-links {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.cat-links a {
  text-align: center;
  font-size: 0.78em;
  color: #ffff00;
  padding: 4px 2px;
  display: block;
  line-height: 1.4;
  border: 1px solid rgba(80, 140, 60, 0.25);
  border-radius: 2px;
  transition: background 0.15s;
}
.cat-links a:hover { background: rgba(0, 60, 15, 0.60); text-decoration: underline; }
.cat-links a.current { background: rgba(0, 80, 20, 0.55); color: #ffffff; border-color: #55aa44; }

/* ====== アクセスブロック ====== */
.access-block {
  background: rgba(0, 20, 5, 0.80);
  border: 1px solid #336633;
  padding: 12px 14px;
  margin: 10px 0;
  font-size: 0.88em;
}
.access-block p { margin-bottom: 4px; color: #dddddd; }
.access-block a { color: #ffff00; }
.access-block .access-note {
  color: #ffddaa;
  font-weight: bold;
  margin-top: 6px;
}

/* ====== フッター ====== */
.page-footer {
  border-top: 1px solid #336633;
  background: rgba(0, 20, 5, 0.92);
  padding: 16px 10px;
  text-align: center;
  font-size: 0.80em;
  color: #aaaaaa;
}
.page-footer a { color: #88cc88; }
.page-footer a:hover { color: #ffff00; }
.page-footer p { margin-bottom: 4px; }

/* ====== 固定フローティングボタン（左下） ====== */
.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: #1a5c1a;
  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;
  border: 1px solid #2d8b2d;
}
.btn-inquiry:hover { background: #236b23; color: #fff; text-decoration: none; }
.btn-inquiry .icon { font-size: 1.1em; }

.btn-access {
  display: flex;
  align-items: center;
  gap: 7px;
  background: #1a3a5c;
  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;
  border: 1px solid #2d6098;
}
.btn-access:hover { background: #234b7a; 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(0, 80, 0, 0.85);
  border: 1px solid #2d8b2d;
  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(0, 110, 0, 0.95); color: #fff; text-decoration: none; }


/* ======================================================
   レスポンシブ
   ====================================================== */
@media screen and (max-width: 640px) {
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .cat-links { grid-template-columns: repeat(2, 1fr); }
  .cc-header { flex-direction: column; align-items: flex-start; }
  .seo-heading { font-size: 0.78em; }
  .cc-nav a { font-size: 0.76em; padding: 7px 2px; }
  .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; }
  #lb-prev { left: 4px; }
  #lb-next { right: 4px; }
}
@media screen and (max-width: 400px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-item img { height: 65px; width: auto; }
}

/* ====== Lightbox（showcase.css と同構造） ====== */
.lb-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0,0,0,.75);
  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;
  border: 3px solid transparent;
  border-radius: 10px;
  background:
    linear-gradient(#111, #111) padding-box,
    linear-gradient(135deg, #c9a84c 0%, #f5e27a 35%, #e8c96a 50%, #f5e27a 65%, #c9a84c 100%) border-box;
  box-shadow:
    0 0 18px rgba(201, 168, 76, 0.55),
    0 0 40px rgba(201, 168, 76, 0.20),
    0 8px 40px rgba(0, 0, 0, 0.85);
  padding: 10px;
}
.lb-frame img,
#lb-img {
  display: block !important;
  max-width: calc(90vw - 30px) !important;
  max-height: 80vh !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  border-radius: 6px;
  box-shadow: 0 8px 40px rgba(0,0,0,.8);
  margin: 0 auto;
}
#lb-caption {
  color: #ccc;
  font-size: 0.72rem;
  line-height: 1.4;
  margin-top: 6px;
  text-align: center;
  max-width: 90vw;
  max-height: 44px;
  overflow: hidden;
}
.lb-close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 28px;
  height: 28px;
  font-size: 18px;
  line-height: 28px;
  text-align: center;
  color: #0a0c10;
  background: #e8c96a;
  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; }
.gallery-item { cursor: zoom-in; }

/* ── spec sections (photo + spec text) ── */
.page-banner {
  background: rgba(0,25,8,0.85); border-bottom: 1px solid #336633;
  padding: 8px 14px; text-align: center; font-size: 0.88em; color: #ffffff;
}
.page-banner strong { color: #ffff99; }
.page-banner a { color: #ffff00; }

.spec-section {
  background: rgba(0,15,5,0.78); border-bottom: 1px solid rgba(51,102,51,0.50);
  padding: 18px 14px;
}
.spec-section h3 {
  font-size: clamp(14px, 2.8vw, 18px); font-weight: bold; color: #ffffff;
  margin-bottom: 14px; padding-bottom: 6px;
  border-bottom: 1px solid rgba(100,180,80,0.35); text-align: center;
}
.spec-photo { text-align: center; margin-bottom: 14px; }
.spec-photo img {
  margin: 0 auto; max-width: 100%; cursor: zoom-in;
  box-shadow: 0 2px 12px rgba(0,0,0,0.5); transition: opacity 0.2s;
}
.spec-photo img:hover { opacity: 0.88; }
.spec-thumbs {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 14px;
}
.spec-thumbs img {
  cursor: zoom-in;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 140px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
  transition: opacity 0.2s;
}
.spec-thumbs img:hover { opacity: 0.82; }
.spec-bullets { list-style: none; padding: 0; font-size: 0.88em; color: #e8f5e0; }
.spec-bullets li { padding: 3px 0 3px 1.1em; position: relative; line-height: 1.65; }
.spec-bullets li::before { content: "・"; position: absolute; left: 0; color: #88cc66; }
.spec-bullets strong { color: #ffff99; font-weight: bold; }
.spec-links { margin-top: 8px; font-size: 0.85em; }
.spec-links a { color: #ffff00; }