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



#NaviHome a{
		border-bottom:4px solid #004492; 
}
#MvWrapper{
	width: 100%;
	background: url(../img/mv_bg.jpg) 50% 0 no-repeat;
	overflow: hidden;
}
#Mv{
	width: 1120px;
	padding-top: 60px;
	margin: 0 auto;
}
#Mv h2{
	margin-bottom:40px;
}

#Mv p{
	font-size: 22px;
	font-weight: bold;
	margin-bottom: 298px;
}


@supports (-ms-ime-align:auto)  {
#Mv p{
	margin-bottom: 296px;
}
}


.contents{
	width: 1120px;
	margin: 0 auto;
	padding-top: 130px;
	text-align: center;
	overflow: hidden;
}
.contents h2{
	color:#004492;
	font-size: 18px;
	margin-bottom: 30px;
 }
.contents h2 + p{
	font-size: 1.3em;
	font-weight: bold;
	margin-bottom: 17px;
 }
#ConceptWrapper{
	width: 100%;
	background: url(../img/concept_bg.jpg) 50% 0 no-repeat,url(../img/concept_detail_bg.jpg) 50% 250px no-repeat;
	margin: 0;
	padding: 0;
	overflow: hidden	
}
#Concept{
	background: url(../img/concept_title.png) center 100px  no-repeat;
 }
#ConceptDetail{
	padding: 70px 20px 0px;
	text-align:left;
	position: relative;
}
#ConceptDetail dl{
	height: 237px;
	margin-bottom: 229px;
}
#ConceptDetail dl dd{
		font-size: 19px;
	line-height: 1.6;
}
#ConceptDetail dl dt:first-child{
	margin-bottom: 70px;	
}
#ConceptDetail dl dd:nth-child(2){
	width: 260px;
	margin-left: 10px;

}

#ConceptDetail dl dt:nth-child(3){
	position: absolute;
	top:70px;
	left: 600px;
}

#ConceptDetail dl dd:last-child{
	position: absolute;
	top:220px;
	left: 565px;
	width: 250px;
}

#WorksWrapper{
	width: 100%;
	background: url(../img/work_bg.gif) 50% 0 no-repeat;
	overflow: hidden;
	position: relative;
	padding-bottom: 100px;
}
#WorksWrapper:after{
	position: absolute;
	content: url(../img/contents_bg_blue.gif);
	bottom:-2px;
	left: 50%;
	margin-left: -5px;
}
#Works{
	background: url(../img/work_title.png) center 100px  no-repeat;
 }

#Works h2 + p{
	margin-bottom: 100px;
 }


#WorksDetail{
width: 1120px;
display: -webkit-flex; /* Safari */
display: flex;
-webkit-flex-wrap: wrap; /* Safari */
flex-wrap: wrap;
 }
.pic_box{
	text-align: left;
	margin-bottom: 50px;
	width: 320px;
}
.pic_box img{
	border:solid 1px #eee;
	
}
.pic_box img:hover{
	opacity: 0.8
}

.pic {
    cursor: zoom-in;
	margin-bottom: 15px;
}
.pic_title{
	margin:	0;
	
}
.cate{
	margin-bottom: 8px;
	}
.cate span{
	background: #e5e5e5;
	padding: 2px 10px;
	font-size: 12px;
font-family: Roboto, "Droid Sans", "メイリオ", Meiryo, Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
	
#slide_show .pic_title{
	display: none	
}
#slide_show .cate{
	margin: 20px 0px 20px 120px;
	font-weight: bold
}
#slide_show .cate span{
	background: none;
	padding: 2px 10px;
	font-size: 18px;
}
#modal_window img {
    width: 82%;
    margin-right: auto;
    margin-left: auto;
    margin-top: 12px;
    margin-bottom: 12px;
}
.left_box{
	margin-right: 80px;	
}

#ServiceWrapper{
	width:	100%;
	background:url(../img/service_bg.jpg) 50% 0 no-repeat ;	
	overflow: hidden;
	background-size: 100% 100%;
	position: relative
}
#ServiceWrapper:before{
	position: absolute;
	content: url(../img/contents_bg_white.gif);
	top:0px;
	left: 50%;
	margin-left: -5px;
}
#ServiceWrapper:after{
	position: absolute;
	content: url(../img/contents_bg_white.gif);
	bottom:-2px;
	left: 50%;
	margin-left: -5px;
}

#Service{
	background: url(../img/service_title.png) center 100px  no-repeat;
 }
#Service h3{
	font-size: 30px;
  background-image: -moz-linear-gradient( 0deg, rgb(50,92,150) 0%, rgb(0,96,245) 100%, rgb(0,96,245) 100%);
  background-image: -webkit-linear-gradient( 0deg, rgb(50,92,150) 0%, rgb(0,96,245) 100%, rgb(0,96,245) 100%);
  background-image: -ms-linear-gradient( 0deg, rgb(50,92,150) 0%, rgb(0,96,245) 100%, rgb(0,96,245) 100%);
  box-shadow: 0px 20px 15px 0px rgba(159, 163, 167, 0.8);
	color:#fff;
	  width: 580px;
	font-weight: normal;
	padding: 20px;
	margin: 0 auto;	
 }

#Service li{
	float:left;
	width: 373px;
	padding:100px 50px 0px 50px;
}
#Service li h4{
color:#0053d5;
	font-size:20px;
}
#Service li p{
	text-align: left
}

#Service01 li#Kouhinshitsu01{
	background: url(../img/service01_01.png) 50% 50px no-repeat;
}	
#Service01 li#Kouhinshitsu02{
	background: url(../img/service01_02.png) 50% 20px no-repeat;

}
#Service01 li#Kouhinshitsu02 h4{
	margin-bottom: 57px;
}	

#Service01 li#Kouhinshitsu03{
	background: url(../img/service01_03.png) 50% 20px no-repeat;
}	


#Service02{
	clear: both
	
}	
#Service02 li#Teikakaku01{
	background: url(../img/service02_01.png) 50% 40px no-repeat;
}	
#Service02 li#Teikakaku02{
	background: url(../img/service02_02.png) 50% 40px no-repeat;
}	

#Service02 li#Teikakaku03{
	background: url(../img/service02_03.png) 50% 20px no-repeat;
}	



#PlanWrapper{
	width:	100%;
	background:#f3f3f3;	
	overflow: hidden;
	padding-bottom:180px; 
	position: relative
}
#PlanWrapper:before{
	position: absolute;
	content: url(../img/contents_bg_blue.gif);
	top:0px;
	left: 50%;
	margin-left: -5px;
}
#PlanWrapper:after{
	position: absolute;
	content: url(../img/contents_bg_light_blue.gif);
	bottom:-2px;
	left: 50%;
	margin-left: -5px;
}
#Plan{
	background: url(../img/plan_title.png) center 100px  no-repeat;

 }

#Plan h2 + p{
	margin-bottom: 90px

 }
#Plan > ul{
	width: 1058px;
	margin: 0 auto;
}

#Plan > ul >li{
	width: 502px;
	float: left;
	padding: 130px 15px  50px;	
	height: 540px
}
#Plan > ul >li img{
	display: block;
	margin: 0 auto 30px;
}


li#Plan01{
		background-image: url(../img/plan01_bg_top.gif) ,url(../img/plan_bg_bottom.gif),url(../img/plan_bg.gif) ;
			background-position:  top center, bottom center,top center;
			background-repeat: no-repeat,no-repeat,repeat-y;	
	margin-right: 50px;
}
li#Plan01 h3,li#Plan02 h3{
	margin-bottom: 50px;
			font-size: 55px;
	margin-top: 0px;
	vertical-align: bottom

}

li#Plan01 h3 a{
	color:#5d8d12;
	border-bottom:solid 2px #5d8d12;

}

li#Plan02 h3 a{
	color:#0055b6;
	border-bottom:solid 2px #0055b6;
}
li#Plan01 h3 a:hover,li#Plan02 h3 a:hover{
	text-decoration: none;
		border-bottom:none;
}



#Plan li h3 a span{
	font-size: 30px;
}
#Plan li#Plan02{
		background-image: url(../img/plan02_bg_top.gif) ,url(../img/plan_bg_bottom.gif),url(../img/plan_bg.gif) ;
			background-position:  top center, bottom center,top center;
			background-repeat: no-repeat,no-repeat,repeat-y;	
}

#Plan li li{
	text-align: left;
	font-size: 16px;
	font-weight: bold;
	padding:12px 0px 13px 50px;
}
#Plan li#Plan01 li{
	background: url(../img/plan01_list.gif) center left no-repeat;
}

#Plan li#Plan02 li{
	background: url(../img/plan02_list.gif) center left no-repeat;
}


#FlowWrapper{
	width: 100%;
	background: url(../img/flow_bg_pc.jpg) 50% 0 no-repeat;
	overflow: hidden;
	position: relative;
	padding-bottom: 180px;
}
#FlowWrapper:before{
	position: absolute;
	content: url(../img/contents_bg_white.gif);
	top:0px;
	left: 50%;
	margin-left: -5px;
}
#Flow{
	background: url(../img/flow_title.png) center 100px  no-repeat;
 }

#Flow h2{
color:#006ce8;
margin-bottom: 100px;
 }

#FlowDetail{
	margin: 0 auto;
	width: 1000px;
display: -webkit-flex; /* Safari */
display: flex;
-webkit-justify-content: space-between; /* Safari */
  justify-content:         space-between;
}
.flow h3{
color:#006ce8;
	font-size: 24px;
	font-weight: normal
 }

.flow p{
	text-align: left

 }
.flow{
	background: #fff;
  box-shadow: 3.473px 19.696px 30px 0px rgba(200, 200, 196, 0.63);
  width: 206px;
  height: 206px;
	padding: 20px 15px;
	position: relative
}
.flow:before{
	position: absolute;
	content: url(../img/flow01.png);
	left:50%;
	top:-45px;
	margin-left: -6px;
}

#Flow02.flow:before{
	content: url(../img/flow02.png);
	margin-left: -15px;
}
#Flow03.flow:before{
	content: url(../img/flow03.png);
	margin-left: -15px;
}
#Flow04.flow:before{
	content: url(../img/flow04.png);
	margin-left: -18px;
}

#FlowDetail a:link{
	font-weight: bold;
	color: #004492;
	text-decoration: underline;
}

#FlowDetail a:hover{
	text-decoration: none;
	}


#Other{
	margin-top: -40px;
}

#Other div {
	border-left-width: 12px;
	border-left-style: solid;
	border-left-color: #004492;
	margin-right: 40px;
	margin-left: 20px;
	padding-left: 20px;
	margin-bottom: 40px;
	overflow: hidden;
	text-align: left;
}
#Other div h3 {
	color: #004492;
	margin-top: 0px;
}
#Other a {
	background-image: url(../../img/footer_navi_arrow.png);
	background-repeat: no-repeat;
	background-position: left center;
	padding-left: 12px;
	color: #004492;
	margin-left: 20px;
}

#Other h2{
	width: 100%;
	font-size:30px;
	color: #004492;
	border-bottom:1px solid  #004492;
	padding-bottom: 10px;
	text-align: left;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 40px;
	margin-left: 0px;
}


@media screen and (max-width: 767px) {
#MvWrapper{
	background: url(../img/mv_mb_bg.jpg) 0 0 no-repeat;
	background-size: 100%;
}
#Mv{
	width:100%;
	padding-bottom: 82%;

}
#Mv h2{
	text-align: center;
	width:98%;
	margin: 0 auto
}
#Mv h2 img{
	width:100%;
	height: auto;
}

.contents{
	width: 100%;
	padding-top: 45px;

}
.contents h2{
	font-size: 15px;
	margin-bottom: 30px;
 }
.contents h2 + p{
	font-size: 15px;
	margin-bottom: 17px;
	padding: 5px;
	font-weight: normal
 }
#ConceptWrapper{
	width: 90%;
	max-width: 400px;
	background:none;
	margin: 0 auto;
	position: relative
}
#Concept{
	background: url(../img/concept_title.png) center 20px  no-repeat;
	background-size: 150px auto;
	padding-bottom: 80px;
 }

#ConceptWrapper:after{
	position: absolute;
	content: url(../img/contents_bg_light_blue.gif);
	bottom:-3px;
	left: 50%;
	margin-left: -5px;
}
#ConceptDetail{
	padding: 0px;
	text-align:left;	

}
#ConceptDetail dl{
	height: auto;
	margin-bottom: 0px;
	width: 100%;
	position: relative;
	overflow: hidden

}

#ConceptDetail dl dt#Teikakaku{
	border:solid 1px #004492;
	background: url(../img/teikakaku_bg.gif) center bottom no-repeat;
	padding: 50px 20px 10px;
	background-size: 150px auto;
	padding-bottom:250px ;
		margin-top: 50px;
	margin-bottom: 0;
	text-align: center;
	position: relative
}
#ConceptDetail dl dt#Syuukyaku{
	border:solid 1px #004492;
	background: url(../img/syuukyaku_bg.gif) center bottom no-repeat;
	padding: 50px 20px 10px;
	background-size: 150px auto;
	padding-bottom:250px ;
		margin-top: 50px;
	text-align: center;
	top:0px;
	left: 0px;

	position: relative
}

#ConceptDetail dl dt#Teikakaku:before{
	position: absolute;
	content:"";
	background: url(../img/concept_01.gif) no-repeat top center;
	background-size: contain;
	left: 50%;
	top:-30px;
	margin-left: -92px;
	width: 185px;
	height: 37px;
		margin-bottom: 0px;	
}


#ConceptDetail dl dt#Syuukyaku:before{
	position: absolute;
	content:"";
	background: url(../img/concept_02.gif) no-repeat top center;
	background-size: contain;
	left: 50%;
	top:-30px;
	margin-left: -92px;
	width: 185px;
	height: 37px;
}
#ConceptDetail dl dt#Teikakaku img{
	max-width: 560px;
	width: 90%;
	margin: 0 auto	
}
#ConceptDetail dl dt#Syuukyaku img{
	max-width: 560px;
	width: 90%;
	margin: 0 auto	
}
#ConceptDetail dl dd{
		font-size: 16px;
	text-align: center;
	line-height: 1.2;	
}
#ConceptDetail dl dd:nth-child(2){
	position: absolute;
	top: 180px;
    width: 80%;
	margin: 0 ;
	left: 10%
/*	margin: -85% 10% 0px;	*/
}

#ConceptDetail dl dd:last-child{
	position:absolute;
	top: 580px;
    width: 80%;
	margin: 0 ;
	left: 10%

}

	
	


	
	
#WorksWrapper{
	background: #fafaf8;
	padding-bottom: 60px;
		position: relative
}
#WorksWrapper:before{
	position: absolute;
	content: url(../img/contents_bg_blue.gif);
	top:0px;
	left: 50%;
	margin-left: -5px;
}	
#WorksWrapper:after{
	position: absolute;
	content: url(../img/contents_bg_blue.gif);
	bottom:-2px;
	left: 50%;
	margin-left: -5px;
}
#Works{
	background: url(../img/work_title.png) center 70px  no-repeat;
	padding-top: 100px;
	background-size: 150px auto;
 }
#Works h2 + p{
	margin-bottom: 10%;
 }


#WorksDetail{
width: 100%;
 }
	
.pic_box{
	margin: 0px auto;
	height: auto;
	padding-right: 15px;
    padding-left: 15px;
}
.pic {
    margin-bottom: 5px;
	cursor: default

}
.cate{
		  padding: 2px;

}
.cate span{
	padding: 2px 10px;
	background-color: #e5e5e5;
}
	.pic_title{
		margin-bottom:30px;
		
	}

#ServiceWrapper{
	width:	100%;
	background:url(../img/service_bg.jpg) 15% 0 no-repeat ;	
	background-size: cover
}


#Service{
	background: url(../img/service_title.png) center 70px  no-repeat;
	background-size: 150px auto;
	padding-top: 100px;
 }
#Service h3{
	font-size: 18px;
	color:#fff;
	  width: 90%;
	padding: 10px;
	background:none;
	box-shadow: none;
	font-weight: bold;
	border:solid 2px #fff;
	position: relative
 }
#Service ul{
	position: relative;
	padding: 70px 0px 100px;

}
#Service ul:before{
	position: absolute;
	content: "";
	height: 70px;
	width: 1px;
	top:0;
	left: 50%;
	background: url(../img/service_bg_mb.png) repeat-y 50% center;
}
#Service ul:after{
	position: absolute;
	content: "";
	height: 100px;
	width: 1px;
	bottom:0;
	left: 50%;
	background: url(../img/service_bg_mb.png) repeat-y 50% center;
}
#Service #Service02 ul:after{
	display: none

}
#Service li{
	float:none;
	width: 90%;
	max-width: 400px;
	margin: 0 auto 30px;
	padding:100px 20px 20px 30px;
	border:dashed 1px #fff;
	position: relative
}
	
#Service li:before{
	position: absolute;
	content:"";
	background: url(../img/riyuu_01.png) no-repeat top center;
	background-size: contain;
	left: 50%;
	top:20px;
	margin-left: -92px;
	width: 185px;
	height: 37px;
	margin-bottom: 0px;	
}
#Service li:after{
	position: absolute;
	content: "";
	height: 30px;
	width: 1px;
	bottom:-30px;
	left: 50%;
	background: url(../img/service_bg_mb.png) repeat-y 50% center;
}

	
#Service li h4{
color:#fff;
	font-size: 16px;
	margin: 30px auto 20px

}



#Service01 li#Kouhinshitsu01{
	background: url(../img/service01_01.png) 50% 70px no-repeat;
}
#Service01 li#Kouhinshitsu01 h4{
	margin-top: 40px;
	margin-bottom: 20px;
}	

#Service01 li#Kouhinshitsu02{
	background: url(../img/service01_02.png) 50% 70px no-repeat;
}
#Service01 li#Kouhinshitsu02:before{
	background-image: url(../img/riyuu_02.png) ;
}

#Service01 li#Kouhinshitsu02 h4{
	margin-top: 70px;
	margin-bottom: 20px;
}	

#Service01 li#Kouhinshitsu03{
	background: url(../img/service01_03.png) 50% 70px no-repeat;
	margin-bottom: 0px;

}	
#Service01 li#Kouhinshitsu03:before{
	background-image: url(../img/riyuu_03.png);
}
#Service01 li#Kouhinshitsu03:after{
	display: none

}
#Service01 li#Kouhinshitsu03 h4{
	margin-top: 70px;
	margin-bottom: 20px;
}	


#Service02{
	clear: both
	
}	
#Service02 li#Teikakaku01{
	background: url(../img/service02_01.png) 50% 70px no-repeat;
}	
#Service02 li#Teikakaku01 h4{
		margin-top: 50px;
	margin-bottom: 20px;
}	
#Service02 li#Teikakaku02{
	background: url(../img/service02_02.png) 50% 70px no-repeat;
}	
#Service02 li#Teikakaku02:before{
	background-image: url(../img/riyuu_02.png);
}	
#Service02 li#Teikakaku02 h4{
		margin-top: 50px;
	margin-bottom: 20px;
}	

#Service02 li#Teikakaku03{
	background: url(../img/service02_03.png) 50% 70px no-repeat;
}	
#Service02 li#Teikakaku03:before{
	background-image: url(../img/riyuu_03.png);
}
#Service02 li#Teikakaku03:after{
	display: none;

}	
#Service02 li#Teikakaku03 h4{
		margin-top: 70px;
	margin-bottom: 20px;
}	

#Service01 li:first-child,#Service01 li:nth-child(2),#Service01 li:nth-child(3),#Service01 li:last-child{
		background-color:rgba(255,255,255,0.2)
}
	
#PlanWrapper{
	padding-bottom: 70px;
	
		
	}
#Plan{
	background: url(../img/plan_title.png) center 70px  no-repeat;
	background-size: 150px auto;
	padding-top: 100px;
 }
#Plan h2 + p {
    margin-bottom: 10%;
}

#Plan > ul{
	width: 100%;
}

#Plan > ul >li{
	width: 90%;
	background: #fff;
	float: none;
	padding:30px 10px;	
	margin: 0 auto 10px;
	height: auto
	
}

#Plan > ul >li img{
	width: 100px;	
}
li#Plan01{
		background-image: none ;
			background-position:  top center, bottom center,top center;
			background-repeat: no-repeat,no-repeat,repeat-y;	
	margin-right: 50px;
}
li#Plan01 h3,li#Plan02 h3{
			font-size: 25px;


}


#Plan li h3 a span{
	font-size: 16px;
}
#Plan li#Plan02{
		background-image:none ;
			background-position:  top center, bottom center,top center;
			background-repeat: no-repeat,no-repeat,repeat-y;	
}

#Plan li li{
	font-size: 14px;
	font-weight: bold;
	padding:12px 0px 13px 50px;
}
#Plan li#Plan01 li,#Plan li#Plan02 li{
	background-size: 30px 30px;
}



#FlowWrapper{
	background-size:100% auto;
	padding-bottom: 180px;
		background: url(../img/flow_bg_mb.jpg) 50% bottom no-repeat #c9c9c9;
}

#Flow{
	background: url(../img/flow_title.png) center 70px  no-repeat;
	background-size: 150px auto;
	padding-top: 100px;
 }

#Flow h2{
color:#006ce8;
margin-bottom: 50px;
 }

#FlowDetail{
	width: 90%;
display:block;

}
.flow h3{
color:#006ce8;
	font-size: 18px;
	font-weight: normal
 }


.flow{
	background: #fff;
  box-shadow: 3.473px 19.696px 30px 0px rgba(200, 200, 196, 0.63);
	width: 90%;
	max-width: 400px;
	margin: 0 auto 80px;
  height:auto;
	padding: 20px;
}
.flow:before{
	content: url(../img/flow01.png);
	left:50%;
	top:-30px;
	margin-left: -6px;
}
.flow:after{
	position: absolute;
	content:url(../img/flow_list_bg.png);
	left:50%;
	bottom:-40px;
	width: 4px;
	height: 28px;
	margin-left: -2px;	
}
#Flow04.flow:after{
	display: none;

}
#Flow02.flow:before{
	content: url(../img/flow02.png);
	margin-left: -15px;
}
#Flow03.flow:before{
	content: url(../img/flow03.png);
	margin-left: -15px;
}
#Flow04.flow:before{
	content: url(../img/flow04.png);
	margin-left: -18px;
}

#Other{
	margin-top: 0px;
	padding-right: 15px;
	padding-left: 15px;
}

#Other a {

	margin-left: 0px;
}


#Other h2{
	width: 100%;
	font-size:18px;
	border-bottom:1px solid  #004492;
	padding-bottom: 10px;
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 20px;
	margin-left: 0px;
}

#Other div{
	margin-left: 0px;
}

	
}