@charset "UTF-8";

/* ========================================
    layout.css
    author: alimoto
======================================== */
body{
	color: #333333;
	text-align: center;
}
body,
table{
	font-size: 16px;
	-webkit-text-size-adjust: none;
}
header,
footer,
section,
.mrgAuto{
	text-align: left;
	line-height: 1.8;
	width: 1000px;
	margin: 0 auto 0 auto;
}
.w100p{
	width: 100%;
}


/* ========================================
    link
======================================== */
a:link,
a:visited,
a:active {
	text-decoration: underline;
	color: #0F70C1;
}


/* ========================================
    common text
======================================== */
span.note{
	color: #666;
	font-size: 72%;
}
.red{
	color: #c00;
}


/* ========================================
    header
======================================== */
header{
	padding: 19px 14px 23px 20px;
	height: 89px;
	background: url(../_img/bg_header.gif) repeat-x;
}
header .btn_chat{
	width: 179px;
	margin-left: 17px;
	float: right;
}
.logo_hbc{
	width: 160px;
	float: right;
}


/* ========================================
    centents
======================================== */


.bg_01{
	background: url(../_img/prom_long.jpg)no-repeat top center;
}
.bg_02{
	background: url(../_img/tit_01_long.jpg)no-repeat top center;
}
.bg_03{
	background: url(../_img/bg_concept.gif);
}
.bg_04{
	background: url(../_img/bg_input.gif) repeat-x top center;
}

.box_input_01{
	position: relative;
	height: 430px;
	background: url(../_img/box_input_01.jpg) no-repeat;
}
.box_input_01 img{
	position: absolute;
	right: 40px;
	bottom: 40px;
}
.box_chat,
.box_chat2{
	position: relative;
	height: 314px;
	background: url(../_img/bg_chat_01.jpg) no-repeat;
}
.box_chat img{
	position: absolute;
	bottom: 72px;
	right: 20px;
}
.box_chat2 img{
	position: absolute;
	bottom: 60px;
	right: 20px;
}
.box_chat2{
	background: url(../_img/bg_chat_02.jpg) no-repeat;
}
.bg_concept_ph{
	height: 465px;
	background: url(../_img/bg_concept.jpg) no-repeat;
}
.bg_concept_ph p{
	width: 410px;
	padding-top: 20px;
	margin-left: 553px;
}
.whats h2{
	border-bottom: 1px solid #c7c7c7;
}
.whats .list_whats{
	margin-bottom: 1px;
	padding: 40px 50px;
	border-bottom: 1px solid #c7c7c7;
}
.whats dl dt{
	margin-bottom: 30px;
}
.whats .ph{
	float: right;
	margin-left: 50px;
}
.box_blog div{
	margin-bottom: 30px;
	padding: 0 50px 20px;
	background: url(../_img/bg_blog.gif);
}
.box_blog p{
	font-size: 18px;
	padding-bottom: 40px;
}
.leftPH{
	margin-bottom: 30px;
	margin-right: 40px;
	float: left;
}
.rightPH{
	margin-bottom: 30px;
	margin-left: 40px;
	float: right;
}
.txt_cap{
	font-size: 12px;
}
.txt_cap img{
	margin-bottom: 6px;
}
.odoroki{
	padding: 0 50px;
	background: url(../_img/bg_odoroki.jpg) no-repeat;
}
.odoroki p{
	display: block;
	width: 310px;
}
.graphs .left{
	float: left;
}
.feature h2{
	border-bottom: 1px solid #c7c7c7;
}
.feature .list_feature{
	margin-bottom: 1px;
	padding: 30px 50px;
	border-bottom: 1px solid #c7c7c7;
}
.feature dl dt{
	margin-bottom: 22px;
}
.feature .ph{
	float: left;
	margin-right: 30px;
	margin-top: -34px;
}
.box_input_02{
	margin-top: 30px;
	position: relative;
	height: 398px;
	background: url(../_img/box_input_02.jpg) no-repeat;
}
.box_input_02 img{
	position: absolute;
	right: 40px;
	bottom: 40px;
}
.ind{
	padding: 0 50px;
}
.ind2{
	padding: 0 20px;
}
.box_detail{
	font-size: 14px;
	padding: 20px;
	border: 1px solid #b7b7b7;
}
.box_detail p{
	width: 450px;
	float: right;
}
.box_detail img{
	float: left;
}
h3{
	line-height: 1.2;
	font-size: 24px;
	font-weight: bold;
	margin: 50px 0 12px 0;
	padding-left: 18px;
	border-left: 4px solid #212276;
}
.howtouse p{
	font-size: 14px;
	float: left;
	width: 300px;
	padding: 10px 30px 0 22px;
}
h4{
	line-height: 1.2;
	font-size: 18px;
	font-weight: bold;
	margin: 50px 0 18px 0;
	padding-left: 18px;
	border-left: 4px solid #212276;
}
.elseInfo{
	font-size: 14px;
	line-height: 1.6;
	padding: 0 20px;
}
.clml2{
	width: 480px;
	float: left;
}



/* ========================================
    footer
======================================== */
footer{
	color: #8b8aae;
	font-size: 12px;
	margin-top: 30px;
	padding: 15px 20px 200px 20px;
	background: #292778;
}
footer a:link,
footer a:visited,
footer a:active{
	color: #9796b5;
}
footer a:hover{
	color: #fff;
}
footer img{
	margin-right: 30px;
	float: left;
}
footer p{
	padding-top: 10px;
}
footer span{
	padding-top: 10px;
	font-size: 11px;
	width: 400px;
	float: right;
	text-align: right;
}



/* ========================================
    clearfix
======================================== */
.cl:after {
	content:" ";
	display: block;
	height: 0;
	font-size: 0;
	clear: both;
	visibility: hidden;
}
.cl{
	zoom: 1;
}


/* ========================================
    MF
======================================== */
@media (min-width: 0px) and (max-width: 999px) {
	header,
	footer,
	section,
	.mrgAuto{
		width: 100%;
	}
	img {
		max-width: 100% !important;
	}
	header {
		position: relative;
		height: auto;
		-moz-background-size:contain;
		background-size:contain;
		padding: 0;
	}
	header:after {
		padding-top: 8.9%;
		display: block;
		content: "";
	}
	header h1 {
		font-size: 1px;
	}
	header h1 img {
		width: 35.5%;
		height: auto;
	}
	.logo_hbc {
		width: 16%;
		height: auto;
	}
	header .btn_chat {
		width: 17.9%;
		height: auto;
	}
	header > .inner {
		position: absolute;
		top: 21%;
		left: 1.4%;
		bottom: 2.3%;
		right: 2.0%;
	}
	.box_input_01 {
		position: relative;
		width: 100%;
		height: auto;
		-moz-background-size:contain;
		background-size:contain;
	}
	.box_input_01:after {
		padding-top: 43%;
		display: block;
		content: "";
	}
	.box_input_01 > .inner {
		position: absolute;
		top: 0px;
		left: 0px;
		bottom: 0px;
		right: 0px;
	}
	.box_input_01 img {
		position: absolute;
		width: 42%;
		height: auto;
		right: 4%;
		bottom: 9.8%;
	}
	.bg_concept_ph p {
		width: 41%;
		padding-top: 0;
		margin-left: 55%;
		font-size: 8px;
		line-height: 10px;
	}
	.clml2 {
		width: 100%;
	}
	.box_chat,
	.box_chat2{
		position: relative;
		width: 100%;
		height: auto;
		-moz-background-size:contain;
		background-size:contain;
	}
	.box_chat:after,
	.box_chat2:after {
		padding-top: 31.4%;
		display: block;
		content: "";
	}
	.box_chat > .inner,
	.box_chat2 > .inner {
		position: absolute;
		top: 0px;
		left: 0px;
		bottom: 0px;
		right: 0px;
	}
	.box_chat img {
		position: absolute;
		width: 41%;
		height: auto;
		bottom: 23%;
		right: 2%;
	}
	.box_chat2 img {
		position: absolute;
		width: 41%;
		height: auto;
		bottom: 17%;
		right: 2%;
	}
	.whats .ph {
		margin-left: 0;
		width: 100%;
	}
	img.tit_03 {
		width: 91.8%;
	}
	img.tit_04 {
		width: 59.5%;
	}
	img.tit_08 {
		width: 48.8%;
	}
	img.tit_09 {
		width: 49.5%;
	}
	img.tit_10 {
		width: 83.9%;
	}
	img.tit_11 {
		width: 72.2%;
	}
	img.tit_12 {
		width: 60.2%;
	}
	.odoroki {
		padding: 0;
		position: relative;
		width: 100%;
		height: auto;
		-moz-background-size:contain;
		background-size:contain;
	}
	.odoroki:after {
		padding-top: 14%;
		display: block;
		content: "";
	}
	.odoroki > .inner {
		position: absolute;
		top: 0px;
		left: 5%;
		bottom: 0px;
		right: 0px;
	}
	.odoroki p {
		display: block;
		width: 33%;
		font-size: 7px;
		line-height: 10px;
	}
	.graphs img {
		width: 50%;
		height: auto;
	}
	.feature .ph{
		margin-right: 3%;
		margin-top: -3%;
		width: 8%;
	}
	.feature .list_feature {
		padding: 3% 5%;
	}
	.box_input_02 {
		position: relative;
		width: 100%;
		height: auto;
		-moz-background-size:contain;
		background-size:contain;
	}
	.box_input_02:after {
		padding-top: 39.8%;
		display: block;
		content: "";
	}
	.box_input_02 > .inner {
		position: absolute;
		top: 0px;
		left: 5%;
		bottom: 0px;
		right: 0px;
	}
	.box_input_02 img {
		width: 42%;
		height: auto;
		right: 4%;
		bottom: 10.4%;
	}
	.bg_concept_ph {
		position: relative;
		width: 100%;
		height: auto;
		-moz-background-size:contain;
		background-size:contain;
	}
	.bg_concept_ph:after {
		padding-top: 46.5%;
		display: block;
		content: "";
	}
	.bg_concept_ph > .inner {
		position: absolute;
		top: 0px;
		left: 0px;
		bottom: 0px;
		right: 0px;
	}
	.box_detail p {
		width: 100%;
	}
	footer {
		position: relative;
		padding: 15px 2% 20% 2%;
	}
	footer img {
		width: 16%;
		height: auto;
	}
	footer p {
		padding-top: 1%;
	}
	footer span {
		position: absolute;
		bottom: 10px;
		width: 96%;
		font-size: 10px;
		text-align: center;
	}
	.bg_04 {
		background-image:none;
	}
}