@charset "UTF-8"; /*
*/
@keyframes scroll {
    0% {
        transform: translateY(0px);
    }

    100% {
        transform: translateY(7px);
    }
}

.main_img {
    position: relative;
    margin-right: max(5vw, 25px);
    margin-bottom: var(--m-xxl);
    margin-left: var(--m-xs);
    border-radius: var(--m-xs);
    overflow: hidden;
    height: 100%;
}

.main_img figure {
    position: relative;
    /* padding-top: 70%; */
    min-height: 650px;
    /* height: calc(100vh - var(--m-xs)*2); */
    /* height: 100vh; */
}

.main_img figure img {
    width: 100%;
    height: 119%;
    object-fit: cover;
    position: absolute;
    left: 0;
    bottom: 0;
    object-position: 19% bottom;
}

.main_img .text_box {
    position: absolute;
    top: 45%;
    left: 70%;
    transform: translate(-50%, -50%);
    /* text-shadow: 0 0 20px rgb(0 0 0 / 10%); */
    text-shadow: 0 0 2px rgb(0 0 0 / 7%);
}

.main_img .text_box h2 {
    font-size: clamp(1.3rem, 2vw, 3rem);
    color: #3d444a;
    letter-spacing: 0.02em;
    text-wrap: nowrap;
    display: block;
    line-height: 1.5;
}

.main_img .text_box h2 span, .main_img .text_box h3 {
    opacity: 0;
    -webkit-transition: opacity 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3s;
    transition: opacity 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 3s;
}

.main_img .text_box h2.active span, .main_img .text_box h2.active + h3 {
    opacity: 1;
}

.main_img .text_box h2.active span:nth-of-type(1) {
    transition-delay: 0.6s;
}

.main_img .text_box h2.active span:nth-of-type(2) {
    transition-delay: 1.8s;
    display: inline-block;
}

.main_img .text_box h2.active span:nth-of-type(3) {
    transition-delay: 3.2s;
    display: inline-block;
}

.main_img .text_box h2.active span:nth-of-type(4) {
    transition-delay: 4.4s;
}

.main_img .text_box h2.active + h3 {
    transition-delay: 6.2s;
    font-size: var(--f-r);
    /* font-size: clamp(1rem, 1.3vw, 1.7rem); */
    margin-top: var(--m-r);
    /* margin-left: var(--m-xxs); */
    color: #6a736f;
    white-space: pre;
}

.main_img .rotate {
    position: absolute;
    bottom: 10%;
    right: 5%;
    color: #fff;
    display: block;
}

.rotate {
    display: block;
    position: relative;
    width: 100px;
    height: 100px;
}

.rotate::before {
    content: "";
    width: 6px;
    height: 32px;
    background-color: currentColor;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 50%;
}

.rotate::after {
    position: absolute;
    content: "";
    width: 30px;
    height: 30px;
    border: 6px solid currentColor;
    border-left: none;
    border-top: none;
    -webkit-transform: rotate(45deg) translate(-50%, -50%);
    transform: rotate(45deg) translate(-50%, -50%);
    transform-origin: left top;
    top: 50%;
    left: 50%;
}

.rotate.right::before {
    width: 48px;
    height: 8px;
}

.rotate.right::after {
    border: 8px solid currentColor;
    border-bottom: none;
    border-left: none;
}

.circleText {
    overflow: visible;
    animation: rotation 18s linear infinite;
    width: 100%;
    height: 100%;
}

.circleText__circle {
    fill: none;
}

.circleText__text {
    fill: #fff;
    font-size: 10px;
    letter-spacing: 0.08em;
    font-family: var(--f-en);
    text-transform: uppercase;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/*
## メッセージ
*/
.section-message {
    background: #f4f2f0;
}

.section-message .column {
    align-items: flex-start;
    margin-left: var(--m-fix);
    display: flex;
}

.section-message .text_box {
    flex: 1;
    background: #fff;
    padding: var(--m-m);
    /* padding-left: 10%; */
    margin-top: 5rem;
    /* margin-left: -5%; */
    border-radius: var(--m-xxs);
    /* margin-right: 1rem; */
    z-index: 1;
}

.section-message figure {
    position: relative;
    flex-basis: 60%;
    padding-top: 40%;
    min-height: 240px;
    margin-left: var(--m-xs);
    overflow: hidden;
    margin-right: -5%;
    z-index: 0;
    border-radius: var(--m-xxs);
    /* margin-bottom: 5rem; */
}

.section-message figure::before {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, #fff 10%, rgb(255 255 255 / 0%) 45%);
    z-index: 1;
}

.section-message figure img {
    height: 100%;
    object-fit: cover;
    object-position: top center;
    position: absolute;
    top: 0;
    left: 0;
}

.section-message figure figcaption {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 1;
    line-height: 1.5;
    padding: 0 var(--m-xs);
}

.section-message figure figcaption em {
    display: block;
    font-style: normal;
}

.section-message figure figcaption strong {
    margin: 0.5em;
}

/*
## メニュー
*/
section.section-menu {
    padding-bottom: 0;
    background: #f2f3f5;
    overflow: hidden;
    position: relative;
}

section.section-menu .column {
    padding-left: initial;
    align-items: stretch;
    z-index: 0;
    position: relative;
    margin-right: var(--m-fix);
    display: flex;
    justify-content: space-between;
    gap: 3rem;
}

section.section-menu .column > figure {
    position: relative;
    flex-basis: 45%;
    flex: 1;
}

.section-menu .column > figure img {
    object-fit: cover;
    object-position: 40% bottom;
    position: absolute;
    bottom: 0;
    left: 0;
    overflow: visible;
    height: 130%;
}

.section-menu .u-inner .text_box {
    flex: 1;
    margin-bottom: var(--m-xl);
    z-index: 1;
}

.section-menu .u-inner .text_box h4 {
    font-size: var(--f-m);
    margin-bottom: var(--m-xxs);
    margin-top: var(--m-m);
}

section.section-menu .text_box .price {
}

section.section-menu .text_box .price .row {
    display: flex;
    border-top: 1px solid #ddd;
    justify-content: space-between;
    align-items: baseline;
    padding: var(--m-xs);
}

section.section-menu .text_box .price .row:last-child {
    border-bottom: 1px solid #ddd;
}

section.section-menu .text_box .price .row dd {
    font-family: var(--f-en);
    font-size: var(--f-r);
    color: #c39438;
}

section.section-menu .text_box .note {
    text-align: right;
    font-size: var(--f-xs);
    margin-top: var(--m-xs);
}

section.section-menu .text_box .price caption {
    color: #ba975f;
    font-size: max(2vw, 1.5rem);
    text-align: left;
}

.section-menu .text_box figure {
    flex-basis: 40%;
    margin-right: var(--m-r);
}

.section-menu .text_box figure figcaption {
    font-size: 11px;
    line-height: 1.5;
    color: var(--c-02);
    margin-left: 13%;
}

.section-menu .text_box > p {
    flex: 1;
}

.section-menu h3 strong {
    color: var(--c-03);
    display: inline-block;
    font-weight: var(--w-r);
}

/*
## おすすめ商品
*/
@keyframes floating-y {
    0% {
        transform: translateY(-30%);
    }

    100% {
        transform: translateY(30%);
    }
}

section.section-product .list {
    list-style: none;
    display: flex;
    justify-content: space-between;
    margin: var(--m-l) auto;
    width: 85%;
}

section.section-product .list li {
    flex-basis: 28%;
    width: 100%;
}

section.section-product .list li:nth-child(2) {
    margin: 5rem 0;
}

section.section-product .list li:last-child {
    align-self: flex-end;
}

section.section-product .list li figure {
    width: 100%;
    padding-top: 100%;
    position: relative;
    box-shadow: 0 20px 30px rgb(0 0 0 / 10%);
}

section.section-product .list li figure:before {
    /* content: ""; */
    padding-top: 100%;
    display: block;
}

section.section-product .list li figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    border-radius: var(--m-xxs);
}

section.section-product .list li figure figcaption {
    position: absolute;
    bottom: -15px;
    right: 10px;
    font-size: 1.6em;
    font-style: italic;
    mix-blend-mode: multiply;
    color: #eead63;
    line-height: 1;
    font-weight: bold;
}

.section-product .list li h3 {
    display: flex;
    margin: var(--m-m) 0;
    font-size: var(--f-m);
}

.section-product .list li h3 em {
    color: var(--c-03);
    position: relative;
    line-height: 1.1;
    text-align: left;
}

.section-product .list li h3 small {
    display: block;
}

.section-product .list li h3 em b {
    font-size: 1.8em;
    display: block;
    font-weight: 600;
}

.section-product .list li h3 em:after {
    content: "";
    width: 3em;
    height: 1px;
    background-color: #ccc;
    display: block;
    transform: rotate(135deg);
    transform-origin: bottom right;
    position: relative;
    top: 0.5em;
    right: 1em;
}

.section-product .list li h3 strong {
    position: relative;
    font-size: 0.9em;
    line-height: 1.3;
    font-weight: var(--w-m);
    padding-top: 3em;
}

section.section-product .list li p {
    margin-top: auto;
}

@keyframes verticalScroll {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-50%);
    }
}

@media screen and (max-width: 1024px) {
    .gBody {
    }
}

@media screen and (max-width: 767px) {
    .gBody {
    }

    .main_img {
        margin: var(--m-xs);
        /* margin: initial; */
    }

    .main_img figure img {
        width: 100%;
        height: 100%;
        bottom: 0%;
        top: initial;
        object-position: 25% bottom;
    }

    .main_img .text_box {
        top: 47%;
        left: 72%;
        width: 44%;
        /* left: initial; */
    }

    .main_img .text_box h2.active span:nth-of-type(2) {
        display: block;
        margin-left: 0.2em;
    }

    .main_img .text_box h2.active span:nth-of-type(3) {
        display: block;
        margin-left: 1.5em;
        margin-top: 0.4em;
    }

    .main_img .text_box h2.active span:nth-of-type(4) {
        margin-left: 1.9em;
    }

    .main_img .text_box h2.active + h3 {
        margin-left: 3.7em;
        white-space: normal;
    }

    /*
    ##　メッセージ
    */
    .section-message .u-inner .text_box {
        order: 2;
        margin: initial;
    }

    .section-message .column {
        margin: initial;
        align-items: flex-start;
    }

    .section-message .u-inner figure {
        margin-left: initial;
        width: 100%;
        order: 1;
    }

    /*
    ##　メニュー
    */
    section.section-menu .column {
        margin-right: initial;
    }

    .section-menu .u-inner figure::before {
        background: linear-gradient(180deg, #ffffff00 60%, #ffffff 100%);
    }

    .section-menu .text_box {
        flex-direction: column;
    }

    .section-menu .text_box > figure {
        width: 80%;
        margin: 0 auto var(--m-m);
    }

    section.section-menu .column > figure {
        margin-top: -10vh;
        width: 130%;
    }

    .section-menu .column > figure img {
        position: relative;
    }

    section.section-product .list {
        flex-direction: column;
    }
}

@media print {
    .main_img.sticky .slide {
        position: relative!important;
        right: 0px;
    }

    .main_img {
        height: 80vh;
    }

    section.message.sticky.end > figure {
        position: absolute;
        top: initial;
    }

    .message figure {
        max-height: 100%;
    }

    .contents .message {
        padding-top: initial;
    }
}