@charset "utf-8";

#strength {
        .wrap {
                .contents {
                        h2 {
                                text-align:center;
                                font-size:2.4rem;
                                span {
                                        &:not(.pcOnly){
                                                display:block;
                                                font-size:1.5rem;
                                                margin-bottom:.5em;
                                        }
                                }
                        }
                        p {
                                &.body {
                                        margin-bottom:6em;
                                }
                        }
                        .contents_inner {
                                display:grid;
                                grid-template-columns:1fr 57%;
                                &:not(:last-child) {
                                        margin-bottom:50px;
                                }
                                .detail {
                                        background-color:#F5F5F5;
                                        padding:40px;
                                        display:grid;
                                        align-items:center;
                                        align-content:center;
                                        h3 {
                                                font-size:2.4rem;
                                                line-height:1.5;
                                                margin-bottom:.5em;
                                                display:grid;
                                                grid-template-columns:auto 1fr;
                                                grid-gap:.25em;
                                                align-items:center;
                                                span {
                                                        color:var(--color_main);
                                                        font-size:1.4em;
                                                }
                                        }
                                        .btnwrap {
                                                margin-top:30px;
                                                display:flex;
                                                flex-wrap:wrap;
                                                gap:10px 40px;
                                                align-items:center;
                                                justify-content:flex-start;
                                        }
                                        .btn {
                                                height:50px;
                                                max-width:220px;
                                                margin:0;
                                        }
                                }
                                .img {
                                        img {
                                                display:block;
                                                width:calc(100% + 20px);
                                                max-width:calc(100% + 20px);
                                                margin-right:-20px;
                                                padding:25px 0;
                                        }
                                }
                                &:nth-child(odd) {
                                        grid-template-columns:57% 1fr;
                                        .img {
                                                order:2;
                                                img {
                                                        margin-right:0;
                                                        margin-left:-20px;
                                                }
                                        }
                                }
                        }
                }
        }
}

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

}

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

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

        #strength {
                .wrap {
                        .contents {
                                h2 {
                                        font-size:2.0rem;
                                }
                                p {
                                        &.body {
                                                margin-bottom:3em;
                                        }
                                }
                                .contents_inner {
                                        grid-template-columns:1fr;
                                        &:not(:last-child) {
                                                margin-bottom:50px;
                                        }
                                        .detail {
                                                padding:20px;
                                                h3 {
                                                        font-size:1.8rem;
                                                }
                                                .btnwrap {
                                                        margin-top:20px;
                                                }
                                                .btn {
                                                        font-size:1.4rem;
                                                        height:40px;
                                                        max-width:200px;
                                                }
                                        }
                                        .img {
                                                        order:1;
                                                img {
                                                        display:block;
                                                        width:100%;
                                                        max-width:100%;
                                                        margin-right:0;
                                                        padding:0;
                                                }
                                        }
                                        &:nth-child(odd) {
                                                grid-template-columns:1fr;
                                                .img {
                                                        order:2;
                                                        img {
                                                                margin-right:0;
                                                                margin-left:0;
                                                        }
                                                }
                                        }
                                }
                        }
                }
        }
                
}