@charset "UTF-8";
/*
 * profile.css
 * Last modify 2024/05/13 22:21
 */
@import url("https://fonts.googleapis.com/css2?family=BIZ+UDMincho:wght@400;700&family=BIZ+UDPMincho:wght@400;700&family=Cardo:wght@400;700&family=Zen+Kaku+Gothic+Antique&display=swap"); /* ==========================================================
!import
========================================================== */
/* ==========================================================
!mediaQuery
デザインベースは376px、1440px
========================================================== */
/* -----------------------------------------------------
Base Style
----------------------------------------------------- */
/* !main
---------------------------------------------------------- */
html.webp #main {
  background-image: url("../img/profile/bg_main01.webp");
}
@media screen and (max-width: 880px) {
  html.webp #main {
    background-image: url("../img/profile/bg_main01_sp.webp");
  }
}

html.no-webp #main {
  background-image: url("../img/profile/bg_main01.jpg");
}
@media screen and (max-width: 880px) {
  html.no-webp #main {
    background-image: url("../img/profile/bg_main01_sp.jpg");
  }
}

/* !content
---------------------------------------------------------- */
@media screen and (min-width: 881px) {
  #content {
    width: 85vw;
  }
}
@media screen and (min-width: 1281px) {
  #content {
    width: 1032px;
  }
}
@media screen and (min-width: 1441px) {
  #content {
    width: 71.66vw;
  }
}
#content .firstAction01,
#content .firstAction02 {
  position: relative;
  opacity: 0;
  top: 50px;
}
#content .firstAction01 {
  -webkit-animation: show01 0.5s ease 0s forwards;
  animation: show01 0.5s ease 0s forwards;
}
#content .firstAction02 {
  -webkit-animation: show01 0.5s ease 0.3s forwards;
  animation: show01 0.5s ease 0.3s forwards;
}
#content h1.h1_basic01 {
  margin-bottom: 4.25vw;
}
@media screen and (min-width: 881px) {
  #content h1.h1_basic01 {
    margin-bottom: 1.87vw;
  }
}
@media screen and (min-width: 1281px) {
  #content h1.h1_basic01 {
    margin-bottom: 24px;
  }
}
@media screen and (min-width: 1441px) {
  #content h1.h1_basic01 {
    margin-bottom: 1.66vw;
  }
}
#content .h2Box {
  text-align: center;
}
#content .h2Box h2 {
  position: relative;
  display: block;
  color: #BFB87D;
  line-height: 1.75;
  letter-spacing: 0.1em;
  text-align: left;
}
#content .h2Box h2:before {
  position: absolute;
  display: block;
  content: "";
  top: 0.7em;
  background: url("../common/img/bg_h2_02l.svg") no-repeat right center;
  background-size: 100%;
}
@media screen and (max-width: 880px) {
  #content .h2Box h2 {
    margin-bottom: 8.51vw;
    padding: 0;
    color: #717171;
    font-size: 6.91vw;
    line-height: 1.46;
    text-align: center;
  }
  #content .h2Box h2:before, #content .h2Box h2:after {
    position: absolute;
    display: inline-block;
    content: "";
    width: 24px;
    height: 9px;
    top: 44%;
    background: url("../common/img/bg_h2_01_sp.svg") no-repeat center center;
    background-size: 100%;
  }
  #content .h2Box h2:before {
    left: 0;
  }
  #content .h2Box h2:after {
    right: 0;
  }
}
@media screen and (min-width: 881px) {
  #content .h2Box h2 {
    margin-bottom: 2.5vw;
    font-size: 1.87vw;
  }
}
@media screen and (min-width: 1281px) {
  #content .h2Box h2 {
    margin-bottom: 32px;
    font-size: 24px;
  }
}
@media screen and (min-width: 1441px) {
  #content .h2Box h2 {
    margin-bottom: 2.22vw;
    font-size: 1.66vw;
  }
}
#content .h2Box h2 strong {
  color: #BFB87D;
  font-size: 5.31vw;
  line-height: 1.4;
  font-weight: 500;
}
@media screen and (min-width: 881px) {
  #content .h2Box h2 strong {
    font-size: 1.87vw;
  }
}
@media screen and (min-width: 1281px) {
  #content .h2Box h2 strong {
    font-size: 24px;
  }
}
@media screen and (min-width: 1441px) {
  #content .h2Box h2 strong {
    font-size: 1.66vw;
  }
}
#content #doctor .h2Box h2:before,
#content #staff .h2Box h2:before {
  background: url("../common/img/bg_h2_03l.svg") no-repeat right center;
  background-size: 100%;
}
@media screen and (max-width: 880px) {
  #content #doctor .h2Box h2:before,
#content #staff .h2Box h2:before {
    background: url("../common/img/bg_h2_01_sp.svg") no-repeat center center;
    background-size: 100%;
  }
}
@media screen and (min-width: 881px) {
  #content #doctor .h2Box h2:before,
#content #staff .h2Box h2:before {
    width: 12.18vw;
    height: 0.85vw;
    left: -15.93vw;
  }
}
@media screen and (min-width: 1281px) {
  #content #doctor .h2Box h2:before,
#content #staff .h2Box h2:before {
    width: 156px;
    height: 11px;
    left: -204px;
  }
}
@media screen and (min-width: 1441px) {
  #content #doctor .h2Box h2:before,
#content #staff .h2Box h2:before {
    width: 10.83vw;
    height: 0.76vw;
    left: -14.16vw;
  }
}
#content #director h3,
#content #doctor h3 {
  margin-bottom: 4.25vw;
  font-size: 6.91vw;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-align: left;
}
@media screen and (max-width: 880px) {
  #content #director h3,
#content #doctor h3 {
    text-align: center;
  }
}
@media screen and (min-width: 881px) {
  #content #director h3,
#content #doctor h3 {
    margin-bottom: 2.5vw;
    font-size: 2.5vw;
  }
}
@media screen and (min-width: 1281px) {
  #content #director h3,
#content #doctor h3 {
    margin-bottom: 32px;
    font-size: 32px;
  }
}
@media screen and (min-width: 1441px) {
  #content #director h3,
#content #doctor h3 {
    margin-bottom: 2.22vw;
    font-size: 2.22vw;
  }
}
#content #director h3 span,
#content #doctor h3 span {
  display: block;
  color: #00B3CD;
  font-size: 4.25vw;
  line-height: 2;
}
@media screen and (min-width: 881px) {
  #content #director h3 span,
#content #doctor h3 span {
    font-size: 1.4vw;
  }
}
@media screen and (min-width: 1281px) {
  #content #director h3 span,
#content #doctor h3 span {
    font-size: 18px;
  }
}
@media screen and (min-width: 1441px) {
  #content #director h3 span,
#content #doctor h3 span {
    font-size: 1.25vw;
  }
}
#content #director h3:before,
#content #doctor h3:before {
  position: relative;
  display: none;
  content: "";
  width: 60.1vw;
  height: 59.84vw;
  border: 1px solid #DAD4A4;
  background-size: 100% !important;
}
@media screen and (max-width: 880px) {
  #content #director h3:before,
#content #doctor h3:before {
    display: inline-block;
  }
}
#content #director .imgWrap,
#content #doctor .imgWrap {
  position: relative;
  z-index: 1;
}
@media screen and (min-width: 881px) {
  #content #director .imgWrap,
#content #doctor .imgWrap {
    min-height: 38.28vw;
  }
}
@media screen and (min-width: 1281px) {
  #content #director .imgWrap,
#content #doctor .imgWrap {
    min-height: 490px;
  }
}
@media screen and (min-width: 1441px) {
  #content #director .imgWrap,
#content #doctor .imgWrap {
    min-height: 34.02vw;
  }
}
#content #director .imgWrap:before,
#content #doctor .imgWrap:before {
  position: absolute;
  display: block;
  content: "";
  width: 60.1vw;
  height: 59.84vw;
  top: 0;
  left: 0;
  border: 1px solid #DAD4A4;
  background-size: 100% !important;
  z-index: 10;
}
@media screen and (max-width: 880px) {
  #content #director .imgWrap:before,
#content #doctor .imgWrap:before {
    display: none;
  }
}
@media screen and (min-width: 881px) {
  #content #director .imgWrap:before,
#content #doctor .imgWrap:before {
    width: 38.43vw;
    height: 38.28vw;
  }
}
@media screen and (min-width: 1281px) {
  #content #director .imgWrap:before,
#content #doctor .imgWrap:before {
    width: 492px;
    height: 490px;
  }
}
@media screen and (min-width: 1441px) {
  #content #director .imgWrap:before,
#content #doctor .imgWrap:before {
    width: 34.16vw;
    height: 34.02vw;
  }
}
#content h4 {
  margin-bottom: 4.26vw;
  color: #BFB87D;
  font-size: 4.26vw;
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.1em;
}
@media screen and (max-width: 880px) {
  #content h4 {
    text-align: center;
  }
}
@media screen and (min-width: 881px) {
  #content h4 {
    margin-bottom: 1.87vw;
    font-size: 1.4vw;
  }
}
@media screen and (min-width: 1281px) {
  #content h4 {
    margin-bottom: 24px;
    font-size: 18px;
  }
}
@media screen and (min-width: 1441px) {
  #content h4 {
    margin-bottom: 1.66vw;
    font-size: 1.25vw;
  }
}
#content .textWrap p {
  font-size: 4.25vw;
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.1em;
  text-align: center;
}
@media screen and (min-width: 881px) {
  #content .textWrap p {
    font-size: 1.4vw;
  }
}
@media screen and (min-width: 1281px) {
  #content .textWrap p {
    font-size: 18px;
  }
}
@media screen and (min-width: 1441px) {
  #content .textWrap p {
    font-size: 1.25vw;
  }
}
#content .textWrap p.cmnt {
  margin-bottom: 10.63vw;
  font-size: 5.31vw;
  line-height: 1.7;
  letter-spacing: 0.1em;
  text-align: center;
}
@media screen and (min-width: 881px) {
  #content .textWrap p.cmnt {
    margin-bottom: 3.12vw;
    font-size: 1.87vw;
  }
}
@media screen and (min-width: 1281px) {
  #content .textWrap p.cmnt {
    margin-bottom: 32px;
    font-size: 24px;
  }
}
@media screen and (min-width: 1441px) {
  #content .textWrap p.cmnt {
    margin-bottom: 2.77vw;
    font-size: 1.66vw;
  }
}
#content .comment {
  text-align: left;
  font-size: 16px;
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.1em;
}
@media screen and (max-width: 880px) {
  #content .comment {
    text-align: center;
  }
}
@media screen and (min-width: 881px) {
  #content .comment {
    font-size: 1.4vw;
  }
}
@media screen and (min-width: 1281px) {
  #content .comment {
    font-size: 18px;
  }
}
@media screen and (min-width: 1441px) {
  #content .comment {
    font-size: 1.25vw;
  }
}
#content #keireki .wrap01,
#content #keireki .wrap02,
#content .shikaku {
  margin-top: 8.51vw;
}
@media screen and (min-width: 881px) {
  #content #keireki .wrap01,
#content #keireki .wrap02,
#content .shikaku {
    margin-top: 3.75vw;
  }
}
@media screen and (min-width: 1281px) {
  #content #keireki .wrap01,
#content #keireki .wrap02,
#content .shikaku {
    margin-top: 48px;
  }
}
@media screen and (min-width: 1441px) {
  #content #keireki .wrap01,
#content #keireki .wrap02,
#content .shikaku {
    margin-top: 3.33vw;
  }
}
#content #keireki .wrap01 ul,
#content #keireki .wrap02 ul,
#content .shikaku ul {
  border-top: 2px dotted #BFB87D;
  list-style: none;
}
#content #keireki .wrap01 ul li,
#content #keireki .wrap02 ul li,
#content .shikaku ul li {
  padding: 0.65em 0;
  border-bottom: 2px dotted #BFB87D;
}

/* !director
---------------------------------------------------------- */
#director {
  margin-top: 21.27vw;
}
@media screen and (min-width: 881px) {
  #director {
    margin-top: 6.25vw;
  }
}
@media screen and (min-width: 1281px) {
  #director {
    margin-top: 80px;
  }
}
@media screen and (min-width: 1441px) {
  #director {
    margin-top: 5.55vw;
  }
}
#director .imgWrap {
  position: relative;
}
@media screen and (min-width: 881px) {
  #director .imgWrap {
    padding-top: 3.75;
    padding-left: 42.18vw;
  }
}
@media screen and (min-width: 1281px) {
  #director .imgWrap {
    padding-top: 48px;
    padding-left: 540px;
  }
}
@media screen and (min-width: 1441px) {
  #director .imgWrap {
    padding-top: 3.33vw;
    padding-left: 37.5vw;
  }
}
@media screen and (min-width: 881px) {
  #director .h2Box h2:before {
    width: 56.71vw;
    height: 0.85vw;
    left: -58.12vw;
  }
}
@media screen and (min-width: 1281px) {
  #director .h2Box h2:before {
    width: 726px;
    height: 11px;
    left: -744px;
  }
}
@media screen and (min-width: 1441px) {
  #director .h2Box h2:before {
    width: 50.41vw;
    height: 0.76vw;
    left: -51.66vw;
  }
}
#director #keireki {
  display: flex;
  flex-wrap: wrap;
}
@media screen and (max-width: 880px) {
  #director #keireki {
    display: block;
  }
}
#director #keireki section {
  width: 48%;
}
@media screen and (max-width: 880px) {
  #director #keireki section {
    width: 100%;
  }
}
#director #keireki section.wrap01 {
  margin-right: 4%;
}
@media screen and (max-width: 880px) {
  #director #keireki section.wrap01 {
    margin-right: 0;
  }
}
#director #keireki th {
  width: 7em;
  color: #00B3CD;
}
#director #keireki th span {
  display: block;
  width: 6em;
  text-align: center;
}

@media screen and (max-width: 880px) {
  html.webp #director h3:before {
    background-image: url("../img/profile/pic_yahata01_sp.webp");
  }
}

@media screen and (max-width: 880px) {
  html.no-webp #director h3:before {
    background-image: url("../img/profile/pic_yahata01_sp.jpg");
  }
}

html.webp #director .imgWrap:before {
  background-image: url("../img/profile/pic_yahata01.webp");
}

html.no-webp #director .imgWrap:before {
  background-image: url("../img/profile/pic_yahata01.jpg");
}

/* !doctor
---------------------------------------------------------- */
#doctor {
  margin-top: 21.27vw;
}
@media screen and (min-width: 881px) {
  #doctor {
    margin-top: 6.25vw;
  }
}
@media screen and (min-width: 1281px) {
  #doctor {
    margin-top: 80px;
  }
}
@media screen and (min-width: 1441px) {
  #doctor {
    margin-top: 5.55vw;
  }
}
#doctor .imgWrap {
  position: relative;
}
@media screen and (min-width: 881px) {
  #doctor .imgWrap {
    padding-left: 42.18vw;
  }
}
@media screen and (min-width: 1281px) {
  #doctor .imgWrap {
    padding-left: 540px;
  }
}
@media screen and (min-width: 1441px) {
  #doctor .imgWrap {
    padding-left: 37.5vw;
  }
}

/* !staff
---------------------------------------------------------- */
#staff {
  margin-top: 21.27vw;
}
@media screen and (min-width: 881px) {
  #staff {
    margin-top: 6.25vw;
  }
}
@media screen and (min-width: 1281px) {
  #staff {
    margin-top: 80px;
  }
}
@media screen and (min-width: 1441px) {
  #staff {
    margin-top: 5.55vw;
  }
}
#staff .listWrap li {
  font-size: 4.25vw;
  font-weight: 400;
}
@media screen and (min-width: 881px) {
  #staff .listWrap li {
    font-size: 1.4vw;
  }
}
@media screen and (min-width: 1281px) {
  #staff .listWrap li {
    font-size: 18px;
  }
}
@media screen and (min-width: 1441px) {
  #staff .listWrap li {
    font-size: 1.25vw;
  }
}
#staff .listWrap li img {
  display: block;
  width: 100%;
  margin-bottom: 0.5em;
  border: 1px solid #DAD4A4;
}
#staff .listWrap li span {
  display: inline-block;
  margin-right: 1em;
  color: #00B3CD;
  font-size: 0.9em;
}
@media screen and (max-width: 880px) {
  #staff .listWrap li {
    width: 47.8%;
    margin: 0 auto 8.51vw;
    text-align: center;
  }
  #staff .listWrap li span {
    display: block;
    margin-right: 0;
    margin-bottom: 0.2em;
  }
}
@media screen and (min-width: 881px) {
  #staff .listWrap li {
    width: 32%;
    margin-bottom: 3.75vw;
  }
}
@media screen and (min-width: 1281px) {
  #staff .listWrap li {
    width: 324px;
    margin-bottom: 48px;
  }
}
@media screen and (min-width: 1441px) {
  #staff .listWrap li {
    width: 22.3vw;
    margin-bottom: 3.33vw;
  }
}
#staff .wrap {
  display: flex;
  flex-wrap: wrap;
}
@media screen and (max-width: 880px) {
  #staff .wrap {
    display: block;
  }
}
#staff .wrap .staffBox {
  margin-bottom: 9.04vw;
  padding: 8.51vw 7.97vw;
  border: 1px solid #DAD4A4;
}
@media screen and (min-width: 881px) {
  #staff .wrap .staffBox {
    width: 38.43vw;
    margin-bottom: 3.12vw;
    margin-left: 3.12vw;
    padding: 3.12vw;
  }
}
@media screen and (min-width: 1281px) {
  #staff .wrap .staffBox {
    width: 492px;
    margin-bottom: 40px;
    margin-left: 40px;
    padding: 40px;
  }
}
@media screen and (min-width: 1441px) {
  #staff .wrap .staffBox {
    width: 34.16vw;
    margin-bottom: 2.77vw;
    margin-left: 2.77vw;
    padding: 2.77vw;
  }
}
#staff .wrap .staffBox:nth-of-type(2n + 1) {
  margin-left: 0;
}
#staff .wrap .staffBox h3 {
  margin-bottom: 4.25vw;
  font-size: 6.91vw;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-align: left;
}
@media screen and (min-width: 881px) {
  #staff .wrap .staffBox h3 {
    margin-bottom: 2.5vw;
    font-size: 2.5vw;
  }
}
@media screen and (min-width: 1281px) {
  #staff .wrap .staffBox h3 {
    margin-bottom: 32px;
    font-size: 32px;
  }
}
@media screen and (min-width: 1441px) {
  #staff .wrap .staffBox h3 {
    margin-bottom: 2.22vw;
    font-size: 2.22vw;
  }
}
#staff .wrap .staffBox h3 span {
  display: block;
  font-size: 4.25vw;
  line-height: 2;
}
@media screen and (min-width: 881px) {
  #staff .wrap .staffBox h3 span {
    font-size: 1.4vw;
  }
}
@media screen and (min-width: 1281px) {
  #staff .wrap .staffBox h3 span {
    font-size: 18px;
  }
}
@media screen and (min-width: 1441px) {
  #staff .wrap .staffBox h3 span {
    font-size: 1.25vw;
  }
}
/*# sourceMappingURL=profile.css.map */