@charset "utf-8";

/*////////////////////////////////////////////////////////////////////////////////////////
*/
*{
    min-height: 0;
    min-width : 0;
}
.carousel-top {
 //   width: 100%;
//    background-color: #808080;
    margin-bottom: 0px;
  margin-inline: auto;
  width: 100%;
//  position: relative;
//  display: flex;
//  flex-direction: column;
  display: none; /* 最初は非表示に */
}
.carousel-top.slick-initialized{
  display: block; /* slickが実行完了したら表示 */
}

.carousel-camp {
 //   width: 100%;
//    background-color: #808080;
  margin-bottom: 0px;
  margin-inline: auto;
  width: 100%;
//  position: relative;
//  display: flex;
//  flex-direction: column;
  display: none; /* 最初は非表示に */
}
.carousel-camp.slick-initialized{
  display: block; /* slickが実行完了したら表示 */
}

.carousel-deli {
  margin-bottom: 0px;
  margin-inline: auto;
  width: 100%;
  display: none; /* 最初は非表示に */
}
.carousel-deli.slick-initialized{
  display: block; /* slickが実行完了したら表示 */
}

.carousel-goods {
  margin-bottom: 0px;
  margin-inline: auto;
  width: 100%;
  display: none; /* 最初は非表示に */
}
.carousel-goods.slick-initialized{
  display: block; /* slickが実行完了したら表示 */
}

.carousel-event {
  margin-bottom: 0px;
  margin-inline: auto;
  width: 100%;
  display: none; /* 最初は非表示に */
}
.carousel-event.slick-initialized{
  display: block; /* slickが実行完了したら表示 */
}



//.slick-container {
//  margin-inline: auto;
//  width: 90%;
//}

.slick-dots{
  display: flex;
  justify-content: center;
//  margin: 10px 0;
  width: 100%;
}
.slick-dots li:nth-child(n+2) {
  margin-left: 15px;
}

.slick-dots li{
	width : auto;
	height : auto;
}

.slick-dots li button{
  margin: 0;
  margin-top: 4px;
  padding: 0;
  font: inherit;
  vertical-align: middle;
  text-align: inherit;
  color: inherit;
  text-transform: inherit;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
	background-color: #808080;
    width: 12px;
    height: 12px;
  border-radius: 6px;
  overflow: hidden;
  font-size: 0;
  text-indent: -100%;
  transition-duration: 0.3s;
}
.slick-dots li button:before{
    content: '';
}
.slick-dots li.slick-active button:before{
    content: '';
}
.slick-dots li.slick-active button{
  margin: 0;
  margin-top: 4px;
  padding: 0;
  font: inherit;
  font-size: 0;
  vertical-align: middle;
  text-align: inherit;
  color: inherit;
  text-transform: inherit;
  background: transparent;
  border-radius: 6px;
  -webkit-appearance: none;
  appearance: none;
  width: 36px;
  background-color: #4ec4d3;
  //border-radius: 5px;
}

.slick-slide img {
//  width: 100vw; //ポイント1
//  height: 30vw; //ポイント1
//  max-height: 400px; //ポイント2
//  min-height: 350px; //ポイント2
//  height: 50vw; //ポイント1
}
.slick-event-box {
  height: 25.8vw; //ポイント1
}
.slick-goods-box {
  height: 25.8vw; //ポイント1
}
.slick-deli-box {
  height: 25.8vw; //ポイント1
}
.slick-camp-box {
  height: 25.8vw; //ポイント1
}
.slick-box {
  height: 200px; //ポイント1
}
@media screen and (min-aspect-ratio: 1920/1068) {
.slick-box {
  height: 200px; //ポイント1
//  height: calc((1015 * 100vh)/1068); //ポイント1
}
.slick-camp-box {
  height: calc((496 * 100vh)/1068); //ポイント1
}
.slick-deli-box {
  height: calc((496 * 100vh)/1068); //ポイント1
}
.slick-goods-box {
  height: calc((496 * 100vh)/1068); //ポイント1
}
.slick-event-box {
  height: calc((496 * 100vh)/1068); //ポイント1
}
}
/*
@media screen and (max-width: 1000px) {
.slick-box {
//  height: 52.25vw; //ポイント1
  aspect-ratio:16/9;
  height: auto; //ポイント1
}
}
@media screen and (max-width: 500px) {
.slick-box {
  height: 52vw; //ポイント1
}
}
*/

.carousel-animation-controller {
  position: relative;
  cursor: pointer;
  margin-left: 15px;
  width: 12px;
  height: 18px;
  background-color: transparent;
  transition: all 0.3s ease;
  transform-origin: center;
}
.carousel-animation-controller::before, .carousel-animation-controller:after {
  content: '';
  position: absolute;
  top: 0;
  width: 4px;
  height: 18px;
  background-color: #808080;
  transition: all 0.3s ease;
  transform-origin: center;
}
.carousel-animation-controller::before {
    left: 0;
}
.carousel-animation-controller::after {
    right: 0;
}

.usr-slick-pause::before {
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  width: 12px;
  height: 18px;
  top: 0;
  left: 0;
  background-color: #808080;
}

.usr-slick-pause::after {
  display: none;
}

.usr-slick-play::before,
.usr-slick-play::after {
  width: 4px;
  height: 18px;
  background-color: #808080;
}

.usr-slick-play::before {
  left: 0;
}

.usr-slick-play::after {
  right: 0;
}