@charset "utf-8";
#map{
  width:100%;
  height: 500px;
  margin-top: 45px;
}
main{
  margin-bottom: 0;
  position: relative;
}

@media (max-width: 1280px){
.header-side-menu.type-02{
  display: none;
}
} 
@media (min-width: 1281px){ 
.header-side-menu.type-02{
  position: absolute;
  z-index: 30;
  right: 0;
  top: 0;
  height: 100%;
  width: 15%;
  min-width: 150px;
background: linear-gradient(168.55deg, rgba(250, 246, 246, 0) -4.46%, rgba(250, 246, 246, 0.360577) 21.16%, #FAF6F6 98.02%);
}
@scope (.header-side-menu.type-02) {
.bt_instagram{
align-items: center;
justify-content: center;
column-gap: 10px;
width: 90%;
margin: 15px auto;
}
.bt_instagram img{
  width: 30px;
}
.bt_instagram:hover{
  opacity: .5;
}
ul{
  width:65%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
align-content: flex-end;
  row-gap: 15px;
  margin:auto auto 0;
}
li{
  width: 100%;
}
li img{
  width: 100%;
  transform: .3s;
}
li:hover img{
opacity: .3;
}
}
}
  .main-img-wrap {
  margin-bottom: 0;
  position: relative;
}
.main_con{
  margin-top: 0px;
}
.main-img_con {
  width: 100%;
  overflow: hidden;
/*height: 85vh;
  min-height: 400px;
*/
}
.main-img_con{
position: relative;
  width: 100%;
  height: 120vh;
}
@media screen and (min-width: 768px) {
.main-img_con{
  height: 120vh;
}
}
@media screen and (max-width: 767px) {
.main-img_con{
  height: 100vh;
}
}
.div_mainimgwrap{
  width:100%;
  position: relative;
  background-size: cover;
  overflow: hidden;
    }
@scope (.main-img_con ) {
h1{
  z-index: 100;
  font-size: var(--body-font-size-24);
  position: absolute;
  text-align: right;
  line-height: 3rem;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 1);
}
@media screen and (min-width: 1281px) {
h1{
  right: 18%;
}
}
@media screen and (max-width: 1280px) {
h1{
  right: 10px;
}
}
@media screen and (min-width: 768px) {
h1{
  top: 50%;
  font-size: 2rem;
}
}
@media screen and (max-width: 767px) {
h1{
  top: 5%;
}
}
@media screen and (min-width: 768px) {
.top_swiper .slide{
  height: 120vh;
}
}
@media screen and (max-width: 767px) {
.top_swiper .slide{
  height: 85vh;
}
}
}
h2{
  text-align: center;
  font-size:var(--body-font-size-20);
}
#sec_about h2 span,#sec_treatmenu h3 span,#sec_information h3 span{
  font-size: var(--body-font-size-16);
  color:var(--text-color-linghtbrown);
  display: block;
}
h3 {
  font-size: var(--body-font-size-18);
}
/*div_post-news-topics*/
.div_important-notices{
  background:var(--con-back-color);
  padding: 10px 30px 30px;
position: absolute;
left: 0;
bottom: 0;
z-index: 15;
}
@media screen and (min-width: 768px) {
.div_important-notices{
position: absolute;
width: 75%;
}
}
@media screen and (max-width: 767px) {
.div_important-notices{
      position: absolute;
    bottom: 0;
    z-index: 30;
    width: 100%;
}
}
@scope (.div_important-notices) {
  h2{
  text-align:left;
  color:var(--text-color-linghtbrown);

  margin-bottom: 15px;
}
  ul{
    counter-reset: number 0; 
    margin-left: 15px;
  }
  li {
  counter-increment: number 1;      /* number カウンタの増加数をセット */
  margin:3px 0 15px 0px;
  padding-left:50px ;
  opacity: 0;
  position: relative; /* notice-dot の基準 */
  }
  li.swiper-slide-active {
  animation: fadeIn 1.5s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
 
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
  li:after{
  content: counter(number) " "; 
  position: absolute;
  width: 25px;
  height: 23px;
  transform:var(--transform-50-X);
  top:8px;
  left:20px;
  color: #fff;
  }
  li:before{
    content: '';
    display: block;
    position: absolute;
    left:10px;
  transform:var(--transform-50-X);
  top: 5px;
    width: 30px;
    height: 30px; 
    background: var(--line-color-linghtbrown);
    border-radius: 15px;
  }
  li.hidden {
    opacity: 0;
}
}

#sec_treatmenu h2,#sec_information h2{
  display: none;
}
/*about*/
#sec_about {
  background: var(--con-back-color);
  padding: 45px 0;
}
@media screen and (max-width: 767px) {
#sec_about {
  margin-bottom: 0;
}
}
@media screen and (min-width: 768px) {
#art_about{
 justify-items: center;
 align-items: center;
}
}
@scope (#art_about) {
  h3{
  font-size: var(--body-font-size-24);
  }
  .div_con{
  display:grid;
  row-gap:30px;
  order: 2;
  }
  .img_con{
order: 1;
  }
@media screen and (min-width: 768px) {
  .div_con{
    width: 45%;
    margin-left: 5%;
  }
  .img_con{
width: 50%;
  }
}
@media screen and (max-width: 767px) {
#div_gallerywrap {
      width: 100%;
      max-width: 500px;
    margin: 0 auto 30px;
 }
}
  .about-faci.min{
margin: -150px 0 0 auto;
 width: clamp(130px, 103.684px + 10.526vw, 230px);
   }
  .about-faci ul{
    margin-bottom: 0;
  }
  .about-faci li.min{
    position: relative;
  }
  .about-faci.min li{
    padding-top:10px;
  }
  .about-faci:not(.min) li{
    padding-top: 25px;
  }
  .about-faci li:before{
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0px;
    left: 0;
    z-index: 10;
    border: solid 1px var(--line-color-blackbrown);
  }
  .about-faci:not(.min) li:before{
    height: calc(100% - 10px);
    border-radius: 40% / 50%;
    animation: move-main 8s linear infinite;
  }
  .about-faci.min li:before{
    width: clamp(130px, 103.684px + 10.526vw, 230px);
    height: clamp(130px, 103.684px + 10.526vw, 230px);
    border-radius: 100%;
    animation: move-min 8s linear infinite;
  }
    .about-faci:not(.min) li .img_con{
    border-radius: 40% / 50%;
    width: 100%;
    height: clamp(180px, 136.579px + 17.368vw, 345px);
    overflow: hidden;
    animation: move-main 8s linear infinite;
  }
  .about-faci.min li .img_con{
    border-radius: 100%;
    width: clamp(130px, 103.684px + 10.526vw, 230px);
    height: clamp(130px, 103.684px + 10.526vw, 230px);
    overflow: hidden;
    animation: move-min 8s linear infinite;
  }
  .about-faci li .img_con img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  }
  
@keyframes move-main {
  50% {
    border-radius: 40% 55% 51% 45% / 43% 50% 48% 55%;
  }

  75% {
    border-radius: 52% 48% 45% 53% / 42% 55% 43% 50%;
  }
}
@keyframes move-min {
  50% {
    border-radius: 100% 70% 100% 70% / 72% 60% 79% 60%;
  }

  75% {
    border-radius: 60% 80% 90% 60% / 100% 70% 100% 70%;
  }
}
}
/*about*/
/*treatmenu*/

#sec_treatmenu{
  padding: 60px 0 0;
  margin-bottom: 0;
  border-bottom: solid 1px var(--line-color-blackbrown);
}
@scope (#sec_treatmenu) {
.img_con img{
  border-radius: 30px;
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center center;
  object-position: center center;
    }
.ul_menu{
display: grid;
grid-template-columns: repeat(2, 1fr); 
gap: 15px 30px;
}
@media screen and (max-width: 1080px) {
.ul_menu{
display: grid;
grid-template-columns:auto;
gap: 15px 30px;
}   
}
.ul_menu > li a{
width: 100%;
min-width: auto;
}
article{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px 30px;
  }

.div_con p{
margin-bottom:0;
}
.div_treatmenu_wrap.type-01{
  border-bottom: solid 1px var(--line-color-blackbrown);
  padding-bottom: clamp(60px, 32.727px + 7.273vw, 120px);
}
@scope (.div_treatmenu_wrap.type-01) {
.div_con{
  display:grid;
  row-gap:30px;
}
}
@scope (#art_treatmenu-gynecology) {
@media screen and (min-width: 768px) {
.img_con{
  order: 2;
}
.div_con{
  order: 1;
}
}
}
#art_date-download{
  background: var(--con-back-color);
  border: solid 1px var(--line-color-blackbrown);
  row-gap:30px;
  padding: 2em;
  place-items: center;
  width:calc(100% - 5%);
}
@media screen and (max-width: 767px) {
  #art_date-download{
    margin-bottom: 0px;
  }
}

@scope (#art_date-download) {
  h3,p{
grid-column: 1 / 3;
  }
}
@media screen and (max-width: 767px) {
.ul_menu{
grid-template-columns:none;
}
article{
  flex-direction: column;
  display: flex;
  row-gap:var(--row-gap-30);
}
}
.div_treatmenu_wrap.type-02{
max-width:var(--max-width-1200);
margin: auto;
}
@media screen and (min-width: 768px) {
.div_treatmenu_wrap.type-02{
  display:grid;
  grid-template-columns:  repeat(auto-fit, minmax(0, 1fr));
}
}

@scope (.div_treatmenu_wrap.type-02){
article{
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 30px 30px;
}
#art_treatmenu-beauty,#art_treatmenu-class{
  padding: 5% 2.5%;
  margin: 0;
}

@media screen and (min-width: 768px) {
#art_treatmenu-beauty{
  border-right: solid 1px var(--line-color-blackbrown);
}
}
@media screen and (max-width: 767px) {
  #art_treatmenu-beauty{
  border-bottom: solid 1px var(--line-color-blackbrown);
}
}
h3{
  margin-bottom: 30px;
}
.img_con{
  min-height: 280px;
 grid-area: 1 / 1 / 3 / 3;
}
.div_con{
  grid-area: 1 / 3 / 3 / 6;
}
.ul_menu{
 grid-area: 3 / 1 / 4 / 6;
}
@media screen and (max-width: 1080px) {
.img_con{
  min-height: 280px;
 grid-area: 1 / 1 / 1 / 6;
}
.div_con{
  grid-area: 2 / 1 / 3 / 6;
}
}
}
/*@media screen and (max-width: 767px) {
article{
border-top: solid 1px var(--line-color-blackbrown);
}
}*/

}


/*treatmenu*/
/*news*/
#sec_information{
  background: var(--con-back-color);
  padding: clamp(45px, 38.182px + 1.818vw, 60px) 0 calc(45px + 20vh);
  margin-bottom: 0;
}
@scope (#sec_information) {
.div_information_wrap{
max-width:var(--max-width-1200);
margin:0 auto;
row-gap:var(--row-gap-30);
}
@media screen and (min-width: 1081px) {
.div_information_wrap{
display:grid;
grid-template-columns:  repeat(auto-fit, minmax(0, 1fr));
}
}
@media screen and (max-width: 1080px) {

}
h3,dl{
  margin-bottom: 30px;
}
@scope (#art_news) {
dl{
  display: grid;
  gap:16px 20px;
  grid-template-columns:120px 1fr;
}
}
}
/*news-end*/

@media screen and (max-width: 767px) {
  .main-img_con .main-img_jpg{
    width:100%;
  }
  .main-img_con .main-img_jpg img{ 
    object-fit: cover;
    width:100%;
  }
}
@media screen and (min-width: 768px) {

.main-img_con .main-text{
      position: absolute;
      bottom: 60px;
      top: 50%;
      }
.main-img_con .main-img_jpg{
        height: 100vh;
}
@media screen and (max-width: 1080px) {
}
.main-img_con .main-img_jpg img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
}

}