@charset "utf-8";


/* thは見出し＝一番左の列と一番上の行、tdはそのほかのセルの書式設定である。 */


table{
  width: 100%;
  border-collapse:separate;
  border-spacing: 0;
}

/* 多分一番上の角を丸くしている */
table th:first-child{
  border-radius: 5px 0 0 0;
}

/* 多分四隅の角のどれかを丸くしている */
table th:last-child{
  border-radius: 0 5px 0 0;
  border-right: 1px solid #3c6690;
}

/* 見出し＝一番左の列と一番上の行をおしゃれにしている*/
table th{
  text-align: center;
  color:black;
  background: linear-gradient(#7DCEFA,white);		/* セルをグラデーションに塗っている。先に指定した色が上。今回は薄い紫 */
  border-left: 1px solid #3c6690;
  border-top: 1px solid #3c6690;
  border-bottom: 1px solid #3c6690;
  box-shadow: 0px 1px 1px rgba(255,255,255,0.3) inset;	/* ここ3行でセルを丸っこくしてる。 */
  width: 10%;	/*一番左の列は①②と短いので全体の１０％でよい長さかと。 */
  padding: 10px 0;	/* 若干の隙間が見出しと普通のセルの間に生じている。なくてもいいかも */
}

/* 普通のセルをおしゃれにしている */
table td{
  text-align: center;
  border-left: 1px solid #a8b7c5;
  border-bottom: 1px solid #a8b7c5;
  border-top: 1px solid #3c6690;	/* ここ３行で枠線の色、太さを指定している。*/
  box-shadow: 0px -3px 5px 1px #eee inset;	/*pxの大きさを指定した順に上右下左となる。枠線の影の太さを指定している。影をつけて立体的に見せることでおしゃれ間をupさせたと考えられる。*/
  width: 18%;
  padding: 10px 0;
}

/* ここから下は枠線の色と角を丸めているものと考えられる。なぜか左下の角が丸くならない。でも私は気にしない。 */
table td:last-child{
  border-right: 1px solid #a8b7c5;
}

table tr:last-child td:first-child {
  border-radius: 0 0 0 5px;
}

table tr:last-child td:last-child {
  border-radius: 0 0 5px 0;
}