﻿.web_font,
.price .arrow {
    font-family: 'Satoshi', sans-serif
}

.web_font2,
.price .num,
#Ar_area .box .cs_box>p>span {
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    font-weight: 700
}

.web_font,
.price .arrow {
    font-family: 'Satoshi', sans-serif
}

.web_font2,
.price .num,
#Ar_area .box .cs_box>p>span {
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    font-weight: 700
}

html {
    font-size: 62.5%
}

#wrapper img {
    vertical-align: bottom;
    border: none
}

#wrapper li {
    list-style: none
}

.pc_only {
    display: block
}

.pc_only.inline {
    display: inline
}

.sp_only {
    display: none
}

@media screen and (max-width: 768px) {
    .pc_only {
        display: none
    }

    .pc_only.inline {
        display: none
    }

    .sp_only {
        display: block
    }

    .sp_only.dis_in {
        display: inline
    }
}

.inner {
    width: 1260px;
    box-sizing: border-box;
    margin: 0 auto;
    position: relative
}

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

    .inner,
    .inner2,
    .inner3 {
        max-width: none;
        width: 100%;
        padding: 0 4vw
    }

    .inner.sp_type02,
    .inner2.sp_type02,
    .inner3.sp_type02 {
        padding: 0 4vw
    }

    .inner.sp_type03,
    .inner2.sp_type03,
    .inner3.sp_type03 {
        padding: 0
    }
}

.price {
    line-height: 1;
    color: #ec7171
}

.price .kaku {
    font-size: 1.6rem;
    font-weight: 700
}

.price .zei {
    padding-right: 5px;
    font-size: 1.4rem
}

.price .num {
    font-weight: 600;
    font-size: 4.0rem;
    letter-spacing: 0.05em
}

.price .en {
    font-size: 2.0rem
}

.price .arrow {
    font-size: 2.2rem;
    padding-right: 5px
}

.price.mini {
    color: #4d2e12
}

.price.mini .kaku {
    font-size: 1.6rem;
    font-weight: 700
}

.price.mini .zei {
    padding-right: 5px;
    font-size: 1.6rem
}

.price.mini .num {
    font-size: 2.2rem;
    font-weight: 700
}

.price.mini .num.not {
    position: relative
}

.price.mini .num.not:before {
    display: block;
    content: '';
    width: 100%;
    height: 1px;
    background: #4d2e12;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate3d(0, -50%, 0) rotate(-8deg)
}

.price.mini .en {
    font-size: 1.1rem
}

@media screen and (max-width: 768px) {
    .price .kaku {
        font-size: 3.7333333333vw
    }

    .price .zei {
        padding-right: .5333333333vw;
        font-size: 2.6666666667vw
    }

    .price .num {
        font-size: 7.4666666667vw
    }

    .price .en {
        font-size: 3.7333333333vw
    }

    .price .arrow {
        font-size: 4.8vw;
        padding-right: 1.3333333333vw
    }

    .price.mini {
        font-size: 2.6666666667vw;
        line-height: 1.2
    }

    .price.mini .kaku {
        font-size: 2.9333333333vw
    }

    .price.mini .zei {
        padding-right: 5px;
        font-size: 2.9333333333vw
    }

    .price.mini .num {
        font-size: 4.8vw
    }

    .price.mini .en {
        font-size: 3.2vw
    }
}

.btn_style {
    width: 240px;
    height: 60px;
    background: #444;
    letter-spacing: 0.15em;
    border: 1px solid #444;
    box-sizing: border-box;
    transition: all .3s 0s ease-in-out;
    text-align: center
}

.btn_style.mini {
    width: 100%;
    height: 50px
}

.btn_style.mini>a,
.btn_style.mini>span {
    font-size: 1.5rem
}

.btn_style.mini>a span,
.btn_style.mini>span span {
    padding-left: 35px
}

.btn_style.off {
    background: #ccc;
    border: 1px solid #ccc
}

.btn_style:not(.btn_style.off):hover {
    background: #fff
}

.btn_style:not(.btn_style.off):hover>a,
.btn_style:not(.btn_style.off):hover>span {
    color: #444
}

.btn_style>a,
.btn_style>span {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    height: 100%;
    color: #fff;
    font-weight: bold;
    font-size: 1.7rem
}

.btn_style>a span,
.btn_style>span span {
    position: relative;
    padding-left: 40px;
    text-align: center
}

.btn_style>a span:before,
.btn_style>span span:before {
    display: block;
    content: '';
    width: 23px;
    height: 17px;
    background: url("../images/icon_cart.png") left top no-repeat;
    background-size: 23px 17px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate3d(0, -50%, 0)
}

.btn_style:not(.btn_style.off):hover>a span:before,
.btn_style:not(.btn_style.off):hover>span span:before {
    background: url("../images/icon_cart_b.png") left top no-repeat;
    background-size: 23px 17px
}

@media screen and (max-width: 768px) {
    .btn_style {
        height: 13.3333333333vw;
        width: 45.3333333333vw
    }

    .btn_style.mini {
        height: 12vw
    }

    .btn_style.mini>a,
    .btn_style.mini>span {
        font-size: 1.3rem
    }

    .btn_style.mini>a span,
    .btn_style.mini>span span {
        padding-left: 40px
    }

    .btn_style>a,
    .btn_style>span {
        font-size: 3.7333333333vw
    }

    .btn_style>a span,
    .btn_style>span span {
        padding-left: 32px
    }

    .btn_style>a span:before,
    .btn_style>span span:before {
        width: 20px;
        height: 15px;
        background: url("../images/icon_cart.png") left top no-repeat;
        background-size: 20px 15px
    }

    .btn_style:not(.btn_style.off):hover>a span:before,
    .btn_style:not(.btn_style.off):hover>span span:before {
        background: url("../images/icon_cart_b.png") left top no-repeat;
        background-size: 20px 15px
    }
}

.label_limit_style {
    font-size: 1.4rem;
    border: 2px solid #ec7171;
    line-height: 18px;
    line-height: 1;
    margin-right: 8px;
    box-sizing: border-box;
    color: #ec7171;
    font-weight: 600;
    letter-spacing: 0.1em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4px 7px 5px 9px;
    white-space: nowrap
}

.label_limit_style.type2 {
    background: #ec7171;
    color: #fff
}

@media screen and (max-width: 768px) {
    .label_limit_style {
        border: 1px solid #ec7171;
        font-size: 3.2vw;
        margin-right: 5px;
        letter-spacing: 0.05em;
        padding: 4px 1.6vw 5px 1.6vw
    }
}

.sub {
    font-size: 60%;
    vertical-align: top;
    position: relative;
    top: 0.45em;
    letter-spacing: 0
}

.sub.ttl_sub {
    font-size: 45%;
    top: 0.45em;
    margin-right: 2px
}

.mini_txt_style {
    line-height: 1.2;
    font-size: 1.2rem;
    letter-spacing: 0.0em;
    font-weight: 400;
    color: #4d2e12;
    opacity: 0.7
}

.mini_txt_style.center {
    text-align: center
}

@media screen and (max-width: 768px) {
    .mini_txt_style {
        font-size: 2.6666666667vw;
        line-height: 1.5;
        letter-spacing: -0.07em
    }
}

.ttl_style {
    text-align: center;
    position: relative;
    padding-bottom: 36px;
    line-height: 1;
    margin-bottom: 60px;
    font-weight: 600
}

.ttl_style:before {
    display: block;
    content: '';
    width: 32px;
    height: 3px;
    background: #fd0;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate3d(-50%, 0, 0);
    opacity: 0.7
}

.ttl_style .mini {
    font-size: 1.8rem;
    display: block;
    margin-bottom: 22px;
    letter-spacing: 0.1em
}

.ttl_style .big {
    font-size: 3.6rem;
    color: #ec7171;
    display: block;
    letter-spacing: 0.1em
}

@media screen and (max-width: 768px) {
    .ttl_style {
        padding-bottom: 4.8vw;
        margin-bottom: 8vw
    }

    .ttl_style:before {
        width: 5.3333333333vw;
        height: 2px
    }

    .ttl_style .mini {
        font-size: 3.4666666667vw;
        margin-bottom: 2.9333333333vw
    }

    .ttl_style .big {
        font-size: 6.4vw
    }
}

.ttl_style2 {
    text-align: center;
    position: relative;
    padding-bottom: 28px;
    line-height: 1;
    margin-bottom: 28px;
    font-size: 3.2rem;
    letter-spacing: 0.1em;
    font-weight: 600
}

.ttl_style2:before {
    display: block;
    content: '';
    width: 24px;
    height: 3px;
    background: #fd0;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate3d(-50%, 0, 0);
    opacity: 0.7
}

@media screen and (max-width: 768px) {
    .ttl_style2 {
        padding-bottom: 4.2666666667vw;
        margin-bottom: 4.2666666667vw;
        font-size: 5.3333333333vw
    }

    .ttl_style2:before {
        width: 4.2666666667vw;
        height: 2px
    }
}

#wrapper {
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    font-weight: 500;
    -webkit-text-size-adjust: 100%;
    font-family: "Noto Sans JP", sans-serif, "Droid Sans", "游ゴシック体", "Yu Gothic", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
    font-size: 1.6rem;
    line-height: 1.8;
    color: #4d2e12;
    font-feature-settings: "palt";
    letter-spacing: 0.05em;
    background: #faf9f1;
    font-optical-sizing: auto
}

@media screen and (max-width: 768px) {
    #wrapper {
        width: 100%;
        font-size: 3.4666666667vw;
        line-height: 1.8
    }
}

#wrapper img {
    width: 100%;
    height: auto
}

#Mv_area {
    background: url("../images/005009340/mv_bg.jpg") center top no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    position: relative;
    align-items: center;
    height: 46.875vw;
    min-height: 750px
}

#Mv_area .ttl {
    width: 46.25vw;
    min-width: 740px;
    margin-bottom: 6.25vw
}

#Mv_area:before {
    display: block;
    content: '';
    width: 100%;
    height: 7.5vw;
    min-width: 1260px;
    min-height: 94px;
    background: url("../images/005009340/kugiri_bg.png") center top no-repeat;
    background-size: cover;
    position: absolute;
    bottom: -.625vw;
    left: 50%;
    transform: translate3d(-50%, 0, 0)
}

@media screen and (max-width: 768px) {
    #Mv_area {
        background: url("../images/005009340/mv_bg_sp.jpg") center top no-repeat;
        background-size: cover;
        height: 120vw;
        min-height: auto
    }

    #Mv_area .ttl {
        width: 96vw;
        margin-bottom: 8.8vw;
        min-width: auto
    }

    #Mv_area:before {
        width: 100vw;
        height: 10.6666666667vw;
        min-width: auto;
        min-height: auto;
        background: url("../images/005009340/kugiri_bg_sp.png") center top no-repeat;
        background-size: cover;
        position: absolute;
        bottom: -.6666666667vw;
        left: 0;
        transform: translate3d(0, 0, 0)
    }
}

#Nav_area {
    margin-top: -20px;
    margin-bottom: 100px
}

#Nav_area ul {
    display: flex;
    align-items: center;
    position: relative;
    padding-bottom: 35px
}

#Nav_area ul:before {
    display: block;
    content: '';
    width: 100%;
    height: 6px;
    background: url("../images/005009340/sen_yoko.png") left top repeat-x;
    background-size: 6px 2px;
    position: absolute;
    bottom: 0;
    right: 0
}

#Nav_area ul li {
    flex: 1 1 auto;
    position: relative;
    display: flex;
    justify-content: center
}

#Nav_area ul li>a {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 10
}

#Nav_area ul li.cs_mode .bubble,
#Nav_area ul li.cs_mode dl {
    opacity: 0.4
}

#Nav_area ul li:before {
    display: block;
    content: '';
    width: 2px;
    height: 100%;
    background: url("../images/005009340/sen_tate.png") left top repeat-y;
    background-size: 2px 6px;
    position: absolute;
    top: 0;
    right: 0
}

#Nav_area ul li:last-child:before {
    display: none
}

#Nav_area ul li .bubble {
    position: absolute;
    width: 98px;
    top: -8px;
    left: 202px
}

#Nav_area ul li .cs {
    position: absolute;
    width: 140px;
    top: 50%;
    left: 50%;
    z-index: 5;
    transform: translate3d(-50%, -50%, 0);
    margin-top: 6px
}

#Nav_area ul li dl {
    display: flex;
    align-items: center
}

#Nav_area ul li dl dt {
    display: inline-block;
    margin-right: 12px
}

#Nav_area ul li dl dt img {
    width: 100px
}

#Nav_area ul li dl dd p {
    position: relative;
    display: inline-block;
    line-height: 1.2;
    text-align: center;
    font-weight: 600;
    color: #ec7171;
    padding-bottom: 18px;
    padding-top: 28px
}

#Nav_area ul li dl dd p .web_font2,
#Nav_area ul li dl dd p .price .num,
.price #Nav_area ul li dl dd p .num,
#Nav_area ul li dl dd #Ar_area .box .cs_box>p>span,
#Ar_area .box #Nav_area ul li dl dd .cs_box>p>span {
    letter-spacing: 0.0em
}

#Nav_area ul li dl dd p:before {
    display: block;
    content: '';
    width: 12px;
    height: 7px;
    background: url("../images/005009340/nav_icon.png") left top repeat-y;
    background-size: 12px 7px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate3d(-50%, 0, 0)
}

@media screen and (max-width: 768px) {
    #Nav_area {
        margin-top: 0;
        padding-top: 4vw;
        margin-bottom: 13.3333333333vw
    }

    #Nav_area ul {
        padding-bottom: 5.3333333333vw
    }

    #Nav_area ul:before {
        width: 100%;
        height: 3px;
        background: url("../images/005009340/sen_yoko.png") left top repeat-x;
        background-size: 3px 1px
    }

    #Nav_area ul li {
        width: 33.33%
    }

    #Nav_area ul li:before {
        width: 1px;
        background: url("../images/005009340/sen_tate.png") left top repeat-y;
        background-size: 1px 3px
    }

    #Nav_area ul li .bubble {
        width: 21.3333333333vw;
        top: -5.3333333333vw;
        left: 10.6666666667vw;
        transform: rotate(15deg)
    }

    #Nav_area ul li .cs {
        width: 24vw;
        margin-top: 0
    }

    #Nav_area ul li dl {
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        align-items: center
    }

    #Nav_area ul li dl dt {
        display: inline-block;
        margin-right: 0;
        margin-left: 2vw;
        width: 25.3333333333vw
    }

    #Nav_area ul li dl dd p {
        padding-bottom: 2.9333333333vw;
        padding-top: 1.8666666667vw;
        font-size: 3.2vw
    }

    #Nav_area ul li dl dd p:before {
        width: 2.4vw;
        height: 1.4666666667vw;
        background: url("../images/005009340/nav_icon.png") left top repeat-y;
        background-size: 2.4vw 1.4666666667vw
    }

    #Nav_area ul li dl dd p .sp_tume {
        letter-spacing: -0.05em
    }
}

@keyframes rippleEffect {
    0% {
        scale: 0;
        opacity: 1
    }

    100% {
        scale: 100%;
        opacity: 0
    }
}

#Coupon_area {
    margin-bottom: 120px;
    position: relative
}

#Coupon_area .top_ttl {
    display: flex;
    justify-content: center;
    margin-bottom: 60px
}

#Coupon_area .top_ttl img {
    width: 382px
}

#Coupon_area .coupon_box {
    position: relative;
    margin: 0 100px 60px;
    z-index: 2
}

#Coupon_area .coupon_box .cord_area {
    width: 740px;
    height: 80px;
    background: #fff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    z-index: 10;
    bottom: 40px;
    left: 118px;
    padding: 0 12px 0 0
}

#Coupon_area .coupon_box .cord_area dl {
    display: flex;
    align-items: center;
    color: #ec7171
}

#Coupon_area .coupon_box .cord_area dl dt {
    font-size: 1.8rem;
    padding: 0 30px;
    position: relative;
    font-weight: 600
}

#Coupon_area .coupon_box .cord_area dl dt:before {
    display: block;
    content: '';
    width: 2px;
    height: 100%;
    background: url("../images/005009340/sen_tate.png") left top repeat-y;
    background-size: 2px 6px;
    position: absolute;
    top: 0;
    right: 0
}

#Coupon_area .coupon_box .cord_area dl dd {
    font-size: 3.4rem;
    padding: 0 0 0 44px
}

#Coupon_area .coupon_box .cord_area .btn {
    width: 300px;
    height: 56px;
    border-radius: 8px;
    background: #fd0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ec7171;
    font-size: 1.6rem;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    z-index: 1
}

#Coupon_area .coupon_box .cord_area .btn .txt {
    padding-right: 52px;
    position: relative;
    display: inline-block
}

#Coupon_area .coupon_box .cord_area .btn .txt:before {
    display: block;
    content: '';
    width: 38px;
    height: 38px;
    background: url("../images/005009340/icon_copy.png") left top repeat-y;
    background-size: 38px 38px;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate3d(0, -50%, 0)
}

#Coupon_area .coupon_box .cord_area .btn .ripple {
    --ease-in-sine: cubic-bezier(0.12, 0, 0.39, 0);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 550px;
    height: auto;
    aspect-ratio: 1;
    background-color: color-mix(in srgb, currentColor, #000 5%);
    border-radius: 50%;
    scale: 0;
    transform-origin: center center;
    translate: -50% -50%;
    animation-duration: 0.5s;
    animation-timing-function: var(--ease-in-sine);
    animation-iteration-count: 1
}

#Coupon_area .coupon_box .cord_area .btn .ripple.isPlaying {
    animation-name: rippleEffect
}

#Coupon_area .coupon_box .cord_area .btn_wrap {
    position: relative
}

#Coupon_area .coupon_box .cord_area .btn_wrap .js-alert {
    display: none;
    background: #54b3cb;
    color: white;
    padding: 4px 20px;
    margin-top: 8px;
    border-radius: 4px;
    font-size: 14px;
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translate3d(-50%, 0, 0);
    font-weight: 600
}

#Coupon_area .coupon_box .cord_area .btn_wrap .js-alert:before {
    display: block;
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    border-top: 5px solid #54b3cb;
    border-bottom: 0;
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translate3d(-50%, 0, 0)
}

#Coupon_area .coupon_box .cord_area .btn_wrap .js-alert.show {
    display: block
}

#Coupon_area .coupon_box .bg {
    width: 1067px;
    position: relative;
    left: 0;
    top: 0
}

#Coupon_area .how_to_area {
    padding: 0 90px 0 110px
}

#Coupon_area .how_to_area dl {
    display: flex;
    align-items: center;
    margin-bottom: 40px
}

#Coupon_area .how_to_area dl dt {
    width: 223px
}

#Coupon_area .how_to_area dl dd {
    flex: 1;
    padding-left: 20px;
    font-size: 2.2rem;
    font-weight: 600
}

#Coupon_area .deco_area .deco1,
#Coupon_area .deco_area .deco2 {
    position: absolute;
    left: 50%;
    transform: translate3d(-50%, 0, 0)
}

#Coupon_area .deco_area .deco1 {
    top: 20px;
    width: 423px;
    margin-left: 650px;
    z-index: 5
}

#Coupon_area .deco_area .deco2 {
    top: 550px;
    width: 423px;
    margin-left: -650px;
    z-index: 1
}

@media screen and (max-width: 768px) {
    #Coupon_area {
        margin-bottom: 16vw
    }

    #Coupon_area .top_ttl {
        margin-bottom: 8vw
    }

    #Coupon_area .top_ttl img {
        width: 57.8666666667vw
    }

    #Coupon_area .coupon_box {
        margin: 0 0 30.6666666667vw
    }

    #Coupon_area .coupon_box .cord_area {
        width: 70.6666666667vw;
        height: 9.6vw;
        border-radius: 1.0666666667vw;
        bottom: 6.6666666667vw;
        left: 5.3333333333vw;
        padding: 0 0 0 0;
        justify-content: center;
        z-index: 5
    }

    #Coupon_area .coupon_box .cord_area dl dt {
        font-size: 3.2vw;
        padding: 0 4.2666666667vw 0 0
    }

    #Coupon_area .coupon_box .cord_area dl dt:before {
        width: 1px;
        height: 100%;
        background: url("../images/005009340/sen_tate.png") left top repeat-y;
        background-size: 1px 3px
    }

    #Coupon_area .coupon_box .cord_area dl dd {
        font-size: 4.8vw;
        padding: 0 0 0 4.2666666667vw
    }

    #Coupon_area .coupon_box .cord_area .btn {
        width: 84vw;
        height: 14.6666666667vw;
        border-radius: 1.6vw;
        font-size: 3.7333333333vw
    }

    #Coupon_area .coupon_box .cord_area .btn:before {
        display: block;
        content: '';
        width: 6.9333333333vw;
        height: 6.9333333333vw;
        background: url("../images/005009340/icon_copy.png") left top repeat-y;
        background-size: 6.9333333333vw 6.9333333333vw;
        position: absolute;
        top: 50%;
        right: 4vw;
        transform: translate3d(0, -50%, 0)
    }

    #Coupon_area .coupon_box .cord_area .btn .txt {
        padding-right: 6.9333333333vw
    }

    #Coupon_area .coupon_box .cord_area .btn .txt:before {
        display: none
    }

    #Coupon_area .coupon_box .cord_area .btn_wrap {
        position: absolute;
        width: 84vw;
        height: 14.6666666667vw;
        bottom: -29.6vw;
        left: -1.3333333333vw
    }

    #Coupon_area .coupon_box .cord_area .btn_wrap .js-alert {
        padding: 1.0666666667vw 4vw;
        margin-top: 0;
        border-radius: 1.0666666667vw;
        font-size: 3.2vw;
        top: -6.6666666667vw;
        z-index: 5
    }

    #Coupon_area .coupon_box .cord_area .btn_wrap .js-alert:before {
        display: block;
        content: '';
        width: 0;
        height: 0;
        border-style: solid;
        border-right: 5px solid transparent;
        border-left: 5px solid transparent;
        border-top: 5px solid #54b3cb;
        border-bottom: 0;
        position: absolute;
        bottom: -4px;
        left: 50%;
        transform: translate3d(-50%, 0, 0)
    }

    #Coupon_area .coupon_box .bg {
        width: 100%
    }

    #Coupon_area .coupon_box .bg img {
        width: 94.6666666667vw;
        position: relative;
        left: -1.3333333333vw
    }

    #Coupon_area .coupon_box .chara {
        position: absolute;
        bottom: -4vw;
        right: 0vw;
        width: 20.1333333333vw;
        z-index: 6
    }

    #Coupon_area .how_to_area {
        padding: 0 5.3333333333vw
    }

    #Coupon_area .how_to_area dl {
        margin-bottom: 5.3333333333vw
    }

    #Coupon_area .how_to_area dl dt {
        width: 22.9333333333vw
    }

    #Coupon_area .how_to_area dl dd {
        padding-left: 2.6666666667vw;
        font-size: 3.7333333333vw;
        line-height: 1.4
    }

    #Coupon_area .deco_area .deco1,
    #Coupon_area .deco_area .deco2 {
        position: absolute;
        left: auto;
        transform: translate3d(0, 0, 0)
    }

    #Coupon_area .deco_area .deco1 {
        top: 10.6666666667vw;
        width: 45.3333333333vw;
        right: -21.3333333333vw;
        margin-left: 0
    }

    #Coupon_area .deco_area .deco2 {
        top: 70.6666666667vw;
        width: 33.8666666667vw;
        left: -5.3333333333vw;
        margin-left: 0
    }
}

@keyframes flowing {
    0% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(-100%)
    }
}

.deco_txt_line {
    margin-top: 100px;
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    display: flex;
    align-items: center;
    height: 100px;
    overflow: hidden;
    width: 100%;
    white-space: nowrap;
    z-index: 1;
    line-height: 1;
    position: relative;
    border-top: 2px solid #fd0;
    border-bottom: 2px solid #fd0
}

.deco_txt_line:before {
    display: block;
    content: '';
    width: 100%;
    height: 100px;
    background: url("../images/005009340/bg_ribon_y.png") left top repeat-x;
    background-size: 45px 100px;
    position: absolute;
    top: 0;
    left: 0
}

.deco_txt_line.white {
    border-color: #fff;
    margin-top: 120px
}

.deco_txt_line.white ul {
    animation-direction: reverse
}

.deco_txt_line.white:before {
    background: url("../images/005009340/bg_ribon_w.png") left top repeat-x;
    background-size: 45px 100px
}

.deco_txt_line ul {
    animation: flowing 40s linear infinite;
    transform: translateX(100%);
    margin: 0;
    padding: 0;
    letter-spacing: 0.1rem;
    display: flex;
    align-items: center
}

.deco_txt_line ul li {
    display: flex;
    align-items: center
}

.deco_txt_line ul li .txt {
    width: 553px
}

.deco_txt_line ul li .img {
    width: 53px;
    margin: 0 24px
}

@media screen and (max-width: 768px) {
    .deco_txt_line {
        margin-top: 10.6666666667vw;
        height: 16vw;
        border-top: 1px solid #fd0;
        border-bottom: 1px solid #fd0
    }

    .deco_txt_line:before {
        height: 16vw;
        background: url("../images/005009340/bg_ribon_y.png") left top repeat-x;
        background-size: 7.2vw 16vw
    }

    .deco_txt_line.white {
        margin-top: 16vw
    }

    .deco_txt_line.white:before {
        background: url("../images/005009340/bg_ribon_w.png") left top repeat-x;
        background-size: 7.2vw 16vw
    }

    .deco_txt_line ul li .txt {
        width: 92.5333333333vw
    }

    .deco_txt_line ul li .img {
        width: 8vw;
        margin: 0 3.7333333333vw
    }
}

#Product_area {
    position: relative;
    padding-bottom: 3.75vw
}

#Product_area:before {
    display: block;
    content: '';
    width: 100%;
    height: 7.5vw;
    min-width: 1260px;
    min-height: 94px;
    background: url("../images/005009340/kugiri_bg.png") center top no-repeat;
    background-size: cover;
    position: absolute;
    bottom: -6.25vw;
    left: 50%;
    transform: translate3d(-50%, 0, 0) scale(1, -1);
    z-index: 5
}

#Product_area .top_ttl {
    position: relative;
    display: flex;
    justify-content: center;
    margin-bottom: 80px
}

#Product_area .top_ttl picture>img {
    width: 560px
}

#Product_area .top_ttl .ttl_deco {
    width: 147px;
    position: absolute;
    left: 50%;
    transform: translate3d(-50%, 0, 0);
    bottom: 0;
    margin-left: -380px
}

#Product_area .list_area {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;
    z-index: 6
}

#Product_area .list_area li {
    width: 572px;
    position: relative;
    margin-bottom: 110px
}

#Product_area .list_area li:nth-last-child(2),
#Product_area .list_area li:last-child {
    margin-bottom: 0
}

#Product_area .list_area li>.num {
    width: 120px;
    position: absolute;
    left: -20px;
    top: -20px;
    z-index: 5
}

#Product_area .list_area li dl dt {
    width: 572px;
    height: 405px;
    position: relative;
    margin-bottom: 50px;
    display: inline-block
}

#Product_area .list_area li dl dt img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
    position: relative;
    z-index: 2
}

#Product_area .list_area li dl dt:before {
    display: block;
    content: '';
    width: 100%;
    height: 100%;
    background: #f48181;
    position: absolute;
    border-radius: 16px;
    top: 7px;
    left: 7px;
    z-index: 1
}

#Product_area .list_area li dl dd {
    margin: 0 40px
}

#Product_area .list_area li dl dd .price_area_wrap .flex {
    display: flex;
    margin-bottom: 16px
}

#Product_area .list_area li dl dd .price_area_wrap .ttl {
    font-size: 2.4rem;
    line-height: 1.4;
    margin-bottom: 22px;
    font-weight: 600;
    letter-spacing: 0.08em
}

#Product_area .list_area li dl dd .price_area_wrap .ttl span {
    display: block;
    font-size: 1.8rem
}

#Product_area .list_area li dl dd .price_area_wrap .txt {
    font-size: 1.4rem;
    line-height: 1.4;
    margin-bottom: 30px
}

#Product_area .list_area li dl dd .price_area_wrap .price_area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 30px;
    position: relative
}

#Product_area .list_area li dl dd .price_area_wrap .price_area:before {
    display: block;
    content: '';
    width: 100%;
    height: 6px;
    background: url("../images/005009340/sen_yoko.png") left top repeat-x;
    background-size: 6px 2px;
    position: absolute;
    top: 0;
    left: 0
}

#Product_area .deco_area .deco1 {
    position: absolute
}

#Product_area .deco_area .deco1 {
    top: -70px;
    right: -50px;
    width: 244px
}

@media screen and (max-width: 768px) {
    #Product_area {
        padding-bottom: 12vw
    }

    #Product_area:before {
        width: 100vw;
        height: 10.6666666667vw;
        min-width: auto;
        min-height: auto;
        background: url("../images/005009340/kugiri_bg_sp.png") center top no-repeat;
        background-size: cover;
        position: absolute;
        bottom: -10.1333333333vw;
        left: 0;
        transform: translate3d(0, 0, 0) scale(1, -1)
    }

    #Product_area .top_ttl {
        margin-bottom: 10.6666666667vw
    }

    #Product_area .top_ttl picture>img {
        width: 82.4vw
    }

    #Product_area .top_ttl .ttl_deco {
        width: 17.6vw;
        left: auto;
        right: 2.6666666667vw;
        transform: translate3d(0, 0, 0);
        bottom: auto;
        top: 18.9333333333vw;
        margin-left: 0;
        z-index: 8
    }

    #Product_area .list_area {
        display: block
    }

    #Product_area .list_area li {
        width: 100%;
        margin-bottom: 16vw
    }

    #Product_area .list_area li:nth-last-child(2) {
        margin-bottom: 16vw
    }

    #Product_area .list_area li:last-child {
        margin-bottom: 0
    }

    #Product_area .list_area li>.num {
        width: 19.0666666667vw;
        left: -1.3333333333vw;
        top: -4vw
    }

    #Product_area .list_area li dl dt {
        width: 92vw;
        height: 65.0666666667vw;
        margin-bottom: 8vw
    }

    #Product_area .list_area li dl dt img {
        border-radius: 2.1333333333vw
    }

    #Product_area .list_area li dl dt:before {
        border-radius: 2.4vw;
        top: 1.0666666667vw;
        left: 1.0666666667vw
    }

    #Product_area .list_area li dl dd {
        margin: 0 4vw
    }

    #Product_area .list_area li dl dd .price_area_wrap .flex {
        margin-bottom: 2.1333333333vw
    }

    #Product_area .list_area li dl dd .price_area_wrap .ttl {
        font-size: 4.8vw;
        margin-bottom: 3.7333333333vw
    }

    #Product_area .list_area li dl dd .price_area_wrap .ttl span {
        font-size: 3.4666666667vw
    }

    #Product_area .list_area li dl dd .price_area_wrap .txt {
        font-size: 3.2vw;
        margin-bottom: 3.7333333333vw
    }

    #Product_area .list_area li dl dd .price_area_wrap .price_area {
        padding-top: 4.8vw
    }

    #Product_area .list_area li dl dd .price_area_wrap .price_area:before {
        height: 3px;
        background: url("../images/005009340/sen_yoko.png") left top repeat-x;
        background-size: 3px 1px
    }

    #Product_area .deco_area .deco1 {
        top: -8vw;
        right: auto;
        left: 4vw;
        width: 20.4vw
    }
}

#Ar_area {
    padding-top: 13.125vw;
    background: url("../images/005009340/ar_bg.jpg") center top no-repeat;
    background-size: cover
}

#Ar_area.cs .box .box_in {
    padding: 100px 0 110px
}

#Ar_area.cs .deco_area .deco2 {
    top: 380px
}

#Ar_area .top_ttl {
    position: relative;
    display: flex;
    justify-content: center;
    margin-bottom: 60px
}

#Ar_area .top_ttl picture>img {
    width: 558px
}

#Ar_area .top_ttl .ttl_deco {
    width: 120px;
    position: absolute;
    left: 50%;
    transform: translate3d(-50%, 0, 0);
    bottom: 0;
    margin-left: 380px
}

#Ar_area .box {
    border-radius: 20px;
    background: #fff;
    position: relative
}

#Ar_area .box:before {
    display: block;
    content: '';
    width: 100%;
    height: 100%;
    background: #f48181;
    position: absolute;
    border-radius: 16px;
    top: 7px;
    left: 7px;
    z-index: 1
}

#Ar_area .box .box_in {
    padding: 100px 100px 70px;
    position: relative;
    z-index: 2;
    background: #fff;
    border-radius: 16px
}

#Ar_area .box .cs_box h3 {
    width: 495px;
    margin: 0 auto 40px
}

#Ar_area .box .cs_box>p {
    width: 487px;
    height: 48px;
    margin: 0 auto;
    background: url("../images/005009340/ar_cs_ribbon_bg.png") center top no-repeat;
    background-size: cover;
    color: #fd0;
    font-size: 2.0rem;
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center
}

#Ar_area .box .cs_box>p>span {
    font-size: 2.2rem
}

#Ar_area .box .img {
    margin-bottom: 72px
}

#Ar_area .box .step_area {
    margin-bottom: 60px
}

#Ar_area .box .step_area .sub_ttl_area {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin-bottom: 52px
}

#Ar_area .box .step_area .sub_ttl_area h3 {
    margin-bottom: 20px
}

#Ar_area .box .step_area .sub_ttl_area h3 img {
    width: 307px
}

#Ar_area .box .step_area .sub_ttl_area .att {
    width: 630px;
    text-align: left;
    font-size: 1.5rem;
    color: #ec7171;
    line-height: 1.6
}

#Ar_area .box .step_area .list_area {
    display: flex
}

#Ar_area .box .step_area .list_area li {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    padding-bottom: 10px
}

#Ar_area .box .step_area .list_area li:last-child:before {
    display: none
}

#Ar_area .box .step_area .list_area li:before {
    display: block;
    content: '';
    width: 2px;
    height: 100%;
    background: url("../images/005009340/sen_tate.png") left top repeat-y;
    background-size: 2px 6px;
    position: absolute;
    top: 0;
    right: 0
}

#Ar_area .box .step_area .list_area li dl {
    width: 200px
}

#Ar_area .box .step_area .list_area li dl dt {
    width: 180px;
    margin: 0 auto 22px
}

#Ar_area .box .step_area .list_area li dl dd h4 {
    text-align: center;
    margin-bottom: 12px;
    font-size: 1.8rem
}

#Ar_area .box .step_area .list_area li dl dd p {
    font-size: 1.5rem;
    line-height: 1.6
}

#Ar_area .box .btn_area .btn_box {
    position: relative;
    margin-bottom: 60px
}

#Ar_area .box .btn_area .btn_box .bubble {
    width: 484px;
    margin: 0 auto 20px
}

#Ar_area .box .btn_area .btn_box .btn {
    width: 560px;
    height: 100px;
    background: #f48181;
    border-radius: 12px;
    margin: 0 auto;
    position: relative;
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center
}

#Ar_area .box .btn_area .btn_box .btn .txt {
    padding-left: 52px;
    padding-right: 52px;
    position: relative;
    text-align: center
}

#Ar_area .box .btn_area .btn_box .btn .txt span {
    display: block;
    font-weight: 600;
    color: #fff;
    font-size: 2.0rem;
    line-height: 1
}

#Ar_area .box .btn_area .btn_box .btn .txt span.mini {
    font-size: 1.2rem;
    margin-top: 7px
}

#Ar_area .box .btn_area .btn_box .btn .txt:before {
    display: block;
    content: '';
    width: 34px;
    height: 27px;
    background: url("../images/005009340/icon_camera.png") left top no-repeat;
    background-size: 34px 27px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate3d(0, -50%, 0)
}

#Ar_area .box .btn_area .btn_box .btn .qr {
    width: 81px;
    display: inline-block;
    position: absolute;
    top: 50%;
    transform: translate3d(0, -50%, 0);
    right: 10px
}

#Ar_area .box .btn_area .btn_box .img {
    width: 187px;
    position: absolute;
    z-index: 9;
    bottom: -70px;
    left: 50%;
    transform: translate3d(-50%, 0, 0);
    margin-left: 368px
}

#Ar_area .deco_area .deco1,
#Ar_area .deco_area .deco2 {
    position: absolute
}

#Ar_area .deco_area .deco1 {
    top: -20px;
    left: -200px;
    width: 458px;
    z-index: 5
}

#Ar_area .deco_area .deco2 {
    top: 1300px;
    right: -120px;
    width: 213px;
    z-index: 5
}

@media screen and (max-width: 768px) {
    #Ar_area {
        padding-top: 25.3333333333vw;
        background: url("../images/005009340/ar_bg_sp.jpg") center top no-repeat;
        background-size: cover
    }

    #Ar_area.cs .box .box_in {
        padding: 18.6666666667vw 0
    }

    #Ar_area.cs .deco_area .deco2 {
        top: 68vw
    }

    #Ar_area .top_ttl {
        margin-bottom: 8vw
    }

    #Ar_area .top_ttl picture>img {
        width: 82vw
    }

    #Ar_area .top_ttl .ttl_deco {
        width: 13.8666666667vw;
        left: auto;
        right: 8vw;
        transform: translate3d(0, 0, 0);
        bottom: auto;
        top: -22.6666666667vw;
        margin-left: 0;
        z-index: 6
    }

    #Ar_area .box {
        border-radius: 2.6666666667vw
    }

    #Ar_area .box:before {
        border-radius: 2.1333333333vw;
        top: 1.0666666667vw;
        left: 1.0666666667vw
    }

    #Ar_area .box .box_in {
        padding: 4vw 4vw 8vw;
        border-radius: 2.1333333333vw
    }

    #Ar_area .box .cs_box h3 {
        width: 66.6666666667vw;
        margin: 0 auto 5.3333333333vw
    }

    #Ar_area .box .cs_box>p {
        width: 80vw;
        height: 8vw;
        background: url("../images/005009340/ar_cs_ribbon_bg.png") center top no-repeat;
        background-size: 80vw 8vw;
        font-size: 3.4666666667vw
    }

    #Ar_area .box .cs_box>p>span {
        font-size: 4.2666666667vw
    }

    #Ar_area .box .img {
        margin-bottom: 10.6666666667vw
    }

    #Ar_area .box .img img {
        border-radius: 2.1333333333vw
    }

    #Ar_area .box .step_area {
        margin-bottom: 13.3333333333vw
    }

    #Ar_area .box .step_area .sub_ttl_area {
        margin-bottom: 8vw
    }

    #Ar_area .box .step_area .sub_ttl_area h3 {
        margin-bottom: 2.6666666667vw
    }

    #Ar_area .box .step_area .sub_ttl_area h3 img {
        width: 52.8vw
    }

    #Ar_area .box .step_area .sub_ttl_area .att {
        font-size: 3.2vw;
        width: 76vw;
        line-height: 1.4
    }

    #Ar_area .box .step_area .list_area {
        display: flex;
        flex-wrap: wrap
    }

    #Ar_area .box .step_area .list_area li {
        flex: 1 1 auto;
        width: 50%;
        margin-bottom: 8vw;
        padding-bottom: 1.3333333333vw
    }

    #Ar_area .box .step_area .list_area li:before {
        width: 1px;
        background: url("../images/005009340/sen_tate.png") left top repeat-y;
        background-size: 1px 3px
    }

    #Ar_area .box .step_area .list_area li:last-child:before,
    #Ar_area .box .step_area .list_area li:nth-of-type(2):before {
        display: none
    }

    #Ar_area .box .step_area .list_area li:nth-child(odd) dl {
        padding-right: 5.3333333333vw;
        padding-left: 1.3333333333vw
    }

    #Ar_area .box .step_area .list_area li:nth-child(even) dl {
        padding-right: 1.3333333333vw;
        padding-left: 5.3333333333vw
    }

    #Ar_area .box .step_area .list_area li:last-child,
    #Ar_area .box .step_area .list_area li:nth-last-child(2) {
        margin-bottom: 0vw
    }

    #Ar_area .box .step_area .list_area li dl {
        width: 100%
    }

    #Ar_area .box .step_area .list_area li dl dt {
        width: 28.8vw;
        margin: 0 auto 3.7333333333vw
    }

    #Ar_area .box .step_area .list_area li dl dd h4 {
        margin-bottom: 2.1333333333vw;
        font-size: 3.7333333333vw;
        line-height: 1.4
    }

    #Ar_area .box .step_area .list_area li dl dd p {
        font-size: 3.2vw
    }

    #Ar_area .box .btn_area {
        margin: 0 4vw
    }

    #Ar_area .box .btn_area .btn_box {
        margin: 0 0 9.6vw
    }

    #Ar_area .box .btn_area .btn_box .bubble {
        width: 76vw;
        margin: 0 auto 4vw
    }

    #Ar_area .box .btn_area .btn_box .btn {
        width: 100%;
        height: 16vw;
        border-radius: 1.6vw;
        position: relative
    }

    #Ar_area .box .btn_area .btn_box .btn>a {
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        z-index: 10
    }

    #Ar_area .box .btn_area .btn_box .btn:before {
        display: block;
        content: '';
        width: 6.9333333333vw;
        height: 6.9333333333vw;
        background: url("../images/005009340/btn_arrow_sp.png") left top no-repeat;
        background-size: 6.9333333333vw 6.9333333333vw;
        position: absolute;
        top: 50%;
        right: 4vw;
        transform: translate3d(0, -50%, 0)
    }

    #Ar_area .box .btn_area .btn_box .btn .txt {
        padding-left: 8.2666666667vw;
        padding-right: 5.6vw
    }

    #Ar_area .box .btn_area .btn_box .btn .txt span {
        font-size: 3.7333333333vw
    }

    #Ar_area .box .btn_area .btn_box .btn .txt span.mini {
        font-size: 2.6666666667vw;
        margin-top: 1.3333333333vw
    }

    #Ar_area .box .btn_area .btn_box .btn .txt:before {
        width: 5.7333333333vw;
        height: 4.6666666667vw;
        background: url("../images/005009340/icon_camera_sp.png") left top no-repeat;
        background-size: 5.7333333333vw 4.6666666667vw
    }

    #Ar_area .deco_area .deco1 {
        top: -25.3333333333vw;
        left: -10.6666666667vw;
        width: 48.9333333333vw
    }

    #Ar_area .deco_area .deco2 {
        top: 73.3333333333vw;
        right: -4vw;
        width: 22.6666666667vw
    }
}