@charset "utf-8";
/* medical.html用のcss */

.menu {
  color: #f39832; 
}
.medical {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
}
.title-s {
  width: 100%;
  display: grid;
  grid-template-columns: 180px auto;
  grid-template-rows: auto;
  margin: 20px 10px;
}
.title-l {
  grid-column: 1;
  font-size: 20px;
  color: #ffffff;
  background-color: #168AD8;
  padding: 4px 20px;
  text-align: center;
  border-radius: 20px;
 }
.dot {
  grid-column: 2;
  width 80%;
  border-bottom: dotted 2px #f39832;
  margin: 0px 20px;
}
.message-d {
  width: 100%;
  margin: 0px 10px;
  padding: 0px 10px;
}
.doctor {
  margin: 20px 40px;
}
.time-table {
  width: 100%;
}
table {
  width: 320px;
  border-collapse: collapse;
  margin: 10px auto;
}
th {
  border: solid 1px;
  font-weight: 400;
  padding: 10px 20px 10px 20px;
}
td {
  width: 210px;
  border: solid 1px;
  text-align: center;
}
.t-head {
  background-color: #E2F1FA;
}
.t-left {
  background-color: #F4F0D8;
}
#appointment {
  margin: 20px 10px 60px;
  padding: 10px 20px;
  background-color: #F4F0D8;
  border-radius: 40px;
}
#appointment img {
  width: 80px;
}
.apo-b {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto;
}
.apo-bl {
  grid-column: 1;
  margin: auto;
}
.apo-p {
  grid-column: 2;
  padding: 20px 0px 20px 10px;
}
.apo-p span {
  font-weight: 600;
  font-size: 24px;
}


/* タブレット用 */
@media screen and (min-width: 768px) {
  .message-d {
    width: 55%;  
  }
  .time-table {
    width: 36%;  
  }
  #appointment {
    margin: 20px 80px 60px;
    padding: 10px 50px;
  }
  #appointment img {
    width: 100px;
  }
}

/* パソコン用 */
@media (min-width: 980px) {
  #appointment {
    margin: 20px 100px 60px;
    padding: 10px 60px;
  }
}