@charset "UTF-8";
body{
    position: relative;
}
/* hero */
.hero{
    width: 100%;
    margin: 0 0 150px 0;
    aspect-ratio: 1440 / 400;
    background: url(../images/top/bg_hero.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;

    .hero_bnr{
        width: calc((800 / 1440) * 100%);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        bottom: 0;
        right: 0;

        img{
            width: 100%;
        }

        a{
            opacity: 1;
            transition: opacity cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
        }

        a:hover{
            opacity: 0.8;
        }
    }

    .hero_link{
        position: absolute;
        bottom: -50px;
        right: 0;

        a{
            padding: 30px 50px;
            font-size: clamp(20px, 2.5vw, 46px);;
            line-height: 1.2;
            font-weight: 700;
            /* text-align: center; */
            color: var(--sub-color2);
            background: rgba(42, 42, 42, 0.8);
            display: inline-block;
            position: relative;
        }
        a:before,
        a:after{
            content: "";
            height: 2px;
            background: var(--color-gray-light);
            display: block;
            position: absolute;
            transition: right cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
        }
        a:before{
            width: 120px;
            bottom: 18px;
            right: 25px;
        }
        a:after{
            width: 20px;
            bottom: 24px;
            right: 22px;
            rotate: 40deg;
        }
        a:hover:before{
            right: 15px;
        }
        a:hover:after{
            right: 13px;
        }

        small{
            font-size: clamp(18px, 1.8vw, 28px);;
            color: var(--color-white);
            font-weight: 400;
        }
    }
}

/* info */
.info{
    margin-bottom: 100px;

    .title-en{
        text-align: center;
        display: block;
    }

    .info_dlist{
        border-top: solid 2px var(--color-gray-light);
        display: flex;
        align-items: stretch;
        justify-content: flex-start;
        flex-wrap: wrap;

        dt,
        .text{
            border-bottom: solid 2px var(--color-gray-light);
        }

        dt{
            width: 210px;
            padding: 10px 0;
        }

        .date{
            font-size: 12px;
        }

        .label{
            width: 120px;
            padding: 5px 0 3px;
            margin: 0 0 0 10px;
            font-size: 14px;
            color: var(--color-white);
            text-align: center;
            line-height: 1;
            border-radius: 50vh;
            background: var(--color-gray-dark);
            display: inline-block;
        }

        .text{
            width: calc(100% - 210px);
            padding: 10px 50px 10px 0;
            font-size: 14px;
            color: var(--text-color);

            a{
                color: var(--text-color);
                display: block;
                position: relative;
            }

            a::after{
                content: "\f054";
                width: 13px;
                font-family: Font Awesome\ 6 Free;
                color: var(--color-gray-dark);
                font-weight: bold;
                display: inline-block;
                position: absolute;
                top: 50%;
                right: -30px;
                transform: translateY(-50%);
            }
        }
    }
}

.bnr{
    width: 90%;
    max-width: 650px;
    margin: 0 auto 100px;
}

/* about */
.about{
    padding-top: 94px;
    margin-top: -94px;
    margin-bottom: 150px;

    .about_lead{
        margin: 0 0 30px 0;
        font-size: 30px;
        font-weight: 700;
        text-align: center;
        line-height: 1.2;
    }

    .l-flex{
        margin: 0 0 50px 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .about_figure{
        width: 40%;
        min-width: 240px;
        margin: 0 30px 0 0;
        flex-shrink: 0;
    }

    .about_text{
        width: 50%;
        max-width: 380px;
    }

    .about_nav{
        .nav_list{
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .nav_item{
            width: 45%;
            margin: 0 20px;
            border-bottom: solid 1px var(--color-gray-dark);
            position: relative;
        }
        .nav_item a{
            padding: 10px;
            font-size: 18px;
            color: var(--text-color);
            font-weight: 700;
            display: block;
            position: relative;
        }
        .nav_item span{
            font-size: 14px;
            font-weight: 400;
            position: absolute;
            right: 10px;
            bottom: -30px;
        }
        .nav_item a::before{
            content: '';
            width: 35px;
            height: 35px;
            margin: auto;
            border: solid 1px var(--color-gray-dark);
            border-radius: 50%;
            background: transparent;
            position: absolute;
            top: 0;
            bottom: 0;
            right: 10px;
            transition: background cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.3s;
        }
        .nav_item a::after{
            content: '';
            width: 8px;
            height: 8px;
            margin: auto;
            border: 0;
            border-top: solid 1px var(--color-gray-dark);
            border-right: solid 1px var(--color-gray-dark);
            transform: rotate(45deg);
            position: absolute;
            top: 0;
            right: 25px;
            bottom: 0;
            transition: border-color cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.3s;
        }
        .nav_item a:hover::before{
            border-color: var(--sub-color);
            background: var(--sub-color);
        }
        .nav_item a:hover::after{
            border-color: var(--color-white);
        }

        .nav_item.nolink{
            padding: 10px;
            font-size: 18px;
            color: var(--text-color);
            font-weight: 700;
            display: block;
            position: relative;

            small{
                margin: 0 0 0 20px;
                font-weight: 500;
                color: var(--color-red-light);
            }
        }
        .nav_item.nolink::before{
            content: '';
            width: 35px;
            height: 35px;
            margin: auto;
            border: solid 1px var(--color-gray-dark);
            border-radius: 50%;
            background: transparent;
            position: absolute;
            top: 0;
            bottom: 0;
            right: 10px;
            transition: background cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.3s;
        }
        .nav_item.nolink::after{
            content: '';
            width: 8px;
            height: 8px;
            margin: auto;
            border: 0;
            border-top: solid 1px var(--color-gray-dark);
            border-right: solid 1px var(--color-gray-dark);
            transform: rotate(45deg);
            position: absolute;
            top: 0;
            right: 25px;
            bottom: 0;
            transition: border-color cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.3s;
        }
    }
}
/* join */
.join_wrap{
    padding-top: 94px;
    margin-top: -94px;
}
.join{
    padding: 50px 0;
    background: var(--color-gray-light);

    .title-en{
        text-align: center;
        display: block;
    }

    .join_list{
        display: flex;
        align-items: flex-start;
        justify-content: center;
    }
    .join_item{
        position: relative;
    }
    .join_item:not(:last-child)::after{
        content: "";
        width: 8px;
        height: 100%;
        position: absolute;
        top: 0px;
        right: -5px;
        background-image: radial-gradient(ellipse at center,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 25%,rgba(236,236,236,1) 25%,rgba(236,236,236,1) 100%) ;
        background-position: center 0;
        background-repeat: repeat-y;
        background-size: 10px 10px;
        z-index: 100;
    }
    .cardlink{
        margin: 0 30px;
        display: block;

        .img{
            margin: 0 0 10px 0;
            position: relative;
            overflow: hidden;
        }
        .img img{
            transition: transform cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.8s;
        }
        .img span{
            width: 50px;
            height: 50px;
            color: var(--text-color);
            font-size: 20px;
            text-align: center;
            line-height: 50px;
            border-top-left-radius: 8px;
            background: var(--color-gray-light);
            position: absolute;
            bottom: 0;
            right: 0;
        }
        .tag{
            font-size: 18px;
            color: var(--text-color);
            font-weight: 700;
        }
    }
    .cardlink:hover img{
        transform: scale(1.15);
    }
}

/* link */
.link{
    .title-line-bottom::before{
        background: var(--sub-color);
    }
    .link_list{
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    .link_item{
        width: calc((100% / 6) - 20px);
        margin: 10px;
        background: var(--color-white);

        a{
            padding: 10%;
            display: block;
            opacity: 1;
            transition: opacity cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
        }

        a:hover{
            opacity: 0.7;
        }

        img{
            width: 100%;
            aspect-ratio: 2/1;
            object-fit: contain;
        }
    }
}

.title-en{
    font-size: 46px;
}

@media screen and (max-width: 1024px){
    .title-en{
        font-size: 36px;
    }
    .hero{
        aspect-ratio: 1024 / 400;
        
        .hero_link{
            a{
                padding: 20px 40px;
            }
            a:before{
                width: 100px;
                bottom: 10px;
            }
            a:after{
                width: 16px;
                bottom: 15px;
            }
        }
    }
    .about,
    .join_wrap{
        padding-top: 50px;
        margin-top: -50px;
    }
    .about{
        .about_nav{
            .nav_item{
                margin-left: 15px;
                margin-right: 15px;
            }
        }
    }
    .join{
        .cardlink{
            margin-left: 10px;
            margin-right: 10px;

            .img span{
                width: 35px;
                height: 35px;
                font-size: 16px;
                line-height: 35px;
                border-top-left-radius: 6px;
            }

            .tag{
                font-size: 14px;
            }
        }
        .join_item:not(:last-child)::after{
            background-size: 8.5px 8.5px;
        }
    }
    
    .link{
        .link_item{
            width: calc((100% / 4) - 20px);
        }
    }
}


@media screen and (max-width: 600px){
    .title-en{
        font-size: 30px;
    }
    .hero{
        margin-bottom: 100px;
        aspect-ratio: 357 / 200;

        .hero_link{
            width: 90%;
            left: 50%;
            transform: translateX(-50%);
            bottom: -25px;

            a{
                width: 100%;
                padding: 15px 10px;
                font-size: 22px;
                text-align: center;
            }
            a:before{
                width: 50px;
                bottom: 8px;
                right: 18px;
            }
            a:after{
                width: 12px;
                bottom: 12px;
                right: 16px;
            }

            small{
                font-size: 16px;
            }
        }
    }
    .info{
        width: 100%;

        .info_dlist{
            flex-direction: column;

            dt,
            .text{
                width: 100%;
            }

            dt{
                padding-bottom: 0;
                border-bottom: none;
            }
        }
    }
    
    .about{
        margin-bottom: 100px;

        .about_lead{
            margin-top: 15px;
            font-size: 24px;
        }

        .l-flex{
            flex-direction: column;
        }

        .about_figure{
            margin-right: 0;
            margin-bottom: 20px;
        }

        .about_figure,
        .about_text{
            width: 100%;
        }

        .about_text{
            max-width: inherit;
        }

        .about_nav{
            .nav_list{
                flex-direction: column;
            }
            .nav_item{
                width: 100%;
                margin-left: 0;
                margin-right: 0;
            }
            .nav_item:not(:last-child){
                margin-bottom: 50px;
            }
        }
    }
    .join{
        padding-top: 30px;
        padding-bottom: 10px;
        margin-bottom: 100px;

        .join_list{
            width: 80%;
            margin: 0 auto;
            flex-direction: column;
        }
        .join_item{
            margin-left: 0;
            margin-right: 0;
        }
        .join_item:not(:last-child){
            margin-bottom: 30px;
        }
        .join_item:not(:last-child)::after{
            width: 100%;
            height: 8px;
            top: calc(100% - 8px);
            right: 0;
            background-repeat: repeat-x;
        }
        .cardlink{
            padding: 0 0 20px 0;
            margin-left: 0;
            margin-right: 0;

            .img span{
                width: 50px;
                height: 50px;
                line-height: 50px;
            }

            .tag{
                font-size: 16px;
            }
        }
    }
    .link{
        .link_item{
            width: calc((100% / 3) - 20px);
        }
    }
}