@charset "utf-8";
/* CSS Document */
#adminBox, .acms-admin-box,
.tss_comprehensiveHead,
.tss_footer{
  position: relative;
  z-index: 100;
}

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

.kaitokid_body{
  background-color: #8FD6E9;
  line-height: 1.5;
}

.kaitokid_bg{
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  text-align: center;
  z-index: 1;
}
.kaitokid_bg img{transition: all 1s linear;}
.kaitokid_bg.op img{opacity: 0.3;}


.kaitokid_main{
  position: relative;
  z-index: 10;
  padding: 48px 16px 96px;
}
.kaitokid_program{
  max-width: 360px;
  margin: auto;
  aspect-ratio: 19 / 3;
  text-align: center;
}
.kaitokid_txtfns{
  text-align: center;
  padding: 0.25em 1.5em;
  color: #000;
  background-color: #d1f5ffc7;
  width: fit-content;
  margin: 1em auto 0.5em;
  font-size: 0.875rem;
  border-radius: 100vw;
  box-shadow: 0px 0px 15px -5px #777777;
}
.kaitokid_main h1{
  max-width: 800px;
  aspect-ratio: 50/17;
  margin: 0 auto;
  text-align: center;
}
.kaitokid_main h1 img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.kaitokid_date{
  position: relative;
  max-width: 524px;
  aspect-ratio: 524 / 92;
  margin: auto;
  text-align: center;
  z-index: 1;
}


.kaitokid_actor{
  position: relative;
  margin-top: -8px;
}
.kaitokid_humanbox{
  max-width: 858px;
  aspect-ratio: 143/131;
  margin: auto;
  text-align: center;
}
.kaitokid_namebox{
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  left: calc(50% - 250px);
  top: 300px;
  width: 229px;
  height: 82px;
}
.kaitokid_namebox p:first-of-type{margin: auto;}
.kaitokid_name{
  position: absolute;
  right: calc(50% - 272px);
  top: 254px;
}
/*コンテナクエリ用（コンテナクエリは子要素にしか適応できない コンテナ自体にコンテナクエリでスタイルを当てたい場合は全体を囲む）*/
.kaitokid_catchwrap{
  container-name: topcatch;
  container-type: inline-size;
}
/**/
.kaitokid_catch{
  position: relative;
  max-width: 858px;
  height: 350px;
  margin: -400px auto 50px;
  padding: 40px 0 40px;
  background: #005f46;
  border: 4px solid #e1be65;
  box-shadow: 0px 0px 10px rgb(39 61 129 / 38%);
  z-index: 5;
  filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.38));
}
.kaitokid_catch h2{
  margin-bottom: 24px;
  text-align: center;
}
.kaitokid_catch p{
  max-width: 760px;
  margin: auto;
  line-height: 1.65;
  color: #FFFFFF;
}



.kaitokid_contentslist{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 28px;
  max-width: 1484px;
  margin: 0 auto 56px;
  container-name: contentslist;
  container-type: inline-size;
}
.kaitokid_contents{
  position: relative;
  width: 474px;
  height: 474px;
}
.kaitokid_contentsbox{
  border: 4px solid #e1be65;
  box-shadow: 0px 0px 10px rgb(39 61 129 / 38%);
  filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.38));
  position:relative;
}
.kaitokid_photo{
  aspect-ratio: 119/67;
}
.kaitokid_photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px 12px 0 0;
}
.kaitokid_txt{
  position: relative;
  height: 206px;
  background-color: #005F46;
  border-radius:0 0 12px 12px;
}
.kaitokid_txt h3{
  position: relative;
  top: -12px;
  text-align: center;
}
.kaitokid_txt p{
  max-width: 420px;
  line-height: 1.6;
  margin: -4px auto 0;
  color: #FFFFFF;
}
.kaitokid_frame{
  position: absolute;
  width: 490px;
  aspect-ratio: 245/243;
  left: -6px;
  top: -6px;
}



.kaitokid_bottomtxt{
  max-width: 864px;
  aspect-ratio: 216 / 25;
  margin: auto;
}

/*-- 枠の飾り --*/
.kaitokid_icort,
.kaitokid_icorb,
.kaitokid_icolt,
.kaitokid_icolb{
  position:absolute;
  z-index:10;
}

.kaitokid_icolt{
  top: -12px;
  left: -10px;
}
.kaitokid_icort{
  top:-12px;
  right:-14px;
}
.kaitokid_icorb{
  bottom:-12px;
  right:-14px;
}
.kaitokid_icolb{
  bottom:-12px;
  left:-10px;
}


.tss_footer{
  padding: 8px 0;
  background-color: #005F46;
}


/*--20250519追加--*/
.kaitokid_cmvideo{
  max-width:640px;
  width:100%;
  margin:0 auto 48px;
  aspect-ratio:16/9;
}

.kaitokid_cmvideo iframe{
  width:100%;
  height:100%;
}



/*キャッチの黒板サイズが自身のmaxより小さくなった時（その時のウインドウサイズは953）*/
@container topcatch (width < 904px){
  .kaitokid_catch{
    height: 39.58vw;
    margin: -37.77vw auto 80px;
    padding: 4.55vw 4vw 4.19vw;
  }
  .kaitokid_catch h2{margin-bottom: 2.51vw;}
  .kaitokid_catch p{font-size: 1.75vw;}
}
@media screen and (max-width:800px){
  .kaitokid_main{
    padding-top: 16px;
    padding-bottom: calc(17.5vw + 120px);
  }
  .kaitokid_main h1{width: 90.6%;}
  .kaitokid_program{width: 50%;}
  .kaitokid_date{width: 60%;}

  .kaitokid_catch{
    height: auto;
    width: 100%;
    padding:4.55vw 4vw 4.49vw;
  }
  .kaitokid_catch p{font-size: 0.875em;}
  .kaitokid_actor{margin-top: -1vw;}
  .kaitokid_namebox{
    top: 35vw;
    left: calc(50% - 31.25vw);
    width: 28.75vw;
    height: 10.25vw;
  }
  .kaitokid_namebox p:first-of-type{width: 15.75vw;}
  .kaitokid_namebox p:nth-of-type(2){width: 18.1vw;}
  .kaitokid_namebox p:nth-of-type(3){width: 10.5vw;}
  .kaitokid_name{
    width: 16vw;
    right: calc(50% - 34vw);
    top: 31.75vw;
  }

}

@media screen and (max-width:640px){
  .kaitokid_catch{
    max-width: 640px;
    height: auto;
    margin: -37vw auto 32px;
    padding: 4.55vw 5.77vw 4.19vw;
  }
  .kaitokid_catch h2 img{width: 86.5%;}
  .kaitokid_bottomtxt{
    max-width: 326px;
    aspect-ratio: 163 / 112;
  }
}

@media screen and (max-width:640px) and (min-width:473px){
  .kaitokid_catch h2 img {
      width:74.5%;
  }
}



@media screen and (max-width:472px){
  /*width: 85.5%;*/
  .kaitokid_catch h2{margin-bottom: 2.6vw;}
  .kaitokid_catch h2 img {
    width: 85.5%;
  }
}

@media screen and (max-width:375px){
  .kaitokid_contents{
    height:auto;
  }
  .kaitokid_txt {
    height: auto;
    padding: 0 3vw 1.5em;
}
  .kaitokid_txt p {
    font-size: clamp(0.688rem, -1.552rem + 8.33vw, 1rem);
  }
}

/*各テーマの枠サイズが小さくなる時（その時のウインドウサイズは521）*/
@container contentslist (width < 490px){
  .kaitokid_contents{
    width: 91.36vw;
    height:auto;
  }
  .kaitokid_frame{
    width: calc(100% + 3.4vw);
    left: -1.5vw;
    top: -1.2vw;
  }
  .kaitokid_txt{
    height:auto;
    padding: 0 3vw 1.5em;
  }
  .kaitokid_txt h3{top: -3.4vw;}
  .kaitokid_txt h3 img{height: 6.4vw;}
  .kaitokid_txt p{font-size: clamp(0.875rem, -1.552rem + 8.33vw, 1rem);}/*11-16 430-490*/
}