@charset "utf-8";

/*  トップ
==================================*/
/* .top .bnrTop */
.top #head{ display: none; }
.top .bnrTop{
	position: absolute;
	left: 0;
	right: 0;
	width: 980px;
	margin: auto;
	text-align: right;
	z-index: 999;
	}
.top .bnrTop p{
	display: inline;
	width: 107px; }

.top .topSld {
	width:100%;
	min-height: 580px;
	box-sizing: border-box;
	background-color: #f5f9fb;
  display: flex;
  align-items: center;
	justify-content: center;
	}
.topSld .slick-list {
	width: 100%;
	max-width: 850px;
	margin-right: 134px;
}
.top .topSld .slick-slide {
	background: no-repeat center;
	background-size: cover;
	height: 100%;
	margin: 6px auto 0;
	text-align: center;
	width: 100%;
	/*! display: block; */
	}
.top .topSld .slick-slide img { margin: 0 auto; max-width: 850px;}
@media screen and (max-width: 750px){
	.topSld .slick-list {
		width: 100%;
		max-width: 100%;
		margin: 0 auto;
	}
	.top .topSld .slick-slide img  {
		width: 89%;
	}
}
.top .topSld p{ position: relative; }
.top .topSld .lnk01, .top .topSld .lnk02{
	position: absolute;
	right: 0;
	left: 0;
	margin: auto;
}
.top .topSld .lnk01{
	width: 430px;
	height: 41px;
	top: 330px;
	border-radius: 20px;
}
.top .topSld .lnk02{
	width: 235px;
	height: 21px;
	top: 442px;
}
.top .topSld .lnk01:hover, .top .topSld .lnk02:hover{
	background-color: rgba(255,255,255,.5);
}

.top .navBox{
	width: 980px;
	margin: 99px auto 79px;
	font-size: 0;
	/*! height: 52px; */
	}
.top .topNav{
	float: left;
	font-size: 0;
	height: fit-content;
	/*! width: 526px; */
	}
.top .topNav > * + * {
	margin-left: 40px;
}
.top .topNav li a {
		display: inline-block;
		height: fit-content;
		}
	.top .topNav li{
		display: inline-block;
		}
.top .topNav li.about {
		width: 94px;
}
.top .topNav li.staff {
		width: 95px;
}
.top .topNav li.service {
		width: 68px;
}
.top .topNav li.facility {
		width: 67px;
}
.top .topNav li.access {
		width: 61px;
}
.top .topNav li.news {
		width: 75px;
}
	.top .topNav li span{ opacity: .4; }
.top .navBox .contBtn{
	float: right;
	font-size: 0;
	}
.top .navBox .contBtn li{
    display: inline-block;
    }
.top .navBox .contBtn li:not(:first-child){
    margin-left: 8px;
    }
.top .navBox .contBtn li.yoyaku{
	width: 89px;
}
.top .navBox .contBtn li.tel{
	width: 171px;
}
.top .navBox .contBtn li .btn_cal{
	width: 35px;
}
.top .navBox .bnrBtn{ display: none; }

.top .secBlk{
	/*! width: 980px; */
	margin: 0 auto 0px;
	font-size: 0;
	}
.top .infoBlk{
	/*float: left;*/
	width: 470px;
	margin-bottom: 0;
	width: 100%;
	}
.top .infoBox {
	/*! background-color: #f7f8f8; */
	width: 350px;
	min-height: auto;
	padding: 0;
	}
	.top .infoBox h2 {
		width: 107.5px;
		margin: 0 0 45px!important; }
	.top .infoBox .headlineBox {
		width: 100%;
		margin: 0;
		text-align: left;
		}
	.top .infoBox ul {
		border-top: solid 1px #6c6c6c;
		margin-bottom: 40px;
		}
	.top .infoBox li {
		border-bottom: solid 1px #6c6c6c;
		padding: 28.5px 0;
		font-size: 16px;
		line-height: 1.75;
		color: #474342;
		}
	.top .infoBox li time {
		display: inline-block;
		margin-bottom: 0;
		line-height: 1.75;
		margin-right: 50px;
		color: #474342;
		}
	.top .infoBox li a {
		display: inline-block;
		color: #474342;
		line-height: 1.75;
		}
	.top .infoBox .lnkList {
		padding-bottom: 0;
		}
	.top .infoBox .lnkList a {
		font-size: 14px;
		color: #474342;
		}
.top .fbBox {
	float: right;
	background-color: #f7f8f8;
	width: 350px;
	margin-bottom: 40px;
	padding: 60px;
	}
	.top .fbBox h2 {
		width: 81px;
		margin: 0 0 45px!important; }
.top .accessBox {
	clear: both;
	background-color: #f7f8f8;
	width: 860px;
	padding: 60px;
/*	margin-bottom: 70px;*/
	}
	.top .accessBox h2 {
		width: 55px;
		margin: 0 0 45px!important; }
	.top .accessBox #map_canvas {
		border: solid 1px #fff;
		height: 480px;
		margin-bottom: 25px;
		box-sizing: border-box;
		}
	.top .accessBox .txt {
		float: left;
		margin-top: -10px;
		line-height: 2;
		}
	.top .accessBox .txt a { font-size: 12px; }
	.top .accessBox .map {
		float: right;
		width: 425px;
		}

/* .top .bnrBottom */
.top .bnrBottom{ 
	text-align: center;
	padding-top: 137px;
	background-color: #f7f8f8;
}


@media screen and (max-width:750px){
	.top #head{ display: block; }
	.top .bnrTop{ display: none; }

	.top .topSld {
		width:100%;
		min-height: 0;
		padding-top: 15%;
		padding-bottom: 10.5%;
		}
	.top .topSld .slick-slide { background: none; }
	.top .topSld .lnk01{
		width: 79.333%;
		height: 0;
		padding-bottom: 17.333vw;
		top: 40.2%;
		left: -2%;
		border-radius: 8.667vw;
	}
	.top .topSld .lnk02{
		width: 48%;
		height: 0;
		padding-bottom: 4.667vw;
		top: 76.7%;
		left: 2.2%;
	}
	.top .topSld .lnk01:hover, .top .topSld .lnk02:hover{
		background-color: rgba(225,225,225,0);
	}

	.top .navBox{
		width: 100%;
		margin: 0% auto;
		}
	.top .topNav{ display: none; }
	.top .navBox .contBtn{ display: none; }
	.top .navBox .bnrBtn{
		display: block;
		width: 53.067%;
		margin: 0 auto;
		}

	.top .secBlk{
		width: 100%;
		margin: 0 auto;
		}
	.top .infoBlk{
		float: none;
		width: 100%;
		margin-bottom: 14.75%;
		}
	.top .infoBox {
		background-color: transparent;
		width: 100%;
		min-height: 0;
		padding: 0;
	}
	.top .infoBox h2 {
		width: 33.75%;
		margin: 0 0 7.813%!important;
	}
	.top .infoBox ul { margin-bottom: 6.25%; }
	.top .infoBox li { padding: 6.25% 3% 5.35%; font-size: 3.733vw;}
	.top .infoBox li time {
		margin-bottom: 1.125%;
		font-size: 3.733vw;
		display: block;
		margin-right: initial;
	}
	.top .infoBox li a { font-size: 3.733vw; }
	.top .infoBox .lnkList {
		border-bottom: none;
		padding-bottom: 0;
	}
	.top .infoBox .lnkList a { font-size: 3.2vw; }
	.top .fbBox {
		float: none;
		background-color: transparent;
		width: 100%;
		margin-bottom: 18.75%;
		padding: 0;
	}
	.top .fbBox h2 {
		width: 25.313%;
		margin: 0 0 7.813%!important;
	}
	.top .accessBox {
		clear: both;
		background-color: transparent;
		width: 100%;
		margin-bottom: 14.063%;
		padding: 0;
		}
		.top .accessBox h2 {
			width: 17.188%;
			margin: 0 0 7.813%!important;
			}
		.top .accessBox #map_canvas { display: none; }
		.top .accessBox .txt {
			float: none;
			margin-top: 0;
			margin-bottom: 3.731%;
			font-size: 3.2vw;
			letter-spacing: -0.06em;
			}
		.top .accessBox .txt strong {
			font-weight: normal
			}
		.top .accessBox .txt span { font-weight: bold; }
		.top .accessBox .txt a { font-size: 3.2vw; }
		.top .accessBox .map {
			float: none;
			width: 100%;
			}

	/* .top .bnrBottom */
	.top .bnrBottom{ display: none; }
}



.guidBlk {
	background-image: url(../img/top/guid_bg_pc.png);
	padding-top: 79px;
	padding-bottom: 50px;
	background-position: center;
	min-width: 980px;
}
.guidBlk .title_wrap {
	width: 223px;
	margin:  0 auto 37px;
}
.guidBlk .guid_inner_wrap {
	width: 980px;
	background-color: #fff;
	border-radius: 40px;
	margin: 0 auto;
	padding: 46px 70px 69px;
	box-sizing: border-box;
}
@media screen and (max-width: 980px){
	.guidBlk .guid_inner_wrap {
		width: 100%;
		box-sizing: border-box;
	}
}
.guidBlk .guid_inner_wrap ul li {
	border-bottom: 1px solid #dcdddd;
}
.guidBlk .guid_inner_wrap ul li::before {
	content: "●";
	display: block;
	color: #ffa749;
	font-size: 16px;
	line-height: 1.625;
}
.guidBlk .guid_inner_wrap ul li {
	display: flex;
	padding: 13px 0;
}
.guidBlk .guid_inner_wrap ul li .text {	
	padding-left: 10px;
	font-size: 16px;
	line-height: 1.625;
}
@media screen and (max-width:750px){
	.guidBlk {
		background-image: url(../img/top/guid_bg_sp.png);
		padding-top: 13.7%;
    padding-bottom: 12%;
    background-position: top center;
    min-width: initial;
    background-repeat: repeat;
	}
	.guidBlk .title_wrap {
		width: 46.4%;
		margin:  0 auto 6%;
	}
	.guidBlk .guid_inner_wrap {
		width: 92%;
		border-radius: 9vw;
		padding: 3.85% 5.5%;
		height: 264px;
		overflow: hidden;
		position: relative;
/* 		transition: height 0.3s; */
	}
	.guidBlk .guid_inner_wrap ul li {
		border-bottom: 1px solid #dcdddd;
	}
	.guidBlk .guid_inner_wrap ul li::before {
    font-size: 3.733vw;
		line-height: 1.714;
	}
	.guidBlk .guid_inner_wrap ul li {
		display: flex;
		padding: 2.14% 0;
	}
	.guidBlk .guid_inner_wrap ul li .text {	
		padding-left: 10px;
		font-size: 3.733vw;
		line-height: 1.714;
	}
	
	.guidBlk button {
		position: absolute;
		bottom: 0;
    transform: translateX(-50%);
		left: 50%;
		bottom: 3.5vw;
	}
}

.guid02Blk {
	padding-top: 120px;
	padding-bottom: 100px;
}
.guid02Blk .title {
	width: 278px;
	margin: 0 auto 35px;
}
.guid02Blk  .contWrap {
	width: 980px; 
	margin: 0 auto;
	position: relative;
}
.contWrap .link_mask {
	position: absolute;
	background-color: transparent;
	width: 464px;
	height: 48px;
	transform: translate(-50%, -50%);
	left: 50%;
	top: 44%;
	border-radius: 400px;
}
.contWrap .link_mask:hover {
	background-color: rgba(255,255,255,.5);
}
@media screen and (max-width:750px){
	.guid02Blk {
		padding-top: 17%;
		padding-bottom: 17%;
	}
	.guid02Blk .title {
		width: 60.4%;
		margin: 0 auto 8%;
	}
	.guid02Blk  .contWrap {
		width: 92.226%; 
	}
	.contWrap .link_mask {
		position: absolute;
		width: 57%;
		height: 12%;
		top: 39%;
	}
}

.guid03Blk {
	background-color: #f7f8f8;
	padding: 80px 0;
}
.guid03_inner_wrap {
	width: 980px;
	margin: 0 auto;
}
.guid03_inner_wrap .title {
	width: 140px;
	margin: 0 auto 46px;
}
.guid03_inner_wrap .contents {
	width: 908px;
	margin: 0 auto;
}
.guid03_inner_wrap .text {
	width: 908px;
	margin-bottom: 47px;
}
.pdf_blk_wrap .text {
	margin-bottom: 29px;
}
.pdf_blk_wrap {
	display: flex;
	justify-content: space-between;
}
.about_owner .text {
	width: 250px;
}
.about_animal .text{
	width: 245px;
}

.pdf_blk_wrap .dash_line {
	width: 2px;
}
.about_owner {
	width: 282px;
}
.about_animal .btn_wrap {
	display: flex;
	width: 490px;
	flex-wrap: wrap;
	justify-content: space-between;
}
.about_animal .btn_wrap a {
	display: block;
}
.about_animal .dog_btn,
.about_animal .cat_btn,
.about_animal .bird_btn,
.about_animal .rabbit_btn {
	width: 105px;
	margin-bottom: 24px;
}
.about_animal .other_btn,
.about_animal .reptiles_btn {
	width: 235px;
}
@media screen and (max-width:750px){
	.guid03Blk {
		background-color: #f7f8f8;
		padding: 15% 0 9.4%;
	}
	.guid03_inner_wrap {
		width: 100%;
		margin: 0 auto;
	}
	.guid03_inner_wrap .title {
		width: 30%;
		margin: 0 auto 12%;
	}
	.guid03_inner_wrap .contents {
		width: 84.867%;
		margin: 0 auto;
		position: relative;
	}
	.guid03_inner_wrap .text {
		width: 98.466%;
		margin-bottom: 7%;
	}
	.pdf_blk_wrap .text {
		margin-bottom: 4%;
	}
	.pdf_blk_wrap {
		display: block;
		margin-bottom: 8%;
	}
	.about_owner .text {
		width: 67.5%;
		margin-bottom: 5%;
	}
	.about_animal .text{
		width: 67%;
	}

	.pdf_blk_wrap .dash_line {
		width: 2px;
	}
	.about_owner {
		width: 100%;
		margin-bottom: 8%;
	}
	.owner_btn {
		width: 99%;
    display: block;
		margin: 0 auto;
	}
  .about_animal .btn_wrap {
    width: 99%;
    margin: 0 auto;
  }
	.about_animal .btn_wrap a {
		display: block;
	}
	.about_animal .dog_btn,
	.about_animal .cat_btn,
	.about_animal .bird_btn,
	.about_animal .rabbit_btn {
		width: 22%;
		margin-bottom: 4%;
	}
	.about_animal .other_btn,
	.about_animal .reptiles_btn {
		width: 48%;
	}
	.guid03_inner_wrap .spAnnotation {
		width: 97%;
	}
}

.guid04Blk {
	background-color: #f7f8f8;
	padding: 70px 0 93px;
	margin-top: 5px;
	margin-bottom: 5px;
}
.guid04Blk .guid04_inner_wrap {
	width: 980px;
	margin: 0 auto;
}
.guid04_inner_wrap .title {
	width: 382px;
	margin: 0 auto 30px;
	display: block;
}
.guid04_inner_wrap .reserve_btn {
	width: 578px;
	margin: 0 auto 23px;
	display: block;
}
.guid04_inner_wrap .text {
	width: 578px;
	margin: 0 auto;
	display: block;
}
@media screen and (max-width:750px){
	.guid04Blk {
    padding: 8.4% 0 9%;
    margin-top: 0.5%;
    width: 100%;
    margin-bottom: 0.5%;
	}
	.guid04Blk .guid04_inner_wrap {
		width: 86%;
		margin: 0 auto;
	}
	.guid04_inner_wrap .title {
		width: 75.5%;
		margin: 0 auto 5% 0;
		display: block;
	}
	.guid04_inner_wrap .reserve_btn {
		width: 99%;
		margin: 0 auto 5%;
		display: block;
	}
	.guid04_inner_wrap .text {
		width: 99%;
		margin: 0 auto 0 0;
		display: block;
	}
}

.information_blk {
	width: 980px;
	margin: 40px auto 0;
	display: block;
}
.information_blk .title {
	width: 95px;
}
.info_flex_wrap {
	display: block;
	justify-content: space-between;
	align-items: center;
	margin-top: 28.5px;
	margin-bottom: 127px;
	
}
.info_flex_wrap .feature {
	margin-top: auto;
	width: 196px;
}
.top .infoBox {
	width: 100%;
}
@media screen and (max-width:750px){
	.information_blk {
		width: 85%;
		margin:  16% auto 19%;
	}
	.information_blk .title {
		width: 39%;
    margin-bottom: 10%;
	}
	.info_flex_wrap {
		display: flex;
		flex-direction: column-reverse;
		justify-content: space-between;
		align-items: center;
		margin-top: 0;
		margin-bottom: 0;
	}
	.info_flex_wrap .feature {
		margin-top: auto;
		width: 100%;
	}
	.top .infoBox {
		width: 100%;
	}
}


@media screen and (max-width:750px){
	.sp.bnrBottom {
		display: block;
		padding-top: 21%;
	}
	.sp.bnrBottom a {
		background-color: #fff;
		border-radius: 50vw;
		display: flex;
		width: 71vw;
		height: 71vw;
    align-items: center;
		justify-content: center;
		margin: 0 auto;
		position: relative;
	}
	.sp.bnrBottom a  img {
		width: 75%;
    height: auto;
    position: absolute;
    left: 50%;
    top: 54.2%;
    transform: translate(-50%, -50%);
	}
}


.accoBtnOpen,
.active .accoBtnClose {
	display: none;
}

.accoBtnClose,
.active .accoBtnOpen {
	display: block
}
.acc_btn {
	background-color: #fe8400;
	border: none;
	cursor: pointer;
	outline: none;
	padding: 0;
	appearance: none;
	width: 34.933vw;
	border-radius: 50vw;
	padding: 1.7vw 5.5vw;
	box-sizing: border-box;
	
}
.accoBtnOpen {
	width: 8vw;
	position: relative;
}
.accoBtnClose {
	width: 12vw;
	position: relative;
}

.accodionWrap .panel {
	position: relative;
	overflow: hidden;
}
.accodionWrap .panel .closeMask {
	position: absolute;
	top: 0;
	width: 100vw;
	height: 69vw;
	background-color: red;
	transform: translate(-50%,-50%);
	left: 50%;
 background: rgb(255,255,255);
background: linear-gradient(0deg, rgba(255,255,255,1) 6%, rgba(255,255,255,1) 18%, rgba(255,255,255,0) 43%, rgba(255,255,255,0) 100%); 
  opacity: 1;
	transition: opacity 0.3s;
  pointer-events: none;
}
.active .accodionWrap .panel .closeMask {
  opacity: 0;
	transition: opacity 0.3s;
}

@media screen and (max-width:750px){
	.acc_btn::after {
    content: "";
		background-image: url(../img/top/guid_btn_arrow_sp.png);
		background-repeat: no-repeat;
		position: absolute;
		display: block;
		width: 3vw;
		height: 2vw;
		top: 54%;
		
    background-size: 100%;
    transform: translate(-50%,-50%);
    left: 89%;
	}
	.active	.acc_btn::after {
		transform: translate(-50%,-50%) rotate(180deg);
		top: 50%;
	}
}

@media screen and (max-width:750px){
	.guidBlk.active .guid_inner_wrap {
		height: auto;
	}
}