/* front-page 
-------------------------------------- */
.side-content-bg {
    position: relative;
}

.side-content-bg::before {
    position: absolute;
    right: 0;
    top: 0;
    width: 8vw;
    max-width: 101px;
    height: 98%;
    background: #009A3B;
    content: "";
}

.side-content-bg {
    position: relative;

}

.side-content-bg::after {
    position: absolute;
    z-index: -1;
    left: 5vw;
    top: 0;
    width: 1px;
    height: 98%;
    background: #009A3B;
    content: "";
}

/* header
-------------------------------------- */

.side-content::after {
    position: fixed;
    z-index: 3;
    right: 0;
    top: 0;
    width: 8vw;
    max-width: 101px;
    height: 100%;
    background: #009A3B;
    content: "Kamiina Baseball Association";
    color: #fff;
    font-size: min(3vw, 36px);
    font-family: "Train One", system-ui;
    writing-mode: vertical-rl;
    white-space: nowrap;
    padding-top: 1em;
    padding-right: .3em;
}

.side-content::before {
    position: fixed;
    z-index: -1;
    left: 5vw;
    top: 0;
    width: 1px;
    height: 100%;
    background: #009A3B;
    content: "";
}


/* 
-------------------------------------- */

.arrow-down-style {
    position: relative;
}

.arrow-down-style::before {
    position: absolute;
    z-index: 2;
    left: 4vw;
    top: 0;
    content: "";
    background: #723434;
    background: #fff url(../img/icon-arrow-down.svg) no-repeat center center;
    background-size: cover;
    width: 37px;
    height: 36px;

    margin: 1em 0;

}

@media only screen and (max-width: 1600px) {
    .arrow-down-style::before {
        left: 3.8vw;
    }
}

@media only screen and (max-width: 1400px) {
    .arrow-down-style::before {
        left: 3.6vw;
    }
}

@media only screen and (max-width: 768px) {
    .arrow-down-style::before {
        width: 6vw;
        height: 5.88vw;
        left: 2.3vw;
    }
}

/* .arrow-down-style::after {
    position: absolute;
    z-index: 8;
    left: -6vw;
    top: 1px;
    content: "";
    background: #fff;
    width: 1.93vw;
    height: 3.49vw;
}

@media only screen and (max-width: 768px) {
    .arrow-down-style::after {
        width: 37px;
        height: 67px;
    }
} */




/* 
-------------------------------------- */

.intro-flex {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.intro-content {
    width: 50%;
}

.intro-img {
    width: 45%;
}

@media only screen and (max-width: 768px) {
    .intro-content {
        width: 100%;
        margin-bottom: 1em;
    }

    .intro-img {
        width: 100%;
    }

}


.intro-img img {
    border: 3px solid #009A3B;
    border-radius: 20px;
    padding: 8px;
}

.intro-content-name {
    font-size: 30px;
}

.intro-content-name span {
    font-size: 20px;
    display: inline-block;
    margin-right: 1em;
    margin-bottom: 1.5em;
}



/* 
-------------------------------------- */
.gallery-slider {
    width: 80%;
    margin: auto;
}

.gallery-slider li {
    padding: 0 10px;
}

.gallery-slider .slick-arrow {
    position: absolute;
    z-index: 3;
    top: calc(50% - 18px);
    width: 36px;
    cursor: pointer;
}

.gallery-slider-prev {
    left: -50px;
}

.gallery-slider-next {
    right: -50px;
}

@media only screen and (max-width: 768px) {

    .gallery-slider-prev {
        left: -8vw;
    }

    .gallery-slider-next {
        right: -8vw;
    }
}

.gallery-note {
    display: flex;
    align-items: center;
    width: 90%;
    margin: auto;
    margin-top: 10px;
}

.gallery-note::after {
    display: block;
    content: ' ';
    flex-grow: 1;
    height: 1px;
    margin-left: 10px;
    background-color: #009A3B
}

/* 
-------------------------------------- */

.spsr-list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.spsr-listitem {
    width: 18%;
    margin-bottom: 3%;
}

.spsr-box {
    margin: 50px 0;
}

.spsr-box dl {
    display: flex;
    margin-bottom: 5px;
}

.spsr-box dt {
    width: 15%;
}

.spsr-box dd {
    width: 80%;
    position: relative;
    padding-left: 2em;
}

@media only screen and (max-width: 768px) {
    .spsr-box dt {
        width: 30%;
    }

    .spsr-box dd {
        width: 70%;
    }
}

.spsr-box dd::before {
    position: absolute;
    content: "";
    background: #000;
    width: 1px;
    height: 20px;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

.spsr-text {
    line-height: 2.5;
}

/* 
-------------------------------------- */

/* 
-------------------------------------- */

/* 
-------------------------------------- */