/*==========================================================================
# monthly-derivery-service
========================================================================== */

/* commonに追加 */
:root {
    --blue10-color: #ECF1F5;
    --blue20-color: #D8E4EB;
}

/* --------------------------------------------------------------------------
XXXXX
-------------------------------------------------------------------------- */
/* @media all and (min-width: 768px),
print {
}
@media all and (max-width: 767px) {
} */


/* --------------------------------------------------------------------------
common
-------------------------------------------------------------------------- */

@media all and (min-width: 768px),
print {

    .lp-main{
    }
    .lp-main .c-btn-txt{
        font-weight: 700;
    }
    .sec-lp {
        position: relative;
        padding: calc(120 / var(--font) * 1rem) calc(20 / var(--font) * 1rem) 0;
    }
    .sec-lp__inner{
        max-width: 1024px;
        width: calc(1024 / var(--font) * 1rem);
        margin-left: auto;
        margin-right: auto;
    }
    .sec-lp + .sec-lp{
        padding: calc(82 / var(--font) * 1rem) calc(20 / var(--font) * 1rem) 0;
    }
    .sec-lp__head .c-title{
        margin-bottom: calc(50 / var(--font) * 1rem);
    }

    /* head */
    .sec-lp__head{
        text-align: center;
    }
    .c-title-main{
        display: block;
        letter-spacing: 0.07em;
        font-size:  calc(34 / var(--font) * 1rem);
    }
    .c-title-sub{
        margin-bottom: 0 !important;
        font-size: calc(24 / var(--font) * 1rem);
        letter-spacing: 0.05em;
    }
    .dot-text {
        font-size: calc(40 / var(--font) * 1rem);
        color: var(--red-color);
        line-height: 1.6;
        letter-spacing: 0.02em;
        background-position: top calc(22 / var(--font) * 1rem) left 0px;
        background-repeat: repeat-x;
        background-size: 1.0em .3em;
        background-image: radial-gradient(.12em .12em at center center,var(--red-color),var(--red-color) 100%,transparent,transparent);
        padding-top: .6em;
    }
    
    .u-bg-lp {
        background: transparent;
        position: relative;
        z-index: 0;
        padding-bottom: calc(96 / var(--font) * 1rem);
    }
    .u-bg-lp::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100%;
        background-color: var(--red10-color);
        z-index: -1;
    }
    .u-bg-lp.bg--brown10::before{
        background: var(--brown10-color);
    }
    .u-bg-lp.bg--blue10::before{
        background: var(--blue10-color);
    }
    .u-bg-lp.bg--red10::before{
        background: var(--red10-color);
    }
    .fs-c-breadcrumb {
        padding: calc(12 / var(--font) * 1rem) calc(40 / var(--font)* 1rem)!important;
    }
    .c-btn--xl .c-icon--arrow, .c-btn--xxl .c-icon--arrow {
        --svg-width: 9.91;
        --svg-height: 18.49;
    }
    .c-icon--arrow.c-icon--down{
        margin-top: calc(8 / var(--font) * 1rem);
    }
    .c-icon--arrow.c-icon--up{
        margin-top: calc(0 / var(--font) * 1rem);
    }
}
@media all and (max-width: 767px) {
    .lp-main{
    }
    .sec-lp {
        position: relative;
        padding: calc(46 / var(--font) * 1rem) calc(15 / var(--font) * 1rem) 0;
    }
    .sec-lp__inner{
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    .sec-lp + .sec-lp{
    }
    .sec-lp__head .c-title{
        margin-bottom: calc(38 / var(--font) * 1rem);
    }

    .lp-main .c-btn-txt{
        --btn-font-size: 16;
        font-weight: 700;
        letter-spacing: 0;
    }

    /* head */
    .sec-lp__head{
        text-align: center;
    }
    .c-title-main{
        display: block;
        letter-spacing: 0.07em;
        font-size: calc(24 / var(--font) * 1rem);
    }
    .c-title-sub{
        margin-bottom: 0 !important;
        font-size: calc(20 / var(--font) * 1rem);
        letter-spacing: 0.07em;
    }
    .dot-text {
        font-size: calc(28 / var(--font) * 1rem);
        color: var(--red-color);
        line-height: 1.6;
        letter-spacing: 0.07em;
        background-position: top calc(22 / var(--font) * 1rem) left 0px;
        background-repeat: repeat-x;
        background-size: 1.04em .3em;
        background-image: radial-gradient(.12em .12em at center center,var(--red-color),var(--red-color) 100%,transparent,transparent);
        padding-top: .6em;
    }
    
    .u-bg-lp {
        background: transparent;
        position: relative;
        z-index: 0;
        padding-bottom: calc(56 / var(--font) * 1rem);
    }
    .u-bg-lp::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100%;
        background-color: var(--red10-color);
        z-index: -1;
    }
    .u-bg-lp.bg--brown10::before{
        background: var(--brown10-color);
    }
    .u-bg-lp.bg--blue10::before{
        background: var(--blue10-color);
    }
    .u-bg-lp.bg--red10::before{
        background: var(--red10-color);
    }


    .sec-benefit .c-icon--arrow::after {
        --svg-path: url(../img/common/ico_arrow_02_sp.svg);
        -webkit-mask: var(--svg-path);
        mask: var(--svg-path);
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        background-color: var(--white-color);
    }
    .sec-benefit .c-btn--xl .c-icon--arrow, .c-btn--xxl .c-icon--arrow {
        --svg-width: 8.26;
        --svg-height: 13.48;
    }
    .sec-benefit .c-icon--arrow.c-icon--up, .c-icon--arrow.c-icon--down {
        right: calc(25.25 / var(--font) * 1rem);
    }
    body:not(.fs-body-custom) .fs-c-breadcrumb{
        padding: calc(12 / var(--font) * 1rem) calc(40 / var(--font)* 1rem)!important;
        max-width: 100% !important;
    }
}

/* --------------------------------------------------------------------------s
side navi
-------------------------------------------------------------------------- */
@media all and (min-width: 768px),
print {
    body.pageup .c-side-navi {
        pointer-events: all;
        opacity: 0;
        transition: all .5s ease;
    }
    .c-side-navi {
        position: fixed;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        opacity: 1;
        transition: all .5s ease;
        z-index: 999;
        cursor: pointer;
    }
    .c-side-navi__item {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        width: calc(80 / var(--font) * 1rem);
        height: calc(220 / var(--font) * 1rem);
        background: var(--red-color);
        border-top-left-radius: calc(10 / var(--font) * 1rem);
        border-bottom-left-radius: calc(10 / var(--font) * 1rem);
    }
    .c-side-navi__text {
        color: var(--white-color);
        font-weight: 600;
        font-size: calc(18 / var(--font) * 1rem);
        pointer-events: none;
        writing-mode: vertical-rl;
        letter-spacing: 0.2em;
    }

}
@media all and (max-width: 767px) {
    body.pageup .c-side-navi {
        pointer-events: all;
        opacity: 0;
        transition: all .5s ease;
    }
    .c-side-navi {
        position: fixed;
        right: 0;
        bottom: 0;
        opacity: 1;
        transition: all .5s ease;
        z-index: 999;
        width: 100%;
    }
    .c-side-navi__item {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: calc(64 / var(--font) * 1rem);
        background: var(--red-color);
        border-top-left-radius: calc(10 / var(--font) * 1rem);
        border-top-right-radius: calc(10 / var(--font) * 1rem);
    }
    .c-side-navi__text {
        color: var(--white-color);
        font-weight: 700;
        font-size: calc(16 / var(--font) * 1rem);
        pointer-events: none;
    }
}


/* --------------------------------------------------------------------------
MV
-------------------------------------------------------------------------- */
@media all and (min-width: 768px),
print {
}
@media all and (max-width: 767px) {
    .mv__inner img{
        width: 100%;
    }
}

/* --------------------------------------------------------------------------
benefit
-------------------------------------------------------------------------- */
@media all and (min-width: 768px),
print {
    .bl_benefit{
        padding: calc(36 / var(--font) * 1rem) calc(36 / var(--font) * 1rem) calc(32 / var(--font) * 1rem);
        text-align: center;
        margin: 0 auto calc(48 / var(--font) * 1rem);
        display: block;
        border: calc(8 / var(--font) * 1rem) solid var( --brown20-color);
        position: relative;
        background: #fff;
    }
    .bl_benefit::after{
        content: '';
        display: block;
        background: url(/item/assets/v2/img/monthly-derivery-service/img_benefit01.png) no-repeat center top;
        background-size: contain;
        width: calc(211 / var(--font) * 1rem);
        height: calc(244 / var(--font) * 1rem);
        position: absolute;
        top: calc(-44 / var(--font) * 1rem);
        right: calc(51 / var(--font) * 1rem);
    }
    .benefit-title,
    .benefit-title-sub{
        position: relative;
    }
    .bl_benefit::before{
        content: '';
        display: block;
        background: url(/item/assets/v2/img/monthly-derivery-service/icon_benefit.png) no-repeat center top;
        background-size: contain;
        width: calc(165.01 / var(--font) * 1rem);
        height: calc(159.2 / var(--font) * 1rem);
        position: absolute;
        top: calc(-69 / var(--font) * 1rem);
        left: calc(-35.84 / var(--font) * 1rem);
    }
    .benefit-title-sub span.brackets{
        position: relative;
        display: block;
        margin:0 auto calc(8 / var(--font) * 1rem);
        width: calc(343.72 / var(--font) * 1rem);
    }
    .benefit-title-sub span.brackets::before{
        content: '';
        display: block;
        background: url(/item/assets/v2/img/monthly-derivery-service/icon_brackets_left.svg) no-repeat center top;
        background-size: contain;
        width: calc(14 / var(--font) * 1rem);
        height: calc(23 / var(--font) * 1rem);
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
    }
    .benefit-title-sub span.brackets::after{
        content: '';
        display: block;
        background: url(/item/assets/v2/img/monthly-derivery-service/icon_brackets_right.svg) no-repeat center top;
        background-size: contain;
        width: calc(14 / var(--font) * 1rem);
        height: calc(23 / var(--font) * 1rem);
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
    }
    .benefit-text{
        font-size: calc(14 / var(--font) * 1rem);
        letter-spacing: 0.07em;
    }
    .bl_benefit .sec-lp__head .c-title{
        margin-bottom: calc(16 / var(--font) * 1rem);
        position: relative;
    }
    .bl_benefit .sec-lp__head .c-title::before{
        content: '';
        display: block;
        background: url(/item/assets/v2/img/monthly-derivery-service/img_benefit02.png) no-repeat center top;
        background-size: contain;
        width: calc(113 / var(--font) * 1rem);
        height: calc(111 / var(--font) * 1rem);
        position: absolute;
        top: calc(-10 / var(--font) * 1rem);
        left: calc(-145 / var(--font) * 1rem);
    }
    .bl_benefit .u-marker {
        background: linear-gradient(transparent 60%, var(--brown10-color) 60%);
        padding-bottom: calc(2 / var(--font) * 1rem);
    }
    .sec-benefit .c-btn{
        margin: 0 auto;
    }
    .sec-benefit .c-list__item{
        justify-content: center;
        margin-top: calc(4 / var(--font) * 1rem);
    }

}
@media all and (max-width: 767px) {
    .sec-benefit .sec-lp__inner{
        position: relative;
    }
    .bl_benefit{
        padding: calc(14 / var(--font) * 1rem) calc(14 / var(--font) * 1rem) calc(210 / var(--font) * 1rem);
        text-align: center;
        margin: 0 auto;
        display: block;
        border: 8px solid var( --brown20-color);
        position: relative;
    }
    .bl_benefit::after{
        content: '';
        display: block;
        background: url(/item/assets/v2/img/monthly-derivery-service/img_benefit01_sp.png) no-repeat center top;
        background-size: contain;
        width: calc(227 / var(--font) * 1rem);
        height: calc(168 / var(--font) * 1rem);
        position: absolute;
        bottom: calc(22 / var(--font) * 1rem);
        left: 50%;
        transform: translateX(-50%);
        margin-left: calc(-10 / var(--font) * 1rem);
    }
    
    .benefit-title,
    .benefit-title-sub{
        position: relative;
    }
    .benefit-title{
        font-size: calc(20 / var(--font) * 1rem);
    }
    .benefit-text{
        font-size: calc(12 / var(--font) * 1rem);
        text-align: center;
    }
    .benefit-title::before{
        content: '';
        display: block;
        background: url(/item/assets/v2/img/monthly-derivery-service/icon_benefit_sp.png) no-repeat center top;
        background-size: contain;
        width: calc(86.18 / var(--font) * 1rem);
        height: calc(86.18 / var(--font) * 1rem);
        position: absolute;
        top: calc(-100 / var(--font)* 1rem);
        left: calc(-74 / var(--font)* 1rem);
    }

    /* SP２段 */
    .sec-benefit .benefit-title-sub span.brackets{
        position: relative;
        display: block;
        margin:0 auto calc(8 / var(--font) * 1rem);
        width: fit-content;
        font-size: calc(14 / var(--font) * 1rem);
    }
    .sec-benefit .benefit-title-sub span.brackets::before{
        content: '';
        display: block;
        background: url(/item/assets/v2/img/monthly-derivery-service/icon_brackets_left_sp.svg) no-repeat center top;
        background-size: contain;
        width: calc(17 / var(--font) * 1rem);
        height: calc(28 / var(--font) * 1rem);
        position: absolute;
        bottom: 0;
        left: calc(-25 / var(--font) * 1rem);
    }
    .sec-benefit .benefit-title-sub span.brackets::after{
        content: '';
        display: block;
        background: url(/item/assets/v2/img/monthly-derivery-service/icon_brackets_right_sp.svg) no-repeat center top;
        background-size: contain;
        width: calc(17 / var(--font) * 1rem);
        height: calc(28 / var(--font) * 1rem);
        position: absolute;
        bottom: 0;
        right: calc(-25 / var(--font) * 1rem);
    }


    /* SP１段 */
    .benefit-title-sub span.brackets{
        position: relative;
        display: block;
        margin:0 auto calc(8 / var(--font) * 1rem);
        width: fit-content;
        font-size: calc(14 / var(--font) * 1rem);
    }
    .benefit-title-sub span.brackets::before{
        content: '';
        display: block;
        background: url(/item/assets/v2/img/monthly-derivery-service/icon_brackets_left.svg) no-repeat center top;
        background-size: contain;
        width: calc(11 / var(--font) * 1rem);
        height: calc(17 / var(--font) * 1rem);
        position: absolute;
        bottom: 0;
        left: calc(-18 / var(--font) * 1rem);
    }
    .benefit-title-sub span.brackets::after{
        content: '';
        display: block;
        background: url(/item/assets/v2/img/monthly-derivery-service/icon_brackets_right.svg) no-repeat center top;
        background-size: contain;
        width: calc(11 / var(--font) * 1rem);
        height: calc(17 / var(--font) * 1rem);
        position: absolute;
        bottom: 0;
        right: calc(-14 / var(--font) * 1rem);
    }
    .benefit-text{
        letter-spacing: 0;
    }
    .sec-benefit .c-btn{
        width: calc(240 / var(--font)* 1rem);
        height: calc(56 / var(--font)* 1rem);
        margin: calc(40 / var(--font)* 1rem) auto 0;
    }
    .bl_benefit .c-btn-txt {
        font-size: calc(16 / var(--font) * 1rem);
        letter-spacing: 0.07em;
        font-weight: 700;
    }
    .bl_benefit .c-btn--xl .c-icon--arrow, .c-btn--xxl .c-icon--arrow {
        --svg-width: 8.26;
        --svg-height: 13.48;
    }
    .bl_benefit .sec-lp__head .c-title{
        margin-bottom: calc(12 / var(--font) * 1rem);
    }
    .bl_benefit .u-marker {
        background: linear-gradient(transparent 60%, var(--brown10-color) 60%);
        padding-bottom: calc(6 / var(--font) * 1rem);
    }
    .sec-benefit .c-btn--red .c-btn-txt {
       font-size: calc(16 / var(--font)* 1rem) !important;
    }

    .sec-benefit .c-list__item{
        justify-content: center;
        margin-top: calc(4 / var(--font) * 1rem);
    }
}

@media all and (max-width: 424px){
    .benefit-title::before{
        top: calc(-100 / var(--font)* 1rem);
        left: calc(-50 / var(--font)* 1rem);
    }
}


/* --------------------------------------------------------------------------
point
-------------------------------------------------------------------------- */
@media all and (min-width: 768px),
print {
    .sec-point{
        text-align: center;
        padding-bottom: calc(148 / var(--font) * 1rem) !important;
    }
    .bl_flow{
        display: flex;
        justify-content: center;
        align-items: flex-start;
        margin: 0 auto;
    }
    .flow-item{
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: calc(100%/3);
    }
    .flow-item + .flow-item{
        margin-left: calc(15 / var(--font) * 1rem);
    }
    .flow-item .u-en{
        color: var(--red-color);
        font-size: calc(16 / var(--font) * 1rem);
    }
    .flow-item .u-en span{
        font-size: calc(20 / var(--font) * 1rem);
        line-height: 1.1;
        margin-left: calc(4 / var(--font) * 1rem);
    }
    .flow-head{
        background: var(--red10-color);
        width: fit-content;
        border-radius: 99px;
        padding: 0 calc(30 / var(--font) * 1rem);
        height: calc(40 / var(--font) * 1rem);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto calc(24 / var(--font) * 1rem);
    }
    .flow-item:nth-of-type(1) .flow-img{
        width: calc(64 / var(--font) * 1rem);
        height: calc(55.52 / var(--font) * 1rem);
        margin: calc(24 / var(--font) * 1rem) auto calc(25.48 / var(--font) * 1rem);
    }
    .flow-item:nth-of-type(2) .flow-img{
        width: calc(72 / var(--font) * 1rem);
        height: calc(35.6 / var(--font) * 1rem);
        margin: calc(37 / var(--font) * 1rem) auto calc(35.4 / var(--font) * 1rem);
    }
    .flow-item:nth-of-type(3) .flow-img{
        width: calc(155 / var(--font) * 1rem);
        height: calc(72 / var(--font) * 1rem);
        margin: calc(14 / var(--font) * 1rem) auto calc(20 / var(--font) * 1rem);
    }

}
@media all and (max-width: 767px) {
    .sec-point{
        text-align: center;
        padding-bottom: calc(56 / var(--font) * 1rem);
    }
    .bl_flow{
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: 0 auto;
    }
    .flow-item{
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 100%;
    }
    .flow-item + .flow-item{
        margin-top: calc(24 / var(--font) * 1rem);
    }
    .flow-item .u-en{
        color: var(--red-color);
        font-size: calc(16 / var(--font) * 1rem);
        letter-spacing: 0.03em!important;
    }
    .flow-item .u-en span{
        font-size: calc(20 / var(--font) * 1rem);
        line-height: 1.1;
        margin-left: calc(4 / var(--font) * 1rem);
    }
    .flow-head{
        background: var(--red10-color);
        width: fit-content;
        border-radius: 99px;
        padding: 0 calc(30 / var(--font) * 1rem);
        height: calc(40 / var(--font) * 1rem);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto calc(16 / var(--font) * 1rem);
    }
    .flow-item:nth-of-type(1) .flow-img{
        width: calc(64 / var(--font) * 1rem);
        height: calc(55.52 / var(--font) * 1rem);
        margin: calc(16 / var(--font) * 1rem) auto calc(16 / var(--font) * 1rem);
    }
    .flow-item:nth-of-type(2) .flow-img{
        width: calc(72 / var(--font) * 1rem);
        height: calc(35.6 / var(--font) * 1rem);
        margin: calc(15 / var(--font) * 1rem) auto calc(16 / var(--font) * 1rem);
    }
    .flow-item:nth-of-type(3) .flow-img{
        width: calc(155 / var(--font) * 1rem);
        height: calc(72 / var(--font) * 1rem);
        margin: calc(24 / var(--font) * 1rem) auto calc(16 / var(--font) * 1rem);
    }
    .flow-item .c-txt--s {
        letter-spacing: 0.07em!important;
    }
}

/* --------------------------------------------------------------------------
BRAND
-------------------------------------------------------------------------- */
@media all and (min-width: 768px),
print {
    .sec-brand .c-column__title-sub {
        margin-top: calc(10 / var(--font) * 1rem);
    }
    .sec-brand.sec-lp {
        padding: calc(72 / var(--font) * 1rem) calc(20 / var(--font) * 1rem) calc(80 / var(--font) * 1rem);
    }
    .sec-brand .c-column__title {
        margin-top: calc(32 / var(--font) * 1rem);
    }
    .sec-brand .c-column__list{
        margin-top: calc(40 / var(--font) * 1rem);
    }
}
@media all and (max-width: 767px) {
    .sec-brand .c-column__title-sub {
        margin-top: calc(10 / var(--font) * 1rem);
    }
    .sec-brand.sec-lp {
        padding: calc(72 / var(--font) * 1rem) calc(20 / var(--font) * 1rem) calc(80 / var(--font) * 1rem);
    }
    .sec-brand .c-column__title {
        margin-top: calc(32 / var(--font) * 1rem);
    }
    .sec-brand {
        margin-bottom: calc(24 / var(--font) * 1rem);
    }
    .sec-brand .c-column__list__img img{
        width: 100%;
    }
}



/* --------------------------------------------------------------------------
sustainable
-------------------------------------------------------------------------- */
@media all and (min-width: 768px),
print {
    .sec-sustainable{
        padding-bottom: calc(96 / var(--font) * 1rem)!important;
    }
    .sustainable__body{
        position: relative;
    }
    .sec-sustainable .c-title-main{
        margin: calc(30 / var(--font) * 1rem) auto 0;
        position: relative;
    }
    .sec-sustainable .c-title-main::after{
        content: '※';
        display: block;
        font-size: calc(12 / var(--font) * 1rem);
        font-weight: 500;
        position: absolute;
        top: calc(6 / var(--font) * 1rem);
        right: calc(-12 / var(--font) * 1rem);;
    }
    .sustainable__body .c-txt{
        margin-top: calc(40 / var(--font) * 1rem);
    }
    .sustainable__body .c-txt + .c-list {
        margin-top: calc(14 / var(--font) * 1rem);
    }
    .c-link{
        margin-top: calc(33 / var(--font) * 1rem);
    }
}
@media all and (max-width: 767px) {
    .sec-sustainable{
        margin-top: calc(56 / var(--font) * 1rem);
        padding: 0 calc(15 / var(--font)* 1rem) calc(56 / var(--font)* 1rem);
    }
    .sustainable__body{
        position: relative;
    }
    .sec-sustainable .c-title-main{
        margin-top: calc(10 / var(--font)* 1rem);
    }
    .sustainable__body .c-txt{
        margin-top: calc(24 / var(--font) * 1rem);
    }
    .sustainable__body .c-txt + .c-list {
        margin-top: calc(17 / var(--font) * 1rem);
    }
    .c-link{
        margin-top: calc(24 / var(--font) * 1rem);
    }
    span.mt-sp{
        display: block;
        margin-top: calc(16 / var(--font) * 1rem);
    }
    .sustainable__body img{
        width: 100%;
    }
    .sec-sustainable .c-link a {
        font-size: calc(14 / var(--font) * 1rem);
    }
    

}

/* --------------------------------------------------------------------------
qa
-------------------------------------------------------------------------- */
summary {
    display: block;
    list-style: none;
}
summary::-webkit-details-marker {
    display:none;
}
@media all and (min-width: 768px),
print {
    .summary {
        cursor: pointer;
    }
    .answer {
        overflow: hidden;
    }
    .qa__head{
        text-align: center;
        margin: 0 auto;
        display: block;
    }
    .qa__head span{
        display: block;
        margin-bottom: 0 !important;
    }

    .bl_qa{
        border-bottom: calc(3 / var(--font) * 1rem) solid var(--red10-color);
    }
    .text-q {
        position: relative;
        padding: calc(42 / var(--font) * 1rem) calc(56 / var(--font) * 1rem) calc(35.5 / var(--font) * 1rem);
        margin-bottom: 0;
        font-size: calc(20 / var(--font) * 1rem);
        font-weight: 600;
        width: 100%;
        letter-spacing: 0.07em;
    }
    .text-q::before{
        content: 'Q.';
        font-family: 'Lato', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
        letter-spacing: 0.07em!important;
        font-weight: 900!important;
        line-height: 1.5!important;
        color: var(--red-color);
        font-size: calc(28 / var(--font) * 1rem);
        position: absolute;
        top: 50%;
        left: 0%;
        transform: translateY(-50%);
    }
    .text-a{
        position: relative;
    }
    .text-a::before{
        content: 'A.';
        font-family: 'Lato', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
        letter-spacing: 0.07em!important;
        font-weight: 900!important;
        line-height: 1.5!important;
        font-size: calc(28 / var(--font) * 1rem);
        position: absolute;
        top: calc(-6 / var(--font) * 1rem);
        left: calc(-54 / var(--font) * 1rem);
    }
    .text-a span{
        display: block;
        margin-top: 1em;
    }
    .qa-detail__inner{
        padding: 0 calc(56 / var(--font) * 1rem) calc(38 / var(--font) * 1rem);   
    }

    /* icon */
    .icon_toggle {
        display: block;
    }
    .icon_toggle {
        position: absolute;
        width: calc(17.33 / var(--font) * 1rem);
        height: calc(17.33 / var(--font) * 1rem);
        top: 50%;
        right: calc(-2 / var(--font) * 1rem);
        margin-top: calc(-2 / var(--font) * 1rem);
        transform: translate(-50%, -50%) rotate(0deg);
        cursor: pointer;
        z-index: 100;
        transition: 0.4s cubic-bezier(0.2, 0.6, 0.3, 1.1);
    }
    .icon_toggle:before{
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        height: 100%;
        width: 2px;
        background: var(--black-color);
        border-radius: 99px;
    }
    .icon_toggle:after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        height: 2px;
        width: 100%;
        background: var(--black-color);
        border-radius: 99px;
    }
    details[open] .icon_toggle::before {
        width: 0;
    }
    details[open] .icon_toggle {
        transform: translate(-50%, -50%) rotate(180deg);
    }

}
@media all and (max-width: 767px) {
    .summary {
        cursor: pointer;
    }
    .answer {
        overflow: hidden;
    }
    .qa__head{
        text-align: center;
        margin: 0 auto;
        display: block;
    }
    .qa__head .c-title {
        margin-bottom: calc(35 / var(--font)* 1rem);
        font-size: calc(18 / var(--font)* 1rem);

    }
    .qa__head span{
        display: block;
        margin-bottom: 0 !important;
    }

    .bl_qa{
        border-bottom: calc(3 / var(--font) * 1rem) solid var(--red10-color);
    }
    .text-q {
        position: relative;
        padding:calc(32 / var(--font) * 1rem) calc(48 / var(--font) * 1rem) calc(32 / var(--font) * 1rem) calc(45 / var(--font) * 1rem);
        margin-bottom: 0;
        font-size: calc(16 / var(--font) * 1rem);
        font-weight: 600;
        width: 100%;
        letter-spacing: 0.07em;
        line-height: 1.6;
    }
    .text-q::before{
        content: 'Q.';
        font-family: 'Lato', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
        letter-spacing: 0.07em!important;
        font-weight: 900!important;
        line-height: 1!important;
        color: var(--red-color);
        font-size: calc(26 / var(--font) * 1rem);
        position: absolute;
        top: 0;
        left: 0%;
        padding-top: calc(30 / var(--font) * 1rem);
    }
    .text-a{
        position: relative;
        font-size: calc(14 / var(--font) * 1rem);
    }
    .text-a::before{
        content: 'A.';
        font-family: 'Lato', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
        letter-spacing: 0.07em!important;
        font-weight: 900!important;
        line-height: 1.5!important;
        font-size: calc(26 / var(--font) * 1rem);
        position: absolute;
        top: calc(-6 / var(--font) * 1rem);
        left: calc(-45 / var(--font) * 1rem);
    }
    .text-a span{
        display: block;
        margin-top: 1em;
    }
    .qa-detail__inner{
        padding: 0 calc(30 / var(--font) * 1rem) calc(32 / var(--font) * 1rem) calc(45 / var(--font) * 1rem);   
    }

    /* icon */
    .icon_toggle {
        display: block;
    }
    .icon_toggle {
        position: absolute;
        width: calc(17.33 / var(--font) * 1rem);
        height: calc(17.33 / var(--font) * 1rem);
        top: calc(46 / var(--font) * 1rem);
        right: 0;
        transform: translate(-50%, -50%) rotate(0deg);
        cursor: pointer;
        z-index: 100;
        transition: 0.4s cubic-bezier(0.2, 0.6, 0.3, 1.1);
    }
    .icon_toggle:before{
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        height: 100%;
        width: 2px;
        background: var(--black-color);
        border-radius: 99px;
    }
    .icon_toggle:after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        height: 2px;
        width: 100%;
        background: var(--black-color);
        border-radius: 99px;
    }
    details[open] .icon_toggle::before {
        width: 0;
    }
    details[open] .icon_toggle {
        transform: translate(-50%, -50%) rotate(180deg);
    }
}




/* --------------------------------------------------------------------------
course
-------------------------------------------------------------------------- */
@media all and (min-width: 768px),
print {
    .sec-course .sec-lp__inner{
        padding-bottom: calc(104 / var(--font) * 1rem);
    }
    .sec-course .c-title-main {
        margin-top: calc(24 / var(--font) * 1rem);
    }
    .dot-text.dot01 {
        color: var(--black-color);
        line-height: 1.6;
        letter-spacing: 0.02em;
        background-position: top calc(12 / var(--font) * 1rem) left 0px;
        background-repeat: repeat-x;
        background-size: 1.0em .3em;
        background-image: radial-gradient(.12em .12em at center center,var(--brown-color),var(--brown-color) 100%,transparent,transparent);
        padding-top: .6em;
    }
    .dot-text.dot02 {
        color: var(--black-color);
        line-height: 1.6;
        letter-spacing: 0.02em;
        background-position: top  calc(12 / var(--font) * 1rem) left 0px;
        background-repeat: repeat-x;
        background-size: 1.0em .3em;
        background-image: radial-gradient(.12em .12em at center center,var(--blue-color),var(--blue-color) 100%,transparent,transparent);
        padding-top: .6em;
    }
    .course-wrap{
        display: flex;
    }
    .course__body {
        margin-top: calc(-16 / var(--font) * 1rem);
    }
    .bl_course{
        display: block;
        text-align: center;
        width: 50%;
    }
    .bl_course + .bl_course{
        margin-left: calc(40 / var(--font)* 1rem);
    }
    
    /* カラー */
    .u-brown {
        color: var(--brown-color);
    }
    .u-blue {
        color: var(--blue-color);
    }
    .c-btn--brown {
        --btn-bg: var(--brown-color);
    }
    .c-btn--blue {
        --btn-bg: var(--blue-color);
    }

    .bl_course .c-btn{
        --btn-radius: 100;
        --btn-font-size: 28;
        font-weight: 700;
        width: 100%;
        height: calc(88 / var(--font)* 1rem);
    }

    .course-head{
        font-size: calc(22 / var(--font) * 1rem);
        margin-bottom: calc(24 / var(--font) * 1rem);
        letter-spacing: 0.07em;
    }
    .course-item{
        margin-top: calc(32 / var(--font) * 1rem);
        padding: calc(30 / var(--font) * 1rem)calc(40 / var(--font) * 1rem)calc(20 / var(--font) * 1rem);
    }
    .course-item.recommend{
        background: var(--brown10-color);
    }
    .course-item.recommend > p{
        font-size: calc(20 / var(--font) * 1rem);
        margin-bottom: calc(20 / var(--font) * 1rem);
        letter-spacing: 0.07em;
    }
    .list-item {
        display: flex;
        align-items: center;
        margin: 0 0 5px;
        font-size: calc(18 / var(--font) * 1rem);
        letter-spacing: 0.07em;
    }
    .list-item:before {
        content: "";
        background: url(/item/assets/v2/img/monthly-derivery-service/icon_check_circle_brown.svg) no-repeat center top;
        background-size: contain;
        width: calc(28.5 / var(--font) * 1rem);
        height: calc(28.5 / var(--font) * 1rem);
        display: inline-block;
        position:  relative;
        margin-right: calc(25.5 / var(--font) * 1rem);
    }
    .list-item + .list-item{
        margin-top: calc(16 / var(--font) * 1rem);
    }

    .course-item.detail{
        padding: calc(10 / var(--font) * 1rem) calc(33 / var(--font) * 1rem) calc(20 / var(--font) * 1rem);
    }
    .bl_course:nth-of-type(1) .course-item.detail{
        border: calc(4 / var(--font) * 1rem) solid var(--brown20-color);
    }
    .course-item.detail > p{
        font-size: calc(16 / var(--font) * 1rem);
        margin-bottom: calc(20 / var(--font) * 1rem);
        font-weight: 700;
        letter-spacing: 0;
    }

    /* blue */
    .bl_course:nth-of-type(2) .course-item.recommend{
        background: var(--blue10-color);
    }
    .bl_course:nth-of-type(2) .list-item:before {
        background: url(/item/assets/v2/img/monthly-derivery-service/icon_check_circle_blue.svg) no-repeat center top;
    }
    .bl_course:nth-of-type(2) .course-item.detail {
        border: calc(4 / var(--font) * 1rem) solid var(--blue20-color);
    }

}
@media all and (max-width: 767px) {
    .sec-course .sec-lp__inner{
        padding-bottom: calc(56 / var(--font) * 1rem);
    }
    .sec-course .c-title-main {
    }
    .sec-course .c-title {
        margin-bottom: calc(28 / var(--font)* 1rem);
    }
    .sec-course span.mt-sp {
        margin-top: calc(6 / var(--font)* 1rem);
    }
    .dot-text.dot01 {
        color: var(--black-color);
        line-height: 1.6;
        letter-spacing: 0.02em;
        background-position: top calc(6 / var(--font)* 1rem) left 0px;
        background-repeat: repeat-x;
        background-size: 1.0em .3em;
        background-image: radial-gradient(.12em .12em at center center,var(--brown-color),var(--brown-color) 100%,transparent,transparent);
        padding-top: .6em;
    }
    .dot-text.dot02 {
        color: var(--black-color);
        line-height: 1.6;
        letter-spacing: 0.02em;
        background-position: top calc(6 / var(--font)* 1rem) left 0px;
        background-repeat: repeat-x;
        background-size: 1.0em .3em;
        background-image: radial-gradient(.12em .12em at center center,var(--blue-color),var(--blue-color) 100%,transparent,transparent);
        padding-top: .6em;
    }
    .course-wrap{
        display: block;
    }
    .bl_course{
        display: block;
        text-align: center;
        width: 100%;
    }
    .bl_course + .bl_course{
        margin-top: calc(32 / var(--font)* 1rem);
    }
    
    /* カラー */
    .u-brown {
        color: var(--brown-color);
    }
    .u-blue {
        color: var(--blue-color);
    }
    .c-btn--brown {
        --btn-bg: var(--brown-color);
    }
    .c-btn--blue {
        --btn-bg: var(--blue-color);
    }

    .bl_course .c-btn{
        --btn-radius: 100;
        --btn-font-size: 22;
        font-weight: 700;
        width: calc(345 / var(--font)* 1rem);
        height: calc(72 / var(--font)* 1rem);
        margin: 0 auto;
    }
    .bl_course .c-btn-txt{
        font-size: calc(22 / var(--font)* 1rem);
    }

    .course-head{
        font-size: calc(18 / var(--font) * 1rem);
        margin-bottom: calc(16 / var(--font) * 1rem);
        letter-spacing: 0.07em;
    }
    .course-item{
        margin-top: calc(24 / var(--font) * 1rem);
        padding: calc(22 / var(--font) * 1rem) calc(20 / var(--font) * 1rem) calc(34 / var(--font) * 1rem);
    }
    .course-item.recommend{
        background: var(--brown10-color);
    }
    .course-item.recommend > p{
        font-size: calc(20 / var(--font) * 1rem);
        margin-bottom: calc(16 / var(--font) * 1rem);
    }
    .list-item {
        display: flex;
        align-items: flex-start;
        font-size: calc(16 / var(--font) * 1rem);
        text-align: left;
        letter-spacing: 0.03em;
    }
    .list-item:before {
        content: "";
        background: url(/item/assets/v2/img/monthly-derivery-service/icon_check_circle_brown.svg) no-repeat center top;
        background-size: contain;
        width: calc(24 / var(--font) * 1rem);
        height: calc(24 / var(--font) * 1rem);
        display: inline-block;
        position:  relative;
        margin-right: calc(16 / var(--font) * 1rem);
    }
    .list-item + .list-item{
        margin-top: calc(10 / var(--font) * 1rem);
    }

    .course-item.detail{
        padding: calc(12 / var(--font) * 1rem) calc(12 / var(--font) * 1rem) calc(22 / var(--font) * 1rem);
    }
    .course-item.detail img{
        width:  calc(312 / var(--font) * 1rem);
    }
    .bl_course:nth-of-type(1) .course-item.detail{
        border: calc(4 / var(--font) * 1rem) solid var(--brown20-color);
    }
    .course-item.detail > p{
        font-size: calc(16 / var(--font) * 1rem);
        margin-bottom: calc(6 / var(--font) * 1rem);
        font-weight: 700;
    }

    /* blue */
    .bl_course:nth-of-type(2) .course-item.recommend{
        background: var(--blue10-color);
    }
    .bl_course:nth-of-type(2) .list-item:before {
        background: url(/item/assets/v2/img/monthly-derivery-service/icon_check_circle_blue.svg) no-repeat center top;
    }
    .bl_course:nth-of-type(2) .course-item.detail {
        border: calc(4 / var(--font) * 1rem) solid var(--blue20-color);
    }
}


/* --------------------------------------------------------------------------
regular
-------------------------------------------------------------------------- */
@media all and (min-width: 768px),
print {
    .sec-regular{
        margin-top: calc(40 / var(--font) * 1rem);
        margin-bottom: calc(40 / var(--font) * 1rem);
        padding-top: calc(82 / var(--font) * 1rem) !important;
        padding-bottom: calc(130 / var(--font) * 1rem) !important;
    } 
    .sec-regular .c-title-main{
        font-size: calc(44 / var(--font) * 1rem);
        color: var(--brown-color);
    }
    .sec-regular .bl_benefit{}

    .sec-regular .bl_benefit .sp_wrap {
        position: relative;
        left: calc(-17 / var(--font) * 1rem);
    }
    .sec-regular .benefit-title::before {
        content: '';
        display: block;
        background: url(/item/assets/v2/img/monthly-derivery-service/icon_benefit_regular.png) no-repeat center top;
        background-size: contain;
        width: calc(132 / var(--font) * 1rem);
        height: calc(132 / var(--font) * 1rem);
        position: absolute;
        top: calc(-104 / var(--font) * 1rem);
        left: calc(-154 / var(--font) * 1rem);
    }
    .sec-regular .bl_benefit {
        padding: calc(22 / var(--font) * 1rem) calc(36 / var(--font) * 1rem) calc(24 / var(--font) * 1rem);
        text-align: center;
        margin: 0 auto calc(48 / var(--font) * 1rem);
        display: block;
        border: calc(4 / var(--font) * 1rem) solid var( --brown20-color);
        position: relative;
        background: #fff;
        width: calc(840 / var(--font) * 1rem);
    }
    .sec-regular .bl_benefit::after {
        width: calc(170 / var(--font) * 1rem);
        height: calc(203 / var(--font) * 1rem);
        position: absolute;
        top: calc(-42 / var(--font) * 1rem);
        right: calc(43 / var(--font) * 1rem);
    }
    .sec-regular .c-list__item {
        justify-content: center;
        margin-top: calc(4 / var(--font) * 1rem);
    }
    .sec-regular .bl_benefit::before {
        width: calc(109 / var(--font) * 1rem);
        height: calc(109 / var(--font) * 1rem);
        top: calc(-57 / var(--font) * 1rem);
        left: calc(-36 / var(--font) * 1rem);
    }
    .bl_benefit .sec-lp__head .c-title::before {
        width: calc(94 / var(--font) * 1rem);
        height: calc(93 / var(--font) * 1rem);
        top: calc(-10 / var(--font) * 1rem);
        left: calc(-119 / var(--font) * 1rem);
    }
    .sec-regular .sec-lp__head .c-title-sub{
        margin-bottom: calc(24 / var(--font) * 1rem) !important;
    }

    /* card */
    .bl_card a{
        display: flex;
        position: relative;
    }
    .bl_card .course-label{
        transition: all .4s ease;
    }
    .c-column-img_wrap{
        display: block;
        width: calc(540 / var(--font) * 1rem);
        overflow: hidden;
        flex-shrink: 0;
    }
    .c-column-img{
        width: 100%;
        height: 100%;
        background: url(/item/assets/v2/img/monthly-derivery-service/img_course01_2.jpg) no-repeat center center;
        background-size: cover;
        transition: all .4s ease;
    }
    .bl_card a:hover .c-column-img,
    .bl_card a:hover .course-label {
        transform: scale(1.05);
    }
    .c-column-desc{
        background: #fff;
        padding:  calc(27 / var(--font) * 1rem) calc(26 / var(--font) * 1rem) calc(39 / var(--font) * 1rem) calc(43 / var(--font) * 1rem);
        width: 100%;
    }
    .c-column-desc p + p{
        margin-top: calc(8 / var(--font) * 1rem);
        letter-spacing: 0.07em;
    }
    .c-column-desc-title{
        font-size: calc(28 / var(--font) * 1rem);
        font-weight: 700;
        letter-spacing: 0.0154em;
        line-height: 1.4;
        position: relative;
        width: fit-content;
    }
    .c-column-desc-title::before {
        content: "";
        position: absolute;
        bottom: calc(-7 / var(--font) * 1rem);
        left: 0;
        height: calc(1 / var(--font) * 1rem);
        width: 100%;
        transition: all .4s ease;
        transform: scale(0, 1);
        transform-origin: left top;
        background-color: var(--brown-color);
    }
    .bl_card a:hover .c-column-desc-title::before {
        transform: scale(1, 1);
    }

    .c-column-desc-title span{
        font-size: calc(22 / var(--font) * 1rem);
        display: block;
    }
    .c-column-desc-name{
        font-size: calc(22 / var(--font) * 1rem);
        letter-spacing: 0.0154em;
        font-weight: 900;
        font-family: 'Lato', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
        line-height: 1.5;
        margin-top:  calc(16 / var(--font) * 1rem)!important;
    }
    .c-column-desc-price .text-price{
        font-size: calc(36 / var(--font) * 1rem);
        line-height: 1.5;
    }
    .c-column-desc-price .text-ja{
        font-size: calc(20 / var(--font) * 1rem);
        font-weight: 600;
    }
    .bl_card a:hover .c-btn.c-btn--red::before {
        transform: scale(1.05);
    }
    .bl_card .c-btn{
        margin-top: calc(32 / var(--font) * 1rem);
    }
    .course + .course{
        margin-top: calc(50 / var(--font) * 1rem);
    }
    .course + .course + .course{
        margin-top: calc(38 / var(--font) * 1rem);
    }

    /* 3カラム カード */
    .course .c-column__list {
        align-items: flex-start;
    }
    .c-column__list.c-column__list--3 {
        margin-top: 0;
    }
    .c-column__list--3 .c-column-desc{
        padding: calc(23 / var(--font) * 1rem) calc(20 / var(--font) * 1rem) calc(33 / var(--font) * 1rem);
    }
    .c-column__list--3 .c-column-desc-title-sub {
        font-size: calc(18 / var(--font) * 1rem);
        margin-bottom: calc(4 / var(--font) * 1rem);
        letter-spacing: 0.07em;
    }
    .c-column__list--3 .c-column-desc-title {
        font-size: calc(24 / var(--font) * 1rem);
        position: relative;
        letter-spacing: 0.07em;
    }
    .c-column__list--3 .c-column-desc-title::before {
        content: "";
        position: absolute;
        bottom: calc(-7 / var(--font) * 1rem);
        left: 0;
        height: calc(1 / var(--font) * 1rem);
        width: 100%;
        transition: all .4s ease;
        transform: scale(0, 1);
        transform-origin: left top;
        background-color: var(--black-color);
    }
    .c-column__list--3 a:hover .c-column-desc-title::before {
        transform: scale(1, 1);
    }
    .c-column__list--3 .c-column-desc-name {
        font-size: calc(20 / var(--font) * 1rem);
        letter-spacing: 0.1em;
    }
    .c-column__list--3 .c-column-desc-price .text-price {
        font-size: calc(30 / var(--font) * 1rem);
    }
    .c-column__list--3 .c-column-desc-price .text-ja {
        font-size: calc(18 / var(--font) * 1rem);
        font-weight: 600;
    }
    .c-column__list--3 .c-btn{
        margin: calc(24 / var(--font) * 1rem) auto 0;
    }
    .c-column__list--3 a:hover .c-btn.c-btn--red::before {
        transform: scale(1.05);
    }
    .c-column__item{
        position: relative;
    }
    .sec-regular .c-column__list--3 .c-column-desc {
        background: none;
        padding: calc(23 / var(--font) * 1rem) 0 calc(10 / var(--font) * 1rem);
    }
    .sec-regular .c-column__list.c-column__list--3{
        row-gap: calc(50 / var(--font) * 1rem);
    }

    /* ラベル */
    .course-label{
        width: calc(96 / var(--font) * 1rem);
        height: calc(96 / var(--font) * 1rem);
        position: absolute;
        top: 0;
        left: 0;
        z-index: 10;
    }
    .course-label-circle{
        width: calc(78 / var(--font) * 1rem);
        height: calc(78 / var(--font) * 1rem);
        position: absolute;
        top: calc(8 / var(--font) * 1rem);
        right: calc(8 / var(--font) * 1rem);
        z-index: 10;
    }

    
}
@media all and (max-width: 767px) {
    .sec-regular{
        margin-bottom: calc(24 / var(--font) * 1rem);
    } 
    .sec-regular .c-title-main{
        font-size: calc(28 / var(--font) * 1rem);
        color: var(--brown-color);
    }
    .sec-regular .bl_benefit{}

    .sec-regular .benefit-title::before {
        display: none;
    }
    .sec-regular .bl_benefit {
        padding: calc(41 / var(--font) * 1rem) calc(18 / var(--font) * 1rem) calc(20 / var(--font) * 1rem);
        text-align: center;
        margin: 0 auto calc(28 / var(--font) * 1rem);
        display: block;
        border: calc(8 / var(--font) * 1rem) solid var( --brown20-color);
        position: relative;
        background: #fff;
    }
    .sec-regular .bl_benefit::before {
        content: '';
        display: block;
        background: url(/item/assets/v2/img/monthly-derivery-service/icon_benefit_regular_sp.png) no-repeat center top;
        background-size: contain;
        width: calc(178 / var(--font) * 1rem);
        height: calc(56.5 / var(--font) * 1rem);
        position: absolute;
        top: calc(-30 / var(--font) * 1rem);
        left: 50%;
        transform: translateX(-50%);
    }
    .sec-regular .bl_benefit > div{
        display: flex;
        justify-content: center;
        gap: calc(10 / var(--font) * 1rem);
    }
    .sec-regular .bl_benefit > div .sp_wrap{
        width: fit-content;
    }
    .sec-regular .bl_benefit > div img{
        width: calc(143.54 / var(--font) * 1rem);
        height: calc(105.49 / var(--font) * 1rem);
        margin-top: calc(15 / var(--font) * 1rem);
    }
    .sec-regular .bl_benefit::after{
        display: none;
    }
    .sec-regular .benefit-title-sub span {
        margin: calc(-7 / var(--font) * 1rem) auto calc(11 / var(--font) * 1rem);
        letter-spacing: 0.07em;
    }
    .sec-regular .benefit__head {
        text-align: left;
        letter-spacing: 0.07em;
    }
    .dot-text{
        font-size: calc(28 / var(--font) * 1rem);
        padding-top: .9em;
    }
    .sec-regular .c-list__item {
        justify-content: center;
        margin-top: calc(4 / var(--font) * 1rem);
        text-align: left;
    }
    

    /* card */
    .sec-regular .c-column__item:first-of-type {
        margin-top: 0;
    }
    .bl_card a{
        display: flex;
        flex-direction: column;
        position: relative;
    }
    .c-column-img_wrap{
        display: block;
        width: 100%;
        height: auto;
    }
    .c-column-img{
        width: 100%;
        height: auto;
        padding-top: calc(218.01 / var(--font) * 1rem);
        padding-top: calc(218.01/375*100vw);
        background: url(/item/assets/v2/img/monthly-derivery-service/img_course01_2.jpg) no-repeat center top;
        background-size: cover;
        transition: all .4s ease;
    }
    .c-column-desc{
        background: #fff;
        padding:  calc(16 / var(--font) * 1rem) calc(30 / var(--font) * 1rem) calc(24 / var(--font) * 1rem) calc(20 / var(--font) * 1rem);
        width: 100%;
    }
    .c-column-desc p + p{
        margin-top: calc(6 / var(--font) * 1rem);
    }
    .c-column-desc-title{
        font-size: calc(22 / var(--font) * 1rem);
        color: var(--black-color);
        font-weight: 700;
        letter-spacing: 0.0154em;
        line-height: 1.5;
        position: relative;
        width: fit-content;
    }
    .c-column-desc-title::before {
        content: "";
        position: absolute;
        bottom: calc(-7 / var(--font) * 1rem);
        left: 0;
        height: calc(1 / var(--font) * 1rem);
        width: 100%;
        transition: all .4s ease;
        transform: scale(0, 1);
        transform-origin: left top;
        background-color: var(--black-color);
    }
    .bl_card a:hover .c-column-desc-title::before {
        transform: scale(1, 1);
    }

    .c-column-desc-title span{
        font-size: calc(18 / var(--font) * 1rem);
        display: block;
        letter-spacing: 0.07em;
    }
    .c-column-desc-name{
        font-size: calc(22 / var(--font) * 1rem);
        letter-spacing: 0.02em;
        font-weight: 900;
        font-family: 'Lato', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
        line-height: 1.5;
        margin-top: calc(16 / var(--font) * 1rem) !important;
    }
    .c-column-desc-price .text-price{
        font-size: calc(30 / var(--font) * 1rem);
        letter-spacing: 0.07em;
        line-height: 1.5;
    }
    .c-column-desc-price .text-ja{
        font-size: calc(20 / var(--font) * 1rem);
        font-weight: 600;
    }
    .bl_card a:hover .c-btn.c-btn--red::before {
        transform: scale(1.05);
    }
    .bl_card .c-btn{
        margin: calc(24 / var(--font) * 1rem) auto 0;
    }
    .course + .course{
        margin-top: calc(30 / var(--font) * 1rem);
    }
    .course .c-title .u-en {
        display: block;
    }

    /* 3カラム カード */
    .c-column__list.c-column__list--3 {
        margin-top: 0;
    }
    .c-column__list--3 .c-column-desc{
        padding: calc(18 / var(--font) * 1rem) calc(24 / var(--font) * 1rem) calc(24 / var(--font) * 1rem);
    }
    .c-column__list--3 .c-column-desc-title-sub {
        font-size: calc(18 / var(--font) * 1rem);
    }
    .c-column__list--3 .c-column-desc-title {
        font-size: calc(24 / var(--font) * 1rem);
        position: relative;
    }
    .c-column__list--3 .c-column-desc-title::before {
        content: "";
        position: absolute;
        bottom: calc(-7 / var(--font) * 1rem);
        left: 0;
        height: calc(1 / var(--font) * 1rem);
        width: 100%;
        transition: all .4s ease;
        transform: scale(0, 1);
        transform-origin: left top;
        background-color: var(--black-color);
    }
    .c-column__list--3 a:hover .c-column-desc-title::before {
        transform: scale(1, 1);
    }
    .c-column__list--3 .c-column-desc-name {
        font-size: calc(20 / var(--font) * 1rem);
    }
    .c-column__list--3 .c-column-desc-price .text-price {
        font-size: calc(30 / var(--font) * 1rem);
    }
    .c-column__list--3 .c-column-desc-price .text-ja {
        font-size: calc(18 / var(--font) * 1rem);
        font-weight: 600;
    }
    .c-column__list--3 .c-btn{
        margin: calc(24 / var(--font) * 1rem) auto 0;
    }
    .c-column__list--3 a:hover .c-btn.c-btn--red::before {
        transform: scale(1.05);
    }
    .c-column__list__img:not(:first-of-type) {
        margin-top: 0;
    }
    .c-column__item{
        display: block;
    }
    .c-column__item:nth-of-type(n+2){
        margin-top: calc(40 / var(--font) * 1rem) !important;
    }
    .sec-regular .c-column__list--3 .c-column-desc {
        background: none;
        padding: calc(23 / var(--font) * 1rem) 0 0;
    }
    .sec-regular .c-column__list.c-column__list--3{
        row-gap: calc(50 / var(--font) * 1rem);
    }

    
    /* ラベル */
    .c-column__item{
        position: relative;
    }
    .course-label{
        width: calc(108 / var(--font) * 1rem);
        height: calc(108 / var(--font) * 1rem);
        position: absolute;
        top: 0;
        left: 0;
        z-index: 10;
    }
    .course-label-circle{
        width: calc(78 / var(--font) * 1rem);
        height: calc(78 / var(--font) * 1rem);
        position: absolute;
        top: calc(8 / var(--font) * 1rem);
        right: calc(8 / var(--font) * 1rem);
        z-index: 10;
    }

    .sec-regular .benefit-text{
        text-align: left;
    }

}
@media all and (max-width: 480px) {
    .sec-regular .benefit-title {
        font-size: calc(18 / var(--font) * 1rem);
    }
}

/* --------------------------------------------------------------------------
distribution
-------------------------------------------------------------------------- */
@media all and (min-width: 768px),
print {
    .sec-distribution{
        padding-top: calc(82 / var(--font) * 1rem);
    }    
    .sec-distribution .c-title-main {
        font-size: calc(44 / var(--font) * 1rem);
        color: var(--blue-color);
        line-height: 1;
        margin-top: calc(16 / var(--font) * 1rem);
    }
    .sec-distribution .c-title-main .c-title-sub{
        font-size: calc(34 / var(--font) * 1rem);
        letter-spacing: 0.07em;
        display: block;
    }
    .sec-distribution .c-column{
        margin-top: calc(48 / var(--font) * 1rem);
    }
    .sec-distribution .c-column-desc p + p {
        margin-top: calc(8 / var(--font) * 1rem);
    }
    
    .sec-distribution .c-column__list__img img{
        padding: 0 calc(58 / var(--font) * 1rem);
        background: #fff;
    }
    .sec-distribution .c-column-desc {
        background: none;
        padding: calc(27 / var(--font) * 1rem) 0 calc(39 / var(--font) * 1rem);
        width: 100%;
    }
}
@media all and (max-width: 767px) {
    .sec-distribution{
        margin-bottom: calc(16 / var(--font) * 1rem);
    }    
    .sec-distribution .c-title-main {
        font-size: calc(28 / var(--font) * 1rem);
        color: var(--blue-color);
        line-height: 1.3;
        margin-top: 0;
    }
    .sec-distribution .c-title-main .c-title-sub{
        font-size: calc(24 / var(--font) * 1rem);
        display: block;
    }
    .sec-distribution .c-column-desc p + p {
        margin-top: calc(8 / var(--font) * 1rem);
    }
    .sec-distribution .sec-lp__head .c-title{
        margin-bottom: calc(44 / var(--font) * 1rem);
    }
    .sec-distribution .c-column-desc {
        background: none;
        padding: calc(23 / var(--font) * 1rem) 0 0;
        width: 100%;
    }
    .sec-distribution .c-column__item:first-of-type {
        display: block;
        margin-top: 0;
    }
}


/* --------------------------------------------------------------------------
reason
-------------------------------------------------------------------------- */
@media all and (min-width: 768px),
print {
    .sec-reason {
        padding: calc(82 / var(--font)* 1rem) calc(20 / var(--font)* 1rem) calc(82 / var(--font)* 1rem)!important;
    }
    .sec-reason .c-title-main {
        margin-top: calc(16 / var(--font) * 1rem);
    }
    .sec-reason .dot-text{
        color: var(--black-color);
        letter-spacing: 0.07em;
    }
    .sec-reason .dot-text {
        background-size: 1.06em .3em;
    }
    .sec-detail .c-title {
        margin-bottom: calc(40 / var(--font) * 1rem);
        font-size: calc(28 / var(--font) * 1rem);
    }
    .sec-reason .sec-media{
        position: relative;
    }
    .img-sub{
        display: block;
        position: absolute;
        bottom: calc(-54 / var(--font) * 1rem);
        left: calc(-45 / var(--font) * 1rem);
        width: calc(191 / var(--font) * 1rem);
        height: calc(111.5 / var(--font) * 1rem);
    }

}
@media all and (max-width: 767px) {
    .sec-reason .c-title-main {
        margin-top: calc(8 / var(--font) * 1rem);
    }
    .sec-reason .c-title-sub {
        font-size: calc(18 / var(--font)* 1rem);
    }
    .sec-reason .dot-text{
        color: var(--black-color);
        letter-spacing: 0.07em;
        background-position: top calc(12 / var(--font)* 1rem) left 0px;
        background-size: 1.05em .3em;
    }
    .sec-detail .c-title {
        margin-bottom: calc(24 / var(--font) * 1rem);
        font-size: calc(20 / var(--font) * 1rem);
    }
    .bl_media > div + div {
        margin-top: calc(30 / var(--font) * 1rem);
    }
    .bl_media:nth-of-type(1) > div + div {
        margin-top: calc(60 / var(--font) * 1rem);
    }
    
    .sec-reason .sec-media{
        position: relative;
    }
    .img-sub{
        display: block;
        position: absolute;
        bottom: calc(-54 / var(--font) * 1rem);
        left: calc(-45 / var(--font) * 1rem);
        width: calc(191 / var(--font) * 1rem) !important;
        height: calc(111.5 / var(--font) * 1rem) !important;
    }
}
@media all and (min-width: 768px),print {
    .lp-bottom-btn {
        padding-top: calc(96 / var(--font) * 1rem);
    }
}

.lp-bottom-btn .c-btn{
    margin: 0 auto;
}
@media all and (max-width: 767px){
    .fotter-fixed{
        z-index: 1000;
    }
    .fotter-fixed-pagetop {
        bottom: calc(94 / var(--font) * 1rem);
    }
    .l-fotter{
        padding-bottom: calc(64 / var(--font) * 1rem);
    }
    .lp-bottom-btn .c-btn-txt {
        font-size: calc(22 / var(--font) * 1rem);
    }
}


/* --------------------------------------------------------------------------
dot-text svg
-------------------------------------------------------------------------- */
@media all and (min-width: 768px),
print {
    .dot-text-img{
        display: block;
        margin-left: calc(4 / var(--font) * 1rem);
        margin-right: calc(4 / var(--font) * 1rem);
    }
    .mt-sp{
        display: flex;
    }

    .sec-sustainable h2.c-title,
    .sec-course h2.c-title {
        display: flex;
        flex-direction: column;
    }
    
    .sec-sustainable .c-title-main,
    .sec-course .c-title-main  {
        margin-top: calc(30 / var(--font) * 1rem);
        position: relative;
        display: inline-flex;
        justify-content: center;
    }

    .sec-sustainable .dot-text-img{
        width: calc(296 / var(--font) * 1rem);
        height: calc(51 / var(--font) * 1rem);
        margin-top: calc(-10 / var(--font) * 1rem);
    }
    .sec-course .dot-text-img{
        width: calc(83 / var(--font) * 1rem);
        height: calc(54 / var(--font) * 1rem);
        margin-top: calc(-12 / var(--font) * 1rem);
    }
    .sec-reason .dot-text-img{
        width: calc(254 / var(--font) * 1rem);
        height: calc(53 / var(--font) * 1rem);
        margin-top: calc(-12 / var(--font) * 1rem);
    }

}
@media all and (max-width: 767px) {
    .dot-text-img{
        display: block;
        margin-left: calc(4 / var(--font) * 1rem);
        margin-right: calc(4 / var(--font) * 1rem);
    }
    
    .sec-sustainable  span.mt-sp,
    .sec-course  span.mt-sp{
        display: flex;
    }
    .sec-sustainable .dot-text-img{
        width: calc(207 / var(--font) * 1rem);
        height: calc(40 / var(--font) * 1rem);
        margin-top: calc(-10 / var(--font) * 1rem);
    }
    .sec-course .dot-text-img{
        width: calc(58 / var(--font) * 1rem);
        height: calc(40 / var(--font) * 1rem);
        margin-top: calc(-10 / var(--font) * 1rem);
    }
    .sec-course .c-title-main {
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }
    .sec-reason .dot-text-img{
        width: calc(178 / var(--font) * 1rem);
        height: calc(42 / var(--font) * 1rem);
        margin: 0 auto;
    }

}


/* 調整 */
@media all and (min-width: 768px),
print {
    .c-column__list--3 .c-column__list__img {
        height: calc(208 / var(--font) * 1rem);
    }
    .c-column__list--3 .c-column-desc-title.text--s{
        font-size: calc(23 / var(--font) * 1rem);
        letter-spacing: -0.02em;
    }
}
@media all and (max-width: 767px) {
}