/* styles.css */
/* スライドショーのコンテナ */
.slideshow-container {
    position: relative;
    z-index: 1; /* 他の要素よりも前面に表示 */

    /* 必要に応じて高さやオーバーフローを調整 */
    height: 300px; /* スライドショーの高さを適切な値に設定 */
    overflow: hidden; /* コンテンツがはみ出ないように制御 */
}

.slide {
    max-height: 300px;
    overflow: hidden;
    position: absolute;
    opacity: 0; /* 初期値を0に設定し、非表示にする */
    transition: opacity 4s; /* フェードアニメーションの時間を1.5秒に設定 */
}

.slide.active {
    opacity: 1; /* アクティブなスライドを表示し、フェードイン */
}
.fade {
    animation-name: fadeOut;
    animation-duration: 3s; /* 画像がじわっと消える時間を調整 */
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}


.slide img {
    width: 100%; /* 画像をスライドに合わせて拡大縮小 */
    height: auto; /* アスペクト比を維持 */
}



/* styles.css */.workslideh2{
color: #fff;

}
/* styles.css */
/* styles.css */
.text {
    position: absolute;
    top: 50%; /* 上端を中央に配置 */
    left: 50%; /* 左端を中央に配置 */
    transform: translate(-50%, -50%); /* センター配置のための変換 */

    background: rgba(0, 0, 0, 0.7); /* 背景を半透明の黒に変更 */
    padding: 10px;
    text-align: center; /* テキストを中央揃えに */
    color: #fff;
    animation-name: fadeText; /* アニメーションを適用 */
    animation-duration: 2s; /* アニメーション時間を2秒に設定 */
}

.text h2 {
    font-size: 24px; /* タイトルのフォントサイズを調整 */
}
/* スマホ画面サイズのスタイル */

@media (max-width: 767px) { /* 例として最大幅767pxの場合を指定 */

    .text h2 {
        font-size: 18px; /* スマホ画面サイズのフォントサイズ */
    }

    /* 他に調整が必要なスタイルがあればここに追加します */
}
.text a {
    display: block;
    margin-top: 10px;
    text-decoration: none;
    color: #fff;
    border: 2px solid #fff; /* リンクを四角で囲む */
    padding: 10px; /* ボーダーからテキストまでの余白を追加 */
    border-radius: 5px; /* リンクの角を丸くする */
    animation-name: fadeText; /* アニメーションを適用 */
    animation-duration: 2s; /* アニメーション時間を2秒に設定 */
    background-color: #1d041580;
}

.slide .text a.worklink1:hover {
    color: #ffff00; /* マウスオーバー時のリンクの色を変更 */
    /* 他のスタイルを追加する場合にはここに記述 */
}

.slide .text a.worklink2:hover {
    color: #ffff00; /* マウスオーバー時のリンクの色を変更 */
}

.slide .text a.worklink3:hover {
    color: #ffff00; /* マウスオーバー時のリンクの色を変更 */
}

.slide .text a.worklink4:hover {
    color: #ffff00; /* マウスオーバー時のリンクの色を変更 */
}

.slide .text a.worklink5:hover {
    color: #ffff00; /* マウスオーバー時のリンクの色を変更 */
}

.slide .text a.worklink6:hover {
    color: #ffff00; /* マウスオーバー時のリンクの色を変更 */
}

.slide .text a.worklink7:hover {
    color: #ffff00; /* マウスオーバー時のリンクの色を変更 */
}

.slide .text a.worklink8:hover {
    color: #ffff00; /* マウスオーバー時のリンクの色を変更 */
}

/* テキストをフェードさせるアニメーション */
@keyframes fadeText {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}