@charset "utf-8";

body { font-family: "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,  "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-weight: normal; color: #000000; }

.serif { font-family: 'Noto Serif JP', serif; font-weight: bold; font-size: 4.2rem;}

.pcOnly {}
.spOnly { display: none;}
@media only screen and (max-width:800px){
  .pcOnly { display: none;}
  .spOnly { display: block;}
  
}

a:hover { opacity: 0.5;}

.backColor { background-image: url(images/red-back.jpg); background-repeat: repeat; background-position: 0 0; position: relative;}
.backColor::after { content: ""; width: 50%; height: 100%; position: absolute; top: 0; left: 50%; z-index: -1; background-image: url(images/black-back.jpg); background-repeat: repeat; background-position: 50% 0; }
.inner { width: 100%; max-width: 800px; margin: 0 auto; background-color: #e6e6e6;}

.contentsInner { padding: 50px;}

@media only screen and (max-width:1080px){
  .inner { width: calc(100% - 60px);}
}
@media only screen and (max-width:800px){
  .inner { max-width: 400px;}
}
0

@media only screen and (max-width:800px){
  .serif { font-size: 4.0rem;}
  .contentsInner { padding: 5%;}
}
@media only screen and (max-width:800px){
  .serif { font-size: 2.5rem;}
}

.photo img { width: 100%; height: auto;}
.mt5p { margin-top: 5%;}
.mb5p { margin-bottom: 5%;}

.wrapper { width: 100%; max-width: 1000px; margin: 0 auto; position: relative; border: solid 1px #fff; border-top: none; border-bottom: none;}
.wrapper::before { content: ""; width: 85px; height: 99%; position: absolute; top: 10px; left: 5px; background: url(images/matchdayprogram.png) center top; background-size: contain; background-repeat: repeat-y;}
.wrapper::after { content: ""; width: 85px; height: calc(100% - 840px); position: absolute; top: 840px; right: 5px; background: url(images/matchdayprogram.png) no-repeat center top; z-index: 0; background-size: contain; background-repeat: repeat-y;}

/*.top .wrapper::before { background: url(images/matchday.png) no-repeat center top; background-size: contain;}
.top .wrapper::after { background: url(images/program.png) no-repeat center bottom; background-size: contain;}*/

@media only screen and (max-width:1080px){
  .wrapper::before { width:calc( (100% - 816px) / 2 ); min-width: 20px;}
  .wrapper::after { width:calc( (100% - 816px) / 2 ); min-width: 20px;}
}
@media only screen and (max-width:800px){
  .wrapper { max-width: 450px;}
  .wrapper::before { background-image: url(images/matchdayprogram-sp.png);}
  .wrapper::after { height: calc(100% - 300px); top: 300px; background-image: url(images/matchdayprogram-sp.png);}
}

/*各ページ共有パーツ*/
.headlineBoldSmall { font-size: 2.4rem; font-weight: bold; /*margin-top: 30px;*/}
.headlineSerifBig { font-size: 5.7rem; font-weight: bold; line-height: 1;}
.headlineRedBack { font-size: 1.6rem; color: #fff; text-align: center; background-image: url(images/headline-red.png); background-repeat: no-repeat; background-position: 50% bottom; line-height: 1.2; position: relative; padding-bottom: 3px; margin-top: 50px; margin-bottom: 20px;}
.headlineRedBack::before { content: ""; width: 100%; height: 1px; background-color: #181000; position: absolute; bottom: 25px; left: 0;}
.headlineRedBack .en { font-size: 1.4rem; color: #bd001d; position: relative; z-index: 5;}

@media only screen and (max-width:800px){
  .headlineSerifBig { font-size: 4.2rem;}
}
@media only screen and (max-width:800px){
  .headlineSerifBig { font-size: 3.4rem; margin-bottom: 30px; line-height: 1.3;}
  .headlineRedBack { font-size: 1.4rem; line-height: 1.1; background-size: 280px;}
  .headlineRedBack::before { bottom: 20px;}
}

.headerArea .inner { position: relative;}
/*ハンバーガーメニュー*/
.hamburger { display: block; width: 55px; height: 55px; cursor: pointer; text-align: center; z-index:11; /*-webkit-transition: 0.6s ease-in-out; -moz-transition:0.6s ease-in-out; transition:0.6s ease-in-out;*/ background-color: #fff; border-radius: 5px; /*position: absolute; right: 15px;*/ position: fixed; right: calc(50% - 385px); top: 15px;}
.hamburger span {display: block; position: absolute; width: 36px; height: 3px ; left: 9px; background :#000; -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out;}
.hamburger span:nth-child(1) { top: 15px;}
.hamburger span:nth-child(2) { top: 27px;}
.hamburger span:nth-child(3) { top: 39px;}
.hamburger.active span:nth-child(1) { top: 27px; left: 9px;-webkit-transform: rotate(-45deg);-moz-transform : rotate(-45deg);transform: rotate(-45deg);}
.hamburger.active span:nth-child(2),
.hamburger.active span:nth-child(3) { top: 27px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg);}
.gMenu { background-image: url(images/top-back.png),url(images/logo.svg); background-repeat: no-repeat; background-size: cover,30%; background-position: top left, 50%; background-color: #E6E6E6; position: relative; z-index: 10; position: fixed; top: -100%; left: 0; width: 100%; height: 100%; padding: 0%; transition: 0.5s ease-in-out; box-shadow: 0 0 5px #999; overflow: hidden;}
.gMenu.active { display: block; overflow-y: auto; padding: 2%; transition: 0.5s ease-in-out; top: 0;}
.gMenuLogo { margin-right: auto; padding: 20px 20px 50px 0px; max-width: 500px;}
.menuList { width: 90%; max-width: 1000px; margin: 5% auto 2%;}
.menuList li { font-weight: bold; padding-bottom: 20px;}
.menuList li a { display: inline-block; font-size: 1.8rem; font-weight: bold; color: #fff; background: #000; padding: 10px 40px 10px 10px; position: relative;}
.menuList li a::after { content: ""; width: 15px; height: 13px; background-image: url(images/arrow.svg); background-repeat: no-repeat; background-position: center; position: absolute; right: 12px; top: 57%; transform: translateY(-50%);}
.menuList li a:hover { background-color: #b80016; opacity: 1;}
.menuList li a .small { font-size: 1.2rem; margin-left: 0.5em;}

.footerArea { width: 100%; max-width: 1100px; margin: 0 auto; position: relative; z-index: 1;}
.footerArea .inner { padding-top: 4%; padding-bottom: 180px; padding-right: 3%; border-top: solid 1px #000;}
.footerTextArea { position: relative; z-index: 1;}
.footerArea::after { content: ""; width: 100%; height: 290px; position: absolute; bottom: 0; left: 0; background-image: url(images/footer.png); background-repeat: no-repeat; background-size: contain; background-position: bottom;}
.footerArea p { font-size: 1.2rem;}
.footerMenu { gap: 1em;}
.footerMenu li + li { border-left: solid 1px #949494; padding-left: 1em;}
.footerMenu a { font-size: 1.2rem; line-height: 1.4;}

@media only screen and (max-width:1080px){
  .hamburger { right: calc(((100% - 800px) / 2 ) + 15px);}
}
@media only screen and (max-width:880px){
  .hamburger { right: calc(0% + 55px);}
}
@media only screen and (max-width:800px){
  .hamburger { right: 7%;}
}
@media only screen and (max-width:800px){
  .hamburger { position: fixed; width: 40px; height: 40px; right: 2%; top: 1%;}
  .hamburger span { width: 22px;}
  .hamburger span:nth-child(1) { top: 10px;}
  .hamburger span:nth-child(2) { top: 20px;}
  .hamburger span:nth-child(3) { top: 30px;}
  .hamburger.active span:nth-child(1) { top: 20px;}
  .hamburger.active span:nth-child(2) { top: 20px;}
  .hamburger.active span:nth-child(3) { top: 20px;}

  .footerArea .inner { padding: 4% 5% 100px; }
  .footerArea .textR { text-align: left;}
  .footerMenu { justify-content: center; margin-bottom: 10px;}
  .footerMenu li { width: 48%; text-align: center; }
  .footerMenu li:nth-child(odd) { border: none;}
}


.box { background: url(images/title-back.png); background-repeat: no-repeat; background-position: top left;}
.box + .box { border-top: solid 1px #181000;}
.text + .text { margin-top: 10px;}
.ad { border: solid 1px #181000; border-left: none; border-right: none; background: #fff;}
.ad + .ad { border-top: none;}
.top .whiteLine { gap: 20px 0;}
.adBottom { border-bottom: none;}
.ad2ColumnItem {width: 320px; height: 320px;}
.add2item { display: flex; flex-wrap: wrap; gap: 20px 0;}
.whiteLine { padding: 20px; background: #fff;}
.whiteLine img { box-shadow: 0 0 5px #ccc;}
@media only screen and (max-width:800px){
  .box { background-size: 80%;}
  .text { line-height: 2;}
  .text + .text { margin-top: 20px;}
  .whiteLine { gap: 20px 0; padding: 5%;}
  .ad .flex { display: block;}
  .ad2ColumnItem { display: block; width: 100%; height: auto;}
  .ad2ColumnItem + .ad2ColumnItem { margin-top: 20px;}
}

/*topページ*/
.topInner { background-image: url(images/top-back.png),url(images/logo.svg); background-repeat: no-repeat; background-size: cover,56%; background-position: top left, 50% 300px; position: relative;}
.leftArea { width: 55%; max-width: 455px; padding: 2% 0 5% 5%; position: relative;}
.seasonTitle { display: flex; justify-content: flex-start; gap: 10px;}

/*ルヴァンのとき*/
.L_seasonTitle { display: block;margin-bottom: 20px; }
.L_site-title { margin-bottom: 10px; }
.L_gameNumber { width: auto; height: 39px; }
.L_rightArea { padding: 13% 5% 12% 0; }
.L_match { position: absolute; left: -5%; width: 457px; bottom: 8%; }
.L_topSlogan { bottom: 23px; }


.j1Logo { width: 64%;}
.gameNumber { width: 30%; margin-top: 10px;}
.topDay { width: 90%; max-width: 260px; margin-top: 8%;}
.topPlace { width: 63%; max-width: 105px; margin-top: 1%;}
.topTime { width: 50%; max-width: 148px; margin-top: 3%;}
.topMenu { position: relative; z-index: 1;}
.topMenu li { padding: 5px 0;}
.topMenu li a { display: inline-block; font-size: 1.8rem; font-weight: bold; color: #fff; background: #000; padding: 2px 40px 7px 10px; position: relative;}
.topMenu li a::after { content: ""; width: 15px; height: 13px; background-image: url(images/arrow.svg); background-repeat: no-repeat; background-position: center; position: absolute; right: 12px; top: 57%; transform: translateY(-50%);}
.topMenu li a:hover { background-color: #b80016; opacity: 1;}
.topMenu li a .small { display: block; font-size: 1.0rem; font-weight: normal;}
.rightArea { width: 45%; max-width: 345px; padding: 16% 5% 12% 0; background-image: url(images/top-right-back.png); background-repeat: no-repeat; background-position: top left; background-size: contain; position: relative;}
.matchCard { position: absolute; right: -2%; width: 56%; bottom: 11.5%;}
.matchCard img { width: 100%; height: auto;}
.topSlogan { /*position: absolute; width: 29%; left: 5%; top: 300px;*/ width: 210px; position: absolute; top: 275px; left: 5%;}
.topPlayer { width: 80%; margin-top: -44%;}
.topPlayer img { width: 100%; height: auto;}
.topBanner { width: 80%; margin-top: 35%; margin-left: -6%;}
.topBanner img { width: 100%; height: auto;}
.thanksMatch {width: 39%; position: absolute; bottom: 1%; right: 4.2%;}
.fest { position: absolute; top: 210px; left: 35px; }

.linkBanner { display: block; width: 100%; max-width: 800px; margin: 0 auto; padding: 20px; text-align: center; border-top: solid 1px #181000; background-color: #fff;}

@media only screen and (max-width:800px){
  .leftArea { width: 46%; padding-left: 3%; padding-top: 5%;}
  .gameNumber { margin-top: 0;}
  .rightArea { width: 53%; padding-top: 14%;}
  .seasonTitle { margin-bottom: 20px; gap: 5px;}
  .topDay { width: 75%; max-width: none; margin-top: 10%; }
  .topDay img { width: 100%; }
  .topTime { width: 50%; max-width: none; line-height: 1;}
  .topTime img { width: 100%; }
  .topPlace { width: 30%; max-width: none; line-height: 1;}
  .topSlogan { width: 25%; top: 43%; left: 10%;}
  .matchCard { width: 59%; right: auto; bottom: 55%; left: -5%;}
  .topBanner { width: 90%; margin-top: 160px; margin-left: -3px;}
  .topPlayer { margin-top: -55%;}
  .topPlayer2 { margin-top: -50%;}
  .thanksMatch {width: 40%; bottom: 1%; right: 5.5%;}
  .fest { width: 40px; top: 95px; left: 5px;}
  .fest img { width: 100%; height: auto;}

  .topMenu { position: relative; width: 120%; z-index: 1;}
  .topMenu li { padding-top: 0;}
  .topMenu li a { font-size: 1.0rem;}
  .topMenu li a .small {font-size: 0.9rem;}

  /*ルヴァン*/
  .L_seasonTitle { margin-bottom: 0; gap: 5px;}
  .L_site-title { width: 70%; }
  .L_logo1 { width: 40%; }
  .L_logo2 { width: 20%; }
  .L_gameNumber { margin-top: 0.7rem; width:45%; }
  .L_match { bottom: 55%!important;}

}

/*スタジアムガイド*/
#stadium-guide .contentsInner { padding: 50px 25px;}
.mapActiveBack { display: block; transition: 0.5s; opacity: 0; z-index: 1; position: absolute; top: 0; left: 0; position: fixed; background: rgba(0,0,0,0.5); transform: scale(0); }
.mapActiveBack.active { transition: 0.5s; opacity: 1;width: 100vw; height: 100vh; transform: scale(1); }
.guideText { font-weight: bold; margin-top: 22px;}
.floorBox { position: relative;}
.floorBox area { cursor: pointer;}

/*.mapItem { position: absolute; width: 400px; height: 400px; background: #fff; padding: 85px 90px; z-index: -1; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(0.8); transition: 0.5s; opacity: 0; }
.mapItem.active { display: block; transition: 0.5s; opacity: 1; transform: translate(-50%,-50%) scale(1); z-index: 5;}*/
.mapItem {display: block; transition: 0.5s; opacity: 0; z-index: -1; position: absolute; top: 0; left: 0; position: fixed; background: rgba(0,0,0,0.5); width: 100vw; height: 100vh; /*transform-origin: 0 0; transform: scale(0);*/}
.mapItem.active { transition: 0.5s; opacity: 1; z-index: 5;/* transform: scale(1);*/}
.mapItemInner { position: absolute; width: 355px; height: auto; background: #fff; padding: 50px 45px; z-index: -1; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(0.8); transition: 0.5s;}
.active .mapItemInner { transform:translate(-50%,-50%) scale(1); transition: 0.5s;}
.mapItemClose { position: absolute; right: 0; top: 0; font-size: 4.0rem; line-height: 1; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; cursor: pointer;}

.mapItemPlaceBox { align-items: center; justify-content: flex-start; gap: 1em; padding: 10px 0;}
.bigNumber { width: 45px; font-size: 4.0rem; font-weight: bold; line-height: 1.0; padding-bottom: 7px;}
.bigNumberIcon { width: 45px; height: 45px;}
.mapItemPlace { width: calc(100% - 55px); font-size: 1.0rem; line-height: 1.5;}
.mapItemTitle { line-height: 1.5; padding: 10px 0; font-weight: bold; border: solid 1px #000; border-left: none; border-right: none;}
.mapItemText { font-size: 1.0rem; line-height: 1.5; padding: 10px 0;}
.mapItemText p { font-size: 1.0rem; line-height: 1.5;}

.gideText { width: 80%; margin: 0 auto;}

.mapItemContainer { justify-content: center; gap: 2em; margin-top: 50px;}
.mapItemBox { display: block; position: static; background: none; transform: none; padding: 0; width: 225px; height: auto; border: solid 1px #000; border-left: none; border-right: none;}

.mapFes .photo { width: 750px; margin: 0 auto;}


@media only screen and (max-width:800px){
  .guide .contentsInner { padding: 5%;}
  .mapItemBox { width: 100%; max-width: 240px;}
  .mapItemInner{ width: 80%; height: auto; padding: 40px; }
  .mapItemClose { color: #fff; right: 0; top: -50px;}
  .gideText { width: 100%; margin: 0 auto;}

  .mapFes .photo { width: 90%; margin: 0 auto;}

}

/*Pick up Player*/
#player .contentsInner { position: relative;}
.playerInfo { align-items: center; gap: 1em; margin-top: 50px;}
.position { width: auto; height: 73px;}
.position img { width: auto; height: 100%;}
.line { display: block; width: 2px; height: 83px; background-color: #000;}
.enName { font-size: 3.9rem; line-height: 1.1;}
.playerName { font-size: 8.5rem;}
.spec { font-size: 1.6rem; margin-top: 20px;}
.playerText { margin-top: 25px;}
.playerImg {  position: absolute; right: 0%; bottom: 0; width: 39%;}
/*選手が右側のとき使う*/
.playerTextRight { margin-left: 280px;}


@media only screen and (max-width:800px){
  .playerImg { width: 40%;}
}
@media only screen and (max-width:800px){
  .position { height: 33px;}
  .line { height: 40px;}
  .enName { font-size: 1.8rem;}
  .player .box { border: none;}
  .playerName { font-size: 3.0rem; margin: 10px 0; line-height: 1.2;}
  .playerText { width: 100%; margin-top: 85px;}
  .playerImg { top: 85px; bottom: auto; left: auto; right: 5px; width: 100%; max-width: 125px;}

  .playerTextRight { margin-left: 0;}
}

/*イベント*/
.eventItem { margin-top: 50px; }
.eventItem + .eventItem { margin-top: 80px; }
.eventDate { font-size: 1.2rem; font-weight: bold; text-align: right;}
.eventImg { margin: 10px 0;}
.eventTitle { font-size: 1.8rem; font-weight: bold; margin-bottom: 10px;}
.eventBtn { width: 50%; max-width: 300px; margin: 0 auto; text-align: center; margin-top: 14px;} 
.eventBtn a { display: block; color: #D5000D; padding: 5px; border: solid 2px #D5000D; font-weight: bold;} 
/*.eventBtn a:hover { background: #000; color: #fff; border-color: #000; opacity: 1;}*/

/*パートナー*/
#partners .partnerItem img { width: 100%; height: 100%; object-fit: contain;}
.officialTop { gap: 50px 2em;}
.officialTop .partnerItem01 { width: 202px; height: 67px; text-align: center;}
.officialTop .partnerItem02 { width: 165px; height: 73px; text-align: center;}
.officialTop .partnerItem03 { width: 215px; height: 60px; text-align: center;}
.official { gap: 1em; align-items: center;}
.official .partnerItem { width: 23%; height: 33px;}
.official .partnerItem01 { height: 43px;}
.club { gap: 8px;}
.club .partnerItem { width: 110px;}
.supply { gap: 1em;}
.supply .partnerItem { width: 110px;}
.asiaPromotion { gap: 1em;}
.asiaPromotion .partnerItem { width: 115px; height: 22px; text-align: center;}
.asiaPromotion .partnerItem a { font-size: 1.2rem;}
.project { gap: 1em;}
.project p { font-size: 1.2rem;}

@media only screen and (max-width:800px){
  .officialTop .partnerItem { width: 46%;}
  .official .partnerItem { width: 30%;}
  .club { justify-content: center; gap: 8px;}
  .club .partnerItem { width: 22%; line-height: 1.0;}
  .supply .partnerItem { width: 22%; line-height: 1.0;}
  .asiaPromotion .partnerItem { width: 22%; height: 18px; line-height: 1.2;}

}

.taikoban { width: 285px; position: absolute; right: 20px; top: 20px; background: #fff; padding: 20px; border-radius: 20px;}
@media only screen and (max-width:800px){
  .taikoban { position: static; width: 90%; max-width: 255px; margin: 20px auto;}
  #stadium-guide .contentsInner { padding: 5% 5% 20px;}
}

.FridayNightMatch-area { margin-top: 1rem; justify-content: flex-start; }
.fridayNightEmblem { width: 70px; height: auto; margin-right: 1rem; }
@media only screen and (max-width:800px){
.fridayNightEmblem { width: 30%; height: auto; margin-right: 1rem; }
.FridayNightMatch-area div { width: 50%; }
.FridayNightMatch-area div p { width: 100%; }
}