/*=============================================================
  light_on_off.css — chinretu.co.jp ショーケース照明効果ページ専用
  トップページ（toppage.css）のデザインを踏襲しつつ
  照明効果ページ特有のフォトギャラリーレイアウトに対応
  基準横幅: 700px → モバイルで流動対応
=============================================================*/

/* ====== リセット ====== */
*, *::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.6;
  color: #ffffff;
  background-color: #040812;
  min-width: 320px;
}

/* ======================================================
   タイル背景（トップページと同じ並び順：1→4→2→5→3→6→10→7→9→8）
   ====================================================== */

/* タイル背景グリッド（fixed・全画面） */
#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: #040812;
}

@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.62) saturate(0.80);
  background: #040812;
}

/* 暗幕オーバーレイ */
#tile-overlay {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: linear-gradient(135deg, rgba(4,8,30,.66) 0%, rgba(2,5,20,.58) 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: #00ccff; text-decoration: none; }
a:hover { color: #ffff00; text-decoration: underline; }
img { max-width: 100%; height: auto; vertical-align: middle; border: none; }

/* ====== ページ外枠 ====== */
#page-wrap {
  position: relative;
  z-index: 3;
  width: min(700px, 100%);
  margin: 0 auto;
}

/* ====== h1（SEO: ページ最上部） ====== */
#site-h1 {
  font-size: clamp(11px, 2vw, 13px);
  font-weight: bold;
  color: #ffffff;
  text-align: center;
  padding: 4px 6px;
  background: rgba(0,0,30,0.7);
  line-height: 1.5;
}
#site-h1 a { color: #ffffff; }
#site-h1 a:hover { color: #ffff99; text-decoration: none; }

/* ====== 区切り線 ====== */
.hr-bar {
  display: block;
  width: 100%;
  height: 2px;
  background: #4466aa;
  border: none;
  margin: 0;
}

/* ====== ページタイトルバナー ====== */
#page-title-banner {
  position: relative;
  background: linear-gradient(135deg, #0d1a3a 0%, #091228 40%, #131e40 100%);
  border: 1px solid #4466aa;
  border-top: none;
  overflow: hidden;
  padding: 0;
}

/* 背景の光芒エフェクト */
#page-title-banner::before {
  content: '';
  position: absolute;
  top: -40%;
  left: -10%;
  width: 60%;
  height: 200%;
  background: radial-gradient(ellipse at center, rgba(80,140,255,0.13) 0%, transparent 70%);
  pointer-events: none;
}
#page-title-banner::after {
  content: '';
  position: absolute;
  bottom: -40%;
  right: -5%;
  width: 50%;
  height: 200%;
  background: radial-gradient(ellipse at center, rgba(255,220,60,0.07) 0%, transparent 70%);
  pointer-events: none;
}

.page-title-banner__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px 16px;
  text-align: center;
}

.page-title-banner__icon {
  font-size: clamp(24px, 5vw, 36px);
  flex-shrink: 0;
  filter: drop-shadow(0 0 8px rgba(255,220,60,0.7));
  line-height: 1;
}

.page-title-banner__text {
  flex: 0 1 auto;
}

.page-title-banner__sub {
  font-size: clamp(10px, 2.2vw, 12px);
  color: #99bbdd;
  font-weight: bold;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
  line-height: 1.4;
  text-align: center;
}

.page-title-banner__main {
  font-size: clamp(15px, 3.5vw, 20px);
  color: #ffffff;
  font-weight: bold;
  line-height: 1.4;
  text-shadow: 0 1px 6px rgba(0,100,255,0.4);
  text-align: center;
}

.page-title-banner__main em {
  font-style: normal;
  color: #ffdd44;
  text-shadow: 0 0 10px rgba(255,220,60,0.6);
}

/* ====== 上部CTAボックス ====== */
.cta-box-top {
  background: rgba(0,0,30,0.75);
  border: 1px solid #4466aa;
  border-top: none;
  padding: 10px 10px 8px;
}

/* ====== お問い合わせ・電話・アクセス 共通ボタン（上部・下部共用） ====== */
.contact-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 0;
}

/* ====== お問い合わせ・電話・アクセス 3ボタン ====== */
.sub-nav {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #4466aa;
  border-top: none;
}

.sub-nav a {
  flex: 1 1 200px;
  display: block;
  background: linear-gradient(180deg, #2a3040 0%, #1a2030 100%);
  color: #ffff00 !important;
  font-size: clamp(10px, 2vw, 12px);
  font-weight: bold;
  text-align: center;
  padding: 6px 4px;
  border-right: 1px solid #335577;
  text-decoration: none !important;
  transition: background .15s, color .15s;
}
.sub-nav a:last-child { border-right: none; }
.sub-nav a:hover {
  background: linear-gradient(180deg, #3a4050 0%, #2a3040 100%);
  color: #ffffff !important;
  text-decoration: none !important;
}

/* ====== 本文テキスト ====== */
#main-text {
  background: rgba(0,0,20,0.80);
  border: 1px solid #335588;
  border-top: none;
  padding: 14px 18px;
  font-size: clamp(12px, 2.2vw, 13px);
  color: #c0c0c0;
  line-height: 2;
}

#main-text p {
  margin-bottom: 14px;
}

#main-text p:last-child { margin-bottom: 0; }

/* ====== フォトギャラリー ====== */
.photo-gallery {
  background: rgba(0,0,15,0.85);
  border: 1px solid #335588;
  border-top: none;
  padding: 16px 0;
}

.photo-item {
  text-align: center;
  padding: 12px 20px;
  border-bottom: 1px dotted rgba(68,102,170,0.3);
}

.photo-item:last-child { border-bottom: none; }

.photo-item img {
  max-width: 600px;
  width: 100%;
  height: auto;
  display: inline-block;
  box-shadow: 0 4px 16px rgba(0,0,0,0.6);
  border: 1px solid rgba(68,102,170,0.25);
}

/* キャプション */
.photo-caption {
  font-size: 12px;
  color: #ffffff;
  text-align: center;
  margin-top: 6px;
  padding: 2px 0;
}

/* ====== お問い合わせ誘導テキスト ====== */
#inquiry-text {
  background: rgba(0,0,20,0.85);
  border: 1px solid #335588;
  border-top: none;
  padding: 10px 18px;
  font-size: clamp(12px, 2.2vw, 13px);
  color: #ffffff;
  text-align: center;
}

#inquiry-text a { color: #ffff00; font-weight: bold; }
#inquiry-text a:hover { color: #ffffff; }

/* ====== CTA ボックス ====== */
#cta-box {
  background: rgba(0,0,30,0.9);
  border: 1px solid #4477aa;
  border-top: none;
  padding: 16px 14px;
}

/* h2（CTA） */
.cta-h2 {
  font-size: clamp(12px, 2.5vw, 14px);
  color: #ffccdd;
  margin-bottom: 10px;
  font-weight: bold;
  text-align: center;
}

/* お問い合わせ・電話・アクセス 3ボタン（下部CTAボックス内） */
#cta-box .contact-nav {
  margin-bottom: 10px;
}

.contact-nav-cell {
  flex: 1 1 120px;
  text-align: center;
  padding: 0;
  font-size: clamp(11px, 2.3vw, 13px);
  font-weight: bold;
  border: 1px solid #4477aa;
  background: linear-gradient(180deg, #354a60 0%, #1e3048 50%, #162438 100%);
  box-shadow: inset 0 1px 0 rgba(150,200,255,0.18), 0 2px 4px rgba(0,0,0,0.5);
  border-radius: 4px;
}

.contact-nav-cell a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  padding: 10px 6px;
  color: #aaccff;
  text-decoration: none;
  transition: background .15s, color .15s;
}

.contact-nav-cell a:hover {
  background: linear-gradient(180deg, #4a6080 0%, #2e4868 50%, #223858 100%);
  color: #ffff99;
  text-decoration: none;
}

/* お問い合わせボタン：赤味系 */
.contact-nav-cell--inquiry {
  border: 1px solid #885555;
  background: linear-gradient(180deg, #603535 0%, #3e2020 50%, #301818 100%);
  box-shadow: inset 0 1px 0 rgba(255,180,180,0.18), 0 2px 4px rgba(0,0,0,0.5);
}
.contact-nav-cell--inquiry a { color: #ffbbbb; }
.contact-nav-cell--inquiry a:hover {
  background: linear-gradient(180deg, #ff3333 0%, #cc0000 50%, #aa0000 100%);
  color: #ffffff;
}

/* 電話ボタン：緑系 */
.contact-nav-cell--tel {
  border: 1px solid #448855;
  background: linear-gradient(180deg, #2a5035 0%, #1a3525 50%, #122018 100%);
  box-shadow: inset 0 1px 0 rgba(150,255,180,0.18), 0 2px 4px rgba(0,0,0,0.5);
}
.contact-nav-cell--tel a { color: #aaffcc; }
.contact-nav-cell--tel a:hover {
  background: linear-gradient(180deg, #3a7045 0%, #2a5535 50%, #1e4028 100%);
  color: #ffffff;
}

/* アクセスマップボタン：黄系 */
.contact-nav-cell--access {
  border: 1px solid #7a6a30;
  background: linear-gradient(180deg, #5a5438 0%, #3a3420 50%, #2c2818 100%);
  box-shadow: inset 0 1px 0 rgba(255,240,100,0.2), 0 2px 4px rgba(0,0,0,0.5);
}
.contact-nav-cell--access a { color: #ffe680; }
.contact-nav-cell--access a:hover {
  background: linear-gradient(180deg, #6e6840 0%, #4a4428 50%, #3a3420 100%);
  color: #ffffff;
}

/* ご来店予約注記 */
.access-note {
  font-size: 11px;
  color: #ffff99;
  text-align: center;
  margin: 4px 0 10px;
  font-weight: bold;
}

/* ====== 特定商取引法バー ====== */
#tokushou {
  padding: 6px 0;
  text-align: center;
  background: rgba(0,0,20,0.7);
  border: 1px solid #335588;
  border-top: none;
}

#tokushou a {
  display: inline-block;
  background: linear-gradient(180deg, #5a5438 0%, #3a3420 50%, #2c2818 100%);
  color: #ffe680 !important;
  font-size: 13px;
  font-weight: bold;
  padding: 7px 20px;
  border: 1px solid #7a6a30;
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255,240,100,0.2), 0 2px 4px rgba(0,0,0,0.5);
  text-decoration: none !important;
  transition: background .15s, color .15s;
}
#tokushou a:hover {
  background: linear-gradient(180deg, #6e6840 0%, #4a4428 50%, #3a3420 100%);
  color: #ffffff !important;
  text-decoration: none !important;
}

/* ====== フッター ====== */
#site-footer {
  background: rgba(0,0,20,0.9);
  border-top: 2px solid #335588;
  padding: 12px;
  text-align: center;
  font-size: 11px;
  color: #aaaaaa;
}
#site-footer a { color: #8888cc; }
#site-footer a:hover { color: #ffff00; }

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 12px;
  margin-bottom: 8px;
}
.footer-nav a { color: #8888cc; font-size: 12px; }

.footer-domain {
  display: inline-block;
  border: 1px solid #ffffff;
  padding: 2px 8px;
  color: #ffff00;
  font-weight: bold;
  margin: 6px 0;
}

/* ====== 固定ボタン: ページトップ（右下）====== */
#pagetop {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #335588;
  color: #fff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.5);
  transition: background .2s, opacity .3s;
  z-index: 900;
  opacity: 0;
  pointer-events: none;
}
#pagetop:hover {
  background: #5599cc;
  text-decoration: none;
  color: #fff;
}

/* ====== 固定ボタン: お問い合わせ（左下）====== */
#fixed-contact {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 900;
}
#fixed-contact a {
  display: flex;
  align-items: center;
  gap: 5px;
  background: #cc3366;
  color: #fff !important;
  padding: 8px 12px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: bold;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.5);
  transition: background .2s;
}
#fixed-contact a:hover {
  background: #ff6699;
  text-decoration: none;
  color: #fff !important;
}

/* ====== 照明ON/OFF 切り替えビューワー ====== */
#light-switcher {
  background: rgba(0,0,15,0.90);
  border: 1px solid #4466aa;
  border-top: none;
  padding: 0 0 16px;
  text-align: center;
}

#light-switcher__img-wrap {
  position: relative;
  display: block;
  max-width: 700px;
  margin: 0 auto;
  line-height: 0;
  transition: opacity .16s ease;
  cursor: pointer;
}

#light-switcher__img-wrap.ls-fade {
  opacity: 0;
}

#light-switcher__img {
  width: 100%;
  max-width: 700px;
  height: auto;
  display: block;
  box-shadow: 0 6px 28px rgba(0,0,0,0.75);
}

/* クリック促進オーバーレイ（最初だけ薄く表示） */
#light-switcher__tap-hint {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.48);
  color: #ffffff;
  font-size: clamp(13px, 3vw, 16px);
  font-weight: bold;
  padding: 10px 22px;
  border-radius: 30px;
  border: 1px solid rgba(255,255,255,0.4);
  letter-spacing: 0.06em;
  pointer-events: none;
  white-space: nowrap;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
  animation: hint-pulse 2s ease-in-out 0.6s 3 forwards;
  opacity: 0;
}
@keyframes hint-pulse {
  0%   { opacity: 0;    transform: translate(-50%, -50%) scale(0.95); }
  20%  { opacity: 1;    transform: translate(-50%, -50%) scale(1);    }
  80%  { opacity: 1;    transform: translate(-50%, -50%) scale(1);    }
  100% { opacity: 0;    transform: translate(-50%, -50%) scale(0.95); }
}

/* 状態バッジ（画像中央下） */
#light-switcher__badge {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.78);
  color: #ffdd44;
  font-size: clamp(12px, 2.5vw, 14px);
  font-weight: bold;
  padding: 6px 20px;
  letter-spacing: 0.08em;
  white-space: nowrap;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  border-top: 1px solid rgba(255,221,68,0.35);
  border-left: 1px solid rgba(255,221,68,0.25);
  border-right: 1px solid rgba(255,221,68,0.25);
  pointer-events: none;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}

/* 切り替えボタン */
#light-switcher__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 24px;
  background: linear-gradient(180deg, #354a60 0%, #1e3048 50%, #162438 100%);
  border: 1px solid #4477aa;
  border-radius: 5px;
  color: #aaccff;
  font-size: clamp(12px, 2.5vw, 14px);
  font-weight: bold;
  font-family: inherit;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(150,200,255,0.18), 0 2px 6px rgba(0,0,0,0.5);
  transition: background .15s, color .15s, transform .15s;
  min-width: 220px;
}
#light-switcher__btn:hover {
  background: linear-gradient(180deg, #4a6080 0%, #2e4868 50%, #223858 100%);
  color: #ffff99;
  transform: translateY(-2px);
}
#light-switcher__btn:active {
  transform: translateY(0);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.4);
}

#light-switcher__btn-icon {
  font-size: 11px;
  opacity: 0.8;
}

/* インジケータードット */
#light-switcher__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}

.ls-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #335566;
  border: 1px solid #4477aa;
  display: inline-block;
  transition: background .2s, transform .2s;
}
.ls-dot--active {
  background: #ffdd44;
  border-color: #ffdd44;
  transform: scale(1.25);
}

/*=============================================
  レスポンシブ
=============================================*/

/* タブレット 〜 600px */
@media screen and (max-width: 600px) {
  .sub-nav a { flex: 1 1 100%; border-right: none; border-bottom: 1px solid #335577; }
  .sub-nav a:last-child { border-bottom: none; }

  #main-text { padding: 10px 12px; }

  .photo-item { padding: 10px 8px; }

  #contact-nav { gap: 3px; }
  .contact-nav { gap: 3px; }
  .contact-nav-cell { flex: 1 1 100%; }
}

/* スマートフォン 〜 420px */
@media screen and (max-width: 420px) {
  body { font-size: 12px; }

  .photo-item { padding: 8px 4px; }

  #cta-box { padding: 12px 8px; }
  .cta-box-top { padding: 8px 6px 6px; }

  .contact-nav-cell { flex: 1 1 100%; }
}

/* 極小 〜 320px */
@media screen and (max-width: 320px) {
  #site-h1 { font-size: 10px; }
  .photo-item { padding: 6px 2px; }
}