@media screen  and (min-width:769px){
  .pc{
    display: block;
  }
  .sp{
    display: none;
  }
  .hero {
    width: 100%;
    max-width: 960px;
    margin-bottom: 20px;
    position: relative;
    z-index: 0;
    overflow:  hidden;
  }
  .hero_slide {
    width: 300%;
  }
  .hero_slide li {
    float: left;
    width: calc( 100% / 3 );
  }
  #hero .slide_text_1 {
    position: absolute;
    top: 150px;
    width: 100%;
  }
  #hero .slide_text_2 {
    position: absolute;
    top: 250px;
    width: 100%;
  }
  #hero p {
    color: #fff;
    font-size: 20px;
    text-shadow: 5px 5px 1px #999999;
    text-shadow: 2px 2px 1px #000,
    -2px 2px 1px #000,
    2px -2px 1px #000,
    -2px -2px 1px #000;
    text-align: center;
  }
  .hero_slide li img {
    width: 100%;
    position: relative;
  }
  .hero_container {
    position: absolute;
    top: 70%;
    left: 15%;
    color: #fff;
  }
  .slide_btn {
    width: 60px;
    margin: 0 auto;
  }
  .slide_btn li {
    width: 6px;
    height: 6px;
    background-color: #A9A9A9;
    display: inline-block;
    border-radius: 3px;
  }
  .slide_btn li:first-child {
    background-color: #fff;
  }
  .prev_btn {
    position: absolute;
    top: 50%;
    margin-top: -16px;
    outline: 0;
    width: 32px;
    height: 32px;
    text-indent: -9999px;
    z-index: 9999;
    left: 10px;
    background: url(../img/controls.png) no-repeat 0 -32px;
  }
  .next_btn {
    position: absolute;
    top: 50%;
    margin-top: -16px;
    outline: 0;
    width: 32px;
    height: 32px;
    text-indent: -9999px;
    z-index: 9999;
    right: 10px;
    background: url(../img/controls.png) no-repeat -43px -32px;
  }
  table .contact th {
  width: 96%;
    display: block;
    padding: 5px 2%;
  }
  table .contact td {
    width: 96%;
    display: block;
    padding: 12px 2%;
  }
}

@media screen  and (max-width:768px){
  .pc{
    display: none;
  }
  .sp{
    display: inline;
  }
  #header_ber{
    float: none;
    margin: 0 auto;
  }
  #contact{
    width: 460px;
    float: none;
    margin: 0 auto;
    margin-top: 20px;
  }
  #contact {
  }
  #contact p{
    font-size: 12px;
  }
  #contact ul li{
    float: left;
  }
  #hero p {
    color: #fff;
    font-size: 14px;
    text-shadow: 1px 1px 1px #000, -1px 1px 1px #000, 1px -1px 1px #000, -1px -1px 1px #000;
    text-align: center;
  }
  #hero {
    position:relative;
  }
  #hero .slide_text_1 {
    display: none;
  }
  #hero .slide_text_2 {
    display: none;
  }
  .doctor_img {
    width: 30%;
    height: 250px;
    height: auto;
    float: left;
    background-color: #ffffff;
  }
  .docter_history {
    float: left;
    width: 70%;
    font-size: 14px;
  }
  .staff_img {
    width: 100%;
    float: none;
    background-color: #ffffff;
  }
  .staff_box {
    background-color: #ffb6c1;
    width: 100%;
    display: inline-block;
    margin: 5px auto;
    vertical-align: top;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: : 20px !important;
  }

  .staff_box p.detail {
    width: 100%;
  }
  
  .staff_box .introduction {
    font-size: 10px !important
  }
  #main_ber  .content p{
    padding-left:0;
  }
  .case{
    width: 100%;
    background-color: #fa8072;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    margin-bottom: 10px;
  }
  .case p{
    text-align: center;
    color: #fff;
  }
  .facility_box {
    width: 80%;
    display: inline-block;
    margin: 5px 0 0 5%;
    vertical-align: top;
    border-radius: 10px;
  }
  .facility_img{
    width: 80%;
    height: auto;
    margin: 0 auto;
  }
  .facility_img > p > img {
    width: 100%
  }
  .facility_img_lst{
    width: 50%;
    height: auto;
    margin: 0 auto;
  }
  .facility_img_lst > p > img {
    width: 100%
  }

  .animal_box p{
    width: 45%;
    display: inline-block;
    float: left;
    margin-top: 3%;
  }
  .animal_box .img{
    width: 55%;
    height: 100%;
    box-sizing: border-box;
    float: right;
    display: inline-block;
    margin: 0;
    padding: 0;
  }
  .animal_box > .img > img {
    width: 100%;
    height: 100%;
  }
}
.cal_wrapper {
max-width: 960px; /* 最大幅 */
min-width: 300px; /* 最小幅 */
margin: 2.0833% auto;
}
.googlecal {
position: relative;
padding-bottom: 100%; /* 縦横比 */
height: 0;
}
.googlecal iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}

table .contact th {
width: 96%;
  display: block;
  padding: 5px 2%;
}
table .contact td {
  width: 96%;
  display: block;
  padding: 12px 2%;
}
.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget iframe[style] {
    width: 100% !important;
}
/* 画面幅が768px以上の場合の縦横比の指定 */
@media only screen and (min-width: 768px) {
.googlecal { padding-bottom: 75%; }
}