@charset "UTF-8";
/* CSS Document */

/*-------------------------------------------------------------------------
	.tab_content
/*-----------------------------------------------------------------------*/
#sideWrap #side{
	margin:0 0 20px 0;
	}
#main .apealttl {
	margin:0 auto 30px auto;
	padding-top: 18px;
	background:none;
	padding-bottom:0;
	background: url("../img/index/bgMain.png") repeat;
	}
#main .apealttl h4 {
	width: 350px;
	margin: 0 auto;
	padding-bottom: 18px;
	background: none;
}
#main .lead {
	margin:0 auto 30px auto;
	font-size: 1.6rem;
	font-weight: bold;
	text-align: center;
	}
#main .lead span {
	font-size: 1rem;
}
#main .rank ul {
	float: left;
}
#main .rank ul li {
	vertical-align: middle;
  font-size: 1.4rem;
	font-weight: bold;
	margin: 0.5rem auto;
	padding-left: 20px;
	text-indent: -20px;
}
#main .rank .icon {
	position: relative;
    top: 4px;
}
#main .character {
	width:610px;
	margin:0 auto;
	}
#main .character .icon {
	 fill: #FFB3CA;
}
#main h5 {
	margin:0 auto;
	margin-right: 14px;
	float:left;
	}
#main .border {
/*	width:640px;
	height:4px;
	margin:30px auto;*/
	}
#main .character {
	width:650px;
	margin:0 auto 20px;
	padding-bottom: 20px;
	background: url(../img/index/ttlBorder.jpg) no-repeat center bottom;
	overflow: hidden;
	}
#main .glow {
	width:650px;
	margin:0 auto 20px;
	padding-bottom: 20px;
	background: url(../img/index/ttlBorder.jpg) no-repeat center bottom;
	overflow: hidden;
	}
#main .glow ul {
	margin-top: 10px;
}
#main .glow .icon {
	fill: #FFDEB3;
}
#main .occupation {
	width:650px;
	margin:0 auto;
	overflow: hidden;
	}
#main .occupation .icon {
	fill: #C3EDB3;
}
#main .info {
	position:relative;
	width:680px;
	height:270px;
	margin:50px auto 0 auto;
	}
#main .comment {
	position:absolute;
	width:298px;
	height:118px;
	bottom: -20px;
  left: 320px;
	}
#main .btn {
	width:280px;
	height:34px;
	margin:20px auto 50px auto;
	}

/*-------------------------------------------------------------------------
  ------------------------------------------------------------------------
	ブレイクポイント
	940px未満 @media screen and (max-width: 939px) {...}
	560px未満 @media screen and (max-width: 559px) {...}
  ------------------------------------------------------------------------
/*-----------------------------------------------------------------------*/
@media screen and (max-width: 939px) {
	#main h5 {
		float: none;
		text-align: center;
	}
	#main .character,
	#main .glow,
	#main .occupation {
		width: 100%;
	}
	#main .apealttl h4 {
		width: 280px;
	}
	#main .rank ul {
		float: none;
	}
	#main .rank ul li {
		margin: 1rem auto;
	}
	#main .info {
		width: 100%;
		height: auto;
		margin-top: 0;
	}
	#main .comment {
		bottom: -70px;
		left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
	}
	#main .btn {
		margin-top: 75px;
		margin-bottom: 0;
	}
}