@charset "UTF-8";
/* CSS Document */
/* 月齢カレンダー */
/* みんなの知識ちょっと便利帳 */
/* https://www.benricho.org/moon/month/ */
/* 2025/06/29 */

	#moonCalendar {
	  font-family: sans-serif;
	  padding: 1em 0;
	}

	#moonCalendar .subtitle {
	  font-size: 1.7em;
	  font-weight: bold;
	  text-align: center;
	  margin: 0.8em 0 1.2em 0;
	}

	#moonCalendar input[type="number"],
	#moonCalendar button {
	  font-size: 1em;
	  text-align: center;
	  margin-right: 0.5em;
	  width: 5em;
	}

	#moonCalendar select{
	  font-size: 1em;
	  font-weight: bold;	  
	  text-align: center;
	  margin-right: 0.5em;
	  width: 5em;
	  padding: 10px 5px;
	  border: #ccc 1px solid;
	}

	#moonCalendar .input-group {
	  display: inline-block;
	  white-space: nowrap;
	}

	#moonCalendar button {
	  width: auto;
	  cursor: pointer;
	}

	#moonCalendar table {
	  border-collapse: collapse;
	  width: 100%;
	  margin-top: 1em;
	}

	#moonCalendar th,
	#moonCalendar td {
	  border: 1px solid #ccc;
	  padding: 6px;
	  text-align: center;
	  vertical-align: top;
	}

	#moonCalendar th {
	  background: #f0f0f0;
	}

	#moonCalendar td {
	  background: #000;
	  color: #fff;
	}

	#moonCalendar td img {
	  margin-top: 10px;
	}

	#moonCalendar .calendar-title {
	  text-align: center;
	  font-size: 1.2em;
	  font-weight: bold;
	  background-color: #f8f8f8;
	}

	#moonCalendar .moon-age {
	  font-size: 0.9em;
	  font-weight: bold;
	  color: #fff;
	}

	#moonCalendar .moonCalendar-annotation {
	  margin-bottom: 0.5em;
	  padding: 0.5em;
	  background: #f9f9f9;
	  border-left: 4px solid #007acc;
	  font-size: 0.9em;
	  color: #333;
	  max-width: 800px;
	}

	#moonCalendar label {
	  margin-right: 10px;
	}
	
	@media screen and (max-width: 600px) {
  #moonCalendar {
    padding: 0.5em 0.5em;
  }

  #moonCalendar select,
  #moonCalendar input[type="number"],
  #moonCalendar button,
  #moonCalendar label {
    font-size: 0.9em;
    width: auto;
    margin-right: 0.3em;
  }

  #moonCalendar .input-group {
    display: inline-block;
    white-space: nowrap;
    margin-bottom: 0.5em;
  }

  #moonCalendar table {
    font-size: 0.8em;
    overflow-x: auto;
    display: block;
  }

  #moonCalendar th,
  #moonCalendar td {
    padding: 4px;
  }

  #moonCalendar .calendar-title {
    font-size: 1em;
    padding: 0.3em 0;
  }

  #moonCalendar .subtitle {
    font-size: 1.3em;
    margin: 0.5em 0;
  }

  #moonCalendar .moon-age {
    font-size: 0.8em;
  }

  #moonCalendar .moonCalendar-annotation {
    font-size: 0.85em;
    padding: 0.5em;
  }
}