@import url("/dra/js/slick/slick.css");
@import url("/dra/js/slick/slick-theme.css");

/* TOP COMMON */
li,
li:first-child { border:none }
li a { padding:0; min-height:inherit; line-height:1.8 }
li a:after { display:none }
article section { padding:1.5em 0 2em }
article section h2 { color: #001E64; border-bottom: none; padding:0; text-align:center; font-size:min(8vw,46px); line-height:1.2; margin-bottom:15px }

/* トップ共通 */
.inner { padding:20px 10px; margin:0 0 20px }
.inner.bk { background-color: #EFEFEF }
.inner > .mgB10 { margin-bottom:0 !important }
div.button-blue.circle { max-width:50%; padding:0; border-color: #A1D0FF }
div.button-blue.circle a { padding:5px 0 }
div.button-blue.circle a {
	background-color: #A1D0FF;
	color: #003B90;
	font-weight: bold;
	border-color: #A1D0FF;
}

/* SOKUHO */
.sdc_contents { background-color: #EFEFEF; min-height: 100px }
.game-sokuho {
	position: relative;
	background: #EFEFEF;
	padding:0;
	margin-bottom: 0;
}
.game-sokuho a {
	padding: 10px 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-around;
	overflow: hidden;
	text-decoration: none;
	color: #333;
}
.game-sokuho a:before { content:""; width:100%; display:block; order:4 }
.game-sokuho .status {
	font-size: 12px;
	background: #333;
	color: #FFF;
	border-radius: 13px;
	width: fit-content;
	padding:2px 15px;
	margin: 0 auto;
	text-align: center;
	order: 4;
}
.game-sokuho .inning { width:100%; order:1; color:#333; text-align:center; line-height:1 }
.game-sokuho .home { order:2 }
.game-sokuho .visitor { order:3 }
.game-sokuho .home img,
.game-sokuho .visitor img { display: block }
.game-sokuho .score {
	font-size:min(9vw,32px);
	font-weight: bold;
	line-height:1;
	height: auto;
	order: 2;
}
.game-sokuho .inning~.score {
	font-size:min(9vw,32px);
	font-weight: bold;
	line-height:1;
	height: auto;
	order: 2;
}
.game-sokuho .stadium {
	font-size: 12px;
	background: none;
	color: #333;
	text-align: center;
	height: 20px;
	line-height: 20px;
	width: 100%;
	order: 0;
}
.linear ul {
	animation-duration: 15s;
	animation-iteration-count: infinite;
	animation-name: top-page-notification;
	animation-timing-function: linear;
	background-color: #FFF;
	color: #333;
	overflow: hidden;
	padding: 8px 0;
	white-space: nowrap;
	display: flex;
}
.linear ul li { margin-right: 100px }
.linear ul li,
.linear ul li a { line-height:1.2 }
.linear ul li a { text-decoration:underline }
.linear ul.center { animation: none; text-align: center }

/*新着リスト*/
div.tab { display: flex; flex-wrap: wrap }
div.tab > a,
div.tab .tabLabel {/* タブ */
		margin: 0;
		height: min(10vw,80px);
		box-sizing: border-box;
		text-align: center;
		flex: 1;
		order: -1;
		color: #00418E;
		background-color: #BFCFE3;
		cursor: pointer;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: center;
		text-decoration: none
}
div.tab input { display: none }
div.tab .doc {
		width: 100%;
		height: 0;
		overflow: hidden;
		opacity: 0;
}
/*アクティブ設定*/
div.tab > a:hover,
div.tab > a:active,
div.tab > a:focus,
div.tab input:checked + .tabLabel {
		color: #FFF;
		background: #00418E;
}
div.tab input:checked + .tabLabel + .doc {
		height: auto;
		overflow: auto;
		transition: .5s opacity;
		opacity: 1;
}
.topList > ul > li { border-bottom:#EFEFEF 2px solid; padding: 10px }
.topList > ul > li:first-child { border-top:#EFEFEF 2px solid }
.topList > ul > li > a { background: none; padding: 0; min-height: inherit }
.topList > ul > li > a > p { font-size:min(4.2vw,16px); line-height:1.6 }
.topList > ul > li > a > p.movie { display: block }
.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;
}
.topList > ul > li > a > p.movie::after { content: "動画配信中\f03d" }
.topList > ul > li > a > p.new::after { content: "新連載 \f09e" }
.topList.pcList ul li:before { font-size: 10px; color: #FFF; display: inline-block; margin-right: 5px; min-width: 54px;  text-align: center }
.topList.pcList ul li.release:before { content:"RELEASE"; background-color: #666; letter-spacing: -1px }
.topList.pcList ul li.team:before { content:"TEAM"; background-color: #00205B }
.topList.pcList ul li.ticket:before { content:"TICKET"; background-color:#F00 }
.topList.pcList ul li.event:before { content:"EVENT"; background-color:#F90 }
.topList.pcList ul li.farm:before { content:"FARM"; background-color:#066 }
.topList.pcList ul li.goods:before { content:"GOODS"; background-color:#30C }
.topList.pcList ul li.dome:before { content:"DOME"; background-color:#6C6 }
.topList.pcList ul li.campaign:before { content:"CAMPAIGN"; background-color:#F9C; letter-spacing: -1px }
.topList.pcList ul li.fanclub:before { content:"FANCLUB"; background-color:#0CF; letter-spacing: -1px }
.topList.pcList ul li span { display:inline-block }
.topList.pcList ul li a div { flex:initial; width:100% }
.topList ul li a > p > span > span.muryo { color:#F00; font-size:min(3vw,12px) !important; margin-left:5px; margin-bottom:0 }
.topList > ul > li > a:after { display: none }
.topList > ul > li.mvList > a > i,
.topList > ul > li.mvList > a > i > img { height:auto }
.topList > ul > li.mvList > a > i.off { height:79px }

/* ショートカットメニュー */
.topShortcut { display: flex; flex-wrap: wrap; align-items: stretch }
.topShortcut > a {
	min-width: 20%;
	font-size: 10px;
	border: #2676e1 1px solid;
	border-right: none;
	box-sizing: border-box;
	text-align: center;
	background-color: #00418E;
	color: #FFF;
	text-decoration: none;
	padding: 0.5em 0;
	display: flex;
	flex-direction: column;
	align-content: center;
	justify-content: center;
}
.topShortcut i,
.topShortcut span,
.topShortcut img { font-size: 30px; display: block; line-height: 1; margin: auto }
.topShortcut i { font-size:25px }

/* プレゼント（kokuchi.inc） */
.kokuchi { background-color: transparent }
.kokuchi a {
	display: block;
	font-size: 15px;
	padding: 10px 10px 0;
	text-decoration: none;
	color: #333;
}
.kokuchi a:last-child { padding-bottom: 10px }
.kokuchi a i,
.kokuchi a span { display: table-cell; vertical-align: middle }
.kokuchi a i {
	width: 50px;
	height: 50px;
	font-size: 30px;
	color: #FFF;
	text-align: center;
}
.kokuchi a i.fa-gift { background-color: #F00 }
.kokuchi a i.fa-bell { background-color: #F80 }
.kokuchi a i.fa-exclamation-triangle { background-color: #FAD200 }
.kokuchi a span { padding-left: 10px;}
/* KOKUCHI top_attention */
.kokuchi .top_attention { border:#F00 1px solid; background-color: #FFF; padding: 10px }
.kokuchi .top_attention i { font-size: 15px }
.kokuchi .top_attention a { display: inline-block; padding: 0 0 0 8px }
.kokuchi .top_attention a span { padding: 0 }

/* 広告（add） */
.addRec { padding-bottom: 5px }
.addRec > .mgB10 { margin-bottom: 0!important }

/* FOOTメニュー */
.footMenu { background-color: #00418E; padding: 10px 10px 0 }
.footMenu .snsWrap { display: flex; padding: 25px 15px 15px; justify-content:center }
.footMenu .snsWrap a { display:flex; align-items:center; justify-content:center; color:#FFF; text-decoration:none }
.footMenu .snsWrap a > i { font-size:min(8vw,25px) }
.footMenu .snsWrap a > img { width:60% }
ul.misc-menu { display:flex; flex-wrap:wrap; justify-content: center }
ul.misc-menu li { padding:0.4em; display:flex; align-items:center; border:none }
ul.misc-menu li:after { display:block; content:"｜"; color:#FFF; margin-left:0.4em }
ul.misc-menu li:last-of-type:after { display:none }
ul.misc-menu li a { color:#FFF; padding:inherit; min-height:inherit; font-size:min(3.3vw, 16px) }
.footMenu > a.btn,
.todayTicket > a { background-color:#A1D0FF; color:#00418E; display:block; text-align:center; padding:10px 0; font-weight:bold; text-decoration:none }

/* TOP当日券 */
.todayTicket { background-color:#EFEFEF; padding:5px 10px }
/* 下部固定プレゼント */
footer { background-color:#00418E; padding-bottom:180px }
.fixFoot { position:fixed; bottom:0; left: 50%; transform: translate(-50%,0); width: 750px; max-width: 100%; z-index: 1; }
.fixPresent { background-color:#FFFFA0; padding:0 }
.fixPresent > ul li { border-bottom:#FFE36E 2px solid; padding:8px 5px }
.fixPresent > ul li a { align-items: center; font-size:min(4vw,18px); color:#000; font-weight:bold; line-height:1.2 }
.fixPresent > ul li a span { font-weight:normal; font-size:min(3vw,12px); color:#000; line-height:1.4 }
.fixPresent > ul li a > span.kigen { color:#D61616; font-size:min(3vw,12px); font-weight: bold; margin-left:5px }
/* 下部固定プレゼント：3件以上のとき */
.fixPresent > ul li.motto { text-align: right; padding: 6px 5px; border-bottom: none }
.fixPresent > ul li.motto a { justify-content: flex-end; color: #f99134 }

/*スライダー*/
section#sliderWrap { background-color:#FFF; min-height: 210px }
section#sliderWrap li a { text-decoration:none }
section#sliderWrap img { width: 100%; max-width:960px }
section#sliderWrap li .caption { background-color:#001850; padding:10px; color:#FFF }
section#sliderWrap li .caption p { margin:0 }
section#sliderWrap .slider { min-height: 210px; background: #fff url('/dra/js/slick/ajax-loader.gif') center center no-repeat }
section#sliderWrap .slider.slick-initialized { min-height: inherit }
section#sliderWrap .slick-slide:not(:first-child) { 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:30px }
section#sliderWrap .slick-dotted.slick-slider { margin-bottom:0; padding-bottom:25px }
section#sliderWrap .slick-dots li { width:5%; height:5px }
/*SLICK OPTION*/
.slick-prev,
.slick-next { top: 96.8%; z-index:1 }
.slick-prev { left:0 }
.slick-next { right:0 }
.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:#00418E; opacity: 1; content:"" }
.slick-dots li button:before { background-color:#00418E; content:"" }

/*フォトハイライトの次の広告*/
section#ad_top2 { background-color:#EFEFEF; margin:0 0 20px; padding:20px }
section#ad_top2 .inner { padding:0; margin:0 }

/*====== 2024年改修 ======*/
a.btn { display:flex; align-items:center; justify-content:center; text-decoration:none!important }
a.btn.gray { background-color:#EBEBEB; color:#333 }
/*フリック*/
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 { display:block }
ul.topFlick figure > div { height:min(20vw,80px); margin-bottom:5px }
ul.topFlick figure > div > img {
  display: block;
  width:100%;
  height:min(20vw,80px);
  color:#333;
  text-decoration:none;
  object-fit: cover;
  object-position: top
}
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 > figcaption { font-weight:900; font-size:min(4vw,13px); line-height:1.2 }
ul.topFlick figure > figcaption > span { color:#666; 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 }
ul#photo.topFlick li > a { border:#CCC 1px solid; box-sizing:border-box; height:145px }
ul#photo.topFlick li > a > img { width:100%; height:145px; object-fit:contain; margin-right:0 }

/*PLAYERS & TEAM & CONTENT*/
#team a { margin-bottom: 10px }
#team .flexBox:first-of-type > a:nth-of-type(-n+2) { background-color: #000 }
#team .flexBox:first-of-type > a,
#content .flexBox > a,
#memory .flexBox:first-of-type > a {
	display: block;
	position: relative;
	width: 48%;
	margin-bottom: 10px;
	color: #FFF;
	text-decoration: none;
	font-weight: bold
}
#team .flexBox:first-of-type > a img,
#content .flexBox > a img,
#memory .flexBox:first-of-type > a img { width:100%; display: block }
#team .flexBox:first-of-type > a img { opacity: 0.5 }
#team .flexBox:first-of-type > a p,
#memory .flexBox:first-of-type > a p {
	text-align: center;
	width: 100%;
	position:absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size:min(4.5vw,30px);
	line-height: 1.4;
}
#team .flexBox a.btn { width:48%; height:min(15vw,100px); font-weight:bold }

section#link { border-top:#EFEFEF 2px solid; border-bottom:#EFEFEF 2px solid }
section#link a {
	display:flex;
	flex-direction: column;
	text-align: center;
	width:50%;
	color:#333;
	text-decoration:none!important;
	padding:1em 0
}
section#link > a:first-of-type { width:100%; border-bottom:#EFEFEF 2px solid; }
section#link div a:nth-of-type(2),
section#link div a:nth-of-type(3),
section#link div a:nth-of-type(6),
section#link div a:nth-of-type(7) { background-color:#EBEBEB }
section#link a > span { font-size:70% }

/* 追加：2025/3/12 「プチッとドラゴンズ情報」 */
a.petit { color: initial; text-decoration: none }
#petitInfo { display: flex; align-items: flex-start; position: relative }
#petitInfo > div:not(.petitArea) { background-color: #FFF; z-index: 1 }
#petitInfo > div:last-of-type { position: absolute; right: 0; }
#petitInfo img[src$="svg"] { width:min(20vw,84px) }
#petitInfo .petitArea {
	background-image: url(../image/2025/topPetitArea.png);
	background-size: auto;
	background-repeat: repeat-x;
	display: flex;
	line-height: 28px;
	padding: 10px;
	width: 100%;
	overflow: hidden;
}
#petitInfo .petitArea p { animation: ticker 10s linear infinite; height: 28px; white-space:nowrap; margin: 0; padding: 0; z-index: 0 }
a #petitInfo .petitArea p { color: initial; text-decoration: none !important }
@keyframes ticker {
	0% { transform: translateX(min(80vw,270px)) }
	100% { transform: translateX(-100%) }
}