/* Add additional stylesheets below
-------------------------------------------------- */
/*
  Bootstrap's documentation styles
  Special styles for presenting Bootstrap's documentation and examples
*/



/* Body and structure
-------------------------------------------------- */

body {
  position: relative;
  padding-top: 5px;
	background: #FFFCEE;
	font-family: "メイリオ","Meiryo","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","ＭＳ Ｐゴシック","Osaka",sans-serif;
}

/* Top Page H1 */

#header {
	margin:0;
	padding:0 0 30px 0;
	background:url(../img/common/headerBg.png) center bottom repeat-x;
}

#header h1.summary,
#header .summary {
margin:0;
	margin-right:20px;
padding:5px 0;
text-align:right;
font-size:12px;
font-weight:normal;
	line-height:1;
}

#pageNavi {
	margin:0 0 30px 0;
	padding:15px 0;
	background:#A3D901;
}
.topCatch {
	margin:0;
	padding-top:30px;
	font-size: 24px;
	line-height: 1.5;
	font-weight: bold;
	text-align: center;
	color:#FFF;
}
.topNote {
	margin:20px 0;
	padding:0;
	font-size:12px;
	line-height:1.7;
	color:#400000;
}

.pankuzu {
	margin:0;
	padding:0;
	color:#000;
}
.pankuzu a {
	color:#000;
}
.pankuzu a:hover {
	color:#FFF;
}

.side .rank3Title {
	width:100%;
	margin:0 0 20px 0;
	padding:0;
}
.side .rank3Title .sub {
	width:60px;
	margin-right:10px;
	background-color: #FF7F00;
	color:#FFF;
	text-align: center;
	padding:15px 0;
	float:left;
}
.side .rank3Title .main {
	padding:5px 0;
	font-weight:bold;
	line-height:1.5;
	float:left;
}

.side .rank3Box {
	margin:0 0 20px 0;
	padding:0;
	background-color:#FFF;
}
.side .rank3Box .rank3Title {
	margin:0 0 10px 0;
	padding:10px;
}
.side .rank3Box .rank3Title .rank {
	width:45px;
	margin-right:10px;
	padding:10px 0;
	text-align: center;
	background-color:#00A3D9;
	color:#FFF;
	float:left;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
}
.side .rank3Box .rank3Title .rank.no2 {
	background-color:#33B5E1;
}
.side .rank3Box .rank3Title .rank.no3 {
	background-color:#66C8E8;
}
.side .rank3Box .rank3Title .companyName {
	padding-top:10px;
	font-size:20px;
	font-weight: bold;
}

.side .rank3Box .rankRating {
	margin:0;
	padding:10px;
	border-bottom:#999999 dotted 1px;
}
.side .rank3Box .rankRating .ratingTitle {
	margin:5px 10px 5px 0;
	padding:0 10px 0 0;
	color:#00A3D8;
	font-size:12px;
	font-weight:bold;
	border-right:#333 solid 1px;
	float:left;
}

ul.sideMenu {
	margin:0 0 30px 0;
	padding:0;
	list-style: none;
}
ul.sideMenu li {
	margin:0;
	padding:0;
	border-top:#ccc dotted 1px;
}
ul.sideMenu li.menuTitle {
	border:none;
}
ul.sideMenu li.menuTitle a {
	padding:15px 10px;
	border:none;
	background: #FFF;
	font-weight:bold;
}
ul.sideMenu li a {
	padding:15px 10px;
	background: #FFF;
	display: block;
}
ul.sideMenu li a:hover {
	background:#00A3D9;
	color:#FFF;
}

ul.sideMenu li.best5-other{
  padding: 15px 10px;
  background: #FFF;
  display: block;
  font-weight:bold;
  border-top:#ccc dotted 1px;
}




.rate {
  position: relative;
  display: inline-block;
  width: 100px;
  height: 20px;
  font-size: 28px;
}
.rate:before, .rate:after {
  position: absolute;
  top: 0;
  left: 0;
  content: '★★★★★';
  display: inline-block;
  height: 20px;
  line-height: 20px;
	padding-top:5px;
}
.rate:before {
  color: #ddd; /*星色*/
}
.rate:after {
  color: #FF7F00;
  overflow: hidden;
  white-space: nowrap; /*重要*/
}

.rate00:after{width: 0;}
.rate05:after{width: 14px;}
.rate10:after{width: 28px;}
.rate15:after{width: 42px;}
.rate20:after{width: 56px;}
.rate25:after{width: 70px;}
.rate30:after{width: 84px;}
.rate35:after{width: 98px;}
.rate36:after{width: 100px;}
.rate37:after{width: 102px;}
.rate38:after{width: 104px;}
.rate39:after{width: 106px;}
.rate40:after{width: 112px;}
.rate41:after{width: 119px;}
.rate42:after{width: 121px;}
.rate43:after{width: 122px;}
.rate44:after{width: 124px;}
.rate45:after{width: 126px;}
.rate50:after{width: 140px;}

.side .rank3Box .linkBox {
	margin:0;
	padding:20px 0;
	text-align:center;
}
.side .rank3Box .linkBox a {
	margin:0;
	padding:5px 10px;
	display: inline-block;
	border: #ccc solid 1px;
	font-weight:bold;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
}
.side .rank3Box .linkBox a:hover {
	border:#00A3D9 solid 1px;
	background:#00A3D9;
	color:#FFF;
}



.main h2.top,
.main h1.cont {
	color: #FF7F00;
	font-size:26px;
	margin:0 0 10px 0;
	padding:0;
}
.main h3.top {
	color: #FFF;
	background:#FF7F00;
	font-size:22px;
	margin:0 0 10px 0;
	padding:22px 10px 22px 90px;
	line-height:1;
	background-color:#FF4000;
}
.main h3.top.rank01 {
	background:#FF4000 url(../img/common/rankIcon01.png) 20px center no-repeat;
}
.main h3.top.rank02 {
	background:#FF4000 url(../img/common/rankIcon02.png) 20px center no-repeat;
}
.main h3.top.rank03 {
	background:#FF4000 url(../img/common/rankIcon03.png) 20px center no-repeat;
}
.main h3.top.rank04 {
	background:#FF4000 url(../img/common/rankIcon04.png) 20px center no-repeat;
}
.main h3.top.rank05 {
	background:#FF4000 url(../img/common/rankIcon05.png) 20px center no-repeat;
}

.main h2.cont {
	color: #000;
	border-bottom:#A3D901 solid 3px;
	background:url(../common/img/common/h2Bg.png) left bottom no-repeat;
	font-size:22px;
	margin:0 0 15px 0;
	padding:10px 5px 5px 50px;
	line-height:1.2;
}
.main h2.cont a {
	color: #000;
	text-decoration: underline;
}
.main h2.cont a:hover {
	color: #81AB01;
	text-decoration: none;
}

.main h3.cont {
	color: #000;
	border-bottom:#A3D901 dotted 1px;
	font-size:18px;
	margin:0 0 15px 0;
	padding:10px 5px 5px 5px;
	line-height:1;
}
.main h3.cont a {
	color: #000;
	text-decoration: underline;
}
.main h3.cont a:hover {
	color: #81AB01;
	text-decoration: none;
}

table.rateCom{
  width: 100%;
}
table.rateCom th,
table.rateCom td{
  border: 1px solid #d8d8d8;
  text-align: left;
  line-height: 1.7;
  width: 50%;
  padding: 16px;
}

table.rateCom th{
  background-color: #fff5e6;
}

.main .linkBox {
	margin:0;
	padding:10px 0 0 0;
	text-align:right;
}
.main .linkBox a {
	margin:0;
	padding:5px 10px;
	display: inline-block;
	border: #ccc solid 1px;
	background:#FFF;
	font-weight:bold;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
}
.main .linkBox a:hover {
	border:#00A3D9 solid 1px;
	background:#00A3D9;
	color:#FFF;
}

.main .linkBox02 {
	margin:0;
	padding:10px 0 20px 0;
	text-align:center;
}

.main .linkBox02.green a {
	margin:0;
	padding:10px 10px;
	display: inline-block;
	background:#59B200;
	color:#FFF;
	font-size:16px;
	font-weight:bold;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
}
.main .linkBox02.green a:hover {
	background:#3e7704;
	color:#FFF;
}

.main .linkBox02.orange a {
	margin:0;
	padding:10px 10px;
	display: inline-block;
	background:#ff7f00;
	color:#FFF;
	font-size:16px;
	font-weight:bold;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
}
.main .linkBox02.orange a:hover {
	background:#d46b03;
	color:#FFF;
}


.textBox {
	margin:0 0 50px 0;
	padding:0;
	line-height:2;
}

.rankBox01 {
	margin:0 0 50px 0;
	padding:0;
	background:#FFF;
}
.rankBox01 .titleBox {
	margin:0;
	padding:0;
}
.rankBox01 .titleBox .main {
	width:57%;
	margin:0;
	padding:0;
	float:left;
}
.rankBox01 .titleBox .rankTitle {
	width:100%;
	height:60px;
	margin:0;
	padding:22px 20px 0 20px;
	background-color:#FFBF00;
	color:#000;
	font-size:26px;
	font-weight:bold;
	border: #FFBF00 solid 1px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
	float:left;
}
.rankBox01 .titleBox .sub {
	width:43%;
	margin:0;
	padding:0;
	float:left;
}
.rankBox01 .titleBox .subTitle {
	width:100%;
	height:60px;
	margin:0;
	padding:10px 10px 0 10px;
	background-color:#FFBF00;
	border: #FFBF00 solid 1px;
	border-left:none;
	color:#000;
	font-size:26px;
	font-weight:bold;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
.rankBox01 .titleBox .subTitle .numTitle {
	margin:0;
	padding:0 0 0 10px;
	font-size:12px;
	text-align:center;
	border-left:#FFF dotted 1px;
	float:left;
}
.rankBox01 .titleBox .subTitle .number {
	margin:0;
	padding:10px 0 0 0;
	font-size:24px;
	text-align:center;
	float:right;
}
.rankBox01 .titleBox .subTitle .number span {
	font-size:14px;
}

.rankBox01 .mainBox .main {
	width:65%;
	margin:0;
	padding:0 20px;
	background: #EEEEEE;
	float:left;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
.rankBox01 .mainBox .sub {
	width:35%;
	margin:0;
	padding:0 10px;
	background:#FFF;
	float:left;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.rankBox01 .mainBox .main02 {
	width:35%;
	margin:0;
	padding:0 20px;
	background: #EEEEEE;
	float:left;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
.rankBox01 .mainBox .sub02 {
	width:65%;
	margin:0;
	padding:0 10px;
	background:#FFF;
	float:left;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.rankBox01 .mainBox .main .comment,
.rankBox01 .mainBox .main02 .comment{
	color:#00A3D8;
	font-size:24px;
	font-weight:bold;
	line-height:1.5;
	margin:10px 0;
}
.rankBox01 .mainBox .main .note,
.rankBox01 .mainBox .main02 .note {
	line-height:1.5;
	margin:0 0 10px 0;
}
.rankBox01 .mainBox .main02 .note {
	margin-bottom:30px;
}

/*
.rankBox01 .mainBox .main .caseBox {
	margin:0 -20px;
	padding:10px 20px;
	background:#F9F9F9;
}
.rankBox01 .mainBox .main .caseBox .caseTitle {
	margin:0;
	padding:10px 0;
	color:#00A3D8;
	font-weight:bold;
}
.rankBox01 .mainBox .main .caseBox .caseImage {
	width:46%;
	margin:0 2% 10px 2%;
	padding:0;
	text-align:center;
	float:left;
}

	.caseBox .caseImageBox {
		max-width:100%;
		margin:0 auto;
		padding:0;
		line-height:0;
		display: block;
	}
*/

.rankBox01 .mainBox .main .rankRatingBox {
	margin:0 -20px;
	padding:20px 0;

}
.rankBox01 .mainBox .sub02 .rankRatingBox {
	margin:0 -20px;
	padding:20px 0;

}
.rankBox01 .mainBox .main .rankRating,
.rankBox01 .mainBox .sub02 .rankRating {
	margin:0 20px;
	padding:0;
	color:#00A3D8;
	font-weight:bold;
}
.rankBox01 .mainBox .main .rankRating .ratingTitle,
.rankBox01 .mainBox .sub02 .rankRating .ratingTitle,
.main .textBox .rankRating .ratingTitle {
	width:30%;
	margin:0;
	padding:4px 0;
	color:#00A3D8;
	font-weight:bold;
	float:left;
}
.rankBox01 .mainBox .main .rankRating .rating,
.rankBox01 .mainBox .sub02 .rankRating .rating,
.main .textBox .rankRating .rating {
	width:65%;
	margin:0 -20px;
	padding:0;
	float:left;
}
.rankBox01 .mainBox .main .rankRatingBox .ratingGraph,
.rankBox01 .mainBox .sub02 .rankRatingBox .ratingGraph,
.main .textBox .ratingGraph {
	width:100%;
	margin:0;
	padding:0;
	text-align:center;
}

.canvasChart,
.canvasChart02,
.canvasChart03,
.canvasChart04,
.canvasChart {
	margin:0 auto;
	padding:0;
	display:inline-block;
}

.valName {
	font-size:10px;
}

.rankBox01 .mainBox .sub .siteImg {
	margin:20px 0 40px 0;
	padding:0;
	text-align:center;
}
.rankBox01 .mainBox .sub .siteImg img {
	max-width:100%;
	margin:0 auto;
	padding:0;
	line-height:0;
	display:block;
}



.rankBox01 .mainBox .sub .caseBox {
	margin:0;
	padding:10px 0px;
	background:#F9F9F9;
}
.rankBox01 .mainBox .sub .caseBox .caseTitle {
	margin:0;
	padding:10px 10px;
	font-weight:bold;
}
.rankBox01 .mainBox .sub .caseBox .caseImage {
	margin:0 0 10px 0;
	padding: 0 10px;
	text-align:center;
	float:left;
}

.rankBox01 .mainBox .sub .caseBox .caseImageBox {
		max-width:100%;
		margin:0 auto;
		padding:0;
		line-height:0;
		display: block;
	}
.rankBox01 .mainBox .sub .caseBox .caseImageBox img {
  max-width:100%;
  width:100%;
  margin:0 auto;
  padding:0;
  line-height:0;
  display:block;
	}


.rankBox01 .mainBox .sub .showroomBox {
	margin:0 0 40px 0;
	padding:0 10px;
}
.rankBox01 .mainBox .sub .showroomBox .srTitle {
	margin:0 0 5px 0;
	padding:0;
	font-weight:bold;
}

.rankBox01 .mainBox .sub .linkBtn,
.sub02 .linkBtn{
	margin:0 0 40px 0;
	padding:0;
	text-align:center;
}

.costBox {
	margin:0 0 50px 0;
	padding:0;
}
.costBox .costTitle {
	margin:0;
	padding:12px;
	background:#a3d901;
}
.costBox .costTitle .place {
	width:50%;
	margin:0;
	padding:0;
	font-size:20px;
	font-weight:bold;
	float:left;
}
.costBox .costTitle .cost {
	width:50%;
	margin:0;
	padding:0;
	font-weight:bold;
	float:left;
}
.costBox .costTitle .cost span {
	margin:0 0 0 10px;
	padding:0;
	font-size:20px;
}
.costBox .costNote {
	margin:0 0 20px 0;
	padding:10px;
	line-height:2;
}
.costBox .costNote .period {
	margin:0;
	padding:5px 0;
	line-height:2;
	font-weight:bold;
	text-align: right;
}

.main ul.menu {
	margin:0 0 50px 0;
	padding:0;
	list-style: none;
}
.main ul.menu li {
	margin:0 0 10px 0;
	padding:0;
}
.main ul.menu li a {
	margin:0;
	padding:10px 5px;
	display: block;
	border-bottom: #CCC dotted 1px;
}
.main ul.menu li a.menu-sub{
  margin: 0;
  padding: 10px 5px;
  display: block;
  border-bottom: none;
}

.menu-flex{
  display: flex;
}
li.menu-bl{
  border-bottom: #CCC dotted 1px;
}

.main ul.menu li{
  list-style-type: none;
}

.main ul.menu li.bl-none a{
  border-bottom: none;
}

.mb-0{
  margin-bottom: 0!important;
}

.main .caseBox {
	width:100%;
	margin-bottom:50px;
	padding:0;
}
.main .caseImgBox {
	width:100%;
	margin-bottom:0px;
	padding:10px 0;
	background:#FFF;
}
.main .caseImgBox.btm-50 {
	margin-bottom:50px;
	padding:15px 0;
}
.main .caseImgBox .before,
.main .caseImgBox .after {
	width:44%;
	margin:0 3%;
	padding:20px 0;
	text-align:center;
	float:left;
}
.main .caseImgBox .before img,
.main .caseImgBox .after img {
	max-width:100%;
	margin:0 auto;
	padding:0;
	line-height:0;
	display: block;
}
.main .caseNote {
	margin:0 0 10px 0;
	padding:20px;
	background:#FFF;
	line-height:2;
}

.main .caseImgBox .caseTitle01 {
	margin:0 0 10px 0;
	padding:10px 5px 5px 70px;
	font-size:26px;
	font-weight:bold;
	min-height:25px;
	line-height:1.3;
	color:#85B200;
	background:url(../img/best5/caseIcon01.png) 10px 5px no-repeat;
}
.main .caseImgBox .caseTitle02 {
	margin:0 0 10px 0;
	padding:10px 5px 5px 70px;
	font-size:26px;
	font-weight:bold;
	min-height:25px;
	line-height:1.3;
	color:#85B200;
	background:url(../img/best5/caseIcon02.png) 10px 5px no-repeat;
}
.main .caseImgBox .caseTitle03 {
	margin:0 0 10px 0;
	padding:10px 5px 5px 5px;
	font-size:20px;
	font-weight:bold;
	line-height:1.3;
	text-align: center;
}
.main .caseImgBox .caseImg {
	width:46%;
	margin:0 2%;
	padding:10px 0;
	text-align:center;
	float:left;
}
.main .caseImgBox .caseInNote {
	width:46%;
	margin:0 2%;
	padding:10px 0;
	line-height: 1.8;
	text-align:left;
	float:left;
}
.main .caseImgBox .caseInNote-w97 {
	width:97%;
	margin:0 2%;
	padding:10px 0;
	line-height: 1.8;
	text-align:left;
	float:left;
}
.main .caseImgBox .caseImg img {
	max-width:100%;
	margin:0 auto;
	padding:0;
	line-height:0;
	display: block;
}
.main .caseImgBox .caseInNote dl {
	width:100%;
	margin:0;
	padding:0;
}
.main .caseImgBox .caseInNote dl dt {
	width:100%;
	margin:0;
	padding:10px 0 5px 0;
}
.main .caseImgBox .caseInNote dl dd {
	width:100%;
	margin:0;
	padding:5px 0 10px 0;
	border-bottom: #CCC dotted 1px;
}
table.companyData {
	width:96%;
	margin:0 2%;
	padding:0;
}
table.companyData {
	width:96%;
	margin:0 2%;
	padding:0;
	border-top:#CCC dotted 1px;
}
table.companyData tr {
	margin:0;
	padding:0;
	border-bottom:#CCC dotted 1px;
}
table.companyData th {
	width:26%;
	margin:0;
	padding:5px 2%;
	text-align: left;
	vertical-align:top;
}
table.companyData td {
	width:66%;
	margin:0;
	padding:5px 2%;
	vertical-align:top;
}

.main .caseNote {
	margin:0 0 10px 0;
	padding:20px;
	background:#FFF;
	line-height:2;
}

.main .source {
	margin:0;
	padding:0;
	font-size:12px;
	color:#666;
}

.lh-2{
  line-height: 2;
}

.main h3.caseTitle {
	color: #000;
	border-bottom:#A3D901 dotted 1px;
	font-size:18px;
	margin:0 0 15px 0;
	padding:10px 5px 8px 5px;
	line-height:1.3;
}
.main h3.caseTitle .case {
	margin:0 0 0 3px;
	padding:0px 10px;
	background:#A3D901;
 	color:#FFF;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
	white-space: nowrap
}

span.merit {
    margin: 5px 0 10px 3px;
    padding: 0px 10px;
    background: #A3D901;
    color: #FFF;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    white-space: nowrap;
    display: inline-block;
}


.main .nextGenNote {
	width:100%;
	margin:0 0 30px 0;
	padding:10px;
	background:#FFF;
	line-height:2;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
.main .nextGenBox40 {
	width:38%;
	margin:0 1%;
	padding:0px;
	float:left;
}
.main .nextGenBox50 {
	width:48%;
	margin:0 1%;
	padding:0px;
	float:left;
}
.main .nextGenBox60 {
	width:58%;
	margin:0 1%;
	padding:0px;
	float:left;
}
.main .nextGenBox50res {
	width:47%;
	margin:0 1.5%;
	padding:0px;
	float:left;
}
.main .nextGenList50res {
	width:47%;
	margin:1% 1.5%;
	padding:10px;
	line-height:1.5;
	display:inline-block;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	background:#FFF;
    -webkit-box-shadow: 0 0 3px 0 #999;
    -moz-box-shadow: 0 0 3px 0 #999;
    -ms-box-shadow: 0 0 3px 0 #999;
    box-shadow: 0 0 3px 0 #999;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
.main .nextGenList100 {
	width:97%;
	margin:1% 1.5%;
	padding:10px;
	line-height:1.5;
	display:inline-block;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	background:#FFF;
    -webkit-box-shadow: 0 0 3px 0 #999;
    -moz-box-shadow: 0 0 3px 0 #999;
    -ms-box-shadow: 0 0 3px 0 #999;
    box-shadow: 0 0 3px 0 #999;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
.flexBox {
	display:flex;
	flex-wrap:wrap;
}
.nextGenStyle01 {
	font-size:13px;
	font-weight:bold;
}
.nextGenStyle02 {
	color:#FF5A26;
}
.nextGenStyle03 {
	font-size:22px;
}

.footer02 .span2 a {
	margin:0;
	padding:10px 0;
	text-align: center;
	background:#FFF;
	display:block;
}
.btm-0 {
	margin-bottom:0!important;
}
.btm-10 {
	margin-bottom:10px!important;
}
.btm-20 {
	margin-bottom:20px!important;
}
h3.nextGne01 {
	font-size:18px;
	line-height:1;
	text-align:left;
	background:#59B200;
	padding:10px 10px;
	margin-bottom:20px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	color:#FFF;
}

.main .nextGenList50res h5 {
	margin-top:0;
}

.partsBox {
margin:0 5px;
}
.parts01 {
width:50px;
float:left;
}
.parts02 {
width:calc(100% - 80px);
line-height:1.5;
margin-bottom:10px;
float:right;
}
.deco01 {
width:50px;
height:50px;
background:#00468C;
font-size:20px;
font-weight:bold;
color:#FFF;
text-align:center;
  display:inline-block;
  vertical-align: middle;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
 display: -webkit-flex;
 display: flex;
 -webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
 align-items: center; /* 縦方向中央揃え */
 -webkit-justify-content: center; /* 横方向中央揃え（Safari用） */
 justify-content: center; /* 横方向中央揃え */
}

.imgTop{
  margin-bottom: 50px;
}

/* Tweak navbar brand link to be super sleek
-------------------------------------------------- */

body > .navbar {
  font-size: 13px;
}

/* Change the docs' brand */
body > .navbar .brand {
  padding-right: 0;
  padding-left: 0;
  margin-left: 20px;
  float: left;
  font-weight: bold;
  color: #000;
  text-shadow: 0 1px 0 rgba(255,255,255,.1), 0 0 30px rgba(255,255,255,.125);
  -webkit-transition: all .2s linear;
     -moz-transition: all .2s linear;
          transition: all .2s linear;
}
body > .navbar .brand:hover {
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(255,255,255,.1), 0 0 30px rgba(255,255,255,.4);
}

.navbar button {
float:right;
}




/* Code in headings */
h3 code {
  font-size: 14px;
  font-weight: normal;
}




/* Sections
-------------------------------------------------- */

/* padding for in-page bookmarks and fixed navbar */
section {
  padding-top: 30px;
}
section > .page-header,
section > .lead {
  color: #5a5a5a;
}
section > ul li {
  margin-bottom: 5px;
}

/* Separators (hr) */
.bs-docs-separator {
  margin: 40px 0 39px;
}

/* Faded out hr */
hr.soften {
  height: 1px;
  margin: 70px 0;
  background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));
  background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));
  background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));
  background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));
  border: 0;
}



/* Jumbotrons
-------------------------------------------------- */

/* Base class
------------------------- */
.jumbotron {
  position: relative;
  padding: 40px 0;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0,0,0,.4), 0 0 30px rgba(0,0,0,.075);
  background: #020031; /* Old browsers */
  background: -moz-linear-gradient(45deg,  #020031 0%, #6d3353 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#020031), color-stop(100%,#6d3353)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(45deg,  #020031 0%,#6d3353 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(45deg,  #020031 0%,#6d3353 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(45deg,  #020031 0%,#6d3353 100%); /* IE10+ */
  background: linear-gradient(45deg,  #020031 0%,#6d3353 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#020031', endColorstr='#6d3353',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  -webkit-box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);
     -moz-box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);
          box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);
}
.jumbotron h1 {
  font-size: 80px;
  font-weight: bold;
  letter-spacing: -1px;
  line-height: 1;
}
.jumbotron p {
  font-size: 24px;
  font-weight: 300;
  line-height: 1.25;
  margin-bottom: 30px;
}

/* Link styles (used on .masthead-links as well) */
.jumbotron a {
  color: #fff;
  color: rgba(255,255,255,.5);
  -webkit-transition: all .2s ease-in-out;
     -moz-transition: all .2s ease-in-out;
          transition: all .2s ease-in-out;
}
.jumbotron a:hover {
  color: #fff;
  text-shadow: 0 0 10px rgba(255,255,255,.25);
}

/* Download button */
.masthead .btn {
  padding: 19px 24px;
  font-size: 24px;
  font-weight: 200;
  color: #fff; /* redeclare to override the `.jumbotron a` */
  border: 0;
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;
  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25);
     -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25);
          box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25);
  -webkit-transition: none;
     -moz-transition: none;
          transition: none;
}
.masthead .btn:hover {
  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25);
     -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25);
          box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25);
}
.masthead .btn:active {
  -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.1);
     -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.1);
          box-shadow: inset 0 2px 4px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.1);
}


/* Pattern overlay
------------------------- */
.jumbotron .container {
  position: relative;
  z-index: 2;
}
.jumbotron:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: url(../img/bs-docs-masthead-pattern.png) repeat center center;
  opacity: .4;
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1) {

  .jumbotron:after {
    background-size: 150px 150px;
  }

}

/* Masthead (docs home)
------------------------- */
.masthead {
  padding: 70px 0 80px;
  margin-bottom: 0;
  color: #fff;
}
.masthead h1 {
  font-size: 120px;
  line-height: 1;
  letter-spacing: -2px;
}
.masthead p {
  font-size: 40px;
  font-weight: 200;
  line-height: 1.25;
}

/* Textual links in masthead */
.masthead-links {
  margin: 0;
  list-style: none;
}
.masthead-links li {
  display: inline;
  padding: 0 10px;
  color: rgba(255,255,255,.25);
}


/* Subhead (other pages)
------------------------- */
.subhead {
  text-align: left;
  border-bottom: 1px solid #ddd;
}
.subhead h1 {
  font-size: 60px;
}
.subhead p {
  margin-bottom: 20px;
}
.subhead .navbar {
  display: none;
}






/* Footer
-------------------------------------------------- */

.footer {
  text-align: center;
  padding: 20px 0;
  border-top: 5px solid #FF7F00;
  background-color: #f5f5f5;
}
.footer p {
  margin-bottom: 0;
  color: #777;
}

.footer02 {
  padding: 10px 0;
  background-color: #999999;
}


ul.voice {
	margin:0;
	padding:0;
	list-style: none;
}
ul.voice li {
	margin:0 0 20px 0;
	padding:10px;
	background:#FFF;
	line-height:1.8;
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;
}



/* Mini layout previews
-------------------------------------------------- */
.mini-layout {
  border: 1px solid #ddd;
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.075);
     -moz-box-shadow: 0 1px 2px rgba(0,0,0,.075);
          box-shadow: 0 1px 2px rgba(0,0,0,.075);
}
.mini-layout,
.mini-layout .mini-layout-body,
.mini-layout.fluid .mini-layout-sidebar {
  height: 300px;
}
.mini-layout {
  margin-bottom: 20px;
  padding: 9px;
}
.mini-layout div {
  -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px;
}
.mini-layout .mini-layout-body {
  background-color: #dceaf4;
  margin: 0 auto;
  width: 70%;
}
.mini-layout.fluid .mini-layout-sidebar,
.mini-layout.fluid .mini-layout-header,
.mini-layout.fluid .mini-layout-body {
  float: left;
}
.mini-layout.fluid .mini-layout-sidebar {
  background-color: #bbd8e9;
  width: 20%;
}
.mini-layout.fluid .mini-layout-body {
  width: 77.5%;
  margin-left: 2.5%;
}





/* Misc
-------------------------------------------------- */

/* Make tables spaced out a bit more */
h2 + table,
h3 + table,
h4 + table,
h2 + .row {
  margin-top: 5px;
}



/* Fake the :focus state to demo it */
.focused {
  border-color: rgba(82,168,236,.8);
  -webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6);
     -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6);
          box-shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6);
  outline: 0;
}

/* For input sizes, make them display block */
.docs-input-sizes select,
.docs-input-sizes input[type=text] {
  display: block;
  margin-bottom: 9px;
}

/* Icons
------------------------- */
.the-icons {
  margin-left: 0;
  list-style: none;
}
.the-icons li {
  float: left;
  width: 25%;
  line-height: 25px;
}
.the-icons i:hover {
  background-color: rgba(255,0,0,.25);
}

/* Example page
------------------------- */
.bootstrap-examples h4 {
  margin: 10px 0 5px;
}
.bootstrap-examples p {
  font-size: 13px;
  line-height: 18px;
}
.bootstrap-examples .thumbnail {
  margin-bottom: 9px;
  background-color: #fff;
}



/* Bootstrap code examples
-------------------------------------------------- */

/* Base class */
.bs-docs-example {
  position: relative;
  margin: 15px 0;
  padding: 39px 19px 14px;
  *padding-top: 19px;
  background-color: #fff;
  border: 1px solid #ddd;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}

/* Echo out a label for the example */
.bs-docs-example:after {
  content: "Example";
  position: absolute;
  top: -1px;
  left: -1px;
  padding: 3px 7px;
  font-size: 12px;
  font-weight: bold;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  color: #9da0a4;
  -webkit-border-radius: 4px 0 4px 0;
     -moz-border-radius: 4px 0 4px 0;
          border-radius: 4px 0 4px 0;
}

/* Remove spacing between an example and it's code */
.bs-docs-example + .prettyprint {
  margin-top: -20px;
  padding-top: 15px;
}

/* Tweak examples
------------------------- */
.bs-docs-example > p:last-child {
  margin-bottom: 0;
}
.bs-docs-example .table,
.bs-docs-example .progress,
.bs-docs-example .well,
.bs-docs-example .alert,
.bs-docs-example .hero-unit,
.bs-docs-example .pagination,
.bs-docs-example .navbar,
.bs-docs-example > .nav,
.bs-docs-example blockquote {
  margin-bottom: 5px;
}
.bs-docs-example .pagination {
  margin-top: 0;
}
.bs-navbar-top-example,
.bs-navbar-bottom-example {
  z-index: 1;
  padding: 0;
  height: 90px;
  overflow: hidden; /* cut the drop shadows off */
}
.bs-navbar-top-example .navbar-fixed-top,
.bs-navbar-bottom-example .navbar-fixed-bottom {
  margin-left: 0;
  margin-right: 0;
}
.bs-navbar-top-example {
  -webkit-border-radius: 0 0 4px 4px;
     -moz-border-radius: 0 0 4px 4px;
          border-radius: 0 0 4px 4px;
}
.bs-navbar-top-example:after {
  top: auto;
  bottom: -1px;
  -webkit-border-radius: 0 4px 0 4px;
     -moz-border-radius: 0 4px 0 4px;
          border-radius: 0 4px 0 4px;
}
.bs-navbar-bottom-example {
  -webkit-border-radius: 4px 4px 0 0;
     -moz-border-radius: 4px 4px 0 0;
          border-radius: 4px 4px 0 0;
}
.bs-navbar-bottom-example .navbar {
  margin-bottom: 0;
}
form.bs-docs-example {
  padding-bottom: 19px;
}

/* Images */
.bs-docs-example-images img {
  margin: 10px;
  display: inline-block;
}

/* Tooltips */
.bs-docs-tooltip-examples {
  text-align: center;
  margin: 0 0 10px;
  list-style: none;
}
.bs-docs-tooltip-examples li {
  display: inline;
  padding: 0 10px;
}

/* Popovers */
.bs-docs-example-popover {
  padding-bottom: 24px;
  background-color: #f9f9f9;
}
.bs-docs-example-popover .popover {
  position: relative;
  display: block;
  float: left;
  width: 260px;
  margin: 20px;
}

/* Dropdowns */
.bs-docs-example-submenus {
  min-height: 180px;
}
.bs-docs-example-submenus > .pull-left + .pull-left {
  margin-left: 20px;
}
.bs-docs-example-submenus .dropup > .dropdown-menu,
.bs-docs-example-submenus .dropdown > .dropdown-menu {
  display: block;
  position: static;
  margin-bottom: 5px;
  *width: 180px;
}



/* Responsive docs
-------------------------------------------------- */

/* Utility classes table
------------------------- */
.responsive-utilities th small {
  display: block;
  font-weight: normal;
  color: #999;
}
.responsive-utilities tbody th {
  font-weight: normal;
}
.responsive-utilities td {
  text-align: center;
}
.responsive-utilities td.is-visible {
  color: #468847;
  background-color: #dff0d8 !important;
}
.responsive-utilities td.is-hidden {
  color: #ccc;
  background-color: #f9f9f9 !important;
}

/* Responsive tests
------------------------- */
.responsive-utilities-test {
  margin-top: 5px;
  margin-left: 0;
  list-style: none;
  overflow: hidden; /* clear floats */
}
.responsive-utilities-test li {
  position: relative;
  float: left;
  width: 25%;
  height: 43px;
  font-size: 14px;
  font-weight: bold;
  line-height: 43px;
  color: #999;
  text-align: center;
  border: 1px solid #ddd;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}
.responsive-utilities-test li + li {
  margin-left: 10px;
}
.responsive-utilities-test span {
  position: absolute;
  top:    -1px;
  left:   -1px;
  right:  -1px;
  bottom: -1px;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}
.responsive-utilities-test span {
  color: #468847;
  background-color: #dff0d8;
  border: 1px solid #d6e9c6;
}



/* Sidenav for Docs
-------------------------------------------------- */

.bs-docs-sidenav {
  width: 228px;
  margin: 30px 0 0;
  padding: 0;
  background-color: #fff;
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;
  -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.065);
     -moz-box-shadow: 0 1px 4px rgba(0,0,0,.065);
          box-shadow: 0 1px 4px rgba(0,0,0,.065);
}
.bs-docs-sidenav > li > a {
  display: block;
  width: 190px \9;
  margin: 0 0 -1px;
  padding: 8px 14px;
  border: 1px solid #e5e5e5;
}
.bs-docs-sidenav > li:first-child > a {
  -webkit-border-radius: 6px 6px 0 0;
     -moz-border-radius: 6px 6px 0 0;
          border-radius: 6px 6px 0 0;
}
.bs-docs-sidenav > li:last-child > a {
  -webkit-border-radius: 0 0 6px 6px;
     -moz-border-radius: 0 0 6px 6px;
          border-radius: 0 0 6px 6px;
}
.bs-docs-sidenav > .active > a {
  position: relative;
  z-index: 2;
  padding: 9px 15px;
  border: 0;
  text-shadow: 0 1px 0 rgba(0,0,0,.15);
  -webkit-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
     -moz-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
          box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
}
/* Chevrons */
.bs-docs-sidenav .icon-chevron-right {
  float: right;
  margin-top: 2px;
  margin-right: -6px;
  opacity: .25;
}
.bs-docs-sidenav > li > a:hover {
  background-color: #f5f5f5;
}
.bs-docs-sidenav a:hover .icon-chevron-right {
  opacity: .5;
}
.bs-docs-sidenav .active .icon-chevron-right,
.bs-docs-sidenav .active a:hover .icon-chevron-right {
  background-image: url(../img/glyphicons-halflings-white.png);
  opacity: 1;
}
.bs-docs-sidenav.affix {
  top: 40px;
}
.bs-docs-sidenav.affix-bottom {
  position: absolute;
  top: auto;
  bottom: 270px;
}




/* Responsive
-------------------------------------------------- */

/* Desktop large
------------------------- */
@media (min-width: 1200px) {
  .bs-docs-container {
    max-width: 970px;
  }
  .bs-docs-sidenav {
    width: 258px;
  }
  .bs-docs-sidenav > li > a {
    width: 230px \9; /* Override the previous IE8-9 hack */
  }
}

/* Desktop
------------------------- */
@media (max-width: 980px) {
  /* Unfloat brand */
  body > .navbar-fixed-top .brand {
    float: left;
    margin-left: 0;
    padding-left: 10px;
    padding-right: 10px;
  }

  /* Inline-block quick links for more spacing */
  .quick-links li {
    display: inline-block;
    margin: 5px;
  }

  /* When affixed, space properly */
  .bs-docs-sidenav {
    top: 0;
    width: 218px;
    margin-top: 30px;
    margin-right: 0;
  }


.main .nextGenBox50res {
	width:100%;
	margin:0 0;
	padding:0px;
	float:left;
}

}


/* Tablet to desktop
------------------------- */
@media (min-width: 768px) and (max-width: 979px) {
  /* Remove any padding from the body */
  body {
    padding-top: 0;
  }




  /* Widen masthead and social buttons to fill body padding */
  .jumbotron {
    margin-top: -20px; /* Offset bottom margin on .navbar */
  }
  /* Adjust sidenav width */
  .bs-docs-sidenav {
    width: 166px;
    margin-top: 20px;
  }
  .bs-docs-sidenav.affix {
    top: 0;
  }

	.topCatch {
		padding-top:40px;
		font-size:22px;
	}
	.topNote {
		padding-left:20px;
		padding-right:20px;
	}

.rankBox01 .titleBox .main {
	width:100%;
	margin:0;
	padding:0;
	float:left;
}
.rankBox01 .titleBox .sub {
	width:100%;
	margin:0;
	padding:0;
	float:left;
}

.rankBox01 .titleBox .rankTitle {
	width:100%;
	height:auto;
	margin:0;
	padding:15px 10px 5px 10px;
	background-color:#FFBF00;
	color:#000;
	font-size:22px;
	font-weight:bold;
	border: #FFBF00 solid 1px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
	float:left;
}
.rankBox01 .titleBox .subTitle {
	width:100%;
	height:auto;
	margin:0;
	padding:5px 10px 10px 10px;
	background-color:#FFBF00;
	border: #FFBF00 solid 1px;
	border-left:none;
	color:#000;
	font-size:20px;
	font-weight:bold;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
.rankBox01 .titleBox .subTitle .numTitle {
	margin:0;
	padding:0 0 0 5px;
	font-size:12px;
	text-align:center;
	border-left:none;
	float:left;
}
.rankBox01 .titleBox .subTitle .number {
	margin:0;
	padding:0 0 0 10px;
	font-size:20px;
	text-align:center;
	float:left;
}
.rankBox01 .titleBox .subTitle .number span {
	font-size:14px;
}

.rankBox01 .mainBox .main {
	width:100%;
	margin:0;
	padding:0 20px;
	background: #EEEEEE;
	float:left;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
.rankBox01 .mainBox .sub {
	width:100%;
	margin:0;
	padding:0 10px;
	background:#FFF;
	float:left;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.rankBox01 .mainBox .sub .caseBox .caseImage {
		max-width:48%;
		margin:0 1%;
		padding:0;
		line-height:0;
		display: block;
	}



}

/* Tablet
------------------------- */
@media (max-width: 767px) {
  /* Remove any padding from the body */
  body {
    padding-top: 0;
  }


.main h2.top,
.main h1.cont {
	font-size:24px;
	margin-top:20px;
}
.main h3.top,
.main h2.cont	{
	font-size:20px;
}



.rankBox01 .titleBox .main {
	width:100%;
	margin:0;
	padding:0;
	float:left;
}
.rankBox01 .titleBox .sub {
	width:100%;
	margin:0;
	padding:0;
	float:left;
}

.rankBox01 .titleBox .rankTitle {
	width:100%;
	height:auto;
	margin:0;
	padding:15px 10px 5px 10px;
	background-color:#FFBF00;
	color:#000;
	font-size:22px;
	font-weight:bold;
	border: #FFBF00 solid 1px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
	float:left;
}
.rankBox01 .titleBox .subTitle {
	width:100%;
	height:auto;
	margin:0;
	padding:5px 10px 10px 10px;
	background-color:#FFBF00;
	border: #FFBF00 solid 1px;
	border-left:none;
	color:#000;
	font-size:20px;
	font-weight:bold;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
.rankBox01 .titleBox .subTitle .numTitle {
	margin:0;
	padding:0 0 0 5px;
	font-size:12px;
	text-align:center;
	border-left:none;
	float:left;
}
.rankBox01 .titleBox .subTitle .number {
	margin:0;
	padding:0 0 0 10px;
	font-size:20px;
	text-align:center;
	float:left;
}
.rankBox01 .titleBox .subTitle .number span {
	font-size:14px;
}

.rankBox01 .mainBox .main {
	width:100%;
	margin:0;
	padding:0 20px;
	background: #EEEEEE;
	float:left;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
.rankBox01 .mainBox .sub {
	width:100%;
	margin:0;
	padding:0 10px;
	background:#FFF;
	float:left;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.rankBox01 .mainBox .sub .caseBox .caseImage {
		max-width:48%;
		margin:0 1%;
		padding:0;
		line-height:0;
		display: block;
	}

.rankBox01 .mainBox .main02 {
	width:100%;
	margin:0;
	padding:0 20px;
	background: #EEEEEE;
	float:left;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
.rankBox01 .mainBox .sub02 {
	width:100%;
	margin:0;
	padding:0 10px;
	background:#FFF;
	float:left;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.costBox .costTitle .place {
	width:100%;
	margin:0;
	padding:0;
	font-size:20px;
	font-weight:bold;
	float:left;
}
.costBox .costTitle .cost {
	width:100%;
	margin:5px 0 0 0;
	padding:0;
	font-weight:normal;
	float:left;
}
.costBox .costTitle .cost span {
	margin:0 0 0 10px;
	padding:0;
	font-size:16px;
}



  /* Widen masthead and social buttons to fill body padding */
  .jumbotron {
    padding: 40px 20px;
    margin-top:   -20px; /* Offset bottom margin on .navbar */
    margin-right: -20px;
    margin-left:  -20px;
  }
  .masthead h1 {
    font-size: 90px;
  }
  .masthead p,
  .masthead .btn {
    font-size: 24px;
  }
#header {
	margin:0 -20px;
}
#pageNavi {
	margin:0 -20px;
}
	.topCatch {
		font-size:20px;
	}
	.topNote {
		padding-left:20px;
		padding-right:20px;
	}


  /* Unfloat the back to top link in footer */
  .footer,
  .footer02 {
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .footer p {
    margin-bottom: 0;
  }

.footer02 .span2 {
	margin:10px 0 0 0;
	padding:0;
	text-align: center;
}
.footer02 .span2 a {
	margin:0 auto;
	padding:10px 20px;
	text-align: center;
	background:#FFF;
	display:inline-block;
}

table.companyData th {
	width:96%;
	margin:0;
	padding:0 2%;
	text-align: left;
	float:left;
	display: block;
}
table.companyData td {
	width:96%;
	margin:0;
	padding:0 2%;
	float:left;
	display: block;
}


.main .nextGenList50res {
	width:100%;
	margin:1% 0;
}

}

/* Landscape phones
------------------------- */
@media (max-width: 480px) {
  /* Remove padding above jumbotron */
  body {
    padding-top: 0;
  }

  /* Change up some type stuff */
  h2 small {
    display: block;
  }

.rankBox01 .mainBox .main .rankRating .ratingTitle,
.rankBox01 .mainBox .sub02 .rankRating .ratingTitle,
.main .textBox .rankRating .ratingTitle {
	width:100%;
	margin:0;
	padding:4px 0;
	color:#00A3D8;
	font-weight:bold;
	float:left;
}
.rankBox01 .mainBox .main .rankRating .rating,
.rankBox01 .mainBox .sub02 .rankRating .rating,
.main .textBox .rankRating .rating {
	width:100%;
	margin:0;
	padding:0;
	float:left;
}


.main .caseImgBox .caseImg {
	width:90%;
	margin:0 5%;
	padding:10px 0;
	text-align:center;
	float:left;
}
.main .caseImgBox .caseInNote {
	width:90%;
	margin:0 5%;
	padding:10px 0;
	line-height: 1.8;
	text-align:left;
	float:left;
}

.rankBox01 .mainBox .sub .caseBox .caseImage {
		max-width:90%;
		margin:0 5%;
		padding:0 0 10px 0;
		line-height:0;
		display: block;
	}



  /* Do our best to make tables work in narrow viewports */
  table code {
    white-space: normal;
    word-wrap: break-word;
    word-break: break-all;
  }


  /* Tighten up footer */
  .footer {
    padding-top: 20px;
    padding-bottom: 20px;
  }
}