/* ---- root ---- */
:root {
    --rv-pc-header-height: 85px;
    --rv-sp-header-height: 17.95vw;

    --rv-font-notoSans: 'Noto Sans JP', "Yu Gothic", YuGothic, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    --rv-font-zenkaku: "Zen Kaku Gothic New", 'Noto Sans JP', "Yu Gothic", YuGothic, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    --rv-font-lato: "Lato", 'Noto Sans JP', "Yu Gothic", YuGothic, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    --rv-font-openSans: "Open Sans", 'Noto Sans JP', "Yu Gothic", YuGothic, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    --rv-font-lusitana: "Lusitana", serif;
    --rv-font-shipporiMincho: "Shippori Mincho", serif;

    --rv-transition: .3s;

    --rv-bg-main: #FBF9F6;
    --rv-bg-footer: #9F8450;
    --rv-bg-top: #F4EFE4;

    --rv-black: #000;
    --rv-gray: #EBEBEB;
    --rv-gray2: #808080;
    --rv-gray3: #E9E9E9;
    --rv-white: #fff;
    --rv-gold: #9F8450;
    --rv-goldRGB: 159, 132, 80;
    --rv-gold2: #5F4F30;
    --rv-gold2RGB: 95, 79, 48;
    --rv-gold3: #E9DFCA;
    --rv-gold4: #F4EFE4;
    --rv-gold4RGB: 244, 239, 228;
    --rv-gold5: #C9AF7A;

    --rv-zindex-header: 9999;
    --rv-zindex-sp-header-logo: 1;
    --rv-zindex-top-category-modal: 10000;
    --rv-zindex-filter: 10000;
    --rv-zindex-filterITems: 3s;
    --rv-zindex-sort: 2;
    --rv-zindex-goodsdetail-fixedbtn: 50;

    /* animation */
    --rv-imgHoverExpand-transition: scale .75s ease;
    --rv-imgHoverExpand-scale: 1.025;
    --rv-rotateBorderGradient: rotateBorderGradient 1.5s linear infinite normal;
    --rv-shine: shine 1s;
}

/* ---- property ---- */
@property --gradient-angle {
    syntax: "<angle>";
    inherits: true;
    initial-value: 0deg;
}

/* ---- keyframes ---- */
@keyframes rotateBorderGradient {
    0% {
        --gradient-angle: 0deg;
    }

    to {
        --gradient-angle: 180deg;
    }
}

/* ---- Utils ---- */
@media screen and (max-width: 767px) {
    .sp {
        display: block !important;
    }
    .pc {
        display: none !important;
    }
}
@media screen and (min-width: 768px) {
    .sp {
        display: none !important;
    }
    .pc {
        display: block !important;
    }
}

/* ---- base ---- */
body {
    font-family: var(--rv-font-zenkaku);
    font-weight: 400;
    color: var(--rv-black);
    line-height: 1.7;
    background-color: var(--rv-bg-main);
}
.mainframe_ a:hover {
    opacity: 1;
}
@media (hover: hover) {
    .mainframe_ a:hover {
        opacity: .3;
    }
}

@media screen and (max-width: 767px) {
    html {
        font-size: calc(10 / 390 * 100 * 1vw);
    }
    body {
        font-size: 1.4rem;
    }
    .wrapper_ {
        padding-top: var(--rv-sp-header-height);
    }
}

@media screen and (min-width: 768px) {
    body {
        font-size: 14px;
    }
    .wrapper_ {
        padding-top: var(--rv-pc-header-height);
    }
}

/* Page Top */
#pageTopBtn {
    display: none !important;
}

/* ---- BUTTONS ---- */
/* gold button with gradation */
.rv-button-gold-gradation {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.4rem;
    font-family: var(--rv-font-lusitana);
    color: var(--rv-gold2);
    font-weight: 400;
    line-height: 1;
    letter-spacing: .02em;
    text-decoration: none;
    background: transparent;
    border-radius: 50px;
    overflow: hidden;
    transition: var(--rv-transition);
    position: relative;
}
.rv-button-gold-gradation::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50px;
    border: 1px solid transparent;
    background: linear-gradient(var(--gradient-angle), rgb(var(--rv-goldRGB)) 0%,rgb(var(--rv-gold4RGB)) 49%,rgb(var(--rv-goldRGB)) 100%) border-box border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) border-box;
    -webkit-mask-composite: destination-out;
    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) border-box;
    mask-composite: exclude;
}
.rv-button-gold-gradation:not(:hover)::before {
    animation: var(--rv-rotateBorderGradient);
}
@media (hover: hover) {
    .rv-button-gold-gradation:hover {
        color: var(--rv-white);
        background-color: var(--rv-gold);
        opacity: 1 !important;
    }
}
@media screen and (min-width: 768px) {
    .rv-button-gold-gradation {
        font-size: 14px;
    }
}
/* gold button with gradation - arrow */
.rv-button-gold-gradation.-arrow {
    padding-right: 1rem;
}
.rv-button-gold-gradation.-arrow::after {
    display: block;
    content: "";
    width: 1.4rem;
    height: .8rem;
    background: url(../../common/img/ic-arrow-right-gold.png) no-repeat center / contain;
    position: absolute;
    top: 50%;
    right: 2.6rem;
    translate: 0 calc(-50% - 1px);
    transition: var(--rv-transition);
}
@media (hover: hover) {
    .rv-button-gold-gradation.-arrow:hover::after {
        background-image: url(../img/ic-arrow-right-white.png);
    }
}
@media screen and (min-width: 768px) {
    .rv-button-gold-gradation.-arrow {
        padding-right: 10px;
    }
    .rv-button-gold-gradation.-arrow::after {
        width: 14px;
        height: 8px;
        right: 26px;
    }
}

/* white button with gradation */
.rv-button-white-gradation {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.4rem;
    font-family: var(--rv-font-lusitana);
    color: var(--rv-white);
    font-weight: 400;
    line-height: 1;
    letter-spacing: .02em;
    text-decoration: none;
    background: rgba(255, 255, 255, .01);
    border-radius: 50px;
    overflow: hidden;
    position: relative;
}
.rv-button-white-gradation::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50px;
    border: 1px solid transparent;
    background: linear-gradient(var(--gradient-angle), rgb(255, 255, 255) 0%, rgba(255, 255, 255, .1) 49%, rgb(255, 255, 255) 100%) border-box border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) border-box;
    -webkit-mask-composite: destination-out;
    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) border-box;
    mask-composite: exclude;
}
.rv-button-white-gradation:not(:hover)::before {
    animation: var(--rv-rotateBorderGradient);
}
@media (hover: hover) {
    .rv-button-white-gradation:hover {
        background-color: var(--rv-gold);
        opacity: 1 !important;
    }
    .rv-button-white-gradation:hover::before {
        border: 1px solid var(--rv-gold);
    }
}
@media screen and (min-width: 768px) {
    .rv-button-white-gradation {
        font-size: 14px;
    }
}
/* white button with gradation - arrow */
.rv-button-white-gradation.-arrow {
    padding-right: 1rem;
}
.rv-button-white-gradation.-arrow::after {
    display: block;
    content: "";
    width: 1.4rem;
    height: .8rem;
    background: url(../../common/img/ic-arrow-right-white.png) no-repeat center / contain;
    position: absolute;
    top: 50%;
    right: 2.6rem;
    translate: 0 -50%;
}
@media screen and (min-width: 768px) {
    .rv-button-white-gradation.-arrow {
        padding-right: 10px;
    }
    .rv-button-white-gradation.-arrow::after {
        width: 14px;
        height: 8px;
        right: 26px;
    }
}

/* swiper Prev button and Next button */
.rv-swiper-button.swiper-button-prev,
.rv-swiper-button.swiper-button-next {
    width: 60px;
    height: 60px;
    background-size: 22px auto;
    border-radius: 50%;
    overflow: hidden;
    transition: var(--rv-transition);
}
.rv-swiper-button.swiper-button-prev {
    background-image: url(../../common/img/ic-arrow-left-gold.png);
}
.rv-swiper-button.swiper-button-next {
    background-image: url(../../common/img/ic-arrow-right-gold.png);
}
@media (hover: hover) {
    .rv-swiper-button.swiper-button-prev:hover,
    .rv-swiper-button.swiper-button-next:hover {
        background-color: var(--rv-gold);
    }
    .rv-swiper-button.swiper-button-prev:hover {
        background-image: url(../../common/img/ic-arrow-left-white.png);
    }
    .rv-swiper-button.swiper-button-next:hover {
        background-image: url(../../common/img/ic-arrow-right-white.png);
    }
}
.rv-swiper-button.swiper-button-prev::before,
.rv-swiper-button.swiper-button-next::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    border: 1px solid transparent;
    background: linear-gradient(var(--gradient-angle), rgb(var(--rv-goldRGB)) 0%, rgb(var(--rv-gold4RGB)) 49%, rgb(var(--rv-goldRGB)) 100%) border-box border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) border-box;
    -webkit-mask-composite: destination-out;
    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) border-box;
    mask-composite: exclude;
}
.rv-swiper-button.swiper-button-prev:not(:hover)::before,
.rv-swiper-button.swiper-button-next:not(:hover)::before {
    animation: var(--rv-rotateBorderGradient);
}
.rv-swiper-button.swiper-button-next.swiper-button-disabled,
.rv-swiper-button.swiper-button-prev.swiper-button-disabled {
    opacity: 0;
}

/* ---- タイトル ---- */
/* h1 */
.common_Tit1_ {
    font-family: var(--rv-font-lusitana);
    line-height: 1;
    text-align: left;
    padding: 0;
    position: static;
    margin-left: auto;
    margin-right: auto;
}
.common_Tit1_:after {
    display: none;
}
@media screen and (max-width: 767px) {
    .common_Tit1_ {
        font-size: 3.2rem;
        margin-top: 10rem;
        margin-bottom: 6rem;
        padding: 0 2rem;
    }
}
@media screen and (min-width: 768px) {
    .common_Tit1_ {
        font-size: 56px;
        margin-top: 120px;
        margin-bottom: 80px;
        padding: 0 80px;
    }
}
/* h2 */
.common_Tit2_b_ {
    text-align: left;
    color: var(--rv-black);
}
.common_Tit2_b_ > span {
    text-align: left;
}
.common_Tit2_b_:after {
    display: none;
}

/* ---- 閲覧履歴 ---- */
#block_of_itemhistory {
    display: none !important;
}

/* ---- パンくず ---- */
.navitopicpath_ {
    margin-top: 12rem;
    margin-bottom: 0;
}
@media screen and (min-width: 768px) {
    .navitopicpath_ {
        margin-top: 100px;
    }
}