*{
	margin:0;
	padding:0;
	box-sizing:border-box;
}

body{
	font-family:sans-serif;
	background:#f7f8fa;
	padding:50px 20px;
}

.hero{
	text-align:center;
	margin-bottom:50px;
}

.hero h1{
	font-size:36px;
}

.cards {
    max-width: 1200px;
    margin: 0 auto;
    
    /* ▼ 修正ここから ▼ */
    display: grid;
    /* auto-fit ではなく、列数を自動計算するがカード幅は固定（ここでは350px）にする */
    grid-template-columns: repeat(auto-fill, 350px);
    gap: 30px;
    justify-content: center; /* 画面全体の中央にこのグリッド（まとまり）を配置する */
    /* ▲ 修正ここまで ▲ */
}

.card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 3px 12px rgba(0,0,0,.08);
    text-align: center;
    padding-bottom: 25px;
    
    /* ※ ここには max-width は不要になります（上の grid-template-columns で幅を決めるため） */
    /* width: 100% だけ残しておいてもOKですが、この場合はなくても動きます */
}

.card img{
	width:100%;
	/* height:220px; */
    aspect-ratio: 16 / 9;
    object-fit: cover;
	/* object-fit:contain; */
	/* object-fit: cover; */
}

.card h2{
	margin:20px 0;
	font-size:24px;
}

.btn{
	display:inline-block;
	padding:12px 28px;
	background:#000;
	color:#fff;
	text-decoration:none;
	border-radius:8px;
	transition:.2s;
}

.btn:hover{
	opacity:.8;
} 

/* --- 追加：セクションと見出しのスタイル --- */
.service-section {
    margin-bottom: 60px; /* 社会人向けと学生向けの間の余白 */
}

.section-title {
    max-width: 1200px;
    margin: 0 auto 20px; /* 中央揃えの基準にしつつ、下のカードとの間に余白を作る */
    font-size: 24px;
    color: #333;
}

@media screen and (max-width: 768px) {
    .hero h1 {
        font-size: 22px; 
    }
    
    body {
        padding: 30px 15px;
    }
    
    .section-title {
        padding: 0 10px;
    }

    /* ▼ これを追加（スマホの時は固定幅を解除して1列にする） ▼ */
    .cards {
        grid-template-columns: 1fr; 
    }
}