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


.fw-nav{
    display: 
}

/* 枠：スライダー領域 */
.auto-slider{
  width: 100%;
  overflow: hidden;
  position: relative;
  aspect-ratio: 1920 / 798; /* 必要なら比率は調整してOK */
}

/* 内側ラッパー */
.auto-slider .track{
  position: relative;
  width: 100%;
  /*height: 100%;*/
}

/* 画像：重ねてフェード */
.auto-slider img{
    aspect-ratio: 1920 / 798;


  position: absolute;
  inset: 0;
  width: 100%;
  /*height: 100%;*/
  object-fit: cover;
  display: block;
  opacity: 0;
  animation: fadeSlide 32s linear infinite;
}

/* 4枚用：それぞれ開始タイミングをずらす */
.auto-slider img:nth-child(1){
  animation-delay: 0s;
}
.auto-slider img:nth-child(2){
  animation-delay: 8s;
}
.auto-slider img:nth-child(3){
  animation-delay: 16s;
}
.auto-slider img:nth-child(4){
  animation-delay: 24s;
}

/* フェードイン → 表示 → フェードアウト */
@keyframes fadeSlide{
  0%   { opacity: 0; }
  5%   { opacity: 1; }  /* フェードイン */
  25%  { opacity: 1; }  /* 表示キープ */
  30%  { opacity: 0; }  /* フェードアウト */
  100% { opacity: 0; }
}

/* “動きを減らす”設定の人には止める */
@media (prefers-reduced-motion: reduce){
  .auto-slider img{
    animation: none;
    opacity: 1;    /* 常に表示（重なるので、1枚だけ残すなら別対応） */
  }
}

    /*以下通常css*/
    
    .alegria-box{
        
        .sm-blue{
            background-image: url("../img/top/sm1.png");
            aspect-ratio: 234 / 43;
            width: 12.18%;
            display: block;
            background-size: cover;
            position: relative;
            background-position: center center;
        }
        .sm-yellow{
            background-image: url("../img/top/sm2.png");
            aspect-ratio: 234 / 43;
            width: 12.18%;
            display: block;
            background-size: cover;
            position: relative;
            background-position: center center;
        }
        
        
        .t1{
            background-image: url(../img/top/t1.png);
            aspect-ratio: 1920 / 1561;
            background-size: cover;
        }
        .t2{
            background-image: url("../img/top/t2.png");
            aspect-ratio: 1920 / 418;
            background-size: cover;
        }
        .t3{
            /*seemore blue*/
            background-image: url("../img/top/t3.png");
            aspect-ratio: 1920 / 926;
            background-size: cover;
            .sm-blue{
            top: 30.8vw;
            left: 25.3%;
            }
        }
        
        
        .t4{
            /*seemore blue*/
            background-image: url("../img/top/t4.png");
            aspect-ratio: 1920 / 1010;
            background-size: cover;
            .sm-blue{
            top: 31.2vw;
            left: 62.9%;
            }
        }
        .t5{
            /*seemore yellow*/
            background-image: url("../img/top/t5.png?2");
            aspect-ratio: 1920 / 700;
            background-size: cover;
            .sm-yellow{
            top: 24.2vw;
            left: 16.1%;
            }
        }
        .t6{
            /*seemore yellow*/
            background-image: url("../img/top/t6.png");
            aspect-ratio: 1920 / 696;
            background-size: cover;
            .sm-yellow{
            top: 25.5vw;
            left: 16.1%;
            }
        }
        .t7{
            background-image: url("../img/top/t7.png");
            aspect-ratio: 1920 / 916;
            background-size: cover;
        }
        .p-box{
            padding-top: 17vw;
            display: flex;
            width: 68%;
            margin: auto;
            justify-content: space-between;
        }
        .p-box a {
            width: 31.6%;
            
        }
        .p-box a img{
            width: 100%;
        }
        
        .t8{
            /*access*/
            background-image: url("../img/top/t8.png");
            aspect-ratio: 1920 / 952;
            background-size: cover;
            
        }
        .googlemap-box{
            aspect-ratio: 740 / 530;
            width: 38.541%;
            display: block;
            background-size: contain;
            background-repeat: no-repeat;
            position: relative;
            top: 12.2vw;
            left: 46%;
        }
        

        
        .pm{
            background-image: url("../img/top/pm.png");
            aspect-ratio: 277 / 20;
            width: 14.42%;
            display: block;
            position: relative;
            background-size: contain;
            background-repeat: no-repeat;
        top: 2.7vw;
        left: 69.3%;
        }
        .am{
            background-image: url("../img/top/am.png");
            aspect-ratio: 288 / 20;
            width: 15%;
            display: block;
            position: relative;
            background-size: cover;
        top: 39.3vw;
        left: 16.4%;

        }
#sakura,#fuji,#hagi,#tsubaki {
  scroll-margin-top: 140px; /* ←固定ヘッダー高さ分に調整 */
}
    }