/*---------------------------------------
Main
-------------------------------*/
/*-- mv --*/
#mv {
    background-color: #ffffff;
    padding-top: 5%;
}

#mv h1 {
    display: flex;
    justify-content: center;
    padding-bottom: 2.5%;
}

#mv h1 img {
    width: 10%;
}

#mv .title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    writing-mode: vertical-rl;
    width: 100%;
    padding-bottom: 5%;
}

#mv .title h2 {
    color: #1a1a1a;
}


/*-- mockup --*/
#mockup {
    display: flex;
    justify-content: center;
    background-color: #ffffff;
    padding: 2.5% 0 0 0;
}

#mockup video {
    width: 75%;
}


/*-- oneall --*/
#oneall {
    position: relative;
    background-color: #1a1a1a;
    padding: 10% 0 10% 0;
}
@media screen and (min-width: 750px) {
    #oneall {
        padding: 2.5% 0 2.5% 0;
    }
}

#oneall canvas {
    position: absolute;
    top: 0;
}

#oneall .text {
    display: flex;
    justify-content: center;
    padding: 5% 0 5% 0;
}

#oneall .text p {
    flex-direction: column;
    writing-mode: vertical-rl;
    letter-spacing: 0.2em;
    line-height: 2.25;
}

#oneall .imgbox {
    position: relative;
    display: flex;
    justify-content: center;
    padding: 2.5% 30% 2.5% 30%;
}

#oneall .logobox_1 {
    position: absolute;
    top: 50%;
    left: -5%;
    transform: translateY(-50%);
    display: flex;
    justify-content: left;
}

#oneall .logobox_2 {
    position: absolute;
    top: 50%;
    right: -5%;
    transform: translateY(-50%);
    display: flex;
    justify-content: right;
}

#oneall .logobox_1 img,
#oneall .logobox_2 img {
    width: 10%;
}


/*-- mgets --*/
#mgets {
    background-color: #ffffff;
    padding: 1.25%;
}

#mgets h2 {
    color: #1a1a1a;
    text-align: center;
    border-bottom: #1a1a1a solid 0.05rem;
    margin-bottom: 1.25%;
    padding: 2.5% 0 1.25% 0;
}

#mgets .imgs {
    display: flex;
    flex-wrap: wrap;
}

#mgets .imgs img {
    border: 0.05rem solid #cccccc;
    width: calc((100% - 0.3rem - 1.5%)/3);
    margin: 0.25%;
}
@media screen and (min-width: 750px) {
    #mgets .imgs img {
        width: calc((100% - 0.4rem - 2%)/4);
    }
}


/*-- article_1 --*/
#article_1 {
    background-color: #1a1a1a;
    padding: 5%;
}

#article_1 h2 {
    display: inline-block;
    color: #1a1a1a;
    background-color: #ffffff;
    margin-bottom: 0.75%;
    padding: 1.25%;
}

#article_1 h3 {
    width: 100%;
    padding-bottom: 1.25%;
}


/*-- article_2 --*/
#article_2 {
    text-align: right;
    background-color: #1a1a1a;
    padding: 5%;
}

#article_2 h2 {
    display: inline-block;
    color: #1a1a1a;
    background-color: #ffffff;
    margin-bottom: 0.75%;
    padding: 1.25%;
}

#article_2 h3 {
    width: 100%;
    padding-bottom: 1.25%;
}


/*-- handouts --*/
#handouts {
    width: 100%;
    display: flex;
    justify-content: center;
    overflow: hidden;
    background-color: #1a1a1a;
}

#handouts img {
    width: 100%;
    object-fit: cover;
    animation: graduallyBigger 60s ease-in-out infinite;
}
@keyframes graduallyBigger {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.25);
    }
    100% {
        transform: scale(1);
    }
}


/*-- lineup --*/
#lineup {
    background-color: #7cbfd6;
    padding: 5% 5% 5% 5%;
}
@media screen and (min-width: 750px) {
    #lineup {
        padding: 5% 5% 2.5% 5%;
    }
}

#lineup .title {
    padding-bottom: 5%;
}

#lineup .title h2 {
    display: inline-block;
    color: #7cbfd6;
    background-color: #1a1a1a;
    margin-bottom: 0.75%;
    padding: 1.25%;
}

#lineup .title h3 {
    width: 100%;
    color: #1a1a1a;
    padding-bottom: 1.25%;
}

#lineup .title p {
    color: #1a1a1a;
}

#lineup .infos {
    padding-bottom: 5%;
}

#lineup .infos h2 {
    color: #7cbfd6;
    background-color: #1a1a1a;
    border-bottom: 0.05rem #1a1a1a solid;
    margin-bottom: 1.25%;
    padding: 1.25%;
}

#lineup .infos .info {
    display: flex;
    align-items: center;
    padding-bottom: 1.25%;
}

#lineup .infos p {
    color: #1a1a1a;
}

#lineup .infos .info h3 {
    font-weight: 400;
    color: #1a1a1a;
    border: #1a1a1a solid 0.05rem;
    margin-right: 1.25%;
    padding: 0.75%;
}

#lineup .infos .index {
    border-top: 0.05rem #1a1a1a solid;
    padding-top: 0.75%;
}

#lineup .infos .index p {
    line-height: 1.5;
}


/*-- how --*/
#how {
    padding: 5%;
    background-color: #ffffff;
}
@media screen and (min-width: 750px) {
    #how {
        padding: 2.5% 5% 2.5% 5%;
    }
}

#how .title {
    text-align: center;
    border-bottom: 0.05rem #1a1a1a solid;
    margin: 0 5% 5% 5%;
    padding: 5% 0 2.5% 0;
}

#how .title h2 {
    display: inline-block;
    color: #ffffff;
    background-color: #7cbfd6;
    margin-bottom: 1.25%;
    padding: 2.5%;
}

#how .title h3 {
    color: #7cbfd6;
    padding-bottom: 1.25%;
}

#how .title p {
    color: #1a1a1a;
}

#how .infos {
    display: flex;
    padding: 0 5% 5% 5%;
}

#how .infos .info {
    width: calc(100%/3);
    display: flex;
    flex-wrap: wrap;
}

#how .infos .info .imgbox {
    display: flex;
    justify-content: center;
    width: 100%;
}

#how .infos .info .imgbox img {
    width: 30%;
    padding-bottom: 10%;
}

#how .infos .info p {
    width: 100%;
    text-align: center;
    color: #1a1a1a;
}


/*-- giving --*/
#giving {
    width: 100%;
    display: flex;
    justify-content: center;
    overflow: hidden;
    background-color: #1a1a1a;
}

#giving img {
    width: 100%;
    object-fit: cover;
    animation: graduallyBigger 60s ease-in-out infinite;
}
@keyframes graduallyBigger {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.5);
    }
    100% {
        transform: scale(1);
    }
}


/*-- youtube --*/
#youtube {
    padding: 5% 5% 2.5% 5%;
}

#youtube h2 {
    display: inline-block;
    color: #7cbfd6;
    background-color: #1a1a1a;
    margin-bottom: 1.25%;
    padding: 1.25%;
}

#youtube .youtubebox {
    width: 100%;
    aspect-ratio: 16 / 9;
}
#youtube .youtubebox iframe {
    width: 100%;
    height: 100%;
}


/*-- navi --*/
#navi {
    padding: 5% 2.5% 2.5% 2.5%;
}

#navi a {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2.5%;
}

#navi a p {
    color: #1a1a1a;
    background-color: #fff67f;
    width: 100%;
    text-align: center;
    border-radius: 0.5rem;
    padding: 5% 0 5% 0;
}