@charset "utf-8";
/* ===========================================
 * style.css for 物種会計事務所 クラウド会計サイト PC
 * 2015/08/04
=========================================== */

/* common
=========================================== */
@media screen and (max-width: 599px) {
	body{
		font-size: 14px;
	}
	img{
		max-width: 100%;
		height: auto;
	}
}

header > div,
#main > div,
#about > div,
#trouble,
#reason > div,
#merit > div,
#greeting > div,
#office,
#form #msgArea,
#form dl,
#footer {
	overflow:hidden;
	margin:0 auto;
	width:1000px;
}
@media screen and (max-width: 599px) {
	header > div,
	#main > div,
	#about > div,
	#trouble,
	#reason > div,
	#merit > div,
	#greeting > div,
	#office,
	#form #msgArea,
	#form dl,
	#footer {
		width:100%;
	}
}

@media screen and (max-width: 599px) {
	.viewPc {
		display: none!important;
	}
}
@media screen and (min-width: 600px) {
	.viewSp {
		display: none!important;
	}
}

.cf::after{
	content: ".";
	visibility:hidden;
	display: block;
	height: 0;
	clear: both;
	font-size:0;
}

h3{
	text-align:center;
}

/* js-sp-overlay
================================================ */
#js-sp-overlay{
	display: none;
	position: fixed;
	z-index: 10;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.3);
}

/* header
=========================================== */
header {
	background: #fff;
	border-top: 11px solid #444;
	position:relative;
	z-index: 10;
	-webkit-box-shadow: 0 2px 5px rgba(0,0,0,.13);
	-moz-box-shadow: 0 2px 5px rgba(0,0,0,.13);
	box-shadow: 0 2px 5px rgba(0,0,0,.13);
}
header .inner{
	padding:11px 0;
}
header h1{
	float:left;
	margin:10px 0;
}
header #hdContact{
	float: right;
}
header #hdContact .tel,
header #hdContact .btn{
	margin:5px 0;
}
header #hdContact .tel{
	float:left;
	text-align:right;
}
header #hdContact .tel p{
	margin:5px 0;
}
header #hdContact .btn{
	float:right;
}

@media screen and (max-width: 599px) {
	header {
		border-width:6px;
		height:65px;
	}
	header .inner{
		box-sizing:border-box;
		padding:15px;
	}
	header h1{
		width:227px;
		margin:0;
	}
	header .hdBtn{
		position:absolute;
		top:7px;
		right:15px;
		width:50px;
		height:50px;
	}
	header .btnBlue {
		position:relative;
		width:50px;
		height:50px;
		background:#0864c8;
	}
	header .btnBlue:after {
		content:"MENU";
		display:block;
		padding-top:35px;
		text-align:center;
		font-size:9px;
		font-weight:bold;
		color:#fff;
	}
	header .btnBlue.open:after {
		content:"CLOSE";
	}
	header .btnBlue	span {
		position:absolute;
		top:38%;
		left:50%;
		transition:all .3s;
		background:#fff;
		width:30px;
		height:3px;
		margin-top:-1px;
		margin-left:-15px;
	}
	header .btnBlue	span:nth-child(1) {
		margin-top:-10px;
	}
	header .btnBlue	span:nth-child(3) {
		margin-top:8px;
	}
	header .btnBlue.open span:nth-child(1) {
		margin-top:-1px;
		transform:rotate(-45deg);
	}
	header .btnBlue.open span:nth-child(2) {
		opacity:0;
	}
	header .btnBlue.open span:nth-child(3) {
		margin-top:-1px;
		transform:rotate(45deg);
	}
	header #gNav{
		display:none;
		position:absolute;
		top:65px;
		left:0;
		z-index:10;
		background:#fff;
		border-top:1px solid #e7e7e7;
		width:100%;
	}
	header #gNav .list li{
		box-sizing:border-box;
		width:50%;
		float:left;
		border-bottom:1px solid #e7e7e7;
	}
	header #gNav .list li:nth-child(2n){
		border-left:1px solid #e7e7e7;
	}
	header #gNav .list li a{
		position:relative;
		display: -webkit-flex;
		display: flex;
		-webkit-align-items: center;
		align-items: center;
		height: 60px;
		padding: 0 25px 0 15px;
		font-weight:bold;
		color:#3a3a3a;
		text-decoration:none;
	}
	header #gNav .list li a:after{
		position:absolute;
		top:50%;
		right:11px;
		display:block;
		content:"";
		width:9px;
		height:12px;
		background:url(../img/ico_nav01.png) no-repeat center 0 / cover;
		transform:translate(0,-50%);
	}
	header #hdContact{
		float:none;
		padding:25px 20px 22px;
	}
	header #hdContact .txt01{
		margin:0;
		text-align:center;
		background:#ededed;
	}
	header #hdContact .txt01 img{
		width:auto;
		height:28px;
	}
	header #hdContact .tel{
		float:none;
		margin:0;
		padding:12px 0;
		text-align:center;
		border-radius:5px;
		box-shadow:0 3px 0 #e0e0e0;
		-webkit-box-shadow:0 3px 0 #e0e0e0;
		-moz-box-shadow:0 3px 0 #e0e0e0;
	}
	header #hdContact .tel .txt02{
		padding:0 44px 10px;
	}
	header #hdContact .tel .number{
		padding:0 29px;
	}
	header #hdContact .tel .time{
		padding:10px 60px 0;
	}
	header #hdContact .tel .number img,
	header #hdContact .tel .time img{
		width:100%;
		height:auto;
	}
	header #hdContact .btn{
		float:none;
		margin:0;
		padding:17px 25px 0;
		text-align:center;
	}
	header #hdContact .btn img{
		width:100%;
		height:auto;
	}
	header .btnArea{
		padding:25px 45px 30px;
		border-top:1px solid #e7e7e7;
	}
	header .closeBtn{
		padding:15px;
		background:#fff;
		border:1px solid #0056b3;
		text-align:center;
		font-size:16px;
		font-weight:bold;
		color:#0056b3;
		cursor:pointer;
		border-radius: 5px;
		box-shadow:0 3px 0 #699acf;
		-webkit-box-shadow:0 3px 0 #699acf;
		-moz-box-shadow:0 3px 0 #699acf	;
	}
}

/* #main
=========================================== */
#main {
	background:url(../img/bg_main01_pc.jpg) no-repeat center 0 / cover;
	position:relative;
	z-index: 1;
}
#main > div {
	background:url(../img/bg_main02.png) no-repeat 0  -20px;
	position:relative;
	padding: 0 170px;
}
#main h2 {
	float:left;
	padding:89px 0 75px;
}
#main p {
	position:absolute;
	right:100px;
	bottom: -70px;
}

@media screen and (max-width: 599px) {
	#main {
		background:url(../img/bg_main01_sp.jpg) no-repeat center 0 / cover;
	}
	#main > div {
		padding:0;
		background:none;
	}
	#main h2 {
		float:none;
		padding:24px 0 0;
	}
	#main h2 img {
		width: 100%;
		height: auto;
	}
}

/* #campaign
=========================================== */
#campaign {
	height: 230px;
	padding: 0;
	background: url(../img/bg_campaign01_pc.gif);
}
#campaign p {
	width: 1000px;
	margin: 0 auto;
}
#campaign p a {
	display: block;
}

@media screen and (max-width: 599px) {
	#campaign {
		height: auto;
		padding: 0;
		background: url(../img/bg_campaign01_sp.gif) no-repeat center / cover;
	}
	#campaign p {
		width: 100%;
		margin: 0;
	}
	#campaign p a {
		padding: 20px 15px 22px;
		text-align: center;
	}
}

/* #about
=========================================== */
#about {
	background:url(../img/bg_about01.gif) repeat 0 0;
	position:relative;
	z-index: 2;
	padding:50px 0 35px;
}
#about .txtImg {
	position:relative;
	overflow:visible;
	height: 349px;
}
#about .txtImg .txt {
	width:453px;
	line-height:1.79;
	color:#fff;
	font-size:108%;
}
#about .txtImg .txt h3 {
	padding: 8px 0 20px;
	text-align:left;
}
#about .txtImg .img {
	position:absolute;
	top: -30px;
	right: -20px;
}
#about .txtImg .bnr {
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	background: #004a9d;
	position:absolute;
	bottom:0;
	padding:20px;
}
#about .bnr .tel{
	float:left;
	margin:5px 20px 0 9px;
}
#about .bnr .btn{
	float:right;
}

@media screen and (max-width: 599px) {
	#about {
		padding:25px 15px;
	}
	#about .txtImg {
		position:relative;
		overflow:visible;
		height: auto;
	}
	#about .txtImg .txt {
		width:auto;
	}
	#about .txtImg .txt h3 {
		padding: 0 0 15px;
	}
	#about .txtImg .img {
		position: static;
		top: 0;
		right: 0;
		padding: 15px 7px 0 15px;
	}
	#about .txtImg .bnr {
		position: static;
		bottom: auto;
		padding: 20px 30px 23px;
	}
	#about .bnr .telSp{
		float: none;
		margin: 5px 20px 0 9px;
	}
	#about .bnr .telSp{
		float:none;
		margin:0;
		padding:12px 0;
		text-align:center;
		border-radius:5px;
		box-shadow:0 3px 0 #1f3d60;
		-webkit-box-shadow:0 3px 0 #1f3d60;
		-moz-box-shadow:0 3px 0 #1f3d60;
	}
	#about .bnr .telSp .tit01{
		padding:0 18px 23px;
	}
	#about .bnr .telSp .txt01{
		padding:0 24px 10px;
	}
	#about .bnr .telSp .number{
		padding:0 10px;
	}
	#about .bnr .telSp .time{
		padding:10px 40px 0;
	}
	#about .bnr .btn{
		float: none;
		padding-top:17px;
		text-align:center;
	}
}

/* #trouble
=========================================== */
#trouble {
	padding:0 0 60px;
}
#trouble h3 {
	margin:48px 0;
}
#trouble ul {
	margin:0 0 27px -29px;
}
#trouble li {
	float:left;
	margin:0 0 0 29px;
}

@media screen and (max-width: 599px) {
	#trouble {
		padding:0 0 35px;
	}
	#trouble h3 {
		margin:35px 57px 20px;
	}
	#trouble h3 img {
		width: auto;
		max-height: 107px;
	}
	#trouble ul {
		margin:0;
		padding: 0 5px 5px;
	}
	#trouble li {
		box-sizing:border-box;
		float:left;
		width:50%;
		margin:0;
		padding:0 10px 7px;
		text-align: center;
	}
	#trouble li img {
		width: 100%;
		height: auto;
	}
	#trouble .img01 {
		padding: 0 15px;
	}
	#trouble .img01 img {
		width: 100%;
		height: auto;
	}
}

/* #reason
=========================================== */
#reason {
	background:#f6f6f6;
	padding:60px 0;
}
#reason h3 {
	margin:0 0 63px;
}
#reason ol {
	margin:0 -64px 27px 0;
}
#reason li {
	box-sizing:border-box;
	background:url(../img/bg_reason01.png) repeat 0 0;
	float:left;
	width:468px;
	padding:5px;
	margin-right:64px;
	font-size:108%;
	line-height:1.64;
}
#reason li .box {
	position: relative;
	background: #fff;
}
#reason li .box .img img{
	width: 458px;
	height: auto;
}
#reason li .ico {
	position: absolute;
	top: -23px;
	left: 50%;
	width: 39px;
	height: 39px;
	transform: translate(-50%,0);
}
#reason li .box .txt {
	padding: 29px 25px 35px;
}
#reason li h4 {
	margin:0 0 25px;
	text-align:center;
}

@media screen and (max-width: 599px) {
	#reason {
		background:#f6f6f6;
		padding:35px 15px;
	}
	#reason h3 {
		margin:0 20px 40px;
	}
	#reason h3 img{
		width: auto;
		max-height: 67px;
	}
	#reason ol {
		margin:0;
	}
	#reason li {
		float:none;
		width:100%;
		padding:5px;
		margin:0 0 40px 0;
	}
	#reason li:last-child {
		margin-bottom: 0;
	}
	#reason li .box .img img{
		width: 100%;
		height: auto;
	}
	#reason li .ico {
		position: absolute;
		top: -25px;
		width: 42px;
		height: 42px;
	}
	#reason li .box .txt {
		padding: 20px 15px;
	}
	#reason li h4 {
		margin:0 0 15px;
		text-align:center;
	}
	#reason li h4 img{
		width: auto;
		max-height: 50px;
	}
}

/* #merit
=========================================== */
#merit{
	background:#f0eee8;
	padding:10px 0;
}
#merit h3{
	margin:40px;
}
#merit ol {
	margin:0 0 27px -59px;
}
#merit li {
	float:left;
	margin:0 0 44px 59px;
	padding:150px 30px 0;
	width:234px;
	height:156px;
	text-align:center;
}
#merit .merit01 {
	background:url(../img/bg_merit01.png) no-repeat 0 0 / cover;
}
#merit .merit02 {
	background:url(../img/bg_merit02.png) no-repeat 0 0 / cover;
}
#merit .merit03 {
	background:url(../img/bg_merit03.png) no-repeat 0 0 / cover;
}
#merit .merit04 {
	background:url(../img/bg_merit04.png) no-repeat 0 0 / cover;
}
#merit .merit05 {
	background:url(../img/bg_merit05.png) no-repeat 0 0 / cover;
}
#merit .merit06 {
	background:url(../img/bg_merit06.png) no-repeat 0 0 / cover;
}
#merit li p{
	padding: 15px;
	font-size:108%;
	line-height:1.64;
}

@media screen and (max-width: 599px) {
	#merit{
		padding:35px 15px 15px;
	}
	#merit h3{
		margin:0 0 20px;
	}
	#merit h3 img{
		width: auto;
		max-height: 26px;
	}
	#merit ol {
		margin:0;
	}
	#merit li {
		box-sizing:border-box;
		float:none;
		margin:0 auto 20px;
		padding:50% 15% 10%;
		width:100%;
		height:100%;
	}
	#merit .merit01,
	#merit .merit02,
	#merit .merit03,
	#merit .merit04,
	#merit .merit05,
	#merit .merit06 {
		background-position: center top;
		background-size: auto 100%;
	}
	#merit .merit04,
	#merit .merit05,
	#merit .merit06 {
		padding-bottom:15%;
	}
	#merit li p{
		padding: 15px 0 0;
		font-size:100%;
	}
}
@media only screen and (min-width: 414px) and (max-width: 599px) {
	#merit li {
		padding-top:40%;
		padding-left: 20%;
		padding-right: 20%;
	}
}

/* #aboutCampaign
=========================================== */
#aboutCampaign {
	width: 1000px;
	margin: 0 auto;
	padding: 63px 0 60px;
}
#aboutCampaign > h3 {
	margin-bottom: 40px;
	text-align: center;
}
#aboutCampaign > h3 + p {
	margin-bottom: 39px;
	font-size: 14px;
	line-height: 1.8;
	color: #3f3f3f;
}
#aboutCampaign .sec01 {
	margin-bottom: 40px;
}
#aboutCampaign .sec01 > h4,
#aboutCampaign .sec02 > h4 {
	width: 100%;
	padding: 17px 0 16px;
	background: url(../img/bg_aboutCampaign01.gif);
	text-align: center;
}
#aboutCampaign .sec01 ol {
	padding: 31px 33px;
	border: 8px solid #ededed;
	border-top: none;
	box-sizing: border-box;
	background: #f6f6f6;
}
#aboutCampaign .sec01 ol li {
	background: #fff;
	margin-bottom: 20px;
	padding: 2px;
	border: 5px solid #fff;
	box-sizing: border-box;
	box-shadow: 0 0 0 2px #5780c2 inset,0 1px 3px 1px rgba(0,0,0,0.15);
}
#aboutCampaign .sec01 ol li:last-child {
	margin-bottom: 0;
}
#aboutCampaign .sec01 ol li .txtClm{
	box-sizing: border-box;
	float:left;
	width:604px;
	padding:30px;
}
#aboutCampaign .sec01 ol li .imgClm{
	box-sizing: border-box;
	float:right;
	width:300px;
}
#aboutCampaign .sec01 ol li h5 {
	margin-bottom: 17px;
}
#aboutCampaign .sec01 ol li p {
	font-size: 14px;
	line-height: 1.65;
	color: #3f3f3f;
}
#aboutCampaign .sec02 h4 + div {
	padding: 31px 33px 32px;
	border: 8px solid #ededed;
	border-top: none;
	box-sizing: border-box;
	background: #f6f6f6 url(../img/img_aboutCampaign05.png) 38px 31px no-repeat;
}
#aboutCampaign .sec02 div > p {
	margin: 0 0 18px 154px;
}
#aboutCampaign .sec02 div > p + p {
	margin: 0 0 39px 155px;
	font-size: 14px;
	color: #010101;
}
#aboutCampaign .sec02 div div {
	padding: 5px;
	background: #f6f6f6 url(../img/bg_aboutCampaign02.png);
}
#aboutCampaign .sec02 div div section {
	margin-bottom: 0;
	padding: 29px 30px 25px;
	background: #fff;
}
#aboutCampaign .sec02 div div section h5 {
	margin-bottom: 14px;
}
#aboutCampaign .sec02 div div section p {
	font-size: 14px;
	line-height: 1.65;
	color: #010101;
}

@media screen and (max-width: 599px) {
	#aboutCampaign {
		width: 100%;
		margin: 0;
		padding: 35px 0 0;
	}
	#aboutCampaign > h3 {
		margin-bottom: 20px;
		padding: 0 37px;
	}
	#aboutCampaign > h3 > img {
		width: auto;
		max-height: 108px;
	}
	#aboutCampaign > h3 + p {
		margin-bottom: 35px;
		padding: 0 15px;
	}
	#aboutCampaign .sec01 {
		margin-bottom: 0;
	}
	#aboutCampaign .sec01 ol {
		padding: 20px 10px 25px;
		border: 5px solid #ededed;
		border-top: none;
	}
	#aboutCampaign .sec01 ol li {
		margin-bottom: 20px;
	}
	#aboutCampaign .sec01 ol li .txtClm{
		float:none;
		width:100%;
		padding:15px 14px;
	}
	#aboutCampaign .sec01 ol li .imgClm{
		float:none;
		width:100%;
	}
	#aboutCampaign .sec01 ol li .imgClm img{
		width: 100%;
		height: auto;
	}
	#aboutCampaign .sec01 ol li h5 {
		text-align: center;
		margin-bottom: 0;
	}
	#aboutCampaign .sec01 ol li h5 img {
		max-width: 305px;
		width: 100%;
		height: auto;
	}
	#aboutCampaign .sec01 ol li .txtClm p {
		margin-top: 15px;
	}
	#aboutCampaign .sec02 h4 + div {
		padding: 25px 10px 30px;
		border: 5px solid #ededed;
		border-top: none;
		box-sizing: border-box;
		background: #f6f6f6;
	}
	#aboutCampaign .sec02 div > p {
		margin: 0 0 12px;
	}
	#aboutCampaign .sec02 div > p > img {
		width: 100%;
		height: auto;
	}
	#aboutCampaign .sec02 div > p + p {
		margin: 0 0 25px;
		line-height: 1.65;
		text-indent: -1em;
		padding-left: 1em;
	}
	#aboutCampaign .sec02 div div section {
		margin-bottom: 0;
		padding: 20px 17px;
		background: #fff;
	}
	#aboutCampaign .sec02 div div section h5 {
		margin-bottom: 14px;
	}
}

/* #greeting
=========================================== */
#greeting {
	background:url(../img/bg_about01.gif) repeat 0 0;
}
#greeting .imgTxt {
	background:url(../img/bg_greeting01_pc.png) no-repeat right 0;
	padding:55px 139px 35px;
}
#greeting .imgTxt .pic{
	float:left;
}
#greeting .imgTxt .pic .name{
	margin:10px;
	text-align:center;
}
#greeting .imgTxt .txt{
	float:right;
	width:640px;
	color:#fff;
}
#greeting .imgTxt .txt h3 {
	text-align:left;
}
#greeting .imgTxt .txt h4{
	margin:25px 0;
	font-size:223%;
}
#greeting .imgTxt .txt p{
	font-size:108%;
	line-height:1.86;
}

@media screen and (max-width: 599px) {
	#greeting .imgTxt {
		box-sizing: border-box;
		background:url(../img/bg_greeting01_sp.png) no-repeat right 80px;
		background-size:293px 253px;
		padding:27px 15px 38px;
	}
	#greeting .imgTxt .pic{
		float:none;
		padding:0 45px;
	}
	#greeting .imgTxt .pic .name{
		margin:14px 14px 25px;
		text-align:center;
	}
	#greeting .imgTxt .pic img{
		width: 100%;
		height: auto;
	}
	#greeting .imgTxt .txt{
		float:none;
		width:100%;
	}
	#greeting .imgTxt .txt h4{
		margin:10px 0 15px;
	}
	#greeting .imgTxt .txt h4 img{
		width: 100%;
		height: auto;
	}
	#greeting .imgTxt .txt p{
		font-size:100%;
	}
}

/* #office
=========================================== */
#office {
	padding:50px 0 65px;
}
#office h3{
	margin:0 0 50px;
}
#office #profile {
	float:left;
	width:520px;
}
#office #access {
	float:right;
	width:450px;
}
#office h4 {
	margin:0 0 25px;
}
#office .box dl {
	font-size: 108%;
	line-height: 1.65;
}
#office .box dt{
	box-sizing: border-box;
	float: left;
	font-weight:bold;
	width:80px;
	padding: 17px 10px 17px 0;
}
#office dd {
	margin-left: 80px;
	padding: 17px 0 17px 30px;
	border-left: 1px solid #ddd;
}
#office .box dl:first-child dt,
#office .box dl:first-child dd{
	padding-top: 5px;
}
#office .box dl:last-child dt,
#office .box dl:last-child dd{
	padding-bottom: 5px;
}
#office #access .image {
    margin-top: 30px;
}

@media screen and (max-width: 599px) {
	#office {
		box-sizing: border-box;
		padding:35px 15px 5px;
	}
	#office h3{
		margin:0 0 30px;
	}
	#office #profile {
		float:none;
		width:100%;
	}
	#office #access {
		float:none;
		width:100%;
	}
	#office h4 {
		margin:0 0 20px;
	}
	#office .box{
		padding: 30px 0;
		border-top: 1px solid #e6e6e6;
	}
	#office .box dl {
		font-size: 100%;
	}
	#office .box dt{
		padding: 15px 10px 15px 0;
	}
	#office dd {
		padding: 15px 0 15px 15px;
	}
	#office #access .image {
    	margin-bottom: 70px;
	}
}

#gMapWrap {
	margin: auto;
	position: relative;
	padding-bottom: 25%;
	height: 0;
	overflow: hidden;
}
#gMapWrap iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
}

@media screen and (max-width: 599px) {
	#gMapWrap {
		padding-bottom: 60%;
	}
}

/* #form
=========================================== */
#form {
	background:#f6f6f6;
	padding:10px 0;
}
#form h3{
	margin: 45px 0 30px;
}
#form .error{
	display:block;
	color: #f33;
}
#form #msgArea .error{
	background: #fee none repeat scroll 0 0;
	border: 1px solid #f00;
	padding: 6px;
}
#form #mhMailForm{
	margin:10px;
}
#form dl {
	overflow: hidden;
	border-bottom:1px solid #fff;
}
#form dt,
#form dd {
	display: table-cell;
	float:left;
	border-bottom:1px solid #eee;
	text-align:left;
	line-height:2;
	letter-spacing:0.05em;
}
#form dt {
	clear:left;
	padding:20px 10px 10px;
	width:225px;
	font-size:108%;
	vertical-align:top;
}
#form dt .must{
	margin:0 10px;
}
#form dt .must img{
	margin-top: -2px;
	vertical-align:middle;
}
#form dd{
	width: 735px;
	padding: 15px 10px;
}
#form .radio dt,
#form .radio dd{
	padding:20px 10px;
}
#form dd label{
	margin:0 20px 0 0;
}
#form dd input,
#form dd select,
#form dd textarea{
	font-size:108%;
	padding: 5px;
}
#form dd input[type=text],
#form dd input[type=tel],
#form dd input[type=email]{
	width:500px;
}
#form dd input[type=radio]{
	margin: 0 5px 0 0;
}
#form dd textarea{
	width: 730px;
}
#form dd #form_postcode,
#form dd #form_pref{
	width:140px;
}
#form dd .prefix,
#form dd .input_wrap,
#form dd .suffix,
#form dd .empty{
	margin: 0 10px 0 0;
}
#form dd p{
	margin:0;
}
#form dd p + p{
	margin:10px 0 0;
}
#mhMailForm .input_wrap{
position:relative;
display:inline;
}
#mhMailForm .popupMust{
background:url(../img/balloon_error_1.png) no-repeat 0 0;
position:absolute;
top:-23px;
z-index:2;
}
#mhMailForm .popupMust p{
background:url(../img/balloon_error_2.png) no-repeat right 0;
padding:0 9px 2px 5px!important;
height:21px;
margin:0 0 0 5px;
color:#fff;
font-size:85%;
font-weight:bold;
}

#form #submitArea {
	margin:40px 0 80px;
	text-align:center;
}
#form #submitArea input,
#form #submitArea button {
	border:0;
	overflow:hidden;
	margin: 0 5px;
	width:409px;
	height:74px;
	white-space:nowrap;
	color:transparent;
	text-indent:100%;
}
#form #submitArea input:hover {
	cursor: pointer;
}
#form #submitArea #mhFormConfirm {
	background:url(../img/btn_form01_n.png) no-repeat 0 0;
}
#form #submitArea #mhFormSend {
	background:url(../img/btn_form02_n.png) no-repeat 0 0;
}
#form #submitArea #mhFormAdjust {
	background:url(../img/btn_form03_n.png) no-repeat 0 0;
}
#form #submitArea #mhFormConfirm:hover {
	background:url(../img/btn_form01_o.png) no-repeat 0 0;
}
#form #submitArea #mhFormSend:hover {
	background:url(../img/btn_form02_o.png) no-repeat 0 0;
}
#form #submitArea #mhFormAdjust:hover {
	background:url(../img/btn_form03_o.png) no-repeat 0 0;
}

@media screen and (max-width: 599px) {
	#form {
		padding:35px 15px;
	}
	#form h3{
		margin: 0 0 10px;
		padding: 0 45px;
	}
	#form h3 img{
		width: auto;
		max-height: 68px;
	}
	#form #mhMailForm{
		margin:0;
	}
	#form dt,
	#form dd {
		display:block;
		float:none;
		min-height: auto!important;
	}
	#form dt {
		clear:none;
		padding:15px 0 5px;
		width:100%;
		font-size:108%;
		vertical-align:top;
		border-bottom:none;
	}
	#form dd{
		width:100%;
		padding:0 0 20px;
	}
	#form dd input[type='text'],
	#form dd input[type='tel'],
	#form dd input[type='email']{
		outline: none;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		box-sizing: border-box;
		width: 100%;
		padding: 5px 10px;
		border: 1px solid #e1e3e3;
		border-radius: 5px;
		box-shadow: 0 3px 2px #ccc inset;
		-webkit-box-shadow: 0 3px 2px #ccc inset;
		-moz-box-shadow: 0 3px 2px #ccc inset;
	}
	#form dd textarea{
		outline: none;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		box-sizing: border-box;
		width: 100%;
		padding: 5px 10px;
		border: none;
		box-shadow: 0 3px 2px #ccc inset;
		-webkit-box-shadow: 0 3px 2px #ccc inset;
		-moz-box-shadow: 0 3px 2px #ccc inset;
	}
	#form .radio dt{
		padding:20px 0 10px;
		border-bottom:none;
	}
	#form .radio dd{
		padding:0 0 20px;
	}
	#form dd label{
		display: block;
		margin:5px 15px 0 0;
	}
	#form dd label input[type='radio']{
		background: none;
		outline: none;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		display: none;
	}
	#form dd label span{
		box-sizing: border-box;
		position: relative;
		display: inline-block;
		padding-left: 32px;
		cursor: pointer;
	}
	#form dd label span::before{
		box-sizing: border-box;
		position: absolute;
		content: "";
		top: 2px;
		left: 0;
		width: 24px;
		height: 24px;
		background: url(../img/ico_radio01.png) no-repeat center center;
		background-size: 24px 24px;
	}
	#form dd label input[type='radio']:checked + span::before{
		background: url(../img/ico_radio01_check.png) no-repeat center center;
		background-size: 24px 24px;
	}
	#form #submitArea {
		margin:25px 0 0;
	}
	#form #submitArea input,
	#form #submitArea button {
		margin:0;
		width:285px;
		height:50px;
	}
	#form #submitArea #mhFormSend {
		margin-top: 15px;
	}
	#form #submitArea #mhFormConfirm,
	#form #submitArea #mhFormConfirm:hover {
		background:url(../img/btn_form01_sp.png) no-repeat 0 0 / cover;
	}
	#form #submitArea #mhFormSend,
	#form #submitArea #mhFormSend:hover {
		background:url(../img/btn_form02_sp.png) no-repeat 0 0 / cover;
	}
	#form #submitArea #mhFormAdjust,
	#form #submitArea #mhFormAdjust:hover {
		background:url(../img/btn_form03_sp.png) no-repeat 0 0 / cover;
	}
}

/* footer
=========================================== */
footer {
	-webkit-box-shadow: 0 2px 5px rgba(0,0,0,.13);
	-moz-box-shadow: 0 2px 5px rgba(0,0,0,.13);
	box-shadow: 0 2px 5px rgba(0,0,0,.13);
}

@media screen and (max-width: 599px) {
	footer {
		padding-bottom: 84px;
	}
}

footer #fixBtn {
	display: none;
	position: fixed;
	width: 153px;
	top: 50%;
	right: 0;
	margin-top: -100px;
	z-index: 15;
}
footer #fixBtn li {
	margin-bottom: 3px;
}
footer #fixBtn li:last-child {
	margin-bottom: 0;
}

@media screen and (max-width: 599px) {
	footer #fixBtn {
		box-sizing: border-box;
		top: auto;
		bottom: 0;
		width: 100%;
		height: 84px;
		margin-top: 0;
		padding: 12px 15px;
		background: url(../img/bg_fix_sp.png) repeat center center;
	}
	footer #fixBtn li {
		box-sizing: border-box;
		float: left;
		width: 48%;
		margin: 0;
	}
	footer #fixBtn li a{
		display: block;
		padding: 14px;
		margin: 0;
		background: #e87021;
		border-radius: 5px;
		text-align: center;
	}
	footer #fixBtn li a img{
		width: auto;
		max-height: 32px;
	}
	footer #fixBtn li:last-child {
		float: right;
	}
	footer #fixBtn li:last-child a{
		background: #2476d0;
	}
	#pagetop a{
		box-sizing: border-box;
		display: block;
		background: #404040;
		padding: 12px 0;
		text-align: center;
	}
	#pagetop a img{
		width: 24px;
		height: auto;
	}
}

#footer {
	padding:21px 0;
}
#footer .logo{
	float:left;
	margin:5px 0;
}
#footer #ftContact{
	float: right;
}
#footer #ftContact .tel{
	float:left;
	text-align:right;
	margin:8px 0;
}
#footer #ftContact .tel a{
	text-decoration: none;
}
#footer #ftContact .tel span{
	margin:0 5px 0 0;
}

#copyright {
	background:#444;
	padding:10px;
	text-align:center;
	color:#fff;
	font-size:92%;
}

@media screen and (max-width: 599px) {
	#footer {
		box-sizing: border-box;
		padding: 25px 20px;
	}
	#footer .logo{
		float:none;
		padding: 0 35px;
		margin: 0 0 15px;
		text-align: center;
	}
	#footer #ftContact{
		float: none;
	}
	#footer #ftContact .txt01{
		margin:0;
		text-align:center;
		background:#ededed;
	}
	#footer #ftContact .txt01 img{
		width:auto;
		height:28px;
	}
	#footer #ftContact .tel{
		float:none;
		margin:0;
		padding:12px 0;
		text-align:center;
		border-radius:5px;
		box-shadow:0 3px 0 #e0e0e0;
		-webkit-box-shadow:0 3px 0 #e0e0e0;
		-moz-box-shadow:0 3px 0 #e0e0e0;
	}
	#footer #ftContact .tel a{
		text-decoration: none;
	}
	#footer #ftContact .tel .txt02{
		padding:0 44px 10px;
	}
	#footer #ftContact .tel span{
		display: block;
		margin:0;
	}
	#footer #ftContact .tel .number{
		padding:0 29px;
	}
	#footer #ftContact .tel .time{
		padding:10px 60px 0;
	}
	#footer #ftContact .tel .number img,
	#footer #ftContact .tel .time img{
		width:100%;
		height:auto;
	}
	#copyright {
		background:#444;
		padding:10px;
		text-align:center;
		color:#fff;
		font-size:92%;
		line-height: 1.4;
	}
}