@charset "utf-8";


/*  診療案内
==================================*/
.service .mainImg { background: url(../img/service/main_photo_pc.jpg) no-repeat center; }
.service h2 { width: 174px; }
.service .copy {
	margin-bottom: 30px;
	font-size: 16px;
	line-height: 2.25;
	}
	.service .img { margin-bottom: 95px; }

.service .ser01,
.service .ser02,
.service .ser03 { margin-bottom: 70px; }
	.service .ser01 h3,
	.service .ser02 h3,
	.service .ser03 h3 {
		float: left;
		margin: 0;
		font-size: 16px;
		line-height: 2.25;
		}
	.service .ser01 h3 { margin-top: 10px; }
	.service .ser01 div,
	.service .ser02 div,
	.service .ser03 ul {
		float: right;
		width: 760px;
		font-size: 14px;
		line-height: 2;
		}
	.service .ser01 div img { margin-bottom: 15px; }
	.remodal-overlay {
		background-color: rgba(0, 0, 0, 0.9);
	}
  .remodal.mdservice {
		border: initial;
		width: 680px;
		padding: 86px 86px;
    color: #050505;
	}
	.remodal-wrapper {
		padding-top: 120px;
	}

.remodalTextWrap p {
	line-height: 2;
}
.remodalTextWrap .title p {
	font-size: 14px;
	margin-bottom: 22px;
	letter-spacing: -0.1em;
	/*! width: 510px; */
}
.remodalTextWrap .contactInfoWrap {
	padding: 24px;
  background-color: #f0f0f0;
  margin-bottom: 30px;
	
}
.remodalTextWrap .contactInfoWrap .contactMainText {
	font-weight: 600;
  font-size: 14px;
	
}
.remodalTextWrap .contactInfoWrap .contactNotice {
	font-size: 10px;
	letter-spacing: -0.04em;
}

.remodalTextWrap .sentence {
	margin-bottom: 24px;
	font-size: 12px;
}
.remodalWrap .remodalTextWrap .text {
	margin-bottom: 30px;
}
.remodalWrap .linkWrap p {
	line-height: 2.333;
}
.remodalWrap .linkWrap p:before {
  content: "";	
  display: inline-block;
  border-style: solid;
  border-width: 6px 0px 6px 8px;
	margin-right: 11.29px;
  border-color: transparent transparent transparent #e65408;
}

.remodal-close {
	background-image: url("../img/service/remodalclose.svg");
	width: 28px;
	height: 28px;
	right: 0;
/*   position: absolute;
  top: -55px;
  right: -10px;
  display: block;
  overflow: visible;
  width: 25px;
  height: 25px;
  margin: 0;
  padding: 0;
  cursor: pointer;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
  text-decoration: none;
  opacity: 1;
  border: 0;
  outline: 0;
  background: transparent;
  border-color: #fff;
	background-color: #000;
	border-color: #fff; */
}



	.service .ser01 p.notice {
		font-size: 12px;
	}
	.service .ser02 table {
		width: 760px;
		margin-bottom: 10px;
		}
		.service .ser02 table th,
		.service .ser02 table td {
			border-bottom: solid 3px #fff;
			background-color: #f7f8f8;
			padding: 8px 40px;
			font-size: 15px;
			color: #595757;
			text-align: center;
			position: relative;
			}
		.service .ser02 table th {
			border-right: solid 3px #fff;
			width: 215px;
			text-align: left;
			box-sizing: border-box;
			display: inline-block;
			font-size: 0;
			}
		.service .ser02 table thead th .largeChar {
			font-size: 18px;
			margin-bottom: 0;
		}
		.service .ser02 table th br {
			font-size: 0;
			line-height: 0;
		}
		.service .ser02 table th .largeChar {
			font-size: 18px;

		}
		.service .ser02 table th .smallChar {
			font-size: 12px;
			display: inline-block;
			margin-top: -5px;
		}
		.service .ser02 table td {
			width: 70px;
			padding: 8px 0;
			white-space: nowrap;
			vertical-align: middle;
			position: relative;
    }
		.service .ser02 table td.sup::after {
			/*! position: absolute; */
  		display: inline-block;
			content: "※";
			font-size: 12px;
			color: #f04f02;
			/*! top: 0; */
			/*! right: 0; */
			width: 0px;
			top: 31%;
			position: relative;
			/*left: 83%;*/
			position: absolute;
			transform: translate(-50%, -50%);
			z-index: 1;
		}
		.service .ser02 table td.sup.sup1::after {
			content: "※1";
		}
		.service .ser02 table td.sup.sup2::after {
			content: "※2";
			left: 51%;
		}
		.asterisk {
			color: #f04f02;
			margin-right: 6px;
		}
		.service .ser02 table th + td { padding-left: 40px; }
		.service .ser02 table td:last-child { padding-right: 40px; }
		.service .ser02 table tbody tr:first-child td:last-child {
			font-size: 16px;
			line-height: 2.1; }
	.service .ser03 li { margin-bottom: 30px; }
		.service .ser03 li strong {
			display: block;
			margin-bottom: 5px;
			font-size: 18px;
			font-weight: normal;
			}
.service .ser04 {
	position: relative;
	border: solid 14px #fbeee2;
	padding: 60px 65px 45px;
	box-sizing: border-box;
	}
	.service .ser04 h3 {
		position: absolute;
		top: -20px;
		left: 0;
		right: 0;
		background-color: #fff;
		width: 389px;
		margin: auto;
		}
	.service .ser04 ul { margin-bottom: 30px; }
	.service .ser04 li {
		position: relative;
		border-bottom: solid 1px #ddd;
		margin-bottom: 15px;
		padding-left: 1.2em;
		padding-bottom: 15px;
		font-size:14px;
		line-height: 1.715;
		letter-spacing: -0.06em;
		}
		.service .ser04 li:before {
			position: absolute;
			top: 0;
			left: 0;
			display: inline-block;
			content: "●";
			}
	.service .ser04 .btn a {
		display: block;
		background-color: #ea5500;
		width: 330px;
		margin: 0 auto;
		padding: 25px 0;
		font-weight: bold;
		color: #fff;
		line-height: 1;
		text-align: center;
		}

.ser02 .annotation ol {
  list-style: none;
  counter-reset: number;
}

.ser02 .annotation li {
  position: relative;
  padding-left: 31px;
	font-size: 14px;
  letter-spacing: -0.03em;
}
.ser02 .annotation li::before {
  counter-increment: number;
  content: '※' counter(number) '';
  position: absolute;
  left: 0;
	color: #f04f02;
}
@media screen and (max-width:750px){
	.ser02 .annotation li {
		font-size: 3.733vw;
		line-height: 1.857;
		letter-spacing: -0.02em;
		padding-left: 8%;
	}
}

@media screen and (max-width:750px){
	.service .mainImg { background: url("../img/service/main_photo_sp.jpg") no-repeat center/100% auto; }
	.service h2 { width: 35.781%; }
	.service .copy {
		margin-bottom: 9.375%;
		font-size: 3.733vw;
		line-height: 1.857;
		}
		.service .img {
			width: 100%;
			margin-bottom: 14.063%;
			}
	.remodal-wrapper {
		padding: 26.667vw 0 0;
	}
	.service .ser01,
	.service .ser02,
	.service .ser03 { margin-bottom: 15.625%; }
		.service .ser01 h3,
		.service .ser02 h3,
		.service .ser03 h3 {
			float: none;
			width: 27.031%;
			margin-bottom: 7.813%;
			font-size: 0;
			line-height: 1;
			}
		.service .ser01 h3 {
			width: 27.344%;
			margin-top: 0;
			}
		.service .ser01 div,
		.service .ser02 div,
		.service .ser03 ul {
			float: none;
			width: 100%;
			}
		.service .ser01 p,
		.service .ser02 p {
			font-size: 3.733vw;
			line-height: 1.857;
			letter-spacing: -0.02em;
			}
		.service .ser01 div img { margin-bottom: 10.938%; }
		.service .ser01 p.notice {
			font-size: 3.2vw;
		}
	.remodal.mdservice {
  width: 85.333%;
  padding: 6.133vw 6.25% 12.267vw;
  color: #050505;
  margin-bottom: 14.667vw;
}
		
.remodalTextWrap p {
	line-height: 2;
}
.remodalTextWrap .title p {
	font-size: 3.733vw;
	margin-bottom: 5.2vw;
	letter-spacing: -0.05em;
	/*! width: 510px; */
}
.remodalTextWrap .contactInfoWrap {
padding: 4vw 6.25vw;
margin-bottom: 6.4vw;	
}
.remodalTextWrap .contactInfoWrap .contactMainText {
	font-weight: 600;
  font-size: 3.733vw;
	letter-spacing: -0.04em;
	margin-bottom: 1.3vw;
	
}
.remodalTextWrap .contactInfoWrap .contactNotice {
font-size: 2.667vw;
	letter-spacing: -0.06em;
	line-height: 1.5;
	
}

.remodalTextWrap .sentence {
	margin-bottom: 6.4vw;
	font-size: 3.2vw;
	letter-spacing: -0.05em;
}
.remodalWrap .remodalTextWrap .text {
	margin-bottom: 6.4vw;
}
.remodalWrap .linkWrap p {
	line-height: 2.333;
	font-size: 3.2vw;
}
.remodalWrap .linkWrap p:before {

  border-width: 1.73vw 0px 1.73vw 2.053vw;
	margin-right: 2.08vw;
	vertical-align: text-bottom;
  display: inline-block;
}

.remodal-close {
	background-image: url("../img/service/remodalclose.svg");
	width: 7.467vw;
	height: 7.467vw;
	right: 0;
  top: -13.067vw;
/*   position: absolute;
  top: -55px;
  right: -10px;
  display: block;
  overflow: visible;
  width: 25px;
  height: 25px;
  margin: 0;
  padding: 0;
  cursor: pointer;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
  text-decoration: none;
  opacity: 1;
  border: 0;
  outline: 0;
  background: transparent;
  border-color: #fff;
	background-color: #000;
	border-color: #fff; */
}



	.service .ser01 p.notice {
		font-size: 3.2vw;
	}
	
	

		.service .ser02 table {
			width: 100%;
			margin-bottom: 4.688%;
			}
			.service .ser02 table th,
			.service .ser02 table td {
				border-bottom: solid .4vw #fff;
				padding: 0 2.344%;
				}
			.service .ser02 table th {
				border-right: solid .4vw #fff;
				width: 23.688%;
				display: table-cell;
				font-size: 0;
				line-height: 1;
				padding: 1.96vw 2.344% 1.96vw 3.344%;
				}
	.service .ser02 table thead th {
				padding: 2.46vw 2.344% 2.46vw 3.344%;
	}
		.service .ser02 table td.sup::after {
			font-size: 2.133vw;
			top: 26%;
			left: 50%;
			z-index: 1;
		}
	.service .ser02 table td.sup.sup2::after {
		left: 66%;
		
	}
		.asterisk {
			margin-right: 1vw;
		}
			.service .ser02 table td {
								font-size: 3.2vw;
				width: 6.375%;
				padding: 0.281% 0;
				white-space: nowrap;
								vertical-align: middle;
				}
			.service .ser02 table th + td { padding-left: 2.344%; }
			.service .ser02 table td:last-child {
				padding-right: 2.344%;
				letter-spacing: -0.08em;
				}
			.service .ser02 table tbody tr:first-child td:last-child {
				font-size: 2.62vw;
				line-height: 2.4; }
			.service .ser02 table tbody .adjustFont {
				font-size: 2.62vw;
				line-height: 2.4;
				letter-spacing: -0.08em;
			}
			.service .ser02 table thead th .largeChar {
				font-size: 3.2vw;
				margin-bottom: 0;
			}
			.service .ser02 table th br {
				font-size: 0;
				line-height: 0;
			}
			.service .ser02 table th .largeChar {
				font-size: 3.2vw;

			}
			.service .ser02 table th .smallChar {
				font-size: 2.133vw;
				margin-top: 1.4vw;
			}
	.service .ser03 { margin-bottom: 10.938%; }
		.service .ser03 li {
			margin-bottom: 7.813%;
			font-size: 3.733vw;
			letter-spacing: -0.02em;
			}
			.service .ser03 li strong {
				margin-bottom: 1.563%;
				font-size: 4.8vw;
				}
	.service .ser04 {
		border: none;
		padding: 0;
		}
		.service .ser04 h3 {
			position: relative;
			top: 0;
			width: 100%;
			margin: 0 auto 4.688%;
			}
		.service .ser04 ul { margin-bottom: 18.75%; }
		.service .ser04 li {
			border-bottom: none;
			margin-bottom: 5.469%;
			padding-left: 1.2em;
			padding-bottom: 0;
			font-size:3.733vw;
			line-height: 1.857;
			}
			.service .ser04 li:before {
				position: absolute;
				top: 0;
				left: 0;
				display: inline-block;
				content: "●";
				}
		.service .ser04 .btn a {
			display: block;
			background-color: #ea5500;
			width: 330px;
			margin: 0 auto;
			padding: 25px 0;
			font-weight: bold;
			color: #fff;
			line-height: 1;
			text-align: center;
			}
}



/* === 予防医療アイコンクリック領域 + ポップアップ 追加 2026-06 === */
.service .prev-img-wrap {
  position: relative;
  display: block;
  line-height: 0;
}
.service .prev-img-wrap > img {
  display: block;
  width: 100%;
  height: auto;
}
.service .prev-btn {
  position: absolute;
  display: block;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  z-index: 2;
  border-radius: 8px;
  transition: background 0.15s ease;
}
.service .prev-btn:hover,
.service .prev-btn:focus {
  background: rgba(233, 119, 38, 0.12);
  outline: none;
}
/* PC version: NEW compacted img 505x75 - all 4 boxes tightly packed (right border preserved) */
.service .prev-btn-vaccine {
  /* 予防接種 box x=113-218 in 505px image */
  left: 22.38%;
  top: 0;
  width: 20.79%;
  height: 100%;
}
.service .prev-btn-filaria {
  /* フィラリア box x=230-360 in 505px image */
  left: 45.54%;
  top: 0;
  width: 25.94%;
  height: 100%;
}
.service .prev-btn-sterilization {
  /* 去勢・避妊 box x=372-501 in 505px image (right border at 500-501) */
  left: 73.66%;
  top: 0;
  width: 25.94%;
  height: 100%;
}
/* SP version: NEW img 640x246 - 2 rows of 2 boxes side by side */
@media screen and (max-width: 750px) {
  .service .prev-btn-vaccine {
    /* 予防接種: row 1 right half, x=332-640, y=0-105 */
    left: 51.88%;
    top: 0;
    width: 48.13%;
    height: 42.68%;
  }
  .service .prev-btn-filaria {
    /* フィラリア: row 2 left, x=0-309, y=123-241 */
    left: 0;
    top: 50%;
    width: 48.40%;
    height: 47.97%;
  }
  .service .prev-btn-sterilization {
    /* 去勢・避妊: row 2 right, x=326-637, y=123-241 */
    left: 50.94%;
    top: 50%;
    width: 49.06%;
    height: 47.97%;
  }
}

/* ポップアップモーダル（iframeを内包） */
.remodal.prev-modal {
  max-width: 860px;
  width: 92%;
  padding: 36px 0 0;
  background: #fff;
}
.prev-modal-iframe {
  width: 100%;
  height: 80vh;
  max-height: 700px;
  border: 0;
  display: block;
}
@media screen and (max-width: 520px) {
  .remodal.prev-modal {
    max-width: 100%;
    width: 100%;
    padding: 36px 0 0;
  }
  .prev-modal-iframe {
    height: 85vh;
    max-height: none;
  }
}