/* ============================================================
   BAUM store detail page (shop/*.html)
   Depends on base.css variables. Loaded after base/pc/sp.
   ============================================================ */

/* ---- Hero (ring photo + store name overlay) ---- */
.shop-hero{ position:relative; height:52vh; min-height:360px; max-height:620px; overflow:hidden; background:var(--brown); }
.shop-hero img{ width:100%; height:100%; object-fit:cover; display:block; }
.shop-hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(48,29,2,.22) 0%,rgba(48,29,2,.48) 100%); }
.shop-hero .hero-inner{ z-index:1; position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; color:var(--cream); padding:0 24px; text-shadow:0 2px 18px rgba(0,0,0,.45); }
.shop-hero .hero-fr{ font-family:var(--font-en); font-size:13px; letter-spacing:.36em; color:var(--gold); }
.shop-hero h1{ font-size:30px; font-weight:400; letter-spacing:.08em; margin:14px 0 0; line-height:1.5; }
.shop-hero .hero-sub{ font-size:13px; letter-spacing:.2em; margin-top:14px; opacity:.9; }

main.shopd--rich{ padding:0 0 96px; }
main.shopd--rich .shopd__inner{ padding:0 24px; }

/* ---- Store info: photo + table ---- */
.shop-info-grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; margin-top:64px; }
.shop-info-grid .shop-photo{ border-radius:6px; overflow:hidden; box-shadow:0 24px 60px -34px rgba(48,29,2,.4); }
.shop-info-grid .shop-photo img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.shop-info-grid .shop-region{ font-family:var(--font-en); font-size:13px; letter-spacing:.28em; color:var(--gold-deep); }
.shop-info-grid .shop-title{ font-size:24px; color:var(--brown); margin:8px 0 22px; line-height:1.5; }
.shop-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:24px; }
.shop-actions .btn{ white-space:nowrap; }
.shop-actions .btn--tel{ background:var(--brown); color:var(--cream); }
.shop-actions .btn--tel:hover{ background:var(--brown-mid); }

/* ---- Concept band ---- */
.shop-concept{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--white); padding:72px 24px; margin-top:80px; }
.shop-concept .shop-concept__inner{ max-width:760px; margin:0 auto; text-align:center; }
.shop-concept p.shop-concept__body{ font-size:15px; line-height:2.3; color:var(--brown-mid); margin-top:26px; text-align:left; }

/* ---- Ring grid (4 items) ---- */
.shop-section{ padding:80px 0 0; }
.ring-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:44px; }
.ring-grid figure{ margin:0; }
.ring-grid .frame{ display:block; border:1px solid var(--line); background:var(--white); border-radius:2px; overflow:hidden; }
.ring-grid .frame img{ width:100%; aspect-ratio:3/2; object-fit:cover; display:block; transition:transform .8s var(--ease); }
.ring-grid .frame:hover img{ transform:scale(1.05); }
.ring-grid figcaption{ font-family:var(--font-en); font-size:15px; letter-spacing:.08em; color:var(--brown); margin-top:12px; text-align:center; }
.ring-grid figcaption small{ display:block; font-family:var(--font-jp); font-size:11.5px; letter-spacing:.12em; color:var(--gold-deep); margin-top:4px; }
.ring-note{ font-size:12px; color:var(--gray); text-align:center; margin-top:18px; letter-spacing:.04em; }

/* ---- Feature cards (3) ---- */
.feature-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:44px; }
.feature-card{ background:var(--white); border:1px solid var(--line); border-radius:2px; padding:30px 26px; }
.feature-card .boiler__en{ font-size:18px; }
.feature-card .boiler__body{ font-size:13.5px; line-height:2; }
.feature-card .material-list{ margin-top:10px; }

/* ---- FAQ accordion (scoped: .faq--acc) ---- */
.faq--acc .faq__item{ padding:0; }
.faq--acc .faq__q{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; width:100%; text-align:left;
  background:none; border:0; cursor:pointer; font:inherit; font-size:16px; color:var(--brown); letter-spacing:.04em;
  padding:22px 2px 22px 30px; position:relative; line-height:1.7; }
.faq--acc .faq__q::before{ content:"Q"; position:absolute; left:0; top:21px; font-family:var(--font-en); color:var(--gold-deep); font-size:15px; }
.faq--acc .faq__icon{ position:relative; flex:0 0 18px; width:18px; height:18px; margin-top:4px; }
.faq--acc .faq__icon::before,.faq--acc .faq__icon::after{ content:""; position:absolute; background:var(--gold-deep); left:50%; top:50%; transform:translate(-50%,-50%); transition:transform .3s var(--ease); }
.faq--acc .faq__icon::before{ width:18px; height:1px; }
.faq--acc .faq__icon::after{ width:1px; height:18px; }
.faq--acc .faq__q[aria-expanded="true"] .faq__icon::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; }
.faq--acc .faq__a{ max-height:0; overflow:hidden; transition:max-height .35s var(--ease); margin:0; padding-left:30px; }
.faq--acc .faq__a>p{ font-size:14px; line-height:2; color:var(--brown-mid); padding:0 2px 22px; margin:0; position:relative; }
.faq--acc .faq__a::before{ display:none; }
.faq--acc .faq__a>p::before{ content:"A"; position:absolute; left:-30px; top:0; font-family:var(--font-en); color:var(--gold-deep); font-size:15px; }
.no-js .faq--acc .faq__a{ max-height:none; }

/* ---- SP ---- */
@media (max-width:768px){
  .shop-hero{ height:44vh; min-height:280px; }
  .shop-hero h1{ font-size:22px; }
  .shop-info-grid{ grid-template-columns:1fr; gap:28px; margin-top:44px; }
  .shop-info-grid .shop-title{ font-size:20px; }
  .shop-actions .btn{ flex:1 1 auto; text-align:center; padding-left:18px; padding-right:18px; }
  .shop-concept{ padding:52px 20px; margin-top:56px; }
  .shop-concept p.shop-concept__body{ font-size:14px; line-height:2.1; }
  .shop-section{ padding:56px 0 0; }
  .ring-grid{ grid-template-columns:1fr 1fr; gap:14px; margin-top:32px; }
  .ring-grid figcaption{ font-size:13px; }
  .feature-grid{ grid-template-columns:1fr; gap:14px; margin-top:32px; }
  .feature-card{ padding:24px 20px; }
  .faq--acc .faq__q{ font-size:15px; padding:18px 2px 18px 28px; }
  .faq--acc .faq__q::before{ top:17px; }
}