@charset "utf-8";

/*------------------------- */
/* ヘッダー */
/*------------------------- */

header{
    position: fixed;
    top: 0;
    width: 100%;
    padding: 20px 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 100;
}

header img{
    max-width: 200px;
    margin: 0 auto;
}


/*------------------------- */
/* メインビジュアル */
/*------------------------- */

#mv{
    position: relative;
}

#mv .logo{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 280px;
    width: 100%;
    z-index: 10;
}

#mv .swiper-slide{
    position: relative;
    width: 100%;
    height: 100vh;
}

#mv .swiper-slide::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--main-font-color);
    mix-blend-mode: multiply;
    opacity: 0.3;
    z-index: 1;
}

#mv .swiper-slide img{
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100vh;
    object-fit: cover;
    z-index: 0;
}


/*------------------------- */
/* コンテンツ */
/*------------------------- */

/* --- コンテンツ共通 ---------- */

h2{
    position: relative;
    display: block;
    margin: 0 auto var(--space60) auto;
    font-size: var(--fs32);
    text-align: center;
    z-index: 1;
}

h2::before{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 80px;
    background-image: url(../images/bg_h2.png);
    background-repeat: no-repeat;
    background-size: contain;
    z-index: -1;
}


/* --- #about ---------- */

#about{
    position: relative;
    padding: var(--space120) 0;
    background-image: url(../images/bg_black.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#about::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    max-width: 680px;
    width: 35.41666666666667vw; /*w1920で680*/
    max-height: 420px;
    height: 21.875vw; /*w1920で420*/
    background-image: url(../images/bg_about_top.png);
    background-repeat: no-repeat;
    background-size: contain;
}

#about::after{
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    max-width: 680px;
    width: 35.41666666666667vw; /*w1920で680*/
    max-height: 420px;
    height: 21.875vw; /*w1920で420*/
    background-image: url(../images/bg_about_bottom.png);
    background-repeat: no-repeat;
    background-size: contain;
}

#about .inner{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    justify-content: center;
    gap: var(--space80);
}

#about .text_box{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    align-items: center;
    gap: var(--space120-40);
}

/* キャッチコピー */
#about .copy{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    gap: var(--space30);
}

#about .copy::before{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 250px;
    height: 265px;
    background-image: url(../images/bg_about_copy.svg);
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 0;
}

#about .copy p{
    color: var(--sub-white);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.05em;
    writing-mode: vertical-rl; /* 縦書き（右→左） */
    text-orientation: upright; /* 文字の向きを正立に */
    z-index: 1;
}

#about .copy p:first-child{
    font-size: var(--fs40);
}

#about .copy p:last-child{
    margin-top: 80px;
    font-size: var(--fs60);
}

/* 説明文 */
#about .text{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    gap: var(--space30);
    z-index: 1;
}

#about .text p{
    color: var(--sub-white);
    font-size: var(--fs20);
    writing-mode: vertical-rl; /* 縦書き（右→左） */
    text-orientation: upright; /* 文字の向きを正立に */
}

/* 写真 */
#about .img_box{
    max-width: calc(615 / 1360 * 100%);
    width: 100%;
}


/* --- #info ---------- */

#info{
    position: relative;
    padding: 150px 0;
    background: linear-gradient(60deg, #dbdbdb, #faf9ed 50%, #fff);
}

#info::before{
    content: "";
    position: absolute;
    top: 40px;
    right: 0;
    width: 490px;
    height: 40px;
    background-image: url(../images/bg_info_top.svg);
    background-repeat: no-repeat;
    background-size: cover;
}

#info::after{
    content: "";
    position: absolute;
    bottom: 40px;
    left: 0;
    width: 490px;
    height: 40px;
    background-image: url(../images/bg_info_bottom.svg);
    background-position: right;
    background-repeat: no-repeat;
    background-size: cover;
}


/* お知らせ */
.news_box{
    margin-bottom: 80px;
}
.news{
    display: flex;
    flex-wrap: wrap;
    gap: var(--space10);
}

.news dl{
    display: flex;
    flex-wrap: wrap;
    gap: var(--fs20);
    width: 100%;
    padding: var(--space15) 0;
    border-bottom: 1px solid var(--sub-gold);
}


/* 動画紹介 */
.movie iframe{
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}

/* --- #loop_slide ---------- */

#loop_slide .swiper-wrapper{
    transition-timing-function: linear; /*スライドの動きを等速にする*/
}

/* --- #supporter ---------- */

#supporter{
    padding: 80px 0;
}

#supporter .banner{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 20px;
    padding-left: 0;
    list-style: none;
}

#supporter .banner li{
    width: calc((100% - 60px) / 4);
}



/*------------------------- */
/* フッター */
/*------------------------- */

footer{
    padding: var(--space80) 0 var(--space20);
    background-image: url(../images/bg_black.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

footer img{
    display: block;
    max-width: 200px;
    margin: 0 auto var(--space40) auto;
}

footer p{
    color: var(--sub-white);
    text-align: center;
}

footer .address{
    margin-bottom: var(--space20);
    font-size: var(--fs14);
}

footer .copyright{
    font-size: var(--fs12);
}



@media screen and (max-width: 1280px){
	/* --- 小型PC・タブレット用 --- */

    /*------------------------- */
    /* メインビジュアル */
    /*------------------------- */

    #mv .logo{
        max-width: 200px;
    }

    #mv .swiper-slide{
        position: relative;
        width: 100%;
    }


    /*------------------------- */
    /* コンテンツ */
    /*------------------------- */

    /* --- コンテンツ共通 ---------- */

    h2::before{
        width: 150px;
        height: 60px;
    }


    /* --- #about ---------- */

    #about .copy::before{
        width: 200px;
        height: 212px;
    }


    /* --- #supporter ---------- */

    #supporter .banner li{
        width: calc((100% - 60px) / 4);
    }

}


@media screen and (max-width: 959px){
	/* --- タブレット＆スマホ用 --- */

    /*------------------------- */
    /* ヘッダー */
    /*------------------------- */
    
    header img{
        max-width: 150px;
    }


    /*------------------------- */
    /* コンテンツ */
    /*------------------------- */

    /* --- #about ---------- */

    #about .inner{
        flex-direction: column;
    }

    #about .text_box{
        justify-content: center;
    }

    #about .img_box{
        max-width: 400px;
        width: 100%;
        margin: 0 auto;
    }

    /* --- #movie ---------- */

    .movie{
        max-width: 600px;
        width: 100%;
        margin: 0 auto;
    }

    /* --- #supporter ---------- */

    #supporter .banner li{
        width: calc((100% - 40px) / 3);
    }


    /*------------------------- */
    /* フッター */
    /*------------------------- */

    footer img{
        max-width: 150px;
    }

}


@media screen and (max-width: 479px){
	/* --- スマホ用 --- */

    /* --- #about ---------- */

    #about .text_box{
        flex-direction: column;
    }

    /* --- #info ---------- */
    #info::before{
        width: 280px;
    }

    #info::after{
        width: 280px;
    }


    /* --- #loop_slide ---------- */

    #loop_slide .swiper{
        height: 46.666666666666664vw;
    }

    #loop_slide .swiper-slide img{
        object-fit: cover;
        height: 46.666666666666664vw;
    }

    /* --- #supporter ---------- */

    #supporter .banner li{
        width: calc((100% - 20px) / 2);
    }

}