@charset "utf-8";
/* ==========================================================================
	CONTENTS
========================================================================== */
/* 診療のご案内
-----------------------*/
.tel-img{
width: 90%;
max-width: 600px;
}
.li-need{
  display: flex;
  flex-wrap: wrap;
}
.li-need li{
  width: 30%;
  background-color: var(--color03);
  border-radius: 10px;
  box-sizing: border-box;
  padding: 20px 10px;
  margin-right: 5%;
}
.li-need li:nth-child(3n){
  margin-right: 0;
}
.li-need li div{
  width: 50%;
  margin: 0 auto 15px auto;
}
.li-need li .tit{
  color: var(--color01);
  font-family: var(--font01);
  font-size: clamp(1.8rem, 2.375vw, 2rem);
  font-weight: bold;
  text-align: center;
  margin-bottom: 10px;
}
.li-need li .txt{
  font-size: 90%;
  width: 90%;
  margin: 0 auto;
}

.cmn-table01{
width: 100%;
letter-spacing: 0;
}
.cmn-table01 th,.cmn-table01 td{
box-sizing: border-box;
border: 1px solid #555;
padding: 15px;
}
.cmn-table01 th{
width: 10%;
}
.cmn-table01 td{
width: 45%;
}
.cmn-table01 tr:nth-child(even) th,.cmn-table01 tr:nth-child(even) td{
background-color: #dbeef4;
}
.cmn-table01 thead td{
color: #fff;
font-size: 110%;
font-weight: bold;
text-align: center;
}
.table-tit01{
background-color: #31859c;
}
.table-tit02{
background-color: #558ed5;
}

.cmn-table02{
width: 100%;
letter-spacing: 0;
}
.cmn-table02 th,.cmn-table02 td{
text-align: left;
vertical-align: top;
box-sizing: border-box;
border-bottom: 1px solid #777;
padding: 15px;
}
.cmn-table02 th{
white-space: nowrap;
}
.cmn-table02 tr:last-child th,.cmn-table02 tr:last-child td{
border-bottom: none;
}
.cmn-table02 ul{
margin-top: 10px;
}

/* 一般歯科
-----------------------*/
.flow-box{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.flow-next{
border-bottom: 1px dotted #777;
margin-bottom: 40px;
padding-bottom: 40px;
}
.flow-box .box01{
  width: 20%;
}
.flow-box .box02{
  width: 35%;
}
.flow-box .box03{
  width: 35%;
}
.flow-box h4{
  font-size: 1.6rem;
  margin-bottom: 20px;
}
.flow-box .box02 h4 span{
  color: #fff;
  background-color: var(--color01);
  padding: 3px 15px;
  border-radius: 15px;
}
.flow-box .box03 h4 span{
  color: #fff;
  background-color: var(--color02);
  padding: 3px 15px;
  border-radius: 15px;
}
.flow-box h5{
  font-size: 2.4rem;
  margin-bottom: 15px;
}
#root a,#attempt a {
  text-decoration: underline;
}
#root ul{
justify-content: space-between;
}
#root ul li {
  width: 47%;
}

/* ==========================================================================
	PC 1025px -
	========================================================================== */
@media screen and (min-width: 1025px) {}
@media screen and (max-width: 1200px) { /*1200以下*/
}
/* ==========================================================================
	TABLET - 1024px
	========================================================================== */
@media screen and (max-width:1024px) {


}
/* ==========================================================================
	SP - 640px
	========================================================================== */
@media screen and (max-width: 800px) {
.li-need{
  display: block;
}
.li-need li{
  width: 100%;
  margin-right: 0;
  margin-bottom: 20px;
}
.li-need li .txt{
  width: 80%;
  margin: 0 auto;
}

.cmn-table01 th,.cmn-table01 td{
padding: 10px 5px;
}
.cmn-table01 th{
width: 25%;
}
.cmn-table01 td{
width: 75%;
}

/* 一般歯科
-----------------------*/
.flow-box{
  display: block;
}
.flow-next{
margin-bottom: 30px;
padding-bottom: 30px;
}
.flow-box .box01{
  width: 50%;
  max-width: 200px;
  margin: 0 auto 15px auto;
}
.flow-box .box02{
  width: 100%;
  margin-bottom: 30px;
}
.flow-box .box03{
  width: 100%;
}
.flow-box h4{
  font-size: 1.5rem;
}
.flow-box h5{
  font-size: 2.0rem;
  margin-bottom: 15px;
}

#root ul li {
  width: 100%;
  margin-bottom: 15px;
}

}