/* ==============================
  病院紹介
  ============================== */

#introduction h2 {
  color: #99634b;
}

.color_red {
  font-weight: bold;
  color: #ff0000;
}

/* .h4-intro {
    color: #02cd88;
    margin-block-start: 0em;
    margin-block-end: 0.8em;
  } */

summary.introSummary1 {
  padding: 0.2em 1em;
  background: #f1df50;
  border-radius: 25px;
  box-shadow: 1px 0px 3px gray, inset 0px -2px 4px #615712;
}

summary.introSummary1:hover {
  /* background: #50f160; */
  /* color: #ffffff; */
  color: #000000;
  /* background: #00c811; */
  background: #ffe100;
}

summary:hover {
  cursor: pointer;
  transition: 0.8s;
}

details.introDetail1 {
  width: 9em;
  /* width: fit-content;にしてしまうとクリック時のアニメ消失 */
  background: #f7eb8a;
  border: solid;
  border-color: #8e8010;
  border-radius: 28px;
  box-shadow: 1px 0px 3px gray;
  /* box-shadow: 4px 6px 10px gray; */
  transition: all 0.3s ease-out;
}

details.introDetail1:hover {
  border: solid;
  /* border-color: #00c811; */
  /* border-color: #000000; */
  transform: scale(1.05, 1.05);
  transition: all 0.15s ease-out;
}

details:hover {
  transition: 0.1s;
}

details.introDetail1[open] {
  /* width: 900px; */
  /* width: 65%; */
  width: 36em;
}

details.introDetail1 p {
  padding: 0 1em;
}

@media screen and (max-width: 900px) {
  details.introDetail1[open] {
    width: 100%;
    transform: scale(1, 1);
    /* width: 36em; */
    /* width: 900px; */
  }
}

@media screen and (max-width: 769px) {
  details.introDetail1 {
    margin: auto;
  }

  summary.introSummary1 {
    padding: 0.5em 1em;
    font-size: 1.1em;
  }
}