.guide { --guide-line: #aa845da6; --guide-muted: #6b4d31; background: #34251c; }
.guide .site-scene { display: flow-root; max-width: var(--site-width); margin-inline: auto; background: radial-gradient(ellipse at 50% 0, #68462c, #3f2d22 650px, #34251c 1400px); }
.guide-storefront { position: absolute; inset: 0 0 auto; height: 340px; z-index: -1; overflow: hidden; }
.guide-storefront img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.guide-storefront::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, #513723, transparent 32%); }

.guide #site-nav a[aria-current='page'] { background: #c5a26b30; box-shadow: inset 0 -2px var(--red); }
.guide-book { margin: 220px 30px 40px; padding: 24px; border: 1px solid #b7976b; background-color: #efe0c2; background-image: radial-gradient(ellipse at 0 0, #bd89531a, transparent 45%), radial-gradient(ellipse at 100% 70%, #c898561c, transparent 50%), repeating-linear-gradient(33deg, #6f482904 0 1px, transparent 1px 5px); box-shadow: 0 8px 25px #190e0b66, inset 0 0 0 5px #fff2d640; }
.guide .site-footer { max-width: var(--site-width); margin-inline: auto; background-color: #efe0c2; }
.guide-opening { display: grid; grid-template-columns: 1.2fr .65fr 1fr; align-items: center; gap: 26px; padding: 24px 32px 16px; border: 1px solid var(--guide-line); border-top: 3px double var(--guide-line); box-shadow: inset 0 0 0 6px #fff5dc30; position: relative; }
.guide-title-block { text-align: center; padding-left: 72px; }
.guide-lamp { position: absolute; width: 86px; height: auto; bottom: 15px; left: 10px; mix-blend-mode: multiply; opacity: .8; pointer-events: none; }
.hotaru-aside .guide-books { width: 120px; height: 130px; margin-right: auto; object-fit: contain; mix-blend-mode: multiply; opacity: .8; }
.guide-site-name { margin: 0 0 25px; font-size: 1.15rem; letter-spacing: .23em; }
.guide-site-name span { display: block; margin: 5px 0; font: .75rem Georgia, serif; letter-spacing: .15em; }
.guide-site-name small { font-size: .75rem; letter-spacing: .18em; }
.guide-title-block h1 { margin: 0; font-size: clamp(2.8rem, 4.4vw, 4rem); letter-spacing: .19em; font-weight: 500; color: #593321; }
.guide-english { display: flex; align-items: center; gap: 16px; margin: 14px 0 25px; letter-spacing: .2em; font: 1rem Georgia, serif; }
.guide-english::before, .guide-english::after { content: ''; flex: 1; border-top: 1px solid var(--guide-line); }
.guide-welcome { font-size: 1rem; line-height: 1.95; text-align: left; }
.guide-host { display: block; width: 100%; height: 285px; object-fit: contain; align-self: end; filter: drop-shadow(1px 4px 3px #51321a22); }
.host-note { padding: 25px 23px; background: #fbefd4a3; border: 3px double var(--guide-line); box-shadow: 3px 4px 0 #a77b4430; transform: rotate(-1deg); }
.host-note h2 { margin: 0 0 16px; font-size: 2.3rem; letter-spacing: .2em; font-weight: 500; }
.host-note h2 span { display: block; font-size: 1rem; letter-spacing: .13em; margin-bottom: 8px; }
.host-note p { font-size: 1rem; line-height: 1.9; margin: 0; }
.guide-sections { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 12px; margin-top: 12px; }
.guide-panel { grid-column: span 6; padding: 24px 26px 12px; border: 1px solid #aa845d65; background: #fff4df24; position: relative; min-width: 0; }
.guide-panel::before, .guide-panel::after { display: none; }
.section-heading { display: flex; gap: 15px; align-items: center; margin-bottom: 22px; }
.section-number { display: flex; flex: 0 0 48px; align-items: center; justify-content: center; width: 48px; height: 48px; border: 3px double #ebd3ab; border-radius: 50%; outline: 1px solid #794832; color: #fff0d5; background: #71452d; font: 2rem/1 "Times New Roman", serif; font-variant-numeric: lining-nums tabular-nums; }
/* Optical correction for the slightly lower ink bounds of 6 and 7. */
.shop-panel .section-number, .help-panel .section-number { padding-bottom: 2px; }
.section-heading > div { flex: 1; border-bottom: 1px solid #a47b4b80; padding-bottom: 6px; }
.section-heading h2 { font-size: clamp(1.3rem, 2vw, 1.75rem); font-weight: 500; letter-spacing: .08em; margin: 0 0 5px; line-height: 1.5; }
.section-heading div > span { font: .75rem Georgia, serif; letter-spacing: .15em; color: var(--guide-muted); }
.guide-panel > p { font-size: 1rem; line-height: 1.95; margin: 0 0 15px; }
.hotaru-aside { display: flex; gap: 18px; align-items: center; justify-content: flex-end; margin-top: 16px; }
.hotaru-aside img { display: block; width: 120px; height: 170px; object-fit: contain; flex-shrink: 0; align-self: end; }
.small-guidance { color: #644b34; font-size: .875rem !important; }
.hall-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hall-card { position: relative; padding: 18px 14px 15px; border: 3px double #a7814d; background: #dfc39b69; display: flex; flex-direction: column; align-items: center; }
.hall-card h3 { align-self: stretch; margin: -18px -14px 0; padding: 14px 10px 5px; text-align: center; background: #745137; color: #fff0d2; font-size: 2rem; letter-spacing: .2em; font-weight: 500; }
.hall-subtitle { align-self: stretch; margin: 0 -14px 16px; padding: 0 10px 12px; background: #745137; color: #fff0d2; text-align: center; font-size: .875rem; letter-spacing: .1em; }
.hall-contents { width: 100%; min-height: 100px; font-size: .875rem; line-height: 1.9; margin: 0; }
.hall-card img { width: 118px; height: 160px; object-fit: contain; margin: 5px 0 12px; }
.west-hall { background: #d8c5bd66; }
.west-hall h3, .west-hall .hall-subtitle { background: #483633; }
.guide-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 46px; padding: 10px 19px; color: #fff2d5; background: var(--teal); border: 3px double #e6c596; outline: 1px solid #5f4a30; text-decoration: none; font-size: .9375rem; letter-spacing: .08em; line-height: 1.5; }
.guide-button:hover { background: #364f49; }
.guide-button:focus-visible { outline: 3px solid #ae4d25; outline-offset: 4px; }
.hall-card .guide-button { width: 100%; margin-top: auto; padding-inline: 12px; }
.west-hall .guide-button, .red-button { background: #723e30; }
.west-hall .guide-button:hover, .red-button:hover { background: #8c4d3a; }
.guide-tags { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; margin: 21px 0; }
.guide-tags li { background: #d3b68c5c; border: 1px solid #ae865235; border-radius: 3px; padding: 6px 11px; font-size: .875rem; line-height: 1.5; }
.search-aside { justify-content: flex-start; align-items: flex-end; gap: 24px; margin-top: 30px; }
.search-aside .guide-button { margin: 20px 0 12px; }
.usage-notes { border: 3px double #ab8254; padding: 16px 20px 16px 37px; margin: 20px 0 0; background: #f9e8c853; font-size: .875rem; line-height: 1.9; }
.usage-notes li + li { margin-top: 7px; }
.usage-panel .hotaru-aside img { height: 135px; width: 95px; }
.attention-panel { grid-column: span 5; }
.shop-panel { grid-column: span 3; }
.help-panel { grid-column: span 4; }
.notice-paper { list-style: none; padding: 18px; border: 4px double #9e784a; box-shadow: 2px 3px 0 #805c2c22; background: #f4e3c49c; margin: 0 0 20px; font-size: .9375rem; line-height: 1.9; }
.notice-paper li { position: relative; padding-left: 16px; }
.notice-paper li::before { content: '・'; position: absolute; left: 0; }
.notice-paper li + li { margin-top: 14px; }
.attention-panel .hotaru-aside img { width: 110px; height: 155px; }
.shop-panel .section-heading, .help-panel .section-heading { gap: 10px; }
.shop-panel .section-heading h2, .help-panel .section-heading h2 { font-size: 1.4rem; }
.shop-panel > .hotaru-quote, .help-panel > .hotaru-quote { font-size: .875rem; line-height: 1.85; margin: 24px 0 12px; }
.bottom-guide { display: flex; flex-direction: column; align-items: center; }
.bottom-guide img { width: 130px; height: 170px; object-fit: contain; margin-top: 8px; }
.bottom-guide .guide-button { align-self: stretch; margin: 14px 0; }
.help-links { list-style: none; padding: 0; margin: 20px 0; }
.help-links a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 13px 0; border-bottom: 1px solid #bba17c; font-size: 1rem; }
.help-links a span { text-decoration: none; color: #76593d; font-size: .75rem; white-space: nowrap; }
.help-links a:hover { color: #913e26; }
.help-hotaru { display: block; margin: 20px auto 0; width: 120px; height: 160px; object-fit: contain; }
@media (min-width: 761px) and (max-width: 1050px) {
  .guide-lamp { display: none; }
  .guide-title-block { padding-left: 0; }
  .hotaru-aside .guide-books { display: none; }
  .guide-opening { gap: 14px; padding: 25px 20px; grid-template-columns: 1fr .6fr 1fr; }
  .guide-host { height: 230px; }
  .host-note { padding: 18px 15px; }
  .guide-panel { padding: 22px 18px 12px; }
  .section-heading { gap: 12px; }
  .section-number { flex-basis: 42px; width: 42px; height: 42px; font-size: 1.8rem; }
  .attention-panel { grid-column: span 12; }
  .shop-panel, .help-panel { grid-column: span 6; }
  .attention-panel .hotaru-aside { margin-top: 0; }
  .hall-pair { gap: 8px; }
  .hall-card { padding-inline: 10px; }
  .hall-card h3, .hall-subtitle { margin-inline: -10px; }
  .hall-contents { min-height: 132px; }
  .search-aside { gap: 12px; }
  .hotaru-aside img { width: 95px; height: 140px; }
  .wide-break { display: none; }
}
@media (max-width: 760px) {
  .guide-lamp { display: none; }
  .guide-title-block { padding-left: 0; }
  .hotaru-aside .guide-books { display: none; }
  .guide .site-scene { padding-top: 0; }
  .guide-storefront { height: 250px; }
  .guide-book { margin: 218px 12px 26px; padding: 12px 10px 16px; }
  .guide-opening { grid-template-columns: 105px minmax(0,1fr); gap: 12px; padding: 25px 16px 18px; }
  .guide-title-block { grid-column: 1 / -1; }
  .guide-site-name { display: none; }
  .guide-title-block h1 { font-size: 2.65rem; }
  .guide-welcome { text-align: center; text-wrap: balance; font-size: 1rem; margin-bottom: 20px; }
  .guide-english { margin: 13px 24px 22px; }
  .guide-host { height: 185px; align-self: center; }
  .host-note { padding: 18px 13px; transform: none; }
  .host-note h2 { font-size: 1.8rem; margin-bottom: 10px; }
  .host-note h2 span { font-size: .875rem; }
  .host-note p { font-size: .9375rem; line-height: 1.85; }
  .guide-sections { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
  .guide-panel { padding: 25px 11px 15px; }
  .section-heading { gap: 12px; margin-bottom: 24px; }
  .section-number { flex-basis: 42px; width: 42px; height: 42px; font-size: 1.8rem; }
  .section-heading h2 { font-size: 1.45rem; letter-spacing: .035em; }
  .guide-panel > p { font-size: 1rem; }
  .hotaru-aside { gap: 12px; }
  .hotaru-aside img { width: 90px; height: 135px; }

  .hall-pair { gap: 10px; }
  .hall-card { padding-inline: 10px; }
  .hall-card h3, .hall-subtitle { margin-inline: -10px; }
  .hall-contents { min-height: 145px; overflow-wrap: anywhere; }
  .hall-card img { width: 100%; height: 150px; }
  .hall-card .guide-button { gap: 8px; padding: 10px 8px; }
  .search-aside { gap: 12px; margin-top: 18px; }
  .search-aside > div { min-width: 0; }
  .guide-button { padding-inline: 13px; }
  .usage-notes { padding-left: 30px; }
  .notice-paper { padding: 15px 13px; }
  .bottom-guide { flex-direction: row; justify-content: space-around; gap: 14px; }
  .bottom-guide .guide-button { align-self: center; }
  .help-hotaru { margin-top: 12px; }
  .wide-break { display: none; }
}
@media (max-width: 359px) {
  .guide-panel { padding-inline: 7px; }
  .guide-opening { grid-template-columns: 80px minmax(0,1fr); padding-inline: 12px; }
  .host-note { padding-inline: 10px; }
  .hall-pair { grid-template-columns: 1fr; gap: 16px; }
  .hall-contents { min-height: 0; text-align: center; }
  .hall-card img { height: 155px; }
  .hall-card .guide-button { justify-content: center; }
  .search-aside { gap: 7px; }
  .search-aside img { width: 72px; }
}

/* Individually fitted speech notes; the contour and tail are one continuous line. */
@font-face { font-family: 'Hakubo Yomogi'; src: url('/assets/guide/yomogi-guide.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
.hotaru-quote { flex: 0 1 auto; width: fit-content; max-width: 100%; margin: 0; padding: 19px 29px 21px 22px; border: 0; border-radius: 0; background-color: transparent; background-repeat: no-repeat; background-size: 100% 100%; font-family: 'Hakubo Yomogi', 'Hiragino Maru Gothic ProN', sans-serif; font-size: 1rem; line-height: 1.8; letter-spacing: 0; color: #523b28; }
.about-panel .hotaru-quote { background-image: url('/assets/guide/bubble-about.svg'); max-width: 250px; }
.search-panel .hotaru-quote { background-image: url('/assets/guide/bubble-search.svg'); padding-left: 31px; padding-right: 20px; max-width: 240px; }
.usage-panel .hotaru-quote { background-image: url('/assets/guide/bubble-usage.svg'); max-width: 235px; }
.attention-panel .hotaru-quote { background-image: url('/assets/guide/bubble-attention.svg'); max-width: 250px; }
.shop-panel .hotaru-quote { background-image: url('/assets/guide/bubble-shop.svg'); padding-left: 30px; padding-right: 18px; max-width: 220px; }
.help-panel .hotaru-quote { background-image: url('/assets/guide/bubble-help.svg'); max-width: 230px; }
.shop-aside { gap: 0; margin-top: 22px; justify-content: center; }
.shop-aside img { width: 82px; height: 150px; }
.shop-aside .hotaru-quote { font-size: .9375rem; }
.shop-link { display: flex; margin: 22px 0 15px; }
.help-aside { gap: 0; }
.help-aside img { width: 90px; height: 145px; }
@media (min-width: 1051px) { .shop-aside { flex-wrap: wrap; } .shop-aside .hotaru-quote { order: -1; background-image: url('/assets/guide/bubble-shop-down.svg'); padding: 18px 24px 30px; } .shop-aside img { width: 105px; height: 160px; } }
@media (max-width: 760px) {
  .hotaru-aside { gap: 4px; align-items: center; }
  .hotaru-aside img { align-self: center; width: 82px; height: 138px; }
  .hotaru-quote { font-size: .9375rem; padding: 18px 34px 20px 18px; }
  .about-panel .hotaru-quote { max-width: 235px; }
  .attention-panel .hotaru-aside img { width: 82px; height: 138px; }
  .usage-panel .hotaru-aside img { width: 82px; height: 138px; }
  .search-aside { gap: 5px; align-items: center; }
  .search-aside .hotaru-quote { padding-left: 33px; padding-right: 19px; }
  .search-aside .guide-button { margin: 15px 0 0 16px; }
  .shop-aside { justify-content: flex-start; }
  .shop-aside img { width: 105px; height: 155px; }
  .shop-aside .hotaru-quote { max-width: 215px; }
  .help-aside { justify-content: flex-end; }
}
@media (max-width: 359px) {
  .hotaru-quote { font-size: .875rem; padding-left: 15px; padding-right: 22px; }
  .hotaru-aside img, .usage-panel .hotaru-aside img, .attention-panel .hotaru-aside img { width: 68px; height: 120px; }
  .search-aside .hotaru-quote { padding-left: 23px; padding-right: 13px; }
  .shop-aside img { width: 75px; height: 130px; }
}