@charset "UTF-8";
/*-------- 診療内容css --------*/
/* --------------------------------------------------------
variable
-------------------------------------------------------- */
/* モバイルレイアウト 767px以下 */
/* --------------------------------------------------------
診療内容
-------------------------------------------------------- */
#treatment .treatmentWrap {
  margin: 15% 0;
}
#treatment .treatmentWrap figure {
  margin: 0 0 5%;
}
#treatment .treatmentWrap .treatmentTxt {
  margin: 0;
}
#treatment .treatmentWrap .treatmentTxt h3 {
  text-align: left;
}

.blueBox{
  padding: 5%;
  background-color: var(--bg-color01);
}

.blueBox h4{
  margin: 1em 0 .5em;
  color: var(--main-color);
  font-size: 1.2rem;
  transform: rotate(0.03deg); /* Webフォント擦れ防止 */
}

.blueBox p{
  margin: 0 0 1em;
  text-align: left;
  span{
    display: inline-block;
  }
}

/* --------------------------------------------------------
連携施設のご案内
-------------------------------------------------------- */
.borderBox{
  margin: 0;
  padding: 5%;
  border: var(--main-color) 1px solid;
}
.borderBox dl{
  margin: 1em 0;
  text-align: left;
}
.borderBox dl dt{
  margin: 0 0 .5em;
  color: var(--main-color);
  font-family: var(--main-font);
  font-size: 1.2rem;
  font-weight: 500;
  transform: rotate(0.03deg); /* Webフォント擦れ防止 */
}
.borderBox dl dd{
  margin: 0;
  span{
    display: inline-block;
  }
}

/* --------------------------------------------------------
ワクチン接種について
-------------------------------------------------------- */
#vaccine h2 span{
  padding-top: 10px;
}
.borderBox02{
  border: var(--sub-color01) 1px solid;
}

.borderBox02 dl dt{
  color: var(--sub-color02);
}

/* タブレットレイアウト : 768 px～。モバイルレイアウトからスタイルを継承。 */
@media print, screen and (min-width: 768px) {

/* --------------------------------------------------------
診療内容
-------------------------------------------------------- */
p.greeting{
  margin: 50px auto;
  width: fit-content;
  font-size: 18px;
}

#treatment .treatmentWrap {
  margin: 100px 0;
}

#treatment .treatmentWrap .flexBox {
  margin: 50px 0;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 60px;
}
#treatment .treatmentWrap figure {
  width: 450px;
  margin-bottom: 0;
}
#treatment .treatmentWrap .treatmentTxt {
  width: calc(100% - 450px - 60px);
  font-size: 20px;
  line-height: 2;
}

#treatment .treatmentWrap .treatmentTxt h3 {
  font-size: 26px;
}

#treatment .treatmentWrap .blueBox.flexBox{
  padding: 50px;
  flex-direction: row;
  align-items: flex-start;
}

.blueBox .left,
.blueBox .right{
  width: calc(50% - 25px);
}

.blueBox h4{
  font-size: 20px;
}

.blueBox p{
  font-size: 20px;
}

/* --------------------------------------------------------
連携施設のご案内
-------------------------------------------------------- */
.borderBox{
  margin: 0;
  padding: 50px;
}
.borderBox dl{
  margin: 1em auto;
  max-width: 900px;
  display: flex;
  gap: 50px;
}
.borderBox dl dt{
  margin: 0;
  width: 120px;
  font-size: 20px;
}
.borderBox dl dd{
  margin: 0;
  width: calc(100% - 120px - 50px);
}

/* --------------------------------------------------------
ワクチン接種について
-------------------------------------------------------- */
.borderBox02 p.greeting{
  margin: 1em auto;
}
}