/* 現在利用しているPure Sweet のHPのテイストに近いものを希望します。
コスプレを着せたセラピストを掲載する予定で、全体的には白基調、ヘッダー部分等の色がもう少し淡い明るいピンクでお願いします。 */
/* https://puresweet.men-este.net/ */

:root {
    --main-color: #e7a1bd;
    --white-color: #fff;
    --black-color: #333;
    --pink-color: #d46d7e;
    --gold-color: #d1ba90;
}

@media screen and (min-width: 769px) {


    .logo-area a {
        background: url(../img/h-logo.png);
        background-size: 86%;
        width: 72px;
        height: 62px;
    }

    .visual-logo {
        animation: none;
    }

    .mainvisual {
        position: absolute;
        padding: 0 3%;
        display: flex;
        color: #fff;
        background: url(../img/mainvisual.jpg) !important;
        background-size: cover;
        background-position: top right;
        background-repeat: no-repeat;
        height: 100vh;
        width: 100%;
    }

    .todays-wrap {
        background: none !important;
    }

    .under-wrap {
        background: rgba(224, 224, 224, 0.7);
    }

    .list-wrap {
        width: 81%;
        margin: 0 auto;
    }

    .blog-detail-update:after {
        border-bottom: 1px solid var(--black-color);
        border-top: 1px solid var(--black-color)
    }

    .weekly-schedule {
        background: var(--main-color);
    }
}

@media screen and (max-width: 769px) {

    .logo-area {
        top: 0;
        left: 0;
    }

    .logo-area a {
        display: block;
        background: url(../img/h-logo.png);
        background-size: 44%;
        background-position: center;
        background-repeat: no-repeat;
        width: 114px;
        height: 54px;
    }

    .mainvisual {
        position: absolute;
        padding: 0 3%;
        display: flex;
        color: #fff;
        background: url(../img/mainvisual.jpg) ;
        background-size: cover;
        background-position: top right -19rem;
        background-repeat: no-repeat;
        height: 100vh;
        width: 100%;
    }

    #nav-circle-bg {
        position: fixed;
        background: var(--pink-color);
    }

    .visual-logo {
        animation: none;
        padding: 30% 0;
    }

    .contents-ttl  { 
        background: rgba(224, 224, 224, 0.7);
    }
    
    .under-wrap {
        background: rgba(255, 255, 255, 0.7) !important;
    }

    .main-contact {
        background: var(--main-color);
    }

    .clamp-text3 {
        background: none;
    }

    .weekly-schedule li a.current {
        background: var(--main-color);
        color: #fff;
    }

}

body {
    color: black;
    font-family: "Nunito Sans", sans-serif;
}

header {
    top: 0;
    background: var(--pink-color);
}

.under-h {
    background: var(--pink-color);
}

.header-bg {
    background: var(--pink-color);
}

#nav a {
    color: var(--white-color);
}

.contents-ttl {
    background: none;
}

main {
    background: rgb(255, 255, 255, 0.7);
    position: relative;
}

main::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: url(../img/bg.jpg) center / cover no-repeat;
    z-index: -1;
}

.under-main::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: url(../img/bg.jpg) center / cover no-repeat;
    z-index: -1;
}

.mainvisual-bg:before {
    background: none;
}

.mainvisual p {
    color: var(--black-color);
}

.mainvisual a {
    color: var(--black-color);
}

.news-text-wrap li span {
    background: var(--gold-color);
    color: var(--white-color);
    border-radius: 15px;
}

.todays-wrap {
    background: none;
}

.more-btn a {
    background: var(--main-color);
    color: var(--white-color);
    border: 0;
    border-radius: 15px;
}

.staff-box ul {
    background: var(--white-color);
    color: var(--black-color);
}

.todays-wrap h2,
.todays-wrap p {
    color: var(--black-color);
}

.blog-box+.blog-box {
    border-top: 1px solid var(--black-color);
}

.reserve-bnr,
.qa-bnr,
.recruit-bnr {
    background: none;
}

.reserve-bnr a,
.qa-bnr a,
.recruit-bnr a {
    background: var(--main-color);
    border-radius: 20px;
}

.list-wrap h3 {
    border-top: 0;
    border-bottom: 0;
}

.list-wrap h3:before {
    border-top: none;
}

.list-wrap dt {
    background: var(--main-color);
}

.list-wrap h3:after {
    border-bottom: 1px solid var(--black-color);
}

.news-btn a {
    text-decoration: none;
    background: var(--main-color);
}

.news-ico {
    background: var(--gold-color);
    color: #fff;
}

.news-detail-info p:nth-child(1) {
    color: var(--gold-color);
}

.archive h3 {
    background: var(--main-color);
}

.archive li a {
    color: var(--pink-color);
}

.prev-btn a {
    background: var(--main-color);
    border-radius: 15px;
}

.end-line {
    width: 100%;
    border-bottom: 1px solid var(--black-color);
    border-top: 1px solid var(--black-color);
    padding: 0 0 0.25rem;
    margin: 1rem 0;
}

.news-detail-info:after,
.blog-detail-info:after {
    border-bottom: 1px solid var(--black-color);
    border-top: 1px solid var(--black-color);
}

.days-textn {
    color: var(--gold-color);
}

.blog-detail a {
    background: var(--main-color);
}

.filter-wrap select {
    border: 1px solid var(--main-color);
    color: var(--main-color);
    background-image: url(../img/filter-arrow.svg), linear-gradient(to bottom, var(--main-color) 0%, var(--main-color) 100%);
}

.filter-inner {
    border: 1px solid var(--main-color);
}

.filter-inner label {
    color: var(--main-color);
}

.filter-inner input[type="submit"] {
    background: var(--main-color);
}

.filter-wrap .filter-reset a {
    color: var(--main-color);
}

.filter-inner input[type="submit"] {
    height: 2.6rem;
}

.filter-wrap .filter-reset a {
    color: red;
}

.tab-switch:checked+.tab-label {
    background: var(--main-color);
}

.tab-label {
    color: var(--black-color);
    background: #ebebeb;
}

.credit-bnr a {
    background: none;
    filter: none;
    text-decoration: none;
    background: var(--main-color);
    color: var(--white-color);
}

.detail-tbl tr th,
.detail-tbl tr td {
    border: 1px solid var(--main-color);
}

.detail-tbl thead {
    background: var(--main-color);
}

.reserve #schedule {
    border: 1px solid var(--main-color) !important;
    background-image: url(../img/calendar.svg), linear-gradient(to bottom, var(--main-color) 0%, var(--main-color) 100%) !important;
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
    background: var(--main-color) !important;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
    border: 1px solid var(--main-color) !important;
    background: #fff;
    font-weight: normal;
    color: var(--black-color) !important;
}

.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
    background: var(--main-color) !important;
}

.reserve {
    background: var(--white-color) !important;
}

.reserve>div {
    background: var(--white-color) !important;
}

.reserve input[type="submit"] {
    background: var(--main-color);
}

.ui-widget-header {
    background: var(--main-color) !important;
}

.ui-widget.ui-widget-content {
    border: 1px solid var(--main-color) !important;
}

.reserve select {
    background-image: url(../img/select-arrow.svg), linear-gradient(to bottom, var(--main-color) 0%, var(--main-color) 100%);
}

.accordion>ul>li>div {
    background: var(--main-color);
    border: 1px solid var(--main-color);
}

.accordion li .accordion_icon span {
    background: var(--main-color);
}

.job-box dl dt {
    background: var(--main-color);
}

.recruit-main {
    background: rgba(224, 224, 224, 0.7);
}

.job-box dl dt+dd {
    background: var(--white-color);
}

.profile-wrap {
    background: var(--white-color);
}

footer {
    background: var(--pink-color);
    color: #fff;
}

.footer-logo {
    background: url(../img/f-logo.png);
    background-size: 63%;
    background-position: center;
    background-repeat: no-repeat;
    padding: 28% 0;
}

.sp-foot {
    background: var(--main-color);
}