/*◆◇◆以下はスマホ用のCSS◆◇◆*/
@media screen and (max-width : 501px){



#content {
    width: 100vw;
    margin: 40px auto 40px auto;
}



h2#h2_home {
    width: 20vh;
    margin: 0px auto 8px auto;
}

hr#under_h2_home {
    width: 60vw;
    height: 1px;
    border: none;
    background-color: #000000;
    margin: 0px auto 0px auto;
}



.pictures {
    width: 98vw;
    margin: 40px auto 0px auto;
}



p.works_tilte {
    width: 98vw;
    margin: 16px auto 12px auto;
    font-size: 16px;
    line-height: 16px;
}
p.works_caption {
    width: 98vw;
    margin: 0px auto 14px auto;
    font-size: 14px;
    line-height: 14px;
}
hr.under_works_caption {
    width: 98vw;
    margin: 0px auto 0px auto;
    height: 1px;
    border: none;
    background-color: #000000;
}



}










/*◆◇◆以下はPC用のCSS◆◇◆*/
/*ビューエリアの最小幅がこのサイズより大きい場合に以下のスタイルを適用*/
@media screen and (min-width : 500px){



#content {
    width: 1248px;
    margin: 130px auto 130px auto;
}



h2#h2_home {
    width: 300px;
    height: 36px;
    margin: 0px auto 14px auto;
}

hr#under_h2_home {
    width: 800px;
    height: 1px;
    border: none;
    background-color: #000000;
    margin: 0px auto 0px auto;
}



.pictures {
    width: 1248px;
    height: 554px;
    margin: 130px 0px 0px 0px;
}



p.works_tilte {
    font-size: 24px;
    line-height: 30px;
    margin: 29px 0px 22px 0px;
}
p.works_caption {
    font-size: 16px;
    line-height: 16px;
    margin: 0px 0px 15px 0px;
}
hr.under_works_caption {
    width: 1248px;
    height: 1px;
    border: none;
    background-color: #000000;
    margin: 0px auto 0px auto;
}



}