/*
* product_commitment.css
*
*/
/* --------------------------------
   product_commitment
-------------------------------- */
/* keyVisual ---------------- */
.p-keyVisual
{
    height: 294px;

    background: url(/img/product/commitment/commitment_kv.jpg) top center no-repeat;
    background-size: contain;
}
@media (min-width: 768px)
{
    .p-keyVisual
    {
        display: flex;
        flex-direction: column;

        padding-top: 0;

        justify-content: center;
    }
}
@media (max-width: 1139.98px)
{
    .p-keyVisual
    {
        height: 24.1228070175vw;
    }
}
@media (max-width: 767.98px)
{
    .p-keyVisual
    {
        background: url(/img/product/commitment/commitment_kv_sm.jpg) top center no-repeat;
        background-size: 87.5vw 31.09375vw;
    }
}
@media (max-width: 767.98px)
{
    .p-keyVisual.-pb-sm
    {
        padding-bottom: 15.625vw;
    }
}

@media (min-width: 768px)
{
    .p-keyVisual__title
    {
        margin: 10px 0;
    }
}

.p-keyVisual__titleEn
{
    width: 255px;

    opacity: .25;
}
@media (max-width: 767.98px)
{
    .p-keyVisual__titleEn
    {
        width: 40.625vw;
    }
}

.m-mv-commitment
{
    background-image: url(/img/product/commitment/commitment_kv_sm.jpg);
    background-size: cover;
}
@media (min-width: 768px)
{
    .m-mv-commitment
    {
        background-image: url(/img/product/commitment/commitment_kv.jpg);
    }
}

.m-mv_title .jp
{
    line-height: 1.27;

    letter-spacing: 6.6px;
}

/* anchor ---------------- */
.commitment__anchor
{
    margin-top: 40px;
    padding: 0 110px;
}
@media (max-width: 1139.98px)
{
    .commitment__anchor
    {
        padding: 0 3.5087719298vw;
    }
}
@media (max-width: 767.98px)
{
    .commitment__anchor
    {
        margin-top: 12.5vw;
        padding: 0 6.25vw;
    }
}

.commitment__anchorInner
{
    display: flex;

    align-items: center;
}
@media (max-width: 767.98px)
{
    .commitment__anchorInner
    {
        flex-direction: column;
    }
}

.commitment__anchorItem
{
    position: relative;

    width: 33%;
    height: 62px;
}
@media (max-width: 767.98px)
{
    .commitment__anchorItem
    {
        width: 100%;
        height: 14.6875vw;
    }
}
.commitment__anchorItem::before
{
    position: absolute;
    top: 0;
    left: 0;

    display: block;

    width: 1px;
    height: 100%;

    content: '';

    background-color: #dadad6;
}
@media (max-width: 767.98px)
{
    .commitment__anchorItem::before
    {
        right: 0;

        width: 100%;
        height: 1px;
    }
}
.commitment__anchorItem:last-of-type::after
{
    position: absolute;
    top: 0;
    right: 0;

    display: block;

    width: 1px;
    height: 100%;

    content: '';

    background-color: #dadad6;
}
@media (max-width: 767.98px)
{
    .commitment__anchorItem:last-of-type::after
    {
        top: auto;
        bottom: 0;
        left: 0;

        width: 100%;
        height: 1px;
    }
}
.commitment__anchorItem > span
{
    font-size: 14px;
    font-weight: bold;

    display: flex;

    width: 100%;
    height: 100%;

    cursor: pointer;

    color: #008135;

    justify-content: center;
    align-items: center;
}
@media (max-width: 767.98px)
{
    .commitment__anchorItem > span
    {
        font-size: 4.375vw;
    }
}
.no-touchevents .commitment__anchorItem > span:hover .icon-arw1_anchor::before,
.touchevents .commitment__anchorItem > span.is-touched .icon-arw1_anchor::before
{
    animation: arrow_move_to_bottom .35s .05s cubic-bezier(.25, .46, .45, .94) forwards;
}
.commitment__anchorItem > span > strong
{
    font-family: 'Ubuntu', sans-serif;
    font-size: 24px;
    font-style: italic;
}
@media (max-width: 767.98px)
{
    .commitment__anchorItem > span > strong
    {
        font-size: 6.5625vw;
    }
}
.commitment__anchorItem > span > i::before
{
    font-size: 24px;

    position: absolute;
    top: 0;
    right: 30px;
    bottom: 0;

    margin: auto;

    color: #008135;
}
@media (max-width: 1139.98px)
{
    .commitment__anchorItem > span > i::before
    {
        right: 2.6315789474vw;
    }
}
@media (max-width: 767.98px)
{
    .commitment__anchorItem > span > i::before
    {
        font-size: 5.625vw;

        right: 10.46875vw;
    }
}

/* product_commitment ---------------- */
.commitment__block
{
    padding-bottom: 130px;
}
@media (max-width: 767.98px)
{
    .commitment__block
    {
        padding-bottom: 20.3125vw;
    }
}
.commitment__block.-last-block
{
    padding-bottom: 0;
}

.commitment__number
{
    width: 100px;
    margin: 0 auto;
}
@media (max-width: 767.98px)
{
    .commitment__number
    {
        width: 28.125vw;
    }
}

.commitment__title
{
    font-size: 32px;
    font-weight: 400;
    line-height: 1.5;

    margin-top: 40px;

    text-align: center;

    color: #008135;
}
@media (max-width: 767.98px)
{
    .commitment__title
    {
        font-size: 5vw;

        margin-top: 7.8125vw;
    }
}
.commitment__title .commitment__titleLine
{
    position: relative;
}
.commitment__title .commitment__titleLine::after
{
    position: absolute;
    z-index: -1;
    right: 0;
    bottom: 3px;
    left: 0;

    display: block;

    width: 100%;
    height: 6px;

    content: '';

    background-color: #c6e566;
}
@media (max-width: 767.98px)
{
    .commitment__title .commitment__titleLine::after
    {
        bottom: .46875vw;

        height: .9375vw;
    }
}
.commitment__title .commitment__titleLine.-overflow::after
{
    right: -2.5%;
    left: -2.5%;

    width: 105%;
}
@media (max-width: 767.98px)
{
    .commitment__title .commitment__titleLine.-short::after
    {
        right: -4.5%;
        left: -4.5%;

        width: 98%;
    }
}

.commitment__inner
{
    margin-top: 80px;
}
@media (max-width: 767.98px)
{
    .commitment__inner
    {
        margin-top: 18.75vw;
    }
}

/* process ---------------- */
.commitment__process
{
    display: flex;

    justify-content: center;
}
@media (max-width: 767.98px)
{
    .commitment__process
    {
        display: block;
    }
}

.commitment__processCol
{
    max-width: 280px;

    transition: opacity 1s, transform 1s cubic-bezier(.165, .84, .44, 1);
    transform: translateY(20px);

    opacity: .01;

    flex: 1 1 280px;
}
.commitment__processCol.is-active
{
    transform: translateY(0);

    opacity: 1;
}
@media (min-width: 768px)
{
    .commitment__processCol:nth-child(2)
    {
        transition-delay: .3s;
    }
    .commitment__processCol:nth-child(3)
    {
        transition-delay: .6s;
    }
}
@media (max-width: 767.98px)
{
    .commitment__processCol
    {
        position: relative;

        max-width: inherit;
    }
}
.commitment__processCol:not(:first-child)
{
    margin-left: 40px;
}
@media (max-width: 1139.98px)
{
    .commitment__processCol:not(:first-child)
    {
        margin-left: 3.5087719298vw;
    }
}
@media (max-width: 767.98px)
{
    .commitment__processCol:not(:first-child)
    {
        margin-left: 0;
    }
}
@media (max-width: 767.98px)
{
    .commitment__processCol:not(:last-child)
    {
        padding-bottom: 29.6875vw;
    }
    .commitment__processCol:not(:last-child)::after
    {
        position: absolute;
        z-index: 10;
        bottom: 17.5vw;
        left: 50%;

        display: block;

        content: '';
        transform: translate3d(-50%, 0, 0);

        border-width: 4.84375vw 3.984375vw 0 3.984375vw;
        border-style: solid;
        border-color: #64b07d transparent transparent;
    }
}

.commitment__processThumb
{
    position: relative;

    padding: 0 10px;
}
@media (max-width: 767.98px)
{
    .commitment__processThumb
    {
        padding: 0 6.25vw;
    }
}
.commitment__processThumb > span
{
    font-size: 18px;
    font-weight: bold;
    line-height: 1.67;

    position: absolute;
    top: -40px;
    left: -10px;

    display: flex;

    width: 120px;
    height: 120px;
    padding-top: 10px;

    text-align: center;

    color: #fff;
    border-radius: 50%;
    background-color: #e87d44;
    box-shadow: 0 0 0 6px #fff;

    justify-content: center;
    align-items: center;
}
@media (max-width: 1139.98px)
{
    .commitment__processThumb > span
    {
        font-size: 1.7543859649vw;

        width: 10.5263157895vw;
        min-width: 95px;
        height: 10.5263157895vw;
        min-height: 95px;
        padding-top: .8771929825vw;

        box-shadow: 0 0 0 .8771929825vw #fff;
    }
}
@media (max-width: 767.98px)
{
    .commitment__processThumb > span
    {
        font-size: 4.6875vw;

        top: -9.375vw;
        left: 0;

        width: 29.375vw;
        height: 29.375vw;

        box-shadow: 0 0 0 1.5625vw #fff;
    }
}
.commitment__processThumb > span.-pd-none
{
    padding-top: 0;
}
.commitment__processCol:not(:first-child) .commitment__processThumb::before
{
    position: absolute;
    top: 50%;
    left: -26px;

    display: block;

    width: 0;
    height: 0;

    content: '';
    transform: translate3d(0, -50%, 0);

    border-width: 12px 0 12px 15px;
    border-style: solid;
    border-color: transparent transparent transparent #64b07d;
}
@media (max-width: 1139.98px)
{
    .commitment__processCol:not(:first-child) .commitment__processThumb::before
    {
        top: 10.350877193vw;
        left: -2.2807017544vw;
    }
}
@media (max-width: 767.98px)
{
    .commitment__processCol:not(:first-child) .commitment__processThumb::before
    {
        display: none;
    }
}

.commitment__processInner
{
    margin-top: 40px;
}
@media (max-width: 767.98px)
{
    .commitment__processInner
    {
        margin-top: 7.8125vw;
    }
}

.commitment__processList:not(:last-child)
{
    margin-bottom: 24px;
}
@media (max-width: 767.98px)
{
    .commitment__processList:not(:last-child)
    {
        margin-bottom: 7.8125vw;
    }
}
.commitment__processList dt
{
    position: relative;

    margin-bottom: 24px;
}
@media (max-width: 767.98px)
{
    .commitment__processList dt
    {
        margin-bottom: 3.125vw;
    }
}
.commitment__processList dt > span
{
    font-size: 16px;

    display: flex;

    width: 140px;
    height: 25px;
    margin: 0 auto;

    color: #fff;
    border-radius: 12.5px;
    background-color: #008135;

    justify-content: center;
    align-items: center;
}
@media (max-width: 767.98px)
{
    .commitment__processList dt > span
    {
        font-size: 4.6875vw;

        width: 37.5vw;
        height: 7.03125vw;

        border-radius: 3.515625vw;
    }
}
.commitment__processList dt::before
{
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 0;

    display: block;

    width: 100%;
    height: 1px;

    content: '';
    transform: translate3d(0, -50%, 0);

    background-color: #008135;
}
@media (max-width: 767.98px)
{
    .commitment__processList dt::before
    {
        height: 2px;
    }
}
.commitment__processList dd
{
    font-size: 16px;
    line-height: 1.75;

    position: relative;

    padding-left: 1.25em;
}
@media (max-width: 767.98px)
{
    .commitment__processList dd
    {
        font-size: 4.0625vw;
    }
}
.commitment__processList dd::before
{
    position: absolute;
    top: 11px;
    left: 0;

    display: block;

    width: 6px;
    height: 6px;

    content: '';

    border-radius: 50%;
    background-color: #e87d44;
}
@media (max-width: 767.98px)
{
    .commitment__processList dd::before
    {
        top: 2.8125vw;

        width: 1.875vw;
        height: 1.875vw;
    }
}
.commitment__processList .commitment__processQuality
{
    padding: 20px 15px;

    text-align: center;

    border-radius: 22px;
    background-color: #e9f0d5;
}
@media (max-width: 767.98px)
{
    .commitment__processList .commitment__processQuality
    {
        padding: 4.6875vw 3.125vw;
    }
}
.commitment__processList .commitment__processQuality::before
{
    display: none;
}
.commitment__processList .commitment__processQuality a
{
    text-decoration: none;
}
.commitment__processList .commitment__processBtn
{
    margin: 15px auto 0;
    padding: 6px 10px !important;

    background-color: #fff;
}
@media (min-width: 768px)
{
    .commitment__processList .commitment__processBtn
    {
        font-size: 1.4814814815vw !important;

        width: 100%;
    }
    .commitment__processList .commitment__processBtn .icon-arw1_next::before
    {
        right: 10px;
    }
}
@media (min-width: 1140px)
{
    .commitment__processList .commitment__processBtn
    {
        font-size: 16px !important;

        width: 80%;
    }
}
@media (max-width: 767.98px)
{
    .commitment__processList .commitment__processBtn
    {
        font-size: 4.0625vw !important;

        margin: 2.34375vw auto 0;
        padding: .9375vw 1.5625vw !important;
    }
}

/* card ---------------- */
.commitment__card
{
    position: relative;

    transition: opacity 1s, transform 1s cubic-bezier(.165, .84, .44, 1);
    transform: translateY(20px);

    opacity: .01;
    border-radius: 22px;
    background-color: #fff;
}
.commitment__card.is-active
{
    transform: translateY(0);

    opacity: 1;
}
@media (max-width: 767.98px)
{
    .commitment__card
    {
        border-radius: 3.4375vw;
    }
}
@media (max-width: 767.98px)
{
    .commitment__card:first-child
    {
        margin-top: 23.4375vw;
    }
}
.commitment__card:not(:last-child)
{
    margin-bottom: 80px;
}
@media (max-width: 767.98px)
{
    .commitment__card:not(:last-child)
    {
        margin-bottom: 25vw;
    }
}

.commitment__cardIcon
{
    position: absolute;
    top: 50%;
    left: -32px;

    width: 64px;
    height: 81px;

    transform: translate3d(0, -50%, 0);
}
@media (max-width: 767.98px)
{
    .commitment__cardIcon
    {
        top: -15.625vw;
        left: 50%;

        width: 18.75vw;
        height: 24.21875vw;

        transform: translate3d(-50%, 0, 0);
    }
}
.commitment__card:nth-child(even) .commitment__cardIcon
{
    right: -32px;
    left: auto;

    transform: translate3d(0, -50%, 0);
}
@media (max-width: 767.98px)
{
    .commitment__card:nth-child(even) .commitment__cardIcon
    {
        right: auto;
        left: 50%;

        transform: translate3d(-50%, 0, 0);
    }
}

.commitment__cardInner
{
    display: flex;

    height: 300px;
    padding: 50px 95px;

    align-items: center;
}
@media (max-width: 1139.98px)
{
    .commitment__cardInner
    {
        height: 24.5614035088vw;
        padding: 50px 7.0175438596vw;
    }
}
@media (max-width: 767.98px)
{
    .commitment__cardInner
    {
        display: block;

        height: auto;
        padding: 17.1875vw 6.25vw 46.875vw;
    }
}
.commitment__card:nth-child(even) .commitment__cardInner
{
    justify-content: flex-end;
}
@media screen and (max-width: 900px)
{
    .commitment__card:nth-child(2) .commitment__cardInner
    {
        height: 350px;
    }
}
@media (max-width: 1139.98px)
{
    .commitment__card:nth-child(2) .commitment__cardInner
    {
        height: 30.701754386vw;
    }
}
@media (max-width: 767.98px)
{
    .commitment__card:nth-child(2) .commitment__cardInner
    {
        height: auto;
    }
}

.commitment__cardText
{
    font-size: 16px;
    line-height: 1.75;

    position: relative;

    margin-right: 400px;

    transition: opacity .8s, transform .8s cubic-bezier(.165, .84, .44, 1);
    transition-delay: .3s;
    transform: translateY(20px);

    opacity: .01;
}
.is-active .commitment__cardText
{
    transform: translateY(0);

    opacity: 1;
}
@media screen and (max-width: 1400px)
{
    .commitment__cardText
    {
        margin-right: 28.5714285714vw;
    }
}
@media (max-width: 1139.98px)
{
    .commitment__cardText
    {
        margin-right: 35.0877192982vw;
    }
}
@media (max-width: 767.98px)
{
    .commitment__cardText
    {
        font-size: 4.0625vw;

        margin-right: 0;
        padding: 0 0 8.59375vw;
    }
}
.commitment__cardText::before
{
    position: absolute;
    top: -20px;
    left: 0;

    width: 42px;
    height: 8px;
    margin: auto;

    content: '';

    background-image: radial-gradient(circle farthest-side, #e87d44 20%, transparent 20%, transparent 100%);
    background-repeat: repeat-x;
    background-position: 0 50%;
    background-size: 14px 26px;
}
@media (max-width: 767.98px)
{
    .commitment__cardText::before
    {
        top: -4.375vw;

        width: 7.8125vw;
        height: 1.25vw;

        background-size: 2.8125vw 5.46875vw;
    }
}
.commitment__card:nth-child(even) .commitment__cardText
{
    margin-right: 0;
    margin-left: 400px;
}
@media screen and (max-width: 1400px)
{
    .commitment__card:nth-child(even) .commitment__cardText
    {
        margin-left: 28.5714285714vw;
    }
}
@media (max-width: 1139.98px)
{
    .commitment__card:nth-child(even) .commitment__cardText
    {
        margin-left: 33.3333333333vw;
    }
}
@media (max-width: 767.98px)
{
    .commitment__card:nth-child(even) .commitment__cardText
    {
        margin-left: 0;
    }
}

.commitment__cardImg
{
    position: absolute;
    top: -30px;
    right: 50px;
}
@media (min-width: 768px)
{
    .commitment__cardImg
    {
        transition: opacity .8s, transform .8s cubic-bezier(.165, .84, .44, 1);
        transition-delay: .6s;
        transform: translateY(20px);

        opacity: .01;
    }
    .is-active .commitment__cardImg
    {
        transform: translateY(0);

        opacity: 1;
    }
}
@media (max-width: 1139.98px)
{
    .commitment__cardImg
    {
        top: -1.7543859649vw;
        right: 4.3859649123vw;

        width: 36.8421052632vw;
    }
}
@media screen and (max-width: 1400px)
{
    .commitment__cardImg
    {
        top: -1.4285714286vw;

        width: 30vw;
    }
}
@media screen and (max-width: 900px)
{
    .commitment__cardImg
    {
        top: -1.4285714286vw;

        transform: translate3d(0, 50%, 0);
    }
}
@media (max-width: 767.98px)
{
    .commitment__cardImg
    {
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;

        width: 100%;

        transform: translate3d(0, 0, 0);
    }
    .commitment__cardImg img
    {
        width: 100%;

        border-radius: 0 0 3.4375vw 3.4375vw;
    }
}
.commitment__card:nth-child(even) .commitment__cardImg
{
    right: auto;
    left: 50px;
}
@media (max-width: 1139.98px)
{
    .commitment__card:nth-child(even) .commitment__cardImg
    {
        left: 4.3859649123vw;
    }
}
@media (max-width: 767.98px)
{
    .commitment__card:nth-child(even) .commitment__cardImg
    {
        right: 0;
        bottom: 0;
        left: 0;
    }
}

/* brand ---------------- */
.commitment__brand
{
    position: relative;

    transition: opacity 1.2s, transform 1.2s;
    transition: opacity 1, transform 1 cubic-bezier(.165, .84, .44, 1);
    transform: translateY(20px);

    opacity: .01;
    border-radius: 22px;
    background: #fcfced;
    background-image: url(/img/product/commitment/brand_bg.jpg);
    background-size: 4px 4px;
}
.commitment__brand.is-active
{
    transform: translateY(0);

    opacity: 1;
}
@media (max-width: 767.98px)
{
    .commitment__brand
    {
        border-radius: 3.4375vw;
    }
}

.commitment__brandTitle
{
    font-size: 18px;
    font-weight: bold;
    line-height: 1;

    position: absolute;
    top: 0;
    left: 50px;

    padding-left: 190px;

    transition: opacity .8s, transform .8s cubic-bezier(.165, .84, .44, 1);
    transition-delay: .4s;
    transform: translateY(20px);

    opacity: .01;
}
.is-active .commitment__brandTitle
{
    transform: translateY(0);

    opacity: 1;
}
@media (max-width: 767.98px)
{
    .commitment__brandTitle
    {
        font-size: 5vw;
        line-height: 1.2;

        position: relative;
        left: 0;

        padding-top: 13.4375vw;
        padding-left: 0;

        text-align: center;
    }
}
.commitment__brandTitle > span
{
    position: absolute;
    bottom: -8px;
    left: 0;

    width: 151px;
}
@media (max-width: 767.98px)
{
    .commitment__brandTitle > span
    {
        top: -6.5625vw;
        right: 0;
        bottom: auto;

        width: 33.125vw;
        margin: auto;
    }
}

.commitment__brandInner
{
    display: flex;

    padding: 40px 50px 30px;

    transition: opacity .8s, transform .8s cubic-bezier(.165, .84, .44, 1);
    transition-delay: .8s;
    transform: translateY(20px);

    opacity: .01;
}
.is-active .commitment__brandInner
{
    transform: translateY(0);

    opacity: 1;
}
@media screen and (max-width: 900px)
{
    .commitment__brandInner
    {
        display: block;
    }
}
@media (max-width: 767.98px)
{
    .commitment__brandInner
    {
        display: block;

        padding: 2.1875vw 6.25vw 7.8125vw;
    }
}

.commitment__brandText
{
    font-size: 16px;
    line-height: 2.25;

    padding-bottom: 10px;

    background: linear-gradient(to top, rgba(204, 204, 204, .7) 1px, transparent 0, transparent 100%);
    background-repeat: repeat-y;
    background-size: 100% 36.2px;
}
@media (max-width: 767.98px)
{
    .commitment__brandText
    {
        font-size: 4.0625vw;

        background-size: 100% 8.984375vw;
    }
}

.commitment__brandLabel
{
    position: relative;

    width: 190px;
    height: 190px;
    margin-top: 20px;
    margin-left: 50px;
    padding: 50px 5px;

    border-radius: 50%;
    background-color: #e9f0d5;

    flex-shrink: 0;
}
@media screen and (max-width: 900px)
{
    .commitment__brandLabel
    {
        margin: 70px auto 0;
    }
}
@media (max-width: 767.98px)
{
    .commitment__brandLabel
    {
        width: 53.125vw;
        height: 53.125vw;
        margin: 10.9375vw auto 0;
        padding: 12.96875vw 2.5vw 4.375vw;
    }
}
.commitment__brandLabel > span
{
    font-size: 16px;
    font-weight: bold;
    line-height: 1.75;

    position: absolute;
    top: -1.2em;
    left: 0;

    display: inline-block;

    text-align: center;
    white-space: pre;

    color: #008135;
}
@media (max-width: 767.98px)
{
    .commitment__brandLabel > span
    {
        font-size: 4.375vw;

        top: -1.2em;
        left: 1.5625vw;
    }
}
.commitment__brandLabel > span::before,
.commitment__brandLabel > span::after
{
    position: absolute;
    bottom: -5px;

    display: block;

    width: 1px;
    height: 30px;

    content: '';

    background-color: #008135;
}
@media (max-width: 767.98px)
{
    .commitment__brandLabel > span::before,
    .commitment__brandLabel > span::after
    {
        bottom: -1.5625vw;

        width: .3125vw;
        height: 7.8125vw;
    }
}
.commitment__brandLabel > span::before
{
    left: -2px;

    transform: rotate(-25deg);
}
.commitment__brandLabel > span::after
{
    right: -5px;

    transform: rotate(25deg);
}

/* detail ---------------- */
.commitment__innerTitle
{
    font-size: 22px;
    font-weight: bold;

    position: relative;

    width: 480px;
    margin: 80px auto 0;

    text-align: center;

    color: #008135;
}
@media (max-width: 767.98px)
{
    .commitment__innerTitle
    {
        font-size: 4.375vw;

        width: 62.5vw;
        margin: 15.625vw auto 0;
    }
}
.commitment__innerTitle::before,
.commitment__innerTitle::after
{
    position: absolute;
    top: 5px;

    display: block;

    width: 44px;
    height: 66px;

    content: '';
}
@media (max-width: 767.98px)
{
    .commitment__innerTitle::before,
    .commitment__innerTitle::after
    {
        top: auto;
        bottom: .78125vw;

        width: 9.53125vw;
        height: 14.0625vw;
    }
}
.commitment__innerTitle::before
{
    left: -40px;

    background: url(/img/product/detail/secret_decoration_left.png) no-repeat;
    background-size: 44px 66px;
}
@media (max-width: 767.98px)
{
    .commitment__innerTitle::before
    {
        left: -9.375vw;

        background-size: 9.53125vw 14.0625vw;
    }
}
.commitment__innerTitle::after
{
    right: -40px;

    background: url(/img/product/detail/secret_decoration_right.png) no-repeat;
    background-size: 44px 66px;
}
@media (max-width: 767.98px)
{
    .commitment__innerTitle::after
    {
        right: -9.375vw;

        background-size: 9.53125vw 14.0625vw;
    }
}
.commitment__innerTitle > span
{
    position: relative;
}
.commitment__innerTitle > span::before
{
    position: absolute;
    top: -16px;
    left: 0;

    width: 100%;
    height: 8px;
    margin: auto;

    content: '';

    background-image: radial-gradient(circle farthest-side, #e87d44 20%, transparent 20%, transparent 100%);
    background-repeat: repeat-x;
    background-position: 0 50%;
    background-size: 22px 26px;
}
@media (max-width: 767.98px)
{
    .commitment__innerTitle > span::before
    {
        top: -2.5vw;

        height: 1.25vw;

        background-size: 4.375vw 4.6875vw;
    }
}

.commitment__detail
{
    margin-top: 110px;
}
@media (max-width: 767.98px)
{
    .commitment__detail
    {
        margin-top: 0;
    }
}

.commitment__detailInner
{
    display: flex;
}
@media (max-width: 767.98px)
{
    .commitment__detailInner
    {
        display: block;
    }
}

.commitment__detailUnit
{
    position: relative;

    padding: 130px 25px 80px;

    transition: opacity .8s, transform .8s cubic-bezier(.165, .84, .44, 1);
    transform: translateY(20px);

    opacity: .01;
    border-radius: 140px 140px 10px 10px;
    background-color: #e9f0d5;

    flex: 1 1 280px;
}
.commitment__detailUnit.is-active
{
    transform: translateY(0);

    opacity: 1;
}
@media (min-width: 768px)
{
    .commitment__detailUnit:nth-child(2)
    {
        transition-delay: .3s;
    }
    .commitment__detailUnit:nth-child(3)
    {
        transition-delay: .6s;
    }
}
@media (max-width: 767.98px)
{
    .commitment__detailUnit
    {
        position: relative;

        max-width: inherit;
    }
}
@media (max-width: 1139.98px)
{
    .commitment__detailUnit
    {
        padding: 11.4035087719vw 2.1929824561vw 80px;

        border-radius: 12.2807017544vw 12.2807017544vw .8771929825vw .8771929825vw;
    }
}
@media (max-width: 767.98px)
{
    .commitment__detailUnit
    {
        margin: 25vw 6.25vw 0;
        padding: 28.125vw 6.25vw 18.75vw;
    }
}
.commitment__detailUnit::before
{
    position: absolute;
    top: -75px;
    left: 50%;

    width: 8px;
    height: 42px;
    margin: auto;

    content: '';
    transform: translate3d(-50%, 0, 0);

    background-image: radial-gradient(circle farthest-side, #e87d44 20%, transparent 20%, transparent 100%);
    background-repeat: repeat-y;
    background-position: 50% 0;
    background-size: 26px 14px;
}
@media (max-width: 767.98px)
{
    .commitment__detailUnit::before
    {
        top: -15.625vw;

        width: 1.25vw;
        height: 7.8125vw;

        background-size: 5.46875vw 2.8125vw;
    }
}
.commitment__detailUnit:not(:first-child)
{
    margin-left: 40px;
}
@media (max-width: 1139.98px)
{
    .commitment__detailUnit:not(:first-child)
    {
        margin-left: 3.5087719298vw;
    }
}
@media (max-width: 767.98px)
{
    .commitment__detailUnit:not(:first-child)
    {
        margin-left: 6.25vw;
    }
}
.commitment__detailUnit.-product01::after,
.commitment__detailUnit.-product02::after,
.commitment__detailUnit.-product03::after
{
    position: absolute;
    right: -10px;
    bottom: -10px;

    display: block;

    content: '';
}
.commitment__detailUnit.-product01::after
{
    width: 141px;
    height: 78px;

    background: url(/img/product/commitment/commitment_03_typo_01.png) no-repeat;
    background-size: contain;
}
@media (max-width: 767.98px)
{
    .commitment__detailUnit.-product01::after
    {
        width: 31.40625vw;
        height: 17.34375vw;
    }
}
.commitment__detailUnit.-product02::after
{
    width: 128px;
    height: 78px;

    background: url(/img/product/commitment/commitment_03_typo_02.png) no-repeat;
    background-size: contain;
}
@media (max-width: 767.98px)
{
    .commitment__detailUnit.-product02::after
    {
        width: 28.75vw;
        height: 17.34375vw;
    }
}
.commitment__detailUnit.-product03::after
{
    width: 139px;
    height: 78px;

    background: url(/img/product/commitment/commitment_03_typo_03.png) no-repeat;
    background-size: contain;
}
@media (max-width: 767.98px)
{
    .commitment__detailUnit.-product03::after
    {
        width: 31.71875vw;
        height: 18.90625vw;
    }
}

.commitment__detailProduct
{
    position: absolute;
    left: 50%;

    transform: translate3d(-50%, 0, 0);
}
.-product01 .commitment__detailProduct
{
    top: -25px;

    width: 173px;
}
@media (max-width: 1139.98px)
{
    .-product01 .commitment__detailProduct
    {
        width: 15.1754385965vw;
    }
}
@media (max-width: 767.98px)
{
    .-product01 .commitment__detailProduct
    {
        top: -5.625vw;

        width: 38.59375vw;
    }
}
.-product02 .commitment__detailProduct
{
    top: -6px;

    width: 223px;
}
@media (max-width: 1139.98px)
{
    .-product02 .commitment__detailProduct
    {
        top: -1.25vw;

        width: 19.5614035088vw;
    }
}
@media (max-width: 767.98px)
{
    .-product02 .commitment__detailProduct
    {
        width: 51.71875vw;
    }
}
.-product03 .commitment__detailProduct
{
    top: -17px;

    width: 180px;
}
@media (max-width: 1139.98px)
{
    .-product03 .commitment__detailProduct
    {
        width: 15.7894736842vw;
    }
}
@media (max-width: 767.98px)
{
    .-product03 .commitment__detailProduct
    {
        top: -3.75vw;

        width: 40vw;
    }
}

.commitment__detailCont
{
    transition: opacity .8s, transform .8s cubic-bezier(.165, .84, .44, 1);
    transition-delay: .2s;
    transform: translateY(20px);

    opacity: .01;
}
.is-active .commitment__detailCont
{
    transform: translateY(0);

    opacity: 1;
}
@media (min-width: 768px)
{
    .commitment__detailUnit:nth-child(2) .commitment__detailCont
    {
        transition-delay: .5s;
    }
    .commitment__detailUnit:nth-child(3) .commitment__detailCont
    {
        transition-delay: .8s;
    }
}
.commitment__detailCont dt
{
    font-size: 22px;
    font-weight: bold;

    text-align: center;

    color: #008135;
}
@media (max-width: 767.98px)
{
    .commitment__detailCont dt
    {
        font-size: 5vw;

        font-feature-settings: 'palt';
    }
}
.commitment__detailCont dd:first-of-type
{
    font-size: 16px;
    font-weight: bold;
    line-height: 1.75;

    margin-top: 14px;
    padding: 10px;

    text-align: center;

    border-top: solid 2px #008135;
    border-bottom: solid 2px #008135;
}
@media (max-width: 767.98px)
{
    .commitment__detailCont dd:first-of-type
    {
        font-size: 4.6875vw;

        margin-top: 3.4375vw;
        padding: 1.5625vw;
    }
}
.commitment__detailCont dd:not(:first-of-type)
{
    font-size: 16px;
    line-height: 1.75;

    margin-top: 24px;
}
@media (max-width: 767.98px)
{
    .commitment__detailCont dd:not(:first-of-type)
    {
        font-size: 4.0625vw;

        margin-top: 4.375vw;
    }
}
.commitment__detailCont dd:not(:first-of-type).-fs-sm
{
    font-feature-settings: 'palt';
}
@media (max-width: 1139.98px)
{
    .commitment__detailCont dd:not(:first-of-type).-fs-sm
    {
        font-feature-settings: normal;
    }
}

/* commitment__message ---------------- */
.commitment__message
{
    position: relative;

    margin-top: 80px;
}
@media (max-width: 767.98px)
{
    .commitment__message
    {
        margin-top: 21.09375vw;
    }
}

.commitment__messageInner
{
    display: flex;

    padding: 30px 40px 50px;

    border: solid 2px #008135;
    border-radius: 22px;
}
@media screen and (max-width: 900px)
{
    .commitment__messageInner
    {
        display: block;
    }
}
@media (max-width: 767.98px)
{
    .commitment__messageInner
    {
        display: block;

        padding: 12.5vw 6.25vw 6.25vw;

        border: solid .46875vw #008135;
        border-radius: 3.4375vw;
    }
}

.commitment__messageTitle
{
    font-size: 22px;

    position: absolute;
    top: 0;
    left: 50%;

    display: inline-block;

    padding: 0 38px;

    transform: translate3d(-50%, -50%, 0);
    white-space: nowrap;

    color: #008135;
    background-color: #fff;
}
@media (max-width: 767.98px)
{
    .commitment__messageTitle
    {
        font-size: 4.6875vw;
        line-height: 1.2;

        padding: 0 5.46875vw;

        text-align: center;
    }
}
.commitment__messageTitle::before,
.commitment__messageTitle::after
{
    position: absolute;
    bottom: 5px;

    display: block;

    width: 1px;
    height: 30px;

    content: '';

    background-color: #008135;
}
@media (max-width: 767.98px)
{
    .commitment__messageTitle::before,
    .commitment__messageTitle::after
    {
        bottom: 0;

        width: .3125vw;
        height: 9.375vw;
    }
}
.commitment__messageTitle::before
{
    left: -2px;

    transform: rotate(-25deg);
}
@media (max-width: 767.98px)
{
    .commitment__messageTitle::before
    {
        left: .3125vw;
    }
}
.commitment__messageTitle::after
{
    right: -2px;

    transform: rotate(25deg);
}
@media (max-width: 767.98px)
{
    .commitment__messageTitle::after
    {
        right: .3125vw;
    }
}

.commitment__messageImg
{
    position: relative;

    width: 198px;
    height: 212px;
    margin-right: 70px;
    margin-left: 23px;

    flex: 0 0 auto;
}
@media screen and (max-width: 900px)
{
    .commitment__messageImg
    {
        margin: 0 auto 50px;
    }
}
@media (max-width: 767.98px)
{
    .commitment__messageImg
    {
        width: 46.71875vw;
        height: 51.09375vw;
        margin: 0 0 0 4.6875vw;
    }
}
.commitment__messageImg > span
{
    font-size: 14px;
    line-height: 1.35;

    position: absolute;
    right: -42px;
    bottom: -48px;

    display: flex;
    flex-direction: column;

    width: 124px;
    height: 124px;

    color: #fff;
    border-radius: 50%;
    background-color: #008135;

    justify-content: center;
    align-items: center;
}
@media (max-width: 767.98px)
{
    .commitment__messageImg > span
    {
        font-size: 3.28125vw;

        right: -9.84375vw;
        bottom: -11.25vw;

        width: 29.21875vw;
        height: 29.21875vw;
    }
}
.commitment__messageImg > span strong
{
    font-size: 24px;
}
@media (max-width: 767.98px)
{
    .commitment__messageImg > span strong
    {
        font-size: 5.625vw;
    }
}

.commitment__messageText
{
    padding-top: 20px;
}
@media (max-width: 767.98px)
{
    .commitment__messageText
    {
        padding-top: 15.625vw;
    }
}
.commitment__messageText p:first-of-type
{
    font-size: 18px;
    font-weight: bold;
}
@media (max-width: 767.98px)
{
    .commitment__messageText p:first-of-type
    {
        font-size: 4.375vw;
    }
}
.commitment__messageText p:not(:first-of-type)
{
    font-size: 16px;
    line-height: 1.75;

    padding-top: 10px;
}
@media (max-width: 767.98px)
{
    .commitment__messageText p:not(:first-of-type)
    {
        font-size: 4.0625vw;
        line-height: 1.62;

        padding-top: 2.34375vw;
    }
}

@media (min-width: 768px)
{
    .m-card
    {
        padding-right: 0;
        padding-left: 0;
    }
}

@media (min-width: 768px)
{
    .p-contSection__inner
    {
        padding-right: 80px;
        padding-left: 80px;
    }
}