@charset "UTF-8";
/* ====================
article__header
==================== */
.article__header {
    min-height: 100vh;
    background-image: url(../images/pc_top.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
    margin-top: -74px;
}

.mainVisual {
    color: rgba(var(--primary-snow-rgb), 0.6);
    font-family: Caveat;
    font-size: 25rem;
    line-height: 1;
    letter-spacing: 0em;
    position: absolute;
    bottom: 120px;
    left: 50%;
    transform: translateX(-50%);
}

/* article__header sp */
@media screen and (max-width: 768px) {
    .article__header {
        min-height: 100vh;
        background-image: url(../images/sp_top.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        position: relative;
    }

    .mainVisual {
        font-size: 10rem;
    }
}
/* sp 768px */


/* ====================
concept
==================== */
.section--concept {
    min-height: 100vh;
    background-image: url(../images/pc_top_concept.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
}

.concept__contents {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.concept__item {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.concept__txt {
    font-size: 1.6rem;
}

/* concept sp */
@media screen and (max-width: 768px) {
    .section--concept {
        background-image: url(../images/sp_top_concept.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        position: relative;
    }

    .concept__contents {
        position: static;
        transform: none;
        text-align: center;
        padding: 120px 5.3%;
    }
}
/* sp 768px */

/* ====================
works
==================== */
.section--works {
    padding: 0 8.5%;
    margin-top: 100px;
}

.works__contents {
    text-align: center;
    padding-bottom: 100px;
}

.works__item {
    text-align: center;
    display: flex;
    gap: 20px;
    margin-bottom: 60px;
}

.works__img {
    flex: 1;
    max-width: 373px;
    aspect-ratio: 4 / 3;
}
 
.works__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.works__contents .txt__link {
    font-size: 1.8rem;
}

/* works sp */
@media screen and (max-width: 768px) {
    .section--works {
        padding: 0 5.3%;
        margin-top: 80px;
    }

    .works__contents {
        padding-bottom: 80px;
    }

    .works__item {
        flex-direction: column;
        align-items: center;
    }

    .works__img {
        max-width: 300px;
        margin: 0 auto;
    }
}
/* sp 768px */

/* ====================
creator
==================== */
.section--creator{
    padding: 0 8.5%;
    margin-top: 100px;
}

.creator__contents{
    text-align: center;
    padding-bottom: 140px;
    display: flex;
    gap: 120px;
    align-items: center;
}

.creator__img {
    flex: 1;
    max-width: 570px;
    aspect-ratio: 4 / 3;
}
 
.creator__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.creator__item {
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.creator__txt {
    font-size: 1.6rem;
}

.creator__item .txt__link {
    font-size: 1.8rem;
}

/* creator sp */
@media screen and (max-width: 768px) {
    .section--creator{
        padding: 0 5.3%;
        margin-top: 80px;
    }

    .creator__contents{
        padding-bottom: 100px;
        flex-direction: column;
        gap: 60px;
    }

    .creator__img {
        max-width: 335px;
    }
}
/* sp 768px */

/* ====================
schedule
==================== */
.section--schedule {
    background-image: url(../images/pc_top_schedule.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
    padding: 100px 8.5% 140px;
}

.schedule__contents {
    width: 100%;
    height: auto;
    background: rgba(var(--primary-snow-rgb), 0.8);
    border-radius: 2px;
    padding: 60px 0;
    text-align: center;
}

.schedule__list {
    display: inline-flex;
    flex-direction: column;
    gap: 60px;
    text-align: left;
}

.schedule__item {
    display: flex;
    gap: 60px;
}

.schedule__date,
.schedule__event {
    color: var(--primary-darkGreen);
    font-size: 1.6rem;
}

/* schedule sp */
@media screen and (max-width: 768px) {
    .section--schedule {
        background-image: url(../images/sp_top_schedule.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        position: relative;
        padding: 80px 5.3% 100px;
    }

    .schedule__item {
        flex-direction: column;
        gap: 10px;
    }
}
/* sp 768px */

/* ====================
contactAndLink
==================== */
.section--contactAndLink {
    display: flex;
    gap: 120px;
    justify-content: center;
    padding: 0 8.5% 80px;
    margin-top: 80px;
}

/* contact */
.contact {
    width: 386px;
}

.contact .section__title {
    font-size: 3.8rem;
    margin-bottom: 60px;
}

.contact__txt {
    font-size: 1.6rem;
}

.spBr {
    display: none;
}

/* link */
.link {
    width: 386px;
}

.link .section__title {
    font-size: 3.8rem;
    margin-bottom: 60px;
}

.link__list {
    display: flex;
    gap: 60px;
    justify-content: center;
}

/* contactAndLink sp */
@media screen and (max-width: 768px) {
    .section--contactAndLink {
        flex-direction: column;
        gap: 80px;
        justify-content: center;
        align-items: center;
        padding: 0 5.3% 100px;
        margin-top: 100px;
    }

    /* contact */
    .contact {
        width: 210px;
        text-align: center;
    }

    .contact .section__title {
        font-size: 2.4rem;
        margin-bottom: 40px;
    }

    .spBr {
        display: block;
    }

    /* link */
    .link {
        width: 210px;
    }

    .link .section__title {
        font-size: 2.4rem;
        margin-bottom: 40px;
    }

    .link__list {
        gap: 40px;
    }
}
/* sp 768px */