@charset "utf-8";
/* CSS Document */





/* =ClearFix */
/* ----------------------------------------------------- */

/*for IE 5.5-7*/
.clearfix{
	zoom: 1;
}
.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}
.clear{
	clear: both;
}



/* =デフォルトStyleを解除 */
/* ----------------------------------------------------- */
body,
h1,h2,h3,h4,h5,h6,
p,ul,ol,dl,dt,dd,li,div,
form,select,option,address,pre,
strong,em{
	margin: 0px;
	padding: 0px;
	font-weight: normal;
	font-style: normal;
	text-decoration: none;
}



/* =初期設定 */
/* ----------------------------------------------------- */

body{
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','yu-gothic',sans-serif;
	color: #555;
	font-size: 12px;
	line-height: 1.7;
	text-align: center;
	letter-spacing:0.08em;
}

.FS2_upper_comment{
	letter-spacing:0;
}

img {
	border:none;
	vertical-align:bottom;
}

li{
	list-style: none;
}

em{
	font-weight: bold;
	text-decoration: none;
}
.small{
	font-size:10px;
}
section{
	position:relative;
}
.flex2,
.flex3 {
	max-width:1000px;
	margin: 0 auto;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
}
.flex2 p{
	width:47%;
}
.flex3 p{
	width:31%;
}

/* =見出し設定 */
/* ----------------------------------------------------- */

h1,h2,h3,h4,h5,h6{font-size: 12px;}



/* =リンク設定 */
/* ----------------------------------------------------- */

a{
outline:none;
text-decoration: none;
}

a:link    {color: #584F49; text-decoration: none;}
a:visited {color: #584F49; text-decoration: none;}
a:hover   {color: #766A63; text-decoration: underline;}
a:active  {color: #584F49; text-decoration: none;}


/* レイアウトスタイル */
/* ----------------------------------------------------- */
a#pagetop{
	position:fixed;
	bottom:100px;
	right:100px;
	z-index:3;
}
div#header{
	overflow:hidden;
	margin:0 auto;
	position:absolute;
	top:0px;
height:1px;
}
div#header h1{
	float:left;
}
div#header h1 p{
	position:absolute;
	top:-9999px;
}
div#header div.logo{
	float:right;
	padding:15px 0 0 0;
}

p.txt_r{
	float:right;
	padding:10px 20px 0 0;
}


.mt10{margin-top:10px;}
.mt20{margin-top:20px;}
.mt30{margin-top:30px;}
.mt40{margin-top:40px;}
.mt50{margin-top:50px;}
.mt60{margin-top:60px;}
.mt70{margin-top:70px;}
.mt80{margin-top:80px;}
.mt90{margin-top:90px;}
.mt100{margin-top:100px;}
.pt10{padding-top:10px;}
.pt20{padding-top:20px;}
.pt30{padding-top:30px;}
.pt40{padding-top:40px;}
.pt50{padding-top:50px;}
.pt60{padding-top:60px;}
.pt70{padding-top:70px;}
.pt80{padding-top:80px;}
.pt90{padding-top:90px;}
.pt100{padding-top:100px;}

.mb10{margin-bottom:10px;}
.mb20{margin-bottom:20px;}
.mb30{margin-bottom:30px;}
.mb40{margin-bottom:40px;}
.mb50{margin-bottom:50px;}
.mb60{margin-bottom:60px;}
.mb70{margin-bottom:70px;}
.mb80{margin-bottom:80px;}
.mb90{margin-bottom:90px;}
.mb100{margin-bottom:100px;}
.pb10{padding-bottom:10px;}
.pb20{padding-bottom:20px;}
.pb30{padding-bottom:30px;}
.pb40{padding-bottom:40px;}
.pb50{padding-bottom:50px;}
.pb60{padding-bottom:60px;}
.pb70{padding-bottom:70px;}
.pb80{padding-bottom:80px;}
.pb90{padding-bottom:90px;}
.pb100{padding-bottom:100px;}

.ta-right{
	text-align:right;
}
img{
 max-width:100%;
}

.color1{
	background:url(../image/bg_page.jpg);}
.color2{
	background: #f3f2ed;}
.color3{
	background:#fafafa;}
.color4{
	background:#fcf8f3;z-index:2;}


.kikan {
	font-size:18px;
	color:#D90000;
	font-weight:bold;
	padding-bottom:40px;
}


@media screen and (min-width: 650px){	
  .br-pc { display:block; }
  .br-sp { display:none; }
}
@media screen and (max-width: 650px){	
  .br-pc { display:none; }
  .br-sp { display:block; }
}
/* ========================================================================================================================
　side
========================================================================================================================= */
#side{
	position: fixed;
	right: 0;
	top: 100px;
	z-index: 100;
}


/* ========================================================================================================================
　bottom
========================================================================================================================= */
#bottom{
	position: fixed;
	right: 0;
	left:0;
	bottom: 0px;
	z-index: 100;
}

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

header h1{
	text-align: center;
	padding: 34px 0;
}
#hdr_area h1{
	float:left;
	text-align: left;
	line-height: 3em;
}

.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;
}

#hdr_area {
    position: relative;
    width: 1130px;
    margin: 0 auto;
}
.back01{
	background:url(../image/bg_lp01.jpg) 0 0 no-repeat,url(../image/bg_lp02.jpg) 100% 0 no-repeat;
}
.back02{
	position:absolute;
	left:0px;
	bottom:-100px;
	z-index:-1;
}
.back03{
	position:absolute;
	right:0px;
	top:-100px;
}

.top{
	position:relative;
	background:url(../image/bg_top-201808.jpg) 100% 0 no-repeat #fcf8f3;
	background-size:contain;
	padding: 6% 0;
}
.top img{
	padding-right:36%;
}
@media screen and (max-width: 767px) {
	
	.fl_menu {
		position: fixed;
		top: 255px;
		right:0;
		width: 220px;
		z-index: 100;
	}
	
	.menulink {
		display: block;
		background: url(../image/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(../image/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%;
	}
	.nav-head-3 {
		    background-color: #745E45;
	}
	.nav-head-3 .nav01{
		    float: left;
    width: 22%;
	}
	.nav-head-3 .nav02,.nav-head-3 .nav03 {
		    float: left;
    width: 39%;
	}
	
}

.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;
	}
	
	
}

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

body {
	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;
}


@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;
	}
	.voice-img {
    width: 96%;
    margin-left: auto;
    margin-right: auto;
}
}


/* ========================================================================================================================
　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
========================================================================================================================= */

.layout_footer .footermenu{
	padding: 15px 0;
	background: #ebe8df;
}
.layout_footer .footermenu a{
	font-size:13px;
}
.layout_footer .footermenu a:not(:last-child):after{
	content:"｜";
	display:inline-block;
	padding:0 5px;
}
div.footer{
	padding:40px 0 50px;
	background: #6d5e44;
}

.copy_txt{
	color:#fff;
}

@media screen and (max-width: 767px) {
	#hdr_area{
		width:100%;
	}
	#hdr_area h1{
		padding: 15px 10px 20px;
		width: 50%;
		box-sizing: content-box;
	}
	#hdr_area h1 p{
		display:none;
	}
	#hdr_area .sp a{
		display:inline-block;
		width:15%;
		margin:10px 1%;
	}
	#hdr_area .sp a img{
		width:100%;
	}
	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%;
	}
	
	.spps5p{padding-left:5%;padding-right:5%;}
	.spps10p{padding-left:10%;padding-right:10%;}
	.spps15p{padding-left:15%;padding-right:15%;}
	.spps20p{padding-left:20%;padding-right:20%;}
	.spps5{padding-left:5px;padding-right:5px;}
	.spps10{padding-left:10px;padding-right:10px;}
	.spps15{padding-left:15px;padding-right:15px;}
	.spps20{padding-left:20px;padding-right:20px;}
	.spps25{padding-left:25px;padding-right:25px;}
	.spps30{padding-left:30px;padding-right:30px;}
	.back01{
		background:#fff;
	}
	.back02{
		background:#fcf8f3;
	}
	
	.flex2,
	.flex3{
		display:block;
	}
	.flex2 p,
	.flex3 p{
		width:100%;
	}
	div.footer{
		padding:40px 0 25%;
	}
}