/* Base styles common to all designs */
:root {
    --font-family-sans: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    --font-family-serif: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
}
body {
    font-family: var(--font-family-sans);
    line-height: 1.6;
}

/* common utility classes */
.container {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 20px;
}
.section {
    padding: 80px 0;
}
@media (max-width: 768px) {
    .section {
        padding: 50px 0;
    }
}

/* Image common styles */
.hero-img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    margin-top: 50px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.about-content {
    display: flex;
    align-items: center;
    gap: 50px;
    max-width: 1000px;
    margin: 0 auto;
}
.about-img {
    width: 45%;
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.about-text-wrapper {
    flex: 1;
    text-align: left;
}
.service-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 20px;
}
@media (max-width: 768px) {
    .about-content { flex-direction: column; }
    .about-img { width: 100%; }
    .about-text-wrapper { flex: none; width: 100%; margin-top: 20px; }
    .hero-img { height: 250px; margin-top: 30px; }
}