@charset "utf-8";

.titlewrap {
	h1 {
        .txtclip {
            background: #73318E;
            background: linear-gradient(to right bottom,#73318E 0%,#C75BB2 50%, #E03C6F 100%);
        }
        img {
            width:12em;
        }
	}
}

#development {
    .wrap {
        .contents {
            .tab {
                li {
                    a {
                        color:#835193;
                        border-color:#835193;
                        &.active {
                            background-color:#835193;
                            color:#FFFFFF;
                        }
                    }
                }
            }
            h3 {
                margin-bottom:2em;
            }
            h4 {
                font-size:1.8rem;
                text-decoration:underline;
                margin-bottom:1.5em;
            }
            table {
                border-collapse:collapse;
                width:100%;
                &:not(:last-child) {
                    margin-bottom:50px;
                }
                tr {
                    border-bottom:1px solid #835193;
                }
                th,td {
                    font-size:1.6rem;
                    line-height:1.5;
                    font-weight:500;
                    text-align:left;
                    padding:1em;
                }
                th {
                    padding:.5em 1em;
                    &:first-child {
                        width:30%;
                    }
                    &:nth-child(2) {
                        width:10em;
                    }
                }
            }
        }
    }
}

@media (hover:hover) {

    #development {
        .wrap {
            .contents {
                ul {
                    &.tab {
                        li {
                            a {
                                &:hover {
                                    color:#ffffff;
                                    background-color:#835193;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

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

}

@media screen and (max-width:1024px){
    
    #development {
        .wrap {
            .contents {
                table {
                    th {
                        &:nth-child(2) {
                            width:8em;
                        }
                    }
                }
            }
        }
    }
    
}

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

    .titlewrap {
    	h1 {
            img {
                width:10em;
            }
    	}
    }
    
    #development {
        .wrap {
            .contents {
                .tab {
                    column-gap:.5em;
                    margin-bottom:45px;
                    li {
                        max-width:45%;
                        flex-grow:unset;
                        a {
                            padding:0 2em;
                        }
                    }
                }
                table {
                    font-size:1.4rem;
                    th,td {
                        font-size:1.4rem;
                        padding:.5em;
                        &:last-child {
                            display:block;
                        }
                    }
                    tr {
                        display:grid;
                        grid-template-columns:1fr 8em;
                        th,td {
                            &:last-child {
                                grid-area:2/1/3/3;
                                border-top:2px dotted #cccccc;
                            }
                        }
                    }
                    th {
                        &:first-child {
                            width:unset;
                        }
                        &:nth-child(2) {
                            width:unset;
                        }
                        &:last-child {
                            display:none;
                        }
                    }
                }
            }
        }
    }
                                    
}