:root {
  --template_cols: 7; /* 日～土 */
  --template_rows: 15;  /* 8:00～22:00 */
}

body {
  color: dimgray;
  font-size: 0.7rem;
  font-family: "M PLUS Rounded 1c";
}

h1 {
  font-size: 1rem;
}

.lead {
  margin-bottom: 0.5rem;
  font-size: 0.8rem;
}

.container {
  /* grid レイアウトの設定 */
  display: grid;
  grid-template-columns: auto repeat( var(--template_cols), max-content minmax(120px, 1fr));
  grid-template-rows: auto repeat(calc( var(--template_rows) * 60), 0.001rem);

  /* カラムの間隔 */
  grid-column-gap: 3px;
  column-gap: 3px;

  /* 行の間隔 */
  grid-row-gap: 3px;
  row-gap: 3px;

  background: linear-gradient(#eeeff1, #c4c2c5);

}

/* 放送開始時間 */
.content-minute {
  margin-left: 3px;
  color: gray;
  overflow: hidden;
}

/* 番組名 */
.content-title {
  overflow-wrap: break-word;
  overflow: hidden;
}

/* 番組内容 */
.content-discription {
  margin-top: 3px;
  font-size: 1rem;
}