.sitename {
    font-size: 30px;
    font-family: "fot-tsukuardgothic-std", sans-serif;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0;
    line-height: 1.4;
    font-weight: 700
}

.sitename .logo-s {
    font-size: .533em;
    color: #6f6f6f;
    letter-spacing: .2em
}

.gmenu>li>a {
    padding-left: 1em;
    font-size: 1.125em;
    font-family: "fot-tsukuardgothic-std", sans-serif;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0;
    position: relative
}

.gmenu>li>a::before {
    content: "";
    display: block;
    position: absolute;
    top: .5em;
    left: 0;
    width: 9px;
    height: 9px;
    background-color: #f7e19b;
    border-radius: 50%
}

.gmenu>li>a::after {
    position: absolute;
    bottom: -0.2em;
    left: 0;
    content: "";
    width: 0;
    height: 2px;
    background-color: #f7e19b;
    transition: .3s
}

.gmenu>li>a:hover::after {
    width: 100%
}

.gmenu .smenu {
    margin-left: 2em;
    padding-top: 1em
}

.gmenu .smenu>li:not(:first-child) {
    margin-top: .7em
}

.gmenu .smenu>li>a {
    display: block;
    padding-left: 1.5em;
    color: #6f6f6f;
    line-height: 1.3;
    position: relative
}

.gmenu .smenu>li>a:hover {
    text-decoration: underline
}

.gmenu .smenu>li>a::before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    width: 10px;
    height: 1px;
    background-color: #6f6f6f
}

.btn {
    margin-top: min(8vw, 50px)
}

::selection {
    background: #d2cab9
}

.inner,
*[class*=inner-] {
    margin: auto;
    position: relative
}

.inner {
    max-width: 1200px
}

@media screen and (max-width: 1200px) {
    .inner {
        width: 92%
    }
}

.inner-fw {
    width: 90%
}

.inner-narrow {
    max-width: 990px
}

@media screen and (max-width: 1040px) {
    .inner-narrow {
        width: 92%
    }
}

.inner-right {
    margin-inline: auto 0
}

.inner .inner {
    width: 100%
}

.sec-box {
    padding-block: min(12%, 120px)
}

#pan+.sec-box {
    padding-top: min(8%, 80px)
}

.sec-btm {
    padding-bottom: min(8%, 80px)
}

[class*=ttl-] {
    position: relative;
    font-family: "fot-tsukuardgothic-std", sans-serif;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0
}

.ttl-sec {
    text-align: center
}

.ttl-sec .main {
    font-size: min(7vw, 38px)
}

.ttl-sec .sub {
    display: block;
    margin-bottom: 1.139em
}

.ttl-sec .sub>span {
    display: inline-block;
    padding: .2em min(1.667em, 30px) .3em;
    font-size: min(3.4vw, 18px);
    background-color: #e0dad0;
    border-radius: 50px;
    position: relative
}

.ttl-sec.simple .sub {
    margin-bottom: .6em
}

.ttl-sec.simple .sub>span {
    background-color: inherit;
    border-radius: 0
}

.ttl-sec.border .sub {
    position: relative
}

.ttl-sec.border .sub::before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: #d2cab9;
    transform: translateY(-50%)
}

@media screen and (max-width: 599px) {
    .ttl-sec .sub {
        line-height: 1.5
    }

    .ttl-sec .sub>span {
        font-size: 1em
    }
}

.ttl-brackets {
    position: relative;
    width: fit-content;
    margin-inline: auto;
    padding-inline: 1.5em;
    font-size: min(4.8vw, 26px);
    line-height: 1.2;
    font-feature-settings: "palt"
}

.ttl-brackets .marker {
    font-size: 1.2em
}

.ttl-brackets::before,
.ttl-brackets::after {
    content: "";
    display: block;
    position: absolute;
    top: .2em;
    width: 8px;
    height: 100%;
    border-style: solid;
    border-color: #282828
}

.ttl-brackets::before {
    left: 0;
    border-width: 1px 0 1px 1px
}

.ttl-brackets::after {
    right: 0;
    border-width: 1px 1px 1px 0
}

.ttl-deco {
    margin-bottom: min(2.6vw, 20px);
    font-size: min(4.6vw, 20px)
}

.ttl-deco>span {
    position: relative;
    display: inline-block;
    padding-inline: .6em
}

.ttl-deco>span::before,
.ttl-deco>span::after {
    content: "";
    display: block;
    position: absolute;
    bottom: .3em;
    width: 2px;
    height: 1.2em;
    background: #f7e19b
}

.ttl-deco>span::before {
    left: 0;
    transform: rotate(-15deg)
}

.ttl-deco>span::after {
    right: 0;
    transform: rotate(15deg)
}

.ttl-b-both {
    margin-bottom: 1em;
    font-size: min(6vw, 32px);
    text-align: center;
    line-height: 1.2
}

.ttl-b-both>span {
    display: inline-block;
    padding-inline: .625em;
    position: relative
}

.ttl-b-both>span::before,
.ttl-b-both>span::after {
    content: "";
    display: block;
    position: absolute;
    top: 49%;
    width: 1.5em;
    height: 3px;
    background-color: #d2cab9
}

.ttl-b-both>span::before {
    left: 100%
}

.ttl-b-both>span::after {
    right: 100%
}

.ttl-b-both.spnone>span::before,
.ttl-b-both.spnone>span::after {
    display: none
}

.ttl-dot {
    margin-bottom: .5em;
    padding-left: 1em;
    font-size: min(4.6vw, 20px);
    position: relative
}

.ttl-dot::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: .55em;
    height: .5em;
    margin: auto;
    background-color: #d2cab9;
    border-radius: 50px
}

.ttl-dot.yel::before {
    background-color: #f7e19b
}

.ttl-dot-w {
    width: fit-content;
    margin-inline: auto;
    padding-inline: .8em;
    font-size: min(6.8vw, 32px)
}

.ttl-dot-w::before,
.ttl-dot-w::after {
    content: "";
    display: block;
    position: absolute;
    top: 40%;
    width: .5em;
    height: .5em;
    background-color: #d2cab9;
    border-radius: 50%
}

.ttl-dot-w::before {
    left: 0
}

.ttl-dot-w::after {
    right: 0
}

.ttl-fill {
    padding: .8em;
    font-size: min(4.6vw, 20px);
    background-color: #f5f0e6;
    border-left: 3px solid #d2cab9
}

.ttl-bb {
    padding-block: 0 .8em;
    font-size: min(4.9vw, 22px);
    border-bottom: 2px solid #f5f0e6
}

.ttl-bb::before {
    content: "";
    display: block;
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 4%;
    height: 2px;
    background-color: #e0dad0
}

.ttl-bb.small {
    font-size: min(3.4vw, 18px)
}

.bg-bei {
    background: #f5f0e6
}

.f-tsukushi {
    font-family: "fot-tsukuardgothic-std", sans-serif;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0
}

.f-en {
    font-family: "Nunito", sans-serif;
    font-weight: 700;
    letter-spacing: .06em
}

.w500 {
    font-weight: 500
}

a {
    color: #282828;
    text-decoration: none
}

a.ul {
    color: #282828;
    text-decoration: underline
}

a.disable {
    pointer-events: none
}

a[href$=".pdf"] {
    position: relative;
    padding-right: 1.5em;
    text-decoration: underline
}

a[href$=".pdf"]::before {
    content: "";
    display: block;
    position: absolute;
    top: .2em;
    right: 0;
    width: 1.3em;
    height: 1.3em;
    background: url(../img/common/ico-pdf.svg.html) no-repeat center/contain
}

.c-red {
    color: #ba4243
}

.c-blu {
    color: #d7e0e7
}

.c-pnk {
    color: #d8a7ac
}

.slick-slider {
    touch-action: auto
}

.slick-arrow {
    z-index: 1;
    width: clamp(36px, 6vw, 60px);
    height: clamp(36px, 6vw, 60px);
    background-color: #e0dad0;
    border-radius: 50%
}

.slick-arrow:hover,
.slick-arrow:focus {
    background-color: #d2cab9
}

.slick-arrow::before {
    content: "";
    display: block;
    position: absolute;
    top: 35%;
    width: 30%;
    height: 30%;
    background: url(../img/common/arrow.svg) no-repeat center/contain
}

.slick-prev::before {
    left: 34%;
    transform: scaleX(-1)
}

.slick-next::before {
    left: 38%
}

.w100 {
    width: 100%
}

.mw360 {
    max-width: 360px
}

.mt15 {
    margin-top: 1.5em
}

.mt0 {
    margin-top: 0
}

.mt1 {
    margin-top: 1em !important
}

.mt2 {
    margin-top: 2em !important
}

.mt3 {
    margin-top: 3em !important
}

.mb0 {
    margin-bottom: 0
}

.mb2 {
    margin-bottom: 2em
}

.ml1 {
    margin-left: 1em
}

.link-btn {
    margin-block: 2.2em 1.5em
}

.rc {
    padding: 1.2em 1.6em;
    border-radius: 10px
}

.object-fit-img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%,
            -50%)
}

.hv-scale {
    transition: transform .6s ease
}

.hv-scale:hover {
    color: inherit;
    transform: scale(1.05)
}

.hv-simg>img {
    transition: transform .6s ease
}

.hv-simg:hover>img {
    transform: scale(1.05)
}

@keyframes fade-zoom {
    0% {
        transform: scale(1)
    }

    100% {
        transform: scale(1.2)
    }
}

@keyframes fade-in {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

.bg-image-clip {
    top: -560px;
    left: 0;
    z-index: 0;
    width: 100%;
    height: min(50vw, 560px);
    clip-path: inset(0)
}

.bg-image-clip .bg-image-fixed {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center
}

.tbl {
    table-layout: fixed;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 5px
}

.tbl thead tr th {
    padding: 1em;
    background-color: #d2cab9
}

.tbl tbody tr>* {
    padding: 1em;
    background-color: #fff
}

.tbl tbody th {
    border-left: 3px solid #d2cab9
}

.tbl tbody td {
    border-left: 1px dashed #d2cab9
}

@media screen and (min-width: 600px) {
    .tbl tbody th {
        width: 35%
    }

    .tbl tbody td {
        flex: 1
    }
}

@media screen and (max-width: 599px) {
    .tbl {
        font-size: .85em
    }
}

.badge {
    position: absolute;
    top: 0;
    z-index: 1;
    display: grid;
    place-items: center;
    color: #282828;
    line-height: 1;
    text-align: center;
    font-family: "fot-tsukuardgothic-std", sans-serif;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0;
    background-color: #fff;
    border: 2px solid #f7e19b;
    border-radius: 50%
}

.badge em {
    font-size: 1.3em
}

.badge.no1 {
    color: #bfaf89;
    border-color: #bfaf89
}

.badge.no2 {
    color: #aeaca8;
    border-color: #aeaca8
}

.badge.no3 {
    color: #ae9c91;
    border-color: #ae9c91
}

.badge.otoku {
    color: #988f7c;
    border-color: #988f7c
}

.badge.blu {
    color: #82a5c2;
    border-color: hsl(206.25, 25%, 77.4509803922%)
}

.badge.pnk {
    color: rgb(200.3385826772, 131.6614173228, 138.6692913386);
    border-color: #d8a7ac
}

@media screen and (min-width: 960px) {
    .badge {
        width: 5em;
        height: 5em;
        font-size: 1.1em
    }
}

@media screen and (max-width: 959px) {
    .badge {
        width: 4.5em;
        height: 4.5em;
        font-size: .9em
    }
}

.hair-ranking {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch
}

.hair-ranking>ol {
    display: grid;
    grid-template-columns: repeat(3,
            1fr);
    gap: 40px;
    margin: 0;
    padding: 0;
    list-style: none
}

.hair-ranking>ol>li {
    position: relative;
    padding-top: 1em
}

.hair-ranking>ol>li .badge {
    left: 1em
}

.hair-ranking>ol>li .txt {
    margin-block: .5em;
    line-height: 1.5
}

@media screen and (max-width: 959px) {
    .hair-ranking>ol {
        min-width: 800px;
        gap: 20px
    }

    .hair-ranking>ol .ttl {
        font-size: 1.2em
    }
}

@media screen and (max-width: 599px) {
    .hair-ranking>ol {
        min-width: 720px;
        gap: 15px
    }
}

.link-booking {
    position: relative;
    display: inline-block;
    width: min(85vw, 600px);
    padding-block: 1.462em 1.231em;
    font-size: min(4.6vw, 26px);
    font-family: "fot-tsukuardgothic-std", sans-serif;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0;
    text-align: center;
    background-color: #f7e19b
}

.link-booking>span.bubble {
    position: absolute;
    display: inline-block;
    width: min(61vw, 370px);
    top: 0;
    right: 50%;
    font-size: .692em;
    background-color: #fff;
    border: 2px solid #f7e19b;
    border-radius: 50px;
    transform: translate(50%,
            -50%)
}

.link-booking>span.text {
    position: relative;
    padding-right: 2.143em
}

.link-booking>span.text::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(5vw, 35px);
    height: min(5vw, 35px);
    margin: auto;
    background-color: #d4b961;
    border-radius: 50px
}

.link-booking>span.text::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(1.5vw, 10px);
    height: min(1.5vw, 10px);
    margin: auto min(2vw, 14px);
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg)
}

.faqList>* {
    padding-inline: 4rem;
    position: relative
}

.faqList>*::before {
    content: "";
    display: block;
    position: absolute;
    width: 2.4rem;
    height: 2.4rem;
    left: .8rem;
    font-family: "Nunito", sans-serif;
    font-weight: 700;
    font-size: 1.3rem;
    text-align: center;
    line-height: 1.9;
    border-radius: 50%
}

.faqList dt {
    padding-block: 1em;
    font-size: min(3.8vw, 18px);
    font-family: "fot-tsukuardgothic-std", sans-serif;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0;
    line-height: 1.3;
    background-color: #f5f0e6;
    cursor: pointer
}

.faqList dt::before {
    content: "Q";
    top: .8rem;
    background: #fff
}

.faqList dt::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 2%;
    transform: translateY(-50%);
    width: 1.25em;
    height: 1.25em;
    background: url(../img/common/plus.svg) no-repeat center/contain
}

.faqList dt:not(:first-child) {
    margin-top: 1.3em
}

.faqList dt.active::after {
    background: url(../img/common/minus.svg) no-repeat center/contain
}

.faqList dd {
    padding-block: .5em
}

.faqList dd::before {
    content: "A";
    top: .9em;
    background: #f7e19b
}

@media screen and (max-width: 599px) {
    .faqList>* {
        padding-inline: 3.2rem
    }

    .faqList dt::before {
        top: .6rem;
        width: 1.8rem;
        height: 1.8rem;
        font-size: 1em
    }
}

.review-list li {
    position: relative;
    z-index: 0;
    padding: 5%;
    background-color: #fff
}

.review-list li::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    width: 32.5%;
    height: 50%;
    background: url(../img/common/deco-nami.png) no-repeat top right/contain
}

.review-list li .head {
    margin: 0
}

.review-list li .head .date {
    font-family: "Nunito", sans-serif;
    font-weight: 700;
    color: #9e9e9e
}

.review-list li .head .user {
    display: inline-block;
    margin-left: .8em;
    padding-inline: 1.3em;
    font-family: "fot-tsukuardgothic-std", sans-serif;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0;
    font-size: .9em;
    line-height: 1.6;
    background-color: #e0dad0;
    border-radius: 1em
}

.review-list li .ttl {
    margin-top: .6em;
    font-family: "fot-tsukuardgothic-std", sans-serif;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0;
    font-size: 1.2em;
    line-height: 1.4
}

.review-list li .com {
    margin-bottom: .2em;
    font-size: .9375em;
    line-height: 1.6
}

.seo-box {
    margin-top: min(6vw, 60px);
    padding: min(5vw, 30px) min(6.6vw, 40px);
    border: 2px solid #e0dad0
}

.seo-box>.ttl-bb:not(:first-child) {
    margin-top: 2em
}

.seo-list {
    margin-top: min(2.6vw, 20px)
}

.seo-list>li>a {
    display: block;
    padding-inline: 1em;
    font-size: .933em;
    line-height: 1.5
}

.seo-list>li>a:hover {
    text-decoration: underline
}

@media screen and (min-width: 600px) {
    .seo-list {
        display: flex;
        flex-wrap: wrap
    }

    .seo-list>li {
        margin-bottom: 1em
    }

    .seo-list>li:not(:last-child) {
        border-right: 1px solid #9e9e9e
    }
}

@media screen and (max-width: 599px) {
    .seo-list>li>a {
        position: relative
    }

    .seo-list>li>a::before {
        content: "";
        display: block;
        position: absolute;
        top: .5em;
        left: 0;
        width: 6px;
        height: 6px;
        background-color: #f7e19b;
        border-radius: 50%
    }
}

[class*=btn-] {
    display: inline-block;
    font-family: "fot-tsukuardgothic-std", sans-serif;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0;
    text-decoration: none;
    line-height: 1.4;
    position: relative
}

[class*=btn-]::before,
[class*=btn-]::after {
    transition: all .3s
}

[class*=btn-]:hover {
    color: #282828
}

.btn-lead {
    display: block;
    margin: 0 0 2em;
    font-size: 1.067em
}

.btn-def {
    min-width: 320px;
    margin-top: 5px;
    padding-block: 1.225em 1.788em;
    font-size: 1.067em;
    font-weight: 500;
    text-align: center;
    background-color: #fff
}

.btn-def::before {
    content: "";
    display: block;
    position: absolute;
    top: -5px;
    right: 5px;
    width: 100%;
    height: 100%;
    border: 2px solid #d2cab9
}

.btn-def>span {
    position: relative;
    padding-right: 1.813em
}

.btn-def>span::before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 0;
    translate: 0 -50%;
    width: 0.55em;
    height: 0.55em;
    border-top: 2px solid #282828;
    border-right: 2px solid #282828;
    rotate: 45deg;
    z-index: 1
}

.btn-def:hover::before {
    top: 0;
    right: 0;
    transition: all .3
}

.btn-def.bei {
    background-color: #f5f0e6
}

.btn-arrow {
    display: inline-block;
    position: relative
}

.btn-arrow::after {
    position: absolute;
    bottom: -0.5em;
    left: 0;
    content: "";
    width: 0;
    height: 2px;
    background-color: #e0dad0;
    transition: .3s
}

.btn-arrow:hover::after {
    width: 100%
}

.btn-arrow>span {
    padding-left: 2em;
    position: relative
}

.btn-arrow>span::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: .45em;
    margin: auto;
    width: 0.45em;
    height: 0.45em;
    border-top: 2px solid #282828;
    border-right: 2px solid #282828;
    rotate: 45deg;
    z-index: 1
}

.btn-arrow>span::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 20px;
    height: 20px;
    background-color: #d2cab9;
    border-radius: 50px
}

@media screen and (max-width: 599px) {
    .btn-arrow>span::before {
        top: .35em
    }
}

.btn-more {
    padding: .5em;
    text-align: center;
    border: 2px solid #e0dad0
}

.btn-more::after {
    content: "";
    display: inline-block;
    margin-left: .3em;
    width: 0.45em;
    height: 0.45em;
    border-top: 2px solid #282828;
    border-right: 2px solid #282828;
    rotate: 45deg;
    vertical-align: .1em
}

.btn-more:hover {
    background-color: #f5f0e6
}

.btn-booking {
    padding: .5em;
    text-align: center;
    background-color: #f7e19b
}

.btn-booking::after {
    content: "";
    display: inline-block;
    margin-left: .3em;
    width: 0.45em;
    height: 0.45em;
    border-top: 2px solid #282828;
    border-right: 2px solid #282828;
    rotate: 45deg;
    vertical-align: .1em
}

.btn-booking:hover {
    background-color: #d4b961
}

.btn-fill {
    display: inline-block;
    min-width: 380px;
    padding: 1em;
    background-color: #f5f0e6;
    position: relative
}

.btn-fill::before,
.btn-fill::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 1em;
    bottom: 0
}

.btn-fill::before {
    width: min(5vw, 35px);
    height: min(5vw, 35px);
    margin: auto;
    background-color: #d4b961;
    border-radius: 50%
}

.btn-fill::after {
    margin: auto min(2vw, 14px);
    width: 0.6em;
    height: 0.6em;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    rotate: 45deg
}

.btn-fill.attention {
    color: #fff;
    font-size: min(4.6vw, 20px);
    background-color: #ba4243
}

.btn-fill.attention::before {
    background-color: #913132
}

.btn-fill.booking {
    font-size: min(4.6vw, 20px);
    background-color: #f7e19b
}

@media screen and (max-width: 599px) {
    .btn-fill {
        min-width: 100%
    }

    .btn-fill::after {
        width: 0.3em;
        height: 0.3em;
        border-top: 2px solid #fff;
        border-right: 2px solid #fff;
        rotate: 45deg
    }
}

.btn-attention {
    padding: .5em 1em;
    color: #fff;
    text-align: center;
    background-color: #ba4243
}

.btn-attention:hover {
    color: #fff;
    background-color: #913132
}

.btn-bb {
    font-weight: bold;
    color: #ba4243;
    text-decoration: underline
}

@media screen and (min-width: 600px) {
    .list-box {
        display: flex;
        flex-wrap: wrap
    }

    .list-box.col2 {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between
    }

    .list-box.col2>li,
    .list-box.col2 div {
        width: 48%
    }
}

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

    .list-box.col2>li:not(:first-child),
    .list-box.col2 div:not(:first-child) {
        margin-top: 4%
    }
}

.list-star>li {
    padding-left: 1em;
    text-indent: -1em
}

.list-star>li::before {
    content: "＊"
}

.error-msg .list-star>li::before {
    color: #ba4243
}

.list-disc>li {
    padding-left: 1em;
    position: relative
}

.list-disc>li:not(:first-child) {
    margin-top: .5em
}

.list-disc>li::before {
    content: "";
    display: block;
    position: absolute;
    top: .75em;
    left: .1em;
    width: .5em;
    height: .5em;
    background-color: #d2cab9;
    border-radius: 50%
}

.list-rnum2 {
    counter-reset: rnum2;
    list-style: none;
    padding-left: 1.3em
}

.list-rnum2>li::before {
    counter-increment: rnum;
    margin-inline: -1.3em .3em
}

.list-rnum2>li:nth-child(1)::before {
    content: "\2460"
}

.list-rnum2>li:nth-child(2)::before {
    content: "\2461"
}

.list-rnum2>li:nth-child(3)::before {
    content: "\2462"
}

.list-rnum2>li:nth-child(4)::before {
    content: "\2463"
}

.list-rnum2>li:nth-child(5)::before {
    content: "\2464"
}

.list-rnum2>li:nth-child(6)::before {
    content: "\2465"
}

.list-rnum2>li:nth-child(7)::before {
    content: "\2466"
}

.list-rnum2>li:nth-child(8)::before {
    content: "\2467"
}

.list-rnum2>li:nth-child(9)::before {
    content: "\2468"
}

.list-rnum2>li:nth-child(10)::before {
    content: "\2469"
}

.box-deco {
    z-index: 0;
    padding: min(7vw, 80px) min(4vw, 50px);
    background-color: #f5f0e6;
    border-top: 1px solid #d2cab9;
    position: relative
}

.box-deco::before,
.box-deco::after {
    content: "";
    display: block;
    position: absolute;
    z-index: -1;
    width: min(32vw, 387px);
    height: min(21vw, 252px);
    background: url(../img/common/deco-nami.png) no-repeat center/contain
}

.box-deco::before {
    top: 0;
    right: 0
}

.box-deco::after {
    bottom: 0;
    left: 0;
    transform: rotate(180deg)
}

.box-b {
    padding: 0 min(4vw, 50px) min(4vw, 50px);
    border: 1px solid #d2cab9
}

.box-b .ttl-sec {
    transform: translateY(-16%)
}

.box-bg {
    padding-block: min(7vw, 80px);
    background-color: #f5f0e6
}

.box-img {
    display: grid;
    grid-template-columns: repeat(3,
            1fr);
    column-gap: min(3vw, 40px);
    margin-top: min(3.6vw, 44px)
}

.box-img figure {
    text-align: center
}

.box-img .ttl {
    width: fit-content;
    margin-top: .417em;
    margin-inline: auto;
    padding-inline: 1.25em;
    font-size: min(3.2vw, 24px);
    font-family: "fot-tsukuardgothic-std", sans-serif;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0;
    text-align: center;
    position: relative
}

.box-img .ttl::before,
.box-img .ttl::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 10px;
    height: 10px;
    margin: auto;
    background-color: #d2cab9;
    border-radius: 50px
}

.box-img .ttl::before {
    left: 0
}

.box-img .ttl::after {
    right: 0
}

@media screen and (max-width: 599px) {
    .box-img {
        grid-template-columns: repeat(2,
                1fr)
    }
}

.box-img2>li:not(:first-child) {
    margin-top: min(6vw, 60px)
}

.box-img2>li .ttl {
    font-size: min(4.6vw, 20px);
    font-family: "fot-tsukuardgothic-std", sans-serif;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0
}

@media screen and (min-width: 600px) {
    .box-img2>li {
        display: grid;
        grid-template-columns: min(50vw, 500px) 1fr;
        gap: 2em
    }

    .box-img2>li:nth-child(even) {
        grid-template-columns: 1fr min(50vw, 500px)
    }

    .box-img2>li:nth-child(even) .img {
        order: 1
    }
}

@media screen and (max-width: 599px) {
    .box-img2>li .lead {
        margin-top: 1em
    }
}

.box-img3 {
    margin-top: min(8.6vw, 65px)
}

.box-img3 figure {
    position: relative
}

.box-img3 figure figcaption {
    position: absolute;
    top: 0;
    left: 1em;
    padding: 0 .5em;
    font-family: "fot-tsukuardgothic-std", sans-serif;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0;
    background-color: #fff;
    border: 2px solid #e0dad0;
    transform: translateY(-50%)
}

@media screen and (min-width: 600px) {
    .box-img3 {
        display: grid;
        grid-template-columns: repeat(3,
                1fr);
        gap: min(3vw, 40px)
    }
}

@media screen and (max-width: 599px) {
    .box-img3 figure figcaption {
        font-size: .75em
    }
}

@media screen and (min-width: 600px) {
    .box-lead {
        display: grid;
        grid-template-columns: 1fr min(35vw, 420px);
        gap: min(4vw, 50px)
    }
}

@media screen and (max-width: 599px) {
    .box-lead figure {
        width: 80%;
        margin: 2em auto 0
    }
}

.box-notice {
    overflow: hidden;
    padding: 1.5em 2em;
    border: 2px solid #d2cab9
}

label {
    display: inline-block
}

input.t {
    width: 15%
}

input.s {
    width: 50%
}

@media screen and (max-width: 599px) {
    input.s {
        width: 60%
    }
}

input.m {
    width: 70%
}

@media screen and (max-width: 599px) {
    input.m {
        width: 99%
    }
}

input.l {
    width: 99%
}

textarea {
    width: 99%
}

button,
input,
select,
textarea {
    font-family: inherit;
    font-size: 100%
}

.submit {
    margin: 2em 1em;
    text-align: center
}

.submit.confirm>input[name=back] {
    background-color: #999
}

@media screen and (min-width: 600px) {
    .submit.confirm {
        display: flex;
        justify-content: space-between
    }

    .submit.confirm>input[name=back] {
        order: -1
    }
}

@media screen and (max-width: 599px) {
    .submit.confirm>input {
        width: 100%;
        margin-bottom: 1em
    }
}

select {
    max-width: 100%;
    padding: .6em .8em;
    font-size: 15px;
    color: #282828;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 3px
}

select option {
    color: #282828
}

select option[value=""] {
    color: #ddd
}

.row label {
    display: block;
    padding: .15em
}

input[type=submit],
input[type=button],
form button {
    box-sizing: border-box;
    appearance: button;
    border: none;
    border-radius: 0;
    cursor: pointer;
    min-width: 260px;
    padding: 1em;
    color: #fff;
    font-size: 1.1em;
    letter-spacing: .1em;
    background-color: #988f7c
}

input[type=submit]::-webkit-search-decoration,
input[type=button]::-webkit-search-decoration {
    display: none
}

input[type=submit]::focus,
input[type=button]::focus {
    outline-offset: -2px
}

button.search::before {
    content: "";
    display: inline-block;
    margin-right: .5em;
    width: 1em;
    height: 1em;
    vertical-align: -0.1em;
    background: url(../img/common/ico-search-wht.svg.html) no-repeat center/contain
}

button.cart {
    font-size: 1em;
    background-color: #ba4243
}

button.cart::before {
    content: "";
    display: inline-block;
    margin-right: .5em;
    width: 1.6em;
    height: 1.6em;
    vertical-align: -0.3em;
    background: url(../img/common/ico-cart-wht.svg.html) no-repeat center/contain
}

.form-area dt {
    padding-bottom: .3em;
    background-color: #fff;
    position: relative
}

.form-area dt::after {
    content: "";
    display: block;
    position: absolute;
    top: 1.9em;
    right: 1.5em;
    content: "任意";
    display: inline-block;
    padding: .3em .5em;
    font-size: 12px;
    color: #fff;
    line-height: 1;
    background-color: #999;
    border-radius: 3px
}

.form-area dt.required::after {
    content: "必須";
    background-color: #ba4243
}

.form-area dd>span.red {
    display: block;
    margin-bottom: .5em;
    line-height: 1.5
}

.form-area.confirm dt::after {
    display: none
}

.form-notice {
    margin-bottom: 2em
}

.form-complete {
    max-width: 880px
}

.form-complete .contact-box {
    margin-inline: auto
}

@media screen and (max-width: 599px) {
    .form-area dt::after {
        top: 50%;
        right: 1em;
        transform: translateY(-50%)
    }
}

.login .input,
.pass .input {
    width: 100%
}

.done-msg {
    max-width: 640px;
    margin: 0 auto 1em;
    padding: 1em;
    background-color: #fff
}

@media screen and (min-width: 600px) {
    .done-msg {
        text-align: center
    }
}

.error-msg {
    max-width: 640px;
    margin: 0 auto 1em;
    padding: 1em;
    background-color: hsl(359.5, 47.619047619%, 99.4117647059%)
}

.email-msg {
    padding-block: min(4%, 30px)
}

html.fixed {
    height: 100vh;
    overflow: hidden
}

#header {
    position: fixed;
    top: 0;
    width: 100%;
    height: min(15vw, 105px);
    padding-left: min(3vw, 50px);
    z-index: 9999;
    background-color: rgba(248, 244, 230, 1)
}

#header.active {
    border-bottom: 1px solid #f5f0e6
}

#header.active::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff
}

#header .sitename a:hover {
    color: inherit
}

#header .s-nav {
    display: flex;
    z-index: 999;
    position: absolute;
    top: 0;
    right: min(15vw, 105px);
    bottom: 0;
    height: 100%;
    margin: auto;
    font-size: 15px;
    background-color: rgba(248, 244, 230, 1)
}

#header .lng-list>li>a {
    padding: .417em 0;
    font-size: .938em;
    font-family: "fot-tsukuardgothic-std", sans-serif;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0;
    text-align: center;
    border-radius: 50px
}

#header .info-li>li {
    width: 50%
}

#header .info-li>li>a {
    display: block;
    width: min(14vw, 106px);
    height: 100%;
    font-family: "fot-tsukuardgothic-std", sans-serif;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0;
    text-align: center;
    border-left: 1px solid #f5f0e6
}

#header .info-li>li>a>span {
    display: block;
    position: relative
}

#header .info-li>li>a>span::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    width: 30px;
    height: 30px;
    margin: 0 auto;
    background: no-repeat center/100%
}

#header .info-li>li>a:hover {
    color: inherit;
    background-color: #f5f0e6
}

#header .info-li>li.h-access>a>span {
    padding-top: 2.6em
}

#header .info-li>li.h-access>a>span::before {
    width: 29px;
    height: 32px;
    background-image: url(../img/common/ico-access.svg)
}

#header .info-li>li.h-booking>a>span {
    padding-top: 2.4em
}

#header .info-li>li.h-booking>a>span::before {
    background-image: url(../img/common/ico-booking.svg)
}

#header .menu-button {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 999;
    width: min(15vw, 105px);
    height: min(15vw, 105px);
    background-color: #fff;
    transition: all .3s ease-in;
    cursor: pointer
}

#header .menu-drawer span {
    display: block;
    position: absolute;
    right: 0;
    left: 0;
    width: 42%;
    height: 2px;
    margin: auto;
    background-color: #282828;
    transition: all .5s
}

#header .menu-drawer span:nth-of-type(1) {
    top: min(4vw, 30px)
}

#header .menu-drawer span:nth-of-type(2) {
    display: none
}

#header .menu-drawer span:nth-of-type(3) {
    top: min(5.8vw, 44px)
}

#header .menu-label {
    position: absolute;
    bottom: 24%;
    left: 0;
    right: 0;
    margin: 0;
    font-size: .875em;
    text-align: center;
    line-height: 1
}

#header .menu-label::before {
    content: "MENU";
    font-family: "Nunito", sans-serif;
    font-weight: 700;
    transition: all .5s
}

#header .menu-button.active .menu-label::before {
    content: "CLOSE"
}

#header .menu-button.active .menu-drawer>span:nth-of-type(1) {
    transform: translateY(6px) rotate(-30deg)
}

#header .menu-button.active .menu-drawer>span:nth-of-type(2) {
    display: none
}

#header .menu-button.active .menu-drawer>span:nth-of-type(3) {
    transform: translateY(-8px) rotate(30deg)
}

@media screen and (max-width: 599px) {
    #header .menu-button.active .menu-drawer>span:nth-of-type(1) {
        transform: translateY(4px) rotate(-30deg)
    }

    #header .menu-button.active .menu-drawer>span:nth-of-type(3) {
        transform: translateY(-4px) rotate(30deg)
    }
}

#header #gnav {
    display: block;
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    transition: all .5s ease-in;
    animation: fade-in .5s forwards
}

#header #gnav::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: -1;
    width: 100%;
    height: 100vh;
    background-color: #fff
}

#header #gnav.active {
    display: block;
    transform: translate(0)
}

#header #gnav .con {
    height: 100%;
    padding: min(13vw, 156px) min(10vw, 80px) min(10vw, 80px);
    background-color: #fff;
    overflow-y: scroll
}

#header #gnav .gmenu>li {
    margin-bottom: min(2.6vw, 20px)
}

#header #gnav .gmenu>li>a {
    font-size: 1.3em
}

#header #gnav .gmenu>li>a:hover {
    color: inherit
}

#header #gnav .gmenu>li.sub {
    margin-bottom: min(3.5vw, 30px)
}

#header #gnav .h-snav {
    column-gap: 2.5em;
    margin-top: min(6vw, 35px);
    padding-top: min(6vw, 35px);
    border-top: 1px solid #e0dad0
}

#header #gnav .h-snav>li>a {
    padding-left: 1em;
    font-size: 1.2em;
    font-family: "fot-tsukuardgothic-std", sans-serif;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0;
    position: relative
}

#header #gnav .h-snav>li>a::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: .5em;
    height: .5em;
    margin: auto;
    background-color: #f7e19b;
    border-radius: 50px
}

#header #gnav .h-snav>li>a::after {
    position: absolute;
    bottom: -0.2em;
    left: 0;
    content: "";
    width: 0;
    height: 2px;
    background-color: #f7e19b;
    transition: .3s
}

#header #gnav .h-snav>li>a:hover::after {
    width: 100%
}

#header #gnav .h-snav>li.ex-link>a>span {
    padding-right: 1.5em
}

#header #gnav .h-snav>li.ex-link>a>span::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 18px;
    height: 18px;
    margin: auto;
    background: url(../img/common/ico-external_link.svg) no-repeat center/contain
}

@media screen and (min-width: 960px) {
    #header #gnav {
        display: flex;
        align-items: center
    }

    #header #gnav #menu-btn.open {
        top: 1.5vw;
        right: -15px
    }

    #header #gnav>.con {
        width: 60%
    }

    #header #gnav>.img {
        flex-grow: 1;
        height: 100%;
        order: -1;
        background: url(../img/common/gnav-img.jpg) no-repeat center/cover
    }
}

@media screen and (min-width: 600px) {
    #header #gnav .gmenu {
        columns: 2;
        gap: min(10vw, 80px)
    }
}

@media screen and (min-width: 960px) {
    #header .s-nav {
        gap: min(2em, 30px)
    }

    #header .lng {
        display: flex;
        align-items: center
    }

    #header .lng-ico {
        display: none
    }

    #header .lng-list {
        gap: 1em
    }

    #header .lng-list>li>a {
        display: inline-block;
        min-width: 100px;
        background-color: #d7e0e7;
        border: 1px solid #d7e0e7
    }

    #header .lng-list>li>a:hover {
        color: #282828;
        background-color: #fff;
        border: 1px solid #d7e0e7
    }
}

@media screen and (max-width: 959px) {
    #header .sitename {
        font-size: 25px
    }

    #header .lng {
        display: flex;
        align-items: center;
        justify-content: center;
        width: min(15vw, 105px);
        background-color: #d7e0e7
    }

    #header .lng-ico {
        padding-top: min(3.6vw, 20px);
        font-family: "Nunito", sans-serif;
        font-weight: 700;
        position: relative
    }

    #header .lng-ico::before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 50%;
        margin-left: -0.7em;
        width: 1.4em;
        height: 1.4em;
        background: url(../img/common/ico-lng.svg) no-repeat center/contain
    }

    #header .lng-list {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 100;
        width: min(15vw, 105px);
        padding: .5em;
        background-color: #d7e0e7
    }

    #header .lng-list>li:not(:first-child) {
        margin-top: .5em
    }

    #header .lng-list>li>a {
        display: block;
        background-color: #fff
    }
}

@media screen and (max-width: 599px) {
    #header .con {
        padding: min(13vw, 156px) min(10vw, 80px) min(26vw, 200px) !important
    }

    #header .sitename {
        font-size: 20px;
        line-height: 1.2
    }

    #header .lng-list {
        width: calc(100% + 15vw)
    }
}

#footer {
    overflow: hidden;
    margin-top: min(8vw, 100px);
    background-color: #f5f0e6
}

#footer .sitename {
    margin-bottom: 1.5em
}

#footer .s-nav {
    padding-block: min(6%, 40px);
    justify-content: center
}

#footer .copyright {
    margin: 0;
    padding-block: .5em
}

@media screen and (max-width: 599px) {
    #footer {
        padding-bottom: 4em
    }

    #footer .copyright {
        line-height: 1.2;
        font-size: .9em
    }
}

.f-con {
    padding-block: min(12vw, 90px) min(10vw, 80px)
}

.f-nav {
    column-gap: min(5em, 80px);
    padding-bottom: min(5%, 40px);
    position: relative
}

.f-nav>li {
    margin-bottom: 1em;
    break-inside: avoid
}

.f-nav>li>a {
    padding-left: 1em;
    font-size: 1.125em;
    font-family: "fot-tsukuardgothic-std", sans-serif;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0;
    position: relative
}

.f-nav>li>a::before {
    content: "";
    display: block;
    position: absolute;
    top: .5em;
    left: 0;
    width: 9px;
    height: 9px;
    background-color: #f7e19b;
    border-radius: 50%
}

.f-nav>li>a:hover {
    color: #282828
}

.f-nav>li.ex-link>a>span {
    padding-right: 1.5em;
    position: relative
}

.f-nav>li.ex-link>a>span::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 18px;
    height: 18px;
    margin: auto;
    background: url(../img/common/ico-external_link.svg) no-repeat center/contain
}

.f-sub {
    padding-block: 1em;
    color: #6f6f6f;
    font-size: 12px;
    font-family: "fot-tsukuardgothic-std", sans-serif;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0;
    border-top: 1px solid #e0dad0
}

.f-sub a {
    color: #6f6f6f
}

.f-sub a:hover {
    text-decoration: underline
}

.f-sub-nav {
    display: flex
}

.f-sub-nav>li:nth-child(n+2)::before {
    content: "　｜　"
}

@media screen and (min-width: 960px) {
    .f-nav {
        columns: 3
    }
}

@media screen and (min-width: 600px)and (max-width: 960px) {
    .f-nav {
        columns: 2
    }
}

@media screen and (max-width: 599px) {
    .f-con {
        display: block
    }

    .f-nav {
        margin-top: 2em;
        padding-top: 2em;
        border-top: 1px solid #e0dad0
    }

    .f-sub-nav {
        padding-block: .5em
    }
}

.flo-nav {
    display: none
}

@media(orientation: portrait)and (max-width: 810px) {
    .flo-nav {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 999;
        border-top: 1px solid #fff
    }

    .flo-nav>li {
        width: 33.33%;
        text-align: center;
        line-height: 1.4;
        background-color: rgba(248, 244, 230, 1)
    }
    .flo-nav>li:nth-child(2n) {
        background-color: #ebe0b8
    }

    .flo-nav>li>a {
        display: block;
        padding-block: 1.2em;
        font-family: "fot-tsukuardgothic-std", sans-serif;
        font-weight: 700;
        font-style: normal;
        letter-spacing: 0
    }

    .flo-nav>li>a>span {
        position: relative
    }

    .flo-nav>li>a>span::before {
        content: "";
        display: block;
        position: absolute;
        top: 50%;
        left: 0;
        width: 1.5em;
        height: 1.5em;
        transform: translateY(-50%);
        background: no-repeat center/contain
    }

    .flo-nav>li.line>a>span {
        padding-left: 2em
    }

    .flo-nav>li.line>a>span::before {
        background-image: url(../img/common/ico-line.png)
    }

    .flo-nav>li.booking>a>span {
        padding-left: 2em
    }

    .flo-nav>li.booking>a>span::before {
        background-image: url(../img/common/ico-booking.svg)
    }
}