@charset "UTF-8";
.section.odd {
    background-color: var(--primary-brown);
    color: var(--primary-white);
}

.section__topic.odd {
    color: var(--primary-yellow);
}

.big-txt {
    font-size: 70px;
    font-family: var(--pointEnglish);
    color: var(--primary-darkYellow);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -3px;
}
/* pc768px- */
@media screen and (min-width: 768px) {
    .big-txt {
        font-size: 200px;
    }

    .big-txt--lets {
        font-size: 70px;
    }

    .section.odd {
        background-color: none;
        overflow: visible;
    }

    .section.odd::before {
        display: block;
        content: '';
        position: absolute;
        background-color: var(--primary-brown);
        width: 100vw;
        height: 100%;
        z-index: -10;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }
}

/* =================================
topView
====================================*/
.topViewContainer {
    position: relative;
    width: 100%;
    height: 500px;
    padding-top: 105px;
    overflow: hidden;
}

.topView__ccBlock {
    width: 290px;
    padding: 20px 0 20px 14px;
    background: rgba(0, 0, 0, 0.40);
    backdrop-filter: blur(3px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.topView__cc {
    border-left: 5px solid var(--primary-white);
    color: var(--primary-white);
    font-size: 2.4rem;
    font-weight: 600;
    letter-spacing: 1.2px;
    padding: 3px 12px;
}

.topView__txt {
    color: var(--primary-white);
    font-size: 1.4rem;
    text-align: center;
    font-weight: 400;
    line-height: 2;
    white-space: nowrap;
}

.topView__txt span {
    position: relative;
}

.topView__txt span::after {
    content: '';
    display: block;
    width: 100%;
    height: 4px;
    background-color: var(--primary-yellow);
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
}

.topViewContainer .btn {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
}

.topView__imgBlock {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.topView__img {
    height: 33.4%;
    width: 100%;
    object-fit: cover;
    z-index: -1;
    filter: brightness(.9);
}

.topView__img:nth-of-type(1) {
    transform: scale(120%) translateX(8%);
    object-position: 30% 20%;
}

.topView__img:nth-of-type(2){
    transform: scale(140%) translate(12%,15%);
    object-position: 30% 35%;
}

.topView__img:nth-of-type(3){
    transform: scale(120%) translate(8%,8%);
    object-position: 30% 30%;
}

/* pc768px-- */
@media screen and (min-width: 768px) {
    .topViewContainer .sp {
        display: inline-block;
    }

    .topViewContainer .pc {
        display: none;
    }

    .topViewContainer .btn {
        transition: .5s ease;
    }

    .topViewContainer .btn:hover {
        background: rgba(157, 28, 32, .8);
    }
}

/* pc860px- */
@media screen and (min-width: 860px) {
    .topViewContainer .sp {
        display: none;
    }

    .topViewContainer .pc {
        display: inline-block;
    }

    .topViewContainer {
        height: 78vh;
        padding-top: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 40px;
    }

    .topView__ccBlock {
        margin-top: 50px;
        width: fit-content;
        padding: 50px;
    }

    .topView__cc {
        border-left: 8px solid var(--primary-white);
        border-right: 8px solid var(--primary-white);
        font-size: 32px;
        letter-spacing: 2.5px;
        padding: 5px 28px;
    }

    .topView__txt {
        font-size: 22px;
        font-weight: 500;
        line-height: 2;
        letter-spacing: 1.6px;
    }

    .topView__txt span::after {
        content: '';
        display: block;
        width: 100%;
        height: 6px;
        background-color: var(--primary-yellow);
        position: absolute;
        bottom: -10px;
    }

    .topViewContainer .btn {
        position: relative;
        bottom: auto;
        left: auto;
        transform: translateX(0);
        padding: 10px 20px;
    }

    .topViewContainer .btn--member {
        font-size: 2.4rem;
    }

    .topViewContainer .icon--lock {
        width: 28px;
    }

    .topView__imgBlock {
        flex-direction: row;
    } 
    
    .topView__img {
        height: 100%;
        width: 33.4%;
    }

    .topView__img:nth-of-type(1) {
        transform: scale(100%) translateX(0);
        object-position: 50% 20%;
    }

    .topView__img:nth-of-type(2){
        transform: scale(100%) translate(0);
        object-position: 55% 35%;
    }

    .topView__img:nth-of-type(3){
        transform: scale(100%) translate(0);
        object-position: 50% 30%;
    }
}

/* =================================
about
====================================*/
.section--about {
    font-size: 1.4rem;
    line-height: 1.8;
    padding-left: 45px;
    padding-right: 65px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-left: 0;
    padding-right: 0;
    border-left: 7px solid var(--primary-darkYellow);
    border-bottom: 7px solid var(--primary-darkYellow);
}

.about__txtBlock {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding-left: 45px;
    padding-right: 65px;
}

.about__topic {
    font-size: 1.8rem;
    font-weight: 500;
}

.about__txt {
    letter-spacing: 1.2px;
}

.section--about .btn {
    margin-top: 20px;
}

.baseball-ground {
    z-index: -1;
    width: 100%;
    max-width: 400px;
    aspect-ratio: 1 / 1;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.baseball-base {
    display: block;
    width: 25px;
    height: 25px;
}

.base-2 {
    display: flex;
    justify-content: space-between;
}

.baseball-base.home {
    transform:scale(130%) translate(2px,-1px);
}

.baseball-base.first {
    transform: translateY(1px);
}

.big-txt--about {
    top: 160px;
    right: -165px;
    transform: rotate(90deg);
}

/* pc768px-- */
@media screen and (min-width: 768px) {
    .section--about {
        padding: 80px 13% 200px var(--contentPaddingPc);
        border: none;
    }
    .about__txtBlock {
        max-width: 1080px;
        gap: 25px;
        padding: 70px;
        padding-bottom: 0;
    }
    .about__topic {
        font-size: 2.8rem;
        letter-spacing: 2px;
    }

    .about__txt {
        font-size: 2.2rem;
        line-height: 1.8;
    }

    .section--about .btn {
        margin-top: 50px;
        transition: .5s ease;
    }

    .baseball-ground {
        z-index: -10;
        max-height: 750px;
        max-width: 1280px;
        bottom: 70px;
        left: 50%;
        transform: translateX(-50%);
        border-left: 10px solid var(--primary-darkYellow);
        border-bottom: 10px solid var(--primary-darkYellow);
    }

    .baseball-base {
        width: 45px;
        height: 45px;
        z-index: -1;
    }

    .base-2 {
        max-width: 750px;
    }

    .big-txt--about {
        top: 214px;
        right: -212px;
        transform: rotate(90deg);
        z-index: -1;
        line-height: .9;
    }

    .section--about.odd {
        background: none;
    }

    
}
/* =================================
recruit
====================================*/
.main__topicBlock {
    position: relative;
    width: 100%;
    height: 150px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main__topic {
    font-size: 2.6rem;
    color: var(--primary-white);
    font-weight: 600;
    letter-spacing: 2.5px;
    padding: 2px 7px;
    border-bottom: 5px solid var(--primary-yellow);
}

.main__topic__img {
    position: absolute;
    z-index: -1;
    width: 100%;
    object-fit: cover;
    filter: brightness(.5) contrast(.8);
}

.section--recruit {
    padding-bottom: 100px;
}

.recruit__mainBlock {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.recruit__list {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 30px;
}

.recruit__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.recruit__img {
    width: 100%;
    aspect-ratio: 7 / 4;
    object-fit: cover;
    border-radius: 10px;
}

.recruit__itemTxtBlock {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    text-align: center;
    padding: 0 10px;
}

.recruit__item__topic {
    color: var(--primary-yellow);
    font-size: 2.4rem;
    font-weight: 500;
    letter-spacing: 2.4px;
}

.recruit__img.mane {
    aspect-ratio: 4 / 3;
}

.recruit__item__topic.mane {
    font-size: 2rem;
}

.recruit__item__maneTxtBlock {
    margin-top: 5px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
    letter-spacing: 1px;
}

.big-txt--welcome {
    bottom: 0;
    right: 15px;
    opacity: .5;
}

/* pc768px-- */
@media screen and (min-width: 768px) {
    .main__topicBlock {
        height: 250px;
    }

    .main__topic {
        font-size: 5rem;
        font-weight: 500;
        letter-spacing: 4px;
        padding: 15px 40px;
        border-bottom: 10px solid var(--primary-yellow);
    }

    .main__topic__img {
        position: absolute;
        z-index: -1;
        width: 100%;
        object-fit: cover;
        filter: brightness(.5) contrast(.8);
    }

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

    .recruit__list {
        flex-direction: row;
        justify-content: space-between;
        gap: 0;
        margin-top: 50px;
    }

    .recruit__item {
        width: 32%;
        min-width: 32%;
        gap: 25px;
    }

    .recruit__img {
        aspect-ratio: 4 / 3;
        border-radius: 20px;
    }

    .recruit__itemTxtBlock {
        gap: 12px;
    }

    .recruit__item__topic {
        font-size: 2.8rem;
        letter-spacing: 2.8px;
    }

    .recruit__item.mane {
        flex-direction: row;
        width: 100%;
        max-width: 1080px;
    }

    .recruit__img.mane {
        width: 50%;
        max-width: 500px;
    }

    .recruit__itemTxtBlock.mane {
        align-items: flex-start;
    }

    .recruit__item__topic.mane {
        font-size: 2.8rem;
        text-align: left;
    }

    .recruit__item__maneTxtBlock {
        margin-top: 5px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        text-align: left;
        letter-spacing: 1px;
    }

    .big-txt--welcome {
        color: rgb(160, 120, 34);
        width: fit-content;
        transform: rotate(-90deg);
        bottom: 267px;
        right: auto;
        left: -280px;
        mix-blend-mode: difference;
    }
}

/* =================================
command
====================================*/
.command__txtBlock {
    margin-top: 25px;
    line-height: 1.8;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* =================================
event
====================================*/
.section__topic--event {
    font-size: 2rem;
}

.event__mainBlock {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 25px;
}

.event__img {
    width: 100%;
    aspect-ratio: 7 / 4;
    object-fit: cover;
    border-radius: 10px;
}

.event__imgTxt {
    margin-top: 3px;
    font-size: 1.2rem;
    transform: translateX(-10px);
}

.event__txt {
    letter-spacing: 1.2px;
}

/* pc768px-- */
@media screen and (min-width: 768px) {
    .section__topic--event {
        font-size: 3.2rem;
    }

    .event__mainBlock {
        flex-direction: row;
        gap: 40px;
        margin-top: 30px;
    }

    .event__imgBlock {
        width: 50%;
        min-width: 50%;
    }

    .event__img {
        aspect-ratio: 5 / 3;
        border-radius: 20px;
    }

    .event__imgTxt {
        text-align: right;
        margin-top: 5px;
        font-size: 1.4rem;
        transform: translateX(0);
    }

    .event__txt {
        letter-spacing: 2px;
        margin-top: 20px;
    }
}
/* =================================
place
====================================*/
.place__txt {
    margin-top: 25px;
}

.place__list {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.place__item {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.place__topic {
    font-size: 2rem;
}

.place__map {
    display: block;
    width: 100%;
    aspect-ratio: 5 / 3;
}

.section--place .btn--red {
    margin-top: 30px;
}

/* pc768px-- */
@media screen and (min-width: 768px) {
    .place__txt {
        margin-top: 30px;
    }

    .place__list {
        margin-top: 40px;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 30px;
    }

    .place__item {
        width: 48%;
        min-width: 48%;
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    .place__topic {
        font-size: 2.4rem;
    }

    .section--place .btn--red {
        margin-top: 50px;
    }
}
/* =================================
activity
====================================*/
.section--activity {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 70px var(--contentPadding);
}

.activity__scroll {
    padding-bottom: 10px;
    overflow: auto;
}

.activity__scroll::-webkit-scrollbar {
    display: none;
}

.activity__list {
    margin-top: 25px;
    display: flex;
    gap: 20px;
    width: fit-content;
    padding-right: 10px;
}

.activity__item {
    overflow: hidden;
    width: 280px;
    height: 380px;
    background-color: var(--primary-white);
    border-radius: 15px;
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.40);
}

.activity__img {
    width: 100%;
    aspect-ratio: 7 / 4;
    object-fit: cover;
}

.activity__txtBlock {
    height: 220px;
    padding: 20px 15px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
}

.activity__txt {
    font-size: 14px;
}

.activity__date {
    font-size: 12px;
}

.section--activity .btn--red {
    margin-top: 30px;
}

.big-txt--lets {
    height: fit-content;
    width: 352px;
    top: -4px;
    right: 0;
    text-align: right;
}

/* pc860px-- */
@media screen and (min-width: 860px) {
    .section--activity {
        padding-bottom: 100px;
        position: relative;
        overflow: hidden;
    }

    .activity__scroll {
        overflow: hidden;
    }

    .activity__list {
        margin-top: 30px;
        flex-wrap: wrap;
        gap: 30px;
        width: 100%;
        padding-right: 0;
    }

    .activity__item {
        overflow: hidden;
        width: 371px;
        height: auto;
        aspect-ratio: 4 / 5;
        border-radius: 20px;
        box-shadow: 6px 6px 8px rgba(0, 0, 0, 0.40);
    }

    .activity__img {
        aspect-ratio: 3 / 2;
    }

    .activity__txtBlock {
        height: 215px;
    }

    .activity__txt {
        line-height: 1.4;
        font-size: 18px;
        height: 150px;
        overflow: hidden;
    }

    .activity__date {
        font-size: 14px;
    }

    .section--activity .btn--red {
        margin-top: 50px;
    }

    .big-txt--lets {
        width: fit-content;
        top: 338px;
        right: -350px;
        text-align: left;
        transform: rotate(90deg);
        color: #4e669a;
        mix-blend-mode: difference;
        opacity: .5;
        font-size: 200px;
    }
}