/* ==========================================================================
   Kobayashi Theme - Responsive CSS
   Breakpoint: 768px (mobile)
   ========================================================================== */

/* --- Base responsive overrides (all screens) --- */
#wrapper1,
.wrapper1,
.wrapper2 {
    box-sizing: content-box;
}

img {
    max-width: 100%;
    height: auto;
}

/* --- Desktop nav text-based styling --- */
.main-nav {
    width: 100%;
    background: linear-gradient(to bottom, #4a7a3e, #3d6a32);
}

.main-nav .nav-list {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    height: 50px;
}

.main-nav .nav-item {
    position: relative;
    flex: 1;
    text-align: center;
    border-right: 1px solid rgba(255,255,255,0.3);
}

.main-nav .nav-item:first-child {
    border-left: 1px solid rgba(255,255,255,0.3);
}

.main-nav .nav-item > a {
    display: block;
    padding: 14px 10px;
    color: #fff !important;
    text-decoration: none !important;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 0.05em;
    transition: background 0.2s;
}

.main-nav .nav-item > a:hover {
    background: rgba(255,255,255,0.15);
}

/* Desktop sub-menu */
.main-nav .nav-sub {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: #fff;
    border: 1px solid #3d6280;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 9999;
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-nav .nav-has-sub:hover .nav-sub {
    display: block;
}

.main-nav .nav-sub li a {
    display: block;
    padding: 10px 16px;
    color: #333 !important;
    text-decoration: none !important;
    font-size: 14px;
    border-bottom: 1px solid #eee;
    transition: background 0.2s;
}

.main-nav .nav-sub li:last-child a {
    border-bottom: none;
}

.main-nav .nav-sub li a:hover {
    background: #f0f5f0;
    color: #3d6a32 !important;
}

/* --- Hamburger button (hidden on desktop) --- */
.hamburger {
    display: none;
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 10001;
    background: #3d6a32;
    border: none;
    border-radius: 4px;
    padding: 10px;
    cursor: pointer;
    width: 44px;
    height: 44px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.hamburger-line {
    display: block;
    width: 22px;
    height: 2px;
    background: #fff;
    transition: transform 0.3s, opacity 0.3s;
}

/* --- Mobile menu (hidden on desktop) --- */
.mobile-menu-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 10002;
}

.mobile-menu {
    display: none;
    position: fixed;
    top: 0;
    right: -280px;
    width: 280px;
    height: 100%;
    background: #fff;
    z-index: 10003;
    overflow-y: auto;
    transition: right 0.3s ease;
    box-shadow: -2px 0 8px rgba(0,0,0,0.2);
}

.mobile-menu.is-open {
    right: 0;
}

.mobile-menu-overlay.is-open {
    display: block;
}

.mobile-menu-close {
    position: absolute;
    top: 10px;
    right: 14px;
    background: none;
    border: none;
    font-size: 30px;
    color: #333;
    cursor: pointer;
    line-height: 1;
}

.mobile-nav {
    padding: 50px 0 20px;
}

.mobile-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-nav-list > li {
    border-bottom: 1px solid #eee;
}

.mobile-nav-list > li > a {
    display: block;
    padding: 14px 20px;
    color: #333 !important;
    text-decoration: none !important;
    font-size: 15px;
    font-weight: bold;
}

.mobile-nav-has-sub {
    position: relative;
}

.mobile-sub-toggle {
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 48px;
    background: none;
    border: none;
    border-left: 1px solid #eee;
    font-size: 18px;
    color: #666;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-nav-sub {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
    background: #f9f9f9;
}

.mobile-nav-sub.is-open {
    display: block;
}

.mobile-nav-sub li a {
    display: block;
    padding: 12px 20px 12px 36px;
    color: #555 !important;
    text-decoration: none !important;
    font-size: 14px;
    border-top: 1px solid #eee;
}

.mobile-nav-sub li a:hover {
    background: #f0f5f0;
}

/* --- SP contact buttons in header (hidden on desktop) --- */
.header-sp-contact {
    display: none;
}

.sp-page-title {
    display: none;
}

/* --- Table scroll wrapper --- */
.table-scroll-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ==========================================================================
   MOBILE (768px and below)
   ========================================================================== */
@media screen and (max-width: 768px) {

    /* --- Layout --- */
    #wrapper1,
    .wrapper1,
    .wrapper2 {
        width: 100% !important;
        padding: 0 10px;
        box-sizing: border-box;
    }

    /* --- Header --- */
    .wrapper1[style] {
        position: relative !important;
    }

    #header_l {
        float: none;
        text-align: center;
        padding: 15px 0 5px;
    }

    #header_l img {
        max-width: 200px;
    }

    #header_r {
        display: none !important;
    }

    .header-sp-contact {
        display: flex;
        justify-content: center;
        gap: 16px;
        padding: 8px 0;
    }

    .header-sp-contact a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        font-size: 22px;
        text-decoration: none !important;
        background: #3d6280;
        color: #fff !important;
        border-radius: 50%;
    }

    /* SP Page Title */
    .sp-page-title {
        display: block;
        text-align: center;
        font-size: 14px;
        font-weight: bold;
        color: #3d6280;
        padding: 6px 10px 10px;
        border-bottom: 2px solid #3d6280;
        margin: 0 15px;
    }

    /* Hide banner on SP */
    .wrapper1 > div[style*="width:300px"] {
        display: none;
    }

    /* --- Desktop Nav hidden on SP --- */
    #wrapper_mbg {
        display: none;
    }

    #wrapper_mbg2 {
        display: none;
    }

    /* --- Hamburger visible --- */
    .hamburger {
        display: flex;
    }

    /* --- Hamburger active state --- */
    .hamburger.is-active .hamburger-line:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }
    .hamburger.is-active .hamburger-line:nth-child(2) {
        opacity: 0;
    }
    .hamburger.is-active .hamburger-line:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    /* --- Mobile menu display --- */
    .mobile-menu {
        display: block;
    }

    /* --- Content blocks --- */
    .item_w2,
    .item_w2h2,
    .item_w4h2,
    .item_w1h1 {
        float: none !important;
        width: 100% !important;
        height: auto !important;
        margin-bottom: 8px;
    }

    .item {
        width: 100% !important;
        box-sizing: border-box;
    }

    .sub_top,
    .sub_top2 {
        width: 100% !important;
        height: auto !important;
    }

    .sub_top img,
    .sub_top2 img {
        width: 100%;
        height: auto;
    }

    /* --- Sidebar + Main content --- */
    .sub_me,
    .sub_me2 {
        float: none !important;
        width: 100% !important;
        margin: 0 0 8px 0 !important;
        box-sizing: border-box;
    }

    .sub_me2_1 {
        width: 100% !important;
        box-sizing: border-box;
    }

    .sub_me2,
    .sub_me2_1 {
        height: auto !important;
    }

    .sub_me2_1 a {
        display: block;
    }

    .sub_me2_1 img {
        display: block;
        width: 100% !important;
        height: auto !important;
    }

    .sub_co,
    .sub_co2,
    #sub_co2 {
        float: none !important;
        width: 100% !important;
        margin: 0 0 8px 0 !important;
        box-sizing: border-box;
    }

    .sub_co_tru,
    .sub_co_in {
        width: 100% !important;
        margin: 20px 10px !important;
        box-sizing: border-box;
    }

    .sub_co_tru_naka {
        width: 100% !important;
        box-sizing: border-box;
        padding: 2px 10px 20px !important;
    }

    /* --- Two-column layouts in content --- */
    .sub_co_tru_l,
    .sub_co_tru_r,
    .sub_co_tru_rw,
    .sub_co_tru_l1,
    .sub_co_tru_r1,
    #info1_l,
    #info1_r,
    #info1_l2,
    #info1_r2,
    #cr_co_l,
    #cr_co_r,
    #tru_02l,
    #tru_02r,
    #tru05_l,
    #tru05_r,
    #tru06_l,
    #tru06_r,
    #tru06_l2,
    #tru06_r2,
    #tru08_l,
    #tru08_r,
    #tru09_l,
    #tru09_r,
    #tru11_l,
    #tru11_r,
    #tru13_l,
    #tru13_r,
    #maint1_l,
    #maint1_r,
    #sub_co_tru_02d_l,
    #sub_co_tru_02d_r,
    #sub_co_tru_02d_l2,
    #sub_co_tru_02d_r2,
    #sub_co_tru_02n_l,
    #sub_co_tru_02n_r {
        float: none !important;
        width: 100% !important;
        margin: 10px 0 !important;
    }

    /* --- Tables --- */
    table.tabinfo,
    table.tabfork,
    table.tabco,
    table.tabparh,
    table.meint1 {
        width: 100% !important;
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table.tabinfo th,
    table.tabinfo td,
    table.tabfork th,
    table.tabfork td,
    table.tabco th,
    table.tabco td {
        padding: 8px 10px;
        font-size: 14px;
    }

    /* --- Forklift image map tables --- */
    .sub_co_tru2 {
        width: 100% !important;
        height: auto !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
    }

    .sub_co_tru3 {
        width: 100% !important;
        height: auto !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
    }

    table.tabfork0,
    table.tabfork00,
    table.tabfork000,
    table.tabpar,
    table.tabpar0,
    table.tabpar00,
    table.tabpar000,
    table.tabpar0000,
    table.tabpar00000 {
        width: 100% !important;
    }

    /* --- Iframe responsive --- */
    iframe {
        max-width: 100%;
        height: auto;
        min-height: 250px;
    }

    .slide iframe {
        padding: 0 !important;
        width: 100% !important;
    }

    /* --- bxSlider --- */
    .bxslider .slide img {
        width: 100%;
        height: auto;
    }

    /* --- Footer --- */
    #footer_bg1 {
        height: auto !important;
        padding: 20px 10px;
    }

    #footer_l {
        float: none !important;
        width: 100% !important;
        text-align: center;
        margin-bottom: 15px;
    }

    #footer_r {
        float: none !important;
        width: 100% !important;
    }

    #footer_r table {
        width: 100% !important;
        font-size: 12px;
    }

    #footer_r table tr {
        display: flex;
        flex-wrap: wrap;
    }

    #footer_r table td {
        display: block;
        width: 50%;
        box-sizing: border-box;
        padding: 8px;
        vertical-align: top;
    }

    #footer_bg2 {
        height: auto !important;
        padding: 15px 10px;
    }

    p.pcopy {
        font-size: 11px;
    }

    /* --- Page top button --- */
    #paget {
        float: none;
        text-align: center;
        margin-top: 20px !important;
    }

    /* --- Misc --- */
    .isotope {
        width: 100%;
    }

    .cr_co01 {
        margin: 0 10px !important;
    }

    #ment02 {
        margin: 15px 10px !important;
    }

    .sub_co2a {
        width: 100% !important;
        height: auto !important;
    }

    .conim {
        margin-left: 0 !important;
    }

    .sub_co_in iframe {
        margin-left: 0 !important;
    }

    input.btna {
        width: 100% !important;
        max-width: 250px;
    }

    /* --- HR widths --- */
    .hr_co2,
    .hr_co4,
    .hr_co5,
    .hr_co6 {
        width: 100% !important;
        margin-left: 0 !important;
    }

    /* --- Contact form forklift --- */
    .sub_co_tru2 table {
        width: 100% !important;
    }

    /* --- Contact form tables --- */
    table.tabco {
        width: 100% !important;
        display: block;
    }

    table.tabco tbody {
        display: block;
        width: 100%;
    }

    table.tabco tr {
        display: block;
        margin-bottom: 0;
    }

    table.tabco th,
    table.tabco td {
        display: block;
        width: 100% !important;
        box-sizing: border-box;
        padding: 10px 15px !important;
    }

    table.tabco th {
        background-color: #d5e1e1;
        border-bottom: none;
    }

    table.tabco td {
        border-bottom: 1px solid #d3d4d4;
    }

    table.tabco input[type="text"],
    table.tabco input[type="email"],
    table.tabco input[type="tel"],
    table.tabco textarea,
    table.tabco .wpcf7-form-control {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    .sub_co_tru {
        overflow: hidden;
    }

    table.tabco th.tabcofi {
        padding: 15px !important;
    }

    input.btna,
    .wpcf7-submit {
        width: 100% !important;
        max-width: 300px;
        padding: 12px 20px;
        font-size: 16px;
    }

    /* breadcrumb */
    p.pan {
        font-size: 12px;
        padding: 0 5px;
    }

    /* linebox (about page) */
    .linebox {
        padding: 1em 10px !important;
    }
}