.search-disclosure {
    margin-top: 16px;
}

.search-disclosure > summary {
    display: none;
}

.search-disclosure > .search-panel,
.search-disclosure > .route-search {
    margin-top: 0;
}

.search-panel label,
.route-search label {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.search-panel input,
.search-panel select,
.route-search input,
.route-search select {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.search-panel input[type="date"],
.route-search input[type="date"] {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    inline-size: 100%;
    max-inline-size: 100%;
    min-inline-size: 0;
    box-sizing: border-box;
}

@media (min-width: 761px) {
    .search-disclosure:not([open]) > .search-panel,
    .search-disclosure:not([open]) > .route-search {
        display: grid;
    }
}

@media (max-width: 760px) {
    .search-disclosure {
        border: 1px solid #aab8c9;
        background: #ffffff;
    }

    .search-disclosure > summary {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 6px 12px;
        align-items: center;
        padding: 12px 14px;
        color: #172033;
        cursor: pointer;
        list-style: none;
    }

    .search-disclosure > summary::-webkit-details-marker {
        display: none;
    }

    .search-disclosure > summary::after {
        content: "＋";
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: center;
        color: #274e7b;
        font-size: 1.25rem;
        font-weight: 800;
    }

    .search-disclosure[open] > summary::after {
        content: "−";
    }

    .search-disclosure-primary {
        min-width: 0;
        overflow: hidden;
        font-weight: 800;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .search-disclosure-secondary {
        color: #596779;
        font-size: 0.82rem;
        font-weight: 700;
    }

    .search-disclosure-action {
        grid-column: 2;
        grid-row: 1;
        padding-right: 24px;
        color: #274e7b;
        font-size: 0.78rem;
        font-weight: 800;
        white-space: nowrap;
    }

    .search-disclosure[open] > summary {
        border-bottom: 1px solid #d5deea;
    }

    .search-disclosure > .search-panel,
    .search-disclosure > .route-search {
        border: 0;
    }

    .route-search {
        gap: 10px;
        padding: 12px;
    }

    .route-search select,
    .route-search input,
    .route-search button {
        min-height: 42px;
        padding: 8px 10px;
    }

    .route-search label {
        gap: 4px;
    }

    .search-panel {
        gap: 10px;
        padding: 12px;
    }

    .search-panel input,
    .search-panel select,
    .search-panel button {
        min-height: 42px;
    }

    /* iPhone Safariでは date input の内部UIが固有幅を持つため、親の利用可能幅へ明示的に収める。 */
    .search-panel input[type="date"],
    .route-search input[type="date"] {
        width: -webkit-fill-available;
        inline-size: -webkit-fill-available;
        max-width: 100%;
        max-inline-size: 100%;
    }
}