@charset "UTF-8";

/* CSS Document */


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

html {
    scroll-behavior: smooth;
}

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;
}

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(30,43,94,1) 0%, rgba(255,255,255,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;
}

/* animation forward */

.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;
}


/* 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: 1.8rem;
    font-family: 'Teko', sans-serif;
    padding-left: 2rem;
    line-height: 1;
}

@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:10000;
		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: 300px;
		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: 50%;
        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{
  content:"";
  position: absolute;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  z-index: 1;
}
*/

/*
section.top-background::after{
  bottom: -20px;
  border-width: 0 0 20px 100vw ;
  border-color: transparent  transparent  transparent rgba(242,37,110,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(30,43,94,1);
}


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

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

.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(30,43,94,1) 0%, rgba(242,37,110,1) 50%, rgba(49,52,77,1) 75%, rgba(255,255,255,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;
    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;
}

.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: 125px;
    max-width: 100%;
    padding: 1.2rem 0.6rem;
    background: #fff;
    border: 2px solid transparent;
    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: inherit;
        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(30,43,94,1) 0%, rgba(205,166,231,0.2) 25%, rgba(242,37,110,0.2) 75%, rgba(242,37,110,1) 100%), url("../images/bg-about.jpg");
    background-size: cover;
    background-position: top;
}

@media screen and (max-width:959px) {
    #about {
        background-size: contain;
    }
}

.top-content__lead {
    color: #444444;
    letter-spacing: -0.03em;
    font-size: 20px;
}

/*table*/

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

.table-about th {
    width: 25%;
    font-size: 120%;
    font-weight: 900;
    text-shadow: 1px 2px rgba(51,51,51,0.4);
}

.table-about td {
    width: 75%;
}

.table-about table {
    border: none;
    margin-bottom: 1em;
}

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

.table-about table tr th, .table-about table tr td {
        padding: 0.5rem 2%;
        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;
}

@media screen and (max-width: 959px) {
    .table-about td ul li{
        padding: 0.5rem 0}
}


/* .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.2rem;
    }

    .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(30,43,94,1) 0%, rgba(242,37,110,1) 50%, rgba(49,52,77,1) 75%, rgba(255,255,255,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: linear-gradient(180deg, rgba(30,43,94, 1) 0%, rgba(30,43,94, 0.2) 25%, rgba(255,255,255, 0.2) 75%, rgba(255,255,255, 1) 100%), url(../images/bg-title.jpg);
    background-position: top;
    background-size: cover;
    position: relative;
    padding: 30px 0;
}

@media screen and (max-width:959px) {
    .background-title {
        background-size: contain;
    }
}

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

.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);
    color: #fff;
}

.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 th:nth-child(2){
    width: 120px;
    white-space: normal;
    padding: 20px 10px;
}

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

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

#title .table-title.pc-only table tr td:nth-child(3){
    font-size: 16px;
}

#title .table-title table tr td:last-child {
    background: #fff;
    background-image: radial-gradient(farthest-corner at 160% 120%, rgba(30,43,94, 0.8) 0%, rgba(255,255,255, 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);
}

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

#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 a {
    color: #000;
    cursor: pointer;
    position: relative;
    display: inline-block;
}

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

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

@media screen and (max-width:959px) {
    #title .table-title table tr td:last-child a{
        top: calc(50% - 16px);
    }
    .table-title a:after {
        border-bottom: 1px solid #000;
    }
    .table-title a.link-bk:after {
        border-bottom: 1px solid #000;
    }
    .table-title td:first-child, .table-title td:nth-child(2),
    , .table-title td:nth-child(3){
    font-size:100% !important;
}
   .table-title table tr:nth-child(3n+1) td {
    background-color: #000;
}
/*
    .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;
    }
}
*/

@media screen and (max-width:959px) {
    .table-title table{
        width: 100%;
        margin-left: 0;
    }
    
    .table-title table tr{
        margin-bottom: 1rem;
    }
    
    .table-title table tr th,
    .table-title table tr td {
        padding: 3% 1.5%;
        font-size: 1rem;
        text-align: center;
    }
    .table-title table tr:nth-child(2n) td:last-child{
        min-width: 50%;
    }
}


/*
 live streaming
*/

.background-live {
    transform: translateZ(-1px);
    background: linear-gradient(180deg, rgba(30,43,94, 1) 0%, rgba(30,43,94, 0.2) 25%, rgba(255,255,255, 0.2) 75%, rgba(30,43,94, 1) 100%), url(../images/bg-live.jpg);
    background-position: top;
    background-size: cover;
    position: relative;
/*    height: 1000px;*/
    height: 340px;
}

.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.6);
    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 {
        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(30,43,94,1) 0%, rgba(242,37,110,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;
    margin-bottom: 1em;
    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;
    bottom: 0;
}

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

@media screen and (max-width:479px) {
    .footer-link__list.single:not(:first-of-type) {
        margin-top: 1em;
    }
/*
    .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 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: 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% );
}

.live-link a.btn__link:hover{
/*
    background-image: radial-gradient(farthest-corner at 129px 29px, rgba(30,43,94, 0.8) 0%, rgba(255,255,255, 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;
    }
    .footer-link {
        display: block;
        padding: 0 2%;
        text-align: center;
    }
    .btn .btn__link {
        width: 100%;
        font-size: 1.2rem;
        margin: 0;
        height: auto;
    }
    .footer-link__list:last-child {
        margin-top: 0;
    }
    .footer-link__list.single a{
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 1em;
    }
    .footer-link__list.single a img{
        margin-right: 1em;
        width: calc(100% - 2rem);
    }
    .footer-link__list.single a span{
        margin-left: 0.1em;
    }
}

@media screen and (max-width:479px) {
    .live-link {
        display: inline-block;
    }
    .footer-link__list:last-child {
        margin-top: 20px;
    }
    .footer-link:last-of-type .footer-link__list.single:last-child {
        margin:0;
        padding:0;
        border:none;
    }
    .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 {
        margin-bottom: 0.5em;
        padding: 0;
        
    }
    .footer-link__list.single a img{
        width: 100%;
    }
}


/*
 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: 1rem 0;
    background: #d6000f;
    color: #fff;
    font-size: 2rem;
}

#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(30, 43, 94, 1) 0%, rgba(205, 166, 231, 0.2) 25%, rgba(242, 37, 110, 0.2) 75%, rgba(242, 37, 110, 1) 100%), url(../images/bg-player.jpg);
    background-position: 50%;
    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: top;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.8) 25%), url(../images/bg-history.jpg);
    background-size:contain;
}


/*
 出場選手ページ
*/

.player {
    padding: 2rem 1rem;
    background-image: linear-gradient(180deg, rgba(30,43,94,1) 0%, rgba(205,166,231,0.4) 25%, rgba(242,37,110,0.4) 75%, rgba(242,37,110,0.4) 100%), url(../images/bg-player.jpg);
    background-size: auto;
    background-repeat: repeat;
}

#game01.player{
    background-position: top center;
}

#game02.player{
    background-position: top 0 right -310px;
}

#game03.player{
    background-position: top 0 left -310px;
}

.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(30,43,94, 0.8) 0%, rgba(255,255,255, 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;
}

.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(30,43,94,1) 0%, rgba(30,43,94,1) 25%, rgba(242,37,110,1) 75%, rgba(242,37,110,1) 100%);
}

.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,
.game__member .table-title table td{
    max-width: inherit;
}

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

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

.game__member .table-title table tr td dl{
    display: flex;
    flex-wrap: wrap;
}

.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: 40%;
    height: 30px;
    margin: 5px 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 1rem;
    text-shadow: 2px 2px 3px #ccc;
    font-size: 16px;
    font-weight: 900;
    width: 60%;
}

/*
.game__member .table-title table tr td dl dd:last-child{
    text-align: left;
}
*/

.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;
        font-size: 14px;
    }
    .game__member .table-title table tr td dl dd{
        padding: 0.25rem 0;
        line-height: 2;
    }
}

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

.game__member .table-title table tr td:nth-child(2n+1) {
    background-image: radial-gradient( farthest-corner at 40px 40px, rgba(255,255,255,1) 0%, rgba(49,52,77,0.9) 50%, rgba(242,37,110,0.9) 75%, rgba(205,166,231,0.9) 100% );
    margin: 0 auto 1rem auto;
    vertical-align: bottom;
    width: 40%;
}

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

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

@media screen and (max-width: 479px) {
    .game__member .table-title table tr td:nth-child(2n+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);
    margin: 0 auto 5px auto;
    padding: 0;
    }
}

.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 (max-width: 959px) {
    .game__member {
        display: block;
    }
    .game__member .table-title table tr td {
        display: block;
        width: 100%;
        max-width: inherit;
    }
}

@media screen and (min-width:480px) and (max-width:959px) {
    .game__member-list {
        width: 140px;
        margin-right: 5.6px;
    }
    .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 2.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;
        background: linear-gradient(180deg, rgba(30,43,94,1) 0%, rgba(30,43,94,1) 25%, rgba(242,37,110,1) 75%, rgba(242,37,110,1) 100%);
    }
    .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 .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 {
    padding: 4rem 2rem;
    background-image: linear-gradient(180deg, rgba(30,43,94,1) 0%, rgba(205,166,231,0.4) 25%, rgba(242,37,110,0.4) 75%, rgba(242,37,110,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;
}
}

/* fadeIn */

.fadeIn {
  opacity: .1;
  transition: all 1.5s;
  transform: translateY(20px);
  transition: all .5s ease-in;
}
/* 画面に入った時の動き */
.fadeIn.blockIn {
  opacity: 1;
  transform: translateY(0);
}