:root{
  --bg:#f7f1e6;
  --bg-soft:#efe6d3;
  --ink:#2e2016;
  --ink-soft:#5c4a38;
  --accent:#b5451b;
  --accent-soft:#d97a3f;
  --line:#d9c8a8;
  --card:#fffaf1;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:"Yu Mincho","YuMincho","Hiragino Mincho ProN","Noto Serif JP",serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.8;
}
a{color:inherit;}
img{max-width:100%; display:block;}

header.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(247,241,230,0.95);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(4px);
}
.nav-inner{
  max-width:1100px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 20px; flex-wrap:wrap; gap:10px;
}
.brand{font-size:1.15rem; font-weight:700; letter-spacing:.05em;}
.brand small{display:block; font-size:.65rem; font-weight:400; color:var(--ink-soft); letter-spacing:.15em;}
nav.main-nav ul{list-style:none; display:flex; gap:16px; margin:0; padding:0; flex-wrap:wrap;}
nav.main-nav a{
  text-decoration:none; font-size:.82rem; letter-spacing:.03em; color:var(--ink-soft);
  padding:4px 2px; border-bottom:2px solid transparent; white-space:nowrap;
}
nav.main-nav a:hover, nav.main-nav a.active{border-color:var(--accent-soft); color:var(--ink);}

.hero{
  position:relative; min-height:42vh;
  background:linear-gradient(rgba(30,20,10,.45), rgba(30,20,10,.55)) center/cover no-repeat;
  display:flex; align-items:center; justify-content:center; text-align:center;
  color:#fff8ec;
}
.hero.hero-top{min-height:60vh;}
.hero-inner{padding:50px 20px;}
.hero h1{font-size:clamp(1.6rem,4.5vw,2.6rem); letter-spacing:.12em; margin:0 0 12px; text-shadow:0 2px 10px rgba(0,0,0,.5);}
.hero p{font-size:clamp(.9rem,2vw,1.1rem); letter-spacing:.08em; text-shadow:0 2px 8px rgba(0,0,0,.5); margin:0;}
.hero .tag{display:inline-block; margin-top:20px; padding:8px 22px; border:1px solid rgba(255,255,255,.7); border-radius:2px; font-size:.78rem; letter-spacing:.18em;}

.breadcrumb{
  max-width:1100px; margin:0 auto; padding:16px 20px 0; font-size:.8rem; color:var(--ink-soft);
}
.breadcrumb a{color:var(--accent); text-decoration:none;}
.breadcrumb a:hover{text-decoration:underline;}

section{max-width:1100px; margin:0 auto; padding:60px 20px;}
.section-title{text-align:center; margin-bottom:8px; font-size:1.6rem; letter-spacing:.1em;}
.section-en{text-align:center; color:var(--accent-soft); letter-spacing:.25em; font-size:.75rem; margin-bottom:36px; text-transform:uppercase;}

.about-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:40px; align-items:center;}
.about-grid p{color:var(--ink-soft);}
.about-photos{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.about-photos img{border-radius:4px; aspect-ratio:4/3; object-fit:cover; box-shadow:0 4px 14px rgba(0,0,0,.15); cursor:pointer;}
.info-box{margin-top:24px; padding:20px 24px; background:var(--card); border:1px solid var(--line); border-radius:6px; font-size:.92rem;}
.info-box dt{color:var(--accent); font-weight:700; float:left; width:6.5em; clear:left;}
.info-box dd{margin:0 0 10px 6.5em;}

.category-block{background:var(--bg-soft);}
.gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:14px;}
#gallery-rainchain{grid-template-columns:repeat(3,190px); justify-content:center; margin:0 auto;}
.gallery figure{position:relative; margin:0; background:var(--card); border:1px solid var(--line); border-radius:6px; overflow:hidden; cursor:pointer; transition:transform .18s ease, box-shadow .18s ease;}
.gallery figure:hover{transform:translateY(-4px); box-shadow:0 8px 20px rgba(0,0,0,.15);}
.gallery img{width:100%; aspect-ratio:1/1; object-fit:cover;}
.gallery figcaption{padding:8px 10px; font-size:.78rem; color:var(--ink-soft); display:flex; flex-direction:column; gap:2px;}
.gallery figcaption .price{color:var(--accent); font-weight:700;}
.gallery figcaption .item-name{color:var(--ink); font-weight:700; font-size:1.15em;}
.gallery .item-desc{margin:0; padding:0 10px 10px; font-size:.76rem; line-height:1.6; color:var(--ink-soft);}

.gallery figure.out-of-stock img{filter:grayscale(60%); opacity:.55;}
.gallery .stock-badge{position:absolute; top:8px; left:8px; background:#333; color:#fff; font-size:.72rem; font-weight:700; padding:3px 8px; border-radius:4px; letter-spacing:.05em; z-index:1;}
.gallery .stock-note{margin:0; padding:0 10px 10px; font-size:.76rem; line-height:1.6; color:var(--accent); font-weight:700;}
.cat-desc{text-align:center; color:var(--ink-soft); max-width:680px; margin:0 auto 32px; font-size:.92rem;}

.search-box{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; max-width:680px; margin:0 auto 20px;}
.search-box input[type="text"]{flex:1 1 280px; padding:10px 14px; font-size:.9rem; border:1px solid var(--line); border-radius:6px; background:var(--card); color:var(--ink); font-family:inherit;}
.search-box select{padding:10px 14px; font-size:.9rem; border:1px solid var(--line); border-radius:6px; background:var(--card); color:var(--ink); font-family:inherit;}

.btn{
  display:inline-block; padding:10px 20px; font-size:.9rem; letter-spacing:.03em;
  border:1px solid var(--accent); border-radius:6px; background:var(--accent);
  color:#fff8ec; font-family:inherit; cursor:pointer; text-decoration:none;
}
.btn:hover{background:var(--accent-soft); border-color:var(--accent-soft);}
.btn-back{
  display:inline-block; margin:20px auto 0; padding:8px 18px; font-size:.85rem;
  border:1px solid var(--line); border-radius:6px; background:var(--card);
  color:var(--ink-soft); text-decoration:none;
}
.btn-back:hover{border-color:var(--accent-soft); color:var(--ink);}
.btn-back-wrap{text-align:center;}

section h3{max-width:680px; margin:32px auto 12px; font-size:1.05rem; color:var(--ink); letter-spacing:.05em; border-left:3px solid var(--accent-soft); padding-left:10px;}
section h3 + .cat-desc{margin-top:0; text-align:left;}

.callout{margin:36px auto 0; max-width:680px; text-align:center; padding:18px 22px; border:1px dashed var(--accent-soft); border-radius:6px; font-size:.9rem; color:var(--ink-soft); background:var(--card);}

.coming-soon{
  display:flex; align-items:center; justify-content:center; min-height:180px;
  border:2px dashed var(--line); border-radius:8px; background:var(--card);
  color:var(--ink-soft); font-size:.95rem; letter-spacing:.05em; text-align:center; padding:24px;
}

/* category index cards (on top page) */
.cat-cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:20px;}
.cat-card{
  display:block; text-decoration:none; background:var(--card); border:1px solid var(--line);
  border-radius:8px; overflow:hidden; transition:transform .18s ease, box-shadow .18s ease;
}
.cat-card:hover{transform:translateY(-5px); box-shadow:0 10px 24px rgba(0,0,0,.15);}
.cat-card img{width:100%; aspect-ratio:4/3; object-fit:cover;}
.cat-card .cat-card-body{padding:14px 16px;}
.cat-card h3{margin:0 0 4px; font-size:1.05rem; color:var(--ink); letter-spacing:.05em;}
.cat-card p{margin:0; font-size:.8rem; color:var(--ink-soft);}
.cat-card .cat-card-more{display:inline-block; margin-top:8px; font-size:.78rem; color:var(--accent);}

.access-grid{display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:start;}
.map-wrap{border:1px solid var(--line); border-radius:6px; overflow:hidden; box-shadow:0 4px 14px rgba(0,0,0,.1);}
.map-wrap iframe{width:100%; height:340px; border:0; display:block;}

footer{background:var(--ink); color:#f2e9d8; text-align:center; padding:30px 20px; font-size:.8rem; letter-spacing:.05em;}
footer .brand-footer{font-size:1rem; letter-spacing:.15em; margin-bottom:8px;}
footer .footer-links{margin-top:14px; font-size:.74rem; display:flex; flex-wrap:wrap; justify-content:center; gap:6px 14px;}
footer .footer-links a{color:#d9c8a8; text-decoration:none;}
footer .footer-links a:hover{color:#fff; text-decoration:underline;}

.lightbox{position:fixed; inset:0; background:rgba(20,14,8,.9); display:none; align-items:center; justify-content:center; z-index:200; padding:30px;}
.lightbox.open{display:flex;}
.lightbox img{max-width:92vw; max-height:86vh; border-radius:4px; box-shadow:0 10px 40px rgba(0,0,0,.6);}
.lightbox .lb-caption{position:absolute; bottom:26px; left:0; right:0; text-align:center; color:#f2e9d8; font-size:.9rem;}
.lightbox .lb-close{position:absolute; top:20px; right:28px; color:#f2e9d8; font-size:2rem; cursor:pointer; line-height:1;}

@media (max-width:760px){
  .about-grid{grid-template-columns:1fr;}
  .access-grid{grid-template-columns:1fr;}
  nav.main-nav ul{justify-content:center;}
}