@charset "utf-8";

/* TOP固有のスタイル */
.main-card { 
    background: #fff; 
    border-radius: 15px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); 
    padding: 40px 30px; 
    margin-bottom: 30px; 
}

.important-label { 
    display: inline-block; 
    background: #e63946; 
    color: #fff; 
    padding: 3px 15px; 
    border-radius: 4px; 
    font-weight: bold; 
    font-size: 14px; 
    margin-bottom: 15px; 
}

.main-card h1 { 
    font-size: 22px; 
    color: #111; 
    margin-bottom: 25px; 
    line-height: 1.5; 
    text-align: left; 
}

.intro-text { 
    font-size: 15px; 
    margin-bottom: 30px; 
    color: #555; 
}

.schedule-box { 
    background: #f0fdfc; 
    border: 1px solid #6ad1c8; 
    border-radius: 10px; 
    padding: 20px; 
    margin-bottom: 40px; 
    display: flex; 
    justify-content: space-around; 
    align-items: center; 
    flex-wrap: wrap; 
}

.schedule-item { 
    text-align: center; 
    margin: 10px; 
}

.schedule-item span { 
    display: block; 
    font-size: 13px; 
    color: #666; 
}

.schedule-item strong { 
    display: block; 
    font-size: 20px; 
    color: #008080; 
    margin-top: 5px; 
}

.change-title { 
    text-align: center; 
    font-size: 20px; 
    font-weight: bold; 
    margin: 40px 0 25px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}

.change-title::before, .change-title::after { 
    content: ""; 
    height: 1px; 
    flex-grow: 1; 
    background-color: #ddd; 
    margin: 0 15px; 
}

.change-card { 
    border: 1px solid #eee; 
    border-radius: 10px; 
    padding: 20px; 
    margin-bottom: 20px; 
    background: #fafafa; 
    text-align: left; 
}

.change-card h3 { 
    font-size: 17px; 
    color: #333; 
    margin-bottom: 10px; 
    display: flex; 
    align-items: flex-start; 
}

.num { 
    background: #6ad1c8; 
    color: #fff; 
    width: 24px; 
    height: 24px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    border-radius: 50%; 
    font-size: 14px; 
    margin-right: 10px; 
    flex-shrink: 0; 
    margin-top: 2px; 
}

.alert-text { 
    color: #e63946; 
    font-weight: bold; 
}

.shop-info-section { 
    background: #fff; 
    border-radius: 15px; 
    padding: 30px; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); 
}

.shop-info-section h2 { 
    font-size: 18px; 
    margin-bottom: 20px; 
    padding-left: 10px; 
    border-left: 5px solid #6ad1c8; 
    text-align: left; 
}

.info-table { 
    width: 100%; 
    border-collapse: collapse; 
    font-size: 15px; 
}

.info-table th, .info-table td { 
    padding: 12px; 
    border-bottom: 1px solid #eee; 
    text-align: left; 
}

.info-table th { 
    width: 30%; 
    background-color: #fcfcfc; 
    font-weight: bold; 
    color: #666; 
}

@media (max-width: 600px) {
    .main-card { padding: 30px 20px; }
    .schedule-box { flex-direction: column; }
    .info-table th, .info-table td { display: block; width: 100%; }
}