@charset "UTF-8";
/* CSS Document is created by Taira Promote SG Pte. Ltd. */
h2 { /*font-family:"ヒラギノ明朝 ProN W6","HiraMinProN-W6","HG明朝E","ＭＳ Ｐ明朝","MS PMincho","MS 明朝",serif;*/font-family: Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;/*TPHQ-2014-select*/ font-weight:normal; font-size: 22px; }
ul { list-style:none; margin:0px; }
.filter li { float:left; }
.filter li a { outline:none; }

.all, .documentation, .website-solution, .tablet-solution, .video-production, .threeD, .illustration, .machinery-design, .analysis,.concept-design,.marketing_support { padding:5px; }
.all { background-image:  url(../images/icons/all-gray.png); }
.analysis { background-image: url(../images/icons/Automobile-Analysis-gray.png) }
.documentation { background-image: url(../images/icons/Technical-Manual-Documentation-gray.png); }
.website-solution { background-image:  url(../images/icons/Website-Solutions-gray.png); }
.tablet-solution { background-image:  url(../images/icons/Tablet-Content-Solution-gray.png); }
.video-production { background-image: url(../images/icons/Animation-Video-Production-gray.png); }
.threeD { background-image:  url(../images/icons/3D-gray.png); }
.illustration { background-image: url(../images/icons/Technical-Illustration-gray.png) }
.machinery-design { background-image: url(../images/icons/Machinery-Design-gray.png); }
.concept-design { background-image:  url(../images/icons/Concept-design.png); }
.marketing_support{ background-image: url(../images/icons/MA-gray.png); }

.selected-0 .all, .selected-1 .documentation, .selected-2 .website-solution, .selected-3 .tablet-solution, .selected-4 .video-production, .selected-5 .threeD,  .selected-6 .illustration, .selected-7 .machinery-design, .concept-design
{ opacity:1; }


/* grid */

.grid:after {
content:"";
display:block;
height:0;
overflow:hidden;
clear:both;
}
.grid  {
    margin: 0px 0px 30px -30px;
    padding: 0px;
    max-width: 1170px;
}
.grid li {
    float: left;
    height: 270px;
    line-height: 17px;
    margin: 20px 0 0 30px;
    overflow: hidden;
    text-align: center;
    width: 250px;
    background:#fff;
    border:5px solid #fff;
}
.grid li img {
    outline: none;
    border: none;
    display: block;
    max-width: 100%;
    margin-bottom:15px;
}
.grid li strong { letter-spacing:0px; }
.grid li span { margin:0 auto; display:block; color:#bbb; font-size:12px; }



/*210803_works_layout_Adjustment*/
.grid-min  {
    margin: 0px 0px 0px 0px;
    padding: 0px;
    max-width: 50%;
}

.grid-min li {
    float: left;
    height: 270px;
    line-height: 17px;
    margin: 20px 0 0 0px;
    overflow: hidden;
    text-align: center;
    width: 250px;
    background:#fff;
    border:5px solid #fff;
}

.grid-min li img {
    outline: none;
    border: none;
    display: block;
    max-width: 100%;
    margin-bottom:15px;
}

.margin_left{
    margin-left: 40px;
}

@media (max-width: 1199px) {
    .grid-min{max-width: 100%;} 
}

@media (max-width: 1023px) {
    .grid li { width: 200px;  }
    .grid-min li { width: 200px;  }
    .margin_left{ margin-left: 0px;}
}

@media (max-width: 767px) {
    .grid li { width: 250px; }
    .grid-min li { width: 250px; }

    .margin_left{
        margin-left: 0px;
    }
}

@media (max-width: 480px) {
    .all, .documentation, .website-solution, .tablet-solution, .video-production, .threeD, .illustration, .machinery-design, .analysis, .concept-design, .marketing_support { padding:5px 5px 5px 0px; }
}

#ConceptDesign_list li{
    height: 220px;
}

#ConceptDesign_list .total_design{
    height: fit-content;
    font-size: 10px;
}

.ConceptDesign_ttl{
    padding-top: 20px;
}

.ConceptDesign_ttl strong{
    font-size: 16px;
}

.CD_bg{
    position: relative;
}
.Hov_Change{
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
}
.Hov_Change:hover{
    animation:action 1s;transition:all .5s ease;
    animation-fill-mode: forwards;
}
@keyframes action{0%{opacity:1}100%{opacity:0}}