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

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

						オンライン相談

*****************************************************************/
/* オンライン診断とは​​ */
#introduction p {
	margin-bottom: 1rem;
}


/* オンライン診断のメリット​ */
#benefit {
	counter-reset: number 0;
}

#benefit .contents {
	justify-content: space-around;
}

#benefit h3 {
	font-size: 1.5rem;
	display: grid;
	grid-template-columns: 1.5em auto;
	align-items: flex-end;
	gap: 4rem;
	font-weight: bold;
}

#benefit h3:before {
	counter-increment: number 1;
	content: counter(number, decimal-leading-zero) ". ";
	font-size: 4rem;
	line-height: 0.95;
	color: var(--main_color);
	letter-spacing: 2px;
	font-weight: normal;
}

#benefit .text div {
	line-height: 2.4;
}

#benefit a {
	text-decoration: underline;
}

/* オンライン診断の費用感​ */
#cost h3 {
	margin-bottom: 2rem;
}

#cost td,
#cost th {
	padding: 1.5rem;
	font-size: 18px;
	/* width: calc(100% / 3); */
	border: solid 1px #e9e9e9;
}

/* theadのth（空以外） */
#cost thead th:not(:empty) {
    color: #fff;
    text-align: center;
    background-color: #B5D5D4;
}
/* tbodyのth */
#cost tbody th {
    color: var(--main_color);
    
    background-color: #fffdfd;
}

#cost td span {
	display: block;
	margin-top: 1rem;
}


/* 診療可能日と時間​ */
#time p {
	font-size: 1.5rem;
	margin-left: 30px;
}


/* 登録方法​​ */
#how-to .flow {
	padding: 15px 30px;
	background-color: #FFFDF4;
}

#how-to .number {
	gap: 2rem;
	width: 400px;
}

#how-to h3 {
	font-size: 1.5rem;
}

#how-to .number p {
	width: 113px;
	height: 113px;
	background-color: #76cccb;
	border-radius: 50%;
	display: grid;
	place-content: center;
	line-height: 1.5;
	color: #fff;
	font-size: 1.5rem;
	font-weight: bold;
}

#how-to a {
	text-decoration: underline;
}

#how-to .text {
	line-height: 2.6;
}

#how-to .triangle {
	width: 0;
	height: 0;
	border-style: solid;
	border-right: 63px solid transparent;
	border-left: 63px solid transparent;
	border-top: 75px solid #fffdf4;
	border-bottom: 0;
	margin-left: 15px;
}



/* 注意事項​ */
#notes ul {
	color: #ff7b2c;
	line-height: 2.4;
}

/* モバイル */
@media not screen and (min-width: 1280px) {
	.online-consultation h2 {
		margin-bottom: 36px !important;
		font-size: 1.25rem !important;
		padding: 15px !important;
	}

	#introduction,
	#benefit,
	#cost,
	#time,
	#how-to {
		margin-bottom: 60px;
	}

	#benefit .mod_order2 {
		order: 1;
	}

	#benefit h3 {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	#benefit .text,
	#benefit h3 {
		margin-bottom: 36px;
	}

	#benefit .contents {
		margin-bottom: 6rem;
	}

    /* オンライン診療にかかる費用​ */
	#cost th,
	#cost td {
		display: block;
		width: 100%;
		font-size: 1rem;
	}

	#cost th {
		grid-area: th;
		text-align: center;
		background-color: var(--main_color);
		color: #fff;
	}

	#cost tr:not(:last-of-type) {
		display: grid;
		grid-template-columns: 200px 1fr;
		grid-template-rows: min-content 1fr 1fr;
		grid-template-areas: "th th"
			"online_title online_text"
			"hospital_title hospital_text";
	}

    /* オンライン */
	#cost td.online_title {
		grid-area: online_title;
        color: #fff;
        background-color: var(--main_color);
	}

	#cost td.online_text {
		grid-area: online_text;
	}

    /* 来院​ */
	#cost td.hospital_title {
		grid-area: hospital_title;
        color: #fff;
        background-color: var(--main_color);
	}

	#cost td.hospital_text {
		grid-area: hospital_text;
	}

	#how-to .flow,
	#how-to .number {
		flex-direction: column;
	}

	#how-to .number {
		width: 100%;
	}

	#how-to h3 {
		margin-bottom: 1rem;
	}

	#how-to .number p,
	#how-to .triangle {
		margin-inline: auto;
	}

	#how-to .flow:last-of-type {
		margin-bottom: 48px;
	}
}

@media not screen and (min-width: 500px) {
	#cost tr:not(:last-of-type) {
		grid-template-columns: 110px 1fr;
	}

	#cost th,
	#cost td {
		padding: 0.5rem;
	}

	#cost td span {
		font-size: 75%;
	}
}

/* パソコン */
@media print,
screen and (min-width : 1280px) {
	.online-consultation h2 {
		margin-bottom: 76px !important;
	}

	#introduction,
	#benefit,
	#cost,
	#time,
	#how-to {
		margin-bottom: 120px;
	}

	#introduction {
		gap: 78px;
	}

	#introduction .mod_order1 {
		width: 710px;
	}

	#introduction .mod_order2 {
		width: 615px;
	}

	/* オンライン診断のメリット​ */
	#benefit h3 {
		margin-bottom: 2rem;
	}

	#benefit .contents {
		margin-bottom: 65px;
	}

	#benefit .text {
		padding-top: 65px;
		width: 600px;
	}

	/* オンライン診断にかかる費用​ */
	#cost h3 {
		font-size: 1.5rem;
	}

	#cost table {
		/* width: calc(100% - 60px); */
		margin-inline: auto;
	}

    #cost tbody th {
        width: 20%;
    }

	/* 登録方法​​ */
	#how-to .flow {
		gap: 176px;
	}

	#how-to .flow:last-of-type {
		margin-bottom: 91px;
	}

	#how-to .help {
		font-size: 1.5rem;
	}

	/* 注意事項​ */
	#notes ul {
		font-size: 1.5rem;
		margin-left: 30px;
	}
}

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

								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;
	gap: 10px;
}

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

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

.faq .page-numbers:hover {
	background-color: #6698a1 !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 #information .details {
	margin: 2em 0;
	font-weight: bold;
}

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

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


.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: 2;
}

.staff .vet_title {
	display: block;

}

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

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

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


/* 看護師・スタッフ */
.staff #staff .box {
	border: 1px solid #dddddd;
}

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

.staff #staff h2 {
	padding: 1em;
	color: var(--footer_group_color);
	font-size: 1.875em;
	font-weight: bold;
	text-align: center;
}




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

					獣医師勤務表calendar

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

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

.schedule table {
	border-collapse: separate;
	border-spacing: 0;
	border: solid 5px #00b5bc;
	border-radius: 20px;
	width: 100%;
}

.schedule table th {
	background-color: #94c5c9;
	color: #fff;
}

.schedule table td:not(:last-of-type) {
	border-right: solid 3px #00b5bc;
}

.schedule table tr:not(:last-of-type) td {
	border-bottom: solid 3px #00b5bc;
}

.schedule table th:not(:first-of-type):not(:last-of-type) {
	border-right: solid 3px #fff;
}

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

.schedule table tr:first-of-type th:first-of-type {
	border-radius: 10px 0 0 0;
}

.schedule table th.day,
.schedule table th.kind:not(.notcolor) {
	background-color: #00b5bc
}

.schedule table .am .time {
	background-color: #fc4177;
}

.schedule table .pm .time {
	background-color: #4986a7;
}

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

.schedule table td.off {
	background-color: #e8e8e8;
}

.calendar .schedule .date,
.calendar .schedule .comment {
	font-weight: bold;
	color: #00b8be;
	line-height: 1.5;
}

.calendar .schedule .comment {
	text-align: right;
}

.outpatient>p {
	color: #00b8be;
	font-weight: bold;
	padding-left: 1rem;
	position: relative;
	line-height: 1.5;
}

.outpatient>p:before {
	content: '';
	width: 10px;
	height: 100%;
	background-color: #00b8be;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	border-radius: 5px;
}

.outpatient th {
	background-color: #00b8be;
	color: #fff;
}

.outpatient td {
	background-color: #ededed;
}

.outpatient th,
.outpatient td {
	padding: 1rem;
	font-size: 1.5rem;
	font-weight: bold;
	border: solid #fff 10px;
	vertical-align: middle;
}

.outpatient td .mod_fx {
	gap: 1rem;
}

.outpatient td .mod_fx p {
	line-height: 1.5;
}

.outpatient th:first-of-type {
	border-left: none;
}

.outpatient td:last-of-type {
	border-right: none;
}

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

	/* .scroll {
		overflow: scroll;
	}

	.schedule table,
	.outpatient table {
		width: 1280px;
	} */

	.calendar .schedule .date,
	.outpatient>p {
		font-size: 1.25rem;
	}

	.calendar .schedule .comment {
		font-size: .8rem;
	}
}

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

	.schedule table td {
		width: 175px;
	}

	.calendar .schedule .comment {
		font-size: 1.5rem;
	}

	.outpatient table {
		width: 100%;
	}

	.calendar .schedule .date,
	.outpatient>p {
		font-size: 2rem;
	}

	.outpatient th {
		width: 200px;
	}
}

@media screen and (max-width: 1280px) {}

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

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


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

.calendar #closing_information h3 {
	color: #1e73be;
	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 #surgery th {
	background-color: #3a71e8;
}

/* 循環器科 */
.calendar #cardiology th {
	background-color: #ed6a3b;
}

/* 総合診療科 */
.calendar #general_medical_department th {
	background-color: #fccf19;
}


/* モバイル */
@media not screen and (min-width: 1280px) {
	.calendar #closing_information table th {
		width: 30%;
	}

	.scroll {
		overflow-x: scroll;
	}

	.outpatient th,
	.outpatient td {
		display: block;
		border: none;
	}
}

/* パソコン */
@media print,
screen and (min-width : 1280px) {
	.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 print,
screen and (min-width : 1280px) {
	.about p {
		font-size: 1.5rem;
	}
}


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

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

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

.privacypolicy main h2,
.solicitationpolicy main h2 {
	background-color: #e5fcfc;
	color: #76cccb;
	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) {

	.privacypolicy main h2,
	.solicitationpolicy main h2 {
		padding: 15px 1rem;
		font-size: 18px;
	}

	.privacypolicy .border,
	.solicitationpolicy .border {
		padding: 30px 1rem;
		text-align: justify;
	}

}

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

	.privacypolicy main h2,
	.solicitationpolicy main h2 {
		padding: 15px 0px 15px 30px;
		font-size: 25px;
	}
}


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

			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;
}