@charset "utf-8";
@import "common.css";

/*------------------------------
		  contents
------------------------------*/
#contents{
	width:100%;
	padding-bottom: 109px;
	background: url(../img/common/bgContentBottom.jpg) 50% 100% no-repeat;
}
#contents .bgContents {
	background: #3EB0FC;
}
@media only screen and (max-width: 767px) {
	#contents{
		background: url(../img/common/bgContentBottomSp.png) bottom center no-repeat #3FB1FB;
		background-size:100% auto;
		padding-bottom:140px;
	}
}


/*------------------------------
		  contact
------------------------------*/
#contact {
	background: url(../img/common/bgContentTop.jpg) 50% top no-repeat;
	padding-top: 5px;
}
.contentHead {
	width: 1036px;
	margin: 0 auto 10px;
}
#contact .titPage {
	margin: 12px 0 5px 10px;
}
.contactArea {
	background: url(../img/common/bgAreaTop.png) left top no-repeat;
	width: 1000px;
	margin: 0 auto;
	padding-top: 5px;
	position: relative;
}
.edContactArea {
	background: url(../img/common/bgAreaBottom.png) left bottom no-repeat;
	padding-bottom: 5px;;
}
.bdContactArea {
	background: url(../img/common/bgArea.png) repeat-y;
	padding-bottom: 140px;
}
.co .bdContactArea {
	padding-bottom: 160px;
}
.ok .bdContactArea {
	padding-bottom: 0;
}
.contactAreaIn {
	width: 910px;
	margin: 0 auto;
}
.contactArea .intro {
	font-size: 13px;
	font-weight: normal;
	line-height: 1.2;
	margin-bottom: 26px;
	padding: 26px 0 29px;
	border-bottom: solid 1px #ccc;
}
.contactArea .process {
	margin-bottom: 11px;
}
.contactArea .notice {
	margin: 0 0 15px 14px;
	line-height: 1.83;
	list-style-type: disc;
}
.contactArea .hitsu {
	background: url(../img/contact/bgRequired.png) no-repeat;
	width: 30px;
	height: 20px;
	padding-left: 5px;
	display: inline-block;
	color: #fff;
}
@media only screen and (max-width: 767px) {
	#contact{
		background-size:200% auto;
	}
	.contactArea{
		width:90%;
		background:#fff;
		border-radius: 5px;
	}
	.contentHead {
		width:100%;
	}
	.edContactArea{
		background:#fff;
		border-radius: 5px;
		padding-bottom:30px;
	}
	.contactAreaIn{
		width:90%;
	}
	.contactArea .intro{
		padding:30px 0 20px;
		line-height:1.5;
	}
	.contactArea .process{
		margin-bottom:10px;
	}
	.spFormList{
		font-size:0;
	}
	.spFormList .tabForm{
		display:inline-block;
		vertical-align:top;
		font-weight:bold;
		font-size:12px;
		line-height:1.5;
		background:#F5F5F5;
		width:33%;
		margin-right:0.33%;
		text-align:center;
		padding:10px 0;
	}
	.spFormList .tabForm.active{
		background:#3EB0FC;
		color:#fff;
	}
	.contactArea .notice{
	    margin: 20px 0 15px 14px;
	}
	.co .bdContactArea{ padding-bottom:10px;}
	.bdContactArea{
		background:none;
		padding-bottom:0px;
	}
}
/*----- error -----*/
.alert {
	margin-bottom: 12px;
	line-height: 1.83;
	color: #FF0000;
}
.alert01,
.alert02,
.alert03,
.alert04,
.alert05,
.alert06 {
	display: none;
}
.alert a{
	color:#f00;
	text-decoration:none;
}

/*----- contactForm -----*/
.contactArea table {
	width: 910px;
	margin-bottom: 23px;
	border-collapse: separate;
	border-spacing: 1px;
	background: #ccc;
}
.contactArea table tr {
	border-bottom: solid 1px #ccc;
	border-top: solid 1px #666;
	padding-bottom: 4px;
}
.contactArea table th {
	width: 134px;
	border: solid 1px #fff;
	font-weight: normal;
	text-align: left;
	vertical-align: middle;
}
.contactArea table th.gray {
	background-color: #f0f0f0;
	padding: 20px 12px;
	font-size: 13px;
	line-height: 1.3;
}
.contactArea table th.grayH {
	background-color: #f0f0f0;
	padding: 25px 12px;
	font-size: 13px;
}
.contactArea table th.grayL {
	background-color: #f0f0f0;
	padding: 67px 12px;
	font-size: 13px;
}
.contactArea table th.grayL02 {
	background-color: #f0f0f0;
	padding: 20px 12px;
	font-size: 13px;
}
.contactArea table th .hitsu {
	background-position: 0 1px;
	height: 22px;
	line-height: 1.6;
}
.contactArea table td {
	background: #fff;
	vertical-align: middle;
	padding-left: 19px;
}
.contactArea table td input {
	background: #f5f5f5;
	height: 29px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border: solid 1px #ccc;
	border-radius: 3px;
}
.contactArea table td textarea {
	background: #f5f5f5;
	width: 595px;
	height: 112px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border: solid 1px #ccc;
	border-radius: 3px;
}
.contactArea table .ls input {
	width: 498px;
}
.contactArea table .ms input {
	width: 248px;
}
.contactArea table .sh input {
	width: 158px;
}
.contactArea .noticePrivacy {
	text-align: center;
	line-height: 1.2;
}
.contactArea table td .txtAttention{
	color:#f00;
	display:inline-block;
	padding:4px 0 0;
}

.contactArea table td.consultationTd input{
	height:15px;
}

/*----- submit -----*/
.contactArea .btnContact {
	width: 355px;
	height: 60px;
	margin: 0 auto;
	padding: 0;
	border-style: none;
	cursor: pointer;
	position: absolute;
	bottom: 66px;
	left:0;
	right: 0;
	display:block;
}
.contactArea .btnContactCo {
	width: 355px;
	height: 60px;
	margin: 0 auto;
	padding: 0;
	border-style: none;
	cursor: pointer;
	position: absolute;
	bottom: 66px;
	left:0;
	right: 0;
	display:block;
}
.contactArea .list {
	font-size:0;
	padding-bottom:5px;
}
.contactArea .list:last-child {
	padding-bottom:0px;
}
.contactArea .list li{
	display:inline-block;
	vertical-align:middle;
	font-size:12px;
	padding-right:20px;
}
@media only screen and (max-width: 767px) {
	.contactArea table {
		width:100%;
		margin:0 ;
		display:block;
		box-sizing:border-box;
		border: solid 1px #ccc;
		border-bottom:none;
	}
	.contactArea tbody,
	.contactArea tr,
	.contactArea th,
	.contactArea td{ 
		display:block;
		box-sizing:border-box;
	}
	.contactArea table tr{ 
		padding-bottom:0;
		border-top:none;
	}
	.contactArea table th{
		width:100%;
	}
	.contactArea table th.gray{ padding:20px 5%;}
	.contactArea table th.grayL{ padding:20px 5%;}
	.contactArea table td{ padding:20px 5%;}
	.contactArea table .ls input,
	.contactArea table .ms input,
	.contactArea table .sh input{
		width:100%;
		height:45px;
		padding:5px;
		box-sizing:border-box;
	}
	.contactArea table td textarea{
		width:100%;
		height:150px;
		padding:5px;
		box-sizing:border-box;
	}
	.contactArea table td .txtAttention{ padding:5px 0 0;}
	.contactArea .btnContact,
	.contactArea .btnContactCo {
		width:80%;
		height:auto;
		position:static;
		margin:30px auto 0;
	}
	.contactArea .list{ padding-bottom:0;}
	.contactArea .list li{
		display:block;
		padding-bottom:5px;
		font-size:12px;
	}
	.contactArea .noticePrivacy{
		line-height:1.7;
		padding-top:30px;
	}
	.contactArea .list:last-child li:last-child{ padding-bottom:0;}
}
/*----- page Top -----*/
.toTop {
	position: absolute;
	bottom: -83px;
	right:-100px;
}

/*------------------------------
		  ok
------------------------------*/
.ok .contactArea {
	background: url(../img/contact/bgContactArea02.png) no-repeat;
	height: 448px;
}
@media only screen and (max-width: 767px) {
	.ok .contactArea {
		background: #fff;
		height: auto;
		border-radius: 5px;
	}
}

/*------------------------------
		  co
------------------------------*/
.contactArea .txtComplete {
	line-height: 1.83;
}
.contactArea .btnReturn {
	display: block;
	width: 355px;
	margin: 63px auto 0;
}
@media only screen and (max-width: 767px) {
	.contactArea .txtComplete{
		padding-top:20px;
	}
	.contactArea .btnReturn{
		width:80%;
		margin:30px auto 0;
	}
}
/*------------------------------
		  footer
------------------------------*/
#footer{
	background:#242424 url(../img/common/bgFooter.gif) left top repeat-x;
}

/*----- footerLogo -----*/
#footer .logoFooter{
	width:300px;
	margin:0 auto;
	padding:30px 0 31px;
}

/*----- footMenu -----*/
.footMenu{
	color:#ccc;
	width:1004px;
	margin:0 auto;
	padding:0 0 6px 0;
}
.footMenu .menuBox{
	width:184px;
	float:left;
	margin:0 0 0 21px;
}
.footMenu .menuBox.mostLeft{
	margin:0;
}
.menuBox .siteLink{
	display:block;
	width:184px;
	height:59px;
}
.menuBox .siteLink.siteBg01{ background:url(../img/index/btnFootMenu01.jpg) left top no-repeat; }
.menuBox .siteLink.siteBg02{ background:url(../img/index/btnFootMenu02.jpg) left top no-repeat; }
.menuBox .siteLink.siteBg03{ background:url(../img/index/btnFootMenu03.jpg) left top no-repeat; }
.menuBox .siteLink.siteBg04{ background:url(../img/index/btnFootMenu04.jpg) left top no-repeat; }
.menuBox .siteLink.siteBg05{ background:url(../img/index/btnFootMenu05.jpg) left top no-repeat; }
.menuBox .siteLink.siteBg06{ background:url(../img/index/btnFootMenu06.jpg) left top no-repeat; }
.menuBox .siteLink.siteBg07{ background:url(../img/index/btnFootMenu07.jpg) left top no-repeat; }
.menuBox .siteLink.siteBg08{ background:url(../img/index/btnFootMenu08.jpg) left top no-repeat; }
.menuBox .siteLink.siteBg09{ background:url(../img/index/btnFootMenu09.jpg) left top no-repeat; }
.menuBox .siteLink:hover{ background-position:right top; }
.menuBox .siteTxt{
	text-align:center;
	font-size:11px;
	padding:12px 0 27px;
}

/*----- footNavi -----*/
.footNavi a{ color:#fff; }
.footNavi a:hover{ color:#ccc; }
.footNavi{ color:#fff; }

#footer .footNavi{
	background:url(../img/index/bgFootNavi.gif) left top repeat-y;
}
.footNavi .naviBox{
	background:url(../img/index/bgFootNavi.gif) right top repeat-y;
}
@media only screen and (max-width: 767px) {
	#footer .logoFooter{
		width:43%;
		margin:0 auto;
	    padding: 27px 0 21px;
	}
	.footMenu{
		width:90.5%;
	}
	.footMenu .menuBox{
		width:49%;
		margin:0;
		margin-bottom:10px;
	}
	.footMenu .menuBox .siteLink.siteBg02,
	.footMenu .menuBox .siteLink.siteBg05{
		margin-left:2%;
	}
	.menuBox .siteLink{
		width:100%;
		height:auto;
	}
	.menuBox .siteTxt{
	    padding: 12px 0 2px;
	}
}