@charset "UTF-8";
/* CSS Document */
/*----------------------------------------
変数
----------------------------------------*/
main.whatsOnDetail {
  background-color: var(--colorMain);
}

body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100svh;
}
body main.whatsOn {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
}
body main.whatsOn #articleListContents {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

/*----------------------------------------
イベント一覧
----------------------------------------*/
#articleListContents {
  padding-bottom: 64px;
}
#articleListContents .articleContainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 48px;
}
@media screen and (max-width: 589px) {
  #articleListContents .articleContainer {
    gap: 24px;
  }
}
@media screen and (min-width: 590px) and (max-width: 899px) {
  #articleListContents .articleContainer {
    gap: 24px 3.3%;
  }
}
@media screen and (min-width: 900px) {
  #articleListContents .articleContainer {
    gap: 64px 3.3%;
  }
}
#articleListContents .articleBox {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  background-color: var(--colorMain);
}
@media screen and (min-width: 590px) and (max-width: 899px) {
  #articleListContents .articleBox {
    width: 48.35%;
  }
}
@media screen and (min-width: 900px) {
  #articleListContents .articleBox {
    width: 31.1333333333%;
  }
}
#articleListContents .articleBox * {
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
#articleListContents .articleBox .areaImage {
  overflow: hidden;
}
#articleListContents .articleBox .areaImage img {
  width: 100% !important;
  height: 100% !important;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center center;
     object-position: center center;
}
@media screen and (max-width: 899px) {
  #articleListContents .articleBox .areaImage img {
    aspect-ratio: 350/264;
  }
}
@media screen and (min-width: 900px) {
  #articleListContents .articleBox .areaImage img {
    aspect-ratio: 512/384;
  }
}
#articleListContents .articleBox .areaText {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 24px 9% 48px;
}
#articleListContents .articleBox .areaText .articleTitle {
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.5;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
@media screen and (max-width: 899px) {
  #articleListContents .articleBox .areaText .articleTitle {
    font-size: var(--size20px);
  }
}
@media screen and (min-width: 900px) {
  #articleListContents .articleBox .areaText .articleTitle {
    font-size: var(--size25px);
    height: 3em;
  }
}
@media screen and (max-width: 899px) {
  #articleListContents .articleBox .areaText .articleDate {
    font-size: var(--size14px);
    letter-spacing: -0.05em;
    line-height: 1.5;
  }
}
@media screen and (min-width: 900px) {
  #articleListContents .articleBox .areaText .articleDate {
    font-size: var(--size20px);
    font-weight: 500;
    line-height: 1.2;
  }
}
#articleListContents .articleBox .areaText .articleSummary {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  letter-spacing: 0;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}
@media screen and (max-width: 899px) {
  #articleListContents .articleBox .areaText .articleSummary {
    font-size: var(--size14px);
    letter-spacing: -0.05em;
    line-height: 1.5;
    margin-top: 16px;
  }
}
@media screen and (min-width: 900px) {
  #articleListContents .articleBox .areaText .articleSummary {
    letter-spacing: -0.03em;
    line-height: 1.5;
    margin-top: 20px;
  }
}
@media screen and (max-width: 899px) {
  #articleListContents .articleBox .btnLink {
    margin-top: 16px;
  }
}
@media screen and (min-width: 900px) {
  #articleListContents .articleBox .btnLink {
    margin-top: 32px;
  }
}

.pager {
  margin-top: 64px;
}

/*----------------------------------------
イベント詳細
----------------------------------------*/
.whatsOnDetail .pageMainImage div {
  height: 100%;
}
.whatsOnDetail .pageMainImage img {
  width: 100% !important;
  height: 100% !important;
}
@media screen and (max-width: 899px) {
  .whatsOnDetail .articleDetail {
    padding: 64px 0;
  }
}
@media screen and (min-width: 900px) {
  .whatsOnDetail .articleDetail {
    max-width: 1200px;
    padding: 120px 0 192px;
    margin: 0 auto;
  }
}
.whatsOnDetail .articleDetail .pageTitle {
  font-weight: 500;
  text-align: center;
  line-height: 1.2;
}
@media screen and (max-width: 899px) {
  .whatsOnDetail .articleDetail .pageTitle {
    font-size: var(--size25px);
  }
}
@media screen and (min-width: 900px) {
  .whatsOnDetail .articleDetail .pageTitle {
    font-size: var(--size30px);
    letter-spacing: -0.04em;
  }
}
.whatsOnDetail .articleDetail .text {
  line-height: 1.5;
  text-align: center;
}
@media screen and (max-width: 899px) {
  .whatsOnDetail .articleDetail .text {
    font-size: var(--size14px);
    letter-spacing: -0.05em;
    margin-top: 24px;
  }
}
@media screen and (min-width: 900px) {
  .whatsOnDetail .articleDetail .text {
    margin-top: 120px;
  }
}
.whatsOnDetail .articleDetail #period {
  text-align: center;
}
@media screen and (max-width: 899px) {
  .whatsOnDetail .articleDetail #period {
    margin-top: 40px;
  }
}
@media screen and (min-width: 900px) {
  .whatsOnDetail .articleDetail #period {
    margin-top: 64px;
  }
}
@media screen and (max-width: 899px) {
  .whatsOnDetail .articleDetail .btnBox {
    margin-top: 64px;
  }
}
@media screen and (min-width: 900px) {
  .whatsOnDetail .articleDetail .btnBox {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin-top: 120px;
  }
}
.whatsOnDetail .articleDetail .btnBox .btnLink {
  width: 150px;
}/*# sourceMappingURL=whatsOn.css.map */