@charset "utf-8";

/*loading

---------------------------------------------------------------------------------------------------------------------------------------------------*/

.loading-indicator {

      position: absolute;

      top: 10px;

      right: 20px;

      background: rgba(255, 255, 255, 0.2);

      padding: 5px 10px;

      border-radius: 15px;

      font-size: 12px;

      animation: pulse 1.5s ease-in-out infinite alternate;

}

@keyframes pulse {

      from {

            opacity: 0.6;

      }

      to {

            opacity: 1;

      }

}

.calendar-day.loading {

      opacity: 0.7;

      pointer-events: none;

}

/*calendar

---------------------------------------------------------------------------------------------------------------------------------------------------*/

.calendar-container {

      max-width: 800px;

      margin: 0 auto;

      background: #fff;

      overflow: hidden;

}

.calendar-header {

      padding: 0;

      text-align: center;

      position: relative;

}

.calendar-nav {

      display: flex;

      justify-content: space-between;

      align-items: center;

      margin-bottom: 10px;

}

.nav-button {

      border: none;

      padding: 8px 16px;

      border-radius: 20px;

      cursor: pointer;

      font-size: 0.9em;

      transition: background 0.3s;

      position: relative;

      background: url("../images/arrow_02.svg") no-repeat;

      background-size: 0.5em;

      background-position: top 50% right 0;

}

.nav-button#prev-month {

      background: url("../images/slide_arrow.svg") no-repeat;

      background-size: 0.5em;

      background-position: top 50% left 0;

}

.nav-button span {

      font-weight: 700;

      font-size: 1.5em;

}



#today-btn {

      opacity: 0;

      cursor: none;

}

.current-month {

      font-size: 1.8rem;

      font-weight: normal;

      letter-spacing: 3px;

      margin: 0;

}

.current-month span {

      font-size: 1.5em;

      font-weight: 700;

}

/*週*/

.weekday-grid {

      display: grid;

      grid-template-columns: repeat(7, 1fr);

      margin-bottom: 1em;

}

.weekday-header {

      padding: 1em 0.5em;

      text-align: center;

      font-weight: 600;

      border-bottom: 2px solid #cccccc;

}

/*calendar-day

---------------------------------------------------------*/

.calendar-grid {

      display: grid;

      grid-template-columns: repeat(7, 1fr);

      gap: 0.8em;

}

.calendar-day {

      width: auto;

      background: #f5f7f8;

      aspect-ratio: 1/1;

      cursor: pointer;

      position: relative;

      transition: all 0.3s ease;

}

/* イベントがある日の基本スタイル */

.calendar-day.has-events {

      background: var(--col_link);

      position: relative;

}

.calendar-day.has-events:hover {

      transform: translateY(-10px);

}

/* 休館日 */

.calendar-day.closed-day {

      background: var(--col_gray);

}

.day-number {

      font-weight: 600;

      display: flex;

      font-size: 1.5em;

      justify-content: center;

      align-items: center;

      height: 100%;

}

.calendar-day.has-events .day-number {

      text-decoration: underline;

      color: #fff !important;

}

.calendar-day.closed-day .day-number {

      text-decoration: none;

}

.calendar-day.has-events:hover .day-number {

      text-decoration: none;

}

/*違う月*/

.calendar-day.other-month .day-number {

      display: none;

}

/*本日*/

.calendar-day.today {

      background: linear-gradient(135deg, #ff6b6b, #ee5a52);

      color: #fff;

}

.calendar-day.today:hover {

      background: linear-gradient(135deg, #ff5252, #d32f2f);

}

.event-indicator {

      width: 6px;

      height: 6px;

      background: #2196f3;

      border-radius: 50%;

      margin: 1px;

}

.calendar-day.today .event-indicator {

      background: #fff;

}

/* モーダル */

/*modal

---------------------------------------------------------------*/

.modal {

      display: none;

      /*      backdrop-filter: blur(4px);*/

      width: 100%;

      height: 100%;

      position: absolute;

      top: 0;

      left: 0;

}

.modal-content {

      border: solid 3px var(--col_main);

      position: absolute;

      z-index: 1000;

      top: 50%;

      left: 50%;

      transform: translate(-50%, -50%);

      background: #fff;

      margin: auto;

      padding: 0;

      width: 90%;

      max-width: 500px;

      max-height: 70vh;

      overflow: hidden;

      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);

      animation: modalSlideIn 0.3s ease;

}

@keyframes modalSlideIn {

      from {

            top: 40%;

            opacity: 0;

      }

      to {

            top: 50%;

            opacity: 1;

      }

}

.modal-header {

      background: var(--bg_blue_l);

      padding: 0.5em 1em;

      position: relative;

      text-align: center;

      font-weight: 700;

}

.modal-title {

      margin: 0;

      font-size: 2.0rem;

      letter-spacing: 1px;

      font-weight: 600;

}

.close {

      position: absolute;

      right: 20px;

      top: 50%;

      transform: translateY(-50%);

      width: 1.5em;

      aspect-ratio: 1/1;

      cursor: pointer;

      transition: opacity 0.3s;

}

.close img {

      width: 100%;

}

.close:hover {

      opacity: 0.7;

}

.modal-body {

      padding: 0;

      max-height: 400px;

      overflow-y: auto;

}

.event-item {

      padding: 0.8em 1em 0.5em 1em;

      cursor: pointer;

      transition: background-color 0.3s;

}

.event-item + .event-item {

      padding-top: 0 !important;

}

.event-item:last-child {

      padding: 0.8em 1em 0.8em 1em;

}

.event-item h4 {

      position: relative;

      font-size: 0.9em;

      font-weight: normal !important;

      padding-left: 1em;

}

.event-item h4:before {

      position: absolute;

      top: 0.6em;

      left: 0;

      content: "";

      width: 0.5em;

      border-radius: 3em;

      aspect-ratio: 1/1;

      background: var(--col_link);

}

.event-item.organizer h4:before {

      background: var(--col_link);

}

.event-item.cooperated h4:before {

      background: #a48132 !important;

}

.event-item.rental h4:before {

      background: #008a62 !important;

}

.event-item.rental h4:hove{

	text-decoration: underline;

	

}

.event-item.closed-notice h4:before {

      background: #898989 !important;

}



/*cale_status_box*/

.cale_status_box {

      display: flex;

      gap: 1em 10%;

      margin: 2em 0 auto auto;

}

.cale_status_box > * {

      padding-left: 1em;

      position: relative;

}

.cale_status_box > *:before {

      content: "";

      background: var(--col_link);

      width: 0.5em;

      aspect-ratio: 1;

      position: absolute;

      left: 0;

      top: 50%;

      transform: translate(-0%, -50%);

      border-radius: 4em;

}

.cale_status_box .cale_closed {

      padding-left: 2.5em;

}

.cale_status_box .cale_closed:before {

      width: 2em;

      border-radius: 0;

	    background: var(--col_gray);

}

.cale_status_box .cale_organizer:before {

      background: var(--col_link);

}

.cale_status_box .cale_cooperated:before {

    background: #a48132;

}

.cale_status_box .cale_rental:before {
    background: #008a62;
    

}


@media (max-width: 680px) {
	.cale_status_box{
		font-size: 0.8em;
	}	
}
/*event-meta

---------------------------------------------------*/

.event-meta {

      font-size: 12px;

      color: #666;

      margin-bottom: 8px;

}

.event-excerpt {

      font-size: 14px;

      color: #555;

      line-height: 1.5;

}

.no-events {

      padding: 40px 20px;

      text-align: center;

      color: #999;

}

/* レスポンシブ */

@media (max-width: 768px) {

      .calendar-day {

            min-height: 60px;

            padding: 4px;

      }

      .day-number {

            font-size: 1em;

      }

      .weekday-header {

            padding: 10px 2px;

            font-size: 12px;

      }

}

@media (max-width: 680px) {
	      .calendar-day {

            min-height: 1em;

            padding: 0px;

      }
}
/* 複数イベントの場合 */

.calendar-day.has-multiple-events {

      background: linear-gradient(135deg, #fff3e0, #ffcc02);

      border: 2px solid #ff9800;

}

.calendar-day.has-multiple-events:hover {

      background: linear-gradient(135deg, #ffcc02, #ffb300);

}

.calendar-day.has-multiple-events:before {

      background: #ff9800;

}

/* 今日の日付でイベントがある場合 */

.calendar-day.has-events.today {

      background: linear-gradient(135deg, #ff6b6b, #ee5a52);

      border: 2px solid #ffffff;

      color: white;

}

.calendar-day.has-events.today:before {

      background: #ffffff;

}

/* イベント数表示 */

.event-count {

      position: absolute;

      bottom: 2px;

      right: 2px;

      background: #4caf50;

      color: white;

      border-radius: 10px;

      padding: 1px 5px;

      font-size: 10px;

      font-weight: bold;

      min-width: 16px;

      text-align: center;

}

.calendar-day.has-multiple-events .event-count {

      background: #ff9800;

}

.calendar-day.today .event-count {

      background: white;

      color: #ff6b6b;

}