@import './common.css';

/*----header----*/
#ly_header {
    padding-top: 24px;
    padding-bottom: 24px;

    background-color: var(--white);
}

#ly_header .container {
    padding-right: 50px;
    padding-left: 50px;
}

.cb_header_upperInner {
    position: relative;

    margin-top: 21px;
    margin-bottom: 28px;
}

.cb_header_underInner {
    display: flex;
    justify-content: space-between;

    margin-right: 27px;
    margin-left: 21px;

    gap: 15px;
}

.cb_header_underInner nav {
    width: 100%;
}

@media screen and (max-width: 1138px) {
    #ly_header {
        position: fixed;
        z-index: 5;
        top: 0;
        right: 0;
        left: 0;

        padding-top: 6px;
        padding-bottom: 0;
    }

    #ly_header .container {
        padding-right: 15px;
        padding-left: 24px;
    }

    header .pc_only {
        display: none;
    }

    header .sp_only {
        display: block;
    }
}

@media screen and (max-width: 768px) {
    #ly_header {
        height: 86px;
    }

    .cb_header_upperInner {
        margin-top: 10px;
    }
}

/*----drawer----*/
label.open {
    position: fixed;
    z-index: 5;
    top: 17px;
    right: 10px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 50px;
    height: 70px;
}

.open span,
.open::before,
.open::after {
    position: absolute;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 35px;
    margin-top: 1px;

    content: '';

    border-bottom: 2px solid var(--main);
}

.open::before {
    transform: translateY(-8px);
}

.open::after {
    transform: translateY(9px);
}

#cb_navTgl {
    display: none;
}

#cb_navTgl:checked+.open span {
    opacity: 0;
}

#cb_navTgl:checked+.open::before {
    transform: translateY(-17px) rotate(45deg);
}

#cb_navTgl:checked+.open::after {
    transform: translateY(-17px) rotate(-45deg);
}

.open::before,
.open::after,
#cb_navTgl:checked+.open::before,
#cb_navTgl:checked+.open::after {
    transition: all .3s;
}

#cb_navTgl:checked~.cb_spNav_drawer {
    left: 10%;
}

.cb_spNav_drawer {
    position: fixed;
    z-index: 5;
    top: 139px;
    left: 110%;

    overflow-y: auto;

    width: 100vw;
    max-height: calc(100vh - 70px);
    margin-right: -10%;
    margin-left: -10%;
    padding-top: 29px;

    transition: all .3s;

    background-color: var(--white);
}

.cb_spNav_item {
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 2.4rem;

    height: 59px;
    padding-top: 18px;
    padding-bottom: 18px;
    padding-left: 29px;

    letter-spacing: .05em;

    border-bottom: 1px solid var(--borderColor);
}

.cb_spNav_item:first-child {
    border-top: 1px solid var(--borderColor);
}

.cb_spNav_item:not(.cb_spNav_item__arrow):hover {
    color: var(--white);
    background-color: var(--textBlack);
}

.cb_spNav_item:hover .cb_categoryWrapper .cb_category_item {
    color: var(--textBlack);
}

.cb_spNav_item.cb_spNav_item__arrow {
    position: relative;

    display: block;
    padding-bottom: 16px;
    padding-top: 0;
    padding-left: 29px;
}

.cb_spNav_label::after {
    position: absolute;
    top: 27px;
    right: 15px;

    content: url(../image/common/arrow_under.svg);
    transform: translateY(-50%);
}

#rental_drawer:checked+.cb_spNav_label::after {
    content: url(../image/common/arrow_white_upper.svg);
}

.cb_spNav_labelInner {
    line-height: 1.3rem;
    padding-bottom: 20px;
}

.cb_spNav_item.cb_spNav_item__line {
    color: var(--white);
    background-color: var(--line);
}

.cb_spNav_item.cb_spNav_item__line:hover {
    color: var(--line);
    background-color: var(--white);
}

.cb_spNav_item.cb_spNav_item__line svg:hover {
    color: var(--line);
}

.cb_spNav_item.cb_spNav_item__line a {
    display: flex;

    gap: 8px;
}

.cb_spNav_item.cb_spNav_item__rev {
    display: flex;

    width: 100%;

    background-color: var(--main);
}

.cb_spNav_item.cb_spNav_item__rev:hover {
    color: var(--brown);
    background-color: var(--white);
}

.cb_spNav_iconWrapper:hover {
    opacity: .5;
}

/*----categoryWrapper----*/
.cb_inputBox form {
    width: 100%;
    display: flex;
    justify-content: space-between;
}


.cb_categoryWrapper {
    visibility: hidden;
    overflow: hidden;
    opacity: 0;
    transition: visibility 0.3s ease, opacity 0.3s ease;
    /* アニメーションも追加 */
    height: 0;
    /* 最初は高さも0にして非表示 */
    overflow: hidden;
    /* 高さ0の状態で溢れる要素を隠す */

    background-color: var(--rightBg);
}

#rental_drawer:checked+label+.cb_categoryWrapper {
    visibility: visible;
    margin-left: -29px;
    padding: 26px 49px 22px 49px;
    opacity: 1;
    height: auto;
    border-bottom: 1px solid var(--borderColor);
    /* 表示時に高さを自動調整 */
}


.cb_category_inputBox {
    display: flex;
    justify-content: space-between;

    margin-bottom: 8px;
    padding: 12px 14px 12px 25px;

    border: 1px solid var(--textBlack);
}

.cb_category_inputBox input::placeholder {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.4rem;
    line-height: 2.4rem;

    letter-spacing: .05em;

    color: var(--placeholderColor);
}

.cb_category_item {
    position: relative;

    border-bottom: 1px dashed var(--textBlack);
    color: var(--textBlack) !important;
}

.cb_category_item::after {
    position: absolute;
    top: 56%;
    right: 0;

    content: '≫';
    transform: translateY(-50%);
}

.cb_category_item a {
    display: inline-block;

    width: 100%;
    padding-top: 15px;
    padding-bottom: 8px;
}

@media screen and (max-width: 768px) {
    .cb_spNav_drawer {
        top: 86px;
        padding-top: 0;
    }
}