@charset "UTF-8";

:root {
    --sp-max-width: 730px;
    --section-gutter: 18px;

    --color-wine-red: #9D4545;
    --color-brown-dark: #9F856A;

    --color-season-blue: #89AFBC;
    --color-season-blue-light: #89AFBC33;
    --color-season-red: #C67171;
    --color-season-red-light: #C6717133;
    --color-season-gray: #929292;
    --color-season-gray-light: #92929226;
}

ul {
    list-style: none;
}

h2 {
    font-size: 40px;
    font-family: 'Petrona', serif;
    text-align: center;
    color: #967E76;
    scroll-margin-top: 80px;
}

body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    color: #333;
    font-size: 16px;
}


.pc-wrapper {
    background-image: url("/image/base/back_img.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-flow: row;
    height: 100vh;
    background-color: var(--color-gold-high-light);
}

.pc-wrapper .pc-side {
    display: flex;
    justify-content: center;
    text-align: center;

    .shop-list {
        margin-top: 300px;
    }
}

.pc-side-link {
    width: 100%;
    max-width: var(--sp-max-width);
    z-index: 1000;
}


.pc-side-link ul {
    padding: 0;
    margin: 100px 0;
}

.pc-side-link li {
    margin: 10px 0;
    font-family: 'Petrona', serif;
    font-size: 30px;
}

.pc-side-link li a {
    text-decoration: none;
    color: #9F856A;
}

.pc-side>div {
    display: none;
    padding: 10px var(--section-gutter);
}

.pc-side-info {
    width: 100%;
    max-width: var(--sp-max-width);
    z-index: 1000;
    margin-top: 300px;
}

.pc-side-info>div>div {
    font-family: 'Noto Sans JP', sans-serif;
}

.pc-side-info>div>div p {
    margin: 0;
}

.pc-side-info>div>p {
    font-family: 'Noto sarif JP', sans-serif;
    font-size: 32px;
    text-align: center;
}

.pc-side-info .info {
    width: 80%;
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
}

.pc-side-info dl div {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 4rem;
    border-bottom: 2px solid #D0B8A8;
    padding-bottom: 10px;
    margin-top: 10px;
    align-items: center;
    font-family: 'zen old mincho', serif;
}

.pc-side-info dt {
    white-space: nowrap;
    text-align: left;
    font-weight: normal;
    padding-left: 20px;
}

.pc-side-info dd {
    margin: 0;
    text-align: center;
}



.container-fluid>* {
    margin-left: calc(var(--custom-minus-gutter-x) * -.5);
    margin-right: calc(var(--custom-minus-gutter-x) * -.5);
}

/* フォント */
.font-Zen {
    font-family: 'Zen Old Mincho', serif;
}

.font-noto {
    font-family: 'Noto Sans JP', sans-serif;
}

.font-roboto {
    font-family: 'Roboto', sans-serif;
}

/* SP */
.sp-header {
    background-color: #EEE9E1;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    height: 60px;
    max-width: var(--sp-max-width);
    display: flex;
    align-items: center;

    &>p {
        color: #000000;
        font-family: 'Noto Serif JP';

    }
}

.sp-header a,
.sp-header a img {
    width: 60px;
    max-height: 100%;
}


.sp-container {
    max-width: var(--sp-max-width);
}

.sp-container section {
    padding-left: var(--section-gutter);
    padding-right: var(--section-gutter);
}

.sp-container header {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 1000;
}

.sp-container header img.logo {
    height: 46px;
}

.sp-wrapper {
    overflow-y: auto;
    height: 100vh;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    position: relative;
    box-shadow: 0px 4px 20px 0px #0000000D;

}

.sp-wrapper::-webkit-scrollbar {
    display: none;
}


.hamburger {
    margin: 0 10px 5px 15px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.hamburger.animate {
    transform: rotate(90deg) scale(1.1);
    opacity: 0.7;
}

.menu {
    position: absolute;
    top: 59px;
    width: 100%;
    background: #EEE9E1;
    max-width: var(--sp-max-width);
    z-index: 1000;
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s linear;
}

.menu ul {
    padding: 0;
    margin: 20px 0 0 90px;
}

.menu li {
    margin: 10px 0;
    font-family: 'Petrona', serif;
    font-size: 20px;
}

.menu li a {
    text-decoration: none;
    color: #9F856A;
}

.menu li a::after {
    content: url("/image/base/arrow.svg");
    padding-left: 5px;
}

.menu.active {
    pointer-events: auto;
    opacity: 1;
}

.backimg {
    position: relative;
    background-image: url("/image/home/sp_back.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    padding-top: 40px;
    background-color: #ffffff;
}


.backimg>* {
    position: relative;
    z-index: 2;
}

/* 予約 */

.a-btn {
    display: inline-block;
    padding: 5px 40px;
    font-size: 14px;
    text-decoration: none;
    font-family: 'Zen Old Mincho', serif;
    border: none;
    cursor: pointer;
    text-align: center;
    margin: 40px 0;
    font-size: 25px;
    position: relative;
    width: 320px;
}

.a-btn::after {
    content: url("/image/base/vector.svg");
    position: absolute;
    right: 10px;
    top: 45%;
    transform: translateY(-50%);
    pointer-events: none;
}

.r-hedder-btn {
    position: relative;
    background-color: #C5705D;
    color: #ffffff;
    padding: 8px 20px;
    font-size: 14px;
    text-decoration: none;
    font-family: 'Zen Old Mincho', serif;
    border: none;
    cursor: pointer;
    text-align: center;
}

.r-hedder-btn-pc {
    position: relative;
    background-color: #C5705D;
    color: #ffffff;
    padding: 8px 35px;
    font-size: 14px;
    text-decoration: none;
    font-family: 'Zen Old Mincho', serif;
    border: none;
    cursor: pointer;
    text-align: center;
}

.vector-small::after {
    content: url("/image/base/small_vector.svg");
    position: absolute;
    padding-right: -5px;
    right: 6px;
    top: 15%;
    pointer-events: none;
}

.vector:after {
    content: url("/image/base/vector.svg");
    position: absolute;
    padding-right: -5px;
    right: 15px;
    top: 9%;
    pointer-events: none;
}

/* SNS */
.sns-link {
    display: flex;
    justify-content: end;
    gap: 5px;
    margin: 0 var(--section-gutter) 20px 0;
    align-items: center;
}

.sns-link a,
.sns-link a img {
    width: auto;
}

.footer-sns-link {
    display: flex;
    justify-content: space-around;
    gap: 10px;
    margin: 30px auto;
    align-items: center;
}

.footer-sns-link a {
    text-decoration: none;
}

.copyLite {
    text-align: center;
    display: flex;
    justify-content: space-around;
    padding-bottom: 40px;
}

footer.backimg {
    padding-bottom: 40px;
}

.copyLite a {
    color: #333333;
}

/* スライダー */
section#intro .slider img {
    width: 95%;
    margin: 0 auto;
    height: auto;
    display: block;
}

section#intro .slick-slide {
    height: auto !important;
}

.slider {
    margin-left: calc(var(--section-gutter) * -1);
    margin-right: calc(var(--section-gutter) * -1);
}


/* 共通 */

.b-left {
    margin: 0 0 0 auto;
}

.ms-6 {
    margin-left: 4.5rem !important;
}

.ms-7 {
    margin-left: 6rem !important;
}

.mt-7 {
    margin-top: 6rem !important;
}

.font-28px {
    font-size: 28px;
}

/* footer */
.footer-icon {
    width: 170px;

}

.footer-link {
    text-align: center;
    margin-top: 50px;
}

.footer-link ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    list-style: none;
    padding: 0;
    gap: 10px;
}

.footer-link li a {
    text-decoration: none;
    color: #9F856A;
}

.font-info {
    margin-right: 45px;
}

.font-info a {
    text-decoration: none;
    color: #333333;
}

.footer-link li a::after {
    content: url("/image/base/arrow.svg");
    padding-left: 5px;
}

@container (width <=600px) {
    /* footer {
        padding: 60px 48px;
    }

    footer .container {
        padding: 0 !important;
    }

    footer .footer-btn {
        flex: 0 0 100% !important;
    }

    .footer-btn-1 {
        margin-top: 40px;
        margin-bottom: 20px;
    } */

    ul.sitemap {
        display: flex;
        flex-flow: column !important;
        gap: 1rem;
    }

    .sitemap li {
        margin-bottom: 0;
    }

    .sp-wrapper {
        max-width: 480px;
    }

    /* .sp-header {
        max-width: 480px;
    }

    .menu {
        max-width: 480px;
    } */

    .pc-wrapper .pc-side {
        display: none;
    }
}

/* @media (max-width: 599px) {
    .menu {
        max-width: 480px;
    }
} */


@media (min-width: 600px) {

    :root {
        --section-gutter: 9px;
    }


    .pc-wrapper .pc-side {
        position: relative;
        flex: 1 1 calc(100vw - var(--sp-max-width));
        overflow: hidden;
    }





}


@media (min-width: 768px) {}

@media (min-width: 1199px) {

    .pc-side>div {
        display: block;
    }


}

/* アニメーションの定義 */
@keyframes fadeInFromBottom {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}


@keyframes tilt-in-right {
    0% {
        transform: rotateX(30deg) translateX(300px) skewX(-30deg);
        opacity: 0;
    }

    100% {
        transform: rotateX(0deg) translateX(0) skewX(0deg);
        opacity: 1;
    }
}

@keyframes tilt-in-left {
    0% {
        transform: rotateX(30deg) translateX(-300px) skewX(30deg);
        opacity: 0;
    }

    100% {
        transform: rotateX(0deg) translateX(0) skewX(0deg);
        opacity: 1;
    }
}



.anim {
    opacity: 0;
}

.anim.is-animated {
    animation: fadeInFromBottom 0.8s ease-out forwards;
}

.anim-left {
    transform: translateX(-30px);
}

.anim-left.is-animated {
    animation: slideInLeft 0.8s ease-out forwards;
}

.anim-right {
    transform: translateX(30px);
}

.anim-right.is-animated {
    animation: slideInRight 0.8s ease-out forwards;
}


.tilt-in-right {
    opacity: 0;
    transform: rotateX(30deg) translateX(300px) skewX(-30deg);
}

.tilt-in-right.is-animated {
    animation: tilt-in-right 0.8s ease-out forwards;
}

.tilt-in-left {
    opacity: 0;
    transform: rotateX(30deg) translateX(-300px) skewX(30deg);
}

.tilt-in-left.is-animated {
    animation: tilt-in-left 0.8s ease-out forwards;
}


.font-color-gold {
    color: #967E76;
    font-size: 30px;
    font-family: 'Noto Serif JP', sans-serif;
}

.font-serif {
    font-family: 'Noto Serif JP', sans-serif !important;
}


.shop-list {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;


    h2 {
        font-size: 2.5rem;
        font-weight: bold;
        margin-bottom: 40px;
        text-align: center;
        color: #967E76;
        font-family: 'Petrona', serif;
    }

    .shop-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }

    .shop {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        background-color: #F1F2F4;
        overflow: hidden;
        border-radius: 5px;
        padding: 24px;
        box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
        color: #967E76;
        transition: transform 0.3s, border 0.3s, background 0.3s;
        border: 1px solid #7A6652;
        align-items: center;

        .pt-10 {
            padding-top: 10px;
        }

        &:hover {
            transform: scale(1.05);
            border-color: #FFFFFF;
            background: #D7C0AE;
        }

        a {
            text-decoration: none;
            width: auto;
        }

        h3 {
            font-size: 1.75rem;
            font-weight: 600;
            margin-bottom: 16px;
            color: #967E76;
            font-family: 'Petrona', serif;
            text-decoration: none;
            border-bottom: 2px solid #967E76;
            padding-bottom: 4px;
            padding: 0px 20px;
        }

        .sns-link {
            justify-content: center;
            margin: 0;
        }
    }
}