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

#adminBox, .acms-admin-box,
.tss_comprehensiveHead,
.tss_footer,
.tss_spbtmnavi{
  position: relative;
  z-index: 10;
}


img{max-width: 100%;}

.ab8_bg{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100dvh;
  background-image: linear-gradient(to right, rgba(55,180,240,0.5) 0%, rgba(253,169,227,0.5) 12.5%, rgba(143,230,64,0.5) 37.5%, rgba(253,157,43,0.5) 50%, rgba(143,230,64,0.5) 62.5%, rgba(253,169,227,0.5) 87.5%, rgba(55,180,240,0.5) 100%);
  background-size: 200% 100%;
  background-position: 100% top;
  animation: grad 20s linear infinite;
}
@keyframes grad{
  0%{background-position: 100% top;}
  100%{background-position: -100% top;}
}
.ab8_bg::before,
.ab8_bg::after{
  content: "";
  position: absolute;
  display: block;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.ab8_bg::before{
  background: url(../img/bg.png) center center no-repeat;
  background-size: contain;
  z-index: 5;
}
.ab8_bg::after{
  background: url(../img/bg_dot.png) center center repeat;
  z-index: 8;
}



.ab8_body{
  position: relative;
  z-index: 100;
  padding: 0 16px 200px;
}
.ab8_body picture{
  display: block;
  margin: auto;
}
.ab8_body picture img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ab8_body h2{
  text-align: center;
  font-size: 1.5em;
  font-weight: bold;
  margin-bottom: 1em;
  color: #476AB5;
  opacity: 0;
  transition: opacity 1s ease;
}
.ab8_body h2 span{
  font-size:1.125rem;
}
.ab8_body h2.inView{opacity: 1;}

.ab8_top{
  margin-bottom: 24px;
  padding-top: 48px;
  text-align: center;
}
.ab8_top p{
  max-width: 788px;
  aspect-ratio: 393/40;
  margin: 0 auto 32px;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.ab8_top.inView p{opacity: 1;}
.ab8_top div picture{
  max-width: 902px;
  aspect-ratio: 451/323;
  opacity: 0;
  transition: opacity 2s ease 1s;
}
.ab8_top.inView picture{opacity: 1;}
.ab8_top div img{
  border-radius: 40px;
  border: 7px solid #FFFFFF;
}
.ab8_logo{
  margin-bottom: 16px;
  margin-top:-16px;
  text-align: center;
  opacity: 0;
  transition: opacity 1s ease;
}
.ab8_logo.inView{opacity: 1;}
.ab8_logo picture{
  width: 100%;
  max-width: 1040px;
}

.ab8_slidevideo{
  display: flex;
  gap: 24px;
  margin-bottom: 16px;
  opacity: 0;
  transition: opacity 1s ease;
  justify-content: center;
}
.ab8_slidevideo.inView{opacity: 1;}
.ab8_slvideo{
  max-width: 516px;
  width:30%;
  padding: 16px 12px;
  border-radius: 8px;
  overflow: hidden;
}
.ab8_slvideo:nth-of-type(3n+1){
  background: linear-gradient(#d1ffcb 0%, #fff 100%);
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}
.ab8_slvideo:nth-of-type(3n+2){
  background: linear-gradient(#ffcbe8 0%, #fff 100%);
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}
.ab8_slvideo:nth-of-type(3n){
  background: linear-gradient(#cbe0ff 0%, #fff 100%);
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}
.ab8_slvideo div{
  aspect-ratio: 16/9;
  margin-bottom: clamp(0.75rem, 0.061rem + 2.56vw, 1rem);/*12-22 430-820*/
  position: relative;
}
.ab8_slvideo div::before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 4px solid #fff;
    width: 40px;
    height: 40px;
    z-index: 30;
    transition: transform .5s;
}
.ab8_slvideo div::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-40%, -50%);
    border-style: solid;
    border-color: transparent transparent transparent #fff;
    border-width: 10px 0 10px 20px;
    z-index: 31;
    transition: opacity .5s;
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.4));
}

.ab8_slvideo div iframe{
  width: 100%;
  height: 100%;
}
.ab8_slvideo p{
  font-size: clamp(0.875rem, 0.599rem + 1.03vw, 1.125rem);/*14-18 430-820*/
  line-height: 1.2;
}
.ab8_slvideo:nth-of-type(3n+1) p{color: #1DA24E;}
.ab8_slvideo:nth-of-type(3n+2) p{color: #BF2E80;}
.ab8_slvideo:nth-of-type(3n) p{color: #2360B9;}


.ab8_archivelink{
  text-align:center;
  padding-bottom:3em;
  opacity: 0;
  transition: opacity 1s ease;
}
.ab8_archivelink.inView{opacity: 1;}

.ab8_archivelink a{
  font-size: 1.5em;
  font-weight: bold;
  margin-bottom: 1em;
  color: #476AB5;
}


.ab8_message{
  max-width: 940px;
  margin: 0 auto;
  text-align: center;
}

.ab8_message picture:nth-of-type(1){
  width: 40.9%;
  aspect-ratio: 192/13;
  margin-bottom: 32px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease, transform 1s ease;
}
.ab8_message picture:nth-of-type(2){
  width: 30%;
  aspect-ratio: 141/13;
  margin-bottom: 32px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease 0.5s, transform 1s ease 0.5s;
}
.ab8_message picture:nth-of-type(3){
  width: 70.6%;
  aspect-ratio: 332/33;
  margin-bottom: 36px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease 1s, transform 1s ease 1s;
}
.ab8_message picture:nth-of-type(4){
  width: 44.62%;
  aspect-ratio: 105/26;
  margin-bottom: 40px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease 1.5s, transform 1s ease 1.5s;
}
.ab8_message picture:nth-of-type(5){
  width: 100%;
  aspect-ratio: 94/3;
  margin-bottom: 40px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease 2s, transform 1s ease 2s;
}
.ab8_message picture:nth-of-type(6){
  width: 27.68%;
  aspect-ratio: 10/1;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease 2.5s, transform 1s ease 2.5s;
}
.ab8_message.inView picture{
  opacity: 1;
  transform: translate(0);
}

.ab8_prtxt{
  text-align:center;
  margin:40px 0;
  font-size:0.875em;
  line-height:1.6;
}

.ab8_prtxt a{
  color: #333;
  margin-top: 0.5em;
  font-size: 1.125em;
  display: inline-block;
  padding: 0.5em;
  border: solid 1px #333;
  text-decoration: none;
  min-width: 30em;
}



.ab8_video{
  max-width: 720px;
  aspect-ratio: 16/9;
  margin: 0 auto;
  opacity: 0;
  transition: opacity 1s ease;
}
.ab8_video iframe{
  width: 100%;
  height: 100%;
}
.ab8_video.inView{opacity: 1;}




.ab8_archive{text-align: center;}
.ab8_archive a{
  display: block;
  max-width: 600px;
  margin: auto;
  text-decoration: none;
}
.ab8_archive a div{
  margin-bottom: 12px;
  background-color: #FFFFFF;
  opacity: 0;
  transition: opacity 1s ease;
}
.ab8_archive.inView a div{opacity: 1;}
.ab8_archive a div img{box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);}
.ab8_archive a p{
  line-height: 1.75;
  text-align: left;
  font-size: clamp(0.875rem, 0.737rem + 0.51vw, 1rem);/*14-16 430-820*/
  font-weight: bold;
  color: #152834;
  opacity: 0;
  transform: translateY(20px);
  transition: all 1s ease;
}
.ab8_archive.inView a p{
  opacity: 1;
  transform: translate(0);
}

.ab8_tellandcon{
  max-width:496px;
  width: 80%;
  margin:0 auto 48px;
}
.ab8_tellandcon img{
  opacity:0;
  transition:opacity 1s ease;
}

.ab8_tellandcon.inView img{
  opacity:1;
}
.ab8_slider{
  display:flex;
  width:100vw;
  margin-left:-16px;
  padding:16px 0;
  background-color:rgb(255 255 255 / 66%);
}
.ab8_slider p{
  padding:0 8px;
}
.ab8_slider p img{
  width:440px;
  height:248px;
}
.ab8_annph{
  max-width:900px;
  margin:148px auto 48px;
}
.ab8_annph img{
  border:solid 8px #FFF;
  border-radius:40px;
}
.ab8_project{
  padding-top:32px;
}
.ab8_project > p{
  color:#E777B3;
  text-align: center;
  font-size:1.125rem;
  font-weight:bold;
  margin-bottom:24px;
  line-height:1.375;
  transition:opacity 1s ease;
  opacity: 0;
}
.ab8_project > p.inView{
  opacity: 1;
}

.ab8_banner{
  max-width:714px;
  width:100%;
  margin:0 auto 48px;
}
.ab8_banner img{
  transition:opacity 1s ease;
  opacity: 0;
}
.ab8_banner.inView img{
  opacity:1;
}

/*-- 原爆特番放送スケジュール --*/
.ab8_bcschedulebox{
  max-width:800px;
  margin:0 auto 124px;
  background-color:rgba(255,255,255,0.70);
  border-radius:10px;
  padding:32px 64px;
  opacity: 0;
}
.ab8_bcschedulebox.inView{
  opacity:1;
}
.ab8_bcschedulebox ul{
  display:flex;
  flex-direction: column;
  gap:32px;
  opacity: 0;
}
.ab8_bcschedulebox ul.inView{
  opacity:1;
}
.ab8_bcschedulebox ul li p{
  font-weight:bold;
  font-size:1.125em;
  line-height:1.375;
}
.ab8_bcschedulebox ul li p:last-of-type{
  font-weight:normal;
  font-size:1rem;
}
.ab8_bcschedulebox ul li p a{
  color:#1DA24E;
  font-weight:normal;
  font-size:1rem;
}

.tss_gotop{width: 64px;}
.tss_footer{background-color: #FFFFFF;}
.tss_footer a{color: #000000;}






@media screen and (min-width:821px){
  .ab8_archive a:hover img{opacity: 0.5;}
  .ab8_archive a:hover p{text-decoration: underline;}
  .ab8_banner img:hover{opacity: 0.5;}
  .ab8_prtxt a:hover{text-decoration:underline;}
  .ab8_slvideo:hover{cursor:pointer;}
  .ab8_archivelink a:hover{text-decoration:none;}
}







@media screen and (max-width:820px){
  .ab8_body{padding-bottom: calc(17.5vw + 120px);}


  .ab8_top{margin-bottom: max(5.85vw, 32px);}
  .ab8_top p{margin-bottom: max(6.83vw, 24px);}

  .ab8_logo{margin-bottom: max(4.7vw, 24px);}

  .ab8_message{margin-bottom: max(14.63vw, 80px);}
  .ab8_message picture:nth-of-type(1){width: 67.85%;}
  .ab8_message picture:nth-of-type(2){width: 49.46%;}
  .ab8_message picture:nth-of-type(3){
    width: 57.32%;
    aspect-ratio: 171/56;
  }
  .ab8_message picture:nth-of-type(4){width: 73.92%;}
  .ab8_message picture:nth-of-type(5){aspect-ratio: 282/35;}
  .ab8_message picture:nth-of-type(6){width: 45.53%;}


  .ab8_video{
    width: 100%;
    margin-bottom:0;
  }
  .ab8_slvideo div::before {
    width: 32px;
    height: 32px;
  }
  .ab8_slvideo div::after {
    border-width: 8px 0 8px 18px;
  }

  .ab8_project h2{
    width:80%;
    margin:24px auto;
  }
  .ab8_annph{
    margin-top: max(17vw, 80px);
  }
  .ab8_slider p img{
    width: 220px;
    height: 124px;
  }
  .ab8_bcschedulebox{padding: 32px;}
  .ab8_prtxt a{font-size:0.875em;}
}
@media screen and (max-width:640px){
  .ab8_slvideo{width:50%;}
  .ab8_slvideo:nth-of-type(3){display:none;}
}
@media screen and (max-width:430px){
  .ab8_top div img{border-radius: 20px;}
}