@charset 'UTF-8';
/* TOMAS Layout CSS - Simple and reliable */

/* Body background and font */
body {
    background-color: #FFF;
    font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
}

/* Main background */
main {
    background-color: #f5f5f5;
}

/* Main container - Flex with row-reverse */
.container {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: reverse !important;
    -ms-flex-direction: row-reverse !important;
    flex-direction: row-reverse !important;
    gap: 24px !important;
    max-width: 1120px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 2rem 30px !important;
    align-items: flex-start !important;
    justify-content: space-between;
}

/* Sidebar - 25% width on left (appears left due to row-reverse) */
.sidebar-wrapper {
    width: 25% !important;
    min-width: 25% !important;
    max-width: 25% !important;
    -webkit-box-flex: 0 !important;
    -ms-flex: 0 0 25% !important;
    flex: 0 0 25% !important;
}

/* Content - 75% width on right */
.tomas-content-column {
    width: 75% !important;
    -webkit-box-flex: 0 !important;
    -ms-flex: 0 0 75% !important;
    flex: 0 0 75% !important;
    min-width: 0 !important;
}

/* Mobile - Stack vertically */
@media (max-width: 767px) {
    .container {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 0;
    }

    .sidebar-wrapper {
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
    }

    .tomas-content-column {
        width: 100% !important;
        -webkit-box-flex: 0 !important;
        -ms-flex: none !important;
        flex: none !important;
    }
}

/* Breadcrumbs */
.breadcrumbs-bar {
    color: #666;
    letter-spacing: 0.04em;
    padding: 10px 15px;
    font-family: Zen Kaku Gothic New, sans-serif;
    font-size: 12px;
    line-height: 1.8;
    margin-bottom: 0;
}

.breadcrumbs-bar .breadcrumbs-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 30px;
}

.breadcrumbs-bar p {
    margin: 0;
}

.breadcrumbs-bar a {
    color: #666;
    text-decoration: none;
    transition: color 0.3s;
}

.breadcrumbs-bar a:hover {
    color: #b7212b;
}

.breadcrumbs-bar .breadcrumb_last {
    color: #333;
}

@media (max-width: 767px) {
    .breadcrumbs-bar .breadcrumbs-container {
        padding: 0 40px;
    }
    .container {
        padding: 0 !important;
        flex-direction: column !important;
    }

    .tomas-content-column {
        padding-top: 0 !important;
    }

    .tomas-content-column > .py-8 {
        padding-top: 1rem !important;
    }

    .breadcrumbs-bar {
        padding: 8px 0;
        font-size: 11px;
         /* Firefox */
         /* IE/Edge */
    }

    .breadcrumbs-bar .breadcrumbs-container {
        padding: 0 20px;
        line-height: 1.5;
    }
}

/* Search Area */
.search-area {
    background: #fff;
    padding: 40px 30px;
    margin-bottom: 30px;
}

.search-title {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.4;
    color: #464344;
    margin: 0 0 10px;
    text-align: center;
    letter-spacing: 0.05em;
    font-family: Zen Kaku Gothic New, sans-serif;
}

.search-subtitle {
    font-size: 18px;
    font-weight: 500;
    color: #666;
    margin: 0 0 20px;
    text-align: center;
    letter-spacing: 0.04em;
}

.search-separator {
    border: none;
    border-top: 3px solid #b7212b;
    margin: 0 0 30px;
}

/* Search Form Wrapper */
.search-form-wrapper {
    display: flex;
    gap: 12px;
    align-items: stretch;
    flex-wrap: nowrap;
}

.area-select {
    width: 200px;
    flex-shrink: 0;
}

.search-input {
    flex: 1;
    min-width: 250px;
}

.search-button {
    flex-shrink: 0;
    min-width: 120px;
}

/* Search Form Styles */
.search-area input[type="text"],
.search-area select {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 12px 16px;
    font-size: 15px;
    font-family: Zen Kaku Gothic New, sans-serif;
    color: #464344;
    background: #fff;
    transition: border-color 0.3s;
    line-height: 1.5;
}

.search-area input[type="text"]:focus,
.search-area select:focus {
    outline: none;
    border-color: #b7212b;
}

.search-area button {
    background: #b7212b;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 12px 32px;
    font-size: 16px;
    font-weight: 600;
    font-family: Zen Kaku Gothic New, sans-serif;
    cursor: pointer;
    transition: background-color 0.3s;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

.search-area button:hover {
    background: #a01e26;
}

/* Search Methods */
.search-methods {
    display: flex;
    gap: 20px;
    margin: 30px 0;
    flex-wrap: wrap;
}

.method-button {
    flex: 1;
    min-width: 200px;
    padding: 25px 20px;
    text-align: center;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    text-decoration: none;
    color: #464344;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    font-weight: 500;
    font-family: Zen Kaku Gothic New, sans-serif;
}

.method-button:hover {
    background: #b7212b;
    border-color: #b7212b;
    color: #fff;
}

.method-button .method-icon {
    width: 40px;
    height: 40px;
    stroke: #b7212b;
    transition: stroke 0.3s;
}

.method-button:hover .method-icon {
    stroke: #fff;
}

/* Brand Filter */
.brand-filter {
    margin: 30px 0;
}

.filter-label {
    font-size: 14px;
    color: #464344;
    margin: 0 0 15px;
    font-weight: 400;
}

.filter-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.filter-btn {
    padding: 10px 20px;
    background: #FFF;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    color: #464344;
    cursor: pointer;
    transition: all 0.3s;
    font-family: Zen Kaku Gothic New, sans-serif;
}

.filter-btn:not(.active):hover {
    background-color: #b7212b;
    color: #fff;
    border-color: #b7212b;
}

.filter-btn.active {
    background-color: #ebebeb;
    color: #464344;
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 2px 4px 0px inset;
}

.filter-btn span {
    color: inherit;
    font-size: 13px;
}

/* Class List Header */
.class-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #e0e0e0;
}

.class-list-title {
    font-size: 20px;
    font-weight: 700;
    color: #b7212b;
    margin: 0;
    font-family: Zen Kaku Gothic New, sans-serif;
}

.class-list-meta {
    display: flex;
    gap: 20px;
    align-items: center;
    font-size: 14px;
    color: #666;
}

.total-count {
    font-size: 18px;
    font-weight: 700;
    color: #b7212b;
}

@media (max-width: 767px) {
    .search-area {
        padding: 20px 15px;
    }

    .search-title {
        font-size: 20px;
        margin-bottom: 10px;
    }

    .search-subtitle {
        font-size: 14px;
    }

    .search-methods {
        flex-direction: column;
        gap: 10px;
    }

    .method-button {
        min-width: 100%;
    }

    .class-list-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .class-list-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
}

/* Footer fix for static HTML - base.css style not applying due to HTML structure difference */
footer #footer-item .footer_container .footer-right > ul li {
    display: inline-block;
    margin-right: 1em;
    font-size: 12px;
    line-height: 2em;
    font-style: normal;
}

footer #footer-item .footer_container .footer-right > ul li a::before {
    display: inline-block;
    content: "〇";
    margin-right: 0.15em;
}