:root {
    --color--font: #222;
    --color--purple: rgb(202, 173, 234);
    --color--purple--gra: linear-gradient(45deg, #f4c0f5 0%, #f4c0f5 26%, #d9bdec 100%);
    --color--border: #d1d1d1;
    --color--h2: linear-gradient(180deg, rgba(171, 143, 92, 1) 0%, rgba(189, 166, 122, 1) 25%, rgba(199, 173, 121, 1) 35%, rgba(222, 198, 153, 1) 40%, rgba(179, 150, 94, 1) 55%, rgba(188, 161, 112, 1) 100%);
}


/* -------------------------------
TOP,COMMON
------------------------------- */
body::before {
    content: '';
    width: 100%;
    position: absolute;
    height: 100vh;
    background: url(../img/ka-bg.jpg);
    background-size: cover;
    background-position: center;
    position: fixed;
    z-index: -99;
}

header {
    background: rgb(202, 173, 234, 0.8);
}

.mainvisual-under-logo {
    height: 100%;
}

.underlayer {
    /* background: #fff; */
}

.topics-detail-wrap .contents-ttl h2 {
    font-size: 1.4rem;
}

.sp-foot {
    background: rgb(202, 173, 234, 0.8);

}

.sp-foot li a {
    background: #fff;
    color: var(--color--purple);
}

footer,
.map-box,
.concept-wrap,
.blog-text,
.staff-text,
.topics-info,
.clamp-text2,
.footer a,
footer a,
.blog-text p a,
.topics-detail-info,
.reserve-intro,
.reserve-tel,
.reserve-tel a,
.prof-info-box {
    color: var(--color--font);
}

.filter-reset a {
    text-decoration: underline;
}

.new-topics span.cat-ico {
    background: var(--color--purple);
}

.more-list-btn a,
.more-btn a {
    background: var(--color--purple--gra);
    color: #fff;
    border: none;
}

/*--------------------------------------
access page
--------------------------------------*/
#contents_access.inner {
    padding: 5%;
}

#contents_access ul.directions img,
#contents_access ul.directions p {
    padding: 10px;
    color: var(--color--font);
    width: 100%;
}

.access_address {
    margin: 40px 0;
    line-height: 20px;
    font-size: 0.8rem;
}

.access_address .del_768 {
    display: block;
}

.access_address p {
    line-height: 1.5rem;
    margin-bottom: 10px;
    text-align: center;
    color: var(--color--font);
    font-size: 0.9rem;
}

.access_address p:last-child {
    margin-bottom: 0;
}

.access_address .laed_add {
    font-size: 1rem;
    color: #c58edf;
    background: #f8f0ff;
    border: 1px solid #caadea;
    padding: 2px;
    margin: 0 auto 10px;
    max-width: 480px;
    text-align: center;
}

#contents_access li .access_tel a {
    color: #fff;
    background: #caadea;
    line-height: 2;
    font-size: 0.2rem;
    letter-spacing: 1px;
    border-radius: 20px;
    padding: 5px;
    width: 110px;
    position: absolute;
    bottom: 110px;
    display: block;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 20;
    border: #caadea 2px solid;
    transition: .4s ease-in-out;
}

#contents_access .access_address .access_tel a {
    color: #fff;
    background: var(--color--purple--gra);
    line-height: 2;
    font-size: 1rem;
    letter-spacing: 1px;
    border-radius: 40px;
    padding: 5px;
    width: 300px;
    display: block;
    margin: 20px auto 20px;
    transition: .4s ease-in-out;
    border: #caadea 2px solid;
    text-align: center;
}

#contents_access .access_address .access_tel a:hover,
#contents_access li .access_tel a:hover {
    border: #e29ea9 2px solid;
    color: #de8190;
    background: #fff;
}

#contents_access ul.directions {
    display: flex;
    flex-wrap: wrap;
    counter-reset: my-counter;
    margin-bottom: 40px;
}

#contents_access li {
    font-size: 16px;
    line-height: 1.5;
    position: relative;
    margin: 1%;
    background: #fff;
    box-shadow: 0 0 10px #d4d4d4;
    width: calc(96%/2);
    min-height: 200px;
}

#contents_access li:before {
    content: counter(my-counter);
    counter-increment: my-counter;
    background-color: rgb(214 118 166 / 80%);
    border: 1px solid;
    border-radius: 50%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    width: 40px;
    color: #ffffff;
    font-size: 1.4rem;
    line-height: 1;
    position: absolute;
    top: 0px;
    left: 0px;
}

#contents_access li.route_txt_only {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#contents_access li .bl_768 {
    display: none;
}

#contents_access .map_kitasenju02 li:before {
    background-color: rgb(118 139 214 / 80%);
}

#contents_access .parking p {
    font-size: 0.9rem;
    text-align: left;
    letter-spacing: 1px;
    margin: 20px 0;
    color: var(--color--font);
}

#contents_access .parking h4 {
    font-size: 1.3rem;
    background: #caadea;
    outline: 1px solid #fff;
    outline-offset: -5px;
    color: #fff;
    padding: 10px;
    text-align: center;
}

.inner {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 60px 10px;
}

.subtitle {
    width: 100%;
    margin-bottom: 40px;
    font-size: 1.8rem;
    line-height: 1;
    letter-spacing: 6px;
    /* -webkit-filter: drop-shadow(0 0 3px #fff);
    filter: drop-shadow(0 0 3px #fff); */
    position: relative;
    text-align: center;
    color: #b3965e;
}

.subtitle:before {
    position: absolute;
    top: calc(50% - 1px);
    left: 0;
    width: 100%;
    height: 2px;
    content: '';
    background: #b3965e;
}

.subtitle span {
    position: relative;
    padding: 0 1em;
    background: #fff;
}

.mb_80 {
    margin-bottom: 80px;
}

.mb_40 {
    margin-bottom: 40px;
}

/*--------------------------------------
access page ここまで
--------------------------------------*/

@media screen and (min-width: 801px) {
    header {
        background: var(--color--purple);
    }
}

/* .main-tab:nth-child(2) {
    background: #bda67a;
    color: #fff;
}

.main-tab:nth-child(2) {
    background: #00D26A;
    color: #fff;
}

.main-tab:nth-child(3) {
    background: #FCD53F;
    color: #fff;
}

.main-tab:nth-child(4) {
    background: #0074B9;
    color: #fff;
}

.main-tab:nth-child(5) {
    background: #FF6723;
    color: #fff;
} */
.room1 {
    color: #00D26A;
}

.room2 {
    color: #FCD53F;
}

.room3 {
    color: #0074B9;
}

.room4 {
    color: #FF6723;
}


@media (max-width : 801px) {
    .contents-ttl h2 {
        font-size: 2.3rem;
    }
}

.space {
    height: 500px;
    width: 100%;
}


.price-box h3 {
    color: black;
}

.price-dsc {
    color: red;
}