@charset "utf-8";
/*各ページ共通
------------------------------------------------------------*/
/*メイン画像エリア*/
#main_area{position: relative;top: 0; width:100%;z-index: 1;overflow: hidden;}
#main_area {
  position: relative;
  width: 100%;
  height: 420px;
  background-image: url('../images/clinic/main.webp'); /*ページごとに変更*/
  background-size: cover;     
  background-position: center; /* ページによって変更OK */
  background-repeat: no-repeat;
}
.pageti{display:block;position:absolute;top:50%;left:50%;transform: translateX(-50%);background:rgba(25,35,80,0.5);color:#FFF;text-align: center;width:clamp(18.75rem, 12.054rem + 23.81vw, 34.375rem);/*最大550最小300*/padding:2rem;font-size:clamp(1.25rem, 0.848rem + 1.43vw, 2.188rem);/*最大30最小20*/font-family:YuMincho,"Yu Mincho", "Hiragino Mincho ProN", "serif";}

/*パンくず*/
#pankuzu {display:flex;justify-content:  flex-end; max-width:1500px;margin:10px auto 30px; list-style: none;}
#pankuzu li:not(:last-child)::after{content:">";padding:0 5px;}


/*このページ単体のCSS------------------------------------------------------------*/
/*院長紹介*/
#intro{position:relative;}
#intro::before{left:5px;top:10%; content:"Doctor Introduction";}
#intro::after{position:absolute; top:32%; right:0;display:block;content:"";background:url("../images/bg_gray.webp") no-repeat top center /cover; width: clamp(12.5rem, 2.934rem + 34.01vw, 43.75rem); height: clamp(6.25rem, 1.467rem + 17.01vw, 21.875rem);z-index:-1;}
.imgR{justify-content: space-between;align-items: flex-start;}
.imgR div{width: calc(100% - clamp(21.25rem, 16.506rem + 16.87vw, 30rem));}
.imgR > img{width:clamp(18.75rem, 14.684rem + 14.46vw, 26.25rem);}
.float{float:left;margin:0 20px 20px 0; width:clamp(12.5rem, 8.281rem + 8.79vw, 15.313rem);height: auto;}
.bgb{background:#d1d8e5; border-radius: 5px; padding-bottom: 20px;}
.prof{padding:0 20px;}
.shikaku li,.lisence li{ width:49%;display: inline-block;vertical-align: top;}
.shikaku li:last-child{width:100%;}
/*{ display: inline;vertical-align: top; white-space: nowrap;margin-right:100px;}*/
/*施設紹介*/
#facility::before{left:5px;top:10%; content:"Facility";}
/*診療時間アクセス*/
#access::before{left:5px;top:10%; content:"Access";}
.access {justify-content: space-between;align-items: flex-start;}
.access dl{width:clamp(25rem, -1.23rem + 54.64vw, 50rem);}
.access img{width:clamp(21.125rem, 3.945rem + 35.79vw, 37.5rem);}
.map{height:500px;}
/* レスポンシブ-----------------------------------------------------------------------*/
/* 1025px以下から
------------------------------------------------------------*/
@media screen and (max-width: 1025px) {
    /*院長紹介*/
    .shikaku li{ width:49%;display: inline;white-space: nowrap;}
    /*診療時間アクセス*/
    .access{display:block;}
    .access dl{width:100%;max-width:600px;  margin:30px auto;}
    .access img{width:100%;max-width:600px; margin:auto;display: block;}
}

/* 768px以下から
------------------------------------------------------------*/
@media only screen and (max-width:768px){
    /*院長紹介*/
    #intro::after{position:absolute; top:15%; right:0;display:block;content:"";background:url("../images/clinic/bg_gray.webp") no-repeat top center /cover; width: 400px; height:200px;z-index:-1;}
    .imgR{flex-wrap: wrap;justify-content: center;}
    .imgR div{width:100%;order:2;}
    .imgR img{width:clamp(18.75rem, 6.029rem + 26.5vw, 30.875rem);order:1;}
    .float{width:150px !important;height: auto;}
    .shikaku li,.lisence li{ display: block; width:100%;}
}

/* 450px以下から
------------------------------------------------------------*/
@media only screen and (max-width:450px){
    /*メイン画像*/
    #main_area {background-image: url('../images/clinic/mainSP.webp');}
    /*院長紹介*/
    #intro .fc_navy{font-weight: 700;}
    .float{margin:0 15px 15px 0 !important;}
    /*施設紹介*/
    #facility img{width:90%;}
}