@charset "utf-8";

/*
 ************************************************
	joinReleases search.css
	* Loaded after main.css contains earch frame
 ***********************************************/

:root {
    --search-text-color-1: #444444;
    --search-text-color-2: #999999;
    --search-link-color: #8b0000;
}

.searchWrapper {
    width: 60%;
    margin: 3rem auto;
}

h2 {
    font-size: 1rem;
}

/***/

.search-button {
    background-image: url(../img/button_search.dark.svg);
    background-color: transparent;
    width: 1.5rem;
    height: 1.5rem;
    margin: 0 0.5rem;
    padding: 0;
    border: none;
    cursor: pointer;
}

.search-field>.search-input {
    width: 16rem;
}

.search-field>span {
    font-weight: 640;
    /* white-space: nowrap; */
}

.search-field,
.search-result {
    margin-bottom: 4rem;
}

.search-result {
    border-bottom: 1px solid var(--search-text-color-2);
}

.search-result>p {
    display: flex;
    justify-content: space-between;
    font-weight: 640;
    margin-bottom: 1.8rem;
    border-bottom: 1px solid var(--search-text-color-2);
}

.search-result a,
.search-result a:active,
.search-result a:visited {
    color: var(--search-link-color);
}

.search-result a:hover {
    color: var(--search-text-color-1);
}

.search-result>ul {
    font-weight: 520;
    margin: 0;
    padding: 0;
}

.search-result li {
    margin: 0.25rem 0 0.12rem 1.5rem;
}

.search-result li.nodot {
    list-style-type: none;
}

/**********************************
    Phone
**********************************/
@media only screen and (max-device-width: 767px) {
    .searchWrapper {
        width: 100%;
        margin: 3rem 1rem;
    }

    .search-field>.search-input {
        width: auto;
        font-size: 1rem;
        margin: 0 0 0.5rem 0;
    }
}