/*
* product.css
*
*/
@keyframes pyonAction
{
    35%
    {
        transform: scale(.97);
    }
    100%
    {
        transform: scale(1);
    }
}
@keyframes pyonAction_large
{
    35%
    {
        transform: scale(.87);
    }
    100%
    {
        transform: scale(1);
    }
}
/* --------------------------------
   product
-------------------------------- */
button,
html input[type=button],
input[type=reset],
input[type=submit]
{
    cursor: pointer;

    border-style: none;
    background-color: transparent;

    -webkit-appearance: button;
}

/* keyVisual ---------------- */
.p-keyVisual
{
    background: url(/img/product/common/product_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: 767.98px)
{
    .p-keyVisual
    {
        background: url(/img/product/common/product_kv_sm.jpg) top center no-repeat;
        background-size: 87.5vw 31.09375vw;
    }
}

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

.p-contSection
{
    padding-bottom: 70px !important;
}
@media (max-width: 767.98px)
{
    .p-contSection
    {
        padding-bottom: 7.8125vw !important;
    }
}

.pruduct__title
{
    font-size: 24px;
    font-weight: bold;
    line-height: 1;

    margin-bottom: 76px;

    letter-spacing: 4.8px;

    color: #4b4b4b;
}
@media (max-width: 767.98px)
{
    .pruduct__title
    {
        font-size: 4.6875vw;

        margin-bottom: 9.375vw;
        padding: 0 6.25vw;

        letter-spacing: .46875vw;
    }
}
.pruduct__title > span
{
    font-family: 'Prompt m';
    font-size: 2.8125vw;
    line-height: 1;

    display: block;

    margin: 0 auto 2.5vw;

    text-align: center;
    letter-spacing: .5625vw;
}
@media (min-width: 768px)
{
    .pruduct__title > span
    {
        font-size: 12px;

        margin-bottom: 8px;

        letter-spacing: 2.4px;
    }
}

.product__sortTab
{
    margin-bottom: 60px;
}
@media (max-width: 767.98px)
{
    .product__sortTab
    {
        position: relative;

        width: 62.5vw;
        margin: 0 auto 9.375vw;
    }
}
.product__sortTab ul
{
    position: relative;
    z-index: 1;

    display: flex;
    overflow: hidden;

    width: 100%;

    border-radius: 28px;
    box-shadow: 0 0 0 1px #094 inset;

    justify-content: center;
    align-items: center;
}
@media (max-width: 767.98px)
{
    .product__sortTab ul
    {
        display: none;
        flex-direction: column;

        margin-top: 3.125vw;

        border-width: 2px;
        border-radius: 7.8125vw;
    }
}
.product__sortTab ul li
{
    flex: 1 1 250px;
}
@media (max-width: 767.98px)
{
    .product__sortTab ul li
    {
        width: 100%;

        flex: 1 1 12.5vw;
    }
}
.product__sortTab ul li + li
{
    border-left: 1px solid #094;
}
@media (max-width: 767.98px)
{
    .product__sortTab ul li + li
    {
        border-top: 1px solid #094;
        border-left: none;
    }
}
.product__sortTab ul li button
{
    line-height: 1;

    width: 100%;
    padding: 20px 0;

    transition: color .15s cubic-bezier(.25, .25, .75, .75), background-color .15s cubic-bezier(.25, .25, .75, .75);

    color: #094;
}
.no-touchevents .product__sortTab ul li button:hover,
.touchevents .product__sortTab ul li button.is-touched
{
    color: #fff;
    background-color: #094;
}
@media (max-width: 767.98px)
{
    .product__sortTab ul li button
    {
        font-size: 4.0625vw;

        padding: 4.6875vw 0;

        letter-spacing: .40625vw;
    }
}
.product__sortTab ul li button[aria-expanded=true]
{
    color: #fff;
    background-color: #094;
}

.product__tab
{
    padding-bottom: 40px;

    opacity: 0;
}
@media (max-width: 767.98px)
{
    .product__tab
    {
        padding-bottom: 0;
    }
}
.product__tab[aria-hidden=true]
{
    display: none;
}
.product__tab.is-current-panel
{
    opacity: 1;
}
.product__tab .product__overList
{
    overflow: hidden;

    height: 0;
}

.product__list
{
    display: flex;

    justify-content: flex-start;
    flex-wrap: wrap;
}
@media (max-width: 767.98px)
{
    .product__list
    {
        display: block;

        margin-right: 4.6875vw;
        margin-left: 4.6875vw;
    }
}

.product__item
{
    position: relative;

    width: calc(33% - 7px);
    margin-bottom: 10px;
}
@media (max-width: 1139.98px)
{
    .product__item
    {
        margin-bottom: 1.3157894737vw;
    }
}
@media screen and (max-width: 980px)
{
    .product__item
    {
        width: 48%;
    }
}
@media (max-width: 767.98px)
{
    .product__item
    {
        width: 100%;
        margin-bottom: 4.6875vw;
    }
}
.product__item:not(:nth-child(3n+1))
{
    margin-left: 10px;
}
@media (max-width: 1139.98px)
{
    .product__item:not(:nth-child(3n+1))
    {
        margin-left: .8771929825vw;
    }
}
@media screen and (max-width: 980px)
{
    .product__item:not(:nth-child(3n+1))
    {
        margin-left: 0;
    }
}
@media screen and (max-width: 980px)
{
    .product__item:nth-child(even)
    {
        margin-left: 1.3157894737vw;
    }
}
@media (max-width: 767.98px)
{
    .product__item:nth-child(even)
    {
        margin-left: 0;
    }
}
.product__item a
{
    display: block;

    padding: 30px;

    transition: background-color .15s cubic-bezier(.25, .25, .75, .75);
    text-decoration: none;

    color: #333;
    border-radius: 22px;
}
@media (max-width: 1139.98px)
{
    .product__item a
    {
        padding: 2.6315789474vw 2.6315789474vw;

        border-radius: 1.9298245614vw;
    }
}
@media (max-width: 767.98px)
{
    .product__item a
    {
        padding: 4.6875vw 4.6875vw 6.25vw;

        border-radius: 3.4375vw;
    }
}
.no-touchevents .product__item a:hover,
.touchevents .product__item a.is-touched
{
    background-color: #e9f0d5;
}
.no-touchevents .product__item a:hover .c-button,
.touchevents .product__item a.is-touched .c-button
{
    color: #fff;
    background-color: #09b025;
}
.no-touchevents .product__item a:hover .c-button .icon-arw1_next:before,
.touchevents .product__item a.is-touched .c-button .icon-arw1_next:before
{
    animation: arrow_move_to_right .35s .05s cubic-bezier(.25, .46, .45, .94) forwards;
}

.product__thumb
{
    overflow: hidden;

    margin: 0 3.3% -12px;

    border-radius: 50%;
}
.product__thumb img
{
    width: 100%;
    height: 100%;

    -o-object-fit: cover;

       object-fit: cover;
    -o-object-position: center;
       object-position: center;
}
@media (min-width: 768px)
{
    .product__thumb
    {
        width: 15.2777777778vw;
        height: 15.2777777778vw;
    }
}
@media screen and (min-width: 1440px)
{
    .product__thumb
    {
        width: 220px;
        height: 220px;
    }
}
@media screen and (max-width: 980px)
{
    .product__thumb
    {
        width: 220px;
        height: 220px;
    }
}
@media (max-width: 767.98px)
{
    .product__thumb
    {
        width: 54.6875vw;
        height: 54.6875vw;
        margin: 0 auto -3.125vw;

        text-align: center;
    }
    .product__thumb img
    {
        border-radius: 50%;
    }
}

.product__category
{
    font-weight: bold;
    line-height: 1;

    position: relative;
    z-index: 1;

    display: inline-block;

    margin-bottom: 15px;
    padding: 3px 10px;

    text-align: center;
    letter-spacing: .12em;

    color: #fff;
    border-radius: 6px;
    background-color: #a6b8ad;
}
@media (max-width: 767.98px)
{
    .product__category
    {
        font-size: 4.0625vw;

        margin-bottom: 3.125vw;
        padding: 1.09375vw 4.0625vw;

        border-radius: 1.875vw;
    }
}

.product__name
{
    font-size: 22px;
    font-weight: bold;
    line-height: 1.5454545455;

    margin-bottom: 10px;

    letter-spacing: .1em;

    color: #094;
}
@media (max-width: 767.98px)
{
    .product__name
    {
        font-size: 5.3125vw;

        margin-bottom: 2.34375vw;
    }
}

.product__description
{
    display: -webkit-box;
    overflow: hidden;

    height: 5em;
    margin-bottom: 37px;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
@media (max-width: 767.98px)
{
    .product__description
    {
        font-size: 4.0625vw;
        line-height: 1.38;

        height: auto;
        margin-bottom: 5.46875vw;

        letter-spacing: .05em;
    }
}

.product__data
{
    margin-bottom: 30px;

    border-top: 1px solid #ccc;
}
@media (max-width: 767.98px)
{
    .product__data
    {
        margin-bottom: 7.8125vw;
    }
}
.product__data dl
{
    display: flex;

    border-bottom: 1px solid #ccc;

    flex-wrap: wrap;
}
@media (max-width: 767.98px)
{
    .product__data dl
    {
        padding: 2.65625vw 0;
    }
}
.product__data dt,
.product__data dd
{
    padding: 12px 0;

    letter-spacing: .05em;
}
@media (max-width: 767.98px)
{
    .product__data dt,
    .product__data dd
    {
        font-size: 4.0625vw;

        letter-spacing: 1.38;
    }
}
.product__data dt
{
    font-weight: bold;

    width: 40%;
}
@media (max-width: 767.98px)
{
    .product__data dt
    {
        width: 30%;
    }
}
.product__data dt + dd + dt
{
    border-top: 1px solid #ccc;
}
.product__data dd
{
    width: 60%;
}
@media (max-width: 767.98px)
{
    .product__data dd
    {
        width: 70%;
    }
}
.product__data dd + dt + dd
{
    border-top: 1px solid #ccc;
}

.product__button
{
    max-width: 100%;
}
@media (max-width: 767.98px)
{
    .product__button
    {
        width: 65.625vw;
        margin: 0 auto;
    }
}

.product__more
{
    position: relative;

    display: block;

    width: 364px;
    height: 50px;
    margin: auto;
    margin-bottom: 60px;

    transition: background-color .3s cubic-bezier(.215, .61, .355, 1);

    color: #fff;
    border-radius: 25px;
    background-color: #90bd48;
}
@media (max-width: 767.98px)
{
    .product__more
    {
        width: 62.5vw;
        margin-top: 6.25vw;
        margin-bottom: 12.5vw;
    }
}
.product__more:hover
{
    background-color: #a4d752;
}
.product__more[aria-hidden=true]
{
    display: none;
}
.product__more::before,
.product__more::after
{
    position: absolute;
    top: 0;
    right: 3.4375vw;
    bottom: 0;

    width: 16px;
    height: 2px;
    margin: auto;

    content: '';

    background-color: #fff;
}
@media (min-width: 768px)
{
    .product__more::before,
    .product__more::after
    {
        right: 20px;
    }
}
.product__more::after
{
    transform: rotate(90deg);
}

.commitment__banner
{
    position: relative;

    margin-top: -30px;
    padding: 100px 0 130px;

    text-align: center;

    background-color: #fff;
}
@media (max-width: 1139.98px)
{
    .commitment__banner
    {
        padding: 100px 3.5087719298vw 130px;
    }
}
@media (max-width: 767.98px)
{
    .commitment__banner
    {
        padding: 15.625vw 6.25vw 20.3125vw;
    }
}
.commitment__banner.-dotted:after
{
    position: absolute;
    top: 32px;
    right: 0;
    left: 0;

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

    content: '';

    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__banner.-dotted:after
    {
        top: 4.21875vw;

        width: 1.25vw;
        height: 7.8125vw;

        background-size: 5.46875vw 2.8125vw;
    }
}

/* ------------------------------------- */
/* Added after the lifefoods site was merged */
@media (max-width: 767.98px)
{
    .main
    {
        background: #f8f2e7;
    }
}

.m-mv
{
    background: url(/img/product/common/mv_sm.jpg) center no-repeat;
    background-size: cover;
}
@media (min-width: 768px)
{
    .m-mv
    {
        background-image: url(/img/product/common/mv_lg.jpg);
    }
}

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

    letter-spacing: 6.6px;
}

@media (max-width: 767.98px)
{
    .m-card
    {
        padding-right: 6.25vw;
        padding-bottom: 0;
        padding-left: 6.25vw;

        background-color: #f8f2e7;
    }
}

.m-card-contitle::before
{
    display: none;
}

.m-card__mb0
{
    margin-bottom: 0;
}
@media (min-width: 768px)
{
    .m-card__mb0
    {
        padding-bottom: 100px;

        border-radius: 24px 24px 0 0;
    }
}

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

@media (max-width: 767.98px)
{
    .l-content
    {
        margin-right: 6.25vw;
        margin-left: 6.25vw;

        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
}
@media (min-width: 768px)
{
    .l-content
    {
        width: 85.07463%;
    }
}

@media (min-width: 768px)
{
    .l-content__radiustop0
    {
        border-radius: 0 0 22px 22px;
    }
}

@media (min-width: 768px)
{
    .l-content__mb50
    {
        margin-bottom: 50px;
    }
}

.un_product_statement
{
    position: relative;
}
@media (max-width: 767.98px)
{
    .un_product_statement
    {
        padding: 10.9375vw 0 15.625vw;
        padding-bottom: 15.625vw;

        border-radius: 3.4375vw 3.4375vw 0 0;
        background-color: #fff;
    }
}
@media (min-width: 768px)
{
    .un_product_statement
    {
        padding-top: 2px;
    }
}

.un_product_statement_ttl
{
    position: relative;
    z-index: 2;

    width: 85.46875vw;
    margin: auto;
}
@media (min-width: 768px)
{
    .un_product_statement_ttl
    {
        width: 710px;
    }
}

.un_product_statement_txt
{
    font-size: 4.375vw;
    line-height: 1.8571428571;

    position: relative;
    z-index: 2;

    margin-top: 9.375vw;

    text-align: left;
    letter-spacing: .1em;
}
@media (max-width: 767.98px)
{
    .un_product_statement_txt
    {
        padding: 0 6.25vw;
    }
}
@media (min-width: 768px)
{
    .un_product_statement_txt
    {
        font-size: 18px;
        line-height: 2;

        margin-top: 41px;

        text-align: center;
    }
}

.un_product_link
{
    position: relative;

    width: 75vw;
    height: 42.03125vw;
    margin: auto;

    border-radius: 3.75vw;
}
@media (min-width: 768px)
{
    .un_product_link
    {
        width: 752px;
        height: 217px;

        border-radius: 24px;
    }
}
.un_product_link:hover
{
    animation: pyonAction .52s cubic-bezier(.165, .84, .44, 1) forwards;
}
.un_product_link + .un_product_link
{
    margin-top: 7.8125vw;
}
@media (min-width: 768px)
{
    .un_product_link + .un_product_link
    {
        margin-top: 40px;
    }
}
.un_product_link.un_product_link__commitment
{
    background-image: url(/img/product//index/product_bnr_commitment_sm.jpg);
}
@media (min-width: 768px)
{
    .un_product_link.un_product_link__commitment
    {
        background-image: url(/img/product//index/product_bnr_commitment_lg.jpg);
    }
}
.un_product_link.un_product_link__commitment_fresh
{
    background-image: url(/img/product//index/product_bnr_commitment_fresh_sm.jpg);
}
@media (min-width: 768px)
{
    .un_product_link.un_product_link__commitment_fresh
    {
        background-image: url(/img/product//index/product_bnr_commitment_fresh_lg.jpg);
    }
}
.un_product_link a
{
    display: flex;

    height: 100%;

    color: #fff;

    justify-content: center;
    align-items: center;
}

.un_product_link_txt
{
    font-size: 5vw;

    position: relative;

    text-align: center;
    letter-spacing: 1vw;
}
@media (min-width: 768px)
{
    .un_product_link_txt
    {
        font-size: 24px;
        line-height: 1;

        letter-spacing: 4.8px;
    }
}
.un_product_link_txt > span
{
    font-family: 'Prompt m';
    font-size: 2.8125vw;
    line-height: 1;

    display: block;

    margin-bottom: .9375vw;

    letter-spacing: .5625vw;
}
@media (min-width: 768px)
{
    .un_product_link_txt > span
    {
        font-size: 12px;

        margin-bottom: 6px;

        letter-spacing: 2.4px;
    }
}

.un_product_statement_imgWrapper
{
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    left: 0;

    margin: 28.75vw 6.25vw 0;
}
@media (min-width: 768px)
{
    .un_product_statement_imgWrapper
    {
        width: 65.6488549618vw;
        min-width: 774px;
        margin: 85px auto 0;
    }
}
@media screen and (min-width: 1441px)
{
    .un_product_statement_imgWrapper
    {
        width: 966px;
    }
}

.un_product_statement_img
{
    margin: 10vw 0 28.4375vw;
}
@media (min-width: 768px)
{
    .un_product_statement_img
    {
        width: 100%;
        margin: 52px auto 120px;
    }
}

@media (max-width: 767.98px)
{
    .m-btn-product
    {
        width: 62.5vw;
        margin: 0 auto 9.375vw;
    }
}
@media (min-width: 768px)
{
    .m-btn-product
    {
        margin-bottom: 92px;
    }
}

.product__dropdown
{
    position: relative;

    width: 62.5vw;
    height: 12.5vw;
    margin: auto;

    cursor: pointer;
}
.product__dropdown > span
{
    font-size: 4.0625vw;
    line-height: 11.875vw;

    display: block;

    width: 100%;
    height: 100%;

    text-align: center;
    letter-spacing: .40625vw;

    color: #094;
    border: solid 2px #008135;
    border-radius: 6.25vw;
}
.product__dropdown:focus
{
    outline: none;
}
@media (min-width: 768px)
{
    .product__dropdown
    {
        display: none;
    }
}
.product__dropdown::after
{
    position: absolute;
    top: 5vw;
    right: 4.6875vw;

    content: '';
    transition: transform .2s cubic-bezier(.215, .61, .355, 1);
    pointer-events: none;

    border-width: 2.65625vw 2.1875vw 0 2.1875vw;
    border-style: solid;
    border-color: #094 transparent transparent transparent;
}
.product__dropdown.active::after
{
    transform: rotate(-180deg);
}

.product__button
{
    line-height: 50px;

    position: relative;

    max-width: 100%;
    height: 50px;

    text-align: center;

    color: #fff;
    border-radius: 25px;
    background-color: #094;
}
@media (max-width: 767.98px)
{
    .product__button
    {
        width: 62.5vw;
        margin: 0 auto;
    }
}
.product__button:after
{
    position: absolute;
    top: 0;
    right: 20px;
    bottom: 0;

    display: block;

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

    content: '';
    transform: rotate(45deg);

    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
}
