@charset "UTF-8";
/* CSS Document */
  #FV { 
    position: relative; 
    height:700px; 
    background-image:url("../images/img_main.jpg"); 
    background-position: center top; 
    background-repeat: no-repeat; 
    background-size:cover;
    color:#fff;
  }
  #FV h2 { position: absolute; margin: -120px 0 0 -164px; top:50%; left:50%; width:340px;}
	#FV h2 img { width: 100%; height: auto;}

.content .post_content{
	margin-bottom: 0 !important;
}
  .box-02{
    padding: 0 !important;
  }
	.box-02 .wrap{ 
    flex-wrap: wrap;
    display: flex;
    justify-content: space-between;
    max-width: 1140px;
  }
	.left{
    background: url('../images/img_02.jpg') no-repeat 0 0 / cover;
    width: 55%;
  }
	.left img {
    height: auto;
    line-height: 0;
    max-width: 100%;
    width: 100%;
  }
	.right{
    padding: 50px 0 50px 2.5%;
    width:42.5%;
  }

  .right h2{
    text-align: left;
    width: 100%;
  }
	.ma20 { margin-bottom:20px;}
	.l-height{ line-height:200%;}
	
  .clum2-r,
	.clum2-l { 
    align-content: flex-start;
    display: flex;
    justify-content: space-between;
    position:relative;
  }
  .clum2-r .img,
	.clum2-l .img {
    width: 50%;
  }
  .clum2-r .text,
	.clum2-l .text {
    width: 50%;
  }

  .clum2-r img,
	.clum2-l img {
    display: block;
    height: auto;
    line-height: 0;
    max-width: 100%;
    width: 100%;
  }

  .clum2-l .text{
    padding: 10px 10px 0 0;
  }
	.clum2-r { 
    flex-wrap: wrap;
  }
  .clum2-r .img{
    order: 1;
  }
  .clum2-r .text{
    order: 2;
    padding: 40px 0 0 0;
    width: 49%;
  }

  #service h3{
 /*   background: #f6f3ee;
    border-bottom: 2px solid #178bb1; */
    font-family: 'Shippori Mincho','ヒラギノ明朝 ProN W3','Hiragino Mincho ProN','HiraMinProN-W3','游明朝','Yu Mincho', serif;
    font-size: 24px;
    font-weight: 400;
/*    padding: 20px; */
    position: relative;
  }
/*
  #service h3 span{
    font-size: 14px;
    width: 42%;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    line-height: 1.5;
  }
*/
	table { 
    table-layout: fixed;
    margin: 10px 0 0;
    width:100%;
  }
	table td, 
  table th { 
    padding:5px;
    line-height: 1.5;
  }
	table th{
    vertical-align: top; 
    width:20%;
  }
	table th span{ 
    padding:5px ; 
    background:#97aeb6 ; 
    color:#fff; 
    font-size:14px; 
    font-weight:normal;
  }
	table td p{ 
    line-height:120%;
  }
	table td p span{
    font-size:12px;
  }

  #voice{
    margin-top: 30px;
    padding: 80px 0;
    position: relative;
  }
#voice h2 img{
	height: 40px !important;
}
  #voice::before{
    background: -moz-linear-gradient(left,  rgba(145,160,163,0) 0%, rgba(145,160,163,0.01) 1%, rgba(145,160,163,0.65) 52%, rgba(145,160,163,0) 100%);
    background: -webkit-linear-gradient(left,  rgba(145,160,163,0) 0%,rgba(145,160,163,0.01) 1%,rgba(145,160,163,0.65) 52%,rgba(145,160,163,0) 100%);
    background: linear-gradient(to right,  rgba(145,160,163,0) 0%,rgba(145,160,163,0.01) 1%,rgba(145,160,163,0.65) 52%,rgba(145,160,163,0) 100%);
    content: '';
    left: 50%;
    height: 2px;
    opacity: .5;
    position: absolute;
    top: -3px;
    transform: translateX(-50%);
    width: 70%;
  }
  #voice .wrap{
    display: flex;
    justify-content: flex-start;
    max-width: 1140px !important;
}

  #voice article{
	 margin: 0 1%;
    position: relative;
    width: 18%;
  }
  #voice article::before{
    background: url('../images/icon_vocie.png') no-repeat center center / contain;
    content: '';
    display: block;
    height: 50px;
    margin: 0 auto 20px;
    width: 50px;
  }
  #voice article .inner{
    background: #e8f2f6;
    border-radius: 10px;
    padding: 20px;
    position: relative;
  }
  #voice article:nth-child(odd) .inner{
    background: #edf1f2;
  }

  #voice article .inner::before{
    border:10px transparent solid; 
    border-top-width: 0;
    border-bottom-color: #e8f2f6;
    content: '';
    display: block;
    height: 0; 
    left: 50%;
    position: absolute;
    top: -10px;
    transform: translateX(-50%);
    width:0; 
  }

  #voice article:nth-child(odd)  .inner::before{
    border-bottom-color: #edf1f2;
  }

  #voice article h3{
    font-family: 'Shippori Mincho','ヒラギノ明朝 ProN W3','Hiragino Mincho ProN','HiraMinProN-W3','游明朝','Yu Mincho', serif;
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 10px;
    position: relative;
  }

  #voice article p{
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 10px;
  }

  #voice article time{
    display: block;
    font-size: 12px;
    line-height: 1.5;
    text-align: right;
  }

	
/**** form ****/
	#formWrap { 
/*		background:#f7f7f7; */
		margin: 0 auto; 
		padding: 0;  
  }
	#formWrap h4 { 
		margin-bottom: 0;
		padding: 15px; 
		font-size:16px; 
		background:#eaeaea; 
		text-align:center;
  }
	#formWrap h4 span { margin-top:10px; display:block; font-weight: normal; font-size:12px;}
	#formWrap h4 span b, .capt span{ color:#e20201}


	
.box-01 h2 img,.box-03 h2 img,
.box-04 h2 img,.box-05 h2 img,
#voice h2 img{ width: auto; height:60px;}


@media screen and (min-width: 1200px) and (max-width: 1450px)   {
  	#FV { 
      height:500px; 
    }
  	#FV h2 { margin: -120px 0 0 -170px; top:50%; left:50%; width:320px; height:auto;}
}

@media screen and (max-width: 980px) {
  
  .box-02{
    padding: 20px 0 !important;
  }
	.box-02 .wrap{ 
    flex-wrap: wrap;
    display: flex;
    justify-content: space-between;
    max-width: 1140px;
  }
	.left{
    display: none;
  }
	.right{
    padding: 0px 0 50px;
    width: 100%;
  }
  .right h2{
    background: url('../images/img_02.jpg') no-repeat 100% 0 / auto 100%;

    margin-bottom: 10px;
    padding: 70px 0 50px;
  }
	.box-02 h2 img{ 
    width: auto; 
    height:15vw;
  }
  .clum2-r,
	.clum2-l { 
    flex-wrap: wrap;
  }
  .clum2-r .img,
	.clum2-l .img {
    order: 2;
    width: 100%;
  }
  .clum2-r img,
	.clum2-l img {
    margin: 10px auto 30px;
    max-width: 500px;
    width: 85%;
  }
  .clum2-r .text,
	.clum2-l .text {
    order: 1;
    width: 100%;
  }

  .clum2-l .text{
    padding: 0 10px;
  }
  .clum2-r .text{
    order: 2;
    padding: 0 10px;
  }
  
  #service h3{
    font-size: 20px;
/*    padding: 15px; */
  }
  #service h3 span{
    font-size: 12px;
  }
  
  table th{
    width: 25%;
  }
  table th span{
    font-size: 13px;
  }
  table td{
    width: 75%;
  }
	table td,
  table th { 
    font-size: 13px;
    padding:7px; 
  }
  #voice .wrap{
    flex-wrap: wrap;
  }
  #voice article{
    margin-bottom: 20px;
    width: 48%;
  }
  
  #voice article::before{
    height: 40px;
    width: 40px;
  }
  #voice article h3{
    font-size: 14px;
  }

  #voice article p{
    font-size: 12px;
  }

  #voice article time{
    font-size: 10px;
  }
}
@media screen and (min-width: 769px) and (max-width: 1199px) {
	
  #FV { 
    height:400px;
  }
  #FV h2 { 
    margin: -120px 0 0 -145px; 
    top:50%; 
    left:50%; 
    width:290px; 
    height:auto;
  }
	
	.box-01 h2 img,
  .box-03 h2 img,
  .box-04 h2 img,
  .box-05 h2 img{ 
    width: auto; height:50px;
  }
  
	h2 { 
    width:90%; 
    margin-bottom:30px;
  }
	
	
	
	.ma-t20{ padding-top:20px;}
}

@media screen  and (max-width: 768px) {
	#FV {
      background-image: url(../images/img_main_sp.jpg);
		height: 65vw;
  }
  #FV h2 { 
    margin: -21vw 0 0 0; 
    top:50%; 
    left:10%; 
    text-align:left; 
    width: 42vw;
    height:auto;
  }
	
	.contact_box{
		width: 100%;
	}
	
	#formWrap h4 { 
	  font-size: 14px;
	}
}
@media screen and (min-width: 641px) and (max-width: 768px) {
	
	.box-01 h2 img,
  .box-03 h2 img,
  .box-05 h2 img{ 
    width: auto; 
    height:50px;
  }
	h2 { 
    width:90%; 
    margin-bottom:30px;
  }
	
	.ma-t20{ padding-top:20px;}
	
}
@media screen and (min-width: 482px) and (max-width: 640px)  {
  
	.box-01 h2 img,.box-03 h2 img,.box-05 h2 img{ width: auto; height:40px;}
	h2 { width:90%; margin-bottom:30px;}
	
	.ma-t20{ padding-top:20px;}
}
	
@media screen  and (max-width: 482px)  {
	main .wrap { width:85% !important;}
	
	.box-01 h2 img,.box-03 h2 img,
	.box-04 h2 img,.box-05 h2 img{ width: auto; height: 30px;}
	
	#voice h2 img{ width: auto; height:20px !important;}
	
	main h2 { width:90%; margin: 0 auto 30px;}
	
	.l-height { line-height: 150%; font-size:12px; text-align:left;}
	.ma-t20{ padding-top:20px;}

	
	[class^="bt-"] { width:100% ; height:50px; line-height:50px; font-size:14px;}
	[class^="bt-"] img { right:10px; top:18px;}
	
	.small { margin-top:5px; font-size: 10px;}
	
}