@charset "UTF-8";

#header {
  position: absolute;
  z-index: 100;
  left: 0;
  top: 0;
  width: 100%;
}

/* ===================================
色設定
=================================== */
/* ===================================
common
=================================== */
.en,
.doctor_sec04_Box_list dl dt {
  font-family: var(--font1);
}

body {
  color: var(--color1);
  background-color: var(--bgcolor1);
  font-family: var(--font1);
}

.cover,
.online_sec01 .flex .left img,
.access_list li .route_img img,
.doctor_sec01 .flex .left img,
.topic_sec .flex .left img,
.clinic_sec01 .flex .left img,
.surgery_detail02 .surgery_detail02_imgWrap li img,
.surgery_detail02 .surgery_box02_img li img,
.dermatology-contents .dermatology_img {
  -o-object-fit: cover;
  object-fit: cover;
  font-family: var(--font1);
  /*IE対策*/
}

.bg_navy,
.search_area .acc_content {
  background-color: var(--bgcolor2);
}

.menuWrap .tab_area .tab,
.menuWrap .tab_area .tab.js_active,
.menuWrap .ham_tab_area .tab.js_active {
  color: #43434b;
  border-bottom: 3px solid var(--bgcolor3);
  padding: min(100vw / 750 * 20, 20px);
  height: auto;
  line-height: 1;
}

.menuWrap .tab_area .tab.js_active,
.menuWrap .ham_tab_area .tab.js_active {
  color: var(--bgcolor3);
}

/* ===================================
TOPページ
=================================== */
body.page-front .button {
  min-width: min(100vw / 750 * 400, 400px);
  font-size: min(32rem * 1.414 + 9.79px, 32px);
  line-height: 1;
  border-radius: 1000px;
  padding: min(100vw / 750 * 12, 12px) min(100vw / 750 * 24, 24px);
  border: min(100vw / 750 * 2, 2px) solid;
  margin: auto;
  display: block;
  text-align: center;
  width: fit-content;
}

body.page-front .button2 {
  text-align: center;
  background: url(../img/top2/icon_arrow.svg) right 0px center/
    min(100vw / 750 * 24, 24px) auto no-repeat;
  font-size: min(16rem * 1.414 + 9.79px, 16px);
  padding-right: min(100vw / 750 * 44, 44px);
  display: block;
  width: fit-content;
  margin-inline: auto;
  color: var(--bgcolor3);
}

/*============================
#fv
============================*/
section#fv.fv {
}

section#fv.fv div.fv__container.container {
  position: relative;
  width: 100%;
  max-width: none;
}

section#fv.fv div.fv__container.container div.fv__h1 {
  position: absolute;
  top: 50%;
  left: 0%;
  color: #fff;
  z-index: 10;
  transform: translateY(-50%);
  text-align: center;
  width: 100%;
  padding: min(100vw / 750 * 48, 48px);
}

section#fv.fv div.fv__container.container div.fv__h1 .h1__title {
  font-size: min(100vw / 1366 * 104, 104px);
  font-weight: bold;
  line-height: calc(124.8 / 104);
  margin-bottom: min(100vw / 750 * 48, 48px);
}

section#fv.fv div.fv__container.container div.fv__h1 div.h1__sub {
  font-size: min(32rem * 1.414 + 9.79px, 32px);
  letter-spacing: 0.05em;
}

section#fv.fv div.fv__container.container div.fv__body {
}

@media screen and (max-width: 1024px) {
  section#fv.fv div.fv__container.container div.fv__body figure.fv__img {
    height: 80vh;
  }
}

section#fv.fv div.fv__container.container div.fv__body figure.fv__img img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

html:has(body.page-front) {
  font-size: min(calc(100vw / 1366), 1px);
}

body.page-front {
  font-size: min(16rem * 1.414 + 9.79px, 16px);
}

body.page-front h2 {
  font-size: min(56rem * 1.414 + 9.79px, 56px);
  padding: min(100vw / 750 * 120, 120px) 0 min(100vw / 750 * 96, 96px);
  text-align: center;
  font-weight: normal;
  letter-spacing: calc(0.1em);
}

body.page-front .information__text h2 {
  padding: 0;
  letter-spacing: normal;
}

body.page-front .container {
  width: calc(100% - min(100vw / 750 * 96, 96px));
  max-width: 1080px;
  margin-inline: auto;
}

/*============================
#about
============================*/
section#about.about {
  padding-bottom: min(100vw / 750 * 120, 120px);
}

section#about.about div.about__container.container {
}

section#about.about div.about__container.container h2 {
}

section#about.about div.about__container.container div.about__body {
  display: grid;
  grid-template-columns: 317fr 698fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: min(100vw / 750 * 64, 64px);
}

@media screen and (max-width: 1024px) {
  section#about.about div.about__container.container div.about__body {
    grid-template-columns: 1fr;
  }
}

section#about.about
  div.about__container.container
  div.about__body
  div.body__unit {
}

section#about.about
  div.about__container.container
  div.about__body
  div.body__unit--doctor {
  grid-row: 1 / 3;
  grid-column: 1 / 2;
}

section#about.about
  div.about__container.container
  div.about__body
  div.body__unit--clinic {
  grid-row: 1 / 2;
  grid-column: 2 / 3;
}

section#about.about
  div.about__container.container
  div.about__body
  div.body__unit--topic {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
}

@media screen and (max-width: 1024px) {
  section#about.about
    div.about__container.container
    div.about__body
    div.body__unit--doctor {
    grid-row: 1 / 2;
    grid-column: 1 / 2;
  }

  section#about.about
    div.about__container.container
    div.about__body
    div.body__unit--clinic {
    grid-row: 2 / 3;
    grid-column: 1 / 2;
  }

  section#about.about
    div.about__container.container
    div.about__body
    div.body__unit--topic {
    grid-row: 3 / 4;
    grid-column: 1 / 2;
  }

  section#about.about
    div.about__container.container
    div.about__body
    figure
    img {
    aspect-ratio: 1 / 0.5;
  }
}

section#about.about
  div.about__container.container
  div.about__body
  div.body__unit
  a {
  display: grid;
  height: 100%;
}

section#about.about
  div.about__container.container
  div.about__body
  div.body__unit
  a
  h3 {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
  z-index: 1;
  position: relative;
  padding: min(100vw / 750 * 24, 24px);
  font-size: min(24rem * 1.414 + 9.79px, 24px);
  color: #fff;
  align-self: end;
  text-shadow: 0 0 1em #554533, 0 0 0.2em #2d2215;
}

section#about.about
  div.about__container.container
  div.about__body
  div.body__unit
  a
  figure.body__img {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
  z-index: 0;
  position: relative;
}

section#about.about
  div.about__container.container
  div.about__body
  div.body__unit
  a
  figure.body__img
  img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

@media screen and (max-width: 1024px) {
  section#about.about
    div.about__container.container
    div.about__body
    div.body__unit:nth-of-type(1)
    a
    figure.body__img
    img {
    object-position: center 20%;
  }
}

/*============================
#column
============================*/
section.column {
  padding-bottom: min(100vw / 750 * 120, 120px);
  background: linear-gradient(
    to bottom,
    var(--bgcolor4) min(100vw / 750 * 352, 352px),
    var(--bgcolor1) 0
  );
}

section#case.column {
  background: none;
}

section.column div.container {
}

section.column div.container h2 {
}

section.column div.container div.column__body {
  display: grid;
  gap: min(100vw / 750 * 64, 64px);
  grid-template-columns: 1fr 1fr 1fr;
  margin-bottom: min(100vw / 750 * 96, 96px);
}

@media screen and (max-width: 813px) {
  section.column div.container div.column__body {
    gap: min(100vw / 750 * 24, 24px);
    grid-template-columns: 1fr 1fr;
  }
}

section.column div.container div.column__body div.body__unit {
  position: relative;
  display: contents;
}

@media not screen and (max-width: 813px) {
  section.column div.container div.column__body div.body__unit.pc {
    display: none;
  }
}

section.column div.container div.column__body div.body__unit a {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
}

section.column
  div.container
  div.column__body
  div.body__unit
  a
  figure.unit__img {
  grid-column: 1/ 2;
  grid-row: 1 / 3;
  aspect-ratio: 1 / 1;
}

section.column
  div.container
  div.column__body
  div.body__unit
  a
  figure.unit__img
  img {
  object-fit: cover;
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 0;
}

section.column div.container div.column__body div.body__unit a div.unit__title {
  grid-row: 2 / 3;
  grid-column: 1 / 2;
  background: var(--blackout);
  padding: min(100vw / 750 * 24, 24px) min(100vw / 750 * 40, 40px);
  color: #fff;
  font-size: min(16rem * 1.414 + 9.79px, 16px);
  line-height: 2;
  position: relative;
  z-index: 1;
  text-align: center;
  display: grid;
  align-items: center;
}

@media screen and (max-width: 813px) {
  section.column
    div.container
    div.column__body
    div.body__unit
    a
    div.unit__title {
    line-height: 1.5;
    font-size: min(12rem * 1.414 + 9.79px, 12px);
    padding: min(100vw / 750 * 16, 16px);
  }
}

/*============================
.instagram
============================*/
section.instagram.instagram--clinic {
  padding-bottom: min(100vw / 750 * 120, 120px);
  background: linear-gradient(to left, var(--bgcolor4) 50%, var(--bgcolor1) 0);
}

section.instagram.instagram--doctor {
  padding-bottom: min(100vw / 750 * 120, 120px);
  background: linear-gradient(to right, var(--bgcolor4) 50%, var(--bgcolor1) 0);
}

section.instagram.instagram--clinic div.instagram__container.container {
}

section.instagram.instagram--clinic div.instagram__container.container h2 {
}

section.instagram.instagram--clinic
  div.instagram__container.container
  div.instagram__body {
}

section.instagram.instagram--clinic
  div.instagram__container.container
  div.instagram__body
  a.button {
}

/*============================
#youtube
============================*/
section#youtube.youtube {
  background: url(../img/top2/youtube_back.jpg) center center/cover no-repeat;
  padding-bottom: min(100vw / 750 * 120, 120px);
}

section#youtube.youtube div.youtube__container.container {
  width: 100%;
  max-width: none;
}

section#youtube.youtube div.youtube__container.container h2 {
}

section#youtube.youtube div.youtube__container.container div.youtube__body {
  margin-bottom: min(100vw / 750 * 80, 80px);
}

section#youtube.youtube
  div.youtube__container.container
  div.youtube__body
  iframe {
  aspect-ratio: 540 / 303;
  width: 100%;
  height: 100%;
}

/*============================
#slider02
============================*/
section#youtube.youtube
  div.youtube__container.container
  div.youtube__body
  div#slider02.body__unit.slider02.js-slider {
}

section#youtube.youtube
  div.youtube__container.container
  div.youtube__body
  div#slider02.body__unit.slider02.js-slider
  div.slider__item {
  margin: 0 min(100vw / 750 * 32, 32px);
}

section#youtube.youtube
  div.youtube__container.container
  div.youtube__body
  div#slider02.body__unit.slider02.js-slider
  div.slider__item
  iframe {
}

/*============================
#calendar
============================*/
section#calendar.calendar {
  padding-bottom: min(100vw / 750 * 120, 120px);
}

section#calendar.calendar div.calendar__container.container {
}

section#calendar.calendar div.calendar__container.container div.calendar__body {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  align-items: center;
  justify-items: center;
}

section#calendar.calendar
  div.calendar__container.container
  div.calendar__body
  div.body__title {
}

section#calendar.calendar
  div.calendar__container.container
  div.calendar__body
  div.body__title
  h2 {
}

section#calendar.calendar
  div.calendar__container.container
  div.calendar__body
  div.calendar__name {
  font-weight: bold;
  font-size: 1.2em;
  text-align: center;
  border-bottom: 1px solid;
}

section#calendar.calendar
  div.calendar__container.container
  div.calendar__body
  div.body__calendar {
  background-color: var(--bgcolor2);
  font-weight: bold;
  padding: min(100vw / 750 * 32, 32px);
  max-width: 560px;
  margin-inline: auto;
  flex: 1 0 480px;
}

section#calendar.calendar
  div.calendar__container.container
  div.calendar__body
  div.body__calendar
  thead
  th {
  padding-bottom: min(100vw / 750 * 24, 24px);
}

.slider02 .slick-slide {
  transition: 0.3s;
}

.slider02 .slick-slide:not(.slick-current):not(.is-active-next) {
  opacity: 0.5;
  transition: 0.3s;
}

.slick-dots {
  display: flex;
  justify-content: center;
}

.slick-dots li {
  width: 10px;
  position: relative;
  width: 10px;
  height: 40px;
  margin: 0 15px;
  padding: 0;
  cursor: pointer;
}

.slick-dots li button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  font-size: 0;
  background-color: #c2b6a8;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.slick-dots li.slick-active button {
  opacity: 0.5;
}

.bnrttl {
  font-size: 50px;
  letter-spacing: 0.08em;
}

.top_img {
  margin-top: 100px;
  margin-bottom: 70px;
}

/* MENU
==============================　*/
.menuWrap .top_ttl {
}

.menuWrap .tab_area {
  justify-content: flex-start;
  margin-top: 10px;
}

.menuWrap .tab_area .tab {
  border: none;
  border-bottom: 3px solid #cdcdcd;
  background: var(--bgcolor2);
  flex-grow: 1;
}

.menuWrap .tab_area .tab.js_active,
.menuWrap .tab_area .tab:hover {
  background-color: var(--bgcolor2) !important;
}

.menuWrap .tab_area .tab + .tab {
  margin-left: 0;
}

.menuWrap .p-box {
  padding: 50px 50px;
}

@media screen and (max-width: 813px) {
  .menuWrap .p-box {
    padding: 30px 10px;
  }
}

.menuWrap .ico {
  color: var(--color1);
}

/*============================
#news
============================*/
section#news.news {
  background-color: var(--bgcolor2);
  padding-bottom: min(100vw / 750 * 120, 120px);
}

section#news.news div.news__container.container {
}

section#news.news div.news__container.container h2 {
}

section#news.news div.news__container.container div.news__body {
  margin-top: min(100vw / 750 * 80, 80px);
  margin-bottom: min(100vw / 750 * 80, 80px);
}

section#news.news div.news__container.container div.news__body ul {
}

section#news.news
  div.news__container.container
  div.news__body
  ul
  li.body__unit {
  border-bottom: 1px solid var(--color1);
}

section#news.news
  div.news__container.container
  div.news__body
  ul
  li.body__unit
  a {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: min(100vw / 750 * 16, 16px) min(100vw / 750 * 80, 80px);
  padding: min(100vw / 750 * 24, 24px) 0;
}

@media screen and (max-width: 813px) {
  section#news.news
    div.news__container.container
    div.news__body
    ul
    li.body__unit
    a {
    grid-template-columns: 1fr;
  }
}

section#news.news
  div.news__container.container
  div.news__body
  ul
  li.body__unit
  a
  div.unit__date {
}

section#news.news
  div.news__container.container
  div.news__body
  ul
  li.body__unit
  a
  div.unit__title {
}

section#news.news div.news__container.container a.button {
}

/*============================
#map
============================*/
section#map.map {
}

section#map.map div.map__container.container {
  width: 100%;
  max-width: none;
}

section#map.map div.map__container.container div.map__body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

@media screen and (max-width: 813px) {
  section#map.map div.map__container.container div.map__body {
    grid-template-columns: 1fr;
  }
}

section#map.map div.map__container.container div.map__body iframe {
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--color1) !important;
}

section#map.map
  div.map__container.container
  div.map__body
  div.body__information {
  display: grid;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color1);
  padding: min(100vw / 750 * 80, 80px);
}

section#map.map
  div.map__container.container
  div.map__body
  div.body__information
  div.text__logo {
  text-align: center;
  color: var(--color2);
  text-align: center;
  font-size: min(17rem * 1.414 + 9.79px, 17px);
  margin-bottom: min(100vw / 750 * 44, 44px);
}

section#map.map
  div.map__container.container
  div.map__body
  div.body__information
  div.text__logo
  a {
}

section#map.map
  div.map__container.container
  div.map__body
  div.body__information
  div.text__logo
  a
  img {
  margin-inline: auto;
  width: min(100vw / 750 * 172, 172px);
  margin-bottom: min(100vw / 750 * 12, 12px);
}

section#map.map
  div.map__container.container
  div.map__body
  div.body__information
  div.text__access {
  margin-bottom: min(100vw / 750 * 4, 4px);
}

section#map.map
  div.map__container.container
  div.map__body
  div.body__information
  div.text__tel {
  margin-bottom: min(100vw / 750 * 4, 4px);
}

section#map.map
  div.map__container.container
  div.map__body
  div.body__information
  img.icon {
  width: 1em;
  display: inline-block;
  margin-right: 0.5em;
  vertical-align: middle;
}

section#map.map
  div.map__container.container
  div.map__body
  div.body__information
  a.button {
  margin-top: min(100vw / 750 * 48, 48px);
  font-size: min(20rem * 1.414 + 9.79px, 20px);
}

/*============================
footer
============================*/
footer section.footer_menuWrap {
  margin-top: 0;
}

footer section.footer_menuWrap h2.menuttl {
  text-align: left;
  padding-top: min(100vw / 750 * 40, 40px);
}

div.fixedWrap ul.fixnav li a {
}
body.page-front-en::after {
  display: none;
}