div.blog-area {
  display: grid; /* 要素内部がgrid layoutであることを示す */
  grid-template-rows:  repeat(auto-fill); /* gridの行分割の高さをそれぞれ指定している。今回は4行。 */
  /* grid-template-columns: 62.5vw 37.5vw; gridの列分割の幅をそれぞれ指定している。今回は2列。 */
}
div.title-area {
  /* grid-column: span 1; 列方向に2マス分占有することを指定している。指定しない場合は1マスとなる。 */
  background:blue;
  font-size: x-large;
  color: white;
  margin: 3px 3px 3px 3px;
}
div.author-name-area {
    /* grid-column: span 1; 列方向に2マス分占有することを指定している。指定しない場合は1マスとなる。 */
    background:blue;
    font-size: x-large;
    color: white;
    margin: 3px 3px 3px 3px;
}
  div.main-contents {
  /* grid-row: span 5;  行方向に2マス分占有することを指定している。指定しない場合は1マスとなる。 */
  background: darkblue;
  grid-template-rows: repeat(auto-fill); /* gridの行分割の高さをそれぞれ指定している。今回は4行。 */
  grid-template-columns: 100vw; /* gridの列分割の幅をそれぞれ指定している。今回は2列。 */
  margin: 3px 3px 3px 3px;
} 
div.book-one-all {
    background: white;
    grid-column: repeat(auto-fit);
    grid-template-columns: 70vw 10vw 10vw 10vw; /* gridの列分割の幅をそれぞれ指定している。今回は2列。 */
    /* grid-template-rows: 10vw;*/ /* gridの行分割の高さをそれぞれ指定している。今回は4行。 */
    /* background: #faa; */
    margin: 3px 3px 3px 3px;
    grid-template-rows: 100vw; /* gridの列分割の幅をそれぞれ指定している。今回は2列。 */
    font-size: x-large;
}
span.book-title {
    background: white;
    margin: 3px 3px 3px 3px;
}
span.book-link-summary {
    /*    background: #888; */
    background: lightgreen;
    margin: 3px 3px 3px 3px;
}
span.book-link-epub {
    /*    background: #888; */
    background: lightskyblue;
    margin: 3px 3px 3px 3px;
}
span.book-link-pdf {
    background: lightpink;
    /*    background: #888; */
    margin: 3px 3px 3px 3px;
}
div.profile-area{
    /* grid-template-rows: repeat(auto-fill); gridの行分割の高さをそれぞれ指定している。今回は4行。 */
    background: white;
    font-size: x-large;
    margin: 3px 3px 3px 3px;
}
div.advertisement-area {
  /* grid-template-rows: repeat(auto-fill); gridの行分割の高さをそれぞれ指定している。今回は4行。 */
  background: #888;
  font-size: x-large;
  margin: 3px 3px 3px 3px;
}
div.contents-link{
    /* grid-template-rows: repeat(auto-fill); gridの行分割の高さをそれぞれ指定している。今回は4行。 */
    background: white;
    font-size: x-large;
    margin: 3px 3px 3px 3px;
}
body > * {
    margin: 3px;
    padding: 10px;
}
h1 {
    grid-area: title;
    background:blue;
    font-size: xxx-large;
    color: white;
    border-radius: 10px 10px 0 0;
}