@charset "utf-8";

/*===============================================
画面の横幅が1281px以上（パソコン用）
===============================================*/

/*===============================================
画面の横幅が1024px以上（パソコン用）
===============================================*/
@media print,screen and (min-width: 1024px){
.img-frame{
   position: relative;
   width: 100%;
   height: 500px;
   overflow: hidden;
   margin: 0 0 50px 0;
}
.img-01, .img-02, .img-03, .img-04{
   position: absolute;
   top:0;
   left:0;
   width: 100%;
   height: 100%;
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
}
.img-01{
   background-image: url('/common/slide/slide_01.avif');
   animation: slide-animation-01 24s infinite;
}
.img-02{
   background-image: url('/common/slide/slide_02.avif');
   animation: slide-animation-02 24s infinite;
}
.img-03{
   background-image: url('/common/slide/slide_03.avif');
   animation: slide-animation-03 24s infinite;
}
.img-04{
   background-image: url('/common/slide/slide_04.avif');
   animation: slide-animation-04 24s infinite;
}
@keyframes slide-animation-01 {
  0% {opacity: 0; transform: scale(1.0);}
  5% {opacity: 1;}
 25% {opacity: 1;}
 50% {opacity: 0; transform: scale(1.15);}
 75% {opacity: 0}
100% {opacity: 0; transform: scale(1.0);}
}
@keyframes slide-animation-02 {
  0% {opacity: 0; transform: scale(1.0);}
 22% {opacity: 0;}
 26% {opacity: 1;}
 50% {opacity: 1; transform: scale(1.15);}
 75% {opacity: 0}
100% {opacity: 0; transform: scale(1.0);}
}
@keyframes slide-animation-03 {
  0% {opacity: 0; transform: scale(1.0);}
 45% {opacity: 0;}
 50% {opacity: 1; transform: scale(1.15);}
 75% {opacity: 1}
100% {opacity: 0; transform: scale(1.0);}
}
@keyframes slide-animation-04 {
  0% {opacity: 0; transform: scale(1.0);}
 25% {opacity: 0;}
 70% {opacity: 0; transform: scale(1.15);}
 75% {opacity: 1}
 96% {opacity: 1}
100% {opacity: 0; transform: scale(1.0);}
}
.msg{
   font-size: 32px;
   line-height: 1.5;
   text-align: center;
   color: #fff;
   font-family: 'Noto Serif JP', serif;
   font-weight:500;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50% , -50%);
}
.msg-01{z-index:10;}
}


/*===============================================
画面の横幅が1023pxまで（スマホ用）
===============================================*/
@media screen and (max-width:1023px){
.img-frame{
   display: none;
}
}