@charset "utf-8";

/* ----------------------------------------------
 ! clinic-information
 ---------------------------------------------- */

.clinic-information-philosophy { border: 0.25vw #ccc solid; padding: 12.4vw 7.4vw; position: relative; background: #fcfcfc; }
.clinic-information-philosophy:after { content: ""; position: absolute; width: calc(100% - 2vw); height: calc(100% - 2vw); border: 0.25vw #C1B197 solid; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; pointer-events: none; }
.clinic-information-philosophy .headline { font-size: 5.6vw; font-weight: 600; text-align: center; color: #8F7869; margin-bottom: 12.4vw; letter-spacing: 0.5vw; position: relative; z-index: 2;}
.clinic-information-philosophy .headline::before { content: "・・・"; position: absolute; left: 50%; transform: translateX(-50%); bottom: -8vw; color: #C1B197; font-size: 4vw; z-index: 1; }
.clinic-information-philosophy .list { display: grid; grid-template-columns: repeat(1, 1fr); gap: 4.26vw 0; counter-reset: count 0; position: relative; z-index: 2; }
.clinic-information-philosophy .list li { display: flex; justify-content: flex-start; align-items: center; line-height: 1.8; position: relative; padding-left: 11.3vw; font-size: 4vw; height: 21.3vw; }
.clinic-information-philosophy .list li::before,
.clinic-information-philosophy .list li::after { content: ""; position: absolute; top: 50%; left: 0; transform: translateY(-50%); z-index: 2; }
.clinic-information-philosophy .list li::before { content: counter(count) ". "; counter-increment: count 1; color: #C1B197; font-size: 6vw;}
.clinic-information-philosophy .list li::after { height: 100%; width: 7.3vw; border-right: #ccc 0.25vw solid; }

@media screen and (min-width:769px) {
	.clinic-information-philosophy { border: 0.07vw #ccc solid; padding: 4.8vw 5.2vw; }
	.clinic-information-philosophy:after { border: 0.07vw #C1B197 solid; width: calc(100% - 0.8vw); height: calc(100% - 0.8vw); }
	.clinic-information-philosophy .headline { font-size: 1.88vw; margin-bottom: 4.8vw; letter-spacing: 0.2vw; }
	.clinic-information-philosophy .headline::before { font-size: 1.16vw; bottom: -2.6vw; }
	.clinic-information-philosophy .list { gap: 1.16vw; max-width: 35vw; margin: auto;}
	.clinic-information-philosophy .list li { font-size: 1.16vw; height: auto; padding-left: 5vw; }
	.clinic-information-philosophy .list li::before { font-size: 1.88vw; }
	.clinic-information-philosophy .list li::after { width: 3.2vw; border-right: #ccc 0.07vw solid; }
}

@media screen and (min-width:1381px) {
	.clinic-information-philosophy { border: .5px solid #ccc; padding: 64px 40px; }
	.clinic-information-philosophy:after { border: 1px #C1B197 solid; width: calc(100% - 8px); height: calc(100% - 8px); }
	.clinic-information-philosophy .headline { font-size: 26px; margin-bottom: 64px; letter-spacing: 4px; }
	.clinic-information-philosophy .list { gap: 40px; max-width: 520px; margin: auto; }
	.clinic-information-philosophy .list li { font-size: 18px; padding-left: 72px; height: auto; }
	.clinic-information-philosophy .list li::before { font-size: 32px; }
	.clinic-information-philosophy .list li::after { width: 48px; border-right: #ccc 1px solid; }
	.clinic-information-philosophy .headline::before {bottom: -32px; font-size: 15px;}
}