@charset "utf-8";

/* Shared refinements over the existing theme and its responsive rules. */
html body .container {
    width: 100%;
    max-width: 1230px;
    box-sizing: border-box;
}
#container > .main {
    box-sizing: border-box;
    min-width: 0;
}
.banner .dot { width: 100%; max-width: 1000px; }
#container .box .content {
    min-width: 0;
    overflow-wrap: anywhere;
}
#container .box .content img,
#container .box .content video {
    max-width: 100% !important;
    height: auto !important;
}
#container .box .content iframe { max-width: 100%; }
#container .box .content table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
#container .box .content pre { max-width: 100%; overflow-x: auto; }
#container .article-meta,
#container .detail-ops { flex-wrap: wrap; gap: 8px 16px; }
#container .pre-and-next > div { min-width: 0; overflow-wrap: anywhere; }

#menu .menu-toggle {
    appearance: none;
    background: transparent;
    border: 0;
    border-radius: 0;
    margin: 0;
    min-width: 55px;
    align-items: center;
    justify-content: center;
}
#menu.menu-collapsed .menu-toggle { display: flex; }
#menu .menu-toggle:focus-visible,
#menu a:focus-visible { outline: 2px solid #947c4d; outline-offset: -3px; }
#menu.menu-collapsed > ul#navList {
    box-sizing: border-box;
    max-height: calc(100vh - 60px);
    max-height: calc(100dvh - 60px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
#menu.menu-collapsed > ul#navList > li > a {
    display: block;
    box-sizing: border-box;
    min-height: 44px;
    padding-right: 52px;
}
#menu.menu-collapsed > ul#navList > li > .submenu > li > a {
    white-space: normal;
    min-height: 44px;
    overflow-wrap: anywhere;
}

@media (max-width: 1232px) {
    #container > .main { padding-left: 16px; padding-right: 16px; }
}
@media (min-width: 769px) and (max-width: 1100px) {
    /* Leave space for the existing fixed contact tab on tablets. */
    #container > .main { padding-right: 48px; }
}
@media (max-width: 1080px) {
    body.gbook-add .detail-boxing,
    body.gbook-add form .function { width: 100%; box-sizing: border-box; }
    body.gbook-add .detail-boxing > .left,
    body.gbook-add .detail-boxing > .right { min-width: 0; }
    body.gbook-add .detail-boxing input,
    body.gbook-add .detail-boxing textarea { box-sizing: border-box; max-width: 100%; }
    #container .contact_box { flex-wrap: wrap !important; }
    #container .contact_box > div > .text { white-space: normal; overflow-wrap: anywhere; }
    #container .head h1 { font-size: clamp(26px, 3.4vw, 40px); line-height: 1.35; }
    #container .location { overflow-wrap: anywhere; }
}
@media (max-width: 768px) {
    #container .sidebar,
    #container .maincontent {
        float: none;
        width: 100%;
        margin-left: 0;
        box-sizing: border-box;
    }
    #container .sidebar { margin-bottom: 24px; }
    #container .pre-and-next { display: flex; flex-direction: column; gap: 12px; }
    #container .pre-and-next > div { width: 100%; box-sizing: border-box; }
    #container input,
    #container select,
    #container textarea { box-sizing: border-box; max-width: 100%; font-size: 16px; }
    #container input[type="submit"],
    #container input[type="button"],
    #container button { min-height: 44px; }
    #container .box .no-data-img { max-width: 100%; height: auto; aspect-ratio: 1; }
    #menu.menu-collapsed > ul#navList.show { top: 60px; }
}
@media (max-width: 600px) {
    #container .contact-qr { gap: 20px; }
    #container .contact-qr .qr-card { width: calc((100% - 20px) / 2); max-width: 180px; }
    #container .contact-qr .qr-ph { width: 100%; height: auto; aspect-ratio: 1; }
    #container .contact-qr img { max-width: 100%; height: auto; }
    body .index_mark_product ul li { box-sizing: border-box; max-width: 100%; }
}