#loader-bg {
	background: #fff;
	height: 100%;
	width: 100%;
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 10;
}

#loader-bg img {
	background: #fff;
	position: fixed;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	z-index: 10;
}

[class^="grid-child-"]>.grid-img {
	width: 100%;
	/* ADD */
	height: 100%;
	/* ADD */
	/* object-fit: scale-down; */
	grid-gap: 10px 20px;
	display: block;
	/*画像余白*/
}

.grid-svg-logo {
	position: absolute;
	top: 66%;
	left: 50%;
	z-index: 1;
	transform: translateY(-50%) translateX(-50%);
	max-width: 45%;
}

.grid {
	display: grid;
	/* グリッド全体を中央に寄せる設定 */
	justify-content: center;
	grid-template-columns: repeat(6, 1fr);
	/* repeat すべてのグリッド grid-template-areasで12分割するから */
	grid-gap: 15px;
	/* animation: sideanime 3s ease-in-out infinite alternate; */
	margin-left: 15px;
	margin-right: 15px;
}

@media screen and (max-width: 967px) {
	.grid {
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 5px;
		margin-left: 5px;
		margin-right: 5px;
	}
}

.grid-child-a {
	grid-column: 1 / 5;
	grid-row: 1 / 3;
}

.grid-child-b {
	grid-column: 5 / 7;
	grid-row: 1 / 3;
}

.grid-child-c {
	grid-column: 1 / 3;
	grid-row: 3 / 5;
}

.grid-child-d {
	grid-column: 3 / 4;
	grid-row: 3 / 4;
}

.grid-child-e {
	grid-column: 4 / 7;
	grid-row: 3 / 4;
}

.grid-child-f {
	grid-column: 3 / 5;
	grid-row: 4 / 5;
}

.grid-child-g {
	grid-column: 5 / 7;
	grid-row: 4 / 6;
}

.grid-child-h {
	grid-column: 1 / 2;
	grid-row: 5 / 6;
}

.grid-child-i {
	grid-column: 2 / 3;
	grid-row: 5 / 6;
}

.grid-child-j {
	grid-column: 1 / 3;
	grid-row: 6 / 7;
}

.grid-child-k {
	grid-column: 3 / 5;
	grid-row: 5 / 7;
}

.grid-child-l {}

.grid-child-m {}

@media screen and (min-width: 968px) {
	.grid-child-a-sp {
		display: none;
	}
}

@media screen and (max-width: 967px) {
	.grid-child-a {
		/* スライド */
		grid-column: 1 / 3;
		grid-row: 1 / 3;
	}
	.grid-child-a-sp {
		/* 診療案内 */
		grid-column: 1 / 2;
		grid-row: 3 / 4;
	}
	.grid-child-m {
		/* アクセス */
		grid-column: 2 / 3;
		grid-row: 3 / 4;
	}
	.grid-child-b {
		/* 夜間診療 */
		grid-column: 1 / 2;
		grid-row: 4 / 5;
	}
	.grid-child-k {
		/* 院内案内 */
		grid-column: 2 / 3;
		grid-row: 4 / 5;
	}
	.grid-child-e {
		/* エキゾチック */
		grid-column: 1 / 3;
		grid-row: 6 / 7;
	}
	.grid-child-c {
		/* 高度医療 */
		grid-column: 1 / 2;
		grid-row: 5 / 6;
	}
	.grid-child-f {
		/* グループ事業 */
		grid-column: 1 / 3;
		grid-row: 10 / 11;
	}
	.grid-child-d {
		/* 動物行動診療 */
		grid-column: 2 / 3;
		grid-row: 5 / 6;
	}
	.grid-child-g {
		/* 外科手術 */
		grid-column: 1 / 2;
		grid-row: 7 / 8;
	}
	.grid-child-h {
		/* ごあいさつ */
		grid-column: 1 / 2;
		grid-row: 11 / 12;
	}
	.grid-child-i {
		/* 動物愛護 */
		grid-column: 2 / 3;
		grid-row: 7 / 8;
	}
	.grid-child-j {
		/* 求人情報 */
		grid-column: 1 / 3;
		grid-row: 8 / 9;
	}
	.grid-child-l {
		/* ウェブショップ */
		grid-column: 2 / 3;
		grid-row: 11 / 12;
	}
}

@keyframes sideanime {
	100% {
		grid-gap: 0;
	}
	0% {
		grid-gap: 15px;
	}
}

[class^="grid-child-"] {
	overflow: hidden;
	/*これを記述することではみ出た部分を非表示にします。 */
	position: relative;
}

[class^="grid-child-"] img {
	cursor: pointer;
	transition-duration: 0.3s;
}

[class^="grid-child-"] a {
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
}

[class^="grid-child-"]:not(.grid-child-a):hover {
	opacity: 0.6;
	transition-duration: 0.3s;
}

[class^="grid-child-"] .top-h2 {
	font-size: 1.8vw;
	position: absolute;
	bottom: 1.8vw;
	left: 0.6vw;
	font-family: "FP-HiraKakuProN-W6";
	letter-spacing: .1em;
	z-index: 1;
}

@media screen and (max-width: 767px) {
	[class^="grid-child-"] .top-h2 {
		font-size: 6vw;
		bottom: 1.8vw;
		left: 2.8vw;
	}
}

[class^="grid-child-"] p {
	position: absolute;
	font-size: .7vw;
	bottom: 0.6vw;
	left: 0.6vw;
	font-family: 'AscenderSans';
	z-index: 1;
}

@media screen and (max-width: 767px) {
	[class^="grid-child-"] p {
		font-size: 2vw;
		left: 2.8vw;
	}
}

/*swipperアニメーション*/

@keyframes translateY {
	0% {
		transform: translateY(-10%);
	}
	100% {
		transform: translateY(10%);
	}
}

@keyframes translateX {
	0% {
		transform: translateX(-7%);
	}
	100% {
		transform: translateX(7%);
	}
}

@keyframes zoomUp {
	0% {
		transform: scale(.9);
	}
	100% {
		transform: scale(1);
	}
}

@media screen and (min-width: 968px) {
	.swiper-container.slider5 {
		display: none;
	}
}

.swiper-slide-active .slide-anime1, .swiper-slide-duplicate-active .slide-anime1, .swiper-slide-prev .slide-anime1 {
	animation: translateY 8s linear 0s 1 alternate none;
	will-change: transform;
}

.swiper-slide-active .slide-anime2, .swiper-slide-duplicate-active .slide-anime2, .swiper-slide-prev .slide-anime2 {
	animation: translateX 8s linear 0s 1 alternate none;
	will-change: transform;
}

.swiper-slide-active .slide-anime3, .swiper-slide-duplicate-active .slide-anime3, .swiper-slide-prev .slide-anime3 {
	animation: zoomUp 20s linear 0s 1 alternate none;
}

/* セレクタ名 {
	animation: 名前 開始から終了までの時間 進行の度合い 開始時間 繰り返し回数 再生方向 開始前・終了後のスタイル 再生・停止;
} */

/*imgタグだと下に隙間ができるのでblockに*/

.slide-img img {
	display: block;
	width: 100%;
}

.slide-anime-img {
	transform: scale(1.2);
}

/*swipperアニメーション*/

@media screen and (max-width: 767px) {
	.slider1 {
		display: none;
	}
}

@media screen and (min-width: 768px) {
	.slider4 {
		display: none;
	}
}