@charset "UTF-8";



html {
    font-size: clamp(14px, 1.42vw, 30px);
}

body {
    background-color: #333333;
    color: #fff;
    font-family: "Oswald", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

img {
    max-width: 100%;
    vertical-align: bottom;
}

li {
    list-style: none;
}

a {
    color: #fff;
    text-decoration: none;
}

a:hover {
    opacity: 0.7;
}

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

ヘッダー

-------------------------------------*/
#header {
    width: 100%;
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 2rem;
    position: fixed;
    z-index: 50;
}

#header .logo {
    width: 10rem;
    position: fixed;
    top: 1rem;
    left: 1rem;
    
}

#header .navi .menu {
    display: flex;
    font-size: 1rem;
    align-items: center;
}

#header .navi .menu li {
    padding-left: 2rem;
}

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

メイン

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

main .main_visual {
    position: relative;
}

main .team {
    text-align: center;
}

main .team .team_name {
    background-color: #fff;
    color: #000;
    font-size: 5rem;
    margin-bottom: 1rem;
    transform: rotate(-10deg);
    width: 22.5rem;
    transform: skewY(-10deg);
    position: absolute;
    right:0rem ;
    top: 17.3rem;
}

main .team .shiga {
    background-color: #fff;
    color: #000;
    font-size: 2.7rem;
    margin-bottom: 1rem;
    transform: rotate(-10deg);
    width: 11rem;
    transform: skewY(-10deg);
    position: absolute;
    right: 0;
    top: 24rem;
}

main .team .sports {
    background-color: #fff;
    color: #000;
    font-size: 2.7rem;
    margin-bottom: 1rem;
    transform: rotate(-10deg);
    width: 11rem;
    transform: skewY(-10deg);
    position: absolute;
    right: 0;
    top: 28.2rem;
}

main .team .age {
    background-color: #2e8b57;
    color: #fff;
    font-size: 2rem;
    margin-bottom: 1rem;
    transform: rotate(-10deg);
    width: 12rem;
    transform: skewY(-10deg);
    position: absolute;
    right: 0;
    top: 32.5rem;
}

main .team .school {
    background-color: #2e8b57;
    color: #fff;
    font-size: 2rem;
    margin-bottom: 1rem;
    transform: rotate(-10deg);
    width: 12rem;
    transform: skewY(-10deg);
    position: absolute;
    right: 0;
    top: 35.7rem;
}

.main_visual img {
    transform: scale( -1, 1);
    width: 100%;
    object-fit: cover;
    object-position: right;
    height: 35rem;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 80%);
}

.item {
    font-size: 4rem;
    padding: 0 5rem;
    border-bottom: #fff;
    position: relative;
    margin-bottom: 2rem;
}

.item::before {
    content: "";
    position: absolute;
    bottom: -0.8rem;
    width: 4rem;
    height: 3px;
    left: 7rem;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background-color: #fff;
}

.club_school .en {
    transform: rotate(-10deg);
    transform: skewY(-10deg);
}

.club_school .jp {
    padding: 0 5rem;
    transform: rotate(-10deg);
    transform: skewY(-10deg);
    margin-bottom: 4rem;
}

.club_school .club {
    display: flex;
    justify-content: space-between;
    transform: rotate(-10deg);
    transform: skewY(-10deg);
    margin-bottom: 4rem;
    padding-right: 5rem;
}

.club_school .club .item {
    padding: 0;
}

.club_school .club .item::before {
    left: 2rem;
}


.club_school .inner {
    width: 37%;
    padding: 0 5rem;
}

.club_school .school .item {
    padding: 0;
}

.club_school .school .item::before {
    left: 2rem;
}

.club_school .inner p {
    font-size: 1.5rem;
}

.club_school img {
    object-fit: cover;
    height: 20rem;
    width: 55%;
    object-position: left;
    box-shadow: 1rem 1rem 4px #000;
}



.club_school .school {
    display: flex;
    justify-content: space-between;
    transform: rotate(-10deg);
    transform: skewY(-10deg);
    margin-bottom: 5rem;
}

.club_school .school img {
    box-shadow: -1rem 1rem 4px #000;
}

.club_detail {
    display: flex;
    clip-path: polygon(0 25%, 100% 0, 100% 80%, 0 100%);
    margin: 5rem 0;
}

.club_detail h3 {
    font-size: 1.7rem;
    margin-bottom: 1rem;
}

.club_detail .activity {
    background-color: #2e8b57;
    color: #fff;
    width: 50%;
    padding: 15rem 5rem 10rem 5rem;
}

.club_detail .activity .item {
    padding-left: 0;
}
.club_detail .activity .item::before {
    left: 2rem;
}

.club_detail .fee {
    background-color: #fff;
    color: #2e8b57;
    width: 50%;
    padding: 15rem 5rem;
}

.club_detail .fee .item {
    margin-top: 0;
    padding: 0;
}

.club_detail .fee .item::before {
    background-color: #2e8b57;
    left: 2rem;
}

#footer {
    font-size: 2rem;
    padding: 1rem 5rem;
    text-align: end;
}
 

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

スマートフォン

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

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


    #header .logo {
        width: 5rem;
    }

    #header .navi .menu {
        font-size: 1.5rem;
        letter-spacing: 0.05rem;
    }

    #header .navi .menu li {
        padding-left: 1.2rem;
    }
    
    main .team .team_name {
        font-size: 4.2rem;
        width: 18rem;
        top: 15.6rem;
        padding: 0;
    }

    main .team .sports {
        font-size: 2.5rem;
        width: 15rem;
        top: 25.8rem;
    }

    main .team .shiga {
        font-size: 2.5rem;
        width: 15rem;
        top: 21.8rem;
    }

    main .team .age {
        font-size: 1.5rem;
        width: 8rem;
        top: 10.5rem;
    }

    main .team .school {
        font-size: 1.5rem;
        width: 8rem;
        top: 13rem;
    }

    .main_visual img {
        height: 30rem;
        object-position: 30% 50%;
    }

    .title {
        margin-top: 3rem;
        padding: 0;
    }

    .title .en {
        padding: 0 3rem;
    }

    .title .en::before {
        left: 5rem;
    }

    .title .jp {
        padding: 0 3rem;
    }

    .club_school .club {
        flex-direction: column;
        padding: 0;
    }

    .club_school .school {
    flex-direction: column-reverse;
    }

    .club_school .inner {
        width: 100%;
        padding: 0 3rem;
    }

    .club_school img {
        height: 20rem;
        width: 100%;
        margin-bottom: 1rem;
    }

    .club_school .school img {
        text-align: right;
    }

    .club_detail {
        margin-top: 1rem;
        display: block;
        clip-path: polygon(0 5%, 100% 0, 100% 95%, 0 100%);
        justify-content: none;
    }

    .club_detail p {
        font-size: 1.3rem;
    }

    .club_detail .pc {
        display: none;
    }

    .club_detail .activity {
        width: 100%;
        position: relative;
        padding: 5rem 3rem 7rem 3rem;
        margin-bottom: 0;
        overflow: hidden;
        z-index: 1;
    }

    .club_detail .activity::after {
        content: "";
        position: absolute;
        bottom: -50px;
        left: 0;
        width: 100%;
        height: 100px;
        background-color: #fff;
        transform: skewY(-5deg);
        z-index: -1;
    }

    .club_detail .fee {
        position: relative;
        width: 100%;
        padding: 0 3rem 5rem 3rem;
        margin-top: 0;
        z-index: 2;
    }
}
.section-sponsor {
    margin: 1rem 5rem 3rem 5rem;
    overflow: hidden;
}
.section-sponsor img {
    width: 100%;
    object-fit: cover;
    display: block;
}
.sponsorFlex {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 2rem;
    margin-bottom: 2rem;
    justify-content: center;
}
.sponsorFlexSp {
    display: flex;
    flex: 1;
    gap:2rem;
    align-items: center;
    justify-content: center;
}
@media(max-width: 640px){
    .sponsorFlexSp {
        display: block;
    }
    .sponsorFlex {
        display: block;
    }
    .sponsorFlex img {
        margin-bottom: 2rem;
    }
}
.sectionTitle {
    font-size: 5rem;
    border-bottom: 3px solid #fff;
    width: 4rem;
    padding-bottom: 1rem;
}
.sectionTitleJa {
    font-size: 1.7rem;
    margin-top: 1rem;
    margin-bottom: 2rem;
}
/*insta*/
.section-instagram {
    margin: 0 5rem;
}
/*活動スケジュール*/
.scheduleBtn {
    margin-top: 20px;
    background-color: #fff;
    padding: 11px 15px;
    width: 272px;
    display: flex;
}
.scheduleBtn a {
    letter-spacing: 2px;
    text-align: center;
    color: #2e8b57;
    font-weight: 600;
    font-size: 20px;
}
/*ブログバナー*/
.section-blogBnr {
	background: #000;
    border: 3px #fff solid;
    margin: 8rem 5rem 0;
    padding: 1rem 2rem 3rem;
	transform: skewY(-10deg);
}
.blogBnrTitle {
	display:flex;
	align-items:center;
}
.blogBnrTitle p {
	font-size: 1.7rem;
    color: #cccccc;
    font-weight: 600;
    letter-spacing: 3px;
    margin-bottom: 24px;
}
.blogBnrTitleEn {
	font-size: 4rem;
    border-bottom: #fff;
    position: relative;
    margin-bottom: 2rem;
	margin-right: 30px;
}
.blogBnrTitleEn:before {
    content: "";
    position: absolute;
    bottom: -0.8rem;
    width: 4rem;
    height: 3px;
    left: 2rem;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background-color: #fff;
}
.blogBnrText {
	color: #cccccc;
    font-weight: 600;
	letter-spacing:2px;
	margin-bottom:20px;
}
.greenBtn {
	margin-top: 20px;
    background-color: #2e8b57;
    padding: 11px 15px;
    color: #fff;
    display: flex;
    width: 350px;
    justify-content: center;
	letter-spacing:2px;
	font-weight:600;
}
@media(max-width:640px){
	.section-blogBnr {
		margin:5rem 0rem 3rem;
		/*transform: skewY(-6deg);*/
	}
	.blogBnrTitle {
		display:block;
	}
	.greenBtn {
		width: 100%;
	}
}