@charset "utf-8";

/* cleafix */
#pageHeader,
#mudagane > .inner{
	zoom:1;
}
#pageHeader:after,
#mudagane > .inner:after{
	content: "";
	display: block;
	clear: both;
}

body{
	min-width: 1020px;
	background: #e9e3df;
}
#page{
	position: relative;
	margin: 0 auto;
}
#pageHeader{
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	background-color: #FFF;
}
#pageHeader > .inner{
	width: 1020px;
	margin: 0 auto;
}
#pageHeader > .inner > *{
	vertical-align: middle;
}
#pageHeader #logo{
	float: left;
	width: 170px;
	padding-top: 16px;
	text-align: center;
}
#pageHeader #copy{
	float: left;
	width: 240px;
	padding-top: 17px;
}
#pageHeader #mainNav{
	float: right;
}
#pageHeader #mainNav li{
	float: left;
	height: 74px;
	background: url("/img/icn_nav_arrow.png") 0 50% no-repeat;
}
#pageHeader #mainNav li a{
	display: table-cell;
	vertical-align: middle;
	height: 70px;
	padding: 0 15px;
	border-bottom: 4px solid #FFF;
}
#pageHeader #mainNav li a.hover,
#pageHeader #mainNav li a:hover{
	border-bottom: 4px solid #6B4730;
}
#pageBody{
	padding-top: 74px;
}
#pageBody .section{
	margin-bottom: 0px;
}

#pageBody .separateCts{
	width: 1020px;
	margin: 0 auto 20px;
	line-height:1.5em;
	color: #6B4730;
	font-size: 19px;
	background: #e9e3df;
	padding: 40px 0;
	text-align: center;
}
#pageBody .separateCts p{
	margin-bottom: 24px;
}
#pageBody .separateCts p:last-child{
	margin-bottom: 0;
}
#pageBody .separateCts .accentuation{
	color: #ff8040;
	font-weight: normal;
}

#pageBody .separateCts2{
	width: 1020px;
	margin: 0 auto 40px;
	color: #6a4833;
	font-size: 22px;
	background: #fdd000;
	padding: 20px 0;
	text-align: center;
}
#pageBody .separateCts2 p{
	margin-bottom: 24px;
        font-weight:bold;
}
#pageBody .separateCts2 p:last-child{
	margin-bottom: 0;
}
#pageBody .separateCts2 .accentuation{
	color: #ff8040;
	font-weight: normal;
}

#pageFooter{
	background-color: #F1C11B;
}
#pageFooter > .inner{
	width: 1020px;
	margin: 0 auto;
	padding: 45px 0 35px;
	text-align: center;
}
#pageFooter > .inner .company{
	margin-bottom: 10px;
}
#pageFooter > .inner .address{
	margin-bottom: 20px;
}
#pageFooter > .inner .tel{
	margin-bottom: 12px;
}
#pageFooter > .inner .fax{
	margin-bottom: 8px;
}
#pageFooter > .inner .email{
	margin-bottom: 25px;
}

/* top-head */
#top_head{
	text-align: center;
	background:#e9e3df;
	position: relative;
	height: 125px;
	width: 1020px;
	margin: 0 auto;
}
.head_logo{
width:280px;
text-align:center;
margin:10px 0px;
}

/* top */
#top{
	text-align: center;
	color: #FFF;
	font-size: 38px;
	background: url("/img/bg_top.jpg") 50% 0 repeat-x #f2c526;
}
#top .inner{
	position: relative;
	height: 400px;
	width: 1020px;
	margin: 0 auto;
}
#top .copy01{
	position: absolute;
	top: 170px;
	left: 20px;
}
#top .copy02{
	position: absolute;
	top: 22px;
	right: 20px;
}
#top .copy03 p{
	margin-bottom: 10px;
}
#top .copy03 p:last-child{
	margin-bottom: 0;
}

/* characteristic*/
#characteristic{
	padding: 20px 0 20px;
	background-color: #FFF;
      height:1270px;
      margin:0 auto;
}
#characteristic > .inner{
	width: 1020px;
	margin: 0 auto;
	background-color: #FFF;
}

.chara-text{
width:900px;
height:auto;
padding:20px 0;
}

.chara-box img{
width:450px;
margin:10px 10px
}

.chara-box{
margin:10px;
width:468px;
height:300px;
float:left;
}

.chara-box p{
margin:10px;
}

.chara-box2 img{
width:450px;
margin:10px 10px
}

.chara-box2{
margin:10px;
width:468px;
height:auto;
float:left;
}


/* mudagane */

#mudagane{
	padding: 40px 0;
	background-color: #FFF;
}
#mudagane > .inner{
	width: 1020px;
	margin: 0 auto;
	background-color: #FFF;
}
#mudagane > .inner > li{
	float: left;
	width: 510px;
}
#mudagane > .inner .mudagane01{
	background-color: #EEE;
}
#mudagane > .inner .mudagane02 > .content,
#mudagane > .inner .mudagane03 > .content,
#mudagane > .inner .mudagane04 > .content,
#mudagane > .inner .mudagane05 > .content,
#mudagane > .inner .mudagane06 > .content{
	padding: 25px;
	color: #6C462C;
	border-right: 1px solid #EEE;
}
#mudagane > .inner .headerTxt{
	margin-bottom: 25px;
	line-height: 1.6;
}

#mudagane > .inner > li h2{
	display: table;
	width: 100%;
	font-weight: normal;
}
#mudagane > .inner > li h2 span{
	display: table-cell;
	height: 114px;
	vertical-align: middle;
	color: #FFF;
	line-height: 1;
}
#mudagane > .inner > li h2 .num{
	background-color: #F1C11B;
	width: 108px;
	text-align: center;
	padding-right: 6px;
	font-size: 56px;
	font-style: italic;
}
#mudagane > .inner > li h2 .title{
	border-top: 1px solid #EEE;
	border-bottom: 1px solid #EEE;
	color: #6C462C;
	font-size: 28px;
	padding-left: 24px;
}


#needs{
	padding: 40px 0;
	background-color: #FFF;
	text-align: center;
}
#needs2{
	padding: 20px 0;
	background-color: #FFF;
	text-align: center;
}

#renoba{
	text-align: center;
}
#renoba > .header{
	text-align: center;
	padding: 40px 0;
	background-color: #F1C11B;
}
#renoba > .body{
	padding: 40px 0;
	background-color: #FFF;
	text-align: center;
}
#renoba > .text{
	padding: 0px 0px 40px;
	background-color: #FFF;
	text-align: center;
        font-size:1.3em;
}
#renoba2{
	text-align: center;
}
#renoba2 > .header{
	text-align: center;
	padding: 40px 0;
	background-color: #fdd000;
}

#renoba2 > .header h2{
font-size:1.5em;
margin:0 0 20px;
}

#reasonList p.title{
	margin-bottom: 40px;
}
#reasonList .title span{
	display: inline-block;
	padding: 0 60px 20px;
	border-bottom: 1px solid #6C462C;
}
#reasonList ul{
	padding: 0 40px;
	margin: 0 auto;
	font-size: 16px;
	text-align: left;
}
#reasonList ul li{
	padding-left: 50px;
	padding-bottom: 25px;
}
#reasonList ul li:last-child{
	padding-bottom: 0;
}
#reasonList ul li.list01{
	background: url("/img/icn_reason_01.png") 0 0 no-repeat;
}
#reasonList ul li.list02{
	background: url("/img/icn_reason_02.png") 0 0 no-repeat;
}
#reasonList ul li.list03{
	background: url("/img/icn_reason_03.png") 0 0 no-repeat;
}

#example{
	width: 1020px;
	margin: 0 auto;
	background-color: #FFF;
}
#example > .header{
	position: relative;
	background: url("/img/bg_example_header.jpg") 0 0 no-repeat;
	height: 722px;
	text-align: center;
}
#example > .header .headerTxt{
	position: absolute;
	top: 500px;
	width: 100%;
	padding: 30px 0;
	font-size: 20px;
	color: #6C462C;
	background-color: #FFF;
}
#example > .body{
	padding: 0 25px 25px;
	color: #6C462C;
	background-color: #FFF;
}
#example > .body h2{
	font-size: 62px;
	font-weight: normal;
	font-style: italic;
	border-bottom: 1px solid #EEE;
	padding: 20px 0 0 30px;
	height: 104px;
	overflow: hidden;
}
#example > .body li{
	margin-bottom: 25px;
}
#example > .body li:last-child{
	margin-bottom: 0;
}
#example > .body li.list01{
	background: url("/img/bg_example_01_header.jpg") 0 0 no-repeat;
}
#example > .body li.list02{
	background: url("/img/bg_example_02_header.jpg") 0 0 no-repeat;
}
#example > .body li.list03{
	background: url("/img/bg_example_03_header.jpg") 0 0 no-repeat;
}
#example > .body .before{
	padding: 80px 30px 30px 215px;
	font-size: 20px;
	color: #777;
	background: url("/img/bg_example_before.png") 30px 30px no-repeat #FFF;
}
#example > .body .after{
	padding: 80px 30px 30px 215px;
	font-size: 20px;
	color: #FFF;
	background: url("/img/bg_example_after.png") 30px 30px no-repeat #6C462D;
}
#example > .body .before .headerTxt,
#example > .body .after .headerTxt{
	font-size: 20px;
	margin-bottom: 20px;
}

#voice{
	padding: 40px 0;
	background-color: #fff;
	text-align: center;
}

#contact{
	background-color: #FFF;
	text-align: center;
}
#contact > .inner{
	width: 1020px;
	margin: 0 auto;
	padding: 40px 0;
}
#contact iframe{
	width: 980px;
	height: 660px;
	margin: 0 auto;
}
#contact .headerTxt{
	color: #6C462D;
	padding-bottom: 20px;
	margin-bottom: 40px;
	border-bottom: 1px solid #EEE;
}


#formWrap{
	background-color: #FFF;
}

.jirei{
	margin:10px 0px;
}

.spmenu{
	display:none;
}
.spmenu_btn{
	display:none;
}
.separateCts{
  clear:both;
}

@media screen and (min-width:768px){
    .sp{
        display: none;
    }
  
}
@media screen and (max-width:767px){

body{
	max-width: 766px;
	min-width: initial;
}

#pageHeader #logo{
	float: left;
	width: 100%;
}
#logo img{
width:65%;
}

#top{
	background: url("/img/bg_top_sp.jpg") 50% 0 repeat-x #f2c526;
}

#pageHeader{
	position: absolute;
}

#pageHeader > .inner{
	width: 100%;
	margin: 0 auto;
}

#pageBody .separateCts{
	width: 90%;
	margin: 10px auto;
}

#pageHeader > .inner{
	width: 100%;
	margin: 0 auto;
}
.chara-box{
	float:none;
	width:90%;
}

    .chara-box img{
	width:90%;
}
.chara-box2{
margin:0px;
width:90%;
background-color:#fff;
clear:both;
}

.chara-box2 img{
width:90%;
}

#pageHeader #mainNav{
	display: none;
}
#characteristic{
	height:auto;
overflow:hidden;
}
#characteristic > .inner{
	width: 90%;
	margin: 0 auto;
	background-color: #FFF;
}
.chara-text{
	width:100%;
}

#pageFooter > .inner{
	width: 100%;
	padding: 45px 0px 35px;
}
#pageFooter > .inner .company img{
	width:80%;
}
#pageFooter > .inner .address{
	width:90%;
margin:10px auto;
}
#pageFooter > .inner .address img{
	width:90%;
margin:10px auto;
}
#pageFooter > .inner .tel{
	width:90%;
margin:10px auto;
}
#pageFooter > .inner .tel img{
	width:90%;
margin:10px auto;
}
#pageFooter > .inner .fax{
	width:90%;
margin:10px auto;
}
#pageFooter > .inner .email{
	width:90%;
margin:10px auto;
}
#copyright{
width:380px
}
#top_head{
  width: 90%;
  margin: 0 auto;
}
.head_logo{
  width:200px;
  margin:30px auto;
}

#top .inner{
  position: relative;
  height: 380px;
  width: 90%;
  margin: 0 auto;
}

#top .copy03 img{
  width:100%;
}
#needs img{
width:90%;
}
#renoba2{
	text-align: center;
}
#renoba2 > .header{
	width:100%;
}

#renoba2 > .header img{
	width:90%;
}
#renoba > .body img{
	width:90%;
}
#example{
	width: 100%;
}
#example > .header{
	background: url("/img/bg_example_header_sp.jpg") 0 0 no-repeat;
height:600px;
}
#example > .header .headerTxt{
	position: absolute;
	top: 330px;
	width: 90%;
margin-left:20px;
}
#example > .body{
	width:100%;
}
#example > .body h2{
	font-size: 30px;
}
#example > .body img{
	width:85%;
float:left;
 	margin:0px;
}
#example > .body .before{
	padding: 30px 0px 0px 150px;
margin:0px;
	font-size: 15px;
	color: #777;
	background: url("/img/bg_example_before_sp.png") 30px 30px no-repeat #FFF;
display:block;
}

#example > .body .after{
	padding: 30px 0px 30px 150px;
	font-size: 15px;
	color: #FFF;
	background: url("/img/bg_example_after_sp.png") 30px 30px no-repeat #6C462D;
clear:both;
height:280px;
}

#example > .body .before .headerTxt,
#example > .body .after .headerTxt{
	font-size: 15px;
	margin: 0 10px 20px 0;
width:200px
}

#example > .body{
	padding: 0 0px 25px;
}

#voice img{
	width:90%;
    margin:20px 0px 0px;
}

#needs2 img{
	width:90%;
	margin:0px;

}
#contact > .inner{
	width:100%;
}
#contact iframe{
	width: 90%;
	height: 1050px;
}
#formWrap .formTable{
	width: 100%;
	border-spacing: 0;
	border-collapse: collapse;
	border: 1px solid #EEE;
	color: #666;
	margin-bottom: 30px;
}

/* form design */
input[type="text"],
input[type="url"],
input[type="tel"],
select,
textarea{
	width: auto;
	border:1px solid #CCC;
	background-color:#FFFFFF;
	font-size:40%;
	padding:4px;
	margin-right:5px;
}

input[type="text"],
input[type="url"],
input[type="tel"]{
	width: 70%;
}
input[type="number"],
input[type="float"]{
	width: 60px;
}

#formWrap .formTable th{
	display:block;
width:350px;
}
#formWrap .formTable td{
	padding: 20px;
	border: 1px solid #EEE;
	display:block;
}

.spmenu_btn {
    display:block;
    position:absolute;
    top:25px;
    right:10px;
    width:30px;
    height:22px;
    background:#000;
    border-top:10px solid #fff;
    border-bottom:10px solid #fff;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    -moz-transition:all 0.3s;
    -webkit-transition:all 0.3s;
    transition:all 0.3s;
}
.spmenu_btn:before {
    content:'';
    position:absolute;
    width:30px;
    height:2px;
    background:#000;
    top:-9px;
    right:0;
    -moz-transition:all 0.3s;
    -webkit-transition:all 0.3s;
    transition:all 0.3s;
}
.spmenu_btn:after {
    content:'';
    position:absolute;
    width:30px;
    height:2px;
    background:#000;
    bottom:-9px;
    right:0;
    -moz-transition:all 0.3s;
    -webkit-transition:all 0.3s;
    transition:all 0.3s;
}
.spmenu_btn.active {
    background:#FFF;
}
.spmenu_btn.active:before {
    -moz-transform:rotate(-135deg);
    -webkit-transform:rotate(-135deg);
    transform:rotate(-135deg);
    top:0;
    right:0;
}
.spmenu_btn.active:after {
    -moz-transform:rotate(135deg);
    -webkit-transform:rotate(135deg);
    transform:rotate(135deg);
    bottom:0;
    right:0;
}
 
.spmenu {
    display:none;
    position:absolute;
    top:51px;
    left:0;
    width:100%;
    background:#000;
}
nav {
    display:block;
    width:100%;
    margin:0 auto;
}
nav li a {
    display:block;
    width:100%;
    color:#FFF;
    padding:15px;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    position:relative;
    border-bottom:1px solid #999;
}

}