JIN-TANO is 人生 × 楽しい

.table-container {
background-color: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
max-width: 1200px;
}

table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}

th, td {
padding: 12px 16px;
text-align: left;
border-bottom: 1px solid #e0e0e0;
vertical-align: middle;
}

th {
background-color: #f8f9fa;
font-weight: 600;
color: #333;
}

tr:hover {
background-color: #f8f9fa;
}

.service-name {
font-weight: 500;
color: #333;
min-width: 120px;
}

.membership-type {
color: #666;
font-size: 13px;
}

.price {
font-weight: 600;
color: #2563eb;
}

.time-slot {
color: #666;
font-size: 13px;
}

.hourly-rate {
color: #666;
font-size: 13px;
}

.dash {
color: #ccc;
text-align: center;
}

.note-text {
color: #666;
font-size: 13px;
padding-left: 20px;
font-style: italic;
}

.monthly-contract {
color: #666;
font-size: 12px;
}

.ask-label {
background-color: #f3f4f6;
color: #6b7280;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
font-weight: 500;
}

.price-black {
font-weight: 600;
color: #333;
}

th.service-name {
text-align: center;
font-weight: bold;
}

/* メディアクエリを追加 */
@media (max-width: 768px) {
.table-container {
overflow-x: auto;
max-width: 100%;
margin: 0 10px;
}

table {
min-width: 600px;
font-size: 12px;
}

th, td {
padding: 8px 10px;
white-space: nowrap;
}

.service-name {
min-width: 150px;
}

.note-text {
white-space: normal;
font-size: 11px;
}
}

@media (max-width: 480px) {
table {
font-size: 11px;
}

th, td {
padding: 6px 8px;
}
}