@charset "utf-8";
/**************診療時間・アクセス　information********************/
#art_timeschedule .table02{
  margin-bottom: 30px;
}
#sec_access #map{
width: 100%;
height: 650px;
margin:60px 0 0;
}
#sec_access .p_adress{
  font-size: 24px;
  font-family: var(--min-font-family);  
  font-weight: 600;
text-align: center;
font-weight: 400;
}
#sec_access .p_koutu{
  text-align: center;
}
#sec_access .link03.map{
max-width: 350px;
width: 100%;
margin: auto;
}

@media screen and (max-width: 767px) {
#art_timeschedule .table02 th,#art_timeschedule .table02 td{
  padding: 3px;
}
#art_timeschedule .table02 .headline th{
  width: 12%;
}
#art_timeschedule .table02 th .th_time{
  font-size: .6em;
}
#art_timeschedule .table02 .headline th.no-bor{
width: 50px;
}
}
@media screen and (min-width: 768px) {
#sec_access #art_access{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
#sec_access #art_access .img_con{
max-width: 680px;
width: 50%;
}
#sec_access #art_access .div_con{
width: calc(95% - (45% + 30px));
margin-left: 30px;
}
}
/**************診療時間・アクセス　information********************/
/**************ご挨拶・医師紹介　greeting********************/
#sec_message #art_message p{
        font-size: var(--body-font-size-18);
        line-height: 2.5em;
    }
#sec_message #art_message .p_staffname{
    text-align: right;
    font-size: 25px;
}
#sec_message #art_message .prof{
font-size: 14px;
margin-right: 10px;
}
#sec_profdate .dl_prof,#sec_profdate .dl_doctorlist,#sec_profdate .dl_doctorlist{
display: flex;
flex-wrap: wrap;
}
#sec_profdate .dl_prof {
  margin-bottom: 30px;
}
#sec_profdate .dl_prof dt{
    width: 100px;
}
#sec_profdate .dl_prof dd{
    width: calc(100% - 100px);;
}

#sec_profdate .dl_doctorlist dd{
font-size: 18px;
font-family: var(--min-font-family);  
font-weight: 600;
}
#sec_profdate .dl_prof dt:not(:last-of-type),#sec_profdate .dl_prof dd:not(:last-of-type),#sec_profdate .ul_prof li:not(:last-of-type){
    margin-bottom: 15px;
}
@media screen and (max-width: 767px) {
    #sec_profdate .art_con .img_con{
        max-width: 250px;
        display: block;
        width: 60%;
        margin: 0 auto 30px;
    }
    #sec_profdate .dl_doctorlist dt,#sec_profdate .dl_doctorlist dd{
        width: 100%;
    }
    #sec_profdate .dl_doctorlist dd:not(:last-of-type){
        margin-bottom: 30px;
    }
}
@media screen and (min-width: 768px) {
#sec_profdate h3{
    width: 100%;
}
#sec_profdate .art_con .div_prof{
width: calc(95% - (200px + 60px));
margin-left: 60px;
}
#sec_profdate .art_con .img_con{
width: 200px;
}
#sec_profdate .dl_doctorlist dt:not(:last-of-type),#sec_profdate .dl_doctorlist dd:not(:last-of-type){
    margin-bottom: 30px;
}
#sec_profdate .dl_doctorlist dt{
    width: 500px;
}
#sec_profdate .dl_doctorlist dd{

width: calc(100% - 500px);
}
}
/**************ご挨拶・医師紹介　greeting********************/
/**************診療内容　treat********************/
/*無痛分娩・産後ケア・婦人科美容*/
 .sec_treatcon article:last-of-type,.sec_treatcon .div_h4:last-of-type{
  margin: 0 auto;
}
/*共通*/
.sec_treatcon{
  border: solid 1px #F7E8E5;
  max-width:var(--max-width-1200);
  margin: 0 auto 60px auto;
}
.sec_treatcon article{
  max-width: 100%;
  width: 100%;
  padding: 0;
}
.sec_treatcon .div_h2{
  margin-bottom: 30px;
}
.sec_treatcon h2{
  border-bottom: solid 1px #F7E8E5;
  padding: 0 10px 5px;
  margin-bottom: 3px;
  font-size: var(--h2-font-size);
  letter-spacing: 0.1em;
  font-family: var(--min-font-family);
  font-weight: var(--font-weight-medium);

}
.sec_treatcon .div_h2 .h2_option{
  text-align: right;
  font-size:var(--body-font-size-18);
  font-family: var(--min-font-family); 
  font-weight: var(--font-weight-medium);

}
.sec_treatcon h3{
  border: solid 1px #F7E8E5;
  padding:10px 10px;
  font-family: var(--min-font-family);  
   font-weight: var(--font-weight-medium);
  font-size: var(--h3-font-size);
  margin-bottom: 30px;
  background:linear-gradient(55deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 40%, rgba(250, 242, 232, 1) 100%);
}
.sec_treatcon .dl02 dt{
width: 100%;
}
.sec_treatcon　.flex_pc .div_con{
  margin-bottom: 15px;
}
#art_treat-maternity .flex_pc,#art_treat-beauty .flex_pc,#art_treat-postpartum .flex_pc,#art_shiratama .div_h4:nth-of-type(1),#art_placenta .div_h4:nth-of-type(1),#art_after-care-info .div_con{
  margin-bottom: 45px;
}

/*maternity*/
#art_treat-maternity .dl03 dt{
    max-width: 230px;
}
#art_treat-maternity .dl03 > dd {
  min-width: calc(100% - 230px);
}
/*painless*/
#sec_painless-qr article{
  counter-increment: num;
}
#sec_painless-qr article h3{
  padding: 0 0 0 48px;
  position: relative;
  background: none;
  border: none;
}
#sec_painless-qr article h3:before{
    content: "Q"counter(num);
    position: absolute;
    color: #A6947F;
    left: 0;
    top: 0;
    width: 45px;
    font-weight: 800;
  }
/*after-care*/
#art_after-care-info .div_h4 .table-area.table-room_price{
  margin-top: 15px;
}
#art_after-care-info .div_h4 .table-area.table-room_price td:last-of-type{
text-align: left;
}
@media screen and (min-width: 768px) {
.sec_treatcon{
  padding: 2.5%;
  width: 95%;
}
.sec_treatcon .flex_pc{
  align-items: flex-start;
  justify-content: flex-start;
} 
.sec_treatcon .flex_pc .div_con{
  width: calc(100% - (40% + 30px));
  margin-right: 30px;
  }
.sec_treatcon .flex_pc .img_con{
  max-width: 480px;
  width: 40%;
  }
#art_vagina-info .div_box02 .img_con {
max-width: 980px;
width: 100%;
margin: 30px auto;
}
/*painless*/
#art_novagina .flex_pc .div_con{
  width: calc(100% - (30% + 30px));
  }
#art_novagina .flex_pc .img_con{
  max-width: 280px;
  width: 30%;
  }
  }
@media screen and (max-width: 768px){
.sec_treatcon{
  padding: 5%;
  width: 90%;
}
.sec_treatcon .div_h2 .h2_option{
    text-align: left;
    padding: 0 10px;
  }
#art_treat-maternity .div_con,#art_treat-postpartumcare .div_con,#art_treat-beauty .div_con,#art_treat-postpartum .div_con,#art_beauty-drip-about .div_con,#art_after-care-info .div_con,#art_painless-info .div_con{
  margin-bottom: 30px;
}
#art_vagina-info .div_box02 .img_con img{
max-width: 680px;
width: 90%;
margin: 30px auto;
}
/*painless*/
#art_novagina .flex_pc .img_con{
max-width: 280px;
width: 90%;
  }
}
/**************診療内容　treat********************/
/**************教室案内　class********************/
#sec_class-info h3{
display: block;
width: 100%;
}

@media screen and (max-width: 767px) {
#sec_class-info #art_access .img_con{
max-width: 650px;
}
}
@media screen and (min-width: 768px) {
#sec_class-info .art_con{
align-items: center;
justify-content: center;
    }
#sec_class-info .art_con .div_con{
width: calc(95% - (40% + 30px));
margin-left: 30px;
}
#sec_class-info .art_con .img_con{
max-width: 480px;
width: 40%;
}
}
/**************教室案内　class********************/
/**************施設案内　faci********************/
#art_faci-main h3{
	display: none;
}
#art_faci-main .faci-main{
 display: grid;
 grid-template-columns: repeat(auto-fit,minmax(300px, 1fr));
  row-gap: 20px;
  column-gap: 20px;
  justify-content: center;
}
#art_faci-main .faci-main img{
	width: 100%;
}
/*ギャラリーのためのcss*/
#sec_faci .gallery{
columns: 3;/*段組みの数*/
column-gap: 20px;
}

#sec_faci .gallery li {
    margin-bottom: 20px;/*各画像下に余白をつける*/
list-style:none;

}
#sec_faci .gallery img{
	width:100%;
	height:auto;
	position: relative;
	 mix-blend-mode: screen; 
	opacity:.6;
　transition: .3s ease-in-out;
	vertical-align: bottom;/*画像の下にできる余白を削除*/}
#sec_faci .gallery a:hover img,#sec_faci .gallery a:hover{
 opacity:1;
}
/*　横幅900px以下の段組み設定　*/
@media screen and (max-width: 900px) {
#sec_faci .gallery{
	columns:3;
	}	
}

@media screen and (max-width: 768px) {
#sec_faci .gallery{
	columns: 2;
	}	
}
/*画像を出現させるアニメーションCSS*/

.flipLeft{
animation-name: flipLeft;
animation-duration:2s;
animation-fill-mode:forwards;
perspective-origin: left center;
opacity: 0;
}

@keyframes flipLeft{
  from {
transform: translate(0, 40%);
 	opacity: 0;
  }

  to {
    transform: translate(0, 0);
  opacity: 1;
  }
}
/**************施設案内　faci********************/