p {
    color: #2d3d77 ;
    text-align: center;
    padding-bottom: 70px;
}
a {
    color: brown;
    text-decoration: none;
}

#work01, #work02 {
    text-align: center;
    letter-spacing: -5px;   /* 中のdivがinline-blockの時は必須。div間の隙間をなくしカラム落ちを防ぐ為 */
}

#work01 p, #work02 p {
    font-family: sans-serif;
    color: #5f370b;
}

/* 画像枠（全サイズ共通） */
.w01, .w02 {
    display: inline-block;
    letter-spacing: normal; /* inline-blockの隙間対策のletter-spacingを引き継がないように */
    box-sizing: border-box;
    vertical-align: middle;
    padding: 3.012048192771084%;    /* 40/1328 */
    background-color: white;
}
/* 画像枠（縦長） */
.w01 {
    width: 25.15060240963855%;  /* 334/1328 */
    margin: 0 3.38855421686747%;    /* 45/1328 */
    margin-bottom: 6.024096385542169%;  /* 80/1328 */
}
/* 画像枠（横長） デフォルトは２列 */
/*
/*.w02 {
/*    width: 31.62650602409639%;  /* 420/1328 */
/*    margin: 0 3.38855421686747%;    /* 45/1328 */
/*    margin-bottom: 7.530120481927711%;  /* 100/1328 */
/*}
*/

/* 画像枠（横長） デフォルトは３列 */
.w02 {
    width: 30.87349397590361%;  /* 410/1328 */
    margin: 0 1.129518072289157%; /* 15/1328 */
    margin-bottom: 7.530120481927711%;  /* 100/1328 */
}

.wp {
    text-align: left;
    font-size: 14px;
    font-size: 0.875rem;
}

/******************************
  レスポンシブ
******************************/
/* 縦長・横長ともに2列 */
@media screen and (max-width:900px) {
    .w01, .w02 {
        width: 42.38636363636364%;  /* 373/880 */
    }
    .w02 {　/* 横長のデフォルトが3列の場合:marginも縦長画像と同じにする ※デフォルトが2列の時は不要 */
        margin-left: 3.38855421686747%;
        margin-right: 3.38855421686747%;
    }
}

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

/* 縦長・横長ともに並び無し */
@media screen and (max-width:480px) {
    .w01, .w02 {
        display: block;
        width: auto;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 45px;
    }
}