@charset "utf-8";

/*===============================================
画面の横幅が1920px以上（パソコン用）
===============================================*/
@media print,screen and (min-width: 1920px){
.img-frame{
   position: relative;
   width: 100%;
   height: 600px;
   overflow: hidden;
   margin: 0 0 50px 0;
}
}

/*===============================================
画面の横幅が1600px～1919px（パソコン用）
===============================================*/
@media print,screen and (1600px <= width <= 1919px){
.img-frame{
   position: relative;
   width: 100%;
   height: 500px;
   overflow: hidden;
   margin: 0 0 50px 0;
}
}

/*===============================================
画面の横幅が1280px～1599px（パソコン用）
===============================================*/
@media print,screen and (1280px <= width <= 1599px){
.img-frame{
   position: relative;
   width: 100%;
   height: 400px;
   overflow: hidden;
   margin: 0 0 50px 0;
}
}

/*===============================================
画面の横幅が1024px～1279px（タブレット用）
===============================================*/
@media print,screen and (1024px <= width <= 1279px){
.img-frame{
   position: relative;
   width: 100%;
   height: 320px;
   overflow: hidden;
   margin: 0 0 50px 0;
}
}

/*===============================================
画面の横幅が1024px以上（パソコン、タブレット用）
===============================================*/
@media print,screen and (min-width: 1024px){
.img-01{
   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/kinenshi/70th_anniversary.avif');
   animation: slide-animation-01 20s infinite;
}
@keyframes slide-animation-01 {
  0% {opacity: 0; transform: scale(1.0);}
 10% {opacity: 1; transform: scale(1.0);}
 80% {opacity: 1; transform: scale(1.15);}
100% {opacity: 0; transform: scale(1.15);}
}
}


/*===============================================
画面の横幅が1023pxまで（スマホ用）
===============================================*/
@media print,screen and (767px <= width <= 1023px){
.img-frame{
   position: relative;
   width: 100%;
   height: 230px;
   overflow: hidden;
   margin: 10px 0 20px 0;
}
}
@media print,screen and (max-width: 766px){
.img-frame{
   position: relative;
   width: 100%;
   height: 200px;
   overflow: hidden;
   margin: 0;
}
}
@media print,screen and (max-width: 1023px){
.img-01{
   position: absolute;
   top:0;
   left:0;
   width: 100%;
   height: 100%;
   background-size: 100%;
   background-repeat: no-repeat;
   background-position: center;
}
.img-01{
   background-image: url('/common/slide/kinenshi/70th_anniversary.avif');
   animation: slide-animation-01 30s infinite;
}
@keyframes slide-animation-01 {
  0% {opacity: 0; transform: scale(1.0);}
 10% {opacity: 1; transform: scale(1.0);}
 80% {opacity: 1; transform: scale(1.15);}
100% {opacity: 0; transform: scale(1.15);}
}
}