@charset "UTF-8";

/*-------------------------------------------*/
/*	PC
/*-------------------------------------------*/

@media screen and (min-width:900px) {

    /* =====================
      page_fv
    ===================== */

    #page_fv {
        margin-bottom: 5px;
    }

    /* =====================
      ingredients
    ===================== */

    /*  ingredients_text
    ------------------------*/

    .ingredients_text {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        margin-bottom: 5px;
    }

    .ingredients_text .text {
        font-size: 14px;
        letter-spacing: 0;
        margin: 0 20px 0 0;
    }    

    .ingredients_text .ingredients_all label {
        display: block;
        cursor: pointer;        
        white-space: nowrap;
        position: relative;
        padding-left: 24px;
    }

    .ingredients_text .ingredients_all label::before {
        left: 0;
    }

    /*  ingredients_list
    ------------------------*/
        
    .ingredients_list li.check {
        border-bottom: 1px solid #ccc;
    }

    .ingredients_list li.check:first-child {
        border-top: 1px solid #ccc;
    }

    .ingredients_list li label {
        display: block;
        padding: 16px 46px 16px 69px;
        cursor: pointer;
        position: relative;
    }

    .ingredients_list li label::before,
    .ingredients_text .ingredients_all label::before {
        content: '';
        width: 16px;
        height: 16px;
        display: block;
        border-radius: 3px;
        border: 1px solid #666;
        background: #fff;
        cursor: pointer;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }

    .ingredients_list li label::before {
        right: 16px;
    }   

    .ingredients_list li.check input:checked + label {
        background: #FFF9F7;
    }

    .ingredients_list li.check input:checked + label::before,
    .ingredients_text .ingredients_all input:checked + label::before {
        border-color: var(--color-main);
        background: var(--color-main) url(/kusulist/images/common/icon_check.svg) no-repeat center;
        background-size: 10px;
    }

    .ingredients_list li .icon_positioning {
        width: 41px;
        position: absolute;
        top: 50%;
        left: 16px;
        transform: translateY(-50%);
    }

    .ingredients_name {
        font-size: 16px;
        line-height: 1.2;
    }

    .ingredients_flow {
        margin-top: 8px;
        flex-wrap: wrap;
    }

    .ingredients_flow li {
        color: #999;
        font-size: 12px;
        line-height: 1.2;
        margin-right: 7px;
        padding-right: 14px;
        white-space: nowrap;
        position: relative;
    }

    .ingredients_flow li::after {
        content: '';
        width: 7px;
        height: 16px;
        display: block;
        background: url(/kusulist/images/common/icon_arrow_g.svg) no-repeat center;
        background-size: contain;
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
    }

    .ingredients_flow li:last-child {
        margin-right: 0;
        padding-right: 0;
    }

    .ingredients_flow li:last-child::after {
        display: none;
    }

    
    /* =====================
      search_fixed
    ===================== */
    
    .search_fixed .btn {
        margin: 0 auto;
    }
        
}

/*-------------------------------------------*/
/*	SP
/*-------------------------------------------*/

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

    /* =====================
      page_fv
    ===================== */

    #page_fv {
        margin-bottom: 10px;
    }

    /* =====================
      ingredients
    ===================== */

    /*  ingredients_text
    ------------------------*/

    .ingredients_text {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        margin-bottom: 5px;
    }

    .ingredients_text .text {
        font-size: 14px;
        letter-spacing: 0;
        margin: 0 20px 0 0;
    }    

    .ingredients_text .ingredients_all label {
        display: block;
        cursor: pointer;        
        white-space: nowrap;
        position: relative;
        padding-left: 24px;
    }

    .ingredients_text .ingredients_all label::before {
        left: 0;
    }

    /*  ingredients_list
    ------------------------*/
        
    .ingredients_list li.check {
        border-bottom: 1px solid #ccc;
    }

    .ingredients_list li.check:first-child {
        border-top: 1px solid #ccc;
    }

    .ingredients_list li label {
        display: block;
        padding: 16px 46px 16px 69px;
        cursor: pointer;
        position: relative;
    }

    .ingredients_list li label::before,
    .ingredients_text .ingredients_all label::before {
        content: '';
        width: 16px;
        height: 16px;
        display: block;
        border-radius: 3px;
        border: 1px solid #666;
        background: #fff;
        cursor: pointer;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }

    .ingredients_list li label::before {
        right: 16px;
    }   

    .ingredients_list li.check input:checked + label {
        background: #FFF9F7;
    }

    .ingredients_list li.check input:checked + label::before,
    .ingredients_text .ingredients_all input:checked + label::before {
        border-color: var(--color-main);
        background: var(--color-main) url(/kusulist/images/common/icon_check.svg) no-repeat center;
        background-size: 10px;
    }

    .ingredients_list li .icon_positioning {
        position: absolute;
        top: 50%;
        left: 16px;
        transform: translateY(-50%);
    }

    .ingredients_name {
        font-size: 16px;
        line-height: 1.2;
    }

    .ingredients_flow {
        margin-top: 8px;
        flex-wrap: wrap;
    }

    .ingredients_flow li {
        color: #999;
        font-size: 12px;
        line-height: 1.2;
        margin-right: 7px;
        padding-right: 14px;
        white-space: nowrap;
        position: relative;
    }

    .ingredients_flow li::after {
        content: '';
        width: 7px;
        height: 16px;
        display: block;
        background: url(/kusulist/images/common/icon_arrow_g.svg) no-repeat center;
        background-size: contain;
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
    }

    .ingredients_flow li:last-child {
        margin-right: 0;
        padding-right: 0;
    }

    .ingredients_flow li:last-child::after {
        display: none;
    }

    /* =====================
      search_fixed
    ===================== */
    
    .search_fixed .btn {
        width: 48%;
        max-width: 304px;
        margin: 0 auto;
    }

}