@charset 'UTF-8';

/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

	トップページ

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */



/* ================================================================================

	レイアウト

================================================================================ */

/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {
	#wrapper {
	}

	main.outer_wrap {
		position: relative;
		max-width: none;
		/* max-width: 1920px; 固定幅レイアウト時 */
		width: 100%;
		min-height: 50vh;
		display: block;
		margin: 0 auto;
	}

	.inner_wrap {
		position: relative;
	}

	footer.bs_footer {
		margin-top: 80px;
	}
}



/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	#wrapper {
	}

	main.outer_wrap {
		position: relative;
		width: 100%;
	}

	.inner_wrap {
		position: relative;
	}

	footer.bs_footer {
		margin-top: 12vw;
	}
}





/* ================================================================================

	メイン画像

================================================================================ */


/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {
	.main_top {
		position: relative;
		margin-top: 20px;
	}
	.main_top_in {
		position: relative;
		text-align: center;
	}
	.main_top_in img {
		max-width: 1180px;
		width: 100%;
		height: 600px;
		object-fit: cover;
		font-family: 'object-fit: cover;'; /* IE対策 */
		object-position: center top;
		border-radius: 20px;
	}
}


/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	.main_top {
		position: relative;
		margin-top: 6vw;
	}
	.main_top_in {
		position: relative;
		text-align: center;
	}
	.main_top_in img {
		width: 100%;
		height: auto;
	}
}





/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★

	ここからコンテンツ内容

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */



/* ================================================================================

	地域密着の親切な動物病院

================================================================================ */


/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {

	.row01 {
		position: relative;
		padding: 152px 0 0 0;
	}
	.row01_in {
		margin-top: 40px;
	}
	.row01_in .left {
		width: 536px !important;
		margin-right: 40px;
	}
	.row01_in .right{
		width: 460px !important;
	}

	/* 見出し */
	.title_top01 {
		position: relative;
	}

	.title_top01 h2 {
		font-size: 38px;
		font-weight: 500;
		letter-spacing: 0.05em;
		line-height: 1.4;
		color: #318fc1;
		display: flex;
		align-items: center;
	}
	.title_top01 h2::before {
		position: absolute;
		content: "";
		display: block;
		background: url(../img/bg_title.png) center top / contain no-repeat;
		width: 78px;
		height: 61px;
		top: -26px;
		left: -29px;
		z-index: -1;
	}
	.title_top01 h2:after {
		content: "";
		flex-grow: 1;
		height: 1px;
		background: #318fc1;
		display: block;
	}
	.title_top01 h2:after {
		margin-left: 0.4em;
	}

	/* 電話 */
	.schedule_tel {
	}
	.schedule_tel a {
		position: relative;
		display: inline-block;
		padding-left: 50px;
		font-size: 32px;
		line-height: 30px;
		letter-spacing: 0.1em;
		color: #318fc1;
		pointer-events: none;
	}
	.schedule_tel a::before {
		position: absolute;
		content: "";
		display: block;
		background: url(../img/icon_tel2.png) center top / contain no-repeat;
		width: 39px;
		height: 33px;
		top: 0;
		left: 0;
	}

	/* スケジュール
	----------------------------------------------- */
	.schedule {
		font-size: 15px;
		color: #2082b6;
		margin-top: 10px;
	}
	.schedule table {
		border-top: 1px solid #dadde2;
		width: 100%;
		white-space: nowrap;
	}
	.schedule tr {
		border-bottom: 1px solid #dadde2;
	}
	.schedule th {
		padding: 0.5em 0;
		font-weight: 500;
		text-align: center;
		vertical-align: middle;
		width: 10%;
	}
	.schedule th:first-of-type {
		width: 30%;
	}
	.schedule td {
		padding: 0.5em 0;
		text-align: center;
		vertical-align: middle;
	}

	.schedule p {
		line-height: 2;
	}

	/* 外部リンク
	----------------------------------------------- */
	.link_gaibu {
		margin-top: 40px;
	}
	.link_gaibu ul {
		font-size: 0;
		letter-spacing: -.4em;
	}
	.link_gaibu ul li {
		display: inline-block;
	}
	.link_gaibu ul li:not(:first-of-type) {
		margin-left: 10px;
	}
	.link_gaibu ul li a img {
		width: 228px;
		height: auto;
	}
}


/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {

	.row01 {
		position: relative;
		padding: 16vw 4vw 0;
	}
	.row01_in {
		margin-top: 8vw;
	}
	.row01_in .left {
	}
	.row01_in .right{
		margin-top: 12vw;
	}

	/* 見出し */
	.title_top01 {
		position: relative;
	}

	.title_top01 h2 {
		font-size: 6vw;
		font-weight: 500;
		letter-spacing: 0.05em;
		line-height: 1.4;
		color: #318fc1;
		display: flex;
		align-items: center;
	}
	.title_top01 h2::before {
		position: absolute;
		content: "";
		display: block;
		background: url(../img/bg_title.png) center top / contain no-repeat;
		width: 10vw;
		height: 8vw;
		top: -4vw;
		left: -5vw;
		z-index: -1;
	}
	.title_top01 h2:after {
		content: "";
		flex-grow: 1;
		height: 1px;
		background: #318fc1;
		display: block;
	}
	.title_top01 h2:after {
		margin-left: 0.4em;
	}

	/* 電話 */
	.schedule_tel {
	}
	.schedule_tel a {
		position: relative;
		display: inline-block;
		padding-left: 13vw;
		font-size: 6vw;
		line-height: 8vw;
		letter-spacing: 0.1em;
		color: #318fc1;
		pointer-events: none;
	}
	.schedule_tel a::before {
		position: absolute;
		content: "";
		display: block;
		background: url(../img/icon_tel2.png) center top / contain no-repeat;
		width: 10vw;
		height: 10vw;
		top: 0;
		left: 0;
	}

	/* スケジュール
	----------------------------------------------- */
	.schedule {
		font-size: 3.5vw;
		color: #2082b6;
		margin-top: 4vw;
	}
	.schedule table {
		border-top: 1px solid #dadde2;
		width: 100%;
		white-space: nowrap;
	}
	.schedule tr {
		border-bottom: 1px solid #dadde2;
	}
	.schedule th {
		padding: 0.5em 0;
		font-weight: 500;
		text-align: center;
		vertical-align: middle;
		width: 10%;
	}
	.schedule th:first-of-type {
		width: 30%;
	}
	.schedule td {
		padding: 0.5em 0;
		text-align: center;
		vertical-align: middle;
	}

	/* 外部リンク
	----------------------------------------------- */
	.link_gaibu {
		margin-top: 8vw;
	}
	.link_gaibu ul {
		font-size: 0;
		letter-spacing: -.4em;
	}
	.link_gaibu ul li {
		display: inline-block;
		width: 48%;
	}
	.link_gaibu ul li:not(:first-of-type) {
		margin-left: 4%;
	}
	.link_gaibu ul li a img {
		width: 100%;
		height: auto;
	}
}





/* ================================================================================

	お知らせ

================================================================================ */


/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {

	.row02 {
		position: relative;
		padding: 152px 0 0 0;
	}
	.row02_in {
		margin-top: 40px;
	}


	.post_box {
		position: relative;
		background-color: #ffffff;
		padding: 20px 24px 24px 24px;
		border: 10px solid #318fc1;
	}
	.post_box::before {
		position: absolute;
		content: "";
		display: block;
		background: url(../img/parts_neco.png) center top / contain no-repeat;
		width: 49px;
		height: 62px;
		top: -53px;
		right: 62px;
	}
	.facebook_box {
		border: 10px solid #7eb750;
	}


	/* お知らせ */
	.post_wrap {
		background-color: #ffffff;
		height: 351px;
		padding-right: 10px;
	}
	.post_wrap ul {
	}
	.post_wrap ul li {
		background: linear-gradient(to right, #318fc1 2px, transparent 2px) left bottom / 8px 2px repeat-x;
		padding-bottom: 0.7em;
	}
	.post_wrap ul li:not(:first-of-type) {
		margin-top: 0.7em;
	}

	.post_wrap ul li .post_title a {
		line-height: 1.4;
	}
}


/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {

	.row02 {
		position: relative;
		padding: 16vw 4vw 0;
	}
	.row02_in {
		margin-top: 6vw;
	}


	.post_box {
		position: relative;
		background-color: #ffffff;
		padding: 4vw;
		border: 2vw solid #318fc1;
	}
	.post_box::before {
		position: absolute;
		content: "";
		display: block;
		background: url(../img/parts_neco.png) center top / contain no-repeat;
		width: 13vw;
		height: 17vw;
		top: -13.5vw;
		right: 3vw;
	}
	.facebook_box {
		border: 2vw solid #7eb750;
	}


	/* お知らせ */
	.post_wrap {
		background-color: #ffffff;
		height: 92vw;
		padding-right: 3vw;
	}
	.post_wrap ul {
	}
	.post_wrap ul li {
		background: linear-gradient(to right, #318fc1 2px, transparent 2px) left bottom / 8px 2px repeat-x;
		padding-bottom: 0.7em;
	}
	.post_wrap ul li:not(:first-of-type) {
		margin-top: 0.7em;
	}

	.post_wrap ul li .post_title a {
		line-height: 1.4;
	}
}





/* ================================================================================

	動物の身近なホームドクター

================================================================================ */


/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {
	.row03 {
		background: url(../img/bg_doctor.jpg) center top / 81.8vw auto repeat-x;
		-webkit-animation: bgLoop 40s linear infinite;
		animation: bgLoop 40s linear infinite;
		padding-top: 9vw;
		margin-top: 160px;
	}
	
	@-webkit-keyframes bgLoop {
		0% { background-position: 0 0;}
		100% { background-position: -81.8vw 0px;}
	}
	@keyframes bgLoop {
		0% { background-position: 0 0;}
		100% { background-position: -81.8vw 0px;}
	}


	.row03 .left {
		padding: 0 6vw 0 7.5vw;
	}
	.row03 .right {
		padding-right: 3.75vw;
	}


	/* 見出し */
	.row03 .title {
	}
	.row03 .title h2 {
		font-size: 2.39vw;
		letter-spacing: 0.05em;
		color: #318fc1;
	}
	.row03 .title h2 span {
		color: #ffa800;
	}

	/* テキスト */
	.row03 .text {
		margin-top: 2vw;
		font-size: 1.145vw;
	}

	/* リンク */
	.link_top {
		margin-top: 2vw;
	}
	.link_top ul {
		font-size: 0;
		letter-spacing: -0.4em;
	}
	.link_top ul li {
		display: inline-block;
		font-size: 1.145vw;
		letter-spacing: 0;
	}
	.link_top ul li a {
		position: relative;
		display: block;
		background-color: #318fc1;
		color: #ffffff;
		letter-spacing: 0.05em;
		text-indent: 0.05em;
		line-height: 1.3;
		padding: 0.8em 4em 0.9em;
		border-radius: 0.3em;
	}

	.link_top ul li a::after {
		position: absolute;
		content: "";
		display: block;
		background: url(../img/arrow.png) center top / contain no-repeat;
		width: 1.3vw;
		height: 1.25vw;
		top: 50%;
		margin-top: -0.63vw;
		right: 0.65vw;
	}

	/* 画像 */
	.row03 .img img {
		position: relative;
		width: 100%;
		border-radius: 2vw;
	}
	.row03 .img::before {
		position: absolute;
		content: "";
		display: block;
		background: url(../img/parts_tori.png) center top / contain no-repeat;
		width: 2.91vw;
		height: 1.35vw;
		top: 0;
		margin-top: -1.8vw;
		right: 20vw;
		animation: jumpjump 1s infinite;
	}
	@keyframes jumpjump {
		0% {transform: translate(0vw, 0vw) rotateZ(0deg)}
		50% {transform: translate(0vw, 0.5vw) rotateZ(0deg)}
		100% {transform: translate(0vw, 0vw) rotateZ(0deg)}
	}

	.row03 .img::after {
		position: absolute;
		content: "";
		display: block;
		background: url(../img/parts_neco2.png) center top / contain no-repeat;
		width: 13.17vw;
		height: 8.75vw;
		bottom: -3vw;
		left: -6.6vw;
		animation: hurueru 1.5s infinite;
	}
	@keyframes hurueru {
		0% {transform: translate(0vw, 0vw) rotateZ(0deg)}
		25% {transform: translate(0.3vw, 0.3vw) rotateZ(1deg)}
		50% {transform: translate(0vw, 0.3vw) rotateZ(0deg)}
		75% {transform: translate(0.3vw, 0vw) rotateZ(-1deg)}
		100% {transform: translate(0vw, 0vw) rotateZ(0deg)}
	}
}


/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	.row03 {
		background: url(../img/bg_doctor.jpg) center top / 240vw auto repeat-x;
		-webkit-animation: bgLoop 40s linear infinite;
		animation: bgLoop 40s linear infinite;
		padding: 20vw 4vw 0;
		margin-top: 16vw;
	}
	
	@-webkit-keyframes bgLoop {
		0% { background-position: 0 0;}
		100% { background-position: -240vw 0px;}
	}
	@keyframes bgLoop {
		0% { background-position: 0 0;}
		100% { background-position: -240vw 0px;}
	}


	.row03 .left {
	}
	.row03 .right {
		margin-top: 12vw;
	}


	/* 見出し */
	.row03 .title {
	}
	.row03 .title h2 {
		font-size: 6vw;
		letter-spacing: 0.05em;
		color: #318fc1;
	}
	.row03 .title h2 span {
		color: #ffa800;
	}

	/* テキスト */
	.row03 .text {
		margin-top: 6vw;
	}

	/* リンク
	----------------------------------------------- */
	.link_top {
		margin-top: 6vw;
	}
	.link_top ul {
		text-align: center;
	}
	.link_top ul li {
		display: block;
		font-size: 4vw;
	}
	.link_top ul li:not(:first-child) {
		margin-top: 2vw;
	}
	.link_top ul li a {
		position: relative;
		display: block;
		width: 80vw;
		background-color: #318fc1;
		color: #ffffff;
		letter-spacing: 0.05em;
		text-indent: 0.05em;
		line-height: 1.3;
		padding: 0.8em 0 0.9em;
		margin-left: auto;
		margin-right: auto;
		border-radius: 0.3em;
	}

	.link_top ul li a::after {
		position: absolute;
		content: "";
		display: block;
		background: url(../img/arrow.png) center top / contain no-repeat;
		width: 4vw;
		height: 3.8vw;
		top: 50%;
		margin-top: -2vw;
		right: 3vw;
	}

	/* 画像 */
	.row03 .img img {
		position: relative;
		width: 100%;
		border-radius: 2vw;
	}
	.row03 .img::before {
		position: absolute;
		content: "";
		display: block;
		background: url(../img/parts_tori.png) center top / contain no-repeat;
		width: 8vw;
		height: 4vw;
		top: 0;
		margin-top: -5.2vw;
		right: 11vw;
		animation: jumpjump 1s infinite;
	}
	@keyframes jumpjump {
		0% {transform: translate(0vw, 0vw) rotateZ(0deg)}
		50% {transform: translate(0vw, 1.5vw) rotateZ(0deg)}
		100% {transform: translate(0vw, 0vw) rotateZ(0deg)}
	}

	.row03 .img::after {
		position: absolute;
		content: "";
		display: block;
		background: url(../img/parts_neco2.png) center top / contain no-repeat;
		width: 30vw;
		height: 20vw;
		bottom: -4vw;
		left: -4vw;
		animation: hurueru 1.5s infinite;
	}
	@keyframes hurueru {
		0% {transform: translate(0vw, 0vw) rotateZ(0deg)}
		25% {transform: translate(0.3vw, 0.3vw) rotateZ(1deg)}
		50% {transform: translate(0vw, 0.3vw) rotateZ(0deg)}
		75% {transform: translate(0.3vw, 0vw) rotateZ(-1deg)}
		100% {transform: translate(0vw, 0vw) rotateZ(0deg)}
	}
}





/* ================================================================================

	予防接種をお忘れなく！

================================================================================ */


/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {
	.row04 {
		background: url(../img/bg_dot.jpg) center top / 16px auto repeat;
		-webkit-animation: bgLoop2 1s linear infinite;
		animation: bgLoop2 1s linear infinite;
		padding: 80px 0;
		margin-top: 160px;
		color: #ffffff;
	}
	
	@-webkit-keyframes bgLoop2 {
		0% { background-position: 0 0;}
		100% { background-position: 16px 0px;}
	}
	@keyframes bgLoop2 {
		0% { background-position: 0 0;}
		100% { background-position: 16px 0px;}
	}

	/* 見出し */
	.row04 .title {
	}
	.row04 .title h2 {
		text-align: center;
		font-size: 38px;
		font-weight: 500;
	}

	/* テキスト */
	.row04 .text {
		font-size: 20px;
		margin-top: 40px;
	}


	/* リンク
	----------------------------------------------- */
	.link_top2 {
		margin-top: 40px;
	}
	.link_top2 ul {
		font-size: 0;
		letter-spacing: -0.4em;
		text-align: center;
	}
	.link_top2 ul li {
		display: inline-block;
		font-size: 20px;
		letter-spacing: 0;
	}
	.link_top2 ul li:not(:first-child) {
		margin-left: 10px;
	}
	.link_top2 ul li a {
		position: relative;
		display: block;
		background-color: #ffa800;
		color: #ffffff;
		letter-spacing: 0.05em;
		text-indent: 0.05em;
		line-height: 1.3;
		padding: 0.8em 4em 0.9em;
		border-radius: 0.3em;
	}

	.link_top2 ul li a::after {
		position: absolute;
		content: "";
		display: block;
		background: url(../img/arrow.png) center top / contain no-repeat;
		width: 22px;
		height: 21px;
		top: 50%;
		margin-top: -11px;
		right: 12px;
	}
}


/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	.row04 {
		background: url(../img/bg_dot.jpg) center top / 4vw auto repeat;
		-webkit-animation: bgLoop2 1s linear infinite;
		animation: bgLoop2 1s linear infinite;
		padding: 12vw 8vw;
		margin-top: 16vw;
		color: #ffffff;
	}
	
	@-webkit-keyframes bgLoop2 {
		0% { background-position: 0 0;}
		100% { background-position: 4vw 0px;}
	}
	@keyframes bgLoop2 {
		0% { background-position: 0 0;}
		100% { background-position: 4vw 0px;}
	}

	/* 見出し */
	.row04 .title {
	}
	.row04 .title h2 {
		text-align: center;
		font-size: 6vw;
		font-weight: 500;
	}

	/* テキスト */
	.row04 .text {
		font-size: 3.5vw;
		margin-top: 6vw;
	}

	/* リンク
	----------------------------------------------- */
	.link_top2 {
		margin-top: 6vw;
	}
	.link_top2 ul {
		text-align: center;
	}
	.link_top2 ul li {
		display: block;
		font-size: 4vw;
	}
	.link_top2 ul li:not(:first-child) {
		margin-top: 2vw;
	}
	.link_top2 ul li a {
		position: relative;
		display: block;
		width: 80vw;
		background-color: #ffa800;
		color: #ffffff;
		letter-spacing: 0.05em;
		text-indent: 0.05em;
		line-height: 1.3;
		padding: 0.8em 0 0.9em;
		margin-left: auto;
		margin-right: auto;
		border-radius: 0.3em;
	}

	.link_top2 ul li a::after {
		position: absolute;
		content: "";
		display: block;
		background: url(../img/arrow.png) center top / contain no-repeat;
		width: 4vw;
		height: 3.8vw;
		top: 50%;
		margin-top: -2vw;
		right: 3vw;
	}
}





/* ================================================================================

	3連バナー

================================================================================ */


/* PC設定
----------------------------------------------- */
@media (min-width: 768px) {
	.row05 {
		padding-top: 80px;
	}


	/* リンク
	----------------------------------------------- */
	.link_top3 {
	}
	.link_top3 ul {
		font-size: 0;
		letter-spacing: -0.4em;
		text-align: center;
	}
	.link_top3 ul li {
		display: inline-block;
		width: 30%;
		font-size: 20px;
		letter-spacing: 0;
	}
	.link_top3 ul li:not(:first-child) {
		margin-left: 5%;
	}
	.link_top3 ul li a {
		position: relative;
		display: block;
		width: 100%;
		background-color: #318fc1;
		color: #ffffff;
		letter-spacing: 0.05em;
		text-indent: 0.05em;
		line-height: 1.3;
		padding: 0.8em 0 0.9em;
		border-radius: 0.3em;
	}

	.link_top3 ul li a::after {
		position: absolute;
		content: "";
		display: block;
		background: url(../img/arrow.png) center top / contain no-repeat;
		width: 22px;
		height: 21px;
		top: 50%;
		margin-top: -11px;
		right: 12px;
	}
}


/* SP設定
----------------------------------------------- */
@media (max-width: 767px) {
	.row05 {
		padding-top: 12vw;
	}

	/* リンク
	----------------------------------------------- */
	.link_top3 {
	}
	.link_top3 ul {
		text-align: center;
	}
	.link_top3 ul li {
		display: block;
		font-size: 4vw;
	}
	.link_top3 ul li:not(:first-child) {
		margin-top: 2vw;
	}
	.link_top3 ul li a {
		position: relative;
		display: block;
		width: 80vw;
		background-color: #318fc1;
		color: #ffffff;
		letter-spacing: 0.05em;
		text-indent: 0.05em;
		line-height: 1.3;
		padding: 0.8em 0 0.9em;
		margin-left: auto;
		margin-right: auto;
		border-radius: 0.3em;
	}

	.link_top3 ul li a::after {
		position: absolute;
		content: "";
		display: block;
		background: url(../img/arrow.png) center top / contain no-repeat;
		width: 4vw;
		height: 3.8vw;
		top: 50%;
		margin-top: -2vw;
		right: 3vw;
	}
}