main { max-width: 800px; margin: 0 auto; }
main .container { padding: 0 1.5rem; }
main h1 { margin-bottom: 2rem; }
main article h5 { margin-top: 4rem; }

main article ul label { font-weight: 500; color: var(--bs-gray-500); font-family: var(--font-gothic); }
main article ul { list-style: none; padding: 0; margin: 0; }
main article > ul > li { border-bottom: dashed 1px var(--bs-gray-200); padding: 0.5rem 0; }
main article > ul > li ul { margin: 0 1.5rem; list-style: disc; }
main article > ul > li ul li::marker { color: var(--bs-gray-200); }

main .image { max-width: 100%;}

/* Vision */
main.vision { padding: 0; }
.vision .slogan { height: 100vh; display: flex; align-items: center; justify-content: center; }
.vision .slogan img { width: 70%; max-height: 120px; }
.vision .grace { height: 100vh; display: flex; align-items: center; justify-content: center; flex-direction: column; }

.vision-list { list-style: none; padding: 0; margin: 2rem auto; }
.vision-list li { background: rgba(255, 255, 255, 1); margin: 1.5rem 0; padding: 1.5rem 3rem; border-radius: 4rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); transition: transform 0.3s ease, box-shadow 0.3s ease; backdrop-filter: blur(12px) saturate(180%); -webkit-backdrop-filter: blur(12px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.9); }
.vision-list li:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); }
.vision-list li p { font-family: var(--font-serif); font-size: 1.25rem; font-weight: 600; word-break: keep-all; color: #000; margin-bottom: 0.5rem; line-height: 1.2; }
.vision-list li p::first-letter { color: var(--red-dark); font-size: 1.75rem; font-weight: 900; text-shadow: 2px 2px 8px rgba(255,0,0,0.2); }
.vision-list li div { font-size: 1rem; color: var(--bs-gray-700); line-height: 1.2; word-break: keep-all; text-align: right; }

@media (min-width: 768px) {
    .vision .slogan img { width: 50%; max-height: 150px; }
}