@charset "UTF-8";
@import url("/https/dragons.jp/js/slick/slick.css");
@import url("/https/dragons.jp/js/slick/slick-theme.css");

/*COMMON*/
ul { margin:0; padding:0; list-style:none }
section h2 { border:none; background-color:transparent; color:#FFF; text-align:center; font-size:30px; padding:0 }
section#news,
section#pickup,
section#sponsor { background:#FFF; padding:40px 10px }
section#news h2,
section#pickup h2,
section#sponsor h2,
section#premium h2 { color:#00418e }
.f60 { font-size:60% }
*[class^="button-"] a { display:flex; align-items:center; justify-content: center; position:relative }
*[class^="button-"] a:after { font-family: "Font Awesome 6 Free"; font-weight:900; content:"\f105"; position:absolute; right:15px; font-size:1.4em }

/*ヘッドライン*/
section#headline { width:100%; max-width:1040px; margin:auto }
section#headline ul { margin:0; padding: 20px 0 }
section#headline .note { border:#999 1px solid; margin:min(3vw,1em) 0; padding:min(1.8vw,0.8em); }
section#headline .note + ul { padding-top:min(1vw,8px) }
/*ショートカット（2026年6月設置）*/
#shortcut { display: none }
/*スライダー*/
:root { --sliderBg-color: #003B90 }
section#sliderWrap { background-color:var(--sliderBg-color); padding-top:30px; margin-bottom:0 }
section#sliderWrap li a { text-decoration:none }
section#sliderWrap img { width: 100%; max-width:960px; max-height:540px }
section#sliderWrap li .caption { background-color:#052346; padding:10px; color:#FFF }
section#sliderWrap li .caption p { margin:0 }
section#sliderWrap .slider { background: #fff url('/https/dragons.jp/js/slick/ajax-loader.gif') center center no-repeat; min-height: 540px; max-width: 960px; margin: 0 auto }
section#sliderWrap .slider.slick-initialized { background: inherit; min-height: inherit }
section#sliderWrap .slider > li { display: none }
section#sliderWrap .slick-initialized .slick-slide { display: block }
section#sliderWrap .slick-slider { width:100%; max-width:960px; margin-left:auto; margin-right:auto }
section#sliderWrap .slick-dots { bottom:0; height:37px }
section#sliderWrap .slick-dotted.slick-slider { margin-bottom:0; padding-bottom:40px }
section#sliderWrap .slick-dots li { width:5%; height:5px }
section#sliderWrap .slick-prev,
section#sliderWrap .slick-next { width:40px; height:40px }
/*SLICK OPTION*/
.slick-prev,
.slick-next { top: 270px; z-index:1; width:20px; height:20px }
.slick-prev { left:-5% }
.slick-next { right:-5% }
.slick-prev:before,
.slick-next:before { font-family: "Font Awesome 6 Free"; font-weight:900; color:#FFF; font-size:20px }
.slick-prev:before { content:"\f104" }
.slick-next:before { content:"\f105" }
.slick-dots li button,
.slick-dots li.slick-active button:before,
.slick-dots li button:before { width:100%; height:5px; padding:0 }
.slick-dots li.slick-active button:before { background-color:#FFF; opacity: 1; content:"" }
.slick-dots li button:before { background-color:#FFF; content:"" }
.slick-slide img { width:100% }
/*3つ並びのとき*/
section ul.slick3 { width: 100%; max-width:1040px; margin:auto }
section ul.slick3 li { padding:5px; text-align:center; display: none }
section ul.slick3 li a { color:#FFF; font-size:min(3vw,14px) }
section ul.slick3 li p { margin:5px 0 }
section .slick3 .slick-prev,
section .slick3 .slick-next { top:50% }
section .slick3 .slick-prev { left:-25px }
section .slick3 .slick-next { right:-25px }
section .slick3 .slick-slider.slick-initialized li { display: block }
section .slick3 .slick-prev:before,
section .slick3 .slick-next:before { opacity:1; color:#003b90 }
/*4つ並びのとき*/
section ul.slick4 { width: 100%; max-width:1040px; margin:auto }
section ul.slick4 li { padding:5px; text-align:center; display: none }
section ul.slick4 li a { color:#FFF; font-size:min(3vw,14px) }
section ul.slick4 li p { margin:5px 0 }
section .slick4 .slick-prev,
section .slick4 .slick-next { top:50% }
section .slick4 .slick-prev { left:-25px }
section .slick4 .slick-next { right:-25px }
section .slick4 .slick-slider.slick-initialized li { display: block }
section .slick4 .slick-prev:before,
section .slick4 .slick-next:before { opacity:0.3 }
/*スーパーバナー*/
section#adSPbnr { width:100%; max-width:1040px; margin-left:auto; margin-right:auto; padding:30px 0; box-sizing:border-box; text-align:center }
/*試合情報*/
section#game { background-image: url(../image/2023/topGameBg.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; padding:40px 10px }
section#game > div { width:100%; max-width:1040px; margin-left:auto; margin-right:auto; box-sizing:border-box; background-color:#747474; display:flex; justify-content: space-between }
.gameLive,
.gameStarter { background-color: #3d3d46; box-sizing: border-box }
.gameLive { width:57% }
.starterWrap { width:42% }
.gameLive .liveHead { background-color: #052346; text-align: center; position: relative; padding-top: 10px; border-bottom: #0076ec 2px solid }
.gameLive .liveHead:after {
  content: ""; display: block; width: 100%; height: 2px; position: absolute; bottom: 0;
  background: linear-gradient(left, #002453 0%, #003F93 25%, #0670FF 50%, #003F93 75%, #002453 100%)
}
.gameLive .liveHead h2,
.gameStarter h2 {
  border:none;
  padding: 0;
  min-height: auto;
  font-size: 16px;
  color: #FFF;
  line-height: 1.2;
  background-color: transparent;
  margin-bottom: 5px
}
.gameLive .liveHead p { color: #FFF; margin-bottom: 0!important }
.gameLive a { display: block; padding-top: 10px }
.gameLive a:hover { text-decoration: none; background-color: rgba(255,255,255,0.1) }
.gameLive table.scoreArea { width: auto; text-align: center; margin: 0 auto; color:#BBB; font-size: 12px }
.gameLive table.scoreArea .status {
  display: inline-block;
  background-color:#747474;
  padding:1px 12px 2px;
  color: #FFF;
  font-size: 12px;
  line-height: 1.8;
  vertical-align: middle;
  border-radius: 50px
}
.gameLive table.scoreArea tr.pet td { padding-top: 5px; width: 80px }
.gameLive table.scoreArea tr.pet td:nth-of-type(2) {font-size: 28px; font-weight:bold;}
.gameLive table.scoreArea tr.pet td > img { width: 65px!important }
.gameLive table.scoreArea tr.score td { font-size: 32px; font-weight: bold; color: #FFF; height: 50px }
.gameStarter { color: #FFF; margin-bottom: 0 }
.gameStarter h2 { line-height: 44px; height: 44px; position: relative; background-color: #052346; border-bottom: #0076ec 2px solid }
.gameStarter h2 span { font-size: 12px; color: #bcbcbc; padding-left: 10px }
.gameStarter h2:before { content: ""; display: inline-block; width: 10px }
.gameStarter h2:after {
  content: ""; display: block; width: 100%; height: 2px; position: absolute; bottom: 0;
  background: linear-gradient(left, #002453 0%, #003F93 25%, #0670FF 50%, #003F93 75%, #002453 100%)
}
.gameStarter .starterInfo { padding:5px 10px }
.gameStarter .starterInfo > p { margin: 0!important }
.gameStarter table.starter { width: 100%; font-size: min(10vw,15px) }
.gameStarter table.starter td { vertical-align: middle; border-top: #000 1px solid; text-align: left }
.gameStarter table.starter td:nth-child(odd) { padding: 10px 0 10px 10px; width: 10% }
.gameStarter table.starter td:nth-child(even) { width: 30%; line-height: 1.2 }
.gameStarter table.starter td:nth-child(even) img { vertical-align: middle; margin:0 5px 5px 0 }
.gameStarter table.starter td:nth-of-type(2) { border-right: #000 1px solid }
#registration { background-color: #052346; height: 34px; margin-top: 10px; padding: 5px; display: flex; justify-content: space-between }
#registration a { background-color: #3d3d46; display: block; width: 49%; box-sizing: border-box; padding: 5px 10px; color: #FFF; text-decoration: none }
#registration a > i{ color: #0076ec }
#registration a:hover { background-color: rgba(255,255,255,0.2) }
/*試合情報 > スケジュール*/
section#game #schedule { width:100%; max-width:1040px; margin-left:auto; margin-right:auto; box-sizing:border-box; background-color:transparent; display:block }
section#game #schedule .slick3 li { margin:0 25px 0 0; padding:0 }
section#game #schedule .slick3 li > div { background-color:#f0f0f0; width:340px; padding:15px; box-sizing:border-box; font-weight:bold; font-size:min(3vw,14px); line-height:1.4; height:min(48vw,180px) }
section#game #schedule .slick3 li > div > div.flexBox.centerH { width:min(36vw,200px); margin-right:auto; margin-left:auto }
section#game #schedule .slick3 li a.btn { border:#2743a0 1px solid; border-radius:50px; color:#2743a0; font-size:12px; padding:5px 20px; background-color:#FFF; text-decoration:none; margin:0 0.5em }
section#game #schedule .slick3 li a.btn:nth-of-type(2) { border-color:#00a7e3 }
section#game #schedule .slick3 li > div > div > span { color:#C4C4C4 }
section#game #schedule .slick3 li.slick-slide > div > div.flexBox.centerH img { width:60px }
section#game #schedule .slick3 li.slick-slide a.btn:nth-of-type(2) img { width:60px }

/*チケット*/
section#ticket { background: linear-gradient(to bottom, #002755, #00418e); padding:40px 10px }
section#ticket ul {
  width:100%;
  max-width:1040px;
  margin-left:auto;
  margin-right:auto;
  margin-bottom:30px;
  display:flex;
  justify-content: center;
  flex-wrap:wrap;
  gap: 40px;
}
section#ticket ul::after { content:""; display: block; width:38% }
section#ticket li { width:38% }
section#ticket li a { display:block; width:100% }
section#ticket li img { width:100% }
/*
section#ticket > div { width:100%; max-width:1040px; margin-left:auto; margin-right:auto; box-sizing:border-box }
section#ticket .ticketAdGameWrap { width:68%; background-color:#FFF; display:flex; justify-content: space-around; line-height:1.2; padding:10px 0 }
section#ticket .ticketAdGameWrap > div { width:90px }
section#ticket .ticketAdGameWrap .date { padding:5px 2px 0 }
section#ticket .ticketAdGameWrap .date > span { font-size:12px }
section#ticket .ticketAdGameWrap .logo img { width:auto; max-width:80% }
section#ticket .ticketAdGameWrap *[class^="seasonalityBg-"] { display:block; text-align:center; line-height:1; padding:3px 0; font-size:12px; margin-bottom:5px }
section#ticket .ticketAdGameWrap *[class^="button-"] { margin:5px auto; font-size:14px }
section#ticket .ticketAdGameWrap *[class^="button-"] a { padding:5px }
section#ticket .ticketAdGameWrap *[class^="button-"] a:after { display:none }
section#ticket .ticketAdLinkWrap { width:30% }
section#ticket .ticketAdLinkWrap a { background-color:#e1eeff; margin-bottom:10px; display:flex; align-items: center; font-size:14px; text-decoration:none }
section#ticket .ticketAdLinkWrap a > span { width:16%; padding:10px 0; margin-right: 10px; background-color:#FFF; display:flex; justify-content: center; align-items: center; box-sizing:border-box }
section#ticket .ticketAdLinkWrap a > span > img { width:auto; max-width:100% }
section#ticket .ticketAdLinkWrap a > span > i { font-size:18px }
*/

/*TOPICS*/
section#topics { background: linear-gradient(to bottom, #000, #333); padding:40px 10px 20px }
section#topics ul.pc { width: min(100%,1040px); margin: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 1rem }
section#topics ul li img { width: auto; max-width: 100% }
section#topics ul li a { text-align: center; color: #FFF; text-decoration: none }
section#topics ul.sp,
section#topics button.spBtn { display: none }
@media screen and ( max-width:670px) {
  section#topics ul.pc { display: none }
  section#topics ul.sp { display: block }
  section#topics ul.sp:has(> li:nth-child(5)) + button.spBtn { display: block }
  section#topics button.spBtn { background-color: transparent; text-align: center; font-size: 14px; border: none; color: #FFF; width: 100% }
  section#topics ul.sp { width: min(100%,1040px); margin: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 1rem }
  section#topics ul.sp li.hidden { opacity: 0; height: 0; margin: 0; display: none }
}

/*NEWS*/
section#news ul { width: 100%; max-width:1040px; margin: 0 auto 30px; height: 650px; overflow-y:auto; box-sizing:border-box }
section#news li {
  border-bottom:#DDD 1px solid;
  width: 100%;
  box-sizing: border-box;
  display: block;
  padding: 8px 0 8px 10px;
  position: relative;
  line-height: 1.3
}
section#news li span { color: #999; font-size: 0.8rem }
section#news li div { margin-top: 5px; padding-right: 5% }
section#news li a:hover { text-decoration: none }
section#news li a:hover:after { right: 1% }
section#news li:before {
  font-size: 10px;
  color: #FFF;
  line-height: 20px;
  display: inline-block;
  margin-right: 10px;
  width: 54px;
  min-width: 54px;
  text-align: center
}
section#news li.release:before { content:"RELEASE"; background-color: #666; letter-spacing: -1px }
section#news li.team:before { content:"TEAM"; background-color: #00205B }
section#news li.ticket:before { content:"TICKET"; background-color:#F00 }
section#news li.event:before { content:"EVENT"; background-color:#F90 }
section#news li.farm:before { content:"FARM"; background-color:#066 }
section#news li.goods:before { content:"GOODS"; background-color:#30C }
section#news li.dome:before { content:"DOME"; background-color:#6C6 }
section#news li.campaign:before { content:"CAMPAIGN"; background-color:#F9C; letter-spacing: -1px }
section#news li.fanclub:before { content:"FANCLUB"; background-color:#0CF; letter-spacing: -1px }
/*OTHER/Youtube,Goods,レクタングル*/
section#other { background: linear-gradient(to bottom, #002755, #00418e); padding:40px 10px 20px }
section#other > div { width:100%; max-width:1040px; margin-left:auto; margin-right:auto; box-sizing:border-box; text-align:center }
section#other h2 { margin-bottom:15px }
section#other #youtube { width:100%; max-width:320px }
section#other #youtube .movieWrap { width:auto }
section#other #youtube *[class^="button-"] a { display:block }
section#other #youtube *[class^="button-"] a:after { display:none }
section#other #goods { max-width: 320px }
section#other #goods img { width: 100%; max-width:320px }
section#other #goods ul li:not(:first-child) img { display: none }
section#other #goods .slick-initialized .slick-slide img { display: block }
section#other #goods .slick-slider { width:100%; max-width:300px; margin-left:auto; margin-right:auto }
section#other #goods .slick-dots { bottom:0; height:auto }
section#other #goods .slick-dotted.slick-slider { margin-bottom:0; padding-bottom:20px }
section#other #goods .slick-dots li { width:6%; height:5px }
/*PICKUP*/
section#pickup ul {
  width:100%;
  max-width:1040px;
  margin-left:auto;
  margin-right:auto;
  display:flex;
  justify-content: space-between;
  flex-wrap:wrap
}
section#pickup ul::after { content:""; display: block; width:32% }/*空白分*/
section#pickup li { width:32%; margin-bottom:20px }
section#pickup li a { display:block; width:100% }
section#pickup li img { width:100% }
/*SPONSOR*/
section#sponsor ul {
  width:100%;
  max-width:1040px;
  margin: 0 auto;
  display:flex;
  justify-content: space-between;
  flex-wrap:wrap
}
section#sponsor ul:first-of-type { justify-content:center; margin-bottom:40px }
section#sponsor ul:last-of-type { display:grid; grid-template-columns: repeat(7, 1fr); gap: min(1vw,0.7rem) }/*GOLD SPONSOR*/
section#sponsor ul:first-of-type li { width:min(20vw,26%); text-align: center }
section#sponsor ul:first-of-type li img { width:min(100%,200px) }
section#sponsor li a { display:block; width:100% }
section#sponsor li img { width:100% }
/*FOOT ADD*/
section#footAdd { background-color:#e6e6e6; padding:40px 10px 32px }
section#footAdd > div { width:100%; max-width:1040px; margin: 0 auto; display:flex; flex-wrap:wrap }
section#footAdd > div a { display:block; width:200px; margin-right:8px; margin-bottom:8px }
section#footAdd > div a:nth-of-type(5n) { margin-right:0 }
section#footAdd > div img { width:auto; max-width:100% }

/*================= ドラ情 */
section#game > div > .dspSP { background-color:#1440AC; text-align:center }
/*PREMIUM：横にスクロールJS*/
section#premium { background: linear-gradient(#FCF3CE, #C9B58B); padding:20px 10px 10px }
ul.topFlick { height:145px }
ul.topFlick li { width:calc(100% / 2.7); height:145px; box-sizing:border-box; padding:0 5px }
ul.topFlick li a { color:initial; }
ul.topFlick figure > div { height:80px; margin-bottom:5px }
ul.topFlick figure > div.off {
  background-image:url(//d1e44r1kkpuxcb.cloudfront.net/dra/image/2024/noImg16x9.jpg);
  background-size: cover;
  background-position: center;
}
ul.topFlick figure > div > img { width:100%; height:80px; object-fit:contain }
ul.topFlick figure > figcaption { font-weight:900; font-size:min(4vw,13px); line-height:1.2 }
ul.topFlick figure > figcaption > span { color:#FFF; display:block; font-size:min(3vw,12px); line-height:1.2; font-weight:normal }
ul.topFlick figure > figcaption > span > i.muryo { display:inline-block; background-color:#c8e4ff; border-radius:10px; padding:2px 5px; box-sizing:border-box; color:#00418e; font-size:10px; margin-right:5px; font-style:normal }

section#johoCont .topShortcut { display: flex; flex-wrap: wrap; align-items: stretch }
section#johoCont .topShortcut > a {
  min-width: 20%;
  font-size: 10px;
  border: #E0CE9D 1px solid;
  border-right: none;
  box-sizing: border-box;
  text-align: center;
  background-color: #7A6434;
  color: #FFF;
  text-decoration: none;
  padding: 0.5em 0;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
}
section#johoCont .topShortcut i,
section#johoCont .topShortcut span,
section#johoCont .topShortcut img { font-size: 30px; display: block; line-height: 1; margin: auto }
section#johoCont .topShortcut i { font-size:25px }
section#johoCont .johoPresent { background-color:#BCA675; padding:10px }
section#johoCont .johoPresent > ul li { border-bottom:#A0863D 2px solid; padding:8px 0 }
section#johoCont .johoPresent > ul li a { align-items: center; font-size:min(4vw,18px); color:#000; font-weight:bold; line-height:1.2 }
section#johoCont .johoPresent > ul li a span { font-weight:normal; font-size:min(3vw,12px); color:#000; line-height:1.4 }
section#johoCont .johoPresent > ul li a > span.kigen { color:#D61616; font-size:min(3vw,12px); font-weight: bold; margin-left:5px }
/* NEWS */
section#news .dspSP section.tab { display: flex; flex-wrap: wrap; }
section#news .dspSP section.tab .tabLabel {/* タブ */
  margin: 0 5px 15px;
  padding: 5px;
  box-sizing: border-box;
  text-align: center;
  flex: 1;
  order: -1;
  border-radius: 10px;
  color: #666;
  background-image: #FFF;
  border: #CCC 1px solid;
  transition: .5s;
  cursor: pointer;
  font-weight: bold;
  font-size: 11px;
}
section#news .dspSP section.tab input { display: none; }
section#news .dspSP section.tab .doc {
  width: 100%;
  height: 0;
  overflow: hidden;
  opacity: 0;
}
/*アクティブ設定*/
section#news .dspSP section.tab input:checked + .tabLabel {
  color: #fff;
  background: #00418E;
}
section#news .dspSP section.tab input:checked + .tabLabel + .doc {
  height: auto;
  overflow: auto;
  transition: .5s opacity;
  opacity: 1;
}
section#news .dspSP .topList > ul li a p {
  font-size: min(4.2vw,16px);
  line-height: 1.6
}
section#news .dspSP .topList > ul li a p span { display:block }
section#news .dspSP .topList > ul a,
section#news .dspSP .topList > ul.noLink li {
  flex: none;
  text-decoration: none;
  color: #333
}
section#news .dspSP .topList > ul.large a { align-items: flex-start }
section#news .dspSP .topList > ul a > i,
section#news .dspSP .topList > ul.large a > i,
section#news .dspSP .topList > ul.noLink i {
  width: 50px;
  height: 50px;
  display: flex;
  vertical-align: middle;
  text-align: center;
  border-collapse: separate;
  border-spacing: 2px 0;
  background-color: #DDD;
  align-items: center;
  overflow: hidden
}
section#news .dspSP .topList > ul.large a > i { width:140px; height:105px; align-items: flex-start; position:relative }
section#news .dspSP .topList > ul.large a > i.off {
  background-image:url(//d1e44r1kkpuxcb.cloudfront.net/dra/image/2024/noImg16x9.jpg);
  background-size: cover;
  background-position: center;
}
section#news .dspSP .topList > ul a > i img,
section#news .dspSP .topList > ul.large a > i img,
section#news .dspSP .topList > ul.noLink i img {
  display: block;
  width: auto;
  max-width: 50px;
  height: auto;
  max-height: 50px;
  margin: 0 auto
}
section#news .dspSP .topList > ul.large a > i img {
  width: 140px;
  height: 105px;
  max-height: initial;
  max-width: initial;
  object-fit: cover;
  object-position: top
}
section#news .dspSP .topList > ul.noLink i,
section#news .dspSP .topList > ul.noLink i img { width: auto; min-height: 50px; max-height: 80px }
section#news .dspSP .topList > ul a > i + p,
section#news .dspSP .topList > ul.noLink i + p { margin-left: 10px }
section#news .dspSP .topList > #newspage ul.noLink p,
section#news .dspSP .topList > ul.noLink p {
  font-size:inherit;
  margin: inherit;
  padding-bottom: 0;
  display: table-cell;
  vertical-align: middle;
  padding-left: 10px
}
section#news .dspSP .topList > ul.large a span { font-size:min(3vw,12px) }
section#news .dspSP .topList > ul.large a span.movie:after {
  font-family: "Font Awesome 6 Free";
  content:"\f03d";
  font-weight:900;
  padding-left: 5px
}
section#news .dspSP .topList > ul > li { border-bottom:#EFEFEF 2px solid; padding: 10px }
section#news .dspSP .topList > ul > li:first-child { border-top:#EFEFEF 2px solid }
section#news .dspSP .topList > ul > li > a { background: none; padding: 0; min-height: inherit }
section#news .dspSP .topList > ul > li > a > p { font-size:min(4.2vw,16px); line-height:1.6; flex:1; margin-bottom:0 }
section#news .dspSP .topList > ul > li > a > p.movie { display: block }
section#news .dspSP .topList > ul > li > a > p[class]::after {
  white-space: pre;
  font-family: FontAwesome;
  color: #FFF;
  display: block;
  background-color: #777;
  padding: 3px 3px 2px;
  border-radius: 3px;
  font-size: 10px;
  width: 65px;
  text-align: center;
  line-height: 1;
}
section#news .dspSP .topList > ul > li > a > p.movie::after { content: "動画配信中\f03d"; }
section#news .dspSP .topList > ul > li > a > p.new::after { content: "新連載 \f09e"; }
section#news .dspSP .topList.pcList ul li:before { font-size: 10px; color: #FFF; display: inline-block; margin-right: 5px; min-width: 54px;  text-align: center; }
section#news .dspSP .topList.pcList ul li.release:before { content:"RELEASE"; background-color: #666; letter-spacing: -1px; }
section#news .dspSP .topList.pcList ul li.team:before { content:"TEAM"; background-color: #00205B; }
section#news .dspSP .topList.pcList ul li.ticket:before { content:"TICKET"; background-color:#F00; }
section#news .dspSP .topList.pcList ul li.event:before { content:"EVENT"; background-color:#F90; }
section#news .dspSP .topList.pcList ul li.farm:before { content:"FARM"; background-color:#066; }
section#news .dspSP .topList.pcList ul li.goods:before { content:"GOODS"; background-color:#30C; }
section#news .dspSP .topList.pcList ul li.dome:before { content:"DOME"; background-color:#6C6; }
section#news .dspSP .topList.pcList ul li.campaign:before { content:"CAMPAIGN"; background-color:#F9C; letter-spacing: -1px; }
section#news .dspSP .topList.pcList ul li.fanclub:before { content:"FANCLUB"; background-color:#0CF; letter-spacing: -1px; }
section#news .dspSP .topList.pcList ul li span { display:inline-block; }
section#news .dspSP .topList.pcList ul li a div { flex:initial; width:100% }
section#news .dspSP .topList ul li a > p > span > span.muryo {
  display: inline-block;
  background-color: #d9fbee;
  color:#F00;
  font-size:min(3vw,12px);
  padding: 1px 3px;
  border-radius: 3px;
  margin-left: 5px
}
section#news .dspSP .topList > ul > li > a { display:flex }
section#news .dspSP .topList > ul > li > a:after { display: none; }
section#news .dspSP .topList > ul > li.mvList > a > i,
section#news .dspSP .topList > ul > li.mvList > a > i > img { height:auto }
section#news .dspSP .topList > ul > li span > i.muryo { display:inline-block; background-color:#c8e4ff; border-radius:5px; padding:2px 5px; box-sizing:border-box; color:#00418e; font-size:10px; margin-left:5px }

/*
==================================================
～1040
==================================================
*/
@media screen and ( max-width:1040px) {
  section ul.slick4 { width: 95% }
  /*ヘッドライン*/
  #headline ul { padding: 10px 0 }
  /*スーパーバナー*/
  section#adSPbnr { padding:20px 10px }
  section#adSPbnr img { width: auto; max-width: 100%; height:auto !important }
  /*試合情報*/
  section#game > div { display:block }
  .gameLive,
  .starterWrap { width:100% }
  /*試合情報 ＞ スケジュール*/
  section#game #schedule .slick3 li { margin:0 4vw }
  section#game #schedule .slick3 li > div { width:100%; padding:10px 0 15px; margin:auto }
  /*NEWS*/
  section#news ul { height: 500px }
  /*OTHER/Youtube,Goods,レクタングル*/
  section#other #youtube { margin:0 auto 20px }
  section#other #goods { margin:0 auto 20px }
  /*FOOT ADD*/
  section#footAdd > div a { width:23.5%; margin-right:2% }
  section#footAdd > div a:nth-of-type(4n) { margin-right:0 }
  section#footAdd > div a:nth-of-type(5n) { margin-right:2% }
  /*SPONSOR*/
  section#sponsor ul:last-of-type { grid-template-columns: repeat(6, 1fr) }/*GOLD SPONSOR*/
}
/*
==================================================
～670
==================================================
*/
@media screen and ( max-width:670px ){
  section ul.slick4 .slick-prev { left:-18px }
  section ul.slick4 .slick-next { right:-18px }
  /*ヘッドライン*/
  section#headline ul { padding:8px 0; font-size:12px; line-height:1.4 }
  section#sliderWrap { padding-top:0 }
  /*試合情報 ＞ スケジュール*/
  section#game #schedule .slick3 li > div { width:100%; padding:10px 0 15px; margin:auto }
  section#game #schedule .slick3 li.slick-slide > div > div.flexBox.centerH img { width:50px }
  section#game #schedule .slick3 li.slick-slide > div > div.flexBox.centerW { flex-wrap:wrap }
  section#game #schedule .slick3 li.slick-slide > div > div.flexBox.centerW a.btn { width:auto; margin-bottom:5px }
  /*TICKET*/
  section#ticket ul { gap:10px }
  section#ticket ul::after { width:48% }
  section#ticket li { width:48% }
  /*PICKUP*/
  section#pickup li { width:48% }
  /*SPONSOR*/
  section#sponsor ul:first-of-type li { width:33.3% }
  section#sponsor ul:last-of-type { grid-template-columns: repeat(4, 1fr) }/*GOLD SPONSOR*/
  /*FOOT ADD*/
  section#footAdd > div a { width:32%; margin-right:2% }
  section#footAdd > div a:nth-of-type(3n) { margin-right:0 }
  section#footAdd > div a:nth-of-type(4n) { margin-right:2% }
}