/* clinic-list
-------------------- */
.clinic-list{
	margin-top: 40px;
	max-width: 980px;
	margin-inline: auto;
}

.clinic-list ul{
	list-style: none;
}

/* list-area */
.list-area{
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}

.list-area > .accordion{
	padding: 14px 12px 0;
	border-radius: 8px;
	background-color: var(--color-white);
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.12);
}
.list-area > .accordion > .btn{
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-rows: 1fr;
	gap: 5px;
	align-items: center;
	justify-items: stretch;
	padding-bottom: 14px;
	color: var(--color-black);
	font-size: var(--fz-20);
	font-weight: 500;
	cursor: pointer;
}
.list-area > .accordion > .btn:before{
	content: '';
	display: inline-block;
	width: 24px;
	height: 24px;
	background: url('../images/ico-map.svg') no-repeat center;
	background-size: 14px 20px;
}
.list-area > .accordion > .btn:after{
	content: '';
	display: inline-block;
	width: 24px;
	height: 24px;
	background: url('../images/ico-link-arrow.svg') no-repeat center;
	background-size: 9px 15px;
	filter: grayscale(100%) brightness(42%) contrast(95%);
	rotate: 90deg;
}
.list-area > .accordion.open > .btn:after{
	rotate: -90deg;
}

#page.area .clinic-list{
	margin-top: 0;
}
#page.area .list-area > .accordion > .btn{
	pointer-events: none;
}
#page.area .list-area > .accordion > .btn:after{
	display: none !important;
}
#page.area .list-area > .accordion.open > .cts{
	max-height: none !important;
	overflow: hidden !important;
}

/* list-prefecture */
.list-prefecture{
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
	margin-bottom: 10px;
}

.list-prefecture > .accordion{
	border-radius: 10px;
	overflow: clip;
}
.list-prefecture > .accordion > .btn{
	position: relative;
	padding: 10px 20px;
	background-color: var(--color-black);
	color: var(--color-white);
	font-size: var(--fz-16);
	cursor: pointer;
}
.list-prefecture > .accordion > .btn:before,
.list-prefecture > .accordion > .btn:after{
	content: '';
	width: 1px;
	height: 13px;
	position: absolute;
	right: 27px;
	top: calc( 50% - 12px / 2 );
	background-color: var(--color-white);
	transition: scale 0.3s ease-in-out;
}
.list-prefecture > .accordion > .btn:after{
	rotate: 90deg;
}
.list-prefecture > .accordion.open > .btn:before{
	scale: 1 0;
}
.list-prefecture > .accordion > .cts{
	border: 1px solid var(--color-black);
	border-top: none;
	border-radius: 0 0 10px 10px;
}

/* list-clinic */
.list-clinic{
	display: grid;
	grid-template-columns: repeat(3, calc(100%/3));
	padding: 10px 20px;
	font-weight: 500;
}
.list-clinic > li{
	padding: 10px 20px;
	position: relative;
}
.list-clinic > li:where( :not(:nth-child(3n)) ){
	border-right: 1px solid #D9D9D9;
}
.list-clinic > li:where( :nth-child(n+4) ){
  border-top: 1px solid #D9D9D9;
}
.list-clinic > li:where( :nth-child(3n) ):after,
.list-clinic > li:where( :nth-child(3n-1) ):after{
  content: '';
  display: block;
  width: 9px;
  height: 9px;
  position: absolute;
  left: -5px;
  bottom: -5px;
  background-color: #fff;
  z-index: 5;
}

.list-clinic .c-name{
	margin-bottom: 6px;
}
.list-clinic .c-name a{
	margin-bottom: 6px;
	color: inherit;
	font-size: var(--fz-14);
	text-decoration: underline;
}
.list-clinic .c-zipcode, .c-address, .c-tel, .c-holiday, .c-url{
	min-height: 1.5em;
	font-size: var(--fz-12);
}
.list-clinic .c-url a{
	color: var(--color-pink);
	text-decoration: underline;
}
.list-clinic .c-btn .btn{
	display: block;
	width: 100%;
	margin-top: 20px;
	padding: 8px;
	border-radius: 4px;
	border: none;
	background-color: var(--color-pink);
	color: var(--color-white);
	font-size: var(--fz-16);
	text-align: center;
	cursor: pointer;
}
.list-clinic .c-btn .btn:hover{
	filter: brightness(1.1) drop-shadow(0 0 5px rgb(0 0 0 / 0.3));
}



@media (max-width: 1024px) {

	.list-clinic{
		grid-template-columns: 1fr;
		gap: 10px;
	}
	.list-clinic > li{
		padding-bottom: 20px;
		padding-inline: 0;
		border-right: none;
		border-top: none;
		border-bottom: 1px solid #D9D9D9;
	}
	.list-clinic > li:where( :last-child ){
		border-bottom: none;
	}
	.list-clinic > li:after{
		display: none;
	}

} /* @media (sp)*/