@import url(common/layout.css);

.image,
.arrow {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.itembox {
    overflow: hidden;
}
.itembox h4 {
    text-indent: 0;
}
.item {
    width: 3.9rem;
    margin: 2.5rem 1.75rem 1.75rem 0;
    float: left;
}
.arrow img {
    width: 2.1rem;
    margin: 0 1rem;
}
.col2 {
    margin-left: 6%;
    width: 40%;
    display: inline-block;
}
.col3 {
    width: 30%;
    float: left;
    margin-right: 5%;
    text-align: center;
}
.col3:last-child {
    margin-right: 0;
}
.tbl {
    width: 88%;
    margin-left: auto;
    margin-right: auto;
}
.tbl .col3 {
    width: 24%;
    float: none;
    text-align: center;
    display: table-cell;
}
.arrow02 {
    width: 8%;
    padding: 0 0.8rem 1.75rem;
    display: table-cell;
    vertical-align: middle;
}
.col3 img {
    width: 100%;
}
.topics ul li:before {
    margin-right: 0.4rem;
    content: "●";
    display: inline-block;
}
#develop .intro {
    text-align: center;
}
#develop .image {
    border: none;
}
#develop .image a img {
    -moz-transition: -moz-transform 0.4s ease;
    -webkit-transition: -webkit-transform 0.4s ease;
    -o-transition: -o-transform 0.4s ease;
    -ms-transition: -ms-transform 0.4s ease;
    transition: transform 0.4s ease;
}
#develop .image a:hover img {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -o-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
}


@media screen and (max-width: 420px) {
    .tbl {
        width: 100%; 
    }
    .col3 {
        font-size: 1.2rem;
    }
    .arrow02 {
        width: 10%;
        padding: 0 0.4rem 1.75rem;
    }

}