@charset "utf-8";

.main-inner {
		max-width:1240px;
		padding-left: 20px;
		padding-right: 20px;
		margin: 2rem auto;
		display: flex;
		justify-content: space-between;

}

/* scrolldown */
.scrolldown {
        position: absolute;
        bottom: 1%;
        right: 50%;
        mix-blend-mode: hard-light;
        animation: arrowmove 2.5s ease-in-out infinite;
}

@keyframes arrowmove {
        0% {
                bottom: 1%;
        }

        50% {
                bottom: 3%;
        }

        100% {
                bottom: 1%;
        }
}

.scrolldown span {
        position: absolute;
        left: -20px;
        bottom: 10px;
        color: #EA047E;
        font-size: 1rem;
        letter-spacing: 0.05em;
        -ms-writing-mode: tb-rl;
        -webkit-writing-mode: vertical-rl;
        writing-mode: vertical-rl;
        font-family: 'Josefin Sans', sans-serif;
}

.scrolldown:before {
        content: "";
        position: absolute;
        bottom: 0;
        right: -3px;
        width: 2px;
        height: 10px;
        background: #EA047E;
        transform: skewX(-31deg);
}

.scrolldown:after {
        content: "";
        position: absolute;
        bottom: 0;
        right: 0;
        width: 2px;
        height: 40px;
        background: #EA047E;
}

.acd-check,
.acd-label {
        display: none;
}


/* side-bar */
.side-bar {
        width: 20%;
        margin-top: 6rem;
        /*font-size: 1.3rem;*/
        font-size: 1.5rem;
}

.side-bar h3 {
        font-size: 1.7rem;
}

.side-bar .index {
        margin: 1rem auto 0.5rem;
        font-size: 1.6rem;
}

.side-bar .select-style {
        width: calc(50% - 1rem - 4px);
        padding: 0.5rem;
        border: 1px solid #111111;
}

.side-bar input[type=checkbox],
.side-bar input[type=radio] {
        display: none;
}

/* checkbox-style */
.side-bar .checkbox-style label {
        background-color: #e6e6e6;
        color: #008CCF;
        text-decoration: none;
        text-align: center;
        width: 100%;
        padding: 1.5rem 0;
        cursor: pointer;
        display: block;
        margin: 1rem auto;
        transition: background-color 150ms ease-in;
}

.side-bar .checkbox-style label:hover {
        background-color: #008CCF;
        color: #e6e6e6;
}

.side-bar input[type=checkbox]:checked+label {
        background: #008CCF url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAaCAYAAACgoey0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAX9JREFUeNpi+P//PwMNsS4QbwBiLnQ5WlqqAsRP/0PARiBmoYfFkkB8+z8qWALEjLS0mB+IL/3HDibSymJQXB7/jx/UgNSCvU4lwAbEG4DYkwi1WUxUspQZiOcRaSkIWOAKMk0Sg3jaf+IBOIVjMyQWiH8DsR+RljaTYOkBWJ5GNwRk2R+ooh9A7ETA0jwSLL0ATfEYqRpkyVc0xR+A2AyHpdFA/I9IS0F5WhRbAWIEtQQbeAXE6lhC5jeRlj4GYgVsRaYK1HBCmmWgmuyxhAwu8BpaXjNgs/gYkYbcAGIXPCGDDkCOM8eVPkCEFhE+JhX8BGJnfAkTxgC57BOVLAXlihBC2RA9Vf+k0FJQKk8nJv+jCwQi5WNyQAWxpR02wRQS8icy6CKlmMUlUUGipfOQK3lKLAbhdhIKfWZS6258kiAfzCZg6V4gZiOn0UBIAcgn63BYehK50Ke2xQxQH+3FUoqJUtJMIlYhLxAfxVJu09xiWENuMxCrUaNhCBBgAOAVfjALa5TLAAAAAElFTkSuQmCC) no-repeat 7% center;
        background-size: 13px 11px;
        color: #e6e6e6;
}

.side-bar input[type=checkbox]:checked:hover+label {
        color: rgba(255, 255, 255, 0.5);
        background: #111111 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAS5JREFUeNq8110OgjAMAGBGvIY3VESjt9jPg95PT+LccBIZ7dYOWJPGB+g+Ymg3hLW2QeLkcu/y2pSFdvl0eQevehjI3uXbfkMh96TShFq/xhG6J4faAtxEtSBOQTm4QWpnOBWl4CZT69fuYpiCpnBDrB1xLhrjgoFO8F1oGcFslUv4bV32zFoxmOHJta0XMn65dC0UaiddA8UGiN4axeC1cUkdmWviEls/NwL1FqjPNtNvoimPdC3yRCUTiTXbt0R/oSnw2iiK10BBvBY6w2uiE3xJr8oFtcrvxy/fVcyeVdGx98yotcOxN/znHeMUIhdMOG8c4reagssF43VEoT5O4ZJwvNUUFJtcEE5BMXyGpnanf5yDxjiI+hSJj7YunEBvhbuTCh9tD+jiR4ABAJ0SrJgNr1UAAAAAAElFTkSuQmCC) no-repeat 7% center;
        background-size: 13px 13px;
}

.side-bar .checkbox-flex,
.side-bar .checkbox-flex-popular {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
}

.side-bar .checkbox-flex-item {
        width: 48.5%;
}

.side-bar .checkbox-style .checkbox-flex-item label,
.side-bar .radio-style .checkbox-flex-item label {
        margin: 0.5rem auto;
        padding: 1.5rem 0;
}

.side-bar .checkbox-flex-popular .checkbox-flex-item label {
        height: 6rem;
        display: flex;
        align-items: center;
        justify-content: center;
}

/* radio-style */

.side-bar .radio-style label {
        background-color: #e6e6e6;
        color: #008CCF;
        text-decoration: none;
        text-align: center;
        width: 100%;
        cursor: pointer;
        display: block;
        margin: 1rem auto;
        transition: background-color 150ms ease-in;
}

.side-bar .radio-style label:hover {
        background-color: #008CCF;
        color: #e6e6e6;
}

.side-bar input[type=radio]:checked+label {
        background: #008CCF url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAaCAYAAACgoey0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAX9JREFUeNpi+P//PwMNsS4QbwBiLnQ5WlqqAsRP/0PARiBmoYfFkkB8+z8qWALEjLS0mB+IL/3HDibSymJQXB7/jx/UgNSCvU4lwAbEG4DYkwi1WUxUspQZiOcRaSkIWOAKMk0Sg3jaf+IBOIVjMyQWiH8DsR+RljaTYOkBWJ5GNwRk2R+ooh9A7ETA0jwSLL0ATfEYqRpkyVc0xR+A2AyHpdFA/I9IS0F5WhRbAWIEtQQbeAXE6lhC5jeRlj4GYgVsRaYK1HBCmmWgmuyxhAwu8BpaXjNgs/gYkYbcAGIXPCGDDkCOM8eVPkCEFhE+JhX8BGJnfAkTxgC57BOVLAXlihBC2RA9Vf+k0FJQKk8nJv+jCwQi5WNyQAWxpR02wRQS8icy6CKlmMUlUUGipfOQK3lKLAbhdhIKfWZS6258kiAfzCZg6V4gZiOn0UBIAcgn63BYehK50Ke2xQxQH+3FUoqJUtJMIlYhLxAfxVJu09xiWENuMxCrUaNhCBBgAOAVfjALa5TLAAAAAElFTkSuQmCC) no-repeat 7% center;
        background-size: 13px 11px;
        color: #e6e6e6;
}

.side-bar input[type=radio]:checked:hover+label {
        color: rgba(255, 255, 255, 0.5);
        background: #008CCF url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAS5JREFUeNq8110OgjAMAGBGvIY3VESjt9jPg95PT+LccBIZ7dYOWJPGB+g+Ymg3hLW2QeLkcu/y2pSFdvl0eQevehjI3uXbfkMh96TShFq/xhG6J4faAtxEtSBOQTm4QWpnOBWl4CZT69fuYpiCpnBDrB1xLhrjgoFO8F1oGcFslUv4bV32zFoxmOHJta0XMn65dC0UaiddA8UGiN4axeC1cUkdmWviEls/NwL1FqjPNtNvoimPdC3yRCUTiTXbt0R/oSnw2iiK10BBvBY6w2uiE3xJr8oFtcrvxy/fVcyeVdGx98yotcOxN/znHeMUIhdMOG8c4reagssF43VEoT5O4ZJwvNUUFJtcEE5BMXyGpnanf5yDxjiI+hSJj7YunEBvhbuTCh9tD+jiR4ABAJ0SrJgNr1UAAAAAAElFTkSuQmCC) no-repeat 7% center;
        background-size: 13px 13px;
}

/* operations-btn */

.side-bar .operations {
        background-color: #008CCF;
        color: #e6e6e6;
        text-decoration: none;
        text-align: center;
        width: 100%;
        cursor: pointer;
        display: block;
        margin: 1rem auto;
        transition: background-color 150ms ease-in;
}

.side-bar .operations:hover {
        transform: scale(1.02);
        transition: 0.5s;
}

button {
        padding: 2rem;
}


/* main-contents */
.main-contents {
        width: 75%;
}

.main-contents-title-box {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
}

.main-contents-sub-title {
        position: relative;
        display: block;
        margin-bottom: 4.5rem;
        color: black;
        font-family: 'Josefin Sans', sans-serif;
}

.main-contents-sub-title::before {
        content: "";
        position: absolute;
        top: 50%;
        margin-left: -128px;
        width: 100px;
        height: 2px;
        background-color: #EA047E;
        transform: translateY(-50%);
}

.room-list-content {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
}

.room-list-content::after {
        content: "";
        display: block;
        width: 31%;
}

.bukken-box {
        width: 32%;
        margin-bottom: 3rem;
        display: flex;
        flex-direction: column;
        align-items: center;
}

.bukken-box-link {
        width: 100%;
}

.bukken-box:hover .photo-box img {
        border: 2px solid #333333;
        transition: .05s;
}

.bukken-box:hover .detail-wrap {
        color: #EA047E;
        transition: .05s;
}

.bukken-box:hover .detail-wrap .title-box {
        color: #EA047E;
        transition: .05s;
}

.photo-box {
        position: relative;
        overflow: hidden;
        padding-top: 66.6%;
}

.photo-box img {
        position: absolute;
        top: 0;
        /*left: 50%;*/
        /*transform: translate(-50%, -50%);*/
        width: 100%;
        height: 100%;
        object-fit: cover;
}

.photo-box .active {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: auto;
        height: 100%;
        object-fit: contain;
        opacity: 0;
        background-color: #ffffff;
}
/*
.photo-box:hover .active {
        display: block;
        width: 100.5%;
        height: 100.5%;
        opacity: 1;
        background-color: #ffffff;
}*/

.detail-wrap {
        margin: 0 auto;
        padding: 5px;
}

.detail-wrap h3 {
        margin-bottom: 1rem;
        font-size: 1.6rem;
        font-weight: bold;
        color: #EA047E;
}

.item-box {
        position: relative;
}

.tag-item {
        position: absolute;
        top: 0;
        display: flex;
        align-items: center;
}

.status-box {
        padding: 0.4rem 2rem 0.6rem 1.7rem;
        font-size: 1.2rem;
        background-color: #EA047E;
        color: #e6e6e6;
        clip-path: polygon(0% 0%, 100% 0%, 78% 100%, 0% 100%);
}

.status-box-reserved {
        padding: 0.4rem 2rem 0.6rem 1.7rem;
        font-size: 1.2rem;
        background-color: #5800FF;
        color: #e6e6e6;
        clip-path: polygon(0% 0%, 100% 0%, 78% 100%, 0% 100%);
}

.status-box-disabled {
        padding: 0.4rem 2rem 0.6rem 1.7rem;
        font-size: 1.2rem;
        background-color: #222222;
        color: #e6e6e6;
        clip-path: polygon(0% 0%, 100% 0%, 78% 100%, 0% 100%);
}

.new-box {
        padding: 0.4rem 1.7rem 0.6rem;
        margin: -17px;
        font-size: 1.2rem;
        font-weight: bold;
        color: #3EC70B;
        background-color: #111111;
        clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}

.title-box {
        font-size: 1.5rem;
        margin-bottom: 5px;
        text-align: justify;
        color: #4d4d4d;
        line-height: normal;
}

.apartment-box {
        font-size: 1.6rem;
        font-weight: bold;
        color: #111111;
}

.rent-box {
        display: flex;
        align-items: center;
        font-size: 1.6rem;
        font-weight: bold;
}

.apartment-box,
.rent-box {
        margin-bottom: 3px;
}

.address-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 1.3rem;
        color: #4d4d4d;
}

.detail-box-index {
        width: 30%;
}

.pager {
        margin-top: 2rem;
        text-align: center;
}

.pager .page-no {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 1rem;
}

.pager .page-no span,
.pager .page-no a {
        display: inline-block;
        margin: 0 1rem;
        padding: 1rem;
}

.pager .page-no span {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 3rem;
        height: 3rem;
        background-color: #008CCF;
        color: #e6e6e6;
}

@media screen and (max-width:1025px) {
        .sp {
                display: block;
        }

        .logo {
                width: 33%;
        }

        .header-title {
                font-size: 1.3rem;
        }

        #nav-content {
                width: 70%;
        }

        .kv-wrap {
                height: 500px;
        }

        .designroom-sub-title {
                font-size: 1.5rem;
                margin-bottom: 1rem;
        }

        .text-wrap {
                transform: translate(-75%, -50%);
        }

        .main-title-box {
                width: 60vw;
        }

        .about {
                padding-bottom: 5rem;
        }

        .about-decoration {
                width: 69vw;
        }

        .about-wrap {
                margin: 5rem auto 0;
        }

        .about-photo {
                width: 60%;
        }

        .about-title {
                font-size: 2.5rem;
        }

        .about-text {
                width: 60%;
                padding: 4rem;
                margin-left: -15%;
        }

        .room-search-decoration {
                width: 71vw;
        }

        .main-contents-title-box {
                align-items: center;
        }

        .side-bar {
                width: 30%;
        }

        .main-contents {
                width: 68%;
        }

        .bukken-box {
                width: 49%;
        }

        .copy-right-wrap {
                width: 100%;
                padding: 0.5rem;
                background-color: #111111;
        }

        .copy-right {
                position: static;
                margin: 0 auto;
                text-align: center;
                transform-origin: center center;
                transform: scale(0.9);
        }

        .footer-menu {
                display: block;
        }

        .city-link {
                width: 30%;
        }
}






@media screen and (max-width:599px) {
        .contents-inner {
                margin-top: 3.5rem;
        }

        .company-list {
                display: block;
        }

        .company-list dt {
                width: 100%;
                margin-bottom: 0.5rem;
        }

/* ここから追加 */
        .sp {
                display: block;
        }

        .pc {
                display: none;
        }

        .header-inner {
                padding: 1rem;
        }

        .header-left {
                display: flex;
                align-items: flex-start;
                flex-direction: column;
        }

        .header-title {
                margin: 0;
                font-size: 1rem;
        }

        .logo {
                width: min(70%, 300px);
                margin-bottom: 5px;
        }

        #nav-open {
                top: 5vw;
        }

        .kv-wrap {
                left: 0;
                width: 100%;
                height: 400px;
        }

        .text-wrap {
                padding: 0 20px;
                margin: 0;
                left: 0;
                transform: translateY(-100%);
                color: #ffffff;
                font-size: 2rem;
        }

        .about {
                padding-bottom: 2rem;
        }

        .about-decoration,
        .room-search-decoration {
                width: 90%;
        }

        .about-wrap {
                display: block;
                margin: 2rem auto;
        }

        .about-photo {
                width: 100%;
                padding: 0;
        }

        .about-text {
                width: 100%;
                margin: 0;
                padding: 1.4rem;
        }

        .about-sub-title {
                margin-bottom: 1.5rem;
        }

        .about-title {
                font-size: 2rem;
                margin-bottom: 2rem;
        }

        .room-search-decoration {
                margin-bottom: 1rem;
        }

        .main-contents-sub-title {
                margin: 0.5rem 0 0 0;
                text-align: right;
        }

        .main-contents-title-box {
                display: block;
                margin: 1.5rem auto;
        }

        .main-contents-note {
                text-align: justify;
        }

        .main-title-box {
                width: 100%;
        }

        .scrolldown span {
                font-size: 1rem;
        }

        .side-bar {
                width: 100%;
                margin: 0 auto;
        }

        .acd-check {
                display: none;
        }

        .acd-label {
                background: #008CCF;
                color: #e6e6e6;
                display: block;
                margin-bottom: 1px;
                padding: 10px;
        }

        .acd-content {
                height: 0;
                opacity: 0;
                padding: 0 10px;
                transition: .5s;
                overflow: hidden;
        }

        .acd-check:checked+.acd-label+.acd-content {
                height: max-content;
                opacity: 1;
                padding: 3px;
                overflow: visible;
        }

        .condition-box.sp {
                padding: 0;
                margin-bottom: 1rem;
        }

        .menu__item {
                color: #EA047E;
                cursor: pointer;
                display: block;
                margin-bottom: 1px;
        }

        .menu__item__link {
                display: block;
                position: relative;
                padding: 0 1rem;
                color: #fff;
                line-height: 60px;
                font-size: 1.5rem;
        }

        .condition-box .menu__item__link {
                display: block;
        }

        a.menu__item__link {
                color: #ffffff;
                text-decoration: none;
                font-size: 1.8rem;
        }

        .menu__item__link::after {
                content: '+';
                position: absolute;
                top: 0;
                right: 0;
                display: block;
                width: 60px;
                background: #111111;
                line-height: 60px;
                text-align: center;
                font-size: 2.4rem;
                font-weight: bold;
        }

        .menu__item__link.on::after {
                content: '-';
        }

        .submenu__item {
                padding: 1rem;
        }

        .side-bar .checkbox-style label,
        .side-bar .radio-style label,
        .side-bar .operations button {
                font-size: 1.5rem;
        }

        /* checkbox-style */

        .side-bar input[type=checkbox]:checked:hover+label {
                background: #111111 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAaCAYAAACgoey0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAX9JREFUeNpi+P//PwMNsS4QbwBiLnQ5WlqqAsRP/0PARiBmoYfFkkB8+z8qWALEjLS0mB+IL/3HDibSymJQXB7/jx/UgNSCvU4lwAbEG4DYkwi1WUxUspQZiOcRaSkIWOAKMk0Sg3jaf+IBOIVjMyQWiH8DsR+RljaTYOkBWJ5GNwRk2R+ooh9A7ETA0jwSLL0ATfEYqRpkyVc0xR+A2AyHpdFA/I9IS0F5WhRbAWIEtQQbeAXE6lhC5jeRlj4GYgVsRaYK1HBCmmWgmuyxhAwu8BpaXjNgs/gYkYbcAGIXPCGDDkCOM8eVPkCEFhE+JhX8BGJnfAkTxgC57BOVLAXlihBC2RA9Vf+k0FJQKk8nJv+jCwQi5WNyQAWxpR02wRQS8icy6CKlmMUlUUGipfOQK3lKLAbhdhIKfWZS6258kiAfzCZg6V4gZiOn0UBIAcgn63BYehK50Ke2xQxQH+3FUoqJUtJMIlYhLxAfxVJu09xiWENuMxCrUaNhCBBgAOAVfjALa5TLAAAAAElFTkSuQmCC) no-repeat 7% center;
                background-size: 13px 11px;
                color: #e6e6e6;
        }

        /* radio-style */

        .side-bar input[type=radio]:checked:hover+label {
                background: #111111 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAaCAYAAACgoey0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAX9JREFUeNpi+P//PwMNsS4QbwBiLnQ5WlqqAsRP/0PARiBmoYfFkkB8+z8qWALEjLS0mB+IL/3HDibSymJQXB7/jx/UgNSCvU4lwAbEG4DYkwi1WUxUspQZiOcRaSkIWOAKMk0Sg3jaf+IBOIVjMyQWiH8DsR+RljaTYOkBWJ5GNwRk2R+ooh9A7ETA0jwSLL0ATfEYqRpkyVc0xR+A2AyHpdFA/I9IS0F5WhRbAWIEtQQbeAXE6lhC5jeRlj4GYgVsRaYK1HBCmmWgmuyxhAwu8BpaXjNgs/gYkYbcAGIXPCGDDkCOM8eVPkCEFhE+JhX8BGJnfAkTxgC57BOVLAXlihBC2RA9Vf+k0FJQKk8nJv+jCwQi5WNyQAWxpR02wRQS8icy6CKlmMUlUUGipfOQK3lKLAbhdhIKfWZS6258kiAfzCZg6V4gZiOn0UBIAcgn63BYehK50Ke2xQxQH+3FUoqJUtJMIlYhLxAfxVJu09xiWENuMxCrUaNhCBBgAOAVfjALa5TLAAAAAElFTkSuQmCC) no-repeat 7% center;
                background-size: 13px 11px;
                color: #e6e6e6;
        }

        .side-bar .select-style {
                padding: 1.5rem;
                font-size: 1.5rem;
        }


        /* main */
        .main-inner {
                display: block;
                margin-top: 3rem;
                background-color: #ffffff;
        }

        .main-contents {
                width: 100%;
        }

        .room-list-content {
                display: block;
        }

        .bukken-box {
                width: 100%;
                margin-bottom: 2.5rem;
        }

        .status-box,
        .status-box-reserved,
        .status-box-disabled {
                font-size: 1.2rem;
        }

        .new-box {
                font-size: 1.2rem;
        }

        .detail-wrap h3 {
                font-size: 2rem;
        }

        .rent-box {
                font-size: 1.5rem;
        }

        .apartment-box {
                font-size: 1.8rem;
        }

        .detail-box-index {
                width: 20%;
        }

        .rent-box dd {
                width: 80%;
        }

        /* footer */
        .footer-inner {
                display: block;
                padding-top: 1rem;
                margin-bottom: 0;
        }

        .footer-left {
                width: 100%;
        }

        .footer-right {
                width: 100%;
                margin: 4rem auto;
        }

        .footer-menu {
                display: block;
                margin: 1rem auto;
        }

        .city-link {
                width: 50%;
        }

        .city-link a {
                padding: 1rem 0;
        }

        .copy-footer {
                font-size: 1rem;
        }
/* ここまで追加 */
}