@charset "UTF-8";
/*
 * cmn_layout.css


/* !HTML5 elements
---------------------------------------------------------- */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section
{ display: block;}

/* !Reseting
---------------------------------------------------------- */
body {
	font-family: "メイリオ","Meiryo","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
	font-size: 14px;
	-webkit-text-size-adjust: none;
	line-height: 1.5;
	color: #000;
}
body, div, pre, p, blockquote, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, th, td
{ margin: 0; padding: 0;}
input, textarea
{ margin: 0; font-size: 100%;}
{ border: 0;}
img
{ vertical-align: middle;}
address, caption, cite, code, dfn, em, th, var
{ font-style: normal; font-weight: normal;}
ol, ul
{ list-style: none;}
caption, th
{ text-align: left;}
h1, h2, h3, h4, h5, h6
{ font-size: 100%; font-weight: normal;}
q:after, q:before
{ content:'';}
a, input
{ /* outline: none; */ }
abbr, acronym
{ border: 0;}
label
{ cursor: pointer;}
table
{ border-collapse: collapse; border-spacing: 0; font-size: 100%;}

/* !Reset Module
---------------------------------------------------------- */
.reset div, .reset dl, .reset dt, .reset dd, .reset ul, .reset ol, .reset li, .reset h1, .reset h2, .reset h3, .reset h4, .reset h5, .reset h6,
.reset pre, .reset form, .reset fieldset, .reset p, .reset blockquote, .reset th, .reset td
{ margin: 0; padding: 0;}
.reset input, .reset textarea
{ margin: 0; font-size: 100%;}
.reset table
{ border-collapse: collapse; border-spacing: 0; font-size: 100%;}
.reset fieldset, .reset img, .reset abbr, .reset acronym
{ border: 0;}
.reset address, .reset caption, .reset cite, .reset code, .reset dfn, .reset em, .reset th, .reset var
{ font-style: normal; font-weight: normal;}
.reset ol, .reset ul
{ list-style: none;}
.reset caption, .reset th
{ text-align: left;}
.reset h1, .reset h2, .reset h3, .reset h4, .reset h5, .reset h6
{ font-size: 100%; font-weight: normal;}
.reset a, .reset input
{ /* outline: none; */ }
.reset q:after, .reset q:before
{ content:'';}

/* !font-size  */
.fzSS  { font-size:  85%;}/* base 13px -> 11px */
.fzS   { font-size:  93%;}/* base 13px -> 12px */
.fzM   { font-size: 100%;}
.fzL   { font-size: 108%;}/* base 13px -> 14px */
.fzLL  { font-size: 124%;}/* base 13px -> 16px */
.fzLLL { font-size: 139%;}/* base 13px -> 18px */

/* !margin-top  */
.mt10  { margin-top: 10px;}
/* !padding-top  */
.pt10  { padding-top: 10px;}

.tpMin { font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}
.tpGothic {
	font-family: "メイリオ","Meiryo","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
 }


/* Clearfix
---------------------------------------------------------- */
.clearfix {
	display: block;
	min-height: 1%;
	z-index:10000;
}
.clearfix:after {
	clear: both;
	content:".";
	display: block;
	height: 0;
	visibility: hidden;
}
* html .clearfix {
	height: 1%;
	/*\*//*/
	height: auto;
	overflow: hidden;
	/**/
}

/* !Layout
---------------------------------------------------------- */
html { overflow-y: scroll;}
body { text-align: center;}

/*----------------------------------------------------------
							!SP
---------------------------------------------------------- */
* {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

img {
	max-width: 100%;
	height: auto;
}

.sp_none { display: none !important;}
.pc_none { display: inherit !important; }

/* wrapper
---------------------------------------------------------- */
#wrapper {
	text-align: left;
}
#pageHeader {
	position: relative;
	width: 100%;
	min-height: 470px;
	padding: 0;
	background: url(../images/bg_legendimg.jpg) no-repeat center top;
	background-size: 180%;
	background-color: #f4a82d;
}
@media only print, screen and (max-width: 375px) {
#pageHeader {
	min-height: 440px;
	padding: 0;
	background-size: 190%;
}
}
@media only print, screen and (max-width: 320px) {
#pageHeader {
	min-height: 400px;
	padding: 0;
	background-size: 200%;
}
}
.headInner {
	width: 100%;
	margin: 0;
	padding: 10px 0 0 0;
	background: url(../images/bg_head.png) no-repeat center 0;
	background-size: 100% 150px;
	z-index: 100;
}
.headKumo {
	background: url(../images/bg_kumo.png) no-repeat center 0;
	background-size: 120%;
	min-height: 222px;
}
@media only print, screen and (max-width: 375px) {
.headKumo {
	background-size: 120%;
	min-height: 210px;
}
}
@media only print, screen and (max-width: 320px) {
.headKumo {
	background-size: 120%;
	min-height: 190px;
}
}
h1#title {
	position: absolute;
	top: 10px;
	left: 0;
	right: 0;
	margin: auto;
	width: 100%;
	text-align: center;
	z-index: 200;
}

@media only print, screen and (min-width: 641px) {
#wrapper {
	text-align: left;
	min-width: 1100px;
}

#pageHeader {
	width: 100%;
	min-height: 800px;
	padding: 0;
	background: url(../images/bg_legendimg.jpg) no-repeat center 0;
	background-size: 120%;
}

.headInner {
	width: 100%;
	min-height: 480px;
	margin: 0;
	padding: 20px 0 0 0;
	background: url(../images/bg_head.png) no-repeat center 0;
	background-size: 100% auto;
}
.headKumo {
	min-height: 300px;
	padding: 20px 0 0 0;
	background-size: auto;
}
h1#title {
	top: 20px;
	left: 0;
	right: 0;
	margin: auto;
	max-width: 1100px;
	margin: 0 auto;
}
}
@media only print, screen and (min-width: 768px) and (min-width: 1024px)  {
#pageHeader {
	width: 100%;
	min-height: 800px;
	padding: 0;
	background: url(../images/bg_legendimg.jpg) no-repeat center center;
	background-size: cover;
}
}

.headGameday {
	position: absolute;
	left: 0;
	margin: 0;
	width: 100%;
	top: 29%;
	background: rgba(238,120,28,0.7);
	z-index: 50;
}
@media only print, screen and (max-width: 375px) {
.headGameday {
	top: 28%;
}
}
@media only print, screen and (max-width: 320px) {
.headGameday {
	top: 27%;
}
}
.headGamedayInner {
	width: 100%;
	margin: 0 auto;
	padding: 5px 0 5px 0;
	font-weight: bold;
	text-align: center;
}
.headGameday .day {
	font-size: 22px;
	line-height: 1.4;
}
.headGameday .day span {
	display: inline-block;
	margin: 0 0 0 5px;
	padding: 2px 4px;
	font-size: 14px;
	line-height: 1.4;
	color: #fff;
	background-color: #000;
	vertical-align: middle;
}
.headGameday .place {
	font-size: 13px;
	line-height: 1.4;
}
.headGameday .place span {
	font-size: 10px;
}
.liveTxt {
	position: absolute;
	width: 100%;
	left: 0;
	bottom: 0;
	padding: 7px;
	background-color: rgba(0,0,0,0.8);
}
.liveTxt h2 {
	padding: 2px;
	font-size: 22px;
	font-weight: bold;
	text-align: center;
	color: #000;
	line-height: 1.4;
	letter-spacing: 0;
	font-style: italic;
	text-shadow: 1px 1px 0 #fff,
                 -1px 1px 0 #fff,
                 1px -1px 0 #fff,
                 -1px -1px 0 #fff;
}
.liveTxt .liveStart {
	width: 100%;
	font-size: 16px;
	font-weight: bold;
	line-height: 1.4;
	text-align: center;
	color: #fff;
}
@media only print, screen and (min-width: 641px) {
.headGameday {
	top: 28%;
}
.headGamedayInner {
	width: 700px;
	padding: 10px 0 5px 200px;
	text-align: left;
}
.headGameday .day {
	font-size: 33px;
	line-height: 1.4;
}
.headGameday .day span {
	margin: 0 0 0 6px;
	padding: 1px 6px 2px 6px;
	font-size: 20px;
	line-height: 1.4;
}
.headGameday .place {
	font-size: 18px;
	line-height: 1.4;
}
.liveTxt {
	padding: 10px;
}
.liveTxt h2 {
	padding: 3px;
	font-size: 40px;
	line-height: 1.4;
	letter-spacing: 0.1em;
	text-shadow: 1px 1px 0 #fff,
                 -1px 1px 0 #fff,
                 1px -1px 0 #fff,
                 -1px -1px 0 #fff;
}
.liveTxt .liveStart {
	font-size: 20px;
	line-height: 1.4;
}
}
@media only print, screen and (min-width: 500px) and (max-width: 641px) {
.headGameday {
	top: 40%;
}
}
@media only print, screen and (min-width: 450px) and (max-width: 500px) {
.headGameday {
	top: 39%;
}
}
.reporter {
	width: 100%;
	overflow: hidden;
}
.reporter img {
	width: 50%;
	float: right;
}
@media only print, screen and (min-width: 641px) {
.reporter {
	max-width: 1000px;
	margin: 0 auto;
}
.reporter img {
	width: auto;
}
}
/* sns */
.snsbox01 ul {
	position: absolute;
	top: 10px;
	left: 0;
	width: 46px;
	height: auto;
	padding: 3px;
	text-align: center;
	background-color: #fff;
	border-radius: 0 5px 5px 0 / 0 5px 5px 0;
	box-shadow: 0 0 2px 0 rgba(0,0,0,0.2);
	z-index:10000;
}
.snsbox01 ul li {
	margin: 8px 0;
}
.snsbox01 ul li.line {
	display: none;
}
.snsbox01 ul li img {
	width: 30px;
	height: 30px;
}
@media only print, screen and (min-width: 641px) {
.snsbox01 ul {
	position: fixed;
	top: 20px;
	left: 0;
	width: 60px;
	height: auto;
	padding: 10px;
	border-radius: 0 5px 5px 0 / 0 5px 5px 0;
	box-shadow: 0 0 2px 0 rgba(0,0,0,0.4);
	z-index: 100;
}
.snsbox01 ul li {
	margin: 10px 0;
}
.snsbox01 ul li.line {
	display: none;
}
.snsbox01 ul li img {
	width: 30px;
	height: 30px;
}
}

/* main
---------------------------------------------------------- */
#main {
	width: 100%;
	margin: 0;
}
.secBox {
	width: 100%;
	margin: 0;
	padding: 20px 10px;
}
/* gameInfo */
#gameInfo {
	overflow: hidden;
	text-align: center;
	background-color: #f4a82d;
}
#gameInfo h3 {
	margin: 0 0 15px 0;
	font-size: 16px;
	line-height: 1.4;
	font-weight: bold;
	text-align: left;
}
#gameInfo ul {
	display: block;
	margin: 20px auto;
}
#gameInfo ul li { }

@media only print, screen and (min-width: 641px) {
#main { }
.secBox {
	width: 1000px;
	margin: 0 auto;
	padding: 40px 20px;
}
/* gameInfo */
#gameInfo {
	text-align: center;
	padding-top: 20px;
}
#gameInfo h3 {
	margin: 0 0 20px 0;
	font-size: 20px;
	line-height: 1.4;
	text-align: center;
}
#gameInfo ul {
	margin: 20px auto;
}
#gameInfo ul li { }
}

/* about */
#about {
	padding: 0 0 40px 0;
    text-align: left;
	background-color: #f7eade;
}
#about .aboutTtl {
    width: 100%;
	padding: 20px 10px;
    background-color: #fff;
}
#about .aboutTtl h3 {
	padding: 10px;
	font-size: 18px;
	line-height: 1.4;
	text-align: center;
	color: #d13;
	font-weight: bold;
}
#about .txt01 {
	width: 100%;
	margin: 20px 0 40px 0;
	font-size: 14px;
	line-height: 1.8;
}
#about h4 {
	width: 100%;
	margin: 40px 0 20px 0;
	font-size: 16px;
	line-height: 1.4;
	text-align: center;
}
#about .txt02 {
	width: 100%;
	margin: 20px 0 40px 0;;
	font-size: 14px;
	line-height: 1.8;
}
@media only print, screen and (min-width: 641px) {
#about {
	padding: 0 0 50px 0;
	text-align: center;
}
#about .aboutTtl {
	padding: 40px 10px;
}
#about .aboutTtl h3  {
	margin: 0 0 10px 0;
	font-size: 24px;
	line-height: 1.4;
}
#about .txt01 {
	width: 100%;
	margin: 20px 0;
	font-size: 15px;
	line-height: 1.8;
}
#about h4 {
	width: 100%;
	margin: 50px auto 15px auto;
	padding: 0 0 5px 0;
	font-size: 17px;
	line-height: 1.4;
}
#about .txt02 {
	width: 100%;
	margin: 20px 0;
	font-size: 14px;
	line-height: 1.8;
}
}
/* btn */
a.btn {
	position: relative;
	display: block;
	width: 90%;
	margin: 20px auto;
	text-align: center;
	text-decoration: none;
}
a.btn.player,
a.btn.ticket {
	padding: 10px;
	font-size: 14px;
	line-height: 1.4;
	font-weight: bold;
	font-style: italic;
	border-radius: 50px;
	background-image: url(../images/ico_arrow01.svg);
	background-repeat: no-repeat;
	background-size: 20px auto;
	background-position: right 15px bottom 10px;
	border: solid 1px #333;
}
a.btn.player {
	color: #333;
	background-color: #fff;
}
a.btn.ticket {
	color: #fff;
	background-color: #f72;
}
a.btn.passport {
	padding: 10px;
	font-size: 14px;
	line-height: 1.4;
	color: #000;
	background-color: #b85;
	background-image: url(../images/ico_arrow01.svg);
	background-repeat: no-repeat;
	background-size: 16px auto;
	background-position: right 15px bottom 10px;
}
a.btn.live {
	padding: 12px;
	font-size: 15px;
	line-height: 1.4;
	font-weight: bold;font-weight: bold;
	color: #fff;
	background-color: #e33;
	background-image: url(../images/ico_arrow02.svg);
	background-repeat: no-repeat;
	background-size: 16px auto;
	background-position: left 15px bottom 16px;
}
a:hover.btn {
	text-decoration: none !important;
}
a:hover.btn.player { background-color: #fec;}
a:hover.btn.ticket { background-color: #f60;}
a:hover.btn.passport { background-color: #a74;}
a:hover.btn.live { background-color: #e23;}

@media only print, screen and (min-width: 768px) {
a.btn	{
	width: 400px;
	margin: 30px auto;
}
a.btn.player,
a.btn.ticket {
	padding: 12px;
	font-size: 15px;
	line-height: 1.4;
	background-image: url(../images/ico_arrow01.svg);
	background-repeat: no-repeat;
	background-size: 16px auto;
	background-position: right 20px bottom 14px;
}
a.btn.passport {
	padding: 17px 12px 16px 12px;
	font-size: 15px;
	line-height: 1.4;
	background-image: url(../images/ico_arrow01.svg);
	background-repeat: no-repeat;
	background-size: 16px auto;
	background-position: right 20px bottom 17px;
}
a.btn.live {
	width: 400px;
	margin: 50px auto 0 auto;
	padding: 16px;
	font-size: 18px;
	line-height: 1.4;
	background-image: url(../images/ico_arrow02.svg);
	background-repeat: no-repeat;
	background-size: 20px auto;
	background-position: left 25px bottom 22px;
}
}

/* bottomArea*/
#bottomArea {
	width: 100%;
	padding: 10px;
	text-align: center;
	background-color: #000;
}
#bottomArea #footer {
	width: 100%;
	margin: 0;
	padding: 10px;
	text-align: center;
}
#bottomArea .logo {
	display: block;
	width: 100%;
	margin: 0 0 10px 0;
}
#bottomArea .copyright {
	width: 100%;
	font-size: 10px;
	line-height: 1.4;
	letter-spacing: .3em;
	color: #fff;
}
@media only print, screen and (min-width: 641px) {
#bottomArea {
	text-align: center;
}
#bottomArea #footer {
	width: 1000px;
	margin: 0 auto;
	padding: 10px;
}
#bottomArea .logo {
	width: 60px;
	margin: 0 30px 0 0;
	padding-bottom: 5px;
	display: inline-block;
}
#bottomArea .copyright {
	width: 880px;
	display: inline-block;
	font-size: 10px;
	line-height: 1.4;
	text-align: left;
}
}