@charset "UTF-8";

main{
    width: 100%;
    margin: 0 auto;
    padding: 145px 0 0;
    position: relative;
}
section#section01{
    background: url(/bunjyo/funabashi-nichidaimaejt5/images/quality/content01_bg.png);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: bottom center;
    padding: 0 0 0;
    h2{
        color: var(--color04);
        font-family: var(--font02);
        font-weight: 500;
        font-size: var(--font32-50);
        text-align: center;
        width: 100%;
        margin: 0 auto 3%;
        padding: 3% 0 0;
    }
    h3{
        color: var(--color04);
        font-size: var(--font24-30);
        line-height: 1.6em;
        text-align: center;
        width: 100%;
        margin: 0 auto 3%;
        padding: 0 0 0;
    }
    p{
        color: var(--color04);
        line-height: 1.8em;
        max-width: var(--width03);
        width: 98%;
        margin: 0 auto 5%;
        padding: 0 0 0;
    }
}
section#section02{
    padding: 0;

    .inner{
        display: flex;
        flex-wrap: wrap;
        max-width: var(--width02);
        margin: 0 auto 5%;
        padding: 0;

        h3{
            width: 100%;
            margin: 0 auto 3%;
            position: relative;
            
            span{
                background: var(--colorB);
                color: var(--colorW);
                font-size: var(--font20-24);
                line-height: 1.6em;
                padding: 10px 20px 5px;
            }

            &:after{
                content: "";
                background: var(--colorB);
                width: 70%;
                height: 1px;
                position: absolute;
                top: 50%;
                right: 0;
                transform: translate(0,-50%);
            }
        }
        .text{
            width: 60%;

            h4{
                color: var(--color04);
                font-size: var(--font20-24);
                line-height: 1.6em;
                width: 100%;
                margin: 0 auto 3%;
            }
            p{
                line-height: 1.6em;
                margin: 0 auto 3%;

                b{
                    display: block;
                }
            }
        }
        picture{
            width: 40%;

            span{
                font-size: var(--font-menu);
            }
        }
        .award{
            background: var(--color11);
            display: grid;
            grid-template-columns: 12fr 1fr;
            width: 100%;
            margin: 0 auto 5%;
            padding: 10px 30px;

            h4{
                color: var(--color12);
                font-size: var(--font18-22);
                line-height: 1.6em;
                text-align: left;
                grid-column: 1/2;
                grid-row: 1/2;
                width: 100%;
                margin: 0 auto;
                padding: 20px 0 0;
            }
            p{
                line-height: 1.6em;
                grid-column: 1/2;
                grid-row: 2/3;
                width: 100%;
                padding: 0 60px 0 0;
            }
            img{
                grid-column: 2/3;
                grid-row: 1/3;
            }
        }

        &.inner01 h3{
            order:1;
        }
        &.inner02 h3{
            order:1;
            text-align: right;

            &:after{
                right: unset;
                left: 0;
            }
        }
        &.inner01 .text{
            order:2;
            padding: 20px 30px 20px 0;
        }
        &.inner02 .text{
            order:3;
            padding: 20px 0 20px 30px;
        }
        &.inner01 picture{
            order:3;
        }
        &.inner02 picture{
            order:2;
        }
        &.inner02 .award{
            order:4;
        }

        &.inner03 .text{
            padding: 20px 30px 20px 0;
        }
        &.inner03 h2{
            color: var(--color04);
            font-family: var(--font02);
            font-weight: 500;
            font-size: var(--font24-30);
            text-align: right;
            width: 100%;
            margin: 0 auto 5%;
            padding: 3% 0 0;
        }
        &.inner03 h3{
            text-align: right;
            margin: 0 auto 5%;

            &:after{
                right: unset;
                left: 0;
            }
        }
        &.inner03 h4{
            color: var(--color04);
            text-align: right;
        }
        &.inner03 p{
            text-align: right;
        }
        &.inner03 picture{
            margin: 0 auto 5%;
        }
        &.inner03 dl{
            border:1px solid var(--color04);
            width: 45%;
            margin: 0 auto 5%;
            padding: 20px 40px;

            dt{
                color: var(--color04);
                font-size: var(--font18-22);
                text-align: center;
                width: 100%;
                margin: 0 0 3%;
            }
            dd{
                color: var(--color04);
                line-height: 1.6em;
            }
        }
    }    
}

@media all and (max-width:768px){
main{
    padding: 65px 0 0;

    img{
        object-fit: cover;
        height: 270px;
    }
}
section#section01{
    background-position: top center;
    margin: 0 auto 12%;
    padding: 30px 0 0;

    h2{
        width: 90%;
    }
    h3{
        text-align: left;
        width: 90%;
    }
    p{
        width: 90%;
    }
    .swiper{
        margin: 10% auto;
    }
}
section#section02{
    .inner{
        width: 90%;
        h3{
            &:after{
                width: 40%;
            }
        }
        .text{
            width: 100%;
            margin: 0 auto;
        }
        picture{
            width: 100%;
            margin: 0 auto 10%;
        }

        p{
            width: 100%;
            margin: 0 auto 8%;
        }

        &.inner01 .text{
            order:2;
            padding: 20px 0;
        }
        &.inner02 .text{
            order:2;
            padding: 20px 0;
        }
        &.inner01 picture{
            order:3;
        }
        &.inner02 picture{
            order:3;
        }
        &.inner02 .award{
            order:4;
        }

        .award{
            display: block;

            h4{
                font-size: 20px;
                margin: 0 auto 3%;
            }
            p{
                margin: 0 auto;
                padding: 0;
            }
            img{
                display: block;
                width: 30%;
                margin: 0 auto;
            }
        }

        &.inner03 .text{
            padding: 0;
        }

        &.inner03 dl{
            width: 100%;
            padding: 20px;
        }
    }
}
}

@media all and (min-width:769px) and (max-width:960px){
    main{
        padding:165px 0 0;
    }
}