CSS（service.css）
body {
margin: 0;
font-family: 'Noto Sans JP', sans-serif;
background: #f8fcff;
color: #333;
}

.service {
position: relative;
background: linear-gradient(to bottom, #eaf6fb, #ffffff);
padding: 60px 20px;
overflow: hidden;
}

.illustration {
position: absolute;
top: 20px;
right: 40px;
width: 140px;
opacity: 0.9;
}

.illustration img {
width: 100%;
}

.container {
max-width: 900px;
margin: 0 auto;
}

.main-title {
text-align: center;
font-size: 36px;
color: #3a8ca8;
margin-bottom: 50px;
font-weight: 700;
}

.box {
background: #ffffff;
border-radius: 20px;
padding: 30px;
margin-bottom: 35px;
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.label {
display: inline-block;
padding: 6px 20px;
border-radius: 20px;
color: #fff;
font-weight: 600;
margin-bottom: 15px;
}

/* 色分け */
.blue { background: #7cc5d9; }
.orange { background: #f0b36a; }
.green { background: #88c999; }
.pink { background: #f29bb2; }
.teal { background: #5bb5a2; }

.box p {
line-height: 1.8;
}

.box ul {
padding-left: 20px;
line-height: 1.8;
}

.check-list {
margin-top: 20px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
font-weight: 500;
}

@media (max-width: 768px) {
.check-list {
grid-template-columns: 1fr;
}

.main-title {
font-size: 28px;
}
}