@charset "UTF-8";

main {
    margin-bottom: 10%;
}

#main_title .main_title_bk {
    &::before {
        content: "";
        width: 100%;
        height: 100%;
        display: block;
        background: url(../common/main_title_bk.jpg) no-repeat center;
        background-size: cover;
    }
    &::after {
        content: "";
        width: 100%;
        height: 100%;
        background: url(../hospital/main_title_hospital.png) no-repeat center right;
        background-size: auto 105%;
        position: absolute;
        left: 0;
        top: 0;
    }
}

/** search
===================================*/
#sec_search {
    margin-top: 70px;
    padding: 0;
    border: 1px solid var(--main-color);
    border-radius: var(--radius);
    position: relative;
    transition: all 0.4s;
    &.active {
        padding: 45px 15px 35px;
    }
}

#sec_search #search_btn {
    max-width: 270px;
    margin: auto;
    padding: 10px 0;
    color: #fff;
    font-size: 17px;
    font-family: var(--font-maru);
    font-weight: var(--font-bold);
    text-align: center;
    letter-spacing: 0.07em;
    background: var(--main-color);
    border-radius: var(--radius);
    cursor: pointer;
    position: absolute;
    top: -24px;
    right: 0;
    left: 0;
}

#sec_search #search_btn p {
    width: 25px;
    height: 25px;
    margin: -4px 0 0 0.5em;
    display: inline-block;
    vertical-align: middle;
    border-radius: 100px;
    background: #fff;
    position: relative;
}

#sec_search #search_btn p span {
    width: 11px;
    height: 11px;
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    &::before,
    &::after {
        content: "";
        position: absolute;
        background: var(--main-color);
        transition: all 0.3s;
    }
    &::before {
        width: 100%;
        height: 1.5px;
        top: 50%;
        left: 0;
        margin-top: -1px;
    }
    &::after {
        width: 1.51px;
        height: 100%;
        top: 0;
        left: 50%;
        margin-left: -1px;
    }
}

#sec_search.active #search_btn p span {
    top: 1px;
    &::before,
    &::after {
        transform: rotate(45deg);
    }
}

#sec_search .search_tit {
    width: fit-content;
    margin: 0 auto 15px;
    padding: 0 2em;
    font-size: clamp(14px, 1.3vw, 16px);
    font-weight: var(--font-midium);
    text-align: center;
    letter-spacing: 0.07em;
    position: relative;
    &::before,
    &::after {
        display: block;
        font-size: 1em;
        font-weight: var(--font-midium);
        line-height: 0;
        position: absolute;
        top: 50%;
    }
    &::before {
        content: '（';
	    left: 0;
    }
    &::after {
        content: '）';
	    right: 0;
    }
}

/*---- sec_search detail ----*/
#sec_search input {
  display: none;
}

#sec_search #search_toggle {
    display: flex;
    justify-content: space-between;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

#sec_search.active #search_toggle {
    opacity: 1;
    visibility: visible;
}

#sec_search #search_left {
    width: 68%;
    padding: 0 3%;
    display: flex;
    flex-wrap: wrap;
    gap: 5% 2%;
}

#sec_search #area {
    width: 32%;
    padding: 0 2%;
    border-right: 2px solid var(--sub-color);
}

#sec_search #area_list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

#sec_search #area_list .check_name {
    width: 30%;
}

#sec_search #area_list .check_name label .check_deco01 {
    width: 100%;
    height: 100%;
    display: block;
    padding: 3px 0;
    color: #b1b1b1;
    text-align: center;
    font-weight: var(--font-midium);
    background: #efefef;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
    &:hover {
        background: var(--sub-color);
    }
}

#sec_search #area_list .check_name input[type=checkbox]:checked + label .check_deco01 {
    color: #fff;
    background: var(--main-color);
}

#sec_search #weekend {
    width: 27%;
    padding-right: 3%;
    border-right: 2px solid var(--sub-color);
}

#sec_search #weekend_list {
    width: fit-content;
    margin: auto;
}

#sec_search #weekend_list .check_name {
    display: block;
    &:first-child {
        margin-bottom: 5px;
    }
}

#sec_search #weekend_list .check_name label {
    color: var(--main-color);
    font-weight: var(--font-midium);
    cursor: pointer;
}

#sec_search #weekend_list .check_name label .check_radio {
    width: 20px;
    height: 20px;
    margin-right: 5px;
    display: inline-block;
    position: relative;
    top: 3px;
    border: 1px solid var(--main-color);
    border-radius: 4px;
    transition: all 0.3s;
    &::after {
        content: "";
        position: absolute;
        top: 5px;
        left: 5px;
        bottom: 5px;
        right: 5px;
    }
}

#sec_search #weekend_list .check_name label:hover .check_radio {
    background: var(--sub-color);
}

#sec_search #weekend_list .check_name input[type=checkbox]:checked + label .check_radio {
    background: var(--sub-color);
}

#sec_search #weekend_list .check_name input[type=checkbox]:checked + label .check_radio:after {
  background: var(--main-color);
  border-radius: 100px;
}

#sec_search #kinds {
    width: 71%;
    padding-left: 3%;
}

#sec_search #kinds_list {
    display: flex;
    gap: 10px;
}

#sec_search #kinds_list .check_name {
    aspect-ratio: 1 / 1;
    flex: 1;
}

#sec_search #kinds_list .check_name label .check_deco02 {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 3px 0;
    color: #b1b1b1;
    text-align: center;
    font-size: 11px;
    line-height: 1.2em;
    letter-spacing: -0.04em;
    font-weight: var(--font-bold);
    font-family: var(--font-maru);
    background: #efefef;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
    &:hover {
        background: var(--sub-color);
    }
    &::before {
        content: "";
        width: 100%;
        height: 0;
        margin: 0 auto;
        padding-top: 42%;
        display: block;
        background-size: 100%;
    }
}

#sec_search #kinds_list .check_name label .check_deco02#dog::before {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45.8 38"><path fill="%23d1d1d1" d="M43.7,17.1c0-.2,0-.5.2-.7,2.2-2.8.9-6.2.7-6.6s-.5-.3-.6,0c0,.2-2.5,3.2-3.3,4.2s-.4.3-.7.3h-17.2c-.3,0-.6-.1-.7-.4C20.5,11.8,12.9.9,12.7.5S12.1,0,11.9,0,11.3,0,11.3.7v6.6c0,.3-.2.6-.4.8-1.8,1.1-8.8,5.1-9.9,5.7-1.3.7-.9,1.6-.6,2.3.3.6,3.9,8.4,4,8.7,0,.2.3.2.4,0,0-.1,1-1.5,1.2-1.8s.4-.2.5,0c0,0,.6.4.9.6.2.2.5,0,.5-.1s1.2-1.8,1.3-2,.3,0,.4,0c0,0,.5.5.8.8s.4.2.6-.1c0-.1.9-1.3,1.1-1.5.2-.2.3,0,.4,0,.1.2,1.3,2,1.7,2.6.4.7.4,1,.4,1.2s-.9,9.6-1.1,12.6.4,1,.9,1h6.6c.4,0,.8-.3.9-.8l1.2-7.8c0-.4.4-.8.9-.8h8.4c.6,0,1.9.2,3.2,1.5s1.9,5.4,2.2,7.1.4.7.9.7h6.4c.5,0,.9-.5.9-1l-2.1-19.9h-.2Z" /></svg>') no-repeat center bottom;
}

#sec_search #kinds_list .check_name input[type=checkbox]:checked + label .check_deco02#dog::before {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45.8 38"><path fill="%23ffffff" d="M43.7,17.1c0-.2,0-.5.2-.7,2.2-2.8.9-6.2.7-6.6s-.5-.3-.6,0c0,.2-2.5,3.2-3.3,4.2s-.4.3-.7.3h-17.2c-.3,0-.6-.1-.7-.4C20.5,11.8,12.9.9,12.7.5S12.1,0,11.9,0,11.3,0,11.3.7v6.6c0,.3-.2.6-.4.8-1.8,1.1-8.8,5.1-9.9,5.7-1.3.7-.9,1.6-.6,2.3.3.6,3.9,8.4,4,8.7,0,.2.3.2.4,0,0-.1,1-1.5,1.2-1.8s.4-.2.5,0c0,0,.6.4.9.6.2.2.5,0,.5-.1s1.2-1.8,1.3-2,.3,0,.4,0c0,0,.5.5.8.8s.4.2.6-.1c0-.1.9-1.3,1.1-1.5.2-.2.3,0,.4,0,.1.2,1.3,2,1.7,2.6.4.7.4,1,.4,1.2s-.9,9.6-1.1,12.6.4,1,.9,1h6.6c.4,0,.8-.3.9-.8l1.2-7.8c0-.4.4-.8.9-.8h8.4c.6,0,1.9.2,3.2,1.5s1.9,5.4,2.2,7.1.4.7.9.7h6.4c.5,0,.9-.5.9-1l-2.1-19.9h-.2Z" /></svg>') no-repeat center bottom;
}

#sec_search #kinds_list .check_name label .check_deco02#cat::before {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45.8 38"><path fill="%23d1d1d1" d="M5,4.6S5.3,0,6.5,0s2.9,2.8,2.9,2.8h6S17,0,18.2,0s1.5,4.6,1.5,4.6c0,0,3,3,1.5,7.1-.1.3-.2.6-.4.8,3,2.6,7.7,5.9,11.5,9.4,2.5,2.4,3.6,5.7,3.5,8.8.2-.5.3-1,.4-1.7v-1c0-1.2-.3-2.4-.7-3.7-.6-1.9-1.6-3.9-2.4-5.7-.4-.9-.8-1.9-1.1-2.8-.3-.9-.5-1.9-.5-2.8s.3-2.2,1-3.1c.6-.8,1.2-1.4,2-1.8.8-.4,1.6-.6,2.4-.6,1.5,0,2.9.6,4,1.7s1.8,2.6,1.8,4.4-.6,1.3-1.3,1.3-1.3-.6-1.3-1.3c0-1.2-.5-2-1.1-2.7-.6-.6-1.4-.9-2.2-.9s-.8,0-1.2.3c-.4.2-.8.5-1.1,1s-.5.9-.5,1.6.2,1.7.7,2.8c.6,1.7,1.6,3.6,2.5,5.6.9,2.1,1.6,4.3,1.6,6.6v1.3c0,1.2-.4,2.2-.9,3-.6,1.3-1.6,2.2-2.6,2.7-.3,0-.5.2-.8.3-.8,1.3-1.9,2.3-3.3,2.6H8.6s-.7-4.1,2.7-4.1c0,0-1.3-13.6-2.9-18.1-2-.5-4-1.6-5-4.2-1.5-4.1,1.5-7.1,1.5-7.1v.3Z" /></svg>') no-repeat center bottom;
}

#sec_search #kinds_list .check_name input[type=checkbox]:checked + label .check_deco02#cat::before {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45.8 38"><path fill="%23ffffff" d="M5,4.6S5.3,0,6.5,0s2.9,2.8,2.9,2.8h6S17,0,18.2,0s1.5,4.6,1.5,4.6c0,0,3,3,1.5,7.1-.1.3-.2.6-.4.8,3,2.6,7.7,5.9,11.5,9.4,2.5,2.4,3.6,5.7,3.5,8.8.2-.5.3-1,.4-1.7v-1c0-1.2-.3-2.4-.7-3.7-.6-1.9-1.6-3.9-2.4-5.7-.4-.9-.8-1.9-1.1-2.8-.3-.9-.5-1.9-.5-2.8s.3-2.2,1-3.1c.6-.8,1.2-1.4,2-1.8.8-.4,1.6-.6,2.4-.6,1.5,0,2.9.6,4,1.7s1.8,2.6,1.8,4.4-.6,1.3-1.3,1.3-1.3-.6-1.3-1.3c0-1.2-.5-2-1.1-2.7-.6-.6-1.4-.9-2.2-.9s-.8,0-1.2.3c-.4.2-.8.5-1.1,1s-.5.9-.5,1.6.2,1.7.7,2.8c.6,1.7,1.6,3.6,2.5,5.6.9,2.1,1.6,4.3,1.6,6.6v1.3c0,1.2-.4,2.2-.9,3-.6,1.3-1.6,2.2-2.6,2.7-.3,0-.5.2-.8.3-.8,1.3-1.9,2.3-3.3,2.6H8.6s-.7-4.1,2.7-4.1c0,0-1.3-13.6-2.9-18.1-2-.5-4-1.6-5-4.2-1.5-4.1,1.5-7.1,1.5-7.1v.3Z" /></svg>') no-repeat center bottom;
}

#sec_search #kinds_list .check_name label .check_deco02#rabbit::before {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45.8 38"><path fill="%23d1d1d1" d="M37,29c0-5-3.4-9.5-8.6-10.5-2.9-.6-7-.2-7.2-2.1l-.3-3.5,4.5-1.4c2.6-.8,5.8-3.6,4.5-5.4-2.2-2.8-8.5,2.1-10.5,3.5,1.5-2.1,2.7-3.2,3.5-5.5.5-1.3.5-3.2-.9-3.9-2.9-1.5-6.4,5.9-7,7.9-5.8-.2-7.3,4-8.9,8.4.5,2.4,3.4,4.2,5.4,4.9-.8,7.6,5.2,7.6,3.9,14.6,0,0-.7-.2-1.7,0s-1.2,1-1,1.8h4.8l.5-3.6,4.2,1.8h-2.6c-.5,0-1.1,1-1.1,1.8h15.5c-.3-.9-.4-1.1-.7-1.9.9-.6,2.1-.9,3-1.4h.5c1.6,0,2.9-1.3,2.9-2.9s-1.2-2.7-2.7-2.9v.2Z" /></svg>') no-repeat center bottom;
}

#sec_search #kinds_list .check_name input[type=checkbox]:checked + label .check_deco02#rabbit::before {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45.8 38"><path fill="%23ffffff" d="M37,29c0-5-3.4-9.5-8.6-10.5-2.9-.6-7-.2-7.2-2.1l-.3-3.5,4.5-1.4c2.6-.8,5.8-3.6,4.5-5.4-2.2-2.8-8.5,2.1-10.5,3.5,1.5-2.1,2.7-3.2,3.5-5.5.5-1.3.5-3.2-.9-3.9-2.9-1.5-6.4,5.9-7,7.9-5.8-.2-7.3,4-8.9,8.4.5,2.4,3.4,4.2,5.4,4.9-.8,7.6,5.2,7.6,3.9,14.6,0,0-.7-.2-1.7,0s-1.2,1-1,1.8h4.8l.5-3.6,4.2,1.8h-2.6c-.5,0-1.1,1-1.1,1.8h15.5c-.3-.9-.4-1.1-.7-1.9.9-.6,2.1-.9,3-1.4h.5c1.6,0,2.9-1.3,2.9-2.9s-1.2-2.7-2.7-2.9v.2Z" /></svg>') no-repeat center bottom;
}

#sec_search #kinds_list .check_name label .check_deco02#hamster::before {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45.8 38"><path fill="%23d1d1d1" d="M45.8,28.8c-.3-.3-1.3-.3-2.1-.2.8-3.9-.4-7.9-4.7-11.6-6.7-5.8-15.2-1.7-16.7-1-1.6.6-3.3.5-3.3.5,0,0,.7-2.6-2-3.7-3.9-1.7-7.6,3.4-7.6,3.4-6,0-11.4,6.6-8.4,11.5,3.1,4.9,8.7,4.5,11.3,3.9,0,.4,3.7,3.1,3.7,3.1,0,0-1.4,0-2.3,1.3-1.3,1.9.6,2.1.6,2.1h4c4,0,4.7-2.9,4.7-2.9h3.9s-1.7.5-1.5,1.8c0,0-.2,1,1.8,1.1h8.2c1.9,0,3.3-1.3,3.3-1.3,1.2-.7,2.6-2.3,3.7-4.3,2.3,0,3.9-3,3.4-3.6h0Z" /></svg>') no-repeat center bottom;
}

#sec_search #kinds_list .check_name input[type=checkbox]:checked + label .check_deco02#hamster::before {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45.8 38"><path fill="%23ffffff" d="M45.8,28.8c-.3-.3-1.3-.3-2.1-.2.8-3.9-.4-7.9-4.7-11.6-6.7-5.8-15.2-1.7-16.7-1-1.6.6-3.3.5-3.3.5,0,0,.7-2.6-2-3.7-3.9-1.7-7.6,3.4-7.6,3.4-6,0-11.4,6.6-8.4,11.5,3.1,4.9,8.7,4.5,11.3,3.9,0,.4,3.7,3.1,3.7,3.1,0,0-1.4,0-2.3,1.3-1.3,1.9.6,2.1.6,2.1h4c4,0,4.7-2.9,4.7-2.9h3.9s-1.7.5-1.5,1.8c0,0-.2,1,1.8,1.1h8.2c1.9,0,3.3-1.3,3.3-1.3,1.2-.7,2.6-2.3,3.7-4.3,2.3,0,3.9-3,3.4-3.6h0Z" /></svg>') no-repeat center bottom;
}

#sec_search #kinds_list .check_name label .check_deco02#bird::before {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45.8 38"><path fill="%23d1d1d1" d="M44.7,26.8h0c0,0-10.5-2.9-10.5-2.9,0-.3-.2-.6-.4-.8,0,0-1.6-2.5-3.1-3.9-4.1-4.3-8-5.9-9.2-6.3-3-5.8-7.7-6.5-10.2-6.4-2.5,0-4.6,1.3-5.8,3.3-.3.4-.5.9-.6,1.4-3.5.8-5,3.8-5,3.8l5.1,1.9c.2.8.5,1.5.9,2.3,1,4.3,2.8,7.7,5.1,10,1.7,1.7,3.8,2.8,6.2,3.2l-1.7,3.8h-2.8c-.5,0-.9.4-.9.9s.4.9.9.9h9.1c.5,0,.9-.4.9-.9s-.4-.9-.9-.9h-.1l1.8-4c4.4-.9,6.1-2.8,7.6-4.4.1-.2.3-.3.4-.4,3.2,1.2,9,3.4,11.2,3.1,1.9,0,4.7-2.8,2-3.7ZM20,36.2h-2.6l1.6-3.6c.2,0,.4,0,.6,0h1.7c.1,0,.2,0,.3,0l-1.6,3.6Z" /></svg>') no-repeat center bottom;
}

#sec_search #kinds_list .check_name input[type=checkbox]:checked + label .check_deco02#bird::before {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45.8 38"><path fill="%23ffffff" d="M44.7,26.8h0c0,0-10.5-2.9-10.5-2.9,0-.3-.2-.6-.4-.8,0,0-1.6-2.5-3.1-3.9-4.1-4.3-8-5.9-9.2-6.3-3-5.8-7.7-6.5-10.2-6.4-2.5,0-4.6,1.3-5.8,3.3-.3.4-.5.9-.6,1.4-3.5.8-5,3.8-5,3.8l5.1,1.9c.2.8.5,1.5.9,2.3,1,4.3,2.8,7.7,5.1,10,1.7,1.7,3.8,2.8,6.2,3.2l-1.7,3.8h-2.8c-.5,0-.9.4-.9.9s.4.9.9.9h9.1c.5,0,.9-.4.9-.9s-.4-.9-.9-.9h-.1l1.8-4c4.4-.9,6.1-2.8,7.6-4.4.1-.2.3-.3.4-.4,3.2,1.2,9,3.4,11.2,3.1,1.9,0,4.7-2.8,2-3.7ZM20,36.2h-2.6l1.6-3.6c.2,0,.4,0,.6,0h1.7c.1,0,.2,0,.3,0l-1.6,3.6Z" /></svg>') no-repeat center bottom;
}

#sec_search #kinds_list .check_name label .check_deco02#reptiles::before {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45.8 38"><path fill="%23d1d1d1" d="M45.8,27.6c0-.6-.2-.9-.7-1.3-.5-.4-1.4-.3-2.1.2s-.8.6-1.8,1.5-2.1,1.7-3.5,1.7-.9,0-1.2-.3c-.3-.2.3,1.6-.6-.8-.9-2.4-.9-4.9-2.9-6.6-2.1-1.8-5.6-1.2-7.9,0-1.5.8-2.7,1.9-3.9,3-1,1-1.9,2-3.3,2.4h-.8c-.2,0-.3-.1-.6-.4s-.8.4,0-1.3,1.5-2.6,3-4.8c1.5-2.2,2.9-4.6,3.4-7.3.4-1.8.3-3.7-.4-5.4-.2-.7,2.6,2.7-1-1.8s-11.4-3.4-13.8,1.5c-.3.6-.2.6-1.3,1.5-1.1.9-2,2.3-2,3.3s0,1.2.6,1.9c0,.3,0,.7-.6,1.1h-.3c0-.1-.3-.1-.3-.1-.3,0-.6-.3-.9-.3-1.3-.2-2.7.7-2.9,2.1,0,.5.2,1,.7,1s.9-.3.9-.7c.1-.4.5-.7.9-.7,0,0,.3.2.5.2,0,0,.4,0,.4,0,.3.1,1.2.4,1.9,0,.8-.5,1.1-1.1,1.3-1.6,1.2.4,2.6.3,3.7.3.2,0-.5-.4.7.2,1.2.6,1.2,2.2.8,3.3-.7,1.8-1.9,3.1-2.9,5-1,1.9-1.7,3.8-1.8,6.2,0,2.4.8,4.9,2.8,6.3,3.2,2.3,6.9.6,9.8-1.2,2.4-1.5,4.4-3.6,6.5-5.4.6-.6,1.2-1.1,2.1-1.3.4,0-.4-.7,1.3.2,1.7.9,1.1,3.5,1.7,5,.5,1.1,1.3,2.1,2.4,2.6,2.4,1.1,5.7-.4,7.2-1.4s2.6-2.2,3.6-3.5c.2-.3.3-.5.5-.8v-.2c.6-1,1-2.2.8-3.3Z" /></svg>') no-repeat center bottom;
}

#sec_search #kinds_list .check_name input[type=checkbox]:checked + label .check_deco02#reptiles::before {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45.8 38"><path fill="%23ffffff" d="M45.8,27.6c0-.6-.2-.9-.7-1.3-.5-.4-1.4-.3-2.1.2s-.8.6-1.8,1.5-2.1,1.7-3.5,1.7-.9,0-1.2-.3c-.3-.2.3,1.6-.6-.8-.9-2.4-.9-4.9-2.9-6.6-2.1-1.8-5.6-1.2-7.9,0-1.5.8-2.7,1.9-3.9,3-1,1-1.9,2-3.3,2.4h-.8c-.2,0-.3-.1-.6-.4s-.8.4,0-1.3,1.5-2.6,3-4.8c1.5-2.2,2.9-4.6,3.4-7.3.4-1.8.3-3.7-.4-5.4-.2-.7,2.6,2.7-1-1.8s-11.4-3.4-13.8,1.5c-.3.6-.2.6-1.3,1.5-1.1.9-2,2.3-2,3.3s0,1.2.6,1.9c0,.3,0,.7-.6,1.1h-.3c0-.1-.3-.1-.3-.1-.3,0-.6-.3-.9-.3-1.3-.2-2.7.7-2.9,2.1,0,.5.2,1,.7,1s.9-.3.9-.7c.1-.4.5-.7.9-.7,0,0,.3.2.5.2,0,0,.4,0,.4,0,.3.1,1.2.4,1.9,0,.8-.5,1.1-1.1,1.3-1.6,1.2.4,2.6.3,3.7.3.2,0-.5-.4.7.2,1.2.6,1.2,2.2.8,3.3-.7,1.8-1.9,3.1-2.9,5-1,1.9-1.7,3.8-1.8,6.2,0,2.4.8,4.9,2.8,6.3,3.2,2.3,6.9.6,9.8-1.2,2.4-1.5,4.4-3.6,6.5-5.4.6-.6,1.2-1.1,2.1-1.3.4,0-.4-.7,1.3.2,1.7.9,1.1,3.5,1.7,5,.5,1.1,1.3,2.1,2.4,2.6,2.4,1.1,5.7-.4,7.2-1.4s2.6-2.2,3.6-3.5c.2-.3.3-.5.5-.8v-.2c.6-1,1-2.2.8-3.3Z" /></svg>') no-repeat center bottom;
}

#sec_search #kinds_list .check_name input[type=checkbox]:checked + label .check_deco02 {
    color: #fff;
    background: var(--main-color);
}

#sec_search  #note {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 13px 15px;
    font-size: 14px;
    background: var(--sub-color);
    border-radius: 4px;
    & p {
        text-indent: -1em;
        padding-left: 1em;
    }
}

/*---- numbers ----*/
#sec_list .numbers {
    margin-top: 40px;
    padding-bottom: 5px;
    border-bottom: 2px solid var(--main-color);
    & p {
        display: inline;
    }
}

#sec_list .numbers .numbers_all {
    color: #999;
}

#sec_list .numbers .js_numerator {
    margin-left: 0.2em;
    color: var(--main-color);
    font-size: 30px;
    font-weight: var(--font-midium);
}

#sec_list .numbers .numbers_result {
    margin-left: 0.2em;
    font-weight: var(--font-midium);
}

/*---- js_target ----*/
#sec_list .js_target {
  display: none;
  &.js_selected {
    display: block;
  }
}

#sec_list .js_target .hp_block {
    width: 100%;
    padding: 25px 0;
    display: flex;
    justify-content: space-between;
    border-bottom: 2px solid var(--sub-color);
    transition: all 0.3s;
    &:hover {
        background: var(--sub-color-30);
    }
    & .hp_detail {
        display: flex;
        flex-wrap: wrap;
        padding: 0 1.4%;
        border-left: 2px solid var(--sub-color);
    }
    & .hp_detail:first-child {
        border: none;
        padding-left: 0;
    }
    & .about {
        flex-basis: 29%;
        align-content: center;
    }
    & .time {
        flex-basis: 16%;
        align-content: baseline;
    }
    & .time.single {
        text-align: center;
        justify-content: center;
        align-content: initial;
    }
    & .closed {
        text-align: center;
        flex-basis: 10%;
        justify-content: center;
    }
    & .weekend {
        flex-basis: 13%;
        justify-content: center;
    }
     & .kinds {
        padding-right: 0;
        flex-basis: 33%;
    }
}

#sec_list .js_target .hp_block .about .hp_name,
#sec_list .js_target .hp_block .about .hp_name a {
    margin-bottom: 5px;
    color: var(--main-color);
    font-size: 17px;
    font-weight: var(--font-bold);
}

#sec_list .js_target .hp_block .about .hp_name a {
    display: inline;
    background-image: linear-gradient(#29916d, #29916d);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 1px;
    transition: background-size 0.3s;
}

#sec_list .js_target .hp_block .about .hp_name:hover a {
    background-size: 100% 1px;
}

#sec_list .js_target .hp_block .about .access {
    font-size: 16px;
    & span {
        display: inline-block;
    }
    & a {
        color: var(--main-color);
        display: inline;
        background-image: linear-gradient(#29916d, #29916d);
        background-position: 0% 100%;
        background-repeat: no-repeat;
        background-size: 0% 1px;
        transition: background-size 0.3s;
        &:hover {
            background-size: 100% 1px;
        }
    }
}

#sec_list .js_target .hp_block .time div {
    width: fit-content;
    margin: auto;
}

#sec_list .js_target .hp_block .time div small {
    display: inline-block;
}

#sec_list .js_target .hp_block .time div span {
    display: inline-block;
    vertical-align: middle;
    font-size: 104%;
}

#sec_list .js_target .hp_block .kinds .kinds_icon {
    display: flex;
    align-items: flex-start;
}

#sec_list .js_target .hp_block .kinds .icon {
    padding: 0 11px;
    color: var(--main-color);
    font-size: 11px;
    line-height: 1.2em;
    font-weight: var(--font-bold);
    font-family: var(--font-maru);
    text-align: center;
    letter-spacing: -0.04em;
    border-right: 1.5px dotted var(--main-color);
    position: relative;
    &::before {
        content: "";
        width: 4vw;
        max-width: 33px;
        height: 30px;
        margin: 0 auto 5px;
        display: block;
        background-size: 100%;
    }
    &:first-child {
        padding-left: 0;
    }
    &:last-child {
        padding-right: 0;
        border: none;
    }
}

#sec_list .js_target .hp_block .kinds .icon.dog::before {
    background: url(../hospital/icon_dog.svg) no-repeat center bottom;
}

#sec_list .js_target .hp_block .kinds .icon.cat::before {
    background: url(../hospital/icon_cat.svg) no-repeat center bottom;
}

#sec_list .js_target .hp_block .kinds .icon.rabbit::before {
    background: url(../hospital/icon_rabbit.svg) no-repeat center bottom;
}

#sec_list .js_target .hp_block .kinds .icon.hamster::before {
    width: 55px;
    background: url(../hospital/icon_hamster.svg) no-repeat center bottom;
    background-size: 90%;
}

#sec_list .js_target .hp_block .kinds .icon.bird::before {
    background: url(../hospital/icon_bird.svg) no-repeat center bottom;
}

#sec_list .js_target .hp_block .kinds .icon.reptiles::before {
    background: url(../hospital/icon_reptiles.svg) no-repeat center bottom;
}


#sec_list .js_target .hp_tit {
    width: 100%;
    height: fit-content;
    margin-bottom: 10px;
    padding: 2px 10px;
    color: var(--main-color);
    font-size: 88%;
    text-align: center;
    background: var(--sub-color);
    border-radius: 4px;
}


/** tablet
===================================*/
@media screen and (max-width: 1024px) {
#sec_search #search_toggle {
    align-items: flex-start;
}

/*---- sec_search detail ----*/
#sec_search #area_list .check_name {
    width: 47%;
}

#sec_list .js_target .hp_block {
    flex-wrap: wrap;
    & .about {
        display: block;
        margin-bottom: 15px;
        flex-basis: 100%;
        & br {
            display: none;
        }
    }
    & .time {
        flex-basis: 21%;
        padding-left: 0;
        border: none;
    }
    & .closed {
        flex-basis: 13%;
    }
    & .weekend {
        flex-basis: 17%;
    }
    & .kinds {
        flex-basis: 49%;
    }
}

#sec_list .js_target .hp_block .kinds .icon {
    padding: 0 1.3vw;
}

#sec_search #weekend_list .check_name {
    display: inline-block;
    &:first-child {
        margin-right: 0.6em;
    }
}

#sec_search #search_left {
    gap: 15px;
    padding: 0 3%;
}

#sec_search #weekend,
#sec_search #kinds {
    width: 100%;
    padding: 0;
    border: none;
}

#sec_search #kinds {
    padding-top: 3%;
    border-top: 2px solid var(--sub-color);
}

#sec_search #kinds_list {
    width: 100%;
    max-width: 430px;
    margin: auto;
}

}

/** sp
===================================*/
@media screen and (max-width: 768px) {
html::before {
  content: "";
  width: 100vw;
  height: 100%;
  margin: 0 calc(50% - 50vw);
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 999;
  transition-delay: 0.2s; 
}

html.no-scroll::before {
  opacity: 1;
  visibility: visible;
}

main {
    margin-bottom: 100px;
    &::before {
        display: none;
    }
}

#sec_search {
    width: 300px;
    height: calc(100vh - 15%); 
    margin: auto;
    background: #fff;
    border-radius: 0 0 0 4px;
    position: fixed;
    top: 5%;
    right: -450px;
    z-index: 999;
    transition: all 0.5s;
    opacity: 0;
    animation: slideInRight 0.5s forwards;
    animation-delay: 1.7s;
    &.is-fixed {
        right: -300px;
    }
    &.active {
        padding: 30px;
    }
}

@keyframes slideInRight {
  0% {
    opacity: 0;
    transform: translateX(100px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

#sec_search.open {
  right: 0;
}

#sec_search #search_btn {
    width: fit-content;
    padding: 20px 10px;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    font-size: 15px;
    border-radius: 4px 0 0 4px;
    position: absolute;
    margin: 0;
    top: -1px;
    left: -43px;
    z-index: 99;
}

#sec_search #search_btn p {
    width: 20px;
    height: 20px;
    margin: 7px 0 0 0;
}

#sec_search #search_toggle {
    height: 100%;
    display: block;
    overflow-y: auto;
}

#sec_search #area,
#sec_search #search_left {
    width: 100%;
    padding: 0;
    display: block;
    border: none;
}

#sec_search #area_list {
    gap: 7px 0;
    justify-content: space-between;
}

#sec_search #area_list .check_name {
    width: 48.5%;
}

#sec_search #weekend,
#sec_search #kinds {
    margin-top: 3.5%;
    padding-top: 3.5%;
    border: none;
}

#sec_search .search_tit {
    margin-bottom: 10px;
}

#sec_search #kinds_list {
    max-width: 220px;
    flex-wrap: wrap;
}

#sec_search #kinds_list .check_name {
    width: 25%;
    flex: auto;
}

/*---- sec_search detail ----*/
#sec_list .js_target .hp_block {
    display: block;
    & .hp_detail {
        width: 100%;
        margin: 0 0 15px;
        padding: 0;
        border: none;
        justify-content: center;
    }
}

#sec_list .js_target .hp_tit {
    font-family: 92%;
}

#sec_list .js_target .hp_block .about .hp_name,
#sec_list .js_target .hp_block .about .hp_name a {
    font-size: 16px;
}

#sec_list .js_target .hp_block .about .access {
    font-size: 15px;
    & br {
        display: block;
    }
}

#sec_list .js_target .hp_block .time div {
    width: 100%;
    text-align: center;
    & small:last-child {
        margin-left: 0.7em;
    }
}

#sec_list .js_target .hp_block .kinds .icon {
    padding: 0 2.5vw;
    &::before {
        width: 7vw;
    }
}

#sec_search #area_list .check_name label .check_deco01 {
    padding: 5px 0;
}

#sec_search #note {
    margin-top: 20px;
    font-size: 12px;
}

}