@charset "utf-8";

#concept {
    .wrap {
        .contents {
            .img {
                text-align:center;
            }
        }
    }
}

#greeting {
    .wrap {
        .contents {
            .contents_inner {
                h2 {
                    max-width:15em;
                    margin:0 auto 1em;
                    background-color:#FFFFFF;
                }
                position:relative;
                padding:0 30px 30px;
                p {
                    &:not(:last-child) {
                        margin-bottom:1em;
                    }
                }
                &::before {
                    content:'';
                    border:1px solid #707070;
                    display:block;
                    width:100%;
                    height:calc(100% - 1.5em);
                    position:absolute;
                    left:0;
                    bottom:0;
                    z-index:-1;
                }
            }
        }
    }
}

#overview {
    .wrap {
        .contents {
            table {
                width:100%;
                border-collapse:collapse;
                tbody {
                    tr {
                        border-bottom:1px solid #707070;
                        th,td {
                            font-size:1.6rem;
                            line-height:2;
                            padding:.75em;
                        }
                        th {
                            text-align:left;
                            font-weight:500;
                            width:25%;
                        }
                    }
                }
            }
        }
    }
}

#environment {
    .wrap {
        .contents {
            p {
                &.body {
                    text-align:center;
                    margin-bottom:2em;
                }
            }
            .contents_inner {
                &:not(:last-child) {
                    margin-bottom:60px;
                }
                h3 {
                    font-size:2.6rem;
                    font-weight:500;
                    line-height:1.5;
                    margin-bottom:.5em;
                }
                p {
                    &:not(:last-child) {
                        margin-bottom:1em;
                    }
                }
                .tblsclwrap {
                    padding-bottom: 1em;
                }
                table {
                    border-collapse:collapse;
                    width:100%;
                    min-width:1000px;
                    th,td {
                        font-size:1.6rem;
                        line-height:1.5;
                        padding:.5em 1em;
                        text-align:center;
                    }
                    th {
                        background-color:#CCCCCC;
                        text-align:left;
                        font-weight:500;
                    }
                    thead {
                        th {
                            &:not(:last-child) {
                                border-right:1px solid #FFFFFF;
                            }
                            &:first-child {
                                width:20%;
                            }
                            &:nth-child(2) {
                                width:25%;
                            }
                            &:nth-child(3) {
                                width:25%;
                            }
                            &:nth-child(4) {
                                width:10%;
                            }
                        }
                    }
                    tbody {
                        th {
                            border-top:1px solid #FFFFFF;
                        }
                        td {
                            border-right:1px solid #CCCCCC;
                            border-bottom:1px solid #CCCCCC;
                        }
                    }
                }
            }
        }
    }
}

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

}

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

@media screen and (max-width:768px){
    
    #greeting {
        .wrap {
            .contents {
                .contents_inner {
                    h2 {
                        max-width:10em;
                        margin:0 auto .66em;
                    }
                    padding:0 20px 20px;
                    &::before {
                        height:calc(100% - 1.25em);
                    }
                }
            }
        }
    }
    
    #overview {
        .wrap {
            .contents {
                table {
                    tbody {
                        tr {
                            border-bottom:none;
                            th,td {
                                font-size:1.4rem;
                                line-height:1.8;
                                display:block;
                                width:100%;
                            }
                            th {
                                width:100%;
                                background-color:#EFEFEF;
                            }
                        }
                    }
                }
            }
        }
    }

    #environment {
        .wrap {
            .contents {
                .contents_inner {
                    &:not(:last-child) {
                        margin-bottom:30px;
                    }
                    h3 {
                        font-size:1.8rem;
                    }
                    table {
                        min-width:900px;
                        th,td {
                            font-size:1.4rem;
                        }
                    }
                }
            }
        }
    }
    
}