@charset "UTF-8";

/* =========================================================
  event
========================================================= */
.calendarEvents h2 {
  margin: 0 0 1rem;
  padding: 2px 0;
  border-bottom: 2px solid var(--main-color-4);
  font-size: 1.125rem;
}

.calendarEvents th {
  padding: 8px 15px;
  background-color: var(--main-color-10);
  font-weight: normal;
  text-align: center;
}

/* event, search, todays
----------------------------------------------- */
.calendarMonthlyEvents th:not(:last-child),
.resultEvents th:not(:last-child),
.calendarTodayEvents th:not(:last-child) {
  border-right: 1px solid var(--main-color-8);
}

.calendarMonthlyEvents td,
.resultEvents td,
.calendarTodayEvents td {
  padding: 30px 15px;
  border-bottom: 1px solid var(--mono-color-6);
  vertical-align: middle;
}

.calendarMonthlyEvents td.date,
.resultEvents td.date,
.calendarTodayEvents td.date {
  width: 12em;
}

.calendarMonthlyEvents td.date span,
.resultEvents td.date span,
.calendarTodayEvents td.date span {
  display: block;
}

.calendarMonthlyEvents .image,
.calendarMonthlyEvents .date,
.resultEvents .image,
.resultEvents .date,
.calendarTodayEvents .image,
.calendarTodayEvents .date {
  text-align: center;
}

.calendarMonthlyEvents .image,
.resultEvents .image,
.calendarTodayEvents .image {
  width: 180px;
  text-align: center;
}

.calendarMonthlyEvents .title_link,
.resultEvents .title_link,
.calendarTodayEvents .title_link {
  width: 15rem;
}

.calendarMonthlyEvents .note,
.resultEvents .note,
.calendarTodayEvents .note {
  width: calc(var(--content-width) - 180px - 13rem - 15rem);
}

/* calendar
----------------------------------------------- */
.resultCalendarEvents table,
.calendarCalendarEvents table {
  width: 100%;
}

.resultCalendarEvents th,
.resultCalendarEvents td,
.calendarCalendarEvents th,
.calendarCalendarEvents td {
  border: 1px solid var(--mono-color-6);
}

.resultCalendarEvents th,
.calendarCalendarEvents th {
  padding: 5px 12px;
  vertical-align: top;
}

.resultCalendarEvents td,
.calendarCalendarEvents td {
  padding: 5px 12px 16px;
  vertical-align: top;
}

.contentMapMarkers #map_canvas {
  margin-bottom: 1em;
}

.calendarEvents table,
.contentMapMarkers table {
  width: 100%;
}

.resultCalendarEvents table,
.calendarCalendarEvents table {
  table-layout: fixed;
}

.calendarMonthlyEvents th:first-child,
.calendarMonthlyEvents th:last-child {
  width: 9.5em;
}

.calendarMonthlyEvents td.date .from,
.calendarMonthlyEvents td.date .closeDate {
  display: block;
}

.calendarMonthlyEvents td.date .from {
  text-align: center;
}

.calendarMonthlyEvents th {
  white-space: nowrap;
}

.resultCalendarEvents td,
.calendarCalendarEvents td {
  vertical-align: top;
}

.calendarMonthlyEvents td.date>span {
  display: inline-block;
}

/* イベントカレンダー */
.resultCalendarEvents table,
.calendarCalendarEvents table {
  table-layout: fixed;
  width: 100%;
  border: 1px solid var(--mono-color-7);
}

.resultCalendarEvents tr td span,
.calendarCalendarEvents tr td span,
.calendarMonthlyEvents td.category span {
  display: block;
  border-radius: 8px;
  background-color: #e1ebf4;
}

.resultCalendarEvents tr:not(.week) td span:not(:has(a)),
.calendarCalendarEvents tr:not(.week) td span:not(:has(a)),
.calendarMonthlyEvents td.category span:not(:has(a)) {
  padding: 8px;
}

.resultCalendarEvents table td span a,
.calendarCalendarEvents table td span a {
  display: block;
  padding: 8px;
  color: inherit;
  text-decoration: none;
}

.resultCalendarEvents table a:visited,
.calendarCalendarEvents table a:visited {
  color: inherit;
}

.resultCalendarEvents table a:hover,
.resultCalendarEvents table a:focus .calendarCalendarEvents table a:hover,
.calendarCalendarEvents table a:focus {
  color: inherit;
  text-decoration: underline;
}

/* カレンダーカテゴリ */
#eventCategory {
  margin-bottom: 20px !important;
}

#eventCategory .pieceContainer {
  border: 1px solid var(--mono-color-7);
}

#eventCategory .pieceHeader h2 {
  display: block;
  line-height: 1.3;
  margin: 2rem 0 1rem;
  padding: 14px 10px;
  background-color: var(--main-color-16);
  font-size: 1.75rem;
  font-weight: bold;
}

#eventCategory .pieceBody {
  padding: 20px 0;
}

#eventCategory ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

#eventCategory li {
  padding: 8px;
  border-radius: 8px;
}

@media screen and (max-width: 960px) {
  #eventCategory h2 a {
    display: block;
  }

  #eventCategory .pieceBody {
    display: none;
    padding: 20px;
  }

  #eventCategory li {
    flex-basis: calc(50% - 10px);
  }
}

@media screen and (max-width: 480px) {
  #eventCategory li {
    flex-basis: 100%;
  }
}

#calendarCategory ul {
  list-style-type: none;
  margin-bottom: 0;
}

#eventCategory .pr,
.resultCalendarEvents td.event-pr span,
.calendarCalendarEvents td.event-pr span,
.calendarMonthlyEvents td .pr {
  background-color: #89c9f5;
}

#eventCategory .mid-year,
.resultCalendarEvents td.event-mid-year span,
.calendarCalendarEvents td.event-mid-year span,
.calendarMonthlyEvents td .mid-year {
  background-color: #f7b2b2;
}

#eventCategory .course,
.resultCalendarEvents td.event-course span,
.calendarCalendarEvents td.event-course span,
.calendarMonthlyEvents td .course {
  background-color: #d7c7f0;
}

#eventCategory .sports,
.resultCalendarEvents td.event-sports span,
.calendarCalendarEvents td.event-sports span,
.calendarMonthlyEvents td .sports {
  background-color: #99decc;
}

#eventCategory .experience,
.resultCalendarEvents td.event-experience span,
.calendarCalendarEvents td.event-experience span,
.calendarMonthlyEvents td .experience {
  background-color: #b5de99;
}

#eventCategory .festival,
.resultCalendarEvents td.event-festival span,
.calendarCalendarEvents td.event-festival span,
.calendarMonthlyEvents td .festival {
  background-color: #ffde7e;
}

#eventCategory .illumination,
.resultCalendarEvents td.event-illumination span,
.calendarCalendarEvents td.event-illumination span,
.calendarMonthlyEvents td .illumination {
  background-color: #d6cdc2;
}

#eventCategory .healthcheck,
.resultCalendarEvents td.event-healthcheck span,
.calendarCalendarEvents td.event-healthcheck span,
.calendarMonthlyEvents td .healthcheck {
  background-color: #daf2f2;
}

#eventCategory .etc,
.resultCalendarEvents td.event-etc span,
.calendarCalendarEvents td.event-etc span,
.calendarMonthlyEvents td .etc {
  background-color: #e1ebf4;
}

.resultCalendarEvents th,
.resultCalendarEvents td,
.calendarCalendarEvents th,
.calendarCalendarEvents td {
  border-left: 1px solid #ebebeb;
  border-right: 1px solid #ebebeb;
}

.resultCalendarEvents th:first-child,
.calendarCalendarEvents td:first-child {
  border-left: 1px solid #ccc;
}

.resultCalendarEvents th:last-child,
.calendarCalendarEvents td:last-child {
  border-right: 1px solid #ccc;
}

.resultCalendarEvents th,
.calendarCalendarEvents th {
  font-weight: normal;
  vertical-align: middle;
}

.resultCalendarEvents td,
.calendarCalendarEvents td {
  vertical-align: top;
}

.resultCalendarEvents th,
.resultCalendarEvents .week td,
.calendarCalendarEvents th,
.calendarCalendarEvents .week td {
  padding: 10px 1px;
  text-align: center;
}

.resultCalendarEvents .week td,
.calendarCalendarEvents .week td {
  border-top: 1px solid #ccc;
  font-weight: 500;
}

.resultCalendarEvents tr:not(.week) td,
.calendarCalendarEvents tr:not(.week) td {
  padding: 5px;
}

.resultCalendarEvents th.sat,
.resultCalendarEvents td.sat,
.calendarCalendarEvents th.sat,
.calendarCalendarEvents td.sat {
  background-color: #dff6fe;
  color: #0071bc;
}

.resultCalendarEvents th.sun,
.resultCalendarEvents td.sun,
.resultCalendarEvents td.holiday,
.calendarCalendarEvents th.sun,
.calendarCalendarEvents td.sun,
.calendarCalendarEvents td.holiday {
  background-color: #ffe6f1;
  color: #db2700;
}

.resultCalendarEvents tr:not(.week) td:not(:has(span)),
.calendarCalendarEvents tr:not(.week) td:not(:has(span)) {
  color: #db2700;
  text-align: center;
}

.resultCalendarEvents .prevMonth,
.resultCalendarEvents .nextMonth,
.calendarCalendarEvents .prevMonth,
.calendarCalendarEvents .nextMonth {
  visibility: visible;
}

.resultCalendarEvents .prevMonth:not(.sat):not(.sun),
.resultCalendarEvents .nextMonth:not(.sat):not(.sun),
.calendarCalendarEvents .prevMonth:not(.sat):not(.sun),
.calendarCalendarEvents .nextMonth:not(.sat):not(.sun) {
  opacity: 0.5;
}

.resultCalendarEvents .prevMonth.sat,
.resultCalendarEvents .nextMonth.sat,
.calendarCalendarEvents .prevMonth.sat,
.calendarCalendarEvents .nextMonth.sat {
  color: rgba(0, 113, 188, 0.5);
}

.resultCalendarEvents .prevMonth.sun,
.resultCalendarEvents .nextMonth.sun,
.calendarCalendarEvents .prevMonth.sun,
.calendarCalendarEvents .nextMonth.sun {
  color: rgba(219, 39, 0, 0.5);
}

/* スマートフォン表示時のイベントカレンダーのラベル */
@media screen and (max-width: 960px) {

  .resultCalendarEvents tr:not(.week) td span.js-clamp-text,
  .calendarCalendarEvents tr:not(.week) td span.js-clamp-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 10;
    /* ここで表示行数を調整 */
    overflow: hidden;
    cursor: pointer;
    position: relative;
  }

  /* 展開時のスタイル */
  .resultCalendarEvents tr:not(.week) td span.js-clamp-text.is-expanded,
  .calendarCalendarEvents tr:not(.week) td span.js-clamp-text.is-expanded {
    -webkit-line-clamp: unset;
    display: block;
  }
}


/* search
----------------------------------------------- */
fieldset {
  margin-bottom: 10px;
  padding: 10px 10px 20px;
  border: 1px solid var(--mono-color-6);
  border-radius: 6px;
}

.searchCalendarEvents fieldset legend,
.searchEvents fieldset legend {
  width: auto;
  font-size: 1.125rem;
}

.searchCalendarEvents fieldset legend,
.searchCalendarEvents fieldset label,
.searchCalendarEvents fieldset select,
.searchCalendarEvents fieldset span,
.searchEvents fieldset legend,
.searchEvents fieldset label,
.searchEvents fieldset select,
.searchEvents fieldset span {
  letter-spacing: normal;
}

.searchCalendarEvents fieldset label,
.searchCalendarEvents fieldset select,
.searchCalendarEvents fieldset span,
.searchEvents fieldset label,
.searchEvents fieldset select,
.searchEvents fieldset span {
  display: inline-block;
  vertical-align: middle;
}

.searchCalendarEvents fieldset select,
.searchCalendarEvents fieldset input,
.searchEvents fieldset select,
.searchEvents fieldset input {
  margin: 0 10px 0 3px;
}

.searchCalendarEvents fieldset.date ul,
.searchEvents fieldset.date ul {
  display: flex;
}

.searchCalendarEvents fieldset span,
.searchEvents fieldset span {
  margin: 0 7px 0 0;
}

.searchCalendarEvents .submitters,
.searchEvents .submitters {
  margin: 20px 0;
  text-align: center;
}

.searchCalendarEvents .submitters input,
.searchEvents .submitters input {
  padding: 5px 20px;
  cursor: pointer;
}

/* event-type
----------------------------------------------- */
#eventType {
  margin-bottom: 10px;
}

#eventType ul {
  display: flex;
}

#eventType li {
  flex: 1;
  text-align: center;
}

#eventType li a {
  display: block;
  padding: 10px 0;
  background-color: var(--main-color-10);
  color: var(--main-color-2);
}

#eventType li:not(:last-child) a {
  margin-right: 1px;
}

#eventType li a:hover {
  background-color: var(--main-color-3);
  color: var(--mono-color-9);
}

body[id^="page-event-"] #eventType .list a,
body[id^="page-calendar-"] #eventType .calendar a,
body[id^="page-eventSearch-"] #eventType .search a,
body[id^="page-calendarSearch-"] #eventType .calendar-search a,
#eventType li a:hover,
#eventType li a:focus {
  background-color: var(--main-color-3);
  color: var(--mono-color-9);
}

/* monthly-event
----------------------------------------------- */
#monthlyEvent .pieceBody {
  padding: 12px;
}

#monthlyEvent ul {
  margin-bottom: 4px;
}

#monthlyEvent li {
  margin-left: 1.5rem;
  list-style-type: disc;
}

#monthlyEvent li li {
  list-style-type: circle;
}

/* calendar-category
----------------------------------------------- */
#calendarCategory .pieceBody {
  padding: 12px;
}

#calendarCategory ul {
  margin-bottom: 4px;
}

#calendarCategory li {
  margin-left: 1.5rem;
  list-style-type: disc;
}

#calendarCategory li li {
  list-style-type: circle;
}