@charset "UTF-8";
/*-------- 医院案内css --------*/
/* --------------------------------------------------------
variable
-------------------------------------------------------- */
/* モバイルレイアウト 767px以下 */
/* --------------------------------------------------------
共通
-------------------------------------------------------- */
section .content {
  margin: 10% 0;
}

/* --------------------------------------------------------
医院概要
-------------------------------------------------------- */
figure{
  margin: 0;
}
.info{
  margin: 5% 0;
  padding: 5%;
  background-color: var(--bg-color02);
}
.info dl{
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 1em;
}
.info dl dt {
  width: 70px;
  color: var(--sub-color02);
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 500;
  transform: rotate(0.03deg); /* Webフォント擦れ防止 */
}

.info dl dd {
  margin: 0;
  width: calc(100% - 70px - 1em);
  text-align: left;
  span{
    display: inline-block;
  }
}


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

/* --------------------------------------------------------
共通
-------------------------------------------------------- */
section .content {
  margin: 100px 0;
  text-align: justify;
}

.pcBr{
  display: block;
}

section .content:last-of-type{
  margin: 100px 0 0;
}

section .flexBox {
  display: flex;
  align-items: flex-end;
  gap: 40px;
}

section .flexBox .flexBoxTxt {
  width: calc(100% - 560px);
}

/* --------------------------------------------------------
医院概要
-------------------------------------------------------- */
figure{
  margin: 0;
}
.info{
  margin: 50px 0 0;
  padding: 40px 50px;
}

.info.flexBox{
  justify-content: center;
  gap: 50px;
}

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

.info dl {
  display: flex;
  align-items: center;
}

.info dl dt {
  margin-bottom: 0;
  font-size: 20px;
}

.info dl dd {
  margin: 0;
  font-size: 18px;
}

.info .left dl dt {
  width: 60px;
}

.info .left dl dd{
  width: calc(100% - 60px - 1em);
}

.info .right dl dt {
  width: 80px;
}

.info .right dl dd{
  width: calc(100% - 80px - 1em);
}

}