@charset "UTF-8";
/* Follow the sushi page's colors, typography, spacing and restaurant components. */
.bar_main { background: #FAFAF8; color: #333; }
.bar_main *, .bar_main *::before, .bar_main *::after { box-sizing: border-box; }
.bar_main figure { margin: 0; }
.bar_page .footer_sitemap { background-image: url(../../img/bar-main-higashiyama/footer-placeholder.svg); }
.bar_hero, .bar_intro { background: #585D3D; color: #fff; }
.bar_hero_photo { aspect-ratio: 1.8; }
.bar_hero_photo img { width: 100%; height: 100%; object-fit: cover; }
.bar_hero_heading { padding: 7.3rem 2rem 1.3rem; text-align: center; }
.bar_hero_heading h1 { font-size: 2.5rem; font-weight: 500; letter-spacing: .1em; line-height: 1.5; margin: 0; }
.bar_hero_heading h1 > span { display: block; font-size: 1.6rem; font-weight: 400; letter-spacing: .1em; margin-bottom: 1.3rem; }
.bar_intro.bar_section { padding: 0 2rem 7.9rem; text-align: center; }
.bar_intro p { font-size: 1.3rem; font-weight: 500; letter-spacing: .05em; line-height: 2.3077; }
.bar_section { position: relative; padding: 8.7rem 2rem 8rem; }
.bar_section[id] { scroll-margin-top: 15rem; }
.bar_section_title { text-align: center; font-size: 1.3rem; letter-spacing: .05em; font-weight: 500; color: #4A521E; margin: 0 0 5rem; }
.bar_section_title > .en { display: block; font-size: 2.5rem; letter-spacing: .05em; font-weight: 400; line-height: 1.3; }
.bar_menu::before, .bar_private::before, .bar_access::before { content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: 34px; background: #E2E2D5; transform: translateX(-50%); }
.bar_menu::after, .bar_private::after, .bar_access::after { content: ""; position: absolute; left: 50%; top: 31px; width: 7px; height: 7px; border-radius: 50%; background: #E2E2D5; transform: translateX(-50%); }
.bar_private, .bar_access { border-top: 1px solid #E2E2D5; }
.bar_split { display: flex; justify-content: space-between; align-items: flex-start; max-width: 110rem; margin: auto; }
.bar_split + .bar_split { margin-top: 7.8rem; }
.bar_photo { width: 50%; aspect-ratio: 3 / 2; }
.bar_photo .menu_list_slider { width: 100%; height: 100%; }
.bar_photo .slick-list, .bar_photo .slick-track, .bar_photo .slick-slide { height: 100%; }
.bar_photo .slick-slide > div, .bar_photo .slick-slide > div > div { height: 100%; }
.bar_photo img { width: 100%; height: 100%; object-fit: cover; }
.bar_copy { width: 41.8182%; font-size: 1.3rem; letter-spacing: .05em; line-height: 1.9237; }
.bar_copy h3 { font-size: 1.8rem; letter-spacing: .1em; font-weight: 400; border-bottom: 1px solid #C7C7BC; padding-bottom: 1.5rem; margin-bottom: 1.2rem; }
.bar_copy p { font-size: 1.3rem; line-height: 1.9237; }
.bar_copy p + p { margin-top: 1.1rem; }
.bar_copy .bar_eyebrow { color: #4A521E; font-size: 1.3rem; letter-spacing: .05em; margin-bottom: 1.5rem; }
.bar_copy .bar_small_en { margin: -.5rem 0 1.2rem; font-size: 1.3rem; }
.bar_copy h3:not(:first-child) { margin-top: 2rem; }
.bar_facts { margin: 2rem 0; font-size: 1.3rem; letter-spacing: .05em; line-height: 1.9237; }
.bar_facts > div { display: grid; grid-template-columns: 10rem 1fr; gap: 2rem; padding: 1.5rem 0; border-bottom: 1px solid #E2E2D5; }
.bar_facts dt { font-weight: 500; }
.bar_facts dd { margin: 0; }
.bar_main .bar_note { font-size: 1.3rem; line-height: 1.9237; }
.bar_button { display: flex; align-items: center; justify-content: center; position: relative; width: 100%; max-width: 34.2rem; min-height: 6rem; margin: 3.6rem auto 1.5rem; padding: 1.8rem 4rem; background: #C59C39; border: 1px solid #C59C39; color: #fff; font-size: 1.3rem; letter-spacing: .1em; line-height: 1.6; transition: opacity .2s; }
.bar_button::before { content: ""; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; border-radius: 50%; background: #fff; }
.bar_button::after { content: ""; position: absolute; right: 19.5px; top: 50%; width: 6px; height: 6px; border-top: 2px solid #C59C39; border-right: 2px solid #C59C39; transform: translateY(-50%) rotate(45deg); }
.bar_button:hover { opacity: .8; }
.bar_button > span { display: none; }
.bar_main a[href^="tel:"] { pointer-events: auto; }
.bar_button:focus-visible, .bar_map_link:focus-visible { outline: 2px solid #585D3D; outline-offset: 5px; }
.bar_main .bar_phone { text-align: center; font-size: 1.6rem; letter-spacing: .05em; margin: 1.5rem 0 .5rem; }
.bar_phone + .bar_note { text-align: center; }
.bar_private_contact { width: 100%; max-width: 34.2rem; margin: 7.8rem auto 0; text-align: center; }
.bar_private_contact .bar_button { width: 100%; margin: 0 0 1.8rem; }
.bar_private_contact .bar_phone { margin: 0 0 .6rem; font-size: 1.8rem; line-height: 1.5; }
.bar_private_contact .bar_phone + .bar_note { margin: 0; font-size: 1.2rem; line-height: 1.6; }
.bar_access { padding-top: 8rem; }
.bar_access_inner { max-width: 80rem; margin: auto; }
.bar_access .sushi_access_map { margin-bottom: 4rem; }
.bar_access .sushi_access_map_link { text-align: center; }
.bar_map_link { display: block; width: fit-content; margin: 2.5rem auto 0; color: #4A521E; border-bottom: 1px solid #C7C7BC; padding-bottom: .8rem; font-size: 1.3rem; letter-spacing: .05em; }
.bar_reservation { background: #EFEFEC; text-align: center; padding: 7.7rem 2rem 5.8rem; }
.bar_faq h2 { overflow-wrap: anywhere; }
@media (max-width: 768px) {
    .bar_hero_photo { aspect-ratio: 3 / 4; }
    .bar_hero_heading { padding: 6.6rem 2rem 1.6rem; }
    .bar_hero_heading h1 { font-size: 2.2rem; }
    .bar_hero_heading h1 > span { font-size: 1.2rem; letter-spacing: .05em; margin-bottom: 2rem; }
    .bar_intro.bar_section { padding: 0 2rem 6rem; }
    .bar_intro p { line-height: 1.6; }
    .bar_section { padding: 7rem 2rem; }
    .bar_section[id] { scroll-margin-top: 7rem; }
    .bar_access .bar_section_title > .en, .bar_reservation .bar_section_title > .en { font-size: 2.2rem; }
    .bar_split { display: block; }
    .bar_photo { width: 100%; }
    .bar_copy { width: 100%; padding-top: 2.8rem; line-height: 1.6; }
    .bar_copy h3 { font-size: 1.6rem; letter-spacing: .05em; line-height: 1.45; padding-bottom: .9rem; margin-bottom: 1rem; }
    .bar_copy p { line-height: 1.6; }
    .bar_copy h3:not(:first-child) { margin-top: 1.5rem; }
    .bar_facts > div { grid-template-columns: 7rem minmax(0, 1fr); gap: 1rem; }
    .bar_facts dd { overflow-wrap: anywhere; }
    .bar_button { width: calc(100% - 4rem); margin-top: 2.5rem; }
    .bar_private_contact { width: calc(100% - 4rem); margin-top: 4rem; }
    .bar_reservation { padding: 6rem 2rem; }
}