.page-kfbattle2023 .top-banner {
    max-width: 1366px;
    min-height: 600px;
    max-height: 1200px;
    margin: 0 auto;
    background: url("/common/design/user/img/kfbattle2023/bg-banner.jpg") center no-repeat;
    background-size: cover;
}

.page-kfbattle2023 img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.page-kfbattle2023 .box-clock {
    background: rgba(255, 255, 255, 0.5);
    border: 3px solid #565656;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
}

.page-kfbattle2023 .clock-time {
    gap: 10px;
    justify-content: center;
    align-items: center;
}

.page-kfbattle2023 .icon-clock {
    width: 53px;
}

.page-kfbattle2023 .text-clock-banner {
    color: #0f0f0f;
    font-size: 18px;
    line-height: 30px;
    font-weight: 700;
}

.page-kfbattle2023 .hour {
    font-size: 24px;
    line-height: 30px;
    color: #0f0f0f;
    font-weight: 700;
}

.page-kfbattle2023 .link-banner {
    font-size: 21px;
    line-height: 28px;
    background-color: #c10000;
    color: #FFFFFF;
    padding: 10px 40px;
    border-radius: 50px;
    position: relative;
    margin-top: 10px;
}

.page-kfbattle2023 .link-banner img {
    width: 25px;
    margin-left: 5px;
}

.page-kfbattle2023 .box-banner {
    width: 60%;
    margin: 0 auto;
    padding: 20px 0;
}

.page-kfbattle2023 .box-time {
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    padding-top: 20px;
}

.page-kfbattle2023 .img-bot {
    width: 39%;
}

.page-kfbattle2023 .hashtag-banner {
    font-size: 20px;
    line-height: 35px;
    color: #b3b3b3;
    padding: 5px 15px;
    border-radius: 50px;
    border: 2px solid #b3b3b3;
    width: fit-content;
    margin: 20px auto 0;
}

.page-kfbattle2023 .banner-nav ul li a::after {
    content: none;
}

.page-kfbattle2023 .banner-nav {
    background-color: #5bbcc9;
    min-height: fit-content;
    max-height: max-content;
    padding: 11px 0;
}

.page-kfbattle2023 .banner-nav ul li a span {
    font-size: 20px;
    line-height: 35px;
}

.page-kfbattle2023 .intro {
    padding: 50px 0;
}

.page-kfbattle2023 .open-part {
    font-size: 40px;
    line-height: 50px;
    font-weight: 700;
    padding: 20px 0;
    color: #FFFFFF;
    margin-bottom: 30px;
    clip-path: polygon(0 0, 0 0, 5% 50%, 0 100%, 0 100%, 55% 100%, 100% 99%, 100% 100%, 95% 50%, 99% 0, 100% 0, 53% 0);
}

.page-kfbattle2023 .part-1 {
    background-color: #5499d3;
}

.page-kfbattle2023 .part-2 {
    background-color: #f1c92b;
}

.page-kfbattle2023 .part-3 {
    background-color: #a6ce2c;
}

.page-kfbattle2023 .text-intro {
    font-size: 18px;
    line-height: 25px;
    padding-bottom: 30px;
    font-weight: 700;
}

.page-kfbattle2023 .timeline-box {
    padding: 60px 0 130px;
}

.page-kfbattle2023 .timeline-box,
.page-kfbattle2023 .timeline-img {
    position: relative;
}

.page-kfbattle2023 .timeline-item {
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: absolute;
    transform: translate(-50%, 50%);
    font-size: 18px;
    line-height: 25px;
    width: max-content;
}

.page-kfbattle2023 .timeline-item-3,
.page-kfbattle2023 .timeline-item-2 {
    color: #fb9142;
}

.page-kfbattle2023 .timeline-item-1 {
    color: #1facb1;
}

.page-kfbattle2023 .timeline-item-1 {
    top: 53%;
    left: 32%;
}

.page-kfbattle2023 .timeline-item-2 {
    top: 53%;
    left: 62.2%;
}

.page-kfbattle2023 .timeline-item-3 {
    top: 6%;
    left: 100%;
}

.page-kfbattle2023 .timeline {
    background-color: #fafafa;
}

.page-kfbattle2023 .img-timeline {
    width: 20px;
}

.page-kfbattle2023 .how-to-join {
    padding: 50px 0;
}

.page-kfbattle2023 .rule-open {
    font-size: 40px;
    line-height: 50px;
    font-weight: 700;
    padding-bottom: 30px;
}

.page-kfbattle2023 .how-to-join .way-to-join {
    gap: 20px;
}

.page-kfbattle2023 .how-to-join .the-way {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 45px 35px;
    color: #000000;
    border-radius: 5px;
}

.page-kfbattle2023 .how-to-join .the-way .open-way {
    font-size: 24px;
    line-height: 36px;
    font-weight: 700;
}

.page-kfbattle2023 .how-to-join .the-way .detail-way {
    font-size: 16px;
    line-height: 30px;
}

.page-kfbattle2023 .yellow-shirt,
.page-kfbattle2023 .hashtag-twitter {
    height: 170px;
    padding-bottom: 30px;
}

.page-kfbattle2023 .mini-notice {
    font-size: 14px;
    line-height: 25px;
    padding-top: 20px;
    color: #000000;
    text-align: left;
}

.page-kfbattle2023 .bg-pink {
    background-color: #fff3f3;
}

.page-kfbattle2023 .bg-blue {
    background-color: #f2faff;
}

.page-kfbattle2023 .prize-event {
    background-color: #fffccb;
    padding: 80px 0 50px;
}

.page-kfbattle2023 .personal-design {
    padding: 50px 0;
}

.page-kfbattle2023 .total-player {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 15px;
}

.page-kfbattle2023 .item-ds-per {
    border-radius: 5px;
    min-height: fit-content;
    background-color: #f4f4f4;
    padding: 15px;
    width: 49%;
}

.page-kfbattle2023 .image-per {
    padding-bottom: 30px;
    gap: 20px;
}

.page-kfbattle2023 .box-item {
    width: 50%;
}

.page-kfbattle2023 .ava-idol {
    height: 240px;
    margin-bottom: 10px;
}

.page-kfbattle2023 .name-idol {
    font-size: 20px;
    font-weight: 700;
}

.page-kfbattle2023 .btn {
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.page-kfbattle2023 .but-link {
    font-size: 18px;
    line-height: 25px;
    border-radius: 5px;
    width: 240px;
    padding: 10px 0;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.page-kfbattle2023 .but-twit {
    background: #00aeff;
}

.page-kfbattle2023 .but-tool {
    background: #d20000;
}

.page-kfbattle2023 .but-twit img {
    width: 18px;
    margin-right: 5px;
}

.page-kfbattle2023 .line-marquee {
    position: relative;
}

.page-kfbattle2023 .box-note-marquee {
    width: 100%;
    padding: 12px;
    letter-spacing: 2px;
    font-weight: 500;
    margin-top: -2px;
    font-size: 18px;
    line-height: 28px;
    position: absolute;
    top: 45%;
}

.page-kfbattle2023 .note-marquee {
    background: transparent;
    color: #000;
}

.page-kfbattle2023 .rank-table {
    max-height: 740px;
    overflow-x: hidden;
    border: 1px solid #e0e0e0;
    margin-top: 30px;
}

.page-kfbattle2023 .rank-table .ranking-idol {
    justify-content: space-between;
    align-items: center;
    padding: 20px;
}

.page-kfbattle2023 .rank-table .info-rank {
    justify-content: center;
    align-items: center;
}

.page-kfbattle2023 .number-rank {
    padding-right: 20px;
}

.page-kfbattle2023 .number-rank,
.page-kfbattle2023 .total-rank {
    position: relative;
}

.page-kfbattle2023 .total-rank {
    width: 50px;
}

.page-kfbattle2023 .text-rank {
    position: absolute;
    transform: translate(-50%, 50%);
    top: 15%;
    left: 37%;
    font-size: 18px;
    font-weight: 700;
}

.page-kfbattle2023 .rank-table .gray-square {
    height: 90px;
    width: 90px;
    flex-shrink: 0;
    padding: 8px;
    margin-right: 10px;
}

.page-kfbattle2023 .info-rank .info-idol {
    padding-left: 8px;
}

.page-kfbattle2023 .info-idol .name-idol {
    font-size: 18px;
    line-height: 32px;
    font-weight: 700;
}

.page-kfbattle2023 .info-idol .name-group-idol {
    font-size: 16px;
    line-height: 20px;
}


.page-kfbattle2023 .button-rank .button-red,
.page-kfbattle2023 .button-rank .button-blue {
    font-size: 21px;
    line-height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 6px 40px;
    margin: 4px;
    border-radius: 5px;
    font-weight: 700;
}

.page-kfbattle2023 .button-red img,
.page-kfbattle2023 .button-blue img {
    width: 20px;
}

.page-kfbattle2023 .d-none {
    display: none;
}

.page-kfbattle2023 .button-red {
    background-color: #d20000;
}

.page-kfbattle2023 .button-blue {
    background-color: #1da1f2;
}

.page-kfbattle2023 .button-red a,
.page-kfbattle2023 .button-blue a {
    color: #FFFFFF;
}

.page-kfbattle2023 .rank-timer {
    padding-bottom: 70px;
}

.page-kfbattle2023 .rank-timer .open-rank {
    font-size: 30px;
    line-height: 35px;
    font-weight: 700;
    color: #343434;
    text-align: center;
    padding: 50px 0 30px;
}

.page-kfbattle2023 .broad-ranking {
    padding-bottom: 30px;
    margin: 0 auto;
}

.page-kfbattle2023 .tabs-sekigahara {
    justify-content: center;
}

.page-kfbattle2023 .tabs-sekigahara li a .tabs-a-ct {
    font-size: 20px;
    background-color: #FFFFFF;
    font-weight: 700;
    text-align: center;
    border-radius: 5px;
    padding: 10px 50px;
    margin: 0 8px;
    color: #adadad;
    border: 1px solid #adadad;
    height: 100%;
}

.page-kfbattle2023 .tabs-sekigahara li a.active .tabs-a-ct {
    background-color: #343434;
    border: none;
    color: #ffffff;
}

.page-kfbattle2023 .tabs-sekigahara li a .tabs-a-ct span {
    font-size: 14px;
}

.page-kfbattle2023 .ranking {
    padding: 50px 0;
}

/*New code */

.page-kfbattle2023 .final-result{
    background-color: #fffccb;
    padding: 20px;
    width: 925px;
    margin: 0 auto;
}

.page-kfbattle2023 .final-result .text-final .first-title {
    font-size: 30px;
    font-weight: bold;
    line-height: 36px;
    margin-bottom: 20px;
}

.page-kfbattle2023 .final-result .text-final .text{
    font-size: 17px;
    line-height: 20px;
    font-weight: 600;
}

.page-kfbattle2023 .countdown-final {
    padding: 25px 50px;
    background-color: #212121;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 415px;
    margin: 10px auto;
}

.page-kfbattle2023 .title-countdown {
    font-size: 20px;
    color: #ff0000;
    line-height: 36px;
    padding-bottom: 10px;
}

.page-kfbattle2023 .countdown-final .hour {
    font-weight: 700;
    line-height: 36px;
    font-size: 40px;
    color: #ffffff;
}

.page-kfbattle2023-sp .final-result {
    flex-direction: column;
    gap: 15px;
    padding: 10px;
    width: 100%;
    border-radius: 5px;
}

.page-kfbattle2023-sp .final-result .text-final .first-title {
    font-size: 18px;
    line-height: 25px;
    font-weight: bold;
    margin-bottom: 10px;
}

.page-kfbattle2023-sp .final-result .text-final .text {
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
}

.page-kfbattle2023-sp .countdown-final {
    width: 100%;
    padding:25px 45px;
}

.page-kfbattle2023-sp .title-countdown {
    font-size: 16px;
    line-height: 25px;
}

.page-kfbattle2023-sp .countdown-final .hour {
    font-size: 32px;
}

/*End New code */

.page-kfbattle2023-sp .box-banner {
    width: 100%;
}

.page-kfbattle2023-sp .box-time {
    flex-direction: column-reverse;
}

.page-kfbattle2023-sp .img-bot {
    width: 100%;
}

.page-kfbattle2023-sp .box-clock {
    border: 1px solid #565656;
    padding: 5px;
    margin-bottom: 5px;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.page-kfbattle2023-sp .icon-clock {
    width: 25px;
}

.page-kfbattle2023-sp .text-clock-banner {
    font-size: 11px;
    line-height: 18px;
}

.page-kfbattle2023-sp .hour {
    font-size: 15px;
    line-height: 25px;
}

.page-kfbattle2023-sp .link-banner {
    font-size: 14px;
    line-height: 20px;
    padding: 3px 15px;
    margin-top: 0;
    display: flex;
    align-items: center;
}

.page-kfbattle2023-sp .link-banner img {
    width: 15px;
    margin-left: 2px;
}

.page-kfbattle2023-sp .hashtag-banner {
    font-size: 12px;
    line-height: 15px;
    padding: 2px 10px;
    border: 1px solid #b3b3b3;
    margin: 10px auto 0;
}

.page-kfbattle2023-sp .top-banner {
    min-height: 350px;
    background: url(/common/design/user/img/kfbattle2023/bg-banner-sp.jpg) center no-repeat;
}

.page-kfbattle2023-sp .banner-nav ul li {
    width: fit-content;
    height: fit-content;
}


.page-kfbattle2023-sp .banner-nav {
    padding: 10px 0;
}

.page-kfbattle2023-sp .banner-nav ul li a span {
    font-size: 13px;
    line-height: 20px;
}

.page-kfbattle2023-sp .banner-nav ul li a {
    padding: 0;
}

.page-kfbattle2023-sp .open-part {
    font-size: 20px;
    line-height: 30px;
    font-weight: 700;
    padding: 10px 0;
    margin-bottom: 20px;
}

.page-kfbattle2023-sp .text-intro {
    font-size: 14px;
    line-height: 20px;
    padding-bottom: 20px;
}

.page-kfbattle2023-sp .intro {
    padding: 20px 0;
}

.page-kfbattle2023-sp .timeline-box {
    padding: 25px 0 55px;
    width: 340px;
    margin: 0 auto;
}

.page-kfbattle2023-sp .timeline-item {
    font-size: 12px;
    line-height: 15px;
}

.page-kfbattle2023-sp .img-timeline {
    width: 10px;
}

.page-kfbattle2023-sp .timeline-item-1 {
    top: 47%;
    left: 40%;
}

.page-kfbattle2023-sp .timeline-item-2 {
    top: -6%;
    left: 66.2%;
}

.page-kfbattle2023-sp .timeline-item-3 {
    top: 47%;
    left: 93%;
    align-items: flex-end;
}

.page-kfbattle2023-sp .how-to-join .the-way {
    padding: 10px;
    margin-bottom: 20px;
    flex-direction: row;
    gap: 10px;
}

.page-kfbattle2023-sp .how-to-join .the-way .image {
    flex-shrink: 0;
}

.page-kfbattle2023-sp .how-to-join .the-way .open-way {
    font-size: 16px;
    line-height: 18px;
    margin-bottom: 5px;
}

.page-kfbattle2023-sp .how-to-join .the-way .detail-way {
    font-size: 12px;
    line-height: 20px;
}

.page-kfbattle2023-sp .mini-notice {
    font-size: 10px;
    line-height: 15px;
    padding-top: 0;
}

.page-kfbattle2023-sp .way-to-join {
    flex-direction: column;
    gap: 0;
}

.page-kfbattle2023-sp .img-rule {
    height: fit-content;
    width: 100%;
    padding-bottom: 0;
}

.page-kfbattle2023-sp .yellow-shirt,
.page-kfbattle2023-sp .hashtag-twitter {
    height: 95px;
     width: 100%;
     padding-bottom: 0;
}

.page-kfbattle2023-sp .item-ds-per {
    width: 100%;
}

.page-kfbattle2023-sp .ava-idol {
    height: 150px;
}

.page-kfbattle2023-sp .name-idol {
    font-size: 12px;
}

.page-kfbattle2023-sp .but-link {
    font-size: 14px;
    line-height: 17px;
    border-radius: 5px;
    height: fit-content;
    padding: 10px 0;
}

.page-kfbattle2023-sp .but-twit img {
    width: 14px;
}

.page-kfbattle2023-sp .image-per {
    padding-bottom: 10px;
    gap: 5px;
}

.page-kfbattle2023-sp .box-note-marquee {
    font-size: 12px;
    top: 25%;
}

.page-kfbattle2023-sp .rank-table {
    margin-top: 10px;
}

.page-kfbattle2023-sp .rank-table .ranking-idol {
    padding: 10px;
    flex-direction: column;
    align-items: flex-start;
}

.page-kfbattle2023-sp .rank-table .info-rank {
    justify-content: space-between;
    width: 100%;
}

.page-kfbattle2023-sp .info-rank .info-idol {
    flex: 1;
}

.page-kfbattle2023-sp .info-idol .name-idol {
    font-size: 14px;
    line-height: 16px;
}

.page-kfbattle2023-sp .info-idol .name-group-idol {
    font-size: 12px;
}

.page-kfbattle2023-sp .rank-table .ranking-idol .button-rank {
    justify-content: space-between;
    display: flex;
    width: 100%;
}

.page-kfbattle2023-sp .button-rank .button-red,
.page-kfbattle2023-sp .button-rank .button-blue {
    width: calc((100% - 5px) / 2);
    padding: 5px;
}

.page-kfbattle2023-sp .button-red img,
.page-kfbattle2023-sp .button-blue img {
    width: 15px;
}

.page-kfbattle2023-sp .tabs-sekigahara {
    justify-content: center;
}

.page-kfbattle2023-sp .tabs-sekigahara li {
    width: calc(100% / 3);
}

.page-kfbattle2023-sp .tabs-sekigahara li a .tabs-a-ct span {
    font-size: 10px;
    line-height: 15px;
}

.page-kfbattle2023-sp .button-red a,
.page-kfbattle2023-sp .button-blue a {
    font-size: 12px;
}

.page-kfbattle2023-sp .tabs-sekigahara li a .tabs-a-ct {
    padding: 10px 5px;
    margin: 0 5px;
    font-size: 12px;
}