@charset "utf-8";
/* CSS Document */

div,section, p,img,h1,h2,h3,h4{
    /* border: 1px solid #91ff00; */
}

span,li{
    /* border: 1px solid #fb00ff; */
}

/******************** 共通 *******************/

a:link,a:visited {text-decoration: none;color:#425B80;}
a:hover,a:active{text-decoration: underline 1px;color:#78B9C6;}

img{max-width: 100%; height:auto;}

html{scroll-behavior: smooth;}

body{
    width: 100%;
    color: #425B80;
    font-size: 14px;
    font-family: "BIZ UDPGothic", sans-serif;
    font-weight: 400;
    font-style: normal;
}

p{
    line-height: 170%;
}

h1, h2, h3,h4{
    font-size: 24px;
    font-family: "BIZ UDPMincho", serif;
    font-weight: 400;
    font-style: normal;
    line-height: 170%;
}

li{
    list-style: none;
}


.line-up{
    display: flex;
    flex-direction: row;
}

.br-sp{
    display:none;
}

/* 背景青 */
.b-color-b{
    background-color: #F0F7F7;
    width: 100%;
}

/* ボタンー青 */
.btn{
    color: #FFFFFF;
    background-color: #78B9C6;
    border-radius: 2px;
    text-align: center;
}

.btn p{
    padding: 10px;
}

.btn a{
    display: block;
    width: 100%;
    height: 100%;
    padding:10px;
}

/* ボタンー濃い青 */
.btn-b{
    color: #FFFFFF;
    background-color: #425B80;
    border-radius: 2px;
    text-align: center;
}

.btn-b p{
    padding:10px;
}

.btn-b a{
    display: block;
    width: 100%;
    height: 100%;
    padding:10px;
}

.btn a:link,.btn a:visited {text-decoration: none;color:#FFFFFF;}
.btn a:hover,.btn a:active{text-decoration: underline 1px;color:#FFFFFF;}

.btn-b a:link,.btn-b a:visited {text-decoration: none;color:#FFFFFF;}
.btn-b a:hover,.btn-b a:active{text-decoration: underline 1px;color:#FFFFFF;}


/* main下層ページ */

.main{
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}


/********** ヘッダー **********/

header{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding:10px;
}

header .logo{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

header .logo img{
    margin-right: 10px;
}


/* 診療時間・休診日・予約を内包 */
header .box1{
    display: flex;
    flex-direction: row;
    justify-content: end;
    align-items: center;
    margin-bottom: 10px;
}

header .box1 p{
    text-align: center;
}

/* 診療時間・休診日　外郭 */
.box2-left{
    display: flex;
    flex-direction: row;
    margin-bottom: 5px;
    margin-right: 15px;
}

/* 診療時間・休診日　見出し */
header .box1 .box2-left .box3-left{
    border: 1px solid #425B80;
    border-radius: 2px;
    width: 80px;
    padding: 5px;
}

/* 診療時間・休診日　内容 */
header .box1 .box2-left .box3-right{
    margin-left: 10px;
    padding: 5px;
}

/* 予約　外郭 */
header .box1 .box2-right{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-bottom: 5px;
}

/* 予約　見出し */
header .box1 .box2-right .box3-left{
    margin-right: 20px;

}

/* 予約　内容 */
header .box1 .box2-right .box3-right{
    color: #FFFFFF;
    background-color: #425B80;
    border-radius: 2px;
    padding: 15px;
}



/* グローバルナビナビ　リスト */
.menu{
    display: flex;
    flex-direction: row;
    justify-content: end;
    align-items: center;
}

.menu li{
    margin-left: 50px;
    padding-right: 50px;
    border-right:1px solid #425B80 ;
}

.menu li:last-child{
    border-right:0;
}



/***** 下層ページヘッダー *****/


.headline .line{
    color: #FFFFFF;
    width: 100%;
    background-color: #425B80;
    padding:10px 50px;
}

.headline h2{
    text-align: center;
    margin-top: 20px;
    margin-bottom: 50px;
    font-size: 40px;
}

.headline .line a:link,.headline .line a:visited {text-decoration: underline;color:#FFFFFF;}
.headline .line a:hover,.headline .line a:active{text-decoration: underline 1px;color:#FFFFFF;}

/***** 画面下に固定するdiv２個 *****/

/* 予約ボタン */
.reserve-btn{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #FFFFFF;
    background-color: #425B80;
    border-radius: 10px;
    position: fixed;
    /* bottom: 90px; */
    bottom: 130px;
    right: 10px;
    width: 150px;
    height: 100px;
    z-index: 2;
}

.reserve-btn h2{
    font-weight: 700;
    margin-bottom: 10px;
}

/* 戻るボタン */
.return-btn{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 33px;
    position: fixed;
    /* bottom: 10px; */
    bottom: 50px;
    right: 10px;
    width: 66px;
    height: 66px;
    z-index: 3;
    /* background-color: #425B80; */
    /* font-size: 40px;
    font-weight: 700; */

}



.return-btn a:link,.return-btn a:visited {text-decoration: none;color:#FFFFFF;}
.return-btn a:hover,.return-btn a:active{text-decoration: none 1px;color:#FFFFFF;}


/********* フッター **********/

footer{
    background-color: #F0F7F7;
    padding-top: 50px;
    z-index: 2;
/**** ダックス 挿絵_親 ****/
    position: relative;
}

/**** ダックス 挿絵 ****/
footer .zoro{
    position: absolute;
    top: -80px;
    right:60px;
    }

footer .line-up{
    justify-content: center;
    align-items:stretch;
}

/* 左 */
footer .left{
    text-align: center;
}

footer p{
    text-align: center;
    font-size: 20px;
    font-family: "BIZ UDPMincho", serif;
    line-height: 110%;
}

/* 右 */


footer ul{
    padding:40px 20px;
}

footer li{
    line-height: 200%;
}

footer .left p{
    margin-top: 10px;
}

footer .copyright{
    color: #FFFFFF;
    background-color: #425B80;
    margin-top: 50px;
    padding: 5px;
}

footer .copyright p{
    font-size: 14px;
    font-family: "BIZ UDPMincho", serif;
    font-weight: 400;    
    text-align: center;
}



/********* コンタクト（念押し予約） **********/
.contact{
    margin: 150px auto;
    width: 800px;
    background-color: #F0F7F7;
    border: 1px solid #425B80;
    border-radius: 2px;
    padding: 50px;
    position: relative;
}

.contact .schnauzer{
position: absolute;
top: -50px;
}


.contact h2{
    text-align: center;
    font-size: 40px;
    margin-bottom: 30px;
}

.contact .box1{
    margin-bottom: 30px;
}

.contact .tel-n{
    text-align: center;
    font-size: 40px;
    font-weight: 700;
    font-family: "BIZ UDPMincho", serif;
    margin-bottom: 30px;
}

.contact .btn-b{
    margin-right: 10px;
    padding: 10px;
}

.contact .box1{
    text-align: center;
}

.contact img{
    vertical-align: bottom;
}

.contact .line-up{
    justify-content: center;
}

.contact .box2{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-right: 20px;
}

.contact .box2:last-child{
    margin-right: 0px;
}


/******************* トップページ ********************/


/********** キービジュアル *********/
.kv{
    border-top:5px solid #425B80;
    border-bottom: 2px solid #425B80;
    width: 100%;
    height: 690px;
    background-image:url(../img/kv.png);
    background-size:cover;
    background-position: center;
    position: relative;
    z-index: 1;
}

.kv .name{
    background-color: #FFFFFF;
    position: absolute;
    top: 350px;
    left: 110px;
}

.kv h1{
    font-size: 40px;
    text-align: center;
}

/********* 冒頭の短いお知らせ *********/
.top-info{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 1100px;
    background-color: #F0F7F7;
    margin: 80px auto ;
/****ハムスター_親 ****/
    position: relative;

}

/****ハムスター ****/
.top-info .hamustar{
    position: absolute;
    top:-35px;
    left:10px;
}

.top-info h2{
    font-size: 24px;
    margin-right: 10px;
}

.top-info .box1{
    background-color: #FFFFFF;
    width: 950px;
    margin: 10px;
    padding:0 20px;
}

.top-info .time{
    display: inline-block;
    width: 100px;
    margin-right: 50px; 
}


.top-info li{
    border-bottom:#F0F7F7 2px solid;
    a{
        display: block;
        width: 100%;
        height: 100%;
        padding:5px 20px;
    }
}

.top-info li:last-child{
    border-bottom: 0px;
}


/********** 診療内容 **********/

.medical-treatment{
    width: 1100px;
    margin: 0 auto;
    margin-bottom: 100px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    align-items:stretch;
}

.medical-treatment h2{
    text-align:center;
    margin-bottom: 15px;
}

.medical-treatment p{
    text-align:center;

}

.medical-treatment .box1{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* 左 */
/* 行 */
.medical-treatment .box2{
    display: flex;
    flex-direction: row;
    justify-content: center;
}

/* セル */
.medical-treatment .box3{
    width: 150px;
    height: 150px;
    border:1px solid #425B80;
    border-radius: 10px;
    margin-right: 10px;
    text-align: center;
}

.medical-treatment .box3 .link-max{
    display: block;
    width: 100%;
    height: 100%;
    padding: 20px;
}

.medical-treatment .box3:last-child{
    margin-right: 0;
}


/* 右 */

.medical-treatment .box4{
    width: 400px;
    background-color: #F0F7F7;
    border-radius: 10px;
    margin-bottom: 15px;
    padding: 20px;
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}

.medical-treatment .box5{
    width: 400px;
    border:1px solid #425B80;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
}

.medical-treatment .box5  img{
    width: 20%;
}


/********** インフォメーション **********/
.info{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    width: 1100px;
    margin:0 auto;
    padding-bottom: 50px;
}

.info-h2{
    padding-top:50px;
    padding-bottom: 20px;
    text-align: center;
}

/* 診療カレンダー */
.info .calender{
    width: 450px;
}

.info .calender .box1{
    background-color: #FFFFFF;
    margin-top:25px ;
    padding: 25px;
    /********** cat挿絵_親 **********/
    position: relative;
}

/********** cat挿絵 **********/
.info .box1 .cat{
    position: absolute;
    top:-78px;
    left:20px;
    img{
        border: 0;
    }
}

.info h3,.info h4{
    text-align: center;
}

.info .calender table{
    width: 300px;
    border-top: 1px solid #425B80;
    margin: 25px auto;
    margin-top: 0;
}

.info .calender th{
    width: 30px;
    height: 30px;
    margin: 5px;
    padding: 5px;
    text-align: center;
}

.info .calender td{
    text-align: center;
}

.info .calender .mon{
    background-color:#78B9C6;
    border-radius: 2px;
    width: 30px;
    height: 30px;
    display: flex;
    flex-direction:column;
    justify-content: center;
    margin: 5px auto;
}

.info .calender .wed{
    border:2px solid #78B9C6;
    border-radius: 2px;
    width: 30px;
    height: 30px;
    display: flex;
    flex-direction:column;
    justify-content: center;
    margin: 5px auto;
}

.info .calender p{
    line-height: 200%;
}

.info .calender .square1{
    color: #78B9C6;
    font-weight: 700;
}

.info .calender .square2{
    color: #78B9C6;
    
}

.info .calender .square3{
    color: #425B80;
}

/* 右側 */

.info .right{
    display: flex;
    flex-direction: column;

}

.info .right .time{
    background-color: #ffffff;
    margin-top:25px ;
    padding: 30px 20px;
}

.info .schedule{
    border: 1px solid #425B80;
    border-radius: 2px;
    padding: 15px;
    line-height: 100%;
}

.info .schedule table{
    width: 340px;
    margin: 0 auto;
}

.info .schedule th{
    padding: 10px;
}

.info .schedule td{
    color: #78B9C6;
    padding: 10px;
}


.info .schedule tbody{
    border-top:1px solid #425B80;
}

.info .schedule .shinryobi{
    width: 80px;
    min-width: 80px;
    margin-right: 100px;
}

/* 備考 */
.info .schedule .remask{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    img{
        vertical-align: text-top;
    }
}

.info .time .box1{
    padding: 20px;
    padding-bottom: 0;
}

.info .about-pay{
    background-color: #FFFFFF;
    padding: 0 20px 20px 20px;
}

.info .about-pay .boder{
    border:1px solid #425B80;
    border-radius: 2px;
    padding: 20px;
}

.info .about-pay .boder .box1 .line-up{
    justify-content: center;
    align-items: center;
}

.info .about-pay h3{
    font-size: 14px;
    font-weight: 700;
    text-align: left;
    margin-bottom: 10px;
}

.info .about-pay .box1{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    img{
        vertical-align:middle;
    }
}


/********** アクセス **********/

.access{
    padding-top: 50px;
    width: 1100px;
    margin: 0 auto;
    position: relative;
}

.access h2{
    text-align: center;
    margin-bottom: 20px;
}

.access .box1{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.access .box1 .right{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 500px;
    img{
        border: 1px solid #425B80;
    }
}



.access .box1 .right .line-up{
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom: 10px;
}

.access .box1 .right .line-up:nth-child(2){
    margin-bottom: 0px;
}

.access .box1 .right .line-up .left{
    margin-right: 10px;
    width: 80px;
    min-width:80px;
    .btn-b{
        padding:5px 10px;
    }   
}

.access .gmap{
    border: 1px solid #425B80;
}

.access .gmap-sp{
    display: none;
}



/******************** 診療内容 ********************/

/***** キービジュアル *****/
.medical-care .kv{
    background-image: url(../img/kv-mk.png);
    width: 100%;
    height: 300px;
    background-size:cover;
    background-position: center;
    position:relative;
    z-index: 1;
    margin-bottom: 50px;
    border: 0;
    overflow: hidden;
}

.medical-care .kv .box1{
    background-color: rgba(255, 255, 255, 0.75);
    width: 550px;
    position: absolute;
    top: 50px;
    right: 50px;
    padding: 20px;
}

.medical-care .kv .box1 h2{
    text-align: center;
}

/***** メイン *****/
.medical-care .main .box1{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 100px;
    border-radius: 2px;
    padding: 20px;
    background-color:#F0F7F7;
}


.medical-care .main .box1 h2{
    margin-bottom: 10px;
}

.medical-care .main .box1 .left{
    width: 850px;
    display: flex;
    flex-direction: column;
    justify-content:space-between;
}


.medical-care .main .box1 .left .box2{
    display: flex;
    flex-direction: row;
    justify-content:end;
}

.medical-care .main .btn{
    width: 140px    
}

.medical-care .main .box1 .right{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


/***** 健康診断 *****/

/* 大外枠　上部box１を継承 */
.medical-care .main .health-check .box1{
    margin-bottom: 50px;
}

/* 見出し */
.medical-care .main .health-check .check-box1{
    background-color: #F0F7F7;
    border-radius: 2px;
    margin-bottom: 20px;
    padding: 20px;
    text-align: center;
}

.medical-care .main .health-check .check-box1 h2{
    text-align: center;
    line-height: 100%;
}

/* テーブル横並べ */
.medical-care .main .health-check .medical-care-check{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background-color: #F0F7F7;
    border-radius: 2px;
    margin-bottom: 0px;
    padding: 20px;
}

/* 外枠 */
.medical-care .main .health-check .medical-care-check .box1-bd{
    width: 500px;
    border: 2px solid #425B80;
    padding: 15px;
    border-radius: 2px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* 見出し */
.medical-care .main .health-check .medical-care-check .box1-bd .box1{
    width:100%;
    background-color: #425B80;
    border-radius: 2px;
    color: #FFFFFF;
    margin-bottom:10px;
    padding:15px;
    text-align: center;
    /* align-items: center; */
    h3{
        line-height: 100%;
    }
}
.medical-care .main .health-check .medical-care-check .box1-bd .box1  h3{
margin: 0 auto;

}

.medical-care .main .health-check .medical-care-check li{
    line-height: 170%;
}

.medical-care .main .health-check .medical-care-check ul{
    display: flex;
    flex-direction: row;
    margin-left: 2rem;
    li{
        list-style:disc;
        margin-right: 30px;
        padding-left: 0px;
    }
}

.medical-care .main .health-check .medical-care-check .box1-bd .bold{
    font-family: "BIZ UDPMincho", serif;
    font-size: 40px;
    font-weight: 700;
    text-align: right;
}


/******************** ワクチン ********************/


/***** キービジュアル *****/

.vaccine .kv{
    background-image: url(../img/vaccine-kv.png);
    width: 100%;
    height: 300px;
    background-size:cover;
    background-position:center;
    position:relative;
    z-index: 1;
    margin-bottom: 50px;
    border: 0;
    overflow: hidden;
}

.vaccine .kv .box1{
    background-color: rgba(255, 255, 255, 0.75);
    width: 550px;
    position: absolute;
    top: 50px;
    right: 50px;
    padding: 20px;
}

.vaccine .kv .box1 h2{
    text-align: center;
}

/* jump */
.vaccine .main .jump{
    width:100%;
    margin-bottom: 50px;
}

.vaccine .main .jump ul{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.vaccine .main .jump li{
    width: 200px;
}

.vaccine .main .jump li a{
        display: block;
        width: 100%;
        height: 100%;
        padding: 10px;
}

/* main */

/* box top */
.vaccine .main .box1{
    background-color: #F0F7F7;
    margin-bottom: 100px;
    border-radius: 2px;
    padding: 20px;
}

.vaccine .main .box1 h2{
    margin-bottom: 10px;
}

/* time */
.vaccine .main .box2{
    margin-bottom: 20px;
}

.vaccine .main .line-up{
    justify-content: flex-start;
    align-items: center;
}

.vaccine .main .btn-b{
    min-width: 100px;
    margin-right: 20px;
    padding: 10px;
}

/* price */
.vaccine .main .box3{
    display: flex;
    flex-direction: row;
    justify-content: end;
    margin-top:20px
}

.vaccine .main .btn{
    min-width: 150px;
}


/******************** 予約について ********************/


/* リード文 */

.reserve_page .lead{
    margin-bottom: 50px;
}

.reserve_page .lead p{
    text-align: center;
    font-size: 20px;
}

/* 予約詳細 */
.reserve_page .reserve_box{
    margin:50px auto 100px;
    width: 800px;
    background-color: #F0F7F7;
    border-radius: 2px;
    padding: 50px 0px 30px 0;
}

.reserve_page .inner{
    background-color: #FFFFFF;
    margin-bottom: 30px;
}

.reserve_page .inner h2{
    text-align: center;
    font-size: 20px;
    font-weight: bold;
 }

 .reserve_page  .inner02 p{
    margin-bottom: 20px;
    text-align: center;
 }

 .reserve_page .inner03 p{
    font-weight: bold;
}

.reserve_page .inner04 {
    text-align: center;
}

.reserve_page .inner04 p {
    display: inline-block;
    text-align: left;
}

/* アクセス情報ボタン */

.reserve_page .btn{
    margin: 0 auto;
    margin-bottom: 20px;
    width: 500px;
    font-size: 20px;
}


/******************** 初診の方 ********************/

.first_visit{
    max-width: 1200px;
    margin: 0 auto;
}


/* 持ち物タイトル */
.first_visit .fs_lead h3{
    font-family: "BIZ UDPGothic", sans-serif;
    text-align: center;
    font-weight: bold;
}

/* 持ち物ボックス */
.first_visit .box01{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    margin: 50px  auto 100px;
    width: 800px;
    background-color: #F0F7F7;
    border-radius: 2px;
    padding: 30px 0px;
}

/* 初診手順-------------------*/
/* 枠*/
.first_visit .first_inner01{
    display: flex;
    justify-content: space-between;
    margin: 80px 0;
}

.first_visit .first_inner01 .box{
    background-color: #FFFFFF;
    border-radius: 2px;
    border-top-left-radius: 0;
    border: 3px solid #78B9C6; 
    padding: 30px; 
    display: flex;
    flex-direction:column;
    justify-content: top;
    position: relative;
    width: 550px;
}

.first_visit .box img{
    margin: 10px auto 10px;
}

.first_visit .first_imgbox{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 160px;
    margin: 0 auto;
    margin-bottom: 20px;
}

.first_visit .attention{
    font-weight: bold;
}

.first_visit .box .box02{
    margin-bottom: 20px;
}

.first_visit .first_inner01 .box h3{
    font-weight: bold;
    font-family: "BIZ UDPGothic", sans-serif;
    text-align: center;
    margin-bottom: 20px;
}
  
/* stepの箱*/
.first_visit .step {
    color: #FFFFFF;
    width: 80px;
    background-color: #78B9C6;
    padding: 3px;
    position: absolute;
    top: -30px;
    left: -2.5px;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
} 
.first_visit .step  .txt{
    text-align: center;
} 

.first_visit .btn {
    width: 40%;
    margin: 100px auto;
    font-size: 20px;
} 



/******************** 当院について ********************/


/********** キービジュアル **********/
.about .kv{
        background-image: url(../img/about/about-kv.png);
        width: 100%;
        height: 300px;
        background-size:cover;
        background-position: center;
        position:relative;
        z-index: 1;
        margin-bottom: 50px;
        border: 0;
        overflow: hidden;
    }

.about .kv .box1{
        background-color: rgba(255, 255, 255, 0.75);
        width: 550px;
        position:absolute;
        top: 50px;
        left: 50px;
        padding: 20px;
}
.about .box1 h2{
    text-align: center;
}

/***** スタッフ紹介 *****/

.staff{
    line-height: 200%;
    font-size: 14px;
}

.staff .wrap{
    margin-bottom: 50px;
}


.staff .staff-img-wrap{
    text-align: center;
    margin-bottom: 20px;
}

.staff .line-up{
    justify-content: space-evenly;
}

.staff .box1{
    border: 1px solid #425B80;
    border-radius: 2px;
    width: 450px;
    padding: 10px;

}

.staff .staff-date{
    margin-bottom: 20px;
}

.staff .position{
    color: #78B9C6;
    font-size: 14px;
    font-weight: 700;
    text-align: left;
    display: block;
}

.staff .name{
    font-size: 24px;
    margin-right: 20px;
}

/* 経歴 */

.staff .career{
    margin-bottom: 20px;

}

.staff h3{
    font-size: 14px;
    font-weight: 700;
    width: 50px;
    border: 1px solid #425B80;
    border-radius: 2px;
    text-align: center;
}

.staff li{
    margin-left: 10px;
}

.staff .career .date{
    display: inline-block;
    width: 140px;
}
.staff .career .text{
    display: inline-block;
}

/********** 院内写真 **********/


.in-clinic .innai{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 20px;
}

.in-clinic .innai div:first-child{
    margin-right: 1%;
}

.in-clinic .innai div:last-child{
    margin-left: 1%;
}

.in-clinic p{
    text-align: center;
}


/******************** 料金表 ********************/

/* ページ内リンク */
.price_page .jump{
    width:100%;
    margin-bottom: 50px;
}

.price_page .jump ul{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.price_page .jump li{
    width: 200px;
}

.price_page .jump li a{
    display: block;
    width: 100%;
    height: 100%;
    padding: 10px;
}


/* 料金一覧*/

/* タイトル*/
.price_page .subttl {
    margin-bottom: 50px;
}

.price_page .subttl h3{
    text-align: center;
}

/* 表*/
/* 診察料,混合ワク,フィラリア３,去勢*/
.price_page .table_box{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 100px;
}

.price_page .price_table {
    text-align: center;
    border: 2px solid #78B9C6;
    position: relative;
    width: 450px;
}

.price_page .price_table th {
    color: #ffffff;
    background: #78B9C6;
    border: 1px solid #ffffff;
    text-align: center;
    height: 30px;
}

.price_page .price_table td {
    width: 50%;
    height: 70px;
}

/* 混合ワクチンわん*/
.price_page .table_box02 {
    margin-right: 10px;
}

/* 混合ワクチンねこ*/
.price_page .table_box03 {
    margin-left: 10px;
}

.price_page .table_box02 .pet, .table_box03 .pet ,.table_box06 .pet{
    margin-bottom: 5px;
    width: 20%;
}

/* 狂犬病*/
.price_page .table_box04 {
    margin: 0 auto;
    margin-bottom: 100px;
}

.price_page .table_box07{
    display: flex;
    justify-content: center;
    align-items: center;
}

.price_page .attention02{
    margin-top: 5px;
}

/* フィラリア予防*/
.price_page .table_box05{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 60px;
}

/* ノミ・マダニわんにゃんタイトル*/
.price_page .table_box06 {
    max-width: 920px;
    margin:5px auto;
}

.price_page .mix {
font-size: 12px;
font-weight: bold;
}



/******************** お知らせ ********************/

.news_page {
    margin-bottom: 200px;
}

.news_page li{
    border-top:1px solid #425B80;
    a{
        display:block;
        width: 100%;
        height: 100%;
        padding: 15px 50px;
    }
}

.news_page li:last-child{
    border-bottom:1px solid #425B80;
}

.news_page .time{
    display: inline-block;
    width: 100px;
    margin-right: 40px;
}


/******************** お知らせ_下層********************/

.news_under {
    padding: 0 100px 100px 100px;
}

.news_under .box {
    display: flex;
    flex-direction: column;
    align-items: center;
    }


.news_under h3{
    margin-bottom: 30px;
    border-bottom :1px solid  #425B80;
}

.news_under p{
    margin-bottom: 50px;
}

.news_under .btn{
    width: 500px;
    margin: 0 auto;
    margin-top: 50px;
}




/******************** 去勢・ ********************/
/********** キービジュアル **********/
.kyosei-kv{
    background-image: url(../img/img-mc-castspay/sinryou-hinin-kv.png);
    width: 100%;
    height: 300px;
    background-size:cover;
    background-position: center;
    position:relative;
    z-index: 1;
    margin-bottom: 50px;
    border: 0;
    overflow: hidden
}


.kyosei-kv .box1{
    background-color: rgba(255, 255, 255, 0.75);
    width: 550px;
    position:absolute;
    top: 30px;
    right: 50px;
    padding: 20px;
}

.kyosei-kv .box1 h2{
text-align: center;
}

.kyosei-merito {
    display: flex;
    justify-content: center;
   margin: 50px 0;
}

/********** メリット **********/
.kyosei-1{
    display: flex;
    justify-content: center;
}
.kyosei-1 img{
    padding: 0 25px;
}
.kyosei-1 p{
    padding: 20px;
    text-align: center;
}

/********** 早期手術 **********/
.souki{
    display: flex;
    flex-direction: row;
    background-color: #F0F7F7;
    width:1100px;
    margin:50px auto;
    padding: 10px 10px 10px 20px;
}

.souki .souki-box-h2{
    margin: 22px 10px;
    width: 220px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.souki h2{
    font-size: 20px;
    line-height: 100%;
}
.souki-1{
    background-color: #ffffff;
    padding: 13px;
    width: 1050px;
    margin: 0 0 0 50px;
}

.sp-box1{
    display: none;
}
.souki-1 h3{
    display: none;
}

/********** 避妊・去勢box **********/

.surgery{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background-color: #ffffff;
}

.surgery .box{
    padding: 30px;
    margin-bottom: 20px;
}
.surgery .box1{
    background-color: #F0F7F7;
    width: 45%;
}

.surgery .box1 h2{
   padding: 0 10px;
}
.surgery .box1 .box2{
    background-color: #425B80;
    color: #FFFFFF;
    width: 100px;
    padding: 5px;
    border-radius: 2px;
    margin-bottom: 10px;
    margin-top: 10px;
} 
.surgery .box1 .box2 p{
    text-align: center;
}


    





/* タブレットレイアウト : 768 px以下。PCレイアウトからスタイルを継承。 */

/******************* ドロワー ********************/

.drawer a:link,.drawer a:visited {text-decoration: none;color:#425B80;}
.drawer a:hover,.drawer a:active{text-decoration: underline 1px;color:#78B9C6;}


.drawer-brand{
    font-size: 20px;
    line-height: 150%;
    padding-top: 20px;
    padding-bottom: 0;
    font-family: "BIZ UDPGothic", sans-serif;
    text-align: center;

    img{
        margin-bottom: 20px;
    }
}

.drawer-menu-item{
    width: 80%;
    margin: 0 auto;
    padding-bottom: 1px;
    font-size: 16px;
    font-family: "BIZ UDPGothic", sans-serif;
}

.drawer--right{
    display: none
}

.drawer-hamburger-icon,
.drawer-hamburger-icon:before,
.drawer-hamburger-icon:after {
    background-color: #425B80;

}

.drawer--right .reserve{
    color: #FFFFFF;
    font-size: 14px;
    background-color: #425B80;
    margin: 10% auto;
    padding: 2%;
    width: 80%;
    border-radius: 2px;
    p{
        text-align: center;
        line-height: 150%;
    }

    .top{
        font-weight: 700;
        padding-bottom: 2%;
    }
}


@media only screen and (width<769px) {

    /***** ドロワー *****/
    .drawer--right{
        display: block;
    }

    /***** ボディ・ヘッダー *****/
    body{
        font-size: 16px;
    }

    header .box1,nav{
        display: none;
    }

    header .logo h1{
        line-height: 130%;
    }

    .reserve-btn{
        display: none;
    }

    .br-sp{
        display: inline;
    }
   
    
    /***** 念押しコンタクト *****/

    .contact{
        margin:70px auto 100px;
        width: 95%;
        padding: 2%;
    }

    .contact h2{
        font-size: 20px;
        margin-bottom: 20px;
    }

    .contact .tel-n{
        font-size: 20px;
        margin-bottom: 20px;
    }
    
    .contact .box2 .btn-b{
        min-width: 80px;
        padding:2%;
        font-size: 14px;
    }

    .contact .line-up{
        flex-direction: column;
    }

    .contact .box2{
        justify-content: start;
        margin-right: 0;
        margin-bottom: 10px;
    }

    .contact .box2:last-child{
        margin-bottom: 0;
    }

    .contact img{
        vertical-align: middle;
    }

    .contact .schnauzer img{
        width: 90%;
          /* display: none; */
        }
    
    /***** フッター *****/

    footer{
        padding-top: 20px;
    }

    footer .line-up{
        flex-direction: column;

    }

    footer .left{
        margin-bottom: 10px;
    }

    footer .right .line-up{
        flex-direction: row;
        justify-content: center;
    }

    footer .right .line-up .box1{
        width: 50%;
        /* background-color: beige; */
        ul{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: end;
            padding-right: 5px;
            li{
                min-width: 100px;
            }
        }
    }
    footer .right .line-up .box2{
        width: 50%;
        ul{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: start;
            padding-left: 25px;
            li{
                min-width: 110px;
            }
        }
    }

    footer ul{
        padding: 0;
    }

    footer .copyright{
        margin-top: 15px;
    }

/********* ゾロ君 挿絵****************************************/
    footer .zoro{
    top: -55px;
    right:10px;
    }

    footer .zoro img{
        width: 80%;
        }
    

    /***** 戻るボタン *****/

    .return-btn{
        position: fixed;
        width: 50px;
        height: 50px;
        border-radius: 25px;
        font-size: 30px;
    }


    /***** キービジュアル *****/
    .kv{
        /* height: 50vh; */
        height: 40vh;
        margin-bottom: 30px;
    }

    .kv .name{
        display: none;
    }


    /***** 冒頭お知らせ *****/

    .top-info{
        flex-direction: column;
        width: 100%;
        margin: 40px auto;
    }

    .top-info h2{
        font-size: 20px;
        margin-right:0;
        margin-top: 10px;
        line-height: 100%;
    }

    .top-info .box1{
        width: 90%;
        margin:10px 2%;
        padding:5px;
    }

    
    .top-info .time{
        width: auto;
        margin-right: 0;
        margin-bottom: 2%;
        font-size: 14px;
    }

    .top-info li{
        a{padding: 5px;}
    }


    /***** 診療内容 *****/

    .medical-treatment{
        width: 100%;
        flex-direction: column;
        margin-bottom: 0;
    }

    .medical-treatment h2{
        font-size: 24px;
        margin-bottom: 0;
    }

    /* 診療内容（上） */

    .medical-treatment .box1{
        width: 96%;
        margin:0 auto;
        padding: 0;
        margin-bottom: 20px;
    }

    .medical-treatment .box3{
        margin-bottom: 2%;
        padding: 2%;
    }

    /* 診療対象（下） */
    .medical-treatment .box4{
        width: 95%;
        margin:0 auto 2% auto;
        padding: 2%;
    }

    /* 診療可能動物 */
    .medical-treatment .box4 img{
        width: 90%;
    }
    
    .medical-treatment .box5{
        width: 95%;
        margin: 0 auto;
        margin-bottom: 20px;
    }

    .medical-treatment .box5  img{
        width: 15%;
    }
    

    /***** インフォメーション *****/
    .info{
        flex-direction: column;
        width: 100%;
        padding-bottom: 20px;
    }

    .info-h2{
        display: none;
    }

    /* 診療カレンダー */
    .info .calender{
        width: 95%;
        margin: 20px auto;
    }

    .info .calender .box1{
        padding: 2%;
    }

    .info .calender table{
        width: 100%;
    }


    /* 右 */
    .info .right{
        width:100%;
        margin-top: 2%;
    }

    
    .info .right .time{
        padding: 2%;
    }

    .info .schedule{
        border: 1px solid #425B80;
        border-radius: 2px;
        padding: 2%;
        line-height: 100%;
    }

    .info .schedule table{
        width: 100%;
        margin: 0 auto;
    }

    .info .schedule th{
        padding: 2%;
    }
    
    .info .schedule td{
        padding: 2%;
    }

    .info .schedule .shinryobi{
        margin-right: 10%;

    }

    /* 診療時間 */
    .info .right .time{
        width: 95%;
        margin: 0 auto;
    }

    .info .time .box1{
        margin-top: 10px;
        padding:2% 0;
    }

    .info .schedule table{
        width: 100%;
    }

    .info .schedule .remask{
        flex-direction: column;
        
    }

/********** cat挿絵 **********/
.info .box1 .cat {
    top:-70px;
    left:20px;
}

.info .box1 .cat img{
    width: 90%;
}

    /* 支払い */
    .info .about-pay{
        width: 95%;
        margin: 0 auto;
        padding: 2%;
    }

    .info .about-pay .boder{
        width: 100%;
        padding: 2%;
    }



    /* アクセス */
    .access{
        width: 95%;
        margin-top: 20px;
        padding: 2%;
        border: 1px solid #425B80;
        /****cat挿絵余白(下)****/
        margin-bottom: 80px;

    }

    .access .box1{
        flex-direction: column-reverse;
    }

    .access .box1 .right{
        width: 100%;
    }
    
    .access .box1 .right .line-up:nth-child(2){
        margin-bottom:0;
    }

    .access .gaikan{
        display:none;
    }

    .access .gmap{
        margin: 0 auto;
    }

    .access .gmap-pc{
        display: none;
    }

    .access .gmap-sp{
        display: block;
        border:1px solid #425B80;
        margin:5% auto 0;
        padding: 2%;
        text-align: center;
    }

    .access .box1 .right .line-up .left{
        margin-right: 10px;
        min-width: 80px;
        .btn-b{
            padding: 0;
        }
    }

/********** cat挿絵余白(上)**********/
.b-color-b{
        margin-bottom: 60px ;
    }
    

    /********** 下層ページ **********/

    .headline .line{
        padding:2%;
    }

    .headline h2{
        margin-bottom: 20px;
    }

    /********** 診療内容ページ ***********/

    /***** キービジュアル *****/
    .medical-care .kv{
        height: auto;
        background-size:100%;
        background-repeat: no-repeat;
        background-position:top;
        margin-bottom: 20px;
    }


    .medical-care .kv .box1{
        background-color: #FFFFFF;
        position:static;
        width: 95%;
        margin: 0 auto;
        padding: 5% 0;
        top:0px;
        right: 0;
        margin-top: 25%;
    }

    .medical-care .kv .box1 h2{
        font-size: 20px;
    } 

    .medical-care .main .box1{
        flex-direction: column;
        width: 95%;
        margin: 0 auto;
        margin-bottom: 5%;
        text-align: center;
    }

    .medical-care .main .box1 .left{
        width: 100%;

    }

    .medical-care .main .box1 .left .box2{
        margin-top: 2%;
    }

    .medical-care .main .box1 .right{
        display: none;
    }

    /***** 健康診断*****/
    .medical-care .main .health-check .check-box1{
        margin-bottom: 5%;
    }

    .medical-care .main .health-check .medical-care-check{
        flex-direction: column;
    }

    .medical-care .main .health-check .medical-care-check .box1-bd{
        width: 100%;
        margin-bottom: 50px;
    }

    .medical-care .main .health-check .medical-care-check .box1-bd:last-child{
        margin-bottom: 0;
    }

    .medical-care .main .health-check .medical-care-check ul{
        /* flex-direction: column; */
        display: grid;
        width: fit-content;
        column-gap: 3em;
        grid-template-columns: repeat(3, auto);
        li{
            margin-right: 0;
        }
    }


    .medical-care .main .health-check .medical-care-check .box1-bd .box1{
        margin-bottom:5%;
        padding:3%;
    }

    .medical-care .main .health-check .medical-care-check .box1-bd .bold{
        font-size: 24px;
    }

    

/********** 診療内容・ワクチンページ ***********/

    /* kv */
    .vaccine .kv{
        height: auto;
        background-size:100%;
        background-repeat: no-repeat;
        background-position:top;
        margin-bottom: 20px;

    }
    .vaccine .kv .box1{
        background-color:#FFFFFF;
        position:static;
        width: 95%;
        margin: 0 auto;
        padding: 5% 0;
        top:0px;
        right: 0;
        margin-top: 25%;
    }

    .vaccine .kv .box1 h2{
        font-size: 20px;
    } 

    /* jump */
    .vaccine .main .jump{
        width: 95%;
        margin: 0 auto;
        margin-bottom: 10px;
    }

    .vaccine .main .jump .sp{
        margin: 0 auto;
        justify-content: center;
        flex-wrap: wrap;
        column-gap: 2em;
    }

    .vaccine .main .jump .sp .btn:last-child{
        justify-self: center;
    }

    .vaccine .main .jump li{
        width: auto;
        margin-bottom: 10px;
    }

    /* main */
    .vaccine .main .box1{
        width: 95%;
        margin: 0 auto;
        margin-bottom: 5%;
        padding: 2%;
    }
    
    .vaccine .main .box1 h2{
        margin-bottom: 2%;
    }

    .vaccine .main .btn-b{
        max-width: 100px;
        min-width: 60px;
        width: 20%;
    }


    
/******************** 予約について ********************/
    /***** 予約box *****/

    .reserve_page .sp {
        display: block;
    }

    .reserve_page .reserve_box{
        width: 95%;
        margin-bottom: 50px;
    }

    .reserve_page .btn{
        width: 90%;
        margin-bottom: 100px;

    }

    
/******************** 初診の方 ********************/
    
    
    .first_visit .box01{
        flex-direction: column; 
        width: 95%;
        padding: 5%;
    }
    
    .first_visit .step {
        top: -35px;
    }

    .first_visit .first_imgbox{
        width: 100%;
        margin-bottom: 20px;
    }
    
    
    .first_visit .first_inner01{
        display: block; 
        width: 95%;
        margin: 0 auto;
        padding: 0;
    }
    
    .first_visit .first_inner01 .box{
        margin-bottom: 100px ;
        width: 100%;
        padding: 5%;
        height: auto;
    }

    .first_visit .first_imgbox{
        margin-bottom: 0;
    }

    .first_visit .first_inner01 .box h3{
        margin-bottom: 0;
    }
    
    .first_visit .box .box02  br{
        display: none; 
    }
    
    .first_visit .box .box02 .sp{
        display: block; 
    }
    
    .first_visit .btn {
        width: 400px;
        margin: 0 auto 100px;
    
    } 

    /***** 138行目の改行なくす *****/
     .first_visit .sp_no {
        display: none;
    }

/********* 当院について *********/

    /***** キービジュアル *****/
    .about .kv{
        height: auto;
        background-size:100%;
        background-repeat: no-repeat;
        background-position:top;
        margin-bottom: 20px;
    }


    .about .kv .box1{
        position:static;
        width: 95%;
        margin: 0 auto;
        padding: 5% 0;
        top:0px;
        right: 0;
        margin-top: 25%;
        background-color: #FFFFFF;
    }

    .about .kv .box1 h2{
        font-size: 20px;
    } 

    /* スタッフ紹介 */

    .staff .line-up{
        flex-direction: column;
    }
    .staff .wrap{
        margin: 0 auto;
        margin-bottom: 50px;
        max-width: 95%;
    }
    
    .staff .box1{
        width: 95%;
        margin: 0 auto;
        margin-bottom: 50px;
    }

    .staff .box1:last-child{
        margin-bottom: 0;

    }

    .staff .staff-img-wrap-h{
        text-align: center;
        margin-bottom: 20px;
    }

    /* 経歴 */

    .staff .career .date{
        display:block;
        width: 140px;
    }

    .staff .career .text{
        display: inline-block;
        margin-left: 1rem;
    }

    .in-clinic{
        width: 95%;
        margin: 0 auto;
    }

    .in-clinic .innai{
        margin-bottom: 10px;
    }

    .in-clinic .innai div:first-child{
        margin-right: 1%;
    }

    .in-clinic .innai div:last-child{
        margin-left: 1%;
    }




/******************** 料金表********************/

    /* jump */
    .price_page .jump{
        width: 100%;
        margin: 0 auto;
        margin-bottom: 20px;
    }

    .price_page .jump .sp{
        margin: 0 auto;
        justify-content: center;
        flex-wrap: wrap;
        column-gap: 2em;
    }

    .price_page .jump .sp .btn:last-child{
        justify-self: center;
    }

    .price_page .jump li{
        width: 180px;
        margin-bottom: 10px;
        padding: 2%;
        btn{
            max-width: 100px;
            min-width: 50px;
        }
    }

    /* タイトル*/
    .price_page .subttl {
        margin-bottom: 15px;
    }

    /***** テーブル横幅*****/
    .price_table{
        width: 100%;
    }


    /***** 表内*****/
    .price_page .price_table th{
        width: 50%;
        padding: 5%;
    }

    .price_page .price_table td{
        padding: 5%;
    }

    .price_page .price_table{
        width: 95%;
    }


    /***** 狂犬病説明*****/
    .price_page .attention02{
        font-size: 14px;
    }

    .price_page .table_box{
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 50px;
    }

    .price_page .table_box05{
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .price_page .table_box02 {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin: 0 0 50px 0;
    }

    /* 混合ワクチンねこ*/
    .price_page .table_box03 {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin-left: 0px;
    }

    /* ノミ・マダニ、わんにゃんタイトル*/
    .price_page .table_box06 {
        width: 80px;
        padding: 0;
        margin: 0  auto 5px ;
        border-bottom: solid 0px  #78B9C6;
    }

    .price_page .table_box02 .pet, .table_box03 .pet , .table_box06 .pet{
        margin-bottom: 5px;
        text-align: center;
        width: auto;
    }

    .table_box06 .pet{
        /* width: 80px; */
        width: auto;
    }

/******************** お知らせ********************/
    /* 外枠*/

    .news_page {
        width: 95%;
        margin: 0 auto;
        margin-bottom: 100px;
    }

    .news_page .time{
        width: auto;
        margin-right: 0;
        margin-bottom: 2%;
        font-size: 14px;
    }

/******************** お知らせ_下層********************/
    .news_under {
        margin: 0 auto 50px;
        padding: 0;
        width: 95%;
    }

    .news_under .container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .news_under p{
        margin-bottom: 20px;
    }

    .news_under .btn{
    width: 80%;
    }


/********** ハムスター**********/
.top-info .hamustar{
        top:-20px;
        left:5px;
    }
    .top-info .hamustar img{
        width: 90%;
    }

        
/******************** 去勢・ ********************/
/********** キービジュアル **********/

    .kyosei-kv{
        height: auto;
        background-size:100%;
        background-repeat: no-repeat;
        background-position:top;
        margin-bottom: 20px;
    }
   
   
    .kyosei-kv .box1{
        background-color: #FFFFFF;
        position:static;
        width: 95%;
        margin: 0 auto;
        padding: 5% 0;
        top:0px;
        right: 0;
        margin-top: 25%;
    }

    .kyosei-kv .box1 h1{
        font-size: 20px;
    }
   

/********** メリット **********/
    .kyosei-merito .main{
        width: 100%;
    }
    .kyosei-merito h3{
        display: block;
        padding:0 auto;
        text-align: center;
    }
    .kyosei-1 img{
        padding: 3%;
    }
    .kyosei-1 p{
        padding: 3%;
    }

/********** 早期手術 **********/
    .souki{
        width: 95%;
        padding: 2%;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .souki .souki-box-h2{
        width: 100%;
        background-color: #ffffff;
        margin: 0;
        padding:2%;
    }

    .souki h2{
        margin: 0;
        width: 100%;
        text-align: center;
    }

    .souki-1{
        margin:0;
        padding: 2%;
        width: 100%;
    }

    /* ---オスメス病気--- */
    .surgery{
        margin-bottom: 100px;
        flex-direction: column;
    }
    
    .surgery .box1{
        width: 95%;
        margin-top:5%;
        margin-bottom: 5%;
    }

    .surgery .box1 h2{
        padding: 0 3%;
    }
    
    .surgery .box1 .box2 p{
        text-align: center;
    }

    



}



@media only screen and (width<480px) {
    .medical-treatment .box1{
        width: 96%;
        margin:0 auto;
        padding: 0;
        margin-bottom: 20px;
    }

    .medical-treatment .box3{
        /* margin-bottom: 1.5%; */
        padding: 1.5%;
    }

    /***** 診療内容 *****/

    .medical-treatment p{
        font-size: 15px;
    }













}