/*	main
============================== */
#contentsArea .contentsBlock {
	margin:0 auto;
	background-color: rgba(255, 255, 255, 0.9); box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.08);
	position: relative;
}
main {
	background-color: #fdf0d4;
}
@media all and (min-width: 1200px) {
	#contentsArea .contentsBlock { padding: 10px; max-width:1060px; margin: 0 auto;}
main {
	max-width:1060px;
}
}
@media all and (min-width: 992px) {
	
main:not(:last-child) {
	margin-bottom:96px;
}
}
@media all and (max-width: 991.98px) {
	#contentsArea .contentsBlock {padding: 8px;}
	#contentsArea .contentsBlock#player main {padding-bottom: 20px;}
main:not(:last-child) {
	margin-bottom:48px;
}
}

/*	.diagram
============================== */

div.diagram1 {
	position:relative;
	height:0;
	padding-top: -webkit-calc(1400 / 1060 * 100%);
	padding-top: calc(1400 / 1060 * 100%);
	background-image:url(../img/chart/chart.jpg);
	background-size:contain;
}
div.diagram2 {
	position:relative;
	height:0;
	padding-top: -webkit-calc(1605 / 1060 * 100%);
	padding-top: calc(1605 / 1060 * 100%);
	background-image:url(../img/chart/player.jpg?1);
	background-size:contain;
}
div.diagram ul {
	display:block;
	position:absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
div.diagram ul li {
	position: absolute;
}
div.diagram ul li a, div.diagram ul li a img {
	display:block;
	position:absolute;
	cursor:pointer;
}

/* テストでクリックエリア確認のため入れてます（公開時は削除）
div.diagram ul li a img {
	background-color:hsla(114,87%,52%,0.4);
}*/ 
div.diagram ul li.sz-xl a,
div.diagram ul li.sz-xl a img {
	width:210px;
	height:330px;
}
div.diagram ul li.sz-l a,
div.diagram ul li.sz-l a img {
	width:180px;
	height:280px;
}
div.diagram ul li.sz-m a,
div.diagram ul li.sz-m a img {
	width:160px;
	height:250px;
}
div.diagram ul li.sz-s a,
div.diagram ul li.sz-s a img {
	width:140px;
	height:215px;
}
div.diagram ul li.sz-team a,
div.diagram ul li.sz-team a img {
	width:290px;
	height:90px;
}
div.diagram ul li.chara_01 {
	left:495px;
	top:380px;
}
div.diagram ul li.chara_02 {
	left:785px;
	top:380px;
}
div.diagram ul li.chara_03 {
	left:215px;
	top:380px;
}
div.diagram ul li.chara_04 {
	left:255px;
	top:820px;
}
div.diagram ul li.chara_05 {
	left:800px;
	top:80px;
}
div.diagram ul li.chara_06 {
	left:645px;
	top:850px;
}
div.diagram ul li.chara_07 {
	left:55px;
	top:820px;
}
div.diagram ul li.chara_08 {
	left:525px;
	top:1155px;
}
div.diagram ul li.chara_09 {
	left:485px;
	top:915px;
}
div.diagram ul li.chara_10 {
	left:180px;
	top:80px;
}
div.diagram ul li.chara_11 {
	left:565px;
	top:115px;
}
div.diagram ul li.chara_12 {
	left:55px;
	top:495px;
}
div.diagram ul li.chara_13 {
	left:385px;
	top:80px;
}
div.diagram ul li.chara_14 {
	left:875px;
	top:1120px;
}
div.diagram ul li.chara_15 {
	left:875px;
	top:850px;
}
div.diagram ul li.chara_31 {
	left:685px;
	top:1155px;
}
div.diagram ul li.chara_02-2 {
	left:95px;
	top:120px;
}
div.diagram ul li.chara_16 {
	left:335px;
	top:200px;
}
div.diagram ul li.chara_17 {
	left:525px;
	top:200px;
}
div.diagram ul li.chara_18 {
	left:715px;
	top:200px;
}
div.diagram ul li.chara_19 {
	left:145px;
	top:480px;
}
div.diagram ul li.chara_20 {
	left:335px;
	top:480px;
}
div.diagram ul li.chara_21 {
	left:525px;
	top:480px;
}
div.diagram ul li.chara_22 {
	left:715px;
	top:480px;
}
div.diagram ul li.chara_23 {
	left:145px;
	top:760px;
}
div.diagram ul li.chara_24 {
	left:335px;
	top:760px;
}
div.diagram ul li.chara_25 {
	left:505px;
	top:760px;
}
div.diagram ul li.chara_07-2 {
	left:185px;
	top:1160px;
}
div.diagram ul li.chara_26 {
	left:395px;
	top:1225px;
}
div.diagram ul li.chara_27 {
	left:565px;
	top:1225px;
}
div.diagram ul li.chara_28 {
	left:735px;
	top:1225px;
}
div.diagram ul li.chara_29 {
	left:870px;
	top:795px;
}
div.diagram ul li.chara_30 {
	left:705px;
	top:795px;
}

div.diagram ul li.team01 {
	left:745px;
	top:730px;
}
div.diagram ul li.team02 {
	left:100px;
	top:1120px;
}
div.diagram ul li.page {
	left:385px;
	top:1485px;
}

div.diagram ul li#blazebulls, div.diagram ul li#sharkhead { width: 100%; height: 0;}
div.diagram ul li#blazebulls {
	left:0px;
	top:0px;
}
div.diagram ul li#sharkhead {
	left:0px;
	top:1050px;
}

@media all and (min-width: 992px) {
	.chartadd { position: absolute; top:25px; left:25px;}
	#player .chartadd { position: absolute; top:25px; right:25px; text-align: right;}
}
@media all and (max-width: 991.98px) {
	.chartadd { position: absolute; bottom:13px; left:13px; font-size: 0.7em; line-height: 1.2em;}

}

@media print {
div.diagram {
	display:none;
}
}