@charset "UTF-8";
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/*ズームアップslider*/
.slide {
    display: flex;
    overflow: hidden;
    margin-top: 0;
    width: 100%;
    z-index: 990;
    }
    
.slide ul {
    list-style-type: none;
    margin-bottom: 120px;
    padding: 0;
    aspect-ratio: 2.3 / 1; /* 画像のアスペクト比に合わせる */
    width: 100%;
    }
    
.slide li {
    position: relative;
    margin-right: 0px;
    /*z-index: 100;*/
    }
    
.slide li .active {
    opacity: 1;
    z-index: 998;
    }
    
.slide li a {
    opacity: 0;
    transform: scale(1);
    transition: opacity 1s ease-in-out;
    position: absolute;
    }
.slide li.active a {
    opacity: 1;
    display: block;
    }
    
.slide li img {
    width: 100%;
    object-fit: cover;
    transform: scale(1);
    transition: transform 6s ease-in-out;
    position: relative;
    }
    
.slide li a.active img {
    transform: scale(1.05);
    /*display: block;*//*ここに使うと文字が切り替わるときに位置がずれる。*/
    }
    
.text-overlay {
    position: absolute;
    bottom: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 24px;
    text-align: center; /* テキストのセンター配置 */
    max-width: 90%; /*5/15aiの指示で追記 テキストの最大幅を設定してはみ出しを防止 */
    white-space: nowrap; /* 必要に応じてテキストの改行を防止 */
    letter-spacing: 0.4em;
    line-height: 2.3em;
    font-family: serif;
    font-weight: bold;
    z-index: 990;
    }
    @media screen and (min-width:1601px){

        .text-overlay {
            bottom: 50%;
           font-size: 27px;
       }
   }
    @media screen and (min-width:1401px){

        .text-overlay {
            bottom: 44%;
           font-size: 27px;
       }
   }


@media screen and (max-width:800px){

     .text-overlay {
        font-size: 20px;
    }
}

@media screen and (max-width:700px){
    .text-overlay {
        font-size: 18px;
    }

}

@media screen and (max-width:600px){

    .text-overlay {
        font-size: 14px;
    }

}

@media screen and (max-width:450px){

    .text-overlay {
        font-size: 12px;
    }

}

@media screen and (max-width:400px){

.text-overlay {
    font-size: 9px;
}

}

@media screen and (max-width:300px){

.text-overlay {
    font-size: 7px;
}
}
/*-------head------*/

	

/*-------body-------*/