/* 暖簾の奥の酒場。写真の座標を守るため、探索写真は常に 3:2。 */
.hero-enter { flex-direction: row; align-items: center; gap: 20px; border-bottom: 1px solid rgba(255,255,255,.6); padding-bottom: 14px; text-decoration: none; }
.hero-enter > span:first-child { font-family: "Noto Serif JP",serif; font-size: 15px; letter-spacing: .12em; }
.hero-enter .hero-enter-arrow { font-size: 25px; line-height: 1; }
.counter-experience { background: #1d2520; color: #f1ebdd; padding: 52px 0 40px; position: relative; scroll-margin-top: 78px; }
.counter-anchor { position: absolute; top: 0; scroll-margin-top: 78px; }
.counter-shell { width: min(1380px,calc(100% - 80px)); margin-inline: auto; }
.counter-heading-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 32px; }
.counter-eyebrow { color: #c2b38e; font-size: 10px; letter-spacing: .14em; line-height: 1.8; }
.editorial-site .counter-heading-row h2 { font-family: "Noto Serif JP",serif; font-size: clamp(27px,2.7vw,40px); line-height: 1.8; font-weight: 300; letter-spacing: .06em; margin-top: 10px; }
.counter-heading-row h2 span { margin-left: .45em; }
.counter-instruction { font-size: 12px; letter-spacing: .03em; color: #d0d1c2; line-height: 1.9; padding-bottom: 7px; }
.counter-instruction > span { display: inline-grid; place-items: center; border: 1px solid #898e79; width: 28px; height: 28px; border-radius: 50%; margin-right: 8px; }
.counter-view { display: grid; grid-template-columns: minmax(0,1fr) 150px; gap: 18px; }
.counter-stage { aspect-ratio: 3 / 2; position: relative; min-width: 0; overflow: hidden; background: #24271f; isolation: isolate; }
#counter-image { display: block; width: 100%; height: 100%; object-fit: contain; }
.counter-photo-shade { position: absolute; inset: 0; background: linear-gradient(180deg,rgba(0,0,0,.32),transparent 28%,transparent 82%,rgba(0,0,0,.2)); pointer-events: none; }
.counter-scene-marker { position: absolute; top: 24px; left: 25px; right: 25px; display: flex; justify-content: space-between; color: #fff9ed; font-size: 9px; letter-spacing: .18em; text-shadow: 0 1px 8px #26271b; pointer-events: none; }
.counter-scene-marker > span { font-family: "Noto Serif JP",serif; font-size: 11px; letter-spacing: .12em; }
.counter-hotspots { position: absolute; inset: 0; pointer-events: none; }
.counter-hotspot { position: absolute; left: var(--point-x); top: var(--point-y); transform: translate(-22px,-22px); display: flex; align-items: center; gap: 10px; pointer-events: auto; color: white; text-shadow: 0 1px 6px #111; min-height: 44px; cursor: pointer; }
.counter-hotspot-dot { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(255,251,235,.95); border-radius: 50%; background: rgba(24,30,22,.58); position: relative; flex-shrink: 0; font-family: "Noto Serif JP",serif; font-size: 16px; transition: background .3s, transform .3s; }
.counter-hotspot-dot::before { content: ""; position: absolute; inset: -5px; border: 1px solid rgba(255,251,235,.4); border-radius: inherit; animation: counter-ring 4s ease-in-out 3; }
.counter-hotspot-label { font-size: 12px; letter-spacing: .07em; white-space: nowrap; background: rgba(24,30,22,.76); padding: 7px 12px; border-radius: 2px; }
.counter-hotspot:hover .counter-hotspot-dot, .counter-hotspot:focus-visible .counter-hotspot-dot { transform: scale(1.13); background: #f0e5ce; color: #293127; text-shadow: none; }
@keyframes counter-ring { 0%,100% { opacity: .2; transform: scale(.98); } 50% { opacity: .75; transform: scale(1.12); } }
.counter-peek { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; overflow: hidden; min-width: 0; cursor: pointer; border: 1px solid #65705d; }
.counter-peek > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 45% center; transition: transform 1s; }
.counter-peek-shade { position: absolute; inset: 0; background: rgba(15,23,17,.46); transition: background .4s; }
.counter-peek:hover > img { transform: scale(1.05); }
.counter-peek:hover .counter-peek-shade { background: rgba(15,23,17,.28); }
.counter-peek-label { position: relative; writing-mode: vertical-rl; font-family: "Noto Serif JP",serif; font-size: 22px; letter-spacing: .2em; text-shadow: 0 1px 6px #111; }
.counter-peek-arrow { position: relative; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid #b7b49e; border-radius: 50%; font-size: 22px; }
#counter-peek-title { position: absolute; bottom: 26px; left: 10px; right: 10px; font-size: 11px; line-height: 1.8; text-align: center; text-shadow: 0 1px 6px #111; }
.counter-point-menu { display: none; }
.counter-bottom { display: flex; justify-content: space-between; gap: 30px; align-items: center; padding-top: 26px; }
.counter-seat-caption { display: flex; align-items: flex-start; gap: 24px; }
.counter-seat-number { font-family: "Noto Serif JP",serif; font-size: 45px; line-height: 1.1; color: #bbac89; }
#counter-seat-title { font-family: "Noto Serif JP",serif; font-size: 24px; line-height: 1.5; font-weight: 300; letter-spacing: .06em; }
#counter-seat-copy { font-size: 12px; line-height: 2; color: #bdc3b4; margin-top: 7px; }
.counter-navigation { display: flex; align-items: center; gap: 18px; }
.counter-round { width: 42px; height: 42px; border: 1px solid #747e69; border-radius: 50%; font-size: 18px; flex-shrink: 0; }
.counter-round:hover { background: #384335; }
.counter-seat-nav { display: flex; gap: 20px; }
.counter-seat { display: flex; align-items: center; flex-direction: column; gap: 7px; padding: 8px 0; color: #a7b19e; font-size: 10px; letter-spacing: .04em; border-bottom: 1px solid transparent; }
.counter-seat > span { font-family: "Noto Serif JP",serif; font-size: 18px; }
.counter-seat[aria-pressed="true"] { color: #f7e8bf; border-bottom-color: #cdb887; }
.counter-exit { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding-top: 24px; margin-top: 23px; border-top: 1px solid #45523f; }
#counter-status { color: #b3bca6; font-size: 11px; min-height: 22px; line-height: 1.8; }
.counter-exit > a { font-size: 12px; color: #ebdfc5; white-space: nowrap; border-bottom: 1px solid #788065; padding-bottom: 5px; }
.counter-exit > a > span { margin-left: 16px; }
.counter-experience button:focus-visible,.counter-experience a:focus-visible,.counter-stage:focus-visible { outline: 2px solid #efd6a0; outline-offset: 5px; }
.counter-noscript { padding-top: 15px; font-size: 13px; }
.counter-open { overflow: hidden; }
.counter-dialog { width: min(1100px,calc(100% - 64px)); max-width: none; max-height: min(840px,90svh); padding: 0; border: 0; background: #f3eee5; color: #363a30; overflow: auto; }
.counter-dialog[open] { display: grid; grid-template-columns: 1fr 1fr; }
.counter-dialog::backdrop { background: rgba(10,18,12,.82); backdrop-filter: blur(8px); }
.counter-close { position: absolute; top: 18px; right: 18px; display: flex; gap: 8px; align-items: center; justify-content: center; background: #f3eee5; border: 1px solid #b3ac9b; color: #404637; padding: 0 14px; min-height: 42px; font-size: 11px; z-index: 3; }
.counter-close > span:first-child { font-size: 23px; line-height: 1; }
.counter-story-visual { position: relative; min-height: 630px; background: #18211b; }
.counter-story-visual > img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; }
.counter-story-visual > video { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: contain; }
.counter-story-visual > [hidden], .counter-story-actions > [hidden] { display: none; }
.counter-story-position { position: absolute; left: 25px; bottom: 24px; font-size: 10px; letter-spacing: .13em; color: #fff6df; text-shadow: 0 1px 8px #000; pointer-events: none; }
.counter-story-visual:has(video:not([hidden])) .counter-story-position { top: 24px; bottom: auto; }
.counter-story-content { padding: 75px 45px 40px; }
.counter-story-content .counter-eyebrow { color: #826c49; }
#counter-story-title { font-family: "Noto Serif JP",serif; font-size: clamp(25px,2.5vw,35px); line-height: 1.7; font-weight: 300; letter-spacing: .06em; margin: 19px 0; }
#counter-story-copy { font-size: 14px; line-height: 2.2; color: #656758; white-space: pre-line; }
.counter-story-pairing { border-top: 1px solid #c9c1b1; margin-top: 29px; padding-top: 24px; }
.counter-pairing-intro { color: #827452; font-size: 11px; letter-spacing: .04em; margin-bottom: 12px; }
.counter-story-pairing > div { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
#counter-story-product { font-family: "Noto Serif JP",serif; font-size: 22px; font-weight: 500; }
#counter-story-kind { font-size: 11px; padding: 3px 8px; border: 1px solid #b9b29d; }
#counter-story-note { font-size: 13px; line-height: 2; margin-top: 12px; color: #626554; }
#counter-story-product-link { display: inline-block; font-size: 12px; padding-bottom: 5px; border-bottom: 1px solid #9b8c6c; margin-top: 13px; }
.counter-story-actions { display: flex; flex-direction: column; align-items: stretch; gap: 15px; margin-top: 28px; }
#counter-story-discovery { background: #303c2f; color: #f3ecda; font-size: 12px; padding: 15px; line-height: 1.7; }
#counter-story-next { font-size: 12px; color: #746343; padding: 9px; text-align: right; }
.counter-dialog button:focus-visible,.counter-dialog a:focus-visible { outline: 2px solid #94753a; outline-offset: 4px; }
@media (max-width: 1050px) {
 .counter-shell { width: calc(100% - 56px); }
 .counter-heading-row { display: block; }
 .counter-instruction { margin-top: 16px; }
 .counter-view { grid-template-columns: minmax(0,1fr) 105px; gap: 13px; }
 .counter-hotspot-label { font-size: 10px; padding: 6px 8px; }
 .counter-bottom { align-items: flex-start; }
 .counter-seat-nav { gap: 14px; }
 .counter-seat { max-width: 90px; }
 .counter-navigation { gap: 12px; }
 #counter-seat-title { font-size: 22px; }
 .counter-seat-caption { gap: 16px; }
 .counter-dialog { width: calc(100% - 40px); }
 .counter-story-content { padding: 72px 28px 35px; }
}
@media (max-width: 767px) {
 .hero-enter { bottom: 25px; gap: 12px; }
 .hero-enter > span:first-child { font-size: 12px; }
 .counter-experience { padding: 36px 0 34px; }
 .counter-shell { width: calc(100% - 36px); }
 .counter-heading-row { margin-bottom: 22px; }
 .counter-eyebrow { font-size: 11px; }
 .editorial-site .counter-heading-row h2 { font-size: clamp(24px,7.2vw,29px); line-height: 1.7; }
 .counter-heading-row h2 span { display: block; margin: 0; }
 .counter-instruction { font-size: 11px; line-height: 1.9; margin-top: 15px; padding: 0; }
 .counter-instruction > span { width: 24px; height: 24px; margin-right: 5px; }
 .counter-view { display: block; }
 .counter-stage { width: 100%; }
 .counter-scene-marker { top: 13px; left: 13px; right: 13px; font-size: 10px; }
 .counter-scene-marker > span { display: none; }
 .counter-hotspot { gap: 0; }
 .counter-hotspot-dot { font-size: 13px; width: 34px; height: 34px; margin: 5px; background: rgba(24,30,22,.7); border-width: 1px; }
 .counter-hotspot-dot::before { inset: -3px; }
 .counter-hotspot-label { display: none; }
 .counter-peek { width: 100%; height: 72px; flex-direction: row; gap: 14px; justify-content: flex-end; padding: 0 20px; margin-top: 10px; }
 .counter-peek > img { object-position: center 44%; }
 .counter-peek-shade { background: linear-gradient(90deg,rgba(15,23,17,.35),rgba(15,23,17,.77)); }
 .counter-peek-label { writing-mode: horizontal-tb; font-size: 17px; letter-spacing: .08em; }
 .counter-peek-arrow { width: 32px; height: 32px; font-size: 18px; }
 #counter-peek-title { left: 14px; right: auto; bottom: 27px; font-size: 11px; max-width: 46%; }
 .counter-point-menu { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-top: 15px; }
 .counter-point-choice { font-size: 11px; line-height: 1.6; padding: 10px 4px; border-bottom: 1px solid #77806b; min-height: 44px; color: #e1d8bf; }
 .counter-bottom { display: block; padding-top: 29px; }
 .counter-seat-number { font-size: 40px; }
 #counter-seat-title { font-size: 22px; }
 #counter-seat-copy { font-size: 11px; line-height: 2; }
 .counter-navigation { justify-content: space-between; gap: 9px; margin-top: 24px; }
 .counter-seat-nav { flex: 1; justify-content: space-around; gap: 8px; }
 .counter-seat { line-height: 1.6; max-width: 75px; }
 .counter-round { width: 36px; height: 36px; }
 .counter-exit { align-items: flex-start; flex-direction: column; gap: 12px; padding-top: 20px; margin-top: 23px; }
 #counter-status { font-size: 11px; }
 .counter-exit > a { font-size: 12px; }
 .counter-dialog { width: calc(100% - 24px); max-height: 91svh; }
 .counter-dialog[open] { display: block; }
 .counter-close { position: sticky; top: 12px; margin: 12px 12px -54px auto; width: fit-content; min-height: 42px; }
 .counter-story-visual { height: 230px; min-height: 0; }
 .counter-story-visual > img { object-fit: cover; }
 .counter-story-position { left: 17px; bottom: 17px; font-size: 10px; }
 .counter-story-content { padding: 28px 23px 30px; }
 #counter-story-title { font-size: 26px; line-height: 1.7; margin: 14px 0; }
 #counter-story-copy { font-size: 13px; }
 .counter-story-pairing { margin-top: 22px; padding-top: 20px; }
 #counter-story-product { font-size: 21px; }
 .counter-story-actions { margin-top: 22px; }
}
@media (prefers-reduced-motion: reduce) {
 .counter-hotspot-dot::before { animation: none; }
 .counter-hotspot-dot,.counter-peek > img,.counter-peek-shade { transition: none; }
 .counter-peek:hover > img { transform: none; }
}