/* ============================================
   DIFINO - Base / Reset Styles
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Jost:wght@300;400;500&family=Noto+Sans+JP:wght@300;400;500;700&family=Noto+Serif+JP:wght@300;400;500&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: var(--font-jp);
  font-weight: 400;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; transition: opacity var(--transition); }
a:hover { opacity: 0.75; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* ---- Utility ---- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
}

.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--sp-md);
}

.container--narrow {
  max-width: var(--max-w-narrow);
  margin: 0 auto;
  padding: 0 var(--sp-md);
}

/* ---- Image placeholder ---- */
.img-placeholder {
  background: linear-gradient(135deg, #2a2a2a 0%, #3a3a3a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  font-family: var(--font-en-sans);
}

.img-placeholder--light {
  background: linear-gradient(135deg, #e8e4df 0%, #d8d2ca 100%);
  color: #aaa;
}

/* ---- Animations ---- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.fade-up { animation: fadeUp 0.8s ease forwards; }

/* ============================================
   MOBILE NAV OVERLAY (shared: group & store)
   ============================================ */
.s-mobile-nav {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--s-accent, #9b7f66);
  flex-direction: column;
  justify-content: center;
  padding: var(--sp-xl) var(--sp-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.s-mobile-nav.is-open {
  opacity: 1;
  pointer-events: auto;
}

.s-mobile-nav__close {
  position: absolute;
  top: 28px;
  right: 28px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.5);
  background: none;
  cursor: pointer;
  color: #fff;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--transition);
}

.s-mobile-nav__close:hover { border-color: #fff; }

.s-mobile-nav__links {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  margin-bottom: var(--sp-xl);
}

.s-mobile-nav__link {
  font-family: var(--font-en-serif);
  font-size: clamp(24px, 8vw, 40px);
  font-weight: 400;
  color: #fff;
  letter-spacing: 0.02em;
  line-height: 1.4;
  text-align: right;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.35s ease, transform 0.35s ease, color var(--transition);
}

.s-mobile-nav__link:hover { opacity: 0.6 !important; }

.s-mobile-nav.is-open .s-mobile-nav__link {
  opacity: 1;
  transform: translateY(0);
}

.s-mobile-nav.is-open .s-mobile-nav__link:nth-child(1) { transition-delay: 0.1s; }
.s-mobile-nav.is-open .s-mobile-nav__link:nth-child(2) { transition-delay: 0.15s; }
.s-mobile-nav.is-open .s-mobile-nav__link:nth-child(3) { transition-delay: 0.2s; }
.s-mobile-nav.is-open .s-mobile-nav__link:nth-child(4) { transition-delay: 0.25s; }
.s-mobile-nav.is-open .s-mobile-nav__link:nth-child(5) { transition-delay: 0.3s; }
.s-mobile-nav.is-open .s-mobile-nav__link:nth-child(6) { transition-delay: 0.35s; }
.s-mobile-nav.is-open .s-mobile-nav__link:nth-child(7) { transition-delay: 0.4s; }
.s-mobile-nav.is-open .s-mobile-nav__link:nth-child(8) { transition-delay: 0.45s; }
.s-mobile-nav.is-open .s-mobile-nav__link:nth-child(9) { transition-delay: 0.5s; }
.s-mobile-nav.is-open .s-mobile-nav__link:nth-child(10) { transition-delay: 0.55s; }

.s-mobile-nav__footer {
  position: absolute;
  bottom: var(--sp-lg);
  right: var(--sp-lg);
  display: flex;
  gap: 20px;
  align-items: center;
}

.s-mobile-nav__social {
  font-family: var(--font-en-sans);
  font-size: var(--fs-ui);
  letter-spacing: var(--ls-sm);
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
  transition: color var(--transition);
}

.s-mobile-nav__social:hover { color: #fff; }

/* ---- Responsive ---- */
@media (max-width: 768px) {
  :root {
    --sp-lg: 3rem;
    --sp-xl: 4rem;
    --sp-2xl: 6rem;
  }
  .container { padding: 0 20px; }
}

/* reCAPTCHA バッジ非表示 */
.grecaptcha-badge { visibility: hidden !important; }

/* ============================================
   PAGE TRANSITION – overlay fade
   ============================================ */
#page-transition-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.35s ease;
  will-change: opacity;
}
#page-transition-overlay.is-hidden {
  opacity: 0;
}