@charset "UTF-8";
/* #message
------------------------------------ */
.scrollWrapper {
  overflow: hidden;
}

#message {
  padding: 2rem 5.6vw 2rem;
}
#message .rayoutBox {
  display: grid;
  grid-template-columns: 47% 47%;
  gap: 0 6%;
  position: relative;
}
#message .rayoutBox *[class^=message] {
  width: 100%;
  margin-bottom: 2.4vw;
  grid-column: 1/2;
  grid-row: 1/2;
  opacity: 0;
  font-size: clamp(1.6rem, 1.3vw, 1.3vw);
}
#message .rayoutBox .message_c_02,
#message .rayoutBox .message_c_03 {
  color: #fcfbf5;
}
#message .rayoutBox .message_c_02 {
  grid-row: 2/3;
}
#message .rayoutBox .message_c_03 {
  grid-row: 3/4;
}
#message .rayoutBox *[class^=image] {
  grid-column: 2/3;
  grid-row: 1/span 3;
  text-align: right;
}
#message .rayoutBox .image01,
#message .rayoutBox .image02,
#message .rayoutBox .image03 {
  width: 100%;
  aspect-ratio: 630/420;
  height: 0%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: left top;
  position: absolute;
  top: 0;
  left: 0;
}
#message .rayoutBox .image01 {
  background-image: url(/lib/img/greeting/message_01.webp);
  height: auto;
}
#message .rayoutBox .image02 {
  background-image: url(/lib/img/greeting/message_02.webp);
}
#message .rayoutBox .image03 {
  background-image: url(/lib/img/greeting/message_03.webp);
}
#message.active .inner_main .message_c_02,
#message.active .inner_main .message_c_03 {
  color: #545a6d;
}

@media screen and (max-width: 768px) {
  #message {
    padding-bottom: 3rem;
  }
  #message .rayoutBox {
    display: block;
  }
  #message .rayoutBox *[class^=message] {
    width: auto;
    margin-bottom: 3rem;
  }
  #message .rayoutBox *[class^=message] p.title {
    font-size: 3.5rem;
  }
  #message .rayoutBox *[class^=message] p.title span {
    font-size: 1.8rem;
    margin-left: 1.5rem;
  }
  #message .rayoutBox *[class^=message] p.mean span.text {
    font-size: 1.4rem;
  }
  #message .rayoutBox .message_c_02,
  #message .rayoutBox .message_c_03 {
    color: #545a6d;
  }
  #message .rayoutBox *[class^=image] {
    width: auto;
    text-align: left;
    margin-bottom: 3rem;
  }
  #message .rayoutBox .image02,
  #message .rayoutBox .image03 {
    aspect-ratio: 630/420;
    height: auto;
    position: static;
  }
}
/* #doctor
------------------------------------ */
#doctor {
  padding: 2rem 5.6vw 2rem;
}
#doctor .rayoutBox {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "title photo" "data photo";
  gap: 3rem 4.9vw;
}
#doctor .rayoutBox h2 {
  grid-area: title;
  font-family: "Century Gothic", "Futura", serif;
  font-size: clamp(3rem, 4.4vw, 4.4vw);
  margin-bottom: 0;
}
#doctor .rayoutBox .data {
  grid-area: data;
}
#doctor .rayoutBox .data .name {
  font-size: clamp(2.4rem, 2.5vw, 2.5vw);
}
#doctor .rayoutBox .data .name span {
  display: inline-block;
  font-size: clamp(1.8rem, 1.7vw, 1.7vw);
  padding-left: clamp(1.8rem, 1.7vw, 1.7vw);
}
#doctor .rayoutBox .data dl {
  margin-top: 3rem;
}
#doctor .rayoutBox .data dl dt {
  font-weight: 600;
  padding-bottom: 0.5rem;
  border-bottom: 1px dotted #51443D;
}
#doctor .rayoutBox .data dl dd {
  margin-top: 1rem;
}
#doctor .rayoutBox .data dl dd ul {
  margin-bottom: 3rem;
}
#doctor .rayoutBox .data dl dd ul li {
  display: flex;
  align-items: center;
  gap: 1rem;
}
#doctor .rayoutBox .data dl dd ul li:before {
  content: "◆";
  font-size: 10px;
  color: #EB6100;
}
#doctor .rayoutBox .data dl dd ul.join {
  display: grid;
  grid-template-columns: max-content max-content;
  gap: 0 2.1vw;
}
#doctor .rayoutBox .photo {
  text-align: center;
  grid-area: photo;
}
#doctor .rayoutBox .photo img {
  max-width: 33vw;
}
@media screen and (max-width: 768px) {
  #doctor .rayoutBox {
    display: block;
  }
  #doctor .rayoutBox .data dl dd ul.join {
    display: block;
  }
  #doctor .rayoutBox .photo {
    grid-area: photo;
    text-align: right;
  }
  #doctor .rayoutBox .photo img {
    max-width: 60%;
  }
}

/* .photogallery
------------------------------------ */
.photogallery {
  margin: 8rem 0 8rem;
}
@media screen and (max-width: 768px) {
  .photogallery {
    margin: 0rem 0 5rem;
  }
}

/*# sourceMappingURL=greeting.css.map */