@charset "UTF-8";
/*--------------------------------------------------
**************************************************
  Googleマップ PCスマホ共通
  高さは各メディアクエリー内で設定
**************************************************
--------------------------------------------------*/
.map{
	position:relative;
	height:0;
	overflow:hidden;
}
.map iframe{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}

.widget {
	max-width:1380px;
	margin:30px auto;
}


/*--------------------------------------------------
**************************************************
  PC用
**************************************************
--------------------------------------------------*/
@media screen and (min-width: 768px) {
	
	/* ヘッダー */
	header{
		position:absolute;
		z-index:200;
		width:100%;
		height:90px;
	}
	
	header.active{
		background-color:#fff;
	}
	
	/* メイン画像 */
	.main_image{
		position:relative;
		overflow:hidden;
		width:100%;
		height:900px;
		background-color:#fff;
	}
	
	.main_image .item{
		position:relative;
		width:100%;
		height:900px;
		overflow:hidden;
	}
	
	.main_image .catch{
		/*-ms-writing-mode:tb-rl;
		writing-mode:vertical-rl;*/
		word-wrap:break-word;
		position:absolute;
		top:50%;
		left:50%;
		z-index:100;
		display:inline-block;
		width:auto;
		line-height:1.5;
		padding:0;
		text-align:left;
		font-family:"Times New Roman","游明朝","Yu Mincho","游明朝体","YuMincho","ヒラギノ明朝 Pro W3","Hiragino Mincho Pro","HiraMinProN-W3","HGS明朝E","ＭＳ Ｐ明朝","MS PMincho",serif;
		font-size:30px;
		font-weight:bold;
		color:#fff;
		-ms-transform:translate(-50%,-50%);
		-webkit-transform:translate(-50%,-50%);
		transform:translate(-50%,-50%);
		text-align: center;
	}
	
	.main_image .catch span{
		display:block;
	}
	
	.main_image .overlay{
		position:absolute;
		left:0;
		top:0;
		z-index:2;
		width:100%;
		height:100%;
	}
	
	.main_image .image{
		position:absolute;
		top:0;
		left:0;
		z-index:1;
		width:100%;
		height:100%;
	}
	
	/* お知らせ */
	#news{
		width:100%;
		padding:10px 0;
		background-color:#f5f5f5;
	}
	
	#news .list .date{
		margin-right:50px;
		font-size:12px;
		color:#22b7e8;
	}
	
	#news .list .title{
		font-size:14px;
		color:#000;
	}
	
		#news .list a:hover .title{
			color:#22b7e8;
		}
	
	#news .list a:hover{
		text-decoration:none;
	}
	
	#news .list + a{
		position:relative;
		padding-right:30px;
		font-size:14px;
		color:#000;
		transition: all 0s ease;
	}
		
		#news .list + a::after{
			content:"";
			position:absolute;
			top:33%;
			right:10px;
			display:block;
			width:7px;
			height:7px;
			border-top:#000 1px solid;
			border-right:#000 1px solid;
			-webkit-transform:rotate(45deg);
			transform:rotate(45deg);
		}
		
		#news .list + a:hover{
			text-decoration:none;
			color:#22b7e8;
		}
			
			#news .list + a:hover::after{
				border-top:#22b7e8 1px solid;
				border-right:#22b7e8 1px solid;
			}
	
	/* 診察のご案内 */
	#about{
		margin-top:120px;
	}
	
	#about .list{
		margin:0 auto;
	}
	
	#about .list.layout_3{
		width:1380px;
	}
	
	#about .list.layout_2{
		width:920px;
	}
	
	#about .list li{
		width:460px;
		margin-bottom:30px;
	}
	
	#about .list li a{
		position:relative;
		display:block;
		overflow:hidden;
	}
	
		#about .list li a:hover{
			text-decoration:none;
		}
		
		#about .list li a:hover img{
			opacity:1;
			transform:scale(1.2,1.2);
		}
		
		#about .list li a:hover .text h3,
		#about .list li a:hover .text p{
			color:#22b7e8;
		}
	
	#about .list li a .image{
		height:185px;
		overflow:hidden;
	}
	
	#about .list li a .image img{
		object-fit:cover;
		display:block;
		width:460px;
		height:185px;
		background-color:#eee;
		text-indent:100%;
		white-space:nowrap;
	}
	
	#about .list li a section{
		min-height:175px;
		padding:30px 45px 35px;
		border-right:#ededed 1px solid;
		border-bottom:#ededed 1px solid;
	}
	
	#about .list.layout_3 li:nth-child(3n-2) a section,
	#about .list.layout_2 li:nth-child(odd) a section{
		border-left:#ededed 1px solid;
	}
	
	#about .list li a .text h3{
		font-size:20px;
		font-weight:bold;
		color:#333;
	}
	
	#about .list li a .text p{
		margin-top:10px;
		font-size:16px;
		color:#333;
	}
	
	/* 健康診断から、治療まで対応 */
	#medical_care{
		margin-top:120px;
	}
	
	#medical_care h2 + p{
		line-height:2.5;
		font-size:16px;
	}
	
	#medical_care .list_box{
		position:relative;
		z-index:1;
		width:100%;
		height:860px;
		padding-top:70px;
		background:url(../imgs/tmp/pc/bg_medical_care-min.jpg) no-repeat center center;
		background-size:cover;
	}
	
	#medical_care .list_box .overlay{
		position:absolute;
		left:0;
		top:0;
		z-index:2;
		width:100%;
		height:100%;
		background-color:rgba(34,183,232, 0.4);
	}
	
	#medical_care .list_box ul{
		position:relative;
		z-index:3;
	}
	
	#medical_care .list_box ul li{
		width:238px;
		/* height:300px; */
		margin-right:16px;
		margin-bottom:16px;
		padding:20px 0 0;
		background-color:#fff;
	}
	
		#medical_care .list_box ul li:nth-child(4n){
			margin-right:0;
		}
	
	#medical_care .list_box ul li h3{
		text-align:center;
		font-size:21px;
		font-weight:bold;
	}
	
	#medical_care .list_box ul li .icon{
		width:116px;
		margin:20px auto;
	}
	
	#medical_care .list_box ul li .icon img{
		max-width:100%;
		max-height:110px;
	}
	
	#medical_care .list_box ul li p{
		width:85%;
		margin:10px auto;
		font-size:16px;
	}
	
	#medical_care .list_box > div.center{
		position:relative;
		z-index:3;
	}
	
	/* 動物の健康を一番に考える治療を */
	#health{
		margin-top:120px;
	}
	
	#health .image,
	#health .text_box{
		width:100%;
		
	}
	
	#health .image img{
		object-fit:cover;
		display:block;
		width:500px;
		height:500px;
	}
	
	#health .text_box{
		border-top:#f5f5f5 1px solid;
		border-right:#f5f5f5 1px solid;
		border-bottom:#f5f5f5 1px solid;
	}
	
	#health .text_box .text{
		padding:0 70px;
	}
	
	#health .text_box .text h3{
		line-height:1.5;
		font-size:22px;
		font-weight:bold;
		color:#22b7e8;
	}
	
	#health .text_box .text .desc{
		line-height:2;
		font-size:16px;
	}
	
	#health .text_box .text p:not(.desc){
		line-height:2;
		margin-top:50px;
	}
	
	/* 動物病院からのお知らせ */
	#posts{
		width:100%;
		margin-top:120px;
		padding:60px 0;
		background-color:#f5f5f5;
	}
	
	#posts .post_list{
		max-width:1000px;
		width:95%;
		margin-left:auto;
		margin-right:auto;
	}
	
	#posts .post_list .item{
		position:relative;
		width:340px;
		height:370px;
	}
	
	#posts .post_list .item .thumb a{
		display:block;
		width:100%;
		height:212px;
	}
	
	#posts .post_list .item .thumb img{
		object-fit:cover;
		display:block;
		width:336px;
		height:212px;
	}
	
	#posts .post_list .item .thumb .no_image{
		display:block;
		width:336px;
		height:212px;
		background-color:#ccc;
	}
	
	#posts .post_list .item .text{
		position:relative;
		height:160px;
		padding:25px 30px;
		background-color:#fff;
		border:#f5f5f5 1px solid;
	}
	
	#posts .post_list .item .text h3 a{
		font-size:16px;
		font-weight:normal;
	}
	
		#posts .post_list .item .text h3 a:hover{
			text-decoration:none;
		}
	
	#posts .post_list .item .text .date{
		position:absolute;
		bottom:30px;
		left:30px;
		font-size:12px;
		color:#999;
	}
	
	#posts .slick-next::before,
	#posts .slick-prev::before{
		content:"";
		position:absolute;
		display:block;
		width:10px;
		height:10px;
		color:#333;
		-webkit-transform:rotate(45deg);
		transform:rotate(45deg);
	}
	
	#posts .slick-next::before{
		right:-10px;
		border-top:#000 2px solid;
		border-right:#000 2px solid;
		
	}
	
	#posts .slick-prev::before{
		left:-10px;
		border-bottom:#000 2px solid;
		border-left:#000 2px solid;
	}

	/* スタッフブログ */
	#blog  {
		width:100%;
		padding:60px 0;
		background-color: #efefef;
	}
	
	#blog .post_list{
		max-width:1000px;
		width:95%;
		margin-left:auto;
		margin-right:auto;
	}
	
	#blog .post_list .item{
		position:relative;
		width:340px;
		height:370px;
	}
	
	#blog .post_list .item .thumb a{
		display:block;
		width:100%;
		height:212px;
	}
	
	#blog .post_list .item .thumb img{
		object-fit:cover;
		display:block;
		width:336px;
		height:212px;
	}
	
	#blog .post_list .item .thumb .no_image{
		display:block;
		width:336px;
		height:212px;
		background-color:#ccc;
	}
	
	#blog .post_list .item .text{
		position:relative;
		height:160px;
		padding:25px 30px;
		background-color:#fff;
		border:#f5f5f5 1px solid;
	}
	
	#blog .post_list .item .text h3 a{
		font-size:16px;
		font-weight:normal;
	}
	
		#blog .post_list .item .text h3 a:hover{
			text-decoration:none;
		}
	
	#blog .post_list .item .text .date{
		position:absolute;
		bottom:30px;
		left:30px;
		font-size:12px;
		color:#999;
	}
	
	#blog .slick-next::before,
	#blog .slick-prev::before{
		content:"";
		position:absolute;
		display:block;
		width:10px;
		height:10px;
		color:#333;
		-webkit-transform:rotate(45deg);
		transform:rotate(45deg);
	}
	
	#blog .slick-next::before{
		right:-10px;
		border-top:#000 2px solid;
		border-right:#000 2px solid;
		
	}
	
	#blog .slick-prev::before{
		left:-10px;
		border-bottom:#000 2px solid;
		border-left:#000 2px solid;
	}
	
	/* アクセス */
	#access{
		margin-top:120px;
	}
	
	#access .text_box,
	#access .map{
		width:500px;
		height:620px;
	}
	
	#access .text_box{
		background-color:#f5f5f5;
	}
	
	#access .text_box h3{
		margin-bottom:5px;
		font-size:16px;
		font-weight:bold;
		color:#22b7e8;
	}
	
	#access .text_box .text{
		padding:0 70px;
	}
	
	#access .text_box .text section > p{
		line-height:2;
		margin-bottom:2em;
	}
	
	

}/* End PC */



/*--------------------------------------------------
**************************************************
  SP用
**************************************************
--------------------------------------------------*/
@media screen and (max-width: 767px) {
	
	/* ヘッダー */
	
	/* メイン画像 */
	.main_image{
		position:relative;
		overflow:hidden;
		width:100%;
		height:900px;
		background-color:#fff;
	}
	
	.main_image .item{
		position:relative;
		width:100%;
		height:900px;
		overflow:hidden;
	}
	
	.main_image .catch{
		/*writing-mode:vertical-rl;
		word-wrap:break-word;*/
		position:absolute;
		top:50%;
		left:50%;
		z-index:100;
		display:inline-block;
		width:auto;
		line-height:1.5;
		padding:0;
		text-align:left;
		font-family:"Times New Roman","游明朝","Yu Mincho","游明朝体","YuMincho","ヒラギノ明朝 Pro W3","Hiragino Mincho Pro","HiraMinProN-W3","HGS明朝E","ＭＳ Ｐ明朝","MS PMincho",serif;
		font-size:20px;
		font-weight:bold;
		color:#fff;
		-ms-transform:translate(-50%,-50%);
		-webkit-transform:translate(-50%,-50%);
		transform:translate(-50%,-50%);
	}
	
	.main_image .catch span{
		display:block;
	}
	
	.main_image .overlay{
		position:absolute;
		left:0;
		top:0;
		z-index:2;
		width:100%;
		height:100%;
		background-color:rgba(0,110,114,0.4);
	}
	
	.main_image .image{
		position:absolute;
		top:0;
		left:0;
		z-index:1;
		width:100%;
		height:100%;
	}
	
	/* お知らせ */
	#news{
		width:100%;
		padding:10px 0;
		background-color:#f5f5f5;
	}
	
	#news .list .date{
		margin-right:50px;
		font-size:12px;
		color:#22b7e8;
	}
	
	#news .list .title{
		font-size:14px;
		color:#000;
	}
	
	#news .list a:hover{
		text-decoration:none;
	}
	
	#news .list + a{
		position:relative;
		padding-right:30px;
		font-size:14px;
		color:#000;
		transition: all 0s ease;
	}
		
		#news .list + a::after{
			content:"";
			position:absolute;
			top:33%;
			right:10px;
			display:block;
			width:7px;
			height:7px;
			border-top:#000 1px solid;
			border-right:#000 1px solid;
			-webkit-transform:rotate(45deg);
			transform:rotate(45deg);
		}
		
		#news .list + a:hover{
			text-decoration:none;
		}
			
			#news .list + a:hover::after{
				border-top:#22b7e8 1px solid;
				border-right:#22b7e8 1px solid;
			}
	
	/* 診察のご案内 */
	#about{
		margin-top:50px;
	}
	
	#about .list{
		width:100%;
		margin:0 auto;
	}
	
	#about .list li{
		width:50%;
		margin-bottom:30px;
	}
	
	#about .list li a{
		position:relative;
		display:block;
	}
	
		#about .list li a:hover{
			text-decoration:none;
		}
		
		#about .list li a:hover .text h3,
		#about .list li a:hover .text p{
			color:#22b7e8;
		}
	
	#about .list li a .image{
		height:130px;
		overflow:hidden;
	}
	
	#about .list li a .image img{
		object-fit:cover;
		display:block;
		width:100%;
		height:130px;
		background-color:#eee;
		text-indent:100%;
		white-space:nowrap;
	}
	
	#about .list li a section{
		min-height:130px;
		padding:10px 15px;
		border-bottom:#ededed 1px solid;
	}
	
	#about .list li:nth-child(odd) a section{
		border-right:#ededed 1px solid;
	}
	
	#about .list li a .text h3{
		font-size:14px;
		font-weight:bold;
		color:#333;
	}
	
	#about .list li a .text p{
		margin-top:5px;
		font-size:13px;
		color:#333;
	}
	
	/* 健康診断から、治療まで対応 */
	#medical_care{
		margin-top:100px;
	}
	#medical_care p.center {
		text-align: left;
		line-height: 1.8;
	}
	
	#medical_care h2 + p{
		width:85%;
		line-height:2;
		margin:auto;
		font-size:16px;
	}
	
	#medical_care .list_box{
		position:relative;
		z-index:1;
		width:100%;
		height:auto;
		padding:50px 0;
		background:url(../imgs/tmp/pc/bg_medical_care-min.jpg) no-repeat center center;
		background-size:cover;
	}
	
	#medical_care .list_box .overlay{
		position:absolute;
		left:0;
		top:0;
		z-index:2;
		width:100%;
		height:100%;
		background-color:rgba(34,183,232, 0.4);
	}
	
	#medical_care .list_box ul{
		justify-content: space-around;
		position:relative;
		z-index:3;
	}
	
	#medical_care .list_box ul li{
		width:47%;
		height:auto;
		margin-bottom:16px;
		padding:20px 0 10px;
		background-color:#fff;
	}
	
	#medical_care .list_box ul li h3{
		text-align:center;
		font-size:16px;
		font-weight:bold;
	}
	
	#medical_care .list_box ul li .icon{
		width:30%;
		margin:20px auto 10px;
	}
	
	#medical_care .list_box ul li .icon img{
		max-width:100%;
		width:auto;
		/*height:30%;*/
		height:45px;
	}
	
	#medical_care .list_box ul li p{
		width:85%;
		margin:10px auto;
		font-size:14px;
	}
	
	#medical_care .list_box > div.center{
		position:relative;
		z-index:3;
	}
	
	/* 動物の健康を一番に考える治療を */
	#health{
		margin-top:100px;
	}
	
	
	#health .image,
	#health .text_box{
		width:95%;
		margin:auto;
	}
	
	#health .image img{
		object-fit:cover;
		display:block;
		width:100%;
		height:70vw;
	}
	
	#health .text_box{
		border-left:#f5f5f5 1px solid;
		border-right:#f5f5f5 1px solid;
		border-bottom:#f5f5f5 1px solid;
	}
	
	#health .text_box .text{
		padding:20px 30px;
	}
	
	#health .text_box .text h3{
		line-height:1.5;
		font-size:16px;
		font-weight:bold;
		color:#22b7e8;
	}
	
	#health .text_box .text .desc{
		line-height:2;
		font-size:14px;
	}
	
	#health .text_box .text p:not(.desc){
		line-height:2;
		font-size:14px;
	}
	
	/* 動物病院からのお知らせ */
	#posts{
		width:100%;
		margin-top:120px;
		padding:30px 0;
		background-color:#f5f5f5;
	}
	
	#posts .post_list .item{
		position:relative;
		width:50%;
	}
	
	#posts .post_list .item .thumb a{
		display:block;
		width:100%;
	}
	
	#posts .post_list .item .thumb img{
		object-fit:cover;
		display:block;
		height:30vw;
	}
	
	#posts .post_list .item .thumb .no_image{
		display:block;
		height:30vw;
		background-color:#ccc;
	}
	
	#posts .post_list .item .text{
		position:relative;
		padding:15px 10px;
		background-color:#fff;
		border:#f5f5f5 1px solid;
	}
	
	#posts .post_list .item .text h3 a{
		font-size:14px;
		font-weight:normal;
		color:#333;
	}
	
		#posts .post_list .item .text h3 a:hover{
			text-decoration:none;
		}
	
	#posts .post_list .item .text .date{
		position:relative;
		bottom:0;
		left:0;
		font-size:12px;
		color:#999;
	}
	
	/* アクセス */
	#access{
		margin-top:100px;
	}
	
	#access .text_box,
	#access .map{
		width:95%;
		margin:auto;
	}
	
	#access .text_box{
		background-color:#f5f5f5;
	}
	
	#access .text_box h3{
		margin-bottom:5px;
		font-size:14px;
		font-weight:bold;
		color:#22b7e8;
	}
	
	#access .text_box .text{
		padding:2em 30px 0;
	}
	
	#access .text_box .text section > p{
		line-height:2.2;
		margin-bottom:2em;
		font-size:14px;
	}
	
	#access .map{
		position:relative;
		height:0;
		padding-bottom:75%;
		overflow:hidden;
	}
	
	
}/* End SP */