/* 自家焙煎珈琲 くるみの木 - 共通スタイル
   Claude Design handoff（カフェのデモサイト制作-handoff.zip）を静的化。
   本文の大半は各ページのインラインstyleに残し、ここには
   ①リセット ②キーフレーム ③画像プレースホルダー ④レスポンシブ切替 のみを集約。 */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
::selection { background: #e7d3ba; }

@keyframes floaty {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(3deg); }
}
@keyframes fadeup {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 画像プレースホルダー（実写真差し替え前提） */
.img-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f3ead9, #e8dac0);
  border: 1px dashed rgba(140, 94, 46, .3);
  color: #9c8a72;
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
  padding: 14px;
  overflow: hidden;
}
/* 実写真差し替え後：placeholder用paddingを解除し、画像を隙間なく敷き詰める */
.img-slot:has(img) {
  padding: 0;
}

/* モバイルナビ（js-mobile-nav）は既定非表示。JSでdisplay:flexに切替（fadeup再生） */
.js-mobile-nav { display: none; }

@media (max-width: 900px) {
  .cc-desktop-nav { display: none !important; }
  .cc-hours-pill { display: none !important; }
  .cc-burger { display: block !important; }
  .cc-hero-grid { grid-template-columns: 1fr !important; }
  .cc-hero-text { text-align: left !important; }
  .cc-hero-p { margin: 0 !important; }
  .cc-usage-row { grid-template-columns: 1fr !important; gap: 28px !important; }
  .cc-usage-rev .img-slot { order: 2 !important; }
  .cc-usage-row3 { grid-template-columns: 1fr !important; gap: 20px !important; }
  .cc-bean-band { grid-template-columns: 1fr !important; }
  .cc-craft-grid { grid-template-columns: 1fr !important; }
  .cc-news-grid { grid-template-columns: 1fr !important; }
  .cc-access-grid { grid-template-columns: 1fr !important; }
  .cc-two { grid-template-columns: 1fr !important; }
  .cc-three { grid-template-columns: 1fr 1fr !important; }
  .cc-four { grid-template-columns: 1fr 1fr !important; }
  .cc-gallery { grid-template-columns: 1fr !important; grid-template-rows: none !important; height: auto !important; }
  .cc-gallery .img-slot { grid-row: auto !important; aspect-ratio: 4/3; height: auto !important; }
  .cc-footer-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  .cc-menu-genre-head { flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; }
}

@media (max-width: 520px) {
  .cc-three { grid-template-columns: 1fr !important; }
}