@charset "utf-8";

main section h2{
    margin-bottom: 45px;
    position: relative;
    padding-left: 35px;
    padding-top: 5px;
}

main section h2:before{
    content: "　";
    position: absolute;
    top: 0;
    left: 0;
    width: 9px;
    height: calc(100% - 5px);
    background:  var(--color-green01);
    display: block;
}

main section h2:after{
    content: "　";
    position: absolute;
    top: 0;
    left: 0;
    width: 9px;
    height: calc(34.545454545% - 5px);
    background:  var(--color-green02);
    display: block;
}

main section h2 span{
    font-family: "Roboto Condensed", sans-serif;    
    font-size: 5.9375rem;
    font-weight:700;
}

main section h3{
    font-family: "Roboto Condensed", sans-serif;    
    font-size: 4.6875rem;
    font-weight:700;
}


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

    main section h2{
        margin-bottom: calc(70vw / 7.5);
        padding-left:calc(35vw / 7.5);
        padding-top: calc(-5vw / 7.5);
        font-size: calc(22vw / 7.5);
    }

    main section h2:before{
        width: calc(10vw / 7.5);
    }

    main section h2:after{
        width: calc(10vw / 7.5);
    }

    main section h2 span{
        font-size: calc(90vw / 7.5);
    }

    main section h3{
        font-size:  calc(77vw / 7.5);
    }
    
}


#kv{
    position: relative;
}

#kv .kvSwiper {
    width: 100%;
}

#kv .kvSwiper img {
    width: 100%;
    display: block;
}

#kv .kvSwiper .spOnly{
    display: none;
}

#kv .swiper-controls{
    position: absolute;
    max-width: 1280px;
    padding: 0 40px;
    left: 50%;
    transform:  translateX(-50%);   
    bottom: 35px;
    z-index: 1;
    width: 100%;
    gap:17px;
    display: flex;
    justify-content: flex-start;
    align-items: center;    
}

#kv .swiper-pagination{
    position: initial;
    display: flex;
    gap:17px;
    text-align: left;
    transform: translateZ(0);
    width: auto;
    bottom: inherit;
    top: inherit;   
}

#kv .swiper-pagination .swiper-pagination-bullet{
    width: 30px;
    height: 3px;
    background: var(--color-text);
    border-radius: 0;
    margin: 0;
    opacity: 0.3;
}

#kv .swiper-pagination .swiper-pagination-bullet-active{
    opacity: 1;
}

#kv .swiper-stop{
    width: 26px;
    height: 26px;
    background: url("../img/common/swiper_stop.png") no-repeat left top;
    opacity: 0.3;
    background-size: 100%;
    text-indent: -9999px;
        transition: all 0.3s ease; 
    position: initial;
    bottom: inherit;
    left: inherit;
}

#kv .swiper-stop.is-paused{
    background: url("../img/common/swiper_start.png") no-repeat left top;
    background-size: 100%;
}

#kv .swiper-stop:hover,
#kv .swiper-stop.is-paused:hover{
    opacity: 1;
}

#kv .kvResult{
    position: absolute;
    right: 0;
    top: 367px;
    text-align: right;
    z-index: 1;
}

#kv .kvResult .kvResultRanking{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding-left: 20px;
    padding-right: 55px;
    background: var(--color-gray01);    


    clip-path: polygon(
        12px 0,
        100% 0,
        100% 100%,
        0 100%
    );  
}

#kv .kvResult .kvResultRanking .kvResultRankingNum{
    font-size: 2.25rem;
    font-family: "Roboto Condensed", sans-serif; 
    font-style: italic;
    font-weight: 700;
}

#kv .kvResult .kvResultRanking .kvResultRankingNum:before{
    content: "RANKING";
    font-family: "Roboto Condensed", sans-serif; 
    font-style: italic;
    font-size: 1.25rem;
    font-weight: 300;
    padding-right: 20px;
}

#kv .kvResult .kvResultRanking .kvResultRankingNum:after{
    content: "位";
    font-weight: 300;
    font-size: 0.875rem;
}

#kv .kvResult .kvResultContent{
    background: var(--color-gray01);    
    padding: 15px 55px 25px 25px;
}

#kv .kvResult .kvResultContent .kvResultHeading{
    font-family: "Roboto Condensed", sans-serif; 
    font-size: 1.875rem;
    color: var(--color-orenge01);
    font-weight: 700;
    text-align: left;
    margin-bottom: 10px;
}

#kv .kvResult .kvResultContent .kvResultHeading span{
    font-size: 0.875rem;
    color: var(--color-text);
    font-weight: 500;
}

#kv .kvResult .kvResultContent .kvResultCompetition{
    font-size: 0.875rem;
    line-height: var(--line-height-heading);
    text-align: left;
    margin-bottom: 10px;
}

#kv .kvResult .kvResultContent .kvResultScore{
    width: 100%;
    text-align: center;
    margin: 0 0 10px 0;
    font-size:1.125rem;
    font-family: "Roboto Condensed", sans-serif; 
}

#kv .kvResult .kvResultContent .kvResultScore td{
    background: var(--color-bg);
    padding: 8px 0;
   vertical-align: middle;
}

#kv .kvResult .kvResultContent .kvResultScore .circle{
    width: 56px;
    height: 56px;
    border-radius: 28px;
    display: block;
    margin: 5px auto 10px;
}

#kv .kvResult .kvResultContent .kvResultScore .circle.win{
    background: var(--color-green01);
}

#kv .kvResult .kvResultContent .kvResultScore .circle.lose{
    background: var(--color-gray04);
}

#kv .kvResult .kvResultContent .kvResultScore .score{
    font-weight: 700;
    font-size: 2.75rem;
}

#kv .kvResult .kvResultContent .kvResultScore .kvResultDate{
    padding: 15px 0;
}

#kv .kvResult .kvResultContent .kvResultBtnFlex{
    display: flex;
    justify-content: space-between;
}

#kv .kvResult .kvResultContent .kvResultBtnFlex .btnDesign{
    width: 130px;
    height: 30px;
    border-color:var(--color-text);
    font-size: 0.875rem;
    border-width: 1px;
    background: var(--color-green01);
}

#kv .kvResult .kvResultContent .kvResultBtnFlex .btnDesign a {
  padding-left: 10px;
}

#kv .kvResult .kvResultContent .kvResultBtnFlex .btnDesign a::after {
  color: var(--color-green01);
  font-size: 0.375rem;
}

#kv .kvResult .kvResultContent .kvResultBtnFlex .btnDesign:before{
    background: var(--color-text);
}

#kv .kvResult .kvResultContent .kvResultBtnFlex .btnDesign:hover{
    color: var(--color-green01);
}

#kv .kvResult .kvResultContent .kvResultBtnFlex .btnDesign:hover a:after{
    background: var(--color-green01);
    color: var(--color-text);
}

#kv .bx-controls{
    left: 50px;
    gap:0 15px;
    display: flex;
    top: inherit;
    right: inherit;
    align-items: center;
     flex-direction: row-reverse;
    padding-right: 45px;
    bottom: 55px;
}

#kv .bx-pager.bx-default-pager a {
  background: #fff;
  width: 30px;
  height: 3px;
  margin: 0 6.5px;
  border-radius: 0;
  opacity: 0.3;
}

#kv .bx-pager.bx-default-pager a.active {
  opacity: 1;
}

#kv .bx-pager {
    width: inherit;
    position: initial;
    padding-top: 0;
    display: flex;
    align-items: center;
}

#kv .bx-controls-auto {
    position: inherit;
    bottom: -10px !important;
}

#schedule{
}

#schedule .scheduleInner{
    max-width: 1420px;
    margin: 0 auto;
    padding: 80px 40px;
}

#schedule .scheduleCategoryList{
    display: flex;
    gap:6px;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
    width: 50%;
}

#schedule .scheduleCategoryList button{
    background: var(--color-text);
    color: var(--color-bg);
    border: 1px solid var(--color-bg);
    font-size: 1.125rem;
    border-radius: 4px;
    width: 90px;
    height: 30px;
    display: inline-block;
    text-align: center;
    line-height: 30px;
    font-family: "Roboto Condensed", sans-serif;
    transition: all 0.3s ease; 
}

#schedule .scheduleCategoryList li.on button{
    background: var(--color-lightpurple01);
    width: 110px;
}

#schedule .scheduleSwiper {
    margin-left: 0;
  margin-right: calc((100vw - 1340px) / -2);
}    

#schedule .scheduleItem{
    width: 400px;
    background: #eff1f2;
    position: relative;
    height: initial;
    padding: 0 13px 15px 13px;
}

#schedule .scheduleItem .scheduleItemPlace{
    background: var(--color-gray01);
    font-size: 0.875rem;
    min-height: 35px;
    padding: 9px 0 9px 83px;
    padding-left: 83px;
    margin: 0 -13px 15px -13px;
    position: relative;
    line-height: var(--line-height-heading);
}

#schedule .scheduleItem .scheduleItemPlace:before{
    content: "VISITOR";
    background:var(--color-gray03);
    width: 73px;
    position: absolute;
    top: 0;
    left: 0;
    font-size: 0.875rem;
    text-align: center;
    font-family: "Roboto Condensed", sans-serif;    
    height: 100%;
    align-content: center;
    text-align: center;
}

#schedule .scheduleItem.host .scheduleItemPlace:before{
    content: "HOST";
    background:var(--color-green01);
}

#schedule .scheduleItem .scheduleItemTtl{
    font-size: 0.9375rem;
    color: var(--color-bg);
    text-align: center;
    margin-bottom: 10px;
    line-height: var(--line-height-base02);
}

#schedule .scheduleItem .scheduleItemMeta{
    color: var(--color-bg);
    display: flex;
    justify-content: center;
    gap:0 15px;
    align-items: baseline;
    font-family: "Roboto Condensed", sans-serif;  
    margin-bottom: 15px;
}

#schedule .scheduleItem .scheduleItemMeta .scheduleItemDate{
    font-weight: 700;
    font-size: 4.375rem;
}

#schedule .scheduleItem .scheduleItemMeta .scheduleItemDay{
    font-weight: 700;
    font-size: 2.375rem;
}

#schedule .scheduleItem .scheduleItemMeta .scheduleItemTime{
    font-size: 2.375rem;
    font-weight: 300;
}

#schedule .scheduleItem .scheduleItemOpponent{
    display: flex;
    align-items: center;
    gap:0 18px;
    background: url("../img/top/icn_vs.png") no-repeat left center;
    background-size: 42px 33px;
    padding-left: 60px;
    margin: 0 10px 20px 10px;
}

#schedule .scheduleItem .scheduleItemOpponent .scheduleItemOpponentImg{
    width: 77px;
    max-height: 77px;
}

#schedule .scheduleItem .scheduleItemOpponent .scheduleItemOpponentImg img{
    object-fit: cover;
    width: 77px;
    height: 77px;
}

#schedule .scheduleItem .scheduleItemOpponent .scheduleItemOpponentName{
    color: var(--color-bg);
    font-size: 0.875rem;
    flex: 1;
    line-height: var(--line-height-base02);
}

#schedule .scheduleItem .scheduleItemBtnFlex{
    display: flex;
    gap: 6px;
}

#schedule .scheduleItem .scheduleItemBtnFlex .btnTickets,
#schedule .scheduleItem .scheduleItemBtnFlex .btnResult{
    width: 184px;
    height: 46px;
    border:none;
}

#schedule .scheduleItem .scheduleItemBtnFlex .btnTickets a,
#schedule .scheduleItem .scheduleItemBtnFlex .btnResult a{
    padding-left: 15px;
}

#schedule .scheduleItem .scheduleItemBtnFlex .btnResult{
    background: var(--color-green01);
}

#schedule .scheduleItem .scheduleItemBtnFlex .btnResult a:after{
    background: var(--color-deepgreen01);
    color: var(--color-text);
    border-radius: 0 4px 4px 0;
}

#schedule .scheduleItem .scheduleItemBtnFlex .btnResult:before,
#schedule .scheduleItem .scheduleItemBtnFlex .btnTickets:before{
    background: rgba(255,255,255,.4);
}

#schedule .scheduleItem .scheduleItemBtnFlex .btnTickets{
    background: var(--color-lightpurple01);
    color: var(--color-bg);
}

#schedule .scheduleItem .scheduleItemBtnFlex .btnTickets a:after{
    background: var(--color-purple01);
    border-radius: 0 4px 4px 0;
}

#schedule .scheduleHeader{
    margin-top: -45px;
}

#schedule .btnDesign{
    margin: 0 auto;
}

#news{
    background: url("../img/top/news_bg.jpg") no-repeat center top var(--color-green01);
    background-size: 1920px auto;
}

#news .newsInner{
    max-width: 1280px;
    margin: 0 auto;
    padding: 80px 40px;
}

#news h2::before {
  background: var(--color-bg);
}

#news .newsCategoryList{
    display: flex;
    gap:6px;
    margin-bottom: 20px;
}

#news .newsCategoryList button{
    background: var(--color-text);
    color: var(--color-bg);
    border: 1px solid var(--color-bg);
    font-size: 1.125rem;
    border-radius: 4px;
    width: 90px;
    height: 30px;
    display: inline-block;
    text-align: center;
    line-height: 30px;
    font-family: "Roboto Condensed", sans-serif;
    transition: all 0.3s ease; 
}

#news .newsCategoryList li.on button{
    background: var(--color-lightpurple01);
    width: 110px;
}

#news .newsList{
    display: flex;
    flex-wrap: wrap;
    gap:30px 2.25%;
    margin-bottom: 60px;
}

#news .newsList .newsItem{
    background:var(--color-text);
    color:var(--color-bg);
    width: calc((100% - (2.25% * 3)) / 4);
}

#news .newsList .newsItem a .newsItemImg{
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background-color: #000000;
}

#news .newsList .newsItem a .newsItemImg img{
    transition: transform 0.3s ease;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#news .newsList .newsItem a:hover .newsItemImg img{
    transform: scale(1.15);
}

#news .newsList .newsItem .newsItemImg{
}

#news .newsList .newsItem .newsItemContent{
    padding: 10px 23px 20px 23px;
    position: relative;
}

#news .newsList .newsItem:nth-of-type(-n+2) .newsItemContent:before{
    content: "NEW";
    position: absolute;
    font-weight: 700;
    font-family: "Roboto Condensed", sans-serif;
    font-size: 1.0625rem;
    color: var(--color-red01);
    top: 15px;
    left: 25px;
}

#news .newsList .newsItem:nth-of-type(-n+2) .newsItemContent:after{
    content: " ";
    background: var(--color-red01);
    font-family: "Roboto Condensed", sans-serif;
    width: 24px;
    height: 1px;
    top: 22px;
    left: 62px;
    position: absolute;
    display: block;
}

#news .newsList .newsItem .newsItemCategory{
    border-radius: 4px;
    background:var(--color-bg);
    color:var(--color-text);
    font-family: "Roboto Condensed", sans-serif;
    float: right;
    margin-bottom: 10px;
    padding: 6px 4px 4px;
}

#news .newsList .newsItem .newsItemTtl{
    clear: both;
    line-height: var(--line-height-base02);
    margin-bottom: 15px;
    
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;    
}

#news .newsList .newsItem .newsItemDate{
    font-family: "Roboto Condensed", sans-serif;
    font-size: 1.0625rem;
    color:var(--color-gray02);
}

#news .newsEmpty{
    font-size: 1.125rem;
    padding: 60px 0 150px;
    text-align: center;
}

#news .btnDesign{
    margin: 0 auto;
}

#reborn{
    background: url("../img/top/reborn_bg.jpg") no-repeat center bottom;
    background-size: cover;
    position: relative;
    overflow: hidden;
}

#reborn:after{
    content: "GREEN WARRIORS";
    font-family: "Roboto Condensed", sans-serif;
    font-size: 9.5rem;
    position: absolute;
    bottom: -22px;
    left: 0;
    width: 100%;
    text-align: center;
    opacity: 0.1;
    font-weight: 900;
}

#reborn .rebornInner{
    max-width: 1280px;
    padding: 110px 40px 175px;
    margin: 0 auto;
}

#reborn .blockFlex{
    display: flex;
    justify-content: space-between;
    align-items: anchor-center;
    gap:0 60px;
    margin-bottom: 15px;
    position: relative;
    align-items: baseline;
}

#reborn .blockFlex .rebornLogo{
    width: 566.5px;
    position: absolute;
    margin-left: -72px;
    margin-top: -86px;
}

#reborn .blockFlex .rebornTxt{
    padding-left: 38.75%;
    flex: 1;
}

#reborn .blockFlex h2{
    max-width: 605px;
    margin-bottom: 70px;
    padding: 0;
}

#reborn .blockFlex h2:before,
#reborn .blockFlex h2:after{
    display: none;
}

#reborn .blockFlex .rebornTxt p{
    line-height: var(--line-height-base01);
    margin-bottom: 1em;
}

#reborn .blockFlex .rebornTxt .teamName{
    line-height: 1;
    font-size: 2.5rem;
    margin-bottom: 45px;
    font-weight: 700;
}

#reborn .btnDesign{
    margin: 0 auto;
}

#players .playersInner{
    max-width: 1280px;
    margin: 0 auto;   
    padding: 80px 40px;
    position: relative;
}

#players .playersSwiper {
    overflow: hidden;
}

#players .playersSwiper .swiper-wrapper {
    padding-left: 0; /* 左固定 */
}

#players .playersSwiper {
    margin-right: calc((100vw - 1200px) / -2);
    margin-bottom: 60px;
}

#players .playersSwiper .swiper-slide {
    max-width: 388px;
    position: relative;
}

#players .playersSwiper .swiper-slide a{
  pointer-events: none;
}

#players .playersSwiper .swiper-slide .normal {
  display: block;               
  width: 100%;
  height: auto;
  opacity: 1;                    
  transition: opacity 0.3s ease; 
    pointer-events: none;
}

#players .playersSwiper .swiper-slide .hover {
  display: block;            
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  opacity: 0;                   
  transition: opacity 0.3s ease;
}

#players .btnDesign{
    margin: 0 auto;
}

#officelContents .officelContentsInner{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    background:var(--color-bg);
    gap:2px;
}

#officelContents .officelContentsInner > div{
    width:calc(50% - 1px) ;
    text-align: center;
}

#officelContents .heading{
    text-align: center;
    font-family: "Roboto Condensed", sans-serif;    
    font-size: 2.8125rem;
    font-weight:700;
    margin-bottom: 25px;
}

#officelContents .heading span{
    font-size: 3.4375rem;
}

#officelContents .comingsoon{
    position: relative;
}

#officelContents .comingsoon:before{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 1;
}

#officelContents .comingsoon:after{
    content: "coming soon";
    font-family: "Roboto Condensed", sans-serif;    
    font-size: 3rem;
    font-weight:700;
    position: absolute;
    top: 50%;
    left: 50%;
    transform:  translateY(-50%) translateX(-50%);   
    z-index: 2;
    width: 100%;
}

#officelContents .officelGoods{
    background:var(--color-lightpurple01);
}

#officelContents .officelGoods img{
    object-fit:contain;
    height: 100%;    
}

#officelContents .officelSns{
    background:var(--color-green01);
    padding: 3% 0;
}

#officelContents .officelSns ul{
    display: flex;
    gap:0 32px;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

#officelContents .officelSns ul .facebook{ width: 39px;}
#officelContents .officelSns ul .x{ width: 30px;}
#officelContents .officelSns ul .instagram{ width: 36px;}
#officelContents .officelSns ul .youtube{ width: 41px;}
#officelContents .officelSns ul .tiktok{ width: 85px;}

#officelContents .officelSns .txt{
    font-size: 1.875rem;
    font-weight: 700;
    font-family: "Roboto Condensed", sans-serif;       
}

#officelContents .officelSns .txt span{
    display: inline-flex;
    align-items: center;
    gap: 0 5px;
}

#officelContents .officelSns .txt span::before,
#officelContents .officelSns .txt span::after {
  content: "";
  width:40px;
  height: 1px;
  background-color: currentColor;
  display: inline-block;
}

#officelContents .officelSns .txt span::before {
  transform: rotate(60deg);
}

#officelContents .officelSns .txt span::after {
  transform: rotate(-60deg);
}

#officelContents .officelFanclub{
    background: url("../img/top/bg_fanclub.jpg") no-repeat center top;
    background-size: cover;
    position: relative;
    transition: .3s ease;
}

#officelContents .officelFanclub .btnFlex{
    position: absolute;
    top: 74%;
    left: 50%;
    transform: translateX(-50%);    
    display: flex;
    gap:10px;
    max-width: 90%;
}

#officelContents .officelFanclub .btnFlex .btnDesign{
    width: 300px;
    height: 46px;
    background: var(--color-lightpurple01);
    border-color:var(--color-purple01);
    color: var(--color-bg);
}

#officelContents .officelFanclub .btnFlex .btnDesign:before{
    background: var(--color-text);
}

#officelContents .officelFanclub .btnFlex .btnDesign a:after{
    background:var(--color-purple01);
    color: var(--color-text);
    font-size: .375rem;
}

#officelContents .officelFanclub .btnFlex .btnDesign:hover{
    color: var(--color-bg);
    background: var(--color-purple01);
}

#officelContents .officelFanclub .btnFlex .btnDesign:hover a:after{
    background: var(--color-lightpurple01);
    color: var(--color-text);
}

#tickets{
    position: relative;
    border-top: 2px solid var(--color-bg);
    border-top: 2px solid var(--color-bg);
}

#tickets .ticketsInner{
    position: absolute;
    top: 0;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
    max-width: 1280px;
    width: 100%;
    padding: 0 40px;
    display: flex;
    align-items: center;
    justify-content: end;
}

#tickets h3{
    color:var(--color-black01);
    margin-right: 9.140625%;
}

#tickets .btnDesign span:before{
    content: url("../img/top/icn_tickets.svg");
    width: 33px;
    display: inline-block;
}

#tickets .btnDesign:hover span:before{
    content: url("../img/common/icn_tickets.svg");
}

#partner{
    background:var(--color-gray01);
}

#partner .partnerInner{
    padding: 85px 40px 50px;
    max-width: 1280px;
    margin: 0 auto;
}

#partner .parthnerBnr{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap:28px 2%;
    margin-bottom: 55px;
}

#partner .parthnerBnr li{
    max-width: 220px;
    width: 18.33%;
}

#partner .btnFlex{
    display: flex;
    gap:0 27px;
    justify-content: center;
}

#partner .btnFlex .btnDesign{
    width: 315px;
}

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

    #schedule .scheduleSwiper{
        margin-right: -40px;
    }    
    
    #schedule .scheduleHeader,
    #players .playersHeader{
        padding: 0 40px !important;
    }
    
        
}
@media screen and (max-width: 1280px) {  
    #kv .kvResult{
        top: inherit;
        bottom: 0;
    }
    #news .newsCategoryList button {
      width: 70px;
      font-size: 1rem;
    }
    
    #news .newsCategoryList button.on {
      width: 90px;
    }
    
    #reborn .blockFlex .rebornLogo {
      max-width: 47.208333333%;
      margin-top: 0;
    }
    
    #officelContents .officelFanclub .btnFlex{
        width: 90%;
    }    
    
    #tickets h3 {
      margin-right: 4vw;
    }
    
    #players .playersSwiper{
        margin-right: -40px;
    }
    
}

@media screen and (max-width: 1000px) {  
    
    #tickets h3 {
      margin-right: 3vw;
    }
    
    
    #tickets img{
        margin: 0 -15% 0 -35%;
        width: 140%;
        max-width: inherit;
    }
        
}

@media screen and (max-width: 767px) {  
    #kv{
        margin-bottom:  calc(-85vw / 7.5);
    }

    #kv .kvSwiper{
        margin-bottom: 0;
    }

    #kv .kvSwiper .spOnly{
        display: block;
    }    

    #kv .swiper-controls{
        padding: 0 calc(40vw / 7.5);
        bottom: calc(120vw / 7.5);
        gap:calc(33vw / 7.5);
        justify-content: center;
    }

    #kv .swiper-pagination{
        gap: calc(35vw / 7.5);
    }

    #kv .swiper-pagination .swiper-pagination-bullet{
        width: calc(60vw / 7.5);
        height: calc(6vw / 7.5);
    }

    #kv .swiper-stop{
        width: calc(52vw / 7.5);
        height: calc(52vw / 7.5);
    }

    #kv .kvResult{
        position: inherit;
        right: inherit;
        top: inherit;
        text-align: right;
        width: 100%;
        top:calc(-85vw / 7.5);
    }

    #kv .kvResult .kvResultRanking{
        height: calc(85vw / 7.5);
        padding-left: calc(40vw / 7.5);
        padding-right: calc(40vw / 7.5);

        clip-path: polygon(
            12px 0,
            100% 0,
            100% 100%,
            0 100%
        );  
    }

    #kv .kvResult .kvResultRanking .kvResultRankingNum{
        font-size: calc(74.5vw / 7.5);
    }

    #kv .kvResult .kvResultRanking .kvResultRankingNum:before{
        font-size: calc(41.5vw / 7.5);
        padding-right: calc(40vw / 7.5);
    }

    #kv .kvResult .kvResultRanking .kvResultRankingNum:after{
        font-size: calc(31vw / 7.5);
    }

    #kv .kvResult .kvResultContent{
        background: var(--color-gray01);
        padding: calc(40vw / 7.5);
    }

    #kv .kvResult .kvResultContent .kvResultHeading{
        font-size: calc(60vw / 7.5);
        margin-bottom: calc(25vw / 7.5);
    }

    #kv .kvResult .kvResultContent .kvResultHeading span{
        font-size: calc(26vw / 7.5);
    }

    #kv .kvResult .kvResultContent .kvResultCompetition{
        font-size:calc(25vw / 7.5);
        margin-bottom: calc(25vw / 7.5);
    }

    #kv .kvResult .kvResultContent .kvResultScore{
        margin: 0 0  calc(20vw / 7.5) 0;
        font-size:calc(31vw / 7.5);
    }

    #kv .kvResult .kvResultContent .kvResultScore td{
        padding:calc(20vw / 7.5) 0;
    }

    #kv .kvResult .kvResultContent .kvResultScore .circle{
        width: calc(100vw / 7.5);
        height: calc(100vw / 7.5);
        border-radius:  calc(50vw / 7.5);
        margin:  calc(10vw / 7.5) auto;
    }

    #kv .kvResult .kvResultContent .kvResultScore .score{
        font-size: calc(77vw / 7.5);
    }

    #kv .kvResult .kvResultContent .kvResultScore .kvResultDate{
        padding: calc(25vw / 7.5) 0;
    }

    #kv .kvResult .kvResultContent .kvResultBtnFlex .btnDesign{
        width: calc(324vw / 7.5);
        height:calc(65vw / 7.5);
        font-size: calc(27vw / 7.5);
    }

    #kv .kvResult .kvResultContent .kvResultBtnFlex .btnDesign a {
      padding-left: calc(20vw / 7.5);
    }

    #kv .kvResult .kvResultContent .kvResultBtnFlex .btnDesign a::after {
      font-size: calc(10vw / 7.5);
    }

    #kv .bx-controls{
        left: 50%;
        gap:0;
        padding-right:  calc(85vw / 7.5);
        transform: translateX(-50%);
        bottom: calc(120vw / 7.5);
    }

    #kv .bx-pager.bx-default-pager a {
      width: calc(60vw / 7.5);
      height: calc(6vw / 7.5);
      margin: 0  calc(12vw / 7.5);
    }

    #schedule{
    }

    #schedule .scheduleInner{
        padding:calc(120vw / 7.5) calc(40vw / 7.5);
    }

    #schedule .scheduleCategoryList{
        gap:calc(10vw / 7.5);
        margin-bottom: calc(45vw / 7.5);
    }

    #schedule .scheduleCategoryList button{
        font-size: calc(25vw / 7.5);
        width: calc(144vw / 7.5);
        height: calc(50vw / 7.5);
        line-height: calc(50vw / 7.5);
    }

    #schedule .scheduleCategoryList li.on button{
         width: calc(144vw / 7.5);
    }
    
    #schedule .scheduleHeader {
      margin: calc(-90vw / 7.5) 0 0 0;
    }
    
    #schedule .scheduleSwiper{
        margin-right: calc(-40vw / 7.5);
        margin-top:  calc(20vw / 7.5);
    }    

    #schedule .scheduleSwiper .swiper-slide {
        max-width: calc(564vw / 7.5);
    }
    
    #schedule .scheduleItem{
        width: calc(560vw / 7.5) !important;
        padding: 0 calc(20vw / 7.5) calc(20vw / 7.5)  calc(20vw / 7.5) ;
    }

    #schedule .scheduleItem .scheduleItemPlace{
        font-size: calc(20vw / 7.5);
        min-height:calc(48vw / 7.5);
        padding:  calc(13vw / 7.5) 0 calc(13vw / 7.5) calc(120vw / 7.5);
        padding-left: calc(120vw / 7.5);
        margin: 0 calc(-20vw / 7.5) calc(20vw / 7.5) calc(-20vw / 7.5);
    }

    #schedule .scheduleItem .scheduleItemPlace:before{
        width:  calc(105vw / 7.5);
        font-size:calc(24vw / 7.5);
    }

    #schedule .scheduleItem .scheduleItemTtl{
        font-size:calc(21vw / 7.5);
        margin-bottom: calc(20vw / 7.5);
    }

    #schedule .scheduleItem .scheduleItemMeta{
        gap:0 calc(25vw / 7.5);
        margin-bottom: calc(30vw / 7.5);
    }

    #schedule .scheduleItem .scheduleItemMeta .scheduleItemDate{
        font-size: calc(98vw / 7.5);
    }

    #schedule .scheduleItem .scheduleItemMeta .scheduleItemDay,
    #schedule .scheduleItem .scheduleItemMeta .scheduleItemTime{
        font-size: calc(53vw / 7.5);
    }

    #schedule .scheduleItem .scheduleItemOpponent{
        gap:0 calc(25vw / 7.5) ;
        background: url("../img/top/icn_vs.png") no-repeat left center;
        background-size: calc(60vw / 7.5) auto;
        padding-left:calc(87vw / 7.5) ;
        margin: 0 calc(15vw / 7.5) calc(35vw / 7.5) ;
    }

    #schedule .scheduleItem .scheduleItemOpponent .scheduleItemOpponentImg{
        width:  calc(108vw / 7.5);
        max-height:  calc(108vw / 7.5);
    }

    #schedule .scheduleItem .scheduleItemOpponent .scheduleItemOpponentImg img{
        width:calc(108vw / 7.5);
        height: calc(108vw / 7.5);
    }

    #schedule .scheduleItem .scheduleItemOpponent .scheduleItemOpponentName{
        font-size:calc(20vw / 7.5);
    }

    #schedule .scheduleItem .scheduleItemBtnFlex{
        gap:calc(8vw / 7.5);
    }

    #schedule .scheduleItem .scheduleItemBtnFlex .btnTickets,
    #schedule .scheduleItem .scheduleItemBtnFlex .btnResult{
        width: calc(258vw / 7.5);
        height:calc(65vw / 7.5);
    }

    #schedule .scheduleItem .scheduleItemBtnFlex .btnTickets a,
    #schedule .scheduleItem .scheduleItemBtnFlex .btnResult a{
        padding-left: calc(20vw / 7.5);
    }
    
    #schedule .bx-controls {
        right: 21px;
    }

    #news{
        background: url("../img/top/news_bg_sp.jpg") no-repeat center top var(--color-green01);
        background-size: 100% auto;
    }

    #news .newsInner{
        padding:calc(120vw / 7.5) calc(40vw / 7.5);
    }

    #news .newsCategoryList{
        display: flex;
        gap: 6px;
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        background: var(--color-bg);
        padding:calc(20vw / 7.5) calc(40vw / 7.5);
        margin: 0 calc(-40vw / 7.5)  calc(50vw / 7.5);
        align-items: center;
    }
    
    #news .newsCategoryList:before{
        content: url("../img/common/swiper_arrow_hover.svg");
        transform: scaleX(-1);
    }    
    
    #news .newsCategoryList li{
          flex-shrink: 0;
    }

    #news .newsCategoryList button{
        font-size: calc(25vw / 7.5);
        width:calc(125vw / 7.5);
        height: calc(50vw / 7.5);
        line-height: calc(50vw / 7.5);
    }

    #news .newsCategoryList li.on button{
        background: var(--color-orenge01);
        width:calc(125vw / 7.5);
    }

    #news .newsList{
        gap:calc(20vw / 7.5);
        margin-bottom:calc(70vw / 7.5);
    }

    #news .newsList .newsItem{
        width: calc(50% - calc(10vw / 7.5));
    }

    #news .newsList .newsItem .newsItemContent{
        padding: calc(20vw / 7.5);
    }

    #news .newsList .newsItem:nth-of-type(-n+2) .newsItemContent:before{
        content: "NEW";
        font-size: calc(32vw / 7.5);
        top:calc(25vw / 7.5);
        left:calc(20vw / 7.5);
    }

    #news .newsList .newsItem:nth-of-type(-n+2) .newsItemContent:after{
        content: " ";
        width: calc(40vw / 7.5);
        height: calc(2vw / 7.5);
        top: calc(38vw / 7.5);
        left:  calc(90vw / 7.5);
    }

    #news .newsList .newsItem .newsItemCategory{
        margin-bottom: calc(20vw / 7.5);
        font-size: calc(24vw / 7.5);
    }

    #news .newsList .newsItem .newsItemTtl{
        font-size: calc(28vw / 7.5);
        margin-bottom: calc(25vw / 7.5);

        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;    
    }

    #news .newsList .newsItem .newsItemDate{
        font-size: calc(30vw / 7.5);
    }

    #news .newsEmpty{
        font-size: calc(30vw / 7.5);
        padding: calc(100vw / 7.5) 0 calc(150vw / 7.5);
    }

    #reborn{
        background: url("../img/top/reborn_bg_sp.jpg") no-repeat center bottom;
        background-size: cover;
    }
    
    #reborn:after{
        font-size: calc(86vw / 7.5);
        bottom:  calc(-12vw / 7.5);
    }
    
    #reborn .rebornInner{
        padding: calc(120vw / 7.5) 0;
    }

    #reborn .blockFlex{
        flex-direction: column;
        gap:0;
        margin-bottom:calc(60vw / 7.5);
    }

    #reborn .blockFlex .rebornLogo{
        position: inherit;
        width: calc(618vw / 7.5);
        margin: calc(-25vw / 7.5) auto calc(-65vw / 7.5);
        top: inherit;
        left: inherit;
        max-width: inherit;
    }

    #reborn .blockFlex .rebornTxt{
        flex: 1;
        text-align: center;
        padding: 0 calc(40vw / 7.5);
    }

    #reborn .blockFlex h2{
        max-width: calc(675vw / 7.5);
        margin:0 auto ;
    }

    #reborn .blockFlex .rebornTxt p{
        margin-bottom: 1.5em;
    }
    
    #reborn .blockFlex .rebornTxt p:last-child{
        margin-bottom: 0;
    }

    #reborn .blockFlex .rebornTxt .teamName{
        font-size: calc(41vw / 7.5);
        margin-bottom: calc(50vw / 7.5);
    }

    #reborn .btnDesign{
        margin: 0 auto;
    }
    
    #players h2{
        margin-bottom: calc(40vw / 7.5);
    }

    #players .playersInner{
        padding:calc(120vw / 7.5) calc(40vw / 7.5);
    }
        
    #players .playersSwiper{
        margin-right: calc(-40vw / 7.5);
        margin-bottom: calc(70vw / 7.5);
    }    

    #players .playersSwiper .swiper-slide {
        max-width: calc(464vw / 7.5);
    }
    
    #players .btnDesign{
        margin: 0 auto;
    }
    
    #officelContents .officelContentsInner{
        flex-direction: column;
        gap:2px;
    }

    #officelContents .officelContentsInner > div{
        width: 100%;
        height: calc(300vw / 7.5);
    }

    #officelContents .heading{
        font-size:  calc(63vw / 7.5);
        margin-bottom: calc(30vw / 7.5);
    }

    #officelContents .heading span{
        font-size: calc(77vw / 7.5);
    }

    #officelContents .officelSns{
        padding: calc(30vw / 7.5) 0;
    }

    #officelContents .officelSns ul{
        gap:0 calc(35vw / 7.5) ;
        margin-bottom: calc(20vw / 7.5);
    }

    #officelContents .officelSns ul .facebook{ width:  calc(55vw / 7.5);}
    #officelContents .officelSns ul .x{ width: calc(42vw / 7.5);}
    #officelContents .officelSns ul .instagram{ width: calc(51vw / 7.5);}
    #officelContents .officelSns ul .youtube{ width: calc(57vw / 7.5);}
    #officelContents .officelSns ul .tiktok{ width: calc(119vw / 7.5);}

    #officelContents .officelSns .txt{
        font-size:calc(42vw / 7.5);
    }

    #officelContents .officelSns .txt span::before,
    #officelContents .officelSns .txt span::after {
      width:calc(45vw / 7.5);
    }

    #officelContents .comingsoon:after{
        font-size: calc(77vw / 7.5);
    }
    
    #officelContents .officelGoods .heading + p{
        font-size: calc(32vw / 7.5);
    }

    #officelContents .officelFanclub{
        background: url("../img/top/bg_fanclub_sp.jpg") no-repeat center top;
        background-size: cover;
    }

    #officelContents .officelFanclub .btnFlex{
        top: calc(200vw / 7.5);
        width: calc(670vw / 7.5);
        gap:calc(18vw / 7.5);
    }

    #officelContents .officelFanclub .btnFlex .btnDesign{
        width: calc(326vw / 7.5);
        height: calc(65vw / 7.5);
    }
    
    #tickets img{
        margin: 0;
        width: auto;
        max-width:100%;
    }    

    #tickets .ticketsInner{
        padding:0 calc(40vw / 7.5);
        top: 70%;
        width: 100%;
        justify-content: space-between;
    }

    #tickets .btnDesign{
        width:  calc(380vw / 7.5);
    }

    #tickets .btnDesign a{
        padding-left: calc(15vw / 7.5);
        font-size: calc(26vw / 7.5);
    }

    #tickets .btnDesign span:before{
        content: url("../img/top/icn_tickets.svg");
        width:  calc(49vw / 7.5);
    }

    #tickets .btnDesign:hover span:before{
        content: url("../img/common/icn_tickets.svg");
        width:  calc(49vw / 7.5);
    }
    
    #partner .partnerInner{
        padding: calc(120vw / 7.5) calc(40vw / 7.5) ;
    }

    #partner .parthnerBnr{
        gap:calc(38vw / 7.5);
        margin-bottom: calc(70vw / 7.5) ;
    }

    #partner .parthnerBnr li{
        max-width: inherit;
        width: calc(316vw / 7.5);
    }

    #partner .btnFlex{
        gap:calc(35vw / 7.5) 0;
        flex-direction: column;
        align-items: center;
    }

    #partner .btnFlex .btnDesign{
        width:calc(485vw / 7.5) ;
    }
  
}

/* swiper*/

.swiper-header{
    min-height: 50px;
    position: absolute;
    left: calc(50% + 45px);
    transform: translateX(-50%);
    max-width: 1200px;
    position: relative;
    
}

.swiper-header .swiper-controls{
    display: flex;
    gap:20px;
    align-items: center;
    justify-content: flex-end;
    position: relative;
}

.swiper-header .swiper-controls .swiper-button-disabled{
    opacity: 0.4;
    pointer-events: none;
}

.swiper-header .swiper-controls .swiper-prev{
    width: 19px;
    height: 8px;
    background-image: url("../img/common/swiper_arrow.svg");  
    transform: scaleX(-1);
    text-indent: -9999px;
}

.swiper-header .swiper-controls .swiper-prev:hover{
    background-image: url("../img/common/swiper_arrow_hover.svg");
}

.swiper-header .swiper-controls .swiper-next{
    width: 19px;
    height: 8px;
    background: url("../img/common/swiper_arrow.svg") no-repeat center center;
    transition: background-image 0.3s ease; 
    order: 2;
    text-indent: -9999px;
}

.swiper-header .swiper-controls .swiper-next:hover{
    background-image: url("../img/common/swiper_arrow_hover.svg");
}

.swiper-header .swiper-controls .line {
  width: 1px;          
  height: 50px;        
  background: #808080; 
  order: 1; 
  position: absolute;
  right: 30px;    
}

.swiper-header .swiper-controls .swiper-button-lock + .line{
    display: none;
}

.swiper-header .swiper-controls .swiper-stop{
    width: 26px;
    height: 26px;
    background: url("../img/common/swiper_stop_gray.png") no-repeat left top;
     background-size: 100%;
    text-indent: -9999px;
        transition: all 0.3s ease; 
    position: initial;
    bottom: inherit;
    left: inherit;
}

.swiper-header .swiper-controls .swiper-stop:hover{
    background: url("../img/common/swiper_stop_gray_hover.png") no-repeat left top;
}

.swiper-header .swiper-controls .swiper-stop.is-paused{
    background: url("../img/common/swiper_start_gray.png") no-repeat left top;
    background-size: 100%;
}

.swiper-header .swiper-controls .swiper-stop.is-paused:hover{
    background: url("../img/common/swiper_start_gray_hover.png") no-repeat left top;
    background-size: 100%;
}



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

    #schedule .scheduleHeader,
    #players .playersHeader{
        padding: 0 !important;
        left: inherit;
        transform: translateX(0);
    }
    
    .swiper-header .swiper-controls{
        gap:calc(25vw / 7.5);
    }

    .swiper-header .swiper-controls .line {
        right: calc(19px + calc(12.5vw / 7.5));
        height: calc(65vw / 7.5);   
    }

    .swiper-header .swiper-controls .swiper-stop{
        margin-right: calc(5vw / 7.5);
    }
    
}