@charset "utf-8";
/* top css */

.section-head { margin-bottom: 3rem; }
.section-head .btn {
	display: inline-block;
	float: right;
}

/*=========================================
		mm
=========================================*/
#mm {
	width: 100%;
	height: 0;
	padding-bottom: 40.831%;
	position: relative;
	overflow: hidden;
}
#mm iframe{
	position: absolute;
	z-index: -1;
	top:0;
	left: 50%;
	transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	max-height: calc(100vh - 16rem);
	width: 100% !important;	
}
#mm .mm-overlay {
	display: block;
	background: rgb(37,128,73);
	background: linear-gradient(154deg, rgba(37,128,73,0.6) 0%, rgba(29,128,121,0.5) 50%);
	position: absolute;
	z-index: 0;
	width: 100%;
 	height: calc(100vh - 16rem);
}

/*=========================================
		nextmatch
=========================================*/
#next-match {
	z-index: 999;
	position: absolute;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}

/*=========================================
		topics-area
=========================================*/
#topics-area .section-head {
	justify-content: space-between;
	flex-wrap: nowrap;
	align-items: center;
	gap: 2rem;
	margin-right: 1rem;
}
#topics-tab { margin-left: 3.987%; }

#topics-area #lpage-menu a:hover,
#topics-area #lpage-menu a.selected{
	background: #002161;
	color: #fff;
}


/*=========================================
		TOPICSタブメニュー増加調整
=========================================*/
@media screen and (min-width:768px){
	#topics-area #lpage-menu{
		flex-wrap: wrap;
		justify-content: flex-start;
		font-size:90%;
		gap:0.5rem;
	}
	#topics-area #lpage-menu li{
		min-width:auto;
		width:calc((100% / 5) - 0.5rem);
		background: rgba(0,0,0,.1);
	}
	#topics-area #lpage-menu li a,
	#topics-area #lpage-menu li a:hover,
	#topics-area #lpage-menu li a.selected {
		padding:0.8rem;
	}
}
@media screen and (max-width: 900px) and (min-width:768px){
	#topics-area #lpage-menu{
		font-size:100%;
	}
	#topics-area #lpage-menu li a,
	#topics-area #lpage-menu li a:hover,
	#topics-area #lpage-menu li a.selected {
		padding:1rem 0.5rem;
	}
}


/*=========================================
		pickup-area
=========================================*/
.section_wrap {
	margin-top: 6rem;
}

@media screen and (min-width: 768px) {
	.section_wrap {
		display: flex;		
	}
	#pickup-area {
		width: 70%;
		margin-right: 6rem;
	}

	#pickup-area .section-head .btn {
		margin-top: 1.3rem;
	}
}

#pickup-area #pickup{ 
	width: calc(100% + 2rem);
}
@media screen and (max-width: 767px) {
	#pickup-area #pickup{ 
		width: calc(100% - 4rem);
	}
}

#pickup-area .position-name{
	font-size: 46px;
	font-size: 4.6rem;/*calc(4.6rem + ((1vw - 0px) * 0.3125));*/
}

/*=========================================
		teamrank-area
=========================================*/
@media screen and (min-width:768px) {
	#teamrank-area {
		width: 30%;
	}
}
#teamrank-area .section-head {
    width: 100%;
    background: #F2F2F2;	
	margin: 0;
	padding: 1.5rem 2rem;	
}
#teamrank-area .section-head h5 {
	font-weight: 600;
	text-align: center;
}
#teamrank-area .btn a {
	padding: 1rem 3rem;
}
#teamrank-area .btn_wrap {
	background: #F2F2F2;
	padding: 1.5rem;
}
#teamrank-area .section-table-scroll{
	max-height: 40rem;
    overflow-y: scroll;
}
@media screen and (max-width: 767px) {
	#teamrank-area .section-table-scroll{
		max-height:30rem;
	}
}
#teamrank-area table {
	width: 100%;
    font-weight: bold;
    text-align: center;
    letter-spacing: 0.1rem;
    font-size: 16px;
    font-size: 1.6rem;
	background: #fff;
}
#teamrank-area table tr { border-top: 1px solid rgba(217,217,217,.8); }
#teamrank-area table thead tr { border-bottom: 3px solid rgba(217,217,217,.8); }
#teamrank-area table th { 
	color: #02414c;
	background: #F2F2F2;	
}
#teamrank-area table .marker {
	background: #E7ECEC;
}
#teamrank-area table .marker td {
    font-weight: 900;
    color: rgba(232,44,44,1);
}
#teamrank-area table thead th { 
	border-right: 1px solid rgba(217,217,217,.8);
	white-space: nowrap;
}
#teamrank-area table tbody td { border-right: 1px dotted rgba(217,217,217,.8); }
#teamrank-area table tr td:nth-of-type(2) {
	text-align: left;
}
#teamrank-area table thead th:last-of-type,
#teamrank-area table thead td:last-of-type { border-right: none; }
#teamrank-area table th,
#teamrank-area table td { padding: 1.5rem 1rem; }
#teamrank-area table td {
    font-weight: 500;
}

/*=========================================
		アカデミー＆スクール
=========================================*/
#academy-area { 
	padding-top: 20rem;
	text-align: center;
}
#academy-area h2 {
	border: none;
	padding: 0;
	font-weight: bold;
	font-family: inherit;
	margin-bottom: 2.5rem;
}
#academy-area p { color: #dee5e5; }
#academy-area > p {
	line-height: 2.8;
	text-shadow: 0 0 18px rgba(0,0,0,.3);
}
#academy-area strong { margin-right: 0.5rem; }
#academy-area .btn { margin-top: 6rem; }

/*=========================================
		FOLLOW US
=========================================*/
#sns-area {
	padding-top:6rem;
	overflow: hidden;
	margin: 0 auto;
}

/*=========================================
		footer
=========================================*/
/*footer { 
	background: #0090A6;
	padding: 2rem 0;
}*/



@media screen and (min-width: 768px) {
	/*.bg-soccer {
		background: url(../img/common/bg-soccer.png) no-repeat;
		background-size: 100%;
	}*/

	/*=========================================
			nextmatch
	=========================================*/
	#next-match {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: calc(100% - 4rem);
		max-width: 1440px;
		margin: 0 auto;
		top: -14rem;
	}
	#next-match > div {
		width: calc((100% - 40px) / 3.5);
		display: flex;
		justify-content: center;
		align-items: center;
	}
	#next-match .block-content_wrap .block-content { 
		margin: 0 2.5rem;
		padding: 2rem 0;
	}
	#next-match .block-date { padding: 2rem 1rem 2rem 3rem; }
	#next-match .block-date p {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
	}

	/*=========================================
			pickup-area
	=========================================*/
	/* player-list_wrap */
	.player-list_wrap li { 
		width: calc((100% / 3) - (6rem / 3));
		margin-bottom: 3rem;
	}

	/*=========================================
			topics-area
	=========================================*/
	#topics-area{overflow:hidden;}
	#topics-area .section-head .btn{
		white-space:nowrap;
		min-width:6em;
	}
	#topics-area .topics-list_wrap {
		display: grid;
		grid-template-columns: repeat(4,minmax(20%,100%));
		grid-gap:2.5rem;
		justify-content: space-around;
		width: 100%;
	}
	#topics-area .topics-list_wrap > li { 
		width:100%;
		min-width:25rem;
		padding: 0; 
		margin-bottom: 0;
		max-width:unset;
	}
	#topics-area .topics-list_wrap li.type-movie a{
		background: rgba(2,44,51,.75);
		color: #dfe7e8;
	}
	#topics-area .topics-list_wrap li.type-movie .img-coversize{
		min-height: unset;
		padding-bottom: 66.672%;
	}
	#topics-area .topics-list_wrap li.type-movie a .note-block{
		background: unset;
		color: unset;
		position: unset;
	}
	#topics-area .section-head .btn{
		white-space:nowrap;
		min-width:6em;
	}

	#topics-all {
		column-count: 2;
		column-gap: 20px;
	}
	#topics-all li {
		break-inside: avoid;
		page-break-inside: avoid;
		-webkit-column-break-inside: avoid;
	}

	/*=========================================
			academy-area
	=========================================*/
	#academy-area .btn { width: 22.143%; }		
}



@media screen and (max-width: 1500px) and (min-width: 768px){
	/*=========================================
			nextmatch
	=========================================*/
	#next-match_wrap{
		max-height: 15rem;
		margin-bottom:1rem;
	}
}



@media screen and (max-width: 767px) {
	h2.ttl-border-right {
		border-right: 0;
		border-bottom: 1px solid #9f8d39;
		padding: 0 2rem 0.5rem;
	}
	#maincontent > .w-wide/*,
	#sns-area #sns-list_wrap*/ { width: 100%; }
	section .btn {
		width: calc(100% - 8rem);
		margin: 2rem auto 0;
	}
	footer #panel-menu .btn { width: 100%; }

	/*=========================================
			mm
	=========================================*/
	#mm,
	#mm .mm-overlay/*,
	#mm:after */{
		top: 0;
	}
	#mm {
		padding-top: 7rem;
		background: #038FA0;		
		padding-bottom: 45.579%;
	}
	#mm .mm-frame { height: 100%; }
	#mm .mm-frame .img-block {
		height: 100%;
		min-height: 100%;
		min-width: 100%;
		padding: 0;
	}
	#mm .mm-frame .popup-vtr {
		z-index: 99;
		position: absolute;
	}
	
	/*=========================================
			nextmatch
	=========================================*/
	#next-match {
		width: calc(100% - 4rem);
		margin: 0 auto;
		top: -5rem;
	}
	#next-match > div { padding: 1rem 2rem; }

	/*=========================================
			topics-area
	=========================================*/
	#topics-area ul { 
		overflow: unset;
		margin: 0 auto;		
		padding: 0 4rem;
	}
	/* フリックtype-movie */
	#topics-area .topics-list_wrap li.type-movie a .note-block{
		position:absolute;
	}

	/*=========================================
			teamrank-area
	=========================================*/
	#teamrank-area {
		width: calc(100% - 4rem);
		margin: 8rem auto 0;
	}
	#teamrank-area .btn {
		width: 100%;
		margin: 0 auto;
	}
	
	/*=========================================
			academy-area
	=========================================*/
	#academy-area {
		background: url(../img/common/bg-soccer.png) no-repeat;
		background-size: cover;
		background-position: top left 37%;
		padding: 19rem 2rem;
	}
	#academy-area h2 { margin-bottom: 3rem; }
	#academy-area p { text-align: left; }
	#academy-area .btn { margin-top: 3rem; }
}




@media screen and (max-width: 530px) {
	/*=========================================
			topics-area
	=========================================*/
	/* フリックtype-movie */
	#topics-area .slick-list .type-movie a{
		background: #000;
	}
	#topics-area .slick-list .type-movie .img-block{
		min-height: unset;
		padding-bottom: inherit;
	}
	#topics-area .slick-list .type-movie .img-block > img{
		object-fit: contain;
		width: 100%;
		height: auto;
		min-height: unset;
		vertical-align: middle;
		position: inherit;
		top: unset;
		left: unset;
		transform: unset;
	}
}



@media screen and (min-width: 481px) {
	/*=========================================
			mm
	=========================================*/
	#mm-slide li {
		width: 100%;
		height: 0;
		padding-bottom: 40.831%;
	}


	/*=========================================
			teamrank-area
	=========================================*/	
	#teamrank-area .section-head {
		padding: 1.5rem;
		text-align: center;
	}
}



@media screen and (max-width: 480px) {
	/*=========================================
			nextmatch
	=========================================*/
	#next-match {
		top: -4rem;
	}
	
	/*=========================================
			topics-area
	=========================================*/
	#topics-area .result ul {
		padding: 0 1rem;
	}
}



@media screen and (max-width: 340px) {
	/*=========================================
			topics-area
	=========================================*/
	#topics-area .result ul{
		padding:0;
	}
	#topics-area .type-match .result .logo-cell{
		margin: 4rem 0 0;
		padding:0;
	}
}