@charset "utf-8";
/* ==========================================================================
   search.css  -  Search results / no results     Design: SearchEmpty-PC/SP
   Shared parts used: c-breadcrumb, c-empty, c-pills, c-request, c-popular,
   c-grid, c-pagination (module.css)
   ========================================================================== */
.srch {
    padding: .16rem 0 .56rem;
}
.srch_title {
    margin: .1rem 0 .14rem;
    font-size: .26rem;
    line-height: .34rem;
    font-weight: 700;
    text-transform: uppercase;
}

/* ---------- search form ---------- */
.srch-form {
    display: flex;
    gap: .08rem;
}
.srch-form_field {
    position: relative;
    flex: 1;
    display: block;
}
.srch-form_icon {
    position: absolute;
    left: .14rem;
    top: 50%;
    display: flex;
    transform: translateY(-50%);
    pointer-events: none;
}
.srch-form_icon .icon {
    width: .2rem;
    height: .2rem;
}
.srch-form_input {
    width: 100%;
    height: .48rem;
    padding: 0 .44rem;
    border: 1px solid var(--c-ink);
    border-radius: .06rem;
    background: var(--c-white);
    font-size: .16rem;           /* 16px: no zoom on iPhone */
}
.srch-form_input::-webkit-search-cancel-button { display: none; }
.srch-form_input:focus-visible {
    box-shadow: inset 0 0 0 1px var(--c-ink);
    border-radius: .06rem;
}
.srch-form_clear {
    position: absolute;
    right: .04rem;
    top: 50%;
    display: grid;
    place-items: center;
    width: .4rem;
    height: .4rem;
    margin-top: -.2rem;
    color: var(--c-ink-muted);
}
.srch-form_clear:hover { color: var(--c-ink); }
.srch-form_clear .icon {
    width: .18rem;
    height: .18rem;
}
/* SP design has no button: Enter / "Go" key submits */
.srch-form_submit {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.srch-count {
    margin-top: .1rem;
    font-size: .14rem;
    line-height: .2rem;
    color: var(--c-ink-muted);
}
.srch-count strong {
    font-weight: 600;
    color: var(--c-ink);
}

/* ---------- no results ---------- */
.srch-empty {
    margin-top: .2rem;
}
.srch-empty .c-empty_icon .icon {
    width: .32rem;
    height: .32rem;
}
.srch-popular-words {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .1rem;
    margin-top: .08rem;
}
.srch-popular-words_label {
    font-size: .13rem;
    line-height: .18rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--c-ink-muted);
}
.srch-request {
    margin-top: .16rem;
}

/* ==========================================================================
   Tablet  768px -
   ========================================================================== */
@media (min-width: 768px) {
    .srch {
        padding: .24rem 0 .8rem;
    }
    .srch_title {
        margin: .16rem 0 .2rem;
        font-size: .36rem;
        line-height: .48rem;
    }
    .srch-form {
        gap: .12rem;
    }
    .srch-form_input {
        height: .52rem;
    }
    .srch-form_submit {
        position: static;
        width: auto;
        height: .52rem;
        padding: 0 .28rem;
        overflow: visible;
        clip: auto;
        border: 1px solid var(--c-ink);
        border-radius: .06rem;
        background: var(--c-ink);
        font-size: .16rem;
        font-weight: 600;
        color: var(--c-white);
        transition: background-color var(--dur);
    }
    .srch-form_submit:hover { background: #3A3531; }
    .srch-count { margin-top: .14rem; }
    .srch-empty { margin-top: .32rem; }
    .srch-request { margin-top: .24rem; }
    .srch-popular { margin-top: .64rem; }
}

/* ==========================================================================
   PC  1280px -
   ========================================================================== */
@media (min-width: 1280px) {
    .srch_title {
        font-size: .4rem;
        line-height: .52rem;
    }
}