/* =================================
	chart CSS
================================= */

/*	reset
============================== */
@media all and (min-width: 768px) {
.cmn main div.brd > div.inner {
	padding:0 5px 30px;
}
.p_chart .contents{
	padding: 0 0 12px;
}
}
@media all and (max-width: 767px) {
.p_chart .contents{
	padding: 0 0 8px;
	margin: 0;
}
}

/*	chart
============================== */
.chart {
	position:relative;
	background-image:url(../chart/img/chart_5.jpg?20190818);
	background-repeat:no-repeat;
	background-position:left top;
	margin: 0 auto;

}
.chart ul {
	position: absolute;
	list-style-type:none;
	}
.chart ul li {
	position:absolute;
	}
.chart ul li#chara01 { left:279px; top:411px;}
.chart ul li#chara02 { left:544px; top:424px;}
.chart ul li#chara03 { left:52px; top:506px;}
.chart ul li#chara04 { left:52px; top:692px;}
.chart ul li#chara05 { left:200px; top:692px;}
.chart ul li#chara06 { left:386px; top:1073px;}
.chart ul li#chara07 { left:771px; top:1371px;}
.chart ul li#chara08 { left:52px; top:174px;}
.chart ul li#chara09 { left:78px; top:1394px;}
.chart ul li#chara10 { left:204px; top:1394px;}
.chart ul li#chara11 { left:646px; top:1528px;}
.chart ul li#chara12 { left:529px; top:174px;}
.chart ul li#chara13 { left:653px; top:174px;}
.chart ul li#chara14 { left:777px; top:174px;}
.chart ul li#chara15 { left:87px; top:878px;}
.chart ul li#chara16 { left:200px; top:878px;}
.chart ul li#chara17 { left:87px; top:1011px;}
.chart ul li#chara18 { left:200px; top:1011px;}
.chart ul li#chara19 { left:87px; top:1144px;}
.chart ul li#chara20 { left:771px; top:1528px;}
.chart ul li#chara21 { left:200px; top:1144px;}
.chart ul li#chara22 { left:628px; top:681px;}
.chart ul li#chara23 { left:750px; top:681px;}
.chart ul li#chara24 { left:394px; top:1304px;}
.chart ul li#chara25 { left:176px; top:108px;}
.chart ul li#chara26 { left:387px; top:752px;}
.chart ul li#chara27 { left:624px; top:1344px;}
.chart ul li#chara28 { left:755px; top:424px;}
.chart ul li#chara29 { left:352px; top:108px;}
.chart ul li#chara30 { left:598px; top:1090px;}
.chart ul li#chara31 { left:785px; top:985px;}
.chart ul li#chara32 { left:53px; top:1287px;}
.chart ul li#chara33 { left:598px; top:903px;}

.chart ul li a {
	display:block;
	/*background-color:#fc0;
	opacity:0.5;*/
	text-decoration:none;
	}
.chart ul li a img {
	display:block;
	}
.chart ul li.sz-l1 a img {
	width:190px;
	height:240px;
	}
.chart ul li.sz-l a img {
	width:165px;
	height:210px;
	}
.chart ul li.sz-m a img {
	width:135px;
	height:170px;
	}
.chart ul li.sz-s a img {
	width:113px;
	height:143px;
	}
.chart ul li.sz-s2 a img {
	width:100px;
	height:127px;
	}
.chart ul li#chara32 a img {
	width:282px;
	height:59px;
	}
/*
p.clicktodetail {
	font-size:75%;
	text-align:center;
	line-height:1.25;
}
*/

@media print {
.chart ul li#mikuri a img {
	background-color:#fff;
}
}
@media all and (min-width: 768px) {
.chart {
	width:960px;
	height:1726px;
}
.chart ul li a:hover {
	background-color:#fff;
	opacity:0.3;
}
}
@media all and (max-width: 767px) {
.chart {
	overflow:hidden;
	background-size:cover;
	height:0;
	padding-top:179.7916%;
}
.chart ul {
	left:0;
	top:0;
	width:100%;
	height:100%;
}
}

/*	team
============================== */
.team {
	position:relative;
	background-image:url(../chart/img/team_4.jpg);
	background-repeat:no-repeat;
	background-position:left top;
	margin: 10px auto 0;
}
@media all and (min-width: 768px) {
.team {
	width:960px;
	height:1940px;
}
}
@media all and (max-width: 767px) {
.team {
	overflow:hidden;
	background-size:cover;
	height:0;
	padding-top:202.0833%;
}
}

/* button */
.button,.button2{display:block;text-align:center;}
.button a{display:block;margin:0 auto;}
.button2 a{display:block;margin:0 auto;}
.button a {display: block;cursor: pointer;margin: 0 auto;padding: 30px; color: #000;font-size:160%;text-align: center;text-decoration: none;font-weight: 800;border-radius: 50px;
                       background-color: #fafb37;box-shadow: 0 6px 0 #d4d4d4, 0 12px 0 rgba(0,0,0,0.1);-webkit-transition: color 0.3s,
                       background-color 0.3s, box-shadow 0.3s, -webkit-transform 0.3s;transition: color 0.3s, background-color 0.3s, box-shadow 0.3s, transform 0.3s;}
.button a:hover {background-color: #fafb37; box-shadow: 0 3px 0 #d4d4d4, 0 6px 0px rgba(0,0,0,0.1); -webkit-transform: translateY(3px);transform: translateY(3px);}
.button a:active {color: #1e1e1e;background-color: #fafb37;box-shadow: 0 0 0 #d4d4d4, 0 0 0px rgba(0,0,0,0.1);-webkit-transform: translateY(6px);transform: translateY(6px);transition-duration: 0.1s;}

.button2 a {display: block;cursor: pointer;margin: 0 auto;padding: 30px; color: #000;font-size:160%;text-align: center;text-decoration: none;font-weight: 800;border-radius: 50px;
                       background-color: #fafb37;box-shadow: 0 6px 0 #d4d4d4, 0 12px 0 rgba(0,0,0,0.1);-webkit-transition: color 0.3s,
                       background-color 0.3s, box-shadow 0.3s, -webkit-transform 0.3s;transition: color 0.3s, background-color 0.3s, box-shadow 0.3s, transform 0.3s;}
.button2 a:hover {background-color: #fafb37; box-shadow: 0 3px 0 #d4d4d4, 0 6px 0px rgba(0,0,0,0.1); -webkit-transform: translateY(3px);transform: translateY(3px);}
.button2 a:active {color: #1e1e1e;background-color: #fafb37;box-shadow: 0 0 0 #d4d4d4, 0 0 0px rgba(0,0,0,0.1);-webkit-transform: translateY(6px);transform: translateY(6px);transition-duration: 0.1s;}


@media all and (min-width: 768px) {
.button a{display:block;width:380px; padding:20px 0;font-size:140%; line-height:100%;margin:0px auto 60px;}
.button2 a{display:block;width:600px; padding:20px 0;font-size:140%; line-height:100%;margin:30px auto 0;}
}
@media all and (max-width: 767px) {
.button a{display:block;width:70%; padding:1em 0;font-size:100%; line-height:100%;margin:0em auto 3em;font-weight:bold;}
.button2 a{display:block;width:90%; padding:1em;font-size:100%; line-height:100%;margin:1.5em auto 0;font-weight:bold;}
}