/* コンセプト
隠れ家的な癒しの個室空間
アロマオイルとマッサージで心身共にリフレッシュ感 */

:root {
    --color_blue: #B1F1EB;
    --color_blue-txt: #1ba89a;
    --color_blue-gr: linear-gradient(120deg, #1ba89a 1%, #cafff5 50%, rgb(70, 128, 117) 100%);
    --color_font-bk: #454545;
    --color_blue-back: rgba(177, 241, 235, 0.6);
    --color_border: #c0c0c0;
    --color_yellow: -webkit-linear-gradient(0deg, rgb(197, 155, 83) 30%, rgb(243, 210, 74) 50%, rgb(197, 155, 83) 70%) text;
    --color_black: black;
    --color_gold: rgb(224, 206, 105);
    --color_white: #fff;
}

#navi-menu ul li a {
    color: var(--color_blue-txt);
}

.foot-logo {
    width: 18%;
    padding: 2rem 0;
    margin: auto;
    text-align: center;
}

main {
    width: 100%;
    background: url("../img/back.jpg");
    background-size: cover;
    background-position: left;
    background-repeat: no-repeat;
    position: relative;
  }

.more-list-btn {
    background: var(--color_blue-gr);
}

.more-list-btn a {
    color: var(--color_black);
}

.topics-info .more-btn {
    background: var(--color_blue-gr);
}

.topics-info .more-btn a {
    color: var(--color_black);
}

.news-text span {
    background: #deb887;
    color: #fff;
}

.news-text span {
    background: var(--color_gold);
}

.topics-container {
    background: var(--color_white);
}

.hback-btn a {
    background: var(--color_blue-gr);
    color: var(--color_black);
}

.staff-info ul {
    background: var(--color_white);
    color: var(--color_black);
}

.staff-info ul li {
    color: var(--color_black);
}

.sch-date dt {
    width: 100%;
    padding: 0.25rem 0.5rem;
    text-align: center;
    background: var(--color_blue);
    border: 1px solid var(--color_blue);
    color: var(--color_black);
}

.sch-work dd {
    border: 1px solid var(--color_blue);
    background: var(--color_white);
}
.schedule-box a {
    color: #000000;
    background:#f8f8f8;
}

.current a {
    color: var(--color_white);
    background: rgb(42, 116, 228);
}


.bg-mask {
    background: rgb(47 222 216 / 80%);
}


.foot-link-wrap {
    justify-content: center;
}

.visual-logo {
    width: 100%;
    background: url("../img/h-logo.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    padding: 10% 0;
  }

@media screen and (max-width: 769px) {
    .visual-logo {
        width: 100%;
        background: url(../img/h-logo.png);
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        padding: 27% 0;
    }
}


.rec-visual {
    width: 100%;
    padding-top: calc(3 / 7 * 100%);
    background: url(../img/rec-visual.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

.rec-visual h3 {
    display: none;
}