@charset "utf-8";

/*------------------------------------------------------------
common
------------------------------------------------------------*/
.slick-slider {
 position: relative;
 display: block;
 box-sizing: border-box;
 -webkit-user-select: none;
  -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
 -webkit-touch-callout: none;
 -khtml-user-select: none;
 -ms-touch-action: pan-y;
 touch-action: pan-y;
 -webkit-tap-highlight-color: transparent;
}

.slick-list {
 position: relative;
 display: block;
 overflow: hidden;
 margin: 0;
 padding: 0;
}

.slick-list:focus {
 outline: none;
}

.slick-list.dragging {
 cursor: pointer;
 cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
 -webkit-transform: translate3d(0, 0, 0);
 -moz-transform: translate3d(0, 0, 0);
 -ms-transform: translate3d(0, 0, 0);
 -o-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
}

.slick-track {
 position: relative;
 top: 0;
 left: 0;
 display: block;
}

.slick-track:before,
.slick-track:after {
 display: table;
 content: '';
}

.slick-track:after {
 clear: both;
}

.slick-loading .slick-track {
 visibility: hidden;
}

.slick-slide {
 display: none;
 float: left;
 height: 100%;
 min-height: 1px;
}

[dir='rtl'] .slick-slide {
 float: right;
}

.slick-slide img {
 display: block;
}

.slick-slide.slick-loading img {
 display: none;
}

.slick-slide.dragging img {
 pointer-events: none;
}

.slick-initialized .slick-slide {
 display: block;
}

.slick-loading .slick-slide {
 visibility: hidden;
}

.slick-vertical .slick-slide {
 display: block;
 height: auto;
 border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
 display: none;
}

/*------------------------------------------------------------
top_slider
------------------------------------------------------------*/
#main_visual {
}

#main_visual .slick-slider {
 background-color:#fff;
 width:950px;
}

.main-slider {
 position: relative;
 max-width:100%;
 margin:0;
 opacity: 0;
 visibility: hidden;
 transition:all 1.2s ease;
 padding-bottom:20px;
}

.main-slider.slick-initialized {
 opacity: 1;
 visibility: visible;
}

.slick-slide {
 position: relative;
 height: 420px;
 visibility: visible;
}

.slick-slide:before {
 visibility: visible;
 background-color: #000;
 opacity: .3;
 z-index: 1;
}

.item {
 margin:0;
}

.item a {
 display:block;
 height:100%;
 width:100%;
}

.item.youtube {
 aspect-ratio: 16 / 9;
 width:100%;
}

.item.youtube iframe {
 position: relative;
 pointer-events: none;
 width: 100%;
 height: 100% !important;
 top:0 !important;
 left:0 !important;
}
　
figure {
 position: relative;
 height: 100%;
}
 
.slide-image {
 opacity: 0;
 height: 100%;
 background-size: contain;
 background-position: center;
 background-repeat:no-repeat;
 background-color:rgba(#c46897,.38);
 background-blend-mode:overlay;
 transition:all .8s ease;

 align-content: center;
 align-items: center;
}

.slide-image.pc {
 display: flex;
}

.slide-image.sp {
 display:none;
}

.slick-active .slide-image {
 opacity: 1;
}

.slick-active .slide-image img {
 height:329px;
}

.image-entity {
 width: 100%;
 opacity: 0;
 visibility: hidden;
}

.loading {
 position: absolute;
 top: 44%;
 left: 0;
 width: 100%;
}

.slide-media {
 animation:slideOut .4s cubic-bezier(0.4, 0.29, 0.01, 1);
}

.slide-media.slick-active {
 z-index: 1;
}
 
.slide-media {
 animation:slideIn 2.4s cubic-bezier(0.4, 0.29, 0.01, 1);
}

.caption {
 opacity: 1;
 transform:translateY(0);
 transition:all .7s cubic-bezier(0.32, 0.34, 0, 1.62) .6s;
}


@keyframes slideIn {
  from {
    filter:blur(15px);
  }
  to {
    filter:blur(0);
  }
}
@keyframes slideOut {
  from {
    filter:blur(0);
  }
  to {
    filter:blur(15px);
  }
}



.slick-dots {
 text-align: center;
 padding-top: 15px;
}
 
.slick-dots li {
 display: inline-block;
 vertical-align: top;
 margin: 0 8px;
}
 
.slick-dots li button {
 width: 16px;
 height: 16px;
 border: none;
 cursor: pointer;
 border-radius: 50%;
 border: 2px solid #064a9a;
 box-shadow: 0 0 0 0 transparent;
 vertical-align: middle;
 color: #064a9a;
 background-color:#064a9a;
 transition:all .3s ease;
 /*opacity: .4;*/
}

.slick-dots li:focus {
 outline: none;
}

.slick-dots li:hover {
 opacity: 1;
 }

.slick-dots li.slick-active button {
 background-color:#ffcc33;
 border: 2px solid #ffcc33;
 box-shadow: 0 0 0 2px #ffcc33;
 color: #ffcc33;
 opacity: 1;
}



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

#main_visual .slick-slider {
 width:100%;
}

.item.youtube iframe {
 width:100% !important;
}

.slide-image.pc {
 display:none;
}

.slide-image.sp {
 display: flex;
}

.prev {
 top:auto;
 bottom:5px;
}

.next {
 top:auto;
 bottom:5px;
}

}