body {
  overflow: hidden;
  background-image: url('images/background-image.png');
  background-size: cover;
}

.box {
    max-width: 1000px;
    margin: 50px auto;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 250px auto;
}

.box header,
.box nav,
.box main,
.box footer {
    border: 2px solid black;
}

.box header {
    grid-row: 1/2;
    grid-column: 1/3;
}

.box nav {
    grid-row: 2/3;
    grid-column: 1/2;
}

.box main {
    grid-row: 2/3;
    grid-column: 2/3;
    padding: 20px;
}

.box footer {
    grid-row: 3/4;
    grid-column: 1/3;
}

.box21 {
    margin: 1em 0;
    width: 80%;
}

.u01 {
    background: url('images/f-ue.gif') repeat-x;
    height: 23px;
    margin: 0 23px;
}

.s01 {
    background: url('images/f-sita.gif') repeat-x;
    height: 23px;
    margin: 0 23px;
}

.box-top {
    background-image: url('images/f-kado1.gif'), url('images/f-kado2.gif');
    background-position: top left, top right;
    background-repeat: no-repeat, no-repeat;
    height: 23px;
}

.box-center {
    background-image: url('images/f-migi.gif'), url('images/f-hidari.gif');
    background-position: top right, top left;
    background-repeat: repeat-y, repeat-y;
}

.box-inner {
    background: #ffd6da;
    margin: 0 23px;
    padding: 15px; 
    overflow: hidden;
}

.box-bottom {
    background-image: url('images/f-kado3.gif'), url('images/f-kado4.gif');
    background-position: top left, top right;
    background-repeat: no-repeat, no-repeat;
    height: 23px;
}