@charset "utf-8";


/* --------------------------------------------------
	Resetting default margin and padding
-------------------------------------------------- */

/* !HTML5 elements
---------------------------------------------------------- */
header,
footer,
nav,
section,
aside,
article {
    display: block;
}

/* !Reseting
---------------------------------------------------------- */
body {
    background: #1b1d22;
    font-family: "Noto Sans JP", sans-serif;
    color: #f2f1ee;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 400;
    letter-spacing: 0.02em;
    -webkit-text-size-adjust: none;
    font-feature-settings: "palt";
}

@media (max-width: 767px) {
    body {
        font-size: min(12px, 3.2vw);
    }
}

body,
div,
pre,
p,
blockquote,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
form,
fieldset,
th,
td,
input,
a,
textarea,
select,
span,
nav,
section,
header {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

input,
textarea {
    margin: 0;
    font-size: 100%;
    appearance: none;
    -webkit-appearance: none;
    border: none;
    outline: none;
}

label {
    cursor: pointer;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 100%;
}

fieldset,
img {
    border: 0;
}

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

address,
caption,
cite,
code,
dfn,
em,
th,
var {
    font-style: normal;
    font-weight: normal;
}

ol,
ul {
    list-style: none;
}

caption,
th {
    text-align: left;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 100%;
    font-weight: 500;
}

q:after,
q:before {
    content: '';
}

a,
input {
    /* outline: none; */
}

abbr,
acronym {
    border: 0;
}




/* !Clearfix
---------------------------------------------------------- */
.clearfix {
    display: block;
    min-height: 1%;
}

.clearfix:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}

* html .clearfix {
    height: 1%;
    /*\*/
    /*/
	height: auto;
	overflow: hidden;
	/**/
}

/* !Layout
---------------------------------------------------------- */
html {
    overflow-y: scroll;
}

body {}

@media print {

    html,
    html body {
        *zoom: 0.65;
    }
}



/* link
------------------------------------------------ */
a {
    color: #f2f1ee;
    text-decoration: none;
    transition: all 0.3s !important;
    -moz-transition: all 0.3s !important;
    /* Firefox */
    -webkit-transition: all 0.3s !important;
    /* Chrome&Safari */
}

a:hover {
    transition: all 0.3s !important;
    -moz-transition: all 0.3s !important;
    /* Firefox */
    -webkit-transition: all 0.3s !important;
    /* Chrome&Safari */
}


.op,
.op a,
.op img,
.op input {
    -webkit-transition: opacity 0.3s ease-out;
    -moz-transition: opacity 0.3s ease-out;
    -ms-transition: opacity 0.3s ease-out;
    transition: opacity 0.3s ease-out;
    -webkit-backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
}

.op:hover,
.op a:hover,
.op:hover img,
.op:hover input {
    opacity: .5;
    -webkit-opacity: .5;
    -moz-opacity: .5;
    filter: alpha(opacity=50);
    /* IE lt 8 */
    -ms-filter: "alpha(opacity=50)";
    /* IE 8 */
    -webkit-transition: opacity 0.3s ease-out;
    -moz-transition: opacity 0.3s ease-out;
    -ms-transition: opacity 0.3s ease-out;
    transition: opacity 0.3s ease-out;
    -webkit-backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
}

@media (max-width: 767px) {

    .op:hover,
    .op a:hover,
    .op:hover img,
    .op:hover input {
        opacity: 1;
        -webkit-opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        /* IE lt 8 */
        -ms-filter: "alpha(opacity=100)";
        /* IE 8 */
    }
}



/* !fs
------------------------------------------------ */
.visible-pc {
    display: block !important;
}

.visible-tab {
    display: none !important;
}

.visible-ts {
    display: none !important;
}

.visible-pc-only {
    display: block !important;
}


@media (max-width: 1024px) {
    .visible-tab {
        display: block !important;
    }

    .visible-pc-only {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .visible-pc {
        display: none !important;
    }

    .visible-ts {
        display: block !important;
    }
}


/* !fonts
------------------------------------------------ */
.fwb {
    font-weight: 700;
}

.fwm {
    font-weight: 500;
}

.vat {
    vertical-align: top !important;
}

.vam {
    vertical-align: middle !important;
}

.tal {
    text-align: left !important;
}

.tac {
    text-align: center !important;
}

.tar {
    text-align: right !important;
}


/* !ff
------------------------------------------------ */
.ff_barlow {
    font-family: "Barlow", sans-serif;
}

.ff_inter {
    font-family: "Inter", sans-serif;
}

.ff_mont {
    font-family: "Montserrat", sans-serif;
}

.ff_mplus {
    font-family: "M PLUS 1p", sans-serif;
}

.ff_italic {
    font-style: italic;
}



/* !fc
------------------------------------------------ */



/* html
----------------------------------------------- */
html.html-lock {}



/* wrapper
----------------------------------------------- */
#wrapper {
    overflow: hidden;
}

article {
    padding: 94px 0 0;
}

.inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 60px;
    position: relative;
    z-index: 1;
}

.inner_box {
    max-width: 900px;
    margin: 0 auto;
}

@media (max-width: 767px) {
    .inner {
        padding: 0 20px;
    }

    article {
        padding: 74px 0 0;
    }
}




/* header
----------------------------------------------- */
#header {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    background: #1b1d22;
    z-index: 99;
}

#header .header_in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 94px;
    padding: 0 min(30px, 2.5vw) 0 min(50px, 4.16vw);
    position: relative;
    gap: 10px;
    z-index: 90;
}

#header .header_logo {
    width: 38px;
    flex-shrink: 0;
}

#header .header_logo a {
    display: block;
}

#header .header_mess {
    display: flex;
    align-items: center;
    gap: min(16px, 3.33vw);
}

#header .header_navi {
    display: flex;
    align-items: center;
    gap: min(35px, 2.91vw);
}

#header .header_navi li a {
    font-size: 14px;
    display: block;
    color: #f0f0ef;
    font-weight: 500;
    letter-spacing: 0.015em;
}

#header .header_navi li a:hover {
    opacity: 0.5;
}

#header .header_btn {
    position: relative;
    z-index: 99;
}

#header .header_btn a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    color: #f0f0ef;
    width: 150px;
    height: 45px;
    background: #292d37;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
    border-radius: 30px;
}

#header .header_btn a:hover {
    opacity: 0.5;
}

.navbar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 99;
}

.navbar-toggle .toggle_menu {
    width: 30px;
    height: 15px;
    position: relative;
}

.navbar-toggle .toggle_menu span {
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 0;
    background-color: #f2f1ed;
    width: 100%;
    height: 1px;
}

.navbar-toggle .toggle_menu span:nth-of-type(1) {
    top: 0;
}

.navbar-toggle .toggle_menu span:nth-of-type(2) {
    top: 7px;
}

.navbar-toggle .toggle_menu span:nth-of-type(3) {
    top: 14px;
}

.navbar-toggle.on .toggle_menu span:nth-of-type(1) {
    top: 0;
    transform: translateY(7px) rotate(-30deg);
}

.navbar-toggle.on .toggle_menu span:nth-of-type(2) {
    opacity: 0;
}

.navbar-toggle.on .toggle_menu span:nth-of-type(3) {
    top: 14px;
    transform: translateY(-7px) rotate(30deg);
}


.navbar-collapse {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(27, 29, 34, 0.8);
    height: 100vh;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 91;
}

.navbar-collapse .navbar_inner {
    display: none;
}

.navbar-collapse .navbar_pc {
    background: #1b1d22;
    position: absolute;
    right: 0;
    top: 0;
    width: 800px;
    height: 100%;
    padding: 25px 25px 20px 50px;
    z-index: 9;
}

.navbar-collapse .navbar_pc .pc_logo {
    width: 38px;
}

.navbar-collapse .navbar_pc .pc_navi {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 60px 50px 0;
}

.navbar-collapse .navbar_pc .pc_navi a:hover {
    opacity: 0.5;
}

.navbar-collapse .navbar_pc .pc_left {
    display: flex;
    flex-direction: column;
    gap: 60px 0;
}

.navbar-collapse .navbar_pc .pc_right {}

.navbar-collapse .navbar_pc .pc_name {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 18px;
    color: #626060;
    font-weight: 300;
    line-height: 1;
}

.navbar-collapse .navbar_pc .pc_name a {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 18px;
    color: #626060;
    font-weight: 300;
    line-height: 1;
}

.navbar-collapse .navbar_pc .pc_box {}

.navbar-collapse .navbar_pc .pc_name .name_eng {
    font-size: 52px;
    font-weight: 700;
    color: #f0f0ef;
    line-height: 1;
    font-family: "Barlow", sans-serif;
}

.navbar-collapse .navbar_pc .pc_list {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.navbar-collapse .navbar_pc .pc_name+.pc_list {
    margin: 45px 0 0;
}

.navbar-collapse .navbar_pc .pc_list a {
    font-size: 22px;
    color: #f0f0ef;
    font-weight: 500;
    letter-spacing: 0.015em;
}

@media (max-width: 1150px) {
    #header .header_mess {
        gap: 30px;
    }

    #header .header_navi {
        gap: 25px;
    }
}

@media (max-width: 1024px) {
    #header .header_navi {
        display: none;
    }

    #header .header_btn {
        display: none;
    }

    #header .header_in {
        height: 74px;
        padding: 0 20px;
    }

    #header .header_logo {
        width: 30px;
    }

    .navbar-collapse {
        display: none;
        position: absolute;
        top: 0;
        background: #1b1d22;
        height: 100vh;
        width: 100%;
        max-width: none;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        -o-box-sizing: border-box;
        box-sizing: border-box;
        z-index: 91;
    }

    .navbar-collapse .navbar_pc {
        display: none;
    }

    .navbar-collapse .navbar_inner {
        padding: 40px 13.33vw;
        display: block;
    }

    .navbar-collapse .navbar_logo {
        margin: 0 0 10.66vw;
        width: 50px;
    }

    .navbar-collapse .navbar_list {
        display: flex;
        flex-direction: column;
        gap: 6.66vw 0;
        margin: 0 0 10.66vw;
    }

    .navbar-collapse .navbar_list a {
        display: block;
        color: #f0f0ef;
        font-size: 13px;
        font-weight: 500;
        letter-spacing: 0.015em;
        padding: 0 0 0 30px;
        position: relative;
    }

    .navbar-collapse .navbar_list a:before {
        position: absolute;
        content: "";
        background: #ff2e9f;
        width: 10px;
        height: 1px;
        left: 0;
        top: 50%;
        z-index: 0;
    }

    .navbar-collapse .navbar_btn {
        display: flex;
        justify-content: center;
    }

    .navbar-collapse .navbar_btn a {
        display: flex;
        background: #292d37;
        align-items: center;
        justify-content: center;
        text-align: center;
        width: 225px;
        height: 50px;
        font-size: 17px;
        font-weight: 500;
        letter-spacing: 0.14em;
        -webkit-border-radius: 30px;
        -moz-border-radius: 30px;
        -ms-border-radius: 30px;
        -o-border-radius: 30px;
        border-radius: 30px;
    }
}



/* anchor
----------------------------------------------- */
.anchor {
    position: absolute;
    left: 0;
    top: 0;
    padding-top: 94px;
    margin-top: -94px;
    z-index: 0;
}

@media (max-width: 1024px) {
    .anchor {
        padding-top: 74px;
        margin-top: -74px;
    }
}



/* footer
----------------------------------------------- */
#footer {
    padding: 105px 20px 95px;
}

#footer .footer_inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

#footer .footer_logo {
    width: 74px;
}

#footer .footer_mess {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 75px 0;
}

#footer .footer_list {
    display: flex;
    gap: 35px;
}

#footer .footer_list a {
    display: block;
    font-size: 14px;
    color: #f0f0ef;
    font-weight: 500;
    letter-spacing: 0.015em;
}

#footer .footer_list a:hover {
    opacity: 0.5;
}

#footer .footer_other {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 10px;
    width: 100%;
}

#footer .footer_link {
    display: flex;
    gap: 0 55px;
}

#footer .footer_link li {
    font-size: 12px;
    font-family: "Barlow", sans-serif;
    font-weight: 400;
    color: #676666;
}

#footer .footer_link a {
    display: block;
    text-decoration: underline;
    color: #676666;
}

#footer .footer_link a:hover {
    opacity: 0.5;
}

#footer .footer_btn {
    display: none;
}

#footer .footer_btn a {
    width: 200px;
    height: 60px;
    font-size: 18px;
    color: #f0f0ef;
    font-weight: 500;
    letter-spacing: 0.14em;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #292d37;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    -ms-border-radius: 40px;
    -o-border-radius: 40px;
    border-radius: 40px;
}

#footer .footer_btn a:hover {
    opacity: 0.5;
}

@media (max-width: 1024px) {
    #footer {
        padding: 50px 20px 135px;
    }

    #footer .footer_inner {
        flex-direction: column;
        align-items: center;
        gap: 40px 0;
    }

    #footer .footer_logo {
        width: 50px;
    }

    #footer .footer_mess {
        align-items: center;
        gap: 30px 0;
    }

    #footer .footer_list {
        display: flex;
        flex-wrap: wrap;
        gap: 30px 0;
        padding: 0 30px;
    }

    #footer .footer_list li:nth-child(odd) {
        width: 66%;
    }

    #footer .footer_list li:nth-child(even) {
        width: 34%;
    }

    #footer .footer_list a {
        display: block;
        font-size: min(12px, 3.2vw);
        color: #f0f0ef;
        letter-spacing: 0.015em;
    }

    #footer .footer_list a:hover {
        opacity: 1;
    }

    #footer .footer_other {
        flex-direction: column-reverse;
        align-items: center;
        gap: 30px 0;
    }

    #footer .footer_link {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        width: 220px;
        gap: 25px;
    }

    #footer .footer_link li {
        font-size: 11px;
    }

    #footer .footer_link li:nth-child(3) {
        width: 100%;
        text-align: center;
    }

    #footer .footer_link a:hover {
        opacity: 1;
    }

    #footer .footer_btn a {
        width: 190px;
        height: 55px;
        font-size: 15px;
        letter-spacing: 0.14em;
    }

    #footer .footer_btn a:hover {
        opacity: 1;
    }
}





/* H
----------------------------------------------- */
.hdl {
    padding: 0 50px 28px 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    color: #f2f1ee;
    position: relative;
    border-bottom: 1px #45484f solid;
}

.hdl:before {
    position: absolute;
    content: "";
    background: #ff2e9f;
    width: 50px;
    height: 1px;
    left: 0;
    bottom: -1px;
    z-index: 0;
}

.hdl .hdl_txt {
    flex-shrink: 0;
    font-size: 44px;
    letter-spacing: 0.03em;
    line-height: 1.23;
    font-weight: 700;
}

.hdl .hdl_cap {
    font-size: 14px;
    padding: 0 0 10px;
    letter-spacing: 0.04em;
    text-align: right;
}


@media (max-width: 767px) {
    .hdl {
        padding: 0 0 10px 0;
    }

    .hdl:before {
        width: 40px;
    }

    .hdl .hdl_txt {
        font-size: min(30px, 8vw);
        letter-spacing: 0.03em;
    }

    .hdl .hdl_cap {
        font-size: min(11px, 2.93vw);
        line-height: 1.63;
        letter-spacing: 0.04em;
        padding: 0;
    }
}






/* common
----------------------------------------------- */
.com_more {
    display: flex;
    justify-content: flex-end;
}

.com_more a {
    padding: 30px 0 30px 30px;
    display: block;
    position: relative;
}

.com_more a:before {
    position: absolute;
    content: "";
    background: #2e2d30;
    width: 70px;
    height: 70px;
    left: 0;
    top: 50%;
    transform: translateY(-50%) scale(1);
    transition: all 0.3s !important;
    -moz-transition: all 0.3s !important;
    /* Firefox */
    -webkit-transition: all 0.3s !important;
    /* Chrome&Safari */
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    z-index: 0;
}

.com_more a:hover:before {
    transform: translateY(-50%) scale(1.5);
    transition: all 0.3s !important;
    -moz-transition: all 0.3s !important;
    /* Firefox */
    -webkit-transition: all 0.3s !important;
    /* Chrome&Safari */
}

.com_more .more_txt {
    letter-spacing: 0.08em;
    padding: 0 20px 0 0;
    background: url("../img/common/arrow_more.png") right center no-repeat;
    background-size: 8px 8px;
    font-size: 14px;
    font-family: "Barlow", sans-serif;
    position: relative;
    z-index: 1;
}

@media (max-width: 767px) {
    .com_more a {
        padding: 25px 0 25px 25px;
    }

    .com_more a:before {
        width: 60px;
        height: 60px;
    }

    .com_more a:hover:before {
        transform: translateY(-50%) scale(1);
    }

    .com_more .more_txt {
        letter-spacing: 0.08em;
        padding: 0 18px 0 0;
        background: url("../img/common/arrow_more.png") right center no-repeat;
        background-size: 7px 7px;
        font-size: 13px;
    }
}

.mouse_change {}

.com_line {
    position: fixed;
    bottom: 10px;
    right: 80px;
    z-index: 6;
}

.com_line a {
    display: block;
    padding: 2px;
    background: linear-gradient(-20deg, #4b2fe3, #db2eaf);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}

.com_line a:hover {
    opacity: 0.5;
}

.com_line a .line_box {
    background: #020709;
    padding: 15px 5px;
    display: flex;
    width: 140px;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 5px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
}

.com_line a .line_tit {
    font-family: "M PLUS 1p", sans-serif;
    font-size: 17px;
    letter-spacing: 0;
    line-height: 1.3;
    background: linear-gradient(to right, #ff30a8, #991af2);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 700;
}

.com_line a .line_txt {
    font-size: 12px;
    font-weight: 300;
    line-height: 1.33;
    margin: 0 0 3px;
}

.com_line a .line_ico {
    width: 26px;
}

@media (max-width: 767px) {
    .com_line {
        top: auto;
        bottom: 55px;
        transform: translateY(0);
        right: 0;
        z-index: 6;
    }

    .com_line a {
        padding: 1px;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        -ms-border-radius: 4px;
        -o-border-radius: 4px;
        border-radius: 4px;
    }

    .com_line a:hover {
        opacity: 1;
    }

    .com_line a .line_box {
        padding: 10px;
        display: flex;
        width: auto;
    }

    .com_line a .line_tit {
        font-size: 13px;
    }

    .com_line a .line_txt {
        font-size: 10px;
    }

    .com_line a .line_ico {
        width: 20px;
    }
}

.com_fix {
    position: fixed;
    right: 0;
    bottom: 0;
    display: none;
    z-index: 7;
}

.com_fix .fix_list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.com_fix .fix_list li {
    background: #fff;
    overflow: hidden;
    -webkit-border-radius: 10px 0 0 10px;
    -moz-border-radius: 10px 0 0 10px;
    -ms-border-radius: 10px 0 0 10px;
    -o-border-radius: 10px 0 0 10px;
    border-radius: 10px 0 0 10px;
}

.com_fix .fix_list li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 200px;
}

.com_fix .fix_list li .fix_pink {
    background: linear-gradient(to right bottom, #e60083, #7b1285);
}

.com_fix .fix_list li .fix_purple {
    background: linear-gradient(to right bottom, #941bfc, #7a1287);
}

.com_fix .fix_list li .fix_blue {
    background: linear-gradient(to right bottom, #7241fc, #173fd4);
}

.com_fix .fix_list li .fix_txt {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.02em;
    white-space: nowrap;
    display: block;
    transform: rotate(90deg);
}

.com_fix .fix_list li a:hover {
    opacity: 0.5;
}

@media (max-width: 1400px) {
    .com_fix .fix_list li a {
        width: 50px;
        height: 160px;
    }

    .com_fix .fix_list li .fix_txt {
        font-size: 14px;
    }
}

@media (max-width: 767px) {
    .com_fix {
        position: fixed;
        right: 0;
        bottom: 0;
        display: none;
        width: 100%;
        z-index: 7;
    }

    .com_fix .fix_list {
        display: flex;
        flex-direction: row;
        gap: 0;
        position: relative;
    }

    .com_fix .fix_list:before {
        position: absolute;
        content: "";
        background: rgba(255, 255, 255, 0.4);
        left: 0;
        top: 0;
        width: 100%;
        height: 1px;
        z-index: 0;
    }

    .com_fix .fix_list li {
        width: 33.3333333%;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        -ms-border-radius: 0;
        -o-border-radius: 0;
        border-radius: 0;
    }

    .com_fix .fix_list li a {
        width: 100%;
        height: 40px;
    }

    .com_fix .fix_list li .fix_txt {
        font-size: 11px;
        letter-spacing: 0.02em;
        transform: rotate(0);
    }

    .com_fix .fix_list li a:hover {
        opacity: 1;
    }
}



/* pop
----------------------------------------------- */
.fancybox-opened .fancybox-skin {
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
}

.fancybox-skin {
    padding: 0 !important;
    background: none !important;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    border-radius: 0 !important;
}

.fancybox-close {
    background: url("../img/common/close.png") center center no-repeat !important;
    background-size: 20px 20px !important;
    width: 20px !important;
    height: 20px !important;
    top: 34px !important;
    right: 60px !important;
}

.pop_box {
    display: none;
}

.pop_box .pop_inner {
    padding: 40px 100px 40px 40px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}

.pop_box .pop_monthly {
    background: linear-gradient(to right bottom, #e60083, #7b1285);
}

.pop_box .pop_rising {
    background: linear-gradient(to right bottom, #941bfc, #7a1287);
}

.pop_box .pop_event {
    background: linear-gradient(to right bottom, #7241fc, #173fd4);
}

.pop_box .pop_tit {
    font-size: 24px;
    font-weight: 500;
    color: #f2f1ee;
    margin: 0 0 15px;
}

.pop_box .com_more {
    margin: 20px 0 0;
    justify-content: center;
}

.pop_box .com_more a:before {
    background: rgba(255, 255, 255, 0.2);
}

.pop_box .filter-container {}

.pop_box .rank_filter {
    display: flex;
    align-items: stretch;
    margin: 0 0 20px;
    width: 346px;
    max-width: 100%;
}

.pop_box .rank_filter li {
    width: 50%;
    cursor: pointer;
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 36px;
    color: #f0f0ef;
    font-size: 16px;
    line-height: 1.3;
    font-weight: 500;
    border: 1px rgba(255, 255, 255, 0.4) solid;
    transition: all 0.3s !important;
    -moz-transition: all 0.3s !important;
    /* Firefox */
    -webkit-transition: all 0.3s !important;
    /* Chrome&Safari */
    position: relative;
}

.pop_box .rank_filter li:hover {
    opacity: 0.5;
}

.pop_box .rank_filter li.is-active {
    background: #f6f5f8;
    border: 1px #f0f0ef solid;
}

.pop_box .rank_filter li.is-active:hover {
    opacity: 1;
}

.pop_box .rank_filter li.is-active:before {
    position: absolute;
    content: "";
    background: #f6f5f8;
    width: 10px;
    height: 10px;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    z-index: 0;
}

.pop_box .pop_monthly .rank_filter li.is-active {
    color: #c21585;
}

.pop_box .pop_rising .rank_filter li.is-active {
    color: #8c1dd6;
}

.pop_box .pop_event .rank_filter li.is-active {
    color: #5342eb;
}

.pop_box .rank_category {}

.pop_box .rank_category .category_in {
    display: none;
}

.pop_box .rank_category .category_in.is-show {
    display: block;
}

.pop_box .rank_flex {
    display: flex;
    align-items: stretch;
    gap: 0 75px;
}

.pop_box .rank_flex .rank_list {
    width: 360px;
}

.pop_box .rank_list {
    margin: 0;
}

.pop_box .rank_list li {
    background: url("../img/common/bor_rank.png") 0 bottom repeat-x;
}

.pop_box .rank_list .rank_item {
    display: flex;
    align-items: center;
    gap: 0 8px;
    padding: 10px 5px 10px 60px;
    position: relative;
}

.pop_box .rank_list .rank_head {
    width: 70px;
    flex-shrink: 0;
}

.pop_box .rank_list .rank_txt {
    font-size: 15px;
    transition: all 0.3s !important;
    -moz-transition: all 0.3s !important;
    /* Firefox */
    -webkit-transition: all 0.3s !important;
    /* Chrome&Safari */
}

.pop_box .rank_list .rank_item:hover .rank_txt {
    opacity: 0.5;
}

.pop_box .rank_list .rank_txt img {
    display: inline-block;
    vertical-align: middle;
}

.pop_box .rank_list .rank_item:before {
    position: absolute;
    content: "";
    left: 0;
    top: 25px;
    width: 32px;
    height: 20px;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 1;
}

.pop_box .rank_list .crown_champion:before {
    background-image: url("../img/common/crown01.png");
}

.pop_box .rank_list .crown_runnerup:before {
    background-image: url("../img/common/crown02.png");
}

.pop_box .rank_list .crown_thirdplace:before {
    background-image: url("../img/common/crown03.png");
}

.pop_box .rank_list .crown_number {
    position: absolute;
    left: 30px;
    top: 25px;
    font-size: 20px;
    width: 1.5em;
    text-align: center;
    font-weight: 600;
    line-height: 1;
    color: #f0f0ef;
    font-family: "Barlow", sans-serif;
    z-index: 1;
}

.pop_box .rank_list .crown_number:before {
    position: absolute;
    content: "";
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 0;
}

.pop_box .rank_list .crown_number.crown_up:before {
    background-image: url("../img/common/up_rank.png");
    width: 12px;
    height: 18px;
    left: 50%;
    transform: translateX(-50%);
    top: calc(100% + 8px);
}

.pop_box .rank_list .crown_number.crown_down:before {
    background-image: url("../img/common/down_rank.png");
    width: 12px;
    height: 18px;
    left: 50%;
    transform: translateX(-50%);
    top: calc(100% + 8px);
}

.pop_box .rank_list .crown_number.crown_right:before {
    background-image: url("../img/common/right_rank.png");
    width: 18px;
    height: 12px;
    right: 50%;
    transform: translateX(50%);
    top: calc(100% + 10px);
}


@media (max-width: 1024px) {
    .pop_box .rank_flex {
        gap: 0 30px;
    }

    .pop_box .pop_inner {
        padding: 40px;
    }

    .pop_box .rank_flex .rank_list {
        width: 360px;
        max-width: calc((100% - 30px)/2);
    }
}

@media (max-width: 767px) {
    .fancybox-close {
        background: url("../img/common/close.png") center center no-repeat !important;
        background-size: 15px 15px !important;
        width: 15px !important;
        height: 15px !important;
        top: 20px !important;
        right: 20px !important;
    }

    .pop_box .pop_inner {
        padding: 30px 20px 25px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        -ms-border-radius: 5px;
        -o-border-radius: 5px;
        border-radius: 5px;
    }

    .pop_box .com_more {
        margin: 20px 0 0 0;
        justify-content: flex-end;
    }

    .pop_box .rank_tit {
        font-size: 20px;
    }

    .pop_box .rank_list {
        margin: 0;
    }

    .pop_box .rank_list .rank_item {
        padding: 10px 5px 10px 35px;
    }

    .pop_box .rank_list .rank_txt {
        font-size: 13px;
    }

    .pop_box .rank_list .rank_item:hover .rank_txt {
        opacity: 1;
    }

    .pop_box .rank_list .rank_head {
        width: 60px;
        max-width: none;
    }

    .pop_box .rank_list .rank_item:before {
        top: 10px;
        width: 28px;
        height: 18px;
        background-size: 28px 18px;
    }

    .pop_box .rank_list .crown_number {
        left: 0;
        top: 33px;
        font-size: 17px;
        width: 28px;
        text-align: center;
    }

    .pop_box .rank_list .crown_number.crown_up:before {
        background-image: url("../img/common/up_rank.png");
        background-size: 10px 15px;
        width: 10px;
        height: 15px;
        top: calc(100% + 4px);
    }

    .pop_box .rank_list .crown_number.crown_down:before {
        background-image: url("../img/common/down_rank.png");
        background-size: 10px 15px;
        width: 10px;
        height: 15px;
        top: calc(100% + 4px);
    }

    .pop_box .rank_list .crown_number.crown_right:before {
        background-image: url("../img/common/right_rank.png");
        background-size: 15px 10px;
        width: 15px;
        height: 10px;
        top: calc(100% + 4px);
    }

    .pop_box .rank_filter {
        margin: 0 0 15px;
        width: auto;
    }

    .pop_box .rank_filter li {
        height: 32px;
        font-size: 13px;
    }

    .pop_box .rank_filter li:hover {
        opacity: 1;
    }

    .pop_box .rank_filter li.is-active:before {
        width: 9px;
        height: 8px;
    }

    .pop_box .rank_flex {
        flex-direction: column;
        gap: 0;
    }

    .pop_box .rank_flex .rank_list {
        width: 100%;
        max-width: none;
    }
}



/* loop
----------------------------------------------- */
.loop_box {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
}

.loop_logo {
    display: inline-block;
    animation: scroll 20s linear infinite;
    width: 1670px;
}

@keyframes scroll {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(0);
    }
}

@media (max-width: 767px) {
    .loop_logo {
        width: 1200px;
    }
}




/* top
----------------------------------------------- */
.top_cta {
    margin: 170px 0 0;
    background: linear-gradient(to right bottom, #7041fb, #1f40d6);
    padding: 90px 20px 100px;
    -webkit-border-radius: 70px;
    -moz-border-radius: 70px;
    -ms-border-radius: 70px;
    -o-border-radius: 70px;
    border-radius: 70px;
    position: relative;
}

.top_cta .cta_hd {
    text-align: center;
    color: #fff;
    font-size: 60px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 60px;
}

.top_cta .cta_inner {
    max-width: 1100px;
    margin: 0 auto;
}

.top_cta .cta_box {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 0 5.4%;
}

.top_cta .cta_box li {
    width: calc((100% - 5.4%)/2);
}

.top_cta .cta_box li a {
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    color: #fff;
    background: #12141c;
    height: 140px;
    font-size: 18px;
    line-height: 1.66;
    font-weight: 700;
    padding: 10px 50px 10px 80px;
    -webkit-border-radius: 80px;
    -moz-border-radius: 80px;
    -ms-border-radius: 80px;
    -o-border-radius: 80px;
    border-radius: 80px;
    position: relative;
}

.top_cta .cta_box .box_line .box_span {
    background: url("../img/top/line_cta.png") right center no-repeat;
}

.top_cta .cta_box .box_blank .box_span {
    background: url("../img/common/arrow_blank.png") right center no-repeat;
}

.top_cta .cta_box li a:hover {
    color: #12141c;
}

.top_cta .cta_box .box_span {
    display: block;
    width: 100%;
    padding: 0 60px 0 0;
    position: relative;
    z-index: 2;
}

.top_cta .cta_box a:before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: transform .5s cubic-bezier(0.8, 0, 0.2, 1) 0s;
    transform: scale(0, 1);
    transform-origin: right top;
    background: #fff;
    z-index: 0;
}

.top_cta .cta_box a:hover:before {
    transform-origin: left top;
    transform: scale(1, 1);
}

@media (max-width: 1024px) {
    .top_cta .cta_box {
        flex-direction: column;
        gap: 30px 0;
    }

    .top_cta .cta_box li {
        width: 100%;
    }
}

@media (max-width: 767px) {
    .top_cta {
        margin: 75px 0 0;
        padding: 30px 40px 35px;
        -webkit-border-radius: 35px;
        -moz-border-radius: 35px;
        -ms-border-radius: 35px;
        -o-border-radius: 35px;
        border-radius: 35px;
    }

    .top_cta .cta_hd {
        font-size: 25px;
        margin: 0 0 25px;
    }

    .top_cta .cta_box {
        gap: 15px;
    }

    .top_cta .cta_box li a {
        height: 70px;
        font-size: 12px;
        padding: 10px 40px 10px 35px;
    }

    .top_cta .cta_box .box_line .box_span {
        background: url("../img/top/line_cta.png") right center no-repeat;
        background-size: 30px 30px;
    }

    .top_cta .cta_box .box_blank .box_span {
        background: url("../img/common/arrow_blank.png") right 10px center no-repeat;
        background-size: 10px 10px;
    }

    .top_cta .cta_box li a:hover {
        color: #fff;
    }

    .top_cta .cta_box .box_span {
        padding: 0 40px 0 0;
    }

    .top_cta .cta_box a:hover:before {
        transform-origin: right top;
        transform: scale(0, 1);
    }
}

.top_company {
    margin: 70px 0 0;
    position: relative;
}

.top_company .hdl {
    margin: 0 0 50px;
}

.top_company .comp_table {
    width: 100%;
}

.top_company .comp_table th,
.top_company .comp_table td {
    vertical-align: middle;
    font-size: 16px;
    letter-spacing: 0.08em;
}

.top_company .comp_table th {
    width: 30%;
    border-bottom: 1px #5571fe solid;
    text-align: center;
    color: #aba4a4;
    padding: 25px;
}

.top_company .comp_table td {
    width: 70%;
    padding: 25px 85px;
    border-bottom: 1px #2d2e32 solid;
}

.top_company .comp_table .ff_barlow {
    font-weight: 500;
}

@media (max-width: 1024px) {

    .top_company .comp_table th,
    .top_company .comp_table td {
        vertical-align: middle;
        padding: 25px;
    }
}

@media (max-width: 767px) {
    .top_company .hdl {
        margin: 0 0 15px;
    }

    .top_company .comp_table {
        width: 100%;
    }

    .top_company .comp_table th,
    .top_company .comp_table td {
        font-size: 12px;
        line-height: 1.66;
        letter-spacing: 0.08em;
    }

    .top_company .comp_table th {
        width: 33%;
        padding: 20px 10px;
    }

    .top_company .comp_table td {
        width: 67%;
        padding: 20px;
    }
}

.top_faq {
    position: relative;
    margin: 100px 0 0;
}

.top_faq .hdl {
    margin: 0 0 45px;
}

.top_faq .com_more {
    margin: 35px 0 0;
}

.faq_box {
    display: flex;
    flex-direction: column;
    gap: 25px 0;
}

.faq_box .faq_item {
    width: 100%;
    background: #292d37;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}

.faq_box .faq_item .item_q {
    display: flex;
    align-items: center;
    padding: 30px 80px 30px 50px;
    cursor: pointer;
    position: relative;
}

.faq_box .faq_item .item_q:before {
    position: absolute;
    content: "";
    right: 44px;
    width: 19px;
    height: 3px;
    background: #f2f1ee;
    top: 50%;
    margin-top: -2px;
    z-index: 0;
}

.faq_box .faq_item .item_q:after {
    position: absolute;
    content: "";
    right: 52px;
    top: 50%;
    width: 3px;
    height: 19px;
    margin-top: -10px;
    background: #f2f1ee;
    transition: all 0.3s !important;
    -moz-transition: all 0.3s !important;
    /* Firefox */
    -webkit-transition: all 0.3s !important;
    /* Chrome&Safari */
    z-index: 0;
}

.faq_box .faq_item .item_q.on:after {
    transform: rotate(90deg);
    transition: all 0.3s !important;
    -moz-transition: all 0.3s !important;
    /* Firefox */
    -webkit-transition: all 0.3s !important;
    /* Chrome&Safari */
}

.faq_box .faq_item .item_q .q_inner {
    font-size: 18px;
    line-height: 1.66;
}

.faq_box .faq_item .item_a {
    display: none;
    padding: 30px 50px;
    position: relative;
}

.faq_box .faq_item .item_a:before {
    position: absolute;
    content: "";
    background: #45484f;
    height: 1px;
    width: calc(100% - 4px);
    left: 2px;
    top: 0;
    z-index: 0;
}

.faq_box .faq_item .item_a .a_cont {
    font-size: 16px;
    line-height: 1.875;
    letter-spacing: 0.04em;
}

@media (max-width: 767px) {
    .top_faq {
        margin: 75px 0 0;
    }

    .top_faq .hdl {
        margin: 0 0 35px;
    }

    .faq_box {
        gap: 20px 0;
    }

    .faq_box .faq_item {
        width: 100%;
        background: #292d37;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        -ms-border-radius: 5px;
        -o-border-radius: 5px;
        border-radius: 5px;
    }

    .faq_box .faq_item .item_q {
        padding: 15px 50px 15px 20px;
    }

    .faq_box .faq_item .item_q:before {
        right: 15px;
        width: 12px;
        height: 2px;
        margin-top: -1px;
    }

    .faq_box .faq_item .item_q:after {
        right: 20px;
        top: 50%;
        width: 2px;
        height: 12px;
        margin-top: -6px;
    }

    .faq_box .faq_item .item_q .q_inner {
        font-size: 13px;
        line-height: 1.77;
    }

    .faq_box .faq_item .item_a {
        display: none;
        padding: 15px 25px 15px 20px;
    }

    .faq_box .faq_item .item_a:before {
        width: 100%;
        left: 0;
    }

    .faq_box .faq_item .item_a .a_cont {
        font-size: 12px;
        line-height: 1.75;
        letter-spacing: 0.04em;
    }
}

.top_step {
    position: relative;
    margin: 80px 0 0;
}

.top_step .hdl {
    margin: 0 0 45px;
}

.top_step .step_dream {
    background: #12141c;
    max-width: 1000px;
    margin: 95px auto 0;
    border: 1px #545454 solid;
    padding: 45px 20px 50px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    border-radius: 20px;
}

.top_step .step_dream .dream_tit {
    text-align: center;
    font-size: 40px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.02em;
    margin: 0 0 10px;
}

.top_step .step_dream .dream_det {
    text-align: center;
    font-size: 17px;
    font-weight: 500;
    color: #626060;
    letter-spacing: 0.02em;
    margin: 0 0 20px;
}

.top_step .step_dream .dream_line {
    display: flex;
    justify-content: center;
}

.top_step .step_dream .dream_line a {
    display: block;
    width: 83px;
}

.top_step .step_dream .dream_line a:hover {
    opacity: 0.5;
}

.top_step .step_img {
    position: relative;
}

.top_step .step_img:before {
    position: absolute;
    content: "";
    background: linear-gradient(to right, #9738eb, #d33db9);
    left: 50%;
    top: min(36px, 3vw);
    transform: translateX(-50%);
    width: 100vw;
    height: 1px;
    z-index: 0;
}

.top_step .step_img .img_inner {
    position: relative;
    z-index: 1;
}

@media (max-width: 767px) {
    .top_step {
        margin: 70px 0 0;
    }

    .top_step .hdl {
        margin: 0 0 35px;
    }

    .top_step .step_dream {
        margin: 50px auto 0;
        padding: 25px 20px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
        border-radius: 10px;
    }

    .top_step .step_dream .dream_tit {
        font-size: 20px;
        letter-spacing: 0.02em;
    }

    .top_step .step_dream .dream_det {
        font-size: 11px;
        letter-spacing: 0.02em;
        margin: 0 0 15px;
    }

    .top_step .step_dream .dream_line {
        display: flex;
        justify-content: center;
    }

    .top_step .step_dream .dream_line a {
        width: 42px;
    }

    .top_step .step_dream .dream_line a:hover {
        opacity: 1;
    }

    .top_step .step_img:before {
        display: none;
    }

    .top_step .step_img .img_inner {
        margin: 0 -20px;
    }
}

.top_liver {
    position: relative;
    margin: 120px 0 0;
}

.top_liver .hdl {
    margin: 0 0 95px;
}

.top_liver .com_more {
    margin: 55px 0 0;
}

.top_liver .liver_swiper {
    overflow: hidden;
    margin: 70px 0 0;
}

.top_liver .liver_list {
    display: flex;
    align-items: stretch;
    gap: 0 66px;
    white-space: nowrap;
    width: max-content;
}

.top_liver .liver_list li {
    flex-shrink: 0;
    width: 264px;
}

.top_liver .liver_list li a {
    display: block;
    background: #292d37;
    overflow: hidden;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    border-radius: 20px;
}

.top_liver .liver_list li a:hover {
    opacity: 0.5;
}

.top_liver .liver_list .list_img {}

.top_liver .liver_list .list_img img {
    height: 330px;
    width: 100%;
    object-fit: cover;
}

.top_liver .liver_list .list_cont {
    height: 94px;
    padding: 10px 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 5px;
}

.top_liver .liver_list .list_cap {
    font-size: 13px;
    color: #515560;
}

.top_liver .liver_list .list_name {
    font-size: 16px;
    color: #fff;
}

.top_liver .mouse_change a {
    cursor: none;
}

.top_liver .mouse_change a:hover {
    cursor: url("../img/top/hover_liver.png") 60 60, auto;
}

@media (max-width: 767px) {
    .top_liver {
        margin: 75px 0 0;
    }

    .top_liver .hdl {
        margin: 0 0 50px;
    }

    .top_liver .com_more {
        margin: 35px 0 0;
    }

    .top_liver .liver_swiper {
        margin: 50px 0 0;
    }

    .top_liver .liver_list {
        gap: 0 40px;
    }

    .top_liver .liver_list li {
        width: 165px;
    }

    .top_liver .liver_list li a {
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
        border-radius: 10px;
    }

    .top_liver .liver_list li a:hover {
        opacity: 1;
    }

    .top_liver .liver_list .list_img img {
        height: auto;
        width: 100%;
        object-fit: contain;
    }

    .top_liver .liver_list .list_cont {
        height: 60px;
        padding: 10px 20px;
    }

    .top_liver .liver_list .list_cap {
        font-size: 10px;
    }

    .top_liver .liver_list .list_name {
        font-size: 13px;
    }

    .top_liver .mouse_change a:hover {
        cursor: auto;
    }
}

.top_compare {
    position: relative;
    margin: 120px 0 0;
}

.top_compare .hdl {
    margin: 0 0 120px;
}

.top_compare .compare_scroll {
    max-width: 1000px;
    margin: 0 auto;
}

.top_compare .compare_box {
    background: #12141c;
    border: 1px #545454 solid;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    border-radius: 20px;
    position: relative;
}

.top_compare .compare_box:before {
    position: absolute;
    content: "";
    left: 21%;
    top: -60px;
    width: 25%;
    height: calc(100% + 120px);
    background: linear-gradient(-20deg, #4b2fe3, #db2eaf);
    border: 1px #545454 solid;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    border-radius: 20px;
    z-index: 0;
}

.top_compare .compare_box:after {
    position: absolute;
    content: "";
    background: #212225;
    width: 1px;
    height: 100%;
    right: 27%;
    top: 0;
    z-index: 0;
}

.top_compare .compare_box li {
    display: flex;
    align-items: stretch;
    text-align: center;
    font-size: 16px;
    font-weight: 300;
    letter-spacing: 0.04em;
}

.top_compare .compare_box li+li {
    border-top: 1px #212225 solid;
}

.top_compare .compare_box .box_th01 {
    width: 21%;
}

.top_compare .compare_box .box_th02 {
    width: 25%;
}

.top_compare .compare_box .box_th03 {
    width: 27%;
}

.top_compare .compare_box .box_th04 {
    width: 27%;
}

.top_compare .compare_box .box_th01,
.top_compare .compare_box .box_th02,
.top_compare .compare_box .box_th03,
.top_compare .compare_box .box_th04 {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 70px;
    padding: 10px 15px;
}

.top_compare .compare_box .box_th01 {
    color: #8b8e98;
    font-weight: 400;
}

.top_compare .compare_box .box_th02 {
    justify-content: flex-start;
    position: relative;
    z-index: 2;
}

.top_compare .compare_box .box_th02:before {
    position: absolute;
    content: "";
    width: calc(100% - 20px);
    height: 1px;
    background: url("../img/top/bor_compare.png") 0 0 repeat-x;
    left: 10px;
    top: 0;
    z-index: 2;
}

.top_compare .compare_box .box_check {
    background: url("../img/top/check_compare.png") 0 center no-repeat;
    background-size: 19px 19px;
    padding: 0 0 0 35px;
    font-size: 18px;
    font-weight: 500;
    color: #f0f0ef;
    line-height: 1.33;
    letter-spacing: 0.04em;
    text-align: left;
}

.top_compare .compare_box .ff_barlow {
    font-size: 22px;
}

.top_compare .compare_box .box_head {
    height: 134px;
}

.top_compare .compare_box .box_th02.box_head {
    align-items: flex-start;
    padding: 0;
    justify-content: center;
}

.top_compare .compare_box .box_th02.box_head:before {
    display: none;
}

.top_compare .compare_box .txt_color {
    font-size: 20px;
    line-height: 1.6;
    font-weight: 500;
    letter-spacing: 0.03em;
    background: linear-gradient(to bottom right, #db2eaf, #4b2fe3);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.top_compare .compare_box .txt_color .ff_mont {
    font-size: 48px;
    vertical-align: bottom;
    line-height: 1;
    font-weight: 500;
}

@media (max-width: 767px) {
    .top_compare {
        margin: 75px 0 0;
    }

    .top_compare .hdl {
        margin: 0 0 35px;
    }

    .top_compare .compare_scroll {
        overflow-x: scroll;
        padding: 30px 20px 50px 0;
        margin: 0 -20px 0 0;
    }

    .top_compare .compare_scroll::-webkit-scrollbar {
        width: 100%;
        height: 3px;
        background: #12141c;
    }

    .top_compare .compare_scroll::-webkit-scrollbar-thumb {
        background: linear-gradient(to right, #db2eaf, #4b2fe3);
    }

    .top_compare .compare_box {
        width: 700px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
        border-radius: 10px;
    }

    .top_compare .compare_box:before {
        top: -30px;
        height: calc(100% + 60px);
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
        border-radius: 10px;
    }

    .top_compare .compare_box li {
        font-size: 13px;
    }

    .top_compare .compare_box .box_th01,
    .top_compare .compare_box .box_th02,
    .top_compare .compare_box .box_th03,
    .top_compare .compare_box .box_th04 {
        min-height: 55px;
        padding: 5px 10px;
    }

    .top_compare .compare_box .box_check {
        background: url("../img/top/check_compare.png") 0 center no-repeat;
        background-size: 12px 12px;
        padding: 0 0 0 20px;
        font-size: 12px;
    }

    .top_compare .compare_box .ff_barlow {
        font-size: 14px;
    }

    .top_compare .compare_box .box_head {
        height: 80px;
    }

    .top_compare .compare_box .txt_color {
        font-size: 16px;
    }

    .top_compare .compare_box .txt_color .ff_mont {
        font-size: 40px;
    }

    .top_compare .compare_box .box_th02.box_head img {
        width: 38px;
    }
}

.top_support {
    position: relative;
    margin: 110px 0 0;
}

.top_support .hdl {
    margin: 0 0 55px;
}

.top_support .support_box {
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

.top_support .support_box li {
    width: calc((100% - 20px)/2);
    padding: 0 30px 0 55px;
    background: linear-gradient(100deg, #7141fc 10%, #173fd4 100%);
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    -ms-border-radius: 14px;
    -o-border-radius: 14px;
    border-radius: 14px;
}

.top_support .support_box .box_cont {
    width: 100%;
    height: 150px;
    color: #f2f1ee;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.top_support .support_box .box_cont .ff_barlow {
    font-size: min(40px, 3.23vw);
    font-weight: 500;
    line-height: 1;
    vertical-align: bottom;
}

.top_support .support_box .box_txt {
    font-size: min(28px, 2.26vw);
    font-weight: 700;
    line-height: 1.43;
    letter-spacing: 0.04em;
}

.top_support .support_box .box_cont01 {
    padding: 0 180px 0 0;
    background: url("../img/top/img_support01.png") right center no-repeat;
}

.top_support .support_box .box_cont02 {
    padding: 0 90px 0 0;
    background: url("../img/top/img_support02.png") right 30px center no-repeat;
}

.top_support .support_box .box_cont03 {
    padding: 0 100px 0 0;
    background: url("../img/top/img_support03.png") right 20px center no-repeat;
}

.top_support .support_box .box_cont04 {
    padding: 0 90px 0 0;
    background: url("../img/top/img_support04.png") right 30px center no-repeat;
}

@media (max-width: 1024px) {
    .top_support .support_box li {
        padding: 0 30px;
    }

    .top_support .support_box .box_cont02 {
        padding: 0 90px 0 0;
        background: url("../img/top/img_support02.png") right 10px center no-repeat;
    }

    .top_support .support_box .box_cont03 {
        padding: 0 100px 0 0;
        background: url("../img/top/img_support03.png") right 10px center no-repeat;
    }

    .top_support .support_box .box_cont04 {
        padding: 0 90px 0 0;
        background: url("../img/top/img_support04.png") right 10px center no-repeat;
    }
}

@media (max-width: 767px) {
    .top_support {
        margin: 75px 0 0;
    }

    .top_support .hdl {
        margin: 0 0 35px;
    }

    .top_support .support_box {
        padding: 0 20px;
        flex-direction: column;
    }

    .top_support .support_box li {
        width: 100%;
        padding: 0 15px 0 min(25px, 6.66vw);
        -webkit-border-radius: 7px;
        -moz-border-radius: 7px;
        -ms-border-radius: 7px;
        -o-border-radius: 7px;
        border-radius: 7px;
    }

    .top_support .support_box .box_cont {
        height: 80px;
    }

    .top_support .support_box .box_cont .ff_barlow {
        font-size: min(21px, 5.6vw);
        vertical-align: top;
    }

    .top_support .support_box .box_txt {
        font-size: min(15px, 4vw);
        line-height: 1.53;
    }

    .top_support .support_box .box_cont01 {
        padding: 0 80px 0 0;
        background: url("../img/top/img_support01.png") right center no-repeat;
        background-size: 80px 49px;
    }

    .top_support .support_box .box_cont02 {
        padding: 0 45px 0 0;
        background: url("../img/top/img_support02.png") right 10px center no-repeat;
        background-size: 35px 35px;
    }

    .top_support .support_box .box_cont03 {
        padding: 0 45px 0 0;
        background: url("../img/top/img_support03.png") right 12px center no-repeat;
        background-size: 30px 30px;
    }

    .top_support .support_box .box_cont04 {
        padding: 0 45px 0 0;
        background: url("../img/top/img_support04.png") right 10px center no-repeat;
        background-size: 35px 35px;
    }
}

.top_main video {
    width: 100%;
}

.top_event {
    background: url("../img/top/bg_event.png") center 0 no-repeat;
    background-size: 100% auto;
    padding: 400px 40px 0;
    position: relative;
    z-index: 1;
}

.top_event .hdl {
    margin: 0 0 70px;
}

.top_event .event_inner {
    max-width: 1320px;
    margin: 0 auto;
    background: rgba(0, 0, 0, 0.7);
    padding: 80px 40px 110px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    border-radius: 6px;
}

.top_event .event_box {
    max-width: 970px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    gap: 0 50px;
}

.top_event .event_left {
    display: flex;
    flex-direction: column;
    gap: 120px 0;
    width: 45%;
}

.top_event .event_right {
    margin: 240px 0 0;
    display: flex;
    flex-direction: column;
    gap: 120px 0;
    width: 45%;
}

.top_event .event_img {
    margin: 0 0 75px;
    position: relative;
}

.top_event .event_img img {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}

.top_event .event_cont {
    position: relative;
}

.top_event .event_cap {
    position: absolute;
    right: 0;
    z-index: 1;
}

.top_event .event_01 .event_cap {
    right: 20px;
    bottom: -60px;
}

.top_event .event_02 .event_cap {
    right: 0;
    bottom: -70px;
}

.top_event .event_03 .event_cap {
    right: 0;
    bottom: -70px;
}

.top_event .event_04 .event_cap {
    right: 0;
    bottom: -65px;
}

.top_event .event_05 .event_cap {
    right: 5px;
    bottom: -70px;
}

.top_event .event_cap .cap_eng {
    font-size: 20px;
    font-weight: 500;
    line-height: 1;
    font-family: "Barlow", sans-serif;
    background: linear-gradient(to bottom right, #db2eaf, #4b2fe3);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.top_event .event_cap .cap_num {
    font-size: 124px;
    line-height: 0.9;
    font-weight: 100;
    font-style: italic;
    font-family: "Inter", sans-serif;
    background: linear-gradient(to bottom right, #db2eaf, #4b2fe3);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    padding: 0 0.1em 0 0;
}

.top_event .event_cap.animated .cap_cont {
    opacity: 1;
    overflow: hidden;
    white-space: nowrap;
    animation: reveal 1.5s steps(100) forwards;
}

.top_event .event_tit {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.33;
    letter-spacing: 0.02em;
}

.top_event .event_tit .tit_sml {
    font-size: 14px;
    line-height: 1.5;
    display: block;
}

.top_event .event_tit.animated {
    opacity: 1;
    overflow: hidden;
    white-space: nowrap;
    animation: reveal 1.5s steps(100) forwards;
}

@keyframes reveal {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

.top_event .event_slider {
    display: none;
}

.top_event .slider_navi {
    display: none;
}

@media (max-width: 767px) {
    .top_event {
        background: url("../img/top/bg_event_sp.png") center 0 no-repeat;
        background-size: 100% auto;
        padding: 57.33vw 0 0;
    }

    .top_event .hdl {
        margin: 0 0 35px;
    }

    .top_event .event_inner {
        padding: 30px 0 40px;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        -ms-border-radius: 0;
        -o-border-radius: 0;
        border-radius: 0;
    }

    .top_event .event_box {
        display: none;
    }

    .top_event .event_img {
        margin: 0 0 50px;
    }

    .top_event .event_img img {
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        -ms-border-radius: 5px;
        -o-border-radius: 5px;
        border-radius: 5px;
    }

    .top_event .event_01 .event_cap {
        right: 10px;
        bottom: -40px;
    }

    .top_event .event_02 .event_cap {
        right: 0;
        bottom: -40px;
    }

    .top_event .event_03 .event_cap {
        right: 0;
        bottom: -40px;
    }

    .top_event .event_04 .event_cap {
        right: 0;
        bottom: -40px;
    }

    .top_event .event_05 .event_cap {
        right: 0;
        bottom: -40px;
    }

    .top_event .event_cap .cap_eng {
        font-size: 12px;
    }

    .top_event .event_cap .cap_num {
        font-size: 73px;
    }

    .top_event .event_cap.animated .cap_cont {
        opacity: 1;
        overflow: hidden;
        white-space: nowrap;
        animation: none;
    }

    .top_event .event_tit {
        font-size: min(18px, 4.8vw);
        letter-spacing: 0.02em;
        min-height: 3.5em;
    }

    .top_event .event_tit .tit_sml {
        font-size: 12px;
    }

    .top_event .event_tit.animated {
        opacity: 1;
        overflow: hidden;
        white-space: nowrap;
        animation: none;
    }

    .top_event .event_slider {
        display: block;
        margin: 0 -20px;
    }

    .top_event .event_slider .slick-slide {
        padding: 0 15px;
    }

    .top_event .slider_navi {
        margin: 30px 0 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0 20px;
    }

    .top_event .slider_navi .event_prev,
    .top_event .slider_navi .event_next {
        background-color: #2e2d30;
        background-size: 15px 10px;
        background-repeat: no-repeat;
        background-position: center center;
        width: 60px;
        height: 60px;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
        border-radius: 50%;
    }

    .top_event .slider_navi .event_prev {
        background-image: url("../img/top/prev_event.png");
    }

    .top_event .slider_navi .event_next {
        background-image: url("../img/top/next_event.png");
    }

    .top_event .slider_navi .event_num {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-family: "Barlow", sans-serif;
        width: 45px;
        font-weight: 400;
    }
}

.top_achieve {
    position: relative;
    margin: 30px 0 0;
}

.top_achieve .achieve_inner {
    padding: 75px 0 115px;
    position: relative;
}

.top_achieve .achieve_inner:before {
    position: absolute;
    content: "";
    background: url("../img/top/dot_achieve.png") 0 0 repeat;
    left: 0;
    top: 0;
    width: 100%;
    height: calc(100% + 600px);
    z-index: 0;
}

.top_achieve .achieve_box {
    display: flex;
    flex-wrap: wrap;
    gap: 80px 0;
    justify-content: space-between;
}

.top_achieve .achieve_box li {
    width: 310px;
    max-width: 28.5%;
}

.top_achieve .achieve_box li img {
    transition: all 1s !important;
    -moz-transition: all 1s !important;
    /* Firefox */
    -webkit-transition: all 1s !important;
    /* Chrome&Safari */
}

.top_achieve .achieve_box li:hover img {
    transform: scale(1.16);
}

/*
.top_achieve .achieve_box li.current img {
	transform: scale(1.16);
}
*/

.top_achieve .achieve_slider {
    display: none;
}

@media (max-width: 767px) {
    .top_achieve {
        margin: 0;
    }

    .top_achieve .achieve_inner {
        padding: 35px 0 0;
    }

    .top_achieve .achieve_inner:before {
        height: calc(100% + 66.66vw);
        background: url("../img/top/dot_achieve.png") 0 0 repeat;
        background-size: 47px 32px;
    }

    .top_achieve .achieve_box {
        display: none;
    }

    .top_achieve .achieve_slider {
        display: block;
        position: relative;
        z-index: 1;
    }

    .top_achieve .achieve_slider .slick-slide {
        padding: 0 22px;
    }

    .top_achieve .achieve_slider .slick-slide img {
        transition: all 0.3s !important;
        -moz-transition: all 0.3s !important;
        /* Firefox */
        -webkit-transition: all 0.3s !important;
        /* Chrome&Safari */
    }

    .top_achieve .achieve_slider .slick-slide.slick-center img {
        transform: scale(1.4);
        transform-origin: 50% 100%;
        transition: all 0.3s !important;
        -moz-transition: all 0.3s !important;
        /* Firefox */
        -webkit-transition: all 0.3s !important;
        /* Chrome&Safari */
    }

    .top_achieve .achieve_slider .slick-list {
        padding-top: 20vw !important;
    }

    .top_achieve .achieve_slider .slick-dots {
        margin: 30px 0 0;
        display: flex;
        justify-content: center;
        gap: 10px;
    }

    .top_achieve .achieve_slider .slick-dots li {
        margin: 0;
        padding: 0;
        font-size: 0;
    }

    .top_achieve .achieve_slider .slick-dots li button {
        background: #76777a;
        width: 5px;
        height: 5px;
        margin: 0;
        padding: 0;
        font-size: 0;
        line-height: 0;
        border: none;
    }

    .top_achieve .achieve_slider .slick-dots li.slick-active button {
        background: #fff;
    }
}

.top_word {
    display: flex;
    justify-content: center;
    margin: 25px 0 0;
}

.top_word .word_txt img {
    width: 1419px;
}

@media (max-width: 767px) {
    .top_word {
        margin: 50px 0 -15px;
    }

    .top_word .word_txt img {
        width: auto;
    }
}

.top_news {
    margin: 135px 0 0;
    position: relative;
}

.top_news .hdl {
    margin: 0 0 65px;
}

.top_news .com_more {
    margin: 40px 0 0;
}

.top_news .news_slider {}

.top_news .news_slider .news_item {
    display: block;
}

.top_news .news_slider .news_item:hover {
    opacity: 0.5;
}

.top_news .news_slider .news_tit {
    line-height: 1.86;
    margin: 25px 0 0;
    max-width: 450px;
}

.top_news .news_slider .news_cont {
    background: #020709;
    padding: 30px 80px 30px 30px;
    border: 1px #383839 solid;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    border-radius: 6px;
    position: relative;
}

.top_news .news_slider .news_cont:before {
    position: absolute;
    content: "";
    width: 100px;
    height: 4px;
    left: 0;
    top: -1px;
    -webkit-border-radius: 4px 0 0 0;
    -moz-border-radius: 4px 0 0 0;
    -ms-border-radius: 4px 0 0 0;
    -o-border-radius: 4px 0 0 0;
    border-radius: 4px 0 0 0;
    z-index: 0;
}

.top_news .news_slider .news_pink .news_cont:before {
    background: #ff2e9f;
}

.top_news .news_slider .news_purple .news_cont:before {
    background: #941bfd;
}

.top_news .news_slider .news_blue .news_cont:before {
    background: #3252ff;
}

.top_news .news_slider .news_bluelight .news_cont:before {
    background: #00d1d7;
}

.top_news .news_slider .news_green .news_cont:before {
    background: #38ec56;
}

.top_news .news_slider .news_yellow .news_cont:before {
    background: #fff65f;
}

.top_news .news_slider .news_orange .news_cont:before {
    background: #ff8420;
}

.top_news .news_slider .news_red .news_cont:before {
    background: #ff2d0a;
}

.top_news .news_slider .news_pic img {
    width: 340px;
    height: 250px;
    object-fit: cover;
    object-position: center top;
}

.top_news .news_slider .news_date {
    position: absolute;
    right: 0;
    top: 0;
    width: 80px;
    height: 100%;
    padding: 30px 0 0;
    display: flex;
    justify-content: center;
    z-index: 1;
}

.top_news .news_slider .news_date .date_txt {
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.05em;
    font-family: "Barlow", sans-serif;
    -webkit-writing-mode: vertical-lr;
    writing-mode: vertical-lr;
    -ms-writing-mode: tb-lr;
}

.top_news .news_slider .news_date .date_lar {
    font-size: 36px;
    line-height: 1.1;
    margin: 0 0 10px;
    vertical-align: bottom;
}

.top_news .news_slider .slick-slide {
    padding: 0 25px;
}

.top_news .news_slider a:hover {
    cursor: url("../img/top/hover_news.png") 60 60, auto;
}

@media (max-width: 767px) {
    .top_news {
        margin: 70px 0 0;
    }

    .top_news .hdl {
        margin: 0 0 35px;
    }

    .top_news .com_more {
        margin: 30px 0 0;
    }

    .top_news .news_slider {
        padding: 0 10px;
    }

    .top_news .news_slider .news_item:hover {
        opacity: 1;
    }

    .top_news .news_slider .news_tit {
        margin: 20px 0 0;
        font-size: 12px;
        line-height: 1.75;
    }

    .top_news .news_slider .news_cont {
        padding: 15px 10px 20px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        -ms-border-radius: 3px;
        -o-border-radius: 3px;
        border-radius: 3px;
    }

    .top_news .news_slider .news_cont:before {
        width: 30px;
        height: 2px;
    }

    .top_news .news_slider .news_pic img {
        width: 100%;
        height: 26.66vw;
    }

    .top_news .news_slider .news_date {
        position: static;
        width: auto;
        height: auto;
        padding: 0;
        display: block;
    }

    .top_news .news_slider .news_date .date_txt {
        font-size: 10px;
        font-weight: 500;
        letter-spacing: 0.05em;
        margin: 0 0 10px;
        -webkit-writing-mode: horizontal-tb;
        writing-mode: horizontal-tb;
        -ms-writing-mode: lr-tb;
    }

    .top_news .news_slider .news_date .date_lar {
        font-size: 20px;
        margin: 0 5px 0 0;
        vertical-align: bottom;
    }

    .top_news .news_slider .slick-slide {
        padding: 0 10px;
    }

    .top_news .news_slider a:hover {
        cursor: url("../img/top/hover_news.png") 60 60, auto;
    }
}

.top_rank {
    margin: 70px 0 0;
    position: relative;
}

.top_rank .hdl {
    margin: 0 0 45px;
}

.top_rank .rank_slider {
    margin: 0 -10px;
}

.top_rank .rank_slider .slick-slide {
    padding: 0 10px;
}

.top_rank .rank_box {
    padding: 35px 20px 40px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
    position: relative;
    z-index: 1;
}

.top_rank .com_more {
    margin: 20px 10px 0 0;
}

.top_rank .com_more a:before {
    background: rgba(255, 255, 255, 0.2);
}

.top_rank .rank_monthly {
    background: linear-gradient(to right bottom, #e60083, #7b1285);
}

.top_rank .rank_rising {
    background: linear-gradient(to right bottom, #941bfc, #7a1287);
}

.top_rank .rank_event {
    background: linear-gradient(to right bottom, #7241fc, #173fd4);
}

.top_rank .rank_tit {
    font-size: 24px;
    font-weight: 500;
    margin: 0 0 15px;
}

.top_rank .rank_list {
    margin: 0 -10px 0 0;
}

.top_rank .rank_list li {
    background: url("../img/common/bor_rank.png") 0 bottom repeat-x;
}

.top_rank .rank_list .rank_item {
    display: flex;
    align-items: center;
    gap: 0 8px;
    padding: 10px 5px 10px 60px;
    position: relative;
}

.top_rank .rank_list .rank_head {
    width: 70px;
    flex-shrink: 0;
    align-self: flex-start;
}

.top_rank .rank_list .rank_txt {
    font-size: 15px;
    transition: all 0.3s !important;
    -moz-transition: all 0.3s !important;
    /* Firefox */
    -webkit-transition: all 0.3s !important;
    /* Chrome&Safari */
}

.top_rank .rank_list .rank_item:hover .rank_txt {
    opacity: 0.5;
}

.top_rank .rank_list .rank_txt img {
    display: inline-block;
    vertical-align: middle;
}

.top_rank .rank_list .rank_item:before {
    position: absolute;
    content: "";
    left: 0;
    top: 25px;
    width: 32px;
    height: 20px;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 1;
}

.top_rank .rank_list .crown_champion:before {
    background-image: url("../img/common/crown01.png");
}

.top_rank .rank_list .crown_runnerup:before {
    background-image: url("../img/common/crown02.png");
}

.top_rank .rank_list .crown_thirdplace:before {
    background-image: url("../img/common/crown03.png");
}

.top_rank .rank_list .crown_number {
    position: absolute;
    left: 40px;
    top: 25px;
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
    color: #f0f0ef;
    font-family: "Barlow", sans-serif;
    z-index: 1;
}

.top_rank .rank_list .crown_number:before {
    position: absolute;
    content: "";
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 0;
}

.top_rank .rank_list .crown_number.crown_up:before {
    background-image: url("../img/common/up_rank.png");
    width: 12px;
    height: 18px;
    left: 50%;
    transform: translateX(-50%);
    top: calc(100% + 8px);
}

.top_rank .rank_list .crown_number.crown_down:before {
    background-image: url("../img/common/down_rank.png");
    width: 12px;
    height: 18px;
    left: 50%;
    transform: translateX(-50%);
    top: calc(100% + 8px);
}

.top_rank .rank_list .crown_number.crown_right:before {
    background-image: url("../img/common/right_rank.png");
    width: 18px;
    height: 12px;
    right: 50%;
    transform: translateX(50%);
    top: calc(100% + 10px);
}

.top_rank .filter-container {}

.top_rank .rank_filter {
    display: flex;
    align-items: stretch;
    margin: 0 0 20px;
}

.top_rank .rank_filter li {
    width: 50%;
    cursor: pointer;
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 36px;
    color: #f0f0ef;
    font-size: 16px;
    line-height: 1.3;
    font-weight: 500;
    border: 1px rgba(255, 255, 255, 0.4) solid;
    transition: all 0.3s !important;
    -moz-transition: all 0.3s !important;
    /* Firefox */
    -webkit-transition: all 0.3s !important;
    /* Chrome&Safari */
    position: relative;
}

.top_rank .rank_filter li:hover {
    opacity: 0.5;
}

.top_rank .rank_filter li.is-active {
    background: #f6f5f8;
    border: 1px #f0f0ef solid;
}

.top_rank .rank_filter li.is-active:hover {
    opacity: 1;
}

.top_rank .rank_filter li.is-active:before {
    position: absolute;
    content: "";
    background: #f6f5f8;
    width: 10px;
    height: 10px;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    z-index: 0;
}

.top_rank .rank_monthly .rank_filter li.is-active {
    color: #c21585;
}

.top_rank .rank_rising .rank_filter li.is-active {
    color: #8c1dd6;
}

.top_rank .rank_event .rank_filter li.is-active {
    color: #5342eb;
}

.top_rank .rank_category {}

.top_rank .rank_category .category_in {
    display: none;
}

.top_rank .rank_category .category_in.is-show {
    display: block;
}

.top_rank .rank_navi {
    display: none;
}

@media (max-width: 1024px) {
    .top_rank .rank_tit {
        font-size: 20px;
    }
}

@media (max-width: 767px) {
    .top_rank {
        margin: 40px 0 0;
    }

    .top_rank .hdl {
        margin: 0 0 35px;
    }

    .top_rank .rank_slider {
        margin: 0 -20px;
    }

    .top_rank .rank_slider .slick-slide {
        padding: 20px 20px 0;
        position: relative;
    }

    .top_rank .rank_slider .rank_pink {
        position: relative;
    }

    .top_rank .rank_slider .rank_pink:before {
        position: absolute;
        content: "";
        background: linear-gradient(to right bottom, #7241fc, #173fd4);
        height: 100%;
        top: -20px;
        left: -20px;
        width: 80px;
        opacity: 0.4;
        -webkit-border-radius: 0 5px 5px 0;
        -moz-border-radius: 0 5px 5px 0;
        -ms-border-radius: 0 5px 5px 0;
        -o-border-radius: 0 5px 5px 0;
        border-radius: 0 5px 5px 0;
        z-index: 0;
    }

    .top_rank .rank_slider .rank_pink:after {
        position: absolute;
        content: "";
        background: linear-gradient(to right bottom, #941bfc, #7a1287);
        height: 100%;
        top: -20px;
        right: -20px;
        width: 80px;
        opacity: 0.4;
        -webkit-border-radius: 5px 0 0 5px;
        -moz-border-radius: 5px 0 0 5px;
        -ms-border-radius: 5px 0 0 5px;
        -o-border-radius: 5px 0 0 5px;
        border-radius: 5px 0 0 5px;
        z-index: 0;
    }


    .top_rank .rank_slider .rank_purple {
        position: relative;
    }

    .top_rank .rank_slider .rank_purple:before {
        position: absolute;
        content: "";
        background: linear-gradient(to right bottom, #e60083, #7b1285);
        height: 100%;
        top: -20px;
        left: -20px;
        width: 80px;
        opacity: 0.4;
        -webkit-border-radius: 0 5px 5px 0;
        -moz-border-radius: 0 5px 5px 0;
        -ms-border-radius: 0 5px 5px 0;
        -o-border-radius: 0 5px 5px 0;
        border-radius: 0 5px 5px 0;
        z-index: 0;
    }

    .top_rank .rank_slider .rank_purple:after {
        position: absolute;
        content: "";
        background: linear-gradient(to right bottom, #7241fc, #173fd4);
        height: 100%;
        top: -20px;
        right: -20px;
        width: 80px;
        opacity: 0.4;
        -webkit-border-radius: 5px 0 0 5px;
        -moz-border-radius: 5px 0 0 5px;
        -ms-border-radius: 5px 0 0 5px;
        -o-border-radius: 5px 0 0 5px;
        border-radius: 5px 0 0 5px;
        z-index: 0;
    }


    .top_rank .rank_slider .rank_blue {
        position: relative;
    }

    .top_rank .rank_slider .rank_blue:before {
        position: absolute;
        content: "";
        background: linear-gradient(to right bottom, #941bfc, #7a1287);
        height: 100%;
        top: -20px;
        left: -20px;
        width: 80px;
        opacity: 0.4;
        -webkit-border-radius: 0 5px 5px 0;
        -moz-border-radius: 0 5px 5px 0;
        -ms-border-radius: 0 5px 5px 0;
        -o-border-radius: 0 5px 5px 0;
        border-radius: 0 5px 5px 0;
        z-index: 0;
    }

    .top_rank .rank_slider .rank_blue:after {
        position: absolute;
        content: "";
        background: linear-gradient(to right bottom, #e60083, #7b1285);
        height: 100%;
        top: -20px;
        right: -20px;
        width: 80px;
        opacity: 0.4;
        -webkit-border-radius: 5px 0 0 5px;
        -moz-border-radius: 5px 0 0 5px;
        -ms-border-radius: 5px 0 0 5px;
        -o-border-radius: 5px 0 0 5px;
        border-radius: 5px 0 0 5px;
        z-index: 0;
    }


    .top_rank .rank_slider .rank_purple {
        position: relative;
    }

    .top_rank .rank_slider .rank_blue {
        position: relative;
    }

    .top_rank .rank_slider .slick-current {
        position: relative;
        z-index: 2;
    }

    .top_rank .rank_box {
        padding: 35px 20px 25px;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        -ms-border-radius: 4px;
        -o-border-radius: 4px;
        border-radius: 4px;
    }

    .top_rank .com_more {
        margin: 20px 0 0 0;
    }

    .top_rank .rank_tit {
        font-size: 20px;
    }

    .top_rank .rank_list {
        margin: 0;
    }

    .top_rank .rank_list .rank_item {
        padding: 10px 5px 10px 35px;
    }

    .top_rank .rank_list .rank_txt {
        font-size: 13px;
    }

    .top_rank .rank_list .rank_item:hover .rank_txt {
        opacity: 1;
    }

    .top_rank .rank_list .rank_head {
        width: 60px;
        max-width: none;
    }

    .top_rank .rank_list .rank_item:before {
        top: 10px;
        width: 28px;
        height: 18px;
        background-size: 28px 18px;
    }

    .top_rank .rank_list .crown_number {
        left: 0;
        top: 33px;
        font-size: 17px;
        width: 28px;
        text-align: center;
    }

    .top_rank .rank_list .crown_number.crown_up:before {
        background-image: url("../img/common/up_rank.png");
        background-size: 10px 15px;
        width: 10px;
        height: 15px;
        top: calc(100% + 4px);
    }

    .top_rank .rank_list .crown_number.crown_down:before {
        background-image: url("../img/common/down_rank.png");
        background-size: 10px 15px;
        width: 10px;
        height: 15px;
        top: calc(100% + 4px);
    }

    .top_rank .rank_list .crown_number.crown_right:before {
        background-image: url("../img/common/right_rank.png");
        background-size: 15px 10px;
        width: 15px;
        height: 10px;
        top: calc(100% + 4px);
    }

    .top_rank .rank_filter {
        margin: 0 0 15px;
    }

    .top_rank .rank_filter li {
        height: 32px;
        font-size: 13px;
    }

    .top_rank .rank_filter li:hover {
        opacity: 1;
    }

    .top_rank .rank_filter li.is-active:before {
        width: 9px;
        height: 8px;
    }

    .top_rank .rank_navi {
        display: flex;
        justify-content: center;
        align-items: stretch;
        margin: 35px 0 0;
        gap: 0 50px;
    }

    .top_rank .rank_navi .rank_prev,
    .top_rank .rank_navi .rank_next {
        background-color: #2e2d30;
        background-size: 15px 10px;
        background-repeat: no-repeat;
        background-position: center center;
        width: 60px;
        height: 60px;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
        border-radius: 50%;
    }

    .top_rank .rank_navi .rank_prev {
        background-image: url("../img/top/prev_event.png");
    }

    .top_rank .rank_navi .rank_next {
        background-image: url("../img/top/next_event.png");
    }
}



/* sub_page
----------------------------------------------- */
.sub_page .com_fix {
    display: block;
}

.sub_page {
    padding: 180px 0 35px;
}

@media (max-width: 767px) {
    .sub_page {
        padding: 100px 0 0;
    }
}



/* teaser
----------------------------------------------- */
.teaser {
    border-bottom: 1px #45484f solid;
    padding: 0 0 25px;
    color: #f0f0ef;
    font-size: 42px;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: 0.03em;
    position: relative;
}

.teaser:before {
    position: absolute;
    content: "";
    background: #ff5c6d;
    width: 50px;
    height: 1px;
    left: 0;
    bottom: -1px;
    z-index: 0;
}

@media (max-width: 767px) {
    .teaser {
        padding: 0 0 15px;
        font-size: 30px;
        letter-spacing: 0.03em;
    }

    .teaser:before {
        width: 40px;
    }
}



/* news
----------------------------------------------- */
.sub_news .teaser {
    margin: 0 0 30px;
}

.sub_news .news_select {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 50px;
}

.sub_news .news_select select {
    color: #f0f0ef;
    font-size: 16px;
    font-weight: 500;
    font-family: "Barlow", sans-serif;
    background: url("../img/news/arrow_select.png") right center no-repeat #292d37;
    border: none;
    width: 150px;
    height: 50px;
    padding: 0 45px 0 20px;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
}

.sub_news .news_list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sub_news .news_list .news_item {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    background: #020709;
    border: 1px #383839 solid;
    position: relative;
    padding: 20px 130px 20px 20px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    border-radius: 6px;
}

.sub_news .news_list .news_item:before {
    position: absolute;
    content: "";
    width: 100px;
    height: 4px;
    left: 0;
    top: -1px;
    -webkit-border-radius: 4px 0 0 0;
    -moz-border-radius: 4px 0 0 0;
    -ms-border-radius: 4px 0 0 0;
    -o-border-radius: 4px 0 0 0;
    border-radius: 4px 0 0 0;
    z-index: 0;
}

.sub_news .news_list .news_item.news_pink:before {
    background: #ff2e9f;
}

.sub_news .news_list .news_item.news_purple:before {
    background: #941bfd;
}

.sub_news .news_list .news_item.news_blue:before {
    background: #3252ff;
}

.sub_news .news_list .news_item.news_bluelight:before {
    background: #00d1d7;
}

.sub_news .news_list .news_item.news_green:before {
    background: #38ec56;
}

.sub_news .news_list .news_item.news_yellow:before {
    background: #fff65f;
}

.sub_news .news_list .news_item.news_orange:before {
    background: #ff8420;
}

.sub_news .news_list .news_item.news_red:before {
    background: #ff2d0a;
}

.sub_news .news_list .news_item .item_arrow {
    position: absolute;
    right: 30px;
    bottom: 30px;
    width: 70px;
    height: 70px;
    z-index: 0;
}

.sub_news .news_list .news_item .item_arrow:after {
    position: absolute;
    content: "";
    background: url("../img/news/arrow_news.png") center center no-repeat;
    background-size: 8px 8px;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 0;
}

.sub_news .news_list .news_item .item_arrow:before {
    position: absolute;
    content: "";
    background: #2e2d30;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    transition: all 0.3s !important;
    -moz-transition: all 0.3s !important;
    /* Firefox */
    -webkit-transition: all 0.3s !important;
    /* Chrome&Safari */
    z-index: 0;
}

.sub_news .news_list .news_item:hover .item_arrow:before {
    transform: scale(1.1);
}

.sub_news .news_list .news_item .item_img {
    width: 270px;
    flex-shrink: 0;
}

.sub_news .news_list .news_item .item_inner {
    flex: 1;
    padding: 35px 0 0;
}

.sub_news .news_list .news_item .item_name {
    font-size: 22px;
    color: #f2f1ee;
    line-height: 1.45;
    letter-spacing: 0.02em;
}

.sub_news .news_list .news_item .item_date {
    margin: 10px 0 0;
    color: #5e5c5d;
    font-family: "Barlow", sans-serif;
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.05em;
    gap: 10px;
    display: flex;
    align-items: center;
    align-items: flex-end;
}

.sub_news .news_list .news_item .date_mon {
    font-size: 16px;
    letter-spacing: 0;
    line-height: 1.3;
}

.sub_news .news_list .news_item .item_date_sp {
    display: none;
}

@media (max-width: 767px) {
    .sub_news .news_list .news_item .item_date {
        display: none;
    }

    .sub_news .news_list .news_item .item_date_sp {
        margin: 15px 0 0;
        display: flex;
        gap: 5px;
        color: #5e5c5d;
        font-weight: 500;
        font-size: 11px;
    }

    .sub_news .news_list .news_item .date_mon {
        font-size: 13px;
    }

    .sub_news .teaser {
        margin: 0 0 25px;
    }

    .sub_news .news_select {
        margin: 0 0 25px;
    }

    .sub_news .news_select select {
        color: #f0f0ef;
        font-size: 12px;
        background: url("../img/news/arrow_select.png") right center no-repeat #292d37;
        background-size: 37px auto;
        width: 108px;
        height: 34px;
        padding: 0 36px 0 15px;
    }

    .sub_news .news_list .news_item {
        gap: 15px;
        padding: 25px 15px 20px 15px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        -ms-border-radius: 3px;
        -o-border-radius: 3px;
        border-radius: 3px;
    }

    .sub_news .news_list .news_item:before {
        width: 75px;
        height: 2px;
        top: -1px;
    }

    .sub_news .news_list .news_item .item_arrow {
        right: 15px;
        bottom: 20px;
        width: 35px;
        height: 35px;
    }

    .sub_news .news_list .news_item .item_arrow:after {
        background: url("../img/news/arrow_news.png") center center no-repeat;
        background-size: 6px 6px;
    }

    .sub_news .news_list .news_item:hover .item_arrow:before {
        transform: scale(1);
    }

    .sub_news .news_list .news_item .item_img {
        width: 115px;
    }

    .sub_news .news_list .news_item .item_inner {
        flex: 1;
        padding: 0 0 50px;
    }

    .sub_news .news_list .news_item .item_name {
        font-size: 13px;
        line-height: 1.77;
        letter-spacing: 0.02em;
    }
}


/* wp-pagenavi
----------------------------------------------- */
.wp-pagenavi {
    margin: 100px 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 40px;
}

.wp-pagenavi a,
.wp-pagenavi span {
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 22px;
    line-height: 1;
    font-weight: 600;
    color: #fff;
    font-family: "Barlow", sans-serif;
    position: relative;
}

.wp-pagenavi a:hover {
    opacity: 0.5;
}

.wp-pagenavi span:before {
    position: absolute;
    content: "";
    background: #fff;
    width: 30px;
    height: 1px;
    left: 50%;
    bottom: -10px;
    transform: translateX(-50%);
    z-index: 0;
}

.wp-pagenavi .extend {
    border: none;
    background: none;
    width: auto;
}

.wp-pagenavi .extend:before {
    display: none;
}

.wp-pagenavi .previouspostslink {
    margin: 0 10px 0 0;
    border: none;
    background: #292d37;
    width: 60px;
    height: 60px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    position: relative;
}

.wp-pagenavi .previouspostslink:before {
    position: absolute;
    content: "";
    background: url("../img/common/prev_wp.png") center center no-repeat;
    background-size: 11px 11px;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    transition: all 0.3s !important;
    -moz-transition: all 0.3s !important;
    /* Firefox */
    -webkit-transition: all 0.3s !important;
    /* Chrome&Safari */
    z-index: 0;
}

.wp-pagenavi .previouspostslink:hover {
    opacity: 1;
}

.wp-pagenavi .previouspostslink:hover:before {
    transform: translateX(-3px);
}

.wp-pagenavi .nextpostslink {
    margin: 0 0 0 10px;
    border: none;
    background: #292d37;
    width: 60px;
    height: 60px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    position: relative;
}

.wp-pagenavi .nextpostslink:before {
    position: absolute;
    content: "";
    background: url("../img/common/next_wp.png") center center no-repeat;
    background-size: 11px 11px;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    transition: all 0.3s !important;
    -moz-transition: all 0.3s !important;
    /* Firefox */
    -webkit-transition: all 0.3s !important;
    /* Chrome&Safari */
    z-index: 0;
}

.wp-pagenavi .nextpostslink:hover {
    opacity: 1;
}

.wp-pagenavi .nextpostslink:hover:before {
    transform: translateX(3px);
}

@media (max-width: 767px) {
    .wp-pagenavi {
        margin: 40px 0 0;
        gap: 20px;
    }

    .wp-pagenavi a,
    .wp-pagenavi span {
        font-size: 12px;
    }

    .wp-pagenavi a:hover {
        opacity: 1;
    }

    .wp-pagenavi span:before {
        width: 16px;
        height: 1px;
        bottom: -6px;
    }

    .wp-pagenavi .previouspostslink {
        margin: 0 5px 0 0;
        width: 32px;
        height: 32px;
    }

    .wp-pagenavi .previouspostslink:before {
        background: url("../img/common/prev_wp.png") center center no-repeat;
        background-size: 6px 6px;
    }

    .wp-pagenavi .previouspostslink:hover:before {
        transform: translateX(0);
    }

    .wp-pagenavi .nextpostslink {
        margin: 0 0 0 5px;
        width: 32px;
        height: 32px;
    }

    .wp-pagenavi .nextpostslink:before {
        background: url("../img/common/next_wp.png") center center no-repeat;
        background-size: 6px 6px;
    }

    .wp-pagenavi .nextpostslink:hover:before {
        transform: translateX(0);
    }
}


/* breadcrumb
----------------------------------------------- */
.breadcrumb {
    margin: 120px 0 0;
}

.breadcrumb .bread_in {
    font-size: 13px;
    font-weight: 500;
    vertical-align: middle;
}

.breadcrumb .bread_in a {
    display: inline-block;
    color: #ff2e9f;
    vertical-align: middle;
}

.breadcrumb .bread_in a,
.breadcrumb .bread_in span {
    margin: 5px 0;
}

.breadcrumb .bread_in a:hover {
    opacity: 0.5;
}

.breadcrumb .bread_in .bread_dot {
    color: #ff2e9f;
    display: inline-block;
    vertical-align: middle;
    margin: 0 18px;
}

.breadcrumb .bread_in .bread_end {
    color: #6d6d72;
    vertical-align: middle;
}

@media (max-width: 767px) {
    .breadcrumb {
        margin: 70px 0 0;
    }

    .breadcrumb .bread_in {
        font-size: 11px;
    }

    .breadcrumb .bread_in a:hover {
        opacity: 1;
    }
}


/* news detail
----------------------------------------------- */
.sub_news_detail .teaser {
    margin: 0 0 85px;
}

@media (max-width: 767px) {
    .sub_news_detail .teaser {
        margin: 0 0 30px;
    }
}

.detail_inner {
    max-width: 1000px;
    margin: 0 auto;
}

.detail_hd {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.03em;
    margin: 0 0 25px;
}

.detail_date {
    margin: 0 0 65px;
    display: flex;
    align-items: flex-end;
    gap: 10px;
    color: #5e5c5d;
    font-size: 13px;
    font-weight: 500;
    font-family: "Barlow", sans-serif;
}

.detail_date .date_mon {
    font-size: 16px;
    line-height: 1.3;
}

.post-body {
    font-size: 16px;
    line-height: 2;
    letter-spacing: 0;
    color: #fff;
}

.post-body h2 {
    margin: 75px 0 50px;
    padding: 30px 0 0;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.625;
    letter-spacing: 0.02em;
    position: relative;
}

.post-body h2:before {
    position: absolute;
    content: "";
    background: #ff5c6d;
    width: 100px;
    height: 1px;
    left: 0;
    top: 0;
    z-index: 0;
}

.post-body img {}

.post-body strong {
    color: #ff2e9f;
    font-weight: 700;
}

.post-body a {
    text-decoration: underline;
}

.post-body a:hover {
    text-decoration: none;
}

.post-body h3 {
    margin: 75px 0 40px;
    background: #292d37;
    padding: 25px 30px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: 0.02em;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}

.post-body h4 {
    border-left: 2px #3252ff solid;
    padding: 10px 0 10px 25px;
    font-size: 18px;
    line-height: 1.5;
    font-weight: 700;
    letter-spacing: 0.03em;
    margin: 55px 0 40px;
}

.post-body :is(blockquote, .is-style-border-accent) {
    background: #020709;
    border: 1px #292a2d solid;
    margin-block: 3em;
    padding: 30px 40px 55px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    border-radius: 8px;
}

.post-body ul {
    margin: 30px 0 2em;
    display: flex;
    flex-direction: column;
    gap: 10px 0;
}

.post-body ul li {
    padding: 0 0 0 18px;
    position: relative;
}

.post-body ul li:before {
    position: absolute;
    content: "";
    background: url("../img/news/dot_detail.png") center center no-repeat;
    width: 8px;
    height: 8px;
    left: 0;
    top: 12px;
    z-index: 0;
}

.post-body .tab_scroll {
    margin: 50px 0;
}

.post-body .tab_box {
    border: 1px #3b3c3f solid;
    overflow: hidden;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    border-radius: 8px;
}

.post-body table {
    width: 100%;
    margin-block: 3em;
}

.post-body table th,
.post-body table td {
    vertical-align: middle;
    width: 33.3333%;
    text-align: center;
    line-height: 1.5;
    color: #fff;
    padding: 25px 10px;
}

.post-body table td {
    background: #22252d;
}

.post-body table tr:nth-child(even) td {
    background: #1f2228;
}

.post-body table th+th,
.post-body table td+td {
    border-left: 1px #292d37 solid;
}

.post-body table tr {
    background-image: linear-gradient(to right, #771e94, #6b40f4);
}

.detail_back {
    display: flex;
    justify-content: center;
    margin: 90px 0 0;
}

.detail_back a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 280px;
    height: 80px;
    font-size: 18px;
    color: #fff;
    font-weight: 700;
    line-height: 1.5;
    background: url("../img/common/arrow_blank.png") right 30px center no-repeat #292d37;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
    border-radius: 50px;
}

.detail_back a:hover {
    opacity: 0.5;
}

@media (max-width: 767px) {
    .detail_hd {
        font-size: 20px;
        line-height: 1.75;
        letter-spacing: 0.03em;
        margin: 0 0 20px;
    }

    .detail_date {
        margin: 0 0 40px;
        gap: 5px;
        font-size: 11px;
    }

    .detail_date .date_mon {
        font-size: 13px;
    }

    .post-body {
        font-size: 13px;
        line-height: 2.15;
    }

    .post-body h2 {
        margin: 40px 0 30px;
        padding: 15px 0 0;
        font-size: 18px;
        line-height: 1.83;
        letter-spacing: 0.02em;
    }

    .post-body h2:before {
        width: 75px;
    }

    .post-body img {
        float: none;
        width: 100%;
        display: block;
        margin: 0 0 30px;
    }

    .post-body a:hover {
        text-decoration: underline;
    }

    .post-body h3 {
        margin: 50px 0 25px;
        padding: 20px;
        font-size: 14px;
        line-height: 2.07;
        letter-spacing: 0.02em;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        -ms-border-radius: 5px;
        -o-border-radius: 5px;
        border-radius: 5px;
    }

    .post-body h4 {
        border-left: 1px #3252ff solid;
        padding: 5px 0 5px 20px;
        font-size: 14px;
        letter-spacing: 0.03em;
        margin: 35px 0 20px;
    }

    .post-body :is(blockquote, .is-style-border-accent) {
        padding: 20px;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        -ms-border-radius: 4px;
        -o-border-radius: 4px;
        border-radius: 4px;
    }

    .post-body ul {
        margin: 15px 0 2em;
        gap: 15px 0;
    }

    .post-body ul li {
        line-height: 1.85;
        padding: 0 0 0 18px;
    }

    .post-body ul li:before {
        background: url("../img/news/dot_detail.png") center center no-repeat;
        background-size: 6px 6px;
        width: 6px;
        height: 6px;
        left: 0;
        top: 8px;
    }

    .post-body .tab_scroll {
        margin: 30px -20px 30px 0;
        padding: 0 20px 0 0;
        overflow-x: scroll;
    }

    .post-body .tab_box {
        width: 600px;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        -ms-border-radius: 4px;
        -o-border-radius: 4px;
        border-radius: 4px;
    }

    .post-body table th,
    .post-body table td {
        padding: 20px 10px;
    }

    .detail_back {
        margin: 40px 0 0;
    }

    .detail_back a {
        width: 205px;
        height: 60px;
        font-size: 13px;
        background: url("../img/common/arrow_blank.png") right 25px center no-repeat #292d37;
        background-size: 10px 10px;
    }

    .detail_back a:hover {
        opacity: 1;
    }
}



/* streamer
----------------------------------------------- */
.sub_streamer .teaser {
    margin: 0 0 50px;
}

.sub_streamer .streamer_search {
    background: #12141c;
    padding: 80px 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    border-radius: 20px;
}

.sub_streamer .streamer_search .search_in {
    max-width: 840px;
    display: flex;
    margin: 0 auto;
    gap: 60px;
}

.sub_streamer .streamer_search .search_cont {
    padding: 10px 20px 20px 0;
    border-bottom: 1px #292d37 solid;
    flex: 1;
}

.sub_streamer .streamer_search .search_cont input {
    width: 100%;
    height: 35px;
    padding: 0 40px 0 0;
    background: none;
    color: #f0f0ef;
    background-image: url("../img/common/ico_search.png");
    background-repeat: no-repeat;
    background-size: 35px 35px;
    font-family: "Noto Sans JP", sans-serif;
    background-position: right center;
}

.sub_streamer .streamer_search .search_cont input::placeholder {
    color: #f0f0ef;
    font-size: 16px;
    letter-spacing: 0.03em;
    font-family: "Noto Sans JP", sans-serif;
}

.sub_streamer .streamer_search .search_filter {
    position: relative;
    flex-shrink: 0;
}

.sub_streamer .streamer_search .search_btn {
    width: 155px;
}

.sub_streamer .streamer_search .search_btn button {
    background: #292d37;
    width: 100%;
    display: flex;
    font-size: 16px;
    letter-spacing: 0.03em;
    height: 65px;
    align-items: center;
    padding: 0 20px;
    justify-content: space-between;
    color: #fff;
    outline: none;
    border: none;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.3s !important;
    -moz-transition: all 0.3s !important;
    /* Firefox */
    -webkit-transition: all 0.3s !important;
    /* Chrome&Safari */
}

.sub_streamer .streamer_search .search_btn button:hover {
    opacity: 0.5;
}

.sub_streamer .streamer_search .search_btn img {
    width: 20px;
}

.sub_streamer .streamer_search .search_popup {
    position: absolute;
    display: none;
    left: 50%;
    top: calc(100% + 30px);
    width: 350px;
    transform: translateX(-50%);
    background: #292d37;
    border: 1px #545454 solid;
    font-size: 16px;
    color: #fff;
    letter-spacing: 0.03em;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    border-radius: 6px;
    z-index: 1;
}

.sub_streamer .streamer_search .search_popup:before {
    position: absolute;
    content: "";
    background: url("../img/streamer/ico_popup.png") center center no-repeat;
    left: 0;
    bottom: calc(100% - 1px);
    width: 100%;
    height: 16px;
    z-index: 0;
}

.sub_streamer .streamer_search .search_popup select {
    background: url("../img/streamer/arrow_select.png") right 20px center no-repeat #1b1d22;
    flex-shrink: 0;
    width: 100px;
    height: 45px;
    border: 1px #45484f solid;
    color: #fff;
    font-family: "Barlow", sans-serif;
    font-size: 13px;
    padding: 0 30px 0 20px;
    font-weight: 600;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
}

.sub_streamer .streamer_search .popup_name {
    border-bottom: 1px #45484f solid;
    height: 90px;
    padding: 0 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sub_streamer .streamer_search .popup_name .name_txt {}

.sub_streamer .streamer_search .popup_total {
    border-bottom: 1px #45484f solid;
    height: 80px;
    padding: 0 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sub_streamer .streamer_search .popup_total .total_txt {}

.sub_streamer .streamer_search .popup_end {
    height: 95px;
    padding: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sub_streamer .streamer_search .popup_end .end_rest input {
    padding: 0 30px;
    background: none;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.3);
    transition: all 0.3s !important;
    -moz-transition: all 0.3s !important;
    /* Firefox */
    -webkit-transition: all 0.3s !important;
    /* Chrome&Safari */
}

.sub_streamer .streamer_search .popup_end .end_rest input:hover {
    opacity: 0.5;
}

.sub_streamer .streamer_search .popup_end .end_narrow input {
    width: 140px;
    height: 52px;
    text-align: center;
    color: #292d37;
    border: none;
    background: #fff;
    cursor: pointer;
    transition: all 0.3s !important;
    -moz-transition: all 0.3s !important;
    /* Firefox */
    -webkit-transition: all 0.3s !important;
    /* Chrome&Safari */
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    border-radius: 6px;
}

.sub_streamer .streamer_search .popup_end .end_narrow input:hover {
    opacity: 0.5;
}

@media (max-width: 1024px) {
    .sub_streamer .streamer_search .search_popup {
        left: auto;
        right: 0;
        transform: translateX(0);
    }
}

@media (max-width: 767px) {
    .sub_streamer .teaser {
        margin: 0 0 25px;
    }

    .sub_streamer .streamer_search {
        padding: 40px 30px 25px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
        border-radius: 10px;
    }

    .sub_streamer .streamer_search .search_in {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 25px;
    }

    .sub_streamer .streamer_search .search_cont {
        width: 100%;
        padding: 0 0 10px;
    }

    .sub_streamer .streamer_search .search_cont input {
        height: 20px;
        padding: 0 25px 0 0;
        font-size: 12px;
        background-image: url("../img/common/ico_search.png");
        background-repeat: no-repeat;
        background-size: 17px 17px;
    }

    .sub_streamer .streamer_search .search_cont input::placeholder {
        font-size: 12px;
        letter-spacing: 0.03em;
    }

    .sub_streamer .streamer_search .search_btn {
        width: 125px;
    }

    .sub_streamer .streamer_search .search_btn button {
        font-size: 12px;
        letter-spacing: 0.03em;
        height: 45px;
        padding: 0 15px 0 20px;
    }

    .sub_streamer .streamer_search .search_btn button:hover {
        opacity: 1;
    }

    .sub_streamer .streamer_search .search_btn img {
        width: 15px;
    }

    .sub_streamer .streamer_search .search_popup {
        top: calc(100% + 20px);
        right: 50%;
        transform: translateX(50%);
        width: 285px;
        font-size: 12px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        -ms-border-radius: 3px;
        -o-border-radius: 3px;
        border-radius: 3px;
    }

    .sub_streamer .streamer_search .search_popup:before {
        position: absolute;
        content: "";
        background: url("../img/streamer/ico_popup.png") center center no-repeat;
        left: 0;
        bottom: calc(100% - 1px);
        width: 100%;
        height: 16px;
        z-index: 0;
    }

    .sub_streamer .streamer_search .search_popup select {
        background: url("../img/streamer/arrow_select.png") right 13px center no-repeat #1b1d22;
        background-size: 7px auto;
        width: 75px;
        height: 35px;
        font-size: 11px;
        padding: 0 20px 0 15px;
    }

    .sub_streamer .streamer_search .popup_name {
        height: 70px;
        padding: 0 25px;
    }

    .sub_streamer .streamer_search .popup_total {
        height: 70px;
        padding: 0 25px;
    }

    .sub_streamer .streamer_search .popup_end {
        height: 72px;
        padding: 0 25px;
    }

    .sub_streamer .streamer_search .popup_end .end_rest input:hover {
        opacity: 1;
    }

    .sub_streamer .streamer_search .popup_end .end_narrow input {
        width: 108px;
        height: 40px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        -ms-border-radius: 3px;
        -o-border-radius: 3px;
        border-radius: 3px;
    }

    .sub_streamer .streamer_search .popup_end .end_narrow input:hover {
        opacity: 1;
    }
}


.sub_streamer .streamer_result {
    margin: 50px 0 0;
}

.sub_streamer .streamer_result .result_list {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 0 35px;
}

.sub_streamer .streamer_result .result_list li {
    width: calc((100% - 70px)/3);
    display: flex;
    align-items: flex-end;
    border-bottom: 1px #66676a dashed;
}

.sub_streamer .streamer_result .result_list a {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 30px 0 30px 25px;
    gap: 20px;
}

.sub_streamer .streamer_result .result_head {
    max-width: 46%;
    flex-shrink: 0;
}

.sub_streamer .streamer_result .result_in {
    font-size: 22px;
    line-height: 1.45;
    font-weight: 500;
    letter-spacing: 0;
    transition: all 0.3s !important;
    -moz-transition: all 0.3s !important;
    /* Firefox */
    -webkit-transition: all 0.3s !important;
    /* Chrome&Safari */
}

.sub_streamer .streamer_result .result_in img {
    vertical-align: middle;
}

.sub_streamer .streamer_result .result_list a:hover .result_in {
    opacity: 0.5;
}

@media (max-width: 1024px) {
    .sub_streamer .streamer_result .result_list li {
        width: calc((100% - 35px)/2);
    }
}

@media (max-width: 767px) {
    .sub_streamer .streamer_result {
        margin: 30px 0 0;
    }

    .sub_streamer .streamer_result .result_list {
        justify-content: space-between;
        gap: 0 20px;
    }

    .sub_streamer .streamer_result .result_list li {
        width: calc((100% - 20px)/2);
    }

    .sub_streamer .streamer_result .result_list a {
        padding: 10px 0 10px 5px;
        gap: 10px;
    }

    .sub_streamer .streamer_result .result_head {
        max-width: none;
        width: min(55px, 14.67vw);
    }

    .sub_streamer .streamer_result .result_in {
        font-size: min(12px, 3.2vw);
    }

    .sub_streamer .streamer_result .result_list a:hover .result_in {
        opacity: 1;
    }

    .sub_streamer .streamer_result .result_in .ico01 {
        width: 14px;
    }

    .sub_streamer .streamer_result .result_in .ico02 {
        width: 11px;
    }

    .sub_streamer .streamer_result .result_in .ico03 {
        width: 11px;
    }

    .sub_streamer .streamer_result .result_in .ico04 {
        width: 12px;
    }

    .sub_streamer .streamer_result .result_in .ico05 {
        width: 18px;
    }

    .sub_streamer .streamer_result .result_in .ico06 {
        width: 25px;
    }

    .sub_streamer .streamer_result .result_in .ico07 {
        width: 13px;
    }

    .sub_streamer .streamer_result .result_in .ico08 {
        width: 13px;
    }

    .sub_streamer .streamer_result .result_in .ico09 {
        width: 21px;
    }

    .sub_streamer .streamer_result .result_in .ico10 {
        width: 25px;
    }
}




/* monthly_ranking
----------------------------------------------- */
.sub_ranking .teaser {
    margin: 0 0 25px;
}

.sub_ranking .ranking_time {
    margin: 0 0 60px;
    text-align: right;
    color: #f0f0ef;
    font-size: 14px;
}

.sub_ranking .ranking_time .ff_barlow {
    font-weight: 500;
}

.sub_ranking .ranking_navi {
    max-width: 1000px;
    margin: 120px auto 0;
    background: #12141c;
    border: 1px #545454 solid;
    padding: 60px 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    border-radius: 20px;
}

.sub_ranking .ranking_navi .navi_btn {
    max-width: 820px;
    margin: 0 auto;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 36px;
}

.sub_ranking .ranking_navi .navi_btn li {
    width: calc((100% - 36px)/2);
}

.sub_ranking .ranking_navi .navi_btn li a {
    display: flex;
    align-items: center;
    width: 100%;
    height: 105px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #f2f1ee;
    position: relative;
    padding: 0 70px 0 50px;
    background-position: 1% 50%;
    background-size: 200% auto;
    transition: all 0.3s ease-out;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    -ms-border-radius: 60px;
    -o-border-radius: 60px;
    border-radius: 60px;
}

.sub_ranking .ranking_navi .navi_btn li a:before {
    position: absolute;
    content: "";
    background: url("../img/common/arrow_wh.png") center center no-repeat;
    background-size: 14px 14px;
    width: 14px;
    height: 100%;
    right: 50px;
    top: 0;
    z-index: 0;
}

.sub_ranking .ranking_navi .navi_btn li a:hover {
    background-position: 99% 50%;
}

.sub_ranking .ranking_navi a.navi_purple {
    background: linear-gradient(270deg, #951bff 0%, #7a1285 51%, #951bff 100%);
}

.sub_ranking .ranking_navi a.navi_blue {
    background: linear-gradient(270deg, #7141fc 0%, #1a3fd5 51%, #7141fc 100%);
}

.sub_ranking .ranking_navi a.navi_red {
    background: linear-gradient(270deg, #e90083 0%, #7a1285 51%, #e90083 100%);
}

@media (max-width: 767px) {
    .sub_ranking .ranking_time {
        margin: 0 0 30px;
        font-size: 12px;
    }

    .sub_ranking .ranking_navi {
        margin: 50px auto 0;
        padding: 35px min(40px, 10.66vw);
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
        border-radius: 10px;
    }

    .sub_ranking .ranking_navi .navi_btn {
        flex-direction: column;
        gap: 20px;
    }

    .sub_ranking .ranking_navi .navi_btn li {
        width: 100%;
    }

    .sub_ranking .ranking_navi .navi_btn li a {
        height: 55px;
        font-size: 12px;
        letter-spacing: 0.04em;
        padding: 0 40px 0 30px;
    }

    .sub_ranking .ranking_navi .navi_btn li a:before {
        position: absolute;
        content: "";
        background: url("../img/common/arrow_wh.png") center center no-repeat;
        background-size: 7px 7px;
        width: 7px;
        right: 30px;
    }

    .sub_ranking .ranking_navi .navi_btn li a:hover {
        background-position: 1% 50%;
    }
}


.sub_ranking .filter-container {}

.sub_ranking .ranking_box .rank_filter {
    display: flex;
    align-items: stretch;
    margin: 0 0 25px;
}

.sub_ranking .ranking_box .rank_filter li {
    width: 50%;
    cursor: pointer;
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 90px;
    color: rgba(240, 240, 239, 0.5);
    font-size: 24px;
    line-height: 1.3;
    font-weight: 500;
    border: 1px #707174 solid;
    transition: all 0.3s !important;
    -moz-transition: all 0.3s !important;
    /* Firefox */
    -webkit-transition: all 0.3s !important;
    /* Chrome&Safari */
    position: relative;
}

.sub_ranking .ranking_box .rank_filter li:hover {
    opacity: 0.5;
}

.sub_ranking .ranking_box .rank_filter li.is-active {
    color: #fff;
    border: none;
}

.sub_ranking .ranking_box .rank_filter li.is-active:hover {
    opacity: 1;
}

.sub_ranking .ranking_box .rank_filter li.is-active:before {
    position: absolute;
    content: "";
    width: 30px;
    height: 20px;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    z-index: 0;
}

.sub_ranking .ranking_box.rank_monthly .rank_filter li.is-active {
    background: linear-gradient(to bottom right, #e00784, #d01185);
}

.sub_ranking .ranking_box.rank_monthly .rank_filter li.is-active:before {
    background: #d70e84;
}

.sub_ranking .ranking_box.rank_rising .rank_filter li.is-active {
    background: linear-gradient(to bottom right, #931cf5, #8f1de3);
}

.sub_ranking .ranking_box.rank_rising .rank_filter li.is-active:before {
    background: #911ceb;
}

.sub_ranking .ranking_box.rank_event .rank_filter li.is-active {
    background: linear-gradient(to bottom right, #6842f7, #5242eb);
}

.sub_ranking .ranking_box.rank_event .rank_filter li.is-active:before {
    background: #5d42f1;
}

.sub_ranking .ranking_box .rank_category {}

.sub_ranking .ranking_box .rank_category .category_in {
    display: none;
}

.sub_ranking .ranking_box .rank_category .category_in.is-show {
    display: block;
}

@media (max-width: 767px) {
    .sub_ranking .ranking_box .rank_filter {
        margin: 0 0 10px;
    }

    .sub_ranking .ranking_box .rank_filter li {
        height: 45px;
        font-size: 12px;
    }

    .sub_ranking .ranking_box .rank_filter li:hover {
        opacity: 1;
    }

    .sub_ranking .ranking_box .rank_filter li.is-active:before {
        width: 15px;
        height: 10px;
    }
}

.sub_ranking .ranking_box .rank_block {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 40px;
    align-items: stretch;
}

.sub_ranking .ranking_box .rank_block li {
    width: calc((100% - 80px)/3);
    border-bottom: 1px #66676a dashed;
    display: flex;
    align-items: flex-end;
    padding: 40px 0;
    position: relative;
}

.sub_ranking .ranking_box .rank_block .rank_inner {
    padding: 0 0 0 40px;
    width: 100%;
    position: relative;
}

.sub_ranking .ranking_box .rank_block .rank_item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    color: #f2f1ee;
    position: relative;
}

.sub_ranking .ranking_box .rank_block .rank_head {
    flex-shrink: 0;
}

.sub_ranking .ranking_box .rank_block .rank_head .head_img {
    width: 140px;
    display: block;
}

.sub_ranking .ranking_box .rank_block .rank_tiktok {
    position: absolute;
    right: 0;
    bottom: 10px;
    padding: 0 48px 0 0;
    color: #f2f1ee;
    font-size: 14px;
    line-height: 1;
    font-family: "Barlow", sans-serif;
    z-index: 1;
}

.sub_ranking .ranking_box .rank_block .rank_tiktok:before {
    position: absolute;
    content: "";
    width: 40px;
    height: 40px;
    background: #2e2d30;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: all 0.3s !important;
    -moz-transition: all 0.3s !important;
    /* Firefox */
    -webkit-transition: all 0.3s !important;
    /* Chrome&Safari */
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    z-index: 0;
}

.sub_ranking .ranking_box .rank_block .rank_tiktok:after {
    position: absolute;
    content: "";
    background: url("../img/common/arrow_wh.png") center center no-repeat;
    background-size: 7px 7px;
    width: 40px;
    height: 40px;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 0;
}

.sub_ranking .ranking_box .rank_block .rank_item:hover .rank_tiktok:before {
    transform: translateY(-50%) scale(1.1);
}

.sub_ranking .ranking_box .rank_block .rank_cont {
    flex: 1;
    padding: 5px 0 40px;
}

.sub_ranking .ranking_box .rank_block .rank_name {
    font-size: 22px;
    line-height: 1.2;
    letter-spacing: 0;
    margin: 0 0 15px;
}

.sub_ranking .ranking_box .rank_block .rank_name img {
    display: inline-block;
    vertical-align: top;
}

.sub_ranking .ranking_box .rank_block .rank_name_sp {
    display: none;
}

.sub_ranking .ranking_box .rank_block .rank_name_sp img {
    display: inline-block;
    vertical-align: top;
}

.sub_ranking .ranking_box .rank_block .rank_capin {
    font-size: 14px;
    margin: 0 0 2px;
}

.sub_ranking .ranking_box .rank_block .rank_diamond {
    font-size: 20px;
    line-height: 1.2;
    font-weight: 500;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 6px;
    font-family: "Barlow", sans-serif;
}

.sub_ranking .ranking_box .rank_block .rank_diamond img {
    width: 18px;
}

.sub_ranking .ranking_box .rank_block .rank_num {
    position: absolute;
    left: 0;
    top: 70px;
    transform: translateY(-50%);
    font-size: 30px;
    font-weight: 600;
    color: #f0f0ef;
    line-height: 1;
    min-width: 1em;
    text-align: center;
    letter-spacing: 0;
    padding: 0 0 44px;
    font-family: "Barlow", sans-serif;
    z-index: 0;
}

.sub_ranking .ranking_box .rank_block .rank_num:before {
    position: absolute;
    content: "";
    background: url("../img/ranking/arrow.png") center center no-repeat;
    background-size: 20px 32px;
    width: 20px;
    height: 32px;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    z-index: 0;
}

.sub_ranking .ranking_box .rank_block .rank_drop .rank_num:before {
    transform: translateX(-50%) rotate(180deg);
}

.sub_ranking .ranking_box .rank_block .rank_rise .rank_num:before {}

.sub_ranking .ranking_box .rank_block .rank_remain .rank_num:before {
    transform: translateX(-50%) rotate(90deg);
}

.sub_ranking .ranking_box .rank_block .rank_first {
    width: 100%;
    padding: 55px 0;
    margin: 0 0 15px;
}

.sub_ranking .ranking_box .rank_block .rank_first .rank_inner {
    padding: 0 0 0 160px;
}

.sub_ranking .ranking_box .rank_block .rank_first .rank_item {
    gap: 0 55px;
}

.sub_ranking .ranking_box .rank_block .rank_first .rank_head .head_img {
    width: 214px;
}

.sub_ranking .ranking_box .rank_block .rank_first .rank_name {
    font-size: 36px;
    margin: 0 0 20px;
}

.sub_ranking .ranking_box .rank_block .rank_first .rank_cont {
    padding-top: 10px;
}

.sub_ranking .ranking_box .rank_block .rank_first .rank_capin {
    font-size: 22px;
}

.sub_ranking .ranking_box .rank_block .rank_first .rank_diamond {
    font-size: 30px;
}

.sub_ranking .ranking_box .rank_block .rank_first .rank_diamond img {
    width: 25px;
}

.sub_ranking .ranking_box .rank_block .rank_first .rank_tiktok {
    bottom: 30px;
}

.sub_ranking .ranking_box .rank_block .rank_first .rank_num {
    width: 160px;
    top: 107px;
    padding: 0 0 54px;
}

.sub_ranking .ranking_box .rank_block .rank_first .rank_num:before {
    background: url("../img/ranking/arrow_lar.png") center center no-repeat;
    background-size: 27px 45px;
    width: 28px;
    height: 46px;
}

.sub_ranking .ranking_box .rank_block .rank_first .rank_num img {
    width: 104px;
}

.sub_ranking .ranking_box .rank_block .rank_other {
    width: calc((100% - 40px)/2);
    padding: 45px 0;
    margin: 0 0 40px;
}

.sub_ranking .ranking_box .rank_block .rank_other .rank_inner {
    padding: 0 0 0 120px;
}

.sub_ranking .ranking_box .rank_block .rank_other .rank_item {
    gap: 0 15px;
}

.sub_ranking .ranking_box .rank_block .rank_other .rank_head .head_img {
    width: 148px;
}

.sub_ranking .ranking_box .rank_block .rank_other .rank_name {
    font-size: 28px;
    margin: 0 0 15px;
}

.sub_ranking .ranking_box .rank_block .rank_other .rank_cont {}

.sub_ranking .ranking_box .rank_block .rank_other .rank_capin {
    font-size: 18px;
    margin: 0 0 5px;
}

.sub_ranking .ranking_box .rank_block .rank_other .rank_diamond {
    font-size: 24px;
}

.sub_ranking .ranking_box .rank_block .rank_other .rank_tiktok {
    bottom: 10px;
}

.sub_ranking .ranking_box .rank_block .rank_other .rank_num {
    width: 120px;
    top: 74px;
    padding: 0 0 40px;
}

.sub_ranking .ranking_box .rank_block .rank_other .rank_num img {
    width: 66px;
}

@media (max-width: 1024px) {
    .sub_ranking .ranking_box .rank_block li {
        width: calc((100% - 40px)/2);
    }

    .sub_ranking .ranking_box .rank_block .rank_other {
        width: 100%;
    }

    .sub_ranking .ranking_box .rank_block .rank_first .rank_item {
        gap: 0 30px;
    }
}

@media (max-width: 767px) {
    .sub_ranking .ranking_box .rank_block {
        gap: 10px 16px;
    }

    .sub_ranking .ranking_box .rank_block li {
        width: calc((100% - 16px)/2);
        padding: 20px 0;
    }

    .sub_ranking .ranking_box .rank_block .rank_inner {
        padding: 0 0 0 18px;
    }

    .sub_ranking .ranking_box .rank_block .rank_item {
        gap: 15px;
        flex-direction: column;
    }

    .sub_ranking .ranking_box .rank_block .rank_head {
        display: flex;
        align-items: center;
        gap: 0 10px;
    }

    .sub_ranking .ranking_box .rank_block .rank_head .head_img {
        width: 55px;
    }

    .sub_ranking .ranking_box .rank_block .rank_tiktok {
        position: absolute;
        right: 0;
        bottom: 2px;
        padding: 0 28px 0 0;
        font-size: 11px;
    }

    .sub_ranking .ranking_box .rank_block .rank_tiktok:before {
        width: 24px;
        height: 24px;
    }

    .sub_ranking .ranking_box .rank_block .rank_tiktok:after {
        background-size: 6px 6px;
        width: 24px;
        height: 24px;
    }

    .sub_ranking .ranking_box .rank_block .rank_item:hover .rank_tiktok:before {
        transform: translateY(-50%) scale(1);
    }

    .sub_ranking .ranking_box .rank_block .rank_cont {
        flex: 1;
        padding: 0 60px 0 0;
        margin: 0 0 0 -15px;
    }

    .sub_ranking .ranking_box .rank_block .rank_name {
        display: none;
    }

    .sub_ranking .ranking_box .rank_block .rank_capin {
        font-size: 10px;
        margin: 0 0 4px;
    }

    .sub_ranking .ranking_box .rank_block .rank_diamond {
        font-size: 13px;
        line-height: 1;
        gap: 0 5px;
    }

    .sub_ranking .ranking_box .rank_block .rank_diamond img {
        width: 10px;
        vertical-align: middle;
    }

    .sub_ranking .ranking_box .rank_block .rank_num {
        top: 28px;
        font-size: 14px;
        min-width: inherit;
        letter-spacing: 0;
        padding: 0 0 20px;
    }

    .sub_ranking .ranking_box .rank_block .rank_num:before {
        background: url("../img/ranking/arrow.png") center center no-repeat;
        background-size: 8px 13px;
        width: 8px;
        height: 14px;
    }

    .sub_ranking .ranking_box .rank_block .rank_first {
        padding: 35px 0;
        margin: 0;
    }

    .sub_ranking .ranking_box .rank_block .rank_first .rank_inner {
        padding: 0 0 0 40px;
    }

    .sub_ranking .ranking_box .rank_block .rank_first .rank_item {
        gap: 15px 0;
    }

    .sub_ranking .ranking_box .rank_block .rank_first .rank_head {
        gap: 0 15px;
    }

    .sub_ranking .ranking_box .rank_block .rank_first .rank_head .head_img {
        width: 90px;
    }

    .sub_ranking .ranking_box .rank_block .rank_first .rank_cont {
        margin: 0;
        width: 100%;
        padding: 0 60px 0 0;
        display: flex;
        align-items: center;
        gap: 13px;
        flex: auto;
    }

    .sub_ranking .ranking_box .rank_block .rank_first .rank_capin {
        font-size: 12px;
        margin: 0;
        line-height: 1.1;
    }

    .sub_ranking .ranking_box .rank_block .rank_first .rank_diamond {
        font-size: 18px;
    }

    .sub_ranking .ranking_box .rank_block .rank_first .rank_diamond img {
        width: 14px;
    }

    .sub_ranking .ranking_box .rank_block .rank_first .rank_tiktok {
        bottom: 2px;
    }

    .sub_ranking .ranking_box .rank_block .rank_first .rank_num {
        width: auto;
        top: 45px;
        padding: 0 0 20px;
    }

    .sub_ranking .ranking_box .rank_block .rank_first .rank_num:before {
        background: url("../img/ranking/arrow_lar.png") center center no-repeat;
        background-size: 10px 15px;
        width: 10px;
        height: 15px;
    }

    .sub_ranking .ranking_box .rank_block .rank_first .rank_num img {
        width: 32px;
    }

    .sub_ranking .ranking_box .rank_block .rank_first .rank_name_sp {
        font-size: 18px;
    }

    .sub_ranking .ranking_box .rank_block .rank_other {
        padding: 20px 0 30px;
        margin: 0;
    }

    .sub_ranking .ranking_box .rank_block .rank_other .rank_inner {
        padding: 0 0 0 40px;
    }

    .sub_ranking .ranking_box .rank_block .rank_other .rank_head .head_img {
        width: 70px;
    }

    .sub_ranking .ranking_box .rank_block .rank_other .rank_item {
        flex-direction: row;
        gap: 0 10px;
    }

    .sub_ranking .ranking_box .rank_block .rank_other .rank_name {
        font-size: 15px;
        margin: 0 0 10px;
        display: block;
    }

    .sub_ranking .ranking_box .rank_block .rank_other .rank_cont {
        margin: 0;
        padding: 0;
    }

    .sub_ranking .ranking_box .rank_block .rank_other .rank_capin {
        font-size: 11px;
    }

    .sub_ranking .ranking_box .rank_block .rank_other .rank_diamond {
        font-size: 16px;
    }

    .sub_ranking .ranking_box .rank_block .rank_other .rank_diamond img {
        width: 14px;
    }

    .sub_ranking .ranking_box .rank_block .rank_other .rank_tiktok {
        bottom: 2px;
    }

    .sub_ranking .ranking_box .rank_block .rank_other .rank_num {
        width: auto;
        top: 35px;
        padding: 0 0 20px;
    }

    .sub_ranking .ranking_box .rank_block .rank_other .rank_num:before {
        background: url("../img/ranking/arrow_lar.png") center center no-repeat;
        background-size: 10px 15px;
        width: 10px;
        height: 15px;
    }

    .sub_ranking .ranking_box .rank_block .rank_other .rank_num img {
        width: 32px;
    }

    .sub_ranking .ranking_box .rank_block .ico01 {
        width: 19px;
    }

    .sub_ranking .ranking_box .rank_block .ico02 {
        width: 17px;
    }

    .sub_ranking .ranking_box .rank_block .ico03 {
        width: 15px;
    }

    .sub_ranking .ranking_box .rank_block .ico04 {
        width: 16px;
    }

    .sub_ranking .ranking_box .rank_block .ico05 {
        width: 24px;
    }

    .sub_ranking .ranking_box .rank_block .ico06 {
        width: 25px;
    }

    .sub_ranking .ranking_box .rank_block .ico07 {
        width: 12px;
    }

    .sub_ranking .ranking_box .rank_block .ico08 {
        width: 12px;
    }

    .sub_ranking .ranking_box .rank_block .rank_name_sp {
        display: block;
        line-height: 1.33;
        font-size: 12px;
    }
}




.sub_ranking .ranking_box .rank_block .rank_percent {
    font-size: 22px;
    line-height: 1.2;
    font-family: "Barlow", sans-serif;
}

.sub_ranking .ranking_box .rank_block .rank_growth {
    display: flex;
    align-items: center;
}

.sub_ranking .ranking_box .rank_block .rank_first .rank_growth {
    gap: 20px;
}

.sub_ranking .ranking_box .rank_block .rank_first .rank_growth .rank_capin {
    margin: 3px 0 0;
}

.sub_ranking .ranking_box .rank_block .rank_first .rank_growth .rank_percent {
    font-size: 52px;
    line-height: 1;
    font-weight: 600;
}

.sub_ranking .ranking_box .rank_block .rank_first .rank_progress {
    margin-top: 25px;
}

.sub_ranking .ranking_box .rank_block .rank_first .rank_progress .progress_in {
    height: 16px;
}

.sub_ranking .ranking_box .rank_block .rank_other .rank_growth {
    gap: 8px;
}

.sub_ranking .ranking_box .rank_block .rank_other .rank_growth .rank_capin {
    margin: 2px 0 0;
}

.sub_ranking .ranking_box .rank_block .rank_other .rank_growth .rank_percent {
    font-size: 28px;
    line-height: 1;
    font-weight: 600;
}

.sub_ranking .ranking_box .rank_block .rank_progress {
    background: #000;
    margin: 0 0 5px;
    padding: 5px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
    border-radius: 30px;
}

.sub_ranking .ranking_box .rank_block .rank_progress .progress_in {
    background: linear-gradient(to bottom right, #911cee, #7d1593);
    display: block;
    height: 8px;
    width: min(100%, calc(var(--progress) * 1%));
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    border-radius: 20px;
}


@media (max-width: 767px) {

    .sub_ranking .ranking_box.rank_rising .rank_block .rank_cont {
        display: flex;
        flex: auto;
        gap: 5px;
    }

    .sub_ranking .ranking_box.rank_rising .rank_block .rank_capin {
        margin: 0;
    }

    .sub_ranking .ranking_box .rank_block .rank_percent {
        font-size: 14px;
    }

    .sub_ranking .ranking_box.rank_rising .rank_block .rank_first .rank_cont {
        display: block;
        padding: 0;
    }

    .sub_ranking .ranking_box .rank_block .rank_other .rank_cont {
        display: block;
    }

    .sub_ranking .ranking_box .rank_block .rank_first .rank_growth {
        gap: 10px;
    }

    .sub_ranking .ranking_box .rank_block .rank_first .rank_growth .rank_capin {
        margin: 0;
    }

    .sub_ranking .ranking_box .rank_block .rank_first .rank_growth .rank_percent {
        font-size: 23px;
    }

    .sub_ranking .ranking_box .rank_block .rank_first .rank_progress {
        margin-top: 0;
    }

    .sub_ranking .ranking_box .rank_block .rank_first .rank_progress .progress_in {
        height: 7px;
    }

    .sub_ranking .ranking_box .rank_block .rank_other .rank_growth {
        gap: 6px;
    }

    .sub_ranking .ranking_box .rank_block .rank_other .rank_growth .rank_capin {
        margin: 0;
    }

    .sub_ranking .ranking_box .rank_block .rank_other .rank_growth .rank_percent {
        font-size: 17px;
    }

    .sub_ranking .ranking_box .rank_block .rank_progress {
        margin: 0 0 10px;
        padding: 2px;
    }

    .sub_ranking .ranking_box .rank_block .rank_progress .progress_in {
        height: 5px;
    }

    .sub_ranking .ranking_box .rank_block .rank_growth {
        padding: 0 60px 0 0;
    }
}




/* XXXXXXXXXXXXX
----------------------------------------------- */


@media (max-width: 1024px) {}

@media (max-width: 767px) {}