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

.tss_body {
  color: #202145;
  background-image: linear-gradient(180deg, rgba(89, 174, 225, 1), rgba(156, 223, 237, 1) 60%, rgba(35, 102, 247, 0));
}


/* 背景fixedイラスト */
.tka_bg-wrap{
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9;
  opacity: 0.5;
}


/* メインビュー */
.tka_mv-wrap {
  position: relative;
  z-index: 99;
}
.tka_logo{
  max-width: 1400px;
  width: 95%;
  margin-inline: auto;
  text-align: center;
}
/* tka_mv-contents */
.tka_mv-contents{
  max-width: 1368px;
  margin-inline: auto;
  display: grid;
  gap: 0 24px;
  grid-template-columns: repeat(3, auto);
  grid-template-rows: repeat(2, auto);
  margin-top: clamp(-230px, calc(-76px + (-154 * ((100vw - 820px) / 642))), -76px);/* -76 -230 820-1462 */
}
.tka_mv-flx{
  display: flex;
  justify-content: center;
  align-items: baseline;
}
.tka_details-wrap{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-top: clamp(2rem, -3.882rem + 11.76vw, 7rem);/*32-112 800-1480*/
}
.tka_img-tatsukawa{
  max-width: clamp(170px,26vw,350px);
}
.tka_img-performers{
  max-width: 374px;
  max-width: clamp(162px,26vw,374px);
}
.tka_detailsTxt{
  max-width: 676px;
  margin-inline: auto;
}
.tka_detailsPerformers{
  display: flex;
  justify-content: center;
  line-height: 1.875;
  margin-top: 16px;
  font-size: clamp(0.875rem, 0.6683rem + 0.7692vw, 1rem);/* 14-16 430-690 */
  font-weight: bold;
}


/* ゲスト */
.tka_guest-wrap{
  grid-column: 1/-1;
  max-width: 800px;
  margin: -68px auto 0;
}


/* 画像リスト */
.tka_img-wrap{
  position: relative;
  z-index: 99;
  max-width: 1450px;
  margin-inline: auto;
  margin-top: 32px;
  padding: 0 16px;
}

.tka_img-list{
  display: grid;
  grid-template-columns: repeat(3, minmax(252px, 450px));
  justify-content: space-between;
  gap: 24px 16px;
}
/* コンテンツが5の場合
.tka_img-list{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px 16px;
}
.tka_img-list li{
  flex: 0 1 calc((100% - (16px * 2)) / 3); 
  min-width: 430px;
  max-width: 450px;  
}*/

.tka_img-list li figure{
  position: relative;
}
.tka_img-list li figure::before{
  position: absolute;
  display: inline-block;
  content: '';
  bottom: 0;
  left: 0;
  width: 12.44%;
  aspect-ratio: 7/6;
  background-image: url(../img/deco_ball.png);
  background-position: center top;
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
}
.tka_img-list li figure::after{
  position: absolute;
  display: inline-block;
  content: '';
  bottom: 0;
  right: 0;
  width: 11.55%;
  aspect-ratio: 13/12;
  background-image: url(../img/deco_ballbat.png);
  background-position: center top;
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
}
.tka_img-list li img{
  width: 100%;
}
.tka_img-list li figcaption{
  padding: 10px 37px;
  font-size: clamp(0.875em,1.5vw,1.25em);
  font-weight: bold;
  color: #FFFFFF;
  text-align: center;
  line-height: calc(26/20);
  background-color: #1E2638;
}
.tka_img-txt{
  margin-top: 16px;
  line-height: calc(26/16);
}


/* バナー */
.tka_bnr-wrap{
  position: relative;
  max-width: 732px;
  margin-inline: auto;
  margin-top: 24px;
  padding: 0 16px;
  z-index: 99;
}


/* tka_il-wrap */
.tka_il-wrap{
  position: relative;
  max-width: 200px;
  margin-inline: auto;
  margin-bottom: -20px;
  padding-top: 112px;
  z-index: 1001;
}



@media screen and (min-width: 801px){
  .tka_presentbnr a img:hover{
    opacity:0.5;
  }
}


@media screen and (max-width: 1200px){
  .tka_guest-wrap{margin-top: calc(clamp(0rem, -8.5rem + 17vw, 4.25rem) * -1);}
}
@media screen and (max-width: 820px){
  /* メインビュー */ 
  .tka_mv-contents{
    margin-top: -26px;
    grid-template-columns: repeat(2, auto);
    grid-template-rows: repeat(4, auto);
  }
  .tka_details-wrap{
    display: contents;
  }
  .tka_img-tatsukawa{
    grid-column: 1/2;
    grid-row: 2/3;
    align-content: end;
    margin-inline-start: auto;
  }
  .tka_img-performers{
    grid-column: 2/-1;
    grid-row: 2/3;
  }
  .tka_detailsTxt{
    grid-column: 1/-1;
    margin-top: -12px;
    padding: 0 16px 12px;
  }
  .tka_detailsPerformers{
    order: 4;
    grid-column: 1/-1;
  }
  .tka_guest-wrap{
    order: 3;
    padding: 0 16px;
  }

/*コンテンツが5の場合

.tka_img-list li{
      flex: 1 1 100%;
      max-width: 100%; 
    }

*/

  /* 画像リスト */
  .tka_img-list{
    grid-template-columns: repeat(2, auto);
  }
  .tka_img-list li figcaption{
   font-size:clamp(0.875rem, 0.4615rem + 1.5385vw, 1.25rem);/*  14-20 430-820 */
  }
.tka_img-txt {font-size: 0.875em;}
}


@media screen and (max-width: 800px){
  .tss_body{padding-bottom: calc(17.5vw + 120px);}
  .tka_logo{
    width: 100%;
  }
  .tka_logo img{
    max-width: none;
    width: 136%;
    margin-left: -18%;
  }
  .tka_il-wrap{
    display: none;
  }
}


@media screen and (max-width: 690px){
  .tka_mv-contents{
    margin-top: 0;
  }

}

@media screen and (max-width: 480px){
  .tka_img-list{
    grid-template-columns: repeat(1, auto);
  }
}