/* --- Service Page Layout --- */
.service-hero {
    background-color: #f2f1eb; /* デザインの薄いベージュ */
    padding: 160px 0 100px;
}
.sub-label { font-family: "Afacad"; font-size: 1.6rem; letter-spacing: 0.1em; display: block; margin-bottom: 10px; }
.service-title { font-size: 4.8rem; font-weight: bold; margin-bottom: 40px; }
.service-lead { font-size: 1.4rem; line-height: 2; color: #444; }

.section-sub-title { font-family: "Afacad"; font-size: 2.4rem; margin-bottom: 40px; color: #333; }
.section-sub-title-white { font-family: "Afacad"; font-size: 2.4rem; margin-bottom: 40px; color: #fff; }

/* Service Map List */
.map-list { border-top: 1px solid #ddd; }
.map-item { padding: 40px 0; border-bottom: 1px solid #ddd; }
.map-head { font-size: 2.0rem; font-weight: bold; margin-bottom: 15px; }
.map-text { font-size: 1.4rem; color: #666; }

/* User Case */
.user-case { background-color: #0f172a; padding: 100px 0; }
.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.case-grid img {
width: 100%;     /* 親要素の幅いっぱいに広げる */
    height: auto;    /* アスペクト比を維持する */
    display: block;  /* 下部の余計な隙間を消す */}
.case-card { background-color: #d9d9d9; aspect-ratio: 3/4; }

/* Flow */
.flow { padding: 100px 0; }
.flow-lead { font-size: 1.4rem; color: #666; margin-bottom: 30px; }

/* Utils */
.placeholder-img { background-color: #d9d9d9; width: 100%; height: 400px; }
.mt-60 { margin-top: 60px; }
.mt-40 { margin-top: 40px; }

/* --- Responsive (SmartPhone) --- */
@media screen and (max-width: 768px) {
    .service-hero { padding: 100px 20px 60px; }
    .service-title { font-size: 3.2rem; }
    
    .case-grid { grid-template-columns: 1fr; gap: 15px;}
    .placeholder-img { height: 200px; }
    
    .map-head { font-size: 1.8rem; }
}