@charset "UTF-8";

header.gHeader nav.gNav ul.gNavMenu li a.navMatch {
  color: #FF5500;
}

/* index
----------------------------------------------------*/
.matchIndex {
    margin: 45px auto;
    max-width: 1400px;
		box-sizing:border-box;
    overflow: hidden;
    _zoom: 1;
}

.matchIndex div.filter {
    overflow: hidden;
	_zoom:1;
	margin-bottom: 30px;
	text-align: left;
	display: flex;
	max-width: 800px;
}

.matchIndex .filter a {
   display: inline-block;
   font-weight:normal;
	 font-size: 1.3rem;
   text-decoration: none;
	 margin-left: 5px;
	 padding-right: 8px;
}

.matchIndex .filter a.active {
   color: #FF5500;
}

.matchIndex .filter a:hover {
   background:;
   color: #FF5500;
}

.matchIndex li {
	list-style: none;
  background: #FFF;
  border-bottom: 1px solid #FFF;
}

.matchIndex li:nth-child(even){
	background: #E9E9E9;
}

.matchIndex li:last-child {
  border-bottom: none;
}

section.matchIndexBox {
   display: table;
   width:100%;
   height: 89px;
   overflow: hidden;
   _zoom: 1;
   padding:0;
   box-sizing:border-box;
   -webkit-transition: background linear 0.3s;
   -moz-transition: background linear 0.3s;
   -o-transition: background linear 0.3s;
   text-decoration:none;
   text-align:left;
   color: #222;
   margin-bottom: 1px;
}

a.matchIndexBox {
   display: table;
   width:100%;
   height: 89px;
   overflow: hidden;
   _zoom: 1;
   padding:0;
   box-sizing:border-box;
   -webkit-transition: background linear 0.3s;
   -moz-transition: background linear 0.3s;
   -o-transition: background linear 0.3s;
   text-decoration:none;
   text-align:left;
   color: #222;
}

a.matchIndexBox:hover {
	background-color: #FF5500;
	color: #FFF !important;
}

a.matchIndexBox div, section.matchIndexBox div {
   display: table-cell;
   vertical-align: middle;
}

.matchIndexNum {
	 display: inline;
   padding: 2px;
   text-align: center;
   width:28px;
	 font-family: 'oswald', 'Helvetica', 'arial', 'sans-serif';
   color: #FFF;
   vertical-align: middle;
   background: #FF5500;
}

.matchIndexNum span.team {
   display: none;
}

.matchIndexPht {
   width: 200px;

}

.matchIndexPht img {
   display: block;
   width:200px;
   height: auto;
   margin: 0;
   padding: 0;
}

.matchIndexDate {
   font-family: 'oswald', 'Helvetica', 'arial', 'sans-serif';
   font-size: 3rem;
   text-align: center;
   font-weight:300;
   width: 120px;
   text-align: center;
}

.matchIndexDateWeek {
   display: block;
   font-size: 1.4rem;
   margin-top: 2px;
   font-weight: normal;
}

.matchIndexTime  {
   font-family: 'oswald', 'Helvetica', 'arial', 'sans-serif';
   font-size: 3rem;
   text-align: center;
   font-weight:300;
   width: 120px;
   text-align: center;
}

.matchIndexComment  {
   display: block;
   font-size: 1.4rem;
   margin-top: 2px;
   font-weight: normal;
   text-align: center;
}

.matchIndexStadium {
   font-size: 1.3rem;
   width:300px;
   text-align: center;
}

.matchIndexStadium .matchIndexPref {
   display: block;
   border: 1px solid #999;
   padding: 3px;
   width:100px;
   margin: 0 auto 5px;
   text-align: center;
	 font-size: 1.2rem;
	 line-height: 1em;
}
.matchIndexScore {
   font-family: 'oswald', 'Helvetica', 'arial', 'sans-serif';
   font-size: 3rem;
   color: #FF5500;
   width: 150px;
   line-height: 1em;
   text-align: center;
}

.matchIndexTeam {
   font-size: 1.6rem;
	line-height: 1em;
}

.matchIndexGoal {
	text-align: center;
	width:260px;
	line-height: 1.6em;
}

@media screen and (max-width: 1200px){
	.matchIndexGoal {
		display: none !important;
	}
}

a.matchIndexBox:hover .matchIndexScore {
	color: #FFF !important;
}

a.matchIndexBox:hover .matchIndexStadium .matchIndexPref {
   border: 1px solid #FFF;
}


@media screen and (max-width: 767px){
	.matchIndex {
    margin: 35px auto;
	}

	.matchIndex div.filter {
    display: none;
	}
	.matchIndex li:nth-child(odd){
		background: #E9E9E9;
	}

	section.matchIndexBox {
	   display: block;
	   width:100%;
	   height: 74px;
		 background: #E9E9E9;
	}

	a.matchIndexBox {
	   display: block;
	   width:100%;
	   height: 74px;
	}

	a.matchIndexBox:hover {
		background-color: #FF5500;
		color: #FFF !important;
	}

	a.matchIndexBox div, section.matchIndexBox div {
	   display: block;
	   vertical-align: middle;
	}

	.matchIndexNum {
	   background: #FF5500;
	   padding: 5px;
	   width:100%;
		 font-family: 'oswald', 'Helvetica', 'arial', 'sans-serif';
	   color: #FFF;
	   vertical-align: middle;
		 text-align: left;
		 font-size: 1.3rem;
	}

	.matchIndexNum span.team {
	   display: inline;
		 padding-left: 10px;
	}

	.matchIndexPht img {
	   display: block;
	   width:200px;
	   height: auto;
	   margin: 0;
	   padding: 0;
	}

	.matchIndexDate {
    font-size: 1.4rem;
    width: 50px;
    float: left;
    padding-top: 10px;
	}

	.matchIndexDateWeek {
	   display: block;
	   font-size: 1.2rem;
	   margin-top: 2px;
	   font-weight: normal;
	}

	.matchIndexTime  {
    font-size: 1.4rem;
    width: 50px;
    float: left;
    padding-top: 10px;
	}

	.matchIndexComment  {
	   display: block;
	   font-size: 1.2rem;
	   margin-top: 2px;
	}
	.matchIndexScore {
		width: 40px;
		font-size: 1.4rem;
    float: left;
		padding-top: 20px;
	}
	.matchIndexTeam {
		display: none !important;
	}

	.matchIndexStadium {
    width: 190px;
    text-align: center;
    font-size: 10px;
    float: left;
    padding-top: 8px;
	}

	.matchIndexStadium .matchIndexPref {
		 font-size: 1rem;
		 padding: 3px;
	}
}

.cal_wrapper {
max-width: 1400px; /* 最大幅 */
min-width: 300px; /* 最小幅 */
margin: 90px auto;
}
.cal_wrapper h2  {
	font-size:13px;
	padding:0 0 20px;
	text-align:center;
	font-weight:normal;
}

.cal_wrapper h2  span.eng {
	font-family: 'oswald', 'arial','Verdana', sans-serif;
	font-size:30px;
	font-weight:300;
}
.googlecal {
position: relative;
padding-bottom: 100%; /* 縦横比 */
height: 0;
}
.googlecal iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
/* 画面幅が768px以上の場合の縦横比の指定 */
@media only screen and (min-width: 768px) {
.googlecal { padding-bottom: 75%; }
}













/* Detail page
----------------------------------------------------*/
.matchHeader {
	position: relative;
	text-align:left;
	width:100%;
	height: 601px;
	margin:0 auto;
	background-size:cover;
	background-repeat: no-repeat;
	background-position: center;
	overflow:hidden;
	_zoom:1;
}

.matchHeader:before {
  z-index: 400;
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
	background: url(../img/bg_grad-bottom.png) repeat-x bottom;
	}

.matchHeader img {
	width:100%;
	height:auto;
}

.matchHeaderTtl {
	z-index:500;
  position: absolute;
  right: 30px;
  left: 0;
  bottom: 40px;
  pointer-events: none;
	overflow: hidden;
	_zoom:1;
	text-shadow: 0 -1px 0 rgba(0,0,0,0.5);
}

.matchHeaderInner {
	max-width: 1400px;
	width: 100%;
	padding: 0 15px;
	box-sizing: border-box;
	margin-left: auto;
	margin-right: auto;

}

.matchHeader h1 {
	font-weight:normal;
	padding-top: 10px;
	font-size: 3rem;
	font-family: 'oswald', 'Helvetica', 'arial', 'sans-serif';
	margin-bottom: 10px;
}

.matchHeader .matchHeaderInfo span {
	line-height:1.4em;
}

.matchHeader span.name {
	font-size: 1.6rem;
	margin-bottom: 20px;
	font-weight: bold;
	line-height: 2em;
}

.matchHeader span.nameEng {
	font-size:1.6rem;
	font-family: 'oswald', 'Helvetica', 'arial', 'sans-serif';
}

.matchDetail h2 {
  font-size: 1.3rem;
  line-height: 1.8em;
  margin-bottom: 30px;
  text-align: center;
}

.matchDetail h2 span.eng {
  font-size: 2rem;
	font-family: 'oswald', 'Helvetica', 'arial', 'sans-serif';
  text-align: center;
  text-transform: uppercase;
}

@media screen and (min-width: 768px) and (max-width: 1023px){
	.matchHeader {
		height: 500px;
	}
	.matchHeaderTtl {
	    bottom: 20px;
	}
	.matchHeader h1 {
			font-size:1.8rem;
	}
	.matchHeader span.name {
		font-size:1.2rem;
	}
	.matchHeader span.nameEng {
		font-size:1.3rem;
	}

}

@media screen and (max-width: 767px){
	.matchHeader {
		height: 300px;
	}
	.matchHeaderTtl {
	    bottom: 20px;
	}
	.matchHeader h1 {
			font-size: 1.8rem;
	}
	.matchHeader span.name {
		font-size: 1.2rem;
	}
	.matchHeader span.nameEng {
		font-size: 1.3rem;
	}
}



.matchScore .matchTtl {
  text-align: center;
  font-size: 1.4rem;
  line-height: 1.6em;
  font-family: 'oswald', 'arial','Verdana', sans-serif;
  margin-bottom: 30px;
}

.matchScore .matchResult {
  display: table;
  width: 100%;
  margin-bottom: 30px;
}

.matchScore .matchResult > div {
  display: table-cell;
}

.matchScore .matchResult .barba {
  text-align: left;
  font-size: 2rem;
  font-weight: 600;
  vertical-align: middle;
  width:40%;
}

.matchScore .matchResult .barba img {
	width:80px;
	height:auto;
	vertical-align:middle;
	margin-right:15px;
}

.matchScore .matchResult .score {
  text-align: center;
  font-size: 6rem;
  font-family: 'oswald', 'arial','Verdana', sans-serif;
  font-weight: 300;
  letter-spacing: 0.1em;
  vertical-align: middle;
  width:20%;
}

.matchScore .matchResult .team {
  text-align: right;
  font-size: 2rem;
  font-weight: 600;
  vertical-align: middle;
  width:40%;
}

.matchScore .matchGoal {
  display: table;
  width: 100%;
  border-top: 1px solid #666;
  padding-top: 30px;
  margin-bottom: 60px;
}

.matchScore .matchGoal > div {
  display: table-cell;
}

.matchScore .matchGoal .barba {
  text-align: left;
  vertical-align: top;
  width:40%;
}

.matchScore .matchGoal .score {
  text-align: center;
  font-size: 2.4rem;
  font-family: 'oswald', 'arial','Verdana', sans-serif;
  font-weight: 400;
  vertical-align: top;
  width:20%;
}

.matchScore .matchGoal .team {
  text-align: right;
  vertical-align: top;
  width:40%;
}

.matchScore .matchGoal ul {
  padding-left: 0;
}

.matchScore .matchGoal ul li {
  list-style: none;
  line-height: 1.8em;
}

@media screen and (max-width: 767px){
  .matchScore .matchResult .barba {
    width:40%;
  }

  .matchScore .matchResult .barba span {
    display: none;
  }

  .matchScore .matchResult .barba img {
  	width:60px !important;
  }

  .matchScore .matchResult .score {
    text-align: center;
    font-size: 3rem;
    font-family: 'oswald', 'arial','Verdana', sans-serif;
    font-weight: 300;
    letter-spacing: 0.1em;
    vertical-align: middle;
    width:20%;
  }
  .matchScore .matchResult .team {
    text-align: right;
    font-weight: 600;
    vertical-align: middle;
    width:40%;
    font-size: 1.4rem;
  }



}






.matchTimeline {
  margin-bottom: 60px;
}

.matchTimeline ul.timeline {
  padding-left: 0;
}

.matchTimeline ul.timeline li {
  list-style: none;
  display: block;
  background: #222;
  padding: 15px;
  margin-bottom: 1px;
  line-height: 2em;
}

.matchTimeline ul.timeline li div.num {
  float: left;
  width: 45px;
}

.matchTimeline ul.timeline li div.timelineTxt {
}

.matchTimeline .fb-video {
  width: 100%;
  max-width: 500px;
  margin-left: 45px;
  margin-top: 15px;
  margin-bottom: 8px
}


@media screen and (max-width: 767px){
  .matchTimeline ul.timeline li {
    padding: 7px;
  }
  .matchTimeline .fb-video {
    margin-left: 0;
    margin-bottom: 15px;
  }
}




.matchReview {
  max-width: 800px;
  margin: auto;
  margin-bottom: 60px;
}

.matchVideo .youtube {
    position: relative;
    width: 100%;
    margin: auto;
    padding-top: 56.25%;
    margin-bottom: 45px;
}

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


.matchReview article {
}

.matchReview article p {
  margin-bottom: 1em;
  line-height: 2em;
}







.matchMembers {
  margin-bottom: 60px;
  overflow: hidden;
  _zoom: 1;
}

.membersStatus {
  float: left;
  width: calc(100% - 445px) ;
}

.matchFormtion {
  width:400px;
  float: right;
}

.membersBox {
  display: table;
  width: 100%;
  background: #222;
  margin-bottom: 1px
}

.membersBox.on {
  background: #FF5500;
}

.membersBox span {
  display: table-cell;
  padding: 1px 8px;
  vertical-align: middle;
  box-sizing: border-box;
  font-size: 1.3rem;
  color: #AAA;
}

.membersBox a {
  display: table-cell;
  padding: 1px 8px;
  vertical-align: middle;
  box-sizing: border-box;
  font-size: 1.3rem;
  color: #AAA;
}

.membersBox span.img {
  width: 47px;
  line-height: 0;
  padding: 1px;
}

.membersBox.on span {
  color: #FFF;
}

.membersBox.on a {
  color: #FFF;
}

.membersBox span.img img {
  width: 45px;
  height: auto;
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
}

.membersBox.on span.img img {
  width: 45px;
  height: auto;
  -webkit-filter: grayscale(0);
  -moz-filter: grayscale(0);
  -ms-filter: grayscale(0);
  -o-filter: grayscale(0);
  filter: grayscale(0);
}

.membersBox span.num, .membersBox span.pos  {
  width: 60px;
  text-align: center;
  font-family: 'oswald', 'arial','Verdana', sans-serif;
}

.membersBox span.apps, .membersBox span.goal {
  width: 45px;
  text-align: center;
}

.membersBox span.apps, .membersBox span.goals {
  width: 75px;
  text-align: center;
}

.matchMembers .sample {
  font-size: 1.2rem !important;
  font-family: 'oswald', 'arial','Verdana', sans-serif;
  text-transform: uppercase;
  background: none;
}

.matchMembers .sample span {
  padding: 8px 8px;
}

@media screen and (max-width: 999px){
  .membersStatus {
    float: none;
    width: 100%;
    margin-bottom: 30px;
  }

  .matchFormtion {
    width: 100%;
    max-width:400px;
    float: none;
    margin: auto;
  }

  .membersBox span.img {
    width: 45px;
    line-height: 0;
    padding: 1px;
  }

  .membersBox span.img img {
    width: 43px;
    height: auto;
  }

  .membersBox span.num,.membersBox span.pos {
    width: 35px;
    text-align: center;
  }

  .membersBox span.apps, .membersBox span.goal {
    width: 30px;
    text-align: center;
  }

  .membersBox span.apps, .membersBox span.goals {
    width: 60px;
    text-align: center;
  }

  .matchMembers .sample {
    font-size: 1.2rem !important;
    font-family: 'oswald', 'arial','Verdana', sans-serif;
    text-transform: uppercase;
  }

  .matchMembers .sample span {
    padding: 4px 8px;
  }
}






.formation {
	background:url(../matches/img/bg_formation.jpg) center;
	width:400px;
	height:260px;
	position:relative;
	margin-bottom:15px;
}

.matchFormtion h3 {
  font-weight: 600;
  line-height: 2em;
  font-size: 1.5rem;
  padding-top: 15px;
  margin-bottom: 4px;
}

.formation div {
	position:absolute;
	text-align:center;
	width:60px;

}

.formation div img{
	width:35px;
	margin:2px;
	text-align:center;
	border-radius: 50%;
}

.formation div span {
	background-color: rgba( 17, 24, 55, 0.90 );
	width:30px;
  height: 30px;
	text-align:center;
  border-radius: 50%;
  font-weight: 400;
  font-size: 1.5rem;
  display: block;
  padding-top: 6px;
  font-family: 'oswald', 'arial','Verdana', sans-serif;
}

.formation .GK {
	top:117px;
	left:15px;
}

.formation .DF01 {
	bottom:15px;
	left:110px;
}

.formation .DF02 {
	bottom:74px;
	left:80px;
}

.formation .DF03 {
	top:74px;
	left:80px;
}

.formation .DF04 {
	top:15px;
	left:110px;
}

.formation .DF21 {
	bottom:40px;
	left:80px;
}

.formation .DF22 {
	top:117px;
	left:80px;
}

.formation .DF23 {
	top:40px;
	left:80px;
}

.formation .MF01 {
	bottom:74px;
	left:170px;
}

.formation .MF02 {
	top:74px;
	left:170px;
}

.formation .MF03 {
	bottom:15px;
	left:200px;
}

.formation .MF04 {
	top:15px;
	left:200px;
}
.formation .MF21 {
	bottom:74px;
	left:150px;
}

.formation .MF22 {
	top:74px;
	left:150px;
}

.formation .MF23 {
	bottom:40px;
	left:200px;
}

.formation .MF24 {
	top:117px;
	left:200px;
}

.formation .MF25 {
	top:40px;
	left:200px;
}


.formation .FW01 {
	bottom:74px;
	right:70px;
}

.formation .FW02 {
	top:74px;
	right:70px;
}

.formation .MF11 {
	bottom:40px;
	left:185px;
}

.formation .MF12 {
	top:117px;
	left:185px;
}

.formation .MF13 {
	top:40px;
	left:185px;
}

.formation .FW11 {
  bottom:48px;
	right:90px;
}

.formation .FW12 {
	top:48px;
	right:90px;
}

.formation .FW13 {
	top:117px;
	right:50px;
}

.matchesRecord {
  margin-bottom: 60px;
}

.matchesRecord p {
  line-height: 1.6em;
  font-size: 1.4rem;
  text-align: center;
}

a.matchAlbum {
  display: block;
  width: 100%;
  max-width:400px;
  background: #FFF;
  padding: 15px;
  color: #111838;
  font-weight: 600;
  border-radius: 40px;
  margin: 45px auto;
  text-align: center;
  text-decoration: none;
}

a.matchAlbum:hover {
  background: #FF5500;
  color: #FFF;
  text-decoration: none;
}