@charset "utf-8";
/* CSS Document */


/*====================================================================
slick
====================================================================*/
.sliderArea {
  position: relative;
  max-width: 1164px;
  margin: 0 auto;
}
/*.sliderArea.w300 {
  max-width: 300px;
}
.slick-slide {
  margin: 0 5px;
}*/
.slick-slide img {
  width: 100%;
  margin: 0 auto;
}

.sliderArea p {
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-size: clamp(1.1em, 3.2vw, 3.2em);
  letter-spacing: -0.02em;
  font-style: normal;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
  white-space: nowrap;
  backdrop-filter: blur(1px);
}
.sliderArea p span{
  writing-mode: vertical-rl;
}
.blur-anime {
  color: transparent;
  animation: blur-anime 5s linear infinite;
}
@keyframes blur-anime {
    0%  {text-shadow: 0 0 20px rgba(0,0,0,0);}
   33%  {text-shadow: 0 0 0 rgba(0,0,0,1);}
   66%  {text-shadow: 0 0 0 rgba(0,0,0,1);}
  100%  {text-shadow: 0 0 20px rgba(0,0,0,0);}
}

.slider {
  width: 100%;
  height: auto;
  /*overflow: hidden;*/
  margin: 0 auto;
}
.slick-img img {
  width: 100%;
}
@keyframes fdzm {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}
.animation {
  animation: fdzm 3s 0s forwards;
}

/* dotsを四角くカスタマイズするCSS */
.dots-wrap {
    display: flex;
    justify-content: center;
	list-style: none;
}

.dots-wrap li {
    width: 10px;
    height: 10px;
    margin: 0 5px;
    background: #E8E9EB;
    cursor: pointer;
}

.dots-wrap li:hover,
.dots-wrap li.slick-active {
    background: #004DA0;
}
.dots-wrap li button {
    display: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    padding: 0;
    border: none;
    background-color: transparent;
}

/*スマホ用*/
@media screen and (max-width: 640px) {
.slick-slide img{
		height: 450px;
		object-fit: cover;
	}
.sliderArea{
  margin-top: -1.0em;
}

.sliderArea p {
  font-size: 1.7em;
  letter-spacing: -0.02em;
}
.dots-wrap {
	margin-left: -2em;
}
}
