/*
* 心幸キッチン
*/

/* ============================================================
main_visual
============================================================ */

.main_visual{
    height: 500px;
    background-image: url("/images/business/shashoku/main_visual_img_sp.webp");
    background-size: cover;
    background-position: center;
    margin-bottom: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    .main_visual__video{
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center bottom;
        
    }
    .main_visual__desc{
        z-index: 1;
        padding: 0 20px;
        .main_visual_sub_heading{
            font-size: 18px;
            font-weight: bold;
            text-align: center;
            color: #fff;
            width: fit-content;
            margin: auto;
            text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
            position: relative;
            &:before,
            &:after{
                position: absolute;
                content: "";
                width: 16px;
                height: 2px;
                background-color: #fff;
                top: 15px;
            }
            &:before{
                left: -20px;
                transform: rotate(55deg);
            }
            &:after{
                right: -20px;
                transform: rotate(-55deg);
            }
        }
        .main_visual_main_heading{
            font-size: 20px;
            color: #fff;
            font-weight: bold;
            line-height: 1.5;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            margin-top: 16px;
            span{
                /* background-color: #44AE35; */
                background-color: rgba(68, 174, 53, 0.8);
                padding: 2px 8px;
            }
        }
        .main_visual_logo{
            width: 240px;
            margin:16px auto 0;
            filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.25));
        }
        .main_visual_text{
            font-size: 15px;
            color: #fff;
            line-height: 1.7;
            font-weight: bold;
            margin-top: 16px;
            padding: 0 12px;
            text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
            max-width: 305px;
            font-feature-settings: "palt";
        }
    }
}
/* PC */
@media screen and (min-width: 768px){
    .main_visual{
        height: calc(100vh - 101px);
        min-height: 640px;
        background-image: url("/images/business/shashoku/main_visual_img.webp");
        margin-bottom: 80px;
        position: relative;
        .main_visual__video{
            object-position: left bottom;
            height: 100%;
        }
        .main_visual__desc{
            padding: 0;
            position: absolute;
            left: 16.67%;
            .main_visual_sub_heading{
                font-size: 20px;
                
                &:before,
                &:after{
                    width: 18px;
                    top: 16px;
                }

            }
            .main_visual_main_heading{
                font-size: 24px;
                line-height: 1.25;
                span{
                    padding: 4px 8px;
                }
            }
            .main_visual_logo{
                width: 370px;
            }
            .main_visual_text{
                font-size: 19px;
                padding: 0;
                width: 355px;
                max-width: none;
            }
        }
    }
}

/* ============================================================
solution_section
============================================================ */

.solution_section{
    margin-top: 64px;
    .heading_lv2{
        background-color: #FEECC9;
        &:before{
            background-color: #ED6D00;
        }
    }
    .solution_content{
        .solution_content__item{
            &:not(:last-child){
                margin-bottom: 40px;
            }
            .solution_content__item__list{
                display: flex;
                flex-wrap: wrap;
                gap: 8px;
                
            }
            .check_text{
                --check-text-size: 16px;
                --check-text-height: 1.4;
                --check-text-padding-left: 26px;
                --check-icon-size: 20px;
                --check-icon-margin-top: 1px;
                width: 100%;
                &:before{
                    background-image: url(/images/common/icon_checkbox_orange.svg);
                }
            }
        }
    }
    
}

/* PC */
@media screen and (min-width: 768px){
    .solution_section{
        margin-top: 120px;
        .solution_content{
            .solution_content__item{
                &:not(:last-child){
                    margin-bottom: 80px;
                }
                .solution_content__item__list{
                    gap: 16px 40px;
                    .check_text{
                        --check-icon-size: 22px;
                        --check-icon-margin-top: 2px;
                        --check-text-padding-left: 32px;
                        width: calc(50% - 20px);
                        font-size: 18px;
                    }
                }
                .check_text{
                    &:before{
                        background-image: url(/images/common/icon_checkbox_orange.svg);
                    }
                }
            }
        }
        
    }
}

/* ============================================================
realization_section
============================================================ */
.realization_section{
    &.--bg{
        --bg--color:#FFF7EB;
    }

    .realization_content{
        .two_column_content__heading{
            color: #ED6D00;
        }
    }
}

/* ============================================================
reason_section
============================================================ */
.reason_section{
    .heading_lv1{
        margin-bottom: 56px;
    }
    .reason_content{
        margin-bottom: 64px;
        .reason_content__block{
            &:not(:last-child){
                margin-bottom: 56px;
            }
            .reason_heading{
                font-size: 18px;
                color: #ED6D00;
                font-weight: bold;
                text-align: center;
                line-height: 1.5;
                width: fit-content;
                margin: 0 auto 40px;
                position: relative;
                .num{
                    position: absolute;
                    z-index: -1;
                    left: -10px;
                    top: -16px;
                    color: #FEECC9;
                    font-weight: bold;
                    line-height: 1;
                    font-size: 40px;
                }
                
            }
            .reason_content__block__item{
                display: flex;
                align-items: flex-start;
                gap: 16px;
                margin-bottom: 24px;
                
                h4{
                    font-size: 14px;
                    font-weight: bold;
                    line-height: 1.5;
                    text-align: center;
                    padding: 16px 0;
                    background-color: #FEECC9;
                    border-radius: 8px;
                    width: 160px;
                    flex-shrink: 0;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
                p{
                    font-size: 14px;
                    line-height: 1.6;
                }
            }
        }

    }

}
/* PC */
@media screen and (min-width: 768px){
    .reason_section{
        .heading_lv1{
            margin-bottom: 120px;
        }
        .reason_content{
            margin-bottom: 80px;
            display: flex;
            flex-direction: column;
            align-items: center;
            .reason_content__block{
                &:not(:last-child){
                    margin-bottom: 96px;
                }
                .reason_heading{
                    font-size: 24px;
                    text-align: left;
                    margin: 0 0 32px 0;
                    .num{
                        top: -48px;
                        font-size: 80px;
                    }
                    
                }
                .reason_content__block__item{
                    align-items: center;
                    margin-bottom: 16px;
                    width: 800px;
                    h4{
                        font-size: 16px;
                        padding: 24px 0;
                        width: 200px;
                    }
                    p{
                        font-size: 16px;
                    }
                }
                .reason_content__block__img{
                    margin-top: 40px;
                }
            }

        }

    }
}


/* ============================================================
flow_section
============================================================ */
.flow_section{
    .heading_lv1 {
        margin-bottom: 70px;
    }
    .introduction_flow{
        --icon-image:url(/images/common/icon_next_yellow.svg);
        --item-border-color:#FCE3B2;
        --item-circle-color:#F6AB00;
    }
    
}
/* PC */
@media screen and (min-width: 768px){
    .flow_section{
        .heading_lv1 {
            margin-bottom: 97px;
        }
    }
}

/* ============================================================
proposal_section
============================================================ */

.proposal_section{
    .btn_wrapper{
        margin-top: 64px;
    }
}

/* PC */
@media screen and (min-width: 768px){
    .proposal_section{
        .btn_wrapper{
            margin-top: 80px;
        }
    }
}

/* ============================================================
base_section
============================================================ */

.base_section{
    .base_contet{
        display: flex;
        flex-direction: column;
        gap: 16px;
        .base_contet__desc{
            .base_contet__heading{
                color:#ED6D00;
                font-weight: bold;
                line-height: 1.4;
                font-size: 21px;
                margin-bottom: 24px;
            }
            .base_contet__text{
                font-size: 14px;
                line-height: 1.6;
                margin-bottom: 16px;
            }
            .notes{

            }
        }
        .base_contet__img{
            width: 100%;
        }
    }
}
/* PC */
@media screen and (min-width: 768px){
    .base_section{
        .base_contet{
            flex-direction: row;
            gap: 0;
            .base_contet__desc{
                margin-top: 70px;
                .base_contet__heading{
                    font-size: 24px;
                }
                .base_contet__text{
                    font-size: 16px;
                }
                .notes{

                }
            }
            .base_contet__img{
                width: 535px;
            }
        }
    }
}

/* ============================================================
news_section
============================================================ */

.news_section{
    .shashoku_news_article{
        article{
            border-bottom: 1px solid #C4C4C4;
            &:first-child{
                border-top: 1px solid #C4C4C4;
            }
            
            a{
                display: flex;
                gap: 16px;
                padding: 16px 0;
                position: relative;
                .icon-arrow{
                    position: absolute;
                    right: 0;
                    bottom: 20px;
                    line-height: 1;
                    font-size: 10px;
                }
                .shashoku_news_article__left{
                    flex-shrink: 0;
                }
                .shashoku_news_article__right{
                    padding-right: 12px;
                    .data{
                        display: flex;
                        align-items: center;
                        gap: 16px;
                        margin-bottom: 8px;
                        time{
                            font-size: 12px;
                            line-height: 1;
                            color: #2b2b2b;
                        }
                        .category{
                            font-size: 10px;
                            font-weight: bold;
                            color: #fff;
                            line-height: 1;
                            padding: 0 12px;
                            height: 18px;
                            background-color: #44AE35;
                            border-radius: 9px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                        }
                    }
                    .title{
                        font-size: 14px;
                        line-height: 1.6;
                        font-weight: bold;
                        color: #2b2b2b;
                    }
                }

            }
        }
    }
}

/* PC */
@media screen and (min-width: 768px){
    .news_section{
        .shashoku_news_article{
            article{
                a{
                    gap: 24px;
                    padding: 20px 0;
                    .icon-arrow{
                        right: 0;
                        top: 50%;
                        bottom: auto;
                        transform:translateY(-50%);
                        font-size: 14px;
                    }
                    .shashoku_news_article__left{
                        width: 100px;
                        img{
                            width: 100%;
                        }
                    }
                    .shashoku_news_article__right{
                        padding-right: 12px;
                        .data{
                            gap: 20px;
                            margin-bottom: 10px;
                            time{
                                font-size: 14px;
                            }
                            .category{
                                font-size: 12px;
                                height: 24px;
                                border-radius: 12px;
                            }
                        }
                        .title{
                            font-size: 16px;
                        }
                    }

                }
            }
        }
    }
}