/* スライドショーコンテナのスタイル */
.slideshow_container {
    position: relative;
    width: 100%; /* コンテナの幅を100%に設定 */
    height: 500px; /* コンテナの高さを500pxに設定 */
    overflow: hidden; /* コンテナ外の内容を隠す */
    display: flex; /* フレックスボックスを使用 */
    justify-content: center; /* 水平方向に中央揃え */
    align-items: center; /* 垂直方向に中央揃え */
    margin-bottom: 24px;
    /* 各スライドのスタイル */
    & .slide {
        position: absolute; /* 絶対位置に配置 */
        top: 0;
        left: 0;
        width: 100%; /* スライドの幅を100%に設定 */
        height: 100%; /* スライドの高さを100%に設定 */
        opacity: 0; /* 初期状態では透明 */
        transition: opacity 1s ease-in-out; /* フェード効果の時間とアニメーション */
        & img{
            width: 100%; /* 画像の幅をスライドの幅に合わせる */
            height: 100%; /* 画像の高さをスライドの高さに合わせる */
            object-fit: cover; /* 画像を領域に合わせて表示 */
        }
    }
    /* フェード効果を追加するクラス */
    & .fade {
        opacity: 1; /* フェードイン時の透明度 */
    }
    /* キャッチフレーズのスタイル */
    & .catchphrase {
        text-align: center; /* テキストを中央揃え */
        color: #fff; /* テキストの色を白に設定 */
        z-index: 2; /* 他の要素より前面に表示 */
        background-color: rgba(19, 0, 255, 0.5); /* 背景色に不透明度を追加 */
        padding: 20px; /* 内側の余白を追加 */
        border-radius: 8px; /* 角を丸くする */
        border: 4px solid #1300ff; /* 境界線の色と太さを設定 */
        & :is(h2,p){
            margin: 12px 0; /* 上下に12pxのマージンを追加 */
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* 影の色とぼかし具合 */
        }
    }
}

/* フェードアニメーションを適用する要素の初期スタイル */
.element_to_fade {
    opacity: 0; /* 初期状態では透明 */
    transform: translateY(20px); /* 下から上にふわっと出現 */
    transition: opacity 0.5s ease, transform 0.5s ease; /* フェードインと移動の速度やイージングを調整 */
    transition-delay: 1s; /* アニメーション開始を1秒遅延させる */
}

/* フェードインアニメーションが適用されたときのスタイル */
.element_visible {
    opacity: 1; /* 表示状態にする */
    transform: translateY(0); /* 元の位置に移動 */
    transition-delay: 0s; /* アニメーションの遅延をリセット */
}

/* ボタンのスタイル */
.view_more_button {
    margin-top: var(--spacing_md); /* 上部マージン */
    & a{
        display: inline-block; /* インラインブロック */
        padding: 12px 20px; /* 内側の余白 */
        background-color: var(--main_color); /* 背景色 */
        color: var(--white_color); /* テキストカラー */
        text-decoration: none; /* 下線なし */
        border-radius: 5px; /* 角丸 */
        transition: background-color 0.3s ease; /* 背景色の遷移効果 */
        &:hover{
            background-color: var(--accent_color02); /* ホバー時の背景色 */
            color: var(--black_color); /* ホバー時のテキストカラー */
        }
    }
}

/* スクール案内のボタン変更 */
.view_more_school a:hover {
    background-color: var(--accent_color01); /* ホバー時の背景色 */
    color: var(--white_color);
}

.view_more_contact a{
    background-color: var(--accent_color02); /* 背景色を青に設定 */
    color: var(--black_color);
    &:hover{
        background-color: var(--accent_color01); /* ホバー時の背景色を設定 */
        color: var(--white_color); /* ホバー時の文字色を設定 */
    }
}

/* ソーシャルリンク */
.social_link {
    text-decoration: none; /* 下線なし */
    font-size: 16px; /* フォントサイズ */
    font-weight: bold; /* 太字 */
    padding: 12px 20px; /* 内側の余白 */
    border-radius: 4px; /* 角丸 */
    transition: background-color 0.3s, color 0.3s; /* 背景色とテキストカラーの遷移効果 */
}

/* Instagramリンク */
.instagram_link {
    color: #E1306C; /* テキストカラー */
    background-color: #F7F7F7; /* 背景色 */
    border: 2px solid #E1306C; /* ボーダー */
}

.instagram_link:hover {
    background-color: #E1306C; /* ホバー時の背景色 */
    color: #fff; /* ホバー時のテキストカラー */
}

/* Amebaブログリンク */
.ameblo_link {
    color: #00B900; /* テキストカラー */
    background-color: #F7F7F7; /* 背景色 */
    border: 2px solid #00B900; /* ボーダー */
}

.ameblo_link:hover {
    background-color: #00B900; /* ホバー時の背景色 */
    color: #fff; /* ホバー時のテキストカラー */
}

/* 最大幅768px用のレスポンシブデザイン */
@media screen and (max-width: 768px) {
    .view_more_button{
        & a{
            padding: 8px 16px; /* 内側の余白 */
            font-size: 14px; /* フォントサイズ */
        }
    }
    
     .social_link {
        font-size: 14px; /* フォントサイズ */
    }
}