/* ------------------------------------
// motto
------------------------------------ */
#motto {
  padding: 5rem 0 0 0;
  margin-bottom: 10rem;
  position: relative;
}
#motto::before {
  content: "";
  width: 100%;
  height: 28px;
  background: #FFF;
  mask: url(/lib/img/cmn/separate_nami_01.svg) repeat-x bottom/cover;
  display: block;
  transform: rotate(180deg);
  position: absolute;
  top: -27px;
  left: 0;
}
#motto h2 {
  width: 270px;
  margin: 0 auto;
  text-align: center;
}
#motto p {
  width: fit-content;
  margin: 0 auto;
  color: #84CDD9;
  font-size: clamp(3rem, 3.2vw, 4.6rem);
  line-height: 1.2;
}
#motto p span {
  font-size: clamp(2rem, 1.9vw, 2.8rem);
  padding: 0 1rem;
  color: #002A54;
  background: linear-gradient(transparent 80%, #E8F3F8 80%);
}
@media screen and (max-width: 768px) {
  #motto {
    padding: 2rem 0 0 0;
    margin-bottom: 7rem;
  }
  #motto::before {
    height: 14px;
    top: -14px;
  }
  #motto h2 {
    width: 70%;
    max-width: 300px;
  }
}

/* ------------------------------------
// message
------------------------------------ */
#message {
  position: relative;
  padding: 0 2rem 15rem;
}
#message .messageBox {
  width: 100%;
  margin: 0 auto;
}
@media screen and (min-width: calc(1000px + 2rem)) {
  #message .messageBox {
    width: 75%;
    min-width: 1000px;
  }
}
#message .messageBox p + p {
  margin-top: 2rem;
}
#message .photo {
  margin: 5rem auto 0;
  max-width: 840px;
  background: #F6F2E4;
  padding: 10px;
}
@media screen and (max-width: 768px) {
  #message {
    padding: 0 2rem 7rem;
  }
  #message .photo {
    margin-top: 3rem;
  }
}

/* ------------------------------------
// profile
------------------------------------ */
#profile {
  background: #F8FBFB;
  padding: 3rem 2rem 10rem;
  position: relative;
  /* .doctor parts */
  /* #manabu */
  /* #nagako */
  /* #hiromu */
}
#profile::after {
  content: "";
  width: 100%;
  height: 28px;
  background: #F8FBFB;
  mask: url(/lib/img/cmn/separate_nami_01.svg) repeat-x bottom/cover;
  display: block;
  transform: rotate(180deg);
  position: absolute;
  top: -27px;
  left: 0;
  z-index: 0;
}
#profile:before {
  content: "";
  width: clamp(10rem, 15.5vw, 22.3rem);
  aspect-ratio: 223/216;
  display: block;
  position: absolute;
  top: 0;
  right: 2rem;
  transform: translateY(-50%);
  background: url(/lib/img/doctor/grass_01.webp) no-repeat center/contain;
  z-index: 2;
}
@media screen and (min-width: calc(1000px + 2rem)) {
  #profile:before {
    right: 12.5%;
  }
}
@media screen and (max-width: 768px) {
  #profile {
    padding: 3rem 2rem 5rem;
  }
}
#profile section.doctor {
  position: relative;
  background: #FFF;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.06);
  padding: 5rem;
  width: 100%;
  margin: 5rem auto 1rem;
}
@media screen and (min-width: calc(1000px + 2rem)) {
  #profile section.doctor {
    width: 75%;
    min-width: 1000px;
  }
}
#profile section.doctor:before, #profile section.doctor::after {
  content: "";
  width: 24px;
  aspect-ratio: 24/48;
  display: block;
  position: absolute;
  top: -2rem;
}
#profile section.doctor::before {
  left: 1rem;
  background: url(/lib/img/cmn/icon_pin_01.webp) no-repeat top/contain;
}
#profile section.doctor::after {
  right: 1rem;
  background: url(/lib/img/cmn/icon_pin_02.webp) no-repeat top/contain;
}
@media screen and (max-width: 768px) {
  #profile section.doctor {
    padding: 3rem 2rem 1rem;
  }
  #profile section.doctor:before, #profile section.doctor::after {
    content: "";
    width: 15px;
    aspect-ratio: 24/48;
    display: block;
    position: absolute;
    top: -1rem;
  }
}
#profile section.doctor h4 {
  min-width: 8em;
  color: #FFF;
  font-size: clamp(1.6rem, 1.4vw, 2rem);
  padding: 0.5rem 2rem;
  background: #3BA8D1;
  width: fit-content;
  text-align: center;
  transform: translate(-5rem, -50%);
  margin-bottom: 2rem;
}
#profile section.doctor .profileBox {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 2rem 5rem;
  grid-template-areas: "portrait history";
}
#profile section.doctor .profileBox .portrait {
  grid-area: portrait;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-self: self-start;
}
#profile section.doctor .profileBox .name {
  order: 2;
  color: #002A54;
}
#profile section.doctor .profileBox .name h3 {
  width: fit-content;
  font-size: clamp(1.8rem, 1.7vw, 2.4rem);
}
#profile section.doctor .profileBox .name h3 span {
  font-size: clamp(1.2rem, 1.1vw, 1.6rem);
  display: block;
  padding-bottom: 0.5rem;
  border-bottom: 2px dotted #3BA8D1;
}
#profile section.doctor .profileBox .name .en {
  margin-bottom: 0;
  font-family: "Sofia Sans", sans-serif;
  font-size: clamp(1.2rem, 1vw, 1.5rem);
  color: #3BA8D1;
}
#profile section.doctor .profileBox .photo {
  order: 1;
}
#profile section.doctor .profileBox section {
  grid-area: history;
  background: #EDF4F5;
  padding: 4.5rem 3rem 3rem 3rem;
  color: #002A54;
  position: relative;
}
#profile section.doctor .profileBox section dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.5rem 2rem;
}
#profile section.doctor .drData {
  background: #EDF4F5;
  display: grid;
  grid-template-columns: 1fr calc(50% - 3rem);
  gap: 5rem;
  padding: 0 3rem 3rem 3rem;
  margin-top: 8rem;
  position: relative;
}
@media screen and (max-width: 768px) {
  #profile section.doctor h4 {
    margin-bottom: 0;
    transform: translate(-3rem, -50%);
  }
  #profile section.doctor .profileBox {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem 5rem;
    grid-template-areas: "portrait" "history";
  }
  #profile section.doctor .profileBox .portrait {
    max-width: 300px;
    margin: 0 auto;
  }
  #profile section.doctor .profileBox .name {
    display: flex;
    gap: 1rem;
    align-items: end;
    width: fit-content;
  }
  #profile section.doctor .profileBox .name .en {
    margin-bottom: 0;
    font-family: "Sofia Sans", sans-serif;
    font-size: clamp(1.2rem, 1vw, 1.5rem);
    color: #3BA8D1;
  }
  #profile section.doctor .profileBox section {
    padding: 3.5rem 2rem 3rem 2rem;
  }
  #profile section.doctor .profileBox section dl {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.25rem 2rem;
  }
  #profile section.doctor .profileBox section dl dd {
    padding-bottom: 1rem;
    border-bottom: 1px dashed #CCC;
    margin-bottom: 0.5rem;
  }
  #profile section.doctor .drData {
    grid-template-columns: 1fr;
    padding: 0 2rem 3rem 2rem;
  }
}
#profile #manabu .drData a {
  color: #002A54;
  text-decoration: underline;
}
#profile #manabu .drData a.pop::after {
  content: "";
  width: clamp(1.6rem, 1.3vw, 1.8rem);
  aspect-ratio: 78/93;
  display: inline-block;
  mask: url(/lib/img/cmn/icon_report.webp) no-repeat center/contain;
  background: #002A54;
  vertical-align: middle;
  margin-left: 0.5rem;
}
#profile #manabu .drData #license {
  grid-row: 1/3;
}
#profile #manabu .drData:after {
  content: "";
  width: clamp(5rem, 6.9vw, 10rem);
  aspect-ratio: 130/307;
  display: block;
  background: url(/lib/img/doctor/grass_02.webp) no-repeat center/contain;
  position: absolute;
  right: 0;
  top: clamp(-5rem, -2.8vw, -4rem);
}
@media screen and (max-width: 768px) {
  #profile #manabu .drData:after {
    content: "";
    width: clamp(6rem, 10.7vw, 15.4rem);
    right: -2rem;
    bottom: clamp(-5rem, -2.8vw, -4rem);
  }
}
#profile #nagako h4 {
  background: #E9C043;
}
#profile #nagako .profileBox {
  display: grid;
  grid-template-columns: 1fr 230px;
  gap: 2rem 5rem;
  grid-template-areas: "history portrait";
}
#profile #nagako .profileBox .name h3 span {
  border-bottom: 2px dotted #D39948;
}
#profile #nagako .profileBox .name .en {
  color: #D39948;
}
#profile #nagako .profileBox section {
  background: #FAF8F1;
}
#profile #nagako .profileBox section::before {
  content: "";
  width: clamp(6rem, 6.8vw, 9.8rem);
  aspect-ratio: 98/143;
  display: block;
  background: url(/lib/img/cmn/kozuchichan_01.webp) no-repeat center/contain;
  position: absolute;
  right: clamp(2rem, 3.5vw, 5rem);
  top: -3rem;
  transform: rotate(15deg);
}
#profile #nagako .profileBox section:after {
  content: "";
  width: clamp(10rem, 10.7vw, 15.4rem);
  aspect-ratio: 154/165;
  display: block;
  background: url(/lib/img/doctor/grass_03.webp) no-repeat center/contain;
  position: absolute;
  right: clamp(2rem, 3.5vw, 5rem);
  bottom: clamp(-5rem, -2.8vw, -4rem);
}
#profile #nagako .drData {
  background: #FAF8F1;
}
@media screen and (max-width: 768px) {
  #profile #nagako .profileBox {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem 5rem;
    grid-template-areas: "portrait" "history";
  }
  #profile #nagako .profileBox section {
    background: #FAF8F1;
  }
  #profile #nagako .profileBox section::before {
    content: "";
    width: clamp(5rem, 6.8vw, 9.8rem);
    top: -1rem;
  }
  #profile #nagako .profileBox section:after {
    content: "";
    width: clamp(8rem, 10.4vw, 15rem);
    right: -1rem;
    bottom: auto;
    top: calc(100% - 2rem);
  }
}
#profile #hiromu .profileBox section:after {
  content: "";
  width: clamp(6rem, 5.7vw, 8.2rem);
  aspect-ratio: 82/97;
  display: block;
  background: url(/lib/img/doctor/grass_05.webp) no-repeat center/contain;
  position: absolute;
  right: clamp(2rem, 3.5vw, 5rem);
  bottom: clamp(-5rem, -2.8vw, -4rem);
}
@media screen and (max-width: 768px) {
  #profile #hiromu .profileBox section:after {
    content: "";
    width: clamp(6rem, 25%, 100px);
    right: 1rem;
    bottom: clamp(-5rem, -2.8vw, -4rem);
  }
}
#profile #hiromu .bnr {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  margin-top: 4rem;
}
#profile #hiromu .bnr a {
  display: flex;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  padding: 1rem 5rem 1rem 2rem;
  position: relative;
}
#profile #hiromu .bnr a:before {
  content: "";
  width: 44px;
  height: 36px;
}
#profile #hiromu .bnr a::after {
  content: "";
  width: 6px;
  height: 12px;
  display: block;
  mask: url(/lib/img/cmn/icon_arrow_01.svg) no-repeat center/contain;
  background: #FFF;
  align-self: center;
  position: absolute;
  right: 1rem;
  top: calc(50% - 3px);
}
#profile #hiromu .bnr a p {
  text-align: center;
}
#profile #hiromu .bnr a p span {
  display: block;
  font-family: "Sofia Sans", sans-serif;
  width: fit-content;
  margin: 0 auto;
  padding: 0 2.5rem;
  border-bottom: 2px dotted;
}
#profile #hiromu .bnr .eq1995 a {
  background: #50AACD;
  border: 4px solid #2F86A6;
  color: #FFF;
}
#profile #hiromu .bnr .eq1995 a:before {
  background: url(/lib/img/doctor/icon_blog.webp) no-repeat center/contain;
}
#profile #hiromu .bnr .eq1995 a:hover {
  background: #2F86A6;
}
#profile #hiromu .bnr .tigers a {
  background: #F8F19C;
  border: 4px solid #858484;
}
#profile #hiromu .bnr .tigers a:before {
  background: url(/lib/img/doctor/icon_tigers.webp) no-repeat center/contain;
}
#profile #hiromu .bnr .tigers a::after {
  background: #000;
}
#profile #hiromu .bnr .tigers a:hover {
  background: #F9E930;
}
@media screen and (max-width: 768px) {
  #profile #hiromu .bnr {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}