/* B 民宿つづら野 b.css v2.0（WS-02）：侘び。霧の灰緑と古い木。柔らかい明朝、細い中央の本文列。表紙に朝霧が流れる（P1-R01） */
@font-face { font-family: "B Display"; src: url("fonts/b-zenold.woff2") format("woff2"); font-weight: 700; font-display: optional; }
.co-b { --fog: #EEF1F0; --slate: #34495A; --wood: #5A4430; --inkb: #2A3135; --serif: "B Display", "Hiragino Mincho ProN", "Yu Mincho", serif; background: var(--fog); color: var(--inkb); }
.b-hero { position: relative; overflow: hidden; background: #2A3135; }
.b-hero-img { width: 100%; height: min(78svh, 700px); object-fit: cover; filter: saturate(0.82); }
.b-mist { position: absolute; inset: -20% -40%; pointer-events: none; opacity: 0.75; transform: translateX(-4%);
  background: radial-gradient(ellipse 34% 22% at 30% 58%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 70%),
              radial-gradient(ellipse 30% 18% at 68% 46%, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0) 70%),
              radial-gradient(ellipse 40% 16% at 50% 72%, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 70%);
  animation: b-clear 3.2s ease-out both, b-drift 28s ease-in-out 3.2s infinite alternate; }
@keyframes b-clear { from { opacity: 1; transform: translateX(-4%); } to { opacity: 0.75; transform: translateX(-4%); } }
@keyframes b-drift { from { opacity: 0.75; transform: translateX(-4%); } to { opacity: 0.75; transform: translateX(5%); } }
.b-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(22, 28, 31, 0.86) 0%, rgba(22, 28, 31, 0.55) 30%, rgba(22, 28, 31, 0) 62%); }
.b-hero-text { position: absolute; left: 0; right: 0; bottom: 32px; z-index: 2; color: #FFFFFF; }
.b-name { font-family: var(--serif); font-weight: 700; font-size: clamp(40px, 11.4vw, 76px); line-height: 1.2; letter-spacing: 0.04em; }
.b-tag { font-family: var(--serif); font-weight: 700; font-size: clamp(20px, 5.8vw, 30px); line-height: 1.6; margin: 10px 0 0; }
.b-intro { padding: 36px 0 8px; }
.b-kind { font-size: 16px; color: var(--wood); font-weight: 700; margin-bottom: 10px; }
.b-lead { font-size: 19px; line-height: 2; max-width: 30em; }
.b-col { width: min(100% - 32px, 34em); margin-inline: auto; }
.b-sec { padding: 88px 0 16px; }
.b-h2 { font-family: var(--serif); font-weight: 700; color: var(--slate); font-size: clamp(24px, 6.6vw, 34px); line-height: 1.55; margin: 0 0 28px; }
.b-h3 { font-family: var(--serif); font-weight: 700; color: var(--slate); font-size: 21px; margin: 36px 0 10px; }
.b-list { padding-left: 1.2em; } .b-list li { margin-bottom: 0.6em; }
.b-list .cat-label { font-weight: 700; }
.b-fig { margin: 36px 0; } .b-fig img { width: 100%; filter: saturate(0.85); }
.b-rooms { border-collapse: collapse; width: 100%; font-size: 16px; }
.b-rooms th, .b-rooms td { padding: 10px 8px; border-bottom: 1px solid var(--inkb); text-align: left; vertical-align: top; }
.b-rooms thead th { border-bottom-width: 2px; white-space: nowrap; }
.b-rooms tbody tr:last-child th, .b-rooms tbody tr:last-child td { font-weight: 700; }
.b-figs { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin: 28px 0; background: #B9C3C6; border: 2px solid #B9C3C6; }
.b-figs div { background: var(--fog); padding: 16px 14px 12px; }
.b-figs dt { font-size: 16px; font-weight: 700; }
.b-figs dd { margin: 4px 0 0; font-family: var(--serif); font-weight: 700; font-size: 36px; line-height: 1.2; color: var(--slate); }
.b-gallery { list-style: none; padding: 0; margin: 72px auto 0; width: min(100% - 32px, 960px); display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.b-gallery li:first-child { grid-column: 1 / -1; }
.b-gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; filter: saturate(0.85); }
.b-gallery li:first-child img { aspect-ratio: 16 / 9; }
.motion-done .b-mist { opacity: 0.75; }