@charset "UTF-8";

/* ==========================================================================
   Common CSS - Header, Footer, and Global Resets
   ========================================================================== */

/* Box-sizing reset */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Prevent horizontal overflow on mobile */
html {
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
    width: 100%;
    font-family: "Inter", "Noto Sans JP", "Roboto", sans-serif !important;
    font-size: 16px !important;
    line-height: 1.8 !important;
    letter-spacing: 0.02em !important;
    color: #333 !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#page {
    overflow-x: hidden;
}

/* ---- Modern Typography Overrides ---- */

/* Override dress framework font */
.-dress_po016a {
    font-family: "Inter", "Noto Sans JP", "Roboto", sans-serif !important;
    letter-spacing: 0.02em !important;
    line-height: 1.8 !important;
}

/* Large headlines */
.-dress_po016a .c-large_headline {
    font-family: "Noto Sans JP", sans-serif !important;
    font-weight: 500 !important;
    font-size: 28px !important;
    letter-spacing: 0.08em !important;
    line-height: 1.5 !important;
}

/* Section titles */
.-dress_po016a .c-title {
    font-family: "Noto Sans JP", sans-serif !important;
    font-weight: 400 !important;
    letter-spacing: 0.08em !important;
    line-height: 1.4 !important;
}

/* Small headlines */
.-dress_po016a .c-small_headline {
    font-family: "Noto Sans JP", sans-serif !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em !important;
    line-height: 1.6 !important;
}

/* Navigation menu */
.-dress_po016a .c-menu.-menu_a {
    font-family: "Inter", sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase;
}

/* Body text */
.-dress_po016a .c-body {
    font-size: 15px !important;
    line-height: 2 !important;
    letter-spacing: 0.02em !important;
}

/* Lead text */
.-dress_po016a .c-lead {
    font-size: 13px !important;
    letter-spacing: 0.06em !important;
    color: #666 !important;
}

/* ---- Smoother Dividers ---- */
.-dress_po016a .c-hr {
    border-width: 1px !important;
    border-color: #e0e0e0 !important;
    border-style: solid !important;
    margin: 2em 0 !important;
}

/* ---- Modern Transitions ---- */
a {
    word-break: break-all;
    overflow-wrap: break-word;
    transition: color 0.3s ease, opacity 0.3s ease;
}

a:hover {
    opacity: 0.75 !important;
}

/* ---- Section Spacing ---- */
.b-plain>div,
.b-headlines>div,
.b-album>div {
    padding-top: 50px;
    padding-bottom: 50px;
}

/* ---- List Styles ---- */
.-dress_po016a .c-list-no_mark li {
    font-size: 14px !important;
    line-height: 2.2 !important;
}

/* ---- News List ---- */
.-dress_po016a .c-list_news th {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #666 !important;
}

.-dress_po016a .c-list_news td {
    font-size: 14px !important;
    line-height: 1.8 !important;
}

/* Global Layout Resets */
#a-header,
#a-ghost_header,
#a-billboard,
#a-footer {
    max-width: 100% !important;
    width: 100% !important;
}

#a-site_contents {
    max-width: 1280px !important;
    margin: 0 auto;
}

.bd-no-webp #a-billboard {
    padding: 0;
}

.bd-webp #a-billboard {
    padding: 0;
}

/* --------------------------------------------------------------------------
   Global Header
   IDs: #global-header
   Legacy IDs: #bk26408 (index), #bk26431 (outline), #bk26439 (products)
   -------------------------------------------------------------------------- */
.bd-no-webp #global-header,
.bd-no-webp #bk26408,
.bd-no-webp #bk26431,
.bd-no-webp #bk26439,
.bd-no-webp #bk26458,
.bd-no-webp #bk26473,
.bd-no-webp #bk26472,
.bd-no-webp #bk26471,
.bd-no-webp #bk26415,
.bd-no-webp #bk26451,
.bd-no-webp #bk26662,
.bd-no-webp #bk26444,
.bd-no-webp #bk26413 {
    background-color: rgba(255, 255, 255, 0.7);
}

.bd-webp #global-header,
.bd-webp #bk26408,
.bd-webp #bk26431,
.bd-webp #bk26439,
.bd-webp #bk26458,
.bd-webp #bk26473,
.bd-webp #bk26472,
.bd-webp #bk26471,
.bd-webp #bk26415,
.bd-webp #bk26451,
.bd-webp #bk26662,
.bd-webp #bk26444,
.bd-webp #bk26413 {
    background-color: rgba(255, 255, 255, 0.7);
}

#global-header>div,
#bk26408>div,
#bk26431>div,
#bk26439>div,
#bk26458>div,
#bk26415>div,
#bk26451>div,
#bk26662>div,
#bk26444>div,
#bk26413>div {
    margin: 0 auto;
    max-width: 100%;
    padding-left: 25px;
    padding-top: 15px;
    padding-right: 30px;
    padding-bottom: 5px;
}

/* Header layout - logo left, nav right on desktop */
#global-header .g-column {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#global-header .column.-col8 {
    text-align: right;
}

#global-header .column.-col8 .c-menu {
    justify-content: flex-end;
}

/* --------------------------------------------------------------------------
   Global Footer Links
   IDs: #global-footer-links
   Legacy IDs: #footer-content (index alias), #bk26502 (index), #bk26495 (outline/products)
   -------------------------------------------------------------------------- */
.bd-no-webp #global-footer-links,
.bd-no-webp #footer-content,
.bd-no-webp #bk26502,
.bd-no-webp #bk26495,
.bd-no-webp #bk26486,
.bd-no-webp #bk26500,
.bd-no-webp #bk26479,
.bd-no-webp #bk26498,
.bd-no-webp #bk26669,
.bd-no-webp #bk26492,
.bd-no-webp #bk26412 {
    background-color: rgba(51, 51, 51, 0.9);
}

.bd-webp #global-footer-links,
.bd-webp #footer-content,
.bd-webp #bk26502,
.bd-webp #bk26495,
.bd-webp #bk26486,
.bd-webp #bk26500,
.bd-webp #bk26479,
.bd-webp #bk26498,
.bd-webp #bk26669,
.bd-webp #bk26492,
.bd-webp #bk26412 {
    background-color: rgba(51, 51, 51, 0.9);
}

#global-footer-links>div,
#footer-content>div,
#bk26502>div,
#bk26495>div,
#bk26486>div,
#bk26500>div,
#bk26479>div,
#bk26498>div,
#bk26669>div,
#bk26492>div,
#bk26412>div {
    margin: 0 auto;
    max-width: 100%;
    padding-left: 15px;
    padding-top: 15px;
    padding-right: 15px;
    padding-bottom: 15px;
}

/* --------------------------------------------------------------------------
   Global Footer Credit
   IDs: #global-footer-credit
   Legacy IDs: #footer-credit (index alias), #bk26506 (shared)
   -------------------------------------------------------------------------- */
.bd-no-webp #global-footer-credit,
.bd-no-webp #footer-credit,
.bd-no-webp #bk26506,
.bd-no-webp #bk26508,
.bd-no-webp #bk26510,
.bd-no-webp #bk26517,
.bd-no-webp #bk26507,
.bd-no-webp #bk26516,
.bd-no-webp #bk26670,
.bd-no-webp #bk26511,
.bd-no-webp #bk26475,
.bd-no-webp #bk26470,
.bd-no-webp #bk26430,
.bd-no-webp #bk26484 {
    background-color: #1c1c1c;
}

.bd-webp #global-footer-credit,
.bd-webp #footer-credit,
.bd-webp #bk26506,
.bd-webp #bk26508,
.bd-webp #bk26510,
.bd-webp #bk26517,
.bd-webp #bk26507,
.bd-webp #bk26516,
.bd-webp #bk26670,
.bd-webp #bk26511,
.bd-webp #bk26475,
.bd-webp #bk26470,
.bd-webp #bk26430,
.bd-webp #bk26484 {
    background-color: #1c1c1c;
}

#global-footer-credit>div,
#footer-credit>div,
#bk26506>div,
#bk26508>div,
#bk26510>div,
#bk26517>div,
#bk26507>div,
#bk26516>div,
#bk26670>div,
#bk26511>div,
#bk26484>div {
    margin: 0 auto;
    max-width: 100%;
    padding-left: 0;
    padding-top: 0;
    padding-right: 10px;
    padding-bottom: 0;
}

/* --------------------------------------------------------------------------
   Media Queries (Tablet: 642px - 1024px)
   -------------------------------------------------------------------------- */
@media only screen and (min-width: 642px) and (max-width: 1024px) {

    /* Reduce nav font size and spacing on tablets to prevent logo overlap */
    #global-header .column.-col8 .c-menu.-menu_a li a {
        font-size: 10px !important;
        letter-spacing: 0.04em !important;
        padding: 0 4px !important;
    }

    #global-header .g-column {
        flex-wrap: nowrap;
    }

    #global-header .column.-col4 {
        max-width: 160px !important;
        flex-shrink: 0;
    }

    #global-header .column.-col8 {
        flex: 1;
        min-width: 0;
    }
}

/* --------------------------------------------------------------------------
   Media Queries (Mobile)
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 641px) {

    .bd-no-webp #a-header,
    .bd-webp #a-header,
    .bd-no-webp #a-ghost_header,
    .bd-webp #a-ghost_header,
    .bd-no-webp #a-billboard,
    .bd-webp #a-billboard,
    .bd-no-webp #a-main,
    .bd-webp #a-main,
    .bd-no-webp #a-side-a,
    .bd-webp #a-side-a,
    .bd-no-webp #a-side-b,
    .bd-webp #a-side-b,
    .bd-no-webp #a-footer,
    .bd-webp #a-footer {
        padding: 0;
    }

    /* Global mobile max-width override */
    .site_frame,
    #a-site_contents,
    #a-main,
    .g-column,
    [id^="bk"]>div {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Column stacking */
    .g-column .column {
        width: 100% !important;
        float: none !important;
    }

    /* Keep -sp-col3 grids as 3-column on mobile (e.g. outline na1-na15 gallery) */
    .g-column.-sp-col3 {
        display: flex !important;
        flex-wrap: wrap !important;
    }

    .g-column.-sp-col3>.column {
        width: 33.333% !important;
        float: left !important;
        flex: 0 0 33.333% !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Center Google Maps iframes on mobile */
    .c-img iframe {
        max-width: 100% !important;
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .c-body.c-left:has(iframe) {
        text-align: center !important;
    }

    .c-img:has(iframe) {
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Left-align body text on mobile (centered text looks awkward with line breaks) */
    .c-body.c-center {
        text-align: left !important;
    }

    /* Header */
    #global-header>div,
    #bk26408>div,
    #bk26431>div,
    #bk26439>div,
    #bk26458>div,
    #bk26415>div,
    #bk26451>div,
    #bk26662>div,
    #bk26444>div,
    #bk26413>div {
        padding-left: 10px;
        padding-top: 5px;
        padding-right: 10px;
        padding-bottom: 5px;
    }

    /* Logo centering on mobile */
    #global-header,
    #global-header>div,
    #global-header .g-column,
    [data-bk-id="bk26408"],
    [data-bk-id="bk26408"]>div,
    [data-bk-id="bk26408"] .g-column {
        width: 100% !important;
        max-width: 100% !important;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #global-header .column.-col4,
    [data-bk-id="bk26408"] .column.-col4 {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        text-align: center;
        padding-right: 0;
    }

    #global-header .column.-col4 .c-img,
    [data-bk-id="bk26408"] .column.-col4 .c-img {
        display: inline-block;
        max-width: 200px;
    }

    #global-header .column.-col8,
    [data-bk-id="bk26408"] .column.-col8 {
        width: 100% !important;
        float: none !important;
    }


    /* Footer Links */
    #global-footer-links>div,
    #footer-content>div,
    #bk26502>div,
    #bk26495>div,
    #bk26486>div,
    #bk26500>div,
    #bk26479>div,
    #bk26498>div,
    #bk26669>div,
    #bk26492>div,
    #bk26412>div {
        margin: 0 auto;
        max-width: 100%;
        padding-left: 15px;
        padding-top: 15px;
        padding-right: 15px;
        padding-bottom: 15px;
    }

    /* Footer social icons - horizontal layout on mobile */
    #global-footer-links .-column3 .c-list-no_mark,
    #footer-content .-column3 .c-list-no_mark,
    #bk26502 .-column3 .c-list-no_mark {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        padding: 0;
        margin: 0;
    }

    #global-footer-links .-column3 .c-list-no_mark li,
    #footer-content .-column3 .c-list-no_mark li,
    #bk26502 .-column3 .c-list-no_mark li {
        display: inline-block;
        width: auto;
    }

    #global-footer-links .-column3 .c-list-no_mark li img,
    #footer-content .-column3 .c-list-no_mark li img,
    #bk26502 .-column3 .c-list-no_mark li img {
        max-width: 40px;
        height: auto;
    }

    /* General content block mobile padding reset */
    .b-plain>div,
    .b-headlines>div,
    .b-both_diff>div {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Images must not exceed viewport */
    img {
        max-width: 100%;
        height: auto;
    }

    /* Hide desktop-only elements */
    .is-sp-hide {
        display: none !important;
    }
}

/* Utility Classes */
.c-center {
    text-align: center;
}

.c-right {
    text-align: right;
}

.c-left {
    text-align: left;
}

.c-none {
    display: block;
}

.none {
    display: block;
}

.c-img {
    display: inline-block;
    max-width: 100%;
}

.c-lead {
    font-size: 1.2em;
    line-height: 1.5;
}

/* Layout & Menu Adjustments */
.site_frame {
    max-width: 1280px !important;
    margin: 0 auto;
}

@media screen and (min-width: 641px) {
    .c-menu {
        display: flex !important;
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
    }

    .c-menu li {
        display: inline-block !important;
    }
}

/* Mobile Menu Styles */
@media screen and (max-width: 640px) {
    #custom-hamburger-btn {
        display: block;
        position: fixed;
        top: 15px;
        right: 15px !important;
        left: auto !important;
        width: 30px;
        height: 30px;
        z-index: 9999;
        cursor: pointer;
        background: none !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    /* Override bind.css c-sp_navigation_btn styles */
    .c-sp_navigation_btn {
        background: none !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        right: 15px !important;
        left: auto !important;
    }

    .c-sp-navigation_line {
        display: block;
        position: absolute;
        height: 3px;
        width: 24px;
        left: 3px;
        background-color: #333;
        transition: all 0.3s ease;
    }

    .c-sp-navigation_line1 {
        top: 6px;
    }

    .c-sp-navigation_line2 {
        top: 13px;
    }

    .c-sp-navigation_line3 {
        top: 20px;
    }

    /* Hamburger Animation */
    #custom-hamburger-btn.is-active .c-sp-navigation_line1 {
        transform: rotate(45deg);
        top: 13px;
    }

    #custom-hamburger-btn.is-active .c-sp-navigation_line2 {
        opacity: 0;
    }

    #custom-hamburger-btn.is-active .c-sp-navigation_line3 {
        transform: rotate(-45deg);
        top: 13px;
    }

    #custom-globalNavigation {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: rgba(255, 255, 255, 0.98);
        z-index: 9998;
        padding-top: 60px;
        overflow-y: auto;
    }

    #custom-globalNavigation.is-active {
        display: block;
    }

    .is-menu-open {
        overflow: hidden;
        /* Prevent body scroll when menu is open */
    }

    .c-menu {
        display: block;
        padding: 0;
        margin: 0;
    }

    .c-menu li {
        display: block;
        text-align: center;
        padding: 15px 0;
        border-bottom: 1px solid #eee;
    }

    .c-menu li a {
        font-size: 18px;
        font-weight: bold;
        color: #333;
        text-decoration: none;
    }

    /* Close button style if added by JS */
    .c-sp-closer {
        width: 40px;
        height: 40px;
        position: absolute;
        top: 10px;
        right: 10px;
        cursor: pointer;
    }

    .c-sp-closer::before,
    .c-sp-closer::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 24px;
        height: 3px;
        background-color: #333;
    }

    .c-sp-closer::before {
        transform: translate(-50%, -50%) rotate(45deg);
    }

    .c-sp-closer::after {
        transform: translate(-50%, -50%) rotate(-45deg);
    }
}