@charset "UTF-8";
/* CSS Document */
#header .container {
	text-align: right;
}

#visual {
	position: relative;
	line-height:0;
}
#visual h1#title {
position:absolute;
width:40%;
top:20%;
left:10px;
z-index:99;
}
@media only screen and (min-width: 768px) {
#visual h1#title {
left:50px;
}
}

#news{
	background: url(../images/top/bg_s.png) no-repeat top left;
	padding:40px 10px;
}
#news p.tit{
	font-size:24px;
	font-weight:bold;
	text-align:center;
	line-height:0.9;
}
#news p.tit span{
	/*background-color:#E84013;*/
	background: url(../images/common/bg.png) no-repeat top left;
	background-size: 100% 100%;
}

#news h2{
	font-weight:bold;
	text-align:center;
	line-height:0.9;
	margin-bottom:20px;
}

.newsBox{
	display: flex;
	flex-flow: column;/* flex-flow:column;はアイテムを縦に並べる */
	margin-bottom:20px;
}
.newsBox dl{
	display: flex;
	flex-flow: row;/* flex-flow:row;はアイテムを横に並べる */
}
.newsBox dl dt{
	margin-right:10px;
	padding:0px 8px;
}
.newsBox dl dd{
	color:#FFF;
	padding:0px 8px;
}
.newsBox dl dd.cat_1{
	background-color:#009966;
}
.newsBox dl dd.cat_4{
	background-color:#3399CC;
}
.newsBox dl dd.cat_5{
	background-color:#E84013;
}
.newsBox p{
	padding:0px 8px;
}
@media only screen and (min-width: 768px) {
#news{
	padding:100px 0;
}
#news p.tit {
	font-size:51px;
	margin-bottom:30px;
}
#news h2{
	margin-bottom:40px;
	font-size: 24px;
}
.newsBox{
	flex-flow: row;/* flex-flow:row;はアイテムを横に並べる */
	width:840px;
	margin:0 auto 20px;
}
.newsBox dl dd{
	margin-right:10px;
}
.newsBox p{
	margin:0;
}
}



#aboutbg{
	background: #000;
}
#about{
	padding:40px 0;
	color:#FFF;
	/*background: #000 url(../images/top/bg_b.png) no-repeat bottom left;*/
	background: url(../images/top/bg_b.png) no-repeat top right,url(../images/top/bg_b.png) no-repeat bottom left;
}
#about .container {
	margin: 0 auto 0 auto;
	padding: 30px 20px;
	max-width: 820px;
}

#about p.tit{
	font-size:24px;
	font-weight:bold;
	text-align:center;
	line-height:0.9
}
#about p.tit span{
	/*background-color:#E84013;*/
	background: url(../images/common/bg.png) no-repeat top left;
	background-size: 100% 100%;
}
#about h2{
	font-weight:bold;
	text-align:center;
	margin-bottom:20px;
	font-size: 16px;
}

#about .about01{
	text-align:left;
	padding-bottom:30px;
}
#wrap #about .about01 p.copy{
	padding-top:30px;
	text-align:center;
}
#about .about02{
	max-width:600px;
	margin:0 auto;
	padding-top:10px;
}
#about .about02bg {
  height: 1px;
    position: relative;
	margin-bottom:62px;
}
#about .about02bg::before {
    content: "";
    background-image: linear-gradient(to right, #FFF, #FFF 3px, transparent 3px, transparent 8px);
    background-size: 8px 1px;
    background-repeat: repeat-x;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
#wrap #about .about02 p{
	font-size:14px;
}

@media only screen and (min-width: 768px) {
#about{
	padding:100px 0 130px;
}
#about p.tit {
	font-size:51px;
	margin-bottom:47px;
}
#about h2{
	margin-bottom:30px;
	font-size: 19px;
}
#about .about01{
	padding-bottom:50px;
	text-align:center;
}
#wrap #about .about02 p{
	font-size:18px;
}

}

#message{
	/*background: url(../images/top/bg_s.png) no-repeat top left,url(../images/top/bg_s.png) no-repeat bottom right;
	padding:40px 10px;*/
	padding:63px 20px;
	text-align:center;
}
#message img{
	line-height:0;
	margin:0;
}
#message p.tit{
	font-size:24px;
	font-weight:bold;
	text-align:center;
	line-height:0.9
}
#message p.tit span{
	/*background-color:#E84013;*/
	background: url(../images/common/bg.png) no-repeat top left;
	background-size: 100% 100%;
}
#message h2{
	font-weight:bold;
	text-align:center;
	margin-bottom:10px;
	font-size: 16px;
}
#message p.copy{
	text-align:center;
}

.main-inner{
	display: flex;
	flex-flow: column;/* flex-flow:column;はアイテムを縦に並べる */
}
#message div.imgBox {
	text-align:center;
}
#message div.textBox {
	text-align:left;
}
#message dl {
	text-align:center;
	margin-bottom:20px;
}
#message dt {
	font-weight:bold;
}
@media only screen and (min-width: 768px) {
#message{
	padding: 63px 10px;
	/*padding:100px 0;*/
}
#message p.tit {
	font-size:51px;
	margin-bottom:30px;
}
#message h2{
	margin-bottom:30px;
	font-size: 19px;
}

.main-inner{
	flex-flow: row;/* flex-flow:row;はアイテムを横に並べる */
}
#message .main-inner div.imgBox {
	flex: 0 0 450px;/* ウィンドウ幅に連動させず、幅340pxで固定 */
	order: 1;/* 回り込みを右へ */
}
#message .main-inner div.textBox {
	flex: 1 1 auto;/* ウィンドウ幅に連動して伸縮 */
	order: 2;/* 回り込みを右へ */
	padding-left:40px;
}
#message dl {
	margin-bottom:30px;
}

}

#player{
padding:0;
	color:#FFF;
	background: linear-gradient(90deg,#000 0%,#000 50%,#E84013 50%,#E84013 100%);
}
#player .container {
	margin: 0 auto 0 auto;
	padding:60px 10px 40px;
	max-width: 1100px; 
	background: url(../images/top/bgp.png) no-repeat center center;
}

#player p.tit{
	font-size:24px;
	font-weight:bold;
	text-align:center;
	line-height:0.9
}
#player p.tit span{
	/*background-color:#E84013;*/
	background: url(../images/common/bg.png) no-repeat top left;
	background-size: 100% 100%;
}
#player h2{
	font-weight:bold;
	text-align:center;
	margin-bottom:20px;
	font-size: 16px;
}
#player .content {
	margin: 0 0 20px;
	padding: 0 10px;
	max-width: 600px;
}
#player h3.tit01{
	background: url(../images/top/ic01_h3.png) no-repeat top center;
	padding:70px 0 0 0;
	text-align:center;
}

#player h3.tit02{
	background: url(../images/top/ic02_h3.png) no-repeat top center;
	padding:70px 0 0 0;
	text-align:center;
}

#player .playerList{
	display: flex;
	flex-wrap: wrap; /* flex-flow:column;はアイテムを縦に並べる */
	padding:10px 0 20px;
	margin-bottom:40px;
	clear:both;
}
#player .playerList .playerBox{
	width:100%;
	padding:3px;
	text-align:center;
	line-height:0;
}
#player .playerList .playerBox img{
	line-height:0;
}

@media only screen and (min-width: 768px) {
#player{
}
#player .container {
	padding:100px 0;
}
#player .content {
	margin: 0 0 40px;
	padding: 0;
}

#player p.tit {
	font-size:51px;
	margin-bottom:30px;
	text-align:left;
}
#player h2{
	margin-bottom:30px;
	text-align:left;
	font-size: 19px;
}
#player h3.tit01{
	background: url(../images/top/ic01_h3.png) no-repeat center left;
	padding:30px 0 30px 60px;
	font-size:24px;
	text-align:left;
}
#player h3.tit02{
	background: url(../images/top/ic02_h3.png) no-repeat center left;
	padding:30px 0 30px 60px;
	font-size:24px;
	float:right;
	text-align:left;
}

#player .playerList{
	padding:20px 0px;
}
#player .playerList .playerBox{
	width:33%;
	padding:3px;
}

}

#cheer{
	background: url(../images/top/bg_s.png) no-repeat bottom left;
	padding:40px 20px;
}
#cheer p.tit{
	font-size:24px;
	font-weight:bold;
	text-align:center;
	line-height:0.9;
}
#cheer p.tit span{
	/*background-color:#E84013;*/
	background: url(../images/common/bg.png) no-repeat top left;
	background-size: 100% 100%;
}
#cheer h2{
	font-weight:bold;
	text-align:center;
	line-height:0.9;
	margin-bottom:20px;
	font-size: 16px;
}
#cheer .cheerList{
	display: flex;
	flex-flow: column;/* flex-flow:column;はアイテムを縦に並べる */
	padding:10px 0 20px;
	margin-bottom:40px;
	clear:both;
}
#cheer .cheerList .cheerBox{
	width:100%;
	padding:2% 2% 90px 2%;
	border:4px solid #E84013;
	margin:0 auto 20px;
	border-radius:10px;
	background: #FFF url(../images/top/cheer.png) no-repeat bottom left;
	position: relative;
}
#cheer .cheerList .cheerBox p.name{
	position:absolute;
	bottom:0px;
	right:10px;
	padding:8px;
}
#cheer .cheerList .cheerBox p.name span{
	border-bottom:1px solid #E84013;
}

@media only screen and (min-width: 768px) {
#cheer{
	padding:100px 0;
}
#cheer p.tit {
	font-size:51px;
	margin-bottom:30px;
}
#cheer h2{
	margin-bottom:40px;
	font-size: 19px;
}
#cheer .cheerList{
	flex-flow: row;/* flex-flow:row;はアイテムを横に並べる */
	padding:20px 0px;
}
#cheer .cheerList .cheerBox{
	width:31%;
	padding:1% 1% 60px 1%;
	margin:0 1%;
}

}


#fb{
	padding:40px 0;
	color:#FFF;
	background: #000 url(../images/top/bg_b.png) no-repeat bottom right;
}
#fb .container {
	margin: 0 auto 0 auto;
	padding: 30px 20px;
	width: 100%;
	max-width: 500px;
}

#fb .fb-page{
	margin:0 auto 30px;
}

@media only screen and (min-width: 768px) {
#fb{
	padding:100px 0 130px;
}
#fb .container {
	width: 500px;
}
}

a.bt{
width:80%;
text-align:center;
display:block;
padding:12px;
background-color:#E84013;
color:#FFF;
font-weight:bold;
margin:0 auto 20px;
}

a.bt2{
width:80%;
text-align:center;
display:block;
padding:12px;
background-color:#FFF;
border:2px solid #E84013;
color:#E84013;
font-weight:bold;
margin:0 auto 20px;
}

@media only screen and (min-width: 768px) {
a.bt{
width:400px;
text-align:center;
display:block;
padding:20px;
background-color:#E84013;
color:#FFF;
font-weight:bold;
margin:0 auto 20px;
}
a.bt2{
width:400px;
text-align:center;
display:block;
padding:20px;
background-color:#FFF;
border:2px solid #E84013;
color:#E84013;
font-weight:bold;
margin:0 auto 20px;
}
}