@charset "UTF-8";

/* CSS Document */


/*-- 共通部分 --*/

html {
    scroll-behavior: smooth;
}

@media screen and (max-width: 959px) {
    html {
    scroll-padding-top: 50px;
    }
}

body {
    font-family: century-gothic, 'Teko', sans-serif, YuGothic, Meiryo, メイリオ, sans-serif;
    line-height: 1.4;
    color: rgba(51, 51, 51, 1);
    opacity: 1;
    font-size: 1.2rem;
    overflow-x: hidden;
    background-image: url(../images/background.png);
    background-size: cover;
}

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

ul {
    list-style: none;
}

li {
    list-style: none;
}

p {
    letter-spacing: 0.05em;
    font-size: 1.2rem;
}

@media screen and (max-width: 959px) {
    p {
        font-size: 1.0rem;
    }

    .url {
        font-size: 0.8rem;
        letter-spacing: -0.001em;
    }
}

.center {
    text-align: center;
}

.left {
    text-align: left;
}


a {
    text-decoration: none;
}


/*-- For Links --*/

a,
a:active,
a:visited,
a:focus,
a:hover {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    background: linear-gradient(to right, rgba(205, 166, 231, 1) 0%, rgba(253, 244, 209, 1) 100%);
    text-shadow: 1.5px 1.5px 0 #000;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

a {
    color: #3e3e3e;
    text-decoration: none;
    outline: none;
}

a:hover {
    text-decoration: none;
}


/* show only  SP/PC*/

.sp-only {
    display: none;
}

.pc-only {
    display: block;
}

@media screen and (max-width: 959px) {
    .sp-only {
        display: block;
    }

    .pc-only {
        display: none;
    }
}


/*
 heder
*/

.header {
    box-shadow: 0px 8px 16px -2px rgba(10, 10, 10, 0.1), 0px 1px 7px 2px rgba(39, 38, 38, 0.02);
    z-index: 1;
    background-color: #d6000f;
}

.header__inner {
    max-width: 1200px;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    height: 70px;
    align-items: center;
    padding: 0 2%;
}

.header__logo img {
    width: 90px;
}

.sp-header__logo {
    transform: translateZ(5px);
}

.header__link {
    width: 100%;
    display: flex;
    display: -webkit-flex;
    display: -ms-flex;
    justify-content: center;
    -webkit-justify-content: center;
    -ms-justify-content: center;
    margin-right: 100px;
}

.header__link-list {
    text-align: center;
    font-weight: bold;
    font-size: 2rem;
    font-family: 'Teko', sans-serif;
    padding-left: 3rem;
}

@media screen and (max-width: 959px) {
    .header__link-list {
        padding-left: 2rem;
    }
}

.header__link-list a {
    color: #fff;
}

.header__link-list a:hover:after {
    width: 100%;
    border-bottom: 1px solid #fff;
}

.header__link-list a:after {
    content: '';
    width: 0;
    transition: all 0.2s ease;
    border-bottom: 1px solid #fff;
    display: block
}

h1#top a:after,
.sp-header__logo a:after {
    border: none;
}

@media screen and (max-width: 959px) {
    .wrapper {
        width: 100%;
        max-width: 1024px;
        padding: 0 4%;
        margin: 0 auto;
    }

    .sp-header {
        z-index: 1000;
        display: block;
        width: 100%;
        max-width: 1024px;
        height: 50px;
        padding: 0 1rem;
        margin: 0 auto;
        background: #d6000f;
        position: fixed;
    }

    .sp-header__toparea {
        z-index: 9999;
        width: 100%;
        max-width: 1024px;
        padding: 1rem 2% 0;
    }

    .sp-header__toparea .top-inner {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        justify-content: space-between;
        align-items: center;
        z-index: 13;
        position: fixed;
    }

    .sp-header__toparea img {
        width: 65px;
        vertical-align: -webkit-baseline-middle;
    }

    .main__img {
        padding-top: 50px;
    }

    .main__img img {
        margin: 0 auto;
        display: block;
        width: 100%;
    }
}

.main__txt {
    padding: 1rem;
    background: #ffffff;
}

@keyframes txt-color {
    0% {
        color: #47c4ea;
    }

    12.5% {
        color: #34aa49;
    }

    25% {
        color: #f8ba16;
    }

    37.5% {
        color: #ee4455;
    }

    50% {
        color: #47c4ea;
    }

    62.5% {
        color: #34aa49;
    }

    75% {
        color: #f8ba16;
    }

    87.5% {
        color: #ee4455;
    }

    100% {
        color: #47c4ea;
    }
}

.main__txt p {
    animation: txt-color 12s infinite;
    -webkit-animation: txt-color 12s infinite;

}

@keyframes shine {
    0% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}


h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
    text-align: center;
    background: #000000;
    background-image: linear-gradient(70deg,
            rgb(211, 209, 209, 0.3) 45%,
            #fff 50%,
            rgb(211, 209, 209, 0.3) 55%);
    background-size: 500% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    animation: shine 3s infinite;
    font-weight: 500;
}

.main__txt p {
    font-size: 2rem;
    text-align: center;
    font-weight: 500;
    letter-spacing: -0.05em;
    border-top: 3px solid;
    border-bottom: 3px solid;
    border-image: linear-gradient(to right, #47c4ea, #34aa49, #f8ba16, #ee4455) 1;
    padding: 0.5rem 0;
    width: 240px;
    margin: 0 auto;
    background: #000000;
    background-image: linear-gradient(70deg,
            rgb(211, 209, 209, 0.3) 45%,
            #fff 50%,
            rgb(211, 209, 209, 0.3) 55%);
    background-size: 500% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    animation: shine 3s infinite;
}

.main__txt img {
    max-width: 800px;
    margin: 1rem calc(50% - 400px);
}

h1,
.main__txt p {
    line-height: 1.2;
}

.reflection {
    position: relative;
    overflow: hidden;
}

.reflection:after {
    content: "";
    height: 100%;
    width: 30px;
    position: absolute;
    top: -180x;
    left: 0;
    background-color: #fff;
    opacity: 0;
    -webkit-transform: rotate(45deg);
    -webkit-animation: reflection 2s ease-in-out infinite;
}

@keyframes reflection {
    0% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: 0;
    }

    80% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: 0.5;
    }

    81% {
        -webkit-transform: scale(4) rotate(45deg);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(50) rotate(45deg);
        opacity: 0;
    }
}

@media screen and (max-width: 959px) {
    h1 {
        font-size: 2rem;
    }

    .main__txt p {
        font-size: 1.8rem;
    }

    .main__txt img {
        max-width: 479px;
        margin: 1rem calc(50% - 479px / 2);
    }
}

@media screen and (max-width: 959px) {
    .wrapper {
        width: 100%;
        max-width: 1024px;
        padding: 0 4%;
        margin: 0 auto;
    }

    .sp-header__toparea {
        z-index: 9999;
        width: 100%;
        max-width: 1024px;
        padding: 7.5px 2% 0;
    }

    .sp-header__toparea .top-inner {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        justify-content: space-between;
        align-items: center;
        z-index: 13;
        position: fixed;
    }

    .main__img {
        padding-top: 50px;
    }


    /*ハンバーガーメニュー*/

    .accordion-container .normal-title {
        position: relative;
        margin: 0;
        padding: 0.5em 1em;
        background-color: #d6000f;
        font-size: 1rem;
        font-weight: normal;
        color: #fff;
        cursor: pointer;
        border-bottom: solid 1px #efefef;
    }

    .accordion-container .normal-title:first-child {
        border-top: solid 1px #efefef;
    }


    .accordion-container .normal-title a {
        display: block;
        color: #333;
        text-shadow: 1px 1px #fff;
    }

    .accordion-container .normal-title a span {
        color: #fff;
        -webkit-text-fill-color: #fff;
        text-shadow: none;
    }

    .accordion-content a {
        color: #333;
        display: block;
    }

    .accordion-container .normal-title:hover {
        color: #333;
    }

    .accordion-container .normal-title a:hover {
        color: #d6000f;
    }

    .accordion-content {
        background-color: #d9e0eb;
    }

    .accordion-content p {
        font-size: 15px;
        padding: 1rem 0;
        border-bottom: solid 1px #efefef;
        margin: 0 2rem;
    }

    .accordion-container a:after {
        width: 0;
    }

    /*ナビのスタイル*/
    .sp-header__menu {
        position: fixed;
        z-index: 12;
        top: 0;
        right: 0;
        background: #d6000f;
        text-align: left;
        width: 90%;
        max-width: 320px;
        display: none;
        margin-top: 50px;
        transform: translateZ(2px);
    }

    .sp-header__menu .accordion-container {
        width: 100%;
    }

    .sp-header__menu .wrapper {
        height: 100%;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0;
    }

    .sp-header__menu .normal-title a span {
        font-size: 90%;
        vertical-align: middle;
        position: absolute;
        left: 60%;
        margin-top: 4px;
    }


    /*ボタンのスタイル*/
    .Toggle {
        position: fixed;
        right: 0px;
        top: 0px;
        width: 45px;
        height: 45px;
        cursor: pointer;
        z-index: 13;
        display: block;
        transform: translateZ(3px);
    }

    .Toggle div {
        display: block;
        position: absolute;
        width: 30px;
        border-bottom: solid 2px #fff;
        -webkit-transition: .35s ease-in-out;
        -moz-transition: .35s ease-in-out;
        transition: .35s ease-in-out;
        left: 0%;
    }

    .Toggle .toggle-span {
        top: 30%;
    }

    .Toggle .toggle-span02 {
        top: 50%;
    }

    .Toggle .toggle-span03 {
        top: 70%;
    }

    .Toggle.active .toggle-span {
        top: 55%;
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        transform: rotate(-45deg);
        border-bottom: solid 2px #fff;
    }

    .Toggle.active .toggle-span02,
    .Toggle.active .toggle-span03 {
        top: 55%;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        transform: rotate(45deg);
        border-bottom: solid 2px #fff;
    }

    .main__txt {
        max-width: 800px;
        width: 100%;
        margin: 0 auto;
        padding: 70px 1rem 10px;
    }

    .main__txt img {
        width: 100%;
        margin: 1rem 0;
    }

    h1 {
        font-size: 1.5rem;
    }

    .main__txt p {
        font-size: 1rem;
        width: 140px;
        border-top: 1.5px solid;
        border-bottom: 1.5px solid;
    }

    /* 背景固定 */
    html.is-fixed,
    html.is-fixed body {
        height: 100%;
        /* overflow: hidden; */
    }
}

section.top-background {
    position: relative;
}

section.top-background::after {
    /*
  bottom: -20px;
  border-width: 0 0 20px 100vw ;
  border-color: transparent  transparent  transparent rgba(253,244,209,1);
*/
}

section.top-background::before {
    bottom: inherit;
    top: -20px;
    transform: rotate(180deg);
    border-color: violet;
    border-width: 0 0 20px 100vw;
    border-color: transparent transparent transparent rgba(205, 166, 231, 1);
}


/*
 トップページ共通
*/

.top-content {
    padding: 4rem 4%;
    max-width: 960px;
    width: 100%;
    margin: 4rem auto;
    background: rgba(255, 255, 255, 0.9);
}

.section__title {
    text-align: center;
    margin-bottom: 4rem;
}

.section__title h2 {
    font-size: 2.6rem;
    color: #000;
    letter-spacing: -0.001em;
    font-weight: 100;
}

.section__title .subtitle {
    font-size: 1.8rem;
    color: #000;
    border-top: 5px solid;
    border-image: linear-gradient(90deg, rgba(0, 40, 245, 1) 40%, rgba(117, 58, 154, 1) 45%, rgba(252, 78, 50, 1) 60%, rgba(255, 133, 25, 1) 75%, rgba(255, 192, 1, 1) 100%) 1;
    padding-top: 1.2rem;
    box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.1) inset;
}

.section__title h2,
.section__title .subtitle {
    color: #262626;
    text-shadow: 1px 1px #333;
    background: #000000;
    background-image: linear-gradient(90deg, rgba(0, 40, 245, 1) 40%, rgba(117, 58, 154, 1) 45%, rgba(252, 78, 50, 1) 60%, rgba(255, 133, 25, 1) 75%, rgba(255, 192, 1, 1) 100%);
    background-size: 100% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    /*    animation: shine 3s infinite;*/
}

.top-content.news p {
    max-width: 600px;
    display: inline-block;
    margin: 0 calc(52% - 300px) 20px calc(52% - 300px);
    letter-spacing: -0.01em;
}

@media screen and (max-width: 719px) {
    .top-content.news p {
        width: 100%;
        margin: 0 0 20px 0;
    }
}


@media screen and (max-width: 959px) {
    .top-content {
        margin: 0rem 2rem;
        width: calc(100% - 4rem);
    }

    .section__title h2 {
        font-size: 2.4rem;
    }

    .section__title .subtitle {
        font-size: 1.2rem;
    }

    .section__title {
        margin-bottom: 2rem;
    }
}


@media screen and (max-width: 479px) {
    .top-content {
        padding: 1rem 4% 3rem 4%;
        margin: 2rem 1rem;
        width: calc(100% - 2rem);
    }

    .section__title {
        margin-bottom: 2rem;
    }


    .section__title h2 {
        font-size: 2.0rem;
        margin-top: 1rem;
    }

    .section__title .subtitle {
        font-size: 1.2rem;
        padding-top: 0.6rem;
    }
}

.background-rainbow {
    background: linear-gradient(to bottom, rgba(207, 74, 44, 1), rgba(0, 106, 179, 1), rgba(249, 178, 34, 1));
    background-size: cover;
    background-position: center;
    position: relative;
    padding: 10px 0;
}



/*ボタン*/

.btn__link {
    display: block;
    width: 560px;
    height: 72px;
    max-width: 100%;
    padding: 1.2rem 0.6rem;
    background: #fff;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
    color: #fff;
    font-size: 1.6rem;
    text-align: center;
    text-decoeation: none;
    transition: .25s;
}

.btn__link:focus,
.btn__link:hover {
    background: rgba(205, 166, 231, 0.7);
    border-color: rgba(205, 166, 231, 0.7);
}

/*
.btn .btn__link {
    position: relative;
}

.btn .btn__link:before {
    content: "";
    position: absolute;
    top: 52%;
    left: 88%;
    width: 12px;
    height: 1px;
    background: #fff;
}

.btn .btn__link:after {
    content: "";
    position: absolute;
    top: 47%;
    left: 90%;
    width: 7px;
    height: 7px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
*/

.btn .btn__link:focus:before,
.btn .btn__link:hover:before {
    background: #d6000f;
}

.btn .btn__link:focus:after,
.btn .btn__link:hover:after {
    border-top: 1px solid #d6000f;
    border-right: 1px solid #d6000f;
}

.btn .btn__link {
    margin: 1rem;
}

@media screen and (max-width: 479px) {
    .btn {
        margin-top: 2rem;
        background-image: radial-gradient(farthest-corner at 50vw 200vw, rgba(252, 241, 215, 1) 0%, rgba(253, 242, 207, 1) 90%, rgba(164, 138, 101, 1) 100%);
        box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
    }

    .btn:first-child {
        margin-top: 0;
    }

    .btn__link {
        width: 220px;
        font-size: 1.5rem;
        padding: 1.5rem 1rem;
        transform: translateZ(1px);
        background: inherit;
        box-shadow: inherit;
    }

    .top-content__box {
        margin-top: 3rem;
    }

    .btn .btn__link:after {
        top: 46%;
    }
}


/*--　table　--*/

.table {
    width: 100%;
    margin-top: 2rem;
}

.table table {
    width: 100%;
    border-collapse: collapse;
    border: solid #CCC;
    border-width: 1px;
}

.table table tr th,
.table table tr td {
    padding: 1em;
    text-align: left;
    vertical-align: top;
    border: solid #ddd;
    border-width: 1px;
}

.table table tr th,
.table table tr td {
    text-align: center;
    vertical-align: middle;
}

.table th {
    font-weight: normal;
}

.table table tr td ul {
    margin-bottom: 1rem;
}

@media screen and (max-width: 959px) {
    .table {
        margin-top: 3rem;
    }
}

@media screen and (max-width:959px) {
    .table {
        width: 100%;
        margin: 2em 0;
    }

    .table table {
        width: 100%;
        border-width: 0 0 1px 0;
    }

    .table table tr th,
    .table table tr td {
        width: 100%;
        padding: 3% 5%;
        font-size: 1.4rem;
        text-align: left;
    }

    .table table tr td p {
        font-size: 1.4rem;
    }

    .table table tr td {
        border-width: 0px 1px 0px 1px;
    }
}


/*
 ABOUT
*/

#about {
    transform: translateZ(-1px);
    background: linear-gradient(180deg, rgba(0, 40, 245, 1) 0%, rgba(117, 58, 154, 0.8) 25%, rgba(252, 78, 50, 0.5) 50%, rgba(255, 133, 25, 0.8) 75%, rgba(255, 192, 1, 1) 100%), url("../images/bg-about.jpg");
    background-size: cover;
}

.top-content__lead {
    color: #444444;
    font-feature-settings: "palt"
}

/*table*/

.table-about th,
.table-about td {
    color: #262626;
}


@media screen and (max-width: 959px) {
    .table-about {
        margin: 1em 0
    }
}

.table-about table tr td:nth-last-child(2),
.table-about table tr td:last-child {
    font-size: 90%
}

@media screen and (max-width: 959px) {
    .table-about table tr:last-child td:last-child {
        line-height: 2;
    }
}

@media screen and (max-width: 559px) {
    .table-about table tr:last-child td:last-child {
        text-align: left;
        font-size: 80%;
        letter-spacing: -0.05em;
        padding: 10px 0
    }
}

.table-about table {
    border: none;
}

.table-about table tr th,
.table-about table tr td {
    border: none;
    border-bottom: solid 1px #999;
}

.table-about table tr th {
    width: 20%;
    font-size: 90%;
    padding: 1rem 0 0.5rem 0
}

.table-about table tr td {
    width: 80%;
    text-align: left;
    font-weight: 700;
    padding: 1rem 1% 0.5rem 1%
}

.table-about table tr th,
.table-about table tr td {
    border: 2px solid #30344b;
    color: #000222;
}

.table-about td a {
    color: #fff;
    position: relative;
    /* border-bottom:solid 1px #fff; */
}

/* .table-about td a:after {
    content: '';
    width: 100%;
    transition: all 0.2s ease;
    border-bottom: 1px solid #fff;
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
} */

.table-about td a:hover:after {
    width: 0;
}

.table-about td ul li {
    border-bottom: 1px dotted #ccc;
    padding: 0.5rem 1rem;
    line-height: 2;
}

.table-about td ul li:first-child {
    border-top: 1px dotted #ccc;
}

.table-about td.game-title span.pc-only{
    display: inline;
}

@media screen and (max-width: 959px) {
    .table-about td ul li {
        padding: 0.5rem 0
    }
    .table-about td.game-title span.pc-only{
    display: none;
    }
}


/* .table-about td a:hover{
	color: #d6000f;
	border-bottom:solid 1px #d6000f;
} */

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

    .top-content-about .top-content__textbox {
        width: 100%;
    }

}


@media screen and (max-width:959px) {
    .top-content-about .top-content__textbox {
        width: 92%;
        display: inline;
    }

    .background-about {
        background-position: top;
        height: auto;
    }

    .top-content__lead {
        font-size: 1.0rem;
    }

    .table-about table,
    .table-about table tbody,
    .table-about table tr,
    .table-about table tr th,
    .table-about table tr td {
        display: block;
    }

    .table-about table tr {
        margin-bottom: 1.4rem;
    }

    .table-about table tr th,
    .table-about table tr td {
        text-align: center;
    }

    /* .table-about table tr:first-child th{
        border-top: 1.5px solid #ccc;
    } */

    .table-about table tr:first-child td {
        border-top: 0px;
    }

    .table-about table tr td {
        padding: 0.5rem 2% 0;
        border-bottom: none;
        width: 100%;
        border: inherit;
        background: inherit;
    }

    .table-about table tr th {
        padding: calc(0.5rem + 4px) 2% 0.5rem 2%;
        border: 5px solid;
        border-image: linear-gradient(90deg, rgba(0, 40, 245, 1) 40%, rgba(117, 58, 154, 1) 45%, rgba(252, 78, 50, 1) 60%, rgba(255, 133, 25, 1) 75%, rgba(255, 192, 1, 1) 100%) 1;
        border-image-slice: 1;
        font-weight: 900;
        background: rgba(205, 166, 231, 0.1);
        width: 100%;
        display: block;
    }

    .table-about table {
        margin-top: 2rem;
        margin-bottom: 0;
    }
}

/*
 title
*/

div#title {
    transform: translateZ(-1px);
}

.background-title {
    transform: translateZ(-1px);
    background: url("../images/bg-title.jpg");
    background-position: right;
    background-size: cover;
    position: relative;
    padding: 30px 0;
}

.table-title {
    white-space: nowrap;
}

.table-title.sp-narrow-only {
    display: none
}

@media screen and (max-width: 767px) {
    .table-title.pc-tablet-only {
        display: none
    }

    .table-title.sp-narrow-only {
        display: block
    }
}

.table-title table {
    max-width: 960px;
    width: 100%;
}

.table-title th {
    /*     background:radial-gradient(circle, rgba(51, 51, 51, 1) 2%, rgba(51, 51, 51, 0) 200%), repeating-conic-gradient(from 5deg, rgba(51, 51, 51, 1) 50deg, rgba(48, 52, 75, 1) 50deg 52deg, rgba(51, 51, 51, 1) 52deg 58deg, rgba(48, 52, 75, 1) 58deg 61deg, rgba(51, 51, 51, 1) 61deg 68deg, rgba(48, 52, 75, 1) 68deg 72deg, rgba(51, 51, 51, 1) 72deg 83deg, rgba(48, 52, 75, 1) 83deg);*/
    background-image:
        linear-gradient(162deg, rgba(0, 40, 245, 1) 0%, rgba(117, 58, 154, 0.8) 40%, rgba(252, 78, 50, 0.8) 60%, rgba(255, 133, 25, 0.8) 80%, rgba(255, 192, 1, 1) 100%);
    color: #fff;
    text-shadow: 1px 1px #333
}

.table-title td {
    /*background-image: radial-gradient( farthest-corner at 50vw 200vw, rgba(252,241,215,1) 0%, rgba(253,242,207,1) 90%, rgba(164,138,101,1) 100% );*/
}

.table-title th,
.table-title td {
    max-width: 240px;
}

.table-title td.none {
    background: none !important;
}

.table-title table img {
    width: 150px
}

/*
.table-title td:first-child, .table-title td:nth-child(2){
    font-size:120%;
}
*/

.table-title table tr td {
    padding: 1.2rem 1rem;
    color: rgba(51, 51, 51, 1);
    text-shadow: 2px 2px 3px #ccc;
}

.table-title table tr th,
.table-title table tr td{
    border: 2px solid #333;
}

.table-title table img {
    width: 100%;
    margin-left: 0
}

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

    .table-title table tr th,
    .table-title table tr td {
        width: 25%
    }
    
    .table-title.player table tr th,
    .table-title.player table tr td {
        text-align: center
    }

    .table-title table tr th {
        text-align: center;
        font-size: 16px;
        padding: 10px 10px 5px
    }

    .table-title table tr td {
        font-size: 14px;
        border-width: 1px;
        padding: 5px 10px
    }
}

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

    .table-title table tr th:first-child,
    .table-title table tr td:first-child {
        max-width: 110px;
        text-wrap: auto
    }

    .table-title table img {
        width: 90%;
        margin-left: 5%
    }

    .table-title table tr td {
        height: 40px
    }
}

@media screen and (max-width: 559px) {
/*
    .table-title table tr:nth-child(3n+1) {
        border-top: 2px solid #333;
        border-right: 2px solid #333;
        border-left: 2px solid #333;
    }

    .table-title table tr:nth-child(3n+2) {
        border-right: 2px solid #333;
        border-left: 2px solid #333;
    }

    .table-title table tr:nth-child(3n) {
        border-bottom: 2px solid #333;
        border-right: 2px solid #333;
        border-left: 2px solid #333;
    }
*/

    .table-title table img {
        width: 100%;
        margin-left: 0
    }
}

#title .table-title table tr td:last-child {
    /*    background-image: radial-gradient(farthest-corner at 258px 56px, rgba(205, 166, 231, 0.8) 0%, rgba(253, 244, 209, 0.8) 50%, rgba(49, 52, 77, 0.4) 75%, rgba(227, 191, 103, 0.1) 100%);*/
    position: relative;
}

#title .table-title table tr td:last-child a {
    position: absolute;
    left: 0;
    width: 100%;
    top: calc(50% - 20px);
}

@media screen and (max-width: 959px) {
    #title .table-title table tr td:last-child a {
        left: 10px
    }
}

@media screen and (max-width: 767px) {
    #title .table-title table tr td:last-child a {
        top: calc(50% - 10px);
    }
}

#title .table-title table tr td:last-child a:hover {
    position: absolute;
    bottom: 0;
    left: 0;
    transform: skewX(-8deg);
    transition: .3s;
}

@media screen and (max-width: 959px) {
    #title .table-title table tr td:last-child a:hover {
        left: 20px;
    }
}

#title .table-title table tr td:last-child:hover {
    filter: grayscale(1);
}

/*
.table-title table tr:nth-child(2n+1) td {
            background-image: radial-gradient(circle, rgba(0, 0, 0, 1) 9%, rgba(0, 0, 0, 0) 13%), repeating-conic-gradient(from 5deg, rgba(0, 0, 0, 1) 50deg, rgba(48, 52, 75, 1) 50deg 52deg, rgba(0, 0, 0, 1) 52deg 58deg, rgba(48, 52, 75, 1) 58deg 61deg, rgba(0, 0, 0, 1) 61deg 68deg, rgba(48, 52, 75, 1) 68deg 72deg, rgba(0, 0, 0, 1) 72deg 83deg, rgba(48, 52, 75, 1) 83deg);
    }
*/

.table-title td:first-child a img {
    transition: .3s;
}

.table-title td:first-child a:hover img {
    transform: scale(1.1);
    transition: .3s;
}

.table-title a {
    color: #000;
    cursor: pointer;
    position: relative;
    display: inline-block;
}

.table-title td:last-child a:after {
    content: '';
    width: 100%;
    transition: all 0.2s ease;
    border-bottom: 1px solid #000;
    display: block;
}

#title .table-title a:after {
    width: 80%;
}

/*
    .table-title tr{
    border-left: 2px solid #000 !important;
    border-right: 2px solid #000;
    border-bottom: 2px solid #000;
    }
*/
}

.table-title a:hover::after,
#title .table-title a:hover::after {
    width: 0;
    transition: .3s;
}

/*

@media screen and (max-width: 959px) {
    .table-title {
        overflow-x: scroll;
    }
}
*/

/*
 live streaming
*/

.background-live {
    transform: translateZ(-1px);
    background: linear-gradient(162deg, rgba(0, 40, 245, 0.8) 40%, rgba(117, 58, 154, 0.4) 45%, rgba(252, 78, 50, 0.2) 60%, rgba(255, 133, 25, 10.4) 75%, rgba(255, 192, 1, 0.8) 100%), url(../images/bg-live.jpg);
    background-size: cover;
    position: relative;
    height: 500px;
}

.background-live:before {
    /* 透過した黒を上から重ねるイメージ */
    background-color: rgba(0, 0, 0, 0.4);
    /* 自由に位置指定 */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: ' ';
}

/*
section.top-background.background-live::after{
  border-color: transparent  transparent  transparent rgba(148,142,126,1);
}
*/

.top-content-live .top-content__textbox {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    max-width: 960px;
    width: 100%;
    background: rgba(255, 255, 255, 0.9);
    padding: 40px 20px;
}

@media screen and (max-width: 959px) {
    .top-content-live .top-content__textbox {
        width: 92%;
    }
}

@media screen and (max-width:479px) {
    .background-live {
        height: 380px;
        background-position: center;
        padding: 4rem 4%;
    }

    .top-content-live {
        text-align: center;
        display: inline;
    }

    .top-content-live .top-content__textbox {
        width: 92%;
    }
}

.top-content-live p {
    width: 100%;
}

.top-content-live p a {
    position: relative;
    margin: 0 auto;
    cursor: pointer;
    color: #fff;
}

.top-content-live p a:after {
    content: '';
    width: 100%;
    transition: all 0.2s ease;
    border-bottom: 1px solid #fff;
    display: block;
    position: absolute;
    left: 0;
    cursor: pointer;
}

.top-content-live p a:hover:after {
    width: 0;
}

.top-content-live .alphabet {
    padding-left: 0;
}


/*
 footer-link
*/

.background-footer-link {
    /*    background-image: repeating-radial-gradient(circle, rgba(205,166,231,1) 0%, rgba(253,244,209,1) 60%, rgba(49,52,77,1) 100%);*/
    transform: translateZ(-1px);
}

.top-background.background-footer-link.past {
    background-image: repeating-radial-gradient(circle, rgba(226, 226, 226, 1), rgba(255, 255, 255, 1) 12%, rgba(226, 226, 226, 1) 24%);
}

@media screen and (max-width:479px) {
    .top-background.background-footer-link.past {
        background-image: repeating-radial-gradient(circle, rgba(226, 226, 226, 1), rgba(255, 255, 255, 1) 24%, rgba(226, 226, 226, 1) 48%);
    }
}

.footer-link {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: center;
    padding: 0;
    max-width: inherit;
    background: inherit;
}

.footer-link__list {
    position: relative;
    color: #fff;
    width: 100%;
    text-align: center;
    margin: 0 1rem;
}

@media screen and (max-width: 479px) {
    .footer-link__list {
        width: auto;
    }
}

.footer-link__list a {
    font-size: 1.6rem;
    color: #000;
    /* text-shadow: 1px 2px 3px #808080; */
    line-height: 1.4;
    position: relative;
}

.footer-link__list a img {
    margin-bottom: 1rem;
    transition: .3s;
}

.footer-link__list a:hover img {
    filter: grayscale(0.5);
    transform: skewX(-3deg);
    transition: .3s;
}

.footer-link__list.single a {
    color: #000;
}

.footer-link__list a:after {
    content: '';
    width: 100%;
    transition: all 0.2s ease;
    border-bottom: 1px solid #000;
    display: block;
}

.footer-link__list a:hover:after {
    width: 0;
}

.footer-link__list.single a:after {
    border-bottom: 1px solid #000;
}

@media screen and (min-width:479px) {
    .footer-link__list.single::after {
        left: 1.5%;
    }
}

@media screen and (max-width:478.98px) {
    .footer-link__list.single:not(:first-of-type) {
        margin-top: 2em;
    }

    .footer-link__list.single {
        border: 1px solid rgba(51, 51, 51, 0.4);
        background: rgba(255, 255, 255, 0.5);
        padding: 1em;
    }

    .footer-link__list.single a:after {
        border-bottom: none;
    }
}

.footer-link__list img {
    width: 245px;
}

.live-link {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.live-link a.btn__link {
    background-image: linear-gradient(162deg, rgba(0, 40, 245, 1) 0%, rgba(117, 58, 154, 0.8) 40%, rgba(252, 78, 50, 0.8) 60%, rgba(255, 133, 25, 0.8) 80%, rgba(255, 192, 1, 1) 100%);
    padding: 20px 40px;
    -webkit-text-fill-color: inherit;
    text-shadow: 1px 1px #333
}

.live-link a.btn__link:hover {
    /*
    background-image: radial-gradient(farthest-corner at 129px 29px, rgba(205, 166, 231, 0.8) 0%, rgba(253, 244, 209, 0.8) 50%, rgba(49, 52, 77, 0.4) 75%, rgba(227, 191, 103, 0.1) 100%);
    transition: .3s;
*/
    filter: grayscale(1);
    transform: skewX(-3deg);
    transition: .3s;
}

@media screen and (max-width: 959px) {
    .live-link {
        flex-wrap: wrap;
        justify-content: center;
    }

    .btn .btn__link {
        width: 100%;
        font-size: 1.2rem;
        margin: 0;
        height: auto;
    }

    .footer-link__list:last-child {
        margin-top: 0;
    }
}

@media screen and (max-width:479px) {
    .live-link {
        display: inline-block;
    }

    .footer-link {
        display: block;
        padding: 0 2%;
        text-align: center;
    }

    .footer-link__list:last-child {
        margin-top: 20px;
    }

    .footer-link__list.single:last-child {
        margin-top: 2em;
    }

    .footer-link__list::before {
        left: 19%;
        width: 20px;
        height: 20px;
    }

    .footer-link__list::after {
        left: 21.0%;
    }

    .footer-link__list a {
        font-size: 1.5rem;
        display: inline-block;
        padding: 0 10px;
    }

    .footer-link__list.single a {
        width: 90%;
    }
}


/*
 footer
*/

.footer {
    background: #fff;
    width: 100%;
    margin: 0 auto;
    margin-bottom: -22px;
}

.footer__inner {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: space-between;
    padding: 4rem 4%;
    max-width: 960px;
    margin: 0 auto;
}

.footer__inner p {
    font-size: 1.5rem;
}

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

@media screen and (max-width: 479px) {
    .footer__inner {
        padding: 2.4rem 4%;
    }

    .footer__inner p {
        font-size: 1.4rem;
    }
}

.copyright {
    text-align: center;
    padding: 0 0 1rem 0;
    border-top: 3px solid #333;
    background: #d6000f;
    color: #fff;
    font-size: 1.4rem
}

.game-copyright {
    font-size: 0.8rem;
    text-align: left;
    display: block;
    padding: 20px 3%;
    color: #333;
    margin: 0 0 20px 0;
    background: #fff
}

.game-copyright{
    font-size: 14px;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", HelveticaNeue, "Segoe UI", "游ゴシック体", YuGothic, "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important
}

#page_top {
    width: 70px;
    height: 70px;
    position: fixed;
    right: 0;
    bottom: -70px;
    background: #000;
    z-index: 1;
}

#page_top a {
    position: relative;
    display: block;
    width: 70px;
    height: 70px;
    text-decoration: none;
}

#page_top a::before {
    content: '';
    font-size: 30px;
    color: #fff;
    position: absolute;
    width: 20px;
    height: 20px;
    top: 10%;
    bottom: 0;
    right: 0;
    margin: auto;
    text-align: center;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    left: 35%;
    -webkit-transform: translateX(-50%) rotate(45deg);
    -ms-transform: translateX(-50%) rotate(45deg);
    transform: translateX(-50%) rotate(45deg);
}

@media screen and (max-width: 479px) {
    #page_top {
        width: 45px;
        height: 45px;
    }

    #page_top a {
        width: 45px;
        height: 45px;
    }

    #page_top a::before {
        width: 10px;
        height: 10px;
        left: 30%;
        border-top: 2px solid #fff;
        border-left: 2px solid #fff;
    }
}


/*---------------------
 
		下層ページ

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


/*
 下層ページ共通
*/

.page {
    height: 100vh;
}

.page__member {
    height: auto;
}

.page__content {
    padding: 10rem 0;
    width: 100%;
    margin: 0 auto;
}

.page__heading {
    width: 100%;
    height: 300px;
    position: relative;
    background: #000;
}

.page__heading-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-size: cover;
    opacity: 0.4;
}

.page__heading--player {
    background: linear-gradient(180deg, rgba(205, 166, 231, 1) 0%, rgba(205, 166, 231, 0.2) 25%, rgba(253, 244, 209, 0.2) 75%, rgba(253, 244, 209, 1) 100%), url(../images/bg-about.jpg);
    background-position: bottom;
    background-size: cover;
}

.page__heading-inner {
    max-width: 100%;
    width: auto;
    color: #fff;
    font-weight: bold;
    position: absolute;
    margin: auto;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
}

.page__title {
    font-size: 8rem;
    font-family: 'Teko', sans-serif;
    font-weight: normal;
    letter-spacing: 0.04em;
    color: #fff;
}

.page__section {
    margin-bottom: 6rem;
}

.page__content p {
    font-size: 1.6rem;
    letter-spacing: 0.15em;
    line-height: 1.7;
    text-align: center;
}


/*coming soon*/

.page__content-title {
    text-align: center;
    font-weight: bold;
    font-size: 6.8rem;
    font-family: 'Teko', sans-serif;
    margin-bottom: 3rem;
    letter-spacing: 0.07em;
}

@media screen and (max-width: 959px) {
    .page__title {
        font-size: 3.6rem;
    }

    .page__heading-inner {
        top: calc(25px + 50%);
    }
}

@media screen and (max-width: 479px) {
    .page {
        padding-top: 50px;
    }

    .page__heading {
        margin-top: 0;
    }

    .page__heading-bg {
        background-position: center;
    }

    .page__title {
        font-size: 4rem;
        white-space: nowrap;
    }

    .page__heading-inner {
        top: 50%;
    }

    .page__content {
        padding: 3rem 0;
    }

    .page__content-title {
        font-size: 4rem;
        margin-bottom: 2.4rem;
    }

    .page__content p {
        font-size: 1.5rem;
        letter-spacing: 0.01em;
    }
}

#history .top-content {
    background-image: radial-gradient(farthest-corner at 258px 56px, rgba(205, 166, 231, 0.8) 0%, rgba(253, 244, 209, 0.8) 50%, rgba(49, 52, 77, 0.4) 75%, rgba(227, 191, 103, 0.1) 100%);
}


/*
 出場選手ページ
*/

.player {
    padding: 2rem 1rem;
    background: linear-gradient(180deg, rgba(0, 40, 245, 1) 0%, rgba(117, 58, 154, 0.8) 25%, rgba(252, 78, 50, 0.5) 50%, rgba(255, 133, 25, 0.8) 75%, rgba(255, 192, 1, 1) 100%), url(../images/bg-player.jpg);
    background-position: bottom;
    background-size: cover;
}

.player-gray {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.4) 25%, rgba(255, 255, 255, 0.4) 75%, rgba(255, 255, 255, 1) 100%), url(../images/bg-player.jpg);
}

.game__wrapper {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
}

.page__gamelink {
    padding: 1rem 2%;
    background-image: radial-gradient(farthest-corner at 258px 56px, rgba(205, 166, 231, 0.8) 0%, rgba(253, 244, 209, 0.8) 50%, rgba(49, 52, 77, 0.4) 75%, rgba(227, 191, 103, 0.1) 100%);
}

.page__gamelink ul {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0 3rem;
}

.page__gamelink ul:last-child {}

.page__gamelink ul li {
    padding: 0 3rem 0 2.5rem;
}

.page__gamelink ul li:not(:last-child) {
    -webkit-transform: skewX(150deg);
    -moz-transform: skewX(150deg);
    transform: skewX(150deg);
    border-right: 1px solid #000;
}

@media screen and (max-width: 479px) {
    .page__gamelink ul li {
        text-align: center;
    }

    .page__gamelink ul li:not(:last-child) {
        border-right: 0px;
        margin-bottom: 0;
    }
}

.page__gamelink ul li a {
    color: #fff;
    display: inline-block;
    position: relative;
}

.page__gamelink ul li:not(:last-child) a {
    transform: skewX(-150deg);
    border-bottom: solid 1px #fff;
}

.page__gamelink ul li a:after {
    content: '';
    width: 100%;
    transition: all 0.2s ease;
    border-bottom: 1px solid #000;
    display: block;
    position: absolute;
    left: 0;
}

.page__gamelink ul li a:hover:after {
    width: 0;
}


/*.page__gamelink ul li a:hover{
    
	color:#d6000f;
	border-bottom:solid 1px currentcolor;
    
} */

.game__title {
    position: relative;
    padding: 1.7rem;
    background: #d6000f;
    font-size: 2.2rem;
    color: #fff;
    z-index: -1;
    margin: 0 auto 6rem auto;
    text-align: center;
    background-image: radial-gradient(farthest-corner at 0px 0px, rgba(213, 1, 15, 1), rgba(237, 68, 9, 1) 32%, rgba(213, 1, 15, 1) 54%);
}

.game__title:before {
    position: absolute;
    content: '';
    left: -2px;
    top: -2px;
    border: none;
    border-left: solid 40px white;
    border-bottom: solid 172px transparent;
    z-index: -2
}

.game__title.line-double:before,
.game__title.line-triple:before {
    border-bottom: solid 282px transparent;
}

.game__title:after {
    position: absolute;
    content: '';
    right: -2px;
    top: -14px;
    border: none;
    border-right: solid 40px white;
    border-top: solid 172px transparent;
    z-index: -2
}

.game__title.line-double:after,
.game__title.line-triple:after {
    border-top: solid 102px transparent;
}

.long-jp {
    letter-spacing: -0.1em
}

.game__title-gray {
    z-index: 1;
    width: 410px;
    text-align: center;
}

.game__title.line-triple {
    width: 480px;
}

.game__title-gray:before {
    border-left: solid 40px #f7f7f7;
    border-bottom: solid 172px transparent;
    z-index: -2
}

.game__title.line-double.game__title-gray:before {
    border-bottom: solid 172px transparent;
}

.game__title-gray:after {
    border-right: solid 40px #f7f7f7;
    border-top: solid 172px transparent;
    z-index: -2
}

.game__title.line-double:after,
.game__title.line-triple:after {
    border-top: solid 282px transparent;
}

.game__headline {
    padding: 1.5rem 1.5rem 1.5rem 4rem;
    background-image: radial-gradient(farthest-corner at -100px 50px, rgba(51, 51, 51, 1), rgba(10, 10, 10, 1) 12%, rgba(51, 51, 51, 1) 64%);
    color: #fff;
    font-size: 2rem;
    position: relative;
    margin: 0;
    transform: skew(-0.03turn, 0deg);
}

.game__headline.game__headline-ja {
    padding-left: 100px;
}

.game__headline:after {
    content: '';
    position: absolute;
    top: calc(50% - 2rem);
    left: 0;
    width: .8rem;
    height: 4rem;
    background: linear-gradient(180deg, rgba(0, 40, 245, 1) 0%, rgba(117, 58, 154, 0.8) 25%, rgba(252, 78, 50, 0.5) 50%, rgba(255, 133, 25, 0.8) 75%, rgba(255, 192, 1, 1) 100%);
    border: 0.5px solid #333
}

.game__headline:before {
    content: '';
    position: absolute;
    top: calc(50% - 19.5px);
    left: 2.5%;
    width: 60px;
    height: 39px;
    background-size: cover;
    background-repeat: no-repeat;
}

.game__headline-ja:before {
    background-image: url(../images/japan.jpg);
}

.game__headline-chi:before {
    background-image: url(../images/china.png);
}

.game__headline-ko:before {
    background-image: url(../images/korea.jpg);
}

.game__member {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    margin-top: 0;
    flex-wrap: wrap;
    justify-content: center;
}

.game__member-list {
    width: 315px;
    margin-right: 8.75px;
    margin-bottom: 2rem;
}

.game__member-list:nth-of-type(5n) {
    margin-right: 0;
}

.game__member .table-title table {
    border: none;
}

.game__member .table-title table tr td.none {
    background: none;
    border: none;
    background-image: none !important;
    padding: 0.6rem;
}

.game__member .table-title table tr td:nth-of-type(3n+1) {
    padding: 1.2rem 0 0 0;
}

.game__member .table-title table tr td:nth-of-type(3n+2) {
    padding: 1.2rem 1rem 0 1rem;
    line-height: 2;
    font-size: 100%;
}

.game__member .table-title table tr td img {
    max-height: calc(90vh - 50px);
}

.game__member .table-title table tr td dl dt.headline {
    background: radial-gradient(circle, rgba(51, 51, 51, 1) 2%, rgba(51, 51, 51, 0) 200%), repeating-conic-gradient(from 5deg, rgba(51, 51, 51, 1) 50deg, rgba(48, 52, 75, 1) 50deg 52deg, rgba(51, 51, 51, 1) 52deg 58deg, rgba(48, 52, 75, 1) 58deg 61deg, rgba(51, 51, 51, 1) 61deg 68deg, rgba(48, 52, 75, 1) 68deg 72deg, rgba(51, 51, 51, 1) 72deg 83deg, rgba(48, 52, 75, 1) 83deg);
    clip-path: polygon(10px 0px, calc(100% - 10px) 0px, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0px calc(100% - 10px), 0px 10px);
    color: #fff;
    font-size: 16px;
    padding: 4px 0 0 0;
    line-height: 1.6;
    width: 60%;
    min-width: 200px;
    margin: 0 auto;
}

.game__member .table-title table tr td dl dd {
    line-height: 1.5;
    color: rgba(51, 51, 51, 1);
    padding: 0.3rem 0 0.3rem 0;
    text-shadow: 2px 2px 3px #ccc;
    font-weight: 900;
}

#game03 .game__member .table-title table tr td dl dd:nth-of-type(3),
#game03 .game__member .table-title table tr td dl dd:nth-of-type(4) {
    font-size: 80%;
}

.game__member .table-title table tr td dl dd a:hover {
    transform: skewX(-8deg);
    transition: .3s;
}

@media screen and (max-width: 479px) {
    .game__member .table-title table tr td dl dt.headline {
        line-height: 2;
    }

    .game__member .table-title table tr td dl dd {
        padding: 0.25rem 0;
        line-height: 1.2;
    }
}

.game__member .table-title table tr td dl dd span.alphabet {
    line-height: 1;
    font-size: 150%;
}

.game__member .table-title table tr td:nth-child(3n+1) {
    background-image: radial-gradient(farthest-corner at 40px 40px, rgba(227, 191, 103, 1) 0%, rgba(49, 52, 77, 0.9) 50%, rgba(253, 244, 209, 0.9) 75%, rgba(205, 166, 231, 0.9) 100%);
    margin: 0 auto 1rem auto;
    vertical-align: bottom;
}

@media screen and (max-width: 959px) {
    .game__member .table-title table tr td:nth-child(3n+1) {
        width: calc((90vh - 50px) / 375* 263);
        margin: 0 auto 1rem auto;
    }

    .game__member .table-title table tr td:nth-child(3n+2) {
        width: 72%;
    }
}

@media screen and (max-width: 479px) {
    .game__member .table-title table tr td.none {
    height: 10px !important;
    }
    
    .game__member .table-title table tr td:nth-child(3n+1) {
        clip-path: polygon(10px 0px, calc(100% - 10px) 0px, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0px calc(100% - 10px), 0px 10px);
        width: calc((50vh - 50px) / 375* 263);
        height: calc(50vh - 50px);
        margin: 0 auto 5px auto;
        padding: 0;
    }

    .game__member .table-title table tr td:nth-child(3n+2) {
        clip-path: polygon(20px 0px, calc(100% - 0px) 0px, 100% 0px, 100% calc(100% - 60px), calc(100% - 20px) 100%, 0px 100%, 0px calc(100% - 0px), 0px 60px);
        padding: 1rem 1rem 0.5rem 1rem;
        width: 100% !important;
        height: 55px;
    }
    
    .game__member .table-title table tr td:nth-child(3n+2):has(dl dt.headline) {
        clip-path: polygon(20px 0px, calc(100% - 0px) 0px, 100% 0px, 100% calc(100% - 100px), calc(100% - 20px) 100%, 0px 100%, 0px calc(100% - 0px), 0px 100px);
        background-image: radial-gradient(farthest-corner at 9px 36px, rgba(205, 166, 231, 0.9) 0%, rgba(253, 244, 209, 0.9) 50%, rgba(49, 52, 77, 0.9) 75%, rgba(227, 191, 103, 1) 100%);
         height: 100px;
    }

    .game__member .table-title table tr td.none {
        margin: 0 auto 30px auto;
    }
}

.game__member .table-title table tr td:nth-child(3n+2) {
    background-image: radial-gradient(farthest-corner at 40px 40px, rgba(205, 166, 231, 0.9) 0%, rgba(253, 244, 209, 0.9) 50%, rgba(49, 52, 77, 0.9) 75%, rgba(227, 191, 103, 1) 100%);
    width: 27%;
    filter: grayscale(1);
}

.game__member .table-title table tr td:nth-child(3n+2):has(dl dt.headline){
    filter:none;
}

.game__member-img img {
    width: 315px;
    max-width: 100%;
    border: solid 1px #eee;
}

.game__member-list a:hover > .game__member-img img {
    opacity: 0.5;
}

.game__member-name {
    padding: 1rem 0.4rem;
    text-align: center;
    color: #000;
}

.game__member-list a:hover > .game__member-name {
    color: #d6000f;
}

.game__member-list p {
    font-size: 1.5rem;
    letter-spacing: 0.05em;
    line-height: 1.2;
    text-align: center;
}

.game__member-note {
    font-size: 1.1rem;
}


/*--card--*/

@media screen and (min-width:480px) and (max-width:959px) {
    .game__member-list {
        width: 140px;
        margin-right: 5.6px;
    }
    
    .game__member .table-title table tr td:nth-child(3n+2) {
        width: inherit
    }

    .game__member-img img {
        width: 140px;
    }
}

@media screen and (max-width: 479px) {
    .page__gamelink {
        padding: 2em 4% 2em 4%;
    }

    .page__gamelink ul {
        display: block;
    }

    .page__gamelink ul li {
        padding: 0.3rem 0;
        border-right: none;
    }

    .page__gamelink ul:last-child {
        margin-top: 0;
    }

    .game {
        padding: calc(50px + 2rem) 4%;
    }

    .game__title {
        position: relative;
        padding: 0.8rem;
        background: #d6000f;
        font-size: 1.6rem;
        color: #fff;
        z-index: 1;
        width: 260px;
        margin: 0 auto;
        text-align: center;
        background-image: repeating-radial-gradient(circle, rgba(213, 1, 15, 1), rgba(237, 68, 9, 1) 12%, rgba(213, 1, 15, 1) 24%);
    }

    .game__title:before {
        border-left: solid 30px #fff;
        border-bottom: solid 90px transparent;
        z-index: -2
    }

    .game__title:after {
        border-right: solid 30px #fff;
        border-top: solid 90px transparent;
        z-index: -2
    }

    .game__title.line-double,
    .game__title.line-triple {
        position: relative;
        padding: 0.8rem;
        background: #d6000f;
        font-size: 1.6rem;
        color: #fff;
        z-index: 1;
        width: 300px;
        margin: 0 auto;
        text-align: center;
        background-image: repeating-radial-gradient(circle, rgba(213, 1, 15, 1), rgba(237, 68, 9, 1) 12%, rgba(213, 1, 15, 1) 24%);
    }

    .game__title.line-triple {
        width: 300px;
    }

    .game__headline {
        padding: 0.9rem 0.9rem 0.9rem 1.5rem;
        color: #fff;
        font-size: 1.6rem;
        position: relative;
        z-index: 1;
    }

    .game__headline.game__headline-ja {
        padding-left: 5.5rem;
    }

    .game__headline:after {
        content: '';
        position: absolute;
        top: calc(50% - 1.35rem);
        left: 0;
        width: .6rem;
        height: 2.7rem;
    }

    .game__headline:before {
        content: '';
        position: absolute;
        top: calc(50% - 13px);
        left: 6.5%;
        width: 40px;
        height: 26px;
        /* 		background-image: url(../images/japan.jpg); */
        background-size: cover;
        background-repeat: no-repeat;
    }

    .game__member {
        display: block;
    }

    .game__member .table-title table tr td {
        display: block;
        width: 100%;
        max-width: inherit;
    }

    .game__member .table-title table tr td br {
        display: none;
    }

    .game__member-list {
        margin: 0 auto;
    }

    .game__member-list:nth-of-type(5n) {
        margin: 0 auto;
    }

    .game__member .table-title table tr td img {
        height: calc(50vh - 50px);
    }
}


/*
 試合結果ページ
*/

.game {
    padding: 4rem 2rem;
    background-image: linear-gradient(180deg, rgba(205, 166, 231, 1) 0%, rgba(205, 166, 231, 0.4) 25%, rgba(253, 244, 209, 0.4) 75%, rgba(253, 244, 209, 0.4) 100%), url(../images/bg-game.jpg);
    background-position: bottom;
    background-size: cover;
}

@media screen and (max-width: 959px) {
    .game {
        padding: 2rem 1rem;
    }
}

.game-gray {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.4) 25%, rgba(255, 255, 255, 0.4) 75%, rgba(255, 255, 255, 1) 100%), url(../images/bg-game.jpg);
}

.page__result {
    height: auto;
}

.page__result .game__box {
    margin-bottom: -6rem;
}

.page__result .page__content {
    padding: 0;
}

.page__result .page__heading--result {
    background-image: url(../images/bg-result.jpg);
    background-position: bottom;
}

.result-title {
    position: relative;
    padding: 1.7rem;
    background: #000;
    font-size: 2.2rem;
    color: #fff;
    z-index: -1;
    width: 380px;
    margin: 0 auto 6rem auto;
    text-align: center;
    background-image: radial-gradient(circle, rgba(0, 0, 0, 1) 9%, rgba(0, 0, 0, 0) 13%), repeating-conic-gradient(from 5deg, rgba(0, 0, 0, 1) 50deg, rgba(48, 52, 75, 1) 50deg 52deg, rgba(0, 0, 0, 1) 52deg 58deg, rgba(48, 52, 75, 1) 58deg 61deg, rgba(0, 0, 0, 1) 61deg 68deg, rgba(48, 52, 75, 1) 68deg 72deg, rgba(0, 0, 0, 1) 72deg 83deg, rgba(48, 52, 75, 1) 83deg);
}

.result-title:before {
    position: absolute;
    content: '';
    left: -2px;
    top: -2px;
    border: none;
    border-left: solid 40px white;
    border-bottom: solid 172px transparent;
    z-index: -2
}

.result-title:after {
    position: absolute;
    content: '';
    right: -2px;
    top: -2px;
    border: none;
    border-right: solid 40px white;
    border-top: solid 172px transparent;
    z-index: -2
}

.result-area {
    margin-bottom: 10px;
}

.result-area__inner {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.result-area__title {
    font-size: 2rem;
    /*	font-weight:bold;*/
    margin-bottom: 3rem;
    margin-top: 6rem;
    text-align: center;
    font-weight: bold;
}

.result-area .result-area__title:first-of-type {
    margin-top: 0;
}

.result-top-img {
    text-align: center;
    max-width: calc(100% - 560px);
    clip-path: polygon(2rem 0px, calc(100% - 2rem) 0px, 100% 1rem, 100% calc(100% - 1rem), calc(100% - 2rem) 100%, 2rem 100%, 0px calc(100% - 1rem), 0px 1rem);
}

@media screen and (max-width: 959px) {
    .result-top-img {
        text-align: center;
        max-width: inherit;
        width: 100%;
    }
}

.result-top-img img {
    width: 470px;
}

.result-top-img.general img {
    /*    margin-top: 3rem;*/
}

.ranking {
    margin: 3rem auto 1rem auto;
    background: linear-gradient(to right bottom, rgba(51, 51, 51, 0.8) 0%, rgba(255, 255, 255, 0.8) 3%, rgba(51, 51, 51, 0.8) 4%, rgba(255, 255, 255, 0.8) 6%, rgba(102, 102, 102, 0.8) 6%, rgba(255, 255, 255, 0.8) 95%);
    clip-path: polygon(2rem 0px, calc(100% - 1rem) 0px, 100% 1rem, 100% calc(100% - 1rem), calc(100% - 1rem) 100%, 1rem 100%, 0px calc(100% - 1rem), 0px 1rem);
    box-shadow: 1px 3px rgba(51, 51, 51, 0.4);
    padding: 1rem;
}

.ranking dl {
    /*	width: 400px;*/
    margin: 0 auto;
}

.ranking-list {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: space-evenly;
    padding-top: 0.5rem;
}

.ranking-list:first-of-type {
    padding-top: 0;
}

.ranking-list dt,
.ranking-list dd {
    padding: 0.4em 1em 0.4em 3em;
    font-size: 1.8rem;
    text-align: left;
    font-weight: bold;
    display: flex;
    align-items: center;
}

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

    .ranking-list dt,
    .ranking-list dd {
        padding: 0.4em 0.5em 0.4em 1.5em;
    }
}


.ranking-list dt {
    width: inherit;
    padding-left: 55px;
    min-width: 312px;
}

.ranking-list-first,
.ranking-list-second,
.ranking-list-third,
.ranking-list-fourth {
    position: relative;
}

.ranking-list-first::after {
    position: absolute;
    background-image: url(../images/first.png);
    content: '';
    top: 27%;
    left: 0;
    width: 40px;
    height: 22px;
    background-repeat: no-repeat;
    background-size: cover;
}

.ranking-list-second::after {
    position: absolute;
    background-image: url(../images/second.png);
    content: '';
    top: 27%;
    left: 0;
    width: 40px;
    height: 22px;
    background-repeat: no-repeat;
    background-size: cover;
}

.ranking-list-third::after {
    position: absolute;
    background-image: url("../images/third.png");
    content: '';
    top: 27%;
    left: 0;
    width: 40px;
    height: 22px;
    background-repeat: no-repeat;
    background-size: cover;
}

.ranking-list-fourth::after {
    position: absolute;
    background-image: url("../images/third.png");
    filter: brightness(0.3);
    content: '';
    top: 27%;
    left: 0;
    width: 40px;
    height: 22px;
    background-repeat: no-repeat;
    background-size: cover;
}

.ranking-list span {
    font-size: 1.8rem;
}

.ranking-list span.point {
    font-size: 1.4rem;
}


/*
.ranking-detail .ranking-list dt,.ranking-detail .ranking-list dd{
	padding: 0.6em 0.6em 0.6em 7.3rem;
    font-size: 2rem;
    text-align: left;
}


.ranking-detail .ranking-list dt{
	width: 150px;
    padding-left: 70px;
}

.ranking-detail .ranking-list{
	padding-top:0;
}

.ranking-detail .ranking-list-first::after,
.ranking-detail .ranking-list-second::after,
.ranking-detail .ranking-list-third::after{
    top: 30%;
    left: 12%;
    width: 43px;
    height: 25px;
}
*/

.ranking-list-cha,
.ranking-list-ja,
.ranking-list-ko,
.ranking-list-hk {
    position: relative;
}

.ranking-list-cha::after {
    position: absolute;
    background-image: url("../images/china.jpg");
    content: '';
    top: 18%;
    left: 12%;
    width: 45px;
    height: 30px;
    background-repeat: no-repeat;
    background-size: cover;
    border: solid 1px #eee;
}

.ranking-list-ja::after {
    position: absolute;
    background-image: url("../images/japan.jpg");
    content: '';
    top: 18%;
    left: 12%;
    width: 45px;
    height: 30px;
    background-repeat: no-repeat;
    background-size: cover;
    border: solid 1px #eee;
}

.ranking-list-ko::after {
    position: absolute;
    background-image: url("../images/korea.jpg");
    content: '';
    top: 18%;
    left: 12%;
    width: 45px;
    height: 30px;
    background-repeat: no-repeat;
    background-size: cover;
    border: solid 1px #eee;
}

.ranking-list-hk::after {
    position: absolute;
    background-image: url("../images/hongkong.jpg");
    content: '';
    top: 18%;
    left: 12%;
    width: 45px;
    height: 30px;
    background-repeat: no-repeat;
    background-size: cover;
    border: solid 1px #eee;
}


/*
.ranking-detail .ranking-list-cha::after,
.ranking-detail .ranking-list-ja::after,
.ranking-detail .ranking-list-ko::after{
    top: 27%;
    left: 12%;
    width: 45px;
    height: 30px;
}
*/

.ranking-detail {
    width: 100%;
}

.ranking-detail .ranking-list {
    justify-content: center;
}

.result-img__box {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: space-between;
}

.result-img img {
    width: 470px;
    margin: 0 auto;
}

.page__content .result-area__note {
    margin-top: 3rem;
    text-align: left;
    letter-spacing: 0.06em;
}

.game__box-top {
    padding-top: 10rem;
}

.page__result .game__title {
    width: 540px;
}

.winner-img {
    text-align: center;
}

.winner-img img {
    width: 400px;
    border: solid 1px #eee;
}

.game__country {
    margin-bottom: 28px;
    position: relative;
    font-size: 2rem;
    display: inline-block;
    font-weight: bold;
    padding-left: 55px;
}

.game__country:after {
    position: absolute;
    background-image: url("../images/icon-winner.png");
    content: '';
    top: 15%;
    left: 5px;
    width: 40px;
    height: 35px;
    background-repeat: no-repeat;
    background-size: cover;
}

.page__content .winner-name {
    font-size: 1.8rem;
    letter-spacing: 0.08em;
}

.winner-info {
    text-align: center;
    width: 50%;
}

.winner-info ul {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.winner-info__box {}

.result-area__subtitle {
    font-size: 2rem;
    font-weight: bold;
    padding-top: 3rem;
    margin-bottom: 3rem;
    width: 50%;
    text-align: center;
}

.result-box {
    margin: 4rem 0;
    text-align: center;
    display: flex;
}

.result-box p {
    font-size: 1.6rem;
    letter-spacing: 0.08em;
}

.youtube {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}

.youtube iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

.youtube-info {
    width: 50%;
}

.youtube-info:first-of-type + div {
    transform: inherit;
    transition: .3s;
}

.youtube-info:first-of-type:hover + div {
    transition: .3s;
    animation: .3s linear alternate youtube-rotate;
}

@keyframes youtube-rotate {
    from {
        transform: rotateZ(0);
    }

    to {
        transform: rotateZ(0.5deg);
    }
}

.youtube-wrapper {
    width: 600px;
    margin: 0 auto;
}

.youtube-title,
.youtube-title2 {
    font-size: 22px;
    /*    font-weight: bold;*/
    position: relative;
    display: inline-block;
    padding: 0 30px;
    margin: 1rem 5%;
    text-align: center;
    width: 92%;
    text-shadow: 1px 2px gray;
}

.youtube-title2 {
    margin-bottom: 0px;
}

.game.game-gray .youtube-title,
.game.game-gray .youtube-title2 {
    color: #0f0f0f;
}

.youtube-title:before,
.youtube-title:after {
    content: '';
    position: absolute;
    display: inline-block;
    width: 30px;
    height: 1px;
    background-color: #0f0f0f;
    top: 13px;
}

.game.game-gray .youtube-title:before,
.game.game-gray .youtube-title:after {
    background-color: #0f0f0f;
}

.youtube-title:before {
    left: 0;
}

.youtube-title:after {
    right: 0;
}

@media screen and (min-width:480px) and (max-width:959px) {
    .ranking {
        margin: 1rem auto;
    }

    .result-area__inner {
        display: block;
    }

    .result-img__box {
        display: block;
        text-align: center;
    }

    .result-img:last-child {
        margin-top: 2rem;
        ;
    }

    .youtube-wrapper {
        width: 470px;
    }
}

@media screen and (max-width: 959px) {
    .result-area {
        margin-top: 1rem;
    }

    .ranking-list {
        display: block;
    }

    .result-top-img.general img {
        /*        margin-top: 1rem;*/
    }

    .ranking dl {
        width: 96%;
    }

    .ranking-list dd {
        padding-left: calc(12% + 100px);
    }

    .result-area p.youtube-title,
    .result-area p.youtube-title2 {
        font-size: 20px;
        margin: 0.5rem 5%;
    }

    .result-area p.youtube-title2 {
        margin-top: 2rem;
        padding: 0;
    }

    .youtube-title:before,
    .youtube-title:after {
        top: 32px;
    }

    .result-box {
        display: block;
    }

    .winner-info,
    .youtube-info {
        width: 100%;
    }

    .winner-info {
        margin-bottom: 4rem;
    }

    .youtube-title2 {
        padding-left: 2rem;
    }
}

@media screen and (max-width: 479px) {
    .game__headline {
        margin-bottom: 2rem;
    }

    .result-title {
        width: 100%;
        padding: 0.8rem;
        font-size: 1.5rem;
    }

    .result-area__inner {
        display: block;
    }

    .ranking {
        padding: 2rem 0;
        width: 100%;
        margin: 2rem 0 0 0;
    }

    .ranking-list {
        padding-top: 0.5rem;
    }

    .ranking-list span {
        font-size: 1.8rem;
    }

    .ranking-list dt,
    .ranking-list dd {
        padding-left: calc(18% + 50px);
        font-size: 1.5rem;
    }

    .ranking-list dt {
        padding-left: 65px;
    }

    .ranking-list-first::after,
    .ranking-list-second::after,
    .ranking-list-third::after,
    .ranking-list-fourth::after {
        top: 20%;
        left: 5%;
        width: 33px;
        height: 19px;
    }

    .ranking-list-cha::after,
    .ranking-list-ja::after,
    .ranking-list-ko::after,
    .ranking-list-hk::after {
        top: calc(50% - 12px - 4px);
        left: 18%;
        width: 35px;
        height: 24px;
    }

    .result-img__box {
        display: block;
    }

    .result-img:last-child {
        margin-top: 2rem;
        ;
    }

    .ranking-detail .ranking-list dt,
    .ranking-detail .ranking-list dd {
        padding: 0.2em 0.2em 0.2em 4.5em;
        font-size: 1.6rem;
    }

    .ranking-detail .ranking-list dt {
        width: 100px;
        padding-left: 45px;
    }

    .ranking-detail .ranking-list-first::after,
    .ranking-detail .ranking-list-second::after,
    .ranking-detail .ranking-list-third::after {
        top: 20%;
        left: 5%;
        width: 33px;
        height: 19px;
    }

    .ranking-detail .ranking-list-cha::after,
    .ranking-detail .ranking-list-ja::after,
    .ranking-detail .ranking-list-ko::after {
        top: 16%;
        left: 18%;
        width: 35px;
        height: 24px;
    }

    .ranking-detail .ranking-list {
        padding-top: 1rem;
    }

    .ranking-detail .ranking-list:first-of-type {
        padding-top: 0;
    }

    .winner-info {
        padding-top: 0;
    }

    .winner-img {
        margin-top: 1.6rem;
    }

    .page__result .game__title {
        width: 100%;
        margin-bottom: 4rem;
    }

    .winner-info__box-top {}

    .page__content .winner-name {
        font-size: 1.6rem;
    }

    .game__country {
        margin: 0;
        font-size: 1.8rem;
    }

    .game__country:after {
        top: 12%;
        width: 30px;
        height: 28px;
    }

    .game__country-single:after {}

    .game__box {
        margin-bottom: 6rem;
    }

    .result-area {
        margin-top: 2rem;
    }

    .result-area p.youtube-title,
    .result-area p.youtube-title2 {
        font-size: 16px;
        margin: 0.5rem 5%;
    }

    .result-area p.youtube-title2 {
        margin-top: 2rem;
        padding: 0;
    }

    .youtube-title:before,
    .youtube-title:after {
        top: 26px;
    }

    .result-box {
        margin: 3rem 0;
    }

    .result-area__subtitle {
        font-size: 1.8rem;
        margin-bottom: 1.6rem;
    }

    .result-box p {
        margin-top: 0rem;
    }

    .youtube-wrapper {
        width: 100%;
    }
}

/* alphabet font */

.alphabet {
    font-size: 115%;
    letter-spacing: 0.03em;
}

@media screen and (max-width: 959px) {
    .alphabet {
        font-size: 115%;
        letter-spacing: 0.03em;
        padding-left: 0;
        display: inline;
    }
}

/* animation forward */
/* https://coco-factory.jp/ugokuweb/move02/4-1/ */

.fadeUp {
    animation-name: fadeUpAnime;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeUpAnime {
    from {
        opacity: 0;
        transform: translateY(100px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fadeUpTrigger {
    opacity: 0;
}


/* modal */
/* https://unicolabo.jp/topics/668.html#overlay */

figure#figure {
    position: fixed;
    margin: 0;
    display: none;
}

figure#figure:target {
    display: block;
    position: fixed;
    top: 0;
    height: 100vh;
    width: 100vw;
    left: 0;
    animation: fadein 1s;
    z-index: 9999;
}

figure#figure:target #overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.7);
    text-decoration: none;
    color: inherit
}

figure#figure:target img {
    animation: fadein .1s;
    width: 90vw;
    max-height: 90vh;
    object-fit: contain
}

figure#figure figcaption {
    padding: 10px;
    font-size: 50px;
    line-height: 50px;
    position: absolute;
    top: 0;
    right: 0;
    text-align: center;
    width: 50px
}

figure#figure figcaption span {
    background: #fff;
    font-size: 40px;
    width: 40px;
    height: 40px;
    margin-right: 15px;
    line-height: 40px;
    text-align: center
}

@keyframes fadein {
    0% {
        transform: scale(0.2);
        opacity: 0.2;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Google Fonts */
.material-symbols-outlined {
    position: absolute;
    top: 0;
    right: 0;
    font-variation-settings:
        'FILL'0,
        'wght'400,
        'GRAD'0,
        'opsz'24
}
