/* header overwrite
------------------------------------ */
#header > header {
  background: none;
  justify-content: flex-end;
  box-shadow: none;
  padding: 0 3.5vw 2rem;
}
#header > header .logo {
  width: 16.5vw;
  max-width: 238px;
  width: clamp(180px, 16.5vw, 238px);
  padding: 15px;
  background: #FFF;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  border-radius: 0 0 5px 5px;
  position: absolute;
  left: 3.5vw;
  top: 0;
  z-index: 2;
}
@media screen and (max-width: 768px) {
  #header > header {
    justify-content: space-between;
  }
  #header > header .logo {
    position: relative;
    left: auto;
    max-width: 120px;
    padding: 10px;
  }
}

/* component
------------------------------------ */
.t_htype01 {
  text-align: center;
  color: #51443D;
  margin-bottom: 3rem;
  text-align: center;
}
.t_htype01 p {
  font-family: "Century Gothic", "Futura", serif;
  font-size: clamp(2.4rem, 3.3vw, 3.3vw);
  width: fit-content;
  margin: 0 auto 0.5rem;
  padding-bottom: 0.5rem;
  line-height: 1;
  border-bottom: 1px solid #51443D;
}
.t_htype01 h2 {
  font-size: clamp(3rem, 2.5vw, 2.5vw);
  line-height: 1.2;
}

.more a {
  display: block flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 2rem;
  width: fit-content;
  background: #51443D;
  color: #FFF;
  font-family: "Century Gothic", "Futura", serif;
  font-size: clamp(1.4rem, 1.1vw, 1.1vw);
  position: relative;
  line-height: 1;
  margin: 0 auto;
}
.more a::after {
  content: "";
  width: 8px;
  aspect-ratio: 1/1;
  border-top: 1px solid #FFF;
  border-right: 1px solid #FFF;
  display: block;
  transform: rotate(45deg);
}
.more a:hover {
  background: #EB6100;
}

/* top_vi
------------------------------------ */
#topvi {
  margin-bottom: 10rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  background: #F8F1EA;
}
#topvi .mv {
  position: relative;
}
#topvi .mv .slick {
  position: relative;
  width: 100vw;
  line-height: 1;
}
#topvi .mv .slick li img {
  display: block;
  vertical-align: bottom;
}
#topvi .mv .slick:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(112, 88, 64, 0.4);
  position: absolute;
  left: 0;
  top: 0;
}
#topvi .mv .floatingtext {
  position: absolute;
  left: 5.6vw;
  top: 9vw;
}
#topvi .mv .floatingtext li {
  font-family: "Zen Old Mincho", serif;
  font-size: clamp(2rem, 2.1vw, 2.1vw);
  line-height: 1;
  margin-bottom: 2.4vw;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  color: #FFF;
  opacity: 0;
  transition: opacity 3s ease;
}
#topvi .mv .floatingtext li span {
  font-family: "Tangerine", cursive;
  display: block;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
}
#topvi .mv .floatingtext li:last-child {
  margin-top: 3.5vw;
  font-size: clamp(2rem, 3.5vw, 3.5vw);
}
#topvi .mv .floatingtext li:last-child span {
  font-size: clamp(3.6rem, 3.3vw, 3.3vw);
}
#topvi .mv .floatingtext li.show {
  opacity: 1;
}
@keyframes textfadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
#topvi .pagelead {
  padding: 0.5rem 1rem 0.5rem 5.6vw;
}
#topvi .pagelead p {
  font-size: clamp(1rem, 1.1vw, 1.1vw);
  margin-bottom: 0;
}
#topvi .clinicFeature {
  width: fit-content;
  display: grid;
  grid-template-columns: repeat(4, max-content);
  padding: 0.5rem 5.6vw 0.5rem 1rem;
  gap: 0.7vw;
}
#topvi .clinicFeature li {
  position: relative;
  display: flex;
  font-size: clamp(1rem, 1.1vw, 1.1vw);
  align-items: center;
  gap: 1rem;
}
#topvi .clinicFeature li:before {
  content: "";
  width: 2.1vw;
  aspect-ratio: 1;
  display: block;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: top;
  background: #51443D;
}
#topvi .clinicFeature li.fea01:before {
  mask-image: url(/lib/img/cmn/icon_emergency.webp);
}
#topvi .clinicFeature li.fea02:before {
  mask-image: url(/lib/img/cmn/icon_insurance.webp);
}
#topvi .clinicFeature li.fea03:before {
  mask-image: url(/lib/img/cmn/icon_time20.webp);
}
#topvi .clinicFeature li.fea04:before {
  mask-image: url(/lib/img/cmn/icon_car.webp);
}
@media screen and (max-width: 1024px) {
  #topvi .pagelead {
    padding: 0.5rem 1rem 0.5rem 2.8vw;
  }
  #topvi .clinicFeature {
    padding: 0.5rem 2.8vw 0.5rem 1rem;
  }
}
@media screen and (max-width: 768px) {
  #topvi {
    margin-bottom: 5rem;
    display: grid;
    grid-template-columns: 1fr;
  }
  #topvi .pagelead {
    order: 1;
  }
  #topvi .pagelead p {
    font-size: clamp(1.2rem, 3.2vw, 3.2vw);
  }
  #topvi .mv {
    order: 2;
  }
  #topvi .mv .floatingtext {
    position: absolute;
    left: 5.6vw;
    top: 10.4vw;
  }
  #topvi .mv .floatingtext li {
    margin-bottom: 6.7vw;
  }
  #topvi .mv .floatingtext li span {
    font-family: "Tangerine", cursive;
    display: block;
    letter-spacing: 0.1em;
    text-indent: 0.1em;
  }
  #topvi .mv .floatingtext li:last-child {
    margin-top: 10.7vw;
  }
  #topvi .mv .floatingtext li:last-child span {
    line-height: 0.8;
    font-size: clamp(3rem, 8vw, 8vw);
    margin-bottom: 4vw;
  }
  #topvi .mv .floatingtext li.show {
    opacity: 1;
  }
  #topvi .viFeature {
    order: 3;
  }
  #topvi .viFeature .clinicFeature {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 1rem 0.5rem 1rem;
    gap: 0.7vw;
  }
  #topvi .viFeature .clinicFeature li {
    position: relative;
    display: grid;
    text-align: center;
    grid-template-columns: 1fr;
    font-size: clamp(1rem, 2.7vw, 2.7vw);
    align-items: center;
    gap: 0.5rem;
  }
  #topvi .viFeature .clinicFeature li:before {
    content: "";
    width: 5.9vw;
    aspect-ratio: 1;
    display: block;
    margin: 0 auto;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: top;
    background: #51443D;
  }
  #topvi .viFeature .clinicFeature li.fea01:before {
    mask-image: url(/lib/img/cmn/icon_emergency.webp);
  }
  #topvi .viFeature .clinicFeature li.fea02:before {
    mask-image: url(/lib/img/cmn/icon_insurance.webp);
  }
  #topvi .viFeature .clinicFeature li.fea03:before {
    mask-image: url(/lib/img/cmn/icon_time20.webp);
  }
  #topvi .viFeature .clinicFeature li.fea04:before {
    mask-image: url(/lib/img/cmn/icon_car.webp);
  }
}

/* news_time
------------------------------------ */
.news_time {
  padding: 0 5.6vw;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 6.9vw;
}
.news_time .data {
  position: sticky;
  top: 10rem;
  width: 48%;
  padding-bottom: 6rem;
}
.news_time .data h2 {
  font-size: clamp(2.4rem, 3.3vw, 3.3vw);
  font-family: "Century Gothic", "Futura", serif;
  width: fit-content;
  border-bottom: 1px solid #51443D;
  line-height: 1;
  margin-bottom: 3rem;
}
.news_time .data hgroup {
  display: flex;
  align-items: flex-end;
  gap: 2.8vw;
  margin-bottom: 3rem;
}
.news_time .data hgroup h2 {
  margin-bottom: 0;
}
.news_time .data hgroup .more a {
  margin: 2rem auto 0 0;
}
.news_time .data p {
  margin-bottom: 3rem;
}
.news_time .image {
  width: 45%;
}
@media screen and (max-width: 1024px) {
  .news_time .data {
    width: 55%;
    position: relative;
    top: 0;
  }
  .news_time .image {
    width: 40%;
    position: sticky;
    top: 0;
  }
}
@media screen and (max-width: 768px) {
  .news_time {
    display: block;
    margin-bottom: 10rem;
  }
  .news_time .data {
    width: 100%;
    padding-bottom: 3rem;
  }
  .news_time .image {
    width: 60%;
    margin: 0 0 0 auto;
  }
}

/* news
------------------------------------ */
#news .newslist li {
  font-size: clamp(1.6rem, 1.3vw, 1.3vw);
}
#news .newslist li:not(:last-child) {
  margin-bottom: 3.5rem;
}
#news .newslist li dl dt {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  border-bottom: 1px dotted #51443D;
}
#news .newslist li dl dt span {
  font-size: clamp(1.4rem, 1.1vw, 1.1vw);
}
#news .newslist li dl dd {
  /*
  span {
   font-size: clp(1.2rem, 14);
   text-decoration: underline;
  }
   */
}
#news .newslist li dl dd a.directlink {
  text-decoration: underline;
}
#news .newslist li .kyoseiScheduleDatas {
  display: grid;
  grid-template-columns: max-content 1fr 1fr;
  font-size: clamp(1.2rem, 1.1vw, 1.1vw);
  margin: 1rem auto;
  gap: 2px;
}
#news .newslist li .kyoseiScheduleDatas dt {
  text-align: center;
  padding: 0.25rem 0.5rem;
  border-bottom: none;
  margin-bottom: 0;
  display: block;
}
#news .newslist li .kyoseiScheduleDatas dd {
  color: #51443D;
  padding: 0.25rem 0.5rem;
  text-align: center;
}
#news .newslist li .kyoseiScheduleDatas dd.fdoctor {
  background: #F4F4D2;
}
#news .newslist li .kyoseiScheduleDatas dd.mdoctor {
  background: #DDEBEA;
}
@media screen and (max-width: 768px) {
  #news .newslist li .kyoseiScheduleDatas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    font-size: clamp(1.2rem, 1vw, 1vw);
    gap: 2px;
  }
  #news .newslist li .kyoseiScheduleDatas dt {
    background: #C8B5A1;
    grid-column: 1/3;
    text-align: center;
  }
}

.kyoseiSchedule {
  width: 100%;
  font-size: clamp(1.2rem, 1vw, 1vw);
  margin-bottom: 1rem;
}
.kyoseiSchedule th, .kyoseiSchedule td {
  padding: 0.25rem 0.5rem 0.25rem 1rem;
  font-weight: normal;
  letter-spacing: 0em;
  text-indent: 0em;
}
.kyoseiSchedule thead {
  text-align: center;
}
.kyoseiSchedule thead th:nth-child(2) {
  background: #F4F4D2;
}
.kyoseiSchedule thead th:nth-child(3) {
  background: #DDEBEA;
}
.kyoseiSchedule tbody th {
  padding-right: 1rem;
}
.kyoseiSchedule tbody td {
  background: #DDEBEA;
}
.kyoseiSchedule tbody td:nth-of-type(1) {
  background: #F4F4D2;
}

/* time
------------------------------------ */
#time {
  margin-top: 5rem;
}

/* about
------------------------------------ */
#about {
  padding: 0 5.6vw 0;
}
#about .rayoutBox {
  display: flex;
  align-items: flex-start;
  gap: 4.2vw;
  margin-top: 6.9vw;
}
#about .rayoutBox .image {
  width: 41.7vw;
}
#about .rayoutBox .text {
  width: 38.2vw;
  position: sticky;
  top: 0;
  padding-bottom: 6rem;
}
#about .rayoutBox .text p {
  margin-bottom: 3rem;
}
#about .rayoutBox .text .more a {
  margin: 2rem auto 0 0;
}
@media screen and (max-width: 768px) {
  #about .rayoutBox {
    display: block;
  }
  #about .rayoutBox .image {
    width: 100%;
  }
  #about .rayoutBox .text {
    width: 100%;
    margin-top: 2rem;
    padding-bottom: 3rem;
  }
}

/* gallery
------------------------------------ */
#gallery {
  aspect-ratio: 1440/1170;
  position: relative;
  margin-bottom: 10rem;
}
#gallery ul li {
  position: absolute;
}
#gallery ul li.g01 {
  width: 35.1vw;
  top: 0;
  right: 16.7vw;
}
#gallery ul li.g02 {
  width: 31vw;
  top: 10.8vw;
  left: 6.9vw;
}
#gallery ul li.g03 {
  width: 28.8vw;
  top: 27.1vw;
  right: 0;
}
#gallery ul li.g04 {
  width: 29.9vw;
  top: 34vw;
  right: 36.5vw;
}
#gallery ul li.g05 {
  width: 28.5vw;
  bottom: 12.2vw;
  left: 0;
}
#gallery ul li.g06 {
  width: 33.3vw;
  bottom: 0;
  right: 16.7vw;
}
@media screen and (max-width: 768px) {
  #gallery {
    margin-bottom: 5rem;
  }
}

/* doctorsfile
------------------------------------ */
.doctorsfile {
  text-align: center;
  margin-bottom: 10rem;
  padding: 0 5.6vw 0 5.6vw;
}
@media screen and (max-width: 768px) {
  .doctorsfile {
    margin-bottom: 5rem;
    padding: 0 21.3vw;
  }
}

/* feature
------------------------------------ */
#feature {
  padding: 0 5.6vw 9rem 5.6vw;
}
#feature .rayoutBox {
  display: grid;
  grid-template-columns: 38.2vw 48.6vw;
  gap: 0 2.8vw;
  position: relative;
  margin-top: 6.9vw;
}
#feature .rayoutBox *[class^=feature] {
  width: 100%;
  margin-bottom: 1.5rem;
  grid-column: 1/2;
  grid-row: 1/2;
  opacity: 0;
}
#feature .rayoutBox *[class^=feature] p {
  font-size: clamp(1.6rem, 1.1vw, 1.1vw);
}
#feature .rayoutBox *[class^=feature] p.title {
  font-size: clamp(2rem, 1.7vw, 1.7vw);
  line-height: 1.3;
  font-weight: bold;
}
#feature .rayoutBox *[class^=feature] p.title span {
  font-family: "Century Gothic", "Futura", serif;
  font-size: clamp(2.4rem, 3.3vw, 3.3vw);
  display: inline-block;
  padding-right: 1rem;
}
#feature .rayoutBox .feature02 {
  grid-row: 2/3;
}
#feature .rayoutBox .feature03 {
  grid-row: 3/4;
}
#feature .rayoutBox .feature04 {
  grid-row: 4/5;
  margin-bottom: 0;
}
#feature .rayoutBox .feature04 .title {
  margin-bottom: 1rem;
}
#feature .rayoutBox *[class^=image] {
  width: 100%;
  grid-column: 2/3;
  grid-row: 1/span 4;
  text-align: right;
}
#feature .rayoutBox .image01,
#feature .rayoutBox .image02,
#feature .rayoutBox .image03,
#feature .rayoutBox .image04 {
  height: 0%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
  position: absolute;
  bottom: 0;
  left: 0;
}
#feature .rayoutBox .image01 {
  background-image: url(/lib/img/top/feature_01.webp);
  height: 100%;
}
#feature .rayoutBox .image02 {
  background-image: url(/lib/img/top/feature_02.webp);
}
#feature .rayoutBox .image03 {
  background-image: url(/lib/img/top/feature_03.webp);
}
#feature .rayoutBox .image04 {
  background-image: url(/lib/img/top/feature_04.webp);
}
#feature.active .rayoutBox .feature01,
#feature.active .rayoutBox .feature02,
#feature.active .rayoutBox .feature03 {
  color: #545a6d;
}
@media screen and (max-width: 768px) {
  #feature {
    padding: 0 5.6vw 9rem;
  }
  #feature .rayoutBox {
    display: block;
  }
  #feature .rayoutBox *[class^=feature] {
    width: auto;
    margin-bottom: 2.5rem;
  }
  #feature .rayoutBox *[class^=image] {
    width: auto;
    text-align: left;
    margin-bottom: 3rem;
  }
  #feature .rayoutBox .image01,
  #feature .rayoutBox .image02,
  #feature .rayoutBox .image03,
  #feature .rayoutBox .image04 {
    aspect-ratio: 750/500;
    height: auto;
    position: static;
  }
}

/* top_ortho
------------------------------------ */
#top_ortho {
  padding: 9rem 5.6vw;
  margin-bottom: 10rem;
  position: relative;
  background: #F8F1EA;
}
#top_ortho::before {
  content: "";
  position: absolute;
  width: 100vw;
  height: 3rem;
  left: 0;
  top: 0;
  background: #E5DC8F;
  box-shadow: 0 3rem 0 #CED9D7;
}
#top_ortho::after {
  content: "";
  position: absolute;
  width: 100vw;
  height: 3rem;
  left: 0;
  bottom: 0;
  background: #CED9D7;
  box-shadow: 0 3rem 0 #E5DC8F;
}
#top_ortho .lead {
  font-size: clamp(1.6rem, 1.7vw, 1.7vw);
  text-align: center;
  margin-bottom: 3rem;
}
#top_ortho .rayoutBox {
  margin-top: 5rem;
  display: flex;
  justify-content: space-between;
}
#top_ortho .rayoutBox > div {
  width: 45%;
}
#top_ortho .rayoutBox .boxL .more a {
  margin: 2rem auto 0 0;
}
#top_ortho .rayoutBox .boxL .photo {
  margin: 3rem 0 0;
}
#top_ortho .rayoutBox .boxR .photo {
  margin: 0 0 3rem;
}
#top_ortho .rayoutBox .boxR dl dt {
  font-size: clamp(2rem, 2.1vw, 2.1vw);
  margin-bottom: 1rem;
}
#top_ortho .rayoutBox .boxR dl dd {
  font-size: clamp(1.6rem, 1.3vw, 1.3vw);
}
@media screen and (max-width: 768px) {
  #top_ortho .rayoutBox {
    display: block;
  }
  #top_ortho .rayoutBox > div {
    width: 100%;
  }
  #top_ortho .rayoutBox .boxL .photo {
    width: 80%;
  }
  #top_ortho .rayoutBox .boxR .photo {
    width: 80%;
    margin: 0 0 3rem auto;
  }
}

/* top_access
------------------------------------ */
#treatment {
  padding: 0 5.6vw 0;
  margin-bottom: 10rem;
}
#treatment .lead {
  font-size: clamp(1.6rem, 1.3vw, 1.3vw);
  text-align: center;
}
#treatment .more {
  margin-top: 3rem;
}
#treatment .treatmentList {
  padding: 0 4.2vw;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4.2vw;
  margin-top: 5rem;
}
#treatment .treatmentList li a {
  display: grid;
  grid-template-columns: 6.9vw auto;
  gap: 1vw;
}
#treatment .treatmentList li a .icon {
  border: 1px solid #C8B5A1;
  border-radius: 10px;
  aspect-ratio: 1/1;
}
#treatment .treatmentList li a .icon img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: contain;
}
#treatment .treatmentList li a dl dt {
  font-size: clamp(1.4rem, 1.4vw, 1.4vw);
  padding-bottom: 1rem;
  border-bottom: 1px solid #51443D;
  position: relative;
}
#treatment .treatmentList li a dl dt:before {
  background: #C8B5A1;
  content: "";
  width: 100%;
  height: 1px;
  position: absolute;
  left: 0;
  bottom: -1px;
  transform-origin: left top;
  transform: scale(0, 1);
  transition: transform 0.3s;
}
#treatment .treatmentList li a dl dd {
  font-size: clamp(2rem, 2.2vw, 2.2vw);
}
#treatment .treatmentList li a:hover .icon {
  transition: 0.3s;
  border: 1px solid #51443D;
  background: #FFF;
  background: #FFF;
}
#treatment .treatmentList li a:hover dt::before {
  transition: 0.3s;
  transform-origin: left top;
  transform: scale(1, 1);
}
@media screen and (max-width: 768px) {
  #treatment .treatmentList {
    padding: 0;
    grid-template-columns: 1fr;
  }
  #treatment .treatmentList li a {
    display: grid;
    grid-template-columns: 16vw auto;
    gap: 4vw;
  }
  #treatment .treatmentList li a dl dt {
    font-size: clamp(1.4rem, 1.4vw, 1.4vw);
    padding-bottom: 0.5rem;
  }
  #treatment .treatmentList li a dl dd {
    font-size: clamp(2rem, 2.2vw, 2.2vw);
  }
}

/* top_access
------------------------------------ */
#top_access {
  padding: 0 5.6vw 10rem;
}
#top_access .lead {
  font-size: clamp(1.6rem, 1.7vw, 1.7vw);
  text-align: center;
}
#top_access .more {
  margin-top: 3rem;
}
#top_access .rayoutBox {
  display: flex;
  justify-content: center;
  gap: 4.9vw;
  margin-top: 5rem;
}
#top_access .rayoutBox .photo {
  width: 30.6vw;
}
#top_access .rayoutBox .photo ul li {
  margin-top: 2rem;
}
#top_access .rayoutBox .map {
  width: 45.8vw;
}
@media screen and (max-width: 768px) {
  #top_access .rayoutBox {
    display: block;
    gap: 4.9vw;
    margin-top: 5rem;
  }
  #top_access .rayoutBox .photo {
    width: 100%;
  }
  #top_access .rayoutBox .photo ul {
    display: flex;
    justify-content: space-between;
  }
  #top_access .rayoutBox .photo ul li {
    width: 48%;
    margin: 0 0 3rem;
  }
  #top_access .rayoutBox .map {
    width: 100%;
  }
}

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