@charset "UTF-8";
/* 目次 
 * 1. 共通
 * 2. トップページ
 * 3. aboutusページ
 * 4. 
 * 5. 
 * 6. 
*/
@media screen and (max-width:900px) {
div.headline{
  padding: 10px;
}

	
#top .bnner{
	width: 100%;
	flex-wrap: wrap;
	justify-content: flex-start;
}
#top .bnner li{
	width: 50%;
	flex-grow: 0;
}
	
	
}
@media screen and (max-width:800px) {
	
img {
    width: auto;
    height: auto;
    max-width: 100%;
	}
	
	img{
		width: auto;
	}	
	
	ul.characteristic-txt li img{
    width: 15%;
  }

	
	
/*	footer*/
	
	.Ft-tel-G p.Ft-logo01,
	.Ft-tel-G p.Ft-logo02{
			margin: 0 auto;
	}	
}
@media screen and (max-width:768px) {

/**************************************************
/* 1. 共通
***************************************************/
	html {font-size: 62.5%;}
	
.display_sp { display: block!important; }
.display_pc { display: none!important; }
	
.sp { display: block; }
.pc { display: none; }	

img {
    width: auto;
    height: auto;
    max-width: 100%;
	}
	
body {
	width: 100%;
}
header {
    height: 70px;
	}

main {
	width: 100%;
	padding: 0 2% 0;
}
#content{
	width:100%;
	max-width:100%;
	}
	
#underlayer {
    max-width: 100%;
    width: 100%;
	  padding: 4%;
	}
	
.bg-white {
    padding: 4%;
	}
.border-box {
    margin: 0 auto 2%;
    padding: 4%;
}
.outer {
	width: 100%;
}

.block {
    padding: 30px 10px;
    margin-bottom: 20px;
}
.info, .service, .column {padding: 20px 0;}
	h2{margin:20px auto;}
	

.pages dt{
	display: block;
}
.pages dd{
	display: block;
	width: 100%;
	max-width: 100%;	
}
.pages dt{
	float: none;
	margin:0 20px 20px 0;
	width: 100%;
	max-width: 100%;
	height: auto;
	text-align: center;
}
.pages .about-box dd {
    max-width: 100%;
	}
.pages .staff-img{
	margin: 25px;
 	position: static;
	text-align: center;
	display: block;
}

.pages .staff-box img{
	position: static;
	top:-40px;
	right: 0;
	max-width: 200px;
	width: 100%;
	height: auto;
}	
.pages h2 {
    margin-bottom: 70px;
}
h2{
	font-size: 20px;
	font-size: 2.0rem;
	text-align: center;
	margin: 35px auto 33px;
}
h3{
	font-size: 17px;
	font-size: 1.7rem;
}
h4{
	font-size: 15px;
	font-size: 1.5rem;
	padding: 7px;
	margin-bottom: 10px;
	margin-top: 10px;
}

h5{
	font-size: 14px;
	font-size: 1.4rem;
	color: #6c7a69;
	margin-bottom: 15px;
	font-weight: 500;
}
small {font-size: 1.1rem;}
	
	#guide .medical-check #table1 td,
	#guide .medical-check #table2 td{
		list-style: none;
		margin: 0 auto;
	}
	
	
#guide .medical-check #table1 td,
#guide .medical-check #table1 th,
#guide .medical-check #table2 td,
#guide .medical-check #table2 th{ 
  border: 1px solid #ccc;
	padding: 2%;
}
	#guide .medical-check #table1 br,
	#guide .medical-check #table2 br{
		display: none;
		
	}	

#guide #table1,
#guide #table2{
		display: block;
	-webkit-overflow-scrolling: touch;
	}
#guide #table1 thead,
#guide #table2 thead{
			display: none;
		}
#guide #table1 tbody,
#guide #table2 tbody{
			display: block;
		}
#guide #table1 tbody tr,
#guide #table2 tbody tr{
				display: block;
				margin-bottom: 1.5em;
			}
	
#guide #table1 tbody th,
#guide #table1 tbody td,
#guide #table2 tbody th,
#guide #table2 tbody td	{
				display: list-item;
				border: none;
			}
#guide #table1 tbody th,
#guide #table2 tbody th{
				margin-bottom: 5px;
				list-style-type: none;
				color: #fff;
				background: #6C7A69;
	      border-radius: 6px;
			}
#guide #table1 tbody td,
#guide #table2 tbody td{
				margin-left: 20px;
				padding: 0;
			}
#table1 td, #table1 th,
#table2 td, #table2 th{
       text-align: left;
	}
			
#guide #table1 tbody td:nth-of-type(1):before,#guide #table2 tbody td:nth-of-type(1):before{ content: "[対象年齢]";font-weight: 600; }
#guide #table1 tbody td:nth-of-type(2):before,#guide #table2 tbody td:nth-of-type(2):before { content: "[10kgまでの料金]";font-weight: 600; }
#guide #table1 tbody td:nth-of-type(3):before,#guide #table2 tbody td:nth-of-type(3):before { content: "[検査内容]";font-weight: 600; }

	
#hotel .hotel-table td,
#table th,
#hotel .hotel-table thead th{
	line-height: 2;
	white-space: nowrap;
  padding: 2%;
	}


	
/*------------------------------------------------------------
ヘッダー
------------------------------------------------------------*/
header {
/*	overflow:inherit;*/
    padding: 10px;
    height: auto;
/*    position: fixed;*/
/*    z-index: 10;*/
    background: #FFF;
/*    box-shadow: 0 2px 2px #CCC;*/
	}
	
	
/*
header {
	overflow:inherit;
	padding: 4%;	
}
*/
	
h1 {
    margin-bottom: 0;
    margin-left: 0;
	}
	
/*
	.display_sp .logo-area{
	  height: auto;
    position: fixed;
    z-index: 10;
		background: #fff;
	}
*/
	
	header .display_sp .logo img{
	width: 100%;
	height: auto;
}	

	.hamburger {
		display: block !important;
    width: 65px;
    height: 65px;
    position: fixed;
    top: 5px;
    right: 0px;
    z-index: 20000;
    padding: 12px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    -webkit-tap-highlight-color: transparent;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    color: #000;
		
		
		
		
}
	.hamburger:after {
    content: 'MENU';
    font-size: 90%;
    top: 38px;
    position: absolute;
    font-weight: bold;
		margin: 0 0 0 2px;
		color: #45b035	
}

	.fat-nav__wrapper li{
		font-size: 15px;
		font-size: 1.5rem;
	}	
	
/* FATNAV	*/	


	.fat-nav{
		margin: 0;
	  background: #fff!important;
/*		opacity: 0.8!important;*/
	}
	
	.fat-nav li {
    padding: 17px;
    font-size: 1.7rem!important;
    font-size: 17px!important;

	}
	.fat-nav ul{
		vertical-align: bottom;
		
	}
	.fat-nav li,	.fat-nav li a {
			color: #45B035!important;
		  line-height: 2.3;
	}
/*------------------------------------------------------------
フッター
------------------------------------------------------------*/

	#footer {
    background-size: contain;
	}
  div.FtContact{
	  max-width: 100%;
}
  div.FT-yoyaku{
    display: block;
  }
  
  .FT-yoyaku dl.FT-yoyaku-dl{
  display: block;
  width: 100%;
}
  
  dl.FT-yoyaku-dl dt{
	padding: 5px;
	width: 100%;
}

dl.FT-yoyaku-dl dd{
	padding:0;
	width: 100%;
  margin: 20px 0;
}
  
  div.FT-flex{
    display: block;
  }
  
  div.FT-reception{
  width: 100%;
}
  
  dd.FT-tel-bold{
  font-size: 1.5em;
  justify-content: center;
}
  

p.Ft-logo01 {
    padding-top: 40px;
	}
	.sitemap{
		margin: 20px auto;
    text-align: center;
	}
	
footer nav {
    height: auto;
    padding: 20px 15%;
}
footer nav li {
    line-height: 1.6;
    width: 50%;
	margin-bottom: 10px;
	float: left;
	padding: 0 5%;
}
footer nav li:nth-child(even) {
	text-align: right;
}
footer nav li:nth-child(odd) {
	text-align: left;
}

footer nav li:not(:first-child) {
    margin-left: 0;
}
footer nav li:last-child {
    float: right;
	text-align: right;
}
	#pageTop img{
		width: auto;
	}
	
.FT-mt{
    margin-top: 24px;
  }
/**************************************************
/* 2.　トップページ
***************************************************/

	#top{
		width: 100%;
		padding-top: 40px;
	}
		#top div.top-mainvisual {
    margin: 0 auto 20px; 
	}
		#top div.top-mainvisual img{
    width: auto;
	}

	#top .map iframe {
	width: 100%;
	}
	
	
	/*---s2 guidance----------------------------------*/
	.guidance-flex{
		display: block;
    padding: 0 20px;
	}
	.item{
		width:100%;
	}
	
	.sp-center{
		margin:0 auto;
		width: 90%;
			
	}
  .guidance dl.guidance-dl{
    display: block;
  }
  dl.guidance-dl dt{
    width: 100%;
    padding: 0;
    height: auto;
    margin-right: 0;
    line-height: 2.3;
	}
	dl.guidance-dl dd {
    width: 100%;
    padding: 0;
	}
  
  .guidance-dl img {
    width: 90%;
    height: auto;
  }
 
	
	/*---s3 service----------------------------------*/
	#top .service_sp{
		width: 100%;
		height: auto;
	}	
#top .service_sp .service-btn_sp {
    margin: 2%;
    display: block;
    padding: 2%;
    background: #f4f9f6;
    position: relative;
	  border: 3px solid #84652A;
	}
	
	#top .service-img_sp,
	#top .service-txt_sp,
	#top .arrow{
		display: inline-block;	
		vertical-align: middle;
	}
		#top .arrow{
			text-align: right;
    	margin-right: 10%;
    	color: #84652A;
    	position: absolute;
    	top: 34%;
    	right: 0;
	}
	#top .service-img_sp{
		margin: 10px 20px;	
	}
	#top .arrow{
		margin-left: 20px;
		
	}
	
	/*---s4 column----------------------------------*/
	
/*
	div.pc-image{
	display: none;	
}
*/

	
	ul.article-box{
	max-width: 95%;
	width: 100%;
	margin: 0 auto;
}
	
	ul.article-box li {
    float: none;
    width: 95%;
    margin: 0 auto 13px;
		display: block;
	}
	ul.article-box li:nth-child(odd) {
    margin-right: 0;
		margin: 0 auto 13px;
	}
	

	div.headline{
	max-width: 65%;
    width: 100%;
    padding: 10px;
    display: block;
}
	

	div.headline p.day{
		font-size: 12px;
		font-size: 1.2px;
	}

		div.headline p.viewlist{
		  letter-spacing: 0;
			font-size: 2vw;
	}


	
/**************************************************
/* 3.　aboutページ
***************************************************/
.pages .about-box dt {
    max-width: 100%;
    padding: 0;
    height: auto;
    padding-top: 0;
    line-height: 2.3;	
	}
	
	#about .fd-G{
		display: block;
	}
	
#about .style-txt img{
	width: auto;
	}
#about.pages .q-title {
    padding-left: 2%;
    font-size: 16px;
    font-size: 1.6rem;
    margin: 0em 2%;
	  font-weight: 700;	
}

#about .qa .answer {
    margin: 0em 2% 5% 3%;
    padding-top: 15px;
}
#about .qa .answer dt {
    margin-right: .5em;
    font-size: 16px;
    font-size: 1.6rem;
}
#about .qa .answer dd {
    padding-left: 9%;
    padding-right: 2%;
    font-size: 14px;
    font-size: 1.4rem;
}
	
/**************************************************
/* 3.　guide
***************************************************/
/*
	
	ul.tabNav{
		margin: 0 auto;
	}
*/
	.tabNav li {
    width: calc((100% - 2% * 4) /2);
    margin-right: 2%;
    margin-bottom: 2%;
	}
	.tabNav li:nth-child(even){
		margin-right: 0%;
	}
	
#guide .fd-G{ 
  display:block;
}	
#guide .guide-step div.border-box {
    margin: 0 auto 15px;
	}
	
#guide .style-txt::after{
	content: none;	
}	
	
	
#guide .capsule {
    width: 100%;
    float: none;
}
#guide .capsule img {
    width:auto;
    margin:10px auto;
    padding: 2%;
}
	
#guide ul.list-icon li {
    padding-left: 0;
	}
	#guide ul.list-icon p {
    display: block;
    width: 100%;
    height: auto;
    margin: 10px 0;
}
	#guide ul.list-icon li img {
    display: block;
    padding-right: 0;
	}
	
	 #guide .reservation {
    display: block;
    width: 100%;
	}
	
	#guide .reservation-box {
    display: block;
    width: 100%;
    text-align: left;
	}
#guide .reservation .booking-btn img{
	width: auto;
	}
	#guide .price-img {
    width: auto;
    padding-left: 0;
		padding-bottom: 15px;
	}
	#guide .price-txt {
    width: 100%;
}
	#guide .price-txt .kingaku {
    display: block;
    padding: 5px 0;
    text-align: center
	}
	
	#guide .medical-check img {
    display: block;
    width: auto;
}
	
	
/**************************************************
/* 5. スタッフ紹介 /staff/
***************************************************/

 .pages .staff-box dt {
    max-width: 100%;
    padding: 0;
    height: auto;
    padding-top: 0;
    line-height: 2.3;	
	}
	
	#about .fd-G{
		display: block;
	}
	
#about .style-txt img{
	width: auto;
	}
		
	

/**************************************************
/* 5. ペットホテル /hotel/
***************************************************/

#hotel .hotel-table{
		width:95%;
	margin: 3% auto;
  }
	#hotel .scroll img{
		max-width: none;
		width: auto;
		padding: 2%;
	}
		
	}	
	
	
#hotel .scroll{
		overflow: auto;　
    white-space: nowrap;	
	}

#hotel .scroll::-webkit-scrollbar{　　/*tableにスクロールバーを追加*/
 height: 5px;
}
#hotel .scroll::-webkit-scrollbar-track{　　/*tableにスクロールバーを追加*/
 background: #F1F1F1;
}
#hotel .scroll::-webkit-scrollbar-thumb {　　/*tableにスクロールバーを追加*/
 background: #BCBCBC;
}
	
	
	/**************************************************
/* 5. アクセス /access/
***************************************************/
	
	.map {
    width: 100%;
    height: auto;
    text-align: center;
}
	
#access iframe {
    width: 95%;
	 height: 300px;
    margin: 0 auto;
	}
	
	/**************************************************
/* 5. 院内紹介 /introduction/
***************************************************/
/*
#introduction .intro-nest{
	margin-right:0;
}
*/


/**************************************************
/* 5. ご予約 /booking/
***************************************************/
#booking .day-calendar table {
    width: 100%;
}
div.tel-txt.booking {
    padding-top: 50px;
/*    padding-left: 2%;*/
}

/**************************************************
/* 5. wp /共通/
***************************************************/
	.content {
    width: 100%;
    padding: 4% 0px;
	}
	.pagenav {
    margin: 4% auto;
	}
#kiji .dateLabel{
display: block;
}

/**************************************************
/* 5. wp /コラム詳細ページ/
***************************************************/
	#kiji-details .kiji {
    text-align: left;
    margin: 0 2%;
}


	
	
	/**************************************************
/* 5. wp /アーカイブ/
***************************************************/
	#archive .news{
		width: 100%;
	}
	#archive header {
    width: 100%;
    height: auto;
		padding: 2% 0;
}
		#archive header p{
    width: 100%;
    height: auto;
		white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;	
}

}

	
@media screen and (max-width:600px) {
.pages h2 {
    margin-bottom: 90px;
}
	
	ul.article-box p.article{
  font-size: 1.4rem;
}
div.headline p.viewlist{
  font-size: 1.4rem;
}
	.moji-17{
	font-size: 4vmin;
}
	
}

@media screen and (max-width:480px) {
div.tel-title p.tel-icon::before {
    right: 47%;
}
@media screen and (max-width:320px) {

	.moji-17{
	font-size: 4vmin;
}
		div.tel-title  p{
	font-size: 1vh;
}
		.tel-bold{
		 font-size: 2.3vh;
	}
	div.tel-title p{
		font-size:1.1rem;
	}
	.tel-bold{
		font-size: 1.3rem;
		margin-bottom: 5px;;
	}
	#footer .hours{
		font-size: 1.2rem;
	}
	small{
		font-size: 1.1rem;
	}
	.tel-icon br{
		display: none;
	}
	div.tel-title p.tel-icon::before{
		content: none;
	}
	footer div.tel-txt.booking{
		padding: 30px 10px;
	}
}