#calendar {
    width: 85vw;
    margin: 5vw auto;
    background-color: #fff;
    overflow: hidden;}
#nav {
    background-color: #29B770;
    color: #fff;
    padding: 10px;
    text-align: center;
    position: relative;}
#nav button {
    background-color: transparent;
    border: none;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    padding: 0 15px;
    transition: color 0.3s;}
#nav button:hover {
    color: #cfd8dc;}
#currentMonthYear {
    font-size: 18px;}
.detail-description{
    font-size: 1.8vw;
    line-height: 3vw;
    margin: 2vw;}

/* テーブル全体のスタイル */
table {
    width: 100%;
    border-collapse: collapse;}
th {
    background-color: #eeeeee;
    color: #424242;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #aaa;}
td {
    width: 100px;
    max-width: 100px;
    border: 1px solid #aaa;
    text-align: center;
    vertical-align: middle;
    height: 100px;
    position: relative;
    padding: 5px;}
table thead tr th:nth-child(1),
table tbody tr td:nth-child(1) {
    background-color: #ffcce5;
    color: red;}
table thead tr th:nth-child(7),
table tbody tr td:nth-child(7) {
    background-color: #cce5ff; /* 水色 */
    color: blue;}
.date-label {
    position: absolute;
    top: 5px;
    left: 5px;
    font-size: 14px;
    color: #666;}
.sunday-label {
    color: red;}
.saturday-label {
    color: blue;}
.event-icon {
    width: 50px;
    height: 50px;
    margin: auto;
    display: block;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border 0.3s;}
.event-icon:hover {
    border: 2px solid #29B770;}
  
/* モーダルウィンドウ */
.modal.event-detail {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 50%;    top: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.5);}
.modal.event-detail .modal-content {
    left: 50%;    top: 50%;
    transform: translate(-50%,-50%);
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    width: 80%;
    position: relative;}
#eventTitle{
    margin: 0 auto 2vw;
    font-size: 2.5vw;
    text-align: center;}
#eventDescription, #subscriptionRegister{
    margin: 0 auto;
    width: 90%;
    font-size: 1.5vw;}
#registerLink, #subscriptionRegister a{
    display: block;
    width: 80%;
    color: #fff;
    background-color: #29B770;
    border-radius: 10vw;
    padding: 0.5vw 2vw;
    margin: 3vw auto;
    text-decoration: none;
    text-align: center;
    font-size:1.5vw;}
#subscriptionRegister{
    text-align: center;}
#subscriptionRegister a{
    width: 90%;
    margin: 2vw auto;}
.close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 28px;
    color: #aaa;
    cursor: pointer;}
.close:hover, .close:focus {
    color: #000;}

@media screen and (max-width: 700px){
#calendar {
    width: 100%;}
#nav button {
    font-size: 5vw;
    padding: 0 2vw;}
#currentMonthYear {
    font-size: 4.5vw;}
.detail-description{
    font-size: 3.8vw;
    line-height: 6vw;}
/* テーブル全体のスタイル */
td {
    width: 13vw;
    max-width: 13vw;
    height: 18vw;
    padding: 1vw;}
.date-label {
    top: 5px;
    left: 5px;
    font-size: 4vw;}
.event-icon {
    width: 8vw;
    height: 8vw;
    margin-top: 4vw;}
  
/* モーダルウィンドウ */
.modal-content {
    padding: 20px;
    border-radius: 5px;
    width: 80%;
    max-width: 500px;}
#eventTitle{
    margin: 0 auto 5vw;
    font-size: 5vw;}
#eventDescription, #subscriptionRegister{
    width: 100%;
    font-size: 4vw;}
#registerLink, #subscriptionRegister a{
    width: 90%;
    font-size: 4vw;
    padding: 1vw;
    margin: 6vw auto;}
#subscriptionRegister{
    font-size: 3.5vw;
    margin-top: 5vw;}
#subscriptionRegister a{
    width: 90%;
    font-size: 4vw;
    margin: 5vw auto;}
.close {
    top: 10px;
    right: 15px;
    font-size: 28px;}
.close:hover, .close:focus {
    color: #000;}
.pc{display: none;}
}


@media screen and (min-width: 701px){
.smp{display: none;}
}