@CHARSET "UTF-8";



/**********************************************************************
* [mainvisual]
**********************************************************************/
.mainvisual {
 position: relative;
}

.main-image img {
 width: 100%;
 height: auto;
 margin: 0 auto;
}

.event-text {
 position: absolute;
 bottom: 20%;
 left: 5%;
}

.event-text h1 {
 padding: 0;
 color: #eee;
 font-weight: normal;
}

.event-text h1 .title {
 font-size: 36px;
 margin-bottom: -0.3em;
}

.event-text h1 .index {
 display: block;
 font-size: 14px;
}

@media (min-width: 768px) {
 .event-text {
  left: 8%;
 }
 
 .event-text h1 .title {
  font-size: 42px;
 }

 .event-text h1 .index {
  font-size: 16px
 }
}

@media (min-width: 992px) {
 .event-text {
  left: 10%;
 }

 .event-text h1 .title {
  font-size: 63px;
 }

 .event-text h1 .index {
  font-size: 22px;
 }
}

/**********************************************************************
* [Cherish event]
**********************************************************************/
.cherish-event {
 margin: 4% 0;
}

.h2-title {
 color: #aad4f1;
 font-size: 1.5em;
 font-weight: normal;
}

.sub-title {
 font-size: 1.2em;
}

.cherish-event .image {
 margin-top: 2%;
 margin-bottom: 2%;
}

.cherish-event .calendar {
 margin-right: 1em;
 margin-bottom: 1em;
 width: 20%;
}

.cherish-event .l-pop {
 margin-bottom: 1em;
}

.cherish-event .pop {
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
 margin-bottom: 1em;
 margin-left: -1em;
}

.cherish-event .detail {
 width: 28.82%;
 margin-left: 1em;
} 

.cherish-event .pic-gallery {
 margin: 2% 0;
}

.cherish-event .gallery {
 margin: 4% 0;
}

@media (min-width: 768px) {
 .cherish-event .image {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
 }

 .cherish-event .calendar {
  width: 27%;
 }

 .cherish-event .event-pop {
  width: 70%;
 }
 
 .cherish-event .detail {
  margin-left: 1em;
  width: 30%;
 }
 
 .cherish-event .gallery {
  margin: 4% 0;
  width: 80%;
 }
}

@media (min-width: 1140px) {
/*
 .cherish-event .calendar {
  width: 67%;
 }
 
*/
 .cherish-event .gallery {
  width: 1000px;
 }
}


/**********************************************************************
* [swiper]
**********************************************************************/
#slider img {
 width: 100%;
 height: auto;
 vertical-align: middle;
}

#thumbs {
 margin-top: 1%;
}

#thumbs .swiper-slide {
 cursor: pointer;
 height: 100%;
 opacity: 0.2;
 width: 100%;
 margin-right: 1%;
}

#thumbs .swiper-slide-active {
 opacity: 1;
}

/**********************************************************************
* [footer]
**********************************************************************/
footer {
 margin-top: 7%;
}