.button-obround a{
    position: relative;
    border: none;
}
.button-obround a:hover{
    background: var(--brand-subcolor);
    color: var(--color-white);
}
.button-obround a::after{
    content: "";
    width: 16px;
    height: 16px;
    border-top: 2px solid var(--color-white);
    border-right: 2px solid var(--color-white);
    display: inline-block;
    position: absolute;
    top: 45%;
    right: 32px;
    transform: rotate(45deg) translateY(-50%);
    transition: border-color 0.3s ease;
}

.fadeup{
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    position: relative;
    z-index: 100;
}
.fadeup.is-visible{
    opacity: 1;
    transform: translateY(0);
}

.hero{
    margin: 95px 0 220px 0;
    position: relative;

    .hero_movie{
        width: 100%;
        height: auto;
        aspect-ratio: 1280 / 720;
        overflow: hidden;
        display: flex;
        align-items: center;
    }
    video{
        width: 100%;
        height: 100%;
        object-fit: cover
    }
    .hero_info{
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        bottom: -150px;
        left: 50%;
        transform: translateX(-50%);
    }
    .time{
        width: max-content;
        max-width: 800px;
        padding: 15px;
        margin: 0 0 10px 0;
        font-size: 24px;
        color: var(--brand-color);
        border: solid 2px var(--brand-color);
        border-radius: 15px;
        background: var(--color-white);
    }
    .info{
        width: max-content;
        max-width: 500px;
        padding: 25px;
        border: solid 2px var(--brand-color);
        border-radius: 15px;
        background: var(--color-white);
    }
    .hero_info .head{
        margin: 0 0 10px 0;
        font-family: var(--font-zenmaru);
        font-size: 22px;
        font-weight: 600;
        line-height: 1;
        position: relative;
    }
    .hero_info .head::after{
        content: "";
        width: 100%;
        height: 2px;
        background: var(--text-color);
        display: block;
        position: absolute;
        bottom: 1px;
        left: 0;
    }
    .hero_info .content{
        font-size: 24px;
        margin: 0 0 15px 0;
    }
    .hero_info .title{
        color: var(--brand-color);
    }
    .hero_info .fa-clock,
    .hero_info .fa-calendar-xmark,
    .hero_info .fa-circle-exclamation,
    .hero_indo .fa-circle-info{
        margin: 0 5px 0 0;
    }
    .hero_info .text{
        font-weight: 700;
    }
    .button-line a{
        width: fit-content;
        margin: 0 auto;
        padding: 8px 40px 8px 20px;
        font-size: 18px;
        color: var(--color-white);
        line-height: 1;
        border-radius: 50vh;
        background: #4cc764;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        position: relative;
    }
    .button-line span{
        width: 25px;
        margin: 0 10px 0 0;
    }
    .button-line a::after{
        content: "";
        width: 12px;
        height: 12px;
        border-top: 2px solid var(--color-white);
        border-right: 2px solid var(--color-white);
        display: inline-block;
        position: absolute;
        top: 46%;
        right: 20px;
        transform: rotate(45deg) translateY(-50%);
        transition: right 0.3s ease;
    }
    .button-line a:hover::after{
        right: 15px;
    }
}

.topics{
    max-width: 1340px;
    padding: 0 calc((80 / 1440) * 100%);
    margin: 0 auto;

    .topics_title{
        margin: 0 0 50px 0;
        font-family: var(--font-zenanq);
        font-size: 36px;
        color: var(--brand-color);
        font-weight: 700;
        text-align: center;
    }
    .topicsList{
        margin: 0 0 50px 0;
    }
    .topicsItem{
        padding: 19px 0 0 0;
        position: relative;
        z-index: 99;
    }
    .category{
        padding: 10px 15px;
        color: var(--color-white);
        line-height: 1;
        display: inline-block;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 100;
    }
    .category.news{
        background: var(--brand-subcolor);
    }
    .category.event{
        background: var(--brand-color);
    }
    figure{
        width: 100%;
        margin: 0 0 5px 0;
        aspect-ratio: 4 / 3;
        background: var(--color-gray-light);
        overflow: hidden;
    }
    figure img{
        width: 100%;
        height: 100%;
        display: block;
        object-fit: contain;
        transition: transform 0.5s ease;
    }
    .topicsItem a:hover figure img{
        transform: scale(1.15);
    }
    .splide__arrow{
        width: 60px;
        height: 60px;
        background: var(--brand-color);
    }
    .splide__arrow svg {
        fill: var(--color-white);
    }
    .splide__arrow--prev {
        left: -2em;
    }
    .splide__arrow--next {
        right: -2em;
    }
    .splide-topics.topics-two {
        visibility: visible;
    }
}

.concept{
    position: relative;

    .concept_inner{
        margin: -10px 0 0 0;
        background: linear-gradient( 180deg,#2a5a9f 0%, #0d8596 50%, #2a5a9f 100%);
    }
    .concept_top{
        padding: 0 calc((110 / 1440) * 100%);
        margin: 0 0 20px 0;
        position: relative;
    }
    .concept_title{
        margin: 0 0 5px 0;
        font-family: "Red Hat Display", sans-serif;
        font-size: 70px;
        color: rgba(255, 255 ,255 ,0.45);
        font-weight: 800;
        line-height: 1;
        letter-spacing: 0.08em;
    }
    .concept_lead{
        padding: 0 0 0 20px;
        font-family: var(--font-zenmaru);
        font-size: 40px;
        color: var(--color-white);
        font-weight: 700;
    }
    .l-flex{
        display: flex;
        flex-direction: row-reverse;
        align-items: flex-start;
    }
    .concept_text{
        width: 50%;
        padding: 0 0 0 calc((110 / 1440) * 100%);
        margin: 30px 50px 0 0;
        font-size: 20px;
        color: var(--color-white);
        line-height: 2;
        flex-shrink: 0;
        position: relative;
    }
    figure{
        width: 45%;
        max-width: 750px;
    }
    .illust-fish {
        position: absolute;
        top: 20%;
        right: 0;
        display: block;
    }
    .illust-fish img {
        width: clamp(120px, 15vw, 250px);
        height: auto;
    }
    .illust-bubble {
        position: absolute;
        bottom: 20%;
        left: 50px;
        display: block;
    }
    .illust-bubble img {
        width: clamp(40px, 5vw, 250px);
        height: auto;
    }
}

.areas{
    padding: 0 20px;
    margin: 0 0 80px 0;

    .l-flex{
        display: flex;
        align-items: flex-end;
        justify-content: flex-start;
    }
    figure{
        width: 60%;
        max-width: 800px;
        margin: 0 50px 0 0;
        flex-shrink: 0;
    }
    .areas_content{
        padding: 0 40px 0 0;
        margin: 0 0 -80px 0;
    }
    .areas_title{
        margin: 0 0 80px 0;
        font-family: var(--font-zenmaru);
        font-size: 40px;
        color: var(--brand-color);
        font-weight: 700;
    }
    .areas_text{
        margin: 0 0 80px 0;
        font-size: 20px;
        color: var(--brand-color);
        line-height: 2;
    }
    .button-obround a{
        margin-left: 0;
    }
}
.creatures{
    position: relative;

    .creatures_inner{
        padding: 30px 0;
        margin: -10px 0 0 0;
        background: linear-gradient( 180deg,#2a5a9f 0%, #0d8596 50%, #2a5a9f 100%);
    }
    .creatures_title{
        margin: 0 0 60px 0;
        font-family: var(--font-zenanq);
        font-size: 40px;
        color: var(--color-white);
        font-weight: 700;
        text-align: center;
    }
    .creaturesList{
        padding: 0 0 0 40px;
        position: relative;
    }
    figure{
        width: 100%;
        aspect-ratio: 4 / 3;
        background: var(--color-gray-light);
        overflow: hidden;
    }
    figure img{
        width: 100%;
        height: 100%;
        display: block;
        object-fit: contain;
        transition: transform 0.5s ease;
    }
    .creaturesItem a:hover figure img{
        transform: scale(1.15);
    }
    .name{
        min-height: 80px;
        padding: 10px 15px;
        font-family: var(--font-zenmaru);
        font-size: 20px;
        font-weight: 700;
        background: var(--color-white);
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    .zone{
        width: max-content;
        padding: 5px 15px;
        margin: auto 0 0 auto;
        font-size: 12px;
        color: var(--color-white);
        font-weight: 400;
        line-height: 1;
        border-radius: 50vh;
        background: var(--brand-color);
        display: block;
    }
    .pagination {
        margin: 30px 0;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
    }
    .pagination button {
        width: 30px;
        height: 30px;
        padding: 0;
        border: none;
        border-radius: 50%;
        background-color: var(--color-white);
        cursor: pointer;
        transition: background-color .3s;
    }
    .pagination button.is-active {
        background-color: var(--brand-subcolor);
    }
    .splide__arrow{
        width: 50px;
        height: 50px;
        background: var(--text-color);
        opacity: 1;
        top: calc(100% + 15px);
        transform: translateY(0);
    }
    .splide__arrow svg {
        display: none;
    }
    .splide__arrow::before {
        content: "";
        display: block;
        width: 0;
        height: 0;
    }
    .splide__arrow--next{
        padding: 0 0 0 5px;
        right: 2em;
    }
    .splide__arrow--next::before {
        border-top: 12px solid transparent;
        border-bottom: 12px solid transparent;
        border-left: 18px solid var(--color-white);
    }
    .splide__arrow--prev{
        padding: 0 5px 0 0;
        left: 2em;
    }
    .splide__arrow--prev::before {
        border-top: 12px solid transparent;
        border-bottom: 12px solid transparent;
        border-right: 18px solid var(--color-white);
    }
    .button-obround{
        margin-bottom: 0;
    }
    .button-obround a{
        margin-bottom: 0;
        color: var(--text-color);
        /* border: solid 2px var(--text-color); */
        background: var(--color-white);
    }
    .button-obround a:hover{
        color: var(--color-white);
        background: var(--brand-subcolor);
    }
    .button-obround a::after{
        border-color: var(--text-color);
        transition: border-color 0.3s ease;
    }
    .button-obround a:hover::after{
        border-color: var(--color-white);
    }
    .illust-jellyfish {
        position: absolute;
        top: 20%;
        left: 0;
        display: block;
    }
    .illust-jellyfish img {
        width: clamp(140px, 15vw, 200px);
        height: auto;
    }
    .illust-bubble {
        position: absolute;
        top: 25%;
        right: 30px;
        display: block;
    }
    .illust-bubble img {
        width: clamp(50px, 5vw, 250px);
        height: auto;
    }
}

.link{
    margin: 0 0 200px 0;

    .link_list{
        display: grid;
        grid-template-columns: repeat(3, 330px);
        justify-content: center;
        gap: 80px;
    }
    .link_item a{
        width: 100%;
        height: auto;
        aspect-ratio: 330 / 300;
        border: solid 2px var(--brand-color);
        background: var(--color-white);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: relative;
        transition: border-color 0.3s ease, background 0.3s ease;
    }
    .link_item a::before{
        content: '';
        width: 35px;
        height: 35px;
        border: solid 2px var(--brand-color);
        border-radius: 50vh;
        background: var(--brand-color);
        display: block;
        position: absolute;
        bottom: 15px;
        right: 15px;
    }
    .link_item a:hover{
        border-color: var(--brand-subcolor);
        background: var(--brand-subcolor);
    }
    .link_item a::after{
        content: "";
        width: 12px;
        height: 12px;
        border-top: 2px solid var(--color-white);
        border-right: 2px solid var(--color-white);
        display: inline-block;
        position: absolute;
        bottom: 22px;
        right: 32px;
        transform: rotate(45deg) translateY(-50%);
    }
    .icon{
        height: 50px;
        margin: 0 0 10px 0;
        display: block;
    }
    .icon img{
        width: auto;
        height: 100%;
    }
    .text{
        font-family: var(--font-zenmaru);
        font-size: 20px;
        color: var(--brand-color);
        font-weight: 600;
        transition: color 0.3s ease;
    }
    .link_item a:hover .text{
        color: var(--color-white);
    }
}
.access{
    .access_title{
        width: max-content;
        margin: 0 0 30px 0;
        font-family: var(--font-zenanq);
        font-size: 36px;
        color: var(--brand-color);
        border-bottom: 3px dashed var(--brand-color);
    }
    .content{
        margin: 0 50px 0 0;
        flex-shrink: 0;
    }
    .access_text{
        margin: 0 0 30px 0;
        font-size: 20px;
    }
    .button-obround a{
        margin-left: 0;
    }
    .l-flex{
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
    }
    .map{
        width: 100%;
        max-width: 750px;
        aspect-ratio: 750 / 385;
        border-radius: 5px;
        overflow: hidden;
    }
    .map iframe{
        width: 100%;
        height: 100%;
        border: 0;
        display: block;
    }
}

/* wave */
::selection {
    background-color: salmon;
    color: white;
}
.parallax > use {
    animation: move-forever 12s linear infinite;
}
.parallax > use:nth-child(1) {
    animation-delay: -2s;
}
.parallax > use:nth-child(2) {
    animation-delay: -2s;
    animation-duration: 30s;
}
.parallax > use:nth-child(3) {
    animation-delay: -4s;
    animation-duration: 20s;
}
@keyframes move-forever {
    0% {
        transform: translate(-90px, 0%);
    }

    100% {
        transform: translate(85px, 0%);
    }
}
.wave-reverse .editorial {
    transform: scaleY(-1);
}


@media screen and (max-width: 1280px) {
    .hero{
        margin-top: 89px;
    }
    .concept{
        padding-top: 80px;

        .concept_title{
            font-size: 60px;
        }
        .concept_lead{
            font-size: 34px;
        }
        .concept_text{
            font-size: 18px;
        }
        .l-flex{
            position: static;
        }
    }
    .areas{
        .areas_content{
            padding-right: 0px;
        }
        .areas_title{
            font-size: 34px;
            margin-bottom:30px;
        }
        .areas_text{
            font-size: 18px;
        }
    }
    .link{
        .link_list{
            grid-template-columns: repeat(3, 250px);
            gap: 50px;
        }
    }
}


@media screen and (max-width: 1024px) {
    .hero{
        margin-top: 74px;
        .hero_info{
            bottom: -180px;
        }
        .time{
            font-size: 20px;
        }
        .info .content{
            font-size: 20px;
        }
        .button-line a{
            font-size: 12px;
        }
        .button-line span{
            width: 20px;
        }
    }
    .concept{
        .concept_inner{
            padding: 30px 0;
        }
        .concept_title{
            font-size: 52px;
        }
        .concept_lead{
            font-size: 24px;
            padding-left: 0;
            margin: 0 0 30px 0;
        }
        .concept_text{
            padding-left: 0;
        }
        .l-flex{
            padding: 0 20px;
            flex-direction: column;
            align-items: center;
        }
        figure{
            width: 85%;
            max-width: 700px;
        }
        .concept_text{
            width: 85%;
            max-width: 700px;
            margin-right: 0;
        }
        .illust-bubble {
            left: 10px;
        }
    }
    .areas{
        .areas_content{
            padding-right: 0;
            margin-bottom: 0;
        }
        .areas_text{
            margin-bottom: 30px;
        }
        .l-flex{
            flex-direction: column-reverse;
            align-items: center;

        }
        figure{
            width: 100%;
            max-width: 700px;
            margin-right: 0;
            margin-bottom: 50px;
        }
        .button-obround a{
            margin-left: auto;
        }
    }
    .creatures{
        .pagination button{
            width: 20px;
            height: 20px;
        }
        .splide__arrow{
            width: 40px;
            height: 40px;
        }
    }
    .link{
        margin-bottom: 100px;

        .link_list{
            grid-template-columns: repeat(3, min(30%, 300px));
            gap: 20px;
        }
        .icon{
            height: 30px;
        }
        .text{
            font-size: 18px;
        }
        .link_item a::before {
            width: 25px;
            height: 25px;
            bottom: 10px;
            right: 10px;
        }
        .link_item a::after{
            width: 8px;
            height: 8px;
            bottom: 16px;
            right: 22px;
        }
    }
    .access{
        .l-flex{
            flex-direction: column;
        }
        .content{
            width: 100%;
            margin-right: 0;
            margin-bottom: 20px;
        }
        .map{
            max-width: none;
        }
    }
}

@media screen and (max-width: 640px){
    .hero{
        .hero_info{
            max-width: 90%;
        }
        .time,
        .info{
            max-width: 100%;
        }
        .info{
            padding: 15px;
        }
        .info .head{
            font-size: 16px;
        }
        .time,
        .info .content{
            font-size: 14px;
        }
    }
    .topics{
        .topics_title{
            font-size: 28px;
        }
        .splide__arrow{
            width: 50px;
            height: 50px;
        }
        .splide__arrow--prev{
            left: -1.2em;
        }
        .splide__arrow--next{
            right: -1.2em;
        }
    }
    .concept{
        .concept_title{
            font-size: 38px;
        }
        .concept_lead{
            font-size: 16px;
        }
        .concept_text{
            font-size: 14px;
        }
    }
    .areas{
        .areas_title{
            font-size: 26px;
            text-align: center;
        }
    }
    .creatures{
        .creatures_title{
            font-size: 28px;
            margin-bottom: 30px;
        }
        .name{
            font-size: 16px;
        }
        .pagination{
            gap: 20px;
        }
        .splide__arrow{
            width: 30px;
            height: 30px;
            top: calc(100% + 25px);
        }
        .splide__arrow--next::before {
            border-top: 8px solid transparent;
            border-bottom: 8px solid transparent;
            border-left: 12px solid var(--color-white);
        }
        .splide__arrow--prev::before {
            border-top: 8px solid transparent;
            border-bottom: 8px solid transparent;
            border-right: 12px solid var(--color-white);
        }
        .illust-jellyfish {
            top: 10%;
        }
        .illust-bubble {
            top: 15%;
        }
    }
    .link{
        .link_list{
            grid-template-columns: repeat(1, min(70%, 400px));
            gap: 20px;
        }
        .icon{
            height: 50px;
        }
    }
    .access{
        .access_title{
            font-size: 28px;
        }
        .access_text{
            font-size: 16px;
        }
    }
}