@media screen and (max-width: 768px) {
    p {
        font-size: 4vw;
    }
    /* header section */
    header {
        padding: 3%;
    }
    header img {
        width: 40px;
    }
    header h6 {
        margin-left: 5%;
        font-size: 3vw;
    }
    /* fv section */
    .fv {
        padding: 10% 5%;
    }
    .pattern-1 {
        width: 50%;
    }
    .pattern-2 {
        width: 45%;
        top: 17%;
        left: -10%;
    }
    .pattern-3 {
        width: 30%;
        top: 21%;
        left: 75%;
    }
    .fv-text {
        padding: 30% 0;
    }
    .fv-text h3 {
        font-size: 6vw;
    }
    .fv-text h5 {
        font-size: 3vw;
    }
    .fv-content {
        padding: 10% 0;
        display: block;
    }
    .speaker {
        width: 100%;
        margin: 5% 0;
    }
    .speaker img {
        width: 100%;
    }
    .title img {
        width: 8%;
    }
    .speaker .title h5,
    .title h5 {
        font-size: 6vw;
    }
    .speaker h3 {
        font-size: 8vw;
    }
    .speaker h3 span {
        font-size: 4vw;
    }
    .speaker-text {
        width: 100%;
    }
    .speaker-text h3 {
        font-size: 6vw;
    }
    /* intro section */
    .intro {
        padding: 20% 5%;
    }
    .event-detail {
        display: block;
    }
    .concept,
    .guide {
        width: 100%;
    }
    .guide-box h5 {
        font-size: 5vw;
    }
    .guide-box p {
        font-size: 4vw;
        line-height: 1.5;
    }
    /* access section */
    .access {
        padding: 20% 5%;
    }
    .access-content {
        display: block;
    }
    .schedule {
        width: 100%;
        padding: 5% 0;
    }
    .access-title img {
        width: 7%;
    }
    .access-title h4 {
        font-size: 6vw;
    }
    .schedule h5 {
        font-size: 5vw;
    }
    .area {
        width: 100%;
        padding: 0 0 5% 0;
    }
    .area-content {
        display: block;
    }
    .area .access-title img {
        width: 6%;
    }
    .area-text {
        margin: 0;
    }
    .area-text h5 {
        font-size: 6vw;
        line-height: normal;
    }
    .area-text h6 {
        font-size: 5vw;
        line-height: normal;
    }
    .info-map iframe {
        height: 30vh;
    }
    /* footer section */
    footer {
        padding: 20% 5%;
    }
    .footer-content p {
        margin: 5%;
    }
    .section__inner {
        width: 100%;
        display: block;
    }
}

@media (min-width: 1200px) {
    .section__inner {
        width: var(--content-width);
        padding: 5% 0;
    }
    .fv-content {
        display: flex;
        justify-content: space-between;
    }
}

@media screen and (min-width: 768px) and (max-width: 1200px) {
    .speaker,
    .speaker-text {
        width: 100%;
    }
    .speaker-img {
        margin: 0 auto;
    }
}