﻿

/*** for PC Browser ***/
@media (min-width:401px)
{
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}





.department {
  /* 各診療科名称を親タグの何％にしたいかを以下で設定してください */
  width: 100%;
  padding: 15px 0;
  margin: 0 auto 30px;
  text-align: center;
  color:  #dcefff
  letter-spacing: 2px;
  background-color:  #dcefff;
  border-bottom: 2px solid 
}
.scroll {
  /* 日程表を親タグの何％にしたいかを以下で設定してください */
  width: 100%;
  margin: 0 auto 100px;
}
table {
  width: 100%;
  border-collapse: collapse;
}
.table-head {
  height: 40px;
  background-color:  #dcefff;
}
.table-contents {
  height: 90px;
}
.table-head th , .table-contents th {
  width: 10%;
  font-weight: 500;
  background-color:  #dcefff;
}
.table-head td , .table-contents td {
  width: 18%;
  text-align: center;
}

/* iPad表示 */
/* デバイスの幅が800px以下になると下記CSSが適用され、表がスクロールできるようになります */
/* 真下の数字を変えることでスクロール表への切り替えポイントを変更できます */

}
@media(max-width:800px){
  .scroll {
    margin: 0 auto 80px;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
  }
  table {
    width: 800px;
    white-space: nowrap;
  }
  .table-head {
    height: 35px;
  }
  .table-contents {
    height: 80px;
  }
}

/* スマホ表示 */
@media(max-width:450px){
  .department {
    font-size: 18px;
    padding: 10px 0;
    margin: 0 auto 30px;
  }
  .table-head th , .table-contents th {
    font-size: 14px;
  }
  .table-head td , .table-contents td {
    font-size: 14px;
  }
}

/*** for Smart Phone ***/
@media (max-width:400px)
{
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}





.department {
  /* 各診療科名称を親タグの何％にしたいかを以下で設定してください */
  width: 100%;
  padding: 15px 0;
  margin: 0 auto 30px;
  text-align: center;
  color:  #dcefff
  letter-spacing: 2px;
  background-color:  #dcefff;
  border-bottom: 2px solid 
}
.scroll {
  /* 日程表を親タグの何％にしたいかを以下で設定してください */
  width: 100%;
  margin: 0 auto 100px;
}
table {
  width: 100%;
  border-collapse: collapse;
}
.table-head {
  height: 40px;
  background-color:  #dcefff;
}
.table-contents {
  height: 90px;
}
.table-head th , .table-contents th {
  width: 10%;
  font-weight: 500;
  background-color: #dcefff;
}
.table-head td , .table-contents td {
  width: 18%;
  text-align: center;
}

/* iPad表示 */
/* デバイスの幅が800px以下になると下記CSSが適用され、表がスクロールできるようになります */
/* 真下の数字を変えることでスクロール表への切り替えポイントを変更できます */

}
@media(max-width:800px){
  .scroll {
    margin: 0 auto 80px;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
  }
  table {
    width: 800px;
    white-space: nowrap;
  }
  .table-head {
    height: 35px;
  }
  .table-contents {
    height: 80px;
  }
}

/* スマホ表示 */
@media(max-width:450px){
  .department {
    font-size: 18px;
    padding: 10px 0;
    margin: 0 auto 30px;
  }
  .table-head th , .table-contents th {
    font-size: 14px;
  }
  .table-head td , .table-contents td {
    font-size: 14px;
  }
}