/* for smartphone */
.container_body_block_01 {
    margin: 20px;
    border: 2px solid gray;
    display: flex;
    gap: 20px;
    padding: 10px;
    flex-direction: column; 
}
.container_body_block_02 {
    margin: 20px;
    border: 2px solid gray;
    display: flex;
    gap: 20px;
    padding: 10px;
    flex-direction: column; 
}
.box_body_block_01 {
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    padding: 15px;
    text-align: center;
}
.box_body_block_02 {
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    padding: 15px;
/*    text-align: center; */
}

/* for PC min width 768px */
@media (min-width: 768px) {
    .container_body_block_01 {
        border: 2px solid gray;
        display: flex;
        gap: 20px;
        padding: 10px;
        flex-direction: row; }
    .container_body_block_02 {
        border: 2px solid gray;
        display: flex;
        gap: 20px;
        padding: 10px;
        flex-direction: row; }
    .box_body_block_01 {
        background-color: #f0f0f0;
        border: 1px solid #ccc;
        padding: 15px;
        text-align: center;
        width: calc(33.333% - 13.333px); }
    .box_body_block_02 {
        background-color: #f0f0f0;
        border: 1px solid #ccc;
        padding: 15px;
 /*       text-align: center; */
        width: calc(50% - 13.333px); }
}