@charset 'UTF-8';

/* ==========================================================================
   top css
========================================================================== */

/* ==========================================================================
   header
========================================================================== */

.homeContainer
{
    grid-template-rows: 90px 1fr auto;
}

.homeContainer .mainHeader
{
    height: 90px;
}

.isScrolled
{
    grid-template-rows: 70px 1fr auto;
}

.isScrolled .mainHeader
{
    height: 70px;
}

/* ==========================================================================
   mvスライド
========================================================================== */

.homePage .swiperTopMV
{
    position: relative;

    overflow: hidden;
}

.homePage .swiperTopMV::before,
.homePage .swiperTopMV::after
{
    position: absolute;
    z-index: 2;
    top: 0;

    width: 100vw;
    height: 100%;

    content: '';
    transition: opacity .3s ease;

    background: rgba(75,75,75,.85);
}

.homePage .swiperTopMV::before
{
    left: 50%;

    margin-left: 639px;
}

.homePage .swiperTopMV::after
{
    right: 50%;

    margin-right: 639px;
}

.homePage .swiperTopMV .swiper
{
    z-index: 1;

    overflow: visible;

    max-width: 1280px;
    margin: 0 auto;
}

.homePage .swiperTopMV .swiper-button-next,
.homePage .swiperTopMV .swiper-button-prev
{
    z-index: 3;

    width: 25px;
    height: 41px;
    margin: 0;

    translate: 0 -50%;
}

.homePage .swiperTopMV .swiper-button-next::after,
.homePage .swiperTopMV .swiper-button-prev::after
{
    display: none;
}

.homePage .swiperTopMV .swiper-button-next
{
    right: 50%;

    margin-right: -700px;

    background: url('../img/slide_arrow.svg') no-repeat center center / contain;

    rotate: 180deg;
}

.homePage .swiperTopMV .swiper-button-prev
{
    left: 50%;

    margin-left: -700px;

    background: url('../img/slide_arrow.svg') no-repeat center center / contain;
}

@media (max-width: 1430px)
{
    .homePage .swiperTopMV .swiper-button-next
    {
        right: 10px;

        margin-right: 0;
    }
    .homePage .swiperTopMV .swiper-button-prev
    {
        left: 10px;

        margin-left: 0;
    }
}

/* ==========================================================================
   top navi
========================================================================== */

.homePage .topNav
{
    height: 40px;
    margin-top: 24px;

    transition: all .05s linear;

    background: #f7f7f7;
}

.homePage .topNavFix
{
    position: fixed;
    z-index: 1000;
    top: 70px;
    left: 0;

    width: 100%;
    min-width: 960px;
    margin-top: 0;
}

/* ==========================================================================
   secTitle
========================================================================== */

.homePage .secTitle
{
    font-family: 'Exo', serif;
    font-size: 5.8rem;
    font-weight: 300;
    font-style: normal;
    line-height: 1;

    font-optical-sizing: auto;
}

/* ==========================================================================
   events
========================================================================== */

.homePage .events
{
    width: min(calc(100% - 40px), 1168px);
    margin: 130px auto 0;
}

.homePage .events > header
{
    display: grid;

    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr;
    gap: 30px;
}

.homePage .events > header .secTitle
{
    grid-column: 1;
    grid-row: 1;
}

.homePage .events > header p
{
    font-size: 1.6rem;
    line-height: 1.75;

    padding-left: 34px;

    grid-column: 1;
    grid-row: 2;
}

.homePage .events > header ul
{
    font-size: 1.8rem;

    display: flex;

    padding-left: 28px;

    border-left: 1px solid var(--color);

    grid-column: 2;
    grid-row: 1 / 3;
    justify-self: end;
    flex-flow: column;
    justify-content: center;
}

.homePage .events > header ul li + li
{
    margin-top: 18px;
}

.homePage .events .row
{
    display: grid;

    margin-top: 99px;

    grid-template-columns: repeat(2, 1fr);
    gap: 48px;
}

.homePage .events .eventBox a
{
    display: flex;

    flex-flow: column;
    gap: 8px;
}

.homePage .events .eventBox .tm
{
    order: 1;
}

.homePage .events .eventBox h2
{
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.75;

    order: 2;
}

/* ==========================================================================
   About
========================================================================== */

.homePage .about
{
    margin-top: 188px;
    padding: 127px 0 160px;

    background: var(--color);
}

.homePage .about .inner
{
    width: min(calc(100% - 40px), 1168px);
    margin: 0 auto;
}

.homePage .about .secTitle
{
    margin-bottom: 30px;

    color: #fff;
}

.homePage .about .toptext
{
    font-size: 1.6rem;
    line-height: 1.75;

    max-width: 760px;
    margin-left: 35px;

    color: #cecece;
}

.homePage .about .linkRow
{
    display: grid;

    margin-top: 60px;

    grid-template-columns: repeat(3, 1fr);
    gap: 60px 54px;
}

.homePage .about .linkBox a
{
    display: block;

    min-height: 134px;
    padding: 20px 33px 27px;

    background: url('../img/about_box_bk.svg') no-repeat center center / cover;
}

.homePage .about .linkBox a:hover
{
    opacity: .7;
}

.homePage .about .linkBox h2
{
    font-size: 2.3rem;
    font-weight: 500;
    line-height: 1;

    display: flex;

    margin-bottom: 15px;

    align-items: center;
}

.homePage .about .linkBox h2::after
{
    width: 16px;
    height: 14px;
    margin-left: 8px;

    content: '';

    background: url('../img/about_arrow.svg') no-repeat center center / contain;

    flex-shrink: 0;
}

.homePage .about .linkBox .sponsors
{
    display: inline-flex;

    width: 3em;

    justify-content: space-between;
}

.homePage .about .linkBox p
{
    font-size: 1.4rem;
    line-height: 1.5;
}

@media (max-width: 1200px)
{
    .homePage .about .linkBox p br
    {
        display: none;
    }
}

/* ==========================================================================
   Contact
========================================================================== */

.homePage .contact
{
    padding: 127px 0 280px;

    color: #cecece;
    background: #1d2022;
}

.homePage .contact .inner
{
    width: min(calc(100% - 40px), 1168px);
    margin: 0 auto;
}

.homePage .contact .secTitle
{
    margin-bottom: 26px;

    color: #fff;
}

.homePage .contact .text
{
    font-size: 1.6rem;
    line-height: 2;

    max-width: 760px;
    margin-left: 35px;

    color: #cecece;
}

.homePage .contact .text + .text
{
    margin-top: 1.5em;
}

@media only screen and (max-width: 767px)
{
    /* ==========================================================================
   top css
========================================================================== */
    .homeContainer
    {
        grid-template-rows: 14.49275vw 1fr auto;
    }
    /* ==========================================================================
   header
========================================================================== */
    .homeContainer .mainHeader
    {
        height: 14.49275vw;
    }
    /* ==========================================================================
   mvスライド
========================================================================== */
    .homePage .swiperTopMV::before,
    .homePage .swiperTopMV::after
    {
        display: none;
    }
    .homePage .swiperTopMV .swiper
    {
        max-width: none;
    }
    .homePage .swiperTopMV .swiper-button-next,
    .homePage .swiperTopMV .swiper-button-prev
    {
        display: none;
    }

    /* ==========================================================================
   top navi
========================================================================== */
    .homePage .topNav
    {
        display: none;
    }
    /* ==========================================================================
   secTitle
========================================================================== */
    .homePage .secTitle
    {
        font-size: 3.5rem;
    }
    /* ==========================================================================
   events
========================================================================== */
    .homePage .events
    {
        width: 92.02899vw;
        margin: 15.94203vw auto 0;
    }
    .homePage .events > header
    {
        display: block;

        width: 89.85507vw;
        margin: 0 auto;
    }
    .homePage .events > header p
    {
        font-size: 1.4rem;

        margin-top: 4.83092vw;
        padding-left: 7.24638vw;
    }
    .homePage .events > header ul
    {
        font-size: 1.6rem;

        margin: 12.31884vw 0 0 11.35266vw;
        padding: 4.10628vw 0 4.10628vw 5.55556vw;

        border-left: .24155vw solid var(--color);

        justify-self: start;
    }
    .homePage .events > header ul li + li
    {
        margin-top: 6.03865vw;
    }
    .homePage .events .row
    {
        margin-top: 14.00966vw;

        gap: 3.79227vw;
    }
    .homePage .events .eventBox a
    {
        gap: 1.20773vw;
    }
    .homePage .events .eventBox h2
    {
        font-size: 1.1rem;
        font-weight: 400;
        line-height: 1.3;

        text-align: left;
    }
    /* ==========================================================================
   About
========================================================================== */
    .homePage .about
    {
        margin-top: 24.39614vw;
        padding: 8.45411vw 0 23.42995vw;
    }
    .homePage .about .inner
    {
        width: 92.02899vw;
    }
    .homePage .about .secTitle
    {
        width: 89.85507vw;
        margin: 0 auto 7.24638vw;
    }
    .homePage .about .toptext
    {
        font-size: 1.4rem;

        max-width: 81.88406vw;
        margin-left: 8.21256vw;
    }
    .homePage .about .linkRow
    {
        margin-top: 11.11111vw;

        grid-template-columns: repeat(2, 1fr);
        gap: 3.62319vw 4.10628vw;
    }
    .homePage .about .linkBox a
    {
        display: block;

        min-height: 27.29469vw;
        padding: 2.89855vw 2.657vw 3.1401vw;

        background: url('../img/sp_about_box_bk.svg') no-repeat center center / cover;
    }
    .homePage .about .linkBox h2
    {
        font-size: 1.8rem;

        margin-bottom: 2.41546vw;
    }
    .homePage .about .linkBox h2::after
    {
        width: 2.657vw;
        height: 2.41546vw;
        margin-left: 1.20773vw;
    }
    .homePage .about .linkBox p
    {
        font-size: 1.2rem;
        line-height: 1.58;
    }
    /* ==========================================================================
   Contact
========================================================================== */
    .homePage .contact
    {
        padding: 15.70048vw 0 29.22705vw;
    }
    .homePage .contact .inner
    {
        width: 92.02899vw;
    }
    .homePage .contact .secTitle
    {
        width: 89.85507vw;
        margin: 0 auto 7.24638vw;
    }
    .homePage .contact .text
    {
        font-size: 1.4rem;
        line-height: 1.75;

        max-width: none;
        margin-left: 7.24638vw;

        color: #cecece;
    }
    /*end*/
}