/* BEER GARDEN PORTAL — scoped under .bgp (theme-safe) */
:root{
  --night:#15223E;
  --night-2:#1E2E4F;
  --amber:#E8A21A;
  --amber-d:#C9860B;
  --foam:#FBF7ED;
  --paper:#FCFAF5;
  --surface:#FFFFFF;
  --ink:#20201B;
  --ink-2:#5C594F;
  --ink-3:#8C887C;
  --line:#E7E2D5;
  --line-2:#F0ECE1;
  --star:#E8A21A;
  --display:'Shippori Mincho B1', serif;
  --sans:'Noto Sans JP', sans-serif;
  --latin:'Archivo', sans-serif;
  --wrap:1120px;
}
.bgp, .bgp *{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
.bgp{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);line-height:1.8;letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
}
.bgp img{max-width:100%;display:block;}
.bgp a{color:inherit;text-decoration:none;}
.bgp .wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px;}
.bgp .eyebrow{
  font-family:var(--latin);font-size:12px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--amber-d);font-weight:700;
  display:flex;align-items:center;gap:12px;
}
.bgp .eyebrow.center{justify-content:center;}
.bgp .sec-head{margin:0 0 22px;}
.bgp .sec-head h2{
  font-family:var(--display);font-weight:800;letter-spacing:.03em;
  font-size:clamp(21px,3.4vw,28px);margin:10px 0 0;
}
.bgp .sec-head p{color:var(--ink-2);font-size:14px;margin:8px 0 0;}
.bgp .hdr{
  position:sticky;top:0;z-index:50;background:var(--night);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.bgp .hdr .wrap{display:flex;align-items:center;justify-content:space-between;height:58px;}
.bgp .logo{
  font-family:var(--latin);font-weight:700;letter-spacing:.1em;
  font-size:17px;color:#F6F1E4;display:flex;align-items:center;gap:8px;
}
.bgp .logo .dot{color:var(--amber);}
.bgp .logo svg{width:20px;height:20px;color:var(--amber);}
.bgp .hdr nav{display:flex;gap:24px;}
.bgp .hdr nav a{font-size:13px;color:#C9C6BD;letter-spacing:.04em;}
.bgp .hdr nav a:hover{color:var(--amber);}
.bgp .badges{display:flex;flex-wrap:wrap;gap:6px;}
.bgp .badge{
  display:inline-flex;align-items:center;gap:5px;
  border:1px solid var(--line);border-radius:100px;
  padding:4px 10px 4px 8px;font-size:11px;color:var(--ink-2);background:#FCFBF7;
}
.bgp .badge svg{width:13px;height:13px;color:var(--amber-d);}
.bgp .rating{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-2);}
.bgp .stars{display:inline-flex;gap:1px;}
.bgp .stars svg{width:14px;height:14px;}
.bgp .stars .on{color:var(--star);fill:var(--star);}
.bgp .stars .off{color:var(--line);fill:var(--line);}
.bgp .rating b{font-family:var(--latin);font-size:14px;color:var(--ink);}
.bgp .prchip{
  font-family:var(--latin);font-size:9.5px;font-weight:700;letter-spacing:.14em;
  background:#8C887C;color:#fff;padding:3px 7px;border-radius:3px;
}
.bgp .ph{
  width:100%;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;color:#B8B09B;
  background:linear-gradient(135deg,#EFE9DA,#E4DBC6);
}
.bgp .ph svg{width:32px;height:32px;opacity:.65;}
.bgp .ph span{font-size:11px;letter-spacing:.08em;}
.bgp .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:12px 18px;border-radius:6px;font-size:14px;font-weight:700;
  letter-spacing:.03em;cursor:pointer;transition:all .16s ease;border:1px solid transparent;
}
.bgp .btn svg{width:16px;height:16px;}
.bgp .btn-book{background:var(--amber);color:#3A2A05;border-color:var(--amber);}
.bgp .btn-book:hover{background:var(--amber-d);border-color:var(--amber-d);color:#fff;}
.bgp .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line);}
.bgp .btn-ghost:hover{border-color:var(--amber);color:var(--amber-d);}
.bgp .btn-dark{background:var(--night);color:#F6F1E4;border-color:var(--night);}
.bgp .btn-dark:hover{background:var(--night-2);}
.bgp .card{
  background:var(--surface);border:1px solid var(--line);border-radius:10px;
  overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .18s ease,transform .18s ease;
}
.bgp .card:hover{box-shadow:0 10px 30px -14px rgba(21,34,62,.28);transform:translateY(-2px);}
.bgp .card .thumb{aspect-ratio:16/10;position:relative;overflow:hidden;}
.bgp .card .thumb img{width:100%;height:100%;object-fit:cover;}
.bgp .card .thumb .tag{
  position:absolute;left:10px;top:10px;display:flex;gap:6px;align-items:center;
}
.bgp .card .thumb .area-tag{
  background:rgba(21,34,62,.86);color:#F6F1E4;font-size:11px;
  padding:4px 9px;border-radius:4px;letter-spacing:.03em;
  display:inline-flex;align-items:center;gap:4px;
}
.bgp .card .thumb .area-tag svg{width:11px;height:11px;color:var(--amber);}
.bgp .card .cbody{padding:16px 16px 18px;display:flex;flex-direction:column;gap:9px;flex:1;}
.bgp .card .cname{font-family:var(--display);font-weight:700;font-size:18px;line-height:1.4;margin:0;}
.bgp .card .ccatch{color:var(--amber-d);font-size:12.5px;font-weight:700;line-height:1.55;margin:0;}
.bgp .card .cdesc{color:var(--ink-2);font-size:12.5px;line-height:1.85;margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.bgp .card .cmeta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:2px;}
.bgp .card .cprice{font-size:12px;color:var(--ink-3);}
.bgp .card .cprice b{font-family:var(--latin);font-size:15px;color:var(--amber-d);font-weight:700;}
.bgp .card .cbtns{display:flex;gap:8px;margin-top:auto;padding-top:4px;}
.bgp .card .cbtns .btn{flex:1;padding:10px;font-size:13px;}
.bgp .pr-note{
  background:var(--foam);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  font-size:11.5px;color:var(--ink-3);line-height:1.7;
}
.bgp .pr-note .wrap{padding:12px 22px;display:flex;gap:9px;align-items:flex-start;}
.bgp .pr-note svg{width:14px;height:14px;color:var(--amber-d);flex-shrink:0;margin-top:2px;}
.bgp footer.site{background:var(--night);color:#B9B6AD;}
.bgp footer.site .wrap{padding:36px 22px 26px;}
.bgp footer.site .frow{display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap;}
.bgp footer.site .flogo{font-family:var(--latin);font-weight:700;letter-spacing:.1em;color:#F6F1E4;font-size:18px;}
.bgp footer.site .flogo .dot{color:var(--amber);}
.bgp footer.site .flinks{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:13px;}
.bgp footer.site .flinks a{color:#C9C6BD;}
.bgp footer.site .flinks a:hover{color:var(--amber);}
.bgp footer.site .fbot{margin-top:26px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08);
  font-size:11px;color:#7C7970;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.bgp .grid{display:grid;gap:20px;}
.bgp .grid-3{grid-template-columns:repeat(3,1fr);}
.bgp .grid-4{grid-template-columns:repeat(4,1fr);}
.bgp .section{padding:52px 0;}
.bgp .section.tight{padding:40px 0;}
@media (max-width:900px){
.bgp .grid-4{grid-template-columns:repeat(2,1fr);}
.bgp .grid-3{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:620px){
.bgp .hdr nav{display:none;}
.bgp .grid-3, .bgp .grid-4{grid-template-columns:1fr;}
.bgp .section{padding:40px 0;}
}
@media (prefers-reduced-motion:reduce){
.bgp, .bgp *{animation:none !important;transition:none !important;scroll-behavior:auto !important;}
}
.bgp :focus-visible{outline:2px solid var(--amber);outline-offset:2px;}
.bgp .hero{position:relative;background:radial-gradient(120% 100% at 50% 0%,#25375C 0%,var(--night) 55%,#0F1A30 100%);
  color:#F6F1E4;overflow:hidden;}
.bgp .hero .wrap{position:relative;z-index:2;padding-top:64px;padding-bottom:70px;text-align:center;}
.bgp .hero .eyebrow{justify-content:center;color:var(--amber);margin-bottom:20px;}
.bgp .hero .eyebrow::before, .bgp .hero .eyebrow::after{content:"";height:1px;width:34px;background:rgba(232,162,26,.5);}
.bgp .hero h1{font-family:var(--display);font-weight:800;letter-spacing:.04em;
  font-size:clamp(30px,6vw,54px);line-height:1.3;margin:0 0 18px;}
.bgp .hero .lead{max-width:600px;margin:0 auto;color:#D8D3C4;font-size:15px;line-height:2;}
.bgp .hero .search-lbl{margin:34px 0 12px;font-size:12px;letter-spacing:.14em;color:#B4AF9F;
  font-family:var(--latin);text-transform:uppercase;}
.bgp .area-chips{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;max-width:640px;margin:0 auto;}
.bgp .area-chip{display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);color:#F6F1E4;font-size:13px;padding:8px 15px;border-radius:100px;
  transition:all .16s ease;}
.bgp .area-chip svg{width:13px;height:13px;color:var(--amber);}
.bgp .area-chip:hover{background:var(--amber);border-color:var(--amber);color:#3A2A05;}
.bgp .area-chip:hover svg{color:#3A2A05;}
.bgp .bubbles{position:absolute;inset:0;z-index:1;pointer-events:none;}
.bgp .bubbles span{position:absolute;bottom:-20px;background:rgba(255,255,255,.14);border-radius:50%;
  animation:rise linear infinite;}
@keyframes rise{
  0%{transform:translateY(0) scale(.6);opacity:0;}
  15%{opacity:.7;}
  100%{transform:translateY(-620px) scale(1);opacity:0;}
}
.bgp .hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:16px;z-index:2;
  background:radial-gradient(circle at 8px -4px,var(--paper) 9px,transparent 10px) repeat-x;
  background-size:18px 16px;}
.bgp .rank-list{display:flex;flex-direction:column;gap:12px;}
.bgp .rank-row{display:grid;grid-template-columns:44px 96px 1fr auto;gap:16px;align-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 16px 12px 12px;
  transition:box-shadow .18s ease;}
.bgp .rank-row:hover{box-shadow:0 8px 22px -14px rgba(21,34,62,.3);}
.bgp .rank-no{font-family:var(--latin);font-weight:700;font-size:22px;text-align:center;color:var(--ink-3);}
.bgp .rank-no.r1{color:#C99A2E;}
.bgp .rank-no.r2{color:#9BA0A6;}
.bgp .rank-no.r3{color:#B5793F;}
.bgp .rank-thumb{aspect-ratio:1;border-radius:8px;overflow:hidden;}
.bgp .rank-thumb img{width:100%;height:100%;object-fit:cover;}
.bgp .rank-body h3{font-family:var(--display);font-weight:700;font-size:16px;margin:5px 0 3px;}
.bgp .rank-body p{font-size:12px;color:var(--ink-2);margin:0 0 7px;}
.bgp .rank-body .rank-top{display:flex;align-items:center;gap:10px;font-size:11px;}
.bgp .rank-cta{padding:9px 16px;font-size:13px;white-space:nowrap;}
.bgp .feat-chips{display:flex;flex-wrap:wrap;gap:10px;}
.bgp .feat-chip{display:inline-flex;align-items:center;gap:7px;background:var(--surface);
  border:1px solid var(--line);border-radius:100px;padding:9px 16px;font-size:13px;color:var(--ink-2);
  transition:all .16s ease;}
.bgp .feat-chip svg{width:15px;height:15px;color:var(--amber-d);}
.bgp .feat-chip:hover{border-color:var(--amber);color:var(--amber-d);}
.bgp .band{background:var(--night);color:#F6F1E4;}
.bgp .band .wrap{padding:40px 22px;text-align:center;}
.bgp .band h2{font-family:var(--display);font-weight:800;font-size:clamp(20px,3.4vw,26px);margin:0 0 8px;letter-spacing:.03em;}
.bgp .band p{color:#C9C6BD;font-size:14px;margin:0 0 20px;}
@media (max-width:620px){
.bgp .rank-row{grid-template-columns:36px 72px 1fr;grid-template-rows:auto auto;}
.bgp .rank-cta{grid-column:2 / 4;justify-self:start;}
}
.bgp .area-hero{background:var(--foam);border-bottom:1px solid var(--line);}
.bgp .area-hero .wrap{padding:34px 22px 30px;}
.bgp .area-hero .eyebrow{margin-bottom:14px;}
.bgp .area-hero h1{font-family:var(--display);font-weight:800;font-size:clamp(26px,4.6vw,40px);
  line-height:1.3;letter-spacing:.03em;margin:0 0 14px;}
.bgp .area-hero h1 .mark{color:var(--amber-d);}
.bgp .area-hero .lead{max-width:620px;color:var(--ink-2);font-size:14.5px;line-height:1.95;margin:0;}
.bgp .filterwrap{position:sticky;top:0;z-index:30;background:rgba(252,250,245,.94);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);}
.bgp .filterhead{display:flex;align-items:baseline;justify-content:space-between;padding-top:14px;}
.bgp .filterhead .lbl{font-family:var(--latin);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700;}
.bgp .filterhead .count{font-size:12px;color:var(--ink-2);}
.bgp .filterhead .count b{font-family:var(--latin);color:var(--amber-d);font-size:15px;}
.bgp .chips{display:flex;gap:8px;overflow-x:auto;padding:12px 0 14px;scrollbar-width:none;}
.bgp .chips::-webkit-scrollbar{display:none;}
.bgp .chip{flex:0 0 auto;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);
  font-family:var(--sans);font-size:12.5px;font-weight:500;padding:7px 14px;border-radius:100px;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;transition:all .16s ease;white-space:nowrap;}
.bgp .chip svg{width:14px;height:14px;}
.bgp .chip:hover{border-color:var(--amber);color:var(--amber-d);}
.bgp .chip[aria-pressed="true"]{background:var(--amber);border-color:var(--amber);color:#3A2A05;}
.bgp .empty{display:none;text-align:center;padding:60px 20px;color:var(--ink-3);}
.bgp .empty.show{display:block;}
.bgp .empty button{margin-top:12px;background:none;border:1px solid var(--line);padding:8px 16px;
  border-radius:100px;cursor:pointer;color:var(--ink-2);font-family:var(--sans);font-size:12.5px;}
.bgp .empty button:hover{border-color:var(--amber);color:var(--amber-d);}
.bgp .crumb{font-size:11.5px;color:var(--ink-3);padding:16px 0 4px;letter-spacing:.02em;}
.bgp .crumb a:hover{color:var(--amber-d);}
.bgp .crumb span{color:var(--ink-2);}
.bgp .g-hero{display:grid;grid-template-columns:minmax(0,50%) minmax(0,50%);gap:30px;padding:16px 0 40px;}
.bgp .g-gallery{display:flex;flex-direction:column;gap:10px;}
.bgp .g-main{aspect-ratio:4/3;border-radius:12px;overflow:hidden;}
.bgp .g-main img{width:100%;height:100%;object-fit:cover;}
.bgp .g-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.bgp .g-thumb{aspect-ratio:1;border-radius:8px;overflow:hidden;border:2px solid transparent;padding:0;cursor:pointer;}
.bgp .g-thumb.sel{border-color:var(--amber);}
.bgp .g-thumb img{width:100%;height:100%;object-fit:cover;}
.bgp .g-head .g-meta{display:flex;gap:8px;align-items:center;margin-bottom:12px;}
.bgp .g-head h1{font-family:var(--display);font-weight:800;font-size:clamp(24px,3.8vw,34px);
  line-height:1.35;letter-spacing:.02em;margin:0 0 12px;}
.bgp .g-head .rating{margin-bottom:14px;}
.bgp .g-catch{color:var(--amber-d);font-weight:700;font-size:15px;margin:0 0 12px;line-height:1.6;}
.bgp .g-desc{color:var(--ink-2);font-size:14px;line-height:1.95;margin:0 0 18px;}
.bgp .g-head .badges{margin-bottom:22px;}
.bgp .g-cta{display:flex;gap:10px;margin-bottom:14px;}
.bgp .g-cta .btn-book{flex:1;padding:15px;font-size:15px;}
.bgp .g-price{font-size:13px;color:var(--ink-3);margin:0;}
.bgp .g-price b{font-family:var(--latin);font-size:18px;color:var(--amber-d);}
.bgp .g-sec{padding:34px 0;border-top:1px solid var(--line);}
.bgp .plans{display:flex;flex-direction:column;gap:10px;}
.bgp .plan{display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:16px 18px;}
.bgp .plan-info h4{font-size:15px;margin:0 0 4px;font-weight:700;}
.bgp .plan-info span{font-size:12px;color:var(--ink-3);}
.bgp .plan-act{display:flex;align-items:center;gap:14px;flex-shrink:0;}
.bgp .plan-price{font-family:var(--latin);font-weight:700;font-size:19px;color:var(--amber-d);}
.bgp .plan-act .btn{padding:10px 18px;}
.bgp .ginfo{border-top:1px solid var(--line-2);margin:0 0 22px;}
.bgp .irow{display:grid;grid-template-columns:110px 1fr;gap:14px;padding:12px 0;border-bottom:1px solid var(--line-2);font-size:13.5px;}
.bgp .irow dt{color:var(--ink-3);font-size:12px;display:flex;align-items:center;gap:6px;}
.bgp .irow dt svg{width:14px;height:14px;color:var(--ink-3);}
.bgp .irow dd{margin:0;color:var(--ink);line-height:1.7;}
.bgp .map-ph{height:220px;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;color:#A79E88;background:linear-gradient(135deg,#EFE9DA,#E4DBC6);}
.bgp .map-ph svg{width:26px;height:26px;}
.bgp .map-ph span{font-size:12px;}
.bgp .sticky-book{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--night);color:#F6F1E4;
  display:none;align-items:center;justify-content:space-between;gap:12px;padding:11px 18px;
  box-shadow:0 -6px 20px -8px rgba(0,0,0,.4);}
.bgp .sticky-book .sb-name{font-size:13px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bgp .sticky-book .btn{padding:11px 22px;}
@media (max-width:820px){
.bgp .g-hero{grid-template-columns:1fr;gap:20px;}
.bgp .plan{flex-direction:column;align-items:stretch;gap:12px;}
.bgp .plan-act{justify-content:space-between;}
.bgp .sticky-book{display:flex;}
.bgp main.garden{padding-bottom:76px;}
}
.bgp .card{position:relative;}
.bgp .card .stretch{position:absolute;inset:0;z-index:1;}
.bgp .card .cbtns{position:relative;z-index:2;}
.bgp .card .cstation{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;color:var(--ink-3);
  max-width:56%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.bgp .card .cstation svg{width:12px;height:12px;flex-shrink:0;color:var(--ink-3);}
.bgp .area-tag svg{width:11px;height:11px;}
.bgp .crumb svg{width:12px;height:12px;vertical-align:-2px;}
.bgp .map-embed{border-radius:12px;overflow:hidden;}
.bgp .map-embed iframe{width:100%;height:240px;border:0;display:block;}
.bgp .g-body{max-width:840px;}
.bgp .g-body > h2,.bgp .g-body > h3{font-family:var(--display);font-weight:700;font-size:19px;line-height:1.5;letter-spacing:.02em;margin:30px 0 10px;color:var(--ink);}
.bgp .g-body > h2:first-child,.bgp .g-body > h3:first-child{margin-top:0;}
.bgp .g-body p{color:var(--ink-2);font-size:14.5px;line-height:2.05;margin:0 0 18px;}
.bgp .g-body p:first-of-type{font-size:15.5px;color:var(--ink);}