@charset "utf-8";
/* CSS Document */

img{max-width: 100%;}
a{text-decoration: none;}


.zkn_body{
  line-height: 1.5;
  padding: 40px 0 184px;
}
.zkn_top{
  margin-bottom: 64px;
  text-align: center;
}
.zkn_top h1{
  margin-bottom: 32px;
  opacity: 0;
  transform: scale(1.5);
  transition: opacity 0.5s ease, transform 0.2s ease;
}
.zkn_top h1.inView{
  opacity: 1;
  transform: scale(1);
}
.zkn_top h1 img{
  width:32%;
}
.zkn_top div{
  opacity: 0;
  transform: scale(1.5);
  transition: opacity 0.5s ease, transform 0.2s ease;
}
.zkn_top div.inView{
  opacity: 1;
  transform: scale(1);
}
.zkn_top div p:first-of-type{margin-bottom: 32px;}
.zkn_top div p img:nth-of-type(2){margin-left: 45px;}


.zkn_zukyunland{margin-bottom: 40px;}
.zkn_rainbow{
  padding: 60px 0 40px;
  text-align: center;
  background: url(../img/il_rainbow.png) center top no-repeat;
  background-size: cover;
}
.zkn_rainbow h2{
  opacity: 0;
  transition: opacity 0.5s ease;
  margin-bottom: 24px;
}

.zkn_rainbow p{
  opacity: 0;
  transition: opacity 0.5s ease 0.2s;
}
.zkn_rainbow.inView p{opacity: 1;}
.zkn_rainbow.inView h2{opacity: 1;}


.zkn_land{
  position: relative;
  display: flex;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.zkn_land.inView{opacity: 1;}

.zkn_chro{
  position: absolute;
  left: 34%;
  top: 81%;
  width: 14.93%;
  aspect-ratio: 362/197;
  z-index: 10;
}
.zkn_chro a{
  display: block;
  transition: 0.5s;
}
/**/
.zkn_map{
  width: 50%;
  aspect-ratio: 1;
  background: url(../img/il_map_v2.webp) center center no-repeat;
  background-size: cover;
}
.zkn_map .slick-list{
  width: 100%;
  height: 100%;
}
.zkn_map .slick-track{
  width: 100% !important;
  height: 100%;
}
.zkn_map .slick-slide{
  position: absolute !important;
  height: auto !important;
  transition: opacity 0.25s linear;
  cursor: pointer;
}
.zkn_kids{
  width: 30.8% !important;
  left: 9.7% !important;
  top: 35.7% !important;
}
.zkn_teen{
  width: 39.5% !important;
  left: 46.5% !important;
  top: 7% !important;
}
.zkn_family{
  width: 26.2% !important;
  left: 40.9% !important;
  top: 28.8% !important;
}
.zkn_nature{
  width: 28.8% !important;
  left: 7% !important;
  top: 59% !important;
}
.zkn_tvprogram{
  width: 35.3% !important;
  left: 35.9% !important;
  top: 58.5% !important;
}
.zkn_videos{
  width: 25.5% !important;
  left: 31.7% !important;
  top: 74% !important;
}
.zkn_ouen{
  width: 28.4% !important;
  left: 67% !important;
  top: 27.4% !important;
}
.zkn_new{
  width: 24.8% !important;
  left: 70.3% !important;
  top: 58.75% !important;
}

.zkn_program{
  position: relative;
  display: flex;
  width: 50%;
  aspect-ratio: 1;
  padding: 10vw 14px 20px;
  background: url(../img/il_texture.png) center center no-repeat;
  background-size: cover;
}
.zkn_program .slick-list{overflow: visible;}
.zkn_program .slick-track{
  position: relative;
  width: calc(50vw - 42px) !important;
}
.zkn_program .slick-slide{
  position: absolute !important;
  width: calc(50vw - 42px) !important;
  left: 0 !important;
  top: 0 !important;
  pointer-events: none;
}
.zkn_program .slick-slide.slick-current{pointer-events: visible;}
.zkn_program h3{
  position: absolute;
  height: 11.67vw;
  left: 0.8vw;
  top: -12vw;
}
.zkn_program h3 img{height: 100%;}
.zkn_listwrap{
  position: relative;
  width: calc(50vw - 42px);
  padding: 0 4px;
}
.zkn_listwrap::before,
.zkn_listwrap::after{
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 18px;
  z-index: 10;
  pointer-events: none;
}
.zkn_listwrap::before{
  left: 0;
  top: -4px;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(rgba(106, 116, 56, 0.77) 0%, rgba(102, 112, 54, 0.16) 66%, rgba(100, 110, 53, 0) 100%);
}
.zkn_listwrap::after{
  left: 0;
  bottom: 0;
  border-radius: 0 0 8px 8px;
  background: linear-gradient(rgba(100, 110, 53, 0) 0%, rgba(102, 112, 54, 0.16) 34%, rgba(106, 116, 56, 0.77) 100%);
}
.zkn_program ul{
  height: 37.33vw;
  overflow: hidden;
}
.mCSB_inside>.mCSB_container{margin-right: 0;}
.mCSB_scrollTools .mCSB_draggerContainer{right: -10px;}
.zkn_program ul li{
  margin-bottom: 12px;
  border-radius: 8px;
  background-color: #FFFFFF;
  border: 1px solid #437F80;
  box-shadow: 2px 3px 0px #215D5A;
}
.zkn_program ul li a{
  position: relative;
  display: flex;
  align-items: center;
  gap: 0 3%;
  width: 100%;
  height: 100%;
  padding: 3px 32px 3px 8px;
  border-radius: 8px;
}
.zkn_program ul li a::before{
  content: "";
  position: absolute;
  display: block;
  width: 16px;
  height: calc(100% - 6px);
  top: 3px;
  right: 5px;
  border-radius: 0px 6px 6px 0px;
  background-color: #E9E79F;
  box-shadow: 1px 1px 2px rgba(0,0,0,0.16) inset;
}
.zkn_program ul li a::after{
  content: "";
  position: absolute;
  display: block;
  right: 14px;
  top: calc(50% - 7px);
  border-left: 8px solid #FFFFFF;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}
.zkn_program ul li a div:first-of-type{
  width: 33%;
  height: 100%;
}
.zkn_program ul li a div:first-of-type picture{
  display: block;
  aspect-ratio: 89/50;
}
.zkn_program ul li a div:first-of-type picture img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.zkn_program ul li a div:nth-of-type(2){width: 64%;}
.zkn_program ul li a h4{
  margin-bottom: 6px;
  font-size: min(1.16vw, 18px);
  font-weight: bold;
  color: #000000;
}
.zkn_program ul li a p{
  font-size: min(1vw, 16px);
  color: #000000;
}

@media screen and (min-width:1680px){
  .zkn_land{
    padding-left: calc(50% - 840px);
    padding-right: calc(50% - 840px);
    background: linear-gradient(to right, #57B5CE 0%, #57B5CE 50%, #7DCFDC 50%, #7DCFDC 100%);
  }
  .zkn_program{padding: 160px 14px 20px;}
  .zkn_program h3 {
    height: 186px;
    left: 12px;
    top: -192px;
  }
  .zkn_program .slick-track{width: 798px !important;}/*840px - 42px*/
  .zkn_program .slick-slide{width: 798px !important;}
  .zkn_listwrap{width: 798px;}
  .zkn_program ul{height: 671px;}
}




.zkn_copy{
  max-width: 1032px;
  margin: auto;
  padding: 0 16px;
}
.zkn_copy>p,
.zkn_copy p:nth-last-of-type(n+2){margin-bottom: 40px;}
.zkn_copy div p:nth-of-type(1){
  opacity: 0;
  transition: opacity 1s ease;
}
.zkn_copy div p:nth-of-type(2){
  opacity: 0;
  transition: opacity 1s ease 1s;
}
.zkn_copy div.inView p{opacity: 1;}
.zkn_copy h2{
  text-align: right;
  opacity: 0;
  transition: opacity 1s ease 2s;
  animation: shake 4s linear infinite;
}
@keyframes shake{
  0%{transform: translate(-15px, 7px);}
  2%{transform: translate(15px, -7px);}
  4%{transform: translate(0, 0);}
  49%{transform: translate(0, 0);}
  50%{transform: translate(15px, -7px);}
  52%{transform: translate(-15px, 7px);}
  54%{transform: translate(0,0);}
  100%{transform: translate(0,0);}
}
.zkn_copy .inView h2{opacity: 1;}




a[href=""] {
  pointer-events:none;
}

.tss_gotop{width: 80px;}

/*-- slick上書き --*/
.zkn_map .slick-slide{
  opacity:1 !important;
}

.zkn_map .slick-slide img{transition: .5s;}
.zkn_map .slick-track .slick-slide.slick-current{pointer-events:none;}
.zkn_map .slick-track .slick-slide.slick-current img{
  transform: scale(1.475);
}
.zkn_map .slick-slide img{
  transform: scale(0.8);
}



@media screen and (min-width:821px){
  .zkn_map .slick-slide:hover{opacity: 1 !important;}
  .zkn_program ul li a:hover div:first-of-type picture img{opacity: 0.5;}
  .zkn_program ul li a:hover::before{background-color: #E9D89F;}
  .zkn_map .slick-slide img:hover{transform: scale(1);}
  .zkn_chro a:hover{transform: scale(1.5);}
  .zkn_exhbnr a img:hover{opacity:0.5;}

}







@media screen and (max-width:820px){
  .zkn_body{
    padding-top: 0;
    padding-bottom: calc(17.5vw + 120px);
  }
  .zkn_top{
    height: 38vh;
    margin-bottom:0;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
  }
  .zkn_top h1{width: 64%;}
  .zkn_top h1 img{width:100%;}
  .zkn_top div{width: 51%;}
  .zkn_top div p img:nth-of-type(2){
    margin-top: 16px;
    margin-left: 0;
  }



  .zkn_rainbow{padding: 10.67vw 0 4.8vw;}
  .zkn_rainbow p img{width: 70.4%;}
  .zkn_rainbow h2 img{width: 76.2%;}



  .zkn_zukyunland{margin-bottom: 4vw;}
  .zkn_land{flex-wrap: wrap;}
  .zkn_map{width: 100%;}
  /*20250327add*/
  .zkn_chro{
    left: 68%;
    top: 46%;
    width: 30%;
  }
  /**/
  .zkn_program{
    width: 100%;
    height: 76vw;
    aspect-ratio: auto;
    padding: 21vw 14px 0;
  }
  .zkn_program .slick-track{width: calc(100vw - 42px) !important;}
  .zkn_program .slick-slide{width: calc(100vw - 42px) !important;}
  .zkn_program h3{
    height: 22.25vw;
    top: -23.3vw;
  }
  .zkn_listwrap{width: calc(100vw - 28px);}
  .zkn_listwrap::before,
  .zkn_listwrap::after{
    width: 12px;
    height: 100%;
  }
  .zkn_listwrap::before{
    left: -4px;
    top: 0;
    border-radius: 8px 0 0 8px;
    background: linear-gradient(to right, rgba(106, 116, 56, 0.77) 0%, rgba(102, 112, 54, 0.16) 66%, rgba(100, 110, 53, 0) 100%);
  }
  .zkn_listwrap::after {
    left: auto;
    right: -4px;
    border-radius: 0 8px 8px 0;
    background: linear-gradient(to right, rgba(100, 110, 53, 0) 0%, rgba(102, 112, 54, 0.16) 34%, rgba(106, 116, 56, 0.77) 100%);
  }
  .zkn_program ul{
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    align-content: space-between;
    flex-wrap: wrap;
    gap: 1.6vw;
    height: 52.8vw;
    max-height: none;
    overflow: scroll;
  }
  .zkn_program ul li{
    width: 82vw;
    height: 25.6vw;
  }
  .zkn_program ul li{margin-bottom: 0;}
  .zkn_program ul li a div:first-of-type{height: auto;}
  .zkn_program ul li a h4{font-size: 2.66vw;}
  .zkn_program ul li a p{font-size: 2.4vw;}




  .zkn_copy div{margin-bottom: 12.8vw;}
  .zkn_copy>p,
  .zkn_copy div p:nth-last-of-type(n+2){margin-bottom: 6.4vw;}
  .zkn_copy>p img{width: 73%;}
  .zkn_copy div p:nth-of-type(1) img{width: 91.7%;}
  .zkn_copy div p:nth-of-type(2) img{width: 92.26%;}
  .zkn_copy h2 img{width: 80%;}
}