@charset "UTF-8";

html body{
    padding:0px;
    margin:0px;
    font-size:62.5%;
    font-family:'ヒラギノ角ゴ ProN W3','Hiragino Kaku Gothic ProN','メイリオ', Meiryo,'Helvetica Neue',Helvetica,Arial,Verdana,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
}

#container{
    position:relative;
    width:100%;
    height:100%;
}

#main{
    position:absolute;
    left:50%;
    top:50%;
    overflow:hidden;
    width:1160px;
    height:320px;
    margin-left:-580px;
    margin-top:160px;
/*    background-color:#ccc;*/
}

#javascript{
    display:table;
    float:left;
    width:200px;
    height:200px;
    background-color:#95CB00;
    margin-left:30px;
    border-radius:50%;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    -o-border-radius:50%;
}

#jquery{
    display:table;
    float:left;
    width:200px;
    height:200px;
    background-color:#00896E;
    margin-left:30px;
    border-radius:50%;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    -o-border-radius:50%;
}

#php{
    display:table;
    float:left;
    width:200px;
    height:200px;
    background-color:#CC001C;
    margin-left:30px;
    border-radius:50%;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    -o-border-radius:50%;
}

#css{
    display:table;
    float:left;
    width:200px;
    height:200px;
    background-color:#AFAB00;
    margin-left:30px;
    border-radius:50%;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    -o-border-radius:50%;
}

#wordpress{
    display:table;
    float:left;
    width:200px;
    height:200px;
    background-color:#A20071;
    margin-left:30px;
    border-radius:50%;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    -o-border-radius:50%;
}

#javascript > p, #jquery > p, #php > p, #css > p, #wordpress > p{
    display:table-cell;
    vertical-align:middle;
    text-align:center;
    font-size:2.8em;
}

#javascript p > a, #jquery p > a, #php p > a, #css p > a, #wordpress p > a{
    display:table-cell;
    vertical-align:middle;
    text-align:center;
    width:200px;
    height:200px;
    text-decoration:none;
    color:#fcfcfc;
}


@media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2){
#container{
    position:relative;
    width:100%;
    height:100%;
}

#main{
    position:absolute;
    left:50%;
    top:50%;
    overflow:hidden;
    width:950px;
    height:250px;
    margin-left:-475px;
    margin-top:475px;
    font-size: 0.5em;
}

#javascript{
    display:table;
    float:left;
    width:150px;
    height:150px;
    background-color:#95CB00;
    margin-left:40px;
    border-radius:50%;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    -o-border-radius:50%;
}

#jquery{
    display:table;
    float:left;
    width:150px;
    height:150px;
    background-color:#00896E;
    margin-left:40px;
    border-radius:50%;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    -o-border-radius:50%;
}

#php{
    display:table;
    float:left;
    width:150px;
    height:150px;
    background-color:#CC001C;
    margin-left:40px;
    border-radius:50%;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    -o-border-radius:50%;
}

#css{
    display:table;
    float:left;
    width:150px;
    height:150px;
    background-color:#AFAB00;
    margin-left:40px;
    border-radius:50%;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    -o-border-radius:50%;
}

#wordpress{
    display:table;
    float:left;
    width:150px;
    height:150px;
    background-color:#A20071;
    margin-left:40px;
    border-radius:50%;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    -o-border-radius:50%;
}

#javascript > p, #jquery > p, #php > p, #css > p, #wordpress > p{
    display:table-cell;
    vertical-align:middle;
    text-align:center;
    font-size:3.6em;
}

#javascript p > a, #jquery p > a, #php p > a, #css p > a, #wordpress p > a{
    display:table-cell;
    vertical-align:middle;
    text-align:center;
    width:150px;
    height:150px;
    text-decoration:none;
    color:#fcfcfc;
}
}