.parent {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;
    gap: 4px;
    width: 100%;         /* 親要素に合わせる */
    max-width: 900px;   /* 最大幅を設定できる */
    margin: 0 auto;      /* 中央に配置 */
}
.parent > div {
    padding:10px;
    display: grid;
    place-items: center;
    background: #fff;
}
.parent > div > a {
    text-align: center;
}
.parent > div > a:hover {
    opacity: 0.7;
}

@media (max-width: 670px) {
  .parent {
    grid-template-columns: 1fr;
  }
  .parent > div {
    grid-column: auto !important;
    grid-row: auto !important;
  }
}

.header,.nav,.footer {
    grid-column: span 4 / span 4 !important;
}

.div3 {
    grid-column: span 2 / span 2;
    grid-row-start: 3;
}

.div4 {
    grid-column: span 2 / span 2;
    grid-column-start: 3;
    grid-row-start: 3;
}

.div5 {
    grid-row-start: 4;
}

.div6 {
    grid-row-start: 4;
}

.div7 {
    grid-row-start: 4;
}

.div8 {
    grid-row-start: 4;
}


.div10 {
    grid-row-start: 5;
}

.div11 {
    grid-row-start: 5;
}

.div12 {
    grid-row-start: 5;
}


.div14 {
    grid-row-start: 6;
}


img.brlogo {
    width:60%;
    padding-top:10px;
}
img.brtop {
    width:80%;
}
.brandimg {
    padding:30px 0 !important;
}
.brandnote {
    display: block !important;
    padding-top:30px !important;
}
.brandnote > img {
    width:30%;
    text-align: left;
}
.brandnote > p {
  margin-top: 0;
  padding-top: 0;
  border-top: 1px solid #000;
  width:98%;
  max-width:500px;
  letter-spacing: 1px;
  font-size:14px;
  line-height: 2.2em;
}
.brandnote > a {
    font-size: 14px;
    text-decoration: underline;
    color:#4169e1;
}