@charset "utf-8";


/* ---------------------------------------------------------------------------------------------

    ベースグループ
    
    そのサイトの基本設定
    ページによって変更のないもの・どのページでも使用するもの、できるもの

    セレクタの設定

--------------------------------------------------------------------------------------------- */

:root {
	--main_color: #6c893a;
	--footer_heading_color: #6C893A;
	/* フッターの見出しに使われている色 */
	--footer_heading_exception_color: #B24E4E;
	/* フッターの見出しの例外の色 */

	--footer_top_color: #FBFDF7;
	--footer_group_color: #6C893A;
	/* 病院一覧の背景色 */
	--footer_bottom_color: #8DB24E;
	/* フッターの色 */
	--footer_address_color: #6c893a;
	/* コピーライトの色 */

	--gotoTop: rgba(0, 0, 0, 0.2);
	/* ページのトップへ戻るの色 */

	--link_color_base: #6c893a;

	--text_color_base: #666666;

	--border_color: #738745;

	--background_color_base: #fff;

}


html {
	scroll-behavior: smooth;
}


body {
	margin: 0 auto;
	padding: 0;
	color: var(--text_color_base);
	height: 100%;
	font-family: "Segoe UI", Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	background: var(--background_color_base);
}



/* ----------------------------------------------

 * imgタグの設定

---------------------------------------------- */

img {
	max-width: 100%;
	height: auto;

	vertical-align: bottom;
	border: none;
	/* -webkit-transition: 0.5s;
    transition: 0.5s; */
	text-decoration: none;

}



/* ----------------------------------------------

 * aタグの設定

---------------------------------------------- */
a {
	color: var(--link_color_base);
	/* -webkit-transition: 0.5s;
 	transition: 0.5s; */
}

a:hover {
	color: var(--link_color_base);
}

/* ----------------------------------------------

 * hrタグの設定

---------------------------------------------- */

hr {
	color: #ddd;
}


/* ----------------------------------------------

 * pタグの設定

---------------------------------------------- */
main p {
	line-height: 2.4;
}

/* ----------------------------------------------

 * 明朝体

---------------------------------------------- */
.min {
	font-family: "Times New Roman", "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}

/* ----------------------------------------------

 * 背景色

---------------------------------------------- */

/* 黄色 */
.bg_yellow {
	background-color: #fffdf4;
}

/* 水色 */
.bg_skyblue {
	background-color: #f4fdff;
}

/* ベージュ */
.bg_beige {
	background-color: #fff8f4;
}

/* 黄緑 */
.bg_rightgreen {
	background-color: #f2fcf2;
}

/* ----------------------------------------------

 * header

---------------------------------------------- */



/* モバイル */
@media not screen and (min-width: 1280px) {
	header {
		align-items: center;

		width: 90%;
		margin: 0 auto;
		padding: 1em 0;
	}


	header #logo {
		width: 200px;
	}

	header #logo img {
		width: 200px;
	}

	header .main_nav {
		display: none;
	}

	header #global_menu {
		display: flex;
		justify-content: flex-end;

		width: calc(100% - 200px);
	}
}

/* パソコン */
@media print,
screen and (min-width : 1280px) {
	header {
		width: 93%;
		min-width: 1180px;
		margin: 0 auto;
		padding: 2em 0 1em;
	}

	header .main_nav {
		width: 100%;
	}

	header #logo img {
		width: 320px;
	}
}


/* ----------------------------------------------

 * グローバルナビゲーション

 ---------------------------------------------- */

header .main_nav ul {
	display: grid;
	grid-template-columns: repeat(8, 1fr) 2.5fr;
	justify-content: center;
	align-items: center;
}

header .main_nav ul li {
	text-align: center;
}

/* ----------------------------------------------

 * アイキャッチ

---------------------------------------------- */
#eyeCatch {
	width: 100%;
	height: 360px;

	text-align: center;

	background-size: cover;
	background-position: center;
}

#eyeCatch>div {
	position: relative;
	top: 50%;
	display: inline-block;

	min-width: 200px;
	height: 200px;
	padding: 1rem;

	background-color: #fff;

	transform: translateY(-50%);
}

#eyeCatch h1 {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	width: 100%;
	height: 100%;

}

#eyeCatch h1 .ja {
	margin-block-end: 0.25em;
	color: var(--main_color);
	font-size: 1.75em;
	font-weight: bold;
}

#eyeCatch h1 .en {
	text-transform: uppercase;
}

@media not screen and (min-width: 500px) {
	#eyeCatch {
		height: 200px;
	}
}

/* ----------------------------------------------

 * パンくずリスト

---------------------------------------------- */
#breadcrumbs {
	background-color: var(--main_color);
}

#breadcrumbs ul {
	display: flex;
	align-items: center;
	gap: 1em;

	width: 100%;
	padding: 16px 0;

	color: #fff;
}

#breadcrumbs ul li:first-child {
	display: flex;
	align-items: center;
}

#breadcrumbs ul li:first-child img {
	width: 16px;
}

#breadcrumbs ul li:not(:last-child)::after {
	content: ">";

	margin-inline-start: 1em;
}

#breadcrumbs a {
	color: #fff;
}

#breadcrumbs a:hover,
#breadcrumbs a:focus {
	color: #96dbde;
}

/* モバイル */
@media not screen and (min-width: 1280px) {
	#breadcrumbs li:last-child {
		width: 50%;
	}

	#breadcrumbs a,
	#breadcrumbs li {
		font-size: 13px;
	}
}

/* ----------------------------------------------

 * 下階層

---------------------------------------------- */

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

	body.page main,
	body.single main,
	body.archive main {
		padding: 2.5em 0;
	}
}

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

	body.page main,
	body.single main,
	body.archive main {
		padding: 5em 0;
	}
}


main h2.bg_color {
	margin-bottom: 1em;
	padding: 15px 30px;
	color: #fff;
	font-size: 1.563em;
	font-weight: bold;
	background-color: var(--footer_group_color);
}



/* ボーダー入りボックス */
main .border_box {
	margin-block-start: 4em;
	margin-block-end: 4em;
	border: solid var(--border_color);
	border-width: 0 0 0 1px;
}

main .border_box.border_all {
	border-width: 0 1px 1px 1px;
}

main .border_box h2 {
	padding: 30px 15px;
	color: #fff;

	font-weight: bold;

	text-align: center;

	background-color: var(--border_color);
}

main .border_box h3 {
	margin-bottom: 1em;
}

main .border_box h3 a {
	text-decoration: underline;
}

/* ボックスの中にも線がある場合 */
main .border_box .border_box_child {
	width: 100%;
	border: solid var(--border_color);
	border-width: 0 1px 1px 0;
}

main .border_box .border_box_child:nth-child(even) {
	border-right: 1px solid var(--border_color);
}

/* 4辺に線のあるbox */
.square_box {

	border: 1px solid var(--border_color);
}


main .border_box .border_box_child h3 {
	color: var(--border_color);
}

main .border_box .cell_merging.border_box_child {
	border: solid var(--border_color);
	border-width: 0 1px 1px 0;
}

main .border_box .cell_merging.border_box_child:first-child {
	border-width: 0 1px 1px 0;
}

main .border_box .cell_merging.border_box_child:last-child {
	border-width: 0 1px 1px 0;
}


/* タイトルが背景色付き */
main .border_box.title_bg_true h2 {
	padding: 15px 30px;
	color: #fff;
	text-align: left;
	background-color: var(--border_color);
}

main .border_box.title_bg_true h2 .note {
	font-size: 1rem;
	font-weight: normal;
}


/* モバイル */
@media not screen and (min-width: 1280px) {
	main .border_box .container {
		padding: 1em;
	}

	main .border_box h2 {
		font-size: 1.5em;
	}

	main .border_box h3 {
		font-size: 1.25em;
	}

	main .border_box .border_box_child .images {
		text-align: center;
	}

	main .border_box .border_box_child .images.mod_order1 {
		margin-bottom: 1em;
	}
}

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

	main .border_box h2 {
		font-size: 1.875em;
	}

	main .border_box .container {
		padding: 2em;
	}


	main .border_box h3 {
		font-size: 1.5em;
	}

	main .border_box .border_box_child .text {
		width: 60%;
	}



}


/* 注意点 */
div.attention {
	padding: 2em;
	border: 1px solid var(--border_color);
	background-color: #f2f8e9;
}

div.attention h3 {
	color: #b85252;
}

div.attention ul {
	margin-block-start: 1em;
	margin-inline-start: 1em;
	list-style-type: disc;
}

div.attention ul li:not(:last-child) {
	margin-block-end: 1em;
}

/* ----------------------------------------------

 * footer

---------------------------------------------- */
#ly_footer_top {
	padding-block: 2em;
	background-color: var(--footer_top_color);
}

#ly_footer_top h2 {
	margin-bottom: 0.625em;
	padding: 10px 0;
	color: var(--footer_heading_color);
	font-size: 1.125rem;
	font-weight: 700;
	border-bottom: 2px solid var(--footer_heading_color);
}

#ly_footer_top h2.exception {
	color: var(--footer_heading_exception_color);
	border-bottom: 2px solid var(--footer_heading_exception_color);
}

#ly_footer_top p {
	margin-bottom: 1em;
	line-height: 1.6;
}




#ly_footer_top .address dl dt,
#ly_footer_top .address dl dd {
	margin-block-end: 1em;
	line-height: 1.6;
}

/* タグイメージ */

.options {
	margin-inline-start: 0 !important;
}

.options li {
	color: #fff;
	border-radius: 100vh 0 0 100vh;
	background: var(--main_color);
	position: relative;
}

.options li:before {
	content: '';
	border-radius: 50%;
	background: #fff;
	position: absolute;
	left: 15px;
	top: 50%;
	transform: translateY(-50%);
}

@media not screen and (min-width: 1280px) {
	.options {
		flex-wrap: wrap;
		column-gap: 1rem;
		row-gap: 1.5rem;
	}

	.options li {
		padding: 1rem .4rem 1rem 2rem;
	}

	.options li:before {
		width: 10px;
		height: 10px;
	}

	#ly_footer_top .address dl dt {
		width: 33%;
		padding-inline-end: 1em;
	}

	#ly_footer_top .address dl dd {
		width: 67%;
	}
}

@media screen and (min-width:1280px) {
	#ly_footer_top .address img {
		width: 55%;
	}

	#ly_footer_top .address dl dt {
		width: 15%;
	}

	#ly_footer_top .address dl dd {
		width: 85%;
	}

	.options {
		column-gap: 3rem;
	}

	.options li {
		padding: 1rem 2rem 1rem 4rem;
	}

	.options li:before {
		width: 15px;
		height: 15px;
	}

	/* #ly_footer_top .options {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 1em;
        row-gap: 1em;
    } */
}

/* 診療時間 */
#ly_footer_top #footer_schedule_table {
	width: 100%;
	border: 1px solid #ccc;
}

#ly_footer_top #footer_schedule_table th,
#ly_footer_top #footer_schedule_table td {
	padding: 20px 8px;
	border: 1px solid #ccc;
}


#ly_footer_top #footer_schedule_table thead th {
	font-weight: normal;
	text-align: center;
	background-color: #fafafa;
}

#ly_footer_top #footer_schedule_table tbody th {
	font-weight: normal;
	text-align: center;
	background-color: #eff5f6;

}

#ly_footer_top #footer_schedule_table tbody td {
	text-align: center;
	vertical-align: middle;
}


#ly_footer_top ul.mod_note {
	list-style-type: disc;
	margin-inline-start: 1em;
}

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

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


	#ly_footer_top #footer_schedule_table tbody th {
		width: 25%;
		white-space: nowrap;
	}


	#ly_footer_top ul {
		margin-inline-start: 1em;
	}
}


/* 理念 */
#ly_footer_middle {
	display: grid;
	row-gap: 2em;

	padding-block: 2em;
}

#ly_footer_middle {
	color: var(--footer_heading_color);
	line-height: 1.6;
}

#ly_footer_middle .lead {
	margin-block-end: 1em;

	font-size: 1.75em;
	font-weight: bold;
}



/* 病院一覧 */
#ly_footer_group {
	color: var(--footer_address_color);
}


#ly_footer_group .group_lists h2 {
	margin-block-end: 1em;
	padding-block-end: 1em;
	font-size: 1.313em;
	font-weight: bold;
	text-align: center;
	border-bottom: 2px solid var(--footer_address_color);
}

#ly_footer_group .group_lists h2 span {
	display: inline-block;
	margin-block-start: 0.5em;
	padding: 0.2em 0.5em;
	color: #fff;
	font-size: 0.75em;
	font-weight: normal;
	background-color: var(--footer_address_color);
}



#ly_footer_group .group_lists dl {
	display: grid;
	grid-template-columns: 1fr 3fr;
	column-gap: 1em;
	row-gap: 1em;

	margin-bottom: 1em;
}

#ly_footer_group .group_lists dl dt,
#ly_footer_group .group_lists dl dd {
	line-height: 1.4;
}

/* リンク */
#ly_footer_group .group_lists .mod_r-corners {
	display: block;
	color: #fff;
}

/* 電話 */
#ly_footer_group .group_lists .tel {
	display: grid;

	margin: 1em 0;
	padding: 0.5em 0;

	text-align: center;

	border-top: 2px solid var(--footer_address_color);
	border-bottom: 2px solid var(--footer_address_color);
}

#ly_footer_group .group_lists .tel p {
	align-self: center;
}

#ly_footer_group .group_lists .tel span {
	font-size: 1.563em;
}


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

	/* 病院一覧 */
	#ly_footer_group {
		padding: 60px 0 60px;
	}

	#ly_footer_group .group_lists {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		/* grid-template-rows: repeat(4, 1fr); */

		column-gap: 1em;
	}


	#ly_footer_group .group_lists .tel span {
		font-size: 1.563em;
	}

	/* 奈良 */
	/* #h_01_name {
        grid-area: 1 / 1 / 2 / 2;
    }

    #h_01_address {
        grid-area: 2 / 1 / 3 / 2;
    }

    #h_01_link {
        grid-area: 3 / 1 / 4 / 2;
    }

    #h_01_tel {
        grid-area: 4 / 1 / 5 / 2;
    } */

	/* 吉田 */
	/* #h_02_name {
        grid-area: 1 / 2 / 2 / 3;
    }

    #h_02_address {
        grid-area: 2 / 2 / 3 / 3;
    }

    #h_02_link {
        grid-area: 3 / 2 / 4 / 3;
    }

    #h_02_tel {
        grid-area: 4 / 2 / 5 / 3; 
    }*/

	/* けいはんな */
	/* #h_03_name {
        grid-area: 1 / 3 / 2 / 4;
    }

    #h_03_address {
        grid-area: 2 / 3 / 3 / 4;
    }

    #h_03_link {
        grid-area: 3 / 3 / 4 / 4;
    }

    #h_03_tel {
        grid-area: 4 / 3 / 5 / 4;
    }*/

	/* ACE */
	/* #h_04_name {
        grid-area: 1 / 4 / 2 / 5;
    }

    #h_04_address {
        grid-area: 2 / 4 / 3 / 5;
    }

    #h_04_link {
        grid-area: 3 / 4 / 4 / 5;
    }

    #h_04_tel {
        grid-area: 4 / 4 / 5 / 5;
    } */

}


/* フッター */
#ly_footer_bottom {
	padding: 30px 0;
	color: #ffffff;
	background-color: var(--footer_bottom_color);
}

#ly_footer_bottom a {
	color: #fff;
}

#ly_footer_bottom .grid {
	font-size: 1.1em;
}

#ly_footer_bottom h2 {
	margin-bottom: 1em;
	padding-bottom: 1em;

	border-bottom: 1px solid #fff;
}

/* 動物取扱業登録証 */
#ly_footer_bottom .grid dl {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 1em;
	row-gap: 1em;

	margin-bottom: 1em;
}

#ly_footer_bottom dl dt {
	font-weight: normal;
}

/* サイトマップ */
#sitemap_lists {
	display: grid;
	grid-template-columns: repeat(2, 1fr);

	row-gap: 1em;
}


/* 外部リンク */
#ly_footer_bottom .external_link li {
	margin-bottom: 1em;
}

/* フッター */
#ly_footer_bottom .grid {
	display: grid;
	gap: 2.5em;
}

#ly_footer_copyright small {
	display: block;
	padding: 23px 0;
}


/* コピーライト */
#ly_footer_copyright {
	color: #fff;
	text-align: center;
	background-color: var(--footer_address_color);
}

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

	/* フッター */
	#ly_footer_bottom .grid {
		display: grid;
		gap: 2.5em;
	}

	#ly_footer_middle img {
		width: 100%;
	}

	#ly_footer_group {
		margin-top: 3rem;
	}

	/* #ly_footer_group .group_lists h2 {
		margin-top: 3rem;
	} */
	#ly_footer_copyright small {
		display: block;
		padding: 23px 0;
	}

}

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

	/* フッター3段目 */
	#ly_footer_bottom .grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		column-gap: 3em;
	}

	#ly_footer_middle img {
		width: 70%;
		margin-inline: auto;
	}

	#ly_footer_copyright small {
		display: block;
		padding: 23px 0;
		font-size: 0.813rem;
		letter-spacing: 0.15em;
	}
}




/* ボタン */
main .btn {
	display: inline-block;
	color: #000;
	border-radius: 50rem;
	background-color: #f79a62;

}

main .btn a {
	display: block;
	color: #fff;
	text-align: center;
	transition: 0.2s ease-in;
}

main .btn:hover {
	box-shadow: inset 0px 0px 16px 8px rgba(255, 255, 255, 0.5);
	transition: 0.2s ease-in;
}

main .btn:active {
	transform: translateY(8px);
	box-shadow: inset 0px 3px 8px 2px rgba(90, 17, 4, 0.2);
}


/* ページのトップへ */
#gotoTop a {
	position: fixed;
	bottom: 0;
	right: 0;
	z-index: 9000;

	width: 60px;
	height: 60px;

	/* text-align: center;
    line-height: 34px; */
	display: grid;
	place-items: center;

	background-color: rgba(0, 0, 0, 0.2);

	transition: 0.1s ease-in;
}

#gotoTop a:hover,
#gotoTop a:active {
	background-color: var(--main_color);
	transition: 0.1s ease-in;
}

.grecaptcha-badge {
	bottom: 80px !important;
}

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

	main .btn a {
		padding: .75rem 1.5rem;
	}
}

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

	main .btn a {
		padding: 30px;
	}
}

/* ---------------------------------------------------------------------------------------------

 * 診療各ページ

--------------------------------------------------------------------------------------------- */

#medical p {
	line-height: 1.6;
}

#medical li:not(:last-child) {
	margin-bottom: 0.5em;
}



#medical .vet_title,
#medical .vet_name {
	display: block;
	font-weight: bold;
	line-height: 1.5;
}

#medical .vet_title {
	font-size: 1em;
	font-weight: bold;
}

#medical .vet_name {
	font-size: 1.5em;
}

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

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


/* ---------------------------------------------------------------------------------------------

 * Responsive Web Design Media Queries

--------------------------------------------------------------------------------------------- */
/* モバイル＞タブレット＞パソコン */


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

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

.card {
	display: grid;
	border-radius: 8px;
	padding: 20px;
}

/* モバイル */
@media not screen and (min-width: 1280px) {
	.card {
		box-shadow: 0 4px 8px rgba(108, 137, 58, 0.6);
	}

	.group_lists {
		display: flex;
		flex-direction: column;
		gap: 3rem;
	}

	.card:last-of-type {
		margin-bottom: 3rem;
	}
}

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

	.card_address {
		height: 145px;
	}

	.card_tel {
		height: 115px;
	}
}