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

/*--重要なお知らせ--*/
.wpd_importantarea{
  width: 90%;
  margin: 24px auto;
  padding: 1em;
  border: solid 4px #f4c85b;
  line-height:1.5;
}

.wpd_importanttitle{
  font-weight:bold;
  text-align:center;
  font-size:1.5em;
  padding-bottom:0.5em;
}


/* 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: 680px;
  width: 100%;
  display: flex;
  justify-content: space-around;
  gap: 18px clamp(16px, 3vw, 24px);
  padding: clamp(10px, 3vw, 12px) 16px;
  border-radius: 10px 10px 0 0;
  background-image: url(../img/common/bg_wall.webp);
  background-position: center;
  background-size: cover;
}
.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_eventlist{
  padding:0 8px;
  background-image: url(../img/common/bg_wall.webp);
  background-position: center;
  background-size: cover;
  margin-top:0;
  padding-top:4px;
}

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



/*振り返り*/
.wpd_lookback{
  padding: clamp(40px, 9.75vw, 80px) 16px 0;
}
.wpd_lookback .wpd_h2{
  position: relative;
  display: inline-block;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 16px;
  padding-bottom: 16px;
}
.wpd_lookback .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_lookback .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_lookback h3{
  margin-bottom: 8px;
  text-align: center;
  font-size: 1.875rem;
  font-weight: bold;
  color: #005DAB;
}
.wpd_lookback h3 span{
  background: linear-gradient(transparent 0%, transparent 80%, #E5E500 80%, #E5E500 90%, transparent 90%, transparent 100%);
}
.wpd_lookback h4{
  margin-bottom: 16px;
  text-align: center;
  font-size: 1.25rem;
  color: #707070;
}
.wpd_lookbacklist{
  display: flex;
  justify-content: center;
  gap: 20px;
}
.wpd_lookbacklist > *{
  position: relative;
  width: 100%;
  max-width: 473px;
  aspect-ratio: 16/9;
}
.wpd_backreport a{
  display: block;
}
.wpd_lookbacklabel{
  position: absolute;
  width: 100%;
  left: 0;
  top: 50%;
  padding: 4px 0;
  text-align: center;
  font-size: clamp(1.25rem, 3.65vw, 1.875rem);
  font-weight: bold;
  color: #FFFFFF;
  transform: translateY(-50%);
  animation: grad 7s linear infinite;
  pointer-events: none;
}
@keyframes grad{
  0%{background-color: rgba(255, 0, 0, 0.6);}
  33.33%{background-color: rgba(0, 175, 0, 0.6);}
  66.66%{background-color: rgba(0, 0, 255, 0.6);}
  100%{background-color: rgba(255, 0, 0, 0.6);}
}
.wpd_backbright{
  position: relative;
}
.wpd_backimplink{
  position: absolute;
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  bottom: 8px;
}
.wpd_backimplink a{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 46.51%;
  height: 46px;
  text-align: center;
  font-size: clamp(1rem, 2.43vw, 1.25rem);
  font-weight: bold;
  color: #005DAB;
  border-radius: 23px;
  background: linear-gradient(#fff 0%, #e4f8fc 100%);
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}



/* 画像付き動画 画像 */
.wpd_report{
  margin: 44px 0 64px;
  padding: 0 6px;
}
.wpd_report h3{
  margin-bottom: 24px;
  text-align: center;
  font-size: 1.875rem;
  font-weight: bold;
  color: #005DAB;
}
.wpd_report h3 span{
  background: linear-gradient(transparent 0%, transparent 80%, #E5E500 80%, #E5E500 90%, transparent 90%, transparent 100%);
}

.wpd_reportlist .slick-slide{
  width: clamp(180px, 25vw, 427px);
  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_library{
  padding: clamp(1.5rem, -0.705rem + 8.21vw, 3.5rem) 0;/* 24-56 430-820*/
  padding-bottom:0.5em;
  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-image: url(../img/common/bg_wall.webp);
  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-image: url(../img/common/bg_wall.webp);
}
.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;
}
.wpd_libraryarchivelist{
  display:flex;
  margin:24px auto;
  justify-content:center;
  gap:16px;
}
.wpd_libraryarchivelist li{
  border:solid 1px #707070;
  border-radius:20px;
}
.wpd_libraryarchivelist li a{
  padding:1em;
  font-size:0.75em;
  display:flex;
  justify-content:center;
  align-items:center;
  color:#707070;
  font-weight:bold;
}


/* おいしく食べよう ライブラリー */
.wpd_library.wpd_library_oishiku{background-image: none;}
.wpd_library_oishiku .wpd_h2{margin-bottom: 32px;}
.wpd_library_oishiku .wpd_h2 h2{  font-size: clamp(1rem, -0.0169rem + 3.7838vw, 1.875rem);/* 16-30 430-800 */}
.wpd_library_oishiku .wpd_h2::before{left: -45%;bottom: unset;top: 50%;transform: translateY(-50%) scale(-1);}
.wpd_library_oishiku .wpd_h2::after{right: -45%;bottom: unset;top: 50%;transform: translateY(-50%);}


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


/* バナー */
.wpd_bnr{
  display: flex;
  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_backreport a:hover img{
    opacity: 0.5;
  }
  .wpd_backimplink a:hover{
    background: #D6F8FF;
  }

  .wpd_bnr div a:hover{
    opacity: 0.7;
  }
  .wpd_libraryarchivelist li a:hover{
    text-decoration:underline;
  }
}




@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: 40%;
  }
  .wpd_catchTxt01{
    max-width: 36%;
  }

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

  .wpd_lookbacklist{
    flex-wrap: wrap;
  }

  .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){

  .wpd_importanttitle{
    font-size:1.125em;
  }
  /* 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-image: url(../img/common/bg_wall.webp);
    background-position: center;
    background-size: cover;
  }
  .wpd_childseries{
    padding: 24px 8px 16px;
  }

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

}