/* index.html固有：ヒーロー上でのハンバーガー背景 */
#header.visible .hamburger { background-color: rgba(255,255,255,.68); }

/* ════════════════════════════
   HERO
════════════════════════════ */
#hero {
  position: fixed; top: 0; left: 0; right: 0;
  height: 100vh; min-height: 100svh;
  overflow: hidden; display: flex; flex-direction: column;
  z-index: 0;
}
#hero-spacer {
  height: 100vh;
  pointer-events: none;
}

/* 後続コンテンツをheroの上に重ねる */
.section-visual,
#arrivals,
#about,
#store,
#footer {
  position: relative;
  z-index: 1;
}

/* ── スライドショー ── */
#hero-slides {
  position: absolute; inset: 0;
}
.hero-slide {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.hero-slide.active { opacity: 1; }

#hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(17,14,11,.55) 0%,
    rgba(17,14,11,.45) 50%,
    rgba(17,14,11,.70) 100%);
}

/* ── HERO CONTENT ── */
#hero-content {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  position: relative; z-index: 1;
  color: #fff; text-align: center;
  gap: 16px;
  padding-bottom: 15vh;
  opacity: 0;
  transform: translateY(24px);
  animation: fadeInUp .9s ease .4s forwards;
}
.hero-title {
  font-size: clamp(32px, 10vw, 52px);
  font-weight: 400;
  letter-spacing: 4px;
  line-height: 1;
  text-shadow: 0 2px 40px rgba(0,0,0,.7), 0 1px 8px rgba(0,0,0,.5);
}
.hero-sub {
  font-size: 16px !important;
  letter-spacing: 2px !important;
  opacity: 1;
  margin-top: 4px;
}

/* ── SCROLL HINT ── */
.scroll-hint {
  display: none;
  position: absolute; bottom: 100px; left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,.45);
  font-size: 10px; letter-spacing: .2em;
  flex-direction: column; align-items: center; gap: 8px;
  z-index: 1;
  animation: fadeIn 1.2s ease 1s both;
}
.scroll-line {
  width: 1px; height: 36px;
  background: linear-gradient(to bottom, rgba(255,255,255,.4), transparent);
  animation: scrollDrop 2s ease-in-out infinite;
}

/* ── NEWS TICKER ── */
#news-bar {
  padding: 12px 20px; gap: 4px;
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
  background: rgba(17,14,11,.72);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(200,169,110,.25);
  display: flex; align-items: flex-start; flex-direction: column;
  max-width: 800px;
  width: 98%;
  margin: 0 auto 1%;
  text-decoration: none; cursor: pointer;
}
.news-date {
  font-size: 11px;
  color: rgba(255,255,255,.45); letter-spacing: .1em;
  white-space: nowrap;
}
.news-title {
  font-size: 16px;
  color: rgba(255,255,255,.8);
  letter-spacing: .05em;
}
#news-bar:hover .news-title { color: rgba(255,255,255,1); }

@media (min-width: 768px) {
  #news-bar {
    flex-direction: row; align-items: center; gap: 16px;
  }
}

/* ════════════════════════════
   SECTION VISUAL
════════════════════════════ */
.section-visual {
  height: 480px;
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.section-visual img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
.section-visual-content {
  position: relative; z-index: 1;
  text-align: center; color: #fff;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.section-visual-en {
  font-size: 11px; letter-spacing: .35em; opacity: .55;
}
.section-visual-rule {
  width: 40px; height: 1px; background: var(--gold); opacity: .7;
}
#section-visual-about { height: 300px; }

/* section-visual-jp：初期非表示（JSで .is-visible を付与） */
.section-visual-jp {
  font-size: clamp(28px, 8vw, 40px);
  font-weight: 400; letter-spacing: .18em;
  text-shadow: 0 2px 24px rgba(0,0,0,.5);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 1s ease .3s, transform 1s ease .3s;
}
.section-visual.is-visible .section-visual-jp {
  opacity: 1;
  transform: translateY(0);
}

/* section-visual-overlay：最初は不透明（黒幕）→スクロールで薄くなる */
.section-visual-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,1);
  pointer-events: none;
  transition: opacity 1.4s ease;
}

/* ════════════════════════════
   ARRIVALS GRID
════════════════════════════ */
#arrivals {
  background: #FCFCFC;
  padding: 40px 5% 56px;
}
#arrivals > * {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}
.arrivals-note {
  letter-spacing: .06em;
  line-height: 1.9;
  margin-bottom: 32px;
}
.tab-wrap {
  border-bottom: 1px solid var(--gold);
  display: flex; gap: 0;
  margin-bottom: 48px;
}
.tab-item {
  padding: 10px 18px 12px; font-size: 14px;
  letter-spacing: .12em;
  color: var(--ink-faint);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .3s;
}
.tab-item.active {
  color: rgb(142,93,28);
  border-bottom-color: rgb(142,93,28);
  font-weight: 600;
}
.tab-item:hover { color: var(--gold-dark); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

.product-grid {
  grid-template-columns: repeat(2, 1fr); gap: 24px 16px;
  display: grid;
  margin-bottom: 56px;
}
.product-card { display: flex; flex-direction: column; gap: 0; }
.product-img {
  width: 100%; aspect-ratio: 3/4;
  background: #e8e2d9;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.product-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.product-img-inner {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #ddd6c8 0%, #c8bfb0 100%);
  display: flex; align-items: center; justify-content: center;
}
.product-img-inner::before, .product-img-inner::after {
  content: '';
  position: absolute;
  background: rgba(0,0,0,.08);
}
.product-img-inner::before { width: 1px; height: 60%; transform: rotate(45deg); }
.product-img-inner::after  { width: 1px; height: 60%; transform: rotate(-45deg); }
.product-img-label {
  position: relative; z-index: 1;
  font-size: 11px; color: rgba(0,0,0,.3); letter-spacing: .1em;
  background: rgba(255,255,255,.5); padding: 2px 8px;
}
.product-info {
  padding: 14px 0 0;
  border-top: 1px solid rgba(200,169,110,.3);
  margin-top: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.product-name {
  font-size: 16px;
  letter-spacing: .4px; color: var(--ink);
  font-weight: 400; line-height: 1.5;
}
.product-date {
  font-size: 14px; color: var(--ink-faint); letter-spacing: .05em;
}

/* ── PAGINATION ── */
.pagination {
  display: flex; justify-content: center; align-items: center; gap: 2px;
}
.page-btn {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; letter-spacing: .05em;
  color: var(--ink-faint); cursor: pointer;
  border: 1px solid transparent;
  transition: all .2s;
}
.page-btn.active {
  font-weight: 700;
  border-color: rgb(200,165,90);
  color: #8E5D1C;
}
.page-btn:hover { color: var(--gold-dark); }
.page-sep { color: var(--ink-faint); padding: 0 4px; font-size: 13px; }

/* ════════════════════════════
   ABOUT (こだわり)
════════════════════════════ */
#about {
  background: #FCFCFC;
  padding: 64px 5%;
}
#about > * {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}
.about-grid {
  gap: 16px; display: flex; flex-direction: column;
}
.about-images {
  flex-direction: column; order: 3;
  display: flex; gap: 16px;
  width: 100%;
}
.about-img {
  flex: 1;
  background: #d8d0c4;
  overflow: hidden;
  position: relative;
}
.about-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.about-img-placeholder {
  width: 100%; height: 220px;
  background: linear-gradient(135deg, #d8d0c4, #c4bbb0);
  display: flex; align-items: center; justify-content: center;
  color: rgba(0,0,0,.2); font-size: 12px; letter-spacing: .1em;
  position: relative;
}
.about-img-placeholder::before, .about-img-placeholder::after {
  content: '';
  position: absolute;
  width: 1px; height: 50%;
  background: rgba(0,0,0,.1);
}
.about-img-placeholder::before { transform: rotate(45deg); }
.about-img-placeholder::after  { transform: rotate(-45deg); }

.about-right {
  display: flex; flex-direction: column; gap: 24px;
  width: 100%; height: auto; min-height: unset; order: 1;
  margin-bottom: 28px;
}
.about-text-col {
  width: 100%; gap: 20px; order: 2;
  display: flex; flex-direction: column;
  justify-content: flex-end;
  max-width: 480px;
}
.about-body {
  font-size: 16px;
  line-height: 2; color: var(--ink-mid);
  letter-spacing: .04em;
  text-wrap: pretty;
}

.about-heading-col {
  justify-content: flex-start; order: 1;
  display: flex; align-items: flex-start;
  align-self: start;
}
.vertical-heading {
  font-size: 22px; writing-mode: horizontal-tb; letter-spacing: .1em;
  white-space: nowrap;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.9;
}
.vertical-heading br { display: none; }

/* ════════════════════════════
   STORE INFO
════════════════════════════ */
#store {
  background: #F8F6F4;
  padding: 64px 5% 80px;
}
#store > * {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}
.store-heading { margin-bottom: 48px; }
.store-heading-jp {
  font-size: 28px; letter-spacing: .15em; font-weight: 400;
  margin-bottom: 4px;
}
.store-heading-en {
  font-size: 11px; letter-spacing: .3em; color: var(--gold); opacity: .8;
}
.store-grid {
  gap: 32px;
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
}
.store-table { display: flex; flex-direction: column; }
.store-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  border-bottom: 1px solid rgba(26,21,18,.1);
  padding: 16px 0;
}
.store-key,
.store-val {
  font-size: 16px;
  color: var(--ink-faint);
  letter-spacing: .08em;
}
.store-val {
  color: var(--ink); letter-spacing: .04em; line-height: 1.8;
}
.store-link {
  margin-top: 28px;
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 10px;
  cursor: pointer; max-width: 100%;
  transition: border-color .3s;
}
.store-link:hover { border-color: var(--gold); }
.store-link span { letter-spacing: .08em; }
.map-wrap {
  background: #d4cdc3;
  height: 100%; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}

/* ════════════════════════════
   MISC
════════════════════════════ */
.rule { width: 40px; height: 1px; background: var(--gold); margin: 0 auto 0; }

/* ── FADE-IN ディレイバリエーション ── */
.fade-in.delay-1 { transition-delay: .15s; }
.fade-in.delay-2 { transition-delay: .35s; }
.fade-in.delay-3 { transition-delay: .55s; }
.fade-in.delay-4 { transition-delay: .75s; }

/* ════════════════════════════
   KEYFRAMES
════════════════════════════ */
@keyframes fadeIn {
  from { opacity: 0; } to { opacity: 1; }
}
@keyframes scrollDrop {
  0%   { transform: scaleY(0); transform-origin: top; opacity: 0; }
  40%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
  60%  { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

/* ════════════════════════════
   TWEAKS PANEL
════════════════════════════ */
#tweaks-panel {
  display: none;
  position: fixed; bottom: 24px; right: 24px; z-index: 300;
  background: var(--dark); color: #fff;
  border: 1px solid var(--gold);
  padding: 20px; width: 220px;
  font-family: var(--font); font-size: 12px;
}
#tweaks-panel h4 {
  font-size: 13px; letter-spacing: .1em; margin-bottom: 16px;
  border-bottom: 1px solid rgba(200,169,110,.3); padding-bottom: 10px;
  color: var(--gold);
}
.tweak-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.tweak-row label { color: rgba(255,255,255,.6); }
.tweak-row select, .tweak-row input[type=range] {
  font-size: 11px; background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15); color: #fff; padding: 2px 6px;
}

/* ════════════════════════════
   RESPONSIVE
════════════════════════════ */
@media (min-width: 768px) {
  /* nav：index.htmlはタブレットで全幅を維持 */
  .nav-bg-left { display: none; }
  .nav-panel { width: 100%; }

  #arrivals { padding: 48px 5% 64px; }
  .product-grid { grid-template-columns: repeat(3, 1fr); gap: 32px 24px; }

  .about-grid { gap: 40px; }
  .about-img-placeholder { height: 280px; flex: unset; }
  .about-right {
    display: grid; grid-template-columns: 1fr auto; gap: 32px;
    align-items: end; max-width: 780px;
    height: auto; min-height: 426px; width: 100%; order: unset; margin-bottom: 0;
  }
  .about-text-col { max-width: 480px; gap: 40px; order: unset; width: 100%; }
  .about-body { font-size: 16px; }
  .about-heading-col { font-size: unset; justify-content: flex-end; align-items: flex-start; order: unset; }
  .vertical-heading {
    font-size: 36px;
    writing-mode: vertical-rl;
    letter-spacing: .45em;
    white-space: unset;
  }
  .vertical-heading br { display: unset; }

  #store { padding: 80px 5% 120px; }
  .store-grid { grid-template-columns: 1fr; gap: 40px; }
  .store-link { max-width: 100%; }
}

@media (min-width: 1025px) {
  /* nav：PC幅でパネルを半幅に */
  .nav-bg-left { flex: 1; display: block; }
  .nav-panel { width: 50%; }

  #arrivals { padding: 100px 80px 120px; }
  .product-grid { grid-template-columns: repeat(4, 1fr); gap: 40px 32px; }

  #about { padding: 160px 80px 160px; }
  .about-grid { grid-template-columns: 1fr 1fr; gap: 60px; display: grid; }
  .about-images { max-width: 480px; order: unset; }

  #store { padding: 160px 80px 240px; }
  .store-grid { grid-template-columns: 38% 62%; gap: 48px; }
  .store-row { grid-template-columns: 88px 1fr; }
  .store-key, .store-val { font-size: 16px; }
  .store-link { max-width: 400px; }
}