@charset "UTF-8";
/*==============================================================================
1.共通事項
2.fv
3.shop
4.business
5.about
6.モーダルウィンドウ
==============================================================================*/


/*============================================================================================================================================================
==============================================================================================================================================================

	1.共通事項

==============================================================================================================================================================
============================================================================================================================================================*/


/*============================================================================================================================================================
==============================================================================================================================================================

	2.fv

==============================================================================================================================================================
============================================================================================================================================================*/
#fv{
    min-height: 610px;
    max-height: 700px;
    height: calc(100svh - 52px);
    position: relative;
    background-color: var(--color-sub);

    &::after{
        content: "";
        width: 90px;
        aspect-ratio: 9 / 14;
        position: absolute;
        left: 20px;
        bottom: -30px;
        background: url(../1_img/front/fv-kaeru.svg) no-repeat center top / 100% auto;
    }

    & .inner{
        width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden;
    }
    & .fv-img_wrap{
        width: calc(100% - 40px);
        max-width: 347px;
        position: absolute;
        top: 15%;
        left: 50%;
        transform: translateX(-50%);

        & img{width: 100%;}

        & .fv-arrow{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            animation: rotate 15s linear infinite;
        }

        & .fv-text{
            position: absolute;
            top: calc(100% - 5%);
            left: 50%;
            transform: translateX(-50%);
        }
    }
}
@keyframes rotate {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}
/*==============================================================================

	fv PC

==============================================================================*/
@media all and (min-width: 769px){
    #fv{
        height: 700px;

        &::after{content: none;}

        & .inner{
            width: calc(var(--min-width) + 40px);
            display: flex;
            align-items: center;
        }

        /* ==================== メニュー ==================== */
        & nav{
            & ul{
                display: flex;
            }
            & .fv-menu{
                margin-top: 40px;
                flex-direction: column;
                gap: 20px;

                & li{
                    & a,& button{
                        padding-left: 40px;
                        position: relative;
                        display: inline-block;
                        color: var(--color-main);
                        font-weight: var(--weight-bold);
                        font-size: 2rem;
                        line-height: 1;

                        &::before{
                            content: "";
                            width: 25px;
                            aspect-ratio: 1 / 1;
                            position: absolute;
                            top: 50%;
                            left: 0;
                            transform: translateY(-50%);
                            background-size: 100% auto;
                        }
                    }

                    &.menu-shop a::before {background-image: url(../1_img/base/menu-shop_pc.svg);}
                    &.menu-item a::before {background-image: url(../1_img/base/menu-item_pc.svg);}
                    &.menu-business a::before {background-image: url(../1_img/base/menu-business_pc.svg);}
                    &.menu-contact button::before {background-image: url(../1_img/base/menu-contact_pc.svg);}

                    &.menu-business img{
                        width: 100px;
                        position: absolute;
                        left: calc(100% - 10px);
                        bottom: calc(100% - 0.5em);
                        pointer-events: none;
                    }
                }
            }
            & .fv-sns{
                margin-top: 20px;
                gap: 10px;
            }
        }
        /* ==================== メニュー end ==================== */
        

        & .fv-img_wrap{
            width: 575px;
            max-width: unset;
            top: 100px;
            left: unset;
            right: 30px;
            transform: translateX(0);

            & .fv-text{
                margin-left: 5px;
                position: absolute;
                top: -50px;
                left: 50%;
                transform: translateX(-50%);
            }

            &::after{
                content: "";
                width: 130px;
                aspect-ratio: 9 / 14;
                position: absolute;
                left: -110px;
                bottom: 0px;
                background: url(../1_img/front/fv-kaeru.svg) no-repeat center top / 100% auto;
            }
        }
    }
}



/*============================================================================================================================================================
==============================================================================================================================================================

	2.shop

==============================================================================================================================================================
============================================================================================================================================================*/
.shop-wrap{
    padding-top: 50px;
    background-color: var(--color-sub);

    & .title-lv2{
        margin-bottom: 0;
        padding: 0 20px;
    }

    /* ==================== 直売所について ==================== */
    & #shop{
        padding-top: 30px;

        & .intro{padding: 0 20px;}
        & .carousel-wrap{
            margin-top: 30px;

            & li{
                width: 200px;
                border-radius: 50%;
                overflow: hidden;

                & img{width: 100%;}
            }
        }

        & .shop-kaeru_wrap{
            margin-top: 40px;
            padding: 0 20px;
            position: relative;

            & .shop-kaeru{
                padding: 30px 10px;
                position: relative;
                z-index: 3;
                background-color: var(--color-other1);
                border-radius: 10px;
                text-align: center;

                & .title-lv4{
                    color: var(--color-main);
                }
            }

            &::after{
                content: "";
                width: 100%;
                height: calc(100% - 90px);
                position: absolute;
                bottom: 0;
                left: 0;
                z-index: 2;
                background-color: #fff;
            }
        }
    }
    /* ==================== 直売所について end ==================== */

    /* ==================== 買えるもの ==================== */
    & #item{
        padding: 50px 0;
        background-color: #fff;
        overflow: hidden;

        & .intro{
            padding: 0 20px;
            text-align: center;
        }

        /* ===== 商品詳細 ===== */
        & .items{
            margin-top: 50px;

            & + .items{margin-top: 40px;}

            & h4{
                text-align: center;

                & span{
                    padding: 5px 20px;
                    min-width: 180px;
                    display: inline-block;
                    position: relative;
                    background-color: var(--color-sub);
                    border-radius: 10px;
                    color: var(--color-main);
                    font-size: 1.8rem;
                    font-weight: var(--weight-bold);

                    &::after{
                        content: "";
                        width: 20px;
                        height: 10px;
                        position: absolute;
                        top: calc(100% - 1px);
                        left: 50%;
                        transform: translateX(-50%);
                        background-color: inherit;
                        clip-path: polygon(0 0, 50% 100%, 100% 0);
                    }
                }
            }

            & .items-content{
                margin-top: 20px;
                padding-top: 110px;
                position: relative;

                & .items-text{
                    padding-left: 90px;
                    padding-right: 20px;
                    position: relative;
                    z-index: 2;

                    & h5{
                        margin-bottom: 20px;
                        position: relative;
                        color: var(--color-main);
                        font-size: 1.6rem;
                        font-weight: var(--weight-bold);

                        & img{
                            position: absolute;
                            top: -50px;
                            right: -25px;
                            z-index: -1;
                        }
                    }
                }

                & .items-img{
                    width: 310px;
                    position: absolute;
                    z-index: 1;
                    top: 0;
                    left: 0;
                    transform: translateX(-40%);

                    & img{
                        width: 100%;
                        border-radius: 50%;
                        overflow: hidden;
                    }

                    &::after{
                        content: "";
                        width: 100%;
                        height: 100%;
                        position: absolute;
                        top: 0;
                        right: 0;
                        background: linear-gradient(90deg,rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 1) 92%);
                    }
                }
            }
            
            /* ========== アコーディオン ========== */
            & .items-accordion{
                margin-top: 20px;
                padding: 0 20px;
                display: flex;
                flex-direction: column;
                gap: 10px;

                & .accordion-box{
                    & button{
                        padding: 10px;
                        width: 100%;
                        position: relative;
                        z-index: 2;
                        background-color: var(--color-main);
                        border-radius: 30px;
                        text-align: center;
                        color: #fff;
                        opacity: 1!important;

                        &::before,&::after{
                            content: "";
                            position: absolute;
                            top: 50%;
                            right: 10px;
                            transform: translateY(-50%);
                            background-color: #fff;
                            transition: 500ms;
                        }
                        &::before{
                            width: 1px;
                            height: 13px;
                            right: 25px;
                        }
                        &::after{
                            width: 13px;
                            height: 1px;
                            right: 19px;
                        }
                    }

                    & .accordion-inner{
                        overflow: hidden;
                        height: 0;
                        transition: height 500ms ease;
                        transform: translateY(-20px);

                        & div{
                            padding: 40px 20px 20px;
                            background-color: var(--color-sub);
                            border-radius: 0 0 10px 10px;

                            &.accordion-inner_1{
                                & h5{
                                    font-size: 1.6rem;
                                    font-weight: var(--weight-bold);
                                    text-align: center;
                                    color: var(--color-main);
                                }
                                & p{
                                    margin-top: 20px;
                                }
                            }

                            &.accordion-inner_2{
                                & table{
                                    width: 100%;

                                    & th,& td{
                                        border-top: 1px solid var(--color-accent);
                                        vertical-align: middle;
                                        line-height: 1.6;
                                    }
                                    & th{
                                        padding: 20px;
                                        width: 10em;
                                        font-weight: var(--weight-bold);
                                        color: var(--color-main);
                                    }
                                    & td{
                                        padding: 20px 20px 20px 10px;
                                    }

                                    & tr:first-child{
                                        & th,& td{
                                            padding-top: 0;
                                            border-top: none;
                                        }
                                    }
                                }
                            }
                        }
                    }

                    &.open button{
                        &::before{
                            transform: translateY(-50%) rotate(90deg);
                            opacity: 0;
                        }
                    }
                }

                & + .items-accordion{
                    margin-top: 10px;
                }
            }
            /* ========== アコーディオン end ========== */

            & .items-sub{
                margin-top: 30px;
                padding: 40px 20px;
                background: 
                url(../1_img/base/deco-border.svg) repeat-x top left,
                url(../1_img/base/deco-border.svg) repeat-x bottom left;

                & h5{
                    text-align: center;
                    font-size: 1.6rem;
                    font-weight: var(--weight-bold);
                    color: var(--color-main);
                }

                & p{
                    margin-top: 20px;
                }
            }

            /* 偶数 */
            &:nth-child(even){
                & .items-content{
                    & .items-text{
                        padding-left: 20px;
                        padding-right: 90px;

                        & h5{
                            & img{
                                left: -25px;
                                right: unset;
                            }
                        }
                    }

                    & .items-img{
                        left: unset;
                        right: 0;
                        transform: translateX(40%);

                        &::after{transform: scale(-1,1);}
                    }
                }
            }
        }
        /* ===== 商品詳細 end ===== */
    }
    /* ==================== 買えるもの end ==================== */

    /* ==================== つち・やさいSTAND ==================== */
    & #shop-stand{
        padding: 50px 0 0;
        background-color: var(--color-other1);

        & .intro{
            font-size: 1.6rem;
            color: var(--color-main);
            text-align: center;
            font-weight: var(--weight-bold);
        }

        & .flex-box{
            margin-top: 20px;
            display: flex;
            flex-direction: column;
            gap: 20px;

            & .stand-text{
                order: 2;
                text-align: center;

                & .text-address{
                    margin-top: 20px;
                    padding: 0 20px;
                    text-align: left;
                }

                & .text-info{
                    margin-top: 20px;
                    padding: 20px 20px 0;
                    background: url(../1_img/base/deco-border_white.svg) repeat-x top left / 15px auto;
                    text-align: left;

                    & em{font-weight: var(--weight-bold);}
                    & a{color: var(--color-font);}
                }
            }

            & .stand-map{
                order: 1;

                & iframe{
                    width: 100%;
                    height: 100%;
                    aspect-ratio: 16 / 9;
                }
            }
        }

        & .btn-wrap{
            margin-top: 30px;
            text-align: center;

            & .fukidashi-wrap{
                & .fukidashi{
                    font-weight: var(--weight-bold);
                    font-size: 1.6rem;
                }
            }
            & a{margin-top: 15px;}
        }

        & .carousel-wrap{
            margin-top: 30px;
            padding-bottom: 80px;
            background: linear-gradient(180deg, var(--color-other1) 100px, rgba(255, 255, 255, 1) 100px);

            & li{
                width: 200px;
                border-radius: 50%;
                overflow: hidden;

                & img{width: 100%;}
            }
        }
    }
    /* ==================== つち・やさいSTAND end ==================== */
}

/*============================================================================================================================================================

	shop PC

============================================================================================================================================================*/
@media all and (min-width: 769px){
    .shop-wrap{
        padding-top: 100px;

        & .title-lv2{
            margin-bottom: 0;
            padding: 0;
        }

        /* ==================== 直売所について ==================== */
        & #shop{
            padding-top: 50px;

            & .intro{text-align: center;}

            & .carousel-wrap{
                margin-top: 40px;

                & li{width: 250px;}
            }

            & .shop-kaeru_wrap{
                margin-top: 70px;
                padding: 0;

                & .shop-kaeru{
                    padding: 30px 80px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    & .title-lv4{
                        margin-bottom: 0;
                        padding: 100px 0;
                        width: 50%;
                        position: relative;
                        font-size: 3rem;

                        &::before,&::after{
                            content: "";
                            width: 247px;
                            height: 68px;
                            position: absolute;
                            left: 50%;
                            background: url(../1_img/front/shop-arrow.svg) no-repeat center / 100% auto;
                        }
                        &::before{
                            top: 0;
                            transform: translateX(-50%);
                        }
                        &::after{
                            bottom: 0;
                            transform: translateX(-50%) scale(-1,-1);
                        }
                    }

                    & img{width: 390px;}
                }

                &::after{
                    height: calc(100% - 150px);
                }
            }
        }
        /* ==================== 直売所について end ==================== */

        /* ==================== 買えるもの ==================== */
        & #item{
            padding: 80px 0;

            & .intro{
                padding: 0 20px;
                text-align: center;
            }

            /* ===== 商品詳細 ===== */
            & .items{
                margin-top: 50px;

                & + .items{margin-top: 70px;}

                & h4{
                    & span{
                        padding: 10px 20px;
                        font-size: 2rem;
                    }
                }

                & .items-content{
                    margin: 20px auto 0;
                    padding-top: 0px;
                    width: 800px;
                    display: flex;
                    align-items: center;

                    & .items-text{
                        padding-left: 40px;
                        padding-right: 0;
                        order: 2;

                        & h5{
                            margin-bottom: 30px;
                            font-size: 2.5rem;

                            & img{
                                width: 200px;
                                top: -30px;
                                right: -40px;
                            }
                        }
                    }

                    & .items-img{
                        width: 380px;
                        flex-shrink: 0;
                        position: relative;
                        top: unset;
                        left: unset;
                        transform: translateX(0);
                        order: 1;

                        &::after{content: none;}
                    }
                }
                
                /* ========== アコーディオン ========== */
                & .items-accordion{
                    margin: 30px auto 0;
                    width: 700px;
                    padding: 0;
                    gap: 20px;

                    & .accordion-box{
                        & button{font-size: 1.6rem;}

                        & .accordion-inner{
                            overflow: hidden;
                            height: 0;
                            transition: height 500ms ease;
                            transform: translateY(-20px);

                            & div{
                                padding: 60px 20px 40px;
                                background-color: var(--color-sub);
                                border-radius: 0 0 10px 10px;

                                &.accordion-inner_1{
                                    & h5{font-size: 2rem;}
                                    & p{margin-top: 20px;}
                                }

                                &.accordion-inner_2{
                                    & table{
                                        margin: auto;
                                        width: 500px;

                                        & th{
                                            width: 15em;
                                        }
                                    }
                                }

                                &.accordion-inner_3{
                                     & h5{font-size: 2rem;}
                                    & p{margin-top: 20px;}
                                }
                            }
                        }

                        &.open button{
                            &::before{
                                transform: translateY(-50%) rotate(90deg);
                                opacity: 0;
                            }
                        }
                    }

                    & + .items-accordion{
                        margin-top: 10px;
                    }
                }
                /* ========== アコーディオン end ========== */

                & .items-sub{
                    margin: 50px auto 0;
                    width: 700px;
                    background-size: 20px auto;

                    & h5{font-size: 2rem;}
                    & p{text-align: center;}
                }

                /* 偶数 */
                &:nth-child(even){
                    & .items-content{
                        & .items-text{
                            padding-right: 40px;
                            padding-left: 0;
                            order: 1;

                            & h5{
                                & img{
                                    top: -50px;
                                    left: -80px;
                                    right: unset;
                                }
                            }
                        }

                        & .items-img{
                            left: unset;
                            right: unset;
                            transform: translateX(0);
                            order: 2;

                            &::after{transform: scale(-1,1);}
                        }
                    }
                }
            }
            /* ===== 商品詳細 end ===== */
        }
        /* ==================== 買えるもの end ==================== */

        /* ==================== つち・やさいSTAND ==================== */
        & #shop-stand{
            padding: 90px 0 0;

            & .inner{
                padding: 0;
                width: 700px;
            }
            & .intro{font-size: 2.5rem;}

            & .flex-box{
                margin-top: 50px;
                flex-direction: row;
                justify-content: space-between;
                gap: 0;

                & .stand-text{
                    width: 320px;
                }

                & .stand-map{
                    width: 350px;

                    & iframe{aspect-ratio: 3 / 2;}
                }
            }

            & .btn-wrap{
                margin-top: 80px;

                & .fukidashi{font-size: 1.8rem;}
                & a{margin-top: 15px;}
            }

            & .carousel-wrap{
                margin-top: 40px;
                padding-bottom: 160px;
                background: linear-gradient(180deg, var(--color-other1) 125px, rgba(255, 255, 255, 1) 125px);

                & li{width: 250px;}
            }
        }
        /* ==================== つち・やさいSTAND end ==================== */
    }
}


/*============================================================================================================================================================
==============================================================================================================================================================

	4.business

==============================================================================================================================================================
============================================================================================================================================================*/
#business{

    /* ==================== イントロ ==================== */
    & .intro{
        padding: 70px 0 50px;
        background-color: var(--color-accent);
        color: #fff;

        & h2{color: #fff;}

        & .intro-text_1{padding: 0 20px;}
        & .intro-text_2{
            margin-top: 40px;
            padding: 50px 0 60px;
            text-align: center;
            font-size: 2rem;
            font-weight: var(--weight-bold);
            position: relative;

            & span{
                padding-bottom: 8px;
                background: url(../1_img/base/deco-border_green.svg) repeat-x bottom left / 15px auto;
            }
            
            &::before,&::after{
                content: "";
                width: 135px;
                height: 37px;
                position: absolute;
                left: 50%;
                background: url(../1_img/front/business-arrow.svg) no-repeat center / 100% auto;
            }
            &::before{
                top: 0;
                transform: translateX(-50%);
            }
            &::after{
                bottom: 0;
                transform: translateX(-50%) scale(-1,-1);
            }
        }
        & .flex-box{
            margin-top: 35px;
            display: flex;
            flex-direction: column;
            gap: 30px;

            & > div{
                display: flex;
                justify-content: left;
                align-items: center;
                gap: 20px;

                & .intro-text{
                    font-weight: var(--weight-bold);
                    order: 2;
                }

                & .intro-img{
                    width: 120px;
                    position: relative;
                    flex-shrink: 0;
                    order: 1;

                    & img{
                        width: 100%;
                        border-radius: 100%;
                        overflow: hidden;
                    }

                    &::before{
                        content: "";
                        width: 30px;
                        height: 20px;
                        position: absolute;
                        top: -11px;
                        left: 3px;
                        background: url(../1_img/front/business-intro-img_deco.svg) no-repeat center / 100% auto;
                        transform: rotate(-30deg);
                    }

                    &.deco-right::before{
                        left: unset;
                        top: 4px;
                        right: -14px;
                        transform: rotate(50deg);
                    }
                }
            }
        }
    }
    /* ==================== イントロ end ==================== */

    /* ==================== 品目 ==================== */
    & .article{
        padding-top: 50px;

        & .inner{padding: 0 40px;}

        & ul{
            display: flex;
            flex-wrap: wrap;
            gap: 20px;

            & li{
                padding: 10px;
                width: calc(( 100% - 20px ) / 2);
                background-color: var(--color-main);
                color: #fff;
                text-align: center;
                border-radius: 30px;
                font-weight: var(--weight-bold);
            }
        }

        & p{
            margin-top: 40px;

            & small{
                margin-top: 25px;
                display: block;
            }
        }
    }
    /* ==================== 品目 end ==================== */

    /* ==================== ケース ==================== */
    & .case{
        padding-top: 50px;

        & h3{
            margin-bottom: 50px;
        }

        & .case-wrap{
            display: flex;
            flex-direction: column;
            gap: 60px;

            & .case-item{
                padding: 20px;
                position: relative;
                background-color: var(--color-sub);
                border-radius: 10px;

                & .case-title{
                    position: absolute;
                    width: 100%;
                    top: 0;
                    left: 0;
                    transform: translateY(-50%);
                    text-align: center;
                    font-family: "Lexend", sans-serif;
                    font-size: 3.5rem;
                    color: #6fae7d;
                    font-weight: var(--weight-light);
                }

                & h4{
                    margin: 30px 0;
                    text-align: center;
                    font-size: 1.6rem;
                    font-weight: var(--weight-bold);
                }

                & .item-note{
                    padding: 30px 20px 20px;
                    position: relative;
                    background-color: #fff;
                    border-radius: 10px;
                    font-weight: var(--weight-bold);

                    & h5{
                        width: 100%;
                        position: absolute;
                        top: 0;
                        left: 0;
                        transform: translateY(-50%);
                        font-size: 1.6rem;
                        text-align: center;
                        color: var(--color-main);
                    }

                    & ul{
                        display: flex;
                        flex-wrap: wrap;
                        
                        & li{width: 50%;}
                    }

                    & p{text-align: center;}
                    & + .item-note{margin-top: 20px;}
                }

                & .item-text{
                    margin-top: 20px;
                    text-align: center;
                }
            }
        }
    }
    /* ==================== ケース end ==================== */

    /* ==================== 取引の流れ ==================== */
    & .flow{
        margin-top: 60px;
        padding: 50px 0 80px;
        background-color: var(--color-other1);

        & ol{
            margin-top: 80px;
            display: flex;
            flex-direction: column;
            gap: 70px;

            & li{
                padding: 20px;
                position: relative;
                background-color: #fff;
                border-radius: 10px;
                z-index: 2;

                & h4{
                    margin-bottom: 10px;
                    padding-bottom: 5px;
                    position: relative;
                    text-align: center;
                    font-size: 1.6rem;font-weight: var(--weight-bold);
                    color: var(--color-main);

                    &::after{
                        content: "";
                        position: absolute;
                        left: 50%;
                        bottom: 0;
                        transform: translateX(-50%);
                        width: 140px;
                        height: 5px;
                        background: url(../1_img/base/deco-border.svg) repeat-x bottom left / 15px auto;
                    }
                }

                & a{
                    font-weight: var(--weight-bold);
                    text-decoration: underline;
                    color: var(--color-accent);
                }

                & img{
                    margin-top: 10px;
                    width: 100%;
                }

                & .flow-num{
                    width: 100%;
                    position: absolute;
                    top: -47px;
                    left: 0;
                    text-align: center;
                    color: var(--color-accent);
                    font-size: 3rem;
                    font-family: "Lexend", sans-serif;
                }

                &::before{
                    content: "";
                    width: 120px;
                    aspect-ratio: 1 / 1;
                    position: absolute;
                    top: -50px;
                    left: 50%;
                    transform: translateX(-50%);
                    z-index: -1;
                    background-color: #fff;
                    border-radius: 100%;
                }

                &:not(:first-child)::after{
                    content: "";
                    width: 10px;
                    height: 38px;
                    position: absolute;
                    top: -79px;
                    left: 50%;
                    transform: translateX(-50%);
                    z-index: 1;
                    background: url(../1_img/front/flow-deco.svg) center / 100% auto;
                }
            }
        }
    }
    /* ==================== 取引の流れ end ==================== */

    /* ==================== 処理場について ==================== */
    & .plant{
        padding-top: 50px;

        & .flex-box{
            display: flex;
            flex-direction: column;
            gap: 30px 0;

            & .plant-text{
                order: 2;

                & p:not(.text-fukidashi){
                    padding: 0 20px;
                }
                & p.text-fukidashi{
                    margin-top: 30px;
                    padding: 20px;
                    position: relative;
                    background-color: #c9e5cd;
                    border-radius: 10px;
                    font-size: 1.6rem;
                    font-weight: var(--weight-bold);
                    color: var(--color-main);
                    text-align: center;

                    &::after {
                        content: "";
                        width: 30px;
                        height: 20px;
                        position: absolute;
                        bottom: calc(100% - 1px);
                        left: 50%;
                        transform: translateX(-50%);
                        background-color: inherit;
                        clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
                    }
                }
            }

            & .plant-map{
                width: 100%;
                order: 1;

                & img{width: 100%;}
            }
        }
    }
    /* ==================== 処理場について end ==================== */
}
/*============================================================================================================================================================

	business PC

============================================================================================================================================================*/
@media all and (min-width: 769px){
    #business{

        /* ==================== イントロ ==================== */
        & .intro{
            padding: 90px 0 80px;

            & h2{margin-bottom: 15px;}

            & .intro-text_1{text-align: center;}
            & .intro-text_2{
                margin-top: 70px;
                font-size: 2.5rem;
            }
            & .flex-box{
                margin-top: 40px;
                flex-direction: row;
                gap: 0;

                & > div{
                    padding: 0 30px;
                    width: 50%;
                    justify-content: left;
                    gap: 30px;

                    & .intro-img{
                        width: 190px;

                        &::before{
                            width: 35px;
                            height: 30px;
                        }
                    }
                }
            }
        }
        /* ==================== イントロ end ==================== */


        /* ==================== 品目 ==================== */
        & .article{
            padding-top: 120px;

            & .inner{
                padding: 0;
                width: 700px;
            }

            & ul{
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                gap: 10px;

                & li{
                    padding: 10px;
                    width: 180px;
                    font-size: 2rem;
                }
            }

            & p{
                margin-top: 40px;
                text-align: center;
                letter-spacing: 0.12em;

                & small{
                    text-align: left;
                    font-size: 1.4rem;
                }
            }
        }
        /* ==================== 品目 end ==================== */

        /* ==================== ケース ==================== */
        & .case{
            padding-top: 70px;

            & .inner{
                padding: 0;
                width: 700px;
            }
            
            & h3{margin-bottom: 60px;}

            & .case-wrap{
                display: flex;
                flex-direction: column;

                & .case-item{
                    padding: 20px 30px 30px;
                    display: flex;
                    flex-wrap: wrap;
                    gap: 0 20px;

                    & .case-title{font-size: 4.5rem;}

                    & h4{
                        width: 100%;
                        margin: 30px 0 40px;
                        font-size: 2rem;
                    }

                    & .item-note{
                        width: calc( (100% - 20px) / 2 );
                        display: flex;
                        justify-content: center;
                        align-items: center;

                        & ul{                            
                            & li{font-size: 1.5rem;}
                        }

                        & + .item-note{margin-top: 0;}
                    }

                    & .item-text{
                        margin-top: 30px;
                        width: 100%;
                    }
                }
            }
        }
        /* ==================== ケース end ==================== */

        /* ==================== 取引の流れ ==================== */
        & .flow{
            margin-top: 170px;
            padding: 60px 0 100px;

            & ol{
                margin-top: 100px;
                display: grid;
                grid-template-rows: repeat(4, auto);
                grid-template-columns: 1fr 1fr;
                grid-auto-flow: column;
                gap: 70px 40px;

                & li{
                    padding: 30px;

                    & h4{
                        margin-bottom: 20px;
                        font-size: 1.8rem;
                    }

                    &:nth-child(5)::after{
                        content: none;
                    }
                }
            }
        }
        /* ==================== 取引の流れ end ==================== */

        /* ==================== 処理場について ==================== */
        & .plant{
            padding-top: 110px;

            & h3{margin-bottom: 60px;}

            & .flex-box{
                flex-direction: row;
                padding: 0 30px;
                gap: 0 60px;

                & .plant-text{
                    width: 50%;
                    display: flex;
                    flex-direction: column;

                    & p:not(.text-fukidashi){padding: 0;}
                    & p.text-fukidashi{
                        margin-top: auto;
                        padding: 30px 20px;
                    }
                }

                & .plant-map{
                    width: 50%;
                }
            }
        }
        /* ==================== 処理場について end ==================== */
    }
}




/*============================================================================================================================================================
==============================================================================================================================================================

	5.about

==============================================================================================================================================================
============================================================================================================================================================*/
#about{
    margin-top: 75px;
    padding-top: 44px;
    position: relative;
    
    &::after{
        content: "";
        width: 44px;
        aspect-ratio: 1 / 1;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        background: url(../1_img/front/about-deco.svg) no-repeat center / 100% auto;
    }

    /* ==================== イントロ ==================== */
    & .intro{
        padding: 55px 20px 60px;
        background: 
        url(../1_img/front/about-t-l.svg) no-repeat top 17px left 17px / 38px auto,
        url(../1_img/front/about-t-r.svg) no-repeat top 17px right 17px / 38px auto,
        url(../1_img/front/about-b-l.svg) no-repeat bottom 20px left 15px / 46px auto,
        url(../1_img/front/about-b-r.svg) no-repeat bottom 20px right 15px / 46px auto,
        var(--color-other1);

        & .intro-inner{
            & h2{
                margin-bottom: 20px;
                padding: 0 20px;
                font-weight: var(--weight-bold);
                font-size: 1.8rem;
                color: var(--color-main);
                text-align: center;
            }

            & .intro-img{
                margin-bottom: 30px;

                &  img{width: 100%;}
            }
        }
    }
    /* ==================== イントロ end ==================== */

    /* ==================== 見学 ==================== */
    & .visit{
        margin-top: 30px;

        & .inner{padding: 0;}

        & .visit-fukidashi{
            text-align: center;

            & span{
                padding: 10px 20px;
                display: inline-block;
                position: relative;
                background-color: var(--color-accent);
                border-radius: 10px;
                font-size: 1.6rem;
                font-weight: var(--weight-bold);
                color: #fff;

                &::after{
                    content: "";
                    width: 20px;
                    height: 10px;
                    position: absolute;
                    top: calc(100% - 1px);
                    left: 50%;
                    transform: translateX(-50%);
                    background: inherit;
                    clip-path: polygon(0 0, 50% 100%, 100% 0);
                }
            }
        }

        & h3{
            margin-top: 20px;
            position: relative;
            z-index: 3;
            text-align: center;

            & small,& span{
                font-weight: var(--weight-bold);
                color: var(--color-main);
            }
            & small{
                display: block;
                font-size: 1.4rem;
            }
            & span{
                font-size: 1.8rem;
                padding-bottom: 8px;
                display: inline-block;
                background: url(../1_img/base/deco-border.svg) repeat-x bottom left / 15px auto;
            }
        }

        & .visit-img{
            margin-top: -30%;
            display: block;
            width: 100%;
            position: relative;

            &::before{
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                z-index: 2;
                width: 100%;
                height: 40%;
                background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.89) 76%, rgba(255, 255, 255, 1) 100%);
            }

            & img{width: 100%;}
        }
    }
    /* ==================== 見学 end ==================== */


    /* ==================== 見学 > つち・やさいstand ==================== */
    & .stand{
        margin-top: 15px;
        padding: 0 20px;

        & .btn-wrap{
            text-align: center;

            & .fukidashi-wrap{
                font-size: 1.6rem;
                font-weight: var(--weight-bold);
                line-height: 1.6;

                & .fukidashi {
                    padding: 0 20px;

                    &::before, &::after {
                        width: 2px;
                        background-color: #6fae7d;
                    }
                }
            }
            & .tel{
                margin-top: 30px;
                font-size: 1.8rem;
                font-weight: var(--weight-bold);
            }
            & .btn-box{
                margin-top: 15px;
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 15px;

                & .button{
                    max-width: 280px;
                    &.line{background-color: #06c755;}
                }
            }
        }

        & .stand-content{
            margin-top: 40px;
            padding: 30px 20px;
            position: relative;
            background-color: #c9e5cd;
            border-radius: 10px;
            
            &::after{
                content: "";
                width: 30px;
                height: 20px;
                position: absolute;
                bottom: calc(100% - 1px);
                left: 50%;
                transform: translateX(-50%);
                background: inherit;
                clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
            }

            & h4{
                font-size: 1.6rem;
                font-weight: var(--weight-bold);
                text-align: center;

                & img{
                    margin-right: 5px;
                    vertical-align: top;
                }
                & span{
                    padding-bottom: 8px;
                    background: url(../1_img/base/deco-border_green.svg) repeat-x bottom left / 15px auto;
                    line-height: 2.5em;
                    color: var(--color-main);
                }
            }

            & p{
                margin-top: 20px;
                word-break: break-all;
            }

            & .stand-img{margin-top: 20px;}
        }
    }
    /* ==================== 見学 > つち・やさいstand end ==================== */


    /* ==================== 見学 > 会社概要 ==================== */
    & #profile{
        margin-top: 60px;
        padding: 40px 0 60px;
        background-color: var(--color-sub);

        & table{
            & th,& td{
                border-top: 1px solid var(--color-accent);
                vertical-align: middle;
                line-height: 1.6;
            }
            & th{
                padding: 20px;
                width: 10em;
                font-weight: var(--weight-bold);
                color: var(--color-main);
            }
            & td{
                padding: 20px 20px 20px 0;
            }

            & tr:first-child{
                & th,& td{
                    padding-top: 0;
                    border-top: none;
                }
            }
        }
		
                & .accordion-box{
					margin-top: 50px;
                    & button{
                        padding: 10px;
                        width: 100%;
                        position: relative;
                        z-index: 2;
                        background-color: var(--color-main);
                        border-radius: 30px;
                        text-align: center;
                        color: #fff;
                        opacity: 1!important;

                        &::before,&::after{
                            content: "";
                            position: absolute;
                            top: 50%;
                            right: 10px;
                            transform: translateY(-50%);
                            background-color: #fff;
                            transition: 500ms;
                        }
                        &::before{
                            width: 1px;
                            height: 13px;
                            right: 25px;
                        }
                        &::after{
                            width: 13px;
                            height: 1px;
                            right: 19px;
                        }
                    }

                    & .accordion-inner{
                        overflow: hidden;
                        height: 0;
                        transition: height 500ms ease;
                        transform: translateY(-20px);
						
						& div{
							padding: 50px 30px 30px;
							background: #fff;
						}
					}
					

                    &.open button{
                        &::before{
                            transform: translateY(-50%) rotate(90deg);
                            opacity: 0;
                        }
                    }
		}
    }
    /* ==================== 見学 > 会社概要 end ==================== */


}
/*============================================================================================================================================================

	about PC

============================================================================================================================================================*/
@media all and (min-width: 769px){
    #about{
        margin-top: 140px;
        padding-top: 80px;

        &::after{width: 80px;}

        /* ==================== イントロ ==================== */
        & .intro{
            padding: 80px 20px 70px;
            background: var(--color-other1);

            & .intro-inner{
                display: flex;
                position: relative;

                & > div{width: 50%;}

                & .intro-text{
                    padding: 0 30px;
                    order: 2;

                    & h2{
                        margin-top: -0.5em;
                        margin-bottom: 20px;
                        padding: 0;
                        font-size: 2.5rem;
                        text-align: left;
                    }
                }

                & .intro-img{
                    padding: 0 30px;
                    margin-bottom: 0;
                    order: 1;
                }
        
                /* 飾り */
                &::before,&::after{
                    content: "";
                    position: absolute;
                    width: 70px;
                    background-color: red;
                }
                &::before{
                    height: calc(100% + 70px);
                    top: -30px;
                    left: -45px;
                    background:
                    url(../1_img/front/about-t-l.svg) no-repeat top left / 46px auto,
                    url(../1_img/front/about-b-l.svg) no-repeat bottom left 15px / 53px auto;
                }
                &::after{
                    height: calc(100% + 50px);
                    top: -40px;
                    right: -20px;
                    background:
                    url(../1_img/front/about-t-r.svg) no-repeat top right 5px / 48px auto,
                    url(../1_img/front/about-b-r.svg) no-repeat bottom right / 55px auto;
                }
            }
        }
        /* ==================== イントロ end ==================== */

        /* ==================== 見学 ==================== */
        & .visit{
            margin-top: 130px;

            & .visit-fukidashi{
                & span{
                    padding: 15px 40px;
                    font-size: 2.5rem;

                    &::after{
                        width: 30px;
                        height: 15px;
                    }
                }
            }

            & h3{
                margin-top: 60px;

                & small{font-size: 1.8rem;}
                & span{
                    padding-bottom: 3px;
                    font-size: 3rem;
                }
            }

            & .visit-img{margin-top: -100px;}
        }
        /* ==================== 見学 end ==================== */


        /* ==================== 見学 > つち・やさいstand ==================== */
        & .stand{
            margin: 50px auto 0;
            width: 700px;
            padding: 0;

            & .btn-wrap{
                & .fukidashi-wrap{font-size: 2rem;}
                & .tel{font-size: 2rem;}

                & .btn-box{
                    flex-direction: row;
                    justify-content: center;
                }
            }

            & .stand-content{
                margin-top: 60px;
                padding: 40px;
                
                &::after{
                    width: 50px;
                    height: 30px;
                }

                & h4{
                    font-size: 2rem;

                    & span{font-size: 2rem;}
                }

                & p{
                    margin-top: 30px;
                    text-align: center;
                }

                & .stand-img{
                    margin-top: 40px;
                    text-align: center;
                }
            }
        }
        /* ==================== 見学 > つち・やさいstand end ==================== */


        /* ==================== 見学 > 会社概要 ==================== */
        & #profile{
            margin-top: 140px;
            padding: 50px 0 60px;

            & table{
                margin: auto;
                width: 740px;

                & th,& td{
                    letter-spacing: 0.1em;
                }

                & th{
                    width: 130px;
                }
            }
                & .accordion-box{
					text-align: center;
					& button{
						width: 250px
					}
			}
        }
        /* ==================== 見学 > 会社概要 end ==================== */


    }
}




/*============================================================================================================================================================
==============================================================================================================================================================

	6.モーダルウィンドウ

==============================================================================================================================================================
============================================================================================================================================================*/
.modal-content{
    padding: 20px 0;
    text-align: center;
    
    & .fukidashi-wrap{
        font-size: 1.4rem;
        font-weight: var(--weight-bold);
    }
    
    & .tel{
        margin-top: 20px;
        font-size: 1.6rem;
        font-weight: var(--weight-bold);
    }
    
    & ul{
        margin-top: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        
        & .button{max-width: 280px;}
        & .line{background-color: #06c755;}
    }
}
/*============================================================================================================================================================

	about PC

============================================================================================================================================================*/
@media all and (min-width: 769px){
    .modal-content{
        padding: 20px;
    
        & .fukidashi-wrap{font-size: 1.6rem;}    
        & .tel{font-size: 1.8rem;}
    }
}