@charset "utf-8";

/*===============================================
画面の横幅が1281px以上（パソコン用）
===============================================*/
@media print,screen and (min-width: 1281px){
.img-frame{
   position: relative;
   width: 100%;
   height: 500px;
   overflow: hidden;
   margin: 0 0 50px 0;
}
.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('/common/slide/slide2026-01.avif');
   animation: slide-animation-01 24s infinite;
}
.img-01.cover::after{
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, .3);
}
.img-02{
   background-image: url('/common/slide/slide2026-02.avif');
   background-position: center;
   animation: slide-animation-02 24s infinite;
}
.img-03{
   background-image: url('/common/slide/slide2026-03.avif');
   animation: slide-animation-03 24s infinite;
}
.img-03.cover::after{
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, .3);
}
@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.15);}
  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: 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-02{
   font-size: 32px;
   line-height: 1.5;
   text-align: center;
   color: #fff;
   font-family: 'Noto Serif JP', serif;
   font-weight:500;
   position: absolute;
   top: 40%;
   left: 50%;
   transform: translate(-50% , -50%);
}
.msg-01, .msg-03{
   z-index:10;
}
}

/*===============================================
画面の横幅が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{
   position: absolute;
   top:0;
   left:0;
   width: 100%;
   height: 100%;
   background-size: cover;
   background-repeat: no-repeat;
}
.img-01{
   background-image: url('/common/slide/slide2026-01.avif');
   animation: slide-animation-01 24s infinite;
}
.img-01.cover::after{
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, .3);
}
.img-02{
   background-image: url('/common/slide/slide2026-02.avif');
   background-position: center;
   animation: slide-animation-02 24s infinite;
}
.img-03{
   background-image: url('/common/slide/slide2026-03.avif');
   animation: slide-animation-03 24s infinite;
}
.img-03.cover::after{
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, .3);
}
@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.2);}
  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: 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-02{
   font-size: 32px;
   line-height: 1.5;
   text-align: center;
   color: #fff;
   font-family: 'Noto Serif JP', serif;
   font-weight:500;
   position: absolute;
   top: 40%;
   left: 50%;
   transform: translate(-50% , -50%);
}
.msg-01, .msg-03{
   z-index:10;
}
}


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