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

  #introduction {
    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 .3s ease-out;
  }

  details.introDetail1:hover {
    border: solid;
    /* border-color: #00c811; */
    /* border-color: #000000; */
    transform: scale(1.05, 1.05);
    transition: all .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.0, 1.0);
      /* width: 36em; */
      /* width: 900px; */
    }
  }

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

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

  }