@charset "UTF-8";
.img-frame{
   position: relative;
  max-width: 100%;
   height: 300px;
   overflow: hidden;
   margin: 0 auto;
   border-radius: 30px;
}
@media screen and (max-width: 767px){
.img-frame{
   width: 100%;
   height: 200px;
}}
.img-01, .img-02, .img-03{
   position: absolute;
   top:0;
   left:0;
   width: 100%;
   height: 100%;
   background-size: cover;
   background-repeat: no-repeat;
}
.img-01{
   background-image: url('/assets/img/campus_life/festival/2026/festival-img-01.jpg');
   animation: slide-animation-01 24s infinite;
}
.img-02{
   background-image: url('/assets/img/campus_life/festival/2026/festival-img-02.jpg');
   animation: slide-animation-02 24s infinite;
}
.img-03{
   background-image: url('/assets/img/campus_life/festival/2026/festival-img-03.jpg');
   animation: slide-animation-03 24s infinite;
}
@keyframes slide-animation-01 {
    0% {opacity: 1; transform: scale(1.0);}
  30% {opacity: 1;}
  40% {opacity: 0; transform: scale(1.15);}
  90% {opacity: 0}
100% {opacity: 1; transform: scale(1.0);}
}
@keyframes slide-animation-02 {
    0% {opacity: 0;}
  30% {opacity: 0; transform: scale(1.1);}
  40% {opacity: 1;}
  60% {opacity: 1;}
  70% {opacity: 0; transform: scale(1.0);}
100% {opacity: 0;}
}
@keyframes slide-animation-03 {
    0% {opacity: 0;}
  60% {opacity: 0;  transform: scale(1.0);}
  70% {opacity: 1;}
  90% {opacity: 1;}
100% {opacity: 0; transform: scale(1.1);}
}
.msg{
   font-size: 20px;
   color: #fff;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50% , -50%);
}
.msg-01, .msg-02{
    text-shadow: 2px 2px 3px #000, -1px -1px 3px #000;
}
.img-03.cover::after{
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(252, 249, 249, 0.7);
}
.msg-03{
   z-index:1;
}
.present{
    width: 60%;
    border: 3px orange solid;
    border-radius: 30px;
    padding: 10px 40px 30px;
    margin: 20px auto;
    box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.3);
}
.present h3{
  color: orange;
}
.pre-ttl{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}
.present img{
      width: 120px;
}
@media screen and (max-width: 767px){
.present {
    width: 90%;
    padding: 10px 20px 20px;
}
.present img {
    width: 60px;
}
}
.txtnews-list__item .title span{
    font-size: 1.3rem;
}