@charset "UTF-8";
@import url(https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap);
@import url(https://fonts.googleapis.com/css?family=Noto+Sans+JP:100,200,300,400,500,600,700&display=swap);
@import url(https://fonts.googleapis.com/css?family=Noto+Serif+JP:100,200,300,400,500,600,700&display=swap);
body, html {
    overflow-x: hidden;
    transition:none !important
}

body {
    position: relative;
    width: 100%;
    margin: 0 auto;
    font-family: "Noto Sans JP", "游ゴシック体", "ヒラギノ角ゴシック", YuGothic, "Hiragino Sans", sans-serif;
    color:#4c4948
}

dd, div, dl, dt, h1, h2, h3, h4, h5, img, li, ol, p, picture, section, span, table, td, th, tr, ul, video {
    padding: 0;
    margin:0
}

li {
    list-style:none
}

label[for] {
    cursor:unset
}

.anchor, .btn, .trg, select {
    cursor:pointer
}

@media (width > = 769px) {
    .campain-lp .sp {
        display:none !important
    }
}

@media (width <= 768px) {
    .campain-lp .pc {
        display:none !important
    }
}

.campain-lp img {
    display: block;
    vertical-align:bottom
}

main {
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    overflow: hidden;
    line-height:1.5
}

.header {
    z-index: 99999;
    width: 100%;
    max-width: 750px;
    max-height: none;
    margin:0 auto
}

.header * {
    box-sizing:border-box
}

.header .inner {
    width: 100%;
    line-height:1
}

.header .inner ul {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    background:#e7f6ff
}

.bound-in, .fade-down, .fade-in, .fade-left, .fade-right, .fade-up, .left-in-img, .zoom-in {
    opacity:0
}

.fade-down.scrollin, .fade-in.scrollin, .fade-left.scrollin, .fade-right.scrollin, .fade-up.scrollin, .left-in-img.scrollin, .scrollin .bound-in, .scrollin .fade-down, .scrollin .fade-in, .scrollin .fade-left, .scrollin .fade-right, .scrollin .fade-up, .scrollin .left-in-img, .scrollin .zoom-in, .zoom-in.scrollin {
    opacity: 1;
    -webkit-animation-duration: .8s;
    animation-duration:.8s
}

.fade-in.scrollin, .scrollin .fade-in {
    -webkit-animation-name: fade-in;
    animation-name: fade-in;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-duration: 1.2s;
    animation-duration:1.2s
}

@-webkit-keyframes fade-in {
    from {
        opacity:0
    }

    to {
        opacity:1
    }
}

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

    to {
        opacity:1
    }
}

.fade-up.scrollin, .scrollin .fade-up {
    -webkit-animation-name: fade-up;
    animation-name:fade-up
}

@-webkit-keyframes fade-up {
    from {
        opacity: 0;
        transform:translateY(3em)
    }

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

@keyframes fade-up {
    from {
        opacity: 0;
        transform:translateY(3em)
    }

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

.fade-down.scrollin, .scrollin .fade-down {
    -webkit-animation-name: fade-down;
    animation-name:fade-down
}

@-webkit-keyframes fade-down {
    from {
        opacity: 0;
        transform:translateY(-3em)
    }

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

@keyframes fade-down {
    from {
        opacity: 0;
        transform:translateY(-3em)
    }

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

.fade-left.scrollin, .scrollin .fade-left {
    -webkit-animation-name: fade-left;
    animation-name:fade-left
}

@-webkit-keyframes fade-left {
    from {
        opacity: 0;
        transform:translateX(-20%)
    }

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

@keyframes fade-left {
    from {
        opacity: 0;
        transform:translateX(-20%)
    }

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

.fade-right.scrollin, .scrollin .fade-right {
    -webkit-animation-name: fade-right;
    animation-name:fade-right
}

@-webkit-keyframes fade-right {
    from {
        opacity: 0;
        transform:translateX(20%)
    }

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

@keyframes fade-right {
    from {
        opacity: 0;
        transform:translateX(20%)
    }

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

.scrollin .zoom-in, .zoom-in.scrollin {
    -webkit-animation-name: zoom-in;
    animation-name:zoom-in
}

@-webkit-keyframes zoom-in {
    from {
        opacity: 0;
        transform:scale(0)
    }

    to {
        opacity: 1;
        transform:scale(1)
    }
}

@keyframes zoom-in {
    from {
        opacity: 0;
        transform:scale(0)
    }

    to {
        opacity: 1;
        transform:scale(1)
    }
}

.bound-in.scrollin, .scrollin .bound-in {
    -webkit-animation-name: bound-in;
    animation-name: bound-in;
    -webkit-animation-duration: 1.8s;
    animation-duration:1.8s
}

@-webkit-keyframes bound-in {
    0%, 40%, 60%, 80% {
        transform:scale(1)
    }

    50%, 70% {
        transform:scale(.95)
    }

    0% {
        opacity:0
    }

    100% {
        opacity:1
    }
}

@keyframes bound-in {
    0%, 40%, 60%, 80% {
        transform:scale(1)
    }

    50%, 70% {
        transform:scale(.95)
    }

    0% {
        opacity:0
    }

    100% {
        opacity:1
    }
}

.left-in-img.scrollin, .scrollin .left-in-img {
    -webkit-animation-name: anime_left_to_right;
    animation-name: anime_left_to_right;
    -webkit-animation-duration: .6s;
    animation-duration: .6s;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-direction: normal;
    animation-direction: normal;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode:forwards
}

@-webkit-keyframes anime_left_to_right {
    0% {
        -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
        clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
        opacity:0
    }

    100% {
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        opacity:1
    }
}

@keyframes anime_left_to_right {
    0% {
        -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
        clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
        opacity:0
    }

    100% {
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        opacity:1
    }
}

.info-wrap {
    width: 100%;
    max-width: 750px;
    padding: 4% 0;
    margin: 0 auto;
    line-height: 1.5;
    background-color:#fff
}

.info-wrap .top_btn_area {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 15;
    width: 750px;
    margin:auto
}

@media (width <= 750px) {
    .info-wrap .top_btn_area {
        width:100%
    }
}

.info-wrap .top_btn_area .top_btn {
    position: absolute;
    right: 0;
    bottom: 0;
    left: auto;
    display: block;
    width: 100px;
    height: 115px;
    margin: 0 30px 40px 0;
    cursor:pointer
}

@media (width <= 750px) {
    .info-wrap .top_btn_area .top_btn {
        width: 15vw;
        height: auto;
        margin:0 5.33vw 8vw 0
    }
}

@media (width <= 750px) {
    .info-wrap .top_btn_area .top_btn::after {
        z-index: 2;
        display: block;
        width: 3.47vw;
        height: 3.47vw;
        margin: 3.73vw auto auto;
        border-top: solid .53vw #fff;
        border-left:solid .53vw #fff
    }
}

.info-wrap .detail-area {
    width: 86.67%;
    padding: 40px 0 0;
    margin:0 auto
}

@media (width <= 750px) {
    .info-wrap .detail-area {
        padding:5vw 0 10vw
    }
}

.info-wrap .detail-area .detail-wrap {
    width: 100%;
    max-width: 750px;
    margin:0 auto
}

@media (width <= 750px) {
    .info-wrap .detail-area .detail-wrap {
        width:100%
    }
}

.info-wrap .detail-area .detail_ttl {
    padding: .5em;
    margin: 0 0 30px;
    font-size: 32px;
    font-weight: 500;
    color: #275342;
    text-align: center;
    letter-spacing: .05em;
    background:#edeff2
}

@media (width <= 750px) {
    .info-wrap .detail-area .detail_ttl {
        margin: 0 0 4vw;
        font-size:5vw
    }
}

.info-wrap .detail-area .item-detail {
    padding: 0;
    margin:0 0 50px
}

@media (width <= 750px) {
    .info-wrap .detail-area .item-detail {
        margin:0 0 8vw
    }
}

.info-wrap .detail-area .item-name {
    margin-bottom: 20px;
    font-size: 32px;
    color: #000;
    text-align:center
}

@media (width <= 750px) {
    .info-wrap .detail-area .item-name {
        margin-bottom: 2vw;
        font-size:3.73vw
    }
}

.info-wrap .detail-area .item-text {
    display: none;
    padding-bottom:1px
}

@media (width <= 750px) {
    .info-wrap .detail-area .item-text {
        display:none
    }
}

.info-wrap .detail-area .item-text dl {
    display: flex;
    flex-wrap: wrap;
    padding: 40px 0;
    margin: 0 auto;
    color: #000;
    border-bottom:solid 1px
}

@media (width <= 750px) {
    .info-wrap .detail-area .item-text dl {
        padding:4vw 0
    }
}

.info-wrap .detail-area .item-text dt {
    width: 100%;
    font-size: 28px;
    line-height:2
}

@media (width <= 750px) {
    .info-wrap .detail-area .item-text dt {
        margin-bottom: .2em;
        font-size:4vw
    }
}

.info-wrap .detail-area .item-text dd {
    width: 100%;
    font-size: 24px;
    text-align:left
}

@media (width <= 750px) {
    .info-wrap .detail-area .item-text dd {
        font-size:3.47vw
    }
}

.info-wrap .detail-area .item-text dd.sp-center {
    text-align:center
}

.info-wrap .detail-area .item-text dd span {
    display: block;
    margin-top: .5em;
    font-size:.8em
}

.info-wrap .detail-area .detail-btn {
    position: relative;
    padding: 25px 0;
    margin: 0;
    font-size: 30px;
    line-height: 1;
    color: #fff;
    text-align: center;
    letter-spacing: .05em;
    cursor: pointer;
    background: #6f6f6f;
    transition:.4s
}

@media (width <= 750px) {
    .info-wrap .detail-area .detail-btn {
        position: relative;
        padding: .75em 0;
        font-size: 4.2vw;
        color: #fff;
        text-align: center;
        letter-spacing: .05em;
        cursor: pointer;
        transition:.4s
    }
}

.info-wrap .detail-area .detail-btn::after, .info-wrap .detail-area .detail-btn::before {
    position: absolute;
    top: 50%;
    right: 5%;
    display: block;
    width: 3%;
    height: 3%;
    content: "";
    background:#fff
}

@media (width <= 750px) {
    .info-wrap .detail-area .detail-btn::after, .info-wrap .detail-area .detail-btn::before {
        right:3vw
    }
}

.info-wrap .detail-area .detail-btn::before {
    transform:translate(-50%, -50%)
}

.info-wrap .detail-area .detail-btn::after {
    transition: .4s;
    transform:translate(-50%, -50%) rotate(90deg)
}

.info-wrap .detail-area .detail-close-btn {
    position: relative;
    width: 61.539%;
    padding: 25px 0;
    margin: 2em auto;
    font-size: 30px;
    line-height: 1;
    color: #6f6f6f;
    text-align: center;
    cursor: pointer;
    border:solid 2px #6f6f6f
}

@media (width <= 750px) {
    .info-wrap .detail-area .detail-close-btn {
        width: 45%;
        padding: .5em 16% .5em 10.6%;
        margin: 5vw auto;
        font-size: 4.2vw;
        text-align: center;
        cursor:pointer
    }
}

.info-wrap .detail-area .detail-close-btn::after {
    position: absolute;
    top: 50%;
    right: 10%;
    display: block;
    width: 7%;
    height: 5%;
    content: "";
    background:#6f6f6f
}

@media (width <= 750px) {
    .info-wrap .detail-area .detail-close-btn::after {
        right:26%
    }
}

.info-wrap .item-text {
    text-align:center
}

.info-wrap .link-product h2 {
    position: relative;
    padding-bottom: 30px;
    margin: 0 auto 50px;
    font-size: 50px;
    color: #000;
    text-align:center
}

@media (width <= 750px) {
    .info-wrap .link-product h2 {
        margin: 0 auto 6.667vw;
        font-size:6.67vw
    }
}

.info-wrap .link-product h2::after {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 60px;
    height: 7px;
    content: "";
    background-color: #000;
    transform:translateX(-50%)
}

@media (width <= 750px) {
    .info-wrap .attention {
        font-size:3.47vw
    }
}

.footer {
    max-width: 750px;
    margin: 0 auto;
    background-color:#f0f0f0
}

@media (width <= 750px) {
    .footer {
        max-width:100vw
    }
}

.footer .block-link {
    padding:60px 0 80px
}

@media (width <= 750px) {
    .footer .block-link {
        padding:8vw 0 10.667vw
    }
}

.footer .block-link .block-r, .footer .block-link .block_l {
    width:100%
}

@media (width <= 750px) {
    .footer .block-link .block-r, .footer .block-link .block_l {
        margin-bottom:4vw
    }
}

.footer .block-link .block-r .box-heading, .footer .block-link .block_l .box-heading {
    margin-bottom:30px
}

.footer .block-link .block-r .box-heading h4, .footer .block-link .block_l .box-heading h4 {
    font-size: 36px;
    color: #4e3227;
    text-align:center
}

@media (width <= 750px) {
    .footer .block-link .block-r .box-heading h4, .footer .block-link .block_l .box-heading h4 {
        font-size:4.8vw
    }
}

.footer .block-link .block_l {
    width: 100%;
    margin-bottom:80px
}

@media (width <= 750px) {
    .footer .block-link .block_l {
        margin-bottom:10.667vw
    }
}

.footer .block-link .block_l .box-01 {
    text-align:center
}

.footer .block-link .block_l .box-01 .txt_tel {
    margin: 30px 0;
    font-size: 52px;
    font-weight: 600;
    line-height:1
}

@media (width <= 750px) {
    .footer .block-link .block_l .box-01 .txt_tel {
        margin: 4vw 0;
        font-size:6.933vw
    }
}

.footer .block-link .block_l .box-01 .txt_detail {
    margin: 0 0 50px;
    font-size: 28px;
    line-height:1.6
}

@media (width <= 750px) {
    .footer .block-link .block_l .box-01 .txt_detail {
        margin: 0 0 6.667vw;
        font-size:3.733vw
    }
}

.footer .block-link .block-r {
    width:100%
}

.footer .block-link .block-r .box + .box {
    margin-top:40px
}

@media (width <= 750px) {
    .footer .block-link .block-r .box + .box {
        margin-top:5.333vw
    }
}

.footer .block-link .block-r .box .list {
    display: flex;
    flex-wrap:wrap
}

.footer .block-link .block-r .box .list li {
    width: 49%;
    margin: 0 2% 0 0;
    border-bottom:2px dotted #a6a6a6
}

@media (width <= 750px) {
    .footer .block-link .block-r .box .list li {
        border-bottom:.267vw dotted #a6a6a6
    }
}

.footer .block-link .block-r .box .list li:nth-child(-n + 2) {
    border-top:2px dotted #a6a6a6
}

@media (width <= 750px) {
    .footer .block-link .block-r .box .list li:nth-child(-n + 2) {
        border-top:.267vw dotted #a6a6a6
    }
}

.footer .block-link .block-r .box .list li:nth-child(2n) {
    margin-right:0
}

.footer .block-link .block-r .box .list li a {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 25px 4%;
    font-size:30px
}

@media (width <= 750px) {
    .footer .block-link .block-r .box .list li a {
        padding: 3.334vw 4%;
        font-size:4vw
    }
}

.footer .block-inner {
    width: 100%;
    padding-right: 4%;
    padding-left:4%
}

.footer .block-copyright {
    width: 100%;
    padding: 0;
    margin: 0;
    border-top:1px solid #a6a6a6
}

@media (width <= 750px) {
    .footer .block-copyright {
        border-top:.133vw solid #a6a6a6
    }
}

.footer .block-copyright .txt-copyright {
    padding: 50px 0;
    font-size: 22px;
    line-height: 1;
    text-align:center
}

@media (width <= 750px) {
    .footer .block-copyright .txt-copyright {
        padding: 6.667vw 0;
        font-size:2.933vw
    }
}

.end-header {
    display: flex;
    justify-content: space-between;
    width:100%
}

.end-header a {
    display:block
}

.end-header a img {
    height:min(108px, 14.4vw)
}

.end-contents {
    padding:min(120px, 16vw) min(20px, 2.666vw)
}

.end-contents h1 {
    margin-bottom: min(40px, 5.3333vw);
    font-size: min(36px, 4.8vw);
    color: #4e3227;
    text-align:center
}

.end-contents h1 span {
    display:inline-block
}

.end-contents p {
    margin-bottom: min(40px, 5.3333vw);
    font-size: min(26px, 3.4666vw);
    line-height: 1.7;
    color:#4e3227
}

.end-contents a {
    position: relative;
    display: block;
    width: 80%;
    max-width: 500px;
    padding: min(20px, 2.666vw);
    margin: min(60px, 8vw) auto 0;
    font-size: min(26px, 3.4666vw);
    color: #fff;
    text-align: center;
    background-color: #63564a;
    border-radius:min(8px, 1.0666vw)
}

.end-contents a::after {
    position: absolute;
    top: 50%;
    right: min(20px, 2.666vw);
    display: block;
    width: min(16px, 2.1333vw);
    height: min(16px, 2.1333vw);
    content: "";
    border: 0;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform:translateY(-50%) rotate(45deg)
}

.btn-shadow {
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility:hidden
}

.btn-shadow img {
    filter:drop-shadow(0 min(8px, 1.0666vw) min(8px, 1.0666vw) rgba(0, 0, 0, .3))
}

.cart-btn-wrap, .single-cart-btn {
    position: absolute;
    left:min(80px, 10.666vw)
}

.cart-btn-wrap a, .single-cart-btn a {
    display: block;
    width:min(589px, 78.5333vw)
}

.cart-btn-wrap .dark-brown-btn, .single-cart-btn .dark-brown-btn {
    margin-bottom:min(20px, 2.666vw)
}

.single-cart-btn {
    width:min(589px, 78.5333vw)
}

.sec1-1 {
    position: relative;
    width: 100%;
    background-color:#d7d6d4
}

.sec1-1 video {
    display: block;
    width: min(750px, 100vw);
    margin: auto;
    line-height:1
}

.sec2-1 {
    position:relative
}

.sec2-1 .sec2-1-2 {
    position: absolute;
    top: min(124px, 16.533vw);
    left:0
}

.sec2-1 .sec2-1-3 {
    position: absolute;
    top: min(334px, 44.5333vw);
    left:0
}

.sec2-1 .sec2-1-4 {
    position: absolute;
    top: min(1460px, 194.666vw);
    left:0
}

.sec2-1 .sec2-1-4 .cart-btn-wrap {
    position: absolute;
    bottom:min(90px, 12vw)
}

.sec2-1 .sec2-1-5 {
    position: absolute;
    bottom: min(64px, 8.533vw);
    left:0
}

.sec3-1 {
    position:relative
}

.sec3-1 .sec3-1-2 {
    position: absolute;
    top: min(90px, 12vw);
    left:0
}

.sec3-1 .group1 {
    position: absolute;
    top: min(274px, 36.5333vw);
    left: 0;
    width:100%
}

.sec3-1 .group1 .sec3-1-3 {
    position: absolute;
    top: 0;
    right: min(36px, 4.8vw);
    width:min(473px, 63.0666vw)
}

.sec3-1 .group1 .sec3-1-4 {
    position: absolute;
    top: min(86px, 11.466vw);
    left: min(38px, 5.0666vw);
    width: min(311px, 41.4666vw);
    transition-delay: 0.3s;
    -webkit-animation-delay: .3s;
    animation-delay:.3s
}

.sec3-1 .group2 {
    position: absolute;
    top: min(782px, 104.2666vw);
    left: min(30px, 4vw);
    display: flex;
    gap: min(16px, 2.1333vw);
    align-items: center;
    max-width:min(690px, 92vw)
}

.sec3-1 .group2 .sec3-1-6 {
    transition-delay: 0.3s;
    -webkit-animation-delay: .3s;
    animation-delay:.3s
}

.sec3-1 .group2 .sec3-1-7 {
    transition-delay: 0.6s;
    -webkit-animation-delay: .6s;
    animation-delay:.6s
}

.sec3-1 .sec3-1-8 {
    position: absolute;
    top: min(870px, 116vw);
    left:0
}

.sec3-1 .sec3-1-9 {
    position: absolute;
    top: min(994px, 132.5333vw);
    left:0
}

.sec3-1 .group3 {
    position: absolute;
    bottom: min(629px, 83.8666vw);
    left: 0;
    width:100%
}

.sec3-1 .group3 .sec3-1-10 {
    position: absolute;
    top: min(60px, 8vw);
    left: min(32px, 4.2666vw);
    width:min(249px, 33.2vw)
}

.sec3-1 .group3 .sec3-1-11 {
    position: absolute;
    top: 0;
    right: min(92px, 12.266vw);
    width: min(243px, 32.4vw);
    transition-delay: 0.3s;
    -webkit-animation-delay: .3s;
    animation-delay:.3s
}

.sec3-1 .group3 .sec3-1-12 {
    position: absolute;
    top: min(264px, 35.2vw);
    right: min(14px, 1.8666vw);
    width: min(249px, 33.2vw);
    transition-delay: 0.6s;
    -webkit-animation-delay: .6s;
    animation-delay:.6s
}

.sec3-1 .group3 .sec3-1-13 {
    position: absolute;
    top: min(370px, 49.333vw);
    left: 0;
    width: min(250px, 33.333vw);
    transition-delay: 0.9s;
    -webkit-animation-delay: .9s;
    animation-delay:.9s
}

.sec3-2 {
    position:relative
}

.sec3-2 .group1 {
    position: absolute;
    top: 0;
    left:0
}

.sec3-2 .group1 .sec3-2-3 {
    transition-delay: 0.5s;
    -webkit-animation-delay: .5s;
    animation-delay:.5s
}

.sec3-2 .sec3-2-4 {
    position: absolute;
    top: min(465px, 62vw);
    left: min(76px, 10.1333vw);
    width:min(216px, 28.8vw)
}

.sec3-2 .group2 {
    position: absolute;
    bottom: min(54px, 7.2vw);
    left:0
}

.sec3-2 .group2 .sec3-2-6 {
    position: absolute;
    top: min(40px, 5.3333vw);
    right: 0;
    width: min(217px, 28.9333vw);
    transition-delay: 0.5s;
    -webkit-animation-delay: .5s;
    animation-delay:.5s
}

.sec3-3 {
    padding-top: min(38px, 5.0666vw);
    background-color:#e5e5e5
}

.sec3-3 .sec3-3-1 {
    margin-bottom:min(75px, 10vw)
}

.sec3-3 .sec3-3-2, .sec3-3 .sec3-3-3, .sec3-3 .sec3-3-4 {
    margin-bottom:min(46px, 6.1333vw)
}

.sec3-3 .sec3-3-5 {
    margin-bottom:min(112px, 14.933vw)
}

.sec4-1 {
    position:relative
}

.sec4-1 .group1 .sec4-1-2 {
    position: absolute;
    top: min(50px, 6.666vw);
    left:0
}

.sec4-1 .group1 .sec4-1-3 {
    position: absolute;
    top: min(168px, 22.4vw);
    left: 0;
    transition-delay: 0.5s;
    -webkit-animation-delay: .5s;
    animation-delay:.5s
}

.sec4-1 .sec4-1-4 {
    position: absolute;
    top: min(894px, 119.2vw);
    left:0
}

.sec4-1 .sec4-1-5 {
    position: absolute;
    bottom: min(334px, 44.5333vw);
    left:0
}

.sec4-1 .group2 {
    position: absolute;
    bottom: min(104px, 13.8666vw);
    left: min(50px, 6.666vw);
    display: flex;
    gap: min(45px, 5.8666vw);
    align-items: center;
    max-width:min(650px, 86.666vw)
}

.sec4-1 .group2 .sec4-1-7 {
    transition-delay: 0.3s;
    -webkit-animation-delay: .3s;
    animation-delay:.3s
}

.sec4-1 .group2 .sec4-1-8 {
    transition-delay: 0.6s;
    -webkit-animation-delay: .6s;
    animation-delay:.6s
}

.sec4-2 {
    position:relative
}

.sec4-2 .sec4-2-2 {
    position: absolute;
    top: min(42px, 5.6vw);
    left:0
}

.sec4-2 .sec4-2-3 {
    position: absolute;
    top: min(254px, 33.8666vw);
    left:0
}

.sec4-2 .group1 {
    position: absolute;
    top: min(710px, 94.666vw);
    left:0
}

.sec4-2 .group1 .sec4-2-4 {
    margin-bottom:min(46px, 6.1333vw)
}

.sec4-2 .group1 .movie-wrap {
    position: relative;
    max-width: min(634px, 84.5333vw);
    margin:0 auto
}

.sec4-2 .group1 .movie-wrap video {
    width:100%
}

.sec4-2 .group1 .movie-wrap .sec4-2-6 {
    position: absolute;
    top: max(-40px, -5.3333vw);
    right: max(-24px, -3.2vw);
    width:min(214px, 28.5333vw)
}

.sec4-2 .sec4-2-7 {
    position: absolute;
    bottom: min(130px, 17.333vw);
    left:0
}

.sec4-3 {
    position:relative
}

.sec4-3 .sec4-3-2 {
    position: absolute;
    top: min(170px, 22.666vw);
    left:0
}

.sec4-3 .sec4-3-3 {
    position: absolute;
    top: min(296px, 39.4666vw);
    left:0
}

.sec4-3 .sec4-3-4 {
    position: absolute;
    top: min(1130px, 150.666vw);
    left:0
}

.sec4-4 {
    position:relative
}

.sec4-4 .sec4-4-2 {
    position: absolute;
    top: min(140px, 18.666vw);
    left:0
}

.sec4-4 .sec4-4-3 {
    position: absolute;
    top: min(260px, 34.666vw);
    left:0
}

.sec4-4 .sec4-4-4 {
    position: absolute;
    top: min(450px, 60vw);
    left:0
}

.sec4-5 {
    position:relative
}

.sec4-5 .sec4-5-2 {
    position: absolute;
    top: 0;
    left:0
}

.sec4-5 .group1 {
    position: absolute;
    bottom: min(390px, 52vw);
    left: 0;
    width:100%
}

.sec4-5 .group1 .sec4-5-3 {
    position: absolute;
    top: 0;
    left: min(36px, 4.8vw);
    z-index: 3;
    width:min(303px, 40.4vw)
}

.sec4-5 .group1 .sec4-5-4 {
    position: absolute;
    top: 0;
    left: min(312px, 41.6vw);
    z-index: 2;
    width: min(181px, 24.1333vw);
    transition-delay: 0.3s;
    -webkit-animation-delay: .3s;
    animation-delay:.3s
}

.sec4-5 .group1 .sec4-5-5 {
    position: absolute;
    top: 0;
    right: min(42px, 5.6vw);
    z-index: 1;
    width: min(230px, 30.666vw);
    transition-delay: 0.6s;
    -webkit-animation-delay: .6s;
    animation-delay:.6s
}

.sec4-6 {
    position:relative
}

.sec4-6 .sec4-6-2 {
    position: absolute;
    top: min(36px, 4.8vw);
    left:0
}

.sec4-6 .sec4-6-3 {
    position: absolute;
    top: min(274px, 36.5333vw);
    left:0
}

.sec4-6 .group1 {
    position: absolute;
    top: min(860px, 114.666vw);
    left: 0;
    width:100%
}

.sec4-6 .group1 .sec4-6-4 {
    position: absolute;
    top: 0;
    left: min(50px, 6.666vw);
    z-index: 3;
    width:min(226px, 30.1333vw)
}

.sec4-6 .group1 .sec4-6-5 {
    position: absolute;
    top: 0;
    left: min(270px, 36vw);
    z-index: 2;
    width: min(226px, 30.1333vw);
    transition-delay: 0.3s;
    -webkit-animation-delay: .3s;
    animation-delay:.3s
}

.sec4-6 .group1 .sec4-6-6 {
    position: absolute;
    top: 0;
    right: min(43px, 5.7333vw);
    z-index: 1;
    width: min(216px, 28.8vw);
    transition-delay: 0.6s;
    -webkit-animation-delay: .6s;
    animation-delay:.6s
}

.sec4-6 .sec4-6-7 {
    position: absolute;
    top: min(1168px, 155.7333vw);
    left:0
}

.sec4-6 .sec4-6-8 {
    position: absolute;
    top: min(1360px, 181.333vw);
    left:0
}

.sec4-6 .sec4-6-9 {
    position: absolute;
    bottom: min(710px, 94.666vw);
    left:0
}

.sec4-6 .sec4-6-10 {
    position: absolute;
    bottom: min(100px, 13.333vw);
    left:0
}

.sec4-7 {
    position:relative
}

.sec4-7 .sec4-7-2 {
    position: absolute;
    top: 0;
    left:0
}

.sec4-7 .sec4-7-3 {
    position: absolute;
    top: min(300px, 40vw);
    left:0
}

.sec4-7 .sec4-7-4 {
    position: absolute;
    top: min(820px, 109.333vw);
    left:0
}

.sec4-7 .sec4-7-5 {
    position: absolute;
    top: min(1168px, 155.7333vw);
    left:0
}

.sec4-7 .sec4-7-6 {
    position: absolute;
    top: min(1522px, 202.9333vw);
    left:0
}

.sec4-7 .sec4-7-7 {
    position: absolute;
    top: min(1650px, 220vw);
    left:0
}

.sec4-7 .sec4-7-8 {
    position: absolute;
    top: min(2456px, 327.4666vw);
    left:0
}

.sec4-7 .sec4-7-9 {
    position: absolute;
    bottom: min(1032px, 137.6vw);
    left:0
}

.sec4-7 .sec4-7-10 {
    position: absolute;
    bottom: min(320px, 42.666vw);
    left:0
}

.sec4-7 .group1 {
    position: absolute;
    bottom: min(70px, 9.333vw);
    left:0
}

.sec4-7 .group1 a {
    display: block;
    width: min(621px, 82.8vw);
    margin:0 auto
}

.sec5-1 {
    padding-block:min(68px, 9.0666vw) min(100px, 13.333vw)
}

.sec5-1 .sec5-1-1 {
    margin-bottom:min(68px, 9.0666vw)
}

.sec5-1 .sec5-1-2 {
    margin-bottom:min(82px, 10.9333vw)
}

.sec5-2 {
    position:relative
}

.sec5-2 .sec5-2-2 {
    position: absolute;
    top: min(150px, 20vw);
    left:0
}

.sec5-2 .sec5-2-3 {
    position: absolute;
    top: min(440px, 58.666vw);
    left:0
}

.sec5-2 .group1 {
    position: absolute;
    top: min(810px, 108vw);
    left: 0;
    width:100%
}

.sec5-2 .group1 .sec5-2-4 {
    width: min(386px, 51.4666vw);
    margin-left:auto
}

.sec5-2 .group1 .sec5-2-5 {
    position: absolute;
    top: min(44px, 5.7333vw);
    left: min(26px, 3.4666vw);
    width:min(465px, 62vw)
}

.sec5-2 .group2 {
    position: absolute;
    top: min(1150px, 153.333vw);
    left: 0;
    width:100%
}

.sec5-2 .group2 .sec5-2-6 {
    width:min(375px, 50vw)
}

.sec5-2 .group2 .sec5-2-7 {
    position: absolute;
    top: min(20px, 2.666vw);
    right: min(52px, 6.9333vw);
    width:min(406px, 54.1333vw)
}

.sec5-2 .sec5-2-8 {
    position: absolute;
    bottom: min(190px, 25.333vw);
    left:0
}

.sec5-3 .sec5-3-1 {
    margin-bottom:min(50px, 6.666vw)
}

.sec5-3 .slider-wrap {
    max-width: min(716px, 95.4666vw);
    margin: 0 auto min(86px, 11.466vw);
    background-color:#ededed
}

.sec5-3 .swiper-button-next, .sec5-3 .swiper-button-prev {
    width: min(44px, 5.7333vw);
    height: min(49px, 6.5333vw);
    background-repeat: no-repeat;
    background-size:contain
}

.sec5-3 .swiper-button-next svg, .sec5-3 .swiper-button-prev svg {
    display:none
}

.sec5-3 .swiper-button-prev {
    left: min(56px, 7.466vw);
    background-image: url("https://d2w53g1q050m78.cloudfront.net/wwwharushopjp/uploads/lp/campaign/rcp2602001/img/sec5/slide-prev.webp")
}

.sec5-3 .swiper-button-next {
    right: min(56px, 7.466vw);
    background-image: url("https://d2w53g1q050m78.cloudfront.net/wwwharushopjp/uploads/lp/campaign/rcp2602001/img/sec5/slide-next.webp")
}

.sec6-1 {
    padding-block: min(66px, 8.8vw) min(56px, 7.466vw);
    background-color:#fff0f0
}

.sec6-1 .sec6-1-1 {
    margin-bottom:min(56px, 7.466vw)
}

.sec6-1 .qa-wrap {
    max-width: min(674px, 89.8666vw);
    margin:0 auto min(72px, 9.6vw)
}

.sec6-1 .qa-wrap .qa {
    padding: 0 min(34px, 4.5333vw);
    padding-block: min(38px, 5.0666vw);
    margin-bottom: min(28px, 3.7333vw);
    background-color: #fff;
    border-radius: min(20px, 2.666vw);
    box-shadow:0 min(6px, .8vw) min(16px, 2.1333vw) 0 rgba(0, 0, 0, .2)
}

.sec6-1 .qa-wrap .qa .question {
    position:relative
}

.sec6-1 .qa-wrap .qa .question::after {
    position: absolute;
    top: min(18px, 2.4vw);
    right: 0;
    display: block;
    width: min(20px, 2.666vw);
    height: min(10px, 1.333vw);
    content: "";
    background-image: url("https://d2w53g1q050m78.cloudfront.net/wwwharushopjp/uploads/lp/campaign/rcp2602001/img/sec6/allow.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size:contain
}

.sec6-1 .qa-wrap .qa .answer {
    display: none;
    padding-block: min(25px, 3.333vw) min(10px, 1.333vw);
    margin-top: min(25px, 3.333vw);
    border-top:1px solid #554340
}

.sec6-1 .qa-wrap .qa.open .question::after {
    transform:rotate(180deg)
}

.sec6-2 {
    position: relative;
    padding-bottom: min(86px, 11.466vw);
    background-color:#f3eee8
}

.sec6-2::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: min(172px, 22.9333vw);
    content: "";
    background-color:#fff0f0
}

.sec6-2 .sec6-2-1 {
    position: relative;
    z-index: 1;
    margin-bottom:min(34px, 4.5333vw)
}

.sec6-2 .sec6-2-2 {
    margin-bottom:min(82px, 10.9333vw)
}

.sec6-2 .sec6-2-3 {
    margin-bottom:min(50px, 6.666vw)
}

.sec6-2 .sec6-2-4 {
    margin-bottom:min(38px, 5.0666vw)
}

.sec6-3 {
    padding-block: min(100px, 13.333vw);
    background-color:#eed3cb
}

.sec6-3 .group1 {
    position: relative;
    margin-bottom:min(42px, 5.6vw)
}

.sec6-3 .group1 .cart-btn-wrap1 {
    position: absolute;
    top:min(984px, 131.2vw)
}

.sec6-3 .group1 .cart-btn-wrap2 {
    bottom:min(92px, 12.266vw)
}

.sec6-3 .sec6-3-2 {
    display: block;
    width: min(672px, 89.6vw);
    margin:0 auto min(112px, 14.933vw)
}

.sec6-3 .group2 {
    position: relative;
    margin-bottom:min(42px, 5.6vw)
}

.sec6-3 .group2 .cart-btn-wrap {
    bottom:min(92px, 12.266vw)
}

.sec6-3 .sec6-3-4 {
    display: block;
    width: min(672px, 89.6vw);
    margin:0 auto
}

.sec7-1 {
    background-color:#fff0f0
}

.sec7-1 .group1 {
    position:relative
}

.sec7-1 .group1 .sec7-1-2 {
    position: absolute;
    top: min(470px, 62.666vw);
    right: 0;
    width: min(224px, 29.8666vw);
    transition-delay: 0.5s;
    -webkit-animation-delay: .5s;
    animation-delay:.5s
}

.sec7-1 .group1 .sec7-1-3 {
    position: absolute;
    bottom: min(30px, 4vw);
    left: min(20px, 2.666vw);
    width:min(708px, 94.4vw)
}

.sec7-1 .sec7-1-4 {
    padding-block:min(100px, 13.333vw) min(50px, 6.666vw)
}

.sec7-2 {
    padding-block:min(76px, 10.1333vw) min(38px, 5.0666vw)
}

.sec7-2 .sec7-2-1 {
    margin-bottom:min(50px, 6.666vw)
}

.sec7-2 .group1 {
    position: relative;
    width: 100%;
    height:min(290px, 38.666vw)
}

.sec7-2 .group1 a {
    display:block
}

.sec7-2 .group1 .sec7-2-2 {
    position: absolute;
    top: 0;
    left: min(34px, 4.5333vw);
    width:min(345px, 46vw)
}

.sec7-2 .group1 .sec7-2-3 {
    position: absolute;
    top: 0;
    right: min(26px, 3.4666vw);
    width:min(345px, 46vw)
}

.sec7-3 {
    padding-bottom: min(210px, 28vw);
    background-color:#c8cdb9
}

.sec7-3 .sec7-3-2 {
    position: relative;
    top:max(-70px, -9.333vw)
}

.sec7-3 .group1 {
    position: relative;
    margin-bottom:min(48px, 6.4vw)
}

.sec7-3 .group1 .cart-btn-wrap {
    bottom:min(100px, 13.333vw)
}

.sec7-3 .sec7-3-4 {
    display: block;
    width: min(672px, 89.6vw);
    margin-inline:auto
}

.sec7-4 {
    padding-bottom: min(100px, 13.333vw);
    background-color:#fdd9c7
}

.sec7-4 .sec7-4-2 {
    position: relative;
    top:max(-36px, -4.8vw)
}

.sec7-4 .sec7-4-3 {
    margin-bottom:min(34px, 4.5333vw)
}

.sec7-4 .sec7-4-4 {
    max-width: min(646px, 86.1333vw);
    margin:0 auto min(70px, 9.333vw)
}

.sec7-4 .sec7-4-4 video {
    width:100%
}

.sec7-4 .group1 {
    position: relative;
    margin-bottom:min(48px, 6.4vw)
}

.sec7-4 .group1 .cart-btn-wrap {
    bottom:min(100px, 13.333vw)
}

.sec7-4 .sec7-4-6 {
    display: block;
    width: min(672px, 89.6vw);
    margin-inline:auto
}

.sec8-1 {
    position: relative;
    padding-bottom: min(86px, 11.466vw);
    background-color:#f3eee8
}

.sec8-1 .sec8-1-1 {
    margin-bottom:min(50px, 6.666vw)
}

.sec8-1 .sec8-2-2 {
    margin-bottom:min(82px, 10.9333vw)
}

.sec8-1 .sec8-2-3 {
    margin-bottom:min(50px, 6.666vw)
}

.sec8-1 .sec8-2-4 {
    margin-bottom:min(38px, 5.0666vw)
}

.sec9-1 {
    padding-block: min(68px, 9.0666vw) min(60px, 8vw);
    background-color:#eed3cb
}

.sec9-1 .sec9-1-1 {
    margin-bottom:min(20px, 2.666vw)
}

.sec9-1 a {
    display: block;
    width: min(676px, 90.1333vw);
    margin-inline:auto
}

.sec9-1 .sec9-1-3 {
    margin-bottom:min(18px, 2.4vw)
}

.sec9-1 .sec9-1-4 {
    margin-bottom:min(26px, 3.4666vw)
}

.sec9-2, .sec9-3, .sec9-4 {
    padding-block:min(60px, 8vw) min(112px, 14.933vw)
}

.sec9-2 .group1, .sec9-2 .group2, .sec9-3 .group1, .sec9-3 .group2, .sec9-4 .group1, .sec9-4 .group2 {
    position:relative
}

.sec9-2 {
    background-color:#eed3cb
}

.sec9-2 .group1, .sec9-2 .group2 {
    margin-bottom:min(56px, 7.466vw)
}

.sec9-2 .group1 .cart-btn-wrap, .sec9-2 .group2 .cart-btn-wrap {
    bottom:min(92px, 12.266vw)
}

.sec9-2 .sec9-2-3 {
    display: block;
    width: min(672px, 89.6vw);
    margin-inline:auto
}

.sec9-3 {
    background-color:#ccd6a6
}

.sec9-3 .group1 {
    margin-bottom:min(56px, 7.466vw)
}

.sec9-3 .group1 .set-s3 {
    position: absolute;
    top: min(1650px, 220vw);
    left: 0;
    width:100%
}

.sec9-3 .group1 .cart-btn-wrap1 {
    position: absolute;
    top:min(1220px, 162.666vw)
}

.sec9-3 .group1 .cart-btn-wrap2 {
    bottom:min(92px, 12.266vw)
}

.sec9-3 .group2 .cart-btn-wrap {
    bottom:min(92px, 12.266vw)
}

.sec9-4 {
    background-color:#e6c98e
}

.sec9-4 .group1 {
    margin-bottom:min(56px, 7.466vw)
}

.sec9-4 .group1 .set-s3 {
    position: absolute;
    top: min(1594px, 212.5333vw);
    left: 0;
    width:100%
}

.sec9-4 .group1 .cart-btn-wrap1 {
    position: absolute;
    top:min(1220px, 162.666vw)
}

.sec9-4 .group1 .cart-btn-wrap2 {
    bottom:min(92px, 12.266vw)
}

.sec9-4 .group2 .cart-btn-wrap {
    bottom:min(92px, 12.266vw)
}

.sec9-5 {
    padding-block:min(72px, 9.6vw) min(90px, 12vw)
}

.sec9-5 .group1 {
    position: relative;
    margin-bottom:min(90px, 12vw)
}

.sec9-5 .group1 .single-1 {
    position: absolute;
    top: min(1400px, 186.666vw);
    left: 0;
    width:100%
}

.sec9-5 .group1 .cart-btn-wrap1 {
    position: absolute;
    top:min(990px, 132vw)
}

.sec9-5 .group1 .cart-btn-wrap2 {
    bottom:min(92px, 12.266vw)
}

.sec9-5 .group2 {
    position: relative;
    margin-bottom:min(90px, 12vw)
}

.sec9-5 .group2 .single-cart-btn1 {
    position: absolute;
    top:min(740px, 98.666vw)
}

.sec9-5 .group2 .single-cart-btn2 {
    bottom:min(112px, 14.933vw)
}

.sec9-5 .group3 {
    position:relative
}

.sec9-5 .group3 .single-cart-btn1 {
    position: absolute;
    top:min(740px, 98.666vw)
}

.sec9-5 .group3 .single-cart-btn2 {
    bottom:min(112px, 14.933vw)
}

.sec10-1 .group1 {
    position:relative
}

.sec10-1 .group1 .link {
    position: absolute;
    bottom: min(82px, 10.9333vw);
    left: min(58px, 7.7333vw);
    display: block;
    width: min(633px, 84.4vw)
}

/*cart loading*/
.loading-wrap,
.loading-bk {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
}

.loading-bk {
  z-index: 9999998;
  background-color: rgb(0 0 0 / 62%);
}

.loading-contents {
  z-index: 9999999;
}

.loading-contents svg {
  display: block;
  width: 60px;
  margin: 0 auto 16px;
  animation: bound 1.2s infinite forwards ease-out;
}

.loading-contents p {
  font-size: 15px;
  color: #fff;
}

@keyframes bound {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}