@charset "utf-8";
html {
    font-size: 100%;
    scroll-behavior: smooth;
}
body {
    color:#744E22;
    font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic Pro','Meiryo','Arial', sans-serif;
    font-size: 16px;
}
img {
    max-width: 100%;
    vertical-align: bottom;
}
li {
    list-style: none;
}
a {
    text-decoration: none;
  }
p{
    color:#744E22;
  }
img {
    vertical-align: bottom;
    max-width: 100%;
  }

  /* ヘッダー */
  header{
    background-color: white;
    height: 75px;
    padding-top: 10px;
    display: flex;
    justify-content: space-between;
    position: fixed;
    z-index: 10;
    width: 100%;
  }
  .header-logo img{
    height: 65px;
    margin-left: 3%;
  }
  h1.seoh1{
    margin: 0px;
    padding: 0px;
    text-indent: -9999px;
    }
  .header-nav {
    margin-left: auto;
    padding-right: 3%;
  }
  .header-wrapper1{
    color: whitesmoke;
    font-size: 16px;
  }
  .header-wrapper3{
    color: whitesmoke;
    font-size: 12px;
  }
  .header-wrapper1 img{
    height: 20px;
    padding-left: 10px;
  }
  .header-wrapper3 img{
    height: 20px;
    padding-left: 10px;
  }
  .header-line-icon img{
    height: 30px;
  }
  .header-fb-icon img{
    height: 30px;
  }
  .header-insta-icon img{
    height: 30px;
  }
  .header-nav-a li{
    margin-left: 20px;
    display: inline-block;
  }
  .header-wrapper1{
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 20px;
    background-color: #b99c7d;
    margin-right: 5px;
  }
  .header-wrapper3{
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 20px;
    background-color: #b99c7d;
    margin-right: 5px;
  }
  .header-wrapper:hover{
    background-color: whitesmoke;
    color: #b99c7d;
    border: 1px solid #b99c7d;
  }
  
  /* ヘッダーナビb */
.header-nav-b{
    margin-top: 5px;
    display: flex;
  }
  .header-nav-b li{
    margin-left: 30px;
  }
  .header-nav-b a{
    color: #744E22;
    font-size: 0.8em;
  }
  .header-nav-b a:hover{
    color:whitesmoke;
    background-color: #b99c7d;
  }
  /* メイン */

/* メインビジュアル１ */
.mainvisual-1 {
    height: 48em;
    position: relative; 
    max-width: 1080px;
    margin: 0 auto;
  }
  /* 写真 */
.mainvisual1{
    position: absolute;
    /* right:20px; */
    top:80px;
    z-index: 1;
  }
  /* loading実装 */
  #is-loading {
    display: block;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background: #fff;
    z-index: 8;
   }
   #loading {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    margin-top: -100px;
    margin-left: -100px;
    text-align: center;
    color: #fff;
    z-index: 9;
   }
   /* cssローディング */
   @-moz-keyframes circles-loader {
    0% {
      -moz-transform: rotate(-720deg);
      transform: rotate(-720deg);
    }
    50% {
      -moz-transform: rotate(720deg);
      transform: rotate(720deg);
    }
  }
  @-webkit-keyframes circles-loader {
    0% {
      -webkit-transform: rotate(-720deg);
      transform: rotate(-720deg);
    }
    50% {
      -webkit-transform: rotate(720deg);
      transform: rotate(720deg);
    }
  }
  @keyframes circles-loader {
    0% {
      -moz-transform: rotate(-720deg);
      -ms-transform: rotate(-720deg);
      -webkit-transform: rotate(-720deg);
      transform: rotate(-720deg);
    }
    50% {
      -moz-transform: rotate(720deg);
      -ms-transform: rotate(720deg);
      -webkit-transform: rotate(720deg);
      transform: rotate(720deg);
    }
  }
  /* :not(:required) hides this rule from IE9 and below */
  .circles-loader:not(:required) {
    position: relative;
    text-indent: -9999px;
    display: inline-block;
    width: 25px;
    height: 25px;
    background: rgba(255, 204, 51, 0.9);
    border-radius: 100%;
    -moz-animation: circles-loader 3s infinite ease-in-out;
    -webkit-animation: circles-loader 3s infinite ease-in-out;
    animation: circles-loader 3s infinite ease-in-out;
    -moz-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
  }
  .circles-loader:not(:required)::before {
    background: rgba(255, 102, 0, 0.6);
    border-radius: 100%;
    content: '';
    position: absolute;
    width: 25px;
    height: 25px;
    top: 18.75px;
    left: -10.82532px;
  }
  .circles-loader:not(:required)::after {
    background: rgba(255, 51, 0, 0.4);
    border-radius: 100%;
    content: '';
    position: absolute;
    width: 25px;
    height: 25px;
    top: 18.75px;
    left: 10.82532px;
  }

  /* テキスト */
  .mainvisual-1-text {
    position: absolute;
    top:22em;
    left:10%;
    z-index: 9;
  }
  
  .mainvisual-1-h2 {
    font-weight: 300;
    color: #744E22;
    line-height: 2;
    letter-spacing: 0.2em;
  }
  .mainvisual-1-p{
    background-color: #F2EBDF;
    line-height: 2;
    letter-spacing: 0.2em;
    z-index: 9;
    margin-top: 10em;
  }
  /* 診療時間表 */
  .timetable-top {
    position: absolute;
    top:45em;
    right: 2%; 
    z-index: 9;
  }
  .top-timetable-text{
   display: flex;
   padding-left: 40px;
   font-size: smaller;
  }
  /* 表組 */
  .biz-hour {
    border-collapse: collapse;
  }
  .biz-hour th {
    /* １番上の線 */
    /* #A28C63っていうのが色の名前なので、ここをお好みで */
    border-top: 1px solid #b99c7d;
  }
  .biz-hour th, .biz-hour td {
    padding: 0.5em 0.5em;
    text-align: center;
    /* ２番目以降の線 */
    /* 色はお好みで */
    border-bottom: 1px solid #b99c7d;
  }
  
  /* 上段の背景色 */
  .biz-hour th {
    background:#b99c7d;
    font-weight: normal;
    color:white;
  }
  .biz-hour td {
    background-color: white;
  }
  
  /* 時間の文字色 */
  .biz-hour .time {
    color: #744E22;
  }
  /* 中の文字色 */
  .biz-hour .maru{
    color: #85B71C;
  }
  /* グーグルマップ */
  .timetable-top-address{
    display: inline-block;
    padding-left: 50px; 
  }
  .timetable-top-add{
    color: #744E22;
  }
  .timetable-top-googlemap{
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 20px;
    background-color: #b99c7d;
    color: whitesmoke;
    font-size: 16px;
  }
  .timetable-top-googlemap:hover{
    background-color: whitesmoke;
    border: 1px solid #b99c7d;
  }
  .timetable-top-googlemap:hover{
    color: #744E22;
  }
  .top-timetable-text li{
    margin-top: 3px;
  }
  .top-timetable-text .holiday{
    color: #ff0033;
  }
  .timetable-top-address a{
    font-size: smaller;
  }
  /* メインビジュアル2 */
  .mainvisual-2 {
    height: 590px;
    position: relative; 
    max-width: 1080px;
    margin: 0 auto;
  }
  .timetable-top-googlemap {
    text-align: center;
    line-height: 50px;
    color: #744E22;
    background: #b99c7d;
    text-decoration: none;
    border-radius: 50px;
  }
  .timetable-top-googlemap{
    color: #FFF;
    position: relative;
    padding-left: 30px;
  }
  .timetable-top-googlemap::before{
    content: "";
    position: absolute;
    top: 55%;
    left: 18px;
    width: 7px;
    height: 7px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
    margin-top: -5px;
    
  }
  /* 写真 */
  .mainvisual2{
    position: absolute;
    /* left:20px; */
    top:7em; 
    z-index: 1;
  }
  /* テキスト */
  .mainvisual-2{
    width: 100%;
  }
  
  .mainvisual-2-h2 {
    position: absolute;
    top:12em;
    left:40%;
    z-index: 9;
    font-weight: 300;
    color: #744E22;
    line-height: 2;
    letter-spacing: 0.2em;
  }
  .mainvisual-2-text-p{
    position: absolute;
    top:30em;
    left:40%;
    z-index: 9;
    line-height: 2;
    z-index: 9;
    /* width: 50%; */
  }
  /* お知らせ */
  #news{
    padding-top: 60px;
    padding-bottom: 60px;
    background-color: whitesmoke;
  }
  .news-catch {
    margin-left: 3%;
    color: #AFBF30;
    font-weight: 500;
    font-size: 16px;
    line-height: 2;
    display: flex;
    align-items: center; /*垂直中心  */
    justify-content: left; /* 水平中心 */
  }
  .news-catch:before {
    border-top: 1px solid;
    content: "";
    width: 3em; /* 線の長さ */
  }
  .news-catch:before {
    margin-right: 1em; /* 文字の右隣 */
  }
  .news-catch:after{
    display: none;
  }
  .news-midashi h2{
    margin-left: 3%;
    justify-content: left;
    font-weight: 500;
    font-size: 26px;
    letter-spacing: 0.1em;
    margin-bottom: 40px;
  }
  .news-wrapper {
    max-width: 1080px;
    margin: 0 auto;
    display: flex;
    justify-content: space-evenly;
  }
  
  /* ポリシー */
  .policy{
    margin-top: 60px;
  }
  
  /* ポリシー見出し */
  .policy .catch {
    margin: 0 auto;
    color: #AFBF30;
    font-weight: 500;
    font-size: 26px;
    line-height: 2;
    display: flex;
    align-items: center; /* 垂直中心 */
    justify-content: center; /* 水平中心 */
  }
  .catch:before, .catch:after {
    border-top: 1px solid;
    content: "";
    width: 7em; /* 線の長さ */
  }
  .catch:before {
    margin-right: 5em; /* 文字の右隣 */
  }
  .catch:after {
    margin-left: 5em; /* 文字の左隣 */
  }
  /* モットーはトータルライフケア */
  .catch-midashi h2{
    color: #744E22;
    text-align: center;
    margin-top: 60px;
    font-weight: 600;
    font-size: 26px;
  }
  .catch-midashi p{
    text-align: center;
    margin-top: 40px;
    font-size: 18px;
    margin-bottom: 80px;
  }
  /* ポリシー段組み */
  .policy-inner {
    max-width: 1080px;
    margin: 0 auto;
    display: flex;
    justify-content: space-evenly;
  }
  .policy-wrapper {
    width: 29%;
    margin-bottom: 60px;
  }
  /* ふわっと表示 */
  .fade{
    opacity: 0;
    transition: opacity 5s;
  }
  .fade.view{
    opacity: 1;
  }
  
  .policy-wrapper1{
    margin-left: 2%;
  }
  .policy-wrapper2{
    margin-left: 5%;
  }
  .policy-wrapper3{
    margin-left: 5%;
    margin-right: 1%;
  }
  .policy-wrapper img {
    text-align: center;
    height: 250px;
    margin-left: 20px;
    margin-right: 20px;
    border-radius: 50%;
  }
  .policy-title{
    font-size: 20px;
    letter-spacing: 0.1em;
    text-decoration-line: underline;
    color:#AFBF30;
    text-align: center;
  }
  .policy-subtitle{
    color:#AFBF30;
    margin-top: 20px;
    font-weight: 200;
    font-size: 22px;
    margin-bottom: 30px;
  }
  .policy-text p{
    margin-top: 10px;
    font-size: 16px;
  }
  
  
  
  /* 当院の特徴 */
  .onayami{
    padding-top: 60px;
    padding-bottom: 10px;
    background-color: #F2EBDF;
  }
  .onayami-catch {
    margin-left: 3%;
    color: #AFBF30;
    font-weight: 500;
    font-size: 16px;
    line-height: 2;
    display: flex;
    align-items: center; /*垂直中心  */
    justify-content: left; /* 水平中心 */
  }
  .onayami-catch:before {
    border-top: 1px solid;
    content: "";
    width: 3em; /* 線の長さ */
  }
  .onayami-catch:before {
    margin-right: 1em; /* 文字の右隣 */
  }
  .onayami-catch:after{
    display: none;
  }
  .onayami-catch-h2{
    padding-left: 1.5em;
    justify-content: left;
    font-weight: 500;
    font-size: 1.5em;
    letter-spacing: 0.1em;
  }
  
  /* 特徴段組み */
  .onayami-inner {
    margin-top: 80px;
    margin-left: 5%;
    margin-right: 5%;
  }
  
  .onayami-wrapper {
    max-width: 1080px;
    margin: 0 auto;
    display: flex;
    justify-content: space-evenly;
    margin-bottom: 100px;
  }
  .onayami-text {
    width: 60%;
  }
  .onayami-wrapper img {
    height: 12em;
    border-radius: 10%;
  }
  .onayami-wrapper:nth-child(2) {
    flex-direction: row-reverse;
  }
  .onayami-wrapper:nth-child(4) {
    flex-direction: row-reverse;
  }
  .onayami-title{
    color:#AFBF30;
    font-size: 20px;
    letter-spacing: 0.1em;
    text-decoration-line: underline;
  }
  .onayami-subtitle{
    margin-top: 20px;
    font-weight: 200;
    font-size: 22px;
    letter-spacing: 0.1em;
    margin-bottom: 30px;
  }
  .onayami-text p{
    margin-top: 10px;
    font-size: 16px;
  }
  /* 診療内容 */
  .treatment-catch {
    padding-top: 60px;
    margin-left: 3%;
    color: #AFBF30;
    font-weight: 500;
    font-size: 16px;
    line-height: 2;
    display: flex;
    align-items: center; /*垂直中心  */
    justify-content: left; /* 水平中心 */
  }
  .treatment-catch:before {
    border-top: 1px solid;
    content: "";
    width: 3em; /* 線の長さ */
  }
  .treatment-catch:before {
    margin-right: 1em; /* 文字の右隣 */
  }
  .treatment-catch:after{
    display: none;
  }
  .treatment-catch-h2{
    padding-left: 1.5em;
    justify-content: left;
    font-weight: 500;
    font-size: 1.5em;
    letter-spacing: 0.1em;
  }
  .treatment-midashi-p{
    margin-left: 5em;
    margin-right: 5em;
    margin-top: 60px;
    margin-bottom: 60px;
    font-size: 16px;
    font-weight: 100;
  }
  /* 診察内容段組み */
  .treatment-wrapper{
    max-width: 1080px;
    margin: 0 auto;
  }
  .treatment-innner{
    display: block;
  }
  .treatment-wrapper h3{
    margin-bottom: 0.7em;
    color: #1B80BF;
  }
  .treatment-wrapper 
  .treatment-wrapper img{
    height: 100px;
    float: right;
    z-index: 1;
  }
  .treatment-innner{
    margin-left: 3%;
    margin-right: 3%;
    margin-bottom: 40px;
    width: 42vw;
    border:1px solid #AFBF30;
    border-radius: 10px;
    padding: 10px 20px;
  }  
  .treatment-innner{
    display: flex;
  }
  .treatment-innner{ 
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right bottom;
    background-color: rgba(255, 255, 255, 0.5);
    background-blend-mode: lighten;
  }
  .treatment-innner1{
    background-image: url(img/sinsatsuinchou.jpeg);
  }
  .treatment-innner2{
    background-image: url(img/IMG_7445.jpeg);
  }
  .treatment-innner3{
    background-image: url(img/machiaishitsu.jpeg);
  }
  .treatment-innner4{
    background-image: url(img/IMG_0108.jpeg);
  }
  .treatment-innner5{
    background-image: url(img/shindenzu.jpeg);
  }
  .treatment-innner6{
    background-image: url(img/sinsatsudai-ran.jpeg);
  }
  .treatment-innner7{
    background-image: url(img/echo.jpeg);
  }
  .treatment-innner8{
    background-image: url(img/IMG_7519.jpeg);
  }
  .treatment-wrapper li{
    display: flex;
    justify-content: space-between;
  }
  .treatment-innner-text {
    font-size: 16px;
    font-weight: 200;
  }

  /* たとえば当院にできる事 */
  .service{
    padding-top: 40px; 
    padding-bottom: 10px;
    background-color: #F2EBDF;
  }
  .service-catch {
    font-size: 1.5em;
    padding-left: 1.5em;
    color: #AFBF30;
    font-weight: 500;
    line-height: 2;
    display: flex;
    align-items: center; /*垂直中心  */
    justify-content: left; /* 水平中心 */
  }
  .service-catch:before {
    border-top: 1px solid;
    content: "";
    width: 3em; /* 線の長さ */
  }
  .service-catch:before {
    margin-right: 1em; /* 文字の右隣 */
  }
  .service-catch:after{
    display: none;
  }
  .service-catch-h2{
    margin-left: 3%;
    justify-content: left;
    font-weight: 500;
    font-size: 26px;
    letter-spacing: 0.1em;
    margin-bottom: 80px;
  }
  
  /* サービス段組み */
  .service-inner {
    max-width: 1080px;
    margin: 0 auto;
  }
  .service-wrapper {
    display: flex;
    justify-content: space-evenly;
    margin-left: 5%;
    margin-right: 5%;
    margin-bottom: 80px;
  }
  .service-text {
    width: 60%;
  }
  .service-wrapper img {
    height: 200px;
    border-radius: 10%;
  }
  .service-wrapper:nth-child(2) {
    flex-direction: row-reverse;
  }
  .service-title{
    color:#AFBF30;
    font-size: 20px;
    letter-spacing: 0.1em;
    text-decoration-line: underline;
  }
  .service-subtitle{
    margin-top: 20px;
    font-weight: 200;
    font-size: 22px;
    letter-spacing: 0.1em;
    margin-bottom: 30px;
  }
  .service-text p{
    margin-top: 10px;
    font-size: 16px;
  }
  /* 対象動物 */
  .dogcat{
    padding-top: 60px; 
    padding-bottom: 60px;
  }
  .dogcat-catch {
    margin-left: 3%;
    color: #AFBF30;
    font-weight: 500;
    font-size: 16px;
    line-height: 2;
    display: flex;
    align-items: center; /*垂直中心  */
    justify-content: left; /* 水平中心 */
  }
  .dogcat-catch:before {
    border-top: 1px solid;
    content: "";
    width: 3em; /* 線の長さ */
  }
  .dogcat-catch:before {
    margin-right: 1em; /* 文字の右隣 */
  }
  .dogcat-catch:after{
    display: none;
  }
  .dogcat-midashi h2{
    font-size: 1.5em;
    padding-left: 1.5em;
    justify-content: left;
    font-weight: 500;
    letter-spacing: 0.1em;
  }
  .dogcat-midashi p{
    margin-left: 5em;
    margin-right: 5em;
    margin-top: 40px;
    margin-bottom: 40px;
    font-size: 16px;
    font-weight: 100;
  }
  /* 対象動物段組み */
  .dogcat-wrapper-img img{
    height: 10em;
    border-radius: 10%;
  }
  .dogcat-wrapper-img{
    text-align: center;
  }
  .dogcat-inner{
    display: flex;
  }
  .dogcat-wrapper-text{
    text-align: center;
    color: #AFBF30;
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .dogcat-inner li{
    width: 20%;
  }
  .dogcat-inner{
    padding-top: 40px;
    padding-bottom: 60px;
    display: flex;
    justify-content: space-evenly;
  } 
  .dogcat-inner p{
    font-size: 1em;
  }
  /* ご挨拶 */
  #greeting{
    padding-top: 40px; 
    padding-bottom: 40px;
    background-color: #F2C9CC;
  }
  .greeting-inner {
    display: flex;
    justify-content: space-evenly;
    max-width: 1080px;
    margin: 0 auto;
  }
  .greeting-left{
    width: 45%;
    margin-left: 3%;
    margin-right: 4%;
    padding-top: 20px; 
    padding-bottom: 20px;
    background-color: whitesmoke;
  }
  .greeting-catch h2{
    font-weight: 400;
    font-size: 20px;
  }
  .greeting-catch {
    margin-left: 1%;
    color: #AFBF30;
    font-weight: 300;
    font-size: 16px;
    line-height: 2;
    display: flex;
    align-items: center; /*垂直中心  */
    justify-content: left; /* 水平中心 */
  }
  .greeting-catch:before {
    border-top: 1px solid;
    content: "";
    width: 1.5em; /* 線の長さ */
  }
  .greeting-catch:before {
    margin-right: 3%; /* 文字の右隣 */
  }
  .greeting-catch:after{
    display: none;
  }
  .greeting-midashi h3{
    padding-top: 20px;
    padding-bottom: 40px;
    text-align: center;
    font-weight: 500;
    font-size: 20px;
    letter-spacing: 0.1em;
  }
  .greeting-midashi span{
    color: #AFBF30;
  }
  .greeting-left p{
    margin-left: 3em;
    margin-right: 3em;
    padding-bottom: 20px;
    font-size: 16px;
    font-weight: 100;
  }
  .greeting-right{
    width: 45%;
    margin-right: 3%;
    padding-bottom: 20px;
  }
  .greeting-right img{
    height: 250px;
  }
  .greeting-right p{
    margin-top: 20px;
  }
  .greeting-right span{
    font-size: 26px;
    margin-right: 20px;
  }
  .greeting-right dl dt{
    margin-top: 20px;margin-bottom: 10px;
  }
  /* 予約方法 */
  #reservation{
    padding-top: 40px; 
    padding-bottom: 10px;
  }
  .reservation-inner{
    max-width: 1080px;
    margin: 0 auto;
  }
  .reservation-catch {
    margin-left: 3%;
    color: #AFBF30;
    font-weight: 500;
    font-size: 16px;
    line-height: 2;
    display: flex;
    align-items: center; /*垂直中心  */
    justify-content: left; /* 水平中心 */
  }
  .reservation-catch:before {
    border-top: 1px solid;
    content: "";
    width: 3em; /* 線の長さ */
  }
  .reservation-catch:before {
    margin-right: 1em; /* 文字の右隣 */
  }
  .reservation-catch:after{
    display: none;
  }
  .reservation-midashi h2{
    color: #AFBF30;
    font-size: 1.5em;
    padding-left: 1.5em;
    justify-content: left;
    font-weight: 500;
    letter-spacing: 0.1em;
  }
  .reservation-midashi p{
    margin-left: 5em;
    margin-right: 5em;
    margin-top: 60px;
    margin-bottom: 80px;
    font-size: 16px;
    font-weight: 100;
    line-height: 3;
  }
  /* 予約方法段組み */
  .reservation-inner li{
    display: flex;
    margin-bottom: 40px;
    margin-left: 3%;
  }
  .reservation-inner img{
    height: 30px;
    margin-right: 10px;
  }
  .reservation-icon-wrapper{
    background-color: #b99c7d;
    height: 50px;
    width: 250px;
    border-radius: 10px;
    margin-right: 3%;
  }
  .reservation-inner a{
    display: block;
    color: whitesmoke;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
  }
  .reservation-tel{
    font-size: 20px;
    letter-spacing: 0.1em;
  }
  .reservation-line a{
    font-size: 30px;
    letter-spacing: 0.1em;
  }
  .reservation-mail{
    font-size: 14px;
  }
  .reservation-text-wrapper{
    width: 60%;
  }
  /* 病院情報 */
  .clinic-info-center{
    max-width: 1080px;
    margin: 0 auto;
  }
  .clinic-info-title h2{
    margin-top: 60px;
    padding-top: 100px;
    font-size: 30px;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.1em;
  }
  .clinic-info-title h3{
    margin-top: 10px;
    font-weight: 300;
    font-size: 20px;
    text-align: center;
    color: #9c0;
    margin-bottom: 40px;
  }
  .clinic-info-title img{
    width: 100%;
    height: 250px;
    object-fit: cover;
  }
  /* 病院情報詳細 */
  .clinic-info-wrapper{
    margin-top: 60px;
    display: flex;
    margin-bottom: 60px;
  }
  /* 病院情報詳細左 */
  .clinic-info-left{
    width: 50%;
  }
  .clinic-info-left-logo p{
    margin-left: 3%;
  }
  .clinic-info-left .biz-hour{
    margin-left: 3%;
  }
  .clinic-info-left span{
    font-size: 1.5em;
    text-decoration: underline;
  }
  /* グーグルマップ */

  .clinicinfo-googlemap{
    margin-left: 10%;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 20px;
    background-color: #b99c7d;
    color: whitesmoke;
    font-size: 16px;
  }
  .clinicinfo-googlemap:hover{
    background-color: whitesmoke;
    border: 1px solid #b99c7d;
  }
  .clinicinfo-googlemap:hover{
    color: #744E22;
  }
  .clinicinfo-googlemap {
    text-align: center;
    line-height: 50px;
    color: #744E22;
    background: #b99c7d;
    text-decoration: none;
    border-radius: 50px;
  }
  .clinicinfo-googlemap{
    color: #FFF;
    position: relative;
    padding-left: 30px;
  }
  .clinicinfo-googlemap::before{
    content: "";
    position: absolute;
    top: 55%;
    left: 18px;
    width: 7px;
    height: 7px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
    margin-top: -5px;
    
  }
  .clinic-info-left-tel{
    margin-bottom: 20px;
    margin-top: 10px;
    font-size: 20px;
    letter-spacing: 0.1em;
  }
  .timetable-top-text{
    display: flex;
    padding-left: 50px;
  }
  .timetable-top-text li{
    margin-top: 10px;
  }
  .timetable-top-text .holiday{
    color: #ff0033;
  }
  /* 病院情報詳細右 */
  .clinic-info-right{
    width: 45%;
    margin-left: 3%;
  }
  /* 夜間救急 */
  .emergency{
    margin-bottom: 60px;
    margin-top: 20px;
  }
  .emergency-title{
    margin-bottom: 20px;
    font-weight: 500;
    font-size: 20px;
    letter-spacing: 0.1em;
  }
  .emergency img{
    height: 30px;
  }
  .emergency p{
    margin-bottom: 20px;
  }
  .emergency li{
    margin-bottom: 10px;
  }
  /* 支払ペット保険 */
  .card img{
    height: 30px;
  }
  .card-title{
    margin-bottom: 20px;
    font-weight: 500;
    font-size: 20px;
  }
  .credit span{
    color: #ff0033;
  }
  .card li{
    margin-bottom: 10px;
  }
  /* アクセス */
  .access h2{
    margin-left: 3%;
    color: #AFBF30;
    font-weight: 500;
    font-size: 20px;
    margin-bottom: 10px;
    letter-spacing: 0.1em;
  }
  /* .gos */
  .googlemap-sp{
    display: none;
  }
  .googlemap-tab{
    display: none;
  }
  .access a{
    color: #744E22;
  }
   .access .bigmap{
    padding-top: 1em;
    padding-right: 0.5em;
    padding-bottom: 1em;
    padding-left: 2em;
    width:15em;
    margin-top: 0.2em;
    margin-left: 3%;
    border-width: 1px;
    border-style: solid;
    border-color: #5E454B;
  }
   .access a:hover{
     color: #AFBF30;
   }

  /* 駐車場 */
  .parking{
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
    margin-left: 3%;
    margin-bottom: 40px;
  }
  .parking-left{
    width: 60%;
  }
  .parking-left img{
    height: 30px;
  }
  .parking-left-title{
    margin-bottom: 20px;
  }
  .parking-left p{
    margin-bottom: 10px;
  }
  .parking-right img{
    height: 200px;
  }
  /* スクロールボタン */
  .scroll-btn a{
    float:right;
  }
  .scroll-btn img{
    height: 60px;
  }
  /* フッター */
  footer{
    background-color: #5E454B;
  }
  .footer-wrapper2{
    margin-top: 10px;
  }
  .footer-wrapper-line{
    margin-top: 10px;
  }
  .footer-wrapper1{
    padding-top: 0.2em;
    padding-bottom: 0.2em;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 20px;
    background-color: #b99c7d;
    margin-right: 5px;
    margin-top: 10px;
  }
  .footer-wrapper3{
    padding-top: 0.2em;
    padding-bottom: 0.2em;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 20px;
    background-color: #b99c7d;
    margin-right: 5px;
    margin-top: 10px;
  }
  .footer-wrapper1 img{
    height: 1.2em;
    padding-right: 5px;
  }
  .footer-wrapper3 img{
    height: 1.2em;
    padding-right: 10px;
    padding-left: 10px;
  }
  .footer-wrapper2 img{
    height: 3em;
  }
  .footer-wrapper-line img{
    height: 2em;
  }
  .footer-nav-a{
    display: flex;
    justify-content: space-evenly;
    margin-bottom: 20px;
  }
  .footer-nav-a li{
    display: inline-block;
  }
  .footer-wrapper:hover{
    background-color: whitesmoke;
    color: #b99c7d;
    border: 1px solid #b99c7d;
  }
  .footer-wrapper a:hover{
    color: #b99c7d;
  }
  /* フッターナビB */
  .footer-nav-b{
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    justify-content: space-evenly;
    color: whitesmoke;
    font-size: 14px;
  }
  .footer-nav-b a{
    position: relative;
    display: inline-block;
    text-decoration: none;
  }
  .footer-nav-b a::after {
    position: absolute;
    bottom: -4px;
    left: 0;
    content: '';
    width: 100%;
    height: 1px;
    background:whitesmoke;
    transform: scale(0, 1);
    transform-origin: left top;
    transition: transform .3s;
  }
  .footer-nav-b a:hover::after {
    transform: scale(1, 1);
  }
  footer a{
    text-decoration: none;
    color: whitesmoke;
  }
  /* コピーライト */
  footer p{
    text-align: center;
    padding-top:20px;
    padding-bottom: 10px;
    font-size: 12px;
    color: whitesmoke;
  }
  /* トップへ戻るボタン */
  .gotop{
    display: none;
    display: block;
    width: 60px;
    height: 60px;
    box-sizing: border-box;
    background: #FFF;
    border: 1px solid #999;
    border-radius: 50%;
    padding-top: 30px;
    text-align: center;
    letter-spacing: -1px;
    font-size: 85%;
    text-decoration: none;
    color: #333;
    opacity: 0.5;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 10;
  }
  .gotop::before{
    content: "";
    display: block;
    border-top: 2px solid #333;
    border-right: 2px solid #333;
    width: 25%;
    height: 25%;
    top: 25%;
    left: 0;
    right: 0;
    margin: auto;
    position: absolute;
    transform: rotate(-45deg);
  }
  .gotop:hover{
    opacity: 1;
  }
 
  #clinic-info .clinic-info-title{
    background-image: url(img/poko3.jpeg);
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    height: 300px;
  }
  .treatment-window{
    background-image: url(img/raninsea.jpeg);
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    height: 200px;
  }
  


  /* レスポンシブサイト */
  @media screen and (max-width:960px) {
    .header-nav {
      position: fixed;
      right: -320px; /* 右から出てくる */
      top: 0;
      width: 300px; /* スマホに収まるサイズ */
      height: 100vh;
      padding-top: 60px;
      background-color: #fff;
      transition: all .6s;
      z-index: 200;
      overflow-y: auto; /* メニューが多くなったらスクロールできるように */
    }
    .hamburger {
      position: absolute;
      left: 80%;
      /* right: 0; */
      top: 15px;
      width: 3em; /* クリックしやすい幅 */
      height: 3em; /* クリックしやすい高さ */
      cursor: pointer;
      z-index: 300;
    }
    .hamburger_border {
      position: absolute;
      left: 11px;
      width: 25px;
      height: 2px;
      background-color:  #744E22;
      transition: all .6s;
    }
    .hamburger_border_top {
      top: 14px;
    }
    .hamburger_border_center {
      top: 22px;
    }
    .hamburger_border_bottom {
      top: 30px;
    }
    .black_bg {
      position: fixed;
      left: 0;
      top: 0;
      width: 100vw;
      height: 100vh;
      z-index: 100;
      background-color: #333;
      opacity: 0;
      visibility: hidden;
      transition: all .6s;
      cursor: pointer;
    }
    
    .nav_item a:hover {
      background-color: #eee;
    }
    .hamburger:hover{
      background-color: #F2EBDF;
      border-radius: 50%;
    }
    /* 表示された時用のCSS */
    .nav-open .header-nav {
      right: 0;
    }
    .nav-open .black_bg {
      opacity: .8;
      visibility: visible;
    }
    .nav-open .hamburger_border_top {
      transform: rotate(45deg);
      top: 20px;
    }
    .nav-open .hamburger_border_center {
      width: 0;
      left: 50%;
    }
    .nav-open .hamburger_border_bottom {
      transform: rotate(-45deg);
      top: 20px;
    }
    .nav-open .header-nav-a li{
      margin-bottom: 30px;
    }
    .nav-open .header-nav-b{
      flex-direction: column;
    }
    .nav-open .header-nav-b li{
      margin-bottom: 20px;
    }
    .mainvisual-1{
      margin: 0;
    }
    .mainvisual-1-h2{
      font-size: 22px;
      letter-spacing: normal;
      line-height: 1.8;
      padding-left: 5%;
    }
    .mainvisual-1-text{
      left: 0;
      margin-left: 0;
      margin-right: 0;
      right: 0;
      left: 0;
    }
    .mainvisual-1-text p{
      padding-top: 20px;
      padding-left: 5%;
      padding-right: 5%;
      padding-bottom: 20px;
      line-height: normal;
      background-color: #F2EBDF;
      background-size: cover;
      margin-left: 0;
    }
    .timetable-top{
      top: 42em;
    }
    .mainvisual-2{
      margin: 0;
      position: relative;
    }
    .mainvisual2{
      top:6em;
    }
    .mainvisual-2-text{
      margin-left: 0;
      margin-right: 0;
    }
    .mainvisual-2-h2{
      font-size: 1.5em;
      letter-spacing: normal;
      line-height: 1.8;
    }
    .mainvisual-2-text-p{
      top: 36em;
      left: 0;
      padding-left: 5%;
      padding-right: 5%;
      padding-top: 1em;
      padding-bottom: 1em;
    }
    #news{
      margin-top: 90px;
    }
    .news-wrapper{
      flex-direction: column;
      text-align: center;
    }
    .news-fb{
      text-align: center;
    }
    .news-insta{
      text-align: center;
      margin-left: 5%;
      margin-top: 60px;
    }
    .policy-inner{
      flex-direction: column;
    }
    .policy-wrapper{
      width: 80%;
      margin: 60px auto;
    }
    .policy-wrapper-img{
      text-align: center;
    }
    .policy-subtitle{
      text-align: center;
    }
    .onayami-wrapper{
      flex-direction: column-reverse;
    }
    .onayami-wrapper:nth-child(2) {
      flex-direction: column-reverse;
    }
    .onayami-wrapper:nth-child(4) {
      flex-direction: column-reverse;
    }
    .onayami-text{
      width: 100%;
    }
    .onayami-title{
      text-align: center;
    }
    .onayami-subtitle{
      text-align: center;
    }
    .onayami-wrapper-img{
      margin-left: 0;
     margin-right: 0;
      text-align: center;
      margin-bottom: 1em;
    }
    .treatment-wrapper li{
      flex-direction: column;
    }
    .treatment-innner{
      width: 92%;
    }
    .treatment-wrapper a{
      margin-left: 5%;
      margin-right: 5%;
      margin-bottom: 40px;
      width: 90vw;
      border:1px solid #AFBF30;
      border-radius: 10px;
      padding: 10px 20px;
    }  
    .service-wrapper{
      flex-direction: column;
    }
    .service-wrapper:nth-child(2) {
      flex-direction: column;
    }
    .service-title{
      text-align: center;
    }
    .service-subtitle{
      text-align: center;
    }
    .service-text{
      width: 100%;
    }
    .service-wrapper-img{
      text-align: center;
    }
    .reservation-midashi p{
      line-height: normal;
    }
    .reservation-mail{
      font-size: 12px;
    }
    .clinic-info-wrapper{
      flex-direction: column;
    }
    .clinic-info-left{
      margin: 0 auto;
      width: 100%;
    }
    .clinic-info-right{
      margin: 0 auto;
      width: 100%;
    }
    .clinic-info-left-logo img{
      margin-bottom: 30px;
    }
    .clinic-info-left-logo p{
      margin-left: 10%;
      margin-right: 10%;
      line-height: normal;
    }
    .clinicinfo-googlemap{
      margin: o auto;
      padding: 1em 0;
    }
    .biz-hour{
      margin-top: 40px;
    }
    .emergency{
      margin-top: 80px;
    }
    .emergency p{
      margin-left: 10%;
      margin-right: 10%;
    }
    .emergency ul{
      margin-left: 10%;
      margin-right: 10%;
    }
    .card{
      margin-top: 80px;
    }
    .card ul{
      margin-left: 10%;
      margin-right: 10%;
    }
    #access{
      margin-top: 80px;
    }
    .parking{
      flex-direction: column;
    }
    .parking-left{
      width: 100%;
    }
    .parking-left p{
      margin-left: 5%;
      margin-right: 5%;
    }
    .parking-right{
      text-align: center;
      margin-top: 40px;
      margin-left: 10%;
      margin-right: 10%;
    }
    .footer-nav-b{
      display: none;
    }
    .footer-nav-a{
      width: 100%;
    }
    #clinic-info .clinic-info-title{
      height: 200px;
    }
    .clinic-info-title h2{
      padding-top: 60px;
    }
  }/* max-width:960px */


  /* タブレット用 */
@media only screen and (max-width: 800px) {
  /*ここに通常のCSSを入れる*/
  .mainvisual-1-p{
    margin-top: 2em;
  }
  .mainvisual1 img{
    width: 90%;
  }
  .timetable-top{
    top: 36em;
  }
  .mainvisual-2-text-h2{
    text-align: right;
  }
  .mainvisual-2-text{
    margin-left: 0;
    margin-right: 0;
    right: 0;
    left: 0;
  }
  .mainvisual-2-text p{
    line-height: 1.5em;
    background-color: #F2EBDF;
    background-size: cover;
  }
  .greeting-inner{
    flex-direction: column;
  }
  .greeting-left{
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
  }
  .greeting-right{
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 60px;
  }
  .access .googlemap-pc{
    display: none;
  }
  .access .googlemap-tab{
    display: block;
  }
  .gotop{
    width: 40px;
    height: 40px;
    text-indent: -9999px;
    opacity: 1;
    border: none;
    background: none;
    bottom: 10px;
    right: 10px;
  }
  .gotop::before{
     bottom: 0;
  }
  .dogcat-inner{
    display: flex;
    flex-direction: column;
  }
  .dogcat-wrapper-text{
  width: 12%;
  text-align: left;
  } 
  .dogcat-inner li{
    width: 100%;
    display: flex;
  }
  .dogcat-wrapper p{
    width: 58%;
  }
  .dogcat-wrapper{
    padding-bottom: 2em;
  } 
}
  
 

/* スマートフォン用 */
@media screen and (max-width: 640px) {
  .mainvisual-2-text-p{
    top: 31em;
    
  }
  .reservation-icon-wrapper{
    width: 30%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mainvisual-2-text{
    margin-left: 10%;
  }
  .access .googlemap-sp{
    display: block;
  }
  .access .googlemap-tab{
    display: none;
  }

  }
 
  /* スマートフォン用 */
  @media screen and (max-width:520px){
    .mainvisual2{
      top: 10em;
    }
    .mainvisual-2-h2{
      font-weight: 200;
      top:10em;
    }
    .mainvisual-2-text-p{
     top: 30em; 
    }
    .biz-hour{
      width: 80%;
      height: fit-content;
    }
    .top-timetable-text{
      width: 100%;
    }
    .news-fb {
      margin: 40px auto;
      display: flex;
      justify-content: center;
    }
    .fb-page{
      padding: 0 !important;
      margin: 0 !important;
      width: 320px !important;
      max-width: 320px !important;
      min-width: initial !important;
    }
    .news-insta {
      margin: 40px auto;
      display: flex;
      justify-content: center;
    }
      .instagram-media{
        padding: 0 !important;
        margin: 0 !important;
        width: 320px !important;
        max-width: 320px !important;
        min-width: initial !important;
      }
    .dogcat-wrapper{
      flex-direction: column;
    }
    .dogcat-wrapper p{
      width: 100%;
    }
    .dogcat-wrapper-text{
      width:100%;
      text-align: center;
      } 
      .dogcat-inner li{
        width: 100%;
        display: flex;
      }
      .dogcat-wrapper-img{
        width: 90%;
        text-align: center;
      }
      .dogcat-wrapper{
        padding-bottom: 2em;
      } 
    
  }

   /* スマートフォン小用 */
   @media screen and (max-width:420px){
     .timetable-top-add{
       display: none;
     }
     .mainvisual-2-h2{
       top:18em;
       left: 3%;
     }
     .mainvisual-2-text-p{
       top: 33em;
     }
     .news-fb{
      padding-left: 0;
      padding-right: 0;
    }
    .news-insta{
      padding-right: 0;
    }
   }




  /* 迷子里親情報 */
  .useful { 
    max-width: 1080px;
    margin: 0 auto;
  }
  /* テキスト */
  .useful {
    margin-left:3%;
    margin-right: 3%;
  }
  .useful-catch {
    padding-top: 5em;
    color: #AFBF30;
    font-weight: 500;
    font-size: 16px;
    line-height: 2;
    display: flex;
    align-items: center; /*垂直中心  */
    justify-content: left; /* 水平中心 */
  }
  .maigo-catch{
    padding-top: 10em;
  }
  .useful-catch:before {
    border-top: 1px solid;
    content: "";
    width: 6em; /* 線の長さ */
  }
  .useful-catch:before {
    margin-right: 1em; /* 文字の右隣 */
  }
  .useful-catch:after{
    display: none;
  }
  .useful-catch-tytle{
    margin-top: 2em;
    margin-bottom: 3em;
    font-weight: 300;
  }
  .useful p{
    margin-bottom: 3em;
    margin-top: 3em;
  }
  .useful li{
    margin-bottom: 2em;
    margin-left: 2em;
    color: #AFBF30;
    font-weight: bold;
  }
  .useful li a{
    margin-left: 2em;
    text-decoration: underline;
  }
  .satooya ul{
    padding-bottom: 6em;
  }

  /* usefulスマホ用 */
  @media screen and (max-width:520px){
   .useful li{
     margin-left: 0;
   }
   .useful li a{
    margin-left: 0;
  }
  }

/* 予防医療ページ */
  .yobou .catch {
    margin: 0 auto;
    color: #AFBF30;
    font-weight: 500;
    font-size: 26px;
    line-height: 2;
    display: flex;
    align-items: center; /* 垂直中心 */
    justify-content: center; /* 水平中心 */
  }
  .yobou .catch-midashi{
    padding-top: 10em;
  }
  .yobou-catch-p{
    margin-left: 5%;
    margin-right: 5vw;
  }