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

/* spで段落ち */
.wpd_spbr{
  display: inline-block;
}


.wpd_main{
  position: relative;
}

.wpd_top{
  position: relative;
}

/* MV */
.wpd_video{
  position: relative;
  height: 580px;
}
.wpd_video video{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wpd_video::after{
  content: "";
  position: absolute;
  display: block;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.wpd_catch{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px clamp(16px,4vw,96px);
}
.wpd_catch h1{
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 292px; 
  aspect-ratio: 1/1;
  padding-bottom: 16px;
  background: url(../img/top/il_logobg.gif) center center no-repeat;
  background-size: contain;
}
.wpd_catchTxt01{
  max-width: 400px;
}
.wpd_catchTxt02{
  margin-top: 12px;
  font-size: clamp(0.625rem, 0.189rem + 1.62vw, 1rem);/* 10-16 430-800 */
  line-height: calc(18/10);
}


/* hammenu */
.wpd_menubtn{
  position: absolute;
  top: 8px;
  right: 70px;
  background-color: #FFFFFF;
}
.wpd_menubtn::before,
.wpd_menubtn::after,
.wpd_menubtn span{
  background-color: #707070;
}
.wpd_menu{
  right: 62px;
}


/* globalnavi */
.wpd_glonav{
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  max-width: 606px;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 18px clamp(16px,3vw,24px);
  padding: clamp(10px,3vw,12px) 8px;
  border-radius: 10px 10px 0 0;
  border: 1px solid #FFFFFF;
  background-image: url(../img/common/bg_wall.webp);
  background-position: center;
  background-size: cover;
  /*box-shadow: 0px 0px 6px 0px rgba(0, 155, 150, 1);
  background-color: rgb(255, 255, 255, 0.74);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 1), rgb(0, 155, 150, 0.5));*/
}
.wpd_glonav ul{
  display: contents;
  justify-content: center;
  gap: 18px clamp(16px,3vw,24px);
}
.wpd_glonav ul li a{
  font-size: 0.875rem;
  font-weight: bold;
  color: #3E3E3E;
}

/* 画像付き動画スライダー */
.wpd_report{
  margin: 44px 0 24px;
  padding: 0 6px;
}
.wpd_report > div{
  display: flex;
  justify-content: space-between;
  max-width: 1800px;
  margin: auto;
}
.wpd_reportimage{
  width: 27.77%;
  opacity: 0;
  transition: opacity 0.2s linear;
}
.wpd_reportimage.slick-initialized{
  opacity: 1;
}
.wpd_reportimage img{
  aspect-ratio: 2/1;
  object-fit: cover;
}
.wpd_reportlist{
  width: 70%;
}
.wpd_reportlist .slick-slide{
  width: clamp(11.25rem, 22.22vw, 25rem);/* 180-400 820-1800*/
  margin-right: clamp(0.75rem, 1.556vw, 1.75rem);/* 12-28 820-1800*/
}
.wpd_rptentry a{
  display: block;
}
.wpd_rptentry div{
  position: relative;
  aspect-ratio: 16/9;
  margin-bottom: 4px;
  pointer-events: none;
}
.wpd_rptentry div img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.wpd_rptentry div span{
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 8px 9px 8px 16px;
  font-weight: bold;
  font-size: clamp(0.625rem, 0.3345rem + 1.0811vw, 0.875rem);/*10-14 430-800*/
  color: #009E41;
  border-radius: 20px 0 0 0;
  background-color: #FFFFFF;
}
.wpd_rptentry a h3{
  line-height: 1.25;
  margin-bottom: 8px;
  text-decoration: underline;
  font-size: clamp(0.875rem, 0.8052rem + 0.2597vw, 1rem);/*14-16 430-1200*/
  font-weight: bold;
  color: #009E41;
}
.wpd_rptentry a p{
  font-size: 0.875rem;
  color: #000000;
}

/*-- ちびっこシリーズ --*/
.wpd_childseries{
  background-image: url(../img/common/bg_wall.webp);
  background-position: center;
  background-size: cover;
  margin-top: -18px;
  padding: 24px 4px 16px;
  text-align: center;
}




/* わんぱくライブラリー */
.wpd_library{
  padding: clamp(1.5rem, -0.705rem + 8.21vw, 3.5rem) 0;/* 24-56 430-820*/
  background-image: url(../img/common/bg_wall.webp);
  background-position: center;
  background-size: cover;
}
.wpd_library .wpd_h2{
  position: relative;
  display: inline-block;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 16px;
}
.wpd_library .wpd_h2::before{
  content: '';
  position: absolute;
  display: block;
  width: 100%;
  max-width: clamp(40px,10vw,106px);
  aspect-ratio: 194 / 170;
  bottom: 0;
  left: -32%;
  transform: scale(-1);
  background-image: url(../img/top/il_gear_r.webp);
  background-position: center;
  background-size: cover;
}
.wpd_library .wpd_h2::after{
  content: '';
  position: absolute;
  display: block;
  width: 100%;
  max-width: clamp(40px,10vw,106px);
  aspect-ratio: 194 / 170;
  bottom: 0;
  right: -32%;
  background-image: url(../img/top/il_gear_r.webp);
  background-position: center;
  background-size: cover;
}
.wpd_librarylist{
  display: grid;
  grid-template-columns: repeat(4, minmax(190px, 1fr));
  gap: 16px;
  padding: 0 6px;
}
.wpd_lbyentry a{color: #000000;}
.wpd_lbyentry div{
  position: relative;
  aspect-ratio: 16/9;
  margin-bottom: 8px;
  background-color: #FFFFFF;
  pointer-events: none;
}
.wpd_lbyentry div img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.wpd_lbyentry div span{
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 8px 9px 8px 16px;
  font-weight: bold;
  font-size: clamp(0.5rem, 0.2095rem + 1.0811vw, 0.75rem);/*8-12 430-800*/
  color: #707070;
  border-radius: 20px 0 0 0;
  background-color: #FBF6E7;
}
.wan_reporttitle {
  padding-top: 4px;
  font-size: clamp(0.75rem, 0.4744rem + 1.0256vw, 1rem);
  color:#009E41;
  font-weight: bold;
  line-height: 1.25;
  text-decoration: underline;
  text-decoration-color: #009844;
  transition: text-decoration-color 0.2s ease;
}
.wan_reportdate {
  display: block;
  margin-top: 8px;
  font-size: clamp(0.625rem, 0.3494rem + 1.0256vw, 0.875rem);
  color: #5E5E5E;
  font-weight: bold;
}


/* pd_imageline  */
.wpd_imageline .slick-slide img{
  height: clamp(6.25rem, 2.115rem + 15.38vw, 10rem);/*100-160 430-820*/
}


/* バナー */
.wpd_bnr{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 24px;
  padding: clamp(2rem, -1.308rem + 12.31vw, 5rem) 16px;/*32-80 430-820*/
}
.wpd_bnr div{
  max-width: clamp(15rem, 10.176rem + 17.95vw, 19.375rem);/*240-310 430-820*/
}
.wpd_bnr div a{
  display: block;
  transition: opacity 0.2s ease;
}





@media screen and (min-width:821px){
  .wpd_bnr div a:hover{
    opacity: 0.7;
  }
}




@media screen and (max-width:820px){
  /* MV */
  .wpd_video{
    height: clamp(22.5rem, 7.34rem + 56.41vw, 36.25rem);/*360-580 430-820*/
    aspect-ratio: auto;
  }
  .wpd_catch{
    top: 10%;
    transform: translateX(-50%);
    flex-direction: column;
  }
  .wpd_catch h1{
    /*max-width: clamp(6.25rem, -0.641rem + 25.64vw, 12.5rem);*/ /* 100-200 430-820 */
    max-width: 40%;
  }
  .wpd_catchTxt01{
    /*max-width: clamp(13.75rem, 3.413rem + 38.46vw, 23.125rem);*/ /* 220-370 430-820 */
    max-width: 36%;
  }

  /* hammenu */
  .wpd_menubtn{
    right: 16px;
  }
  .wpd_menu{
    right: 0;
  }

  /* 画像付き動画スライダー */
  .wpd_reportimage{
    min-width: 270px;
    margin: auto;
  }
  .wpd_report > div{
    flex-direction: column;
  }
  .wpd_reportlist{
    width: 100%;
  }
  .wpd_reportlist .slick-slide{
    width: clamp(11rem, 47.56vw, 24.375rem);/* 176-390 430-820*/
  }

  /* わんぱくライブラリー */
  .wpd_librarylist{
    grid-template-columns: repeat(3, minmax(180px, 1fr));
  }
}


@media screen and (max-width:690px){
  /* globalnavi */
  .wpd_glonav{
    gap: 0;
    padding: 0;
    flex-direction: column;
    border: unset;
    background-color: unset;
    background-image: unset;
    box-shadow: unset;
  }
  .wpd_glonav ul{
    display: flex;
    padding: 8px 0;
    /*background-color: rgb(255, 255, 255, 0.74);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 1), rgb(0, 155, 150, 0.5));
    box-shadow: 0px 0px 6px 0px rgba(0, 155, 150, 1);*/
    background-image: url(../img/common/bg_wall.webp);
    background-position: center;
    background-size: cover;
  }
  .wpd_childseries{
    margin-top:8px;
    padding: 24px 8px 16px;
  }

  /* わんぱくライブラリー */
  .wpd_librarylist{
    grid-template-columns: repeat(2, auto);
  }
}