/* https://o-plus.site/ ←のサイトの雰囲気、もしくは制作事例に載ってるSKB様やMrs.Sweets 大人の癒し様のような高級感あふれるデザイン。白(銀)ゴールド(茶色)が基調だと嬉しいです。 */

:root {
    --main-color: #000000;
    --white-color: #fff;
    --black-color: black;
    --pink-color: #a83a4c;
    --gold-color: #e2c183;
    --ttl-color: #0b2749;
}

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

    header {
        border-bottom: 1px solid var(--black-color);
    }

    .logo-area a {
        display: block;
        background: url(../img/h-logo.png);
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        width: 120px;
        height: 65px;
        text-indent: -999999px;
    }

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

    #nav a:hover {
        text-shadow: 1px 1px 1px var(--black-color);

    }

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

    .weekly-schedule {
        background: var(--gold-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(--black-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: "Cinzel", serif;
}

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

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

#nav-toggle span {
    background: var(--white-color) !important;
}

#nav li {
    border-bottom: 1px solid var(--gold-color);
}

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

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

.contents-ttl {
    background: none;
}

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

main {
    background: none;
    position: relative;
}

main::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background:
        linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
        url(../img/back.png) 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(--gold-color);
}

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

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

.todays-wrap {
    background: none;
}

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

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

.staff-box li:nth-child(3) {
    background: var(--gold-color);
    color: var(--white-color);
}

.ico01,
.ico04,
.ico07,
.ico010,
.ico013 {
    background: #588ff585 !important;
}

.ico02,
.ico05,
.ico08,
.ico011 {
    background: #588ff585 !important;
}

.ico03,
.ico06,
.ico09,
.ico012 {
    background: #588ff585 !important;
}

.todays-wrap h2,
.todays-wrap p {
    color: var(--ttl-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(--ttl-color);
}

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

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

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

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

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

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

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

.credit-bnr span {
    border: 1px solid black;
    color: var(--gold-color);
    font-weight: normal;
    text-shadow: none;
    background: var(--white-color);
}

.check-point {
    color: var(--black-color);
}

.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(--gold-color);
    color: var(--gold-color);
    background-image: url(../img/filter-arrow.svg), linear-gradient(to bottom, var(--gold-color) 0%, var(--gold-color) 100%);
}

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

.filter-inner input[type="submit"] {
    background: var(--gold-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);
    color: var(--white-color);
}

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

.credit-bnr a {
    background: none;
    filter: none;
    text-decoration: none;
    background: none;
    color: var(--white-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: rgb(238, 231, 193) !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: rgb(238, 231, 193) !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(--gold-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(--ttl-color);
    color: #fff;
}

.footer-logo {
    background: url(../img/f-logo.png);
    background-size: 81%;
    background-position: center;
    background-repeat: no-repeat;
    padding: 38% 0;
    filter: sepia(1);
}

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

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

.rese-st {
    background: var(--gold-color);
}

.line-st {
    background: #06C755;
}