:root {
    --main-color: #db5259;
    --sub-color: #fff;
    --black-color: #333;
    --gold-color: -webkit-linear-gradient(135deg, #89794f 0%, #e9e3bb 50%, #89794f 100%);
    --border-style: 1px solid var(--black-color);
}

body {
    font-family: "Noto Serif", serif;
    color: var(--black-color);
}

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

    .loading img {
        width: 30%;
    }

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

    .header-bg #nav a {
        color: var(--black-color);
    }

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

    .logo-area a {
        height: 50px;
    }

    .visual-logo {
        padding: 15% 0;
    }

    .weekly-schedule {
        background: none;
    }

    .weekly-schedule li a {
        color: var(--sub-color);
    }

    .weekly-schedule li a.current {
        color: var(--sub-color);
    }

    .blog-detail-update:after {
        border-bottom: var(--border-style);
        border-top: var(--border-style);
    }

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

    .job-box dl dt,
    .job-box dl dd {
        width: 100%;
        padding: 1rem;
    }

    .recruit-mainvisual {
        padding-top: calc(410 / 900* 63.5%);
        width: 58%;
    }

    .detail-tbl tr th {
        border-top: 1px solid #c6a852 !important;
    }

    .blog-text-area {
        color: var(--black-color);
    }
    

    .footer-logo {
        padding: 29% 0;
    }
}

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

    .loading img {
        width: 70%;
    }

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

    .logo-area {
        top: 0.7rem;
        left: -0.25rem;
    }

    .logo-area a {
        width: 120px;
        height: 35px;
    }

    .visual-logo {
        padding: 28% 0;
    }

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

    .header-bg #nav-toggle span {
        background: var(--black-color);
    }

    #nav li {
        border-bottom: var(--border-style);
    }

    #nav-circle-bg {
        background: rgb(255 255 255 / 80%);
    }

    .open #nav-toggle span {
        background: var(--black-color);
    }

    .close-btn {
        color: var(--black-color);
    }

    .under-h #nav-toggle span {
        background: var(--black-color);
    }

    .news-under-wrap {
        border-bottom: 1px solid var(--sub-color);
    }

    .days-text {
        color: var(--sub-color);
    }

    .detail-tbl tr td {
        border-left: none;
    }

    .news-inner-info a {
        color: var(--sub-color);
    }

    .news-ico {
        padding: 0.1rem;
    }

    .recruit-mainvisual {
        padding-top: calc(450 / 900* 100%);
    }

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

    .blog-detail-info p {
        color: var(--sub-color);
    }

    .blog-text-area {
        color: var(--sub-color);
    }

    .sp-foot {
        background: rgba(219, 81, 111, 0.8);
    }

    .footer-logo {
        padding: 26% 0;
    }


}

main:before {
    background: url(../img/back.jpg);
    background: linear-gradient(to top, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%), url(../img/back.jpg);
    content: "";
    display: block;
    position: absolute;
    height: 100vh;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top 25%;
    position: fixed;
    z-index: -10;
    top: 0;
}

.mainvisual {
    background: none;
}

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

.under-wrap {
    background: none;
}

.visual-logo {
    /* animation: none; */
}

.recruit-main {
    background: none;
}

.under-h {
    top: 0;
    background: var(--sub-color);
}

.under-h #nav a {
    color: var(--black-color);
}

.mainvisual-bg:before {
    background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%), url(../img/mainvisual.jpg);
    background-size: cover;
    background-position: center top 30%;
    background-repeat: no-repeat;
}

.contents-ttl {
    background: none;
}

.todays-wrap {
    background: none;
}

.staff-box>ul>li {
    background: var(--sub-color);
    color: var(--black-color);
}

.staff-box>ul>li:nth-child(3) {
    color: var(--main-color);
}

.staff-box>ul li+li {
    border-top: 1px solid var(--black-color);
}

.ico01,
.ico04,
.ico07,
.ico010,
.ico013 {
    background: rgba(235, 57, 57, 0.8) !important;
}

.contents-ttl h2 {
    color: var(--sub-color);
}

.contents-ttl p {
    color: var(--sub-color);
}

.todays-wrap h2 {
    color: var(--sub-color);
}

.todays-wrap p {
    color: var(--sub-color);
}

.news-text-wrap li span {
    background: var(--sub-color);
    color: var(--main-color);
    border: 1px solid var(--main-color);
}

.news-text-wrap li:first-child {
    color: var(--black-color);
}

.more-btn a {
    color: var(--sub-color);
    border: 2px solid var(--main-color);
    background: var(--main-color);
}

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

.blog-text p {
    color: var(--sub-color);
}

.clamp-text2 a {
    color: var(--sub-color);
}

.clamp-text3 {
    background: none;
}

.reserve-bnr a,
.qa-bnr a,
.recruit-bnr a {
    background: rgba(219, 81, 111, 0.5);
    padding: 0
}

.list-wrap p {
    color: var(--sub-color);
}

.list-wrap h3 {
    border-top: 0;
    border-bottom: 1px solid var(--sub-color);
    color: var(--sub-color);
}

.list-wrap h3:before {
    border-top: 1px solid var(--sub-color);
}

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

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

.list-wrap dd {
    background: var(--sub-color);
}

.news-ico {
    color: var(--main-color);
    background: var(--sub-color);
    border: 1px solid var(--main-color);
}

.news-btn a {
    color: var(--sub-color);
    background: var(--main-color);
    border: 1px solid var(--main-color);
}

.news-detail-info p {
    color: var(--sub-color);
}

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

.news-text-area {
    color: var(--sub-color);
}

.end-line {
    border-bottom: 1px solid var(--sub-color);
    border-top: 1px solid var(--sub-color);
}

.prev-btn a {
    background: var(--main-color);
    color: var(--sub-color);
    border: 1px solid var(--main-color);
}

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

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


.filter-wrap select {
    border: 1px solid var(--main-color);
    color: var(--black-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 input[type="submit"] {
    background: var(--main-color);
}

.filter-inner input[type="checkbox"]:checked+.check-point:after,
.reserve input[type="checkbox"]:checked+.check-point:after {
    border-bottom: 3px solid var(--main-color);
    border-right: 3px solid var(--main-color);
}

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

.blog-update {
    color: var(--black-color);
}

.blog-detail a {
    color: var(--sub-color);
    background: var(--main-color);
    border: 1px solid var(--main-color);
}

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

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

.detail-wrap {
    color: var(--sub-color);
}

.detail-wrap li {
    border-bottom: 1px dotted var(--sub-color);
}

.shop-cmt {
    border-bottom: double var(--sub-color);
}

.shop-cmt:after {
    border-bottom: 1px solid var(--sub-color);
    border-top: 1px solid var(--sub-color);

}

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

.detail-tbl tr td {
    background: var(--sub-color);
    color: var(--black-color);
}

.reserve>div {
    background: none;
}

.form-caution {
    color: var(--sub-color);
}

.form-wrap {
    color: var(--sub-color);
}

.reserve input[type="text"],
.reserve input[type="number"],
.reserve input[type="tel"],
.reserve input[type="email"],
.reserve input[type="date"],
.reserve select {
    border: 1px solid var(--main-color) !important;
}

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

.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
    background: var(--main-color) !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;
    color: var(--black-color) !important;
}

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

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

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

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

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

reserve input[type="radio"]:checked+label:after {
    background: var(--main-color) !important;
}

.reserve input[type="time"] {
    border: 1px solid var(--main-color) !important;
}

.reserve input[type="radio"]:checked+label:after {
    background: var(--main-color) !important;
}

.reserve textarea {
    border: 1px solid var(--main-color) !important;
}

.accordion>ul>li>div {
    color: var(--sub-color);
    background: var(--gold-color);
    border: 0;
}

.reserve input[type="radio"]+label:before {
    border: 1px solid var(--main-color) !important;
}

.accordion>ul>li>p {
    color: var(--sub-color);
}

.job-box dl dd {
    color: var(--sub-color);
}

.reserve {
    background: var(--sub-color);
    color: var(--black-color);
}

footer {
    background: none;
}

.list-wrap li {
    color: var(--sub-color);
}

.tw-btn {
    margin-bottom: 2rem;
}

@media screen and (min-width: 769px) {
    .tw-profile {
        width: 85%;
        margin: 0 auto;
    }
    
}

.tw-profile {
    margin-top: 0.8rem;
}