@charset "UTF-8";

/* ========================================================================================================================
　header
========================================================================================================================= */

header h1{
	text-align: center;
	padding: 34px 0;
}

#hcontact-line{
	background-color: #033572;
	text-align: center;
}

.btn-hcontact-wrap{
	position: relative;
	overflow: hidden;
	min-height: 56px;
	z-index: 101;
	background: #fff;
}

.btn-hcontact-wrap p{
	position: absolute;
	top: 0;
	right: 0;
}

.pc_view_box {
	position: absolute;
	top: 0;
	right: 0;
}

.menu_close {
	text-align: center;
	padding: 20px 80px 0;
}

.menu_close img {
	max-width:100%;
}

.menu_close:before {
	content: "";
	display: none;
	position: fixed;
	top: 0;
	left:0;
	right:0;
	bottom: 0;
	width: 100%;
	height:100%;
	z-index:-1;
	background: rgba(0,0,0,0.6);
}

.fl_menu.active .menu_close:before {
	display: block;
}

@media screen and (max-width: 767px) {
	
	.fl_menu {
		position: fixed;
		top: 255px;
		right:0;
		width: 220px;
		z-index: 100;
	}
	
	.menulink {
		display: block;
		background: url(../../img/wh_disc.png) no-repeat left 10px  center #033572;
		color: #fff;
		text-decoration: none;
		padding: 10px 0 10px 35px;
	}
	
	.pc_view{
		display: none;
	}
	
	[id^=sec] {
		position: relative;
	}
	
	[id^=sec]:before {
		display: block;
		position: relative;
	}
	
	header {
		position: fixed;
		top:0;
		left: 0;
		right:0;
		background: #fff;
		z-index: 100;
	}
	
	header h1{
		text-align: left;
		padding: 7px 0 0;
		width: 40%;
	}
	header h1 img{
		height: auto;
		margin: 0 auto;
		width: 100%;
	}
	#hcontact-line p img{
		height: auto;
		width: 100%;
	}
	.btn-hcontact-wrap p{
		right: 5px;
		width: 120px;
	}
	.btn-hcontact-wrap p img{
		height: auto;
		width: 100%;
	}

	.sp_view_box {
		position: absolute;
		top: 0;
		right: 0;
		width: auto;
		z-index: 100;
	}
	
	.menulink {
		display: block;
		background: url(../../img/wh_disc.png) no-repeat left 10px  center #033572;
		color: #fff;
		text-decoration: none;
		padding: 10px 0 10px 35px;
	}
	
	.fl_menu {
		display: none;
		position: absolute;
		top: auto;
		right:auto;
		width: 100%;
	}
	
}

.menu_header {
	display: none;
}

@media screen and (max-width: 639px) {
	
	header h1{
		padding: 6px 0 0;
		width: 52%;
	}
	
}

@media screen and (max-width: 479px) {
	
	header h1{
		padding: 9px 0 0;
		width: 55%;
	}
	
}

@media screen and (min-width: 768px) {
	.sp_view{
		display: none;
	}
	
	.fl_menu li.menu_close,
	.menu_close {
		display: none;
}

	.fl_menu {
		position: fixed;
		top: 255px;
		right:0;
		width: 80px;
		z-index: 100;
		background: #033572;
	}
	
	.fl_menu li {
		padding: 9px 0;
	}
	
	.fl_menu li:nth-child(2) {
		padding: 20px 0 9px;
	}
	
	.fl_menu li:nth-last-child(2) {
		padding: 9px 0 20px;
	}
	
	.menu_header {
		display: block;
		font-size: 1.6rem;
		font-weight: bold;
		color: #fff;
		text-align: center;
		border-bottom: 1px solid #fff;
	}
	
	.menulink {
		position: relative;
		display: block;
		width: 20px;
		height: 20px;
		font-size: 14px;
		margin: 2px auto;
		border: 4px solid #fff;
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
		-ms-border-radius: 50%;
		-o-border-radius: 50%;
		border-radius: 50%;
		background: #033572;
	}
	
	.current .menulink,
	.menulink:hover {
		width: 24px;
		height: 24px;
		margin:0 auto;
		background: #FFBA10;
	}
	
	.menulink span {
		display:none;
		position: absolute;
		white-space: nowrap;
		top: -7px;
		right: 21px;
		padding: 3px 8px;
		color: #fff;
		text-decoration: none;
		-webkit-border-radius: 2px;
		-moz-border-radius: 2px;
		-ms-border-radius: 2px;
		-o-border-radius: 2px;
		border-radius: 2px;
		background-color: #555;
	}
	
	.menulink:hover span {
		display:block;
	}
	
	.menulink span:after {
		left: 100%;
		top: 50%;
		border: solid transparent;
		content: " ";
		height: 0;
		width: 0;
		position: absolute;
		pointer-events: none;
		border-color: rgba(85, 85, 85, 0);
		border-left-color: #555;
		border-width: 4px 12px;
		margin-top: -4px;
	}
	
}

#hdr_btn {
	position: relative;
	z-index: 1;
	width: 1000px;
	margin: 0 auto;
	}
#hdr_btn p {
	position: absolute;
	left: 702px;
}

#hdr_tel {
	position: relative;
	z-index: 1;
	width: 1000px;
	margin: 0 auto;
	}
#hdr_tel p {
	position: absolute;
	top: 83px;
left: 702px;
}


/* ========================================================================================================================
　body
========================================================================================================================= */

body {
	min-width: 1000px;
	overflow-x: hidden;
}

@media screen and (max-width: 767px) {
	body {
		min-width: inherit;
	}
}


/* ========================================================================================================================
　common
========================================================================================================================= */

/* 切り替え */

.pc-item{
	display: block;
}

.sp-item{
	display: none;
}

@media screen and (max-width: 767px) {
	.pc-item{
		display: none;
	}

	.sp-item{
		display: block;
	}
}


/* hover */

.fadeover a,
button{
	-webkit-transition: 0.2s all linear;-o-transition: 0.2s all linear;
	transition: 0.2s all linear;
	-webkit-opacity: 1;
	-moz-opacity: 1;
	-ms-opacity: 1;
	-o-opacity: 1;
	opacity: 1;
}

.fadeover a:hover,
button:hover{
	-webkit-opacity: 0.7;
	-moz-opacity: 0.7;
	-ms-opacity: 0.7;
	-o-opacity: 0.7;
	opacity: 0.7;
}



/* ========================================================================================================================
　contents
========================================================================================================================= */

#main{
 padding-bottom: 300px;
}

.cmn-sec{
	margin: 0 auto;
	width: 1000px;
}

.cmn-sec02{
	margin: 0 auto;
	width: 910px;
}

.sec-indent34{
	padding: 0 34px;
}

.sec-indent50{
	padding: 0 50px;
}

@media screen and (max-width: 767px) {
	#main{
	 padding-bottom: 100px;
	}

	header {
	}
	
	.cmn-sec,
	.cmn-sec02{
		width: 100%;
		padding:0 15px;
	}

	.sec-indent34{
		padding: 0 15px;
	}

	.sec-indent50{
		padding: 0 15px;
	}
}


/* ========================================================================================================================
　title
========================================================================================================================= */

h2,
h3,
h4{
	text-align: center;
}

@media screen and (max-width: 767px) {
	h2 img,
	h3 img{
		height: auto;
		width: 100%;
	}
}


/* ========================================================================================================================
　main
========================================================================================================================= */

/* ========================================================================================================================
　sec01
========================================================================================================================= */

/* ========================================================================================================================
　sec02
========================================================================================================================= */

/* ========================================================================================================================
　sec03
========================================================================================================================= */

/* ========================================================================================================================
　sec04
========================================================================================================================= */

#sec04{
	padding-bottom: 55px;
	position: relative;
}

#sec04 h3{
	border-bottom: 1px solid #CBCBCB;
	font-size: 4.4rem;
	font-weight: normal;
	margin-bottom: 50px;
	margin-top: 50px;
	padding-bottom: 13px;
}

#sec04 h4{
	color: #2B5186;
	font-weight: normal;
	margin-bottom: 13px;
}

@media screen and (max-width: 767px) {
	#sec04{
		padding-bottom: 0px;
	}

	#sec04 h3{
		font-size: 2.1rem;
		margin-bottom: 34px;
		margin-top: 34px;
	}
}


/* edit-col2 */

.edit-col2 p{
	padding: 15px;
}

.edit-col2 h4{
	font-size: 2.1rem;
}

.edit-col2 .edit-inner div{
	float: left;
	margin-right: 60px;
	width: 470px;
}

.edit-col2 .edit-inner div:nth-child(2n){
	margin-right: 0;
}

@media screen and (max-width: 767px) {
	.edit-col2 h4{
		font-size: 1.8rem;
	}
}


/* edit-col3 */

.edit-col3 h4{
	font-size: 2.1rem;
}

.edit-col3 p{
	box-sizing: border-box;
	padding: 15px;
}

.edit-col3 .edit-inner div{
	float: left;
	margin-right: 50px;
	width: 300px;
}

.edit-col3 .edit-inner div:nth-child(3n){
	margin-right: 0;
}

@media screen and (max-width: 767px) {
	.edit-col3 h4{
		font-size: 1.8rem;
	}

	.edit-col3 .edit-inner div{
		width: 100%;
	}
}


/* edit-col4 */

.edit-col4 h4{
	font-size: 1.8rem;
}

.edit-col4 p{
	padding: 15px;
}

.edit-col4 .edit-inner div{
	float: left;
	margin-right: 20px;
	width: 235px;
}

.edit-col4 .edit-inner div:nth-child(4n){
	margin-right: 0;
}

@media screen and (max-width: 767px) {
	.edit-col4 .edit-inner div{
		margin-right: 0;
	}
}


/* edit-float */

.edit-float h4{
	font-size: 3.0rem;
	margin-bottom: 34px;
	text-align: left;
}

.edit-float .edit-float-l{
	float: left;
}

.edit-float .edit-float-r{
	float: right;
}

.float-img{
	height: auto;
	width: 500px;
}

.float-text{
	width: 450px;
}


@media screen and (max-width: 767px) {
	.edit-float h4{
		font-size: 1.8rem;
		margin: 21px 0;
	}

	.edit-float .edit-float-l,
	.edit-float .edit-float-r{
		float: none;
		margin-top: 0;
		width: 100%;
	}
}


/* 共通style*/

.edit-inner div{
	margin-bottom: 50px;
}

@media screen and (max-width: 767px) {
	.edit-inner div{
		margin-bottom: 21px;
	}

	.edit-col2 .edit-inner,
	.edit-col3 .edit-inner,
	.edit-col4 .edit-inner{
		margin-right: -5%;
	}

	.edit-col2 .edit-inner div,
	.edit-col3 .edit-inner div,
	.edit-col4 .edit-inner div{
		margin-right: 5% !important;
		width: 45%;
	}

	.edit-col2 div img,
	.edit-col3 div img,
	.edit-col4 div img,
	.edit-float .edit-float-l img,
	.edit-float .edit-float-r img{
		width: 100%;
	}
}


/* edit-table */

.edit-table{
	margin-top: 50px;
}

.edit-table table{
	border-left: 1px solid #A7A7A7;
	border-top: 1px solid #A7A7A7;
	width: 100%;
}

.edit-table table th,
.edit-table table td{
	border-right: 1px solid #A7A7A7;
	border-bottom: 1px solid #A7A7A7;
	padding: 24px 34px;
}

.edit-table table th{
	background-color: #E4E4E4;
	text-align: left;
	width: 40%;
}

.edit-table table td{
	width: 60%;
}

@media screen and (max-width: 767px) {
	.edit-table{
		margin-top: 34px;
	}

	.edit-table table th,
	.edit-table table td{
		display: block;
		padding: 13px;
		width: 100%;
	}
}


/* edit-qa */

.edit-qa dt{
	color: #2B5186;
	margin-top: 50px;
}

.edit-qa dd{
	border-bottom: 1px dashed #ccc;
	margin-bottom: 34px;
}

.edit-qa dt,
.edit-qa dd{
	padding: 8px 34px 34px 74px;
	position: relative;
}

.edit-qa dt span,
.edit-qa dd span{
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
}

@media screen and (max-width: 767px) {
	.edit-qa dt{
		margin-top: 34px;
	}

	.edit-qa dd{
		margin-bottom: 21px;
	}

	.edit-qa dt,
	.edit-qa dd{
		padding: 3px 21px 21px 34px;
	}
	.edit-qa dt span,
	.edit-qa dd span{
		height: auto;
		width: 30px;
	}

	.edit-qa dt span img,
	.edit-qa dd span img{
		height: auto;
		width: 100%;
	}
}


/* ========================================================================================================================
　bnr
========================================================================================================================= */

.sec-conversion .pc-item{
	text-align: center;
}

@media screen and (max-width: 767px) {
	.sec-conversion .sp-item{
		width: 100%;
	}

	.sec-conversion .sp-item img{
		height: auto;
		width: 100%;
	}
}


/* ========================================================================================================================
　contact
========================================================================================================================= */

#sec-contact{
	margin-top: 110px;
}

#sec-contact h2{
	border-bottom: 1px solid #d9d9d9;
	border-top: 1px solid #d9d9d9;
	font-size: 3.4rem;
	font-weight: normal;
	margin-bottom: 34px;
	padding: 21px 0;
	text-align: center;
}

#sec-contact p{
	margin-top: 13px;
}

@media screen and (max-width: 767px) {
	#sec-contact{
		margin-top: 50px;
	}

	#sec-contact h2{
		font-size: 2.1rem;
		margin-bottom: 21px;
		padding: 13px 0;
	}
}


/* ========================================================================================================================
　footer
========================================================================================================================= */

footer{
	border-top: 5px solid #033572;
	padding: 55px 0 34px;
	text-align: center;
}

#copyright{
	margin-top: 34px;
}

.sp{
	display:none;
}
@media screen and (max-width: 767px) {
	.pc{
		display:none;
	}
	.sp{
		display:block;
	}
	footer{
		border-top: 3px solid #033572;
		padding: 34px 0 21px;
	}
	#foot-ci{
		margin: 0 auto;
		width: 200px;
	}
	#foot-ci img{
		height: auto;
		width: 100%;
	}
	#copyright{
		margin-top: 13px;
		padding: 0 15px;
	}

	#topcontrol{
		bottom: 120px !important;
		right: 15px !important;
		height: auto;
		width: 55px;
	}
	#topcontrol img{
		height: auto;
		width: 100%;
	}
}