#calendar{
	margin: 0px auto 20px;
	position: relative;
}

#myInput{
	pointer-events: none;
}

#calendar .ui-datepicker {
  width: 100%!important;
	max-width: 616px;
}

#calendar .ui-widget.ui-widget-content {
  border: none!important;
	margin: 0 auto;
}

#calendar .ui-datepicker .ui-datepicker-header {
  background: unset;
  border: none!important;
	display: flex;
  justify-content: center;
  align-items: center;
}

#calendar .ui-datepicker .ui-datepicker-title {
  font-size: 24px;
}

#calendar .ui-datepicker .ui-datepicker-prev, #calendar .ui-datepicker .ui-datepicker-next {
  top: auto!important;
  width: 70px!important;
  height: 42px!important;
	background: #2aa852;
	display: flex;
  justify-content: center;
  align-items: center;
}

#calendar .ui-widget-header .ui-icon {
	background-image: none!important;
  display: inline-block;
  vertical-align: middle;
  color: #333;
  line-height: 1;
  width: 10px;
  height: 10px;
  border: 2px solid #fff;
  border-left: 0;
  border-bottom: 0;
  box-sizing: border-box;
  transform:  rotate(45deg);
}

#calendar .ui-widget-header .ui-datepicker-prev span{
  transform:  rotate(-135deg);
}

#calendar .ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span {
  margin-left: 0!important;
  margin-top: 0!important;
	left: auto!important;
  top: auto!important;
}

#calendar .ui-state-hover{
	background: #2aa852!important;
	border:none!important;
	right: 2px!important;
}

#calendar .ui-datepicker-prev-hover{
	left: 2px!important;
}

#calendar .ui-datepicker th {
	border: 1px solid #ddd;
	padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
}

#calendar .ui-datepicker th span{
  font-size: 15px;
	color: #000;
}

#calendar .ui-datepicker th:first-child span{
	color: red;
}

#calendar .ui-datepicker th:last-child span{
	color: blue;
}

#calendar .ui-datepicker td {
  padding-top: 10px!important;
  padding-bottom: 10px!important;
  text-align: center;
  min-height: 80px!important;
	border: 1px solid #ddd;
}


#calendar .ui-datepicker td a {
  padding: 0;
  text-align: center!important;
	background: unset!important;
	border:none!important;
	width: 30px;
	height: 30px;
	display: flex!important;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
	border-radius: 50px;
}
#calendar .ui-datepicker td:hover a {
	background: #2aa852!important;
	color: #fff;
}
#calendar .ui-datepicker td a:hover {
	opacity: 1!important;
}

#calendar .ui-datepicker td a.ui-state-active {
	background: #2aa852!important;
	color: #fff;
}

form .dateArea{
	width: 100%;
	max-width: 616px;
	margin: 0 auto;
	border: 1px solid #666;
	padding: 1rem !important;
	border-radius: 4px;
}

form .dateArea p{
	font-size: 24px;
	font-weight: 700;
}

form .dateArea p.dateHead{
	font-size: 18px;
	font-weight: 700;
	color: #666;
}


@media screen and (max-width: 768px) {
#calendar{
	margin: calc(100vw * 50 / 414) auto calc(100vw * 20 / 414);
}
	
#calendar .ui-datepicker table {
  table-layout: fixed!important;
	display: table;
}
	
	#calendar .ui-datepicker table thead{
		width: 100%;
	}

#calendar .ui-datepicker {
  width: 100%!important;
	max-width: 616px;
}

#calendar .ui-datepicker .ui-datepicker-title {
  font-size: calc(100vw * 22 / 414);
}

#calendar .ui-datepicker .ui-datepicker-prev, #calendar .ui-datepicker .ui-datepicker-next {
  width: calc(100vw * 60 / 414)!important;
  height: calc(100vw * 40 / 414)!important;
}

#calendar .ui-widget-header .ui-icon {
  width: calc(100vw * 10 / 414);
  height: calc(100vw * 10 / 414);
  border: calc(100vw * 2 / 414) solid #fff;
  border-left: 0;
  border-bottom: 0;
}

#calendar .ui-datepicker th {
	padding-top: calc(100vw * 10 / 414)!important;
  padding-bottom: calc(100vw * 10 / 414)!important;
	display: inline-table;
	width: calc(100% / 7);
	
}

#calendar .ui-datepicker th span{
  font-size: calc(100vw * 15 / 414);
	margin: 0;
}

#calendar .ui-datepicker td {
	padding-top: calc(100vw * 10 / 414)!important;
  padding-bottom: calc(100vw * 10 / 414)!important;
	width: calc(100% / 7);
	min-height: calc(100vw * 50 / 414)!important;
	display: inline-table;
}


#calendar .ui-datepicker td a {
	width: calc(100vw * 30 / 414);
	height: calc(100vw * 30 / 414);
	margin: calc(100vw * 9 / 414) auto;
}

form .dateArea p{
	font-size: calc(100vw * 22 / 414);
}

form .dateArea p.dateHead{
	font-size: calc(100vw * 16 / 414);
}
}









.flatpickr-rContainer {
  width: 100%;
}

.flatpickr-calendar.inline {
	margin: 50px auto 20px;
	width: 100%;
	max-width: 616px;
	box-shadow: unset;
}

.dayContainer {
	width: 100%!important;
  max-width: 100%!important;
	/*border:solid 1px #ddd;*/
}

.flatpickr-days {
  width: 100%!important;
}

.flatpickr-day {
  width: calc(100% / 7)!important;
	max-width: 100%!important;
}

.flatpickr-months .flatpickr-month {
  height: 70px!important;
	font-size: 24px;
	padding-top: 0!important;
}

.flatpickr-current-month {
  font-weight: 700!important;
  position: relative!important;
  left: auto!important;
  padding: 0!important;
  height: auto!important;
}

.flatpickr-months {
  align-items: center;
}



.flatpickr-monthDropdown-months{
-webkit-appearance: none!important;/* ベンダープレフィックス(Google Chrome、Safari用) */
-moz-appearance: none!important; /* ベンダープレフィックス(Firefox用) */
appearance: none!important; /* 標準のスタイルを無効にする */ 
	pointer-events: none;
	font-weight: 500!important;
}

.flatpickr-current-month input.cur-year {
	font-weight: 500!important;
}

.flatpickr-month .numInputWrapper span.arrowUp {
  display: none;
}

.flatpickr-month .numInputWrapper span.arrowDown {
  display: none;
}

.flatpickr-current-month .numInputWrapper {
	pointer-events: none;
}


.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month {
	top: auto!important;
	width: 70px!important;
	height: 42px!important;
	padding: 0!important;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #2aa852;
	border-radius: 4px;
}

.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month {
  fill: #fff!important;
}

.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg {
   fill: #fff!important;
}

.flatpickr-weekdays {
	height: 45px!important;
}

span.flatpickr-weekday {
  font-size: 16px!important;
  color: #000!important;
  font-weight: bold;
	border:solid 1px #ddd;
	padding-top: 10px;
  padding-bottom: 10px;
	height: 45px!important;
	display: flex!important;
	justify-content: center;
  align-items: center;
}

span.flatpickr-weekday:first-child {
	color: red!important;
}

span.flatpickr-weekday:last-child {
	color: blue!important;
}
.flatpickr-day {
	position: relative!important;
}
/*.flatpickr-day::before {
	content: "";
	width: 100%;
	height: 1px;
	background: #ddd;
	position: absolute;
	left: 0;
	bottom: -1px;
  margin: auto;
}
.flatpickr-day::after {
	content: "";
	width: 1px;
	height: 100%;
	background: #ddd;
	position: absolute;
	right: -1px;
	bottom: 0;
  margin: auto;
}*/
.flatpickr-day:nth-of-type(7n)::after {
	content: none;
}
.flatpickr-day:nth-child(n+36)::before {
	content: none;
}

.flatpickr-day.selected{
	background: #2aa852!important;
	border-color: #2aa852!important;
}

/* ポップアップのスタイル */
  #popupMessage {
    display: none;
    position: absolute;
    background: #fff;
    border: 2px solid #e74c3c;
    color: #e74c3c;
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: bold;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    z-index: 9999;
    animation: fadeIn 0.3s ease;
  }

  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
  }


/* コンテナ調整 */
.timeArea {
  margin: 0 auto 15px;
  text-align: center;
}

/* セレクトボックス本体 */
.timeArea select {
  appearance: none; /* デフォルト矢印削除 */
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 10px 40px 10px 15px; /* 左に余白、右に矢印スペース */
  font-size: 16px;
  border-radius: 8px;
  border: 1px solid #ccc;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  cursor: pointer;
  transition: all 0.2s ease;
	width: 100%;
	max-width: 616px;
}

/* ホバー・フォーカス時 */
.timeArea select:hover,
.timeArea select:focus {
  border-color: #007bff;
  box-shadow: 0 4px 10px rgba(0,123,255,0.2);
  outline: none;
}

/* 下向き矢印を追加 */
.timeArea select {
  background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path fill="%23999" d="M2 4l4 4 4-4z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
}

/* スマホ向けフォントサイズ調整 */
@media (max-width: 600px) {
  .timeArea select {
    font-size: 18px;
    padding: 12px 40px 12px 15px;
  }
}


.resTxt{
	width: 100%;
	max-width: 616px;
	color: red;
	margin: 0 auto 10px;
}

.flatpickr-calendar.arrowTop::before {
  border-bottom-color: none!important;
}


@media screen and (max-width: 768px) {

.flatpickr-calendar.inline {
	margin: calc(100vw * 16 / 414) auto calc(100vw * 20 / 414);
}

.flatpickr-months .flatpickr-month {
  height:calc(100vw * 56 / 414)!important;
	font-size: calc(100vw * 22 / 414);
}



.flatpickr-monthDropdown-months{
	height: calc(100vw * 55 / 414)!important;
}


.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month {
	width: calc(100vw * 60 / 414)!important;
	height: calc(100vw * 42 / 414)!important;
}

.flatpickr-weekdays {
	height: calc(100vw * 45 / 414)!important;
}

span.flatpickr-weekday {
  font-size: calc(100vw * 16 / 414)!important;
	padding-top: calc(100vw * 10 / 414);
  padding-bottom: calc(100vw * 10 / 414);
	height: calc(100vw * 45 / 414)!important;
}
.flatpickr-day:nth-of-type(7n)::after {
	content: none;
}
.flatpickr-day:nth-child(n+36)::before {
	content: none;
}

/* ポップアップのスタイル */
  #popupMessage {
    padding: calc(100vw * 10 / 414) calc(100vw * 15 / 414);
    font-size: calc(100vw * 14 / 414);
  }


/* コンテナ調整 */
.timeArea {
  margin: 0 auto calc(100vw * 15 / 414);
}


.resTxt{
	font-size: calc(100vw * 13 / 414);
}
	
#myInput {
  font-size: calc(100vw * 19 / 414);
}
}

.flatpickr-day:hover{
	background: #2aa852!important;
  border-color: #2aa852!important;
  color: #fff!important;
}

.flatpickr-day.today{
  border-color: #6ace8a!important;
}

.flatpickr-day.selected:hover{
	background: #2aa852!important;
  border-color: #2aa852!important;
}

.flatpickr-day.flatpickr-disabled:hover{
	background: unset!important;
  border-color: unset!important;
	border: none!important;
  color: rgba(57,57,57,0.1)!important;
}