@import url(https://fonts.googleapis.com/icon?family=Material+Icons);

/*****************************************************************

								FAQ

*****************************************************************/
.faq main h2 {
	font-size: 36px;
	color: var(--main_color);
}

.faq main dt,
.faq main dd {
	border: 1px solid #ddd;
}

.faq main dl:not(:first-of-type) dt,
.faq main dd {
	border-top: none;
}

.faq main dt {
	font-weight: normal;
	color: var(--link_color_base);
	cursor: pointer;
}

.faq main dt button {
	width: 100%;
	align-items: center;
}

.faq main dt button:after {
	font-family: "Material Icons";
	content: '\e313';
	font-size: 1.5rem;
	transition: .75s;
}

.faq main .open dt button:after {
	transform: rotate(180deg);
}

.faq main dd {
	font-size: 14px;
	line-height: 2.4;
	background: #f6f9f9;
	border-top: none;
	display: none;
}


.faq .pagination {
	margin-top: 40px;
	display: flex;
	justify-content: center;
	gap: 10px;
}

.faq .page-numbers {
	background: #f5f5f5;
	color: #333;
	padding: 14px 16px;
	font-size: 14px;
	box-sizing: border-box;
	display: block;
}

.faq .page-numbers:hover {
	background-color: #FBFDF7 !important;
	color: #333;
}

.faq .page-numbers.current {
	background-color: #6c893a !important;
	color: #fff;
}



/* モバイル */
@media not screen and (min-width: 1280px) {
	.faq #faq_list {
		margin-top: 40px;
	}

	.faq main dt button,
	.faq main dd {
		font-size: 14px;
		padding: 10px 20px;
	}
}

/* パソコン */
@media print,
screen and (min-width : 1280px) {
	.faq #faq_list {
		margin-top: 100px;
	}

	.faq main dt button,
	.faq main dd {
		padding: 18px 70px 18px 40px;
	}
}

/*****************************************************************

						スタッフ

*****************************************************************/

.staff main .lead {
	margin-bottom: 2em;
	color: var(--main_color);
	font-weight: bold;

	line-height: 1.6;
}

/* モバイル */
@media not screen and (min-width: 1280px) {
	.staff main .lead {
		font-size: 1.25em;
	}
}

/* パソコン */
@media print,
screen and (min-width : 1280px) {
	.staff main .lead {
		font-size: 1.875em;
	}
}


.staff .close_up,
.staff .profile {
	padding: 0 1em 3em;
}

.staff .close_up {
	color: #000;
}

.staff .close_up p {
	line-height: 1.6;
}

.staff .vet_title {
	display: block;

}

.staff .vet_name {
	display: block;
	font-weight: 500;
}

.staff .vet_romaji {
	display: block;
	font-size: 0.75em;
}

.staff .profile p {
	font-size: 0.938em;
}


/* ご挨拶 */
.staff #greeting h2 {
	color: inherit;
	font-size: 1.563em;
	font-weight: bold;

}

.staff #greeting ul li {
	text-align: center;
	border: 1px solid var(--border_color);
}

.staff #greeting ul li a {
	display: block;
	padding: 1em;
}

/* モバイル */
@media not screen and (min-width: 1280px) {
	.staff #greeting ul li {
		width: 49%;
	}

	.staff #greeting ul li:not(:last-child) {
		margin-block-end: 1em;
	}

	.staff .vet_name {
		font-size: 1.275em;
	}

}

/* パソコン */
@media print,
screen and (min-width : 1280px) {
	.staff #greeting ul li {
		width: 30%;
	}

	.staff #greeting ul li:not(:last-child) {
		margin-block-end: 3em;
	}

	.staff .vet_name {
		font-size: 1.375em;
	}

}

/* スライダー */


.staff .slider-thumbnail .swiper-slide {
	opacity: .5;
	transition: opacity .5s;

	overflow: hidden;
	aspect-ratio: 1/1;
}

.staff .slider-thumbnail .swiper-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}


.staff .slider-thumbnail .swiper-slide.swiper-slide-thumb-active {
	position: relative;
	opacity: 1;

}

.staff .slider-thumbnail .swiper-slide.swiper-slide-thumb-active::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 1/1;
	box-shadow: inset 0 0 0 7px rgba(0, 0, 0, 0.5);
}

/* モバイル */
@media not screen and (min-width: 1280px) {
	.staff .swiper.slider {
		margin: 3em 0 1em;
	}
}

/* パソコン */
@media print,
screen and (min-width : 1280px) {
	.staff .swiper {
		max-width: 1180px;

	}

	.staff .swiper.slider {
		margin-block-start: 5em;
		margin-block-end: 1em;
	}
}



/*****************************************************************

					獣医師勤務表calendar

*****************************************************************/

.calendar main #information .details {
	margin: 2em 0;
	font-weight: bold;
}

/* モバイル */
@media not screen and (min-width: 1280px) {
	.calendar .calendar main #information .details {
		line-height: 1.6;
	}
}

/* パソコン */
@media print,
screen and (min-width : 1280px) {
	.calendar main #information .details {
		margin: 2em 0;
		font-size: 1.5em;
		font-weight: bold;
	}
}



.calendar main ul {
	margin-inline-start: 1em;
}

.calendar main ul li {
	margin-block: 1em;
	line-height: 2;
	list-style-type: circle;
}


.calendar .box {
	margin-block-end: 3em;
}

.calendar #closing_information h3 {
	padding-bottom: 0.5em;
	font-size: 1.25em;
	font-weight: bold;
	border-bottom: 1px solid #dddddd;
}


.calendar #closing_information table {
	width: 100%;
	margin: 1em 0;
}

.calendar #closing_information table th,
.calendar #closing_information table td {
	padding: 8px 16px;
}

.calendar #closing_information table th {
	color: #fff;
	text-align: center;
	vertical-align: middle;
}

/* お知らせ */
.calendar #closing_information th {
	background-color: var(--main_color);
}

/* 勤務表 */
.schedule>p {
	font-size: 1.25rem;
	font-weight: bold;
	color: #1a7f3b;
}

.schedule table {
	border-radius: 10px;
	border: solid #1a7f3b 5px;
	border-collapse: separate;
	width: 100%;
}

.schedule tr:nth-of-type(odd) .name {
	background-color: #1a7f3b;
}

.schedule th {
	background-color: #7ebf3b;
	font-size: 1.25rem;
	color: #fff;
}

.schedule td {
	color: #1a7f3b;
}

.schedule th,
.schedule td {
	text-align: center;
	padding: .5rem;
	font-weight: bold;
	vertical-align: middle;
	font-size: 2rem;
}

.schedule .day {
	background-color: #62b62f;
}

.schedule .day:not(:last-of-type) {
	border-right: solid #1a7f3b 5px;
}

.schedule th.am {
	background-color: #1a7f3b;
}

.schedule th.pm {
	background-color: #edd043;
}

.schedule th.pm:not(:last-of-type),
.schedule td.pm:not(:last-of-type) {
	border-right: solid #1a7f3b 5px;
}

.schedule td.am {
	background-color: #e1ecb5;
}

.schedule td.pm {
	background-color: #c1db7d;
}

.schedule tr:nth-of-type(even) td.am {
	background-color: #f5f8e1;
}

.schedule tr:nth-of-type(even) td.pm {
	background-color: #d3e6aa;
}

.schedule td.closed {
	background-color: #aeaeae;
	border-right: solid #1a7f3b 5px;
}

.schedule td.closed p {
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	display: inline-block;
	color: #000;
	letter-spacing: 3px;
	white-space: pre;
}

/* モバイル */
@media not screen and (min-width: 1280px) {
	.schedule {
		overflow: scroll;
	}

	.schedule table {
		/* width: auto; */
		/* margin: auto; */
		table-layout: fixed;
		border: solid #1a7f3b 2px;
	}

	.schedule th,
	.schedule td {
		font-size: clamp(0.625rem, 0.296rem + 1.51vw, 1.5rem);
		padding: clamp(0.063rem, -0.326rem + 1.66vw, 1rem)
	}

	/* .schedule th img {
		width: 80%;
	} */
	.schedule td.pm:not(:last-of-type),
	.schedule .day:not(:last-of-type),
	.schedule td.closed {
		border-right: solid #1a7f3b 1px;
	}

	.schedule td.closed {
		width: 100%;
	}

	.calendar #closing_information table th {
		width: 35%;
		font-size: clamp(0.75rem, 0.609rem + 0.65vw, 1.125rem);
	}

	.schedule td span {
		font-size: 10px;
		display: block;
	}
}

/* パソコン */
@media print,
screen and (min-width : 1280px) {
	.schedule td span {
		font-size: 1rem;
		line-height: 1.1rem;
		display: block;
	}

	.calendar #closing_information table th {
		width: 18%;
	}
}


/*****************************************************************

					アクセス

*****************************************************************/
.access main ul,
.access main ol {
	margin-inline-start: 2em;
}

.access main ul {
	list-style-type: disc;
}

.access main ul li,
.access main ol li {
	margin-block: 1em;
	line-height: 2;
}

/* モバイル */
@media not screen and (min-width: 1280px) {
	.access .about p {
		font-size: 1.25rem;
	}
}

/* パソコン */
@media print,
screen and (min-width : 1280px) {
	.access .about p {
		font-size: 1.5rem;
	}
}

/*****************************************************************

			プライバシーポリシー・勧誘方針

*****************************************************************/

.privacypolicy main h2,
.solicitationpolicy main h2 {
	background-color: #e5fcfc;
	padding: 15px 0px 15px 30px;
	color: #76cccb;
	font-size: 25px;
	text-align: left;
}

.privacypolicy .border,
.solicitationpolicy .border {
	margin-bottom: 30px;
	border: 1px solid #dddddd;
	padding: 30px;
}

.privacypolicy main p,
.solicitationpolicy main p {
	margin: 0 0 2em 0;
}

/* モバイル */
@media not screen and (min-width: 1280px) {}

/* パソコン */
@media print,
screen and (min-width : 1280px) {}

/*****************************************************************

			404

*****************************************************************/
.error404 #page_title {
	font-size: 1.5em;
	font-weight: bold;
	padding: 3rem;
}

.error404 .return {
	display: block;
	margin: 3rem auto;
	width: -webkit-fit-content;
	width: -moz-fit-content;
	width: fit-content;
}

.error404 .return:hover {
	color: #fff;
}