@media (max-width: 768px) {
    body {
        text-align: left;
    }

    .main {
        padding: 0;
    }

    .header {
        padding: 4px 0;
        margin-bottom: 20px;
    }

    .header p {
        letter-spacing: 0.1rem;
    }

    .snap_area {
        padding: 8px;
    }

    .snap_main {
        overflow-y: hidden;
    }

    .flex_container {

    }


    .mv_left_container {
        justify-content: flex-start;
        margin-right: 0;
    }

    .catchcopy {
        margin: 40px 0;
    }

    .catchcopy h2 {
        font-size: 24px;
        letter-spacing: 0.2rem;
    }

    .mv_title {
        font-size: 44px;
        letter-spacing: 0.1rem;
    }

    .mv_title span {
        display: block;
        position: static;
        margin-top: 16px;

        font-size: 9px;
        letter-spacing: 0.2rem;
    }

    .mv-img {
        width: 100vh;
        padding: 0;
        top: auto;
        bottom: -15vh;
    }

    .topic {
        width: 50vw;
    }

    .topic h3 {
        padding: 2px 2px 2px 6px;
        font-size: 12px;
        margin-bottom: 8px;
    }

    .topic li {
        font-size: 10px;
        letter-spacing: 0.2rem;
        text-shadow: 0px 0px 6px #fff;
        margin-bottom: 8px;
    }

    .mv_right_container {
        transform: translateY(-4vw);
    }

    .date_02 {
        letter-spacing: 0.1rem;
    }

    .mv_right_bottom {
        position: absolute;
        right: 0;
        bottom: -32px;
        letter-spacing: 0.2rem;
        width: 128px;
        height: 128px;

        display: flex;
        justify-content: center; /* 横方向の中央 */
        align-items: center;     /* 縦方向の中央 */
    }

    .mv_right_bottom p {
        text-align: center;
        font-size: 14px;
    }

    .slideshow::after {
        background: linear-gradient(90deg, rgb(255, 255, 255, 0.7), rgb(255, 255, 255, 0.2), rgb(255, 255, 255, 0.7));
    }

    .catchcopy p {
        font-size: 12px;
        letter-spacing: 0.25rem;
    }

    .snap_details {
        height: auto;
    }

    .side_left {
        margin-right: 16px;
    }

    .side_left p {
        margin: 0;
    }

    .side_right {
        display: none;
    }

    /* この要素内のみでスクロールさせる */
    .detail_contents {
        display: block;
        overflow-y: auto;
        scroll-snap-type: y mandatory;

        scrollbar-width: none; /*Firefox対応のスクロールバー非表示コード*/
        -ms-overflow-style: none;/*Internet Explore対応のスクロールバー非表示コード*/

        margin-bottom: 0;
        padding-bottom: 0;
    }

    .sp_page {
        display: block;
        position: relative;
        height: 100%;
        scroll-snap-align: start;
    }

    .sp_pageNum {
        display: block;
        position: absolute;
        right: 0;
        bottom:8px;
    }

    .deg90 {
        display: none;
    }

    .details_img {
        width: 100%;
    }

    .details_textArea {
        text-align: justify;
    }

    .details {
        padding: 8px;
    }

    .googleMap {
        width: 100%;
        max-width: 100%;
    }

    .footer {
        height:10vh;
        font-size: 10px;
    }
}

@media (max-width: 400px) {
    .header p {
        letter-spacing: 0;
    }

    .date_01 {
        font-size: 64px;
    }

    .teacher {
        font-size: 14px;
    }

    .mv_title span {
        letter-spacing: 0.1rem;
    }

    .catchcopy {
        margin: 28px 0;
    }

    .catchcopy h2 {
        font-size: 20px;
        letter-spacing: 0.2rem;
    }

    .catchcopy p {
        font-size: 14px;
    }

    .details_textArea {
        margin-bottom: 16px;
    }

    .details_title h2 {
        font-size: 20px;
        letter-spacing: 0.1rem;
        margin-bottom: 16px;
    }
}