@charset "UTF-8";

body {
    margin: 0;
    padding: 0 60px;
    box-sizing: border-box;
    font-size: 100%;
    font-family: 'Noto Sans', 'Noto Sans JP', sans-serif;

}

a {
    text-decoration: none;
    color: #000;
}

/* 日曜日のtd内のaタグに適用されるスタイル */
td .sunday a {
  color: red;
}

/* 土曜日のtd内のaタグに適用されるスタイル */
td .saturday a {
  color: royalblue;
}

h1 {
    font-size: 1.8rem;
    text-align: center;
}

h2 {
    font-size: 1.5rem;
    text-align: center;
}

p {
  font-size: 1rem;
  text-align: center;
}

table {
    border-spacing: 0;
    border-collapse: collapse;
    margin: 0 auto;
}


/* カレンダーのtdに適用される共通スタイル */
/* カレンダーのtdに適用される共通スタイル */
td {
/* ここに共通のスタイル（例: border, padding）を記述 */
border: 1px solid #ddd;
padding: 10px;
text-align: center;
width: calc(100% / 7); /* 全体幅を7等分 */
height: 80px; /* 高さを固定 */
font-size: 2rem;
  
  /* レスポンシブ対応の修正箇所 */
  white-space: nowrap; /* 文字列を折り返さない */
  word-break: keep-all; /* 単語の途中で改行しない */
}



/* 空のセルに適用されるスタイル */
td.empty-cell {
  /* 共通のtdスタイルが適用されるため、追加の調整は不要 */
  /* 必要に応じて背景色やボーダーを非表示にすることも可能 */
  background-color: #f9f9f9;
}



td:first-child {
    color: red;
}

td:last-child {
    color: royalblue;
}

th {
    background-color: transparent; /* 背景色を透明にする */
}

/* 月曜日の背景色 */
.monday {
  background-color: #f7d4d4; /* 例: 薄い赤色 */
}

/* 火曜日の背景色 */
.tuesday {
  background-color: #d4e8f7; /* 例: 薄い青色 */
}

/* 水曜日の背景色 */
.wednesday {
  background-color: #d4f7e8; /* 例: 薄い緑色 */
}

/* 木曜日の背景色 */
.thursday {
  background-color: #f7d4d4; /* 例: 薄い赤色 */
}

/* 土曜日の背景色 */
.saturday {
  background-color: #f7f7d4; /* 例: 薄い黄色 */
}

/* 本日の日付のセルに適用されるスタイル */
.today-cell {
    border: 3px solid #000; /* 例: 黒色の太い枠線 */
    box-sizing: border-box; /* paddingやborderを含めて幅を計算 */
}


/* メディアクエリ */
@media screen and (max-width: 767px) {
 body {
    padding: 0 10px;
  }
 h1 {
 font-size: 1.5rem;
} 

h2 {
  font-size: 1.5rem;
   }

  table {
    font-size: 1.2rem;
  }

 td {
    font-size: 1.2rem;
    padding: 5px;
    height: auto;
  }
  
  

}