@charset "utf-8";

html {
        font-size: 62.5%;
        /* sets the base font to 10px for easier math */
}

body {
        width: 100%;
        font-family: 'Noto Sans JP', '游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
        font-size: 1.4rem;
        font-style: normal;
        font-weight: 400;
        color: #111111;
        line-height: 1.44;
        letter-spacing: 0.01em;
        background: #fffefc;
}

.sp {
        display: none;
}

.mb01 {
        margin-bottom: 1rem;
}

.container {
        overflow: hidden;
}

/* 下から */
.effect-fade01 {
        opacity: 0;
        transform: translate(0, 50%);
        transition: 2s;
}

/* 右から */
.effect-fade02 {
        opacity: 0;
        transform: translate(50%, 0);
        transition: 1.8s;
}

/* 左から */
.effect-fade03 {
        opacity: 0;
        transform: translate(-50%, 0);
        transition: 2s;
}

/* 上から */
.effect-fade04 {
        opacity: 0;
        transform: translate(0, -50%);
        transition: 2s;
}

/* 下から */
.effect-fade05 {
        opacity: 0;
        transform: translate(0, 20px);
        transition: all 600ms;
}

.effect-fade01.effect-scroll,
.effect-fade02.effect-scroll,
.effect-fade03.effect-scroll,
.effect-fade04.effect-scroll,
.effect-fade05.effect-scroll {
        opacity: 1;
        transform: translate(0, 0);
}


/* header */
.header {
        width: 100%;
        top: 0;
        z-index: 3;
        background-color: #111111;
}

.header-inner {
        padding: 1rem 20px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
}

.header-left {
        display: flex;
        align-items: center;
}

.header-title {
        margin-left: 2rem;
        order: 1;
}

.header-title {
        color: #ffffff;
}

.logo {
        width: 300px;
}

.logo-style {
        width: 100%;
}

/* nav-drawer */
.nav-unshown {
        display: none;
}

#nav-open {
        position: fixed;
        right: 5px;
        top: min(1rem, 4.5vw);
        z-index: 5;
        display: inline-block;
        width: 50px;
        height: 50px;
}

#nav-open span,
#nav-open span:before {
        position: absolute;
        height: 2px;
        width: 40px;
        background: #eeeeee;
        box-shadow: 1px 1px 1px #111111;
        display: block;
        content: '';
        cursor: pointer;
}

#nav-open span:after {
        position: absolute;
        height: 2px;
        width: 40px;
        text-align: right;
        display: block;
        content: "menu";
        color: #eeeeee;
        text-shadow: 1px 1px 1px #111111;
        cursor: pointer;
}

#nav-open span:before {
        bottom: -13px;
}

#nav-open span:after {
        bottom: -20px;
}

#nav-close {
        display: none;
        position: fixed;
        z-index: 99;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #e6e6e6;
        opacity: 0;
        transition: .3s ease-in-out;
}

#nav-content {
        overflow: auto;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9999;
        width: 30%;
        height: 100%;
        background: #222222;
        opacity: 1.0;
        transition: .5s ease-in-out;
        -webkit-transform: translateX(-105%);
        transform: translateX(-105%);
        padding: 2rem;
}

#nav-content span.menu-midashi {
        display: block;
        width: 100%;
        height: auto;
        font-size: 3rem;
        font-weight: bold;
        color: #e6e6e6;
        text-align: center;
        margin: 0 auto;
        font-family: 'Josefin Sans', sans-serif;
}

#nav-content ul,
#nav-content li {
        list-style: none;
}

#nav-content li a {
        display: block;
        width: 100%;
        height: auto;
        padding: 2rem 1rem;
        text-decoration: none;
        color: #e6e6e6;
}

#nav-input:checked~#nav-close {
        display: block;
        opacity: .8;
}

#nav-input:checked~#nav-content {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
        box-shadow: 6px 0 25px rgba(0, 0, 0, .15);
}

.breadcrumb-box {
        max-width: 1240px;
        padding-left: 20px;
        padding-right: 20px;
        margin: 1rem auto;
}

.breadcrumb li {
        display: inline-block;
        list-style: none;
        font-weight: normal;
        padding: 0.5rem 0;
        color: #EA047E;
}

.breadcrumb li a {
        text-decoration: none;
        color: #EA047E;
}

.breadcrumb li::after {
        content: '>';
        padding: 0 3px;
        color: #EA047E;
}

.breadcrumb li:last-child:after {
        content: '';
}

/* hero-image */

.kv-position {
        position: relative;
        z-index: -2;
}

.kv-wrap {
        position: relative;
        width: 75%;
        height: 700px;
        top: 0;
        left: 25%;
        z-index: -1;
        overflow: hidden;
}

.hero-image {
        opacity: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        left: 0;
        top: 0;
        -webkit-animation: anime 24s 0s infinite;
        animation: anime 24s 0s infinite;
}

.hero-image:nth-of-type(2) {
        -webkit-animation-delay: 6s;
        animation-delay: 6s;
}

.hero-image:nth-of-type(3) {
        -webkit-animation-delay: 12s;
        animation-delay: 12s;
}

.hero-image:nth-of-type(4) {
        -webkit-animation-delay: 18s;
        animation-delay: 18s;
}


@keyframes anime {
        0% {
                opacity: 0;
        }

        13% {
                opacity: 1;
        }

        25% {
                opacity: 1;
        }

        38% {
                opacity: 0;
                transform: scale(1.2);
                z-index: 9;
        }

        100% {
                opacity: 0
        }
}

.text-wrap {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-100%, -50%);
}

.designroom-sub-title {
        font-size: 1.8rem;
        margin-bottom: 2rem;
}

.main-title-box {
        width: clamp(470px, 43.22916666666667vw, 830px);
        background-color: #ffffff;
}

.LifeDesign-img,
.DesignRoom-img,
.RoomSearch-img {
        width: 100%;
}

/* main */
.about {
        background-color: #eeeeee;
        padding-bottom: 8rem;
}

.about-decoration-box {
        display: flex;
        justify-content: flex-end;
        width: 100%;
        overflow: hidden;
}

.about-decoration {
        width: clamp(535px, 50vw, 960px);
        margin-top: -1px;
}

.about-wrap {
        max-width: 1240px;
        padding: 0 20px;
        margin: 8rem auto 0;
        display: flex;
        justify-content: center;
}

.about-photo {
        width: 55%;
        padding-bottom: 4rem;
}

.about-text {
        width: 50%;
        padding: 5rem;
        margin-left: -5%;
        margin-top: 8rem;
        background-color: #ffffff;
}

.about-sub-title {
        position: relative;
        display: block;
        margin-bottom: 2.5rem;
        color: #EA047E;
        font-family: 'Josefin Sans', sans-serif;
}

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

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

.about-text-emphasis {
        color: #111111;
}

.about-text-style {
        color: #666666;
}

.about-img {
        width: 100%;
}

/* room-search */

.room-search-decoration {
        width: clamp(554px, 51.145833333333336vw, 982px);
        margin-top: -4px;
        margin-bottom: 7rem;
}

.main-title-inner h2 {
        font-size: 2.5rem;
        margin-bottom: 0.5rem;
}

.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;
}

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

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

.side-bar .select-style {
        width: 45%;
        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: #111111;
        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: #111111;
        color: #e6e6e6;
}

.side-bar input[type=checkbox]:checked+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 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: #111111;
        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: #111111;
        color: #e6e6e6;
}

.side-bar input[type=radio]:checked+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 input[type=radio]: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;
}

/* operations-btn */

.side-bar .operations {
        background-color: #111111;
        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: #EA047E;
        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: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: auto;
        height: 100%;
        object-fit: contain;
}

.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.2rem;
        margin-bottom: 5px;
        text-align: justify;
        color: #777777;
}

.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: #777777;
}

.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: #EA047E;
        color: #e6e6e6;
}

/* page_top */
#page_top {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 55px;
        height: 55px;
        position: fixed;
        right: 3% !important;
        bottom: 50px;
}

#page_top a {
        position: relative;
        display: block;
        width: 40px;
        height: 40px;
        text-decoration: none;
}

#page_top a:before {
        content: "";
        position: absolute;
        top: 0;
        left: calc(50% + 3px);
        width: 2px;
        height: 10px;
        background: #3EC70B;
        transform: skewX(31deg) translateX(-50%);
}

#page_top a:after {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        width: 2px;
        height: 40px;
        background: #3EC70B;
        transform: translateX(-50%);
}


/* footer */
.footer {
        background-color: #111111;
        padding: 1rem 0;
}

.footer-inner {
        max-width: 1240px;
        padding: 0 20px 10rem;
        margin: 0 auto 2rem;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        color: #e6e6e6;
        border-bottom: 1px solid #333333;
}

.footer-left {
        width: 30%;
        margin-top: 1rem;
}

.footer-left img {
        width: 100%;
}

.footer-right {
        width: 40%;
        font-size: 1.2rem;
}

.footer-menu {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 1rem auto;
}

.footer-menu a {
        display: inline-block;
        padding: 1rem 1.5rem 1rem 0;
}

.city-link {
        width: 10%;
        margin: 2rem auto;
        text-align: center;
}

.city-link-banner {
        width: 100%;
}

.footer-menu a:hover {
        color: #3EC70B;
        transition: .2s;
}

.company-logo {
        width: 100%;
}

.copy-right {
        position: fixed;
        top: 35%;
        left: 1.5rem;
        z-index: 2;
        transform: rotate(90deg) scale(0.9);
        transform-origin: left top;
        color: #777777;
        font-size: 1rem;
}


@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:767px) {

        .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: #EA047E;
                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: 3.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;
        }

}