@charset "utf-8";

section {
    .wrap {
        .contents {
            .contents_inner {
                display:grid;
                grid-template-columns:45% 1fr;
                grid-column-gap:4%;
                align-items:center;
                position:relative;
                .detail {
                    padding:30px 0;
                    h3 {
                        font-size:4.0rem;
                        line-height:1.5;
                        margin-bottom:.66em;
                    }
                    p {
                        span {
                            font-weight:700;
                        }
                    }
                }
                .img {
                    height:100%;
                    img {
                        height:100%;
                        width:auto;
                        object-fit:cover;
                    }
                }
            }
        }
    }
    &:nth-child(even) {
        .wrap {
            .contents {
                .contents_inner {
                    &::before {
                        content:'';
                        display:block;
                        width:100vw;
                        height:100%;
                        position:absolute;
                        left:0;
                        top:0;
                        background-color:#f5f5f5;
                        pointer-events:none;
                        z-index:-1;
                        pointer-events:none;
                    }
                }
            }
        }
    }
    &:nth-child(odd) {
        .wrap {
            .contents {
                .contents_inner {
                    grid-template-columns: 1fr 45%;
                    align-items:start;
                    .img {
                        order:1;
                    }
                }
            }
        }
    }
    &#strength2,&#strength4  {
        .wrap {
            .contents {
                .contents_inner {
                    .detail {
                        padding:0;
                    }
                    &::before {
                        content:'';
                        display:block;
                        width:calc(50vw + 550px);
                        height:110%;
                        position:absolute;
                        right:0;
                        top:-110px;
                        background:url(../img//strength/strength-02.jpg) no-repeat center center/cover;
                        pointer-events:none;
                        z-index:-1;
                        pointer-events:none;
                    }
                }
            }
        }
    }
    &#strength4 {
        .wrap {
            .contents {
                .contents_inner {
                    &::before {
                        background:url(../img//strength/strength-05.jpg) no-repeat center center/cover;
                    }
                }
            }
        }
    }
}

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

@media screen and (max-width:1024px){
    
    section {
        .wrap {
            .contents {
                .contents_inner {
                    .detail {
                        h3 {
                            font-size:3.0rem;
                        }
                    }
                }
            }
        }
        &#strength2,&#strength4  {
            .wrap {
                .contents {
                    .contents_inner {
                        &::before {
                            height:calc(100% + 90px);
                        }
                    }
                }
            }
        }
    }
    
}

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

    section {
        .wrap {
            .contents {
                .contents_inner {
                    grid-template-columns: 1fr;
                    padding:20px 0;
                    .detail {
                        padding:0;
                        display:contents;
                        h3 {
                            font-size:2.0rem;
                        }
                        p {
                            order:2;
                            margin-top:1em;
                        }
                    }
                    .img {
                        height:auto;
                        order:1;
                        img {
                            height:auto;
                            width:100%;
                        }
                    }
                }
            }
        }
        &:nth-child(even) {
            .wrap {
                .contents {
                    .contents_inner {
                        &::before {
                            left:-20px;
                        }
                    }
                }
            }
        }
        &:nth-child(odd) {
            .wrap {
                .contents {
                    .contents_inner {
                        grid-template-columns: 1fr;
                    }
                }
            }
        }
        &#strength2,&#strength4  {
            .wrap {
                .contents {
                    .contents_inner {
                        padding-top:0;
                        .detail {
                            padding:0;
                        }
                        &::before {
                            width:100vw;
                            height:calc(100% + 80px);
                            right:-20px;
                            top:-80px;
                        }
                    }
                }
            }
        }
        &#strength4 {
            .wrap {
                .contents {
                    .contents_inner {
                        &::before {
                            background:url(../img//strength/strength-05.jpg) no-repeat center center/cover;
                        }
                    }
                }
            }
        }
    }
    
}