/* ─── Design tokens ─────────────────────────────── */
:root {
  --c-bg:       #FAFAF8;
  --c-bg-alt:   #F2EDE6;
  --c-text:     #2A2420;
  --c-sub:      #7A7470;
  --c-gold:     #C9A96E;
  --c-gold-lt:  #E8DBBC;
  --c-rule:     #E2DBD0;
  --f-display:  'Cormorant Garamond', serif;
  --f-body:     'Noto Sans JP', sans-serif;
  --ease:       cubic-bezier(.4,0,.2,1);
}

/* ─── Reset ─────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family: var(--f-body);
  background: var(--c-bg);
  color: var(--c-text);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}
img { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }

/* ─── Navigation ─────────────────────────────────── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(250,250,248,.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--c-rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  height: 64px;
}
.nav-logo {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: 20px;
  letter-spacing: 6px;
  color: var(--c-text);
}
.nav-links {
  display: flex;
  gap: 36px;
  list-style: none;
  font-size: 11px;
  letter-spacing: 2.5px;
}
.nav-links a {
  color: var(--c-sub);
  transition: color .2s var(--ease);
}
.nav-links a:hover { color: var(--c-gold); }
.nav-cta {
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--c-gold);
  border: 1px solid var(--c-gold);
  padding: 8px 20px;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.nav-cta:hover { background: var(--c-gold); color: #fff; }

/* ─── Hero ───────────────────────────────────────── */
/* ─── HERO : cinematic (slow photo zoom / "video-like") ─── */
@keyframes heroZoom  { from { transform:scale(1.07); } to { transform:scale(1); } }
@keyframes heroFadeUp{ from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
@keyframes scrollPulse { 0%,100% { opacity:.3; transform:translateY(0); } 50% { opacity:1; transform:translateY(6px); } }

.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 640px;
  background: var(--c-text);
  overflow: hidden;
}
.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  /* slow push-in: gives the still photo a cinematic, video-like feel */
  animation: heroZoom 9s cubic-bezier(.4,0,.2,1) forwards;
}
/* two scrims: left-to-right for copy legibility, bottom-up for depth */
.hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top,   rgba(38,32,28,.50) 0%, rgba(38,32,28,0) 42%),
    linear-gradient(to right, rgba(38,32,28,.55) 0%, rgba(38,32,28,.15) 46%, rgba(38,32,28,0) 72%);
}
/* thin inner frame (editorial "framed" look) */
.hero-frame {
  position: absolute; inset: 24px;
  border: 1px solid rgba(250,250,248,.22);
  pointer-events: none;
}
.hero-inner {
  position: absolute;
  left: 88px;
  bottom: 112px;
  max-width: 580px;
  z-index: 2;
  text-align: left;
  animation: heroFadeUp 1.1s cubic-bezier(.4,0,.2,1) .25s both;
}
/* eyebrow with the gold rule, matching the reference */
.hero .hero-eyebrow {
  display: flex; align-items: center; gap: 14px;
  color: var(--c-gold); margin-bottom: 24px;
}
.hero .hero-eyebrow::before {
  content:""; width:46px; height:1px; background:var(--c-gold);
}
.hero .hero-title    { color:#FAFAF8; text-shadow:0 2px 30px rgba(0,0,0,.28); text-align:left; }
.hero .hero-title em { color: var(--c-gold-lt); }
.hero .hero-lead     { color:rgba(250,250,248,.90); text-align:left; margin:24px 0 0; }
.hero .hero-btns     { justify-content:flex-start; margin-top:38px; }
.hero .btn-outline   { color:#FAFAF8; border-color:rgba(250,250,248,.55); }
.hero .btn-outline:hover { border-color:#fff; color:var(--c-gold-lt); }

/* scroll cue */
.hero-scroll {
  position: absolute; left: 50%; bottom: 36px; transform: translateX(-50%);
  z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.hero-scroll span {
  font-family: var(--f-display); font-style: italic;
  font-size: 11px; letter-spacing: 3px; color: rgba(250,250,248,.7);
}
.hero-scroll i {
  width:1px; height:30px; background:rgba(250,250,248,.5);
  animation: scrollPulse 2s ease-in-out infinite;
}

/* mobile: the reference has no SP layout, so pull the copy in safely */
@media (max-width: 780px) {
  .hero { height: 92vh; min-height: 560px; }
  .hero-frame { inset: 14px; }
  .hero-inner { left: 24px; right: 24px; bottom: 88px; max-width: none; }
  .hero .hero-btns { flex-wrap: wrap; gap: 12px; }
}
/* respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  .hero-img, .hero-inner, .hero-scroll i { animation: none; }
}
.hero-eyebrow {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 4px;
  color: var(--c-gold);
  position: relative;
}
.hero-title {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(38px, 6vw, 72px);
  line-height: 1.25;
  letter-spacing: .02em;
  color: var(--c-text);
  margin: 24px 0 28px;
  position: relative;
}
.hero-title em {
  font-style: italic;
  font-weight: 400;
  color: var(--c-gold);
}
.hero-lead {
  font-size: 14px;
  color: var(--c-sub);
  letter-spacing: 1.5px;
  line-height: 2;
  max-width: 480px;
  position: relative;
}
.hero-divider {
  width: 1px;
  height: 48px;
  background: var(--c-gold);
  margin: 40px auto 36px;
  position: relative;
}
.hero-btns {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
}
.btn {
  font-family: var(--f-body);
  font-size: 11px;
  letter-spacing: 3px;
  padding: 14px 36px;
  cursor: pointer;
  transition: all .25s var(--ease);
  display: inline-block;
}
.btn-primary {
  background: var(--c-text);
  color: var(--c-bg);
  border: 1px solid var(--c-text);
}
.btn-primary:hover { background: var(--c-gold); border-color: var(--c-gold); }
.btn-outline {
  background: transparent;
  color: var(--c-text);
  border: 1px solid var(--c-rule);
}
.btn-outline:hover { border-color: var(--c-gold); color: var(--c-gold); }

/* ─── Section commons ────────────────────────────── */
.section { padding: 100px 40px; }
.section-alt { background: var(--c-bg-alt); }
.section-center { text-align: center; }
.eyebrow {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 12px;
  letter-spacing: 3.5px;
  color: var(--c-gold);
  display: block;
  margin-bottom: 16px;
}
.h2 {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(28px, 4vw, 46px);
  letter-spacing: .03em;
  line-height: 1.3;
  color: var(--c-text);
}
.h3 {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: 22px;
  letter-spacing: .04em;
  color: var(--c-text);
}
.rule {
  width: 40px;
  height: 1px;
  background: var(--c-gold);
  margin: 24px auto;
}
.rule-left { margin-left: 0; }
.lead-text {
  color: var(--c-sub);
  max-width: 560px;
  margin: 0 auto;
  font-size: 14px;
  line-height: 2;
}

/* ─── Brand story ─────────────────────────────────── */
.story-grid {
  max-width: 1100px;
  margin: 60px auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.story-visual {
  position: relative;
}
.story-frame {
  background: var(--c-bg-alt);
  border: 1px solid var(--c-rule);
  aspect-ratio: 4/5;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.story-frame-accent {
  position: absolute;
  top: -16px;
  right: -16px;
  width: 120px;
  height: 120px;
  border: 1px solid var(--c-gold-lt);
  pointer-events: none;
}
.story-img-placeholder {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 13px;
  color: var(--c-sub);
  letter-spacing: 2px;
  text-align: center;
}
.story-content { padding: 20px 0; }
.story-quote {
  font-family: var(--f-display);
  font-weight: 400;
  font-style: italic;
  font-size: 21px;
  line-height: 1.7;
  color: var(--c-text);
  border-left: 2px solid var(--c-gold);
  padding-left: 24px;
  margin: 28px 0;
}
.story-body {
  color: var(--c-sub);
  font-size: 14px;
  line-height: 2.2;
}

/* ─── Pillars ─────────────────────────────────────── */
.pillars-grid {
  max-width: 1100px;
  margin: 64px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  border: 1px solid var(--c-rule);
}
.pillar {
  padding: 48px 36px;
  background: var(--c-bg);
  border-right: 1px solid var(--c-rule);
  transition: background .25s var(--ease);
}
.pillar:last-child { border-right: none; }
.pillar:hover { background: #FDFCF9; }
.pillar-num {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 48px;
  font-weight: 300;
  color: var(--c-gold-lt);
  line-height: 1;
  margin-bottom: 16px;
}
.pillar-title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: .04em;
  color: var(--c-text);
  margin-bottom: 12px;
}
.pillar-body {
  font-size: 13px;
  color: var(--c-sub);
  line-height: 2;
}

/* ─── Collection ─────────────────────────────────── */
.collection-intro {
  max-width: 520px;
  margin: 0 auto 64px;
}
.collection-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.ring-card {
  position: relative;
  cursor: pointer;
  overflow: hidden;
}
.ring-img-wrap {
  background: var(--c-bg-alt);
  border: 1px solid var(--c-rule);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: border-color .25s var(--ease);
  position: relative;
}
.ring-card:hover .ring-img-wrap { border-color: var(--c-gold); }
.ring-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.ring-overlay {
  position: absolute;
  inset: 0;
  background: rgba(42,36,32,.72);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .3s var(--ease);
  padding: 20px;
}
.ring-card:hover .ring-overlay { opacity: 1; }
.ring-overlay-meaning {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 16px;
  color: var(--c-gold-lt);
  letter-spacing: 1px;
  text-align: center;
  line-height: 1.6;
}
.ring-overlay-price {
  margin-top: 12px;
  font-size: 11px;
  color: rgba(255,255,255,.65);
  letter-spacing: 1.5px;
}
.ring-overlay-cta {
  margin-top: 16px;
  font-size: 10px;
  letter-spacing: 3px;
  border: 1px solid var(--c-gold);
  color: var(--c-gold);
  padding: 6px 18px;
}
.ring-info { padding: 14px 0 0; }
.ring-num {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 11px;
  color: var(--c-gold);
  letter-spacing: 1px;
}
.ring-name-it {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 17px;
  letter-spacing: .06em;
  color: var(--c-text);
  margin: 2px 0;
}
.ring-name-jp {
  font-size: 12px;
  color: var(--c-sub);
  letter-spacing: 1px;
}
.ring-img-placeholder {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 11px;
  color: var(--c-sub);
  text-align: center;
  padding: 8px;
}

/* ─── Materials ──────────────────────────────────── */
.materials-grid {
  max-width: 1100px;
  margin: 64px auto 0;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 32px;
}
.material-card {
  border: 1px solid var(--c-rule);
  padding: 40px 32px;
  position: relative;
  transition: border-color .25s var(--ease);
}
.material-card:hover { border-color: var(--c-gold); }
.material-card.featured {
  border-color: var(--c-gold);
  background: #FDFCF9;
}
.material-badge {
  position: absolute;
  top: -11px;
  left: 24px;
  background: var(--c-gold);
  color: #fff;
  font-size: 10px;
  letter-spacing: 2px;
  padding: 3px 12px;
}
.material-symbol {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: 48px;
  color: var(--c-gold);
  line-height: 1;
  margin-bottom: 12px;
}
.material-name {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: .08em;
  color: var(--c-text);
  margin-bottom: 8px;
}
.material-desc {
  font-size: 13px;
  color: var(--c-sub);
  line-height: 2;
  margin-bottom: 24px;
}
.material-feature {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--c-sub);
}
.material-feature::before {
  content: '—';
  color: var(--c-gold);
  flex-shrink: 0;
}
.material-price {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--c-rule);
  font-size: 12px;
  color: var(--c-sub);
  letter-spacing: 1px;
}
.material-price strong {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 18px;
  color: var(--c-text);
  display: block;
  margin-top: 4px;
}

/* ─── Customization ──────────────────────────────── */
.custom-grid {
  max-width: 1100px;
  margin: 64px auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.custom-option {
  display: flex;
  gap: 24px;
  margin-bottom: 40px;
  align-items: flex-start;
}
.custom-icon {
  width: 48px;
  height: 48px;
  border: 1px solid var(--c-gold-lt);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.custom-icon svg { width: 20px; height: 20px; }
.custom-opt-title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 17px;
  letter-spacing: .04em;
  color: var(--c-text);
  margin-bottom: 6px;
}
.custom-opt-desc {
  font-size: 13px;
  color: var(--c-sub);
  line-height: 2;
}
.custom-visual {
  background: var(--c-bg-alt);
  border: 1px solid var(--c-rule);
  aspect-ratio: 4/5;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
}
.custom-visual-label {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 13px;
  color: var(--c-sub);
  letter-spacing: 2px;
}

/* ─── Size guide ─────────────────────────────────── */
.size-guide {
  max-width: 860px;
  margin: 60px auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.size-steps { list-style: none; counter-reset: step; }
.size-steps li {
  counter-increment: step;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding-bottom: 28px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--c-rule);
}
.size-steps li:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.step-num {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 28px;
  font-weight: 300;
  color: var(--c-gold-lt);
  min-width: 32px;
  line-height: 1;
}
.step-body { font-size: 13px; color: var(--c-sub); line-height: 2; }
.step-title { font-weight: 400; color: var(--c-text); margin-bottom: 4px; font-size: 14px; }
.size-table-wrap {
  background: var(--c-bg-alt);
  border: 1px solid var(--c-rule);
  padding: 32px;
}
.size-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.size-table th {
  font-weight: 400;
  color: var(--c-sub);
  border-bottom: 1px solid var(--c-rule);
  padding: 8px 12px;
  text-align: left;
  letter-spacing: 1px;
  font-size: 11px;
}
.size-table td {
  padding: 10px 12px;
  color: var(--c-text);
  border-bottom: 1px solid var(--c-rule);
}
.size-table tr:last-child td { border-bottom: none; }
.size-table td:nth-child(1) {
  font-family: var(--f-display);
  font-size: 16px;
  color: var(--c-gold);
  font-weight: 400;
}

/* ─── FAQ ────────────────────────────────────────── */
.faq-list {
  max-width: 760px;
  margin: 60px auto 0;
}
.faq-item {
  border-bottom: 1px solid var(--c-rule);
}
.faq-q {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 24px 0;
  cursor: pointer;
  gap: 20px;
}
.faq-q-text {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 17px;
  color: var(--c-text);
  letter-spacing: .02em;
  line-height: 1.5;
}
.faq-toggle {
  color: var(--c-gold);
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 300;
  flex-shrink: 0;
  margin-top: 2px;
  transition: transform .2s var(--ease);
}
.faq-item.open .faq-toggle { transform: rotate(45deg); }
.faq-a {
  display: none;
  padding: 0 0 24px;
  font-size: 13px;
  color: var(--c-sub);
  line-height: 2.2;
  max-width: 620px;
}
.faq-item.open .faq-a { display: block; }

/* ─── Shop CTA ───────────────────────────────────── */
.shop-cta {
  background: var(--c-text);
  color: var(--c-bg);
  text-align: center;
  padding: 100px 40px;
}
.shop-cta .eyebrow { color: var(--c-gold); }
.shop-cta .h2 { color: var(--c-bg); margin: 0; }
.shop-cta .rule { background: var(--c-gold); }
.shop-cta .lead-text { color: rgba(250,250,248,.55); }
.areas-grid {
  max-width: 860px;
  margin: 48px auto 48px;
  display: grid;
  grid-template-columns: repeat(5,1fr);
  gap: 12px;
}
.area-btn {
  font-size: 11px;
  letter-spacing: 1.5px;
  padding: 10px 6px;
  border: 1px solid rgba(250,250,248,.2);
  color: rgba(250,250,248,.6);
  text-align: center;
  cursor: pointer;
  transition: all .2s var(--ease);
}
.area-btn:hover { border-color: var(--c-gold); color: var(--c-gold); }

/* ─── Footer ─────────────────────────────────────── */
.footer {
  background: #1E1A18;
  color: rgba(250,250,248,.45);
  padding: 60px 40px 36px;
}
.footer-top {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 60px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.footer-brand-name {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: 22px;
  letter-spacing: 6px;
  color: rgba(250,250,248,.85);
  margin-bottom: 12px;
}
.footer-brand-desc {
  font-size: 12px;
  line-height: 2;
  max-width: 260px;
}
.footer-col-title {
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--c-gold);
  margin-bottom: 20px;
}
.footer-links { list-style: none; }
.footer-links li { margin-bottom: 10px; }
.footer-links a { font-size: 13px; transition: color .2s; }
.footer-links a:hover { color: rgba(250,250,248,.85); }
.footer-bottom {
  max-width: 1100px;
  margin: 28px auto 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
}
.footer-copy { letter-spacing: 1px; }
.footer-legal-links { display: flex; gap: 24px; }
.footer-legal-links a { transition: color .2s; }
.footer-legal-links a:hover { color: rgba(250,250,248,.85); }

/* ─── Testimonials ───────────────────────────────── */
.testimonials-grid {
  max-width: 1100px;
  margin: 64px auto 0;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 28px;
}
.testimonial {
  padding: 36px 32px;
  border: 1px solid var(--c-rule);
  background: var(--c-bg);
}
.testimonial-stars {
  color: var(--c-gold);
  font-size: 13px;
  letter-spacing: 3px;
  margin-bottom: 16px;
}
.testimonial-body {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 16px;
  color: var(--c-text);
  line-height: 1.8;
  margin-bottom: 20px;
}
.testimonial-meta {
  font-size: 11px;
  color: var(--c-sub);
  letter-spacing: 1.5px;
}
.testimonial-ring {
  color: var(--c-gold);
  margin-top: 4px;
  font-size: 11px;
  font-style: italic;
}

/* ─── Responsive ─────────────────────────────────── */
@media (max-width: 900px) {
  .nav-links, .nav-cta { display: none; }
  .story-grid, .custom-grid { grid-template-columns: 1fr; }
  .pillars-grid { grid-template-columns: 1fr; }
  .pillar { border-right: none; border-bottom: 1px solid var(--c-rule); }
  .materials-grid { grid-template-columns: 1fr; }
  .collection-grid { grid-template-columns: repeat(2,1fr); }
  .testimonials-grid { grid-template-columns: 1fr; }
  .areas-grid { grid-template-columns: repeat(3,1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 36px; }
  .size-guide { grid-template-columns: 1fr; }
  .section { padding: 72px 24px; }
  .custom-grid > .custom-visual { order: -1; }
}
@media (max-width: 600px) {
  .collection-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 12px; }
}

/* ─── Lightbox ───────────────────────────────────── */
/* ─── Lightbox ────────────────────────────────────── */
.lb-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20,16,14,.92);
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.lb-backdrop.open { display: flex; }

/* ── ボックス全体：横長レイアウト（左：正方形画像 ／ 右：テキスト） */
.lb-box {
  background: var(--c-bg);
  width: 100%;
  max-width: 1000px;
  display: grid;
  /* 左列＝正方形画像なので幅＝高さに合わせてauto、右列が伸縮 */
  grid-template-columns: auto 1fr;
  position: relative;
  box-shadow: 0 32px 80px rgba(0,0,0,.45);
}

/* ── 閉じるボタン */
.lb-close {
  position: absolute;
  top: -44px; right: 0;
  width: 36px; height: 36px;
  background: none;
  border: 1px solid rgba(255,255,255,.3);
  color: rgba(255,255,255,.75);
  font-size: 16px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 10;
  transition: border-color .2s, color .2s;
  font-family: var(--f-body);
}
.lb-close:hover { border-color: var(--c-gold); color: var(--c-gold); }

/* ── 左：正方形画像ラッパー
   高さはコンテンツ列の高さに追従させ、幅＝高さで正方形を保つ */
.lb-img-wrap {
  /* 幅を高さに合わせて正方形にする（拡大：最大520px・画面高の56%まで） */
  width: min(56vh, 520px);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--c-bg-alt);
  flex-shrink: 0;
  position: relative;
}
.lb-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  transition: transform .5s var(--ease);
}
/* ホバーで微妙にズームして奥行き感を出す */
.lb-backdrop.open .lb-img-wrap img {
  animation: lbImgIn .5s var(--ease) forwards;
}
@keyframes lbImgIn {
  from { transform: scale(1.04); }
  to   { transform: scale(1); }
}

/* ── 右：テキストコンテンツ */
.lb-content {
  padding: 40px 36px 36px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: min(56vh, 520px); /* 画像と同じ高さを最低保証（拡大対応） */
  overflow-y: auto;
}

/* 上部：名前ブロック */
.lb-header {}
.lb-num {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--c-gold);
}
.lb-name-it {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(28px, 3.5vw, 42px);
  letter-spacing: .08em;
  color: var(--c-text);
  line-height: 1;
  margin: 6px 0 4px;
}
.lb-name-jp {
  font-size: 11px;
  color: var(--c-sub);
  letter-spacing: 2px;
}
.lb-rule {
  width: 28px; height: 1px;
  background: var(--c-gold);
  margin: 16px 0;
}
.lb-meaning {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(16px, 2vw, 21px);
  color: var(--c-text);
  line-height: 1.6;
}

/* 中段：価格 */
.lb-prices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 20px 0 0;
}
.lb-price-item {
  border: 1px solid var(--c-rule);
  padding: 10px 8px;
  text-align: center;
  transition: border-color .2s;
}
.lb-price-item:hover { border-color: var(--c-gold); }
.lb-price-mat {
  font-family: var(--f-display);
  font-size: 14px;
  font-weight: 400;
  display: block;
}
.lb-price-val {
  font-size: 10px;
  color: var(--c-sub);
  margin-top: 3px;
  display: block;
  letter-spacing: .5px;
}

/* 下部：カスタム情報＋ナビ */
.lb-footer {}
.lb-custom {
  font-size: 11px;
  color: var(--c-sub);
  line-height: 1.9;
  padding: 14px 0 0;
  border-top: 1px solid var(--c-rule);
  margin-top: 16px;
}
.lb-custom strong { color: var(--c-text); font-weight: 400; }
.lb-nav {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.lb-nav-btn {
  flex: 1;
  background: none;
  border: 1px solid var(--c-rule);
  color: var(--c-sub);
  font-family: var(--f-body);
  font-size: 10px;
  letter-spacing: 2px;
  padding: 9px;
  cursor: pointer;
  transition: border-color .2s, color .2s;
}
.lb-nav-btn:hover { border-color: var(--c-gold); color: var(--c-gold); }
.lb-shop-btn {
  display: block;
  margin-top: 8px;
  background: var(--c-text);
  color: var(--c-bg);
  text-align: center;
  padding: 13px;
  font-size: 10px;
  letter-spacing: 3px;
  transition: background .2s;
  border: none;
  cursor: pointer;
  font-family: var(--f-body);
  width: 100%;
}
.lb-shop-btn:hover { background: var(--c-gold); }

/* ring card cursor */
.ring-card { cursor: pointer; }

/* ── スマホ：縦積みレイアウト */
/* ═══ スマホ：ボトムシート型ライトボックス ═══════════════════════════ */
@media (max-width: 600px) {

  /* バックドロップ：下揃えにしてボトムシート風に */
  .lb-backdrop {
    padding: 0;
    align-items: flex-end;
  }

  /* ボックス全体：縦積み・下から滑らかに表示 */
  .lb-box {
    grid-template-columns: 1fr;     /* 縦積みに切り替え */
    width: 100%;
    max-height: 92dvh;
    overflow-y: auto;
    overscroll-behavior: contain;   /* 背景スクロール防止 */
    border-radius: 20px 20px 0 0;  /* 上角だけ丸める */
  }

  /* 閉じるボタン：ボックス内の上部バーに変更
     「絶対位置 ＋ top: -40px」だと画面外に出てタップできないため
     sticky バーとして内側に配置し直す                              */
  .lb-close {
    position: sticky;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 44px;
    border-radius: 20px 20px 0 0;  /* ボックス上角と揃える */
    background: var(--c-bg);
    border: none;
    border-bottom: 1px solid var(--c-rule);
    color: var(--c-sub);
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    letter-spacing: 2px;
    z-index: 20;
    cursor: pointer;
    transition: background .2s;
  }
  .lb-close::before {
    content: '─────';             /* ドロワーの引手ライン風 */
    color: var(--c-rule);
    font-size: 10px;
    letter-spacing: -2px;
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
  }
  .lb-close:hover { background: var(--c-bg-alt); }

  /* 正方形画像の核心：
     width と height を同じ値（min(100%, 44dvh)）に揃える。
     aspect-ratio だけでは max-height との衝突で崩れるため
     両辺を明示的に同値指定して真の正方形を保証する            */
  .lb-img-wrap {
    --sq: min(100%, 44dvh);        /* 幅と高さ共通の「1辺」 */
    width: var(--sq);
    height: var(--sq);
    aspect-ratio: auto;            /* aspect-ratio の介入を無効化 */
    margin: 0 auto;                /* 中央揃え */
    flex-shrink: 0;
  }

  /* テキストコンテンツ：コンパクトに整理 */
  .lb-content {
    padding: 20px 20px 28px;
    min-height: auto;
    gap: 0;
  }

  .lb-name-it  { font-size: 26px; letter-spacing: .05em; }
  .lb-meaning  { font-size: 16px; margin-bottom: 0; }
  .lb-rule     { margin: 12px 0; }
  .lb-prices   { gap: 6px; margin: 14px 0 0; }
  .lb-price-item { padding: 8px 6px; }
  .lb-price-mat  { font-size: 13px; }
  .lb-price-val  { font-size: 10px; }
  .lb-custom   { padding-top: 12px; margin-top: 12px; font-size: 11px; }
  .lb-nav      { margin-top: 10px; gap: 6px; }
  .lb-shop-btn { margin-top: 8px; padding: 12px; }
}